@leapfrog/interactive-canvas 2.0.25-beta-15 → 2.0.25-beta-17

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

@@ -343,7 +343,6 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
     private redrawScheduled;
     /**
      * Redraw the canvas.
-     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw(): void;
     syncObjectList(): void;

package/dist/interactive-canvas.d.ts

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

package/dist/interactive-canvas.es.js

@@ -270,6 +270,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
+        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         const bodyRows = this.getRows(bodyObjects);
@@ -356,11 +357,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-        });
-        _(objects).forEach((object) => {
-            if (object.getType() !== ObjectType.VERTICAL_RULE) {
-                object.updateDimensions();
-            }
+            _(objects).forEach((object) => {
+                if (object.getType() !== ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -472,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.
@@ -519,6 +518,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
      * @override
      */
     onCanvasDimensionsChange() {
+        this.stackObjects.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
         this.repositionBackgrounds.execute(this.canvas);
@@ -542,19 +542,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);
     }
 }
 
@@ -1117,8 +1110,7 @@ class AbstractCanvasObject {
             mt: options.allowScale,
             mr: options.allowScale,
             mb: options.allowScale,
-            mtr: options.allowRotate,
-            // dragControl: options.allowMove // Show drag control when movement is allowed
+            mtr: options.allowRotate
         });
     }
 }
@@ -1857,8 +1849,6 @@ class Text extends AbstractCanvasObject {
         });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
