@netless/forge-whiteboard 0.1.14 → 0.1.16

package/dist/whiteboard.esm.js

@@ -25362,13 +25362,14 @@ var require_lodash = __commonJS({
 
 // src/WhiteboardApplication.ts
 var import_paper = __toESM(require_paper_full(), 1);
-import { AbstractApplication, log as log3 } from "@netless/forge-room";
+import { AbstractApplication, log as log4 } from "@netless/forge-room";
 import * as Y15 from "yjs";
 
 // src/model/RenderableModel.ts
 import * as Y12 from "yjs";
-import EventEmitter2 from "eventemitter3";
+import EventEmitter from "eventemitter3";
 import { v4 as uuidv4 } from "uuid";
+import { log, removeObserver as removeObserver2 } from "@netless/forge-room";
 
 // src/model/renderable/CurveModel.ts
 import * as Y2 from "yjs";
@@ -25526,6 +25527,7 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 // src/model/renderable/ElementModel.ts
 import * as Y from "yjs";
+import { removeDeepObserver } from "@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;
 }
@@ -25708,6 +25710,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();
+    removeDeepObserver(this.root, this.handlePropChange);
+  }
 };
 _defineProperty(ElementModel, "KEYS", {
   index: "index",
@@ -25781,12 +25787,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;
@@ -25795,23 +25804,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) => {
@@ -25845,27 +25854,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();
@@ -25875,8 +25898,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -25886,8 +25909,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
@@ -25922,14 +25949,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) {
@@ -25955,7 +25980,7 @@ var SelectorModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26007,7 +26032,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]();
@@ -26060,6 +26085,8 @@ var SegmentsModel = class extends ElementModel {
       this.root.set("points", new Y4.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -26094,7 +26121,7 @@ var SegmentsModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26188,6 +26215,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();
@@ -26263,6 +26293,8 @@ var LineModel = class extends ElementModel {
       this.root.set("tailArrow", "normal");
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -26299,7 +26331,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];
     }
@@ -26353,7 +26385,7 @@ var LineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     this.onVectorUpdate();
   }
 };
@@ -26408,6 +26440,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 import * as Y6 from "yjs";
+import { removeObserver } from "@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;
 }
@@ -26476,6 +26509,9 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
+  subDispose() {
+    removeObserver(this.root, this.handleTextPropChange);
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -26581,6 +26617,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";
@@ -26637,7 +26675,7 @@ var TriangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26676,6 +26714,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);
@@ -26807,7 +26847,7 @@ var RectangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 
@@ -26948,9 +26988,11 @@ var EraserModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
 };
 
 // src/model/renderable/LaserPointerModel.ts
@@ -27107,30 +27149,15 @@ var LaserPointerModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
 };
 
 // src/WhitePermissions.ts
-import EventEmitter from "eventemitter3";
-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);
-}
+import { AbstractApplicationPermissions } from "@netless/forge-room";
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27143,120 +27170,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 EventEmitter {
-  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 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 import_lodash7 = __toESM(require_lodash(), 1);
 import * as Y11 from "yjs";
-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) {
@@ -27269,7 +27204,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");
     }
@@ -27277,6 +27212,8 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -27350,7 +27287,7 @@ var StraightLineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     if (!this.item) {
       return;
     }
@@ -27360,6 +27297,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;
@@ -27378,11 +27392,11 @@ function _toPrimitive17(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var RenderableModel = class extends EventEmitter2 {
+var RenderableModel = class extends EventEmitter {
   get uuid() {
-    return uuidv4();
+    return uuidv4().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -27393,6 +27407,7 @@ var RenderableModel = class extends EventEmitter2 {
     _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") {
@@ -27408,6 +27423,7 @@ var RenderableModel = class extends EventEmitter2 {
         }
       }
     });
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27467,6 +27483,8 @@ var RenderableModel = class extends EventEmitter2 {
       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;
@@ -27499,10 +27517,26 @@ var RenderableModel = class extends EventEmitter2 {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      log("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const 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()) {
@@ -27572,7 +27606,7 @@ var RenderableModel = class extends EventEmitter2 {
     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;
     }
@@ -27629,7 +27663,11 @@ var RenderableModel = class extends EventEmitter2 {
     });
   }
   dispose() {
+    removeObserver2(this.elements, this.onElementsChange);
     this.elements.clear();
+    Array.from(this.elementModels.values()).forEach((model) => {
+      model.dispose();
+    });
   }
 };
 
@@ -27672,10 +27710,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);
@@ -27736,7 +27774,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;
@@ -27746,7 +27784,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);
@@ -27756,7 +27794,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;
@@ -27766,14 +27804,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;
 }
