@fusion.dev/helix-graph 0.201.1 → 0.203.0

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

@@ -66,7 +66,7 @@ export interface NodeLook {
     /** How strongly it glows, from 0 to 1: the selected note's halo. */
     glow: number;
     /** What it is drawn as made of, where the note says. */
-    material?: 'frosted' | 'glass' | undefined;
+    material?: 'frosted' | 'glass' | 'mark' | undefined;
     /**
      * The note the keys are on in the frame's list or search field, which a
      * renderer marks as it marks the note under the pointer, so a reader moving

package/dist/overlay/overlay.js

@@ -90,7 +90,7 @@ export const ease = (at) => (at < 0.5 ? 2 * at * at : 1 - (-2 * at + 2) ** 2 / 2
 const SAMPLED = 96;
 const nameGroups = (context, groups, looks, at, avoid) => {
     context.font = `650 11px ${looks.font}`;
-    context.letterSpacing = '0.14em';
+    context.letterSpacing = '0.02em';
     context.textAlign = 'center';
     context.textBaseline = 'middle';
     context.shadowColor = looks.ground;
@@ -121,7 +121,7 @@ const nameGroups = (context, groups, looks, at, avoid) => {
         if (spread < 12) {
             continue;
         }
-        const name = group.name.toLocaleUpperCase();
+        const name = group.name;
         const half = context.measureText(name).width / 2 + 4;
         const boxAt = (middle) => ({
             bottom: middle + 9,

package/dist/sigma/edge-program.d.ts

@@ -0,0 +1,87 @@
+import { EdgeProgram, type EdgeProgramType } from 'sigma/rendering';
+import type { EdgeDisplayData, NodeDisplayData, RenderParams } from 'sigma/types';
+/** What the edge program reads off a link, beyond what Sigma gives every link. */
+export interface HelixEdgeData {
+    /** How strongly the link glows, from 0 to 1: a link on the selected note's path. */
+    glow?: number;
+    /** Whether the link is drawn heavy, with an arrowhead, as a link the selection lights is. */
+    strong?: boolean;
+}
+declare const UNIFORMS: readonly ['u_matrix', 'u_zoomRatio', 'u_sizeRatio', 'u_correctionRatio', 'u_pixelRatio', 'u_feather', 'u_minEdgeThickness'];
+/**
+ * Draws a link as a line that reads in its direction, faint where it leaves
+ * a note and full where it arrives, with a glow where the selection lights
+ * it: one quad a link, as Sigma's own rectangle is, widened where it glows.
+ */
+export declare class HelixEdgeLineProgram extends EdgeProgram<(typeof UNIFORMS)[number]> {
+    getDefinition(): {
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: 5126;
+            normalized?: never;
+        } | {
+            name: string;
+            normalized: boolean;
+            size: number;
+            type: 5121;
+        })[];
+        CONSTANT_ATTRIBUTES: {
+            name: string;
+            size: number;
+            type: 5126;
+        }[];
+        CONSTANT_DATA: number[][];
+        FRAGMENT_SHADER_SOURCE: string;
+        METHOD: 4;
+        UNIFORMS: readonly ["u_matrix", "u_zoomRatio", "u_sizeRatio", "u_correctionRatio", "u_pixelRatio", "u_feather", "u_minEdgeThickness"];
+        VERTEX_SHADER_SOURCE: string;
+        VERTICES: number;
+    };
+    processVisibleItem(edgeIndex: number, startIndex: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData & HelixEdgeData): void;
+    setUniforms(params: RenderParams, { gl, uniformLocations, }: {
+        gl: WebGLRenderingContext;
+        uniformLocations: Record<string, WebGLUniformLocation>;
+    }): void;
+}
+declare const HEAD_UNIFORMS: readonly ['u_matrix', 'u_sizeRatio', 'u_correctionRatio', 'u_minEdgeThickness', 'u_lengthToThicknessRatio', 'u_widenessToThicknessRatio'];
+/**
+ * An arrowhead on a strong link only, at the note it arrives at: Sigma's own
+ * head, one triangle a link, drawn transparent where the link is not strong.
+ * Every link already reads in its direction by its gradient, and a head on
+ * each of a graph's thousands of links is a field of chevrons.
+ */
+export declare class HelixArrowHeadProgram extends EdgeProgram<(typeof HEAD_UNIFORMS)[number]> {
+    getDefinition(): {
+        ATTRIBUTES: ({
+            normalized?: never;
+            name: string;
+            size: number;
+            type: 5126;
+        } | {
+            name: string;
+            normalized: boolean;
+            size: number;
+            type: 5121;
+        })[];
+        CONSTANT_ATTRIBUTES: {
+            name: string;
+            size: number;
+            type: 5126;
+        }[];
+        CONSTANT_DATA: number[][];
+        FRAGMENT_SHADER_SOURCE: string;
+        METHOD: 4;
+        UNIFORMS: readonly ["u_matrix", "u_sizeRatio", "u_correctionRatio", "u_minEdgeThickness", "u_lengthToThicknessRatio", "u_widenessToThicknessRatio"];
+        VERTEX_SHADER_SOURCE: string;
+        VERTICES: number;
+    };
+    processVisibleItem(edgeIndex: number, startIndex: number, sourceData: NodeDisplayData, targetData: NodeDisplayData, data: EdgeDisplayData & HelixEdgeData): void;
+    setUniforms(params: RenderParams, { gl, uniformLocations, }: {
+        gl: WebGLRenderingContext;
+        uniformLocations: Record<string, WebGLUniformLocation>;
+    }): void;
+}
+/** The line and its head, as one program a link is drawn with. */
+export declare const HelixEdgeProgram: EdgeProgramType;
+export {};

