@react-fabric/graph 1.0.0-beta.58

package/dist/types/programs/node-circle/base/vert.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const SHADER_SOURCE: string;
+export default SHADER_SOURCE;

package/dist/types/programs/node-circle/index.d.ts

@@ -0,0 +1,11 @@
+import { NodeAttributes } from "../../types";
+export declare const NodeCircleProgram: {
+    new (_gl: WebGLRenderingContext, _pickingBuffer: WebGLFramebuffer | null, _renderer: import("sigma").default<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes>): {
+        drawLabel: import("sigma/rendering").NodeLabelDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;
+        drawHover: import("sigma/rendering").NodeHoverDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;
+        kill(): void;
+        reallocate(_capacity: number): void;
+        process(_nodeIndex: number, _offset: number, _data: import("sigma/types").NodeDisplayData): void;
+        render(_params: import("sigma/types").RenderParams): void;
+    };
+};

package/dist/types/programs/node-image/factory.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes } from "graphology-types";
+import { type NodeHoverDrawingFunction, type NodeLabelDrawingFunction, type NodeProgramType } from "sigma/rendering";
+import { type EdgeAttributes, type NodeAttributes } from "../../types";
+import { type TextureManagerOptions } from "./texture";
+interface CreateNodeImageProgramOptions<N extends Attributes, E extends Attributes, G extends Attributes> extends TextureManagerOptions {
+    drawingMode: "background" | "color";
+    keepWithinCircle: boolean;
+    drawLabel: NodeLabelDrawingFunction<N, E, G> | undefined;
+    drawHover: NodeHoverDrawingFunction<N, E, G> | undefined;
+    padding: number;
+    colorAttribute: string;
+}
+/**
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+export default function getNodeImageProgram(options?: Partial<CreateNodeImageProgramOptions<NodeAttributes & {
+    bg: string;
+    opacity: number;
+}, EdgeAttributes, Attributes>>): NodeProgramType<NodeAttributes & {
+    bg: string;
+    opacity: number;
+}, EdgeAttributes>;
+export {};

package/dist/types/programs/node-image/frag.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const SHADER_SOURCE: string;
+export default SHADER_SOURCE;

package/dist/types/programs/node-image/index.d.ts

@@ -0,0 +1,5 @@
+export { default as createNodeImageProgram } from "./factory";
+export declare const NodeImageProgram: (isCircle: boolean) => import("sigma/rendering").NodeProgramType<import("../..").NodeAttributes<KeyValue<any>> & {
+    bg: string;
+    opacity: number;
+}, import("../..").EdgeAttributes<KeyValue<any>>>;

package/dist/types/programs/node-image/texture.d.ts

@@ -0,0 +1,102 @@
+import { EventEmitter } from "events";
+import { type Coordinates } from "sigma/types";
+/**
+ * Useful types:
+ * *************
+ */
+export interface ImageLoading {
+    status: "loading";
+}
+export interface ImageError {
+    status: "error";
+}
+export interface ImageReady {
+    status: "ready";
+    image: HTMLImageElement;
+    sourceX: number;
+    sourceY: number;
+    sourceSize: number;
+    destinationSize: number;
+}
+export type ImageType = ImageLoading | ImageError | ImageReady;
+export type Atlas = Record<string, Coordinates & {
+    size: number;
+}>;
+export interface TextureManagerOptions {
+    size: {
+        mode: "auto";
+    } | {
+        mode: "max";
+        value: number;
+    } | {
+        mode: "force";
+        value: number;
+    };
+    objectFit: "contain" | "cover" | "fill";
+    correctCentering: boolean;
+}
+export declare const DEFAULT_TEXTURE_MANAGER_OPTIONS: TextureManagerOptions;
+export declare const DEBOUNCE_TIMEOUT = 100;
+export declare const MARGIN_IN_TEXTURE = 1;
+/**
+ * Helpers:
+ * ********
+ */
+/**
+ * This helper loads an image at a given URL, and returns an HTMLImageElement
+ * with it displayed once it's properly loaded, within a promise.
+ */
+export declare function loadRasterImage(imageSource: string): Promise<HTMLImageElement>;
+export declare const makeSvg: (path?: string) => string;
+/**
+ * This helper loads an SVG image at a given URL, adjusts its size to a given
+ * size, and returns an HTMLImageElement with it displayed once it's properly
+ * loaded, within a promise.
+ */
+export declare function loadSVGImage(imageSource: string, { size }?: {
+    size?: number;
+}): Promise<HTMLImageElement>;
+/**
+ * This helper loads an image using the proper function.
+ */
+export declare function loadImage(imageSource: string, { size }?: {
+    size?: number;
+}): Promise<HTMLImageElement>;
+/**
+ * This helper computes exact coordinates to draw an image onto a texture.
+ */
+export declare function refineImage(image: HTMLImageElement, corrector: PictogramCenteringCorrector, { objectFit, size, correctCentering }: TextureManagerOptions): Omit<ImageReady, "status" | "image">;
+/**
+ * This helper takes a collection of image states and a context, draw all the
+ * images in the context, and returns an atlas to get where each image is drawn
+ * on the texture.
+ */
+export declare function drawTexture(ctx: CanvasRenderingContext2D, images: Record<string, ImageType>): Atlas;
+/**
+ * This class helps to "correct" the centering of an SVG pictogram by finding
+ * the "true" visually correct center through the barycenter of the pictogram's
+ * alpha layer in x and y dimension.
+ */
+export declare class PictogramCenteringCorrector {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    constructor();
+    getCorrectionOffset(image: HTMLImageElement, size: number): Coordinates;
+}
+export declare class TextureManager extends EventEmitter {
+    static NEW_TEXTURE_EVENT: string;
+    private readonly options;
+    private readonly canvas;
+    private readonly ctx;
+    private frameId?;
+    private readonly corrector;
+    private imageStates;
+    private texture;
+    private atlas;
+    constructor(options?: Partial<TextureManagerOptions>);
+    private scheduleGenerateTexture;
+    private generateTexture;
+    registerImage(source: string): Promise<void>;
+    getAtlas(): Atlas;
+    getTexture(): ImageData;
+}

