@netless/forge-whiteboard 1.1.1 → 1.1.2

package/dist/whiteboard.js

@@ -23278,7 +23278,7 @@ var require_lodash = __commonJS({
           result2.__values__ = wrapper.__values__;
           return result2;
         }
-        function chunk8(array, size2, guard) {
+        function chunk7(array, size2, guard) {
           if (guard ? isIterateeCall(array, size2, guard) : size2 === undefined2) {
             size2 = 1;
           } else {
@@ -25150,7 +25150,7 @@ var require_lodash = __commonJS({
         lodash.bindKey = bindKey;
         lodash.castArray = castArray;
         lodash.chain = chain;
-        lodash.chunk = chunk8;
+        lodash.chunk = chunk7;
         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_room12 = require("@netless/forge-room");
+var import_forge_room13 = 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_room4 = require("@netless/forge-room");
+var import_forge_room5 = require("@netless/forge-room");
 
 // src/model/renderable/CurveModel.ts
 var Y2 = __toESM(require("yjs"), 1);
@@ -25800,9 +25800,6 @@ 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");
@@ -26192,35 +26189,37 @@ var CurveModel = class extends ElementModel {
   constructor(root, scope, liveCursor, isPerformanceMode) {
     super(root, scope, liveCursor, isPerformanceMode);
     _defineProperty3(this, "item", null);
-    _defineProperty3(this, "debugPath", void 0);
     _defineProperty3(this, "debug", false);
     _defineProperty3(this, "clearLocalPointsWhenYPointsChange", false);
     _defineProperty3(this, "shouldUseLocalPoints", true);
-    _defineProperty3(this, "localPointsPick", 4);
+    _defineProperty3(this, "localPointsPick", 6);
     if (!this.root.doc || !this.root.has("type")) {
       this.root.set("type", "curve");
     }
     if (!this.root.doc || !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.5,
-      thinning: -0.5,
-      streamline: 0.5,
-      simulatePressure: true,
+      smoothing: 0.7,
+      thinning: 0.5,
+      streamline,
+      simulatePressure: !hasRealPressure,
       start: {
-        taper: this.strokeWidth * 10,
+        taper,
         cap: true
       },
       end: {
-        taper: this.strokeWidth * 20,
+        taper,
         cap: true
       }
     });
@@ -26229,10 +26228,11 @@ var CurveModel = class extends ElementModel {
     const points = this.localPoints.length === 0 ? this.points : this.localPoints;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const output = [];
-    for (let i = 0, len = points.length; i < len; i += 2) {
+    for (let i = 0, len = points.length; i < len; i += 3) {
       const p = new this.scope.Point(points[i], points[i + 1]);
       const tp = p.transform(matrix);
-      output.push([tp.x, tp.y]);
+      const pressure = points[i + 2] ?? 0;
+      output.push([tp.x, tp.y, pressure]);
     }
     return output;
   }
@@ -26261,34 +26261,30 @@ 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) {
-      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);
+      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);
     }
   }
   createPaperItem() {
@@ -26311,11 +26307,11 @@ var CurveModel = class extends ElementModel {
   }
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
-    if (yArray.length < 2) {
+    if (yArray.length < 3) {
       return null;
     }
     const len = yArray.length;
-    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    const point = new this.scope.Point(yArray.get(len - 3), yArray.get(len - 2));
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
   onStyleKeyUpdate(key) {
@@ -26416,7 +26412,8 @@ var SelectorModel = class extends ElementModel {
 var Y4 = __toESM(require("yjs"), 1);
 
 // src/utils/paperjs.ts
-var import_lodash2 = __toESM(require_lodash(), 1);
+var import_lodash = __toESM(require_lodash(), 1);
+var import_forge_room2 = require("@netless/forge-room");
 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;
 }
@@ -26449,7 +26446,7 @@ function serializePath(path) {
   }, []);
 }
 function deserializePath(points, scope, matrix) {
-  const segmentGroup = (0, import_lodash2.chunk)(points, 6);
+  const segmentGroup = (0, import_lodash.chunk)(points, 6);
   const path = new scope.Path();
   path.segments = segmentGroup.map((v) => deserializeSegment(v, scope, matrix));
   return path;
@@ -26459,7 +26456,27 @@ 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++) {
@@ -26572,7 +26589,7 @@ var SegmentsModel = class extends ElementModel {
 
 // src/model/renderable/LineModel.ts
 var Y5 = __toESM(require("yjs"), 1);
-var import_lodash4 = __toESM(require_lodash(), 1);
+var import_lodash3 = __toESM(require_lodash(), 1);
 
 // src/tool/WhiteboardTool.ts
 function _defineProperty7(e, r, t) {
@@ -26592,6 +26609,8 @@ 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);
@@ -26600,24 +26619,60 @@ 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;
       }
-      this.onMouseDrag(event);
+      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);
+        }
+      }
     });
     _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);
     });
