@leapfrog/interactive-canvas 2.0.23-beta-6 → 2.0.23-beta-8

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

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

package/dist/interactive-canvas.es.js

@@ -1,5 +1,6 @@
 import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
+import { loadImage } from 'canvas';
 import * as fabric from 'fabric';
 
 const PIXELS_PER_MM$2 = 3.937;
@@ -3033,81 +3034,82 @@ 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 FabricImage(imageUrl, {
-          //const fabricImage = new this.fabric.Image(image, {
-          const fabricImage = new FabricImage(image as any, {
-              id: id,
-              scaleX: newScale,
-              scaleY: newScale,
-              originX: "left",
-              originY: "top",
-              crossOrigin: options.crossOrigin,
-              src: imageUrl
-          } as any);
-  
-          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 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" });
+                const id = this.randomId();
+                let newScale = 1;
+                const curWidth = newScale * fabricImage.width;
+                if (curWidth > maxWidth) {
+                    newScale = maxWidth / curWidth;
+                }
+                /*const fabricImage = new this.fabric.Image(image as any, {
+                    src: imageUrl,
+                    crossOrigin: "anonymous",
+                    toObject: function () {
+                        return {
+                            ...this.callSuper("toObject"),
+                            src: this.src,
+                        };
+                    },
+                });*/
+                // Set image properties and add to the canvas
+                // const fabricImage = new FabricImage(imageUrl, {
+                //const fabricImage = new this.fabric.Image(image, {
+                // const fabricImage = new FabricImage(image as any, {
+                fabricImage.set({
+                    id: id,
+                    scaleX: newScale,
+                    scaleY: newScale,
+                    originX: "left",
+                    originY: "top"
+                });
+                console.log("headless image-->", fabricImage);
+                this.fabricCanvas.add(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;
+            }
+            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);
+                    });
+                });
+            }
+        });
+    }
     /*  public async addImageObject(imageUrl: string): Promise<IImage> {
            const maxSizeScale = 2;
            const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
@@ -3153,42 +3155,86 @@ 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
      */
-    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" };
-            return yield new Promise((resolve) => {
-                const fabricImage = 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"
-                });
-                this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricImage);
-                this.syncObjectList();
-                // resolve(object);
-                return object;
-            });
-            // });
-        });
-    }
+    /* 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"};
+         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);
+             });
+         });
+     }*/
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.js

@@ -2,6 +2,7 @@
 
 var _ = require('lodash');
 var rxjs = require('rxjs');
+var canvas = require('canvas');
 var fabric = require('fabric');
 
 function _interopNamespaceDefault(e) {
@@ -3054,81 +3055,82 @@ 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 FabricImage(imageUrl, {
-          //const fabricImage = new this.fabric.Image(image, {
-          const fabricImage = new FabricImage(image as any, {
-              id: id,
-              scaleX: newScale,
-              scaleY: newScale,
-              originX: "left",
-              originY: "top",
-              crossOrigin: options.crossOrigin,
-              src: imageUrl
-          } as any);
-  
-          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 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" });
+                const id = this.randomId();
+                let newScale = 1;
+                const curWidth = newScale * fabricImage.width;
+                if (curWidth > maxWidth) {
+                    newScale = maxWidth / curWidth;
+                }
+                /*const fabricImage = new this.fabric.Image(image as any, {
+                    src: imageUrl,
+                    crossOrigin: "anonymous",
+                    toObject: function () {
+                        return {
+                            ...this.callSuper("toObject"),
+                            src: this.src,
+                        };
+                    },
+                });*/
+                // Set image properties and add to the canvas
+                // const fabricImage = new FabricImage(imageUrl, {
+                //const fabricImage = new this.fabric.Image(image, {
+                // const fabricImage = new FabricImage(image as any, {
+                fabricImage.set({
+                    id: id,
+                    scaleX: newScale,
+                    scaleY: newScale,
+                    originX: "left",
+                    originY: "top"
+                });
+                console.log("headless image-->", fabricImage);
+                this.fabricCanvas.add(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;
+            }
+            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);
+                    });
+                });
+            }
+        });
+    }
     /*  public async addImageObject(imageUrl: string): Promise<IImage> {
            const maxSizeScale = 2;
            const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
@@ -3174,42 +3176,86 @@ 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
      */
-    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" };
-            return yield new Promise((resolve) => {
-                const fabricImage = 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"
-                });
-                this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricImage);
-                this.syncObjectList();
-                // resolve(object);
-                return object;
-            });
-            // });
-        });
-    }
+    /* 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"};
+         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);
+             });
+         });
+     }*/
     /**
      * @override
      * @inheritDoc

package/package.json

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