@leapfrog/interactive-canvas 2.0.23-beta-7 → 2.0.23-beta-9

package/dist/interactive-canvas.es.js

@@ -1,8 +1,7 @@
 import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
-import * as fabric from 'fabric';
-import { FabricImage } from 'fabric';
 import { loadImage } from 'canvas';
+import * as fabric from 'fabric';
 
 const PIXELS_PER_MM$2 = 3.937;
 class MillimeterDimensions {
@@ -3046,26 +3045,36 @@ class AbstractInteractiveCanvas {
                 //const canvas = createCanvas(1, 1);
                 //const ctx = canvas.getContext("2d");
                 const image = yield loadImage(imageUrl);
+                const fabricImage = new this.fabric.Image(image, {
+                    src: imageUrl,
+                    crossOrigin: "anonymous",
+                    toObject: function () {
+                        return Object.assign(Object.assign({}, this.callSuper("toObject")), { src: this.src, crossOrigin: this.crossOrigin });
+                    },
+                });
+                //const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
                 const id = this.randomId();
                 let newScale = 1;
-                const curWidth = newScale * image.width;
+                const curWidth = newScale * fabricImage.width;
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
                 // Set image properties and add to the canvas
-                //const fabricImage = new FabricImage(imageUrl, {
+                // const fabricImage = new FabricImage(imageUrl, {
                 //const fabricImage = new this.fabric.Image(image, {
-                const fabricImage = new FabricImage(image, {
+                // const fabricImage = new FabricImage(image as any, {
+                fabricImage.set({
                     id: id,
                     scaleX: newScale,
                     scaleY: newScale,
                     originX: "left",
-                    originY: "top",
-                    crossOrigin: options.crossOrigin,
-                    src: imageUrl
+                    originY: "top"
                 });
+                console.log("headless image-->", fabricImage);
                 this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
+                const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
+                canvasObjectData.imagePath = imageUrl;
+                const object = new Image(this, fabricImage, canvasObjectData);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3143,6 +3152,45 @@ class AbstractInteractiveCanvas {
    
            return object;
        }*/
+    /* public async addImageObject(imageUrl: string): Promise<IImage> {
+         const maxSizeScale = 2;
+         const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+         // 1. Safe Isomorphic Options: Prevent browser configurations from cracking Server runs
+         const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+         const options = isBrowser ? { crossOrigin: "anonymous" } : {};
+ 
+         // 2. Fabric v6 Asynchronous Image Loader
+         const fabricImage = await this.fabric.Image.fromURL(imageUrl, options);
+ 
+         const id = this.randomId();
+         let newScale = 1;
+         const curWidth = newScale * fabricImage.width;
+ 
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         fabricImage.set({
+             id: id,
+             scaleX: newScale,
+             scaleY: newScale,
+             originX: "left",
+             originY: "top"
+         } as any);
+ 
+         this.fabricCanvas.add(fabricImage);
+ 
+         // Ensure 'Image' resolves to your internal custom class wrapper, not the native DOM global
+         // If your 'Image' class is a domain wrapper (e.g., CustomImageWrapper), name it distinctly to prevent collision.
+         const object = new (Image as any)(this, fabricImage);
+ 
+         this.trackNewObject(object);
+         this.selectFabricObject(fabricImage);
+         this.syncObjectList();
+ 
+         return object;
+     }*/
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.js

@@ -2,8 +2,8 @@
 
 var _ = require('lodash');
 var rxjs = require('rxjs');
-var fabric = require('fabric');
 var canvas = require('canvas');
+var fabric = require('fabric');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3066,26 +3066,36 @@ class AbstractInteractiveCanvas {
                 //const canvas = createCanvas(1, 1);
                 //const ctx = canvas.getContext("2d");
                 const image = yield canvas.loadImage(imageUrl);
+                const fabricImage = new this.fabric.Image(image, {
+                    src: imageUrl,
+                    crossOrigin: "anonymous",
+                    toObject: function () {
+                        return Object.assign(Object.assign({}, this.callSuper("toObject")), { src: this.src, crossOrigin: this.crossOrigin });
+                    },
+                });
+                //const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
                 const id = this.randomId();
                 let newScale = 1;
-                const curWidth = newScale * image.width;
+                const curWidth = newScale * fabricImage.width;
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
                 // Set image properties and add to the canvas
-                //const fabricImage = new FabricImage(imageUrl, {
+                // const fabricImage = new FabricImage(imageUrl, {
                 //const fabricImage = new this.fabric.Image(image, {
-                const fabricImage = new fabric.FabricImage(image, {
+                // const fabricImage = new FabricImage(image as any, {
+                fabricImage.set({
                     id: id,
                     scaleX: newScale,
                     scaleY: newScale,
                     originX: "left",
-                    originY: "top",
-                    crossOrigin: options.crossOrigin,
-                    src: imageUrl
+                    originY: "top"
                 });
+                console.log("headless image-->", fabricImage);
                 this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
+                const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
+                canvasObjectData.imagePath = imageUrl;
+                const object = new Image(this, fabricImage, canvasObjectData);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3163,6 +3173,45 @@ class AbstractInteractiveCanvas {
    
            return object;
        }*/
+    /* public async addImageObject(imageUrl: string): Promise<IImage> {
+         const maxSizeScale = 2;
+         const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+         // 1. Safe Isomorphic Options: Prevent browser configurations from cracking Server runs
+         const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+         const options = isBrowser ? { crossOrigin: "anonymous" } : {};
+ 
+         // 2. Fabric v6 Asynchronous Image Loader
+         const fabricImage = await this.fabric.Image.fromURL(imageUrl, options);
+ 
+         const id = this.randomId();
+         let newScale = 1;
+         const curWidth = newScale * fabricImage.width;
+ 
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         fabricImage.set({
+             id: id,
+             scaleX: newScale,
+             scaleY: newScale,
+             originX: "left",
+             originY: "top"
+         } as any);
+ 
+         this.fabricCanvas.add(fabricImage);
+ 
+         // Ensure 'Image' resolves to your internal custom class wrapper, not the native DOM global
+         // If your 'Image' class is a domain wrapper (e.g., CustomImageWrapper), name it distinctly to prevent collision.
+         const object = new (Image as any)(this, fabricImage);
+ 
+         this.trackNewObject(object);
+         this.selectFabricObject(fabricImage);
+         this.syncObjectList();
+ 
+         return object;
+     }*/
     /**
      * @override
      * @inheritDoc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "2.0.23-beta-7",
+  "version": "2.0.23-beta-9",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"