@leapfrog/interactive-canvas 2.0.25-beta-14 → 2.0.25-beta-16

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

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

package/dist/interactive-canvas.es.js

@@ -232,9 +232,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();
     }
 }
 
@@ -264,7 +270,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
+        // 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);
@@ -351,7 +357,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            object.updateDimensions();
+            _(objects).forEach((object) => {
+                if (object.getType() !== ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -437,15 +447,22 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
+        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        this.pinToBottom.execute(this.canvas);
-        // this.stackObjects.execute(this.canvas);
-        this.dimensionChange();
-        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.dimensionChange();
+            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);
@@ -456,9 +473,7 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
     dimensionChange() {
         const canvasMargin = this.canvas.getMargin();
         const canvasDimensions = this.canvas.getDimensions();
-        const allObjects = this.canvas.getObjectsByTypesInternal(ObjectType.TEXT, ObjectType.RICH_TEXT, 
-        //ObjectType.IMAGE,
-        ObjectType.RECTANGLE, ObjectType.VERTICAL_RULE, ObjectType.HORIZONTAL_RULE);
+        const allObjects = this.canvas.getObjectsByTypesInternal(ObjectType.TEXT, ObjectType.RICH_TEXT, ObjectType.RECTANGLE, ObjectType.VERTICAL_RULE, ObjectType.HORIZONTAL_RULE);
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
         this.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.
@@ -484,6 +499,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -525,12 +541,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;
+        });
     }
 }
 
