@leapfrog/interactive-canvas 1.4.3 → 1.5.0

package/dist/interactive-canvas.es.js

@@ -1433,10 +1433,19 @@ var Image = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Image.prototype.setImageUrl = function (url) {
-        this.setCanvasImage(url);
-        this.data.imagePath = url;
-        this.imageUrl$.next(url);
-        this.canvas.notifyObjectListChanged();
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.setCanvasImage(url)];
+                    case 1:
+                        _a.sent();
+                        this.data.imagePath = url;
+                        this.imageUrl$.next(url);
+                        this.canvas.notifyObjectListChanged();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
      * @override
@@ -1531,24 +1540,35 @@ var Image = /** @class */ (function (_super) {
         this.fabricObject.set({ left: left + (this.layoutWidth / 2) - (imageWidth / 2) });
     };
     Image.prototype.setCanvasImage = function (url) {
-        var _this = this;
-        var imageOptions = { crossOrigin: "anonymous" };
-        //Don't let the image be more than half the canvas in size.
-        var maxSizeScale = 2;
-        var maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
-        this.fabricObject.setSrc(url, function (img) {
-            var newScale = 1;
-            var curWidth = newScale * img.width;
-            if (curWidth > maxWidth) {
-                newScale = maxWidth / curWidth;
-            }
-            img.set({
-                scaleX: newScale,
-                scaleY: newScale
+        return __awaiter(this, void 0, void 0, function () {
+            var imageOptions, maxSizeScale, maxWidth;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        imageOptions = { crossOrigin: "anonymous" };
+                        maxSizeScale = 2;
+                        maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabricObject.setSrc(url, function (img) {
+                                    var newScale = 1;
+                                    var curWidth = newScale * img.width;
+                                    if (curWidth > maxWidth) {
+                                        newScale = maxWidth / curWidth;
+                                    }
+                                    img.set({
+                                        scaleX: newScale,
+                                        scaleY: newScale
+                                    });
+                                    img.setCoords();
+                                    _this.redraw();
+                                    resolve();
+                                }, imageOptions);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
             });
-            img.setCoords();
-            _this.redraw();
-        }, imageOptions);
+        });
     };
     Image.prototype.getMinWidthBasedOnMinHeight = function (minHeight) {
         if (!minHeight) {

package/dist/interactive-canvas.js

@@ -1435,10 +1435,19 @@ var Image = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Image.prototype.setImageUrl = function (url) {
-        this.setCanvasImage(url);
-        this.data.imagePath = url;
-        this.imageUrl$.next(url);
-        this.canvas.notifyObjectListChanged();
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.setCanvasImage(url)];
+                    case 1:
+                        _a.sent();
+                        this.data.imagePath = url;
+                        this.imageUrl$.next(url);
+                        this.canvas.notifyObjectListChanged();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     /**
      * @override
@@ -1533,24 +1542,35 @@ var Image = /** @class */ (function (_super) {
         this.fabricObject.set({ left: left + (this.layoutWidth / 2) - (imageWidth / 2) });
     };
     Image.prototype.setCanvasImage = function (url) {
-        var _this = this;
-        var imageOptions = { crossOrigin: "anonymous" };
-        //Don't let the image be more than half the canvas in size.
-        var maxSizeScale = 2;
-        var maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
-        this.fabricObject.setSrc(url, function (img) {
-            var newScale = 1;
-            var curWidth = newScale * img.width;
-            if (curWidth > maxWidth) {
-                newScale = maxWidth / curWidth;
-            }
-            img.set({
-                scaleX: newScale,
-                scaleY: newScale
+        return __awaiter(this, void 0, void 0, function () {
+            var imageOptions, maxSizeScale, maxWidth;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        imageOptions = { crossOrigin: "anonymous" };
+                        maxSizeScale = 2;
+                        maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabricObject.setSrc(url, function (img) {
+                                    var newScale = 1;
+                                    var curWidth = newScale * img.width;
+                                    if (curWidth > maxWidth) {
+                                        newScale = maxWidth / curWidth;
+                                    }
+                                    img.set({
+                                        scaleX: newScale,
+                                        scaleY: newScale
+                                    });
+                                    img.setCoords();
+                                    _this.redraw();
+                                    resolve();
+                                }, imageOptions);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
             });
-            img.setCoords();
-            _this.redraw();
-        }, imageOptions);
+        });
     };
     Image.prototype.getMinWidthBasedOnMinHeight = function (minHeight) {
         if (!minHeight) {

package/dist/mutator/mutable-image.interface.d.ts

@@ -16,7 +16,7 @@ export interface IMutableImage extends ICanvasObject {
      * Set the image url.
      * @param url New url.
      */
-    setImageUrl(url: string): void;
+    setImageUrl(url: string): Promise<void>;
     /**
      * Sets the image width to x pixels.
      * @param px Pixels.

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

@@ -28,7 +28,7 @@ export declare class Image extends AbstractCanvasObject<fabric.Image> implements
      * @override
      * @inheritDoc
      */
-    setImageUrl(url: string): void;
+    setImageUrl(url: string): Promise<void>;
     /**
      * @override
      * @inheritDoc

package/package.json

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