@react-fabric/graph 1.0.0-beta.58

package/dist/esm/packages/graph/src/hooks/sigmaMouseActions.js

@@ -0,0 +1,145 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+
+var attachMouseActions = function attachMouseActions(renderer) {
+  var isDragging = false;
+  var isDragged = false;
+  var startPos = {
+    x: 0,
+    y: 0
+  };
+  var draggedNode;
+  var handleDrag = function handleDrag(renderer) {
+    return function (e) {
+      if (!isDragging || !draggedNode) return;
+      isDragged = true;
+      // Get new position of node
+      var pos = renderer.viewportToGraph(e);
+      var diff = {
+        x: pos.x - startPos.x,
+        y: pos.y - startPos.y
+      };
+      var graph = renderer.getGraph();
+      Object.entries(draggedNode).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          node = _ref2[0],
+          xy = _ref2[1];
+        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();
+    };
+  };
+  var stopDragging = function stopDragging(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;
+  };
+  var enableDragging = function enableDragging(renderer) {
+    renderer.on("downNode", function (e) {
+      if ("button" in e.event.original && e.event.original.button === 0) {
+        var graph = renderer.getGraph();
+        isDragging = true;
+        draggedNode = {};
+        var _graph$getNodeAttribu = graph.getNodeAttributes(e.node),
+          _graph$getNodeAttribu2 = _graph$getNodeAttribu.x,
+          x = _graph$getNodeAttribu2 === void 0 ? 0 : _graph$getNodeAttribu2,
+          _graph$getNodeAttribu3 = _graph$getNodeAttribu.y,
+          y = _graph$getNodeAttribu3 === void 0 ? 0 : _graph$getNodeAttribu3;
+        draggedNode[e.node] = {
+          x: x,
+          y: y
+        };
+        startPos = {
+          x: x,
+          y: y
+        };
+        graph.forEachNode(function (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", function (e) {
+      if (isDragging) {
+        stopDragging(renderer.getGraph());
+        e.original.preventDefault();
+        e.preventSigmaDefault();
+      }
+    });
+
+    // Disable the autoscale at the first down interaction
+    renderer.getMouseCaptor().on("mousedown", function () {
+      if (!renderer.getCustomBBox()) renderer.setCustomBBox(renderer.getBBox());
+    });
+  };
+  var resetSelection = function resetSelection(graph) {
+    graph.forEachNode(function (node, atts) {
+      return atts.selected && graph.setNodeAttribute(node, "selected", false);
+    });
+    graph.forEachEdge(function (node, atts) {
+      return atts.selected && graph.setEdgeAttribute(node, "selected", false);
+    });
+  };
+  var enableSelection = function enableSelection(renderer) {
+    renderer.on("downNode", function (e) {
+      if ("button" in e.event.original && e.event.original.button === 2) {
+        var isSelected = renderer.getGraph().getNodeAttribute(e.node, "selected");
+        !isSelected && resetSelection(renderer.getGraph());
+        !isSelected && renderer.getGraph().setNodeAttribute(e.node, "selected", true);
+      }
+    });
+    renderer.on("downEdge", function (e) {
+      if ("button" in e.event.original && e.event.original.button === 2) {
+        var isSelected = renderer.getGraph().getEdgeAttribute(e.edge, "selected");
+        !isSelected && resetSelection(renderer.getGraph());
+        !isSelected && renderer.getGraph().setEdgeAttribute(e.edge, "selected", true);
+      }
+    });
+    renderer.on("clickNode", function (e) {
+      if (!isDragged && "button" in e.event.original && e.event.original.button === 0) {
+        var 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", function (e) {
+      resetSelection(renderer.getGraph());
+    });
+  };
+  enableSelection(renderer);
+  enableDragging(renderer);
+};
+
+export { attachMouseActions };

package/dist/esm/packages/graph/src/hooks/useGraphology.js

@@ -0,0 +1,41 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect } from 'react';
+import { Graph } from '../graph/index.js';
+
+var useGraphology = function useGraphology(data) {
+  var _useState = useState(new Graph({
+      multi: true
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    graph = _useState2[0],
+    setGraph = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  useEffect(function () {
+    if (data instanceof Graph) {
+      setGraph(data);
+      return;
+    }
+    graph.clear();
+    data && graph["import"](data, false);
+  }, [data]);
+  useEffect(function () {
+    var handler = function handler(nodes) {
+      setSelected(nodes);
+    };
+    graph.on("nodesSelected", handler);
+    return function () {
+      graph.off("nodesSelected", handler);
+    };
+  }, [graph]);
+  return {
+    graph: graph,
+    selected: selected
+  };
+};
+
+export { useGraphology };

package/dist/esm/packages/graph/src/hooks/useSigma.js

@@ -0,0 +1,112 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useIsDark } from '@react-fabric/core';
+import { useState, useEffect } from 'react';
+import Sigma from 'sigma';
+import { EdgeCurveProgram } from '../programs/edge-curve/index.js';
+import { EdgeLineProgram } from '../programs/edge-line/index.js';
+import { NodeCircleProgram } from '../programs/node-circle/index.js';
+import { NodeRectProgram } from '../programs/node-rect/index.js';
+import { attachHighlighter } from './sigmaHilighter.js';
+import { attachMouseActions } from './sigmaMouseActions.js';
+
+var useSigma = function useSigma(graph, _nodeReducer, _edgeReducer) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerRef = _useState2[0],
+    setContainerRef = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    componentsRef = _useState4[0],
+    setComponentsRef = _useState4[1];
+  var isDark = useIsDark();
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sigma = _useState6[0],
+    updateSigma = _useState6[1];
+  useEffect(function () {
+    if (containerRef) {
+      var renderer = new Sigma(graph, 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: function nodeReducer(key, data) {
+          var _nodeData$size;
+          var nodeData = (_nodeReducer === null || _nodeReducer === void 0 ? void 0 : _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 = nodeData.size) !== null && _nodeData$size !== void 0 ? _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: function edgeReducer(key, data) {
+          var _edgeData$size;
+          var edgeData = (_edgeReducer === null || _edgeReducer === void 0 ? void 0 : _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 = edgeData.size) !== null && _edgeData$size !== void 0 ? _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 function () {
+        renderer.kill();
+      };
+    }
+  }, [graph, containerRef, componentsRef]);
+  useEffect(function () {
+    sigma === null || sigma === void 0 || 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
+  };
+};
+
+export { useSigma };

package/dist/esm/packages/graph/src/index.js

@@ -0,0 +1,30 @@
+'use client';
+
+export { SigmaGraph } from './components/Viewer.js';
+export { Graph } from './graph/index.js';
+
+/*
+ * 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.
+ */
+
+// @ts-expect-error ignore
+window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__ = 10;

package/dist/esm/packages/graph/src/programs/arrow-head/frag.glsl.js

@@ -0,0 +1,8 @@
+'use client';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER_SOURCE = /*glsl*/"\nprecision mediump float;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  gl_FragColor = v_color;\n  gl_FragColor = mix(transparent, gl_FragColor, v_opacity);\n}\n";
+
+export { SHADER_SOURCE as default };

package/dist/esm/packages/graph/src/programs/arrow-head/index.js

@@ -0,0 +1,141 @@
+'use client';
+
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
+import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { EdgeProgram } from 'sigma/rendering';
+import { floatColor } from 'sigma/utils';
+import SHADER_SOURCE$1 from './frag.glsl.js';
+import SHADER_SOURCE from './vert.glsl.js';
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _WebGLRenderingContex = WebGLRenderingContext,
+  UNSIGNED_BYTE = _WebGLRenderingContex.UNSIGNED_BYTE,
+  FLOAT = _WebGLRenderingContex.FLOAT;
+var UNIFORMS = ["u_matrix", "u_sizeRatio", "u_correctionRatio", "u_minEdgeThickness", "u_lengthToThicknessRatio", "u_widenessToThicknessRatio"];
+var DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS = {
+  extremity: "target",
+  lengthToThicknessRatio: 2.5,
+  widenessToThicknessRatio: 2
+};
+function createEdgeArrowHeadProgram(inputOptions) {
+  var options = _objectSpread(_objectSpread({}, DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS), inputOptions || {});
+  return /*#__PURE__*/function (_EdgeProgram) {
+    function EdgeArrowHeadProgram() {
+      _classCallCheck(this, EdgeArrowHeadProgram);
+      return _callSuper(this, EdgeArrowHeadProgram, arguments);
+    }
+    _inherits(EdgeArrowHeadProgram, _EdgeProgram);
+    return _createClass(EdgeArrowHeadProgram, [{
+      key: "getDefinition",
+      value: function getDefinition() {
+        return {
+          VERTICES: 3,
+          VERTEX_SHADER_SOURCE: SHADER_SOURCE,
+          FRAGMENT_SHADER_SOURCE: SHADER_SOURCE$1,
+          METHOD: WebGLRenderingContext.TRIANGLES,
+          UNIFORMS: 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]]
+        };
+      }
+    }, {
+      key: "processVisibleItem",
+      value: function processVisibleItem(edgeIndex, startIndex, sourceData, targetData, data) {
+        var _data$arrow, _data$opacity;
+        if (options.extremity === "source") {
+          var _ref = [targetData, sourceData];
+          sourceData = _ref[0];
+          targetData = _ref[1];
+        }
+        var thickness = Math.min(data.size || 1, 0.5) * 8;
+        var radius = targetData.size || 1;
+        var x1 = sourceData.x;
+        var y1 = sourceData.y;
+        var x2 = targetData.x;
+        var y2 = targetData.y;
+        var color = data.color;
+        if (data.selected) color = "#f00";
+        if (data.highlight) color = "#F54A4A";
+
+        // Computing normals
+        var dx = x2 - x1;
+        var dy = y2 - y1;
+        var len = dx * dx + dy * dy;
+        var n1 = 0;
+        var n2 = 0;
+        if (len) {
+          len = 1 / Math.sqrt(len);
+          n1 = -dy * len * thickness;
+          n2 = dx * len * thickness;
+        }
+        var 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.arrow) !== null && _data$arrow !== void 0 ? _data$arrow : "") ? (_data$opacity = data.opacity) !== null && _data$opacity !== void 0 ? _data$opacity : 1 : 0;
+        array[startIndex++] = edgeIndex;
+      }
+    }, {
+      key: "setUniforms",
+      value: function setUniforms(params, _ref2) {
+        var gl = _ref2.gl,
+          uniformLocations = _ref2.uniformLocations;
+        var u_matrix = uniformLocations.u_matrix,
+          u_sizeRatio = uniformLocations.u_sizeRatio,
+          u_correctionRatio = uniformLocations.u_correctionRatio,
+          u_minEdgeThickness = uniformLocations.u_minEdgeThickness,
+          u_lengthToThicknessRatio = uniformLocations.u_lengthToThicknessRatio,
+          u_widenessToThicknessRatio = uniformLocations.u_widenessToThicknessRatio;
+        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);
+      }
+    }]);
+  }(EdgeProgram);
+}
+
+export { DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS, createEdgeArrowHeadProgram };

package/dist/esm/packages/graph/src/programs/arrow-head/vert.glsl.js

@@ -0,0 +1,8 @@
+'use client';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER_SOURCE = /*glsl*/"\nattribute vec2 a_position;\nattribute vec2 a_normal;\nattribute float a_radius;\nattribute vec3 a_barycentric;\nattribute float a_opacity;\n\n#ifdef PICKING_MODE\nattribute vec4 a_id;\n#else\nattribute vec4 a_color;\n#endif\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\nuniform float u_minEdgeThickness;\nuniform float u_lengthToThicknessRatio;\nuniform float u_widenessToThicknessRatio;\n\nvarying vec4 v_color;\nvarying float v_opacity;\n\nconst float bias = 255.0 / 254.0;\n\nvoid main() {\n  float minThickness = u_minEdgeThickness;\n\n  float normalLength = length(a_normal);\n  vec2 unitNormal = a_normal / normalLength;\n\n  // These first computations are taken from edge.vert.glsl and\n  // edge.clamped.vert.glsl. Please read it to get better comments on what's\n  // happening:\n  float pixelsThickness = max(normalLength / u_sizeRatio, minThickness);\n  float webGLThickness = pixelsThickness * u_correctionRatio;\n  float webGLNodeRadius = a_radius * 2.0 * u_correctionRatio / u_sizeRatio;\n  float webGLArrowHeadLength = webGLThickness * u_lengthToThicknessRatio * 2.0;\n  float webGLArrowHeadThickness = webGLThickness * u_widenessToThicknessRatio;\n\n  float da = a_barycentric.x;\n  float db = a_barycentric.y;\n  float dc = a_barycentric.z;\n\n  vec2 delta = vec2(\n      da * (webGLNodeRadius * unitNormal.y)\n    + db * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y + webGLArrowHeadThickness * unitNormal.x)\n    + dc * ((webGLNodeRadius + webGLArrowHeadLength) * unitNormal.y - webGLArrowHeadThickness * unitNormal.x),\n\n      da * (-webGLNodeRadius * unitNormal.x)\n    + db * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x + webGLArrowHeadThickness * unitNormal.y)\n    + dc * (-(webGLNodeRadius + webGLArrowHeadLength) * unitNormal.x - webGLArrowHeadThickness * unitNormal.y)\n  );\n\n  vec2 position = (u_matrix * vec3(a_position + delta, 1)).xy;\n\n  gl_Position = vec4(position, 0, 1);\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_color = a_color;\n  v_opacity = a_opacity;\n  #endif\n\n  v_color.a *= bias;\n}\n";
+
+export { SHADER_SOURCE as default };

package/dist/esm/packages/graph/src/programs/edge-curve/drawLabel.js

@@ -0,0 +1,136 @@
+'use client';
+
+/* istanbul ignore file */
+
+function getCurvePoint(t, p0, p1, p2) {
+  var x = Math.pow(1 - t, 2) * p0.x + 2 * (1 - t) * t * p1.x + Math.pow(t, 2) * p2.x;
+  var y = Math.pow(1 - t, 2) * p0.y + 2 * (1 - t) * t * p1.y + Math.pow(t, 2) * p2.y;
+  return {
+    x: x,
+    y: y
+  };
+}
+function getCurveLength(p0, p1, p2) {
+  var steps = 20;
+  var length = 0;
+  var lastPoint = p0;
+  for (var i = 0; i < steps; i++) {
+    var point = getCurvePoint((i + 1) / steps, p0, p1, p2);
+    length += Math.sqrt(Math.pow(lastPoint.x - point.x, 2) + Math.pow(lastPoint.y - point.y, 2));
+    lastPoint = point;
+  }
+  return length;
+}
+function createDrawCurvedEdgeLabel(_ref) {
+  var curvatureAttribute = _ref.curvatureAttribute,
+    defaultCurvature = _ref.defaultCurvature,
+    _ref$keepLabelUpright = _ref.keepLabelUpright,
+    keepLabelUpright = _ref$keepLabelUpright === void 0 ? true : _ref$keepLabelUpright;
+  return function (context, edgeData, sourceData, targetData, settings) {
+    var _edgeData$color;
+    var size = settings.edgeLabelSize;
+    var curvature = edgeData[curvatureAttribute] || defaultCurvature;
+    var font = settings.edgeLabelFont;
+    var weight = settings.edgeLabelWeight;
+    var color = (_edgeData$color = edgeData.color) !== null && _edgeData$color !== void 0 ? _edgeData$color : settings.defaultEdgeColor;
+    if (edgeData.selected) color = "#f00";
+    if (edgeData.highlight) color = "#F54A4A";
+    var label = edgeData.label;
+    if (!label || edgeData.opacity < 1) return;
+    context.font = "".concat(weight, " ").concat(size, "px ").concat(font);
+
+    // Computing positions without considering nodes sizes:
+    var ltr = !keepLabelUpright || sourceData.x < targetData.x;
+    var sourceX = ltr ? sourceData.x : targetData.x;
+    var sourceY = ltr ? sourceData.y : targetData.y;
+    var targetX = ltr ? targetData.x : sourceData.x;
+    var targetY = ltr ? targetData.y : sourceData.y;
+    var centerX = (sourceX + targetX) / 2;
+    var centerY = (sourceY + targetY) / 2;
+    var diffX = targetX - sourceX;
+    var diffY = targetY - sourceY;
+    var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
+    // Anchor point:
+    var orientation = ltr ? 1 : -1;
+    var anchorX = centerX + diffY * curvature * orientation;
+    var anchorY = centerY - diffX * curvature * orientation;
+
+    // Adapt curve points to edge thickness:
+    var offset = edgeData.size * 0.7 + 5;
+    var sourceOffsetVector = {
+      x: anchorY - sourceY,
+      y: -(anchorX - sourceX)
+    };
+    var sourceOffsetVectorLength = Math.sqrt(Math.pow(sourceOffsetVector.x, 2) + Math.pow(sourceOffsetVector.y, 2));
+    var targetOffsetVector = {
+      x: targetY - anchorY,
+      y: -(targetX - anchorX)
+    };
+    var targetOffsetVectorLength = Math.sqrt(Math.pow(targetOffsetVector.x, 2) + Math.pow(targetOffsetVector.y, 2));
+    sourceX += offset * sourceOffsetVector.x / sourceOffsetVectorLength;
+    sourceY += offset * sourceOffsetVector.y / sourceOffsetVectorLength;
+    targetX += offset * targetOffsetVector.x / targetOffsetVectorLength;
+    targetY += offset * targetOffsetVector.y / targetOffsetVectorLength;
+    // For anchor, the vector is simpler, so it is inlined:
+    anchorX += offset * diffY / diff;
+    anchorY -= offset * diffX / diff;
+
+    // Compute curve length:
+    var anchorPoint = {
+      x: anchorX,
+      y: anchorY
+    };
+    var sourcePoint = {
+      x: sourceX,
+      y: sourceY
+    };
+    var targetPoint = {
+      x: targetX,
+      y: targetY
+    };
+    var curveLength = getCurveLength(sourcePoint, anchorPoint, targetPoint);
+    if (curveLength < sourceData.size + targetData.size) return;
+
+    // Handling ellipsis
+    var textLength = context.measureText(label).width;
+    var availableTextLength = curveLength - sourceData.size - targetData.size;
+    if (textLength > availableTextLength) {
+      var ellipsis = "…";
+      label = label + ellipsis;
+      textLength = context.measureText(label).width;
+      while (textLength > availableTextLength && label.length > 1) {
+        label = label.slice(0, -2) + ellipsis;
+        textLength = context.measureText(label).width;
+      }
+      if (label.length < 4) return;
+    }
+
+    // Measure each character:
+    var charactersLengthCache = {};
+    for (var i = 0, length = label.length; i < length; i++) {
+      var character = label[i];
+      if (!charactersLengthCache[character]) {
+        charactersLengthCache[character] = context.measureText(character).width * (1 + curvature * 0.35);
+      }
+    }
+
+    // Draw each character:
+    var t = 0.5 - textLength / curveLength / 2;
+    for (var _i = 0, _length = label.length; _i < _length; _i++) {
+      var _character = label[_i];
+      var point = getCurvePoint(t, sourcePoint, anchorPoint, targetPoint);
+      var tangentX = 2 * (1 - t) * (anchorX - sourceX) + 2 * t * (targetX - anchorX);
+      var tangentY = 2 * (1 - t) * (anchorY - sourceY) + 2 * t * (targetY - anchorY);
+      var angle = Math.atan2(tangentY, tangentX);
+      context.save();
+      context.translate(point.x, point.y);
+      context.rotate(angle);
+      context.fillStyle = color;
+      context.fillText(_character, 0, 0);
+      context.restore();
+      t += charactersLengthCache[_character] / curveLength;
+    }
+  };
+}
+
+export { createDrawCurvedEdgeLabel };

package/dist/esm/packages/graph/src/programs/edge-curve/frag.glsl.js

@@ -0,0 +1,8 @@
+'use client';
+
+/* istanbul ignore file */
+
+// language=GLSL
+var SHADER = /* glsl */"\nprecision highp float;\n\nvarying vec4 v_color;\nvarying float v_opacity;\nvarying float v_thickness;\nvarying float v_feather;\nvarying vec2 v_cpA;\nvarying vec2 v_cpB;\nvarying vec2 v_cpC;\nvarying float v_sourceSize;\nvarying vec2 v_sourcePoint;\nvarying float v_targetSize;\nvarying vec2 v_targetPoint;\n\nuniform float u_lengthToThicknessRatio;\nuniform float u_widenessToThicknessRatio;\n\nfloat det(vec2 a, vec2 b) {\n  return a.x * b.y - b.x * a.y;\n}\n\nvec2 getDistanceVector(vec2 b0, vec2 b1, vec2 b2) {\n  float a = det(b0, b2), b = 2.0 * det(b1, b0), d = 2.0 * det(b2, b1);\n  float f = b * d - a * a;\n  vec2 d21 = b2 - b1, d10 = b1 - b0, d20 = b2 - b0;\n  vec2 gf = 2.0 * (b * d21 + d * d10 + a * d20);\n  gf = vec2(gf.y, -gf.x);\n  vec2 pp = -f * gf / dot(gf, gf);\n  vec2 d0p = b0 - pp;\n  float ap = det(d0p, d20), bp = 2.0 * det(d10, d0p);\n  float t = clamp((ap + bp) / (2.0 * a + b + d), 0.0, 1.0);\n  return mix(mix(b0, b1, t), mix(b1, b2, t), t);\n}\n\nfloat distToQuadraticBezierCurve(vec2 p, vec2 b0, vec2 b1, vec2 b2) {\n  return length(getDistanceVector(b0 - p, b1 - p, b2 - p));\n}\n\nconst float epsilon = 0.7;\nconst vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);\n\nvoid main(void) {\n  float dist = distToQuadraticBezierCurve(gl_FragCoord.xy, v_cpA, v_cpB, v_cpC);\n  float thickness = v_thickness;\n\n  if(v_sourceSize > 0.0) {\n    float distToSource = length(gl_FragCoord.xy - v_sourcePoint);\n    float sourceArrowLength = v_sourceSize + (thickness) * u_lengthToThicknessRatio;\n    if (distToSource < sourceArrowLength) {\n      thickness = (distToSource - v_sourceSize) / (sourceArrowLength - v_sourceSize) * u_widenessToThicknessRatio * thickness;\n    }\n  }\n\n  if(v_targetSize > 0.0) {\n    float distToTarget = length(gl_FragCoord.xy - v_targetPoint);\n    float targetArrowLength = v_targetSize + (thickness) * u_lengthToThicknessRatio;\n    if (distToTarget < targetArrowLength) {\n      thickness = (distToTarget - v_targetSize) / (targetArrowLength - v_targetSize) * u_widenessToThicknessRatio * thickness;\n    }\n  }\n\n  float halfThickness = thickness / 2.0;\n  if (dist < halfThickness) {\n    #ifdef PICKING_MODE\n    gl_FragColor = v_color;\n    #else\n    float t = smoothstep(\n      halfThickness - v_feather,\n      halfThickness,\n      dist\n    );\n\n    gl_FragColor = mix(v_color, transparent, t);\n    gl_FragColor = mix(transparent, gl_FragColor, v_opacity);\n    #endif\n  } else {\n    gl_FragColor = transparent;\n  }\n}\n";
+
+export { SHADER as default };