@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/card/card.test.ts

@@ -1,8 +1,11 @@
-import { Component } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import {
   UiCard,
   UiCardContent,
@@ -13,7 +16,6 @@ import {
 } from './card';
 
 @Component({
-  standalone: true,
   imports: [
     UiCard,
     UiCardHeader,
@@ -24,20 +26,47 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-card>
-      <ui-card-header>
-        <ui-card-title>Title</ui-card-title>
-        <ui-card-description>Desc</ui-card-description>
+    <ui-card [pressable]="pressable()" class="w-full">
+      <ui-card-header class="gap-1">
+        <ui-card-title class="text-lg">Title</ui-card-title>
+        <ui-card-description class="italic">Desc</ui-card-description>
       </ui-card-header>
-      <ui-card-content><text>Body</text></ui-card-content>
-      <ui-card-footer><text>Actions</text></ui-card-footer>
+      <ui-card-content class="pt-2"><text>Body</text></ui-card-content>
+      <ui-card-footer class="justify-end"><text>Actions</text></ui-card-footer>
     </ui-card>
   `,
 })
-class CardHost {}
+class CardHost {
+  readonly pressable = signal(false);
+}
+
+/**
+ * The card's own view. Each component's host element renders as a view too,
+ * so it's found by the card's class rather than by being the first.
+ */
+const cardView = (container: Element) => container.querySelector('.bg-card')!;
+
+/**
+ * Fires a Lynx event `fireEvent` has no shortcut for, as Lynx dispatches it:
+ * `mouseleave` is the mouse's `touchcancel`.
+ */
+const fireLynxEvent = (element: Element, name: string) =>
+  fireEvent(
+    element,
+    Object.assign(new Event(`bindEvent:${name}`), {
+      eventType: 'bindEvent',
+      eventName: name,
+    }),
+  );
+
+/**
+ * The scale the card's inline style holds, if any.
+ */
+const scaleOf = (view: Element) =>
+  (view as HTMLElement).style.getPropertyValue('transform');
 
 describe('UiCard', () => {
-  it('renders each sub-component with projected content', async () => {
+  it('renders each part with its projected content', async () => {
     const { getByText } = await render(CardHost);
     expect(getByText('Title')).toBeTruthy();
     expect(getByText('Desc')).toBeTruthy();
@@ -45,66 +74,57 @@ describe('UiCard', () => {
     expect(getByText('Actions')).toBeTruthy();
   });
 
-  it('renders without a host wrapper', async () => {
-    const { container } = await render(UiCard);
-    expect(container).toBeTruthy();
+  it("merges each part's class with its own", async () => {
+    const { container, getByText } = await render(CardHost);
+    expect(cardView(container).getAttribute('class')).toContain('bg-card');
+    expect(cardView(container).getAttribute('class')).toContain('w-full');
+    expect(getByText('Title').getAttribute('class')).toContain('text-lg');
+    expect(getByText('Desc').getAttribute('class')).toContain('italic');
   });
 
-  it('press handlers are no-ops when pressable is false', async () => {
-    const { componentRef } = await render(UiCard);
-    const inst = componentRef.instance as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
+  it("doesn't respond to presses unless it's pressable", async () => {
+    const { container } = await render(CardHost);
+    const view = cardView(container);
+    fireEvent.touchstart(view);
+    fireEvent.mousedown(view);
+    expect(scaleOf(view)).toBe('');
+    fireEvent.touchend(view);
+    fireEvent.touchcancel(view);
+    fireEvent.mouseup(view);
+    fireLynxEvent(view, 'mouseleave');
+    expect(scaleOf(view)).toBe('');
   });
 
-  it('press handlers fire animations when pressable is true', async () => {
-    const { componentRef } = await render(UiCard);
-    const inst = componentRef.instance as UiCard;
-    setInputSignal(inst.pressable, true);
+  it('scales down while pressed by touch, and back on release', async () => {
+    const { container, componentRef } = await render(CardHost);
+    (componentRef.instance as CardHost).pressable.set(true);
     await waitForUpdate();
-    const cast = inst as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    // Run twice so `#pressAnim?.cancel()` gets exercised on the second call.
-    cast.onPressStart();
-    cast.onPressStart();
-    cast.onPressEnd();
-    cast.onPressCancel();
-    // No assertion — coverage-only paths. Confirm no throw.
-    expect(true).toBe(true);
-  });
-});
+    const view = cardView(container);
 