package/dist/types/programs/node-image/vert.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const VERTEX_SHADER_SOURCE = "\nattribute vec4 a_id;\nattribute vec4 a_fill;\nattribute vec4 a_color;\nattribute vec2 a_position;\nattribute float a_size;\nattribute float a_angle;\nattribute float a_colorMode;\nattribute float a_opacity;\nattribute vec4 a_texture;\n\nuniform mat3 u_matrix;\nuniform float u_sizeRatio;\nuniform float u_correctionRatio;\n\nvarying vec4 v_fill;\nvarying vec4 v_color;\nvarying vec2 v_diffVector;\nvarying float v_radius;\nvarying float v_opacity;\nvarying vec4 v_texture;\nvarying float v_colorMode;\n\nconst float bias = 255.0 / 254.0;\nconst float marginRatio = 1.05;\n\nvoid main() {\n  float size = a_size * u_correctionRatio / u_sizeRatio * 4.0;\n  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));\n  vec2 position = a_position + diffVector * marginRatio;\n  gl_Position = vec4(\n    (u_matrix * vec3(position, 1)).xy,\n    0,\n    1\n  );\n\n  v_diffVector = diffVector;\n  v_radius = size / 2.0 / marginRatio;\n\n  #ifdef PICKING_MODE\n  // For picking mode, we use the ID as the color:\n  v_color = a_id;\n  #else\n  // For normal mode, we use the color:\n  v_fill = vec4(0.0, 0.0, 0.0, 0.0);\n  v_color = vec4(a_color.rgb, a_opacity * bias);\n  v_opacity = a_opacity;\n  v_colorMode = a_colorMode;\n  // Pass the texture coordinates:\n  v_texture = a_texture;\n  #endif\n\n  v_color.a *= bias;\n}\n";
+export default VERTEX_SHADER_SOURCE;

package/dist/types/programs/node-rect/base/drawHover.d.ts

@@ -0,0 +1,8 @@
+import { type Settings } from "sigma/settings";
+import { EdgeAttributes, NodeAttributes } from "../../../types";
+export declare function drawNodeHover(context: CanvasRenderingContext2D, data: NodeAttributes & {
+    opacity: number;
+    x: number;
+    y: number;
+    size: number;
+}, settings: Settings<NodeAttributes, EdgeAttributes>): void;

package/dist/types/programs/node-rect/base/drawLabel.d.ts

@@ -0,0 +1,8 @@
+import { type Settings } from "sigma/settings";
+import { EdgeAttributes, InternalNodeAttributes, NodeAttributes } from "../../../types";
+export declare function drawNodeLabel(context: CanvasRenderingContext2D, data: InternalNodeAttributes & {
+    opacity: number;
+    x: number;
+    y: number;
+    size: number;
+}, settings: Settings<NodeAttributes<any>, EdgeAttributes<any>>): void;

