@fusion.dev/helix-graph 0.213.0 → 0.215.0

package/dist/sigma/sigma-driver.js

@@ -1,81 +1,23 @@
-import { isRtl } from '@fusion.dev/helix-core';
+import { rgbOf } from '../connect-graph/looks.js';
 import { pixelsOf } from '../connect-graph/sizes.js';
-import { chromeOver, clearOf, ease, gesturesHeld, groupsOver, nameStart, signalsOver, } from '../overlay/overlay.js';
-import { HelixEdgeProgram } from './edge-program.js';
-import { EMPHASES, HelixNodeProgram, MATERIALS, SHAPES } from './node-program.js';
-const SETTINGS = [
-    'defaultDrawNodeHover',
-    'defaultDrawNodeLabel',
-    'defaultEdgeType',
-    'edgeProgramClasses',
-    'edgeReducer',
-    'enableCameraPanning',
-    'enableCameraZooming',
-    'labelColor',
-    'labelFont',
-    'labelGridCellSize',
-    'labelRenderedSizeThreshold',
-    'labelSize',
-    'minEdgeThickness',
-    'nodeProgramClasses',
-    'nodeReducer',
-];
+import { ease, gesturesHeld, groupsOver, namesOver, signalsOver, } from '../overlay/overlay.js';
+import { SPREAD } from './edge-program.js';
+import { DIAMOND, EMPHASES, MATERIALS, SHAPES } from './node-program.js';
+import { reducersOf } from './sigma-options.js';
+const SETTINGS = ['enableCameraPanning', 'enableCameraZooming'];
 const STEP = 250;
 const ZOOM = 1.5;
 const SAMPLE = 250;
 const STILL = 0.004;
 const HELD = 2;
 const IDLE = 2000;
-const hoverOf = (looks, rightToLeft) => (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 = rightToLeft() ? data.x - data.size - 2 - width : 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.textAlign = 'left';
-    context.fillText(data.label, x, data.y + size / 3);
-};
 const GROW = 300;
-const labelOf = (looks, claim, start) => (context, data, settings) => {
-    if (!data.label) {
-        return;
-    }
-    const strong = data.strong === true;
-    const size = strong ? settings.labelSize : settings.labelSize - 1;
-    context.font = `${strong ? 600 : 500} ${size}px ${settings.labelFont}`;
-    const width = context.measureText(data.label).width;
-    const y = data.y + size / 3;
-    const boxAt = (from) => ({
-        bottom: y + 4,
-        left: from - 2,
-        right: from + width + 2,
-        top: y - size,
-    });
-    const x = start({ radius: data.size, x: data.x }, width, boxAt);
-    const box = boxAt(x);
-    if (!claim(box, data.forceLabel === true)) {
-        return;
-    }
-    context.lineJoin = 'round';
-    context.lineWidth = 3;
-    context.strokeStyle = looks.ground;
-    context.textAlign = 'left';
-    context.strokeText(data.label, x, y);
-    context.fillStyle = strong ? looks.ink : looks.quiet;
-    context.fillText(data.label, x, y);
+const faded = (color, opacity) => {
+    const [red, green, blue] = rgbOf(color);
+    return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
 };
+const devicePixels = () => typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
+const cellOf = (labels) => (labels === 'all' ? 8 : 130);
 const HUB = 6.5;
 const positionsOf = (graph) => {
     const positions = new Map();
@@ -84,16 +26,47 @@ const positionsOf = (graph) => {
     });
     return positions;
 };
