@fusion.dev/helix-headless 0.194.0 → 0.196.0

package/custom-elements.json

@@ -152198,6 +152198,52 @@
             }
           ],
           "description": "Every reading as a prism, filling down each column of `rows` and then\nacross, as the flat heatmap does, seen from `camera`.\n\n**Columns run down to the right and rows down to the left, from the\nisometric camera, so there the order of the readings is the order to paint\nthem in.** A prism can only cover the neighbors behind it, which are the one\nbefore it in its column and the one in the same row of the column before,\nand both come earlier in the table. Turned, the order comes from how near\nthe camera each prism stands, which is `order`.\n\n`footprint` is how much of its cell a prism covers along each edge, so `1`\nleaves no gap between neighbors."
+        },
+        {
+          "kind": "function",
+          "name": "labelPlaces",
+          "return": {
+            "type": {
+              "text": "{ end: Point; start: Point }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "outline",
+              "type": {
+                "text": "readonly Point[]"
+              }
+            },
+            {
+              "name": "corners",
+              "type": {
+                "text": "{ end: Point; start: Point }"
+              }
+            },
+            {
+              "name": "sizes",
+              "type": {
+                "text": "{ end: LabelSize; start: LabelSize }"
+              }
+            },
+            {
+              "name": "span",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "gap",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "lowest",
+              "default": "Number.POSITIVE_INFINITY"
+            }
+          ],
+          "description": "Where the strip's first and last labels stand, as the top left of each,\non a page where the drawing's `outline` and its front edge's `corners`\nstand where given and the labels may run from 0 to `span` across.\n\n**Under its corner, and clear of the drawing.** A label runs away from the\nfront edge, so the edge does not fall across it, and stays inside the\nspan, which can move it under the edge; it then stands as far down as the\noutline reaches over it, and no lower than `lowest`, where a renderer's\ndrawing is cut. Where the two would meet, as when the strip is seen end on,\nthe last stands under the first, or beside it where there is no room below."
         }
       ],
       "exports": [
@@ -152248,6 +152294,14 @@
             "name": "reliefOf",
             "module": "src/spatial-heatmap/projection.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "labelPlaces",
+          "declaration": {
+            "name": "labelPlaces",
+            "module": "src/spatial-heatmap/projection.ts"
+          }
         }
       ]
     },
