@react-fabric/graph 1.0.0-beta.61 → 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.
- package/css/styles.css +1 -1
- package/dist/cjs/_virtual/elk-worker.js +1 -1
- package/dist/cjs/components/ContextMenu.js +7 -7
- package/dist/cjs/components/{Context.js → Provider.js} +2 -6
- package/dist/cjs/components/Tools.js +38 -38
- package/dist/cjs/components/Viewer.js +6 -5
- package/dist/cjs/components/context.js +34 -0
- package/dist/cjs/graph/index.js +15 -15
- package/dist/cjs/programs/node-badge/factory.js +3 -2
- package/dist/cjs/programs/node-badge/texture.js +30 -30
- package/dist/cjs/programs/node-image/factory.js +3 -2
- package/dist/cjs/programs/node-image/texture.js +36 -36
- package/dist/esm/_virtual/elk-worker.js +1 -1
- package/dist/esm/components/ContextMenu.js +3 -3
- package/dist/esm/components/{Context.js → Provider.js} +3 -6
- package/dist/esm/components/Tools.js +37 -37
- package/dist/esm/components/Viewer.js +4 -3
- package/dist/esm/components/context.js +33 -0
- package/dist/esm/graph/index.js +15 -15
- package/dist/esm/programs/node-badge/factory.js +3 -2
- package/dist/esm/programs/node-badge/texture.js +30 -30
- package/dist/esm/programs/node-image/factory.js +3 -2
- package/dist/esm/programs/node-image/texture.js +36 -36
- package/dist/types/components/Provider.d.ts +3 -0
- package/dist/types/components/{Context.d.ts → context.d.ts} +3 -4
- package/dist/types/i18n/index.d.ts +0 -0
- package/dist/types/programs/edge-curve/drawLabel.d.ts +1 -1
- package/package.json +12 -12
- package/src/components/ContextMenu.tsx +11 -47
- package/src/components/{Context.tsx → Provider.tsx} +3 -30
- package/src/components/Tools.tsx +13 -51
- package/src/components/Viewer.tsx +6 -7
- package/src/components/context.ts +43 -0
- package/src/i18n/index.ts +0 -0
- package/src/programs/arrow-head/index.ts +0 -1
- package/src/programs/edge-curve/drawLabel.ts +1 -1
- package/src/programs/edge-curve/index.ts +0 -2
- package/src/programs/edge-line/index.ts +0 -2
- package/src/programs/node-badge/factory.ts +0 -2
- package/src/programs/node-circle/base/index.ts +0 -2
- package/src/programs/node-image/factory.ts +0 -2
- 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(
|
|
52
|
-
return _regeneratorRuntime.wrap(function
|
|
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 =
|
|
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
|
|
73
|
+
case 1:
|
|
74
74
|
return _context2.abrupt("return", _context2.sent);
|
|
75
|
-
case
|
|
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(
|
|
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
|
|
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 =
|
|
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
|
|
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 =
|
|
144
|
+
_context3.next = 2;
|
|
145
145
|
return res;
|
|
146
|
-
case
|
|
146
|
+
case 2:
|
|
147
147
|
return _context3.abrupt("return", _context3.sent);
|
|
148
|
-
case
|
|
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(
|
|
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
|
|
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 =
|
|
175
|
+
_context4.next = 2;
|
|
176
176
|
break;
|
|
177
177
|
}
|
|
178
|
-
_context4.next =
|
|
178
|
+
_context4.next = 1;
|
|
179
179
|
return loadSVGImage(imageSource, {
|
|
180
180
|
size: 128
|
|
181
181
|
});
|
|
182
|
-
case
|
|
182
|
+
case 1:
|
|
183
183
|
image = _context4.sent;
|
|
184
|
-
_context4.next =
|
|
184
|
+
_context4.next = 4;
|
|
185
185
|
break;
|
|
186
|
-
case
|
|
187
|
-
_context4.next =
|
|
186
|
+
case 2:
|
|
187
|
+
_context4.next = 3;
|
|
188
188
|
return loadRasterImage(imageSource);
|
|
189
|
-
case
|
|
189
|
+
case 3:
|
|
190
190
|
image = _context4.sent;
|
|
191
|
-
case
|
|
191
|
+
case 4:
|
|
192
192
|
return _context4.abrupt("return", image);
|
|
193
|
-
case
|
|
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(
|
|
402
|
+
var _registerImage = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(source) {
|
|
403
403
|
var size, image;
|
|
404
|
-
return _regeneratorRuntime.wrap(function
|
|
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 =
|
|
408
|
+
_context.next = 1;
|
|
409
409
|
break;
|
|
410
410
|
}
|
|
411
411
|
return _context.abrupt("return");
|
|
412
|
-
case
|
|
412
|
+
case 1:
|
|
413
413
|
this.imageStates[source] = {
|
|
414
414
|
status: "loading"
|
|
415
415
|
};
|
|
416
|
-
_context.prev =
|
|
416
|
+
_context.prev = 2;
|
|
417
417
|
size = this.options.size;
|
|
418
|
-
_context.next =
|
|
418
|
+
_context.next = 3;
|
|
419
419
|
return loadImage(source, {
|
|
420
420
|
size: size.mode === "force" ? size.value : undefined
|
|
421
421
|
});
|
|
422
|
-
case
|
|
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 =
|
|
429
|
+
_context.next = 5;
|
|
430
430
|
break;
|
|
431
|
-
case
|
|
432
|
-
_context.prev =
|
|
433
|
-
_context
|
|
431
|
+
case 4:
|
|
432
|
+
_context.prev = 4;
|
|
433
|
+
_context["catch"](2);
|
|
434
434
|
this.imageStates[source] = {
|
|
435
435
|
status: "error"
|
|
436
436
|
};
|
|
437
|
-
case
|
|
437
|
+
case 5:
|
|
438
438
|
case "end":
|
|
439
439
|
return _context.stop();
|
|
440
440
|
}
|
|
441
|
-
}, _callee, this, [[
|
|
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 {
|
|
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 {
|
|
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 {};
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve
|
|
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.
|
|
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.
|
|
39
|
-
"@react-fabric/core": "^1.0.0-beta.
|
|
40
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
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.
|
|
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.
|
|
55
|
-
"react": "~19.2.
|
|
56
|
-
"react-dom": "~19.2.
|
|
57
|
-
"react-i18next": "~16.
|
|
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.
|
|
66
|
-
"npm": ">=8.
|
|
65
|
+
"node": ">=22.18.0",
|
|
66
|
+
"npm": ">=10.8.0"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
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 "./
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
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,
|
package/src/components/Tools.tsx
CHANGED
|
@@ -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 "./
|
|
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-
|
|
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
|
-
|
|
60
|
-
|
|
61
|
-
/>
|
|
62
|
-
<MenuItem
|
|
63
|
-
|
|
64
|
-
|
|
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-
|
|
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>;
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type CreateEdgeCurveProgramOptions } from "@sigma/edge-curve
|
|
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";
|