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

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

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

package/dist/interactive-canvas.es.js

@@ -232,15 +232,9 @@ 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();
     }
 }
 
@@ -258,46 +252,6 @@ class RepositionBackgroundsLayoutFunction {
     }
 }
 
-class AdvancedLayoutManager extends AbstractLayoutManager {
-    constructor(canvas) {
-        super(canvas);
-        this.key = LayoutManager.ADVANCED;
-        this.pinToBottom = new PinToBottomLayoutFunction();
-        this.redrawAll = new RedrawAllLayoutFunction();
-        this.repositionBorders = new RepositionBordersLayoutFunction();
-        this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        this.dimensionsLayoutScheduled = false;
-    }
-    onCanvasDimensionsChange() {
-        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);
-    }
-    onObjectListChange() {
-        this.redrawAll.execute(this.canvas);
-    }
-}
-
-class UpdateObjectDimensionsLayoutFunction {
-    execute(canvas) {
-        canvas.getObjectsInternal().forEach((object) => object.updateDimensions());
-    }
-}
-
 const MIN_MAGNITUDE = 1;
 class StackObjectsLayoutFunction {
     execute(canvas) {
@@ -310,7 +264,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);
@@ -397,12 +351,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            //object.updateDimensions();
-            _(objects).forEach((object) => {
-                if (object.getType() !== ObjectType.VERTICAL_RULE) {
-                    object.updateDimensions();
-                }
-            });
+            object.updateDimensions();
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -463,6 +412,66 @@ class StackObjectsLayoutFunction {
     }
 }
 
+var ObjectType;
+(function (ObjectType) {
+    ObjectType["TEXT"] = "TEXT";
+    ObjectType["BORDER"] = "BORDER";
+    ObjectType["IMAGE"] = "IMAGE";
+    ObjectType["RECTANGLE"] = "RECTANGLE";
+    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
+    ObjectType["CUTOFF"] = "CUTOFF";
+    ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
+    ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
+    ObjectType["RICH_TEXT"] = "RICH_TEXT";
+    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
+})(ObjectType || (ObjectType = {}));
+
+class AdvancedLayoutManager extends AbstractLayoutManager {
+    constructor(canvas) {
+        super(canvas);
+        this.key = LayoutManager.ADVANCED;
+        this.pinToBottom = new PinToBottomLayoutFunction();
+        this.redrawAll = new RedrawAllLayoutFunction();
+        this.repositionBorders = new RepositionBordersLayoutFunction();
+        this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        this.stackObjects = new StackObjectsLayoutFunction();
+    }
+    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);
+    }
+    onTextChange() {
+        this.resizeCanvas.execute(this.canvas);
+    }
+    onObjectListChange() {
+        this.redrawAll.execute(this.canvas);
+    }
+    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 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.
+        this.stackObjects.applyWidths(allObjects, bodyWidth);
+    }
+}
+
+class UpdateObjectDimensionsLayoutFunction {
+    execute(canvas) {
+        canvas.getObjectsInternal().forEach((object) => object.updateDimensions());
+    }
+}
+
 class StandardLayoutManager extends AbstractLayoutManager {
     constructor(canvas) {
         super(canvas);
@@ -475,7 +484,6 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
-        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -517,19 +525,12 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        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;
-        });
+        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);
     }
 }
 
@@ -1790,60 +1791,18 @@ class RichText extends Image {
     }
 }
 
-var ObjectType;
-(function (ObjectType) {
-    ObjectType["TEXT"] = "TEXT";
-    ObjectType["BORDER"] = "BORDER";
-    ObjectType["IMAGE"] = "IMAGE";
-    ObjectType["RECTANGLE"] = "RECTANGLE";
-    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
-    ObjectType["CUTOFF"] = "CUTOFF";
-    ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
-    ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
-    ObjectType["RICH_TEXT"] = "RICH_TEXT";
-    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
-})(ObjectType || (ObjectType = {}));
-
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(ObjectType.TEXT, canvas, fabricObject, persistedField);
-        this.notifyCanvasTimeout = null;
-        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));
-        //this.fabricObject.set({strokeWidth: 0});
-        this.fabricObject.set({
-            strokeWidth: 0,
-            perPixelTargetFind: false // Disable per-pixel detection for this object
-        });
+        this.fabricObject.set({ strokeWidth: 0 });
         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();
     }
     /**
@@ -2192,87 +2151,27 @@ class Text extends AbstractCanvasObject {
      * @override
      * @inheritDoc
      */
