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

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

@@ -1,189 +1,138 @@
-import { type GraphOptions } from "graphology-types";
-import { type RefObject } from "react";
-import { type 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
-     */
+/**
+ * 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.
+ */
+export interface NodeAttributes<N extends KeyValue = KeyValue> {
+    data?: N;
+    id: string;
+    type?: string;
     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
-     */
+    icon?: string;
+    image?: string;
     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[];
+    borderColor?: string;
+    segments?: string[] | number[] | {
+        [color: string]: number;
+    };
+    size?: number;
+    shape?: "square" | "circle" | "folder" | "diamond" | "triangle" | "folderOpen";
+    visible?: boolean;
     x?: number;
     y?: number;
-    hidden?: boolean;
-    data?: N;
+    z?: number;
 }
-export interface EdgeAttributes<E = KeyValue> {
-    /**
-     * edge shape
-     */
-    type?: "line" | "curved";
-    /**
-     * edge label
-     */
+export interface EdgeAttributes<E extends KeyValue = KeyValue> {
+    data?: E;
+    id: string;
+    source: string;
+    target: string;
+    type?: string;
     label?: string;
-    /**
-     * edge size
-     */
+    count?: number;
     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;
+    path?: "straight" | "curved" | "stepCurved" | "curvedS";
+    style?: "solid" | "dashed" | "dotted";
+    head?: "arrow";
+    tail?: "arrow";
+    visible?: boolean;
+    /** Marks a link that was created as a clone during `groupNodes`. Used by `ungroupNodes` to drop clones and revert the originals. */
+    groupEdge?: boolean;
+}
+export interface RawGraph<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> {
+    nodes: NodeAttributes<N>[];
+    edges: EdgeAttributes<E>[];
 }
-export interface InternalNodeAttributes<N = KeyValue> extends NodeAttributes<N> {
+export interface InternalNode<N extends KeyValue = KeyValue> extends NodeAttributes<N> {
+    group?: boolean;
+    groupExpanded?: boolean;
+    groupNodes?: string[];
+    /** Back-reference to the group node that owns this (hidden) member. Empty for top-level nodes. */
     groupId?: string;
-    isGroup?: boolean;
-    expanded?: boolean;
-    nodeList?: string[];
-    opacity?: number;
-    id?: string;
-    fixed?: boolean;
-    originalEdges?: Array<{
-        key: string;
-        source: string;
-        target: string;
-        attributes?: KeyValue;
-    }>;
+    locked?: boolean;
+    /** Transient selection state, toggled by `selectNodes` / `unselectNodes`. */
+    selected?: boolean;
+    hilighted?: boolean;
+    x?: number;
+    y?: number;
+    z?: number;
+    fx?: number;
+    fy?: number;
+    fz?: number;
+    pieSize?: number;
+    slice_0?: number;
+    slice_1?: number;
+    slice_2?: number;
+    slice_3?: number;
+    slice_4?: number;
+    slice_5?: number;
+    slice_6?: number;
+    slice_7?: number;
+    slice_8?: number;
+    slice_9?: number;
+    slice_10?: number;
+    slice_11?: number;
+    color_0?: string;
+    color_1?: string;
+    color_2?: string;
+    color_3?: string;
+    color_4?: string;
+    color_5?: string;
+    color_6?: string;
+    color_7?: string;
+    color_8?: string;
+    color_9?: string;
+    color_10?: string;
+    color_11?: string;
 }
-export interface InternalEdgeAttributes<E = KeyValue> extends EdgeAttributes<E> {
-    opacity?: number;
+export interface InternalEdge<E extends KeyValue = KeyValue> extends EdgeAttributes<E> {
+    group?: boolean;
+    /** Curvature of a `path: "curved"` edge; 0 = straight. Assigned by `assignCurvature` for parallel edges. */
     curvature?: number;
-    id?: string;
-}
-export interface RawGraph<N = KeyValue, E = KeyValue> {
-    nodes: Array<{
-        key: string;
-        attributes?: NodeAttributes<N>;
-    }>;
-    edges: Array<{
-        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;
+    /** Dash length for `layerDashed`, in relative edge-length units. Assigned by `assignEdgeDash` from `shape`. */
+    dashSize?: number;
+    /** Dash gap length for `layerDashed`, in relative edge-length units. Assigned by `assignEdgeDash` from `shape`. */
+    gapSize?: number;
+    rotation?: number;
+    /** Transient selection state. */
+    selected?: boolean;
+    /**
+     * The endpoint before it was re-pointed onto a group / merge node. Captured by
+     * `hydrateEdge` when the link is added; read back by `ungroupNode`.
+     */
+    originalSource?: string;
+    originalTarget?: string;
 }
-export {};
+/**
+ * Public, listener-facing node: the node `id` merged with its `data` bag. This is
+ * what every `nodes*` event emits — internal fields (positions, pins, group and
+ * selection state) never leak to listeners.
+ */
+export type PublicNode<N extends KeyValue = KeyValue> = {
+    id: string;
+} & N;
+/** Public, listener-facing link: the link `id` merged with its `data` bag. Emitted by `edges*` events. */
+export type PublicEdge<E extends KeyValue = KeyValue> = {
+    id: string;
+} & E;

package/dist/types/utils/edge.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 type { DisplayData } from "sigma/types";
+import type { EdgeAttributes } from "../types";
+export declare function edgeReducer(_: unknown, edge: DisplayData, attrs: EdgeAttributes): DisplayData;
+export declare function defaultEdgeStyles(isDark?: boolean): never[];

package/dist/types/utils/node.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { type DisplayData } from "sigma/types";
+import type { InternalNode } from "../types";
+export declare function nodeReducer(_: unknown, node: DisplayData, attrs: InternalNode): DisplayData;
+export declare function defaultNodeStyles(isDark?: boolean): never;

package/dist/types/utils/sdfFolder.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 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 { type SDFShape, type ValueSource } from "sigma/rendering";
+/**
+ * Options for the {@link sdfFolder} shape.
+ *
+ * @property cornerRadius - Corner rounding as a fraction of the node size.
+ *    `0` gives sharp corners; larger values round the body and the tab. May
+ *   also be a per-node attribute via `{ attribute, default }`.
+ * @property rotation - Rotation of the folder, in radians, applied before the
+ *   distance field is evaluated. May also be a per-node attribute via
+ *    `{ attribute, default }`.
+ */
+export interface FolderOptions {
+    /**
+     * Corner rounding as a fraction of the node size. Defaults to `0` (sharp
+     * corners).
+     */
+    cornerRadius?: ValueSource<number>;
+    /**
+     * Rotation of the folder, in radians, applied before the distance is
+     * computed. Defaults to `0`.
+     */
+    rotation?: ValueSource<number>;
+}
+/**
+ * Creates a folder SDF shape.
+ *
+ * The outline is the union of two rounded rectangles: a wide **body** and a
+ * smaller **tab** flap that rises above the body's top-left corner — the shape
+ * of a classic manila folder. Each panel is an Inigo Quilez rounded-box
+ * distance field (https://iquilezles.org/articles/distfunctions2d/) and the
+ * union is the closer of the two distances.
+ *
+ * @param options - Configuration for the folder
+ * @returns Folder SDF shape definition
+ *
+ * @example
+ * ```typescript
+ * // Sharp folder with a top-left tab
+ * const folder = sdfFolder();
+ *
+ * // Rounded folder
+ * const rounded = sdfFolder({ cornerRadius: 0.12 });
+ *
+ * // Per-node folder, driven by attributes
+ * const perNode = sdfFolder({
+ *   cornerRadius: { attribute: "folderCorner" },
+ *   rotation: { attribute: "folderRotation" },
+ * });
+ * ```
+ */
+export declare function sdfFolder(options?: FolderOptions): SDFShape;

package/dist/types/viewer/Graph.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 type { Graph } from "../graph";
+interface GraphViewerProps<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> {
+    data: Graph<N, E>;
+    children?: React.ReactNode;
+}
+export declare function GraphViewer<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue>({ data, children }: GraphViewerProps<N, E>): import("react").JSX.Element;
+export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@react-fabric/graph",
-  "version": "1.0.0-beta.63",
+  "version": "1.0.1",
   "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",
+  "repository": "https://github.com/adarshpastakia/react-fabric/tree/main/packages/graph",
   "source": "src/index.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -24,8 +24,6 @@
     "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",
@@ -35,35 +33,31 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "~0.27.19",
-    "@react-fabric/core": "^1.0.0-beta.63",
-    "@react-fabric/utilities": "^1.0.0-beta.63",
-    "@sigma/edge-curve": "~3.1.0",
-    "@sigma/utils": "~3.0.0",
-    "classnames": "~2.5.1",
+    "@floating-ui/react": "~0.27.20",
+    "@react-fabric/core": "^1.0.1",
+    "@react-fabric/utilities": "^1.0.1",
+    "@sigma/layer-webgl": "beta",
+    "@sigma/node-border": "beta",
+    "@sigma/node-image": "beta",
+    "@sigma/node-piechart": "beta",
+    "@sigma/utils": "beta",
     "dom-to-image": "~2.6.0",
     "graphology": "~0.26.0",
-    "graphology-canvas": "~0.4.3",
     "graphology-layout": "~0.6.1",
+    "graphology-layout-force": "~0.2.4",
     "graphology-layout-forceatlas2": "~0.10.1",
-    "graphology-shortest-path": "~2.1.0",
     "graphology-types": "~0.24.8",
-    "sigma": "~3.0.2"
+    "sigma": "beta"
   },
   "peerDependencies": {
-    "i18next": "~25.8.18",
-    "react": "~19.2.4",
-    "react-dom": "~19.2.4",
-    "react-i18next": "~16.5.8"
-  },
-  "devDependencies": {
-    "@types/dom-to-image": "~2.6.7",
-    "@types/highlight.js": "~10.1.0",
-    "elkjs": "~0.11.0"
+    "i18next": "~26.3.6",
+    "react": "~19.3.0",
+    "react-dom": "~19.3.0",
+    "react-i18next": "~17.0.11"
   },
   "engines": {
-    "node": ">=22.18.0",
-    "npm": ">=10.8.0"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0"
   },
-  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
+  "gitHead": "1419a9df05b5e3850e1d2b4e896ab63df702c7e8"
 }

package/src/context/context.tsx

@@ -0,0 +1,43 @@
+/**
+ * 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 { createContext, use } from "react";
+import type Sigma from "sigma";
+import type { Graph } from "../graph";
+import type { EdgeAttributes, NodeAttributes } from "../types";
+
+interface ContextType<N extends KeyValue = KeyValue, E extends KeyValue = KeyValue> {
+  data: Graph<N, E>;
+  sigma: Sigma<NodeAttributes<N>, EdgeAttributes<E>>;
+}
+
+export const Context = createContext<ContextType>({} as ContextType);
+
+export const useGraph = <N extends KeyValue = KeyValue, E extends KeyValue = KeyValue>() => use(Context) as ContextType<N, E>;
+
+export const Provider = <N extends KeyValue = KeyValue, E extends KeyValue = KeyValue>(props: AnyObject) => {
+  const Provider = Context.Provider as React.Provider<ContextType<N, E>>;
+  return <Provider {...props} />;
+};