react-kggraph 0.0.29 → 0.0.30

package/lib/index.es3.js

@@ -1,79 +1,79 @@
-import { jsx as h, jsxs as ne } from "react/jsx-runtime";
+import { jsx as m, jsxs as se } from "react/jsx-runtime";
 import { useRef as k, useState as v, useEffect as D } from "react";
-import E from "cytoscape";
-import Ee from "cytoscape-cose-bilkent";
+import N from "cytoscape";
+import Ne from "cytoscape-cose-bilkent";
 import ze from "cytoscape-cise";
-import we from "cytoscape-fcose";
+import Ee from "cytoscape-fcose";
 import je from "storm-layout";
-import Le from "./index.es7.js";
+import we from "./index.es7.js";
 /* empty css          */
-import { handleCalcPath as Oe, resDetailData as F } from "./index.es8.js";
-import { fixNodesToEdges as Pe, coseBilkentLayout as se } from "./index.es9.js";
-import { edgeNodeStyles as Re, defaultColors as de, nodeSize as Te } from "./index.es10.js";
-import $e from "cytoscape-layout-utilities";
-import { message as C } from "antd";
-import { menuItemsConfig as De } from "./index.es11.js";
-import { jsonStringify as L } from "./index.es12.js";
-import Se from "./index.es13.js";
+import { handleCalcPath as Oe, resDetailData as Z } from "./index.es8.js";
+import { fixNodesToEdges as Pe, coseBilkentLayout as Le } from "./index.es9.js";
+import { edgeNodeStyles as Re, defaultColors as re, nodeSize as Se } from "./index.es10.js";
+import De from "cytoscape-layout-utilities";
+import { message as b } from "antd";
+import { menuItemsConfig as Te } from "./index.es11.js";
+import { jsonStringify as w } from "./index.es12.js";
+import $e from "./index.es13.js";
 import Ie from "./index.es14.js";
 import { GraphProvider as Be } from "./index.es15.js";
 import Ae from "./index.es16.js";
 import We from "./index.es17.js";
