react-kggraph 0.0.18 → 0.0.20

package/lib/index.es3.js

@@ -1,70 +1,72 @@
-import { jsx as y, jsxs as oe } from "react/jsx-runtime";
-import { useRef as x, useState as m, useEffect as O } from "react";
-import N from "cytoscape";
-import be from "cytoscape-cose-bilkent";
-import xe from "cytoscape-cise";
-import Ne from "cytoscape-fcose";
-import Ce from "storm-layout";
-import ke from "./index.es7.js";
+import { jsx as c, jsxs as te } from "react/jsx-runtime";
+import { useRef as N, useState as h, useEffect as S } from "react";
+import k from "cytoscape";
+import Ne from "cytoscape-cose-bilkent";
+import Ce from "cytoscape-cise";
+import ke from "cytoscape-fcose";
+import Ee from "storm-layout";
+import ze from "./index.es7.js";
 /* empty css          */
-import { handleCalcPath as ze, resDetailData as F } from "./index.es8.js";
-import { fixNodesToEdges as Ee, coseBilkentLayout as ne } from "./index.es9.js";
-import { edgeNodeStyles as we, defaultColors as se } from "./index.es10.js";
-import Le from "cytoscape-layout-utilities";
-import { message as S } from "antd";
-import { menuItemsConfig as Re } from "./index.es11.js";
-import { jsonStringify as L } from "./index.es12.js";
-import je from "./index.es13.js";
-import Te from "./index.es14.js";
-import { GraphProvider as $e } from "./index.es15.js";
-import De from "./index.es16.js";
-N.use(Le);
-N.use(xe);
-N.use(Ne);
-N.use(Ce);
-N.use(be);
-const et = ({
-  data: de,
+import { handleCalcPath as we, resDetailData as F } from "./index.es8.js";
+import { fixNodesToEdges as Le, coseBilkentLayout as oe } from "./index.es9.js";
+import { edgeNodeStyles as Re, defaultColors as ne } from "./index.es10.js";
+import je from "cytoscape-layout-utilities";
+import { Row as Te, Empty as $e, message as C } from "antd";
+import { menuItemsConfig as De } from "./index.es11.js";
+import { jsonStringify as R } from "./index.es12.js";
+import Oe from "./index.es13.js";
+import Se from "./index.es14.js";
+import { GraphProvider as Ie } from "./index.es15.js";
+import Pe from "./index.es16.js";
+k.use(je);
+k.use(Ce);
+k.use(ke);
+k.use(Ee);
+k.use(Ne);
+const rt = ({
+  data: re,
   getAllGraphData: I,
-  highPathAnalysis: C = [],
-  graphInfo: f,
-  stepNextApi: re,
-  knowledgeCardApi: ae,
-  colors: k,
-  actionBar: K
+  highPathAnalysis: E = [],
+  graphInfo: m,
+  stepNextApi: se,
+  knowledgeCardApi: de,
+  colors: z,
+  actionBar: ae,
+  actionCircle: ie,
+  noDataDesc: le = "暂无数据"
 }) => {
-  var G, ee;
-  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);
-  O(() => {
-    H.current = k;
-  }, [k]);
-  const [c, E] = m({
+  var _, G;
+  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);
+  S(() => {
+    H.current = z;
+  }, [z]);
+  const [u, L] = h({
     visible: !1,
     x: 0,
     y: 0,
     targetNode: null,
     bgColor: ""
-  }), [T, _] = m({
+  }), [$, Z] = h({
     visible: !1,
     x: 0,
     y: 0,
     content: ""
-  }), pe = Re({ cyRef: p, setContextMenu: E, onPathAnalysis: (G = X.current) == null ? void 0 : G.onPathAnalysis, setPathNodes: Z });
-  O(() => {
-    (C == null ? void 0 : C.length) > 1 && ze(p, { pathNodes: C, isGrayed: !1 });
-  }, [L(C), L(v)]), O(() => {
-    I == null || I({ graphData: v, nodeStatic: z, relationStatic: j });
-  }, [L(v), L(z), L(j)]), O(() => {
-    var a;
-    if (!R.current || p.current) return;
-    const { elements: d, typeListObj: r, relationListObj: w } = F(de, { typeObj: z, graphInfo: f });
-    B(r), P(d), W(w), document.addEventListener("contextmenu", function(t) {
+  }), ge = De({ cyRef: p, setContextMenu: L, onPathAnalysis: (_ = K.current) == null ? void 0 : _.onPathAnalysis, setPathNodes: Y, actionCircle: ie });
+  S(() => {
+    (E == null ? void 0 : E.length) > 1 && we(p, { pathNodes: E, isGrayed: !1 });
+  }, [R(E), R(v)]), S(() => {
+    I == null || I({ graphData: v, nodeStatic: w, relationStatic: T });
+  }, [R(v), R(w), R(T)]), S(() => {
+    var d;
+    if (!j.current || p.current) return;
+    const { elements: r, typeListObj: a, relationListObj: g } = F(re, { typeObj: w, graphInfo: m });
+    B(a), P(r), W(g), document.addEventListener("contextmenu", function(t) {
       t.preventDefault();
     });
-    const e = N({
-      container: R.current,
-      elements: d,
-      style: we({ elements: d, colors: k }),
+    const e = k({
+      container: j.current,
+      elements: r,
+      style: Re({ elements: r, colors: z }),
       autounselectify: !1,
       autolock: !1,
       layout: {
@@ -72,156 +74,156 @@ const et = ({
         // 使用预设布局，完全依赖 position
       }
     });
-    if (p.current = e, ((a = f == null ? void 0 : f.searchNodes) == null ? void 0 : a.length) === 2)
-      Ee(
+    if (p.current = e, ((d = m == null ? void 0 : m.searchNodes) == null ? void 0 : d.length) === 2)
+      Le(
         e,
-        f.searchNodes[0],
-        f.searchNodes[1]
+        m.searchNodes[0],
+        m.searchNodes[1]
       );
     else {
-      const t = e.layout(ne());
+      const t = e.layout(oe());
       t.run(), t.on("layoutstop", () => {
         e.fit(void 0, 50), e.center();
       });
     }
     return e.on("mouseover", "edge", (t) => {
-      var o;
-      const n = t.target;
-      if (!n.hasClass("path-edge")) {
-        const s = ((o = H.current) == null ? void 0 : o.edgeHoverColor) ?? se.edgeHoverColor;
-        n.style({
+      var n;
+      const o = t.target;
+      if (!o.hasClass("path-edge")) {
+        const s = ((n = H.current) == null ? void 0 : n.edgeHoverColor) ?? ne.edgeHoverColor;
+        o.style({
           "line-color": s,
           "target-arrow-color": s,
           opacity: 0.8
         });
       }
     }), e.on("mouseout", "edge", (t) => {
-      var o;
-      const n = t.target;
-      if (!n.hasClass("path-edge")) {
-        const s = ((o = H.current) == null ? void 0 : o.edgeDefaultColor) ?? se.edgeDefaultColor;
-        n.style({
+      var n;
+      const o = t.target;
+      if (!o.hasClass("path-edge")) {
+        const s = ((n = H.current) == null ? void 0 : n.edgeDefaultColor) ?? ne.edgeDefaultColor;
+        o.style({
           "line-color": s,
           "target-arrow-color": s,
           opacity: 1
         });
       }
     }), e.on("mouseover", "node", (t) => {
-      const n = t.target;
-      n.hasClass("selected") || n.addClass("hover");
+      const o = t.target;
+      o.hasClass("selected") || o.addClass("hover");
     }), e.on("mouseover", "node", (t) => {
-      const n = t.target, o = n.renderedPosition(), s = n.data("name") || "";
-      n.addClass("hover"), _({
+      const o = t.target, n = o.renderedPosition(), s = o.data("name") || "";
+      o.addClass("hover"), Z({
         visible: !0,
-        x: o.x,
-        y: o.y - 60,
+        x: n.x,
+        y: n.y - 60,
         content: s
       });
     }), e.on("mouseout", "node", (t) => {
-      t.target.removeClass("hover"), _((o) => ({ ...o, visible: !1 }));
+      t.target.removeClass("hover"), Z((n) => ({ ...n, visible: !1 }));
     }), e.on("cxttap", "node", (t) => {
       t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.originalEvent && (t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), t.originalEvent.stopImmediatePropagation());
-      const n = t.target, o = n.renderedPosition();
-      console.log("renderedPos:::", n.data(), n.style("background-color")), E({
+      const o = t.target, n = o.renderedPosition();
+      console.log("renderedPos:::", o.data(), o.style("background-color")), L({
         visible: !0,
-        x: o.x - 90,
-        y: o.y - 90,
-        targetNode: n,
-        bgColor: n.style("background-color")
+        x: n.x - 90,
+        y: n.y - 90,
+        targetNode: o,
+        bgColor: o.style("background-color")
       });
     }), p.current = e, e.on("click", "node", (t) => {
-      const n = t.target;
-      e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), n.addClass("selected");
-      const s = n.neighborhood().nodes().add(n), b = s.edgesWith(s);
-      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");
+      const o = t.target;
+      e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
+      const s = o.neighborhood().nodes().add(o), x = s.edgesWith(s);
+      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");
     }), e.on("tap", (t) => {
-      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"));
+      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"));
     }), () => {
       p.current && (p.current.destroy(), p.current = null);
     };
   }, []);
-  const ue = async (d) => {
-    const { id: r, kgId: w } = d, e = p.current;
+  const ye = async (r) => {
+    const { id: a, kgId: g } = r, e = p.current;
     if (!e) return;
-    const a = e.$(`#${r}`);
-    if (!a || a.length === 0) {
+    const d = e.$(`#${a}`);
+    if (!d || d.length === 0) {
       console.error("当前节点不存在");
       return;
     }
-    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);
+    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);
     if (t.length > 0) {
-      const o = t.map((l) => l.id()), s = t.connectedEdges(), b = e.edges().filter(
-        (l) => l.data("source") === r && o.includes(l.data("target"))
-      ), $ = e.edges().filter((l) => l.data("appendedBy") === r), M = s.merge(b).merge($).filter((l) => l.data().zktype === d.zktype);
+      const n = t.map((l) => l.id()), s = t.connectedEdges(), x = e.edges().filter(
+        (l) => l.data("source") === a && n.includes(l.data("target"))
+      ), D = e.edges().filter((l) => l.data("appendedBy") === a), M = s.merge(x).merge(D).filter((l) => l.data().zktype === r.zktype);
       t.animate({
         style: { opacity: 0 }
       }, {
         duration: 200,
         complete: () => {
           e.remove(t), e.remove(M), P((l) => {
-            const D = l.filter((g) => {
-              var h, te;
-              const i = g.data.zktype;
-              if (g.group === "nodes" && o.includes((h = g.data) == null ? void 0 : h.id) && i && i === d.zktype)
+            const O = l.filter((f) => {
+              var b, ee;
+              const i = f.data.zktype;
+              if (f.group === "nodes" && n.includes((b = f.data) == null ? void 0 : b.id) && i && i === r.zktype)
                 return !1;
-              if (g.group === "edges" && i && i === d.zktype) {
-                const fe = Array.from($).map((ve) => {
-                  const A = ve.data();
+              if (f.group === "edges" && i && i === r.zktype) {
+                const he = Array.from(D).map((xe) => {
+                  const A = xe.data();
                   return `${A.source}-${A.target}-${A.label}`;
-                }), q = g.data, me = fe.includes(`${q.source}-${q.target}-${q.label}`), he = ((te = g.data) == null ? void 0 : te.appendedBy) === r;
-                return !me && !he;
+                }), q = f.data, ve = he.includes(`${q.source}-${q.target}-${q.label}`), be = ((ee = f.data) == null ? void 0 : ee.appendedBy) === a;
+                return !ve && !be;
               }
               return !0;
-            }), { typeListObj: u, relationListObj: U } = F({}, { graphData: D, typeObj: {} });
-            return B(u), W(U), D;
-          }), a.data("appendedNodes", []), a.data("isExpanded", !1);
+            }), { typeListObj: y, relationListObj: U } = F({}, { graphData: O, typeObj: {} });
+            return B(y), W(U), O;
+          }), d.data("appendedNodes", []), d.data("isExpanded", !1);
         }
       }), setTimeout(() => {
-        a.removed() || (a.style("border-width", ""), a.style("border-color", ""));
+        d.removed() || (d.style("border-width", ""), d.style("border-color", ""));
       }, 300);
     } else {
       try {
-        Q(!0), S.open({
+        J(!0), C.open({
           type: "loading",
           content: "正在展开...",
           duration: 0
         });
-        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 });
-        if (B(b), W($), !((s == null ? void 0 : s.length) > 0)) {
+        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 });
+        if (B(x), W(D), !((s == null ? void 0 : s.length) > 0)) {
           setTimeout(() => {
-            S.destroy(), S.warning("暂无数据");
+            C.destroy(), C.warning("暂无数据");
           }, 2e3);
           return;
         }
         if ((s == null ? void 0 : s.length) > 0) {
           const M = e.layoutUtilities({
-            ...ne(),
+            ...oe(),
             idealEdgeLength: 80,
             // 与你的期望边长匹配
             offset: 30
             // 随机偏移，避免完全重叠
           }), l = s.map((i) => {
             if (i.group === "nodes") {
-              const h = 80 * J;
+              const b = 80 * X;
               return {
                 ...i,
                 style: {
                   opacity: 0,
-                  width: h,
-                  height: h
+                  width: b,
+                  height: b
                 },
                 data: {
                   ...i.data,
-                  parentId: r,
+                  parentId: a,
                   // 标记父节点
-                  appendedBy: r,
+                  appendedBy: a,
                   // 标记由谁追加
-                  idLabel: r + "-" + i.data.label,
-                  zktype: d.zktype,
+                  idLabel: a + "-" + i.data.label,
+                  zktype: r.zktype,
                   isAppended: !0,
                   // 标记是追加节点
-                  baseWidth: h,
-                  baseHeight: h
+                  baseWidth: b,
+                  baseHeight: b
                 }
               };
             }
@@ -229,16 +231,16 @@ const et = ({
               ...i,
               data: {
                 ...i.data,
-                appendedBy: r,
-                zktype: d.zktype
+                appendedBy: a,
+                zktype: r.zktype
               }
             };
-          }), D = e.add(l);
+          }), O = e.add(l);
           P([...v, ...l]);
-          const u = D.filter(":node"), U = u.map((i) => i.id());
-          a.data("appendedNodes", U), a.data("isExpanded", !0);
-          const g = e.nodes().difference(u);
-          g.forEach((i) => i.lock()), M.placeNewNodes(u), e.layout({
+          const y = O.filter(":node"), U = y.map((i) => i.id());
+          d.data("appendedNodes", U), d.data("isExpanded", !0);
+          const f = e.nodes().difference(y);
+          f.forEach((i) => i.lock()), M.placeNewNodes(y), e.layout({
             name: "cose-bilkent",
             randomize: !1,
             // ⚠️ 这是关键！保持已有节点位置不变
@@ -254,8 +256,8 @@ const et = ({
             // 可以适当减少，因为只需要微调
             gravity: 0.6
           }).run(), setTimeout(() => {
-            g.forEach((i) => i.unlock());
-          }, 2e3), u.animate({
+            f.forEach((i) => i.unlock());
+          }, 2e3), y.animate({
             style: {
               opacity: 1,
               width: 20,
@@ -265,72 +267,72 @@ const et = ({
             duration: 400,
             easing: "ease-out",
             complete: () => {
-              u.style("opacity", ""), u.style("width", ""), u.style("height", "");
+              y.style("opacity", ""), y.style("width", ""), y.style("height", "");
             }
           }), setTimeout(() => {
-            a.removed() || (a.style("border-width", ""), a.style("border-color", ""), e.center(a), e.zoom(e.zoom()));
+            d.removed() || (d.style("border-width", ""), d.style("border-color", ""), e.center(d), e.zoom(e.zoom()));
           }, 600);
         } else
           console.log("没有找到相关节点数据");
-      } catch (o) {
-        console.error("请求接口失败:", o);
+        C.destroy();
+      } catch (n) {
+        C.destroy(), C.error("请求接口失败"), console.error("22请求接口失败:", n);
       }
-      Q(!1), S.destroy();
+      J(!1);
     }
-    E({ visible: !1 });
-  }, ge = {
+    L({ visible: !1 });
+  }, fe = {
     expanded: "typed-literal",
     contract: "uri"
-  }, ye = (d) => {
-    if (console.log("handleMenuAction:::", d), c.targetNode) {
-      const r = d.ids, w = c.targetNode.data();
-      if (["expanded", "contract"].includes(r))
-        ue({ kgId: 3, ...w, zktype: ge[r] });
-      else if (r === "nodeInfo") {
-        const e = c.targetNode, a = {
-          id: e.id(),
-          data: e.data(),
-          position: e.position(),
-          degree: e.degree(),
-          inDegree: e.degree(!0),
-          outDegree: e.degree(!1),
-          classes: e.classes(),
-          // 样式信息
-          style: e.style()
+  }, me = (r, a) => {
+    var e;
+    console.log("handleMenuAction:::", r, a);
+    const g = a || u.targetNode;
+    if (g) {
+      const d = r.ids, t = g.data();
+      if (["expanded", "contract"].includes(d))
+        ye({ kgId: 3, ...t, zktype: fe[d] });
+      else if (d === "nodeInfo") {
+        const o = g, n = {
+          id: o.id(),
+          data: o.data(),
+          position: o.position(),
+          degree: o.degree(),
+          inDegree: o.degree(!0),
+          outDegree: o.degree(!1),
+          classes: o.classes(),
+          style: o.style()
         };
-        V.current.open(a);
-      } else if (r === "knowledgeCard") {
-        const e = c.targetNode;
-        Y.current.open(e.data());
-      }
-      d.action(c.targetNode), E({ visible: !1, x: 0, y: 0, targetNode: null });
+        Q.current.open(n);
+      } else d === "knowledgeCard" && V.current.open(g.data());
+      (e = r.onClick) == null || e.call(r, g), L({ visible: !1, x: 0, y: 0, targetNode: null });
     }
   };
-  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: [
-    /* @__PURE__ */ y("div", { className: "btn-group" }),
-    /* @__PURE__ */ y(
-      ke,
+  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: [
+    /* @__PURE__ */ c("div", { className: "btn-group" }),
+    /* @__PURE__ */ c(
+      ze,
       {
-        ref: X,
+        ref: K,
         cyRef: p,
-        graphInfo: f,
-        initNodeScale: J,
-        cyContainerRef: R,
-        typeObj: z,
-        relationObj: j,
-        colors: k,
-        actionBar: K
+        graphInfo: m,
+        initNodeScale: X,
+        cyContainerRef: j,
+        typeObj: w,
+        relationObj: T,
+        colors: z,
+        actionBar: ae
       }
     ),
-    /* @__PURE__ */ oe("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ y("div", { ref: R, className: "cy-container" }),
-      c.visible && c.targetNode && /* @__PURE__ */ y(
+    /* @__PURE__ */ te("div", { className: "relative h-100", children: [
+      /* @__PURE__ */ c("div", { ref: j, className: "cy-container" }),
+      u.visible && u.targetNode && /* @__PURE__ */ c(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${c.x}px`,
-            top: `${c.y}px`,
+            left: `${u.x}px`,
+            top: `${u.y}px`,
             // backgroundColor: 'white',
             // border: '1px solid #ccc',
             // borderRadius: '50%',
@@ -343,17 +345,17 @@ const et = ({
             height: "200px",
             overflow: "hidden"
           },
-          onClick: (d) => d.stopPropagation(),
-          children: /* @__PURE__ */ y(je, { items: pe, centerImage: (ee = c == null ? void 0 : c.targetNode) == null ? void 0 : ee.data().image, onClick: (d) => ye(d) })
+          onClick: (r) => r.stopPropagation(),
+          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) })
         }
       ),
-      T.visible && /* @__PURE__ */ y(
+      $.visible && /* @__PURE__ */ c(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${T.x}px`,
-            top: `${T.y}px`,
+            left: `${$.x}px`,
+            top: `${$.y}px`,
             transform: "translateX(-50%)",
             backgroundColor: "rgba(0, 0, 0, 0.85)",
             color: "#fff",
@@ -367,14 +369,14 @@ const et = ({
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: T.content
+          children: $.content
         }
       )
     ] }),
-    /* @__PURE__ */ y(Te, { ref: V }),
-    /* @__PURE__ */ y(De, { ref: Y })
+    /* @__PURE__ */ c(Se, { ref: Q }),
+    /* @__PURE__ */ c(Pe, { ref: V })
   ] }) });
 };
 export {
-  et as default
+  rt as default
 };

package/lib/index.es7.js

@@ -16,8 +16,6 @@ import { actionList as ft } from "./index.es4.js";
 const q = (b, r) => (S) => {
   S.stopPropagation(), b == null || b(r || "");
 }, bt = (b) => {
-  if (!b)
-    return { bottom: 20, right: 20 };
   if (typeof b == "string")
     switch (b) {
       case "top":
@@ -49,7 +47,7 @@ const q = (b, r) => (S) => {
   actionBar: L
 }, me) => {
   var ne, se, ae;
-  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());
+  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());
   Ye(me, () => ({
     onPathAnalysis: () => {
       oe();

package/lib/src/components/Graph/components/SettingCircle/index.d.ts

@@ -1,13 +1,15 @@
 import { default as React } from 'react';
 interface MenuItem {
     label: string;
-    onClick?: () => void;
+    ids?: string;
+    onClick?: (node?: any) => void;
 }
 interface RadialMenuProps {
     items?: MenuItem[];
     centerImage?: string;
     size?: number;
-    onClick: any;
+    onClick: (item: MenuItem, targetNode?: any) => void;
+    targetNode?: any;
 }
 declare const RadialMenu: React.FC<RadialMenuProps>;
 export default RadialMenu;

package/lib/src/components/Graph/types.d.ts

@@ -63,6 +63,14 @@ export type ActionBarPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left'
     bottom?: string | number;
     left?: string | number;
 };
+export interface ActionCircleItem {
+    /** 菜单项唯一标识 */
+    ids: string;
+    /** 菜单项显示文本 */
+    label: string;
+    /** 自定义点击事件 */
+    onClick?: (node: any) => void;
+}
 export interface ActionBarItem {
     key: string;
     title: string;
@@ -79,7 +87,7 @@ export interface ActionBarConfig {
 }
 export interface CytoscapeReactProps {
     /** 图谱数据 */
-    data: GraphData | any[];
+    data?: GraphData | any[];
     /** 获取完整图谱数据的回调函数 */
     getAllGraphData?: (params?: any) => void;
     /** 搜索类型 */
@@ -98,4 +106,8 @@ export interface CytoscapeReactProps {
     actionBarPosition?: ActionBarPosition;
     /** ActionBar 配置 */
     actionBar?: ActionBarConfig;
+    /** 右键菜单配置，传入则覆盖/追加默认菜单项 */
+    actionCircle?: ActionCircleItem[];
+    /** 暂无数据描述 */
+    noDataDesc?: string;
 }

package/lib/src/components/Graph/utils/menuItems.d.ts

@@ -1 +1,12 @@
-export declare const menuItemsConfig: any;
+import { ActionCircleItem } from '../types';
+export declare const menuItemsConfig: ({ cyRef, setContextMenu, onPathAnalysis, setPathNodes, actionCircle }: {
+    cyRef: any;
+    setContextMenu: any;
+    onPathAnalysis?: () => void;
+    setPathNodes: any;
+    actionCircle?: ActionCircleItem[];
+}) => {
+    label: string;
+    ids: string;
+    onClick: (node: any) => void;
+}[];