@netless/forge-whiteboard 1.0.0-alpha.1 → 1.0.1

package/dist/whiteboard.esm.js

@@ -25853,7 +25853,11 @@ var ElementModel = class _ElementModel {
     return this.root.get(_ElementModel.KEYS.pointsMatrix) || [1, 0, 0, 1, 0, 0];
   }
   get points() {
-    return this.root.get(_ElementModel.KEYS.points).toArray();
+    const list = this.root.get(_ElementModel.KEYS.points);
+    if (list) {
+      return list.toArray();
+    }
+    return [];
   }
   set ownerId(value) {
     this.root.set(_ElementModel.KEYS.ownerId, value);
@@ -26517,7 +26521,12 @@ var LineTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createLinePath(true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createLinePath(true);
+      }
+    });
     this.from = event.point.clone();
     this.to = event.point.clone();
   }
@@ -28447,7 +28456,12 @@ var CurveTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createCurve(true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createCurve(true);
+      }
+    });
   }
   onMouseDrag(event) {
     if (this.pointCount > 1024) {
@@ -28474,34 +28488,41 @@ var CurveTool = class extends WhiteboardTool {
     }
   }
   onMouseUp(event) {
-    if (this.pointCount < 3 && this.elementModel) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
-    }
-    if (this.elementModel) {
-      this.elementModel.shadow = "";
-    }
-    if (this.elementModel && event.event.metaKey) {
-      const result = this.recognizer.recognize(this.elementModel.points);
-      if (result) {
-        this.modelGetter().removeElementItem(this.elementModel.uuid);
-        if (/^rectangle/.test(result.shape)) {
-          const model = this.modelGetter().createRectangle(false);
-          model?.setPoints([result.minX, result.minY, result.maxX, result.maxY]);
-        } else if (/^circle/.test(result.shape)) {
-          const model = this.modelGetter().createSegmentedPath("ellipse", false);
-          const rect = new this.scope.Rectangle(new this.scope.Point(result.minX, result.minY), new this.scope.Point(result.maxX, result.maxY));
-          const pathRect = new this.scope.Path.Ellipse(rect);
-          const points = serializePath(pathRect);
-          model?.setPoints(points);
-        } else if (/^triangle/.test(result.shape)) {
-          const model = this.modelGetter().createTriangle(false);
-          model?.setPoints([result.minX + (result.maxX - result.minX) / 2, result.minY, result.minX, result.maxY, result.maxX, result.maxY]);
-        } else if (/^arrow/.test(result.shape)) {
-          const model = this.modelGetter().createLinePath(false);
-          model?.setPoints([result.minX, (result.maxY + result.minY) / 2, result.maxX, (result.maxY + result.minY) / 2]);
+    this.modelGetter().then((model) => {
+      if (!model) {
+        return;
+      }
+      if (this.pointCount < 3 && this.elementModel) {
+        if (this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
         }
       }
-    }
+      if (this.elementModel) {
+        this.elementModel.shadow = "";
+      }
+      if (this.elementModel && event.event.metaKey) {
+        const result = this.recognizer.recognize(this.elementModel.points);
+        if (result) {
+          model.removeElementItem(this.elementModel.uuid);
+          if (/^rectangle/.test(result.shape)) {
+            const rect = model.createRectangle(false);
+            rect?.setPoints([result.minX, result.minY, result.maxX, result.maxY]);
+          } else if (/^circle/.test(result.shape)) {
+            const circle = model.createSegmentedPath("ellipse", false);
+            const rect = new this.scope.Rectangle(new this.scope.Point(result.minX, result.minY), new this.scope.Point(result.maxX, result.maxY));
+            const pathRect = new this.scope.Path.Ellipse(rect);
+            const points = serializePath(pathRect);
+            circle?.setPoints(points);
+          } else if (/^triangle/.test(result.shape)) {
+            const triangle = model.createTriangle(false);
+            triangle?.setPoints([result.minX + (result.maxX - result.minX) / 2, result.minY, result.minX, result.maxY, result.maxX, result.maxY]);
+          } else if (/^arrow/.test(result.shape)) {
+            const arrow = model.createLinePath(false);
+            arrow?.setPoints([result.minX, (result.maxY + result.minY) / 2, result.maxX, (result.maxY + result.minY) / 2]);
+          }
+        }
+      }
+    });
   }
 };
 
@@ -28536,7 +28557,12 @@ var RectangleTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createRectangle(true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createRectangle(true);
+      }
+    });
     this.from = event.point.clone();
     this.to = event.point.clone();
   }
@@ -28551,7 +28577,11 @@ var RectangleTool = class extends WhiteboardTool {
       this.elementModel.shadow = "";
     }
     if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     }
   }
 };