@@ -152257,33 +152311,21 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The same strip as `Heatmap`, seen from above at an angle. Each reading is a\nprism: its top face takes the cell's tone, and its height repeats the value,\nmeasured from zero against the highest reading in the table. `rows=\"7\"`\nmakes a contribution graph, with each week a column running down to the\nright.\n\n**The height says what the tone says.** Read the exact value from the tooltip\nor the table, and compare readings by tone. A tall reading at the front can\nhide a short one behind it, so the newest column stands at the front, where\nnothing covers it.\n\n**Everything else is `Heatmap`.** The table named by `for`, the tones and\nthresholds, the keys, the tooltip, the overview, `selection-mode`, and the\nevents all work as they do there. The class extends the headless heatmap,\nand its own entry point carries the drawing, so a page using only `Heatmap`\nloads none of it.\n\n**It was `helix-isometric-heatmap` until 0.190.0**, and\n`helix-headless-isometric-heatmap` in the headless tier. The old tags are\ngone, and so are the `--isometric-heatmap-*` hooks, which are\n`--spatial-heatmap-*`, and the words key, which is `helix-spatial-heatmap`.\nThe two shade hooks now take a step of lightness, such as `0.07`, where they\ntook a percentage mixed toward black. Every attribute, part, and event kept\nits name.\n\n**`flat` lays every prism down** at no height, which leaves the tones on a\nplane at the same angle.\n\n**The prisms stand on a slab**, the `base`, which reaches a little past the\ngrid, so the relief reads as one object. The `start` and `end` slots name\nthe two ends of the front edge, which is the strip's first and last column:\nthe component writes where those corners are on the `footer`, and a\nstylesheet stands each label at its corner. A renderer tells the chart where\nit draws those corners, so the labels stand at them there too, and follow\nthem as the view turns.\n\n**`gap` and `min-cell` set the smallest cell.** The drawing scales as a\nwhole, so a wider box draws larger cells and the gap grows with them. A box\ntoo narrow for every column at `min-cell` draws the newest that fit.\n\n**The drawing is SVG and holds still.** It scales with its box through its\n`viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow\nturns it a step, or tilts it, from the isometric view it starts at.\n**Under `selection-mode`, the prisms are painted back to front for the\nview, and the grid's rows and cells stand beside them in the table's\norder**, holding no drawing of their own, so a turned view paints\ncorrectly and a screen reader still reads the grid in order.\n\n**A renderer can draw it in 3D instead.** Put a box for it in the\n`renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`\ndraws the prisms in it with three.js, lit, in the same tones, in a view\nthat drags round and zooms. The chart publishes its readings in `field`,\nand its own drawing stays under the renderer's, unseen, where a screen\nreader and the keys still reach it. Shift with an arrow turns the view,\nexcept under `selection-mode=\"multiple\"`, where it selects.\n\n**Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a\ncolumn, drawn down to the left, and Right to the same reading in the next\ncolumn, drawn down to the right.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode=\"multiple\"`. |\n| Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under `selection-mode=\"multiple\"`. |\n| Escape | Puts the cell's tooltip away. |",
+          "description": "The same strip as `Heatmap`, seen from above at an angle. Each reading is a\nprism: its top face takes the cell's tone, and its height repeats the value,\nmeasured from zero against the highest reading in the table. `rows=\"7\"`\nmakes a contribution graph, with each week a column running down to the\nright.\n\n**The height says what the tone says.** Read the exact value from the tooltip\nor the table, and compare readings by tone. A tall reading at the front can\nhide a short one behind it, so the newest column stands at the front, where\nnothing covers it.\n\n**Everything else is `Heatmap`.** The table named by `for`, the tones and\nthresholds, the keys, the tooltip, the overview, `selection-mode`, and the\nevents all work as they do there. The class extends the headless heatmap,\nand its own entry point carries the drawing, so a page using only `Heatmap`\nloads none of it.\n\n**It was `helix-isometric-heatmap` until 0.190.0**, and\n`helix-headless-isometric-heatmap` in the headless tier. The old tags are\ngone, and so are the `--isometric-heatmap-*` hooks, which are\n`--spatial-heatmap-*`, and the words key, which is `helix-spatial-heatmap`.\nThe two shade hooks now take a step of lightness, such as `0.07`, where they\ntook a percentage mixed toward black. Every attribute, part, and event kept\nits name.\n\n**`flat` lays every prism down** at no height, which leaves the tones on a\nplane at the same angle.\n\n**The prisms stand on a slab**, the `base`, which reaches a little past the\ngrid, so the relief reads as one object. The `start` and `end` slots name\nthe two ends of the front edge, the long edge nearer the reader, which is\nthe strip's first and last column. The component measures where each label\nstands under its corner, clear of the drawing, and writes it on the label as\n`--spatial-heatmap-label-x` and `--spatial-heatmap-label-y`. A renderer\ntells the chart where it draws those corners, so the labels stand at them\nthere too, and follow them as the view turns.\n\n**`gap` and `min-cell` set the smallest cell.** The drawing scales as a\nwhole, so a wider box draws larger cells and the gap grows with them. A box\ntoo narrow for every column at `min-cell` draws the newest that fit.\n\n**The drawing is SVG and holds still.** It scales with its box through its\n`viewBox`, needs no WebGL, and has no motion to pause. A drag turns it and\ntilts it, and Shift with an arrow turns it a step, from the isometric view\nit starts at.\n**Under `selection-mode`, the prisms are painted back to front for the\nview, and the grid's rows and cells stand beside them in the table's\norder**, holding no drawing of their own, so a turned view paints\ncorrectly and a screen reader still reads the grid in order.\n\n**A renderer can draw it in 3D instead.** Put a box for it in the\n`renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`,\ngiven `threeHeatmapDriver` from `@fusion.dev/helix-plot/three`, draws the\nprisms in it with three.js, lit, in the same tones, in a view\nthat drags round and zooms. The chart publishes its readings in `field`,\nand its own drawing stays under the renderer's, unseen, where a screen\nreader and the keys still reach it. Shift with an arrow turns the view,\nexcept under `selection-mode=\"multiple\"`, where it selects.\n\n**Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a\ncolumn, drawn down to the left, and Right to the same reading in the next\ncolumn, drawn down to the right.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode=\"multiple\"`. |\n| Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under `selection-mode=\"multiple\"`. |\n| Escape | Puts the cell's tooltip away. |",
           "name": "HelixHeadlessSpatialHeatmap",
           "cssProperties": [
             {
-              "description": "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.",
-              "name": "--spatial-heatmap-depth"
-            },
-            {
-              "description": "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.",
-              "name": "--spatial-heatmap-end-x"
+              "description": "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.",
+              "name": "--spatial-heatmap-label-x"
             },
             {
-              "description": "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.",
-              "name": "--spatial-heatmap-end-y"
+              "description": "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.",
+              "name": "--spatial-heatmap-label-y"
             },
             {
               "description": "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.",
               "name": "--spatial-heatmap-span"
             },
-            {
-              "description": "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.",
-              "name": "--spatial-heatmap-start-x"
-            },
-            {
-              "description": "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.",
-              "name": "--spatial-heatmap-start-y"
-            },
             {
               "description": "How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.",
               "name": "--heatmap-rows",
@@ -152809,7 +152851,68 @@
               },
               "privacy": "private",
               "default": "ISOMETRIC",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns."
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns."
+            },
+            {
+              "kind": "field",
+              "name": "labelSizes",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "What places the first and last labels again when one of them, or the footer, changes size."
+            },
+            {
+              "kind": "method",
+              "name": "observeLabels",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Places the labels again whenever one of them or the footer changes size,\nas a webfont arriving after the first measure changes a label's width,\nand with it how far down the front edge reaches over it. Once the footer\nis rendered, and guarded because Lit SSR provides no `ResizeObserver`."
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view."
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingMove",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingUp",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onStripUp",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A tap shows the prism under it, unless the touch was a drag, which turned the view."
+            },
+            {
+              "kind": "field",
+              "name": "onPrismOver",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A pointer passing over a prism shows it, unless it is turning the view."
             },
             {
               "kind": "field",
@@ -152834,7 +152937,7 @@
               "kind": "field",
               "name": "corners",
               "type": {
-                "text": "{ end: { x: number; y: number }; start: { x: number; y: number } } | undefined"
+                "text": "DrawnCorners | undefined"
               },
               "privacy": "private",
               "description": "Where the renderer draws the two ends of the front edge, which the first and last labels stand at."
@@ -152947,13 +153050,13 @@
                 {
                   "name": "at",
                   "type": {
-                    "text": "{ end: { x: number; y: number }; start: { x: number; y: number } } | undefined"
+                    "text": "DrawnCorners | undefined"
                   }
                 }
               ],
               "description": "Says where the renderer draws the two ends of the front edge, under the\nfirst column and the last, as fractions of the strip from its top left,\nor `undefined` while they are out of view, where the labels keep the\nlast place they had. The `start` and `end` labels stand there. Called by\nthe connector.",
               "type": {
-                "text": "placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void"
+                "text": "placeCorners(at: DrawnCorners | undefined) => void"
               }
             },
             {
@@ -153052,22 +153155,14 @@
             },
             {
               "kind": "method",
-              "name": "cornersStyle",
+              "name": "placeLabels",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "string | typeof nothing"
+                  "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "relief",
-                  "type": {
-                    "text": "Relief"
-                  }
-                }
-              ],
-              "description": "Where the front edge's two ends stand, for the labels that name them.\n**As shares of the drawing's width**, the one length a percentage margin\nis measured against, so a sheet places a label with no height to read."
+              "description": "Stands the first and last labels under their ends of the front edge,\nclear of the drawing, as the page lays them out: on each label,\n`--spatial-heatmap-label-x` from the footer's inline start and\n`--spatial-heatmap-label-y` from its top, and `data-placed` once it has\na place. **Measured**, because a label is the page's type and the\ndrawing scales with its box, so neither size is known before layout."
             },
             {
               "kind": "method",
@@ -155180,7 +155275,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A 3D scatter chart shows how three measures relate. The table's first\nthree numeric columns are measured across, up, and in depth, and each row\nis one point. `group-by` names a column of text, such as a team or a\ncluster, and each group is drawn in its own color.\n\n**Helix draws the frame, and a renderer draws the points in 3D.** Put a\nbox for the renderer inside the chart, and `connectSpatialScatterChart` from\n`@fusion.dev/helix-plot` draws the points in it with three.js and keeps it\nin step with the chart. Until a renderer has drawn, and where none is\nconnected, the chart draws the points in 3D itself, in SVG, from the same\nplace the renderer's camera starts: a still picture the server, a print,\nand a page without WebGL all show, which Shift with an arrow turns.\n\n**The table is the reading.** Every number is in it, and screen readers\nread it. The `summary` part names the three measures and the number of\npoints, and describes the plot.\n\n**The plot is read by key.** It takes focus, named by `label` or the\ncaption. The left and right arrows move from point to point in the table's\norder, Home and End go to the first and the last, and the up and down\narrows move among the measures the readout says first. The `live` part\nsays the point's row in words, and the renderer marks it. Shift with an\narrow turns the view, and Escape lets the point go.\n\n**A reading shows its row in a tooltip**, as on every chart: the point a\nmouse or a pen rests on in the drawing, the point tapped, or the one the\nkeys move to, once a renderer has drawn.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, by pointer or key, and `helix-reading-press`\na point clicked, tapped, or pressed with Enter or Space, each with the row\nof the table in `index`.\n\n**Keyboard.** The plot is one tab stop once it has points.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot. |\n| Right, Left | Moves to the next or the previous point, in the table's order. |\n| Up, Down | Moves among the point's measures, which the readout says first. |\n| Home, End | Moves to the first or the last point. |\n| Shift with an arrow | Turns the view across, or tilts it up and down. |\n| Enter, Space | Presses the point, which sends `helix-reading-press`. |\n| Escape | Lets the point go. |",
+          "description": "A 3D scatter chart shows how three measures relate. The table's first\nthree numeric columns are measured across, up, and in depth, and each row\nis one point. `group-by` names a column of text, such as a team or a\ncluster, and each group is drawn in its own color.\n\n**Helix draws the frame, and a renderer draws the points in 3D.** Put a\nbox for the renderer inside the chart, and `connectSpatialScatterChart` from\n`@fusion.dev/helix-plot`, given `threeScatterDriver` from\n`@fusion.dev/helix-plot/three`, draws the points in it with three.js and\nkeeps it in step with the chart. Until a renderer has drawn, and where none is\nconnected, the chart draws the points in 3D itself, in SVG, from the same\nplace the renderer's camera starts: a picture a print and a page without\nWebGL show too, which a drag or Shift with an arrow turns.\n\n**The table is the reading.** Every number is in it, and screen readers\nread it. The `summary` part names the three measures and the number of\npoints, and describes the plot.\n\n**The plot is read by key.** It takes focus, named by `label` or the\ncaption. The left and right arrows move from point to point in the table's\norder, Home and End go to the first and the last, and the up and down\narrows move among the measures the readout says first. The `live` part\nsays the point's row in words, and the renderer marks it. Shift with an\narrow turns the view, and Escape lets the point go.\n\n**A reading shows its row in a tooltip**, as on every chart: the point a\nmouse or a pen rests on in the drawing, the point tapped, or the one the\nkeys move to, once a renderer has drawn.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, by pointer or key, and `helix-reading-press`\na point clicked, tapped, or pressed with Enter or Space, each with the row\nof the table in `index`.\n\n**Keyboard.** The plot is one tab stop once it has points.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot. |\n| Right, Left | Moves to the next or the previous point, in the table's order. |\n| Up, Down | Moves among the point's measures, which the readout says first. |\n| Home, End | Moves to the first or the last point. |\n| Shift with an arrow | Turns the view across, or tilts it up and down. |\n| Enter, Space | Presses the point, which sends `helix-reading-press`. |\n| Escape | Lets the point go. |",
           "name": "HelixHeadlessSpatialScatterChart",
           "cssParts": [
             {
@@ -155391,7 +155486,15 @@
               },
               "privacy": "private",
               "default": "SPATIAL_VIEW",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns."
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns."
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view."
             },
             {
               "kind": "field",
@@ -155449,6 +155552,15 @@
               "description": "The table read as points, axes, and groups. **The first three numeric\ncolumns are across, up, and in depth**, and a row lacking any of them is\nleft out. A renderer reads it.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "memo",
+              "type": {
+                "text": "{ field: PlotField; groupBy: string; rows: unknown } | undefined"
+              },
+              "privacy": "private",
+              "description": "The field last read, and what it was read from."
+            },
             {
               "kind": "field",
               "name": "active",
@@ -155553,6 +155665,19 @@
               "readonly": true,
               "description": "A mouse or a pen over the chart's own drawing puts the reading on the point nearest it."
             },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingCancel",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A press the browser took back, such as for a scroll, which ends a drag as a release does."
+            },
             {
               "kind": "field",
               "name": "onDrawingLeave",
@@ -155564,7 +155689,7 @@
               "name": "onDrawingTap",
               "privacy": "private",
               "readonly": true,
-              "description": "A tap is a touch reader's hover: it shows the point nearest it until a tap lands elsewhere."
+              "description": "A tap is a touch reader's hover, unless it was a drag, which turned the\nview: it shows the point nearest it until a tap lands elsewhere."
             },
             {
               "kind": "method",
@@ -156825,6 +156950,150 @@
             }
           ],
           "description": "The reading drawn nearest the pointer, within `reach` pixels of it, or\n`-1`. **Measured on the screen**, through the drawing's own transform, so\na small point is found from as far as a large one, at any size the\ndrawing is shown."
