@react-fabric/graph 1.0.0-beta.58

package/src/hooks/sigmaHilighter.ts

@@ -0,0 +1,107 @@
+import { debounce } from "@react-fabric/utilities";
+import type Graph from "graphology";
+import type Sigma from "sigma";
+import { SigmaEdgeEventPayload, SigmaNodeEventPayload } from "sigma/types";
+import { EdgeAttributes, NodeAttributes } from "../types";
+
+export const attachHighlighter = (
+  renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,
+) => {
+  const handleEnterNode = (id: string, graph: Graph) => {
+    try {
+      const neighbors = graph.neighbors(id);
+      graph.forEachNode((node) => {
+        graph.setNodeAttribute(
+          node,
+          "opacity",
+          node !== id && !neighbors.includes(node) ? 0.1 : 1,
+        );
+      });
+      graph.forEachEdge((edge) => {
+        graph.setEdgeAttribute(
+          edge,
+          "opacity",
+          !graph.hasExtremity(edge, id) ? 0.1 : 1,
+        );
+      });
+    } catch {
+      //
+    }
+  };
+
+  const handleLeaveNode = (graph: Graph) => {
+    graph.forEachNode((node) => {
+      graph.setNodeAttribute(node, "opacity", 1);
+    });
+    graph.forEachEdge((edge) => {
+      graph.setEdgeAttribute(edge, "opacity", 1);
+    });
+  };
+
+  const handleEnterEdge = (id: string, graph: Graph) => {
+    try {
+      const source = graph.source(id);
+      const target = graph.target(id);
+
+      graph.setEdgeAttribute(id, "zIndex", 2);
+      graph.setNodeAttribute(source, "zIndex", 2);
+      graph.setNodeAttribute(target, "zIndex", 2);
+
+      graph.setEdgeAttribute(id, "highlight", true);
+      graph.setNodeAttribute(source, "highlight", true);
+      graph.setNodeAttribute(target, "highlight", true);
+
+      graph.forEachNode((node) => {
+        graph.setNodeAttribute(
+          node,
+          "opacity",
+          node !== source && node !== target ? 0.1 : 1,
+        );
+      });
+      graph.forEachEdge((edge) => {
+        graph.setEdgeAttribute(edge, "opacity", edge !== id ? 0.1 : 1);
+      });
+    } catch {
+      //
+    }
+  };
+
+  const handleLeaveEdge = (id: string, graph: Graph) => {
+    const source = graph.source(id);
+    const target = graph.target(id);
+
+    graph.setEdgeAttribute(id, "zIndex", 0);
+    graph.setNodeAttribute(source, "zIndex", 0);
+    graph.setNodeAttribute(target, "zIndex", 0);
+
+    graph.setEdgeAttribute(id, "highlight", false);
+    graph.setNodeAttribute(source, "highlight", false);
+    graph.setNodeAttribute(target, "highlight", false);
+
+    graph.forEachNode((node) => {
+      graph.setNodeAttribute(node, "opacity", 1);
+      graph.setNodeAttribute(node, "highlight", false);
+    });
+    graph.forEachEdge((edge) => {
+      graph.setEdgeAttribute(edge, "opacity", 1);
+      graph.setEdgeAttribute(edge, "highlight", false);
+    });
+  };
+
+  const debouceNodeEnter = debounce((e: SigmaNodeEventPayload) => {
+    handleEnterNode(e.node, renderer.getGraph());
+  });
+  const debouceEdgeEnter = debounce((e: SigmaEdgeEventPayload) => {
+    handleEnterEdge(e.edge, renderer.getGraph());
+  }, 100);
+  renderer.on("enterNode", debouceNodeEnter);
+  renderer.on("leaveNode", (e) => {
+    debouceNodeEnter.cancel();
+    handleLeaveNode(renderer.getGraph());
+  });
+  renderer.on("enterEdge", debouceEdgeEnter);
+  renderer.on("leaveEdge", (e) => {
+    debouceEdgeEnter.cancel();
+    handleLeaveEdge(e.edge, renderer.getGraph());
+  });
+};

package/src/hooks/sigmaMouseActions.ts

