react-kggraph 0.0.26 → 0.0.27

package/lib/index.es8.js

@@ -1,4 +1,4 @@
-import { message as C } from "antd";
+import { message as v } from "antd";
 import j from "./index.es25.js";
 import I from "./index.es26.js";
 import P from "./index.es27.js";
@@ -10,8 +10,9 @@ import R from "./index.es32.js";
 import q from "./index.es33.js";
 import A from "./index.es34.js";
 import B from "./index.es35.js";
-import { jsonStringifyParse as U } from "./index.es12.js";
-const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
+import U from "./index.es36.js";
+import { jsonStringifyParse as G } from "./index.es12.js";
+const L = [j, I, P, $, D, J, N, R, q, A], T = (c) => {
   let o = { _: { count: 0 } };
   const s = {}, e = [];
   return c.forEach((n) => {
@@ -19,7 +20,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     const { group: d } = n;
     if (d === "nodes") {
       const i = n.data, l = (a = i.properties) == null ? void 0 : a.type, r = i.type;
-      console.log(999, l, r), !r && l === "uri" ? o = { ...o, _: { ...o[r], count: o._.count + 1 } } : !e.includes(r) && l === "uri" ? (e.push(r), o = { ...o, [r]: { ...o[r], count: 1, img: i.image } }) : l === "uri" && r && (o = { ...o, [r]: { ...o[r], img: i.image, count: o[r].count + 1 } });
+      !r && l === "uri" ? o = { ...o, _: { ...o[r], count: o._.count + 1 } } : !e.includes(r) && l === "uri" ? (e.push(r), o = { ...o, [r]: { ...o[r], count: 1, img: i.image } }) : l === "uri" && r && (o = { ...o, [r]: { ...o[r], img: i.image, count: o[r].count + 1 } });
     } else if (d === "edges") {
       const i = n.data, { label: l } = i;
       s[l] ? s[l] = s[l] + 1 : s[l] = 1;
@@ -30,31 +31,31 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     typeListObj: o,
     relationListObj: s
   };
-}, te = (c, { graphData: o = [], typeObj: s, zktype: e, graphInfo: n = {} }) => {
-  let d = U(s);
+}, ne = (c, { graphData: o = [], typeObj: s, zktype: e, graphInfo: n = {} }) => {
+  let d = G(s);
   const a = Object.keys(s), i = n.searchNodes || [], l = new Set(
     (o == null ? void 0 : o.map((g) => {
-      var t, u, m;
-      return g.group === "nodes" ? (t = g.data) == null ? void 0 : t.id : ((u = g.data) == null ? void 0 : u.source) + "-" + ((m = g.data) == null ? void 0 : m.target);
+      var t, m, u;
+      return g.group === "nodes" ? (t = g.data) == null ? void 0 : t.id : ((m = g.data) == null ? void 0 : m.source) + "-" + ((u = g.data) == null ? void 0 : u.target);
     }).filter(Boolean)) || []
-  ), { nodes: r = [], links: p = [] } = c || {}, y = [], k = (g) => {
+  ), { nodes: r = [], links: p = [] } = c || {}, y = [], x = (g) => {
     g.forEach((t) => {
-      var u, m;
+      var m, u;
       if (!l.has(t.id)) {
-        const v = (u = t.properties) == null ? void 0 : u.type, f = t.type, E = t.label.split("#").pop();
-        let w = -1;
-        if (!f && v === "uri")
-          w = t.image || L[0];
-        else if (!a.includes(f) && v === "uri") {
+        const C = (m = t.properties) == null ? void 0 : m.type, f = t.type, E = t.label.split("#").pop();
+        let k = -1;
+        if (!f && C === "uri")
+          k = t.image || L[0];
+        else if (!a.includes(f) && C === "uri") {
           a.push(f);
           const O = a.indexOf(f);
-          w = t.image || L[O] || L[0], d = { ...d, [f]: { ...d[f], img: w } };
-        } else v === "uri" && f && (w = (m = d[f]) == null ? void 0 : m.img);
+          k = t.image || L[O] || L[0], d = { ...d, [f]: { ...d[f], img: k } };
+        } else C === "uri" && f ? k = (u = d[f]) == null ? void 0 : u.img : C === "typed-literal" && (k = B);
         const S = {
           ...t,
           name: E,
-          "properties-type": v,
-          image: i.includes(E) ? B : w,
+          "properties-type": C,
+          image: i.includes(E) ? U : k,
           baseWidth: 80,
           // 保存基础宽度
           baseHeight: 80
@@ -66,17 +67,17 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
   };
   ((g) => {
     g.forEach((t) => {
-      const { label: u } = t, m = `${t.source}-${t.target}`;
-      l.has(m) || y.push({ group: "edges", data: { ...t, name: u, zktype: e } });
+      const { label: m } = t, u = `${t.source}-${t.target}`;
+      l.has(u) || y.push({ group: "edges", data: { ...t, name: m, zktype: e } });
     });
-  })(p), k(r);
-  const { typeListObj: h, relationListObj: x } = G([...y, ...o]);
+  })(p), x(r);
+  const { typeListObj: h, relationListObj: w } = T([...y, ...o]);
   return {
     elements: y,
     typeListObj: h,
-    relationListObj: x
+    relationListObj: w
   };
-}, oe = (c, o) => {
+}, ae = (c, o) => {
   const s = c.current;
   if (!s) return;
   let e = {
@@ -124,16 +125,16 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
       break;
   }
   s.nodes().style(e), s.style().update();
-}, ne = async (c, { pathNodes: o, isGrayed: s = !0 }) => {
+}, se = async (c, { pathNodes: o, isGrayed: s = !0 }) => {
   const e = c.current;
   if (!e)
     return;
   if ((o == null ? void 0 : o.length) < 2) {
-    C.warning("请至少设置 2 个路径节点！");
+    v.warning("请至少设置 2 个路径节点！");
     return;
   }
   if ([...new Set(o)].length !== o.length) {
-    C.warning("路径中存在重复节点，请检查！");
+    v.warning("路径中存在重复节点，请检查！");
     return;
   }
   const d = [];
@@ -142,7 +143,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     if (i.length > 0)
       d.push(i.id());
     else {
-      e.nodes().removeClass("path-node"), e.edges().removeClass("path-edge"), C.warning(`找不到节点：${a}`);
+      e.nodes().removeClass("path-node"), e.edges().removeClass("path-edge"), v.warning(`找不到节点：${a}`);
       return;
     }
   }
@@ -151,14 +152,14 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     let a = e.collection(), i = 0, l = !0;
     const r = [];
     for (let p = 0; p < d.length - 1; p++) {
-      const y = d[p], k = d[p + 1], b = e.getElementById(y), h = e.getElementById(k), x = b.edgesWith(h).filter(function(t) {
-        return t.data("source") === y && t.data("target") === k;
+      const y = d[p], x = d[p + 1], b = e.getElementById(y), h = e.getElementById(x), w = b.edgesWith(h).filter(function(t) {
+        return t.data("source") === y && t.data("target") === x;
       }), g = h.edgesWith(b).filter(function(t) {
-        return t.data("source") === k && t.data("target") === y;
+        return t.data("source") === x && t.data("target") === y;
       });
-      if (x.length > 0 || g.length > 0) {
-        const t = x.add(g);
-        a = a.union(t).union(b).union(h), i += t.length, b.addClass("path-node"), h.addClass("path-node"), t.addClass("path-edge"), r.push(b.data("name"), h.data("name")), console.log(`找到直接连接的边：正向${x.length}条，反向${g.length}条`);
+      if (w.length > 0 || g.length > 0) {
+        const t = w.add(g);
+        a = a.union(t).union(b).union(h), i += t.length, b.addClass("path-node"), h.addClass("path-node"), t.addClass("path-edge"), r.push(b.data("name"), h.data("name")), console.log(`找到直接连接的边：正向${w.length}条，反向${g.length}条`);
       } else {
         const t = e.elements().aStar({
           root: b,
@@ -167,8 +168,8 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
         });
         if (t.found && t.path) {
           a = a.union(t.path), i += t.distance, t.path.nodes().addClass("path-node"), t.path.edges().addClass("path-edge");
-          const u = t.path.nodes().map((m) => m.data("name"));
-          r.push(...u);
+          const m = t.path.nodes().map((u) => u.data("name"));
+          r.push(...m);
         } else {
           l = !1, console.log(`节点 ${o[p]} 和 ${o[p + 1]} 之间没有路径`);
           break;
@@ -179,11 +180,11 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
       const p = a.nodes(), y = a.edges();
       p.addClass("path-node"), y.addClass("path-edge"), s && (e.nodes().not(p).addClass("grayed"), e.edges().not(y).addClass("grayed"));
     } else
-      C.warning("无法找到完整的路径！");
+      v.warning("无法找到完整的路径！");
   } catch (a) {
-    console.error(2e3, "计算路径时出错：", a), C.warning("计算路径时出错，请重试！");
+    console.error(2e3, "计算路径时出错：", a), v.warning("计算路径时出错，请重试！");
   }
-}, T = (c) => {
+}, W = (c) => {
   const o = c.nodes().map((n) => ({
     data: n.data(),
     position: n.position(),
@@ -201,10 +202,10 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     }
   }));
   return { nodes: o, edges: s };
-}, ae = (c) => {
-  const o = T(c), s = new Blob([JSON.stringify(o, null, 2)], { type: "application/json" }), e = URL.createObjectURL(s), n = document.createElement("a");
+}, le = (c) => {
+  const o = W(c), s = new Blob([JSON.stringify(o, null, 2)], { type: "application/json" }), e = URL.createObjectURL(s), n = document.createElement("a");
   n.href = e, n.download = `graph-data-${Date.now()}.json`, n.click(), URL.revokeObjectURL(e);
-}, se = [
+}, re = [
   {
     label: "网络布局",
     key: "cose-bilkent"
@@ -229,7 +230,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     label: "同心圆布局",
     key: "concentric"
   }
-], le = [
+], ie = [
   {
     label: "查询节点",
     key: "query",
@@ -245,7 +246,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     key: "path",
     func: "pathAnalysis"
   }
-], re = [
+], ce = [
   {
     label: "全选",
     key: "all"
@@ -262,7 +263,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     label: "框选模式",
     key: "box"
   }
-], ie = [
+], de = [
   {
     label: "下载JSON",
     key: "downloadJson"
@@ -287,7 +288,7 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
     label: "下载PNG",
     key: "downloadPng"
   }
-], ce = [
+], ge = [
   {
     label: "居中",
     key: "center"
@@ -310,15 +311,15 @@ const L = [j, I, P, $, D, J, N, R, q, A], G = (c) => {
   }
 ];
 export {
-  re as choiceConfig,
-  ae as donwnGraphData,
-  ie as downloadData,
-  T as getCyData,
-  ne as handleCalcPath,
+  ce as choiceConfig,
+  le as donwnGraphData,
+  de as downloadData,
+  W as getCyData,
+  se as handleCalcPath,
   L as imageMap,
-  se as layoutCongig,
-  le as linkAnalysis,
-  te as resDetailData,
-  oe as textLayout,
-  ce as textPositionConfig
+  re as layoutCongig,
+  ie as linkAnalysis,
+  ne as resDetailData,
+  ae as textLayout,
+  ge as textPositionConfig
 };

package/lib/style.css

@@ -1 +1 @@
-.cytoscape-container{width:100%;height: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:100%}.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}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:4px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.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}.graph-bar .graph-bar-expand-wrapper-vertical{overflow:hidden;max-height:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper{overflow:hidden;max-width:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper.collapsed{max-width:0;opacity:0;margin:0!important}.graph-bar .graph-bar-expand-wrapper-vertical.collapsed-vertical{max-height:0;opacity:0;margin:0!important}.graph-bar .graph-bar-min:not(.graph-bar-min-vertical) .graph-bar-expand-wrapper{display:flex;align-items:center;gap:10px;margin-left:10px;margin-right:10px}.graph-bar.graph-bar-vertical{flex-direction:column}.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column;align-items:flex-start;position:relative;padding-bottom:0!important}.graph-bar.graph-bar-vertical .graph-bar-expand-wrapper{flex-direction:column;width:100%}.graph-bar.graph-bar-vertical .cursor{align-self:flex-end;flex-shrink:0;position:relative}.graph-bar.graph-bar-vertical .cursor:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.graph-bar .bar-item{color:#999;font-size:12px;margin:8px 0}.graph-bar .oprate-btn{width:76px;color:#145afd;border-right:1px solid #f0f0f0}.graph-bar .oprate-btn-vertical{width:76px;padding:10px 0;color:#145afd;border-top:1px solid #f0f0f0}.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}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.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)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}
+.cytoscape-container{width:100%;height: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:100%}.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}.opacity-30{opacity:.3}.cursor{cursor:pointer}.my-4px{margin:4px 0}.z-10{z-index:10}.hidden{display:none}.w-20px{width:20px}.h-100{height:100%}.rounded-50{border-radius:10%}.relative{position:relative}.absolute{position:absolute}.w-100{width:100%}.graph-bar{position:absolute;display:flex;align-items:center;z-index:10}.graph-bar .graph-bar-min-vertical{padding:0!important}.graph-bar .graph-bar-min{display:flex;background:#fff;padding:4px;box-shadow:0 4px 20px #100dae33;border-radius:6px;flex-wrap:nowrap;gap:10px;width:auto;white-space:nowrap}.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}.graph-bar .graph-bar-expand-wrapper-vertical{overflow:hidden;max-height:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper{overflow:hidden;max-width:1000px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out;opacity:1}.graph-bar .graph-bar-expand-wrapper.collapsed{max-width:0;opacity:0;margin:0!important}.graph-bar .graph-bar-expand-wrapper-vertical.collapsed-vertical{max-height:0;opacity:0;margin:0!important}.graph-bar .graph-bar-min:not(.graph-bar-min-vertical) .graph-bar-expand-wrapper{display:flex;align-items:center;gap:10px;margin-left:10px;margin-right:10px}.graph-bar.graph-bar-vertical{flex-direction:column}.graph-bar.graph-bar-vertical .graph-bar-min{flex-direction:column;align-items:flex-start;position:relative;padding-bottom:0!important}.graph-bar.graph-bar-vertical .graph-bar-expand-wrapper{flex-direction:column;width:100%}.graph-bar.graph-bar-vertical .cursor{align-self:flex-end;flex-shrink:0;position:relative}.graph-bar.graph-bar-vertical .cursor:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}.graph-bar.graph-bar-vertical .grap-menu-dropdown{top:auto;left:60px;right:auto}.graph-bar .bar-item{color:#999;font-size:12px;margin:8px 0}.graph-bar .oprate-btn{width:76px;color:#145afd;border-right:1px solid #f0f0f0}.graph-bar .oprate-btn-vertical{width:76px;padding:10px 0;color:#145afd;border-top:1px solid #f0f0f0}.gtaph-statics{right:0;z-index:1;background:#fff;padding:20px;box-sizing:border-box;border-radius:10px;width:200px;box-shadow:0 4px 20px #0000003b}.hove-active{cursor:pointer;font-size:14px}.hove-active:hover{color:#145afd}.setting-form{display:flex;flex-direction:column;height:100%}.setting-form .setting-form-content{flex:1;overflow-y:auto;padding:16px}.setting-form .setting-form-footer{position:sticky;bottom:0;background:#fff;padding:16px;border-top:1px solid #f0f0f0;margin-top:auto}.setting-form .setting-form-footer .ant-form-item{margin-bottom:0}.static-wraper{font-size:12px;color:#666}.color-333{color:#333}.rounded-50{border-radius:50%!important}.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)}.drawer-wraper,.knowledge-card-drawer{padding-bottom:20px}.drawer-wraper .title,.knowledge-card-drawer .title{font-weight:700;font-size:14px;color:#3d3d3d;position:relative;padding-left:8px}.drawer-wraper .title:before,.knowledge-card-drawer .title:before{position:absolute;left:0;transform:translateY(-50%);top:50%;content:"";width:3px;height:17px;background:#145afd}.drawer-wraper .graph-item,.knowledge-card-drawer .graph-item{height:26px;border-bottom:1px solid #E5E5E5;background:#edf3fe}.drawer-wraper .graph-item:hover,.knowledge-card-drawer .graph-item:hover{background:#edf3fe}.drawer-wraper .noraml-type,.knowledge-card-drawer .noraml-type{font-size:14px;color:#145afd;line-height:26px;text-align:center;border-right:1px solid #E5E5E5}.drawer-wraper .noraml-text,.knowledge-card-drawer .noraml-text{font-size:14px;color:#333;line-height:26px}.drawer-wraper .selected-item,.knowledge-card-drawer .selected-item{background:#edf3fe;color:#1890ff}.drawer-wraper .selected-item .noraml-type,.knowledge-card-drawer .selected-item .noraml-type{background:#347bfc;color:#fff}.drawer-wraper .drawer-card-title,.knowledge-card-drawer .drawer-card-title{font-weight:600;font-size:14px;color:#333;position:relative;padding-bottom:10px;margin:15px 0 10px;cursor:pointer}.drawer-wraper .drawer-card-title:hover,.knowledge-card-drawer .drawer-card-title:hover{color:#145afd}.drawer-wraper .drawer-card-title:after,.knowledge-card-drawer .drawer-card-title:after{content:"";position:absolute;border-bottom:1px solid #DFDFDF;width:100%;left:0;bottom:0}.drawer-wraper .drawer-card-title:before,.knowledge-card-drawer .drawer-card-title:before{content:"";position:absolute;border-bottom:1px solid #145AFD;width:64px;left:0;bottom:0;z-index:1}.collapse-wrap{border-color:#dfdfdf;border-radius:0;height:calc(100vh - 480px);overflow-y:auto}.collapse-wrap .ant-collapse-header{padding:9px 10px!important;background:#fff}.collapse-wrap .ant-collapse-item{border-color:#dfdfdf}.collapse-wrap .ant-collapse-title{font-size:14px;font-weight:700;color:#3d3d3d}.collapse-wrap .ant-collapse-body{max-height:calc(100vh - 550px);overflow-y:auto;width:298px;padding:0 16px 16px!important}.collapse-wrap .ant-collapse-body .ant-card-body{padding:0!important}.collapse-wrap .ant-collapse-body .ant-card{border:none}.property-section-wraper .section-item{display:flex;margin-top:4px}.property-section-wraper .detail-label{color:#333;font-size:14px;white-space:nowrap;flex-shrink:0}.property-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-wraper .video-item{height:185px;position:relative;background:#333;border-radius:6px}.video-wraper .video-item-video{width:100%;height:100%;border-radius:6px;object-fit:cover}.relation-section-wraper{display:flex;flex-wrap:wrap;gap:10px}.relation-section-wraper .group{width:100%}.relation-section-wraper .section-card{width:100%;height:100%;border:1px solid #DFDFDF}.relation-section-wraper .section-title{margin-bottom:7px}.relation-section-wraper .entity-name-list{font-size:16px;font-weight:700}.relation-section-wraper .view-details-btn{color:#145afd}.relation-section-wraper .detail-item-tag{background-color:#e6f2ff;font-size:14px;border:1px solid #bdf;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#1082fe;margin-right:3px}.relation-section-wraper .detail-item-tag1{background-color:#fff5df;font-size:14px;border:1px solid #FFE0B8;border-top-left-radius:10px;border-bottom-right-radius:10px;padding:0 13px;color:#ff9418}.relation-section-wraper .detail-item-list{margin-bottom:3px}.relation-section-wraper .detail-label{color:#676a6c;font-size:14px;white-space:nowrap;flex-shrink:0}.relation-section-wraper .detail-value{color:#383838;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relation-section-wraper .mb-18px{margin-bottom:18px}.knowledge-card-click{height:100%;overflow:hidden}.knowledge-card-click .drawer-card-title2{font-weight:700;flex-wrap:nowrap;padding-bottom:10px;border-bottom:1px solid #e4e7ed;cursor:pointer;color:#333;margin:14px 0}.knowledge-card-click .drawer-card-title2:hover,.knowledge-card-click .drawer-card-title2.active{color:#145afd}.knowledge-card-click .card-item-click{flex-shrink:0;margin-right:10px;border-right:1px solid #e4e7ed;padding-right:10px;height:100%;background:#fff}.knowledge-card-click .knowledge-card-content{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.knowledge-card-click .knowledge-card-content::-webkit-scrollbar{display:none}

package/package.json

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

package/lib/index.es37.js

@@ -1,66 +0,0 @@
-import { jsxs as c, jsx as r, Fragment as o } from "react/jsx-runtime";
-import N from "./index.es39.js";
-import k from "./index.es40.js";
-import y from "./index.es41.js";
-import C from "./index.es42.js";
-import S from "./index.es43.js";
-import v from "./index.es44.js";
-import { Row as x, Col as f, Empty as q } from "antd";
-/* empty css           */
-const i = (e) => {
-  const n = document.getElementById(e);
-  if (n) {
-    const d = n.closest(".knowledge-card-content");
-    d && d.scrollTo({
-      top: n.offsetTop - 20,
-      behavior: "smooth"
-    });
-  }
-}, K = ({ detailData: e = {}, drawerInfo: n = {}, loading: d }) => {
-  var t, l, s, m, a, p, h, u, g, w;
-  return /* @__PURE__ */ c(x, { className: "knowledge-card-click", wrap: !1, children: [
-    /* @__PURE__ */ c(f, { flex: "80px", className: "card-item-click", children: [
-      e.property && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-property"), children: "知识详情" }),
-      ((t = e.document) == null ? void 0 : t.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-document"), children: "关联文档" }),
-      ((l = e.image) == null ? void 0 : l.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-image"), children: "关联图片" }),
-      ((s = e.video) == null ? void 0 : s.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-video"), children: "关联视频" }),
-      ((m = e.audio) == null ? void 0 : m.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-audio"), children: "关联音频" }),
-      ((a = e.relation) == null ? void 0 : a.length) > 0 && /* @__PURE__ */ r("p", { className: "drawer-card-title2", onClick: () => i("section-relation"), children: "关联知识" })
-    ] }),
-    /* @__PURE__ */ c(f, { flex: "auto", className: "knowledge-card-content", children: [
-      e.property ? /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-property", children: "知识详情" }),
-        /* @__PURE__ */ r(
-          N,
-          {
-            properties: e.property || [],
-            excludedKeys: ["id"]
-          }
-        )
-      ] }) : !d && /* @__PURE__ */ r(q, {}),
-      ((p = e.document) == null ? void 0 : p.length) > 0 && /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-document", children: "关联文档" }),
-        /* @__PURE__ */ r(k, { documents: e.document, source: "qa-card" })
-      ] }),
-      ((h = e.image) == null ? void 0 : h.length) > 0 && /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-image", children: "关联图片" }),
-        /* @__PURE__ */ r(y, { images: e.image, source: "qa-card" })
-      ] }),
-      ((u = e.video) == null ? void 0 : u.length) > 0 && /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-video", children: "关联视频" }),
-        /* @__PURE__ */ r(C, { videos: e.video, source: "qa-card" })
-      ] }),
-      ((g = e.audio) == null ? void 0 : g.length) > 0 && /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-audio", children: "关联音频" }),
-        /* @__PURE__ */ r(S, { audios: e.audio, source: "qa-card" })
-      ] }),
-      ((w = e.relation) == null ? void 0 : w.length) > 0 && /* @__PURE__ */ c(o, { children: [
-        /* @__PURE__ */ r("p", { className: "drawer-card-title", id: "section-relation", children: "关联知识" }),
-        /* @__PURE__ */ r(v, { relations: e.relation, kgIds: n.kgId, source: "qa-card" })
-      ] })
-    ] })
-  ] });
-};
-export {
-  K as default
-};