+        },
+        {
+          "kind": "class",
+          "description": "A drag across a spatial chart's own drawing, which turns its view as the\npointer moves: across turns it, and down tilts it. **A press that moves\nless than a few pixels is a press**, so a click still puts the reading on\na point, and the click that ends a drag is the drag's: `dragged` says so,\nfor the chart to keep it from pressing anything.\n\n**The drawing turns in place.** Through a drag, `frame` holds the drawing\nat the size it had when the drag began, with the middle of the data where\nit stood, as the renderer's camera turns round its target. The drawing\nmay reach past its edges as it turns, and nothing on the page moves. Once\nthe drag ends, it settles into the frame that fits it.\n\nA touch turns the view when it moves across, and the page's stylesheet\nleaves a touch moving up and down to scroll the page.",
+          "name": "DragTurn",
+          "members": [
+            {
+              "kind": "field",
+              "name": "held",
+              "type": {
+                "text": "{ id: number; moved: boolean; x: number; y: number } | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "last",
+              "type": {
+                "text": "{ frame: Frame; middle: PagePoint } | undefined"
+              },
+              "privacy": "private",
+              "description": "The frame and the middle of the data, as the last render drew them."
+            },
+            {
+              "kind": "field",
+              "name": "kept",
+              "type": {
+                "text": "{ frame: Frame; middle: PagePoint } | undefined"
+              },
+              "privacy": "private",
+              "description": "The frame held through a drag, and where the middle of the data stands in it."
+            },
+            {
+              "kind": "field",
+              "name": "settling",
+              "type": {
+                "text": "{ from: Frame; start: number } | undefined"
+              },
+              "privacy": "private",
+              "description": "The frame a drag ended on, and when it ended, while the drawing settles."
+            },
+            {
+              "kind": "field",
+              "name": "dragged",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the press that ended last was a drag."
+            },
+            {
+              "kind": "field",
+              "name": "moving",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether a drag is moving the view now.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "down",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "move",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ],
+              "description": "Turns the view for a drag, and says whether the event was one."
+            },
+            {
+              "kind": "method",
+              "name": "up",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ],
+              "description": "Ends a press, and says whether it was a drag."
+            },
+            {
+              "kind": "method",
+              "name": "frame",
+              "return": {
+                "type": {
+                  "text": "Frame"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "fits",
+                  "type": {
+                    "text": "Frame"
+                  }
+                },
+                {
+                  "name": "middle",
+                  "type": {
+                    "text": "PagePoint"
+                  }
+                }
+              ],
+              "description": "The frame to draw in, given the one that fits the drawing now and where\nthe middle of the data stands on the page. Called on every render."
+            },
+            {
+              "kind": "field",
+              "name": "click",
+              "readonly": true,
+              "description": "Keeps the click that ends a drag from pressing a reading."
+            }
+          ],
+          "helix": {}
         }
       ],
       "exports": [
@@ -156923,6 +157192,14 @@
             "name": "nearestTo",
             "module": "src/spatial-scatter-chart/view.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "DragTurn",
+          "declaration": {
+            "name": "DragTurn",
+            "module": "src/spatial-scatter-chart/view.ts"
+          }
         }
       ]
     },
