@leapfrog/interactive-canvas 2.0.25-beta-3 → 2.0.25-beta-5

package/dist/interactive-canvas.es.js

@@ -1,7 +1,7 @@
 import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
-import * as fabric from 'fabric';
 import { loadImage } from 'canvas';
+import * as fabric from 'fabric';
 
 const PIXELS_PER_MM$2 = 3.937;
 class MillimeterDimensions {
@@ -232,8 +232,8 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            canvas.getObjectsInternal().forEach((object) => object.setCoords());
         }
-        canvas.getObjectsInternal().forEach((object) => object.setCoords());
         canvas.redraw();
     }
 }
@@ -1449,19 +1449,14 @@ class HorizontalRule extends AbstractCanvasObject {
 
 class Image extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
-        var _a;
         super(ObjectType.IMAGE, canvas, fabricObject, persistedField);
         this.DEFAULT_RESTRICTIONS = {
             minWidth: 1,
             minHeight: 1
         };
         this.canvas = canvas;
-        console.log("fabric object", this.fabricObject);
-        console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
         this.imageUrl$ = new BehaviorSubject(this.fabricObject.getSrc());
-        console.log("imageUrl$", this.imageUrl$);
         this.data.imagePath = this.imageUrl$.value;
-        console.log("this.data.imagePath", this.data.imagePath);
         this.layoutWidth = this.getBoundingBox().width;
     }
     /**
@@ -2541,16 +2536,18 @@ class Text extends AbstractCanvasObject {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection();
+        this.updateTextSelection(false);
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection() {
+    updateTextSelection(notifyCanvas = true) {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        this.notifyCanvasOfTextChanges();
+        if (notifyCanvas) {
+            this.notifyCanvasOfTextChanges();
+        }
     }
     notifyCanvasOfTextChanges() {
         this.canvas.notifyTextChanged();
@@ -3066,19 +3063,12 @@ class AbstractInteractiveCanvas {
                     originY: "top",
                     src: imageUrl,
                     crossOrigin: "anonymous",
-                    toObject: function () {
-                        return Object.assign(Object.assign({}, fabric.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
-                    },
                 });
-                fabricImage.toDataURL({ format: 'png' });
+                yield fabricImage.setSrc(imageUrl, options);
                 this.fabricCanvas.add(fabricImage);
                 const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
                 canvasObjectData.imagePath = imageUrl;
-                console.log("Assigned imagePath:", canvasObjectData.imagePath);
                 const object = new Image(this, fabricImage, canvasObjectData);
-                console.log("Created Image object with imagePath:", object);
-                //object.data.imagePath = imageUrl;
-                // object.imageUrl$.next(imageUrl);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3136,6 +3126,7 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
+                moveCursor: 'move',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,

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);
@@ -253,8 +253,8 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            canvas.getObjectsInternal().forEach((object) => object.setCoords());
         }
-        canvas.getObjectsInternal().forEach((object) => object.setCoords());
         canvas.redraw();
     }
 }
@@ -1470,19 +1470,14 @@ class HorizontalRule extends AbstractCanvasObject {
 
 class Image extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
-        var _a;
         super(exports.ObjectType.IMAGE, canvas, fabricObject, persistedField);
         this.DEFAULT_RESTRICTIONS = {
             minWidth: 1,
             minHeight: 1
         };
         this.canvas = canvas;
-        console.log("fabric object", this.fabricObject);
-        console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
         this.imageUrl$ = new rxjs.BehaviorSubject(this.fabricObject.getSrc());
-        console.log("imageUrl$", this.imageUrl$);
         this.data.imagePath = this.imageUrl$.value;
-        console.log("this.data.imagePath", this.data.imagePath);
         this.layoutWidth = this.getBoundingBox().width;
     }
     /**
@@ -2562,16 +2557,18 @@ class Text extends AbstractCanvasObject {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection();
+        this.updateTextSelection(false);
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection() {
+    updateTextSelection(notifyCanvas = true) {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        this.notifyCanvasOfTextChanges();
+        if (notifyCanvas) {
+            this.notifyCanvasOfTextChanges();
+        }
     }
     notifyCanvasOfTextChanges() {
         this.canvas.notifyTextChanged();
@@ -3087,19 +3084,12 @@ class AbstractInteractiveCanvas {
                     originY: "top",
                     src: imageUrl,
                     crossOrigin: "anonymous",
-                    toObject: function () {
-                        return Object.assign(Object.assign({}, fabric__namespace.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
-                    },
                 });
-                fabricImage.toDataURL({ format: 'png' });
+                yield fabricImage.setSrc(imageUrl, options);
                 this.fabricCanvas.add(fabricImage);
                 const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
                 canvasObjectData.imagePath = imageUrl;
-                console.log("Assigned imagePath:", canvasObjectData.imagePath);
                 const object = new Image(this, fabricImage, canvasObjectData);
-                console.log("Created Image object with imagePath:", object);
-                //object.data.imagePath = imageUrl;
-                // object.imageUrl$.next(imageUrl);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3157,6 +3147,7 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
+                moveCursor: 'move',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,

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

@@ -8,7 +8,7 @@ export declare abstract class AbstractCanvasObject<T extends FabricObject> imple
     protected pinToBottomDistance: number;
     protected canvas: IInteractiveCanvas;
     protected fabricObject: T;
-    data: CanvasObjectData;
+    protected data: CanvasObjectData;
     private readonly dimensions$;
     private readonly opacity$;
     /**

package/dist/object/impl/image.d.ts

@@ -1,7 +1,7 @@
 import { IDimensionRestrictions, IInteractiveCanvas, IMutableImage, IMutablePosition, IPosition } from "../..";
 import { ICanvasObject } from "../canvas-object.interface";
 import { AbstractCanvasObject } from "../abstract-canvas-object";
-import { BehaviorSubject, Observable } from "rxjs";
+import { Observable } from "rxjs";
 import { CanvasObjectData } from "../canvas-object-data";
 import { FabricImage } from "fabric";
 /**
@@ -12,7 +12,7 @@ export interface IImage extends ICanvasObject, IMutableImage, IMutablePosition {
 export declare class Image extends AbstractCanvasObject<FabricImage> implements IImage {
     private readonly DEFAULT_RESTRICTIONS;
     private layoutWidth;
-    imageUrl$: BehaviorSubject<string>;
+    private readonly imageUrl$;
     constructor(canvas: IInteractiveCanvas, fabricObject: FabricImage, persistedField?: CanvasObjectData);
     /**
      * @override

package/package.json

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