npm - @leapfrog/interactive-canvas - Versions diffs - 1.4.2 → 1.5.0 - Mend

@leapfrog/interactive-canvas 1.4.2 → 1.5.0

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 (6) hide show

package/dist/interactive-canvas.es.js +48 -21
package/dist/interactive-canvas.js +48 -21
package/dist/layout/standard-layout-manager.d.ts +4 -0
package/dist/mutator/mutable-image.interface.d.ts +1 -1
package/dist/object/impl/image.d.ts +1 -1
package/package.json +1 -1

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

@@ -564,6 +564,13 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         this.canvas.setMultiSelect(false);
         this.redrawAll.execute(this.canvas);
     };
+    /**
+     * @override
+     */
+    StandardLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+    };
     /**
      * @override
      */
@@ -1426,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
@@ -1524,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 CHANGED Viewed

@@ -566,6 +566,13 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         this.canvas.setMultiSelect(false);
         this.redrawAll.execute(this.canvas);
     };
+    /**
+     * @override
+     */
+    StandardLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+    };
     /**
      * @override
      */
@@ -1428,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
@@ -1526,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/layout/standard-layout-manager.d.ts CHANGED Viewed

@@ -19,6 +19,10 @@ export declare class StandardLayoutManager extends AbstractLayoutManager {
      * @override
      */
     onProfileChange(profile: ICanvasProfile): void;
+    /**
+     * @override
+     */
+    onCanvasDimensionsChange(): void;
     /**
      * @override
      */

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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