@effindomv2/fui-as 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",

package/src/controls/Dropdown.ts

@@ -173,9 +173,7 @@ class DropdownOptionNode extends FlexBox {
 
   private syncPresenterLayout(): void {
     this.height(this.presenter.metrics.height, Unit.Pixel);
-    this.presenter.root
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent);
+    this.presenter.root.fillSize();
   }
 }
 

package/src/controls/internal/CheckboxIndicatorPresenter.ts

@@ -44,8 +44,7 @@ class DefaultCheckboxIndicatorPresenter extends CheckboxIndicatorPresenter {
       .justifyContent(1);
     super(root, new PressableIndicatorMetrics(20.0, 20.0));
     const markHost = new FlexBox()
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent)
+      .fillSize()
       .alignItems(1)
       .justifyContent(1);
     const markNode = new Svg();

package/src/controls/internal/DropdownChevronPresenter.ts

@@ -34,8 +34,7 @@ class DefaultDropdownChevronPresenter extends DropdownChevronPresenter {
 
   constructor() {
     const root = new FlexBox()
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent)
+      .fillSize()
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
     const iconNode = new Svg()
@@ -48,8 +47,7 @@ class DefaultDropdownChevronPresenter extends DropdownChevronPresenter {
 
   apply(theme: Theme, state: DropdownChevronVisualState): void {
     this.root
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent)
+      .fillSize()
       .alignItems(AlignItems.Center)
       .justifyContent(JustifyContent.Center);
     this.iconNode

package/src/controls/internal/DropdownOptionRowPresenter.ts

@@ -51,8 +51,7 @@ class DefaultDropdownOptionRowPresenter extends DropdownOptionRowPresenter {
       .wrapping(false) as Text;
     labelNode.overflowFade(true, false);
     const root = new FlexBox()
-      .width(100.0, Unit.Percent)
-      .height(100.0, Unit.Percent)
+      .fillSize()
       .alignItems(AlignItems.Center)
       .child(labelNode);
     super(root, labelNode, new DropdownOptionRowMetrics(34.0));

package/src/core/Node.ts

@@ -1343,6 +1343,38 @@ export abstract class Node implements DragGestureHost, Disposable {
     return false;
   }
 
+  _debugNodeId(): string | null {
+    return this.nodeIdValue;
+  }
+
+  _debugTreePath(): string {
+    const segments = new Array<i32>();
+    let current: Node | null = this;
+    while (current !== null) {
+      const parent = current.retainedParent;
+      if (parent === null) {
+        break;
+      }
+      let childIndex = -1;
+      for (let index = 0; index < parent.childNodes.length; ++index) {
+        if (unchecked(parent.childNodes[index]) === current) {
+          childIndex = index;
+          break;
+        }
+      }
+      if (childIndex < 0) {
+        break;
+      }
+      segments.push(childIndex);
+      current = parent;
+    }
+    let path = "root";
+    for (let index = segments.length - 1; index >= 0; --index) {
+      path += "/" + unchecked(segments[index]).toString();
+    }
+    return path;
+  }
+
   protected capturePointer(): void {
     if (!this.hasBuiltHandle()) {
       return;

package/src/core/Theme.ts

@@ -38,6 +38,7 @@ export class Colors {
     readonly scrollbarThumb: u32,
     readonly dialogBackdrop: u32,
     readonly dialogShadow: u32,
+    readonly panelShadow: u32,
     readonly focusRing: u32,
   ) {}
 }
@@ -231,16 +232,17 @@ export function generateTheme(isDark: bool, accentColor: u32 = DEFAULT_ACCENT_CO
     : mixColor(accent, surface, 0.40);
   const dialogBackdrop = isDark ? rgba(0x00, 0x00, 0x00, 0x24) : rgba(0x00, 0x00, 0x00, 0x18);
   const dialogShadow = isDark ? rgba(0x00, 0x00, 0x00, 0xd8) : rgba(0x00, 0x00, 0x00, 0x88);
+  const panelShadow = withAlpha(dialogShadow, <u32>Math.round(<f32>colorAlpha(dialogShadow) * 0.30));
   const focusRing = accent;
   const contextMenuPanelBackground = isDark ? rgba(0x18, 0x1d, 0x26, 0xd8) : rgba(0xff, 0xff, 0xff, 0xdc);
   const contextMenuPanelBorderColor = isDark ? rgba(0xff, 0xff, 0xff, 0x10) : rgba(0x0f, 0x17, 0x2a, 0x14);
-  const contextMenuPanelShadowColor = isDark ? rgba(0x00, 0x00, 0x00, 0xb0) : rgba(0x0f, 0x17, 0x2a, 0x24);
+  const contextMenuPanelShadowColor = panelShadow;
   const contextMenuItemBackground = rgba(0x00, 0x00, 0x00, 0x00);
   const contextMenuItemHover = isDark ? rgba(0xff, 0xff, 0xff, 0x0c) : rgba(0x0f, 0x17, 0x2a, 0x08);
   const contextMenuSeparatorColor = isDark ? rgba(0xff, 0xff, 0xff, 0x10) : rgba(0x0f, 0x17, 0x2a, 0x12);
   const toolTipPanelBackground = isDark ? rgba(0x11, 0x17, 0x20, 0xf0) : rgba(0xff, 0xff, 0xff, 0xf8);
   const toolTipPanelBorderColor = isDark ? rgba(0xff, 0xff, 0xff, 0x12) : rgba(0x0f, 0x17, 0x2a, 0x12);
-  const toolTipPanelShadowColor = isDark ? rgba(0x00, 0x00, 0x00, 0xb8) : rgba(0x0f, 0x17, 0x2a, 0x22);
+  const toolTipPanelShadowColor = panelShadow;
 
   return new Theme(
     new Colors(
@@ -257,6 +259,7 @@ export function generateTheme(isDark: bool, accentColor: u32 = DEFAULT_ACCENT_CO
       scrollbarThumb,
       dialogBackdrop,
       dialogShadow,
+      panelShadow,
       focusRing,
     ),
     DEFAULT_SPACING,

package/src/nodes/FlexBox.ts

@@ -623,6 +623,8 @@ export class FlexBox extends Node {
     let inFlowChildCount = 0;
     let fullMainAxisPercentChildCount = 0;
     let mainAxisPercentTotal: f32 = 0.0;
+    let firstFullMainAxisPercentChild: Node | null = null;
+    let firstFullMainAxisPercentChildIndex: i32 = -1;
 
     for (let i = 0; i < this.childNodes.length; ++i) {
       const child = unchecked(this.childNodes[i]);
@@ -639,6 +641,10 @@ export class FlexBox extends Node {
       mainAxisPercentTotal += percent;
       if (percent >= MAIN_AXIS_PERCENT_FULL_THRESHOLD) {
         fullMainAxisPercentChildCount += 1;
+        if (firstFullMainAxisPercentChild === null) {
+          firstFullMainAxisPercentChild = child;
+          firstFullMainAxisPercentChildIndex = i;
+        }
       }
     }
 
@@ -649,7 +655,11 @@ export class FlexBox extends Node {
     if (fullMainAxisPercentChildCount > 0) {
       if ((this.layoutWarningMask & LAYOUT_WARNING_FULL_MAIN_AXIS_PERCENT) == 0) {
         this.layoutWarningMask |= LAYOUT_WARNING_FULL_MAIN_AXIS_PERCENT;
-        warn("Layout", this.buildFullMainAxisPercentWarning(isRow));
+        warn("Layout", this.buildFullMainAxisPercentWarning(
+          isRow,
+          firstFullMainAxisPercentChild,
+          firstFullMainAxisPercentChildIndex,
+        ));
       }
       return;
     }
@@ -721,18 +731,56 @@ export class FlexBox extends Node {
     this.cancelBackgroundColorTransition();
   }
 
-  private buildFullMainAxisPercentWarning(isRow: bool): string {
+  private buildFullMainAxisPercentWarning(isRow: bool, child: Node | null, childIndex: i32): string {
+    let message = "";
     if (isRow) {
-      return "A row container has an in-flow child using width(100.0, Unit.Percent) alongside siblings. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillWidth() when the child should take remaining row space.";
+      message = "A row container has an in-flow child using width(100.0, Unit.Percent) alongside siblings. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillWidth() when the child should take remaining row space.";
+    } else {
+      message = "A column container has an in-flow child using height(100.0, Unit.Percent) alongside siblings. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillHeight() when the child should take remaining column space.";
     }
-    return "A column container has an in-flow child using height(100.0, Unit.Percent) alongside siblings. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillHeight() when the child should take remaining column space.";
+    return message + this.buildWarningContextSuffix(child, childIndex);
   }
 
   private buildMainAxisPercentOverflowWarning(isRow: bool): string {
+    let message = "";
     if (isRow) {
-      return "A row container has in-flow children whose explicit width percentages exceed 100% in total. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillWidth() for the child that should expand, or reduce the percentages so they fit.";
+      message = "A row container has in-flow children whose explicit width percentages exceed 100% in total. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillWidth() for the child that should expand, or reduce the percentages so they fit.";
+    } else {
+      message = "A column container has in-flow children whose explicit height percentages exceed 100% in total. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillHeight() for the child that should expand, or reduce the percentages so they fit.";
+    }
+    return message + this.buildWarningContextSuffix(null, -1);
+  }
+
+  private buildWarningContextSuffix(child: Node | null, childIndex: i32): string {
+    const containerNodeId = this._debugNodeId();
+    const childNodeId = child !== null ? child._debugNodeId() : null;
+    const containerPath = this._debugTreePath();
+    const childPath = child !== null ? child._debugTreePath() : null;
+    const hasContainerNodeId = containerNodeId !== null && containerNodeId.length > 0;
+    const hasChildNodeId = childNodeId !== null && childNodeId.length > 0;
+    const hasChildPath = childPath !== null;
+    const hasChildIndex = childIndex >= 0;
+    let suffix = " [containerPath=" + containerPath;
+    let needsSeparator = true;
+    if (hasChildPath) {
+      suffix += ", childPath=" + changetype<string>(childPath);
+    }
+    if (hasContainerNodeId) {
+      suffix += ", containerNodeId=" + changetype<string>(containerNodeId);
+      needsSeparator = true;
+    }
+    if (hasChildNodeId) {
+      suffix += ", childNodeId=" + changetype<string>(childNodeId);
+      needsSeparator = true;
+    }
+    if (hasChildIndex) {
+      if (needsSeparator) {
+        suffix += ", ";
+      }
+      suffix += "childIndex=" + childIndex.toString();
     }
-    return "A column container has in-flow children whose explicit height percentages exceed 100% in total. Unit.Percent is literal parent-relative sizing, not flex sharing. Use fillHeight() for the child that should expand, or reduce the percentages so they fit.";
+    suffix += "]";
+    return suffix;
   }
 
   protected applyVisualStyle(): void {

package/src/nodes/VirtualList.ts

@@ -99,9 +99,7 @@ export class VirtualList extends FlexBox {
       .child(topSpacerValue);
 
     for (let index = 0; index < poolSizeValue; ++index) {
-      const container = new FlexBox()
-        .width(FULL_SIZE, Unit.Percent)
-        .height(FULL_SIZE, Unit.Percent);
+      const container = new FlexBox().fillSize();
       const rowArea = new SelectionArea()
         .width(FULL_SIZE, Unit.Percent)
         .height(0.0, Unit.Pixel)
@@ -117,8 +115,7 @@ export class VirtualList extends FlexBox {
       .scrollEnabledY(true)
       .scrollOffset(scrollStateValue.offsetX.value, scrollStateValue.offsetY.value)
       .scrollContentSize(-1.0, <f32>totalItemsValue * itemHeightValue)
-      .width(FULL_SIZE, Unit.Percent)
-      .height(FULL_SIZE, Unit.Percent)
+      .fillSize()
       .child(contentValue) as ScrollBox;
     scrollStateValue.contentHeight.value = <f32>totalItemsValue * itemHeightValue;
 
@@ -132,8 +129,7 @@ export class VirtualList extends FlexBox {
 
     this.flexDirection(FlexDirection.Column)
       .child(this.scrollBoxValue)
-      .width(FULL_SIZE, Unit.Percent)
-      .height(FULL_SIZE, Unit.Percent);
+      .fillSize();
     this.attachListeners();
   }