@@ -27927,17 +27965,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) {
@@ -27999,6 +28055,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();
@@ -28020,7 +28079,8 @@ var RectangleTool = class extends WhiteboardTool {
 };
 
 // src/model/ToolbarModel.ts
-import EventEmitter3 from "eventemitter3";
+import EventEmitter2 from "eventemitter3";
+import { removeObserver as removeObserver3 } from "@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;
 }
@@ -28047,7 +28107,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends EventEmitter3 {
+var ToolbarModel = class extends EventEmitter2 {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -28116,6 +28176,10 @@ var ToolbarModel = class extends EventEmitter3 {
       }
     });
   }
+  dispose() {
+    removeObserver3(this.root, this.handleRootUpdate);
+    this.removeAllListeners();
+  }
 };
 
 // src/tool/SelectorTool.ts
@@ -28149,6 +28213,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();
@@ -28198,7 +28265,8 @@ var SelectorTool = class extends WhiteboardTool {
 
 // src/model/SelectElementsModel.ts
 import * as Y13 from "yjs";
-import EventEmitter4 from "eventemitter3";
+import EventEmitter3 from "eventemitter3";
+import { removeDeepObserver as removeDeepObserver2 } from "@netless/forge-room";
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -28229,7 +28297,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends EventEmitter4 {
+var SelectElementsModel = class extends EventEmitter3 {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -28245,13 +28313,17 @@ var SelectElementsModel = class extends EventEmitter4 {
     _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        removeDeepObserver2(this.requestUserMap(user.id), cb);
+        this.observers.delete(user.id);
       }
     });
     _defineProperty23(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        removeDeepObserver2(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -28271,6 +28343,9 @@ var SelectElementsModel = class extends EventEmitter4 {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        removeDeepObserver2(this.requestUserMap(userId), this.observers.get(userId));
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -28325,12 +28400,9 @@ var SelectElementsModel = class extends EventEmitter4 {
     });
   }
   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()) {
+      removeDeepObserver2(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -28338,10 +28410,10 @@ var SelectElementsModel = class extends EventEmitter4 {
 };
 
 // src/edit/Editor.ts
-import EventEmitter6 from "eventemitter3";
+import EventEmitter5 from "eventemitter3";
 
 // src/edit/TextEditor.ts
-import { EventEmitter as EventEmitter5 } from "eventemitter3";
+import { EventEmitter as EventEmitter4 } from "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;
 }
@@ -28359,7 +28431,7 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends EventEmitter5 {
+var TextEditor = class extends EventEmitter4 {
   constructor(camera) {
     super();
     _defineProperty24(this, "rootView", void 0);
@@ -28392,12 +28464,12 @@ var TextEditor = class extends EventEmitter5 {
     });
     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);
@@ -28502,7 +28574,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 EventEmitter6 {
+var Bounds = class extends EventEmitter5 {
   get width() {
     return this.maxX - this.minX;
   }
@@ -28641,7 +28713,7 @@ var Bounds = class extends EventEmitter6 {
     this.maxY = maxY;
   }
 };
-var Editor = class extends EventEmitter6 {
+var Editor = class extends EventEmitter5 {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
     _defineProperty25(this, "rootView", void 0);
@@ -28742,7 +28814,7 @@ var Editor = class extends EventEmitter6 {
       }
       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,
@@ -28767,7 +28839,7 @@ var Editor = class extends EventEmitter6 {
       }
       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 = {
@@ -28844,7 +28916,7 @@ var Editor = class extends EventEmitter6 {
     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";
@@ -28865,7 +28937,7 @@ var Editor = class extends EventEmitter6 {
     } 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";
     }
@@ -29037,7 +29109,9 @@ var Editor = class extends EventEmitter6 {
     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() {
@@ -29096,7 +29170,7 @@ var TextTool = class extends WhiteboardTool {
   onMouseDown(event) {
     this.from = event.point.clone();
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp(event) {
     this.to = event.point.clone();
@@ -29108,6 +29182,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;
@@ -29148,10 +29225,10 @@ var TextTool = class extends WhiteboardTool {
 };
 
 // src/Camera.ts
-import EventEmitter8 from "eventemitter3";
+import EventEmitter7 from "eventemitter3";
 
 // src/Gesture.ts
-import EventEmitter7 from "eventemitter3";
+import EventEmitter6 from "eventemitter3";
 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;
 }
@@ -29169,7 +29246,7 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends EventEmitter7 {
+var Gesture = class extends EventEmitter6 {
   constructor(element, scope) {
     super();
     _defineProperty27(this, "element", void 0);
@@ -29233,6 +29310,7 @@ var Gesture = class extends EventEmitter7 {
 };
 
 // src/Camera.ts
+import { removeObserver as removeObserver4 } from "@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;
 }
@@ -29250,7 +29328,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends EventEmitter8 {
+var Camera = class extends EventEmitter7 {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -29306,13 +29384,16 @@ var Camera = class extends EventEmitter8 {
     _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        removeObserver4(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
+      if (this.observers.has(user.id)) {
+        removeObserver4(this.requestUserMap(user.id), observer);
+      }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
@@ -29392,7 +29473,7 @@ var Camera = class extends EventEmitter8 {
     });
     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;
@@ -29417,6 +29498,9 @@ var Camera = class extends EventEmitter8 {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(userId, evt);
       };
+      if (this.observers.has(userId)) {
+        removeObserver4(this.requestUserMap(userId), observer);
+      }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
     });
@@ -29453,7 +29537,7 @@ var Camera = class extends EventEmitter8 {
       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);
     }
   }
@@ -29463,6 +29547,9 @@ var Camera = class extends EventEmitter8 {
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
+  getInherentScale() {
+    return this.inherentScale;
+  }
   getActiveMatrix() {
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     let matrixValue;
@@ -29605,6 +29692,19 @@ var Camera = class extends EventEmitter8 {
       y: 0
     };
   }
+  dispose() {
+    Array.from(this.observers.keys()).forEach((userId) => {
+      const cb = this.observers.get(userId);
+      if (cb) {
+        removeObserver4(this.requestUserMap(userId), cb);
+      }
+    });
+    removeObserver4(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
@@ -29634,6 +29734,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();
@@ -29685,6 +29788,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();
@@ -29706,7 +29812,7 @@ var TriangleTool = class extends WhiteboardTool {
 };
 
 // src/Whiteboard.ts
-import EventEmitter9 from "eventemitter3";
+import EventEmitter8 from "eventemitter3";
 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;
 }
@@ -29724,8 +29830,7 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends EventEmitter9 {
-  // public insertImage!: (src: string) => void;
+var Whiteboard = class extends EventEmitter8 {
   constructor(view) {
     super();
     _defineProperty31(this, "view", void 0);
@@ -29744,6 +29849,7 @@ var Whiteboard = class extends EventEmitter9 {
     _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);
@@ -29770,6 +29876,7 @@ var Whiteboard = class extends EventEmitter9 {
     _defineProperty31(this, "rasterizeElementsBounds", void 0);
     _defineProperty31(this, "rasterizeMaxBounds", void 0);
     _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
@@ -29801,8 +29908,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) {
@@ -29824,7 +29934,7 @@ var EraserTool = class extends WhiteboardTool {
       }
     });
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.modelGetter().removeElementItem(this.elementModel.uuid);
     }
@@ -29834,7 +29944,8 @@ var EraserTool = class extends WhiteboardTool {
 
 // src/model/TrashedElementsModel.ts
 import * as Y14 from "yjs";
-import EventEmitter10 from "eventemitter3";
+import EventEmitter9 from "eventemitter3";
+import { removeDeepObserver as removeDeepObserver3 } from "@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;
 }
@@ -29852,7 +29963,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends EventEmitter10 {
+var TrashedElementsModel = class extends EventEmitter9 {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -29868,13 +29979,16 @@ var TrashedElementsModel = class extends EventEmitter10 {
     _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        removeDeepObserver3(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        removeDeepObserver3(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -29886,6 +30000,9 @@ var TrashedElementsModel = class extends EventEmitter10 {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        removeDeepObserver3(this.requestUserMap(userId), userId);
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -29940,12 +30057,9 @@ var TrashedElementsModel = class extends EventEmitter10 {
     });
   }
   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()) {
+      removeDeepObserver3(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -29977,8 +30091,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) {
@@ -29990,7 +30107,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();
     }
@@ -29998,8 +30115,8 @@ var LaserPointerTool = class extends WhiteboardTool {
 };
 
 // src/model/PageModel.ts
-import EventEmitter11 from "eventemitter3";
-import { log } from "@netless/forge-room";
+import EventEmitter10 from "eventemitter3";
+import { log as log2, removeObserver as removeObserver5 } from "@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;
 }
@@ -30017,7 +30134,7 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends EventEmitter11 {
+var PageModel = class extends EventEmitter10 {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
     _defineProperty35(this, "whiteboardAttrsMap", void 0);
@@ -30029,7 +30146,7 @@ var PageModel = class extends EventEmitter11 {
     _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        removeObserver5(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -30043,7 +30160,7 @@ var PageModel = class extends EventEmitter11 {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                log(`main page {${targetPage}} not found.`, {}, "error");
+                log2(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -30112,11 +30229,11 @@ var PageModel = class extends EventEmitter11 {
     }
     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;
@@ -30168,21 +30285,31 @@ var PageModel = class extends EventEmitter11 {
       }
     }
   }
+  dispose() {
+    for (const entry of this.observers.entries()) {
+      const [userId, observer] = entry;
+      removeObserver5(this.requestUserMap(userId), observer);
+    }
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    removeObserver5(this.whiteboardAttrsMap, this.handleMainPageChange);
+    removeObserver5(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
-import EventEmitter12 from "eventemitter3";
-import { log as log2 } from "@netless/forge-room";
+import EventEmitter11 from "eventemitter3";
+import { log as log3 } from "@netless/forge-room";
+import { removeObserver as removeObserver6 } from "@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;
 }
@@ -30200,19 +30327,19 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends EventEmitter12 {
+var IndexedNavigation = class extends EventEmitter11 {
   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) {
-      log2(`indexed navigation confusion`, {
+      log3("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
-      throw new Error(`indexed navigation confusion`);
+      throw new Error("indexed navigation confusion");
     }
     return headId;
   }
@@ -30233,7 +30360,7 @@ var IndexedNavigation = class extends EventEmitter12 {
     _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);
@@ -30288,8 +30415,8 @@ var IndexedNavigation = class extends EventEmitter12 {
   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);
@@ -30298,19 +30425,22 @@ var IndexedNavigation = class extends EventEmitter12 {
     });
   }
   /**
-   * 获取总页数
-   * @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;
@@ -30326,9 +30456,9 @@ var IndexedNavigation = class extends EventEmitter12 {
     return i;
   }
   /**
-   * 获取指定索引对应的 pageId
-   * @param {number} index
-   */
+     * 获取指定索引对应的 pageId
+     * @param {number} index
+     */
   getPageId(index) {
     const firstKey = this.head;
     if (firstKey) {
@@ -30350,20 +30480,20 @@ var IndexedNavigation = class extends EventEmitter12 {
   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(() => {
@@ -30392,11 +30522,11 @@ var IndexedNavigation = class extends EventEmitter12 {
     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);
@@ -30405,7 +30535,7 @@ var IndexedNavigation = class extends EventEmitter12 {
     }
     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];
@@ -30448,8 +30578,8 @@ var IndexedNavigation = class extends EventEmitter12 {
     return this.pageCount;
   }
   /**
-   * 跳转至上一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至上一页, 并返回跳转后的页面索引.
+     */
   prevPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -30461,8 +30591,8 @@ var IndexedNavigation = class extends EventEmitter12 {
     return nextIndex;
   }
   /**
-   * 跳转至下一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至下一页, 并返回跳转后的页面索引.
+     */
   nextPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -30474,16 +30604,14 @@ var IndexedNavigation = class extends EventEmitter12 {
     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);
@@ -30523,10 +30651,15 @@ var IndexedNavigation = class extends EventEmitter12 {
       this.pageModel.gotoPage(targetId);
     }
   }
+  dispose() {
+    removeObserver6(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    this.pageModel.off("switchPage");
+    this.pageModel.off("pagesChange");
+  }
 };
 
 // src/utils/ShadowEmitter.ts
-import EventEmitter13 from "eventemitter3";
+import EventEmitter12 from "eventemitter3";
 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;
 }
@@ -30544,7 +30677,7 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends EventEmitter13 {
+var ShadowEmitter = class extends EventEmitter12 {
   constructor(userMap) {
     super();
     _defineProperty37(this, "userMap", void 0);
@@ -30585,6 +30718,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();
@@ -30647,7 +30783,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;
 }
@@ -30665,6 +30814,54 @@ 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
+import { removeObserver as removeObserver7 } from "@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 AbstractApplication {
   get undoManager() {
@@ -30678,43 +30875,46 @@ var WhiteboardApplication = class extends 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);
@@ -30726,6 +30926,7 @@ var WhiteboardApplication = class extends 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) {
@@ -30735,9 +30936,11 @@ var WhiteboardApplication = class extends AbstractApplication {
               }
             }
           }
+        } else {
+          console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
+          log4(`[@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);
@@ -30745,29 +30948,32 @@ var WhiteboardApplication = class extends 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`);
+          log4(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
+        this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+        this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
-      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)) {
@@ -30778,7 +30984,7 @@ var WhiteboardApplication = class extends 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]);
@@ -30794,17 +31000,17 @@ var WhiteboardApplication = class extends 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;
@@ -30816,7 +31022,7 @@ var WhiteboardApplication = class extends 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;
@@ -30827,11 +31033,11 @@ var WhiteboardApplication = class extends 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)) {
@@ -30844,7 +31050,7 @@ var WhiteboardApplication = class extends 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, {
@@ -30876,7 +31082,7 @@ var WhiteboardApplication = class extends 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);
@@ -30887,7 +31093,7 @@ var WhiteboardApplication = class extends 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);
@@ -30904,7 +31110,7 @@ var WhiteboardApplication = class extends 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);
@@ -30920,9 +31126,14 @@ var WhiteboardApplication = class extends 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) {
@@ -30984,7 +31195,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -30995,7 +31206,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31010,7 +31221,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        log3("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        log4("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31022,6 +31233,30 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        log4("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+          src
+        }, "warning");
+        return;
+      }
+      let targetPageId = pageId;
+      if (!targetPageId) {
+        targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
+      }
+      if (!targetPageId) {
+        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        log4("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -31037,7 +31272,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -31088,12 +31323,11 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.camera.reset();
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      log3("WhiteboardApplicationError", {
+      log4("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
     });
-    const that = this;
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -31190,6 +31424,7 @@ var WhiteboardApplication = class extends 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;
@@ -31242,6 +31477,7 @@ var WhiteboardApplication = class extends 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),
@@ -31257,6 +31493,11 @@ var WhiteboardApplication = class extends 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`);
       }
@@ -31266,7 +31507,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
     } else {
       this.paperScope.tool = this.tools["curve"].tool;
-      log3(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      log4(`${this.toolbarModel.currentTool} not supported, backup to curve`);
     }
     this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
     this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -31435,7 +31676,7 @@ var WhiteboardApplication = class extends 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);
         }
@@ -31511,7 +31752,7 @@ var WhiteboardApplication = class extends AbstractApplication {
   }
   unlink() {
     if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
+      removeObserver7(this.linkTarget, this.handleLinkedMapChange);
     }
   }
   setViewSize(width, height) {
@@ -31522,6 +31763,9 @@ var WhiteboardApplication = class extends AbstractApplication {
     const size = this.paperScope.view.viewSize;
     return [size.width, size.height];
   }
+  getInherentScale() {
+    return this.camera.getInherentScale();
+  }
   updateInternalResizeObserverStatus(value) {
     this.internalResizeObserver = value;
   }
@@ -31541,9 +31785,27 @@ var WhiteboardApplication = class extends 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);
 export {
   Whiteboard,
   WhiteboardApplication,