-    /*public getBulletMargin(): number {
-        if (!this.isBulleted()) return 0;
-
+    getBulletMargin() {
+        if (!this.isBulleted())
+            return 0;
         let fontSize = 0;
-        each(this.fabricObject._textLines, (textLine: string[], lineIndex: number) => {
+        each(this.fabricObject._textLines, (textLine, lineIndex) => {
             fontSize = Math.max(fontSize, this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
         });
-
         return fontSize * 0.6;
-    }*/
-    getBulletMargin() {
-        if (!this.isBulleted())
-            return 0;
-        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
      * @inheritDoc
      */
-    /*public getOrderedListMargin(): number {
-        if (!this.isOrderedList()) return 0;
-
-        const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let maxValue = max(
-            (orderedListMarkerEntities ?? [])
-                .filter((x: Textbox) => !!x)
-                .map((x: fabric.Textbox) => x.getBoundingRect().width)
-        );
-        return maxValue ? (maxValue * 1.2) : 0;
-    }*/
     getOrderedListMargin() {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        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;
-        }
+        let maxValue = max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
+            .filter((x) => !!x)
+            .map((x) => x.getBoundingRect().width));
+        return maxValue ? (maxValue * 1.2) : 0;
     }
     /**
      * @override
@@ -2607,10 +2506,7 @@ class Text extends AbstractCanvasObject {
                     text: `${lineNumber}.`
                 });
             }
-            /* if (method === "fillText"  && this.fabricObject.left <= 3) {
-                 left = left + this.getOrderedListMargin();
-             }*/
-            if (method === "fillText" && this.isOrderedList() && this.fabricObject.left <= 3) {
+            if (method === "fillText" && this.fabricObject.left <= 3) {
                 left = left + this.getOrderedListMargin();
             }
             this.fabricObject.dirty = true;
@@ -2626,16 +2522,9 @@ 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,
-            lockRotation: true,
-            selectable: true,
-            editable: false, // Only enable on double-click
-            hoverCursor: "move", // Show move cursor by default
-            moveCursor: "move",
+            lockScalingFlip: true
         });
         this.fabricObject.setControlsVisibility({
             tl: false,
@@ -2645,49 +2534,35 @@ class Text extends AbstractCanvasObject {
             ml: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
             mt: false,
             mr: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mb: false,
-            mtr: false
+            mb: false
         });
         this.redraw();
     }
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        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();
-            }
+        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
+            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
+            this.redraw();
         }
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection(false);
+        this.updateTextSelection();
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection(notifyCanvas = true) {
+    updateTextSelection() {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        if (notifyCanvas) {
-            this.notifyCanvasOfTextChanges();
-        }
+        this.notifyCanvasOfTextChanges();
     }
     notifyCanvasOfTextChanges() {
-        if (this.notifyCanvasTimeout) {
-            clearTimeout(this.notifyCanvasTimeout);
-        }
-        this.notifyCanvasTimeout = setTimeout(() => {
-            this.canvas.notifyTextChanged();
-            this.notifyCanvasTimeout = null;
-        }, this.NOTIFY_DELAY_MS);
+        this.canvas.notifyTextChanged();
     }
 }
 Text.NEW_LINE = "\n";
@@ -2853,7 +2728,6 @@ class AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.fontLibrary = new FontLibrary();
         this.dimensionChangeRejections$ = new Subject();
