@leapfrog/interactive-canvas 2.0.24-beta-4 → 2.0.24-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

@@ -3034,6 +3034,10 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
+    /**
+     * @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.
@@ -3062,8 +3066,6 @@ class AbstractInteractiveCanvas {
                     },
                 });
                 this.fabricCanvas.add(fabricImage);
-                const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
-                canvasObjectData.imagePath = imageUrl;
                 const object = new Image(this, fabricImage);
                 this.trackNewObject(object);
                 this.syncObjectList();
@@ -3097,131 +3099,6 @@ 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;
-       }*/
-    /* 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
-     */
-    /* 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
@@ -3236,6 +3113,7 @@ class AbstractInteractiveCanvas {
             const topPx = Math.min(lowestTextPointPx, this.getDimensions().heightPx - fontSizePx);
             const textOptions = {
                 id: id,
+                objectCaching: false,
                 top: topPx,
                 left: 5,
                 width: canvasWidthPx - 10,
@@ -3245,9 +3123,13 @@ class AbstractInteractiveCanvas {
                 fontSize: fontSizePx,
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
+                hoverCursor: "move",
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
-                charSpacing: profile.defaultCharacterSpacing
+                charSpacing: profile.defaultCharacterSpacing,
+                perPixelTargetFind: false,
+                targetFindTolerance: 4,
+                splitByGrapheme: true
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);

package/dist/interactive-canvas.js

@@ -3055,6 +3055,10 @@ class AbstractInteractiveCanvas {
             this.fabricCanvas.requestRenderAll();
         }
     }
+    /**
+     * @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.
@@ -3083,8 +3087,6 @@ class AbstractInteractiveCanvas {
                     },
                 });
                 this.fabricCanvas.add(fabricImage);
-                const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
-                canvasObjectData.imagePath = imageUrl;
                 const object = new Image(this, fabricImage);
                 this.trackNewObject(object);
                 this.syncObjectList();
@@ -3118,131 +3120,6 @@ 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;
-       }*/
-    /* 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
-     */
-    /* 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
@@ -3257,6 +3134,7 @@ class AbstractInteractiveCanvas {
             const topPx = Math.min(lowestTextPointPx, this.getDimensions().heightPx - fontSizePx);
             const textOptions = {
                 id: id,
+                objectCaching: false,
                 top: topPx,
                 left: 5,
                 width: canvasWidthPx - 10,
@@ -3266,9 +3144,13 @@ class AbstractInteractiveCanvas {
                 fontSize: fontSizePx,
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
+                hoverCursor: "move",
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
-                charSpacing: profile.defaultCharacterSpacing
+                charSpacing: profile.defaultCharacterSpacing,
+                perPixelTargetFind: false,
+                targetFindTolerance: 4,
+                splitByGrapheme: true
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);

package/package.json

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