package/dist/types/programs/node-rect/base/frag.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const SHADER_SOURCE: string;
+export default SHADER_SOURCE;

package/dist/types/programs/node-rect/base/index.d.ts

@@ -0,0 +1,34 @@
+import { NodeProgram, type ProgramInfo } from "sigma/rendering";
+import { type NodeDisplayData, type RenderParams } from "sigma/types";
+import { type NodeAttributes } from "../../../types";
+declare const UNIFORMS: readonly ["u_sizeRatio", "u_correctionRatio", "u_cameraAngle", "u_matrix"];
+export declare class NodeRectBase extends NodeProgram<(typeof UNIFORMS)[number], NodeAttributes> {
+    getDefinition(): {
+        VERTICES: number;
+        VERTEX_SHADER_SOURCE: string;
+        FRAGMENT_SHADER_SOURCE: string;
+        METHOD: 4;
+        UNIFORMS: readonly ["u_sizeRatio", "u_correctionRatio", "u_cameraAngle", "u_matrix"];
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: 5121;
+            normalized: boolean;
+        } | {
+            name: string;
+            size: number;
+            type: 5126;
+        })[];
+        CONSTANT_ATTRIBUTES: {
+            name: string;
+            size: number;
+            type: 5126;
+        }[];
+        CONSTANT_DATA: number[][];
+    };
+    processVisibleItem(nodeIndex: number, startIndex: number, data: NodeDisplayData & NodeAttributes & {
+        opacity: number;
+    }): void;
+    setUniforms(params: RenderParams, { gl, uniformLocations }: ProgramInfo): void;
+}
+export {};

package/dist/types/programs/node-rect/base/vert.glsl.d.ts

@@ -0,0 +1,2 @@
+declare const SHADER_SOURCE: string;
+export default SHADER_SOURCE;

package/dist/types/programs/node-rect/index.d.ts

@@ -0,0 +1,11 @@
+import { NodeAttributes } from "../../types";
+export declare const NodeRectProgram: {
+    new (_gl: WebGLRenderingContext, _pickingBuffer: WebGLFramebuffer | null, _renderer: import("sigma").default<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes>): {
+        drawLabel: import("sigma/rendering").NodeLabelDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;
+        drawHover: import("sigma/rendering").NodeHoverDrawingFunction<NodeAttributes<any>, import("graphology-types").Attributes, import("graphology-types").Attributes> | undefined;
+        kill(): void;
+        reallocate(_capacity: number): void;
+        process(_nodeIndex: number, _offset: number, _data: import("sigma/types").NodeDisplayData): void;
+        render(_params: import("sigma/types").RenderParams): void;
+    };
+};

package/dist/types/types/index.d.ts

