@netless/forge-whiteboard 0.1.18 → 0.1.20-alpha.1

package/dist/whiteboard.esm.js

@@ -25812,8 +25812,7 @@ var CurveModel = class extends ElementModel {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash.chunk)(points, 2);
-    return ae(groupPoints, {
+    return ae(points, {
       size: this.strokeWidth,
       smoothing: 0.5,
       thinning: -0.5,
@@ -25830,15 +25829,15 @@ var CurveModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
-    return currentPoints.map((_ref) => {
-      let [x, y] = _ref;
-      return new this.scope.Point(x, y);
-    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
-      result.push(next.x);
-      result.push(next.y);
-      return result;
-    }, []);
+    const points = this.points;
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const output = [];
+    for (let i = 0, len = points.length; i < len; i += 2) {
+      const p = new this.scope.Point(points[i], points[i + 1]);
+      const tp = p.transform(matrix);
+      output.push([tp.x, tp.y]);
+    }
+    return output;
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -27587,28 +27586,11 @@ var RenderableModel = class extends EventEmitter {
     return model;
   }
   initElement(element) {
-    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (shadow) {
-      element.shadow = "layer";
-    }
-    element.strokeWidth = this.toolbarModel.strokeWidth;
-    element.strokeColor = this.toolbarModel.strokeColor;
-    element.fillColor = this.toolbarModel.fillColor;
-    element.ownerId = this.userManager.selfId;
     element.shadowEmitter = this.shadowEmitter;
   }
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  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);
-  }
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
@@ -27621,7 +27603,14 @@ var RenderableModel = class extends EventEmitter {
       return;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "image");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "image");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     model.root.set("src", src);
     const initMatrix = new this.scope.Matrix();
@@ -27639,9 +27628,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "curve");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "curve");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
-    this.initElement(curveModel, shadow);
+    this.initElement(curveModel);
     return curveModel;
   }
   createLaserPointer() {
@@ -27649,15 +27651,21 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "laser");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "laser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 8);
+      yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
+      yMap.set(ElementModel.KEYS.fillColor, "#F44336");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
-    model.strokeWidth = 8;
-    model.strokeColor = "#F44336";
-    model.fillColor = "#F44336";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
     return model;
   }
   createEraser() {
@@ -27665,13 +27673,19 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "eraser");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "eraser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 4);
+      yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.fillColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     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";
     return model;
   }
   createTriangle(shadow) {
@@ -27679,9 +27693,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "triangle");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "triangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
-    this.initElement(triangle, shadow);
+    this.initElement(triangle);
     triangle.dashArray = this.toolbarModel.dashArray;
     return triangle;
   }
@@ -27690,9 +27717,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "rectangle");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "rectangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
-    this.initElement(rect, shadow);
+    this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
     return rect;
   }
@@ -27701,9 +27741,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, type);
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", type);
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
-    this.initElement(segmentsModel, shadow);
+    this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
     return segmentsModel;
   }
@@ -27713,7 +27766,15 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "selector");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "selector");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
     return selectorModel;
@@ -27723,9 +27784,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "line");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "line");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
-    this.initElement(straightLineModel, shadow);
+    this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
     return straightLineModel;
   }
@@ -27734,9 +27808,22 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "arrow");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "arrow");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
-    this.initElement(lineModel, shadow);
+    this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
     return lineModel;
   }
@@ -27745,12 +27832,25 @@ var RenderableModel = class extends EventEmitter {
       return null;
     }
     const yMap = new Y12.Map();
-    this.addElementToDoc(yMap, "point-text");
+    this.elements.doc?.transact(() => {
+      const uuid = this.uuid;
+      yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
+      yMap.set(ElementModel.KEYS.uuid, uuid);
+      yMap.set("type", "point-text");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
     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.initElement(pointTextModel);
     return pointTextModel;
   }
   clearElement() {
@@ -27768,9 +27868,11 @@ var RenderableModel = class extends EventEmitter {
       removeIds.forEach((id) => this.elements.delete(id));
     });
   }
-  dispose() {
+  dispose(clearElements) {
     removeObserver2(this.elements, this.onElementsChange);
-    this.elements.clear();
+    if (clearElements) {
+      this.elements.clear();
+    }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
     });
