@netless/forge-whiteboard 1.0.5 → 1.0.7

package/dist/WhiteboardApplication.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WhiteboardApplication.d.ts","sourceRoot":"","sources":["../src/WhiteboardApplication.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WhiteboardApplication.d.ts","sourceRoot":"","sources":["../src/WhiteboardApplication.ts"],"names":[],"mappings":"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"}

package/dist/whiteboard.esm.js

@@ -27871,7 +27871,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;
   }
@@ -31758,7 +31758,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)) {
@@ -31770,7 +31770,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);
@@ -32037,7 +32037,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;
@@ -32048,7 +32048,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;
@@ -32063,7 +32063,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;
@@ -32079,7 +32079,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;
@@ -32087,14 +32087,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);
@@ -32292,202 +32292,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();