@@ -997,7 +1020,7 @@ class AbstractCanvasObject {
         //no-op
     }
     preventLeavingCanvas() {
-        const overflow = this.getCanvasOverflow();
+        const overflow = this.getCanvasOverflowForBoundaryPrevention();
         if (overflow.hasOverflow) {
             const adjustX = overflow.left || -overflow.right;
             const adjustY = overflow.top || -overflow.bottom;
@@ -1023,6 +1046,29 @@ class AbstractCanvasObject {
             hasOverflow: top > 0 || right > 0 || bottom > 0 || left > 0
         };
     }
+    getCanvasOverflowForBoundaryPrevention() {
+        // Use a simpler bounding box calculation for boundary prevention
+        // to avoid issues with decorative elements (like ordered list markers)
+        // extending beyond the main object bounds
+        const bound = this.getSimpleBoundingBox();
+        const canvasDimensions = this.canvas.getDimensions();
+        const top = Math.max(0, 0 - bound.top);
+        const right = Math.max(0, bound.left + bound.width - canvasDimensions.widthPx);
+        const bottom = Math.max(0, bound.top + bound.height - canvasDimensions.heightPx);
+        const left = Math.max(0, 0 - bound.left);
+        return {
+            top: top,
+            right: right,
+            bottom: bottom,
+            left: left,
+            hasOverflow: top > 0 || right > 0 || bottom > 0 || left > 0
+        };
+    }
+    getSimpleBoundingBox() {
+        // Default implementation: use normal bounding box
+        // Subclasses can override this to provide simpler bounds for drag boundary checks
+        return this.getBoundingBox();
+    }
     centerHorizontallyInternal() {
         const canvasWidth = this.canvas.getDimensions().widthPx;
         const objectWidth = this.getDimensions().width.px;
@@ -1794,15 +1840,27 @@ class RichText extends Image {
 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
+            padding: 0 // Add padding for larger hover area (Fabric v7 compatibility)
+        });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
+        this.fabricObject.on("mousedown", (e) => {
+            var _a;
+            if (!this.fabricObject.isEditing) {
+                (_a = e.e) === null || _a === void 0 ? void 0 : _a.preventDefault();
+            }
+        });
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2154,11 +2212,25 @@ class Text extends AbstractCanvasObject {
     getBulletMargin() {
         if (!this.isBulleted())
             return 0;
-        let fontSize = 0;
-        each(this.fabricObject._textLines, (textLine, lineIndex) => {
-            fontSize = Math.max(fontSize, this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
-        });
-        return fontSize * 0.6;
+        try {
+            let fontSize = 0;
+            each(this.fabricObject._textLines, (textLine, lineIndex) => {
+                const size = this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize");
+                // Sanity check fontSize
+                if (isFinite(size) && size > 0 && size < 1000) {
+                    fontSize = Math.max(fontSize, size);
+                }
+            });
+            // Additional safety check
+            if (!isFinite(fontSize) || fontSize < 0 || fontSize > 1000) {
+                return 0;
+            }
+            return fontSize * 0.6;
+        }
+        catch (e) {
+            console.warn('Error calculating bullet margin:', e);
+            return 0;
+        }
     }
     /**
      * @override
@@ -2168,10 +2240,35 @@ class Text extends AbstractCanvasObject {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let maxValue = max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
-            .filter((x) => !!x)
-            .map((x) => x.getBoundingRect().width));
-        return maxValue ? (maxValue * 1.2) : 0;
+        try {
+            const widths = (orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
+                .filter((x) => !!x)
+                .map((x) => {
+                var _a;
+                try {
+                    const rect = x.getBoundingRect();
+                    const width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+                    // Sanity check: if width is invalid, return 0
+                    if (!isFinite(width) || width < 0 || width > 1000) {
+                        return 0;
+                    }
+                    return width;
+                }
+                catch (e) {
+                    return 0;
+                }
+            });
+            const maxValue = max(widths);
+            // Additional safety: ensure maxValue is a valid number
+            if (!maxValue || !isFinite(maxValue) || maxValue < 0 || maxValue > 1000) {
+                return 0;
+            }
+            return maxValue * 1.2;
+        }
+        catch (e) {
+            console.warn('Error calculating ordered list margin:', e);
+            return 0;
+        }
     }
     /**
      * @override
@@ -2506,7 +2603,7 @@ class Text extends AbstractCanvasObject {
                     text: `${lineNumber}.`
                 });
             }
-            if (method === "fillText" && this.fabricObject.left <= 3) {
+            if (method === "fillText" && this.isOrderedList() && this.fabricObject.left <= 3) {
                 left = left + this.getOrderedListMargin();
             }
             this.fabricObject.dirty = true;
@@ -2522,9 +2619,16 @@ class Text extends AbstractCanvasObject {
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
         this.fabricObject.set({
+            lockMovementX: false, // Allow dragging
+            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,
@@ -2534,35 +2638,63 @@ 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();
+        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);
+    }
+    /**
+     * @override
+     * Provide a simpler bounding box for drag boundary checks that uses the textbox
+     * dimensions directly instead of getBoundingRect(), which includes ordered list
+     * markers that may extend far beyond the text and cause drag shaking issues.
+     */
+    getSimpleBoundingBox() {
+        return {
+            top: this.fabricObject.top || 0,
+            left: this.fabricObject.left || 0,
+            width: (this.fabricObject.width || 0) * (this.fabricObject.scaleX || 1),
+            height: (this.fabricObject.height || 0) * (this.fabricObject.scaleY || 1)
+        };
     }
 }
 Text.NEW_LINE = "\n";
@@ -2728,6 +2860,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.
@@ -2749,8 +2882,8 @@ class AbstractInteractiveCanvas {
         //Configure canvas behaviour
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
-        this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 4;
+        this.fabricCanvas.perPixelTargetFind = false;
+        this.fabricCanvas.targetFindTolerance = 0;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3138,15 +3271,14 @@ 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,
+                padding: 0, // Increased from 0 for better hover detection in Fabric v7
                 cornerSize: 8,
                 touchCornerSize: 12
             };
@@ -3597,7 +3729,14 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return;
+        }
+        this.redrawScheduled = true;
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3723,7 +3862,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);
@@ -3731,39 +3869,6 @@ class AbstractInteractiveCanvas {
             width,
             height
         });
