@effindomv2/fui-as 0.1.0

package/src/core/FocusAdornerManager.ts

@@ -0,0 +1,263 @@
+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";
+
+const STANDARD_FOCUS_RING_WIDTH: f32 = 2.0;
+const STANDARD_FOCUS_RING_OUTSET: f32 = 2.0;
+
+class FocusAdornerStyle {
+  constructor(
+    readonly topLeftRadius: f32,
+    readonly topRightRadius: f32,
+    readonly bottomRightRadius: f32,
+    readonly bottomLeftRadius: f32,
+  ) {}
+}
+
+class FocusAdornerRect {
+  constructor(
+    readonly x: f32,
+    readonly y: f32,
+    readonly width: f32,
+    readonly height: f32,
+  ) {}
+}
+
+export class FocusAdornerManager {
+  private static hostRoot: Portal | null = null;
+  private static ringNode: FlexBox | null = null;
+  private static activeOwner: Node | null = null;
+  private static activeStyle: FocusAdornerStyle | null = null;
+  private static attached: bool = false;
+  private static lastHostX: f32 = NaN;
+  private static lastHostY: f32 = NaN;
+  private static lastHostWidth: f32 = NaN;
+  private static lastHostHeight: f32 = NaN;
+  private static lastRingX: f32 = NaN;
+  private static lastRingY: f32 = NaN;
+  private static lastRingWidth: f32 = NaN;
+  private static lastRingHeight: f32 = NaN;
+  private static lastColor: u32 = 0;
+  private static lastTopLeftRadius: f32 = NaN;
+  private static lastTopRightRadius: f32 = NaN;
+  private static lastBottomRightRadius: f32 = NaN;
+  private static lastBottomLeftRadius: f32 = NaN;
+
+  static createDefaultHost(): Portal {
+    const existingHost = this.hostRoot;
+    if (existingHost !== null) {
+      return existingHost;
+    }
+    const ringNode = new FlexBox()
+      .positionAbsolute()
+      .bgColor(0x00000000)
+      .border(STANDARD_FOCUS_RING_WIDTH, 0x00000000, BorderStyle.Solid);
+    const hostRoot = new Portal()
+      .positionAbsolute()
+      .position(0.0, 0.0)
+      .width(0.0, Unit.Pixel)
+      .height(0.0, Unit.Pixel)
+      .clipToBounds(true) as Portal;
+    this.hostRoot = hostRoot;
+    this.ringNode = ringNode;
+    return hostRoot;
+  }
+
+  static clear(): void {
+    this.hide();
+    this.activeOwner = null;
+    this.activeStyle = null;
+  }
+
+  static showStandard(owner: Node, cornerRadius: f32): void {
+    this.showStandardCorners(owner, cornerRadius, cornerRadius, cornerRadius, cornerRadius);
+  }
+
+  static showStandardCorners(owner: Node, tl: f32, tr: f32, br: f32, bl: f32): void {
+    this.activeOwner = owner;
+    this.activeStyle = new FocusAdornerStyle(
+      tl + STANDARD_FOCUS_RING_OUTSET,
+      tr + STANDARD_FOCUS_RING_OUTSET,
+      br + STANDARD_FOCUS_RING_OUTSET,
+      bl + STANDARD_FOCUS_RING_OUTSET,
+    );
+    this.sync();
+  }
+
+  static hideOwner(owner: Node): void {
+    if (this.activeOwner !== owner) {
+      return;
+    }
+    this.activeOwner = null;
+    this.activeStyle = null;
+    this.hide();
+  }
+
+  static handleOwnerDestroyed(owner: Node): void {
+    this.hideOwner(owner);
+  }
+
+  static refreshAfterCommit(): bool {
+    return this.sync();
+  }
+
+  private static sync(): bool {
+    const owner = this.activeOwner;
+    const style = this.activeStyle;
+    if (owner === null || style === null) {
+      return this.hide();
+    }
+    const hostRoot = this.hostRoot;
+    const ringNode = this.ringNode;
+    if (hostRoot === null || ringNode === null) {
+      return false;
+    }
+    if (owner.builtHandle == 0 || hostRoot.builtHandle == 0) {
+      return this.hide();
+    }
+    const ringRect = this.resolveRingRect(owner);
+    if (ringRect === null) {
+      return this.hide();
+    }
+    const visibleRect = this.resolveVisibleRect(owner, ringRect);
+    if (visibleRect === null) {
+      return this.hide();
+    }
+    const color = activeTheme.value.colors.focusRing;
+    let changed = false;
+    if (!this.attached) {
+      hostRoot.addChildNode(ringNode);
+      this.attached = true;
+      changed = true;
+    }
+    if (
+      visibleRect.x != this.lastHostX ||
+      visibleRect.y != this.lastHostY ||
+      visibleRect.width != this.lastHostWidth ||
+      visibleRect.height != this.lastHostHeight ||
+      (ringRect.x - visibleRect.x) != this.lastRingX ||
+      (ringRect.y - visibleRect.y) != this.lastRingY ||
+      ringRect.width != this.lastRingWidth ||
+      ringRect.height != this.lastRingHeight
+    ) {
+      const relativeRingX = ringRect.x - visibleRect.x;
+      const relativeRingY = ringRect.y - visibleRect.y;
+      hostRoot.position(visibleRect.x, visibleRect.y);
+      hostRoot.width(visibleRect.width, Unit.Pixel);
+      hostRoot.height(visibleRect.height, Unit.Pixel);
+      ringNode.position(relativeRingX, relativeRingY);
+      ringNode.width(ringRect.width, Unit.Pixel);
+      ringNode.height(ringRect.height, Unit.Pixel);
+      this.lastHostX = visibleRect.x;
+      this.lastHostY = visibleRect.y;
+      this.lastHostWidth = visibleRect.width;
+      this.lastHostHeight = visibleRect.height;
+      this.lastRingX = relativeRingX;
+      this.lastRingY = relativeRingY;
+      this.lastRingWidth = ringRect.width;
+      this.lastRingHeight = ringRect.height;
+      changed = true;
+    }
+    if (
+      color != this.lastColor ||
+      style.topLeftRadius != this.lastTopLeftRadius ||
+      style.topRightRadius != this.lastTopRightRadius ||
+      style.bottomRightRadius != this.lastBottomRightRadius ||
+      style.bottomLeftRadius != this.lastBottomLeftRadius
+    ) {
+      ringNode.corners(style.topLeftRadius, style.topRightRadius, style.bottomRightRadius, style.bottomLeftRadius);
+      ringNode.border(STANDARD_FOCUS_RING_WIDTH, color, BorderStyle.Solid);
+      this.lastColor = color;
+      this.lastTopLeftRadius = style.topLeftRadius;
+      this.lastTopRightRadius = style.topRightRadius;
+      this.lastBottomRightRadius = style.bottomRightRadius;
+      this.lastBottomLeftRadius = style.bottomLeftRadius;
+      changed = true;
+    }
+    return changed;
+  }
+
+  private static hide(): bool {
+    const hostRoot = this.hostRoot;
+    const ringNode = this.ringNode;
+    if (!this.attached || hostRoot === null || ringNode === null) {
+      this.attached = false;
+      this.resetCachedGeometry();
+      return false;
+    }
+    hostRoot.removeChildNode(ringNode);
+    hostRoot.position(0.0, 0.0);
+    hostRoot.width(0.0, Unit.Pixel);
+    hostRoot.height(0.0, Unit.Pixel);
+    this.attached = false;
+    this.resetCachedGeometry();
+    return true;
+  }
+
+  private static resetCachedGeometry(): void {
+    this.lastHostX = NaN;
+    this.lastHostY = NaN;
+    this.lastHostWidth = NaN;
+    this.lastHostHeight = NaN;
+    this.lastRingX = NaN;
+    this.lastRingY = NaN;
+    this.lastRingWidth = NaN;
+    this.lastRingHeight = NaN;
+    this.lastColor = 0;
+    this.lastTopLeftRadius = NaN;
+    this.lastTopRightRadius = NaN;
+    this.lastBottomRightRadius = NaN;
+    this.lastBottomLeftRadius = NaN;
+  }
+
+  private static resolveRingRect(owner: Node): FocusAdornerRect | null {
+    if (owner.builtHandle == 0) {
+      return null;
+    }
+    const bounds = ui.tryGetBounds(owner.builtHandle);
+    if (bounds === null) {
+      return null;
+    }
+    return new FocusAdornerRect(
+      unchecked(bounds[0]) - STANDARD_FOCUS_RING_OUTSET,
+      unchecked(bounds[1]) - STANDARD_FOCUS_RING_OUTSET,
+      unchecked(bounds[2]) + (STANDARD_FOCUS_RING_OUTSET * 2.0),
+      unchecked(bounds[3]) + (STANDARD_FOCUS_RING_OUTSET * 2.0),
+    );
+  }
+
+  private static resolveVisibleRect(owner: Node, ringRect: FocusAdornerRect): FocusAdornerRect | null {
+    let minX = ringRect.x;
+    let minY = ringRect.y;
+    let maxX = ringRect.x + ringRect.width;
+    let maxY = ringRect.y + ringRect.height;
+
+    minX = <f32>Math.max(minX, 0.0);
+    minY = <f32>Math.max(minY, 0.0);
+    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) {
+      return null;
+    }
+    return new FocusAdornerRect(minX, minY, width, height);
+  }
+}

