@leapfrog/interactive-canvas 2.0.23-beta-1 → 2.0.23-beta-3

package/dist/interactive-canvas.es.js

@@ -3042,9 +3042,8 @@ class AbstractInteractiveCanvas {
             const options = { crossOrigin: "anonymous" };
             if (this.headless) {
                 // Server-side logic without mock DOM
-                //const { createCanvas, loadImage } = require("canvas"); // Use node-canvas
-                const canvas = createCanvas(1, 1); // Temporary canvas for image processing
-                canvas.getContext("2d");
+                createCanvas(1, 1);
+                //const ctx = canvas.getContext("2d");
                 const image = yield loadImage(imageUrl);
                 const id = this.randomId();
                 let newScale = 1;
@@ -3094,6 +3093,51 @@ class AbstractInteractiveCanvas {
             }
         });
     }
+    /* public async addImageObject(imageUrl: string): Promise<IImage> {
+         const maxSizeScale = 2;
+         const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+         const options = { crossOrigin: "anonymous" };
+ 
+         if (this.headless) {
+             const image = await loadImage(imageUrl);
+             console.log("image-->",image)
+             console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
+             return this.createFabricImage(image, maxWidth);
+         } else {
+             return await new Promise((resolve) => {
+                 this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                     resolve(this.createFabricImage(fabricImage, maxWidth));
+                 });
+             });
+         }
+     }
+ 
+     private createFabricImage(image: any, maxWidth: number): IImage {
+         const id = this.randomId();
+         console.log("image inside createfabricimage-->",image)
+         let newScale = 1;
+         const curWidth = newScale * image.width;
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         const fabricImage = new FabricImage(image, {
+             id: id,
+             scaleX: newScale,
+             scaleY: newScale,
+             originX: "left",
+             originY: "top",
+         });
+ 
+         this.fabricCanvas.add(fabricImage);
+ 
+         const object = new Image(this, fabricImage);
+         this.trackNewObject(object);
+         this.syncObjectList();
+ 
+         return object;
+     }*/
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.js

@@ -3063,9 +3063,8 @@ class AbstractInteractiveCanvas {
             const options = { crossOrigin: "anonymous" };
             if (this.headless) {
                 // Server-side logic without mock DOM
-                //const { createCanvas, loadImage } = require("canvas"); // Use node-canvas
-                const canvas$1 = canvas.createCanvas(1, 1); // Temporary canvas for image processing
-                canvas$1.getContext("2d");
+                canvas.createCanvas(1, 1);
+                //const ctx = canvas.getContext("2d");
                 const image = yield canvas.loadImage(imageUrl);
                 const id = this.randomId();
                 let newScale = 1;
@@ -3115,6 +3114,51 @@ class AbstractInteractiveCanvas {
             }
         });
     }
+    /* public async addImageObject(imageUrl: string): Promise<IImage> {
+         const maxSizeScale = 2;
+         const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+         const options = { crossOrigin: "anonymous" };
+ 
+         if (this.headless) {
+             const image = await loadImage(imageUrl);
+             console.log("image-->",image)
+             console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
+             return this.createFabricImage(image, maxWidth);
+         } else {
+             return await new Promise((resolve) => {
+                 this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                     resolve(this.createFabricImage(fabricImage, maxWidth));
+                 });
+             });
+         }
+     }
+ 
+     private createFabricImage(image: any, maxWidth: number): IImage {
+         const id = this.randomId();
+         console.log("image inside createfabricimage-->",image)
+         let newScale = 1;
+         const curWidth = newScale * image.width;
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         const fabricImage = new FabricImage(image, {
+             id: id,
+             scaleX: newScale,
+             scaleY: newScale,
+             originX: "left",
+             originY: "top",
+         });
+ 
+         this.fabricCanvas.add(fabricImage);
+ 
+         const object = new Image(this, fabricImage);
+         this.trackNewObject(object);
+         this.syncObjectList();
+ 
+         return object;
+     }*/
     /**
      * @override
      * @inheritDoc

package/package.json

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