react-kggraph 0.0.1

package/lib/index39.cjs.js

@@ -0,0 +1 @@
+const e=require(`./index2.cjs.js`),t=require(`./index16.cjs.js`),n=require(`./index17.cjs.js`),r=require(`./index18.cjs.js`),i=require(`./index19.cjs.js`),a=require(`./index23.cjs.js`),o=require(`./index30.cjs.js`);;/* empty css             */const s=require(`./index32.cjs.js`),c=require(`./index33.cjs.js`),l=require(`./index34.cjs.js`),u=require(`./index36.cjs.js`),d=require(`./index37.cjs.js`),f=require(`./index38.cjs.js`);let p=require(`react`),m=require(`cytoscape`);m=e.__toESM(m,1);let h=require(`cytoscape-cose-bilkent`);h=e.__toESM(h,1);let g=require(`cytoscape-cise`);g=e.__toESM(g,1);let _=require(`cytoscape-fcose`);_=e.__toESM(_,1);let v=require(`storm-layout`);v=e.__toESM(v,1);let y=require(`antd`),b=require(`cytoscape-layout-utilities`);b=e.__toESM(b,1);var x=a.default;m.default.use(b.default),m.default.use(g.default),m.default.use(_.default),m.default.use(v.default),m.default.use(h.default);var S=({data:e,getAllGraphData:a,searchType:h,highPathAnalysis:g=[],graphInfo:_})=>{let v=(0,p.useRef)(null),[b,S]=(0,p.useState)([]),C=(0,p.useRef)(null),w=(0,p.useRef)(null),[T,E]=(0,p.useState)(!1),[D,O]=(0,p.useState)({}),[k,A]=(0,p.useState)({}),[j,M]=(0,p.useState)(`cose-bilkent`),N=(0,p.useRef)(null),P=(0,p.useRef)(null),[F,I]=(0,p.useState)([``,``]),[L,R]=(0,p.useState)({visible:!1,x:0,y:0,targetNode:null,bgColor:``}),[z,B]=(0,p.useState)({visible:!1,x:0,y:0,content:``}),V=l.menuItemsConfig({cyRef:C,setContextMenu:R,onPathAnalysis:w.current?.onPathAnalysis,setPathNodes:I});(0,p.useEffect)(()=>{g?.length>1&&n.handleCalcPath(C,{pathNodes:g,isGrayed:!1})},[t.jsonStringify(g),t.jsonStringify(b)]),(0,p.useEffect)(()=>{a?.({graphData:b,nodeStatic:D,relationStatic:k})},[t.jsonStringify(b),t.jsonStringify(D),t.jsonStringify(k)]),(0,p.useEffect)(()=>{if(!v.current||C.current)return;let{elements:t,typeListObj:r,relationListObj:a}=n.resDetailData(e,{typeObj:D,relationObj:k,graphInfo:_});O(r),S(t),A(a),document.addEventListener(`contextmenu`,function(e){e.preventDefault()});let o=(0,m.default)({container:v.current,elements:t,style:c.edgeNodeStyles({elements:t}),autounselectify:!1,autolock:!1,layout:{name:`preset`}});if(C.current=o,_?.searchNodes?.length===2)i.fixNodesToEdges(o,_.searchNodes[0],_.searchNodes[1]);else{let e=o.layout(i.coseBilkentLayout());e.run(),e.on(`layoutstop`,()=>{o.fit(void 0,50),o.center()})}return o.on(`mouseover`,`edge`,e=>{e.target.hasClass(`path-edge`)||e.target.style({"line-color":`#1890ff`,"target-arrow-color":`#1890ff`,opacity:.8})}),o.on(`mouseout`,`edge`,e=>{e.target.hasClass(`path-edge`)||e.target.style({"line-color":`#ccc`,"target-arrow-color":`#ccc`,opacity:1})}),o.on(`mouseover`,`node`,e=>{let t=e.target;t.hasClass(`selected`)||t.addClass(`hover`)}),o.on(`mouseover`,`node`,e=>{let t=e.target,n=t.renderedPosition(),r=t.data(`name`)||``;t.addClass(`hover`),B({visible:!0,x:n.x,y:n.y-60,content:r})}),o.on(`mouseout`,`node`,e=>{e.target.removeClass(`hover`),B(e=>({...e,visible:!1}))}),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`)),R({visible:!0,x:n.x-90,y:n.y-90,targetNode:t,bgColor:t.style(`background-color`)})}),C.current=o,o.on(`click`,`node`,e=>{let t=e.target;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),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&&(R(e=>({...e,visible:!1})),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`))}),()=>{C.current&&=(C.current.destroy(),null)}},[]);let H=async e=>{let{id:t,kgId:r}=e,a=C.current;if(!a)return;let o=a.$(`#${t}`);if(!o||o.length===0){console.error(`当前节点不存在`);return}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(c),a.remove(u),S(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;if(n.group===`edges`&&i&&i===e.zktype){let e=Array.from(l).map(e=>{let t=e.data();return`${t.source}-${t.target}-${t.label}`}),r=n.data,i=e.includes(`${r.source}-${r.target}-${r.label}`),a=n.data?.appendedBy===t;return!i&&!a}return!0}),{typeListObj:o,relationListObj:s}=n.resDetailData({},{graphData:a,typeObj:{},relationObj:{},isOnlyStatic:!0});return O(o),A(s),a}),o.data(`appendedNodes`,[]),o.data(`isExpanded`,!1)}}),setTimeout(()=>{o.removed()||(o.style(`border-width`,``),o.style(`border-color`,``))},300)}else{try{E(!0),y.message.open({type:`loading`,content:`正在展开...`,duration:0});let{elements:c,typeListObj:l,relationListObj:u}=n.resDetailData((await s.stepNext({uri:t,queryType:1,kgId:r,zktype:e.zktype})).data,{graphData:b,typeObj:D,relationObj:k,zktype:e.zktype});if(O(l),A(u),console.log(555e3,c),!(c?.length>0)){y.message.warning(`暂无数据`),setTimeout(()=>{y.message.destroy()},2e3);return}if(c?.length>0){let n=a.layoutUtilities({...i.coseBilkentLayout(),idealEdgeLength:80,offset:30}),r=c.map(n=>n.group===`nodes`?{...n,style:{opacity:0,width:80,height:80},data:{...n.data,parentId:t,appendedBy:t,idLabel:t+`-`+n.data.label,zktype:e.zktype,isAppended:!0,baseWidth:80,baseHeight:80}}:{...n,data:{...n.data,appendedBy:t,zktype:e.zktype}}),s=a.add(r);S([...b,...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({name:`cose-bilkent`,randomize:!1,animate:!0,animationDuration:500,fit:!1,nodeRepulsion:1005e3,idealEdgeLength:100,edgeElasticity:.3,numIter:800,gravity:.6}).run(),setTimeout(()=>{d.forEach(e=>e.unlock())},2e3),l.animate({style:{opacity:1,width:20,height:30}},{duration:400,easing:`ease-out`,complete:()=>{l.style(`opacity`,``),l.style(`width`,``),l.style(`height`,``)}}),setTimeout(()=>{o.removed()||(o.style(`border-width`,``),o.style(`border-color`,``),a.center(o),a.zoom(a.zoom()))},600)}else console.log(`没有找到相关节点数据`)}catch(e){console.error(`请求接口失败:`,e)}E(!1),y.message.destroy()}R({visible:!1})},U={expanded:`typed-literal`,contract:`uri`},W=e=>{if(console.log(`handleMenuAction:::`,e),L.targetNode){let t=e.ids,n=L.targetNode.data();if([`expanded`,`contract`].includes(t))H({kgId:3,...n,zktype:U[t]});else if(t===`nodeInfo`){let e=L.targetNode,t={id:e.id(),data:e.data(),position:e.position(),degree:e.degree(),inDegree:e.degree(!0),outDegree:e.degree(!1),classes:e.classes(),style:e.style()};N.current.open(t)}else if(t===`knowledgeCard`){let e=L.targetNode;P.current.open(e.data())}e.action(L.targetNode),R({visible:!1,x:0,y:0,targetNode:null})}};return(0,x.jsx)(r.GraphProvider,{value:{pathNodes:F,setPathNodes:I,graphInfo:_,graphData:b,layoutType:j,setLayoutType:M},children:(0,x.jsxs)(`div`,{className:`cytoscape-container`,style:{position:`relative`},children:[(0,x.jsx)(`div`,{className:`btn-group`}),(0,x.jsx)(o.default,{ref:w,cyRef:C,graphInfo:_,initNodeScale:1,cyContainerRef:v,typeObj:D,relationObj:k}),(0,x.jsxs)(`div`,{style:{position:`relative`},children:[(0,x.jsx)(`div`,{ref:v,className:`cy-container`}),L.visible&&L.targetNode&&(0,x.jsx)(`div`,{style:{position:`absolute`,left:`${L.x}px`,top:`${L.y}px`,zIndex:1e4,minWidth:`120px`,padding:`4px 0`,pointerEvents:`auto`,width:`200px`,height:`200px`,overflow:`hidden`},onClick:e=>e.stopPropagation(),children:(0,x.jsx)(u.default,{items:V,centerImage:L?.targetNode?.data().image,onClick:e=>W(e)})}),z.visible&&(0,x.jsx)(`div`,{style:{position:`absolute`,left:`${z.x}px`,top:`${z.y}px`,transform:`translateX(-50%)`,backgroundColor:`rgba(0, 0, 0, 0.85)`,color:`#fff`,padding:`6px 12px`,borderRadius:`4px`,fontSize:`14px`,whiteSpace:`nowrap`,zIndex:9999,pointerEvents:`none`,maxWidth:`1000px`,overflow:`hidden`,textOverflow:`ellipsis`},children:z.content})]}),(0,x.jsx)(d.default,{ref:N}),(0,x.jsx)(f.default,{ref:P})]})})};exports.default=S;

