@fusion.dev/helix-plot 0.194.0 → 0.196.0

package/dist/connect-plot/connect-plot.d.ts

@@ -43,6 +43,16 @@ export interface Place {
     x: number;
     y: number;
 }
+/**
+ * Where a spatial heatmap's named corners are drawn: the two ends of its
+ * front edge, the long edge at the foot of the slab nearer the reader, and
+ * the corners of the box round the relief, which the labels stand clear of.
+ */
+export interface Corners {
+    end: Place;
+    outline?: Place[];
+    start: Place;
+}
 /**
  * What a renderer has to answer for a 3D chart to drive it, and nothing that
  * is the same for every renderer: that is the connector's.
@@ -66,14 +76,12 @@ export interface PlotDriver<F> {
     onPlace?(place: (at: Place | undefined) => void): () => void;
     /**
      * Calls `corners` with where the drawing's named corners are drawn, the
-     * two ends of a spatial heatmap's front edge, whenever a frame moves them,
-     * and with `undefined` while they are out of view. The chart stands its
-     * first and last labels there. Returns what stops listening.
+     * two ends of a spatial heatmap's front edge and the corners of the box
+     * round it, whenever a frame moves them, and with `undefined` while they
+     * are out of view. The chart stands its first and last labels there, clear
+     * of the box. Returns what stops listening.
      */