@@ -26633,7 +26688,7 @@ var WhiteboardTool = class {
 };
 
 // src/tool/LineTool.ts
-var import_lodash3 = __toESM(require_lodash(), 1);
+var import_lodash2 = __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;
 }
@@ -26682,7 +26737,7 @@ var LineTool = class extends WhiteboardTool {
         const point = path.getPointAt(distance);
         return [point.x, point.y];
       });
-      this.elementModel.setPoints((0, import_lodash3.flattenDeep)(points));
+      this.elementModel.setPoints((0, import_lodash2.flattenDeep)(points));
     }
   }
   onMouseUp(_event) {
@@ -26765,7 +26820,7 @@ var LineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash3.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -26901,7 +26956,7 @@ var LineControlPoint = class {
     const invertedPoint = point.transform(pointsMatrix.inverted());
     const points = this.model["drawPoints"];
     this.position = invertedPoint;
-    const clonedPoints = (0, import_lodash4.cloneDeep)(points);
+    const clonedPoints = (0, import_lodash3.cloneDeep)(points);
     clonedPoints[this.options.index * 2] = invertedPoint.x;
     clonedPoints[this.options.index * 2 + 1] = invertedPoint.y;
     this.model.setPoints(clonedPoints);
@@ -26910,7 +26965,7 @@ var LineControlPoint = class {
 
 // src/model/renderable/PointTextModel.ts
 var Y6 = __toESM(require("yjs"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_forge_room3 = 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;
 }
@@ -26991,7 +27046,7 @@ var PointTextModel = class extends ElementModel {
     }, 60);
   }
   subDispose() {
-    (0, import_forge_room2.removeObserver)(this.root, this.handleTextPropChange);
+    (0, import_forge_room3.removeObserver)(this.root, this.handleTextPropChange);
   }
   liveCursorPoint() {
     const points = this.points;
@@ -27382,7 +27437,7 @@ var elementsUndoOrigin = "elementsUndoOrigin";
 
 // src/model/renderable/EraserModel.ts
 var Y9 = __toESM(require("yjs"), 1);
-var import_lodash5 = __toESM(require_lodash(), 1);
+var import_lodash4 = __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;
 }
@@ -27450,7 +27505,7 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash5.chunk)(points, 2);
+    const groupPoints = (0, import_lodash4.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
       smoothing: 0.5,
@@ -27468,7 +27523,7 @@ var EraserModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash5.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
+    const currentPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
     return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
@@ -27534,7 +27589,7 @@ var EraserModel = class extends ElementModel {
 
 // src/model/renderable/LaserPointerModel.ts
 var Y10 = __toESM(require("yjs"), 1);
-var import_lodash6 = __toESM(require_lodash(), 1);
+var import_lodash5 = __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;
 }
@@ -27651,7 +27706,7 @@ var LaserPointerModel = class extends ElementModel {
     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_lodash6.chunk)(points, 2).slice(this.sliceBegin);
+    const groupPoints = (0, import_lodash5.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
       return matrix.transform([x, y]);
@@ -27707,7 +27762,7 @@ var LaserPointerModel = class extends ElementModel {
 };
 
 // src/WhitePermissions.ts
-var import_forge_room3 = require("@netless/forge-room");
+var import_forge_room4 = require("@netless/forge-room");
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -27720,7 +27775,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_room3.AbstractApplicationPermissions {
+var WhiteboardPermissions = class extends import_forge_room4.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -27733,7 +27788,7 @@ var WhiteboardPermissions = class extends import_forge_room3.AbstractApplication
 
 // src/model/renderable/StraightLineModel.ts
 var Y11 = __toESM(require("yjs"), 1);
-var import_lodash7 = __toESM(require_lodash(), 1);
+var import_lodash6 = __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;
 }
@@ -27792,7 +27847,7 @@ var StraightLineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash7.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash6.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -28098,7 +28153,7 @@ var RenderableModel = class extends import_eventemitter3.default {
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      (0, import_forge_room4.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
+      (0, import_forge_room5.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warn");
     }
     return hasPermission;
   }
@@ -28401,7 +28456,7 @@ var RenderableModel = class extends import_eventemitter3.default {
     });
   }
   dispose(clearElements) {
-    (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
+    (0, import_forge_room5.removeObserver)(this.elements, this.onElementsChange);
     if (clearElements) {
       this.elements.clear();
     }
@@ -28412,7 +28467,7 @@ var RenderableModel = class extends import_eventemitter3.default {
 };
 
 // src/utils/Recognizer.ts
-var import_lodash8 = __toESM(require_lodash(), 1);
+var import_lodash7 = __toESM(require_lodash(), 1);
 
 // src/utils/UnistrokeRecognizer.js
 function Point(x, y) {
@@ -28659,7 +28714,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_lodash8.chunk)(points, 2).map((v) => {
+    const result = this.dollar.Recognize((0, import_lodash7.chunk)(points, 3).map((v) => {
       minX = Math.min(minX, v[0]);
       maxX = Math.max(maxX, v[0]);
       minY = Math.min(minY, v[1]);
@@ -28703,11 +28758,24 @@ 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);
-    this.tool.minDistance = 20;
+    _defineProperty19(this, "flushPendingPoints", () => {
+      this.flushRafId = 0;
+      if (this.elementModel && this.pendingPoints.length > 0) {
+        this.elementModel.appendPoints(this.pendingPoints);
+        this.pendingPoints = [];
+      }
+    });
   }
   onMouseDown(_event) {
     this.pointCount = 0;
+    this.pendingPoints = [];
+    if (this.flushRafId) {
+      cancelAnimationFrame(this.flushRafId);
+      this.flushRafId = 0;
+    }
     if (this.elementModel) {
       this.elementModel.dispose();
     }
@@ -28722,27 +28790,38 @@ var CurveTool = class extends WhiteboardTool {
     if (this.pointCount > 1024) {
       return;
     }
-    const MIN_DISTANCE = 4;
+    const MIN_DISTANCE = 2;
     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]
-        };
+      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 dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
+      const dist = Math.max(Math.abs(lastX - event.point.x), Math.abs(lastY - event.point.y));
       if (dist >= MIN_DISTANCE) {
         this.pointCount += 1;
-        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+        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);
+        }
       }
     }
   }
   onMouseUp(event) {
+    if (this.flushRafId) {
+      cancelAnimationFrame(this.flushRafId);
+      this.flushRafId = 0;
+    }
+    this.flushPendingPoints();
     this.modelGetter().then((model) => {
       if (!model) {
         return;
@@ -28843,7 +28922,7 @@ var RectangleTool = class extends WhiteboardTool {
 
 // src/model/ToolbarModel.ts
 var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
-var import_forge_room5 = require("@netless/forge-room");
+var import_forge_room6 = 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;
 }
@@ -28940,7 +29019,7 @@ var ToolbarModel = class extends import_eventemitter32.default {
     });
   }
   dispose() {
-    (0, import_forge_room5.removeObserver)(this.root, this.handleRootUpdate);
+    (0, import_forge_room6.removeObserver)(this.root, this.handleRootUpdate);
     this.removeAllListeners();
   }
 };
@@ -29039,7 +29118,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_room6 = require("@netless/forge-room");
+var import_forge_room7 = require("@netless/forge-room");
 
 // src/WhiteboardKeys.ts
 var WhiteboardKeys = {
@@ -29089,7 +29168,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), cb);
         this.observers.delete(user.id);
       }
     });
