@fusion.dev/helix-graph 0.118.0 → 0.119.0

package/README.md

@@ -33,6 +33,9 @@ const connection = connectGraph(
 // Keep where the layout put each note, and pass it back as `x` and `y` next time.
 frame.addEventListener('helix-graph-layout', (event) => save(event.detail.positions))
 
+// After replacing a stylesheet, which no attribute shows:
+connection.restyle()
+
 // Later, when the graph goes away:
 connection.disconnect()
 ```

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

@@ -63,6 +63,8 @@ export interface GraphDriver {
     gestures?(mode: ViewportGestureMode): void;
     /** The element the renderer made focusable, which the connector takes out of the tab order. */
     focusTarget?(): HTMLElement | null;
+    /** Removes whatever the driver added to the renderer or the page, when the connection ends. */
+    stop?(): void;
 }
 /** How a connection behaves where the page does not say. */
 export interface ConnectGraphOptions {
@@ -79,6 +81,12 @@ export interface GraphConnection {
     disconnect(): void;
     /** Lays the graph out again from where it starts, ignoring where the last layout put each note. */
     relayout(): void;
+    /**
+     * Reads the page's colors again. The connection hears a theme that changes
+     * by a class, a mode or the reader's preference on its own; call this after
+     * replacing a stylesheet, which no attribute shows.
+     */
+    restyle(): void;
 }
 /**
  * Connects a Graph frame to whatever draws the graph.

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

@@ -158,11 +158,16 @@ export const connectGraph = (frame, driver, options = {}) => {
                 }
             }
             driver.gestures?.('free');
+            driver.stop?.();
             graph.drawn?.(false);
         },
         relayout: () => {
             known = new Map();
             draw();
         },
+        restyle: () => {
+            colors = null;
+            restyle();
+        },
     };
 };

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

@@ -11,6 +11,8 @@ export interface GraphColors {
     ink: string;
     /** A note in no group, and the links that touch the selected note: `foreground-muted`. */
     muted: string;
+    /** What a note's name is drawn on while the pointer is over it: `surface-overlay`. */
+    overlay: string;
     /** The selected note: `primary`. */
     primary: string;
     /** One color for each group, in the order of the groups' names: `series-1` and on. */
@@ -37,8 +39,15 @@ export interface NodeLook {
     color: string;
     /** Outside the local graph that `depth` keeps. */
     hidden: boolean;
-    /** Its name is drawn whatever the room, as the selected note's and its neighbors' are. */
-    label: boolean;
+    /**
+     * When its name is drawn: `always`, whatever the room, as the selected
+     * note's is; `room`, where it does not cover another name, as the
+     * renderer decides for every note at rest; `never`, as a faded note's is.
+     *
+     * **The neighbors get room and not always.** Forced, a hub's twenty
+     * neighbors drew their names over each other in a knot nobody could read.
+     */
+    label: 'always' | 'never' | 'room';
     /** Drawn over the rest, as the selected note and its neighbors are. */
     raised: boolean;
     /** The selected note. */
@@ -56,6 +65,8 @@ export interface GraphLooks {
     font: string;
     /** The color the labels are drawn in. */
     ink: string;
+    /** What a name is drawn on while the pointer is over its note. */
+    overlay: string;
     link(source: string, target: string): LinkLook;
     node(id: string): NodeLook;
 }
@@ -65,7 +76,8 @@ export interface GraphLooks {
  * **The neighborhood stands out and the rest steps back**, which is what
  * selecting a note in a graph of thousands is for: the selected note in the
  * brand color, the notes it links to and from in their groups' colors with
- * their names drawn, and every other note faded toward the ground. With
+ * their names drawn where there is room, and every other note faded toward
+ * the ground, unnamed. With
  * nothing selected, every note is in its group's color.
  *
  * Groups take the series in the order of their names, so a group keeps its

package/dist/connect-graph/looks.js

@@ -5,6 +5,7 @@ const TOKENS = {
     ink: '--helix-color-foreground',
     line: '--helix-color-border',
     muted: '--helix-color-foreground-muted',
+    overlay: '--helix-color-surface-overlay',
     primary: '--helix-color-primary',
 };
 export const graphColorsFrom = (element) => {
@@ -81,7 +82,7 @@ export const looksOf = (options) => {
                 return {
                     color: colors.primary,
                     hidden: hidden(id),
-                    label: true,
+                    label: 'always',
                     raised: true,
                     selected: true,
                 };
@@ -90,10 +91,11 @@ export const looksOf = (options) => {
             return {
                 color: focused && !neighbor ? mixRgb(own(id), colors.ground, FADED) : own(id),
                 hidden: hidden(id),
-                label: neighbor,
+                label: focused && !neighbor ? 'never' : 'room',
                 raised: neighbor,
                 selected: false,
             };
         },
+        overlay: colors.overlay,
     };
 };

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

@@ -52,7 +52,8 @@ export interface SigmaRenderer {
         node: string;
     }) => void): unknown;
     refresh(): unknown;
-    setSetting(name: 'edgeReducer' | 'labelColor' | 'labelFont' | 'nodeReducer', value: unknown): unknown;
+    resize(force?: boolean): unknown;
+    setSetting(name: 'defaultDrawNodeHover' | 'edgeReducer' | 'labelColor' | 'labelFont' | 'labelRenderedSizeThreshold' | 'nodeReducer', value: unknown): unknown;
     viewportToFramedGraph(point: {
         x: number;
         y: number;

package/dist/sigma/sigma-driver.js

@@ -5,6 +5,26 @@ const STILL = 0.004;
 const HELD = 2;
 const IDLE = 2000;
 const pixels = (size) => 2 + 2 * Math.sqrt(Math.max(size, 0));
+const hoverOf = (looks) => (context, data, settings) => {
+    if (!data.label) {
+        return;
+    }
+    const size = settings.labelSize;
+    context.font = `${settings.labelWeight} ${size}px ${settings.labelFont}`;
+    const width = context.measureText(data.label).width;
+    const x = data.x + data.size + 2;
+    const height = size + 8;
+    context.save();
+    context.shadowBlur = 8;
+    context.shadowColor = 'rgba(0, 0, 0, 0.25)';
+    context.fillStyle = looks.overlay;
+    context.beginPath();
+    context.roundRect(x - 4, data.y - height / 2, width + 8, height, 4);
+    context.fill();
+    context.restore();
+    context.fillStyle = looks.ink;
+    context.fillText(data.label, x, data.y + size / 3);
+};
 const positionsOf = (graph) => {
     const positions = new Map();
     graph.forEachNode((node, attributes) => {
@@ -45,6 +65,13 @@ export const sigmaDriver = (sigma, options = {}) => {
     for (const type of held) {
         container.addEventListener(type, hold, { capture: true, passive: false });
     }
+    const sized = typeof ResizeObserver === 'function'
+        ? new ResizeObserver(() => {
+            sigma.resize(true);
+            sigma.refresh();
+        })
+        : undefined;
+    sized?.observe(container);
     return {
         center: (id, animate) => {
             const at = sigma.getNodeDisplayData(id);
@@ -87,14 +114,18 @@ export const sigmaDriver = (sigma, options = {}) => {
         look: (looks) => {
             sigma.setSetting('labelColor', { color: looks.ink });
             sigma.setSetting('labelFont', looks.font);
+            sigma.setSetting('labelRenderedSizeThreshold', 0);
+            sigma.setSetting('defaultDrawNodeHover', hoverOf(looks));
             sigma.setSetting('nodeReducer', (node, data) => {
                 const look = looks.node(node);
+                const grown = look.selected ? 1.5 : look.raised ? 1.25 : 1;
                 return {
                     ...data,
                     color: look.color,
-                    forceLabel: look.label,
+                    forceLabel: look.label === 'always',
                     hidden: look.hidden,
-                    size: look.selected && typeof data.size === 'number' ? data.size * 1.5 : data.size,
+                    label: look.label === 'never' ? null : data.label,
+                    size: typeof data.size === 'number' ? data.size * grown : data.size,
                     zIndex: look.selected ? 2 : look.raised ? 1 : 0,
                 };
             });
@@ -127,6 +158,13 @@ export const sigmaDriver = (sigma, options = {}) => {
                 camera.setState(to);
             }
         },
+        stop: () => {
+            sized?.disconnect();
+            for (const type of held) {
+                container.removeEventListener(type, hold, { capture: true });
+            }
+            container.style.touchAction = touchAction;
+        },
         zoomBy: (direction, animate) => {
             const ratio = camera.getState().ratio * (direction > 0 ? 1 / ZOOM : ZOOM);
             if (animate) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, or a driver of your own.",
-  "version": "0.118.0",
+  "version": "0.119.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.118.0"
+    "@fusion.dev/helix-core": "0.119.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.118.0",
-    "@fusion.dev/helix-testing": "0.118.0",
+    "@fusion.dev/helix-headless": "0.119.0",
+    "@fusion.dev/helix-testing": "0.119.0",
     "@types/bun": "^1.3.0",
     "graphology": "^0.26.0",
     "graphology-layout-forceatlas2": "^0.10.1",