-        /*if (this.layoutManager$.value instanceof AdvancedLayoutManager) {
-            const scaleFactor = width / oldWidth;
-            //this.fabricCanvas.calcOffset();
-            const objects = this.fabricCanvas.getObjects();
-            objects.forEach((obj: any) => {
-                obj.set({   ₹
-                    left: obj.left * scaleFactor,
-                });
-                if (obj.type === "textbox" || obj.type === "text") {
-                    obj.set({
-                        scaleX: 1,
-                        scaleY: 1,
-                       // scaleX: obj.scaleX * scaleFactor,
-                       // scaleY: obj.scaleY * scaleFactor,
-                        width: obj.width * scaleFactor,
-                    });
-                   // obj.initDimensions();
-                } else if (obj.type === "border" || obj.type === "rect") {
-                    obj.set({
-                        width: obj.width * scaleFactor,
-                        scaleX: 1,
-                        strokeUniform: true,
-                       // strokeAlign: "inner",
-                    });
-                } else {
-                    obj.set({
-                        scaleX: obj.scaleX * scaleFactor,
-                    });
-                }
-                obj.setCoords();
-            });
-            this.fabricCanvas.requestRenderAll();
-        }*/
     }
     onProfileChanged(profile) {
         this.setMultiSelect(profile.allowMultiSelect);
@@ -3918,7 +4023,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;
@@ -3927,8 +4031,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));
     }
     /**
@@ -3963,7 +4065,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
-        this.enterTextSelectionModeIfRequired();
+        //this.enterTextSelectionModeIfRequired();
     }
     enterTextSelectionModeIfRequired() {
         var _a, _b;
@@ -3979,13 +4081,14 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         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();
     }
 }
 
@@ -285,7 +291,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
-        canvas.redraw();
+        // 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);
@@ -372,7 +378,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            object.updateDimensions();
+            _(objects).forEach((object) => {
+                if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -458,15 +468,22 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.resizeCanvas = new ResizeCanvasLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
+        this.dimensionsLayoutScheduled = false;
     }
     onCanvasDimensionsChange() {
-        this.pinToBottom.execute(this.canvas);
-        // this.stackObjects.execute(this.canvas);
-        this.dimensionChange();
-        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.dimensionChange();
+            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);
@@ -477,9 +494,7 @@ class AdvancedLayoutManager extends AbstractLayoutManager {
     dimensionChange() {
         const canvasMargin = this.canvas.getMargin();
         const canvasDimensions = this.canvas.getDimensions();
-        const allObjects = this.canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.RICH_TEXT, 
-        //ObjectType.IMAGE,
-        exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
+        const allObjects = this.canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.RICH_TEXT, exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
         this.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.
@@ -505,6 +520,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
+        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -546,12 +562,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;
+        });
     }
 }
 
@@ -1018,7 +1041,7 @@ class AbstractCanvasObject {
         //no-op
     }
     preventLeavingCanvas() {
-        const overflow = this.getCanvasOverflow();
+        const overflow = this.getCanvasOverflowForBoundaryPrevention();
         if (overflow.hasOverflow) {
             const adjustX = overflow.left || -overflow.right;
             const adjustY = overflow.top || -overflow.bottom;
@@ -1044,6 +1067,29 @@ class AbstractCanvasObject {
             hasOverflow: top > 0 || right > 0 || bottom > 0 || left > 0
         };
     }
+    getCanvasOverflowForBoundaryPrevention() {
+        // Use a simpler bounding box calculation for boundary prevention
+        // to avoid issues with decorative elements (like ordered list markers)
+        // extending beyond the main object bounds
+        const bound = this.getSimpleBoundingBox();
+        const canvasDimensions = this.canvas.getDimensions();
+        const top = Math.max(0, 0 - bound.top);
+        const right = Math.max(0, bound.left + bound.width - canvasDimensions.widthPx);
+        const bottom = Math.max(0, bound.top + bound.height - canvasDimensions.heightPx);
+        const left = Math.max(0, 0 - bound.left);
+        return {
+            top: top,
+            right: right,
+            bottom: bottom,
+            left: left,
+            hasOverflow: top > 0 || right > 0 || bottom > 0 || left > 0
+        };
+    }
+    getSimpleBoundingBox() {
+        // Default implementation: use normal bounding box
+        // Subclasses can override this to provide simpler bounds for drag boundary checks
+        return this.getBoundingBox();
+    }
     centerHorizontallyInternal() {
         const canvasWidth = this.canvas.getDimensions().widthPx;
         const objectWidth = this.getDimensions().width.px;
@@ -1815,15 +1861,27 @@ class RichText extends Image {
 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
+            padding: 0 // Add padding for larger hover area (Fabric v7 compatibility)
+        });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
+        this.fabricObject.on("mousedown", (e) => {
+            var _a;
+            if (!this.fabricObject.isEditing) {
+                (_a = e.e) === null || _a === void 0 ? void 0 : _a.preventDefault();
+            }
+        });
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2175,11 +2233,25 @@ class Text extends AbstractCanvasObject {
     getBulletMargin() {
         if (!this.isBulleted())
             return 0;
-        let fontSize = 0;
-        _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
-            fontSize = Math.max(fontSize, this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
-        });
-        return fontSize * 0.6;
+        try {
+            let fontSize = 0;
+            _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
+                const size = this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize");
+                // Sanity check fontSize
+                if (isFinite(size) && size > 0 && size < 1000) {
+                    fontSize = Math.max(fontSize, size);
+                }
+            });
+            // Additional safety check
+            if (!isFinite(fontSize) || fontSize < 0 || fontSize > 1000) {
+                return 0;
+            }
+            return fontSize * 0.6;
+        }
+        catch (e) {
+            console.warn('Error calculating bullet margin:', e);
+            return 0;
+        }
     }
     /**
      * @override
@@ -2189,10 +2261,35 @@ class Text extends AbstractCanvasObject {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let maxValue = _.max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
-            .filter((x) => !!x)
-            .map((x) => x.getBoundingRect().width));
-        return maxValue ? (maxValue * 1.2) : 0;
+        try {
+            const widths = (orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
+                .filter((x) => !!x)
+                .map((x) => {
+                var _a;
+                try {
+                    const rect = x.getBoundingRect();
+                    const width = (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0;
+                    // Sanity check: if width is invalid, return 0
+                    if (!isFinite(width) || width < 0 || width > 1000) {
+                        return 0;
+                    }
+                    return width;
+                }
+                catch (e) {
+                    return 0;
+                }
+            });
+            const maxValue = _.max(widths);
+            // Additional safety: ensure maxValue is a valid number
+            if (!maxValue || !isFinite(maxValue) || maxValue < 0 || maxValue > 1000) {
+                return 0;
+            }
+            return maxValue * 1.2;
+        }
+        catch (e) {
+            console.warn('Error calculating ordered list margin:', e);
+            return 0;
+        }
     }
     /**
      * @override
@@ -2527,7 +2624,7 @@ class Text extends AbstractCanvasObject {
                     text: `${lineNumber}.`
                 });
             }
-            if (method === "fillText" && this.fabricObject.left <= 3) {
+            if (method === "fillText" && this.isOrderedList() && this.fabricObject.left <= 3) {
                 left = left + this.getOrderedListMargin();
             }
             this.fabricObject.dirty = true;
@@ -2543,9 +2640,16 @@ class Text extends AbstractCanvasObject {
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
         this.fabricObject.set({
+            lockMovementX: false, // Allow dragging
+            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,
@@ -2555,35 +2659,63 @@ 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();
+        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);
+    }
+    /**
+     * @override
+     * Provide a simpler bounding box for drag boundary checks that uses the textbox
+     * dimensions directly instead of getBoundingRect(), which includes ordered list
+     * markers that may extend far beyond the text and cause drag shaking issues.
+     */
+    getSimpleBoundingBox() {
+        return {
+            top: this.fabricObject.top || 0,
+            left: this.fabricObject.left || 0,
+            width: (this.fabricObject.width || 0) * (this.fabricObject.scaleX || 1),
+            height: (this.fabricObject.height || 0) * (this.fabricObject.scaleY || 1)
+        };
     }
 }
 Text.NEW_LINE = "\n";
