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

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,12 +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();
                 }
@@ -274,7 +271,6 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        // Batch dimension changes to avoid redundant layout passes
         if (this.dimensionsLayoutScheduled) {
             return;
         }
@@ -314,9 +310,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,6 +397,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
+            //object.updateDimensions();
             _(objects).forEach((object) => {
                 if (object.getType() !== ObjectType.VERTICAL_RULE) {
                     object.updateDimensions();
@@ -522,12 +517,10 @@ 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);
@@ -1814,19 +1807,43 @@ 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.NOTIFY_DELAY_MS = 150;
         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.set({strokeWidth: 0});
+        this.fabricObject.set({
+            strokeWidth: 0,
+            perPixelTargetFind: false // Disable per-pixel detection for this object
+        });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
+        this.fabricObject.containsPoint.bind(this.fabricObject);
+        this.fabricObject.containsPoint = function (point) {
+            const coords = this.getCoords();
+            if (coords.length !== 4)
+                return false;
+            let inside = false;
+            for (let i = 0, j = coords.length - 1; i < coords.length; j = i++) {
+                const xi = coords[i].x, yi = coords[i].y;
+                const xj = coords[j].x, yj = coords[j].y;
+                const intersect = ((yi > point.y) !== (yj > point.y))
+                    && (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);
+                if (intersect)
+                    inside = !inside;
+            }
+            return inside;
+        };
+        this.fabricObject.on("mousedown", (e) => {
+            var _a;
+            if (!this.fabricObject.isEditing) {
+                (_a = e.e) === null || _a === void 0 ? void 0 : _a.preventDefault();
+            }
+        });
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2546,9 +2563,16 @@ class Text extends AbstractCanvasObject {
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
         this.fabricObject.set({
+            lockMovementX: false,
+            lockMovementY: false,
             lockScalingY: true,
             lockScalingX: this.isPinToBottom(),
-            lockScalingFlip: true
+            lockScalingFlip: true,
+            lockRotation: true,
+            selectable: true,
+            editable: false, // Only enable on double-click
+            hoverCursor: "move", // Show move cursor by default
+            moveCursor: "move",
         });
         this.fabricObject.setControlsVisibility({
             tl: false,
@@ -2558,59 +2582,49 @@ class Text extends AbstractCanvasObject {
             ml: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
             mt: false,
             mr: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mb: false
+            mb: false,
+            mtr: false
         });
         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();
             }
         }
-        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);
     }
     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()}`);
         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();
         }
     }
     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()}`);
     }
 }
 Text.NEW_LINE = "\n";
@@ -2618,7 +2632,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;
@@ -2800,7 +2813,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 +3207,12 @@ class AbstractInteractiveCanvas {
                 charSpacing: profile.defaultCharacterSpacing,
                 perPixelTargetFind: false,
                 targetFindTolerance: 4,
-                splitByGrapheme: true
+                splitByGrapheme: true,
+                editable: false, // Only enable on double-click
+                editingBorderColor: '#2196F3',
+                padding: 0,
+                cornerSize: 8,
+                touchCornerSize: 12
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);
@@ -3643,12 +3661,10 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        //this.fabricCanvas.requestRenderAll();
         if (this.redrawScheduled) {
-            return; // Already scheduled, don't schedule again
+            return;
         }
         this.redrawScheduled = true;
-        // Use requestAnimationFrame for smoother rendering and automatic batching
         requestAnimationFrame(() => {
             this.fabricCanvas.requestRenderAll();
             this.redrawScheduled = false;
@@ -3778,6 +3794,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 +3802,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 +3984,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 +4023,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 +4033,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 +4041,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,12 +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();
                 }
@@ -295,7 +292,6 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        // Batch dimension changes to avoid redundant layout passes
         if (this.dimensionsLayoutScheduled) {
             return;
         }
@@ -335,9 +331,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,6 +418,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
+            //object.updateDimensions();
             _(objects).forEach((object) => {
                 if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
                     object.updateDimensions();
@@ -543,12 +538,10 @@ 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);
@@ -1835,19 +1828,43 @@ 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.NOTIFY_DELAY_MS = 150;
         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.set({strokeWidth: 0});
+        this.fabricObject.set({
+            strokeWidth: 0,
+            perPixelTargetFind: false // Disable per-pixel detection for this object
+        });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
+        this.fabricObject.containsPoint.bind(this.fabricObject);
+        this.fabricObject.containsPoint = function (point) {
+            const coords = this.getCoords();
+            if (coords.length !== 4)
+                return false;
+            let inside = false;
+            for (let i = 0, j = coords.length - 1; i < coords.length; j = i++) {
+                const xi = coords[i].x, yi = coords[i].y;
+                const xj = coords[j].x, yj = coords[j].y;
+                const intersect = ((yi > point.y) !== (yj > point.y))
+                    && (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);
+                if (intersect)
+                    inside = !inside;
+            }
+            return inside;
+        };
+        this.fabricObject.on("mousedown", (e) => {
+            var _a;
+            if (!this.fabricObject.isEditing) {
+                (_a = e.e) === null || _a === void 0 ? void 0 : _a.preventDefault();
+            }
+        });
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2567,9 +2584,16 @@ class Text extends AbstractCanvasObject {
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
         this.fabricObject.set({
+            lockMovementX: false,
+            lockMovementY: false,
             lockScalingY: true,
             lockScalingX: this.isPinToBottom(),
-            lockScalingFlip: true
+            lockScalingFlip: true,
+            lockRotation: true,
+            selectable: true,
+            editable: false, // Only enable on double-click
+            hoverCursor: "move", // Show move cursor by default
+            moveCursor: "move",
         });
         this.fabricObject.setControlsVisibility({
             tl: false,
@@ -2579,59 +2603,49 @@ class Text extends AbstractCanvasObject {
             ml: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
             mt: false,
             mr: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mb: false
+            mb: false,
+            mtr: false
         });
         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();
             }
         }
-        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);
     }
     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()}`);
         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();
         }
     }
     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()}`);
     }
 }
 Text.NEW_LINE = "\n";
@@ -2639,7 +2653,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;
@@ -2821,7 +2834,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 +3228,12 @@ class AbstractInteractiveCanvas {
                 charSpacing: profile.defaultCharacterSpacing,
                 perPixelTargetFind: false,
                 targetFindTolerance: 4,
-                splitByGrapheme: true
+                splitByGrapheme: true,
+                editable: false, // Only enable on double-click
+                editingBorderColor: '#2196F3',
+                padding: 0,
+                cornerSize: 8,
+                touchCornerSize: 12
             };
             const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
             this.fabricCanvas.add(fabricTextbox);
@@ -3664,12 +3682,10 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        //this.fabricCanvas.requestRenderAll();
         if (this.redrawScheduled) {
-            return; // Already scheduled, don't schedule again
+            return;
         }
         this.redrawScheduled = true;
-        // Use requestAnimationFrame for smoother rendering and automatic batching
         requestAnimationFrame(() => {
             this.fabricCanvas.requestRenderAll();
             this.redrawScheduled = false;
@@ -3799,6 +3815,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 +3823,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 +4005,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 +4044,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 +4054,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 +4062,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/package.json

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