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

package/src/graph/index.ts

@@ -1,27 +1,35 @@
-import { debounce } from "@react-fabric/utilities";
-import {
-  DEFAULT_EDGE_CURVATURE,
-  indexParallelEdgesIndex,
-} from "@sigma/edge-curve";
-import ElkConstructor, { type ELK } from "elkjs/lib/elk.bundled";
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
 import Graphology from "graphology";
-import { circular } from "graphology-layout";
-import forceAtlas2, {
-  type ForceAtlas2Settings,
-} from "graphology-layout-forceatlas2";
-import ForceAtlas2Worker from "graphology-layout-forceatlas2/worker";
-import { type GraphEvents, type GraphOptions } from "graphology-types";
-import { animateNodes } from "sigma/utils";
-// @ts-expect-error ignore
-import ElkWorker from "../../../../node_modules/elkjs/lib/elk-worker?worker";
-import {
-  type EdgeAttributes,
-  type InternalNodeAttributes,
-  type NodeAttributes,
-  type RawGraph,
-} from "../types";
+import { random } from "graphology-layout";
+import forceAtlas2 from "graphology-layout-forceatlas2";
+import type { GraphEvents } from "graphology-types";
+import type { EdgeAttributes, InternalEdge, InternalNode, NodeAttributes, RawGraph } from "../types";
 
-interface ExtendedEvents extends GraphEvents {
+interface ExtendedEvents<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> extends GraphEvents<InternalNode<N>, InternalEdge<E>> {
   nodesLoaded: (nodes: string[]) => void;
   nodesDropped: (nodes: string[]) => void;
   nodesSelected: (nodes: string[]) => void;
@@ -29,405 +37,74 @@ interface ExtendedEvents extends GraphEvents {
   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: Array<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: Array<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;
+export class Graph<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> extends Graphology<NodeAttributes<N>, EdgeAttributes<E>> {
+  constructor() {
+    super({ multi: true });
   }
 
-  groupNodes(
-    key: string,
-    nodes: string[],
-    attributesOrNodeReducer?:
-      | NodeAttributes<N>
-      | ((attributes: Array<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: Array<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(
+  importGraph(data: RawGraph<N, E>, applyLayout = true): this {
+    super.clear();
+    super.import(
       {
-        nodes: [{ key, attributes: newNodeAttributes }],
-        edges: edgeList.concat(movedEdges),
+        nodes: data.nodes.map((n) => ({ key: n.id, attributes: this.enrichNodeAttributes(n) })),
+        edges: data.edges.map((e) => ({
+          key: e.id,
+          source: e.source,
+          target: e.target,
+          attributes: e,
+        })),
       },
-      true,
+      false,
     );
-    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);
+    setTimeout(() => {
+      if (applyLayout) {
+        random.assign(this);
+        const settings = forceAtlas2.inferSettings(this);
+        forceAtlas2.assign(this, {
+          iterations: 500,
+          settings,
         });
       }
-      this.setNodeAttribute(n, "hidden", false);
-      this.removeNodeAttribute(n, "originalEdges");
-    });
-    this.dropNode(node);
+      this.emit("layoutDone");
+    }, 500);
     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;
+  on<Event extends keyof ExtendedEvents<N, E>>(type: Event, listener: ExtendedEvents<N, E>[Event]) {
+    return super.on(type as AnyObject, listener);
   }
 
-  // @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");
-    //   },
-    // );
-    void this.elkLayout("force");
-    return this;
+  off<Event extends keyof ExtendedEvents<N, E>>(type: Event, listener: ExtendedEvents<N, E>[Event]) {
+    return super.off(type as AnyObject, listener);
   }
 
-  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;
+  emit<Event extends keyof ExtendedEvents<N, E>>(type: Event, ...args: Parameters<ExtendedEvents<N, E>[Event]>) {
+    return super.emit(type as AnyObject, ...args);
   }
 
-  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__,
-    );
+  /**
+   * @deprecated
+   * use `importGraph` instead
+   */
+  override import(): this {
+    throw new Error("Graphology import is deprecated, use `importGraph` instead");
     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
+   * @deprecated
+   * use `exportGraph` instead
    */
-  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;
+  override export() {
+    throw new Error("Graphology export is deprecated, use `exportGraph` instead");
+    return { nodes: [], edges: [], attributes: {}, options: {} };
   }
 
-  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);
-        }
-      },
-    );
+  private enrichNodeAttributes(node: InternalNode<N>) {
+    if (!node.x && !node.y) {
+      node.x = 0;
+      node.y = 0;
+    }
+    return node;
   }
 }

package/src/index.ts

@@ -1,34 +1,32 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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.
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
  */
 
-export { SigmaGraph } from "./components/Viewer";
+export const GRAPH_PACKAGE = "@react-fabric/graph";
+export const GRAPH_VERSION = "1.0.0";
+
 export { Graph } from "./graph";
-export type {
-  EdgeAttributes,
-  GraphRef,
-  NodeAttributes,
-  RawGraph,
-} from "./types";
+export type { EdgeAttributes, InternalEdge, InternalNode, NodeAttributes, PublicEdge, PublicNode, RawGraph } from "./types";
 
-// @ts-expect-error ignore
-window.__GRAPH_LAYOUT_DURATION_MULTIPLIER__ = 10;
+export { GraphViewer } from "./viewer/Graph";