@fusion.dev/helix-graph 0.177.2 → 0.178.0

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

@@ -93,6 +93,7 @@ export const connectGraph = (frame, driver, options = {}) => {
                 ?.trim()
                 .replace(/^["']|["']$/g, ''),
             groups: nodes.flatMap((node) => (node.group === undefined ? [] : [node.group])),
+            keyed: graph.keyed?.id,
             links: links.length,
             near: reached?.near ?? new Set(),
             noteOf: (id) => notes.get(id),
@@ -292,6 +293,18 @@ export const connectGraph = (frame, driver, options = {}) => {
         }
         pressed = undefined;
     };
+    let keyedShown;
+    const showKeyed = () => {
+        const keyed = graph.keyed;
+        const id = keyed?.id;
+        if (id !== keyedShown &&
+            keyed?.walked &&
+            drawnNodes.has(keyed.id) &&
+            options.center !== false) {
+            driver.center?.(keyed.id, !still());
+        }
+        keyedShown = id;
+    };
     const handlePartChange = (event) => {
         const { kind } = event.detail;
         if (kind === 'data') {
@@ -301,6 +314,7 @@ export const connectGraph = (frame, driver, options = {}) => {
         else if (kind === 'focus') {
             restyle();
             frameSelection();
+            showKeyed();
         }
         else {
             driver.gestures?.(graph.gestureMode ?? 'free');

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

@@ -67,6 +67,12 @@ export interface NodeLook {
     glow: number;
     /** What it is drawn as made of, where the note says. */
     material?: 'frosted' | 'glass' | undefined;
+    /**
+     * The note the keys are on in the frame's list or search field, which a
+     * renderer marks as it marks the note under the pointer, so a reader moving
+     * by the keys sees where they are in the drawing.
+     */
+    keyed?: boolean | undefined;
     /** Drawn over the rest, as the selected note and its neighbors are. */
     raised: boolean;
     /** The selected note. */
@@ -105,6 +111,8 @@ export interface GraphLooks {
     ground: string;
     /** The color the labels are drawn in. */
     ink: string;
+    /** The note the keys are on in the frame's list or search field, which a renderer marks as it marks the note under the pointer. */
+    keyed?: string | undefined;
     /** What a name is drawn on while the pointer is over its note. */
     overlay: string;
     /** The quieter ink a name at rest is drawn in, beside the selected note's and its neighbors'. */
@@ -136,6 +144,8 @@ export declare const looksOf: (options: {
     colors: GraphColors;
     font?: string | undefined;
     groups: readonly string[];
+    /** The note the keys are on in the frame's list or search field, where they are on one. */
+    keyed?: string | undefined;
     /** How many links the graph draws, which sets how far a link at rest steps back. */
     links?: number | undefined;
     near: ReadonlySet<string>;

package/dist/connect-graph/looks.js

@@ -64,7 +64,7 @@ export const toneColor = (colors, tone) => tone === undefined || tone === 'prima
         : colors[tone];
 const FADED = 0.75;
 export const looksOf = (options) => {
-    const { colors, near, noteOf, selected, shown } = options;
+    const { colors, keyed, near, noteOf, selected, shown } = options;
     const order = new Map([...new Set(options.groups)].sort().map((group, at) => [group, at]));
     const own = (id) => {
         const note = noteOf(id);
@@ -87,6 +87,7 @@ export const looksOf = (options) => {
         font: options.font || 'sans-serif',
         ground: colors.ground,
         ink: colors.ink,
+        keyed,
         link: (source, target) => {
             const touches = focused &&
                 (options.along ? options.along(source, target) : source === selected || target === selected);
@@ -109,19 +110,22 @@ export const looksOf = (options) => {
                     color: own(id),
                     glow: 1,
                     hidden: hidden(id),
+                    keyed: id === keyed,
                     label: 'always',
                     raised: true,
                     selected: true,
                 };
             }
             const neighbor = focused && near.has(id);
+            const faded = focused && !neighbor && id !== keyed;
             return {
                 ...facts,
-                color: focused && !neighbor ? mixRgb(own(id), colors.ground, FADED) : own(id),
+                color: faded ? mixRgb(own(id), colors.ground, FADED) : own(id),
                 glow: 0,
                 hidden: hidden(id),
-                label: focused && !neighbor ? 'never' : 'room',
-                raised: neighbor,
+                keyed: id === keyed,
+                label: id === keyed ? 'always' : faded ? 'never' : 'room',
+                raised: neighbor || id === keyed,
                 selected: false,
             };
         },

package/dist/sigma/sigma-driver.js

@@ -262,6 +262,7 @@ export const sigmaDriver = (sigma, options = {}) => {
                     forceLabel: look.label === 'always',
                     glow: look.glow,
                     hidden: look.hidden,
+                    highlighted: look.keyed === true,
                     label: named ? data.label : null,
                     materialCode: MATERIALS[look.material ?? options.material ?? 'flat'],
                     shapeCode: SHAPES[look.shape ?? options.shape ?? 'circle'],
@@ -273,10 +274,11 @@ export const sigmaDriver = (sigma, options = {}) => {
             });
             sigma.setSetting('edgeReducer', (_edge, data) => {
                 const look = looks.link(String(data.from), String(data.to));
-                const lit = hovered !== undefined && (data.from === hovered || data.to === hovered);
+                const near = hovered ?? looks.keyed;
+                const lit = near !== undefined && (data.from === near || data.to === near);
                 return {
                     ...data,
-                    color: lit ? looks.node(hovered).color : look.color,
+                    color: lit ? looks.node(near).color : look.color,
                     hidden: look.hidden,
                     size: look.raised || lit ? 1.6 : 0.8,
                     zIndex: look.raised || lit ? 1 : 0,

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.177.2",
+  "version": "0.178.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -55,12 +55,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.177.2"
+    "@fusion.dev/helix-core": "0.178.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.177.2",
-    "@fusion.dev/helix-testing": "0.177.2",
+    "@fusion.dev/helix-headless": "0.178.0",
+    "@fusion.dev/helix-testing": "0.178.0",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",