@fusion.dev/helix-graph 0.185.0 → 0.186.1

package/dist/three/three-driver.d.ts

@@ -3,14 +3,18 @@ import { type NodeLook } from '../connect-graph/looks.js';
 /** How the three.js driver behaves where the page does not say. */
 export interface ThreeDriverOptions {
     /**
-     * How many pixels the drawing has for each of the page's. By default half
-     * as many again as the screen has, at least two and at most three, which
-     * smooths every edge. Fewer is faster on a slow GPU.
+     * How many pixels the drawing has for each of the page's. By default, on
+     * a screen worked with a mouse, half as many again as the screen has, at
+     * least two and at most three, which smooths every edge; on a touch
+     * screen, as many as the screen has, at most two. Fewer is faster on a
+     * slow GPU.
      */
     density?: number | undefined;
     /**
-     * Whether the graph turns slowly while nobody is handling it. On by
-     * default, and never for a reader who asks for less motion.
+     * Whether the graph turns slowly for its first five seconds, until the
+     * reader handles it. On by default, and never for a reader who asks for
+     * less motion. It stops for good after five seconds, since motion that
+     * starts by itself and runs longer needs a way to pause it.
      */
     autoRotate?: boolean | undefined;
     /** Whether each group's name is drawn over its notes. On by default. */
@@ -32,10 +36,13 @@ export interface ThreeDriverOptions {
  * **A layout runs in three dimensions**, with d3-force-3d, where notes have no
  * place; with a solid `stencil`, the notes are drawn in its shape and none
  * runs. Dragging turns the graph, the wheel and a pinch bring it nearer, and
- * it turns slowly by itself while nobody is handling it, unless the reader
- * asks for less motion. It draws only while something moves, and not at all
- * while the box is out of view or off the page.
+ * it turns slowly by itself for its first five seconds, until the reader
+ * handles it, unless the reader asks for less motion. It draws only while
+ * something moves, and not at all while the box is out of view or off the
+ * page.
  *
- * The renderer is the driver's own, and `disconnect()` frees it.
+ * The renderer is the driver's own, and `disconnect()` frees it. Every
+ * three.js graph on a page shares six WebGL contexts: past six, one far off
+ * screen gives its context back and takes it again as it comes near.
  */
 export declare const threeDriver: (container: HTMLElement, options?: ThreeDriverOptions) => GraphDriver;

package/dist/three/three-driver.js

@@ -9,6 +9,7 @@ import { linkKey } from '../connect-graph/diff.js';
 import { rgbOf } from '../connect-graph/looks.js';
 import { ease, gesturesHeld, groupsOver, isLight, namesOver, signalsOver, } from '../overlay/overlay.js';
 import { surfaceOf } from '../shapes/surface.js';
+import { pageBudget } from './budget.js';
 const SHAPES = { circle: 0, diamond: 2, ring: 0, square: 1 };
 const REACH = 100;
 const STEP = 250;
@@ -16,7 +17,7 @@ const MORPH = 1400;
 const ZOOM = 1.5;
 const SAMPLE = 96;
 const LINKS = { dark: { close: 0.16, far: 0.025 }, light: { close: 0.36, far: 0.07 } };
-const REST = 8000;
+const TURNING = 5000;
 const WASH = { dark: 0.14, full: 1.5, light: 0.18, notes: 6, reach: 3.5 };
 const BLOOM = { dark: 0.28, light: 0 };
 const LIGHT = new Vector3(-0.4, 0.8, 0.45).normalize();
@@ -292,7 +293,9 @@ const depthOf = (id) => {
 export const threeDriver = (container, options = {}) => {
     const still = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
     const renderer = new WebGLRenderer({ alpha: true, antialias: true });
-    renderer.setPixelRatio(options.density ?? Math.min(Math.max((window.devicePixelRatio || 1) * 1.5, 2), 3));
+    const screen = window.devicePixelRatio || 1;
+    const touch = window.matchMedia?.('(pointer: coarse)').matches ?? false;
+    renderer.setPixelRatio(options.density ?? (touch ? Math.min(screen, 2) : Math.min(Math.max(screen * 1.5, 2), 3)));
     renderer.setClearColor(0x000000, 0);
     const canvas = renderer.domElement;
     canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
@@ -317,7 +320,8 @@ export const threeDriver = (container, options = {}) => {
     let near = new Set();
     let stopped = false;
     let moved = false;
-    let handled = 0;
+    const turnUntil = performance.now() + TURNING;
+    let touched = false;
     let scale = 1;
     let positions = new Float32Array();
     const uniforms = {
@@ -647,6 +651,7 @@ export const threeDriver = (container, options = {}) => {
             return;
         }
         glide = { duration, from, fromDistance, start: performance.now(), to, toDistance: distance };
+        invalidate();
     };
     const sphereOf = (spots) => {
         const center = new Vector3();
@@ -977,18 +982,20 @@ export const threeDriver = (container, options = {}) => {
         const shade = LINKS[dark ? 'dark' : 'light'];
         quiet.material.opacity = shade.far + (shade.close - shade.far) * closeness;
     };
+    let visible = true;
+    let pending = 0;
     let dirty = true;
     const invalidate = () => {
         dirty = true;
+        if (!pending && !stopped && visible && container.isConnected) {
+            pending = requestAnimationFrame(tick);
+        }
     };
-    let visible = true;
-    let pending = 0;
     const tick = (now) => {
         pending = 0;
         if (stopped || !visible || !container.isConnected) {
             return;
         }
-        pending = requestAnimationFrame(tick);
         const moving = glide !== undefined || morph !== undefined || layout !== undefined;
         if (glide) {
             const through = Math.min((now - glide.start) / glide.duration, 1);
@@ -1042,14 +1049,18 @@ export const threeDriver = (container, options = {}) => {
         controls.autoRotate =
             !still() &&
                 options.autoRotate !== false &&
+                !touched &&
                 hovered === undefined &&
                 selected === undefined &&
-                now - handled > REST;
-        controls.enableDamping = !still();
+                now < turnUntil;
+        controls.enableDamping = !still() && (touched || now < turnUntil);
         const turned = controls.update();
         if (!(moving || turned || dirty)) {
             return;
         }
+        if (!pending) {
+            pending = requestAnimationFrame(tick);
+        }
         dirty = false;
         cue();
         if (solids.cube.mesh || solids.octahedron.mesh) {
@@ -1061,9 +1072,6 @@ export const threeDriver = (container, options = {}) => {
     };
     const wake = () => {
         invalidate();
-        if (!pending && !stopped && visible && container.isConnected) {
-            pending = requestAnimationFrame(tick);
-        }
     };
     const seen = typeof IntersectionObserver === 'function'
         ? new IntersectionObserver((entries) => {
@@ -1083,6 +1091,26 @@ export const threeDriver = (container, options = {}) => {
         invalidate();
     };
     let resizing = 0;
+    const restored = () => {
+        invalidate();
+    };
+    canvas.addEventListener('webglcontextrestored', restored);
+    const holder = {
+        release: () => renderer.forceContextLoss(),
+        restore: () => renderer.forceContextRestore(),
+    };
+    pageBudget.join(holder);
+    const nearby = typeof IntersectionObserver === 'function'
+        ? new IntersectionObserver((entries) => {
+            if (entries.at(-1)?.isIntersecting ?? true) {
+                pageBudget.near(holder);
+            }
+            else {
+                pageBudget.far(holder, performance.now());
+            }
+        }, { rootMargin: '50%' })
+        : undefined;
+    nearby?.observe(container);
     const sized = new ResizeObserver(() => {
         cancelAnimationFrame(resizing);
         resizing = requestAnimationFrame(resize);
@@ -1092,12 +1120,12 @@ export const threeDriver = (container, options = {}) => {
     pending = requestAnimationFrame(tick);
     controls.addEventListener('start', () => {
         moved = true;
-        handled = Number.POSITIVE_INFINITY;
+        touched = true;
         glide = undefined;
         wake();
     });
-    controls.addEventListener('end', () => {
-        handled = performance.now();
+    controls.addEventListener('change', () => {
+        invalidate();
     });
     const frontOf = (ray) => {
         const frame = shapeFrame;
@@ -1270,6 +1298,7 @@ export const threeDriver = (container, options = {}) => {
             const step = (now) => {
                 const through = Math.min((now - start) / STEP, 1);
                 camera.position.copy(from.clone().lerp(to, ease(through)));
+                invalidate();
                 if (through < 1 && !stopped) {
                     requestAnimationFrame(step);
                 }
@@ -1350,6 +1379,9 @@ export const threeDriver = (container, options = {}) => {
         },
         stop: () => {
             stopped = true;
+            canvas.removeEventListener('webglcontextrestored', restored);
+            nearby?.disconnect();
+            pageBudget.leave(holder);
             cancelAnimationFrame(pending);
             cancelAnimationFrame(hovering);
             cancelAnimationFrame(resizing);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.185.0",
+  "version": "0.186.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -21,6 +21,10 @@
       "types": "./dist/cosmos/index.d.ts",
       "default": "./dist/cosmos/index.js"
     },
+    "./isometric": {
+      "types": "./dist/isometric/index.d.ts",
+      "default": "./dist/isometric/index.js"
+    },
     "./model": {
       "types": "./dist/model/index.d.ts",
       "default": "./dist/model/index.js"
@@ -55,12 +59,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.185.0"
+    "@fusion.dev/helix-core": "0.186.1"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.185.0",
-    "@fusion.dev/helix-testing": "0.185.0",
+    "@fusion.dev/helix-headless": "0.186.1",
+    "@fusion.dev/helix-testing": "0.186.1",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",