@@ -28695,11 +28725,16 @@ var SelectorTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createSelector();
-    this.from = event.point.clone();
-    this.to = event.point.clone();
-    const rect = new this.scope.Rectangle(this.from, this.to);
-    this.elementModel?.setPoints([rect.topLeft.x, rect.topLeft.y, rect.size.width, rect.size.height]);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createSelector();
+        this.from = event.point.clone();
+        this.to = event.point.clone();
+        const rect = new this.scope.Rectangle(this.from, this.to);
+        this.elementModel?.setPoints([rect.topLeft.x, rect.topLeft.y, rect.size.width, rect.size.height]);
+      }
+    });
     this.selectElements.clear();
   }
   onMouseDrag(event) {
@@ -28721,7 +28756,11 @@ var SelectorTool = class extends WhiteboardTool {
   }
   onMouseUp(event) {
     if (this.elementModel) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     }
     const elements = Array.from(this.selectElements.keys()).reduce((result, next) => {
       result.push({
@@ -29666,41 +29705,46 @@ var TextTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createPointText(x, y, true);
-    if (this.elementModel === null) {
-      return;
-    }
-    const editorContainer = window.document.createElement("div");
-    const canvasBounds = this.canvasElement.getBoundingClientRect();
-    editorContainer.style.cssText = `position:absolute;transform:translate(-50%, -50%);top:50%;left:50%;width:${canvasBounds.width}px;height:${canvasBounds.height}px;`;
-    const editor = new TextEditor(this.camera);
-    editor.setOrigin(x, y);
-    editorContainer.appendChild(editor.rootView);
-    this.rootView.appendChild(editorContainer);
-    editor.setFontSize(this.toolbarModel.fontSize);
-    editor.setFontFamily(this.toolbarModel.fontFamily);
-    this.camera.triggerZoom();
-    editor.on("caretOutRight", () => {
-    });
-    editor.on("change", (content) => {
-      if (this.elementModel) {
-        this.elementModel.content = content;
-      }
-    });
-    editor.on("done", () => {
-      if (this.elementModel) {
-        if (!this.elementModel.content || this.elementModel.content.length === 0) {
-          this.modelGetter().removeElementItem(this.elementModel.uuid);
-        } else {
-          this.elementModel.shadow = "";
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createPointText(x, y, true);
+        if (this.elementModel === null) {
+          return;
         }
+        const editorContainer = window.document.createElement("div");
+        const canvasBounds = this.canvasElement.getBoundingClientRect();
+        editorContainer.style.cssText = `position:absolute;transform:translate(-50%, -50%);top:50%;left:50%;width:${canvasBounds.width}px;height:${canvasBounds.height}px;`;
+        const editor = new TextEditor(this.camera);
+        editor.setOrigin(x, y);
+        editorContainer.appendChild(editor.rootView);
+        this.rootView.appendChild(editorContainer);
+        editor.setFontSize(this.toolbarModel.fontSize);
+        editor.setFontFamily(this.toolbarModel.fontFamily);
+        this.camera.triggerZoom();
+        editor.on("caretOutRight", () => {
+        });
+        editor.on("change", (content) => {
+          if (this.elementModel) {
+            this.elementModel.content = content;
+          }
+        });
+        editor.on("done", () => {
+          if (this.elementModel) {
+            if (!this.elementModel.content || this.elementModel.content.length === 0) {
+              model.removeElementItem(this.elementModel.uuid);
+            } else {
+              this.elementModel.shadow = "";
+            }
+          }
+          editor.dispose();
+          this.rootView.removeChild(editorContainer);
+        });
+        setTimeout(() => {
+          editor.focus();
+        }, 30);
       }
-      editor.dispose();
-      this.rootView.removeChild(editorContainer);
     });
-    setTimeout(() => {
-      editor.focus();
-    }, 30);
   }
 };
 
@@ -30218,7 +30262,12 @@ var EllipseTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createSegmentedPath("ellipse", true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createSegmentedPath("ellipse", true);
+      }
+    });
     this.from = event.point.clone();
     this.to = event.point.clone();
   }
@@ -30233,7 +30282,11 @@ var EllipseTool = class extends WhiteboardTool {
   }
   onMouseUp(event) {
     if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     } else {
       if (this.elementModel) {
         this.elementModel.shadow = "";
@@ -30273,7 +30326,12 @@ var TriangleTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createTriangle(true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createTriangle(true);
+      }
+    });
     this.from = event.point.clone();
     this.to = event.point.clone();
   }
