@leapfrog/interactive-canvas 2.0.17-beta-2 → 2.0.18

package/dist/interactive-canvas.es.js

@@ -1,27 +1,29 @@
-import _, { round, each, values, reduce, clone, isEqual } from 'lodash';
+import * as _ from 'lodash';
+import { round, each, values, reduce, clone, replace, find, isEqual } from 'lodash';
+import { oc } from 'ts-optchain';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { fabric } from 'fabric';
 
-var PIXELS_PER_MM$2 = 3.937;
+var PIXELS_PER_MM = 3.937;
 var MillimeterDimensions = /** @class */ (function () {
     function MillimeterDimensions(width, height) {
         this.widthUnit = "mm";
         this.heightUnit = "mm";
         this.width = width;
         this.widthMm = Math.max(0, width);
-        this.widthPx = round(this.widthMm * PIXELS_PER_MM$2);
+        this.widthPx = round(this.widthMm * PIXELS_PER_MM);
         this.height = height;
         this.heightMm = Math.max(0, height);
-        this.heightPx = round(this.heightMm * PIXELS_PER_MM$2);
+        this.heightPx = round(this.heightMm * PIXELS_PER_MM);
     }
     MillimeterDimensions.prototype.withSize = function (width, height) {
         return new MillimeterDimensions(width, height);
     };
     MillimeterDimensions.prototype.widthPxToMm = function (px) {
-        return px / PIXELS_PER_MM$2;
+        return px / PIXELS_PER_MM;
     };
     MillimeterDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM$2;
+        return px / PIXELS_PER_MM;
     };
     return MillimeterDimensions;
 }());
@@ -47,8 +49,8 @@ var PixelCanvasDimensions = /** @class */ (function () {
     return PixelCanvasDimensions;
 }());
 
