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

package/dist/index.esm.js

@@ -35171,17 +35171,20 @@ void main(void){
 });
 
 // ../whiteboard/dist/whiteboard.esm.js
-import { AbstractApplication, log as log3 } from "@netless/forge-room";
+import { AbstractApplication, log as log4 } from "@netless/forge-room";
 import * as Y15 from "yjs";
 import * as Y12 from "yjs";
 import EventEmitter from "eventemitter3";
 import { v4 as uuidv4 } from "uuid";
+import { log, removeObserver as removeObserver2 } from "@netless/forge-room";
 import * as Y2 from "yjs";
 import * as Y from "yjs";
+import { removeDeepObserver } from "@netless/forge-room";
 import * as Y3 from "yjs";
 import * as Y4 from "yjs";
 import * as Y5 from "yjs";
 import * as Y6 from "yjs";
+import { removeObserver } from "@netless/forge-room";
 import * as Y7 from "yjs";
 import * as Y8 from "yjs";
 import * as Y9 from "yjs";
@@ -35189,20 +35192,26 @@ import * as Y10 from "yjs";
 import { AbstractApplicationPermissions } from "@netless/forge-room";
 import * as Y11 from "yjs";
 import EventEmitter2 from "eventemitter3";
+import { removeObserver as removeObserver3 } from "@netless/forge-room";
 import * as Y13 from "yjs";
 import EventEmitter3 from "eventemitter3";
+import { removeDeepObserver as removeDeepObserver2 } from "@netless/forge-room";
 import EventEmitter5 from "eventemitter3";
 import { EventEmitter as EventEmitter4 } from "eventemitter3";
 import EventEmitter7 from "eventemitter3";
 import EventEmitter6 from "eventemitter3";
+import { removeObserver as removeObserver4 } from "@netless/forge-room";
 import EventEmitter8 from "eventemitter3";
 import * as Y14 from "yjs";
 import EventEmitter9 from "eventemitter3";
+import { removeDeepObserver as removeDeepObserver3 } from "@netless/forge-room";
 import EventEmitter10 from "eventemitter3";
-import { log } from "@netless/forge-room";
+import { log as log2, removeObserver as removeObserver5 } from "@netless/forge-room";
 import EventEmitter11 from "eventemitter3";
-import { log as log2 } from "@netless/forge-room";
+import { log as log3 } from "@netless/forge-room";
+import { removeObserver as removeObserver6 } from "@netless/forge-room";
 import EventEmitter12 from "eventemitter3";
+import { removeObserver as removeObserver7 } from "@netless/forge-room";
 var __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -60782,11 +60791,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;
@@ -60795,7 +60805,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);
@@ -60815,6 +60825,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);
                 }
               }
