@effindomv2/fui-as 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",
@@ -78,7 +78,7 @@
   },
   "dependencies": {
     "@assemblyscript/loader": "^0.28.17",
-    "@effindomv2/runtime": "0.1.2"
+    "@effindomv2/runtime": "0.1.3"
   },
   "devDependencies": {
     "@as-pect/assembly": "8.1.0",

package/src/controls/Dropdown.ts

@@ -19,7 +19,8 @@ import { Theme, activeTheme } from "../core/Theme";
 import { warn } from "../core/Logger";
 import { Node } from "../core/Node";
 import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState";
-import { FlexBox, Portal, ScrollBarVisibility, ScrollBox } from "../nodes";
+import { registerScrollHook } from "../core/ScrollHooks";
+import { FlexBox, Portal, ScrollBarVisibility, ScrollBox, ScrollView } from "../nodes";
 import { bind2 } from "../core/bind";
 import { getControlTemplates } from "./ControlTemplateSet";
 import {
@@ -173,14 +174,13 @@ 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();
   }
 }
 
 export class Dropdown extends FlexBox implements GlobalKeyHandler {
   private static activeInstance: Dropdown | null = null;
+  private static scrollHookRegistered: bool = false;
 
   private fieldTemplateValue: DropdownFieldTemplate | null = null;
   private chevronTemplateValue: DropdownChevronTemplate | null = null;
@@ -214,6 +214,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
 
   constructor() {
     super();
+    Dropdown.ensureScrollHook();
     const fieldPresenter = createFieldPresenter(null);
     const chevronPresenter = createChevronPresenter(null);
     const popupRoot = new Portal()
@@ -396,6 +397,24 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     }
   }
 
