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

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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1,8 +0,0 @@
-import { type Settings } from "sigma/settings";
-import { type EdgeAttributes, type 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

@@ -1,8 +0,0 @@
-import { type Settings } from "sigma/settings";
-import { type EdgeAttributes, type InternalNodeAttributes, type 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

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

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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-import { type 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/src/components/ContextMenu.tsx

@@ -1,138 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2025 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 {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  offset,
-  useClick,
-  useDismiss,
-  useFloating,
-  useFloatingNodeId,
-  useInteractions,
-} from "@floating-ui/react";
-import { Divider, Menu, MenuItem } from "@react-fabric/core";
-import { cloneElement, useEffect, useRef, useState } from "react";
-import { type SigmaEdgeEventPayload, type SigmaNodeEventPayload, type SigmaStageEventPayload } from "sigma/types";
-import { ICONS } from "../constants";
-import { useGraph } from "./context";
-
-export const GraphContextMenu = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const nodeId = useFloatingNodeId();
-  const { sigma } = useGraph();
-  const [menu, setMenu] = useState<Array<React.ReactElement<typeof MenuItem>>>([]);
-
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    nodeId,
-    onOpenChange: (open, evt, reason) => {
-      const target = evt?.target as HTMLElement;
-      if (!target?.closest(".menu-list")) setIsOpen(open);
-    },
-    strategy: "absolute",
-    placement: "bottom-start",
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(8), flip()],
-  });
-
-  const click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true,
-  });
-  const dismiss = useDismiss(context, { bubbles: true });
-
-  const { getFloatingProps } = useInteractions([dismiss, click]);
-
-  const tryClosing = useRef((e: React.MouseEvent) => {
-    if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']")) setTimeout(() => setIsOpen(false), 50);
-  });
-
-  useEffect(() => {
-    const handleContextMenu = (e: SigmaNodeEventPayload | SigmaEdgeEventPayload | SigmaStageEventPayload) => {
-      if ("node" in e) {
-        setMenu([
-          <MenuItem key="0.0" label="Select neighbors" />,
-          <Divider key="0.1" />,
-          <MenuItem key="0.2" label="Delete node(s)" color="danger" icon={ICONS.delete} />,
-          <MenuItem key="0.3" label="Clear graph" color="danger" icon={ICONS.clear} />,
-        ]);
-      } else if ("edge" in e) {
-        setMenu([
-          <MenuItem key="1.0" label="Select neighbors" />,
-          <Divider key="1.1" />,
-          <MenuItem key="1.2" label="Clear graph" color="danger" icon={ICONS.clear} />,
-        ]);
-      } else {
-        setMenu([<MenuItem key="2.0" label="Clear graph" color="danger" icon={ICONS.clear} />]);
-      }
-      const virtual = {
-        getBoundingClientRect() {
-          return {
-            width: 0,
-            height: 0,
-            x: e.event.x,
-            y: e.event.y,
-            top: e.event.y,
-            left: e.event.x,
-            right: e.event.x,
-            bottom: e.event.y,
-          };
-        },
-      };
-      setIsOpen(true);
-      refs.setReference(virtual);
-      e.event.original.preventDefault();
-      return false;
-    };
-    sigma.instance?.on("rightClickNode", handleContextMenu);
-    sigma.instance?.on("rightClickEdge", handleContextMenu);
-    sigma.instance?.on("rightClickStage", handleContextMenu);
-
-    return () => {
-      sigma.instance?.off("rightClickNode", handleContextMenu);
-      sigma.instance?.off("rightClickEdge", handleContextMenu);
-      sigma.instance?.off("rightClickStage", handleContextMenu);
-    };
-  }, [sigma]);
-
-  return (
-    isOpen && (
-      <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
-        {cloneElement((<Menu>{menu}</Menu>) as AnyObject, {
-          ...getFloatingProps(),
-          style: {
-            ...floatingStyles,
-            borderRadius: "var(--rounding)",
-            zIndex: "var(--z-popover)",
-            fontSize: "0.75rem",
-          },
-          className: "bg-default outline rounded-capped shadow-lg",
-          ref: refs.setFloating,
-          onMouseUp: tryClosing.current,
-        })}
-      </FloatingPortal>
-    )
-  );
-};

package/src/components/Provider.tsx

@@ -1,116 +0,0 @@
-import { Icon } from "@react-fabric/core";
-import { fitViewportToNodes } from "@sigma/utils";
-import { type PropsWithChildren, useEffect, useImperativeHandle, useState } from "react";
-import { type SigmaNodeEventPayload } from "sigma/types";
-import { useDragSelection } from "../hooks/sigmaDragSelect";
-import { useGraphology } from "../hooks/useGraphology";
-import { useSigma } from "../hooks/useSigma";
-import { type GraphProps } from "../types";
-import { GraphContext } from "./context";
-
-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;
-    void (
-      sigma.instance &&
-      fitViewportToNodes(sigma.instance, graph.nodes(), {
-        animate: true,
-      })
-    );
-  };
-
-  const zoomIn = () => {
-    if (graph.size === 0) return;
-    void sigma.instance?.getCamera().animatedZoom();
-  };
-
-  const zoomOut = () => {
-    if (graph.size === 0) return;
-    void sigma.instance?.getCamera().animatedUnzoom();
-  };
-
-  useEffect(() => {
-    const resetHandler = () => {
-      void (
-        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="icon-[svg-spinners--eclipse]" />
-        </div>
-      )}
-    </GraphContext.Provider>
-  );
-};

package/src/components/Tools.tsx

