-
+
+
+
+
+
);
};
diff --git a/packages/diff/README.md b/packages/diff/README.md
index 3ee31410..b2da062e 100644
--- a/packages/diff/README.md
+++ b/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 (
+
+ );
+};
+```
+
+## 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;
+}
+```
diff --git a/packages/diff/package.json b/packages/diff/package.json
index 872784df..8245e4fe 100644
--- a/packages/diff/package.json
+++ b/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"
}
diff --git a/packages/diff/src/components/DiffDetailPanel/index.less b/packages/diff/src/components/DiffDetailPanel/index.less
new file mode 100644
index 00000000..f07dbab3
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/diff/src/components/DiffDetailPanel/index.tsx b/packages/diff/src/components/DiffDetailPanel/index.tsx
new file mode 100644
index 00000000..2fef9a3d
--- /dev/null
+++ b/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
= (props) => {
+ const {
+ showDiffDetail,
+ diffDetailInfo,
+ customRenderDiffDetail,
+ addColor,
+ delColor,
+ changeColor,
+ nodeDescKey = 'label',
+ edgeDescKey = 'id',
+ } = props;
+ if (!showDiffDetail || !diffDetailInfo?.length) {
+ return ;
+ }
+
+ /**
+ * diff详情描述词典
+ */
+ const DiffTypeDict: {
+ [keys in Exclude]: {
+ 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 = (
+
+ title={() => {'Diff变更详情列表'}}
+ 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) => {
+ const dicVal = DiffTypeDict[text];
+ return (
+
+ {dicVal.text}
+
+ );
+ },
+ },
+ ]}
+ dataSource={diffDetailInfo}
+ />
+ );
+
+ return (
+
+ {customRenderDiffDetail
+ ? customRenderDiffDetail(diffDetailInfo)
+ : defaultDiffPanel}
+
+ );
+};
diff --git a/packages/diff/src/components/DiffGraph/index.tsx b/packages/diff/src/components/DiffGraph/index.tsx
index a86ab3d7..8bd84a5d 100644
--- a/packages/diff/src/components/DiffGraph/index.tsx
+++ b/packages/diff/src/components/DiffGraph/index.tsx
@@ -3,9 +3,11 @@ import { XFlow, XFlowGraph } from '@antv/xflow';
import type { FC } from 'react';
import React, { useEffect, useState } from 'react';
-import type { DiffGraphOptions } from '@/types';
+import type { DiffGraphOptions, DiffInfo } from '@/types';
import { compare, syncGraph } from '@/util';
+import { DiffDetailPanel } from '../DiffDetailPanel';
+
import '../../styles/index.less';
import Tool from './tool';
@@ -20,6 +22,8 @@ const DiffGraph: FC = (props) => {
changeColor = '#ffc069', // 变更节点的颜色
changeExtAttr,
graphOptions,
+ showDiffDetail = false,
+ customRenderDiffDetail,
} = props;
const [originalDataWithDiffInfo, setOriginalDataWithDiffInfo] = useState<{
@@ -32,6 +36,7 @@ const DiffGraph: FC = (props) => {
}>({ nodes: [], edges: [] });
const [status, setStatus] = useState<'init' | 'computing' | 'done'>('init');
const [graphs, setGraphs] = useState[]>([]);
+ const [diffDetailInfo, setDiffDetailInfo] = useState();
useEffect(() => {
// 获取 diff 信息，注入 attr
@@ -39,6 +44,7 @@ const DiffGraph: FC = (props) => {
const {
originalDataWithDiffInfo: originalDataWithDiffInfoRe,
currentDataWithDiffInfo: currentDataWithDiffInfoRe,
+ diffDetailInfo: diffDetailInfoRe,
} = compare(
originalData,
currentData,
@@ -52,6 +58,7 @@ const DiffGraph: FC = (props) => {
setOriginalDataWithDiffInfo(originalDataWithDiffInfoRe);
setCurrentDataWithDiffInfo(currentDataWithDiffInfoRe);
+ setDiffDetailInfo(diffDetailInfoRe);
setStatus('done');
}, []); // eslint-disable-line
@@ -69,50 +76,61 @@ const DiffGraph: FC = (props) => {
};
return (
-
- {/* 左图 */}
- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
- {/* @ts-ignore */}
-
- {status === 'done' && (
-
- )}
-
+ {/* diff详情展示 */}
+
+
+ {/* 左图 */}
+ {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+ {/* @ts-ignore */}
+
+ {status === 'done' && (
+
+ )}
+
-
+ }}
+ {...graphOptions}
+ />
+
- {/* 右图 */}
- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
- {/* @ts-ignore */}
-
- {status === 'done' && (
-
- )}
-
+ {status === 'done' && (
+
+ )}
+
-
+ }}
+ {...graphOptions}
+ />
+
+