@leapfrog/interactive-canvas 1.13.1 → 1.14.0-beta.0

package/dist/interactive-canvas.es.js

@@ -284,6 +284,63 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
 var LayoutManager;
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
@@ -291,6 +348,45 @@ var LayoutManager;
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(LayoutManager || (LayoutManager = {}));
 
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -366,6 +462,8 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
                 var objectLeft = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === ObjectType.TEXT && object.isBulleted())
                     objectLeft += object.getBulletMargin();
+                if (object.getType() === ObjectType.TEXT && object.isOrderedList())
+                    objectLeft += object.getOrderedListMargin();
                 if (object.getType() === ObjectType.VERTICAL_RULE)
                     object.setPosition({ height: row.height });
                 object.setPosition({
@@ -454,26 +552,6 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
-    function RepositionBackgroundsLayoutFunction() {
-    }
-    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBackgroundsLayoutFunction;
-}());
-
 var StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -1524,7 +1602,7 @@ var Image = /** @class */ (function (_super) {
             px = maxWidth;
         }
         var premultipliedWidth = this.fabricObject.width;
-        var newScale = px / premultipliedWidth;
+        var newScale = (premultipliedWidth > 0) ? px / premultipliedWidth : 1;
         this.fabricObject.set({ scaleX: newScale, scaleY: newScale });
         this.setCoords();
         this.canvas.notifyObjectListChanged();
@@ -2166,6 +2244,20 @@ var Text = /** @class */ (function (_super) {
         });
         return fontSize * 0.6;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.getOrderedListMargin = function () {
+        var _this = this;
+        if (!this.isOrderedList())
+            return 0;
+        var fontSize = 0;
+        each(this.fabricObject._textLines, function (textLine, lineIndex) {
+            fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
+        });
+        return fontSize * 1.5;
+    };
     /**
      * @override
      * @inheritDoc
@@ -2226,6 +2318,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.enableBullets = function () {
+        this.disableOrderedList();
         this.fabricObject["objectCaching"] = false;
         this.fabricObject["_bullets"] = this.fabricObject["_bullets"] || {};
         this.data.bulleted = true;
@@ -2242,6 +2335,34 @@ var Text = /** @class */ (function (_super) {
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.isOrderedList = function () {
+        return this.fabricObject.orderedList || false;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.enableOrderedList = function () {
+        this.disableBullets();
+        this.fabricObject["objectCaching"] = false;
+        this.fabricObject.orderedList = true;
+        this.notifyCanvasOfTextChanges();
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.disableOrderedList = function () {
+        this.removeOrderedList();
+        delete this.fabricObject.orderedList;
+        this.notifyCanvasOfTextChanges();
+        this.redraw();
+    };
     Text.prototype.getSizeIncreaseSinceCreation = function () {
         return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
     };
@@ -2254,9 +2375,20 @@ var Text = /** @class */ (function (_super) {
             this.fabricObject["objectCaching"] = true;
         }
     };
+    Text.prototype.removeOrderedList = function () {
+        var _this = this;
+        if (this.fabricObject.orderedList) {
+            var lineNumbers = this.fabricObject["_currentLineNumbers"];
+            delete this.fabricObject["_currentLineNumbers"];
+            each(lineNumbers, function (lineNumber) { return _this.canvas.removeFabricObject(lineNumber); });
+            this.fabricObject["objectCaching"] = true;
+        }
+    };
     Text.prototype.applyBulletListMonkeyPatches = function () {
         if (this.data.bulleted)
             this.enableBullets();
+        if (this.fabricObject.orderedList)
+            this.enableOrderedList();
         var originalRender = this.fabricObject["_render"];
         var fabric = this.canvas.fabric;
         this.fabricObject["_render"] = function (ctx) {
@@ -2318,6 +2450,61 @@ var Text = /** @class */ (function (_super) {
                     setTimeout(canvas_1.renderAll.bind(canvas_1));
                 }
             }
+            if (fabricText["orderedList"]) {
+                // Determine list of active bullets
+                var currentLineNumbers_1 = fabricText["_currentLineNumbers"] || {};
+                var activeLineNumbers_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 (currentLineNumbers_1[lineIndex]) {
+                                // Reuse existing bullet for this line
+                                activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
+                            }
+                            else {
+                                // Create new bullet for this line
+                                activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                    left: 0,
+                                    top: 0,
+                                    fill: fabricText.fill,
+                                    scaleX: fabricText.scaleX,
+                                    scaleY: fabricText.scaleY,
+                                    strokeWidth: 0,
+                                    lockMovementX: true,
+                                    lockMovementY: true,
+                                    hasControls: false,
+                                    selectable: false,
+                                    excludeFromExport: true
+                                });
+                            }
+                        }
+                    }
+                });
+                // Add/Remove bullets from canvas
+                var canvas_2 = fabricText.canvas;
+                var canvasDirty_2 = false;
+                canvas_2.renderOnAddRemove = false;
+                each(activeLineNumbers_1, function (bullet) {
+                    if (!canvas_2.contains(bullet)) {
+                        canvas_2.add(bullet);
+                        canvasDirty_2 = true;
+                    }
+                });
+                each(currentLineNumbers_1, function (bullet, key) {
+                    if (!activeLineNumbers_1[key]) {
+                        canvas_2.remove(bullet);
+                        canvasDirty_2 = true;
+                    }
+                });
+                canvas_2.renderOnAddRemove = true;
+                fabricText["_currentLineNumbers"] = activeLineNumbers_1;
+                if (canvasDirty_2) {
+                    // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
+                    setTimeout(canvas_2.renderAll.bind(canvas_2));
+                }
+            }
             originalRender.apply(fabricText, [ctx]);
         };
         var originalRenderTextLine = this.fabricObject["_renderTextLine"];