@@ -1,68 +0,0 @@
-import { Button, ButtonGroup, Dropdown, Menu, MenuItem } from "@react-fabric/core";
-import { ICONS } from "../constants";
-import { useGraph } from "./context";
-
-export const Tools = () => {
-  const { dragSelector, graph, selected, resetViewport, zoomIn, zoomOut } = useGraph();
-
-  return (
-    <div className="flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-default">
-      <ButtonGroup variant="link">
-        <Button aria-label="Home" icon={ICONS.focus} onClick={resetViewport} />
-        <Button aria-label="Zoomin" icon={ICONS.zoomIn} onClick={zoomIn} />
-        <Button aria-label="Zoomout" icon={ICONS.zoomOut} onClick={zoomOut} />
-      </ButtonGroup>
-      <ButtonGroup variant="link">
-        {dragSelector.selectionMode !== "lasso" && (
-          <Button
-            aria-label="lasso"
-            icon={ICONS.lasso}
-            disabled={!!dragSelector.selectionMode}
-            onClick={() => dragSelector.startLassoSelection()}
-          />
-        )}
-        {dragSelector.selectionMode && (
-          <Button color="danger" aria-label="cancel" icon={ICONS.cancel} onClick={() => dragSelector.cancelSelection()} />
-        )}
-        {dragSelector.selectionMode !== "rectangle" && (
-          <Button
-            aria-label="rectselect"
-            icon={ICONS.select}
-            disabled={!!dragSelector.selectionMode}
-            onClick={() => dragSelector.startRectangleSelection()}
-          />
-        )}
-      </ButtonGroup>
-      <ButtonGroup variant="link">
-        <Dropdown>
-          <Button
-            aria-label="force"
-            variant="link"
-            icon={
-              "M19.5 17C19.37 17 19.24 17 19.11 17.04L17.5 13.79C17.95 13.34 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.62 9.5 15.5 9.5 15.36 9.54L13.73 6.29C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.21 9.79 5.84 10.26 6.29L8.64 9.54C8.5 9.5 8.38 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.05 13.34 6.5 13.79L4.89 17.04C4.76 17 4.63 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.64 14.46L10.27 17.71C9.8 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.79C10.46 13.34 10.75 12.71 10.75 12S10.46 10.66 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7S12.26 7 12.39 6.96L14 10.21C13.55 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.14 14.46L17.77 17.71C17.3 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17Z"
-            }
-          />
-          <Menu className="text-sm">
-            <MenuItem label="box" onClick={async () => await graph.elkLayout("box")} />
-            <MenuItem label="force" onClick={async () => await graph.elkLayout("force")} />
-            <MenuItem label="layered" onClick={async () => await graph.elkLayout("layered")} />
-            <MenuItem label="stress" onClick={async () => await graph.elkLayout("stress")} />
-            <MenuItem label="radial" onClick={async () => await graph.elkLayout("radial")} />
-            <MenuItem label="sporeOverlap" onClick={async () => await graph.elkLayout("sporeOverlap")} />
-            <MenuItem label="sporeCompaction" onClick={async () => await graph.elkLayout("sporeCompaction")} />
-          </Menu>
-        </Dropdown>
-      </ButtonGroup>
-      <ButtonGroup variant="link">
-        <Button
-          aria-label="delete"
-          color="danger"
-          icon={ICONS.delete}
-          disabled={!selected.length}
-          onClick={() => graph.dropNodes(selected)}
-        />
-        <Button aria-label="clear" color="danger" icon={ICONS.clear} onClick={() => graph.clear()} />
-      </ButtonGroup>
-    </div>
-  );
-};

package/src/components/Viewer.tsx

@@ -1,75 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2025 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 { Section } from "@react-fabric/core";
-import { useEffect, useRef } from "react";
-import { type GraphProps } from "../types";
-import { GraphContextMenu } from "./ContextMenu";
-import { GraphProvider } from "./Provider";
-import { Tools } from "./Tools";
-import { useGraph } from "./context";
-
-const Graph = () => {
-  const { sigma, graph } = useGraph();
-  const handlesRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // remove group handle if group node is dropped
-    const handler = ({ key }: KeyValue) => {
-      const handle = handlesRef.current?.querySelector(`[data-id="${key}"]`);
-      handle?.remove();
-    };
-    graph.on("nodeDropped", handler);
-    return () => {
-      graph.off("nodeDropped", handler);
-    };
-  }, [graph]);
-
-  return (
-    <div className="area-content relative bg-default graph-viewer">
-      <div dir="ltr" ref={sigma.containerRef} className="absolute inset-0" />
-      <div
-        role="none"
-        ref={handlesRef}
-        dir="ltr"
-        onClick={(e) => {
-          const key = (e.target as any).dataset.id;
-          key && graph.toggleExpanded(key);
-        }}
-        className="absolute inset-0 overflow-hidden pointer-events-none sigma-groupHandles"
-      />
-    </div>
-  );
-};
-
-export const SigmaGraph = <N = KeyValue, E = KeyValue>(props: GraphProps<N, E>) => {
-  return (
-    <Section className="relative">
-      <GraphProvider {...props}>
-        <Tools />
-        <Graph />
-        <GraphContextMenu />
-      </GraphProvider>
-    </Section>
-  );
-};

package/src/components/context.ts

@@ -1,43 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2026 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, useContext } from "react";
-import { Graph } from "../graph";
-import { useDragSelection } from "../hooks/sigmaDragSelect";
-import { useSigma } from "../hooks/useSigma";
-import { EdgeAttributes, 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;
-}
-
-export const GraphContext = createContext<Context>({} as Context);
-
-export const useGraph = <N = KeyValue, E = KeyValue>() => useContext(GraphContext) as Context<N, E>;