feat: add diffpanel on diff component

apps/basic/src/pages/dag/toolbar/index.tsx

@@ -1,9 +1,9 @@
-import { PlayCircleOutlined, CopyOutlined } from '@ant-design/icons';
-import type { Edge, NodeOptions, Node } from '@antv/xflow';
+import { CopyOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import type { Edge, Node, NodeOptions } from '@antv/xflow';
 import {
-  useGraphInstance,
   useClipboard,
   useGraphEvent,
+  useGraphInstance,
   useGraphStore,
   useKeyboard,
 } from '@antv/xflow';
@@ -88,7 +88,7 @@ const Toolbar = () => {
         type="primary"
         size="small"
         style={{ fontSize: 12 }}
-        onClick={handleExcute}
+        onClick={handleExecute}
       >
         <PlayCircleOutlined />
         全部执行

apps/basic/src/pages/diff/index.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable */
 import { DiffGraph } from '@antv/xflow-diff';
+import { useState } from 'react';
 
 // 变更前数据
 const originalData = {
@@ -318,9 +318,23 @@ const currentData = {
 };
 
 const Page = () => {
+  const [showDiffDetail, setShowDiffDetail] = useState(true);
+
+  const onClickHandle = () => {
+    setShowDiffDetail(!showDiffDetail);
+  };
   return (
-    <div style={{ height: 500 }}>
-      <DiffGraph originalData={originalData} currentData={currentData} />
+    <div>
+      <button onClick={onClickHandle}>{`${
+        showDiffDetail ? '隐藏' : '展示'
+      }变更详情`}</button>
+      <div style={{ height: 500 }}>
+        <DiffGraph
+          originalData={originalData}
+          currentData={currentData}
+          showDiffDetail={showDiffDetail}
+        />
+      </div>
     </div>
   );
 };

packages/diff/README.md

@@ -1,3 +1,104 @@
 [English (US)](README.md) | 简体中文
 
-# Diff
+# XFlow Diff
+
+XFlow Diff 是一个用于跟踪、比较和合并图形结构（如节点和边）差异的工具，适用于图形编辑器
+和可视化应用。
+
+## 目录
+
+- [特性](#特性)
+- [安装](#安装)
+- [使用示例](#使用示例)
+
+## 特性
+
+- 支持对比不同版本的图形状态。
+- 支持自定义比较函数和变更详情面板的展示。
+
+## 安装
+
+您可以通过 npm 安装 XFlow Diff：
+
+```shell
+# npm
+$ npm install @antv/xflow --save
+
+# yarn
+$ yarn add @antv/xflow
+
+# pnpm
+$ pnpm add @antv/xflow
+```
+
+## 使用示例
+
+请参照：apps/basic/src/pages/diff/index.tsx
+
+```tsx
+import React from 'react';
+import { DiffGraph } from '@antv/xflow-diff';
+
+const originalData = {
+  nodes: [
+    { id: 'node1', label: 'Node 1' },
+    { id: 'node2', label: 'Node 2' },
+  ],
+  edges: [{ source: 'node1', target: 'node2' }],
+};
+
+const currentData = {
+  nodes: [
+    { id: 'node1', label: 'Node 1' },
+    { id: 'node2', label: 'Node 2' },
+    { id: 'node3', label: 'Node 3' },
+  ],
+  edges: [
+    { source: 'node1', target: 'node2' },
+    { source: 'node2', target: 'node3' },
+  ],
+};
+
+const App = () => {
+  return (
+    <DiffGraph
+      originalData={originalData}
+      currentData={currentData}
+      showDiffDetail={true}
+    />
+  );
+};
+```
+
+## API 详情
+
+```tsx
+export interface DiffGraphOptions {
+  /** 原始数据 */
+  originalData: GraphData;
+  /** 变更后数据 */
+  currentData: GraphData;
+  /** 新增颜色 */
+  addColor?: string;
+  /** 新增节点扩展属性 */
+  addExtAttr?: object;
+  /** 删除颜色 */
+  delColor?: string;
+  /** 删除节点扩展属性 */
+  delExtAttr?: object;
+  /** 变更颜色 */
+  changeColor?: string;
+  /** 变更节点扩展属性 */
+  changeExtAttr?: object;
+  /** 画布配置 */
+  graphOptions?: GraphOptions;
+  /** 展示diff详情 */
+  showDiffDetail?: boolean;
+  /** 自定义渲染diff详情 */
+  customRenderDiffDetail?: (detail: DiffInfo[]) => React.ReactNode;
+  /** 节点描述字段属性key  */
+  nodeDescKey?: string;
+  /** 边描述字段属性key  */
+  edgeDescKey?: string;
+}
+```

packages/diff/package.json

@@ -1,28 +1,36 @@
 {
   "name": "@antv/xflow-diff",
-  "version": "1.0.0",
+  "version": "1.1.0",
+  "private": false,
   "description": "",
+  "keywords": [
+    "xflow",
+    "x6",
+    "antv"
+  ],
+  "bugs": {
+    "url": "https://github.com/antvis/XFlow/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/XFlow.git",
+    "directory": "packages/diff"
+  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/typing/index.d.ts",
-  "private": false,
   "files": [
     "dist",
     "src"
   ],
-  "keywords": [
-    "xflow",
-    "x6",
-    "antv"
-  ],
   "scripts": {
-    "setup": "tsup src/index.ts",
     "build": "tsup src/index.ts",
     "dev": "tsup src/index.ts --watch",
-    "lint:js": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:css": "stylelint --allow-empty-input 'src/**/*.{css,less}'",
     "lint:format": "prettier --check *.md *.json 'src/**/*.{js,jsx,ts,tsx,css,less,md,json}'",
+    "lint:js": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:typing": "tsc --noEmit",
+    "setup": "tsup src/index.ts",
     "test": "jest --coverage"
   },
   "dependencies": {
@@ -39,14 +47,6 @@
     "react": ">=16.8.6 || >=17.0.0 || >=18.0.0",
     "react-dom": ">=16.8.6 || >=17.0.0 || >= 18.0.0"
   },
-  "bugs": {
-    "url": "https://github.com/antvis/XFlow/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/antvis/XFlow.git",
-    "directory": "packages/diff"
-  },
   "publishConfig": {
     "access": "public"
   }

packages/diff/src/components/DiffDetailPanel/index.less

@@ -0,0 +1,17 @@
+.xflow-diff-panel {
+  display: flex;
+  overflow: auto;
+  height: 30%;
+  min-height: 10%;
+  width: 100%;
+
+  .info-tag {
+    font-size: small;
+    padding: 3px;
+  }
+
+  .table-header {
+    font-weight: bold;
+    font-size: 24px;
+  }
+}

packages/diff/src/components/DiffDetailPanel/index.tsx

@@ -0,0 +1,111 @@
+import type { EdgeOptions, NodeOptions } from '@antv/xflow';
+import { Table, Tag } from 'antd';
+import React from 'react';
+
+import type { DiffDetailPanelProps, DiffInfo } from '@/types';
+
+import './index.less';
+
+export const DiffDetailPanel: React.FC<DiffDetailPanelProps> = (props) => {
+  const {
+    showDiffDetail,
+    diffDetailInfo,
+    customRenderDiffDetail,
+    addColor,
+    delColor,
+    changeColor,
+    nodeDescKey = 'label',
+    edgeDescKey = 'id',
+  } = props;
+  if (!showDiffDetail || !diffDetailInfo?.length) {
+    return <React.Fragment />;
+  }
+
+  /**
+   * diff详情描述词典
+   */
+  const DiffTypeDict: {
+    [keys in Exclude<DiffInfo['diffType'], 'NONE'>]: {
+      color: string;
+      text: string;
+    };
+  } = {
+    ADD: {
+      color: addColor,
+      text: '新增',
+    },
+    DEL: {
+      color: delColor,
+      text: '删除',
+    },
+    CHG: {
+      color: changeColor,
+      text: '变更',
+    },
+  };
+
+  const CellDict: {
+    [keys in DiffInfo['cellType']]: string;
+  } = {
+    Edge: '边',
+    Node: '节点',
+  };
+
+  const getDesc = (data: DiffInfo['currentData'], cellType: DiffInfo['cellType']) => {
+    if (cellType === 'Node') {
+      return (data as NodeOptions)[nodeDescKey];
+    } else {
+      return (data as EdgeOptions)[edgeDescKey];
+    }
+  };
+
+  const defaultDiffPanel = (
+    <Table<DiffInfo>
+      title={() => <span className="table-header">{'Diff变更详情列表'}</span>}
+      pagination={false}
+      bodyStyle={{ textAlign: 'center' }}
+      bordered
+      columns={[
+        {
+          title: '变更详情',
+          dataIndex: 'currentData',
+          render: (currentData: DiffInfo['currentData'], record) => {
+            const oriPreStr = record.originalData
+              ? getDesc(record.originalData, record.cellType) + ' -> '
+              : '';
+            const curStr = getDesc(currentData, record.cellType);
+            return `${oriPreStr}${curStr}`;
+          },
+        },
+        {
+          title: '元素类型',
+          dataIndex: 'cellType',
+          render: (text: DiffInfo['cellType']) => {
+            return CellDict[text];
+          },
+        },
+        {
+          title: '变更类型',
+          dataIndex: 'diffType',
+          render: (text: Exclude<DiffInfo['diffType'], 'NONE'>) => {
+            const dicVal = DiffTypeDict[text];
+            return (
+              <Tag color={dicVal.color} className="info-tag">
+                {dicVal.text}
+              </Tag>
+            );
+          },
+        },
+      ]}
+      dataSource={diffDetailInfo}
+    />
+  );
+
+  return (
+    <div className="xflow-diff-panel">
+      {customRenderDiffDetail
+        ? customRenderDiffDetail(diffDetailInfo)
+        : defaultDiffPanel}
+    </div>
+  );
+};