-    onCorners?(corners: (at: {
-        end: Place;
-        start: Place;
-    } | undefined) => void): () => void;
+    onCorners?(corners: (at: Corners | undefined) => void): () => void;
     /**
      * Calls `press` with a reading's index when the reader presses it in the
      * drawing, and with `-1` when they press where none is. Returns what stops

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type Axes, type Axis, type Place, type PlotColors, type PlotConnection, type PlotDriver, type PointerKind, plotColorsFrom, } from './connect-plot/connect-plot.js';
+export { type Axes, type Axis, type Corners, type Place, type PlotColors, type PlotConnection, type PlotDriver, type PointerKind, plotColorsFrom, } from './connect-plot/connect-plot.js';
 export { connectSpatialHeatmap, type HeatmapCell, type SpatialHeatmapConnection, type SpatialHeatmapDriver, type SpatialHeatmapField, } from './connect-spatial-heatmap/connect-spatial-heatmap.js';
 export { connectSpatialScatterChart, type Field, type Point, type SpatialScatterChartConnection, type SpatialScatterChartDriver, } from './connect-spatial-scatter-chart/connect-spatial-scatter-chart.js';
 export { connectSpatialSurfaceChart, type SpatialSurfaceChartConnection, type SpatialSurfaceChartDriver, type SurfaceCell, type SurfaceField, } from './connect-spatial-surface-chart/connect-spatial-surface-chart.js';

package/dist/three/heatmap-driver.js

@@ -89,8 +89,24 @@ export const threeHeatmapDriver = (container, options = {}) => {
             framed = true;
             unfollow?.();
             const foot = FLOOR - THICKNESS * unit;
-            unfollow = stage.track([new Vector3(-wide / 2, foot, deep / 2), new Vector3(wide / 2, foot, deep / 2)], (at) => {
-                cornered?.(at ? { end: at[1], start: at[0] } : undefined);
+            const corners = [];
+            for (const x of [-wide / 2, wide / 2]) {
+                for (const z of [deep / 2, -deep / 2]) {
+                    corners.push(new Vector3(x, foot, z), new Vector3(x, foot + high, z));
+                }
+            }
+            unfollow = stage.track(corners, (at) => {
+                if (!at) {
+                    cornered?.(undefined);
+                    return;
+                }
+                const [lastStart, firstStart, lastEnd, firstEnd] = [0, 2, 4, 6].map((index) => at[index]);
+                const last = lastStart.y + lastEnd.y >= firstStart.y + firstEnd.y;
+                cornered?.({
+                    end: last ? lastEnd : firstEnd,
+                    outline: at,
+                    start: last ? lastStart : firstStart,
+                });
             });
         },
         focus: (index) => {

package/dist/three/stage.js

@@ -1,4 +1,4 @@
-import { pageBudget } from '@fusion.dev/helix-core';
+import { boxLabels, pageBudget, } from '@fusion.dev/helix-core';
 import { BufferGeometry, CanvasTexture, Float32BufferAttribute, LineBasicMaterial, LineSegments, PerspectiveCamera, Raycaster, Scene, Spherical, Sprite, SpriteMaterial, Vector2, Vector3, WebGLRenderer, } from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 const STEP = Math.PI / 12;
@@ -63,7 +63,8 @@ export const createStage = (container, options) => {
     container.append(canvas);
     const labels = document.createElement('div');
     labels.setAttribute('aria-hidden', 'true');
-    labels.style.cssText = 'position:absolute;inset:0;pointer-events:none;overflow:hidden';
+    labels.style.cssText =
+        'position:absolute;inset:0;pointer-events:none;overflow:hidden;user-select:none;-webkit-user-select:none';
     container.append(labels);
     const scene = new Scene();
     const camera = new PerspectiveCamera(35, 1, 0.1, 100);
@@ -79,6 +80,8 @@ export const createStage = (container, options) => {
     controls.minDistance = 2.5;
     controls.maxDistance = 12;
     controls.rotateSpeed = 0.7;
+    controls.minPolarAngle = 0.15;
+    controls.maxPolarAngle = Math.PI / 2 - 0.02;
     const gridMaterial = new LineBasicMaterial({ opacity: 0.35, transparent: true });
     const grid = new LineSegments(new BufferGeometry(), gridMaterial);
     scene.add(grid);
@@ -138,34 +141,30 @@ export const createStage = (container, options) => {
         const width = container.clientWidth;
         const height = container.clientHeight;
         const marks = [];
-        const label = (at, text, strong = false) => {
-            const on = at.clone().project(camera);
-            if (on.z > 1) {
-                return;
-            }
+        const label = (left, top, text, strong = false) => {
             const mark = document.createElement('span');
             mark.textContent = text;
             const size = strong ? 'var(--helix-text-sm, 13px)' : 'var(--helix-text-xs, 11px)';
             const weight = strong
                 ? 'var(--helix-weight-semibold, 600)'
                 : 'var(--helix-weight-medium, 500)';
-            mark.style.cssText = `position:absolute;left:${((on.x + 1) / 2) * width}px;top:${((1 - on.y) / 2) * height}px;translate:-50% -50%;white-space:nowrap;font-family:${font};font-size:${size};font-weight:${weight};line-height:1;color:${strong ? colors?.ink : colors?.quiet};text-shadow:0 0 3px ${colors?.ground},0 0 3px ${colors?.ground}`;
+            mark.style.cssText = `position:absolute;left:${left}px;top:${top}px;translate:-50% -50%;white-space:nowrap;font-family:${font};font-size:${size};font-weight:${weight};line-height:1;color:${strong ? colors?.ink : colors?.quiet};text-shadow:0 0 3px ${colors?.ground},0 0 3px ${colors?.ground}`;
             marks.push(mark);
         };
-        const h = HALF;
-        const { x, y, z } = axes;
-        for (const tick of x.ticks) {
-            label(new Vector3(inBox(x, tick), -h, h + 0.12), tickText(tick));
-        }
-        for (const tick of z.ticks) {
-            label(new Vector3(h + 0.12, -h, inBox(z, tick)), tickText(tick));
-        }
-        for (const tick of y.ticks.slice(1)) {
-            label(new Vector3(-h - 0.12, inBox(y, tick), h), tickText(tick));
+        const place = new Vector3();
+        const seen = ([x, y, z]) => {
+            place.set(x * HALF, y * HALF, z * HALF);
+            const depth = -place.distanceTo(camera.position);
+            const on = place.project(camera);
+            return { depth, x: ((on.x + 1) / 2) * width, y: ((1 - on.y) / 2) * height };
+        };
+        const text = (axis) => ({
+            name: axis.name,
+            ticks: axis.ticks.map((tick) => ({ at: inBox(axis, tick) / HALF, text: tickText(tick) })),
+        });
+        for (const one of boxLabels(seen, { x: text(axes.x), y: text(axes.y), z: text(axes.z) }, { gap: 6, name: 13, tick: 11, wide: 0.58 })) {
+            label(one.x, one.y, one.text, one.name);
         }
-        label(new Vector3(0, -h, h + 0.35), x.name, true);
-        label(new Vector3(h + 0.62, -h, 0), z.name, true);
-        label(new Vector3(-h, h + 0.28, h), y.name, true);
         labels.replaceChildren(...marks);
         for (const mark of marks) {
             const half = mark.offsetWidth / 2;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-plot",
   "description": "Connects the Helix Spatial Heatmap, Spatial Scatter Chart, and Spatial Surface Chart to three.js, which draws them in three dimensions.",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -35,11 +35,11 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.194.0"
+    "@fusion.dev/helix-core": "0.196.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.194.0",
-    "@fusion.dev/helix-testing": "0.194.0",
+    "@fusion.dev/helix-headless": "0.196.0",
+    "@fusion.dev/helix-testing": "0.196.0",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "three": "^0.186.1"