react-kggraph 0.0.8 → 0.0.10

package/lib/index.es.js

@@ -1,5 +1,9 @@
 /* empty css          */
-import e from "./index36.es.js";
-import t from "./index37.es.js";
-import { SearchType as n } from "./index38.es.js";
-export { e as CytoscapeReact, t as Demo, n as SearchType };
+import { default as t } from "./index.es3.js";
+import { default as p } from "./index.es4.js";
+import { SearchType as m } from "./index.es5.js";
+export {
+  t as CytoscapeReact,
+  p as Demo,
+  m as SearchType
+};

package/lib/index.es10.js

@@ -0,0 +1,188 @@
+const i = [
+  {
+    selector: "node",
+    style: {
+      "text-margin-y": "5px"
+    }
+  },
+  {
+    selector: "edge",
+    style: {
+      // 核心：默认链接线颜色（和 hover 区分开）
+      "line-color": "#a29e9e",
+      // 核心：默认箭头颜色（和 hover 区分开）
+      "target-arrow-color": "#a29e9e",
+      // 核心：默认透明度（和 hover 区分开）
+      opacity: 1,
+      // 箭头形状（必须配置才会显示箭头）
+      "target-arrow-shape": "triangle",
+      // 链接线宽度
+      width: 2,
+      // 曲线样式
+      "curve-style": "bezier",
+      // 可选：过渡动画（颜色变化更丝滑）
+      "transition-property": "line-color, target-arrow-color, opacity",
+      "transition-duration": "0.2s",
+      label: "data(name)",
+      "z-index": 9999,
+      // 连线文字设置
+      "text-opacity": 1,
+      "font-size": 18,
+      color: "#666",
+      "text-background-color": "#fff",
+      "text-background-opacity": 1,
+      "text-background-shape": "roundrectangle",
+      // 'text-border-width': 2,
+      // 'text-border-opacity':1,
+      // 'text-border-color': '#e9e7e7',
+      "text-background-padding": "3px"
+    }
+  },
+  {
+    selector: ".highlight",
+    style: {
+      "border-color": "rgba(174, 255, 45, 0.2)",
+      "border-width": 4
+    }
+  },
+  {
+    selector: ".path-node",
+    style: {
+      "background-color": "#145AFD",
+      "border-color": "#FFEB3B"
+    }
+  },
+  {
+    selector: ".path-edge",
+    style: {
+      "line-color": "#145AFD",
+      "target-arrow-color": "#145AFD",
+      width: 4
+    }
+  },
+  {
+    selector: ".grayed",
+    style: {
+      opacity: 0.15,
+      "text-opacity": 0.15
+    }
+  },
+  {
+    selector: "node.selected, edge.selected",
+    // 选中状态的样式
+    style: {
+      // 'line-color': 'rgba(66, 133, 244, 0.5)', // 选中边的颜色
+      "border-color": "rgba(174, 255, 45, 0.2)",
+      "border-width": 4
+    }
+  },
+  {
+    selector: ".correlationStyle",
+    style: {
+      width: 60,
+      height: 60,
+      // 'background-color': '#fff',
+      // 核心：outline（外边框）+ blur滤镜实现发光
+      "outline-width": "10px",
+      "outline-color": "rgba(188, 220, 255, 0.4)",
+      "outline-style": "solid",
+      "line-opacity": "0.2",
+      "outline-offset": "2px",
+      // 偏移避免遮挡节点
+      filter: "blur(20px)",
+      // 模糊outline，模拟发光
+      "z-index": 9999
+    }
+  },
+  {
+    selector: ".hover",
+    style: {
+      "border-width": 3,
+      "border-color": "#0d6ac2"
+    }
+  },
+  // 层级分析样式 - 目标节点
+  {
+    selector: ".level-selected",
+    style: {
+      "background-color": "#f8bbd0",
+      "border-color": "#e91e63",
+      "border-width": 4,
+      color: "#880e4f"
+    }
+  },
+  // 层级分析样式 - 关联节点
+  {
+    selector: ".level-highlight",
+    style: {
+      "background-color": "#bbdefb",
+      "border-color": "#2196f3",
+      "border-width": 3,
+      color: "#0d47a1"
+    }
+  },
+  // 层级分析样式 - 边高亮
+  {
+    selector: ".level-highlightedge",
+    style: {
+      "line-color": "#1976d2",
+      "target-arrow-color": "#1976d2",
+      width: 3,
+      opacity: 1
+    }
+  },
+  // 层级分析样式 - 置灰
+  {
+    selector: ".level-grayed",
+    style: {
+      opacity: 0.15,
+      "text-opacity": 0.15
+    }
+  }
+], n = ({ elements: c }) => {
+  const o = [];
+  c.map((e) => {
+    var r, l, a;
+    !o.includes((r = e == null ? void 0 : e.data) == null ? void 0 : r.type) && ((l = e == null ? void 0 : e.data) != null && l.type) && o.push((a = e.data) == null ? void 0 : a.type);
+  });
+  const t = [];
+  return t.push({
+    selector: '[properties-type="uri"]',
+    style: {
+      "background-color": "#f7de63",
+      // 黄色
+      "background-image": "data(image)",
+      // 'background-image': sticon1,
+      "background-fit": "cover",
+      width: 80,
+      height: 80,
+      label: "data(name)",
+      color: "black",
+      "text-valign": "bottom",
+      "font-size": 18,
+      "text-max-width": "250px",
+      "text-wrap": "ellipsis",
+      "text-overflow-wrap": "anywhere"
+    }
+  }), t.push({
+    selector: '[properties-type!="uri"]',
+    style: {
+      "background-color": "#1890FF",
+      // 蓝色
+      "background-image": "data(image)",
+      "background-fit": "cover",
+      width: 80,
+      height: 80,
+      label: "data(name)",
+      color: "black",
+      "text-valign": "bottom",
+      "font-size": 18,
+      "text-max-width": "250px",
+      "text-wrap": "ellipsis",
+      "text-overflow-wrap": "anywhere"
+    }
+  }), t.concat(i);
+};
+export {
+  n as edgeNodeStyles
+};

