@netless/forge-whiteboard 0.1.7 → 0.1.10

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`, 否则调用无效
@@ -29230,17 +29363,33 @@ var Whiteboard = class extends import_eventemitter39.default {
    */
   redo;
   /**
-   * 光栅化指定页面
-   * @param {string | number | undefined} page 指定页码, string 指示页码 id, number 指示 IndexedNavigation 页面索引, undefined 指示光栅化当前页
-   * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url, 如果页面不存在返回 null
+   * 光栅化指定页面的可视区域
+   * @param {number} scale 缩放比例
+   * @param {string=} page string 指示页码 id; number 指示 IndexedNavigation 页面索引; undefined 指示光栅化当前页
+   * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url. 如果页面不存在返回 null
+   */
+  rasterizeViewport;
+  /**
+   * 光栅化指定页面包含所有元素的包围盒
+   * @param {number} outputMaxWidth 输出图片最大宽度, 在保证高宽比的情况下限值输出图片的宽度小于等于此值
+   * @param {number} outputMaxHeight 输出图片最大高度, 在保证高宽比的情况下限值输出图片的高度小于等于此值
+   * @param {string=} page string 指示页码 id; number 指示 IndexedNavigation 页面索引; undefined 指示光栅化当前页
+   * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url. 如果页面不存在返回 null
+   */
+  rasterizeElementsBounds;
+  /**
+   * 光栅化指定页面最大缩放区域, 如果没有指定 `WhiteboardOption.maxScaleRatio` 或者指定的值为 -1, 则按 `rasterizeViewport` 返回结果.
+   * @param {number} scale 缩放比例
+   * @param {string=} page string 指示页码 id; number 指示 IndexedNavigation 页面索引; undefined 指示光栅化当前页
+   * @return {Promise<string>} 异步返回光栅化结果, 图片 png 对应的 base64 url. 如果页面不存在返回 null
    */
-  rasterize;
+  rasterizeMaxBounds;
   /**
    * 设置输入类型, "pen" 仅接受手写笔输入, "any" 接受任意输入, 当首次侦测到手写笔输入时, 将自动切换为 "pen"
    * @param {"pen" | "any"} type 输入类型
    */
   setInputType;
-  insertImage;
+  // public insertImage!: (src: string) => void;
   constructor(view) {
     super();
     this.view = view;
@@ -30142,13 +30291,28 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
     this.emitter.redo = () => {
       this.undoManager?.redo();
     };
-    this.emitter.rasterize = (page) => {
-      return this.rasterize(page);
+    this.emitter.rasterizeViewport = (scale, page) => {
+      return this.rasterize(1, 1, scale, "viewport", page);
+    };
+    this.emitter.rasterizeElementsBounds = (outputMaxWidth, outputMaxHeight, page) => {
+      return this.rasterize(outputMaxWidth, outputMaxHeight, 1, "bounds", page);
+    };
+    this.emitter.rasterizeMaxBounds = (scale, page) => {
+      return this.rasterize(1, 1, scale, "maxScale", page);
     };
     this.emitter.setInputType = (type) => {
       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 +30376,39 @@ 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;
+      }
+    });
+    window["__wb"] = this;
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -30239,7 +30436,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,
@@ -30655,7 +30857,10 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       this.emitter.emit("elementDeselected", userId);
     }
   };
-  rasterize(page) {
+  ensureScale(outputWidth, outputHeight, originSize) {
+    return Math.min(outputWidth / originSize.width, outputHeight / originSize.height);
+  }
+  rasterize(outputMaxWidth, outputMaxHeight, scale, area, page) {
     let pageId;
     if (typeof page === "string") {
       pageId = page;
@@ -30669,8 +30874,6 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
       return Promise.resolve(null);
     }
     this.snapshotScope.project.activeLayer.removeChildren();
-    this.snapshotScope.view.matrix = this.paperScope.project.view.matrix.clone();
-    this.snapshotScope.view.viewSize = this.paperScope.project.view.viewSize.clone();
     for (const key of Array.from(renderableModel.elements.keys())) {
       let elementModel = null;
       if (renderableModel.elementModels.has(key)) {
@@ -30691,6 +30894,29 @@ var WhiteboardApplication = class extends import_forge_room3.AbstractApplication
         }
       }
     }
+    if (area === "bounds") {
+      const bounds = this.snapshotScope.project.activeLayer.bounds;
+      const scale2 = this.ensureScale(outputMaxWidth, outputMaxHeight, bounds.size);
+      const matrix = new this.paperScope.Matrix();
+      matrix.scale(scale2);
+      matrix.translate({ x: -bounds.x, y: -bounds.y });
+      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 matrix = new this.paperScope.Matrix();
+      matrix.scale(scale);
+      matrix.translate({ x: offsetX, y: offsetY });
+      this.snapshotScope.view.viewSize = new this.snapshotScope.Size(width, height).multiply(scale);
+      this.snapshotScope.view.matrix = matrix;
+    } else {
+      this.snapshotScope.view.matrix = this.paperScope.project.view.matrix.clone();
+      this.snapshotScope.view.matrix.scale(scale, this.paperScope.project.view.bounds.topLeft);
+      this.snapshotScope.view.viewSize = this.paperScope.project.view.viewSize.clone().multiply(scale);
+    }
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(this.snapshotScope.view.element.toDataURL("image/png"));