feat: add diff graph

apps/basic/config/config.ts

@@ -10,4 +10,5 @@ export default defineConfig({
   title: 'XFlow Basic',
   favicons: ['/favicon.ico'],
   mfsu: false,
+  esbuildMinifyIIFE: true,
 });

apps/basic/config/routes.ts

@@ -3,4 +3,5 @@ export const routes = [
   { path: '/basic', component: '@/pages/basic' },
   { path: '/dnd', component: '@/pages/dnd' },
   { path: '/dag', component: '@/pages/dag' },
+  { path: '/diff', component: '@/pages/diff' },
 ];

apps/basic/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@antv/xflow": "workspace:*",
+    "@antv/xflow-diff": "workspace:*",
     "highlight.js": "^10.7.3",
     "umi": "^4.0.64"
   },

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

@@ -0,0 +1,216 @@
+/* eslint-disable */
+import { DiffGraph } from '@antv/xflow-diff';
+
+// 变更前数据
+const originalData = {
+  nodes: [
+    {
+      id: '1',
+      shape: 'rect',
+      x: 100,
+      y: 100,
+      width: 100,
+      height: 40,
+      data: {
+        a: 'test',
+      },
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      label: 'svg',
+    },
+    {
+      id: '2',
+      shape: 'rect',
+      x: 50,
+      y: 200,
+      width: 100,
+      height: 40,
+      label: 'dog',
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      data: {
+        animal: {
+          name: 'dog',
+          age: 1,
+        },
+      },
+    },
+    {
+      id: '3',
+      shape: 'rect',
+      x: 180,
+      y: 200,
+      width: 100,
+      height: 40,
+      label: 'cat',
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      data: {
+        animal: {
+          name: 'cat',
+          age: 1,
+        },
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-1',
+      source: '1',
+      target: '2',
+      attrs: {
+        line: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+        },
+      },
+    },
+    {
+      id: 'edge-2',
+      source: '1',
+      target: '3',
+      data: {
+        a: 'test',
+      },
+      attrs: {
+        line: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+        },
+      },
+    },
+  ],
+};
+
+// 变更后数据
+const currentData = {
+  nodes: [
+    {
+      id: '1',
+      shape: 'rect',
+      x: 100,
+      y: 100,
+      width: 100,
+      height: 40,
+      data: {
+        a: 'test1',
+      },
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      label: 'svg',
+    },
+    {
+      id: '3',
+      shape: 'rect',
+      x: 180,
+      y: 200,
+      width: 100,
+      height: 40,
+      label: 'cat',
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      data: {
+        animal: {
+          name: 'cat',
+          age: 1,
+        },
+      },
+    },
+    {
+      id: '4',
+      shape: 'rect',
+      x: 250,
+      y: 300,
+      width: 100,
+      height: 40,
+      label: 'fish',
+      attrs: {
+        body: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+          fill: '#fff',
+          rx: 6,
+          ry: 6,
+        },
+      },
+      data: {
+        animal: {
+          name: 'fish',
+          age: 1,
+        },
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'edge-3',
+      source: '3',
+      target: '4',
+      attrs: {
+        line: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+        },
+      },
+    },
+    {
+      id: 'edge-2',
+      source: '1',
+      target: '3',
+      data: {
+        a: 'test1',
+      },
+      attrs: {
+        line: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+        },
+      },
+    },
+  ],
+};
+
+const Page = () => {
+  return (
+    <div style={{ height: 500 }}>
+      <DiffGraph originalData={originalData} currentData={currentData} />
+    </div>
+  );
+};
+
+export default Page;

packages/diff/README.en-US.md

@@ -0,0 +1,3 @@
+English (US) | [简体中文](README.zh-Hans.md)
+
+# Diff

packages/diff/README.md

@@ -0,0 +1,3 @@
+[English (US)](README.md) | 简体中文
+
+# Diff

packages/diff/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('@antv/testing/config/react');

packages/diff/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@antv/xflow-diff",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/typing/index.d.ts",
+  "private": true,
+  "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:typing": "tsc --noEmit",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@antv/xflow": "workspace:^"
+  },
+  "devDependencies": {
+    "@antv/config-tsconfig": "workspace:^",
+    "@antv/config-tsup": "workspace:^",
+    "@antv/testing": "workspace:^",
+    "@types/react": "^18.0.28"
+  },
+  "peerDependencies": {
+    "react": "^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/project.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://cdn.jsdelivr.net/npm/nx@latest/schemas/project-schema.json",
+  "targets": {
+    "lint": {},
+    "ci": {}
+  }
+}