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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/css/styles.css +1 -1
  2. package/dist/cjs/_virtual/elk-worker.js +1 -1
  3. package/dist/cjs/components/ContextMenu.js +7 -7
  4. package/dist/cjs/components/{Context.js → Provider.js} +2 -6
  5. package/dist/cjs/components/Tools.js +38 -38
  6. package/dist/cjs/components/Viewer.js +6 -5
  7. package/dist/cjs/components/context.js +34 -0
  8. package/dist/cjs/graph/index.js +15 -15
  9. package/dist/cjs/programs/node-badge/factory.js +3 -2
  10. package/dist/cjs/programs/node-badge/texture.js +30 -30
  11. package/dist/cjs/programs/node-image/factory.js +3 -2
  12. package/dist/cjs/programs/node-image/texture.js +36 -36
  13. package/dist/esm/_virtual/elk-worker.js +1 -1
  14. package/dist/esm/components/ContextMenu.js +3 -3
  15. package/dist/esm/components/{Context.js → Provider.js} +3 -6
  16. package/dist/esm/components/Tools.js +37 -37
  17. package/dist/esm/components/Viewer.js +4 -3
  18. package/dist/esm/components/context.js +33 -0
  19. package/dist/esm/graph/index.js +15 -15
  20. package/dist/esm/programs/node-badge/factory.js +3 -2
  21. package/dist/esm/programs/node-badge/texture.js +30 -30
  22. package/dist/esm/programs/node-image/factory.js +3 -2
  23. package/dist/esm/programs/node-image/texture.js +36 -36
  24. package/dist/types/components/Provider.d.ts +3 -0
  25. package/dist/types/components/{Context.d.ts → context.d.ts} +3 -4
  26. package/dist/types/programs/edge-curve/drawLabel.d.ts +1 -1
  27. package/package.json +12 -12
  28. package/src/components/ContextMenu.tsx +11 -47
  29. package/src/components/{Context.tsx → Provider.tsx} +3 -30
  30. package/src/components/Tools.tsx +13 -51
  31. package/src/components/Viewer.tsx +6 -7
  32. package/src/components/context.ts +43 -0
  33. package/src/programs/arrow-head/index.ts +0 -1
  34. package/src/programs/edge-curve/drawLabel.ts +1 -1
  35. package/src/programs/edge-curve/index.ts +0 -2
  36. package/src/programs/edge-line/index.ts +0 -2
  37. package/src/programs/node-badge/factory.ts +0 -2
  38. package/src/programs/node-circle/base/index.ts +0 -2
  39. package/src/programs/node-image/factory.ts +0 -2
  40. package/src/programs/node-rect/base/index.ts +0 -2
@@ -48,11 +48,11 @@ function loadRasterImage(_x) {
48
48
  return _loadRasterImage.apply(this, arguments);
49
49
  }
