@netless/forge-slide 0.1.1-alpha.10 → 0.1.1-alpha.11

package/dist/index.js

@@ -35185,33 +35185,42 @@ var Y15 = __toESM(require("yjs"), 1);
 var Y12 = __toESM(require("yjs"), 1);
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
+var import_forge_room2 = require("@netless/forge-room");
 var Y2 = __toESM(require("yjs"), 1);
 var Y = __toESM(require("yjs"), 1);
+var import_forge_room3 = require("@netless/forge-room");
 var Y3 = __toESM(require("yjs"), 1);
 var Y4 = __toESM(require("yjs"), 1);
 var Y5 = __toESM(require("yjs"), 1);
 var Y6 = __toESM(require("yjs"), 1);
+var import_forge_room4 = require("@netless/forge-room");
 var Y7 = __toESM(require("yjs"), 1);
 var Y8 = __toESM(require("yjs"), 1);
 var Y9 = __toESM(require("yjs"), 1);
 var Y10 = __toESM(require("yjs"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_forge_room5 = require("@netless/forge-room");
 var Y11 = __toESM(require("yjs"), 1);
 var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room6 = require("@netless/forge-room");
 var Y13 = __toESM(require("yjs"), 1);
 var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_forge_room7 = require("@netless/forge-room");
 var import_eventemitter34 = __toESM(require("eventemitter3"), 1);
 var import_eventemitter35 = require("eventemitter3");
 var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
 var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
+var import_forge_room8 = require("@netless/forge-room");
 var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
 var Y14 = __toESM(require("yjs"), 1);
 var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_forge_room9 = require("@netless/forge-room");
 var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room10 = require("@netless/forge-room");
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room4 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
+var import_forge_room13 = require("@netless/forge-room");
 var __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -60791,11 +60800,12 @@ var ElementModel = class _ElementModel {
   set shadow(value) {
     this.root.set(_ElementModel.KEYS.shadow, value);
   }
-  constructor(root, scope) {
+  constructor(root, scope, liveCursor) {
     _defineProperty(this, "shadowEmitter", null);
     _defineProperty(this, "root", void 0);
     _defineProperty(this, "scope", void 0);
     _defineProperty(this, "item", void 0);
+    _defineProperty(this, "liveCursor", void 0);
     _defineProperty(this, "handlePropChange", (events) => {
       if (!this.item) {
         return;
@@ -60804,7 +60814,7 @@ var ElementModel = class _ElementModel {
         if (event.target === this.root) {
           const updatePaperItemKeys = this.vectorKeys().concat([_ElementModel.KEYS.pointsMatrix]);
           for (const [key, value] of event.changes.keys.entries()) {
-            if (value.action === "update") {
+            if (value.action === "update" || value.action == "add") {
               const includeKeys = this.styleKeys().include;
               if (includeKeys.indexOf(key) >= 0) {
                 this.onStyleKeyUpdate(key);
@@ -60824,6 +60834,10 @@ var ElementModel = class _ElementModel {
                 if (this.shadow !== "") {
                   this.shadowEmitter?.emit("translateIn", [this.uuid], this.shadow);
                 } else {
+                  const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+                  if (ownerId) {
+                    this.liveCursor.updateCursorVisible(false, ownerId);
+                  }
                   this.shadowEmitter?.emit("translateOut", [this.uuid], value.oldValue);
                 }
               }
@@ -60831,11 +60845,17 @@ var ElementModel = class _ElementModel {
           }
         } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
           this.onVectorUpdate();
+          const liveCursorPoint = this.liveCursorPoint();
+          const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+          if (liveCursorPoint && ownerId) {
+            this.liveCursor.updateCursorPosition(liveCursorPoint, this.root.get(_ElementModel.KEYS.ownerId));
+          }
         } else {
         }
       }
     });
     this.scope = scope;
+    this.liveCursor = liveCursor;
     this.root = root;
     if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
       this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
@@ -60895,7 +60915,7 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-    this.root.unobserveDeep(this.handlePropChange);
+    (0, import_forge_room3.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
 _defineProperty(ElementModel, "KEYS", {
@@ -60963,8 +60983,8 @@ function _toPrimitive3(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var CurveModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty3(this, "item", null);
     _defineProperty3(this, "debugPath", void 0);
     _defineProperty3(this, "debug", false);
@@ -60980,8 +61000,7 @@ var CurveModel = class extends ElementModel {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash.chunk)(points, 2);
-    return ae(groupPoints, {
+    return ae(points, {
       size: this.strokeWidth,
       smoothing: 0.5,
       thinning: -0.5,
@@ -60998,15 +61017,15 @@ var CurveModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
-    return currentPoints.map((_ref) => {
-      let [x, y] = _ref;
-      return new this.scope.Point(x, y);
-    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
-      result.push(next.x);
-      result.push(next.y);
-      return result;
-    }, []);
+    const points = this.points;
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const output = [];
+    for (let i = 0, len = points.length; i < len; i += 2) {
+      const p = new this.scope.Point(points[i], points[i + 1]);
+      const tp = p.transform(matrix);
+      output.push([tp.x, tp.y]);
+    }
+    return output;
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -61081,6 +61100,15 @@ var CurveModel = class extends ElementModel {
       exclude: ["dashArray", "fillColor"]
     };
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onStyleKeyUpdate(key) {
     if (!this.item) {
       return;
@@ -61113,8 +61141,8 @@ function _toPrimitive4(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SelectorModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty4(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "selector");
@@ -61125,6 +61153,9 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  liveCursorPoint() {
+    return null;
+  }
   subDispose() {
   }
   createPaperRect() {
@@ -61244,8 +61275,8 @@ function _toPrimitive6(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SegmentsModel = class extends ElementModel {
-  constructor(root, scope, type) {
-    super(root, scope);
+  constructor(root, scope, type, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty6(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", type);
@@ -61256,6 +61287,14 @@ var SegmentsModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const point = new this.scope.Point(yArray.get(0), yArray.get(1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61374,6 +61413,7 @@ var LineTool = class extends WhiteboardTool {
     _defineProperty8(this, "elementModel", null);
     _defineProperty8(this, "from", null);
     _defineProperty8(this, "to", null);
+    _defineProperty8(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -61436,8 +61476,8 @@ var LineModel = class extends ElementModel {
   set tailArrow(value) {
     this.root.set("tailArrow", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty9(this, "controlledPoints", []);
     _defineProperty9(this, "item", null);
     if (!this.root.has("type")) {
@@ -61486,6 +61526,15 @@ var LineModel = class extends ElementModel {
     });
     return [head, path, tail];
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   createPaperItem() {
     this.item = new this.scope.Group();
     this.item.addChildren(this.renderLine());
@@ -61633,8 +61682,8 @@ var PointTextModel = class extends ElementModel {
   set fontFamily(value) {
     this.root.set("font-family", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty10(this, "item", null);
     _defineProperty10(this, "handleTextPropChange", (event) => {
       if (!this.item) {
@@ -61666,7 +61715,16 @@ var PointTextModel = class extends ElementModel {
     }
   }
   subDispose() {
-    this.root.unobserve(this.handleTextPropChange);
+    (0, import_forge_room4.removeObserver)(this.root, this.handleTextPropChange);
+  }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 1) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const topLeft = new this.scope.Point(points[0], points[1]).transform(matrix);
+    return topLeft;
   }
   getInternalMeasurement() {
     if (!this.item) {
@@ -61760,8 +61818,8 @@ function _toPrimitive11(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var TriangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty11(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "triangle");
@@ -61770,6 +61828,15 @@ var TriangleModel = class extends ElementModel {
       this.root.set("points", new Y7.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 6) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 4), yArray.get(len - 3));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   subDispose() {
   }
   createPaperItem() {
@@ -61849,8 +61916,8 @@ function _toPrimitive12(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var RectangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty12(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "rectangle");
@@ -61866,6 +61933,14 @@ var RectangleModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 4) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    return new this.scope.Point(points[2], points[3]).transform(matrix);
+  }
   createSegments() {
     const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -62020,8 +62095,8 @@ function _toPrimitive13(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty13(this, "item", null);
     _defineProperty13(this, "sliceBegin", 0);
     if (!this.root.has("type")) {
@@ -62060,41 +62135,42 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    return ae(points, {
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
+    return ae(groupPoints, {
       size: this.strokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
+      smoothing: 0.5,
+      thinning: -0.5,
       streamline: 0.5,
       simulatePressure: true,
       start: {
-        taper: true,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 0,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const groupPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
-    return groupPoints.map((_ref) => {
+    const currentPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
+    return currentPoints.map((_ref) => {
       let [x, y] = _ref;
-      return matrix.transform([x, y]);
-    }).map((p) => [p.x, p.y]);
-  }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+      return new this.scope.Point(x, y);
+    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
+      result.push(next.x);
+      result.push(next.y);
+      return result;
+    }, []);
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
+    this.item.addSegments(path.segments);
   }
   createPaperItem() {
     this.item = new this.scope.Path();
@@ -62103,21 +62179,13 @@ var EraserModel = class extends ElementModel {
     this.item.strokeScaling = false;
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
-    let isBegin = false;
+    this.onVectorUpdate();
     this.item.onFrame = () => {
       if (!this.points) {
         return;
       }
-      if (this.points.length / 2 - this.sliceBegin >= 10 && !isBegin) {
-        isBegin = true;
-      }
-      if (this.points.length / 2 <= this.sliceBegin) {
-        isBegin = false;
-      }
-      if (isBegin) {
-        this.sliceBegin += 1;
-        this.onVectorUpdate();
+      if (this.points.length / 2 > 50) {
+        this.sliceBegin = this.points.length / 2 - 50;
       }
     };
   }
@@ -62138,6 +62206,15 @@ var EraserModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 var import_lodash6 = __toESM2(require_lodash(), 1);
 function _defineProperty14(e, r, t) {
@@ -62158,8 +62235,8 @@ function _toPrimitive14(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var LaserPointerModel = class extends ElementModel {
-  constructor(clientId, root, scope, removeElement) {
-    super(root, scope);
+  constructor(clientId, root, scope, liveCursor, removeElement) {
+    super(root, scope, liveCursor);
     _defineProperty14(this, "item", null);
     _defineProperty14(this, "clientId", void 0);
     _defineProperty14(this, "sliceBegin", 0);
@@ -62296,6 +62373,15 @@ var LaserPointerModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
@@ -62309,7 +62395,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_room2.AbstractApplicationPermissions {
+var WhiteboardPermissions = class extends import_forge_room5.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -62338,8 +62424,8 @@ function _toPrimitive15(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
@@ -62348,6 +62434,15 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   subDispose() {
   }
   onVectorUpdate() {
@@ -62449,29 +62544,111 @@ function _toPrimitive16(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
+var ImageModel = class extends ElementModel {
+  get src() {
+    return this.root.get("src");
+  }
+  constructor(root, scope, imageSets, liveCursor) {
+    super(root, scope, liveCursor);
+    _defineProperty16(this, "item", null);
+    _defineProperty16(this, "imageSets", void 0);
+    this.imageSets = imageSets;
+    if (!this.root.has("type")) {
+      this.root.set("type", "image");
+    }
+    this.root.set(ElementModel.KEYS.shadow, "");
+  }
+  subDispose() {
+    const img = this.imageSets.querySelector(`[id='${this.uuid}']`);
+    if (img) {
+      img.remove();
+    }
+  }
+  createPaperItem() {
+    if (this.item) {
+      return;
+    }
+    if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
+      const img = document.createElement("img");
+      img.src = this.src;
+      img.id = this.uuid;
+      this.imageSets.appendChild(img);
+    }
+    this.item = new this.scope.Raster(this.uuid);
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    this.item.matrix = matrix;
+  }
+  onVectorUpdate() {
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    if (this.item) {
+      this.item.matrix = matrix;
+    }
+  }
+  vectorKeys() {
+    return [];
+  }
+  styleKeys() {
+    return {
+      include: [],
+      exclude: ["dashArray", "strokeColor", "fillColor", "strokeWidth"]
+    };
+  }
+  onStyleKeyUpdate(_key) {
+  }
+  editorConfig() {
+    const cfg = new EditorConfig();
+    cfg.resizeModel = () => "four-corner";
+    cfg.uniformScale = () => true;
+    return cfg;
+  }
+  liveCursorPoint() {
+    return null;
+  }
+};
+function _defineProperty17(e, r, t) {
+  return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey17(t) {
+  var i = _toPrimitive17(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive17(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var RenderableModel = class extends import_eventemitter3.default {
   get uuid() {
-    return (0, import_uuid.v4)();
+    return (0, import_uuid.v4)().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, liveCursor, hasPermission) {
     super();
-    _defineProperty16(this, "scope", void 0);
-    _defineProperty16(this, "toolbarModel", void 0);
-    _defineProperty16(this, "userManager", void 0);
-    _defineProperty16(this, "elementModels", void 0);
-    _defineProperty16(this, "elements", void 0);
-    _defineProperty16(this, "layerId", void 0);
-    _defineProperty16(this, "maxIndex", -1);
-    _defineProperty16(this, "hasPermission", void 0);
-    _defineProperty16(this, "shadowEmitter", void 0);
-    _defineProperty16(this, "onElementsChange", (event) => {
+    _defineProperty17(this, "scope", void 0);
+    _defineProperty17(this, "toolbarModel", void 0);
+    _defineProperty17(this, "userManager", void 0);
+    _defineProperty17(this, "elementModels", void 0);
+    _defineProperty17(this, "elements", void 0);
+    _defineProperty17(this, "layerId", void 0);
+    _defineProperty17(this, "maxIndex", -1);
+    _defineProperty17(this, "hasPermission", void 0);
+    _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "imageSets", void 0);
+    _defineProperty17(this, "liveCursor", void 0);
+    _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
           const root = this.elements.get(key);
           if (root) {
             const model = this.convertToModel(root);
             if (model) {
-              this.emit("elementInsert", [model]);
+              setTimeout(() => {
+                this.emit("elementInsert", [model]);
+              });
             }
           }
         } else if (value.action === "delete") {
@@ -62479,6 +62656,8 @@ var RenderableModel = class extends import_eventemitter3.default {
         }
       }
     });
+    this.liveCursor = liveCursor;
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -62517,27 +62696,29 @@ var RenderableModel = class extends import_eventemitter3.default {
     const type = yMap.get("type");
     let model = null;
     if (type === "curve") {
-      model = new CurveModel(yMap, this.scope);
+      model = new CurveModel(yMap, this.scope, this.liveCursor);
     } else if (["ellipse"].indexOf(type) >= 0) {
-      model = new SegmentsModel(yMap, this.scope, type);
+      model = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     } else if (type === "selector") {
-      model = new SelectorModel(yMap, this.scope);
+      model = new SelectorModel(yMap, this.scope, this.liveCursor);
     } else if (type === "arrow") {
-      model = new LineModel(yMap, this.scope);
+      model = new LineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "line") {
-      model = new StraightLineModel(yMap, this.scope);
+      model = new StraightLineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "point-text") {
-      model = new PointTextModel(yMap, this.scope);
+      model = new PointTextModel(yMap, this.scope, this.liveCursor);
     } else if (type === "triangle") {
-      model = new TriangleModel(yMap, this.scope);
+      model = new TriangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "rectangle") {
-      model = new RectangleModel(yMap, this.scope);
+      model = new RectangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "eraser") {
-      model = new EraserModel(yMap, this.scope);
+      model = new EraserModel(yMap, this.scope, this.liveCursor);
     } else if (type === "laser") {
-      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, (uuid) => {
+      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
         this.removeElementItem(uuid);
       });
+    } else if (type === "image") {
+      model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
@@ -62546,100 +62727,178 @@ var RenderableModel = class extends import_eventemitter3.default {
     return model;
   }
   initElement(element) {
-    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (shadow) {
-      element.shadow = "layer";
-    }
-    element.strokeWidth = this.toolbarModel.strokeWidth;
-    element.strokeColor = this.toolbarModel.strokeColor;
-    element.fillColor = this.toolbarModel.fillColor;
-    element.ownerId = this.userManager.selfId;
     element.shadowEmitter = this.shadowEmitter;
   }
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map) {
-    this.elements.doc?.transact(() => {
-      const uuid = this.uuid;
-      map.set(ElementModel.KEYS.index, ++this.maxIndex);
-      map.set(ElementModel.KEYS.uuid, uuid);
-      this.elements.set(uuid, map);
-    }, elementsUndoOrigin);
-  }
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      (0, import_forge_room2.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "image");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
+    model.root.set("src", src);
+    const initMatrix = new this.scope.Matrix();
+    const center = this.scope.project.view.center;
+    initMatrix.translate({
+      x: center.x,
+      y: center.y
+    });
+    model.appendPointsMatrix(initMatrix);
+    model.ownerId = this.userManager.selfId;
+  }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
       return null;
     }
-    const curveModel = new CurveModel(new Y12.Map(), this.scope);
-    this.initElement(curveModel, shadow);
-    this.addElementToDoc(curveModel.root);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "curve");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
+    this.initElement(curveModel);
     return curveModel;
   }
   createLaserPointer() {
     if (!this.confirmPermission()) {
       return null;
     }
-    const model = new LaserPointerModel(this.userManager.selfId, new Y12.Map(), this.scope, (uuid) => {
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "laser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 8);
+      yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
+      yMap.set(ElementModel.KEYS.fillColor, "#F44336");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
-    model.strokeWidth = 8;
-    model.strokeColor = "#F44336";
-    model.fillColor = "#F44336";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createEraser() {
     if (!this.hasPermission(WhiteboardPermissionFlag.deleteSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const model = new EraserModel(new Y12.Map(), this.scope);
-    model.strokeWidth = 12;
-    model.strokeColor = "#9E9E9E";
-    model.fillColor = "#9E9E9E";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "eraser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 4);
+      yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.fillColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
     return model;
   }
   createTriangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const triangle = new TriangleModel(new Y12.Map(), this.scope);
-    this.initElement(triangle, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "triangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(triangle);
     triangle.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(triangle.root);
     return triangle;
   }
   createRectangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const rect = new RectangleModel(new Y12.Map(), this.scope);
-    this.initElement(rect, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "rectangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(rect.root);
     return rect;
   }
   createSegmentedPath(type, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const segmentsModel = new SegmentsModel(new Y12.Map(), this.scope, type);
-    this.initElement(segmentsModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", type);
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
+    this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
   createSelector() {
@@ -62647,41 +62906,92 @@ var RenderableModel = class extends import_eventemitter3.default {
     if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const selectorModel = new SelectorModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "selector");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
-    this.addElementToDoc(selectorModel.root);
     return selectorModel;
   }
   createStraightLine(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const straightLineModel = new StraightLineModel(new Y12.Map(), this.scope);
-    this.initElement(straightLineModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "line");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(straightLineModel.root);
     return straightLineModel;
   }
   createLinePath(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const lineModel = new LineModel(new Y12.Map(), this.scope);
-    this.initElement(lineModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "arrow");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(lineModel.root);
     return lineModel;
   }
   createPointText(x, y, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const pointTextModel = new PointTextModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "point-text");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
-    this.initElement(pointTextModel, shadow);
-    this.addElementToDoc(pointTextModel.root);
+    this.initElement(pointTextModel);
     return pointTextModel;
   }
   clearElement() {
@@ -62699,9 +63009,11 @@ var RenderableModel = class extends import_eventemitter3.default {
       removeIds.forEach((id) => this.elements.delete(id));
     });
   }
-  dispose() {
-    this.elements.unobserve(this.onElementsChange);
-    this.elements.clear();
+  dispose(clearElements) {
+    (0, import_forge_room2.removeObserver)(this.elements, this.onElementsChange);
+    if (clearElements) {
+      this.elements.clear();
+    }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
     });
@@ -62924,14 +63236,14 @@ function Distance(p1, p2) {
 function Deg2Rad(d) {
   return d * Math.PI / 180;
 }
-function _defineProperty17(e, r, t) {
-  return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty18(e, r, t) {
+  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey17(t) {
-  var i = _toPrimitive17(t, "string");
+function _toPropertyKey18(t) {
+  var i = _toPrimitive18(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive17(t, r) {
+function _toPrimitive18(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62943,7 +63255,7 @@ function _toPrimitive17(t, r) {
 }
 var Recognizer = class {
   constructor() {
-    _defineProperty17(this, "dollar", new DollarRecognizer());
+    _defineProperty18(this, "dollar", new DollarRecognizer());
   }
   recognize(points) {
     let minX = Number.MAX_VALUE;
@@ -62969,14 +63281,14 @@ var Recognizer = class {
     return null;
   }
 };
-function _defineProperty18(e, r, t) {
-  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty19(e, r, t) {
+  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey18(t) {
-  var i = _toPrimitive18(t, "string");
+function _toPropertyKey19(t) {
+  var i = _toPrimitive19(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive18(t, r) {
+function _toPrimitive19(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62989,10 +63301,11 @@ function _toPrimitive18(t, r) {
 var CurveTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty18(this, "elementModel", null);
-    _defineProperty18(this, "recognizer", new Recognizer());
-    _defineProperty18(this, "pointCount", 0);
-    this.tool.minDistance = 1;
+    _defineProperty19(this, "elementModel", null);
+    _defineProperty19(this, "recognizer", new Recognizer());
+    _defineProperty19(this, "pointCount", 0);
+    _defineProperty19(this, "showLiveCursor", true);
+    this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -63056,14 +63369,14 @@ var CurveTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty19(e, r, t) {
-  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty20(e, r, t) {
+  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey19(t) {
-  var i = _toPrimitive19(t, "string");
+function _toPropertyKey20(t) {
+  var i = _toPrimitive20(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive19(t, r) {
+function _toPrimitive20(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63076,9 +63389,10 @@ function _toPrimitive19(t, r) {
 var RectangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty19(this, "elementModel", null);
-    _defineProperty19(this, "from", null);
-    _defineProperty19(this, "to", null);
+    _defineProperty20(this, "elementModel", null);
+    _defineProperty20(this, "from", null);
+    _defineProperty20(this, "to", null);
+    _defineProperty20(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -63104,14 +63418,14 @@ var RectangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty20(e, r, t) {
-  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey20(t) {
-  var i = _toPrimitive20(t, "string");
+function _toPropertyKey21(t) {
+  var i = _toPrimitive21(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive20(t, r) {
+function _toPrimitive21(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63175,8 +63489,8 @@ var ToolbarModel = class extends import_eventemitter32.default {
   }
   constructor(root, defaultStyle) {
     super();
-    _defineProperty20(this, "root", void 0);
-    _defineProperty20(this, "handleRootUpdate", (evt) => {
+    _defineProperty21(this, "root", void 0);
+    _defineProperty21(this, "handleRootUpdate", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
           this.emit("update", {
@@ -63200,18 +63514,18 @@ var ToolbarModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    this.root.unobserve(this.handleRootUpdate);
+    (0, import_forge_room6.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
-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;
+function _defineProperty22(e, r, t) {
+  return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey21(t) {
-  var i = _toPrimitive21(t, "string");
+function _toPropertyKey22(t) {
+  var i = _toPrimitive22(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive21(t, r) {
+function _toPrimitive22(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63224,11 +63538,12 @@ function _toPrimitive21(t, r) {
 var SelectorTool = class extends WhiteboardTool {
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, selectElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty21(this, "elementModel", null);
-    _defineProperty21(this, "from", null);
-    _defineProperty21(this, "to", null);
-    _defineProperty21(this, "selectElementsModel", void 0);
-    _defineProperty21(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "elementModel", null);
+    _defineProperty22(this, "from", null);
+    _defineProperty22(this, "to", null);
+    _defineProperty22(this, "selectElementsModel", void 0);
+    _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
@@ -63292,14 +63607,14 @@ var WhiteboardKeys = {
   viewMatrix: "viewMatrix",
   cameraMode: "cameraMode"
 };
-function _defineProperty22(e, r, t) {
-  return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty23(e, r, t) {
+  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey22(t) {
-  var i = _toPrimitive22(t, "string");
+function _toPropertyKey23(t) {
+  var i = _toPrimitive23(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive22(t, r) {
+function _toPrimitive23(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63318,28 +63633,28 @@ var SelectElementsModel = class extends import_eventemitter33.default {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty22(this, "requestUserMap", void 0);
-    _defineProperty22(this, "userManager", void 0);
-    _defineProperty22(this, "hasPermission", void 0);
-    _defineProperty22(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty22(this, "handleUserLeave", (user) => {
+    _defineProperty23(this, "requestUserMap", void 0);
+    _defineProperty23(this, "userManager", void 0);
+    _defineProperty23(this, "hasPermission", void 0);
+    _defineProperty23(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
-    _defineProperty22(this, "handleUserJoin", (user) => {
+    _defineProperty23(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty22(this, "handleUserSelectElementsChange", (userId, evts) => {
+    _defineProperty23(this, "handleUserSelectElementsChange", (userId, evts) => {
       for (const evt of evts) {
         if (evt.target.get("inner-map-id") === WhiteboardKeys.selectElements) {
           const elementIds = Array.from(evt.target.keys()).filter((v) => v !== "inner-map-id");
@@ -63356,7 +63671,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -63413,21 +63728,21 @@ var SelectElementsModel = class extends import_eventemitter33.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-function _defineProperty23(e, r, t) {
-  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty24(e, r, t) {
+  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey23(t) {
-  var i = _toPrimitive23(t, "string");
+function _toPropertyKey24(t) {
+  var i = _toPrimitive24(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive23(t, r) {
+function _toPrimitive24(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63440,28 +63755,28 @@ function _toPrimitive23(t, r) {
 var TextEditor = class extends import_eventemitter35.EventEmitter {
   constructor(camera) {
     super();
-    _defineProperty23(this, "rootView", void 0);
-    _defineProperty23(this, "content", void 0);
-    _defineProperty23(this, "camera", void 0);
-    _defineProperty23(this, "originX", 0);
-    _defineProperty23(this, "originY", 0);
-    _defineProperty23(this, "rotation", 0);
-    _defineProperty23(this, "scale", 1);
-    _defineProperty23(this, "handleContentInput", () => {
+    _defineProperty24(this, "rootView", void 0);
+    _defineProperty24(this, "content", void 0);
+    _defineProperty24(this, "camera", void 0);
+    _defineProperty24(this, "originX", 0);
+    _defineProperty24(this, "originY", 0);
+    _defineProperty24(this, "rotation", 0);
+    _defineProperty24(this, "scale", 1);
+    _defineProperty24(this, "handleContentInput", () => {
       this.emit("change", this.content.textContent ?? "");
       this.translateCaretIntoView();
     });
-    _defineProperty23(this, "handleContentKeydown", (evt) => {
+    _defineProperty24(this, "handleContentKeydown", (evt) => {
       if (/^Arrow/.test(evt.key)) {
         setTimeout(() => {
           this.translateCaretIntoView();
         }, 50);
       }
     });
-    _defineProperty23(this, "handleContentBlur", () => {
+    _defineProperty24(this, "handleContentBlur", () => {
       this.emit("done", this.content.textContent ?? "");
     });
-    _defineProperty23(this, "handleRootClick", (evt) => {
+    _defineProperty24(this, "handleRootClick", (evt) => {
       if (evt.target === this.rootView) {
         evt.stopPropagation();
         evt.preventDefault();
@@ -63551,14 +63866,14 @@ var TextEditor = class extends import_eventemitter35.EventEmitter {
     this.rootView.removeEventListener("pointerdown", this.handleRootClick);
   }
 };
-function _defineProperty24(e, r, t) {
-  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty25(e, r, t) {
+  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey24(t) {
-  var i = _toPrimitive24(t, "string");
+function _toPropertyKey25(t) {
+  var i = _toPrimitive25(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive24(t, r) {
+function _toPrimitive25(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63593,12 +63908,12 @@ var Bounds = class extends import_eventemitter34.default {
   }
   constructor(binding, scope) {
     super();
-    _defineProperty24(this, "minX", 0);
-    _defineProperty24(this, "minY", 0);
-    _defineProperty24(this, "maxX", 0);
-    _defineProperty24(this, "maxY", 0);
-    _defineProperty24(this, "binding", void 0);
-    _defineProperty24(this, "scope", void 0);
+    _defineProperty25(this, "minX", 0);
+    _defineProperty25(this, "minY", 0);
+    _defineProperty25(this, "maxX", 0);
+    _defineProperty25(this, "maxY", 0);
+    _defineProperty25(this, "binding", void 0);
+    _defineProperty25(this, "scope", void 0);
     this.binding = binding;
     this.scope = scope;
   }
@@ -63720,32 +64035,32 @@ var Bounds = class extends import_eventemitter34.default {
 var Editor = class extends import_eventemitter34.default {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
-    _defineProperty24(this, "rootView", void 0);
-    _defineProperty24(this, "frame", void 0);
-    _defineProperty24(this, "rotator", void 0);
-    _defineProperty24(this, "scope", void 0);
-    _defineProperty24(this, "shadowScope", void 0);
-    _defineProperty24(this, "shadowContainer", void 0);
-    _defineProperty24(this, "ctrlUserMap", void 0);
-    _defineProperty24(this, "viewerId", void 0);
-    _defineProperty24(this, "ctrlId", void 0);
-    _defineProperty24(this, "ctrlNickName", void 0);
-    _defineProperty24(this, "editMode", null);
-    _defineProperty24(this, "editCtrlName", null);
-    _defineProperty24(this, "editAnchor", null);
-    _defineProperty24(this, "lastEditPoint", null);
-    _defineProperty24(this, "bounds", void 0);
-    _defineProperty24(this, "targets", []);
-    _defineProperty24(this, "editorConfig", null);
-    _defineProperty24(this, "aspectRatio", -1);
-    _defineProperty24(this, "uniformScale", false);
-    _defineProperty24(this, "camera", void 0);
-    _defineProperty24(this, "canvasElement", void 0);
-    _defineProperty24(this, "resizeObserver", void 0);
-    _defineProperty24(this, "anchors", []);
-    _defineProperty24(this, "title", null);
-    _defineProperty24(this, "shadowEmitter", void 0);
-    _defineProperty24(this, "handleMatrix", (matrix) => {
+    _defineProperty25(this, "rootView", void 0);
+    _defineProperty25(this, "frame", void 0);
+    _defineProperty25(this, "rotator", void 0);
+    _defineProperty25(this, "scope", void 0);
+    _defineProperty25(this, "shadowScope", void 0);
+    _defineProperty25(this, "shadowContainer", void 0);
+    _defineProperty25(this, "ctrlUserMap", void 0);
+    _defineProperty25(this, "viewerId", void 0);
+    _defineProperty25(this, "ctrlId", void 0);
+    _defineProperty25(this, "ctrlNickName", void 0);
+    _defineProperty25(this, "editMode", null);
+    _defineProperty25(this, "editCtrlName", null);
+    _defineProperty25(this, "editAnchor", null);
+    _defineProperty25(this, "lastEditPoint", null);
+    _defineProperty25(this, "bounds", void 0);
+    _defineProperty25(this, "targets", []);
+    _defineProperty25(this, "editorConfig", null);
+    _defineProperty25(this, "aspectRatio", -1);
+    _defineProperty25(this, "uniformScale", false);
+    _defineProperty25(this, "camera", void 0);
+    _defineProperty25(this, "canvasElement", void 0);
+    _defineProperty25(this, "resizeObserver", void 0);
+    _defineProperty25(this, "anchors", []);
+    _defineProperty25(this, "title", null);
+    _defineProperty25(this, "shadowEmitter", void 0);
+    _defineProperty25(this, "handleMatrix", (matrix) => {
       if (this.shadowContainer) {
         const next = matrix.appended(this.shadowContainer.data.shadowMatrix ?? new this.shadowScope.Matrix());
         this.shadowContainer.data.shadowMatrix = next;
@@ -63755,7 +64070,7 @@ var Editor = class extends import_eventemitter34.default {
         this.targets.forEach((target) => target.appendPointsMatrix(matrix));
       }
     });
-    _defineProperty24(this, "handlePointerDown", (evt) => {
+    _defineProperty25(this, "handlePointerDown", (evt) => {
       if (!evt.target) {
         return;
       }
@@ -63811,7 +64126,7 @@ var Editor = class extends import_eventemitter34.default {
         };
       }
     });
-    _defineProperty24(this, "handlePointerMove", (evt) => {
+    _defineProperty25(this, "handlePointerMove", (evt) => {
       evt.preventDefault();
       if (!evt.target) {
         return;
@@ -63862,7 +64177,7 @@ var Editor = class extends import_eventemitter34.default {
         }
       }
     });
-    _defineProperty24(this, "handlePointerUp", (evt) => {
+    _defineProperty25(this, "handlePointerUp", (evt) => {
       evt.preventDefault();
       this.resetShadow();
       this.shadowEmitter.setActive(false);
@@ -63879,7 +64194,7 @@ var Editor = class extends import_eventemitter34.default {
       this.lastEditPoint = null;
       this.uniformScale = false;
     });
-    _defineProperty24(this, "handleFrameDBClick", (evt) => {
+    _defineProperty25(this, "handleFrameDBClick", (evt) => {
       if (evt.target === this.frame && this.targets.length === 1) {
         if (this.targets[0].type === "point-text") {
           this.frame.style.display = "none";
@@ -63887,7 +64202,7 @@ var Editor = class extends import_eventemitter34.default {
         }
       }
     });
-    _defineProperty24(this, "updateBounds", () => {
+    _defineProperty25(this, "updateBounds", () => {
       let minX = Number.MAX_VALUE;
       let maxX = -Number.MAX_VALUE;
       let minY = Number.MAX_VALUE;
@@ -63920,7 +64235,7 @@ var Editor = class extends import_eventemitter34.default {
     this.ctrlId = initConfig.ctrlId;
     this.ctrlNickName = initConfig.ctrlNickName;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = "position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.rootView.style.cssText = "overflow:hidden;position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.frame = document.createElement("div");
     this.frame.style.position = "absolute";
     this.frame.style.padding = "8px";
@@ -64137,14 +64452,14 @@ var Editor = class extends import_eventemitter34.default {
     this.resizeObserver.disconnect();
   }
 };
-function _defineProperty25(e, r, t) {
-  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty26(e, r, t) {
+  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey25(t) {
-  var i = _toPrimitive25(t, "string");
+function _toPropertyKey26(t) {
+  var i = _toPrimitive26(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive25(t, r) {
+function _toPrimitive26(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64157,13 +64472,14 @@ function _toPrimitive25(t, r) {
 var TextTool = class extends WhiteboardTool {
   constructor(enableToolEvent, model, shadowEmitter, scope, rootView, canvasElement, toolbarModel, camera) {
     super(enableToolEvent, model, shadowEmitter, scope);
-    _defineProperty25(this, "from", null);
-    _defineProperty25(this, "to", null);
-    _defineProperty25(this, "rootView", void 0);
-    _defineProperty25(this, "canvasElement", void 0);
-    _defineProperty25(this, "elementModel", null);
-    _defineProperty25(this, "toolbarModel", void 0);
-    _defineProperty25(this, "camera", void 0);
+    _defineProperty26(this, "from", null);
+    _defineProperty26(this, "to", null);
+    _defineProperty26(this, "rootView", void 0);
+    _defineProperty26(this, "canvasElement", void 0);
+    _defineProperty26(this, "elementModel", null);
+    _defineProperty26(this, "toolbarModel", void 0);
+    _defineProperty26(this, "camera", void 0);
+    _defineProperty26(this, "showLiveCursor", false);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -64225,14 +64541,14 @@ var TextTool = class extends WhiteboardTool {
     }, 30);
   }
 };
-function _defineProperty26(e, r, t) {
-  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty27(e, r, t) {
+  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey26(t) {
-  var i = _toPrimitive26(t, "string");
+function _toPropertyKey27(t) {
+  var i = _toPrimitive27(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive26(t, r) {
+function _toPrimitive27(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64245,11 +64561,11 @@ function _toPrimitive26(t, r) {
 var Gesture = class extends import_eventemitter37.default {
   constructor(element, scope) {
     super();
-    _defineProperty26(this, "element", void 0);
-    _defineProperty26(this, "scope", void 0);
-    _defineProperty26(this, "lastVector", null);
-    _defineProperty26(this, "lastPoint", null);
-    _defineProperty26(this, "onTouchStart", (evt) => {
+    _defineProperty27(this, "element", void 0);
+    _defineProperty27(this, "scope", void 0);
+    _defineProperty27(this, "lastVector", null);
+    _defineProperty27(this, "lastPoint", null);
+    _defineProperty27(this, "onTouchStart", (evt) => {
       if (evt.touches.length > 1) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64262,7 +64578,7 @@ var Gesture = class extends import_eventemitter37.default {
       this.lastVector = p2.subtract(p1);
       this.lastPoint = p1;
     });
-    _defineProperty26(this, "onTouchMove", (evt) => {
+    _defineProperty27(this, "onTouchMove", (evt) => {
       if (this.lastVector && this.lastPoint && evt.touches.length === 2) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64293,7 +64609,7 @@ var Gesture = class extends import_eventemitter37.default {
         this.lastPoint = null;
       }
     });
-    _defineProperty26(this, "onTouchEnd", () => {
+    _defineProperty27(this, "onTouchEnd", () => {
       this.lastVector = null;
       this.lastPoint = null;
     });
@@ -64304,14 +64620,14 @@ var Gesture = class extends import_eventemitter37.default {
     this.element.addEventListener("touchend", this.onTouchEnd);
   }
 };
-function _defineProperty27(e, r, t) {
-  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey27(t) {
-  var i = _toPrimitive27(t, "string");
+function _toPropertyKey28(t) {
+  var i = _toPrimitive28(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive27(t, r) {
+function _toPrimitive28(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64333,31 +64649,31 @@ var Camera = class extends import_eventemitter36.default {
   }
   constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, _paperSize, _domSize) {
     super();
-    _defineProperty27(this, "scope", void 0);
-    _defineProperty27(this, "dom", void 0);
-    _defineProperty27(this, "lastTriggerTime", 0);
-    _defineProperty27(this, "lastDelta", {
+    _defineProperty28(this, "scope", void 0);
+    _defineProperty28(this, "dom", void 0);
+    _defineProperty28(this, "lastTriggerTime", 0);
+    _defineProperty28(this, "lastDelta", {
       x: 0,
       y: 0
     });
-    _defineProperty27(this, "requestUserMap", void 0);
-    _defineProperty27(this, "userManager", void 0);
-    _defineProperty27(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty27(this, "whiteboardAttrsMap", void 0);
-    _defineProperty27(this, "paperSize", void 0);
-    _defineProperty27(this, "domSize", void 0);
-    _defineProperty27(this, "hasPermission", void 0);
-    _defineProperty27(this, "gesture", void 0);
-    _defineProperty27(this, "inherentScale", 1);
-    _defineProperty27(this, "maxScale", void 0);
-    _defineProperty27(this, "initSize", void 0);
-    _defineProperty27(this, "bound", void 0);
-    _defineProperty27(this, "boundTiemoutId", void 0);
-    _defineProperty27(this, "enableByMouse", true);
-    _defineProperty27(this, "enableByTouch", true);
-    _defineProperty27(this, "boundaryColor", "#F44336");
-    _defineProperty27(this, "enableBoundaryHighlight", true);
-    _defineProperty27(this, "handleMainCameraChange", (evt) => {
+    _defineProperty28(this, "requestUserMap", void 0);
+    _defineProperty28(this, "userManager", void 0);
+    _defineProperty28(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty28(this, "whiteboardAttrsMap", void 0);
+    _defineProperty28(this, "paperSize", void 0);
+    _defineProperty28(this, "domSize", void 0);
+    _defineProperty28(this, "hasPermission", void 0);
+    _defineProperty28(this, "gesture", void 0);
+    _defineProperty28(this, "inherentScale", 1);
+    _defineProperty28(this, "maxScale", void 0);
+    _defineProperty28(this, "initSize", void 0);
+    _defineProperty28(this, "bound", void 0);
+    _defineProperty28(this, "boundTiemoutId", void 0);
+    _defineProperty28(this, "enableByMouse", true);
+    _defineProperty28(this, "enableByTouch", true);
+    _defineProperty28(this, "boundaryColor", "#F44336");
+    _defineProperty28(this, "enableBoundaryHighlight", true);
+    _defineProperty28(this, "handleMainCameraChange", (evt) => {
       const userMap = this.requestUserMap(this.userManager.selfId);
       const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
       if (cameraMode !== "main") {
@@ -64374,23 +64690,23 @@ var Camera = class extends import_eventemitter36.default {
         }
       }
     });
-    _defineProperty27(this, "handleUserLeave", (user) => {
+    _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty27(this, "handleUserJoin", (user) => {
+    _defineProperty28(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserve(observer);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), observer);
       }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty27(this, "handleViewMatrixUpdate", (userId, evt) => {
+    _defineProperty28(this, "handleViewMatrixUpdate", (userId, evt) => {
       const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
       for (const [key, value] of evt.changes.keys.entries()) {
         if (value.action === "update") {
@@ -64417,7 +64733,7 @@ var Camera = class extends import_eventemitter36.default {
         }
       }
     });
-    _defineProperty27(this, "handleWheel", (evt) => {
+    _defineProperty28(this, "handleWheel", (evt) => {
       if (!this.enableByMouse) {
         return;
       }
@@ -64492,7 +64808,7 @@ var Camera = class extends import_eventemitter36.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserve(observer);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -64689,24 +65005,24 @@ var Camera = class extends import_eventemitter36.default {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        this.requestUserMap(userId).unobserve(cb);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    this.whiteboardAttrsMap.unobserve(this.handleMainCameraChange);
+    (0, import_forge_room8.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
     this.removeAllListeners();
   }
 };
-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;
+function _defineProperty29(e, r, t) {
+  return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey28(t) {
-  var i = _toPrimitive28(t, "string");
+function _toPropertyKey29(t) {
+  var i = _toPrimitive29(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive28(t, r) {
+function _toPrimitive29(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64719,9 +65035,10 @@ function _toPrimitive28(t, r) {
 var EllipseTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty28(this, "elementModel", null);
-    _defineProperty28(this, "from", null);
-    _defineProperty28(this, "to", null);
+    _defineProperty29(this, "elementModel", null);
+    _defineProperty29(this, "from", null);
+    _defineProperty29(this, "to", null);
+    _defineProperty29(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -64751,14 +65068,14 @@ var EllipseTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty29(e, r, t) {
-  return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty30(e, r, t) {
+  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey29(t) {
-  var i = _toPrimitive29(t, "string");
+function _toPropertyKey30(t) {
+  var i = _toPrimitive30(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive29(t, r) {
+function _toPrimitive30(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64771,9 +65088,10 @@ function _toPrimitive29(t, r) {
 var TriangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty29(this, "elementModel", null);
-    _defineProperty29(this, "from", null);
-    _defineProperty29(this, "to", null);
+    _defineProperty30(this, "elementModel", null);
+    _defineProperty30(this, "from", null);
+    _defineProperty30(this, "to", null);
+    _defineProperty30(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -64799,14 +65117,14 @@ var TriangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty30(e, r, t) {
-  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty31(e, r, t) {
+  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey30(t) {
-  var i = _toPrimitive30(t, "string");
+function _toPropertyKey31(t) {
+  var i = _toPrimitive31(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive30(t, r) {
+function _toPrimitive31(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64817,62 +65135,65 @@ function _toPrimitive30(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var Whiteboard = class extends import_eventemitter38.default {
-  // public insertImage!: (src: string) => void;
   constructor(view) {
     super();
-    _defineProperty30(this, "view", void 0);
-    _defineProperty30(this, "selfUserId", void 0);
-    _defineProperty30(this, "permissions", void 0);
-    _defineProperty30(this, "tool", void 0);
-    _defineProperty30(this, "fontSize", void 0);
-    _defineProperty30(this, "dashArray", void 0);
-    _defineProperty30(this, "fontFamily", void 0);
-    _defineProperty30(this, "strokeColor", void 0);
-    _defineProperty30(this, "fillColor", void 0);
-    _defineProperty30(this, "strokeWidth", void 0);
-    _defineProperty30(this, "enableCameraByMouse", void 0);
-    _defineProperty30(this, "enableCameraByTouch", void 0);
-    _defineProperty30(this, "cameraBoundaryColor", void 0);
-    _defineProperty30(this, "enableCameraBoundaryHighlight", void 0);
-    _defineProperty30(this, "getElementAttribute", void 0);
-    _defineProperty30(this, "setElementAttribute", void 0);
-    _defineProperty30(this, "getCurrentTool", void 0);
-    _defineProperty30(this, "setCurrentTool", void 0);
-    _defineProperty30(this, "setCanvasBackgroundColor", void 0);
-    _defineProperty30(this, "setThemeColor", void 0);
-    _defineProperty30(this, "gotoPage", void 0);
-    _defineProperty30(this, "addPage", void 0);
-    _defineProperty30(this, "deletePage", void 0);
-    _defineProperty30(this, "pageList", void 0);
-    _defineProperty30(this, "currentPageId", void 0);
-    _defineProperty30(this, "clonePage", void 0);
-    _defineProperty30(this, "clearPage", void 0);
-    _defineProperty30(this, "translateCamera", void 0);
-    _defineProperty30(this, "scaleCamera", void 0);
-    _defineProperty30(this, "resetCamera", void 0);
-    _defineProperty30(this, "setFreeModelUserPage", void 0);
-    _defineProperty30(this, "indexedNavigation", void 0);
-    _defineProperty30(this, "setViewModeToFree", void 0);
-    _defineProperty30(this, "setViewModeToFlow", void 0);
-    _defineProperty30(this, "setViewModeToMain", void 0);
-    _defineProperty30(this, "getViewModel", void 0);
-    _defineProperty30(this, "undo", void 0);
-    _defineProperty30(this, "redo", void 0);
-    _defineProperty30(this, "rasterizeViewport", void 0);
-    _defineProperty30(this, "rasterizeElementsBounds", void 0);
-    _defineProperty30(this, "rasterizeMaxBounds", void 0);
-    _defineProperty30(this, "setInputType", void 0);
+    _defineProperty31(this, "view", void 0);
+    _defineProperty31(this, "selfUserId", void 0);
+    _defineProperty31(this, "permissions", void 0);
+    _defineProperty31(this, "tool", void 0);
+    _defineProperty31(this, "fontSize", void 0);
+    _defineProperty31(this, "dashArray", void 0);
+    _defineProperty31(this, "fontFamily", void 0);
+    _defineProperty31(this, "strokeColor", void 0);
+    _defineProperty31(this, "fillColor", void 0);
+    _defineProperty31(this, "strokeWidth", void 0);
+    _defineProperty31(this, "enableCameraByMouse", void 0);
+    _defineProperty31(this, "enableCameraByTouch", void 0);
+    _defineProperty31(this, "cameraBoundaryColor", void 0);
+    _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
+    _defineProperty31(this, "getElementAttribute", void 0);
+    _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "removeElement", void 0);
+    _defineProperty31(this, "getCurrentTool", void 0);
+    _defineProperty31(this, "setCurrentTool", void 0);
+    _defineProperty31(this, "setCanvasBackgroundColor", void 0);
+    _defineProperty31(this, "setThemeColor", void 0);
+    _defineProperty31(this, "gotoPage", void 0);
+    _defineProperty31(this, "addPage", void 0);
+    _defineProperty31(this, "deletePage", void 0);
+    _defineProperty31(this, "pageList", void 0);
+    _defineProperty31(this, "currentPageId", void 0);
+    _defineProperty31(this, "clonePage", void 0);
+    _defineProperty31(this, "clearPage", void 0);
+    _defineProperty31(this, "translateCamera", void 0);
+    _defineProperty31(this, "scaleCamera", void 0);
+    _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "showLiveCursor", void 0);
+    _defineProperty31(this, "updateViewport", void 0);
+    _defineProperty31(this, "setFreeModelUserPage", void 0);
+    _defineProperty31(this, "indexedNavigation", void 0);
+    _defineProperty31(this, "setViewModeToFree", void 0);
+    _defineProperty31(this, "setViewModeToFlow", void 0);
+    _defineProperty31(this, "setViewModeToMain", void 0);
+    _defineProperty31(this, "getViewModel", void 0);
+    _defineProperty31(this, "undo", void 0);
+    _defineProperty31(this, "redo", void 0);
+    _defineProperty31(this, "rasterizeViewport", void 0);
+    _defineProperty31(this, "rasterizeElementsBounds", void 0);
+    _defineProperty31(this, "rasterizeMaxBounds", void 0);
+    _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
-function _defineProperty31(e, r, t) {
-  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty32(e, r, t) {
+  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey31(t) {
-  var i = _toPrimitive31(t, "string");
+function _toPropertyKey32(t) {
+  var i = _toPrimitive32(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive31(t, r) {
+function _toPrimitive32(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64883,13 +65204,16 @@ function _toPrimitive31(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserTool = class extends WhiteboardTool {
-  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
+  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel, shadowScope) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty31(this, "elementModel", null);
-    _defineProperty31(this, "trashedElementsModel", void 0);
-    _defineProperty31(this, "pointCount", 0);
+    _defineProperty32(this, "elementModel", null);
+    _defineProperty32(this, "trashedElementsModel", void 0);
+    _defineProperty32(this, "pointCount", 0);
+    _defineProperty32(this, "showLiveCursor", true);
+    _defineProperty32(this, "shadowScope", void 0);
     this.trashedElementsModel = trashedElementsModel;
-    this.tool.minDistance = 1;
+    this.tool.minDistance = 2;
+    this.shadowScope = shadowScope;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -64916,6 +65240,16 @@ var EraserTool = class extends WhiteboardTool {
         this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
       }
     });
+    this.shadowScope.project.activeLayer.children.forEach((item) => {
+      if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.hitTest(event.point, {
+        segments: true,
+        stroke: true,
+        fill: true,
+        tolerance: 5
+      })) {
+        this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
+      }
+    });
   }
   onMouseUp(_event) {
     if (this.elementModel) {
@@ -64924,14 +65258,14 @@ var EraserTool = class extends WhiteboardTool {
     this.trashedElementsModel.removeAllTrashedElementsForSelf();
   }
 };
-function _defineProperty32(e, r, t) {
-  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey32(t) {
-  var i = _toPrimitive32(t, "string");
+function _toPropertyKey33(t) {
+  var i = _toPrimitive33(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive32(t, r) {
+function _toPrimitive33(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64950,22 +65284,22 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty32(this, "requestUserMap", void 0);
-    _defineProperty32(this, "userManager", void 0);
-    _defineProperty32(this, "hasPermission", void 0);
-    _defineProperty32(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty32(this, "handleUserLeave", (user) => {
+    _defineProperty33(this, "requestUserMap", void 0);
+    _defineProperty33(this, "userManager", void 0);
+    _defineProperty33(this, "hasPermission", void 0);
+    _defineProperty33(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty32(this, "handleUserJoin", (user) => {
+    _defineProperty33(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -64979,7 +65313,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -65036,21 +65370,21 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-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;
+function _defineProperty34(e, r, t) {
+  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey33(t) {
-  var i = _toPrimitive33(t, "string");
+function _toPropertyKey34(t) {
+  var i = _toPrimitive34(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive33(t, r) {
+function _toPrimitive34(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65063,8 +65397,9 @@ function _toPrimitive33(t, r) {
 var LaserPointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty33(this, "elementModel", null);
-    _defineProperty33(this, "pointCount", 0);
+    _defineProperty34(this, "elementModel", null);
+    _defineProperty34(this, "pointCount", 0);
+    _defineProperty34(this, "showLiveCursor", true);
     this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
@@ -65089,14 +65424,14 @@ var LaserPointerTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty34(e, r, t) {
-  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey34(t) {
-  var i = _toPrimitive34(t, "string");
+function _toPropertyKey35(t) {
+  var i = _toPrimitive35(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive34(t, r) {
+function _toPrimitive35(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65109,22 +65444,22 @@ function _toPrimitive34(t, r) {
 var PageModel = class extends import_eventemitter310.default {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
-    _defineProperty34(this, "whiteboardAttrsMap", void 0);
-    _defineProperty34(this, "pageMap", void 0);
-    _defineProperty34(this, "requestUserMap", void 0);
-    _defineProperty34(this, "userManager", void 0);
-    _defineProperty34(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty34(this, "hasPermission", void 0);
-    _defineProperty34(this, "handleUserLeave", (user) => {
+    _defineProperty35(this, "whiteboardAttrsMap", void 0);
+    _defineProperty35(this, "pageMap", void 0);
+    _defineProperty35(this, "requestUserMap", void 0);
+    _defineProperty35(this, "userManager", void 0);
+    _defineProperty35(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty35(this, "hasPermission", void 0);
+    _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room10.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty34(this, "handleUserJoin", (user) => {
+    _defineProperty35(this, "handleUserJoin", (user) => {
       this.createCurrentPageObserver(user.id);
     });
-    _defineProperty34(this, "handleMainPageChange", (evt) => {
+    _defineProperty35(this, "handleMainPageChange", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65132,7 +65467,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_room3.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room10.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -65142,7 +65477,7 @@ var PageModel = class extends import_eventemitter310.default {
         }
       }
     });
-    _defineProperty34(this, "handleUserCurrentPageChange", (userId, evt) => {
+    _defineProperty35(this, "handleUserCurrentPageChange", (userId, evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65159,7 +65494,7 @@ var PageModel = class extends import_eventemitter310.default {
         }
       }
     });
-    _defineProperty34(this, "handlePageMapChange", () => {
+    _defineProperty35(this, "handlePageMapChange", () => {
       this.emit("pagesChange", Array.from(this.pageMap.keys()));
     });
     this.hasPermission = hasPermission;
@@ -65260,12 +65595,12 @@ var PageModel = class extends import_eventemitter310.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      this.requestUserMap(userId).unobserve(observer);
+      (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    this.whiteboardAttrsMap.unobserve(this.handleMainPageChange);
-    this.pageMap.unobserve(this.handlePageMapChange);
+    (0, import_forge_room10.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room10.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 var delay = (value) => new Promise((resolve) => setTimeout(resolve, value));
@@ -65275,14 +65610,14 @@ async function waitUntil(fn, timeout) {
     await delay(50);
   }
 }
-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;
+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;
 }
-function _toPropertyKey35(t) {
-  var i = _toPrimitive35(t, "string");
+function _toPropertyKey36(t) {
+  var i = _toPrimitive36(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive35(t, r) {
+function _toPrimitive36(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65301,7 +65636,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room4.log)("indexed navigation confusion", {
+      (0, import_forge_room11.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -65319,13 +65654,13 @@ var IndexedNavigation = class extends import_eventemitter311.default {
   }
   constructor(pageModel, userMap, indexedPageMap, hasPermission) {
     super();
-    _defineProperty35(this, "idPool", /* @__PURE__ */ new Set());
-    _defineProperty35(this, "pageModel", void 0);
-    _defineProperty35(this, "userMap", void 0);
-    _defineProperty35(this, "indexedPageMap", void 0);
-    _defineProperty35(this, "list", {});
-    _defineProperty35(this, "hasPermission", void 0);
-    _defineProperty35(this, "handleIndexedPageMapUpdate", (_evt) => {
+    _defineProperty36(this, "idPool", /* @__PURE__ */ new Set());
+    _defineProperty36(this, "pageModel", void 0);
+    _defineProperty36(this, "userMap", void 0);
+    _defineProperty36(this, "indexedPageMap", void 0);
+    _defineProperty36(this, "list", {});
+    _defineProperty36(this, "hasPermission", void 0);
+    _defineProperty36(this, "handleIndexedPageMapUpdate", (_evt) => {
       this.list = this.indexedPageMap.get("list");
       const needRemoveList = this.pageModel.pageList().filter((v) => /^_i_/.test(v) && Object.keys(this.list).indexOf(v) < 0);
       const needAddList = Object.keys(this.list).filter((v) => this.pageModel.pageList().indexOf(v) < 0);
@@ -65403,6 +65738,9 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     const userPageId = this.userMap.get(WhiteboardKeys.currentPage);
     return this.getPageIndex(userPageId);
   }
+  get currentPageId() {
+    return this.userMap.get(WhiteboardKeys.currentPage);
+  }
   getPageIndex(pageId) {
     let i = 0;
     let currentId = this.head;
@@ -65573,9 +65911,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     if (this.pageCount <= 1) {
       return this.pageCount;
     }
-    const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
-    if (cameraMode !== "main") {
-      console.warn("cannot modify pages in non-main view mode.");
+    if (!this.modifyDetect()) {
       return this.pageCount;
     }
     const targetId = this.getPageId(index);
@@ -65616,19 +65952,19 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     }
   }
   dispose() {
-    this.indexedPageMap.unobserve(this.handleIndexedPageMapUpdate);
+    (0, import_forge_room12.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
 };
-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;
+function _defineProperty37(e, r, t) {
+  return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey36(t) {
-  var i = _toPrimitive36(t, "string");
+function _toPropertyKey37(t) {
+  var i = _toPrimitive37(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive36(t, r) {
+function _toPrimitive37(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65641,7 +65977,7 @@ function _toPrimitive36(t, r) {
 var ShadowEmitter = class extends import_eventemitter312.default {
   constructor(userMap) {
     super();
-    _defineProperty36(this, "userMap", void 0);
+    _defineProperty37(this, "userMap", void 0);
     this.userMap = userMap;
   }
   getActive() {
@@ -65651,14 +65987,14 @@ var ShadowEmitter = class extends import_eventemitter312.default {
     return this.userMap.set("shadowActive", value);
   }
 };
-function _defineProperty37(e, r, t) {
-  return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty38(e, r, t) {
+  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey37(t) {
-  var i = _toPrimitive37(t, "string");
+function _toPropertyKey38(t) {
+  var i = _toPrimitive38(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive37(t, r) {
+function _toPrimitive38(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65671,9 +66007,10 @@ function _toPrimitive37(t, r) {
 var StraightLineTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty37(this, "elementModel", null);
-    _defineProperty37(this, "from", null);
-    _defineProperty37(this, "to", null);
+    _defineProperty38(this, "elementModel", null);
+    _defineProperty38(this, "from", null);
+    _defineProperty38(this, "to", null);
+    _defineProperty38(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -65699,14 +66036,14 @@ var StraightLineTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty38(e, r, t) {
-  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty39(e, r, t) {
+  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey38(t) {
-  var i = _toPrimitive38(t, "string");
+function _toPropertyKey39(t) {
+  var i = _toPrimitive39(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive38(t, r) {
+function _toPrimitive39(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65719,8 +66056,9 @@ function _toPrimitive38(t, r) {
 var GrabTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope, camera) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty38(this, "camera", void 0);
-    _defineProperty38(this, "downPoint", null);
+    _defineProperty39(this, "camera", void 0);
+    _defineProperty39(this, "downPoint", null);
+    _defineProperty39(this, "showLiveCursor", false);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -65739,9 +66077,27 @@ var GrabTool = class extends WhiteboardTool {
     this.shadowEmitter.emit("grabUp");
   }
 };
+function _defineProperty40(e, r, t) {
+  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey40(t) {
+  var i = _toPrimitive40(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive40(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var PointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty40(this, "showLiveCursor", false);
   }
   onMouseDown(_event) {
   }
@@ -65750,14 +66106,14 @@ var PointerTool = class extends WhiteboardTool {
   onMouseUp() {
   }
 };
-function _defineProperty39(e, r, t) {
-  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty41(e, r, t) {
+  return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey39(t) {
-  var i = _toPrimitive39(t, "string");
+function _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive39(t, r) {
+function _toPrimitive41(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65769,8 +66125,8 @@ function _toPrimitive39(t, r) {
 }
 var SequenceExecutor = class {
   constructor() {
-    _defineProperty39(this, "tasks", []);
-    _defineProperty39(this, "isRunning", false);
+    _defineProperty41(this, "tasks", []);
+    _defineProperty41(this, "isRunning", false);
   }
   addTask(task) {
     this.tasks.push(task);
@@ -65795,14 +66151,133 @@ var SequenceExecutor = class {
     this.isRunning = false;
   }
 };
-function _defineProperty40(e, r, t) {
-  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty42(e, r, t) {
+  return (r = _toPropertyKey42(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey40(t) {
-  var i = _toPrimitive40(t, "string");
+function _toPropertyKey42(t) {
+  var i = _toPrimitive42(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive40(t, r) {
+function _toPrimitive42(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var LiveCursor = class {
+  constructor(canvasElement, paperScope, userManager, requestUserMap) {
+    _defineProperty42(this, "container", document.createElement("div"));
+    _defineProperty42(this, "showLiveCursor", true);
+    _defineProperty42(this, "userManager", void 0);
+    _defineProperty42(this, "requestUserMap", void 0);
+    _defineProperty42(this, "cursors", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "paperScope", void 0);
+    _defineProperty42(this, "resizeobserver", void 0);
+    _defineProperty42(this, "timeoutIdMap", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "lastVisibleChangeTimes", /* @__PURE__ */ new Map());
+    this.userManager = userManager;
+    this.paperScope = paperScope;
+    this.requestUserMap = requestUserMap;
+    this.container.setAttribute("data-forge-cursors", "");
+    this.container.style.cssText = "overflow:hidden;pointer-events:none;z-index:999;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.container.style.pointerEvents = "none";
+    this.resizeobserver = new ResizeObserver(() => {
+      const bounds = canvasElement.getBoundingClientRect();
+      this.container.style.width = bounds.width + "px";
+      this.container.style.height = bounds.height + "px";
+    });
+    this.resizeobserver.observe(canvasElement);
+  }
+  createCursor(userId) {
+    const cursor = document.createElement("fcursor");
+    cursor.setAttribute("data-forge-cursor", userId);
+    cursor.style.backgroundColor = this.requestUserMap(userId).get(WhiteboardKeys.themeColor);
+    cursor.style.color = "#fff";
+    cursor.style.position = "absolute";
+    cursor.style.whiteSpace = "nowrap";
+    cursor.style.display = "block";
+    cursor.style.fontSize = "12px";
+    cursor.style.padding = "2px 4px";
+    cursor.style.borderRadius = "4px";
+    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+    return cursor;
+  }
+  isOnSamePage(userId) {
+    const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+    const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
+    if (otherPage !== selfPage) {
+      return false;
+    }
+    return true;
+  }
+  detectEnable(userId) {
+    if (!this.showLiveCursor) {
+      const cursor = this.cursors.get(userId);
+      if (cursor) {
+        cursor.style.display = "none";
+      }
+    }
+    return this.showLiveCursor;
+  }
+  updateCursorPosition(point, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    const lastVisibleChangeTime = this.lastVisibleChangeTimes.get(userId);
+    if (lastVisibleChangeTime && Date.now() - lastVisibleChangeTime < 100) {
+      return;
+    }
+    if (!this.cursors.has(userId)) {
+      const cursor2 = this.createCursor(userId);
+      this.cursors.set(userId, cursor2);
+      this.container.appendChild(cursor2);
+    }
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      const viewPoint = this.paperScope.project.view.projectToView(point);
+      cursor.style.left = viewPoint.x + "px";
+      cursor.style.top = viewPoint.y + "px";
+      cursor.style.display = "block";
+    }
+    if (this.timeoutIdMap.has(userId)) {
+      clearTimeout(this.timeoutIdMap.get(userId));
+    }
+    this.timeoutIdMap.set(userId, setTimeout(() => {
+      const cursor2 = this.cursors.get(userId);
+      if (cursor2) {
+        cursor2.style.display = "none";
+      }
+    }, 5e3));
+  }
+  updateCursorVisible(visible, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    this.lastVisibleChangeTimes.set(userId, Date.now());
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      cursor.style.display = visible ? "block" : "none";
+    }
+  }
+};
+function _defineProperty43(e, r, t) {
+  return (r = _toPropertyKey43(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey43(t) {
+  var i = _toPrimitive43(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive43(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65813,6 +66288,21 @@ function _toPrimitive40(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
+var AsyncMap = class {
+  constructor() {
+    _defineProperty43(this, "map", void 0);
+    this.map = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    return Promise.resolve(this.map.get(key));
+  }
+  set(key, value) {
+    this.map.set(key, value);
+  }
+};
+if (!window.__forge_gl_wb_status__) {
+  window.__forge_gl_wb_status__ = new AsyncMap();
+}
 var WhiteboardApplication = class extends import_forge_room.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
@@ -65821,43 +66311,110 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     }
     return null;
   }
+  get viewportWidth() {
+    const vw = this.getMap("attrs").get("viewportWidth");
+    if (vw) {
+      return vw;
+    }
+    return this.option.width;
+  }
+  get viewportHeight() {
+    const vh = this.getMap("attrs").get("viewportHeight");
+    if (vh) {
+      return vh;
+    }
+    return this.option.height;
+  }
   constructor() {
     var _this;
     super();
     _this = this;
-    _defineProperty40(this, "name", WHITEBOARD_APP_NAME);
-    _defineProperty40(this, "emitter", void 0);
-    _defineProperty40(this, "toolbarModel", void 0);
-    _defineProperty40(this, "selectElementsModel", void 0);
-    _defineProperty40(this, "trashedElementsModel", void 0);
-    _defineProperty40(this, "pageModel", void 0);
-    _defineProperty40(this, "layers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "undoManagers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "rootElement", document.createElement("div"));
-    _defineProperty40(this, "paperScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "canvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "snapshotCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "snapshotScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "shadowCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowEmitter", void 0);
-    _defineProperty40(this, "tools", void 0);
-    _defineProperty40(this, "editors", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "camera", void 0);
-    _defineProperty40(this, "resizeObserver", void 0);
-    _defineProperty40(this, "option", void 0);
-    _defineProperty40(this, "permissions", void 0);
-    _defineProperty40(this, "inputType", "any");
-    _defineProperty40(this, "isPenEvent", false);
-    _defineProperty40(this, "hasPenInput", null);
-    _defineProperty40(this, "disableViewModelUpdate", false);
-    _defineProperty40(this, "internalResizeObserver", true);
-    _defineProperty40(this, "sequenceExecutor", new SequenceExecutor());
-    _defineProperty40(this, "linkTarget", null);
-    _defineProperty40(this, "enableToolEvent", () => {
+    _defineProperty43(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty43(this, "emitter", void 0);
+    _defineProperty43(this, "toolbarModel", void 0);
+    _defineProperty43(this, "selectElementsModel", void 0);
+    _defineProperty43(this, "trashedElementsModel", void 0);
+    _defineProperty43(this, "pageModel", void 0);
+    _defineProperty43(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "imageSets", document.createElement("div"));
+    _defineProperty43(this, "rootElement", document.createElement("div"));
+    _defineProperty43(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowEmitter", void 0);
+    _defineProperty43(this, "tools", void 0);
+    _defineProperty43(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "camera", void 0);
+    _defineProperty43(this, "resizeObserver", void 0);
+    _defineProperty43(this, "option", void 0);
+    _defineProperty43(this, "permissions", void 0);
+    _defineProperty43(this, "inputType", "any");
+    _defineProperty43(this, "isPenEvent", false);
+    _defineProperty43(this, "hasPenInput", null);
+    _defineProperty43(this, "disableViewModelUpdate", false);
+    _defineProperty43(this, "internalResizeObserver", true);
+    _defineProperty43(this, "sequenceExecutor", new SequenceExecutor());
+    _defineProperty43(this, "linkWhiteboardId", null);
+    _defineProperty43(this, "liveCursor", void 0);
+    _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "addWhiteboardStatus", (evt) => {
+      if (evt.detail.whiteboardAppId && evt.detail.status) {
+        if (this.linkWhiteboardId === evt.detail.whiteboardAppId) {
+          this.toolbarModel.currentTool = evt.detail.status.currentTool;
+          this.toolbarModel.strokeColor = evt.detail.status.strokeColor;
+          this.toolbarModel.fillColor = evt.detail.status.fillColor;
+          this.toolbarModel.fontSize = evt.detail.status.fontSize;
+          this.toolbarModel.fontFamily = evt.detail.status.fontFamily;
+          this.toolbarModel.strokeWidth = evt.detail.status.strokeWidth;
+          this.toolbarModel.dashArray = evt.detail.status.dashArray;
+          this.permissions.removePermission(WhiteboardPermissionFlag.all);
+          this.permissions.addPermission(evt.detail.status.permission);
+        }
+      }
+    });
+    _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty40(this, "handlePageSwitch", (pageId) => {
+    _defineProperty43(this, "handleViewportUpdate", (evt) => {
+      if (evt.keysChanged.has("viewportWidth") || evt.keysChanged.has("viewportHeight")) {
+        const rect = this.rootElement.getBoundingClientRect();
+        this.adjustByOutFrame(rect.width, rect.height);
+      }
+    });
+    _defineProperty43(this, "handleElementTranslateOut", (ids, container) => {
+      const shadowLayer = this.shadowScope.project.activeLayer;
+      let parent = null;
+      if (container === "layer") {
+        parent = shadowLayer;
+      } else {
+        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
+      }
+      if (parent) {
+        ids.forEach((id) => {
+          const target = parent.children.find((child) => child.data.uuid === id);
+          if (target) {
+            target.remove();
+            this.insertElementToParent(target, this.paperScope.project.activeLayer);
+          } else {
+            const pageId = this.pageModel.getCurrentPage(this.userId);
+            if (pageId) {
+              const page = this.layers.get(pageId);
+              if (page) {
+                const model = page.elementModels.get(id);
+                if (model && model.item) {
+                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+    _defineProperty43(this, "handlePageSwitch", (pageId) => {
       this.sequenceExecutor.addTask(async () => {
         for (const editor of this.editors.values()) {
           editor.hidden();
@@ -65905,24 +66462,24 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
     });
-    _defineProperty40(this, "hasPermission", (flag) => {
+    _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty40(this, "handleStackItemAdded", () => {
+    _defineProperty43(this, "handleStackItemAdded", () => {
       this.selectElementsModel.clearSelectElementForSelf();
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleStackItemPopped", () => {
+    _defineProperty43(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleLayersChange", (ids) => {
+    _defineProperty43(this, "handleLayersChange", (ids) => {
       for (let i = 0, len = ids.length; i < len; i++) {
         const id = ids[i];
         if (!this.layers.has(id)) {
           const elementsMap = this.getMap(`layer/${id}/elements`);
-          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission);
+          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission);
           this.layers.set(id, renderableModel);
         }
         if (!this.undoManagers.has(id)) {
@@ -65938,7 +66495,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
           const renderableModel = this.layers.get(entry[0]);
           this.layers.delete(entry[0]);
           if (renderableModel) {
-            renderableModel.dispose();
+            renderableModel.dispose(true);
           }
           const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
           const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
@@ -65949,17 +66506,18 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         }
       }
     });
-    _defineProperty40(this, "getCurrentRenderableModel", () => {
+    _defineProperty43(this, "getCurrentRenderableModel", () => {
       const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (!this.layers.has(layerId)) {
         this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
       }
       return this.layers.get(layerId);
     });
-    _defineProperty40(this, "handleElementClear", () => {
+    _defineProperty43(this, "handleElementClear", () => {
+      this.shadowScope.project.activeLayer.removeChildren();
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty40(this, "handleElementInsert", (elements) => {
+    _defineProperty43(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -65971,7 +66529,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty40(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty43(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -65982,11 +66540,11 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty40(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty43(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty40(this, "handleElementsTrash", (userId, elements) => {
+    _defineProperty43(this, "handleElementsTrash", (userId, elements) => {
       const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
@@ -65999,7 +66557,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         }
       });
     });
-    _defineProperty40(this, "handleElementsSelect", (userId, elements) => {
+    _defineProperty43(this, "handleElementsSelect", (userId, elements) => {
       if (!this.editors.has(userId)) {
         const ctrl = this.userManager.getUser(userId);
         const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
@@ -66042,34 +66600,44 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty40(this, "handleLinkedMapChange", (evt) => {
-      for (const [key, value] of evt.changes.keys.entries()) {
-        if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
-          this.toolbarModel.currentTool = evt.target.get(TOOLBAR_KEYS.tool);
-          this.toolbarModel.strokeColor = evt.target.get(TOOLBAR_KEYS.strokeColor);
-          this.toolbarModel.fillColor = evt.target.get(TOOLBAR_KEYS.fillColor);
-          this.toolbarModel.fontSize = evt.target.get(TOOLBAR_KEYS.fontSize);
-          this.toolbarModel.fontFamily = evt.target.get(TOOLBAR_KEYS.fontFamily);
-          this.toolbarModel.strokeWidth = evt.target.get(TOOLBAR_KEYS.strokeWidth);
-          this.toolbarModel.dashArray = evt.target.get(TOOLBAR_KEYS.dashArray);
-        }
-        if (key === "permission" && (value.action === "add" || value.action === "update")) {
-          this.permissions.removePermission(WhiteboardPermissionFlag.all);
-          this.permissions.addPermission(evt.target.get("permission"), this.userId);
-        }
+    _defineProperty43(this, "handleSyncedWhiteboardStatusChange", (evt) => {
+      if ([TOOLBAR_KEYS.tool, TOOLBAR_KEYS.strokeColor, TOOLBAR_KEYS.fillColor, TOOLBAR_KEYS.fontSize, TOOLBAR_KEYS.fontFamily, TOOLBAR_KEYS.strokeWidth, TOOLBAR_KEYS.dashArray, "permission"].some((key) => evt.keysChanged.has(key))) {
+        const nextState = {
+          currentTool: evt.target.get(TOOLBAR_KEYS.tool),
+          strokeColor: evt.target.get(TOOLBAR_KEYS.strokeColor),
+          fillColor: evt.target.get(TOOLBAR_KEYS.fillColor),
+          fontSize: evt.target.get(TOOLBAR_KEYS.fontSize),
+          fontFamily: evt.target.get(TOOLBAR_KEYS.fontFamily),
+          strokeWidth: evt.target.get(TOOLBAR_KEYS.strokeWidth),
+          dashArray: evt.target.get(TOOLBAR_KEYS.dashArray),
+          permission: evt.target.get("permission")
+        };
+        window.__forge_gl_wb_status__.set(this.appId, nextState);
+        window.dispatchEvent(new CustomEvent("forge-whiteboard-synced-status", {
+          detail: {
+            whiteboardAppId: this.appId,
+            status: nextState,
+            userId: this.userId
+          }
+        }));
       }
     });
-    _defineProperty40(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
-      if (this.option.width > 0 && this.option.height > 0) {
+    _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+      if (!this.paperScope.project.view || !this.shadowScope.project.view) {
+        return;
+      }
+      const viewportWidth = this.viewportWidth;
+      const viewportHeight = this.viewportHeight;
+      if (viewportWidth > 0 && viewportHeight > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
         let width = minWidth;
-        let height = width * this.option.height / this.option.width;
+        let height = width * viewportHeight / viewportWidth;
         if (height > minHeight) {
           height = minHeight;
-          width = height * this.option.width / this.option.height;
+          width = height * viewportWidth / viewportHeight;
         }
-        this.camera.updateInherentScale(width / this.option.width);
+        this.camera.updateInherentScale(width / viewportWidth);
         this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.camera.triggerZoom();
@@ -66079,6 +66647,9 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     requestAnimationFrameHook(this.shadowScope);
     const that = this;
     this.rootElement.setAttribute("data-forge-app", "whiteboard");
+    this.imageSets.style.display = "none";
+    this.imageSets.setAttribute("data-image-sets", "");
+    this.rootElement.appendChild(this.imageSets);
     document.body.addEventListener("pointerdown", (evt) => {
       this.isPenEvent = evt.pointerType === "pen";
       if (evt.pointerType === "pen" && this.hasPenInput === null) {
@@ -66178,6 +66749,30 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+          src
+        }, "warning");
+        return;
+      }
+      let targetPageId = pageId;
+      if (!targetPageId) {
+        targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
+      }
+      if (!targetPageId) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -66193,7 +66788,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -66243,12 +66838,29 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.emitter.resetCamera = () => {
       this.camera.reset();
     };
+    this.emitter.showLiveCursor = (value) => {
+      this.liveCursor.showLiveCursor = value;
+    };
+    this.emitter.updateViewport = (width, height) => {
+      this.updateOptionSize(width, height);
+    };
+    this.emitter.__setMainCanvasVisible = (visible) => {
+      this.canvasElement.style.opacity = visible ? "1" : "0";
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
       (0, import_forge_room.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
     });
+    Object.defineProperty(this.emitter, "__delayTranslateOut", {
+      get() {
+        return that.delayTranslateOut;
+      },
+      set(value) {
+        that.delayTranslateOut = value;
+      }
+    });
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -66337,6 +66949,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         that.camera.enableBoundaryHighlight = value;
       }
     });
+    window.addEventListener("forge-whiteboard-synced-status", this.addWhiteboardStatus);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -66349,7 +66962,19 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     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);
@@ -66397,6 +67022,9 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     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.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       curve: new CurveTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
@@ -66407,7 +67035,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       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),
+      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)
     };
@@ -66479,32 +67107,12 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }
     });
     this.shadowEmitter.on("translateOut", (ids, container) => {
-      const shadowLayer = this.shadowScope.project.activeLayer;
-      let parent = null;
-      if (container === "layer") {
-        parent = shadowLayer;
+      if (this.delayTranslateOut > 0) {
+        setTimeout(() => {
+          this.handleElementTranslateOut(ids, container);
+        }, this.delayTranslateOut);
       } else {
-        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
-      }
-      if (parent) {
-        ids.forEach((id) => {
-          const target = parent.children.find((child) => child.data.uuid === id);
-          if (target) {
-            target.remove();
-            this.insertElementToParent(target, this.paperScope.project.activeLayer);
-          } else {
-            const pageId = this.pageModel.getCurrentPage(this.userId);
-            if (pageId) {
-              const page = this.layers.get(pageId);
-              if (page) {
-                const model = page.elementModels.get(id);
-                if (model && model.item) {
-                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
-                }
-              }
-            }
-          }
-        });
+        this.handleElementTranslateOut(ids, container);
       }
     });
     this.shadowEmitter.on("translateIn", (ids, container) => {
@@ -66531,6 +67139,15 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       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);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -66626,10 +67243,10 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       this.snapshotScope.view.viewSize = bounds.size.multiply(scale2);
       this.snapshotScope.view.matrix = matrix;
     } else if (area === "maxScale" && this.option.maxScaleRatio && this.option.maxScaleRatio !== -1) {
-      const width = this.option.width * this.option.maxScaleRatio;
-      const height = this.option.height * this.option.maxScaleRatio;
-      const offsetX = this.option.width * (this.option.maxScaleRatio - 1) / 2;
-      const offsetY = this.option.height * (this.option.maxScaleRatio - 1) / 2;
+      const width = this.viewportWidth * this.option.maxScaleRatio;
+      const height = this.viewportHeight * this.option.maxScaleRatio;
+      const offsetX = this.viewportWidth * (this.option.maxScaleRatio - 1) / 2;
+      const offsetY = this.viewportHeight * (this.option.maxScaleRatio - 1) / 2;
       const matrix = new this.paperScope.Matrix();
       matrix.scale(scale);
       matrix.translate({
@@ -66653,28 +67270,23 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.disableViewModelUpdate = true;
   }
   linkToWhiteboard(targetId) {
-    if (this.linkTarget) {
-      this.unlink();
-    }
-    this.userMap(this.userId);
-    this.linkTarget = this.roomDoc.getMap(`@app/${this.name}/${targetId}/user/${this.userId}`);
-    if (this.linkTarget) {
-      this.toolbarModel.currentTool = this.linkTarget.get(TOOLBAR_KEYS.tool);
-      this.toolbarModel.strokeColor = this.linkTarget.get(TOOLBAR_KEYS.strokeColor);
-      this.toolbarModel.fillColor = this.linkTarget.get(TOOLBAR_KEYS.fillColor);
-      this.toolbarModel.fontSize = this.linkTarget.get(TOOLBAR_KEYS.fontSize);
-      this.toolbarModel.fontFamily = this.linkTarget.get(TOOLBAR_KEYS.fontFamily);
-      this.toolbarModel.strokeWidth = this.linkTarget.get(TOOLBAR_KEYS.strokeWidth);
-      this.toolbarModel.dashArray = this.linkTarget.get(TOOLBAR_KEYS.dashArray);
-      this.permissions.removePermission(WhiteboardPermissionFlag.all);
-      this.permissions.addPermission(this.linkTarget.get("permission"), this.userId);
-      this.linkTarget.observe(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = targetId;
+    window.__forge_gl_wb_status__.get(targetId).then((currentStatus) => {
+      if (currentStatus) {
+        this.toolbarModel.currentTool = currentStatus.currentTool;
+        this.toolbarModel.strokeColor = currentStatus.strokeColor;
+        this.toolbarModel.fillColor = currentStatus.fillColor;
+        this.toolbarModel.fontSize = currentStatus.fontSize;
+        this.toolbarModel.fontFamily = currentStatus.fontFamily;
+        this.toolbarModel.strokeWidth = currentStatus.strokeWidth;
+        this.toolbarModel.dashArray = currentStatus.dashArray;
+        this.permissions.removePermission(WhiteboardPermissionFlag.all);
+        this.permissions.addPermission(currentStatus.permission);
+      }
+    });
   }
   unlink() {
-    if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = null;
   }
   setViewSize(width, height) {
     this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
@@ -66691,11 +67303,14 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.internalResizeObserver = value;
   }
   updateOptionSize(width, height) {
-    this.option.width = width;
-    this.option.height = height;
+    this.getMap("attrs").set("viewportWidth", width);
+    this.getMap("attrs").set("viewportHeight", height);
     this.camera.updateInitSize(new import_paper.default.Size(width, height));
   }
-  async dispose() {
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
     this.selectElementsModel.dispose();
     this.trashedElementsModel.dispose();
     this.paperScope.view.remove();
@@ -66712,7 +67327,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       entry[1].off("stack-item-popped", this.handleStackItemPopped);
     }
     for (const entry of this.layers.entries()) {
-      entry[1].dispose();
+      entry[1].dispose(removeSubDoc);
       entry[1].removeAllListeners();
     }
     this.camera.dispose();
@@ -66724,13 +67339,14 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
+    (0, import_forge_room13.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
   }
 };
-_defineProperty40(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 
 // src/SlideApplication.ts
 var import_slide = __toESM(require_Slide());
-var import_forge_room6 = require("@netless/forge-room");
+var import_forge_room16 = require("@netless/forge-room");
 
 // src/Slide.ts
 var import_eventemitter313 = __toESM(require("eventemitter3"));
@@ -66790,7 +67406,7 @@ var SlideForge = class extends import_eventemitter313.default {
 };
 
 // src/ForgeSlidePermession.ts
-var import_forge_room5 = require("@netless/forge-room");
+var import_forge_room14 = require("@netless/forge-room");
 var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["none"] = 0] = "none";
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["changeStep"] = 1] = "changeStep";
@@ -66799,7 +67415,7 @@ var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["all"] = 7] = "all";
   return ForgeSlidePermissionFlag2;
 })(ForgeSlidePermissionFlag || {});
-var ForgeSlidePermissions = class extends import_forge_room5.AbstractApplicationPermissions {
+var ForgeSlidePermissions = class extends import_forge_room14.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -66950,10 +67566,16 @@ var FooterView = class extends import_eventemitter314.default {
 
 // src/SiderBarView.ts
 var import_eventemitter315 = __toESM(require("eventemitter3"));
+var import_forge_room15 = require("@netless/forge-room");
 var SideBarView = class extends import_eventemitter315.default {
   root = document.createElement("div");
   isShow = false;
   eventsMap = /* @__PURE__ */ new Map();
+  taskId = "";
+  prefix = "";
+  addImagesPool = [];
+  scheduleId = 0;
+  isSchedule = false;
   constructor() {
     super();
     this.root.style.backgroundColor = "#eee";
@@ -66974,49 +67596,110 @@ var SideBarView = class extends import_eventemitter315.default {
   get isShowSideBar() {
     return this.isShow;
   }
+  async getPreviewImage(imageUrl) {
+    const image = await fetch(imageUrl);
+    const blob = await image.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64Data = reader.result;
+        const img = document.createElement("img");
+        img.src = base64Data;
+        img.onload = () => {
+          resolve({
+            url: imageUrl,
+            src: base64Data,
+            width: img.width,
+            height: img.height
+          });
+        };
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  async appendPreviewImage(pageIndex) {
+    const itemContainer = document.createElement("div");
+    itemContainer.style.width = "60%";
+    itemContainer.style.display = "flex";
+    itemContainer.style.justifyContent = "center";
+    itemContainer.style.alignItems = "flex-start";
+    itemContainer.style.position = "relative";
+    itemContainer.style.borderRadius = "4px";
+    itemContainer.style.transition = "border-color .3s";
+    itemContainer.style.marginBottom = "10px";
+    const onMouseOverHandle = () => {
+      itemContainer.style.borderColor = "#ccc";
+    };
+    const onMouseOutHandle = () => {
+      itemContainer.style.borderColor = "transparent";
+    };
+    const onClickHandle = () => {
+      this.emit("pageChange", pageIndex);
+    };
+    itemContainer.addEventListener("click", onClickHandle);
+    itemContainer.addEventListener("mouseover", onMouseOverHandle);
+    itemContainer.addEventListener("mouseout", onMouseOutHandle);
+    this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
+    const pageIndexContainer = document.createElement("span");
+    pageIndexContainer.textContent = `${pageIndex}`;
+    pageIndexContainer.style.position = "absolute";
+    pageIndexContainer.style.top = "1px";
+    pageIndexContainer.style.left = "-10px";
+    pageIndexContainer.style.transform = "translate(-100%)";
+    pageIndexContainer.style.fontSize = "12px";
+    pageIndexContainer.style.color = "#5f5f5f";
+    const previewUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
+    const preview = document.createElement("img");
+    const cachePreview = await import_forge_room15.kvStore.getItem(previewUrl);
+    if (cachePreview) {
+      const { src } = JSON.parse(cachePreview);
+      preview.src = src;
+    } else {
+      const previewInfo = await this.getPreviewImage(previewUrl);
+      await import_forge_room15.kvStore.setItem(previewUrl, JSON.stringify(previewInfo));
+      const { src } = previewInfo;
+      preview.src = src;
+    }
+    preview.style.width = "100%";
+    preview.style.display = "inline-block";
+    itemContainer.appendChild(preview);
+    itemContainer.appendChild(pageIndexContainer);
+    this.root.appendChild(itemContainer);
+  }
+  async scheduleGetPreviewImage() {
+    if (!this.isSchedule) {
+      this.scheduleId = setTimeout(async () => {
+        await this.scheduleGetPreviewImage();
+      }, 32);
+      return;
+    }
+    const pageIndex = this.addImagesPool.shift();
+    if (!pageIndex) {
+      clearTimeout(this.scheduleId);
+      this.scheduleId = 0;
+      return;
+    }
+    await this.appendPreviewImage(pageIndex);
+    this.scheduleId = setTimeout(async () => {
+      await this.scheduleGetPreviewImage();
+    }, 32);
+  }
+  async startGetPreviewImageSchedule() {
+    this.isSchedule = true;
+  }
+  pauseGetPreviewImageSchedule() {
+    this.isSchedule = false;
+  }
   initialize(slideCount, option) {
+    this.taskId = option.taskId;
+    this.prefix = option.prefix;
     for (let i = 1; i <= slideCount; i++) {
-      const itemContainer = document.createElement("div");
-      itemContainer.style.width = "60%";
-      itemContainer.style.display = "flex";
-      itemContainer.style.justifyContent = "center";
-      itemContainer.style.alignItems = "flex-start";
-      itemContainer.style.position = "relative";
-      itemContainer.style.borderRadius = "4px";
-      itemContainer.style.transition = "border-color .3s";
-      itemContainer.style.marginBottom = "10px";
-      const onMouseOverHandle = () => {
-        itemContainer.style.borderColor = "#ccc";
-      };
-      const onMouseOutHandle = () => {
-        itemContainer.style.borderColor = "transparent";
-      };
-      const onClickHandle = () => {
-        this.emit("pageChange", i);
-      };
-      itemContainer.addEventListener("click", onClickHandle);
-      itemContainer.addEventListener("mouseover", onMouseOverHandle);
-      itemContainer.addEventListener("mouseout", onMouseOutHandle);
-      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
-      const pageIndex = document.createElement("span");
-      pageIndex.textContent = `${i}`;
-      pageIndex.style.position = "absolute";
-      pageIndex.style.top = "1px";
-      pageIndex.style.left = "-10px";
-      pageIndex.style.transform = "translate(-100%)";
-      pageIndex.style.fontSize = "12px";
-      pageIndex.style.color = "#5f5f5f";
-      const preview = document.createElement("img");
-      preview.style.width = "100%";
-      preview.style.display = "inline-block";
-      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
-      itemContainer.appendChild(preview);
-      itemContainer.appendChild(pageIndex);
-      this.root.appendChild(itemContainer);
+      this.addImagesPool.push(i);
     }
+    this.scheduleGetPreviewImage();
   }
   hidden() {
-    if (!this.root) {
+    if (!this.root || !this.isShow) {
       return;
     }
     this.root.style.left = "-240px";
@@ -67045,7 +67728,7 @@ var SideBarView = class extends import_eventemitter315.default {
 };
 
 // src/utils.ts
-function deepEqual(a2, b2, excludeKeys = ["time"]) {
+function deepEqual(a2, b2, excludeKeys = ["mediaState"]) {
   if (a2 === b2) return true;
   if (typeof a2 !== "object" || a2 === null || typeof b2 !== "object" || b2 === null) return false;
   if (a2.constructor !== b2.constructor) return false;
@@ -67081,7 +67764,7 @@ function arrayEqual(arr1, arr2) {
 
 // src/SlideApplication.ts
 var Slide_APP_NAME = "forge_slide";
-var SlideApplication = class extends import_forge_room6.AbstractApplication {
+var SlideApplication = class extends import_forge_room16.AbstractApplication {
   static applicationName = Slide_APP_NAME;
   name = Slide_APP_NAME;
   emitter = new SlideForge();
@@ -67106,7 +67789,7 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     super();
     window.emitter = this.emitter;
     this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
-    this.rootView.style.background = "#f0f0f0f0";
+    this.rootView.style.background = "#f9f9fc";
     this.rootView.style.overflow = "hidden";
     this.contentContainer.style.width = "100%";
     this.contentContainer.style.height = "100%";
@@ -67279,28 +67962,6 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     }
     return `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
   }
-  async getPreviewImage(imageUrl) {
-    const image = fetch(imageUrl);
-    return await image.then((res) => res.blob()).then((blob) => {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result;
-          const img = document.createElement("img");
-          img.src = base64Data;
-          img.onload = () => {
-            resolve({
-              url: imageUrl,
-              src: base64Data,
-              width: img.width,
-              height: img.height
-            });
-          };
-        };
-        reader.readAsDataURL(blob);
-      });
-    });
-  }
   async getImageUrl(pageIndex) {
     return this.getPreviewImageUrl(pageIndex);
   }
@@ -67308,7 +67969,7 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await import_forge_room6.kvStore.getItem(imageUrl);
+      const result = await import_forge_room16.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67316,15 +67977,15 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     if (preview) {
       return { width: preview.width, height: preview.height };
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room6.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await import_forge_room16.kvStore.setItem(imageUrl, JSON.stringify(preview));
     return { width: preview.width, height: preview.height };
   }
   async getImageContent(pageIndex) {
     const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await import_forge_room6.kvStore.getItem(imageUrl);
+      const result = await import_forge_room16.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67332,8 +67993,8 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     if (preview) {
       return preview.src;
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room6.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await import_forge_room16.kvStore.setItem(imageUrl, JSON.stringify(preview));
     return preview.src;
   }
   nextTick = () => {
@@ -67355,10 +68016,14 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     this.syncMessageQueue = [];
     this.isSyncing = true;
     const { state, dispatch } = lastSyncMessage;
-    if (this.slide.slideState.currentSlideIndex < 0) {
+    let ignoreKeys = void 0;
+    if (dispatch.type === "mediaPlay" || dispatch.type === "mediaPause" || dispatch.type === "mediaFullscreen") {
+      ignoreKeys = [dispatch.id];
+    }
+    if (this.slide.slideState.currentSlideIndex < 0 || state.currentSlideIndex < 0) {
       await this.slide.receiveSyncHandler(dispatch);
       return this.nextTick();
-    } else if (!deepEqual(this.slide.slideState, state)) {
+    } else if (!deepEqual(this.slide.slideState, state, ignoreKeys)) {
       await this.slide.setSlideState(state);
       await this.slide.receiveSyncHandler(dispatch);
     } else {
@@ -67411,11 +68076,11 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     this.prefix = option.prefix;
     this.taskId = option.taskId;
     const whiteboardApp = new WhiteboardApplication();
-    whiteboardApp.roomDoc = this.roomDoc;
-    whiteboardApp.appId = `${option.taskId}_${this.appId}_wb`;
+    whiteboardApp.appDoc = this.appDoc;
+    whiteboardApp.appId = `${this.appId}_wb`;
     whiteboardApp.userId = this.userId;
     whiteboardApp.userManager = this.userManager;
-    whiteboardApp.applicationManager = this.applicationManager;
+    whiteboardApp.deleteSubDoc = this.deleteSubDoc;
     const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then((res) => res.json());
     this.slideCount = json.slideCount;
     await whiteboardApp.initialize({
@@ -67453,7 +68118,13 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
       ...option.options,
       interactive: true,
       anchor: this.slideContainer,
-      mode: "interactive"
+      mode: "interactive",
+      clientId: Math.random().toString(36).substring(2, 15),
+      timestamp: () => {
+        console.log("timestamp");
+        console.log(Date.now, this.calibrationTimestamp, Date.now() - this.calibrationTimestamp);
+        return this.calibrationTimestamp;
+      }
       // logger: {
       //     info: console.log,
       //     warn: console.warn,
@@ -67474,25 +68145,28 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     this.slide.on(import_slide.SLIDE_EVENTS.mainSeqStepEnd, (animateIndex) => {
       this.emitter.emit("mainSeqStepEnd", animateIndex);
     });
-    this.slide.on(import_slide.SLIDE_EVENTS.animateStart, () => {
-      this.sideBar.hidden();
-    });
     this.slide.on(import_slide.SLIDE_EVENTS.renderError, ({ error, index }) => {
       if (error.errorType === "CANVAS_CRASH") {
         this.slide.renderSlide(index);
       }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.renderStart, (slideIndex) => {
-      this.whiteboardApp.emitter.view.style.opacity = "0";
-      this.whiteboardApp.emitter.addPage(`${slideIndex}`);
-      this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
-      this.sideBar.hidden();
-      this.emitter.emit("renderStart", slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.pauseGetPreviewImageSchedule();
+        this.whiteboardApp.emitter.view.style.opacity = "0";
+        this.whiteboardApp.emitter.addPage(`${slideIndex}`);
+        this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        this.sideBar.hidden();
+        this.emitter.emit("renderStart", slideIndex);
+      }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.renderEnd, (slideIndex) => {
-      this.currentSlideIndex = slideIndex;
-      this.whiteboardApp.emitter.view.style.opacity = "1";
-      this.emitter.emit("renderEnd", slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.startGetPreviewImageSchedule();
+        this.currentSlideIndex = slideIndex;
+        this.whiteboardApp.emitter.view.style.opacity = "1";
+        this.emitter.emit("renderEnd", slideIndex);
+      }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.stateChange, (state) => {
       this.getMap(this.name).set("slideState", state);
@@ -67501,6 +68175,9 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
     window.slide = this.slide;
     window.slideWhiteboard = this.whiteboardApp;
     window.forgeSlide = this;
+    this.whiteboardContainer.addEventListener("click", () => {
+      this.sideBar.hidden();
+    }, false);
     const syncSlide = this.getMap(this.name).get("slideState");
     if (syncSlide && syncSlide.taskId === option.taskId) {
       this.slide.setSlideState(syncSlide);
@@ -67544,6 +68221,7 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
           this.onRefocusInstance();
         }
       });
+      this.bindKeyBoardEvent();
     }
     window.__forge_slide = this;
     window.slidePermissions = this.permissions;
@@ -67552,8 +68230,11 @@ var SlideApplication = class extends import_forge_room6.AbstractApplication {
   userMap(userId) {
     return this.getMap(`user/${userId}`);
   }
-  async dispose() {
-    await this.whiteboardApp.dispose();
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
+    await this.whiteboardApp.dispose(removeSubDoc);
     this.rootView.parentElement?.removeChild(this.rootView);
     this.slide.destroy();
     this.sideBar.dispose();