@react-fabric/graph 1.0.0-beta.58

package/src/graph/index.ts

@@ -0,0 +1,428 @@
+import { debounce } from "@react-fabric/utilities";
+import {
+  DEFAULT_EDGE_CURVATURE,
+  indexParallelEdgesIndex,
+} from "@sigma/edge-curve";
+import ElkConstructor, { ELK } from "elkjs/lib/elk.bundled";
+// @ts-expect-error ignore
+import ElkWorker from "../../../../node_modules/elkjs/lib/elk-worker?worker";
+import Graphology from "graphology";
+import { random } from "graphology-layout";
+import { GraphEvents, GraphOptions } from "graphology-types";
+import { animateNodes } from "sigma/utils";
+import {
+  EdgeAttributes,
+  InternalNodeAttributes,
+  NodeAttributes,
+  RawGraph,
+} from "../types";
+
+interface ExtendedEvents extends GraphEvents {
+  nodesLoaded: (nodes: string[]) => void;
+  nodesDropped: (nodes: string[]) => void;
+  nodesSelected: (nodes: string[]) => void;
+  layoutRunning: (isRunning: boolean) => void;
+  layoutDone: () => void;
+}
+
+export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
+  InternalNodeAttributes<N>,
+  EdgeAttributes<E>,
+  KeyValue
+> {
+  constructor(options?: GraphOptions) {
+    super(options);
+
+    const edgeHandler = debounce(() => this.checkParallelEdges());
+    this.on("edgeAdded", edgeHandler);
+    this.on("edgeDropped", edgeHandler);
+
+    const fireNodeSelect = debounce(() => {
+      this.emit(
+        "nodesSelected",
+        this.filterNodes((_, atts) => atts.selected),
+      );
+    });
+    const nodeSelectHandler = ({ name }: KeyValue) => {
+      if (name === "selected") {
+        fireNodeSelect();
+      }
+    };
+    this.on("nodeDropped", fireNodeSelect);
+    this.on("nodeAttributesUpdated", nodeSelectHandler);
+  }
+
+  on<Event extends keyof ExtendedEvents>(
+    type: Event,
+    listener: ExtendedEvents[Event],
+  ) {
+    return super.on(type as AnyObject, listener);
+  }
+
+  off<Event extends keyof ExtendedEvents>(
+    type: Event,
+    listener: ExtendedEvents[Event],
+  ) {
+    return super.off(type as AnyObject, listener);
+  }
+
+  emit<Event extends keyof ExtendedEvents>(
+    type: Event,
+    ...args: Parameters<ExtendedEvents[Event]>
+  ) {
+    return super.emit(type as AnyObject, ...args);
+  }
+
+  mergeNodes(
+    key: string,
+    nodes: string[],
+    attributesOrNodeReducer?:
+      | NodeAttributes<N>
+      | ((attributes: NodeAttributes<N>[]) => NodeAttributes<N>),
+    edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"],
+  ) {
+    if (!nodes.length) return;
+    let newNodeAttributes: NodeAttributes<N> = {};
+    let edgeList: RawGraph<N, E>["edges"] = [];
+    const attributeList: NodeAttributes<N>[] = [];
+    nodes.forEach((n) => {
+      const atts = this.getNodeAttributes(n);
+      if (atts) {
+        attributeList.push(atts);
+      }
+      const edges = this.edges(n);
+      if (edges.length) {
+        edges.forEach((e) => {
+          const source = this.source(e);
+          const target = this.target(e);
+          const edge = this.getEdgeAttributes(e);
+          if (edge) {
+            edgeList.push({
+              key: e,
+              // move source to new node if source is old node
+              source: source === n ? key : source,
+              // move target to new node if target is old node
+              target: target === n ? key : target,
+              attributes: edge,
+            });
+          }
+        });
+      }
+    });
+    if (typeof attributesOrNodeReducer === "function") {
+      newNodeAttributes = attributesOrNodeReducer(attributeList);
+    } else if (typeof attributesOrNodeReducer === "object") {
+      Object.assign(newNodeAttributes, attributesOrNodeReducer);
+    }
+    if (typeof edgeReducer === "function") {
+      edgeList = edgeReducer(edgeList);
+    }
+    this.dropNodes(nodes);
+    this.import(
+      {
+        nodes: [{ key, attributes: newNodeAttributes }],
+        edges: edgeList,
+      },
+      true,
+    );
+    return this;
+  }
+
+  groupNodes(
+    key: string,
+    nodes: string[],
+    attributesOrNodeReducer?:
+      | NodeAttributes<N>
+      | ((attributes: NodeAttributes<N>[]) => NodeAttributes<N>),
+    edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"],
+  ) {
+    if (!nodes.length) return;
+    let newNodeAttributes: NodeAttributes<N> = {
+      nodeList: nodes,
+      isGroup: true,
+      expanded: false,
+    } as any;
+    let edgeList: RawGraph<N, E>["edges"] = [];
+    const movedEdges: RawGraph<N, E>["edges"] = [];
+    const attributeList: NodeAttributes<N>[] = [];
+    nodes.forEach((n) => {
+      const atts = this.getNodeAttributes(n);
+      if (atts) {
+        attributeList.push(atts);
+      }
+      const edges = this.edges(n);
+      if (edges.length) {
+        const nodeEdges = edges.map((e) => {
+          const source = this.source(e);
+          const target = this.target(e);
+          const edge = this.getEdgeAttributes(e);
+          if (edge) {
+            movedEdges.push({
+              key: e,
+              // move source to group node if source is not old node
+              source: source === n ? n : key,
+              // move target to group node if target is not old node
+              target: target === n ? n : key,
+              attributes: edge,
+            });
+            // make new connection to neighboring node
+            edgeList.push({
+              key: `${key}-${e}`,
+              source: source === n ? key : source,
+              target: target === n ? key : target,
+              attributes: edge,
+            });
+          }
+          this.dropEdge(e);
+          return {
+            key: e,
+            // move source to group node if source is not old node
+            source,
+            // move target to group node if target is not old node
+            target,
+            attributes: edge,
+          };
+        });
+        this.setNodeAttribute(n, "hidden", true);
+        this.setNodeAttribute(n, "selected", false);
+        // store original edges for grouped node
+        this.setNodeAttribute(n, "originalEdges", nodeEdges);
+      }
+    });
+    if (typeof attributesOrNodeReducer === "function") {
+      newNodeAttributes = Object.assign(
+        newNodeAttributes,
+        attributesOrNodeReducer(attributeList),
+      );
+    } else if (typeof attributesOrNodeReducer === "object") {
+      Object.assign(newNodeAttributes, attributesOrNodeReducer);
+    }
+    if (typeof edgeReducer === "function") {
+      edgeList = edgeReducer(edgeList);
+    }
+    this.import(
+      {
+        nodes: [{ key, attributes: newNodeAttributes }],
+        edges: edgeList.concat(movedEdges),
+      },
+      true,
+    );
+    return this;
+  }
+
+  ungroupNode(node: string) {
+    const atts = this.getNodeAttributes(node);
+    if (!atts || !atts.isGroup) return;
+    const nodes = atts.nodeList || [];
+    nodes.forEach((n: string) => {
+      const originalEdges = this.getNodeAttribute(n, "originalEdges");
+      if (originalEdges && Array.isArray(originalEdges)) {
+        originalEdges.forEach((e) => {
+          this.addEdgeWithKey(e.key, e.source, e.target, e.attributes);
+        });
+      }
+      this.setNodeAttribute(n, "hidden", false);
+      this.removeNodeAttribute(n, "originalEdges");
+    });
+    this.dropNode(node);
+    return this;
+  }
+
+  toggleExpanded(node: string, force?: boolean) {
+    const expanded = force ?? !this.getNodeAttribute(node, "expanded");
+    const nodes = this.getNodeAttribute(node, "nodeList");
+    this.setNodeAttribute(node, "expanded", expanded);
+    nodes?.forEach((n: string) => {
+      this.setNodeAttribute(n, "hidden", !expanded);
+    });
+    return this;
+  }
+
+  // @ts-expect-error ignore
+  import(data: RawGraph<N, E> | Graph<N, E>, merge?: boolean) {
+    const newNodes = [];
+    if (data instanceof Graph) {
+      newNodes.push(...data.nodes());
+    } else {
+      newNodes.push(...data.nodes.map((n) => n.key));
+    }
+    super.import(data as any, merge);
+    // fire events for nodes added
+    this.emit("nodesLoaded", newNodes);
+    // apply random positions for nodes
+    const positions = random(this as any);
+    animateNodes(
+      this as any,
+      positions,
+      {
+        duration: 200,
+      },
+      () => {
+        // fire layout done event
+        this.emit("layoutDone");
+      },
+    );
+    return this;
+  }
+
+  // circularLayout() {
+  //   if (this.size === 0) return this;
+  //   const positions = circular(this as any);
+  //   animateNodes(
+  //     this as any,
+  //     positions,
+  //     {
+  //       duration: 200,
+  //     },
+  //     () => {
+  //       this.emit("layoutDone");
+  //     },
+  //   );
+  //   return this;
+  // }
+
+  // private _timer: any;
+  // private _worker?: forceAtlas2Worker;
+  // forceLayout(settings: ForceAtlas2Settings = {}) {
+  //   if (this.size === 0) return this;
+  //   const sensibleSettings = forceAtlas2.inferSettings(this as any);
+  //   if (this._worker?.isRunning()) {
+  //     clearTimeout(this._timer);
+  //   }
+  //   this._worker?.kill();
+  //   this._worker = new forceAtlas2Worker(this as any, {
+  //     settings: {
+  //       ...sensibleSettings,
+  //       ...settings,
+  //     },
+  //   });
+  //   this.emit("layoutRunning", true);
+  //   this._worker.start();
+  //   this._timer = setTimeout(
+  //     () => {
+  //       this._worker?.stop();
+  //       this._worker?.kill();
+  //       this.emit("layoutRunning", false);
+  //       this.emit("layoutDone");
+  //     },
+  //     // @ts-expect-error ignore
+  //     this.nodes().length * window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__,
+  //   );
+  //   return this;
+  // }
+
+  // @ts-expect-error ignore
+  private elk: ELK;
+  async elkLayout(type: string) {
+    if (!this.elk)
+      this.elk = new ElkConstructor({
+        workerFactory() {
+          return new ElkWorker();
+        },
+      });
+    this.emit("layoutRunning", true);
+    this.elk
+      .layout(
+        {
+          id: "root",
+          width: 1600,
+          height: 900,
+          children: this.mapNodes((node, atts) => ({
+            id: node,
+            width: atts.size ?? Math.max(16, (atts.weight ?? 0) * 3),
+            height: atts.size ?? Math.max(16, (atts.weight ?? 0) * 3),
+          })),
+          edges: this.mapEdges((edge, _, source, target) => ({
+            id: edge,
+            sources: [source],
+            targets: [target],
+          })),
+        },
+        {
+          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 },
+          ]) ?? [],
+        );
+        animateNodes(
+          this as any,
+          positions,
+          {
+            duration: 200,
+          },
+          () => {
+            setTimeout(() => {
+              this.emit("layoutDone");
+            }, 100);
+          },
+        );
+      })
+      .catch(console.error)
+      .finally(() => {
+        this.emit("layoutRunning", false);
+      });
+  }
+
+  dropNodes(nodes: string[]) {
+    if (!nodes.length) return;
+    nodes.forEach((n) => this.dropNode(n));
+  }
+
+  /**
+   * parallel edge check to be called after adding edges
+   */
+  private getCurvature(index: number, maxIndex: number = 0): number {
+    if (maxIndex <= 0) throw new Error("Invalid maxIndex");
+    if (index < 0) return -this.getCurvature(-index, maxIndex);
+    const amplitude = 0.25;
+    const maxCurvature =
+      amplitude *
+      (1 - Math.exp(-maxIndex / amplitude)) *
+      DEFAULT_EDGE_CURVATURE;
+    return (maxCurvature * index) / maxIndex;
+  }
+
+  private checkParallelEdges() {
+    // Use dedicated helper to identify parallel edges:
+    // @ts-expect-error ignore
+    indexParallelEdgesIndex(this, {
+      edgeIndexAttribute: "parallelIndex",
+      edgeMinIndexAttribute: "parallelMinIndex",
+      edgeMaxIndexAttribute: "parallelMaxIndex",
+    });
+    // Adapt types and curvature of parallel edges for rendering:
+    this.forEachEdge(
+      (
+        edge: string,
+        { parallelIndex, parallelMinIndex, parallelMaxIndex }: AnyObject,
+      ) => {
+        if (typeof parallelMinIndex === "number") {
+          this.mergeEdgeAttributes(edge, {
+            type: parallelIndex ? "curved" : "line",
+            curvature: this.getCurvature(
+              parallelIndex ?? 1,
+              parallelMaxIndex ?? 1,
+            ),
+          } as AnyObject);
+        } else if (typeof parallelIndex === "number") {
+          this.mergeEdgeAttributes(edge, {
+            type: "curved",
+            curvature: this.getCurvature(
+              parallelIndex ?? 1,
+              parallelMaxIndex ?? 1,
+            ),
+          } as AnyObject);
+        } else {
+          this.setEdgeAttribute(edge, "type", "line" as AnyObject);
+        }
+      },
+    );
+  }
+}

package/src/graph/layout.worker.ts

@@ -0,0 +1,42 @@
+import ElkConstructor from "elkjs/lib/elk-api";
+// @ts-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

@@ -0,0 +1,219 @@
+// 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,
+  };
+};