@leapfrog/interactive-canvas 1.14.4 → 1.14.6

package/dist/interactive-canvas.js

@@ -1,4017 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _ = require('lodash');
-var tsOptchain = require('ts-optchain');
-var rxjs = require('rxjs');
-var fabric = require('fabric');
-
-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);
-        this.height = height;
-        this.heightMm = Math.max(0, height);
-        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;
-    };
-    MillimeterDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM;
-    };
-    return MillimeterDimensions;
-}());
-
-var PixelCanvasDimensions = /** @class */ (function () {
-    function PixelCanvasDimensions(width, height) {
-        this.widthUnit = "px";
-        this.heightUnit = "px";
-        this.width = width;
-        this.widthPx = width;
-        this.height = height;
-        this.heightPx = height;
-    }
-    PixelCanvasDimensions.prototype.withSize = function (width, height) {
-        return new PixelCanvasDimensions(width, height);
-    };
-    PixelCanvasDimensions.prototype.widthPxToMm = function (px) {
-        return void 0;
-    };
-    PixelCanvasDimensions.prototype.heightPxToMm = function (px) {
-        return void 0;
-    };
-    return PixelCanvasDimensions;
-}());
-
-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) {
-        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.widthMm = Math.max(0, this.columnsTotalMm + this.gutterTotalMm);
-        this.widthPx = _.round(this.widthMm * PIXELS_PER_MM$1);
-        this.height = height;
-        this.heightMm = Math.max(0, height * 10);
-        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM$1);
-    }
-    Print6ColCanvasDimensions.prototype.withSize = function (width, height) {
-        return new Print6ColCanvasDimensions(width, height);
-    };
-    Print6ColCanvasDimensions.prototype.widthPxToMm = function (px) {
-        return px / PIXELS_PER_MM$1;
-    };
-    Print6ColCanvasDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM$1;
-    };
-    return Print6ColCanvasDimensions;
-}());
-
-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$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$2);
-        this.height = height;
-        this.heightMm = Math.max(0, height * 10);
-        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$2;
-    };
-    Print8ColCanvasDimensions.prototype.heightPxToMm = function (px) {
-        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 */
-
-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() {
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Font.prototype.isBold = function (fontWeight) {
-        return fontWeight === this.boldWeight;
-    };
-    return Font;
-}());
-
-var UnknownFont = /** @class */ (function (_super) {
-    __extends(UnknownFont, _super);
-    function UnknownFont() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.family = "_Unknown_";
-        _this.normalWeight = 400;
-        _this.boldWeight = 700;
-        return _this;
-    }
-    return UnknownFont;
-}(Font));
-
-var UNKNOWN_FONT = new UnknownFont();
-var FontLibrary = /** @class */ (function () {
-    function FontLibrary() {
-        this._fonts = {};
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    FontLibrary.prototype.registerFont = function (font) {
-        this._fonts[font.family] = font;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    FontLibrary.prototype.registerFonts = function (fonts) {
-        var _this = this;
-        _.each(fonts, function (font) { return _this._fonts[font.family] = font; });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    FontLibrary.prototype.getFonts = function () {
-        return _.values(this._fonts);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    FontLibrary.prototype.getFont = function (family) {
-        return this._fonts[family] || UNKNOWN_FONT;
-    };
-    return FontLibrary;
-}());
-
-var AbstractLayoutManager = /** @class */ (function () {
-    function AbstractLayoutManager(canvas) {
-        this.isEnforcedPositioning = false;
-        this.enterTextEditImmediatelyOnSelect = false;
-        this.canvas = canvas;
-    }
-    AbstractLayoutManager.prototype.getCanvas = function () {
-        return this.canvas;
-    };
-    AbstractLayoutManager.prototype.onInit = function () {
-        //noop
-    };
-    AbstractLayoutManager.prototype.onProfileChange = function (profile) {
-        //noop
-    };
-    AbstractLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        //noop
-    };
-    AbstractLayoutManager.prototype.onTextChange = function () {
-        //noop
-    };
-    AbstractLayoutManager.prototype.onObjectListChange = function () {
-        //noop
-    };
-    AbstractLayoutManager.prototype.onMarginChange = function () {
-        //noop
-    };
-    return AbstractLayoutManager;
-}());
-
-var RedrawAllLayoutFunction = /** @class */ (function () {
-    function RedrawAllLayoutFunction() {
-    }
-    RedrawAllLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    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() {
-    }
-    UpdateObjectDimensionsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal().forEach(function (object) { return object.updateDimensions(); });
-    };
-    return UpdateObjectDimensionsLayoutFunction;
-}());
-
-var MIN_MAGNITUDE = 1;
-var StackObjectsLayoutFunction = /** @class */ (function () {
-    function StackObjectsLayoutFunction() {
-    }
-    StackObjectsLayoutFunction.prototype.execute = function (canvas) {
-        var canvasMargin = canvas.getMargin();
-        var canvasDimensions = canvas.getDimensions();
-        var allObjects = canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.RICH_TEXT, exports.ObjectType.IMAGE, exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
-        var objects = _(allObjects)
-            .partition(function (object) { return object.isPinToBottom(); })
-            .value();
-        var footerObjects = objects[0];
-        var bodyObjects = objects[1];
-        var bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
-        //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
-        this.applyWidths(allObjects, bodyWidth);
-        var bodyRows = this.getRows(bodyObjects);
-        var footerRows = this.getRows(footerObjects);
-        var minimumHeight = canvasMargin.top + bodyRows.totalHeight + footerRows.totalHeight + canvasMargin.bottom;
-        this.adjustCanvasSize(canvas, minimumHeight);
-        this.layoutFooter(footerRows, canvas);
-        this.layoutBody(bodyRows, canvas, footerRows.totalHeight);
-    };
-    StackObjectsLayoutFunction.prototype.layoutFooter = function (footerRows, canvas) {
-        var canvasDimensions = canvas.getDimensions();
-        var canvasMargin = canvas.getMargin();
-        var layoutAreaWidth = canvasDimensions.widthPx - canvasMargin.left - canvasMargin.right;
-        var nextObjectTop = canvasDimensions.heightPx - canvasMargin.bottom - footerRows.totalHeight;
-        var currentColumnWidthPercent = 0;
-        _.each(footerRows.rows, function (row) {
-            _.each(row.objects, function (object) {
-                var columnOffset = currentColumnWidthPercent / 100 * layoutAreaWidth;
-                var objectMargin = tsOptchain.oc(object.getMargin()).left(0);
-                var left = canvasMargin.left + columnOffset + objectMargin;
-                if (object.getType() === exports.ObjectType.VERTICAL_RULE)
-                    object.setPosition({ height: row.height });
-                object.setPosition({
-                    top: nextObjectTop + tsOptchain.oc(object.getMargin()).top(0),
-                    left: left
-                });
-                currentColumnWidthPercent += object.getColumnWidthPercent();
-            });
-            currentColumnWidthPercent = 0;
-            nextObjectTop += row.height;
-        });
-    };
-    StackObjectsLayoutFunction.prototype.layoutBody = function (bodyRows, canvas, footerHeight) {
-        var canvasDimensions = canvas.getDimensions();
-        var canvasMargin = canvas.getMargin();
-        var workableWidth = canvasDimensions.widthPx - canvasMargin.left - canvasMargin.right;
-        var workableHeight = canvasDimensions.heightPx - canvasMargin.top - canvasMargin.bottom - footerHeight;
-        var leftoverSpace = workableHeight - bodyRows.totalHeight;
-        var spacesRequired = this.countSpaces(bodyRows);
-        var spaceSize = leftoverSpace / spacesRequired;
-        var nextObjectTop = canvasMargin.top;
-        var currentColumnWidthPercent = 0;
-        for (var i = 0; i < bodyRows.rows.length; i++) {
-            var row = bodyRows.rows[i];
-            var nextRow = bodyRows.rows[i + 1];
-            for (var _i = 0, _a = row.objects; _i < _a.length; _i++) {
-                var object = _a[_i];
-                var columnOffset = currentColumnWidthPercent / 100 * workableWidth;
-                var objectMargin = tsOptchain.oc(object.getMargin()).left(0);
-                var objectLeft = canvasMargin.left + columnOffset + objectMargin;
-                if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
-                    objectLeft += object.getBulletMargin();
-                if (object.getType() === exports.ObjectType.TEXT && object.isOrderedList())
-                    objectLeft += object.getOrderedListMargin();
-                if (object.getType() === exports.ObjectType.VERTICAL_RULE)
-                    object.setPosition({ height: row.height });
-                object.setPosition({
-                    top: nextObjectTop + tsOptchain.oc(object.getMargin()).top(0),
-                    left: objectLeft
-                });
-                currentColumnWidthPercent += object.getColumnWidthPercent();
-            }
-            currentColumnWidthPercent = 0;
-            nextObjectTop += row.height;
-            var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
-            var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
-            if (!thisRowIsHR && !nextRowIsHR) {
-                nextObjectTop += spaceSize;
-            }
-        }
-    };
-    StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
-        _(objects).forEach(function (object) {
-            var targetWidth = object.getColumnWidthPercent() / 100 * layoutWidth;
-            var actualWidth = targetWidth - tsOptchain.oc(object.getMargin()).left(0) - tsOptchain.oc(object.getMargin()).right(0);
-            if (object.getType() === exports.ObjectType.VERTICAL_RULE)
-                return;
-            if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
-                actualWidth -= object.getBulletMargin();
-            if (object.getType() === exports.ObjectType.TEXT && object.isOrderedList())
-                actualWidth -= object.getOrderedListMargin();
-            object.setPosition({
-                width: actualWidth
-            });
-            object.updateDimensions();
-        });
-    };
-    StackObjectsLayoutFunction.prototype.adjustCanvasSize = function (canvas, requiredHeight) {
-        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var dimensions = canvas.getDimensions();
-        var minHeight = tsOptchain.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);
-        }
-        if (dimensions.height !== targetDimensions.height) {
-            canvas.setDimensions(targetDimensions);
-        }
-    };
-    StackObjectsLayoutFunction.prototype.getRows = function (objectsToLayout) {
-        var _this = this;
-        var result = { totalHeight: 0, rows: [] };
-        var currentWidth = 0;
-        var row = { objects: [], height: 1 };
-        _.each(objectsToLayout, function (object) {
-            var nextWidth = object.getColumnWidthPercent();
-            var objectHeight = _this.getObjectHeight(object);
-            if (currentWidth + nextWidth > 100) {
-                result.rows.push(row);
-                row = { objects: [], height: 1 };
-                currentWidth = 0;
-            }
-            row.objects.push(object);
-            if (object.getType() !== exports.ObjectType.VERTICAL_RULE)
-                row.height = Math.max(row.height, objectHeight);
-            currentWidth += nextWidth;
-        });
-        if (row.objects.length)
-            result.rows.push(row);
-        result.totalHeight = _.reduce(result.rows, function (x, y) { return x + y.height; }, 0);
-        return result;
-    };
-    StackObjectsLayoutFunction.prototype.getObjectHeight = function (element) {
-        return element.getBoundingBox().height
-            + tsOptchain.oc(element.getMargin()).top(0)
-            + tsOptchain.oc(element.getMargin()).bottom(0);
-    };
-    StackObjectsLayoutFunction.prototype.countSpaces = function (rows) {
-        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() === exports.ObjectType.HORIZONTAL_RULE;
-            var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
-            if (!thisRowIsHR && !nextRowIsHR) {
-                count++;
-            }
-        }
-        return count;
-    };
-    return StackObjectsLayoutFunction;
-}());
-
-var StandardLayoutManager = /** @class */ (function (_super) {
-    __extends(StandardLayoutManager, _super);
-    function StandardLayoutManager(canvas) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = exports.LayoutManager.STANDARD;
-        _this.isEnforcedPositioning = true;
-        _this.enterTextEditImmediatelyOnSelect = true;
-        _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;
-    }
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onInit = function () {
-        this.stackAndRedraw();
-    };
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onProfileChange = function (profile) {
-        this.canvas.setMultiSelect(false);
-        this.redrawAll.execute(this.canvas);
-    };
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-    };
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onTextChange = function () {
-        this.stackAndRedraw();
-    };
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onObjectListChange = function () {
-        this.stackAndRedraw();
-    };
-    /**
-     * @override
-     */
-    StandardLayoutManager.prototype.onMarginChange = function () {
-        this.stackAndRedraw();
-    };
-    StandardLayoutManager.prototype.stackAndRedraw = function () {
-        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);
-    };
-    return StandardLayoutManager;
-}(AbstractLayoutManager));
-
-function isMutableBackgroundColor(object) {
-    return "setBackgroundColor" in object;
-}
-
-function isMutableColor(object) {
-    return "setColor" in object;
-}
-
-function isMutableImage(object) {
-    return "setImageUrl" in object;
-}
-
-function isMutablePosition(object) {
-    return "centerHorizontally" in object;
-}
-
-function isMutableStroke(object) {
-    return "setStrokeColor" in object;
-}
-
-function isMutableTextStyle(object) {
-    return "getTextSelection" in object;
-}
-
-function isMutableText(object) {
-    return "setText" in object;
-}
-
-/**
- * Data for a persisted canvas object.
- */
-var CanvasObjectData = /** @class */ (function () {
-    function CanvasObjectData(type, id) {
-        this.id = id;
-        this.type = type;
-    }
-    return CanvasObjectData;
-}());
-
-var ROTATION_SNAP_ANGLE = 45;
-var AbstractCanvasObject = /** @class */ (function () {
-    /**
-     * Create a new instance.
-     * @param type Object type.
-     * @param canvas Interactive canvas that the field will be rendered on.
-     * @param fabricObject The fabric object to bind this field to.
-     * @param data Existing persisted field data to load from, if applicable.
-     */
-    function AbstractCanvasObject(type, canvas, fabricObject, data) {
-        var _this = this;
-        this.canvas = canvas;
-        this.fabricObject = fabricObject;
-        this.data = data ? data : new CanvasObjectData(type, this.fabricObject.id);
-        this.dimensions$ = new rxjs.BehaviorSubject(new FieldDimensions(this.fabricObject, this.canvas));
-        this.opacity$ = new rxjs.BehaviorSubject(this.fabricObject.opacity);
-        this.updatePinToBottomDistance();
-        this.canvas.getProfile$().subscribe(function (profile) { return _this.onProfileChange(profile); });
-        this.canvas.getLayoutManager$().subscribe(function (layoutManager) { return _this.onLayoutManagerChange(layoutManager); });
-        this.fabricObject.on("moving", function (e) { return _this.onMove(e); });
-        this.fabricObject.on("rotating", function (e) { return _this.onRotate(e); });
-        this.fabricObject.on("scaling", function (e) { return _this.onScale(e); });
-        this.fabricObject.on("scaled", function (e) { return _this.afterScale(e); });
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getId = function () {
-        return this.data.id;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getType = function () {
-        return this.data.type;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getDescription = function () {
-        switch (this.data.type) {
-            case exports.ObjectType.BORDER:
-                return "Border";
-            case exports.ObjectType.CUTOFF:
-                return "Bottom Border";
-            case exports.ObjectType.IMAGE:
-                return "Image";
-            case exports.ObjectType.LIBRARY_IMAGE:
-                return "Library Image";
-            case exports.ObjectType.RECTANGLE:
-                return "Rectangle";
-            case exports.ObjectType.TEXT:
-                return "Text";
-            default:
-                return "Field";
-        }
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setSortCaption = function (value) {
-        this.data.sortCaption = value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.isSortCaption = function () {
-        return this.data.sortCaption;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getDimensions = function () {
-        return this.dimensions$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getDimensions$ = function () {
-        return this.dimensions$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getOpacity = function () {
-        return this.opacity$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getOpacity$ = function () {
-        return this.opacity$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setOpacity = function (value) {
-        this.fabricObject.set({ opacity: value });
-        this.opacity$.next(value);
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getMargin = function () {
-        return this.data.margin || {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        };
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setMargin = function (margin) {
-        if (!margin)
-            return;
-        var newMargin = tsOptchain.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)
-            newMargin.right = margin.right || 0;
-        if (margin.bottom != undefined)
-            newMargin.bottom = margin.bottom || 0;
-        if (margin.left != undefined)
-            newMargin.left = margin.left || 0;
-        this.data.margin = newMargin;
-        this.canvas.notifyObjectListChanged();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.getColumnWidthPercent = function () {
-        return Math.max(Math.min(tsOptchain.oc(this.data).columnWidthPercent(100), 100), 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setColumnWidthPercent = function (percent) {
-        this.data.columnWidthPercent = percent;
-        this.canvas.notifyObjectListChanged();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.bringForward = function () {
-        this.fabricObject.bringForward();
-        this.canvas.syncObjectList();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.bringToFront = function () {
-        this.fabricObject.bringToFront();
-        this.canvas.syncObjectList();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.sendBackward = function () {
-        this.fabricObject.sendBackwards();
-        this.canvas.syncObjectList();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.sendToBack = function () {
-        this.fabricObject.sendToBack();
-        this.canvas.syncObjectList();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.moveUp = function () {
-        this.sendBackward();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.moveDown = function () {
-        this.bringForward();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.delete = function () {
-        this.canvas.removeObject(this);
-        this.onDelete();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.persist = function () {
-        return _.clone(this.data);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.isPinToBottom = function () {
-        return this.data.pinToBottom;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setPinToBottom = function (value) {
-        if (value === void 0) { value = true; }
-        this.updatePinToBottomDistance();
-        this.data.pinToBottom = value;
-        this.canvas.notifyObjectListChanged();
-        this.updateFabricObjectBehavior();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setLeft = function (left) {
-        this.setPosition({ left: left });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setTop = function (top) {
-        this.setPosition({ top: top });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setWidth = function (width) {
-        this.setPosition({ width: width });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setAngle = function (angle) {
-        this.setPosition({ angle: angle });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setScaleX = function (scale) {
-        this.setPosition({ scaleX: scale });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractCanvasObject.prototype.setScaleY = function (scale) {
-        this.setPosition({ scaleY: scale });
-    };
-    /**
-     * Get the underlying fabric object.
-     * (Internal use only, do not expose this outside the canvas module).
-     */
-    AbstractCanvasObject.prototype.getFabricObjectInternal = function () {
-        return this.fabricObject;
-    };
-    AbstractCanvasObject.prototype.setPosition = function (position) {
-        var scale = this.getDimensions().scale;
-        if (position.top != undefined)
-            this.fabricObject.set({ top: position.top });
-        if (position.left != undefined)
-            this.fabricObject.set({ left: position.left });
-        if (position.width != undefined)
-            this.fabricObject.set({ width: position.width / scale.x });
-        if (position.height != undefined)
-            this.fabricObject.set({ height: position.height / scale.y });
-        if (position.angle != undefined)
-            this.fabricObject.set({ angle: position.angle });
-        if (position.scaleX != undefined)
-            this.fabricObject.set({ scaleX: position.scaleX });
-        if (position.scaleY != undefined)
-            this.fabricObject.set({ scaleY: position.scaleY });
-        this.setCoords();
-        this.redraw();
-    };
-    AbstractCanvasObject.prototype.setCoords = function () {
-        this.fabricObject.setCoords();
-    };
-    AbstractCanvasObject.prototype.updateDimensions = function () {
-        this.setCoords();
-        var dimensions = new FieldDimensions(this.fabricObject, this.canvas);
-        this.dimensions$.next(dimensions);
-    };
-    AbstractCanvasObject.prototype.getBoundingBox = function () {
-        var absolute = true;
-        var calculate = true;
-        return this.fabricObject.getBoundingRect(absolute, calculate);
-    };
-    AbstractCanvasObject.prototype.moveToPinnedPosition = function () {
-        if (this.data.pinToBottom) {
-            this.setPosition({
-                top: this.canvas.getDimensions().heightPx - this.pinToBottomDistance
-            });
-        }
-    };
-    AbstractCanvasObject.prototype.updatePinToBottomDistance = function () {
-        this.pinToBottomDistance = this.canvas.getDimensions().heightPx - this.getDimensions().top.px;
-    };
-    AbstractCanvasObject.prototype.redraw = function () {
-        this.canvas.redraw();
-    };
-    // noinspection JSUnusedLocalSymbols
-    AbstractCanvasObject.prototype.onProfileChange = function (profile) {
-        this.updateFabricObjectBehavior();
-        this.redraw();
-    };
-    // noinspection JSUnusedLocalSymbols
-    AbstractCanvasObject.prototype.onLayoutManagerChange = function (layoutManager) {
-        this.updateFabricObjectBehavior();
-        this.redraw();
-    };
-    // noinspection JSUnusedLocalSymbols
-    AbstractCanvasObject.prototype.onMove = function (event) {
-        if (!this.canvas.getProfile().allowObjectsToLeaveCanvas) {
-            this.preventLeavingCanvas();
-        }
-        this.updateDimensions();
-    };
-    AbstractCanvasObject.prototype.onRotate = function (event) {
-        if (event.e.shiftKey) {
-            this.fabricObject.set({ snapAngle: 0 });
-        }
-        else {
-            this.fabricObject.set({ snapAngle: ROTATION_SNAP_ANGLE });
-        }
-        this.updateDimensions();
-    };
-    // noinspection JSUnusedLocalSymbols
-    AbstractCanvasObject.prototype.onScale = function (event) {
-        this.updateDimensions();
-    };
-    // noinspection JSUnusedLocalSymbols
-    AbstractCanvasObject.prototype.afterScale = function (event) {
-        this.updateDimensions();
-    };
-    AbstractCanvasObject.prototype.onDelete = function () {
-        //no-op
-    };
-    AbstractCanvasObject.prototype.preventLeavingCanvas = function () {
-        var overflow = this.getCanvasOverflow();
-        if (overflow.hasOverflow) {
-            var adjustX = overflow.left || -overflow.right;
-            var adjustY = overflow.top || -overflow.bottom;
-            this.fabricObject.set({
-                top: this.fabricObject.top + adjustY,
-                left: this.fabricObject.left + adjustX
-            });
-            this.redraw();
-        }
-    };
-    AbstractCanvasObject.prototype.getCanvasOverflow = function () {
-        var bound = this.getBoundingBox();
-        var canvasDimensions = this.canvas.getDimensions();
-        var top = Math.max(0, 0 - bound.top);
-        var right = Math.max(0, bound.left + bound.width - canvasDimensions.widthPx);
-        var bottom = Math.max(0, bound.top + bound.height - canvasDimensions.heightPx);
-        var left = Math.max(0, 0 - bound.left);
-        return {
-            top: top,
-            right: right,
-            bottom: bottom,
-            left: left,
-            hasOverflow: top > 0 || right > 0 || bottom > 0 || left > 0
-        };
-    };
-    AbstractCanvasObject.prototype.centerHorizontallyInternal = function () {
-        var canvasWidth = this.canvas.getDimensions().widthPx;
-        var objectWidth = this.getDimensions().width.px;
-        this.fabricObject.set({ left: ((canvasWidth - objectWidth) / 2) - 0.5 });
-        this.updateDimensions();
-        this.redraw();
-    };
-    AbstractCanvasObject.prototype.centerVerticallyInternal = function () {
-        var canvasHeight = this.canvas.getDimensions().heightPx;
-        var objectHeight = this.getDimensions().height.px;
-        this.fabricObject.set({ top: ((canvasHeight - objectHeight) / 2) - 0.5 });
-        this.redraw();
-        this.updateDimensions();
-    };
-    AbstractCanvasObject.prototype.nudgeInternal = function (x, y) {
-        if (x === void 0) { x = 0; }
-        if (y === void 0) { y = 0; }
-        this.fabricObject.set({
-            top: this.getDimensions().top.px + y,
-            left: this.getDimensions().left.px + x
-        });
-        this.redraw();
-        this.updateDimensions();
-    };
-    AbstractCanvasObject.prototype.updateFabricObjectBehavior = function () {
-        var allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
-        var profile = this.canvas.getProfile();
-        var options = {
-            allowMove: allowManualPositioning && profile.allowMove && !this.isPinToBottom(),
-            allowRotate: allowManualPositioning && profile.allowRotate && !this.isPinToBottom(),
-            allowScale: allowManualPositioning && profile.allowScale && !this.isPinToBottom()
-        };
-        this.fabricObject.set({
-            lockMovementX: !options.allowMove,
-            lockMovementY: !options.allowMove,
-            lockScalingX: !options.allowScale,
-            lockScalingY: !options.allowScale,
-            lockScalingFlip: true,
-            lockRotation: !options.allowRotate
-        });
-        this.fabricObject.setControlsVisibility({
-            tl: options.allowScale,
-            tr: options.allowScale,
-            br: options.allowScale,
-            bl: options.allowScale,
-            ml: options.allowScale,
-            mt: options.allowScale,
-            mr: options.allowScale,
-            mb: options.allowScale,
-            mtr: options.allowRotate
-        });
-    };
-    return AbstractCanvasObject;
-}());
-var FieldDimensions = /** @class */ (function () {
-    function FieldDimensions(fabricObject, canvas) {
-        var widthPxToMmFunction = canvas.getDimensions().widthPxToMm;
-        var heightPxToMmFunction = canvas.getDimensions().heightPxToMm;
-        this.top = { px: fabricObject.top, mm: heightPxToMmFunction(fabricObject.top) };
-        this.left = { px: fabricObject.left, mm: widthPxToMmFunction(fabricObject.left) };
-        var widthPx = fabricObject.width * fabricObject.scaleX;
-        var heightPx = fabricObject.height * fabricObject.scaleY;
-        this.width = { px: widthPx, mm: widthPxToMmFunction(widthPx) };
-        this.height = { px: heightPx, mm: heightPxToMmFunction(heightPx) };
-        this.scale = { x: fabricObject.scaleX, y: fabricObject.scaleY };
-        this.angle = fabricObject.angle;
-    }
-    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) {
-        var _this = _super.call(this, exports.ObjectType.BORDER, canvas, fabricObject, persistedField) || this;
-        _this.strokeWidth$ = new rxjs.BehaviorSubject(0);
-        _this.canvas = canvas;
-        _this.strokeWidth$.next(_this.fabricObject.strokeWidth);
-        _this.fabricObject.set({ "fill": null });
-        _this.updatePosition();
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.prototype.getColor = function () {
-        return this.fabricObject.stroke;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.prototype.setColor = function (color) {
-        this.fabricObject.set({ stroke: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.prototype.getStrokeWidth = function () {
-        return this.fabricObject.strokeWidth;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.prototype.getStrokeWidth$ = function () {
-        return this.strokeWidth$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.prototype.setStrokeWidth = function (width) {
-        this.strokeWidth$.next(width);
-        this.data.strokeWidth = width;
-        this.updatePosition();
-        this.canvas.notifyMarginChanged();
-        this.redraw();
-    };
-    Border.prototype.getPadding = function () {
-        return this.data.padding || {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        };
-    };
-    Border.prototype.setPadding = function (padding) {
-        if (!padding)
-            return;
-        this.data.padding = {
-            top: padding.top || 0,
-            right: padding.right || 0,
-            bottom: padding.bottom || 0,
-            left: padding.left || 0
-        };
-        this.canvas.notifyMarginChanged();
-        this.redraw();
-    };
-    Border.prototype.updatePosition = function () {
-        this.fabricObject.set({
-            strokeWidth: this.strokeWidth$.value,
-            top: 0,
-            left: 0,
-            width: this.canvas.getDimensions().widthPx - this.strokeWidth$.value,
-            height: this.canvas.getDimensions().heightPx - this.strokeWidth$.value
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Border.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();
-    };
-    return Border;
-}(AbstractCanvasObject));
-
-var Cutoff = /** @class */ (function (_super) {
-    __extends(Cutoff, _super);
-    function Cutoff(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, exports.ObjectType.CUTOFF, canvas, fabricObject, persistedField) || this;
-        _this.strokeWidth$ = new rxjs.BehaviorSubject(0);
-        _this.canvas = canvas;
-        _this.strokeWidth$.next(_this.fabricObject.height);
-        _this.updatePosition();
-        _this.fabricObject.set({ strokeWidth: 0 });
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.getColor = function () {
-        return this.fabricObject.fill;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color, stroke: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.getStrokeWidth = function () {
-        // noinspection JSSuspiciousNameCombination
-        return this.fabricObject.height;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.getStrokeWidth$ = function () {
-        return this.strokeWidth$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.setStrokeWidth = function (width) {
-        this.strokeWidth$.next(width);
-        this.data.strokeWidth = width;
-        this.updatePosition();
-        this.canvas.notifyMarginChanged();
-        this.redraw();
-    };
-    Cutoff.prototype.updatePosition = function () {
-        this.fabricObject.set({
-            top: this.canvas.getDimensions().heightPx - this.strokeWidth$.value,
-            left: 0,
-            width: this.canvas.getDimensions().widthPx,
-            height: this.strokeWidth$.value
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Cutoff.prototype.updateFabricObjectBehavior = function () {
-        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();
-    };
-    return Cutoff;
-}(AbstractCanvasObject));
-
-var HorizontalRule = /** @class */ (function (_super) {
-    __extends(HorizontalRule, _super);
-    function HorizontalRule(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, exports.ObjectType.HORIZONTAL_RULE, canvas, fabricObject, persistedField) || this;
-        _this.strokeWidth$ = new rxjs.BehaviorSubject(2);
-        _this.canvas = canvas;
-        _this.strokeWidth$.next(_this.getDimensions().height.px);
-        _this.fabricObject.set({ strokeWidth: 0 });
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.getStrokeWidth = function () {
-        // noinspection JSSuspiciousNameCombination
-        return this.fabricObject.height;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.getStrokeWidth$ = function () {
-        return this.strokeWidth$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.setStrokeWidth = function (value) {
-        this.strokeWidth$.next(value);
-        this.data.strokeWidth = value;
-        this.setPosition({ height: value });
-        this.canvas.notifyObjectListChanged();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.getColor = function () {
-        return this.fabricObject.fill;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color, stroke: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.centerHorizontally = function () {
-        _super.prototype.centerHorizontallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.centerVertically = function () {
-        _super.prototype.centerVerticallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.nudgeUp = function () {
-        _super.prototype.nudgeInternal.call(this, 0, -1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.nudgeDown = function () {
-        _super.prototype.nudgeInternal.call(this, 0, +1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.nudgeLeft = function () {
-        _super.prototype.nudgeInternal.call(this, -1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.nudgeRight = function () {
-        _super.prototype.nudgeInternal.call(this, +1, 0);
-    };
-    return HorizontalRule;
-}(AbstractCanvasObject));
-
-var Image = /** @class */ (function (_super) {
-    __extends(Image, _super);
-    function Image(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, exports.ObjectType.IMAGE, canvas, fabricObject, persistedField) || this;
-        _this.DEFAULT_RESTRICTIONS = {
-            minWidth: 1,
-            minHeight: 1
-        };
-        _this.canvas = canvas;
-        _this.imageUrl$ = new rxjs.BehaviorSubject(_this.fabricObject.getSrc());
-        _this.data.imagePath = _this.imageUrl$.value;
-        _this.layoutWidth = _this.getBoundingBox().width;
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.getImageUrl = function () {
-        return this.imageUrl$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.getImageUrl$ = function () {
-        return this.imageUrl$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.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
-     */
-    Image.prototype.setImageWidth = function (px, sizeRestrictions) {
-        if (sizeRestrictions === void 0) { sizeRestrictions = this.DEFAULT_RESTRICTIONS; }
-        var minWidth = Math.max(sizeRestrictions.minWidth, this.getMinWidthBasedOnMinHeight(sizeRestrictions.minHeight));
-        var maxWidth = Math.min(sizeRestrictions.maxWidth, this.getMaxWidthBasedOnMaxHeight(sizeRestrictions.maxHeight));
-        if (px < minWidth) {
-            px = minWidth;
-        }
-        else if (px > maxWidth) {
-            px = maxWidth;
-        }
-        var premultipliedWidth = this.fabricObject.width;
-        var newScale = (premultipliedWidth > 0) ? px / premultipliedWidth : 1;
-        this.fabricObject.set({ scaleX: newScale, scaleY: newScale });
-        this.setCoords();
-        this.canvas.notifyObjectListChanged();
-        return px;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.centerHorizontally = function () {
-        _super.prototype.centerHorizontallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.centerVertically = function () {
-        _super.prototype.centerVerticallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.nudgeUp = function () {
-        _super.prototype.nudgeInternal.call(this, 0, -1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.nudgeDown = function () {
-        _super.prototype.nudgeInternal.call(this, 0, +1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.nudgeLeft = function () {
-        _super.prototype.nudgeInternal.call(this, -1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.nudgeRight = function () {
-        _super.prototype.nudgeInternal.call(this, +1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.setPosition = function (position) {
-        if (this.canvas.getLayoutManager().isEnforcedPositioning) {
-            if (position.top != undefined)
-                this.fabricObject.set({ top: position.top });
-            if (position.width != undefined) {
-                this.layoutWidth = position.width;
-            }
-            if (position.height != undefined) {
-                var premultipliedHeight = this.fabricObject.height;
-                var newScale = position.height / premultipliedHeight;
-                this.fabricObject.set({ scaleX: newScale, scaleY: newScale });
-                this.setCoords();
-            }
-            if (position.left != undefined || position.width != undefined || position.height != undefined) {
-                this.centerHorizontallyInLayoutWidth(position.left || 0);
-            }
-        }
-        else {
-            _super.prototype.setPosition.call(this, position);
-        }
-    };
-    Image.prototype.centerHorizontallyInLayoutWidth = function (left) {
-        var imageWidth = this.getBoundingBox().width;
-        this.fabricObject.set({ left: left + (this.layoutWidth / 2) - (imageWidth / 2) });
-    };
-    Image.prototype.setCanvasImage = function (url) {
-        return __awaiter(this, void 0, void 0, function () {
-            var imageOptions, maxSizeScale, maxWidth;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        imageOptions = { crossOrigin: "anonymous" };
-                        maxSizeScale = 2;
-                        maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
-                        return [4 /*yield*/, new Promise(function (resolve) {
-                                _this.fabricObject.setSrc(url, function (img) {
-                                    var newScale = 1;
-                                    var curWidth = newScale * img.width;
-                                    if (curWidth > maxWidth) {
-                                        newScale = maxWidth / curWidth;
-                                    }
-                                    img.set({
-                                        scaleX: newScale,
-                                        scaleY: newScale
-                                    });
-                                    img.setCoords();
-                                    _this.redraw();
-                                    resolve();
-                                }, imageOptions);
-                            })];
-                    case 1: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    };
-    Image.prototype.getMinWidthBasedOnMinHeight = function (minHeight) {
-        if (!minHeight) {
-            return 0;
-        }
-        var premultipliedHeight = this.fabricObject.height;
-        var newScale = minHeight / premultipliedHeight;
-        return this.getBoundingBox().width * newScale;
-    };
-    Image.prototype.getMaxWidthBasedOnMaxHeight = function (maxHeight) {
-        if (!maxHeight) {
-            return Infinity;
-        }
-        var premultipliedHeight = this.fabricObject.height;
-        var newScale = maxHeight / premultipliedHeight;
-        return this.getBoundingBox().width * newScale;
-    };
-    return Image;
-}(AbstractCanvasObject));
-
-var Rectangle = /** @class */ (function (_super) {
-    __extends(Rectangle, _super);
-    function Rectangle(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, exports.ObjectType.RECTANGLE, canvas, fabricObject, persistedField) || this;
-        _this.canvas = canvas;
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.getColor = function () {
-        return this.fabricObject.fill;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.getStrokeColor = function () {
-        return this.fabricObject.stroke;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.setStrokeColor = function (color) {
-        this.fabricObject.set({ stroke: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.getStrokeWidth = function () {
-        return this.fabricObject.strokeWidth;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.setStrokeWidth = function (width) {
-        this.fabricObject.set({ strokeWidth: width });
-        this.data.strokeWidth = width;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.centerHorizontally = function () {
-        _super.prototype.centerHorizontallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.centerVertically = function () {
-        _super.prototype.centerVerticallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.nudgeUp = function () {
-        _super.prototype.nudgeInternal.call(this, 0, -1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.nudgeDown = function () {
-        _super.prototype.nudgeInternal.call(this, 0, +1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.nudgeLeft = function () {
-        _super.prototype.nudgeInternal.call(this, -1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.nudgeRight = function () {
-        _super.prototype.nudgeInternal.call(this, +1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.afterScale = function (event) {
-        this.updateDimensions();
-        var _a = this.getDimensions(), width = _a.width, height = _a.height;
-        this.fabricObject.set({ scaleX: 1, scaleY: 1, width: width.px, height: height.px });
-        this.updateDimensions();
-    };
-    return Rectangle;
-}(AbstractCanvasObject));
-
-var RichText = /** @class */ (function (_super) {
-    __extends(RichText, _super);
-    function RichText(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, canvas, fabricObject, persistedField) || this;
-        _this.data.type = exports.ObjectType.RICH_TEXT;
-        return _this;
-    }
-    Object.defineProperty(RichText.prototype, "htmlContent", {
-        /**
-         * @override
-         * @inheritDoc
-         */
-        get: function () {
-            return this.data.userText;
-        },
-        /**
-         * @override
-         * @inheritDoc
-         */
-        set: function (text) {
-            this.data.userText = text;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @override
-     * @inheritDoc
-     */
-    RichText.prototype.setRichTextContent = function (renderedContentUrl, htmlContent) {
-        return __awaiter(this, void 0, void 0, function () {
-            var canvasWidthPx;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        canvasWidthPx = this.canvas.getDimensions().widthPx;
-                        if (!renderedContentUrl)
-                            return [2 /*return*/];
-                        this.htmlContent = htmlContent;
-                        return [4 /*yield*/, this.setImageUrl(renderedContentUrl)];
-                    case 1:
-                        _a.sent();
-                        this.setImageWidth(canvasWidthPx);
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    return RichText;
-}(Image));
-
-var Text = /** @class */ (function (_super) {
-    __extends(Text, _super);
-    function Text(canvas, fabricObject, persistedField) {
-        var _this_1 = _super.call(this, exports.ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
-        _this_1.canvas = canvas;
-        _this_1.fontLibrary = canvas.getFontLibrary();
-        _this_1.baseComponentHeight = _this_1.fabricObject.height;
-        _this_1.text$ = new rxjs.BehaviorSubject(_this_1.fabricObject.text);
-        _this_1.data.userText = _this_1.fabricObject.text;
-        _this_1.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(_this_1.fabricObject, _this_1.fontLibrary));
-        _this_1.fabricObject.set({ strokeWidth: 0 });
-        _this_1.fabricObject.on("changed", function () { return _this_1.onTextChange(); });
-        _this_1.fabricObject.on("selection:changed", function () { return _this_1.onSelectionChange(); });
-        _this_1.applyBulletListMonkeyPatches();
-        return _this_1;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getText = function () {
-        return this.text$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getText$ = function () {
-        return this.text$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setText = function (text) {
-        var style = this.fabricObject.getStyleAtPosition(0, true);
-        this.fabricObject.set({ text: text });
-        this.data.userText = this.fabricObject.text;
-        this.text$.next(text);
-        this.fabricObject.setSelectionStyles(style, 0, text.length);
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.replaceText = function (target, replacement) {
-        var start = this.getText().indexOf(target);
-        this.fabricObject.insertChars(replacement, null, start, start + target.length);
-        this.redraw();
-        this.data.userText = this.fabricObject.text;
-        this.text$.next(this.fabricObject.text);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.insertText = function (text, style, start, end) {
-        this.fabricObject.insertChars(text, style, start, end);
-        var newCursorLocation = start + text.length;
-        this.fabricObject.selectionStart = newCursorLocation;
-        this.fabricObject.selectionEnd = newCursorLocation;
-        this.redraw();
-        this.data.userText = this.fabricObject.text;
-        this.text$.next(this.fabricObject.text);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.insertTextAtSelection = function (text, style) {
-        var selection = this.getTextSelection();
-        this.insertText(text, style, selection.start, selection.end);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getColor = function () {
-        return this.textSelection$.value.fill;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setColor = function (color) {
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fill: color });
-        }
-        else {
-            this.fabricObject.set({ fill: color });
-        }
-        this.data.color = color;
-        this.updateTextSelection();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getTextSelection = function () {
-        return this.textSelection$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getTextSelection$ = function () {
-        return this.textSelection$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setTextAlign = function (alignment) {
-        this.fabricObject.set({ textAlign: alignment });
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setCharSpacing = function (spacing) {
-        this.fabricObject.set({ charSpacing: spacing });
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setLineHeight = function (height) {
-        this.fabricObject.set({ lineHeight: height });
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setBold = function (bold) {
-        if (bold === void 0) { bold = true; }
-        if (this.hasTextSelection()) {
-            var start = this.textSelection$.value.start;
-            for (var i = 0; i < this.textSelection$.value.length; i++) {
-                var style = this.fabricObject.getStyleAtPosition(start + i, true);
-                var font = this.fontLibrary.getFont(style.fontFamily);
-                var fontWeight = bold ? font.boldWeight : font.normalWeight;
-                this.fabricObject.setSelectionStyles({ fontWeight: fontWeight }, start + i, start + i + 1);
-            }
-        }
-        else {
-            var font = this.fontLibrary.getFont(this.fabricObject.fontFamily);
-            var fontWeight = bold ? font.boldWeight : font.normalWeight;
-            this.fabricObject.set({ fontWeight: fontWeight });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setBoldRegion = function (start, end, bold) {
-        if (bold === void 0) { bold = true; }
-        if (start > 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);
-            style.fontWeight = bold ? font.boldWeight : font.normalWeight;
-            this.fabricObject.setSelectionStyles(style, i, i + 1);
-        }
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setItalic = function (italic) {
-        if (italic === void 0) { italic = true; }
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fontStyle: italic ? "italic" : "" });
-        }
-        else {
-            this.fabricObject.set({ fontStyle: italic ? "italic" : "" });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setItalicRegion = function (start, end, italic) {
-        if (italic === void 0) { italic = true; }
-        if (start > end)
-            throw Error("Bad region specified: [" + start + " - " + end + "]");
-        this.fabricObject.setSelectionStyles({ fontStyle: italic ? "italic" : "" }, start, end);
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setStrikethrough = function (strikethrough) {
-        if (strikethrough === void 0) { strikethrough = true; }
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ linethrough: strikethrough });
-        }
-        else {
-            this.fabricObject.set({ linethrough: strikethrough });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setUnderline = function (underline) {
-        if (underline === void 0) { underline = true; }
-        this.fabricObject.setSelectionStyles({ underline: underline });
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setFont = function (font) {
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fontFamily: font.family, fontWeight: font.normalWeight });
-        }
-        else {
-            this.fabricObject.set({ fontFamily: font.family, fontWeight: font.normalWeight });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setFontSize = function (fontSize) {
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fontSize: fontSize });
-        }
-        else {
-            this.fabricObject.set({ fontSize: fontSize });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setTextBackgroundColor = function (color) {
-        if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ textBackgroundColor: color });
-        }
-        else {
-            this.fabricObject.set({ textBackgroundColor: color });
-        }
-        this.redraw();
-        this.updateTextSelection();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.centerHorizontally = function () {
-        _super.prototype.centerHorizontallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.centerVertically = function () {
-        _super.prototype.centerVerticallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.nudgeUp = function () {
-        _super.prototype.nudgeInternal.call(this, 0, -1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.nudgeDown = function () {
-        _super.prototype.nudgeInternal.call(this, 0, +1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.nudgeLeft = function () {
-        _super.prototype.nudgeInternal.call(this, -1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.nudgeRight = function () {
-        _super.prototype.nudgeInternal.call(this, +1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getBackgroundColor = function () {
-        return this.fabricObject.backgroundColor;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setBackgroundColor = function (color) {
-        this.fabricObject.set({ backgroundColor: color });
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setPrefillType = function (prefillType) {
-        this.data.prefillType = prefillType;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getPrefillType = function () {
-        return this.data.prefillType;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getBulletMargin = function () {
-        var _this_1 = this;
-        if (!this.isBulleted())
-            return 0;
-        var fontSize = 0;
-        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
-            fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
-        });
-        return fontSize * 0.6;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getOrderedListMargin = function () {
-        if (!this.isOrderedList())
-            return 0;
-        var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        var max = _(orderedListMarkerEntities)
-            .filter(function (x) { return !!x; })
-            .map(function (x) { return x.getBoundingRect(true, true).width; })
-            .max();
-        return (max * 1.2) || 0;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.isResizeCanvas = function () {
-        return this.data.resizeCanvas;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setResizeCanvas = function (value) {
-        this.baseComponentHeight = this.fabricObject.height;
-        this.data.resizeCanvas = value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.focus = function () {
-        this.fabricObject.hiddenTextarea.focus();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.isEditing = function () {
-        return this.fabricObject.isEditing;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.enterEditing = function () {
-        if (!this.isEditing()) {
-            this.fabricObject.enterEditing();
-            this.focus();
-            this.selectAllText();
-            this.redraw();
-        }
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.selectAllText = function () {
-        this.fabricObject.selectAll();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.isBulleted = function () {
-        return this.data.bulleted || false;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.enableBullets = function () {
-        this.disableOrderedList();
-        this.fabricObject["objectCaching"] = false;
-        this.fabricObject["_bullets"] = this.fabricObject["_bullets"] || {};
-        this.data.bulleted = true;
-        this.notifyCanvasOfTextChanges();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.disableBullets = function () {
-        this.removeBullets();
-        this.data.bulleted = false;
-        this.notifyCanvasOfTextChanges();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.isOrderedList = function () {
-        return this.fabricObject._isOrderedList || false;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.enableOrderedList = function () {
-        this.disableBullets();
-        this.fabricObject.objectCaching = false;
-        this.fabricObject._isOrderedList = true;
-        this.notifyCanvasOfTextChanges();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.disableOrderedList = function () {
-        this.removeOrderedListMarkers();
-        delete this.fabricObject._isOrderedList;
-        this.notifyCanvasOfTextChanges();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setOrderedListStart = function (start) {
-        this.fabricObject._orderedListStart = start;
-        this.notifyCanvasOfTextChanges();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.getOrderedListStart = function () {
-        return this.fabricObject._orderedListStart || 1;
-    };
-    Text.prototype.getSizeIncreaseSinceCreation = function () {
-        return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
-    };
-    Text.prototype.removeBullets = function () {
-        var _this_1 = this;
-        if (this.data.bulleted) {
-            var bullets = this.fabricObject["_bullets"];
-            delete this.fabricObject["_bullets"];
-            _.each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
-            this.fabricObject["objectCaching"] = true;
-        }
-    };
-    Text.prototype.removeOrderedListMarkers = function () {
-        var _this_1 = this;
-        if (this.fabricObject._isOrderedList) {
-            var markerEntities = this.fabricObject._orderedListMarkerEntities;
-            delete this.fabricObject._orderedListMarkerEntities;
-            _.each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
-            this.fabricObject["objectCaching"] = true;
-        }
-    };
-    Text.prototype.applyBulletListMonkeyPatches = function () {
-        var _this = this;
-        if (this.data.bulleted)
-            this.enableBullets();
-        if (this.fabricObject._isOrderedList)
-            this.enableOrderedList();
-        var originalRender = this.fabricObject["_render"];
-        var fabric = this.canvas.fabric;
-        this.fabricObject["_render"] = function (ctx) {
-            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) {
-                    if (textLine.length) {
-                        // Start of real lines will have offset 0 in styleMap
-                        var styleMap = fabricText._styleMap[lineIndex];
-                        if (styleMap.offset === 0) {
-                            if (currentBullets_1[lineIndex]) {
-                                // Reuse existing bullet for this line
-                                activeBullets_1[lineIndex] = currentBullets_1[lineIndex];
-                            }
-                            else {
-                                // Create new bullet for this line
-                                var options = {
-                                    left: 0,
-                                    top: 0,
-                                    radius: 2,
-                                    fill: fabricText.fill,
-                                    scaleX: fabricText.scaleX,
-                                    scaleY: fabricText.scaleY,
-                                    strokeWidth: 0,
-                                    lockMovementX: true,
-                                    lockMovementY: true,
-                                    hasControls: false,
-                                    selectable: false,
-                                    excludeFromJson: true
-                                };
-                                activeBullets_1[lineIndex] = new fabric.Circle(options);
-                            }
-                        }
-                    }
-                });
-                // Add/Remove bullets from canvas
-                var canvas_1 = fabricText.canvas;
-                var canvasDirty_1 = false;
-                canvas_1.renderOnAddRemove = false;
-                _.each(activeBullets_1, function (bullet) {
-                    if (!canvas_1.contains(bullet)) {
-                        canvas_1.add(bullet);
-                        canvasDirty_1 = true;
-                    }
-                });
-                _.each(currentBullets_1, function (bullet, key) {
-                    if (!activeBullets_1[key]) {
-                        canvas_1.remove(bullet);
-                        canvasDirty_1 = true;
-                    }
-                });
-                canvas_1.renderOnAddRemove = true;
-                fabricText["_bullets"] = activeBullets_1;
-                if (canvasDirty_1) {
-                    // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
-                    setTimeout(canvas_1.renderAll.bind(canvas_1));
-                }
-            }
-            if (fabricText._isOrderedList) {
-                var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
-                var activeMarkers_1 = [];
-                _.each(fabricText._textLines, function (textLine, lineIndex) {
-                    if (textLine.length) {
-                        // Start of real lines will have offset 0 in styleMap
-                        var styleMap = fabricText._styleMap[lineIndex];
-                        if (styleMap.offset === 0) {
-                            if (existingMarkers_1[lineIndex]) {
-                                // Reuse existing marker for this line
-                                activeMarkers_1[lineIndex] = existingMarkers_1[lineIndex];
-                            }
-                            else {
-                                // Create new marker for this line
-                                var textbox = new fabric.Textbox(lineIndex + ".", {
-                                    left: 0,
-                                    top: 0,
-                                    fill: fabricText.fill,
-                                    scaleX: fabricText.scaleX,
-                                    scaleY: fabricText.scaleY,
-                                    strokeWidth: 0,
-                                    lockMovementX: true,
-                                    lockMovementY: true,
-                                    hasControls: false,
-                                    selectable: false
-                                });
-                                textbox._isSlaveObject = true;
-                                activeMarkers_1[lineIndex] = textbox;
-                            }
-                        }
-                    }
-                });
-                // Add/Remove markers from canvas
-                var canvas_2 = fabricText.canvas;
-                var canvasDirty_2 = false;
-                canvas_2.renderOnAddRemove = false;
-                _.each(activeMarkers_1, function (marker) {
-                    if (!marker)
-                        return;
-                    if (!canvas_2.contains(marker)) {
-                        canvas_2.add(marker);
-                        canvasDirty_2 = true;
-                    }
-                });
-                _.each(existingMarkers_1, function (marker, key) {
-                    if (!marker)
-                        return;
-                    if (!activeMarkers_1[key]) {
-                        canvas_2.remove(marker);
-                        canvasDirty_2 = true;
-                    }
-                });
-                canvas_2.renderOnAddRemove = true;
-                fabricText._orderedListMarkerEntities = activeMarkers_1;
-                if (canvasDirty_2) {
-                    // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
-                    setTimeout(canvas_2.renderAll.bind(canvas_2));
-                }
-            }
-            originalRender.apply(fabricText, [ctx]);
-        };
-        var originalRenderTextLine = this.fabricObject["_renderTextLine"];
-        this.fabricObject["_renderTextLine"] = function (method, ctx, line, left, top, lineIndex) {
-            var fabricText = this;
-            var bullets = fabricText._bullets;
-            if (bullets && bullets[lineIndex]) {
-                var bullet = bullets[lineIndex];
-                var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
-                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
-                var radius = fontSize / 5;
-                var angle = fabricText.angle;
-                var theta = angle * Math.PI / 180;
-                var x = -radius * 2;
-                var y = (fabricText.height / 2) + top - (fontSize / 1.5);
-                var xOffset = (x * Math.cos(theta)) - (y * Math.sin(theta));
-                var yOffset = (x * Math.sin(theta)) + (y * Math.cos(theta));
-                var bulletCenterOffset = [-radius * Math.sqrt(2) / 2, -radius * Math.sqrt(2) / 2];
-                bullet.set({
-                    radius: radius,
-                    fill: color,
-                    left: fabricText.left + xOffset + bulletCenterOffset[0],
-                    top: fabricText.top + yOffset + bulletCenterOffset[1]
-                });
-            }
-            var orderedListMarkerEntities = fabricText._orderedListMarkerEntities;
-            var xShift = -_this.getOrderedListMargin() + 1;
-            if (orderedListMarkerEntities && orderedListMarkerEntities[lineIndex]) {
-                var entry = orderedListMarkerEntities[lineIndex];
-                var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
-                var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
-                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
-                var angle = fabricText.angle;
-                var theta = angle * Math.PI / 180;
-                var yShift = (fabricText.height / 2) + top - fontSize - 1;
-                var xOffset = (xShift * Math.cos(theta)) - (yShift * Math.sin(theta));
-                var yOffset = (xShift * Math.sin(theta)) + (yShift * Math.cos(theta));
-                var lineNumber = _this.getOrderedListStart();
-                for (var i = 0; i < lineIndex; i++) {
-                    if (orderedListMarkerEntities[i])
-                        lineNumber++;
-                }
-                entry.set({
-                    width: 1,
-                    fontSize: fontSize,
-                    fontFamily: fontFamily,
-                    fill: color,
-                    left: fabricText.left + xOffset,
-                    top: fabricText.top + yOffset,
-                    angle: fabricText.angle,
-                    text: lineNumber + "."
-                });
-            }
-            originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
-        };
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.updateFabricObjectBehavior = function () {
-        _super.prototype.updateFabricObjectBehavior.call(this);
-        var profile = this.canvas.getProfile();
-        var allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
-        this.fabricObject.set({
-            lockScalingY: true,
-            lockScalingX: this.isPinToBottom(),
-            lockScalingFlip: true
-        });
-        this.fabricObject.setControlsVisibility({
-            tl: false,
-            tr: false,
-            br: false,
-            bl: false,
-            ml: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mt: false,
-            mr: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mb: false
-        });
-        this.redraw();
-    };
-    Text.prototype.onTextChange = function () {
-        this.data.userText = this.fabricObject.text;
-        this.text$.next(this.fabricObject.text);
-        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
-            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
-            this.redraw();
-        }
-    };
-    Text.prototype.onDelete = function () {
-        this.removeBullets();
-    };
-    Text.prototype.onSelectionChange = function () {
-        this.updateTextSelection();
-    };
-    Text.prototype.hasTextSelection = function () {
-        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();
-    };
-    Text.prototype.notifyCanvasOfTextChanges = function () {
-        this.canvas.notifyTextChanged();
-    };
-    return Text;
-}(AbstractCanvasObject));
-var TextSelection = /** @class */ (function () {
-    function TextSelection(fabricObject, fontLibrary) {
-        this.fabricObject = fabricObject;
-        this.fontLibrary = fontLibrary;
-        this.start = this.fabricObject.selectionStart;
-        this.end = this.fabricObject.selectionEnd;
-        this.length = this.end - this.start;
-        var cursorLoc = this.fabricObject.get2DCursorLocation();
-        this.lineIndex = cursorLoc.lineIndex;
-        this.charIndex = cursorLoc.charIndex;
-        var style = this.fabricObject.getCompleteStyleDeclaration(this.lineIndex, this.charIndex);
-        var hasSelection = this.length > 0;
-        this.font = hasSelection ? this.fontLibrary.getFont(style.fontFamily) : this.fontLibrary.getFont(this.fabricObject.fontFamily);
-        this.fontSize = hasSelection ? style.fontSize : this.fabricObject.fontSize;
-        this.fontWeight = hasSelection ? style.fontWeight : this.fabricObject.fontWeight;
-        this.bold = this.font.isBold(this.fontWeight);
-        this.italic = hasSelection ? style.fontStyle === "italic" : this.fabricObject.fontStyle === "italic";
-        this.underline = hasSelection ? style.underline : this.fabricObject.underline;
-        this.strikethrough = hasSelection ? style.linethrough : this.fabricObject.linethrough;
-        this.overline = hasSelection ? style.overline : this.fabricObject.overline;
-        this.textBackgroundColor = hasSelection ? style.textBackgroundColor : this.fabricObject.textBackgroundColor;
-        this.textAlign = this.fabricObject.textAlign;
-        this.charSpacing = this.fabricObject.charSpacing;
-        this.lineHeight = this.fabricObject.lineHeight;
-        this.fill = style.fill;
-        this.stroke = style.stroke;
-        this.strokeWidth = style.strokeWidth;
-    }
-    return TextSelection;
-}());
-
-var VerticalRule = /** @class */ (function (_super) {
-    __extends(VerticalRule, _super);
-    function VerticalRule(canvas, fabricObject, persistedField) {
-        var _this = _super.call(this, exports.ObjectType.VERTICAL_RULE, canvas, fabricObject, persistedField) || this;
-        _this.strokeWidth$ = new rxjs.BehaviorSubject(2);
-        _this.canvas = canvas;
-        _this.strokeWidth$.next(_this.getDimensions().width.px);
-        _this.fabricObject.set({ strokeWidth: 0 });
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.getStrokeWidth = function () {
-        return this.fabricObject.width;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.getStrokeWidth$ = function () {
-        return this.strokeWidth$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.setStrokeWidth = function (width) {
-        this.strokeWidth$.next(width);
-        this.data.strokeWidth = width;
-        this.setPosition({ width: width });
-        this.canvas.notifyObjectListChanged();
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.getColor = function () {
-        return this.fabricObject.fill;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color, stroke: color });
-        this.data.color = color;
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.centerHorizontally = function () {
-        _super.prototype.centerHorizontallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.centerVertically = function () {
-        _super.prototype.centerVerticallyInternal.call(this);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.nudgeUp = function () {
-        _super.prototype.nudgeInternal.call(this, 0, -1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.nudgeDown = function () {
-        _super.prototype.nudgeInternal.call(this, 0, +1);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.nudgeLeft = function () {
-        _super.prototype.nudgeInternal.call(this, -1, 0);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.nudgeRight = function () {
-        _super.prototype.nudgeInternal.call(this, +1, 0);
-    };
-    return VerticalRule;
-}(AbstractCanvasObject));
-
-/**
- * Profile with as many features disabled as possible.
- */
-var DefaultCanvasProfile = /** @class */ (function () {
-    function DefaultCanvasProfile() {
-        this.allowMultiSelect = false;
-        this.enterTextEditImmediatelyOnSelect = true;
-        this.allowObjectsToLeaveCanvas = false;
-        this.allowMove = false;
-        this.allowRotate = false;
-        this.allowScale = false;
-        this.defaultFont = "Lato";
-        this.defaultFontSize = 9;
-        this.defaultFontColor = "#000000";
-        this.defaultLineHeight = 1.8;
-        this.defaultCharacterSpacing = 0;
-        this.defaultTextAlignment = "left";
-        this.defaultBorderColor = "#000000";
-        this.defaultBorderWidth = 1;
-        this.defaultCutoffColor = "#000000";
-        this.defaultCutoffWidth = 1;
-    }
-    return DefaultCanvasProfile;
-}());
-
-(function (ImageType) {
-    ImageType["DEFAULT"] = "DEFAULT";
-    ImageType["BACKGROUND"] = "BACKGROUND";
-    ImageType["LOGO"] = "LOGO";
-    ImageType["PHOTO"] = "PHOTO";
-})(exports.ImageType || (exports.ImageType = {}));
-
-(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";
-})(exports.ObjectType || (exports.ObjectType = {}));
-
-var AbstractInteractiveCanvas = /** @class */ (function () {
-    function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
-        this.fabric = fabric;
-        this.fabricCanvas = fabricCanvas;
-        this.devicePixelRatio = devicePixelRatio;
-        this.fontLibrary = new FontLibrary();
-        this.dimensionChangeRejections$ = new rxjs.Subject();
-        this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
-        /**
-         * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
-         */
-        fabric.Object.NUM_FRACTION_DIGITS = 10;
-        this.baseDimensions = new PixelCanvasDimensions(this.fabricCanvas.width, this.fabricCanvas.height);
-        var baseRestrictions = { width: { min: 1 }, height: { min: 1 } };
-        //Initialize properties
-        this.dimensions$ = new rxjs.BehaviorSubject(this.baseDimensions);
-        this.dimensionRestrictions$ = new rxjs.BehaviorSubject(baseRestrictions);
-        this.zoom$ = new rxjs.BehaviorSubject(1);
-        this.profile$ = new rxjs.BehaviorSubject(new DefaultCanvasProfile());
-        this.layoutManager$ = new rxjs.BehaviorSubject(new AdvancedLayoutManager(this));
-        this.backgroundColor$ = new rxjs.BehaviorSubject(this.fabricCanvas.backgroundColor);
-        this.objects$ = new rxjs.BehaviorSubject([]);
-        this.selection$ = new rxjs.BehaviorSubject(new SelectionData([]));
-        //Configure canvas behaviour
-        this.fabricCanvas.stateful = true;
-        this.fabricCanvas.preserveObjectStacking = true;
-        this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 10;
-        this.setBackgroundColor("#FFFFFF");
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getFontLibrary = function () {
-        return this.fontLibrary;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getProfile = function () {
-        return this.profile$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getProfile$ = function () {
-        return this.profile$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setProfile = function (profile) {
-        this.profile$.next(profile);
-        this.onProfileChanged(profile);
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getLayoutManager = function () {
-        return this.layoutManager$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getLayoutManager$ = function () {
-        return this.layoutManager$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setLayoutManager = function (layoutManager) {
-        if (layoutManager === exports.LayoutManager.STANDARD) {
-            this.layoutManager$.next(new StandardLayoutManager(this));
-        }
-        else {
-            this.layoutManager$.next(new AdvancedLayoutManager(this));
-        }
-        this.layoutManager$.value.onInit();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getBackgroundColor = function () {
-        return this.backgroundColor$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getBackgroundColor$ = function () {
-        return this.backgroundColor$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setBackgroundColor = function (color) {
-        if (color === void 0) { color = "White"; }
-        this.fabricCanvas.setBackgroundColor(color, function () {
-        });
-        this.fabricCanvas.renderAll();
-        this.backgroundColor$.next(color);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getDimensions = function () {
-        return this.dimensions$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getBaseDimensions = function () {
-        return this.baseDimensions;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getDimensions$ = function () {
-        return this.dimensions$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setDimensions = function (dimensions) {
-        if (this.dimensionsExceedRestrictions(dimensions)) {
-            console.info("Requested canvas dimensions exceed current restrictions", dimensions, this.dimensionRestrictions$.value);
-            this.dimensionChangeRejections$.next(dimensions);
-            return;
-        }
-        this.updateCanvasDimensions(dimensions, this.zoom$.value);
-        this.dimensions$.next(dimensions);
-        this.onDimensionsChange();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
-        this.baseDimensions = dimensions;
-        this.setDimensions(dimensions);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getDimensionChangeRejections$ = function () {
-        return this.dimensionChangeRejections$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getDimensionsRestrictions = function () {
-        return this.dimensionRestrictions$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getDimensionsRestrictions$ = function () {
-        return this.dimensionRestrictions$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
-        this.dimensionRestrictions$.next(restrictions);
-        var dimensions = this.getDimensions();
-        if (this.dimensionsExceedRestrictions(dimensions)) {
-            var newDimensions = dimensions
-                .withSize(Math.min(Math.max(tsOptchain.oc(restrictions).width.min(dimensions.width), dimensions.width), Math.max(tsOptchain.oc(restrictions).width.max(dimensions.width))), Math.min(Math.max(tsOptchain.oc(restrictions).height.min(dimensions.height), dimensions.height), Math.max(tsOptchain.oc(restrictions).height.max(dimensions.height))));
-            this.setBaseDimensions(newDimensions);
-        }
-    };
-    AbstractInteractiveCanvas.prototype.getMargin = function () {
-        var borderWidth = this.getObjectsByTypeInternal(exports.ObjectType.BORDER)
-            .map(function (border) { return border.getStrokeWidth(); })
-            .reduce(function (current, next) { return Math.max(current, next); }, 0);
-        var borderPadding = this.getObjectsByTypeInternal(exports.ObjectType.BORDER)
-            .map(function (border) { return border.getPadding(); })
-            .reduce(function (current, next) {
-            return {
-                top: Math.max(current.top, next.top),
-                right: Math.max(current.right, next.right),
-                bottom: Math.max(current.bottom, next.bottom),
-                left: Math.max(current.left, next.left)
-            };
-        }, { top: 0, right: 0, bottom: 0, left: 0 });
-        var cutoffWidth = this.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
-            .map(function (border) { return border.getStrokeWidth(); })
-            .reduce(function (current, next) { return Math.max(current, next); }, 0);
-        // noinspection JSSuspiciousNameCombination
-        return {
-            top: borderWidth + borderPadding.top,
-            right: borderWidth + borderPadding.right,
-            bottom: Math.max(cutoffWidth, borderWidth) + borderPadding.bottom,
-            left: borderWidth + borderPadding.left
-        };
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getZoom = function () {
-        return this.zoom$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getZoom$ = function () {
-        return this.zoom$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.setZoom = function (zoom) {
-        this.updateCanvasDimensions(this.dimensions$.value, zoom);
-        this.zoom$.next(zoom);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getObjects = function () {
-        return this.objects$.value;
-    };
-    /**
-     * Get the list of objects directly.
-     */
-    AbstractInteractiveCanvas.prototype.getObjectsInternal = function () {
-        return this.objects$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getObjectsByTypeInternal = function (type) {
-        return _(this.getObjectsInternal())
-            .filter(function (object) { return object.getType() === type; })
-            .value();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getObjectsByTypesInternal = function () {
-        var types = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            types[_i] = arguments[_i];
-        }
-        return _(this.getObjectsInternal())
-            .filter(function (object) { return _(types).includes(object.getType()); })
-            .value();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getObjects$ = function () {
-        return this.objects$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.removeObject = function (target) {
-        var concreteObject = this.findFabricObject(target.getId());
-        this.fabricCanvas.remove(concreteObject);
-        this.objects$.next(_(this.objects$.value)
-            .filter(function (object) { return object.getId() !== target.getId(); })
-            .value());
-        this.onObjectListChange();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addImageObject = function (imageUrl) {
-        return __awaiter(this, void 0, void 0, function () {
-            var maxSizeScale, maxWidth, options;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        maxSizeScale = 2;
-                        maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
-                        options = { crossOrigin: "anonymous" };
-                        return [4 /*yield*/, new Promise(function (resolve) {
-                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
-                                    var id = _this.randomId();
-                                    var newScale = 1;
-                                    var curWidth = newScale * fabricImage.width;
-                                    if (curWidth > maxWidth) {
-                                        newScale = maxWidth / curWidth;
-                                    }
-                                    fabricImage.set({
-                                        id: id,
-                                        scaleX: newScale,
-                                        scaleY: newScale
-                                    });
-                                    _this.fabricCanvas.add(fabricImage);
-                                    var object = new Image(_this, fabricImage);
-                                    _this.trackNewObject(object);
-                                    _this.selectFabricObject(fabricImage);
-                                    _this.syncObjectList();
-                                    resolve(object);
-                                }, options);
-                            })];
-                    case 1: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addTextObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var profile, id, fontSizePx, canvasWidthPx, lowestTextPointPx, topPx, textOptions, fabricTextbox, object;
-            return __generator(this, function (_a) {
-                profile = this.profile$.value;
-                id = this.randomId();
-                fontSizePx = profile.defaultFontSize;
-                canvasWidthPx = this.getDimensions().widthPx;
-                lowestTextPointPx = this.getLowestTextPoint();
-                topPx = Math.min(lowestTextPointPx, this.getDimensions().heightPx - fontSizePx);
-                textOptions = {
-                    id: id,
-                    top: topPx,
-                    left: 5,
-                    width: canvasWidthPx - 10,
-                    fill: profile.defaultFontColor,
-                    fontSize: fontSizePx,
-                    fontFamily: profile.defaultFont,
-                    textAlign: profile.defaultTextAlignment,
-                    multiLine: true,
-                    lineHeight: profile.defaultLineHeight,
-                    charSpacing: profile.defaultCharacterSpacing
-                };
-                fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
-                this.fabricCanvas.add(fabricTextbox);
-                object = new Text(this, fabricTextbox);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricTextbox);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addRichTextObject = function (imageUrl, htmlContent) {
-        return __awaiter(this, void 0, void 0, function () {
-            var maxSizeScale, maxWidth, options;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        maxSizeScale = 2;
-                        maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
-                        options = { crossOrigin: "anonymous" };
-                        return [4 /*yield*/, new Promise(function (resolve) {
-                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
-                                    var id = _this.randomId();
-                                    var newScale = 1;
-                                    var curWidth = newScale * fabricImage.width;
-                                    if (curWidth > maxWidth) {
-                                        newScale = maxWidth / curWidth;
-                                    }
-                                    fabricImage.set({
-                                        id: id,
-                                        scaleX: newScale,
-                                        scaleY: newScale
-                                    });
-                                    _this.fabricCanvas.add(fabricImage);
-                                    var object = new RichText(_this, fabricImage);
-                                    object.htmlContent = htmlContent;
-                                    _this.trackNewObject(object);
-                                    var margin = _this.getMargin();
-                                    object.setImageWidth(_this.dimensions$.value.widthPx - margin.left - margin.right);
-                                    _this.selectFabricObject(fabricImage);
-                                    _this.syncObjectList();
-                                    resolve(object);
-                                }, options);
-                            })];
-                    case 1: return [2 /*return*/, _a.sent()];
-                }
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addRectangleObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var canvasWidth, canvasHeight, rectWidth, rectHeight, rectangleOptions, fabricRect, object;
-            return __generator(this, function (_a) {
-                canvasWidth = this.getDimensions().widthPx;
-                canvasHeight = this.getDimensions().heightPx;
-                rectWidth = canvasWidth / 2;
-                rectHeight = canvasHeight / 2;
-                rectangleOptions = {
-                    id: this.randomId(),
-                    width: canvasWidth / 2,
-                    height: 2,
-                    top: canvasHeight / 2 - rectHeight / 2,
-                    left: canvasWidth / 2 - rectWidth / 2,
-                    fill: "#000000"
-                };
-                fabricRect = new this.fabric.Rect(rectangleOptions);
-                this.fabricCanvas.add(fabricRect);
-                object = new Rectangle(this, fabricRect);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricRect);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addCutoffObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var profile, initialThickness, canvasWidth, canvasHeight, rectangleOptions, fabricRect, object;
-            return __generator(this, function (_a) {
-                profile = this.profile$.value;
-                initialThickness = profile.defaultCutoffWidth;
-                canvasWidth = this.getDimensions().widthPx;
-                canvasHeight = this.getDimensions().heightPx;
-                rectangleOptions = {
-                    id: this.randomId(),
-                    width: canvasWidth,
-                    height: initialThickness,
-                    top: canvasHeight - initialThickness,
-                    left: 0,
-                    fill: profile.defaultCutoffColor
-                };
-                fabricRect = new this.fabric.Rect(rectangleOptions);
-                this.fabricCanvas.add(fabricRect);
-                object = new Cutoff(this, fabricRect);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricRect);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addBorderObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var profile, initialThickness, rectangleOptions, fabricRect, object;
-            return __generator(this, function (_a) {
-                profile = this.profile$.value;
-                initialThickness = profile.defaultBorderWidth;
-                rectangleOptions = {
-                    id: this.randomId(),
-                    fill: null,
-                    stroke: profile.defaultBorderColor,
-                    strokeWidth: initialThickness
-                };
-                fabricRect = new this.fabric.Rect(rectangleOptions);
-                this.fabricCanvas.add(fabricRect);
-                object = new Border(this, fabricRect);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricRect);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addVerticalRuleObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var rectOptions, fabricRect, object;
-            return __generator(this, function (_a) {
-                rectOptions = {
-                    id: this.randomId(),
-                    width: 1,
-                    height: 10,
-                    top: 0,
-                    left: 0,
-                    fill: "#000000"
-                };
-                fabricRect = new this.fabric.Rect(rectOptions);
-                this.fabricCanvas.add(fabricRect);
-                object = new VerticalRule(this, fabricRect);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricRect);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.addHorizontalRuleObject = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var rectOptions, fabricRect, object;
-            return __generator(this, function (_a) {
-                rectOptions = {
-                    id: this.randomId(),
-                    width: 10,
-                    height: 1,
-                    top: 0,
-                    left: 0,
-                    fill: "#000000"
-                };
-                fabricRect = new this.fabric.Rect(rectOptions);
-                this.fabricCanvas.add(fabricRect);
-                object = new HorizontalRule(this, fabricRect);
-                this.trackNewObject(object);
-                this.selectFabricObject(fabricRect);
-                this.syncObjectList();
-                return [2 /*return*/, object];
-            });
-        });
-    };
-    /**
-     * @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
-     */
-    AbstractInteractiveCanvas.prototype.setPrefillData = function (data) {
-        _(this.getObjectsByTypeInternal(exports.ObjectType.TEXT)).each(function (object) {
-            var prefillType = object.getPrefillType();
-            if (prefillType !== undefined) {
-                object.setText(data[prefillType] || "");
-            }
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.distributeObjectsVertically = function () {
-        var margin = this.getMargin();
-        var canvasHeight = this.getDimensions().heightPx;
-        var objectsToLayout = _(this.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.IMAGE))
-            .sortBy(function (x) { return x.getBoundingBox().top; })
-            .value();
-        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);
-        var nextElementTop = margin.top;
-        for (var _i = 0, objectsToLayout_1 = objectsToLayout; _i < objectsToLayout_1.length; _i++) {
-            var element = objectsToLayout_1[_i];
-            var elementHeight = element.getBoundingBox().height;
-            element.setPosition({
-                top: nextElementTop
-            });
-            element.setCoords();
-            nextElementTop += elementHeight + spaceBetween;
-        }
-        this.redraw();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getSelection = function () {
-        return this.selection$.value;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.getSelection$ = function () {
-        return this.selection$;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.select = function (object) {
-        var concreteField = this.findObject(object.getId());
-        if (!concreteField) {
-            console.error("Attempted to select unknown object", object);
-            return;
-        }
-        this.selectFabricObject(concreteField.getFabricObjectInternal());
-        this.fabricCanvas.renderAll();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.clearSelection = function () {
-        this.fabricCanvas.discardActiveObject();
-        this.fabricCanvas.renderAll();
-    };
-    AbstractInteractiveCanvas.prototype.setMultiSelect = function (value) {
-        this.fabricCanvas.selection = value;
-        this.fabricCanvas.selectionKey = value ? "shiftKey" : null;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.clear = function () {
-        this.fabricCanvas.clear();
-        this.setBackgroundColor("#FFFFFF");
-        this.objects$.next([]);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.save = function () {
-        var objects = _(this.objects$.value)
-            .map(function (x) { return x.persist(); })
-            .value();
-        var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
-        var json = this.fabricCanvas.toJSON(includedProperties);
-        return {
-            dimensions: this.dimensions$.value,
-            canvasJson: JSON.stringify(json),
-            objects: objects,
-            backgroundColor: this.backgroundColor$.value
-        };
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.load = function (canvasState) {
-        return __awaiter(this, void 0, void 0, function () {
-            var json_1;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        this.setBaseDimensions(canvasState.dimensions);
-                        if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
-                        json_1 = JSON.parse(canvasState.canvasJson);
-                        return [4 /*yield*/, new Promise(function (resolve) {
-                                _this.fabricCanvas.loadFromJSON(json_1, function () { return resolve(); });
-                            })];
-                    case 1:
-                        _a.sent();
-                        _a.label = 2;
-                    case 2:
-                        if (canvasState.backgroundColor)
-                            this.setBackgroundColor(canvasState.backgroundColor);
-                        this.backgroundColor$.next(this.fabricCanvas.backgroundColor);
-                        this.bindFields(canvasState.objects);
-                        this.removePersistedBullets();
-                        this.removeSlaveObjects();
-                        this.layoutManager$.value.onInit();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * Another hack for bullet points... because they use canvas objects to render the bullets, they get saved when the canvas is persisted... and then loaded into a new canvas, but there's
-     * nothing linking them to the field that needs bullets, so they end up duplicating every time the canvas is saved/loaded. Since we don't use circles for anything else, this just
-     * deletes all circles on canvas load.
-     */
-    AbstractInteractiveCanvas.prototype.removePersistedBullets = function () {
-        var _this = this;
-        var objects = this.fabricCanvas.getObjects();
-        _.each(objects, function (object) {
-            if (object.type === "circle")
-                _this.removeFabricObject(object);
-        });
-    };
-    /**
-     * Remove any slave objects persisted to the canvas; their master objects will recreate them.
-     */
-    AbstractInteractiveCanvas.prototype.removeSlaveObjects = function () {
-        var _this = this;
-        var objects = this.fabricCanvas.getObjects();
-        _.each(objects, function (object) {
-            if (object._isSlaveObject)
-                _this.removeFabricObject(object);
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.toSvg = function () {
-        var _this = this;
-        var widthInMm = _.round(this.dimensions$.value.widthMm, 1) + "mm";
-        var heightInMm = _.round(this.dimensions$.value.heightMm, 1) + "mm";
-        var options = {
-            width: widthInMm,
-            height: heightInMm,
-            suppressPreamble: true,
-            encoding: null
-        };
-        var svg = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toSVG(options); });
-        this.redraw();
-        return svg;
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
-        var _this = this;
-        var options = {
-            format: "png",
-            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
-            enableRetinaScaling: true
-        };
-        var base64 = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toDataURL(options); });
-        return _.replace(base64, /^data:.*;base64,/, "");
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.createPNGStream = function () {
-        return this.fabricCanvas.createPNGStream();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.registerUndoState = function () {
-        throw Error("Undo not supported on this canvas type");
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.undo = function () {
-        throw Error("Undo not supported on this canvas type");
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.redo = function () {
-        throw Error("Redo not supported on this canvas type");
-    };
-    /**
-     * Redraw the canvas.
-     */
-    AbstractInteractiveCanvas.prototype.redraw = function () {
-        this.fabricCanvas.renderAll();
-    };
-    AbstractInteractiveCanvas.prototype.syncObjectList = function () {
-        var _this = this;
-        var newObjectList = _(this.fabricCanvas.getObjects())
-            .map(function (obj) { return _this.findObject(obj.id); })
-            .filter(function (x) { return x !== undefined; })
-            .value();
-        this.objects$.next(newObjectList);
-        this.onObjectListChange();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.notifyObjectListChanged = function () {
-        this.onObjectListChange();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.notifyTextChanged = function () {
-        this.onTextChange();
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    AbstractInteractiveCanvas.prototype.notifyMarginChanged = function () {
-        this.onMarginChange();
-    };
-    AbstractInteractiveCanvas.prototype.removeFabricObject = function (obj) {
-        this.fabricCanvas.remove(obj);
-    };
-    AbstractInteractiveCanvas.prototype.selectFabricObject = function (object) {
-        this.fabricCanvas.setActiveObject(object);
-    };
-    AbstractInteractiveCanvas.prototype.onTextChange = function () {
-        this.layoutManager$.value.onTextChange();
-    };
-    AbstractInteractiveCanvas.prototype.onObjectListChange = function () {
-        this.layoutManager$.value.onObjectListChange();
-    };
-    AbstractInteractiveCanvas.prototype.onDimensionsChange = function () {
-        this.layoutManager$.value.onCanvasDimensionsChange();
-    };
-    AbstractInteractiveCanvas.prototype.onMarginChange = function () {
-        this.layoutManager$.value.onMarginChange();
-    };
-    AbstractInteractiveCanvas.prototype.bindFields = function (persistedFields) {
-        var _this = this;
-        var bound = _(persistedFields)
-            .flatMap(function (field) {
-            try {
-                return [_this.bindField(field)];
-            }
-            catch (e) {
-                console.error("Could not bind field", e, field);
-                return []; //skip
-            }
-        })
-            .value();
-        this.objects$.next(bound);
-    };
-    AbstractInteractiveCanvas.prototype.bindField = function (persistedField) {
-        var fabricObject = this.findFabricObject(persistedField.id);
-        switch (persistedField.type) {
-            case exports.ObjectType.TEXT:
-                return new Text(this, fabricObject, persistedField);
-            case exports.ObjectType.RECTANGLE:
-                return new Rectangle(this, fabricObject, persistedField);
-            case exports.ObjectType.BORDER:
-                return new Border(this, fabricObject, persistedField);
-            case exports.ObjectType.CUTOFF:
-                return new Cutoff(this, fabricObject, persistedField);
-            case exports.ObjectType.IMAGE:
-            case exports.ObjectType.LIBRARY_IMAGE:
-                return new Image(this, fabricObject, persistedField);
-            case exports.ObjectType.HORIZONTAL_RULE:
-                return new HorizontalRule(this, fabricObject, persistedField);
-            case exports.ObjectType.VERTICAL_RULE:
-                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 + "]");
-        }
-    };
-    AbstractInteractiveCanvas.prototype.findFabricObject = function (id) {
-        var objects = this.fabricCanvas.getObjects();
-        var fabricObject = _.find(objects, function (o) { return o.id == id; });
-        if (!fabricObject) {
-            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; });
-    };
-    /**
-     * Reset zoom and canvas dimensions to 1:1 scale, execute a function, then return the canvas to
-     * the previous values.
-     * @param func Function to execute.
-     */
-    AbstractInteractiveCanvas.prototype.executeWithNormalizedCanvas = function (func) {
-        this.updateCanvasDimensions(this.dimensions$.value, 1);
-        var response;
-        try {
-            response = func();
-        }
-        finally {
-            this.updateCanvasDimensions(this.dimensions$.value, this.zoom$.value);
-        }
-        return response;
-    };
-    /**
-     * Update the actual dimensions of the canvas by multiplying the requested dimensions by the current zoom factor.
-     */
-    AbstractInteractiveCanvas.prototype.updateCanvasDimensions = function (dims, zoom) {
-        var width = dims.widthPx * zoom;
-        var height = dims.heightPx * zoom;
-        this.fabricCanvas.setZoom(zoom);
-        this.fabricCanvas.setDimensions({
-            width: width,
-            height: height
-        });
-    };
-    AbstractInteractiveCanvas.prototype.onProfileChanged = function (profile) {
-        this.setMultiSelect(profile.allowMultiSelect);
-        this.layoutManager$.value.onProfileChange(profile);
-    };
-    AbstractInteractiveCanvas.prototype.getFieldByCanvasObject = function (object) {
-        if (!object) {
-            return null;
-        }
-        return _.find(this.objects$.value, function (field) { return field.getId() == object.id; });
-    };
-    AbstractInteractiveCanvas.prototype.getFieldsByCanvasObject = function (objects) {
-        var _this = this;
-        return _(objects)
-            .map(function (obj) { return _this.getFieldByCanvasObject(obj); })
-            .reject(function (x) { return !x; })
-            .value();
-    };
-    AbstractInteractiveCanvas.prototype.calculateImageCaptureCoefficient = function () {
-        var precision = 3;
-        var devicePixelRatio = this.devicePixelRatio || 1;
-        return _.round(2 / devicePixelRatio, precision);
-    };
-    AbstractInteractiveCanvas.prototype.randomId = function () {
-        var min = 0;
-        var max = 999;
-        var id = Math.floor(Math.random() * (max - min)) + min;
-        return (new Date()).getTime() + "" + id;
-    };
-    AbstractInteractiveCanvas.prototype.getLowestTextPoint = function () {
-        return _(this.objects$.value)
-            .filter(function (object) { return object.getType() === exports.ObjectType.TEXT; })
-            .map(function (text) { return text.getDimensions().top.px + text.getDimensions().height.px; })
-            .reduce(function (x, y) { return Math.max(x, y); }, 0);
-    };
-    AbstractInteractiveCanvas.prototype.trackNewObject = function (object) {
-        this.objects$.next(__spreadArrays(this.objects$.value, [object]));
-    };
-    AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
-        var restrictions = this.dimensionRestrictions$.value;
-        return tsOptchain.oc(restrictions).height.min() != undefined && dimensions.height < tsOptchain.oc(restrictions).height.min()
-            || tsOptchain.oc(restrictions).height.max() != undefined && dimensions.height > tsOptchain.oc(restrictions).height.max()
-            || tsOptchain.oc(restrictions).width.min() != undefined && dimensions.width < tsOptchain.oc(restrictions).width.min()
-            || tsOptchain.oc(restrictions).width.max() != undefined && dimensions.width > tsOptchain.oc(restrictions).width.max()
-            || tsOptchain.oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < tsOptchain.oc(restrictions).volume.min()
-            || tsOptchain.oc(restrictions).volume.max() != undefined && dimensions.height * dimensions.width > tsOptchain.oc(restrictions).volume.max();
-    };
-    return AbstractInteractiveCanvas;
-}());
-var SelectionData = /** @class */ (function () {
-    function SelectionData(objects) {
-        this.objects = objects;
-        this.empty = this.objects.length < 1;
-        var selectedObject = this.objects[0];
-        this.isText = selectedObject
-            && selectedObject.getType() === exports.ObjectType.TEXT
-            && selectedObject.isEditing();
-    }
-    return SelectionData;
-}());
-
-var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
-    __extends(HeadlessInteractiveCanvas, _super);
-    function HeadlessInteractiveCanvas() {
-        var _this = _super.call(this, fabric.fabric, new fabric.fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
-        _this.headless = true;
-        return _this;
-    }
-    /**
-     * @override
-     */
-    HeadlessInteractiveCanvas.prototype.selectFabricObject = function (object) {
-        //no-op
-    };
-    return HeadlessInteractiveCanvas;
-}(AbstractInteractiveCanvas));
-
-var UndoStack = /** @class */ (function () {
-    function UndoStack(canvas, size) {
-        if (size === void 0) { size = 100; }
-        this.canvas = canvas;
-        this.undoStates = [];
-        this.redoStates = [];
-        this.lastState = null;
-        this.size = size;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    UndoStack.prototype.save = function (state) {
-        var currentState = this.canvas.save();
-        var undoState = this.undoStates[this.undoStates.length - 1];
-        if (_.isEqual(undoState, state))
-            return;
-        this.undoStates.push(state);
-        if (this.undoStates.length > this.size)
-            this.undoStates.splice(0, 1);
-        this.clearRedoStackIfCanvasChanged(currentState);
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    UndoStack.prototype.undo = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var undoState, currentState;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        undoState = this.undoStates.pop();
-                        if (!undoState)
-                            return [2 /*return*/];
-                        currentState = this.canvas.save();
-                        if (_.isEqual(undoState, currentState)) {
-                            undoState = this.undoStates.pop();
-                            if (!undoState)
-                                return [2 /*return*/];
-                        }
-                        this.lastState = undoState;
-                        this.redoStates.push(currentState);
-                        return [4 /*yield*/, this.canvas.load(undoState)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    UndoStack.prototype.redo = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            var redoState, currentState;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        redoState = this.redoStates.pop();
-                        if (!redoState)
-                            return [2 /*return*/];
-                        currentState = this.canvas.save();
-                        this.lastState = redoState;
-                        this.undoStates.push(currentState);
-                        return [4 /*yield*/, this.canvas.load(redoState)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    UndoStack.prototype.clearRedoStackIfCanvasChanged = function (currentState) {
-        if (_.isEqual(this.lastState, currentState))
-            return;
-        this.redoStates = [];
-    };
-    return UndoStack;
-}());
-
-var InteractiveCanvas = /** @class */ (function (_super) {
-    __extends(InteractiveCanvas, _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(); });
-        _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(); });
-        return _this;
-    }
-    /**
-     * @override
-     * @inheritDoc
-     */
-    InteractiveCanvas.prototype.registerUndoState = function () {
-        this.undoStack.save(this.save());
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    InteractiveCanvas.prototype.undo = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.undoStack.undo()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    InteractiveCanvas.prototype.redo = function () {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, this.undoStack.redo()];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
-    InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
-        var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        this.selection$.next(new SelectionData(selected));
-        this.enterTextSelectionModeIfRequired();
-    };
-    InteractiveCanvas.prototype.enterTextSelectionModeIfRequired = function () {
-        if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
-            return;
-        if (!this.selection$.value || !this.selection$.value.objects[0] || this.selection$.value.objects[0].getType() !== exports.ObjectType.TEXT)
-            return;
-        var text = this.selection$.value.objects[0];
-        text.enterEditing();
-    };
-    InteractiveCanvas.prototype.onTextEditing = function () {
-        var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        this.selection$.next(new SelectionData(selected));
-    };
-    return InteractiveCanvas;
-}(AbstractInteractiveCanvas));
-
-exports.AbstractCanvasObject = AbstractCanvasObject;
-exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
-exports.AbstractLayoutManager = AbstractLayoutManager;
-exports.AdvancedLayoutManager = AdvancedLayoutManager;
-exports.BackgroundImage = BackgroundImage;
-exports.Border = Border;
-exports.CanvasObjectData = CanvasObjectData;
-exports.Cutoff = Cutoff;
-exports.DefaultCanvasProfile = DefaultCanvasProfile;
-exports.Font = Font;
-exports.FontLibrary = FontLibrary;
-exports.HeadlessInteractiveCanvas = HeadlessInteractiveCanvas;
-exports.HorizontalRule = HorizontalRule;
-exports.Image = Image;
-exports.InteractiveCanvas = InteractiveCanvas;
-exports.MillimeterDimensions = MillimeterDimensions;
-exports.PixelCanvasDimensions = PixelCanvasDimensions;
-exports.Print6ColCanvasDimensions = Print6ColCanvasDimensions;
-exports.Print8ColCanvasDimensions = Print8ColCanvasDimensions;
-exports.Rectangle = Rectangle;
-exports.RichText = RichText;
-exports.SelectionData = SelectionData;
-exports.StandardLayoutManager = StandardLayoutManager;
-exports.Text = Text;
-exports.UNKNOWN_FONT = UNKNOWN_FONT;
-exports.UnknownFont = UnknownFont;
-exports.VerticalRule = VerticalRule;
-exports.isMutableBackgroundColor = isMutableBackgroundColor;
-exports.isMutableColor = isMutableColor;
-exports.isMutableImage = isMutableImage;
-exports.isMutablePosition = isMutablePosition;
-exports.isMutableStroke = isMutableStroke;
-exports.isMutableText = isMutableText;
-exports.isMutableTextStyle = isMutableTextStyle;