@fusion.dev/helix-headless 0.193.0 → 0.195.0

package/dist/spatial-heatmap/projection.js

@@ -1,4 +1,4 @@
-import { depthOrder, ISOMETRIC, pathData, projectionOf, solid, } from '@fusion.dev/helix-core';
+import { depthOrder, hullOf, ISOMETRIC, pathData, projectionOf, solid, } from '@fusion.dev/helix-core';
 export const ACROSS = Math.sqrt(3) / 2;
 export const MARGIN = 0.3;
 export const THICKNESS = 0.25;
@@ -76,7 +76,9 @@ export const reliefOf = (heights, rows, footprint, camera = ISOMETRIC) => {
             base: undefined,
             box: { height: 0, width: 0, x: 0, y: 0 },
             corners: undefined,
+            middle: { x: 0, y: 0 },
             order: [],
+            outline: [],
             prisms,
         };
     }
@@ -89,14 +91,67 @@ export const reliefOf = (heights, rows, footprint, camera = ISOMETRIC) => {
     const xs = points.map((point) => point.x);
     const ys = points.map((point) => point.y);
     const [left, top] = [Math.min(...xs), Math.min(...ys)];
+    const tallest = Math.max(0, ...heights);
+    const [lastRow, firstRow] = [-(deep + MARGIN), MARGIN];
+    const front = projection.depth(columns / 2, lastRow) >= projection.depth(columns / 2, firstRow)
+        ? lastRow
+        : firstRow;
+    const outline = [];
+    for (const x of [-MARGIN, columns + MARGIN]) {
+        for (const y of [lastRow, firstRow]) {
+            outline.push(projection.at(x, y, -THICKNESS), projection.at(x, y, tallest));
+        }
+    }
     return {
         base,
         box: { height: Math.max(...ys) - top, width: Math.max(...xs) - left, x: left, y: top },
         corners: {
-            end: projection.at(columns + MARGIN, -(deep + MARGIN), -THICKNESS),
-            start: projection.at(-MARGIN, -(deep + MARGIN), -THICKNESS),
+            end: projection.at(columns + MARGIN, front, -THICKNESS),
+            start: projection.at(-MARGIN, front, -THICKNESS),
         },
+        middle: projection.at(columns / 2, -deep / 2, tallest / 2),
         order: depthOrder(projection, places).map((place) => place.index),
+        outline,
         prisms,
     };
 };
+const lowestOver = (hull, left, right) => {
+    let lowest = Number.NEGATIVE_INFINITY;
+    hull.forEach((from, index) => {
+        const to = hull[(index + 1) % hull.length];
+        const [a, b] = from.x <= to.x ? [from, to] : [to, from];
+        if (b.x < left || a.x > right) {
+            return;
+        }
+        const at = (x) => b.x === a.x ? Math.max(a.y, b.y) : a.y + ((x - a.x) / (b.x - a.x)) * (b.y - a.y);
+        lowest = Math.max(lowest, at(Math.max(a.x, left)), at(Math.min(b.x, right)));
+    });
+    return lowest;
+};
+export const labelPlaces = (outline, corners, sizes, span, gap, lowest = Number.POSITIVE_INFINITY) => {
+    const hull = hullOf(outline);
+    const across = (left, size) => Math.max(0, Math.min(left, span - size.width));
+    const place = (at, toward, size) => {
+        const away = Math.sign(toward.x - at.x);
+        const wanted = away > 0 ? at.x - size.width : away < 0 ? at.x : at.x - size.width / 2;
+        const left = across(wanted, size);
+        const top = Math.max(at.y, lowestOver(hull, left, left + size.width)) + gap;
+        return { x: left, y: Math.min(top, lowest) };
+    };
+    const start = place(corners.start, corners.end, sizes.start);
+    const end = place(corners.end, corners.start, sizes.end);
+    const meet = start.x < end.x + sizes.end.width &&
+        end.x < start.x + sizes.start.width &&
+        start.y < end.y + sizes.end.height &&
+        end.y < start.y + sizes.start.height;
+    if (!meet) {
+        return { end, start };
+    }
+    const under = start.y + sizes.start.height + gap / 2;
+    if (under <= lowest) {
+        return { end: { ...end, y: under }, start };
+    }
+    const right = corners.end.x >= corners.start.x;
+    const beside = right ? start.x + sizes.start.width + gap : start.x - sizes.end.width - gap;
+    return { end: { x: across(beside, sizes.end), y: start.y }, start };
+};