-        this.redrawScheduled = false;
         this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
         /**
          * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3272,7 +3146,6 @@ class AbstractInteractiveCanvas {
                 targetFindTolerance: 4,
                 splitByGrapheme: true,
                 editable: false, // Only enable on double-click
-                editingBorderColor: '#2196F3',
                 padding: 0,
                 cornerSize: 8,
                 touchCornerSize: 12
@@ -3724,14 +3597,7 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        if (this.redrawScheduled) {
-            return;
-        }
-        this.redrawScheduled = true;
-        requestAnimationFrame(() => {
-            this.fabricCanvas.requestRenderAll();
-            this.redrawScheduled = false;
-        });
+        this.fabricCanvas.requestRenderAll();
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3857,7 +3723,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 oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3865,34 +3731,39 @@ 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,
+        /*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,
                 });
-            }
-            obj.setCoords();
-        });
-        this.fabricCanvas.requestRenderAll();
+                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);
@@ -4047,7 +3918,7 @@ 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;

package/dist/interactive-canvas.js

@@ -253,15 +253,9 @@ 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();
     }
 }
 
@@ -279,46 +273,6 @@ class RepositionBackgroundsLayoutFunction {
     }
 }
 
-class AdvancedLayoutManager extends AbstractLayoutManager {
-    constructor(canvas) {
-        super(canvas);
-        this.key = exports.LayoutManager.ADVANCED;
-        this.pinToBottom = new PinToBottomLayoutFunction();
-        this.redrawAll = new RedrawAllLayoutFunction();
-        this.repositionBorders = new RepositionBordersLayoutFunction();
-        this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        this.dimensionsLayoutScheduled = false;
-    }
-    onCanvasDimensionsChange() {
-        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);
-    }
-    onObjectListChange() {
-        this.redrawAll.execute(this.canvas);
-    }
-}
-
-class UpdateObjectDimensionsLayoutFunction {
-    execute(canvas) {
-        canvas.getObjectsInternal().forEach((object) => object.updateDimensions());
-    }
-}
-
 const MIN_MAGNITUDE = 1;
 class StackObjectsLayoutFunction {
     execute(canvas) {
@@ -331,7 +285,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);
@@ -418,12 +372,7 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-            //object.updateDimensions();
-            _(objects).forEach((object) => {
-                if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
-                    object.updateDimensions();
-                }
-            });
+            object.updateDimensions();
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -484,6 +433,66 @@ class StackObjectsLayoutFunction {
     }
 }
 
+exports.ObjectType = void 0;
+(function (ObjectType) {
+    ObjectType["TEXT"] = "TEXT";
+    ObjectType["BORDER"] = "BORDER";
+    ObjectType["IMAGE"] = "IMAGE";
+    ObjectType["RECTANGLE"] = "RECTANGLE";
+    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
+    ObjectType["CUTOFF"] = "CUTOFF";
+    ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
+    ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
+    ObjectType["RICH_TEXT"] = "RICH_TEXT";
+    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
+})(exports.ObjectType || (exports.ObjectType = {}));
+
+class AdvancedLayoutManager extends AbstractLayoutManager {
+    constructor(canvas) {
+        super(canvas);
+        this.key = exports.LayoutManager.ADVANCED;
+        this.pinToBottom = new PinToBottomLayoutFunction();
+        this.redrawAll = new RedrawAllLayoutFunction();
+        this.repositionBorders = new RepositionBordersLayoutFunction();
+        this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        this.stackObjects = new StackObjectsLayoutFunction();
+    }
+    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);
+    }
+    onTextChange() {
+        this.resizeCanvas.execute(this.canvas);
+    }
+    onObjectListChange() {
+        this.redrawAll.execute(this.canvas);
+    }
+    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 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.
+        this.stackObjects.applyWidths(allObjects, bodyWidth);
+    }
+}
+
+class UpdateObjectDimensionsLayoutFunction {
+    execute(canvas) {
+        canvas.getObjectsInternal().forEach((object) => object.updateDimensions());
+    }
+}
+
 class StandardLayoutManager extends AbstractLayoutManager {
     constructor(canvas) {
         super(canvas);
@@ -496,7 +505,6 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
         this.stackObjects = new StackObjectsLayoutFunction();
         this.updateObjectDimensions = new UpdateObjectDimensionsLayoutFunction();
-        this.layoutBatchScheduled = false;
     }
     /**
      * @override
@@ -538,19 +546,12 @@ class StandardLayoutManager extends AbstractLayoutManager {
         this.stackAndRedraw();
     }
     stackAndRedraw() {
-        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;
-        });
+        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);
     }
 }
 
@@ -1811,60 +1812,18 @@ class RichText extends Image {
     }
 }
 
-exports.ObjectType = void 0;
-(function (ObjectType) {
-    ObjectType["TEXT"] = "TEXT";
-    ObjectType["BORDER"] = "BORDER";
-    ObjectType["IMAGE"] = "IMAGE";
-    ObjectType["RECTANGLE"] = "RECTANGLE";
-    ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
-    ObjectType["CUTOFF"] = "CUTOFF";
-    ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
-    ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
-    ObjectType["RICH_TEXT"] = "RICH_TEXT";
-    ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
-})(exports.ObjectType || (exports.ObjectType = {}));
-
 class Text extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(exports.ObjectType.TEXT, canvas, fabricObject, persistedField);
-        this.notifyCanvasTimeout = null;
-        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));
-        //this.fabricObject.set({strokeWidth: 0});
-        this.fabricObject.set({
-            strokeWidth: 0,
-            perPixelTargetFind: false // Disable per-pixel detection for this object
-        });
+        this.fabricObject.set({ strokeWidth: 0 });
         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();
     }
     /**
@@ -2213,87 +2172,27 @@ class Text extends AbstractCanvasObject {
      * @override
      * @inheritDoc
      */
