@fusion.dev/helix-graph 0.128.0 → 0.128.1

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);
@@ -240,7 +239,7 @@ export const sigmaDriver = (sigma, options = {}) => {
             sigma.setSetting('labelFont', looks.font);
             sigma.setSetting('labelRenderedSizeThreshold', 0);
             sigma.setSetting('labelGridCellSize', 130);
-            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim));
+            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);

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.128.1",
   "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.128.1"
   },
   "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.128.1",
+    "@fusion.dev/helix-testing": "0.128.1",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",