+export const namedOf = (graph, looks, labels, hovered, onScreen) => {
+    const asked = [];
+    graph.forEachNode((id, attributes) => {
+        const look = looks.node(id);
+        const size = Number(attributes.size);
+        const must = look.label === 'always' || id === hovered || look.keyed === true;
+        const named = must ||
+            (look.label === 'room' &&
+                (look.raised || labels === 'all' || (labels === 'hubs' && size >= HUB)));
+        const name = attributes.label;
+        if (!named || typeof name !== 'string' || name === '') {
+            return;
+        }
+        const at = onScreen(id);
+        if (at) {
+            asked.push({ id, must, name, size, strong: must || look.raised, x: at.x, y: at.y });
+        }
+    });
+    asked.sort((one, other) => Number(other.must) - Number(one.must) || other.size - one.size);
+    const cell = cellOf(labels);
+    const cells = new Set();
+    return asked.flatMap(({ id, must, name, strong, x, y }) => {
+        const at = `${Math.floor(x / cell)}:${Math.floor(y / cell)}`;
+        if (!must) {
+            if (cells.has(at)) {
+                return [];
+            }
+            cells.add(at);
+        }
+        return [{ id, must, name, strong }];
+    });
+};
 export const sigmaDriver = (sigma, options = {}) => {
+    const reducers = reducersOf(sigma);
+    if (!reducers) {
+        throw new TypeError('sigmaDriver: make the renderer with sigmaOptions(), as new Sigma(graph, box, sigmaOptions()). Sigma 4 takes its programs only when it is made.');
+    }
     const graph = sigma.getGraph();
     const container = sigma.getContainer();
     const camera = sigma.getCamera();
     const before = new Map(SETTINGS.map((name) => [name, sigma.getSetting(name)]));
-    const programs = before.get('nodeProgramClasses');
-    sigma.setSetting('nodeProgramClasses', { ...programs, helix: HelixNodeProgram });
-    const edgePrograms = before.get('edgeProgramClasses');
-    sigma.setSetting('edgeProgramClasses', { ...edgePrograms, helix: HelixEdgeProgram });
-    sigma.setSetting('defaultEdgeType', 'helix');
     const sized = typeof ResizeObserver === 'function'
         ? new ResizeObserver(() => {
             sigma.resize(true);
@@ -122,32 +95,36 @@ export const sigmaDriver = (sigma, options = {}) => {
     sigma.on('enterNode', enter);
     sigma.on('leaveNode', leave);
     const naming = options.labels ?? 'hover';
-    let taken = [];
-    const claim = (box, must) => {
-        const free = clearOf(box, taken);
-        if (free || must) {
-            taken.push(box);
-        }
-        return free || must;
-    };
-    let rightToLeft = false;
-    const clear = () => {
-        taken = chromeOver(container);
-        rightToLeft = isRtl(container);
-    };
-    sigma.on('beforeRender', clear);
     const held = gesturesHeld(container);
     const onScreen = (id) => {
         const data = sigma.getNodeDisplayData(id);
-        if (!data || data.hidden) {
+        if (!data || data.visibility === 'hidden') {
             return undefined;
         }
         const at = sigma.framedGraphToViewport(data);
         return { radius: sigma.scaleSize(data.size), x: at.x, y: at.y };
     };
     const signals = signalsOver(container, onScreen);
-    const groups = groupsOver(container, onScreen, () => taken);
-    sigma.on('afterRender', groups.draw);
+    const names = namesOver(container, onScreen);
+    let looks;
+    const drawNames = () => {
+        if (looks) {
+            names.draw(looks, namedOf(graph, looks, naming, hovered, onScreen));
+        }
+    };
+    const groups = groupsOver(container, onScreen, () => names.boxes());
+    const redraw = () => {
+        drawNames();
+        groups.draw();
+    };
+    sigma.on('afterRender', redraw);
+    const ringed = new Set();
+    const rezoomed = () => {
+        if (ringed.size > 0) {
+            sigma.refresh({ partialGraph: { nodes: [...ringed].filter((id) => graph.hasNode(id)) } });
+        }
+    };
+    camera.on('updated', rezoomed);
     let gliding = 0;
     const glide = (sizes, moves) => {
         cancelAnimationFrame(gliding);
@@ -242,58 +219,84 @@ export const sigmaDriver = (sigma, options = {}) => {
                 groups.set(next);
             }
         },
-        look: (looks) => {
-            signals.look(looks);
-            groups.look(looks);
-            sigma.setSetting('labelColor', { color: looks.ink });
-            sigma.setSetting('labelSize', 13);
-            sigma.setSetting('minEdgeThickness', 0.8);
-            sigma.setSetting('labelFont', looks.font);
-            sigma.setSetting('labelRenderedSizeThreshold', 0);
-            sigma.setSetting('labelGridCellSize', naming === 'all' ? 8 : 130);
-            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim, (at, width, box) => nameStart(at, width, box, taken, container.clientWidth, rightToLeft)));
-            sigma.setSetting('defaultDrawNodeHover', hoverOf(looks, () => rightToLeft));
-            sigma.setSetting('nodeReducer', (node, data) => {
-                const look = looks.node(node);
+        look: (next) => {
+            looks = next;
+            signals.look(next);
+            groups.look(next);
+            reducers.node = (node, attributes) => {
+                const look = next.node(node);
+                const density = devicePixels();
+                const shape = look.shape ?? options.shape ?? 'circle';
+                const material = look.material ?? options.material ?? 'flat';
                 const grown = look.selected ? 1.5 : look.raised ? 1.25 : 1;
-                const named = look.label === 'always' ||
-                    (look.label === 'room' &&
-                        (look.raised ||
-                            naming === 'all' ||
-                            (naming === 'hubs' && typeof data.size === 'number' && data.size >= HUB)));
+                const size = Number(attributes.size) * grown;
+                const radius = sigma.scaleSize(size) * density;
+                const glow = look.glow > 0
+                    ? {
+                        backdropBorderColor: faded(look.color, 0.8 * look.glow),
+                        backdropBorderWidth: Math.max(radius * 0.14, 1.5 * density),
+                        backdropColor: next.ground,
+                        backdropPadding: radius * 0.32 + Math.max(radius * 0.07, 0.75 * density),
+                        backdropShadowBlur: radius * 2,
+                        backdropShadowColor: faded(look.color, 0.6 * look.glow),
+                        backdropVisibility: 'visible',
+                    }
+                    : material === 'mark'
+                        ? {
+                            backdropBorderWidth: 0,
+                            backdropColor: faded(look.color, 0.22),
+                            backdropPadding: radius * 0.4,
+                            backdropShadowBlur: radius * 0.9,
+                            backdropShadowColor: faded(look.color, 0.3),
+                            backdropVisibility: 'visible',
+                        }
+                        : { backdropVisibility: 'hidden' };
+                const keyed = look.keyed === true
+                    ? {
+                        backdropBorderColor: next.ink,
+                        backdropBorderWidth: 2 * density,
+                        backdropColor: next.ground,
+                        backdropPadding: Math.max(radius * 0.32, 3 * density),
+                        backdropVisibility: 'visible',
+                    }
+                    : {};
+                if (glow.backdropVisibility === 'visible' || look.keyed === true) {
+                    ringed.add(node);
+                }
+                else {
+                    ringed.delete(node);
+                }
                 return {
-                    ...data,
+                    ...glow,
+                    ...keyed,
+                    backdropArea: 'node',
                     color: look.color,
-                    emphasisCode: EMPHASES[look.emphasis ?? options.emphasis ?? 'solid'],
-                    forceLabel: look.label === 'always',
+                    emphasisCode: shape === 'ring'
+                        ? EMPHASES.outlined
+                        : EMPHASES[look.emphasis ?? options.emphasis ?? 'solid'],
                     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'],
-                    size: typeof data.size === 'number' ? data.size * grown : data.size,
-                    strong: look.selected || look.raised,
-                    type: 'helix',
+                    materialCode: MATERIALS[material],
+                    shape: SHAPES[shape],
+                    size: shape === 'diamond' ? size * DIAMOND : size,
+                    visibility: look.hidden ? 'hidden' : 'visible',
                     zIndex: look.selected ? 2 : look.raised ? 1 : 0,
                 };
-            });
-            sigma.setSetting('edgeReducer', (_edge, data) => {
-                const look = looks.link(String(data.from), String(data.to));
-                const near = hovered ?? looks.keyed;
-                const lit = near !== undefined && (data.from === near || data.to === near);
+            };
+            reducers.edge = (_edge, attributes) => {
+                const look = next.link(String(attributes.from), String(attributes.to));
+                const near = hovered ?? next.keyed;
+                const lit = near !== undefined && (attributes.from === near || attributes.to === near);
                 const strong = look.raised || lit;
                 return {
-                    ...data,
-                    color: lit ? looks.node(near).color : look.color,
+                    color: lit ? next.node(near).color : look.color,
+                    depth: strong ? 'topEdges' : 'edges',
                     glow: strong ? 1 : 0,
-                    hidden: look.hidden,
-                    size: strong ? 1.3 : 0.8,
-                    strong,
-                    type: 'helix',
+                    head: strong && next.node(String(attributes.to)).glow === 0 ? 'arrow' : 'none',
+                    size: strong ? 2.6 * SPREAD : 1.6,
+                    visibility: look.hidden ? 'hidden' : 'visible',
                     zIndex: strong ? 1 : 0,
                 };
-            });
+            };
             sigma.refresh();
         },
         onPress: (press) => {
@@ -320,19 +323,23 @@ export const sigmaDriver = (sigma, options = {}) => {
             signals.signal(from, to, colors, animate);
         },
         stop: () => {
-            sigma.off('afterRender', groups.draw);
-            sigma.off('beforeRender', clear);
+            sigma.off('afterRender', redraw);
+            camera.off('updated', rezoomed);
+            names.stop();
             groups.stop();
             signals.stop();
             sigma.off('enterNode', enter);
             sigma.off('leaveNode', leave);
             cancelAnimationFrame(gliding);
             container.style.cursor = cursor;
+            reducers.edge = undefined;
+            reducers.node = undefined;
             for (const [name, value] of before) {
-                sigma.setSetting(name, value);
+                sigma.setSetting(name, value !== false);
             }
             sized?.disconnect();
             held.stop();
+            sigma.refresh();
         },
         update: (changes, animate) => {
             for (const id of changes.removeNodes) {

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

@@ -0,0 +1,72 @@
+/** What a reducer adds to a note's or a link's display data, by its key and its attributes. */
+export type Reduce = (key: string, attributes: Record<string, unknown>) => Record<string, unknown>;
+/** The reducers a driver puts in place, which the renderer's own call through to. */
+export interface Reducers {
+    edge?: Reduce | undefined;
+    node?: Reduce | undefined;
+}
+/** The reducers of a renderer made with `sigmaOptions()`, or nothing for one made without. */
+export declare const reducersOf: (sigma: {
+    getPrimitives(): {
+        nodes?: object | undefined;
+    };
+}) => Reducers | undefined;
+/** What `sigmaOptions` takes. */
+export interface SigmaOptionsOverrides {
+    /** Sigma's settings, over the ones Helix sets. */
+    settings?: Record<string, unknown> | undefined;
+}
+/**
+ * The options to make a Sigma renderer with for `sigmaDriver`: Helix's
+ * programs for the notes and the links, and the reducers the driver draws
+ * them through.
+ *
+ * ```js
+ * const sigma = new Sigma(new Graph(), box, sigmaOptions())
+ * connectGraph(frame, sigmaDriver(sigma, { layout }))
+ * ```
+ *
+ * **Sigma draws no names**: the driver names notes over the drawing, as it
+ * names groups, so a name keeps clear of the frame's controls and of the
+ * names beside it. `settings` are Sigma's own, over the ones set here.
+ */
+export declare const sigmaOptions: (overrides?: SigmaOptionsOverrides) => {
+    readonly edgeReducer: (edge: string, _data: unknown, attributes: Record<string, unknown>) => Record<string, unknown>;
+    readonly nodeReducer: (node: string, _data: unknown, attributes: Record<string, unknown>) => Record<string, unknown>;
+    readonly primitives: {
+        readonly edges: import("sigma/primitives").EdgePrimitives;
+        readonly nodes: import("sigma/primitives").NodePrimitives;
+    };
+    readonly settings: {
+        readonly enableCameraMouseRotation: false;
+        readonly itemSizesReference: 'screen';
+        readonly minEdgeThickness: 1.6;
+        readonly renderEdgeLabels: false;
+        readonly renderLabels: false;
+    };
+    readonly styles: {
+        readonly edges: {
+            readonly depth: 'edges';
+            readonly path: 'straight';
+            readonly size: {
+                readonly attribute: 'size';
+            };
+        };
+        readonly nodes: {
+            readonly depth: 'nodes';
+            readonly label: {
+                readonly attribute: 'label';
+            };
+            readonly labelVisibility: 'hidden';
+            readonly size: {
+                readonly attribute: 'size';
+            };
+            readonly x: {
+                readonly attribute: 'x';
+            };
+            readonly y: {
+                readonly attribute: 'y';
+            };
+        };
+    };
+};

package/dist/sigma/sigma-options.js

@@ -0,0 +1,36 @@
+import { edgePrimitives } from './edge-program.js';
+import { nodePrimitives } from './node-program.js';
+const made = new WeakMap();
+export const reducersOf = (sigma) => {
+    const nodes = sigma.getPrimitives().nodes;
+    return nodes ? made.get(nodes) : undefined;
+};
+export const sigmaOptions = (overrides = {}) => {
+    const nodes = nodePrimitives();
+    const reducers = {};
+    made.set(nodes, reducers);
+    return {
+        edgeReducer: (edge, _data, attributes) => reducers.edge?.(edge, attributes) ?? {},
+        nodeReducer: (node, _data, attributes) => reducers.node?.(node, attributes) ?? {},
+        primitives: { edges: edgePrimitives(), nodes },
+        settings: {
+            enableCameraMouseRotation: false,
+            itemSizesReference: 'screen',
+            minEdgeThickness: 1.6,
+            renderEdgeLabels: false,
+            renderLabels: false,
+            ...overrides.settings,
+        },
+        styles: {
+            edges: { depth: 'edges', path: 'straight', size: { attribute: 'size' } },
+            nodes: {
+                depth: 'nodes',
+                label: { attribute: 'label' },
+                labelVisibility: 'hidden',
+                size: { attribute: 'size' },
+                x: { attribute: 'x' },
+                y: { attribute: 'y' },
+            },
+        },
+    };
+};

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.213.0",
+  "version": "0.215.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -60,12 +60,16 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.213.0"
+    "@fusion.dev/helix-core": "0.215.0"
   },
   "devDependencies": {
-    "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.213.0",
-    "@fusion.dev/helix-testing": "0.213.0",
+    "@cosmos.gl/graph": "^3.5.1",
+    "@fusion.dev/helix-headless": "0.215.0",
+    "@fusion.dev/helix-testing": "0.215.0",
+    "@luma.gl/core": "~9.3.6",
+    "@luma.gl/engine": "~9.3.6",
+    "@luma.gl/shadertools": "~9.3.6",
+    "@luma.gl/webgl": "~9.3.6",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",
@@ -73,7 +77,7 @@
     "graphology-layout-forceatlas2": "^0.10.1",
     "graphology-types": "^0.24.8",
     "meshoptimizer": "^1.3.0",
-    "sigma": "^3.0.3",
+    "sigma": "^4.0.0",
     "three": "^0.186.1"
   },
   "homepage": "https://fusion.dev",
@@ -90,7 +94,7 @@
   "peerDependencies": {
     "@cosmos.gl/graph": "^3.4.0",
     "d3-force-3d": "^3.0.0",
-    "sigma": "^3.0.0",
+    "sigma": "^4.0.0",
     "three": ">=0.160.0 <0.200.0"
   },
   "peerDependenciesMeta": {