@@ -2343,6 +2530,28 @@ var Text = /** @class */ (function (_super) {
                     top: fabricText.top + yOffset + bulletCenterOffset[1]
                 });
             }
+            var currentLineNumbers = fabricText._currentLineNumbers;
+            if (currentLineNumbers && currentLineNumbers[lineIndex]) {
+                var lineNumber = currentLineNumbers[lineIndex];
+                var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
+                var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
+                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
+                var angle = fabricText.angle;
+                var theta = angle * Math.PI / 180;
+                var xShift = -fontSize * 1.5;
+                var yShift = (fabricText.height / 2) + top - fontSize - 1;
+                var xOffset = (xShift * Math.cos(theta)) - (yShift * Math.sin(theta));
+                var yOffset = (xShift * Math.sin(theta)) + (yShift * Math.cos(theta));
+                lineNumber.set({
+                    fontSize: fontSize,
+                    fontFamily: fontFamily,
+                    fill: color,
+                    left: fabricText.left + xOffset,
+                    top: fabricText.top + yOffset,
+                    angle: fabricText.angle,
+                    text: lineIndex + 1 + "."
+                });
+            }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
         };
     };
@@ -3246,7 +3455,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id"];
+        var includedProperties = ["id", "orderedList"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3730,80 +3939,4 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
-var AdvancedLayoutManager = /** @class */ (function (_super) {
-    __extends(AdvancedLayoutManager, _super);
-    function AdvancedLayoutManager(canvas) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onTextChange = function () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, BackgroundImage, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableStroke, isMutableText, isMutableTextStyle };

package/dist/interactive-canvas.js

@@ -287,12 +287,108 @@ 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 = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
     LayoutManager["STANDARD"] = "STANDARD";
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(exports.LayoutManager || (exports.LayoutManager = {}));
 
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -368,6 +464,8 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
                 var objectLeft = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
                     objectLeft += object.getBulletMargin();
+                if (object.getType() === exports.ObjectType.TEXT && object.isOrderedList())
+                    objectLeft += object.getOrderedListMargin();
                 if (object.getType() === exports.ObjectType.VERTICAL_RULE)
                     object.setPosition({ height: row.height });
                 object.setPosition({
@@ -456,26 +554,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) {
@@ -1526,7 +1604,7 @@ var Image = /** @class */ (function (_super) {
             px = maxWidth;
         }
         var premultipliedWidth = this.fabricObject.width;
-        var newScale = px / premultipliedWidth;
+        var newScale = (premultipliedWidth > 0) ? px / premultipliedWidth : 1;
         this.fabricObject.set({ scaleX: newScale, scaleY: newScale });
         this.setCoords();
         this.canvas.notifyObjectListChanged();
@@ -2168,6 +2246,20 @@ var Text = /** @class */ (function (_super) {
         });
         return fontSize * 0.6;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.getOrderedListMargin = function () {
+        var _this = this;
+        if (!this.isOrderedList())
+            return 0;
+        var fontSize = 0;
+        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
+            fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
+        });
+        return fontSize * 1.5;
+    };
     /**
      * @override
      * @inheritDoc
@@ -2228,6 +2320,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.enableBullets = function () {
+        this.disableOrderedList();
         this.fabricObject["objectCaching"] = false;
         this.fabricObject["_bullets"] = this.fabricObject["_bullets"] || {};
         this.data.bulleted = true;
@@ -2244,6 +2337,34 @@ var Text = /** @class */ (function (_super) {
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.isOrderedList = function () {
+        return this.fabricObject.orderedList || false;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.enableOrderedList = function () {
+        this.disableBullets();
+        this.fabricObject["objectCaching"] = false;
+        this.fabricObject.orderedList = true;
+        this.notifyCanvasOfTextChanges();
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.disableOrderedList = function () {
+        this.removeOrderedList();
+        delete this.fabricObject.orderedList;
+        this.notifyCanvasOfTextChanges();
+        this.redraw();
+    };
     Text.prototype.getSizeIncreaseSinceCreation = function () {
         return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
     };
@@ -2256,9 +2377,20 @@ var Text = /** @class */ (function (_super) {
             this.fabricObject["objectCaching"] = true;
         }
     };
+    Text.prototype.removeOrderedList = function () {
+        var _this = this;
+        if (this.fabricObject.orderedList) {
+            var lineNumbers = this.fabricObject["_currentLineNumbers"];
+            delete this.fabricObject["_currentLineNumbers"];
+            _.each(lineNumbers, function (lineNumber) { return _this.canvas.removeFabricObject(lineNumber); });
+            this.fabricObject["objectCaching"] = true;
+        }
+    };
     Text.prototype.applyBulletListMonkeyPatches = function () {
         if (this.data.bulleted)
             this.enableBullets();
+        if (this.fabricObject.orderedList)
+            this.enableOrderedList();
         var originalRender = this.fabricObject["_render"];
         var fabric = this.canvas.fabric;
         this.fabricObject["_render"] = function (ctx) {
@@ -2320,6 +2452,61 @@ var Text = /** @class */ (function (_super) {
                     setTimeout(canvas_1.renderAll.bind(canvas_1));
                 }
             }
+            if (fabricText["orderedList"]) {
+                // Determine list of active bullets
+                var currentLineNumbers_1 = fabricText["_currentLineNumbers"] || {};
+                var activeLineNumbers_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 (currentLineNumbers_1[lineIndex]) {
+                                // Reuse existing bullet for this line
+                                activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
+                            }
+                            else {
+                                // Create new bullet for this line
+                                activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                    left: 0,
+                                    top: 0,
+                                    fill: fabricText.fill,
+                                    scaleX: fabricText.scaleX,
+                                    scaleY: fabricText.scaleY,
+                                    strokeWidth: 0,
+                                    lockMovementX: true,
+                                    lockMovementY: true,
+                                    hasControls: false,
+                                    selectable: false,
+                                    excludeFromExport: true
+                                });
+                            }
+                        }
+                    }
+                });
+                // Add/Remove bullets from canvas
+                var canvas_2 = fabricText.canvas;
+                var canvasDirty_2 = false;
+                canvas_2.renderOnAddRemove = false;
+                _.each(activeLineNumbers_1, function (bullet) {
+                    if (!canvas_2.contains(bullet)) {
+                        canvas_2.add(bullet);
+                        canvasDirty_2 = true;
+                    }
+                });
+                _.each(currentLineNumbers_1, function (bullet, key) {
+                    if (!activeLineNumbers_1[key]) {
+                        canvas_2.remove(bullet);
+                        canvasDirty_2 = true;
+                    }
+                });
+                canvas_2.renderOnAddRemove = true;
+                fabricText["_currentLineNumbers"] = activeLineNumbers_1;
+                if (canvasDirty_2) {
+                    // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
+                    setTimeout(canvas_2.renderAll.bind(canvas_2));
+                }
+            }
             originalRender.apply(fabricText, [ctx]);
         };
         var originalRenderTextLine = this.fabricObject["_renderTextLine"];
@@ -2345,6 +2532,28 @@ var Text = /** @class */ (function (_super) {
                     top: fabricText.top + yOffset + bulletCenterOffset[1]
                 });
             }
+            var currentLineNumbers = fabricText._currentLineNumbers;
+            if (currentLineNumbers && currentLineNumbers[lineIndex]) {
+                var lineNumber = currentLineNumbers[lineIndex];
+                var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
+                var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
+                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
+                var angle = fabricText.angle;
+                var theta = angle * Math.PI / 180;
+                var xShift = -fontSize * 1.5;
+                var yShift = (fabricText.height / 2) + top - fontSize - 1;
+                var xOffset = (xShift * Math.cos(theta)) - (yShift * Math.sin(theta));
+                var yOffset = (xShift * Math.sin(theta)) + (yShift * Math.cos(theta));
+                lineNumber.set({
+                    fontSize: fontSize,
+                    fontFamily: fontFamily,
+                    fill: color,
+                    left: fabricText.left + xOffset,
+                    top: fabricText.top + yOffset,
+                    angle: fabricText.angle,
+                    text: lineIndex + 1 + "."
+                });
+            }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
         };
     };
