0.10.4: Add Alignment.SoftStretch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-widgets",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Typescript retained mode GUI for the HTML canvas API",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/helpers/resolveContainerDimensions.ts

@@ -34,6 +34,8 @@ export function resolveContainerDimensions<W extends Widget>(minWidth: number, m
         } else {
             childMinWidth = Math.max(minWidth - hPadding, 0);
         }
+    } else if(alignment.horizontal === Alignment.SoftStretch) {
+        childMinWidth = Math.max(minWidth - hPadding, 0);
     }
 
     let childMinHeight = 0;
@@ -43,6 +45,8 @@ export function resolveContainerDimensions<W extends Widget>(minWidth: number, m
         } else {
             childMinHeight = Math.max(minHeight - vPadding, 0);
         }
+    } else if(alignment.vertical === Alignment.SoftStretch) {
+        childMinHeight = Math.max(minHeight - vPadding, 0);
     }
 
     // Resolve child's dimensions

src/helpers/resolveContainerPosition.ts

@@ -15,7 +15,7 @@ export function resolveContainerPosition<W extends Widget>(x: number, y: number,
 
     // Horizontal offset
     let childX = x + padding.left;
-    if(alignment.horizontal !== Alignment.Stretch) {
+    if(alignment.horizontal !== Alignment.Stretch && alignment.horizontal !== Alignment.SoftStretch) {
         // Get free space for this axis
         const freeSpace = idealWidth - usedWidth;
 
@@ -30,7 +30,7 @@ export function resolveContainerPosition<W extends Widget>(x: number, y: number,
 
     // Vertical offset
     let childY = y + padding.top;
-    if(alignment.vertical !== Alignment.Stretch) {
+    if(alignment.vertical !== Alignment.Stretch && alignment.vertical !== Alignment.SoftStretch) {
         // Same logic as above, but for vertical axis
         const freeSpace = idealHeight - usedHeight;
 

src/theme/Alignment.ts

@@ -5,8 +5,20 @@
  * @category Theme
  */
 export enum Alignment {
-    /** Give the extra space to the child, potentially stretching it. */
+    /**
+     * Give the maximum available space to the child (taking into account
+     * container padding), potentially stretching it.
+     */
     Stretch = 'stretch',
+    // TODO maybe make SoftStretch the default? it seems like a happy middle-
+    //      -ground between the nuclear-bomb-esque incompatible behaviour of
+    //      0.10, and the old behaviour of 0.9
+    /**
+     * Propagates minimum axis length to the child (taking into account
+     * container padding), potentially stretching it, but not growing it beyond
+     * the minimum container axis lenght unless necessary.
+     */
+    SoftStretch = 'soft-stretch',
     /**
      * Align the child to the start of the container, having the extra space at
      * the end. Equivalent to using a ratio of 0.

src/widgets/MultiContainer.ts

@@ -128,9 +128,11 @@ export class MultiContainer<W extends Widget = Widget> extends MultiParent<W> {
         const alignment = this.multiContainerAlignment;
         if(alignment.cross === Alignment.Stretch) {
             minCrossAxis = this.vertical ? maxWidth : maxHeight;
-            if(minCrossAxis == Infinity) {
+            if(minCrossAxis === Infinity) {
                 minCrossAxis = this.vertical ? minWidth : minHeight;
             }
+        } else if(alignment.cross === Alignment.SoftStretch) {
+            minCrossAxis = this.vertical ? minWidth : minHeight;
         }
 
         this.enabledChildCount = 0;
@@ -457,7 +459,7 @@ export class MultiContainer<W extends Widget = Widget> extends MultiParent<W> {
         const around = alignment.main === FlexAlignment.SpaceAround;
         const between = alignment.main === FlexAlignment.SpaceBetween || around;
         const mainRatio = (between ? 0 : alignment.main as number);
-        const crossRatio = (alignment.cross === Alignment.Stretch ? 0 : alignment.cross);
+        const crossRatio = ((alignment.cross === Alignment.Stretch || alignment.cross === Alignment.SoftStretch) ? 0 : alignment.cross);
         const effectiveChildren = this.enabledChildCount - 1 + (around ? 2 : 0);
         let extraSpacing;
         if(effectiveChildren <= 0) {