@leapfrog/interactive-canvas 2.0.25-beta-4 → 2.0.25-beta-6

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

@@ -340,6 +340,7 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     cloneObject(sourceObject: FabricObject, objectData: CanvasObjectData): Promise<void>;
+    private redrawScheduled;
     /**
      * Redraw the canvas.
      */

package/dist/interactive-canvas.es.js

@@ -232,9 +232,18 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            // Only update coords for objects affected by height change (pinned to bottom, etc.)
+            // This is much faster than updating all objects on slow machines
+            canvas.getObjectsInternal().forEach((object) => {
+                var _a;
+                const canvasObj = canvas.getObjectsByTypeInternal(object.type).find(o => o.getId() === object.getId());
+                // Only update coords for objects that are positioned relative to canvas bottom or that might be affected
+                if (canvasObj && (((_a = canvasObj.isPinToBottom) === null || _a === void 0 ? void 0 : _a.call(canvasObj)) || object.top > currentDimensions.heightPx * 0.5)) {
+                    object.setCoords();
+                }
+            });
+            canvas.redraw();
         }
-        canvas.getObjectsInternal().forEach((object) => object.setCoords());
-        canvas.redraw();
     }
 }
 
@@ -262,13 +271,22 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        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);
+        // Batch dimension changes to avoid redundant layout passes
+        if (this.dimensionsLayoutScheduled) {
+            return;
+        }
+        this.dimensionsLayoutScheduled = true;
+        Promise.resolve().then(() => {
+            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);
+            this.dimensionsLayoutScheduled = false;
+        });
     }
     onTextChange() {
         this.resizeCanvas.execute(this.canvas);
@@ -296,7 +314,9 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
+        //canvas.redraw();
+        // No need to redraw here - it will be called by the layout manager after all layout functions complete
+        // This reduces redundant render passes significantly
         //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);
         const bodyRows = this.getRows(bodyObjects);
@@ -383,7 +403,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            object.updateDimensions();
+            _(objects).forEach((object) => {
+                if (object.getType() !== ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -456,6 +480,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -497,12 +522,21 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        this.stackObjects.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.updateObjectDimensions.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
+        // Batch multiple layout requests into a single pass
+        if (this.layoutBatchScheduled) {
+            return;
+        }
+        this.layoutBatchScheduled = true;
+        // Use microtask to batch synchronous calls, but still execute before next frame
+        Promise.resolve().then(() => {
+            this.stackObjects.execute(this.canvas);
+            this.repositionCutoffs.execute(this.canvas);
+            this.repositionBorders.execute(this.canvas);
+            this.repositionBackgrounds.execute(this.canvas);
+            this.updateObjectDimensions.execute(this.canvas);
+            this.redrawAll.execute(this.canvas);
+            this.layoutBatchScheduled = false;
+        });
     }
 }
 
@@ -1449,19 +1483,14 @@ class HorizontalRule extends AbstractCanvasObject {
 
 class Image extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
-        var _a;
         super(ObjectType.IMAGE, canvas, fabricObject, persistedField);
         this.DEFAULT_RESTRICTIONS = {
             minWidth: 1,
             minHeight: 1
         };
         this.canvas = canvas;
-        console.log("fabric object", this.fabricObject);
-        console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
         this.imageUrl$ = new BehaviorSubject(this.fabricObject.getSrc());
-        console.log("imageUrl$", this.imageUrl$);
         this.data.imagePath = this.imageUrl$.value;
-        console.log("this.data.imagePath", this.data.imagePath);
         this.layoutWidth = this.getBoundingBox().width;
     }
     /**
@@ -1785,6 +1814,9 @@ var ObjectType;
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(ObjectType.TEXT, canvas, fabricObject, persistedField);
+        //private notifyCanvasTimeout: NodeJS.Timeout | null = null;
+        this.notifyCanvasTimeout = null;
+        this.NOTIFY_DELAY_MS = 150; // Debounce canvas notifications
         this.canvas = canvas;
         this.fontLibrary = canvas.getFontLibrary();
         this.baseComponentHeight = this.fabricObject.height;
@@ -2532,28 +2564,42 @@ class Text extends AbstractCanvasObject {
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
-            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
-            this.redraw();
+        // Only check width bounds if text is close to canvas edge (performance optimization)
+        const currentLeft = this.fabricObject.left || 0;
+        const canvasWidth = this.canvas.getDimensions().widthPx;
+        // Skip expensive getBoundingBox if object is clearly within bounds
+        if (currentLeft + (this.fabricObject.width || 0) > canvasWidth * 0.9) {
+            if (this.getBoundingBox().width > canvasWidth) {
+                this.fabricObject.set({ left: 0, width: canvasWidth });
+                this.redraw();
+            }
         }
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection();
+        this.updateTextSelection(false);
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection() {
+    updateTextSelection(notifyCanvas = true) {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        this.notifyCanvasOfTextChanges();
+        if (notifyCanvas) {
+            this.notifyCanvasOfTextChanges();
+        }
     }
     notifyCanvasOfTextChanges() {
-        this.canvas.notifyTextChanged();
+        if (this.notifyCanvasTimeout) {
+            clearTimeout(this.notifyCanvasTimeout);
+        }
+        this.notifyCanvasTimeout = setTimeout(() => {
+            this.canvas.notifyTextChanged();
+            this.notifyCanvasTimeout = null;
+        }, this.NOTIFY_DELAY_MS);
     }
 }
 Text.NEW_LINE = "\n";
@@ -2719,6 +2765,7 @@ class AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.fontLibrary = new FontLibrary();
         this.dimensionChangeRejections$ = new Subject();
+        this.redrawScheduled = false;
         this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
         /**
          * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3066,25 +3113,12 @@ class AbstractInteractiveCanvas {
                     originY: "top",
                     src: imageUrl,
                     crossOrigin: "anonymous",
-                    /*toObject: function () {
-                        return {
-                            ...fabric.Object.prototype.toObject.call(this),
-                            crossOrigin: this.crossOrigin,
-                            src: this.src,
-                            id: id
-                        };
-                    },*/
                 });