-    /*public getBulletMargin(): number {
-        if (!this.isBulleted()) return 0;
-
+    getBulletMargin() {
+        if (!this.isBulleted())
+            return 0;
         let fontSize = 0;
-        each(this.fabricObject._textLines, (textLine: string[], lineIndex: number) => {
+        _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
             fontSize = Math.max(fontSize, this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
         });
-
         return fontSize * 0.6;
-    }*/
-    getBulletMargin() {
-        if (!this.isBulleted())
-            return 0;
-        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
      * @inheritDoc
      */
-    /*public getOrderedListMargin(): number {
-        if (!this.isOrderedList()) return 0;
-
-        const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let maxValue = max(
-            (orderedListMarkerEntities ?? [])
-                .filter((x: Textbox) => !!x)
-                .map((x: fabric.Textbox) => x.getBoundingRect().width)
-        );
-        return maxValue ? (maxValue * 1.2) : 0;
-    }*/
     getOrderedListMargin() {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        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;
-        }
+        let maxValue = _.max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
+            .filter((x) => !!x)
+            .map((x) => x.getBoundingRect().width));
+        return maxValue ? (maxValue * 1.2) : 0;
     }
     /**
      * @override
@@ -2628,10 +2527,7 @@ class Text extends AbstractCanvasObject {
                     text: `${lineNumber}.`
                 });
             }
-            /* if (method === "fillText"  && this.fabricObject.left <= 3) {
-                 left = left + this.getOrderedListMargin();
-             }*/
-            if (method === "fillText" && this.isOrderedList() && this.fabricObject.left <= 3) {
+            if (method === "fillText" && this.fabricObject.left <= 3) {
                 left = left + this.getOrderedListMargin();
             }
             this.fabricObject.dirty = true;
@@ -2647,16 +2543,9 @@ 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,
-            lockRotation: true,
-            selectable: true,
-            editable: false, // Only enable on double-click
-            hoverCursor: "move", // Show move cursor by default
-            moveCursor: "move",
+            lockScalingFlip: true
         });
         this.fabricObject.setControlsVisibility({
             tl: false,
@@ -2666,49 +2555,35 @@ class Text extends AbstractCanvasObject {
             ml: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
             mt: false,
             mr: allowManualPositioning && profile.allowScale && !this.isPinToBottom(),
-            mb: false,
-            mtr: false
+            mb: false
         });
         this.redraw();
     }
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        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();
-            }
+        if (this.getBoundingBox().width > this.canvas.getDimensions().widthPx) {
+            this.fabricObject.set({ left: 0, width: this.canvas.getDimensions().widthPx });
+            this.redraw();
         }
     }
     onDelete() {
         this.removeBullets();
     }
     onSelectionChange() {
-        this.updateTextSelection(false);
+        this.updateTextSelection();
     }
     hasTextSelection() {
         return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
     }
