@netless/forge-slide 1.1.5 → 1.2.0-beta.3

package/dist/slide.esm.js

@@ -58606,7 +58606,7 @@ var require_lodash = __commonJS2({
           result2.__values__ = wrapper.__values__;
           return result2;
         }
-        function chunk7(array, size2, guard) {
+        function chunk8(array, size2, guard) {
           if (guard ? isIterateeCall(array, size2, guard) : size2 === undefined2) {
             size2 = 1;
           } else {
@@ -60478,7 +60478,7 @@ var require_lodash = __commonJS2({
         lodash.bindKey = bindKey;
         lodash.castArray = castArray;
         lodash.chain = chain;
-        lodash.chunk = chunk7;
+        lodash.chunk = chunk8;
         lodash.compact = compact;
         lodash.concat = concat;
         lodash.cond = cond;
@@ -60956,6 +60956,7 @@ var require_lodash = __commonJS2({
   }
 });
 var import_paper = __toESM2(require_paper_full(), 1);
+var import_lodash = __toESM2(require_lodash(), 1);
 function $(e, t, u, x = (h) => h) {
   return e * x(0.5 - t * (0.5 - u));
 }
@@ -61503,7 +61504,7 @@ var CurveModel = class extends ElementModel {
     _defineProperty3(this, "debug", false);
     _defineProperty3(this, "clearLocalPointsWhenYPointsChange", false);
     _defineProperty3(this, "shouldUseLocalPoints", true);
-    _defineProperty3(this, "localPointsPick", 6);
+    _defineProperty3(this, "localPointsPick", 4);
     if (!this.root.doc || !this.root.has("type")) {
       this.root.set("type", "curve");
     }
@@ -61515,7 +61516,6 @@ var CurveModel = class extends ElementModel {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const hasRealPressure = points.some((p) => p.length >= 3 && p[2] > 0);
     const viewScale = this.scope.project.view.matrix.scaling.x || 1;
     const taper = this.strokeWidth * 5 / viewScale;
     const streamline = Math.min(0.7, 0.7 * viewScale);
@@ -61524,7 +61524,7 @@ var CurveModel = class extends ElementModel {
       smoothing: 0.7,
       thinning: 0.5,
       streamline,
-      simulatePressure: !hasRealPressure,
+      simulatePressure: true,
       start: {
         taper,
         cap: true
@@ -61535,36 +61535,13 @@ var CurveModel = class extends ElementModel {
       }
     });
   }
-  isPressureValue(value) {
-    return typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
-  }
-  pointStride(points) {
-    if (points.length >= 3 && points.length % 3 === 0) {
-      let hasPressureSlot = false;
-      for (let i = 2; i < points.length; i += 3) {
-        if (!this.isPressureValue(points[i])) {
-          return 2;
-        }
-        hasPressureSlot = true;
-      }
-      if (hasPressureSlot) {
-        return 3;
-      }
-    }
-    return 2;
-  }
   matrixedPoints() {
     const points = this.localPoints.length === 0 ? this.points : this.localPoints;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const output = [];
-    const stride = this.pointStride(points);
-    for (let i = 0, len = points.length; i + 1 < len; i += stride) {
-      const p = new this.scope.Point(points[i], points[i + 1]);
-      const tp = p.transform(matrix);
-      const pressure = stride === 3 ? points[i + 2] ?? 0 : 0;
-      output.push([tp.x, tp.y, pressure]);
-    }
-    return output;
+    return (0, import_lodash.chunk)(points, 2).filter((point) => point.length === 2).map((_ref) => {
+      let [x, y] = _ref;
+      return new this.scope.Point(x, y).transform(matrix);
+    }).map((point) => [point.x, point.y]);
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -61638,12 +61615,11 @@ var CurveModel = class extends ElementModel {
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
     const points = yArray.toArray();
-    const stride = this.pointStride(points);
-    if (points.length < stride) {
+    if (points.length < 2) {
       return null;
     }
     const len = points.length;
-    const point = new this.scope.Point(points[len - stride], points[len - stride + 1]);
+    const point = new this.scope.Point(points[len - 2], points[len - 1]);
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
   onStyleKeyUpdate(key) {
@@ -61736,7 +61712,7 @@ var SelectorModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
   }
 };
-var import_lodash = __toESM2(require_lodash(), 1);
+var import_lodash2 = __toESM2(require_lodash(), 1);
 function _defineProperty5(e, r, t) {
   return (r = _toPropertyKey5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -61769,7 +61745,7 @@ function serializePath(path) {
   }, []);
 }
 function deserializePath(points, scope, matrix) {
-  const segmentGroup = (0, import_lodash.chunk)(points, 6);
+  const segmentGroup = (0, import_lodash2.chunk)(points, 6);
   const path = new scope.Path();
   path.segments = segmentGroup.map((v) => deserializeSegment(v, scope, matrix));
   return path;
@@ -61907,7 +61883,7 @@ var SegmentsModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
   }
 };
-var import_lodash3 = __toESM2(require_lodash(), 1);
+var import_lodash4 = __toESM2(require_lodash(), 1);
 function _defineProperty7(e, r, t) {
   return (r = _toPropertyKey7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62002,7 +61978,7 @@ var WhiteboardTool = class {
     this.tool.onMouseUp = this.onMouseUpSelf;
   }
 };
-var import_lodash2 = __toESM2(require_lodash(), 1);
+var import_lodash3 = __toESM2(require_lodash(), 1);
 function _defineProperty8(e, r, t) {
   return (r = _toPropertyKey8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62051,7 +62027,7 @@ var LineTool = class extends WhiteboardTool {
         const point = path.getPointAt(distance);
         return [point.x, point.y];
       });
-      this.elementModel.setPoints((0, import_lodash2.flattenDeep)(points));
+      this.elementModel.setPoints((0, import_lodash3.flattenDeep)(points));
     }
   }
   onMouseUp(_event) {
@@ -62132,7 +62108,7 @@ var LineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash3.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -62268,7 +62244,7 @@ var LineControlPoint = class {
     const invertedPoint = point.transform(pointsMatrix.inverted());
     const points = this.model["drawPoints"];
     this.position = invertedPoint;
-    const clonedPoints = (0, import_lodash3.cloneDeep)(points);
+    const clonedPoints = (0, import_lodash4.cloneDeep)(points);
     clonedPoints[this.options.index * 2] = invertedPoint.x;
     clonedPoints[this.options.index * 2 + 1] = invertedPoint.y;
     this.model.setPoints(clonedPoints);
@@ -62738,7 +62714,7 @@ var RectangleModel = class extends ElementModel {
   }
 };
 var elementsUndoOrigin = "elementsUndoOrigin";
-var import_lodash4 = __toESM2(require_lodash(), 1);
+var import_lodash5 = __toESM2(require_lodash(), 1);
 function _defineProperty13(e, r, t) {
   return (r = _toPropertyKey13(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62806,7 +62782,7 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash4.chunk)(points, 2);
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
       smoothing: 0.5,
@@ -62824,7 +62800,7 @@ var EraserModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
+    const currentPoints = (0, import_lodash5.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
     return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
@@ -62887,7 +62863,7 @@ var EraserModel = class extends ElementModel {
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
 };
-var import_lodash5 = __toESM2(require_lodash(), 1);
+var import_lodash6 = __toESM2(require_lodash(), 1);
 function _defineProperty14(e, r, t) {
   return (r = _toPropertyKey14(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -63013,7 +62989,7 @@ var LaserPointerModel = class extends ElementModel {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const points = this.cachedPoints || this.points;
     console.log("[][][] ,", this.points.length, this.cachedPoints?.length, this.localPoints.length);
-    const groupPoints = (0, import_lodash5.chunk)(points, 2).slice(this.sliceBegin);
+    const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
       return matrix.transform([x, y]);
@@ -63087,7 +63063,7 @@ var WhiteboardPermissions = class extends AbstractApplicationPermissions {
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
 };
-var import_lodash6 = __toESM2(require_lodash(), 1);
+var import_lodash7 = __toESM2(require_lodash(), 1);
 function _defineProperty15(e, r, t) {
   return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -63146,7 +63122,7 @@ var StraightLineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash6.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash7.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -63266,6 +63242,7 @@ var ImageModel = class extends ElementModel {
     }
     if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
       const img = document.createElement("img");
+      img.crossOrigin = "anonymous";
       img.src = this.src;
       img.id = this.uuid;
       this.imageSets.appendChild(img);
@@ -63470,14 +63447,55 @@ var RenderableModel = class extends EventEmitter {
     const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor, this.isPerformanceMode);
     model.bindObserver();
     model.root.set("src", src);
-    const initMatrix = new this.scope.Matrix();
+    model.ownerId = this.userManager.selfId;
+    this.fitImageToViewport(src, model);
+  }
+  fitImageToViewport(src, model) {
     const center = this.scope.project.view.center;
-    initMatrix.translate({
+    const fallbackMatrix = new this.scope.Matrix();
+    fallbackMatrix.translate({
       x: center.x,
       y: center.y
     });
-    model.appendPointsMatrix(initMatrix);
-    model.ownerId = this.userManager.selfId;
+    this.setElementPointsMatrix(model, fallbackMatrix);
+    const img = document.createElement("img");
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const naturalWidth = img.naturalWidth || img.width;
+      const naturalHeight = img.naturalHeight || img.height;
+      if (naturalWidth <= 0 || naturalHeight <= 0) {
+        return;
+      }
+      const viewportBounds = this.scope.project.view.bounds;
+      const maxWidth = viewportBounds.width * 2 / 3;
+      const maxHeight = viewportBounds.height * 2 / 3;
+      const fitScale = Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight, 1);
+      const nextMatrix = new this.scope.Matrix();
+      nextMatrix.translate({
+        x: center.x,
+        y: center.y
+      });
+      if (fitScale > 0 && Number.isFinite(fitScale)) {
+        nextMatrix.scale(fitScale);
+      }
+      this.setElementPointsMatrix(model, nextMatrix);
+    };
+    img.onerror = () => {
+      log("[@netless/forge-whiteboard] failed to preload image for viewport fitting", {
+        src
+      }, "warn");
+    };
+    img.src = src;
+  }
+  setElementPointsMatrix(model, matrix) {
+    const values = [matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty];
+    if (model.root.doc) {
+      model.root.doc.transact(() => {
+        model.root.set(ElementModel.KEYS.pointsMatrix, values);
+      }, elementsUndoOrigin);
+    } else {
+      model.root.set(ElementModel.KEYS.pointsMatrix, values);
+    }
   }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
@@ -63734,7 +63752,7 @@ var RenderableModel = class extends EventEmitter {
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
+      yMap.set(ElementModel.KEYS.points, Y12.Array.from([x, y]));
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
@@ -63742,7 +63760,6 @@ var RenderableModel = class extends EventEmitter {
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
     pointTextModel.bindObserver();
-    pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
     this.initElement(pointTextModel);
@@ -63774,7 +63791,7 @@ var RenderableModel = class extends EventEmitter {
     });
   }
 };
-var import_lodash7 = __toESM2(require_lodash(), 1);
+var import_lodash8 = __toESM2(require_lodash(), 1);
 function Point(x, y) {
   this.X = x;
   this.Y = y;
@@ -64017,7 +64034,7 @@ var Recognizer = class {
     let maxX = -Number.MAX_VALUE;
     let minY = Number.MAX_VALUE;
     let maxY = -Number.MAX_VALUE;
-    const result = this.dollar.Recognize((0, import_lodash7.chunk)(points, 3).map((v) => {
+    const result = this.dollar.Recognize((0, import_lodash8.chunk)(points, 2).map((v) => {
       minX = Math.min(minX, v[0]);
       maxX = Math.max(maxX, v[0]);
       minY = Math.min(minY, v[1]);
@@ -64095,22 +64112,20 @@ var CurveTool = class extends WhiteboardTool {
     if (this.elementModel) {
       let lastX = 0;
       let lastY = 0;
-      if (this.pendingPoints.length >= 3) {
-        lastX = this.pendingPoints[this.pendingPoints.length - 3];
-        lastY = this.pendingPoints[this.pendingPoints.length - 2];
+      if (this.pendingPoints.length >= 2) {
+        lastX = this.pendingPoints[this.pendingPoints.length - 2];
+        lastY = this.pendingPoints[this.pendingPoints.length - 1];
       } else {
         const len = this.elementModel.points.length;
-        if (len >= 3) {
-          lastX = this.elementModel.points[len - 3];
-          lastY = this.elementModel.points[len - 2];
+        if (len >= 2) {
+          lastX = this.elementModel.points[len - 2];
+          lastY = this.elementModel.points[len - 1];
         }
       }
       const dist = Math.max(Math.abs(lastX - event.point.x), Math.abs(lastY - event.point.y));
       if (dist >= MIN_DISTANCE) {
         this.pointCount += 1;
-        const nativeEvent = event.event;
-        const pressure = nativeEvent.pointerType === "pen" && nativeEvent.pressure > 0 ? nativeEvent.pressure : 0;
-        this.pendingPoints.push(event.point.x, event.point.y, pressure);
+        this.pendingPoints.push(event.point.x, event.point.y);
         if (!this.flushRafId) {
           this.flushRafId = requestAnimationFrame(this.flushPendingPoints);
         }
@@ -68297,9 +68312,14 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
       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) => {
+    return new Promise((resolve, reject) => {
       setTimeout(() => {
-        resolve(this.snapshotScope.view.element.toDataURL("image/png"));
+        try {
+          const res = this.snapshotScope.view.element.toDataURL("image/png");
+          resolve(res);
+        } catch (error) {
+          reject(error);
+        }
       }, 32);
     });
   }