@@ -30285,7 +30343,11 @@ var TriangleTool = class extends WhiteboardTool {
   }
   onMouseUp(event) {
     if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     }
     if (this.elementModel) {
       this.elementModel.shadow = "";
@@ -30317,6 +30379,7 @@ var Whiteboard = class extends EventEmitter8 {
     super();
     _defineProperty31(this, "view", void 0);
     _defineProperty31(this, "selfUserId", void 0);
+    _defineProperty31(this, "window", void 0);
     _defineProperty31(this, "permissions", void 0);
     _defineProperty31(this, "tool", void 0);
     _defineProperty31(this, "fontSize", void 0);
@@ -30400,7 +30463,12 @@ var EraserTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createEraser();
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createEraser();
+      }
+    });
   }
   onMouseDrag(event) {
     if (this.pointCount > 1024) {
@@ -30433,7 +30501,11 @@ var EraserTool = class extends WhiteboardTool {
   }
   onMouseUp(_event) {
     if (this.elementModel) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     }
     this.trashedElementsModel.removeAllTrashedElementsForSelf();
   }
@@ -30592,7 +30664,12 @@ var LaserPointerTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createLaserPointer();
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createLaserPointer();
+      }
+    });
   }
   onMouseDrag(event) {
     if (this.pointCount > 1024) {
@@ -31218,7 +31295,12 @@ var StraightLineTool = class extends WhiteboardTool {
     if (this.elementModel) {
       this.elementModel.dispose();
     }
-    this.elementModel = this.modelGetter().createStraightLine(true);
+    this.elementModel = null;
+    this.modelGetter().then((model) => {
+      if (model) {
+        this.elementModel = model.createStraightLine(true);
+      }
+    });
     this.from = event.point.clone();
     this.to = event.point.clone();
   }
@@ -31233,7 +31315,11 @@ var StraightLineTool = class extends WhiteboardTool {
       this.elementModel.shadow = "";
     }
     if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
+      this.modelGetter().then((model) => {
+        if (model && this.elementModel) {
+          model.removeElementItem(this.elementModel.uuid);
+        }
+      });
     }
   }
 };
@@ -31720,12 +31806,20 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       }
     });
-    _defineProperty43(this, "getCurrentRenderableModel", () => {
+    _defineProperty43(this, "getCurrentRendererModel", () => {
       const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-      if (!this.layers.has(layerId)) {
-        this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
+      if (this.layers.has(layerId)) {
+        return Promise.resolve(this.layers.get(layerId));
+      } else {
+        return waitUntil(() => this.layers.has(layerId), 1e3).then(() => {
+          if (this.layers.has(layerId)) {
+            return this.layers.get(layerId);
+          } else {
+            this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
+            return null;
+          }
+        });
       }
-      return this.layers.get(layerId);
     });
     _defineProperty43(this, "handleElementClear", () => {
       this.shadowScope.project.activeLayer.removeChildren();
@@ -32021,11 +32115,17 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
     };
     this.emitter.clearPage = () => {
-      const model = this.getCurrentRenderableModel();
-      model.elements.doc.transact(() => {
-        model.elements.clear();
-      }, elementsUndoOrigin);
-      model.elementModels.clear();
+      this.getCurrentRendererModel().then((model) => {
+        if (model) {
+          if (model.elements.doc) {
+            model.elements.doc.transact(() => {
+              model.elements.clear();
+            }, elementsUndoOrigin);
+          } else {
+            model.elementModels.clear();
+          }
+        }
+      });
     };
     this.emitter.undo = () => {
       this.undoManager?.undo();
@@ -32247,18 +32347,18 @@ var WhiteboardApplication = class extends AbstractApplication {
       return this.userMap(userId);
     });
     this.tools = {
-      pointer: new PointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      curve: new CurveTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      rectangle: new RectangleTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      selector: new SelectorTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.selectElementsModel),
-      arrow: new LineTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      line: new StraightLineTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      text: new TextTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.rootElement, this.canvasElement, this.toolbarModel, this.camera),
-      ellipse: new EllipseTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      triangle: new TriangleTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel, this.shadowScope),
-      laser: new LaserPointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      grab: new GrabTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.camera)
+      pointer: new PointerTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      curve: new CurveTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      rectangle: new RectangleTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      selector: new SelectorTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope, this.selectElementsModel),
+      arrow: new LineTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      line: new StraightLineTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      text: new TextTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope, this.rootElement, this.canvasElement, this.toolbarModel, this.camera),
+      ellipse: new EllipseTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      triangle: new TriangleTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel, this.shadowScope),
+      laser: new LaserPointerTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope),
+      grab: new GrabTool(this.enableToolEvent, this.getCurrentRendererModel, this.shadowEmitter, this.paperScope, this.camera)
     };
     this.toolbarModel.on("update", (style) => {
       if (this.tools[style.tool]) {