@fusion.dev/helix-headless 0.190.0 → 0.192.0

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

@@ -1,11 +1,12 @@
 import { __decorate } from "tslib";
-import { CHART_PLOT, commaList, customElement, drawTooltip, HelixPlotChangeEvent, HelixPlotTurnEvent, isRtl, MIRROR_RULE, spokenReading, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { CHART_PLOT, commaList, customElement, drawTooltip, HelixPlotChangeEvent, HelixPlotTurnEvent, ISOMETRIC, isRtl, MIRROR_RULE, spokenReading, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { html, nothing, svg, } from 'lit';
 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 { ACROSS, heightsOf, highestOf, reliefOf } from '../projection.js';
+import { turned } from '../../spatial-scatter-chart/view.js';
+import { ACROSS, heightsOf, highestOf, reliefOf, } from '../projection.js';
 const TURNS = {
     ArrowDown: { across: 0, up: -1 },
     ArrowLeft: { across: -1, up: 0 },
@@ -18,12 +19,12 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         this.flat = false;
         this.relief = 2;
         this.shown = undefined;
+        this.camera = ISOMETRIC;
         this.rendered = false;
         this.told = { at: -1, field: '' };
         this.onTurnKeydown = (event) => {
             const turn = TURNS[event.key];
-            if (!this.rendered ||
-                !event.shiftKey ||
+            if (!event.shiftKey ||
                 !turn ||
                 this.selectionMode === 'multiple' ||
                 event.altKey ||
@@ -34,7 +35,12 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
             }
             event.preventDefault();
             event.stopPropagation();
-            this.dispatchEvent(new HelixPlotTurnEvent(turn));
+            if (this.rendered) {
+                this.dispatchEvent(new HelixPlotTurnEvent(turn));
+            }
+            else {
+                this.camera = turned(this.camera, turn.across, turn.up);
+            }
         };
     }
     static { this.words = 'helix-spatial-heatmap'; }
@@ -111,7 +117,7 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         const tallest = this.flat ? 0 : Math.max(0, this.relief || 0);
         const highest = highestOf(this.points.map((point) => point.value));
         const heights = heightsOf(this.drawn.map((point) => point.value), highest, tallest);
-        return reliefOf(heights, this.rowCount, this.cellPx / (this.cellPx + this.gapPx));
+        return reliefOf(heights, this.rowCount, this.cellPx / (this.cellPx + this.gapPx), this.camera);
     }
     render() {
         const bounds = writtenNumbers(this.thresholds);
@@ -124,7 +130,7 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
         const relief = this.drawnRelief();
         this.shown = relief;
         const at = this.pointer.at;
-        const prisms = relief.prisms.map((prism) => this.renderPrism(prism.index, prism.top, prism.left, prism.right, at === prism.index, chosen.has(keys[prism.index] ?? ''), grid, toneOf(cells[prism.index] ?? { value: undefined }, bounds, palette)));
+        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)));
         const { box } = relief;
         const drawing = readable
             ? html `<svg
@@ -135,7 +141,7 @@ 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"
-        >${relief.base ? this.renderBase(relief.base) : nothing}${grid ? this.renderPrismRows(prisms) : prisms}</svg>`
+        >${relief.base ? this.renderBase(relief.base) : nothing}${prisms}${grid ? this.renderGridRows(cells.length, keys, chosen) : nothing}</svg>`
             : nothing;
         return html `<div
         aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
@@ -162,19 +168,14 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
             ? html `<span part="selection" role="status">${this.status.said}</span>`
             : nothing}${this.renderTable()}`;
     }
-    renderPrism(index, top, left, right, active, picked, grid, tone) {
-        const row = grid ? this.sourceRows[this.points.length - this.drawn.length + index] : undefined;
-        const name = row ? spokenReading(row) : '';
+    renderPrism(prism, active, picked, grid, tone) {
         return svg `<g
-      aria-label=${grid && name ? name : nothing}
-      aria-selected=${grid ? (picked ? 'true' : 'false') : nothing}
-      data-index=${index}
+      aria-hidden=${grid ? 'true' : nothing}
+      data-index=${prism.index}
       data-tone=${tone ?? nothing}
-      id=${grid ? `cell-${index}` : nothing}
       part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
-      role=${grid ? 'gridcell' : nothing}
       style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
-    ><path d=${left} part="left-face"></path><path d=${right} part="right-face"></path><path d=${top} part="top-face"></path></g>`;
+    >${prism.left ? svg `<path d=${prism.left} part="left-face"></path>` : nothing}${prism.right ? svg `<path d=${prism.right} part="right-face"></path>` : nothing}<path d=${prism.top} part="top-face"></path></g>`;
     }
     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>`;
@@ -202,11 +203,18 @@ let HelixHeadlessSpatialHeatmap = class HelixHeadlessSpatialHeatmap extends Heli
             `--spatial-heatmap-start-y: ${share(start.y)}`,
         ].join('; ');
     }
-    renderPrismRows(prisms) {
-        const size = this.rowCount === 1 ? prisms.length : this.rowCount;
+    renderGridRows(count, keys, chosen) {
+        const size = this.rowCount === 1 ? count : this.rowCount;
+        const first = this.points.length - this.drawn.length;
         const rows = [];
-        for (let start = 0; start < prisms.length; start += size) {
-            rows.push(svg `<g part="row" role="row">${prisms.slice(start, start + size)}</g>`);
+        for (let start = 0; start < count; start += size) {
+            const cells = [];
+            for (let index = start; index < Math.min(start + size, count); index++) {
+                const row = this.sourceRows[first + index];
+                const name = row ? spokenReading(row) : '';
+                cells.push(svg `<g aria-label=${name || nothing} aria-selected=${chosen.has(keys[index] ?? '') ? 'true' : 'false'} id=${`cell-${index}`} role="gridcell"></g>`);
+            }
+            rows.push(svg `<g part="row" role="row">${cells}</g>`);
         }
         return rows;
     }
@@ -237,6 +245,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessSpatialHeatmap.prototype, "relief", void 0);
+__decorate([
+    state()
+], HelixHeadlessSpatialHeatmap.prototype, "camera", void 0);
 __decorate([
     state()
 ], HelixHeadlessSpatialHeatmap.prototype, "rendered", void 0);

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

@@ -52,7 +52,7 @@ declare const HelixHeadlessSpatialScatterChart_base: typeof HelixElement & (new
  * | Enter, Space | Presses the point, which sends `helix-reading-press`. |
  * | Escape | Lets the point go. |
  *
- * @since 0.189.0
+ * @since 0.190.0
  * @status experimental
  * @category charts
  * @aliases 3D scatter chart, 3D scatter plot, Point cloud, Three-dimensional scatter

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

@@ -54,7 +54,7 @@ declare const HelixHeadlessSpatialSurfaceChart_base: typeof HelixElement & (new
  * | Enter, Space | Presses the place, which sends `helix-reading-press`. |
  * | Escape | Lets the place go. |
  *
- * @since 0.189.0
+ * @since 0.190.0
  * @status experimental
  * @category charts
  * @aliases 3D surface chart, 3D surface plot, Surface chart, Height map, Terrain chart