package/lib/index.es11.js

@@ -0,0 +1,72 @@
+const i = ({ cyRef: n, setContextMenu: t, onPathAnalysis: l, setPathNodes: a }) => [
+  {
+    label: "展收实体",
+    ids: "contract",
+    action: (e) => {
+      const o = n.current;
+      console.log("新增属性", o);
+    }
+  },
+  {
+    label: "展收属性",
+    ids: "expanded",
+    action: (e) => {
+      if (console.log("展开", e), !n.current) {
+        console.error("Cytoscape instance is not available");
+        return;
+      }
+      console.log("New node and edge added");
+    }
+  },
+  {
+    label: "节点信息",
+    ids: "nodeInfo",
+    action: (e) => {
+      console.log("节点信息:", e);
+    }
+  },
+  {
+    label: "知识卡片",
+    ids: "knowledgeCard",
+    action: (e) => {
+      const o = n.current;
+      console.log("知识卡片", o);
+    }
+  },
+  //  {
+  //   label: '新增关系',
+  //   action: (node) => {
+  //     const cy = cyRef.current;
+  //     console.log('新增关系', cy)
+  //   },
+  // },
+  {
+    label: "选中关联",
+    ids: "selRelate",
+    action: (e) => {
+      const o = n.current;
+      if (!o || !e || e.removed()) {
+        console.error("节点或Cytoscape实例无效"), t((r) => ({ ...r, visible: !1 }));
+        return;
+      }
+      const s = e, c = s.neighborhood().nodes().add(s);
+      c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), t((r) => ({ ...r, visible: !1 }));
+    }
+  },
+  {
+    label: "路径分析",
+    action: (e) => {
+      n.current, console.log(11, e.data("name")), l == null || l(), a([e.data("name"), ""]);
+    }
+  },
+  {
+    label: "删除节点",
+    action: (e) => {
+      const o = n.current;
+      console.log("删除节点cy::::", o), e && !e.removed() && e.remove();
+    }
+  }
+];
+export {
+  i as menuItemsConfig
+};

package/lib/index.es12.js

@@ -0,0 +1,32 @@
+const t = (r) => {
+  if (n(r) || Array.isArray(r))
+    try {
+      return JSON.stringify(r);
+    } catch (e) {
+      console.log("JSON.stringify", e);
+    }
+  else
+    return r;
+}, c = (r) => {
+  if (n(r) || Array.isArray(r))
+    try {
+      return JSON.parse(JSON.stringify(r));
+    } catch (e) {
+      console.log("JSON.stringify-JSON.parse", e);
+    }
+  else
+    return r;
+};
+function n(r) {
+  return r !== null && typeof r == "object" && !Array.isArray(r);
+}
+const i = (r, e) => {
+  const o = document.createElement("a");
+  o.href = r, o.download = e, document.body.appendChild(o), o.click(), document.body.removeChild(o);
+};
+export {
+  i as downloadFile,
+  n as isObject,
+  t as jsonStringify,
+  c as jsonStringifyParse
+};

