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

package/src/constants/index.ts

@@ -1,22 +0,0 @@
-export const ICONS = {
-  focus:
-    "M17 12C17 7.55 11.62 5.31 8.46 8.46C5.31 11.61 7.55 17 12 17C14.76 17 17 14.76 17 12M12 15C9.33 15 8 11.77 9.88 9.88C11.77 8 15 9.33 15 12C15 13.66 13.66 15 12 15M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19",
-  zoomIn:
-    "M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z",
-  zoomOut:
-    "M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z",
-  lasso:
-    "M22 9C22 5.13 17.5 2 12 2C6.5 2 2 5.13 2 9C2 9.00843 2.00002 9.01685 2.00006 9.02527C2.00952 10.8953 3.06771 12.5956 4.78 13.85C4.78103 13.847 4.78207 13.844 4.7831 13.841C5.18858 14.1369 5.63069 14.408 6.10419 14.6507C6.03614 14.9227 6 15.2072 6 15.5C6 16.76 6.67 17.87 7.67 18.5C7.46 19.11 6.97 20.96 8.3 22.05C9.91 23.38 11.66 22.97 12.56 22.69C12.8116 22.6126 13.0655 22.5076 13.3395 22.3944C14.0563 22.0981 14.9105 21.7451 16.22 21.68C17.6764 21.5995 18.9321 21.8104 19.5651 21.9167C19.7188 21.9425 19.8358 21.9622 19.91 21.97C19.91 21.97 20.86 21.97 20.97 21.04C21.08 20.1 20.03 19.97 20.03 19.97C20.03 19.97 18.43 19.7 16.39 19.71C14.9823 19.7145 13.7447 20.1595 12.703 20.5341C11.4434 20.987 10.4704 21.3368 9.83 20.68C9.18 20 9.39 19.36 9.6 19C11.3416 18.9542 12.7471 17.6481 12.9693 15.9673C13.4921 15.9319 14.0034 15.8699 14.5 15.78C18.6753 15.0244 21.7995 12.4293 21.9907 9.30406C21.9969 9.20324 22 9.10187 22 9ZM20 9C20 10.2554 19.2572 11.4047 18.032 12.2843C16.6998 13.2393 14.7966 13.8752 12.6542 13.9835C12.0881 12.8109 10.887 12 9.5 12C8.57261 12 7.72834 12.3625 7.10143 12.9533C6.61638 12.7181 6.17578 12.4489 5.78883 12.1513L5.79 12.15C4.6875 11.3034 4.02105 10.2243 4.00049 9.05571C4.00016 9.03717 4 9.01859 4 9C4 6.24 7.58 4 12 4C16.42 4 20 6.24 20 9ZM10.9988 15.5603C10.9933 15.6993 10.9689 15.8333 10.9281 15.96C10.7345 16.5641 10.1694 17 9.5 17C8.67 17 8 16.33 8 15.5C8 15.4718 8.00078 15.4437 8.00231 15.4159C8.04595 14.6266 8.69981 14 9.5 14C10.3284 14 11 14.6716 11 15.5C11 15.5202 10.9996 15.5403 10.9988 15.5603Z",
-  select:
-    "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z",
-  cancel:
-    "M3,16.74L7.76,12L3,7.26L7.26,3L12,7.76L16.74,3L21,7.26L16.24,12L21,16.74L16.74,21L12,16.24L7.26,21L3,16.74M12,13.41L16.74,18.16L18.16,16.74L13.41,12L18.16,7.26L16.74,5.84L12,10.59L7.26,5.84L5.84,7.26L10.59,12L5.84,16.74L7.26,18.16L12,13.41Z",
-  delete:
-    "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z",
-  clear:
-    "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z",
-  expand:
-    "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
-  collapse:
-    "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
-};

package/src/graph/layout.worker.ts

@@ -1,42 +0,0 @@
-import ElkConstructor from "elkjs/lib/elk-api";
-// @ts-expect-error ignore
-import ElkWorker from "elkjs/lib/elk-worker?worker";
-
-function layoutRunner({ type, nodes, edges }: KeyValue) {
-  const elk = new ElkConstructor({
-    workerFactory(url) {
-      return new ElkWorker();
-    },
-  });
-  elk
-    .layout(
-      {
-        id: "root",
-        width: 1600,
-        height: 900,
-        children: nodes,
-        edges,
-      },
-      {
-        logging: true,
-        measureExecutionTime: true,
-        layoutOptions: { "elk.algorithm": type },
-      },
-    )
-    .then((graph) => {
-      const positions = Object.fromEntries(
-        graph.children?.map((node) => [
-          node.id,
-          { x: node.x ?? 0, y: node.y ?? 0 },
-        ]) ?? [],
-      );
-      self.postMessage(positions);
-    })
-    .catch((e) => {
-      throw e;
-    });
-}
-
-self.onmessage = (event: KeyValue) => {
-  layoutRunner(event.data);
-};

package/src/hooks/sigmaDragSelect.ts

