npm - @leapfrog/interactive-canvas - Versions diffs - 2.0.23-beta-5 → 2.0.23-beta-7 - Mend

@leapfrog/interactive-canvas 2.0.23-beta-5 → 2.0.23-beta-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/interactive-canvas.es.js +78 -77
package/dist/interactive-canvas.js +78 -77
package/package.json +1 -1

package/dist/interactive-canvas.es.js CHANGED Viewed

@@ -3053,7 +3053,9 @@ class AbstractInteractiveCanvas {
                     newScale = maxWidth / curWidth;
                 }
                 // Set image properties and add to the canvas
-                const fabricImage = new FabricImage(imageUrl, {
+                //const fabricImage = new FabricImage(imageUrl, {
+                //const fabricImage = new this.fabric.Image(image, {
+                const fabricImage = new FabricImage(image, {
                     id: id,
                     scaleX: newScale,
                     scaleY: newScale,
@@ -3096,93 +3098,92 @@ 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
+     */
     /* 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" };
+         const options = {crossOrigin: "anonymous"};
+         return await new Promise((resolve) => {
+             this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                 const id = this.randomId();
-         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));
-                 });
-             });
-         }
-     }
+                 let newScale = 1;
-     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 curWidth = newScale * fabricImage.width;
+                 if (curWidth > maxWidth) {
+                     newScale = maxWidth / curWidth;
+                 }
-         const fabricImage = new FabricImage(image, {
-             id: id,
-             scaleX: newScale,
-             scaleY: newScale,
-             originX: "left",
-             originY: "top",
-         });
+                 fabricImage.set({
+                     id: id,
+                     scaleX: newScale,
+                     scaleY: newScale,
+                     originX: "left",
+                     originY: "top"
+                 } as any);
+                 this.fabricCanvas.add(fabricImage);
-         this.fabricCanvas.add(fabricImage);
+                 const object = new Image(this, fabricImage);
+                 this.trackNewObject(object);
+                 this.selectFabricObject(fabricImage);
-         const object = new Image(this, fabricImage);
-         this.trackNewObject(object);
-         this.syncObjectList();
+                 this.syncObjectList();
-         return object;
+                 resolve(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;
-          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 CHANGED Viewed

@@ -3073,7 +3073,9 @@ class AbstractInteractiveCanvas {
                     newScale = maxWidth / curWidth;
                 }
                 // Set image properties and add to the canvas
-                const fabricImage = new fabric.FabricImage(imageUrl, {
+                //const fabricImage = new FabricImage(imageUrl, {
+                //const fabricImage = new this.fabric.Image(image, {
+                const fabricImage = new fabric.FabricImage(image, {
                     id: id,
                     scaleX: newScale,
                     scaleY: newScale,
@@ -3116,93 +3118,92 @@ 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
+     */
     /* 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" };
+         const options = {crossOrigin: "anonymous"};
+         return await new Promise((resolve) => {
+             this.fabric.Image.fromURL(imageUrl, options).then((fabricImage: FabricImage) => {
+                 const id = this.randomId();
-         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));
-                 });
-             });
-         }
-     }
+                 let newScale = 1;
-     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 curWidth = newScale * fabricImage.width;
+                 if (curWidth > maxWidth) {
+                     newScale = maxWidth / curWidth;
+                 }
-         const fabricImage = new FabricImage(image, {
-             id: id,
-             scaleX: newScale,
-             scaleY: newScale,
-             originX: "left",
-             originY: "top",
-         });
+                 fabricImage.set({
+                     id: id,
+                     scaleX: newScale,
+                     scaleY: newScale,
+                     originX: "left",
+                     originY: "top"
+                 } as any);
+                 this.fabricCanvas.add(fabricImage);
-         this.fabricCanvas.add(fabricImage);
+                 const object = new Image(this, fabricImage);
+                 this.trackNewObject(object);
+                 this.selectFabricObject(fabricImage);
-         const object = new Image(this, fabricImage);
-         this.trackNewObject(object);
-         this.syncObjectList();
+                 this.syncObjectList();
-         return object;
+                 resolve(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;
-          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 CHANGED Viewed

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