@netless/forge-slide 1.1.4 → 1.2.0-beta.0

package/dist/slide.esm.js

@@ -61535,14 +61535,33 @@ 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 = [];
-    for (let i = 0, len = points.length; i < len; i += 3) {
+    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 = points[i + 2] ?? 0;
+      const pressure = stride === 3 ? points[i + 2] ?? 0 : 0;
       output.push([tp.x, tp.y, pressure]);
     }
     return output;
@@ -61618,11 +61637,13 @@ var CurveModel = class extends ElementModel {
   }
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
-    if (yArray.length < 3) {
+    const points = yArray.toArray();
+    const stride = this.pointStride(points);
+    if (points.length < stride) {
       return null;
     }
-    const len = yArray.length;
-    const point = new this.scope.Point(yArray.get(len - 3), yArray.get(len - 2));
+    const len = points.length;
+    const point = new this.scope.Point(points[len - stride], points[len - stride + 1]);
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
   onStyleKeyUpdate(key) {
@@ -63245,6 +63266,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);
@@ -63449,14 +63471,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;
@@ -68276,9 +68339,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);
     });
   }