@@ -157051,7 +157328,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A 3D surface chart shows how one measure varies over two others, such as\nload by hour and by day. Each row of the table is one reading: **the\nfirst numeric column is across, the second is in depth, and the third is\nthe height.** The readings make a grid from every distinct place across\nand in depth, and a place with no reading is left open.\n\n**Helix draws the frame, and a renderer draws the surface in 3D.** Put a\nbox for the renderer inside the chart, and `connectSpatialSurfaceChart` from\n`@fusion.dev/helix-plot` draws the surface in it with three.js, shaded from\nlow to high in the theme's colors. Until a renderer has drawn, and where\nnone is connected, the chart draws the surface in 3D itself, in SVG, from\nthe same place the renderer's camera starts: a still picture the server, a\nprint, and a page without WebGL all show, which Shift with an arrow turns.\n\n**The table is the reading.** Every number is in it, and screen readers\nread it. The `summary` part names the measures, the number of readings,\nand the range of heights, and describes the plot.\n\n**The plot is read by key, across and in depth.** It takes focus, named by\n`label` or the caption. The left and right arrows move across, the down\nand up arrows move in depth, forward and back, and Home and End go to the\nfirst and the last place. The `live` part says the reading at the place in\nwords, and the renderer marks it. Shift with an arrow turns the view, and\nEscape lets the place go.\n\n**A reading shows its row in a tooltip**, as on every chart: the place a\nmouse or a pen rests on in the drawing, the place tapped, or the one the\nkeys move to, once a renderer has drawn. A place with no reading shows\nnone.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, and `helix-reading-press` a place clicked or\npressed with Enter or Space, each with the row of the table in `index`, or\n`-1` for a place with no reading.\n\n**Keyboard.** The plot is one tab stop once it has readings.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot. |\n| Right, Left | Moves across to the next or the previous place. |\n| Down, Up | Moves in depth to the next or the previous place. |\n| Home, End | Moves to the first or the last place. |\n| Shift with an arrow | Turns the view across, or tilts it up and down. |\n| Enter, Space | Presses the place, which sends `helix-reading-press`. |\n| Escape | Lets the place go. |",
+          "description": "A 3D surface chart shows how one measure varies over two others, such as\nload by hour and by day. Each row of the table is one reading: **the\nfirst numeric column is across, the second is in depth, and the third is\nthe height.** The readings make a grid from every distinct place across\nand in depth, and a place with no reading is left open.\n\n**Helix draws the frame, and a renderer draws the surface in 3D.** Put a\nbox for the renderer inside the chart, and `connectSpatialSurfaceChart` from\n`@fusion.dev/helix-plot`, given `threeSurfaceDriver` from\n`@fusion.dev/helix-plot/three`, draws the surface in it with three.js,\nshaded from low to high in the theme's colors. Until a renderer has drawn, and where\nnone is connected, the chart draws the surface in 3D itself, in SVG, from\nthe same place the renderer's camera starts: a picture a print and a page\nwithout WebGL show too, which a drag or Shift with an arrow turns.\n\n**The table is the reading.** Every number is in it, and screen readers\nread it. The `summary` part names the measures, the number of readings,\nand the range of heights, and describes the plot.\n\n**The plot is read by key, across and in depth.** It takes focus, named by\n`label` or the caption. The left and right arrows move across, the down\nand up arrows move in depth, forward and back, and Home and End go to the\nfirst and the last place. The `live` part says the reading at the place in\nwords, and the renderer marks it. Shift with an arrow turns the view, and\nEscape lets the place go.\n\n**A reading shows its row in a tooltip**, as on every chart: the place a\nmouse or a pen rests on in the drawing, the place tapped, or the one the\nkeys move to, once a renderer has drawn. A place with no reading shows\nnone.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, and `helix-reading-press` a place clicked or\npressed with Enter or Space, each with the row of the table in `index`, or\n`-1` for a place with no reading.\n\n**Keyboard.** The plot is one tab stop once it has readings.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot. |\n| Right, Left | Moves across to the next or the previous place. |\n| Down, Up | Moves in depth to the next or the previous place. |\n| Home, End | Moves to the first or the last place. |\n| Shift with an arrow | Turns the view across, or tilts it up and down. |\n| Enter, Space | Presses the place, which sends `helix-reading-press`. |\n| Escape | Lets the place go. |",
           "name": "HelixHeadlessSpatialSurfaceChart",
           "cssProperties": [
             {
@@ -157271,7 +157548,15 @@
               },
               "privacy": "private",
               "default": "SPATIAL_VIEW",
-              "description": "Where the chart's own drawing is seen from, which Shift with an arrow turns."
+              "description": "Where the chart's own drawing is seen from, which a drag or Shift with an arrow turns."
+            },
+            {
+              "kind": "field",
+              "name": "drag",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new DragTurn( (next) => { this.camera = next(this.camera) }, () => this.requestUpdate(), )",
+              "description": "A drag across the chart's own drawing, which turns its view."
             },
             {
               "kind": "field",
@@ -157296,11 +157581,10 @@
               "kind": "field",
               "name": "last",
               "type": {
-                "text": "string"
+                "text": "SurfaceField | undefined"
               },
               "privacy": "private",
-              "default": "''",
-              "description": "The field last read, kept so a change of it can be told."
+              "description": "The field last told, kept so a change of it can be told."
             },
             {
               "kind": "field",
@@ -157329,6 +157613,15 @@
               "description": "The table read as a grid of heights. **The first numeric column is\nacross, the second is in depth, and the third is the height.** A\nrenderer reads it.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "memo",
+              "type": {
+                "text": "{ field: SurfaceField; rows: unknown } | undefined"
+              },
+              "privacy": "private",
+              "description": "The field last read, and the rows it was read from."
+            },
             {
               "kind": "field",
               "name": "active",
@@ -157459,6 +157752,19 @@
               "readonly": true,
               "description": "A mouse or a pen over the chart's own drawing puts the reading on the\nplace nearest it: over a face, the face's nearest corner on the screen,\nso any point of the surface finds a reading, and otherwise a place\nwithin reach. The face under the pointer is the one in front, since the\nfaces are painted back to front."
             },