@@ -2749,6 +2881,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.
@@ -2770,8 +2903,8 @@ class AbstractInteractiveCanvas {
         //Configure canvas behaviour
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
-        this.fabricCanvas.perPixelTargetFind = true;
-        this.fabricCanvas.targetFindTolerance = 4;
+        this.fabricCanvas.perPixelTargetFind = false;
+        this.fabricCanvas.targetFindTolerance = 0;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3159,15 +3292,14 @@ 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,
+                padding: 0, // Increased from 0 for better hover detection in Fabric v7
                 cornerSize: 8,
                 touchCornerSize: 12
             };
@@ -3618,7 +3750,14 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        this.fabricCanvas.requestRenderAll();
+        if (this.redrawScheduled) {
+            return;
+        }
+        this.redrawScheduled = true;
+        requestAnimationFrame(() => {
+            this.fabricCanvas.requestRenderAll();
+            this.redrawScheduled = false;
+        });
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3744,7 +3883,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);
@@ -3752,39 +3890,6 @@ class AbstractInteractiveCanvas {
             width,
             height
         });
-        /*if (this.layoutManager$.value instanceof AdvancedLayoutManager) {
-            const scaleFactor = width / oldWidth;
-            //this.fabricCanvas.calcOffset();
-            const objects = this.fabricCanvas.getObjects();
-            objects.forEach((obj: any) => {
-                obj.set({   ₹
-                    left: obj.left * scaleFactor,
-                });
-                if (obj.type === "textbox" || obj.type === "text") {
-                    obj.set({
-                        scaleX: 1,
-                        scaleY: 1,
-                       // scaleX: obj.scaleX * scaleFactor,
-                       // scaleY: obj.scaleY * scaleFactor,
-                        width: obj.width * scaleFactor,
-                    });
-                   // obj.initDimensions();
-                } else if (obj.type === "border" || obj.type === "rect") {
-                    obj.set({
-                        width: obj.width * scaleFactor,
-                        scaleX: 1,
-                        strokeUniform: true,
-                       // strokeAlign: "inner",
-                    });
-                } else {
-                    obj.set({
-                        scaleX: obj.scaleX * scaleFactor,
-                    });
-                }
-                obj.setCoords();
-            });
-            this.fabricCanvas.requestRenderAll();
-        }*/
     }
     onProfileChanged(profile) {
         this.setMultiSelect(profile.allowMultiSelect);
@@ -3939,7 +4044,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;
@@ -3948,8 +4052,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));
     }
     /**
@@ -3984,7 +4086,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
-        this.enterTextSelectionModeIfRequired();
+        //this.enterTextSelectionModeIfRequired();
     }
     enterTextSelectionModeIfRequired() {
         var _a, _b;
@@ -4000,13 +4102,14 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         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

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

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

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

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

@@ -205,6 +205,13 @@ export declare abstract class AbstractCanvasObject<T extends FabricObject> imple
     protected onDelete(): void;
     protected preventLeavingCanvas(): void;
     protected getCanvasOverflow(): IOverflow;
+    protected getCanvasOverflowForBoundaryPrevention(): IOverflow;
+    protected getSimpleBoundingBox(): {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
     protected centerHorizontallyInternal(): void;
     protected centerVerticallyInternal(): void;
     protected nudgeInternal(x?: number, y?: number): void;

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
@@ -321,4 +323,16 @@ export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> im
     private hasTextSelection;
     private updateTextSelection;
     private notifyCanvasOfTextChanges;
+    /**
+     * @override
+     * Provide a simpler bounding box for drag boundary checks that uses the textbox
+     * dimensions directly instead of getBoundingRect(), which includes ordered list
+     * markers that may extend far beyond the text and cause drag shaking issues.
+     */
+    protected getSimpleBoundingBox(): {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
 }

package/package.json

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