@@ -1,219 +0,0 @@
-// https://github.com/s0md3v/Quark/blob/master/libs/plugins/sigma.plugins.lasso/sigma.plugins.lasso.js
-
-import { useEffect, useRef, useState } from "react";
-import type Sigma from "sigma";
-import { type EdgeAttributes, type NodeAttributes } from "../types";
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-export const useDragSelection = (
-  renderer?: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,
-) => {
-  const isDrawing = useRef(false);
-  const drawPoints = useRef<Point[]>([]);
-  const drawingCanvas = useRef<HTMLCanvasElement>(undefined);
-  const drawingContext = useRef<CanvasRenderingContext2D | null>(null);
-  const [mode, setMode] = useState<"rectangle" | "lasso" | false>(false);
-
-  const selectionMode = useRef<"rectangle" | "lasso" | false>(false);
-
-  useEffect(() => {
-    selectionMode.current = mode;
-  }, [mode]);
-
-  const startDrawing = (evt: MouseEvent) => {
-    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";
-      }
-      const drawingRectangle = drawingCanvas.current.getBoundingClientRect();
-      drawPoints.current = [
-        {
-          x: evt.clientX - drawingRectangle.left,
-          y: evt.clientY - drawingRectangle.top,
-        },
-      ];
-    }
-    evt.stopImmediatePropagation();
-    evt.stopPropagation();
-    evt.preventDefault();
-  };
-
-  const drawPath = (evt: MouseEvent) => {
-    if (!isDrawing) return;
-
-    if (drawingCanvas.current) {
-      const drawingRectangle = drawingCanvas.current.getBoundingClientRect();
-
-      if (drawingContext.current) {
-        if (selectionMode.current === "rectangle") {
-          drawingContext.current.clearRect(
-            0,
-            0,
-            drawingCanvas.current.width,
-            drawingCanvas.current.height,
-          );
-          const { x, y } = drawPoints.current[0];
-          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
-          let sourcePoint = drawPoints.current[0];
-          let destinationPoint = drawPoints.current[1];
-          const pointsLength = drawPoints.current.length;
-          const getMiddlePointCoordinates = function (
-            firstPoint: Point,
-            secondPoint: Point,
-          ) {
-            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 (let i = 1; i < pointsLength; i++) {
-            const 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();
-        }
-      }
-    }
-  };
-
-  const stopDrawing = (evt: MouseEvent) => {
-    if (!renderer) return;
-    if (!isDrawing) return;
-
-    const nodes = Array.from(renderer.getGraph().nodes());
-
-    nodes.forEach((node) => {
-      if (!renderer) return;
-      const {
-        x: nx = 0,
-        y: ny = 0,
-        hidden,
-      } = renderer.getNodeDisplayData(node) as AnyObject;
-      const { x, y } = renderer.framedGraphToViewport({ x: nx, y: ny });
-      if (evt.shiftKey) {
-        drawingContext.current?.isPointInPath(x, y) &&
-          !hidden &&
-          renderer.getGraph().setNodeAttribute(node, "selected", true);
-      } else {
-        !hidden &&
-          renderer
-            .getGraph()
-            .setNodeAttribute(
-              node,
-              "selected",
-              drawingContext.current?.isPointInPath(x, y),
-            );
-      }
-    });
-    dettachListeners();
-  };
-
-  const attachListeners = () => {
-    if (!renderer) return;
-    drawingCanvas.current = document.createElement("canvas");
-    const 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);
-  };
-  const dettachListeners = () => {
-    if (drawingContext.current) {
-      drawingContext.current.clearRect(
-        0,
-        0,
-        drawingContext.current.canvas.width,
-        drawingContext.current.canvas.height,
-      );
-      drawingContext.current = null;
-    }
-    if (drawingCanvas.current) {
-      drawingCanvas.current?.remove();
-    }
-    document.removeEventListener("mousemove", drawPath);
-    document.removeEventListener("mouseup", stopDrawing);
-    isDrawing.current = false;
-    setMode(false);
-  };
-
-  const startRectangleSelection = () => {
-    setMode("rectangle");
-    attachListeners();
-  };
-  const startLassoSelection = () => {
-    setMode("lasso");
-    attachListeners();
-  };
-
-  const cancelSelection = () => {
-    dettachListeners();
-  };
-
-  return {
-    selectionMode: mode,
-    startRectangleSelection,
-    startLassoSelection,
-    cancelSelection,
-  };
-};

package/src/hooks/sigmaHilighter.ts

@@ -1,107 +0,0 @@
-import { debounce } from "@react-fabric/utilities";
-import type Graph from "graphology";
-import type Sigma from "sigma";
-import { type SigmaEdgeEventPayload, type SigmaNodeEventPayload } from "sigma/types";
-import { type EdgeAttributes, type 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

@@ -1,153 +0,0 @@
-import type Graph from "graphology";
-import type Sigma from "sigma";
-import { type MouseCoords } from "sigma/types";
-import { type EdgeAttributes, type 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

@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-import { Graph } from "../graph";
-import { type 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

@@ -1,118 +0,0 @@
-import { useIsDark } from "@react-fabric/core";
-import { useEffect, useState } from "react";
-import Sigma from "sigma";
-import { type 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 {
-  type EdgeAttributes,
-  type InternalEdgeAttributes,
-  type InternalNodeAttributes,
-  type 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,
-  };
-};