Handle concurrent editing and styling in Tree (#803)

We will use maxCreatedAtMapByActor until the introduction of
VersionVector.

Author: raararaara

src/api/converter.ts

@@ -444,6 +444,10 @@ function toOperation(operation: Operation): PbOperation {
     );
     pbTreeStyleOperation.from = toTreePos(treeStyleOperation.getFromPos());
     pbTreeStyleOperation.to = toTreePos(treeStyleOperation.getToPos());
+    const pbCreatedAtMapByActor = pbTreeStyleOperation.createdAtMapByActor;
+    for (const [key, value] of treeStyleOperation.getMaxCreatedAtMapByActor()) {
+      pbCreatedAtMapByActor[key] = toTimeTicket(value)!;
+    }
 
     const attributesToRemove = treeStyleOperation.getAttributesToRemove();
     if (attributesToRemove.length > 0) {
@@ -1177,6 +1181,12 @@ function fromOperation(pbOperation: PbOperation): Operation | undefined {
     const pbTreeStyleOperation = pbOperation.body.value;
     const attributes = new Map();
     const attributesToRemove = pbTreeStyleOperation.attributesToRemove;
+    const createdAtMapByActor = new Map();
+    Object.entries(pbTreeStyleOperation!.createdAtMapByActor).forEach(
+      ([key, value]) => {
+        createdAtMapByActor.set(key, fromTimeTicket(value));
+      },
+    );
 
     if (attributesToRemove.length > 0) {
       return TreeStyleOperation.createTreeRemoveStyleOperation(
@@ -1196,6 +1206,7 @@ function fromOperation(pbOperation: PbOperation): Operation | undefined {
         fromTimeTicket(pbTreeStyleOperation!.parentCreatedAt)!,
         fromTreePos(pbTreeStyleOperation!.from!),
         fromTreePos(pbTreeStyleOperation!.to!),
+        createdAtMapByActor,
         attributes,
         fromTimeTicket(pbTreeStyleOperation!.executedAt)!,
       );

src/api/yorkie/v1/resources.proto

@@ -134,6 +134,7 @@ message Operation {
     map<string, string> attributes = 4;
     TimeTicket executed_at = 5;
     repeated string attributes_to_remove = 6;
+    map<string, TimeTicket> created_at_map_by_actor = 7;
   }
 
   oneof body {

src/api/yorkie/v1/resources_pb.d.ts

@@ -788,6 +788,11 @@ export declare class Operation_TreeStyle extends Message<Operation_TreeStyle> {
    */
   attributesToRemove: string[];
 
+  /**
+   * @generated from field: map<string, yorkie.v1.TimeTicket> created_at_map_by_actor = 7;
+   */
+  createdAtMapByActor: { [key: string]: TimeTicket };
+
   constructor(data?: PartialMessage<Operation_TreeStyle>);
 
   static readonly runtime: typeof proto3;

src/api/yorkie/v1/resources_pb.js

@@ -286,6 +286,7 @@ const Operation_TreeStyle = proto3.makeMessageType(
     { no: 4, name: "attributes", kind: "map", K: 9 /* ScalarType.STRING */, V: {kind: "scalar", T: 9 /* ScalarType.STRING */} },
     { no: 5, name: "executed_at", kind: "message", T: TimeTicket },
     { no: 6, name: "attributes_to_remove", kind: "scalar", T: 9 /* ScalarType.STRING */, repeated: true },
+    { no: 7, name: "created_at_map_by_actor", kind: "map", K: 9 /* ScalarType.STRING */, V: {kind: "message", T: TimeTicket} },
   ],
   {localName: "Operation_TreeStyle"},
 );

src/document/crdt/rga_tree_split.ts

@@ -437,19 +437,19 @@ export class RGATreeSplitNode<
   /**
    * `canDelete` checks if node is able to delete.
    */
-  public canDelete(editedAt: TimeTicket, latestCreatedAt: TimeTicket): boolean {
+  public canDelete(editedAt: TimeTicket, maxCreatedAt: TimeTicket): boolean {
     return (
-      !this.getCreatedAt().after(latestCreatedAt) &&
+      !this.getCreatedAt().after(maxCreatedAt) &&
       (!this.removedAt || editedAt.after(this.removedAt))
     );
   }
 
   /**
    * `canStyle` checks if node is able to set style.
    */
-  public canStyle(editedAt: TimeTicket, latestCreatedAt: TimeTicket): boolean {
+  public canStyle(editedAt: TimeTicket, maxCreatedAt: TimeTicket): boolean {
     return (
-      !this.getCreatedAt().after(latestCreatedAt) &&
+      !this.getCreatedAt().after(maxCreatedAt) &&
       (!this.removedAt || editedAt.after(this.removedAt))
     );
   }
@@ -532,23 +532,23 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
    * @param range - range of RGATreeSplitNode
    * @param editedAt - edited time
    * @param value - value
-   * @param latestCreatedAtMapByActor - latestCreatedAtMapByActor
+   * @param maxCreatedAtMapByActor - maxCreatedAtMapByActor
    * @returns `[RGATreeSplitPos, Map<string, TimeTicket>, Array<Change>]`
    */
   public edit(
     range: RGATreeSplitPosRange,
     editedAt: TimeTicket,
     value?: T,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [RGATreeSplitPos, Map<string, TimeTicket>, Array<ValueChange<T>>] {
     // 01. split nodes with from and to
     const [toLeft, toRight] = this.findNodeWithSplit(range[1], editedAt);
     const [fromLeft, fromRight] = this.findNodeWithSplit(range[0], editedAt);
 
     // 02. delete between from and to
     const nodesToDelete = this.findBetween(fromRight, toRight);
-    const [changes, latestCreatedAtMap, removedNodeMapByNodeKey] =
-      this.deleteNodes(nodesToDelete, editedAt, latestCreatedAtMapByActor);
+    const [changes, maxCreatedAtMap, removedNodeMapByNodeKey] =
+      this.deleteNodes(nodesToDelete, editedAt, maxCreatedAtMapByActor);
 
     const caretID = toRight ? toRight.getID() : toLeft.getID();
     let caretPos = RGATreeSplitPos.of(caretID, 0);
@@ -584,7 +584,7 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
       this.removedNodeMap.set(key, removedNode);
     }
 
-    return [caretPos, latestCreatedAtMap, changes];
+    return [caretPos, maxCreatedAtMap, changes];
   }
 
   /**
@@ -845,7 +845,7 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
   private deleteNodes(
     candidates: Array<RGATreeSplitNode<T>>,
     editedAt: TimeTicket,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [
     Array<ValueChange<T>>,
     Map<string, TimeTicket>,
@@ -861,7 +861,7 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
     const [nodesToDelete, nodesToKeep] = this.filterNodes(
       candidates,
       editedAt,
-      latestCreatedAtMapByActor,
+      maxCreatedAtMapByActor,
     );
 
     const createdAtMapByActor = new Map();
@@ -889,9 +889,9 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
   private filterNodes(
     candidates: Array<RGATreeSplitNode<T>>,
     editedAt: TimeTicket,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [Array<RGATreeSplitNode<T>>, Array<RGATreeSplitNode<T> | undefined>] {
-    const isRemote = !!latestCreatedAtMapByActor;
+    const isRemote = !!maxCreatedAtMapByActor;
     const nodesToDelete: Array<RGATreeSplitNode<T>> = [];
     const nodesToKeep: Array<RGATreeSplitNode<T> | undefined> = [];
 
@@ -901,13 +901,13 @@ export class RGATreeSplit<T extends RGATreeSplitValue> {
     for (const node of candidates) {
       const actorID = node.getCreatedAt().getActorID();
 
-      const latestCreatedAt = isRemote
-        ? latestCreatedAtMapByActor!.has(actorID)
-          ? latestCreatedAtMapByActor!.get(actorID)
+      const maxCreatedAt = isRemote
+        ? maxCreatedAtMapByActor!.has(actorID)
+          ? maxCreatedAtMapByActor!.get(actorID)
           : InitialTimeTicket
         : MaxTimeTicket;
 
-      if (node.canDelete(editedAt, latestCreatedAt!)) {
+      if (node.canDelete(editedAt, maxCreatedAt!)) {
         nodesToDelete.push(node);
       } else {
         nodesToKeep.push(node);

src/document/crdt/text.ts

@@ -191,7 +191,7 @@ export class CRDTText<A extends Indexable = Indexable> extends CRDTGCElement {
     content: string,
     editedAt: TimeTicket,
     attributes?: Record<string, string>,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [Map<string, TimeTicket>, Array<TextChange<A>>, RGATreeSplitPosRange] {
     const crdtTextValue = content ? CRDTTextValue.create(content) : undefined;
     if (crdtTextValue && attributes) {
@@ -200,11 +200,11 @@ export class CRDTText<A extends Indexable = Indexable> extends CRDTGCElement {
       }
     }
 
-    const [caretPos, latestCreatedAtMap, valueChanges] = this.rgaTreeSplit.edit(
+    const [caretPos, maxCreatedAtMap, valueChanges] = this.rgaTreeSplit.edit(
       range,
       editedAt,
       crdtTextValue,
-      latestCreatedAtMapByActor,
+      maxCreatedAtMapByActor,
     );
 
     const changes: Array<TextChange<A>> = valueChanges.map((change) => ({
@@ -221,7 +221,7 @@ export class CRDTText<A extends Indexable = Indexable> extends CRDTGCElement {
       type: TextChangeType.Content,
     }));
 
-    return [latestCreatedAtMap, changes, [caretPos, caretPos]];
+    return [maxCreatedAtMap, changes, [caretPos, caretPos]];
   }
 
   /**
@@ -238,7 +238,7 @@ export class CRDTText<A extends Indexable = Indexable> extends CRDTGCElement {
     range: RGATreeSplitPosRange,
     attributes: Record<string, string>,
     editedAt: TimeTicket,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [Map<string, TimeTicket>, Array<TextChange<A>>] {
     // 01. split nodes with from and to
     const [, toRight] = this.rgaTreeSplit.findNodeWithSplit(range[1], editedAt);
@@ -256,16 +256,16 @@ export class CRDTText<A extends Indexable = Indexable> extends CRDTGCElement {
     for (const node of nodes) {
       const actorID = node.getCreatedAt().getActorID();
 
-      const latestCreatedAt = latestCreatedAtMapByActor?.size
-        ? latestCreatedAtMapByActor!.has(actorID)
-          ? latestCreatedAtMapByActor!.get(actorID)!
+      const maxCreatedAt = maxCreatedAtMapByActor?.size
+        ? maxCreatedAtMapByActor!.has(actorID)
+          ? maxCreatedAtMapByActor!.get(actorID)!
           : InitialTimeTicket
         : MaxTimeTicket;
 
-      if (node.canStyle(editedAt, latestCreatedAt)) {
-        const latestCreatedAt = createdAtMapByActor.get(actorID);
+      if (node.canStyle(editedAt, maxCreatedAt)) {
+        const maxCreatedAt = createdAtMapByActor.get(actorID);
         const createdAt = node.getCreatedAt();
-        if (!latestCreatedAt || createdAt.after(latestCreatedAt)) {
+        if (!maxCreatedAt || createdAt.after(maxCreatedAt)) {
           createdAtMapByActor.set(actorID, createdAt);
         }
         toBeStyleds.push(node);

src/document/crdt/tree.ts

@@ -577,9 +577,19 @@ export class CRDTTreeNode extends IndexTreeNode<CRDTTreeNode> {
   /**
    * `canDelete` checks if node is able to delete.
    */
-  public canDelete(editedAt: TimeTicket, latestCreatedAt: TimeTicket): boolean {
+  public canDelete(editedAt: TimeTicket, maxCreatedAt: TimeTicket): boolean {
     return (
-      !this.getCreatedAt().after(latestCreatedAt) &&
+      !this.getCreatedAt().after(maxCreatedAt) &&
+      (!this.removedAt || editedAt.after(this.removedAt))
+    );
+  }
+
+  /**
+   * `canStyle` checks if node is able to style.
+   */
+  public canStyle(editedAt: TimeTicket, maxCreatedAt: TimeTicket): boolean {
+    return (
+      !this.getCreatedAt().after(maxCreatedAt) &&
       (!this.removedAt || editedAt.after(this.removedAt))
     );
   }
@@ -747,7 +757,8 @@ export class CRDTTree extends CRDTGCElement {
     range: [CRDTTreePos, CRDTTreePos],
     attributes: { [key: string]: string } | undefined,
     editedAt: TimeTicket,
-  ) {
+    maxCreatedAtMapByActor: Map<string, TimeTicket> | undefined,
+  ): [Map<string, TimeTicket>, Array<TreeChange>] {
     const [fromParent, fromLeft] = this.findNodesAndSplitText(
       range[0],
       editedAt,
@@ -756,13 +767,30 @@ export class CRDTTree extends CRDTGCElement {
 
     const changes: Array<TreeChange> = [];
     const value = attributes ? parseObjectValues(attributes) : undefined;
+    const createdAtMapByActor = new Map<string, TimeTicket>();
     this.traverseInPosRange(
       fromParent,
       fromLeft,
       toParent,
       toLeft,
       ([node]) => {
-        if (!node.isRemoved && !node.isText && attributes) {
+        const actorID = node.getCreatedAt().getActorID();
+        let maxCreatedAt: TimeTicket | undefined = maxCreatedAtMapByActor
+          ? maxCreatedAtMapByActor!.has(actorID)
+            ? maxCreatedAtMapByActor!.get(actorID)!
+            : InitialTimeTicket
+          : MaxTimeTicket;
+
+        if (
+          node.canStyle(editedAt, maxCreatedAt) &&
+          !node.isText &&
+          attributes
+        ) {
+          maxCreatedAt = createdAtMapByActor!.get(actorID);
+          const createdAt = node.getCreatedAt();
+          if (!maxCreatedAt || createdAt.after(maxCreatedAt)) {
+            createdAtMapByActor.set(actorID, createdAt);
+          }
           if (!node.attrs) {
             node.attrs = new RHT();
           }
@@ -784,7 +812,7 @@ export class CRDTTree extends CRDTGCElement {
       },
     );
 
-    return changes;
+    return [createdAtMapByActor, changes];
   }
 
   /**
@@ -844,7 +872,7 @@ export class CRDTTree extends CRDTGCElement {
     splitLevel: number,
     editedAt: TimeTicket,
     issueTimeTicket: (() => TimeTicket) | undefined,
-    latestCreatedAtMapByActor?: Map<string, TimeTicket>,
+    maxCreatedAtMapByActor?: Map<string, TimeTicket>,
   ): [Array<TreeChange>, Map<string, TimeTicket>] {
     // 01. find nodes from the given range and split nodes.
     const [fromParent, fromLeft] = this.findNodesAndSplitText(
@@ -859,7 +887,7 @@ export class CRDTTree extends CRDTGCElement {
     const nodesToBeRemoved: Array<CRDTTreeNode> = [];
     const tokensToBeRemoved: Array<TreeToken<CRDTTreeNode>> = [];
     const toBeMovedToFromParents: Array<CRDTTreeNode> = [];
-    const latestCreatedAtMap = new Map<string, TimeTicket>();
+    const maxCreatedAtMap = new Map<string, TimeTicket>();
     this.traverseInPosRange(
       fromParent,
       fromLeft,
@@ -883,23 +911,23 @@ export class CRDTTree extends CRDTGCElement {
         }
 
         const actorID = node.getCreatedAt().getActorID();
-        const latestCreatedAt = latestCreatedAtMapByActor
-          ? latestCreatedAtMapByActor!.has(actorID)
-            ? latestCreatedAtMapByActor!.get(actorID)!
+        const maxCreatedAt = maxCreatedAtMapByActor
+          ? maxCreatedAtMapByActor!.has(actorID)
+            ? maxCreatedAtMapByActor!.get(actorID)!
             : InitialTimeTicket
           : MaxTimeTicket;
 
         // NOTE(sejongk): If the node is removable or its parent is going to
         // be removed, then this node should be removed.
         if (
-          node.canDelete(editedAt, latestCreatedAt) ||
+          node.canDelete(editedAt, maxCreatedAt) ||
           nodesToBeRemoved.includes(node.parent!)
         ) {
-          const latestCreatedAt = latestCreatedAtMap.get(actorID);
+          const maxCreatedAt = maxCreatedAtMap.get(actorID);
           const createdAt = node.getCreatedAt();
 
-          if (!latestCreatedAt || createdAt.after(latestCreatedAt)) {
-            latestCreatedAtMap.set(actorID, createdAt);
+          if (!maxCreatedAt || createdAt.after(maxCreatedAt)) {
+            maxCreatedAtMap.set(actorID, createdAt);
           }
 
           // NOTE(hackerwins): If the node overlaps as an end token with the
@@ -1003,7 +1031,7 @@ export class CRDTTree extends CRDTGCElement {
       }
     }
 
-    return [changes, latestCreatedAtMap];
+    return [changes, maxCreatedAtMap];
   }
 
   /**