@@ -29098,7 +29177,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(user.id, evts);
       };
       if (this.observers.has(user.id)) {
-        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
         this.observers.delete(user.id);
       }
       this.requestUserMap(user.id).observeDeep(observer);
@@ -29121,7 +29200,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
         this.handleUserSelectElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -29185,7 +29264,7 @@ var SelectElementsModel = class extends import_eventemitter33.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room6.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -30100,7 +30179,7 @@ var Gesture = class extends import_eventemitter36.default {
 };
 
 // src/Camera.ts
-var import_forge_room7 = require("@netless/forge-room");
+var import_forge_room8 = 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;
 }
@@ -30177,14 +30256,14 @@ var Camera = class extends import_eventemitter37.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room7.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room8.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_room7.removeObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30296,7 +30375,7 @@ var Camera = class extends import_eventemitter37.default {
         this.handleViewMatrixUpdate(userId, evt);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room7.removeObserver)(this.requestUserMap(userId), observer);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), observer);
       }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
@@ -30493,10 +30572,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_room7.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), cb);
       }
     });
-    (0, import_forge_room7.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
+    (0, import_forge_room8.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
     this.gesture.removeAllListeners();
@@ -30789,7 +30868,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_room8 = require("@netless/forge-room");
+var import_forge_room9 = 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;
 }
@@ -30826,14 +30905,14 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room9.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_room8.removeDeepObserver)(this.requestUserMap(user.id), cb);
+          (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), cb);
           this.observers.delete(user.id);
         }
       }
