react-kggraph 0.0.17 → 0.0.19

package/lib/index.es3.js

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