@fusion.dev/helix-graph 0.214.0 → 0.215.0

package/README.md

@@ -13,7 +13,7 @@ The elements themselves are on the
 
 ```js
 import { connectGraph } from '@fusion.dev/helix-graph'
-import { sigmaDriver } from '@fusion.dev/helix-graph/sigma'
+import { sigmaDriver, sigmaOptions } from '@fusion.dev/helix-graph/sigma'
 import Graph from 'graphology'
 import forceAtlas2 from 'graphology-layout-forceatlas2'
 import FA2Layout from 'graphology-layout-forceatlas2/worker'
@@ -25,7 +25,7 @@ frame.links = links // [{ source, target, label }]
 
 // The box the drawing goes in: a <div> inside the frame, sized by it.
 const box = frame.querySelector('div')
-const sigma = new Sigma(new Graph(), box)
+const sigma = new Sigma(new Graph(), box, sigmaOptions())
 const connection = connectGraph(
   frame,
   sigmaDriver(sigma, {
@@ -408,7 +408,7 @@ connectGraph(frame, isometricDriver(frame.querySelector('div')))
 | Import | What |
 |---|---|
 | `@fusion.dev/helix-graph` | `communitiesOf`, `connectGraph`, `diffGraph`, `fitToStencil`, `graphColorsFrom`, `groupByCommunity`, `linkKey`, `seedPositions`, and the types `ConnectGraphOptions`, `DrawnLink`, `DrawnNode`, `GraphChanges`, `GraphColors`, `GraphConnection`, `GraphDriver`, `GraphGroup`, `GraphLooks`, `GraphPoint`, `GraphReach`, `GraphStencil`, `GraphTone`, `GroupByCommunityOptions`, `LinkLook`, `NodeLook`, `SeedLink`, `SeedNode`, `ShapeField` and `StencilFrame` |
-| `@fusion.dev/helix-graph/sigma` | `sigmaDriver(sigma, options)`, and the types `SigmaDriverOptions`, `SigmaGraph`, `SigmaLayout` and `SigmaRenderer` |
+| `@fusion.dev/helix-graph/sigma` | `sigmaDriver(sigma, options)`, `sigmaOptions(overrides)`, the options to make the renderer with, and the types `HelixEdgeData`, `SigmaDriverOptions`, `SigmaGraph`, `SigmaLayout`, `SigmaOptionsOverrides` and `SigmaRenderer` |
 | `@fusion.dev/helix-graph/cosmos` | `cosmosDriver(graph, box, options)`, and the types `CosmosDriverOptions` and `CosmosGraph` |
 | `@fusion.dev/helix-graph/three` | `threeDriver(box, options)`, and the type `ThreeDriverOptions` |
 | `@fusion.dev/helix-graph/isometric` | `isometricDriver(box, options)`, `ISOMETRIC`, the camera it starts from, and the types `Camera`, `IsometricDriver` and `IsometricDriverOptions` |
@@ -420,8 +420,15 @@ connectGraph(frame, isometricDriver(frame.querySelector('div')))
 driver types its renderer by the calls it makes on it, so a page brings
 whichever version it has, and a spec holds those shapes to the real classes,
 so a renamed method fails a typecheck here before it reaches a page. `@fusion.dev/helix-graph/sigma` imports
-Sigma's rendering module for the program that draws the notes, which is why
-Sigma 3 is a peer dependency.
+Sigma's rendering module for the line and arrowhead the links are drawn with,
+which is why Sigma 4 is a peer dependency.
+
+**Make the renderer with `sigmaOptions()`.** Sigma 4 takes the programs a
+note and a link are drawn with, and the reducers that draw them as the frame
+says, only when it is made, so `sigmaDriver` refuses a renderer made without
+them. `sigmaOptions({ settings })` sets Sigma's own settings over Helix's.
+Sigma draws no names: the driver names notes over the drawing, as it names
+groups.
 
 | `connectGraph` option | Default | What else it takes |
 |---|---|---|

package/dist/overlay/overlay.d.ts

@@ -65,14 +65,16 @@ export declare const nameStart: (at: {
 /** A note to name over the drawing: its name, and whether it is the one the reader is on. */
 export interface Named {
     id: string;
+    /** Whether the name is drawn even where it covers another. The strong ones by default. */
+    must?: boolean | undefined;
     name: string;
     strong: boolean;
 }
 /**
  * **Names on a canvas of their own**, for a renderer that draws none: each
  * note given, beside it, ringed in the ground's color so it reads over the
- * links. The strong ones always, and the rest where there is room, in the
- * order given.
+ * links. The ones that must be named always, and the rest where there is
+ * room, in the order given.
  */
 export declare const namesOver: (container: HTMLElement, onScreen: OnScreen) => {
     /** The boxes the names last drawn take. */

package/dist/overlay/overlay.js

@@ -315,7 +315,7 @@ export const namesOver = (container, onScreen) => {
             taken = chromeOver(container);
             const rightToLeft = isRtl(container);
             context.textAlign = 'left';
-            for (const { id, name, strong } of named) {
+            for (const { id, must, name, strong } of named) {
                 const at = onScreen(id);
                 if (!at || looks.node(id).hidden) {
                     continue;
@@ -331,7 +331,7 @@ export const namesOver = (container, onScreen) => {
                 });
                 const x = nameStart(at, width, boxAt, taken, container.clientWidth, rightToLeft);
                 const box = boxAt(x);
-                if (!clearOf(box, taken) && !strong) {
+                if (!clearOf(box, taken) && !(must ?? strong)) {
                     continue;
                 }
                 taken.push(box);

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

@@ -1,87 +1,24 @@
-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. */
+import type { EdgePrimitives } from 'sigma/primitives';
+/** What the edge layer 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.
+ * How far past the line's own width a glowing link is drawn, as a multiple of
+ * that width, which is the room its glow has. **Sigma draws nothing outside a
+ * link's width**, so a glowing link is given the width of its glow and the
+ * layer draws the line in its middle.
  */
-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'];
+export declare const REACH = 4;
+/** How many times its line's width a link that glows fully is drawn: the line and its glow either side. */
+export declare const SPREAD: number;
 /**
- * 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.
+ * The links' primitives: a straight line drawn by Helix's layer, and a head
+ * on the strong ones only, at the note a link arrives at. 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 {};
+export declare const edgePrimitives: () => EdgePrimitives;

package/dist/sigma/edge-program.js

@@ -1,316 +1,46 @@
-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);
+import { extremityArrow, pathLine } from 'sigma/rendering';
+export const REACH = 4;
+export const SPREAD = 1 + REACH;
+const HEAD = { length: 2.5 / SPREAD, width: 2 / SPREAD };
+const { FLOAT } = WebGL2RenderingContext;
+const look = {
+    attributes: [{ name: 'helixGlow', size: 1, source: 'glow', type: FLOAT }],
+    glsl: `
+vec4 layer_helix(EdgeContext ctx) {
+  /* Across the link, from its middle out, in the width it is drawn at: the
+     line's own width and, where it glows, the glow either side. */
+  float spread = 1.0 + v_helixGlow * ${REACH.toFixed(1)};
+  float halfWidth = ctx.thickness * 0.5 / spread;
+  float dist = ctx.sdf + ctx.thickness * 0.5;
+  float line = v_helixGlow > 0.0 ? 1.0 - smoothstep(halfWidth - ctx.aaWidth, halfWidth, dist) : 1.0;
 
   /* 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;
+  float past = max(dist - halfWidth, 0.0) / max(halfWidth * ${REACH.toFixed(1)}, 0.0001);
+  float halo = v_helixGlow * (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 along = mix(0.4, 1.0, smoothstep(0.0, 1.0, ctx.t));
 
-  float da = a_barycentric.x;
-  float db = a_barycentric.y;
-  float dc = a_barycentric.z;
+  float alpha = (line + halo) * along;
 
-  vec2 delta = vec2(
-      da * (webGLNodeRadius * unitNormal.y)
-    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)
-    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),
+  /* The head, solid, narrowing from its base to its tip. Sigma's own cut
+     there is the line's whole width near the base, glow and all. */
+  if (v_zone > 1.5) {
+    float headHalf = ctx.thickness * v_headWidthRatio * 0.5 * (1.0 - v_zoneT);
+    alpha = max(alpha, 1.0 - smoothstep(headHalf - ctx.aaWidth, headHalf, dist));
+  }
 
-      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);
-    }
+  return vec4(v_color.rgb, alpha * v_color.a);
 }