@@ -30841,7 +30920,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(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_room9.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
       }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
@@ -30855,7 +30934,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
         this.handleUserTrashElementsChange(userId, evts);
       };
       if (this.observers.has(userId)) {
-        (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(userId), userId);
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(userId), userId);
       }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
@@ -30917,7 +30996,7 @@ var TrashedElementsModel = class extends import_eventemitter39.default {
   }
   dispose() {
     for (const [key, value] of this.observers.entries()) {
-      (0, import_forge_room8.removeDeepObserver)(this.requestUserMap(key), value);
+      (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(key), value);
     }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
@@ -30996,7 +31075,7 @@ var LaserPointerTool = class extends WhiteboardTool {
 
 // src/model/PageModel.ts
 var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
-var import_forge_room9 = require("@netless/forge-room");
+var import_forge_room10 = 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;
 }
@@ -31029,7 +31108,7 @@ var PageModel = class extends import_eventemitter310.default {
       }
       const cb = this.observers.get(user.id);
       if (cb) {
-        (0, import_forge_room9.removeObserver)(this.requestUserMap(user.id), cb);
+        (0, import_forge_room10.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -31043,7 +31122,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_room9.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room10.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -31090,7 +31169,7 @@ var PageModel = class extends import_eventemitter310.default {
     if (this.observers.has(userId)) {
       const cb = this.observers.get(userId);
       if (cb) {
-        (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), cb);
+        (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), cb);
         this.observers.delete(userId);
       }
     }
@@ -31179,12 +31258,12 @@ var PageModel = class extends import_eventemitter310.default {
   dispose() {
     for (const entry of this.observers.entries()) {
       const [userId, observer] = entry;
-      (0, import_forge_room9.removeObserver)(this.requestUserMap(userId), observer);
+      (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), observer);
     }
     this.userManager.off("join", this.handleUserJoin);
     this.userManager.off("leave", this.handleUserLeave);
-    (0, import_forge_room9.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
-    (0, import_forge_room9.removeObserver)(this.pageMap, this.handlePageMapChange);
+    (0, import_forge_room10.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room10.removeObserver)(this.pageMap, this.handlePageMapChange);
   }
 };
 
@@ -31199,8 +31278,8 @@ async function waitUntil(fn, timeout) {
 
 // src/IndexedNavigation.ts
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room10 = require("@netless/forge-room");
 var import_forge_room11 = require("@netless/forge-room");
+var import_forge_room12 = 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;
 }
@@ -31227,7 +31306,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room10.log)("indexed navigation confusion", {
+      (0, import_forge_room11.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
       throw new Error("indexed navigation confusion");
@@ -31543,7 +31622,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     }
   }
   dispose() {
-    (0, import_forge_room11.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    (0, import_forge_room12.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
     this.pageModel.off("switchPage");
     this.pageModel.off("pagesChange");
   }
@@ -31764,7 +31843,7 @@ var SequenceExecutor = class {
 };
 
 // src/WhiteboardApplication.ts
-var import_forge_room13 = require("@netless/forge-room");
+var import_forge_room14 = require("@netless/forge-room");
 
 // src/LiveCursor.ts
 function _defineProperty42(e, r, t) {
@@ -31921,7 +32000,7 @@ var AsyncMap = class {
 if (!window.__forge_gl_wb_status__) {
   window.__forge_gl_wb_status__ = new AsyncMap();
 }
-var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room12.AbstractApplication {
+var WhiteboardApplication = class _WhiteboardApplication extends import_forge_room13.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
     if (page) {
@@ -31972,6 +32051,7 @@ 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);
@@ -32067,7 +32147,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
           }
         } else {
           console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
-          (0, import_forge_room12.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room13.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warn");
         }
         await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
@@ -32079,7 +32159,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_room12.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warn");
+          (0, import_forge_room13.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);
@@ -32300,11 +32380,34 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.imageSets.setAttribute("data-image-sets", "");
     this.rootElement.appendChild(this.imageSets);
     document.body.addEventListener("pointerdown", (evt) => {
-      this.isPenEvent = evt.pointerType === "pen";
-      if (evt.pointerType === "pen" && this.hasPenInput === null) {
-        this.hasPenInput = true;
-        this.inputType = "pen";
-        this.emitter.emit("inputTypeChange", this.inputType);
+      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;
       }
     }, {
       capture: true
@@ -32360,7 +32463,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_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room13.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;
@@ -32371,7 +32474,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_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room13.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;
@@ -32392,7 +32495,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.emitter.setViewModeToMain = (userId) => {
       if (that.disableViewModelUpdate) {
         console.warn("Operation failed. Perspective mode switching is disabled in the current environment.");
-        (0, import_forge_room12.log)("Operation failed. Perspective mode switching is disabled in the current environment.", {}, "warn");
+        (0, import_forge_room13.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;
@@ -32406,7 +32509,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     };
     this.emitter.insertImage = (src, pageId) => {
       if (!/https/.test(src)) {
-        (0, import_forge_room12.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+        (0, import_forge_room13.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
           src
         }, "warn");
         return;
@@ -32416,14 +32519,14 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
       }
       if (!targetPageId) {
-        (0, import_forge_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room13.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_room12.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
+        (0, import_forge_room13.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
       this.layers.get(pageId)?.removeElementItem(elementId);
@@ -32523,15 +32626,15 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
       this.liveCursor.showLiveCursor = value;
     };
     this.emitter.updateViewport = (width, height) => {
-      (0, import_forge_room12.log)(`call updateViewport with width: ${width}, height: ${height}`);
+      (0, import_forge_room13.log)(`call updateViewport with width: ${width}, height: ${height}`);
       this.updateOptionSize(width, height);
     };
     this.emitter.__setMainCanvasVisible = (visible) => {
-      (0, import_forge_room12.log)(`call __setMainCanvasVisible with visible: ${visible}`);
+      (0, import_forge_room13.log)(`call __setMainCanvasVisible with visible: ${visible}`);
       this.canvasElement.style.opacity = visible ? "1" : "0";
     };
     this.emitter.on("error", (errorCode, errorMessage) => {
-      (0, import_forge_room12.log)("WhiteboardApplicationError", {
+      (0, import_forge_room13.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
@@ -32541,7 +32644,7 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         return that.delayTranslateOut;
       },
       set(value) {
-        (0, import_forge_room12.log)(`call __delayTranslateOut with value: ${value}`);
+        (0, import_forge_room13.log)(`call __delayTranslateOut with value: ${value}`);
         that.delayTranslateOut = value;
       }
     });
@@ -32644,7 +32747,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_room12.log)(`whiteboard ${this.appId} initialize. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
+    (0, import_forge_room13.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);
@@ -32755,7 +32858,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_room12.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
+        (0, import_forge_room13.log)(`${this.toolbarModel.currentTool} not supported, backup to curve`);
       }
       this.selectElementsModel.on("elementsChange", this.handleElementsSelect);
       this.trashedElementsModel.on("elementsChange", this.handleElementsTrash);
@@ -33042,8 +33145,8 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
-    (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");
+    (0, import_forge_room14.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
+    (0, import_forge_room13.log)(`whiteboard ${this.appId} disposed. instance count: ${_WhiteboardApplication.instanceCount.get(this.appId) ?? 0}`, {}, "info");
   }
 };
 _defineProperty43(WhiteboardApplication, "instanceCount", /* @__PURE__ */ new Map());