@react-fabric/graph 1.0.0-beta.62 → 1.0.1

package/dist/esm/hooks/sigmaDragSelect.js

@@ -1,169 +0,0 @@
-'use client';
-
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useRef, useState, useEffect } from 'react';
-
-var useDragSelection = function useDragSelection(renderer) {
-  var isDrawing = useRef(false);
-  var drawPoints = useRef([]);
-  var drawingCanvas = useRef(undefined);
-  var drawingContext = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    mode = _useState2[0],
-    setMode = _useState2[1];
-  var selectionMode = useRef(false);
-  useEffect(function () {
-    selectionMode.current = mode;
-  }, [mode]);
-  var startDrawing = function startDrawing(evt) {
-    isDrawing.current = true;
-    if (drawingCanvas.current) {
-      drawingContext.current = drawingCanvas.current.getContext("2d");
-      if (drawingContext.current) {
-        drawingContext.current.setLineDash([2, 4]);
-        drawingContext.current.lineWidth = 2;
-        drawingContext.current.strokeStyle = "#3a766c40";
-        drawingContext.current.fillStyle = "#3a766c10";
-        drawingContext.current.lineJoin = "round";
-        drawingContext.current.lineCap = "round";
-      }
-      var drawingRectangle = drawingCanvas.current.getBoundingClientRect();
-      drawPoints.current = [{
-        x: evt.clientX - drawingRectangle.left,
-        y: evt.clientY - drawingRectangle.top
-      }];
-    }
-    evt.stopImmediatePropagation();
-    evt.stopPropagation();
-    evt.preventDefault();
-  };
-  var drawPath = function drawPath(evt) {
-    if (!isDrawing) return;
-    if (drawingCanvas.current) {
-      var drawingRectangle = drawingCanvas.current.getBoundingClientRect();
-      if (drawingContext.current) {
-        if (selectionMode.current === "rectangle") {
-          drawingContext.current.clearRect(0, 0, drawingCanvas.current.width, drawingCanvas.current.height);
-          var _drawPoints$current$ = drawPoints.current[0],
-            x = _drawPoints$current$.x,
-            y = _drawPoints$current$.y;
-          drawingContext.current.beginPath();
-          drawingContext.current.rect(Math.min(x, evt.clientX), Math.min(y, evt.clientY), Math.abs(evt.clientX - drawingRectangle.left - x), Math.abs(evt.clientY - drawingRectangle.top - y));
-          drawingContext.current.stroke();
-          drawingContext.current.fill();
-        }
-        if (selectionMode.current === "lasso") {
-          drawPoints.current.push({
-            x: evt.clientX - drawingRectangle.left,
-            y: evt.clientY - drawingRectangle.top
-          });
-
-          // Clear the canvas
-          drawingContext.current.clearRect(0, 0, drawingContext.current.canvas.width, drawingContext.current.canvas.height);
-
-          // Redraw the complete path for a smoother effect
-          // Even smoother with quadratic curves
-          var sourcePoint = drawPoints.current[0];
-          var destinationPoint = drawPoints.current[1];
-          var pointsLength = drawPoints.current.length;
-          var getMiddlePointCoordinates = function getMiddlePointCoordinates(firstPoint, secondPoint) {
-            return {
-              x: firstPoint.x + (secondPoint.x - firstPoint.x) / 2,
-              y: firstPoint.y + (secondPoint.y - firstPoint.y) / 2
-            };
-          };
-          drawingContext.current.beginPath();
-          drawingContext.current.moveTo(sourcePoint.x, sourcePoint.y);
-          for (var i = 1; i < pointsLength; i++) {
-            var middlePoint = getMiddlePointCoordinates(sourcePoint, destinationPoint);
-            // drawingContext.current.lineTo(drawPoints[i].x, drawPoints[i].y);
-            drawingContext.current.quadraticCurveTo(sourcePoint.x, sourcePoint.y, middlePoint.x, middlePoint.y);
-            sourcePoint = drawPoints.current[i];
-            destinationPoint = drawPoints.current[i + 1];
-          }
-          drawingContext.current.lineTo(sourcePoint.x, sourcePoint.y);
-          drawingContext.current.stroke();
-          drawingContext.current.fill();
-        }
-      }
-    }
-  };
-  var stopDrawing = function stopDrawing(evt) {
-    if (!renderer) return;
-    if (!isDrawing) return;
-    var nodes = Array.from(renderer.getGraph().nodes());
-    nodes.forEach(function (node) {
-      if (!renderer) return;
-      var _ref = renderer.getNodeDisplayData(node),
-        _ref$x = _ref.x,
-        nx = _ref$x === void 0 ? 0 : _ref$x,
-        _ref$y = _ref.y,
-        ny = _ref$y === void 0 ? 0 : _ref$y,
-        hidden = _ref.hidden;
-      var _renderer$framedGraph = renderer.framedGraphToViewport({
-          x: nx,
-          y: ny
-        }),
-        x = _renderer$framedGraph.x,
-        y = _renderer$framedGraph.y;
-      if (evt.shiftKey) {
-        var _drawingContext$curre;
-        ((_drawingContext$curre = drawingContext.current) === null || _drawingContext$curre === void 0 ? void 0 : _drawingContext$curre.isPointInPath(x, y)) && !hidden && renderer.getGraph().setNodeAttribute(node, "selected", true);
-      } else {
-        var _drawingContext$curre2;
-        !hidden && renderer.getGraph().setNodeAttribute(node, "selected", (_drawingContext$curre2 = drawingContext.current) === null || _drawingContext$curre2 === void 0 ? void 0 : _drawingContext$curre2.isPointInPath(x, y));
-      }
-    });
-    dettachListeners();
-  };
-  var attachListeners = function attachListeners() {
-    if (!renderer) return;
-    drawingCanvas.current = document.createElement("canvas");
-    var rect = renderer.getContainer().getBoundingClientRect();
-    drawingCanvas.current.width = rect.width;
-    drawingCanvas.current.height = rect.height;
-    drawingCanvas.current.style.setProperty("inset", "0");
-    drawingCanvas.current.style.setProperty("position", "absolute");
-    renderer.getContainer().appendChild(drawingCanvas.current);
-    drawingCanvas.current.style.cursor = "crosshair";
-    drawingCanvas.current.addEventListener("mousedown", startDrawing, {
-      capture: true
-    });
-    document.addEventListener("mousemove", drawPath);
-    document.addEventListener("mouseup", stopDrawing);
-  };
-  var dettachListeners = function dettachListeners() {
-    if (drawingContext.current) {
-      drawingContext.current.clearRect(0, 0, drawingContext.current.canvas.width, drawingContext.current.canvas.height);
-      drawingContext.current = null;
-    }
-    if (drawingCanvas.current) {
-      var _drawingCanvas$curren;
-      (_drawingCanvas$curren = drawingCanvas.current) === null || _drawingCanvas$curren === void 0 || _drawingCanvas$curren.remove();
-    }
-    document.removeEventListener("mousemove", drawPath);
-    document.removeEventListener("mouseup", stopDrawing);
-    isDrawing.current = false;
-    setMode(false);
-  };
-  var startRectangleSelection = function startRectangleSelection() {
-    setMode("rectangle");
-    attachListeners();
-  };
-  var startLassoSelection = function startLassoSelection() {
-    setMode("lasso");
-    attachListeners();
-  };
-  var cancelSelection = function cancelSelection() {
-    dettachListeners();
-  };
-  return {
-    selectionMode: mode,
-    startRectangleSelection: startRectangleSelection,
-    startLassoSelection: startLassoSelection,
-    cancelSelection: cancelSelection
-  };
-};
-
-export { useDragSelection };

