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

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 (220) hide show
  1. package/dist/cjs/context/context.js +16 -0
  2. package/dist/cjs/graph/index.js +62 -385
  3. package/dist/cjs/index.js +25 -21
  4. package/dist/cjs/utils/edge.js +76 -0
  5. package/dist/cjs/utils/node.js +93 -0
  6. package/dist/cjs/utils/sdfFolder.js +107 -0
  7. package/dist/cjs/viewer/Graph.js +174 -0
  8. package/dist/esm/context/context.js +15 -0
  9. package/dist/esm/graph/index.js +63 -386
  10. package/dist/esm/index.js +24 -20
  11. package/dist/esm/utils/edge.js +75 -0
  12. package/dist/esm/utils/node.js +92 -0
  13. package/dist/esm/utils/sdfFolder.js +107 -0
  14. package/dist/esm/viewer/Graph.js +174 -0
  15. package/dist/types/context/context.d.ts +35 -0
  16. package/dist/types/graph/index.d.ts +47 -24
  17. package/dist/types/index.d.ts +28 -2
  18. package/dist/types/types/index.d.ts +124 -175
  19. package/dist/types/utils/edge.d.ts +28 -0
  20. package/dist/types/utils/node.d.ts +28 -0
  21. package/dist/types/utils/sdfFolder.d.ts +75 -0
  22. package/dist/types/viewer/Graph.d.ts +31 -0
  23. package/package.json +19 -25
  24. package/src/context/context.tsx +43 -0
  25. package/src/graph/index.ts +76 -399
  26. package/src/index.ts +24 -26
  27. package/src/types/index.ts +139 -185
  28. package/src/utils/edge.ts +65 -0
  29. package/src/utils/node.ts +105 -0
  30. package/src/utils/sdfFolder.ts +141 -0
  31. package/src/viewer/Graph.tsx +159 -0
  32. package/css/styles.css +0 -56
  33. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__auto__createBase64WorkerFactory.js +0 -14
  34. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__auto__isNodeJS.js +0 -9
  35. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__browser__createBase64WorkerFactory.js +0 -35
  36. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__node__WorkerClass.js +0 -11
  37. package/dist/cjs/_virtual/_rollup-plugin-web-worker-loader__helper__node__createBase64WorkerFactory.js +0 -20
  38. package/dist/cjs/_virtual/elk-worker.js +0 -8
  39. package/dist/cjs/components/Context.js +0 -107
  40. package/dist/cjs/components/ContextMenu.js +0 -133
  41. package/dist/cjs/components/Tools.js +0 -205
  42. package/dist/cjs/components/Viewer.js +0 -58
  43. package/dist/cjs/constants/index.js +0 -16
  44. package/dist/cjs/hooks/sigmaDragSelect.js +0 -169
  45. package/dist/cjs/hooks/sigmaHilighter.js +0 -83
  46. package/dist/cjs/hooks/sigmaMouseActions.js +0 -145
  47. package/dist/cjs/hooks/useGraphology.js +0 -41
  48. package/dist/cjs/hooks/useSigma.js +0 -112
  49. package/dist/cjs/programs/arrow-head/frag.glsl.js +0 -8
  50. package/dist/cjs/programs/arrow-head/index.js +0 -142
  51. package/dist/cjs/programs/arrow-head/vert.glsl.js +0 -8
  52. package/dist/cjs/programs/edge-curve/drawLabel.js +0 -136
  53. package/dist/cjs/programs/edge-curve/frag.glsl.js +0 -8
  54. package/dist/cjs/programs/edge-curve/index.js +0 -157
  55. package/dist/cjs/programs/edge-curve/vert.glsl.js +0 -8
  56. package/dist/cjs/programs/edge-line/drawLabel.js +0 -70
  57. package/dist/cjs/programs/edge-line/frag.glsl.js +0 -8
  58. package/dist/cjs/programs/edge-line/index.js +0 -166
  59. package/dist/cjs/programs/edge-line/vert.glsl.js +0 -8
  60. package/dist/cjs/programs/node-badge/factory.js +0 -249
  61. package/dist/cjs/programs/node-badge/frag.glsl.js +0 -8
  62. package/dist/cjs/programs/node-badge/index.js +0 -33
  63. package/dist/cjs/programs/node-badge/texture.js +0 -455
  64. package/dist/cjs/programs/node-badge/vert.glsl.js +0 -19
  65. package/dist/cjs/programs/node-circle/base/drawHover.js +0 -71
  66. package/dist/cjs/programs/node-circle/base/drawLabel.js +0 -113
  67. package/dist/cjs/programs/node-circle/base/frag.glsl.js +0 -8
  68. package/dist/cjs/programs/node-circle/base/index.js +0 -136
  69. package/dist/cjs/programs/node-circle/base/vert.glsl.js +0 -8
  70. package/dist/cjs/programs/node-circle/index.js +0 -15
  71. package/dist/cjs/programs/node-image/factory.js +0 -223
  72. package/dist/cjs/programs/node-image/frag.glsl.js +0 -8
  73. package/dist/cjs/programs/node-image/index.js +0 -14
  74. package/dist/cjs/programs/node-image/texture.js +0 -472
  75. package/dist/cjs/programs/node-image/vert.glsl.js +0 -8
  76. package/dist/cjs/programs/node-rect/base/drawHover.js +0 -68
  77. package/dist/cjs/programs/node-rect/base/drawLabel.js +0 -107
  78. package/dist/cjs/programs/node-rect/base/frag.glsl.js +0 -8
  79. package/dist/cjs/programs/node-rect/base/index.js +0 -135
  80. package/dist/cjs/programs/node-rect/base/vert.glsl.js +0 -8
  81. package/dist/cjs/programs/node-rect/index.js +0 -15
  82. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__auto__createBase64WorkerFactory.js +0 -14
  83. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__auto__isNodeJS.js +0 -9
  84. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__browser__createBase64WorkerFactory.js +0 -34
  85. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__node__WorkerClass.js +0 -13
  86. package/dist/esm/_virtual/_rollup-plugin-web-worker-loader__helper__node__createBase64WorkerFactory.js +0 -20
  87. package/dist/esm/_virtual/elk-worker.js +0 -8
  88. package/dist/esm/components/Context.js +0 -106
  89. package/dist/esm/components/ContextMenu.js +0 -133
  90. package/dist/esm/components/Tools.js +0 -205
  91. package/dist/esm/components/Viewer.js +0 -58
  92. package/dist/esm/constants/index.js +0 -16
  93. package/dist/esm/hooks/sigmaDragSelect.js +0 -169
  94. package/dist/esm/hooks/sigmaHilighter.js +0 -83
  95. package/dist/esm/hooks/sigmaMouseActions.js +0 -145
  96. package/dist/esm/hooks/useGraphology.js +0 -41
  97. package/dist/esm/hooks/useSigma.js +0 -112
  98. package/dist/esm/programs/arrow-head/frag.glsl.js +0 -8
  99. package/dist/esm/programs/arrow-head/index.js +0 -141
  100. package/dist/esm/programs/arrow-head/vert.glsl.js +0 -8
  101. package/dist/esm/programs/edge-curve/drawLabel.js +0 -136
  102. package/dist/esm/programs/edge-curve/frag.glsl.js +0 -8
  103. package/dist/esm/programs/edge-curve/index.js +0 -156
  104. package/dist/esm/programs/edge-curve/vert.glsl.js +0 -8
  105. package/dist/esm/programs/edge-line/drawLabel.js +0 -70
  106. package/dist/esm/programs/edge-line/frag.glsl.js +0 -8
  107. package/dist/esm/programs/edge-line/index.js +0 -166
  108. package/dist/esm/programs/edge-line/vert.glsl.js +0 -8
  109. package/dist/esm/programs/node-badge/factory.js +0 -249
  110. package/dist/esm/programs/node-badge/frag.glsl.js +0 -8
  111. package/dist/esm/programs/node-badge/index.js +0 -32
  112. package/dist/esm/programs/node-badge/texture.js +0 -445
  113. package/dist/esm/programs/node-badge/vert.glsl.js +0 -19
  114. package/dist/esm/programs/node-circle/base/drawHover.js +0 -71
  115. package/dist/esm/programs/node-circle/base/drawLabel.js +0 -113
  116. package/dist/esm/programs/node-circle/base/frag.glsl.js +0 -8
  117. package/dist/esm/programs/node-circle/base/index.js +0 -136
  118. package/dist/esm/programs/node-circle/base/vert.glsl.js +0 -8
  119. package/dist/esm/programs/node-circle/index.js +0 -15
  120. package/dist/esm/programs/node-image/factory.js +0 -223
  121. package/dist/esm/programs/node-image/frag.glsl.js +0 -8
  122. package/dist/esm/programs/node-image/index.js +0 -13
  123. package/dist/esm/programs/node-image/texture.js +0 -462
  124. package/dist/esm/programs/node-image/vert.glsl.js +0 -8
  125. package/dist/esm/programs/node-rect/base/drawHover.js +0 -68
  126. package/dist/esm/programs/node-rect/base/drawLabel.js +0 -107
  127. package/dist/esm/programs/node-rect/base/frag.glsl.js +0 -8
  128. package/dist/esm/programs/node-rect/base/index.js +0 -135
  129. package/dist/esm/programs/node-rect/base/vert.glsl.js +0 -8
  130. package/dist/esm/programs/node-rect/index.js +0 -15
  131. package/dist/types/components/Context.d.ts +0 -18
  132. package/dist/types/components/ContextMenu.d.ts +0 -1
  133. package/dist/types/components/Tools.d.ts +0 -1
  134. package/dist/types/components/Viewer.d.ts +0 -2
  135. package/dist/types/constants/index.d.ts +0 -12
  136. package/dist/types/graph/layout.worker.d.ts +0 -1
  137. package/dist/types/hooks/sigmaDragSelect.d.ts +0 -8
  138. package/dist/types/hooks/sigmaHilighter.d.ts +0 -3
  139. package/dist/types/hooks/sigmaMouseActions.d.ts +0 -3
  140. package/dist/types/hooks/useGraphology.d.ts +0 -6
  141. package/dist/types/hooks/useSigma.d.ts +0 -8
  142. package/dist/types/i18n/index.d.ts +0 -0
  143. package/dist/types/programs/arrow-head/frag.glsl.d.ts +0 -2
  144. package/dist/types/programs/arrow-head/index.d.ts +0 -9
  145. package/dist/types/programs/arrow-head/vert.glsl.d.ts +0 -2
  146. package/dist/types/programs/edge-curve/drawLabel.d.ts +0 -6
  147. package/dist/types/programs/edge-curve/frag.glsl.d.ts +0 -2
  148. package/dist/types/programs/edge-curve/index.d.ts +0 -43
  149. package/dist/types/programs/edge-curve/vert.glsl.d.ts +0 -2
  150. package/dist/types/programs/edge-line/drawLabel.d.ts +0 -5
  151. package/dist/types/programs/edge-line/frag.glsl.d.ts +0 -2
  152. package/dist/types/programs/edge-line/index.d.ts +0 -11
  153. package/dist/types/programs/edge-line/vert.glsl.d.ts +0 -2
  154. package/dist/types/programs/node-badge/factory.d.ts +0 -27
  155. package/dist/types/programs/node-badge/frag.glsl.d.ts +0 -2
  156. package/dist/types/programs/node-badge/index.d.ts +0 -5
  157. package/dist/types/programs/node-badge/texture.d.ts +0 -102
  158. package/dist/types/programs/node-badge/vert.glsl.d.ts +0 -2
  159. package/dist/types/programs/node-circle/base/drawHover.d.ts +0 -8
  160. package/dist/types/programs/node-circle/base/drawLabel.d.ts +0 -8
  161. package/dist/types/programs/node-circle/base/frag.glsl.d.ts +0 -2
  162. package/dist/types/programs/node-circle/base/index.d.ts +0 -37
  163. package/dist/types/programs/node-circle/base/vert.glsl.d.ts +0 -2
  164. package/dist/types/programs/node-circle/index.d.ts +0 -11
  165. package/dist/types/programs/node-image/factory.d.ts +0 -25
  166. package/dist/types/programs/node-image/frag.glsl.d.ts +0 -2
  167. package/dist/types/programs/node-image/index.d.ts +0 -5
  168. package/dist/types/programs/node-image/texture.d.ts +0 -102
  169. package/dist/types/programs/node-image/vert.glsl.d.ts +0 -2
  170. package/dist/types/programs/node-rect/base/drawHover.d.ts +0 -8
  171. package/dist/types/programs/node-rect/base/drawLabel.d.ts +0 -8
  172. package/dist/types/programs/node-rect/base/frag.glsl.d.ts +0 -2
  173. package/dist/types/programs/node-rect/base/index.d.ts +0 -34
  174. package/dist/types/programs/node-rect/base/vert.glsl.d.ts +0 -2
  175. package/dist/types/programs/node-rect/index.d.ts +0 -11
  176. package/src/components/Context.tsx +0 -143
  177. package/src/components/ContextMenu.tsx +0 -174
  178. package/src/components/Tools.tsx +0 -106
  179. package/src/components/Viewer.tsx +0 -76
  180. package/src/constants/index.ts +0 -22
  181. package/src/graph/layout.worker.ts +0 -42
  182. package/src/hooks/sigmaDragSelect.ts +0 -219
  183. package/src/hooks/sigmaHilighter.ts +0 -107
  184. package/src/hooks/sigmaMouseActions.ts +0 -153
  185. package/src/hooks/useGraphology.ts +0 -31
  186. package/src/hooks/useSigma.ts +0 -118
  187. package/src/i18n/index.ts +0 -0
  188. package/src/programs/arrow-head/frag.glsl.ts +0 -18
  189. package/src/programs/arrow-head/index.ts +0 -157
  190. package/src/programs/arrow-head/vert.glsl.ts +0 -75
  191. package/src/programs/edge-curve/drawLabel.ts +0 -166
  192. package/src/programs/edge-curve/frag.glsl.ts +0 -86
  193. package/src/programs/edge-curve/index.ts +0 -158
  194. package/src/programs/edge-curve/vert.glsl.ts +0 -110
  195. package/src/programs/edge-line/drawLabel.ts +0 -113
  196. package/src/programs/edge-line/frag.glsl.ts +0 -34
  197. package/src/programs/edge-line/index.ts +0 -165
  198. package/src/programs/edge-line/vert.glsl.ts +0 -104
  199. package/src/programs/node-badge/factory.ts +0 -327
  200. package/src/programs/node-badge/frag.glsl.ts +0 -79
  201. package/src/programs/node-badge/index.ts +0 -35
  202. package/src/programs/node-badge/texture.ts +0 -425
  203. package/src/programs/node-badge/vert.glsl.ts +0 -99
  204. package/src/programs/node-circle/base/drawHover.ts +0 -80
  205. package/src/programs/node-circle/base/drawLabel.ts +0 -145
  206. package/src/programs/node-circle/base/frag.glsl.ts +0 -72
  207. package/src/programs/node-circle/base/index.ts +0 -102
  208. package/src/programs/node-circle/base/vert.glsl.ts +0 -83
  209. package/src/programs/node-circle/index.ts +0 -19
  210. package/src/programs/node-image/factory.ts +0 -301
  211. package/src/programs/node-image/frag.glsl.ts +0 -97
  212. package/src/programs/node-image/index.ts +0 -7
  213. package/src/programs/node-image/texture.ts +0 -435
  214. package/src/programs/node-image/vert.glsl.ts +0 -60
  215. package/src/programs/node-rect/base/drawHover.ts +0 -77
  216. package/src/programs/node-rect/base/drawLabel.ts +0 -149
  217. package/src/programs/node-rect/base/frag.glsl.ts +0 -67
  218. package/src/programs/node-rect/base/index.ts +0 -109
  219. package/src/programs/node-rect/base/vert.glsl.ts +0 -87
  220. package/src/programs/node-rect/index.ts +0 -19