@@ -0,0 +1,189 @@
+import { GraphOptions } from "graphology-types";
+import { RefObject } from "react";
+import { Graph } from "../graph";
+interface NodeBadge {
+    position: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "left" | "right";
+    type?: "star" | "exclaim" | "thumbUp" | "thumbDown";
+    path?: string;
+    /**
+     * icon color
+     */
+    iconColor?: string;
+    /**
+     * fill color
+     */
+    color?: string;
+}
+export interface NodeAttributes<N = KeyValue> {
+    /**
+     * node label
+     */
+    label?: string;
+    /**
+     * node shape
+     */
+    type?: "circle" | "rect";
+    /**
+     * node size
+     */
+    size?: number;
+    /**
+     * node weight to apply proportional size
+     */
+    weight?: number;
+    /**
+     * label color
+     */
+    labelColor?: string;
+    /**
+     * border color
+     */
+    borderColor?: string;
+    /**
+     * icon color
+     */
+    iconColor?: string;
+    /**
+     * fill color
+     */
+    color?: string;
+    /**
+     * border width
+     */
+    border?: number;
+    /**
+     * hover color
+     */
+    hoverColor?: string;
+    /**
+     * highlighted color
+     */
+    highlightColor?: string;
+    /**
+     * define node type
+     */
+    nodeType?: string;
+    /**
+     * pie colors
+     */
+    pie?: string[];
+    /**
+     * svg path
+     */
+    path?: string;
+    /**
+     * avatar/image url
+     */
+    image?: string;
+    /**
+     * selected state
+     */
+    selected?: boolean;
+    /**
+     * highlighted state
+     */
+    highlight?: boolean;
+    badge?: NodeBadge[];
+    x?: number;
+    y?: number;
+    hidden?: boolean;
+    data?: N;
+}
+export interface EdgeAttributes<E = KeyValue> {
+    /**
+     * edge shape
+     */
+    type?: "line" | "curved";
+    /**
+     * edge label
+     */
+    label?: string;
+    /**
+     * edge size
+     */
+    size?: number;
+    /**
+     * edge weight to apply proportional size
+     */
+    weight?: number;
+    /**
+     * edge color
+     */
+    color?: string;
+    /**
+     * hover color
+     */
+    hoverColor?: string;
+    /**
+     * highlighted color
+     */
+    highlightColor?: string;
+    /**
+     * define edge type
+     */
+    edgeType?: "curved" | "line";
+    /**
+     * edge arrow head
+     */
+    arrow?: "source" | "target" | "both";
+    /**
+     * edge count
+     */
+    count?: number;
+    /**
+     * selected state
+     */
+    selected?: boolean;
+    /**
+     * highlighted state
+     */
+    highlight?: boolean;
+    data?: E;
+}
+export interface InternalNodeAttributes<N = KeyValue> extends NodeAttributes<N> {
+    groupId?: string;
+    isGroup?: boolean;
+    expanded?: boolean;
+    nodeList?: string[];
+    opacity?: number;
+    id?: string;
+    fixed?: boolean;
+    originalEdges?: Array<{
+        key: string;
+        source: string;
+        target: string;
+        attributes?: KeyValue;
+    }>;
+}
+export interface InternalEdgeAttributes<E = KeyValue> extends EdgeAttributes<E> {
+    opacity?: number;
+    curvature?: number;
+    id?: string;
+}
+export interface RawGraph<N = KeyValue, E = KeyValue> {
+    nodes: {
+        key: string;
+        attributes?: NodeAttributes<N>;
+    }[];
+    edges: {
+        key: string;
+        source: string;
+        target: string;
+        attributes?: EdgeAttributes<E>;
+    }[];
+    attributes?: KeyValue;
+    options?: GraphOptions;
+}
+export interface GraphRef<N = KeyValue, E = KeyValue> {
+    graph: Graph<N, E>;
+}
+export interface GraphProps<N = KeyValue, E = KeyValue> {
+    ref?: RefObject<GraphRef<N, E> | null>;
+    data: RawGraph<N, E> | Graph<N, E>;
+    nodeReducer?: (node: NodeAttributes<N>) => NodeAttributes<N>;
+    edgeReducer?: (edge: EdgeAttributes<E>) => EdgeAttributes<E>;
+    onSelectChange?: (selected: string[]) => void;
+    onNodeDoubleClick?: (node: string, attributes: NodeAttributes<N>) => void;
+    onContextMenu?: (type: "canvas" | "node" | "edge", nodesOrEdge?: string | string[]) => void;
+}
+export {};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@react-fabric/graph",
+  "version": "1.0.0-beta.58",
+  "description": "RUF: SigmaJS link analysis graph",
+  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
+  "license": "MIT",
+  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/graph",
+  "source": "src/index.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "directories": {
+    "src": "src",
+    "styles": "css",
+    "test": "tests"
+  },
+  "files": [
+    "css",
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "makelink": "yarn link",
+    "removelink": "yarn unlink",
+    "prebuild": "rm -rf ./dist",
+    "build:dts": "tsc -p ./tsconfig.build.json",
+    "build:rollup": "rollup -c ../../rollup.config.mjs",
+    "build": "npm-run-all -p build:rollup build:dts",
+    "watch:dts": "tsc -w -p ./tsconfig.build.json",
+    "watch:rollup": "rollup -w -c ../../rollup.config.mjs",
+    "watch": "npm-run-all -p watch:rollup watch:dts"
+  },
+  "dependencies": {
+    "@floating-ui/react": "~0.27.16",
+    "@react-fabric/core": "^1.0.0-beta.58",
+    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "@sigma/edge-curve": "~3.1.0",
+    "@sigma/utils": "~3.0.0",
+    "classnames": "~2.5.1",
+    "dom-to-image": "~2.6.0",
+    "graphology": "~0.26.0",
+    "graphology-canvas": "~0.4.2",
+    "graphology-layout": "~0.6.1",
+    "graphology-layout-forceatlas2": "~0.10.1",
+    "graphology-shortest-path": "~2.1.0",
+    "graphology-types": "~0.24.8",
+    "sigma": "~3.0.2"
+  },
+  "peerDependencies": {
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
+  },
+  "devDependencies": {
+    "@types/dom-to-image": "~2.6.7",
+    "@types/highlight.js": "~10.1.0",
+    "elkjs": "~0.11.0"
+  },
+  "engines": {
+    "node": ">=18.12.0",
+    "npm": ">=8.19.0"
+  },
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
+}