-    updateTextSelection(notifyCanvas = true) {
+    updateTextSelection() {
         if (this.canvas.headless)
             return;
         this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
-        if (notifyCanvas) {
-            this.notifyCanvasOfTextChanges();
-        }
+        this.notifyCanvasOfTextChanges();
     }
     notifyCanvasOfTextChanges() {
-        if (this.notifyCanvasTimeout) {
-            clearTimeout(this.notifyCanvasTimeout);
-        }
-        this.notifyCanvasTimeout = setTimeout(() => {
-            this.canvas.notifyTextChanged();
-            this.notifyCanvasTimeout = null;
-        }, this.NOTIFY_DELAY_MS);
+        this.canvas.notifyTextChanged();
     }
 }
 Text.NEW_LINE = "\n";
@@ -2874,7 +2749,6 @@ class AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.fontLibrary = new FontLibrary();
         this.dimensionChangeRejections$ = new rxjs.Subject();
-        this.redrawScheduled = false;
         this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
         /**
          * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3293,7 +3167,6 @@ class AbstractInteractiveCanvas {
                 targetFindTolerance: 4,
                 splitByGrapheme: true,
                 editable: false, // Only enable on double-click
-                editingBorderColor: '#2196F3',
                 padding: 0,
                 cornerSize: 8,
                 touchCornerSize: 12
@@ -3745,14 +3618,7 @@ class AbstractInteractiveCanvas {
      * Redraw the canvas.
      */
     redraw() {
-        if (this.redrawScheduled) {
-            return;
-        }
-        this.redrawScheduled = true;
-        requestAnimationFrame(() => {
-            this.fabricCanvas.requestRenderAll();
-            this.redrawScheduled = false;
-        });
+        this.fabricCanvas.requestRenderAll();
     }
     syncObjectList() {
         const newObjectList = _(this.fabricCanvas.getObjects())
@@ -3878,7 +3744,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 oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3886,34 +3752,39 @@ 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,
+        /*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,
                 });
-            }
-            obj.setCoords();
-        });
-        this.fabricCanvas.requestRenderAll();
+                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);
@@ -4068,7 +3939,7 @@ 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;

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

@@ -9,9 +9,10 @@ export declare class AdvancedLayoutManager extends AbstractLayoutManager {
     private repositionCutoffs;
     private repositionBackgrounds;
     private resizeCanvas;
-    private dimensionsLayoutScheduled;
+    private stackObjects;
     constructor(canvas: IInteractiveCanvas);
     onCanvasDimensionsChange(): void;
     onTextChange(): void;
     onObjectListChange(): void;
+    private dimensionChange;
 }

package/dist/layout/function/stack-objects.layout-function.d.ts

@@ -1,9 +1,10 @@
+import { AbstractCanvasObject } from "../..";
 import { IInteractiveCanvas } from "../../interactive-canvas.interface";
 export declare class StackObjectsLayoutFunction {
     execute(canvas: IInteractiveCanvas): void;
     private layoutFooter;
     private layoutBody;
-    private applyWidths;
+    applyWidths(objects: Array<AbstractCanvasObject<any>>, layoutWidth: number): void;
     private adjustCanvasSize;
     private getRows;
     private getObjectHeight;

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

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

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

@@ -63,8 +63,6 @@ export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> im
     private readonly text$;
     private readonly textSelection$;
     static readonly NEW_LINE: string;
-    private notifyCanvasTimeout;
-    private readonly NOTIFY_DELAY_MS;
     constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Textbox, persistedField?: CanvasObjectData);
     /**
      * @override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "2.0.25-beta-12",
+  "version": "2.0.25-beta-14",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "canvas": "^3.2.3",
-    "fabric": "7.4.0",
+    "fabric": "^7.2.0",
     "lodash": "^4.18.1",
     "rollup": "^4.60.3",
     "rollup-plugin-typescript2": "^0.37.0",