react-kggraph 0.0.17 → 0.0.18

package/README.md

@@ -125,6 +125,7 @@ const App = () => {
 | graphInfo | `GraphInfo` | ❌ | 图谱配置信息 |
 | stepNextApi | `(params: any) => Promise<any>` | ❌ | 下一步API（用于知识图谱展开） |
 | knowledgeCardApi | `(params: any) => Promise<any>` | ❌ | 知识卡片API |
+| colors | `GraphColors` | ❌ | 颜色配置 |
 
 ## 类型定义
 
@@ -167,6 +168,51 @@ interface GraphInfo {
 }
 ```
 
+### GraphColors（颜色配置）
+
+```typescript
+interface GraphColors {
+  /** 节点标签文字颜色，默认 #000 */
+  nodeLabelColor?: string;
+  /** 节点标签文字大小，默认 18 */
+  nodeLabelFontSize?: number;
+  /** 边标签文字颜色，默认 #666 */
+  edgeLabelColor?: string;
+  /** 边标签文字大小，默认 18 */
+  edgeLabelFontSize?: number;
+  /** URI类型节点背景色，默认 #f7de63 */
+  uriNodeColor?: string;
+  /** 普通节点背景色，默认 #1890FF */
+  normalNodeColor?: string;
+  /** 节点边框悬停颜色，默认 #0d6ac2 */
+  nodeBorderHoverColor?: string;
+  /** 边默认颜色，默认 #a29e9e */
+  edgeDefaultColor?: string;
+  /** 边悬停颜色，默认 #1890ff */
+  edgeHoverColor?: string;
+  /** 路径高亮颜色，默认 #145AFD */
+  pathHighlightColor?: string;
+  /** 路径节点颜色，默认 #145AFD */
+  pathNodeColor?: string;
+}
+```
+
+### 颜色配置示例
+
+```tsx
+<CytoscapeReact
+  data={data}
+  colors={{
+    nodeLabelColor: '#333',
+    edgeLabelColor: '#999',
+    normalNodeColor: '#52c41a',
+    uriNodeColor: '#faad14',
+    edgeDefaultColor: '#d9d9d9',
+    pathHighlightColor: '#f5222d',
+  }}
+/>
+```
+
 ## 图谱布局
 
 组件支持多种布局算法：

package/lib/index.es.js

@@ -1,9 +1,11 @@
 /* empty css          */
-import { default as t } from "./index.es3.js";
-import { default as p } from "./index.es4.js";
-import { SearchType as m } from "./index.es5.js";
+import { default as r } from "./index.es3.js";
+import { actionList as p } from "./index.es4.js";
+import { default as m } from "./index.es5.js";
+import { SearchType as s } from "./index.es6.js";
 export {
-  t as CytoscapeReact,
-  p as Demo,
-  m as SearchType
+  r as CytoscapeReact,
+  m as Demo,
+  s as SearchType,
+  p as actionList
 };

package/lib/index.es10.js

@@ -1,75 +1,192 @@
-const i = ({ cyRef: n, setContextMenu: r, onPathAnalysis: l, setPathNodes: s }) => [
-  {
-    label: "展收实体",
-    ids: "contract",
-    action: (e) => {
-      const o = n.current;
-      console.log("新增属性", o);
+const g = {
+  nodeLabelColor: "#000",
+  nodeLabelFontSize: 18,
+  edgeLabelColor: "#666",
+  edgeLabelFontSize: 18,
+  uriNodeColor: "#f7de63",
+  // 节点类型为uri的节点颜色，默认节点颜色
+  normalNodeColor: "#1890FF",
+  nodeBorderHoverColor: "#0d6ac2",
+  //节点hover边框效果
+  edgeDefaultColor: "#a29e9e",
+  //连线颜色
+  edgeHoverColor: "#145AFD",
+  //边悬停颜色
+  pathHighlightColor: "#145AFD",
+  //路径高亮颜色
+  pathNodeColor: "#145AFD"
+  //路径节点颜色-不生效
+}, h = ({ elements: c, colors: n = {} }) => {
+  const e = { ...g, ...n }, l = [], t = 80;
+  c.map((o) => {
+    var a, d, i;
+    !l.includes((a = o == null ? void 0 : o.data) == null ? void 0 : a.type) && ((d = o == null ? void 0 : o.data) != null && d.type) && l.push((i = o.data) == null ? void 0 : i.type);
+  });
+  const r = [];
+  r.push({
+    selector: '[properties-type="uri"]',
+    style: {
+      "background-color": e.uriNodeColor,
+      "background-image": "data(image)",
+      "background-fit": "cover",
+      width: t,
+      height: t,
+      label: "data(name)",
+      color: e.nodeLabelColor,
+      "text-valign": "bottom",
+      "font-size": e.nodeLabelFontSize,
+      "text-max-width": "250px",
+      "text-wrap": "ellipsis",
+      "text-overflow-wrap": "anywhere"
     }
-  },
-  {
-    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);
+  }), r.push({
+    selector: '[properties-type!="uri"]',
+    style: {
+      "background-color": e.normalNodeColor,
+      "background-image": "data(image)",
+      "background-fit": "cover",
+      width: t,
+      height: t,
+      label: "data(name)",
+      color: e.nodeLabelColor,
+      "text-valign": "bottom",
+      "font-size": e.nodeLabelFontSize,
+      "text-max-width": "250px",
+      "text-wrap": "ellipsis",
+      "text-overflow-wrap": "anywhere"
     }
-  },
-  //  {
-  //   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实例无效"), r((t) => ({ ...t, visible: !1 }));
-        return;
+  });
+  const s = [
+    {
+      selector: "node",
+      style: {
+        "text-margin-y": "5px"
+      }
+    },
+    {
+      selector: "edge",
+      style: {
+        "line-color": e.edgeDefaultColor,
+        "target-arrow-color": e.edgeDefaultColor,
+        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": e.edgeLabelFontSize,
+        color: e.edgeLabelColor,
+        "text-background-color": "#fff",
+        "text-background-opacity": 1,
+        "text-background-shape": "roundrectangle",
+        "text-background-padding": "3px"
+      }
+    },
+    {
+      selector: ".highlight",
+      style: {
+        "border-color": "rgba(174, 255, 45, 0.2)",
+        "border-width": 4
+      }
+    },
+    {
+      selector: ".path-node",
+      style: {
+        "background-color": e.pathNodeColor,
+        "border-color": e.pathNodeColor,
+        "border-width": 2
+      }
+    },
+    {
+      selector: ".path-edge",
+      style: {
+        "line-color": e.pathHighlightColor,
+        "target-arrow-color": e.pathHighlightColor,
+        width: 4,
+        "border-width": 2,
+        "border-color": e.pathHighlightColor
+      }
+    },
+    {
+      selector: ".grayed",
+      style: {
+        opacity: 0.15,
+        "text-opacity": 0.15
+      }
+    },
+    {
+      selector: "node.selected, edge.selected",
+      style: {
+        "border-color": "rgba(174, 255, 45, 0.2)",
+        "border-width": 4
+      }
+    },
+    {
+      selector: ".correlationStyle",
+      style: {
+        width: 60,
+        height: 60,
+        "outline-width": "10px",
+        "outline-color": "rgba(188, 220, 255, 0.4)",
+        "outline-style": "solid",
+        "line-opacity": "0.2",
+        "outline-offset": "2px",
+        filter: "blur(20px)",
+        "z-index": 9999
+      }
+    },
+    {
+      selector: ".hover",
+      style: {
+        "border-width": 3,
+        "border-color": e.nodeBorderHoverColor
+      }
+    },
+    // 层级分析样式 - 目标节点
+    {
+      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
       }
-      const d = e, c = d.neighborhood().nodes().add(d);
-      c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), r((t) => ({ ...t, visible: !1 }));
-    }
-  },
-  {
-    label: "路径分析",
-    action: (e) => {
-      n.current, console.log(11, e.data("name")), l == null || l(), s([e.data("name"), ""]);
     }
-  }
-  // {
-  //   label: '删除节点',
-  //   action: (node) => {
-  //     const cy = cyRef.current;
-  //     console.log('删除节点cy::::', cy)
-  //     if (node && !node.removed()) {
-  //         node.remove();
-  //       }
-  //   },
-  // },
-];
+  ];
+  return r.concat(s);
+};
 export {
-  i as menuItemsConfig
+  g as defaultColors,
+  h as edgeNodeStyles
 };

package/lib/index.es11.js

@@ -1,32 +1,75 @@
-const t = (r) => {
-  if (n(r) || Array.isArray(r))
-    try {
-      return JSON.stringify(r);
-    } catch (e) {
-      console.log("JSON.stringify", e);
+const i = ({ cyRef: n, setContextMenu: r, onPathAnalysis: l, setPathNodes: s }) => [
+  {
+    label: "展收实体",
+    ids: "contract",
+    action: (e) => {
+      const o = n.current;
+      console.log("新增属性", o);
     }
-  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);
+  },
+  {
+    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");
     }
-  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);
-};
+  },
+  {
+    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实例无效"), r((t) => ({ ...t, visible: !1 }));
+        return;
+      }
+      const d = e, c = d.neighborhood().nodes().add(d);
+      c.edgesWith(c), o.nodes().not(c).removeClass("correlationStyle"), c.addClass("correlationStyle"), r((t) => ({ ...t, visible: !1 }));
+    }
+  },
+  {
+    label: "路径分析",
+    action: (e) => {
+      n.current, console.log(11, e.data("name")), l == null || l(), s([e.data("name"), ""]);
+    }
+  }
+  // {
+  //   label: '删除节点',
+  //   action: (node) => {
+  //     const cy = cyRef.current;
+  //     console.log('删除节点cy::::', cy)
+  //     if (node && !node.removed()) {
+  //         node.remove();
+  //       }
+  //   },
+  // },
+];
 export {
-  i as downloadFile,
-  n as isObject,
-  t as jsonStringify,
-  c as jsonStringifyParse
+  i as menuItemsConfig
 };

package/lib/index.es12.js

@@ -1,72 +1,32 @@
-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: "菜单" })
-      }
-    )
-  ] });
+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 {
-  L as default
+  i as downloadFile,
+  n as isObject,
+  t as jsonStringify,
+  c as jsonStringifyParse
 };