@leapfrog/interactive-canvas 1.0.2 → 1.0.4

package/dist/interactive-canvas.js

@@ -0,0 +1,3254 @@
+'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 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 = 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);
+        this.height = height;
+        this.heightMm = Math.max(0, height * 10);
+        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM);
+    }
+    Print6ColCanvasDimensions.prototype.withSize = function (width, height) {
+        return new Print6ColCanvasDimensions(width, height);
+    };
+    Print6ColCanvasDimensions.prototype.widthPxToMm = function (px) {
+        return px / PIXELS_PER_MM;
+    };
+    Print6ColCanvasDimensions.prototype.heightPxToMm = function (px) {
+        return px / PIXELS_PER_MM;
+    };
+    return Print6ColCanvasDimensions;
+}());
+
+var COLUMN_WIDTH_MM$1 = 30.8772;
+var GUTTER_WIDTH_MM$1 = 2.1053;
+var PIXELS_PER_MM$1 = 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$1);
+        this.height = height;
+        this.heightMm = Math.max(0, height * 10);
+        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM$1);
+    }
+    Print8ColCanvasDimensions.prototype.withSize = function (width, height) {
+        return new Print8ColCanvasDimensions(width, height);
+    };
+    Print8ColCanvasDimensions.prototype.widthPxToMm = function (px) {
+        return px / PIXELS_PER_MM$1;
+    };
+    Print8ColCanvasDimensions.prototype.heightPxToMm = function (px) {
+        return px / PIXELS_PER_MM$1;
+    };
+    return Print8ColCanvasDimensions;
+}());
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+
+var Font = /** @class */ (function () {
+    function Font() {
+    }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Font.prototype.isBold = function (fontWeight) {
+        return fontWeight === this.boldWeight;
+    };
+    return Font;
+}());
+
+var UnknownFont = /** @class */ (function (_super) {
+    __extends(UnknownFont, _super);
+    function UnknownFont() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.family = "_Unknown_";
+        _this.normalWeight = 400;
+        _this.boldWeight = 700;
+        return _this;
+    }
+    return UnknownFont;
+}(Font));
+
+var UNKNOWN_FONT = new UnknownFont();
+var FontLibrary = /** @class */ (function () {
+    function FontLibrary() {
+        this._fonts = {};
+    }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    FontLibrary.prototype.registerFont = function (font) {
+        this._fonts[font.family] = font;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    FontLibrary.prototype.registerFonts = function (fonts) {
+        var _this = this;
+        _.each(fonts, function (font) { return _this._fonts[font.family] = font; });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    FontLibrary.prototype.getFonts = function () {
+        return _.values(this._fonts);
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    FontLibrary.prototype.getFont = function (family) {
+        return this._fonts[family] || UNKNOWN_FONT;
+    };
+    return FontLibrary;
+}());
+
+var AbstractLayoutManager = /** @class */ (function () {
+    function AbstractLayoutManager(canvas) {
+        this.isEnforcedPositioning = false;
+        this.enterTextEditImmediatelyOnSelect = false;
+        this.canvas = canvas;
+    }
+    AbstractLayoutManager.prototype.getCanvas = function () {
+        return this.canvas;
+    };
+    AbstractLayoutManager.prototype.onInit = function () {
+        //noop
+    };
+    AbstractLayoutManager.prototype.onProfileChange = function (profile) {
+        //noop
+    };
+    AbstractLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        //noop
+    };
+    AbstractLayoutManager.prototype.onTextChange = function () {
+        //noop
+    };
+    AbstractLayoutManager.prototype.onObjectListChange = function () {
+        //noop
+    };
+    AbstractLayoutManager.prototype.onMarginChange = function () {
+        //noop
+    };
+    return AbstractLayoutManager;
+}());
+
+var RedrawAllLayoutFunction = /** @class */ (function () {
+    function RedrawAllLayoutFunction() {
+    }
+    RedrawAllLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return RedrawAllLayoutFunction;
+}());
+
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+(function (LayoutManager) {
+    LayoutManager["LEGACY"] = "LEGACY";
+    LayoutManager["STANDARD"] = "STANDARD";
+    LayoutManager["ADVANCED"] = "ADVANCED";
+})(exports.LayoutManager || (exports.LayoutManager = {}));
+
+var 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.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.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
+var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
+    function UpdateObjectDimensionsLayoutFunction() {
+    }
+    UpdateObjectDimensionsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal().forEach(function (object) { return object.updateDimensions(); });
+    };
+    return UpdateObjectDimensionsLayoutFunction;
+}());
+
+var MIN_MAGNITUDE = 1;
+var BULLET_MARGIN = 15;
+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.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;
+        //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 += BULLET_MARGIN;
+                if (object.getType() === exports.ObjectType.VERTICAL_RULE)
+                    object.setPosition({ height: row.height });
+                object.setPosition({
+                    top: nextObjectTop + tsOptchain.oc(object.getMargin()).top(0),
+                    left: objectLeft
+                });
+                currentColumnWidthPercent += object.getColumnWidthPercent();
+            }
+            currentColumnWidthPercent = 0;
+            nextObjectTop += row.height;
+            var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
+            var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
+            if (!thisRowIsHR && !nextRowIsHR) {
+                nextObjectTop += spaceSize;
+            }
+        }
+    };
+    StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
+        _(objects).forEach(function (object) {
+            var targetWidth = object.getColumnWidthPercent() / 100 * layoutWidth;
+            var actualWidth = targetWidth - tsOptchain.oc(object.getMargin()).left(0) - tsOptchain.oc(object.getMargin()).right(0);
+            if (object.getType() === exports.ObjectType.VERTICAL_RULE)
+                return;
+            if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
+                actualWidth -= BULLET_MARGIN;
+            object.setPosition({
+                width: actualWidth
+            });
+            object.updateDimensions();
+        });
+    };
+    StackObjectsLayoutFunction.prototype.adjustCanvasSize = function (canvas, requiredHeight) {
+        var dimensions = canvas.getDimensions();
+        var targetDimensions = canvas.getDimensions().withSize(dimensions.width, MIN_MAGNITUDE);
+        while (targetDimensions.heightPx < requiredHeight) {
+            targetDimensions = targetDimensions.withSize(dimensions.width, targetDimensions.height + 1);
+        }
+        if (dimensions.height !== targetDimensions.height) {
+            canvas.setDimensions(targetDimensions);
+        }
+    };
+    StackObjectsLayoutFunction.prototype.getRows = function (objectsToLayout) {
+        var _this = this;
+        var result = { totalHeight: 0, rows: [] };
+        var currentWidth = 0;
+        var row = { objects: [], height: 1 };
+        _.each(objectsToLayout, function (object) {
+            var nextWidth = object.getColumnWidthPercent();
+            var objectHeight = _this.getObjectHeight(object);
+            if (currentWidth + nextWidth > 100) {
+                result.rows.push(row);
+                row = { objects: [], height: 1 };
+                currentWidth = 0;
+            }
+            row.objects.push(object);
+            if (object.getType() !== exports.ObjectType.VERTICAL_RULE)
+                row.height = Math.max(row.height, objectHeight);
+            currentWidth += nextWidth;
+        });
+        if (row.objects.length)
+            result.rows.push(row);
+        result.totalHeight = _.reduce(result.rows, function (x, y) { return x + y.height; }, 0);
+        return result;
+    };
+    StackObjectsLayoutFunction.prototype.getObjectHeight = function (element) {
+        return element.getBoundingBox().height
+            + tsOptchain.oc(element.getMargin()).top(0)
+            + tsOptchain.oc(element.getMargin()).bottom(0);
+    };
+    StackObjectsLayoutFunction.prototype.countSpaces = function (rows) {
+        var count = 0;
+        for (var i = 0; i < rows.rows.length - 1; i++) {
+            var row = rows.rows[i];
+            var nextRow = rows.rows[i + 1];
+            var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
+            var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
+            if (!thisRowIsHR && !nextRowIsHR) {
+                count++;
+            }
+        }
+        return count;
+    };
+    return StackObjectsLayoutFunction;
+}());
+
+var StandardLayoutManager = /** @class */ (function (_super) {
+    __extends(StandardLayoutManager, _super);
+    function StandardLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.STANDARD;
+        _this.isEnforcedPositioning = true;
+        _this.enterTextEditImmediatelyOnSelect = true;
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.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.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.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 isMutableText(object) {
+    return "setText" in object;
+}
+
+function isMutableTextStyle(object) {
+    return "getTextSelection" 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.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); });
+    }
+    /**
+     * @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.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();
+    };
+    /**
+     * 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 });
+    };
+    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();
+    };
+    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 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.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: 2,
+            right: 2,
+            bottom: 2,
+            left: 2
+        };
+    };
+    Border.prototype.setPadding = function (padding) {
+        if (!padding)
+            return;
+        this.data.padding = {
+            top: padding.top || 2,
+            right: padding.right || 2,
+            bottom: padding.bottom || 2,
+            left: padding.left || 2
+        };
+        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.setHeight = function (height) {
+        this.setPosition({ height: height });
+        this.canvas.notifyObjectListChanged();
+    };
+    /**
+     * @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) {
+        this.setCanvasImage(url);
+        this.data.imagePath = url;
+        this.imageUrl$.next(url);
+        this.canvas.notifyObjectListChanged();
+    };
+    /**
+     * @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 = px / premultipliedWidth;
+        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.setHeight = function (height) {
+        this.setPosition({ height: height });
+        this.canvas.notifyObjectListChanged();
+    };
+    /**
+     * @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) {
+        var _this = this;
+        var imageOptions = { crossOrigin: "anonymous" };
+        //Don't let the image be more than half the canvas in size.
+        var maxSizeScale = 2;
+        var maxWidth = this.canvas.getDimensions().widthPx / maxSizeScale;
+        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();
+        }, imageOptions);
+    };
+    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;
+        _this.fabricObject.set({ strokeWidth: 0 });
+        return _this;
+    }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.getColor = function () {
+        return this.fabricObject.fill;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.setColor = function (color) {
+        this.fabricObject.set({ fill: color, stroke: color });
+        this.data.color = color;
+        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.setHeight = function (height) {
+        this.setPosition({ height: height });
+        this.canvas.notifyObjectListChanged();
+    };
+    /**
+     * @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);
+    };
+    return Rectangle;
+}(AbstractCanvasObject));
+
+var Text = /** @class */ (function (_super) {
+    __extends(Text, _super);
+    function Text(canvas, fabricObject, persistedField) {
+        var _this = _super.call(this, exports.ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
+        _this.canvas = canvas;
+        _this.fontLibrary = canvas.getFontLibrary();
+        _this.baseComponentHeight = _this.fabricObject.height;
+        _this.text$ = new rxjs.BehaviorSubject(_this.fabricObject.text);
+        _this.data.userText = _this.fabricObject.text;
+        _this.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(_this.fabricObject, _this.fontLibrary));
+        _this.fabricObject.set({ strokeWidth: 0 });
+        _this.fabricObject.on("changed", function () { return _this.onTextChange(); });
+        _this.fabricObject.on("selection:changed", function () { return _this.onSelectionChange(); });
+        _this.applyBulletListMonkeyPatches();
+        return _this;
+    }
+    /**
+     * @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.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.setHeight = function (height) {
+        //no-op
+    };
+    /**
+     * @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.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.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();
+    };
+    Text.prototype.getSizeIncreaseSinceCreation = function () {
+        return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
+    };
+    Text.prototype.removeBullets = function () {
+        var _this = this;
+        if (this.data.bulleted) {
+            var bullets = this.fabricObject["_bullets"];
+            delete this.fabricObject["_bullets"];
+            _.each(bullets, function (bullet) { return _this.canvas.removeFabricObject(bullet); });
+            this.fabricObject["objectCaching"] = true;
+        }
+    };
+    Text.prototype.applyBulletListMonkeyPatches = function () {
+        if (this.data.bulleted)
+            this.enableBullets();
+        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));
+                }
+            }
+            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 bulletIndent = 10;
+                var bulletLeft = fabricText.left + (left - fabricText._getLeftOffset() - bulletIndent) * fabricText.scaleX;
+                if (bullet.left !== bulletLeft) {
+                    bullet.set({ left: bulletLeft });
+                }
+                /**
+                 * What an out-and-out mess... this calculation is a joke, and the bulletOffset is just an approximation of values that look ok for
+                 * the font sizes we use. The 'top' value provided is actutally the... bottom? of the line... and not the line... the bottom of where
+                 * the font is rendered... subtracting the `fabricText.getHeightOfLine(lineIndex)` line hieght doesn't give you the top, because the
+                 * line height is actually the height of the font plus the excess line height added via the text line-height property.
+                 * I couldn't figure out how to get the actual top of the line in two days of trying to understand this ridiculous library.
+                 * So, here... bullets. That sort of work... sometimes.
+                 */
+                var textOriginTop = fabricText.top + (fabricText.height / 2);
+                var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
+                var bulletOffset = ((fontSize + 6) / 2);
+                var bulletTop = textOriginTop + top - bulletOffset;
+                if (bullet.top !== bulletTop) {
+                    bullet.set({ top: bulletTop });
+                }
+                if (bullet.fill !== fabricText.fill) {
+                    bullet.set({ fill: fabricText.fill });
+                }
+            }
+            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 () {
+        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.setHeight = function (height) {
+        this.setPosition({ height: height });
+        this.canvas.notifyObjectListChanged();
+    };
+    /**
+     * @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 = 8;
+        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";
+})(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();
+        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.debug("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();
+        this.notifyObjectListChanged();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
+        this.baseDimensions = dimensions;
+        this.setDimensions(dimensions);
+        this.notifyObjectListChanged();
+    };
+    /**
+     * @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);
+    };
+    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.bottom, next.bottom)
+            };
+        }, { 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.addRectangleObject = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var canvasWidth, canvasHeight, rectWidth, rectHeight, rectangleOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                canvasWidth = this.getDimensions().widthPx;
+                canvasHeight = this.getDimensions().heightPx;
+                rectWidth = canvasWidth / 2;
+                rectHeight = canvasHeight / 2;
+                rectangleOptions = {
+                    id: this.randomId(),
+                    width: canvasWidth / 2,
+                    height: 2,
+                    top: canvasHeight / 2 - rectHeight / 2,
+                    left: canvasWidth / 2 - rectWidth / 2,
+                    fill: "#000000"
+                };
+                fabricRect = new this.fabric.Rect(rectangleOptions);
+                this.fabricCanvas.add(fabricRect);
+                object = new Rectangle(this, fabricRect);
+                this.trackNewObject(object);
+                this.selectFabricObject(fabricRect);
+                this.syncObjectList();
+                return [2 /*return*/, object];
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addCutoffObject = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var profile, initialThickness, canvasWidth, canvasHeight, rectangleOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                profile = this.profile$.value;
+                initialThickness = profile.defaultCutoffWidth;
+                canvasWidth = this.getDimensions().widthPx;
+                canvasHeight = this.getDimensions().heightPx;
+                rectangleOptions = {
+                    id: this.randomId(),
+                    width: canvasWidth,
+                    height: initialThickness,
+                    top: canvasHeight - initialThickness,
+                    left: 0,
+                    fill: profile.defaultCutoffColor
+                };
+                fabricRect = new this.fabric.Rect(rectangleOptions);
+                this.fabricCanvas.add(fabricRect);
+                object = new Cutoff(this, fabricRect);
+                this.trackNewObject(object);
+                this.selectFabricObject(fabricRect);
+                this.syncObjectList();
+                return [2 /*return*/, object];
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addBorderObject = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var profile, initialThickness, rectangleOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                profile = this.profile$.value;
+                initialThickness = profile.defaultBorderWidth;
+                rectangleOptions = {
+                    id: this.randomId(),
+                    fill: null,
+                    stroke: profile.defaultBorderColor,
+                    strokeWidth: initialThickness
+                };
+                fabricRect = new this.fabric.Rect(rectangleOptions);
+                this.fabricCanvas.add(fabricRect);
+                object = new Border(this, fabricRect);
+                this.trackNewObject(object);
+                this.selectFabricObject(fabricRect);
+                this.syncObjectList();
+                return [2 /*return*/, object];
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addVerticalRuleObject = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var rectOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                rectOptions = {
+                    id: this.randomId(),
+                    width: 2,
+                    height: 10,
+                    top: 0,
+                    left: 0,
+                    fill: "#000000"
+                };
+                fabricRect = new this.fabric.Rect(rectOptions);
+                this.fabricCanvas.add(fabricRect);
+                object = new VerticalRule(this, fabricRect);
+                this.trackNewObject(object);
+                this.selectFabricObject(fabricRect);
+                this.syncObjectList();
+                return [2 /*return*/, object];
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addHorizontalRuleObject = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var rectOptions, fabricRect, object;
+            return __generator(this, function (_a) {
+                rectOptions = {
+                    id: this.randomId(),
+                    width: 10,
+                    height: 2,
+                    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.setPrefillData = function (data) {
+        _(this.getObjectsByTypeInternal(exports.ObjectType.TEXT)).each(function (object) {
+            var prefillType = object.getPrefillType();
+            if (prefillType !== null) {
+                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"];
+        var json = this.fabricCanvas.toJSON(includedProperties);
+        var state = {
+            dimensions: this.dimensions$.value,
+            canvasJson: JSON.stringify(json),
+            objects: objects,
+            backgroundColor: this.backgroundColor$.value
+        };
+        console.debug("Saving canvas state", state);
+        return state;
+    };
+    /**
+     * @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:
+                        console.debug("Loading canvas state", canvasState);
+                        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:
+                        this.setBackgroundColor(canvasState.backgroundColor);
+                        this.bindFields(canvasState.objects);
+                        this.removePersistedBullets();
+                        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);
+        });
+    };
+    /**
+     * @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 () {
+        var _this = this;
+        var options = {
+            format: "png",
+            multiplier: this.IMAGE_CAPTURE_COEFFICIENT,
+            enableRetinaScaling: true
+        };
+        console.debug("Capturing canvas image", options);
+        var base64 = this.executeWithNormalizedCanvas(function () { return _this.fabricCanvas.toDataURL(options); });
+        return _.replace(base64, /^data:.*;base64,/, "");
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.createPNGStream = function () {
+        return this.fabricCanvas.createPNGStream();
+    };
+    /**
+     * 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;
+        console.debug("Binding fields", persistedFields);
+        var bound = _(persistedFields)
+            .flatMap(function (field) {
+            try {
+                return [_this.bindField(field)];
+            }
+            catch (e) {
+                console.error("Could not bind field", e, field);
+                return []; //skip
+            }
+        })
+            .value();
+        console.debug("Bound fields", bound);
+        this.objects$.next(bound);
+    };
+    AbstractInteractiveCanvas.prototype.bindField = function (persistedField) {
+        console.debug("Binding field", persistedField);
+        var fabricObject = this.findFabricObject(persistedField.id);
+        switch (persistedField.type) {
+            case exports.ObjectType.TEXT:
+                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);
+            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;
+        console.debug("Updating canvas dimensions: zoom: " + zoom + ", width: " + width + ", height: " + height);
+        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);
+        console.debug("Canvas profile set", 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() {
+        return _super.call(this, fabric.fabric, new fabric.fabric.StaticCanvas(null, { width: 640, height: 480 }), null) || this;
+    }
+    /**
+     * @override
+     */
+    HeadlessInteractiveCanvas.prototype.selectFabricObject = function (object) {
+        //no-op
+    };
+    return HeadlessInteractiveCanvas;
+}(AbstractInteractiveCanvas));
+
+var InteractiveCanvas = /** @class */ (function (_super) {
+    __extends(InteractiveCanvas, _super);
+    function InteractiveCanvas(elementId, devicePixelRatio) {
+        var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(elementId), devicePixelRatio) || this;
+        _this.devicePixelRatio = devicePixelRatio;
+        //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;
+    }
+    InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
+        var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
+        console.debug("Selection changed", selected);
+        this.selection$.next(new SelectionData(selected));
+        this.enterTextSelectionModeIfRequired();
+    };
+    InteractiveCanvas.prototype.enterTextSelectionModeIfRequired = function () {
+        if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
+            return;
+        if (!this.selection$.value || !this.selection$.value.objects[0] || this.selection$.value.objects[0].getType() !== exports.ObjectType.TEXT)
+            return;
+        var text = this.selection$.value.objects[0];
+        text.enterEditing();
+    };
+    InteractiveCanvas.prototype.onTextEditing = function () {
+        var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
+        this.selection$.next(new SelectionData(selected));
+    };
+    return InteractiveCanvas;
+}(AbstractInteractiveCanvas));
+
+exports.AbstractCanvasObject = AbstractCanvasObject;
+exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
+exports.AbstractLayoutManager = AbstractLayoutManager;
+exports.AdvancedLayoutManager = AdvancedLayoutManager;
+exports.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.PixelCanvasDimensions = PixelCanvasDimensions;
+exports.Print6ColCanvasDimensions = Print6ColCanvasDimensions;
+exports.Print8ColCanvasDimensions = Print8ColCanvasDimensions;
+exports.Rectangle = Rectangle;
+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.isMutableText = isMutableText;
+exports.isMutableTextStyle = isMutableTextStyle;