@leapfrog/interactive-canvas 2.0.25-beta-5 → 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);
-            canvas.getObjectsInternal().forEach((object) => object.setCoords());
+            // 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.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;
+        });
     }
 }
 
@@ -1780,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;
@@ -2527,9 +2564,15 @@ 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() {
@@ -2550,7 +2593,13 @@ class Text extends AbstractCanvasObject {
         }
     }
     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";
@@ -2716,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.
@@ -3581,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);
-            canvas.getObjectsInternal().forEach((object) => object.setCoords());
+            // 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.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;
+        });
     }
 }
 
@@ -1801,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;
@@ -2548,9 +2585,15 @@ 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() {
@@ -2571,7 +2614,13 @@ class Text extends AbstractCanvasObject {
         }
     }
     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";
@@ -2737,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.
@@ -3602,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/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-5",
+  "version": "2.0.25-beta-6",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"