@netless/forge-whiteboard 0.1.14 → 0.1.16

package/dist/whiteboard.js

@@ -25371,14 +25371,15 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WhiteboardApplication.ts
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var Y15 = __toESM(require("yjs"), 1);
 var import_paper = __toESM(require_paper_full(), 1);
 
 // src/model/RenderableModel.ts
 var Y12 = __toESM(require("yjs"), 1);
-var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
+var import_forge_room4 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25536,6 +25537,7 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 // src/model/renderable/ElementModel.ts
 var Y = __toESM(require("yjs"), 1);
+var import_forge_room = require("@netless/forge-room");
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -25718,6 +25720,10 @@ var ElementModel = class _ElementModel {
     const ext = this.styleKeys();
     return Array.from(new Set(["dashArray", "strokeColor", "fillColor", "strokeWidth"].filter((v) => ext.exclude.indexOf(v) < 0).concat(ext.include)));
   }
+  dispose() {
+    this.subDispose();
+    (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
+  }
 };
 _defineProperty(ElementModel, "KEYS", {
   index: "index",
@@ -25791,12 +25797,15 @@ var CurveModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
     _defineProperty3(this, "item", null);
+    _defineProperty3(this, "debugPath", void 0);
+    _defineProperty3(this, "debug", false);
     if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
     if (!this.root.has("points")) {
       this.root.set("points", new Y2.Array());
     }
+    this.debugPath = new scope.Path();
   }
   average(a2, b2) {
     return (a2 + b2) / 2;
@@ -25805,23 +25814,23 @@ var CurveModel = class extends ElementModel {
     const groupPoints = (0, import_lodash.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
+      smoothing: 0.5,
+      thinning: -0.5,
       streamline: 0.5,
       simulatePressure: true,
       start: {
-        taper: 10,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 10,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const groupPoints = (0, import_lodash.chunk)(this.points, 2);
-    return groupPoints.map((_ref) => {
+    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
+    return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
     }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
@@ -25855,27 +25864,41 @@ var CurveModel = class extends ElementModel {
     }
     return path;
   }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+  updateDebugPath() {
+    this.debugPath = new this.scope.Path();
+    const points = (0, import_lodash.chunk)(this.points, 2);
+    for (let i = 0, len = points.length; i < len; i++) {
+      const point = new this.scope.Point(points[i][0], points[i][1]);
+      if (i === 0) {
+        this.debugPath.moveTo(point);
+      } else {
+        this.debugPath.lineTo(point);
+      }
+      this.debugPath.strokeWidth = 1;
+      this.debugPath.strokeColor = new this.scope.Color(1, 0, 0, 1);
+    }
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    if (this.debug) {
+      this.debugPath.remove();
+      this.updateDebugPath();
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
-    this.item.simplify(2.5);
+    this.item.addSegments(path.segments);
+    if (this.debug) {
+      this.item.addChild(this.debugPath);
+    }
   }
   createPaperItem() {
     this.item = new this.scope.Path();
-    this.item.strokeCap = "round";
-    this.item.strokeJoin = "round";
-    this.item.strokeScaling = false;
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
+    this.onVectorUpdate();
   }
   editorConfig() {
     return new EditorConfig();
@@ -25885,8 +25908,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -25896,8 +25919,12 @@ var CurveModel = class extends ElementModel {
     if (key === "strokeColor") {
       this.item.strokeColor = new this.scope.Color(this.strokeColor);
       this.item.fillColor = new this.scope.Color(this.strokeColor);
+    } else if (key === "strokeWidth") {
+      this.onVectorUpdate();
     }
   }
+  subDispose() {
+  }
 };
 
 // src/model/renderable/SelectorModel.ts
@@ -25932,14 +25959,12 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  subDispose() {
+  }
   createPaperRect() {
     const scope = this.scope;
     const bounds = new scope.Rectangle(new scope.Point(this.points[0], this.points[1]), new scope.Size(this.points[2], this.points[3]));
-    return new scope.Path.Rectangle(
-      bounds,
-      new scope.Point(this.points[4], this.points[4])
-      // 圆角
-    );
+    return new scope.Path.Rectangle(bounds, new scope.Point(this.points[4], this.points[4]));
   }
   onVectorUpdate() {
     if (!this.item) {
@@ -25965,7 +25990,7 @@ var SelectorModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26017,7 +26042,7 @@ var AnimationFrame = class {
     _defineProperty5(this, "lastTime", 0);
     _defineProperty5(this, "fps", 45);
     _defineProperty5(this, "handleCallbacks", () => {
-      let functions = this.callbacks;
+      const functions = this.callbacks;
       this.callbacks = [];
       for (let i = 0, l2 = functions.length; i < l2; i++) {
         functions[i]();
@@ -26070,6 +26095,8 @@ var SegmentsModel = class extends ElementModel {
       this.root.set("points", new Y4.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -26104,7 +26131,7 @@ var SegmentsModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26198,6 +26225,9 @@ var LineTool = class extends WhiteboardTool {
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createLinePath(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -26273,6 +26303,8 @@ var LineModel = class extends ElementModel {
       this.root.set("tailArrow", "normal");
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -26309,7 +26341,7 @@ var LineModel = class extends ElementModel {
     this.item.addChildren(this.renderLine());
   }
   createArrow(path) {
-    let [headPath, tailPath] = [new this.scope.Path(), new this.scope.Path()];
+    const [headPath, tailPath] = [new this.scope.Path(), new this.scope.Path()];
     if (!path) {
       return [headPath, tailPath];
     }
@@ -26363,7 +26395,7 @@ var LineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     this.onVectorUpdate();
   }
 };
@@ -26418,6 +26450,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 var Y6 = __toESM(require("yjs"), 1);
+var import_forge_room2 = require("@netless/forge-room");
 function _defineProperty10(e, r, t) {
   return (r = _toPropertyKey10(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -26486,6 +26519,9 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
+  subDispose() {
+    (0, import_forge_room2.removeObserver)(this.root, this.handleTextPropChange);
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -26591,6 +26627,8 @@ var TriangleModel = class extends ElementModel {
       this.root.set("points", new Y7.Array());
     }
   }
+  subDispose() {
+  }
   createPaperItem() {
     this.item = new this.scope.Path();
     this.item.strokeCap = "butt";
@@ -26647,7 +26685,7 @@ var TriangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26686,6 +26724,8 @@ var RectangleModel = class extends ElementModel {
       this.root.set("radius", 0);
     }
   }
+  subDispose() {
+  }
   createSegments() {
     const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -26817,7 +26857,7 @@ var RectangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26958,9 +26998,11 @@ var EraserModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
 };
 
 // src/model/renderable/LaserPointerModel.ts
@@ -27117,30 +27159,15 @@ var LaserPointerModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
 };
 
 // src/WhitePermissions.ts
-var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
-function _defineProperty15(e, r, t) {
-  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
-}
-function _toPropertyKey15(t) {
-  var i = _toPrimitive15(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive15(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
+var import_forge_room3 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27153,120 +27180,28 @@ var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
 }({});
-var WhiteboardPermissions = class extends import_eventemitter3.default {
-  constructor(userManager, requestUserMap) {
-    super();
-    _defineProperty15(this, "requestUserMap", void 0);
-    _defineProperty15(this, "userManager", void 0);
-    _defineProperty15(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty15(this, "handleUserLeave", (user) => {
-      const cb = this.observers.get(user.id);
-      if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
-      }
-    });
-    _defineProperty15(this, "handleUserJoin", (user) => {
-      this.addObserve(user.id);
-    });
-    this.userManager = userManager;
-    this.requestUserMap = requestUserMap;
-    this.createModel(this.userManager.selfId);
-    this.userManager.userIdList().forEach((userId) => {
-      this.addObserve(userId);
-    });
-    this.userManager.on("join", this.handleUserJoin);
-    this.userManager.on("leave", this.handleUserLeave);
-  }
-  addObserve(userId) {
-    if (this.observers.has(userId)) {
-      return;
-    }
-    const observer = (evt) => {
-      this.handleUserPermissionChange(userId, evt);
-    };
-    this.observers.set(userId, observer);
-    this.requestUserMap(userId).observe(observer);
-  }
-  createModel(userId) {
-    const userMap = this.requestUserMap(userId);
-    if (!userMap.has("permission")) {
-      userMap.set("permission", 0);
-    }
-  }
-  handleUserPermissionChange(userId, evt) {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === "permission") {
-        if (value.action === "add" || value.action === "update") {
-          const newValue = this.requestUserMap(userId).get("permission");
-          this.emit("change", userId, this.resolveFlags(newValue), newValue);
-        }
-      }
-    }
-  }
+var WhiteboardPermissions = class extends import_forge_room3.AbstractApplicationPermissions {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
-  /**
-   * 获取权限列表组合对应的数值
-   * @param { string } userId 不传表示获取自己
-   */
-  getPermissionValue(userId) {
-    return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-  }
-  /**
-   * 获取权限列表
-   * @param {string=} userId 可选, 不传表示获取自己
-   */
-  getPermissionFlags(userId) {
-    const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    return this.resolveFlags(value);
-  }
-  /**
-   * 返回对应 userId 是否有相应权限
-   * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
-   * @param {WhiteboardPermissionFlag} flag
-   */
-  hasPermission(flag, userId) {
-    return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-  }
-  /**
-   * 添加权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
-   */
-  addPermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-  }
-  /**
-   * 移除权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
-   */
-  removePermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & ~flag);
-  }
 };
 
 // src/model/renderable/StraightLineModel.ts
 var Y11 = __toESM(require("yjs"), 1);
 var import_lodash7 = __toESM(require_lodash(), 1);
-function _defineProperty16(e, r, t) {
-  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty15(e, r, t) {
+  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey16(t) {
-  var i = _toPrimitive16(t, "string");
+function _toPropertyKey15(t) {
+  var i = _toPrimitive15(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive16(t, r) {
+function _toPrimitive15(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -27279,7 +27214,7 @@ function _toPrimitive16(t, r) {
 var StraightLineModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
-    _defineProperty16(this, "item", null);
+    _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -27287,6 +27222,8 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -27360,7 +27297,7 @@ var StraightLineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     if (!this.item) {
       return;
     }
@@ -27370,6 +27307,83 @@ var StraightLineModel = class extends ElementModel {
   }
 };
 
+// src/model/renderable/ImageModel.ts
+function _defineProperty16(e, r, t) {
+  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey16(t) {
+  var i = _toPrimitive16(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive16(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var ImageModel = class extends ElementModel {
+  get src() {
+    return this.root.get("src");
+  }
+  constructor(root, scope, imageSets) {
+    super(root, scope);
+    _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;
+  }
+};
+
 // src/model/RenderableModel.ts
 function _defineProperty17(e, r, t) {
   return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -27388,11 +27402,11 @@ function _toPrimitive17(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var RenderableModel = class extends import_eventemitter32.default {
+var RenderableModel = class extends import_eventemitter3.default {
   get uuid() {
-    return (0, import_uuid.v4)();
+    return (0, import_uuid.v4)().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -27403,6 +27417,7 @@ var RenderableModel = class extends import_eventemitter32.default {
     _defineProperty17(this, "maxIndex", -1);
     _defineProperty17(this, "hasPermission", void 0);
     _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "imageSets", void 0);
     _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
@@ -27418,6 +27433,7 @@ var RenderableModel = class extends import_eventemitter32.default {
         }
       }
     });
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27477,6 +27493,8 @@ var RenderableModel = class extends import_eventemitter32.default {
       model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, (uuid) => {
         this.removeElementItem(uuid);
       });
+    } else if (type === "image") {
+      model = new ImageModel(yMap, this.scope, this.imageSets);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
@@ -27509,10 +27527,26 @@ var RenderableModel = class extends import_eventemitter32.default {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      (0, import_forge_room4.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const model = new ImageModel(new Y12.Map(), this.scope, this.imageSets);
+    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;
+    this.addElementToDoc(model.root);
+  }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
@@ -27582,7 +27616,7 @@ var RenderableModel = class extends import_eventemitter32.default {
     return segmentsModel;
   }
   createSelector() {
-    let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    let _shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
@@ -27639,7 +27673,11 @@ var RenderableModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
+    (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
     this.elements.clear();
+    Array.from(this.elementModels.values()).forEach((model) => {
+      model.dispose();
+    });
   }
 };
 
@@ -27682,10 +27720,10 @@ var AnglePrecision = Deg2Rad(2);
 var Phi = 0.5 * (-1 + Math.sqrt(5));
 function DollarRecognizer() {
   this.Unistrokes = new Array(3);
-  this.Unistrokes[0] = new Unistroke("triangle", new Array(new Point(137, 139), new Point(135, 141), new Point(133, 144), new Point(132, 146), new Point(130, 149), new Point(128, 151), new Point(126, 155), new Point(123, 160), new Point(120, 166), new Point(116, 171), new Point(112, 177), new Point(107, 183), new Point(102, 188), new Point(100, 191), new Point(95, 195), new Point(90, 199), new Point(86, 203), new Point(82, 206), new Point(80, 209), new Point(75, 213), new Point(73, 213), new Point(70, 216), new Point(67, 219), new Point(64, 221), new Point(61, 223), new Point(60, 225), new Point(62, 226), new Point(65, 225), new Point(67, 226), new Point(74, 226), new Point(77, 227), new Point(85, 229), new Point(91, 230), new Point(99, 231), new Point(108, 232), new Point(116, 233), new Point(125, 233), new Point(134, 234), new Point(145, 233), new Point(153, 232), new Point(160, 233), new Point(170, 234), new Point(177, 235), new Point(179, 236), new Point(186, 237), new Point(193, 238), new Point(198, 239), new Point(200, 237), new Point(202, 239), new Point(204, 238), new Point(206, 234), new Point(205, 230), new Point(202, 222), new Point(197, 216), new Point(192, 207), new Point(186, 198), new Point(179, 189), new Point(174, 183), new Point(170, 178), new Point(164, 171), new Point(161, 168), new Point(154, 160), new Point(148, 155), new Point(143, 150), new Point(138, 148), new Point(136, 148)));
-  this.Unistrokes[1] = new Unistroke("rectangle", new Array(new Point(78, 149), new Point(78, 153), new Point(78, 157), new Point(78, 160), new Point(79, 162), new Point(79, 164), new Point(79, 167), new Point(79, 169), new Point(79, 173), new Point(79, 178), new Point(79, 183), new Point(80, 189), new Point(80, 193), new Point(80, 198), new Point(80, 202), new Point(81, 208), new Point(81, 210), new Point(81, 216), new Point(82, 222), new Point(82, 224), new Point(82, 227), new Point(83, 229), new Point(83, 231), new Point(85, 230), new Point(88, 232), new Point(90, 233), new Point(92, 232), new Point(94, 233), new Point(99, 232), new Point(102, 233), new Point(106, 233), new Point(109, 234), new Point(117, 235), new Point(123, 236), new Point(126, 236), new Point(135, 237), new Point(142, 238), new Point(145, 238), new Point(152, 238), new Point(154, 239), new Point(165, 238), new Point(174, 237), new Point(179, 236), new Point(186, 235), new Point(191, 235), new Point(195, 233), new Point(197, 233), new Point(200, 233), new Point(201, 235), new Point(201, 233), new Point(199, 231), new Point(198, 226), new Point(198, 220), new Point(196, 207), new Point(195, 195), new Point(195, 181), new Point(195, 173), new Point(195, 163), new Point(194, 155), new Point(192, 145), new Point(192, 143), new Point(192, 138), new Point(191, 135), new Point(191, 133), new Point(191, 130), new Point(190, 128), new Point(188, 129), new Point(186, 129), new Point(181, 132), new Point(173, 131), new Point(162, 131), new Point(151, 132), new Point(149, 132), new Point(138, 132), new Point(136, 132), new Point(122, 131), new Point(120, 131), new Point(109, 130), new Point(107, 130), new Point(90, 132), new Point(81, 133), new Point(76, 133)));
-  this.Unistrokes[2] = new Unistroke("circle", new Array(new Point(127, 141), new Point(124, 140), new Point(120, 139), new Point(118, 139), new Point(116, 139), new Point(111, 140), new Point(109, 141), new Point(104, 144), new Point(100, 147), new Point(96, 152), new Point(93, 157), new Point(90, 163), new Point(87, 169), new Point(85, 175), new Point(83, 181), new Point(82, 190), new Point(82, 195), new Point(83, 200), new Point(84, 205), new Point(88, 213), new Point(91, 216), new Point(96, 219), new Point(103, 222), new Point(108, 224), new Point(111, 224), new Point(120, 224), new Point(133, 223), new Point(142, 222), new Point(152, 218), new Point(160, 214), new Point(167, 210), new Point(173, 204), new Point(178, 198), new Point(179, 196), new Point(182, 188), new Point(182, 177), new Point(178, 167), new Point(170, 150), new Point(163, 138), new Point(152, 130), new Point(143, 129), new Point(140, 131), new Point(129, 136), new Point(126, 139)));
-  this.Unistrokes[3] = new Unistroke("arrow", new Array(new Point(68, 222), new Point(70, 220), new Point(73, 218), new Point(75, 217), new Point(77, 215), new Point(80, 213), new Point(82, 212), new Point(84, 210), new Point(87, 209), new Point(89, 208), new Point(92, 206), new Point(95, 204), new Point(101, 201), new Point(106, 198), new Point(112, 194), new Point(118, 191), new Point(124, 187), new Point(127, 186), new Point(132, 183), new Point(138, 181), new Point(141, 180), new Point(146, 178), new Point(154, 173), new Point(159, 171), new Point(161, 170), new Point(166, 167), new Point(168, 167), new Point(171, 166), new Point(174, 164), new Point(177, 162), new Point(180, 160), new Point(182, 158), new Point(183, 156), new Point(181, 154), new Point(178, 153), new Point(171, 153), new Point(164, 153), new Point(160, 153), new Point(150, 154), new Point(147, 155), new Point(141, 157), new Point(137, 158), new Point(135, 158), new Point(137, 158), new Point(140, 157), new Point(143, 156), new Point(151, 154), new Point(160, 152), new Point(170, 149), new Point(179, 147), new Point(185, 145), new Point(192, 144), new Point(196, 144), new Point(198, 144), new Point(200, 144), new Point(201, 147), new Point(199, 149), new Point(194, 157), new Point(191, 160), new Point(186, 167), new Point(180, 176), new Point(177, 179), new Point(171, 187), new Point(169, 189), new Point(165, 194), new Point(164, 196)));
+  this.Unistrokes[0] = new Unistroke("triangle", [new Point(137, 139), new Point(135, 141), new Point(133, 144), new Point(132, 146), new Point(130, 149), new Point(128, 151), new Point(126, 155), new Point(123, 160), new Point(120, 166), new Point(116, 171), new Point(112, 177), new Point(107, 183), new Point(102, 188), new Point(100, 191), new Point(95, 195), new Point(90, 199), new Point(86, 203), new Point(82, 206), new Point(80, 209), new Point(75, 213), new Point(73, 213), new Point(70, 216), new Point(67, 219), new Point(64, 221), new Point(61, 223), new Point(60, 225), new Point(62, 226), new Point(65, 225), new Point(67, 226), new Point(74, 226), new Point(77, 227), new Point(85, 229), new Point(91, 230), new Point(99, 231), new Point(108, 232), new Point(116, 233), new Point(125, 233), new Point(134, 234), new Point(145, 233), new Point(153, 232), new Point(160, 233), new Point(170, 234), new Point(177, 235), new Point(179, 236), new Point(186, 237), new Point(193, 238), new Point(198, 239), new Point(200, 237), new Point(202, 239), new Point(204, 238), new Point(206, 234), new Point(205, 230), new Point(202, 222), new Point(197, 216), new Point(192, 207), new Point(186, 198), new Point(179, 189), new Point(174, 183), new Point(170, 178), new Point(164, 171), new Point(161, 168), new Point(154, 160), new Point(148, 155), new Point(143, 150), new Point(138, 148), new Point(136, 148)]);
+  this.Unistrokes[1] = new Unistroke("rectangle", [new Point(78, 149), new Point(78, 153), new Point(78, 157), new Point(78, 160), new Point(79, 162), new Point(79, 164), new Point(79, 167), new Point(79, 169), new Point(79, 173), new Point(79, 178), new Point(79, 183), new Point(80, 189), new Point(80, 193), new Point(80, 198), new Point(80, 202), new Point(81, 208), new Point(81, 210), new Point(81, 216), new Point(82, 222), new Point(82, 224), new Point(82, 227), new Point(83, 229), new Point(83, 231), new Point(85, 230), new Point(88, 232), new Point(90, 233), new Point(92, 232), new Point(94, 233), new Point(99, 232), new Point(102, 233), new Point(106, 233), new Point(109, 234), new Point(117, 235), new Point(123, 236), new Point(126, 236), new Point(135, 237), new Point(142, 238), new Point(145, 238), new Point(152, 238), new Point(154, 239), new Point(165, 238), new Point(174, 237), new Point(179, 236), new Point(186, 235), new Point(191, 235), new Point(195, 233), new Point(197, 233), new Point(200, 233), new Point(201, 235), new Point(201, 233), new Point(199, 231), new Point(198, 226), new Point(198, 220), new Point(196, 207), new Point(195, 195), new Point(195, 181), new Point(195, 173), new Point(195, 163), new Point(194, 155), new Point(192, 145), new Point(192, 143), new Point(192, 138), new Point(191, 135), new Point(191, 133), new Point(191, 130), new Point(190, 128), new Point(188, 129), new Point(186, 129), new Point(181, 132), new Point(173, 131), new Point(162, 131), new Point(151, 132), new Point(149, 132), new Point(138, 132), new Point(136, 132), new Point(122, 131), new Point(120, 131), new Point(109, 130), new Point(107, 130), new Point(90, 132), new Point(81, 133), new Point(76, 133)]);
+  this.Unistrokes[2] = new Unistroke("circle", [new Point(127, 141), new Point(124, 140), new Point(120, 139), new Point(118, 139), new Point(116, 139), new Point(111, 140), new Point(109, 141), new Point(104, 144), new Point(100, 147), new Point(96, 152), new Point(93, 157), new Point(90, 163), new Point(87, 169), new Point(85, 175), new Point(83, 181), new Point(82, 190), new Point(82, 195), new Point(83, 200), new Point(84, 205), new Point(88, 213), new Point(91, 216), new Point(96, 219), new Point(103, 222), new Point(108, 224), new Point(111, 224), new Point(120, 224), new Point(133, 223), new Point(142, 222), new Point(152, 218), new Point(160, 214), new Point(167, 210), new Point(173, 204), new Point(178, 198), new Point(179, 196), new Point(182, 188), new Point(182, 177), new Point(178, 167), new Point(170, 150), new Point(163, 138), new Point(152, 130), new Point(143, 129), new Point(140, 131), new Point(129, 136), new Point(126, 139)]);
+  this.Unistrokes[3] = new Unistroke("arrow", [new Point(68, 222), new Point(70, 220), new Point(73, 218), new Point(75, 217), new Point(77, 215), new Point(80, 213), new Point(82, 212), new Point(84, 210), new Point(87, 209), new Point(89, 208), new Point(92, 206), new Point(95, 204), new Point(101, 201), new Point(106, 198), new Point(112, 194), new Point(118, 191), new Point(124, 187), new Point(127, 186), new Point(132, 183), new Point(138, 181), new Point(141, 180), new Point(146, 178), new Point(154, 173), new Point(159, 171), new Point(161, 170), new Point(166, 167), new Point(168, 167), new Point(171, 166), new Point(174, 164), new Point(177, 162), new Point(180, 160), new Point(182, 158), new Point(183, 156), new Point(181, 154), new Point(178, 153), new Point(171, 153), new Point(164, 153), new Point(160, 153), new Point(150, 154), new Point(147, 155), new Point(141, 157), new Point(137, 158), new Point(135, 158), new Point(137, 158), new Point(140, 157), new Point(143, 156), new Point(151, 154), new Point(160, 152), new Point(170, 149), new Point(179, 147), new Point(185, 145), new Point(192, 144), new Point(196, 144), new Point(198, 144), new Point(200, 144), new Point(201, 147), new Point(199, 149), new Point(194, 157), new Point(191, 160), new Point(186, 167), new Point(180, 176), new Point(177, 179), new Point(171, 187), new Point(169, 189), new Point(165, 194), new Point(164, 196)]);
   this.Recognize = function(points, useProtractor) {
     var t0 = Date.now();
     var candidate = new Unistroke("", points);
@@ -27746,7 +27784,7 @@ function RotateBy(points, radians) {
   var c = Centroid(points);
   var cos = Math.cos(radians);
   var sin = Math.sin(radians);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = (points[i].X - c.X) * cos - (points[i].Y - c.Y) * sin + c.X;
     var qy = (points[i].X - c.X) * sin + (points[i].Y - c.Y) * cos + c.Y;
@@ -27756,7 +27794,7 @@ function RotateBy(points, radians) {
 }
 function ScaleTo(points, size) {
   var B2 = BoundingBox(points);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = points[i].X * (size / B2.Width);
     var qy = points[i].Y * (size / B2.Height);
@@ -27766,7 +27804,7 @@ function ScaleTo(points, size) {
 }
 function TranslateTo(points, pt) {
   var c = Centroid(points);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = points[i].X + pt.X - c.X;
     var qy = points[i].Y + pt.Y - c.Y;
@@ -27776,14 +27814,14 @@ function TranslateTo(points, pt) {
 }
 function Vectorize(points) {
   var sum = 0;
-  var vector = new Array();
-  for (var i = 0; i < points.length; i++) {
+  var vector = [];
+  for (let i = 0; i < points.length; i++) {
     vector[vector.length] = points[i].X;
     vector[vector.length] = points[i].Y;
     sum += points[i].X * points[i].X + points[i].Y * points[i].Y;
   }
   var magnitude = Math.sqrt(sum);
-  for (var i = 0; i < vector.length; i++)
+  for (let i = 0; i < vector.length; i++)
     vector[i] /= magnitude;
   return vector;
 }
@@ -27937,17 +27975,35 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "pointCount", 0);
     this.tool.minDistance = 1;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createCurve(true);
   }
   onMouseDrag(event) {
     if (this.pointCount > 1024) {
       return;
     }
+    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      this.pointCount += 1;
-      this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      const len = this.elementModel.points.length;
+      let last = {
+        x: 0,
+        y: 0
+      };
+      if (len >= 2) {
+        last = {
+          x: this.elementModel.points[len - 2],
+          y: this.elementModel.points[len - 1]
+        };
+      }
+      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
+      if (dist >= MIN_DISTANCE) {
+        this.pointCount += 1;
+        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      }
     }
   }
   onMouseUp(event) {
@@ -28009,6 +28065,9 @@ var RectangleTool = class extends WhiteboardTool {
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createRectangle(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -28030,7 +28089,8 @@ var RectangleTool = class extends WhiteboardTool {
 };
 
 // src/model/ToolbarModel.ts
-var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room5 = require("@netless/forge-room");
 function _defineProperty21(e, r, t) {
   return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -28057,7 +28117,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends import_eventemitter33.default {
+var ToolbarModel = class extends import_eventemitter32.default {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -28126,6 +28186,10 @@ var ToolbarModel = class extends import_eventemitter33.default {
       }
     });
   }
+  dispose() {
+    (0, import_forge_room5.removeObserver)(this.root, this.handleRootUpdate);
+    this.removeAllListeners();
+  }
 };
 
 // src/tool/SelectorTool.ts
@@ -28159,6 +28223,9 @@ var SelectorTool = class extends WhiteboardTool {
   onMouseDown(event) {
     this.from = null;
     this.to = null;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createSelector();
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -28208,7 +28275,8 @@ var SelectorTool = class extends WhiteboardTool {
 
 // src/model/SelectElementsModel.ts
 var Y13 = __toESM(require("yjs"), 1);
-var import_eventemitter34 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_forge_room6 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -28239,7 +28307,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends import_eventemitter34.default {
+var SelectElementsModel = class extends import_eventemitter33.default {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -28255,13 +28323,17 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        this.observers.delete(user.id);
       }
     });
     _defineProperty23(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -28281,6 +28353,9 @@ var SelectElementsModel = class extends import_eventemitter34.default {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -28335,12 +28410,9 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     });
   }
   dispose() {
-    this.userManager.userIdList().forEach((userId) => {
-      const cb = this.observers.get(userId);
-      if (cb) {
-        this.requestUserMap(userId).unobserveDeep(cb);
-      }
-    });
+    for (const [key, value] of this.observers.entries()) {
+      (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -28348,10 +28420,10 @@ var SelectElementsModel = class extends import_eventemitter34.default {
 };
 
 // src/edit/Editor.ts
-var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter35 = __toESM(require("eventemitter3"), 1);
 
 // src/edit/TextEditor.ts
-var import_eventemitter35 = require("eventemitter3");
+var import_eventemitter34 = require("eventemitter3");
 function _defineProperty24(e, r, t) {
   return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -28369,7 +28441,7 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends import_eventemitter35.EventEmitter {
+var TextEditor = class extends import_eventemitter34.EventEmitter {
   constructor(camera) {
     super();
     _defineProperty24(this, "rootView", void 0);
@@ -28402,12 +28474,12 @@ var TextEditor = class extends import_eventemitter35.EventEmitter {
     });
     this.camera = camera;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = `position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;`;
+    this.rootView.style.cssText = "position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;";
     this.content = document.createElement("div");
     this.content.setAttribute("spellcheck", "false");
     this.content.textContent = "";
     this.content.setAttribute("contenteditable", "plaintext-only");
-    this.content.style.cssText = `white-space: nowrap;border:1px solid red;text-wrap:nowrap;caret-color:red;line-height:1.2em;position:absolute;z-index:2;color:transparent;outline:none;`;
+    this.content.style.cssText = "white-space: nowrap;border:1px solid red;text-wrap:nowrap;caret-color:red;line-height:1.2em;position:absolute;z-index:2;color:transparent;outline:none;";
     this.content.style.transformOrigin = "0 0";
     this.rootView.appendChild(this.content);
     this.content.addEventListener("input", this.handleContentInput);
@@ -28512,7 +28584,7 @@ var ANCHOR_STYLE = {
   b: "cursor:s-resize;bottom:-3px;left:50%;translate:-50%;",
   br: "cursor:se-resize;bottom:-3px;right:-3px"
 };
-var Bounds = class extends import_eventemitter36.default {
+var Bounds = class extends import_eventemitter35.default {
   get width() {
     return this.maxX - this.minX;
   }
@@ -28651,7 +28723,7 @@ var Bounds = class extends import_eventemitter36.default {
     this.maxY = maxY;
   }
 };
-var Editor = class extends import_eventemitter36.default {
+var Editor = class extends import_eventemitter35.default {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
     _defineProperty25(this, "rootView", void 0);
@@ -28752,7 +28824,7 @@ var Editor = class extends import_eventemitter36.default {
       }
       if (this.editMode === "matrix" && this.editAnchor && this.lastEditPoint) {
         const offsetX = evt.pageX - this.lastEditPoint.x;
-        let offsetY = evt.pageY - this.lastEditPoint.y;
+        const offsetY = evt.pageY - this.lastEditPoint.y;
         this.bounds.offsetBy(this.editAnchor, offsetX, offsetY, this.uniformScale ? this.aspectRatio : -1);
         this.lastEditPoint = {
           x: evt.pageX,
@@ -28777,7 +28849,7 @@ var Editor = class extends import_eventemitter36.default {
       }
       if (this.editMode === "translate" && this.lastEditPoint) {
         const offsetX = evt.pageX - this.lastEditPoint.x;
-        let offsetY = evt.pageY - this.lastEditPoint.y;
+        const offsetY = evt.pageY - this.lastEditPoint.y;
         this.bounds.translate(offsetX, offsetY);
         this.updateBoundsByShadow();
         this.lastEditPoint = {
@@ -28854,7 +28926,7 @@ var Editor = class extends import_eventemitter36.default {
     this.ctrlId = initConfig.ctrlId;
     this.ctrlNickName = initConfig.ctrlNickName;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = `position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);`;
+    this.rootView.style.cssText = "overflow:hidden;position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.frame = document.createElement("div");
     this.frame.style.position = "absolute";
     this.frame.style.padding = "8px";
@@ -28875,7 +28947,7 @@ var Editor = class extends import_eventemitter36.default {
     } else {
       this.title = document.createElement("div");
       this.title.textContent = `${this.ctrlNickName}`;
-      this.title.style.cssText = `color:#fff;font-size:12px;padding: 0.2em 0.4em;border-radius: 0.4em;position: absolute;top: 0%;left: 0;margin: -0.4em;transform: translate(-100%, -100%);`;
+      this.title.style.cssText = "color:#fff;font-size:12px;padding: 0.2em 0.4em;border-radius: 0.4em;position: absolute;top: 0%;left: 0;margin: -0.4em;transform: translate(-100%, -100%);";
       this.frame.appendChild(this.title);
       this.rootView.style.pointerEvents = "none";
     }
@@ -29047,7 +29119,9 @@ var Editor = class extends import_eventemitter36.default {
     this.targets = [];
     this.editorConfig = null;
     if (this.ctrlId !== this.viewerId) {
-      this.scope.project.view.off("frame", this.updateBounds);
+      if (this.scope.project.view) {
+        this.scope.project.view.off("frame", this.updateBounds);
+      }
     }
   }
   show() {
@@ -29106,7 +29180,7 @@ var TextTool = class extends WhiteboardTool {
   onMouseDown(event) {
     this.from = event.point.clone();
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp(event) {
     this.to = event.point.clone();
@@ -29118,6 +29192,9 @@ var TextTool = class extends WhiteboardTool {
     }
   }
   createPointEditor(x, y) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createPointText(x, y, true);
     if (this.elementModel === null) {
       return;
@@ -29158,10 +29235,10 @@ var TextTool = class extends WhiteboardTool {
 };
 
 // src/Camera.ts
-var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
 
 // src/Gesture.ts
-var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
 function _defineProperty27(e, r, t) {
   return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29179,7 +29256,7 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends import_eventemitter37.default {
+var Gesture = class extends import_eventemitter36.default {
   constructor(element, scope) {
     super();
     _defineProperty27(this, "element", void 0);
@@ -29243,6 +29320,7 @@ var Gesture = class extends import_eventemitter37.default {
 };
 
 // src/Camera.ts
+var import_forge_room7 = require("@netless/forge-room");
 function _defineProperty28(e, r, t) {
   return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29260,7 +29338,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends import_eventemitter38.default {
+var Camera = class extends import_eventemitter37.default {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -29316,13 +29394,16 @@ var Camera = class extends import_eventemitter38.default {
     _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), observer);
+      }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
@@ -29402,7 +29483,7 @@ var Camera = class extends import_eventemitter38.default {
     });
     this.maxScale = maxScale;
     this.bound = window.document.createElement("div");
-    this.bound.style.cssText = `transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`;
+    this.bound.style.cssText = "transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.initSize = initSize;
     this.hasPermission = hasPermission;
     this.paperSize = _paperSize;
@@ -29427,6 +29508,9 @@ var Camera = class extends import_eventemitter38.default {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(userId, evt);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), observer);
+      }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
     });
@@ -29463,7 +29547,7 @@ var Camera = class extends import_eventemitter38.default {
       this.bound.style.boxShadow = `inset 0px 0px 6px 2px ${this.boundaryColor}`;
       window.clearTimeout(this.boundTiemoutId);
       this.boundTiemoutId = window.setTimeout(() => {
-        this.bound.style.boxShadow = `none`;
+        this.bound.style.boxShadow = "none";
       }, 100);
     }
   }
@@ -29473,6 +29557,9 @@ var Camera = class extends import_eventemitter38.default {
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
+  getInherentScale() {
+    return this.inherentScale;
+  }
   getActiveMatrix() {
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     let matrixValue;
@@ -29615,6 +29702,19 @@ var Camera = class extends import_eventemitter38.default {
       y: 0
     };
   }
+  dispose() {
+    Array.from(this.observers.keys()).forEach((userId) => {
+      const cb = this.observers.get(userId);
+      if (cb) {
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), cb);
+      }
+    });
+    (0, import_forge_room7.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    this.gesture.removeAllListeners();
+    this.removeAllListeners();
+  }
 };
 
 // src/tool/EllipseTool.ts
@@ -29644,6 +29744,9 @@ var EllipseTool = class extends WhiteboardTool {
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createSegmentedPath("ellipse", true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -29695,6 +29798,9 @@ var TriangleTool = class extends WhiteboardTool {
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createTriangle(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -29716,7 +29822,7 @@ var TriangleTool = class extends WhiteboardTool {
 };
 
 // src/Whiteboard.ts
-var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
 function _defineProperty31(e, r, t) {
   return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29734,8 +29840,7 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends import_eventemitter39.default {
-  // public insertImage!: (src: string) => void;
+var Whiteboard = class extends import_eventemitter38.default {
   constructor(view) {
     super();
     _defineProperty31(this, "view", void 0);
@@ -29754,6 +29859,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
     _defineProperty31(this, "getElementAttribute", void 0);
     _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "removeElement", void 0);
     _defineProperty31(this, "getCurrentTool", void 0);
     _defineProperty31(this, "setCurrentTool", void 0);
     _defineProperty31(this, "setCanvasBackgroundColor", void 0);
@@ -29780,6 +29886,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "rasterizeElementsBounds", void 0);
     _defineProperty31(this, "rasterizeMaxBounds", void 0);
     _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
@@ -29811,8 +29918,11 @@ var EraserTool = class extends WhiteboardTool {
     this.trashedElementsModel = trashedElementsModel;
     this.tool.minDistance = 1;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createEraser();
   }
   onMouseDrag(event) {
@@ -29834,7 +29944,7 @@ var EraserTool = class extends WhiteboardTool {
       }
     });
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.modelGetter().removeElementItem(this.elementModel.uuid);
     }
@@ -29844,7 +29954,8 @@ var EraserTool = class extends WhiteboardTool {
 
 // src/model/TrashedElementsModel.ts
 var Y14 = __toESM(require("yjs"), 1);
-var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_forge_room8 = require("@netless/forge-room");
 function _defineProperty33(e, r, t) {
   return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29862,7 +29973,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends import_eventemitter310.default {
+var TrashedElementsModel = class extends import_eventemitter39.default {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -29878,13 +29989,16 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -29896,6 +30010,9 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), userId);
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -29950,12 +30067,9 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     });
   }
   dispose() {
-    this.userManager.userIdList().forEach((userId) => {
-      const cb = this.observers.get(userId);
-      if (cb) {
-        this.requestUserMap(userId).unobserveDeep(cb);
-      }
-    });
+    for (const [key, value] of this.observers.entries()) {
+      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -29987,8 +30101,11 @@ var LaserPointerTool = class extends WhiteboardTool {
     _defineProperty34(this, "pointCount", 0);
     this.tool.minDistance = 5;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createLaserPointer();
   }
   onMouseDrag(event) {
@@ -30000,7 +30117,7 @@ var LaserPointerTool = class extends WhiteboardTool {
       this.elementModel.appendPoints([event.point.x, event.point.y]);
     }
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.elementModel.beginRemoveAnimate();
     }
@@ -30008,8 +30125,8 @@ var LaserPointerTool = class extends WhiteboardTool {
 };
 
 // src/model/PageModel.ts
-var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room = require("@netless/forge-room");
+var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_forge_room9 = require("@netless/forge-room");
 function _defineProperty35(e, r, t) {
   return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30027,7 +30144,7 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends import_eventemitter311.default {
+var PageModel = class extends import_eventemitter310.default {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
     _defineProperty35(this, "whiteboardAttrsMap", void 0);
@@ -30039,7 +30156,7 @@ var PageModel = class extends import_eventemitter311.default {
     _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -30053,7 +30170,7 @@ var PageModel = class extends import_eventemitter311.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room9.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -30122,11 +30239,11 @@ var PageModel = class extends import_eventemitter311.default {
     }
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return false;
     }
     if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
-      console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
+      console.warn("cannot modify pages without WhiteboardPermissionFlag.mainView.");
       return false;
     }
     return true;
@@ -30178,21 +30295,31 @@ var PageModel = class extends import_eventemitter311.default {
       }
     }
   }
+  dispose() {
+    for (const entry of this.observers.entries()) {
+      const [userId, observer] = entry;
+      (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
+    }
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room9.removeObserver)(this.pageMap, this.handlePageMapChange);
+  }
 };
 
 // src/utils/async.ts
 var delay = (value) => new Promise((resolve) => setTimeout(resolve, value));
 async function waitUntil(fn, timeout) {
-  let start = Date.now();
+  const start = Date.now();
   while (!fn() && Date.now() - start < timeout) {
     await delay(50);
-    start = Date.now();
   }
 }
 
 // src/IndexedNavigation.ts
-var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
+var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
 function _defineProperty36(e, r, t) {
   return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30210,19 +30337,19 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends import_eventemitter312.default {
+var IndexedNavigation = class extends import_eventemitter311.default {
   get idList() {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
   get head() {
-    let headId = Object.keys(this.list).find((key) => {
+    const headId = Object.keys(this.list).find((key) => {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room2.log)(`indexed navigation confusion`, {
+      (0, import_forge_room10.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
-      throw new Error(`indexed navigation confusion`);
+      throw new Error("indexed navigation confusion");
     }
     return headId;
   }
@@ -30243,7 +30370,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     _defineProperty36(this, "indexedPageMap", void 0);
     _defineProperty36(this, "list", {});
     _defineProperty36(this, "hasPermission", void 0);
-    _defineProperty36(this, "handleIndexedPageMapUpdate", (evt) => {
+    _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);
@@ -30298,8 +30425,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
   initIndexed() {
     return new Promise((resolve) => {
       setTimeout(() => {
+        this.pageModel.addPage("_i_");
         if (this.pageModel.pageList().length === 0) {
-          this.pageModel.addPage("_i_");
           resolve(true);
         } else {
           resolve(false);
@@ -30308,19 +30435,22 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     });
   }
   /**
-   * 获取总页数
-   * @returns {number}
-   */
+     * 获取总页数
+     * @returns {number}
+     */
   get pageCount() {
     return this.idList.length;
   }
   /**
-   * 获取当前页索引
-   */
+     * 获取当前页索引
+     */
   get currentPageIndex() {
     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;
@@ -30336,9 +30466,9 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return i;
   }
   /**
-   * 获取指定索引对应的 pageId
-   * @param {number} index
-   */
+     * 获取指定索引对应的 pageId
+     * @param {number} index
+     */
   getPageId(index) {
     const firstKey = this.head;
     if (firstKey) {
@@ -30360,20 +30490,20 @@ var IndexedNavigation = class extends import_eventemitter312.default {
   modifyDetect() {
     const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return false;
     }
     if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
-      console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
+      console.warn("cannot modify pages without WhiteboardPermissionFlag.mainView.");
       return false;
     }
     return true;
   }
   /**
-   * 在尾部插入新页面
-   * @param {boolean=} goto 是否跳转到新页面, 默认 true
-   * @return 总页数
-   */
+     * 在尾部插入新页面
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
   pushPage() {
     let goto = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
     this.indexedPageMap.doc.transact(() => {
@@ -30402,11 +30532,11 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return this.pageCount;
   }
   /**
-   * 在 after 之后插入新页面
-   * @param {number} after 在此页之后插入
-   * @param {boolean=} goto 是否跳转到新页面, 默认 true
-   * @return 总页数
-   */
+     * 在 after 之后插入新页面
+     * @param {number} after 在此页之后插入
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
   insertPage(after) {
     let goto = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
     const afterPageId = this.getPageId(after);
@@ -30415,7 +30545,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     }
     const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return this.pageCount;
     }
     const prev = this.list[afterPageId];
@@ -30458,8 +30588,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return this.pageCount;
   }
   /**
-   * 跳转至上一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至上一页, 并返回跳转后的页面索引.
+     */
   prevPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -30471,8 +30601,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return nextIndex;
   }
   /**
-   * 跳转至下一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至下一页, 并返回跳转后的页面索引.
+     */
   nextPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -30484,16 +30614,14 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return nextIndex;
   }
   /**
-   * 删除指定页面
-   * @param {number} index
-   */
+     * 删除指定页面
+     * @param {number} index
+     */
   removePage(index) {
     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);
@@ -30533,10 +30661,15 @@ var IndexedNavigation = class extends import_eventemitter312.default {
       this.pageModel.gotoPage(targetId);
     }
   }
+  dispose() {
+    (0, import_forge_room11.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    this.pageModel.off("switchPage");
+    this.pageModel.off("pagesChange");
+  }
 };
 
 // src/utils/ShadowEmitter.ts
-var import_eventemitter313 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
 function _defineProperty37(e, r, t) {
   return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30554,7 +30687,7 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends import_eventemitter313.default {
+var ShadowEmitter = class extends import_eventemitter312.default {
   constructor(userMap) {
     super();
     _defineProperty37(this, "userMap", void 0);
@@ -30595,6 +30728,9 @@ var StraightLineTool = class extends WhiteboardTool {
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createStraightLine(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -30657,7 +30793,20 @@ var GrabTool = class extends WhiteboardTool {
   }
 };
 
-// src/WhiteboardApplication.ts
+// src/tool/PointerTool.ts
+var PointerTool = class extends WhiteboardTool {
+  constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
+    super(enableToolEvent, modelGetter, shadowEmitter, scope);
+  }
+  onMouseDown(_event) {
+  }
+  onMouseDrag(_event) {
+  }
+  onMouseUp() {
+  }
+};
+
+// src/SequenceExecutor.ts
 function _defineProperty40(e, r, t) {
   return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30675,8 +30824,56 @@ function _toPrimitive40(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
+var SequenceExecutor = class {
+  constructor() {
+    _defineProperty40(this, "tasks", []);
+    _defineProperty40(this, "isRunning", false);
+  }
+  addTask(task) {
+    this.tasks.push(task);
+    if (!this.isRunning) {
+      this.execute();
+    }
+  }
+  async execute() {
+    if (this.isRunning) {
+      return;
+    }
+    this.isRunning = true;
+    while (this.tasks.length > 0) {
+      const task = this.tasks.shift();
+      if (task) {
+        try {
+          await task();
+        } catch (e) {
+        }
+      }
+    }
+    this.isRunning = false;
+  }
+};
+
+// src/WhiteboardApplication.ts
+var import_forge_room13 = require("@netless/forge-room");
+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 _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive41(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 WHITEBOARD_APP_NAME = "whiteboard";
-var WhiteboardApplication = class extends import_forge_room3.AbstractApplication {
+var WhiteboardApplication = class extends import_forge_room12.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -30688,43 +30885,46 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     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, "linkTarget", null);
-    _defineProperty40(this, "enableToolEvent", () => {
+    _defineProperty41(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty41(this, "emitter", void 0);
+    _defineProperty41(this, "toolbarModel", void 0);
+    _defineProperty41(this, "selectElementsModel", void 0);
+    _defineProperty41(this, "trashedElementsModel", void 0);
+    _defineProperty41(this, "pageModel", void 0);
+    _defineProperty41(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty41(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty41(this, "imageSets", document.createElement("div"));
+    _defineProperty41(this, "rootElement", document.createElement("div"));
+    _defineProperty41(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty41(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty41(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty41(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty41(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty41(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty41(this, "shadowEmitter", void 0);
+    _defineProperty41(this, "tools", void 0);
+    _defineProperty41(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty41(this, "camera", void 0);
+    _defineProperty41(this, "resizeObserver", void 0);
+    _defineProperty41(this, "option", void 0);
+    _defineProperty41(this, "permissions", void 0);
+    _defineProperty41(this, "inputType", "any");
+    _defineProperty41(this, "isPenEvent", false);
+    _defineProperty41(this, "hasPenInput", null);
+    _defineProperty41(this, "disableViewModelUpdate", false);
+    _defineProperty41(this, "internalResizeObserver", true);
+    _defineProperty41(this, "sequenceExecutor", new SequenceExecutor());
+    _defineProperty41(this, "linkTarget", null);
+    _defineProperty41(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty40(this, "handlePageSwitch", (pageId) => {
-      for (const editor of this.editors.values()) {
-        editor.hidden();
-      }
-      this.selectElementsModel.clearSelectElementForSelf();
-      waitUntil(() => this.layers.has(pageId), 3e3).then(() => {
+    _defineProperty41(this, "handlePageSwitch", (pageId) => {
+      this.sequenceExecutor.addTask(async () => {
+        for (const editor of this.editors.values()) {
+          editor.hidden();
+        }
+        this.selectElementsModel.clearSelectElementForSelf();
+        await waitUntil(() => this.layers.has(pageId), 1e3);
         if (this.layers.has(pageId)) {
           for (const entry of this.layers.entries()) {
             entry[1].off("elementInsert", this.handleElementInsert);
@@ -30736,6 +30936,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           renderableModel.on("elementRemove", this.handleElementRemove);
           renderableModel.on("elementClear", this.handleElementClear);
           renderableModel.flushRenderables();
+          this.paperScope.project.activeLayer.data.pageId = pageId;
           const others = this.userManager.userIdList().filter((v) => v !== this.userId);
           for (const other of others) {
             if (this.userMap(other).get(WhiteboardKeys.currentPage) === pageId) {
@@ -30745,9 +30946,11 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
               }
             }
           }
+        } else {
+          console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
-      });
-      waitUntil(() => this.undoManagers.has(pageId), 3e3).then(() => {
+        await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
           for (const entry of this.undoManagers.entries()) {
             entry[1].off("stack-item-added", this.handleStackItemAdded);
@@ -30755,29 +30958,32 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           }
           this.undoManagers.get(pageId).on("stack-item-added", this.handleStackItemAdded);
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
+        } else {
+          console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
+        this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+        this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
-      this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
-      this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "hasPermission", (flag) => {
+    _defineProperty41(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty40(this, "handleStackItemAdded", () => {
+    _defineProperty41(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", () => {
+    _defineProperty41(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleLayersChange", (ids) => {
+    _defineProperty41(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.hasPermission);
           this.layers.set(id, renderableModel);
         }
         if (!this.undoManagers.has(id)) {
@@ -30788,7 +30994,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           this.undoManagers.set(id, undoManager);
         }
       }
-      for (let entry of this.layers.entries()) {
+      for (const entry of this.layers.entries()) {
         if (ids.indexOf(entry[0]) < 0) {
           const renderableModel = this.layers.get(entry[0]);
           this.layers.delete(entry[0]);
@@ -30804,17 +31010,17 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       }
     });
-    _defineProperty40(this, "getCurrentRenderableModel", () => {
-      let layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+    _defineProperty41(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", () => {
+    _defineProperty41(this, "handleElementClear", () => {
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty40(this, "handleElementInsert", (elements) => {
+    _defineProperty41(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -30826,7 +31032,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty40(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty41(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -30837,11 +31043,11 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty40(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty41(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty40(this, "handleElementsTrash", (userId, elements) => {
+    _defineProperty41(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)) {
@@ -30854,7 +31060,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       });
     });
-    _defineProperty40(this, "handleElementsSelect", (userId, elements) => {
+    _defineProperty41(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, {
@@ -30886,7 +31092,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       }).filter((v) => !!v);
       editor.setTargets(elementModels);
       if (elementModels.length === 1) {
-        let model = elementModels[0];
+        const model = elementModels[0];
         if (model.item) {
           const topLeft = this.paperScope.project.view.projectToView(model.item.bounds.topLeft);
           const bottomRight = this.paperScope.project.view.projectToView(model.item.bounds.bottomRight);
@@ -30897,7 +31103,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty40(this, "handleLinkedMapChange", (evt) => {
+    _defineProperty41(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);
@@ -30914,7 +31120,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       }
     });
-    _defineProperty40(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+    _defineProperty41(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
       if (this.option.width > 0 && this.option.height > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
@@ -30930,9 +31136,14 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.camera.triggerZoom();
       }
     });
+    window.__wb = this;
     requestAnimationFrameHook(this.paperScope);
     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) {
@@ -30994,7 +31205,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31005,7 +31216,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31020,7 +31231,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31032,6 +31243,30 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+          src
+        }, "warning");
+        return;
+      }
+      let targetPageId = pageId;
+      if (!targetPageId) {
+        targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
+      }
+      if (!targetPageId) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -31047,7 +31282,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -31098,12 +31333,11 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.camera.reset();
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room3.log)("WhiteboardApplicationError", {
+      (0, import_forge_room12.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
     });
-    const that = this;
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -31200,6 +31434,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
     });
+    this.permissions.setPermission(WhiteboardPermissionFlag.all);
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
@@ -31252,6 +31487,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       return this.userMap(userId);
     }, this.hasPermission);
     this.tools = {
+      pointer: new PointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       curve: new CurveTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       rectangle: new RectangleTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       selector: new SelectorTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.selectElementsModel),
@@ -31267,6 +31503,11 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.toolbarModel.on("update", (style) => {
       if (this.tools[style.tool]) {
         this.paperScope.tool = this.tools[style.tool].tool;
+        if (style.tool === "pointer") {
+          this.rootElement.style.pointerEvents = "none";
+        } else {
+          this.rootElement.style.pointerEvents = "auto";
+        }
       } else {
         this.emitter.emit("error", 300001, `${style.tool} not supported`);
       }
@@ -31276,7 +31517,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
     } else {
       this.paperScope.tool = this.tools["curve"].tool;
-      (0, import_forge_room3.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      (0, import_forge_room12.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
     }
     this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
     this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -31445,7 +31686,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       if (renderableModel.elementModels.has(key)) {
         elementModel = renderableModel.elementModels.get(key) ?? null;
       } else {
-        let elementMap = renderableModel.elements.get(key);
+        const elementMap = renderableModel.elements.get(key);
         if (elementMap) {
           elementModel = renderableModel.convertToModel(elementMap);
         }
@@ -31521,7 +31762,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
   }
   unlink() {
     if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
+      (0, import_forge_room13.removeObserver)(this.linkTarget, this.handleLinkedMapChange);
     }
   }
   setViewSize(width, height) {
@@ -31532,6 +31773,9 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     const size = this.paperScope.view.viewSize;
     return [size.width, size.height];
   }
+  getInherentScale() {
+    return this.camera.getInherentScale();
+  }
   updateInternalResizeObserverStatus(value) {
     this.internalResizeObserver = value;
   }
@@ -31551,9 +31795,27 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.shadowScope.project.clear();
     this.snapshotScope.project.clear();
     this.resizeObserver.disconnect();
+    this.unlink();
+    for (const entry of this.undoManagers.entries()) {
+      entry[1].off("stack-item-added", this.handleStackItemAdded);
+      entry[1].off("stack-item-popped", this.handleStackItemPopped);
+    }
+    for (const entry of this.layers.entries()) {
+      entry[1].dispose();
+      entry[1].removeAllListeners();
+    }
+    this.camera.dispose();
+    this.pageModel.dispose();
+    this.pageModel.removeAllListeners();
+    for (const entry of this.editors.entries()) {
+      entry[1].dispose();
+    }
+    this.toolbarModel.dispose();
+    this.emitter.indexedNavigation.dispose();
+    this.permissions.dispose();
   }
 };
-_defineProperty40(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty41(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 /*! Bundled license information:
 
 paper/dist/paper-full.js: