@leapfrog/interactive-canvas 2.0.13 → 2.0.15-beta-0

package/dist/interactive-canvas.js

@@ -7,26 +7,30 @@ var tsOptchain = require('ts-optchain');
 var rxjs = require('rxjs');
 var fabric = require('fabric');
 
-var PIXELS_PER_MM = 3.937;
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+
+var PIXELS_PER_MM$2 = 3.937;
 var MillimeterDimensions = /** @class */ (function () {
     function MillimeterDimensions(width, height) {
         this.widthUnit = "mm";
         this.heightUnit = "mm";
         this.width = width;
         this.widthMm = Math.max(0, width);
-        this.widthPx = _.round(this.widthMm * PIXELS_PER_MM);
+        this.widthPx = _.round(this.widthMm * PIXELS_PER_MM$2);
         this.height = height;
         this.heightMm = Math.max(0, height);
-        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM);
+        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM$2);
     }
     MillimeterDimensions.prototype.withSize = function (width, height) {
         return new MillimeterDimensions(width, height);
     };
     MillimeterDimensions.prototype.widthPxToMm = function (px) {
-        return px / PIXELS_PER_MM;
+        return px / PIXELS_PER_MM$2;
     };
     MillimeterDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM;
+        return px / PIXELS_PER_MM$2;
     };
     return MillimeterDimensions;
 }());
@@ -52,8 +56,8 @@ var PixelCanvasDimensions = /** @class */ (function () {
     return PixelCanvasDimensions;
 }());
 
-var COLUMN_WIDTH_MM = 41;
-var GUTTER_WIDTH_MM = 3;
+var COLUMN_WIDTH_MM$1 = 41;
+var GUTTER_WIDTH_MM$1 = 3;
 var PIXELS_PER_MM$1 = 3.937;
 var Print6ColCanvasDimensions = /** @class */ (function () {
     function Print6ColCanvasDimensions(width, height) {
@@ -61,13 +65,14 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
         this.heightUnit = "cm";
         this.width = width;
         this.gutterCount = Math.max(0, width - 1);
-        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM;
-        this.columnsTotalMm = width * COLUMN_WIDTH_MM;
+        this.gutterTotalMm = this.gutterCount * GUTTER_WIDTH_MM$1;
+        this.columnsTotalMm = width * COLUMN_WIDTH_MM$1;
         this.widthMm = Math.max(0, this.columnsTotalMm + this.gutterTotalMm);
         this.widthPx = _.round(this.widthMm * PIXELS_PER_MM$1);
         this.height = height;
         this.heightMm = Math.max(0, height * 10);
         this.heightPx = _.round(this.heightMm * PIXELS_PER_MM$1);
+        console.log("interactive canvas");
     }
     Print6ColCanvasDimensions.prototype.withSize = function (width, height) {
         return new Print6ColCanvasDimensions(width, height);
@@ -81,110 +86,119 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
     return Print6ColCanvasDimensions;
 }());
 
-var COLUMN_WIDTH_MM$1 = 30.8772;
-var GUTTER_WIDTH_MM$1 = 2.1053;
-var PIXELS_PER_MM$2 = 3.937;
+var COLUMN_WIDTH_MM = 30.8772;
+var GUTTER_WIDTH_MM = 2.1053;
+var PIXELS_PER_MM = 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.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$2);
+        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$2);
+        this.heightPx = _.round(this.heightMm * PIXELS_PER_MM);
     }
     Print8ColCanvasDimensions.prototype.withSize = function (width, height) {
         return new Print8ColCanvasDimensions(width, height);
     };
     Print8ColCanvasDimensions.prototype.widthPxToMm = function (px) {
-        return px / PIXELS_PER_MM$2;
+        return px / PIXELS_PER_MM;
     };
     Print8ColCanvasDimensions.prototype.heightPxToMm = function (px) {
-        return px / PIXELS_PER_MM$2;
+        return px / PIXELS_PER_MM;
     };
     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);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-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() {
     }
@@ -287,12 +301,109 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = ___default["default"](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;
+}());
+
+exports.LayoutManager = void 0;
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
     LayoutManager["STANDARD"] = "STANDARD";
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(exports.LayoutManager || (exports.LayoutManager = {}));
 
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -310,7 +421,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         var canvasMargin = canvas.getMargin();
         var canvasDimensions = canvas.getDimensions();
         var allObjects = canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.RICH_TEXT, exports.ObjectType.IMAGE, exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
-        var objects = _(allObjects)
+        var objects = ___default["default"](allObjects)
             .partition(function (object) { return object.isPinToBottom(); })
             .value();
         var footerObjects = objects[0];
@@ -389,7 +500,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         }
     };
     StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
-        _(objects).forEach(function (object) {
+        ___default["default"](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)
@@ -461,26 +572,6 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
-    function RepositionBackgroundsLayoutFunction() {
-    }
-    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBackgroundsLayoutFunction;
-}());
-
 var StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -1986,7 +2077,7 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.setBoldRegion = function (start, end, bold) {
         if (bold === void 0) { bold = true; }
         if (start > end)
-            throw Error("Bad region specified: [" + start + " - " + end + "]");
+            throw Error("Bad region specified: [".concat(start, " - ").concat(end, "]"));
         for (var i = start; i < end; i++) {
             var style = this.fabricObject.getStyleAtPosition(i, true);
             var font = this.fontLibrary.getFont(style.fontFamily);
@@ -2017,7 +2108,7 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.setItalicRegion = function (start, end, italic) {
         if (italic === void 0) { italic = true; }
         if (start > end)
-            throw Error("Bad region specified: [" + start + " - " + end + "]");
+            throw Error("Bad region specified: [".concat(start, " - ").concat(end, "]"));
         this.fabricObject.setSelectionStyles({ fontStyle: italic ? "italic" : "" }, start, end);
         this.redraw();
     };
@@ -2168,7 +2259,7 @@ var Text = /** @class */ (function (_super) {
         if (!this.isBulleted())
             return 0;
         var fontSize = 0;
-        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
+        ___default["default"].each(this.fabricObject._textLines, function (textLine, lineIndex) {
             fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
         });
         return fontSize * 0.6;
@@ -2181,7 +2272,7 @@ var Text = /** @class */ (function (_super) {
         if (!this.isOrderedList())
             return 0;
         var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        var max = _(orderedListMarkerEntities)
+        var max = ___default["default"](orderedListMarkerEntities)
             .filter(function (x) { return !!x; })
             .map(function (x) { return x.getBoundingRect(true, true).width; })
             .max();
@@ -2316,7 +2407,7 @@ var Text = /** @class */ (function (_super) {
         if (this.data.bulleted) {
             var bullets = this.fabricObject["_bullets"];
             delete this.fabricObject["_bullets"];
-            _.each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
+            ___default["default"].each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2325,7 +2416,7 @@ var Text = /** @class */ (function (_super) {
         if (this.fabricObject._isOrderedList) {
             var markerEntities = this.fabricObject._orderedListMarkerEntities;
             delete this.fabricObject._orderedListMarkerEntities;
-            _.each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
+            ___default["default"].each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2339,11 +2430,12 @@ var Text = /** @class */ (function (_super) {
         var fabric = this.canvas.fabric;
         this.fabricObject["_render"] = function (ctx) {
             var fabricText = this;
+            console.log('fabricText 123', fabricText);
             if (fabricText["_bullets"]) {
                 // Determine list of active bullets
                 var currentBullets_1 = fabricText["_bullets"];
                 var activeBullets_1 = {};
-                _.each(fabricText._textLines, function (textLine, lineIndex) {
+                ___default["default"].each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
@@ -2377,13 +2469,13 @@ var Text = /** @class */ (function (_super) {
                 var canvas_1 = fabricText.canvas;
                 var canvasDirty_1 = false;
                 canvas_1.renderOnAddRemove = false;
-                _.each(activeBullets_1, function (bullet) {
+                ___default["default"].each(activeBullets_1, function (bullet) {
                     if (!canvas_1.contains(bullet)) {
                         canvas_1.add(bullet);
                         canvasDirty_1 = true;
                     }
                 });
-                _.each(currentBullets_1, function (bullet, key) {
+                ___default["default"].each(currentBullets_1, function (bullet, key) {
                     if (!activeBullets_1[key]) {
                         canvas_1.remove(bullet);
                         canvasDirty_1 = true;
@@ -2399,7 +2491,7 @@ var Text = /** @class */ (function (_super) {
             if (fabricText._isOrderedList) {
                 var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
                 var activeMarkers_1 = [];
-                _.each(fabricText._textLines, function (textLine, lineIndex) {
+                ___default["default"].each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
@@ -2410,7 +2502,7 @@ var Text = /** @class */ (function (_super) {
                             }
                             else {
                                 // Create new marker for this line
-                                var textbox = new fabric.Textbox(lineIndex + ".", {
+                                var textbox = new fabric.Textbox("".concat(lineIndex, "."), {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2432,7 +2524,7 @@ var Text = /** @class */ (function (_super) {
                 var canvas_2 = fabricText.canvas;
                 var canvasDirty_2 = false;
                 canvas_2.renderOnAddRemove = false;
-                _.each(activeMarkers_1, function (marker) {
+                ___default["default"].each(activeMarkers_1, function (marker) {
                     if (!marker)
                         return;
                     if (!canvas_2.contains(marker)) {
@@ -2440,7 +2532,7 @@ var Text = /** @class */ (function (_super) {
                         canvasDirty_2 = true;
                     }
                 });
-                _.each(existingMarkers_1, function (marker, key) {
+                ___default["default"].each(existingMarkers_1, function (marker, key) {
                     if (!marker)
                         return;
                     if (!activeMarkers_1[key]) {
@@ -2509,7 +2601,7 @@ var Text = /** @class */ (function (_super) {
                     left: fabricText.left + xOffset,
                     top: fabricText.top + yOffset,
                     angle: fabricText.angle,
-                    text: lineNumber + "."
+                    text: "".concat(lineNumber, ".")
                 });
             }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
@@ -2720,6 +2812,7 @@ var DefaultCanvasProfile = /** @class */ (function () {
     return DefaultCanvasProfile;
 }());
 
+exports.ImageType = void 0;
 (function (ImageType) {
     ImageType["DEFAULT"] = "DEFAULT";
     ImageType["BACKGROUND"] = "BACKGROUND";
@@ -2727,6 +2820,7 @@ var DefaultCanvasProfile = /** @class */ (function () {
     ImageType["PHOTO"] = "PHOTO";
 })(exports.ImageType || (exports.ImageType = {}));
 
+exports.ObjectType = void 0;
 (function (ObjectType) {
     ObjectType["TEXT"] = "TEXT";
     ObjectType["BORDER"] = "BORDER";
@@ -2747,6 +2841,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.devicePixelRatio = devicePixelRatio;
         this.fontLibrary = new FontLibrary();
         this.dimensionChangeRejections$ = new rxjs.Subject();
+        console.log(" **** Hello world");
         this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
         /**
          * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -2994,7 +3089,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractInteractiveCanvas.prototype.getObjectsByTypeInternal = function (type) {
-        return _(this.getObjectsInternal())
+        return ___default["default"](this.getObjectsInternal())
             .filter(function (object) { return object.getType() === type; })
             .value();
     };
@@ -3007,8 +3102,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         for (var _i = 0; _i < arguments.length; _i++) {
             types[_i] = arguments[_i];
         }
-        return _(this.getObjectsInternal())
-            .filter(function (object) { return _(types).includes(object.getType()); })
+        return ___default["default"](this.getObjectsInternal())
+            .filter(function (object) { return ___default["default"](types).includes(object.getType()); })
             .value();
     };
     /**
@@ -3025,7 +3120,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.removeObject = function (target) {
         var concreteObject = this.findFabricObject(target.getId());
         this.fabricCanvas.remove(concreteObject);
-        this.objects$.next(_(this.objects$.value)
+        this.objects$.next(___default["default"](this.objects$.value)
             .filter(function (object) { return object.getId() !== target.getId(); })
             .value());
         this.onObjectListChange();
@@ -3325,7 +3420,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractInteractiveCanvas.prototype.setPrefillData = function (data) {
-        _(this.getObjectsByTypeInternal(exports.ObjectType.TEXT)).each(function (object) {
+        ___default["default"](this.getObjectsByTypeInternal(exports.ObjectType.TEXT)).each(function (object) {
             var prefillType = object.getPrefillType();
             if (prefillType !== undefined) {
                 object.setText(data[prefillType] || "");
@@ -3339,10 +3434,10 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.distributeObjectsVertically = function () {
         var margin = this.getMargin();
         var canvasHeight = this.getDimensions().heightPx;
-        var objectsToLayout = _(this.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.IMAGE))
+        var objectsToLayout = ___default["default"](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 objectsHeight = ___default["default"].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);
@@ -3411,7 +3506,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @inheritDoc
      */
     AbstractInteractiveCanvas.prototype.save = function () {
-        var objects = _(this.objects$.value)
+        var objects = ___default["default"](this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
         var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
@@ -3438,6 +3533,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                         if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
                         json_1 = JSON.parse(canvasState.canvasJson);
                         return [4 /*yield*/, new Promise(function (resolve) {
+                                console.log('resolve', resolve);
                                 _this.fabricCanvas.loadFromJSON(json_1, function () { return resolve(); });
                             })];
                     case 1:
@@ -3504,7 +3600,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      */
     AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
         var _this = this;
-        console.log("Multiplier in interactive canvas : %s", multiplier);
+        console.log("Multiplier in interactive canvas !!! : %s", multiplier);
         var activeObject = this.fabricCanvas.getActiveObject();
         this.fabricCanvas.discardActiveObject().renderAll();
         var options = {
@@ -3516,7 +3612,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         if (activeObject) {
             this.fabricCanvas.setActiveObject(activeObject);
         }
-        return _.replace(base64, /^data:.*;base64,/, "");
+        return ___default["default"].replace(base64, /^data:.*;base64,/, "");
     };
     /**
      * @override
@@ -3554,7 +3650,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     };
     AbstractInteractiveCanvas.prototype.syncObjectList = function () {
         var _this = this;
-        var newObjectList = _(this.fabricCanvas.getObjects())
+        var newObjectList = ___default["default"](this.fabricCanvas.getObjects())
             .map(function (obj) { return _this.findObject(obj.id); })
             .filter(function (x) { return x !== undefined; })
             .value();
@@ -3602,7 +3698,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     };
     AbstractInteractiveCanvas.prototype.bindFields = function (persistedFields) {
         var _this = this;
-        var bound = _(persistedFields)
+        var bound = ___default["default"](persistedFields)
             .flatMap(function (field) {
             try {
                 return [_this.bindField(field)];
@@ -3638,20 +3734,20 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             case exports.ObjectType.BACKGROUND_IMAGE:
                 return new BackgroundImage(this, fabricObject, persistedField);
             default:
-                throw new Error("Unknown field type: [" + persistedField.type + "]");
+                throw new Error("Unknown field type: [".concat(persistedField.type, "]"));
         }
     };
     AbstractInteractiveCanvas.prototype.findFabricObject = function (id) {
         var objects = this.fabricCanvas.getObjects();
-        var fabricObject = _.find(objects, function (o) { return o.id == id; });
+        var fabricObject = ___default["default"].find(objects, function (o) { return o.id == id; });
         if (!fabricObject) {
-            throw new Error("Cannot find fabric object with id [" + id + "]");
+            throw new Error("Cannot find fabric object with id [".concat(id, "]"));
         }
         return fabricObject;
     };
     AbstractInteractiveCanvas.prototype.findObject = function (id) {
         //Don't use strict compare here. fabric ids are numbers while ad builder ids are strings... mostly.
-        return _.find(this.objects$.value, function (object) { return object.getId() == id; });
+        return ___default["default"].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
@@ -3689,11 +3785,11 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         if (!object) {
             return null;
         }
-        return _.find(this.objects$.value, function (field) { return field.getId() == object.id; });
+        return ___default["default"].find(this.objects$.value, function (field) { return field.getId() == object.id; });
     };
     AbstractInteractiveCanvas.prototype.getFieldsByCanvasObject = function (objects) {
         var _this = this;
-        return _(objects)
+        return ___default["default"](objects)
             .map(function (obj) { return _this.getFieldByCanvasObject(obj); })
             .reject(function (x) { return !x; })
             .value();
@@ -3701,7 +3797,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.calculateImageCaptureCoefficient = function () {
         var precision = 3;
         var devicePixelRatio = this.devicePixelRatio || 1;
-        return _.round(2 / devicePixelRatio, precision);
+        return ___default["default"].round(2 / devicePixelRatio, precision);
     };
     AbstractInteractiveCanvas.prototype.randomId = function () {
         var min = 0;
@@ -3710,13 +3806,13 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         return (new Date()).getTime() + "" + id;
     };
     AbstractInteractiveCanvas.prototype.getLowestTextPoint = function () {
-        return _(this.objects$.value)
+        return ___default["default"](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]));
+        this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
     };
     AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
         var restrictions = this.dimensionRestrictions$.value;
@@ -3737,7 +3833,11 @@ var SelectionData = /** @class */ (function () {
         this.isText = selectedObject
             && selectedObject.getType() === exports.ObjectType.TEXT
             && selectedObject.isEditing();
+        this.event = {};
     }
+    SelectionData.prototype.setEvent = function (event) {
+        this.event = event;
+    };
     return SelectionData;
 }());
 
@@ -3849,9 +3949,9 @@ var InteractiveCanvas = /** @class */ (function (_super) {
         _this.headless = false;
         _this.undoStack = new UndoStack(_this);
         //Initialize watchers
-        _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
-        _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
-        _this.fabricCanvas.on("selection:cleared", function () { return _this.onFabricSelectionChanged(); });
+        _this.fabricCanvas.on("selection:updated", function (event) { return _this.onFabricSelectionChanged(event); });
+        _this.fabricCanvas.on("selection:created", function (event) { return _this.onFabricSelectionChanged(event); });
+        _this.fabricCanvas.on("selection:cleared", function (event) { return _this.onFabricSelectionChanged(event); });
         _this.fabricCanvas.on("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(); });
@@ -3896,9 +3996,11 @@ var InteractiveCanvas = /** @class */ (function (_super) {
             });
         });
     };
-    InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
+    InteractiveCanvas.prototype.onFabricSelectionChanged = function (event) {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
-        this.selection$.next(new SelectionData(selected));
+        var selection = new SelectionData(selected);
+        selection.setEvent(event);
+        this.selection$.next(selection);
         this.enterTextSelectionModeIfRequired();
     };
     InteractiveCanvas.prototype.enterTextSelectionModeIfRequired = function () {
@@ -3916,82 +4018,6 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
-var AdvancedLayoutManager = /** @class */ (function (_super) {
-    __extends(AdvancedLayoutManager, _super);
-    function AdvancedLayoutManager(canvas) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = exports.LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onTextChange = function () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 exports.AbstractCanvasObject = AbstractCanvasObject;
 exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
 exports.AbstractLayoutManager = AbstractLayoutManager;