package/lib/index.es13.js

@@ -0,0 +1,72 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useMemo as b } from "react";
+/* empty css           */
+const L = ({
+  items: h = [
+    // { label: '知识卡片' },
+    // { label: '选中关联' },
+    // { label: '路径分析' },
+    // { label: '展收实体' },
+    // { label: '展收属性' },
+    // { label: '节点配置' },
+  ],
+  centerImage: f,
+  size: c = 200,
+  onClick: $
+}) => {
+  const t = c / 2, a = c / 2 - 10, s = 30, o = 360 / h.length, p = b(() => h.map((n, r) => {
+    const l = (r * o - 90) * (Math.PI / 180), i = ((r + 1) * o - 90) * (Math.PI / 180), m = ((r + 0.5) * o - 90) * (Math.PI / 180), y = t + a * Math.cos(l), v = t + a * Math.sin(l), w = t + a * Math.cos(i), A = t + a * Math.sin(i), N = t + s * Math.cos(i), k = t + s * Math.sin(i), u = t + s * Math.cos(l), x = t + s * Math.sin(l), g = o > 180 ? 1 : 0, I = `M ${u} ${x} L ${y} ${v} A ${a} ${a} 0 ${g} 1 ${w} ${A} L ${N} ${k} A ${s} ${s} 0 ${g} 0 ${u} ${x}`, M = (a + s) / 2 + 5, P = t + M * Math.cos(m), R = t + M * Math.sin(m);
+    return {
+      ...n,
+      path: I,
+      textX: P,
+      textY: R,
+      rotation: (r + 0.5) * o - 90
+    };
+  }), [h, o, t, a, s]);
+  return /* @__PURE__ */ d("div", { className: "radial-menu", style: { width: c, height: c }, children: [
+    /* @__PURE__ */ d("svg", { width: c, height: c, className: "radial-svg", children: [
+      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("filter", { id: "shadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ e("feDropShadow", { dx: "0", dy: "2", stdDeviation: "3", floodOpacity: "0.3" }) }) }),
+      /* @__PURE__ */ e("circle", { cx: t, cy: t, r: a, fill: "#f5f5f5", stroke: "#ddd", strokeWidth: "1" }),
+      p.map((n, r) => /* @__PURE__ */ d("g", { onClick: () => $(n), className: "sector-group", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: n.path,
+            fill: "#333",
+            stroke: "rgb(185, 185, 185)",
+            strokeWidth: "1",
+            filter: "url(#shadow)",
+            className: "sector-path"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: n.textX,
+            y: n.textY,
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fill: "#fff",
+            fontSize: "12",
+            fontWeight: "500",
+            className: "sector-label",
+            children: n.label
+          }
+        )
+      ] }, r)),
+      /* @__PURE__ */ e("circle", { cx: t, cy: t, r: s + 2, fill: "#fff" })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "center-avatar",
+        style: { width: s * 2, height: s * 2 },
+        children: f ? /* @__PURE__ */ e("img", { src: f, alt: "avatar" }) : /* @__PURE__ */ e("span", { className: "center-text", children: "菜单" })
+      }
+    )
+  ] });
+};
+export {
+  L as default
+};

package/lib/index.es14.js