-        // Note: Removed containsPoint override to allow Fabric's default bounding box
-        // detection with padding to work properly for hover detection
         this.fabricObject.on("mousedown", (e) => {
             var _a;
             if (!this.fabricObject.isEditing) {
@@ -2513,7 +2503,6 @@ class Text extends AbstractCanvasObject {
                                     lockMovementY: true,
                                     hasControls: false,
                                     selectable: false,
-                                    // evented: false, // Don't capture mouse events - allows clicks to pass through to textbox
                                     originX: "left",
                                     originY: "top"
                                 });
@@ -2620,16 +2609,12 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     updateFabricObjectBehavior() {
-        // DON'T call super.updateFabricObjectBehavior() for textboxes
-        // because it locks movement which interferes with text editing in Fabric v7
         super.updateFabricObjectBehavior();
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
-        // For textboxes, we keep them moveable but hide all controls except drag control
-        // This allows text editing to work properly while still supporting drag via the icon
         this.fabricObject.set({
             lockMovementX: false, // Allow dragging
-            lockMovementY: false, // Allow dragging
+            lockMovementY: false,
             lockScalingY: true,
             lockScalingX: this.isPinToBottom(),
             lockScalingFlip: true,
@@ -2655,7 +2640,6 @@ class Text extends AbstractCanvasObject {
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        // Only check width bounds if text is close to canvas edge (performance optimization)
         const currentLeft = this.fabricObject.left || 0;
         const canvasWidth = this.canvas.getDimensions().widthPx;
         // Skip expensive getBoundingBox if object is clearly within bounds
@@ -2892,8 +2876,8 @@ class AbstractInteractiveCanvas {
         //Configure canvas behaviour
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
-        this.fabricCanvas.perPixelTargetFind = false; // Disabled for better hover tolerance in Fabric v7
-        this.fabricCanvas.targetFindTolerance = 0; // Increased for better hover detection in Fabric v7 (was 4)
+        this.fabricCanvas.perPixelTargetFind = false;
+        this.fabricCanvas.targetFindTolerance = 0;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3197,6 +3181,7 @@ class AbstractInteractiveCanvas {
      */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
+            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
@@ -3208,6 +3193,7 @@ class AbstractInteractiveCanvas {
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
+                // Set image properties and add to the canvas
                 const fabricImage = new this.fabric.Image(image, {
                     id: id,
                     scaleX: newScale,
@@ -3227,6 +3213,7 @@ class AbstractInteractiveCanvas {
                 return object;
             }
             else {
+                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
                         const id = this.randomId();
@@ -3734,7 +3721,6 @@ class AbstractInteractiveCanvas {
     }
     /**
      * Redraw the canvas.
-     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw() {
         if (this.redrawScheduled) {
@@ -4073,6 +4059,16 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
+        //this.enterTextSelectionModeIfRequired();
+    }
+    enterTextSelectionModeIfRequired() {
+        var _a, _b;
+        if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
+            return;
+        if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== ObjectType.TEXT)
+            return;
+        const text = this.selection$.value.objects[0];
+        text.enterEditing();
     }
     onTextEditing() {
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());

package/dist/interactive-canvas.js

@@ -291,6 +291,7 @@ class StackObjectsLayoutFunction {
         const footerObjects = objects[0];
         const bodyObjects = objects[1];
         const bodyWidth = canvasDimensions.widthPx - canvasMargin.right - canvasMargin.left;
+        canvas.redraw();
         //Make one pass and set the widths of all elements. This will force objects with dynamic heights (like text) to take on their necessary height before trying to lay them out.
         this.applyWidths(allObjects, bodyWidth);
         const bodyRows = this.getRows(bodyObjects);
@@ -377,11 +378,11 @@ class StackObjectsLayoutFunction {
             object.setPosition({
                 width: actualWidth
             });
-        });
-        _(objects).forEach((object) => {
-            if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
-                object.updateDimensions();
-            }
+            _(objects).forEach((object) => {
+                if (object.getType() !== exports.ObjectType.VERTICAL_RULE) {
+                    object.updateDimensions();
+                }
+            });
         });
     }
     adjustCanvasSize(canvas, requiredHeight) {
@@ -493,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.
@@ -540,6 +539,7 @@ class StandardLayoutManager extends AbstractLayoutManager {
      * @override
      */
     onCanvasDimensionsChange() {
+        this.stackObjects.execute(this.canvas);
         this.repositionCutoffs.execute(this.canvas);
         this.repositionBorders.execute(this.canvas);
         this.repositionBackgrounds.execute(this.canvas);
@@ -563,19 +563,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);
     }
 }
 
@@ -1138,8 +1131,7 @@ class AbstractCanvasObject {
             mt: options.allowScale,
             mr: options.allowScale,
             mb: options.allowScale,
-            mtr: options.allowRotate,
-            // dragControl: options.allowMove // Show drag control when movement is allowed
+            mtr: options.allowRotate
         });
     }
 }
@@ -1878,8 +1870,6 @@ class Text extends AbstractCanvasObject {
         });
         this.fabricObject.on("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
-        // Note: Removed containsPoint override to allow Fabric's default bounding box
-        // detection with padding to work properly for hover detection
         this.fabricObject.on("mousedown", (e) => {
             var _a;
             if (!this.fabricObject.isEditing) {
@@ -2534,7 +2524,6 @@ class Text extends AbstractCanvasObject {
                                     lockMovementY: true,
                                     hasControls: false,
                                     selectable: false,
-                                    // evented: false, // Don't capture mouse events - allows clicks to pass through to textbox
                                     originX: "left",
                                     originY: "top"
                                 });
@@ -2641,16 +2630,12 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     updateFabricObjectBehavior() {
-        // DON'T call super.updateFabricObjectBehavior() for textboxes
-        // because it locks movement which interferes with text editing in Fabric v7
         super.updateFabricObjectBehavior();
         const profile = this.canvas.getProfile();
         const allowManualPositioning = !this.canvas.getLayoutManager().isEnforcedPositioning;
-        // For textboxes, we keep them moveable but hide all controls except drag control
-        // This allows text editing to work properly while still supporting drag via the icon
         this.fabricObject.set({
             lockMovementX: false, // Allow dragging
-            lockMovementY: false, // Allow dragging
+            lockMovementY: false,
             lockScalingY: true,
             lockScalingX: this.isPinToBottom(),
             lockScalingFlip: true,
@@ -2676,7 +2661,6 @@ class Text extends AbstractCanvasObject {
     onTextChange() {
         this.data.userText = this.fabricObject.text;
         this.text$.next(this.fabricObject.text);
-        // Only check width bounds if text is close to canvas edge (performance optimization)
         const currentLeft = this.fabricObject.left || 0;
         const canvasWidth = this.canvas.getDimensions().widthPx;
         // Skip expensive getBoundingBox if object is clearly within bounds
@@ -2913,8 +2897,8 @@ class AbstractInteractiveCanvas {
         //Configure canvas behaviour
         this.fabricCanvas.stateful = true;
         this.fabricCanvas.preserveObjectStacking = true;
-        this.fabricCanvas.perPixelTargetFind = false; // Disabled for better hover tolerance in Fabric v7
-        this.fabricCanvas.targetFindTolerance = 0; // Increased for better hover detection in Fabric v7 (was 4)
+        this.fabricCanvas.perPixelTargetFind = false;
+        this.fabricCanvas.targetFindTolerance = 0;
         this.setBackgroundColor("#FFFFFF");
     }
     /**
@@ -3218,6 +3202,7 @@ class AbstractInteractiveCanvas {
      */
     addImageObject(imageUrl) {
         return __awaiter(this, void 0, void 0, function* () {
+            // Don't let the image be more than half the canvas in size.
             const maxSizeScale = 2;
             const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
             const options = { crossOrigin: "anonymous" };
@@ -3229,6 +3214,7 @@ class AbstractInteractiveCanvas {
                 if (curWidth > maxWidth) {
                     newScale = maxWidth / curWidth;
                 }
+                // Set image properties and add to the canvas
                 const fabricImage = new this.fabric.Image(image, {
                     id: id,
                     scaleX: newScale,
@@ -3248,6 +3234,7 @@ class AbstractInteractiveCanvas {
                 return object;
             }
             else {
+                // Browser-side logic
                 return yield new Promise((resolve) => {
                     this.fabric.Image.fromURL(imageUrl, options).then((fabricImage) => {
                         const id = this.randomId();
@@ -3755,7 +3742,6 @@ class AbstractInteractiveCanvas {
     }
     /**
      * Redraw the canvas.
-     * Uses requestAnimationFrame to batch multiple redraw calls into a single render.
      */
     redraw() {
         if (this.redrawScheduled) {
@@ -4094,6 +4080,16 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
             selection.setEvent(event);
         }
         this.selection$.next(selection);
+        //this.enterTextSelectionModeIfRequired();
+    }
+    enterTextSelectionModeIfRequired() {
+        var _a, _b;
+        if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
+            return;
+        if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== exports.ObjectType.TEXT)
+            return;
+        const text = this.selection$.value.objects[0];
+        text.enterEditing();
     }
     onTextEditing() {
         const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());

package/package.json

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