-var COLUMN_WIDTH_MM$1 = 41;
-var GUTTER_WIDTH_MM$1 = 3;
+var COLUMN_WIDTH_MM = 41;
+var GUTTER_WIDTH_MM = 3;
 var PIXELS_PER_MM$1 = 3.937;
 var Print6ColCanvasDimensions = /** @class */ (function () {
     function Print6ColCanvasDimensions(width, height) {
@@ -56,8 +58,8 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
         this.heightUnit = "cm";
         this.width = width;
         this.gutterCount = Math.max(0, width - 1);
-        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM$1;
-        this.columnsTotalMm = width * COLUMN_WIDTH_MM$1;
+        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM;
+        this.columnsTotalMm = width * COLUMN_WIDTH_MM;
         this.widthMm = Math.max(0, this.columnsTotalMm + this.gutterTotalMm);
         this.widthPx = round(this.widthMm * PIXELS_PER_MM$1);
         this.height = height;
@@ -76,119 +78,110 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
     return Print6ColCanvasDimensions;
 }());
 
-var COLUMN_WIDTH_MM = 30.8772;
-var GUTTER_WIDTH_MM = 2.1053;
-var PIXELS_PER_MM = 3.937;
+var COLUMN_WIDTH_MM$1 = 30.8772;
+var GUTTER_WIDTH_MM$1 = 2.1053;
+var PIXELS_PER_MM$2 = 3.937;
 var Print8ColCanvasDimensions = /** @class */ (function () {
     function Print8ColCanvasDimensions(width, height) {
         this.widthUnit = "column(s)";
         this.heightUnit = "cm";
         this.width = width;
         this.gutterCount = Math.max(0, width - 1);
-        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM;
-        this.columnsTotalMm = width * COLUMN_WIDTH_MM;
+        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM$1;
+        this.columnsTotalMm = width * COLUMN_WIDTH_MM$1;
         this.widthMm = Math.max(0, this.columnsTotalMm + this.gutterTotalMm);
-        this.widthPx = round(this.widthMm * PIXELS_PER_MM);
+        this.widthPx = round(this.widthMm * PIXELS_PER_MM$2);
         this.height = height;
         this.heightMm = Math.max(0, height * 10);
-        this.heightPx = round(this.heightMm * PIXELS_PER_MM);
+        this.heightPx = round(this.heightMm * PIXELS_PER_MM$2);
     }
     Print8ColCanvasDimensions.prototype.withSize = function (width, height) {
         return new Print8ColCanvasDimensions(width, height);
     };
     Print8ColCanvasDimensions.prototype.widthPxToMm = function (px) {
-        return px / PIXELS_PER_MM;
+        return px / PIXELS_PER_MM$2;
     };
     Print8ColCanvasDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM;
+        return px / PIXELS_PER_MM$2;
     };
     return Print8ColCanvasDimensions;
 }());
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
 };
 
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
 var Font = /** @class */ (function () {
     function Font() {
     }
@@ -291,64 +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) {
-        var _a, _b;
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if ((_b = (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed) !== null && _b !== void 0 ? _b : 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";
@@ -356,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() {
     }
@@ -436,14 +332,13 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         var currentColumnWidthPercent = 0;
         each(footerRows.rows, function (row) {
             each(row.objects, function (object) {
-                var _a, _b, _c;
                 var columnOffset = currentColumnWidthPercent / 100 * layoutAreaWidth;
-                var objectMargin = (_b = (_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
+                var objectMargin = oc(object.getMargin()).left(0);
                 var left = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === ObjectType.VERTICAL_RULE)
                     object.setPosition({ height: row.height });
                 object.setPosition({
-                    top: nextObjectTop + ((_c = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _c === void 0 ? void 0 : _c.top) || 0,
+                    top: nextObjectTop + oc(object.getMargin()).top(0),
                     left: left
                 });
                 currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -453,7 +348,6 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         });
     };
     StackObjectsLayoutFunction.prototype.layoutBody = function (bodyRows, canvas, footerHeight) {
-        var _a, _b, _c, _d;
         var canvasDimensions = canvas.getDimensions();
         var canvasMargin = canvas.getMargin();
         var workableWidth = canvasDimensions.widthPx - canvasMargin.left - canvasMargin.right;
@@ -466,10 +360,10 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         for (var i = 0; i < bodyRows.rows.length; i++) {
             var row = bodyRows.rows[i];
             var nextRow = bodyRows.rows[i + 1];
-            for (var _i = 0, _e = row.objects; _i < _e.length; _i++) {
-                var object = _e[_i];
+            for (var _i = 0, _a = row.objects; _i < _a.length; _i++) {
+                var object = _a[_i];
                 var columnOffset = currentColumnWidthPercent / 100 * workableWidth;
-                var objectMargin = (_a = object.getMargin().left) !== null && _a !== void 0 ? _a : 0;
+                var objectMargin = oc(object.getMargin()).left(0);
                 var objectLeft = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === ObjectType.TEXT && object.isBulleted())
                     objectLeft += object.getBulletMargin();
@@ -478,7 +372,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
                 if (object.getType() === ObjectType.VERTICAL_RULE)
                     return;
                 object.setPosition({
-                    top: nextObjectTop + ((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.top) || 0,
+                    top: nextObjectTop + oc(object.getMargin()).top(0),
                     left: objectLeft
                 });
                 currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -486,7 +380,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
             currentColumnWidthPercent = 0;
             nextObjectTop += row.height;
             var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === ObjectType.HORIZONTAL_RULE;
-            var nextRowIsHR = ((_c = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _c === void 0 ? void 0 : _c.length) === 1 && ((_d = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _d === void 0 ? void 0 : _d.getType()) === ObjectType.HORIZONTAL_RULE;
+            var nextRowIsHR = oc(nextRow).objects.length() === 1 && oc(nextRow).objects()[0].getType() === ObjectType.HORIZONTAL_RULE;
             if (!thisRowIsHR && !nextRowIsHR) {
                 nextObjectTop += spaceSize;
             }
@@ -494,9 +388,8 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     };
     StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
         _(objects).forEach(function (object) {
-            var _a, _b;
             var targetWidth = object.getColumnWidthPercent() / 100 * layoutWidth;
-            var actualWidth = targetWidth - (((_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) || 0) - (((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.right) || 0);
+            var actualWidth = targetWidth - oc(object.getMargin()).left(0) - oc(object.getMargin()).right(0);
             if (object.getType() === ObjectType.VERTICAL_RULE)
                 return;
             if (object.getType() === ObjectType.TEXT && object.isBulleted())
@@ -510,11 +403,10 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         });
     };
     StackObjectsLayoutFunction.prototype.adjustCanvasSize = function (canvas, requiredHeight) {
-        var _a, _b, _c, _d;
-        if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed)
+        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
             return;
         var dimensions = canvas.getDimensions();
-        var minHeight = (_d = (_c = (_b = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _b === void 0 ? void 0 : _b.height) === null || _c === void 0 ? void 0 : _c.min) !== null && _d !== void 0 ? _d : MIN_MAGNITUDE;
+        var minHeight = oc(canvas.getDimensionsRestrictions()).height.min(MIN_MAGNITUDE);
         var targetDimensions = canvas.getDimensions().withSize(dimensions.width, minHeight);
         while (targetDimensions.heightPx < requiredHeight) {
             targetDimensions = targetDimensions.withSize(dimensions.width, targetDimensions.height + 1);
@@ -547,19 +439,17 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         return result;
     };
     StackObjectsLayoutFunction.prototype.getObjectHeight = function (element) {
-        var _a, _b;
         return element.getBoundingBox().height
-            + (((_a = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _a === void 0 ? void 0 : _a.top) || 0)
-            + (((_b = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _b === void 0 ? void 0 : _b.bottom) || 0);
+            + oc(element.getMargin()).top(0)
+            + oc(element.getMargin()).bottom(0);
     };
     StackObjectsLayoutFunction.prototype.countSpaces = function (rows) {
-        var _a, _b;
         var count = 0;
         for (var i = 0; i < rows.rows.length - 1; i++) {
             var row = rows.rows[i];
             var nextRow = rows.rows[i + 1];
             var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === ObjectType.HORIZONTAL_RULE;
-            var nextRowIsHR = ((_a = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_b = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) === ObjectType.HORIZONTAL_RULE;
+            var nextRowIsHR = oc(nextRow).objects.length() === 1 && oc(nextRow).objects()[0].getType() === ObjectType.HORIZONTAL_RULE;
             if (!thisRowIsHR && !nextRowIsHR) {
                 count++;
             }
@@ -569,6 +459,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) {
@@ -801,15 +711,14 @@ var AbstractCanvasObject = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractCanvasObject.prototype.setMargin = function (margin) {
-        var _a, _b;
         if (!margin)
             return;
-        var newMargin = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.margin) !== null && _b !== void 0 ? _b : {
+        var newMargin = oc(this.data).margin({
             top: 0,
             right: 0,
             bottom: 0,
             left: 0
-        };
+        });
         if (margin.top != undefined)
             newMargin.top = margin.top || 0;
         if (margin.right != undefined)
@@ -826,8 +735,7 @@ var AbstractCanvasObject = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractCanvasObject.prototype.getColumnWidthPercent = function () {
-        var _a, _b;
-        return Math.max(Math.min((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.columnWidthPercent) !== null && _b !== void 0 ? _b : 100, 100), 0);
+        return Math.max(Math.min(oc(this.data).columnWidthPercent(100), 100), 0);
     };
     /**
      * @override
@@ -1909,20 +1817,6 @@ var RichText = /** @class */ (function (_super) {
     return RichText;
 }(Image));
 
-var ObjectType;
-(function (ObjectType) {
-    ObjectType["TEXT"] = "TEXT";
-    ObjectType["BORDER"] = "BORDER";
-    ObjectType["IMAGE"] = "IMAGE";
-    ObjectType["RECTANGLE"] = "RECTANGLE";
-    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
-    ObjectType["CUTOFF"] = "CUTOFF";
-    ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
-    ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
-    ObjectType["RICH_TEXT"] = "RICH_TEXT";
-    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
-})(ObjectType || (ObjectType = {}));
-
 var Text = /** @class */ (function (_super) {
     __extends(Text, _super);
     function Text(canvas, fabricObject, persistedField) {
@@ -1976,21 +1870,6 @@ var Text = /** @class */ (function (_super) {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
     };
-    Text.prototype.replaceTextWithStyle = function (target, replacement) {
-        var start = this.getText().indexOf(target);
-        var styles = this.getReplacementStyle(target, replacement);
-        this.fabricObject.insertChars(replacement, styles, start, start + target.length);
-        this.redraw();
-        this.data.userText = this.fabricObject.text;
-        this.text$.next(this.fabricObject.text);
-    };
-    Text.prototype.getReplacementStyle = function (target, replacement) {
-        var start = this.getText().indexOf(target);
-        var lineIndex = (this.getText().substring(0, start).split(Text.NEW_LINE).length - 1);
-        var lines = this.getText().split(Text.NEW_LINE);
-        var startWithinLine = lines[lineIndex].indexOf(target);
-        return Array(replacement.length).fill(this.fabricObject.styles[lineIndex][startWithinLine]);
-    };
     /**
      * @override
      * @inheritDoc
@@ -2105,7 +1984,7 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.setBoldRegion = function (start, end, bold) {
         if (bold === void 0) { bold = true; }
         if (start > end)
-            throw Error("Bad region specified: [".concat(start, " - ").concat(end, "]"));
+            throw Error("Bad region specified: [" + start + " - " + end + "]");
         for (var i = start; i < end; i++) {
             var style = this.fabricObject.getStyleAtPosition(i, true);
             var font = this.fontLibrary.getFont(style.fontFamily);
@@ -2136,7 +2015,7 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.setItalicRegion = function (start, end, italic) {
         if (italic === void 0) { italic = true; }
         if (start > end)
-            throw Error("Bad region specified: [".concat(start, " - ").concat(end, "]"));
+            throw Error("Bad region specified: [" + start + " - " + end + "]");
         this.fabricObject.setSelectionStyles({ fontStyle: italic ? "italic" : "" }, start, end);
         this.redraw();
     };
@@ -2287,7 +2166,7 @@ var Text = /** @class */ (function (_super) {
         if (!this.isBulleted())
             return 0;
         var fontSize = 0;
-        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
+        each(this.fabricObject._textLines, function (textLine, lineIndex) {
             fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
         });
         return fontSize * 0.6;
@@ -2366,10 +2245,9 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.enableBullets = function () {
-        var _a;
         this.disableOrderedList();
         this.fabricObject["objectCaching"] = false;
-        this.fabricObject["_bullets"] = (_a = this.fabricObject["_bullets"]) !== null && _a !== void 0 ? _a : {};
+        this.fabricObject["_bullets"] = this.fabricObject["_bullets"] || {};
         this.data.bulleted = true;
         this.notifyCanvasOfTextChanges();
         this.redraw();
@@ -2436,7 +2314,7 @@ var Text = /** @class */ (function (_super) {
         if (this.data.bulleted) {
             var bullets = this.fabricObject["_bullets"];
             delete this.fabricObject["_bullets"];
-            _.each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
+            each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2445,7 +2323,7 @@ var Text = /** @class */ (function (_super) {
         if (this.fabricObject._isOrderedList) {
             var markerEntities = this.fabricObject._orderedListMarkerEntities;
             delete this.fabricObject._orderedListMarkerEntities;
-            _.each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
+            each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2458,13 +2336,12 @@ var Text = /** @class */ (function (_super) {
         var originalRender = this.fabricObject["_render"];
         var fabric = this.canvas.fabric;
         this.fabricObject["_render"] = function (ctx) {
-            var _a;
             var fabricText = this;
             if (fabricText["_bullets"]) {
                 // Determine list of active bullets
                 var currentBullets_1 = fabricText["_bullets"];
                 var activeBullets_1 = {};
-                _.each(fabricText._textLines, function (textLine, lineIndex) {
+                each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
@@ -2498,13 +2375,13 @@ var Text = /** @class */ (function (_super) {
                 var canvas_1 = fabricText.canvas;
                 var canvasDirty_1 = false;
                 canvas_1.renderOnAddRemove = false;
-                _.each(activeBullets_1, function (bullet) {
+                each(activeBullets_1, function (bullet) {
                     if (!canvas_1.contains(bullet)) {
                         canvas_1.add(bullet);
                         canvasDirty_1 = true;
                     }
                 });
-                _.each(currentBullets_1, function (bullet, key) {
+                each(currentBullets_1, function (bullet, key) {
                     if (!activeBullets_1[key]) {
                         canvas_1.remove(bullet);
                         canvasDirty_1 = true;
@@ -2518,9 +2395,9 @@ var Text = /** @class */ (function (_super) {
                 }
             }
             if (fabricText._isOrderedList) {
-                var existingMarkers_1 = (_a = fabricText._orderedListMarkerEntities) !== null && _a !== void 0 ? _a : [];
+                var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
                 var activeMarkers_1 = [];
-                _.each(fabricText._textLines, function (textLine, lineIndex) {
+                each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
@@ -2531,7 +2408,7 @@ var Text = /** @class */ (function (_super) {
                             }
                             else {
                                 // Create new marker for this line
-                                var textbox = new fabric.Textbox("".concat(lineIndex, "."), {
+                                var textbox = new fabric.Textbox(lineIndex + ".", {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2553,7 +2430,7 @@ var Text = /** @class */ (function (_super) {
                 var canvas_2 = fabricText.canvas;
                 var canvasDirty_2 = false;
                 canvas_2.renderOnAddRemove = false;
-                _.each(activeMarkers_1, function (marker) {
+                each(activeMarkers_1, function (marker) {
                     if (!marker)
                         return;
                     if (!canvas_2.contains(marker)) {
@@ -2561,7 +2438,7 @@ var Text = /** @class */ (function (_super) {
                         canvasDirty_2 = true;
                     }
                 });
-                _.each(existingMarkers_1, function (marker, key) {
+                each(existingMarkers_1, function (marker, key) {
                     if (!marker)
                         return;
                     if (!activeMarkers_1[key]) {
@@ -2630,7 +2507,7 @@ var Text = /** @class */ (function (_super) {
                     left: fabricText.left + xOffset,
                     top: fabricText.top + yOffset,
                     angle: fabricText.angle,
-                    text: "".concat(lineNumber, ".")
+                    text: lineNumber + "."
                 });
             }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
@@ -2687,7 +2564,6 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.notifyCanvasOfTextChanges = function () {
         this.canvas.notifyTextChanged();
     };
-    Text.NEW_LINE = "\n";
     return Text;
 }(AbstractCanvasObject));
 var TextSelection = /** @class */ (function () {
@@ -2850,6 +2726,20 @@ var ImageType;
     ImageType["PHOTO"] = "PHOTO";
 })(ImageType || (ImageType = {}));
 
+var ObjectType;
+(function (ObjectType) {
+    ObjectType["TEXT"] = "TEXT";
+    ObjectType["BORDER"] = "BORDER";
+    ObjectType["IMAGE"] = "IMAGE";
+    ObjectType["RECTANGLE"] = "RECTANGLE";
+    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
+    ObjectType["CUTOFF"] = "CUTOFF";
+    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 () {
     function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
         this.fabric = fabric;
@@ -3031,12 +2921,11 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
         this.dimensionRestrictions$.next(restrictions);
         var dimensions = this.getDimensions();
         if (this.dimensionsExceedRestrictions(dimensions)) {
             var newDimensions = dimensions
-                .withSize(Math.min(Math.max((_b = (_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : dimensions.width, dimensions.width), Math.max((_d = (_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _c === void 0 ? void 0 : _c.max) !== null && _d !== void 0 ? _d : dimensions.width)), Math.min(Math.max((_f = (_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _e === void 0 ? void 0 : _e.min) !== null && _f !== void 0 ? _f : dimensions.height, dimensions.height), Math.max((_h = (_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _g === void 0 ? void 0 : _g.max) !== null && _h !== void 0 ? _h : dimensions.height)));
+                .withSize(Math.min(Math.max(oc(restrictions).width.min(dimensions.width), dimensions.width), Math.max(oc(restrictions).width.max(dimensions.width))), Math.min(Math.max(oc(restrictions).height.min(dimensions.height), dimensions.height), Math.max(oc(restrictions).height.max(dimensions.height))));
             this.setBaseDimensions(newDimensions);
         }
     };
@@ -3453,7 +3342,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objectsToLayout = _(this.getObjectsByTypesInternal(ObjectType.TEXT, ObjectType.IMAGE))
             .sortBy(function (x) { return x.getBoundingBox().top; })
             .value();
-        var objectsHeight = _.reduce(objectsToLayout, function (total, element) { return total + element.getBoundingBox().height; }, 0);
+        var objectsHeight = reduce(objectsToLayout, function (total, element) { return total + element.getBoundingBox().height; }, 0);
         var workableHeight = canvasHeight - margin.top - margin.bottom;
         var requiredPadding = workableHeight - objectsHeight;
         var spaceBetween = requiredPadding / (objectsToLayout.length - 1);
@@ -3627,7 +3516,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         if (activeObject) {
             this.fabricCanvas.setActiveObject(activeObject);
         }
-        return _.replace(base64, /^data:.*;base64,/, "");
+        return replace(base64, /^data:.*;base64,/, "");
     };
     /**
      * @override
@@ -3749,20 +3638,20 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             case ObjectType.BACKGROUND_IMAGE:
                 return new BackgroundImage(this, fabricObject, persistedField);
             default:
-                throw new Error("Unknown field type: [".concat(persistedField.type, "]"));
+                throw new Error("Unknown field type: [" + persistedField.type + "]");
         }
     };
     AbstractInteractiveCanvas.prototype.findFabricObject = function (id) {
         var objects = this.fabricCanvas.getObjects();
-        var fabricObject = _.find(objects, function (o) { return o.id == id; });
+        var fabricObject = find(objects, function (o) { return o.id == id; });
         if (!fabricObject) {
-            throw new Error("Cannot find fabric object with id [".concat(id, "]"));
+            throw new Error("Cannot find fabric object with id [" + id + "]");
         }
         return fabricObject;
     };
     AbstractInteractiveCanvas.prototype.findObject = function (id) {
         //Don't use strict compare here. fabric ids are numbers while ad builder ids are strings... mostly.
-        return _.find(this.objects$.value, function (object) { return object.getId() == id; });
+        return find(this.objects$.value, function (object) { return object.getId() == id; });
     };
     /**
      * Reset zoom and canvas dimensions to 1:1 scale, execute a function, then return the canvas to
@@ -3800,7 +3689,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         if (!object) {
             return null;
         }
-        return _.find(this.objects$.value, function (field) { return field.getId() == object.id; });
+        return find(this.objects$.value, function (field) { return field.getId() == object.id; });
     };
     AbstractInteractiveCanvas.prototype.getFieldsByCanvasObject = function (objects) {
         var _this = this;
@@ -3812,7 +3701,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.calculateImageCaptureCoefficient = function () {
         var precision = 3;
         var devicePixelRatio = this.devicePixelRatio || 1;
-        return _.round(2 / devicePixelRatio, precision);
+        return round(2 / devicePixelRatio, precision);
     };
     AbstractInteractiveCanvas.prototype.randomId = function () {
         var min = 0;
@@ -3827,17 +3716,16 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             .reduce(function (x, y) { return Math.max(x, y); }, 0);
     };
     AbstractInteractiveCanvas.prototype.trackNewObject = function (object) {
-        this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
+        this.objects$.next(__spreadArrays(this.objects$.value, [object]));
     };
     AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var restrictions = this.dimensionRestrictions$.value;
-        return ((_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _a === void 0 ? void 0 : _a.min) != undefined && dimensions.height < ((_b = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _b === void 0 ? void 0 : _b.min)
-            || ((_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _c === void 0 ? void 0 : _c.max) != undefined && dimensions.height > ((_d = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _d === void 0 ? void 0 : _d.max)
-            || ((_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _e === void 0 ? void 0 : _e.min) != undefined && dimensions.width < ((_f = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _f === void 0 ? void 0 : _f.min)
-            || ((_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _g === void 0 ? void 0 : _g.max) != undefined && dimensions.width > ((_h = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _h === void 0 ? void 0 : _h.max)
-            || ((_j = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _j === void 0 ? void 0 : _j.min) != undefined && dimensions.height * dimensions.width < ((_k = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _k === void 0 ? void 0 : _k.min)
-            || ((_l = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _l === void 0 ? void 0 : _l.max) != undefined && dimensions.height * dimensions.width > ((_m = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _m === void 0 ? void 0 : _m.max);
+        return oc(restrictions).height.min() != undefined && dimensions.height < oc(restrictions).height.min()
+            || oc(restrictions).height.max() != undefined && dimensions.height > oc(restrictions).height.max()
+            || oc(restrictions).width.min() != undefined && dimensions.width < oc(restrictions).width.min()
+            || oc(restrictions).width.max() != undefined && dimensions.width > oc(restrictions).width.max()
+            || oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < oc(restrictions).volume.min()
+            || oc(restrictions).volume.max() != undefined && dimensions.height * dimensions.width > oc(restrictions).volume.max();
     };
     return AbstractInteractiveCanvas;
 }());
@@ -3849,11 +3737,7 @@ var SelectionData = /** @class */ (function () {
         this.isText = selectedObject
             && selectedObject.getType() === ObjectType.TEXT
             && selectedObject.isEditing();
-        this.event = {};
     }
-    SelectionData.prototype.setEvent = function (event) {
-        this.event = event;
-    };
     return SelectionData;
 }());
 
@@ -3965,9 +3849,9 @@ var InteractiveCanvas = /** @class */ (function (_super) {
         _this.headless = false;
         _this.undoStack = new UndoStack(_this);
         //Initialize watchers
-        _this.fabricCanvas.on("selection:updated", function (event) { return _this.onFabricSelectionChanged(event); });
-        _this.fabricCanvas.on("selection:created", function (event) { return _this.onFabricSelectionChanged(event); });
-        _this.fabricCanvas.on("selection:cleared", function (event) { return _this.onFabricSelectionChanged(event); });
+        _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
+        _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
+        _this.fabricCanvas.on("selection:cleared", function () { return _this.onFabricSelectionChanged(); });
         _this.fabricCanvas.on("text:editing:entered", function () { return _this.onTextEditing(); });
         _this.fabricCanvas.on("text:editing:exited", function () { return _this.onTextEditing(); });
         _this.fabricCanvas.on("text:changed", function () { return _this.onTextChange(); });
@@ -4012,11 +3896,9 @@ var InteractiveCanvas = /** @class */ (function (_super) {
             });
         });
     };
-    InteractiveCanvas.prototype.onFabricSelectionChanged = function (event) {
+    InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        var selection = new SelectionData(selected);
-        selection.setEvent(event);
-        this.selection$.next(selection);
+        this.selection$.next(new SelectionData(selected));
         this.enterTextSelectionModeIfRequired();
     };
     InteractiveCanvas.prototype.enterTextSelectionModeIfRequired = function () {
@@ -4034,4 +3916,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 };