package/src/core/FocusVisibility.ts

@@ -0,0 +1,36 @@
+import { Signal } from "./Signal";
+import { KeyEventType, KeyModifier, PointerEventType } from "./ffi";
+
+export const keyboardFocusVisible = new Signal<bool>(true);
+
+function isModifierKey(key: string): bool {
+  return key == "Shift" || key == "Control" || key == "Alt" || key == "Meta";
+}
+
+export function showKeyboardFocusForPointerEvent(eventType: PointerEventType): void {
+  if (eventType == PointerEventType.Down) {
+    keyboardFocusVisible.value = false;
+  }
+}
+
+function hasNonShiftModifier(modifiers: u32): bool {
+  return (modifiers & (KeyModifier.Ctrl | KeyModifier.Alt | KeyModifier.Meta)) != 0;
+}
+
+export function showKeyboardFocusForKeyEvent(eventType: KeyEventType, key: string, modifiers: u32 = 0): void {
+  if (eventType != KeyEventType.Down || isModifierKey(key)) {
+    return;
+  }
+  if (hasNonShiftModifier(modifiers)) {
+    return;
+  }
+  if (key == "Escape") {
+    keyboardFocusVisible.value = false;
+    return;
+  }
+  keyboardFocusVisible.value = true;
+}
+
+export function resetKeyboardFocusVisibility(): void {
+  keyboardFocusVisible.value = true;
+}