-describe('Card sub-components', () => {
-  it('UiCardHeader renders projected content', async () => {
-    const { container } = await render(UiCardHeader);
-    expect(container.querySelector('view')).toBeTruthy();
-  });
+    fireEvent.touchstart(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.touchend(view);
+    expect(scaleOf(view)).toBe('scale(1)');
 
-  it('UiCardTitle renders projected content', async () => {
-    const { container } = await render(UiCardTitle);
-    expect(container.querySelector('text')).toBeTruthy();
+    // A scroll that takes the touch over cancels it: the card scales back.
+    fireEvent.touchstart(view);
+    fireEvent.touchcancel(view);
+    expect(scaleOf(view)).toBe('scale(1)');
   });
 
-  it('UiCardDescription renders projected content', async () => {
-    const { container } = await render(UiCardDescription);
-    expect(container.querySelector('text')).toBeTruthy();
-  });
+  it('scales down while pressed by mouse, and back on release or leave', async () => {
+    const { container, componentRef } = await render(CardHost);
+    (componentRef.instance as CardHost).pressable.set(true);
+    await waitForUpdate();
+    const view = cardView(container);
 
-  it('UiCardContent renders projected content', async () => {
-    const { container } = await render(UiCardContent);
-    expect(container.querySelector('view')).toBeTruthy();
-  });
+    fireEvent.mousedown(view);
+    expect(scaleOf(view)).toBe('scale(0.985)');
+    fireEvent.mouseup(view);
+    expect(scaleOf(view)).toBe('scale(1)');
 
-  it('UiCardFooter renders projected content', async () => {
-    const { container } = await render(UiCardFooter);
-    expect(container.querySelector('view')).toBeTruthy();
+    fireEvent.mousedown(view);
+    fireLynxEvent(view, 'mouseleave');
+    expect(scaleOf(view)).toBe('scale(1)');
   });
 });

package/dist/ui/components/chart/chart-focus.test.ts

@@ -0,0 +1,132 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createChartRuntime } from '@tanstack/charts/runtime';
+import { scaleLinear } from '@tanstack/charts/scales/linear';
+import type { ChartDefinition, ChartPoint } from '@tanstack/charts/types';
+import { defineChart, dot, lineY } from '@tanstack/charts/universal';
+import { adjacentFocusPoint, createChartFocusModel } from './chart-focus';
+
+const data = [
+  { x: 0, y: 1 },
+  { x: 1, y: 3 },
+  { x: 2, y: 2 },
+];
+const scales = {
+  x: { scale: () => scaleLinear().domain([0, 2]) },
+  y: { scale: () => scaleLinear().domain([0, 4]) },
+};
+
+const modelFor = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 200,
+    height: 100,
+  });
+  return { scene, model: createChartFocusModel(scene, definition) };
+};
+
+describe('createChartFocusModel', () => {
+  it('resolves a touch to the nearest point', () => {
+    const definition = defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales,
+    });
+    const { scene, model } = modelFor(definition);
+    const target = scene.points[1]!;
+    expect(model.resolve(target.x + 2, target.y - 2)).toEqual([target]);
+  });
+
+  it('resolves nothing out of reach', () => {
+    const definition = defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales,
+      maxFocusDistance: 1,
+    });
+    const { model } = modelFor(definition);
+    expect(model.resolve(-500, -500)).toEqual([]);
+  });
+
+  it("groups a mark's series at one x with the group-x preset", () => {
+    const series = [
+      ...data.map((d) => ({ ...d, s: 'a' })),
+      ...data.map((d) => ({ ...d, y: d.y + 1, s: 'b' })),
+    ];
+    const definition = defineChart({
+      marks: [lineY(series, { x: 'x', y: 'y', z: 's' })],
+      scales,
+      focus: 'group-x',
+    });
+    const { scene, model } = modelFor(definition);
+    const point = scene.points.find((p) => p.xValue === 1)!;
+    const group = model.resolve(point.x, point.y);
+    expect(group.length).toBe(2);
+    expect(model.group(point).length).toBe(2);
+  });
+
+  it('turns focus off with focus: false', () => {
+    const definition = defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales,
+      focus: false,
+    });
+    const { scene, model } = modelFor(definition);
+    expect(model.resolve(scene.points[0]!.x, scene.points[0]!.y)).toEqual([]);
+    expect(model.navigation).toEqual([]);
+  });
+
+  it("uses the definition's spatial index", () => {
+    // Typed loosely: the index returns points of whatever datum the chart has.
+    const findNearest = vi.fn((): ChartPoint<any, any, any> | null => null);
+    const definition = defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales,
+      spatialIndex: () => ({ findNearest }),
+    });
+    const { model } = modelFor(definition);
+    expect(model.resolve(-500, -500)).toEqual([]);
+    expect(findNearest).toHaveBeenCalledWith(-500, -500, 48);
+  });
+
+  it('restores a point from an older scene by identity', () => {
+    const definition = defineChart({
+      marks: [dot(data, { x: 'x', y: 'y' })],
+      scales,
+    });
+    const first = modelFor(definition);
+    const second = modelFor(definition);
+    const restored = second.model.restore(first.scene.points[2]!);
+    expect(restored).toBe(second.scene.points[2]);
+  });
+
+  it('orders points left to right for stepping through them', () => {
+    const definition = defineChart({
+      marks: [dot([data[2]!, data[0]!, data[1]!], { x: 'x', y: 'y' })],
+      scales,
+    });
+    const { model } = modelFor(definition);
+    expect(model.navigation.map((p) => p.xValue)).toEqual([0, 1, 2]);
+  });
+});
+
+describe('adjacentFocusPoint', () => {
+  const definition = defineChart({
+    marks: [dot(data, { x: 'x', y: 'y' })],
+    scales,
+  });
+  const { model } = modelFor(definition);
+  const [first, second, third] = model.navigation;
+
+  it('starts at either end without a current point', () => {
+    expect(adjacentFocusPoint(model, null, 1)).toBe(first);
+    expect(adjacentFocusPoint(model, null, -1)).toBe(third);
+  });
+
+  it('steps and stops at the ends', () => {
+    expect(adjacentFocusPoint(model, first!, 1)).toBe(second);
+    expect(adjacentFocusPoint(model, first!, -1)).toBe(first);
+    expect(adjacentFocusPoint(model, third!, 1)).toBe(third);
+  });
+
+  it('returns null when there is nothing to step to', () => {
+    const empty = { ...model, navigation: [] };
+    expect(adjacentFocusPoint(empty, null, 1)).toBeNull();
+  });
+});