package/dist/sigma/edge-program.js

@@ -0,0 +1,316 @@
+import { createEdgeCompoundProgram, EdgeProgram } from 'sigma/rendering';
+import { floatColor } from 'sigma/utils';
+const REACH = 4;
+const NONE = 'rgba(0, 0, 0, 0)';
+const VERTEX = `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute vec2 a_normal;
+attribute float a_normalCoef;
+attribute vec2 a_positionStart;
+attribute vec2 a_positionEnd;
+attribute float a_positionCoef;
+attribute float a_glow;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_zoomRatio;
+uniform float u_pixelRatio;
+uniform float u_correctionRatio;
+uniform float u_minEdgeThickness;
+uniform float u_feather;
+
+varying vec4 v_color;
+varying vec2 v_normal;
+varying float v_thickness;
+varying float v_feather;
+varying float v_along;
+varying float v_glow;
+varying float v_spread;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  float minThickness = u_minEdgeThickness;
+
+  vec2 normal = a_normal * a_normalCoef;
+  vec2 position = a_positionStart * (1.0 - a_positionCoef) + a_positionEnd * a_positionCoef;
+
+  float normalLength = length(normal);
+  vec2 unitNormal = normal / normalLength;
+
+  /* At least the minimum thickness on screen, in the WebGL referential, as
+     Sigma's own rectangle does it. */
+  float pixelsThickness = max(normalLength, minThickness * u_sizeRatio);
+  float webGLThickness = pixelsThickness * u_correctionRatio / u_sizeRatio;
+
+  /* The quad reaches past the line by the room its glow needs, and only
+     where it glows: a resting link's quad is the line's own width. */
+  float spread = 1.0 + a_glow * ${REACH.toFixed(1)};
+  gl_Position = vec4((u_matrix * vec3(position + unitNormal * webGLThickness * spread, 1)).xy, 0, 1);
+
+  v_thickness = webGLThickness / u_zoomRatio;
+  v_normal = unitNormal;
+  v_feather = u_feather * u_correctionRatio / u_zoomRatio / u_pixelRatio * 2.0;
+  v_along = a_positionCoef;
+  v_glow = a_glow;
+  v_spread = spread;
+
+  #ifdef PICKING_MODE
+  v_color = a_id;
+  #else
+  v_color = a_color;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+const FRAGMENT = `
+precision mediump float;
+
+varying vec4 v_color;
+varying vec2 v_normal;
+varying float v_thickness;
+varying float v_feather;
+varying float v_along;
+varying float v_glow;
+varying float v_spread;
+
+void main(void) {
+  #ifdef PICKING_MODE
+  gl_FragColor = v_color;
+  #else
+  /* Across the quad, from the line's middle out: the normal interpolates
+     through zero at the middle, so its length is the distance in half-widths
+     of the quad, and the quad is the line widened by its spread. */
+  float dist = length(v_normal) * v_spread * v_thickness;
+  float line = 1.0 - smoothstep(v_thickness - v_feather, v_thickness, dist);
+
+  /* The glow, outside the line: a soft light falling away from its edge, in
+     the link's own color, as a note's halo falls away from its rim. */
+  float past = max(dist - v_thickness, 0.0) / max(v_thickness * ${REACH.toFixed(1)}, 0.0001);
+  float halo = v_glow * (1.0 - line) * exp(-past * 3.2) * (1.0 - smoothstep(0.7, 1.0, past)) * 0.55;
+
+  /* Faint where the link leaves and full where it arrives, so the direction
+     reads along every link, and the one lit by the selection as a path. */
+  float along = mix(0.4, 1.0, smoothstep(0.0, 1.0, v_along));
+
+  float alpha = (line + halo) * along * v_color.a;
+  /* Premultiplied, as Sigma blends. */
+  gl_FragColor = vec4(v_color.rgb * alpha, alpha);
+  #endif
+}
+`;
+const { FLOAT, UNSIGNED_BYTE } = WebGLRenderingContext;
+const UNIFORMS = [
+    'u_matrix',
+    'u_zoomRatio',
+    'u_sizeRatio',
+    'u_correctionRatio',
+    'u_pixelRatio',
+    'u_feather',
+    'u_minEdgeThickness',
+];
+export class HelixEdgeLineProgram extends EdgeProgram {
+    getDefinition() {
+        return {
+            ATTRIBUTES: [
+                { name: 'a_positionStart', size: 2, type: FLOAT },
+                { name: 'a_positionEnd', size: 2, type: FLOAT },
+                { name: 'a_normal', size: 2, type: FLOAT },
+                { name: 'a_color', normalized: true, size: 4, type: UNSIGNED_BYTE },
+                { name: 'a_id', normalized: true, size: 4, type: UNSIGNED_BYTE },
+                { name: 'a_glow', size: 1, type: FLOAT },
+            ],
+            CONSTANT_ATTRIBUTES: [
+                { name: 'a_positionCoef', size: 1, type: FLOAT },
+                { name: 'a_normalCoef', size: 1, type: FLOAT },
+            ],
+            CONSTANT_DATA: [
+                [0, 1],
+                [0, -1],
+                [1, 1],
+                [1, 1],
+                [0, -1],
+                [1, -1],
+            ],
+            FRAGMENT_SHADER_SOURCE: FRAGMENT,
+            METHOD: WebGLRenderingContext.TRIANGLES,
+            UNIFORMS,
+            VERTEX_SHADER_SOURCE: VERTEX,
+            VERTICES: 6,
+        };
+    }
+    processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
+        const thickness = data.size || 1;
+        const dx = targetData.x - sourceData.x;
+        const dy = targetData.y - sourceData.y;
+        let len = dx * dx + dy * dy;
+        let n1 = 0;
+        let n2 = 0;
+        if (len) {
+            len = 1 / Math.sqrt(len);
+            n1 = -dy * len * thickness;
+            n2 = dx * len * thickness;
+        }
+        const array = this.array;
+        let at = startIndex;
+        array[at++] = sourceData.x;
+        array[at++] = sourceData.y;
+        array[at++] = targetData.x;
+        array[at++] = targetData.y;
+        array[at++] = n1;
+        array[at++] = n2;
+        array[at++] = floatColor(data.color);
+        array[at++] = edgeIndex;
+        array[at] = data.glow ?? 0;
+    }
+    setUniforms(params, { gl, uniformLocations, }) {
+        gl.uniformMatrix3fv(uniformLocations.u_matrix, false, params.matrix);
+        gl.uniform1f(uniformLocations.u_zoomRatio, params.zoomRatio);
+        gl.uniform1f(uniformLocations.u_sizeRatio, params.sizeRatio);
+        gl.uniform1f(uniformLocations.u_correctionRatio, params.correctionRatio);
+        gl.uniform1f(uniformLocations.u_pixelRatio, params.pixelRatio);
+        gl.uniform1f(uniformLocations.u_feather, params.antiAliasingFeather);
+        gl.uniform1f(uniformLocations.u_minEdgeThickness, params.minEdgeThickness);
+    }
+}
+const HEAD_VERTEX = `
+attribute vec2 a_position;
+attribute vec2 a_normal;
+attribute float a_radius;
+attribute vec3 a_barycentric;
+attribute vec4 a_id;
+attribute vec4 a_color;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_correctionRatio;
+uniform float u_minEdgeThickness;
+uniform float u_lengthToThicknessRatio;
+uniform float u_widenessToThicknessRatio;
+
+varying vec4 v_color;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  float minThickness = u_minEdgeThickness;
+
+  float normalLength = length(a_normal);
+  vec2 unitNormal = a_normal / normalLength;
+
+  /* As Sigma's own arrowhead: the thickness on screen, the note's radius,
+     and the head's length and width from the thickness. */
+  float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);
+  float webGLThickness = pixelsThickness * u_correctionRatio;
+  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;
+  float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;
+  float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;
+
+  float da = a_barycentric.x;
+  float db = a_barycentric.y;
+  float dc = a_barycentric.z;
+
+  vec2 delta = vec2(
+      da * (webGLNodeRadius * unitNormal.y)
+    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)
+    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),
+
+      da * (-webGLNodeRadius * unitNormal.x)
+    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)
+    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)
+  );
+
+  gl_Position = vec4((u_matrix * vec3(a_position + delta, 1)).xy, 0, 1);
+
+  #ifdef PICKING_MODE
+  v_color = a_id;
+  #else
+  v_color = a_color;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+const HEAD_FRAGMENT = `
+precision mediump float;
+
+varying vec4 v_color;
+
+void main(void) {
+  #ifdef PICKING_MODE
+  gl_FragColor = v_color;
+  #else
+  /* Premultiplied, as Sigma blends. */
+  gl_FragColor = vec4(v_color.rgb * v_color.a, v_color.a);
+  #endif
+}
+`;
+const HEAD_UNIFORMS = [
+    'u_matrix',
+    'u_sizeRatio',
+    'u_correctionRatio',
+    'u_minEdgeThickness',
+    'u_lengthToThicknessRatio',
+    'u_widenessToThicknessRatio',
+];
+const HEAD = { length: 2.5, wideness: 2 };
+export class HelixArrowHeadProgram extends EdgeProgram {
+    getDefinition() {
+        return {
+            ATTRIBUTES: [
+                { name: 'a_position', size: 2, type: FLOAT },
+                { name: 'a_normal', size: 2, type: FLOAT },
+                { name: 'a_radius', size: 1, type: FLOAT },
+                { name: 'a_color', normalized: true, size: 4, type: UNSIGNED_BYTE },
+                { name: 'a_id', normalized: true, size: 4, type: UNSIGNED_BYTE },
+            ],
+            CONSTANT_ATTRIBUTES: [{ name: 'a_barycentric', size: 3, type: FLOAT }],
+            CONSTANT_DATA: [
+                [1, 0, 0],
+                [0, 1, 0],
+                [0, 0, 1],
+            ],
+            FRAGMENT_SHADER_SOURCE: HEAD_FRAGMENT,
+            METHOD: WebGLRenderingContext.TRIANGLES,
+            UNIFORMS: HEAD_UNIFORMS,
+            VERTEX_SHADER_SOURCE: HEAD_VERTEX,
+            VERTICES: 3,
+        };
+    }
+    processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
+        const thickness = data.size || 1;
+        const dx = targetData.x - sourceData.x;
+        const dy = targetData.y - sourceData.y;
+        let len = dx * dx + dy * dy;
+        let n1 = 0;
+        let n2 = 0;
+        if (len) {
+            len = 1 / Math.sqrt(len);
+            n1 = -dy * len * thickness;
+            n2 = dx * len * thickness;
+        }
+        const array = this.array;
+        let at = startIndex;
+        array[at++] = targetData.x;
+        array[at++] = targetData.y;
+        array[at++] = -n1;
+        array[at++] = -n2;
+        array[at++] = targetData.size || 1;
+        array[at++] = floatColor(data.strong ? data.color : NONE);
+        array[at] = edgeIndex;
+    }
+    setUniforms(params, { gl, uniformLocations, }) {
+        gl.uniformMatrix3fv(uniformLocations.u_matrix, false, params.matrix);
+        gl.uniform1f(uniformLocations.u_sizeRatio, params.sizeRatio);
+        gl.uniform1f(uniformLocations.u_correctionRatio, params.correctionRatio);
+        gl.uniform1f(uniformLocations.u_minEdgeThickness, params.minEdgeThickness);
+        gl.uniform1f(uniformLocations.u_lengthToThicknessRatio, HEAD.length);
+        gl.uniform1f(uniformLocations.u_widenessToThicknessRatio, HEAD.wideness);
+    }
+}
+export const HelixEdgeProgram = createEdgeCompoundProgram([
+    HelixEdgeLineProgram,
+    HelixArrowHeadProgram,
+]);