@@ -0,0 +1,226 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as h, useState as s, useImperativeHandle as b } from "react";
+import { Drawer as x } from "antd";
+const N = h((y, d) => {
+  const [c, t] = s(!1), [a, o] = s({ style: {}, data: {} });
+  b(d, () => ({
+    open: (n) => {
+      t(!0), o(n);
+    },
+    close: () => t(!1)
+  }));
+  const i = () => {
+    t(!1);
+  }, l = (n) => {
+    const { name: p, value: m } = n.target;
+    o((u) => ({ ...u, [p]: m }));
+  };
+  return /* @__PURE__ */ e(
+    x,
+    {
+      title: "节点配置",
+      closable: { "aria-label": "Close Button" },
+      onClose: i,
+      open: c,
+      getContainer: !1,
+      children: /* @__PURE__ */ e("div", { className: "h-full overflow-y-auto z-50", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "名称" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              name: "name",
+              value: a.data.name,
+              onChange: l,
+              readOnly: !0,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  focus:outline-none focus:ring-1 focus:ring-blue-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "类型" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "type",
+              value: a.type,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "圆形", children: "圆形" }),
+                /* @__PURE__ */ e("option", { value: "矩形", children: "矩形" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "color",
+                readOnly: !0,
+                value: a.style.color,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                readOnly: !0,
+                value: a.style.color,
+                onChange: (n) => o({ ...a, color: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "大小" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              name: "size",
+              readOnly: !0,
+              value: parseInt(a.style.height),
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框宽度" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              name: "borderWidth",
+              readOnly: !0,
+              value: parseInt(a.style.borderWidth),
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框虚线" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "borderDash",
+              value: a.style.borderDash,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "否", children: "否" }),
+                /* @__PURE__ */ e("option", { value: "是", children: "是" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "边框颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "borderColor",
+                value: a.style.borderColor,
+                readOnly: !0,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                value: a.borderColor,
+                readOnly: !0,
+                onChange: (n) => o({ ...a, borderColor: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体位置" }),
+          /* @__PURE__ */ r(
+            "select",
+            {
+              name: "fontPosition",
+              value: a.style.textValign,
+              disabled: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-white",
+              children: [
+                /* @__PURE__ */ e("option", { value: "center", children: "居中" }),
+                /* @__PURE__ */ e("option", { value: "bottom", children: "底部" }),
+                /* @__PURE__ */ e("option", { value: "top", children: "顶部" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体样式" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              name: "fontStyle",
+              value: a.style.fontStyle,
+              readOnly: !0,
+              onChange: l,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded "
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体颜色" }),
+          /* @__PURE__ */ r("div", { className: "flex-1 flex gap-2 items-center", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                name: "fontColor",
+                readOnly: !0,
+                value: a.style.textBorderColor,
+                onChange: l,
+                className: "flex-1 px-3 py-1.5 border border-gray-300 rounded h-30px"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                readOnly: !0,
+                value: a.style["font-color"],
+                onChange: (n) => o({ ...a, fontColor: n.target.value }),
+                className: "h-20px w-20px rounded cursor-pointer border"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4 !mb-20px", children: [
+          /* @__PURE__ */ e("label", { className: "w-40", children: "字体背色" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "text",
+              readOnly: !0,
+              value: a.style.textBackgroundColor,
+              className: "flex-1 px-3 py-1.5 border border-gray-300 rounded  bg-gray-50 text-gray-400 cursor-not-allowed"
+            }
+          )
+        ] })
+      ] }) })
+    }
+  );
+});
+export {
+  N as default
+};

package/lib/index.es15.js

@@ -0,0 +1,6 @@
+import { createContext as r } from "react";
+const o = r({}), e = o.Provider;
+export {
+  o as GraphContext,
+  e as GraphProvider
+};

package/lib/index.es16.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as u, useContext as g, useState as o, useRef as m, useEffect as w, useImperativeHandle as C } from "react";
+import { Drawer as h } from "antd";
+import { fullSearchDetail as x } from "./index.es7.js";
+import { GraphContext as y } from "./index.es15.js";
+const G = u((D, l) => {
+  const { graphInfo: f } = g(y), [t, a] = o(!1), [I, s] = o(!1), [k, c] = o(!1), [v, d] = o({ style: {}, data: {} }), r = m(null);
+  w(() => {
+    t && r.current && (r.current.scrollTop = 0);
+  }, [t]), C(l, () => ({
+    open: (e) => {
+      a(!0), d(e), i(e);
+    },
+    close: () => a(!1)
+  }));
+  const i = async (e) => {
+    s(!0);
+    const p = await x({ kgId: f.kgId, uri: e.id });
+    console.log(44, e), c(p.data), s(!1);
+  };
+  return /* @__PURE__ */ n(
+    h,
+    {
+      title: "知识卡片",
+      onClose: () => {
+        a(!1);
+      },
+      open: t,
+      getContainer: !1,
+      className: "knowledge-card-drawer",
+      bodyStyle: { padding: "0 20px", overflow: "auto" },
+      children: /* @__PURE__ */ n("div", { ref: r, style: { height: "100%" } })
+    }
+  );
+});
+export {
+  G as default
+};