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

package/dist/whiteboard.js

@@ -25822,8 +25822,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,
@@ -25840,15 +25839,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();
@@ -27597,28 +27596,11 @@ var RenderableModel = class extends import_eventemitter3.default {
     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) {
@@ -27631,7 +27613,14 @@ var RenderableModel = class extends import_eventemitter3.default {
       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();
@@ -27649,9 +27638,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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() {
@@ -27659,15 +27661,21 @@ var RenderableModel = class extends import_eventemitter3.default {
       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() {
@@ -27675,13 +27683,19 @@ var RenderableModel = class extends import_eventemitter3.default {
       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) {
@@ -27689,9 +27703,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
   }
@@ -27700,9 +27727,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
   }
@@ -27711,9 +27751,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
   }
@@ -27723,7 +27776,15 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
@@ -27733,9 +27794,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
   }
@@ -27744,9 +27818,22 @@ var RenderableModel = class extends import_eventemitter3.default {
       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;
   }
@@ -27755,12 +27842,25 @@ var RenderableModel = class extends import_eventemitter3.default {
       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() {
@@ -27778,9 +27878,11 @@ var RenderableModel = class extends import_eventemitter3.default {
       removeIds.forEach((id) => this.elements.delete(id));
     });
   }
-  dispose() {
+  dispose(clearElements) {
     (0, import_forge_room4.removeObserver)(this.elements, this.onElementsChange);
-    this.elements.clear();
+    if (clearElements) {
+      this.elements.clear();
+    }
     Array.from(this.elementModels.values()).forEach((model) => {
       model.dispose();
     });
@@ -29987,6 +30089,7 @@ var Whiteboard = class extends import_eventemitter38.default {
     _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);
@@ -31143,6 +31246,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 import_forge_room12.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
@@ -31151,6 +31269,20 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     }
     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();
@@ -31184,12 +31316,33 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     _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;
@@ -31300,7 +31453,7 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
           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);
@@ -31319,6 +31472,7 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
       return this.layers.get(layerId);
     });
     _defineProperty43(this, "handleElementClear", () => {
+      this.shadowScope.project.activeLayer.removeChildren();
       this.paperScope.project.activeLayer.removeChildren();
     });
     _defineProperty43(this, "handleElementInsert", (elements) => {
@@ -31404,34 +31558,44 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
         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();
@@ -31635,6 +31799,9 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     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";
     };
@@ -31740,6 +31907,7 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
         that.camera.enableBoundaryHighlight = value;
       }
     });
+    window.addEventListener("forge-whiteboard-synced-status", this.addWhiteboardStatus);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -31753,10 +31921,18 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     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);
@@ -31923,12 +32099,13 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     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();
@@ -32024,10 +32201,10 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
       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({
@@ -32051,28 +32228,23 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     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) {
-      (0, import_forge_room13.removeObserver)(this.linkTarget, this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = null;
   }
   setViewSize(width, height) {
     this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
@@ -32089,11 +32261,14 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     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();
@@ -32110,7 +32285,7 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
       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();
@@ -32122,6 +32297,7 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     this.toolbarModel.dispose();
     this.emitter.indexedNavigation.dispose();
     this.permissions.dispose();
+    (0, import_forge_room13.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
   }
 };
 _defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);