@netless/forge-slide 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -63125,7 +63125,7 @@ var RenderableModel = class extends EventEmitter {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      log("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
+      log("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
     }
     return hasPermission;
   }
@@ -66923,7 +66923,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          log4(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
+          log4(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -66935,7 +66935,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          log4(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
+          log4(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warn");
         }
         this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
@@ -67202,7 +67202,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -67213,7 +67213,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -67228,7 +67228,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -67244,7 +67244,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
       if (!/https/.test(src)) {
         log4("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
           src
-        }, "warning");
+        }, "warn");
         return;
       }
       let targetPageId = pageId;
@@ -67252,14 +67252,14 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
         targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
       }
       if (!targetPageId) {
-        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        log4("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(targetPageId)?.createImage(src);
     };
     this.emitter.removeElement = (pageId, elementId) => {
       if (!this.layers.has(pageId)) {
-        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        log4("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(pageId)?.removeElementItem(elementId);
@@ -67457,202 +67457,204 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
   async initialize(option) {
     _WhiteboardApplication.instanceCount.set(this.appId, (_WhiteboardApplication.instanceCount.get(this.appId) ?? 0) + 1);
     log4(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
-    this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
-      return this.userMap(userId);
-    });
-    this.permissions.setPermission(WhiteboardPermissionFlag.all);
-    this.emitter["permissions"] = this.permissions;
-    this.emitter["selfUserId"] = this.userId;
-    this.option = option;
-    if (this.option.stretchToFill) {
-      this.getMap("attrs").set("viewportWidth", -1);
-      this.getMap("attrs").set("viewportHeight", -1);
-    } else {
-      if (!this.getMap("attrs").has("viewportWidth")) {
-        this.getMap("attrs").set("viewportWidth", option.width);
-      }
-      if (!this.getMap("attrs").has("viewportHeight")) {
-        this.getMap("attrs").set("viewportHeight", option.height);
-      }
-    }
-    this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
-    this.userMap(this.userId).observe(this.handleSyncedWhiteboardStatusChange);
-    this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
-    this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
-      return this.userMap(userId);
-    }, this.getMap("pages"), this.hasPermission);
-    this.pageModel.on("pagesChange", this.handleLayersChange);
-    this.pageModel.on("switchPage", this.handlePageSwitch);
-    if (option.maxScaleRatio && option.maxScaleRatio < 1 && option.maxScaleRatio !== -1) {
-      throw new Error(`[@netless/forge-whiteboard] invalid maxScaleRatio ${option.maxScaleRatio}`);
-    }
-    this.camera = new Camera(new this.paperScope.Size(option.width, option.height), option.maxScaleRatio ?? -1, this.rootElement, this.userManager, this.paperScope, this.getMap("attrs"), this.hasPermission, (userId) => {
-      return this.userMap(userId);
-    }, () => {
-      return [this.paperScope.project.view.size.width, this.paperScope.project.view.size.height];
-    }, () => {
-      const rect = this.canvasElement.getBoundingClientRect();
-      return [rect.width, rect.height];
-    });
-    this.camera.on("zoom", (matrix) => {
-      this.paperScope.project.view.matrix = matrix;
-      this.shadowScope.project.view.matrix = matrix;
-      this.editors.forEach((editor) => {
-        editor.updateBounds();
+    this.appDoc.transact(() => {
+      this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
+        return this.userMap(userId);
       });
-    });
-    this.camera.on("userPageChange", (userId, pageId) => {
-      this.emitter.emit("activePageChange", userId, pageId);
-    });
-    this.camera.on("userViewModeChange", (userId, mode, oldMode) => {
-      if (oldMode !== "main" && mode === "main") {
-        this.emitter.setViewModeToMain(userId);
-      }
-      this.emitter.emit("userViewModeChange", userId, mode);
-    });
-    this.rootElement.style.position = "relative";
-    this.rootElement.appendChild(this.canvasElement);
-    this.toolbarModel = new ToolbarModel(this.userMap(this.userId), Object.assign({
-      tool: "grab",
-      strokeColor: "#009688",
-      fillColor: null,
-      fontSize: 24,
-      fontFamily: "Courier New",
-      strokeWidth: 4,
-      dashArray: []
-    }, option.defaultToolbarStyle ?? {}));
-    this.trashedElementsModel = new TrashedElementsModel(this.userManager, (userId) => {
-      return this.userMap(userId);
-    }, this.hasPermission);
-    this.selectElementsModel = new SelectElementsModel(this.userManager, (userId) => {
-      return this.userMap(userId);
-    }, this.hasPermission);
-    this.liveCursor = new LiveCursor(this.canvasElement, this.paperScope, this.userManager, (userId) => {
-      return this.userMap(userId);
-    });
-    this.tools = {
-      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]) {
-        this.paperScope.tool = this.tools[style.tool].tool;
-        if (style.tool === "pointer") {
-          this.rootElement.style.pointerEvents = "none";
+      this.permissions.setPermission(WhiteboardPermissionFlag.all);
+      this.emitter["permissions"] = this.permissions;
+      this.emitter["selfUserId"] = this.userId;
+      this.option = option;
+      if (this.option.stretchToFill) {
+        this.getMap("attrs").set("viewportWidth", -1);
+        this.getMap("attrs").set("viewportHeight", -1);
+      } else {
+        if (!this.getMap("attrs").has("viewportWidth")) {
+          this.getMap("attrs").set("viewportWidth", option.width);
+        }
+        if (!this.getMap("attrs").has("viewportHeight")) {
+          this.getMap("attrs").set("viewportHeight", option.height);
+        }
+      }
+      this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
+      this.userMap(this.userId).observe(this.handleSyncedWhiteboardStatusChange);
+      this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
+      this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
+        return this.userMap(userId);
+      }, this.getMap("pages"), this.hasPermission);
+      this.pageModel.on("pagesChange", this.handleLayersChange);
+      this.pageModel.on("switchPage", this.handlePageSwitch);
+      if (option.maxScaleRatio && option.maxScaleRatio < 1 && option.maxScaleRatio !== -1) {
+        throw new Error(`[@netless/forge-whiteboard] invalid maxScaleRatio ${option.maxScaleRatio}`);
+      }
+      this.camera = new Camera(new this.paperScope.Size(option.width, option.height), option.maxScaleRatio ?? -1, this.rootElement, this.userManager, this.paperScope, this.getMap("attrs"), this.hasPermission, (userId) => {
+        return this.userMap(userId);
+      }, () => {
+        return [this.paperScope.project.view.size.width, this.paperScope.project.view.size.height];
+      }, () => {
+        const rect = this.canvasElement.getBoundingClientRect();
+        return [rect.width, rect.height];
+      });
+      this.camera.on("zoom", (matrix) => {
+        this.paperScope.project.view.matrix = matrix;
+        this.shadowScope.project.view.matrix = matrix;
+        this.editors.forEach((editor) => {
+          editor.updateBounds();
+        });
+      });
+      this.camera.on("userPageChange", (userId, pageId) => {
+        this.emitter.emit("activePageChange", userId, pageId);
+      });
+      this.camera.on("userViewModeChange", (userId, mode, oldMode) => {
+        if (oldMode !== "main" && mode === "main") {
+          this.emitter.setViewModeToMain(userId);
+        }
+        this.emitter.emit("userViewModeChange", userId, mode);
+      });
+      this.rootElement.style.position = "relative";
+      this.rootElement.appendChild(this.canvasElement);
+      this.toolbarModel = new ToolbarModel(this.userMap(this.userId), Object.assign({
+        tool: "grab",
+        strokeColor: "#009688",
+        fillColor: null,
+        fontSize: 24,
+        fontFamily: "Courier New",
+        strokeWidth: 4,
+        dashArray: []
+      }, option.defaultToolbarStyle ?? {}));
+      this.trashedElementsModel = new TrashedElementsModel(this.userManager, (userId) => {
+        return this.userMap(userId);
+      }, this.hasPermission);
+      this.selectElementsModel = new SelectElementsModel(this.userManager, (userId) => {
+        return this.userMap(userId);
+      }, this.hasPermission);
+      this.liveCursor = new LiveCursor(this.canvasElement, this.paperScope, this.userManager, (userId) => {
+        return this.userMap(userId);
+      });
+      this.tools = {
+        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]) {
+          this.paperScope.tool = this.tools[style.tool].tool;
+          if (style.tool === "pointer") {
+            this.rootElement.style.pointerEvents = "none";
+          } else {
+            this.rootElement.style.pointerEvents = "auto";
+          }
         } else {
-          this.rootElement.style.pointerEvents = "auto";
+          this.emitter.emit("error", 300001, `${style.tool} not supported`);
         }
+        this.emitter.emit("toolbarStyleChange", style);
+      });
+      if (this.tools[this.toolbarModel.currentTool]) {
+        this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
       } else {
-        this.emitter.emit("error", 300001, `${style.tool} not supported`);
-      }
-      this.emitter.emit("toolbarStyleChange", style);
-    });
-    if (this.tools[this.toolbarModel.currentTool]) {
-      this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
-    } else {
-      this.paperScope.tool = this.tools["curve"].tool;
-      log4(`${this.toolbarModel.currentTool} not supported, backup to curve`);
-    }
-    this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
-    this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
-    this.trashedElementsModel.on("removeElementForSelf", this.handleRemoveTrashedElementForSelf);
-    this.canvasElement.style.background = "#FFEB3B";
-    this.canvasElement.style.position = "absolute";
-    this.canvasElement.style.top = "50%";
-    this.canvasElement.style.left = "50%";
-    this.canvasElement.style.transform = "translate(-50%, -50%)";
-    this.canvasElement.setAttribute("id", `${this.appId}-main`);
-    this.paperScope.setup(this.canvasElement);
-    this.paperScope.settings.insertItems = false;
-    this.shadowCanvasElement.style.position = "absolute";
-    this.shadowCanvasElement.style.top = "50%";
-    this.shadowCanvasElement.style.left = "50%";
-    this.shadowCanvasElement.style.transform = "translate(-50%, -50%)";
-    this.shadowCanvasElement.style.pointerEvents = "none";
-    this.shadowCanvasElement.setAttribute("id", `${this.appId}-shadow`);
-    this.rootElement.appendChild(this.shadowCanvasElement);
-    this.shadowScope.setup(this.shadowCanvasElement);
-    this.shadowScope.settings.insertItems = false;
-    this.snapshotCanvasElement.setAttribute("id", `${this.appId}-snapshot`);
-    this.snapshotScope.setup(this.snapshotCanvasElement);
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.internalResizeObserver) {
-        const rootBounds = this.rootElement.getBoundingClientRect();
-        this.adjustByOutFrame(rootBounds.width, rootBounds.height);
-      }
-    });
-    this.resizeObserver.observe(this.rootElement);
-    if (!this.getMap("attrs").has(WhiteboardKeys.currentPage)) {
-      this.getMap("attrs").set(WhiteboardKeys.currentPage, "_i_");
-    }
-    this.emitter.indexedNavigation = new IndexedNavigation(this.pageModel, this.userMap(this.userId), this.getMap("indexedNavigation"), this.hasPermission);
-    this.emitter.indexedNavigation.initIndexed().then((inited) => {
-      if (!inited) {
-        this.handleLayersChange(this.pageModel.pageList());
-        const currentPage = this.pageModel.getCurrentPage(this.userId);
-        if (currentPage) {
-          this.userMap(this.userId).set(WhiteboardKeys.currentPage, currentPage);
-          this.handlePageSwitch(currentPage);
+        this.paperScope.tool = this.tools["curve"].tool;
+        log4(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      }
+      this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
+      this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
+      this.trashedElementsModel.on("removeElementForSelf", this.handleRemoveTrashedElementForSelf);
+      this.canvasElement.style.background = "#FFEB3B";
+      this.canvasElement.style.position = "absolute";
+      this.canvasElement.style.top = "50%";
+      this.canvasElement.style.left = "50%";
+      this.canvasElement.style.transform = "translate(-50%, -50%)";
+      this.canvasElement.setAttribute("id", `${this.appId}-main`);
+      this.paperScope.setup(this.canvasElement);
+      this.paperScope.settings.insertItems = false;
+      this.shadowCanvasElement.style.position = "absolute";
+      this.shadowCanvasElement.style.top = "50%";
+      this.shadowCanvasElement.style.left = "50%";
+      this.shadowCanvasElement.style.transform = "translate(-50%, -50%)";
+      this.shadowCanvasElement.style.pointerEvents = "none";
+      this.shadowCanvasElement.setAttribute("id", `${this.appId}-shadow`);
+      this.rootElement.appendChild(this.shadowCanvasElement);
+      this.shadowScope.setup(this.shadowCanvasElement);
+      this.shadowScope.settings.insertItems = false;
+      this.snapshotCanvasElement.setAttribute("id", `${this.appId}-snapshot`);
+      this.snapshotScope.setup(this.snapshotCanvasElement);
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.internalResizeObserver) {
+          const rootBounds = this.rootElement.getBoundingClientRect();
+          this.adjustByOutFrame(rootBounds.width, rootBounds.height);
+        }
+      });
+      this.resizeObserver.observe(this.rootElement);
+      if (!this.getMap("attrs").has(WhiteboardKeys.currentPage)) {
+        this.getMap("attrs").set(WhiteboardKeys.currentPage, "_i_");
+      }
+      this.emitter.indexedNavigation = new IndexedNavigation(this.pageModel, this.userMap(this.userId), this.getMap("indexedNavigation"), this.hasPermission);
+      this.emitter.indexedNavigation.initIndexed().then((inited) => {
+        if (!inited) {
+          this.handleLayersChange(this.pageModel.pageList());
+          const currentPage = this.pageModel.getCurrentPage(this.userId);
+          if (currentPage) {
+            this.userMap(this.userId).set(WhiteboardKeys.currentPage, currentPage);
+            this.handlePageSwitch(currentPage);
+          } else {
+            this.userMap(this.userId).set(WhiteboardKeys.currentPage, "_i_");
+            this.handlePageSwitch("_i_");
+          }
         } else {
           this.userMap(this.userId).set(WhiteboardKeys.currentPage, "_i_");
-          this.handlePageSwitch("_i_");
         }
-      } else {
-        this.userMap(this.userId).set(WhiteboardKeys.currentPage, "_i_");
-      }
-    });
-    this.shadowEmitter.on("translateOut", (ids, container) => {
-      if (this.delayTranslateOut > 0) {
-        setTimeout(() => {
+      });
+      this.shadowEmitter.on("translateOut", (ids, container) => {
+        if (this.delayTranslateOut > 0) {
+          setTimeout(() => {
+            this.handleElementTranslateOut(ids, container);
+          }, this.delayTranslateOut);
+        } else {
           this.handleElementTranslateOut(ids, container);
-        }, this.delayTranslateOut);
-      } else {
-        this.handleElementTranslateOut(ids, container);
-      }
-    });
-    this.shadowEmitter.on("translateIn", (ids, container) => {
-      let parent = null;
-      if (container === "layer") {
-        parent = this.shadowScope.project.activeLayer;
-      } else {
-        parent = this.shadowScope.project.activeLayer.children.find((child) => child.data.uuid === container) ?? null;
-      }
-      if (parent) {
-        ids.forEach((id) => {
-          const target = this.paperScope.project.activeLayer.children.find((child) => child.data.uuid === id);
-          if (target) {
-            target.remove();
-            this.insertElementToParent(target, parent);
-          }
+        }
+      });
+      this.shadowEmitter.on("translateIn", (ids, container) => {
+        let parent = null;
+        if (container === "layer") {
+          parent = this.shadowScope.project.activeLayer;
+        } else {
+          parent = this.shadowScope.project.activeLayer.children.find((child) => child.data.uuid === container) ?? null;
+        }
+        if (parent) {
+          ids.forEach((id) => {
+            const target = this.paperScope.project.activeLayer.children.find((child) => child.data.uuid === id);
+            if (target) {
+              target.remove();
+              this.insertElementToParent(target, parent);
+            }
+          });
+        }
+      });
+      this.shadowEmitter.on("grabDown", () => {
+        this.emitter.emit("grabDown");
+      });
+      this.shadowEmitter.on("grabUp", () => {
+        this.emitter.emit("grabUp");
+      });
+      this.clearElements();
+      if (this.option.stretchToFill) {
+        window.addEventListener("resize", () => {
+          const bounds = this.rootElement.getBoundingClientRect();
+          this.updateOptionSize(bounds.width, bounds.height);
+          this.adjustByOutFrame(bounds.width, bounds.height);
         });
       }
-    });
-    this.shadowEmitter.on("grabDown", () => {
-      this.emitter.emit("grabDown");
-    });
-    this.shadowEmitter.on("grabUp", () => {
-      this.emitter.emit("grabUp");
-    });
-    this.clearElements();
-    if (this.option.stretchToFill) {
-      window.addEventListener("resize", () => {
-        const bounds = this.rootElement.getBoundingClientRect();
-        this.updateOptionSize(bounds.width, bounds.height);
-        this.adjustByOutFrame(bounds.width, bounds.height);
-      });
-    }
-    this.rootElement.appendChild(this.liveCursor.container);
-    this.getMap("attrs").observe(this.handleViewportUpdate);
+      this.rootElement.appendChild(this.liveCursor.container);
+      this.getMap("attrs").observe(this.handleViewportUpdate);
+    }, "whiteboard-initialize");
   }
   clearElements() {
     const userIds = this.userManager.userIdList();