@leapfrog/interactive-canvas 2.0.25-beta-7 → 2.0.25-beta-8

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

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

package/dist/interactive-canvas.d.ts

@@ -22,4 +22,5 @@ export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
     private onFabricSelectionChanged;
     private enterTextSelectionModeIfRequired;
     private onTextEditing;
+    private onDoubleClick;
 }

package/dist/interactive-canvas.es.js

@@ -232,18 +232,9 @@ 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();
     }
 }
 
@@ -271,22 +262,13 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        // 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;
-        });
+        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);
     }
     onTextChange() {
         this.resizeCanvas.execute(this.canvas);
@@ -314,9 +296,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        //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
+        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);
         const bodyRows = this.getRows(bodyObjects);
@@ -403,11 +383,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            _(objects).forEach((object) => {
-                if (object.getType() !== ObjectType.VERTICAL_RULE) {
-                    object.updateDimensions();
-                }
-            });
+            object.updateDimensions();
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -480,7 +456,6 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
-        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -522,21 +497,12 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        // 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;
-        });
+        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);
     }
 }
 
@@ -1814,16 +1780,12 @@ 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;
         this.text$ = new BehaviorSubject(this.fabricObject.text);
         this.data.userText = this.fabricObject.text;
         this.textSelection$ = new BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