-E.use($e);
-E.use(ze);
-E.use(we);
-E.use(je);
-E.use(Ee);
+N.use(De);
+N.use(ze);
+N.use(Ee);
+N.use(je);
+N.use(Ne);
 const lt = ({
   data: z,
-  getAllGraphData: S,
-  highPathAnalysis: K = [],
+  getAllGraphData: T,
+  highPathAnalysis: q = [],
   graphInfo: u,
-  stepNextApi: re,
-  knowledgeCardApi: ae,
-  colors: w,
+  stepNextApi: ae,
+  knowledgeCardApi: de,
+  colors: E,
   actionBar: ie,
   actionCircle: le,
   queryStatisticsConfig: ce = [{ label: "实体", key: "entity" }, { label: "关系", key: "relation" }],
   className: pe,
-  noDataDesc: He = "暂无数据"
+  noDataDesc: Me = "暂无数据"
 }) => {
-  var G, ee, te;
-  const O = k(null), [p, I] = v([]), g = k(null), X = k(null), Z = 1, [Me, _] = v(!1), [x, B] = v({}), [P, A] = v({}), [ge, ue] = v("cose-bilkent"), J = k(null), Q = k(null), [ye, V] = v(["", ""]), W = k(w);
+  var ee, te, oe;
+  const O = k(null), [g, K] = v([]), p = k(null), U = k(null), Y = 1, [He, _] = v(!1), [x, $] = v({}), [P, I] = v({}), [ge, ue] = v("cose-bilkent"), J = k(null), Q = k(null), [fe, V] = v(["", ""]), B = k(E);
   D(() => {
-    W.current = w;
-  }, [w]);
-  const [y, j] = v({
+    B.current = E;
+  }, [E]);
+  const [f, j] = v({
     visible: !1,
     x: 0,
     y: 0,
     targetNode: null,
     bgColor: ""
-  }), [R, Y] = v({
+  }), [L, G] = v({
     visible: !1,
     x: 0,
     y: 0,
     content: ""
-  }), fe = De({ cyRef: g, setContextMenu: j, onPathAnalysis: (G = X.current) == null ? void 0 : G.onPathAnalysis, setPathNodes: V, actionCircle: le });
+  }), ye = Te({ cyRef: p, setContextMenu: j, onPathAnalysis: (ee = U.current) == null ? void 0 : ee.onPathAnalysis, setPathNodes: V, actionCircle: le });
   D(() => {
-    const { nodes: n, links: s } = K || {};
-    ((n == null ? void 0 : n.length) > 0 || (s == null ? void 0 : s.length) > 0) && Oe(g, { nodes: n, links: s, isGrayed: !1 });
-  }, [L(K), L(p)]), D(() => {
+    const { nodes: n, links: s } = q || {};
+    ((n == null ? void 0 : n.length) > 0 || (s == null ? void 0 : s.length) > 0) && Oe(p, { nodes: n, links: s, isGrayed: !1 });
+  }, [w(q), w(g)]), D(() => {
     const n = [], s = [];
-    p.forEach((l) => {
+    g.forEach((l) => {
       l.group === "nodes" ? n.push(l.data) : l.group === "edges" && s.push(l.data);
-    }), S == null || S({ graphData: p, nodeStatic: x, relationStatic: P, data: { nodes: n, links: s }, paths: z.paths, data2: z.data2, logId: z.logId, costtime: z.costtime });
-  }, [L(p), L(x), L(P)]), D(() => {
-    var a;
-    if (!O.current || g.current) return;
-    const { elements: n, typeListObj: s, relationListObj: l } = F(z, { typeObj: x, graphInfo: u });
-    B(s), I(n), A(l), document.addEventListener("contextmenu", function(t) {
+    }), T == null || T({ graphData: g, nodeStatic: x, relationStatic: P, data: { nodes: n, links: s }, paths: z.paths, data2: z.data2, logId: z.logId, costtime: z.costtime });
+  }, [w(g), w(x), w(P)]), D(() => {
+    var d;
+    if (!O.current || p.current) return;
+    const { elements: n, typeListObj: s, relationListObj: l } = Z(z, { typeObj: x, graphInfo: u });
+    $(s), K(n), I(l), document.addEventListener("contextmenu", function(t) {
       t.preventDefault();
     });
-    const e = E({
+    const e = N({
       container: O.current,
       elements: n,
-      style: Re({ elements: n, colors: w }),
+      style: Re({ elements: n, colors: E }),
       autounselectify: !1,
       autolock: !1,
       maxZoom: 1,
@@ -82,37 +82,37 @@ const lt = ({
         // 使用预设布局，完全依赖 position
       }
     });
-    if (g.current = e, ((a = u == null ? void 0 : u.searchNodes) == null ? void 0 : a.length) === 2)
+    if (p.current = e, ((d = u == null ? void 0 : u.searchNodes) == null ? void 0 : d.length) === 2)
       Pe(
         e,
         u.searchNodes[0],
         u.searchNodes[1]
       );
     else {
-      const t = e.layout(se());
+      const t = e.layout(Le());
       t.run(), t.on("layoutstop", () => {
         e.fit(void 0, 50), e.center();
       });
     }
     return e.on("mouseover", "edge", (t) => {
-      var d;
+      var r;
       const o = t.target;
       if (!o.hasClass("path-edge")) {
-        const r = ((d = W.current) == null ? void 0 : d.edgeHoverColor) ?? de.edgeHoverColor;
+        const a = ((r = B.current) == null ? void 0 : r.edgeHoverColor) ?? re.edgeHoverColor;
         o.style({
-          "line-color": r,
-          "target-arrow-color": r,
+          "line-color": a,
+          "target-arrow-color": a,
           opacity: 0.8
         });
       }
     }), e.on("mouseout", "edge", (t) => {
-      var d;
+      var r;
       const o = t.target;
       if (!o.hasClass("path-edge")) {
-        const r = ((d = W.current) == null ? void 0 : d.edgeDefaultColor) ?? de.edgeDefaultColor;
+        const a = ((r = B.current) == null ? void 0 : r.edgeDefaultColor) ?? re.edgeDefaultColor;
         o.style({
-          "line-color": r,
-          "target-arrow-color": r,
+          "line-color": a,
+          "target-arrow-color": a,
           opacity: 1
         });
       }
@@ -120,171 +120,165 @@ const lt = ({
       const o = t.target;
       o.hasClass("selected") || o.addClass("hover");
     }), e.on("mouseover", "node", (t) => {
-      const o = t.target, d = o.renderedPosition(), r = o.data("name") || "";
-      o.addClass("hover"), Y({
+      const o = t.target, r = o.renderedPosition(), a = o.data("name") || "";
+      o.addClass("hover"), G({
         visible: !0,
-        x: d.x,
-        y: d.y - 60,
-        content: r
+        x: r.x,
+        y: r.y - 60,
+        content: a
       });
     }), e.on("mouseout", "node", (t) => {
-      t.target.removeClass("hover"), Y((d) => ({ ...d, visible: !1 }));
+      t.target.removeClass("hover"), G((r) => ({ ...r, visible: !1 }));
     }), e.on("cxttap", "node", (t) => {
       t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), t.originalEvent && (t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), t.originalEvent.stopImmediatePropagation());
-      const o = t.target, d = o.renderedPosition();
+      const o = t.target, r = o.renderedPosition();
       console.log("renderedPos:::", o.data(), o.style("background-color")), j({
         visible: !0,
-        x: d.x - 90,
-        y: d.y - 90,
+        x: r.x - 90,
+        y: r.y - 90,
         targetNode: o,
         bgColor: o.style("background-color")
       });
-    }), g.current = e, e.on("click", "node", (t) => {
+    }), p.current = e, e.on("click", "node", (t) => {
       const o = t.target;
       e.nodes().removeClass("selected grayed highlighted"), e.edges().removeClass("selected grayed highlighted"), o.addClass("selected");
-      const r = o.neighborhood().nodes().add(o), N = r.edgesWith(r);
-      console.log("cy.nodes().not(relatedNodes):::", r), e.nodes().not(r).addClass("grayed"), e.edges().not(N).addClass("grayed"), r.addClass("highlighted"), N.addClass("highlighted");
+      const a = o.neighborhood().nodes().add(o), C = a.edgesWith(a);
+      console.log("cy.nodes().not(relatedNodes):::", a), e.nodes().not(a).addClass("grayed"), e.edges().not(C).addClass("grayed"), a.addClass("highlighted"), C.addClass("highlighted");
     }), e.on("tap", (t) => {
       t.target === e && (j((o) => ({ ...o, visible: !1 })), e.nodes().removeClass("grayed highlighted highlight selected correlationStyle path-node level-highlight level-selected level-grayed"), e.edges().removeClass("grayed highlighted highlight selected correlationStyle path-edge level-highlightedge level-grayed"));
     }), () => {
-      g.current && (g.current.destroy(), g.current = null);
+      p.current && (p.current.destroy(), p.current = null);
     };
   }, []);
   const me = async (n) => {
-    const { id: s, kgId: l } = n, e = g.current;
+    const { id: s, kgId: l } = n, e = p.current;
     if (!e) return;
-    const a = e.$(`#${s}`);
-    if (!a || a.length === 0) {
+    const d = e.$id(s);
+    if (!d || d.length === 0) {
       console.error("当前节点不存在");
       return;
     }
-    const t = e.nodes().filter((d) => d.data("parentId") ? (d.data("parentId") === s || d.data("idLabel") === `${s}-${d.data("name")}`) && d.data("zktype") === n.zktype : !1);
+    const t = e.nodes().filter((r) => r.data("parentId") ? (r.data("parentId") === s || r.data("idLabel") === `${s}-${r.data("name")}`) && r.data("zktype") === n.zktype : !1);
     if (t.length > 0) {
-      const d = t.map((c) => c.id()), r = t.connectedEdges(), N = e.edges().filter(
-        (c) => c.data("source") === s && d.includes(c.data("target"))
-      ), T = e.edges().filter((c) => c.data("appendedBy") === s), H = r.merge(N).merge(T).filter((c) => c.data().zktype === n.zktype);
+      const r = t.map((c) => c.id()), a = t.connectedEdges(), C = e.edges().filter(
+        (c) => c.data("source") === s && r.includes(c.data("target"))
+      ), R = e.edges().filter((c) => c.data("appendedBy") === s), A = a.merge(C).merge(R).filter((c) => c.data().zktype === n.zktype);
       t.animate({
         style: { opacity: 0 }
       }, {
         duration: 200,
         complete: () => {
-          e.remove(t), e.remove(H), I((c) => {
-            const $ = c.filter((m) => {
-              var b, oe;
-              const i = m.data.zktype;
-              if (m.group === "nodes" && d.includes((b = m.data) == null ? void 0 : b.id) && i && i === n.zktype)
+          e.remove(t), e.remove(A), K((c) => {
+            const W = c.filter((y) => {
+              var h, S;
+              const i = y.data.zktype;
+              if (y.group === "nodes" && r.includes((h = y.data) == null ? void 0 : h.id) && i && i === n.zktype)
                 return !1;
-              if (m.group === "edges" && i && i === n.zktype) {
-                const xe = Array.from(T).map((Ce) => {
-                  const q = Ce.data();
-                  return `${q.source}-${q.target}-${q.label}`;
-                }), U = m.data, Ne = xe.includes(`${U.source}-${U.target}-${U.label}`), ke = ((oe = m.data) == null ? void 0 : oe.appendedBy) === s;
-                return !Ne && !ke;
+              if (y.group === "edges" && i && i === n.zktype) {
+                const H = Array.from(R).map((ke) => {
+                  const X = ke.data();
+                  return `${X.source}-${X.target}-${X.label}`;
+                }), F = y.data, xe = H.includes(`${F.source}-${F.target}-${F.label}`), Ce = ((S = y.data) == null ? void 0 : S.appendedBy) === s;
+                return !xe && !Ce;
               }
               return !0;
-            }), { typeListObj: f, relationListObj: M } = F({}, { graphData: $, typeObj: {} });
-            return B(f), A(M), $;
-          }), a.data("appendedNodes", []), a.data("isExpanded", !1);
+            }), { typeListObj: M, relationListObj: ne } = Z({}, { graphData: W, typeObj: {} });
+            return $(M), I(ne), W;
+          }), d.data("appendedNodes", []), d.data("isExpanded", !1);
         }
       }), setTimeout(() => {
-        a.removed() || (a.style("border-width", ""), a.style("border-color", ""));
+        d.removed() || (d.style("border-width", ""), d.style("border-color", ""));
       }, 300);
     } else {
       try {
-        _(!0), C.open({
+        _(!0), b.open({
           type: "loading",
           content: "正在展开...",
           duration: 0
         });
-        const d = await re({ uri: s, queryType: 1, kgId: l, zktype: n.zktype }), { elements: r, typeListObj: N, relationListObj: T } = F(d.data, { graphData: p, typeObj: x, relationObj: P, zktype: n.zktype });
-        if (B(N), A(T), !((r == null ? void 0 : r.length) > 0)) {
+        const r = await ae({ uri: s, queryType: 1, kgId: l, zktype: n.zktype }), { elements: a, typeListObj: C, relationListObj: R } = Z(r.data, { graphData: g, typeObj: x, relationObj: P, zktype: n.zktype });
+        if ($(C), I(R), !((a == null ? void 0 : a.length) > 0)) {
           setTimeout(() => {
-            C.destroy(), C.warning("暂无数据");
+            b.destroy(), b.warning("暂无数据");
           }, 2e3);
           return;
         }
-        if ((r == null ? void 0 : r.length) > 0) {
-          const H = e.layoutUtilities({
-            ...se(),
-            idealEdgeLength: 80,
-            // 与你的期望边长匹配
-            offset: 30
-            // 随机偏移，避免完全重叠
-          }), c = r.map((i) => {
+        const A = e.zoom();
+        if (console.log(78888, e.zoom()), console.log(222e4, a), (a == null ? void 0 : a.length) > 0) {
+          const c = a.map((i) => {
             if (i.group === "nodes") {
-              const b = Te * Z;
+              const h = Se * Y;
               return {
                 ...i,
-                style: {
-                  opacity: 0,
-                  width: b,
-                  height: b
-                },
+                // position,
+                style: { opacity: 1, width: h, height: h },
                 data: {
                   ...i.data,
                   parentId: s,
-                  // 标记父节点
                   appendedBy: s,
-                  // 标记由谁追加
                   idLabel: s + "-" + i.data.label,
                   zktype: n.zktype,
                   isAppended: !0,
-                  // 标记是追加节点
-                  baseWidth: b,
-                  baseHeight: b
+                  baseWidth: 80,
+                  baseHeight: 80
                 }
               };
             }
             return {
               ...i,
-              data: {
-                ...i.data,
-                appendedBy: s,
-                zktype: n.zktype
-              }
+              data: { ...i.data, appendedBy: s, zktype: n.zktype }
             };
-          }), $ = e.add(c);
-          I([...p, ...c]);
-          const f = $.filter(":node"), M = f.map((i) => i.id());
-          a.data("appendedNodes", M), a.data("isExpanded", !0);
-          const m = e.nodes().difference(f);
-          m.forEach((i) => i.lock()), H.placeNewNodes(f), e.layout({
-            name: "cose-bilkent",
-            randomize: !1,
-            // ⚠️ 这是关键！保持已有节点位置不变
+          });
+          console.log(888, c), e.nodes().forEach((i) => {
+            if (i.data("id") !== s)
+              return i.lock();
+          });
+          const M = e.add(c).filter(":node"), ne = d.position(), y = e.layout({
+            name: "concentric",
+            // ✅ 使用 concentric 实现多层
+            eles: M,
+            fit: !1,
             animate: !0,
             animationDuration: 500,
-            fit: !1,
-            // 不要自动缩放，保持在当前视图
-            // 其他参数保持你原来的配置
-            nodeRepulsion: 1005e3,
-            idealEdgeLength: 100,
-            edgeElasticity: 0.3,
-            numIter: 800,
-            // 可以适当减少，因为只需要微调
-            gravity: 0.6
-          }).run(), setTimeout(() => {
-            m.forEach((i) => i.unlock());
-          }, 2e3), f.animate({
-            style: {
-              opacity: 1,
-              width: 20,
-              height: 30
-            }
-          }, {
-            duration: 400,
-            easing: "ease-out",
-            complete: () => {
-              f.style("opacity", ""), f.style("width", ""), f.style("height", "");
+            avoidOverlap: !1,
+            // 允许重叠
+            spacingFactor: 3,
+            // 层间距因子
+            minNodeSpacing: 100,
+            // radius: 120,   
+            // ✅ 决定节点在哪个层（返回相同值=同层，不同值=不同层）
+            concentric: function(i) {
+              return i.degree();
+            },
+            // ✅ 每层最少节点数（决定层数）
+            levelWidth: function(i) {
+              return 2;
+            },
+            // 随机排序
+            // sort: function(a, b) {
+            //   return Math.random() - 0.5;
+            // },
+            // 添加随机偏移，打破完美圆环
+            transform: function(i, h) {
+              const S = (Math.random() - 0.5) * 20, H = (Math.random() - 0.5) * 20;
+              return {
+                x: h.x + S,
+                y: h.y + H
+              };
             }
-          }), setTimeout(() => {
-            a.removed() || (a.style("border-width", ""), a.style("border-color", ""), e.center(a), e.zoom(e.zoom()));
-          }, 600);
+          });
+          y.one("layoutstop", () => {
+            e.fit(void 0, 20), console.log(11, e.zoom(), s, d.id()), e.animate({
+              center: { eles: d },
+              zoom: A,
+              duration: 400
+            }), b.destroy();
+          }), y.run();
         } else
           console.log("没有找到相关节点数据");
-        C.destroy();
-      } catch (d) {
-        C.destroy(), C.error("请求接口失败"), console.error("22请求接口失败:", d);
+        b.destroy();
+      } catch (r) {
+        b.destroy(), b.error("请求接口失败"), console.error("22请求接口失败:", r);
       }
       _(!1);
     }
@@ -295,13 +289,13 @@ const lt = ({
   }, ve = (n, s) => {
     var e;
     console.log("handleMenuAction:::", n, s);
-    const l = s || y.targetNode;
+    const l = s || f.targetNode;
     if (l) {
-      const a = n.ids, t = l.data();
-      if (["expanded", "contract"].includes(a))
-        me({ kgId: u.kgId, ...t, zktype: he[a] });
-      else if (a === "nodeInfo") {
-        const o = l, d = {
+      const d = n.ids, t = l.data();
+      if (["expanded", "contract"].includes(d))
+        me({ kgId: u.kgId, ...t, zktype: he[d] });
+      else if (d === "nodeInfo") {
+        const o = l, r = {
           id: o.id(),
           data: o.data(),
           position: o.position(),
@@ -311,42 +305,42 @@ const lt = ({
           classes: o.classes(),
           style: o.style()
         };
-        J.current.open(d);
-      } else a === "knowledgeCard" && Q.current.open(l.data());
+        J.current.open(r);
+      } else d === "knowledgeCard" && Q.current.open(l.data());
       (e = n.onClick) == null || e.call(n, l), j({ visible: !1, x: 0, y: 0, targetNode: null });
     }
   };
-  console.log(111, !(((ee = p == null ? void 0 : p.nodes) == null ? void 0 : ee.length) > 0), p);
+  console.log(111, !(((te = g == null ? void 0 : g.nodes) == null ? void 0 : te.length) > 0), g);
   const be = () => {
     const n = {};
     return Object.keys(x).forEach((s) => {
       s !== "_" && (n[s] = x[s]);
     }), n;
   };
-  return /* @__PURE__ */ h(Be, { value: { pathNodes: ye, setPathNodes: V, graphInfo: u, graphData: p, layoutType: ge, setLayoutType: ue, knowledgeCardApi: ae, queryStatisticsConfig: ce, actionBar: ie }, children: /* @__PURE__ */ ne("div", { className: We("cytoscape-container relative", pe), children: [
-    /* @__PURE__ */ h("div", { className: "btn-group" }),
-    /* @__PURE__ */ h(
-      Le,
+  return /* @__PURE__ */ m(Be, { value: { pathNodes: fe, setPathNodes: V, graphInfo: u, graphData: g, layoutType: ge, setLayoutType: ue, knowledgeCardApi: de, queryStatisticsConfig: ce, actionBar: ie }, children: /* @__PURE__ */ se("div", { className: We("cytoscape-container relative", pe), children: [
+    /* @__PURE__ */ m("div", { className: "btn-group" }),
+    /* @__PURE__ */ m(
+      we,
       {
-        ref: X,
-        cyRef: g,
+        ref: U,
+        cyRef: p,
         graphInfo: u,
-        initNodeScale: Z,
+        initNodeScale: Y,
         cyContainerRef: O,
         typeObj: be(),
         relationObj: P,
-        colors: w
+        colors: E
       }
     ),
-    /* @__PURE__ */ ne("div", { className: "relative h-100", children: [
-      /* @__PURE__ */ h("div", { ref: O, className: "cy-container" }),
-      y.visible && y.targetNode && /* @__PURE__ */ h(
+    /* @__PURE__ */ se("div", { className: "relative h-100", children: [
+      /* @__PURE__ */ m("div", { ref: O, className: "cy-container" }),
+      f.visible && f.targetNode && /* @__PURE__ */ m(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${y.x}px`,
-            top: `${y.y}px`,
+            left: `${f.x}px`,
+            top: `${f.y}px`,
             // backgroundColor: 'white',
             // border: '1px solid #ccc',
             // borderRadius: '50%',
@@ -360,16 +354,16 @@ const lt = ({
             overflow: "hidden"
           },
           onClick: (n) => n.stopPropagation(),
-          children: /* @__PURE__ */ h(Se, { items: fe, centerImage: (te = y == null ? void 0 : y.targetNode) == null ? void 0 : te.data().image, targetNode: y.targetNode, onClick: (n, s) => ve(n, s) })
+          children: /* @__PURE__ */ m($e, { items: ye, centerImage: (oe = f == null ? void 0 : f.targetNode) == null ? void 0 : oe.data().image, targetNode: f.targetNode, onClick: (n, s) => ve(n, s) })
         }
       ),
-      R.visible && /* @__PURE__ */ h(
+      L.visible && /* @__PURE__ */ m(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${R.x}px`,
-            top: `${R.y}px`,
+            left: `${L.x}px`,
+            top: `${L.y}px`,
             transform: "translateX(-50%)",
             backgroundColor: "rgba(0, 0, 0, 0.85)",
             color: "#fff",
@@ -383,12 +377,12 @@ const lt = ({
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: R.content
+          children: L.content
         }
       )
     ] }),
-    /* @__PURE__ */ h(Ie, { ref: J }),
-    /* @__PURE__ */ h(Ae, { ref: Q })
+    /* @__PURE__ */ m(Ie, { ref: J, cyRef: p }),
+    /* @__PURE__ */ m(Ae, { ref: Q })
   ] }) });
 };
 export {