@leapfrog/interactive-canvas 2.0.8 → 2.0.9

package/dist/interactive-canvas.js

@@ -0,0 +1,4028 @@
+'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;
+}());
+
+(function (LayoutManager) {
+    LayoutManager["LEGACY"] = "LEGACY";
+    LayoutManager["STANDARD"] = "STANDARD";
+    LayoutManager["ADVANCED"] = "ADVANCED";
+})(exports.LayoutManager || (exports.LayoutManager = {}));
+
+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)
+                    return;
+                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 RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
+var StandardLayoutManager = /** @class */ (function (_super) {
+    __extends(StandardLayoutManager, _super);
+    function StandardLayoutManager(canvas) {
+        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 fontWeight = this.getValueOfPropertyAt(lineIndex, 0, "fontWeight");
+                var fontStyle = this.getValueOfPropertyAt(lineIndex, 0, "fontStyle");
+                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,
+                    fontWeight: fontWeight,
+                    fontStyle: fontStyle,
+                    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 canvasHeight, rectOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                canvasHeight = this.fabricCanvas.getHeight();
+                rectOptions = {
+                    id: this.randomId(),
+                    width: 1,
+                    height: canvasHeight,
+                    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;
+        console.log("Multiplier in interactive canvas : %s", multiplier);
+        var activeObject = this.fabricCanvas.getActiveObject();
+        this.fabricCanvas.discardActiveObject().renderAll();
+        var options = {
+            format: "png",
+            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
+            enableRetinaScaling: true
+        };
+        var base64 = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toDataURL(options); });
+        if (activeObject) {
+            this.fabricCanvas.setActiveObject(activeObject);
+        }
+        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(canvas, devicePixelRatio) {
+        var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(canvas), 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));
+
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
+exports.AbstractCanvasObject = AbstractCanvasObject;
+exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
+exports.AbstractLayoutManager = AbstractLayoutManager;
+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;