@@ -29977,6 +30079,7 @@ var Whiteboard = class extends EventEmitter8 {
     _defineProperty31(this, "scaleCamera", void 0);
     _defineProperty31(this, "resetCamera", void 0);
     _defineProperty31(this, "showLiveCursor", void 0);
+    _defineProperty31(this, "updateViewport", void 0);
     _defineProperty31(this, "setFreeModelUserPage", void 0);
     _defineProperty31(this, "indexedNavigation", void 0);
     _defineProperty31(this, "setViewModeToFree", void 0);
@@ -31133,6 +31236,21 @@ function _toPrimitive43(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
+var AsyncMap = class {
+  constructor() {
+    _defineProperty43(this, "map", void 0);
+    this.map = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    return Promise.resolve(this.map.get(key));
+  }
+  set(key, value) {
+    this.map.set(key, value);
+  }
+};
+if (!window.__forge_gl_wb_status__) {
+  window.__forge_gl_wb_status__ = new AsyncMap();
+}
 var WhiteboardApplication = class extends AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
@@ -31141,6 +31259,20 @@ var WhiteboardApplication = class extends AbstractApplication {
     }
     return null;
   }
+  get viewportWidth() {
+    const vw = this.getMap("attrs").get("viewportWidth");
+    if (vw) {
+      return vw;
+    }
+    return this.option.width;
+  }
+  get viewportHeight() {
+    const vh = this.getMap("attrs").get("viewportHeight");
+    if (vh) {
+      return vh;
+    }
+    return this.option.height;
+  }
   constructor() {
     var _this;
     super();
@@ -31174,12 +31306,33 @@ var WhiteboardApplication = class extends AbstractApplication {
     _defineProperty43(this, "disableViewModelUpdate", false);
     _defineProperty43(this, "internalResizeObserver", true);
     _defineProperty43(this, "sequenceExecutor", new SequenceExecutor());
-    _defineProperty43(this, "linkTarget", null);
+    _defineProperty43(this, "linkWhiteboardId", null);
     _defineProperty43(this, "liveCursor", void 0);
     _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "addWhiteboardStatus", (evt) => {
+      if (evt.detail.whiteboardAppId && evt.detail.status) {
+        if (this.linkWhiteboardId === evt.detail.whiteboardAppId) {
+          this.toolbarModel.currentTool = evt.detail.status.currentTool;
+          this.toolbarModel.strokeColor = evt.detail.status.strokeColor;
+          this.toolbarModel.fillColor = evt.detail.status.fillColor;
+          this.toolbarModel.fontSize = evt.detail.status.fontSize;
+          this.toolbarModel.fontFamily = evt.detail.status.fontFamily;
+          this.toolbarModel.strokeWidth = evt.detail.status.strokeWidth;
+          this.toolbarModel.dashArray = evt.detail.status.dashArray;
+          this.permissions.removePermission(WhiteboardPermissionFlag.all);
+          this.permissions.addPermission(evt.detail.status.permission);
+        }
+      }
+    });
     _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
+    _defineProperty43(this, "handleViewportUpdate", (evt) => {
+      if (evt.keysChanged.has("viewportWidth") || evt.keysChanged.has("viewportHeight")) {
+        const rect = this.rootElement.getBoundingClientRect();
+        this.adjustByOutFrame(rect.width, rect.height);
+      }
+    });
     _defineProperty43(this, "handleElementTranslateOut", (ids, container) => {
       const shadowLayer = this.shadowScope.project.activeLayer;
       let parent = null;
@@ -31290,7 +31443,7 @@ var WhiteboardApplication = class extends AbstractApplication {
           const renderableModel = this.layers.get(entry[0]);
           this.layers.delete(entry[0]);
           if (renderableModel) {
-            renderableModel.dispose();
+            renderableModel.dispose(true);
           }
           const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
           const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
@@ -31309,6 +31462,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       return this.layers.get(layerId);
     });
     _defineProperty43(this, "handleElementClear", () => {
+      this.shadowScope.project.activeLayer.removeChildren();
       this.paperScope.project.activeLayer.removeChildren();
     });
     _defineProperty43(this, "handleElementInsert", (elements) => {
@@ -31394,34 +31548,44 @@ var WhiteboardApplication = class extends AbstractApplication {
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _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);
-          this.toolbarModel.strokeColor = evt.target.get(TOOLBAR_KEYS.strokeColor);
-          this.toolbarModel.fillColor = evt.target.get(TOOLBAR_KEYS.fillColor);
-          this.toolbarModel.fontSize = evt.target.get(TOOLBAR_KEYS.fontSize);
-          this.toolbarModel.fontFamily = evt.target.get(TOOLBAR_KEYS.fontFamily);
-          this.toolbarModel.strokeWidth = evt.target.get(TOOLBAR_KEYS.strokeWidth);
-          this.toolbarModel.dashArray = evt.target.get(TOOLBAR_KEYS.dashArray);
-        }
-        if (key === "permission" && (value.action === "add" || value.action === "update")) {
-          this.permissions.removePermission(WhiteboardPermissionFlag.all);
-          this.permissions.addPermission(evt.target.get("permission"), this.userId);
-        }
+    _defineProperty43(this, "handleSyncedWhiteboardStatusChange", (evt) => {
+      if ([TOOLBAR_KEYS.tool, TOOLBAR_KEYS.strokeColor, TOOLBAR_KEYS.fillColor, TOOLBAR_KEYS.fontSize, TOOLBAR_KEYS.fontFamily, TOOLBAR_KEYS.strokeWidth, TOOLBAR_KEYS.dashArray, "permission"].some((key) => evt.keysChanged.has(key))) {
+        const nextState = {
+          currentTool: evt.target.get(TOOLBAR_KEYS.tool),
+          strokeColor: evt.target.get(TOOLBAR_KEYS.strokeColor),
+          fillColor: evt.target.get(TOOLBAR_KEYS.fillColor),
+          fontSize: evt.target.get(TOOLBAR_KEYS.fontSize),
+          fontFamily: evt.target.get(TOOLBAR_KEYS.fontFamily),
+          strokeWidth: evt.target.get(TOOLBAR_KEYS.strokeWidth),
+          dashArray: evt.target.get(TOOLBAR_KEYS.dashArray),
+          permission: evt.target.get("permission")
+        };
+        window.__forge_gl_wb_status__.set(this.appId, nextState);
+        window.dispatchEvent(new CustomEvent("forge-whiteboard-synced-status", {
+          detail: {
+            whiteboardAppId: this.appId,
+            status: nextState,
+            userId: this.userId
+          }
+        }));
       }
     });
     _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
-      if (this.option.width > 0 && this.option.height > 0) {
+      if (!this.paperScope.project.view || !this.shadowScope.project.view) {
+        return;
+      }
+      const viewportWidth = this.viewportWidth;
+      const viewportHeight = this.viewportHeight;
+      if (viewportWidth > 0 && viewportHeight > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
         let width = minWidth;
-        let height = width * this.option.height / this.option.width;
+        let height = width * viewportHeight / viewportWidth;
         if (height > minHeight) {
           height = minHeight;
-          width = height * this.option.width / this.option.height;
+          width = height * viewportWidth / viewportHeight;
         }
-        this.camera.updateInherentScale(width / this.option.width);
+        this.camera.updateInherentScale(width / viewportWidth);
         this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.camera.triggerZoom();
@@ -31625,6 +31789,9 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter.showLiveCursor = (value) => {
       this.liveCursor.showLiveCursor = value;
     };
+    this.emitter.updateViewport = (width, height) => {
+      this.updateOptionSize(width, height);
+    };
     this.emitter.__setMainCanvasVisible = (visible) => {
       this.canvasElement.style.opacity = visible ? "1" : "0";
     };
@@ -31730,6 +31897,7 @@ var WhiteboardApplication = class extends AbstractApplication {
         that.camera.enableBoundaryHighlight = value;
       }
     });
+    window.addEventListener("forge-whiteboard-synced-status", this.addWhiteboardStatus);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -31743,10 +31911,18 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
     if (this.option.stretchToFill) {
-      this.option.width = -1;
-      this.option.height = -1;
+      this.getMap("attrs").set("viewportWidth", -1);
+      this.getMap("attrs").set("viewportHeight", -1);
+    } else {
+      if (!this.getMap("attrs").has("viewportWidth")) {
+        this.getMap("attrs").set("viewportWidth", option.width);
+      }
+      if (!this.getMap("attrs").has("viewportHeight")) {
+        this.getMap("attrs").set("viewportHeight", option.height);
+      }
     }
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
+    this.userMap(this.userId).observe(this.handleSyncedWhiteboardStatusChange);
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
     this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
       return this.userMap(userId);
@@ -31913,12 +32089,13 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.clearElements();
     if (this.option.stretchToFill) {
       window.addEventListener("resize", () => {
-        const bounds = document.body.getBoundingClientRect();
+        const bounds = this.rootElement.getBoundingClientRect();
         this.updateOptionSize(bounds.width, bounds.height);
         this.adjustByOutFrame(bounds.width, bounds.height);
       });
     }
     this.rootElement.appendChild(this.liveCursor.container);
+    this.getMap("attrs").observe(this.handleViewportUpdate);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -32014,10 +32191,10 @@ var WhiteboardApplication = class extends AbstractApplication {
       this.snapshotScope.view.viewSize = bounds.size.multiply(scale2);
       this.snapshotScope.view.matrix = matrix;
     } else if (area === "maxScale" && this.option.maxScaleRatio && this.option.maxScaleRatio !== -1) {
-      const width = this.option.width * this.option.maxScaleRatio;
-      const height = this.option.height * this.option.maxScaleRatio;
-      const offsetX = this.option.width * (this.option.maxScaleRatio - 1) / 2;
-      const offsetY = this.option.height * (this.option.maxScaleRatio - 1) / 2;
+      const width = this.viewportWidth * this.option.maxScaleRatio;
+      const height = this.viewportHeight * this.option.maxScaleRatio;
+      const offsetX = this.viewportWidth * (this.option.maxScaleRatio - 1) / 2;
+      const offsetY = this.viewportHeight * (this.option.maxScaleRatio - 1) / 2;
       const matrix = new this.paperScope.Matrix();
       matrix.scale(scale);
       matrix.translate({
@@ -32041,28 +32218,23 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.disableViewModelUpdate = true;
   }
   linkToWhiteboard(targetId) {
-    if (this.linkTarget) {
-      this.unlink();
-    }
-    this.userMap(this.userId);
-    this.linkTarget = this.roomDoc.getMap(`@app/${this.name}/${targetId}/user/${this.userId}`);
-    if (this.linkTarget) {
-      this.toolbarModel.currentTool = this.linkTarget.get(TOOLBAR_KEYS.tool);
-      this.toolbarModel.strokeColor = this.linkTarget.get(TOOLBAR_KEYS.strokeColor);
-      this.toolbarModel.fillColor = this.linkTarget.get(TOOLBAR_KEYS.fillColor);
-      this.toolbarModel.fontSize = this.linkTarget.get(TOOLBAR_KEYS.fontSize);
-      this.toolbarModel.fontFamily = this.linkTarget.get(TOOLBAR_KEYS.fontFamily);
-      this.toolbarModel.strokeWidth = this.linkTarget.get(TOOLBAR_KEYS.strokeWidth);
-      this.toolbarModel.dashArray = this.linkTarget.get(TOOLBAR_KEYS.dashArray);
-      this.permissions.removePermission(WhiteboardPermissionFlag.all);
-      this.permissions.addPermission(this.linkTarget.get("permission"), this.userId);
-      this.linkTarget.observe(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = targetId;
+    window.__forge_gl_wb_status__.get(targetId).then((currentStatus) => {
+      if (currentStatus) {
+        this.toolbarModel.currentTool = currentStatus.currentTool;
+        this.toolbarModel.strokeColor = currentStatus.strokeColor;
+        this.toolbarModel.fillColor = currentStatus.fillColor;
+        this.toolbarModel.fontSize = currentStatus.fontSize;
+        this.toolbarModel.fontFamily = currentStatus.fontFamily;
+        this.toolbarModel.strokeWidth = currentStatus.strokeWidth;
+        this.toolbarModel.dashArray = currentStatus.dashArray;
+        this.permissions.removePermission(WhiteboardPermissionFlag.all);
+        this.permissions.addPermission(currentStatus.permission);
+      }
+    });
   }
   unlink() {
-    if (this.linkTarget) {
-      removeObserver7(this.linkTarget, this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = null;
   }
   setViewSize(width, height) {
     this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
@@ -32079,11 +32251,14 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.internalResizeObserver = value;
   }
   updateOptionSize(width, height) {
-    this.option.width = width;
-    this.option.height = height;
+    this.getMap("attrs").set("viewportWidth", width);
+    this.getMap("attrs").set("viewportHeight", height);
     this.camera.updateInitSize(new import_paper.default.Size(width, height));
   }
-  async dispose() {
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
     this.selectElementsModel.dispose();
     this.trashedElementsModel.dispose();
     this.paperScope.view.remove();
@@ -32100,7 +32275,7 @@ var WhiteboardApplication = class extends AbstractApplication {
       entry[1].off("stack-item-popped", this.handleStackItemPopped);
     }
     for (const entry of this.layers.entries()) {
-      entry[1].dispose();
+      entry[1].dispose(removeSubDoc);
       entry[1].removeAllListeners();
     }
     this.camera.dispose();
@@ -32112,6 +32287,7 @@ var WhiteboardApplication = class extends AbstractApplication {
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
+    removeObserver7(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
   }
 };
 _defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);