@fusion.dev/helix-graph 0.129.1 → 0.131.0

package/README.md

@@ -242,7 +242,7 @@ it loads three.js, so a page that draws a flat shape never bundles it:
 
 | Function | Makes |
 |---|---|
-| `shapeFromModel(url)` | From `/model`: a solid from a glTF model, `.glb` or `.gltf`, every mesh where the model places it. Async; three.js reads the file, and an error names the model |
+| `shapeFromModel(url)` | From `/model`: a solid from a glTF model, `.glb` or `.gltf`, every mesh where the model places it, compressed with meshopt or not. Async; three.js reads the file, and an error names the model |
 | `shapeFromTriangles(positions, index)` | A solid from a closed surface of triangles a page already holds |
 | `shapeFromSvg(svg)` | A flat field from an `<svg>` or its markup: every path, rectangle, circle, ellipse and polygon in its `viewBox` |
 | `shapeFromImage(image, { threshold })` | A flat field from an image's opaque pixels |
@@ -362,6 +362,7 @@ Sigma 3 is a peer dependency.
 | `connectGraph` option | Default | What else it takes |
 |---|---|---|
 | `center` | `true` | `false` leaves the view where it is when a note is chosen in the list |
+| `reach` | `links` | How far a selection reaches, which the drawing lights: `upstream`, every note a path of links leads from to the selected one, or `downstream`, every note a path leads to from it |
 | `stencil` | none | A shape to draw the notes in: a field from `shapes`, `{ path, width, height }` or `{ inside, width, height }`, with `place`, `fill` or `surface`; `shell`, how thick a surface's shell is as a share of the shape's size, `0.04` by default; and `regions`, the part each group goes to |
 
 | `sigmaDriver` option | Default | What else it takes |

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

@@ -1,9 +1,11 @@
 import { type ViewportGestureMode } from '@fusion.dev/helix-core';
 import { type DrawnLink, type DrawnNode, type GraphChanges } from './diff.js';
 import { type GraphLooks } from './looks.js';
+import { type GraphReach } from './reach.js';
 import { type GraphPoint } from './seed.js';
 import { type GraphStencil, type StencilFrame } from './stencil.js';
 export type { DrawnLink, DrawnNode, GraphChanges } from './diff.js';
+export type { GraphReach } from './reach.js';
 /**
  * What a renderer has to answer for the frame to drive it, and nothing that is
  * the same for every renderer: that is the connector's.
@@ -117,6 +119,15 @@ export interface ConnectGraphOptions {
      * reader is already looking at it.
      */
     center?: boolean | undefined;