+  static dismissActiveDropdownIfTriggerOutOfViewport(): void {
+    const dropdown = Dropdown.activeInstance;
+    if (dropdown === null) {
+      return;
+    }
+    if (!dropdown.isTriggerVisibleInViewport()) {
+      dropdown.close();
+    }
+  }
+
+  private static ensureScrollHook(): void {
+    if (Dropdown.scrollHookRegistered) {
+      return;
+    }
+    registerScrollHook((): void => Dropdown.dismissActiveDropdownIfTriggerOutOfViewport());
+    Dropdown.scrollHookRegistered = true;
+  }
+
   highlightIndex(index: i32): void {
     if (index < 0 || index >= this.itemsValue.length || this.highlightedIndexValue == index) {
       if (index < 0 || index >= this.itemsValue.length) {
@@ -605,6 +624,56 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     return ui.tryGetBounds(this.builtHandle);
   }
 
+  private findContainingScrollView(): ScrollView | null {
+    let current: Node | null = this.parentNode;
+    while (current !== null) {
+      if (current instanceof ScrollView) {
+        return current as ScrollView;
+      }
+      current = current.parentNode;
+    }
+    return null;
+  }
+
+  private isTriggerVisibleInViewport(): bool {
+    const bounds = this.tryGetViewportBounds();
+    if (bounds === null) {
+      return true;
+    }
+    const x = unchecked(bounds[0]);
+    const y = unchecked(bounds[1]);
+    const width = unchecked(bounds[2]);
+    const height = unchecked(bounds[3]);
+    if (width <= 0.0 || height <= 0.0) {
+      return true;
+    }
+    const right = x + width;
+    const bottom = y + height;
+    
+    const scrollView = this.findContainingScrollView();
+    if (scrollView === null) {
+      const viewportWidth = ui.getViewportWidth();
+      const viewportHeight = ui.getViewportHeight();
+      return right > 0.0 && bottom > 0.0 && x < viewportWidth && y < viewportHeight;
+    }
+    
+    const scrollViewBounds = ui.tryGetBounds(scrollView.builtHandle);
+    if (scrollViewBounds === null) {
+      const viewportWidth = ui.getViewportWidth();
+      const viewportHeight = ui.getViewportHeight();
+      return right > 0.0 && bottom > 0.0 && x < viewportWidth && y < viewportHeight;
+    }
+    
+    const svX = unchecked(scrollViewBounds[0]);
+    const svY = unchecked(scrollViewBounds[1]);
+    const svWidth = unchecked(scrollViewBounds[2]);
+    const svHeight = unchecked(scrollViewBounds[3]);
+    const svRight = svX + svWidth;
+    const svBottom = svY + svHeight;
+    
+    return right > svX && bottom > svY && x < svRight && y < svBottom;
+  }
+
   private positionPanel(triggerX: f32, triggerY: f32, triggerWidth: f32, triggerHeight: f32): void {
     const popupWidth = this.resolvePopupWidth(triggerWidth);
     const panelHeight = this.resolveViewportClampedPanelOuterHeight();

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/EventRouter.ts

@@ -15,6 +15,7 @@ import { DragDropEffects, DragSession, ExternalDropItemInfo, Node } from "./Node
 import { DragDropManager } from "./DragDropManager";
 import { ExternalDragEventType, ExternalDropManager } from "./ExternalDropManager";
 import { isCoarsePointer } from "./Platform";
+import { runScrollHooks } from "./ScrollHooks";
 
 export interface GlobalKeyHandler {
   handleGlobalKeyEvent(eventType: KeyEventType, key: string, modifiers: u32): bool;
@@ -161,6 +162,7 @@ export class EventRouter {
     viewportHeight: f32,
   ): void {
     ToolTipManager.handleScroll();
+    runScrollHooks();
     const node = this.resolveNode(handle);
     if (node === null) {
       return;

package/src/core/FocusAdornerManager.ts

@@ -2,7 +2,7 @@ import * as ui from "../bindings/ui";
 import { BorderStyle, Unit } from "./ffi";
 import { Node } from "./Node";
 import { activeTheme } from "./Theme";
-import { Portal, ScrollView, FlexBox } from "../nodes";
+import { Portal, FlexBox } from "../nodes";
 
 const STANDARD_FOCUS_RING_WIDTH: f32 = 2.0;
 const STANDARD_FOCUS_RING_OUTSET: f32 = 2.0;
@@ -59,7 +59,7 @@ export class FocusAdornerManager {
       .position(0.0, 0.0)
       .width(0.0, Unit.Pixel)
       .height(0.0, Unit.Pixel)
-      .clipToBounds(true) as Portal;
+      .clipToBounds(false) as Portal;
     this.hostRoot = hostRoot;
     this.ringNode = ringNode;
     return hostRoot;
@@ -239,20 +239,6 @@ export class FocusAdornerManager {
     maxX = <f32>Math.min(maxX, ui.getViewportWidth());
     maxY = <f32>Math.min(maxY, ui.getViewportHeight());
 
-    let ancestor = owner.parentNode;
-    while (ancestor !== null) {
-      if (ancestor instanceof ScrollView && ancestor.builtHandle != 0) {
-        const viewportBounds = ui.tryGetBounds(ancestor.builtHandle);
-        if (viewportBounds !== null) {
-          minX = <f32>Math.max(minX, unchecked(viewportBounds[0]));
-          minY = <f32>Math.max(minY, unchecked(viewportBounds[1]));
-          maxX = <f32>Math.min(maxX, unchecked(viewportBounds[0]) + unchecked(viewportBounds[2]));
-          maxY = <f32>Math.min(maxY, unchecked(viewportBounds[1]) + unchecked(viewportBounds[3]));
-        }
-      }
-      ancestor = ancestor.parentNode;
-    }
-
     const width = maxX - minX;
     const height = maxY - minY;
     if (width <= 0.0 || height <= 0.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/ScrollHooks.ts

@@ -0,0 +1,13 @@
+type ScrollHook = () => void;
+
+const hooks: Array<ScrollHook> = new Array<ScrollHook>();
+
+export function registerScrollHook(hook: ScrollHook): void {
+  hooks.push(hook);
+}
+
+export function runScrollHooks(): void {
+  for (let index = 0; index < hooks.length; ++index) {
+    unchecked(hooks[index])();
+  }
+}

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();
   }