-                // fabricImage.toDataURL({ format: 'png' });
                 yield fabricImage.setSrc(imageUrl, options);
                 this.fabricCanvas.add(fabricImage);
                 const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
                 canvasObjectData.imagePath = imageUrl;
-                console.log("Assigned imagePath:", canvasObjectData.imagePath);
                 const object = new Image(this, fabricImage, canvasObjectData);
-                console.log("Created Image object with imagePath:", object);
-                object.data.imagePath = imageUrl;
-                object.imageUrl$.next(imageUrl);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3142,6 +3176,7 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
+                moveCursor: 'move',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,
@@ -3596,7 +3631,16 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        //this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return; // Already scheduled, don't schedule again
+        }
+        this.redrawScheduled = true;
+        // Use requestAnimationFrame for smoother rendering and automatic batching
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())

package/dist/interactive-canvas.js

@@ -253,9 +253,18 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            // Only update coords for objects affected by height change (pinned to bottom, etc.)
+            // This is much faster than updating all objects on slow machines
+            canvas.getObjectsInternal().forEach((object) => {
+                var _a;
+                const canvasObj = canvas.getObjectsByTypeInternal(object.type).find(o => o.getId() === object.getId());
+                // Only update coords for objects that are positioned relative to canvas bottom or that might be affected
+                if (canvasObj && (((_a = canvasObj.isPinToBottom) === null || _a === void 0 ? void 0 : _a.call(canvasObj)) || object.top > currentDimensions.heightPx * 0.5)) {
+                    object.setCoords();
+                }
+            });
+            canvas.redraw();
         }
-        canvas.getObjectsInternal().forEach((object) => object.setCoords());
-        canvas.redraw();
     }
 }
 