+    /**
+     * How far a selection reaches, which the drawing lights and a selection
+     * made in the list frames: `links`, the notes it links to and from, which
+     * is the default; `upstream`, everything a path of links leads from to it;
+     * or `downstream`, everything a path leads to from it. Where each link runs
+     * from what a note was derived from to the note, `upstream` lights all a
+     * note came from.
+     */
+    reach?: GraphReach | undefined;
     /**
      * A shape the notes are drawn in, such as a brain or a country's outline:
      * an SVG path and the box it is drawn in. **No layout runs**: each group

package/dist/connect-graph/connect-graph.js

@@ -2,6 +2,7 @@ import { HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphSignalEvent, H
 import { arrangeByGroup, hubsOf } from './arrange.js';
 import { diffGraph, isEmpty, linkKey, } from './diff.js';
 import { graphColorsFrom, looksOf, toneColor, } from './looks.js';
+import { reachOf } from './reach.js';
 import { seedPositions } from './seed.js';
 import { fieldOf, fitInStencil } from './stencil.js';
 const clustersOf = (nodes, hubOf) => {
@@ -47,19 +48,10 @@ export const connectGraph = (frame, driver, options = {}) => {
         const nodes = graph.nodes ?? [];
         const links = graph.links ?? [];
         const selected = selectedNote();
-        const near = new Set();
-        if (selected !== undefined) {
-            for (const { source, target } of links) {
-                if (source === selected) {
-                    near.add(target);
-                }
-                else if (target === selected) {
-                    near.add(source);
-                }
-            }
-        }
+        const reached = selected === undefined ? undefined : reachOf(selected, links, options.reach ?? 'links');
         const notes = new Map(nodes.map((node) => [node.id, node]));
         current = looksOf({
+            along: reached?.along,
             colors,
             font: getComputedStyle(frame)
                 .fontFamily.split(',')[0]
@@ -67,7 +59,7 @@ export const connectGraph = (frame, driver, options = {}) => {
                 .replace(/^["']|["']$/g, ''),
             groups: nodes.flatMap((node) => (node.group === undefined ? [] : [node.group])),
             links: links.length,
-            near,
+            near: reached?.near ?? new Set(),
             noteOf: (id) => notes.get(id),
             selected,
             shown: graph.shown,
@@ -75,8 +67,9 @@ export const connectGraph = (frame, driver, options = {}) => {
         driver.look(current);
         if (driver.groups) {
             const members = new Map();
+            const shown = graph.shown;
             for (const node of nodes) {
-                if (node.group !== undefined) {
+                if (node.group !== undefined && (!shown || shown.has(node.id))) {
                     const list = members.get(node.group);
                     if (list) {
                         list.push(node.id);
@@ -222,7 +215,11 @@ export const connectGraph = (frame, driver, options = {}) => {
     };
     const handleSignal = (event) => {
         const { from, to, tone } = event.detail;
-        if (!driver.signal || !drawnNodes.has(from) || !drawnNodes.has(to)) {
+        const shown = graph.shown;
+        if (!driver.signal ||
+            !drawnNodes.has(from) ||
+            !drawnNodes.has(to) ||
+            (shown && !(shown.has(from) && shown.has(to)))) {
             return;
         }
         colors ??= graphColorsFrom(frame);
@@ -244,15 +241,10 @@ export const connectGraph = (frame, driver, options = {}) => {
             selected !== pressed &&
             options.center !== false &&
             drawnNodes.has(selected)) {
-            const near = [selected];
-            for (const { source, target } of drawnLinks.values()) {
-                if (source === selected) {
-                    near.push(target);
-                }
-                else if (target === selected) {
-                    near.push(source);
-                }
-            }
+            const near = [
+                selected,
+                ...reachOf(selected, drawnLinks.values(), options.reach ?? 'links').near,
+            ];
             if (driver.fit && near.length > 1) {
                 driver.fit(near, !still());
             }

package/dist/connect-graph/looks.d.ts

@@ -128,6 +128,11 @@ export interface GraphLooks {
  * color whichever notes a page loads first.
  */
 export declare const looksOf: (options: {
+    /**
+     * Whether a link is one the selection reaches along, which lights it. The
+     * links that touch the selected note, where not given.
+     */
+    along?: ((source: string, target: string) => boolean) | undefined;
     colors: GraphColors;
     font?: string | undefined;
     groups: readonly string[];

package/dist/connect-graph/looks.js

@@ -88,7 +88,8 @@ export const looksOf = (options) => {
         ground: colors.ground,
         ink: colors.ink,
         link: (source, target) => {
-            const touches = focused && (source === selected || target === selected);
+            const touches = focused &&
+                (options.along ? options.along(source, target) : source === selected || target === selected);
             return {
                 color: touches
                     ? own(selected)

package/dist/connect-graph/reach.d.ts

@@ -0,0 +1,24 @@
+/**
+ * How far a selection reaches, which is what the drawing lights:
+ *
+ * - `links`, the notes the selected one links to and from, and the links
+ *   that touch it.
+ * - `upstream`, every note a path of links leads from to the selected one,
+ *   and the links on those paths. Where a link runs from what a note was
+ *   derived from to the note, this is everything the note came from.
+ * - `downstream`, every note a path of links leads to from the selected one,
+ *   and the links on those paths: everything that depends on it.
+ */
+export type GraphReach = 'downstream' | 'links' | 'upstream';
+/** What a selection reaches: the notes, without the selected one, and whether a link is on the way. */
+export interface Reached {
+    /** Whether the link from `source` to `target` is one the selection reaches along. */
+    along(source: string, target: string): boolean;
+    /** The notes reached, not counting the selected one. */
+    near: ReadonlySet<string>;
+}
+/** What `selected` reaches over `links`, as `reach` says. */
+export declare const reachOf: (selected: string, links: Iterable<{
+    source: string;
+    target: string;
+}>, reach: GraphReach) => Reached;

package/dist/connect-graph/reach.js

@@ -0,0 +1,45 @@
+export const reachOf = (selected, links, reach) => {
+    const list = [...links];
+    if (reach === 'links') {
+        const near = new Set();
+        for (const { source, target } of list) {
+            if (source === selected) {
+                near.add(target);
+            }
+            else if (target === selected) {
+                near.add(source);
+            }
+        }
+        return {
+            along: (source, target) => source === selected || target === selected,
+            near,
+        };
+    }
+    const up = reach === 'upstream';
+    const next = new Map();
+    for (const { source, target } of list) {
+        const [from, to] = up ? [target, source] : [source, target];
+        const out = next.get(from);
+        if (out) {
+            out.push(to);
+        }
+        else {
+            next.set(from, [to]);
+        }
+    }
+    const reached = new Set([selected]);
+    const queue = [selected];
+    for (let at = queue.pop(); at !== undefined; at = queue.pop()) {
+        for (const to of next.get(at) ?? []) {
+            if (!reached.has(to)) {
+                reached.add(to);
+                queue.push(to);
+            }
+        }
+    }
+    const along = up
+        ? (_, target) => reached.has(target)
+        : (source) => reached.has(source);
+    reached.delete(selected);
+    return { along, near: reached };
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { type ConnectGraphOptions, connectGraph, type DrawnLink, type DrawnNode, type GraphChanges, type GraphConnection, type GraphDriver, type GraphGroup, } from './connect-graph/connect-graph.js';
+export { type ConnectGraphOptions, connectGraph, type DrawnLink, type DrawnNode, type GraphChanges, type GraphConnection, type GraphDriver, type GraphGroup, type GraphReach, } from './connect-graph/connect-graph.js';
 export { diffGraph, linkKey } from './connect-graph/diff.js';
 export { type GraphColors, type GraphLooks, type GraphTone, graphColorsFrom, type LinkLook, type NodeLook, } from './connect-graph/looks.js';
 export { type GraphPoint, type SeedLink, type SeedNode, seedPositions, } from './connect-graph/seed.js';

package/dist/model/model.d.ts

@@ -10,7 +10,10 @@ import { type TriangleOptions } from '../shapes/triangles.js';
  *
  * **three.js reads the file**, imported when this is first called, so a page
  * that draws no model never downloads a loader. It is an optional peer of
- * this package. A model that cannot be fetched or read is an error that
+ * this package. A file compressed with meshopt, as `gltfpack` and
+ * glTF-Transform write one, is read with the decoder three.js ships, and
+ * corners stored as integers, as `KHR_mesh_quantization` allows, are read as
+ * the places they stand for. A model that cannot be fetched or read is an error that
  * names it, the loader's own error as its `cause`.
  */
 export declare const shapeFromModel: (source: string | ArrayBuffer, options?: TriangleOptions) => Promise<ShapeField>;

package/dist/model/model.js

@@ -1,13 +1,15 @@
 import { shapeFromTriangles } from '../shapes/triangles.js';
 export const shapeFromModel = async (source, options = {}) => {
     const which = typeof source === 'string' ? `The model ${source}` : 'The model given as bytes';
-    const [{ GLTFLoader }, { Mesh, Vector3 }] = await Promise.all([
+    const [{ GLTFLoader }, { MeshoptDecoder }, { Mesh, Vector3 }] = await Promise.all([
         import('three/addons/loaders/GLTFLoader.js'),
+        import('three/addons/libs/meshopt_decoder.module.js'),
         import('three'),
     ]).catch((cause) => {
         throw new Error(`${which} could not be read, because three.js could not be loaded. Install three alongside @fusion.dev/helix-graph.`, { cause });
     });
     const loader = new GLTFLoader();
+    loader.setMeshoptDecoder(MeshoptDecoder);
     const model = await (typeof source === 'string'
         ? loader.loadAsync(source)
         : loader.parseAsync(source, '')).catch((cause) => {

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.129.1",
+  "version": "0.131.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,18 +51,19 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.129.1"
+    "@fusion.dev/helix-core": "0.131.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.129.1",
-    "@fusion.dev/helix-testing": "0.129.1",
+    "@fusion.dev/helix-headless": "0.131.0",
+    "@fusion.dev/helix-testing": "0.131.0",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",
     "graphology": "^0.26.0",
     "graphology-layout-forceatlas2": "^0.10.1",
     "graphology-types": "^0.24.8",
+    "meshoptimizer": "^1.1.1",
     "sigma": "^3.0.3",
     "three": "^0.186.1"
   },