react-kggraph 0.0.18 → 0.0.20

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,17 +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
 

package/lib/index.es11.js

@@ -1,75 +1,73 @@
-const i = ({ cyRef: n, setContextMenu: r, onPathAnalysis: l, setPathNodes: s }) => [
-  {
-    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;
+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);
       }
-      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实例无效"), r((t) => ({ ...t, visible: !1 }));
-        return;
+    },
+    {
+      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"), ""]);
       }
-      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();
-  //       }
-  //   },
-  // },
-];
+  ];
+  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 menuItemsConfig
+  f as menuItemsConfig
 };

package/lib/index.es13.js

@@ -1,26 +1,20 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useMemo as b } from "react";
+import { useMemo as C } from "react";
 /* empty css           */
-const L = ({
-  items: h = [
-    // { label: '知识卡片' },
-    // { label: '选中关联' },
-    // { label: '路径分析' },
-    // { label: '展收实体' },
-    // { label: '展收属性' },
-    // { label: '节点配置' },
-  ],
+const S = ({
+  items: h = [],
   centerImage: f,
   size: c = 200,
-  onClick: $
+  onClick: $,
+  targetNode: p
 }) => {
-  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);
+  const t = c / 2, a = c / 2 - 10, s = 30, o = 360 / h.length, y = C(() => 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), v = t + a * Math.cos(l), w = t + a * Math.sin(l), A = t + a * Math.cos(i), N = t + a * Math.sin(i), k = t + s * Math.cos(i), I = t + s * Math.sin(i), u = t + s * Math.cos(l), x = t + s * Math.sin(l), g = o > 180 ? 1 : 0, P = `M ${u} ${x} L ${v} ${w} A ${a} ${a} 0 ${g} 1 ${A} ${N} L ${k} ${I} A ${s} ${s} 0 ${g} 0 ${u} ${x}`, M = (a + s) / 2 + 5, R = t + M * Math.cos(m), b = t + M * Math.sin(m);
     return {
       ...n,
-      path: I,
-      textX: P,
-      textY: R,
+      path: P,
+      textX: R,
+      textY: b,
       rotation: (r + 0.5) * o - 90
     };
   }), [h, o, t, a, s]);
@@ -28,7 +22,7 @@ const L = ({
     /* @__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: [
+      y.map((n, r) => /* @__PURE__ */ d("g", { onClick: () => $(n, p), className: "sector-group", children: [
         /* @__PURE__ */ e(
           "path",
           {
@@ -68,5 +62,5 @@ const L = ({
   ] });
 };
 export {
-  L as default
+  S as default
 };