@@ -0,0 +1,153 @@
+import type Graph from "graphology";
+import type Sigma from "sigma";
+import { type MouseCoords } from "sigma/types";
+import { EdgeAttributes, NodeAttributes } from "../types";
+
+export const attachMouseActions = (
+  renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,
+) => {
+  let isDragging = false;
+  let isDragged = false;
+  let startPos = { x: 0, y: 0 };
+  let draggedNode: AnyObject;
+
+  const handleDrag =
+    (renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>) =>
+    (e: MouseCoords) => {
+      if (!isDragging || !draggedNode) return;
+
+      isDragged = true;
+      // Get new position of node
+      const pos = renderer.viewportToGraph(e);
+      const diff = { x: pos.x - startPos.x, y: pos.y - startPos.y };
+
+      const graph = renderer.getGraph();
+      Object.entries<KeyValue>(draggedNode).forEach(([node, xy]) => {
+        graph.setNodeAttribute(node, "x", xy.x + diff.x);
+        graph.setNodeAttribute(node, "y", xy.y + diff.y);
+      });
+
+      // Prevent sigma to move camera:
+      e.preventSigmaDefault();
+      e.original.preventDefault();
+      e.original.stopPropagation();
+    };
+
+  const stopDragging = (graph: Graph) => {
+    // if (draggedNode) {
+    //   Object.entries<KeyValue>(draggedNode).forEach(([node, xy]) => {
+    //     const atts = graph.getNodeAttributes(node);
+    //     if (atts.isGroup) {
+    //       const diff = { x: atts.x - xy.x, y: atts.y - xy.y };
+    //       atts.nodes?.forEach((id: string) => {
+    //         try {
+    //           const { x, y } = graph.getNodeAttributes(id);
+    //           graph.setNodeAttribute(id, "x", x + diff.x);
+    //           graph.setNodeAttribute(id, "y", y + diff.y);
+    //         } catch {
+    //           //
+    //         }
+    //       });
+    //     }
+    //   });
+    // }
+    isDragging = false;
+    draggedNode = undefined;
+  };
+
+  const enableDragging = (
+    renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,
+  ) => {
+    renderer.on("downNode", (e) => {
+      if ("button" in e.event.original && e.event.original.button === 0) {
+        const graph = renderer.getGraph();
+        isDragging = true;
+        draggedNode = {};
+        const { x = 0, y = 0 } = graph.getNodeAttributes(e.node);
+        draggedNode[e.node] = { x, y };
+        startPos = { x, y };
+        graph.forEachNode((node, atts) => {
+          if (atts.selected) {
+            draggedNode[node] = { x: atts.x, y: atts.y };
+          }
+        });
+      }
+    });
+
+    // On mouse move, if the drag mode is enabled, we change the position of the draggedNode
+    renderer.getMouseCaptor().on("mousemovebody", handleDrag(renderer));
+
+    // On mouse up, we reset the autoscale and the dragging mode
+    renderer.getMouseCaptor().on("mouseup", (e) => {
+      if (isDragging) {
+        stopDragging(renderer.getGraph());
+        e.original.preventDefault();
+        e.preventSigmaDefault();
+      }
+    });
+
+    // Disable the autoscale at the first down interaction
+    renderer.getMouseCaptor().on("mousedown", () => {
+      if (!renderer.getCustomBBox()) renderer.setCustomBBox(renderer.getBBox());
+    });
+  };
+
+  const resetSelection = (graph: Graph) => {
+    graph.forEachNode(
+      (node, atts) =>
+        atts.selected && graph.setNodeAttribute(node, "selected", false),
+    );
+    graph.forEachEdge(
+      (node, atts) =>
+        atts.selected && graph.setEdgeAttribute(node, "selected", false),
+    );
+  };
+
+  const enableSelection = (
+    renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,
+  ) => {
+    renderer.on("downNode", (e) => {
+      if ("button" in e.event.original && e.event.original.button === 2) {
+        const isSelected = renderer
+          .getGraph()
+          .getNodeAttribute(e.node, "selected");
+
+        !isSelected && resetSelection(renderer.getGraph());
+        !isSelected &&
+          renderer.getGraph().setNodeAttribute(e.node, "selected", true);
+      }
+    });
+    renderer.on("downEdge", (e) => {
+      if ("button" in e.event.original && e.event.original.button === 2) {
+        const isSelected = renderer
+          .getGraph()
+          .getEdgeAttribute(e.edge, "selected");
+
+        !isSelected && resetSelection(renderer.getGraph());
+        !isSelected &&
+          renderer.getGraph().setEdgeAttribute(e.edge, "selected", true);
+      }
+    });
+    renderer.on("clickNode", (e) => {
+      if (
+        !isDragged &&
+        "button" in e.event.original &&
+        e.event.original.button === 0
+      ) {
+        const isSelected = renderer
+          .getGraph()
+          .getNodeAttribute(e.node, "selected");
+
+        !e.event.original.shiftKey && resetSelection(renderer.getGraph());
+        renderer.getGraph().setNodeAttribute(e.node, "selected", !isSelected);
+      }
+      isDragged = false;
+    });
+    renderer.on("downStage", (e) => {
+      resetSelection(renderer.getGraph());
+    });
+  };
+
+  enableSelection(renderer);
+  enableDragging(renderer);
+};

