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

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 {
@@ -1449,14 +1449,19 @@ 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;
     }
     /**
@@ -3061,15 +3066,23 @@ 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 });
-                    },
+                    /*toObject: function () {
+                        return {
+                            ...fabric.Object.prototype.toObject.call(this),
+                            crossOrigin: this.crossOrigin,
+                            src: this.src,
+                            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);
+                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);

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);
@@ -1470,14 +1470,19 @@ 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;
     }
     /**
@@ -3082,15 +3087,23 @@ 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 });
-                    },
+                    /*toObject: function () {
+                        return {
+                            ...fabric.Object.prototype.toObject.call(this),
+                            crossOrigin: this.crossOrigin,
+                            src: this.src,
+                            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);
+                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);

package/package.json

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