@fusion.dev/helix-graph 0.128.0 → 0.129.0

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

@@ -15,8 +15,9 @@ export type { DrawnLink, DrawnNode, GraphChanges } from './diff.js';
  */
 export interface GraphDriver {
     /**
-     * Draws the graph, replacing whatever was drawn, where each note is placed.
-     * Keep the view where it is: a note added to a graph is no reason to move.
+     * Draws the graph whole, replacing whatever was drawn, where each note is
+     * placed, and frames it: the first drawing, a graph the page replaced with
+     * one that shares no note, or every change for a driver without `update`.
      */
     draw(graph: {
         links: DrawnLink[];

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

@@ -66,6 +66,7 @@ export const connectGraph = (frame, driver, options = {}) => {
                 ?.trim()
                 .replace(/^["']|["']$/g, ''),
             groups: nodes.flatMap((node) => (node.group === undefined ? [] : [node.group])),
+            links: links.length,
             near,
             noteOf: (id) => notes.get(id),
             selected,
@@ -103,6 +104,12 @@ export const connectGraph = (frame, driver, options = {}) => {
         cancelAnimationFrame(pending);
         const nodes = graph.nodes ?? [];
         const ids = new Set(nodes.map((node) => node.id));
+        if (!first &&
+            drawnNodes.size > 0 &&
+            ids.size > 0 &&
+            ![...ids].some((id) => drawnNodes.has(id))) {
+            whole = true;
+        }
         const nextLinks = new Map();
         for (const { label, source, target } of graph.links ?? []) {
             if (source !== target && ids.has(source) && ids.has(target)) {

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

@@ -131,6 +131,8 @@ export declare const looksOf: (options: {
     colors: GraphColors;
     font?: string | undefined;
     groups: readonly string[];
+    /** How many links the graph draws, which sets how far a link at rest steps back. */
+    links?: number | undefined;
     near: ReadonlySet<string>;
     noteOf: (id: string) => NoteFacts | undefined;
     selected: string | undefined;

package/dist/connect-graph/looks.js

@@ -79,6 +79,9 @@ export const looksOf = (options) => {
     };
     const focused = selected !== undefined;
     const hidden = (id) => shown !== undefined && !shown.has(id);
+    const count = options.links ?? 2000;
+    const along = Math.min(Math.max(Math.log(count / 50) / Math.log(2000 / 50), 0), 1);
+    const rest = 0.35 + (0.72 - 0.35) * along;
     return {
         colorOf: own,
         font: options.font || 'sans-serif',
@@ -91,7 +94,7 @@ export const looksOf = (options) => {
                     ? own(selected)
                     : focused
                         ? mixRgb(colors.line, colors.ground, 0.6)
-                        : mixRgb(own(source), colors.ground, 0.72),
+                        : mixRgb(own(source), colors.ground, rest),
                 hidden: hidden(source) || hidden(target),
                 raised: touches,
             };

package/dist/overlay/overlay.d.ts

@@ -38,6 +38,24 @@ export declare const signalsOver: (container: HTMLElement, onScreen: OnScreen) =
     } | undefined, animate: boolean) => void;
     stop: () => void;
 };
+/**
+ * Where the frame's own controls lie over the drawing, in the drawing's
+ * pixels: its zoom buttons, and its list where it opens over the drawing.
+ * Names keep clear of them, since a name under a button can be read by
+ * nobody. Read from the frame the drawing is in, where there is one.
+ */
+export declare const chromeOver: (container: HTMLElement) => Box[];
+/** Whether a box overlaps none of `others`. */
+export declare const clearOf: (box: Box, others: readonly Box[]) => boolean;
+/**
+ * Where a note's name starts, along the line: after the note, or before it
+ * where after it would run under the frame's controls or off the drawing.
+ * `box` gives the name's box for a start.
+ */
+export declare const nameStart: (at: {
+    radius: number;
+    x: number;
+}, width: number, box: (start: number) => Box, avoid: readonly Box[], room: number) => number;
 /** A note to name over the drawing: its name, and whether it is the one the reader is on. */
 export interface Named {
     id: string;

package/dist/overlay/overlay.js

@@ -266,6 +266,40 @@ export const signalsOver = (container, onScreen) => {
         },
     };
 };
+export const chromeOver = (container) => {
+    const frame = container.closest('helix-graph, helix-headless-graph');
+    const parts = frame?.shadowRoot?.querySelectorAll('[part="controls"], [part="panel"]') ?? [];
+    const origin = container.getBoundingClientRect();
+    const boxes = [];
+    for (const part of parts) {
+        const at = part.getBoundingClientRect();
+        if (at.width > 0 && at.height > 0) {
+            boxes.push({
+                bottom: at.bottom - origin.top,
+                left: at.left - origin.left,
+                right: at.right - origin.left,
+                top: at.top - origin.top,
+            });
+        }
+    }
+    return boxes;
+};
+export const clearOf = (box, others) => others.every((other) => box.right < other.left ||
+    box.left > other.right ||
+    box.bottom < other.top ||
+    box.top > other.bottom);
+export const nameStart = (at, width, box, avoid, room) => {
+    const after = at.x + at.radius + 4;
+    const fits = (start) => {
+        const placed = box(start);
+        return placed.left >= 0 && placed.right <= room && clearOf(placed, avoid);
+    };
+    if (fits(after)) {
+        return after;
+    }
+    const before = at.x - at.radius - 4 - width;
+    return fits(before) ? before : after;
+};
 export const namesOver = (container, onScreen) => {
     const canvas = layer(container, 'names');
     let taken = [];
@@ -276,26 +310,24 @@ export const namesOver = (container, onScreen) => {
             if (!context || !looks) {
                 return;
             }
-            taken = [];
+            taken = chromeOver(container);
             for (const { id, name, strong } of named) {
                 const at = onScreen(id);
                 if (!at || looks.node(id).hidden) {
                     continue;
                 }
                 context.font = `${strong ? 600 : 500} ${strong ? 13 : 12}px ${looks.font}`;
-                const x = at.x + at.radius + 4;
+                const width = context.measureText(name).width;
                 const y = at.y + 4;
-                const box = {
+                const boxAt = (start) => ({
                     bottom: y + 4,
-                    left: x - 2,
-                    right: x + context.measureText(name).width + 2,
+                    left: start - 2,
+                    right: start + width + 2,
                     top: y - 13,
-                };
-                const free = taken.every((other) => box.right < other.left ||
-                    box.left > other.right ||
-                    box.bottom < other.top ||
-                    box.top > other.bottom);
-                if (!free && !strong) {
+                });
+                const x = nameStart(at, width, boxAt, taken, container.clientWidth);
+                const box = boxAt(x);
+                if (!clearOf(box, taken) && !strong) {
                     continue;
                 }
                 taken.push(box);

package/dist/sigma/sigma-driver.js

@@ -1,4 +1,4 @@
-import { ease, gesturesHeld, groupsOver, signalsOver } from '../overlay/overlay.js';
+import { chromeOver, clearOf, ease, gesturesHeld, groupsOver, nameStart, signalsOver, } from '../overlay/overlay.js';
 import { EMPHASES, HelixNodeProgram, MATERIALS, SHAPES } from './node-program.js';
 const SETTINGS = [
     'defaultDrawNodeHover',
@@ -43,21 +43,23 @@ const hoverOf = (looks) => (context, data, settings) => {
     context.fillText(data.label, x, data.y + size / 3);
 };
 const GROW = 300;
-const labelOf = (looks, claim) => (context, data, settings) => {
+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 x = data.x + data.size + 4;
+    const width = context.measureText(data.label).width;
     const y = data.y + size / 3;
-    const box = {
+    const boxAt = (from) => ({
         bottom: y + 4,
-        left: x - 2,
-        right: x + context.measureText(data.label).width + 2,
+        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;
     }
@@ -113,17 +115,14 @@ export const sigmaDriver = (sigma, options = {}) => {
     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);
+        const free = clearOf(box, taken);
         if (free || must) {
             taken.push(box);
         }
         return free || must;
     };
     const clear = () => {
-        taken = [];
+        taken = chromeOver(container);
     };
     sigma.on('beforeRender', clear);
     const held = gesturesHeld(container);
@@ -177,6 +176,7 @@ export const sigmaDriver = (sigma, options = {}) => {
         },
         draw: ({ links, nodes }) => {
             graph.clear();
+            camera.setState({ ratio: 1, x: 0.5, y: 0.5 });
             for (const node of nodes) {
                 graph.addNode(node.id, {
                     label: node.label,
@@ -239,8 +239,8 @@ export const sigmaDriver = (sigma, options = {}) => {
             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('labelGridCellSize', naming === 'all' ? 24 : 130);
+            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim, (at, width, box) => nameStart(at, width, box, taken, container.clientWidth)));
             sigma.setSetting('defaultDrawNodeHover', hoverOf(looks));
             sigma.setSetting('nodeReducer', (node, data) => {
                 const look = looks.node(node);
@@ -390,7 +390,7 @@ export const sigmaDriver = (sigma, options = {}) => {
                     const layout = make(graph);
                     layout.start();
                     const limit = options.layoutLimit ?? 10000;
-                    const started = performance.now();
+                    let started = performance.now();
                     let last = positionsOf(graph);
                     let done = false;
                     let moving = false;
@@ -408,7 +408,20 @@ export const sigmaDriver = (sigma, options = {}) => {
                         });
                         placed(positionsOf(graph));
                     };
+                    let paused = false;
                     const timer = setInterval(() => {
+                        if (!container.isConnected) {
+                            if (!paused) {
+                                paused = true;
+                                layout.stop();
+                            }
+                            started += SAMPLE;
+                            return;
+                        }
+                        if (paused) {
+                            paused = false;
+                            layout.start();
+                        }
                         const now = positionsOf(graph);
                         let moved = 0;
                         let low = Number.POSITIVE_INFINITY;

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