package/src/components/Context.tsx

@@ -0,0 +1,135 @@
+import { CoreIcons, Icon } from "@react-fabric/core";
+import { fitViewportToNodes } from "@sigma/utils";
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";
+import { SigmaNodeEventPayload } from "sigma/types";
+import { Graph } from "../graph";
+import { useDragSelection } from "../hooks/sigmaDragSelect";
+import { useGraphology } from "../hooks/useGraphology";
+import { useSigma } from "../hooks/useSigma";
+import { EdgeAttributes, GraphProps, NodeAttributes } from "../types";
+
+interface Context<N = KeyValue, E = KeyValue> {
+  sigma: ReturnType<typeof useSigma>;
+  graph: Graph<NodeAttributes<N>, EdgeAttributes<E>>;
+  selected: string[];
+  layoutRunning: boolean;
+  dragSelector: ReturnType<typeof useDragSelection>;
+  resetViewport: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+}
+
+const GraphContext = createContext<Context>({} as Context);
+
+export const useGraph = <N = KeyValue, E = KeyValue>() =>
+  useContext(GraphContext) as Context<N, E>;
+
+export const GraphProvider = <N = KeyValue, E = KeyValue>({
+  ref,
+  data,
+  children,
+  nodeReducer,
+  edgeReducer,
+  onSelectChange,
+  onNodeDoubleClick,
+  onContextMenu,
+}: PropsWithChildren<GraphProps<N, E>>) => {
+  const { graph, selected } = useGraphology<N, E>(data);
+  const sigma = useSigma<N, E>(graph, nodeReducer, edgeReducer);
+
+  const dragSelector = useDragSelection(sigma.instance);
+
+  const [layoutRunning, setLayoutRunning] = useState(false);
+
+  const resetViewport = () => {
+    if (graph.size === 0) return;
+    sigma.instance &&
+      fitViewportToNodes(sigma.instance, graph.nodes(), {
+        animate: true,
+      });
+  };
+
+  const zoomIn = () => {
+    if (graph.size === 0) return;
+    sigma.instance?.getCamera().animatedZoom();
+  };
+
+  const zoomOut = () => {
+    if (graph.size === 0) return;
+    sigma.instance?.getCamera().animatedUnzoom();
+  };
+
+  useEffect(() => {
+    const resetHandler = () => {
+      sigma.instance &&
+        fitViewportToNodes(sigma.instance, graph.nodes(), {
+          animate: true,
+        });
+    };
+    graph.on("layoutRunning", setLayoutRunning);
+    graph.on("layoutDone", resetHandler);
+    onSelectChange && graph.on("nodesSelected", onSelectChange);
+
+    return () => {
+      graph.off("layoutDone", resetHandler);
+      graph.off("layoutRunning", setLayoutRunning);
+      onSelectChange && graph.off("nodesSelected", onSelectChange);
+    };
+  }, [graph, sigma, onSelectChange]);
+
+  useEffect(() => {
+    const handleClick = (e: SigmaNodeEventPayload) => {
+      onNodeDoubleClick?.(e.node, graph.getNodeAttributes(e.node));
+      e.event.original.preventDefault();
+      e.event.preventSigmaDefault();
+      e.preventSigmaDefault();
+      return false;
+    };
+    sigma.instance?.on("doubleClickNode", handleClick);
+
+    return () => {
+      sigma.instance?.off("doubleClickNode", handleClick);
+    };
+  }, [sigma, graph, onNodeDoubleClick]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      graph,
+      sigma,
+    }),
+    [graph, sigma],
+  );
+
+  return (
+    <GraphContext.Provider
+      value={
+        {
+          sigma,
+          graph,
+          selected,
+          dragSelector,
+          layoutRunning,
+          resetViewport,
+          zoomIn,
+          zoomOut,
+        } as AnyObject
+      }
+    >
+      {children}
+
+      {layoutRunning && (
+        <div className="absolute top-0 end-0 p-1">
+          <Icon icon={CoreIcons.spinner} animate="spin" />
+        </div>
+      )}
+    </GraphContext.Provider>
+  );
+};