@react-fabric/graph 1.0.0-beta.58

package/src/components/ContextMenu.tsx

@@ -0,0 +1,156 @@
+/*
+ * 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 { cloneElement, useEffect, useRef, useState } from "react";
+import {
+  SigmaEdgeEventPayload,
+  SigmaNodeEventPayload,
+  SigmaStageEventPayload,
+} from "sigma/types";
+import { useGraph } from "./Context";
+import { Divider, Menu, MenuItem } from "@react-fabric/core";
+import { ICONS } from "../constants";
+
+export const GraphContextMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const nodeId = useFloatingNodeId();
+  const { sigma, graph } = useGraph();
+  const [menu, setMenu] = useState<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 label="Select neighbors" />,
+          <Divider />,
+          <MenuItem
+            label="Delete node(s)"
+            color="danger"
+            icon={ICONS.delete}
+          />,
+          <MenuItem label="Clear graph" color="danger" icon={ICONS.clear} />,
+        ]);
+      } else if ("edge" in e) {
+        setMenu([
+          <MenuItem label="Select neighbors" />,
+          <Divider />,
+          <MenuItem label="Clear graph" color="danger" icon={ICONS.clear} />,
+        ]);
+      } else {
+        setMenu([
+          <MenuItem 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-base outline rounded-capped shadow-lg",
+          ref: refs.setFloating,
+          onMouseUp: tryClosing.current,
+        })}
+      </FloatingPortal>
+    )
+  );
+};

package/src/components/Tools.tsx

@@ -0,0 +1,107 @@
+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,
+    layoutRunning,
+    resetViewport,
+    zoomIn,
+    zoomOut,
+  } = useGraph();
+
+  return (
+    <div className="flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base">
+      <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={() => graph.elkLayout("box")} />
+            <MenuItem label="force" onClick={() => graph.elkLayout("force")} />
+            <MenuItem
+              label="layered"
+              onClick={() => graph.elkLayout("layered")}
+            />
+            <MenuItem
+              label="stress"
+              onClick={() => graph.elkLayout("stress")}
+            />
+            <MenuItem
+              label="radial"
+              onClick={() => graph.elkLayout("radial")}
+            />
+            <MenuItem
+              label="sporeOverlap"
+              onClick={() => graph.elkLayout("sporeOverlap")}
+            />
+            <MenuItem
+              label="sporeCompaction"
+              onClick={() => 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

@@ -0,0 +1,75 @@
+/*
+ * 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 { GraphProps } from "../types";
+import { GraphProvider, useGraph } from "./Context";
+import { Tools } from "./Tools";
+import { useEffect, useRef } from "react";
+import { GraphContextMenu } from "./ContextMenu";
+
+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-base graph-viewer">
+      <div dir="ltr" ref={sigma.containerRef} className="absolute inset-0" />
+      <div
+        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/constants/index.ts

@@ -0,0 +1,22 @@
+export const ICONS = {
+  focus:
+    "M17 12C17 7.55 11.62 5.31 8.46 8.46C5.31 11.61 7.55 17 12 17C14.76 17 17 14.76 17 12M12 15C9.33 15 8 11.77 9.88 9.88C11.77 8 15 9.33 15 12C15 13.66 13.66 15 12 15M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19",
+  zoomIn:
+    "M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z",
+  zoomOut:
+    "M15.5,14H14.71L14.43,13.73C15.41,12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z",
+  lasso:
+    "M22 9C22 5.13 17.5 2 12 2C6.5 2 2 5.13 2 9C2 9.00843 2.00002 9.01685 2.00006 9.02527C2.00952 10.8953 3.06771 12.5956 4.78 13.85C4.78103 13.847 4.78207 13.844 4.7831 13.841C5.18858 14.1369 5.63069 14.408 6.10419 14.6507C6.03614 14.9227 6 15.2072 6 15.5C6 16.76 6.67 17.87 7.67 18.5C7.46 19.11 6.97 20.96 8.3 22.05C9.91 23.38 11.66 22.97 12.56 22.69C12.8116 22.6126 13.0655 22.5076 13.3395 22.3944C14.0563 22.0981 14.9105 21.7451 16.22 21.68C17.6764 21.5995 18.9321 21.8104 19.5651 21.9167C19.7188 21.9425 19.8358 21.9622 19.91 21.97C19.91 21.97 20.86 21.97 20.97 21.04C21.08 20.1 20.03 19.97 20.03 19.97C20.03 19.97 18.43 19.7 16.39 19.71C14.9823 19.7145 13.7447 20.1595 12.703 20.5341C11.4434 20.987 10.4704 21.3368 9.83 20.68C9.18 20 9.39 19.36 9.6 19C11.3416 18.9542 12.7471 17.6481 12.9693 15.9673C13.4921 15.9319 14.0034 15.8699 14.5 15.78C18.6753 15.0244 21.7995 12.4293 21.9907 9.30406C21.9969 9.20324 22 9.10187 22 9ZM20 9C20 10.2554 19.2572 11.4047 18.032 12.2843C16.6998 13.2393 14.7966 13.8752 12.6542 13.9835C12.0881 12.8109 10.887 12 9.5 12C8.57261 12 7.72834 12.3625 7.10143 12.9533C6.61638 12.7181 6.17578 12.4489 5.78883 12.1513L5.79 12.15C4.6875 11.3034 4.02105 10.2243 4.00049 9.05571C4.00016 9.03717 4 9.01859 4 9C4 6.24 7.58 4 12 4C16.42 4 20 6.24 20 9ZM10.9988 15.5603C10.9933 15.6993 10.9689 15.8333 10.9281 15.96C10.7345 16.5641 10.1694 17 9.5 17C8.67 17 8 16.33 8 15.5C8 15.4718 8.00078 15.4437 8.00231 15.4159C8.04595 14.6266 8.69981 14 9.5 14C10.3284 14 11 14.6716 11 15.5C11 15.5202 10.9996 15.5403 10.9988 15.5603Z",
+  select:
+    "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z",
+  cancel:
+    "M3,16.74L7.76,12L3,7.26L7.26,3L12,7.76L16.74,3L21,7.26L16.24,12L21,16.74L16.74,21L12,16.24L7.26,21L3,16.74M12,13.41L16.74,18.16L18.16,16.74L13.41,12L18.16,7.26L16.74,5.84L12,10.59L7.26,5.84L5.84,7.26L10.59,12L5.84,16.74L7.26,18.16L12,13.41Z",
+  delete:
+    "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z",
+  clear:
+    "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z",
+  expand:
+    "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+  collapse:
+    "M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z",
+};