@netless/forge-whiteboard 0.1.7 → 0.1.9

package/dist/whiteboard.js

@@ -28838,6 +28838,14 @@ var Camera = class extends import_eventemitter38.default {
   hasPermission;
   gesture;
   inherentScale = 1;
+  maxScale;
+  initSize;
+  bound;
+  boundTiemoutId;
+  enableByMouse = true;
+  enableByTouch = true;
+  boundaryColor = "#F44336";
+  enableBoundaryHighlight = true;
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -28847,8 +28855,12 @@ var Camera = class extends import_eventemitter38.default {
     const view = this.scope.project.view;
     return 1 / view.matrix.scaling.x;
   }
-  constructor(dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, paperSize, domSize) {
+  constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, paperSize, domSize) {
     super();
+    this.maxScale = maxScale;
+    this.bound = window.document.createElement("div");
+    this.bound.style.cssText = `transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`;
+    this.initSize = initSize;
     this.hasPermission = hasPermission;
     this.paperSize = paperSize;
     this.domSize = domSize;
@@ -28857,6 +28869,7 @@ var Camera = class extends import_eventemitter38.default {
     this.requestUserMap = requestUserMap;
     this.userManager = userManager;
     this.dom = dom;
+    this.dom.appendChild(this.bound);
     this.dom.addEventListener("wheel", this.handleWheel, { passive: false, capture: true });
     this.dom.addEventListener("touchstart", (e) => {
       e.preventDefault();
@@ -28877,17 +28890,32 @@ var Camera = class extends import_eventemitter38.default {
     this.whiteboardAttrsMap.observe(this.handleMainCameraChange);
     this.gesture = new Gesture(this.dom, this.scope);
     this.gesture.on("offset", (x, y) => {
+      if (!this.enableByTouch) {
+        return;
+      }
       const matrix = new this.scope.Matrix();
       matrix.translate({ x: x * this.translateScale, y: y * this.translateScale });
-      this.appendViewMatrix(matrix);
+      this.updateViewMatrix(matrix);
     });
     this.gesture.on("scale", (scale, center) => {
+      if (!this.enableByTouch) {
+        return;
+      }
       const matrix = new this.scope.Matrix();
       const paperPoint = this.scope.project.view.viewToProject(center);
       matrix.scale(scale, paperPoint);
-      this.appendViewMatrix(matrix);
+      this.updateViewMatrix(matrix);
     });
   }
+  highlightBound() {
+    if (this.enableBoundaryHighlight) {
+      this.bound.style.boxShadow = `inset 0px 0px 6px 2px ${this.boundaryColor}`;
+      window.clearTimeout(this.boundTiemoutId);
+      this.boundTiemoutId = window.setTimeout(() => {
+        this.bound.style.boxShadow = `none`;
+      }, 100);
+    }
+  }
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
@@ -28904,6 +28932,9 @@ var Camera = class extends import_eventemitter38.default {
     return new this.scope.Matrix(matrixValue);
   }
   triggerZoom() {
+    const [width, height] = this.domSize();
+    this.bound.style.width = `${width}px`;
+    this.bound.style.height = `${height}px`;
     this.emit("zoom", this.inherentMatrix.appended(this.getActiveMatrix()));
   }
   resetViewMatrixToFlow(userId) {
@@ -28982,29 +29013,89 @@ var Camera = class extends import_eventemitter38.default {
       }
     }
   };
-  appendViewMatrix(matrix) {
+  validNextMatrix(next) {
+    let shouldHighlightBound = false;
+    const maxTranslate = (this.maxScale - 1) / 2;
+    const maxScale = maxTranslate * 2 + 1;
+    const minScale = 1 / maxScale;
+    if (next.a > maxScale) {
+      const tx = next.tx / next.a;
+      next.a = maxScale;
+      next.tx = tx * maxScale;
+      shouldHighlightBound = true;
+    }
+    if (next.a < minScale) {
+      const tx = next.tx / next.a;
+      next.a = minScale;
+      next.tx = tx * minScale;
+      shouldHighlightBound = true;
+    }
+    if (next.d > maxScale) {
+      const ty = next.ty / next.d;
+      next.d = maxScale;
+      next.ty = ty * maxScale;
+      shouldHighlightBound = true;
+    }
+    if (next.d < minScale) {
+      const ty = next.ty / next.d;
+      next.d = minScale;
+      next.ty = ty * minScale;
+      shouldHighlightBound = true;
+    }
+    const maxTranslateX = this.initSize.width * maxTranslate;
+    if (next.tx / next.a > maxTranslateX) {
+      next.tx = maxTranslateX * next.a;
+      shouldHighlightBound = true;
+    }
+    const minTx = (this.initSize.width * (maxTranslate + 1) - this.scope.project.view.bounds.width) * -next.a;
+    if (next.tx < minTx) {
+      next.tx = minTx;
+      shouldHighlightBound = true;
+    }
+    const maxTranslateY = this.initSize.height * maxTranslate;
+    if (next.ty / next.d > maxTranslateY) {
+      next.ty = maxTranslateY * next.d;
+      shouldHighlightBound = true;
+    }
+    const minTy = (this.initSize.height * (maxTranslate + 1) - this.scope.project.view.bounds.height) * -next.d;
+    if (next.ty < minTy) {
+      next.ty = minTy;
+      shouldHighlightBound = true;
+    }
+    if (shouldHighlightBound) {
+      this.highlightBound();
+    }
+    return next;
+  }
+  updateViewMatrix(matrix, append = true) {
     const userMap = this.requestUserMap(this.userManager.selfId);
     const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
-    if (cameraMode === "free" || cameraMode === "main") {
+    let next = matrix;
+    if (append) {
       const currentMatrixValue = userMap.get(WhiteboardKeys.viewMatrix);
       const current = new this.scope.Matrix(currentMatrixValue);
-      const next = current.appended(matrix);
-      if (next.scaling.x <= 3 && next.scaling.x >= 0.3) {
-        userMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+      next = current.appended(matrix);
+    }
+    if (this.maxScale >= 1) {
+      next = this.validNextMatrix(next);
+    } else {
+      if (!(next.scaling.x <= 3 && next.scaling.x >= 0.2) && append) {
+        return;
       }
     }
+    if (cameraMode === "free" || cameraMode === "main") {
+      userMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+    }
     if (cameraMode === "main") {
       if (this.hasPermission(32 /* mainView */)) {
-        const currentMatrixValue = this.whiteboardAttrsMap.get(WhiteboardKeys.viewMatrix);
-        const current = new this.scope.Matrix(currentMatrixValue);
-        const next = current.appended(matrix);
-        if (next.scaling.x <= 3 && next.scaling.x >= 0.3) {
-          this.whiteboardAttrsMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
-        }
+        this.whiteboardAttrsMap.set(WhiteboardKeys.viewMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
       }
     }
   }
   handleWheel = (evt) => {
+    if (!this.enableByMouse) {
+      return;
+    }
     evt.preventDefault();
     evt.stopImmediatePropagation();
     evt.stopPropagation();
@@ -29028,22 +29119,33 @@ var Camera = class extends import_eventemitter38.default {
       } else {
         scale = 1 + Math.abs(deltaY / wheelDelta);
       }
+      scale = Math.max(0.9, scale);
+      scale = Math.min(1.1, scale);
       matrix.scale(scale, paperPoint);
-      this.appendViewMatrix(matrix);
+      this.updateViewMatrix(matrix);
     } else {
       const deltaX = this.lastDelta.x + evt.deltaX;
       const deltaY = this.lastDelta.y + evt.deltaY;
       const matrix = new this.scope.Matrix();
       matrix.translate({ x: -deltaX * window.devicePixelRatio, y: -deltaY * window.devicePixelRatio });
-      this.appendViewMatrix(matrix);
+      this.updateViewMatrix(matrix);
     }
     this.lastTriggerTime = Date.now();
     this.lastDelta = { x: 0, y: 0 };
   };
+  scale(value) {
+    const matrix = new this.scope.Matrix();
+    matrix.scale(value, this.scope.project.view.bounds.center);
+    this.updateViewMatrix(matrix);
+  }
   translate(offsetX, offsetY) {
     const matrix = new this.scope.Matrix();
     matrix.translate({ x: offsetX, y: offsetY });
-    this.appendViewMatrix(matrix);
+    this.updateViewMatrix(matrix);
+  }
+  reset() {
+    this.updateViewMatrix(new this.scope.Matrix(), false);
+    this.lastDelta = { x: 0, y: 0 };
   }
 };
 
@@ -29152,6 +29254,22 @@ var Whiteboard = class extends import_eventemitter39.default {
    * 描边宽度
    */
   strokeWidth;
+  /**
+   * 是否允许用鼠标/触控板进行缩放和拖动画布
+   */
+  enableCameraByMouse;
+  /**
+   * 是否允许触摸屏上触摸事件进行缩放和拖动画布
+   */
+  enableCameraByTouch;
+  /**
+   * 相机超出边界时, 警示阴影的颜色, 默认 "#F44336"
+   */
+  cameraBoundaryColor;
+  /**
+   * 是否允许相机超出边界时, 警示高亮阴影, 默认 true
+   */
+  enableCameraBoundaryHighlight;
   getElementAttribute;
   setElementAttribute;
   getCurrentTool;
@@ -29193,6 +29311,21 @@ var Whiteboard = class extends import_eventemitter39.default {
    * 清空当前页面
    */
   clearPage;
+  /**
+   * 平移画布
+   * @param {number} offsetX - x 轴偏移量
+   * @param {number} offsetY - y 轴偏移量
+   */
+  translateCamera;
+  /**
+   * 以画布中心为固定点缩放画布
+   * @param {number} scale - 缩放比例
+   */
+  scaleCamera;
+  /**
+   * 重置画布, 将画布缩放比例重置为 1, 平移量重置为 [0, 0]
+   */
+  resetCamera;
   /**
    * 为 userId 指定的用户设置页面, 调用需要有 `WhiteboardPermissionFlag.setOthersView` 权限,
    * userId 指定的用户的视角模式应为 `free`, 否则调用无效
@@ -30149,6 +30282,15 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.inputType = type;
       this.emitter.emit("inputTypeChange", this.inputType);
     };
+    this.emitter.translateCamera = (offsetX, offsetY) => {
+      this.camera.translate(offsetX, offsetY);
+    };
+    this.emitter.scaleCamera = (scale) => {
+      this.camera.scale(scale);
+    };
+    this.emitter.resetCamera = () => {
+      this.camera.reset();
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
       (0, import_forge_room3.log)("WhiteboardApplicationError", {
         errorCode,
@@ -30212,6 +30354,38 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         that.toolbarModel.dashArray = v;
       }
     });
+    Object.defineProperty(this.emitter, "enableCameraByMouse", {
+      get() {
+        return that.camera.enableByMouse;
+      },
+      set(value) {
+        that.camera.enableByMouse = value;
+      }
+    });
+    Object.defineProperty(this.emitter, "enableCameraByTouch", {
+      get() {
+        return that.camera.enableByTouch;
+      },
+      set(value) {
+        that.camera.enableByTouch = value;
+      }
+    });
+    Object.defineProperty(this.emitter, "cameraBoundaryColor", {
+      get() {
+        return that.camera.boundaryColor;
+      },
+      set(value) {
+        that.camera.boundaryColor = value;
+      }
+    });
+    Object.defineProperty(this.emitter, "enableCameraBoundaryHighlight", {
+      get() {
+        return that.camera.enableBoundaryHighlight;
+      },
+      set(value) {
+        that.camera.enableBoundaryHighlight = value;
+      }
+    });
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -30239,7 +30413,12 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     );
     this.pageModel.on("pagesChange", this.handleLayersChange);
     this.pageModel.on("switchPage", this.handlePageSwitch);
+    if (option.maxScaleRatio && option.maxScaleRatio < 1 && option.maxScaleRatio !== -1) {
+      throw new Error(`[@netless/forge-whiteboard] invalid maxScaleRatio ${option.maxScaleRatio}`);
+    }
     this.camera = new Camera(
+      new this.paperScope.Size(option.width, option.height),
+      option.maxScaleRatio ?? -1,
       this.rootElement,
       this.userManager,
       this.paperScope,