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

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

@@ -340,8 +340,10 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     cloneObject(sourceObject: FabricObject, objectData: CanvasObjectData): Promise<void>;
+    private redrawScheduled;
     /**
      * Redraw the canvas.
+     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw(): void;
     syncObjectList(): void;

package/dist/interactive-canvas.d.ts

@@ -20,7 +20,6 @@ export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
      */
     redo(): Promise<void>;
     private onFabricSelectionChanged;
-    private enterTextSelectionModeIfRequired;
     private onTextEditing;
     private onDoubleClick;
 }

package/dist/interactive-canvas.es.js

@@ -232,9 +232,15 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            canvas.getObjectsInternal().forEach((object) => {
+                var _a;
+                const canvasObj = canvas.getObjectsByTypeInternal(object.type).find(o => o.getId() === object.getId());
+                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 +268,21 @@ 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);
+        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 +310,6 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         const bodyRows = this.getRows(bodyObjects);
@@ -383,7 +396,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 +473,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -497,12 +515,19 @@ 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);
+        if (this.layoutBatchScheduled) {
+            return;
+        }
+        this.layoutBatchScheduled = true;
+        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;
+        });
     }
 }
 
@@ -1042,7 +1067,8 @@ class AbstractCanvasObject {
             mt: options.allowScale,
             mr: options.allowScale,
             mb: options.allowScale,
-            mtr: options.allowRotate
+            mtr: options.allowRotate,
+            // dragControl: options.allowMove // Show drag control when movement is allowed
         });
     }
 }
@@ -1780,15 +1806,42 @@ var ObjectType;
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(ObjectType.TEXT, canvas, fabricObject, persistedField);
+        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));
-        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();
     }
     /**
@@ -2398,6 +2451,7 @@ class Text extends AbstractCanvasObject {
                                     lockMovementY: true,
                                     hasControls: false,
                                     selectable: false,
+                                    // evented: false, // Don't capture mouse events - allows clicks to pass through to textbox
                                     originX: "left",
                                     originY: "top"
                                 });
@@ -2504,13 +2558,24 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     updateFabricObjectBehavior() {
+        // DON'T call super.updateFabricObjectBehavior() for textboxes
+        // because it locks movement which interferes with text editing in Fabric v7
         super.updateFabricObjectBehavior();
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
+        // For textboxes, we keep them moveable but hide all controls except drag control
+        // This allows text editing to work properly while still supporting drag via the icon
         this.fabricObject.set({
+            lockMovementX: false, // Allow dragging
+            lockMovementY: false, // Allow dragging
             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,
@@ -2520,35 +2585,50 @@ 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() {
         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";
@@ -2714,6 +2794,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.
@@ -2736,7 +2817,7 @@ class AbstractInteractiveCanvas {
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
         this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 4;
+        this.fabricCanvas.targetFindTolerance = 4; // Reduced tolerance for more precise text selection
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3040,7 +3121,6 @@ class AbstractInteractiveCanvas {
      */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