package/dist/spatial-heatmap/root/spatial-heatmap-root.d.ts

@@ -1,6 +1,13 @@
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
+import { type Point } from '../projection.js';
+/** Where a renderer draws the front edge's two ends, and the corners of the box round the relief. */
+type DrawnCorners = {
+    end: Point;
+    outline?: Point[];
+    start: Point;
+};
 /**
  * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
  *
@@ -35,27 +42,30 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  *
  * **The prisms stand on a slab**, the `base`, which reaches a little past the
  * grid, so the relief reads as one object. The `start` and `end` slots name
- * the two ends of the front edge, which is the strip's first and last column:
- * the component writes where those corners are on the `footer`, and a
- * stylesheet stands each label at its corner. A renderer tells the chart where
- * it draws those corners, so the labels stand at them there too, and follow
- * them as the view turns.
+ * the two ends of the front edge, the long edge nearer the reader, which is
+ * the strip's first and last column. The component measures where each label
+ * stands under its corner, clear of the drawing, and writes it on the label as
+ * `--spatial-heatmap-label-x` and `--spatial-heatmap-label-y`. A renderer
+ * tells the chart where it draws those corners, so the labels stand at them
+ * there too, and follow them as the view turns.
  *
  * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
  * whole, so a wider box draws larger cells and the gap grows with them. A box
  * too narrow for every column at `min-cell` draws the newest that fit.
  *
  * **The drawing is SVG and holds still.** It scales with its box through its
- * `viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow
- * turns it a step, or tilts it, from the isometric view it starts at.
+ * `viewBox`, needs no WebGL, and has no motion to pause. A drag turns it and
+ * tilts it, and Shift with an arrow turns it a step, from the isometric view
+ * it starts at.
  * **Under `selection-mode`, the prisms are painted back to front for the
  * view, and the grid's rows and cells stand beside them in the table's
  * order**, holding no drawing of their own, so a turned view paints
  * correctly and a screen reader still reads the grid in order.
  *
  * **A renderer can draw it in 3D instead.** Put a box for it in the
- * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`
- * draws the prisms in it with three.js, lit, in the same tones, in a view
+ * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`,
+ * given `threeHeatmapDriver` from `@fusion.dev/helix-plot/three`, draws the
+ * prisms in it with three.js, lit, in the same tones, in a view
  * that drags round and zooms. The chart publishes its readings in `field`,
  * and its own drawing stays under the renderer's, unseen, where a screen
  * reader and the keys still reach it. Shift with an arrow turns the view,
@@ -100,12 +110,9 @@ import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
  * @csspart strip - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
  * @csspart top-face - The top of a prism, which carries the reading's tone.
  *
- * @cssproperty --spatial-heatmap-depth - How tall the drawing is for its width. The component writes it on the footer, and a stylesheet that stands the `start` and `end` labels at their corners reads it.
- * @cssproperty --spatial-heatmap-end-x - Where the front edge ends, under the newest column, across the drawing, from 0 at its inline start to 1. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it.
- * @cssproperty --spatial-heatmap-end-y - How far down the drawing the front edge ends, under the newest column, as a share of the drawing's width: its whole depth in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it.
+ * @cssproperty --spatial-heatmap-label-x - Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
+ * @cssproperty --spatial-heatmap-label-y - Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
  * @cssproperty --spatial-heatmap-span - How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
- * @cssproperty --spatial-heatmap-start-x - Where the front edge starts, under the first column, across the drawing, from 0 at its inline start to 1: 0 in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it.
- * @cssproperty --spatial-heatmap-start-y - How far down the drawing the front edge starts, under the first column, as a share of the drawing's width. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it.
  *
  * @cssstate drawn - While a renderer has drawn the relief, and the chart's own drawing stays unseen under it.
  */
@@ -127,8 +134,28 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
     relief: number;
     /** The prisms drawn on the last render, which the tooltip is placed against. */
     private shown;
