react-kggraph 0.0.19 → 0.0.20
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/lib/index.es3.js +123 -122
- package/lib/src/components/Graph/types.d.ts +2 -0
- package/lib/style.css +1 -1
- package/package.json +1 -1
package/lib/index.es3.js
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as c, jsxs as te } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as N, useState as h, useEffect as S } from "react";
|
|
3
3
|
import k from "cytoscape";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
4
|
+
import Ne from "cytoscape-cose-bilkent";
|
|
5
|
+
import Ce from "cytoscape-cise";
|
|
6
|
+
import ke from "cytoscape-fcose";
|
|
7
|
+
import Ee from "storm-layout";
|
|
8
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 C } from "antd";
|
|
15
|
-
import { menuItemsConfig as
|
|
10
|
+
import { handleCalcPath as we, resDetailData as F } from "./index.es8.js";
|
|
11
|
+
import { fixNodesToEdges as Le, coseBilkentLayout as oe } from "./index.es9.js";
|
|
12
|
+
import { edgeNodeStyles as Re, defaultColors as ne } from "./index.es10.js";
|
|
13
|
+
import je from "cytoscape-layout-utilities";
|
|
14
|
+
import { Row as Te, Empty as $e, message as C } from "antd";
|
|
15
|
+
import { menuItemsConfig as De } from "./index.es11.js";
|
|
16
16
|
import { jsonStringify as R } from "./index.es12.js";
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import { GraphProvider as
|
|
20
|
-
import
|
|
21
|
-
k.use(
|
|
22
|
-
k.use(Ne);
|
|
17
|
+
import Oe from "./index.es13.js";
|
|
18
|
+
import Se from "./index.es14.js";
|
|
19
|
+
import { GraphProvider as Ie } from "./index.es15.js";
|
|
20
|
+
import Pe from "./index.es16.js";
|
|
21
|
+
k.use(je);
|
|
23
22
|
k.use(Ce);
|
|
24
23
|
k.use(ke);
|
|
25
|
-
k.use(
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
k.use(Ee);
|
|
25
|
+
k.use(Ne);
|
|
26
|
+
const rt = ({
|
|
27
|
+
data: re,
|
|
28
28
|
getAllGraphData: I,
|
|
29
|
-
highPathAnalysis:
|
|
29
|
+
highPathAnalysis: E = [],
|
|
30
30
|
graphInfo: m,
|
|
31
|
-
stepNextApi:
|
|
32
|
-
knowledgeCardApi:
|
|
33
|
-
colors:
|
|
31
|
+
stepNextApi: se,
|
|
32
|
+
knowledgeCardApi: de,
|
|
33
|
+
colors: z,
|
|
34
34
|
actionBar: ae,
|
|
35
|
-
actionCircle: ie
|
|
35
|
+
actionCircle: ie,
|
|
36
|
+
noDataDesc: le = "暂无数据"
|
|
36
37
|
}) => {
|
|
37
38
|
var _, G;
|
|
38
|
-
const j = N(null), [
|
|
39
|
+
const j = N(null), [v, P] = h([]), p = N(null), K = N(null), X = 1, [Be, J] = h(!1), [w, B] = h({}), [T, W] = h({}), [ce, pe] = h("cose-bilkent"), Q = N(null), V = N(null), [ue, Y] = h(["", ""]), H = N(z);
|
|
39
40
|
S(() => {
|
|
40
|
-
H.current =
|
|
41
|
-
}, [
|
|
42
|
-
const [
|
|
41
|
+
H.current = z;
|
|
42
|
+
}, [z]);
|
|
43
|
+
const [u, L] = h({
|
|
43
44
|
visible: !1,
|
|
44
45
|
x: 0,
|
|
45
46
|
y: 0,
|
|
@@ -50,22 +51,22 @@ const tt = ({
|
|
|
50
51
|
x: 0,
|
|
51
52
|
y: 0,
|
|
52
53
|
content: ""
|
|
53
|
-
}),
|
|
54
|
+
}), ge = De({ cyRef: p, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: ie });
|
|
54
55
|
S(() => {
|
|
55
|
-
(
|
|
56
|
-
}, [R(
|
|
57
|
-
I == null || I({ graphData:
|
|
58
|
-
}, [R(
|
|
59
|
-
var
|
|
60
|
-
if (!j.current ||
|
|
61
|
-
const { elements:
|
|
62
|
-
B(a), P(
|
|
56
|
+
(E == null ? void 0 : E.length) > 1 && we(p, { pathNodes: E, isGrayed: !1 });
|
|
57
|
+
}, [R(E), R(v)]), S(() => {
|
|
58
|
+
I == null || I({ graphData: v, nodeStatic: w, relationStatic: T });
|
|
59
|
+
}, [R(v), R(w), R(T)]), S(() => {
|
|
60
|
+
var d;
|
|
61
|
+
if (!j.current || p.current) return;
|
|
62
|
+
const { elements: r, typeListObj: a, relationListObj: g } = F(re, { typeObj: w, graphInfo: m });
|
|
63
|
+
B(a), P(r), W(g), document.addEventListener("contextmenu", function(t) {
|
|
63
64
|
t.preventDefault();
|
|
64
65
|
});
|
|
65
66
|
const e = k({
|
|
66
67
|
container: j.current,
|
|
67
|
-
elements:
|
|
68
|
-
style:
|
|
68
|
+
elements: r,
|
|
69
|
+
style: Re({ elements: r, colors: z }),
|
|
69
70
|
autounselectify: !1,
|
|
70
71
|
autolock: !1,
|
|
71
72
|
layout: {
|
|
@@ -73,8 +74,8 @@ const tt = ({
|
|
|
73
74
|
// 使用预设布局，完全依赖 position
|
|
74
75
|
}
|
|
75
76
|
});
|
|
76
|
-
if (
|
|
77
|
-
|
|
77
|
+
if (p.current = e, ((d = m == null ? void 0 : m.searchNodes) == null ? void 0 : d.length) === 2)
|
|
78
|
+
Le(
|
|
78
79
|
e,
|
|
79
80
|
m.searchNodes[0],
|
|
80
81
|
m.searchNodes[1]
|
|
@@ -89,10 +90,10 @@ const tt = ({
|
|
|
89
90
|
var n;
|
|
90
91
|
const o = t.target;
|
|
91
92
|
if (!o.hasClass("path-edge")) {
|
|
92
|
-
const
|
|
93
|
+
const s = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? ne.edgeHoverColor;
|
|
93
94
|
o.style({
|
|
94
|
-
"line-color":
|
|
95
|
-
"target-arrow-color":
|
|
95
|
+
"line-color": s,
|
|
96
|
+
"target-arrow-color": s,
|
|
96
97
|
opacity: 0.8
|
|
97
98
|
});
|
|
98
99
|
}
|
|
@@ -100,10 +101,10 @@ const tt = ({
|
|
|
100
101
|
var n;
|
|
101
102
|
const o = t.target;
|
|
102
103
|
if (!o.hasClass("path-edge")) {
|
|
103
|
-
const
|
|
104
|
+
const s = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? ne.edgeDefaultColor;
|
|
104
105
|
o.style({
|
|
105
|
-
"line-color":
|
|
106
|
-
"target-arrow-color":
|
|
106
|
+
"line-color": s,
|
|
107
|
+
"target-arrow-color": s,
|
|
107
108
|
opacity: 1
|
|
108
109
|
});
|
|
109
110
|
}
|
|
@@ -111,12 +112,12 @@ const tt = ({
|
|
|
111
112
|
const o = t.target;
|
|
112
113
|
o.hasClass("selected") || o.addClass("hover");
|
|
113
114
|
}), e.on("mouseover", "node", (t) => {
|
|
114
|
-
const o = t.target, n = o.renderedPosition(),
|
|
115
|
+
const o = t.target, n = o.renderedPosition(), s = o.data("name") || "";
|
|
115
116
|
o.addClass("hover"), Z({
|
|
116
117
|
visible: !0,
|
|
117
118
|
x: n.x,
|
|
118
119
|
y: n.y - 60,
|
|
119
|
-
content:
|
|
120
|
+
content: s
|
|
120
121
|
});
|
|
121
122
|
}), e.on("mouseout", "node", (t) => {
|
|
122
123
|
t.target.removeClass("hover"), Z((n) => ({ ...n, visible: !1 }));
|
|
@@ -130,55 +131,55 @@ const tt = ({
|
|
|
130
131
|
targetNode: o,
|
|
131
132
|
bgColor: o.style("background-color")
|
|
132
133
|
});
|
|
133
|
-
}),
|
|
134
|
+
}), p.current = e, e.on("click", "node", (t) => {
|
|
134
135
|
const o = t.target;
|
|
135
136
|
e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
|
|
136
|
-
const
|
|
137
|
-
console.log("cy.nodes().not(relatedNodes):::",
|
|
137
|
+
const s = o.neighborhood().nodes().add(o), x = s.edgesWith(s);
|
|
138
|
+
console.log("cy.nodes().not(relatedNodes):::", s), e.nodes().not(s).addClass("grayed"), e.edges().not(x).addClass("grayed"), s.addClass("highlighted"), x.addClass("highlighted");
|
|
138
139
|
}), e.on("tap", (t) => {
|
|
139
140
|
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"));
|
|
140
141
|
}), () => {
|
|
141
|
-
|
|
142
|
+
p.current && (p.current.destroy(), p.current = null);
|
|
142
143
|
};
|
|
143
144
|
}, []);
|
|
144
|
-
const
|
|
145
|
-
const { id: a, kgId:
|
|
145
|
+
const ye = async (r) => {
|
|
146
|
+
const { id: a, kgId: g } = r, e = p.current;
|
|
146
147
|
if (!e) return;
|
|
147
|
-
const
|
|
148
|
-
if (!
|
|
148
|
+
const d = e.$(`#${a}`);
|
|
149
|
+
if (!d || d.length === 0) {
|
|
149
150
|
console.error("当前节点不存在");
|
|
150
151
|
return;
|
|
151
152
|
}
|
|
152
|
-
const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === a || n.data("idLabel") === `${a}-${n.data("name")}`) && n.data("zktype") ===
|
|
153
|
+
const t = e.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === a || n.data("idLabel") === `${a}-${n.data("name")}`) && n.data("zktype") === r.zktype : !1);
|
|
153
154
|
if (t.length > 0) {
|
|
154
|
-
const n = t.map((l) => l.id()),
|
|
155
|
+
const n = t.map((l) => l.id()), s = t.connectedEdges(), x = e.edges().filter(
|
|
155
156
|
(l) => l.data("source") === a && n.includes(l.data("target"))
|
|
156
|
-
), D = e.edges().filter((l) => l.data("appendedBy") === a), M =
|
|
157
|
+
), D = e.edges().filter((l) => l.data("appendedBy") === a), M = s.merge(x).merge(D).filter((l) => l.data().zktype === r.zktype);
|
|
157
158
|
t.animate({
|
|
158
159
|
style: { opacity: 0 }
|
|
159
160
|
}, {
|
|
160
161
|
duration: 200,
|
|
161
162
|
complete: () => {
|
|
162
163
|
e.remove(t), e.remove(M), P((l) => {
|
|
163
|
-
const O = l.filter((
|
|
164
|
-
var
|
|
165
|
-
const i =
|
|
166
|
-
if (
|
|
164
|
+
const O = l.filter((f) => {
|
|
165
|
+
var b, ee;
|
|
166
|
+
const i = f.data.zktype;
|
|
167
|
+
if (f.group === "nodes" && n.includes((b = f.data) == null ? void 0 : b.id) && i && i === r.zktype)
|
|
167
168
|
return !1;
|
|
168
|
-
if (
|
|
169
|
-
const
|
|
170
|
-
const A =
|
|
169
|
+
if (f.group === "edges" && i && i === r.zktype) {
|
|
170
|
+
const he = Array.from(D).map((xe) => {
|
|
171
|
+
const A = xe.data();
|
|
171
172
|
return `${A.source}-${A.target}-${A.label}`;
|
|
172
|
-
}), q =
|
|
173
|
-
return !
|
|
173
|
+
}), q = f.data, ve = he.includes(`${q.source}-${q.target}-${q.label}`), be = ((ee = f.data) == null ? void 0 : ee.appendedBy) === a;
|
|
174
|
+
return !ve && !be;
|
|
174
175
|
}
|
|
175
176
|
return !0;
|
|
176
|
-
}), { typeListObj:
|
|
177
|
-
return B(
|
|
178
|
-
}),
|
|
177
|
+
}), { typeListObj: y, relationListObj: U } = F({}, { graphData: O, typeObj: {} });
|
|
178
|
+
return B(y), W(U), O;
|
|
179
|
+
}), d.data("appendedNodes", []), d.data("isExpanded", !1);
|
|
179
180
|
}
|
|
180
181
|
}), setTimeout(() => {
|
|
181
|
-
|
|
182
|
+
d.removed() || (d.style("border-width", ""), d.style("border-color", ""));
|
|
182
183
|
}, 300);
|
|
183
184
|
} else {
|
|
184
185
|
try {
|
|
@@ -187,29 +188,29 @@ const tt = ({
|
|
|
187
188
|
content: "正在展开...",
|
|
188
189
|
duration: 0
|
|
189
190
|
});
|
|
190
|
-
const n = await
|
|
191
|
-
if (B(x), W(D), !((
|
|
191
|
+
const n = await se({ uri: a, queryType: 1, kgId: g, zktype: r.zktype }), { elements: s, typeListObj: x, relationListObj: D } = F(n.data, { graphData: v, typeObj: w, relationObj: T, zktype: r.zktype });
|
|
192
|
+
if (B(x), W(D), !((s == null ? void 0 : s.length) > 0)) {
|
|
192
193
|
setTimeout(() => {
|
|
193
194
|
C.destroy(), C.warning("暂无数据");
|
|
194
195
|
}, 2e3);
|
|
195
196
|
return;
|
|
196
197
|
}
|
|
197
|
-
if ((
|
|
198
|
+
if ((s == null ? void 0 : s.length) > 0) {
|
|
198
199
|
const M = e.layoutUtilities({
|
|
199
200
|
...oe(),
|
|
200
201
|
idealEdgeLength: 80,
|
|
201
202
|
// 与你的期望边长匹配
|
|
202
203
|
offset: 30
|
|
203
204
|
// 随机偏移，避免完全重叠
|
|
204
|
-
}), l =
|
|
205
|
+
}), l = s.map((i) => {
|
|
205
206
|
if (i.group === "nodes") {
|
|
206
|
-
const
|
|
207
|
+
const b = 80 * X;
|
|
207
208
|
return {
|
|
208
209
|
...i,
|
|
209
210
|
style: {
|
|
210
211
|
opacity: 0,
|
|
211
|
-
width:
|
|
212
|
-
height:
|
|
212
|
+
width: b,
|
|
213
|
+
height: b
|
|
213
214
|
},
|
|
214
215
|
data: {
|
|
215
216
|
...i.data,
|
|
@@ -218,11 +219,11 @@ const tt = ({
|
|
|
218
219
|
appendedBy: a,
|
|
219
220
|
// 标记由谁追加
|
|
220
221
|
idLabel: a + "-" + i.data.label,
|
|
221
|
-
zktype:
|
|
222
|
+
zktype: r.zktype,
|
|
222
223
|
isAppended: !0,
|
|
223
224
|
// 标记是追加节点
|
|
224
|
-
baseWidth:
|
|
225
|
-
baseHeight:
|
|
225
|
+
baseWidth: b,
|
|
226
|
+
baseHeight: b
|
|
226
227
|
}
|
|
227
228
|
};
|
|
228
229
|
}
|
|
@@ -231,15 +232,15 @@ const tt = ({
|
|
|
231
232
|
data: {
|
|
232
233
|
...i.data,
|
|
233
234
|
appendedBy: a,
|
|
234
|
-
zktype:
|
|
235
|
+
zktype: r.zktype
|
|
235
236
|
}
|
|
236
237
|
};
|
|
237
238
|
}), O = e.add(l);
|
|
238
|
-
P([...
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
const
|
|
242
|
-
|
|
239
|
+
P([...v, ...l]);
|
|
240
|
+
const y = O.filter(":node"), U = y.map((i) => i.id());
|
|
241
|
+
d.data("appendedNodes", U), d.data("isExpanded", !0);
|
|
242
|
+
const f = e.nodes().difference(y);
|
|
243
|
+
f.forEach((i) => i.lock()), M.placeNewNodes(y), e.layout({
|
|
243
244
|
name: "cose-bilkent",
|
|
244
245
|
randomize: !1,
|
|
245
246
|
// ⚠️ 这是关键！保持已有节点位置不变
|
|
@@ -255,8 +256,8 @@ const tt = ({
|
|
|
255
256
|
// 可以适当减少，因为只需要微调
|
|
256
257
|
gravity: 0.6
|
|
257
258
|
}).run(), setTimeout(() => {
|
|
258
|
-
|
|
259
|
-
}, 2e3),
|
|
259
|
+
f.forEach((i) => i.unlock());
|
|
260
|
+
}, 2e3), y.animate({
|
|
260
261
|
style: {
|
|
261
262
|
opacity: 1,
|
|
262
263
|
width: 20,
|
|
@@ -266,10 +267,10 @@ const tt = ({
|
|
|
266
267
|
duration: 400,
|
|
267
268
|
easing: "ease-out",
|
|
268
269
|
complete: () => {
|
|
269
|
-
|
|
270
|
+
y.style("opacity", ""), y.style("width", ""), y.style("height", "");
|
|
270
271
|
}
|
|
271
272
|
}), setTimeout(() => {
|
|
272
|
-
|
|
273
|
+
d.removed() || (d.style("border-width", ""), d.style("border-color", ""), e.center(d), e.zoom(e.zoom()));
|
|
273
274
|
}, 600);
|
|
274
275
|
} else
|
|
275
276
|
console.log("没有找到相关节点数据");
|
|
@@ -280,19 +281,19 @@ const tt = ({
|
|
|
280
281
|
J(!1);
|
|
281
282
|
}
|
|
282
283
|
L({ visible: !1 });
|
|
283
|
-
},
|
|
284
|
+
}, fe = {
|
|
284
285
|
expanded: "typed-literal",
|
|
285
286
|
contract: "uri"
|
|
286
|
-
},
|
|
287
|
+
}, me = (r, a) => {
|
|
287
288
|
var e;
|
|
288
|
-
console.log("handleMenuAction:::",
|
|
289
|
-
const
|
|
290
|
-
if (
|
|
291
|
-
const
|
|
292
|
-
if (["expanded", "contract"].includes(
|
|
293
|
-
|
|
294
|
-
else if (
|
|
295
|
-
const o =
|
|
289
|
+
console.log("handleMenuAction:::", r, a);
|
|
290
|
+
const g = a || u.targetNode;
|
|
291
|
+
if (g) {
|
|
292
|
+
const d = r.ids, t = g.data();
|
|
293
|
+
if (["expanded", "contract"].includes(d))
|
|
294
|
+
ye({ kgId: 3, ...t, zktype: fe[d] });
|
|
295
|
+
else if (d === "nodeInfo") {
|
|
296
|
+
const o = g, n = {
|
|
296
297
|
id: o.id(),
|
|
297
298
|
data: o.data(),
|
|
298
299
|
position: o.position(),
|
|
@@ -303,35 +304,35 @@ const tt = ({
|
|
|
303
304
|
style: o.style()
|
|
304
305
|
};
|
|
305
306
|
Q.current.open(n);
|
|
306
|
-
} else
|
|
307
|
-
(e =
|
|
307
|
+
} else d === "knowledgeCard" && V.current.open(g.data());
|
|
308
|
+
(e = r.onClick) == null || e.call(r, g), L({ visible: !1, x: 0, y: 0, targetNode: null });
|
|
308
309
|
}
|
|
309
310
|
};
|
|
310
|
-
return /* @__PURE__ */
|
|
311
|
-
/* @__PURE__ */
|
|
312
|
-
/* @__PURE__ */
|
|
311
|
+
return v.length < 1 ? /* @__PURE__ */ c(Te, { className: "h-100", align: "middle", justify: "center", children: /* @__PURE__ */ c($e, { description: le }) }) : /* @__PURE__ */ c(Ie, { value: { pathNodes: ue, setPathNodes: Y, graphInfo: m, graphData: v, layoutType: ce, setLayoutType: pe, knowledgeCardApi: de }, children: /* @__PURE__ */ te("div", { className: "cytoscape-container relative", children: [
|
|
312
|
+
/* @__PURE__ */ c("div", { className: "btn-group" }),
|
|
313
|
+
/* @__PURE__ */ c(
|
|
313
314
|
ze,
|
|
314
315
|
{
|
|
315
316
|
ref: K,
|
|
316
|
-
cyRef:
|
|
317
|
+
cyRef: p,
|
|
317
318
|
graphInfo: m,
|
|
318
319
|
initNodeScale: X,
|
|
319
320
|
cyContainerRef: j,
|
|
320
321
|
typeObj: w,
|
|
321
322
|
relationObj: T,
|
|
322
|
-
colors:
|
|
323
|
+
colors: z,
|
|
323
324
|
actionBar: ae
|
|
324
325
|
}
|
|
325
326
|
),
|
|
326
|
-
/* @__PURE__ */ te("div", {
|
|
327
|
-
/* @__PURE__ */
|
|
328
|
-
|
|
327
|
+
/* @__PURE__ */ te("div", { className: "relative h-100", children: [
|
|
328
|
+
/* @__PURE__ */ c("div", { ref: j, className: "cy-container" }),
|
|
329
|
+
u.visible && u.targetNode && /* @__PURE__ */ c(
|
|
329
330
|
"div",
|
|
330
331
|
{
|
|
331
332
|
style: {
|
|
332
333
|
position: "absolute",
|
|
333
|
-
left: `${
|
|
334
|
-
top: `${
|
|
334
|
+
left: `${u.x}px`,
|
|
335
|
+
top: `${u.y}px`,
|
|
335
336
|
// backgroundColor: 'white',
|
|
336
337
|
// border: '1px solid #ccc',
|
|
337
338
|
// borderRadius: '50%',
|
|
@@ -344,11 +345,11 @@ const tt = ({
|
|
|
344
345
|
height: "200px",
|
|
345
346
|
overflow: "hidden"
|
|
346
347
|
},
|
|
347
|
-
onClick: (
|
|
348
|
-
children: /* @__PURE__ */
|
|
348
|
+
onClick: (r) => r.stopPropagation(),
|
|
349
|
+
children: /* @__PURE__ */ c(Oe, { items: ge, centerImage: (G = u == null ? void 0 : u.targetNode) == null ? void 0 : G.data().image, targetNode: u.targetNode, onClick: (r, a) => me(r, a) })
|
|
349
350
|
}
|
|
350
351
|
),
|
|
351
|
-
$.visible && /* @__PURE__ */
|
|
352
|
+
$.visible && /* @__PURE__ */ c(
|
|
352
353
|
"div",
|
|
353
354
|
{
|
|
354
355
|
style: {
|
|
@@ -372,10 +373,10 @@ const tt = ({
|
|
|
372
373
|
}
|
|
373
374
|
)
|
|
374
375
|
] }),
|
|
375
|
-
/* @__PURE__ */
|
|
376
|
-
/* @__PURE__ */
|
|
376
|
+
/* @__PURE__ */ c(Se, { ref: Q }),
|
|
377
|
+
/* @__PURE__ */ c(Pe, { ref: V })
|
|
377
378
|
] }) });
|
|
378
379
|
};
|
|
379
380
|
export {
|
|
380
|
-
|
|
381
|
+
rt as default
|
|
381
382
|
};
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.cytoscape-container{width:100%;
|
|
1
|
+
.cytoscape-container{width:100%;height:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:100%}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:10px 0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:10px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.graph-bar.graph-bar-vertical,.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.path-node{width:380px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}
|