react-kggraph 0.0.17 → 0.0.19

package/README.md

@@ -10,6 +10,8 @@
 - 🔍 支持节点搜索、高亮路径分析
 - 📦 支持知识图谱展开、节点详情查看
 - 📱 响应式设计，支持缩放、拖拽等交互
+- ⚙️ 支持 ActionBar 工具栏配置（位置、按钮列表）
+- 🖱️ 支持右键菜单（actionCircle）自定义
 
 ## 安装
 
@@ -22,7 +24,7 @@ npm install react-kggraph
 react-kggraph 依赖以下 peerDependencies，请确保已安装：
 
 ```bash
-npm install react react-dom antd 
+npm install react react-dom antd @ant-design/icons
 ```
 
 ## 使用
@@ -46,9 +48,7 @@ const App = () => {
 
   return (
     <div style={{ width: '100%', height: '600px' }}>
-      <CytoscapeReact 
-      data={data} 
-      />
+      <CytoscapeReact data={data} />
     </div>
   );
 };
@@ -57,8 +57,8 @@ const App = () => {
 ### 完整示例
 
 ```tsx
-import { CytoscapeReact, SearchType } from 'react-kggraph';
-import 'react-kggraph/style.css';
+import { CytoscapeReact, SearchType, actionList } from 'react-kggraph';
+import { MinusCircleOutlined } from '@ant-design/icons';
 
 const App = () => {
   const data = {
@@ -108,6 +108,18 @@ const App = () => {
         graphInfo={{ kgId: 3, searchNodes: ['刘培', '许冉'] }}
         stepNextApi={stepNextApi}
         knowledgeCardApi={knowledgeCardApi}
+        // ActionBar 配置
+        actionBar={{
+          position: 'top-left',
+          actionList: actionList.filter(item => ['queryStatistics', 'layout'].includes(item.key)),
+        }}
+        // 右键菜单配置
+        actionCircle={[
+          { ids: 'contract', label: '展收实体' },
+          { ids: 'expanded', label: '展收属性' },
+          { ids: 'nodeInfo', label: '节点信息' },
+          { ids: 'customNew', label: '自定义菜单', onClick: (node) => console.log('自定义', node) },
+        ]}
       />
     </div>
   );
@@ -118,16 +130,147 @@ const App = () => {
 
 | 属性 | 类型 | 必填 | 说明 |
 |------|------|------|------|
-| data | `GraphData \| any[]` | ✅ | 图谱数据 |
-| getAllGraphData | `(params?: any) => Promise<any>` | ❌ | 获取完整图谱数据的回调函数 |
+| data | `GraphData \| any[]` | ❌ | 图谱数据 |
+| getAllGraphData | `(params?: any) => void` | ❌ | 获取完整图谱数据的回调函数 |
 | searchType | `SearchType` | ❌ | 搜索类型 |
 | highPathAnalysis | `string[]` | ❌ | 高亮路径分析的节点ID数组 |
 | graphInfo | `GraphInfo` | ❌ | 图谱配置信息 |
 | stepNextApi | `(params: any) => Promise<any>` | ❌ | 下一步API（用于知识图谱展开） |
 | knowledgeCardApi | `(params: any) => Promise<any>` | ❌ | 知识卡片API |
+| colors | `GraphColors` | ❌ | 颜色配置 |
+| actionBar | `ActionBarConfig` | ❌ | ActionBar 工具栏配置 |
+| actionCircle | `ActionCircleItem[]` | ❌ | 右键菜单配置 |
 
-## 类型定义
+## ActionBar 配置
+
+ActionBar 工具栏支持自定义位置和按钮列表。
+
+### ActionBarConfig
+
+```typescript
+interface ActionBarConfig {
+  /** 位置配置 */
+  position?: ActionBarPosition;
+  /** 按钮列表配置 */
+  actionList?: ActionBarItem[];
+}
+
+type ActionBarPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | {
+  top?: string | number;
+  right?: string | number;
+  bottom?: string | number;
+  left?: string | number;
+};
+```
+
+### ActionBarItem
+
+```typescript
+interface ActionBarItem {
+  key: string;                    // 唯一标识
+  title: string;                   // 显示文本
+  icon?: React.ReactNode[];        // 图标（支持多个 antd icon）
+  onClick?: (params?: any) => void; // 点击事件
+}
+```
+
+### 默认按钮列表
+
+组件内置以下默认按钮：
+
+| key | title | 说明 |
+|-----|-------|------|
+| queryStatistics | 查询统计 | 统计面板 |
+| layout | 布局 | 布局切换 |
+| graphDisplaySettings | 图显示设置 | 图形显示配置 |
+| analysis | 分析 | 分析功能 |
+| select | 选择 | 选择功能 |
+| downloadData | 下载数据 | 导出数据 |
+| hideAttributes | 隐藏属性 | 隐藏节点属性 |
+| textPosition | 文字位置 | 文字位置调整 |
+| clearCanvas | 清空画布 | 清空画布 |
+| nodeZoom | 节点缩放 | 节点缩放控制 |
+| canvasZoom | 画布缩放 | 画布缩放控制 |
+
+### ActionBar 示例
+
+```tsx
+// 方式1：使用预定义 actionList
+import { actionList } from 'react-kggraph';
+import { MinusCircleOutlined } from '@ant-design/icons';
+
+<CytoscapeReact
+  actionBar={{
+    position: 'top-left',
+    actionList: actionList.filter(item => ['queryStatistics', 'layout'].includes(item.key)),
+  }}
+/>
+
+// 方式2：自定义按钮
+<CytoscapeReact
+  actionBar={{
+    position: 'bottom-right',
+    actionList: [
+      { key: 'customBtn', title: '自定义按钮', icon: [<MinusCircleOutlined key="icon" />], onClick: () => console.log('点击') },
+    ],
+  }}
+/>
+```
 
+## 右键菜单配置（actionCircle）
+
+右键菜单支持过滤、追加自定义菜单项。
+
+### ActionCircleItem
+
+```typescript
+interface ActionCircleItem {
+  ids: string;                    // 唯一标识
+  label: string;                  // 显示文本
+  onClick?: (node: any) => void;  // 点击事件回调
+}
+```
+
+### 默认菜单项
+
+| ids | label | 说明 |
+|-----|-------|------|
+| contract | 展收实体 | 收缩实体节点 |
+| expanded | 展收属性 | 展开节点属性 |
+| nodeInfo | 节点信息 | 查看节点详情 |
+| knowledgeCard | 知识卡片 | 查看知识卡片 |
+| selRelate | 选中关联 | 高亮关联节点 |
+| pathAnalysis | 路径分析 | 路径分析功能 |
+
+### actionCircle 示例
+
+```tsx
+// 方式1：筛选默认菜单
+<CytoscapeReact
+  actionCircle={[
+    { ids: 'contract', label: '展收实体' },
+    { ids: 'expanded', label: '展收属性' },
+    { ids: 'nodeInfo', label: '节点信息' },
+  ]}
+/>
+
+// 方式2：覆盖默认 action
+<CytoscapeReact
+  actionCircle={[
+    { ids: 'nodeInfo', label: '节点信息', onClick: (node) => console.log('自定义', node) },
+  ]}
+/>
+
+// 方式3：追加自定义菜单项
+<CytoscapeReact
+  actionCircle={[
+    { ids: 'contract', label: '展收实体' },
+    { ids: 'customNew', label: '自定义菜单', onClick: (node) => console.log('新增功能', node) },
+  ]}
+/>
+```
+
+## 类型定义
 
 ### GraphData
 
@@ -167,6 +310,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,73 @@
-const t = (r) => {
-  if (n(r) || Array.isArray(r))
-    try {
-      return JSON.stringify(r);
-    } catch (e) {
-      console.log("JSON.stringify", e);
+const f = ({ cyRef: n, setContextMenu: a, onPathAnalysis: t, setPathNodes: i, actionCircle: l }) => {
+  const d = [
+    {
+      label: "展收实体",
+      ids: "contract",
+      onClick: (e) => {
+        const o = n.current;
+        console.log("新增属性", o);
+      }
+    },
+    {
+      label: "展收属性",
+      ids: "expanded",
+      onClick: (e) => {
+        if (console.log("展开", e), !n.current) {
+          console.error("Cytoscape instance is not available");
+          return;
+        }
+      }
+    },
+    {
+      label: "节点信息",
+      ids: "nodeInfo",
+      onClick: (e) => {
+        console.log("节点信息:", e);
+      }
+    },
+    {
+      label: "知识卡片",
+      ids: "knowledgeCard",
+      onClick: (e) => {
+        const o = n.current;
+        console.log("知识卡片", o);
+      }
+    },
+    {
+      label: "选中关联",
+      ids: "selRelate",
+      onClick: (e) => {
+        const o = n.current;
+        if (!o || !e || typeof e.removed != "function" || e.removed()) {
+          console.error("节点或Cytoscape实例无效"), a((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"), a((r) => ({ ...r, visible: !1 }));
+      }
+    },
+    {
+      label: "路径分析",
+      ids: "pathAnalysis",
+      onClick: (e) => {
+        n.current, console.log(11, e.data("name")), t == null || t(), i([e.data("name"), ""]);
+      }
     }
-  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);
+  ];
+  if (!l || l.length === 0)
+    return d;
+  const u = new Set(l.map((e) => e.ids)), b = d.filter((e) => u.has(e.ids)).map((e) => {
+    const o = l.find((s) => s.ids === e.ids);
+    return o != null && o.onClick ? { ...e, onClick: o.onClick } : e;
+  }), C = new Set(d.map((e) => e.ids)), g = l.filter((e) => !C.has(e.ids)).map((e) => ({
+    ids: e.ids,
+    label: e.label,
+    onClick: e.onClick || ((o) => {
+      console.log(e.label, o);
+    })
+  }));
+  return [...b, ...g];
 };
 export {
-  i as downloadFile,
-  n as isObject,
-  t as jsonStringify,
-  c as jsonStringifyParse
+  f as menuItemsConfig
 };