package/lib/index39.esm.js

@@ -0,0 +1,378 @@
+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({
+		visible: !1,
+		x: 0,
+		y: 0,
+		targetNode: null,
+		bgColor: ""
+	}), [U, W] = g({
+		visible: !1,
+		x: 0,
+		y: 0,
+		content: ""
+	}), G = u({
+		cyRef: D,
+		setContextMenu: H,
+		onPathAnalysis: O.current?.onPathAnalysis,
+		setPathNodes: B
+	});
+	m(() => {
+		b?.length > 1 && t(D, {
+			pathNodes: b,
+			isGrayed: !1
+		});
+	}, [e(b), e(T)]), m(() => {
+		v?.({
+			graphData: T,
+			nodeStatic: j,
+			relationStatic: N
+		});
+	}, [
+		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
+		});
+		M(t), E(e), P(r), document.addEventListener("contextmenu", function(e) {
+			e.preventDefault();
+		});
+		let s = _({
+			container: C.current,
+			elements: e,
+			style: l({ 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]);
+		else {
+			let e = s.layout(i());
+			e.run(), e.on("layoutstop", () => {
+				s.fit(void 0, 50), s.center();
+			});
+		}
+		return s.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) => {
+			e.target.hasClass("path-edge") || e.target.style({
+				"line-color": "#ccc",
+				"target-arrow-color": "#ccc",
+				opacity: 1
+			});
+		}), s.on("mouseover", "node", (e) => {
+			let t = e.target;
+			t.hasClass("selected") || t.addClass("hover");
+		}), s.on("mouseover", "node", (e) => {
+			let t = e.target, n = t.renderedPosition(), r = t.data("name") || "";
+			t.addClass("hover"), W({
+				visible: !0,
+				x: n.x,
+				y: n.y - 60,
+				content: r
+			});
+		}), s.on("mouseout", "node", (e) => {
+			e.target.removeClass("hover"), W((e) => ({
+				...e,
+				visible: !1
+			}));
+		}), s.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({
+				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) => {
+			let t = e.target;
+			s.nodes().removeClass("selected grayed highlighted"), s.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) => ({
+				...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"));
+		}), () => {
+			D.current &&= (D.current.destroy(), null);
+		};
+	}, []);
+	let K = async (e) => {
+		let { id: t, kgId: r } = e, a = D.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 } }, {
+				duration: 200,
+				complete: () => {
+					a.remove(s), a.remove(u), E((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;
+							if (n.group === "edges" && i && i === e.zktype) {
+								let e = Array.from(l).map((e) => {
+									let t = e.data();
+									return `${t.source}-${t.target}-${t.label}`;
+								}), r = n.data, i = e.includes(`${r.source}-${r.target}-${r.label}`), a = n.data?.appendedBy === t;
+								return !i && !a;
+							}
+							return !0;
+						}), { typeListObj: o, relationListObj: s } = n({}, {
+							graphData: a,
+							typeObj: {},
+							relationObj: {},
+							isOnlyStatic: !0
+						});
+						return M(o), P(s), a;
+					}), o.data("appendedNodes", []), o.data("isExpanded", !1);
+				}
+			}), setTimeout(() => {
+				o.removed() || (o.style("border-width", ""), o.style("border-color", ""));
+			}, 300);
+		} else {
+			try {
+				A(!0), S.open({
+					type: "loading",
+					content: "正在展开...",
+					duration: 0
+				});
+				let { elements: s, typeListObj: l, relationListObj: u } = n((await c({
+					uri: t,
+					queryType: 1,
+					kgId: r,
+					zktype: e.zktype
+				})).data, {
+					graphData: T,
+					typeObj: j,
+					relationObj: N,
+					zktype: e.zktype
+				});
+				if (M(l), P(u), console.log(555e3, s), !(s?.length > 0)) {
+					S.warning("暂无数据"), setTimeout(() => {
+						S.destroy();
+					}, 2e3);
+					return;
+				}
+				if (s?.length > 0) {
+					let n = a.layoutUtilities({
+						...i(),
+						idealEdgeLength: 80,
+						offset: 30
+					}), r = s.map((n) => n.group === "nodes" ? {
+						...n,
+						style: {
+							opacity: 0,
+							width: 80,
+							height: 80
+						},
+						data: {
+							...n.data,
+							parentId: t,
+							appendedBy: t,
+							idLabel: t + "-" + n.data.label,
+							zktype: e.zktype,
+							isAppended: !0,
+							baseWidth: 80,
+							baseHeight: 80
+						}
+					} : {
+						...n,
+						data: {
+							...n.data,
+							appendedBy: t,
+							zktype: e.zktype
+						}
+					}), c = a.add(r);
+					E([...T, ...r]);
+					let l = c.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({
+						name: "cose-bilkent",
+						randomize: !1,
+						animate: !0,
+						animationDuration: 500,
+						fit: !1,
+						nodeRepulsion: 1005e3,
+						idealEdgeLength: 100,
+						edgeElasticity: .3,
+						numIter: 800,
+						gravity: .6
+					}).run(), setTimeout(() => {
+						d.forEach((e) => e.unlock());
+					}, 2e3), l.animate({ style: {
+						opacity: 1,
+						width: 20,
+						height: 30
+					} }, {
+						duration: 400,
+						easing: "ease-out",
+						complete: () => {
+							l.style("opacity", ""), l.style("width", ""), l.style("height", "");
+						}
+					}), setTimeout(() => {
+						o.removed() || (o.style("border-width", ""), o.style("border-color", ""), a.center(o), a.zoom(a.zoom()));
+					}, 600);
+				} else console.log("没有找到相关节点数据");
+			} catch (e) {
+				console.error("请求接口失败:", e);
+			}
+			A(!1), S.destroy();
+		}
+		H({ visible: !1 });
+	}, q = {
+		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({
+				kgId: 3,
+				...n,
+				zktype: q[t]
+			});
+			else if (t === "nodeInfo") {
+				let e = V.targetNode, t = {
+					id: e.id(),
+					data: e.data(),
+					position: e.position(),
+					degree: e.degree(),
+					inDegree: e.degree(!0),
+					outDegree: e.degree(!1),
+					classes: e.classes(),
+					style: e.style()
+				};
+				L.current.open(t);
+			} else if (t === "knowledgeCard") {
+				let e = V.targetNode;
+				R.current.open(e.data());
+			}
+			e.action(V.targetNode), H({
+				visible: !1,
+				x: 0,
+				y: 0,
+				targetNode: null
+			});
+		}
+	};
+	return /* @__PURE__ */ (0, w.jsx)(r, {
+		value: {
+			pathNodes: z,
+			setPathNodes: B,
+			graphInfo: x,
+			graphData: T,
+			layoutType: F,
+			setLayoutType: I
+		},
+		children: /* @__PURE__ */ (0, w.jsxs)("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,
+					initNodeScale: 1,
+					cyContainerRef: C,
+					typeObj: j,
+					relationObj: N
+				}),
+				/* @__PURE__ */ (0, w.jsxs)("div", {
+					style: { position: "relative" },
+					children: [
+						/* @__PURE__ */ (0, w.jsx)("div", {
+							ref: C,
+							className: "cy-container"
+						}),
+						V.visible && V.targetNode && /* @__PURE__ */ (0, w.jsx)("div", {
+							style: {
+								position: "absolute",
+								left: `${V.x}px`,
+								top: `${V.y}px`,
+								zIndex: 1e4,
+								minWidth: "120px",
+								padding: "4px 0",
+								pointerEvents: "auto",
+								width: "200px",
+								height: "200px",
+								overflow: "hidden"
+							},
+							onClick: (e) => e.stopPropagation(),
+							children: /* @__PURE__ */ (0, w.jsx)(d, {
+								items: G,
+								centerImage: V?.targetNode?.data().image,
+								onClick: (e) => J(e)
+							})
+						}),
+						U.visible && /* @__PURE__ */ (0, w.jsx)("div", {
+							style: {
+								position: "absolute",
+								left: `${U.x}px`,
+								top: `${U.y}px`,
+								transform: "translateX(-50%)",
+								backgroundColor: "rgba(0, 0, 0, 0.85)",
+								color: "#fff",
+								padding: "6px 12px",
+								borderRadius: "4px",
+								fontSize: "14px",
+								whiteSpace: "nowrap",
+								zIndex: 9999,
+								pointerEvents: "none",
+								maxWidth: "1000px",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: U.content
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, w.jsx)(f, { ref: L }),
+				/* @__PURE__ */ (0, w.jsx)(p, { ref: R })
+			]
+		})
+	});
+};
+//#endregion
+export { T as default };