# Operation

Each time a user operates on the sheet, an array of Op will be emiited through onOp callback. An op describes how to modify the current data to reach the new data after the user's operation. For example, here is an op when user sets the cell font to be bold on cell A2.

[
    {
        "op": "replace",
        "id": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

The op is useful for database modification and syncing state in online collabration.

A working example with Express (backend server) and MongoDB (data persistence) is avaiable in backend-demo folder.

Run it with node index.js and visit Collabration example (opens new window)

You can initialize data by visiting http://localhost:8081/init

# Format

Each Op has the following structure.

{
    "op": string,
    "id": string,
    "path": any[],
    "value": any
}

where

Field Description
op Operation name, should be one of add, remove, replce, insertRowCol, deleteRowCol, addSheet, deleteSheet
id Sheet id of the operation
path Path of the value to be updated
value Value to be updated

# Operation name

Name Description
add Add the value to path
replace Replace the value at path
remove Remove the value at path
insertRowCol Special op, see insertRowCol
deleteRowCol Special op, see deleteRowCol
addSheet Special op, see addSheet
deleteSheet Special op, see deleteSheet

# Special ops

Special ops are ops that are hard to be described by add, replace or remove, because the op data size will be too large.

# insertRowCol

Indicates that user performed row or column insertion.

value will be in the format:

{
  type: "row" | "column";
  index: number;
  count: number;
  direction: "lefttop" | "rightbottom";
  id: string;
}

where

Field Description
type row or column
index Start index of row or column to be inserted
count Amount of the rows or columns to insert
direction Insert direction, lefttop or rightbottom
id id of the operated sheet

# deleteRowCol

Indicates that user performed row or column deletion.

value will be in the format:

{
  type: "row" | "column";
  start: number;
  end: number;
  id: string;
}

where

Field Description
type row or column
start Start index of row or column to be deleted
end End index of row or column to be deleted
id id of the operated sheet

# addSheet

Indicates that user created a new sheet.

value will be the new sheet data.

# deleteSheet

Indicates that user deleted a sheet.

value will be in the format

{
  id: string;
}

where

Field Description
id id of the sheet to be deleted