package/src/hooks/useGraphology.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { Graph } from "../graph";
+import { GraphProps } from "../types";
+
+export const useGraphology = <N, E>(data: GraphProps<N, E>["data"]) => {
+  const [graph, setGraph] = useState(new Graph<N, E>({ multi: true }));
+
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (data instanceof Graph) {
+      setGraph(data);
+      return;
+    }
+    graph.clear();
+    data && graph.import(data, false);
+  }, [data]);
+
+  useEffect(() => {
+    const handler = (nodes: string[]) => {
+      setSelected(nodes);
+    };
+    graph.on("nodesSelected", handler);
+
+    return () => {
+      graph.off("nodesSelected", handler);
+    };
+  }, [graph]);
+
+  return { graph, selected };
+};

package/src/hooks/useSigma.ts

@@ -0,0 +1,118 @@
+import { useIsDark } from "@react-fabric/core";
+import { useEffect, useState } from "react";
+import Sigma from "sigma";
+import { Graph } from "../graph";
+import { EdgeCurveProgram } from "../programs/edge-curve";
+import { EdgeLineProgram } from "../programs/edge-line";
+import { NodeCircleProgram } from "../programs/node-circle";
+import { NodeRectProgram } from "../programs/node-rect";
+import {
+  EdgeAttributes,
+  InternalEdgeAttributes,
+  InternalNodeAttributes,
+  NodeAttributes,
+} from "../types";
+import { attachHighlighter } from "./sigmaHilighter";
+import { attachMouseActions } from "./sigmaMouseActions";
+
+export const useSigma = <N, E>(
+  graph: Graph<N, E>,
+  nodeReducer?: (node: NodeAttributes<N>) => NodeAttributes<N>,
+  edgeReducer?: (edge: EdgeAttributes<E>) => EdgeAttributes<E>,
+) => {
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
+  const [componentsRef, setComponentsRef] = useState<HTMLDivElement | null>(
+    null,
+  );
+  const isDark = useIsDark();
+
+  const [sigma, updateSigma] =
+    useState<Sigma<NodeAttributes<N>, EdgeAttributes<E>>>();
+
+  useEffect(() => {
+    if (containerRef) {
+      const renderer = new Sigma<
+        InternalNodeAttributes<N>,
+        InternalEdgeAttributes<E>
+      >(graph as any, containerRef, {
+        allowInvalidContainer: true,
+        enableEdgeEvents: true,
+        renderEdgeLabels: true,
+        renderLabels: true,
+        labelSize: 14,
+        defaultEdgeType: "line",
+        defaultNodeType: "circle",
+        edgeProgramClasses: {
+          line: EdgeLineProgram,
+          curved: EdgeCurveProgram,
+        },
+        // for some reason max ratio is min zoom and min ratio is max zoom
+        maxCameraRatio: 10,
+        minCameraRatio: 0.01,
+        nodeProgramClasses: {
+          rect: NodeRectProgram,
+          circle: NodeCircleProgram,
+        },
+        nodeReducer(key, data) {
+          const nodeData: InternalNodeAttributes<N> =
+            nodeReducer?.(data) || data;
+          // Ensure node size is at least 16 for visibility
+          if (!nodeData.size && nodeData.weight) {
+            nodeData.size = Math.max(16, nodeData.weight * 3);
+          }
+          if ((nodeData.size ?? 0) < 16) {
+            nodeData.size = 16;
+          }
+
+          // ensure node label renderer is called in order to render selected border
+          nodeData.label = nodeData.label || "";
+          nodeData.id = key;
+          return nodeData;
+        },
+        edgeReducer(key, data) {
+          const edgeData: InternalEdgeAttributes<E> =
+            edgeReducer?.(data) || data;
+          // Ensure edge size is at least 0.5 for visibility
+          if (!edgeData.size && edgeData.weight) {
+            edgeData.size = Math.max(0.5, edgeData.weight * 6);
+          }
+          if ((edgeData.size ?? 0) < 0.5) {
+            edgeData.size = 0.5;
+          }
+          edgeData.id = key;
+          return edgeData;
+        },
+      });
+
+      attachMouseActions(renderer);
+      attachHighlighter(renderer);
+
+      // containerRef?.insertBefore(
+      //   componentsRef,
+      //   renderer.getCanvases().mouse,
+      // );
+
+      // @ts-expect-error ignore
+      window.sigma = renderer;
+      updateSigma(renderer);
+
+      return () => {
+        renderer.kill();
+      };
+    }
+  }, [graph, containerRef, componentsRef]);
+
+  useEffect(() => {
+    sigma?.setSettings({
+      defaultNodeColor: isDark ? "#000" : "#fff",
+      defaultEdgeColor: isDark ? "#fff" : "#000",
+      labelColor: { color: isDark ? "#fff" : "#000", attribute: "labelColor" },
+    });
+  }, [isDark, sigma]);
+
+  return {
+    instance: sigma,
+    containerRef: setContainerRef,
+    componentsRef: setComponentsRef,
+  };
+};

