@netless/forge-whiteboard 1.1.4 → 1.2.0-alpha.1

package/dist/whiteboard.js

@@ -20839,8 +20839,8 @@ var require_lodash = __commonJS({
       }
       var runInContext = function runInContext2(context) {
         context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-        var Array14 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError2 = context.TypeError;
-        var arrayProto = Array14.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
+        var Array13 = context.Array, Date2 = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError2 = context.TypeError;
+        var arrayProto = Array13.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
         var coreJsData = context["__core-js_shared__"];
         var funcToString = funcProto.toString;
         var hasOwnProperty = objectProto.hasOwnProperty;
@@ -21263,7 +21263,7 @@ var require_lodash = __commonJS({
           }
         }
         function baseAt(object, paths) {
-          var index = -1, length = paths.length, result2 = Array14(length), skip = object == null;
+          var index = -1, length = paths.length, result2 = Array13(length), skip = object == null;
           while (++index < length) {
             result2[index] = skip ? undefined2 : get(object, paths[index]);
           }
@@ -21509,7 +21509,7 @@ var require_lodash = __commonJS({
           return number >= nativeMin(start, end) && number < nativeMax(start, end);
         }
         function baseIntersection(arrays, iteratee2, comparator) {
-          var includes2 = comparator ? arrayIncludesWith : arrayIncludes, length = arrays[0].length, othLength = arrays.length, othIndex = othLength, caches = Array14(othLength), maxLength = Infinity, result2 = [];
+          var includes2 = comparator ? arrayIncludesWith : arrayIncludes, length = arrays[0].length, othLength = arrays.length, othIndex = othLength, caches = Array13(othLength), maxLength = Infinity, result2 = [];
           while (othIndex--) {
             var array = arrays[othIndex];
             if (othIndex && iteratee2) {
@@ -21690,7 +21690,7 @@ var require_lodash = __commonJS({
           return value < other;
         }
         function baseMap(collection, iteratee2) {
-          var index = -1, result2 = isArrayLike(collection) ? Array14(collection.length) : [];
+          var index = -1, result2 = isArrayLike(collection) ? Array13(collection.length) : [];
           baseEach(collection, function(value, key, collection2) {
             result2[++index] = iteratee2(value, key, collection2);
           });
@@ -21865,7 +21865,7 @@ var require_lodash = __commonJS({
           return lower + nativeFloor(nativeRandom() * (upper - lower + 1));
         }
         function baseRange(start, end, step, fromRight) {
-          var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result2 = Array14(length);
+          var index = -1, length = nativeMax(nativeCeil((end - start) / (step || 1)), 0), result2 = Array13(length);
           while (length--) {
             result2[fromRight ? length : ++index] = start;
             start += step;
@@ -21947,7 +21947,7 @@ var require_lodash = __commonJS({
           }
           length = start > end ? 0 : end - start >>> 0;
           start >>>= 0;
-          var result2 = Array14(length);
+          var result2 = Array13(length);
           while (++index < length) {
             result2[index] = array[index + start];
           }
@@ -22107,7 +22107,7 @@ var require_lodash = __commonJS({
           if (length < 2) {
             return length ? baseUniq(arrays[0]) : [];
           }
-          var index = -1, result2 = Array14(length);
+          var index = -1, result2 = Array13(length);
           while (++index < length) {
             var array = arrays[index], othIndex = -1;
             while (++othIndex < length) {
@@ -22204,7 +22204,7 @@ var require_lodash = __commonJS({
           return object.index - other.index;
         }
         function composeArgs(args, partials, holders, isCurried) {
-          var argsIndex = -1, argsLength = args.length, holdersLength = holders.length, leftIndex = -1, leftLength = partials.length, rangeLength = nativeMax(argsLength - holdersLength, 0), result2 = Array14(leftLength + rangeLength), isUncurried = !isCurried;
+          var argsIndex = -1, argsLength = args.length, holdersLength = holders.length, leftIndex = -1, leftLength = partials.length, rangeLength = nativeMax(argsLength - holdersLength, 0), result2 = Array13(leftLength + rangeLength), isUncurried = !isCurried;
           while (++leftIndex < leftLength) {
             result2[leftIndex] = partials[leftIndex];
           }
@@ -22219,7 +22219,7 @@ var require_lodash = __commonJS({
           return result2;
         }
         function composeArgsRight(args, partials, holders, isCurried) {
-          var argsIndex = -1, argsLength = args.length, holdersIndex = -1, holdersLength = holders.length, rightIndex = -1, rightLength = partials.length, rangeLength = nativeMax(argsLength - holdersLength, 0), result2 = Array14(rangeLength + rightLength), isUncurried = !isCurried;
+          var argsIndex = -1, argsLength = args.length, holdersIndex = -1, holdersLength = holders.length, rightIndex = -1, rightLength = partials.length, rangeLength = nativeMax(argsLength - holdersLength, 0), result2 = Array13(rangeLength + rightLength), isUncurried = !isCurried;
           while (++argsIndex < rangeLength) {
             result2[argsIndex] = args[argsIndex];
           }
@@ -22236,7 +22236,7 @@ var require_lodash = __commonJS({
         }
         function copyArray(source, array) {
           var index = -1, length = source.length;
-          array || (array = Array14(length));
+          array || (array = Array13(length));
           while (++index < length) {
             array[index] = source[index];
           }
@@ -22369,7 +22369,7 @@ var require_lodash = __commonJS({
         function createCurry(func, bitmask, arity) {
           var Ctor = createCtor(func);
           function wrapper() {
-            var length = arguments.length, args = Array14(length), index = length, placeholder = getHolder(wrapper);
+            var length = arguments.length, args = Array13(length), index = length, placeholder = getHolder(wrapper);
             while (index--) {
               args[index] = arguments[index];
             }
@@ -22449,7 +22449,7 @@ var require_lodash = __commonJS({
         function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary2, arity) {
           var isAry = bitmask & WRAP_ARY_FLAG, isBind = bitmask & WRAP_BIND_FLAG, isBindKey = bitmask & WRAP_BIND_KEY_FLAG, isCurried = bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG), isFlip = bitmask & WRAP_FLIP_FLAG, Ctor = isBindKey ? undefined2 : createCtor(func);
           function wrapper() {
-            var length = arguments.length, args = Array14(length), index = length;
+            var length = arguments.length, args = Array13(length), index = length;
             while (index--) {
               args[index] = arguments[index];
             }
@@ -22548,7 +22548,7 @@ var require_lodash = __commonJS({
         function createPartial(func, bitmask, thisArg, partials) {
           var isBind = bitmask & WRAP_BIND_FLAG, Ctor = createCtor(func);
           function wrapper() {
-            var argsIndex = -1, argsLength = arguments.length, leftIndex = -1, leftLength = partials.length, args = Array14(leftLength + argsLength), fn = this && this !== root && this instanceof wrapper ? Ctor : func;
+            var argsIndex = -1, argsLength = arguments.length, leftIndex = -1, leftLength = partials.length, args = Array13(leftLength + argsLength), fn = this && this !== root && this instanceof wrapper ? Ctor : func;
             while (++leftIndex < leftLength) {
               args[leftIndex] = partials[leftIndex];
             }
@@ -23161,12 +23161,12 @@ var require_lodash = __commonJS({
         function overRest(func, start, transform2) {
           start = nativeMax(start === undefined2 ? func.length - 1 : start, 0);
           return function() {
-            var args = arguments, index = -1, length = nativeMax(args.length - start, 0), array = Array14(length);
+            var args = arguments, index = -1, length = nativeMax(args.length - start, 0), array = Array13(length);
             while (++index < length) {
               array[index] = args[start + index];
             }
             index = -1;
-            var otherArgs = Array14(start + 1);
+            var otherArgs = Array13(start + 1);
             while (++index < start) {
               otherArgs[index] = args[index];
             }
@@ -23278,7 +23278,7 @@ var require_lodash = __commonJS({
           result2.__values__ = wrapper.__values__;
           return result2;
         }
-        function chunk7(array, size2, guard) {
+        function chunk8(array, size2, guard) {
           if (guard ? isIterateeCall(array, size2, guard) : size2 === undefined2) {
             size2 = 1;
           } else {
@@ -23288,7 +23288,7 @@ var require_lodash = __commonJS({
           if (!length || size2 < 1) {
             return [];
           }
-          var index = 0, resIndex = 0, result2 = Array14(nativeCeil(length / size2));
+          var index = 0, resIndex = 0, result2 = Array13(nativeCeil(length / size2));
           while (index < length) {
             result2[resIndex++] = baseSlice(array, index, index += size2);
           }
@@ -23309,7 +23309,7 @@ var require_lodash = __commonJS({
           if (!length) {
             return [];
           }
-          var args = Array14(length - 1), array = arguments[0], index = length;
+          var args = Array13(length - 1), array = arguments[0], index = length;
           while (index--) {
             args[index - 1] = arguments[index];
           }
@@ -23811,7 +23811,7 @@ var require_lodash = __commonJS({
           return isString(collection) ? fromIndex <= length && collection.indexOf(value, fromIndex) > -1 : !!length && baseIndexOf(collection, value, fromIndex) > -1;
         }
         var invokeMap = baseRest(function(collection, path, args) {
-          var index = -1, isFunc = typeof path == "function", result2 = isArrayLike(collection) ? Array14(collection.length) : [];
+          var index = -1, isFunc = typeof path == "function", result2 = isArrayLike(collection) ? Array13(collection.length) : [];
           baseEach(collection, function(value) {
             result2[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args);
           });
@@ -24194,7 +24194,7 @@ var require_lodash = __commonJS({
         }()) ? baseIsArguments : function(value) {
           return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
         };
-        var isArray = Array14.isArray;
+        var isArray = Array13.isArray;
         var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer;
         function isArrayLike(value) {
           return value != null && isLength(value.length) && !isFunction(value);
@@ -25150,7 +25150,7 @@ var require_lodash = __commonJS({
         lodash.bindKey = bindKey;
         lodash.castArray = castArray;
         lodash.chain = chain;
-        lodash.chunk = chunk7;
+        lodash.chunk = chunk8;
         lodash.compact = compact;
         lodash.concat = concat;
         lodash.cond = cond;
@@ -25639,7 +25639,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/WhiteboardApplication.ts
-var import_forge_room14 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var Y15 = __toESM(require("yjs"), 1);
 var import_paper = __toESM(require_paper_full(), 1);
 
@@ -25647,7 +25647,7 @@ var import_paper = __toESM(require_paper_full(), 1);
 var Y12 = __toESM(require("yjs"), 1);
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
-var import_forge_room6 = require("@netless/forge-room");
+var import_forge_room4 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25800,6 +25800,9 @@ function ae(e, t = {}) {
   return ce(me(e, t), t);
 }
 
+// src/model/renderable/CurveModel.ts
+var import_lodash = __toESM(require_lodash(), 1);
+
 // src/model/renderable/ElementModel.ts
 var Y = __toESM(require("yjs"), 1);
 var import_forge_room = require("@netless/forge-room");
@@ -25887,23 +25890,12 @@ var ElementModel = class _ElementModel {
   set shadow(value) {
     this.root.set(_ElementModel.KEYS.shadow, value);
   }
-  get isPerformanceEnvironment() {
-    return this.isPerformanceMode() && this.shouldUseLocalPoints;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
+  constructor(root, scope, liveCursor) {
     _defineProperty(this, "shadowEmitter", null);
     _defineProperty(this, "root", void 0);
     _defineProperty(this, "scope", void 0);
     _defineProperty(this, "item", void 0);
-    _defineProperty(this, "clearLocalPointsWhenYPointsChange", void 0);
-    _defineProperty(this, "shouldUseLocalPoints", void 0);
-    _defineProperty(this, "localPointsPick", void 0);
     _defineProperty(this, "liveCursor", void 0);
-    _defineProperty(this, "appendPointsTimer", null);
-    _defineProperty(this, "setPointsTimer", null);
-    _defineProperty(this, "pointsUpdateTimer", null);
-    _defineProperty(this, "isPerformanceMode", void 0);
-    _defineProperty(this, "localPoints", []);
     _defineProperty(this, "handlePropChange", (events) => {
       if (!this.item) {
         return;
@@ -25942,80 +25934,23 @@ var ElementModel = class _ElementModel {
             }
           }
         } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
-          if (this.isPerformanceEnvironment) {
-            this.handlePointsChangePerformance();
-          } else {
-            this.handlePointsChangeDirect();
+          this.onVectorUpdate();
+          const liveCursorPoint = this.liveCursorPoint();
+          const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+          if (liveCursorPoint && ownerId) {
+            this.liveCursor.updateCursorPosition(liveCursorPoint, this.root.get(_ElementModel.KEYS.ownerId));
           }
         } else {
         }
       }
     });
-    _defineProperty(this, "onPointsArrayChange", (points) => {
-      if (this.localPoints.length >= points.length) {
-        return;
-      }
-      const pointsChunk = points.slice(this.localPoints.length, this.localPoints.length + this.localPointsPick);
-      this.localPoints = this.localPoints.concat(pointsChunk);
-      this.onVectorUpdate();
-      this.pointsUpdateTimer = window.requestAnimationFrame(() => {
-        this.onPointsArrayChange(points);
-      });
-    });
-    this.isPerformanceMode = isPerformanceMode;
     this.scope = scope;
     this.liveCursor = liveCursor;
     this.root = root;
-    if (this.root.doc) {
-      if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
-        this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
-      }
-    } else {
+    if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
       this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
     }
-  }
-  bindObserver() {
-    const beforeL = this.root._eH?.l?.length ?? -1;
-    const beforeDL = this.root._dEH?.l?.length ?? -1;
-    (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
-    this.subBindObserver();
-    const afterRemoveL = this.root._eH?.l?.length ?? -1;
-    const afterRemoveDL = this.root._dEH?.l?.length ?? -1;
     this.root.observeDeep(this.handlePropChange);
-    const afterAddL = this.root._eH?.l?.length ?? -1;
-    const afterAddDL = this.root._dEH?.l?.length ?? -1;
-    console.log(`[][][] bindObserver uuid=${this.uuid} doc=${!!this.root.doc} _eH: ${beforeL}->${afterRemoveL}->${afterAddL} _dEH: ${beforeDL}->${afterRemoveDL}->${afterAddDL}`);
-  }
-  subBindObserver() {
-  }
-  handlePointsChangeDirect() {
-    this.onVectorUpdate();
-    const liveCursorPoint = this.liveCursorPoint();
-    const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
-    if (liveCursorPoint && ownerId) {
-      this.liveCursor.updateCursorPosition(liveCursorPoint, this.root.get(_ElementModel.KEYS.ownerId));
-    }
-  }
-  handlePointsChangePerformance() {
-    const liveCursorPoint = this.liveCursorPoint();
-    const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
-    if (liveCursorPoint && ownerId) {
-      this.liveCursor.updateCursorPosition(liveCursorPoint, this.root.get(_ElementModel.KEYS.ownerId));
-    }
-    if (this.liveCursor.userManager.selfId !== ownerId || this.localPoints.length === 0) {
-      if (this.pointsUpdateTimer) {
-        window.cancelAnimationFrame(this.pointsUpdateTimer);
-      }
-      if (this.shadow == "") {
-        this.localPoints = this.points;
-        this.onVectorUpdate();
-      } else {
-        if (this.clearLocalPointsWhenYPointsChange) {
-          this.localPoints = [];
-        }
-        this.onPointsArrayChange(this.points);
-      }
-    }
   }
   createPaperElement() {
     this.createPaperItem();
@@ -26028,48 +25963,14 @@ var ElementModel = class _ElementModel {
     }
   }
   appendPoints(points) {
-    if (this.isPerformanceEnvironment) {
-      this.appendPointsPerformance(points);
-    } else {
-      this.appendPointsDirect(points);
-    }
-  }
-  appendPointsDirect(points) {
     this.root.get(_ElementModel.KEYS.points).push(points);
   }
-  appendPointsPerformance(points) {
-    this.localPoints = this.localPoints.concat(points);
-    this.onVectorUpdate();
-    if (this.appendPointsTimer) {
-      window.clearTimeout(this.appendPointsTimer);
-    }
-    if (this.localPoints.length % 80 === 0) {
-      const yArray = this.root.get(_ElementModel.KEYS.points);
-      yArray?.push(this.localPoints.slice(yArray.length));
-    }
-    this.appendPointsTimer = window.setTimeout(() => {
-      this.appendPointsTimer = null;
-      if (this.localPoints.length > 0) {
-        const yArray = this.root.get(_ElementModel.KEYS.points);
-        yArray?.push(this.localPoints.slice(yArray.length));
-      }
-    }, 100);
-  }
   setPoints(points) {
-    if (this.isPerformanceEnvironment) {
-      this.setPointsPerformance(points);
-    } else {
-      this.setPointsDirect(points);
-    }
-  }
-  setPointsDirect(points) {
     if (this.root.doc) {
       this.root.doc.transact(() => {
         const yArray = this.root.get(_ElementModel.KEYS.points);
-        if (yArray) {
-          yArray.delete(0, yArray.length);
-          yArray.push(points);
-        }
+        yArray.delete(0, yArray.length);
+        yArray.push(points);
       });
     } else {
       const yArray = this.root.get(_ElementModel.KEYS.points) || new Y.Array();
@@ -26078,29 +25979,6 @@ var ElementModel = class _ElementModel {
       this.root.set(_ElementModel.KEYS.points, yArray);
     }
   }
-  setPointsPerformance(points) {
-    this.localPoints = points;
-    this.onVectorUpdate();
-    if (this.setPointsTimer) {
-      window.clearTimeout(this.setPointsTimer);
-    }
-    this.setPointsTimer = window.setTimeout(() => {
-      if (this.root.doc) {
-        this.root.doc.transact(() => {
-          const yArray = this.root.get(_ElementModel.KEYS.points);
-          if (yArray) {
-            yArray.delete(0, yArray.length);
-            yArray.push(points);
-          }
-        });
-      } else {
-        const yArray = this.root.get(_ElementModel.KEYS.points) || new Y.Array();
-        yArray.delete(0, yArray.length);
-        yArray.push(points);
-        this.root.set(_ElementModel.KEYS.points, yArray);
-      }
-    }, 100);
-  }
   appendPointsMatrix(matrix) {
     const current = new this.scope.Matrix(this.pointsMatrix);
     const next = matrix.appended(current);
@@ -26127,9 +26005,6 @@ var ElementModel = class _ElementModel {
   }
   dispose() {
     this.subDispose();
-  }
-  disposeObserver() {
-    console.log(`[][][] disposeObserver uuid=${this.uuid}`);
     (0, import_forge_room.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
@@ -26202,53 +26077,47 @@ function _toPrimitive3(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var CurveModel = class extends ElementModel {
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty3(this, "item", null);
+    _defineProperty3(this, "debugPath", void 0);
     _defineProperty3(this, "debug", false);
-    _defineProperty3(this, "clearLocalPointsWhenYPointsChange", false);
-    _defineProperty3(this, "shouldUseLocalPoints", true);
-    _defineProperty3(this, "localPointsPick", 6);
-    if (!this.root.doc || !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
-    if (!this.root.doc || !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y2.Array());
     }
+    this.debugPath = new scope.Path();
   }
   average(a2, b2) {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const hasRealPressure = points.some((p) => p.length >= 3 && p[2] > 0);
-    const viewScale = this.scope.project.view.matrix.scaling.x || 1;
-    const taper = this.strokeWidth * 5 / viewScale;
-    const streamline = Math.min(0.7, 0.7 * viewScale);
     return ae(points, {
       size: this.strokeWidth,
-      smoothing: 0.7,
-      thinning: 0.5,
-      streamline,
-      simulatePressure: !hasRealPressure,
+      smoothing: 0.5,
+      thinning: -0.5,
+      streamline: 0.5,
+      simulatePressure: true,
       start: {
-        taper,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const points = this.localPoints.length === 0 ? this.points : this.localPoints;
+    const points = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const output = [];
-    for (let i = 0, len = points.length; i < len; i += 3) {
+    for (let i = 0, len = points.length; i < len; i += 2) {
       const p = new this.scope.Point(points[i], points[i + 1]);
       const tp = p.transform(matrix);
-      const pressure = points[i + 2] ?? 0;
-      output.push([tp.x, tp.y, pressure]);
+      output.push([tp.x, tp.y]);
     }
     return output;
   }
@@ -26277,30 +26146,34 @@ var CurveModel = class extends ElementModel {
     }
     return path;
   }
+  updateDebugPath() {
+    this.debugPath = new this.scope.Path();
+    const points = (0, import_lodash.chunk)(this.points, 2);
+    for (let i = 0, len = points.length; i < len; i++) {
+      const point = new this.scope.Point(points[i][0], points[i][1]);
+      if (i === 0) {
+        this.debugPath.moveTo(point);
+      } else {
+        this.debugPath.lineTo(point);
+      }
+      this.debugPath.strokeWidth = 1;
+      this.debugPath.strokeColor = new this.scope.Color(1, 0, 0, 1);
+    }
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
-    const matrixedPts = this.matrixedPoints();
     if (this.debug) {
-      const path = new this.scope.Path();
-      for (let i = 0; i < matrixedPts.length; i++) {
-        const p = new this.scope.Point(matrixedPts[i][0], matrixedPts[i][1]);
-        if (i === 0) {
-          path.moveTo(p);
-        } else {
-          path.lineTo(p);
-        }
-      }
-      this.item.removeSegments();
-      this.item.addSegments(path.segments);
-      this.item.fillColor = null;
-      this.item.strokeWidth = this.strokeWidth;
-    } else {
-      const points = this.parsePoints(matrixedPts);
-      const path = this.createPath(points);
-      this.item.removeSegments();
-      this.item.addSegments(path.segments);
+      this.debugPath.remove();
+      this.updateDebugPath();
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
+    this.item.removeSegments();
+    this.item.addSegments(path.segments);
+    if (this.debug) {
+      this.item.addChild(this.debugPath);
     }
   }
   createPaperItem() {
@@ -26323,11 +26196,11 @@ var CurveModel = class extends ElementModel {
   }
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
-    if (yArray.length < 3) {
+    if (yArray.length < 2) {
       return null;
     }
     const len = yArray.length;
-    const point = new this.scope.Point(yArray.get(len - 3), yArray.get(len - 2));
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
   onStyleKeyUpdate(key) {
@@ -26365,24 +26238,15 @@ function _toPrimitive4(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SelectorModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length >= 4) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty4(this, "item", null);
-    _defineProperty4(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty4(this, "shouldUseLocalPoints", true);
-    _defineProperty4(this, "localPointsPick", 4);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "selector");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       const initPoints = new Y3.Array();
-      initPoints.push([0, 0, 0, 0]);
+      initPoints.push([0, 0, 0, 0, 0]);
       this.root.set("points", initPoints);
     }
   }
@@ -26393,8 +26257,8 @@ var SelectorModel = class extends ElementModel {
   }
   createPaperRect() {
     const scope = this.scope;
-    const bounds = new scope.Rectangle(new scope.Point(this.drawPoints[0], this.drawPoints[1]), new scope.Size(this.drawPoints[2], this.drawPoints[3]));
-    return new scope.Path.Rectangle(bounds);
+    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]));
   }
   onVectorUpdate() {
     if (!this.item) {
@@ -26428,8 +26292,7 @@ var SelectorModel = class extends ElementModel {
 var Y4 = __toESM(require("yjs"), 1);
 
 // src/utils/paperjs.ts
-var import_lodash = __toESM(require_lodash(), 1);
-var import_forge_room2 = require("@netless/forge-room");
+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;
 }
@@ -26462,7 +26325,7 @@ function serializePath(path) {
   }, []);
 }
 function deserializePath(points, scope, matrix) {
-  const segmentGroup = (0, import_lodash.chunk)(points, 6);
+  const segmentGroup = (0, import_lodash2.chunk)(points, 6);
   const path = new scope.Path();
   path.segments = segmentGroup.map((v) => deserializeSegment(v, scope, matrix));
   return path;
@@ -26472,27 +26335,7 @@ var AnimationFrame = class {
     _defineProperty5(this, "callbacks", []);
     _defineProperty5(this, "lastTime", 0);
     _defineProperty5(this, "fps", 45);
-    _defineProperty5(this, "lastCallbackTime", 0);
-    _defineProperty5(this, "fpsBuffer", []);
-    _defineProperty5(this, "FPS_REPORT_INTERVAL", 2700);
     _defineProperty5(this, "handleCallbacks", () => {
-      const now = performance.now();
-      if (this.lastCallbackTime > 0) {
-        const actualFps = 1e3 / (now - this.lastCallbackTime);
-        this.fpsBuffer.push(actualFps);
-        if (this.fpsBuffer.length >= this.FPS_REPORT_INTERVAL) {
-          const avg = this.fpsBuffer.reduce((a2, b2) => a2 + b2, 0) / this.fpsBuffer.length;
-          const min = Math.min(...this.fpsBuffer);
-          const sorted = [...this.fpsBuffer].sort((a2, b2) => a2 - b2);
-          const p90 = sorted[Math.floor(sorted.length * 0.9)];
-          (0, import_forge_room2.metrics)().gauge("fps", Math.round(avg), {
-            min: Math.round(min),
-            p90: Math.round(p90)
-          });
-          this.fpsBuffer = [];
-        }
-      }
-      this.lastCallbackTime = now;
       const functions = this.callbacks;
       this.callbacks = [];
       for (let i = 0, l2 = functions.length; i < l2; i++) {
@@ -26536,22 +26379,13 @@ function _toPrimitive6(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SegmentsModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length >= 4) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, type, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, type, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty6(this, "item", null);
-    _defineProperty6(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty6(this, "shouldUseLocalPoints", true);
-    _defineProperty6(this, "localPointsPick", 24);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", type);
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y4.Array());
     }
   }
@@ -26571,13 +26405,13 @@ var SegmentsModel = class extends ElementModel {
     }
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     this.item.removeSegments();
-    const next = deserializePath(this.drawPoints, this.scope, matrix);
+    const next = deserializePath(this.points, this.scope, matrix);
     this.item.addSegments(next.segments);
     this.item.closePath();
   }
   createPaperItem() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    this.item = deserializePath(this.drawPoints, this.scope, matrix);
+    this.item = deserializePath(this.points, this.scope, matrix);
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.dashArray = this.dashArray;
     this.item.strokeWidth = this.strokeWidth;
@@ -26605,7 +26439,7 @@ var SegmentsModel = class extends ElementModel {
 
 // src/model/renderable/LineModel.ts
 var Y5 = __toESM(require("yjs"), 1);
-var import_lodash3 = __toESM(require_lodash(), 1);
+var import_lodash4 = __toESM(require_lodash(), 1);
 
 // src/tool/WhiteboardTool.ts
 function _defineProperty7(e, r, t) {
@@ -26625,8 +26459,6 @@ function _toPrimitive7(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var DRAG_FPS = 10;
-var DRAG_FRAME_MS = 1e3 / DRAG_FPS;
 var WhiteboardTool = class {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     _defineProperty7(this, "modelGetter", void 0);
@@ -26635,60 +26467,24 @@ var WhiteboardTool = class {
     _defineProperty7(this, "shadowEmitter", void 0);
     _defineProperty7(this, "enableToolEvent", void 0);
     _defineProperty7(this, "eventAvailable", false);
-    _defineProperty7(this, "lastDragTime", 0);
-    _defineProperty7(this, "dragRafId", 0);
-    _defineProperty7(this, "pendingDragEvent", null);
     _defineProperty7(this, "onMouseDownSelf", (event) => {
       this.eventAvailable = this.enableToolEvent();
       if (!this.eventAvailable) {
         return;
       }
-      this.lastDragTime = 0;
-      if (this.dragRafId) {
-        cancelAnimationFrame(this.dragRafId);
-        this.dragRafId = 0;
-      }
-      this.pendingDragEvent = null;
       this.shadowEmitter.setActive(true);
       this.onMouseDown(event);
     });
-    _defineProperty7(this, "flushPendingDrag", () => {
-      this.dragRafId = 0;
-      if (this.pendingDragEvent) {
-        this.lastDragTime = performance.now();
-        const event = this.pendingDragEvent;
-        this.pendingDragEvent = null;
-        this.onMouseDrag(event);
-      }
-    });
     _defineProperty7(this, "onMouseDragSelf", (event) => {
       if (!this.eventAvailable) {
         return;
       }
-      const now = performance.now();
-      if (now - this.lastDragTime >= DRAG_FRAME_MS) {
-        this.lastDragTime = now;
-        this.pendingDragEvent = null;
-        this.onMouseDrag(event);
-      } else {
-        this.pendingDragEvent = event;
-        if (!this.dragRafId) {
-          this.dragRafId = requestAnimationFrame(this.flushPendingDrag);
-        }
-      }
+      this.onMouseDrag(event);
     });
     _defineProperty7(this, "onMouseUpSelf", (event) => {
       if (!this.eventAvailable) {
         return;
       }
-      if (this.dragRafId) {
-        cancelAnimationFrame(this.dragRafId);
-        this.dragRafId = 0;
-      }
-      if (this.pendingDragEvent) {
-        this.onMouseDrag(this.pendingDragEvent);
-        this.pendingDragEvent = null;
-      }
       this.onMouseUp(event);
       this.shadowEmitter.setActive(false);
     });
@@ -26704,7 +26500,7 @@ var WhiteboardTool = class {
 };
 
 // src/tool/LineTool.ts
-var import_lodash2 = __toESM(require_lodash(), 1);
+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;
 }
@@ -26753,7 +26549,7 @@ var LineTool = class extends WhiteboardTool {
         const point = path.getPointAt(distance);
         return [point.x, point.y];
       });
-      this.elementModel.setPoints((0, import_lodash2.flattenDeep)(points));
+      this.elementModel.setPoints((0, import_lodash3.flattenDeep)(points));
     }
   }
   onMouseUp(_event) {
@@ -26783,12 +26579,6 @@ function _toPrimitive9(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var LineModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length > 0) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
   get arrowSize() {
     return this.strokeWidth * 5 + 15;
   }
@@ -26804,23 +26594,20 @@ var LineModel = class extends ElementModel {
   set tailArrow(value) {
     this.root.set("tailArrow", value);
   }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty9(this, "controlledPoints", []);
-    _defineProperty9(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty9(this, "shouldUseLocalPoints", true);
-    _defineProperty9(this, "localPointsPick", 99);
     _defineProperty9(this, "item", null);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "arrow");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y5.Array());
     }
-    if (this.root.doc && !this.root.has("headArrow")) {
+    if (!this.root.has("headArrow")) {
       this.root.set("headArrow", "none");
     }
-    if (this.root.doc && !this.root.has("tailArrow")) {
+    if (!this.root.has("tailArrow")) {
       this.root.set("tailArrow", "normal");
     }
   }
@@ -26836,7 +26623,7 @@ var LineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash3.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash4.chunk)(this.points, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -26950,14 +26737,13 @@ var LineControlPoint = class {
     if (this.position) {
       return this.model.scope.project.view.projectToView(this.position.transform(matrix));
     }
-    const points = this.model["drawPoints"];
     const from = {
-      x: points[0],
-      y: points[1]
+      x: this.model.points[0],
+      y: this.model.points[1]
     };
     const to = {
-      x: points[points.length - 2],
-      y: points[points.length - 1]
+      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);
@@ -26970,9 +26756,9 @@ var LineControlPoint = class {
     }
     const pointsMatrix = new this.model.scope.Matrix(this.model.pointsMatrix);
     const invertedPoint = point.transform(pointsMatrix.inverted());
-    const points = this.model["drawPoints"];
+    const points = this.model.points;
     this.position = invertedPoint;
-    const clonedPoints = (0, import_lodash3.cloneDeep)(points);
+    const clonedPoints = (0, import_lodash4.cloneDeep)(points);
     clonedPoints[this.options.index * 2] = invertedPoint.x;
     clonedPoints[this.options.index * 2 + 1] = invertedPoint.y;
     this.model.setPoints(clonedPoints);
@@ -26981,7 +26767,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 var Y6 = __toESM(require("yjs"), 1);
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room2 = require("@netless/forge-room");
 function _defineProperty10(e, r, t) {
   return (r = _toPropertyKey10(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -27018,18 +26804,9 @@ var PointTextModel = class extends ElementModel {
   set fontFamily(value) {
     this.root.set("font-family", value);
   }
-  get drawPoints() {
-    if (this.localPoints.length > 1) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty10(this, "item", null);
-    _defineProperty10(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty10(this, "shouldUseLocalPoints", false);
-    _defineProperty10(this, "localPointsPick", 2);
     _defineProperty10(this, "handleTextPropChange", (event) => {
       if (!this.item) {
         return;
@@ -27046,27 +26823,21 @@ var PointTextModel = class extends ElementModel {
         }
       }
     });
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "point-text");
     }
-    if (this.root.doc && !this.root.has(ElementModel.KEYS.points)) {
+    if (!this.root.has(ElementModel.KEYS.points)) {
       this.root.set(ElementModel.KEYS.points, new Y6.Array());
     }
     this.root.observe(this.handleTextPropChange);
-    setTimeout(() => {
-      if (this.root && this.root.has("font-size")) {
-        setTimeout(() => {
-          this.updateTextPosition();
-        }, 60);
-      }
-    }, 60);
+    if (this.root.has("font-size")) {
+      setTimeout(() => {
+        this.updateTextPosition();
+      }, 60);
+    }
   }
   subDispose() {
-    (0, import_forge_room3.removeObserver)(this.root, this.handleTextPropChange);
-  }
-  subBindObserver() {
-    (0, import_forge_room3.removeObserver)(this.root, this.handleTextPropChange);
-    this.root.observe(this.handleTextPropChange);
+    (0, import_forge_room2.removeObserver)(this.root, this.handleTextPropChange);
   }
   liveCursorPoint() {
     const points = this.points;
@@ -27081,11 +26852,10 @@ var PointTextModel = class extends ElementModel {
     if (!this.item) {
       return null;
     }
-    console.log("[][][] drawPoints", this.drawPoints);
     const bounds = this.item.internalBounds;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const topLeft = new this.scope.Point(this.drawPoints[0], this.drawPoints[1]).transform(matrix);
-    const topRight = new this.scope.Point(this.drawPoints[0] + bounds.width, this.drawPoints[1]).transform(matrix);
+    const topLeft = new this.scope.Point(this.points[0], this.points[1]).transform(matrix);
+    const topRight = new this.scope.Point(this.points[0] + bounds.width, this.points[1]).transform(matrix);
     let scaleX = topRight.getDistance(topLeft) / bounds.width;
     scaleX = Number.isNaN(scaleX) ? 1 : scaleX;
     const angle = topRight.subtract(topLeft).angle;
@@ -27173,22 +26943,13 @@ function _toPrimitive11(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var TriangleModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length >= 6) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty11(this, "item", null);
-    _defineProperty11(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty11(this, "shouldUseLocalPoints", true);
-    _defineProperty11(this, "localPointsPick", 6);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "triangle");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y7.Array());
     }
   }
@@ -27220,9 +26981,9 @@ var TriangleModel = class extends ElementModel {
       return;
     }
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const p1 = new this.scope.Point(this.drawPoints[0], this.drawPoints[1]).transform(matrix);
-    const p2 = new this.scope.Point(this.drawPoints[2], this.drawPoints[3]).transform(matrix);
-    const p3 = new this.scope.Point(this.drawPoints[4], this.drawPoints[5]).transform(matrix);
+    const p1 = new this.scope.Point(this.points[0], this.points[1]).transform(matrix);
+    const p2 = new this.scope.Point(this.points[2], this.points[3]).transform(matrix);
+    const p3 = new this.scope.Point(this.points[4], this.points[5]).transform(matrix);
     this.item.removeSegments();
     this.item.moveTo(p1);
     this.item.lineTo(p2);
@@ -27234,7 +26995,7 @@ var TriangleModel = class extends ElementModel {
     config.controlPoints.push({
       name: "triangle",
       getPosition: () => {
-        const point = new this.scope.Point(this.drawPoints[0], this.drawPoints[1]);
+        const point = new this.scope.Point(this.points[0], this.points[1]);
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         return this.scope.project.view.projectToView(point.transform(pointsMatrix));
       },
@@ -27244,7 +27005,7 @@ var TriangleModel = class extends ElementModel {
         }
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
-        const oldPoints = this.drawPoints;
+        const oldPoints = this.points;
         this.setPoints([trPoint.x, trPoint.y, oldPoints[2], oldPoints[3], oldPoints[4], oldPoints[5]]);
       }
     });
@@ -27283,34 +27044,25 @@ function _toPrimitive12(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var RectangleModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length >= 4) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty12(this, "item", null);
-    _defineProperty12(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty12(this, "shouldUseLocalPoints", true);
-    _defineProperty12(this, "localPointsPick", 4);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "rectangle");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       const initPoints = new Y8.Array();
       initPoints.push([0, 0, 0, 0]);
       this.root.set("points", initPoints);
     }
-    if (this.root.doc && !this.root.has("radius")) {
+    if (!this.root.has("radius")) {
       this.root.set("radius", 0);
     }
   }
   subDispose() {
   }
   liveCursorPoint() {
-    const points = this.drawPoints;
+    const points = this.points;
     if (points.length < 4) {
       return null;
     }
@@ -27318,7 +27070,7 @@ var RectangleModel = class extends ElementModel {
     return new this.scope.Point(points[2], points[3]).transform(matrix);
   }
   createSegments() {
-    const [a2, b2, c, d] = this.drawPoints;
+    const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const maxRadius = this.maxRadiusLength();
     const radius = this.root.get("radius") * maxRadius;
@@ -27383,7 +27135,7 @@ var RectangleModel = class extends ElementModel {
   }
   maxRadiusLength() {
     const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
-    const points = this.drawPoints;
+    const points = this.points;
     const topLeft = new this.scope.Point(points[0], points[1]).transform(pointsMatrix);
     const topRight = new this.scope.Point(points[2], points[1]).transform(pointsMatrix);
     const bottomLeft = new this.scope.Point(points[0], points[3]).transform(pointsMatrix);
@@ -27408,7 +27160,7 @@ var RectangleModel = class extends ElementModel {
       name: "rect-radius",
       getPosition: () => {
         const matrix = new this.scope.Matrix(this.pointsMatrix);
-        const points = this.drawPoints;
+        const points = this.points;
         const radius = this.root.get("radius") * this.maxRadiusLength();
         let c1 = new this.scope.Point(points[0], points[1]).transform(matrix);
         const c3 = new this.scope.Point(points[2], points[3]).transform(matrix);
@@ -27427,7 +27179,7 @@ var RectangleModel = class extends ElementModel {
         if (!this.item) {
           return;
         }
-        const points = this.drawPoints;
+        const points = this.points;
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const maxRadius = Math.min(points[2] - points[0], points[3] - points[1]) / 2;
         const trPoint = point.transform(pointsMatrix.inverted());
@@ -27457,7 +27209,7 @@ var elementsUndoOrigin = "elementsUndoOrigin";
 
 // src/model/renderable/EraserModel.ts
 var Y9 = __toESM(require("yjs"), 1);
-var import_lodash4 = __toESM(require_lodash(), 1);
+var import_lodash5 = __toESM(require_lodash(), 1);
 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;
 }
@@ -27476,23 +27228,14 @@ function _toPrimitive13(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length > 0) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty13(this, "item", null);
     _defineProperty13(this, "sliceBegin", 0);
-    _defineProperty13(this, "clearLocalPointsWhenYPointsChange", false);
-    _defineProperty13(this, "shouldUseLocalPoints", true);
-    _defineProperty13(this, "localPointsPick", 4);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "eraser");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y9.Array());
     }
   }
@@ -27525,7 +27268,7 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash4.chunk)(points, 2);
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
       smoothing: 0.5,
@@ -27543,7 +27286,7 @@ var EraserModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
+    const currentPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
     return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
@@ -27571,11 +27314,11 @@ var EraserModel = class extends ElementModel {
     this.item.fillColor = new this.scope.Color(this.strokeColor);
     this.onVectorUpdate();
     this.item.onFrame = () => {
-      if (!this.drawPoints) {
+      if (!this.points) {
         return;
       }
-      if (this.drawPoints.length / 2 > 50) {
-        this.sliceBegin = this.drawPoints.length / 2 - 50;
+      if (this.points.length / 2 > 50) {
+        this.sliceBegin = this.points.length / 2 - 50;
       }
     };
   }
@@ -27609,8 +27352,7 @@ var EraserModel = class extends ElementModel {
 
 // src/model/renderable/LaserPointerModel.ts
 var Y10 = __toESM(require("yjs"), 1);
-var import_lodash5 = __toESM(require_lodash(), 1);
-var import_forge_room4 = require("@netless/forge-room");
+var import_lodash6 = __toESM(require_lodash(), 1);
 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;
 }
@@ -27629,18 +27371,24 @@ function _toPrimitive14(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var LaserPointerModel = class extends ElementModel {
-  constructor(clientId, root, scope, liveCursor, removeElement, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(clientId, root, scope, liveCursor, removeElement) {
+    super(root, scope, liveCursor);
     _defineProperty14(this, "item", null);
     _defineProperty14(this, "clientId", void 0);
     _defineProperty14(this, "sliceBegin", 0);
     _defineProperty14(this, "displayStrokeWidth", 8);
     _defineProperty14(this, "cachedPoints", null);
-    _defineProperty14(this, "clearLocalPointsWhenYPointsChange", false);
-    _defineProperty14(this, "shouldUseLocalPoints", false);
-    _defineProperty14(this, "localPointsPick", 4);
-    _defineProperty14(this, "removeElement", void 0);
-    _defineProperty14(this, "handleLaserPropChange", (event) => {
+    this.clientId = clientId;
+    if (!this.root.has("type")) {
+      this.root.set("type", "laser");
+    }
+    if (!this.root.has("points")) {
+      this.root.set("points", new Y10.Array());
+    }
+    if (!this.root.has("removed")) {
+      this.root.set("removed", false);
+    }
+    this.root.observe((event) => {
       if (!this.item) {
         return;
       }
@@ -27658,31 +27406,13 @@ var LaserPointerModel = class extends ElementModel {
             this.onVectorUpdate();
             if (evt.count >= 30) {
               if (this.ownerId === this.clientId) {
-                this.removeElement(this.uuid);
+                removeElement(this.uuid);
               }
             }
           };
         }
       }
     });
-    this.clientId = clientId;
-    this.removeElement = removeElement;
-    if (this.root.doc && !this.root.has("type")) {
-      this.root.set("type", "laser");
-    }
-    if (this.root.doc && !this.root.has("points")) {
-      this.root.set("points", new Y10.Array());
-    }
-    if (this.root.doc && !this.root.has("removed")) {
-      this.root.set("removed", false);
-    }
-  }
-  subBindObserver() {
-    (0, import_forge_room4.removeObserver)(this.root, this.handleLaserPropChange);
-    this.root.observe(this.handleLaserPropChange);
-  }
-  subDispose() {
-    (0, import_forge_room4.removeObserver)(this.root, this.handleLaserPropChange);
   }
   beginRemoveAnimate() {
     this.root.set("removed", true);
@@ -27735,8 +27465,7 @@ var LaserPointerModel = class extends ElementModel {
   matrixedPoints() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const points = this.cachedPoints || this.points;
-    console.log("[][][] ,", this.points.length, this.cachedPoints?.length, this.localPoints.length);
-    const groupPoints = (0, import_lodash5.chunk)(points, 2).slice(this.sliceBegin);
+    const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
       return matrix.transform([x, y]);
@@ -27778,6 +27507,8 @@ var LaserPointerModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
     if (yArray.length < 2) {
@@ -27790,7 +27521,7 @@ var LaserPointerModel = class extends ElementModel {
 };
 
 // src/WhitePermissions.ts
-var import_forge_room5 = require("@netless/forge-room");
+var import_forge_room3 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27803,7 +27534,7 @@ var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
 }({});
-var WhiteboardPermissions = class extends import_forge_room5.AbstractApplicationPermissions {
+var WhiteboardPermissions = class extends import_forge_room3.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -27816,7 +27547,7 @@ var WhiteboardPermissions = class extends import_forge_room5.AbstractApplication
 
 // src/model/renderable/StraightLineModel.ts
 var Y11 = __toESM(require("yjs"), 1);
-var import_lodash6 = __toESM(require_lodash(), 1);
+var import_lodash7 = __toESM(require_lodash(), 1);
 function _defineProperty15(e, r, t) {
   return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -27835,22 +27566,13 @@ function _toPrimitive15(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  get drawPoints() {
-    if (this.localPoints.length >= 4) {
-      return this.localPoints;
-    }
-    return this.points;
-  }
-  constructor(root, scope, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty15(this, "item", null);
-    _defineProperty15(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty15(this, "shouldUseLocalPoints", true);
-    _defineProperty15(this, "localPointsPick", 4);
-    if (this.root.doc && !this.root.has("type")) {
+    if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
-    if (this.root.doc && !this.root.has("points")) {
+    if (!this.root.has("points")) {
       this.root.set("points", new Y11.Array());
     }
   }
@@ -27875,7 +27597,7 @@ var StraightLineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash6.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash7.chunk)(this.points, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -27897,7 +27619,7 @@ var StraightLineModel = class extends ElementModel {
       name: "line-start",
       getPosition: () => {
         const matrix = new this.scope.Matrix(this.pointsMatrix);
-        const points = this.drawPoints;
+        const points = this.points;
         const start = new this.scope.Point(points[0], points[1]);
         return this.scope.project.view.projectToView(start.transform(matrix));
       },
@@ -27907,15 +27629,14 @@ var StraightLineModel = class extends ElementModel {
         }
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
-        const oldPoints = this.drawPoints;
-        this.setPoints([trPoint.x, trPoint.y, oldPoints[2], oldPoints[3]]);
+        this.setPoints([trPoint.x, trPoint.y, this.points[2], this.points[3]]);
       }
     });
     cfg.controlPoints.push({
       name: "line-end",
       getPosition: () => {
         const matrix = new this.scope.Matrix(this.pointsMatrix);
-        const points = this.drawPoints;
+        const points = this.points;
         const end = new this.scope.Point(points[2], points[3]);
         return this.scope.project.view.projectToView(end.transform(matrix));
       },
@@ -27925,8 +27646,7 @@ var StraightLineModel = class extends ElementModel {
         }
         const pointsMatrix = new this.scope.Matrix(this.pointsMatrix);
         const trPoint = point.transform(pointsMatrix.inverted());
-        const oldPoints = this.drawPoints;
-        this.setPoints([oldPoints[0], oldPoints[1], trPoint.x, trPoint.y]);
+        this.setPoints([this.points[0], this.points[1], trPoint.x, trPoint.y]);
       }
     });
     return cfg;
@@ -27972,13 +27692,10 @@ var ImageModel = class extends ElementModel {
   get src() {
     return this.root.get("src");
   }
-  constructor(root, scope, imageSets, liveCursor, isPerformanceMode) {
-    super(root, scope, liveCursor, isPerformanceMode);
+  constructor(root, scope, imageSets, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty16(this, "item", null);
     _defineProperty16(this, "imageSets", void 0);
-    _defineProperty16(this, "clearLocalPointsWhenYPointsChange", true);
-    _defineProperty16(this, "shouldUseLocalPoints", true);
-    _defineProperty16(this, "localPointsPick", 4);
     this.imageSets = imageSets;
     if (!this.root.has("type")) {
       this.root.set("type", "image");
@@ -28061,7 +27778,7 @@ var RenderableModel = class extends import_eventemitter3.default {
   get uuid() {
     return (0, import_uuid.v4)().replace(/-/g, "");
   }
-  constructor(options) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, liveCursor, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -28074,7 +27791,6 @@ var RenderableModel = class extends import_eventemitter3.default {
     _defineProperty17(this, "shadowEmitter", void 0);
     _defineProperty17(this, "imageSets", void 0);
     _defineProperty17(this, "liveCursor", void 0);
-    _defineProperty17(this, "isPerformanceMode", void 0);
     _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
@@ -28093,16 +27809,15 @@ var RenderableModel = class extends import_eventemitter3.default {
         }
       }
     });
-    this.isPerformanceMode = options.isPerformanceMode;
-    this.liveCursor = options.liveCursor;
-    this.imageSets = options.imageSets;
-    this.hasPermission = options.hasPermission;
-    this.shadowEmitter = options.shadowEmitter;
-    this.layerId = options.layerId;
-    this.userManager = options.userManager;
-    this.elements = options.elements;
-    this.scope = options.scope;
-    this.toolbarModel = options.toolbarModel;
+    this.liveCursor = liveCursor;
+    this.imageSets = imageSets;
+    this.hasPermission = hasPermission;
+    this.shadowEmitter = shadowEmitter;
+    this.layerId = layerId;
+    this.userManager = userManager;
+    this.elements = elements;
+    this.scope = scope;
+    this.toolbarModel = toolbarModel;
     this.elementModels = /* @__PURE__ */ new Map();
     for (const key of this.elements.keys()) {
       const type = this.elements.get(key)?.get("type");
@@ -28133,43 +27848,33 @@ var RenderableModel = class extends import_eventemitter3.default {
   convertToModel(yMap) {
     const type = yMap.get("type");
     let model = null;
-    const uuid = yMap.get(ElementModel.KEYS.uuid);
-    if (uuid) {
-      const existingModel = this.elementModels.get(uuid);
-      if (existingModel) {
-        existingModel.shadowEmitter = this.shadowEmitter;
-        existingModel.bindObserver();
-        return existingModel;
-      }
-    }
     if (type === "curve") {
-      model = new CurveModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new CurveModel(yMap, this.scope, this.liveCursor);
     } else if (["ellipse"].indexOf(type) >= 0) {
-      model = new SegmentsModel(yMap, this.scope, type, this.liveCursor, this.isPerformanceMode);
+      model = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     } else if (type === "selector") {
-      model = new SelectorModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new SelectorModel(yMap, this.scope, this.liveCursor);
     } else if (type === "arrow") {
-      model = new LineModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new LineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "line") {
-      model = new StraightLineModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new StraightLineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "point-text") {
-      model = new PointTextModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new PointTextModel(yMap, this.scope, this.liveCursor);
     } else if (type === "triangle") {
-      model = new TriangleModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new TriangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "rectangle") {
-      model = new RectangleModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new RectangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "eraser") {
-      model = new EraserModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
+      model = new EraserModel(yMap, this.scope, this.liveCursor);
     } else if (type === "laser") {
-      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid2) => {
-        this.removeElementItem(uuid2);
-      }, this.isPerformanceMode);
+      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
+        this.removeElementItem(uuid);
+      });
     } else if (type === "image") {
-      model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor, this.isPerformanceMode);
+      model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
-      model.bindObserver();
       this.elementModels.set(model.uuid, model);
     }
     return model;
@@ -28183,7 +27888,7 @@ var RenderableModel = class extends import_eventemitter3.default {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      (0, import_forge_room6.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
+      (0, import_forge_room4.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
     }
     return hasPermission;
   }
@@ -28200,8 +27905,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor, this.isPerformanceMode);
-    model.bindObserver();
+    const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     model.root.set("src", src);
     const initMatrix = new this.scope.Matrix();
     const center = this.scope.project.view.center;
@@ -28218,10 +27922,8 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, curveModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "curve");
@@ -28234,7 +27936,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    curveModel.bindObserver();
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
     this.initElement(curveModel);
     return curveModel;
   }
@@ -28243,17 +27945,11 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid2) => {
-      this.removeElementItem(uuid2);
-    }, this.isPerformanceMode);
-    this.elementModels.set(uuid, model);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "laser");
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
-      yMap.set("removed", false);
       yMap.set(ElementModel.KEYS.shadow, "layer");
       yMap.set(ElementModel.KEYS.strokeWidth, 8);
       yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
@@ -28261,8 +27957,9 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    model.bindObserver();
-    this.initElement(model);
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
+      this.removeElementItem(uuid);
+    });
     return model;
   }
   createEraser() {
@@ -28270,14 +27967,11 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const model = new EraserModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, model);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "eraser");
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
       yMap.set(ElementModel.KEYS.shadow, "layer");
       yMap.set(ElementModel.KEYS.strokeWidth, 4);
       yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
@@ -28285,7 +27979,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    model.bindObserver();
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
     return model;
   }
   createTriangle(shadow) {
@@ -28293,54 +27987,45 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const triangleModel = new TriangleModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, triangleModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "triangle");
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set("points", new Y12.Array());
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    triangleModel.bindObserver();
-    this.initElement(triangleModel);
-    triangleModel.dashArray = this.toolbarModel.dashArray;
-    return triangleModel;
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(triangle);
+    triangle.dashArray = this.toolbarModel.dashArray;
+    return triangle;
   }
   createRectangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const rect = new RectangleModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, rect);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "rectangle");
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      const initPoints = new Y12.Array();
-      initPoints.push([0, 0, 0, 0]);
-      yMap.set("points", initPoints);
-      yMap.set("radius", 0);
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    rect.bindObserver();
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
     this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
     return rect;
@@ -28350,24 +28035,21 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, segmentsModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", type);
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    segmentsModel.bindObserver();
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
     return segmentsModel;
@@ -28378,21 +28060,16 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, selectorModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "selector");
-      const initPoints = new Y12.Array();
-      initPoints.push([0, 0, 0, 0]);
-      yMap.set(ElementModel.KEYS.points, initPoints);
       yMap.set(ElementModel.KEYS.shadow, "layer");
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    selectorModel.bindObserver();
+    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
     return selectorModel;
   }
@@ -28401,24 +28078,21 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, straightLineModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "line");
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set("points", new Y12.Array());
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    straightLineModel.bindObserver();
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
     this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
     return straightLineModel;
@@ -28428,26 +28102,21 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const lineModel = new LineModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, lineModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "arrow");
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set("headArrow", "none");
-      yMap.set("tailArrow", "normal");
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    lineModel.bindObserver();
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
     this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
     return lineModel;
@@ -28457,24 +28126,21 @@ var RenderableModel = class extends import_eventemitter3.default {
       return null;
     }
     const yMap = new Y12.Map();
-    const uuid = this.uuid;
-    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor, this.isPerformanceMode);
-    this.elementModels.set(uuid, pointTextModel);
     this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "point-text");
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
-    pointTextModel.bindObserver();
+    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
@@ -28497,19 +28163,18 @@ var RenderableModel = class extends import_eventemitter3.default {
     });
   }
   dispose(clearElements) {
-    (0, import_forge_room6.removeObserver)(this.elements, this.onElementsChange);
+    (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
     if (clearElements) {
       this.elements.clear();
     }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
-      model.disposeObserver();
     });
   }
 };
 
 // src/utils/Recognizer.ts
-var import_lodash7 = __toESM(require_lodash(), 1);
+var import_lodash8 = __toESM(require_lodash(), 1);
 
 // src/utils/UnistrokeRecognizer.js
 function Point(x, y) {
@@ -28756,7 +28421,7 @@ var Recognizer = class {
     let maxX = -Number.MAX_VALUE;
     let minY = Number.MAX_VALUE;
     let maxY = -Number.MAX_VALUE;
-    const result = this.dollar.Recognize((0, import_lodash7.chunk)(points, 3).map((v) => {
+    const result = this.dollar.Recognize((0, import_lodash8.chunk)(points, 2).map((v) => {
       minX = Math.min(minX, v[0]);
       maxX = Math.max(maxX, v[0]);
       minY = Math.min(minY, v[1]);
@@ -28800,24 +28465,11 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "elementModel", null);
     _defineProperty19(this, "recognizer", new Recognizer());
     _defineProperty19(this, "pointCount", 0);
-    _defineProperty19(this, "pendingPoints", []);
-    _defineProperty19(this, "flushRafId", 0);
     _defineProperty19(this, "showLiveCursor", true);
-    _defineProperty19(this, "flushPendingPoints", () => {
-      this.flushRafId = 0;
-      if (this.elementModel && this.pendingPoints.length > 0) {
-        this.elementModel.appendPoints(this.pendingPoints);
-        this.pendingPoints = [];
-      }
-    });
+    this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
-    this.pendingPoints = [];
-    if (this.flushRafId) {
-      cancelAnimationFrame(this.flushRafId);
-      this.flushRafId = 0;
-    }
     if (this.elementModel) {
       this.elementModel.dispose();
     }
@@ -28832,38 +28484,27 @@ var CurveTool = class extends WhiteboardTool {
     if (this.pointCount > 1024) {
       return;
     }
-    const MIN_DISTANCE = 2;
+    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      let lastX = 0;
-      let lastY = 0;
-      if (this.pendingPoints.length >= 3) {
-        lastX = this.pendingPoints[this.pendingPoints.length - 3];
-        lastY = this.pendingPoints[this.pendingPoints.length - 2];
-      } else {
-        const len = this.elementModel.points.length;
-        if (len >= 3) {
-          lastX = this.elementModel.points[len - 3];
-          lastY = this.elementModel.points[len - 2];
-        }
+      const len = this.elementModel.points.length;
+      let last = {
+        x: 0,
+        y: 0
+      };
+      if (len >= 2) {
+        last = {
+          x: this.elementModel.points[len - 2],
+          y: this.elementModel.points[len - 1]
+        };
       }
-      const dist = Math.max(Math.abs(lastX - event.point.x), Math.abs(lastY - event.point.y));
+      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
       if (dist >= MIN_DISTANCE) {
         this.pointCount += 1;
-        const nativeEvent = event.event;
-        const pressure = nativeEvent.pointerType === "pen" && nativeEvent.pressure > 0 ? nativeEvent.pressure : 0;
-        this.pendingPoints.push(event.point.x, event.point.y, pressure);
-        if (!this.flushRafId) {
-          this.flushRafId = requestAnimationFrame(this.flushPendingPoints);
-        }
+        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
       }
     }
   }
   onMouseUp(event) {
-    if (this.flushRafId) {
-      cancelAnimationFrame(this.flushRafId);
-      this.flushRafId = 0;
-    }
-    this.flushPendingPoints();
     this.modelGetter().then((model) => {
       if (!model) {
         return;
@@ -28964,7 +28605,7 @@ var RectangleTool = class extends WhiteboardTool {
 
 // src/model/ToolbarModel.ts
 var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
-var import_forge_room7 = require("@netless/forge-room");
+var import_forge_room5 = require("@netless/forge-room");
 function _defineProperty21(e, r, t) {
   return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -29061,7 +28702,7 @@ var ToolbarModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    (0, import_forge_room7.removeObserver)(this.root, this.handleRootUpdate);
+    (0, import_forge_room5.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -29160,7 +28801,7 @@ var SelectorTool = class extends WhiteboardTool {
 // src/model/SelectElementsModel.ts
 var Y13 = __toESM(require("yjs"), 1);
 var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
-var import_forge_room8 = require("@netless/forge-room");
+var import_forge_room6 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -29210,7 +28851,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
@@ -29219,7 +28860,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
         this.observers.delete(user.id);
       }
       this.requestUserMap(user.id).observeDeep(observer);
@@ -29242,7 +28883,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
+        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -29306,7 +28947,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -29995,7 +29636,6 @@ var Editor = class extends import_eventemitter35.default {
     this.shadowContainer.remove();
     this.shadowScope.project.activeLayer.addChild(this.shadowContainer);
     this.targets.forEach((model) => {
-      console.log("[][][] translateShadow model", model.root._dEH);
       model.shadow = this.shadowContainer.data.uuid;
     });
   }
@@ -30222,7 +29862,7 @@ var Gesture = class extends import_eventemitter36.default {
 };
 
 // src/Camera.ts
-var import_forge_room9 = require("@netless/forge-room");
+var import_forge_room7 = require("@netless/forge-room");
 function _defineProperty28(e, r, t) {
   return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30299,14 +29939,14 @@ var Camera = class extends import_eventemitter37.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
       if (this.observers.has(user.id)) {
         const cb = this.observers.get(user.id);
         if (cb) {
-          (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30418,7 +30058,7 @@ var Camera = class extends import_eventemitter37.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -30615,10 +30255,10 @@ var Camera = class extends import_eventemitter37.default {
     Array.from(this.observers.keys()).forEach((userId) => {
       const cb = this.observers.get(userId);
       if (cb) {
-        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
+    (0, import_forge_room7.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -30789,8 +30429,6 @@ var Whiteboard = class extends import_eventemitter38.default {
     _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
     _defineProperty31(this, "getElementAttribute", void 0);
     _defineProperty31(this, "setElementAttribute", void 0);
-    _defineProperty31(this, "setPerformanceMode", void 0);
-    _defineProperty31(this, "isPerformanceMode", void 0);
     _defineProperty31(this, "removeElement", void 0);
     _defineProperty31(this, "getCurrentTool", void 0);
     _defineProperty31(this, "setCurrentTool", void 0);
@@ -30911,7 +30549,7 @@ var EraserTool = class extends WhiteboardTool {
 // src/model/TrashedElementsModel.ts
 var Y14 = __toESM(require("yjs"), 1);
 var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
-var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room8 = require("@netless/forge-room");
 function _defineProperty33(e, r, t) {
   return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -30948,14 +30586,14 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
       if (this.observers.has(user.id)) {
         const cb = this.observers.get(user.id);
         if (cb) {
-          (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30963,7 +30601,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -30977,7 +30615,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(userId), userId);
+        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -31039,7 +30677,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room10.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -31089,24 +30727,9 @@ var LaserPointerTool = class extends WhiteboardTool {
     if (this.pointCount > 1024) {
       return;
     }
-    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      const len = this.elementModel.points.length;
-      let last = {
-        x: 0,
-        y: 0
-      };
-      if (len >= 2) {
-        last = {
-          x: this.elementModel.points[len - 2],
-          y: this.elementModel.points[len - 1]
-        };
-      }
-      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
-      if (dist >= MIN_DISTANCE) {
-        this.pointCount += 1;
-        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
-      }
+      this.pointCount += 1;
+      this.elementModel.appendPoints([event.point.x, event.point.y]);
     }
   }
   onMouseUp(_event) {
@@ -31118,7 +30741,7 @@ var LaserPointerTool = class extends WhiteboardTool {
 
 // src/model/PageModel.ts
 var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
-var import_forge_room11 = require("@netless/forge-room");
+var import_forge_room9 = require("@netless/forge-room");
 function _defineProperty35(e, r, t) {
   return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -31151,7 +30774,7 @@ var PageModel = class extends import_eventemitter310.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room11.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -31165,7 +30788,7 @@ var PageModel = class extends import_eventemitter310.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room11.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room9.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -31212,7 +30835,7 @@ var PageModel = class extends import_eventemitter310.default {
     if (this.observers.has(userId)) {
       const cb = this.observers.get(userId);
       if (cb) {
-        (0, import_forge_room11.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), cb);
         this.observers.delete(userId);
       }
     }
@@ -31301,12 +30924,12 @@ var PageModel = class extends import_eventemitter310.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      (0, import_forge_room11.removeObserver)(this.requestUserMap(userId), observer);
+      (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    (0, import_forge_room11.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
-    (0, import_forge_room11.removeObserver)(this.pageMap, this.handlePageMapChange);
+    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room9.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -31321,8 +30944,8 @@ async function waitUntil(fn, timeout) {
 
 // src/IndexedNavigation.ts
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room12 = require("@netless/forge-room");
-var import_forge_room13 = require("@netless/forge-room");
+var import_forge_room10 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
 function _defineProperty36(e, r, t) {
   return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -31349,7 +30972,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room12.log)("indexed navigation confusion", {
+      (0, import_forge_room10.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -31665,7 +31288,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     }
   }
   dispose() {
-    (0, import_forge_room13.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    (0, import_forge_room11.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
@@ -31886,7 +31509,7 @@ var SequenceExecutor = class {
 };
 
 // src/WhiteboardApplication.ts
-var import_forge_room15 = require("@netless/forge-room");
+var import_forge_room13 = require("@netless/forge-room");
 
 // src/LiveCursor.ts
 function _defineProperty42(e, r, t) {
@@ -31941,19 +31564,9 @@ var LiveCursor = class {
     cursor.style.fontSize = "12px";
     cursor.style.padding = "2px 4px";
     cursor.style.borderRadius = "4px";
-    this.updateCursorLabel(userId, cursor);
+    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
     return cursor;
   }
-  updateCursorLabel(userId, cursor) {
-    const target = cursor ?? this.cursors.get(userId);
-    if (!target) {
-      return;
-    }
-    if (target.textContent && target.textContent !== userId) {
-      return;
-    }
-    target.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
-  }
   isOnSamePage(userId) {
     const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
     const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
@@ -31989,7 +31602,6 @@ var LiveCursor = class {
     }
     const cursor = this.cursors.get(userId);
     if (cursor) {
-      this.updateCursorLabel(userId, cursor);
       const viewPoint = this.paperScope.project.view.projectToView(point);
       cursor.style.left = viewPoint.x + "px";
       cursor.style.top = viewPoint.y + "px";
@@ -32054,7 +31666,7 @@ var AsyncMap = class {
 if (!window.__forge_gl_wb_status__) {
   window.__forge_gl_wb_status__ = new AsyncMap();
 }
-var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room14.AbstractApplication {
+var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room12.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -32105,7 +31717,6 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     _defineProperty43(this, "permissions", void 0);
     _defineProperty43(this, "inputType", "any");
     _defineProperty43(this, "isPenEvent", false);
-    _defineProperty43(this, "activePenPointerId", null);
     _defineProperty43(this, "hasPenInput", null);
     _defineProperty43(this, "disableViewModelUpdate", false);
     _defineProperty43(this, "internalResizeObserver", true);
@@ -32201,7 +31812,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          (0, import_forge_room14.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -32213,7 +31824,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
         } else {
           console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
-          (0, import_forge_room14.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warn");
         }
         this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
@@ -32222,9 +31833,6 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty43(this, "isPerformanceMode", () => {
-      return this.option.performance ?? false;
-    });
     _defineProperty43(this, "handleStackItemAdded", () => {
       this.selectElementsModel.clearSelectElementForSelf();
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
@@ -32239,18 +31847,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         const id = ids[i];
         if (!this.layers.has(id)) {
           const elementsMap = this.getMap(`layer/${id}/elements`);
-          const renderableModel = new RenderableModel({
-            layerId: id,
-            shadowEmitter: this.shadowEmitter,
-            elements: elementsMap,
-            scope: this.paperScope,
-            toolbarModel: this.toolbarModel,
-            userManager: this.userManager,
-            imageSets: this.imageSets,
-            liveCursor: this.liveCursor,
-            hasPermission: this.hasPermission,
-            isPerformanceMode: this.isPerformanceMode
-          });
+          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission);
           this.layers.set(id, renderableModel);
         }
         if (!this.undoManagers.has(id)) {
@@ -32434,34 +32031,11 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.imageSets.setAttribute("data-image-sets", "");
     this.rootElement.appendChild(this.imageSets);
     document.body.addEventListener("pointerdown", (evt) => {
-      if (evt.pointerType === "pen") {
-        this.isPenEvent = true;
-        this.activePenPointerId = evt.pointerId;
-        if (this.hasPenInput === null) {
-          this.hasPenInput = true;
-          this.inputType = "pen";
-          this.emitter.emit("inputTypeChange", this.inputType);
-        }
-      } else {
-        if (this.activePenPointerId === null) {
-          this.isPenEvent = false;
-        }
-      }
-    }, {
-      capture: true
-    });
-    document.body.addEventListener("pointerup", (evt) => {
-      if (evt.pointerId === this.activePenPointerId) {
-        this.activePenPointerId = null;
-        this.isPenEvent = false;
-      }
-    }, {
-      capture: true
-    });
-    document.body.addEventListener("pointercancel", (evt) => {
-      if (evt.pointerId === this.activePenPointerId) {
-        this.activePenPointerId = null;
-        this.isPenEvent = false;
+      this.isPenEvent = evt.pointerType === "pen";
+      if (evt.pointerType === "pen" && this.hasPenInput === null) {
+        this.hasPenInput = true;
+        this.inputType = "pen";
+        this.emitter.emit("inputTypeChange", this.inputType);
       }
     }, {
       capture: true
@@ -32517,7 +32091,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToFree = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32528,7 +32102,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToFlow = (flowId, userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32540,16 +32114,10 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.camera.resetViewMatrixToFlow(flowId);
       }
     };
-    this.emitter.setPerformanceMode = (enabled) => {
-      this.option.performance = enabled;
-    };
-    this.emitter.isPerformanceMode = () => {
-      return this.isPerformanceMode();
-    };
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room14.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
         return;
       }
       const targetId = userId ? this.hasPermission(WhiteboardPermissionFlag.setOthersView) ? userId : null : this.userId;
@@ -32563,7 +32131,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     };
     this.emitter.insertImage = (src, pageId) => {
       if (!/https/.test(src)) {
-        (0, import_forge_room14.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
           src
         }, "warn");
         return;
@@ -32573,14 +32141,14 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
       }
       if (!targetPageId) {
-        (0, import_forge_room14.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(targetPageId)?.createImage(src);
     };
     this.emitter.removeElement = (pageId, elementId) => {
       if (!this.layers.has(pageId)) {
-        (0, import_forge_room14.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(pageId)?.removeElementItem(elementId);
@@ -32600,18 +32168,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel({
-          layerId: targetId,
-          shadowEmitter: this.shadowEmitter,
-          elements: target,
-          scope: this.paperScope,
-          toolbarModel: this.toolbarModel,
-          userManager: this.userManager,
-          imageSets: this.imageSets,
-          liveCursor: this.liveCursor,
-          hasPermission: this.hasPermission,
-          isPerformanceMode: this.isPerformanceMode
-        }));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -32680,15 +32237,15 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
       this.liveCursor.showLiveCursor = value;
     };
     this.emitter.updateViewport = (width, height) => {
-      (0, import_forge_room14.log)(`call updateViewport with width: ${width}, height: ${height}`);
+      (0, import_forge_room12.log)(`call updateViewport with width: ${width}, height: ${height}`);
       this.updateOptionSize(width, height);
     };
     this.emitter.__setMainCanvasVisible = (visible) => {
-      (0, import_forge_room14.log)(`call __setMainCanvasVisible with visible: ${visible}`);
+      (0, import_forge_room12.log)(`call __setMainCanvasVisible with visible: ${visible}`);
       this.canvasElement.style.opacity = visible ? "1" : "0";
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room14.log)("WhiteboardApplicationError", {
+      (0, import_forge_room12.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
@@ -32698,7 +32255,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         return that.delayTranslateOut;
       },
       set(value) {
-        (0, import_forge_room14.log)(`call __delayTranslateOut with value: ${value}`);
+        (0, import_forge_room12.log)(`call __delayTranslateOut with value: ${value}`);
         that.delayTranslateOut = value;
       }
     });
@@ -32801,7 +32358,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
   }
   async initialize(option) {
     _WhiteboardApplication.instanceCount.set(this.appId, (_WhiteboardApplication.instanceCount.get(this.appId) ?? 0) + 1);
-    (0, import_forge_room14.log)(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
+    (0, import_forge_room12.log)(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
     this.appDoc.transact(() => {
       this.permissions = new WhiteboardPermissions(this.writableManager, this.userManager, (userId) => {
         return this.userMap(userId);
@@ -32846,11 +32403,6 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.editors.forEach((editor) => {
           editor.updateBounds();
         });
-        const area = this.paperScope.project.view.size.width * this.paperScope.project.view.size.height;
-        const minDistance = Math.ceil(area / 4e5);
-        Object.keys(this.tools).forEach((key) => {
-          this.tools[key].tool.minDistance = minDistance;
-        });
       });
       this.camera.on("userPageChange", (userId, pageId) => {
         this.emitter.emit("activePageChange", userId, pageId);
@@ -32912,7 +32464,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.paperScope.tool = this.tools[this.toolbarModel.currentTool].tool;
       } else {
         this.paperScope.tool = this.tools["curve"].tool;
-        (0, import_forge_room14.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+        (0, import_forge_room12.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
       }
       this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
       this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -33199,8 +32751,8 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
-    (0, import_forge_room15.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
-    (0, import_forge_room14.log)(`whiteboard ${this.appId} disposed. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
+    (0, import_forge_room13.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
+    (0, import_forge_room12.log)(`whiteboard ${this.appId} disposed. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
   }
 };
 _defineProperty43(WhiteboardApplication, "instanceCount", /* @__PURE__ */ new Map());