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

package/dist/abstract-interactive-canvas.d.ts

@@ -203,6 +203,7 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      */
     sendObjectToBack(target: FabricObject): void;
     addImageObject(imageUrl: string): Promise<IImage>;
+    private createFabricImage;
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.es.js

@@ -1,7 +1,8 @@
 import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { createCanvas, loadImage } from 'canvas';
 import * as fabric from 'fabric';
+import { FabricImage } from 'fabric';
+import { loadImage } from 'canvas';
 
 const PIXELS_PER_MM$2 = 3.937;
 class MillimeterDimensions {
@@ -3034,66 +3035,118 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
+    /*public async addImageObject(imageUrl: string): Promise<IImage> {
+     // Don't let the image be more than half the canvas in size.
+     const maxSizeScale = 2;
+     const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+     const options = { crossOrigin: "anonymous" };
+ 
+     if (this.headless) {
+         // Server-side logic without mock DOM
+         const canvas = createCanvas(1, 1);
+         //const ctx = canvas.getContext("2d");
+ 
+         const image = await loadImage(imageUrl);
+         const id = this.randomId();
+ 
+         let newScale = 1;
+         const curWidth = newScale * image.width;
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         // Set image properties and add to the canvas
+         const fabricImage = new this.fabric.Image(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;
+     } else {
+         // Browser-side logic
+         return await new Promise((resolve) => {
+             this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                 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);
+ 
+                 const object = new Image(this, fabricImage);
+                 this.trackNewObject(object);
+                 this.selectFabricObject(fabricImage);
+ 
+                 this.syncObjectList();
+ 
+                 resolve(object);
+             });
+         });
+     }
+ }*/
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             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");
                 const image = yield loadImage(imageUrl);
-                const id = this.randomId();
-                let newScale = 1;
-                const curWidth = newScale * image.width;
-                if (curWidth > maxWidth) {
-                    newScale = maxWidth / curWidth;
-                }
-                // Set image properties and add to the canvas
-                const fabricImage = new this.fabric.Image(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;
+                console.log("image-->", image);
+                console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
+                return this.createFabricImage(image, maxWidth);
             }
             else {
-                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                        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",
-                        });
-                        this.fabricCanvas.add(fabricImage);
-                        const object = new Image(this, fabricImage);
-                        this.trackNewObject(object);
-                        this.selectFabricObject(fabricImage);
-                        this.syncObjectList();
-                        resolve(object);
+                        resolve(this.createFabricImage(fabricImage, maxWidth));
                     });
                 });
             }
         });
     }
+    createFabricImage(image, maxWidth) {
+        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

@@ -2,8 +2,8 @@
 
 var _ = require('lodash');
 var rxjs = require('rxjs');
-var canvas = require('canvas');
 var fabric = require('fabric');
+var canvas = require('canvas');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3055,66 +3055,118 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
+    /*public async addImageObject(imageUrl: string): Promise<IImage> {
+     // Don't let the image be more than half the canvas in size.
+     const maxSizeScale = 2;
+     const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+ 
+     const options = { crossOrigin: "anonymous" };
+ 
+     if (this.headless) {
+         // Server-side logic without mock DOM
+         const canvas = createCanvas(1, 1);
+         //const ctx = canvas.getContext("2d");
+ 
+         const image = await loadImage(imageUrl);
+         const id = this.randomId();
+ 
+         let newScale = 1;
+         const curWidth = newScale * image.width;
+         if (curWidth > maxWidth) {
+             newScale = maxWidth / curWidth;
+         }
+ 
+         // Set image properties and add to the canvas
+         const fabricImage = new this.fabric.Image(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;
+     } else {
+         // Browser-side logic
+         return await new Promise((resolve) => {
+             this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                 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);
+ 
+                 const object = new Image(this, fabricImage);
+                 this.trackNewObject(object);
+                 this.selectFabricObject(fabricImage);
+ 
+                 this.syncObjectList();
+ 
+                 resolve(object);
+             });
+         });
+     }
+ }*/
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             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");
                 const image = yield canvas.loadImage(imageUrl);
-                const id = this.randomId();
-                let newScale = 1;
-                const curWidth = newScale * image.width;
-                if (curWidth > maxWidth) {
-                    newScale = maxWidth / curWidth;
-                }
-                // Set image properties and add to the canvas
-                const fabricImage = new this.fabric.Image(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;
+                console.log("image-->", image);
+                console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
+                return this.createFabricImage(image, maxWidth);
             }
             else {
-                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                        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",
-                        });
-                        this.fabricCanvas.add(fabricImage);
-                        const object = new Image(this, fabricImage);
-                        this.trackNewObject(object);
-                        this.selectFabricObject(fabricImage);
-                        this.syncObjectList();
-                        resolve(object);
+                        resolve(this.createFabricImage(fabricImage, maxWidth));
                     });
                 });
             }
         });
     }
+    createFabricImage(image, maxWidth) {
+        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 fabric.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-2",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"