@netless/forge-whiteboard 0.1.15 → 0.1.16

package/dist/whiteboard.js

@@ -25371,14 +25371,15 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WhiteboardApplication.ts
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var Y15 = __toESM(require("yjs"), 1);
 var import_paper = __toESM(require_paper_full(), 1);
 
 // src/model/RenderableModel.ts
 var Y12 = __toESM(require("yjs"), 1);
-var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
+var import_forge_room4 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25536,6 +25537,7 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 // src/model/renderable/ElementModel.ts
 var Y = __toESM(require("yjs"), 1);
+var import_forge_room = require("@netless/forge-room");
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -25720,7 +25722,7 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-    this.root.unobserveDeep(this.handlePropChange);
+    (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
 _defineProperty(ElementModel, "KEYS", {
@@ -25795,12 +25797,15 @@ var CurveModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
     _defineProperty3(this, "item", null);
+    _defineProperty3(this, "debugPath", void 0);
+    _defineProperty3(this, "debug", false);
     if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
     if (!this.root.has("points")) {
       this.root.set("points", new Y2.Array());
     }
+    this.debugPath = new scope.Path();
   }
   average(a2, b2) {
     return (a2 + b2) / 2;
@@ -25809,23 +25814,23 @@ var CurveModel = class extends ElementModel {
     const groupPoints = (0, import_lodash.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
+      smoothing: 0.5,
+      thinning: -0.5,
       streamline: 0.5,
       simulatePressure: true,
       start: {
-        taper: 10,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 10,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const groupPoints = (0, import_lodash.chunk)(this.points, 2);
-    return groupPoints.map((_ref) => {
+    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
+    return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
     }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
@@ -25859,27 +25864,41 @@ var CurveModel = class extends ElementModel {
     }
     return path;
   }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+  updateDebugPath() {
+    this.debugPath = new this.scope.Path();
+    const points = (0, import_lodash.chunk)(this.points, 2);
+    for (let i = 0, len = points.length; i < len; i++) {
+      const point = new this.scope.Point(points[i][0], points[i][1]);
+      if (i === 0) {
+        this.debugPath.moveTo(point);
+      } else {
+        this.debugPath.lineTo(point);
+      }
+      this.debugPath.strokeWidth = 1;
+      this.debugPath.strokeColor = new this.scope.Color(1, 0, 0, 1);
+    }
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    if (this.debug) {
+      this.debugPath.remove();
+      this.updateDebugPath();
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
-    this.item.simplify(2.5);
+    this.item.addSegments(path.segments);
+    if (this.debug) {
+      this.item.addChild(this.debugPath);
+    }
   }
   createPaperItem() {
     this.item = new this.scope.Path();
-    this.item.strokeCap = "round";
-    this.item.strokeJoin = "round";
-    this.item.strokeScaling = false;
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
+    this.onVectorUpdate();
   }
   editorConfig() {
     return new EditorConfig();
@@ -25889,8 +25908,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -25900,6 +25919,8 @@ var CurveModel = class extends ElementModel {
     if (key === "strokeColor") {
       this.item.strokeColor = new this.scope.Color(this.strokeColor);
       this.item.fillColor = new this.scope.Color(this.strokeColor);
+    } else if (key === "strokeWidth") {
+      this.onVectorUpdate();
     }
   }
   subDispose() {
@@ -26429,6 +26450,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 var Y6 = __toESM(require("yjs"), 1);
+var import_forge_room2 = require("@netless/forge-room");
 function _defineProperty10(e, r, t) {
   return (r = _toPropertyKey10(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -26498,7 +26520,7 @@ var PointTextModel = class extends ElementModel {
     }
   }
   subDispose() {
-    this.root.unobserve(this.handleTextPropChange);
+    (0, import_forge_room2.removeObserver)(this.root, this.handleTextPropChange);
   }
   getInternalMeasurement() {
     if (!this.item) {
@@ -27145,24 +27167,7 @@ var LaserPointerModel = class extends ElementModel {
 };
 
 // src/WhitePermissions.ts
-var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
-function _defineProperty15(e, r, t) {
-  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
-}
-function _toPropertyKey15(t) {
-  var i = _toPrimitive15(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive15(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
+var import_forge_room3 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27175,59 +27180,7 @@ var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
 }({});
-var WhiteboardPermissions = class extends import_eventemitter3.default {
-  constructor(userManager, requestUserMap) {
-    super();
-    _defineProperty15(this, "requestUserMap", void 0);
-    _defineProperty15(this, "userManager", void 0);
-    _defineProperty15(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty15(this, "handleUserLeave", (user) => {
-      const cb = this.observers.get(user.id);
-      if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
-      }
-    });
-    _defineProperty15(this, "handleUserJoin", (user) => {
-      this.addObserve(user.id);
-    });
-    this.userManager = userManager;
-    this.requestUserMap = requestUserMap;
-    this.createModel(this.userManager.selfId);
-    this.userManager.userIdList().forEach((userId) => {
-      this.addObserve(userId);
-    });
-    this.userManager.on("join", this.handleUserJoin);
-    this.userManager.on("leave", this.handleUserLeave);
-  }
-  addObserve(userId) {
-    if (this.observers.has(userId)) {
-      return;
-    }
-    const observer = (evt) => {
-      this.handleUserPermissionChange(userId, evt);
-    };
-    if (this.observers.has(userId)) {
-      this.requestUserMap(userId).unobserve(this.observers.get(userId));
-    }
-    this.observers.set(userId, observer);
-    this.requestUserMap(userId).observe(observer);
-  }
-  createModel(userId) {
-    const userMap = this.requestUserMap(userId);
-    if (!userMap.has("permission")) {
-      userMap.set("permission", 0);
-    }
-  }
-  handleUserPermissionChange(userId, evt) {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === "permission") {
-        if (value.action === "add" || value.action === "update") {
-          const newValue = this.requestUserMap(userId).get("permission");
-          this.emit("change", userId, this.resolveFlags(newValue), newValue);
-        }
-      }
-    }
-  }
+var WhiteboardPermissions = class extends import_forge_room3.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -27236,70 +27189,19 @@ var WhiteboardPermissions = class extends import_eventemitter3.default {
   resolveFlags(value) {
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
-  /**
-     * 获取权限列表组合对应的数值
-     * @param { string } userId 不传表示获取自己
-     */
-  getPermissionValue(userId) {
-    return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-  }
-  /**
-     * 获取权限列表
-     * @param {string=} userId 可选, 不传表示获取自己
-     */
-  getPermissionFlags(userId) {
-    const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    return this.resolveFlags(value);
-  }
-  /**
-     * 返回对应 userId 是否有相应权限
-     * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
-     * @param {WhiteboardPermissionFlag} flag
-     */
-  hasPermission(flag, userId) {
-    return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-  }
-  /**
-     * 添加权限
-     * @param {WhiteboardPermissionFlag} flag 权限标记
-     * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
-     */
-  addPermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-  }
-  /**
-     * 移除权限
-     * @param {WhiteboardPermissionFlag} flag 权限标记
-     * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
-     */
-  removePermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & ~flag);
-  }
-  dispose() {
-    this.userManager.off("join", this.handleUserJoin);
-    this.userManager.off("leave", this.handleUserLeave);
-    this.observers.forEach((cb, userId) => {
-      this.requestUserMap(userId).unobserve(cb);
-    });
-    this.observers.clear();
-  }
 };
 
 // src/model/renderable/StraightLineModel.ts
 var Y11 = __toESM(require("yjs"), 1);
 var import_lodash7 = __toESM(require_lodash(), 1);
-function _defineProperty16(e, r, t) {
-  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty15(e, r, t) {
+  return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey16(t) {
-  var i = _toPrimitive16(t, "string");
+function _toPropertyKey15(t) {
+  var i = _toPrimitive15(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive16(t, r) {
+function _toPrimitive15(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -27312,7 +27214,7 @@ function _toPrimitive16(t, r) {
 var StraightLineModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
-    _defineProperty16(this, "item", null);
+    _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -27405,6 +27307,83 @@ var StraightLineModel = class extends ElementModel {
   }
 };
 
+// src/model/renderable/ImageModel.ts
+function _defineProperty16(e, r, t) {
+  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey16(t) {
+  var i = _toPrimitive16(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive16(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var ImageModel = class extends ElementModel {
+  get src() {
+    return this.root.get("src");
+  }
+  constructor(root, scope, imageSets) {
+    super(root, scope);
+    _defineProperty16(this, "item", null);
+    _defineProperty16(this, "imageSets", void 0);
+    this.imageSets = imageSets;
+    if (!this.root.has("type")) {
+      this.root.set("type", "image");
+    }
+    this.root.set(ElementModel.KEYS.shadow, "");
+  }
+  subDispose() {
+    const img = this.imageSets.querySelector(`[id='${this.uuid}']`);
+    if (img) {
+      img.remove();
+    }
+  }
+  createPaperItem() {
+    if (this.item) {
+      return;
+    }
+    if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
+      const img = document.createElement("img");
+      img.src = this.src;
+      img.id = this.uuid;
+      this.imageSets.appendChild(img);
+    }
+    this.item = new this.scope.Raster(this.uuid);
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    this.item.matrix = matrix;
+  }
+  onVectorUpdate() {
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    if (this.item) {
+      this.item.matrix = matrix;
+    }
+  }
+  vectorKeys() {
+    return [];
+  }
+  styleKeys() {
+    return {
+      include: [],
+      exclude: ["dashArray", "strokeColor", "fillColor", "strokeWidth"]
+    };
+  }
+  onStyleKeyUpdate(_key) {
+  }
+  editorConfig() {
+    const cfg = new EditorConfig();
+    cfg.resizeModel = () => "four-corner";
+    cfg.uniformScale = () => true;
+    return cfg;
+  }
+};
+
 // src/model/RenderableModel.ts
 function _defineProperty17(e, r, t) {
   return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -27423,11 +27402,11 @@ function _toPrimitive17(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var RenderableModel = class extends import_eventemitter32.default {
+var RenderableModel = class extends import_eventemitter3.default {
   get uuid() {
-    return (0, import_uuid.v4)();
+    return (0, import_uuid.v4)().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -27438,6 +27417,7 @@ var RenderableModel = class extends import_eventemitter32.default {
     _defineProperty17(this, "maxIndex", -1);
     _defineProperty17(this, "hasPermission", void 0);
     _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "imageSets", void 0);
     _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
@@ -27453,6 +27433,7 @@ var RenderableModel = class extends import_eventemitter32.default {
         }
       }
     });
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27512,6 +27493,8 @@ var RenderableModel = class extends import_eventemitter32.default {
       model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, (uuid) => {
         this.removeElementItem(uuid);
       });
+    } else if (type === "image") {
+      model = new ImageModel(yMap, this.scope, this.imageSets);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
@@ -27544,10 +27527,26 @@ var RenderableModel = class extends import_eventemitter32.default {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      (0, import_forge_room4.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    const model = new ImageModel(new Y12.Map(), this.scope, this.imageSets);
+    model.root.set("src", src);
+    const initMatrix = new this.scope.Matrix();
+    const center = this.scope.project.view.center;
+    initMatrix.translate({
+      x: center.x,
+      y: center.y
+    });
+    model.appendPointsMatrix(initMatrix);
+    model.ownerId = this.userManager.selfId;
+    this.addElementToDoc(model.root);
+  }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
@@ -27674,7 +27673,7 @@ var RenderableModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    this.elements.unobserve(this.onElementsChange);
+    (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
     this.elements.clear();
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
@@ -27987,9 +27986,24 @@ var CurveTool = class extends WhiteboardTool {
     if (this.pointCount > 1024) {
       return;
     }
+    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      this.pointCount += 1;
-      this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      const len = this.elementModel.points.length;
+      let last = {
+        x: 0,
+        y: 0
+      };
+      if (len >= 2) {
+        last = {
+          x: this.elementModel.points[len - 2],
+          y: this.elementModel.points[len - 1]
+        };
+      }
+      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
+      if (dist >= MIN_DISTANCE) {
+        this.pointCount += 1;
+        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      }
     }
   }
   onMouseUp(event) {
@@ -28075,7 +28089,8 @@ var RectangleTool = class extends WhiteboardTool {
 };
 
 // src/model/ToolbarModel.ts
-var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room5 = require("@netless/forge-room");
 function _defineProperty21(e, r, t) {
   return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -28102,7 +28117,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends import_eventemitter33.default {
+var ToolbarModel = class extends import_eventemitter32.default {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -28172,7 +28187,7 @@ var ToolbarModel = class extends import_eventemitter33.default {
     });
   }
   dispose() {
-    this.root.unobserve(this.handleRootUpdate);
+    (0, import_forge_room5.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -28260,7 +28275,8 @@ var SelectorTool = class extends WhiteboardTool {
 
 // src/model/SelectElementsModel.ts
 var Y13 = __toESM(require("yjs"), 1);
-var import_eventemitter34 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_forge_room6 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -28291,7 +28307,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends import_eventemitter34.default {
+var SelectElementsModel = class extends import_eventemitter33.default {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -28307,7 +28323,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
@@ -28316,7 +28332,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -28338,7 +28354,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -28395,7 +28411,7 @@ var SelectElementsModel = class extends import_eventemitter34.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -28404,10 +28420,10 @@ var SelectElementsModel = class extends import_eventemitter34.default {
 };
 
 // src/edit/Editor.ts
-var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter35 = __toESM(require("eventemitter3"), 1);
 
 // src/edit/TextEditor.ts
-var import_eventemitter35 = require("eventemitter3");
+var import_eventemitter34 = require("eventemitter3");
 function _defineProperty24(e, r, t) {
   return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -28425,7 +28441,7 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends import_eventemitter35.EventEmitter {
+var TextEditor = class extends import_eventemitter34.EventEmitter {
   constructor(camera) {
     super();
     _defineProperty24(this, "rootView", void 0);
@@ -28568,7 +28584,7 @@ var ANCHOR_STYLE = {
   b: "cursor:s-resize;bottom:-3px;left:50%;translate:-50%;",
   br: "cursor:se-resize;bottom:-3px;right:-3px"
 };
-var Bounds = class extends import_eventemitter36.default {
+var Bounds = class extends import_eventemitter35.default {
   get width() {
     return this.maxX - this.minX;
   }
@@ -28707,7 +28723,7 @@ var Bounds = class extends import_eventemitter36.default {
     this.maxY = maxY;
   }
 };
-var Editor = class extends import_eventemitter36.default {
+var Editor = class extends import_eventemitter35.default {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
     _defineProperty25(this, "rootView", void 0);
@@ -28910,7 +28926,7 @@ var Editor = class extends import_eventemitter36.default {
     this.ctrlId = initConfig.ctrlId;
     this.ctrlNickName = initConfig.ctrlNickName;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = "position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.rootView.style.cssText = "overflow:hidden;position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.frame = document.createElement("div");
     this.frame.style.position = "absolute";
     this.frame.style.padding = "8px";
@@ -29219,10 +29235,10 @@ var TextTool = class extends WhiteboardTool {
 };
 
 // src/Camera.ts
-var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
 
 // src/Gesture.ts
-var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
 function _defineProperty27(e, r, t) {
   return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29240,7 +29256,7 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends import_eventemitter37.default {
+var Gesture = class extends import_eventemitter36.default {
   constructor(element, scope) {
     super();
     _defineProperty27(this, "element", void 0);
@@ -29304,6 +29320,7 @@ var Gesture = class extends import_eventemitter37.default {
 };
 
 // src/Camera.ts
+var import_forge_room7 = require("@netless/forge-room");
 function _defineProperty28(e, r, t) {
   return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29321,7 +29338,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends import_eventemitter38.default {
+var Camera = class extends import_eventemitter37.default {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -29377,7 +29394,7 @@ var Camera = class extends import_eventemitter38.default {
     _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
@@ -29385,7 +29402,7 @@ var Camera = class extends import_eventemitter38.default {
         this.handleViewMatrixUpdate(user.id, evt);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserve(observer);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), observer);
       }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
@@ -29492,7 +29509,7 @@ var Camera = class extends import_eventemitter38.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserve(observer);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -29689,10 +29706,10 @@ var Camera = class extends import_eventemitter38.default {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        this.requestUserMap(userId).unobserve(cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    this.whiteboardAttrsMap.unobserve(this.handleMainCameraChange);
+    (0, import_forge_room7.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -29805,7 +29822,7 @@ var TriangleTool = class extends WhiteboardTool {
 };
 
 // src/Whiteboard.ts
-var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
 function _defineProperty31(e, r, t) {
   return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29823,8 +29840,7 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends import_eventemitter39.default {
-  // public insertImage!: (src: string) => void;
+var Whiteboard = class extends import_eventemitter38.default {
   constructor(view) {
     super();
     _defineProperty31(this, "view", void 0);
@@ -29843,6 +29859,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
     _defineProperty31(this, "getElementAttribute", void 0);
     _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "removeElement", void 0);
     _defineProperty31(this, "getCurrentTool", void 0);
     _defineProperty31(this, "setCurrentTool", void 0);
     _defineProperty31(this, "setCanvasBackgroundColor", void 0);
@@ -29869,6 +29886,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "rasterizeElementsBounds", void 0);
     _defineProperty31(this, "rasterizeMaxBounds", void 0);
     _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
@@ -29936,7 +29954,8 @@ var EraserTool = class extends WhiteboardTool {
 
 // src/model/TrashedElementsModel.ts
 var Y14 = __toESM(require("yjs"), 1);
-var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_forge_room8 = require("@netless/forge-room");
 function _defineProperty33(e, r, t) {
   return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29954,7 +29973,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends import_eventemitter310.default {
+var TrashedElementsModel = class extends import_eventemitter39.default {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -29970,7 +29989,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
@@ -29978,7 +29997,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -29992,7 +30011,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -30049,7 +30068,7 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -30106,8 +30125,8 @@ var LaserPointerTool = class extends WhiteboardTool {
 };
 
 // src/model/PageModel.ts
-var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room = require("@netless/forge-room");
+var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_forge_room9 = require("@netless/forge-room");
 function _defineProperty35(e, r, t) {
   return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30125,7 +30144,7 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends import_eventemitter311.default {
+var PageModel = class extends import_eventemitter310.default {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
     _defineProperty35(this, "whiteboardAttrsMap", void 0);
@@ -30137,7 +30156,7 @@ var PageModel = class extends import_eventemitter311.default {
     _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -30151,7 +30170,7 @@ var PageModel = class extends import_eventemitter311.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room9.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -30279,12 +30298,12 @@ var PageModel = class extends import_eventemitter311.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      this.requestUserMap(userId).unobserve(observer);
+      (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    this.whiteboardAttrsMap.unobserve(this.handleMainPageChange);
-    this.pageMap.unobserve(this.handlePageMapChange);
+    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room9.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -30298,8 +30317,9 @@ async function waitUntil(fn, timeout) {
 }
 
 // src/IndexedNavigation.ts
-var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
+var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
 function _defineProperty36(e, r, t) {
   return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30317,7 +30337,7 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends import_eventemitter312.default {
+var IndexedNavigation = class extends import_eventemitter311.default {
   get idList() {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
@@ -30326,7 +30346,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room2.log)("indexed navigation confusion", {
+      (0, import_forge_room10.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -30428,6 +30448,9 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     const userPageId = this.userMap.get(WhiteboardKeys.currentPage);
     return this.getPageIndex(userPageId);
   }
+  get currentPageId() {
+    return this.userMap.get(WhiteboardKeys.currentPage);
+  }
   getPageIndex(pageId) {
     let i = 0;
     let currentId = this.head;
@@ -30598,9 +30621,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     if (this.pageCount <= 1) {
       return this.pageCount;
     }
-    const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
-    if (cameraMode !== "main") {
-      console.warn("cannot modify pages in non-main view mode.");
+    if (!this.modifyDetect()) {
       return this.pageCount;
     }
     const targetId = this.getPageId(index);
@@ -30641,14 +30662,14 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     }
   }
   dispose() {
-    this.indexedPageMap.unobserve(this.handleIndexedPageMapUpdate);
+    (0, import_forge_room11.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
 };
 
 // src/utils/ShadowEmitter.ts
-var import_eventemitter313 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
 function _defineProperty37(e, r, t) {
   return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30666,7 +30687,7 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends import_eventemitter313.default {
+var ShadowEmitter = class extends import_eventemitter312.default {
   constructor(userMap) {
     super();
     _defineProperty37(this, "userMap", void 0);
@@ -30833,6 +30854,7 @@ var SequenceExecutor = class {
 };
 
 // src/WhiteboardApplication.ts
+var import_forge_room13 = require("@netless/forge-room");
 function _defineProperty41(e, r, t) {
   return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30851,7 +30873,7 @@ function _toPrimitive41(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
-var WhiteboardApplication = class extends import_forge_room3.AbstractApplication {
+var WhiteboardApplication = class extends import_forge_room12.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -30871,6 +30893,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     _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"));
@@ -30925,7 +30948,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          (0, import_forge_room3.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -30937,7 +30960,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          (0, import_forge_room3.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
         this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
@@ -30960,7 +30983,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         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)) {
@@ -31113,10 +31136,14 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.camera.triggerZoom();
       }
     });
+    window.__wb = this;
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
     const that = this;
     this.rootElement.setAttribute("data-forge-app", "whiteboard");
+    this.imageSets.style.display = "none";
+    this.imageSets.setAttribute("data-image-sets", "");
+    this.rootElement.appendChild(this.imageSets);
     document.body.addEventListener("pointerdown", (evt) => {
       this.isPenEvent = evt.pointerType === "pen";
       if (evt.pointerType === "pen" && this.hasPenInput === null) {
@@ -31178,7 +31205,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31189,7 +31216,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31204,7 +31231,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room3.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warning");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -31216,6 +31243,30 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+          src
+        }, "warning");
+        return;
+      }
+      let targetPageId = pageId;
+      if (!targetPageId) {
+        targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
+      }
+      if (!targetPageId) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -31231,7 +31282,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -31282,7 +31333,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.camera.reset();
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room3.log)("WhiteboardApplicationError", {
+      (0, import_forge_room12.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
@@ -31383,6 +31434,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
     });
+    this.permissions.setPermission(WhiteboardPermissionFlag.all);
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
@@ -31465,7 +31517,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
     } else {
       this.paperScope.tool = this.tools["curve"].tool;
-      (0, import_forge_room3.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+      (0, import_forge_room12.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
     }
     this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
     this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -31710,7 +31762,7 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
   }
   unlink() {
     if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
+      (0, import_forge_room13.removeObserver)(this.linkTarget, this.handleLinkedMapChange);
     }
   }
   setViewSize(width, height) {