@leapfrog/interactive-canvas 1.14.2 → 1.14.4

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/interactive-canvas.es.js

@@ -410,6 +410,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         var footerObjects = objects[0];
         var bodyObjects = objects[1];
         var bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
+        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         var bodyRows = this.getRows(bodyObjects);
@@ -2483,7 +2484,7 @@ var Text = /** @class */ (function (_super) {
                             }
                             else {
                                 // Create new marker for this line
-                                activeMarkers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                var textbox = new fabric.Textbox(lineIndex + ".", {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2493,9 +2494,10 @@ var Text = /** @class */ (function (_super) {
                                     lockMovementX: true,
                                     lockMovementY: true,
                                     hasControls: false,
-                                    selectable: false,
-                                    excludeFromExport: true
+                                    selectable: false
                                 });
+                                textbox._isSlaveObject = true;
+                                activeMarkers_1[lineIndex] = textbox;
                             }
                         }
                     }
@@ -3483,7 +3485,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id", "_isOrderedList", "_orderedListStart"];
+        var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3518,6 +3520,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*/];
                 }
@@ -3537,6 +3540,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

@@ -412,6 +412,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
         var footerObjects = objects[0];
         var bodyObjects = objects[1];
         var bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
+        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         var bodyRows = this.getRows(bodyObjects);
@@ -2485,7 +2486,7 @@ var Text = /** @class */ (function (_super) {
                             }
                             else {
                                 // Create new marker for this line
-                                activeMarkers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
+                                var textbox = new fabric.Textbox(lineIndex + ".", {
                                     left: 0,
                                     top: 0,
                                     fill: fabricText.fill,
@@ -2495,9 +2496,10 @@ var Text = /** @class */ (function (_super) {
                                     lockMovementX: true,
                                     lockMovementY: true,
                                     hasControls: false,
-                                    selectable: false,
-                                    excludeFromExport: true
+                                    selectable: false
                                 });
+                                textbox._isSlaveObject = true;
+                                activeMarkers_1[lineIndex] = textbox;
                             }
                         }
                     }
@@ -3483,7 +3485,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         var objects = _(this.objects$.value)
             .map(function (x) { return x.persist(); })
             .value();
-        var includedProperties = ["id", "_isOrderedList", "_orderedListStart"];
+        var includedProperties = ["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"];
         var json = this.fabricCanvas.toJSON(includedProperties);
         return {
             dimensions: this.dimensions$.value,
@@ -3518,6 +3520,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*/];
                 }
@@ -3537,6 +3540,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

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

package/package.json

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