@netless/forge-whiteboard 0.1.9 → 0.1.11

package/dist/whiteboard.esm.js

@@ -25526,23 +25526,26 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 // src/model/renderable/ElementModel.ts
 import * as Y from "yjs";
+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;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(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 ElementModel = class _ElementModel {
-  static KEYS = {
-    index: "index",
-    uuid: "uuid",
-    strokeWidth: "strokeWidth",
-    strokeColor: "strokeColor",
-    fillColor: "fillColor",
-    dashArray: "dashArray",
-    pointsMatrix: "pointsMatrix",
-    points: "points",
-    ownerId: "ownerId",
-    ctrlId: "ctrlId",
-    shadow: "shadow"
-  };
-  shadowEmitter = null;
-  root;
-  scope;
+  // 矢量数据发生变化后调用
+  // 哪些属性变化后需要调用 onVectorUpdate
   get index() {
     return this.root.get(_ElementModel.KEYS.index);
   }
@@ -25604,6 +25607,49 @@ var ElementModel = class _ElementModel {
     this.root.set(_ElementModel.KEYS.shadow, value);
   }
   constructor(root, scope) {
+    _defineProperty(this, "shadowEmitter", null);
+    _defineProperty(this, "root", void 0);
+    _defineProperty(this, "scope", void 0);
+    _defineProperty(this, "item", void 0);
+    _defineProperty(this, "handlePropChange", (events) => {
+      if (!this.item) {
+        return;
+      }
+      for (const event of events) {
+        if (event.target === this.root) {
+          const updatePaperItemKeys = this.vectorKeys().concat([_ElementModel.KEYS.pointsMatrix]);
+          for (const [key, value] of event.changes.keys.entries()) {
+            if (value.action === "update") {
+              const includeKeys = this.styleKeys().include;
+              if (includeKeys.indexOf(key) >= 0) {
+                this.onStyleKeyUpdate(key);
+                return;
+              }
+              if (updatePaperItemKeys.indexOf(key) >= 0) {
+                this.onVectorUpdate();
+              } else if (key === _ElementModel.KEYS.strokeColor) {
+                this.item.strokeColor = new this.scope.Color(this.strokeColor);
+              } else if (key === _ElementModel.KEYS.fillColor && this.fillColor) {
+                this.item.fillColor = new this.scope.Color(this.fillColor);
+              } else if (key === _ElementModel.KEYS.strokeWidth) {
+                this.item.strokeWidth = this.strokeWidth;
+              } else if (key === _ElementModel.KEYS.dashArray) {
+                this.item.dashArray = this.dashArray;
+              } else if (key === _ElementModel.KEYS.shadow) {
+                if (this.shadow !== "") {
+                  this.shadowEmitter?.emit("translateIn", [this.uuid], this.shadow);
+                } else {
+                  this.shadowEmitter?.emit("translateOut", [this.uuid], value.oldValue);
+                }
+              }
+            }
+          }
+        } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
+          this.onVectorUpdate();
+        } else {
+        }
+      }
+    });
     this.scope = scope;
     this.root = root;
     if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
@@ -25611,45 +25657,6 @@ var ElementModel = class _ElementModel {
     }
     this.root.observeDeep(this.handlePropChange);
   }
-  handlePropChange = (events) => {
-    if (!this.item) {
-      return;
-    }
-    for (const event of events) {
-      if (event.target === this.root) {
-        const updatePaperItemKeys = this.vectorKeys().concat([_ElementModel.KEYS.pointsMatrix]);
-        for (const [key, value] of event.changes.keys.entries()) {
-          if (value.action === "update") {
-            const includeKeys = this.styleKeys().include;
-            if (includeKeys.indexOf(key) >= 0) {
-              this.onStyleKeyUpdate(key);
-              return;
-            }
-            if (updatePaperItemKeys.indexOf(key) >= 0) {
-              this.onVectorUpdate();
-            } else if (key === _ElementModel.KEYS.strokeColor) {
-              this.item.strokeColor = new this.scope.Color(this.strokeColor);
-            } else if (key === _ElementModel.KEYS.fillColor) {
-              this.item.fillColor = new this.scope.Color(this.fillColor);
-            } else if (key === _ElementModel.KEYS.strokeWidth) {
-              this.item.strokeWidth = this.strokeWidth;
-            } else if (key === _ElementModel.KEYS.dashArray) {
-              this.item.dashArray = this.dashArray;
-            } else if (key === _ElementModel.KEYS.shadow) {
-              if (this.shadow !== "") {
-                this.shadowEmitter?.emit("translateIn", [this.uuid], this.shadow);
-              } else {
-                this.shadowEmitter?.emit("translateOut", [this.uuid], value.oldValue);
-              }
-            }
-          }
-        }
-      } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
-        this.onVectorUpdate();
-      } else {
-      }
-    }
-  };
   createPaperElement() {
     this.createPaperItem();
     if (this.item) {
@@ -25702,16 +25709,45 @@ var ElementModel = class _ElementModel {
     return Array.from(new Set(["dashArray", "strokeColor", "fillColor", "strokeWidth"].filter((v) => ext.exclude.indexOf(v) < 0).concat(ext.include)));
   }
 };
+_defineProperty(ElementModel, "KEYS", {
+  index: "index",
+  uuid: "uuid",
+  strokeWidth: "strokeWidth",
+  strokeColor: "strokeColor",
+  fillColor: "fillColor",
+  dashArray: "dashArray",
+  pointsMatrix: "pointsMatrix",
+  points: "points",
+  ownerId: "ownerId",
+  ctrlId: "ctrlId",
+  shadow: "shadow"
+});
 
 // src/edit/EditorConfig.ts
+function _defineProperty2(e, r, t) {
+  return (r = _toPropertyKey2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey2(t) {
+  var i = _toPrimitive2(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive2(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 RESIZE_MODEL_LEVEL = ["horizontal", "four-corner", "four", "eight"];
 var EditorConfig = class _EditorConfig {
-  // 缩放布局, 分别是 8向缩放, 4向(上下左右), 4向(四个角落), 2向水平
-  resizeModel = () => "eight";
-  // 是否等比例缩放
-  uniformScale = () => false;
-  // 额外的控制点
-  controlPoints = [];
+  constructor() {
+    _defineProperty2(this, "resizeModel", () => "eight");
+    _defineProperty2(this, "uniformScale", () => false);
+    _defineProperty2(this, "controlPoints", []);
+  }
   merge(other) {
     const next = new _EditorConfig();
     const i = RESIZE_MODEL_LEVEL.findIndex((v) => v === this.resizeModel());
@@ -25724,10 +25760,27 @@ var EditorConfig = class _EditorConfig {
 };
 
 // src/model/renderable/CurveModel.ts
+function _defineProperty3(e, r, t) {
+  return (r = _toPropertyKey3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey3(t) {
+  var i = _toPrimitive3(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive3(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 CurveModel = class extends ElementModel {
-  item = null;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty3(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
@@ -25758,7 +25811,10 @@ var CurveModel = class extends ElementModel {
   }
   matrixedPoints() {
     const groupPoints = (0, import_lodash.chunk)(this.points, 2);
-    return groupPoints.map(([x, y]) => new this.scope.Point(x, y)).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
+    return groupPoints.map((_ref) => {
+      let [x, y] = _ref;
+      return new this.scope.Point(x, y);
+    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
       result.push(next.x);
       result.push(next.y);
       return result;
@@ -25836,10 +25892,27 @@ var CurveModel = class extends ElementModel {
 
 // src/model/renderable/SelectorModel.ts
 import * as Y3 from "yjs";
+function _defineProperty4(e, r, t) {
+  return (r = _toPropertyKey4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey4(t) {
+  var i = _toPrimitive4(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive4(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 SelectorModel = class extends ElementModel {
-  item = null;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty4(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "selector");
     }
@@ -25851,10 +25924,7 @@ var SelectorModel = class extends ElementModel {
   }
   createPaperRect() {
     const scope = this.scope;
-    const bounds = new scope.Rectangle(
-      new scope.Point(this.points[0], this.points[1]),
-      new scope.Size(this.points[2], this.points[3])
-    );
+    const bounds = new scope.Rectangle(new scope.Point(this.points[0], this.points[1]), new scope.Size(this.points[2], this.points[3]));
     return new scope.Path.Rectangle(
       bounds,
       new scope.Point(this.points[4], this.points[4])
@@ -25894,22 +25964,28 @@ import * as Y4 from "yjs";
 
 // src/utils/paperjs.ts
 var import_lodash2 = __toESM(require_lodash(), 1);
+function _defineProperty5(e, r, t) {
+  return (r = _toPropertyKey5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey5(t) {
+  var i = _toPrimitive5(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive5(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);
+}
 function serializeSegment(segment) {
-  return [
-    segment.point.x,
-    segment.point.y,
-    segment.handleIn.x,
-    segment.handleIn.y,
-    segment.handleOut.x,
-    segment.handleOut.y
-  ];
+  return [segment.point.x, segment.point.y, segment.handleIn.x, segment.handleIn.y, segment.handleOut.x, segment.handleOut.y];
 }
 function deserializeSegment(points, scope, matrix) {
-  const segment = new scope.Segment(
-    new scope.Point(points[0], points[1]),
-    new scope.Point(points[2], points[3]),
-    new scope.Point(points[4], points[5])
-  );
+  const segment = new scope.Segment(new scope.Point(points[0], points[1]), new scope.Point(points[2], points[3]), new scope.Point(points[4], points[5]));
   segment.transform(matrix);
   return segment;
 }
@@ -25926,29 +26002,29 @@ function deserializePath(points, scope, matrix) {
   return path;
 }
 var AnimationFrame = class {
-  callbacks = [];
-  lastTime = 0;
-  fps = 45;
   constructor() {
+    _defineProperty5(this, "callbacks", []);
+    _defineProperty5(this, "lastTime", 0);
+    _defineProperty5(this, "fps", 45);
+    _defineProperty5(this, "handleCallbacks", () => {
+      let functions = this.callbacks;
+      this.callbacks = [];
+      for (let i = 0, l2 = functions.length; i < l2; i++) {
+        functions[i]();
+      }
+    });
+    _defineProperty5(this, "addCallback", (callback) => {
+      this.callbacks.push(callback);
+    });
+    _defineProperty5(this, "handleFrame", (time) => {
+      if (time - this.lastTime > 1e3 / this.fps) {
+        this.handleCallbacks();
+        this.lastTime = time;
+      }
+      window.requestAnimationFrame(this.handleFrame);
+    });
     window.requestAnimationFrame(this.handleFrame);
   }
-  handleCallbacks = () => {
-    let functions = this.callbacks;
-    this.callbacks = [];
-    for (let i = 0, l2 = functions.length; i < l2; i++) {
-      functions[i]();
-    }
-  };
-  addCallback = (callback) => {
-    this.callbacks.push(callback);
-  };
-  handleFrame = (time) => {
-    if (time - this.lastTime > 1e3 / this.fps) {
-      this.handleCallbacks();
-      this.lastTime = time;
-    }
-    window.requestAnimationFrame(this.handleFrame);
-  };
 };
 function requestAnimationFrameHook(scope) {
   const animationFrame = new AnimationFrame();
@@ -25956,10 +26032,27 @@ function requestAnimationFrameHook(scope) {
 }
 
 // src/model/renderable/SegmentsModel.ts
+function _defineProperty6(e, r, t) {
+  return (r = _toPropertyKey6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey6(t) {
+  var i = _toPrimitive6(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive6(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 SegmentsModel = class extends ElementModel {
-  item = null;
   constructor(root, scope, type) {
     super(root, scope);
+    _defineProperty6(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", type);
     }
@@ -26010,14 +26103,52 @@ var import_lodash4 = __toESM(require_lodash(), 1);
 import * as Y5 from "yjs";
 
 // src/tool/WhiteboardTool.ts
+function _defineProperty7(e, r, t) {
+  return (r = _toPropertyKey7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey7(t) {
+  var i = _toPrimitive7(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive7(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 WhiteboardTool = class {
-  modelGetter;
-  scope;
-  tool;
-  shadowEmitter;
-  enableToolEvent;
-  eventAvailable = false;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
+    _defineProperty7(this, "modelGetter", void 0);
+    _defineProperty7(this, "scope", void 0);
+    _defineProperty7(this, "tool", void 0);
+    _defineProperty7(this, "shadowEmitter", void 0);
+    _defineProperty7(this, "enableToolEvent", void 0);
+    _defineProperty7(this, "eventAvailable", false);
+    _defineProperty7(this, "onMouseDownSelf", (event) => {
+      this.eventAvailable = this.enableToolEvent();
+      if (!this.eventAvailable) {
+        return;
+      }
+      this.shadowEmitter.setActive(true);
+      this.onMouseDown(event);
+    });
+    _defineProperty7(this, "onMouseDragSelf", (event) => {
+      if (!this.eventAvailable) {
+        return;
+      }
+      this.onMouseDrag(event);
+    });
+    _defineProperty7(this, "onMouseUpSelf", (event) => {
+      if (!this.eventAvailable) {
+        return;
+      }
+      this.onMouseUp(event);
+      this.shadowEmitter.setActive(false);
+    });
     this.modelGetter = modelGetter;
     this.enableToolEvent = enableToolEvent;
     this.scope = scope;
@@ -26027,37 +26158,33 @@ var WhiteboardTool = class {
     this.tool.onMouseDrag = this.onMouseDragSelf;
     this.tool.onMouseUp = this.onMouseUpSelf;
   }
-  onMouseDownSelf = (event) => {
-    this.eventAvailable = this.enableToolEvent();
-    if (!this.eventAvailable) {
-      return;
-    }
-    this.shadowEmitter.setActive(true);
-    this.onMouseDown(event);
-  };
-  onMouseDragSelf = (event) => {
-    if (!this.eventAvailable) {
-      return;
-    }
-    this.onMouseDrag(event);
-  };
-  onMouseUpSelf = (event) => {
-    if (!this.eventAvailable) {
-      return;
-    }
-    this.onMouseUp(event);
-    this.shadowEmitter.setActive(false);
-  };
 };
 
 // src/tool/LineTool.ts
 var import_lodash3 = __toESM(require_lodash(), 1);
+function _defineProperty8(e, r, t) {
+  return (r = _toPropertyKey8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey8(t) {
+  var i = _toPrimitive8(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive8(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 LineTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty8(this, "elementModel", null);
+    _defineProperty8(this, "from", null);
+    _defineProperty8(this, "to", null);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -26086,9 +26213,24 @@ var LineTool = class extends WhiteboardTool {
 var MAX_LINE_POINTS = 5;
 
 // src/model/renderable/LineModel.ts
+function _defineProperty9(e, r, t) {
+  return (r = _toPropertyKey9(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey9(t) {
+  var i = _toPrimitive9(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive9(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 LineModel = class extends ElementModel {
-  controlledPoints = [];
-  item = null;
   get arrowSize() {
     return this.strokeWidth * 5 + 15;
   }
@@ -26106,6 +26248,8 @@ var LineModel = class extends ElementModel {
   }
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty9(this, "controlledPoints", []);
+    _defineProperty9(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "arrow");
     }
@@ -26189,7 +26333,10 @@ var LineModel = class extends ElementModel {
     cfg.resizeModel = () => "horizontal";
     if (this.controlledPoints.length === 0) {
       this.controlledPoints.push(...new Array(MAX_LINE_POINTS).fill(0).map((_, index) => {
-        return new LineControlPoint(`line-${index}`, this, { index, total: MAX_LINE_POINTS }, this.scope);
+        return new LineControlPoint(`line-${index}`, this, {
+          index,
+          total: MAX_LINE_POINTS
+        }, this.scope);
       }));
       cfg.controlPoints = this.controlledPoints;
     } else {
@@ -26211,12 +26358,12 @@ var LineModel = class extends ElementModel {
   }
 };
 var LineControlPoint = class {
-  position = null;
-  name;
-  model;
-  options;
-  scope;
   constructor(name, model, options, scope) {
+    _defineProperty9(this, "position", null);
+    _defineProperty9(this, "name", void 0);
+    _defineProperty9(this, "model", void 0);
+    _defineProperty9(this, "options", void 0);
+    _defineProperty9(this, "scope", void 0);
     this.name = name;
     this.model = model;
     this.options = options;
@@ -26231,8 +26378,14 @@ var LineControlPoint = class {
     if (this.position) {
       return this.model.scope.project.view.projectToView(this.position.transform(matrix));
     }
-    const from = { x: this.model.points[0], y: this.model.points[1] };
-    const to = { x: this.model.points[this.model.points.length - 2], y: this.model.points[this.model.points.length - 1] };
+    const from = {
+      x: this.model.points[0],
+      y: this.model.points[1]
+    };
+    const to = {
+      x: this.model.points[this.model.points.length - 2],
+      y: this.model.points[this.model.points.length - 1]
+    };
     const clonedPath = new this.scope.Path.Line(from, to);
     this.position = clonedPath.getPointAt(clonedPath.length * distance);
     return this.model.scope.project.view.projectToView(this.position.transform(matrix));
@@ -26255,8 +26408,24 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 import * as Y6 from "yjs";
+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;
+}
+function _toPropertyKey10(t) {
+  var i = _toPrimitive10(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive10(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 PointTextModel = class extends ElementModel {
-  item = null;
   set content(value) {
     this.root.set("content", value);
   }
@@ -26277,6 +26446,23 @@ var PointTextModel = class extends ElementModel {
   }
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty10(this, "item", null);
+    _defineProperty10(this, "handleTextPropChange", (event) => {
+      if (!this.item) {
+        return;
+      }
+      for (const [key, value] of event.changes.keys.entries()) {
+        if (value.action === "update" || value.action === "add") {
+          if (key === "content") {
+            this.item.content = this.root.get("content") ?? "";
+            this.updateTextPosition();
+          } else if (key === "font-size") {
+            this.item.fontSize = this.fontSize;
+            this.updateTextPosition();
+          }
+        }
+      }
+    });
     if (!this.root.has("type")) {
       this.root.set("type", "point-text");
     }
@@ -26290,22 +26476,6 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
-  handleTextPropChange = (event) => {
-    if (!this.item) {
-      return;
-    }
-    for (const [key, value] of event.changes.keys.entries()) {
-      if (value.action === "update" || value.action === "add") {
-        if (key === "content") {
-          this.item.content = this.root.get("content") ?? "";
-          this.updateTextPosition();
-        } else if (key === "font-size") {
-          this.item.fontSize = this.fontSize;
-          this.updateTextPosition();
-        }
-      }
-    }
-  };
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -26317,14 +26487,25 @@ var PointTextModel = class extends ElementModel {
     let scaleX = topRight.getDistance(topLeft) / bounds.width;
     scaleX = Number.isNaN(scaleX) ? 1 : scaleX;
     const angle = topRight.subtract(topLeft).angle;
-    return { scaleX, topLeft, topRight, angle, bounds };
+    return {
+      scaleX,
+      topLeft,
+      topRight,
+      angle,
+      bounds
+    };
   }
   updateTextPosition() {
     const measurement = this.getInternalMeasurement();
     if (!this.item || !measurement) {
       return;
     }
-    const { scaleX, topLeft, angle, bounds } = measurement;
+    const {
+      scaleX,
+      topLeft,
+      angle,
+      bounds
+    } = measurement;
     const fontSize = this.fontSize * scaleX;
     this.item.position.x = topLeft.x + bounds.width / 2;
     this.item.position.y = topLeft.y + bounds.height / 2;
@@ -26372,10 +26553,27 @@ var PointTextModel = class extends ElementModel {
 
 // src/model/renderable/TriangleModel.ts
 import * as Y7 from "yjs";
+function _defineProperty11(e, r, t) {
+  return (r = _toPropertyKey11(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey11(t) {
+  var i = _toPrimitive11(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive11(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 TriangleModel = class extends ElementModel {
-  item = null;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty11(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "triangle");
     }
@@ -26425,14 +26623,7 @@ var TriangleModel = class extends ElementModel {
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
         const oldPoints = this.points;
-        this.setPoints([
-          trPoint.x,
-          trPoint.y,
-          oldPoints[2],
-          oldPoints[3],
-          oldPoints[4],
-          oldPoints[5]
-        ]);
+        this.setPoints([trPoint.x, trPoint.y, oldPoints[2], oldPoints[3], oldPoints[4], oldPoints[5]]);
       }
     });
     return config;
@@ -26452,10 +26643,27 @@ var TriangleModel = class extends ElementModel {
 
 // src/model/renderable/RectangleModel.ts
 import * as Y8 from "yjs";
+function _defineProperty12(e, r, t) {
+  return (r = _toPropertyKey12(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey12(t) {
+  var i = _toPrimitive12(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive12(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 RectangleModel = class extends ElementModel {
-  item = null;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty12(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "rectangle");
     }
@@ -26609,11 +26817,28 @@ var elementsUndoOrigin = "elementsUndoOrigin";
 // src/model/renderable/EraserModel.ts
 var import_lodash5 = __toESM(require_lodash(), 1);
 import * as Y9 from "yjs";
+function _defineProperty13(e, r, t) {
+  return (r = _toPropertyKey13(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey13(t) {
+  var i = _toPrimitive13(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive13(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 EraserModel = class extends ElementModel {
-  item = null;
-  sliceBegin = 0;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty13(this, "item", null);
+    _defineProperty13(this, "sliceBegin", 0);
     if (!this.root.has("type")) {
       this.root.set("type", "eraser");
     }
@@ -26669,7 +26894,10 @@ var EraserModel = class extends ElementModel {
   matrixedPoints() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const groupPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
-    return groupPoints.map(([x, y]) => matrix.transform([x, y])).map((p) => [p.x, p.y]);
+    return groupPoints.map((_ref) => {
+      let [x, y] = _ref;
+      return matrix.transform([x, y]);
+    }).map((p) => [p.x, p.y]);
   }
   getNextSegments() {
     const points = this.parsePoints(this.matrixedPoints());
@@ -26728,14 +26956,31 @@ var EraserModel = class extends ElementModel {
 // src/model/renderable/LaserPointerModel.ts
 var import_lodash6 = __toESM(require_lodash(), 1);
 import * as Y10 from "yjs";
+function _defineProperty14(e, r, t) {
+  return (r = _toPropertyKey14(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey14(t) {
+  var i = _toPrimitive14(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive14(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 LaserPointerModel = class extends ElementModel {
-  item = null;
-  clientId;
-  sliceBegin = 0;
-  displayStrokeWidth = 8;
-  cachedPoints = null;
   constructor(clientId, root, scope, removeElement) {
     super(root, scope);
+    _defineProperty14(this, "item", null);
+    _defineProperty14(this, "clientId", void 0);
+    _defineProperty14(this, "sliceBegin", 0);
+    _defineProperty14(this, "displayStrokeWidth", 8);
+    _defineProperty14(this, "cachedPoints", null);
     this.clientId = clientId;
     if (!this.root.has("type")) {
       this.root.set("type", "laser");
@@ -26824,7 +27069,10 @@ var LaserPointerModel = class extends ElementModel {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const points = this.cachedPoints || this.points;
     const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
-    return groupPoints.map(([x, y]) => matrix.transform([x, y])).map((p) => [p.x, p.y]);
+    return groupPoints.map((_ref) => {
+      let [x, y] = _ref;
+      return matrix.transform([x, y]);
+    }).map((p) => [p.x, p.y]);
   }
   getNextSegments() {
     const points = this.parsePoints(this.matrixedPoints());
@@ -26866,7 +27114,24 @@ var LaserPointerModel = class extends ElementModel {
 
 // src/WhitePermissions.ts
 import EventEmitter from "eventemitter3";
-var WhiteboardPermissionFlag = /* @__PURE__ */ ((WhiteboardPermissionFlag2) => {
+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 WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["editSelf"] = 2] = "editSelf";
@@ -26875,15 +27140,24 @@ var WhiteboardPermissionFlag = /* @__PURE__ */ ((WhiteboardPermissionFlag2) => {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["deleteOthers"] = 16] = "deleteOthers";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["mainView"] = 32] = "mainView";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["setOthersView"] = 64] = "setOthersView";
-  WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = 127] = "all";
+  WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
-})(WhiteboardPermissionFlag || {});
+}({});
 var WhiteboardPermissions = class extends EventEmitter {
-  requestUserMap;
-  userManager;
-  observers = /* @__PURE__ */ new Map();
   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);
@@ -26893,16 +27167,10 @@ var WhiteboardPermissions = class extends EventEmitter {
     this.userManager.on("join", this.handleUserJoin);
     this.userManager.on("leave", this.handleUserLeave);
   }
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserve(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    this.addObserve(user.id);
-  };
   addObserve(userId) {
+    if (this.observers.has(userId)) {
+      return;
+    }
     const observer = (evt) => {
       this.handleUserPermissionChange(userId, evt);
     };
@@ -26931,14 +27199,7 @@ var WhiteboardPermissions = class extends EventEmitter {
    * @return {WhiteboardPermissionFlag[]} - 权限列表
    */
   resolveFlags(value) {
-    return [
-      4 /* editOthers */,
-      2 /* editSelf */,
-      16 /* deleteOthers */,
-      8 /* deleteSelf */,
-      32 /* mainView */,
-      1 /* draw */
-    ].filter((v) => (v & value) !== 0);
+    return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
   /**
    * 获取权限列表组合对应的数值
@@ -26988,10 +27249,27 @@ var WhiteboardPermissions = class extends EventEmitter {
 // 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 _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 StraightLineModel = class extends ElementModel {
-  item = null;
   constructor(root, scope) {
     super(root, scope);
+    _defineProperty16(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -27041,12 +27319,7 @@ var StraightLineModel = class extends ElementModel {
         }
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
-        this.setPoints([
-          trPoint.x,
-          trPoint.y,
-          this.points[2],
-          this.points[3]
-        ]);
+        this.setPoints([trPoint.x, trPoint.y, this.points[2], this.points[3]]);
       }
     });
     cfg.controlPoints.push({
@@ -27063,12 +27336,7 @@ var StraightLineModel = class extends ElementModel {
         }
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
-        this.setPoints([
-          this.points[0],
-          this.points[1],
-          trPoint.x,
-          trPoint.y
-        ]);
+        this.setPoints([this.points[0], this.points[1], trPoint.x, trPoint.y]);
       }
     });
     return cfg;
@@ -27093,21 +27361,53 @@ var StraightLineModel = class extends ElementModel {
 };
 
 // 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;
+}
+function _toPropertyKey17(t) {
+  var i = _toPrimitive17(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive17(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var RenderableModel = class extends EventEmitter2 {
-  scope;
-  toolbarModel;
-  userManager;
-  elementModels;
-  elements;
-  layerId;
-  maxIndex = -1;
-  hasPermission;
-  shadowEmitter;
   get uuid() {
     return uuidv4();
   }
   constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
     super();
+    _defineProperty17(this, "scope", void 0);
+    _defineProperty17(this, "toolbarModel", void 0);
+    _defineProperty17(this, "userManager", void 0);
+    _defineProperty17(this, "elementModels", void 0);
+    _defineProperty17(this, "elements", void 0);
+    _defineProperty17(this, "layerId", void 0);
+    _defineProperty17(this, "maxIndex", -1);
+    _defineProperty17(this, "hasPermission", void 0);
+    _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "onElementsChange", (event) => {
+      for (const [key, value] of event.changes.keys.entries()) {
+        if (value.action === "add") {
+          const root = this.elements.get(key);
+          if (root) {
+            const model = this.convertToModel(root);
+            if (model) {
+              this.emit("elementInsert", [model]);
+            }
+          }
+        } else if (value.action === "delete") {
+          this.emit("elementRemove", key, this.layerId);
+        }
+      }
+    });
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -27142,21 +27442,6 @@ var RenderableModel = class extends EventEmitter2 {
       });
     });
   }
-  onElementsChange = (event) => {
-    for (const [key, value] of event.changes.keys.entries()) {
-      if (value.action === "add") {
-        const root = this.elements.get(key);
-        if (root) {
-          const model = this.convertToModel(root);
-          if (model) {
-            this.emit("elementInsert", [model]);
-          }
-        }
-      } else if (value.action === "delete") {
-        this.emit("elementRemove", key, this.layerId);
-      }
-    }
-  };
   convertToModel(yMap) {
     const type = yMap.get("type");
     let model = null;
@@ -27189,7 +27474,8 @@ var RenderableModel = class extends EventEmitter2 {
     }
     return model;
   }
-  initElement(element, shadow = false) {
+  initElement(element) {
+    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
     if (shadow) {
       element.shadow = "layer";
     }
@@ -27210,8 +27496,16 @@ var RenderableModel = class extends EventEmitter2 {
       this.elements.set(uuid, map);
     }, elementsUndoOrigin);
   }
-  createCurve(shadow = false) {
-    if (!this.hasPermission(1 /* draw */)) {
+  confirmPermission() {
+    const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
+    if (!hasPermission) {
+      console.warn("[@netless/forge-whiteboard] no permission to draw");
+    }
+    return hasPermission;
+  }
+  createCurve() {
+    let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    if (!this.confirmPermission()) {
       return null;
     }
     const curveModel = new CurveModel(new Y12.Map(), this.scope);
@@ -27220,7 +27514,7 @@ var RenderableModel = class extends EventEmitter2 {
     return curveModel;
   }
   createLaserPointer() {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const model = new LaserPointerModel(this.userManager.selfId, new Y12.Map(), this.scope, (uuid) => {
@@ -27235,7 +27529,7 @@ var RenderableModel = class extends EventEmitter2 {
     return model;
   }
   createEraser() {
-    if (!this.hasPermission(8 /* deleteSelf */) && !this.hasPermission(16 /* deleteOthers */)) {
+    if (!this.hasPermission(WhiteboardPermissionFlag.deleteSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
     const model = new EraserModel(new Y12.Map(), this.scope);
@@ -27248,7 +27542,7 @@ var RenderableModel = class extends EventEmitter2 {
     return model;
   }
   createTriangle(shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const triangle = new TriangleModel(new Y12.Map(), this.scope);
@@ -27258,7 +27552,7 @@ var RenderableModel = class extends EventEmitter2 {
     return triangle;
   }
   createRectangle(shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const rect = new RectangleModel(new Y12.Map(), this.scope);
@@ -27268,7 +27562,7 @@ var RenderableModel = class extends EventEmitter2 {
     return rect;
   }
   createSegmentedPath(type, shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const segmentsModel = new SegmentsModel(new Y12.Map(), this.scope, type);
@@ -27277,8 +27571,9 @@ var RenderableModel = class extends EventEmitter2 {
     this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
-  createSelector(shadow = false) {
-    if (!this.hasPermission(2 /* editSelf */) && !this.hasPermission(16 /* deleteOthers */)) {
+  createSelector() {
+    let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
     const selectorModel = new SelectorModel(new Y12.Map(), this.scope);
@@ -27287,7 +27582,7 @@ var RenderableModel = class extends EventEmitter2 {
     return selectorModel;
   }
   createStraightLine(shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const straightLineModel = new StraightLineModel(new Y12.Map(), this.scope);
@@ -27297,7 +27592,7 @@ var RenderableModel = class extends EventEmitter2 {
     return straightLineModel;
   }
   createLinePath(shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const lineModel = new LineModel(new Y12.Map(), this.scope);
@@ -27307,7 +27602,7 @@ var RenderableModel = class extends EventEmitter2 {
     return lineModel;
   }
   createPointText(x, y, shadow) {
-    if (!this.hasPermission(1 /* draw */)) {
+    if (!this.confirmPermission()) {
       return null;
     }
     const pointTextModel = new PointTextModel(new Y12.Map(), this.scope);
@@ -27560,8 +27855,27 @@ function Deg2Rad(d) {
 }
 
 // src/utils/Recognizer.ts
+function _defineProperty18(e, r, t) {
+  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey18(t) {
+  var i = _toPrimitive18(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive18(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 Recognizer = class {
-  dollar = new DollarRecognizer();
+  constructor() {
+    _defineProperty18(this, "dollar", new DollarRecognizer());
+  }
   recognize(points) {
     let minX = Number.MAX_VALUE;
     let maxX = -Number.MAX_VALUE;
@@ -27588,12 +27902,29 @@ var Recognizer = class {
 };
 
 // src/tool/CurveTool.ts
+function _defineProperty19(e, r, t) {
+  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey19(t) {
+  var i = _toPrimitive19(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive19(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 CurveTool = class extends WhiteboardTool {
-  elementModel = null;
-  recognizer = new Recognizer();
-  pointCount = 0;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty19(this, "elementModel", null);
+    _defineProperty19(this, "recognizer", new Recognizer());
+    _defineProperty19(this, "pointCount", 0);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -27625,31 +27956,16 @@ var CurveTool = class extends WhiteboardTool {
           model?.setPoints([result.minX, result.minY, result.maxX, result.maxY]);
         } else if (/^circle/.test(result.shape)) {
           const model = this.modelGetter().createSegmentedPath("ellipse", false);
-          const rect = new this.scope.Rectangle(
-            new this.scope.Point(result.minX, result.minY),
-            new this.scope.Point(result.maxX, result.maxY)
-          );
+          const rect = new this.scope.Rectangle(new this.scope.Point(result.minX, result.minY), new this.scope.Point(result.maxX, result.maxY));
           const pathRect = new this.scope.Path.Ellipse(rect);
           const points = serializePath(pathRect);
           model?.setPoints(points);
         } else if (/^triangle/.test(result.shape)) {
           const model = this.modelGetter().createTriangle(false);
-          model?.setPoints([
-            result.minX + (result.maxX - result.minX) / 2,
-            result.minY,
-            result.minX,
-            result.maxY,
-            result.maxX,
-            result.maxY
-          ]);
+          model?.setPoints([result.minX + (result.maxX - result.minX) / 2, result.minY, result.minX, result.maxY, result.maxX, result.maxY]);
         } else if (/^arrow/.test(result.shape)) {
           const model = this.modelGetter().createLinePath(false);
-          model?.setPoints([
-            result.minX,
-            (result.maxY + result.minY) / 2,
-            result.maxX,
-            (result.maxY + result.minY) / 2
-          ]);
+          model?.setPoints([result.minX, (result.maxY + result.minY) / 2, result.maxX, (result.maxY + result.minY) / 2]);
         }
       }
     }
@@ -27657,12 +27973,29 @@ var CurveTool = class extends WhiteboardTool {
 };
 
 // src/tool/RectangleTool.ts
+function _defineProperty20(e, r, t) {
+  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey20(t) {
+  var i = _toPrimitive20(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive20(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 RectangleTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty20(this, "elementModel", null);
+    _defineProperty20(this, "from", null);
+    _defineProperty20(this, "to", null);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -27673,12 +28006,7 @@ var RectangleTool = class extends WhiteboardTool {
   onMouseDrag(event) {
     if (this.from && this.elementModel) {
       this.to = event.point.clone();
-      this.elementModel.setPoints([
-        this.from.x,
-        this.from.y,
-        this.to.x,
-        this.to.y
-      ]);
+      this.elementModel.setPoints([this.from.x, this.from.y, this.to.x, this.to.y]);
     }
   }
   onMouseUp(event) {
@@ -27693,6 +28021,23 @@ var RectangleTool = class extends WhiteboardTool {
 
 // src/model/ToolbarModel.ts
 import EventEmitter3 from "eventemitter3";
+function _defineProperty21(e, r, t) {
+  return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey21(t) {
+  var i = _toPrimitive21(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive21(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 TOOLBAR_KEYS = {
   tool: "tool",
   fontSize: "fontSize",
@@ -27703,7 +28048,6 @@ var TOOLBAR_KEYS = {
   dashArray: "dashArray"
 };
 var ToolbarModel = class extends EventEmitter3 {
-  root;
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -27748,6 +28092,22 @@ var ToolbarModel = class extends EventEmitter3 {
   }
   constructor(root, defaultStyle) {
     super();
+    _defineProperty21(this, "root", void 0);
+    _defineProperty21(this, "handleRootUpdate", (evt) => {
+      for (const [key, value] of evt.changes.keys.entries()) {
+        if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
+          this.emit("update", {
+            tool: this.currentTool,
+            fontSize: this.fontSize,
+            fontFamily: this.fontFamily,
+            strokeColor: this.strokeColor,
+            fillColor: this.fillColor,
+            strokeWidth: this.strokeWidth,
+            dashArray: this.dashArray
+          });
+        }
+      }
+    });
     this.root = root;
     this.root.observe(this.handleRootUpdate);
     Object.keys(defaultStyle).forEach((key) => {
@@ -27756,32 +28116,34 @@ var ToolbarModel = class extends EventEmitter3 {
       }
     });
   }
-  handleRootUpdate = (evt) => {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
-        this.emit("update", {
-          tool: this.currentTool,
-          fontSize: this.fontSize,
-          fontFamily: this.fontFamily,
-          strokeColor: this.strokeColor,
-          fillColor: this.fillColor,
-          strokeWidth: this.strokeWidth,
-          dashArray: this.dashArray
-        });
-      }
-    }
-  };
 };
 
 // src/tool/SelectorTool.ts
+function _defineProperty22(e, r, t) {
+  return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey22(t) {
+  var i = _toPrimitive22(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive22(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 SelectorTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
-  selectElementsModel;
-  selectElements = /* @__PURE__ */ new Map();
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, selectElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
+    _defineProperty22(this, "elementModel", null);
+    _defineProperty22(this, "from", null);
+    _defineProperty22(this, "to", null);
+    _defineProperty22(this, "selectElementsModel", void 0);
+    _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
@@ -27791,24 +28153,14 @@ var SelectorTool = class extends WhiteboardTool {
     this.from = event.point.clone();
     this.to = event.point.clone();
     const rect = new this.scope.Rectangle(this.from, this.to);
-    this.elementModel?.setPoints([
-      rect.topLeft.x,
-      rect.topLeft.y,
-      rect.size.width,
-      rect.size.height
-    ]);
+    this.elementModel?.setPoints([rect.topLeft.x, rect.topLeft.y, rect.size.width, rect.size.height]);
     this.selectElements.clear();
   }
   onMouseDrag(event) {
     if (this.from && this.elementModel) {
       this.to = event.point.clone();
       const rect = new this.scope.Rectangle(this.from, this.to);
-      this.elementModel.setPoints([
-        rect.topLeft.x,
-        rect.topLeft.y,
-        rect.size.width,
-        rect.size.height
-      ]);
+      this.elementModel.setPoints([rect.topLeft.x, rect.topLeft.y, rect.size.width, rect.size.height]);
       this.selectElementsModel.clearSelectElementForSelf();
       this.scope.project.activeLayer.children.forEach((item) => {
         if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0) {
@@ -27826,7 +28178,10 @@ var SelectorTool = class extends WhiteboardTool {
       this.modelGetter().removeElementItem(this.elementModel.uuid);
     }
     const elements = Array.from(this.selectElements.keys()).reduce((result, next) => {
-      result.push({ elementId: next, ownerId: this.selectElements.get(next) });
+      result.push({
+        elementId: next,
+        ownerId: this.selectElements.get(next)
+      });
       return result;
     }, []);
     const hitResult = this.scope.project.hitTest(event.point);
@@ -27857,19 +28212,57 @@ var WhiteboardKeys = {
 };
 
 // src/model/SelectElementsModel.ts
+function _defineProperty23(e, r, t) {
+  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey23(t) {
+  var i = _toPrimitive23(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive23(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 SelectElementsModel = class extends EventEmitter4 {
-  requestUserMap;
-  userManager;
-  hasPermission;
-  observers = /* @__PURE__ */ new Map();
   get hasEditSelfPermission() {
-    return this.hasPermission(2 /* editSelf */);
+    return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
   get hasEditOthersPermission() {
-    return this.hasPermission(4 /* editOthers */);
+    return this.hasPermission(WhiteboardPermissionFlag.editOthers);
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
+    _defineProperty23(this, "requestUserMap", void 0);
+    _defineProperty23(this, "userManager", void 0);
+    _defineProperty23(this, "hasPermission", void 0);
+    _defineProperty23(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty23(this, "handleUserLeave", (user) => {
+      const cb = this.observers.get(user.id);
+      if (cb) {
+        this.requestUserMap(user.id).unobserveDeep(cb);
+      }
+    });
+    _defineProperty23(this, "handleUserJoin", (user) => {
+      const observer = (evts) => {
+        this.handleUserSelectElementsChange(user.id, evts);
+      };
+      this.requestUserMap(user.id).observeDeep(observer);
+      this.observers.set(user.id, observer);
+    });
+    _defineProperty23(this, "handleUserSelectElementsChange", (userId, evts) => {
+      for (const evt of evts) {
+        if (evt.target.get("inner-map-id") === WhiteboardKeys.selectElements) {
+          const elementIds = Array.from(evt.target.keys()).filter((v) => v !== "inner-map-id");
+          this.emit("elementsChange", userId, Array.from(elementIds));
+        }
+      }
+    });
     this.hasPermission = hasPermission;
     this.userManager = userManager;
     this.requestUserMap = requestUserMap;
@@ -27884,27 +28277,6 @@ var SelectElementsModel = class extends EventEmitter4 {
     this.userManager.on("join", this.handleUserJoin);
     this.userManager.on("leave", this.handleUserLeave);
   }
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserveDeep(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    const observer = (evts) => {
-      this.handleUserSelectElementsChange(user.id, evts);
-    };
-    this.requestUserMap(user.id).observeDeep(observer);
-    this.observers.set(user.id, observer);
-  };
-  handleUserSelectElementsChange = (userId, evts) => {
-    for (const evt of evts) {
-      if (evt.target.get("inner-map-id") === WhiteboardKeys.selectElements) {
-        const elementIds = Array.from(evt.target.keys()).filter((v) => v !== "inner-map-id");
-        this.emit("elementsChange", userId, Array.from(elementIds));
-      }
-    }
-  };
   createModel(userId) {
     const userMap = this.requestUserMap(userId);
     if (!userMap.has(WhiteboardKeys.selectElements)) {
@@ -27914,7 +28286,10 @@ var SelectElementsModel = class extends EventEmitter4 {
     }
   }
   addSelectElementForSelf(elements) {
-    const { hasEditSelfPermission, hasEditOthersPermission } = this;
+    const {
+      hasEditSelfPermission,
+      hasEditOthersPermission
+    } = this;
     const ids = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.selectElements);
     const ignoreIds = /* @__PURE__ */ new Set();
     for (const userId of this.userManager.userIdList()) {
@@ -27967,16 +28342,54 @@ import EventEmitter6 from "eventemitter3";
 
 // src/edit/TextEditor.ts
 import { EventEmitter as EventEmitter5 } 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;
+}
+function _toPropertyKey24(t) {
+  var i = _toPrimitive24(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive24(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 TextEditor = class extends EventEmitter5 {
-  rootView;
-  content;
-  camera;
-  originX = 0;
-  originY = 0;
-  rotation = 0;
-  scale = 1;
   constructor(camera) {
     super();
+    _defineProperty24(this, "rootView", void 0);
+    _defineProperty24(this, "content", void 0);
+    _defineProperty24(this, "camera", void 0);
+    _defineProperty24(this, "originX", 0);
+    _defineProperty24(this, "originY", 0);
+    _defineProperty24(this, "rotation", 0);
+    _defineProperty24(this, "scale", 1);
+    _defineProperty24(this, "handleContentInput", () => {
+      this.emit("change", this.content.textContent ?? "");
+      this.translateCaretIntoView();
+    });
+    _defineProperty24(this, "handleContentKeydown", (evt) => {
+      if (/^Arrow/.test(evt.key)) {
+        setTimeout(() => {
+          this.translateCaretIntoView();
+        }, 50);
+      }
+    });
+    _defineProperty24(this, "handleContentBlur", () => {
+      this.emit("done", this.content.textContent ?? "");
+    });
+    _defineProperty24(this, "handleRootClick", (evt) => {
+      if (evt.target === this.rootView) {
+        evt.stopPropagation();
+        evt.preventDefault();
+        this.emit("done", this.content.textContent ?? "");
+      }
+    });
     this.camera = camera;
     this.rootView = document.createElement("div");
     this.rootView.style.cssText = `position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;`;
@@ -27996,27 +28409,6 @@ var TextEditor = class extends EventEmitter5 {
       this.updateMatrixStyle();
     });
   }
-  handleContentInput = () => {
-    this.emit("change", this.content.textContent ?? "");
-    this.translateCaretIntoView();
-  };
-  handleContentKeydown = (evt) => {
-    if (/^Arrow/.test(evt.key)) {
-      setTimeout(() => {
-        this.translateCaretIntoView();
-      }, 50);
-    }
-  };
-  handleContentBlur = () => {
-    this.emit("done", this.content.textContent ?? "");
-  };
-  handleRootClick = (evt) => {
-    if (evt.target === this.rootView) {
-      evt.stopPropagation();
-      evt.preventDefault();
-      this.emit("done", this.content.textContent ?? "");
-    }
-  };
   // 通过移动相机, 使光标在可见区域内
   translateCaretIntoView() {
     const selection = window.getSelection();
@@ -28083,6 +28475,23 @@ var TextEditor = class extends EventEmitter5 {
 };
 
 // src/edit/Editor.ts
+function _defineProperty25(e, r, t) {
+  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey25(t) {
+  var i = _toPrimitive25(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive25(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 ANCHOR_STYLE = {
   tl: "cursor:nw-resize;top:-3px;left:-3px",
   t: "cursor:n-resize;top:-3px;left:50%;translate:-50%;",
@@ -28094,12 +28503,6 @@ var ANCHOR_STYLE = {
   br: "cursor:se-resize;bottom:-3px;right:-3px"
 };
 var Bounds = class extends EventEmitter6 {
-  minX = 0;
-  minY = 0;
-  maxX = 0;
-  maxY = 0;
-  binding;
-  scope;
   get width() {
     return this.maxX - this.minX;
   }
@@ -28114,6 +28517,12 @@ var Bounds = class extends EventEmitter6 {
   }
   constructor(binding, scope) {
     super();
+    _defineProperty25(this, "minX", 0);
+    _defineProperty25(this, "minY", 0);
+    _defineProperty25(this, "maxX", 0);
+    _defineProperty25(this, "maxY", 0);
+    _defineProperty25(this, "binding", void 0);
+    _defineProperty25(this, "scope", void 0);
     this.binding = binding;
     this.scope = scope;
   }
@@ -28159,11 +28568,7 @@ var Bounds = class extends EventEmitter6 {
       }
       this.minY += offsetY;
       this.minX += offsetX;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY)));
     } else if (anchor === "t") {
       if (aspectRatio > 0) {
         offsetX = offsetY * aspectRatio;
@@ -28172,22 +28577,14 @@ var Bounds = class extends EventEmitter6 {
       }
       this.minX += offsetX;
       this.minY += offsetY;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY)));
     } else if (anchor === "tr") {
       if (aspectRatio > 0) {
         offsetY = -1 * offsetX / aspectRatio;
       }
       this.minY += offsetY;
       this.maxX += offsetX;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.maxY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.maxY)));
     } else if (anchor === "l") {
       if (aspectRatio > 0) {
         offsetY = offsetX / aspectRatio;
@@ -28196,11 +28593,7 @@ var Bounds = class extends EventEmitter6 {
       }
       this.minY += offsetY;
       this.minX += offsetX;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.maxY)));
     } else if (anchor === "r") {
       if (aspectRatio > 0) {
         offsetY = -1 * offsetX / aspectRatio;
@@ -28209,22 +28602,14 @@ var Bounds = class extends EventEmitter6 {
       }
       this.maxX += offsetX;
       this.minY += offsetY;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.maxY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.maxY)));
     } else if (anchor === "bl") {
       if (aspectRatio > 0) {
         offsetY = -1 * offsetX / aspectRatio;
       }
       this.minX += offsetX;
       this.maxY += offsetY;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.minY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.minY)));
     } else if (anchor === "b") {
       if (aspectRatio > 0) {
         offsetX = -1 * offsetY * aspectRatio;
@@ -28233,22 +28618,14 @@ var Bounds = class extends EventEmitter6 {
       }
       this.minX += offsetX;
       this.maxY += offsetY;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.minY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.maxX, this.minY)));
     } else if (anchor === "br") {
       if (aspectRatio > 0) {
         offsetY = offsetX / aspectRatio;
       }
       this.maxY += offsetY;
       this.maxX += offsetX;
-      matrix.scale(
-        this.width / prevWidth,
-        this.height / prevHeight,
-        this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.minY))
-      );
+      matrix.scale(this.width / prevWidth, this.height / prevHeight, this.scope.project.view.viewToProject(new this.scope.Point(this.minX, this.minY)));
     }
     this.updateBinding();
     this.emit("matrix", matrix);
@@ -28265,56 +28642,215 @@ var Bounds = class extends EventEmitter6 {
   }
 };
 var Editor = class extends EventEmitter6 {
-  rootView;
-  frame;
-  rotator;
-  scope;
-  shadowScope;
-  shadowContainer;
-  ctrlUserMap;
-  // 当前是谁的视角
-  viewerId;
-  // 谁在操控 Editor
-  ctrlId;
-  ctrlNickName;
-  editMode = null;
-  editCtrlName = null;
-  editAnchor = null;
-  lastEditPoint = null;
-  bounds;
-  targets = [];
-  editorConfig = null;
-  aspectRatio = -1;
-  // 是否等比缩放, 设置后只会应用一次, 即 pointerup 之后会恢复为 false
-  uniformScale = false;
-  camera;
-  canvasElement;
-  resizeObserver;
-  anchors = [];
-  title = null;
-  shadowEmitter;
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
-    this.shadowEmitter = shadowEmitter;
-    this.shadowScope = shadowScope;
-    this.shadowContainer = new shadowScope.Group();
-    this.shadowContainer.applyMatrix = false;
-    this.shadowContainer.data.uuid = `shadow-container-${initConfig.ctrlId}`;
-    this.canvasElement = canvasElement;
-    this.camera = camera;
-    this.scope = scope;
-    this.ctrlUserMap = initConfig.ctrlUserMap;
-    this.viewerId = initConfig.viewerId;
-    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.frame = document.createElement("div");
-    this.frame.style.position = "absolute";
-    this.frame.style.padding = "8px";
-    this.frame.style.transform = "translate(-8px, -8px)";
-    this.rootView.appendChild(this.frame);
-    this.bounds = new Bounds(this.frame, this.scope);
+    _defineProperty25(this, "rootView", void 0);
+    _defineProperty25(this, "frame", void 0);
+    _defineProperty25(this, "rotator", void 0);
+    _defineProperty25(this, "scope", void 0);
+    _defineProperty25(this, "shadowScope", void 0);
+    _defineProperty25(this, "shadowContainer", void 0);
+    _defineProperty25(this, "ctrlUserMap", void 0);
+    _defineProperty25(this, "viewerId", void 0);
+    _defineProperty25(this, "ctrlId", void 0);
+    _defineProperty25(this, "ctrlNickName", void 0);
+    _defineProperty25(this, "editMode", null);
+    _defineProperty25(this, "editCtrlName", null);
+    _defineProperty25(this, "editAnchor", null);
+    _defineProperty25(this, "lastEditPoint", null);
+    _defineProperty25(this, "bounds", void 0);
+    _defineProperty25(this, "targets", []);
+    _defineProperty25(this, "editorConfig", null);
+    _defineProperty25(this, "aspectRatio", -1);
+    _defineProperty25(this, "uniformScale", false);
+    _defineProperty25(this, "camera", void 0);
+    _defineProperty25(this, "canvasElement", void 0);
+    _defineProperty25(this, "resizeObserver", void 0);
+    _defineProperty25(this, "anchors", []);
+    _defineProperty25(this, "title", null);
+    _defineProperty25(this, "shadowEmitter", void 0);
+    _defineProperty25(this, "handleMatrix", (matrix) => {
+      if (this.shadowContainer) {
+        const next = matrix.appended(this.shadowContainer.data.shadowMatrix ?? new this.shadowScope.Matrix());
+        this.shadowContainer.data.shadowMatrix = next;
+        this.shadowContainer.transform(this.shadowContainer.matrix.inverted());
+        this.shadowContainer.matrix = next;
+      } else {
+        this.targets.forEach((target) => target.appendPointsMatrix(matrix));
+      }
+    });
+    _defineProperty25(this, "handlePointerDown", (evt) => {
+      if (!evt.target) {
+        return;
+      }
+      this.shadowEmitter.setActive(true);
+      this.translateShadow();
+      const target = evt.target;
+      const anchorType = target.getAttribute("data-anchor");
+      if (anchorType) {
+        evt.preventDefault();
+        if (evt.metaKey || this.editorConfig?.uniformScale()) {
+          this.uniformScale = true;
+        }
+        if (this.uniformScale) {
+          this.aspectRatio = this.bounds.width / this.bounds.height;
+        }
+        this.editMode = "matrix";
+        this.editAnchor = anchorType;
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+        this.hiddenCtrlPoints();
+      }
+      if (target.getAttribute("data-rotator")) {
+        evt.preventDefault();
+        this.editMode = "rotate";
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+        this.rootView.style.opacity = "0";
+      }
+      if (target === this.frame) {
+        evt.preventDefault();
+        this.editMode = "translate";
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+        this.hiddenCtrlPoints();
+      }
+      if (target === this.rootView) {
+        this.emit("clear");
+      }
+      const ctrlName = target.getAttribute("data-ctrl-name");
+      if (ctrlName) {
+        evt.preventDefault();
+        this.editMode = "ctrl-point";
+        this.editCtrlName = ctrlName;
+        this.lastEditPoint = {
+          x: evt.offsetX,
+          y: evt.offsetY
+        };
+      }
+    });
+    _defineProperty25(this, "handlePointerMove", (evt) => {
+      evt.preventDefault();
+      if (!evt.target) {
+        return;
+      }
+      if (this.editMode === "matrix" && this.editAnchor && this.lastEditPoint) {
+        const offsetX = evt.pageX - this.lastEditPoint.x;
+        let offsetY = evt.pageY - this.lastEditPoint.y;
+        this.bounds.offsetBy(this.editAnchor, offsetX, offsetY, this.uniformScale ? this.aspectRatio : -1);
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+      }
+      if (this.editMode === "rotate" && this.lastEditPoint) {
+        const pageCenter = this.bounds.pageCenter();
+        const vector1 = new this.scope.Point(this.lastEditPoint.x, this.lastEditPoint.y).subtract(new this.scope.Point(pageCenter));
+        const vector2 = new this.scope.Point(evt.pageX, evt.pageY).subtract(new this.scope.Point(pageCenter));
+        const viewPoint = new this.scope.Point(this.bounds.midX, this.bounds.midY);
+        const projectPoint = this.scope.project.view.viewToProject(viewPoint);
+        this.targets.forEach((target) => {
+          if (target.item) {
+            target.rotateByOffset(vector2.angle - vector1.angle, projectPoint.x, projectPoint.y);
+          }
+        });
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+      }
+      if (this.editMode === "translate" && this.lastEditPoint) {
+        const offsetX = evt.pageX - this.lastEditPoint.x;
+        let offsetY = evt.pageY - this.lastEditPoint.y;
+        this.bounds.translate(offsetX, offsetY);
+        this.updateBoundsByShadow();
+        this.lastEditPoint = {
+          x: evt.pageX,
+          y: evt.pageY
+        };
+      }
+      if (this.editMode === "ctrl-point" && this.editorConfig) {
+        const ctrlPoint = this.editorConfig.controlPoints.find((v) => v.name === this.editCtrlName);
+        const ctrlElement = this.rootView.querySelector(`[data-ctrl-name="${this.editCtrlName}"]`);
+        if (ctrlPoint && ctrlElement) {
+          const projectPoint = this.scope.project.view.getEventPoint(evt);
+          ctrlPoint.onPositionChange(projectPoint);
+          this.updateBoundsByShadow();
+          this.updateControlPointsPosition();
+        }
+      }
+    });
+    _defineProperty25(this, "handlePointerUp", (evt) => {
+      evt.preventDefault();
+      this.resetShadow();
+      this.shadowEmitter.setActive(false);
+      this.updateBounds();
+      if (this.editMode === "rotate") {
+        this.applyConfig(this.editorConfig);
+        this.rootView.style.opacity = "1";
+      }
+      if (this.editMode === "matrix") {
+        this.bounds.reset();
+      }
+      this.editMode = null;
+      this.editAnchor = null;
+      this.lastEditPoint = null;
+      this.uniformScale = false;
+    });
+    _defineProperty25(this, "handleFrameDBClick", (evt) => {
+      if (evt.target === this.frame && this.targets.length === 1) {
+        if (this.targets[0].type === "point-text") {
+          this.frame.style.display = "none";
+          this.createTextEditor(this.targets[0]);
+        }
+      }
+    });
+    _defineProperty25(this, "updateBounds", () => {
+      let minX = Number.MAX_VALUE;
+      let maxX = -Number.MAX_VALUE;
+      let minY = Number.MAX_VALUE;
+      let maxY = -Number.MAX_VALUE;
+      for (const model of this.targets) {
+        if (!model.item) {
+          continue;
+        }
+        const bound = model.item.bounds;
+        minX = Math.min(bound.topLeft.x, minX);
+        maxX = Math.max(bound.bottomRight.x, maxX);
+        minY = Math.min(bound.topLeft.y, minY);
+        maxY = Math.max(bound.bottomRight.y, maxY);
+      }
+      const fromPoint = new this.scope.Point(minX, minY).transform(this.scope.project.view.matrix);
+      const toPoint = new this.scope.Point(maxX, maxY).transform(this.scope.project.view.matrix);
+      this.bounds.update(fromPoint.x, fromPoint.y, toPoint.x, toPoint.y);
+      this.updateControlPointsPosition();
+    });
+    this.shadowEmitter = shadowEmitter;
+    this.shadowScope = shadowScope;
+    this.shadowContainer = new shadowScope.Group();
+    this.shadowContainer.applyMatrix = false;
+    this.shadowContainer.data.uuid = `shadow-container-${initConfig.ctrlId}`;
+    this.canvasElement = canvasElement;
+    this.camera = camera;
+    this.scope = scope;
+    this.ctrlUserMap = initConfig.ctrlUserMap;
+    this.viewerId = initConfig.viewerId;
+    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.frame = document.createElement("div");
+    this.frame.style.position = "absolute";
+    this.frame.style.padding = "8px";
+    this.frame.style.transform = "translate(-8px, -8px)";
+    this.rootView.appendChild(this.frame);
+    this.bounds = new Bounds(this.frame, this.scope);
     this.bounds.on("matrix", this.handleMatrix);
     this.rotator = document.createElement("div");
     this.rotator.setAttribute("data-rotator", "true");
@@ -28344,104 +28880,6 @@ var Editor = class extends EventEmitter6 {
     this.rootView.style.width = `${rect.width}px`;
     this.rootView.style.height = `${rect.height}px`;
   }
-  handleMatrix = (matrix) => {
-    if (this.shadowContainer) {
-      const next = matrix.appended(
-        this.shadowContainer.data.shadowMatrix ?? new this.shadowScope.Matrix()
-      );
-      this.shadowContainer.data.shadowMatrix = next;
-      this.shadowContainer.transform(this.shadowContainer.matrix.inverted());
-      this.shadowContainer.matrix = next;
-    } else {
-      this.targets.forEach((target) => target.appendPointsMatrix(matrix));
-    }
-  };
-  handlePointerDown = (evt) => {
-    if (!evt.target) {
-      return;
-    }
-    this.shadowEmitter.setActive(true);
-    this.translateShadow();
-    const target = evt.target;
-    const anchorType = target.getAttribute("data-anchor");
-    if (anchorType) {
-      evt.preventDefault();
-      if (evt.metaKey || this.editorConfig?.uniformScale()) {
-        this.uniformScale = true;
-      }
-      if (this.uniformScale) {
-        this.aspectRatio = this.bounds.width / this.bounds.height;
-      }
-      this.editMode = "matrix";
-      this.editAnchor = anchorType;
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-      this.hiddenCtrlPoints();
-    }
-    if (target.getAttribute("data-rotator")) {
-      evt.preventDefault();
-      this.editMode = "rotate";
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-      this.rootView.style.opacity = "0";
-    }
-    if (target === this.frame) {
-      evt.preventDefault();
-      this.editMode = "translate";
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-      this.hiddenCtrlPoints();
-    }
-    if (target === this.rootView) {
-      this.emit("clear");
-    }
-    const ctrlName = target.getAttribute("data-ctrl-name");
-    if (ctrlName) {
-      evt.preventDefault();
-      this.editMode = "ctrl-point";
-      this.editCtrlName = ctrlName;
-      this.lastEditPoint = { x: evt.offsetX, y: evt.offsetY };
-    }
-  };
-  handlePointerMove = (evt) => {
-    evt.preventDefault();
-    if (!evt.target) {
-      return;
-    }
-    if (this.editMode === "matrix" && this.editAnchor && this.lastEditPoint) {
-      const offsetX = evt.pageX - this.lastEditPoint.x;
-      let offsetY = evt.pageY - this.lastEditPoint.y;
-      this.bounds.offsetBy(this.editAnchor, offsetX, offsetY, this.uniformScale ? this.aspectRatio : -1);
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-    }
-    if (this.editMode === "rotate" && this.lastEditPoint) {
-      const pageCenter = this.bounds.pageCenter();
-      const vector1 = new this.scope.Point(this.lastEditPoint.x, this.lastEditPoint.y).subtract(new this.scope.Point(pageCenter));
-      const vector2 = new this.scope.Point(evt.pageX, evt.pageY).subtract(new this.scope.Point(pageCenter));
-      const viewPoint = new this.scope.Point(this.bounds.midX, this.bounds.midY);
-      const projectPoint = this.scope.project.view.viewToProject(viewPoint);
-      this.targets.forEach((target) => {
-        if (target.item) {
-          target.rotateByOffset(vector2.angle - vector1.angle, projectPoint.x, projectPoint.y);
-        }
-      });
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-    }
-    if (this.editMode === "translate" && this.lastEditPoint) {
-      const offsetX = evt.pageX - this.lastEditPoint.x;
-      let offsetY = evt.pageY - this.lastEditPoint.y;
-      this.bounds.translate(offsetX, offsetY);
-      this.updateBoundsByShadow();
-      this.lastEditPoint = { x: evt.pageX, y: evt.pageY };
-    }
-    if (this.editMode === "ctrl-point" && this.editorConfig) {
-      const ctrlPoint = this.editorConfig.controlPoints.find((v) => v.name === this.editCtrlName);
-      const ctrlElement = this.rootView.querySelector(`[data-ctrl-name="${this.editCtrlName}"]`);
-      if (ctrlPoint && ctrlElement) {
-        const projectPoint = this.scope.project.view.getEventPoint(evt);
-        ctrlPoint.onPositionChange(projectPoint);
-        this.updateBoundsByShadow();
-        this.updateControlPointsPosition();
-      }
-    }
-  };
   hiddenCtrlPoints() {
     this.editorConfig?.controlPoints.forEach((ctrl) => {
       const ctrlElement = this.rootView.querySelector(`[data-ctrl-name="${ctrl.name}"]`);
@@ -28450,31 +28888,6 @@ var Editor = class extends EventEmitter6 {
       }
     });
   }
-  handlePointerUp = (evt) => {
-    evt.preventDefault();
-    this.resetShadow();
-    this.shadowEmitter.setActive(false);
-    this.updateBounds();
-    if (this.editMode === "rotate") {
-      this.applyConfig(this.editorConfig);
-      this.rootView.style.opacity = "1";
-    }
-    if (this.editMode === "matrix") {
-      this.bounds.reset();
-    }
-    this.editMode = null;
-    this.editAnchor = null;
-    this.lastEditPoint = null;
-    this.uniformScale = false;
-  };
-  handleFrameDBClick = (evt) => {
-    if (evt.target === this.frame && this.targets.length === 1) {
-      if (this.targets[0].type === "point-text") {
-        this.frame.style.display = "none";
-        this.createTextEditor(this.targets[0]);
-      }
-    }
-  };
   createTextEditor(target) {
     const measurement = target.getInternalMeasurement();
     if (!measurement) {
@@ -28595,38 +29008,10 @@ var Editor = class extends EventEmitter6 {
     maxX = Math.max(bounds.bottomRight.x, maxX);
     minY = Math.min(bounds.topLeft.y, minY);
     maxY = Math.max(bounds.bottomRight.y, maxY);
-    const fromPoint = new this.shadowScope.Point(minX, minY).transform(
-      this.shadowScope.project.view.matrix
-    );
-    const toPoint = new this.shadowScope.Point(maxX, maxY).transform(
-      this.shadowScope.project.view.matrix
-    );
+    const fromPoint = new this.shadowScope.Point(minX, minY).transform(this.shadowScope.project.view.matrix);
+    const toPoint = new this.shadowScope.Point(maxX, maxY).transform(this.shadowScope.project.view.matrix);
     this.bounds.update(fromPoint.x, fromPoint.y, toPoint.x, toPoint.y);
   }
-  updateBounds = () => {
-    let minX = Number.MAX_VALUE;
-    let maxX = -Number.MAX_VALUE;
-    let minY = Number.MAX_VALUE;
-    let maxY = -Number.MAX_VALUE;
-    for (const model of this.targets) {
-      if (!model.item) {
-        continue;
-      }
-      const bound = model.item.bounds;
-      minX = Math.min(bound.topLeft.x, minX);
-      maxX = Math.max(bound.bottomRight.x, maxX);
-      minY = Math.min(bound.topLeft.y, minY);
-      maxY = Math.max(bound.bottomRight.y, maxY);
-    }
-    const fromPoint = new this.scope.Point(minX, minY).transform(
-      this.scope.project.view.matrix
-    );
-    const toPoint = new this.scope.Point(maxX, maxY).transform(
-      this.scope.project.view.matrix
-    );
-    this.bounds.update(fromPoint.x, fromPoint.y, toPoint.x, toPoint.y);
-    this.updateControlPointsPosition();
-  };
   translateShadow() {
     this.shadowContainer.removeChildren();
     this.shadowContainer.remove();
@@ -28676,16 +29061,33 @@ var Editor = class extends EventEmitter6 {
 };
 
 // src/tool/TextTool.ts
+function _defineProperty26(e, r, t) {
+  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey26(t) {
+  var i = _toPrimitive26(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive26(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 TextTool = class extends WhiteboardTool {
-  from = null;
-  to = null;
-  rootView;
-  canvasElement;
-  elementModel = null;
-  toolbarModel;
-  camera;
   constructor(enableToolEvent, model, shadowEmitter, scope, rootView, canvasElement, toolbarModel, camera) {
     super(enableToolEvent, model, shadowEmitter, scope);
+    _defineProperty26(this, "from", null);
+    _defineProperty26(this, "to", null);
+    _defineProperty26(this, "rootView", void 0);
+    _defineProperty26(this, "canvasElement", void 0);
+    _defineProperty26(this, "elementModel", null);
+    _defineProperty26(this, "toolbarModel", void 0);
+    _defineProperty26(this, "camera", void 0);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -28750,92 +29152,105 @@ import EventEmitter8 from "eventemitter3";
 
 // src/Gesture.ts
 import EventEmitter7 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;
+}
+function _toPropertyKey27(t) {
+  var i = _toPrimitive27(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive27(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 Gesture = class extends EventEmitter7 {
-  element;
-  scope;
-  lastVector = null;
-  lastPoint = null;
   constructor(element, scope) {
     super();
-    this.element = element;
-    this.scope = scope;
-    this.element.addEventListener("touchstart", this.onTouchStart);
-    this.element.addEventListener("touchmove", this.onTouchMove);
-    this.element.addEventListener("touchend", this.onTouchEnd);
-  }
-  onTouchStart = (evt) => {
-    if (evt.touches.length > 1) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      evt.stopImmediatePropagation();
-    } else {
-      return;
-    }
-    const p1 = new this.scope.Point(evt.touches[0].pageX, evt.touches[0].pageY);
-    const p2 = new this.scope.Point(evt.touches[1].pageX, evt.touches[1].pageY);
-    this.lastVector = p2.subtract(p1);
-    this.lastPoint = p1;
-  };
-  onTouchMove = (evt) => {
-    if (this.lastVector && this.lastPoint && evt.touches.length === 2) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      evt.stopImmediatePropagation();
-      const p1 = new this.scope.Point(evt.touches[0].pageX, evt.touches[0].pageY);
-      const p2 = new this.scope.Point(evt.touches[1].pageX, evt.touches[1].pageY);
-      const currentVector = p2.subtract(p1);
-      if (Math.abs(this.lastVector.length - currentVector.length) < 5) {
-        this.emit("offset", p1.x - this.lastPoint.x, p1.y - this.lastPoint.y);
+    _defineProperty27(this, "element", void 0);
+    _defineProperty27(this, "scope", void 0);
+    _defineProperty27(this, "lastVector", null);
+    _defineProperty27(this, "lastPoint", null);
+    _defineProperty27(this, "onTouchStart", (evt) => {
+      if (evt.touches.length > 1) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
       } else {
-        this.emit("scale", currentVector.length / this.lastVector.length, new this.scope.Point({
-          x: (p2.x + p1.x) / 2,
-          y: (p2.y + p1.y) / 2
-        }));
+        return;
       }
-      this.lastPoint = p1;
-      this.lastVector = currentVector;
-    } else if (evt.touches.length === 2) {
-      evt.preventDefault();
-      evt.stopPropagation();
-      evt.stopImmediatePropagation();
       const p1 = new this.scope.Point(evt.touches[0].pageX, evt.touches[0].pageY);
       const p2 = new this.scope.Point(evt.touches[1].pageX, evt.touches[1].pageY);
       this.lastVector = p2.subtract(p1);
       this.lastPoint = p1;
-    } else {
+    });
+    _defineProperty27(this, "onTouchMove", (evt) => {
+      if (this.lastVector && this.lastPoint && evt.touches.length === 2) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
+        const p1 = new this.scope.Point(evt.touches[0].pageX, evt.touches[0].pageY);
+        const p2 = new this.scope.Point(evt.touches[1].pageX, evt.touches[1].pageY);
+        const currentVector = p2.subtract(p1);
+        if (Math.abs(this.lastVector.length - currentVector.length) < 5) {
+          this.emit("offset", p1.x - this.lastPoint.x, p1.y - this.lastPoint.y);
+        } else {
+          this.emit("scale", currentVector.length / this.lastVector.length, new this.scope.Point({
+            x: (p2.x + p1.x) / 2,
+            y: (p2.y + p1.y) / 2
+          }));
+        }
+        this.lastPoint = p1;
+        this.lastVector = currentVector;
+      } else if (evt.touches.length === 2) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        evt.stopImmediatePropagation();
+        const p1 = new this.scope.Point(evt.touches[0].pageX, evt.touches[0].pageY);
+        const p2 = new this.scope.Point(evt.touches[1].pageX, evt.touches[1].pageY);
+        this.lastVector = p2.subtract(p1);
+        this.lastPoint = p1;
+      } else {
+        this.lastVector = null;
+        this.lastPoint = null;
+      }
+    });
+    _defineProperty27(this, "onTouchEnd", () => {
       this.lastVector = null;
       this.lastPoint = null;
-    }
-  };
-  onTouchEnd = () => {
-    this.lastVector = null;
-    this.lastPoint = null;
-  };
+    });
+    this.element = element;
+    this.scope = scope;
+    this.element.addEventListener("touchstart", this.onTouchStart);
+    this.element.addEventListener("touchmove", this.onTouchMove);
+    this.element.addEventListener("touchend", this.onTouchEnd);
+  }
 };
 
 // src/Camera.ts
+function _defineProperty28(e, r, t) {
+  return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey28(t) {
+  var i = _toPrimitive28(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive28(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 Camera = class extends EventEmitter8 {
-  scope;
-  dom;
-  lastTriggerTime = 0;
-  lastDelta = { x: 0, y: 0 };
-  requestUserMap;
-  userManager;
-  observers = /* @__PURE__ */ new Map();
-  whiteboardAttrsMap;
-  paperSize;
-  domSize;
-  hasPermission;
-  gesture;
-  inherentScale = 1;
-  maxScale;
-  initSize;
-  bound;
-  boundTiemoutId;
-  enableByMouse = true;
-  enableByTouch = true;
-  boundaryColor = "#F44336";
-  enableBoundaryHighlight = true;
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -28845,25 +29260,158 @@ var Camera = class extends EventEmitter8 {
     const view = this.scope.project.view;
     return 1 / view.matrix.scaling.x;
   }
-  constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, paperSize, domSize) {
+  constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, _paperSize, _domSize) {
     super();
+    _defineProperty28(this, "scope", void 0);
+    _defineProperty28(this, "dom", void 0);
+    _defineProperty28(this, "lastTriggerTime", 0);
+    _defineProperty28(this, "lastDelta", {
+      x: 0,
+      y: 0
+    });
+    _defineProperty28(this, "requestUserMap", void 0);
+    _defineProperty28(this, "userManager", void 0);
+    _defineProperty28(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty28(this, "whiteboardAttrsMap", void 0);
+    _defineProperty28(this, "paperSize", void 0);
+    _defineProperty28(this, "domSize", void 0);
+    _defineProperty28(this, "hasPermission", void 0);
+    _defineProperty28(this, "gesture", void 0);
+    _defineProperty28(this, "inherentScale", 1);
+    _defineProperty28(this, "maxScale", void 0);
+    _defineProperty28(this, "initSize", void 0);
+    _defineProperty28(this, "bound", void 0);
+    _defineProperty28(this, "boundTiemoutId", void 0);
+    _defineProperty28(this, "enableByMouse", true);
+    _defineProperty28(this, "enableByTouch", true);
+    _defineProperty28(this, "boundaryColor", "#F44336");
+    _defineProperty28(this, "enableBoundaryHighlight", true);
+    _defineProperty28(this, "handleMainCameraChange", (evt) => {
+      const userMap = this.requestUserMap(this.userManager.selfId);
+      const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
+      if (cameraMode !== "main") {
+        return;
+      }
+      for (const [key, value] of evt.changes.keys.entries()) {
+        if (key === WhiteboardKeys.viewMatrix) {
+          if (value.action === "add" || value.action === "update") {
+            const matrixValue = this.whiteboardAttrsMap.get(WhiteboardKeys.viewMatrix);
+            const matrix = new this.scope.Matrix(matrixValue);
+            userMap.set(WhiteboardKeys.viewMatrix, matrixValue);
+            this.emit("zoom", this.inherentMatrix.appended(matrix));
+          }
+        }
+      }
+    });
+    _defineProperty28(this, "handleUserLeave", (user) => {
+      const cb = this.observers.get(user.id);
+      if (cb) {
+        this.requestUserMap(user.id).unobserve(cb);
+      }
+    });
+    _defineProperty28(this, "handleUserJoin", (user) => {
+      const observer = (evt) => {
+        this.handleViewMatrixUpdate(user.id, evt);
+      };
+      this.requestUserMap(user.id).observe(observer);
+      this.observers.set(user.id, observer);
+    });
+    _defineProperty28(this, "handleViewMatrixUpdate", (userId, evt) => {
+      const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
+      for (const [key, value] of evt.changes.keys.entries()) {
+        if (value.action === "update") {
+          if (key === WhiteboardKeys.viewMatrix) {
+            if (userId !== this.userManager.selfId && cameraMode === userId) {
+              const targetMatrixValue = this.requestUserMap(userId).get(WhiteboardKeys.viewMatrix);
+              const target = new this.scope.Matrix(targetMatrixValue);
+              this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.viewMatrix, targetMatrixValue);
+              this.emit("zoom", this.inherentMatrix.appended(target));
+            } else if (userId === this.userManager.selfId && cameraMode === "free") {
+              const currentMatrixValue = this.requestUserMap(userId).get(WhiteboardKeys.viewMatrix);
+              const current = new this.scope.Matrix(currentMatrixValue);
+              this.emit("zoom", this.inherentMatrix.appended(current));
+            }
+          } else if (key === WhiteboardKeys.currentPage) {
+            if (value.action === "update" || value.action === "add") {
+              this.emit("userPageChange", userId, this.requestUserMap(userId).get(WhiteboardKeys.currentPage));
+            }
+          } else if (key === WhiteboardKeys.cameraMode) {
+            if (value.action === "update" || value.action === "add") {
+              this.emit("userViewModeChange", userId, this.requestUserMap(userId).get(WhiteboardKeys.cameraMode));
+            }
+          }
+        }
+      }
+    });
+    _defineProperty28(this, "handleWheel", (evt) => {
+      if (!this.enableByMouse) {
+        return;
+      }
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      evt.stopPropagation();
+      const domSize = this.domSize();
+      const paperSize = this.paperSize();
+      const inherentDeltaY = evt.deltaY / domSize[1] * paperSize[1];
+      const inherentDeltaX = evt.deltaX / domSize[0] * paperSize[0];
+      if (Date.now() - this.lastTriggerTime < 32) {
+        this.lastDelta.y += inherentDeltaY;
+        this.lastDelta.x += inherentDeltaX;
+        return;
+      }
+      if (evt.ctrlKey) {
+        const wheelDelta = Math.sign(evt.wheelDelta || 100) * 120;
+        const paperPoint = this.scope.project.view.getEventPoint(evt);
+        const deltaY = inherentDeltaY + this.lastDelta.y;
+        const matrix = new this.scope.Matrix();
+        let scale = 1;
+        if (deltaY > 0) {
+          scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 1e-8);
+        } else {
+          scale = 1 + Math.abs(deltaY / wheelDelta);
+        }
+        scale = Math.max(0.9, scale);
+        scale = Math.min(1.1, scale);
+        matrix.scale(scale, paperPoint);
+        this.updateViewMatrix(matrix);
+      } else {
+        const deltaX = this.lastDelta.x + evt.deltaX;
+        const deltaY = this.lastDelta.y + evt.deltaY;
+        const matrix = new this.scope.Matrix();
+        matrix.translate({
+          x: -deltaX * window.devicePixelRatio,
+          y: -deltaY * window.devicePixelRatio
+        });
+        this.updateViewMatrix(matrix);
+      }
+      this.lastTriggerTime = Date.now();
+      this.lastDelta = {
+        x: 0,
+        y: 0
+      };
+    });
     this.maxScale = maxScale;
     this.bound = window.document.createElement("div");
     this.bound.style.cssText = `transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`;
     this.initSize = initSize;
     this.hasPermission = hasPermission;
-    this.paperSize = paperSize;
-    this.domSize = domSize;
+    this.paperSize = _paperSize;
+    this.domSize = _domSize;
     this.whiteboardAttrsMap = whiteboardAttrsMap;
     this.scope = scope;
     this.requestUserMap = requestUserMap;
     this.userManager = userManager;
     this.dom = dom;
     this.dom.appendChild(this.bound);
-    this.dom.addEventListener("wheel", this.handleWheel, { passive: false, capture: true });
+    this.dom.addEventListener("wheel", this.handleWheel, {
+      passive: false,
+      capture: true
+    });
     this.dom.addEventListener("touchstart", (e) => {
       e.preventDefault();
-    }, { passive: false });
+    }, {
+      passive: false
+    });
     this.createModel(this.userManager.selfId);
     this.userManager.userIdList().forEach((userId) => {
       const observer = (evt) => {
@@ -28884,7 +29432,10 @@ var Camera = class extends EventEmitter8 {
         return;
       }
       const matrix = new this.scope.Matrix();
-      matrix.translate({ x: x * this.translateScale, y: y * this.translateScale });
+      matrix.translate({
+        x: x * this.translateScale,
+        y: y * this.translateScale
+      });
       this.updateViewMatrix(matrix);
     });
     this.gesture.on("scale", (scale, center) => {
@@ -28906,6 +29457,9 @@ var Camera = class extends EventEmitter8 {
       }, 100);
     }
   }
+  updateInitSize(size) {
+    this.initSize = size;
+  }
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
@@ -28937,36 +29491,6 @@ var Camera = class extends EventEmitter8 {
     const matrix = new this.scope.Matrix(matrixValue);
     this.emit("zoom", this.inherentMatrix.appended(matrix));
   }
-  handleMainCameraChange = (evt) => {
-    const userMap = this.requestUserMap(this.userManager.selfId);
-    const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
-    if (cameraMode !== "main") {
-      return;
-    }
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === WhiteboardKeys.viewMatrix) {
-        if (value.action === "add" || value.action === "update") {
-          const matrixValue = this.whiteboardAttrsMap.get(WhiteboardKeys.viewMatrix);
-          const matrix = new this.scope.Matrix(matrixValue);
-          userMap.set(WhiteboardKeys.viewMatrix, matrixValue);
-          this.emit("zoom", this.inherentMatrix.appended(matrix));
-        }
-      }
-    }
-  };
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserve(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    const observer = (evt) => {
-      this.handleViewMatrixUpdate(user.id, evt);
-    };
-    this.requestUserMap(user.id).observe(observer);
-    this.observers.set(user.id, observer);
-  };
   createModel(userId) {
     const userMap = this.requestUserMap(userId);
     if (!userMap.has(WhiteboardKeys.viewMatrix)) {
@@ -28976,33 +29500,6 @@ var Camera = class extends EventEmitter8 {
       userMap.set(WhiteboardKeys.cameraMode, "main");
     }
   }
-  handleViewMatrixUpdate = (userId, evt) => {
-    const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (value.action === "update") {
-        if (key === WhiteboardKeys.viewMatrix) {
-          if (userId !== this.userManager.selfId && cameraMode === userId) {
-            const targetMatrixValue = this.requestUserMap(userId).get(WhiteboardKeys.viewMatrix);
-            const target = new this.scope.Matrix(targetMatrixValue);
-            this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.viewMatrix, targetMatrixValue);
-            this.emit("zoom", this.inherentMatrix.appended(target));
-          } else if (userId === this.userManager.selfId && cameraMode === "free") {
-            const currentMatrixValue = this.requestUserMap(userId).get(WhiteboardKeys.viewMatrix);
-            const current = new this.scope.Matrix(currentMatrixValue);
-            this.emit("zoom", this.inherentMatrix.appended(current));
-          }
-        } else if (key === WhiteboardKeys.currentPage) {
-          if (value.action === "update" || value.action === "add") {
-            this.emit("userPageChange", userId, this.requestUserMap(userId).get(WhiteboardKeys.currentPage));
-          }
-        } else if (key === WhiteboardKeys.cameraMode) {
-          if (value.action === "update" || value.action === "add") {
-            this.emit("userViewModeChange", userId, this.requestUserMap(userId).get(WhiteboardKeys.cameraMode));
-          }
-        }
-      }
-    }
-  };
   validNextMatrix(next) {
     let shouldHighlightBound = false;
     const maxTranslate = (this.maxScale - 1) / 2;
@@ -29057,7 +29554,8 @@ var Camera = class extends EventEmitter8 {
     }
     return next;
   }
-  updateViewMatrix(matrix, append = true) {
+  updateViewMatrix(matrix) {
+    let append = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
     const userMap = this.requestUserMap(this.userManager.selfId);
     const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
     let next = matrix;
@@ -29077,75 +29575,62 @@ var Camera = class extends EventEmitter8 {
       userMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
     }
     if (cameraMode === "main") {
-      if (this.hasPermission(32 /* mainView */)) {
+      if (this.hasPermission(WhiteboardPermissionFlag.mainView)) {
         this.whiteboardAttrsMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
       }
     }
   }
-  handleWheel = (evt) => {
-    if (!this.enableByMouse) {
-      return;
-    }
-    evt.preventDefault();
-    evt.stopImmediatePropagation();
-    evt.stopPropagation();
-    const domSize = this.domSize();
-    const paperSize = this.paperSize();
-    const inherentDeltaY = evt.deltaY / domSize[1] * paperSize[1];
-    const inherentDeltaX = evt.deltaX / domSize[0] * paperSize[0];
-    if (Date.now() - this.lastTriggerTime < 32) {
-      this.lastDelta.y += inherentDeltaY;
-      this.lastDelta.x += inherentDeltaX;
-      return;
-    }
-    if (evt.ctrlKey) {
-      const wheelDelta = Math.sign(evt.wheelDelta || 100) * 120;
-      const paperPoint = this.scope.project.view.getEventPoint(evt);
-      const deltaY = inherentDeltaY + this.lastDelta.y;
-      const matrix = new this.scope.Matrix();
-      let scale = 1;
-      if (deltaY > 0) {
-        scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 1e-8);
-      } else {
-        scale = 1 + Math.abs(deltaY / wheelDelta);
-      }
-      scale = Math.max(0.9, scale);
-      scale = Math.min(1.1, scale);
-      matrix.scale(scale, paperPoint);
-      this.updateViewMatrix(matrix);
-    } else {
-      const deltaX = this.lastDelta.x + evt.deltaX;
-      const deltaY = this.lastDelta.y + evt.deltaY;
-      const matrix = new this.scope.Matrix();
-      matrix.translate({ x: -deltaX * window.devicePixelRatio, y: -deltaY * window.devicePixelRatio });
-      this.updateViewMatrix(matrix);
-    }
-    this.lastTriggerTime = Date.now();
-    this.lastDelta = { x: 0, y: 0 };
-  };
   scale(value) {
+    let origin = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "center";
     const matrix = new this.scope.Matrix();
-    matrix.scale(value, this.scope.project.view.bounds.center);
+    if (origin === "center") {
+      matrix.scale(value, this.scope.project.view.bounds.center);
+    } else if (origin === "top-left") {
+      matrix.scale(value, [0, 0]);
+    }
     this.updateViewMatrix(matrix);
   }
   translate(offsetX, offsetY) {
     const matrix = new this.scope.Matrix();
-    matrix.translate({ x: offsetX, y: offsetY });
+    matrix.translate({
+      x: offsetX,
+      y: offsetY
+    });
     this.updateViewMatrix(matrix);
   }
   reset() {
     this.updateViewMatrix(new this.scope.Matrix(), false);
-    this.lastDelta = { x: 0, y: 0 };
+    this.lastDelta = {
+      x: 0,
+      y: 0
+    };
   }
 };
 
 // src/tool/EllipseTool.ts
+function _defineProperty29(e, r, t) {
+  return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey29(t) {
+  var i = _toPrimitive29(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive29(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 EllipseTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty29(this, "elementModel", null);
+    _defineProperty29(this, "from", null);
+    _defineProperty29(this, "to", null);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -29174,209 +29659,145 @@ var EllipseTool = class extends WhiteboardTool {
 };
 
 // src/tool/TriangleTool.ts
+function _defineProperty30(e, r, t) {
+  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey30(t) {
+  var i = _toPrimitive30(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive30(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 TriangleTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty30(this, "elementModel", null);
+    _defineProperty30(this, "from", null);
+    _defineProperty30(this, "to", null);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
     this.elementModel = this.modelGetter().createTriangle(true);
     this.from = event.point.clone();
-    this.to = event.point.clone();
-  }
-  onMouseDrag(event) {
-    if (this.from && this.elementModel) {
-      this.to = event.point.clone();
-      this.elementModel.setPoints([
-        (this.to.x - this.from.x) / 2 + this.from.x,
-        this.from.y,
-        this.to.x,
-        this.to.y,
-        this.from.x,
-        this.to.y
-      ]);
-    }
-  }
-  onMouseUp(event) {
-    if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
-      this.modelGetter().removeElementItem(this.elementModel.uuid);
-    }
-    if (this.elementModel) {
-      this.elementModel.shadow = "";
-    }
-  }
-};
-
-// src/Whiteboard.ts
-import EventEmitter9 from "eventemitter3";
-var Whiteboard = class extends EventEmitter9 {
-  view;
-  selfUserId;
-  permissions;
-  /**
-   * 当前选中的工具
-   */
-  tool;
-  /**
-   * 字体大小
-   */
-  fontSize;
-  /**
-   * 虚线配置
-   */
-  dashArray;
-  /**
-   * 字体名称
-   */
-  fontFamily;
-  /**
-   * 描边颜色
-   */
-  strokeColor;
-  /**
-   * 填充颜色
-   */
-  fillColor;
-  /**
-   * 描边宽度
-   */
-  strokeWidth;
-  /**
-   * 是否允许用鼠标/触控板进行缩放和拖动画布
-   */
-  enableCameraByMouse;
-  /**
-   * 是否允许触摸屏上触摸事件进行缩放和拖动画布
-   */
-  enableCameraByTouch;
-  /**
-   * 相机超出边界时, 警示阴影的颜色, 默认 "#F44336"
-   */
-  cameraBoundaryColor;
-  /**
-   * 是否允许相机超出边界时, 警示高亮阴影, 默认 true
-   */
-  enableCameraBoundaryHighlight;
-  getElementAttribute;
-  setElementAttribute;
-  getCurrentTool;
-  setCurrentTool;
-  /**
-   * 设置画布区域背景色
-   * @param {string} color - css 颜色值
-   */
-  setCanvasBackgroundColor;
-  /**
-   * 设置主题色, 主题色影响选中框和昵称的背景色
-   * @param {string} color - css 颜色值
-   */
-  setThemeColor;
-  /**
-   * 切换到指定页面, 调用端需要有页面切换权限
-   * @param {string} id - 指定要切换到的页面 id
-   */
-  gotoPage;
-  /**
-   * 添加页面, 如果页面已经存在则不做任何修改
-   * @param {string} id - 指定要添加到的页面 id
-   */
-  addPage;
-  deletePage;
-  pageList;
-  /**
-   * 获取当前页面 id
-   * @param {string=} userId - 指定要获取对应用户的当前页面 id, 不传 userId 参数则获取自己的当前页面 id
-   */
-  currentPageId;
-  /**
-   * 复制页面
-   * @param {string} sourceId - 指定要复制的页面, string 类型指定 id
-   * @param {string} targetId - 指定要复制到的页面, string 类型指定 id
-   */
-  clonePage;
-  /**
-   * 清空当前页面
-   */
-  clearPage;
-  /**
-   * 平移画布
-   * @param {number} offsetX - x 轴偏移量
-   * @param {number} offsetY - y 轴偏移量
-   */
-  translateCamera;
-  /**
-   * 以画布中心为固定点缩放画布
-   * @param {number} scale - 缩放比例
-   */
-  scaleCamera;
-  /**
-   * 重置画布, 将画布缩放比例重置为 1, 平移量重置为 [0, 0]
-   */
-  resetCamera;
-  /**
-   * 为 userId 指定的用户设置页面, 调用需要有 `WhiteboardPermissionFlag.setOthersView` 权限,
-   * userId 指定的用户的视角模式应为 `free`, 否则调用无效
-   */
-  setFreeModelUserPage;
-  indexedNavigation;
-  /**
-   * 设置视角模式为自由模式, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
-   * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
-   */
-  setViewModeToFree;
-  /**
-   * 设置视角模式为跟随其他用户, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
-   * @param {string} flowId 指定要跟随的用户 id
-   * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
-   */
-  setViewModeToFlow;
-  /**
-   * 设置视角模式为跟随白板主视角, 可以修改自己或者他人视角, 修改他人视角需要 `WhiteboardPermissionFlag.setOthersView` 权限
-   * @param {string=} userId 可选, 指定要修改视角的 userId, 默认修改自己的视角
-   */
-  setViewModeToMain;
-  /**
-   * 获取视角模式
-   * @param {string=} userId 可选, 默认获取自己的视角模式
-   * @return {'free' | 'main' | string} `free` 表示自由视角, `main` 表示主视角, 其他 string 类型代表跟随视角, string 值为跟随的 userId
-   */
-  getViewModel;
-  /**
-   * 撤销
-   */
-  undo;
-  /**
-   * 重做
-   */
-  redo;
-  /**
-   * 光栅化指定页面
-   * @param {string | number | undefined} page 指定页码, string 指示页码 id, number 指示 IndexedNavigation 页面索引, undefined 指示光栅化当前页
-   * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url, 如果页面不存在返回 null
-   */
-  rasterize;
-  /**
-   * 设置输入类型, "pen" 仅接受手写笔输入, "any" 接受任意输入, 当首次侦测到手写笔输入时, 将自动切换为 "pen"
-   * @param {"pen" | "any"} type 输入类型
-   */
-  setInputType;
-  insertImage;
+    this.to = event.point.clone();
+  }
+  onMouseDrag(event) {
+    if (this.from && this.elementModel) {
+      this.to = event.point.clone();
+      this.elementModel.setPoints([(this.to.x - this.from.x) / 2 + this.from.x, this.from.y, this.to.x, this.to.y, this.from.x, this.to.y]);
+    }
+  }
+  onMouseUp(event) {
+    if (this.elementModel && this.from && this.from.getDistance(event.point) < 3) {
+      this.modelGetter().removeElementItem(this.elementModel.uuid);
+    }
+    if (this.elementModel) {
+      this.elementModel.shadow = "";
+    }
+  }
+};
+
+// src/Whiteboard.ts
+import EventEmitter9 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;
+}
+function _toPropertyKey31(t) {
+  var i = _toPrimitive31(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive31(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var Whiteboard = class extends EventEmitter9 {
+  // public insertImage!: (src: string) => void;
   constructor(view) {
     super();
+    _defineProperty31(this, "view", void 0);
+    _defineProperty31(this, "selfUserId", void 0);
+    _defineProperty31(this, "permissions", void 0);
+    _defineProperty31(this, "tool", void 0);
+    _defineProperty31(this, "fontSize", void 0);
+    _defineProperty31(this, "dashArray", void 0);
+    _defineProperty31(this, "fontFamily", void 0);
+    _defineProperty31(this, "strokeColor", void 0);
+    _defineProperty31(this, "fillColor", void 0);
+    _defineProperty31(this, "strokeWidth", void 0);
+    _defineProperty31(this, "enableCameraByMouse", void 0);
+    _defineProperty31(this, "enableCameraByTouch", void 0);
+    _defineProperty31(this, "cameraBoundaryColor", void 0);
+    _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
+    _defineProperty31(this, "getElementAttribute", void 0);
+    _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "getCurrentTool", void 0);
+    _defineProperty31(this, "setCurrentTool", void 0);
+    _defineProperty31(this, "setCanvasBackgroundColor", void 0);
+    _defineProperty31(this, "setThemeColor", void 0);
+    _defineProperty31(this, "gotoPage", void 0);
+    _defineProperty31(this, "addPage", void 0);
+    _defineProperty31(this, "deletePage", void 0);
+    _defineProperty31(this, "pageList", void 0);
+    _defineProperty31(this, "currentPageId", void 0);
+    _defineProperty31(this, "clonePage", void 0);
+    _defineProperty31(this, "clearPage", void 0);
+    _defineProperty31(this, "translateCamera", void 0);
+    _defineProperty31(this, "scaleCamera", void 0);
+    _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "setFreeModelUserPage", void 0);
+    _defineProperty31(this, "indexedNavigation", void 0);
+    _defineProperty31(this, "setViewModeToFree", void 0);
+    _defineProperty31(this, "setViewModeToFlow", void 0);
+    _defineProperty31(this, "setViewModeToMain", void 0);
+    _defineProperty31(this, "getViewModel", void 0);
+    _defineProperty31(this, "undo", void 0);
+    _defineProperty31(this, "redo", void 0);
+    _defineProperty31(this, "rasterizeViewport", void 0);
+    _defineProperty31(this, "rasterizeElementsBounds", void 0);
+    _defineProperty31(this, "rasterizeMaxBounds", void 0);
+    _defineProperty31(this, "setInputType", void 0);
     this.view = view;
   }
 };
 
 // src/tool/EraserTool.ts
+function _defineProperty32(e, r, t) {
+  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey32(t) {
+  var i = _toPrimitive32(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive32(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 EraserTool = class extends WhiteboardTool {
-  elementModel = null;
-  trashedElementsModel;
-  pointCount = 0;
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
+    _defineProperty32(this, "elementModel", null);
+    _defineProperty32(this, "trashedElementsModel", void 0);
+    _defineProperty32(this, "pointCount", 0);
     this.trashedElementsModel = trashedElementsModel;
     this.tool.minDistance = 1;
   }
@@ -29414,19 +29835,49 @@ var EraserTool = class extends WhiteboardTool {
 // src/model/TrashedElementsModel.ts
 import * as Y14 from "yjs";
 import EventEmitter10 from "eventemitter3";
+function _defineProperty33(e, r, t) {
+  return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey33(t) {
+  var i = _toPrimitive33(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive33(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 TrashedElementsModel = class extends EventEmitter10 {
-  requestUserMap;
-  userManager;
-  hasPermission;
-  observers = /* @__PURE__ */ new Map();
   get hasDeleteSelfPermission() {
-    return this.hasPermission(8 /* deleteSelf */);
+    return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
   get hasDeleteOthersPermission() {
-    return this.hasPermission(16 /* deleteOthers */);
+    return this.hasPermission(WhiteboardPermissionFlag.deleteOthers);
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
+    _defineProperty33(this, "requestUserMap", void 0);
+    _defineProperty33(this, "userManager", void 0);
+    _defineProperty33(this, "hasPermission", void 0);
+    _defineProperty33(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty33(this, "handleUserLeave", (user) => {
+      const cb = this.observers.get(user.id);
+      if (cb) {
+        this.requestUserMap(user.id).unobserveDeep(cb);
+      }
+    });
+    _defineProperty33(this, "handleUserJoin", (user) => {
+      const observer = (evts) => {
+        this.handleUserTrashElementsChange(user.id, evts);
+      };
+      this.requestUserMap(user.id).observeDeep(observer);
+      this.observers.set(user.id, observer);
+    });
     this.hasPermission = hasPermission;
     this.userManager = userManager;
     this.requestUserMap = requestUserMap;
@@ -29441,19 +29892,6 @@ var TrashedElementsModel = class extends EventEmitter10 {
     this.userManager.on("join", this.handleUserJoin);
     this.userManager.on("leave", this.handleUserLeave);
   }
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserveDeep(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    const observer = (evts) => {
-      this.handleUserTrashElementsChange(user.id, evts);
-    };
-    this.requestUserMap(user.id).observeDeep(observer);
-    this.observers.set(user.id, observer);
-  };
   handleUserTrashElementsChange(userId, evts) {
     for (const evt of evts) {
       if (evt.target.get("inner-map-id") === "trashedElements") {
@@ -29515,11 +29953,28 @@ var TrashedElementsModel = class extends EventEmitter10 {
 };
 
 // src/tool/LaserPointerTool.ts
+function _defineProperty34(e, r, t) {
+  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey34(t) {
+  var i = _toPrimitive34(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive34(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 LaserPointerTool = class extends WhiteboardTool {
-  elementModel = null;
-  pointCount = 0;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty34(this, "elementModel", null);
+    _defineProperty34(this, "pointCount", 0);
     this.tool.minDistance = 5;
   }
   onMouseDown(event) {
@@ -29545,15 +30000,79 @@ var LaserPointerTool = class extends WhiteboardTool {
 // src/model/PageModel.ts
 import EventEmitter11 from "eventemitter3";
 import { log } 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;
+}
+function _toPropertyKey35(t) {
+  var i = _toPrimitive35(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive35(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 PageModel = class extends EventEmitter11 {
-  whiteboardAttrsMap;
-  pageMap;
-  requestUserMap;
-  userManager;
-  observers = /* @__PURE__ */ new Map();
-  hasPermission;
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
+    _defineProperty35(this, "whiteboardAttrsMap", void 0);
+    _defineProperty35(this, "pageMap", void 0);
+    _defineProperty35(this, "requestUserMap", void 0);
+    _defineProperty35(this, "userManager", void 0);
+    _defineProperty35(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty35(this, "hasPermission", void 0);
+    _defineProperty35(this, "handleUserLeave", (user) => {
+      const cb = this.observers.get(user.id);
+      if (cb) {
+        this.requestUserMap(user.id).unobserve(cb);
+      }
+    });
+    _defineProperty35(this, "handleUserJoin", (user) => {
+      this.createCurrentPageObserver(user.id);
+    });
+    _defineProperty35(this, "handleMainPageChange", (evt) => {
+      for (const [key, value] of evt.changes.keys.entries()) {
+        if (key === WhiteboardKeys.currentPage) {
+          const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
+          if (value.action === "update" || value.action === "add") {
+            if (cameraMode === "main") {
+              const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
+              if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
+                log(`main page {${targetPage}} not found.`, {}, "error");
+                return;
+              }
+              this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
+              this.emit("switchPage", targetPage);
+            }
+          }
+        }
+      }
+    });
+    _defineProperty35(this, "handleUserCurrentPageChange", (userId, evt) => {
+      for (const [key, value] of evt.changes.keys.entries()) {
+        if (key === WhiteboardKeys.currentPage) {
+          const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
+          if (value.action === "update" || value.action === "add") {
+            if (userId !== this.userManager.selfId && cameraMode === userId) {
+              const targetPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+              this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
+              this.emit("switchPage", targetPage);
+            } else if (userId === this.userManager.selfId && cameraMode === "free") {
+              const targetPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+              this.emit("switchPage", targetPage);
+            }
+          }
+        }
+      }
+    });
+    _defineProperty35(this, "handlePageMapChange", () => {
+      this.emit("pagesChange", Array.from(this.pageMap.keys()));
+    });
     this.hasPermission = hasPermission;
     this.pageMap = pageMap;
     this.userManager = userManager;
@@ -29574,53 +30093,6 @@ var PageModel = class extends EventEmitter11 {
     this.requestUserMap(userId).observe(observer);
     this.observers.set(userId, observer);
   }
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserve(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    this.createCurrentPageObserver(user.id);
-  };
-  handleMainPageChange = (evt) => {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === WhiteboardKeys.currentPage) {
-        const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
-        if (value.action === "update" || value.action === "add") {
-          if (cameraMode === "main") {
-            const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
-            if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-              log(`main page {${targetPage}} not found.`, {}, "error");
-              return;
-            }
-            this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
-            this.emit("switchPage", targetPage);
-          }
-        }
-      }
-    }
-  };
-  handleUserCurrentPageChange = (userId, evt) => {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === WhiteboardKeys.currentPage) {
-        const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
-        if (value.action === "update" || value.action === "add") {
-          if (userId !== this.userManager.selfId && cameraMode === userId) {
-            const targetPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
-            this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
-            this.emit("switchPage", targetPage);
-          } else if (userId === this.userManager.selfId && cameraMode === "free") {
-            const targetPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
-            this.emit("switchPage", targetPage);
-          }
-        }
-      }
-    }
-  };
-  handlePageMapChange = () => {
-    this.emit("pagesChange", Array.from(this.pageMap.keys()));
-  };
   getCurrentPage(userId) {
     const cameraMode = this.requestUserMap(userId).get(WhiteboardKeys.cameraMode);
     if (cameraMode === "main") {
@@ -29643,7 +30115,7 @@ var PageModel = class extends EventEmitter11 {
       console.warn(`cannot modify pages in non-main view mode.`);
       return false;
     }
-    if (!this.hasPermission(32 /* mainView */)) {
+    if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
       console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
       return false;
     }
@@ -29672,7 +30144,7 @@ var PageModel = class extends EventEmitter11 {
     }
   }
   setUserPage(id, userId) {
-    if (this.pageList().indexOf(id) < 0 || !this.hasPermission(64 /* setOthersView */)) {
+    if (this.pageList().indexOf(id) < 0 || !this.hasPermission(WhiteboardPermissionFlag.setOthersView)) {
       return;
     }
     const userMap = this.requestUserMap(userId);
@@ -29691,7 +30163,7 @@ var PageModel = class extends EventEmitter11 {
       userMap.set(WhiteboardKeys.currentPage, id);
     }
     if (cameraMode === "main") {
-      if (this.hasPermission(32 /* mainView */)) {
+      if (this.hasPermission(WhiteboardPermissionFlag.mainView)) {
         this.whiteboardAttrsMap.set(WhiteboardKeys.currentPage, id);
       }
     }
@@ -29711,13 +30183,24 @@ async function waitUntil(fn, timeout) {
 // src/IndexedNavigation.ts
 import EventEmitter12 from "eventemitter3";
 import { log as log2 } 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;
+}
+function _toPropertyKey36(t) {
+  var i = _toPrimitive36(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive36(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 IndexedNavigation = class extends EventEmitter12 {
-  idPool = /* @__PURE__ */ new Set();
-  pageModel;
-  userMap;
-  indexedPageMap;
-  list = {};
-  hasPermission;
   get idList() {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
@@ -29744,6 +30227,21 @@ var IndexedNavigation = class extends EventEmitter12 {
   }
   constructor(pageModel, userMap, indexedPageMap, hasPermission) {
     super();
+    _defineProperty36(this, "idPool", /* @__PURE__ */ new Set());
+    _defineProperty36(this, "pageModel", void 0);
+    _defineProperty36(this, "userMap", void 0);
+    _defineProperty36(this, "indexedPageMap", void 0);
+    _defineProperty36(this, "list", {});
+    _defineProperty36(this, "hasPermission", void 0);
+    _defineProperty36(this, "handleIndexedPageMapUpdate", (evt) => {
+      this.list = this.indexedPageMap.get("list");
+      const needRemoveList = this.pageModel.pageList().filter((v) => /^_i_/.test(v) && Object.keys(this.list).indexOf(v) < 0);
+      const needAddList = Object.keys(this.list).filter((v) => this.pageModel.pageList().indexOf(v) < 0);
+      this.indexedPageMap.doc.transact(() => {
+        needAddList.forEach((id) => this.pageModel.addPage(id));
+        needRemoveList.forEach((id) => this.pageModel.deletePage(id));
+      });
+    });
     this.hasPermission = hasPermission;
     this.pageModel = pageModel;
     this.userMap = userMap;
@@ -29760,7 +30258,12 @@ var IndexedNavigation = class extends EventEmitter12 {
       this.emit("pageCountChange", this.pageCount);
     });
     if (!this.indexedPageMap.has("list")) {
-      this.list = { "_i_": { prev: "", next: "" } };
+      this.list = {
+        "_i_": {
+          prev: "",
+          next: ""
+        }
+      };
       this.indexedPageMap.set("list", this.list);
       this.idPool.add("_i_");
     } else {
@@ -29794,15 +30297,6 @@ var IndexedNavigation = class extends EventEmitter12 {
       });
     });
   }
-  handleIndexedPageMapUpdate = (evt) => {
-    this.list = this.indexedPageMap.get("list");
-    const needRemoveList = this.pageModel.pageList().filter((v) => /^_i_/.test(v) && Object.keys(this.list).indexOf(v) < 0);
-    const needAddList = Object.keys(this.list).filter((v) => this.pageModel.pageList().indexOf(v) < 0);
-    this.indexedPageMap.doc.transact(() => {
-      needAddList.forEach((id) => this.pageModel.addPage(id));
-      needRemoveList.forEach((id) => this.pageModel.deletePage(id));
-    });
-  };
   /**
    * 获取总页数
    * @returns {number}
@@ -29859,7 +30353,7 @@ var IndexedNavigation = class extends EventEmitter12 {
       console.warn(`cannot modify pages in non-main view mode.`);
       return false;
     }
-    if (!this.hasPermission(32 /* mainView */)) {
+    if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
       console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
       return false;
     }
@@ -29870,7 +30364,8 @@ var IndexedNavigation = class extends EventEmitter12 {
    * @param {boolean=} goto 是否跳转到新页面, 默认 true
    * @return 总页数
    */
-  pushPage(goto = true) {
+  pushPage() {
+    let goto = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
     this.indexedPageMap.doc.transact(() => {
       const id = this.getNextId();
       if (!this.pageModel.addPage(id)) {
@@ -29902,7 +30397,8 @@ var IndexedNavigation = class extends EventEmitter12 {
    * @param {boolean=} goto 是否跳转到新页面, 默认 true
    * @return 总页数
    */
-  insertPage(after, goto = true) {
+  insertPage(after) {
+    let goto = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
     const afterPageId = this.getPageId(after);
     if (!afterPageId) {
       return this.pageCount;
@@ -30031,10 +30527,27 @@ var IndexedNavigation = class extends EventEmitter12 {
 
 // src/utils/ShadowEmitter.ts
 import EventEmitter13 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;
+}
+function _toPropertyKey37(t) {
+  var i = _toPrimitive37(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive37(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 ShadowEmitter = class extends EventEmitter13 {
-  userMap;
   constructor(userMap) {
     super();
+    _defineProperty37(this, "userMap", void 0);
     this.userMap = userMap;
   }
   getActive() {
@@ -30046,12 +30559,29 @@ var ShadowEmitter = class extends EventEmitter13 {
 };
 
 // src/tool/StraightLineTool.ts
+function _defineProperty38(e, r, t) {
+  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey38(t) {
+  var i = _toPrimitive38(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive38(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 StraightLineTool = class extends WhiteboardTool {
-  elementModel = null;
-  from = null;
-  to = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty38(this, "elementModel", null);
+    _defineProperty38(this, "from", null);
+    _defineProperty38(this, "to", null);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -30076,11 +30606,28 @@ var StraightLineTool = class extends WhiteboardTool {
 };
 
 // src/tool/GrabTool.ts
+function _defineProperty39(e, r, t) {
+  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey39(t) {
+  var i = _toPrimitive39(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive39(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 GrabTool = class extends WhiteboardTool {
-  camera;
-  downPoint = null;
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope, camera) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty39(this, "camera", void 0);
+    _defineProperty39(this, "downPoint", null);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -30101,34 +30648,25 @@ var GrabTool = class extends WhiteboardTool {
 };
 
 // src/WhiteboardApplication.ts
+function _defineProperty40(e, r, t) {
+  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey40(t) {
+  var i = _toPrimitive40(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive40(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var WHITEBOARD_APP_NAME = "whiteboard";
 var WhiteboardApplication = class extends AbstractApplication {
-  static applicationName = WHITEBOARD_APP_NAME;
-  name = WHITEBOARD_APP_NAME;
-  emitter;
-  toolbarModel;
-  selectElementsModel;
-  trashedElementsModel;
-  pageModel;
-  layers = /* @__PURE__ */ new Map();
-  undoManagers = /* @__PURE__ */ new Map();
-  rootElement = document.createElement("div");
-  paperScope = new import_paper.default.PaperScope();
-  canvasElement = document.createElement("canvas");
-  shadowScope = new import_paper.default.PaperScope();
-  snapshotCanvasElement = document.createElement("canvas");
-  snapshotScope = new import_paper.default.PaperScope();
-  shadowCanvasElement = document.createElement("canvas");
-  shadowEmitter;
-  tools;
-  editors = /* @__PURE__ */ new Map();
-  camera;
-  resizeObserver;
-  option;
-  permissions;
-  inputType = "any";
-  isPenEvent = false;
-  hasPenInput = null;
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -30137,7 +30675,250 @@ var WhiteboardApplication = class extends AbstractApplication {
     return null;
   }
   constructor() {
+    var _this;
     super();
+    _this = this;
+    _defineProperty40(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty40(this, "emitter", void 0);
+    _defineProperty40(this, "toolbarModel", void 0);
+    _defineProperty40(this, "selectElementsModel", void 0);
+    _defineProperty40(this, "trashedElementsModel", void 0);
+    _defineProperty40(this, "pageModel", void 0);
+    _defineProperty40(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty40(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty40(this, "rootElement", document.createElement("div"));
+    _defineProperty40(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty40(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty40(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty40(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty40(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty40(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty40(this, "shadowEmitter", void 0);
+    _defineProperty40(this, "tools", void 0);
+    _defineProperty40(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty40(this, "camera", void 0);
+    _defineProperty40(this, "resizeObserver", void 0);
+    _defineProperty40(this, "option", void 0);
+    _defineProperty40(this, "permissions", void 0);
+    _defineProperty40(this, "linkTarget", null);
+    _defineProperty40(this, "inputType", "any");
+    _defineProperty40(this, "isPenEvent", false);
+    _defineProperty40(this, "hasPenInput", null);
+    _defineProperty40(this, "disableViewModelUpdate", false);
+    _defineProperty40(this, "internalResizeObserver", true);
+    _defineProperty40(this, "enableToolEvent", () => {
+      return !(this.inputType === "pen" && !this.isPenEvent);
+    });
+    _defineProperty40(this, "handlePageSwitch", (pageId) => {
+      for (const editor of this.editors.values()) {
+        editor.hidden();
+      }
+      this.selectElementsModel.clearSelectElementForSelf();
+      waitUntil(() => this.layers.has(pageId), 3e3).then(() => {
+        if (this.layers.has(pageId)) {
+          for (const entry of this.layers.entries()) {
+            entry[1].off("elementInsert", this.handleElementInsert);
+            entry[1].off("elementRemove", this.handleElementRemove);
+            entry[1].off("elementClear", this.handleElementClear);
+          }
+          const renderableModel = this.layers.get(pageId);
+          renderableModel.on("elementInsert", this.handleElementInsert);
+          renderableModel.on("elementRemove", this.handleElementRemove);
+          renderableModel.on("elementClear", this.handleElementClear);
+          renderableModel.flushRenderables();
+          const others = this.userManager.userIdList().filter((v) => v !== this.userId);
+          for (const other of others) {
+            if (this.userMap(other).get(WhiteboardKeys.currentPage) === pageId) {
+              const elementIds = Array.from(this.userMap(other).get(WhiteboardKeys.selectElements).keys()).filter((v) => v !== "inner-map-id");
+              if (elementIds.length > 0) {
+                this.handleElementsSelect(other, elementIds);
+              }
+            }
+          }
+        }
+      });
+      waitUntil(() => this.undoManagers.has(pageId), 3e3).then(() => {
+        if (this.undoManagers.has(pageId)) {
+          for (const entry of this.undoManagers.entries()) {
+            entry[1].off("stack-item-added", this.handleStackItemAdded);
+            entry[1].off("stack-item-popped", this.handleStackItemPopped);
+          }
+          this.undoManagers.get(pageId).on("stack-item-added", this.handleStackItemAdded);
+          this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
+        }
+      });
+      this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+      this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
+    });
+    _defineProperty40(this, "hasPermission", (flag) => {
+      return this.permissions.hasPermission(flag, this.userId);
+    });
+    _defineProperty40(this, "handleStackItemAdded", () => {
+      this.selectElementsModel.clearSelectElementForSelf();
+      this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+      this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
+    });
+    _defineProperty40(this, "handleStackItemPopped", () => {
+      this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+      this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
+    });
+    _defineProperty40(this, "handleLayersChange", (ids) => {
+      for (let i = 0, len = ids.length; i < len; i++) {
+        const id = ids[i];
+        if (!this.layers.has(id)) {
+          const elementsMap = this.getMap(`layer/${id}/elements`);
+          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission);
+          this.layers.set(id, renderableModel);
+        }
+        if (!this.undoManagers.has(id)) {
+          const elementsMap = this.getMap(`layer/${id}/elements`);
+          const undoManager = new Y15.UndoManager(elementsMap, {
+            trackedOrigins: /* @__PURE__ */ new Set([elementsUndoOrigin])
+          });
+          this.undoManagers.set(id, undoManager);
+        }
+      }
+      for (let entry of this.layers.entries()) {
+        if (ids.indexOf(entry[0]) < 0) {
+          const renderableModel = this.layers.get(entry[0]);
+          this.layers.delete(entry[0]);
+          if (renderableModel) {
+            renderableModel.dispose();
+          }
+          const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
+          const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+          if (cameraMode === "free" && entry[0] === currentPage) {
+            this.userMap(this.userId).set(WhiteboardKeys.cameraMode, "main");
+            this.userMap(this.userId).set(WhiteboardKeys.currentPage, this.getMap("attrs").get(WhiteboardKeys.currentPage));
+          }
+        }
+      }
+    });
+    _defineProperty40(this, "getCurrentRenderableModel", () => {
+      let layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+      if (!this.layers.has(layerId)) {
+        this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
+      }
+      return this.layers.get(layerId);
+    });
+    _defineProperty40(this, "handleElementClear", () => {
+      this.paperScope.project.activeLayer.removeChildren();
+    });
+    _defineProperty40(this, "handleElementInsert", (elements) => {
+      for (const element of elements) {
+        element.createPaperElement();
+        const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
+        const children = scope.project.activeLayer.children;
+        const oldPaperElement = children.find((v) => v.data.uuid === element.uuid);
+        if (oldPaperElement) {
+          oldPaperElement.remove();
+        }
+        this.insertElementToParent(element.item, scope.project.activeLayer);
+      }
+    });
+    _defineProperty40(this, "handleElementRemove", (elementId, layerId) => {
+      const layerModel = this.layers.get(layerId);
+      if (!layerModel) {
+        return;
+      }
+      const target = layerModel.elementModels.get(elementId);
+      if (target && target.item) {
+        target.item.remove();
+      }
+      layerModel.elementModels.delete(elementId);
+    });
+    _defineProperty40(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+      const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+      this.layers.get(selfLayerId)?.removeElementItem(elementId);
+    });
+    _defineProperty40(this, "handleElementsTrash", (userId, elements) => {
+      const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
+      const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+      if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
+        return;
+      }
+      elements.forEach((id) => {
+        const paperItem = this.layers.get(targetLayerId).elementModels.get(id);
+        if (paperItem && paperItem.item) {
+          paperItem.item.opacity = 0.3;
+        }
+      });
+    });
+    _defineProperty40(this, "handleElementsSelect", (userId, elements) => {
+      if (!this.editors.has(userId)) {
+        const ctrl = this.userManager.getUser(userId);
+        const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
+          viewerId: this.userId,
+          ctrlId: userId,
+          ctrlNickName: ctrl?.nickName ?? "",
+          ctrlUserMap: this.userMap(userId)
+        });
+        editor2.on("clear", () => {
+          this.selectElementsModel.clearSelectElementForSelf();
+        });
+        this.editors.set(userId, editor2);
+        this.rootElement.appendChild(editor2.rootView);
+      }
+      const editor = this.editors.get(userId);
+      if (elements.length === 0) {
+        editor.hidden();
+        this.emitter.emit("elementDeselected", userId);
+        return;
+      }
+      editor.show();
+      const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
+      const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+      if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
+        return;
+      }
+      const elementModels = elements.map((id) => {
+        return this.layers.get(targetLayerId).elementModels.get(id);
+      }).filter((v) => !!v);
+      editor.setTargets(elementModels);
+      if (elementModels.length === 1) {
+        let model = elementModels[0];
+        if (model.item) {
+          const topLeft = this.paperScope.project.view.projectToView(model.item.bounds.topLeft);
+          const bottomRight = this.paperScope.project.view.projectToView(model.item.bounds.bottomRight);
+          this.emitter.emit("elementSelected", userId, targetLayerId, model.uuid, model.getStyleKeys(), [topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y]);
+        }
+      }
+      if (elementModels.length > 1) {
+        this.emitter.emit("elementDeselected", userId);
+      }
+    });
+    _defineProperty40(this, "onLinkTargetToolbarChange", (style) => {
+      this.toolbarModel.currentTool = style.tool;
+      this.toolbarModel.strokeColor = style.strokeColor;
+      this.toolbarModel.fillColor = style.fillColor;
+      this.toolbarModel.fontSize = style.fontSize;
+      this.toolbarModel.fontFamily = style.fontFamily;
+      this.toolbarModel.strokeWidth = style.strokeWidth;
+      this.toolbarModel.dashArray = style.dashArray;
+    });
+    _defineProperty40(this, "onLinkTargetPermissionChange", (userId, flags) => {
+      if (userId == this.userId) {
+        flags.forEach((flag) => {
+          this.permissions.addPermission(flag, this.userId);
+        });
+      }
+    });
+    _defineProperty40(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+      if (this.option.width > 0 && this.option.height > 0) {
+        const minWidth = Math.max(frameWidth, 10);
+        const minHeight = Math.max(frameHeight, 10);
+        let width = minWidth;
+        let height = width * this.option.height / this.option.width;
+        if (height > minHeight) {
+          height = minHeight;
+          width = height * this.option.width / this.option.height;
+        }
+        this.camera.updateInherentScale(width / this.option.width);
+        this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
+        this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
+        this.camera.triggerZoom();
+      }
+    });
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
     this.rootElement.setAttribute("data-forge-app", "whiteboard");
@@ -30148,7 +30929,9 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.inputType = "pen";
         this.emitter.emit("inputTypeChange", this.inputType);
       }
-    }, { capture: true });
+    }, {
+      capture: true
+    });
     this.emitter = new Whiteboard(this.rootElement);
     this.emitter.getElementAttribute = (layerId, elementId, attribute) => {
       const layerModel = this.layers.get(layerId);
@@ -30198,13 +30981,23 @@ var WhiteboardApplication = class extends AbstractApplication {
       return this.userMap(targetId).get(WhiteboardKeys.currentPage);
     };
     this.emitter.setViewModeToFree = (userId) => {
-      const targetId = userId ? this.hasPermission(64 /* setOthersView */) ? userId : null : this.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");
+        return;
+      }
+      const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
       if (targetId) {
         this.userMap(targetId).set(WhiteboardKeys.cameraMode, "free");
       }
     };
     this.emitter.setViewModeToFlow = (flowId, userId) => {
-      const targetId = userId ? this.hasPermission(64 /* setOthersView */) ? userId : null : this.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");
+        return;
+      }
+      const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
       if (targetId && this.userManager.getUser(flowId)) {
         this.userMap(targetId).set(WhiteboardKeys.cameraMode, flowId);
         const flowPage = this.userMap(flowId).get(WhiteboardKeys.currentPage);
@@ -30214,7 +31007,12 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
     };
     this.emitter.setViewModeToMain = (userId) => {
-      const targetId = userId ? this.hasPermission(64 /* setOthersView */) ? userId : null : this.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");
+        return;
+      }
+      const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
       if (targetId) {
         this.userMap(targetId).set(WhiteboardKeys.cameraMode, "main");
         const mainPage = this.getMap("attrs").get(WhiteboardKeys.currentPage);
@@ -30265,8 +31063,14 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.redo = () => {
       this.undoManager?.redo();
     };
-    this.emitter.rasterize = (page) => {
-      return this.rasterize(page);
+    this.emitter.rasterizeViewport = (scale, page) => {
+      return this.rasterize(1, 1, scale, "viewport", page);
+    };
+    this.emitter.rasterizeElementsBounds = (outputMaxWidth, outputMaxHeight, page) => {
+      return this.rasterize(outputMaxWidth, outputMaxHeight, 1, "bounds", page);
+    };
+    this.emitter.rasterizeMaxBounds = (scale, page) => {
+      return this.rasterize(1, 1, scale, "maxScale", page);
     };
     this.emitter.setInputType = (type) => {
       this.inputType = type;
@@ -30275,8 +31079,9 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.translateCamera = (offsetX, offsetY) => {
       this.camera.translate(offsetX, offsetY);
     };
-    this.emitter.scaleCamera = (scale) => {
-      this.camera.scale(scale);
+    this.emitter.scaleCamera = function(scale) {
+      let origin = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "center";
+      _this.camera.scale(scale, origin);
     };
     this.emitter.resetCamera = () => {
       this.camera.reset();
@@ -30380,9 +31185,6 @@ var WhiteboardApplication = class extends AbstractApplication {
   userMap(userId) {
     return this.getMap(`user/${userId}`);
   }
-  enableToolEvent = () => {
-    return !(this.inputType === "pen" && !this.isPenEvent);
-  };
   async initialize(option) {
     this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
@@ -30392,39 +31194,22 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.option = option;
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
-    this.pageModel = new PageModel(
-      this.getMap("attrs"),
-      this.userManager,
-      (userId) => {
-        return this.userMap(userId);
-      },
-      this.getMap("pages"),
-      this.hasPermission
-    );
+    this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
+      return this.userMap(userId);
+    }, this.getMap("pages"), this.hasPermission);
     this.pageModel.on("pagesChange", this.handleLayersChange);
     this.pageModel.on("switchPage", this.handlePageSwitch);
     if (option.maxScaleRatio && option.maxScaleRatio < 1 && option.maxScaleRatio !== -1) {
       throw new Error(`[@netless/forge-whiteboard] invalid maxScaleRatio ${option.maxScaleRatio}`);
     }
-    this.camera = new Camera(
-      new this.paperScope.Size(option.width, option.height),
-      option.maxScaleRatio ?? -1,
-      this.rootElement,
-      this.userManager,
-      this.paperScope,
-      this.getMap("attrs"),
-      this.hasPermission,
-      (userId) => {
-        return this.userMap(userId);
-      },
-      () => {
-        return [this.paperScope.project.view.size.width, this.paperScope.project.view.size.height];
-      },
-      () => {
-        const rect = this.canvasElement.getBoundingClientRect();
-        return [rect.width, rect.height];
-      }
-    );
+    this.camera = new Camera(new this.paperScope.Size(option.width, option.height), option.maxScaleRatio ?? -1, this.rootElement, this.userManager, this.paperScope, this.getMap("attrs"), this.hasPermission, (userId) => {
+      return this.userMap(userId);
+    }, () => {
+      return [this.paperScope.project.view.size.width, this.paperScope.project.view.size.height];
+    }, () => {
+      const rect = this.canvasElement.getBoundingClientRect();
+      return [rect.width, rect.height];
+    });
     this.camera.on("zoom", (matrix) => {
       this.paperScope.project.view.matrix = matrix;
       this.shadowScope.project.view.matrix = matrix;
@@ -30490,6 +31275,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.canvasElement.style.top = "50%";
     this.canvasElement.style.left = "50%";
     this.canvasElement.style.transform = "translate(-50%, -50%)";
+    this.canvasElement.setAttribute("id", `${this.appId}-main`);
     this.paperScope.setup(this.canvasElement);
     this.paperScope.settings.insertItems = false;
     this.shadowCanvasElement.style.position = "absolute";
@@ -30497,36 +31283,23 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.shadowCanvasElement.style.left = "50%";
     this.shadowCanvasElement.style.transform = "translate(-50%, -50%)";
     this.shadowCanvasElement.style.pointerEvents = "none";
+    this.shadowCanvasElement.setAttribute("id", `${this.appId}-shadow`);
     this.rootElement.appendChild(this.shadowCanvasElement);
     this.shadowScope.setup(this.shadowCanvasElement);
     this.shadowScope.settings.insertItems = false;
+    this.snapshotCanvasElement.setAttribute("id", `${this.appId}-snapshot`);
     this.snapshotScope.setup(this.snapshotCanvasElement);
     this.resizeObserver = new ResizeObserver(() => {
-      const rootBounds = this.rootElement.getBoundingClientRect();
-      const minWidth = Math.max(rootBounds.width, 10);
-      const minHeight = Math.max(rootBounds.height, 10);
-      let width = minWidth;
-      let height = width * this.option.height / this.option.width;
-      if (height > minHeight) {
-        height = minHeight;
-        width = height * this.option.width / this.option.height;
-      }
-      this.camera.updateInherentScale(width / this.option.width);
-      this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
-      this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
-      this.userMap(this.userId).set("viewSize", `${width}.${height}`);
-      this.camera.triggerZoom();
+      if (this.internalResizeObserver) {
+        const rootBounds = this.rootElement.getBoundingClientRect();
+        this.adjustByOutFrame(rootBounds.width, rootBounds.height);
+      }
     });
     this.resizeObserver.observe(this.rootElement);
     if (!this.getMap("attrs").has(WhiteboardKeys.currentPage)) {
       this.getMap("attrs").set(WhiteboardKeys.currentPage, "_i_");
     }
-    this.emitter.indexedNavigation = new IndexedNavigation(
-      this.pageModel,
-      this.userMap(this.userId),
-      this.getMap("indexedNavigation"),
-      this.hasPermission
-    );
+    this.emitter.indexedNavigation = new IndexedNavigation(this.pageModel, this.userMap(this.userId), this.getMap("indexedNavigation"), this.hasPermission);
     this.emitter.indexedNavigation.initIndexed().then((inited) => {
       if (!inited) {
         this.handleLayersChange(this.pageModel.pageList());
@@ -30596,91 +31369,6 @@ var WhiteboardApplication = class extends AbstractApplication {
     });
     this.clearElements();
   }
-  handlePageSwitch = (pageId) => {
-    for (const editor of this.editors.values()) {
-      editor.hidden();
-    }
-    this.selectElementsModel.clearSelectElementForSelf();
-    waitUntil(() => this.layers.has(pageId), 3e3).then(() => {
-      if (this.layers.has(pageId)) {
-        for (const entry of this.layers.entries()) {
-          entry[1].off("elementInsert", this.handleElementInsert);
-          entry[1].off("elementRemove", this.handleElementRemove);
-          entry[1].off("elementClear", this.handleElementClear);
-        }
-        const renderableModel = this.layers.get(pageId);
-        renderableModel.on("elementInsert", this.handleElementInsert);
-        renderableModel.on("elementRemove", this.handleElementRemove);
-        renderableModel.on("elementClear", this.handleElementClear);
-        renderableModel.flushRenderables();
-        const others = this.userManager.userIdList().filter((v) => v !== this.userId);
-        for (const other of others) {
-          if (this.userMap(other).get(WhiteboardKeys.currentPage) === pageId) {
-            const elementIds = Array.from(this.userMap(other).get(WhiteboardKeys.selectElements).keys()).filter((v) => v !== "inner-map-id");
-            if (elementIds.length > 0) {
-              this.handleElementsSelect(other, elementIds);
-            }
-          }
-        }
-      }
-    });
-    waitUntil(() => this.undoManagers.has(pageId), 3e3).then(() => {
-      if (this.undoManagers.has(pageId)) {
-        for (const entry of this.undoManagers.entries()) {
-          entry[1].off("stack-item-added", this.handleStackItemAdded);
-          entry[1].off("stack-item-popped", this.handleStackItemPopped);
-        }
-        this.undoManagers.get(pageId).on("stack-item-added", this.handleStackItemAdded);
-        this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
-      }
-    });
-    this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
-    this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
-  };
-  hasPermission = (flag) => {
-    return this.permissions.hasPermission(flag, this.userId);
-  };
-  handleStackItemAdded = () => {
-    this.selectElementsModel.clearSelectElementForSelf();
-    this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
-    this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
-  };
-  handleStackItemPopped = () => {
-    this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
-    this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
-  };
-  handleLayersChange = (ids) => {
-    for (let i = 0, len = ids.length; i < len; i++) {
-      const id = ids[i];
-      if (!this.layers.has(id)) {
-        const elementsMap = this.getMap(`layer/${id}/elements`);
-        const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission);
-        this.layers.set(id, renderableModel);
-      }
-      if (!this.undoManagers.has(id)) {
-        const elementsMap = this.getMap(`layer/${id}/elements`);
-        const undoManager = new Y15.UndoManager(elementsMap, {
-          trackedOrigins: /* @__PURE__ */ new Set([elementsUndoOrigin])
-        });
-        this.undoManagers.set(id, undoManager);
-      }
-    }
-    for (let entry of this.layers.entries()) {
-      if (ids.indexOf(entry[0]) < 0) {
-        const renderableModel = this.layers.get(entry[0]);
-        this.layers.delete(entry[0]);
-        if (renderableModel) {
-          renderableModel.dispose();
-        }
-        const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
-        const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-        if (cameraMode === "free" && entry[0] === currentPage) {
-          this.userMap(this.userId).set(WhiteboardKeys.cameraMode, "main");
-          this.userMap(this.userId).set(WhiteboardKeys.currentPage, this.getMap("attrs").get(WhiteboardKeys.currentPage));
-        }
-      }
-    }
-  };
   clearElements() {
     const userIds = this.userManager.userIdList();
     const isContinue = userIds.every((userId) => {
@@ -30697,16 +31385,6 @@ var WhiteboardApplication = class extends AbstractApplication {
     }
     setTimeout(() => this.clearElements(), 1e4);
   }
-  getCurrentRenderableModel = () => {
-    let layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-    if (!this.layers.has(layerId)) {
-      this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
-    }
-    return this.layers.get(layerId);
-  };
-  handleElementClear = () => {
-    this.paperScope.project.activeLayer.removeChildren();
-  };
   findElementIndex(target, parent) {
     const children = parent.children;
     let left = 0;
@@ -30723,18 +31401,6 @@ var WhiteboardApplication = class extends AbstractApplication {
     }
     return result;
   }
-  handleElementInsert = (elements) => {
-    for (const element of elements) {
-      element.createPaperElement();
-      const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
-      const children = scope.project.activeLayer.children;
-      const oldPaperElement = children.find((v) => v.data.uuid === element.uuid);
-      if (oldPaperElement) {
-        oldPaperElement.remove();
-      }
-      this.insertElementToParent(element.item, scope.project.activeLayer);
-    }
-  };
   insertElementToParent(element, parent) {
     const children = parent.children;
     const at = this.findElementIndex(element.data.index, parent);
@@ -30746,85 +31412,10 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
     }
   }
-  handleElementRemove = (elementId, layerId) => {
-    const layerModel = this.layers.get(layerId);
-    if (!layerModel) {
-      return;
-    }
-    const target = layerModel.elementModels.get(elementId);
-    if (target && target.item) {
-      target.item.remove();
-    }
-    layerModel.elementModels.delete(elementId);
-  };
-  handleRemoveTrashedElementForSelf = (userId, elementId) => {
-    const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-    this.layers.get(selfLayerId)?.removeElementItem(elementId);
-  };
-  handleElementsTrash = (userId, elements) => {
-    const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
-    const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-    if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
-      return;
-    }
-    elements.forEach((id) => {
-      const paperItem = this.layers.get(targetLayerId).elementModels.get(id);
-      if (paperItem && paperItem.item) {
-        paperItem.item.opacity = 0.3;
-      }
-    });
-  };
-  handleElementsSelect = (userId, elements) => {
-    if (!this.editors.has(userId)) {
-      const ctrl = this.userManager.getUser(userId);
-      const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
-        viewerId: this.userId,
-        ctrlId: userId,
-        ctrlNickName: ctrl?.nickName ?? "",
-        ctrlUserMap: this.userMap(userId)
-      });
-      editor2.on("clear", () => {
-        this.selectElementsModel.clearSelectElementForSelf();
-      });
-      this.editors.set(userId, editor2);
-      this.rootElement.appendChild(editor2.rootView);
-    }
-    const editor = this.editors.get(userId);
-    if (elements.length === 0) {
-      editor.hidden();
-      this.emitter.emit("elementDeselected", userId);
-      return;
-    }
-    editor.show();
-    const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
-    const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
-    if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
-      return;
-    }
-    const elementModels = elements.map((id) => {
-      return this.layers.get(targetLayerId).elementModels.get(id);
-    }).filter((v) => !!v);
-    editor.setTargets(elementModels);
-    if (elementModels.length === 1) {
-      let model = elementModels[0];
-      if (model.item) {
-        const topLeft = this.paperScope.project.view.projectToView(model.item.bounds.topLeft);
-        const bottomRight = this.paperScope.project.view.projectToView(model.item.bounds.bottomRight);
-        this.emitter.emit(
-          "elementSelected",
-          userId,
-          targetLayerId,
-          model.uuid,
-          model.getStyleKeys(),
-          [topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y]
-        );
-      }
-    }
-    if (elementModels.length > 1) {
-      this.emitter.emit("elementDeselected", userId);
-    }
-  };
-  rasterize(page) {
+  ensureScale(outputWidth, outputHeight, originSize) {
+    return Math.min(outputWidth / originSize.width, outputHeight / originSize.height);
+  }
+  rasterize(outputMaxWidth, outputMaxHeight, scale, area, page) {
     let pageId;
     if (typeof page === "string") {
       pageId = page;
@@ -30838,8 +31429,6 @@ var WhiteboardApplication = class extends AbstractApplication {
       return Promise.resolve(null);
     }
     this.snapshotScope.project.activeLayer.removeChildren();
-    this.snapshotScope.view.matrix = this.paperScope.project.view.matrix.clone();
-    this.snapshotScope.view.viewSize = this.paperScope.project.view.viewSize.clone();
     for (const key of Array.from(renderableModel.elements.keys())) {
       let elementModel = null;
       if (renderableModel.elementModels.has(key)) {
@@ -30855,17 +31444,86 @@ var WhiteboardApplication = class extends AbstractApplication {
           elementModel.createPaperElement();
         }
         if (elementModel.item) {
-          const paperItem = elementModel.item.clone({ insert: false });
+          const paperItem = elementModel.item.clone({
+            insert: false
+          });
           this.snapshotScope.project.activeLayer.addChild(paperItem);
         }
       }
     }
+    if (area === "bounds") {
+      const bounds = this.snapshotScope.project.activeLayer.bounds;
+      const scale2 = this.ensureScale(outputMaxWidth, outputMaxHeight, bounds.size);
+      const matrix = new this.paperScope.Matrix();
+      matrix.scale(scale2);
+      matrix.translate({
+        x: -bounds.x,
+        y: -bounds.y
+      });
+      this.snapshotScope.view.viewSize = bounds.size.multiply(scale2);
+      this.snapshotScope.view.matrix = matrix;
+    } else if (area === "maxScale" && this.option.maxScaleRatio && this.option.maxScaleRatio !== -1) {
+      const width = this.option.width * this.option.maxScaleRatio;
+      const height = this.option.height * this.option.maxScaleRatio;
+      const offsetX = this.option.width * (this.option.maxScaleRatio - 1) / 2;
+      const offsetY = this.option.height * (this.option.maxScaleRatio - 1) / 2;
+      const matrix = new this.paperScope.Matrix();
+      matrix.scale(scale);
+      matrix.translate({
+        x: offsetX,
+        y: offsetY
+      });
+      this.snapshotScope.view.viewSize = new this.snapshotScope.Size(width, height).multiply(scale);
+      this.snapshotScope.view.matrix = matrix;
+    } else {
+      this.snapshotScope.view.matrix = this.paperScope.project.view.matrix.clone();
+      this.snapshotScope.view.matrix.scale(scale, this.paperScope.project.view.bounds.topLeft);
+      this.snapshotScope.view.viewSize = this.paperScope.project.view.viewSize.clone().multiply(scale);
+    }
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(this.snapshotScope.view.element.toDataURL("image/png"));
       }, 32);
     });
   }
+  disableViewModel() {
+    this.disableViewModelUpdate = true;
+  }
+  linkToWhiteboard(targetId) {
+    console.log("linkToWhiteboard, linkToWhiteboard, linkToWhiteboard");
+    if (this.linkTarget) {
+      this.unlink();
+    }
+    this.linkTarget = this.applicationManager.getInstances(targetId);
+    if (this.linkTarget) {
+      this.linkTarget.toolbarModel.on("update", this.onLinkTargetToolbarChange);
+      this.linkTarget.permissions.on("change", this.onLinkTargetPermissionChange);
+    } else {
+      throw new Error(`[@netless/forge-whiteboard] link target ${targetId} not found`);
+    }
+  }
+  unlink() {
+    if (this.linkTarget) {
+      this.linkTarget.toolbarModel.off("update", this.onLinkTargetToolbarChange);
+      this.linkTarget.permissions.off("change", this.onLinkTargetPermissionChange);
+    }
+  }
+  setViewSize(width, height) {
+    this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
+    this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
+  }
+  getViewSize() {
+    const size = this.paperScope.view.viewSize;
+    return [size.width, size.height];
+  }
+  updateInternalResizeObserverStatus(value) {
+    this.internalResizeObserver = value;
+  }
+  updateOptionSize(width, height) {
+    this.option.width = width;
+    this.option.height = height;
+    this.camera.updateInitSize(new import_paper.default.Size(width, height));
+  }
   async dispose() {
     this.selectElementsModel.dispose();
     this.trashedElementsModel.dispose();
@@ -30882,6 +31540,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.resizeObserver.disconnect();
   }
 };
+_defineProperty40(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 export {
   Whiteboard,
   WhiteboardApplication,