@netless/forge-whiteboard 0.1.15 → 0.1.17

package/dist/whiteboard.js

@@ -21876,7 +21876,7 @@ var require_lodash = __commonJS({
           end = end === undefined2 ? length : end;
           return !start && end >= length ? array : baseSlice(array, start, end);
         }
-        var clearTimeout = ctxClearTimeout || function(id) {
+        var clearTimeout2 = ctxClearTimeout || function(id) {
           return root.clearTimeout(id);
         };
         function cloneBuffer(buffer, isDeep) {
@@ -23747,7 +23747,7 @@ var require_lodash = __commonJS({
           }
           function cancel() {
             if (timerId !== undefined2) {
-              clearTimeout(timerId);
+              clearTimeout2(timerId);
             }
             lastInvokeTime = 0;
             lastArgs = lastCallTime = lastThis = timerId = undefined2;
@@ -23765,7 +23765,7 @@ var require_lodash = __commonJS({
                 return leadingEdge(lastCallTime);
               }
               if (maxing) {
-                clearTimeout(timerId);
+                clearTimeout2(timerId);
                 timerId = setTimeout2(timerExpired, wait);
                 return invokeFunc(lastCallTime);
               }
@@ -25371,14 +25371,15 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WhiteboardApplication.ts
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var Y15 = __toESM(require("yjs"), 1);
 var import_paper = __toESM(require_paper_full(), 1);
 
 // src/model/RenderableModel.ts
 var Y12 = __toESM(require("yjs"), 1);
-var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
+var import_forge_room4 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25536,6 +25537,7 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 // src/model/renderable/ElementModel.ts
 var Y = __toESM(require("yjs"), 1);
+var import_forge_room = require("@netless/forge-room");
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -25616,11 +25618,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;
@@ -25629,7 +25632,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);
@@ -25649,6 +25652,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);
                 }
               }
@@ -25656,11 +25663,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]);
@@ -25720,7 +25733,7 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-    this.root.unobserveDeep(this.handlePropChange);
+    (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
 _defineProperty(ElementModel, "KEYS", {
@@ -25792,15 +25805,18 @@ 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);
     if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
     if (!this.root.has("points")) {
       this.root.set("points", new Y2.Array());
     }
+    this.debugPath = new scope.Path();
   }
   average(a2, b2) {
     return (a2 + b2) / 2;
@@ -25809,23 +25825,23 @@ var CurveModel = class extends ElementModel {
     const groupPoints = (0, import_lodash.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: 10,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 10,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const groupPoints = (0, import_lodash.chunk)(this.points, 2);
-    return groupPoints.map((_ref) => {
+    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) => {
@@ -25859,27 +25875,41 @@ var CurveModel = class extends ElementModel {
     }
     return path;
   }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+  updateDebugPath() {
+    this.debugPath = new this.scope.Path();
+    const points = (0, import_lodash.chunk)(this.points, 2);
+    for (let i = 0, len = points.length; i < len; i++) {
+      const point = new this.scope.Point(points[i][0], points[i][1]);
+      if (i === 0) {
+        this.debugPath.moveTo(point);
+      } else {
+        this.debugPath.lineTo(point);
+      }
+      this.debugPath.strokeWidth = 1;
+      this.debugPath.strokeColor = new this.scope.Color(1, 0, 0, 1);
+    }
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    if (this.debug) {
+      this.debugPath.remove();
+      this.updateDebugPath();
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
-    this.item.simplify(2.5);
+    this.item.addSegments(path.segments);
+    if (this.debug) {
+      this.item.addChild(this.debugPath);
+    }
   }
   createPaperItem() {
     this.item = new this.scope.Path();
-    this.item.strokeCap = "round";
-    this.item.strokeJoin = "round";
-    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());
+    this.onVectorUpdate();
   }
   editorConfig() {
     return new EditorConfig();
@@ -25889,10 +25919,19 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      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;
@@ -25900,6 +25939,8 @@ var CurveModel = class extends ElementModel {
     if (key === "strokeColor") {
       this.item.strokeColor = new this.scope.Color(this.strokeColor);
       this.item.fillColor = new this.scope.Color(this.strokeColor);
+    } else if (key === "strokeWidth") {
+      this.onVectorUpdate();
     }
   }
   subDispose() {
@@ -25926,8 +25967,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");
@@ -25938,6 +25979,9 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  liveCursorPoint() {
+    return null;
+  }
   subDispose() {
   }
   createPaperRect() {
@@ -26064,8 +26108,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);
@@ -26076,6 +26120,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;
@@ -26201,6 +26253,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) {
@@ -26265,8 +26318,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")) {
@@ -26315,6 +26368,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());
@@ -26429,6 +26491,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 var Y6 = __toESM(require("yjs"), 1);
+var import_forge_room2 = require("@netless/forge-room");
 function _defineProperty10(e, r, t) {
   return (r = _toPropertyKey10(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -26465,8 +26528,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) {
@@ -26498,7 +26561,16 @@ var PointTextModel = class extends ElementModel {
     }
   }
   subDispose() {
-    this.root.unobserve(this.handleTextPropChange);
+    (0, import_forge_room2.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) {
@@ -26595,8 +26667,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");
@@ -26605,6 +26677,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() {
@@ -26687,8 +26768,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");
@@ -26704,6 +26785,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);
@@ -26863,8 +26952,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")) {
@@ -26903,41 +26992,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();
@@ -26946,21 +27036,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;
       }
     };
   }
@@ -26981,6 +27063,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));
+  }
 };
 
 // src/model/renderable/LaserPointerModel.ts
@@ -27004,8 +27095,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);
@@ -27142,27 +27233,19 @@ 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));
+  }
 };
 
 // src/WhitePermissions.ts
