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/lib/index.es3.js CHANGED
@@ -1,70 +1,71 @@
1
- import { jsx as y, jsxs as oe } from "react/jsx-runtime";
2
- import { useRef as x, useState as m, useEffect as O } from "react";
3
- import N from "cytoscape";
4
- import be from "cytoscape-cose-bilkent";
5
- import xe from "cytoscape-cise";
6
- import Ne from "cytoscape-fcose";
7
- import Ce from "storm-layout";
8
- import ke from "./index.es7.js";
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 ze, resDetailData as F } from "./index.es8.js";
11
- import { fixNodesToEdges as Ee, coseBilkentLayout as ne } from "./index.es9.js";
12
- import { edgeNodeStyles as we, defaultColors as se } from "./index.es10.js";
13
- import Le from "cytoscape-layout-utilities";
14
- import { message as S } from "antd";
15
- import { menuItemsConfig as Re } from "./index.es11.js";
16
- import { jsonStringify as L } from "./index.es12.js";
17
- import je from "./index.es13.js";
18
- import Te from "./index.es14.js";
19
- import { GraphProvider as $e } from "./index.es15.js";
20
- import De from "./index.es16.js";
21
- N.use(Le);
22
- N.use(xe);
23
- N.use(Ne);
24
- N.use(Ce);
25
- N.use(be);
26
- const et = ({
27
- data: de,
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: C = [],
30
- graphInfo: f,
31
- stepNextApi: re,
32
- knowledgeCardApi: ae,
33
- colors: k,
34
- actionBar: K
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 G, ee;
37
- const R = x(null), [v, P] = m([]), p = x(null), X = x(null), J = 1, [Oe, Q] = m(!1), [z, B] = m({}), [j, W] = m({}), [ie, le] = m("cose-bilkent"), V = x(null), Y = x(null), [ce, Z] = m(["", ""]), H = x(k);
38
- O(() => {
39
- H.current = k;
40
- }, [k]);
41
- const [c, E] = m({
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
- }), [T, _] = m({
48
+ }), [$, Z] = h({
48
49
  visible: !1,
49
50
  x: 0,
50
51
  y: 0,
51
52
  content: ""
52
- }), pe = Re({ cyRef: p, setContextMenu: E, onPathAnalysis: (G = X.current) == null ? void 0 : G.onPathAnalysis, setPathNodes: Z });
53
- O(() => {
54
- (C == null ? void 0 : C.length) > 1 && ze(p, { pathNodes: C, isGrayed: !1 });
55
- }, [L(C), L(v)]), O(() => {
56
- I == null || I({ graphData: v, nodeStatic: z, relationStatic: j });
57
- }, [L(v), L(z), L(j)]), O(() => {
58
- var a;
59
- if (!R.current || p.current) return;
60
- const { elements: d, typeListObj: r, relationListObj: w } = F(de, { typeObj: z, graphInfo: f });
61
- B(r), P(d), W(w), document.addEventListener("contextmenu", function(t) {
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 = N({
65
- container: R.current,
66
- elements: d,
67
- style: we({ elements: d, colors: k }),
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 (p.current = e, ((a = f == null ? void 0 : f.searchNodes) == null ? void 0 : a.length) === 2)
76
- Ee(
76
+ if (c.current = e, ((r = m == null ? void 0 : m.searchNodes) == null ? void 0 : r.length) === 2)
77
+ we(
77
78
  e,
78
- f.searchNodes[0],
79
- f.searchNodes[1]
79
+ m.searchNodes[0],
80
+ m.searchNodes[1]
80
81
  );
81
82
  else {
82
- const t = e.layout(ne());
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 o;
89
- const n = t.target;
90
- if (!n.hasClass("path-edge")) {
91
- const s = ((o = H.current) == null ? void 0 : o.edgeHoverColor) ?? se.edgeHoverColor;
92
- n.style({
93
- "line-color": s,
94
- "target-arrow-color": s,
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 o;
100
- const n = t.target;
101
- if (!n.hasClass("path-edge")) {
102
- const s = ((o = H.current) == null ? void 0 : o.edgeDefaultColor) ?? se.edgeDefaultColor;
103
- n.style({
104
- "line-color": s,
105
- "target-arrow-color": s,
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 n = t.target;
111
- n.hasClass("selected") || n.addClass("hover");
111
+ const o = t.target;
112
+ o.hasClass("selected") || o.addClass("hover");
112
113
  }), e.on("mouseover", "node", (t) => {
113
- const n = t.target, o = n.renderedPosition(), s = n.data("name") || "";
114
- n.addClass("hover"), _({
114
+ const o = t.target, n = o.renderedPosition(), d = o.data("name") || "";
115
+ o.addClass("hover"), Z({
115
116
  visible: !0,
116
- x: o.x,
117
- y: o.y - 60,
118
- content: s
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"), _((o) => ({ ...o, visible: !1 }));
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 n = t.target, o = n.renderedPosition();
125
- console.log("renderedPos:::", n.data(), n.style("background-color")), E({
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: o.x - 90,
128
- y: o.y - 90,
129
- targetNode: n,
130
- bgColor: n.style("background-color")
128
+ x: n.x - 90,
129
+ y: n.y - 90,
130
+ targetNode: o,
131
+ bgColor: o.style("background-color")
131
132
  });
132
- }), p.current = e, e.on("click", "node", (t) => {
133
- const n = t.target;
134
- e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), n.addClass("selected");
135
- const s = n.neighborhood().nodes().add(n), b = s.edgesWith(s);
136
- console.log("cy.nodes().not(relatedNodes):::", s), e.nodes().not(s).addClass("grayed"), e.edges().not(b).addClass("grayed"), s.addClass("highlighted"), b.addClass("highlighted");
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 && (E((n) => ({ ...n, 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
+ 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
- p.current && (p.current.destroy(), p.current = null);
141
+ c.current && (c.current.destroy(), c.current = null);
141
142
  };
142
143
  }, []);
143
- const ue = async (d) => {
144
- const { id: r, kgId: w } = d, e = p.current;
144
+ const ge = async (s) => {
145
+ const { id: a, kgId: u } = s, e = c.current;
145
146
  if (!e) return;
146
- const a = e.$(`#${r}`);
147
- if (!a || a.length === 0) {
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((o) => o.data("parentId") ? (o.data("parentId") === r || o.data("idLabel") === `${r}-${o.data("name")}`) && o.data("zktype") === d.zktype : !1);
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 o = t.map((l) => l.id()), s = t.connectedEdges(), b = e.edges().filter(
154
- (l) => l.data("source") === r && o.includes(l.data("target"))
155
- ), $ = e.edges().filter((l) => l.data("appendedBy") === r), M = s.merge(b).merge($).filter((l) => l.data().zktype === d.zktype);
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 D = l.filter((g) => {
163
- var h, te;
164
- const i = g.data.zktype;
165
- if (g.group === "nodes" && o.includes((h = g.data) == null ? void 0 : h.id) && i && i === d.zktype)
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 (g.group === "edges" && i && i === d.zktype) {
168
- const fe = Array.from($).map((ve) => {
169
- const A = ve.data();
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 = g.data, me = fe.includes(`${q.source}-${q.target}-${q.label}`), he = ((te = g.data) == null ? void 0 : te.appendedBy) === r;
172
- return !me && !he;
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: u, relationListObj: U } = F({}, { graphData: D, typeObj: {} });
176
- return B(u), W(U), D;
177
- }), a.data("appendedNodes", []), a.data("isExpanded", !1);
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
- a.removed() || (a.style("border-width", ""), a.style("border-color", ""));
181
+ r.removed() || (r.style("border-width", ""), r.style("border-color", ""));
181
182
  }, 300);
182
183
  } else {
183
184
  try {
184
- Q(!0), S.open({
185
+ J(!0), C.open({
185
186
  type: "loading",
186
187
  content: "正在展开...",
187
188
  duration: 0
188
189
  });
189
- const o = await re({ uri: r, queryType: 1, kgId: w, zktype: d.zktype }), { elements: s, typeListObj: b, relationListObj: $ } = F(o.data, { graphData: v, typeObj: z, relationObj: j, zktype: d.zktype });
190
- if (B(b), W($), !((s == null ? void 0 : s.length) > 0)) {
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
- S.destroy(), S.warning("暂无数据");
193
+ C.destroy(), C.warning("暂无数据");
193
194
  }, 2e3);
194
195
  return;
195
196
  }
196
- if ((s == null ? void 0 : s.length) > 0) {
197
+ if ((d == null ? void 0 : d.length) > 0) {
197
198
  const M = e.layoutUtilities({
198
- ...ne(),
199
+ ...oe(),
199
200
  idealEdgeLength: 80,
200
201
  // 与你的期望边长匹配
201
202
  offset: 30
202
203
  // 随机偏移,避免完全重叠
203
- }), l = s.map((i) => {
204
+ }), l = d.map((i) => {
204
205
  if (i.group === "nodes") {
205
- const h = 80 * J;
206
+ const v = 80 * X;
206
207
  return {
207
208
  ...i,
208
209
  style: {
209
210
  opacity: 0,
210
- width: h,
211
- height: h
211
+ width: v,
212
+ height: v
212
213
  },
213
214
  data: {
214
215
  ...i.data,
215
- parentId: r,
216
+ parentId: a,
216
217
  // 标记父节点
217
- appendedBy: r,
218
+ appendedBy: a,
218
219
  // 标记由谁追加
219
- idLabel: r + "-" + i.data.label,
220
- zktype: d.zktype,
220
+ idLabel: a + "-" + i.data.label,
221
+ zktype: s.zktype,
221
222
  isAppended: !0,
222
223
  // 标记是追加节点
223
- baseWidth: h,
224
- baseHeight: h
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: r,
233
- zktype: d.zktype
233
+ appendedBy: a,
234
+ zktype: s.zktype
234
235
  }
235
236
  };
236
- }), D = e.add(l);
237
- P([...v, ...l]);
238
- const u = D.filter(":node"), U = u.map((i) => i.id());
239
- a.data("appendedNodes", U), a.data("isExpanded", !0);
240
- const g = e.nodes().difference(u);
241
- g.forEach((i) => i.lock()), M.placeNewNodes(u), e.layout({
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
- g.forEach((i) => i.unlock());
258
- }, 2e3), u.animate({
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
- u.style("opacity", ""), u.style("width", ""), u.style("height", "");
269
+ g.style("opacity", ""), g.style("width", ""), g.style("height", "");
269
270
  }
270
271
  }), setTimeout(() => {
271
- a.removed() || (a.style("border-width", ""), a.style("border-color", ""), e.center(a), e.zoom(e.zoom()));
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
- } catch (o) {
276
- console.error("请求接口失败:", o);
276
+ C.destroy();
277
+ } catch (n) {
278
+ C.destroy(), C.error("请求接口失败"), console.error("22请求接口失败:", n);
277
279
  }
278
- Q(!1), S.destroy();
280
+ J(!1);
279
281
  }
280
- E({ visible: !1 });
281
- }, ge = {
282
+ L({ visible: !1 });
283
+ }, ye = {
282
284
  expanded: "typed-literal",
283
285
  contract: "uri"
284
- }, ye = (d) => {
285
- if (console.log("handleMenuAction:::", d), c.targetNode) {
286
- const r = d.ids, w = c.targetNode.data();
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
- ue({ kgId: 3, ...w, zktype: ge[r] });
293
+ ge({ kgId: 3, ...t, zktype: ye[r] });
289
294
  else if (r === "nodeInfo") {
290
- const e = c.targetNode, a = {
291
- id: e.id(),
292
- data: e.data(),
293
- position: e.position(),
294
- degree: e.degree(),
295
- inDegree: e.degree(!0),
296
- outDegree: e.degree(!1),
297
- classes: e.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
- V.current.open(a);
302
- } else if (r === "knowledgeCard") {
303
- const e = c.targetNode;
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 console.log(555, K), /* @__PURE__ */ y($e, { value: { pathNodes: ce, setPathNodes: Z, graphInfo: f, graphData: v, layoutType: ie, setLayoutType: le, knowledgeCardApi: ae }, children: /* @__PURE__ */ oe("div", { className: "cytoscape-container", style: { position: "relative" }, children: [
310
- /* @__PURE__ */ y("div", { className: "btn-group" }),
311
- /* @__PURE__ */ y(
312
- ke,
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: X,
315
- cyRef: p,
316
- graphInfo: f,
317
- initNodeScale: J,
318
- cyContainerRef: R,
319
- typeObj: z,
320
- relationObj: j,
321
- colors: k,
322
- actionBar: K
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__ */ oe("div", { style: { position: "relative" }, children: [
326
- /* @__PURE__ */ y("div", { ref: R, className: "cy-container" }),
327
- c.visible && c.targetNode && /* @__PURE__ */ y(
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: `${c.x}px`,
333
- top: `${c.y}px`,
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: (d) => d.stopPropagation(),
347
- children: /* @__PURE__ */ y(je, { items: pe, centerImage: (ee = c == null ? void 0 : c.targetNode) == null ? void 0 : ee.data().image, onClick: (d) => ye(d) })
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
- T.visible && /* @__PURE__ */ y(
351
+ $.visible && /* @__PURE__ */ f(
351
352
  "div",
352
353
  {
353
354
  style: {
354
355
  position: "absolute",
355
- left: `${T.x}px`,
356
- top: `${T.y}px`,
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: T.content
371
+ children: $.content
371
372
  }
372
373
  )
373
374
  ] }),
374
- /* @__PURE__ */ y(Te, { ref: V }),
375
- /* @__PURE__ */ y(De, { ref: Y })
375
+ /* @__PURE__ */ f($e, { ref: Q }),
376
+ /* @__PURE__ */ f(Oe, { ref: V })
376
377
  ] }) });
377
378
  };
378
379
  export {
379
- et as default
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
- onClick?: () => void;
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: GraphData | any[];
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
- export declare const menuItemsConfig: any;
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
+ }[];