+            {
+              "kind": "field",
+              "name": "onDrawingDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "onDrawingCancel",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A press the browser took back, such as for a scroll, which ends a drag as a release does."
+            },
             {
               "kind": "field",
               "name": "onDrawingLeave",
@@ -157470,7 +157776,7 @@
               "name": "onDrawingTap",
               "privacy": "private",
               "readonly": true,
-              "description": "A tap is a touch reader's hover: it shows the place nearest it until a tap lands elsewhere."
+              "description": "A tap is a touch reader's hover, unless it was a drag, which turned the\nview: it shows the place nearest it until a tap lands elsewhere."
             },
             {
               "kind": "method",
@@ -209056,6 +209362,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.194.0"
+    "version": "0.196.0"
   }
 }

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

@@ -57,14 +57,19 @@ export interface Relief {
         y: number;
     };
     /**
-     * The two ends of the front edge, at the foot of the slab: `start` at the
-     * left corner, under the first column, and `end` at the bottom corner,
-     * under the last. The strip's first and last labels stand there.
+     * The two ends of the front edge, the long edge at the foot of the slab
+     * nearer the reader: `start` under the first column, and `end` under the
+     * last. From the isometric camera they are the left corner and the bottom
+     * one. The strip's first and last labels stand there.
      */
     corners: {
         end: Point;
         start: Point;
     } | undefined;