-var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
-function _defineProperty15(e, r, t) {
-  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
-}
-function _toPropertyKey15(t) {
-  var i = _toPrimitive15(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive15(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 import_forge_room3 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27175,59 +27258,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_eventemitter3.default {
-  constructor(userManager, requestUserMap) {
-    super();
-    _defineProperty15(this, "requestUserMap", void 0);
-    _defineProperty15(this, "userManager", void 0);
-    _defineProperty15(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty15(this, "handleUserLeave", (user) => {
-      const cb = this.observers.get(user.id);
-      if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
-      }
-    });
-    _defineProperty15(this, "handleUserJoin", (user) => {
-      this.addObserve(user.id);
-    });
-    this.userManager = userManager;
-    this.requestUserMap = requestUserMap;
-    this.createModel(this.userManager.selfId);
-    this.userManager.userIdList().forEach((userId) => {
-      this.addObserve(userId);
-    });
-    this.userManager.on("join", this.handleUserJoin);
-    this.userManager.on("leave", this.handleUserLeave);
-  }
-  addObserve(userId) {
-    if (this.observers.has(userId)) {
-      return;
-    }
-    const observer = (evt) => {
-      this.handleUserPermissionChange(userId, evt);
-    };
-    if (this.observers.has(userId)) {
-      this.requestUserMap(userId).unobserve(this.observers.get(userId));
-    }
-    this.observers.set(userId, observer);
-    this.requestUserMap(userId).observe(observer);
-  }
-  createModel(userId) {
-    const userMap = this.requestUserMap(userId);
-    if (!userMap.has("permission")) {
-      userMap.set("permission", 0);
-    }
-  }
-  handleUserPermissionChange(userId, evt) {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === "permission") {
-        if (value.action === "add" || value.action === "update") {
-          const newValue = this.requestUserMap(userId).get("permission");
-          this.emit("change", userId, this.resolveFlags(newValue), newValue);
-        }
-      }
-    }
-  }
+var WhiteboardPermissions = class extends import_forge_room3.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -27236,70 +27267,19 @@ var WhiteboardPermissions = class extends import_eventemitter3.default {
   resolveFlags(value) {
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
-  /**
-     * 获取权限列表组合对应的数值
-     * @param { string } userId 不传表示获取自己
-     */
-  getPermissionValue(userId) {
-    return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-  }
-  /**
-     * 获取权限列表
-     * @param {string=} userId 可选, 不传表示获取自己
-     */
-  getPermissionFlags(userId) {
-    const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    return this.resolveFlags(value);
-  }
-  /**
-     * 返回对应 userId 是否有相应权限
-     * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
-     * @param {WhiteboardPermissionFlag} flag
-     */
-  hasPermission(flag, userId) {
-    return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-  }
-  /**
-     * 添加权限
-     * @param {WhiteboardPermissionFlag} flag 权限标记
-     * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
-     */
-  addPermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-  }
-  /**
-     * 移除权限
-     * @param {WhiteboardPermissionFlag} flag 权限标记
-     * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
-     */
-  removePermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & ~flag);
-  }
-  dispose() {
-    this.userManager.off("join", this.handleUserJoin);
-    this.userManager.off("leave", this.handleUserLeave);
-    this.observers.forEach((cb, userId) => {
-      this.requestUserMap(userId).unobserve(cb);
-    });
-    this.observers.clear();
-  }
 };
 
 // src/model/renderable/StraightLineModel.ts
 var Y11 = __toESM(require("yjs"), 1);
 var import_lodash7 = __toESM(require_lodash(), 1);
