@fusion.dev/helix-headless 0.194.0 → 0.195.0

package/dist/spatial-scatter-chart/view.js

@@ -1,4 +1,4 @@
-import { pathData, projectionOf, shortNumber, } from '@fusion.dev/helix-core';
+import { boxLabels, pathData, projectionOf, shortNumber, } from '@fusion.dev/helix-core';
 import { svg } from 'lit';
 export const SPATIAL_VIEW = { tilt: 25, turn: 42 };
 export const VIEW_STEP = 15;
@@ -10,6 +10,7 @@ export const tickText = (value) => String(Number(value.toPrecision(6)));
 const WIDE = 0.58;
 export const TICK_SIZE = 0.13;
 export const NAME_SIZE = 0.15;
+const LABEL_GAP = 0.06;
 export const boxView = (axes, camera, extra = []) => {
     const projection = projectionOf(camera);
     const on = ([x, y, z]) => projection.at(x, -z, y);
@@ -41,22 +42,11 @@ export const boxView = (axes, camera, extra = []) => {
         line([-1, y, -1], [1, y, -1]);
         line([-1, y, -1], [-1, y, 1]);
     }
-    const labels = [];
-    const label = (at, text, name = false) => {
-        labels.push({ name, text, ...on(at) });
-    };
-    for (const tick of axes.x.ticks) {
-        label([inBox(axes.x, tick), -1, 1.14], tickText(tick));
-    }
-    for (const tick of axes.z.ticks) {
-        label([1.14, -1, inBox(axes.z, tick)], tickText(tick));
-    }
-    for (const tick of axes.y.ticks.slice(1)) {
-        label([-1.14, inBox(axes.y, tick), 1], tickText(tick));
-    }
-    label([0, -1, 1.38], axes.x.name, true);
-    label([1.6, -1, 0], axes.z.name, true);
-    label([-1, 1.28, 1], axes.y.name, true);
+    const text = (axis) => ({
+        name: axis.name,
+        ticks: axis.ticks.map((tick) => ({ at: inBox(axis, tick), text: tickText(tick) })),
+    });
+    const labels = boxLabels((point) => ({ ...on(point), depth: depth(point) }), { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: LABEL_GAP, name: NAME_SIZE, tick: TICK_SIZE, wide: WIDE });
     const corners = [];
     for (const x of [-1, 1]) {
         for (const y of [-1, 1]) {
@@ -113,3 +103,110 @@ export const nearestTo = (drawing, event, places, reach = 14) => {
     }
     return found;
 };
+const TURN_PER_PIXEL = 0.5;
+const TILT_PER_PIXEL = 0.35;
+const DRAG = 4;
+const SETTLE = 250;
+const now = () => globalThis.performance?.now() ?? Date.now();
+const easeOut = (t) => 1 - (1 - t) ** 3;
+export class DragTurn {
+    constructor(turn, redraw) {
+        this.turn = turn;
+        this.redraw = redraw;
+        this.dragged = false;
+        this.click = (event) => {
+            if (this.dragged) {
+                this.dragged = false;
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+    }
+    get moving() {
+        return this.held?.moved === true;
+    }
+    down(event) {
+        this.dragged = false;
+        this.held =
+            event.button === 0
+                ? { id: event.pointerId, moved: false, x: event.clientX, y: event.clientY }
+                : undefined;
+    }
+    move(event) {
+        const held = this.held;
+        if (!held || held.id !== event.pointerId) {
+            return false;
+        }
+        const dx = event.clientX - held.x;
+        const dy = event.clientY - held.y;
+        if (!held.moved && Math.hypot(dx, dy) < DRAG) {
+            return false;
+        }
+        if (!held.moved) {
+            held.moved = true;
+            try {
+                ;
+                event.currentTarget?.setPointerCapture?.(event.pointerId);
+            }
+            catch {
+            }
+        }
+        held.x = event.clientX;
+        held.y = event.clientY;
+        this.turn((camera) => ({
+            tilt: Math.min(Math.max(camera.tilt + dy * TILT_PER_PIXEL, 15), 90),
+            turn: camera.turn - dx * TURN_PER_PIXEL,
+        }));
+        return true;
+    }
+    up(event) {
+        const held = this.held;
+        if (!held || held.id !== event.pointerId) {
+            return false;
+        }
+        this.held = undefined;
+        this.dragged = held.moved;
+        if (held.moved) {
+            this.redraw();
+        }
+        return held.moved;
+    }
+    frame(fits, middle) {
+        let shown = fits;
+        if (this.moving) {
+            this.settling = undefined;
+            const from = this.last ?? { frame: fits, middle };
+            this.kept ??= {
+                frame: from.frame,
+                middle: { x: from.middle.x - from.frame.x, y: from.middle.y - from.frame.y },
+            };
+            const { frame, middle: at } = this.kept;
+            shown = { height: frame.height, width: frame.width, x: middle.x - at.x, y: middle.y - at.y };
+        }
+        else if (this.kept) {
+            this.kept = undefined;
+            const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+            this.settling = still || !this.last ? undefined : { from: this.last.frame, start: now() };
+        }
+        if (this.settling && !this.moving) {
+            const { from, start } = this.settling;
+            const t = (now() - start) / SETTLE;
+            if (t >= 1) {
+                this.settling = undefined;
+            }
+            else {
+                const k = easeOut(Math.max(0, t));
+                const toward = (a, b) => a + (b - a) * k;
+                shown = {
+                    height: toward(from.height, fits.height),
+                    width: toward(from.width, fits.width),
+                    x: toward(from.x, fits.x),
+                    y: toward(from.y, fits.y),
+                };
+                globalThis.requestAnimationFrame?.(() => this.redraw());
+            }
+        }
+        this.last = { frame: shown, middle };
+        return shown;
+    }
+}

package/dist/spatial-surface-chart/grid.d.ts

@@ -37,6 +37,9 @@ export interface SurfaceField {
     depths: number[];
     /** How many cells hold a reading. */
     readings: number;
+    /** The lowest and the highest reading, which every level is measured between. */
+    lowest: number;
+    highest: number;
 }
 /**
  * Reads the table: **the first numeric column is across, the second is in

package/dist/spatial-surface-chart/grid.js

@@ -33,6 +33,8 @@ export const surfaceOf = (rows, columns) => {
         },
         cells,
         depths,
+        highest: read.length > 0 ? Math.max(...read.map((one) => one.value)) : 0,
+        lowest: read.length > 0 ? Math.min(...read.map((one) => one.value)) : 0,
         readings: read.length,
     };
 };
@@ -40,7 +42,6 @@ export const levelOf = (field, cell) => {
     if (cell.value === undefined) {
         return undefined;
     }
-    const values = field.cells.flatMap((one) => (one.value === undefined ? [] : [one.value]));
-    const [low, high] = [Math.min(...values), Math.max(...values)];
+    const { highest: high, lowest: low } = field;
     return high === low ? 0.5 : (cell.value - low) / (high - low);
 };

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -15,11 +15,12 @@ declare const HelixHeadlessSpatialSurfaceChart_base: typeof HelixElement & (new
  *
  * **Helix draws the frame, and a renderer draws the surface in 3D.** Put a
  * box for the renderer inside the chart, and `connectSpatialSurfaceChart` from
- * `@fusion.dev/helix-plot` draws the surface in it with three.js, shaded from
- * low to high in the theme's colors. Until a renderer has drawn, and where
+ * `@fusion.dev/helix-plot`, given `threeSurfaceDriver` from
+ * `@fusion.dev/helix-plot/three`, draws the surface in it with three.js,
+ * shaded from low to high in the theme's colors. Until a renderer has drawn, and where
  * none is connected, the chart draws the surface in 3D itself, in SVG, from
- * the same place the renderer's camera starts: a still picture the server, a
- * print, and a page without WebGL all show, which Shift with an arrow turns.
+ * the same place the renderer's camera starts: a picture a print and a page
+ * without WebGL show too, which a drag or Shift with an arrow turns.
  *
  * **The table is the reading.** Every number is in it, and screen readers
  * read it. The `summary` part names the measures, the number of readings,
@@ -131,13 +132,15 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
     summaryLabel: string;
     /** Whether a renderer has drawn the surface, which hides the chart's own drawing. */
     private rendered;
-    /** Where the chart's own drawing is seen from, which Shift with an arrow turns. */
+    /** Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns. */
     private camera;
+    /** A drag across the chart's own drawing, which turns its view. */
+    private readonly drag;
     /** Each reading where the chart's own drawing put it, which the pointer finds. */
     private placed;
     /** Where the renderer draws the reading, which the tooltip points at. */
     private place;
-    /** The field last read, kept so a change of it can be told. */
+    /** The field last told, kept so a change of it can be told. */
     private last;
     /** The place the keys rested on last, so a change of it can be told. */
     private told;
@@ -149,6 +152,8 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
      * renderer reads it.
      */
     get field(): SurfaceField;
+    /** The field last read, and the rows it was read from. */
+    private memo;
     /** The place the keys or the pointer rest on, as its place in `field.cells`, or `-1`. */
     get active(): number;
     /** The number of places on the grid, which the keys walk. */
@@ -197,8 +202,14 @@ export declare class HelixHeadlessSpatialSurfaceChart extends HelixHeadlessSpati
      * faces are painted back to front.
      */
     private readonly onDrawingMove;
+    private readonly onDrawingDown;
+    /** A press the browser took back, such as for a scroll, which ends a drag as a release does. */
+    private readonly onDrawingCancel;
     private readonly onDrawingLeave;
-    /** A tap is a touch reader's hover: it shows the place nearest it until a tap lands elsewhere. */
+    /**
+     * A tap is a touch reader's hover, unless it was a drag, which turned the
+     * view: it shows the place nearest it until a tap lands elsewhere.
+     */
     private readonly onDrawingTap;
     protected render(): TemplateResult;
     /**

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.js

@@ -3,7 +3,7 @@ import { AriaForwardController, CHART_PLOT, customElement, drawTooltip, formatWo
 import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
-import { boxView, drawBox, inBox, nearestTo, SPATIAL_VIEW, shape, turned, } from '../../spatial-scatter-chart/view.js';
+import { boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, shape, turned, } from '../../spatial-scatter-chart/view.js';
 import { levelOf, surfaceOf } from '../grid.js';
 const LIGHT = (() => {
     const [x, y, z] = [-0.45, 1, 0.35];
@@ -25,8 +25,10 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         this.summaryLabel = '{count, plural, one {# reading} other {# readings}} of {y} over {x} and {z}, from {low} to {high}.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.drag = new DragTurn((next) => {
+            this.camera = next(this.camera);
+        }, () => this.requestUpdate());
         this.placed = [];
-        this.last = '';
         this.told = -1;
         this.aria = new AriaForwardController(this, {
             target: () => this.partNamed('plot'),
@@ -42,17 +44,29 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
             this.dispatchEvent(new HelixPlotTurnEvent(turn));
         };
         this.onDrawingMove = (event) => {
+            if (this.drag.move(event)) {
+                return;
+            }
             if (event.pointerType === 'touch') {
                 return;
             }
             this.requestActive(this.placeAt(event), event.pointerType === 'pen' ? 'pen' : 'mouse');
         };
+        this.onDrawingDown = (event) => {
+            this.drag.down(event);
+        };
+        this.onDrawingCancel = (event) => {
+            this.drag.up(event);
+        };
         this.onDrawingLeave = (event) => {
             if (event.pointerType !== 'touch') {
                 this.requestActive(-1, 'mouse');
             }
         };
         this.onDrawingTap = (event) => {
+            if (this.drag.up(event)) {
+                return;
+            }
             if (event.pointerType === 'touch') {
                 this.requestActive(this.placeAt(event, 24), 'touch');
             }
@@ -60,7 +74,11 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
     }
     static { this.words = 'helix-spatial-surface-chart'; }
     get field() {
-        return surfaceOf(this.sourceRows, this.plottedColumns);
+        const rows = this.sourceRows;
+        if (this.memo?.rows !== rows) {
+            this.memo = { field: surfaceOf(rows, this.plottedColumns), rows };
+        }
+        return this.memo.field;
     }
     get active() {
         return this.pointer.at;
@@ -98,7 +116,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
     }
     updated(changed) {
         super.updated(changed);
-        const field = JSON.stringify(this.field);
+        const field = this.field;
         if (field !== this.last) {
             this.last = field;
             this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'data' }));
@@ -174,7 +192,7 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         faces.sort((one, other) => one.depth - other.depth);
         const active = places.find((place) => place.index === at);
         const row = field.cells[at]?.row;
-        const { bounds } = view;
+        const bounds = this.drag.frame(view.bounds, view.on([0, 0, 0]));
         const short = (value) => Math.round(value * 1000) / 1000;
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
@@ -182,6 +200,9 @@ let HelixHeadlessSpatialSurfaceChart = class HelixHeadlessSpatialSurfaceChart ex
         preserveAspectRatio="xMidYMid meet"
         viewBox="${bounds.x} ${bounds.y} ${bounds.width} ${bounds.height}"
         xmlns="http://www.w3.org/2000/svg"
+        @click=${this.drag.click}
+        @pointercancel=${this.onDrawingCancel}
+        @pointerdown=${this.onDrawingDown}
         @pointerleave=${this.onDrawingLeave}
         @pointermove=${this.onDrawingMove}
         @pointerup=${this.onDrawingTap}