@@ -1,106 +0,0 @@
1
- 'use client';
2
-
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import { Icon } from '@react-fabric/core';
5
- import { fitViewportToNodes } from '@sigma/utils';
6
- import { useState, useEffect, useImperativeHandle, createContext, useContext } from 'react';
7
- import { useDragSelection } from '../hooks/sigmaDragSelect.js';
8
- import { useGraphology } from '../hooks/useGraphology.js';
9
- import { useSigma } from '../hooks/useSigma.js';
10
- import { jsxs, jsx } from 'react/jsx-runtime';
11
-
12
- var GraphContext = /*#__PURE__*/createContext({});
13
- var useGraph = function useGraph() {
14
- return useContext(GraphContext);
15
- };
16
- var GraphProvider = function GraphProvider(_ref) {
17
- var ref = _ref.ref,
18
- data = _ref.data,
19
- children = _ref.children,
20
- nodeReducer = _ref.nodeReducer,
21
- edgeReducer = _ref.edgeReducer,
22
- onSelectChange = _ref.onSelectChange,
23
- onNodeDoubleClick = _ref.onNodeDoubleClick;
24
- _ref.onContextMenu;
25
- var _useGraphology = useGraphology(data),
26
- graph = _useGraphology.graph,
27
- selected = _useGraphology.selected;
28
- var sigma = useSigma(graph, nodeReducer, edgeReducer);
29
- var dragSelector = useDragSelection(sigma.instance);
30
- var _useState = useState(false),
31
- _useState2 = _slicedToArray(_useState, 2),
32
- layoutRunning = _useState2[0],
33
- setLayoutRunning = _useState2[1];
34
- var resetViewport = function resetViewport() {
35
- if (graph.size === 0) return;
36
- void (sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
37
- animate: true
38
- }));
39
- };
40
- var zoomIn = function zoomIn() {
41
- var _sigma$instance;
42
- if (graph.size === 0) return;
43
- void ((_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 ? void 0 : _sigma$instance.getCamera().animatedZoom());
44
- };
45
- var zoomOut = function zoomOut() {
46
- var _sigma$instance2;
47
- if (graph.size === 0) return;
48
- void ((_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 ? void 0 : _sigma$instance2.getCamera().animatedUnzoom());
49
- };
50
- useEffect(function () {
51
- var resetHandler = function resetHandler() {
52
- void (sigma.instance && fitViewportToNodes(sigma.instance, graph.nodes(), {
53
- animate: true
54
- }));
55
- };
56
- graph.on("layoutRunning", setLayoutRunning);
57
- graph.on("layoutDone", resetHandler);
58
- onSelectChange && graph.on("nodesSelected", onSelectChange);
59
- return function () {
60
- graph.off("layoutDone", resetHandler);
61
- graph.off("layoutRunning", setLayoutRunning);
62
- onSelectChange && graph.off("nodesSelected", onSelectChange);
63
- };
64
- }, [graph, sigma, onSelectChange]);
65
- useEffect(function () {
66
- var _sigma$instance3;
67
- var handleClick = function handleClick(e) {
68
- onNodeDoubleClick === null || onNodeDoubleClick === void 0 || onNodeDoubleClick(e.node, graph.getNodeAttributes(e.node));
69
- e.event.original.preventDefault();
70
- e.event.preventSigmaDefault();
71
- e.preventSigmaDefault();
72
- return false;
73
- };
74
- (_sigma$instance3 = sigma.instance) === null || _sigma$instance3 === void 0 || _sigma$instance3.on("doubleClickNode", handleClick);
75
- return function () {
76
- var _sigma$instance4;
77
- (_sigma$instance4 = sigma.instance) === null || _sigma$instance4 === void 0 || _sigma$instance4.off("doubleClickNode", handleClick);
78
- };
79
- }, [sigma, graph, onNodeDoubleClick]);
80
- useImperativeHandle(ref, function () {
81
- return {
82
- graph: graph,
83
- sigma: sigma
84
- };
85
- }, [graph, sigma]);
86
- return /*#__PURE__*/jsxs(GraphContext.Provider, {
87
- value: {
88
- sigma: sigma,
89
- graph: graph,
90
- selected: selected,
91
- dragSelector: dragSelector,
92
- layoutRunning: layoutRunning,
93
- resetViewport: resetViewport,
94
- zoomIn: zoomIn,
95
- zoomOut: zoomOut
96
- },
97
- children: [children, layoutRunning && /*#__PURE__*/jsx("div", {
98
- className: "absolute top-0 end-0 p-1",
99
- children: /*#__PURE__*/jsx(Icon, {
100
- icon: "icon-[svg-spinners--eclipse]"
101
- })
102
- })]
103
- });
104
- };
105
-
106
- export { GraphProvider, useGraph };
@@ -1,133 +0,0 @@
1
- 'use client';
2
-
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import { useFloatingNodeId, useFloating, autoUpdate, offset, flip, useClick, useDismiss, useInteractions, FloatingPortal } from '@floating-ui/react';
6
- import { Menu, MenuItem, Divider } from '@react-fabric/core';
7
- import { useState, useRef, useEffect, cloneElement } from 'react';
8
- import { ICONS } from '../constants/index.js';
9
- import { useGraph } from './Context.js';
10
- import { jsx } from 'react/jsx-runtime';
11
-
12
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
- var GraphContextMenu = function GraphContextMenu() {
15
- var _refs$domReference$cu, _refs$domReference$cu2;
16
- var _useState = useState(false),
17
- _useState2 = _slicedToArray(_useState, 2),
18
- isOpen = _useState2[0],
19
- setIsOpen = _useState2[1];
20
- var nodeId = useFloatingNodeId();
21
- var _useGraph = useGraph(),
22
- sigma = _useGraph.sigma;
23
- var _useState3 = useState([]),
24
- _useState4 = _slicedToArray(_useState3, 2),
25
- menu = _useState4[0],
26
- setMenu = _useState4[1];
27
- var _useFloating = useFloating({
28
- open: isOpen,
29
- nodeId: nodeId,
30
- onOpenChange: function onOpenChange(open, evt, reason) {
31
- var target = evt === null || evt === void 0 ? void 0 : evt.target;
32
- if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
33
- },
34
- strategy: "absolute",
35
- placement: "bottom-start",
36
- whileElementsMounted: autoUpdate,
37
- middleware: [offset(8), flip()]
38
- }),
39
- refs = _useFloating.refs,
40
- floatingStyles = _useFloating.floatingStyles,
41
- context = _useFloating.context;
42
- var click = useClick(context, {
43
- toggle: true,
44
- ignoreMouse: true
45
- });
46
- var dismiss = useDismiss(context, {
47
- bubbles: true
48
- });
49
- var _useInteractions = useInteractions([dismiss, click]),
50
- getFloatingProps = _useInteractions.getFloatingProps;
51
- var tryClosing = useRef(function (e) {
52
- var _e$target;
53
- if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
54
- return setIsOpen(false);
55
- }, 50);
56
- });
57
- useEffect(function () {
58
- var _sigma$instance, _sigma$instance2, _sigma$instance3;
59
- var handleContextMenu = function handleContextMenu(e) {
60
- if ("node" in e) {
61
- setMenu([/*#__PURE__*/jsx(MenuItem, {
62
- label: "Select neighbors"
63
- }, "0.0"), /*#__PURE__*/jsx(Divider, {}, "0.1"), /*#__PURE__*/jsx(MenuItem, {
64
- label: "Delete node(s)",
65
- color: "danger",
66
- icon: ICONS["delete"]
67
- }, "0.2"), /*#__PURE__*/jsx(MenuItem, {
68
- label: "Clear graph",
69
- color: "danger",
70
- icon: ICONS.clear
71
- }, "0.3")]);
72
- } else if ("edge" in e) {
73
- setMenu([/*#__PURE__*/jsx(MenuItem, {
74
- label: "Select neighbors"
75
- }, "1.0"), /*#__PURE__*/jsx(Divider, {}, "1.1"), /*#__PURE__*/jsx(MenuItem, {
76
- label: "Clear graph",
77
- color: "danger",
78
- icon: ICONS.clear
79
- }, "1.2")]);
80
- } else {
81
- setMenu([/*#__PURE__*/jsx(MenuItem, {
82
- label: "Clear graph",
83
- color: "danger",
84
- icon: ICONS.clear
85
- }, "2.0")]);
86
- }
87
- var virtual = {
88
- getBoundingClientRect: function getBoundingClientRect() {
89
- return {
90
- width: 0,
91
- height: 0,
92
- x: e.event.x,
93
- y: e.event.y,
94
- top: e.event.y,
95
- left: e.event.x,
96
- right: e.event.x,
97
- bottom: e.event.y
98
- };
99
- }
100
- };
101
- setIsOpen(true);
102
- refs.setReference(virtual);
103
- e.event.original.preventDefault();
104
- return false;
105
- };
106
- (_sigma$instance = sigma.instance) === null || _sigma$instance === void 0 || _sigma$instance.on("rightClickNode", handleContextMenu);
107
- (_sigma$instance2 = sigma.instance) === null || _sigma$instance2 === void 0 || _sigma$instance2.on("rightClickEdge", handleContextMenu);
108
- (_sigma$instance3 = sigma.instance) === null || _sigma$instance3 === void 0 || _sigma$instance3.on("rightClickStage", handleContextMenu);
109
- return function () {
110
- var _sigma$instance4, _sigma$instance5, _sigma$instance6;
111
- (_sigma$instance4 = sigma.instance) === null || _sigma$instance4 === void 0 || _sigma$instance4.off("rightClickNode", handleContextMenu);
112
- (_sigma$instance5 = sigma.instance) === null || _sigma$instance5 === void 0 || _sigma$instance5.off("rightClickEdge", handleContextMenu);
113
- (_sigma$instance6 = sigma.instance) === null || _sigma$instance6 === void 0 || _sigma$instance6.off("rightClickStage", handleContextMenu);
114
- };
115
- }, [sigma]);
116
- return isOpen && /*#__PURE__*/jsx(FloatingPortal, {
117
- root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
118
- children: /*#__PURE__*/cloneElement( /*#__PURE__*/jsx(Menu, {
119
- children: menu
120
- }), _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
121
- style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
122
- borderRadius: "var(--rounding)",
123
- zIndex: "var(--z-popover)",
124
- fontSize: "0.75rem"
125
- }),
126
- className: "bg-base outline rounded-capped shadow-lg",
127
- ref: refs.setFloating,
128
- onMouseUp: tryClosing.current
129
- }))
130
- });
131
- };
132
-
133
- export { GraphContextMenu };
@@ -1,205 +0,0 @@
1
- 'use client';
2
-
3
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
4
- import _regeneratorRuntime from '@babel/runtime/regenerator';
5
- import { ButtonGroup, Button, Dropdown, Menu, MenuItem } from '@react-fabric/core';
6
- import { ICONS } from '../constants/index.js';
7
- import { useGraph } from './Context.js';
8
- import { jsxs, jsx } from 'react/jsx-runtime';
9
-
10
- var Tools = function Tools() {
11
- var _useGraph = useGraph(),
12
- dragSelector = _useGraph.dragSelector,
13
- graph = _useGraph.graph,
14
- selected = _useGraph.selected,
15
- resetViewport = _useGraph.resetViewport,
16
- zoomIn = _useGraph.zoomIn,
17
- zoomOut = _useGraph.zoomOut;
18
- return /*#__PURE__*/jsxs("div", {
19
- className: "flex flex-nowrap outline absolute top-0 start-0 p-0 z-1 bg-base",
20
- children: [/*#__PURE__*/jsxs(ButtonGroup, {
21
- variant: "link",
22
- children: [/*#__PURE__*/jsx(Button, {
23
- "aria-label": "Home",
24
- icon: ICONS.focus,
25
- onClick: resetViewport
26
- }), /*#__PURE__*/jsx(Button, {
27
- "aria-label": "Zoomin",
28
- icon: ICONS.zoomIn,
29
- onClick: zoomIn
30
- }), /*#__PURE__*/jsx(Button, {
31
- "aria-label": "Zoomout",
32
- icon: ICONS.zoomOut,
33
- onClick: zoomOut
34
- })]
35
- }), /*#__PURE__*/jsxs(ButtonGroup, {
36
- variant: "link",
37
- children: [dragSelector.selectionMode !== "lasso" && /*#__PURE__*/jsx(Button, {
38
- "aria-label": "lasso",
39
- icon: ICONS.lasso,
40
- disabled: !!dragSelector.selectionMode,
41
- onClick: function onClick() {
42
- return dragSelector.startLassoSelection();
43
- }
44
- }), dragSelector.selectionMode && /*#__PURE__*/jsx(Button, {
45
- color: "danger",
46
- "aria-label": "cancel",
47
- icon: ICONS.cancel,
48
- onClick: function onClick() {
49
- return dragSelector.cancelSelection();
50
- }
51
- }), dragSelector.selectionMode !== "rectangle" && /*#__PURE__*/jsx(Button, {
52
- "aria-label": "rectselect",
53
- icon: ICONS.select,
54
- disabled: !!dragSelector.selectionMode,
55
- onClick: function onClick() {
56
- return dragSelector.startRectangleSelection();
57
- }
58
- })]
59
- }), /*#__PURE__*/jsx(ButtonGroup, {
60
- variant: "link",
61
- children: /*#__PURE__*/jsxs(Dropdown, {
62
- children: [/*#__PURE__*/jsx(Button, {
63
- "aria-label": "force",
64
- variant: "link",
65
- 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"
66
- }), /*#__PURE__*/jsxs(Menu, {
67
- className: "text-sm",
68
- children: [/*#__PURE__*/jsx(MenuItem, {
69
- label: "box",
70
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
71
- return _regeneratorRuntime.wrap(function _callee$(_context) {
72
- while (1) switch (_context.prev = _context.next) {
73
- case 0:
74
- _context.next = 2;
75
- return graph.elkLayout("box");
76
- case 2:
77
- return _context.abrupt("return", _context.sent);
78
- case 3:
79
- case "end":
80
- return _context.stop();
81
- }
82
- }, _callee);
83
- }))
84
- }), /*#__PURE__*/jsx(MenuItem, {
85
- label: "force",
86
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
87
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
88
- while (1) switch (_context2.prev = _context2.next) {
89
- case 0:
90
- _context2.next = 2;
91
- return graph.elkLayout("force");
92
- case 2:
93
- return _context2.abrupt("return", _context2.sent);
94
- case 3:
95
- case "end":
96
- return _context2.stop();
97
- }
98
- }, _callee2);
99
- }))
100
- }), /*#__PURE__*/jsx(MenuItem, {
101
- label: "layered",
102
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
103
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
104
- while (1) switch (_context3.prev = _context3.next) {
105
- case 0:
106
- _context3.next = 2;
107
- return graph.elkLayout("layered");
108
- case 2:
109
- return _context3.abrupt("return", _context3.sent);
110
- case 3:
111
- case "end":
112
- return _context3.stop();
113
- }
114
- }, _callee3);
115
- }))
116
- }), /*#__PURE__*/jsx(MenuItem, {
117
- label: "stress",
118
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
119
- return _regeneratorRuntime.wrap(function _callee4$(_context4) {
120
- while (1) switch (_context4.prev = _context4.next) {
121
- case 0:
122
- _context4.next = 2;
123
- return graph.elkLayout("stress");
124
- case 2:
125
- return _context4.abrupt("return", _context4.sent);
126
- case 3:
127
- case "end":
128
- return _context4.stop();
129
- }
130
- }, _callee4);
131
- }))
132
- }), /*#__PURE__*/jsx(MenuItem, {
133
- label: "radial",
134
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
135
- return _regeneratorRuntime.wrap(function _callee5$(_context5) {
136
- while (1) switch (_context5.prev = _context5.next) {
137
- case 0:
138
- _context5.next = 2;
139
- return graph.elkLayout("radial");
140
- case 2:
141
- return _context5.abrupt("return", _context5.sent);
142
- case 3:
143
- case "end":
144
- return _context5.stop();
145
- }
146
- }, _callee5);
147
- }))
148
- }), /*#__PURE__*/jsx(MenuItem, {
149
- label: "sporeOverlap",
150
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
151
- return _regeneratorRuntime.wrap(function _callee6$(_context6) {
152
- while (1) switch (_context6.prev = _context6.next) {
153
- case 0:
154
- _context6.next = 2;
155
- return graph.elkLayout("sporeOverlap");
156
- case 2:
157
- return _context6.abrupt("return", _context6.sent);
158
- case 3:
159
- case "end":
160
- return _context6.stop();
161
- }
162
- }, _callee6);
163
- }))
164
- }), /*#__PURE__*/jsx(MenuItem, {
165
- label: "sporeCompaction",
166
- onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
167
- return _regeneratorRuntime.wrap(function _callee7$(_context7) {
168
- while (1) switch (_context7.prev = _context7.next) {
169
- case 0:
170
- _context7.next = 2;
171
- return graph.elkLayout("sporeCompaction");
172
- case 2:
173
- return _context7.abrupt("return", _context7.sent);
174
- case 3:
175
- case "end":
176
- return _context7.stop();
177
- }
178
- }, _callee7);
179
- }))
180
- })]
181
- })]
182
- })
183
- }), /*#__PURE__*/jsxs(ButtonGroup, {
184
- variant: "link",
185
- children: [/*#__PURE__*/jsx(Button, {
186
- "aria-label": "delete",
187
- color: "danger",
188
- icon: ICONS["delete"],
189
- disabled: !selected.length,
190
- onClick: function onClick() {
191
- return graph.dropNodes(selected);
192
- }
193
- }), /*#__PURE__*/jsx(Button, {
194
- "aria-label": "clear",
195
- color: "danger",
196
- icon: ICONS.clear,
197
- onClick: function onClick() {
198
- return graph.clear();
199
- }
200
- })]
201
- })]
202
- });
203
- };
204
-
205
- export { Tools };
@@ -1,58 +0,0 @@
1
- 'use client';
2
-
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
- import { Section } from '@react-fabric/core';
5
- import { GraphProvider, useGraph } from './Context.js';
6
- import { Tools } from './Tools.js';
7
- import { useRef, useEffect } from 'react';
8
- import { GraphContextMenu } from './ContextMenu.js';
9
- import { jsx, jsxs } from 'react/jsx-runtime';
10
-
11
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
13
- var Graph = function Graph() {
14
- var _useGraph = useGraph(),
15
- sigma = _useGraph.sigma,
16
- graph = _useGraph.graph;
17
- var handlesRef = useRef(null);
18
- useEffect(function () {
19
- // remove group handle if group node is dropped
20
- var handler = function handler(_ref) {
21
- var _handlesRef$current;
22
- var key = _ref.key;
23
- var handle = (_handlesRef$current = handlesRef.current) === null || _handlesRef$current === void 0 ? void 0 : _handlesRef$current.querySelector("[data-id=\"".concat(key, "\"]"));
24
- handle === null || handle === void 0 || handle.remove();
25
- };
26
- graph.on("nodeDropped", handler);
27
- return function () {
28
- graph.off("nodeDropped", handler);
29
- };
30
- }, [graph]);
31
- return /*#__PURE__*/jsxs("div", {
32
- className: "area-content relative bg-base graph-viewer",
33
- children: [/*#__PURE__*/jsx("div", {
34
- dir: "ltr",
35
- ref: sigma.containerRef,
36
- className: "absolute inset-0"
37
- }), /*#__PURE__*/jsx("div", {
38
- role: "none",
39
- ref: handlesRef,
40
- dir: "ltr",
41
- onClick: function onClick(e) {
42
- var key = e.target.dataset.id;
43
- key && graph.toggleExpanded(key);
44
- },
45
- className: "absolute inset-0 overflow-hidden pointer-events-none sigma-groupHandles"
46
- })]
47
- });
48
- };
49
- var SigmaGraph = function SigmaGraph(props) {
50
- return /*#__PURE__*/jsx(Section, {
51
- className: "relative",
52
- children: /*#__PURE__*/jsxs(GraphProvider, _objectSpread(_objectSpread({}, props), {}, {
53
- children: [/*#__PURE__*/jsx(Tools, {}), /*#__PURE__*/jsx(Graph, {}), /*#__PURE__*/jsx(GraphContextMenu, {})]
54
- }))
55
- });
56
- };
57
-
58
- export { SigmaGraph };
@@ -1,16 +0,0 @@
1
- 'use client';
2
-
3
- var ICONS = {
4
- 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",
5
- 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",
6
- 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",
7
- 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",
8
- select: "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z",
9
- 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",
10
- "delete": "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z",
11
- 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",
12
- 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",
13
- 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"
14
- };
15
-
16
- export { ICONS };