@netless/forge-whiteboard 0.1.15 → 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;
 }
@@ -25710,7 +25712,7 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-    this.root.unobserveDeep(this.handlePropChange);
+    removeDeepObserver(this.root, this.handlePropChange);
   }
 };
 _defineProperty(ElementModel, "KEYS", {
@@ -25785,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;
@@ -25799,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) => {
@@ -25849,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();
@@ -25879,8 +25898,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -25890,6 +25909,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() {
@@ -26419,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;
 }
@@ -26488,7 +26510,7 @@ var PointTextModel = class extends ElementModel {
     }
   }
   subDispose() {
-    this.root.unobserve(this.handleTextPropChange);
+    removeObserver(this.root, this.handleTextPropChange);
   }
   getInternalMeasurement() {
     if (!this.item) {
@@ -27135,24 +27157,7 @@ var LaserPointerModel = class extends ElementModel {
 };
 
 // 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";
@@ -27165,59 +27170,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 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);
-    };
-    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 AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -27226,70 +27179,19 @@ var WhiteboardPermissions = class extends EventEmitter {
   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 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) {
@@ -27302,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");
     }
@@ -27395,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;
@@ -27413,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);
@@ -27428,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") {
@@ -27443,6 +27423,7 @@ var RenderableModel = class extends EventEmitter2 {
         }
       }
     });
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27502,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;
@@ -27534,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()) {
@@ -27664,7 +27663,7 @@ var RenderableModel = class extends EventEmitter2 {
     });
   }
   dispose() {
-    this.elements.unobserve(this.onElementsChange);
+    removeObserver2(this.elements, this.onElementsChange);
     this.elements.clear();
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
@@ -27977,9 +27976,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) {
@@ -28065,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;
 }
@@ -28092,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);
   }
@@ -28162,7 +28177,7 @@ var ToolbarModel = class extends EventEmitter3 {
     });
   }
   dispose() {
-    this.root.unobserve(this.handleRootUpdate);
+    removeObserver3(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -28250,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 = {
@@ -28281,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);
   }
@@ -28297,7 +28313,7 @@ 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);
       }
     });
@@ -28306,7 +28322,7 @@ var SelectElementsModel = class extends EventEmitter4 {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        removeDeepObserver2(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -28328,7 +28344,7 @@ var SelectElementsModel = class extends EventEmitter4 {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        removeDeepObserver2(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -28385,7 +28401,7 @@ var SelectElementsModel = class extends EventEmitter4 {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      removeDeepObserver2(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -28394,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;
 }
@@ -28415,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);
@@ -28558,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;
   }
@@ -28697,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);
@@ -28900,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";
@@ -29209,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;
 }
@@ -29230,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);
@@ -29294,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;
 }
@@ -29311,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]);
@@ -29367,7 +29384,7 @@ 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) => {
@@ -29375,7 +29392,7 @@ var Camera = class extends EventEmitter8 {
         this.handleViewMatrixUpdate(user.id, evt);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserve(observer);
+        removeObserver4(this.requestUserMap(user.id), observer);
       }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
@@ -29482,7 +29499,7 @@ var Camera = class extends EventEmitter8 {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserve(observer);
+        removeObserver4(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -29679,10 +29696,10 @@ var Camera = class extends EventEmitter8 {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        this.requestUserMap(userId).unobserve(cb);
+        removeObserver4(this.requestUserMap(userId), cb);
       }
     });
-    this.whiteboardAttrsMap.unobserve(this.handleMainCameraChange);
+    removeObserver4(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -29795,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;
 }
@@ -29813,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);
@@ -29833,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);
@@ -29859,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;
   }
 };
@@ -29926,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;
 }
@@ -29944,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);
   }
@@ -29960,7 +29979,7 @@ 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) => {
@@ -29968,7 +29987,7 @@ var TrashedElementsModel = class extends EventEmitter10 {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+        removeDeepObserver3(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -29982,7 +30001,7 @@ var TrashedElementsModel = class extends EventEmitter10 {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+        removeDeepObserver3(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -30039,7 +30058,7 @@ var TrashedElementsModel = class extends EventEmitter10 {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      this.requestUserMap(key).unobserveDeep(value);
+      removeDeepObserver3(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -30096,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;
 }
@@ -30115,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);
@@ -30127,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) => {
@@ -30141,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);
@@ -30269,12 +30288,12 @@ var PageModel = class extends EventEmitter11 {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      this.requestUserMap(userId).unobserve(observer);
+      removeObserver5(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    this.whiteboardAttrsMap.unobserve(this.handleMainPageChange);
-    this.pageMap.unobserve(this.handlePageMapChange);
+    removeObserver5(this.whiteboardAttrsMap, this.handleMainPageChange);
+    removeObserver5(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -30288,8 +30307,9 @@ async function waitUntil(fn, timeout) {
 }
 
 // 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;
 }
@@ -30307,7 +30327,7 @@ 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));
   }
@@ -30316,7 +30336,7 @@ var IndexedNavigation = class extends EventEmitter12 {
       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");
@@ -30418,6 +30438,9 @@ var IndexedNavigation = class extends EventEmitter12 {
     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;
@@ -30588,9 +30611,7 @@ var IndexedNavigation = class extends EventEmitter12 {
     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);
@@ -30631,14 +30652,14 @@ var IndexedNavigation = class extends EventEmitter12 {
     }
   }
   dispose() {
-    this.indexedPageMap.unobserve(this.handleIndexedPageMapUpdate);
+    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;
 }
@@ -30656,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);
@@ -30823,6 +30844,7 @@ var SequenceExecutor = class {
 };
 
 // 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;
 }
@@ -30861,6 +30883,7 @@ var WhiteboardApplication = class extends 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"));
@@ -30915,7 +30938,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          log3(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
+          log4(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -30927,7 +30950,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          log3(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
+          log4(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
         this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
@@ -30950,7 +30973,7 @@ var WhiteboardApplication = class extends 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)) {
@@ -31103,10 +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) {
@@ -31168,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;
@@ -31179,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;
@@ -31194,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;
@@ -31206,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);
@@ -31221,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, {
@@ -31272,7 +31323,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.camera.reset();
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      log3("WhiteboardApplicationError", {
+      log4("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
@@ -31373,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;
@@ -31455,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);
@@ -31700,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) {