@netless/forge-whiteboard 0.1.16 → 0.1.17

package/dist/whiteboard.esm.js

@@ -21876,7 +21876,7 @@ var require_lodash = __commonJS({
           end = end === undefined2 ? length : end;
           return !start && end >= length ? array : baseSlice(array, start, end);
         }
-        var clearTimeout = ctxClearTimeout || function(id) {
+        var clearTimeout2 = ctxClearTimeout || function(id) {
           return root.clearTimeout(id);
         };
         function cloneBuffer(buffer, isDeep) {
@@ -23747,7 +23747,7 @@ var require_lodash = __commonJS({
           }
           function cancel() {
             if (timerId !== undefined2) {
-              clearTimeout(timerId);
+              clearTimeout2(timerId);
             }
             lastInvokeTime = 0;
             lastArgs = lastCallTime = lastThis = timerId = undefined2;
@@ -23765,7 +23765,7 @@ var require_lodash = __commonJS({
                 return leadingEdge(lastCallTime);
               }
               if (maxing) {
-                clearTimeout(timerId);
+                clearTimeout2(timerId);
                 timerId = setTimeout2(timerExpired, wait);
                 return invokeFunc(lastCallTime);
               }
@@ -25608,11 +25608,12 @@ var ElementModel = class _ElementModel {
   set shadow(value) {
     this.root.set(_ElementModel.KEYS.shadow, value);
   }
-  constructor(root, scope) {
+  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, "liveCursor", void 0);
     _defineProperty(this, "handlePropChange", (events) => {
       if (!this.item) {
         return;
@@ -25621,7 +25622,7 @@ var ElementModel = class _ElementModel {
         if (event.target === this.root) {
           const updatePaperItemKeys = this.vectorKeys().concat([_ElementModel.KEYS.pointsMatrix]);
           for (const [key, value] of event.changes.keys.entries()) {
-            if (value.action === "update") {
+            if (value.action === "update" || value.action == "add") {
               const includeKeys = this.styleKeys().include;
               if (includeKeys.indexOf(key) >= 0) {
                 this.onStyleKeyUpdate(key);
@@ -25641,6 +25642,10 @@ var ElementModel = class _ElementModel {
                 if (this.shadow !== "") {
                   this.shadowEmitter?.emit("translateIn", [this.uuid], this.shadow);
                 } else {
+                  const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+                  if (ownerId) {
+                    this.liveCursor.updateCursorVisible(false, ownerId);
+                  }
                   this.shadowEmitter?.emit("translateOut", [this.uuid], value.oldValue);
                 }
               }
@@ -25648,11 +25653,17 @@ var ElementModel = class _ElementModel {
           }
         } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
           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 {
         }
       }
     });
     this.scope = scope;
+    this.liveCursor = liveCursor;
     this.root = root;
     if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
       this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
@@ -25784,8 +25795,8 @@ function _toPrimitive3(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var CurveModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty3(this, "item", null);
     _defineProperty3(this, "debugPath", void 0);
     _defineProperty3(this, "debug", false);
@@ -25902,6 +25913,15 @@ var CurveModel = class extends ElementModel {
       exclude: ["dashArray", "fillColor"]
     };
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    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) {
     if (!this.item) {
       return;
@@ -25937,8 +25957,8 @@ function _toPrimitive4(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SelectorModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty4(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "selector");
@@ -25949,6 +25969,9 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  liveCursorPoint() {
+    return null;
+  }
   subDispose() {
   }
   createPaperRect() {
@@ -26075,8 +26098,8 @@ function _toPrimitive6(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SegmentsModel = class extends ElementModel {
-  constructor(root, scope, type) {
-    super(root, scope);
+  constructor(root, scope, type, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty6(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", type);
@@ -26087,6 +26110,14 @@ var SegmentsModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const point = new this.scope.Point(yArray.get(0), yArray.get(1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -26212,6 +26243,7 @@ var LineTool = class extends WhiteboardTool {
     _defineProperty8(this, "elementModel", null);
     _defineProperty8(this, "from", null);
     _defineProperty8(this, "to", null);
+    _defineProperty8(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -26276,8 +26308,8 @@ var LineModel = class extends ElementModel {
   set tailArrow(value) {
     this.root.set("tailArrow", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty9(this, "controlledPoints", []);
     _defineProperty9(this, "item", null);
     if (!this.root.has("type")) {
@@ -26326,6 +26358,15 @@ var LineModel = class extends ElementModel {
     });
     return [head, path, tail];
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   createPaperItem() {
     this.item = new this.scope.Group();
     this.item.addChildren(this.renderLine());
@@ -26477,8 +26518,8 @@ var PointTextModel = class extends ElementModel {
   set fontFamily(value) {
     this.root.set("font-family", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty10(this, "item", null);
     _defineProperty10(this, "handleTextPropChange", (event) => {
       if (!this.item) {
@@ -26512,6 +26553,15 @@ var PointTextModel = class extends ElementModel {
   subDispose() {
     removeObserver(this.root, this.handleTextPropChange);
   }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 1) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const topLeft = new this.scope.Point(points[0], points[1]).transform(matrix);
+    return topLeft;
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -26607,8 +26657,8 @@ function _toPrimitive11(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var TriangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty11(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "triangle");
@@ -26617,6 +26667,15 @@ var TriangleModel = class extends ElementModel {
       this.root.set("points", new Y7.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 6) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 4), yArray.get(len - 3));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   subDispose() {
   }
   createPaperItem() {
@@ -26699,8 +26758,8 @@ function _toPrimitive12(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var RectangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty12(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "rectangle");
@@ -26716,6 +26775,14 @@ var RectangleModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 4) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    return new this.scope.Point(points[2], points[3]).transform(matrix);
+  }
   createSegments() {
     const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -26875,8 +26942,8 @@ function _toPrimitive13(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty13(this, "item", null);
     _defineProperty13(this, "sliceBegin", 0);
     if (!this.root.has("type")) {
@@ -26915,41 +26982,42 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    return ae(points, {
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
+    return ae(groupPoints, {
       size: this.strokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
+      smoothing: 0.5,
+      thinning: -0.5,
       streamline: 0.5,
       simulatePressure: true,
       start: {
-        taper: true,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 0,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const groupPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
-    return groupPoints.map((_ref) => {
+    const currentPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
+    return currentPoints.map((_ref) => {
       let [x, y] = _ref;
-      return matrix.transform([x, y]);
-    }).map((p) => [p.x, p.y]);
-  }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+      return new this.scope.Point(x, y);
+    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
+      result.push(next.x);
+      result.push(next.y);
+      return result;
+    }, []);
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
+    this.item.addSegments(path.segments);
   }
   createPaperItem() {
     this.item = new this.scope.Path();
@@ -26958,21 +27026,13 @@ var EraserModel = class extends ElementModel {
     this.item.strokeScaling = false;
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
-    let isBegin = false;
+    this.onVectorUpdate();
     this.item.onFrame = () => {
       if (!this.points) {
         return;
       }
-      if (this.points.length / 2 - this.sliceBegin >= 10 && !isBegin) {
-        isBegin = true;
-      }
-      if (this.points.length / 2 <= this.sliceBegin) {
-        isBegin = false;
-      }
-      if (isBegin) {
-        this.sliceBegin += 1;
-        this.onVectorUpdate();
+      if (this.points.length / 2 > 50) {
+        this.sliceBegin = this.points.length / 2 - 50;
       }
     };
   }
@@ -26993,6 +27053,15 @@ var EraserModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 
 // src/model/renderable/LaserPointerModel.ts
@@ -27016,8 +27085,8 @@ function _toPrimitive14(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var LaserPointerModel = class extends ElementModel {
-  constructor(clientId, root, scope, removeElement) {
-    super(root, scope);
+  constructor(clientId, root, scope, liveCursor, removeElement) {
+    super(root, scope, liveCursor);
     _defineProperty14(this, "item", null);
     _defineProperty14(this, "clientId", void 0);
     _defineProperty14(this, "sliceBegin", 0);
@@ -27154,6 +27223,15 @@ var LaserPointerModel = class extends ElementModel {
   }
   subDispose() {
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
 };
 
 // src/WhitePermissions.ts
@@ -27202,8 +27280,8 @@ function _toPrimitive15(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
@@ -27212,6 +27290,15 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   subDispose() {
   }
   onVectorUpdate() {
@@ -27319,8 +27406,8 @@ var ImageModel = class extends ElementModel {
   get src() {
     return this.root.get("src");
   }
-  constructor(root, scope, imageSets) {
-    super(root, scope);
+  constructor(root, scope, imageSets, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty16(this, "item", null);
     _defineProperty16(this, "imageSets", void 0);
     this.imageSets = imageSets;
@@ -27372,6 +27459,9 @@ var ImageModel = class extends ElementModel {
     cfg.uniformScale = () => true;
     return cfg;
   }
+  liveCursorPoint() {
+    return null;
+  }
 };
 
 // src/model/RenderableModel.ts
@@ -27396,7 +27486,7 @@ var RenderableModel = class extends EventEmitter {
   get uuid() {
     return uuidv4().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, liveCursor, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -27408,6 +27498,7 @@ var RenderableModel = class extends EventEmitter {
     _defineProperty17(this, "hasPermission", void 0);
     _defineProperty17(this, "shadowEmitter", void 0);
     _defineProperty17(this, "imageSets", void 0);
+    _defineProperty17(this, "liveCursor", void 0);
     _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
@@ -27415,7 +27506,9 @@ var RenderableModel = class extends EventEmitter {
           if (root) {
             const model = this.convertToModel(root);
             if (model) {
-              this.emit("elementInsert", [model]);
+              setTimeout(() => {
+                this.emit("elementInsert", [model]);
+              });
             }
           }
         } else if (value.action === "delete") {
@@ -27423,6 +27516,7 @@ var RenderableModel = class extends EventEmitter {
         }
       }
     });
+    this.liveCursor = liveCursor;
     this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
@@ -27462,29 +27556,29 @@ var RenderableModel = class extends EventEmitter {
     const type = yMap.get("type");
     let model = null;
     if (type === "curve") {
-      model = new CurveModel(yMap, this.scope);
+      model = new CurveModel(yMap, this.scope, this.liveCursor);
     } else if (["ellipse"].indexOf(type) >= 0) {
-      model = new SegmentsModel(yMap, this.scope, type);
+      model = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     } else if (type === "selector") {
-      model = new SelectorModel(yMap, this.scope);
+      model = new SelectorModel(yMap, this.scope, this.liveCursor);
     } else if (type === "arrow") {
-      model = new LineModel(yMap, this.scope);
+      model = new LineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "line") {
-      model = new StraightLineModel(yMap, this.scope);
+      model = new StraightLineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "point-text") {
-      model = new PointTextModel(yMap, this.scope);
+      model = new PointTextModel(yMap, this.scope, this.liveCursor);
     } else if (type === "triangle") {
-      model = new TriangleModel(yMap, this.scope);
+      model = new TriangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "rectangle") {
-      model = new RectangleModel(yMap, this.scope);
+      model = new RectangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "eraser") {
-      model = new EraserModel(yMap, this.scope);
+      model = new EraserModel(yMap, this.scope, this.liveCursor);
     } else if (type === "laser") {
-      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, (uuid) => {
+      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);
+      model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
@@ -27506,11 +27600,12 @@ var RenderableModel = class extends EventEmitter {
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map) {
+  addElementToDoc(map, type) {
     this.elements.doc?.transact(() => {
       const uuid = this.uuid;
       map.set(ElementModel.KEYS.index, ++this.maxIndex);
       map.set(ElementModel.KEYS.uuid, uuid);
+      map.set("type", type);
       this.elements.set(uuid, map);
     }, elementsUndoOrigin);
   }
@@ -27525,7 +27620,9 @@ var RenderableModel = class extends EventEmitter {
     if (!this.confirmPermission()) {
       return;
     }
-    const model = new ImageModel(new Y12.Map(), this.scope, this.imageSets);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "image");
+    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;
@@ -27535,23 +27632,25 @@ var RenderableModel = class extends EventEmitter {
     });
     model.appendPointsMatrix(initMatrix);
     model.ownerId = this.userManager.selfId;
-    this.addElementToDoc(model.root);
   }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
       return null;
     }
-    const curveModel = new CurveModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "curve");
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
     this.initElement(curveModel, shadow);
-    this.addElementToDoc(curveModel.root);
     return curveModel;
   }
   createLaserPointer() {
     if (!this.confirmPermission()) {
       return null;
     }
-    const model = new LaserPointerModel(this.userManager.selfId, new Y12.Map(), this.scope, (uuid) => {
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "laser");
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
     model.strokeWidth = 8;
@@ -27559,50 +27658,53 @@ var RenderableModel = class extends EventEmitter {
     model.fillColor = "#F44336";
     model.ownerId = this.userManager.selfId;
     model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createEraser() {
     if (!this.hasPermission(WhiteboardPermissionFlag.deleteSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const model = new EraserModel(new Y12.Map(), this.scope);
-    model.strokeWidth = 12;
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "eraser");
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
+    model.strokeWidth = 4;
     model.strokeColor = "#9E9E9E";
     model.fillColor = "#9E9E9E";
     model.ownerId = this.userManager.selfId;
     model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createTriangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const triangle = new TriangleModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "triangle");
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
     this.initElement(triangle, shadow);
     triangle.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(triangle.root);
     return triangle;
   }
   createRectangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const rect = new RectangleModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "rectangle");
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
     this.initElement(rect, shadow);
     rect.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(rect.root);
     return rect;
   }
   createSegmentedPath(type, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const segmentsModel = new SegmentsModel(new Y12.Map(), this.scope, type);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, type);
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     this.initElement(segmentsModel, shadow);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
   createSelector() {
@@ -27610,41 +27712,45 @@ var RenderableModel = class extends EventEmitter {
     if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const selectorModel = new SelectorModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "selector");
+    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
-    this.addElementToDoc(selectorModel.root);
     return selectorModel;
   }
   createStraightLine(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const straightLineModel = new StraightLineModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "line");
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
     this.initElement(straightLineModel, shadow);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(straightLineModel.root);
     return straightLineModel;
   }
   createLinePath(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const lineModel = new LineModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "arrow");
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
     this.initElement(lineModel, shadow);
     lineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(lineModel.root);
     return lineModel;
   }
   createPointText(x, y, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const pointTextModel = new PointTextModel(new Y12.Map(), this.scope);
+    const yMap = new Y12.Map();
+    this.addElementToDoc(yMap, "point-text");
+    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
     this.initElement(pointTextModel, shadow);
-    this.addElementToDoc(pointTextModel.root);
     return pointTextModel;
   }
   clearElement() {
@@ -27963,7 +28069,8 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "elementModel", null);
     _defineProperty19(this, "recognizer", new Recognizer());
     _defineProperty19(this, "pointCount", 0);
-    this.tool.minDistance = 1;
+    _defineProperty19(this, "showLiveCursor", true);
+    this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -28052,6 +28159,7 @@ var RectangleTool = class extends WhiteboardTool {
     _defineProperty20(this, "elementModel", null);
     _defineProperty20(this, "from", null);
     _defineProperty20(this, "to", null);
+    _defineProperty20(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -28208,6 +28316,7 @@ var SelectorTool = class extends WhiteboardTool {
     _defineProperty22(this, "to", null);
     _defineProperty22(this, "selectElementsModel", void 0);
     _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
@@ -29162,6 +29271,7 @@ var TextTool = class extends WhiteboardTool {
     _defineProperty26(this, "elementModel", null);
     _defineProperty26(this, "toolbarModel", void 0);
     _defineProperty26(this, "camera", void 0);
+    _defineProperty26(this, "showLiveCursor", false);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -29731,6 +29841,7 @@ var EllipseTool = class extends WhiteboardTool {
     _defineProperty29(this, "elementModel", null);
     _defineProperty29(this, "from", null);
     _defineProperty29(this, "to", null);
+    _defineProperty29(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -29785,6 +29896,7 @@ var TriangleTool = class extends WhiteboardTool {
     _defineProperty30(this, "elementModel", null);
     _defineProperty30(this, "from", null);
     _defineProperty30(this, "to", null);
+    _defineProperty30(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -29864,6 +29976,7 @@ var Whiteboard = class extends EventEmitter8 {
     _defineProperty31(this, "translateCamera", void 0);
     _defineProperty31(this, "scaleCamera", void 0);
     _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "showLiveCursor", void 0);
     _defineProperty31(this, "setFreeModelUserPage", void 0);
     _defineProperty31(this, "indexedNavigation", void 0);
     _defineProperty31(this, "setViewModeToFree", void 0);
@@ -29900,13 +30013,16 @@ function _toPrimitive32(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserTool = class extends WhiteboardTool {
-  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
+  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel, shadowScope) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
     _defineProperty32(this, "elementModel", null);
     _defineProperty32(this, "trashedElementsModel", void 0);
     _defineProperty32(this, "pointCount", 0);
+    _defineProperty32(this, "showLiveCursor", true);
+    _defineProperty32(this, "shadowScope", void 0);
     this.trashedElementsModel = trashedElementsModel;
-    this.tool.minDistance = 1;
+    this.tool.minDistance = 2;
+    this.shadowScope = shadowScope;
   }
   onMouseDown(_event) {
     this.pointCount = 0;
@@ -29933,6 +30049,16 @@ var EraserTool = class extends WhiteboardTool {
         this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
       }
     });
+    this.shadowScope.project.activeLayer.children.forEach((item) => {
+      if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.hitTest(event.point, {
+        segments: true,
+        stroke: true,
+        fill: true,
+        tolerance: 5
+      })) {
+        this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
+      }
+    });
   }
   onMouseUp(_event) {
     if (this.elementModel) {
@@ -30089,6 +30215,7 @@ var LaserPointerTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty34(this, "elementModel", null);
     _defineProperty34(this, "pointCount", 0);
+    _defineProperty34(this, "showLiveCursor", true);
     this.tool.minDistance = 5;
   }
   onMouseDown(_event) {
@@ -30715,6 +30842,7 @@ var StraightLineTool = class extends WhiteboardTool {
     _defineProperty38(this, "elementModel", null);
     _defineProperty38(this, "from", null);
     _defineProperty38(this, "to", null);
+    _defineProperty38(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
@@ -30764,6 +30892,7 @@ var GrabTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty39(this, "camera", void 0);
     _defineProperty39(this, "downPoint", null);
+    _defineProperty39(this, "showLiveCursor", false);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -30784,9 +30913,27 @@ var GrabTool = class extends WhiteboardTool {
 };
 
 // src/tool/PointerTool.ts
+function _defineProperty40(e, r, t) {
+  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey40(t) {
+  var i = _toPrimitive40(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive40(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var PointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty40(this, "showLiveCursor", false);
   }
   onMouseDown(_event) {
   }
@@ -30797,14 +30944,14 @@ var PointerTool = class extends WhiteboardTool {
 };
 
 // src/SequenceExecutor.ts
-function _defineProperty40(e, r, t) {
-  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty41(e, r, t) {
+  return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey40(t) {
-  var i = _toPrimitive40(t, "string");
+function _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive40(t, r) {
+function _toPrimitive41(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -30816,8 +30963,8 @@ function _toPrimitive40(t, r) {
 }
 var SequenceExecutor = class {
   constructor() {
-    _defineProperty40(this, "tasks", []);
-    _defineProperty40(this, "isRunning", false);
+    _defineProperty41(this, "tasks", []);
+    _defineProperty41(this, "isRunning", false);
   }
   addTask(task) {
     this.tasks.push(task);
@@ -30845,14 +30992,137 @@ var SequenceExecutor = class {
 
 // src/WhiteboardApplication.ts
 import { removeObserver as removeObserver7 } from "@netless/forge-room";
-function _defineProperty41(e, r, t) {
-  return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+
+// src/LiveCursor.ts
+function _defineProperty42(e, r, t) {
+  return (r = _toPropertyKey42(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey41(t) {
-  var i = _toPrimitive41(t, "string");
+function _toPropertyKey42(t) {
+  var i = _toPrimitive42(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive41(t, r) {
+function _toPrimitive42(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var LiveCursor = class {
+  constructor(canvasElement, paperScope, userManager, requestUserMap) {
+    _defineProperty42(this, "container", document.createElement("div"));
+    _defineProperty42(this, "showLiveCursor", true);
+    _defineProperty42(this, "userManager", void 0);
+    _defineProperty42(this, "requestUserMap", void 0);
+    _defineProperty42(this, "cursors", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "paperScope", void 0);
+    _defineProperty42(this, "resizeobserver", void 0);
+    _defineProperty42(this, "timeoutIdMap", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "lastVisibleChangeTimes", /* @__PURE__ */ new Map());
+    this.userManager = userManager;
+    this.paperScope = paperScope;
+    this.requestUserMap = requestUserMap;
+    this.container.setAttribute("data-forge-cursors", "");
+    this.container.style.cssText = "overflow:hidden;pointer-events:none;z-index:999;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.container.style.pointerEvents = "none";
+    this.resizeobserver = new ResizeObserver(() => {
+      const bounds = canvasElement.getBoundingClientRect();
+      this.container.style.width = bounds.width + "px";
+      this.container.style.height = bounds.height + "px";
+    });
+    this.resizeobserver.observe(canvasElement);
+  }
+  createCursor(userId) {
+    const cursor = document.createElement("fcursor");
+    cursor.setAttribute("data-forge-cursor", userId);
+    cursor.style.backgroundColor = this.requestUserMap(userId).get(WhiteboardKeys.themeColor);
+    cursor.style.color = "#fff";
+    cursor.style.position = "absolute";
+    cursor.style.whiteSpace = "nowrap";
+    cursor.style.display = "block";
+    cursor.style.fontSize = "12px";
+    cursor.style.padding = "2px 4px";
+    cursor.style.borderRadius = "4px";
+    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+    return cursor;
+  }
+  isOnSamePage(userId) {
+    const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+    const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
+    if (otherPage !== selfPage) {
+      return false;
+    }
+    return true;
+  }
+  detectEnable(userId) {
+    if (!this.showLiveCursor) {
+      const cursor = this.cursors.get(userId);
+      if (cursor) {
+        cursor.style.display = "none";
+      }
+    }
+    return this.showLiveCursor;
+  }
+  updateCursorPosition(point, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    const lastVisibleChangeTime = this.lastVisibleChangeTimes.get(userId);
+    if (lastVisibleChangeTime && Date.now() - lastVisibleChangeTime < 100) {
+      return;
+    }
+    if (!this.cursors.has(userId)) {
+      const cursor2 = this.createCursor(userId);
+      this.cursors.set(userId, cursor2);
+      this.container.appendChild(cursor2);
+    }
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      const viewPoint = this.paperScope.project.view.projectToView(point);
+      cursor.style.left = viewPoint.x + "px";
+      cursor.style.top = viewPoint.y + "px";
+      cursor.style.display = "block";
+    }
+    if (this.timeoutIdMap.has(userId)) {
+      clearTimeout(this.timeoutIdMap.get(userId));
+    }
+    this.timeoutIdMap.set(userId, setTimeout(() => {
+      const cursor2 = this.cursors.get(userId);
+      if (cursor2) {
+        cursor2.style.display = "none";
+      }
+    }, 5e3));
+  }
+  updateCursorVisible(visible, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    this.lastVisibleChangeTimes.set(userId, Date.now());
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      cursor.style.display = visible ? "block" : "none";
+    }
+  }
+};
+
+// src/WhiteboardApplication.ts
+function _defineProperty43(e, r, t) {
+  return (r = _toPropertyKey43(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey43(t) {
+  var i = _toPrimitive43(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive43(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -30875,40 +31145,71 @@ var WhiteboardApplication = class extends AbstractApplication {
     var _this;
     super();
     _this = this;
-    _defineProperty41(this, "name", WHITEBOARD_APP_NAME);
-    _defineProperty41(this, "emitter", void 0);
-    _defineProperty41(this, "toolbarModel", void 0);
-    _defineProperty41(this, "selectElementsModel", void 0);
-    _defineProperty41(this, "trashedElementsModel", void 0);
-    _defineProperty41(this, "pageModel", void 0);
-    _defineProperty41(this, "layers", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "undoManagers", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "imageSets", document.createElement("div"));
-    _defineProperty41(this, "rootElement", document.createElement("div"));
-    _defineProperty41(this, "paperScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "canvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "shadowScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "snapshotCanvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "snapshotScope", new import_paper.default.PaperScope());
-    _defineProperty41(this, "shadowCanvasElement", document.createElement("canvas"));
-    _defineProperty41(this, "shadowEmitter", void 0);
-    _defineProperty41(this, "tools", void 0);
-    _defineProperty41(this, "editors", /* @__PURE__ */ new Map());
-    _defineProperty41(this, "camera", void 0);
-    _defineProperty41(this, "resizeObserver", void 0);
-    _defineProperty41(this, "option", void 0);
-    _defineProperty41(this, "permissions", void 0);
-    _defineProperty41(this, "inputType", "any");
-    _defineProperty41(this, "isPenEvent", false);
-    _defineProperty41(this, "hasPenInput", null);
-    _defineProperty41(this, "disableViewModelUpdate", false);
-    _defineProperty41(this, "internalResizeObserver", true);
-    _defineProperty41(this, "sequenceExecutor", new SequenceExecutor());
-    _defineProperty41(this, "linkTarget", null);
-    _defineProperty41(this, "enableToolEvent", () => {
+    _defineProperty43(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty43(this, "emitter", void 0);
+    _defineProperty43(this, "toolbarModel", void 0);
+    _defineProperty43(this, "selectElementsModel", void 0);
+    _defineProperty43(this, "trashedElementsModel", void 0);
+    _defineProperty43(this, "pageModel", void 0);
+    _defineProperty43(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "imageSets", document.createElement("div"));
+    _defineProperty43(this, "rootElement", document.createElement("div"));
+    _defineProperty43(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowEmitter", void 0);
+    _defineProperty43(this, "tools", void 0);
+    _defineProperty43(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "camera", void 0);
+    _defineProperty43(this, "resizeObserver", void 0);
+    _defineProperty43(this, "option", void 0);
+    _defineProperty43(this, "permissions", void 0);
+    _defineProperty43(this, "inputType", "any");
+    _defineProperty43(this, "isPenEvent", false);
+    _defineProperty43(this, "hasPenInput", null);
+    _defineProperty43(this, "disableViewModelUpdate", false);
+    _defineProperty43(this, "internalResizeObserver", true);
+    _defineProperty43(this, "sequenceExecutor", new SequenceExecutor());
+    _defineProperty43(this, "linkTarget", null);
+    _defineProperty43(this, "liveCursor", void 0);
+    _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty41(this, "handlePageSwitch", (pageId) => {
+    _defineProperty43(this, "handleElementTranslateOut", (ids, container) => {
+      const shadowLayer = this.shadowScope.project.activeLayer;
+      let parent = null;
+      if (container === "layer") {
+        parent = shadowLayer;
+      } else {
+        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
+      }
+      if (parent) {
+        ids.forEach((id) => {
+          const target = parent.children.find((child) => child.data.uuid === id);
+          if (target) {
+            target.remove();
+            this.insertElementToParent(target, this.paperScope.project.activeLayer);
+          } else {
+            const pageId = this.pageModel.getCurrentPage(this.userId);
+            if (pageId) {
+              const page = this.layers.get(pageId);
+              if (page) {
+                const model = page.elementModels.get(id);
+                if (model && model.item) {
+                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+    _defineProperty43(this, "handlePageSwitch", (pageId) => {
       this.sequenceExecutor.addTask(async () => {
         for (const editor of this.editors.values()) {
           editor.hidden();
@@ -30956,24 +31257,24 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
     });
-    _defineProperty41(this, "hasPermission", (flag) => {
+    _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty41(this, "handleStackItemAdded", () => {
+    _defineProperty43(this, "handleStackItemAdded", () => {
       this.selectElementsModel.clearSelectElementForSelf();
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty41(this, "handleStackItemPopped", () => {
+    _defineProperty43(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty41(this, "handleLayersChange", (ids) => {
+    _defineProperty43(this, "handleLayersChange", (ids) => {
       for (let i = 0, len = ids.length; i < len; i++) {
         const id = ids[i];
         if (!this.layers.has(id)) {
           const elementsMap = this.getMap(`layer/${id}/elements`);
-          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.hasPermission);
+          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)) {
@@ -31000,17 +31301,17 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       }
     });
-    _defineProperty41(this, "getCurrentRenderableModel", () => {
+    _defineProperty43(this, "getCurrentRenderableModel", () => {
       const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (!this.layers.has(layerId)) {
         this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
       }
       return this.layers.get(layerId);
     });
-    _defineProperty41(this, "handleElementClear", () => {
+    _defineProperty43(this, "handleElementClear", () => {
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty41(this, "handleElementInsert", (elements) => {
+    _defineProperty43(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -31022,7 +31323,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty41(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty43(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -31033,11 +31334,11 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty41(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty43(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty41(this, "handleElementsTrash", (userId, elements) => {
+    _defineProperty43(this, "handleElementsTrash", (userId, elements) => {
       const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
@@ -31050,7 +31351,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       });
     });
-    _defineProperty41(this, "handleElementsSelect", (userId, elements) => {
+    _defineProperty43(this, "handleElementsSelect", (userId, elements) => {
       if (!this.editors.has(userId)) {
         const ctrl = this.userManager.getUser(userId);
         const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
@@ -31093,7 +31394,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty41(this, "handleLinkedMapChange", (evt) => {
+    _defineProperty43(this, "handleLinkedMapChange", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
           this.toolbarModel.currentTool = evt.target.get(TOOLBAR_KEYS.tool);
@@ -31110,7 +31411,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         }
       }
     });
-    _defineProperty41(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+    _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
       if (this.option.width > 0 && this.option.height > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
@@ -31126,7 +31427,6 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.camera.triggerZoom();
       }
     });
-    window.__wb = this;
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
     const that = this;
@@ -31272,7 +31572,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.hasPermission));
+        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, {
@@ -31322,12 +31622,23 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.resetCamera = () => {
       this.camera.reset();
     };
+    this.emitter.showLiveCursor = (value) => {
+      this.liveCursor.showLiveCursor = value;
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
       log4("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
     });
+    Object.defineProperty(this.emitter, "__delayTranslateOut", {
+      get() {
+        return that.delayTranslateOut;
+      },
+      set(value) {
+        that.delayTranslateOut = value;
+      }
+    });
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -31428,6 +31739,10 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
+    if (this.option.stretchToFill) {
+      this.option.width = -1;
+      this.option.height = -1;
+    }
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
     this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
@@ -31476,6 +31791,9 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.selectElementsModel = new SelectElementsModel(this.userManager, (userId) => {
       return this.userMap(userId);
     }, this.hasPermission);
+    this.liveCursor = new LiveCursor(this.canvasElement, this.paperScope, this.userManager, (userId) => {
+      return this.userMap(userId);
+    });
     this.tools = {
       pointer: new PointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       curve: new CurveTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
@@ -31486,7 +31804,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       text: new TextTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.rootElement, this.canvasElement, this.toolbarModel, this.camera),
       ellipse: new EllipseTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       triangle: new TriangleTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel),
+      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel, this.shadowScope),
       laser: new LaserPointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       grab: new GrabTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.camera)
     };
@@ -31558,32 +31876,12 @@ var WhiteboardApplication = class extends AbstractApplication {
       }
     });
     this.shadowEmitter.on("translateOut", (ids, container) => {
-      const shadowLayer = this.shadowScope.project.activeLayer;
-      let parent = null;
-      if (container === "layer") {
-        parent = shadowLayer;
+      if (this.delayTranslateOut > 0) {
+        setTimeout(() => {
+          this.handleElementTranslateOut(ids, container);
+        }, this.delayTranslateOut);
       } else {
-        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
-      }
-      if (parent) {
-        ids.forEach((id) => {
-          const target = parent.children.find((child) => child.data.uuid === id);
-          if (target) {
-            target.remove();
-            this.insertElementToParent(target, this.paperScope.project.activeLayer);
-          } else {
-            const pageId = this.pageModel.getCurrentPage(this.userId);
-            if (pageId) {
-              const page = this.layers.get(pageId);
-              if (page) {
-                const model = page.elementModels.get(id);
-                if (model && model.item) {
-                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
-                }
-              }
-            }
-          }
-        });
+        this.handleElementTranslateOut(ids, container);
       }
     });
     this.shadowEmitter.on("translateIn", (ids, container) => {
@@ -31610,6 +31908,14 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.emitter.emit("grabUp");
     });
     this.clearElements();
+    if (this.option.stretchToFill) {
+      window.addEventListener("resize", () => {
+        const bounds = document.body.getBoundingClientRect();
+        this.updateOptionSize(bounds.width, bounds.height);
+        this.adjustByOutFrame(bounds.width, bounds.height);
+      });
+    }
+    this.rootElement.appendChild(this.liveCursor.container);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -31805,7 +32111,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.permissions.dispose();
   }
 };
-_defineProperty41(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 export {
   Whiteboard,
   WhiteboardApplication,