@@ -3052,7 +3132,6 @@ class AbstractInteractiveCanvas {
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
-                // Set image properties and add to the canvas
                 const fabricImage = new this.fabric.Image(image, {
                     id: id,
                     scaleX: newScale,
@@ -3072,7 +3151,6 @@ class AbstractInteractiveCanvas {
                 return object;
             }
             else {
-                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
                         const id = this.randomId();
@@ -3124,14 +3202,13 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
-                moveCursor: 'move',
+                moveCursor: "move",
+                editable: false,
+                editingBorderColor: '#2196F3',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,
-                perPixelTargetFind: false,
-                targetFindTolerance: 4,
                 splitByGrapheme: true,
-                editable: false, // Only enable on double-click
                 padding: 0,
                 cornerSize: 8,
                 touchCornerSize: 12
@@ -3581,9 +3658,17 @@ class AbstractInteractiveCanvas {
     }
     /**
      * Redraw the canvas.
+     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return;
+        }
+        this.redrawScheduled = true;
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3709,7 +3794,6 @@ 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);
@@ -3717,34 +3801,6 @@ 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);
@@ -3899,7 +3955,6 @@ 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", (event) => {
             this.onTextEditing();
             const target = event.target;
@@ -3908,8 +3963,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             }
         });
         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));
     }
     /**
@@ -3944,29 +3997,20 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
-        this.enterTextSelectionModeIfRequired();
-    }
-    enterTextSelectionModeIfRequired() {
-        var _a, _b;
-        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)
-            return;
-        const text = this.selection$.value.objects[0];
-        text.enterEditing();
     }
     onTextEditing() {
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         this.selection$.next(new SelectionData(selected));
     }
     onDoubleClick(event) {
+        var _a, _b;
         const target = event.target;
         if (target && (target.type === 'textbox' || target.type === 'i-text')) {
-            if (!target.isEditing) {
+            const targetIText = target;
+            if (!targetIText.isEditing) {
                 target.set({ editable: true, hoverCursor: 'text' });
-                // target.enterEditing();
-                // target.hiddenTextarea?.focus();
-                this.enterTextSelectionModeIfRequired();
+                (_a = targetIText.enterEditing) === null || _a === void 0 ? void 0 : _a.call(targetIText);
+                (_b = targetIText.hiddenTextarea) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }

package/dist/interactive-canvas.js

@@ -253,9 +253,15 @@ class ResizeCanvasLayoutFunction {
         const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
         if (currentDimensions.height !== targetHeight.height) {
             canvas.setDimensions(targetHeight);
+            canvas.getObjectsInternal().forEach((object) => {
+                var _a;
+                const canvasObj = canvas.getObjectsByTypeInternal(object.type).find(o => o.getId() === object.getId());
+                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 +289,21 @@ 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);
+        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 +331,6 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         const bodyRows = this.getRows(bodyObjects);
@@ -404,7 +417,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 +494,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -518,12 +536,19 @@ 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);
+        if (this.layoutBatchScheduled) {
+            return;
+        }
+        this.layoutBatchScheduled = true;
+        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;
+        });
     }
 }
 
@@ -1063,7 +1088,8 @@ class AbstractCanvasObject {
             mt: options.allowScale,
             mr: options.allowScale,
             mb: options.allowScale,
-            mtr: options.allowRotate
+            mtr: options.allowRotate,
+            // dragControl: options.allowMove // Show drag control when movement is allowed
         });
     }
 }
@@ -1801,15 +1827,42 @@ exports.ObjectType = void 0;
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(exports.ObjectType.TEXT, canvas, fabricObject, persistedField);
+        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));
-        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();
     }
     /**
@@ -2419,6 +2472,7 @@ class Text extends AbstractCanvasObject {
                                     lockMovementY: true,
                                     hasControls: false,
                                     selectable: false,
+                                    // evented: false, // Don't capture mouse events - allows clicks to pass through to textbox
                                     originX: "left",
                                     originY: "top"
                                 });
@@ -2525,13 +2579,24 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     updateFabricObjectBehavior() {
+        // DON'T call super.updateFabricObjectBehavior() for textboxes
+        // because it locks movement which interferes with text editing in Fabric v7
         super.updateFabricObjectBehavior();
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
+        // For textboxes, we keep them moveable but hide all controls except drag control
+        // This allows text editing to work properly while still supporting drag via the icon
         this.fabricObject.set({
+            lockMovementX: false, // Allow dragging
+            lockMovementY: false, // Allow dragging
             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,
@@ -2541,35 +2606,50 @@ 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() {
         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";
@@ -2735,6 +2815,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.
@@ -2757,7 +2838,7 @@ class AbstractInteractiveCanvas {
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
         this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 4;
+        this.fabricCanvas.targetFindTolerance = 4; // Reduced tolerance for more precise text selection
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3061,7 +3142,6 @@ class AbstractInteractiveCanvas {
      */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
@@ -3073,7 +3153,6 @@ class AbstractInteractiveCanvas {
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
-                // Set image properties and add to the canvas
                 const fabricImage = new this.fabric.Image(image, {
                     id: id,
                     scaleX: newScale,
@@ -3093,7 +3172,6 @@ class AbstractInteractiveCanvas {
                 return object;
             }
             else {
-                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
                         const id = this.randomId();
@@ -3145,14 +3223,13 @@ class AbstractInteractiveCanvas {
                 fontFamily: profile.defaultFont,
                 textAlign: profile.defaultTextAlignment,
                 hoverCursor: "move",
-                moveCursor: 'move',
+                moveCursor: "move",
+                editable: false,
+                editingBorderColor: '#2196F3',
                 multiLine: true,
                 lineHeight: profile.defaultLineHeight,
                 charSpacing: profile.defaultCharacterSpacing,
-                perPixelTargetFind: false,
-                targetFindTolerance: 4,
                 splitByGrapheme: true,
-                editable: false, // Only enable on double-click
                 padding: 0,
                 cornerSize: 8,
                 touchCornerSize: 12
@@ -3602,9 +3679,17 @@ class AbstractInteractiveCanvas {
     }
     /**
      * Redraw the canvas.
+     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return;
+        }
+        this.redrawScheduled = true;
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3730,7 +3815,6 @@ 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);
@@ -3738,34 +3822,6 @@ 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);
@@ -3920,7 +3976,6 @@ 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", (event) => {
             this.onTextEditing();
             const target = event.target;
@@ -3929,8 +3984,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             }
         });
         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));
     }
     /**
@@ -3965,29 +4018,20 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
-        this.enterTextSelectionModeIfRequired();
-    }
-    enterTextSelectionModeIfRequired() {
-        var _a, _b;
-        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)
-            return;
-        const text = this.selection$.value.objects[0];
-        text.enterEditing();
     }
     onTextEditing() {
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         this.selection$.next(new SelectionData(selected));
     }
     onDoubleClick(event) {
+        var _a, _b;
         const target = event.target;
         if (target && (target.type === 'textbox' || target.type === 'i-text')) {
-            if (!target.isEditing) {
+            const targetIText = target;
+            if (!targetIText.isEditing) {
                 target.set({ editable: true, hoverCursor: 'text' });
-                // target.enterEditing();
-                // target.hiddenTextarea?.focus();
-                this.enterTextSelectionModeIfRequired();
+                (_a = targetIText.enterEditing) === null || _a === void 0 ? void 0 : _a.call(targetIText);
+                (_b = targetIText.hiddenTextarea) === null || _b === void 0 ? void 0 : _b.focus();
             }
         }
     }

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