-    /** 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;
+    /** What places the first and last labels again when one of them, or the footer, changes size. */
+    private labelSizes;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Places the labels again whenever one of them or the footer changes size,
+     * as a webfont arriving after the first measure changes a label's width,
+     * and with it how far down the front edge reaches over it. Once the footer
+     * is rendered, and guarded because Lit SSR provides no `ResizeObserver`.
+     */
+    private observeLabels;
+    /** A drag across the chart's own drawing, which turns its view. */
+    private readonly drag;
+    private readonly onDrawingDown;
+    private readonly onDrawingMove;
+    private readonly onDrawingUp;
+    /** A tap shows the prism under it, unless the touch was a drag, which turned the view. */
+    private readonly onStripUp;
+    /** A pointer passing over a prism shows it, unless it is turning the view. */
+    private readonly onPrismOver;
     /** Whether a renderer has drawn the relief, which its own drawing then stays under. */
     private rendered;
     /** Where the renderer draws the reading, which the tooltip points at. */
@@ -182,16 +209,7 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
      * last place they had. The `start` and `end` labels stand there. Called by
      * the connector.
      */
-    placeCorners(at: {
-        end: {
-            x: number;
-            y: number;
-        };
-        start: {
-            x: number;
-            y: number;
-        };
-    } | undefined): void;
+    placeCorners(at: DrawnCorners | undefined): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Shift with an arrow turns the view, the chart's own drawing or a
@@ -223,11 +241,14 @@ export declare class HelixHeadlessSpatialHeatmap extends HelixHeadlessHeatmap {
      */
     private renderBase;
     /**
-     * Where the front edge's two ends stand, for the labels that name them.
-     * **As shares of the drawing's width**, the one length a percentage margin
-     * is measured against, so a sheet places a label with no height to read.
+     * Stands the first and last labels under their ends of the front edge,
+     * clear of the drawing, as the page lays them out: on each label,
+     * `--spatial-heatmap-label-x` from the footer's inline start and
+     * `--spatial-heatmap-label-y` from its top, and `data-placed` once it has
+     * a place. **Measured**, because a label is the page's type and the
+     * drawing scales with its box, so neither size is known before layout.
      */
-    private cornersStyle;
+    private placeLabels;
     /**
      * The grid's rows, one for each column of the strip, and its cells in the
      * table's order, each named by its row and saying whether it is selected,
@@ -246,3 +267,4 @@ declare global {
         'helix-headless-spatial-heatmap': HelixHeadlessSpatialHeatmap;
     }
 }
+export {};

package/dist/spatial-heatmap/root/spatial-heatmap-root.js

@@ -5,8 +5,9 @@ import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fits, toneOf } from '../../heatmap/root/buckets.js';
 import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
-import { turned } from '../../spatial-scatter-chart/view.js';
-import { ACROSS, heightsOf, highestOf, reliefOf, } from '../projection.js';
+import { DragTurn, turned } from '../../spatial-scatter-chart/view.js';
+import { ACROSS, heightsOf, highestOf, labelPlaces, reliefOf, } from '../projection.js';
+const LABEL_GAP = 4;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
     ArrowLeft: { across: -1, up: 0 },
@@ -20,6 +21,29 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         this.relief = 2;
         this.shown = undefined;
         this.camera = ISOMETRIC;
+        this.labelSizes = undefined;
+        this.drag = new DragTurn((next) => {
+            this.camera = next(this.camera);
+        }, () => this.requestUpdate());
+        this.onDrawingDown = (event) => {
+            this.drag.down(event);
+        };
+        this.onDrawingMove = (event) => {
+            this.drag.move(event);
+        };
+        this.onDrawingUp = (event) => {
+            this.drag.up(event);
+        };
+        this.onStripUp = (event) => {
+            if (!this.drag.dragged) {
+                this.onPointerUp(event);
+            }
+        };
+        this.onPrismOver = (event) => {
+            if (!this.drag.moving) {
+                this.onPointerOver(event);
+            }
+        };
         this.rendered = false;
         this.told = { at: -1, field: '' };
         this.onTurnKeydown = (event) => {
@@ -45,6 +69,25 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
     }
     static { this.words = 'helix-spatial-heatmap'; }
     static { this.markRules = [MIRROR_RULE]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.observeLabels();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.labelSizes?.disconnect();
+        this.labelSizes = undefined;
+    }
+    observeLabels() {
+        const boxes = ['footer', 'start', 'end'].map((name) => this.partNamed(name));
+        if (this.labelSizes || typeof ResizeObserver === 'undefined' || boxes.includes(null)) {
+            return;
+        }
+        this.labelSizes = new ResizeObserver(() => this.placeLabels());
+        for (const box of boxes) {
+            this.labelSizes.observe(box);
+        }
+    }
     get field() {
         const cells = this.drawn;
         const rows = this.rowCount;
@@ -90,6 +133,7 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
     }
     updated(changed) {
         super.updated(changed);
+        this.placeLabels();
         const field = JSON.stringify(this.field);
         if (field !== this.told.field) {
             this.told.field = field;
@@ -127,7 +171,8 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         const grid = readable && this.selectionMode !== undefined;
         const keys = this.selectionMode ? this.keysOf(cells) : [];
         const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
-        const relief = this.drawnRelief();
+        const fits = this.drawnRelief();
+        const relief = { ...fits, box: this.drag.frame(fits.box, fits.middle) };
         this.shown = relief;
         const at = this.pointer.at;
         const prisms = relief.order.map((index) => this.renderPrism(relief.prisms[index], at === index, chosen.has(keys[index] ?? ''), grid, toneOf(cells[index] ?? { value: undefined }, bounds, palette)));
@@ -141,6 +186,11 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
           style=${this.rendered ? 'opacity: 0; pointer-events: none' : nothing}
           viewBox="${box.x} ${box.y} ${box.width} ${box.height}"
           xmlns="http://www.w3.org/2000/svg"
+          @click=${this.drag.click}
+          @pointercancel=${this.onDrawingUp}
+          @pointerdown=${this.onDrawingDown}
+          @pointermove=${this.onDrawingMove}
+          @pointerup=${this.onDrawingUp}
         >${relief.base ? this.renderBase(relief.base) : nothing}${prisms}${grid ? this.renderGridRows(cells.length, keys, chosen) : nothing}</svg>`
             : nothing;
         return html `<div
@@ -155,12 +205,12 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         tabindex=${readable ? '0' : nothing}
         @click=${this.onClick}
         @keydown=${this.onTurnKeydown}
-        @pointerover=${this.rendered ? undefined : this.onPointerOver}
+        @pointerover=${this.rendered ? undefined : this.onPrismOver}
         @pointerleave=${this.onPointerLeave}
-        @pointerup=${this.rendered ? undefined : this.onPointerUp}
+        @pointerup=${this.rendered ? undefined : this.onStripUp}
       ><slot name="renderer"></slot>${drawing}${this.renderTooltip(grid)}</div>
       ${cells.length === 0 ? this.renderStatus() : nothing}
-      <div part="footer" style=${this.cornersStyle(relief)}>
+      <div part="footer">
         <span part="start"><slot name="start"></slot></span>
         <span part="summary"><slot name="summary"></slot></span>
         <span part="end"><slot name="end"></slot></span>
@@ -180,28 +230,57 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
     renderBase(base) {
         return svg `<g aria-hidden="true" part="base"><path d=${base.left} part="base-left"></path><path d=${base.right} part="base-right"></path><path d=${base.top} part="base-top"></path></g>`;
     }
-    cornersStyle(relief) {
-        const { box, corners } = relief;
-        if (!corners || box.width <= 0) {
-            return nothing;
+    placeLabels() {
+        const footer = this.partNamed('footer');
+        const [end, start] = [this.partNamed('end'), this.partNamed('start')];
+        const relief = this.shown;
+        if (!footer || !end || !start || !relief?.corners) {
+            return;
+        }
+        const labels = { end, start };
+        this.observeLabels();
+        const frame = footer.getBoundingClientRect();
+        if (frame.width <= 0) {
+            return;
+        }
+        let drawn = { ...relief.corners, outline: relief.outline };
+        let page;
+        let lowest = Number.POSITIVE_INFINITY;
+        if (this.rendered) {
+            const strip = this.partNamed('strip')?.getBoundingClientRect();
+            if (!this.corners?.outline || !strip) {
+                return;
+            }
+            drawn = this.corners;
+            lowest = strip.bottom - frame.top + LABEL_GAP;
+            page = (point) => ({
+                x: strip.left + point.x * strip.width - frame.left,
+                y: strip.top + point.y * strip.height - frame.top,
+            });
+        }
+        else {
+            const matrix = this.partNamed('drawing')?.getScreenCTM?.();
+            if (!matrix) {
+                return;
+            }
+            page = (point) => ({
+                x: matrix.a * point.x + matrix.c * point.y + matrix.e - frame.left,
+                y: matrix.b * point.x + matrix.d * point.y + matrix.f - frame.top,
+            });
+        }
+        const sizeOf = (label) => {
+            const { height, width } = label.getBoundingClientRect();
+            return { height, width };
+        };
+        const sizes = { end: sizeOf(labels.end), start: sizeOf(labels.start) };
+        const placed = labelPlaces((drawn.outline ?? []).map(page), { end: page(drawn.end), start: page(drawn.start) }, sizes, frame.width, LABEL_GAP, lowest);
+        for (const key of ['start', 'end']) {
+            const at = placed[key];
+            const inline = isRtl(this) ? frame.width - at.x - sizes[key].width : at.x;
+            labels[key].style.setProperty('--spatial-heatmap-label-x', `${Math.round(inline)}px`);
+            labels[key].style.setProperty('--spatial-heatmap-label-y', `${Math.round(at.y)}px`);
+            labels[key].toggleAttribute('data-placed', true);
         }
-        const share = (value) => Math.round(value * 10000) / 10000;
-        const depth = box.height / box.width;
-        const drawn = this.rendered ? this.corners : undefined;
-        const across = (x) => (isRtl(this) ? 1 - x : x);
-        const start = drawn
-            ? { x: across(drawn.start.x), y: drawn.start.y * depth }
-            : { x: 0, y: (corners.start.y - box.y) / box.width };
-        const end = drawn
-            ? { x: across(drawn.end.x), y: drawn.end.y * depth }
-            : { x: (corners.end.x - box.x) / box.width, y: depth };
-        return [
-            `--spatial-heatmap-depth: ${share(depth)}`,
-            `--spatial-heatmap-end-x: ${share(end.x)}`,
-            `--spatial-heatmap-end-y: ${share(end.y)}`,
-            `--spatial-heatmap-start-x: ${share(start.x)}`,
-            `--spatial-heatmap-start-y: ${share(start.y)}`,
-        ].join('; ');
     }
     renderGridRows(count, keys, chosen) {
         const size = this.rowCount === 1 ? count : this.rowCount;

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

@@ -14,11 +14,12 @@ declare const HelixHeadlessSpatialScatterChart_base: typeof HelixElement & (new
  *
  * **Helix draws the frame, and a renderer draws the points in 3D.** Put a
  * box for the renderer inside the chart, and `connectSpatialScatterChart` from
- * `@fusion.dev/helix-plot` draws the points in it with three.js and keeps it
- * in step with the chart. Until a renderer has drawn, and where none is
+ * `@fusion.dev/helix-plot`, given `threeScatterDriver` from
+ * `@fusion.dev/helix-plot/three`, draws the points in it with three.js and
+ * keeps it in step with the chart. Until a renderer has drawn, and where none is
  * connected, the chart draws the points 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.
+ * 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 three measures and the number of
@@ -121,8 +122,10 @@ export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpati
     summaryLabel: string;
     /** Whether a renderer has drawn the points, 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 point 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. */
@@ -139,6 +142,8 @@ export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpati
      * left out. A renderer reads it.
      */
     get field(): PlotField;
+    /** The field last read, and what it was read from. */
+    private memo;
     /** The point the keys or the pointer rest on, as its place in `field.points`, or `-1`. */
     get active(): number;
     /** The number of points, which the keys walk. */
@@ -173,8 +178,14 @@ export declare class HelixHeadlessSpatialScatterChart extends HelixHeadlessSpati
     private readonly onPlotKeydown;
     /** A mouse or a pen over the chart's own drawing puts the reading on the point nearest it. */
     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 point 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 point nearest it until a tap lands elsewhere.
+     */
     private readonly onDrawingTap;
     protected render(): TemplateResult;
     /**

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

@@ -4,7 +4,7 @@ import { html, nothing, svg } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
 import { fieldOf } from '../field.js';
-import { boxView, drawBox, inBox, nearestTo, SPATIAL_VIEW, turned, } from '../view.js';
+import { boxView, DragTurn, drawBox, inBox, nearestTo, SPATIAL_VIEW, turned, } from '../view.js';
 const SERIES = 24;
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
@@ -20,6 +20,9 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         this.summaryLabel = '{count, plural, one {# point} other {# points}}: {x} across, {y} up, and {z} in depth.';
         this.rendered = false;
         this.camera = SPATIAL_VIEW;
+        this.drag = new DragTurn((next) => {
+            this.camera = next(this.camera);
+        }, () => this.requestUpdate());
         this.placed = [];
         this.last = undefined;
         this.told = -1;
@@ -37,18 +40,30 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
             this.dispatchEvent(new HelixPlotTurnEvent(turn));
         };
         this.onDrawingMove = (event) => {
+            if (this.drag.move(event)) {
+                return;
+            }
             if (event.pointerType === 'touch') {
                 return;
             }
             const drawing = event.currentTarget;
             this.requestActive(nearestTo(drawing, event, this.placed), 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(nearestTo(event.currentTarget, event, this.placed, 24), 'touch');
             }
@@ -56,7 +71,15 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
     }
     static { this.words = 'helix-spatial-scatter-chart'; }
     get field() {
-        return fieldOf(this.sourceRows, this.plottedColumns, this.groupBy);
+        const rows = this.sourceRows;
+        if (this.memo?.rows !== rows || this.memo.groupBy !== this.groupBy) {
+            this.memo = {
+                field: fieldOf(rows, this.plottedColumns, this.groupBy),
+                groupBy: this.groupBy,
+                rows,
+            };
+        }
+        return this.memo.field;
     }
     get active() {
         return this.pointer.at;
@@ -95,7 +118,7 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
     updated(changed) {
         super.updated(changed);
         const field = this.field;
-        if (!this.last || JSON.stringify(field) !== JSON.stringify(this.last)) {
+        if (field !== this.last) {
             this.last = field;
             this.dispatchEvent(new HelixPlotChangeEvent({ kind: 'data' }));
         }
@@ -142,13 +165,16 @@ let HelixHeadlessSpatialScatterChart = class HelixHeadlessSpatialScatterChart ex
         this.placed = places;
         const painted = [...places].sort((one, other) => one.depth - other.depth);
         const active = places[at];
-        const { bounds } = view;
+        const bounds = this.drag.frame(view.bounds, view.on([0, 0, 0]));
         return html `<div aria-hidden="true" dir="ltr" ?hidden=${this.rendered} part="fallback">
       <svg
         part="drawing"
         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}

package/dist/spatial-scatter-chart/view.d.ts

@@ -91,3 +91,58 @@ export interface Placed {
  * drawing is shown.
  */
 export declare const nearestTo: (drawing: SVGSVGElement | null | undefined, event: PointerEvent, places: readonly Placed[], reach?: number) => number;
+/** The part of the page a drawing shows, as its `viewBox`: its left, top, width, and height. */
+export interface Frame {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+/**
+ * A drag across a spatial chart's own drawing, which turns its view as the
+ * pointer moves: across turns it, and down tilts it. **A press that moves
+ * less than a few pixels is a press**, so a click still puts the reading on
+ * a point, and the click that ends a drag is the drag's: `dragged` says so,
+ * for the chart to keep it from pressing anything.
+ *
+ * **The drawing turns in place.** Through a drag, `frame` holds the drawing
+ * at the size it had when the drag began, with the middle of the data where
+ * it stood, as the renderer's camera turns round its target. The drawing
+ * may reach past its edges as it turns, and nothing on the page moves. Once
+ * the drag ends, it settles into the frame that fits it.
+ *
+ * A touch turns the view when it moves across, and the page's stylesheet
+ * leaves a touch moving up and down to scroll the page.
+ */
+export declare class DragTurn {
+    private readonly turn;
+    private readonly redraw;
+    private held;
+    /** The frame and the middle of the data, as the last render drew them. */
+    private last;
+    /** The frame held through a drag, and where the middle of the data stands in it. */
+    private kept;
+    /** The frame a drag ended on, and when it ended, while the drawing settles. */
+    private settling;
+    /** Whether the press that ended last was a drag. */
+    dragged: boolean;
+    /**
+     * `turn` moves the view, and `redraw` asks for a render, which `frame`
+     * needs once a drag ends and on each step as the drawing settles.
+     */
+    constructor(turn: (next: (camera: Camera) => Camera) => void, redraw: () => void);
+    /** Whether a drag is moving the view now. */
+    get moving(): boolean;
+    down(event: PointerEvent): void;
+    /** Turns the view for a drag, and says whether the event was one. */
+    move(event: PointerEvent): boolean;
+    /** Ends a press, and says whether it was a drag. */
+    up(event: PointerEvent): boolean;
+    /**
+     * The frame to draw in, given the one that fits the drawing now and where
+     * the middle of the data stands on the page. Called on every render.
+     */
+    frame(fits: Frame, middle: PagePoint): Frame;
+    /** Keeps the click that ends a drag from pressing a reading. */
+    readonly click: (event: Event) => void;
+}