@@ -60822,11 +60836,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]);
@@ -60886,7 +60906,7 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-    this.root.unobserveDeep(this.handlePropChange);
+    removeDeepObserver(this.root, this.handlePropChange);
   }
 };
 _defineProperty(ElementModel, "KEYS", {
@@ -60954,8 +60974,8 @@ function _toPrimitive3(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var CurveModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty3(this, "item", null);
     _defineProperty3(this, "debugPath", void 0);
     _defineProperty3(this, "debug", false);
@@ -60971,8 +60991,7 @@ var CurveModel = class extends ElementModel {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash.chunk)(points, 2);
-    return ae(groupPoints, {
+    return ae(points, {
       size: this.strokeWidth,
       smoothing: 0.5,
       thinning: -0.5,
@@ -60989,15 +61008,15 @@ var CurveModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
-    return currentPoints.map((_ref) => {
-      let [x, y] = _ref;
-      return new this.scope.Point(x, y);
-    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
-      result.push(next.x);
-      result.push(next.y);
-      return result;
-    }, []);
+    const points = this.points;
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const output = [];
+    for (let i = 0, len = points.length; i < len; i += 2) {
+      const p = new this.scope.Point(points[i], points[i + 1]);
+      const tp = p.transform(matrix);
+      output.push([tp.x, tp.y]);
+    }
+    return output;
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -61072,6 +61091,15 @@ var CurveModel = class extends ElementModel {
       exclude: ["dashArray", "fillColor"]
     };
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onStyleKeyUpdate(key) {
     if (!this.item) {
       return;
@@ -61104,8 +61132,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");
@@ -61116,6 +61144,9 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  liveCursorPoint() {
+    return null;
+  }
   subDispose() {
   }
   createPaperRect() {
@@ -61235,8 +61266,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);
@@ -61247,6 +61278,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;
@@ -61365,6 +61404,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) {
@@ -61427,8 +61467,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")) {
@@ -61477,6 +61517,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());
@@ -61624,8 +61673,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) {
@@ -61657,7 +61706,16 @@ var PointTextModel = class extends ElementModel {
     }
   }
   subDispose() {
-    this.root.unobserve(this.handleTextPropChange);
+    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) {
@@ -61751,8 +61809,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");
@@ -61761,6 +61819,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() {
@@ -61840,8 +61907,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");
@@ -61857,6 +61924,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);
@@ -62011,8 +62086,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")) {
@@ -62051,41 +62126,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();
@@ -62094,21 +62170,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;
       }
     };
   }
@@ -62129,6 +62197,15 @@ var EraserModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 var import_lodash6 = __toESM2(require_lodash(), 1);
 function _defineProperty14(e, r, t) {
@@ -62149,8 +62226,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);
@@ -62287,6 +62364,15 @@ var LaserPointerModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
@@ -62329,8 +62415,8 @@ function _toPrimitive15(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
@@ -62339,6 +62425,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() {
@@ -62440,29 +62535,111 @@ function _toPrimitive16(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
+var ImageModel = class extends ElementModel {
+  get src() {
+    return this.root.get("src");
+  }
+  constructor(root, scope, imageSets, liveCursor) {
+    super(root, scope, liveCursor);
+    _defineProperty16(this, "item", null);
+    _defineProperty16(this, "imageSets", void 0);
+    this.imageSets = imageSets;
+    if (!this.root.has("type")) {
+      this.root.set("type", "image");
+    }
+    this.root.set(ElementModel.KEYS.shadow, "");
+  }
+  subDispose() {
+    const img = this.imageSets.querySelector(`[id='${this.uuid}']`);
+    if (img) {
+      img.remove();
+    }
+  }
+  createPaperItem() {
+    if (this.item) {
+      return;
+    }
+    if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
+      const img = document.createElement("img");
+      img.src = this.src;
+      img.id = this.uuid;
+      this.imageSets.appendChild(img);
+    }
+    this.item = new this.scope.Raster(this.uuid);
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    this.item.matrix = matrix;
+  }
+  onVectorUpdate() {
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    if (this.item) {
+      this.item.matrix = matrix;
+    }
+  }
+  vectorKeys() {
+    return [];
+  }
+  styleKeys() {
+    return {
+      include: [],
+      exclude: ["dashArray", "strokeColor", "fillColor", "strokeWidth"]
+    };
+  }
+  onStyleKeyUpdate(_key) {
+  }
+  editorConfig() {
+    const cfg = new EditorConfig();
+    cfg.resizeModel = () => "four-corner";
+    cfg.uniformScale = () => true;
+    return cfg;
+  }
+  liveCursorPoint() {
+    return null;
+  }
+};
+function _defineProperty17(e, r, t) {
+  return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey17(t) {
+  var i = _toPrimitive17(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive17(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var RenderableModel = class extends EventEmitter {
   get uuid() {
-    return uuidv4();
+    return uuidv4().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, liveCursor, hasPermission) {
     super();
-    _defineProperty16(this, "scope", void 0);
-    _defineProperty16(this, "toolbarModel", void 0);
-    _defineProperty16(this, "userManager", void 0);
-    _defineProperty16(this, "elementModels", void 0);
-    _defineProperty16(this, "elements", void 0);
-    _defineProperty16(this, "layerId", void 0);
-    _defineProperty16(this, "maxIndex", -1);
-    _defineProperty16(this, "hasPermission", void 0);
-    _defineProperty16(this, "shadowEmitter", void 0);
-    _defineProperty16(this, "onElementsChange", (event) => {
+    _defineProperty17(this, "scope", void 0);
+    _defineProperty17(this, "toolbarModel", void 0);
+    _defineProperty17(this, "userManager", void 0);
+    _defineProperty17(this, "elementModels", void 0);
+    _defineProperty17(this, "elements", void 0);
+    _defineProperty17(this, "layerId", void 0);
+    _defineProperty17(this, "maxIndex", -1);
+    _defineProperty17(this, "hasPermission", void 0);
+    _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "imageSets", void 0);
+    _defineProperty17(this, "liveCursor", void 0);
+    _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
           const root = this.elements.get(key);
           if (root) {
             const model = this.convertToModel(root);
             if (model) {
-              this.emit("elementInsert", [model]);
+              setTimeout(() => {
+                this.emit("elementInsert", [model]);
+              });
             }
           }
         } else if (value.action === "delete") {
@@ -62470,6 +62647,8 @@ var RenderableModel = class extends EventEmitter {
         }
       }
     });
+    this.liveCursor = liveCursor;
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -62508,27 +62687,29 @@ var RenderableModel = class extends EventEmitter {
     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;
@@ -62537,100 +62718,178 @@ var RenderableModel = class extends EventEmitter {
     return model;
   }
   initElement(element) {
-    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (shadow) {
-      element.shadow = "layer";
-    }
-    element.strokeWidth = this.toolbarModel.strokeWidth;
-    element.strokeColor = this.toolbarModel.strokeColor;
-    element.fillColor = this.toolbarModel.fillColor;
-    element.ownerId = this.userManager.selfId;
     element.shadowEmitter = this.shadowEmitter;
   }
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map) {
-    this.elements.doc?.transact(() => {
-      const uuid = this.uuid;
-      map.set(ElementModel.KEYS.index, ++this.maxIndex);
-      map.set(ElementModel.KEYS.uuid, uuid);
-      this.elements.set(uuid, map);
-    }, elementsUndoOrigin);
-  }
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      log("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "image");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
+    model.root.set("src", src);
+    const initMatrix = new this.scope.Matrix();
+    const center = this.scope.project.view.center;
+    initMatrix.translate({
+      x: center.x,
+      y: center.y
+    });
+    model.appendPointsMatrix(initMatrix);
+    model.ownerId = this.userManager.selfId;
+  }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
       return null;
     }
-    const curveModel = new CurveModel(new Y12.Map(), this.scope);
-    this.initElement(curveModel, shadow);
-    this.addElementToDoc(curveModel.root);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "curve");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
+    this.initElement(curveModel);
     return curveModel;
   }
   createLaserPointer() {
     if (!this.confirmPermission()) {
       return null;
     }
-    const model = new LaserPointerModel(this.userManager.selfId, new Y12.Map(), this.scope, (uuid) => {
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "laser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 8);
+      yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
+      yMap.set(ElementModel.KEYS.fillColor, "#F44336");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
-    model.strokeWidth = 8;
-    model.strokeColor = "#F44336";
-    model.fillColor = "#F44336";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createEraser() {
     if (!this.hasPermission(WhiteboardPermissionFlag.deleteSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const model = new EraserModel(new Y12.Map(), this.scope);
-    model.strokeWidth = 12;
-    model.strokeColor = "#9E9E9E";
-    model.fillColor = "#9E9E9E";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "eraser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 4);
+      yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.fillColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
     return model;
   }
   createTriangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const triangle = new TriangleModel(new Y12.Map(), this.scope);
-    this.initElement(triangle, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "triangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(triangle);
     triangle.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(triangle.root);
     return triangle;
   }
   createRectangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const rect = new RectangleModel(new Y12.Map(), this.scope);
-    this.initElement(rect, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "rectangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(rect.root);
     return rect;
   }
   createSegmentedPath(type, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const segmentsModel = new SegmentsModel(new Y12.Map(), this.scope, type);
-    this.initElement(segmentsModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", type);
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
+    this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
   createSelector() {
@@ -62638,41 +62897,92 @@ var RenderableModel = class extends EventEmitter {
     if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const selectorModel = new SelectorModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "selector");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
-    this.addElementToDoc(selectorModel.root);
     return selectorModel;
   }
   createStraightLine(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const straightLineModel = new StraightLineModel(new Y12.Map(), this.scope);
-    this.initElement(straightLineModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "line");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(straightLineModel.root);
     return straightLineModel;
   }
   createLinePath(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const lineModel = new LineModel(new Y12.Map(), this.scope);
-    this.initElement(lineModel, shadow);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "arrow");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(lineModel.root);
     return lineModel;
   }
   createPointText(x, y, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const pointTextModel = new PointTextModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "point-text");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
-    this.initElement(pointTextModel, shadow);
-    this.addElementToDoc(pointTextModel.root);
+    this.initElement(pointTextModel);
     return pointTextModel;
   }
   clearElement() {
@@ -62690,9 +63000,11 @@ var RenderableModel = class extends EventEmitter {
       removeIds.forEach((id) => this.elements.delete(id));
     });
   }
-  dispose() {
-    this.elements.unobserve(this.onElementsChange);
-    this.elements.clear();
+  dispose(clearElements) {
+    removeObserver2(this.elements, this.onElementsChange);
+    if (clearElements) {
+      this.elements.clear();
+    }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
     });
@@ -62915,14 +63227,14 @@ function Distance(p1, p2) {
 function Deg2Rad(d) {
   return d * Math.PI / 180;
 }
-function _defineProperty17(e, r, t) {
-  return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty18(e, r, t) {
+  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey17(t) {
-  var i = _toPrimitive17(t, "string");
+function _toPropertyKey18(t) {
+  var i = _toPrimitive18(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive17(t, r) {
+function _toPrimitive18(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62934,7 +63246,7 @@ function _toPrimitive17(t, r) {
 }
 var Recognizer = class {
   constructor() {
-    _defineProperty17(this, "dollar", new DollarRecognizer());
+    _defineProperty18(this, "dollar", new DollarRecognizer());
   }
   recognize(points) {
     let minX = Number.MAX_VALUE;
@@ -62960,14 +63272,14 @@ var Recognizer = class {
     return null;
   }
 };
-function _defineProperty18(e, r, t) {
-  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty19(e, r, t) {
+  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey18(t) {
-  var i = _toPrimitive18(t, "string");
+function _toPropertyKey19(t) {
+  var i = _toPrimitive19(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive18(t, r) {
+function _toPrimitive19(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62980,10 +63292,11 @@ function _toPrimitive18(t, r) {
 var CurveTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty18(this, "elementModel", null);
-    _defineProperty18(this, "recognizer", new Recognizer());
-    _defineProperty18(this, "pointCount", 0);
-    this.tool.minDistance = 1;
+    _defineProperty19(this, "elementModel", null);
+    _defineProperty19(this, "recognizer", new Recognizer());
+    _defineProperty19(this, "pointCount", 0);
+    _defineProperty19(this, "showLiveCursor", true);
+    this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -63047,14 +63360,14 @@ var CurveTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty19(e, r, t) {
-  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty20(e, r, t) {
+  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey19(t) {
-  var i = _toPrimitive19(t, "string");
+function _toPropertyKey20(t) {
+  var i = _toPrimitive20(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive19(t, r) {
+function _toPrimitive20(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63067,9 +63380,10 @@ function _toPrimitive19(t, r) {
 var RectangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty19(this, "elementModel", null);
-    _defineProperty19(this, "from", null);
-    _defineProperty19(this, "to", null);
+    _defineProperty20(this, "elementModel", null);
+    _defineProperty20(this, "from", null);
+    _defineProperty20(this, "to", null);
+    _defineProperty20(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -63095,14 +63409,14 @@ var RectangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty20(e, r, t) {
-  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty21(e, r, t) {
+  return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey20(t) {
-  var i = _toPrimitive20(t, "string");
+function _toPropertyKey21(t) {
+  var i = _toPrimitive21(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive20(t, r) {
+function _toPrimitive21(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63166,8 +63480,8 @@ var ToolbarModel = class extends EventEmitter2 {
   }
   constructor(root, defaultStyle) {
     super();
-    _defineProperty20(this, "root", void 0);
-    _defineProperty20(this, "handleRootUpdate", (evt) => {
+    _defineProperty21(this, "root", void 0);
+    _defineProperty21(this, "handleRootUpdate", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
           this.emit("update", {
@@ -63191,18 +63505,18 @@ var ToolbarModel = class extends EventEmitter2 {
     });
   }
   dispose() {
-    this.root.unobserve(this.handleRootUpdate);
+    removeObserver3(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
-function _defineProperty21(e, r, t) {
-  return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty22(e, r, t) {
+  return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey21(t) {
-  var i = _toPrimitive21(t, "string");
+function _toPropertyKey22(t) {
+  var i = _toPrimitive22(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive21(t, r) {
+function _toPrimitive22(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63215,11 +63529,12 @@ function _toPrimitive21(t, r) {
 var SelectorTool = class extends WhiteboardTool {
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, selectElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty21(this, "elementModel", null);
-    _defineProperty21(this, "from", null);
-    _defineProperty21(this, "to", null);
-    _defineProperty21(this, "selectElementsModel", void 0);
-    _defineProperty21(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "elementModel", null);
+    _defineProperty22(this, "from", null);
+    _defineProperty22(this, "to", null);
+    _defineProperty22(this, "selectElementsModel", void 0);
+    _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
@@ -63283,14 +63598,14 @@ var WhiteboardKeys = {
   viewMatrix: "viewMatrix",
   cameraMode: "cameraMode"
 };
-function _defineProperty22(e, r, t) {
-  return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty23(e, r, t) {
+  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey22(t) {
-  var i = _toPrimitive22(t, "string");
+function _toPropertyKey23(t) {
+  var i = _toPrimitive23(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive22(t, r) {
+function _toPrimitive23(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63309,28 +63624,28 @@ var SelectElementsModel = class extends EventEmitter3 {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty22(this, "requestUserMap", void 0);
-    _defineProperty22(this, "userManager", void 0);
-    _defineProperty22(this, "hasPermission", void 0);
-    _defineProperty22(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty22(this, "handleUserLeave", (user) => {
+    _defineProperty23(this, "requestUserMap", void 0);
+    _defineProperty23(this, "userManager", void 0);
+    _defineProperty23(this, "hasPermission", void 0);
+    _defineProperty23(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        removeDeepObserver2(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
-    _defineProperty22(this, "handleUserJoin", (user) => {
+    _defineProperty23(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        removeDeepObserver2(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty22(this, "handleUserSelectElementsChange", (userId, evts) => {
+    _defineProperty23(this, "handleUserSelectElementsChange", (userId, evts) => {
       for (const evt of evts) {
         if (evt.target.get("inner-map-id") === WhiteboardKeys.selectElements) {
           const elementIds = Array.from(evt.target.keys()).filter((v) => v !== "inner-map-id");
@@ -63347,7 +63662,7 @@ var SelectElementsModel = class extends EventEmitter3 {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        removeDeepObserver2(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -63404,21 +63719,21 @@ var SelectElementsModel = class extends EventEmitter3 {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      removeDeepObserver2(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-function _defineProperty23(e, r, t) {
-  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty24(e, r, t) {
+  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey23(t) {
-  var i = _toPrimitive23(t, "string");
+function _toPropertyKey24(t) {
+  var i = _toPrimitive24(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive23(t, r) {
+function _toPrimitive24(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63431,28 +63746,28 @@ function _toPrimitive23(t, r) {
 var TextEditor = class extends EventEmitter4 {
   constructor(camera) {
     super();
-    _defineProperty23(this, "rootView", void 0);
-    _defineProperty23(this, "content", void 0);
-    _defineProperty23(this, "camera", void 0);
-    _defineProperty23(this, "originX", 0);
-    _defineProperty23(this, "originY", 0);
-    _defineProperty23(this, "rotation", 0);
-    _defineProperty23(this, "scale", 1);
-    _defineProperty23(this, "handleContentInput", () => {
+    _defineProperty24(this, "rootView", void 0);
+    _defineProperty24(this, "content", void 0);
+    _defineProperty24(this, "camera", void 0);
+    _defineProperty24(this, "originX", 0);
+    _defineProperty24(this, "originY", 0);
+    _defineProperty24(this, "rotation", 0);
+    _defineProperty24(this, "scale", 1);
+    _defineProperty24(this, "handleContentInput", () => {
       this.emit("change", this.content.textContent ?? "");
       this.translateCaretIntoView();
     });
-    _defineProperty23(this, "handleContentKeydown", (evt) => {
+    _defineProperty24(this, "handleContentKeydown", (evt) => {
       if (/^Arrow/.test(evt.key)) {
         setTimeout(() => {
           this.translateCaretIntoView();
         }, 50);
       }
     });
-    _defineProperty23(this, "handleContentBlur", () => {
+    _defineProperty24(this, "handleContentBlur", () => {
       this.emit("done", this.content.textContent ?? "");
     });
-    _defineProperty23(this, "handleRootClick", (evt) => {
+    _defineProperty24(this, "handleRootClick", (evt) => {
       if (evt.target === this.rootView) {
         evt.stopPropagation();
         evt.preventDefault();
@@ -63542,14 +63857,14 @@ var TextEditor = class extends EventEmitter4 {
     this.rootView.removeEventListener("pointerdown", this.handleRootClick);
   }
 };
-function _defineProperty24(e, r, t) {
-  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty25(e, r, t) {
+  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey24(t) {
-  var i = _toPrimitive24(t, "string");
+function _toPropertyKey25(t) {
+  var i = _toPrimitive25(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive24(t, r) {
+function _toPrimitive25(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63584,12 +63899,12 @@ var Bounds = class extends EventEmitter5 {
   }
   constructor(binding, scope) {
     super();
-    _defineProperty24(this, "minX", 0);
-    _defineProperty24(this, "minY", 0);
-    _defineProperty24(this, "maxX", 0);
-    _defineProperty24(this, "maxY", 0);
-    _defineProperty24(this, "binding", void 0);
-    _defineProperty24(this, "scope", void 0);
+    _defineProperty25(this, "minX", 0);
+    _defineProperty25(this, "minY", 0);
+    _defineProperty25(this, "maxX", 0);
+    _defineProperty25(this, "maxY", 0);
+    _defineProperty25(this, "binding", void 0);
+    _defineProperty25(this, "scope", void 0);
     this.binding = binding;
     this.scope = scope;
   }
@@ -63711,32 +64026,32 @@ var Bounds = class extends EventEmitter5 {
 var Editor = class extends EventEmitter5 {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
-    _defineProperty24(this, "rootView", void 0);
-    _defineProperty24(this, "frame", void 0);
-    _defineProperty24(this, "rotator", void 0);
-    _defineProperty24(this, "scope", void 0);
-    _defineProperty24(this, "shadowScope", void 0);
-    _defineProperty24(this, "shadowContainer", void 0);
-    _defineProperty24(this, "ctrlUserMap", void 0);
-    _defineProperty24(this, "viewerId", void 0);
-    _defineProperty24(this, "ctrlId", void 0);
-    _defineProperty24(this, "ctrlNickName", void 0);
-    _defineProperty24(this, "editMode", null);
-    _defineProperty24(this, "editCtrlName", null);
-    _defineProperty24(this, "editAnchor", null);
-    _defineProperty24(this, "lastEditPoint", null);
-    _defineProperty24(this, "bounds", void 0);
-    _defineProperty24(this, "targets", []);
-    _defineProperty24(this, "editorConfig", null);
-    _defineProperty24(this, "aspectRatio", -1);
-    _defineProperty24(this, "uniformScale", false);
-    _defineProperty24(this, "camera", void 0);
-    _defineProperty24(this, "canvasElement", void 0);
-    _defineProperty24(this, "resizeObserver", void 0);
-    _defineProperty24(this, "anchors", []);
-    _defineProperty24(this, "title", null);
-    _defineProperty24(this, "shadowEmitter", void 0);
-    _defineProperty24(this, "handleMatrix", (matrix) => {
+    _defineProperty25(this, "rootView", void 0);
+    _defineProperty25(this, "frame", void 0);
+    _defineProperty25(this, "rotator", void 0);
+    _defineProperty25(this, "scope", void 0);
+    _defineProperty25(this, "shadowScope", void 0);
+    _defineProperty25(this, "shadowContainer", void 0);
+    _defineProperty25(this, "ctrlUserMap", void 0);
+    _defineProperty25(this, "viewerId", void 0);
+    _defineProperty25(this, "ctrlId", void 0);
+    _defineProperty25(this, "ctrlNickName", void 0);
+    _defineProperty25(this, "editMode", null);
+    _defineProperty25(this, "editCtrlName", null);
+    _defineProperty25(this, "editAnchor", null);
+    _defineProperty25(this, "lastEditPoint", null);
+    _defineProperty25(this, "bounds", void 0);
+    _defineProperty25(this, "targets", []);
+    _defineProperty25(this, "editorConfig", null);
+    _defineProperty25(this, "aspectRatio", -1);
+    _defineProperty25(this, "uniformScale", false);
+    _defineProperty25(this, "camera", void 0);
+    _defineProperty25(this, "canvasElement", void 0);
+    _defineProperty25(this, "resizeObserver", void 0);
+    _defineProperty25(this, "anchors", []);
+    _defineProperty25(this, "title", null);
+    _defineProperty25(this, "shadowEmitter", void 0);
+    _defineProperty25(this, "handleMatrix", (matrix) => {
       if (this.shadowContainer) {
         const next = matrix.appended(this.shadowContainer.data.shadowMatrix ?? new this.shadowScope.Matrix());
         this.shadowContainer.data.shadowMatrix = next;
@@ -63746,7 +64061,7 @@ var Editor = class extends EventEmitter5 {
         this.targets.forEach((target) => target.appendPointsMatrix(matrix));
       }
     });
-    _defineProperty24(this, "handlePointerDown", (evt) => {
+    _defineProperty25(this, "handlePointerDown", (evt) => {
       if (!evt.target) {
         return;
       }
@@ -63802,7 +64117,7 @@ var Editor = class extends EventEmitter5 {
         };
       }
     });
-    _defineProperty24(this, "handlePointerMove", (evt) => {
+    _defineProperty25(this, "handlePointerMove", (evt) => {
       evt.preventDefault();
       if (!evt.target) {
         return;
@@ -63853,7 +64168,7 @@ var Editor = class extends EventEmitter5 {
         }
       }
     });
-    _defineProperty24(this, "handlePointerUp", (evt) => {
+    _defineProperty25(this, "handlePointerUp", (evt) => {
       evt.preventDefault();
       this.resetShadow();
       this.shadowEmitter.setActive(false);
@@ -63870,7 +64185,7 @@ var Editor = class extends EventEmitter5 {
       this.lastEditPoint = null;
       this.uniformScale = false;
     });
-    _defineProperty24(this, "handleFrameDBClick", (evt) => {
+    _defineProperty25(this, "handleFrameDBClick", (evt) => {
       if (evt.target === this.frame && this.targets.length === 1) {
         if (this.targets[0].type === "point-text") {
           this.frame.style.display = "none";
@@ -63878,7 +64193,7 @@ var Editor = class extends EventEmitter5 {
         }
       }
     });
-    _defineProperty24(this, "updateBounds", () => {
+    _defineProperty25(this, "updateBounds", () => {
       let minX = Number.MAX_VALUE;
       let maxX = -Number.MAX_VALUE;
       let minY = Number.MAX_VALUE;
@@ -63911,7 +64226,7 @@ var Editor = class extends EventEmitter5 {
     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";
@@ -64128,14 +64443,14 @@ var Editor = class extends EventEmitter5 {
     this.resizeObserver.disconnect();
   }
 };
-function _defineProperty25(e, r, t) {
-  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty26(e, r, t) {
+  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey25(t) {
-  var i = _toPrimitive25(t, "string");
+function _toPropertyKey26(t) {
+  var i = _toPrimitive26(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive25(t, r) {
+function _toPrimitive26(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64148,13 +64463,14 @@ function _toPrimitive25(t, r) {
 var TextTool = class extends WhiteboardTool {
   constructor(enableToolEvent, model, shadowEmitter, scope, rootView, canvasElement, toolbarModel, camera) {
     super(enableToolEvent, model, shadowEmitter, scope);
-    _defineProperty25(this, "from", null);
-    _defineProperty25(this, "to", null);
-    _defineProperty25(this, "rootView", void 0);
-    _defineProperty25(this, "canvasElement", void 0);
-    _defineProperty25(this, "elementModel", null);
-    _defineProperty25(this, "toolbarModel", void 0);
-    _defineProperty25(this, "camera", void 0);
+    _defineProperty26(this, "from", null);
+    _defineProperty26(this, "to", null);
+    _defineProperty26(this, "rootView", void 0);
+    _defineProperty26(this, "canvasElement", void 0);
+    _defineProperty26(this, "elementModel", null);
+    _defineProperty26(this, "toolbarModel", void 0);
+    _defineProperty26(this, "camera", void 0);
+    _defineProperty26(this, "showLiveCursor", false);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -64216,14 +64532,14 @@ var TextTool = class extends WhiteboardTool {
     }, 30);
   }
 };
-function _defineProperty26(e, r, t) {
-  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty27(e, r, t) {
+  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey26(t) {
-  var i = _toPrimitive26(t, "string");
+function _toPropertyKey27(t) {
+  var i = _toPrimitive27(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive26(t, r) {
+function _toPrimitive27(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64236,11 +64552,11 @@ function _toPrimitive26(t, r) {
 var Gesture = class extends EventEmitter6 {
   constructor(element, scope) {
     super();
-    _defineProperty26(this, "element", void 0);
-    _defineProperty26(this, "scope", void 0);
-    _defineProperty26(this, "lastVector", null);
-    _defineProperty26(this, "lastPoint", null);
-    _defineProperty26(this, "onTouchStart", (evt) => {
+    _defineProperty27(this, "element", void 0);
+    _defineProperty27(this, "scope", void 0);
+    _defineProperty27(this, "lastVector", null);
+    _defineProperty27(this, "lastPoint", null);
+    _defineProperty27(this, "onTouchStart", (evt) => {
       if (evt.touches.length > 1) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64253,7 +64569,7 @@ var Gesture = class extends EventEmitter6 {
       this.lastVector = p2.subtract(p1);
       this.lastPoint = p1;
     });
-    _defineProperty26(this, "onTouchMove", (evt) => {
+    _defineProperty27(this, "onTouchMove", (evt) => {
       if (this.lastVector && this.lastPoint && evt.touches.length === 2) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64284,7 +64600,7 @@ var Gesture = class extends EventEmitter6 {
         this.lastPoint = null;
       }
     });
-    _defineProperty26(this, "onTouchEnd", () => {
+    _defineProperty27(this, "onTouchEnd", () => {
       this.lastVector = null;
       this.lastPoint = null;
     });
@@ -64295,14 +64611,14 @@ var Gesture = class extends EventEmitter6 {
     this.element.addEventListener("touchend", this.onTouchEnd);
   }
 };
-function _defineProperty27(e, r, t) {
-  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty28(e, r, t) {
+  return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey27(t) {
-  var i = _toPrimitive27(t, "string");
+function _toPropertyKey28(t) {
+  var i = _toPrimitive28(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive27(t, r) {
+function _toPrimitive28(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64324,31 +64640,31 @@ var Camera = class extends EventEmitter7 {
   }
   constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, _paperSize, _domSize) {
     super();
-    _defineProperty27(this, "scope", void 0);
-    _defineProperty27(this, "dom", void 0);
-    _defineProperty27(this, "lastTriggerTime", 0);
-    _defineProperty27(this, "lastDelta", {
+    _defineProperty28(this, "scope", void 0);
+    _defineProperty28(this, "dom", void 0);
+    _defineProperty28(this, "lastTriggerTime", 0);
+    _defineProperty28(this, "lastDelta", {
       x: 0,
       y: 0
     });
-    _defineProperty27(this, "requestUserMap", void 0);
-    _defineProperty27(this, "userManager", void 0);
-    _defineProperty27(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty27(this, "whiteboardAttrsMap", void 0);
-    _defineProperty27(this, "paperSize", void 0);
-    _defineProperty27(this, "domSize", void 0);
-    _defineProperty27(this, "hasPermission", void 0);
-    _defineProperty27(this, "gesture", void 0);
-    _defineProperty27(this, "inherentScale", 1);
-    _defineProperty27(this, "maxScale", void 0);
-    _defineProperty27(this, "initSize", void 0);
-    _defineProperty27(this, "bound", void 0);
-    _defineProperty27(this, "boundTiemoutId", void 0);
-    _defineProperty27(this, "enableByMouse", true);
-    _defineProperty27(this, "enableByTouch", true);
-    _defineProperty27(this, "boundaryColor", "#F44336");
-    _defineProperty27(this, "enableBoundaryHighlight", true);
-    _defineProperty27(this, "handleMainCameraChange", (evt) => {
+    _defineProperty28(this, "requestUserMap", void 0);
+    _defineProperty28(this, "userManager", void 0);
+    _defineProperty28(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty28(this, "whiteboardAttrsMap", void 0);
+    _defineProperty28(this, "paperSize", void 0);
+    _defineProperty28(this, "domSize", void 0);
+    _defineProperty28(this, "hasPermission", void 0);
+    _defineProperty28(this, "gesture", void 0);
+    _defineProperty28(this, "inherentScale", 1);
+    _defineProperty28(this, "maxScale", void 0);
+    _defineProperty28(this, "initSize", void 0);
+    _defineProperty28(this, "bound", void 0);
+    _defineProperty28(this, "boundTiemoutId", void 0);
+    _defineProperty28(this, "enableByMouse", true);
+    _defineProperty28(this, "enableByTouch", true);
+    _defineProperty28(this, "boundaryColor", "#F44336");
+    _defineProperty28(this, "enableBoundaryHighlight", true);
+    _defineProperty28(this, "handleMainCameraChange", (evt) => {
       const userMap = this.requestUserMap(this.userManager.selfId);
       const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
       if (cameraMode !== "main") {
@@ -64365,23 +64681,23 @@ var Camera = class extends EventEmitter7 {
         }
       }
     });
-    _defineProperty27(this, "handleUserLeave", (user) => {
+    _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        removeObserver4(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty27(this, "handleUserJoin", (user) => {
+    _defineProperty28(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserve(observer);
+        removeObserver4(this.requestUserMap(user.id), observer);
       }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty27(this, "handleViewMatrixUpdate", (userId, evt) => {
+    _defineProperty28(this, "handleViewMatrixUpdate", (userId, evt) => {
       const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
       for (const [key, value] of evt.changes.keys.entries()) {
         if (value.action === "update") {
@@ -64408,7 +64724,7 @@ var Camera = class extends EventEmitter7 {
         }
       }
     });
-    _defineProperty27(this, "handleWheel", (evt) => {
+    _defineProperty28(this, "handleWheel", (evt) => {
       if (!this.enableByMouse) {
         return;
       }
@@ -64483,7 +64799,7 @@ var Camera = class extends EventEmitter7 {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserve(observer);
+        removeObserver4(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -64680,24 +64996,24 @@ var Camera = class extends EventEmitter7 {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        this.requestUserMap(userId).unobserve(cb);
+        removeObserver4(this.requestUserMap(userId), cb);
       }
     });
-    this.whiteboardAttrsMap.unobserve(this.handleMainCameraChange);
+    removeObserver4(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
     this.removeAllListeners();
   }
 };
-function _defineProperty28(e, r, t) {
-  return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty29(e, r, t) {
+  return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey28(t) {
-  var i = _toPrimitive28(t, "string");
+function _toPropertyKey29(t) {
+  var i = _toPrimitive29(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive28(t, r) {
+function _toPrimitive29(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64710,9 +65026,10 @@ function _toPrimitive28(t, r) {
 var EllipseTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty28(this, "elementModel", null);
-    _defineProperty28(this, "from", null);
-    _defineProperty28(this, "to", null);
+    _defineProperty29(this, "elementModel", null);
+    _defineProperty29(this, "from", null);
+    _defineProperty29(this, "to", null);
+    _defineProperty29(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -64742,14 +65059,14 @@ var EllipseTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty29(e, r, t) {
-  return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty30(e, r, t) {
+  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey29(t) {
-  var i = _toPrimitive29(t, "string");
+function _toPropertyKey30(t) {
+  var i = _toPrimitive30(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive29(t, r) {
+function _toPrimitive30(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64762,9 +65079,10 @@ function _toPrimitive29(t, r) {
 var TriangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty29(this, "elementModel", null);
-    _defineProperty29(this, "from", null);
-    _defineProperty29(this, "to", null);
+    _defineProperty30(this, "elementModel", null);
+    _defineProperty30(this, "from", null);
+    _defineProperty30(this, "to", null);
+    _defineProperty30(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -64790,14 +65108,14 @@ var TriangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty30(e, r, t) {
-  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty31(e, r, t) {
+  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey30(t) {
-  var i = _toPrimitive30(t, "string");
+function _toPropertyKey31(t) {
+  var i = _toPrimitive31(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive30(t, r) {
+function _toPrimitive31(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64808,62 +65126,65 @@ function _toPrimitive30(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var Whiteboard = class extends EventEmitter8 {
-  // public insertImage!: (src: string) => void;
   constructor(view) {
     super();
-    _defineProperty30(this, "view", void 0);
-    _defineProperty30(this, "selfUserId", void 0);
-    _defineProperty30(this, "permissions", void 0);
-    _defineProperty30(this, "tool", void 0);
-    _defineProperty30(this, "fontSize", void 0);
-    _defineProperty30(this, "dashArray", void 0);
-    _defineProperty30(this, "fontFamily", void 0);
-    _defineProperty30(this, "strokeColor", void 0);
-    _defineProperty30(this, "fillColor", void 0);
-    _defineProperty30(this, "strokeWidth", void 0);
-    _defineProperty30(this, "enableCameraByMouse", void 0);
-    _defineProperty30(this, "enableCameraByTouch", void 0);
-    _defineProperty30(this, "cameraBoundaryColor", void 0);
-    _defineProperty30(this, "enableCameraBoundaryHighlight", void 0);
-    _defineProperty30(this, "getElementAttribute", void 0);
-    _defineProperty30(this, "setElementAttribute", void 0);
-    _defineProperty30(this, "getCurrentTool", void 0);
-    _defineProperty30(this, "setCurrentTool", void 0);
-    _defineProperty30(this, "setCanvasBackgroundColor", void 0);
-    _defineProperty30(this, "setThemeColor", void 0);
-    _defineProperty30(this, "gotoPage", void 0);
-    _defineProperty30(this, "addPage", void 0);
-    _defineProperty30(this, "deletePage", void 0);
-    _defineProperty30(this, "pageList", void 0);
-    _defineProperty30(this, "currentPageId", void 0);
-    _defineProperty30(this, "clonePage", void 0);
-    _defineProperty30(this, "clearPage", void 0);
-    _defineProperty30(this, "translateCamera", void 0);
-    _defineProperty30(this, "scaleCamera", void 0);
-    _defineProperty30(this, "resetCamera", void 0);
-    _defineProperty30(this, "setFreeModelUserPage", void 0);
-    _defineProperty30(this, "indexedNavigation", void 0);
-    _defineProperty30(this, "setViewModeToFree", void 0);
-    _defineProperty30(this, "setViewModeToFlow", void 0);
-    _defineProperty30(this, "setViewModeToMain", void 0);
-    _defineProperty30(this, "getViewModel", void 0);
-    _defineProperty30(this, "undo", void 0);
-    _defineProperty30(this, "redo", void 0);
-    _defineProperty30(this, "rasterizeViewport", void 0);
-    _defineProperty30(this, "rasterizeElementsBounds", void 0);
-    _defineProperty30(this, "rasterizeMaxBounds", void 0);
-    _defineProperty30(this, "setInputType", void 0);
+    _defineProperty31(this, "view", void 0);
+    _defineProperty31(this, "selfUserId", void 0);
+    _defineProperty31(this, "permissions", void 0);
+    _defineProperty31(this, "tool", void 0);
+    _defineProperty31(this, "fontSize", void 0);
+    _defineProperty31(this, "dashArray", void 0);
+    _defineProperty31(this, "fontFamily", void 0);
+    _defineProperty31(this, "strokeColor", void 0);
+    _defineProperty31(this, "fillColor", void 0);
+    _defineProperty31(this, "strokeWidth", void 0);
+    _defineProperty31(this, "enableCameraByMouse", void 0);
+    _defineProperty31(this, "enableCameraByTouch", void 0);
+    _defineProperty31(this, "cameraBoundaryColor", void 0);
+    _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
+    _defineProperty31(this, "getElementAttribute", void 0);
+    _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "removeElement", void 0);
+    _defineProperty31(this, "getCurrentTool", void 0);
+    _defineProperty31(this, "setCurrentTool", void 0);
+    _defineProperty31(this, "setCanvasBackgroundColor", void 0);
+    _defineProperty31(this, "setThemeColor", void 0);
+    _defineProperty31(this, "gotoPage", void 0);
+    _defineProperty31(this, "addPage", void 0);
+    _defineProperty31(this, "deletePage", void 0);
+    _defineProperty31(this, "pageList", void 0);
+    _defineProperty31(this, "currentPageId", void 0);
+    _defineProperty31(this, "clonePage", void 0);
+    _defineProperty31(this, "clearPage", void 0);
+    _defineProperty31(this, "translateCamera", void 0);
+    _defineProperty31(this, "scaleCamera", void 0);
+    _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "showLiveCursor", void 0);
+    _defineProperty31(this, "updateViewport", void 0);
+    _defineProperty31(this, "setFreeModelUserPage", void 0);
+    _defineProperty31(this, "indexedNavigation", void 0);
+    _defineProperty31(this, "setViewModeToFree", void 0);
+    _defineProperty31(this, "setViewModeToFlow", void 0);
+    _defineProperty31(this, "setViewModeToMain", void 0);
+    _defineProperty31(this, "getViewModel", void 0);
+    _defineProperty31(this, "undo", void 0);
+    _defineProperty31(this, "redo", void 0);
+    _defineProperty31(this, "rasterizeViewport", void 0);
+    _defineProperty31(this, "rasterizeElementsBounds", void 0);
+    _defineProperty31(this, "rasterizeMaxBounds", void 0);
+    _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
-function _defineProperty31(e, r, t) {
-  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty32(e, r, t) {
+  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey31(t) {
-  var i = _toPrimitive31(t, "string");
+function _toPropertyKey32(t) {
+  var i = _toPrimitive32(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive31(t, r) {
+function _toPrimitive32(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64874,13 +65195,16 @@ function _toPrimitive31(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserTool = class extends WhiteboardTool {
-  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
+  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel, shadowScope) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty31(this, "elementModel", null);
-    _defineProperty31(this, "trashedElementsModel", void 0);
-    _defineProperty31(this, "pointCount", 0);
+    _defineProperty32(this, "elementModel", null);
+    _defineProperty32(this, "trashedElementsModel", void 0);
+    _defineProperty32(this, "pointCount", 0);
+    _defineProperty32(this, "showLiveCursor", true);
+    _defineProperty32(this, "shadowScope", void 0);
     this.trashedElementsModel = trashedElementsModel;
-    this.tool.minDistance = 1;
+    this.tool.minDistance = 2;
+    this.shadowScope = shadowScope;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -64907,6 +65231,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) {
@@ -64915,14 +65249,14 @@ var EraserTool = class extends WhiteboardTool {
     this.trashedElementsModel.removeAllTrashedElementsForSelf();
   }
 };
-function _defineProperty32(e, r, t) {
-  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty33(e, r, t) {
+  return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey32(t) {
-  var i = _toPrimitive32(t, "string");
+function _toPropertyKey33(t) {
+  var i = _toPrimitive33(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive32(t, r) {
+function _toPrimitive33(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64941,22 +65275,22 @@ var TrashedElementsModel = class extends EventEmitter9 {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty32(this, "requestUserMap", void 0);
-    _defineProperty32(this, "userManager", void 0);
-    _defineProperty32(this, "hasPermission", void 0);
-    _defineProperty32(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty32(this, "handleUserLeave", (user) => {
+    _defineProperty33(this, "requestUserMap", void 0);
+    _defineProperty33(this, "userManager", void 0);
+    _defineProperty33(this, "hasPermission", void 0);
+    _defineProperty33(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        removeDeepObserver3(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty32(this, "handleUserJoin", (user) => {
+    _defineProperty33(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        removeDeepObserver3(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -64970,7 +65304,7 @@ var TrashedElementsModel = class extends EventEmitter9 {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        removeDeepObserver3(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -65027,21 +65361,21 @@ var TrashedElementsModel = class extends EventEmitter9 {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      removeDeepObserver3(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-function _defineProperty33(e, r, t) {
-  return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty34(e, r, t) {
+  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey33(t) {
-  var i = _toPrimitive33(t, "string");
+function _toPropertyKey34(t) {
+  var i = _toPrimitive34(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive33(t, r) {
+function _toPrimitive34(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65054,8 +65388,9 @@ function _toPrimitive33(t, r) {
 var LaserPointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty33(this, "elementModel", null);
-    _defineProperty33(this, "pointCount", 0);
+    _defineProperty34(this, "elementModel", null);
+    _defineProperty34(this, "pointCount", 0);
+    _defineProperty34(this, "showLiveCursor", true);
     this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
@@ -65080,14 +65415,14 @@ var LaserPointerTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty34(e, r, t) {
-  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty35(e, r, t) {
+  return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey34(t) {
-  var i = _toPrimitive34(t, "string");
+function _toPropertyKey35(t) {
+  var i = _toPrimitive35(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive34(t, r) {
+function _toPrimitive35(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65100,22 +65435,22 @@ function _toPrimitive34(t, r) {
 var PageModel = class extends EventEmitter10 {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
-    _defineProperty34(this, "whiteboardAttrsMap", void 0);
-    _defineProperty34(this, "pageMap", void 0);
-    _defineProperty34(this, "requestUserMap", void 0);
-    _defineProperty34(this, "userManager", void 0);
-    _defineProperty34(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty34(this, "hasPermission", void 0);
-    _defineProperty34(this, "handleUserLeave", (user) => {
+    _defineProperty35(this, "whiteboardAttrsMap", void 0);
+    _defineProperty35(this, "pageMap", void 0);
+    _defineProperty35(this, "requestUserMap", void 0);
+    _defineProperty35(this, "userManager", void 0);
+    _defineProperty35(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty35(this, "hasPermission", void 0);
+    _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        removeObserver5(this.requestUserMap(user.id), cb);
       }
     });
-    _defineProperty34(this, "handleUserJoin", (user) => {
+    _defineProperty35(this, "handleUserJoin", (user) => {
       this.createCurrentPageObserver(user.id);
     });
-    _defineProperty34(this, "handleMainPageChange", (evt) => {
+    _defineProperty35(this, "handleMainPageChange", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65123,7 +65458,7 @@ var PageModel = class extends EventEmitter10 {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                log(`main page {${targetPage}} not found.`, {}, "error");
+                log2(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -65133,7 +65468,7 @@ var PageModel = class extends EventEmitter10 {
         }
       }
     });
-    _defineProperty34(this, "handleUserCurrentPageChange", (userId, evt) => {
+    _defineProperty35(this, "handleUserCurrentPageChange", (userId, evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65150,7 +65485,7 @@ var PageModel = class extends EventEmitter10 {
         }
       }
     });
-    _defineProperty34(this, "handlePageMapChange", () => {
+    _defineProperty35(this, "handlePageMapChange", () => {
       this.emit("pagesChange", Array.from(this.pageMap.keys()));
     });
     this.hasPermission = hasPermission;
@@ -65251,12 +65586,12 @@ var PageModel = class extends EventEmitter10 {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      this.requestUserMap(userId).unobserve(observer);
+      removeObserver5(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);
+    removeObserver5(this.whiteboardAttrsMap, this.handleMainPageChange);
+    removeObserver5(this.pageMap, this.handlePageMapChange);
   }
 };
 var delay = (value) => new Promise((resolve) => setTimeout(resolve, value));
@@ -65266,14 +65601,14 @@ async function waitUntil(fn, timeout) {
     await delay(50);
   }
 }
-function _defineProperty35(e, r, t) {
-  return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty36(e, r, t) {
+  return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey35(t) {
-  var i = _toPrimitive35(t, "string");
+function _toPropertyKey36(t) {
+  var i = _toPrimitive36(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive35(t, r) {
+function _toPrimitive36(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65292,7 +65627,7 @@ var IndexedNavigation = class extends EventEmitter11 {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      log2("indexed navigation confusion", {
+      log3("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -65310,13 +65645,13 @@ var IndexedNavigation = class extends EventEmitter11 {
   }
   constructor(pageModel, userMap, indexedPageMap, hasPermission) {
     super();
-    _defineProperty35(this, "idPool", /* @__PURE__ */ new Set());
-    _defineProperty35(this, "pageModel", void 0);
-    _defineProperty35(this, "userMap", void 0);
-    _defineProperty35(this, "indexedPageMap", void 0);
-    _defineProperty35(this, "list", {});
-    _defineProperty35(this, "hasPermission", void 0);
-    _defineProperty35(this, "handleIndexedPageMapUpdate", (_evt) => {
+    _defineProperty36(this, "idPool", /* @__PURE__ */ new Set());
+    _defineProperty36(this, "pageModel", void 0);
+    _defineProperty36(this, "userMap", void 0);
+    _defineProperty36(this, "indexedPageMap", void 0);
+    _defineProperty36(this, "list", {});
+    _defineProperty36(this, "hasPermission", void 0);
+    _defineProperty36(this, "handleIndexedPageMapUpdate", (_evt) => {
       this.list = this.indexedPageMap.get("list");
       const needRemoveList = this.pageModel.pageList().filter((v) => /^_i_/.test(v) && Object.keys(this.list).indexOf(v) < 0);
       const needAddList = Object.keys(this.list).filter((v) => this.pageModel.pageList().indexOf(v) < 0);
@@ -65394,6 +65729,9 @@ var IndexedNavigation = class extends EventEmitter11 {
     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;
@@ -65564,9 +65902,7 @@ var IndexedNavigation = class extends EventEmitter11 {
     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);
@@ -65607,19 +65943,19 @@ var IndexedNavigation = class extends EventEmitter11 {
     }
   }
   dispose() {
-    this.indexedPageMap.unobserve(this.handleIndexedPageMapUpdate);
+    removeObserver6(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
 };
-function _defineProperty36(e, r, t) {
-  return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty37(e, r, t) {
+  return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey36(t) {
-  var i = _toPrimitive36(t, "string");
+function _toPropertyKey37(t) {
+  var i = _toPrimitive37(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive36(t, r) {
+function _toPrimitive37(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65632,7 +65968,7 @@ function _toPrimitive36(t, r) {
 var ShadowEmitter = class extends EventEmitter12 {
   constructor(userMap) {
     super();
-    _defineProperty36(this, "userMap", void 0);
+    _defineProperty37(this, "userMap", void 0);
     this.userMap = userMap;
   }
   getActive() {
@@ -65642,14 +65978,14 @@ var ShadowEmitter = class extends EventEmitter12 {
     return this.userMap.set("shadowActive", value);
   }
 };
-function _defineProperty37(e, r, t) {
-  return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty38(e, r, t) {
+  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey37(t) {
-  var i = _toPrimitive37(t, "string");
+function _toPropertyKey38(t) {
+  var i = _toPrimitive38(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive37(t, r) {
+function _toPrimitive38(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65662,9 +65998,10 @@ function _toPrimitive37(t, r) {
 var StraightLineTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty37(this, "elementModel", null);
-    _defineProperty37(this, "from", null);
-    _defineProperty37(this, "to", null);
+    _defineProperty38(this, "elementModel", null);
+    _defineProperty38(this, "from", null);
+    _defineProperty38(this, "to", null);
+    _defineProperty38(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -65690,14 +66027,14 @@ var StraightLineTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty38(e, r, t) {
-  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty39(e, r, t) {
+  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey38(t) {
-  var i = _toPrimitive38(t, "string");
+function _toPropertyKey39(t) {
+  var i = _toPrimitive39(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive38(t, r) {
+function _toPrimitive39(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65710,8 +66047,9 @@ function _toPrimitive38(t, r) {
 var GrabTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope, camera) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty38(this, "camera", void 0);
-    _defineProperty38(this, "downPoint", null);
+    _defineProperty39(this, "camera", void 0);
+    _defineProperty39(this, "downPoint", null);
+    _defineProperty39(this, "showLiveCursor", false);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -65730,9 +66068,27 @@ var GrabTool = class extends WhiteboardTool {
     this.shadowEmitter.emit("grabUp");
   }
 };
+function _defineProperty40(e, r, t) {
+  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey40(t) {
+  var i = _toPrimitive40(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive40(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var PointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty40(this, "showLiveCursor", false);
   }
   onMouseDown(_event) {
   }
@@ -65741,14 +66097,14 @@ var PointerTool = class extends WhiteboardTool {
   onMouseUp() {
   }
 };
-function _defineProperty39(e, r, t) {
-  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty41(e, r, t) {
+  return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey39(t) {
-  var i = _toPrimitive39(t, "string");
+function _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive39(t, r) {
+function _toPrimitive41(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65760,8 +66116,8 @@ function _toPrimitive39(t, r) {
 }
 var SequenceExecutor = class {
   constructor() {
-    _defineProperty39(this, "tasks", []);
-    _defineProperty39(this, "isRunning", false);
+    _defineProperty41(this, "tasks", []);
+    _defineProperty41(this, "isRunning", false);
   }
   addTask(task) {
     this.tasks.push(task);
@@ -65786,14 +66142,133 @@ var SequenceExecutor = class {
     this.isRunning = false;
   }
 };
-function _defineProperty40(e, r, t) {
-  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty42(e, r, t) {
+  return (r = _toPropertyKey42(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey40(t) {
-  var i = _toPrimitive40(t, "string");
+function _toPropertyKey42(t) {
+  var i = _toPrimitive42(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive40(t, r) {
+function _toPrimitive42(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var LiveCursor = class {
+  constructor(canvasElement, paperScope, userManager, requestUserMap) {
+    _defineProperty42(this, "container", document.createElement("div"));
+    _defineProperty42(this, "showLiveCursor", true);
+    _defineProperty42(this, "userManager", void 0);
+    _defineProperty42(this, "requestUserMap", void 0);
+    _defineProperty42(this, "cursors", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "paperScope", void 0);
+    _defineProperty42(this, "resizeobserver", void 0);
+    _defineProperty42(this, "timeoutIdMap", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "lastVisibleChangeTimes", /* @__PURE__ */ new Map());
+    this.userManager = userManager;
+    this.paperScope = paperScope;
+    this.requestUserMap = requestUserMap;
+    this.container.setAttribute("data-forge-cursors", "");
+    this.container.style.cssText = "overflow:hidden;pointer-events:none;z-index:999;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.container.style.pointerEvents = "none";
+    this.resizeobserver = new ResizeObserver(() => {
+      const bounds = canvasElement.getBoundingClientRect();
+      this.container.style.width = bounds.width + "px";
+      this.container.style.height = bounds.height + "px";
+    });
+    this.resizeobserver.observe(canvasElement);
+  }
+  createCursor(userId) {
+    const cursor = document.createElement("fcursor");
+    cursor.setAttribute("data-forge-cursor", userId);
+    cursor.style.backgroundColor = this.requestUserMap(userId).get(WhiteboardKeys.themeColor);
+    cursor.style.color = "#fff";
+    cursor.style.position = "absolute";
+    cursor.style.whiteSpace = "nowrap";
+    cursor.style.display = "block";
+    cursor.style.fontSize = "12px";
+    cursor.style.padding = "2px 4px";
+    cursor.style.borderRadius = "4px";
+    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+    return cursor;
+  }
+  isOnSamePage(userId) {
+    const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+    const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
+    if (otherPage !== selfPage) {
+      return false;
+    }
+    return true;
+  }
+  detectEnable(userId) {
+    if (!this.showLiveCursor) {
+      const cursor = this.cursors.get(userId);
+      if (cursor) {
+        cursor.style.display = "none";
+      }
+    }
+    return this.showLiveCursor;
+  }
+  updateCursorPosition(point, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    const lastVisibleChangeTime = this.lastVisibleChangeTimes.get(userId);
+    if (lastVisibleChangeTime && Date.now() - lastVisibleChangeTime < 100) {
+      return;
+    }
+    if (!this.cursors.has(userId)) {
+      const cursor2 = this.createCursor(userId);
+      this.cursors.set(userId, cursor2);
+      this.container.appendChild(cursor2);
+    }
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      const viewPoint = this.paperScope.project.view.projectToView(point);
+      cursor.style.left = viewPoint.x + "px";
+      cursor.style.top = viewPoint.y + "px";
+      cursor.style.display = "block";
+    }
+    if (this.timeoutIdMap.has(userId)) {
+      clearTimeout(this.timeoutIdMap.get(userId));
+    }
+    this.timeoutIdMap.set(userId, setTimeout(() => {
+      const cursor2 = this.cursors.get(userId);
+      if (cursor2) {
+        cursor2.style.display = "none";
+      }
+    }, 5e3));
+  }
+  updateCursorVisible(visible, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    this.lastVisibleChangeTimes.set(userId, Date.now());
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      cursor.style.display = visible ? "block" : "none";
+    }
+  }
+};
+function _defineProperty43(e, r, t) {
+  return (r = _toPropertyKey43(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey43(t) {
+  var i = _toPrimitive43(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive43(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65804,6 +66279,21 @@ function _toPrimitive40(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
+var AsyncMap = class {
+  constructor() {
+    _defineProperty43(this, "map", void 0);
+    this.map = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    return Promise.resolve(this.map.get(key));
+  }
+  set(key, value) {
+    this.map.set(key, value);
+  }
+};
+if (!window.__forge_gl_wb_status__) {
+  window.__forge_gl_wb_status__ = new AsyncMap();
+}
 var WhiteboardApplication = class extends AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
@@ -65812,43 +66302,110 @@ var WhiteboardApplication = class extends AbstractApplication {
     }
     return null;
   }
+  get viewportWidth() {
+    const vw = this.getMap("attrs").get("viewportWidth");
+    if (vw) {
+      return vw;
+    }
+    return this.option.width;
+  }
+  get viewportHeight() {
+    const vh = this.getMap("attrs").get("viewportHeight");
+    if (vh) {
+      return vh;
+    }
+    return this.option.height;
+  }
   constructor() {
     var _this;
     super();
     _this = this;
-    _defineProperty40(this, "name", WHITEBOARD_APP_NAME);
-    _defineProperty40(this, "emitter", void 0);
-    _defineProperty40(this, "toolbarModel", void 0);
-    _defineProperty40(this, "selectElementsModel", void 0);
-    _defineProperty40(this, "trashedElementsModel", void 0);
-    _defineProperty40(this, "pageModel", void 0);
-    _defineProperty40(this, "layers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "undoManagers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "rootElement", document.createElement("div"));
-    _defineProperty40(this, "paperScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "canvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "snapshotCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "snapshotScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "shadowCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowEmitter", void 0);
-    _defineProperty40(this, "tools", void 0);
-    _defineProperty40(this, "editors", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "camera", void 0);
-    _defineProperty40(this, "resizeObserver", void 0);
-    _defineProperty40(this, "option", void 0);
-    _defineProperty40(this, "permissions", void 0);
-    _defineProperty40(this, "inputType", "any");
-    _defineProperty40(this, "isPenEvent", false);
-    _defineProperty40(this, "hasPenInput", null);
-    _defineProperty40(this, "disableViewModelUpdate", false);
-    _defineProperty40(this, "internalResizeObserver", true);
-    _defineProperty40(this, "sequenceExecutor", new SequenceExecutor());
-    _defineProperty40(this, "linkTarget", null);
-    _defineProperty40(this, "enableToolEvent", () => {
+    _defineProperty43(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty43(this, "emitter", void 0);
+    _defineProperty43(this, "toolbarModel", void 0);
+    _defineProperty43(this, "selectElementsModel", void 0);
+    _defineProperty43(this, "trashedElementsModel", void 0);
+    _defineProperty43(this, "pageModel", void 0);
+    _defineProperty43(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "imageSets", document.createElement("div"));
+    _defineProperty43(this, "rootElement", document.createElement("div"));
+    _defineProperty43(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowEmitter", void 0);
+    _defineProperty43(this, "tools", void 0);
+    _defineProperty43(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "camera", void 0);
+    _defineProperty43(this, "resizeObserver", void 0);
+    _defineProperty43(this, "option", void 0);
+    _defineProperty43(this, "permissions", void 0);
+    _defineProperty43(this, "inputType", "any");
+    _defineProperty43(this, "isPenEvent", false);
+    _defineProperty43(this, "hasPenInput", null);
+    _defineProperty43(this, "disableViewModelUpdate", false);
+    _defineProperty43(this, "internalResizeObserver", true);
+    _defineProperty43(this, "sequenceExecutor", new SequenceExecutor());
+    _defineProperty43(this, "linkWhiteboardId", null);
+    _defineProperty43(this, "liveCursor", void 0);
+    _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "addWhiteboardStatus", (evt) => {
+      if (evt.detail.whiteboardAppId && evt.detail.status) {
+        if (this.linkWhiteboardId === evt.detail.whiteboardAppId) {
+          this.toolbarModel.currentTool = evt.detail.status.currentTool;
+          this.toolbarModel.strokeColor = evt.detail.status.strokeColor;
+          this.toolbarModel.fillColor = evt.detail.status.fillColor;
+          this.toolbarModel.fontSize = evt.detail.status.fontSize;
+          this.toolbarModel.fontFamily = evt.detail.status.fontFamily;
+          this.toolbarModel.strokeWidth = evt.detail.status.strokeWidth;
+          this.toolbarModel.dashArray = evt.detail.status.dashArray;
+          this.permissions.removePermission(WhiteboardPermissionFlag.all);
+          this.permissions.addPermission(evt.detail.status.permission);
+        }
+      }
+    });
+    _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty40(this, "handlePageSwitch", (pageId) => {
+    _defineProperty43(this, "handleViewportUpdate", (evt) => {
+      if (evt.keysChanged.has("viewportWidth") || evt.keysChanged.has("viewportHeight")) {
+        const rect = this.rootElement.getBoundingClientRect();
+        this.adjustByOutFrame(rect.width, rect.height);
+      }
+    });
+    _defineProperty43(this, "handleElementTranslateOut", (ids, container) => {
+      const shadowLayer = this.shadowScope.project.activeLayer;
+      let parent = null;
+      if (container === "layer") {
+        parent = shadowLayer;
+      } else {
+        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
+      }
+      if (parent) {
+        ids.forEach((id) => {
+          const target = parent.children.find((child) => child.data.uuid === id);
+          if (target) {
+            target.remove();
+            this.insertElementToParent(target, this.paperScope.project.activeLayer);
+          } else {
+            const pageId = this.pageModel.getCurrentPage(this.userId);
+            if (pageId) {
+              const page = this.layers.get(pageId);
+              if (page) {
+                const model = page.elementModels.get(id);
+                if (model && model.item) {
+                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+    _defineProperty43(this, "handlePageSwitch", (pageId) => {
       this.sequenceExecutor.addTask(async () => {
         for (const editor of this.editors.values()) {
           editor.hidden();
@@ -65878,7 +66435,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          log3(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
+          log4(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -65890,30 +66447,30 @@ var WhiteboardApplication = class extends AbstractApplication {
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          log3(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
+          log4(`[@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);
       });
     });
-    _defineProperty40(this, "hasPermission", (flag) => {
+    _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty40(this, "handleStackItemAdded", () => {
+    _defineProperty43(this, "handleStackItemAdded", () => {
       this.selectElementsModel.clearSelectElementForSelf();
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleStackItemPopped", () => {
+    _defineProperty43(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleLayersChange", (ids) => {
+    _defineProperty43(this, "handleLayersChange", (ids) => {
       for (let i = 0, len = ids.length; i < len; i++) {
         const id = ids[i];
         if (!this.layers.has(id)) {
           const elementsMap = this.getMap(`layer/${id}/elements`);
-          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission);
+          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission);
           this.layers.set(id, renderableModel);
         }
         if (!this.undoManagers.has(id)) {
@@ -65929,7 +66486,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           const renderableModel = this.layers.get(entry[0]);
           this.layers.delete(entry[0]);
           if (renderableModel) {
-            renderableModel.dispose();
+            renderableModel.dispose(true);
           }
           const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
           const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
@@ -65940,17 +66497,18 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       }
     });
-    _defineProperty40(this, "getCurrentRenderableModel", () => {
+    _defineProperty43(this, "getCurrentRenderableModel", () => {
       const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (!this.layers.has(layerId)) {
         this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
       }
       return this.layers.get(layerId);
     });
-    _defineProperty40(this, "handleElementClear", () => {
+    _defineProperty43(this, "handleElementClear", () => {
+      this.shadowScope.project.activeLayer.removeChildren();
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty40(this, "handleElementInsert", (elements) => {
+    _defineProperty43(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -65962,7 +66520,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty40(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty43(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -65973,11 +66531,11 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty40(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty43(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty40(this, "handleElementsTrash", (userId, elements) => {
+    _defineProperty43(this, "handleElementsTrash", (userId, elements) => {
       const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
@@ -65990,7 +66548,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       });
     });
-    _defineProperty40(this, "handleElementsSelect", (userId, elements) => {
+    _defineProperty43(this, "handleElementsSelect", (userId, elements) => {
       if (!this.editors.has(userId)) {
         const ctrl = this.userManager.getUser(userId);
         const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
@@ -66033,34 +66591,44 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty40(this, "handleLinkedMapChange", (evt) => {
-      for (const [key, value] of evt.changes.keys.entries()) {
-        if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
-          this.toolbarModel.currentTool = evt.target.get(TOOLBAR_KEYS.tool);
-          this.toolbarModel.strokeColor = evt.target.get(TOOLBAR_KEYS.strokeColor);
-          this.toolbarModel.fillColor = evt.target.get(TOOLBAR_KEYS.fillColor);
-          this.toolbarModel.fontSize = evt.target.get(TOOLBAR_KEYS.fontSize);
-          this.toolbarModel.fontFamily = evt.target.get(TOOLBAR_KEYS.fontFamily);
-          this.toolbarModel.strokeWidth = evt.target.get(TOOLBAR_KEYS.strokeWidth);
-          this.toolbarModel.dashArray = evt.target.get(TOOLBAR_KEYS.dashArray);
-        }
-        if (key === "permission" && (value.action === "add" || value.action === "update")) {
-          this.permissions.removePermission(WhiteboardPermissionFlag.all);
-          this.permissions.addPermission(evt.target.get("permission"), this.userId);
-        }
+    _defineProperty43(this, "handleSyncedWhiteboardStatusChange", (evt) => {
+      if ([TOOLBAR_KEYS.tool, TOOLBAR_KEYS.strokeColor, TOOLBAR_KEYS.fillColor, TOOLBAR_KEYS.fontSize, TOOLBAR_KEYS.fontFamily, TOOLBAR_KEYS.strokeWidth, TOOLBAR_KEYS.dashArray, "permission"].some((key) => evt.keysChanged.has(key))) {
+        const nextState = {
+          currentTool: evt.target.get(TOOLBAR_KEYS.tool),
+          strokeColor: evt.target.get(TOOLBAR_KEYS.strokeColor),
+          fillColor: evt.target.get(TOOLBAR_KEYS.fillColor),
+          fontSize: evt.target.get(TOOLBAR_KEYS.fontSize),
+          fontFamily: evt.target.get(TOOLBAR_KEYS.fontFamily),
+          strokeWidth: evt.target.get(TOOLBAR_KEYS.strokeWidth),
+          dashArray: evt.target.get(TOOLBAR_KEYS.dashArray),
+          permission: evt.target.get("permission")
+        };
+        window.__forge_gl_wb_status__.set(this.appId, nextState);
+        window.dispatchEvent(new CustomEvent("forge-whiteboard-synced-status", {
+          detail: {
+            whiteboardAppId: this.appId,
+            status: nextState,
+            userId: this.userId
+          }
+        }));
       }
     });
-    _defineProperty40(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
-      if (this.option.width > 0 && this.option.height > 0) {
+    _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+      if (!this.paperScope.project.view || !this.shadowScope.project.view) {
+        return;
+      }
+      const viewportWidth = this.viewportWidth;
+      const viewportHeight = this.viewportHeight;
+      if (viewportWidth > 0 && viewportHeight > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
         let width = minWidth;
-        let height = width * this.option.height / this.option.width;
+        let height = width * viewportHeight / viewportWidth;
         if (height > minHeight) {
           height = minHeight;
-          width = height * this.option.width / this.option.height;
+          width = height * viewportWidth / viewportHeight;
         }
-        this.camera.updateInherentScale(width / this.option.width);
+        this.camera.updateInherentScale(width / viewportWidth);
         this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.camera.triggerZoom();
@@ -66070,6 +66638,9 @@ var WhiteboardApplication = class extends 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) {
@@ -66131,7 +66702,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -66142,7 +66713,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -66157,7 +66728,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -66169,6 +66740,30 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        log4("[@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) {
+        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -66184,7 +66779,7 @@ var WhiteboardApplication = class extends 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, {
@@ -66234,12 +66829,29 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.resetCamera = () => {
       this.camera.reset();
     };
+    this.emitter.showLiveCursor = (value) => {
+      this.liveCursor.showLiveCursor = value;
+    };
+    this.emitter.updateViewport = (width, height) => {
+      this.updateOptionSize(width, height);
+    };
+    this.emitter.__setMainCanvasVisible = (visible) => {
+      this.canvasElement.style.opacity = visible ? "1" : "0";
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      log3("WhiteboardApplicationError", {
+      log4("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;
@@ -66328,6 +66940,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         that.camera.enableBoundaryHighlight = value;
       }
     });
+    window.addEventListener("forge-whiteboard-synced-status", this.addWhiteboardStatus);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -66340,7 +66953,19 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
+    if (this.option.stretchToFill) {
+      this.getMap("attrs").set("viewportWidth", -1);
+      this.getMap("attrs").set("viewportHeight", -1);
+    } else {
+      if (!this.getMap("attrs").has("viewportWidth")) {
+        this.getMap("attrs").set("viewportWidth", option.width);
+      }
+      if (!this.getMap("attrs").has("viewportHeight")) {
+        this.getMap("attrs").set("viewportHeight", option.height);
+      }
+    }
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
+    this.userMap(this.userId).observe(this.handleSyncedWhiteboardStatusChange);
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
     this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
       return this.userMap(userId);
@@ -66388,6 +67013,9 @@ var WhiteboardApplication = class extends 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),
@@ -66398,7 +67026,7 @@ var WhiteboardApplication = class extends 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)
     };
@@ -66419,7 +67047,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
     } else {
       this.paperScope.tool = this.tools["curve"].tool;
-      log3(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      log4(`${this.toolbarModel.currentTool} not supported, backup to curve`);
     }
     this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
     this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -66470,32 +67098,12 @@ var WhiteboardApplication = class extends 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) => {
@@ -66522,6 +67130,15 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.emitter.emit("grabUp");
     });
     this.clearElements();
+    if (this.option.stretchToFill) {
+      window.addEventListener("resize", () => {
+        const bounds = this.rootElement.getBoundingClientRect();
+        this.updateOptionSize(bounds.width, bounds.height);
+        this.adjustByOutFrame(bounds.width, bounds.height);
+      });
+    }
+    this.rootElement.appendChild(this.liveCursor.container);
+    this.getMap("attrs").observe(this.handleViewportUpdate);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -66617,10 +67234,10 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.snapshotScope.view.viewSize = bounds.size.multiply(scale2);
       this.snapshotScope.view.matrix = matrix;
     } else if (area === "maxScale" && this.option.maxScaleRatio && this.option.maxScaleRatio !== -1) {
-      const width = this.option.width * this.option.maxScaleRatio;
-      const height = this.option.height * this.option.maxScaleRatio;
-      const offsetX = this.option.width * (this.option.maxScaleRatio - 1) / 2;
-      const offsetY = this.option.height * (this.option.maxScaleRatio - 1) / 2;
+      const width = this.viewportWidth * this.option.maxScaleRatio;
+      const height = this.viewportHeight * this.option.maxScaleRatio;
+      const offsetX = this.viewportWidth * (this.option.maxScaleRatio - 1) / 2;
+      const offsetY = this.viewportHeight * (this.option.maxScaleRatio - 1) / 2;
       const matrix = new this.paperScope.Matrix();
       matrix.scale(scale);
       matrix.translate({
@@ -66644,28 +67261,23 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.disableViewModelUpdate = true;
   }
   linkToWhiteboard(targetId) {
-    if (this.linkTarget) {
-      this.unlink();
-    }
-    this.userMap(this.userId);
-    this.linkTarget = this.roomDoc.getMap(`@app/${this.name}/${targetId}/user/${this.userId}`);
-    if (this.linkTarget) {
-      this.toolbarModel.currentTool = this.linkTarget.get(TOOLBAR_KEYS.tool);
-      this.toolbarModel.strokeColor = this.linkTarget.get(TOOLBAR_KEYS.strokeColor);
-      this.toolbarModel.fillColor = this.linkTarget.get(TOOLBAR_KEYS.fillColor);
-      this.toolbarModel.fontSize = this.linkTarget.get(TOOLBAR_KEYS.fontSize);
-      this.toolbarModel.fontFamily = this.linkTarget.get(TOOLBAR_KEYS.fontFamily);
-      this.toolbarModel.strokeWidth = this.linkTarget.get(TOOLBAR_KEYS.strokeWidth);
-      this.toolbarModel.dashArray = this.linkTarget.get(TOOLBAR_KEYS.dashArray);
-      this.permissions.removePermission(WhiteboardPermissionFlag.all);
-      this.permissions.addPermission(this.linkTarget.get("permission"), this.userId);
-      this.linkTarget.observe(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = targetId;
+    window.__forge_gl_wb_status__.get(targetId).then((currentStatus) => {
+      if (currentStatus) {
+        this.toolbarModel.currentTool = currentStatus.currentTool;
+        this.toolbarModel.strokeColor = currentStatus.strokeColor;
+        this.toolbarModel.fillColor = currentStatus.fillColor;
+        this.toolbarModel.fontSize = currentStatus.fontSize;
+        this.toolbarModel.fontFamily = currentStatus.fontFamily;
+        this.toolbarModel.strokeWidth = currentStatus.strokeWidth;
+        this.toolbarModel.dashArray = currentStatus.dashArray;
+        this.permissions.removePermission(WhiteboardPermissionFlag.all);
+        this.permissions.addPermission(currentStatus.permission);
+      }
+    });
   }
   unlink() {
-    if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = null;
   }
   setViewSize(width, height) {
     this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
@@ -66682,11 +67294,14 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.internalResizeObserver = value;
   }
   updateOptionSize(width, height) {
-    this.option.width = width;
-    this.option.height = height;
+    this.getMap("attrs").set("viewportWidth", width);
+    this.getMap("attrs").set("viewportHeight", height);
     this.camera.updateInitSize(new import_paper.default.Size(width, height));
   }
-  async dispose() {
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
     this.selectElementsModel.dispose();
     this.trashedElementsModel.dispose();
     this.paperScope.view.remove();
@@ -66703,7 +67318,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       entry[1].off("stack-item-popped", this.handleStackItemPopped);
     }
     for (const entry of this.layers.entries()) {
-      entry[1].dispose();
+      entry[1].dispose(removeSubDoc);
       entry[1].removeAllListeners();
     }
     this.camera.dispose();
@@ -66715,13 +67330,14 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
+    removeObserver7(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
   }
 };
-_defineProperty40(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 
 // src/SlideApplication.ts
 var import_slide = __toESM(require_Slide());
-import { AbstractApplication as AbstractApplication2, kvStore } from "@netless/forge-room";
+import { AbstractApplication as AbstractApplication2, kvStore as kvStore2 } from "@netless/forge-room";
 
 // src/Slide.ts
 import EventEmitter13 from "eventemitter3";
@@ -66941,10 +67557,16 @@ var FooterView = class extends EventEmitter14 {
 
 // src/SiderBarView.ts
 import EventEmitter15 from "eventemitter3";
+import { kvStore } from "@netless/forge-room";
 var SideBarView = class extends EventEmitter15 {
   root = document.createElement("div");
   isShow = false;
   eventsMap = /* @__PURE__ */ new Map();
+  taskId = "";
+  prefix = "";
+  addImagesPool = [];
+  scheduleId = 0;
+  isSchedule = false;
   constructor() {
     super();
     this.root.style.backgroundColor = "#eee";
@@ -66965,49 +67587,110 @@ var SideBarView = class extends EventEmitter15 {
   get isShowSideBar() {
     return this.isShow;
   }
+  async getPreviewImage(imageUrl) {
+    const image = await fetch(imageUrl);
+    const blob = await image.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64Data = reader.result;
+        const img = document.createElement("img");
+        img.src = base64Data;
+        img.onload = () => {
+          resolve({
+            url: imageUrl,
+            src: base64Data,
+            width: img.width,
+            height: img.height
+          });
+        };
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  async appendPreviewImage(pageIndex) {
+    const itemContainer = document.createElement("div");
+    itemContainer.style.width = "60%";
+    itemContainer.style.display = "flex";
+    itemContainer.style.justifyContent = "center";
+    itemContainer.style.alignItems = "flex-start";
+    itemContainer.style.position = "relative";
+    itemContainer.style.borderRadius = "4px";
+    itemContainer.style.transition = "border-color .3s";
+    itemContainer.style.marginBottom = "10px";
+    const onMouseOverHandle = () => {
+      itemContainer.style.borderColor = "#ccc";
+    };
+    const onMouseOutHandle = () => {
+      itemContainer.style.borderColor = "transparent";
+    };
+    const onClickHandle = () => {
+      this.emit("pageChange", pageIndex);
+    };
+    itemContainer.addEventListener("click", onClickHandle);
+    itemContainer.addEventListener("mouseover", onMouseOverHandle);
+    itemContainer.addEventListener("mouseout", onMouseOutHandle);
+    this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
+    const pageIndexContainer = document.createElement("span");
+    pageIndexContainer.textContent = `${pageIndex}`;
+    pageIndexContainer.style.position = "absolute";
+    pageIndexContainer.style.top = "1px";
+    pageIndexContainer.style.left = "-10px";
+    pageIndexContainer.style.transform = "translate(-100%)";
+    pageIndexContainer.style.fontSize = "12px";
+    pageIndexContainer.style.color = "#5f5f5f";
+    const previewUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
+    const preview = document.createElement("img");
+    const cachePreview = await kvStore.getItem(previewUrl);
+    if (cachePreview) {
+      const { src } = JSON.parse(cachePreview);
+      preview.src = src;
+    } else {
+      const previewInfo = await this.getPreviewImage(previewUrl);
+      await kvStore.setItem(previewUrl, JSON.stringify(previewInfo));
+      const { src } = previewInfo;
+      preview.src = src;
+    }
+    preview.style.width = "100%";
+    preview.style.display = "inline-block";
+    itemContainer.appendChild(preview);
+    itemContainer.appendChild(pageIndexContainer);
+    this.root.appendChild(itemContainer);
+  }
+  async scheduleGetPreviewImage() {
+    if (!this.isSchedule) {
+      this.scheduleId = setTimeout(async () => {
+        await this.scheduleGetPreviewImage();
+      }, 32);
+      return;
+    }
+    const pageIndex = this.addImagesPool.shift();
+    if (!pageIndex) {
+      clearTimeout(this.scheduleId);
+      this.scheduleId = 0;
+      return;
+    }
+    await this.appendPreviewImage(pageIndex);
+    this.scheduleId = setTimeout(async () => {
+      await this.scheduleGetPreviewImage();
+    }, 32);
+  }
+  async startGetPreviewImageSchedule() {
+    this.isSchedule = true;
+  }
+  pauseGetPreviewImageSchedule() {
+    this.isSchedule = false;
+  }
   initialize(slideCount, option) {
+    this.taskId = option.taskId;
+    this.prefix = option.prefix;
     for (let i = 1; i <= slideCount; i++) {
-      const itemContainer = document.createElement("div");
-      itemContainer.style.width = "60%";
-      itemContainer.style.display = "flex";
-      itemContainer.style.justifyContent = "center";
-      itemContainer.style.alignItems = "flex-start";
-      itemContainer.style.position = "relative";
-      itemContainer.style.borderRadius = "4px";
-      itemContainer.style.transition = "border-color .3s";
-      itemContainer.style.marginBottom = "10px";
-      const onMouseOverHandle = () => {
-        itemContainer.style.borderColor = "#ccc";
-      };
-      const onMouseOutHandle = () => {
-        itemContainer.style.borderColor = "transparent";
-      };
-      const onClickHandle = () => {
-        this.emit("pageChange", i);
-      };
-      itemContainer.addEventListener("click", onClickHandle);
-      itemContainer.addEventListener("mouseover", onMouseOverHandle);
-      itemContainer.addEventListener("mouseout", onMouseOutHandle);
-      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
-      const pageIndex = document.createElement("span");
-      pageIndex.textContent = `${i}`;
-      pageIndex.style.position = "absolute";
-      pageIndex.style.top = "1px";
-      pageIndex.style.left = "-10px";
-      pageIndex.style.transform = "translate(-100%)";
-      pageIndex.style.fontSize = "12px";
-      pageIndex.style.color = "#5f5f5f";
-      const preview = document.createElement("img");
-      preview.style.width = "100%";
-      preview.style.display = "inline-block";
-      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
-      itemContainer.appendChild(preview);
-      itemContainer.appendChild(pageIndex);
-      this.root.appendChild(itemContainer);
+      this.addImagesPool.push(i);
     }
+    this.scheduleGetPreviewImage();
   }
   hidden() {
-    if (!this.root) {
+    if (!this.root || !this.isShow) {
       return;
     }
     this.root.style.left = "-240px";
@@ -67036,7 +67719,7 @@ var SideBarView = class extends EventEmitter15 {
 };
 
 // src/utils.ts
-function deepEqual(a2, b2, excludeKeys = ["time"]) {
+function deepEqual(a2, b2, excludeKeys = ["mediaState"]) {
   if (a2 === b2) return true;
   if (typeof a2 !== "object" || a2 === null || typeof b2 !== "object" || b2 === null) return false;
   if (a2.constructor !== b2.constructor) return false;
@@ -67097,7 +67780,7 @@ var SlideApplication = class extends AbstractApplication2 {
     super();
     window.emitter = this.emitter;
     this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
-    this.rootView.style.background = "#f0f0f0f0";
+    this.rootView.style.background = "#f9f9fc";
     this.rootView.style.overflow = "hidden";
     this.contentContainer.style.width = "100%";
     this.contentContainer.style.height = "100%";
@@ -67270,28 +67953,6 @@ var SlideApplication = class extends AbstractApplication2 {
     }
     return `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
   }
-  async getPreviewImage(imageUrl) {
-    const image = fetch(imageUrl);
-    return await image.then((res) => res.blob()).then((blob) => {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result;
-          const img = document.createElement("img");
-          img.src = base64Data;
-          img.onload = () => {
-            resolve({
-              url: imageUrl,
-              src: base64Data,
-              width: img.width,
-              height: img.height
-            });
-          };
-        };
-        reader.readAsDataURL(blob);
-      });
-    });
-  }
   async getImageUrl(pageIndex) {
     return this.getPreviewImageUrl(pageIndex);
   }
@@ -67299,7 +67960,7 @@ var SlideApplication = class extends AbstractApplication2 {
     const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await kvStore.getItem(imageUrl);
+      const result = await kvStore2.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67307,15 +67968,15 @@ var SlideApplication = class extends AbstractApplication2 {
     if (preview) {
       return { width: preview.width, height: preview.height };
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await kvStore2.setItem(imageUrl, JSON.stringify(preview));
     return { width: preview.width, height: preview.height };
   }
   async getImageContent(pageIndex) {
     const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await kvStore.getItem(imageUrl);
+      const result = await kvStore2.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67323,8 +67984,8 @@ var SlideApplication = class extends AbstractApplication2 {
     if (preview) {
       return preview.src;
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await kvStore2.setItem(imageUrl, JSON.stringify(preview));
     return preview.src;
   }
   nextTick = () => {
@@ -67346,10 +68007,14 @@ var SlideApplication = class extends AbstractApplication2 {
     this.syncMessageQueue = [];
     this.isSyncing = true;
     const { state, dispatch } = lastSyncMessage;
-    if (this.slide.slideState.currentSlideIndex < 0) {
+    let ignoreKeys = void 0;
+    if (dispatch.type === "mediaPlay" || dispatch.type === "mediaPause" || dispatch.type === "mediaFullscreen") {
+      ignoreKeys = [dispatch.id];
+    }
+    if (this.slide.slideState.currentSlideIndex < 0 || state.currentSlideIndex < 0) {
       await this.slide.receiveSyncHandler(dispatch);
       return this.nextTick();
-    } else if (!deepEqual(this.slide.slideState, state)) {
+    } else if (!deepEqual(this.slide.slideState, state, ignoreKeys)) {
       await this.slide.setSlideState(state);
       await this.slide.receiveSyncHandler(dispatch);
     } else {
@@ -67402,11 +68067,11 @@ var SlideApplication = class extends AbstractApplication2 {
     this.prefix = option.prefix;
     this.taskId = option.taskId;
     const whiteboardApp = new WhiteboardApplication();
-    whiteboardApp.roomDoc = this.roomDoc;
-    whiteboardApp.appId = `${option.taskId}_${this.appId}_wb`;
+    whiteboardApp.appDoc = this.appDoc;
+    whiteboardApp.appId = `${this.appId}_wb`;
     whiteboardApp.userId = this.userId;
     whiteboardApp.userManager = this.userManager;
-    whiteboardApp.applicationManager = this.applicationManager;
+    whiteboardApp.deleteSubDoc = this.deleteSubDoc;
     const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then((res) => res.json());
     this.slideCount = json.slideCount;
     await whiteboardApp.initialize({
@@ -67444,7 +68109,13 @@ var SlideApplication = class extends AbstractApplication2 {
       ...option.options,
       interactive: true,
       anchor: this.slideContainer,
-      mode: "interactive"
+      mode: "interactive",
+      clientId: Math.random().toString(36).substring(2, 15),
+      timestamp: () => {
+        console.log("timestamp");
+        console.log(Date.now, this.calibrationTimestamp, Date.now() - this.calibrationTimestamp);
+        return this.calibrationTimestamp;
+      }
       // logger: {
       //     info: console.log,
       //     warn: console.warn,
@@ -67465,25 +68136,28 @@ var SlideApplication = class extends AbstractApplication2 {
     this.slide.on(import_slide.SLIDE_EVENTS.mainSeqStepEnd, (animateIndex) => {
       this.emitter.emit("mainSeqStepEnd", animateIndex);
     });
-    this.slide.on(import_slide.SLIDE_EVENTS.animateStart, () => {
-      this.sideBar.hidden();
-    });
     this.slide.on(import_slide.SLIDE_EVENTS.renderError, ({ error, index }) => {
       if (error.errorType === "CANVAS_CRASH") {
         this.slide.renderSlide(index);
       }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.renderStart, (slideIndex) => {
-      this.whiteboardApp.emitter.view.style.opacity = "0";
-      this.whiteboardApp.emitter.addPage(`${slideIndex}`);
-      this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
-      this.sideBar.hidden();
-      this.emitter.emit("renderStart", slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.pauseGetPreviewImageSchedule();
+        this.whiteboardApp.emitter.view.style.opacity = "0";
+        this.whiteboardApp.emitter.addPage(`${slideIndex}`);
+        this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        this.sideBar.hidden();
+        this.emitter.emit("renderStart", slideIndex);
+      }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.renderEnd, (slideIndex) => {
-      this.currentSlideIndex = slideIndex;
-      this.whiteboardApp.emitter.view.style.opacity = "1";
-      this.emitter.emit("renderEnd", slideIndex);
+      if (slideIndex >= 0) {
+        this.sideBar.startGetPreviewImageSchedule();
+        this.currentSlideIndex = slideIndex;
+        this.whiteboardApp.emitter.view.style.opacity = "1";
+        this.emitter.emit("renderEnd", slideIndex);
+      }
     });
     this.slide.on(import_slide.SLIDE_EVENTS.stateChange, (state) => {
       this.getMap(this.name).set("slideState", state);
@@ -67492,6 +68166,9 @@ var SlideApplication = class extends AbstractApplication2 {
     window.slide = this.slide;
     window.slideWhiteboard = this.whiteboardApp;
     window.forgeSlide = this;
+    this.whiteboardContainer.addEventListener("click", () => {
+      this.sideBar.hidden();
+    }, false);
     const syncSlide = this.getMap(this.name).get("slideState");
     if (syncSlide && syncSlide.taskId === option.taskId) {
       this.slide.setSlideState(syncSlide);
@@ -67535,6 +68212,7 @@ var SlideApplication = class extends AbstractApplication2 {
           this.onRefocusInstance();
         }
       });
+      this.bindKeyBoardEvent();
     }
     window.__forge_slide = this;
     window.slidePermissions = this.permissions;
@@ -67543,8 +68221,11 @@ var SlideApplication = class extends AbstractApplication2 {
   userMap(userId) {
     return this.getMap(`user/${userId}`);
   }
-  async dispose() {
-    await this.whiteboardApp.dispose();
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
+    await this.whiteboardApp.dispose(removeSubDoc);
     this.rootView.parentElement?.removeChild(this.rootView);
     this.slide.destroy();
     this.sideBar.dispose();