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

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

@@ -203,7 +203,6 @@ 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,8 +1,7 @@
 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 {
@@ -3035,29 +3034,97 @@ 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;
+    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" };
+         const options = { crossOrigin: "anonymous" };
  
-     if (this.headless) {
-         // Server-side logic without mock DOM
-         const canvas = createCanvas(1, 1);
-         //const ctx = canvas.getContext("2d");
+         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));
+                 });
+             });
+         }
+     }
  
-         const image = await loadImage(imageUrl);
+     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;
          }
  
-         // Set image properties and add to the canvas
-         const fabricImage = new this.fabric.Image(image, {
+         const fabricImage = new FabricImage(image, {
              id: id,
              scaleX: newScale,
              scaleY: newScale,
@@ -3072,81 +3139,7 @@ class AbstractInteractiveCanvas {
          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* () {
-            const maxSizeScale = 2;
-            const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
-            const options = { crossOrigin: "anonymous" };
-            if (this.headless) {
-                const image = yield loadImage(imageUrl);
-                console.log("image-->", image);
-                console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
-                return this.createFabricImage(image, maxWidth);
-            }
-            else {
-                return yield new Promise((resolve) => {
-                    this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                        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 fabric = require('fabric');
 var canvas = require('canvas');
+var fabric = require('fabric');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3055,29 +3055,97 @@ 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;
+    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" };
+         const options = { crossOrigin: "anonymous" };
  
-     if (this.headless) {
-         // Server-side logic without mock DOM
-         const canvas = createCanvas(1, 1);
-         //const ctx = canvas.getContext("2d");
+         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));
+                 });
+             });
+         }
+     }
  
-         const image = await loadImage(imageUrl);
+     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;
          }
  
-         // Set image properties and add to the canvas
-         const fabricImage = new this.fabric.Image(image, {
+         const fabricImage = new FabricImage(image, {
              id: id,
              scaleX: newScale,
              scaleY: newScale,
@@ -3092,81 +3160,7 @@ class AbstractInteractiveCanvas {
          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* () {
-            const maxSizeScale = 2;
-            const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
-            const options = { crossOrigin: "anonymous" };
-            if (this.headless) {
-                const image = yield canvas.loadImage(imageUrl);
-                console.log("image-->", image);
-                console.log("Loaded image:", imageUrl, "Width:", image.width, "Height:", image.height);
-                return this.createFabricImage(image, maxWidth);
-            }
-            else {
-                return yield new Promise((resolve) => {
-                    this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
-                        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-2",
+  "version": "2.0.23-beta-4",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"