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

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,6 +1,5 @@
 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';
 
 const PIXELS_PER_MM$2 = 3.937;
@@ -3034,122 +3033,49 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
-    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
-                createCanvas(1, 1);
-                //const ctx = 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",
-                    crossOrigin: options.crossOrigin,
-                    src: imageUrl
-                });
-                this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
-                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;
- 
-         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
-     */
-    /*  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;
+      // 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();
   
-          const options = {crossOrigin: "anonymous"};
+          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();
@@ -3166,7 +3092,7 @@ class AbstractInteractiveCanvas {
                       scaleX: newScale,
                       scaleY: newScale,
                       originX: "left",
-                      originY: "top"
+                      originY: "top",
                   } as any);
   
                   this.fabricCanvas.add(fabricImage);
@@ -3181,7 +3107,88 @@ 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
+     */
+    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;
+            });
+            // });
+        });
+    }
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.js

@@ -2,7 +2,6 @@
 
 var _ = require('lodash');
 var rxjs = require('rxjs');
-var canvas = require('canvas');
 var fabric = require('fabric');
 
 function _interopNamespaceDefault(e) {
@@ -3055,122 +3054,49 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
-    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
-                canvas.createCanvas(1, 1);
-                //const ctx = canvas.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",
-                    crossOrigin: options.crossOrigin,
-                    src: imageUrl
-                });
-                this.fabricCanvas.add(fabricImage);
-                const object = new Image(this, fabricImage);
-                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;
- 
-         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
-     */
-    /*  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;
+      // 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();
   
-          const options = {crossOrigin: "anonymous"};
+          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();
@@ -3187,7 +3113,7 @@ class AbstractInteractiveCanvas {
                       scaleX: newScale,
                       scaleY: newScale,
                       originX: "left",
-                      originY: "top"
+                      originY: "top",
                   } as any);
   
                   this.fabricCanvas.add(fabricImage);
@@ -3202,7 +3128,88 @@ 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
+     */
+    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;
+            });
+            // });
+        });
+    }
     /**
      * @override
      * @inheritDoc

package/package.json

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