+    /** The middle of the grid, halfway up the tallest prism, which a drag turns the view round. */
+    middle: Point;
+    /** The corners of the box the slab and the tallest prism fill, which every face stands inside. */
+    outline: Point[];
     /**
      * The prisms' places in `prisms`, back to front, the order to paint them
      * in. From the isometric camera it is the order of the readings.
@@ -104,3 +109,30 @@ export declare const highestOf: (values: readonly (number | undefined)[]) => num
  * leaves no gap between neighbors.
  */
 export declare const reliefOf: (heights: readonly number[], rows: number, footprint: number, camera?: Camera) => Relief;
+/** A label's size on the page. */
+export interface LabelSize {
+    height: number;
+    width: number;
+}
+/**
+ * Where the strip's first and last labels stand, as the top left of each,
+ * on a page where the drawing's `outline` and its front edge's `corners`
+ * stand where given and the labels may run from 0 to `span` across.
+ *
+ * **Under its corner, and clear of the drawing.** A label runs away from the
+ * front edge, so the edge does not fall across it, and stays inside the
+ * span, which can move it under the edge; it then stands as far down as the
+ * outline reaches over it, and no lower than `lowest`, where a renderer's
+ * drawing is cut. Where the two would meet, as when the strip is seen end on,
+ * the last stands under the first, or beside it where there is no room below.
+ */
+export declare const labelPlaces: (outline: readonly Point[], corners: {
+    end: Point;
+    start: Point;
+}, sizes: {
+    end: LabelSize;
+    start: LabelSize;
+}, span: number, gap: number, lowest?: number) => {
+    end: Point;
+    start: Point;
+};