@leapfrog/interactive-canvas 1.12.2 → 1.13.1

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

@@ -28,6 +28,7 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
     protected readonly fabricCanvas: fabric.Canvas;
     protected devicePixelRatio: number;
     protected readonly IMAGE_CAPTURE_COEFFICIENT: number;
+    abstract readonly headless: boolean;
     protected readonly fontLibrary: IFontLibrary;
     protected readonly profile$: BehaviorSubject<ICanvasProfile>;
     protected readonly layoutManager$: BehaviorSubject<ILayoutManager>;

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

@@ -1,6 +1,7 @@
 import { fabric } from "fabric";
 import { AbstractInteractiveCanvas } from "./abstract-interactive-canvas";
 export declare class HeadlessInteractiveCanvas extends AbstractInteractiveCanvas {
+    readonly headless: boolean;
     constructor();
     /**
      * @override

package/dist/interactive-canvas.d.ts

@@ -1,6 +1,7 @@
 import { AbstractInteractiveCanvas } from "./abstract-interactive-canvas";
 export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
     protected devicePixelRatio: number;
+    readonly headless: boolean;
     private readonly undoStack;
     constructor(elementId: string, devicePixelRatio: number);
     /**

package/dist/interactive-canvas.es.js

@@ -284,63 +284,6 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
 var LayoutManager;
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
@@ -348,45 +291,6 @@ 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) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        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 () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -550,6 +454,26 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+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 StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -2465,6 +2389,8 @@ var Text = /** @class */ (function (_super) {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     };
     Text.prototype.updateTextSelection = function () {
+        if (this.canvas.headless)
+            return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
         this.notifyCanvasOfTextChanges();
     };
@@ -2786,7 +2712,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      */
     AbstractInteractiveCanvas.prototype.setDimensions = function (dimensions) {
         if (this.dimensionsExceedRestrictions(dimensions)) {
-            console.debug("Requested canvas dimensions exceed current restrictions", dimensions, this.dimensionRestrictions$.value);
+            console.info("Requested canvas dimensions exceed current restrictions", dimensions, this.dimensionRestrictions$.value);
             this.dimensionChangeRejections$.next(dimensions);
             return;
         }
@@ -3045,7 +2971,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                                     var object = new RichText(_this, fabricImage);
                                     object.htmlContent = htmlContent;
                                     _this.trackNewObject(object);
-                                    object.setImageWidth(_this.dimensions$.value.widthPx);
+                                    var margin = _this.getMargin();
+                                    object.setImageWidth(_this.dimensions$.value.widthPx - margin.left - margin.right);
                                     _this.selectFabricObject(fabricImage);
                                     _this.syncObjectList();
                                     resolve(object);
@@ -3339,7 +3266,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.debug("Loading canvas state", canvasState);
                         this.setBaseDimensions(canvasState.dimensions);
                         if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
                         json_1 = JSON.parse(canvasState.canvasJson);
@@ -3403,7 +3329,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
             enableRetinaScaling: true
         };
-        console.debug("Capturing canvas image", options);
         var base64 = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toDataURL(options); });
         return replace(base64, /^data:.*;base64,/, "");
     };
