@leapfrog/interactive-canvas 1.14.1 → 1.14.3

package/dist/abstract-interactive-canvas.d.ts

@@ -280,6 +280,10 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * deletes all circles on canvas load.
      */
     private removePersistedBullets;
+    /**
+     * Remove any slave objects persisted to the canvas; their master objects will recreate them.
+     */
+    private removeSlaveObjects;
     /**
      * @override
      * @inheritDoc

package/dist/index.d.ts

@@ -51,3 +51,4 @@ export * from "./abstract-interactive-canvas";
 export * from "./headless-interactive-canvas";
 export * from "./interactive-canvas";
 export * from "./interactive-canvas.interface";
+export { ExtendedFabricTextbox } from "./object/impl/extended-fabric-textbox.interface";

package/dist/interactive-canvas.es.js

@@ -2251,14 +2251,14 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.getOrderedListMargin = function () {
-        var _this_1 = this;
         if (!this.isOrderedList())
             return 0;
-        var fontSize = 0;
-        each(this.fabricObject._textLines, function (textLine, lineIndex) {
-            fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
-        });
-        return fontSize * 1.5;
+        var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
+        var max = _(orderedListMarkerEntities)
+            .filter(function (x) { return !!x; })
+            .map(function (x) { return x.getBoundingRect(true, true).width; })
+            .max();
+        return (max * 1.2) || 0;
     };
     /**
      * @override
@@ -2342,7 +2342,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.isOrderedList = function () {
-        return this.fabricObject.orderedList || false;
+        return this.fabricObject._isOrderedList || false;
     };
     /**
      * @override
@@ -2350,8 +2350,8 @@ var Text = /** @class */ (function (_super) {
      */
     Text.prototype.enableOrderedList = function () {
         this.disableBullets();
-        this.fabricObject["objectCaching"] = false;
-        this.fabricObject.orderedList = true;
+        this.fabricObject.objectCaching = false;
+        this.fabricObject._isOrderedList = true;
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
@@ -2360,8 +2360,8 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.disableOrderedList = function () {
-        this.removeOrderedList();
-        delete this.fabricObject.orderedList;
+        this.removeOrderedListMarkers();
+        delete this.fabricObject._isOrderedList;
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
@@ -2370,7 +2370,8 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.setOrderedListStart = function (start) {
-        this.fabricObject.orderedListIndex = start;
+        this.fabricObject._orderedListStart = start;
+        this.notifyCanvasOfTextChanges();
         this.redraw();
     };
     /**
@@ -2378,7 +2379,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.getOrderedListStart = function () {
-        return this.fabricObject.orderedListIndex || 1;
+        return this.fabricObject._orderedListStart || 1;
     };
     Text.prototype.getSizeIncreaseSinceCreation = function () {
         return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
@@ -2392,12 +2393,12 @@ var Text = /** @class */ (function (_super) {
             this.fabricObject["objectCaching"] = true;
         }
     };
-    Text.prototype.removeOrderedList = function () {
+    Text.prototype.removeOrderedListMarkers = function () {
         var _this_1 = this;
-        if (this.fabricObject.orderedList) {
-            var lineNumbers = this.fabricObject["_currentLineNumbers"];
-            delete this.fabricObject["_currentLineNumbers"];
-            each(lineNumbers, function (lineNumber) { return _this_1.canvas.removeFabricObject(lineNumber); });
+        if (this.fabricObject._isOrderedList) {
+            var markerEntities = this.fabricObject._orderedListMarkerEntities;
+            delete this.fabricObject._orderedListMarkerEntities;
+            each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2405,7 +2406,7 @@ var Text = /** @class */ (function (_super) {
         var _this = this;
         if (this.data.bulleted)
             this.enableBullets();
-        if (this.fabricObject.orderedList)
+        if (this.fabricObject._isOrderedList)
             this.enableOrderedList();
         var originalRender = this.fabricObject["_render"];
         var fabric = this.canvas.fabric;
@@ -2468,22 +2469,21 @@ 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 = {};
+            if (fabricText._isOrderedList) {
+                var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
+                var activeMarkers_1 = [];
                 each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
                         if (styleMap.offset === 0) {
-                            if (currentLineNumbers_1[lineIndex]) {
-                                // Reuse existing bullet for this line
-                                activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
+                            if (existingMarkers_1[lineIndex]) {
+                                // Reuse existing marker for this line
+                                activeMarkers_1[lineIndex] = existingMarkers_1[lineIndex];
                             }
                             else {
-                                // Create new bullet for this line
-                                activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                // Create new marker for this line
+                                var textbox = new fabric.Textbox(lineIndex + ".", {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2493,31 +2493,36 @@ var Text = /** @class */ (function (_super) {
                                     lockMovementX: true,
                                     lockMovementY: true,
                                     hasControls: false,
-                                    selectable: false,
-                                    excludeFromExport: true
+                                    selectable: false
                                 });
+                                textbox._isSlaveObject = true;
+                                activeMarkers_1[lineIndex] = textbox;
                             }
                         }
                     }
                 });
-                // Add/Remove bullets from canvas
+                // Add/Remove markers 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);
+                each(activeMarkers_1, function (marker) {
+                    if (!marker)
+                        return;
+                    if (!canvas_2.contains(marker)) {
+                        canvas_2.add(marker);
                         canvasDirty_2 = true;
                     }
                 });
-                each(currentLineNumbers_1, function (bullet, key) {
-                    if (!activeLineNumbers_1[key]) {
-                        canvas_2.remove(bullet);
+                each(existingMarkers_1, function (marker, key) {
+                    if (!marker)
+                        return;
+                    if (!activeMarkers_1[key]) {
+                        canvas_2.remove(marker);
                         canvasDirty_2 = true;
                     }
                 });
                 canvas_2.renderOnAddRemove = true;
-                fabricText["_currentLineNumbers"] = activeLineNumbers_1;
+                fabricText._orderedListMarkerEntities = activeMarkers_1;
                 if (canvasDirty_2) {
                     // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
                     setTimeout(canvas_2.renderAll.bind(canvas_2));
@@ -2548,24 +2553,25 @@ var Text = /** @class */ (function (_super) {
                     top: fabricText.top + yOffset + bulletCenterOffset[1]
                 });
             }
-            var currentLineNumbers = fabricText._currentLineNumbers;
-            if (currentLineNumbers && currentLineNumbers[lineIndex]) {
-                var entry = currentLineNumbers[lineIndex];
+            var orderedListMarkerEntities = fabricText._orderedListMarkerEntities;
+            var xShift = -_this.getOrderedListMargin() + 1;
+            if (orderedListMarkerEntities && orderedListMarkerEntities[lineIndex]) {
+                var entry = orderedListMarkerEntities[lineIndex];
                 var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
                 var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
                 var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
                 var angle = fabricText.angle;
                 var theta = angle * Math.PI / 180;
-                var 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));
                 var lineNumber = _this.getOrderedListStart();
                 for (var i = 0; i < lineIndex; i++) {
-                    if (currentLineNumbers[i])
+                    if (orderedListMarkerEntities[i])
                         lineNumber++;
                 }
                 entry.set({
+                    width: 1,
                     fontSize: fontSize,
                     fontFamily: fontFamily,
                     fill: color,
@@ -3478,7 +3484,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id", "orderedList", "orderedListIndex"];
+        var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3513,6 +3519,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                         this.backgroundColor$.next(this.fabricCanvas.backgroundColor);
                         this.bindFields(canvasState.objects);
                         this.removePersistedBullets();
+                        this.removeSlaveObjects();
                         this.layoutManager$.value.onInit();
                         return [2 /*return*/];
                 }
@@ -3532,6 +3539,17 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 _this.removeFabricObject(object);
         });
     };
+    /**
+     * Remove any slave objects persisted to the canvas; their master objects will recreate them.
+     */
+    AbstractInteractiveCanvas.prototype.removeSlaveObjects = function () {
+        var _this = this;
+        var objects = this.fabricCanvas.getObjects();
+        each(objects, function (object) {
+            if (object._isSlaveObject)
+                _this.removeFabricObject(object);
+        });
+    };
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.js

@@ -2253,14 +2253,14 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.getOrderedListMargin = function () {
-        var _this_1 = this;
         if (!this.isOrderedList())
             return 0;
-        var fontSize = 0;
-        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
-            fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
-        });
-        return fontSize * 1.5;
+        var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
+        var max = _(orderedListMarkerEntities)
+            .filter(function (x) { return !!x; })
+            .map(function (x) { return x.getBoundingRect(true, true).width; })
+            .max();
+        return (max * 1.2) || 0;
     };
     /**
      * @override
@@ -2344,7 +2344,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.isOrderedList = function () {
-        return this.fabricObject.orderedList || false;
+        return this.fabricObject._isOrderedList || false;
     };
     /**
      * @override
@@ -2352,8 +2352,8 @@ var Text = /** @class */ (function (_super) {
      */
     Text.prototype.enableOrderedList = function () {
         this.disableBullets();
-        this.fabricObject["objectCaching"] = false;
-        this.fabricObject.orderedList = true;
+        this.fabricObject.objectCaching = false;
+        this.fabricObject._isOrderedList = true;
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
@@ -2362,8 +2362,8 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.disableOrderedList = function () {
-        this.removeOrderedList();
-        delete this.fabricObject.orderedList;
+        this.removeOrderedListMarkers();
+        delete this.fabricObject._isOrderedList;
         this.notifyCanvasOfTextChanges();
         this.redraw();
     };
@@ -2372,7 +2372,8 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.setOrderedListStart = function (start) {
-        this.fabricObject.orderedListIndex = start;
+        this.fabricObject._orderedListStart = start;
+        this.notifyCanvasOfTextChanges();
         this.redraw();
     };
     /**
@@ -2380,7 +2381,7 @@ var Text = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Text.prototype.getOrderedListStart = function () {
-        return this.fabricObject.orderedListIndex || 1;
+        return this.fabricObject._orderedListStart || 1;
     };
     Text.prototype.getSizeIncreaseSinceCreation = function () {
         return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
@@ -2394,12 +2395,12 @@ var Text = /** @class */ (function (_super) {
             this.fabricObject["objectCaching"] = true;
         }
     };
-    Text.prototype.removeOrderedList = function () {
+    Text.prototype.removeOrderedListMarkers = function () {
         var _this_1 = this;
-        if (this.fabricObject.orderedList) {
-            var lineNumbers = this.fabricObject["_currentLineNumbers"];
-            delete this.fabricObject["_currentLineNumbers"];
-            _.each(lineNumbers, function (lineNumber) { return _this_1.canvas.removeFabricObject(lineNumber); });
+        if (this.fabricObject._isOrderedList) {
+            var markerEntities = this.fabricObject._orderedListMarkerEntities;
+            delete this.fabricObject._orderedListMarkerEntities;
+            _.each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
             this.fabricObject["objectCaching"] = true;
         }
     };
@@ -2407,7 +2408,7 @@ var Text = /** @class */ (function (_super) {
         var _this = this;
         if (this.data.bulleted)
             this.enableBullets();
-        if (this.fabricObject.orderedList)
+        if (this.fabricObject._isOrderedList)
             this.enableOrderedList();
         var originalRender = this.fabricObject["_render"];
         var fabric = this.canvas.fabric;
@@ -2470,22 +2471,21 @@ 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 = {};
+            if (fabricText._isOrderedList) {
+                var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
+                var activeMarkers_1 = [];
                 _.each(fabricText._textLines, function (textLine, lineIndex) {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         var styleMap = fabricText._styleMap[lineIndex];
                         if (styleMap.offset === 0) {
-                            if (currentLineNumbers_1[lineIndex]) {
-                                // Reuse existing bullet for this line
-                                activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
+                            if (existingMarkers_1[lineIndex]) {
+                                // Reuse existing marker for this line
+                                activeMarkers_1[lineIndex] = existingMarkers_1[lineIndex];
                             }
                             else {
-                                // Create new bullet for this line
-                                activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                // Create new marker for this line
+                                var textbox = new fabric.Textbox(lineIndex + ".", {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2495,31 +2495,36 @@ var Text = /** @class */ (function (_super) {
                                     lockMovementX: true,
                                     lockMovementY: true,
                                     hasControls: false,
-                                    selectable: false,
-                                    excludeFromExport: true
+                                    selectable: false
                                 });
+                                textbox._isSlaveObject = true;
+                                activeMarkers_1[lineIndex] = textbox;
                             }
                         }
                     }
                 });
-                // Add/Remove bullets from canvas
+                // Add/Remove markers 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);
+                _.each(activeMarkers_1, function (marker) {
+                    if (!marker)
+                        return;
+                    if (!canvas_2.contains(marker)) {
+                        canvas_2.add(marker);
                         canvasDirty_2 = true;
                     }
                 });
-                _.each(currentLineNumbers_1, function (bullet, key) {
-                    if (!activeLineNumbers_1[key]) {
-                        canvas_2.remove(bullet);
+                _.each(existingMarkers_1, function (marker, key) {
+                    if (!marker)
+                        return;
+                    if (!activeMarkers_1[key]) {
+                        canvas_2.remove(marker);
                         canvasDirty_2 = true;
                     }
                 });
                 canvas_2.renderOnAddRemove = true;
-                fabricText["_currentLineNumbers"] = activeLineNumbers_1;
+                fabricText._orderedListMarkerEntities = activeMarkers_1;
                 if (canvasDirty_2) {
                     // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
                     setTimeout(canvas_2.renderAll.bind(canvas_2));
@@ -2550,24 +2555,25 @@ var Text = /** @class */ (function (_super) {
                     top: fabricText.top + yOffset + bulletCenterOffset[1]
                 });
             }
-            var currentLineNumbers = fabricText._currentLineNumbers;
-            if (currentLineNumbers && currentLineNumbers[lineIndex]) {
-                var entry = currentLineNumbers[lineIndex];
+            var orderedListMarkerEntities = fabricText._orderedListMarkerEntities;
+            var xShift = -_this.getOrderedListMargin() + 1;
+            if (orderedListMarkerEntities && orderedListMarkerEntities[lineIndex]) {
+                var entry = orderedListMarkerEntities[lineIndex];
                 var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
                 var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
                 var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
                 var angle = fabricText.angle;
                 var theta = angle * Math.PI / 180;
-                var 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));
                 var lineNumber = _this.getOrderedListStart();
                 for (var i = 0; i < lineIndex; i++) {
-                    if (currentLineNumbers[i])
+                    if (orderedListMarkerEntities[i])
                         lineNumber++;
                 }
                 entry.set({
+                    width: 1,
                     fontSize: fontSize,
                     fontFamily: fontFamily,
                     fill: color,
@@ -3478,7 +3484,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id", "orderedList", "orderedListIndex"];
+        var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3513,6 +3519,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                         this.backgroundColor$.next(this.fabricCanvas.backgroundColor);
                         this.bindFields(canvasState.objects);
                         this.removePersistedBullets();
+                        this.removeSlaveObjects();
                         this.layoutManager$.value.onInit();
                         return [2 /*return*/];
                 }
@@ -3532,6 +3539,17 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 _this.removeFabricObject(object);
         });
     };
+    /**
+     * Remove any slave objects persisted to the canvas; their master objects will recreate them.
+     */
+    AbstractInteractiveCanvas.prototype.removeSlaveObjects = function () {
+        var _this = this;
+        var objects = this.fabricCanvas.getObjects();
+        _.each(objects, function (object) {
+            if (object._isSlaveObject)
+                _this.removeFabricObject(object);
+        });
+    };
     /**
      * @override
      * @inheritDoc

package/dist/object/impl/extended-fabric-object.interface.d.ts

@@ -0,0 +1,7 @@
+import { fabric } from "fabric";
+export interface ExtendedFabricObject extends fabric.Object {
+    /**
+     * If true, this object is a slave object controlled by another object and not directly by the user, such as the line markers in an ordered list.
+     */
+    _isSlaveObject?: boolean;
+}

package/dist/object/impl/extended-fabric-textbox.interface.d.ts

@@ -0,0 +1,7 @@
+import { fabric } from "fabric";
+import { ExtendedFabricObject } from "./extended-fabric-object.interface";
+export interface ExtendedFabricTextbox extends fabric.Textbox, ExtendedFabricObject {
+    _isOrderedList?: boolean;
+    _orderedListStart?: number;
+    _orderedListMarkerEntities?: fabric.Textbox[];
+}

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

@@ -4,6 +4,7 @@ import { ICanvasObject } from "../canvas-object.interface";
 import { AbstractCanvasObject } from "../abstract-canvas-object";
 import { CanvasObjectData } from "../canvas-object-data";
 import { fabric } from "fabric";
+import { ExtendedFabricTextbox } from "./extended-fabric-textbox.interface";
 /**
  * Text field. Displays customizable text.
  */
@@ -49,7 +50,7 @@ export interface IText extends ICanvasObject, IMutableColor, IMutableText, IMuta
      */
     getOrderedListMargin(): number;
 }
-export declare class Text extends AbstractCanvasObject<fabric.Textbox> implements IText {
+export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> implements IText {
     private readonly fontLibrary;
     private baseComponentHeight;
     private readonly text$;
@@ -297,7 +298,7 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
     getOrderedListStart(): number;
     getSizeIncreaseSinceCreation(): number;
     private removeBullets;
-    private removeOrderedList;
+    private removeOrderedListMarkers;
     private applyBulletListMonkeyPatches;
     /**
      * @override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"