package/src/core/FrameScheduler.ts

@@ -0,0 +1,28 @@
+import * as ui from "../bindings/ui";
+
+let needsCommit: bool = false;
+let flushScheduled: bool = false;
+
+export function markNeedsCommit(): void {
+  needsCommit = true;
+  if (flushScheduled) {
+    return;
+  }
+  flushScheduled = true;
+  ui.requestRender();
+}
+
+export function flushCommit(): bool {
+  flushScheduled = false;
+  if (!needsCommit) {
+    return false;
+  }
+  needsCommit = false;
+  ui.commitFrame();
+  return true;
+}
+
+export function resetCommitState(): void {
+  needsCommit = false;
+  flushScheduled = false;
+}

package/src/core/KeyboardScroll.ts

@@ -0,0 +1,161 @@
+import { EventRouter } from "./EventRouter";
+import {
+  getKeyboardScrollFallbackCandidates,
+  getKeyboardScrollSelectedCandidate,
+} from "./KeyboardScrollTracker";
+import { Node } from "./Node";
+import { ScrollView, Text } from "../nodes";
+
+const KEYBOARD_SCROLL_LINE_STEP: f32 = 40.0;
+const KEYBOARD_SCROLL_PAGE_OVERLAP: f32 = 40.0;
+const KEYBOARD_SCROLL_TOLERANCE: f32 = 0.5;
+
+function isKeyboardScrollKey(key: string): bool {
+  return key == "ArrowLeft" ||
+    key == "ArrowRight" ||
+    key == "ArrowUp" ||
+    key == "ArrowDown" ||
+    key == "PageUp" ||
+    key == "PageDown" ||
+    key == "Home" ||
+    key == "End";
+}
+
+function isHorizontalKeyboardScrollKey(key: string): bool {
+  return key == "ArrowLeft" || key == "ArrowRight";
+}
+
+function isVerticalKeyboardScrollKey(key: string): bool {
+  return key == "ArrowUp" ||
+    key == "ArrowDown" ||
+    key == "PageUp" ||
+    key == "PageDown" ||
+    key == "Home" ||
+    key == "End";
+}
+
+function shouldSkipTextOwnedFallback(node: Text, key: string): bool {
+  if (key == "Home" || key == "End") {
+    return true;
+  }
+  return node.isEditableText &&
+    (key == "ArrowLeft" || key == "ArrowRight" || key == "ArrowUp" || key == "ArrowDown");
+}
+
+function pageStep(viewportHeight: f32): f32 {
+  if (viewportHeight <= 0.0) {
+    return 0.0;
+  }
+  if (viewportHeight > KEYBOARD_SCROLL_PAGE_OVERLAP) {
+    return viewportHeight - KEYBOARD_SCROLL_PAGE_OVERLAP;
+  }
+  return viewportHeight * 0.875;
+}
+
+function clamp(value: f32, minValue: f32, maxValue: f32): f32 {
+  if (value < minValue) {
+    return minValue;
+  }
+  if (value > maxValue) {
+    return maxValue;
+  }
+  return value;
+}
+
+function tryScrollViewport(view: ScrollView, key: string): bool {
+  const state = view.scrollState;
+  if (isHorizontalKeyboardScrollKey(key)) {
+    if (!view.isHorizontalScrollEnabled) {
+      return false;
+    }
+    const viewportWidth = state.viewportWidth.value;
+    const maxOffsetX = <f32>Math.max(0.0, state.contentWidth.value - viewportWidth);
+    if (maxOffsetX <= KEYBOARD_SCROLL_TOLERANCE) {
+      return false;
+    }
+    const currentOffsetX = clamp(state.offsetX.value, 0.0, maxOffsetX);
+    let nextOffsetX = currentOffsetX;
+    if (key == "ArrowLeft") {
+      nextOffsetX = currentOffsetX - KEYBOARD_SCROLL_LINE_STEP;
+    } else if (key == "ArrowRight") {
+      nextOffsetX = currentOffsetX + KEYBOARD_SCROLL_LINE_STEP;
+    } else {
+      return false;
+    }
+    nextOffsetX = clamp(nextOffsetX, 0.0, maxOffsetX);
+    if (Math.abs(nextOffsetX - currentOffsetX) <= KEYBOARD_SCROLL_TOLERANCE) {
+      return false;
+    }
+    view.scrollOffset(nextOffsetX, state.offsetY.value);
+    return true;
+  }
+
+  if (!isVerticalKeyboardScrollKey(key) || !view.isVerticalScrollEnabled) {
+    return false;
+  }
+  const viewportHeight = state.viewportHeight.value;
+  const maxOffsetY = <f32>Math.max(0.0, state.contentHeight.value - viewportHeight);
+  if (maxOffsetY <= KEYBOARD_SCROLL_TOLERANCE) {
+    return false;
+  }
+
+  const currentOffsetY = clamp(state.offsetY.value, 0.0, maxOffsetY);
+  let nextOffsetY = currentOffsetY;
+  if (key == "ArrowUp") {
+    nextOffsetY = currentOffsetY - KEYBOARD_SCROLL_LINE_STEP;
+  } else if (key == "ArrowDown") {
+    nextOffsetY = currentOffsetY + KEYBOARD_SCROLL_LINE_STEP;
+  } else if (key == "PageUp") {
+    nextOffsetY = currentOffsetY - pageStep(viewportHeight);
+  } else if (key == "PageDown") {
+    nextOffsetY = currentOffsetY + pageStep(viewportHeight);
+  } else if (key == "Home") {
+    nextOffsetY = 0.0;
+  } else if (key == "End") {
+    nextOffsetY = maxOffsetY;
+  } else {
+    return false;
+  }
+
+  nextOffsetY = clamp(nextOffsetY, 0.0, maxOffsetY);
+  if (Math.abs(nextOffsetY - currentOffsetY) <= KEYBOARD_SCROLL_TOLERANCE) {
+    return false;
+  }
+
+  view.scrollOffset(state.offsetX.value, nextOffsetY);
+  return true;
+}
+
+export function handleKeyboardScrollFallback(key: string, modifiers: u32): bool {
+  if (modifiers != 0 || !isKeyboardScrollKey(key)) {
+    return false;
+  }
+
+  const focusedNode = EventRouter.getFocusedNode();
+  if (focusedNode !== null) {
+    if (focusedNode instanceof Text && shouldSkipTextOwnedFallback(changetype<Text>(focusedNode), key)) {
+      return false;
+    }
+
+    let current: Node | null = focusedNode;
+    while (current !== null) {
+      if (current instanceof ScrollView && tryScrollViewport(changetype<ScrollView>(current), key)) {
+        return true;
+      }
+      current = current.parentNode;
+    }
+  }
+
+  const selectedCandidate = getKeyboardScrollSelectedCandidate();
+  if (selectedCandidate !== null && tryScrollViewport(selectedCandidate, key)) {
+    return true;
+  }
+
+  const fallbackCandidates = getKeyboardScrollFallbackCandidates();
+  for (let index = 0; index < fallbackCandidates.length; ++index) {
+    if (tryScrollViewport(unchecked(fallbackCandidates[index]), key)) {
+      return true;
+    }
+  }
+  return false;
+}