@@ -3246,7 +3455,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id"];
+        var includedProperties = ["id", "orderedList"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3730,82 +3939,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;

package/dist/mutator/mutable-text.interface.d.ts

@@ -56,5 +56,17 @@ export interface IMutableText extends ICanvasObject {
      * Disable bullet points.
      */
     disableBullets(): void;
+    /**
+     * Is the text an ordered list?
+     */
+    isOrderedList(): boolean;
+    /**
+     * Enable ordered list markers.
+     */
+    enableOrderedList(): void;
+    /**
+     * Disable ordered list markers.
+     */
+    disableOrderedList(): void;
 }
 export declare function isMutableText(object: any): object is IMutableText;

package/dist/object/impl/text.d.ts

@@ -44,6 +44,10 @@ export interface IText extends ICanvasObject, IMutableColor, IMutableText, IMuta
      * Return the margin needed for bullets on this object.
      */
     getBulletMargin(): number;
+    /**
+     * Return the margin needed for ordered lists on this object.
+     */
+    getOrderedListMargin(): number;
 }
 export declare class Text extends AbstractCanvasObject<fabric.Textbox> implements IText {
     private readonly fontLibrary;
@@ -216,6 +220,11 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
      * @inheritDoc
      */
     getBulletMargin(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getOrderedListMargin(): number;
     /**
      * @override
      * @inheritDoc
@@ -261,8 +270,24 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
      * @inheritDoc
      */
     disableBullets(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    isOrderedList(): boolean;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    enableOrderedList(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    disableOrderedList(): void;
     getSizeIncreaseSinceCreation(): number;
     private removeBullets;
+    private removeOrderedList;
     private applyBulletListMonkeyPatches;
     /**
      * @override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "1.13.1",
+  "version": "1.14.0-beta.0",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"

package/readme.md

@@ -48,7 +48,6 @@ library in the calling project.
 
 ### Publishing
 The `.npmrc` file contains the access token needed to publish to the `@leapfrog` npm repo.
-* Increment the version number in `package.json`.
-* `npm install` to update the `package-lock.json`.
+* `npm version <version>` or `npm version <version>-beta.0`
 * `npm run build`
-* `npm publish`
+* `npm publish` or `npm publish --tag beta`