feat: add some new features for collaborative editing

- add editor 'sceneChange' event - add editor.setContents method - add editor.applyChanges method - move AutoSavaGraphs class from @suika/core to @suika/suika - remove SceneGraph.children - yjs sync demo
F-star · Jul 7, 2024 · efdbb8b · efdbb8b
1 parent 2862a3b
commit efdbb8b
Show file tree

Hide file tree

Showing 32 changed files with 1,228 additions and 995 deletions.
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -12,19 +12,21 @@
     "build": "tsc && vite build"
   },
   "devDependencies": {
-    "@types/uuid": "^9.0.2",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.throttle": "^4.1.7",
+    "@types/uuid": "^9.0.2",
     "vite": "^4.2.0"
   },
   "dependencies": {
+    "@types/lodash.pick": "^4.4.9",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.omit": "^4.5.0",
+    "lodash.pick": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "uuid": "^9.0.0"
   }

diff --git a/packages/common/src/lodash.ts b/packages/common/src/lodash.ts
@@ -2,6 +2,7 @@ import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
 import isEqual from 'lodash.isequal';
 import omit from 'lodash.omit';
+import pick from 'lodash.pick';
 import throttle from 'lodash.throttle';
 
-export { cloneDeep, debounce, isEqual, omit, throttle };
+export { cloneDeep, debounce, isEqual, omit, pick, throttle };
diff --git a/packages/core/src/commands/add_graphs.ts b/packages/core/src/commands/add_graphs.ts
@@ -9,9 +9,8 @@ export class AddGraphCmd implements ICommand {
     private elements: SuikaGraphics[],
   ) {}
   redo() {
-    // TODO: 放回原来的 parent 下
-    this.editor.sceneGraph.addItems(this.elements);
     for (const el of this.elements) {
+      el.setDeleted(false);
       const parent = el.getParent();
       if (parent) {
         parent.insertChild(el, el.attrs.parentIndex?.position);
@@ -21,12 +20,9 @@ export class AddGraphCmd implements ICommand {
     this.editor.selectedElements.setItems(this.elements);
   }
   undo() {
-    this.editor.sceneGraph.removeItems(this.elements);
     this.elements.forEach((el) => {
-      const parent = el.getParent();
-      if (parent) {
-        parent.removeChild(el);
-      }
+      el.setDeleted(true);
+      el.removeFromParent();
     });
 
     this.editor.selectedElements.clear();

diff --git a/packages/core/src/control_handle_manager/control_handle.ts b/packages/core/src/control_handle_manager/control_handle.ts
@@ -21,7 +21,7 @@ export class ControlHandle {
   rotation?: number;
   transform?: IMatrixArr;
   type: string;
-  graph: SuikaGraphics;
+  graphics: SuikaGraphics;
   padding: number;
   /** rotation will follow rotated bbox */
   isTransformHandle: boolean;
@@ -35,7 +35,7 @@ export class ControlHandle {
     rotation?: number;
     transform?: IMatrixArr;
     padding?: number;
-    graph: SuikaGraphics;
+    graphics: SuikaGraphics;
     hitTest?: HitTest;
     getCursor: GetCursorFn;
     isTransformHandle?: boolean;
@@ -50,11 +50,13 @@ export class ControlHandle {
     }
     this.type = attrs.type;
     this.padding = attrs.padding ?? 0;
-    this.graph = attrs.graph;
+    this.graphics = attrs.graphics;
     this.getCursor = attrs.getCursor;
     if (attrs.hitTest) {
       this.hitTest = attrs.hitTest;
     }
     this.isTransformHandle = attrs.isTransformHandle ?? false;
+
+    this.graphics.cancelCollectUpdate();
   }
 }
diff --git a/packages/core/src/control_handle_manager/control_handle_manager.ts b/packages/core/src/control_handle_manager/control_handle_manager.ts
@@ -166,14 +166,14 @@ export class ControlHandleManager {
     const s = this.transformHandles.get('s')!;
     const w = this.transformHandles.get('w')!;
     const e = this.transformHandles.get('e')!;
-    n.graph.attrs.width = s.graph.attrs.width =
+    n.graphics.attrs.width = s.graphics.attrs.width =
       rect.width * zoom - handleSize - handleStrokeWidth;
-    w.graph.attrs.height = e.graph.attrs.height =
+    w.graphics.attrs.height = e.graphics.attrs.height =
       rect.height * zoom - handleSize - handleStrokeWidth;
-    n.graph.attrs.height =
-      s.graph.attrs.height =
-      w.graph.attrs.width =
-      e.graph.attrs.width =
+    n.graphics.attrs.height =
+      s.graphics.attrs.height =
+      w.graphics.attrs.width =
+      e.graphics.attrs.width =
         neswHandleWidth;
 
     const heightTransform = new Matrix()
@@ -208,7 +208,7 @@ export class ControlHandleManager {
     const ctx = this.editor.ctx;
     const rotate = rect ? getTransformAngle(rect.transform) : 0;
     handles.forEach((handle) => {
-      const graph = handle.graph;
+      const graph = handle.graphics;
       if (graph.type === GraphicsType.Path) {
         // TODO:
       } else {
@@ -281,7 +281,7 @@ export class ControlHandleManager {
             handle.padding,
             selectedBox,
           )
-        : handle.graph.hitTest(hitPointVW.x, hitPointVW.y, handle.padding);
+        : handle.graphics.hitTest(hitPointVW.x, hitPointVW.y, handle.padding);
 
       if (isHit) {
         return {
@@ -315,7 +315,7 @@ export class ControlHandleManager {
       maxY: bottomRight.y,
     };
     return this.customHandles.filter((handle) =>
-      handle.graph.intersectWithBox(box),
+      handle.graphics.intersectWithBox(box),
     );
   }
 

diff --git a/packages/core/src/control_handle_manager/util.ts b/packages/core/src/control_handle_manager/util.ts
@@ -142,12 +142,13 @@ export const createTransformHandles = (
 
   const opts = {
     doc,
+    noCollectChange: true,
   };
 
   /********************** resize handle  *******************/
   // north-west
   const nw = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'nw',
         ...getDefaultAttrs(),
@@ -161,7 +162,7 @@ export const createTransformHandles = (
   });
 
   const ne = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'ne',
         ...getDefaultAttrs(),
@@ -175,7 +176,7 @@ export const createTransformHandles = (
   });
 
   const se = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'se',
         ...getDefaultAttrs(),
@@ -189,7 +190,7 @@ export const createTransformHandles = (
   });
 
   const sw = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'sw',
         ...getDefaultAttrs(),
@@ -205,7 +206,7 @@ export const createTransformHandles = (
   /************************* rotation handle  **********************/
   const rotationHandleSize = params.size * 2.5;
   const nwRotation = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'nwRotation',
         ...getDefaultAttrs(),
@@ -221,7 +222,7 @@ export const createTransformHandles = (
   });
 
   const neRotation = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'neRotation',
         ...getDefaultAttrs(),
@@ -237,7 +238,7 @@ export const createTransformHandles = (
   });
 
   const seRotation = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'seRotation',
         ...getDefaultAttrs(),
@@ -253,7 +254,7 @@ export const createTransformHandles = (
   });
 
   const swRotation = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'swRotation',
         ...getDefaultAttrs(),
@@ -279,11 +280,11 @@ export const createTransformHandles = (
     if (!rect || rect.width === 0 || rect.height === 0) {
       return false;
     }
-    return this.graph.hitTest(x, y, tol);
+    return this.graphics.hitTest(x, y, tol);
   };
 
   const n = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'n',
         ...getDefaultAttrs(),
@@ -297,7 +298,7 @@ export const createTransformHandles = (
     isTransformHandle: true,
   });
   const e = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'e',
         ...getDefaultAttrs(),
@@ -312,7 +313,7 @@ export const createTransformHandles = (
   });
 
   const s = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 's',
         ...getDefaultAttrs(),
@@ -327,7 +328,7 @@ export const createTransformHandles = (
   });
 
   const w = new ControlHandle({
-    graph: new SuikaRect(
+    graphics: new SuikaRect(
       {
         objectName: 'w',
         ...getDefaultAttrs(),