package/dist/ui/components/chart/chart-focus.ts

@@ -0,0 +1,115 @@
+import {
+  resolveChartFocusStrategy,
+  resolveChartPointerFocus,
+  restoreChartFocusPoint,
+  sameChartPointIdentity,
+} from '@tanstack/charts/cursor/host';
+import { focusDisabled } from '@tanstack/charts/focus/disabled';
+import {
+  findNearestPoint,
+  viewportInteractionPoints,
+} from '@tanstack/charts/scene';
+import type {
+  ChartDefinition,
+  ChartFocusStrategy,
+  ChartPoint,
+  ChartScene,
+} from '@tanstack/charts/types';
+
+/**
+ * Which data points a touch lands on, and the order a screen reader steps
+ * through them.
+ *
+ * A port of TanStack's React Native focus model: it runs the definition's focus
+ * strategy (nearest point, a whole x column for `focus: 'x'`, …) over the
+ * scene's points rather than hit-testing painted shapes, which a single
+ * rasterized `<svg>` couldn't do anyway. One chart-level touch handler plus this
+ * model is also what TanStack recommends for native hosts, instead of a
+ * responder per mark.
+ */
+export type ChartFocusModel = {
+  /** The focused group for a touch at scene coordinates, or `[]`. */
+  resolve(x: number, y: number): readonly ChartPoint[];
+  /** The group that focusing `point` shows (its whole x column, say). */
+  group(point: ChartPoint): readonly ChartPoint[];
+  /** Points in reading order, for stepping with accessibility actions. */
+  readonly navigation: readonly ChartPoint[];
+  /** The same datum's point in a newer scene, or `null` if it's gone. */
+  restore(point: ChartPoint): ChartPoint | null;
+};
+
+/** TanStack's default reach for pointer focus, in scene pixels. */
+const DEFAULT_MAX_FOCUS_DISTANCE = 48;
+
+export const createChartFocusModel = (
+  scene: ChartScene<any, any, any>,
+  definition: ChartDefinition<any, any, any>,
+): ChartFocusModel => {
+  const points = viewportInteractionPoints(scene);
+  const strategy: ChartFocusStrategy<any, any, any> | undefined =
+    definition.focus === false
+      ? focusDisabled
+      : resolveChartFocusStrategy(definition.focus);
+  const spatialIndex =
+    definition.focus === false
+      ? undefined
+      : definition.spatialIndex?.(points, { scene });
+  const maxDistance = definition.maxFocusDistance ?? DEFAULT_MAX_FOCUS_DISTANCE;
+
+  return {
+    resolve(x, y) {
+      const focused = resolveChartPointerFocus(
+        scene,
+        strategy,
+        x,
+        y,
+        maxDistance,
+        points,
+      );
+      if (focused) return focused;
+      const point = spatialIndex
+        ? spatialIndex.findNearest(x, y, maxDistance)
+        : findNearestPoint(scene, x, y, maxDistance, points);
+      const visible = point ? restoreChartFocusPoint(points, point) : null;
+      return visible ? [visible] : [];
+    },
+    group(point) {
+      return strategy?.group(points, { point }) ?? [point];
+    },
+    navigation: strategy?.navigation(points) ?? readingOrder(points),
+    restore(point) {
+      return restoreChartFocusPoint(points, point);
+    },
+  };
+};
+
+/** The point `direction` steps away from `current` in navigation order. */
+export const adjacentFocusPoint = (
+  model: ChartFocusModel,
+  current: ChartPoint | null,
+  direction: -1 | 1,
+): ChartPoint | null => {
+  const { navigation } = model;
+  const index = current
+    ? navigation.findIndex((point) => sameChartPointIdentity(point, current))
+    : -1;
+  const next =
+    index < 0
+      ? direction > 0
+        ? 0
+        : navigation.length - 1
+      : Math.max(0, Math.min(navigation.length - 1, index + direction));
+  return navigation[next] ?? null;
+};
+
+/**
+ * Left to right, then top to bottom; ties keep scene order.
+ */
+const readingOrder = (points: readonly ChartPoint[]): ChartPoint[] =>
+  points
+    .map((point, index) => ({ point, index }))
+    .sort(
+      (a, b) =>
+        a.point.x - b.point.x || a.point.y - b.point.y || a.index - b.index,
+    )
+    .map(({ point }) => point);