@react-fabric/graph 1.0.0-beta.59 → 1.0.0-beta.61

package/src/graph/index.ts

@@ -3,18 +3,22 @@ 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 ElkConstructor, { type ELK } from "elkjs/lib/elk.bundled";
 import Graphology from "graphology";
-import { random } from "graphology-layout";
-import { GraphEvents, GraphOptions } from "graphology-types";
+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 {
-  EdgeAttributes,
-  InternalNodeAttributes,
-  NodeAttributes,
-  RawGraph,
+  type EdgeAttributes,
+  type InternalNodeAttributes,
+  type NodeAttributes,
+  type RawGraph,
 } from "../types";
 
 interface ExtendedEvents extends GraphEvents {
@@ -78,13 +82,13 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
     nodes: string[],
     attributesOrNodeReducer?:
       | NodeAttributes<N>
-      | ((attributes: NodeAttributes<N>[]) => 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: NodeAttributes<N>[] = [];
+    const attributeList: Array<NodeAttributes<N>> = [];
     nodes.forEach((n) => {
       const atts = this.getNodeAttributes(n);
       if (atts) {
@@ -133,7 +137,7 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
     nodes: string[],
     attributesOrNodeReducer?:
       | NodeAttributes<N>
-      | ((attributes: NodeAttributes<N>[]) => NodeAttributes<N>),
+      | ((attributes: Array<NodeAttributes<N>>) => NodeAttributes<N>),
     edgeReducer?: (edges: RawGraph<N, E>["edges"]) => RawGraph<N, E>["edges"],
   ) {
     if (!nodes.length) return;
@@ -144,7 +148,7 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
     } as any;
     let edgeList: RawGraph<N, E>["edges"] = [];
     const movedEdges: RawGraph<N, E>["edges"] = [];
-    const attributeList: NodeAttributes<N>[] = [];
+    const attributeList: Array<NodeAttributes<N>> = [];
     nodes.forEach((n) => {
       const atts = this.getNodeAttributes(n);
       if (atts) {
@@ -213,7 +217,7 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
   ungroupNode(node: string) {
     const atts = this.getNodeAttributes(node);
     if (!atts || !atts.isGroup) return;
-    const nodes = atts.nodeList || [];
+    const nodes = atts.nodeList ?? [];
     nodes.forEach((n: string) => {
       const originalEdges = this.getNodeAttribute(n, "originalEdges");
       if (originalEdges && Array.isArray(originalEdges)) {
@@ -250,7 +254,25 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
     // fire events for nodes added
     this.emit("nodesLoaded", newNodes);
     // apply random positions for nodes
-    const positions = random(this as any);
+    // 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;
+  }
+
+  circularLayout() {
+    if (this.size === 0) return this;
+    const positions = circular(this as any);
     animateNodes(
       this as any,
       positions,
@@ -258,58 +280,41 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
         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;
-  // }
+  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;
@@ -325,8 +330,8 @@ export class Graph<N = KeyValue, E = KeyValue> extends Graphology<
       .layout(
         {
           id: "root",
-          width: 1600,
-          height: 900,
+          // width: 1600,
+          // height: 900,
           children: this.mapNodes((node, atts) => ({
             id: node,
             width: atts.size ?? Math.max(16, (atts.weight ?? 0) * 3),

package/src/graph/layout.worker.ts

@@ -1,5 +1,5 @@
 import ElkConstructor from "elkjs/lib/elk-api";
-// @ts-ignore
+// @ts-expect-error ignore
 import ElkWorker from "elkjs/lib/elk-worker?worker";
 
 function layoutRunner({ type, nodes, edges }: KeyValue) {

package/src/hooks/sigmaHilighter.ts

@@ -1,8 +1,8 @@
 import { debounce } from "@react-fabric/utilities";
 import type Graph from "graphology";
 import type Sigma from "sigma";
-import { SigmaEdgeEventPayload, SigmaNodeEventPayload } from "sigma/types";
-import { EdgeAttributes, NodeAttributes } from "../types";
+import { type SigmaEdgeEventPayload, type SigmaNodeEventPayload } from "sigma/types";
+import { type EdgeAttributes, type NodeAttributes } from "../types";
 
 export const attachHighlighter = (
   renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,

package/src/hooks/sigmaMouseActions.ts

@@ -1,7 +1,7 @@
 import type Graph from "graphology";
 import type Sigma from "sigma";
 import { type MouseCoords } from "sigma/types";
-import { EdgeAttributes, NodeAttributes } from "../types";
+import { type EdgeAttributes, type NodeAttributes } from "../types";
 
 export const attachMouseActions = (
   renderer: Sigma<NodeAttributes<any>, EdgeAttributes<any>>,

package/src/hooks/useGraphology.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Graph } from "../graph";
-import { GraphProps } from "../types";
+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 }));

package/src/hooks/useSigma.ts

@@ -1,16 +1,16 @@
 import { useIsDark } from "@react-fabric/core";
 import { useEffect, useState } from "react";
 import Sigma from "sigma";
-import { Graph } from "../graph";
+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 {
-  EdgeAttributes,
-  InternalEdgeAttributes,
-  InternalNodeAttributes,
-  NodeAttributes,
+  type EdgeAttributes,
+  type InternalEdgeAttributes,
+  type InternalNodeAttributes,
+  type NodeAttributes,
 } from "../types";
 import { attachHighlighter } from "./sigmaHilighter";
 import { attachMouseActions } from "./sigmaMouseActions";
@@ -55,7 +55,7 @@ export const useSigma = <N, E>(
         },
         nodeReducer(key, data) {
           const nodeData: InternalNodeAttributes<N> =
-            nodeReducer?.(data) || data;
+            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);
@@ -65,13 +65,13 @@ export const useSigma = <N, E>(
           }
 
           // ensure node label renderer is called in order to render selected border
-          nodeData.label = nodeData.label || "";
+          nodeData.label = nodeData.label ?? "";
           nodeData.id = key;
           return nodeData;
         },
         edgeReducer(key, data) {
           const edgeData: InternalEdgeAttributes<E> =
-            edgeReducer?.(data) || data;
+            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);

package/src/programs/arrow-head/frag.glsl.ts

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 
 // language=GLSL
-const SHADER_SOURCE = /*glsl*/ `
+const SHADER_SOURCE = /* glsl */ `
 precision mediump float;
 
 varying vec4 v_color;

package/src/programs/arrow-head/index.ts

@@ -1,9 +1,18 @@
-import { Attributes } from "graphology-types";
-
-import { EdgeProgram, EdgeProgramType, ProgramInfo } from "sigma/rendering";
-import { EdgeDisplayData, NodeDisplayData, RenderParams } from "sigma/types";
+/* eslint-disable @typescript-eslint/naming-convention */
+import { type Attributes } from "graphology-types";
+
+import {
+  EdgeProgram,
+  type EdgeProgramType,
+  type ProgramInfo,
+} from "sigma/rendering";
+import {
+  type EdgeDisplayData,
+  type NodeDisplayData,
+  type RenderParams,
+} from "sigma/types";
 import { floatColor } from "sigma/utils";
-import { InternalEdgeAttributes } from "../../types";
+import { type InternalEdgeAttributes } from "../../types";
 import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
 import VERTEX_SHADER_SOURCE from "./vert.glsl";
 
@@ -18,11 +27,11 @@ const UNIFORMS = [
   "u_widenessToThicknessRatio",
 ] as const;
 
-export type CreateEdgeArrowHeadProgramOptions = {
+export interface CreateEdgeArrowHeadProgramOptions {
   extremity: "source" | "target";
   lengthToThicknessRatio: number;
   widenessToThicknessRatio: number;
-};
+}
 
 export const DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS: CreateEdgeArrowHeadProgramOptions =
   {
@@ -40,7 +49,7 @@ export function createEdgeArrowHeadProgram<
 ): EdgeProgramType<N, E, G> {
   const options = {
     ...DEFAULT_EDGE_ARROW_HEAD_PROGRAM_OPTIONS,
-    ...(inputOptions || {}),
+    ...(inputOptions ?? {}),
   };
 
   return class EdgeArrowHeadProgram<

package/src/programs/arrow-head/vert.glsl.ts

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 
 // language=GLSL
-const SHADER_SOURCE = /*glsl*/ `
+const SHADER_SOURCE = /* glsl */ `
 attribute vec2 a_position;
 attribute vec2 a_normal;
 attribute float a_radius;

package/src/programs/edge-curve/index.ts

@@ -13,7 +13,7 @@ import {
   type RenderParams,
 } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import { InternalEdgeAttributes } from "../../types";
+import { type InternalEdgeAttributes } from "../../types";
 import { createDrawCurvedEdgeLabel } from "./drawLabel";
 import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
 import VERTEX_SHADER_SOURCE from "./vert.glsl";
@@ -84,7 +84,7 @@ export class EdgeCurveProgramBase<
 
     const thickness =
       Math.min(data.size || 1, 0.5) *
-      (data.selected || data.highlight ? 16 : 8);
+      (data.selected ?? data.highlight ? 16 : 8);
     const x1 = sourceData.x;
     const y1 = sourceData.y;
     const x2 = targetData.x;

package/src/programs/edge-line/index.ts

@@ -12,7 +12,7 @@ import {
   type RenderParams,
 } from "sigma/types";
 import { floatColor } from "sigma/utils";
-import { InternalEdgeAttributes } from "../../types";
+import { type InternalEdgeAttributes } from "../../types";
 import { createEdgeArrowHeadProgram } from "../arrow-head";
 import { drawLineLabel } from "./drawLabel";
 import FRAGMENT_SHADER_SOURCE from "./frag.glsl";
@@ -86,7 +86,7 @@ class EdgeLineProgramBase<
     if (data.highlight) color = "#F54A4A";
 
     const thickness =
-      Math.min(data.size || 1, 0.5) * (data.selected || data.highlight ? 8 : 4);
+      Math.min(data.size || 1, 0.5) * (data.selected ?? data.highlight ? 8 : 4);
     const x1 = sourceData.x;
     const y1 = sourceData.y;
     const x2 = targetData.x;

package/src/programs/node-badge/factory.ts

@@ -259,14 +259,14 @@ export default function getNodeImageProgram(
 
       const badge = data.badge?.find((b) => b.position === badgePosition);
 
-      let fill = floatColor(badge?.color ?? "#00000000");
-      let color = floatColor(
+      const fill = floatColor(badge?.color ?? "#00000000");
+      const color = floatColor(
         badge?.iconColor ??
           this.renderer.getSetting("labelColor").color ??
           "#000",
       );
 
-      let imageSource = badge
+      const imageSource = badge
         ? ICON_MAP[badge.type as any] ?? badge.path
         : undefined;
 

package/src/programs/node-badge/vert.glsl.ts

@@ -61,16 +61,16 @@ void main() {
     position.x += originalSize / divisor;
     position.y -= originalSize / divisor;
   }
-  if(a_placement == ${POSITION["top"]}) {
+  if(a_placement == ${POSITION.top}) {
     position.y += originalSize / 2.0;
   }
-  if(a_placement == ${POSITION["bottom"]}) {
+  if(a_placement == ${POSITION.bottom}) {
     position.y -= originalSize / 2.0;
   }
-  if(a_placement == ${POSITION["left"]}) {
+  if(a_placement == ${POSITION.left}) {
     position.x -= originalSize / 2.0;
   }
-  if(a_placement == ${POSITION["right"]}) {
+  if(a_placement == ${POSITION.right}) {
     position.x += originalSize / 2.0;
   }
   gl_Position = vec4(

package/src/programs/node-circle/base/drawHover.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type NodeAttributes } from "../../../types";
 import { drawNodeLabel } from "./drawLabel";
 
 /* istanbul ignore file */
@@ -21,7 +21,7 @@ export function drawNodeHover(
   // use node color or default node color
   const bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  const color = data.labelColor || settings.labelColor.color || "#000";
+  const color = data.labelColor ?? settings.labelColor.color ?? "#000";
 
   context.font = `${weight} ${size}px ${font}`;
 

package/src/programs/node-circle/base/drawLabel.ts

@@ -1,8 +1,8 @@
 import { type Settings } from "sigma/settings";
 import {
-  EdgeAttributes,
-  InternalNodeAttributes,
-  NodeAttributes,
+  type EdgeAttributes,
+  type InternalNodeAttributes,
+  type NodeAttributes,
 } from "../../../types";
 
 /* istanbul ignore file */
@@ -24,7 +24,7 @@ export function drawNodeLabel(
   // use node color or default node color
   const bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  const color = data.labelColor || settings.labelColor.color || "#000";
+  const color = data.labelColor ?? settings.labelColor.color ?? "#000";
 
   if (data.highlight) {
     // Then we draw the label background
@@ -108,10 +108,10 @@ export function drawNodeLabel(
     const container =
       context.canvas.parentElement?.parentElement?.querySelector(
         ".sigma-groupHandles",
-      ) as HTMLDivElement;
+      ) as unknown as HTMLElement;
     let handle = container.querySelector(
       `[data-id="${data.id}"]`,
-    ) as HTMLDivElement;
+    ) as unknown as HTMLElement;
     if (!handle) {
       handle = document.createElement("div");
       handle.className = "sigma-groupHandle";

package/src/programs/node-circle/index.ts

@@ -1,5 +1,5 @@
 import { createNodeCompoundProgram } from "sigma/rendering";
-import { NodeAttributes } from "../../types";
+import { type NodeAttributes } from "../../types";
 import { NodeBadgeProgram } from "../node-badge";
 import { NodeImageProgram } from "../node-image";
 import { NodeCircleBase } from "./base";

package/src/programs/node-rect/base/drawHover.ts

@@ -1,5 +1,5 @@
 import { type Settings } from "sigma/settings";
-import { EdgeAttributes, NodeAttributes } from "../../../types";
+import { type EdgeAttributes, type NodeAttributes } from "../../../types";
 import { drawNodeLabel } from "./drawLabel";
 
 /* istanbul ignore file */
@@ -21,7 +21,7 @@ export function drawNodeHover(
   // use node color or default node color
   const bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  const color = data.labelColor || settings.labelColor.color || "#000";
+  const color = data.labelColor ?? settings.labelColor.color ?? "#000";
 
   context.font = `${weight} ${size}px ${font}`;
 

package/src/programs/node-rect/base/drawLabel.ts

@@ -1,8 +1,8 @@
 import { type Settings } from "sigma/settings";
 import {
-  EdgeAttributes,
-  InternalNodeAttributes,
-  NodeAttributes,
+  type EdgeAttributes,
+  type InternalNodeAttributes,
+  type NodeAttributes,
 } from "../../../types";
 
 /* istanbul ignore file */
@@ -24,7 +24,7 @@ export function drawNodeLabel(
   // use node color or default node color
   const bg = settings.defaultNodeColor || "#fff";
   // use label color or default label color
-  const color = data.labelColor || settings.labelColor.color || "#000";
+  const color = data.labelColor ?? settings.labelColor.color ?? "#000";
 
   if (data.highlight) {
     // Then we draw the label background
@@ -112,10 +112,10 @@ export function drawNodeLabel(
     const container =
       context.canvas.parentElement?.parentElement?.querySelector(
         ".sigma-groupHandles",
-      ) as HTMLDivElement;
+      ) as unknown as HTMLElement;
     let handle = container.querySelector(
       `[data-id="${data.id}"]`,
-    ) as HTMLDivElement;
+    ) as unknown as HTMLElement;
     if (!handle) {
       handle = document.createElement("div");
       handle.className = "sigma-groupHandle";

package/src/programs/node-rect/index.ts

@@ -1,5 +1,5 @@
 import { createNodeCompoundProgram } from "sigma/rendering";
-import { NodeAttributes } from "../../types";
+import { type NodeAttributes } from "../../types";
 import { NodeBadgeProgram } from "../node-badge";
 import { NodeImageProgram } from "../node-image";
 import { NodeRectBase } from "./base";

package/src/types/index.ts

@@ -1,6 +1,6 @@
-import { GraphOptions } from "graphology-types";
-import { RefObject } from "react";
-import { Graph } from "../graph";
+import { type GraphOptions } from "graphology-types";
+import { type RefObject } from "react";
+import { type Graph } from "../graph";
 
 interface NodeBadge {
   position:
@@ -179,13 +179,13 @@ export interface InternalEdgeAttributes<E = KeyValue>
 }
 
 export interface RawGraph<N = KeyValue, E = KeyValue> {
-  nodes: { key: string; attributes?: NodeAttributes<N> }[];
-  edges: {
+  nodes: Array<{ key: string; attributes?: NodeAttributes<N> }>;
+  edges: Array<{
     key: string;
     source: string;
     target: string;
     attributes?: EdgeAttributes<E>;
-  }[];
+  }>;
   attributes?: KeyValue;
   options?: GraphOptions;
 }