-        console.log(`inside constructor in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.fabricObject.set({ strokeWidth: 0 });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
@@ -2563,54 +2525,30 @@ class Text extends AbstractCanvasObject {
         this.redraw();
     }
     onTextChange() {
-        console.log(`inside onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        // 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) {
-            console.log(`inside if onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            if (this.getBoundingBox().width > canvasWidth) {
-                this.fabricObject.set({ left: 0, width: canvasWidth });
-                this.redraw();
-            }
+        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
+            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
+            this.redraw();
         }
-        console.log(`end of onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        console.log(`start of onSelectionChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-        this.updateTextSelection(false);
+        this.updateTextSelection();
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection(notifyCanvas = true) {
-        console.log(`start of updateTextSelection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
+    updateTextSelection() {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        if (notifyCanvas) {
-            console.log(`inside if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            this.notifyCanvasOfTextChanges();
-        }
+        this.notifyCanvasOfTextChanges();
     }
     notifyCanvasOfTextChanges() {
-        console.log(`start of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-        if (this.notifyCanvasTimeout) {
-            console.log(`inside timeout if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            clearTimeout(this.notifyCanvasTimeout);
-        }
-        this.notifyCanvasTimeout = setTimeout(() => {
-            console.log(`start of setTimeout in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            this.canvas.notifyTextChanged();
-            this.notifyCanvasTimeout = null;
-        }, this.NOTIFY_DELAY_MS);
-        console.log(`end of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
+        this.canvas.notifyTextChanged();
     }
 }
 Text.NEW_LINE = "\n";
@@ -2618,7 +2556,6 @@ class TextSelection {
     constructor(fabricObject, fontLibrary) {
         this.fabricObject = fabricObject;
         this.fontLibrary = fontLibrary;
-        console.log(`constructor of textselection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.start = this.fabricObject.selectionStart;
         this.end = this.fabricObject.selectionEnd;
         this.length = this.end - this.start;
@@ -2777,7 +2714,6 @@ 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.
@@ -2800,7 +2736,7 @@ class AbstractInteractiveCanvas {
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
         this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 10;
+        this.fabricCanvas.targetFindTolerance = 4;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3194,7 +3130,11 @@ class AbstractInteractiveCanvas {
                 charSpacing: profile.defaultCharacterSpacing,
                 perPixelTargetFind: false,
                 targetFindTolerance: 4,
-                splitByGrapheme: true
+                splitByGrapheme: true,
+                editable: false, // Only enable on double-click
+                padding: 0,
+                cornerSize: 8,
+                touchCornerSize: 12
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);
@@ -3643,16 +3583,7 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        //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;
-        });
+        this.fabricCanvas.requestRenderAll();
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3778,6 +3709,7 @@ class AbstractInteractiveCanvas {
      * Update the actual dimensions of the canvas by multiplying the requested dimensions by the current zoom factor.
      */
     updateCanvasDimensions(dims, zoom) {
+        const oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3785,6 +3717,34 @@ class AbstractInteractiveCanvas {
             width,
             height
         });
+        const scaleFactor = width / oldWidth;
+        const objects = this.fabricCanvas.getObjects();
+        objects.forEach((obj) => {
+            obj.set({
+                left: obj.left * scaleFactor,
+            });
+            if (obj.type === "textbox" || obj.type === "text") {
+                obj.set({
+                    scaleX: 1,
+                    scaleY: 1,
+                    width: obj.width * scaleFactor,
+                });
+            }
+            else if (obj.type === "border" || obj.type === "rect") {
+                obj.set({
+                    width: obj.width * scaleFactor,
+                    scaleX: 1,
+                    strokeUniform: true,
+                });
+            }
+            else {
+                obj.set({
+                    scaleX: obj.scaleX * scaleFactor,
+                });
+            }
+            obj.setCoords();
+        });
+        this.fabricCanvas.requestRenderAll();
     }
     onProfileChanged(profile) {
         this.setMultiSelect(profile.allowMultiSelect);
@@ -3939,8 +3899,18 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.fabricCanvas.on("selection:created", (event) => this.onFabricSelectionChanged(event));
         this.fabricCanvas.on("selection:cleared", (event) => this.onFabricSelectionChanged(event));
         this.fabricCanvas.on("text:editing:entered", () => this.onTextEditing());
-        this.fabricCanvas.on("text:editing:exited", () => this.onTextEditing());
+        //this.fabricCanvas.on("text:editing:exited", () => this.onTextEditing());
+        this.fabricCanvas.on("text:editing:exited", (event) => {
+            this.onTextEditing();
+            const target = event.target;
+            if (target && (target.type === 'textbox' || target.type === 'i-text')) {
+                target.set({ editable: false, hoverCursor: 'move' });
+            }
+        });
         this.fabricCanvas.on("text:changed", () => this.onTextChange());
+        // Handle double-click on textbox to enter editing mode
+        // @ts-ignore
+        this.fabricCanvas.on("mouse:dblclick", (event) => this.onDoubleClick(event));
     }
     /**
      * @override
@@ -3968,7 +3938,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         });
     }
     onFabricSelectionChanged(event) {
-        console.log(`start of onfabricselectionchange in ic.ts - ${MouseEvent}- ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         const selection = new SelectionData(selected);
         if (event) {
@@ -3979,7 +3948,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
     }
     enterTextSelectionModeIfRequired() {
         var _a, _b;
-        console.log(`start of enterTextSelectionModeIfRequired in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
             return;
         if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== ObjectType.TEXT)
@@ -3988,10 +3956,20 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         text.enterEditing();
     }
     onTextEditing() {
-        console.log(`start of onTextEditing in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         this.selection$.next(new SelectionData(selected));
     }
+    onDoubleClick(event) {
+        const target = event.target;
+        if (target && (target.type === 'textbox' || target.type === 'i-text')) {
+            if (!target.isEditing) {
+                target.set({ editable: true, hoverCursor: 'text' });
+                // target.enterEditing();
+                // target.hiddenTextarea?.focus();
+                this.enterTextSelectionModeIfRequired();
+            }
+        }
+    }
 }
 
 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

@@ -253,18 +253,9 @@ 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();
     }
 }
 
@@ -292,22 +283,13 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        // 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;
-        });
+        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);
     }
     onTextChange() {
         this.resizeCanvas.execute(this.canvas);
@@ -335,9 +317,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        //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
+        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);
         const bodyRows = this.getRows(bodyObjects);
@@ -424,11 +404,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            _(objects).forEach((object) => {
-                if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
-                    object.updateDimensions();
-                }
-            });
+            object.updateDimensions();
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -501,7 +477,6 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
-        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -543,21 +518,12 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        // 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;
-        });
+        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);
     }
 }
 
@@ -1835,16 +1801,12 @@ 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;
         this.text$ = new rxjs.BehaviorSubject(this.fabricObject.text);
         this.data.userText = this.fabricObject.text;
         this.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
-        console.log(`inside constructor in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.fabricObject.set({ strokeWidth: 0 });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
@@ -2584,54 +2546,30 @@ class Text extends AbstractCanvasObject {
         this.redraw();
     }
     onTextChange() {
-        console.log(`inside onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        // 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) {
-            console.log(`inside if onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            if (this.getBoundingBox().width > canvasWidth) {
-                this.fabricObject.set({ left: 0, width: canvasWidth });
-                this.redraw();
-            }
+        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
+            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
+            this.redraw();
         }
-        console.log(`end of onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        console.log(`start of onSelectionChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-        this.updateTextSelection(false);
+        this.updateTextSelection();
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection(notifyCanvas = true) {
-        console.log(`start of updateTextSelection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
+    updateTextSelection() {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        if (notifyCanvas) {
-            console.log(`inside if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            this.notifyCanvasOfTextChanges();
-        }
+        this.notifyCanvasOfTextChanges();
     }
     notifyCanvasOfTextChanges() {
-        console.log(`start of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-        if (this.notifyCanvasTimeout) {
-            console.log(`inside timeout if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            clearTimeout(this.notifyCanvasTimeout);
-        }
-        this.notifyCanvasTimeout = setTimeout(() => {
-            console.log(`start of setTimeout in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
-            this.canvas.notifyTextChanged();
-            this.notifyCanvasTimeout = null;
-        }, this.NOTIFY_DELAY_MS);
-        console.log(`end of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
+        this.canvas.notifyTextChanged();
     }
 }
 Text.NEW_LINE = "\n";
@@ -2639,7 +2577,6 @@ class TextSelection {
     constructor(fabricObject, fontLibrary) {
         this.fabricObject = fabricObject;
         this.fontLibrary = fontLibrary;
-        console.log(`constructor of textselection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         this.start = this.fabricObject.selectionStart;
         this.end = this.fabricObject.selectionEnd;
         this.length = this.end - this.start;
@@ -2798,7 +2735,6 @@ 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.
@@ -2821,7 +2757,7 @@ class AbstractInteractiveCanvas {
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
         this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 10;
+        this.fabricCanvas.targetFindTolerance = 4;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3215,7 +3151,11 @@ class AbstractInteractiveCanvas {
                 charSpacing: profile.defaultCharacterSpacing,
                 perPixelTargetFind: false,
                 targetFindTolerance: 4,
-                splitByGrapheme: true
+                splitByGrapheme: true,
+                editable: false, // Only enable on double-click
+                padding: 0,
+                cornerSize: 8,
+                touchCornerSize: 12
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);
@@ -3664,16 +3604,7 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        //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;
-        });
+        this.fabricCanvas.requestRenderAll();
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3799,6 +3730,7 @@ class AbstractInteractiveCanvas {
      * Update the actual dimensions of the canvas by multiplying the requested dimensions by the current zoom factor.
      */
     updateCanvasDimensions(dims, zoom) {
+        const oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3806,6 +3738,34 @@ class AbstractInteractiveCanvas {
             width,
             height
         });
+        const scaleFactor = width / oldWidth;
+        const objects = this.fabricCanvas.getObjects();
+        objects.forEach((obj) => {
+            obj.set({
+                left: obj.left * scaleFactor,
+            });
+            if (obj.type === "textbox" || obj.type === "text") {
+                obj.set({
+                    scaleX: 1,
+                    scaleY: 1,
+                    width: obj.width * scaleFactor,
+                });
+            }
+            else if (obj.type === "border" || obj.type === "rect") {
+                obj.set({
+                    width: obj.width * scaleFactor,
+                    scaleX: 1,
+                    strokeUniform: true,
+                });
+            }
+            else {
+                obj.set({
+                    scaleX: obj.scaleX * scaleFactor,
+                });
+            }
+            obj.setCoords();
+        });
+        this.fabricCanvas.requestRenderAll();
     }
     onProfileChanged(profile) {
         this.setMultiSelect(profile.allowMultiSelect);
@@ -3960,8 +3920,18 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.fabricCanvas.on("selection:created", (event) => this.onFabricSelectionChanged(event));
         this.fabricCanvas.on("selection:cleared", (event) => this.onFabricSelectionChanged(event));
         this.fabricCanvas.on("text:editing:entered", () => this.onTextEditing());
-        this.fabricCanvas.on("text:editing:exited", () => this.onTextEditing());
+        //this.fabricCanvas.on("text:editing:exited", () => this.onTextEditing());
+        this.fabricCanvas.on("text:editing:exited", (event) => {
+            this.onTextEditing();
+            const target = event.target;
+            if (target && (target.type === 'textbox' || target.type === 'i-text')) {
+                target.set({ editable: false, hoverCursor: 'move' });
+            }
+        });
         this.fabricCanvas.on("text:changed", () => this.onTextChange());
+        // Handle double-click on textbox to enter editing mode
+        // @ts-ignore
+        this.fabricCanvas.on("mouse:dblclick", (event) => this.onDoubleClick(event));
     }
     /**
      * @override
@@ -3989,7 +3959,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         });
     }
     onFabricSelectionChanged(event) {
-        console.log(`start of onfabricselectionchange in ic.ts - ${MouseEvent}- ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         const selection = new SelectionData(selected);
         if (event) {
@@ -4000,7 +3969,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
     }
     enterTextSelectionModeIfRequired() {
         var _a, _b;
-        console.log(`start of enterTextSelectionModeIfRequired in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
             return;
         if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== exports.ObjectType.TEXT)
@@ -4009,10 +3977,20 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         text.enterEditing();
     }
     onTextEditing() {
-        console.log(`start of onTextEditing in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         this.selection$.next(new SelectionData(selected));
     }
+    onDoubleClick(event) {
+        const target = event.target;
+        if (target && (target.type === 'textbox' || target.type === 'i-text')) {
+            if (!target.isEditing) {
+                target.set({ editable: true, hoverCursor: 'text' });
+                // target.enterEditing();
+                // target.hiddenTextarea?.focus();
+                this.enterTextSelectionModeIfRequired();
+            }
+        }
+    }
 }
 
 exports.AbstractCanvasObject = AbstractCanvasObject;

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

@@ -9,7 +9,6 @@ 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,6 +36,5 @@ export declare class StandardLayoutManager extends AbstractLayoutManager {
      * @override
      */
     onMarginChange(): void;
-    private layoutBatchScheduled;
     private stackAndRedraw;
 }

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

@@ -63,8 +63,6 @@ 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-7",
+  "version": "2.0.25-beta-8",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"