@effindomv2/fui-as 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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.4"
   },
   "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 {
@@ -179,6 +180,7 @@ class DropdownOptionNode extends FlexBox {
 
 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;
@@ -212,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()
@@ -394,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) {
@@ -603,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/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/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])();
+  }
+}