@@ -3491,7 +3416,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     };
     AbstractInteractiveCanvas.prototype.bindFields = function (persistedFields) {
         var _this = this;
-        console.debug("Binding fields", persistedFields);
         var bound = _(persistedFields)
             .flatMap(function (field) {
             try {
@@ -3503,11 +3427,9 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             }
         })
             .value();
-        console.debug("Bound fields", bound);
         this.objects$.next(bound);
     };
     AbstractInteractiveCanvas.prototype.bindField = function (persistedField) {
-        console.debug("Binding field", persistedField);
         var fabricObject = this.findFabricObject(persistedField.id);
         switch (persistedField.type) {
             case ObjectType.TEXT:
@@ -3567,7 +3489,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.updateCanvasDimensions = function (dims, zoom) {
         var width = dims.widthPx * zoom;
         var height = dims.heightPx * zoom;
-        console.debug("Updating canvas dimensions: zoom: " + zoom + ", width: " + width + ", height: " + height);
         this.fabricCanvas.setZoom(zoom);
         this.fabricCanvas.setDimensions({
             width: width,
@@ -3577,7 +3498,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.onProfileChanged = function (profile) {
         this.setMultiSelect(profile.allowMultiSelect);
         this.layoutManager$.value.onProfileChange(profile);
-        console.debug("Canvas profile set", profile);
     };
     AbstractInteractiveCanvas.prototype.getFieldByCanvasObject = function (object) {
         if (!object) {
@@ -3638,7 +3558,9 @@ var SelectionData = /** @class */ (function () {
 var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
     __extends(HeadlessInteractiveCanvas, _super);
     function HeadlessInteractiveCanvas() {
-        return _super.call(this, fabric, new fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
+        var _this = _super.call(this, fabric, new fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
+        _this.headless = true;
+        return _this;
     }
     /**
      * @override
@@ -3738,6 +3660,7 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     function InteractiveCanvas(elementId, devicePixelRatio) {
         var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(elementId), devicePixelRatio) || this;
         _this.devicePixelRatio = devicePixelRatio;
+        _this.headless = false;
         _this.undoStack = new UndoStack(_this);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
@@ -3789,7 +3712,6 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     };
     InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        console.debug("Selection changed", selected);
         this.selection$.next(new SelectionData(selected));
         this.enterTextSelectionModeIfRequired();
     };
@@ -3808,4 +3730,80 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        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 () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 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

@@ -25,6 +25,10 @@ import { IBackgroundImage } from "./object/impl/background-image";
  * New leapfrog canvas implementation c. 2019.
  */
 export interface IInteractiveCanvas {
+    /**
+     * True if the canvas is operating in a headless mode.
+     */
+    readonly headless: boolean;
     /**
      * Get the canvas font library.
      */

package/dist/interactive-canvas.js

@@ -287,108 +287,12 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
     LayoutManager["STANDARD"] = "STANDARD";
     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) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = exports.LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        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 () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -552,6 +456,26 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+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 StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -2467,6 +2391,8 @@ var Text = /** @class */ (function (_super) {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     };
     Text.prototype.updateTextSelection = function () {
+        if (this.canvas.headless)
+            return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
         this.notifyCanvasOfTextChanges();
     };
@@ -2786,7 +2712,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      */
     AbstractInteractiveCanvas.prototype.setDimensions = function (dimensions) {
         if (this.dimensionsExceedRestrictions(dimensions)) {
-            console.debug("Requested canvas dimensions exceed current restrictions", dimensions, this.dimensionRestrictions$.value);
+            console.info("Requested canvas dimensions exceed current restrictions", dimensions, this.dimensionRestrictions$.value);
             this.dimensionChangeRejections$.next(dimensions);
             return;
         }
@@ -3045,7 +2971,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                                     var object = new RichText(_this, fabricImage);
                                     object.htmlContent = htmlContent;
                                     _this.trackNewObject(object);
-                                    object.setImageWidth(_this.dimensions$.value.widthPx);
+                                    var margin = _this.getMargin();
+                                    object.setImageWidth(_this.dimensions$.value.widthPx - margin.left - margin.right);
                                     _this.selectFabricObject(fabricImage);
                                     _this.syncObjectList();
                                     resolve(object);
@@ -3339,7 +3266,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.debug("Loading canvas state", canvasState);
                         this.setBaseDimensions(canvasState.dimensions);
                         if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
                         json_1 = JSON.parse(canvasState.canvasJson);
@@ -3403,7 +3329,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
             enableRetinaScaling: true
         };
-        console.debug("Capturing canvas image", options);
         var base64 = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toDataURL(options); });
         return _.replace(base64, /^data:.*;base64,/, "");
     };
@@ -3491,7 +3416,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     };
     AbstractInteractiveCanvas.prototype.bindFields = function (persistedFields) {
         var _this = this;
-        console.debug("Binding fields", persistedFields);
         var bound = _(persistedFields)
             .flatMap(function (field) {
             try {
@@ -3503,11 +3427,9 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             }
         })
             .value();
-        console.debug("Bound fields", bound);
         this.objects$.next(bound);
     };
     AbstractInteractiveCanvas.prototype.bindField = function (persistedField) {
-        console.debug("Binding field", persistedField);
         var fabricObject = this.findFabricObject(persistedField.id);
         switch (persistedField.type) {
             case exports.ObjectType.TEXT:
@@ -3567,7 +3489,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.updateCanvasDimensions = function (dims, zoom) {
         var width = dims.widthPx * zoom;
         var height = dims.heightPx * zoom;
-        console.debug("Updating canvas dimensions: zoom: " + zoom + ", width: " + width + ", height: " + height);
         this.fabricCanvas.setZoom(zoom);
         this.fabricCanvas.setDimensions({
             width: width,
@@ -3577,7 +3498,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.onProfileChanged = function (profile) {
         this.setMultiSelect(profile.allowMultiSelect);
         this.layoutManager$.value.onProfileChange(profile);
-        console.debug("Canvas profile set", profile);
     };
     AbstractInteractiveCanvas.prototype.getFieldByCanvasObject = function (object) {
         if (!object) {
@@ -3638,7 +3558,9 @@ var SelectionData = /** @class */ (function () {
 var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
     __extends(HeadlessInteractiveCanvas, _super);
     function HeadlessInteractiveCanvas() {
-        return _super.call(this, fabric.fabric, new fabric.fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
+        var _this = _super.call(this, fabric.fabric, new fabric.fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
+        _this.headless = true;
+        return _this;
     }
     /**
      * @override
@@ -3738,6 +3660,7 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     function InteractiveCanvas(elementId, devicePixelRatio) {
         var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(elementId), devicePixelRatio) || this;
         _this.devicePixelRatio = devicePixelRatio;
+        _this.headless = false;
         _this.undoStack = new UndoStack(_this);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
@@ -3789,7 +3712,6 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     };
     InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        console.debug("Selection changed", selected);
         this.selection$.next(new SelectionData(selected));
         this.enterTextSelectionModeIfRequired();
     };
@@ -3808,6 +3730,82 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        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 () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 exports.AbstractCanvasObject = AbstractCanvasObject;
 exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
 exports.AbstractLayoutManager = AbstractLayoutManager;

package/package.json

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