@netless/forge-whiteboard 1.1.3 → 1.1.4

package/dist/whiteboard.js

@@ -25639,7 +25639,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WhiteboardApplication.ts
-var import_forge_room13 = require("@netless/forge-room");
+var import_forge_room14 = require("@netless/forge-room");
 var Y15 = __toESM(require("yjs"), 1);
 var import_paper = __toESM(require_paper_full(), 1);
 
@@ -25647,7 +25647,7 @@ var import_paper = __toESM(require_paper_full(), 1);
 var Y12 = __toESM(require("yjs"), 1);
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
-var import_forge_room5 = require("@netless/forge-room");
+var import_forge_room6 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25973,7 +25973,20 @@ var ElementModel = class _ElementModel {
     } else {
       this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
     }
+  }
+  bindObserver() {
+    const beforeL = this.root._eH?.l?.length ?? -1;
+    const beforeDL = this.root._dEH?.l?.length ?? -1;
+    (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
+    this.subBindObserver();
+    const afterRemoveL = this.root._eH?.l?.length ?? -1;
+    const afterRemoveDL = this.root._dEH?.l?.length ?? -1;
     this.root.observeDeep(this.handlePropChange);
+    const afterAddL = this.root._eH?.l?.length ?? -1;
+    const afterAddDL = this.root._dEH?.l?.length ?? -1;
+    console.log(`[][][] bindObserver uuid=${this.uuid} doc=${!!this.root.doc} _eH: ${beforeL}->${afterRemoveL}->${afterAddL} _dEH: ${beforeDL}->${afterRemoveDL}->${afterAddDL}`);
+  }
+  subBindObserver() {
   }
   handlePointsChangeDirect() {
     this.onVectorUpdate();
@@ -26114,6 +26127,9 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
+  }
+  disposeObserver() {
+    console.log(`[][][] disposeObserver uuid=${this.uuid}`);
     (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
@@ -27048,6 +27064,10 @@ var PointTextModel = class extends ElementModel {
   subDispose() {
     (0, import_forge_room3.removeObserver)(this.root, this.handleTextPropChange);
   }
+  subBindObserver() {
+    (0, import_forge_room3.removeObserver)(this.root, this.handleTextPropChange);
+    this.root.observe(this.handleTextPropChange);
+  }
   liveCursorPoint() {
     const points = this.points;
     if (points.length < 1) {
@@ -27590,6 +27610,7 @@ var EraserModel = class extends ElementModel {
 // src/model/renderable/LaserPointerModel.ts
 var Y10 = __toESM(require("yjs"), 1);
 var import_lodash5 = __toESM(require_lodash(), 1);
+var import_forge_room4 = require("@netless/forge-room");
 function _defineProperty14(e, r, t) {
   return (r = _toPropertyKey14(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -27618,17 +27639,8 @@ var LaserPointerModel = class extends ElementModel {
     _defineProperty14(this, "clearLocalPointsWhenYPointsChange", false);
     _defineProperty14(this, "shouldUseLocalPoints", false);
     _defineProperty14(this, "localPointsPick", 4);
-    this.clientId = clientId;
-    if (this.root.doc && !this.root.has("type")) {
-      this.root.set("type", "laser");
-    }
-    if (this.root.doc && !this.root.has("points")) {
-      this.root.set("points", new Y10.Array());
-    }
-    if (this.root.doc && !this.root.has("removed")) {
-      this.root.set("removed", false);
-    }
-    this.root.observe((event) => {
+    _defineProperty14(this, "removeElement", void 0);
+    _defineProperty14(this, "handleLaserPropChange", (event) => {
       if (!this.item) {
         return;
       }
@@ -27646,13 +27658,31 @@ var LaserPointerModel = class extends ElementModel {
             this.onVectorUpdate();
             if (evt.count >= 30) {
               if (this.ownerId === this.clientId) {
-                removeElement(this.uuid);
+                this.removeElement(this.uuid);
               }
             }
           };
         }
       }
     });
+    this.clientId = clientId;
+    this.removeElement = removeElement;
+    if (this.root.doc && !this.root.has("type")) {
+      this.root.set("type", "laser");
+    }
+    if (this.root.doc && !this.root.has("points")) {
+      this.root.set("points", new Y10.Array());
+    }
+    if (this.root.doc && !this.root.has("removed")) {
+      this.root.set("removed", false);
+    }
+  }
+  subBindObserver() {
+    (0, import_forge_room4.removeObserver)(this.root, this.handleLaserPropChange);
+    this.root.observe(this.handleLaserPropChange);
+  }
+  subDispose() {
+    (0, import_forge_room4.removeObserver)(this.root, this.handleLaserPropChange);
   }
   beginRemoveAnimate() {
     this.root.set("removed", true);
@@ -27748,8 +27778,6 @@ var LaserPointerModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
     return;
   }
-  subDispose() {
-  }
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
     if (yArray.length < 2) {
@@ -27762,7 +27790,7 @@ var LaserPointerModel = class extends ElementModel {
 };
 
 // src/WhitePermissions.ts
-var import_forge_room4 = require("@netless/forge-room");
+var import_forge_room5 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27775,7 +27803,7 @@ var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
 }({});
-var WhiteboardPermissions = class extends import_forge_room4.AbstractApplicationPermissions {
+var WhiteboardPermissions = class extends import_forge_room5.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -28110,6 +28138,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       const existingModel = this.elementModels.get(uuid);
       if (existingModel) {
         existingModel.shadowEmitter = this.shadowEmitter;
+        existingModel.bindObserver();
         return existingModel;
       }
     }
@@ -28140,6 +28169,7 @@ var RenderableModel = class extends import_eventemitter3.default {
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
+      model.bindObserver();
       this.elementModels.set(model.uuid, model);
     }
     return model;
@@ -28153,7 +28183,7 @@ var RenderableModel = class extends import_eventemitter3.default {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      (0, import_forge_room5.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
+      (0, import_forge_room6.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
     }
     return hasPermission;
   }
@@ -28171,6 +28201,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
     const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor, this.isPerformanceMode);
+    model.bindObserver();
     model.root.set("src", src);
     const initMatrix = new this.scope.Matrix();
     const center = this.scope.project.view.center;
@@ -28203,6 +28234,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    curveModel.bindObserver();
     this.initElement(curveModel);
     return curveModel;
   }
@@ -28229,6 +28261,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    model.bindObserver();
     this.initElement(model);
     return model;
   }
@@ -28252,6 +28285,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    model.bindObserver();
     return model;
   }
   createTriangle(shadow) {
@@ -28276,6 +28310,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    triangleModel.bindObserver();
     this.initElement(triangleModel);
     triangleModel.dashArray = this.toolbarModel.dashArray;
     return triangleModel;
@@ -28305,6 +28340,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    rect.bindObserver();
     this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
     return rect;
@@ -28331,6 +28367,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    segmentsModel.bindObserver();
     this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
     return segmentsModel;
@@ -28355,6 +28392,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    selectorModel.bindObserver();
     selectorModel.shadow = "layer";
     return selectorModel;
   }
@@ -28380,6 +28418,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    straightLineModel.bindObserver();
     this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
     return straightLineModel;
@@ -28408,6 +28447,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    lineModel.bindObserver();
     this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
     return lineModel;
@@ -28434,6 +28474,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
+    pointTextModel.bindObserver();
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
@@ -28456,12 +28497,13 @@ var RenderableModel = class extends import_eventemitter3.default {
     });
   }
   dispose(clearElements) {
-    (0, import_forge_room5.removeObserver)(this.elements, this.onElementsChange);
+    (0, import_forge_room6.removeObserver)(this.elements, this.onElementsChange);
     if (clearElements) {
       this.elements.clear();
     }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
+      model.disposeObserver();
     });
   }
 };
@@ -28922,7 +28964,7 @@ var RectangleTool = class extends WhiteboardTool {
 
 // src/model/ToolbarModel.ts
 var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
-var import_forge_room6 = require("@netless/forge-room");
+var import_forge_room7 = require("@netless/forge-room");
 function _defineProperty21(e, r, t) {
   return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29019,7 +29061,7 @@ var ToolbarModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    (0, import_forge_room6.removeObserver)(this.root, this.handleRootUpdate);
+    (0, import_forge_room7.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -29118,7 +29160,7 @@ var SelectorTool = class extends WhiteboardTool {
 // src/model/SelectElementsModel.ts
 var Y13 = __toESM(require("yjs"), 1);
 var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
-var import_forge_room7 = require("@netless/forge-room");
+var import_forge_room8 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -29168,7 +29210,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
@@ -29177,7 +29219,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
         this.observers.delete(user.id);
       }
       this.requestUserMap(user.id).observeDeep(observer);
@@ -29200,7 +29242,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -29264,7 +29306,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -29953,6 +29995,7 @@ var Editor = class extends import_eventemitter35.default {
     this.shadowContainer.remove();
     this.shadowScope.project.activeLayer.addChild(this.shadowContainer);
     this.targets.forEach((model) => {
+      console.log("[][][] translateShadow model", model.root._dEH);
       model.shadow = this.shadowContainer.data.uuid;
     });
   }
@@ -30179,7 +30222,7 @@ var Gesture = class extends import_eventemitter36.default {
 };
 
 // src/Camera.ts
-var import_forge_room8 = require("@netless/forge-room");
+var import_forge_room9 = require("@netless/forge-room");
 function _defineProperty28(e, r, t) {
   return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30256,14 +30299,14 @@ var Camera = class extends import_eventemitter37.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
       if (this.observers.has(user.id)) {
         const cb = this.observers.get(user.id);
         if (cb) {
-          (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30375,7 +30418,7 @@ var Camera = class extends import_eventemitter37.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), observer);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -30572,10 +30615,10 @@ var Camera = class extends import_eventemitter37.default {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    (0, import_forge_room8.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
+    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -30868,7 +30911,7 @@ var EraserTool = class extends WhiteboardTool {
 // src/model/TrashedElementsModel.ts
 var Y14 = __toESM(require("yjs"), 1);
 var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
-var import_forge_room9 = require("@netless/forge-room");
+var import_forge_room10 = require("@netless/forge-room");
 function _defineProperty33(e, r, t) {
   return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30905,14 +30948,14 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
       if (this.observers.has(user.id)) {
         const cb = this.observers.get(user.id);
         if (cb) {
-          (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30920,7 +30963,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -30934,7 +30977,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(userId), userId);
+        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -30996,7 +31039,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -31075,7 +31118,7 @@ var LaserPointerTool = class extends WhiteboardTool {
 
 // src/model/PageModel.ts
 var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
-var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
 function _defineProperty35(e, r, t) {
   return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -31108,7 +31151,7 @@ var PageModel = class extends import_eventemitter310.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room10.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room11.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -31122,7 +31165,7 @@ var PageModel = class extends import_eventemitter310.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room10.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room11.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -31169,7 +31212,7 @@ var PageModel = class extends import_eventemitter310.default {
     if (this.observers.has(userId)) {
       const cb = this.observers.get(userId);
       if (cb) {
-        (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room11.removeObserver)(this.requestUserMap(userId), cb);
         this.observers.delete(userId);
       }
     }
@@ -31258,12 +31301,12 @@ var PageModel = class extends import_eventemitter310.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), observer);
+      (0, import_forge_room11.removeObserver)(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    (0, import_forge_room10.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
-    (0, import_forge_room10.removeObserver)(this.pageMap, this.handlePageMapChange);
+    (0, import_forge_room11.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room11.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -31278,8 +31321,8 @@ async function waitUntil(fn, timeout) {
 
 // src/IndexedNavigation.ts
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room11 = require("@netless/forge-room");
 var import_forge_room12 = require("@netless/forge-room");
+var import_forge_room13 = require("@netless/forge-room");
 function _defineProperty36(e, r, t) {
   return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -31306,7 +31349,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room11.log)("indexed navigation confusion", {
+      (0, import_forge_room12.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -31622,7 +31665,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     }
   }
   dispose() {
-    (0, import_forge_room12.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    (0, import_forge_room13.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
@@ -31843,7 +31886,7 @@ var SequenceExecutor = class {
 };
 
 // src/WhiteboardApplication.ts
-var import_forge_room14 = require("@netless/forge-room");
+var import_forge_room15 = require("@netless/forge-room");
 
 // src/LiveCursor.ts
 function _defineProperty42(e, r, t) {
@@ -31898,9 +31941,19 @@ var LiveCursor = class {
     cursor.style.fontSize = "12px";
     cursor.style.padding = "2px 4px";
     cursor.style.borderRadius = "4px";
-    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+    this.updateCursorLabel(userId, cursor);
     return cursor;
   }
+  updateCursorLabel(userId, cursor) {
+    const target = cursor ?? this.cursors.get(userId);
+    if (!target) {
+      return;
+    }
+    if (target.textContent && target.textContent !== userId) {
+      return;
+    }
+    target.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+  }
   isOnSamePage(userId) {
     const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
     const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
@@ -31936,6 +31989,7 @@ var LiveCursor = class {
     }
     const cursor = this.cursors.get(userId);
     if (cursor) {
+      this.updateCursorLabel(userId, cursor);
       const viewPoint = this.paperScope.project.view.projectToView(point);
       cursor.style.left = viewPoint.x + "px";
       cursor.style.top = viewPoint.y + "px";
@@ -32000,7 +32054,7 @@ var AsyncMap = class {
 if (!window.__forge_gl_wb_status__) {
   window.__forge_gl_wb_status__ = new AsyncMap();
 }
-var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room13.AbstractApplication {
+var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room14.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -32147,7 +32201,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          (0, import_forge_room13.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room14.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -32159,7 +32213,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          (0, import_forge_room13.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room14.log)(`[@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);
@@ -32463,7 +32517,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room13.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32474,7 +32528,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room13.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32495,7 +32549,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room13.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32509,7 +32563,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     };
     this.emitter.insertImage = (src, pageId) => {
       if (!/https/.test(src)) {
-        (0, import_forge_room13.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+        (0, import_forge_room14.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
           src
         }, "warn");
         return;
@@ -32519,14 +32573,14 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
       }
       if (!targetPageId) {
-        (0, import_forge_room13.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room14.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(targetPageId)?.createImage(src);
     };
     this.emitter.removeElement = (pageId, elementId) => {
       if (!this.layers.has(pageId)) {
-        (0, import_forge_room13.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room14.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(pageId)?.removeElementItem(elementId);
@@ -32626,15 +32680,15 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
       this.liveCursor.showLiveCursor = value;
     };
     this.emitter.updateViewport = (width, height) => {
-      (0, import_forge_room13.log)(`call updateViewport with width: ${width}, height: ${height}`);
+      (0, import_forge_room14.log)(`call updateViewport with width: ${width}, height: ${height}`);
       this.updateOptionSize(width, height);
     };
     this.emitter.__setMainCanvasVisible = (visible) => {
-      (0, import_forge_room13.log)(`call __setMainCanvasVisible with visible: ${visible}`);
+      (0, import_forge_room14.log)(`call __setMainCanvasVisible with visible: ${visible}`);
       this.canvasElement.style.opacity = visible ? "1" : "0";
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room13.log)("WhiteboardApplicationError", {
+      (0, import_forge_room14.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
@@ -32644,7 +32698,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         return that.delayTranslateOut;
       },
       set(value) {
-        (0, import_forge_room13.log)(`call __delayTranslateOut with value: ${value}`);
+        (0, import_forge_room14.log)(`call __delayTranslateOut with value: ${value}`);
         that.delayTranslateOut = value;
       }
     });
@@ -32747,7 +32801,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
   }
   async initialize(option) {
     _WhiteboardApplication.instanceCount.set(this.appId, (_WhiteboardApplication.instanceCount.get(this.appId) ?? 0) + 1);
-    (0, import_forge_room13.log)(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
+    (0, import_forge_room14.log)(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
     this.appDoc.transact(() => {
       this.permissions = new WhiteboardPermissions(this.writableManager, this.userManager, (userId) => {
         return this.userMap(userId);
@@ -32858,7 +32912,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
       } else {
         this.paperScope.tool = this.tools["curve"].tool;
-        (0, import_forge_room13.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+        (0, import_forge_room14.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
       }
       this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
       this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -33145,8 +33199,8 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
-    (0, import_forge_room14.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
-    (0, import_forge_room13.log)(`whiteboard ${this.appId} disposed. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
+    (0, import_forge_room15.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
+    (0, import_forge_room14.log)(`whiteboard ${this.appId} disposed. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
   }
 };
 _defineProperty43(WhiteboardApplication, "instanceCount", /* @__PURE__ */ new Map());