@fusion.dev/helix-plot 0.198.0 → 0.199.0

package/dist/three/treemap-driver.js

@@ -0,0 +1,105 @@
+import { Box3, BoxGeometry, BufferGeometry, Color, DirectionalLight, EdgesGeometry, Float32BufferAttribute, HemisphereLight, LineBasicMaterial, LineSegments, Mesh, MeshLambertMaterial, Vector3, } from 'three';
+import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
+import { createStage, edgeOf, HALF, inBox, lookThrough } from './stage.js';
+export const threeTreemapDriver = (container, options = {}) => {
+    let field;
+    let drawnBlocks = [];
+    let tops = new Map();
+    const blockMaterial = new MeshLambertMaterial({
+        polygonOffset: true,
+        polygonOffsetFactor: 1,
+        polygonOffsetUnits: 1,
+        vertexColors: true,
+    });
+    const blocks = new Mesh(new BufferGeometry(), blockMaterial);
+    const edgeMaterial = new LineBasicMaterial({ vertexColors: true });
+    const edges = new LineSegments(new BufferGeometry(), edgeMaterial);
+    const stage = createStage(container, {
+        density: options.density,
+        pick: (ray) => {
+            const hit = ray.intersectObject(blocks)[0];
+            if (hit?.faceIndex === undefined || hit.faceIndex === null) {
+                return -1;
+            }
+            return drawnBlocks[Math.floor(hit.faceIndex / 12)] ?? -1;
+        },
+    });
+    const sky = new HemisphereLight(0xffffff, 0xffffff, 2.2);
+    const sun = new DirectionalLight(0xffffff, 1);
+    sun.position.set(-2, 4, 1);
+    stage.scene.add(blocks, edges, sky, sun);
+    const painted = (geometry, color) => {
+        const count = geometry.getAttribute('position').count;
+        const colors = new Float32Array(count * 3);
+        for (let at = 0; at < count; at++) {
+            colors.set([color.r, color.g, color.b], at * 3);
+        }
+        geometry.setAttribute('color', new Float32BufferAttribute(colors, 3));
+        return geometry;
+    };
+    return {
+        draw: (next, colors, font) => {
+            field = next;
+            const [ex, ey, ez] = next.axes.extent ?? [1, 1, 1];
+            const zero = inBox(next.axes.y, 0) * ey;
+            const page = new Color(colors.page);
+            const { emphasis, through } = colors.look;
+            const solids = [];
+            const lines = [];
+            drawnBlocks = [];
+            tops = new Map();
+            next.blocks.forEach((block, index) => {
+                const tone = new Color(colors.groups[block.groupIndex % colors.groups.length] ?? colors.ink);
+                const color = emphasis === 'outlined' ? tone.clone().lerp(page, 0.4) : tone;
+                const top = inBox(next.axes.y, next.height === '' ? 1 : (block.height ?? 0)) * ey;
+                const tall = Math.max(Math.abs(top - zero), 1e-3);
+                const [x0, x1] = [
+                    inBox(next.axes.x, block.area.x0) * ex,
+                    inBox(next.axes.x, block.area.x1) * ex,
+                ];
+                const [z0, z1] = [
+                    inBox(next.axes.z, block.area.z0) * ez,
+                    inBox(next.axes.z, block.area.z1) * ez,
+                ];
+                const box = new BoxGeometry(Math.abs(x1 - x0), tall, Math.abs(z1 - z0));
+                const [x, z] = [(x0 + x1) / 2, (z0 + z1) / 2];
+                box.translate(x, Math.min(top, zero) + tall / 2, z);
+                solids.push(painted(box, color));
+                lines.push(painted(new EdgesGeometry(box), emphasis === 'solid' ? edgeOf(color) : tone));
+                drawnBlocks.push(index);
+                tops.set(index, new Vector3(x, Math.max(top, zero), z));
+            });
+            lookThrough(blockMaterial, (emphasis === 'subtle' ? 0.2 : 1) * through);
+            lookThrough(edgeMaterial, through);
+            blocks.geometry.dispose();
+            edges.geometry.dispose();
+            blocks.geometry = (solids.length > 0 && mergeGeometries(solids)) || new BufferGeometry();
+            edges.geometry = (lines.length > 0 && mergeGeometries(lines)) || new BufferGeometry();
+            for (const one of [...solids, ...lines]) {
+                one.dispose();
+            }
+            stage.setAxes(next.axes, colors, font);
+            if (colors.look.box || tops.size === 0) {
+                stage.frame(new Vector3(-HALF * ex, -HALF * ey, -HALF * ez), new Vector3(HALF * ex, HALF * ey, HALF * ez));
+            }
+            else {
+                const around = new Box3().setFromBufferAttribute(blocks.geometry.getAttribute('position'));
+                stage.frame(around.min, around.max);
+            }
+        },
+        focus: (index) => {
+            stage.setMarker(field ? tops.get(index) : undefined);
+        },
+        onHover: (listener) => stage.onHover(listener),
+        onPlace: (listener) => stage.onPlace(listener),
+        onPress: (listener) => stage.onPress(listener),
+        stop: () => {
+            blocks.geometry.dispose();
+            blockMaterial.dispose();
+            edges.geometry.dispose();
+            edgeMaterial.dispose();
+            stage.stop();
+        },
+        turnBy: (across, up, animate) => stage.turnBy(across, up, animate),
+    };
+};

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.198.0",
+  "description": "Connects the Helix spatial charts to three.js, which draws them in three dimensions: Spatial Bar Chart, Spatial Heatmap, Spatial Ribbon Chart, Spatial Scatter Chart, Spatial Surface Chart, and Spatial Treemap.",
+  "version": "0.199.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.198.0"
+    "@fusion.dev/helix-core": "0.199.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.198.0",
-    "@fusion.dev/helix-testing": "0.198.0",
+    "@fusion.dev/helix-headless": "0.199.0",
+    "@fusion.dev/helix-testing": "0.199.0",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "three": "^0.186.1"