@netless/forge-whiteboard 0.1.17 → 0.1.19

package/dist/whiteboard.js

@@ -29987,6 +29987,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);
@@ -31151,6 +31152,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();
@@ -31190,6 +31205,12 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
     _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;
@@ -31422,21 +31443,24 @@ var WhiteboardApplication = class extends import_forge_room12.AbstractApplicatio
       }
     });
     _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
-      if (this.option.width > 0 && this.option.height > 0) {
+      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 / viewportHeight);
         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();
       }
     });
+    window._wb = this;
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
     const that = this;
@@ -31635,6 +31659,12 @@ 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";
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
       (0, import_forge_room12.log)("WhiteboardApplicationError", {
         errorCode,
@@ -31750,8 +31780,15 @@ 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.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
@@ -31920,12 +31957,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();
@@ -32021,10 +32059,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({
@@ -32086,8 +32124,8 @@ 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() {