@leapfrog/interactive-canvas 1.9.1 → 1.10.0

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

@@ -22,6 +22,7 @@ import { ICanvasState } from "./types/canvas-state.interface";
 import { ITextSelection } from "./mutator/mutable-text-style.interface";
 import { fabric } from "fabric";
 import { IRichText } from "./object/impl/rich-text";
+import { IBackgroundImage } from "./object/impl/background-image";
 export declare abstract class AbstractInteractiveCanvas implements IInteractiveCanvas {
     fabric: any;
     protected readonly fabricCanvas: fabric.Canvas;
@@ -219,6 +220,11 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     addHorizontalRuleObject(): Promise<IHorizontalRule>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addBackgroundImageObject(imageUrl: string): Promise<IBackgroundImage>;
     /**
      * @override
      * @inheritDoc

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from "./mutator/mutable-text.interface";
 export * from "./object/abstract-canvas-object";
 export * from "./object/canvas-object-data";
 export * from "./object/canvas-object.interface";
+export * from "./object/impl/background-image";
 export * from "./object/impl/border";
 export * from "./object/impl/cutoff";
 export * from "./object/impl/horizontal-rule";

package/dist/interactive-canvas.es.js

@@ -348,6 +348,16 @@ var LayoutManager;
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(LayoutManager || (LayoutManager = {}));
 
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
 var AdvancedLayoutManager = /** @class */ (function (_super) {
     __extends(AdvancedLayoutManager, _super);
     function AdvancedLayoutManager(canvas) {
@@ -357,6 +367,7 @@ var AdvancedLayoutManager = /** @class */ (function (_super) {
         _this.redrawAll = new RedrawAllLayoutFunction();
         _this.repositionBorders = new RepositionBordersLayoutFunction();
         _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         _this.resizeCanvas = new ResizeCanvasLayoutFunction();
         return _this;
     }
@@ -364,6 +375,7 @@ var AdvancedLayoutManager = /** @class */ (function (_super) {
         this.pinToBottom.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
         this.redrawAll.execute(this.canvas);
     };
     AdvancedLayoutManager.prototype.onTextChange = function () {
@@ -548,6 +560,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         _this.redrawAll = new RedrawAllLayoutFunction();
         _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         _this.stackObjects = new StackObjectsLayoutFunction();
         _this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
         return _this;
@@ -571,6 +584,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
     StandardLayoutManager.prototype.onCanvasDimensionsChange = function () {
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
     };
     /**
      * @override
@@ -594,6 +608,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         this.stackObjects.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
         this.updateObjectDimensions.execute(this.canvas);
         this.redrawAll.execute(this.canvas);
     };
@@ -1115,6 +1130,118 @@ var FieldDimensions = /** @class */ (function () {
     return FieldDimensions;
 }());
 
+var BackgroundImage = /** @class */ (function (_super) {
+    __extends(BackgroundImage, _super);
+    function BackgroundImage(canvas, fabricObject, persistedField) {
+        var _this = _super.call(this, ObjectType.BACKGROUND_IMAGE, canvas, fabricObject, persistedField) || this;
+        _this.imageUrl$ = new BehaviorSubject(_this.fabricObject.getSrc());
+        _this.data.imagePath = _this.imageUrl$.value;
+        _this.updatePosition();
+        return _this;
+    }
+    BackgroundImage.prototype.updatePosition = function () {
+        var _a = this.canvas.getDimensions(), widthPx = _a.widthPx, heightPx = _a.heightPx;
+        this.fabricObject.set({
+            top: 0,
+            left: 0,
+            scaleX: widthPx / this.fabricObject.width,
+            scaleY: heightPx / this.fabricObject.height
+        });
+        this.fabricObject.sendToBack();
+        this.updateDimensions();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.updateFabricObjectBehavior = function () {
+        _super.prototype.updateFabricObjectBehavior.call(this);
+        this.fabricObject.set({
+            lockMovementX: true,
+            lockMovementY: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            lockScalingFlip: true
+        });
+        this.fabricObject.setControlsVisibility({
+            tl: false,
+            tr: false,
+            br: false,
+            bl: false,
+            ml: false,
+            mt: false,
+            mr: false,
+            mb: false,
+            mtr: false
+        });
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.getImageUrl = function () {
+        return this.imageUrl$.value;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.getImageUrl$ = function () {
+        return this.imageUrl$;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.setImageUrl = function (url) {
+        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
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.setImageWidth = function (px, sizeRestrictions) {
+        return 0; //no-op
+    };
+    BackgroundImage.prototype.setCanvasImage = function (url) {
+        return __awaiter(this, void 0, void 0, function () {
+            var imageOptions, _a, widthPx, heightPx;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        imageOptions = { crossOrigin: "anonymous" };
+                        _a = this.canvas.getDimensions(), widthPx = _a.widthPx, heightPx = _a.heightPx;
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabricObject.setSrc(url, function (img) {
+                                    img.scaleToWidth(widthPx);
+                                    img.scaleToHeight(heightPx);
+                                    img.setCoords();
+                                    _this.redraw();
+                                    resolve();
+                                }, imageOptions);
+                            })];
+                    case 1: return [2 /*return*/, _b.sent()];
+                }
+            });
+        });
+    };
+    return BackgroundImage;
+}(AbstractCanvasObject));
+
 var Border = /** @class */ (function (_super) {
     __extends(Border, _super);
     function Border(canvas, fabricObject, persistedField) {
@@ -2517,6 +2644,7 @@ var ObjectType;
     ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
     ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
     ObjectType["RICH_TEXT"] = "RICH_TEXT";
+    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
 })(ObjectType || (ObjectType = {}));
 
 var AbstractInteractiveCanvas = /** @class */ (function () {
@@ -3066,6 +3194,37 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addBackgroundImageObject = function (imageUrl) {
+        return __awaiter(this, void 0, void 0, function () {
+            var options;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        options = { crossOrigin: "anonymous" };
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
+                                    var id = _this.randomId();
+                                    fabricImage.set({
+                                        id: id,
+                                    });
+                                    _this.fabricCanvas.add(fabricImage);
+                                    var object = new BackgroundImage(_this, fabricImage);
+                                    _this.trackNewObject(object);
+                                    _this.selectFabricObject(fabricImage);
+                                    _this.syncObjectList();
+                                    resolve(object);
+                                }, options);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
     /**
      * @override
      * @inheritDoc
@@ -3347,6 +3506,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 return new VerticalRule(this, fabricObject, persistedField);
             case ObjectType.RICH_TEXT:
                 return new RichText(this, fabricObject, persistedField);
+            case ObjectType.BACKGROUND_IMAGE:
+                return new BackgroundImage(this, fabricObject, persistedField);
             default:
                 throw new Error("Unknown field type: [" + persistedField.type + "]");
         }
@@ -3502,4 +3663,4 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
-export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableStroke, isMutableText, isMutableTextStyle };
+export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, BackgroundImage, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableStroke, isMutableText, isMutableTextStyle };

package/dist/interactive-canvas.interface.d.ts

@@ -20,6 +20,7 @@ import { AbstractCanvasObject } from "./object/abstract-canvas-object";
 import { ObjectType } from "./types/object-type.enum";
 import { fabric } from "fabric";
 import { IRichText } from "./object/impl/rich-text";
+import { IBackgroundImage } from "./object/impl/background-image";
 /**
  * New leapfrog canvas implementation c. 2019.
  */
@@ -173,6 +174,11 @@ export interface IInteractiveCanvas {
      * Add a horizontal rule object to the canvas.
      */
     addHorizontalRuleObject(): Promise<IHorizontalRule>;
+    /**
+     * Add a background image object to the canvas.
+     * @param imageUrl Url for image content.
+     */
+    addBackgroundImageObject(imageUrl: string): Promise<IBackgroundImage>;
     /**
      * Set the data used to prefill text into the canvas.
      * @param data Prefill data.

package/dist/interactive-canvas.js

@@ -350,6 +350,16 @@ var ResizeCanvasLayoutFunction = /** @class */ (function () {
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(exports.LayoutManager || (exports.LayoutManager = {}));
 
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
 var AdvancedLayoutManager = /** @class */ (function (_super) {
     __extends(AdvancedLayoutManager, _super);
     function AdvancedLayoutManager(canvas) {
@@ -359,6 +369,7 @@ var AdvancedLayoutManager = /** @class */ (function (_super) {
         _this.redrawAll = new RedrawAllLayoutFunction();
         _this.repositionBorders = new RepositionBordersLayoutFunction();
         _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         _this.resizeCanvas = new ResizeCanvasLayoutFunction();
         return _this;
     }
@@ -366,6 +377,7 @@ var AdvancedLayoutManager = /** @class */ (function (_super) {
         this.pinToBottom.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
         this.redrawAll.execute(this.canvas);
     };
     AdvancedLayoutManager.prototype.onTextChange = function () {
@@ -550,6 +562,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         _this.redrawAll = new RedrawAllLayoutFunction();
         _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         _this.stackObjects = new StackObjectsLayoutFunction();
         _this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
         return _this;
@@ -573,6 +586,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
     StandardLayoutManager.prototype.onCanvasDimensionsChange = function () {
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
     };
     /**
      * @override
@@ -596,6 +610,7 @@ var StandardLayoutManager = /** @class */ (function (_super) {
         this.stackObjects.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
         this.updateObjectDimensions.execute(this.canvas);
         this.redrawAll.execute(this.canvas);
     };
@@ -1117,6 +1132,118 @@ var FieldDimensions = /** @class */ (function () {
     return FieldDimensions;
 }());
 
+var BackgroundImage = /** @class */ (function (_super) {
+    __extends(BackgroundImage, _super);
+    function BackgroundImage(canvas, fabricObject, persistedField) {
+        var _this = _super.call(this, exports.ObjectType.BACKGROUND_IMAGE, canvas, fabricObject, persistedField) || this;
+        _this.imageUrl$ = new rxjs.BehaviorSubject(_this.fabricObject.getSrc());
+        _this.data.imagePath = _this.imageUrl$.value;
+        _this.updatePosition();
+        return _this;
+    }
+    BackgroundImage.prototype.updatePosition = function () {
+        var _a = this.canvas.getDimensions(), widthPx = _a.widthPx, heightPx = _a.heightPx;
+        this.fabricObject.set({
+            top: 0,
+            left: 0,
+            scaleX: widthPx / this.fabricObject.width,
+            scaleY: heightPx / this.fabricObject.height
+        });
+        this.fabricObject.sendToBack();
+        this.updateDimensions();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.updateFabricObjectBehavior = function () {
+        _super.prototype.updateFabricObjectBehavior.call(this);
+        this.fabricObject.set({
+            lockMovementX: true,
+            lockMovementY: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            lockScalingFlip: true
+        });
+        this.fabricObject.setControlsVisibility({
+            tl: false,
+            tr: false,
+            br: false,
+            bl: false,
+            ml: false,
+            mt: false,
+            mr: false,
+            mb: false,
+            mtr: false
+        });
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.getImageUrl = function () {
+        return this.imageUrl$.value;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.getImageUrl$ = function () {
+        return this.imageUrl$;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.setImageUrl = function (url) {
+        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
+     * @inheritDoc
+     */
+    BackgroundImage.prototype.setImageWidth = function (px, sizeRestrictions) {
+        return 0; //no-op
+    };
+    BackgroundImage.prototype.setCanvasImage = function (url) {
+        return __awaiter(this, void 0, void 0, function () {
+            var imageOptions, _a, widthPx, heightPx;
+            var _this = this;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        imageOptions = { crossOrigin: "anonymous" };
+                        _a = this.canvas.getDimensions(), widthPx = _a.widthPx, heightPx = _a.heightPx;
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabricObject.setSrc(url, function (img) {
+                                    img.scaleToWidth(widthPx);
+                                    img.scaleToHeight(heightPx);
+                                    img.setCoords();
+                                    _this.redraw();
+                                    resolve();
+                                }, imageOptions);
+                            })];
+                    case 1: return [2 /*return*/, _b.sent()];
+                }
+            });
+        });
+    };
+    return BackgroundImage;
+}(AbstractCanvasObject));
+
 var Border = /** @class */ (function (_super) {
     __extends(Border, _super);
     function Border(canvas, fabricObject, persistedField) {
@@ -2517,6 +2644,7 @@ var DefaultCanvasProfile = /** @class */ (function () {
     ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
     ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
     ObjectType["RICH_TEXT"] = "RICH_TEXT";
+    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
 })(exports.ObjectType || (exports.ObjectType = {}));
 
 var AbstractInteractiveCanvas = /** @class */ (function () {
@@ -3066,6 +3194,37 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addBackgroundImageObject = function (imageUrl) {
+        return __awaiter(this, void 0, void 0, function () {
+            var options;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        options = { crossOrigin: "anonymous" };
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
+                                    var id = _this.randomId();
+                                    fabricImage.set({
+                                        id: id,
+                                    });
+                                    _this.fabricCanvas.add(fabricImage);
+                                    var object = new BackgroundImage(_this, fabricImage);
+                                    _this.trackNewObject(object);
+                                    _this.selectFabricObject(fabricImage);
+                                    _this.syncObjectList();
+                                    resolve(object);
+                                }, options);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
     /**
      * @override
      * @inheritDoc
@@ -3347,6 +3506,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 return new VerticalRule(this, fabricObject, persistedField);
             case exports.ObjectType.RICH_TEXT:
                 return new RichText(this, fabricObject, persistedField);
+            case exports.ObjectType.BACKGROUND_IMAGE:
+                return new BackgroundImage(this, fabricObject, persistedField);
             default:
                 throw new Error("Unknown field type: [" + persistedField.type + "]");
         }
@@ -3506,6 +3667,7 @@ exports.AbstractCanvasObject = AbstractCanvasObject;
 exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
 exports.AbstractLayoutManager = AbstractLayoutManager;
 exports.AdvancedLayoutManager = AdvancedLayoutManager;
+exports.BackgroundImage = BackgroundImage;
 exports.Border = Border;
 exports.CanvasObjectData = CanvasObjectData;
 exports.Cutoff = Cutoff;

package/dist/layout/advanced-layout-manager.d.ts

@@ -7,6 +7,7 @@ export declare class AdvancedLayoutManager extends AbstractLayoutManager {
     private redrawAll;
     private repositionBorders;
     private repositionCutoffs;
+    private repositionBackgrounds;
     private resizeCanvas;
     constructor(canvas: IInteractiveCanvas);
     onCanvasDimensionsChange(): void;

package/dist/layout/function/reposition-backgrounds.layout-function.d.ts

@@ -0,0 +1,4 @@
+import { IInteractiveCanvas } from "../..";
+export declare class RepositionBackgroundsLayoutFunction {
+    execute(canvas: IInteractiveCanvas): void;
+}

package/dist/layout/standard-layout-manager.d.ts

@@ -8,6 +8,7 @@ export declare class StandardLayoutManager extends AbstractLayoutManager {
     private redrawAll;
     private repositionCutoffs;
     private repositionBorders;
+    private repositionBackgrounds;
     private stackObjects;
     private updateObjectDimensions;
     constructor(canvas: IInteractiveCanvas);

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

@@ -0,0 +1,38 @@
+import { AbstractCanvasObject, CanvasObjectData, IDimensionRestrictions, IInteractiveCanvas, IMutableImage } from "../..";
+import { ICanvasObject } from "../canvas-object.interface";
+import { fabric } from "fabric";
+import { Observable } from "rxjs";
+export interface IBackgroundImage extends ICanvasObject, IMutableImage {
+    updatePosition(): void;
+}
+export declare class BackgroundImage extends AbstractCanvasObject<fabric.Image> implements IBackgroundImage {
+    private readonly imageUrl$;
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Image, persistedField?: CanvasObjectData);
+    updatePosition(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    protected updateFabricObjectBehavior(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getImageUrl(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getImageUrl$(): Observable<string>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setImageUrl(url: string): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setImageWidth(px: number, sizeRestrictions: IDimensionRestrictions): number;
+    private setCanvasImage;
+}

package/dist/types/object-type.enum.d.ts

@@ -7,5 +7,6 @@ export declare enum ObjectType {
     CUTOFF = "CUTOFF",
     VERTICAL_RULE = "VERTICAL_RULE",
     HORIZONTAL_RULE = "HORIZONTAL_RULE",
-    RICH_TEXT = "RICH_TEXT"
+    RICH_TEXT = "RICH_TEXT",
+    BACKGROUND_IMAGE = "BACKGROUND_IMAGE"
 }

package/package.json

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