react-kggraph 0.0.2 → 0.0.4

package/lib/{index39.esm.js → index36.es.js}

@@ -1,152 +1,150 @@
-import { jsonStringify as e } from "./index16.esm.js";
-import { handleCalcPath as t, resDetailData as n } from "./index17.esm.js";
-import { GraphProvider as r } from "./index18.esm.js";
-import { coseBilkentLayout as i, fixNodesToEdges as a } from "./index19.esm.js";
-import { require_jsx_runtime as o } from "./index23.esm.js";
-import s from "./index30.esm.js";
-/* empty css            */
-import { stepNext as c } from "./index32.esm.js";
-import { edgeNodeStyles as l } from "./index33.esm.js";
-import { menuItemsConfig as u } from "./index34.esm.js";
-import d from "./index36.esm.js";
-import f from "./index37.esm.js";
-import p from "./index38.esm.js";
-import { useEffect as m, useRef as h, useState as g } from "react";
-import _ from "cytoscape";
-import v from "cytoscape-cose-bilkent";
-import y from "cytoscape-cise";
-import b from "cytoscape-fcose";
-import x from "storm-layout";
-import { message as S } from "antd";
-import C from "cytoscape-layout-utilities";
-//#region src/components/Graph/index.tsx
-var w = o();
-_.use(C), _.use(y), _.use(b), _.use(x), _.use(v);
-var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [], graphInfo: x }) => {
-	let C = h(null), [T, E] = g([]), D = h(null), O = h(null), [k, A] = g(!1), [j, M] = g({}), [N, P] = g({}), [F, I] = g("cose-bilkent"), L = h(null), R = h(null), [z, B] = g(["", ""]), [V, H] = g({
+import { jsonStringify as e } from "./index16.es.js";
+import { handleCalcPath as t, resDetailData as n } from "./index17.es.js";
+import { GraphProvider as r } from "./index18.es.js";
+import { coseBilkentLayout as i, fixNodesToEdges as a } from "./index19.es.js";
+import o from "./index27.es.js";
+/* empty css           */
+import { stepNext as s } from "./index29.es.js";
+import { edgeNodeStyles as c } from "./index30.es.js";
+import { menuItemsConfig as l } from "./index31.es.js";
+import u from "./index33.es.js";
+import d from "./index34.es.js";
+import f from "./index35.es.js";
+import { useEffect as p, useRef as m, useState as h } from "react";
+import g from "cytoscape";
+import _ from "cytoscape-cose-bilkent";
+import v from "cytoscape-cise";
+import y from "cytoscape-fcose";
+import b from "storm-layout";
+import { message as x } from "antd";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import w from "cytoscape-layout-utilities";
+g.use(w), g.use(v), g.use(y), g.use(b), g.use(_);
+var T = ({ data: _, getAllGraphData: v, searchType: y, highPathAnalysis: b = [], graphInfo: w }) => {
+	let T = m(null), [E, D] = h([]), O = m(null), k = m(null), [A, j] = h(!1), [M, N] = h({}), [P, F] = h({}), [I, L] = h("cose-bilkent"), R = m(null), z = m(null), [B, V] = h(["", ""]), [H, U] = h({
 		visible: !1,
 		x: 0,
 		y: 0,
 		targetNode: null,
 		bgColor: ""
-	}), [U, W] = g({
+	}), [W, G] = h({
 		visible: !1,
 		x: 0,
 		y: 0,
 		content: ""
-	}), G = u({
-		cyRef: D,
-		setContextMenu: H,
-		onPathAnalysis: O.current?.onPathAnalysis,
-		setPathNodes: B
+	}), K = l({
+		cyRef: O,
+		setContextMenu: U,
+		onPathAnalysis: k.current?.onPathAnalysis,
+		setPathNodes: V
 	});
-	m(() => {
-		b?.length > 1 && t(D, {
+	p(() => {
+		b?.length > 1 && t(O, {
 			pathNodes: b,
 			isGrayed: !1
 		});
-	}, [e(b), e(T)]), m(() => {
+	}, [e(b), e(E)]), p(() => {
 		v?.({
-			graphData: T,
-			nodeStatic: j,
-			relationStatic: N
+			graphData: E,
+			nodeStatic: M,
+			relationStatic: P
 		});
 	}, [
-		e(T),
-		e(j),
-		e(N)
-	]), m(() => {
-		if (!C.current || D.current) return;
-		let { elements: e, typeListObj: t, relationListObj: r } = n(o, {
-			typeObj: j,
-			relationObj: N,
-			graphInfo: x
+		e(E),
+		e(M),
+		e(P)
+	]), p(() => {
+		if (!T.current || O.current) return;
+		let { elements: e, typeListObj: t, relationListObj: r } = n(_, {
+			typeObj: M,
+			relationObj: P,
+			graphInfo: w
 		});
-		M(t), E(e), P(r), document.addEventListener("contextmenu", function(e) {
+		N(t), D(e), F(r), document.addEventListener("contextmenu", function(e) {
 			e.preventDefault();
 		});
-		let s = _({
-			container: C.current,
+		let o = g({
+			container: T.current,
 			elements: e,
-			style: l({ elements: e }),
+			style: c({ elements: e }),
 			autounselectify: !1,
 			autolock: !1,
 			layout: { name: "preset" }
 		});
-		if (D.current = s, x?.searchNodes?.length === 2) a(s, x.searchNodes[0], x.searchNodes[1]);
+		if (O.current = o, w?.searchNodes?.length === 2) a(o, w.searchNodes[0], w.searchNodes[1]);
 		else {
-			let e = s.layout(i());
+			let e = o.layout(i());
 			e.run(), e.on("layoutstop", () => {
-				s.fit(void 0, 50), s.center();
+				o.fit(void 0, 50), o.center();
 			});
 		}
-		return s.on("mouseover", "edge", (e) => {
+		return o.on("mouseover", "edge", (e) => {
 			e.target.hasClass("path-edge") || e.target.style({
 				"line-color": "#1890ff",
 				"target-arrow-color": "#1890ff",
 				opacity: .8
 			});
-		}), s.on("mouseout", "edge", (e) => {
+		}), o.on("mouseout", "edge", (e) => {
 			e.target.hasClass("path-edge") || e.target.style({
 				"line-color": "#ccc",
 				"target-arrow-color": "#ccc",
 				opacity: 1
 			});
-		}), s.on("mouseover", "node", (e) => {
+		}), o.on("mouseover", "node", (e) => {
 			let t = e.target;
 			t.hasClass("selected") || t.addClass("hover");
-		}), s.on("mouseover", "node", (e) => {
+		}), o.on("mouseover", "node", (e) => {
 			let t = e.target, n = t.renderedPosition(), r = t.data("name") || "";
-			t.addClass("hover"), W({
+			t.addClass("hover"), G({
 				visible: !0,
 				x: n.x,
 				y: n.y - 60,
 				content: r
 			});
-		}), s.on("mouseout", "node", (e) => {
-			e.target.removeClass("hover"), W((e) => ({
+		}), o.on("mouseout", "node", (e) => {
+			e.target.removeClass("hover"), G((e) => ({
 				...e,
 				visible: !1
 			}));
-		}), s.on("cxttap", "node", (e) => {
+		}), o.on("cxttap", "node", (e) => {
 			e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), e.originalEvent && (e.originalEvent.preventDefault(), e.originalEvent.stopPropagation(), e.originalEvent.stopImmediatePropagation());
 			let t = e.target, n = t.renderedPosition();
-			console.log("renderedPos:::", t.data(), t.style("background-color")), H({
+			console.log("renderedPos:::", t.data(), t.style("background-color")), U({
 				visible: !0,
 				x: n.x - 90,
 				y: n.y - 90,
 				targetNode: t,
 				bgColor: t.style("background-color")
 			});
-		}), D.current = s, s.on("click", "node", (e) => {
+		}), O.current = o, o.on("click", "node", (e) => {
 			let t = e.target;
-			s.nodes().removeClass("selected grayed highlighted"), s.edges().removeClass("selected grayed highlighted"), t.addClass("selected");
+			o.nodes().removeClass("selected grayed highlighted"), o.edges().removeClass("selected grayed highlighted"), t.addClass("selected");
 			let n = t.neighborhood().nodes().add(t), r = n.edgesWith(n);
-			console.log("cy.nodes().not(relatedNodes):::", n), s.nodes().not(n).addClass("grayed"), s.edges().not(r).addClass("grayed"), n.addClass("highlighted"), r.addClass("highlighted");
-		}), s.on("tap", (e) => {
-			e.target === s && (H((e) => ({
+			console.log("cy.nodes().not(relatedNodes):::", n), o.nodes().not(n).addClass("grayed"), o.edges().not(r).addClass("grayed"), n.addClass("highlighted"), r.addClass("highlighted");
+		}), o.on("tap", (e) => {
+			e.target === o && (U((e) => ({
 				...e,
 				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"));
+			})), o.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), o.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
 		}), () => {
-			D.current &&= (D.current.destroy(), null);
+			O.current &&= (O.current.destroy(), null);
 		};
 	}, []);
-	let K = async (e) => {
-		let { id: t, kgId: r } = e, a = D.current;
+	let q = async (e) => {
+		let { id: t, kgId: r } = e, a = O.current;
 		if (!a) return;
 		let o = a.$(`#${t}`);
 		if (!o || o.length === 0) {
 			console.error("当前节点不存在");
 			return;
 		}
-		let s = a.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === t || n.data("idLabel") === `${t}-${n.data("name")}`) && n.data("zktype") === e.zktype : !1);
-		if (s.length > 0) {
-			let r = s.map((e) => e.id()), i = s.connectedEdges(), c = a.edges().filter((e) => e.data("source") === t && r.includes(e.data("target"))), l = a.edges().filter((e) => e.data("appendedBy") === t), u = i.merge(c).merge(l).filter((t) => t.data().zktype === e.zktype);
-			s.animate({ style: { opacity: 0 } }, {
+		let c = a.nodes().filter((n) => n.data("parentId") ? (n.data("parentId") === t || n.data("idLabel") === `${t}-${n.data("name")}`) && n.data("zktype") === e.zktype : !1);
+		if (c.length > 0) {
+			let r = c.map((e) => e.id()), i = c.connectedEdges(), s = a.edges().filter((e) => e.data("source") === t && r.includes(e.data("target"))), l = a.edges().filter((e) => e.data("appendedBy") === t), u = i.merge(s).merge(l).filter((t) => t.data().zktype === e.zktype);
+			c.animate({ style: { opacity: 0 } }, {
 				duration: 200,
 				complete: () => {
-					a.remove(s), a.remove(u), E((i) => {
+					a.remove(c), a.remove(u), D((i) => {
 						let a = i.filter((n) => {
 							let i = n.data.zktype;
 							if (n.group === "nodes" && r.includes(n.data?.id) && i && i === e.zktype) return !1;
@@ -164,7 +162,7 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 							relationObj: {},
 							isOnlyStatic: !0
 						});
-						return M(o), P(s), a;
+						return N(o), F(s), a;
 					}), o.data("appendedNodes", []), o.data("isExpanded", !1);
 				}
 			}), setTimeout(() => {
@@ -172,34 +170,34 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 			}, 300);
 		} else {
 			try {
-				A(!0), S.open({
+				j(!0), x.open({
 					type: "loading",
 					content: "正在展开...",
 					duration: 0
 				});
-				let { elements: s, typeListObj: l, relationListObj: u } = n((await c({
+				let { elements: c, typeListObj: l, relationListObj: u } = n((await s({
 					uri: t,
 					queryType: 1,
 					kgId: r,
 					zktype: e.zktype
 				})).data, {
-					graphData: T,
-					typeObj: j,
-					relationObj: N,
+					graphData: E,
+					typeObj: M,
+					relationObj: P,
 					zktype: e.zktype
 				});
-				if (M(l), P(u), console.log(555e3, s), !(s?.length > 0)) {
-					S.warning("暂无数据"), setTimeout(() => {
-						S.destroy();
+				if (N(l), F(u), console.log(555e3, c), !(c?.length > 0)) {
+					x.warning("暂无数据"), setTimeout(() => {
+						x.destroy();
 					}, 2e3);
 					return;
 				}
-				if (s?.length > 0) {
+				if (c?.length > 0) {
 					let n = a.layoutUtilities({
 						...i(),
 						idealEdgeLength: 80,
 						offset: 30
-					}), r = s.map((n) => n.group === "nodes" ? {
+					}), r = c.map((n) => n.group === "nodes" ? {
 						...n,
 						style: {
 							opacity: 0,
@@ -223,9 +221,9 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 							appendedBy: t,
 							zktype: e.zktype
 						}
-					}), c = a.add(r);
-					E([...T, ...r]);
-					let l = c.filter(":node"), u = l.map((e) => e.id());
+					}), s = a.add(r);
+					D([...E, ...r]);
+					let l = s.filter(":node"), u = l.map((e) => e.id());
 					o.data("appendedNodes", u), o.data("isExpanded", !0);
 					let d = a.nodes().difference(l);
 					d.forEach((e) => e.lock()), n.placeNewNodes(l), a.layout({
@@ -258,22 +256,22 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 			} catch (e) {
 				console.error("请求接口失败:", e);
 			}
-			A(!1), S.destroy();
+			j(!1), x.destroy();
 		}
-		H({ visible: !1 });
-	}, q = {
+		U({ visible: !1 });
+	}, J = {
 		expanded: "typed-literal",
 		contract: "uri"
-	}, J = (e) => {
-		if (console.log("handleMenuAction:::", e), V.targetNode) {
-			let t = e.ids, n = V.targetNode.data();
-			if (["expanded", "contract"].includes(t)) K({
+	}, Y = (e) => {
+		if (console.log("handleMenuAction:::", e), H.targetNode) {
+			let t = e.ids, n = H.targetNode.data();
+			if (["expanded", "contract"].includes(t)) q({
 				kgId: 3,
 				...n,
-				zktype: q[t]
+				zktype: J[t]
 			});
 			else if (t === "nodeInfo") {
-				let e = V.targetNode, t = {
+				let e = H.targetNode, t = {
 					id: e.id(),
 					data: e.data(),
 					position: e.position(),
@@ -283,12 +281,12 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 					classes: e.classes(),
 					style: e.style()
 				};
-				L.current.open(t);
+				R.current.open(t);
 			} else if (t === "knowledgeCard") {
-				let e = V.targetNode;
-				R.current.open(e.data());
+				let e = H.targetNode;
+				z.current.open(e.data());
 			}
-			e.action(V.targetNode), H({
+			e.action(H.targetNode), U({
 				visible: !1,
 				x: 0,
 				y: 0,
@@ -296,41 +294,41 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 			});
 		}
 	};
-	return /* @__PURE__ */ (0, w.jsx)(r, {
+	return /* @__PURE__ */ S(r, {
 		value: {
-			pathNodes: z,
-			setPathNodes: B,
-			graphInfo: x,
-			graphData: T,
-			layoutType: F,
-			setLayoutType: I
+			pathNodes: B,
+			setPathNodes: V,
+			graphInfo: w,
+			graphData: E,
+			layoutType: I,
+			setLayoutType: L
 		},
-		children: /* @__PURE__ */ (0, w.jsxs)("div", {
+		children: /* @__PURE__ */ C("div", {
 			className: "cytoscape-container",
 			style: { position: "relative" },
 			children: [
-				/* @__PURE__ */ (0, w.jsx)("div", { className: "btn-group" }),
-				/* @__PURE__ */ (0, w.jsx)(s, {
-					ref: O,
-					cyRef: D,
-					graphInfo: x,
+				/* @__PURE__ */ S("div", { className: "btn-group" }),
+				/* @__PURE__ */ S(o, {
+					ref: k,
+					cyRef: O,
+					graphInfo: w,
 					initNodeScale: 1,
-					cyContainerRef: C,
-					typeObj: j,
-					relationObj: N
+					cyContainerRef: T,
+					typeObj: M,
+					relationObj: P
 				}),
-				/* @__PURE__ */ (0, w.jsxs)("div", {
+				/* @__PURE__ */ C("div", {
 					style: { position: "relative" },
 					children: [
-						/* @__PURE__ */ (0, w.jsx)("div", {
-							ref: C,
+						/* @__PURE__ */ S("div", {
+							ref: T,
 							className: "cy-container"
 						}),
-						V.visible && V.targetNode && /* @__PURE__ */ (0, w.jsx)("div", {
+						H.visible && H.targetNode && /* @__PURE__ */ S("div", {
 							style: {
 								position: "absolute",
-								left: `${V.x}px`,
-								top: `${V.y}px`,
+								left: `${H.x}px`,
+								top: `${H.y}px`,
 								zIndex: 1e4,
 								minWidth: "120px",
 								padding: "4px 0",
@@ -340,17 +338,17 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 								overflow: "hidden"
 							},
 							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ (0, w.jsx)(d, {
-								items: G,
-								centerImage: V?.targetNode?.data().image,
-								onClick: (e) => J(e)
+							children: /* @__PURE__ */ S(u, {
+								items: K,
+								centerImage: H?.targetNode?.data().image,
+								onClick: (e) => Y(e)
 							})
 						}),
-						U.visible && /* @__PURE__ */ (0, w.jsx)("div", {
+						W.visible && /* @__PURE__ */ S("div", {
 							style: {
 								position: "absolute",
-								left: `${U.x}px`,
-								top: `${U.y}px`,
+								left: `${W.x}px`,
+								top: `${W.y}px`,
 								transform: "translateX(-50%)",
 								backgroundColor: "rgba(0, 0, 0, 0.85)",
 								color: "#fff",
@@ -364,12 +362,12 @@ var T = ({ data: o, getAllGraphData: v, searchType: y, highPathAnalysis: b = [],
 								overflow: "hidden",
 								textOverflow: "ellipsis"
 							},
-							children: U.content
+							children: W.content
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, w.jsx)(f, { ref: L }),
-				/* @__PURE__ */ (0, w.jsx)(p, { ref: R })
+				/* @__PURE__ */ S(d, { ref: R }),
+				/* @__PURE__ */ S(f, { ref: z })
 			]
 		})
 	});

package/lib/index37.es.js

@@ -0,0 +1,12 @@
+import { Button as e } from "antd";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Demo.tsx
+function n({ children: n, onClick: r }) {
+	return /* @__PURE__ */ t(e, {
+		onClick: r,
+		type: "primary",
+		children: n
+	});
+}
+//#endregion
+export { n as default };

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "react-kggraph",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A knowledge graph visualization component based on Cytoscape",
   "type": "module",
-  "main": "./lib/index.cjs.js",
-  "module": "./lib/index.esm.js",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
   "exports": {
     ".": {
-      "import": "./lib/index.esm.js",
-      "require": "./lib/index.cjs.js"
+      "import": "./lib/index.es.js"
     }
   },
   "files": [
@@ -24,8 +23,14 @@
   "license": "MIT",
   "peerDependencies": {
     "antd": ">=5.0.0",
+    "cytoscape": "^3.33.3",
+    "cytoscape-cise": "^2.0.1",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.2.0",
+    "cytoscape-layout-utilities": "^1.1.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "storm-layout": "^1.1.5"
   },
   "scripts": {
     "dev": "vite",

package/lib/index.cjs.js

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./index39.cjs.js`),t=require(`./index40.cjs.js`);exports.CytoscapeReact=e,exports.SearchType=t.SearchType;

package/lib/index.esm.js

@@ -1,3 +0,0 @@
-import e from "./index39.esm.js";
-import { SearchType as t } from "./index40.esm.js";
-export { e as CytoscapeReact, t as SearchType };