package/dist/sigma/index.d.ts

@@ -1 +1,2 @@
+export { type HelixEdgeData, HelixEdgeProgram } from './edge-program.js';
 export { type SigmaCamera, type SigmaDriverOptions, type SigmaGraph, type SigmaLayout, type SigmaRenderer, sigmaDriver, } from './sigma-driver.js';

package/dist/sigma/index.js

@@ -1 +1,2 @@
+export { HelixEdgeProgram } from './edge-program.js';
 export { sigmaDriver, } from './sigma-driver.js';

package/dist/sigma/node-program.d.ts

@@ -18,6 +18,7 @@ export declare const MATERIALS: {
     readonly flat: 0;
     readonly frosted: 2;
     readonly glass: 1;
+    readonly mark: 3;
 };
 /** What the node program reads off a note, beyond what Sigma gives every note. */
 export interface HelixNodeData {

package/dist/sigma/node-program.js

@@ -2,8 +2,8 @@ import { NodeProgram } from 'sigma/rendering';
 import { floatColor } from 'sigma/utils';
 export const SHAPES = { circle: 0, diamond: 2, ring: 3, square: 1 };
 export const EMPHASES = { outlined: 1, solid: 0, subtle: 2 };
-export const MATERIALS = { flat: 0, frosted: 2, glass: 1 };
-const REACH = 2.6;
+export const MATERIALS = { flat: 0, frosted: 2, glass: 1, mark: 3 };
+const REACH = 3.4;
 const VERTEX = `
 attribute vec4 a_id;
 attribute vec4 a_color;
@@ -104,6 +104,11 @@ void main(void) {
     color = mix(color, vec3(1.0), highlight * mix(0.25, 0.6, drawn));
     color = mix(color, vec3(1.0), rim * 0.22 * drawn);
     alpha = 0.94;
+  } else if (v_material > 2.5) {
+    /* Mark: a flat dot of its color, as a marker on a table is. No fall of
+       light and no highlight; what says it is a mark is the ring and the glow
+       drawn around it below. */
+    alpha = 1.0;
   } else if (v_material > 1.5) {
     /* Frosted: a milky body, a soft fall of light, and no sharp highlight. */
     color = mix(color * mix(0.86, 1.06, lit), vec3(1.0), 0.16);
@@ -123,8 +128,18 @@ void main(void) {
      soft light falling away beyond it, both in the note's own color. */
   float reach = ${(REACH - 1).toFixed(2)};
   float ring = 1.0 - smoothstep(0.0, 0.07 + aa, abs(d - 0.32));
-  float falloff = exp(-d * 2.4) * (1.0 - smoothstep(reach * 0.8, reach, d));
-  float halo = v_glow * step(0.0, d) * clamp(ring * 0.95 + falloff * 0.55, 0.0, 1.0) * v_color.a;
+  /* The light falls away more slowly and further than it did, so the
+     selected note sits in a bloom rather than wearing a ring: the halo the
+     aura gives the stars its pointer gathers. */
+  float falloff = exp(-d * 1.7) * (1.0 - smoothstep(reach * 0.8, reach, d));
+  float halo = v_glow * step(0.0, d) * clamp(ring * 0.8 + falloff * 0.85, 0.0, 1.0) * v_color.a;
+  /* A mark's own halo, selected or not: a band of its color at a fifth just
+     outside the dot, and a soft glow beyond, the way a marker on a table
+     carries a ring of its color and a light around it. */
+  float band = (1.0 - smoothstep(0.34, 0.42, d)) * 0.22;
+  float light = exp(-d * 2.0) * (1.0 - smoothstep(reach * 0.8, reach, d)) * 0.3;
+  float mark = v_material > 2.5 ? step(0.0, d) * (band + light) * v_color.a : 0.0;
+  halo = clamp(halo + mark, 0.0, 1.0);
   /* Premultiplied, as Sigma blends: the body over its glow. */
   gl_FragColor = vec4(color * body + v_color.rgb * halo * (1.0 - body), body + halo * (1.0 - body));
   #endif

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

@@ -92,7 +92,7 @@ export interface SigmaRenderer<G extends SigmaGraph = SigmaGraph> {
     };
 }
 /** The settings the driver sets, and puts back as they were when it stops. */
-type SigmaSetting = 'defaultDrawNodeHover' | 'defaultDrawNodeLabel' | 'edgeReducer' | 'enableCameraPanning' | 'enableCameraZooming' | 'labelColor' | 'labelFont' | 'labelGridCellSize' | 'labelRenderedSizeThreshold' | 'labelSize' | 'minEdgeThickness' | 'nodeProgramClasses' | 'nodeReducer';
+type SigmaSetting = 'defaultDrawNodeHover' | 'defaultDrawNodeLabel' | 'defaultEdgeType' | 'edgeProgramClasses' | 'edgeReducer' | 'enableCameraPanning' | 'enableCameraZooming' | 'labelColor' | 'labelFont' | 'labelGridCellSize' | 'labelRenderedSizeThreshold' | 'labelSize' | 'minEdgeThickness' | 'nodeProgramClasses' | 'nodeReducer';
 /** A layout that runs over a graphology graph until it is stopped, as ForceAtlas2's worker does. */
 export interface SigmaLayout {
     kill(): void;
@@ -125,8 +125,9 @@ export interface SigmaDriverOptions<G extends SigmaGraph = SigmaGraph> {
     emphasis?: NodeLook['emphasis'];
     /**
      * What a note is drawn as made of where it does not say: `flat` by default,
-     * `glass`, a shaded sphere with a highlight and a lit rim, or `frosted`, a
-     * milky body with a soft fall of light.
+     * `glass`, a shaded sphere with a highlight and a lit rim; `frosted`, a
+     * milky body with a soft fall of light; or `mark`, a flat dot of its color
+     * with a faint ring and a soft glow around it, as a marker on a table is.
      */
     material?: NodeLook['material'] | 'flat';
     /** A note's shape where it does not say: `circle` by default, `square`, `diamond` or `ring`. */

package/dist/sigma/sigma-driver.js

@@ -1,10 +1,13 @@
 import { isRtl } from '@fusion.dev/helix-core';
 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',
@@ -88,6 +91,9 @@ export const sigmaDriver = (sigma, options = {}) => {
     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);
@@ -276,12 +282,16 @@ export const sigmaDriver = (sigma, options = {}) => {
                 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);
+                const strong = look.raised || lit;
                 return {
                     ...data,
                     color: lit ? looks.node(near).color : look.color,
+                    glow: strong ? 1 : 0,
                     hidden: look.hidden,
-                    size: look.raised || lit ? 1.6 : 0.8,
-                    zIndex: look.raised || lit ? 1 : 0,
+                    size: strong ? 1.3 : 0.8,
+                    strong,
+                    type: 'helix',
+                    zIndex: strong ? 1 : 0,
                 };
             });
             sigma.refresh();

package/dist/snapshot/snapshot.js

@@ -174,7 +174,7 @@ export const graphSnapshot = (nodes, links, options = {}) => {
             if (points.length < 2 || spread < 12) {
                 continue;
             }
-            const name = group.toLocaleUpperCase();
+            const name = group;
             const half = (widthOf(name, 11) * 1.14) / 2 + 4;
             const boxAt = (y) => ({
                 bottom: y + 9,
@@ -192,7 +192,7 @@ export const graphSnapshot = (nodes, links, options = {}) => {
             const tinted = members.find((node) => node.tone === undefined) ?? members[0];
             const color = mix(tinted ? own(tinted) : token('foreground-muted'), token('foreground'), 60);
             const fade = selected !== undefined && ownGroup !== group ? 0.3 : 0.92;
-            regions.push(`<text dominant-baseline="middle" fill-opacity="${fade}" font-size="11" font-weight="650" letter-spacing="0.14em" style="fill:${color};stroke:${ground}" text-anchor="middle" x="${short(middle.x)}" y="${short(y)}">${escaped(name)}</text>`);
+            regions.push(`<text dominant-baseline="middle" fill-opacity="${fade}" font-size="11" font-weight="650" letter-spacing="0.02em" style="fill:${color};stroke:${ground}" text-anchor="middle" x="${short(middle.x)}" y="${short(y)}">${escaped(name)}</text>`);
         }
     }
     return (`<div aria-hidden="true" data-helix-graph-snapshot style="inset:0;overflow:hidden;pointer-events:none;position:absolute">` +

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