package/dist/esm/hooks/sigmaHilighter.js

@@ -1,83 +0,0 @@
-'use client';
-
-import { debounce } from '@react-fabric/utilities';
-
-var attachHighlighter = function attachHighlighter(renderer) {
-  var handleEnterNode = function handleEnterNode(id, graph) {
-    try {
-      var neighbors = graph.neighbors(id);
-      graph.forEachNode(function (node) {
-        graph.setNodeAttribute(node, "opacity", node !== id && !neighbors.includes(node) ? 0.1 : 1);
-      });
-      graph.forEachEdge(function (edge) {
-        graph.setEdgeAttribute(edge, "opacity", !graph.hasExtremity(edge, id) ? 0.1 : 1);
-      });
-    } catch (_unused) {
-      //
-    }
-  };
-  var handleLeaveNode = function handleLeaveNode(graph) {
-    graph.forEachNode(function (node) {
-      graph.setNodeAttribute(node, "opacity", 1);
-    });
-    graph.forEachEdge(function (edge) {
-      graph.setEdgeAttribute(edge, "opacity", 1);
-    });
-  };
-  var handleEnterEdge = function handleEnterEdge(id, graph) {
-    try {
-      var source = graph.source(id);
-      var 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(function (node) {
-        graph.setNodeAttribute(node, "opacity", node !== source && node !== target ? 0.1 : 1);
-      });
-      graph.forEachEdge(function (edge) {
-        graph.setEdgeAttribute(edge, "opacity", edge !== id ? 0.1 : 1);
-      });
-    } catch (_unused2) {
-      //
-    }
-  };
-  var handleLeaveEdge = function handleLeaveEdge(id, graph) {
-    var source = graph.source(id);
-    var 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(function (node) {
-      graph.setNodeAttribute(node, "opacity", 1);
-      graph.setNodeAttribute(node, "highlight", false);
-    });
-    graph.forEachEdge(function (edge) {
-      graph.setEdgeAttribute(edge, "opacity", 1);
-      graph.setEdgeAttribute(edge, "highlight", false);
-    });
-  };
-  var debouceNodeEnter = debounce(function (e) {
-    handleEnterNode(e.node, renderer.getGraph());
-  });
-  var debouceEdgeEnter = debounce(function (e) {
-    handleEnterEdge(e.edge, renderer.getGraph());
-  }, 100);
-  renderer.on("enterNode", debouceNodeEnter);
-  renderer.on("leaveNode", function (e) {
-    debouceNodeEnter.cancel();
-    handleLeaveNode(renderer.getGraph());
-  });
-  renderer.on("enterEdge", debouceEdgeEnter);
-  renderer.on("leaveEdge", function (e) {
-    debouceEdgeEnter.cancel();
-    handleLeaveEdge(e.edge, renderer.getGraph());
-  });
-};
-
-export { attachHighlighter };

package/dist/esm/hooks/sigmaMouseActions.js

@@ -1,145 +0,0 @@
-'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/hooks/useGraphology.js

@@ -1,41 +0,0 @@
-'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/hooks/useSigma.js

@@ -1,112 +0,0 @@
-'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 _nodeReducer2, _nodeData$size, _nodeData$label;
-          var nodeData = (_nodeReducer2 = _nodeReducer === null || _nodeReducer === void 0 ? void 0 : _nodeReducer(data)) !== null && _nodeReducer2 !== void 0 ? _nodeReducer2 : 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.label) !== null && _nodeData$label !== void 0 ? _nodeData$label : "";
-          nodeData.id = key;
-          return nodeData;
-        },
-        edgeReducer: function edgeReducer(key, data) {
-          var _edgeReducer2, _edgeData$size;
-          var edgeData = (_edgeReducer2 = _edgeReducer === null || _edgeReducer === void 0 ? void 0 : _edgeReducer(data)) !== null && _edgeReducer2 !== void 0 ? _edgeReducer2 : 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/programs/arrow-head/frag.glsl.js

@@ -1,8 +0,0 @@
-'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 };