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

package/dist/slide.esm.js

@@ -63266,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);
@@ -63470,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;
@@ -68297,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);
     });
   }