-function _defineProperty16(e, r, t) {
-  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty15(e, r, t) {
+  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey16(t) {
-  var i = _toPrimitive16(t, "string");
+function _toPropertyKey15(t) {
+  var i = _toPrimitive15(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive16(t, r) {
+function _toPrimitive15(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -27310,9 +27290,9 @@ function _toPrimitive16(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
-    _defineProperty16(this, "item", null);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
+    _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -27320,6 +27300,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() {
@@ -27405,6 +27394,86 @@ var StraightLineModel = class extends ElementModel {
   }
 };
 
+// src/model/renderable/ImageModel.ts
+function _defineProperty16(e, r, t) {
+  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey16(t) {
+  var i = _toPrimitive16(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive16(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 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;
+  }
+};
+
 // src/model/RenderableModel.ts
 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;
@@ -27423,11 +27492,11 @@ function _toPrimitive17(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var RenderableModel = class extends import_eventemitter32.default {
+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();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -27438,6 +27507,8 @@ var RenderableModel = class extends import_eventemitter32.default {
     _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") {
@@ -27445,7 +27516,9 @@ var RenderableModel = class extends import_eventemitter32.default {
           if (root) {
             const model = this.convertToModel(root);
             if (model) {
-              this.emit("elementInsert", [model]);
+              setTimeout(() => {
+                this.emit("elementInsert", [model]);
+              });
             }
           }
         } else if (value.action === "delete") {
@@ -27453,6 +27526,8 @@ var RenderableModel = class extends import_eventemitter32.default {
         }
       }
     });
+    this.liveCursor = liveCursor;
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27491,27 +27566,29 @@ var RenderableModel = class extends import_eventemitter32.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;
@@ -27533,36 +27610,57 @@ var RenderableModel = class extends import_eventemitter32.default {
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map) {
+  addElementToDoc(map, type) {
     this.elements.doc?.transact(() => {
       const uuid = this.uuid;
       map.set(ElementModel.KEYS.index, ++this.maxIndex);
       map.set(ElementModel.KEYS.uuid, uuid);
+      map.set("type", type);
       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_room4.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "image");
+    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);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "curve");
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
     this.initElement(curveModel, shadow);
-    this.addElementToDoc(curveModel.root);
     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.addElementToDoc(yMap, "laser");
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
     model.strokeWidth = 8;
@@ -27570,50 +27668,53 @@ var RenderableModel = class extends import_eventemitter32.default {
     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;
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "eraser");
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
+    model.strokeWidth = 4;
     model.strokeColor = "#9E9E9E";
     model.fillColor = "#9E9E9E";
     model.ownerId = this.userManager.selfId;
     model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createTriangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const triangle = new TriangleModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "triangle");
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
     this.initElement(triangle, shadow);
     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);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "rectangle");
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
     this.initElement(rect, shadow);
     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);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, type);
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     this.initElement(segmentsModel, shadow);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
   createSelector() {
@@ -27621,41 +27722,45 @@ var RenderableModel = class extends import_eventemitter32.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.addElementToDoc(yMap, "selector");
+    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);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "line");
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
     this.initElement(straightLineModel, shadow);
     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);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "arrow");
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
     this.initElement(lineModel, shadow);
     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.addElementToDoc(yMap, "point-text");
+    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);
     return pointTextModel;
   }
   clearElement() {
@@ -27674,7 +27779,7 @@ var RenderableModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    this.elements.unobserve(this.onElementsChange);
+    (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
     this.elements.clear();
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
@@ -27974,7 +28079,8 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "elementModel", null);
     _defineProperty19(this, "recognizer", new Recognizer());
     _defineProperty19(this, "pointCount", 0);
-    this.tool.minDistance = 1;
+    _defineProperty19(this, "showLiveCursor", true);
+    this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -27987,9 +28093,24 @@ var CurveTool = class extends WhiteboardTool {
     if (this.pointCount > 1024) {
       return;
     }
+    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      this.pointCount += 1;
-      this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      const len = this.elementModel.points.length;
+      let last = {
+        x: 0,
+        y: 0
+      };
+      if (len >= 2) {
+        last = {
+          x: this.elementModel.points[len - 2],
+          y: this.elementModel.points[len - 1]
+        };
+      }
+      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
+      if (dist >= MIN_DISTANCE) {
+        this.pointCount += 1;
+        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      }
     }
   }
   onMouseUp(event) {
@@ -28048,6 +28169,7 @@ var RectangleTool = class extends WhiteboardTool {
     _defineProperty20(this, "elementModel", null);
     _defineProperty20(this, "from", null);
     _defineProperty20(this, "to", null);
+    _defineProperty20(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -28075,7 +28197,8 @@ var RectangleTool = class extends WhiteboardTool {
 };
 
 // src/model/ToolbarModel.ts
-var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room5 = require("@netless/forge-room");
 function _defineProperty21(e, r, t) {
   return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -28102,7 +28225,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends import_eventemitter33.default {
+var ToolbarModel = class extends import_eventemitter32.default {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -28172,7 +28295,7 @@ var ToolbarModel = class extends import_eventemitter33.default {
     });
   }
   dispose() {
-    this.root.unobserve(this.handleRootUpdate);
+    (0, import_forge_room5.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -28203,6 +28326,7 @@ var SelectorTool = class extends WhiteboardTool {
     _defineProperty22(this, "to", null);
     _defineProperty22(this, "selectElementsModel", void 0);
     _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
@@ -28260,7 +28384,8 @@ var SelectorTool = class extends WhiteboardTool {
 
 // src/model/SelectElementsModel.ts
 var Y13 = __toESM(require("yjs"), 1);
-var import_eventemitter34 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_forge_room6 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -28291,7 +28416,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends import_eventemitter34.default {
+var SelectElementsModel = class extends import_eventemitter33.default {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -28307,7 +28432,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
@@ -28316,7 +28441,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -28338,7 +28463,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -28395,7 +28520,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -28404,10 +28529,10 @@ var SelectElementsModel = class extends import_eventemitter34.default {
 };
 
 // src/edit/Editor.ts
-var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter35 = __toESM(require("eventemitter3"), 1);
 
 // src/edit/TextEditor.ts
-var import_eventemitter35 = require("eventemitter3");
+var import_eventemitter34 = require("eventemitter3");
 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;
 }
@@ -28425,7 +28550,7 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends import_eventemitter35.EventEmitter {
+var TextEditor = class extends import_eventemitter34.EventEmitter {
   constructor(camera) {
     super();
     _defineProperty24(this, "rootView", void 0);
@@ -28568,7 +28693,7 @@ var ANCHOR_STYLE = {
   b: "cursor:s-resize;bottom:-3px;left:50%;translate:-50%;",
   br: "cursor:se-resize;bottom:-3px;right:-3px"
 };
-var Bounds = class extends import_eventemitter36.default {
+var Bounds = class extends import_eventemitter35.default {
   get width() {
     return this.maxX - this.minX;
   }
@@ -28707,7 +28832,7 @@ var Bounds = class extends import_eventemitter36.default {
     this.maxY = maxY;
   }
 };
-var Editor = class extends import_eventemitter36.default {
+var Editor = class extends import_eventemitter35.default {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
     _defineProperty25(this, "rootView", void 0);
@@ -28910,7 +29035,7 @@ var Editor = class extends import_eventemitter36.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";
@@ -29156,6 +29281,7 @@ var TextTool = class extends WhiteboardTool {
     _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;
@@ -29219,10 +29345,10 @@ var TextTool = class extends WhiteboardTool {
 };
 
 // src/Camera.ts
-var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
 
 // src/Gesture.ts
-var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
 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;
 }
@@ -29240,7 +29366,7 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends import_eventemitter37.default {
+var Gesture = class extends import_eventemitter36.default {
   constructor(element, scope) {
     super();
     _defineProperty27(this, "element", void 0);
@@ -29304,6 +29430,7 @@ var Gesture = class extends import_eventemitter37.default {
 };
 
 // src/Camera.ts
+var import_forge_room7 = require("@netless/forge-room");
 function _defineProperty28(e, r, t) {
   return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29321,7 +29448,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends import_eventemitter38.default {
+var Camera = class extends import_eventemitter37.default {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -29377,7 +29504,7 @@ var Camera = class extends import_eventemitter38.default {
     _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
@@ -29385,7 +29512,7 @@ var Camera = class extends import_eventemitter38.default {
         this.handleViewMatrixUpdate(user.id, evt);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserve(observer);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), observer);
       }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
@@ -29492,7 +29619,7 @@ var Camera = class extends import_eventemitter38.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserve(observer);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -29689,10 +29816,10 @@ var Camera = class extends import_eventemitter38.default {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        this.requestUserMap(userId).unobserve(cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    this.whiteboardAttrsMap.unobserve(this.handleMainCameraChange);
+    (0, import_forge_room7.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -29724,6 +29851,7 @@ var EllipseTool = class extends WhiteboardTool {
     _defineProperty29(this, "elementModel", null);
     _defineProperty29(this, "from", null);
     _defineProperty29(this, "to", null);
+    _defineProperty29(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -29778,6 +29906,7 @@ var TriangleTool = class extends WhiteboardTool {
     _defineProperty30(this, "elementModel", null);
     _defineProperty30(this, "from", null);
     _defineProperty30(this, "to", null);
+    _defineProperty30(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -29805,7 +29934,7 @@ var TriangleTool = class extends WhiteboardTool {
 };
 
 // src/Whiteboard.ts
-var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
 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;
 }
@@ -29823,8 +29952,7 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends import_eventemitter39.default {
-  // public insertImage!: (src: string) => void;
+var Whiteboard = class extends import_eventemitter38.default {
   constructor(view) {
     super();
     _defineProperty31(this, "view", void 0);
@@ -29843,6 +29971,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _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);
@@ -29857,6 +29986,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "translateCamera", void 0);
     _defineProperty31(this, "scaleCamera", void 0);
     _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "showLiveCursor", void 0);
     _defineProperty31(this, "setFreeModelUserPage", void 0);
     _defineProperty31(this, "indexedNavigation", void 0);
     _defineProperty31(this, "setViewModeToFree", void 0);
@@ -29869,6 +29999,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "rasterizeElementsBounds", void 0);
     _defineProperty31(this, "rasterizeMaxBounds", void 0);
     _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
@@ -29892,13 +30023,16 @@ function _toPrimitive32(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);
     _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;
@@ -29925,6 +30059,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) {
@@ -29936,7 +30080,8 @@ var EraserTool = class extends WhiteboardTool {
 
 // src/model/TrashedElementsModel.ts
 var Y14 = __toESM(require("yjs"), 1);
-var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_forge_room8 = require("@netless/forge-room");
 function _defineProperty33(e, r, t) {
   return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29954,7 +30099,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends import_eventemitter310.default {
+var TrashedElementsModel = class extends import_eventemitter39.default {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -29970,7 +30115,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
@@ -29978,7 +30123,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -29992,7 +30137,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -30049,7 +30194,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -30080,6 +30225,7 @@ var LaserPointerTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty34(this, "elementModel", null);
     _defineProperty34(this, "pointCount", 0);
+    _defineProperty34(this, "showLiveCursor", true);
     this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
@@ -30106,8 +30252,8 @@ var LaserPointerTool = class extends WhiteboardTool {
 };
 
 // src/model/PageModel.ts
-var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room = require("@netless/forge-room");
+var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_forge_room9 = require("@netless/forge-room");
 function _defineProperty35(e, r, t) {
   return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30125,7 +30271,7 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends import_eventemitter311.default {
+var PageModel = class extends import_eventemitter310.default {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
     _defineProperty35(this, "whiteboardAttrsMap", void 0);
@@ -30137,7 +30283,7 @@ var PageModel = class extends import_eventemitter311.default {
     _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -30151,7 +30297,7 @@ var PageModel = class extends import_eventemitter311.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room9.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -30279,12 +30425,12 @@ var PageModel = class extends import_eventemitter311.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      this.requestUserMap(userId).unobserve(observer);
+      (0, import_forge_room9.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_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room9.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -30298,8 +30444,9 @@ async function waitUntil(fn, timeout) {
 }
 
 // src/IndexedNavigation.ts
-var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
+var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
 function _defineProperty36(e, r, t) {
   return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30317,7 +30464,7 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends import_eventemitter312.default {
+var IndexedNavigation = class extends import_eventemitter311.default {
   get idList() {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
@@ -30326,7 +30473,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room2.log)("indexed navigation confusion", {
+      (0, import_forge_room10.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -30428,6 +30575,9 @@ var IndexedNavigation = class extends import_eventemitter312.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;
@@ -30598,9 +30748,7 @@ var IndexedNavigation = class extends import_eventemitter312.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);
@@ -30641,14 +30789,14 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     }
   }
   dispose() {
-    this.indexedPageMap.unobserve(this.handleIndexedPageMapUpdate);
+    (0, import_forge_room11.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
 };
 
 // src/utils/ShadowEmitter.ts
-var import_eventemitter313 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
 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;
 }
@@ -30666,7 +30814,7 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends import_eventemitter313.default {
+var ShadowEmitter = class extends import_eventemitter312.default {
   constructor(userMap) {
     super();
     _defineProperty37(this, "userMap", void 0);
@@ -30704,6 +30852,7 @@ var StraightLineTool = class extends WhiteboardTool {
     _defineProperty38(this, "elementModel", null);
     _defineProperty38(this, "from", null);
     _defineProperty38(this, "to", null);
+    _defineProperty38(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -30753,6 +30902,7 @@ var GrabTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty39(this, "camera", void 0);
     _defineProperty39(this, "downPoint", null);
+    _defineProperty39(this, "showLiveCursor", false);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -30773,9 +30923,27 @@ var GrabTool = class extends WhiteboardTool {
 };
 
 // src/tool/PointerTool.ts
+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) {
   }
@@ -30786,14 +30954,14 @@ var PointerTool = class extends WhiteboardTool {
 };
 
 // src/SequenceExecutor.ts
-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 _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 _toPropertyKey40(t) {
-  var i = _toPrimitive40(t, "string");
+function _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive40(t, r) {
+function _toPrimitive41(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -30805,8 +30973,8 @@ function _toPrimitive40(t, r) {
 }
 var SequenceExecutor = class {
   constructor() {
-    _defineProperty40(this, "tasks", []);
-    _defineProperty40(this, "isRunning", false);
+    _defineProperty41(this, "tasks", []);
+    _defineProperty41(this, "isRunning", false);
   }
   addTask(task) {
     this.tasks.push(task);
@@ -30833,14 +31001,138 @@ var SequenceExecutor = class {
 };
 
 // src/WhiteboardApplication.ts
-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;
+var import_forge_room13 = require("@netless/forge-room");
+
+// src/LiveCursor.ts
+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 _toPropertyKey41(t) {
-  var i = _toPrimitive41(t, "string");
+function _toPropertyKey42(t) {
+  var i = _toPrimitive42(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive41(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";
+    }
+  }
+};
+
+// src/WhiteboardApplication.ts
+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) {
@@ -30851,7 +31143,7 @@ function _toPrimitive41(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
-var WhiteboardApplication = class extends import_forge_room3.AbstractApplication {
+var WhiteboardApplication = class extends import_forge_room12.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -30863,39 +31155,71 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     var _this;
     super();
     _this = this;
-    _defineProperty41(this, "name", WHITEBOARD_APP_NAME);
-    _defineProperty41(this, "emitter", void 0);
-    _defineProperty41(this, "toolbarModel", void 0);
-    _defineProperty41(this, "selectElementsModel", void 0);
-    _defineProperty41(this, "trashedElementsModel", void 0);
-    _defineProperty41(this, "pageModel", void 0);
-    _defineProperty41(this, "layers", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "undoManagers", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "rootElement", document.createElement("div"));
-    _defineProperty41(this, "paperScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "canvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "shadowScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "snapshotCanvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "snapshotScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "shadowCanvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "shadowEmitter", void 0);
-    _defineProperty41(this, "tools", void 0);
-    _defineProperty41(this, "editors", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "camera", void 0);
-    _defineProperty41(this, "resizeObserver", void 0);
-    _defineProperty41(this, "option", void 0);
-    _defineProperty41(this, "permissions", void 0);
-    _defineProperty41(this, "inputType", "any");
-    _defineProperty41(this, "isPenEvent", false);
-    _defineProperty41(this, "hasPenInput", null);
-    _defineProperty41(this, "disableViewModelUpdate", false);
-    _defineProperty41(this, "internalResizeObserver", true);
-    _defineProperty41(this, "sequenceExecutor", new SequenceExecutor());
-    _defineProperty41(this, "linkTarget", null);
-    _defineProperty41(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, "linkTarget", null);
+    _defineProperty43(this, "liveCursor", void 0);
+    _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty41(this, "handlePageSwitch", (pageId) => {
+    _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();
@@ -30925,7 +31249,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          (0, import_forge_room3.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -30937,30 +31261,30 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          (0, import_forge_room3.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
         this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
     });
-    _defineProperty41(this, "hasPermission", (flag) => {
+    _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty41(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);
     });
-    _defineProperty41(this, "handleStackItemPopped", () => {
+    _defineProperty43(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty41(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)) {
@@ -30987,17 +31311,17 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       }
     });
-    _defineProperty41(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);
     });
-    _defineProperty41(this, "handleElementClear", () => {
+    _defineProperty43(this, "handleElementClear", () => {
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty41(this, "handleElementInsert", (elements) => {
+    _defineProperty43(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -31009,7 +31333,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty41(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty43(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -31020,11 +31344,11 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty41(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty43(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty41(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)) {
@@ -31037,7 +31361,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       });
     });
-    _defineProperty41(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, {
@@ -31080,7 +31404,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty41(this, "handleLinkedMapChange", (evt) => {
+    _defineProperty43(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);
@@ -31097,7 +31421,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       }
     });
-    _defineProperty41(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+    _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
       if (this.option.width > 0 && this.option.height > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
@@ -31117,6 +31441,9 @@ var WhiteboardApplication = class extends import_forge_room3.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) {
@@ -31178,7 +31505,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31189,7 +31516,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31204,7 +31531,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31216,6 +31543,30 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        (0, import_forge_room12.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_room12.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_room12.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);
@@ -31231,7 +31582,7 @@ var WhiteboardApplication = class extends import_forge_room3.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, {
@@ -31281,12 +31632,23 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.resetCamera = () => {
       this.camera.reset();
     };
+    this.emitter.showLiveCursor = (value) => {
+      this.liveCursor.showLiveCursor = value;
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room3.log)("WhiteboardApplicationError", {
+      (0, import_forge_room12.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;
@@ -31383,9 +31745,14 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
     });
+    this.permissions.setPermission(WhiteboardPermissionFlag.all);
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
+    if (this.option.stretchToFill) {
+      this.option.width = -1;
+      this.option.height = -1;
+    }
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
     this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
@@ -31434,6 +31801,9 @@ var WhiteboardApplication = class extends import_forge_room3.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),
@@ -31444,7 +31814,7 @@ var WhiteboardApplication = class extends import_forge_room3.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)
     };
@@ -31465,7 +31835,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
     } else {
       this.paperScope.tool = this.tools["curve"].tool;
-      (0, import_forge_room3.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      (0, import_forge_room12.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
     }
     this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
     this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -31516,32 +31886,12 @@ var WhiteboardApplication = class extends import_forge_room3.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) => {
@@ -31568,6 +31918,14 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.emitter.emit("grabUp");
     });
     this.clearElements();
+    if (this.option.stretchToFill) {
+      window.addEventListener("resize", () => {
+        const bounds = document.body.getBoundingClientRect();
+        this.updateOptionSize(bounds.width, bounds.height);
+        this.adjustByOutFrame(bounds.width, bounds.height);
+      });
+    }
+    this.rootElement.appendChild(this.liveCursor.container);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -31710,7 +32068,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
   }
   unlink() {
     if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
+      (0, import_forge_room13.removeObserver)(this.linkTarget, this.handleLinkedMapChange);
     }
   }
   setViewSize(width, height) {
@@ -31763,7 +32121,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.permissions.dispose();
   }
 };
-_defineProperty41(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 /*! Bundled license information:
 
 paper/dist/paper-full.js: