react-kggraph 0.0.9 → 0.0.11

package/lib/index.es6.js

@@ -1,4 +1,4 @@
-import { jsxs as o, Fragment as A, jsx as t } from "react/jsx-runtime";
+import { jsxs as o, Fragment as z, jsx as t } from "react/jsx-runtime";
 import { forwardRef as Me, useContext as qe, useState as w, useRef as Be, useImperativeHandle as Qe, useEffect as Ze } from "react";
 import { AppstoreOutlined as Ge, TableOutlined as Ke, RobotOutlined as Ue, LineChartOutlined as Xe, SelectOutlined as Ye, SaveOutlined as Re, BorderOuterOutlined as et, LineHeightOutlined as tt, ClearOutlined as nt, PlusCircleOutlined as lt, MinusCircleOutlined as st, PlusSquareOutlined as ot, MinusSquareOutlined as at } from "@ant-design/icons";
 /* empty css           */
@@ -12,7 +12,7 @@ import Ct from "./index.es20.js";
 import Nt from "./index.es21.js";
 import ae from "./index.es22.js";
 import { downloadFile as ie } from "./index.es12.js";
-const z = (f, r) => (y) => {
+const F = (f, r) => (y) => {
   y.stopPropagation(), f == null || f(r || "");
 }, Wt = Me(({
   graphInfo: f,
@@ -22,7 +22,7 @@ const z = (f, r) => (y) => {
   relationObj: O
 }, de) => {
   var X, Y, R, ee, te, ne, le;
-  const { layoutType: he, setLayoutType: ue } = qe(wt), [k, me] = w(""), [ge, F] = w(!1), [H, pe] = w(y), [fe, I] = w(!1), [we, D] = w(!1), [W, be] = w(null), [ye, J] = w(!1), [ve, $] = w(!1), [Ce, Ne] = w("node"), V = Be(null), [M, xe] = w(!0), [q, Se] = w(/* @__PURE__ */ new Set()), [B, ke] = w(/* @__PURE__ */ new Set());
+  const { layoutType: he, setLayoutType: ue } = qe(wt), [k, me] = w(""), [ge, _] = w(!1), [H, pe] = w(y), [fe, I] = w(!1), [we, D] = w(!1), [W, be] = w(null), [ye, J] = w(!1), [ve, $] = w(!1), [Ce, Ne] = w("node"), V = Be(null), [M, Se] = w(!0), [q, xe] = w(/* @__PURE__ */ new Set()), [B, ke] = w(/* @__PURE__ */ new Set());
   Qe(de, () => ({
     onPathAnalysis: () => {
       G();
@@ -114,8 +114,8 @@ const z = (f, r) => (y) => {
         属性值: L.value || ""
       };
     }), h = s.map((g) => {
-      var p, v, x, S;
-      const d = g.data || {}, L = ((v = (p = d.source) == null ? void 0 : p.split("/#")[0]) == null ? void 0 : v.split("/").pop()) || d.source, m = ((S = (x = d.target) == null ? void 0 : x.split("/#")[0]) == null ? void 0 : S.split("/").pop()) || d.target;
+      var p, v, S, x;
+      const d = g.data || {}, L = ((v = (p = d.source) == null ? void 0 : p.split("/#")[0]) == null ? void 0 : v.split("/").pop()) || d.source, m = ((x = (S = d.target) == null ? void 0 : S.split("/#")[0]) == null ? void 0 : x.split("/").pop()) || d.target;
       return {
         源节点: L,
         目标节点: m,
@@ -218,9 +218,9 @@ const z = (f, r) => (y) => {
   }, Te = () => {
     const e = r.current;
     if (console.log("isShow::::"), ge)
-      F(!1), e.nodes('[types="typed-literal" ]').style("visibility", "visible"), e.edges().style("visibility", "visible");
+      _(!1), e.nodes('[types="typed-literal" ]').style("visibility", "visible"), e.edges().style("visibility", "visible");
     else {
-      F(!0);
+      _(!0);
       const n = e.nodes('[types="typed-literal" ]');
       n.style("visibility", "hidden"), n.connectedEdges().style("visibility", "hidden");
     }
@@ -231,9 +231,9 @@ const z = (f, r) => (y) => {
     pe(l);
     const s = n.nodes();
     s.style("width", (u) => (u.data("baseWidth") || 80) * l), s.style("height", (u) => (u.data("baseHeight") || 80) * l);
-  }, _e = (e) => {
+  }, Ae = (e) => {
     me(e.content), Q(e.content);
-  }, Ae = (e = "刘强东", n = "1") => {
+  }, ze = (e = "刘强东", n = "1") => {
     const l = r.current;
     if (!l) return;
     l.elements().removeClass("level-highlight level-selected level-grayed level-highlightedge");
@@ -247,16 +247,16 @@ const z = (f, r) => (y) => {
       m.addClass("level-selected"), h.merge(m);
       let p = l.collection();
       const v = /* @__PURE__ */ new Set();
-      v.add(m.id()), u >= 1 && (p = m.neighborhood().nodes(), p.forEach((x) => {
-        v.add(x.id()), h.merge(x);
+      v.add(m.id()), u >= 1 && (p = m.neighborhood().nodes(), p.forEach((S) => {
+        v.add(S.id()), h.merge(S);
       }), b.push(p));
-      for (let x = 2; x <= u; x++) {
-        const S = l.collection();
+      for (let S = 2; S <= u; S++) {
+        const x = l.collection();
         p.forEach((T) => {
-          T.neighborhood().nodes().forEach((_) => {
-            v.has(_.id()) || (v.add(_.id()), S.merge(_));
+          T.neighborhood().nodes().forEach((A) => {
+            v.has(A.id()) || (v.add(A.id()), x.merge(A));
           });
-        }), S.forEach((T) => h.merge(T)), b.push(S), p = S;
+        }), x.forEach((T) => h.merge(T)), b.push(x), p = x;
       }
     }), b.forEach((m) => {
       m.addClass("level-highlight");
@@ -266,12 +266,12 @@ const z = (f, r) => (y) => {
     }).addClass("level-highlightedge");
     const d = l.elements().filter(".level-selected, .level-highlight, .level-highlightedge");
     l.elements().not(d).addClass("level-grayed"), P.success(`已高亮 "${e}" 及其 ${u} 度关联节点和连线`);
-  }, ze = (e) => {
+  }, Fe = (e) => {
     const n = r.current;
     if (!n) return;
     const l = new Set(q);
-    l.has(e) ? (l.delete(e), n.nodes().filter((s) => s.data("type") === e).show()) : (l.add(e), n.nodes().filter((s) => s.data("type") === e).hide()), Se(l);
-  }, Fe = (e) => {
+    l.has(e) ? (l.delete(e), n.nodes().filter((s) => s.data("type") === e).show()) : (l.add(e), n.nodes().filter((s) => s.data("type") === e).hide()), xe(l);
+  }, _e = (e) => {
     const n = r.current;
     if (!n) return;
     const l = new Set(B);
@@ -316,11 +316,11 @@ const z = (f, r) => (y) => {
       });
     }), P.success("连线配置保存成功"));
   };
-  return /* @__PURE__ */ o(A, { children: [
+  return /* @__PURE__ */ o(z, { children: [
     /* @__PURE__ */ t("div", { className: "graph-bar", children: /* @__PURE__ */ o("div", { className: "graph-bar-min", children: [
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", onClick: () => xe(!M), children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", onClick: () => Se(!M), children: [
         /* @__PURE__ */ t(Ge, {}),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "查询统计" })
+        /* @__PURE__ */ t(i, { className: "w-100", justify: "center", children: "查询统计" })
       ] }),
       /* @__PURE__ */ t(
         j,
@@ -330,18 +330,18 @@ const z = (f, r) => (y) => {
               ...e,
               label: /* @__PURE__ */ t("div", { className: ae({
                 "text-[#145afd]": he === e.key
-              }), onClick: z(Le, e.key), children: e.label })
+              }), onClick: F(Le, e.key), children: e.label })
             }))
           },
-          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
             /* @__PURE__ */ t(Ke, {}),
-            /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "布局" })
+            /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "布局" })
           ] })
         }
       ),
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", onClick: () => We(), children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", onClick: () => We(), children: [
         /* @__PURE__ */ t(Ue, {}),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "图显示设置" })
+        /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "图显示设置" })
       ] }),
       /* @__PURE__ */ t(
         j,
@@ -370,9 +370,9 @@ const z = (f, r) => (y) => {
               )
             }))
           },
-          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
             /* @__PURE__ */ t(Xe, {}),
-            /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "分析" })
+            /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "分析" })
           ] })
         }
       ),
@@ -382,12 +382,12 @@ const z = (f, r) => (y) => {
           menu: {
             items: (Y = ut) == null ? void 0 : Y.map((e) => ({
               ...e,
-              label: /* @__PURE__ */ t("div", { onClick: z(Pe, e.key), children: e.label })
+              label: /* @__PURE__ */ t("div", { onClick: F(Pe, e.key), children: e.label })
             }))
           },
-          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
             /* @__PURE__ */ t(Ye, {}),
-            /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "选择" })
+            /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "选择" })
           ] })
         }
       ),
@@ -400,15 +400,15 @@ const z = (f, r) => (y) => {
               label: /* @__PURE__ */ t("div", { onClick: (n) => De(n, e.key), children: e.label })
             }))
           },
-          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
             /* @__PURE__ */ t(Re, {}),
-            /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "下载数据" })
+            /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "下载数据" })
           ] })
         }
       ),
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", onClick: () => Te(), children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", onClick: () => Te(), children: [
         /* @__PURE__ */ t(et, {}),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "隐藏属性" })
+        /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "隐藏属性" })
       ] }),
       /* @__PURE__ */ t(
         j,
@@ -416,37 +416,37 @@ const z = (f, r) => (y) => {
           menu: {
             items: (ee = ce) == null ? void 0 : ee.map((e) => ({
               ...e,
-              label: /* @__PURE__ */ t("div", { onClick: z(() => gt(r, e.key), e.key), children: e.label })
+              label: /* @__PURE__ */ t("div", { onClick: F(() => gt(r, e.key), e.key), children: e.label })
             }))
           },
-          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+          children: /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
             /* @__PURE__ */ t(tt, {}),
-            /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "文字位置" })
+            /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "文字位置" })
           ] })
         }
       ),
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", onClick: () => He(), children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", onClick: () => He(), children: [
         /* @__PURE__ */ t(nt, {}),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "清空画布" })
+        /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "清空画布" })
       ] }),
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
         /* @__PURE__ */ o(i, { gap: "5px", children: [
           /* @__PURE__ */ t(lt, { onClick: () => U("in") }),
           /* @__PURE__ */ t(st, { onClick: () => U("out") })
         ] }),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "节点缩放" })
+        /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "节点缩放" })
       ] }),
-      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hover:text-[#145afd] cursor", children: [
+      /* @__PURE__ */ o(i, { wrap: !0, align: "center", justify: "center", className: "hove-active cursor", children: [
         /* @__PURE__ */ o(i, { gap: "5px", children: [
           /* @__PURE__ */ t(ot, { onClick: () => Z("in") }),
           /* @__PURE__ */ t(at, { onClick: () => Z("out") })
         ] }),
-        /* @__PURE__ */ t(i, { className: "w-100% ", justify: "center", children: "画布缩放" })
+        /* @__PURE__ */ t(i, { className: "w-100 ", justify: "center", children: "画布缩放" })
       ] })
     ] }) }),
-    /* @__PURE__ */ t(vt, { isVisible: fe, searchChange: (e) => _e(e), closeQuery: () => I(!1) }),
+    /* @__PURE__ */ t(vt, { isVisible: fe, searchChange: (e) => Ae(e), closeQuery: () => I(!1) }),
     /* @__PURE__ */ t(Ct, { isVisible: we, analysis: (e) => pt(r, { pathNodes: e }), closePath: () => D(!1) }),
-    /* @__PURE__ */ t(Nt, { ref: V, onLevelClick: Ae }),
+    /* @__PURE__ */ t(Nt, { ref: V, onLevelClick: ze }),
     /* @__PURE__ */ t(
       it,
       {
@@ -477,19 +477,19 @@ const z = (f, r) => (y) => {
               {
                 label: "节点设置",
                 key: "node",
-                children: /* @__PURE__ */ t(xt, { onSave: Je })
+                children: /* @__PURE__ */ t(St, { onSave: Je })
               },
               {
                 label: "连线设置",
                 key: "edge",
-                children: /* @__PURE__ */ t(St, { onSave: $e })
+                children: /* @__PURE__ */ t(xt, { onSave: $e })
               }
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ t("div", { className: ae("absolute right-0px z-1 bg-#fff p-10px rounded-10px shadow-[0_4px_20px_0px_rgba(12,95,218,0.33)] w-200px", {
+    /* @__PURE__ */ t("div", { className: ae("gtaph-statics absolute", {
       hidden: !M
     }), children: /* @__PURE__ */ t(
       se,
@@ -498,7 +498,7 @@ const z = (f, r) => (y) => {
           {
             label: "实体",
             key: "entity",
-            children: /* @__PURE__ */ t(A, { children: Object.keys(N).length > 0 ? /* @__PURE__ */ o("div", { children: [
+            children: /* @__PURE__ */ t(z, { children: Object.keys(N).length > 0 ? /* @__PURE__ */ o("div", { children: [
               /* @__PURE__ */ o("p", { children: [
                 "实体数量：",
                 Object.values(N).reduce((e, n) => e + n.count, 0)
@@ -507,7 +507,7 @@ const z = (f, r) => (y) => {
                 "实体类型：",
                 Object.keys(N).length
               ] }),
-              /* @__PURE__ */ t(i, { gap: "5px", justify: "start", className: "w-100%", wrap: !0, children: Object.keys(N).map((e) => /* @__PURE__ */ o(i, { gap: "4px", justify: "start", className: `w-100% cursor ${q.has(e) ? "opacity-30" : ""}`, onClick: () => ze(e), children: [
+              /* @__PURE__ */ t(i, { gap: "5px", justify: "start", className: "w-100", wrap: !0, children: Object.keys(N).map((e) => /* @__PURE__ */ o(i, { gap: "4px", justify: "start", className: `w-100 cursor ${q.has(e) ? "opacity-30" : ""}`, onClick: () => Fe(e), children: [
                 /* @__PURE__ */ t("img", { className: "w-20px rounded-50%", src: N[e].img, alt: "" }),
                 e,
                 "：",
@@ -518,7 +518,7 @@ const z = (f, r) => (y) => {
           {
             label: "关系",
             key: "relation",
-            children: /* @__PURE__ */ t(A, { children: ((te = Object.keys(O)) == null ? void 0 : te.length) > 0 ? /* @__PURE__ */ o("div", { children: [
+            children: /* @__PURE__ */ t(z, { children: ((te = Object.keys(O)) == null ? void 0 : te.length) > 0 ? /* @__PURE__ */ o("div", { children: [
               /* @__PURE__ */ o("div", { children: [
                 "关系数量：",
                 (ne = Object.keys(O)) == null ? void 0 : ne.length
@@ -527,7 +527,7 @@ const z = (f, r) => (y) => {
                 "关系类型：",
                 (le = Object.values(O)) == null ? void 0 : le.reduce((e, n) => e + n, 0)
               ] }),
-              /* @__PURE__ */ t(i, { gap: "5px", justify: "start", className: "w-100%", wrap: !0, children: Object.keys(O).map((e) => /* @__PURE__ */ o(i, { gap: "4px", className: `w-100% cursor ${B.has(e) ? "opacity-30" : ""}`, onClick: () => Fe(e), children: [
+              /* @__PURE__ */ t(i, { gap: "5px", justify: "start", className: "w-100", wrap: !0, children: Object.keys(O).map((e) => /* @__PURE__ */ o(i, { gap: "4px", className: `w-100 cursor ${B.has(e) ? "opacity-30" : ""}`, onClick: () => _e(e), children: [
                 e,
                 "：",
                 O[e]
@@ -538,7 +538,7 @@ const z = (f, r) => (y) => {
       }
     ) })
   ] });
-}), xt = ({ onSave: f }) => {
+}), St = ({ onSave: f }) => {
   const [r] = c.useForm();
   return /* @__PURE__ */ o(c, { form: r, layout: "vertical", onFinish: f, children: [
     /* @__PURE__ */ t(c.Item, { label: "节点大小", name: "nodeSize", initialValue: 80, children: /* @__PURE__ */ t(C, { type: "number", placeholder: "请输入节点大小" }) }),
@@ -561,7 +561,7 @@ const z = (f, r) => (y) => {
     ] }) }),
     /* @__PURE__ */ t(c.Item, { children: /* @__PURE__ */ t(re, { type: "primary", htmlType: "submit", block: !0, children: "保存节点配置" }) })
   ] });
-}, St = ({ onSave: f }) => {
+}, xt = ({ onSave: f }) => {
   const [r] = c.useForm(), [y, N] = w("default");
   return /* @__PURE__ */ o(c, { form: r, layout: "vertical", onFinish: f, children: [
     /* @__PURE__ */ t(c.Item, { label: "类型", name: "edgeType", initialValue: "straight", children: /* @__PURE__ */ o(a, { children: [

package/lib/style.css

@@ -1 +1 @@
-.cytoscape-container{width:100%;max-width:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:calc(100vh - 180px)}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.graph-bar{display:flex;height:60px;background:#fff;box-shadow:0 4px 20px #100dae33;border-radius:6px;align-items:center}.graph-bar .graph-bar-min{display:flex}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.path-node{width:380px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}
+.cytoscape-container{width:100%;max-width:100%;margin:20px auto}.search-input{padding:8px 12px;width:300px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px}.btn-group{margin-bottom:10px}.btn{padding:8px 16px;margin:0 5px;border:none;border-radius:4px;background:#4285f4;color:#fff;cursor:pointer}.btn:hover{background:#3367d6}.result-text{margin-bottom:10px;color:#333;font-size:14px}.cy-container{width:100%;height:calc(100vh - 180px)}.cy-container :global(.grayed){opacity:.3!important;background-color:#bdbdbd!important;color:#757575!important}.cy-container :global(.highlighted){background-color:#ffeb3b!important;border-color:#fbc02d!important;color:#333!important}.cy-container :global(.selected){border-color:#4caf50!important;background-color:#a5d6a7!important;color:#1b5e20!important}.cy-container .cy-edge:selected{line-color:#ea4335;line-width:3px;line-style:solid}.cy-container .cy-node:hover:not(:selected){background-color:#3367d6}.cy-container .cy-edge:hover:not(:selected){line-color:#757575}.path-nodes-container{margin-bottom:15px}.path-nodes-container h3{margin:10px 0;font-size:16px;color:#333}.node-input-row{display:flex;align-items:center;margin-bottom:8px}.node-input-row span{margin-right:10px;min-width:60px}.node-input-row input{flex:1;margin-right:10px}.remove-node-btn{background:#f44336;padding:6px 12px;font-size:12px}.add-node-btn{background:#4caf50;padding:8px 16px;margin-top:10px}.menuBtn:nth-child(1){transform:rotate(0) skew(31deg)}.menuBtn:nth-child(2){transform:rotate(51deg) skew(31deg)}.menuBtn:nth-child(3){transform:rotate(102deg) skew(31deg)}.menuBtn:nth-child(4){transform:rotate(153deg) skew(31deg)}.menuBtn:nth-child(5){transform:rotate(204deg) skew(31deg)}.menuBtn:nth-child(6){transform:rotate(255deg) skew(31deg)}.menuBtn:nth-child(7){transform:rotate(306deg) skew(35deg)}.menuBtn .menu-item{color:#fff;display:block;width:50px;height:20px;position:absolute;text-align:center;font-size:12px}.menuBtn .menu-item:hover{background:transparent!important}.menuBtn .menu-item{bottom:5px;right:19px;transform:skew(-30deg) translate(-9%) rotate(2deg) translateY(0)}.menuCertent{width:60px;height:60px;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-15%;z-index:999;border-radius:50%;color:#fff;text-align:center;font-size:16px;cursor:pointer;border:2px solid #c9cec9}.graph-bar{display:flex;height:60px;background:#fff;box-shadow:0 4px 20px #100dae33;border-radius:6px;align-items:center}.graph-bar .graph-bar-min{display:flex}.graph-bar .graph-bar-menu{position:relative;cursor:pointer;margin:0 10px;white-space:nowrap;display:flex;align-items:center}.graph-bar .graph-bar-menu:hover .grap-menu-dropdown-item{color:#145afd}.graph-bar .grap-menu-dropdown{background:#fff;box-shadow:0 4px 20px #0000003b;border-radius:6px;position:absolute;padding:5px 0;z-index:99;top:60px}.graph-bar .grap-menu-dropdown p{white-space:nowrap;padding:5px 15px}.graph-bar .grap-menu-dropdown p:hover{background:#f5f5f5;color:#145afd}.graph-bar .grap-menu-dropdown-item{display:flex;cursor:pointer;flex-direction:column;align-items:center}.graph-bar .hide{display:none}.graph-bar .show{display:block}.relaative{position:relative}.absolute{position:absolute}.w-100{width:100%}.gtaph-statics{right:0;z-index:1;background:#fff;padding:10px;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.z-10{z-index:10}.hidden{display:none}.query-node{width:300px;position:absolute;background-color:#fff;right:0;top:20px;padding:10px 20px;border-radius:10px}.path-node{width:380px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b;z-index:10}.path-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.path-node .search-input{margin-bottom:0;padding-bottom:5px}.path-node .btn-group{display:flex;justify-content:flex-end;margin-top:20px}.path-node .ant-select-suffix{width:10px}.query-node{width:300px;position:absolute;background-color:#fff;right:0;padding:10px 20px;border-radius:10px;box-shadow:0 4px 20px #0000003b}.query-node .title{display:flex;justify-content:space-between;height:35px;align-items:center;margin-bottom:10px;font-weight:700;font-size:14px}.radial-menu{position:relative;display:inline-flex;align-items:center;justify-content:center}.radial-svg{position:absolute;top:0;left:0}.sector-group{cursor:pointer;transition:all .2s ease}.sector-group .sector-path{transition:all .2s ease}.sector-group:hover .sector-path{filter:brightness(1.15) drop-shadow(0 2px 4px rgba(0,0,0,.3))}.sector-label{pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.4);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.center-avatar{position:absolute;z-index:10;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .3s ease;overflow:hidden;color:#fff;font-weight:500}.center-avatar img{width:100%;height:100%;object-fit:cover}.center-avatar .center-text{font-size:14px;text-align:center}.center-avatar:hover{transform:scale(1.08);box-shadow:0 6px 20px #0006}.center-avatar:active{transform:scale(.95)}

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "react-kggraph",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A knowledge graph visualization component based on Cytoscape",
   "type": "module",
   "main": "./lib/index.es.js",
   "module": "./lib/index.es.js",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "style": "./lib/react-kggraph.css"
+      "import": "./lib/index.es.js"
     },
-    "./react-kggraph.css": "./lib/react-kggraph.css",
-    "./lib/components/Graph/react-kggraph.css": "./lib/react-kggraph.css"
+    "./style.css": "./lib/style.css"
   },
   "files": [
     "lib"
   ],
-  "style": "lib/components/Graph/CytoscapeReact.css",
+  "style": "lib/style.css",
   "keywords": [
     "knowledge-graph",
     "cytoscape",