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

package/dist/interactive-canvas.es.js

@@ -252,38 +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();
-    }
-    onCanvasDimensionsChange() {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    }
-    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) {
@@ -444,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);
@@ -1763,20 +1791,6 @@ 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);
@@ -3709,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) {
-        this.fabricCanvas.getWidth();
+        //const oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3717,37 +3731,39 @@ 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,
-                         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();
-         }*/
+        /*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);

package/dist/interactive-canvas.js

@@ -273,38 +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();
-    }
-    onCanvasDimensionsChange() {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    }
-    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) {
@@ -465,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);
@@ -1784,20 +1812,6 @@ 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);
@@ -3730,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) {
-        this.fabricCanvas.getWidth();
+        //const oldWidth = this.fabricCanvas.getWidth();
         const width = dims.widthPx * zoom;
         const height = dims.heightPx * zoom;
         this.fabricCanvas.setZoom(zoom);
@@ -3738,37 +3752,39 @@ 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,
-                         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();
-         }*/
+        /*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);

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

@@ -9,8 +9,10 @@ export declare class AdvancedLayoutManager extends AbstractLayoutManager {
     private repositionCutoffs;
     private repositionBackgrounds;
     private resizeCanvas;
+    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/package.json

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