react-kggraph 0.0.34 → 0.0.35

package/lib/index.es3.js

@@ -1,9 +1,9 @@
-import { jsx as y, jsxs as ne } from "react/jsx-runtime";
+import { jsx as f, jsxs as ne } from "react/jsx-runtime";
 import { useRef as C, useState as m, useEffect as T } from "react";
 import z from "cytoscape";
 import Ee from "cytoscape-cose-bilkent";
-import Ne from "cytoscape-cise";
-import Pe from "cytoscape-fcose";
+import Pe from "cytoscape-cise";
+import Ne from "cytoscape-fcose";
 import je from "storm-layout";
 import we from "./index.es7.js";
 /* empty css          */
@@ -20,18 +20,18 @@ import { GraphProvider as Me } from "./index.es15.js";
 import Ae from "./index.es16.js";
 import We from "./index.es17.js";
 z.use(Te);
-z.use(Ne);
 z.use(Pe);
+z.use(Ne);
 z.use(je);
 z.use(Ee);
 const ct = ({
   data: E,
   getAllGraphData: $,
   highPathAnalysis: F = [],
-  graphInfo: u,
+  graphInfo: g,
   stepNextApi: ae,
   knowledgeCardApi: re,
-  colors: N,
+  colors: P,
   actionBar: ie,
   actionCircle: de,
   queryStatisticsConfig: le = [{ label: "实体", key: "entity" }, { label: "关系", key: "relation" }],
@@ -39,11 +39,11 @@ const ct = ({
   noDataDesc: He = "暂无数据"
 }) => {
   var V, G;
-  const L = C(null), [v, X] = m([]), c = C(null), q = C(null), K = 1, [Ze, U] = m(!1), [b, I] = m({}), [O, B] = m({}), [pe, ge] = m("cose-bilkent"), Y = C(null), _ = C(null), [ue, J] = m(["", ""]), M = C(N);
+  const L = C(null), [v, X] = m([]), c = C(null), q = C(null), K = 1, [Ze, U] = m(!1), [b, I] = m({}), [O, B] = m({}), [pe, ge] = m("cose-bilkent"), Y = C(null), _ = C(null), [ue, J] = m(["", ""]), M = C(P);
   T(() => {
-    M.current = N;
-  }, [N]);
-  const [f, P] = m({
+    M.current = P;
+  }, [P]);
+  const [u, N] = m({
     visible: !1,
     x: 0,
     y: 0,
@@ -54,26 +54,26 @@ const ct = ({
     x: 0,
     y: 0,
     content: ""
-  }), fe = $e({ cyRef: c, setContextMenu: P, onPathAnalysis: (V = q.current) == null ? void 0 : V.onPathAnalysis, setPathNodes: J, actionCircle: de });
+  }), fe = $e({ cyRef: c, setContextMenu: N, onPathAnalysis: (V = q.current) == null ? void 0 : V.onPathAnalysis, setPathNodes: J, actionCircle: de });
   T(() => {
-    const { nodes: t, links: e } = F || {};
-    ((t == null ? void 0 : t.length) > 0 || (e == null ? void 0 : e.length) > 0) && Le(c, { nodes: t, links: e, isGrayed: !1 });
+    const { nodes: e, links: t } = F || {};
+    ((e == null ? void 0 : e.length) > 0 || (t == null ? void 0 : t.length) > 0) && Le(c, { nodes: e, links: t, isGrayed: !1 });
   }, [w(F), w(v)]), T(() => {
-    const t = [], e = [];
+    const e = [], t = [];
     v.forEach((d) => {
-      d.group === "nodes" ? t.push(d.data) : d.group === "edges" && e.push(d.data);
-    }), $ == null || $({ graphData: v, nodeStatic: b, relationStatic: O, data: { nodes: t, links: e }, paths: E.paths, data2: E.data2, logId: E.logId, costtime: E.costtime });
+      d.group === "nodes" ? e.push(d.data) : d.group === "edges" && t.push(d.data);
+    }), $ == null || $({ graphData: v, nodeStatic: b, relationStatic: O, data: { nodes: e, links: t }, paths: E.paths, data2: E.data2, logId: E.logId, costtime: E.costtime });
   }, [w(v), w(b), w(O)]), T(() => {
     var i;
     if (!L.current || c.current) return;
-    const { elements: t, typeListObj: e, relationListObj: d } = Z(E, { typeObj: b, graphInfo: u });
-    I(e), X(t), B(d), document.addEventListener("contextmenu", function(a) {
+    const { elements: e, typeListObj: t, relationListObj: d } = Z(E, { typeObj: b, graphInfo: g });
+    I(t), X(e), B(d), document.addEventListener("contextmenu", function(a) {
       a.preventDefault();
     });
     const s = z({
       container: L.current,
-      elements: t,
-      style: Re({ elements: t, colors: N }),
+      elements: e,
+      style: Re({ elements: e, colors: P }),
       autounselectify: !1,
       autolock: !1,
       maxZoom: 1,
@@ -82,11 +82,11 @@ const ct = ({
         // 使用预设布局，完全依赖 position
       }
     });
-    if (c.current = s, ((i = u == null ? void 0 : u.searchNodes) == null ? void 0 : i.length) === 2)
+    if (c.current = s, ((i = g == null ? void 0 : g.searchNodes) == null ? void 0 : i.length) === 2)
       Oe(
         s,
-        u.searchNodes[0],
-        u.searchNodes[1]
+        g.searchNodes[0],
+        g.searchNodes[1]
       );
     else {
       const a = s.layout(De());
@@ -132,7 +132,7 @@ const ct = ({
     }), s.on("cxttap", "node", (a) => {
       a.preventDefault(), a.stopPropagation(), a.stopImmediatePropagation(), a.originalEvent && (a.originalEvent.preventDefault(), a.originalEvent.stopPropagation(), a.originalEvent.stopImmediatePropagation());
       const o = a.target, n = o.renderedPosition();
-      console.log("renderedPos:::", o.data(), o.style("background-color")), P({
+      console.log("renderedPos:::", o.data(), o.style("background-color")), N({
         visible: !0,
         x: n.x - 90,
         y: n.y - 90,
@@ -142,23 +142,27 @@ const ct = ({
     }), c.current = s, s.on("click", "node", (a) => {
       const o = a.target;
       s.nodes().removeClass("selected grayed highlighted"), s.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
-      const r = o.neighborhood().nodes().add(o), g = r.edgesWith(r);
-      console.log("cy.nodes().not(relatedNodes):::", r), s.nodes().not(r).addClass("grayed"), s.edges().not(g).addClass("grayed"), r.addClass("highlighted"), g.addClass("highlighted");
+      const r = o.neighborhood().nodes().add(o), p = r.edgesWith(r);
+      console.log("cy.nodes().not(relatedNodes):::", r), s.nodes().not(r).addClass("grayed"), s.edges().not(p).addClass("grayed"), r.addClass("highlighted"), p.addClass("highlighted");
     }), s.on("tap", (a) => {
-      a.target === s && (P((o) => ({ ...o, visible: !1 })), s.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), s.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
+      a.target === s && (N((o) => ({ ...o, visible: !1 })), s.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), s.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
     }), () => {
       c.current && (c.current.destroy(), c.current = null);
     };
   }, []);
-  const ye = ({ addedNodes: t, currentNode: e, cy: d, currentZoom: s }) => {
-    const i = t == null ? void 0 : t.length;
-    e.data("originalPosition") || e.data("originalPosition", { ...e.position() });
+  const ye = ({ addedNodes: e, currentNode: t, cy: d, currentZoom: s }) => {
+    const i = e == null ? void 0 : e.length;
+    t.data("originalPosition") || t.data("originalPosition", { ...t.position() });
     const a = Math.max(0.1, 18 / (i || 1)), o = d.layout({
       name: "concentric",
       spacingFactor: a,
       // 节点越多间距越小，防止溢出
+      eles: e.union(t),
+      // 只布局新节点+当前节点，不重算全图
       minNodeSpacing: 0,
       // 最小间距设为0
+      fit: !1,
+      // 禁止自动适配视口，保持缩放
       animate: !1,
       concentric: function(n) {
         return n.degree();
@@ -172,26 +176,26 @@ const ct = ({
       // },
       // 添加随机偏移，打破完美圆环
       transform: function(n, r) {
-        const g = (Math.random() - 0.5) * 40, x = (Math.random() - 0.5) * 10;
+        const p = (Math.random() - 0.5) * 40, x = (Math.random() - 0.5) * 10;
         return {
-          x: r.x + g,
+          x: r.x + p,
           y: r.y + x
         };
       }
     });
     o.one("layoutstop", () => {
-      t.forEach((g) => {
-        g.style("z-index", Math.floor(Math.random() * 500) + 1);
-      }), e.style("z-index", 1e3);
-      const n = e.data("originalPosition"), r = { ...e.position() };
-      n && (e.position(n), e.animate({
-        center: { eles: e },
+      e.forEach((p) => {
+        p.style("z-index", Math.floor(Math.random() * 500) + 1);
+      }), t.style("z-index", 1e3);
+      const n = t.data("originalPosition"), r = { ...t.position() };
+      n && (t.position(n), t.animate({
+        center: { eles: t },
         position: r
       }, {
         duration: 900,
         easing: "ease-out",
         complete: () => {
-          t.animate({
+          e.animate({
             style: { opacity: 1 }
           }, {
             duration: 900,
@@ -200,19 +204,19 @@ const ct = ({
         }
       })), h.destroy();
     }), o.run(), d.nodes().forEach((n) => n.unlock());
-  }, me = async (t) => {
-    const { id: e, kgId: d } = t, s = c.current;
+  }, me = async (e) => {
+    const { id: t, kgId: d } = e, s = c.current;
     if (!s) return;
-    const i = s.$id(e);
+    const i = s.$id(t);
     if (!i || i.length === 0) {
       console.error("当前节点不存在");
       return;
     }
-    const a = s.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === e || n.data("idLabel") === `${e}-${n.data("name")}`) && n.data("zktype") === t.zktype : !1);
+    const a = s.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === t || n.data("idLabel") === `${t}-${n.data("name")}`) && n.data("zktype") === e.zktype : !1);
     if (a.length > 0) {
-      const n = a.map((l) => l.id()), r = a.connectedEdges(), g = s.edges().filter(
-        (l) => l.data("source") === e && n.includes(l.data("target"))
-      ), x = s.edges().filter((l) => l.data("appendedBy") === e), A = r.merge(g).merge(x).filter((l) => l.data().zktype === t.zktype);
+      const n = a.map((l) => l.id()), r = a.connectedEdges(), p = s.edges().filter(
+        (l) => l.data("source") === t && n.includes(l.data("target"))
+      ), x = s.edges().filter((l) => l.data("appendedBy") === t), A = r.merge(p).merge(x).filter((l) => l.data().zktype === e.zktype);
       a.animate({
         style: { opacity: 0 }
       }, {
@@ -222,18 +226,18 @@ const ct = ({
             const j = ee.filter((k) => {
               var te, oe;
               const S = k.data.zktype;
-              if (k.group === "nodes" && n.includes((te = k.data) == null ? void 0 : te.id) && S && S === t.zktype)
+              if (k.group === "nodes" && n.includes((te = k.data) == null ? void 0 : te.id) && S && S === e.zktype)
                 return !1;
-              if (k.group === "edges" && S && S === t.zktype) {
+              if (k.group === "edges" && S && S === e.zktype) {
                 const xe = Array.from(x).map((ze) => {
                   const H = ze.data();
                   return `${H.source}-${H.target}-${H.label}`;
-                }), W = k.data, ke = xe.includes(`${W.source}-${W.target}-${W.label}`), Ce = ((oe = k.data) == null ? void 0 : oe.appendedBy) === e;
+                }), W = k.data, ke = xe.includes(`${W.source}-${W.target}-${W.label}`), Ce = ((oe = k.data) == null ? void 0 : oe.appendedBy) === t;
                 return !ke && !Ce;
               }
               return !0;
-            }), { typeListObj: p, relationListObj: R } = Z({}, { graphData: j, typeObj: {} });
-            return I(p), B(R), j;
+            }), { typeListObj: y, relationListObj: R } = Z({}, { graphData: j, typeObj: {} });
+            return I(y), B(R), j;
           }), i.data("appendedNodes", []), i.data("isExpanded", !1);
           const l = i.data("originalPosition");
           l && (i.animate({
@@ -250,8 +254,8 @@ const ct = ({
           content: "正在展开...",
           duration: 0
         });
-        const n = await ae({ uri: e, queryType: 1, kgId: d, zktype: t.zktype }), { elements: r, typeListObj: g, relationListObj: x } = Z(n.data, { graphData: v, typeObj: b, relationObj: O, zktype: t.zktype });
-        if (I(g), B(x), !((r == null ? void 0 : r.length) > 0)) {
+        const n = await ae({ uri: t, queryType: 1, kgId: d, zktype: e.zktype }), { elements: r, typeListObj: p, relationListObj: x } = Z(n.data, { graphData: v, typeObj: b, relationObj: O, zktype: e.zktype });
+        if (I(p), B(x), !((r == null ? void 0 : r.length) > 0)) {
           setTimeout(() => {
             h.destroy(), h.warning("暂无数据");
           }, 2e3);
@@ -259,19 +263,19 @@ const ct = ({
         }
         const A = s.zoom();
         if ((r == null ? void 0 : r.length) > 0) {
-          const l = r.map((p) => {
-            if (p.group === "nodes") {
+          const l = r.map((y) => {
+            if (y.group === "nodes") {
               const R = Se * K;
               return {
-                ...p,
+                ...y,
                 // position,
                 style: { opacity: 0, width: R, height: R },
                 data: {
-                  ...p.data,
-                  parentId: e,
-                  appendedBy: e,
-                  idLabel: e + "-" + p.data.label,
-                  zktype: t.zktype,
+                  ...y.data,
+                  parentId: t,
+                  appendedBy: t,
+                  idLabel: t + "-" + y.data.label,
+                  zktype: e.zktype,
                   isAppended: !0,
                   baseWidth: 80,
                   baseHeight: 80
@@ -279,14 +283,11 @@ const ct = ({
               };
             }
             return {
-              ...p,
-              data: { ...p.data, appendedBy: e, zktype: t.zktype }
+              ...y,
+              data: { ...y.data, appendedBy: t, zktype: e.zktype }
             };
           });
-          console.log(888, l), s.nodes().forEach((p) => {
-            if (p.data("id") !== e)
-              return p.lock();
-          });
+          console.log(888, l), s.nodes().lock(), i.unlock();
           const j = s.add(l).filter(":node");
           j.style("opacity", 0), ye({ addedNodes: j, currentNode: i, cy: s, currentZoom: A });
         } else
@@ -297,18 +298,18 @@ const ct = ({
       }
       U(!1);
     }
-    P({ visible: !1 });
+    N({ visible: !1 });
   }, he = {
     expanded: "typed-literal",
     contract: "uri"
-  }, ve = (t, e) => {
+  }, ve = (e, t) => {
     var s;
-    console.log("handleMenuAction:::", t, e);
-    const d = e || f.targetNode;
+    console.log("handleMenuAction:::", e, t);
+    const d = t || u.targetNode;
     if (d) {
-      const i = t.ids, a = d.data();
+      const i = e.ids, a = d.data();
       if (["expanded", "contract"].includes(i))
-        me({ kgId: u.kgId, ...a, zktype: he[i] });
+        me({ kgId: g.kgId, ...a, zktype: he[i] });
       else if (i === "nodeInfo") {
         const o = d, n = {
           id: o.id(),
@@ -322,38 +323,38 @@ const ct = ({
         };
         Y.current.open(n);
       } else i === "knowledgeCard" && _.current.open(d.data());
-      (s = t.onClick) == null || s.call(t, d), P({ visible: !1, x: 0, y: 0, targetNode: null });
+      (s = e.onClick) == null || s.call(e, d), N({ visible: !1, x: 0, y: 0, targetNode: null });
     }
   }, be = () => {
-    const t = {};
-    return Object.keys(b).forEach((e) => {
-      e !== "_" && (t[e] = b[e]);
-    }), t;
+    const e = {};
+    return Object.keys(b).forEach((t) => {
+      t !== "_" && (e[t] = b[t]);
+    }), e;
   };
-  return /* @__PURE__ */ y(Me, { value: { pathNodes: ue, setPathNodes: J, graphInfo: u, graphData: v, layoutType: pe, setLayoutType: ge, knowledgeCardApi: re, queryStatisticsConfig: le, actionBar: ie }, children: /* @__PURE__ */ ne("div", { className: We("cytoscape-container relative", ce), children: [
-    /* @__PURE__ */ y("div", { className: "btn-group" }),
-    /* @__PURE__ */ y(
+  return /* @__PURE__ */ f(Me, { value: { pathNodes: ue, setPathNodes: J, graphInfo: g, graphData: v, layoutType: pe, setLayoutType: ge, knowledgeCardApi: re, queryStatisticsConfig: le, actionBar: ie }, children: /* @__PURE__ */ ne("div", { className: We("cytoscape-container relative", ce), children: [
+    /* @__PURE__ */ f("div", { className: "btn-group" }),
+    /* @__PURE__ */ f(
       we,
       {
         ref: q,
         cyRef: c,
-        graphInfo: u,
+        graphInfo: g,
         initNodeScale: K,
         cyContainerRef: L,
         typeObj: be(),
         relationObj: O,
-        colors: N
+        colors: P
       }
     ),
     /* @__PURE__ */ ne("div", { className: "relative h-100", children: [
-      /* @__PURE__ */ y("div", { ref: L, className: "cy-container" }),
-      f.visible && f.targetNode && /* @__PURE__ */ y(
+      /* @__PURE__ */ f("div", { ref: L, className: "cy-container" }),
+      u.visible && u.targetNode && /* @__PURE__ */ f(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${f.x}px`,
-            top: `${f.y}px`,
+            left: `${u.x}px`,
+            top: `${u.y}px`,
             // backgroundColor: 'white',
             // border: '1px solid #ccc',
             // borderRadius: '50%',
@@ -366,11 +367,11 @@ const ct = ({
             height: "200px",
             overflow: "hidden"
           },
-          onClick: (t) => t.stopPropagation(),
-          children: /* @__PURE__ */ y(Ie, { items: fe, centerImage: (G = f == null ? void 0 : f.targetNode) == null ? void 0 : G.data().image, targetNode: f.targetNode, onClick: (t, e) => ve(t, e) })
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ f(Ie, { items: fe, centerImage: (G = u == null ? void 0 : u.targetNode) == null ? void 0 : G.data().image, targetNode: u.targetNode, onClick: (e, t) => ve(e, t) })
         }
       ),
-      D.visible && /* @__PURE__ */ y(
+      D.visible && /* @__PURE__ */ f(
         "div",
         {
           style: {
@@ -394,8 +395,8 @@ const ct = ({
         }
       )
     ] }),
-    /* @__PURE__ */ y(Be, { ref: Y, cyRef: c }),
-    /* @__PURE__ */ y(Ae, { ref: _ })
+    /* @__PURE__ */ f(Be, { ref: Y, cyRef: c }),
+    /* @__PURE__ */ f(Ae, { ref: _ })
   ] }) });
 };
 export {

package/lib/index.es45.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useState as m, useEffect as w } from "react";
-import h from "./index.es50.js";
+import h from "./index.es47.js";
 const k = ({ relations: t, kgIds: s, viewMode: a = "list", source: c = "" }) => {
   const [d, l] = m(t);
   w(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-kggraph",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "description": "A knowledge graph visualization component based on Cytoscape",
   "type": "module",
   "main": "./lib/index.es.js",