-export const HelixEdgeProgram = createEdgeCompoundProgram([
-    HelixEdgeLineProgram,
-    HelixArrowHeadProgram,
-]);
+`,
+    name: 'helix',
+    uniforms: [],
+};
+export const edgePrimitives = () => ({
+    defaultHead: 'none',
+    extremities: [extremityArrow({ lengthRatio: HEAD.length, widthRatio: HEAD.width })],
+    layers: [look],
+    paths: [pathLine()],
+});

package/dist/sigma/index.d.ts

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

package/dist/sigma/index.js

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

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

@@ -1,11 +1,10 @@
-import { NodeProgram } from 'sigma/rendering';
-import type { NodeDisplayData, RenderParams } from 'sigma/types';
-/** The shapes a note is drawn in, numbered as the shader reads them. */
+import type { NodePrimitives } from 'sigma/primitives';
+/** The shapes a note is drawn in, by the name each is registered under. A ring is a circle drawn outlined. */
 export declare const SHAPES: {
-    readonly circle: 0;
-    readonly diamond: 2;
-    readonly ring: 3;
-    readonly square: 1;
+    readonly circle: 'helixCircle';
+    readonly diamond: 'helixDiamond';
+    readonly ring: 'helixCircle';
+    readonly square: 'helixSquare';
 };
 /** How heavily a note is drawn, numbered as the shader reads them. */
 export declare const EMPHASES: {
@@ -20,53 +19,24 @@ export declare const MATERIALS: {
     readonly glass: 1;
     readonly mark: 3;
 };
-/** What the node program reads off a note, beyond what Sigma gives every note. */
+/**
+ * How much larger a diamond is drawn than its size says. **Sigma draws a note
+ * in a square as wide as the note**, and a diamond's tips are its widest
+ * points: one that reached past the square, as Helix's did at 1.22 radii, was
+ * cut off there. So the diamond is drawn to the square's edge and the note
+ * made larger by the reach it lost, and it covers what it covered before.
+ */
+export declare const DIAMOND: number;
+/** What the node layer reads off a note, beyond what Sigma gives every note. */
 export interface HelixNodeData {
     /** `EMPHASES`. */
     emphasisCode?: number;
-    /** How strongly the note glows, from 0 to 1: the selected note's halo. */
-    glow?: number;
     /** `MATERIALS`. */
     materialCode?: number;
-    /** `SHAPES`. */
-    shapeCode?: number;
 }
-declare const UNIFORMS: readonly ['u_sizeRatio', 'u_correctionRatio', 'u_matrix'];
 /**
- * Draws a note in its shape, its emphasis and its material, with a glow where
- * it is selected: one triangle a note, as Sigma's own circle is, cut to the
- * shape where it is drawn. Pressing reads the shape and not the glow, so a
- * press beside a note is not a press on it.
+ * The notes' primitives: Helix's shapes and the layer that draws a note's
+ * emphasis and material. Pressing reads the shape, so a press beside a note is
+ * not a press on it.
  */
-export declare class HelixNodeProgram extends NodeProgram<(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_sizeRatio", "u_correctionRatio", "u_matrix"];
-        VERTEX_SHADER_SOURCE: string;
-        VERTICES: number;
-    };
-    processVisibleItem(nodeIndex: number, startIndex: number, data: NodeDisplayData & HelixNodeData): void;
-    setUniforms(params: RenderParams, { gl, uniformLocations, }: {
-        gl: WebGLRenderingContext;
-        uniformLocations: Record<string, WebGLUniformLocation>;
-    }): void;
-}
-export {};
+export declare const nodePrimitives: () => NodePrimitives;