@@ -283,13 +292,22 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        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);
+        // Batch dimension changes to avoid redundant layout passes
+        if (this.dimensionsLayoutScheduled) {
+            return;
+        }
+        this.dimensionsLayoutScheduled = true;
+        Promise.resolve().then(() => {
+            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);
+            this.dimensionsLayoutScheduled = false;
+        });
     }
     onTextChange() {
         this.resizeCanvas.execute(this.canvas);
@@ -317,7 +335,9 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
+        //canvas.redraw();
+        // No need to redraw here - it will be called by the layout manager after all layout functions complete
+        // This reduces redundant render passes significantly
         //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);
         const bodyRows = this.getRows(bodyObjects);
@@ -404,7 +424,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            object.updateDimensions();
+            _(objects).forEach((object) => {
+                if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -477,6 +501,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -518,12 +543,21 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        this.stackObjects.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.updateObjectDimensions.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
+        // Batch multiple layout requests into a single pass
+        if (this.layoutBatchScheduled) {
+            return;
+        }
+        this.layoutBatchScheduled = true;
+        // Use microtask to batch synchronous calls, but still execute before next frame
+        Promise.resolve().then(() => {
+            this.stackObjects.execute(this.canvas);
+            this.repositionCutoffs.execute(this.canvas);
+            this.repositionBorders.execute(this.canvas);
+            this.repositionBackgrounds.execute(this.canvas);
+            this.updateObjectDimensions.execute(this.canvas);
+            this.redrawAll.execute(this.canvas);
+            this.layoutBatchScheduled = false;
+        });
     }
 }
 
@@ -1470,19 +1504,14 @@ class HorizontalRule extends AbstractCanvasObject {
 
 class Image extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
-        var _a;
         super(exports.ObjectType.IMAGE, canvas, fabricObject, persistedField);
         this.DEFAULT_RESTRICTIONS = {
             minWidth: 1,
             minHeight: 1
         };
         this.canvas = canvas;
-        console.log("fabric object", this.fabricObject);
-        console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
         this.imageUrl$ = new rxjs.BehaviorSubject(this.fabricObject.getSrc());
-        console.log("imageUrl$", this.imageUrl$);
         this.data.imagePath = this.imageUrl$.value;
-        console.log("this.data.imagePath", this.data.imagePath);
         this.layoutWidth = this.getBoundingBox().width;
     }
     /**
@@ -1806,6 +1835,9 @@ exports.ObjectType = void 0;
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(exports.ObjectType.TEXT, canvas, fabricObject, persistedField);
+        //private notifyCanvasTimeout: NodeJS.Timeout | null = null;
+        this.notifyCanvasTimeout = null;
+        this.NOTIFY_DELAY_MS = 150; // Debounce canvas notifications
         this.canvas = canvas;
         this.fontLibrary = canvas.getFontLibrary();
         this.baseComponentHeight = this.fabricObject.height;
@@ -2553,28 +2585,42 @@ class Text extends AbstractCanvasObject {
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
-            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
-            this.redraw();
+        // Only check width bounds if text is close to canvas edge (performance optimization)
+        const currentLeft = this.fabricObject.left || 0;
+        const canvasWidth = this.canvas.getDimensions().widthPx;
+        // Skip expensive getBoundingBox if object is clearly within bounds
+        if (currentLeft + (this.fabricObject.width || 0) > canvasWidth * 0.9) {
+            if (this.getBoundingBox().width > canvasWidth) {
+                this.fabricObject.set({ left: 0, width: canvasWidth });
+                this.redraw();
+            }
         }
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection();
+        this.updateTextSelection(false);
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection() {
+    updateTextSelection(notifyCanvas = true) {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        this.notifyCanvasOfTextChanges();
+        if (notifyCanvas) {
+            this.notifyCanvasOfTextChanges();
+        }
     }
     notifyCanvasOfTextChanges() {
-        this.canvas.notifyTextChanged();
+        if (this.notifyCanvasTimeout) {
+            clearTimeout(this.notifyCanvasTimeout);
+        }
+        this.notifyCanvasTimeout = setTimeout(() => {
+            this.canvas.notifyTextChanged();
+            this.notifyCanvasTimeout = null;
+        }, this.NOTIFY_DELAY_MS);
     }
 }
 Text.NEW_LINE = "\n";
@@ -2740,6 +2786,7 @@ class AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.fontLibrary = new FontLibrary();
         this.dimensionChangeRejections$ = new rxjs.Subject();
+        this.redrawScheduled = false;
         this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
         /**
          * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3087,25 +3134,12 @@ class AbstractInteractiveCanvas {
                     originY: "top",
                     src: imageUrl,
                     crossOrigin: "anonymous",
-                    /*toObject: function () {
-                        return {
-                            ...fabric.Object.prototype.toObject.call(this),
-                            crossOrigin: this.crossOrigin,
-                            src: this.src,
-                            id: id
-                        };
-                    },*/
                 });