package/src/index.ts

@@ -0,0 +1,34 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export { SigmaGraph } from "./components/Viewer";
+export { Graph } from "./graph";
+export type {
+  EdgeAttributes,
+  GraphRef,
+  NodeAttributes,
+  RawGraph,
+} from "./types";
+
+// @ts-expect-error ignore
+window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__ = 10;

package/src/programs/arrow-head/frag.glsl.ts

@@ -0,0 +1,18 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+precision mediump float;
+
+varying vec4 v_color;
+varying float v_opacity;
+
+const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);
+
+void main(void) {
+  gl_FragColor = v_color;
+  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);
+}
+`;
+
+export default SHADER_SOURCE;

package/src/programs/arrow-head/index.ts

@@ -0,0 +1,148 @@
+import { Attributes } from "graphology-types";
+
+import { EdgeProgram, EdgeProgramType, ProgramInfo } from "sigma/rendering";
+import { EdgeDisplayData, NodeDisplayData, RenderParams } from "sigma/types";
+import { floatColor } from "sigma/utils";
+import { InternalEdgeAttributes } from "../../types";
+import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
+import VERTEX_SHADER_SOURCE from "./vert.glsl";
+
+const { UNSIGNED_BYTE, FLOAT } = WebGLRenderingContext;
+
+const UNIFORMS = [
+  "u_matrix",
+  "u_sizeRatio",
+  "u_correctionRatio",
+  "u_minEdgeThickness",
+  "u_lengthToThicknessRatio",
+  "u_widenessToThicknessRatio",
+] as const;
+
+export type CreateEdgeArrowHeadProgramOptions = {
+  extremity: "source" | "target";
+  lengthToThicknessRatio: number;
+  widenessToThicknessRatio: number;
+};
+
+export const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgramOptions =
+  {
+    extremity: "target",
+    lengthToThicknessRatio: 2.5,
+    widenessToThicknessRatio: 2,
+  };
+
+export function createEdgeArrowHeadProgram<
+  N extends Attributes = Attributes,
+  E extends Attributes = Attributes,
+  G extends Attributes = Attributes,
+>(
+  inputOptions?: Partial<CreateEdgeArrowHeadProgramOptions>,
+): EdgeProgramType<N, E, G> {
+  const options = {
+    ...DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS,
+    ...(inputOptions || {}),
+  };
+
+  return class EdgeArrowHeadProgram<
+    N extends Attributes = Attributes,
+    E extends Attributes = Attributes,
+    G extends Attributes = Attributes,
+  > extends EdgeProgram<(typeof UNIFORMS)[number], N, E, G> {
+    getDefinition() {
+      return {
+        VERTICES: 3,
+        VERTEX_SHADER_SOURCE,
+        FRAGMENT_SHADER_SOURCE,
+        METHOD: WebGLRenderingContext.TRIANGLES,
+        UNIFORMS,
+        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", size: 4, type: UNSIGNED_BYTE, normalized: true },
+          { name: "a_opacity", size: 1, type: FLOAT },
+          { name: "a_id", size: 4, type: UNSIGNED_BYTE, normalized: true },
+        ],
+        CONSTANT_ATTRIBUTES: [{ name: "a_barycentric", size: 3, type: FLOAT }],
+        CONSTANT_DATA: [
+          [1, 0, 0],
+          [0, 1, 0],
+          [0, 0, 1],
+        ],
+      };
+    }
+
+    processVisibleItem(
+      edgeIndex: number,
+      startIndex: number,
+      sourceData: NodeDisplayData,
+      targetData: NodeDisplayData,
+      data: EdgeDisplayData & InternalEdgeAttributes,
+    ) {
+      if (options.extremity === "source") {
+        [sourceData, targetData] = [targetData, sourceData];
+      }
+
+      const thickness = Math.min(data.size || 1, 0.5) * 8;
+      const radius = targetData.size || 1;
+      const x1 = sourceData.x;
+      const y1 = sourceData.y;
+      const x2 = targetData.x;
+      const y2 = targetData.y;
+      let color = data.color;
+      if (data.selected) color = "#f00";
+      if (data.highlight) color = "#F54A4A";
+
+      // Computing normals
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+
+      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;
+
+      array[startIndex++] = x2;
+      array[startIndex++] = y2;
+      array[startIndex++] = -n1;
+      array[startIndex++] = -n2;
+      array[startIndex++] = radius;
+      array[startIndex++] = floatColor(color);
+      array[startIndex++] = ["both", options.extremity].includes(
+        data.arrow ?? "",
+      )
+        ? data.opacity ?? 1
+        : 0;
+      array[startIndex++] = edgeIndex;
+    }
+
+    setUniforms(
+      params: RenderParams,
+      { gl, uniformLocations }: ProgramInfo,
+    ): void {
+      const {
+        u_matrix,
+        u_sizeRatio,
+        u_correctionRatio,
+        u_minEdgeThickness,
+        u_lengthToThicknessRatio,
+        u_widenessToThicknessRatio,
+      } = uniformLocations;
+
+      gl.uniformMatrix3fv(u_matrix, false, params.matrix);
+      gl.uniform1f(u_sizeRatio, params.sizeRatio);
+      gl.uniform1f(u_correctionRatio, params.correctionRatio);
+      gl.uniform1f(u_minEdgeThickness, params.minEdgeThickness);
+      gl.uniform1f(u_lengthToThicknessRatio, 2.5);
+      gl.uniform1f(u_widenessToThicknessRatio, 2);
+    }
+  };
+}

package/src/programs/arrow-head/vert.glsl.ts

@@ -0,0 +1,75 @@
+/* istanbul ignore file */
+
+// language=GLSL
+const SHADER_SOURCE = /*glsl*/ `
+attribute vec2 a_position;
+attribute vec2 a_normal;
+attribute float a_radius;
+attribute vec3 a_barycentric;
+attribute float a_opacity;
+
+#ifdef PICKING_MODE
+attribute vec4 a_id;
+#else
+attribute vec4 a_color;
+#endif
+
+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;
+varying float v_opacity;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  float minThickness = u_minEdgeThickness;
+
+  float normalLength = length(a_normal);
+  vec2 unitNormal = a_normal / normalLength;
+
+  // These first computations are taken from edge.vert.glsl and
+  // edge.clamped.vert.glsl. Please read it to get better comments on what's
+  // happening:
+  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)
+  );
+
+  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;
+
+  gl_Position = vec4(position, 0, 1);
+
+  #ifdef PICKING_MODE
+  // For picking mode, we use the ID as the color:
+  v_color = a_id;
+  #else
+  // For normal mode, we use the color:
+  v_color = a_color;
+  v_opacity = a_opacity;
+  #endif
+
+  v_color.a *= bias;
+}
+`;
+
+export default SHADER_SOURCE;