@fusion.dev/helix-graph 0.119.0 → 0.121.0

package/dist/sigma/sigma-driver.js

@@ -1,10 +1,12 @@
+import { ease, gesturesHeld, groupsOver, signalsOver } from '../overlay/overlay.js';
+import { EMPHASES, HelixNodeProgram, MATERIALS, SHAPES } from './node-program.js';
 const STEP = 250;
 const ZOOM = 1.5;
 const SAMPLE = 250;
 const STILL = 0.004;
 const HELD = 2;
 const IDLE = 2000;
-const pixels = (size) => 2 + 2 * Math.sqrt(Math.max(size, 0));
+const pixels = (size) => 1.6 + 1.35 * Math.max(size, 0);
 const hoverOf = (looks) => (context, data, settings) => {
     if (!data.label) {
         return;
@@ -25,6 +27,33 @@ const hoverOf = (looks) => (context, data, settings) => {
     context.fillStyle = looks.ink;
     context.fillText(data.label, x, data.y + size / 3);
 };
+const GROW = 300;
+const labelOf = (looks, claim) => (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 x = data.x + data.size + 4;
+    const y = data.y + size / 3;
+    const box = {
+        bottom: y + 4,
+        left: x - 2,
+        right: x + context.measureText(data.label).width + 2,
+        top: y - size,
+    };
+    if (!claim(box, data.forceLabel === true)) {
+        return;
+    }
+    context.lineJoin = 'round';
+    context.lineWidth = 3;
+    context.strokeStyle = looks.ground;
+    context.strokeText(data.label, x, y);
+    context.fillStyle = strong ? looks.ink : looks.quiet;
+    context.fillText(data.label, x, y);
+};
+const HUB = 6.5;
 const positionsOf = (graph) => {
     const positions = new Map();
     graph.forEachNode((node, attributes) => {
@@ -36,35 +65,8 @@ export const sigmaDriver = (sigma, options = {}) => {
     const graph = sigma.getGraph();
     const container = sigma.getContainer();
     const camera = sigma.getCamera();
-    let mode = 'free';
-    const touchAction = container.style.touchAction;
-    const hold = (event) => {
-        if (mode === 'free') {
-            return;
-        }
-        if (mode === 'off') {
-            event.stopImmediatePropagation();
-            return;
-        }
-        if (event instanceof WheelEvent) {
-            if (!(event.ctrlKey || event.metaKey)) {
-                event.stopImmediatePropagation();
-            }
-            return;
-        }
-        if (typeof TouchEvent !== 'undefined' && event instanceof TouchEvent) {
-            if (event.touches.length < 2) {
-                event.stopImmediatePropagation();
-            }
-            else if (event.type === 'touchstart' && event.cancelable) {
-                event.preventDefault();
-            }
-        }
-    };
-    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown'];
-    for (const type of held) {
-        container.addEventListener(type, hold, { capture: true, passive: false });
-    }
+    const programs = sigma.getSetting('nodeProgramClasses');
+    sigma.setSetting('nodeProgramClasses', { ...programs, helix: HelixNodeProgram });
     const sized = typeof ResizeObserver === 'function'
         ? new ResizeObserver(() => {
             sigma.resize(true);
@@ -72,6 +74,60 @@ export const sigmaDriver = (sigma, options = {}) => {
         })
         : undefined;
     sized?.observe(container);
+    let hovered;
+    const enter = ({ node }) => {
+        hovered = node;
+        sigma.refresh();
+    };
+    const leave = () => {
+        hovered = undefined;
+        sigma.refresh();
+    };
+    sigma.on('enterNode', enter);
+    sigma.on('leaveNode', leave);
+    const naming = options.labels ?? 'hover';
+    let taken = [];
+    const claim = (box, must) => {
+        const free = taken.every((other) => box.right < other.left ||
+            box.left > other.right ||
+            box.bottom < other.top ||
+            box.top > other.bottom);
+        if (free || must) {
+            taken.push(box);
+        }
+        return free || must;
+    };
+    const clear = () => {
+        taken = [];
+    };
+    sigma.on('beforeRender', clear);
+    const held = gesturesHeld(container);
+    const onScreen = (id) => {
+        const data = sigma.getNodeDisplayData(id);
+        if (!data || data.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);
+    sigma.on('afterRender', groups.draw);
+    const grow = (sizes) => {
+        const started = performance.now();
+        const step = (now) => {
+            const along = Math.min((now - started) / GROW, 1);
+            for (const [id, size] of sizes) {
+                if (graph.hasNode(id)) {
+                    graph.setNodeAttribute(id, 'size', size * ease(along));
+                }
+            }
+            if (along < 1) {
+                requestAnimationFrame(step);
+            }
+        };
+        requestAnimationFrame(step);
+    };
     return {
         center: (id, animate) => {
             const at = sigma.getNodeDisplayData(id);
@@ -106,37 +162,83 @@ export const sigmaDriver = (sigma, options = {}) => {
                 }
             }
         },
+        fit: (ids, animate) => {
+            let low = { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY };
+            let high = { x: Number.NEGATIVE_INFINITY, y: Number.NEGATIVE_INFINITY };
+            for (const id of ids) {
+                const at = sigma.getNodeDisplayData(id);
+                if (at) {
+                    low = { x: Math.min(low.x, at.x), y: Math.min(low.y, at.y) };
+                    high = { x: Math.max(high.x, at.x), y: Math.max(high.y, at.y) };
+                }
+            }
+            if (!Number.isFinite(low.x)) {
+                return;
+            }
+            const state = {
+                ratio: Math.min(Math.max(Math.max(high.x - low.x, high.y - low.y) * 2.4, 0.12), 1),
+                x: (low.x + high.x) / 2,
+                y: (low.y + high.y) / 2,
+            };
+            if (animate) {
+                camera.animate(state, { duration: STEP * 2 });
+            }
+            else {
+                camera.setState(state);
+            }
+        },
         gestures: (next) => {
-            mode = next;
-            container.style.touchAction =
-                next === 'free' ? touchAction : next === 'cooperative' ? 'pan-x pan-y' : 'auto';
+            held.set(next);
+        },
+        groups: (next) => {
+            if (options.groupLabels !== false) {
+                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', 130);
+            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim));
             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;
+                const named = look.label === 'always' ||
+                    (look.label === 'room' &&
+                        (look.raised ||
+                            naming === 'all' ||
+                            (naming === 'hubs' && typeof data.size === 'number' && data.size >= HUB)));
                 return {
                     ...data,
                     color: look.color,
+                    emphasisCode: EMPHASES[look.emphasis ?? options.emphasis ?? 'solid'],
                     forceLabel: look.label === 'always',
+                    glow: look.glow,
                     hidden: look.hidden,
-                    label: look.label === 'never' ? null : data.label,
+                    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',
                     zIndex: look.selected ? 2 : look.raised ? 1 : 0,
                 };
             });
             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);
                 return {
                     ...data,
-                    color: look.color,
+                    color: lit ? looks.node(hovered).color : look.color,
                     hidden: look.hidden,
-                    size: look.raised ? 1.5 : 1,
-                    zIndex: look.raised ? 1 : 0,
+                    size: look.raised || lit ? 1.6 : 0.8,
+                    zIndex: look.raised || lit ? 1 : 0,
                 };
             });
             sigma.refresh();
@@ -158,12 +260,67 @@ export const sigmaDriver = (sigma, options = {}) => {
                 camera.setState(to);
             }
         },
+        signal: (from, to, colors, animate) => {
+            signals.signal(from, to, colors, animate);
+        },
         stop: () => {
+            sigma.off('afterRender', groups.draw);
+            sigma.off('beforeRender', clear);
+            groups.stop();
+            signals.stop();
+            sigma.off('enterNode', enter);
+            sigma.off('leaveNode', leave);
+            sigma.setSetting('nodeProgramClasses', programs);
             sized?.disconnect();
-            for (const type of held) {
-                container.removeEventListener(type, hold, { capture: true });
+            held.stop();
+        },
+        update: (changes, animate) => {
+            for (const id of changes.removeNodes) {
+                if (graph.hasNode(id)) {
+                    graph.dropNode(id);
+                }
+            }
+            for (const link of changes.removeLinks) {
+                if (graph.hasEdge(link.source, link.target)) {
+                    graph.dropEdge(link.source, link.target);
+                }
+            }
+            const growing = new Map();
+            for (const node of changes.addNodes) {
+                const size = pixels(node.size);
+                graph.addNode(node.id, {
+                    label: node.label,
+                    size: animate ? 0 : size,
+                    x: node.x,
+                    y: node.y,
+                });
+                if (animate) {
+                    growing.set(node.id, size);
+                }
+            }
+            for (const node of changes.changeNodes) {
+                graph.mergeNodeAttributes(node.id, {
+                    label: node.label,
+                    size: pixels(node.size),
+                    x: node.x,
+                    y: node.y,
+                });
+            }
+            for (const link of changes.addLinks) {
+                if (graph.hasNode(link.source) &&
+                    graph.hasNode(link.target) &&
+                    !graph.hasEdge(link.source, link.target)) {
+                    graph.addEdge(link.source, link.target, {
+                        from: link.source,
+                        label: link.label,
+                        size: 1,
+                        to: link.target,
+                    });
+                }
+            }
+            if (growing.size > 0) {
+                grow(growing);
             }
-            container.style.touchAction = touchAction;
         },
         zoomBy: (direction, animate) => {
             const ratio = camera.getState().ratio * (direction > 0 ? 1 / ZOOM : ZOOM);

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.119.0",
+  "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, or a driver of your own.",
+  "version": "0.121.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -17,6 +17,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./cosmos": {
+      "types": "./dist/cosmos/index.d.ts",
+      "default": "./dist/cosmos/index.js"
+    },
     "./sigma": {
       "types": "./dist/sigma/index.d.ts",
       "default": "./dist/sigma/index.js"
@@ -35,11 +39,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.119.0"
+    "@fusion.dev/helix-core": "0.121.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.119.0",
-    "@fusion.dev/helix-testing": "0.119.0",
+    "@cosmos.gl/graph": "^3.4.2",
+    "@fusion.dev/helix-headless": "0.121.0",
+    "@fusion.dev/helix-testing": "0.121.0",
     "@types/bun": "^1.3.0",
     "graphology": "^0.26.0",
     "graphology-layout-forceatlas2": "^0.10.1",
@@ -48,11 +53,25 @@
   },
   "homepage": "https://fusion.dev",
   "keywords": [
+    "accessibility",
+    "cosmos.gl",
     "graph",
     "network",
     "sigma",
-    "accessibility"
+    "webgl"
   ],
+  "peerDependencies": {
+    "@cosmos.gl/graph": "^3.4.0",
+    "sigma": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@cosmos.gl/graph": {
+      "optional": true
+    },
+    "sigma": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "restricted"
   }