-                // fabricImage.toDataURL({ format: 'png' });
                 yield fabricImage.setSrc(imageUrl, options);
                 this.fabricCanvas.add(fabricImage);
                 const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
                 canvasObjectData.imagePath = imageUrl;
-                console.log("Assigned imagePath:", canvasObjectData.imagePath);
                 const object = new Image(this, fabricImage, canvasObjectData);
-                console.log("Created Image object with imagePath:", object);
-                object.data.imagePath = imageUrl;
-                object.imageUrl$.next(imageUrl);
                 this.trackNewObject(object);
                 this.syncObjectList();
                 return object;
@@ -3163,6 +3197,7 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
+                moveCursor: 'move',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,
@@ -3617,7 +3652,16 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        //this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return; // Already scheduled, don't schedule again
+        }
+        this.redrawScheduled = true;
+        // Use requestAnimationFrame for smoother rendering and automatic batching
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())

package/dist/layout/advanced-layout-manager.d.ts

@@ -9,6 +9,7 @@ export declare class AdvancedLayoutManager extends AbstractLayoutManager {
     private repositionCutoffs;
     private repositionBackgrounds;
     private resizeCanvas;
+    private dimensionsLayoutScheduled;
     constructor(canvas: IInteractiveCanvas);
     onCanvasDimensionsChange(): void;
     onTextChange(): void;

package/dist/layout/standard-layout-manager.d.ts

@@ -36,5 +36,6 @@ export declare class StandardLayoutManager extends AbstractLayoutManager {
      * @override
      */
     onMarginChange(): void;
+    private layoutBatchScheduled;
     private stackAndRedraw;
 }

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

@@ -8,7 +8,7 @@ export declare abstract class AbstractCanvasObject<T extends FabricObject> imple
     protected pinToBottomDistance: number;
     protected canvas: IInteractiveCanvas;
     protected fabricObject: T;
-    data: CanvasObjectData;
+    protected data: CanvasObjectData;
     private readonly dimensions$;
     private readonly opacity$;
     /**

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

@@ -1,7 +1,7 @@
 import { IDimensionRestrictions, IInteractiveCanvas, IMutableImage, IMutablePosition, IPosition } from "../..";
 import { ICanvasObject } from "../canvas-object.interface";
 import { AbstractCanvasObject } from "../abstract-canvas-object";
-import { BehaviorSubject, Observable } from "rxjs";
+import { Observable } from "rxjs";
 import { CanvasObjectData } from "../canvas-object-data";
 import { FabricImage } from "fabric";
 /**
@@ -12,7 +12,7 @@ export interface IImage extends ICanvasObject, IMutableImage, IMutablePosition {
 export declare class Image extends AbstractCanvasObject<FabricImage> implements IImage {
     private readonly DEFAULT_RESTRICTIONS;
     private layoutWidth;
-    imageUrl$: BehaviorSubject<string>;
+    private readonly imageUrl$;
     constructor(canvas: IInteractiveCanvas, fabricObject: FabricImage, persistedField?: CanvasObjectData);
     /**
      * @override

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

@@ -63,6 +63,8 @@ export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> im
     private readonly text$;
     private readonly textSelection$;
     static readonly NEW_LINE: string;
+    private notifyCanvasTimeout;
+    private readonly NOTIFY_DELAY_MS;
     constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Textbox, persistedField?: CanvasObjectData);
     /**
      * @override

package/package.json

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