50
50
  function _loadRasterImage() {
51
- _loadRasterImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageSource) {
52
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
51
+ _loadRasterImage = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(imageSource) {
52
+ return _regeneratorRuntime.wrap(function (_context2) {
53
53
  while (1) switch (_context2.prev = _context2.next) {
54
54
  case 0:
55
- _context2.next = 2;
55
+ _context2.next = 1;
56
56
  return new Promise(function (resolve, reject) {
57
57
  var image = new Image();
58
58
  image.addEventListener("load", function () {
@@ -70,9 +70,9 @@ function _loadRasterImage() {
70
70
  image.setAttribute("crossOrigin", "");
71
71
  image.src = imageSource;
72
72
  });
73
- case 2:
73
+ case 1:
74
74
  return _context2.abrupt("return", _context2.sent);
75
- case 3:
75
+ case 2:
76
76
  case "end":
77
77
  return _context2.stop();
78
78
  }
@@ -98,7 +98,7 @@ function loadSVGImage(_x2) {
98
98
  * This helper loads an image using the proper function.
99
99
  */
100
100
  function _loadSVGImage() {
101
- _loadSVGImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(imageSource) {
101
+ _loadSVGImage = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(imageSource) {
102
102
  var _ref,
103
103
  size,
104
104
  svg,
@@ -110,7 +110,7 @@ function _loadSVGImage() {
110
110
  url,
111
111
  res,
112
112
  _args3 = arguments;
113
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
113
+ return _regeneratorRuntime.wrap(function (_context3) {
114
114
  while (1) switch (_context3.prev = _context3.next) {
115
115
  case 0:
116
116
  _ref = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : {}, size = _ref.size;
@@ -119,11 +119,11 @@ function _loadSVGImage() {
119
119
  originalWidth = root.getAttribute("width");
120
120
  originalHeight = root.getAttribute("height");
121
121
  if (!(!originalWidth || !originalHeight)) {
122
- _context3.next = 7;
122
+ _context3.next = 1;
123
123
  break;
124
124
  }
125
125
  throw new Error("loadSVGImage: cannot use `size` if target SVG has no definite dimensions.");
126
- case 7:
126
+ case 1:
127
127
  if (typeof size === "number") {
128
128
  root.setAttribute("width", "" + size);
129
129
  root.setAttribute("height", "" + size);
@@ -141,11 +141,11 @@ function _loadSVGImage() {
141
141
  void res["finally"](function () {
142
142
  return URL.revokeObjectURL(url);
143
143
  });
144
- _context3.next = 15;
144
+ _context3.next = 2;
145
145
  return res;
146
- case 15:
146
+ case 2:
147
147
  return _context3.abrupt("return", _context3.sent);
148
- case 16:
148
+ case 3:
149
149
  case "end":
150
150
  return _context3.stop();
151
151
  }
@@ -161,36 +161,36 @@ function loadImage(_x3) {
161
161
  * This helper computes exact coordinates to draw an image onto a texture.
162
162
  */
163
163
  function _loadImage() {
164
- _loadImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(imageSource) {
164
+ _loadImage = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(imageSource) {
165
165
  var _ref2,
166
166
  isSVG,
167
167
  image,
168
168
  _args4 = arguments;
169
- return _regeneratorRuntime.wrap(function _callee4$(_context4) {
169
+ return _regeneratorRuntime.wrap(function (_context4) {
170
170
  while (1) switch (_context4.prev = _context4.next) {
171
171
  case 0:
172
172
  _ref2 = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : {}, _ref2.size;
173
173
  isSVG = isSvgPath(imageSource);
174
174
  if (!isSVG) {
175
- _context4.next = 8;
175
+ _context4.next = 2;
176
176
  break;
177
177
  }
178
- _context4.next = 5;
178
+ _context4.next = 1;
179
179
  return loadSVGImage(imageSource, {
180
180
  size: 128
181
181
  });
182
- case 5:
182
+ case 1:
183
183
  image = _context4.sent;
184
- _context4.next = 11;
184
+ _context4.next = 4;
185
185
  break;
186
- case 8:
187
- _context4.next = 10;
186
+ case 2:
187
+ _context4.next = 3;
188
188
  return loadRasterImage(imageSource);
189
- case 10:
189
+ case 3:
190
190
  image = _context4.sent;
191
- case 11:
191
+ case 4:
192
192
  return _context4.abrupt("return", image);
193
- case 12:
193
+ case 5:
194
194
  case "end":
195
195
  return _context4.stop();
196
196
  }
@@ -399,46 +399,46 @@ var TextureManager = /*#__PURE__*/function (_EventEmitter) {
399
399
  }, {
400
400
  key: "registerImage",
401
401
  value: function () {
402
- var _registerImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(source) {
402
+ var _registerImage = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(source) {
403
403
  var size, image;
404
- return _regeneratorRuntime.wrap(function _callee$(_context) {
404
+ return _regeneratorRuntime.wrap(function (_context) {
405
405
  while (1) switch (_context.prev = _context.next) {
406
406
  case 0:
407
407
  if (!this.imageStates[source]) {
408
- _context.next = 2;
408
+ _context.next = 1;
409
409
  break;
410
410
  }
411
411
  return _context.abrupt("return");
412
- case 2:
412
+ case 1:
413
413
  this.imageStates[source] = {
414
414
  status: "loading"
415
415
  };
416
- _context.prev = 3;
416
+ _context.prev = 2;
417
417
  size = this.options.size;
418
- _context.next = 7;
418
+ _context.next = 3;
419
419
  return loadImage(source, {
420
420
  size: size.mode === "force" ? size.value : undefined
421
421
  });
422
- case 7:
422
+ case 3:
423
423
  image = _context.sent;
424
424
  this.imageStates[source] = _objectSpread({
425
425
  status: "ready",
426
426
  image: image
427
427
  }, refineImage(image, this.corrector, this.options));
428
428
  this.scheduleGenerateTexture();
429
- _context.next = 15;
429
+ _context.next = 5;
430
430
  break;
431
- case 12:
432
- _context.prev = 12;
433
- _context.t0 = _context["catch"](3);
431
+ case 4:
432
+ _context.prev = 4;
433
+ _context["catch"](2);
434
434
  this.imageStates[source] = {
435
435
  status: "error"
436
436
  };
437
- case 15:
437
+ case 5:
438
438
  case "end":
439
439
  return _context.stop();
440
440
  }
441
- }, _callee, this, [[3, 12]]);
441
+ }, _callee, this, [[2, 4]]);
442
442
  }));
443
443
  function registerImage(_x4) {
444
444
  return _registerImage.apply(this, arguments);
@@ -0,0 +1,3 @@
1
+ import { type PropsWithChildren } from "react";
2
+ import { type GraphProps } from "../types";
3
+ export declare const GraphProvider: <N = KeyValue, E = KeyValue>({ ref, data, children, nodeReducer, edgeReducer, onSelectChange, onNodeDoubleClick, onContextMenu, }: PropsWithChildren<GraphProps<N, E>>) => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,7 @@
1
- import { type PropsWithChildren } from "react";
2
- import { type Graph } from "../graph";
1
+ import { Graph } from "../graph";
3
2
  import { useDragSelection } from "../hooks/sigmaDragSelect";
4
3
  import { useSigma } from "../hooks/useSigma";
5
- import { type EdgeAttributes, type GraphProps, type NodeAttributes } from "../types";
4
+ import { EdgeAttributes, NodeAttributes } from "../types";
6
5
  interface Context<N = KeyValue, E = KeyValue> {
7
6
  sigma: ReturnType<typeof useSigma>;
8
7
  graph: Graph<NodeAttributes<N>, EdgeAttributes<E>>;
@@ -13,6 +12,6 @@ interface Context<N = KeyValue, E = KeyValue> {
13
12
  zoomIn: () => void;
14
13
  zoomOut: () => void;
15
14
  }
15
+ export declare const GraphContext: import("react").Context<Context<KeyValue<any>, KeyValue<any>>>;
16
16
  export declare const useGraph: <N = KeyValue, E = KeyValue>() => Context<N, E>;
17
- export declare const GraphProvider: <N = KeyValue, E = KeyValue>({ ref, data, children, nodeReducer, edgeReducer, onSelectChange, onNodeDoubleClick, onContextMenu, }: PropsWithChildren<GraphProps<N, E>>) => import("react/jsx-runtime").JSX.Element;
18
17
  export {};
@@ -1,4 +1,4 @@
1
- import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve/dist/declarations/src/utils";
1
+ import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve";
2
2
  import { type Attributes } from "graphology-types";
3
3
  import { type EdgeLabelDrawingFunction } from "sigma/rendering";
4
4
  export declare function createDrawCurvedEdgeLabel<N extends Attributes = Attributes, E extends Attributes = Attributes, G extends Attributes = Attributes>({ curvatureAttribute, defaultCurvature, keepLabelUpright, }: CreateEdgeCurveProgramOptions & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/graph",
3
- "version": "1.0.0-beta.62",
3
+ "version": "1.0.0-beta.63",
4
4
  "description": "RUF: SigmaJS link analysis graph",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -35,15 +35,15 @@
35
35
  "watch": "npm-run-all -p watch:rollup watch:dts"
36
36
  },
37
37
  "dependencies": {
38
- "@floating-ui/react": "~0.27.16",
39
- "@react-fabric/core": "^1.0.0-beta.62",
40
- "@react-fabric/utilities": "^1.0.0-beta.62",
38
+ "@floating-ui/react": "~0.27.19",
39
+ "@react-fabric/core": "^1.0.0-beta.63",
40
+ "@react-fabric/utilities": "^1.0.0-beta.63",
41
41
  "@sigma/edge-curve": "~3.1.0",
42
42
  "@sigma/utils": "~3.0.0",
43
43
  "classnames": "~2.5.1",
44
44
  "dom-to-image": "~2.6.0",
45
45
  "graphology": "~0.26.0",
46
- "graphology-canvas": "~0.4.2",
46
+ "graphology-canvas": "~0.4.3",
47
47
  "graphology-layout": "~0.6.1",
48
48
  "graphology-layout-forceatlas2": "~0.10.1",
49
49
  "graphology-shortest-path": "~2.1.0",
@@ -51,10 +51,10 @@
51
51
  "sigma": "~3.0.2"
52
52
  },
53
53
  "peerDependencies": {
54
- "i18next": "~25.6.0",
55
- "react": "~19.2.0",
56
- "react-dom": "~19.2.0",
57
- "react-i18next": "~16.2.1"
54
+ "i18next": "~25.8.18",
55
+ "react": "~19.2.4",
56
+ "react-dom": "~19.2.4",
57
+ "react-i18next": "~16.5.8"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@types/dom-to-image": "~2.6.7",
@@ -62,8 +62,8 @@
62
62
  "elkjs": "~0.11.0"
63
63
  },
64
64
  "engines": {
65
- "node": ">=18.12.0",
66
- "npm": ">=8.19.0"
65
+ "node": ">=22.18.0",
66
+ "npm": ">=10.8.0"
67
67
  },
68
- "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
68
+ "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
69
69
  }
@@ -34,21 +34,15 @@ import {
34
34
  } from "@floating-ui/react";
35
35
  import { Divider, Menu, MenuItem } from "@react-fabric/core";
36
36
  import { cloneElement, useEffect, useRef, useState } from "react";
37
- import {
38
- type SigmaEdgeEventPayload,
39
- type SigmaNodeEventPayload,
40
- type SigmaStageEventPayload,
41
- } from "sigma/types";
37
+ import { type SigmaEdgeEventPayload, type SigmaNodeEventPayload, type SigmaStageEventPayload } from "sigma/types";
42
38
  import { ICONS } from "../constants";
43
- import { useGraph } from "./Context";
39
+ import { useGraph } from "./context";
44
40
 
45
41
  export const GraphContextMenu = () => {
46
42
  const [isOpen, setIsOpen] = useState(false);
47
43
  const nodeId = useFloatingNodeId();
48
44
  const { sigma } = useGraph();
49
- const [menu, setMenu] = useState<Array<React.ReactElement<typeof MenuItem>>>(
50
- [],
51
- );
45
+ const [menu, setMenu] = useState<Array<React.ReactElement<typeof MenuItem>>>([]);
52
46
 
53
47
  const { refs, floatingStyles, context } = useFloating({
54
48
  open: isOpen,
@@ -72,51 +66,26 @@ export const GraphContextMenu = () => {
72
66
  const { getFloatingProps } = useInteractions([dismiss, click]);
73
67
 
74
68
  const tryClosing = useRef((e: React.MouseEvent) => {
75
- if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']"))
76
- setTimeout(() => setIsOpen(false), 50);
69
+ if ((e.target as HTMLElement)?.closest("[data-dropdown-dismiss='true']")) setTimeout(() => setIsOpen(false), 50);
77
70
  });
78
71
 
79
72
  useEffect(() => {
80
- const handleContextMenu = (
81
- e: SigmaNodeEventPayload | SigmaEdgeEventPayload | SigmaStageEventPayload,
82
- ) => {
73
+ const handleContextMenu = (e: SigmaNodeEventPayload | SigmaEdgeEventPayload | SigmaStageEventPayload) => {
83
74
  if ("node" in e) {
84
75
  setMenu([
85
76
  <MenuItem key="0.0" label="Select neighbors" />,
86
77
  <Divider key="0.1" />,
87
- <MenuItem
88
- key="0.2"
89
- label="Delete node(s)"
90
- color="danger"
91
- icon={ICONS.delete}
92
- />,
93
- <MenuItem
94
- key="0.3"
95
- label="Clear graph"
96
- color="danger"
97
- icon={ICONS.clear}
98
- />,
78
+ <MenuItem key="0.2" label="Delete node(s)" color="danger" icon={ICONS.delete} />,
79
+ <MenuItem key="0.3" label="Clear graph" color="danger" icon={ICONS.clear} />,
99
80
  ]);
100
81
  } else if ("edge" in e) {
101
82
  setMenu([
102
83
  <MenuItem key="1.0" label="Select neighbors" />,
103
84
  <Divider key="1.1" />,
104
- <MenuItem
105
- key="1.2"
106
- label="Clear graph"
107
- color="danger"
108
- icon={ICONS.clear}
109
- />,
85
+ <MenuItem key="1.2" label="Clear graph" color="danger" icon={ICONS.clear} />,
110
86
  ]);
111
87
  } else {
112
- setMenu([
113
- <MenuItem
114
- key="2.0"
115
- label="Clear graph"
116
- color="danger"
117
- icon={ICONS.clear}
118
- />,
119
- ]);
88
+ setMenu([<MenuItem key="2.0" label="Clear graph" color="danger" icon={ICONS.clear} />]);
120
89
  }
121
90
  const virtual = {
122
91
  getBoundingClientRect() {
@@ -150,12 +119,7 @@ export const GraphContextMenu = () => {
150
119
 
151
120
  return (
152
121
  isOpen && (
153
- <FloatingPortal
154
- root={
155
- refs.domReference.current?.closest<HTMLElement>(".theme-base") ??
156
- undefined
157
- }
158
- >
122
+ <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
159
123
  {cloneElement((<Menu>{menu}</Menu>) as AnyObject, {
160
124
  ...getFloatingProps(),
161
125
  style: {
@@ -164,7 +128,7 @@ export const GraphContextMenu = () => {
164
128
  zIndex: "var(--z-popover)",
165
129
  fontSize: "0.75rem",
166
130
  },
167
- className: "bg-base outline rounded-capped shadow-lg",
131
+ className: "bg-default outline rounded-capped shadow-lg",
168
132
  ref: refs.setFloating,
169
133
  onMouseUp: tryClosing.current,
170
134
  })}
@@ -1,39 +1,12 @@
1
1
  import { Icon } from "@react-fabric/core";
2
2
  import { fitViewportToNodes } from "@sigma/utils";
3
- import {
4
- createContext,
5
- type PropsWithChildren,
6
- useContext,
7
- useEffect,
8
- useImperativeHandle,
9
- useState,
10
- } from "react";
3
+ import { type PropsWithChildren, useEffect, useImperativeHandle, useState } from "react";
11
4
  import { type SigmaNodeEventPayload } from "sigma/types";
12
- import { type Graph } from "../graph";
13
5
  import { useDragSelection } from "../hooks/sigmaDragSelect";
14
6
  import { useGraphology } from "../hooks/useGraphology";
15
7
  import { useSigma } from "../hooks/useSigma";
16
- import {
17
- type EdgeAttributes,
18
- type GraphProps,
19
- type NodeAttributes,
20
- } from "../types";
21
-
22
- interface Context<N = KeyValue, E = KeyValue> {
23
- sigma: ReturnType<typeof useSigma>;
24
- graph: Graph<NodeAttributes<N>, EdgeAttributes<E>>;
25
- selected: string[];
26
- layoutRunning: boolean;
27
- dragSelector: ReturnType<typeof useDragSelection>;
28
- resetViewport: () => void;
29
- zoomIn: () => void;
30
- zoomOut: () => void;
31
- }
32
-
33
- const GraphContext = createContext<Context>({} as Context);
34
-
35
- export const useGraph = <N = KeyValue, E = KeyValue>() =>
36
- useContext(GraphContext) as Context<N, E>;
8
+ import { type GraphProps } from "../types";
9
+ import { GraphContext } from "./context";
37
10
 
38
11
  export const GraphProvider = <N = KeyValue, E = KeyValue>({
39
12
  ref,
@@ -1,19 +1,12 @@
1
- import {
2
- Button,
3
- ButtonGroup,
4
- Dropdown,
5
- Menu,
6
- MenuItem,
7
- } from "@react-fabric/core";
1
+ import { Button, ButtonGroup, Dropdown, Menu, MenuItem } from "@react-fabric/core";
8
2
  import { ICONS } from "../constants";
9
- import { useGraph } from "./Context";
3
+ import { useGraph } from "./context";
10
4
 
11
5
  export const Tools = () => {
12
- const { dragSelector, graph, selected, resetViewport, zoomIn, zoomOut } =
13
- useGraph();
6
+ const { dragSelector, graph, selected, resetViewport, zoomIn, zoomOut } = useGraph();
14
7
 
15
8
  return (
16
- <div className="flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base">
9
+ <div className="flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-default">
17
10
  <ButtonGroup variant="link">
18
11
  <Button aria-label="Home" icon={ICONS.focus} onClick={resetViewport} />
19
12
  <Button aria-label="Zoomin" icon={ICONS.zoomIn} onClick={zoomIn} />
@@ -29,12 +22,7 @@ export const Tools = () => {
29
22
  />
30
23
  )}
31
24
  {dragSelector.selectionMode && (
32
- <Button
33
- color="danger"
34
- aria-label="cancel"
35
- icon={ICONS.cancel}
36
- onClick={() => dragSelector.cancelSelection()}
37
- />
25
+ <Button color="danger" aria-label="cancel" icon={ICONS.cancel} onClick={() => dragSelector.cancelSelection()} />
38
26
  )}
39
27
  {dragSelector.selectionMode !== "rectangle" && (
40
28
  <Button
@@ -55,34 +43,13 @@ export const Tools = () => {
55
43
  }
56
44
  />
57
45
  <Menu className="text-sm">
58
- <MenuItem
59
- label="box"
60
- onClick={async () => await graph.elkLayout("box")}
61
- />
62
- <MenuItem
63
- label="force"
64
- onClick={async () => await graph.elkLayout("force")}
65
- />
66
- <MenuItem
67
- label="layered"
68
- onClick={async () => await graph.elkLayout("layered")}
69
- />
70
- <MenuItem
71
- label="stress"
72
- onClick={async () => await graph.elkLayout("stress")}
73
- />
74
- <MenuItem
75
- label="radial"
76
- onClick={async () => await graph.elkLayout("radial")}
77
- />
78
- <MenuItem
79
- label="sporeOverlap"
80
- onClick={async () => await graph.elkLayout("sporeOverlap")}
81
- />
82
- <MenuItem
83
- label="sporeCompaction"
84
- onClick={async () => await graph.elkLayout("sporeCompaction")}
85
- />
46
+ <MenuItem label="box" onClick={async () => await graph.elkLayout("box")} />
47
+ <MenuItem label="force" onClick={async () => await graph.elkLayout("force")} />
48
+ <MenuItem label="layered" onClick={async () => await graph.elkLayout("layered")} />
49
+ <MenuItem label="stress" onClick={async () => await graph.elkLayout("stress")} />
50
+ <MenuItem label="radial" onClick={async () => await graph.elkLayout("radial")} />
51
+ <MenuItem label="sporeOverlap" onClick={async () => await graph.elkLayout("sporeOverlap")} />
52
+ <MenuItem label="sporeCompaction" onClick={async () => await graph.elkLayout("sporeCompaction")} />
86
53
  </Menu>
87
54
  </Dropdown>
88
55
  </ButtonGroup>
@@ -94,12 +61,7 @@ export const Tools = () => {
94
61
  disabled={!selected.length}
95
62
  onClick={() => graph.dropNodes(selected)}
96
63
  />
97
- <Button
98
- aria-label="clear"
99
- color="danger"
100
- icon={ICONS.clear}
101
- onClick={() => graph.clear()}
102
- />
64
+ <Button aria-label="clear" color="danger" icon={ICONS.clear} onClick={() => graph.clear()} />
103
65
  </ButtonGroup>
104
66
  </div>
105
67
  );
@@ -22,11 +22,12 @@
22
22
  */
23
23
 
24
24
  import { Section } from "@react-fabric/core";
25
- import { type GraphProps } from "../types";
26
- import { GraphProvider, useGraph } from "./Context";
27
- import { Tools } from "./Tools";
28
25
  import { useEffect, useRef } from "react";
26
+ import { type GraphProps } from "../types";
29
27
  import { GraphContextMenu } from "./ContextMenu";
28
+ import { GraphProvider } from "./Provider";
29
+ import { Tools } from "./Tools";
30
+ import { useGraph } from "./context";
30
31
 
31
32
  const Graph = () => {
32
33
  const { sigma, graph } = useGraph();
@@ -45,7 +46,7 @@ const Graph = () => {
45
46
  }, [graph]);
46
47
 
47
48
  return (
48
- <div className="area-content relative bg-base graph-viewer">
49
+ <div className="area-content relative bg-default graph-viewer">
49
50
  <div dir="ltr" ref={sigma.containerRef} className="absolute inset-0" />
50
51
  <div
51
52
  role="none"
@@ -61,9 +62,7 @@ const Graph = () => {
61
62
  );
62
63
  };
63
64
 
64
- export const SigmaGraph = <N = KeyValue, E = KeyValue>(
65
- props: GraphProps<N, E>,
66
- ) => {
65
+ export const SigmaGraph = <N = KeyValue, E = KeyValue>(props: GraphProps<N, E>) => {
67
66
  return (
68
67
  <Section className="relative">
69
68
  <GraphProvider {...props}>
@@ -0,0 +1,43 @@
1
+ /*
2
+ * React Fabric
3
+ * @version: 1.0.0
4
+ *
5
+ *
6
+ * The MIT License (MIT)
7
+ * Copyright (c) 2026 Adarsh Pastakia
8
+ *
9
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
10
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
11
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
12
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
13
+ * subject to the following conditions:
14
+ *
15
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
16
+ * portions of the Software.
17
+ *
18
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
19
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
20
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22
+ */
23
+
24
+ import { createContext, useContext } from "react";
25
+ import { Graph } from "../graph";
26
+ import { useDragSelection } from "../hooks/sigmaDragSelect";
27
+ import { useSigma } from "../hooks/useSigma";
28
+ import { EdgeAttributes, NodeAttributes } from "../types";
29
+
30
+ interface Context<N = KeyValue, E = KeyValue> {
31
+ sigma: ReturnType<typeof useSigma>;
32
+ graph: Graph<NodeAttributes<N>, EdgeAttributes<E>>;
33
+ selected: string[];
34
+ layoutRunning: boolean;
35
+ dragSelector: ReturnType<typeof useDragSelection>;
36
+ resetViewport: () => void;
37
+ zoomIn: () => void;
38
+ zoomOut: () => void;
39
+ }
40
+
41
+ export const GraphContext = createContext<Context>({} as Context);
42
+
43
+ export const useGraph = <N = KeyValue, E = KeyValue>() => useContext(GraphContext) as Context<N, E>;
@@ -1,4 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
1
  import { type Attributes } from "graphology-types";
3
2
 
4
3
  import {
@@ -1,4 +1,4 @@
1
- import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve/dist/declarations/src/utils";
1
+ import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve";
2
2
  import { type Attributes } from "graphology-types";
3
3
  import { type EdgeLabelDrawingFunction } from "sigma/rendering";
4
4
  import { type Settings } from "sigma/settings";
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { DEFAULT_EDGE_CURVATURE } from "@sigma/edge-curve";
4
2
  import { type Attributes } from "graphology-types";
5
3
  import {
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { type Attributes } from "graphology-types";
4
2
  import {
5
3
  createEdgeCompoundProgram,
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { type Attributes } from "graphology-types";
4
2
  import type Sigma from "sigma";
5
3
  import {
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { NodeProgram, type ProgramInfo } from "sigma/rendering";
4
2
  import { type NodeDisplayData, type RenderParams } from "sigma/types";
5
3
  import { floatColor } from "sigma/utils";
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { isSvgPath } from "@react-fabric/utilities";
4
2
  import { type Attributes } from "graphology-types";
5
3
  import type Sigma from "sigma";
@@ -1,5 +1,3 @@
1
- /* eslint-disable @typescript-eslint/naming-convention */
2
-
3
1
  import { NodeProgram, type ProgramInfo } from "sigma/rendering";
4
2
  import { type NodeDisplayData, type RenderParams } from "sigma/types";
5
3
  import { floatColor } from "sigma/utils";