react-kggraph 0.0.18 → 0.0.19
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/README.md +151 -9
- package/lib/index.es11.js +68 -70
- package/lib/index.es13.js +12 -18
- package/lib/index.es14.js +61 -216
- package/lib/index.es3.js +195 -194
- package/lib/index.es7.js +1 -3
- package/lib/src/components/Graph/components/SettingCircle/index.d.ts +4 -2
- package/lib/src/components/Graph/types.d.ts +11 -1
- package/lib/src/components/Graph/utils/menuItems.d.ts +12 -1
- package/package.json +1 -1
package/lib/index.es3.js
CHANGED
|
@@ -1,70 +1,71 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
1
|
+
import { jsx as f, jsxs as te } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as N, useState as h, useEffect as S } from "react";
|
|
3
|
+
import k from "cytoscape";
|
|
4
|
+
import xe from "cytoscape-cose-bilkent";
|
|
5
|
+
import Ne from "cytoscape-cise";
|
|
6
|
+
import Ce from "cytoscape-fcose";
|
|
7
|
+
import ke from "storm-layout";
|
|
8
|
+
import ze from "./index.es7.js";
|
|
9
9
|
/* empty css */
|
|
10
|
-
import { handleCalcPath as
|
|
11
|
-
import { fixNodesToEdges as
|
|
12
|
-
import { edgeNodeStyles as
|
|
13
|
-
import
|
|
14
|
-
import { message as
|
|
15
|
-
import { menuItemsConfig as
|
|
16
|
-
import { jsonStringify as
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import { GraphProvider as
|
|
20
|
-
import
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const
|
|
27
|
-
data:
|
|
10
|
+
import { handleCalcPath as Ee, resDetailData as F } from "./index.es8.js";
|
|
11
|
+
import { fixNodesToEdges as we, coseBilkentLayout as oe } from "./index.es9.js";
|
|
12
|
+
import { edgeNodeStyles as Le, defaultColors as ne } from "./index.es10.js";
|
|
13
|
+
import Re from "cytoscape-layout-utilities";
|
|
14
|
+
import { message as C } from "antd";
|
|
15
|
+
import { menuItemsConfig as je } from "./index.es11.js";
|
|
16
|
+
import { jsonStringify as R } from "./index.es12.js";
|
|
17
|
+
import Te from "./index.es13.js";
|
|
18
|
+
import $e from "./index.es14.js";
|
|
19
|
+
import { GraphProvider as De } from "./index.es15.js";
|
|
20
|
+
import Oe from "./index.es16.js";
|
|
21
|
+
k.use(Re);
|
|
22
|
+
k.use(Ne);
|
|
23
|
+
k.use(Ce);
|
|
24
|
+
k.use(ke);
|
|
25
|
+
k.use(xe);
|
|
26
|
+
const tt = ({
|
|
27
|
+
data: se,
|
|
28
28
|
getAllGraphData: I,
|
|
29
|
-
highPathAnalysis:
|
|
30
|
-
graphInfo:
|
|
31
|
-
stepNextApi:
|
|
32
|
-
knowledgeCardApi:
|
|
33
|
-
colors:
|
|
34
|
-
actionBar:
|
|
29
|
+
highPathAnalysis: z = [],
|
|
30
|
+
graphInfo: m,
|
|
31
|
+
stepNextApi: de,
|
|
32
|
+
knowledgeCardApi: re,
|
|
33
|
+
colors: E,
|
|
34
|
+
actionBar: ae,
|
|
35
|
+
actionCircle: ie
|
|
35
36
|
}) => {
|
|
36
|
-
var
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
H.current =
|
|
40
|
-
}, [
|
|
41
|
-
const [
|
|
37
|
+
var _, G;
|
|
38
|
+
const j = N(null), [b, P] = h([]), c = N(null), K = N(null), X = 1, [Se, J] = h(!1), [w, B] = h({}), [T, W] = h({}), [le, ce] = h("cose-bilkent"), Q = N(null), V = N(null), [pe, Y] = h(["", ""]), H = N(E);
|
|
39
|
+
S(() => {
|
|
40
|
+
H.current = E;
|
|
41
|
+
}, [E]);
|
|
42
|
+
const [p, L] = h({
|
|
42
43
|
visible: !1,
|
|
43
44
|
x: 0,
|
|
44
45
|
y: 0,
|
|
45
46
|
targetNode: null,
|
|
46
47
|
bgColor: ""
|
|
47
|
-
}), [
|
|
48
|
+
}), [$, Z] = h({
|
|
48
49
|
visible: !1,
|
|
49
50
|
x: 0,
|
|
50
51
|
y: 0,
|
|
51
52
|
content: ""
|
|
52
|
-
}),
|
|
53
|
-
|
|
54
|
-
(
|
|
55
|
-
}, [
|
|
56
|
-
I == null || I({ graphData:
|
|
57
|
-
}, [
|
|
58
|
-
var
|
|
59
|
-
if (!
|
|
60
|
-
const { elements:
|
|
61
|
-
B(
|
|
53
|
+
}), ue = je({ cyRef: c, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: ie });
|
|
54
|
+
S(() => {
|
|
55
|
+
(z == null ? void 0 : z.length) > 1 && Ee(c, { pathNodes: z, isGrayed: !1 });
|
|
56
|
+
}, [R(z), R(b)]), S(() => {
|
|
57
|
+
I == null || I({ graphData: b, nodeStatic: w, relationStatic: T });
|
|
58
|
+
}, [R(b), R(w), R(T)]), S(() => {
|
|
59
|
+
var r;
|
|
60
|
+
if (!j.current || c.current) return;
|
|
61
|
+
const { elements: s, typeListObj: a, relationListObj: u } = F(se, { typeObj: w, graphInfo: m });
|
|
62
|
+
B(a), P(s), W(u), document.addEventListener("contextmenu", function(t) {
|
|
62
63
|
t.preventDefault();
|
|
63
64
|
});
|
|
64
|
-
const e =
|
|
65
|
-
container:
|
|
66
|
-
elements:
|
|
67
|
-
style:
|
|
65
|
+
const e = k({
|
|
66
|
+
container: j.current,
|
|
67
|
+
elements: s,
|
|
68
|
+
style: Le({ elements: s, colors: E }),
|
|
68
69
|
autounselectify: !1,
|
|
69
70
|
autolock: !1,
|
|
70
71
|
layout: {
|
|
@@ -72,156 +73,156 @@ const et = ({
|
|
|
72
73
|
// 使用预设布局,完全依赖 position
|
|
73
74
|
}
|
|
74
75
|
});
|
|
75
|
-
if (
|
|
76
|
-
|
|
76
|
+
if (c.current = e, ((r = m == null ? void 0 : m.searchNodes) == null ? void 0 : r.length) === 2)
|
|
77
|
+
we(
|
|
77
78
|
e,
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
m.searchNodes[0],
|
|
80
|
+
m.searchNodes[1]
|
|
80
81
|
);
|
|
81
82
|
else {
|
|
82
|
-
const t = e.layout(
|
|
83
|
+
const t = e.layout(oe());
|
|
83
84
|
t.run(), t.on("layoutstop", () => {
|
|
84
85
|
e.fit(void 0, 50), e.center();
|
|
85
86
|
});
|
|
86
87
|
}
|
|
87
88
|
return e.on("mouseover", "edge", (t) => {
|
|
88
|
-
var
|
|
89
|
-
const
|
|
90
|
-
if (!
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
"line-color":
|
|
94
|
-
"target-arrow-color":
|
|
89
|
+
var n;
|
|
90
|
+
const o = t.target;
|
|
91
|
+
if (!o.hasClass("path-edge")) {
|
|
92
|
+
const d = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? ne.edgeHoverColor;
|
|
93
|
+
o.style({
|
|
94
|
+
"line-color": d,
|
|
95
|
+
"target-arrow-color": d,
|
|
95
96
|
opacity: 0.8
|
|
96
97
|
});
|
|
97
98
|
}
|
|
98
99
|
}), e.on("mouseout", "edge", (t) => {
|
|
99
|
-
var
|
|
100
|
-
const
|
|
101
|
-
if (!
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
"line-color":
|
|
105
|
-
"target-arrow-color":
|
|
100
|
+
var n;
|
|
101
|
+
const o = t.target;
|
|
102
|
+
if (!o.hasClass("path-edge")) {
|
|
103
|
+
const d = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? ne.edgeDefaultColor;
|
|
104
|
+
o.style({
|
|
105
|
+
"line-color": d,
|
|
106
|
+
"target-arrow-color": d,
|
|
106
107
|
opacity: 1
|
|
107
108
|
});
|
|
108
109
|
}
|
|
109
110
|
}), e.on("mouseover", "node", (t) => {
|
|
110
|
-
const
|
|
111
|
-
|
|
111
|
+
const o = t.target;
|
|
112
|
+
o.hasClass("selected") || o.addClass("hover");
|
|
112
113
|
}), e.on("mouseover", "node", (t) => {
|
|
113
|
-
const
|
|
114
|
-
|
|
114
|
+
const o = t.target, n = o.renderedPosition(), d = o.data("name") || "";
|
|
115
|
+
o.addClass("hover"), Z({
|
|
115
116
|
visible: !0,
|
|
116
|
-
x:
|
|
117
|
-
y:
|
|
118
|
-
content:
|
|
117
|
+
x: n.x,
|
|
118
|
+
y: n.y - 60,
|
|
119
|
+
content: d
|
|
119
120
|
});
|
|
120
121
|
}), e.on("mouseout", "node", (t) => {
|
|
121
|
-
t.target.removeClass("hover"),
|
|
122
|
+
t.target.removeClass("hover"), Z((n) => ({ ...n, visible: !1 }));
|
|
122
123
|
}), e.on("cxttap", "node", (t) => {
|
|
123
124
|
t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.originalEvent && (t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), t.originalEvent.stopImmediatePropagation());
|
|
124
|
-
const
|
|
125
|
-
console.log("renderedPos:::",
|
|
125
|
+
const o = t.target, n = o.renderedPosition();
|
|
126
|
+
console.log("renderedPos:::", o.data(), o.style("background-color")), L({
|
|
126
127
|
visible: !0,
|
|
127
|
-
x:
|
|
128
|
-
y:
|
|
129
|
-
targetNode:
|
|
130
|
-
bgColor:
|
|
128
|
+
x: n.x - 90,
|
|
129
|
+
y: n.y - 90,
|
|
130
|
+
targetNode: o,
|
|
131
|
+
bgColor: o.style("background-color")
|
|
131
132
|
});
|
|
132
|
-
}),
|
|
133
|
-
const
|
|
134
|
-
e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"),
|
|
135
|
-
const
|
|
136
|
-
console.log("cy.nodes().not(relatedNodes):::",
|
|
133
|
+
}), c.current = e, e.on("click", "node", (t) => {
|
|
134
|
+
const o = t.target;
|
|
135
|
+
e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
|
|
136
|
+
const d = o.neighborhood().nodes().add(o), x = d.edgesWith(d);
|
|
137
|
+
console.log("cy.nodes().not(relatedNodes):::", d), e.nodes().not(d).addClass("grayed"), e.edges().not(x).addClass("grayed"), d.addClass("highlighted"), x.addClass("highlighted");
|
|
137
138
|
}), e.on("tap", (t) => {
|
|
138
|
-
t.target === e && (
|
|
139
|
+
t.target === e && (L((o) => ({ ...o, visible: !1 })), e.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), e.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
|
|
139
140
|
}), () => {
|
|
140
|
-
|
|
141
|
+
c.current && (c.current.destroy(), c.current = null);
|
|
141
142
|
};
|
|
142
143
|
}, []);
|
|
143
|
-
const
|
|
144
|
-
const { id:
|
|
144
|
+
const ge = async (s) => {
|
|
145
|
+
const { id: a, kgId: u } = s, e = c.current;
|
|
145
146
|
if (!e) return;
|
|
146
|
-
const
|
|
147
|
-
if (!
|
|
147
|
+
const r = e.$(`#${a}`);
|
|
148
|
+
if (!r || r.length === 0) {
|
|
148
149
|
console.error("当前节点不存在");
|
|
149
150
|
return;
|
|
150
151
|
}
|
|
151
|
-
const t = e.nodes().filter((
|
|
152
|
+
const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === a || n.data("idLabel") === `${a}-${n.data("name")}`) && n.data("zktype") === s.zktype : !1);
|
|
152
153
|
if (t.length > 0) {
|
|
153
|
-
const
|
|
154
|
-
(l) => l.data("source") ===
|
|
155
|
-
),
|
|
154
|
+
const n = t.map((l) => l.id()), d = t.connectedEdges(), x = e.edges().filter(
|
|
155
|
+
(l) => l.data("source") === a && n.includes(l.data("target"))
|
|
156
|
+
), D = e.edges().filter((l) => l.data("appendedBy") === a), M = d.merge(x).merge(D).filter((l) => l.data().zktype === s.zktype);
|
|
156
157
|
t.animate({
|
|
157
158
|
style: { opacity: 0 }
|
|
158
159
|
}, {
|
|
159
160
|
duration: 200,
|
|
160
161
|
complete: () => {
|
|
161
162
|
e.remove(t), e.remove(M), P((l) => {
|
|
162
|
-
const
|
|
163
|
-
var
|
|
164
|
-
const i =
|
|
165
|
-
if (
|
|
163
|
+
const O = l.filter((y) => {
|
|
164
|
+
var v, ee;
|
|
165
|
+
const i = y.data.zktype;
|
|
166
|
+
if (y.group === "nodes" && n.includes((v = y.data) == null ? void 0 : v.id) && i && i === s.zktype)
|
|
166
167
|
return !1;
|
|
167
|
-
if (
|
|
168
|
-
const
|
|
169
|
-
const A =
|
|
168
|
+
if (y.group === "edges" && i && i === s.zktype) {
|
|
169
|
+
const me = Array.from(D).map((be) => {
|
|
170
|
+
const A = be.data();
|
|
170
171
|
return `${A.source}-${A.target}-${A.label}`;
|
|
171
|
-
}), q =
|
|
172
|
-
return !
|
|
172
|
+
}), q = y.data, he = me.includes(`${q.source}-${q.target}-${q.label}`), ve = ((ee = y.data) == null ? void 0 : ee.appendedBy) === a;
|
|
173
|
+
return !he && !ve;
|
|
173
174
|
}
|
|
174
175
|
return !0;
|
|
175
|
-
}), { typeListObj:
|
|
176
|
-
return B(
|
|
177
|
-
}),
|
|
176
|
+
}), { typeListObj: g, relationListObj: U } = F({}, { graphData: O, typeObj: {} });
|
|
177
|
+
return B(g), W(U), O;
|
|
178
|
+
}), r.data("appendedNodes", []), r.data("isExpanded", !1);
|
|
178
179
|
}
|
|
179
180
|
}), setTimeout(() => {
|
|
180
|
-
|
|
181
|
+
r.removed() || (r.style("border-width", ""), r.style("border-color", ""));
|
|
181
182
|
}, 300);
|
|
182
183
|
} else {
|
|
183
184
|
try {
|
|
184
|
-
|
|
185
|
+
J(!0), C.open({
|
|
185
186
|
type: "loading",
|
|
186
187
|
content: "正在展开...",
|
|
187
188
|
duration: 0
|
|
188
189
|
});
|
|
189
|
-
const
|
|
190
|
-
if (B(
|
|
190
|
+
const n = await de({ uri: a, queryType: 1, kgId: u, zktype: s.zktype }), { elements: d, typeListObj: x, relationListObj: D } = F(n.data, { graphData: b, typeObj: w, relationObj: T, zktype: s.zktype });
|
|
191
|
+
if (B(x), W(D), !((d == null ? void 0 : d.length) > 0)) {
|
|
191
192
|
setTimeout(() => {
|
|
192
|
-
|
|
193
|
+
C.destroy(), C.warning("暂无数据");
|
|
193
194
|
}, 2e3);
|
|
194
195
|
return;
|
|
195
196
|
}
|
|
196
|
-
if ((
|
|
197
|
+
if ((d == null ? void 0 : d.length) > 0) {
|
|
197
198
|
const M = e.layoutUtilities({
|
|
198
|
-
...
|
|
199
|
+
...oe(),
|
|
199
200
|
idealEdgeLength: 80,
|
|
200
201
|
// 与你的期望边长匹配
|
|
201
202
|
offset: 30
|
|
202
203
|
// 随机偏移,避免完全重叠
|
|
203
|
-
}), l =
|
|
204
|
+
}), l = d.map((i) => {
|
|
204
205
|
if (i.group === "nodes") {
|
|
205
|
-
const
|
|
206
|
+
const v = 80 * X;
|
|
206
207
|
return {
|
|
207
208
|
...i,
|
|
208
209
|
style: {
|
|
209
210
|
opacity: 0,
|
|
210
|
-
width:
|
|
211
|
-
height:
|
|
211
|
+
width: v,
|
|
212
|
+
height: v
|
|
212
213
|
},
|
|
213
214
|
data: {
|
|
214
215
|
...i.data,
|
|
215
|
-
parentId:
|
|
216
|
+
parentId: a,
|
|
216
217
|
// 标记父节点
|
|
217
|
-
appendedBy:
|
|
218
|
+
appendedBy: a,
|
|
218
219
|
// 标记由谁追加
|
|
219
|
-
idLabel:
|
|
220
|
-
zktype:
|
|
220
|
+
idLabel: a + "-" + i.data.label,
|
|
221
|
+
zktype: s.zktype,
|
|
221
222
|
isAppended: !0,
|
|
222
223
|
// 标记是追加节点
|
|
223
|
-
baseWidth:
|
|
224
|
-
baseHeight:
|
|
224
|
+
baseWidth: v,
|
|
225
|
+
baseHeight: v
|
|
225
226
|
}
|
|
226
227
|
};
|
|
227
228
|
}
|
|
@@ -229,16 +230,16 @@ const et = ({
|
|
|
229
230
|
...i,
|
|
230
231
|
data: {
|
|
231
232
|
...i.data,
|
|
232
|
-
appendedBy:
|
|
233
|
-
zktype:
|
|
233
|
+
appendedBy: a,
|
|
234
|
+
zktype: s.zktype
|
|
234
235
|
}
|
|
235
236
|
};
|
|
236
|
-
}),
|
|
237
|
-
P([...
|
|
238
|
-
const
|
|
239
|
-
|
|
240
|
-
const
|
|
241
|
-
|
|
237
|
+
}), O = e.add(l);
|
|
238
|
+
P([...b, ...l]);
|
|
239
|
+
const g = O.filter(":node"), U = g.map((i) => i.id());
|
|
240
|
+
r.data("appendedNodes", U), r.data("isExpanded", !0);
|
|
241
|
+
const y = e.nodes().difference(g);
|
|
242
|
+
y.forEach((i) => i.lock()), M.placeNewNodes(g), e.layout({
|
|
242
243
|
name: "cose-bilkent",
|
|
243
244
|
randomize: !1,
|
|
244
245
|
// ⚠️ 这是关键!保持已有节点位置不变
|
|
@@ -254,8 +255,8 @@ const et = ({
|
|
|
254
255
|
// 可以适当减少,因为只需要微调
|
|
255
256
|
gravity: 0.6
|
|
256
257
|
}).run(), setTimeout(() => {
|
|
257
|
-
|
|
258
|
-
}, 2e3),
|
|
258
|
+
y.forEach((i) => i.unlock());
|
|
259
|
+
}, 2e3), g.animate({
|
|
259
260
|
style: {
|
|
260
261
|
opacity: 1,
|
|
261
262
|
width: 20,
|
|
@@ -265,72 +266,72 @@ const et = ({
|
|
|
265
266
|
duration: 400,
|
|
266
267
|
easing: "ease-out",
|
|
267
268
|
complete: () => {
|
|
268
|
-
|
|
269
|
+
g.style("opacity", ""), g.style("width", ""), g.style("height", "");
|
|
269
270
|
}
|
|
270
271
|
}), setTimeout(() => {
|
|
271
|
-
|
|
272
|
+
r.removed() || (r.style("border-width", ""), r.style("border-color", ""), e.center(r), e.zoom(e.zoom()));
|
|
272
273
|
}, 600);
|
|
273
274
|
} else
|
|
274
275
|
console.log("没有找到相关节点数据");
|
|
275
|
-
|
|
276
|
-
|
|
276
|
+
C.destroy();
|
|
277
|
+
} catch (n) {
|
|
278
|
+
C.destroy(), C.error("请求接口失败"), console.error("22请求接口失败:", n);
|
|
277
279
|
}
|
|
278
|
-
|
|
280
|
+
J(!1);
|
|
279
281
|
}
|
|
280
|
-
|
|
281
|
-
},
|
|
282
|
+
L({ visible: !1 });
|
|
283
|
+
}, ye = {
|
|
282
284
|
expanded: "typed-literal",
|
|
283
285
|
contract: "uri"
|
|
284
|
-
},
|
|
285
|
-
|
|
286
|
-
|
|
286
|
+
}, fe = (s, a) => {
|
|
287
|
+
var e;
|
|
288
|
+
console.log("handleMenuAction:::", s, a);
|
|
289
|
+
const u = a || p.targetNode;
|
|
290
|
+
if (u) {
|
|
291
|
+
const r = s.ids, t = u.data();
|
|
287
292
|
if (["expanded", "contract"].includes(r))
|
|
288
|
-
|
|
293
|
+
ge({ kgId: 3, ...t, zktype: ye[r] });
|
|
289
294
|
else if (r === "nodeInfo") {
|
|
290
|
-
const
|
|
291
|
-
id:
|
|
292
|
-
data:
|
|
293
|
-
position:
|
|
294
|
-
degree:
|
|
295
|
-
inDegree:
|
|
296
|
-
outDegree:
|
|
297
|
-
classes:
|
|
298
|
-
|
|
299
|
-
style: e.style()
|
|
295
|
+
const o = u, n = {
|
|
296
|
+
id: o.id(),
|
|
297
|
+
data: o.data(),
|
|
298
|
+
position: o.position(),
|
|
299
|
+
degree: o.degree(),
|
|
300
|
+
inDegree: o.degree(!0),
|
|
301
|
+
outDegree: o.degree(!1),
|
|
302
|
+
classes: o.classes(),
|
|
303
|
+
style: o.style()
|
|
300
304
|
};
|
|
301
|
-
|
|
302
|
-
} else
|
|
303
|
-
|
|
304
|
-
Y.current.open(e.data());
|
|
305
|
-
}
|
|
306
|
-
d.action(c.targetNode), E({ visible: !1, x: 0, y: 0, targetNode: null });
|
|
305
|
+
Q.current.open(n);
|
|
306
|
+
} else r === "knowledgeCard" && V.current.open(u.data());
|
|
307
|
+
(e = s.onClick) == null || e.call(s, u), L({ visible: !1, x: 0, y: 0, targetNode: null });
|
|
307
308
|
}
|
|
308
309
|
};
|
|
309
|
-
return
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
|
|
310
|
+
return /* @__PURE__ */ f(De, { value: { pathNodes: pe, setPathNodes: Y, graphInfo: m, graphData: b, layoutType: le, setLayoutType: ce, knowledgeCardApi: re }, children: /* @__PURE__ */ te("div", { className: "cytoscape-container", style: { position: "relative" }, children: [
|
|
311
|
+
/* @__PURE__ */ f("div", { className: "btn-group" }),
|
|
312
|
+
/* @__PURE__ */ f(
|
|
313
|
+
ze,
|
|
313
314
|
{
|
|
314
|
-
ref:
|
|
315
|
-
cyRef:
|
|
316
|
-
graphInfo:
|
|
317
|
-
initNodeScale:
|
|
318
|
-
cyContainerRef:
|
|
319
|
-
typeObj:
|
|
320
|
-
relationObj:
|
|
321
|
-
colors:
|
|
322
|
-
actionBar:
|
|
315
|
+
ref: K,
|
|
316
|
+
cyRef: c,
|
|
317
|
+
graphInfo: m,
|
|
318
|
+
initNodeScale: X,
|
|
319
|
+
cyContainerRef: j,
|
|
320
|
+
typeObj: w,
|
|
321
|
+
relationObj: T,
|
|
322
|
+
colors: E,
|
|
323
|
+
actionBar: ae
|
|
323
324
|
}
|
|
324
325
|
),
|
|
325
|
-
/* @__PURE__ */
|
|
326
|
-
/* @__PURE__ */
|
|
327
|
-
|
|
326
|
+
/* @__PURE__ */ te("div", { style: { position: "relative" }, children: [
|
|
327
|
+
/* @__PURE__ */ f("div", { ref: j, className: "cy-container" }),
|
|
328
|
+
p.visible && p.targetNode && /* @__PURE__ */ f(
|
|
328
329
|
"div",
|
|
329
330
|
{
|
|
330
331
|
style: {
|
|
331
332
|
position: "absolute",
|
|
332
|
-
left: `${
|
|
333
|
-
top: `${
|
|
333
|
+
left: `${p.x}px`,
|
|
334
|
+
top: `${p.y}px`,
|
|
334
335
|
// backgroundColor: 'white',
|
|
335
336
|
// border: '1px solid #ccc',
|
|
336
337
|
// borderRadius: '50%',
|
|
@@ -343,17 +344,17 @@ const et = ({
|
|
|
343
344
|
height: "200px",
|
|
344
345
|
overflow: "hidden"
|
|
345
346
|
},
|
|
346
|
-
onClick: (
|
|
347
|
-
children: /* @__PURE__ */
|
|
347
|
+
onClick: (s) => s.stopPropagation(),
|
|
348
|
+
children: /* @__PURE__ */ f(Te, { items: ue, centerImage: (G = p == null ? void 0 : p.targetNode) == null ? void 0 : G.data().image, targetNode: p.targetNode, onClick: (s, a) => fe(s, a) })
|
|
348
349
|
}
|
|
349
350
|
),
|
|
350
|
-
|
|
351
|
+
$.visible && /* @__PURE__ */ f(
|
|
351
352
|
"div",
|
|
352
353
|
{
|
|
353
354
|
style: {
|
|
354
355
|
position: "absolute",
|
|
355
|
-
left: `${
|
|
356
|
-
top: `${
|
|
356
|
+
left: `${$.x}px`,
|
|
357
|
+
top: `${$.y}px`,
|
|
357
358
|
transform: "translateX(-50%)",
|
|
358
359
|
backgroundColor: "rgba(0, 0, 0, 0.85)",
|
|
359
360
|
color: "#fff",
|
|
@@ -367,14 +368,14 @@ const et = ({
|
|
|
367
368
|
overflow: "hidden",
|
|
368
369
|
textOverflow: "ellipsis"
|
|
369
370
|
},
|
|
370
|
-
children:
|
|
371
|
+
children: $.content
|
|
371
372
|
}
|
|
372
373
|
)
|
|
373
374
|
] }),
|
|
374
|
-
/* @__PURE__ */
|
|
375
|
-
/* @__PURE__ */
|
|
375
|
+
/* @__PURE__ */ f($e, { ref: Q }),
|
|
376
|
+
/* @__PURE__ */ f(Oe, { ref: V })
|
|
376
377
|
] }) });
|
|
377
378
|
};
|
|
378
379
|
export {
|
|
379
|
-
|
|
380
|
+
tt as default
|
|
380
381
|
};
|
package/lib/index.es7.js
CHANGED
|
@@ -16,8 +16,6 @@ import { actionList as ft } from "./index.es4.js";
|
|
|
16
16
|
const q = (b, r) => (S) => {
|
|
17
17
|
S.stopPropagation(), b == null || b(r || "");
|
|
18
18
|
}, bt = (b) => {
|
|
19
|
-
if (!b)
|
|
20
|
-
return { bottom: 20, right: 20 };
|
|
21
19
|
if (typeof b == "string")
|
|
22
20
|
switch (b) {
|
|
23
21
|
case "top":
|
|
@@ -49,7 +47,7 @@ const q = (b, r) => (S) => {
|
|
|
49
47
|
actionBar: L
|
|
50
48
|
}, me) => {
|
|
51
49
|
var ne, se, ae;
|
|
52
|
-
const F = L == null ? void 0 : L.position, K = (L == null ? void 0 : L.actionList) ?? ft, H = { ...z, ...ge }, { layoutType: ue, setLayoutType: pe } = Ue(dt), [k, fe] = y(""), [be, M] = y(!1), [Q, we] = y(S), [ye, V] = y(!1), [Ce, P] = y(!1), [G, ve] = y(null), [xe, U] = y(!1), [X, Y] = y(!1), [Se, Ne] = y("node"), O = Xe(null), [B, Le] = y(!0), [R, ke] = y(/* @__PURE__ */ new Set()), [ee, De] = y(/* @__PURE__ */ new Set());
|
|
50
|
+
const F = (L == null ? void 0 : L.position) || "top-left", K = (L == null ? void 0 : L.actionList) ?? ft, H = { ...z, ...ge }, { layoutType: ue, setLayoutType: pe } = Ue(dt), [k, fe] = y(""), [be, M] = y(!1), [Q, we] = y(S), [ye, V] = y(!1), [Ce, P] = y(!1), [G, ve] = y(null), [xe, U] = y(!1), [X, Y] = y(!1), [Se, Ne] = y("node"), O = Xe(null), [B, Le] = y(!0), [R, ke] = y(/* @__PURE__ */ new Set()), [ee, De] = y(/* @__PURE__ */ new Set());
|
|
53
51
|
Ye(me, () => ({
|
|
54
52
|
onPathAnalysis: () => {
|
|
55
53
|
oe();
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
interface MenuItem {
|
|
3
3
|
label: string;
|
|
4
|
-
|
|
4
|
+
ids?: string;
|
|
5
|
+
onClick?: (node?: any) => void;
|
|
5
6
|
}
|
|
6
7
|
interface RadialMenuProps {
|
|
7
8
|
items?: MenuItem[];
|
|
8
9
|
centerImage?: string;
|
|
9
10
|
size?: number;
|
|
10
|
-
onClick: any;
|
|
11
|
+
onClick: (item: MenuItem, targetNode?: any) => void;
|
|
12
|
+
targetNode?: any;
|
|
11
13
|
}
|
|
12
14
|
declare const RadialMenu: React.FC<RadialMenuProps>;
|
|
13
15
|
export default RadialMenu;
|
|
@@ -63,6 +63,14 @@ export type ActionBarPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left'
|
|
|
63
63
|
bottom?: string | number;
|
|
64
64
|
left?: string | number;
|
|
65
65
|
};
|
|
66
|
+
export interface ActionCircleItem {
|
|
67
|
+
/** 菜单项唯一标识 */
|
|
68
|
+
ids: string;
|
|
69
|
+
/** 菜单项显示文本 */
|
|
70
|
+
label: string;
|
|
71
|
+
/** 自定义点击事件 */
|
|
72
|
+
onClick?: (node: any) => void;
|
|
73
|
+
}
|
|
66
74
|
export interface ActionBarItem {
|
|
67
75
|
key: string;
|
|
68
76
|
title: string;
|
|
@@ -79,7 +87,7 @@ export interface ActionBarConfig {
|
|
|
79
87
|
}
|
|
80
88
|
export interface CytoscapeReactProps {
|
|
81
89
|
/** 图谱数据 */
|
|
82
|
-
data
|
|
90
|
+
data?: GraphData | any[];
|
|
83
91
|
/** 获取完整图谱数据的回调函数 */
|
|
84
92
|
getAllGraphData?: (params?: any) => void;
|
|
85
93
|
/** 搜索类型 */
|
|
@@ -98,4 +106,6 @@ export interface CytoscapeReactProps {
|
|
|
98
106
|
actionBarPosition?: ActionBarPosition;
|
|
99
107
|
/** ActionBar 配置 */
|
|
100
108
|
actionBar?: ActionBarConfig;
|
|
109
|
+
/** 右键菜单配置,传入则覆盖/追加默认菜单项 */
|
|
110
|
+
actionCircle?: ActionCircleItem[];
|
|
101
111
|
}
|
|
@@ -1 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
import { ActionCircleItem } from '../types';
|
|
2
|
+
export declare const menuItemsConfig: ({ cyRef, setContextMenu, onPathAnalysis, setPathNodes, actionCircle }: {
|
|
3
|
+
cyRef: any;
|
|
4
|
+
setContextMenu: any;
|
|
5
|
+
onPathAnalysis?: () => void;
|
|
6
|
+
setPathNodes: any;
|
|
7
|
+
actionCircle?: ActionCircleItem[];
|
|
8
|
+
}) => {
|
|
9
|
+
label: string;
|
|
10
|
+
ids: string;
|
|
11
|
+
onClick: (node: any) => void;
|
|
12
|
+
}[];
|