chore(release): 🚀 publish

* chore: 🔧 update publish script

* feat: ✨ expose the selection api

.codecov.yml

@@ -11,11 +11,6 @@ coverage:
         threshold: 1%
         flags:
           - x6
-      x6-vector:
-        threshold: 1%
-        target: 80% # will fail a Pull Request if coverage is less than 80%
-        flags:
-          - x6-vector
       x6-geometry:
         threshold: 1%
         flags:
@@ -26,9 +21,6 @@ flags:
     paths:
       # filter the folder(s) you wish to measure by that flag
       - packages/x6
-  x6-vector:
-    paths:
-      - packages/x6-vector
   x6-geometry:
     paths:
       - packages/x6-geometry

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
         uses: actions/checkout@v2
@@ -54,12 +54,6 @@ jobs:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6/test/coverage/lcov.info
           flags: x6
-      - name: 💡　Codecov(x6-vector)
-        uses: codecov/codecov-action@v1
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./packages/x6-vector/test/coverage/lcov.info
-          flags: x6-vector
       - name: 💡　Codecov(x6-geometry)
         uses: codecov/codecov-action@v1
         with:

.github/workflows/config/labels.yml

@@ -138,9 +138,6 @@
 - name: pkg:x6
   color: eeeeee
   description: Denotes a PR that changes packages/x6
-- name: pkg:x6-react
-  color: eeeeee
-  description: Denotes a PR that changes packages/x6-react
 - name: pkg:x6-react-shape
   color: eeeeee
   description: Denotes a PR that changes packages/x6-react-shape

.github/workflows/delete-stale-releases.yml

@@ -20,7 +20,6 @@ jobs:
           group: '(?!^)@.*$'
           exclude: |
             @antv/x6@**
-            @antv/x6-react@**
             @antv/x6-vue-shape@**
             @antv/x6-react-shape@**
             @antv/x6-angular-shape@**

.github/workflows/deploy-sites.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
         uses: actions/checkout@v2

.github/workflows/preview.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
       - uses: actions/checkout@v2
 

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
         uses: actions/checkout@v2

.github/workflows/update-cache.yaml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
         uses: actions/checkout@v2

.gitignore

@@ -11,3 +11,5 @@ es
 dist
 *.pem
 !mock-cert.pem
+tmp
+test

AUTHORS

@@ -37,6 +37,7 @@ lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
 lvhuiyang <ilvhuiyang@gmail.com>
+newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
 niexq <niexq@firstgrid.cn>
 pengxingjian.pxj <pengxingjian.pxj@alibaba-inc.com>

CONTRIBUTING.md

@@ -110,8 +110,8 @@ Look at [these files](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJyg
 
 X6 uses semantic versioning in release process based on [semver](https://semver.org/).
 
-- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
-- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
+- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
+- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)
 
 ### Branch Strategy
 

CONTRIBUTING.zh-CN.md

@@ -1,6 +1,6 @@
 # 代码贡献规范
 
-有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!
+如果你有任何疑问，欢迎提交 [issue](https://github.com/antvis/x6/issues) 或 [PR](https://github.com/antvis/x6/pulls)!
 
 ## 提交 issue
 
@@ -109,8 +109,8 @@ BREAKING CHANGE:
 
 ## 发布管理
 
-- [Publishing maintenance releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/maintenance-releases.md)
-- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/pre-releases.md)
+- [发布维护版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/maintenance-releases.md)
+- [发布预发版本](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)
 
 X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布。
 
@@ -121,7 +121,7 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布
 
 ### 发布策略
 
-每个大版本都有一个发布经理管理（PM），他/她要做的事情
+在每个大版本的发布中，都会有一个PM，他在发布的不同阶段负有以下职责：
 
 #### 准备工作：
 
@@ -135,6 +135,6 @@ X6 基于 [semver](http://semver.org/lang/zh-CN/) 语义化版本号进行发布
 
 #### 发布时：
 
-- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x`（ v 为当前版本，例如 `1.x`）。
+- 将老的稳定版本（master）备份到以当前大版本为名字的分支上（例如 `1.x`），并设置 tag 为 {v}.x（ v 为当前版本，例如 `1.x`）。
 - 发布新的稳定版本到 [npm](http://npmjs.com)，并通知上层框架进行更新。
 - `npm publish` 之前，请先阅读[『我是如何发布一个 npm 包的』](https://fengmk2.com/blog/2016/how-i-publish-a-npm-package)。

README.en-us.md

@@ -2,10 +2,9 @@
 
 <p align="center"><img src="/flow.svg"></p>
 
+<p align="center"><strong>Graph Editing Engine Of AntV</strong></p>
 <p align="center"><strong>JavaScript diagramming library that uses SVG and HTML for rendering</strong></p>
 
-<p align="center"><a href="https://x6.antv.vision/en/docs/tutorial/about">Tutorials</a> · <a href="https://x6.antv.vision/en/examples/gallery">Examples</a> · <a href="https://x6.antv.vision/en/docs/api/graph">API</a></p>
-
 <p align="center">
 <a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
 <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a>
@@ -23,15 +22,22 @@
 
 ## Features
 
-- 🌱　easy-to-customize: based on well known SVG/HTML/CSS or React/Vue to custom nodes and edges
-- 🚀　out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
-- 🧲　data-driven: base on MVC architecture, you can focus on data logic and business logic
-- 💯　highly-event-driven: you can react on any event that happens inside the graph
+- 🌱　Easy-to-customize: based on well known SVG/HTML/CSS or React/Vue/Angular to custom nodes and edges
+- 🚀　Out-of-the-box: built-in 10+ plugins, such as selection, dnd, redo/undo, snapline, minimap, etc.
+- 🧲　Data-driven: base on MVC architecture, you can focus on data logic and business logic
+- 💯　Highly-event-driven: you can react on any event that happens inside the graph
+
+## Environment Support
+
+- Modern browsers and Internet Explorer 11 (with polyfills)
+- Server-side Rendering
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- | --- |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
 
 ## Installation
 
-### NPM/Yarn
-
 ```shell
 # npm
 $ npm install @antv/x6 --save
@@ -40,51 +46,20 @@ $ npm install @antv/x6 --save
 $ yarn add @antv/x6
 ```
 
-### CDNs
-
-For learning purposes, you can use the latest version with one of the CDN:
-
-- https://unpkg.com/@antv/x6/dist/x6.js
-- https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
-- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js
-
-```html
-<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
-```
-
-For production, we recommend linking to a specific version number to avoid unexpected breakage from newer versions:
-
-- https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
-- https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
-- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js
-
-```html
-<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
-```
-
 ## Usage
 
-**Step 1**: specify a container the render the diagram.
-
 ```html
 <div id="container" style="width: 600px; height: 400px"></div>
 ```
 
-**Step 2**: render nodes and edges.
-
 ```ts
-// import from node_modules
 import { Graph } from '@antv/x6'
-// or use the global variable `X6` exported from CDN links
-// const { Graph } = X6
 
-// Create an instance of Graph.
 const graph = new Graph({
   container: document.getElementById('container'),
   grid: true
 })
 
-// Render source node.
 const source = graph.addNode({
   x: 300,
   y: 40,
@@ -93,7 +68,6 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
-// Render target node.
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -102,94 +76,23 @@ const target = graph.addNode({
   label: 'World',
 })
 
-// Render edge from source to target.
 graph.addEdge({
   source,
   target,
 })
 ```
 
-<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />
+## Links
 
-## Documentation
-
-- [About](https://x6.antv.vision/en/docs/tutorial/about)
-- [Getting Started](https://x6.antv.vision/en/docs/tutorial/getting-started)
-- [Basic Usage](https://x6.antv.vision/en/docs/tutorial/basic/graph)
-- [Advanced Practice](https://x6.antv.vision/en/docs/tutorial/intermediate/serialization)
-- [Senior Guidance](https://x6.antv.vision/en/docs/tutorial/advanced/animation)
-- [ChangeLog](https://x6.antv.vision/en/docs/tutorial/log)
-
-## App Demos Build with X6
-
-<center>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#flowchart" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ" alt="Flow"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#dag" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*RPiGRaSus3UAAAAAAAAAAAAAARQnAQ" alt="Dag"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#mindmap" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*GsEGSaBkc84AAAAAAAAAAAAAARQnAQ" alt="MindMap"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#bpmn" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*aPSySa8oz4sAAAAAAAAAAAAAARQnAQ" alt="BPMN"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#class" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ" alt="Class"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#org" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*FWx5SYDzLw4AAAAAAAAAAAAAARQnAQ" alt="ORG"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#er" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*7yVJQoM6-9AAAAAAAAAAAAAAARQnAQ" alt="ER"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#swimlane" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*mUVrSJMkP1UAAAAAAAAAAAAAARQnAQ" alt="SwimLane"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#tree" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*XDnNRqnj4WkAAAAAAAAAAAAAARQnAQ" alt="Tree"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#elk" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Z3ebTKy0w9cAAAAAAAAAAAAAARQnAQ" alt="ELK"/>
-  </a>
-</center>
-
-## Communication
-
-Welcome to join the **X6 Communication Group** (Scan the QR Code to Join us). We also welcome the github [issues](https://github.com/antvis/x6/issues).
-
-<a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
-</a>
+- [Documents](https://x6.antv.vision/zh/docs/tutorial/about)
+- [Samples](https://x6.antv.vision/zh/examples/gallery)
+- [Blog](https://www.yuque.com/antv/x6/gcinvi)
+- [Versioning Release Note](https://www.yuque.com/antv/x6/bbfu6r)
+- [FAQ](https://www.yuque.com/antv/x6/be9pfx)
+- [CodeSanbox Template](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
 
 ## Development
 
-This repo is based on [lerna](https://github.com/lerna/lerna) with the following structure:
-
-```
-.
-├── examples
-│   ├── x6-app-dag            # example of dag graph
-│   ├── x6-app-draw           # example of flowchart
-│   ├── x6-app-er             # example of ER chart
-│   └── x6-example-features   # example of basic features
-├── packages
-│   ├── x6                    # X6
-│   ├── x6-react              # wrap X6 with react(reserved)
-│   ├── x6-react-components   # react componets to build graph apps
-│   ├── x6-react-shape        # support render node with react
-│   └── x6-vue-shape          # support render node with vue
-└── sites
-    ├── x6-sites              # sites and documents
-    ├── x6-sites-demos        # demos in documents
-    └── x6-sites-demos-helper # tools to build demos
-```
-
-We need to install some necessary global tools before getting started.
-
 ```shell
 # install yarn and lerna
 $ npm install yarn -g
@@ -197,37 +100,19 @@ $ npm install lerna -g
 
 # install deps and build
 $ yarn bootstrap
-```
 
-Then we can `cd` to dirs to development and debugging.
-
-Such as, we can start `examples/x6-example-features` locally:
-
-```shell
-cd examples/x6-example-features
-
-yarn start
-```
-
-When need to fix some bugs of X6, we can start with **watch** mode:
-
-```shell
+# enter the specified project development and debugging
 cd packages/x6
+yarn build:watch
 
-// build esm to "em" dir
-yarn build:watch:esm
-
-// build commonjs to "lib" dir
-yarn build:watch:cjs
+# start example to see the effect
+cd examples/x6-example-features
+yarn start
 ```
 
 ## Contributing
 
-Please let us know how can we help. Do check out [issues](https://github.com/antvis/x6/issues) for bug reports or suggestions first.
-
-To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md).
-
-## Contributors
+To become a contributor, please follow our [contributing guide](/CONTRIBUTING.md). If you are an active contributor, you can apply to be a outside collaborator.
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

README.md

@@ -1,10 +1,9 @@
 简体中文 | [English](/README.en-us.md)
 
-<p align="center"><img src="/flow.svg"></p>
+<p align="center"><img alt="flow" src="/flow.svg"></p>
 
 <p align="center"><strong>X6 是 AntV 旗下的图编辑引擎</strong></p>
 <p align="center"><strong>提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用</strong></p>
-<p align="center"><a href="https://x6.antv.vision/zh/docs/tutorial/about">教程</a> • <a href="https://x6.antv.vision/zh/examples/gallery">示例</a> • <a href="https://x6.antv.vision/zh/docs/api/graph">API</a></p>
 
 <p align="center">
 <a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
@@ -21,17 +20,23 @@
 <a href="https://x6.antv.vision"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
 </p>
 
-
 ## 特性
 
-- 🌱　极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互
+- 🌱　极易定制：支持使用 SVG/HTML/React/Vue/Angular 定制节点样式和交互
 - 🚀　开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
 - 🧲　数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
 - 💯　事件驱动：完备的事件系统，可以监听图表内发生的任何事件
 
-## 安装
+## 兼容环境
 
-### 使用 NPM/Yarn
+- 现代浏览器和 IE11（需要 polyfills）
+- 支持服务端渲染。
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
+| --- | --- | --- | --- |
+| IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
+
+## 安装
 
 ```shell
 # npm
@@ -41,51 +46,20 @@ $ npm install @antv/x6 --save
 $ yarn add @antv/x6
 ```
 
-### 使用 CDN
-
-可以使用下面任意一个最新版本的 CDN 地址:
-
-- https://unpkg.com/@antv/x6/dist/x6.js
-- https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js
-- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.3.20/x6.js
-
-```html
-<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
-```
-
-在生产环境中，建议使用指定版本号的链接，以避免版本更新带来的意外破坏：
-
-- https://unpkg.com/@antv/x6@1.1.1/dist/x6.js
-- https://cdn.jsdelivr.net/npm/@antv/x6@1.1.1/dist/x6.js
-- https://cdnjs.cloudflare.com/ajax/libs/antv-x6/1.1.1/x6.js
-
-```html
-<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>
-```
-
-## 快速使用
-
-**Step 1**: 指定渲染图的容器。
+## 示例
 
 ```html
 <div id="container" style="width: 600px; height: 400px"></div>
 ```
 
-**Step 2**: 渲染节点和边。
-
 ```ts
-// 从 node_modules 引入
 import { Graph } from '@antv/x6'
-// 从 CND 引入时，我们暴露了 X6 这个全局变量
-// const { Graph } = X6
 
-// 创建 Graph 的实例
 const graph = new Graph({
   container: document.getElementById('container'),
   grid: true
 })
 
-// 渲染源节点
 const source = graph.addNode({
   x: 300,
   y: 40,
@@ -94,7 +68,6 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
-// 渲染目标节点
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -103,97 +76,22 @@ const target = graph.addNode({
   label: 'World',
 })
 
-// 渲染边
 graph.addEdge({
   source,
   target,
 })
 ```
 
-渲染结果如下。
+## 链接
 
-<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />
+- [文档](https://x6.antv.vision/zh/docs/tutorial/about)
+- [示例](https://x6.antv.vision/zh/examples/gallery)
+- [博客](https://www.yuque.com/antv/x6/gcinvi)
+- [更新日志](https://www.yuque.com/antv/x6/bbfu6r)
+- [常见问题](https://www.yuque.com/antv/x6/be9pfx)
+- [CodeSanbox 模板](https://codesandbox.io/s/qosj0?file=/src/app.tsx)
 
-## 使用文档
-
-- [简介](https://x6.antv.vision/zh/docs/tutorial/about)
-- [快速上手](https://x6.antv.vision/zh/docs/tutorial/getting-started)
-- [基础教程](https://x6.antv.vision/zh/docs/tutorial/basic/graph)
-- [进阶实践](https://x6.antv.vision/zh/docs/tutorial/intermediate/serialization)
-- [高级指引](https://x6.antv.vision/zh/docs/tutorial/advanced/animation)
-- [更新日志](https://x6.antv.vision/zh/docs/tutorial/log)
-
-## 应用案例
-
-<center>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#flowchart" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*JSr-RbwCgmcAAAAAAAAAAAAAARQnAQ" alt="Flow"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#dag" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*RPiGRaSus3UAAAAAAAAAAAAAARQnAQ" alt="Dag"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#mindmap" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*GsEGSaBkc84AAAAAAAAAAAAAARQnAQ" alt="MindMap"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#bpmn" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="200" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*aPSySa8oz4sAAAAAAAAAAAAAARQnAQ" alt="BPMN"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#class" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*OaCpR7t_mVoAAAAAAAAAAAAAARQnAQ" alt="Class"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#org" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*FWx5SYDzLw4AAAAAAAAAAAAAARQnAQ" alt="ORG"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#er" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*7yVJQoM6-9AAAAAAAAAAAAAAARQnAQ" alt="ER"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#swimlane" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*mUVrSJMkP1UAAAAAAAAAAAAAARQnAQ" alt="SwimLane"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#tree" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*XDnNRqnj4WkAAAAAAAAAAAAAARQnAQ" alt="Tree"/>
-  </a>
-  <a href="https://x6.antv.vision/zh/examples/showcase/practices#elk" target="_blank" rel="noopener noreferrer">
-    <img width="400" height="250" style="margin-bottom: 20px" src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Z3ebTKy0w9cAAAAAAAAAAAAAARQnAQ" alt="ELK"/>
-  </a>
-</center>
-
-## 如何交流
-
-如果你在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/x6/issues) 看看有没有类似的 bug 或者建议。欢迎提 [issues](https://github.com/antvis/x6/issues/new) 交流，也可以使用[钉钉](https://m.dingtalk.com/)扫描下面二维码加入**X6 交流群**。
-
-需要注意的是，提问题时请配上 [CodeSandbox](https://codesandbox.io/s/pensive-sound-f4nhc) 的复现代码，方便快速定位和解决问题。
-
-<a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
-</a>
-
-## 如何开发
-
-我们使用了 [lerna](https://github.com/lerna/lerna) 来管理项目，目录结构如下：
-
-```
-.
-├── examples
-│   ├── x6-app-dag            # dag 图示例
-│   ├── x6-app-draw           # 流程图示例
-│   ├── x6-app-er             # ER 图示例
-│   └── x6-example-features   # 特性演示示例
-├── packages
-│   ├── x6                    # X6
-│   ├── x6-react              # X6 的 React 封装（预留）
-│   ├── x6-react-components   # 配套 React 组件库
-│   ├── x6-react-shape        # 支持使用 React 渲染节点
-│   └── x6-vue-shape          # 支持使用 Vue 渲染节点
-└── sites
-    ├── x6-sites              # 官网和文档
-    ├── x6-sites-demos        # 文档中嵌入的 DEMO
-    └── x6-sites-demos-helper # 构建文档 DEMO 的工具
-```
-
-开始之前需要安装必要的全局依赖和初始化：
+## 本地开发
 
 ```shell
 # 全局安装 yarn 和 lerna 工具
@@ -202,35 +100,19 @@ $ npm install lerna -g
 
 # 安装项目依赖和初始化构建
 $ yarn bootstrap
-```
 
-然后可以进入到指定项目开发和调试。
+# 进入到指定项目开发和调试
+cd packages/x6
+yarn build:watch
 
-如本地启动 `examples/x6-example-features` 示例：
-
-```shell
+# 启动 example 查看效果
 cd examples/x6-example-features
-
 yarn start
 ```
 
-修复 X6 的 BUG 时可以开启 watch 模式，配合上面启动的本地 DEMO，实时查看修复效果：
+## 参与共建
 
-```shell
-cd packages/x6
-
-// esm 模式，动态构建 es 产物
-yarn build:watch:esm
-
-// commonjs 模式，动态构建 lib 产物
-yarn build:watch:cjs
-```
-
-## 如何贡献
-
-如果你在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/x6/issues) 看看有没有类似的 bug 或者建议。
-
-如需提交代码，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。我们会收集贡献者的 Github 头像到下面贡献者清单中。
+如果希望参与到 X6 的开发中，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

SECURITY.md

@@ -0,0 +1,21 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are
+currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.1.x   | :white_check_mark: |
+| 5.0.x   | :x:                |
+| 4.0.x   | :white_check_mark: |
+| < 4.0   | :x:                |
+
+## Reporting a Vulnerability
+
+Use this section to tell people how to report a vulnerability.
+
+Tell them where to go, how often they can expect to get an update on a
+reported vulnerability, what to expect if the vulnerability is accepted or
+declined, etc.

examples/x6-app-dag/.editorconfig

@@ -1,16 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab

examples/x6-app-dag/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "eslint-config-umi"
-}

examples/x6-app-dag/.gitignore

@@ -1,20 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/npm-debug.log*
-/yarn-error.log
-/yarn.lock
-/package-lock.json
-
-# production
-/dist
-
-# misc
-.DS_Store
-
-# umi
-/src/.umi
-/src/.umi-production
-/src/.umi-test
-/.env.local

examples/x6-app-dag/.prettierignore

@@ -1,8 +0,0 @@
-**/*.md
-**/*.svg
-**/*.ejs
-**/*.html
-package.json
-.umi
-.umi-production
-.umi-test

examples/x6-app-dag/.prettierrc

@@ -1,14 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "semi": false,
-  "printWidth": 80,
-  "overrides": [
-    {
-      "files": ".prettierrc",
-      "options": {
-        "parser": "json"
-      }
-    }
-  ]
-}

examples/x6-app-dag/.umirc.ts

@@ -1,24 +0,0 @@
-import { defineConfig } from 'umi'
-
-export default defineConfig({
-  publicPath: './',
-  routes: [
-    { path: '/', component: '@/pages/index' },
-    { path: '/apps/dag', component: '@/pages/index' },
-  ],
-  theme: {
-    '@ant-prefix': 'ant',
-    '@menu-item-active-bg': '#f0f5ff',
-  },
-  extraBabelPlugins: [
-    [
-      'import',
-      {
-        libraryName: '@antv/x6-react-components',
-        libraryDirectory: 'es',
-        transformToDefaultImport: false,
-        style: true,
-      },
-    ],
-  ],
-})

examples/x6-app-dag/README.md

@@ -1,15 +0,0 @@
-# X6 DAG React demo project
-
-## Getting Started
-
-Install dependencies,
-
-```bash
-$ yarn
-```
-
-Start the dev server,
-
-```bash
-$ yarn start
-```

examples/x6-app-dag/package.json

@@ -1,50 +0,0 @@
-{
-  "private": true,
-  "name": "@antv/x6-app-dag",
-  "version": "1.1.7",
-  "scripts": {
-    "start": "umi dev",
-    "build": "umi build",
-    "postinstall": "umi generate tmp",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "test": "umi-test",
-    "lint": "umi-lint --eslint src/ -p.no-semi  --prettier --fix",
-    "test:coverage": "umi-test --coverage"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  },
-  "dependencies": {
-    "@ant-design/icons": "^4.2.1",
-    "@antv/x6": "^1.30.2",
-    "@antv/x6-react-components": "^1.1.16",
-    "@antv/x6-react-shape": "^1.6.0",
-    "@types/dompurify": "^2.0.4",
-    "ahooks": "^2.7.0",
-    "antd": "^4.4.2",
-    "classnames": "^2.2.6",
-    "dompurify": "^2.1.1",
-    "react": "^16.13.1",
-    "react-dnd": "^11.1.3",
-    "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^16.13.1",
-    "umi-lint": "^2.0.2"
-  },
-  "devDependencies": {
-    "@ant-design/pro-layout": "^5.0.12",
-    "@umijs/preset-react": "1.x",
-    "@umijs/test": "^3.2.19",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
-    "umi": "^3.2.19",
-    "yorkie": "^2.0.0"
-  }
-}

examples/x6-app-dag/src/common/hooks/useObservableState.ts

@@ -1,29 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { BehaviorSubject, Observable } from 'rxjs'
-
-export const useObservableState = <T extends any>(
-  source$: Observable<T> | { (): Observable<T> },
-  initialState?: T,
-): [T, React.Dispatch<React.SetStateAction<T>>] => {
-  const source = useMemo<Observable<T>>(() => {
-    if (typeof source$ === 'function') {
-      return source$()
-    }
-    return source$
-  }, [source$])
-  const [state, setState] = useState<T>(() => {
-    if (source instanceof BehaviorSubject) {
-      return source.getValue()
-    }
-    return initialState
-  })
-  useEffect(() => {
-    const sub = source.subscribe((v) => {
-      setState(v)
-    })
-    return () => {
-      sub.unsubscribe()
-    }
-  }, [source])
-  return [state, setState]
-}

examples/x6-app-dag/src/common/utils.ts

@@ -1,50 +0,0 @@
-export { unescape } from 'lodash-es'
-
-export class Deferred<T> {
-  resolve!: (value?: T) => void
-
-  reject!: (err?: any) => void
-
-  promise: Promise<T>
-
-  constructor() {
-    this.promise = new Promise<T>((resolve, reject) => {
-      this.resolve = resolve
-      this.reject = reject
-    })
-  }
-}
-
-// 解析 JSON 字符串不引起报错
-export const safeJson = (jsonStr = '{}', defaultVal = {}) => {
-  try {
-    return JSON.parse(jsonStr)
-  } catch (error) {
-    console.warn(`${jsonStr} is not valid json`)
-    return defaultVal
-  }
-}
-
-export class CodeName {
-  static parse(codeName = '') {
-    return codeName.replace(/_\d+$/, '').toLocaleLowerCase()
-  }
-
-  static equal(c1: string, c2: string) {
-    return CodeName.parse(c1) === CodeName.parse(c2)
-  }
-
-  static some(list: string[], c2: string) {
-    return list.some((c1) => CodeName.equal(c1, c2))
-  }
-
-  static getFromNode(node: any = {}) {
-    const { codeName = '' } = node
-    return CodeName.parse(codeName)
-  }
-}
-
-export const isPromise = (obj: any) =>
-  !!obj &&
-  (typeof obj === 'object' || typeof obj === 'function') &&
-  typeof obj.then === 'function'

examples/x6-app-dag/src/component/cut.less

@@ -1,6 +0,0 @@
-.no-wrap {
-  display: inline-block;
-  overflow: hidden;
-  white-space: nowrap;
-  vertical-align: middle;
-}

examples/x6-app-dag/src/component/cut.tsx

@@ -1,36 +0,0 @@
-import React, { useCallback } from 'react'
-import styles from './cut.less'
-
-interface Props {
-  left: number
-  right: number
-  max: number
-  children: string
-}
-
-export const Cut: React.FC<Props> = (props) => {
-  const { left, right = 0, max, children } = props
-  const getText = useCallback(() => {
-    const len = children.length
-    const ellipsis = '...'
-    let leftStr = ''
-    let rightStr = ''
-
-    if (len > max) {
-      if (left && len) {
-        leftStr = children.substr(0, left)
-      } else {
-        leftStr = children.substr(0, max)
-      }
-
-      if (right) {
-        rightStr = children.substr(-right, right)
-      }
-
-      return `${leftStr}${ellipsis}${rightStr}`
-    }
-
-    return children
-  }, [left, right, max, children])
-  return <span className={styles['no-wrap']}>{getText()}</span>
-}

examples/x6-app-dag/src/component/item-name.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { unescape } from 'lodash-es'
-import { Cut } from '@/component/cut'
-import { Keyword } from '@/component/keyword'
-
-interface Props {
-  data: any
-}
-
-export const ItemName: React.FC<Props> = (props) => {
-  const { data } = props
-  const { keyword, cutParas = {} } = data
-  const name = unescape(data.name)
-  const { max, side } = cutParas
-  if (keyword) {
-    return <Keyword raw={name} keyword={keyword} />
-  }
-  if (max) {
-    return (
-      <Cut max={max} left={side} right={side}>
-        {name}
-      </Cut>
-    )
-  }
-  return <span>{name}</span>
-}

examples/x6-app-dag/src/component/keyword.less

@@ -1,11 +0,0 @@
-.keywordWrapper {
-  strong {
-    color: #dd4b39;
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

examples/x6-app-dag/src/component/keyword.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import styles from './keyword.less'
-
-interface Props {
-  raw: string
-  keyword: string
-  className?: string
-}
-
-export const Keyword: React.FC<Props> = (props) => {
-  const { raw, keyword, className } = props
-  if (keyword) {
-    const regex = new RegExp(keyword, 'ig')
-    const arr = raw.split(regex)
-    return (
-      <span
-        className={classnames({
-          [styles.keywordWrapper]: true,
-          [className!]: !!className,
-        })}
-      >
-        {arr.map((section, index) =>
-          index !== arr.length - 1 ? (
-            <span key={section + index}>
-              {section}
-              <strong>{keyword}</strong>
-            </span>
-          ) : (
-            section
-          ),
-        )}
-      </span>
-    )
-  }
-  return null
-}

examples/x6-app-dag/src/component/modal/index.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Modal, ConfigProvider } from 'antd'
-import { ModalFuncProps, ModalProps } from 'antd/es/modal'
-import { isPromise } from '@/common/utils'
-import { ANT_PREFIX } from '@/constants/global'
-
-type ShowProps = ModalProps & {
-  afterClose?: (...args: any[]) => void
-  children: React.ReactNode
-}
-
-export const showModal = (props: ShowProps) => {
-  const div = document.createElement('div')
-  document.body.appendChild(div)
-
-  let config: ShowProps = {
-    ...props,
-    visible: true,
-    onCancel: close,
-    onOk: (e) => {
-      if (typeof props.onOk === 'function') {
-        const ret = props.onOk(e)
-        if (isPromise(ret as any)) {
-          ;(ret as any).then(() => {
-            close()
-          })
-        }
-      } else {
-        close()
-      }
-    },
-  }
-
-  function destroy(...args: any[]) {
-    const unmountResult = ReactDOM.unmountComponentAtNode(div)
-    if (unmountResult && div.parentNode) {
-      div.parentNode.removeChild(div)
-    }
-    if (typeof props.afterClose === 'function') {
-      props.afterClose(...args)
-    }
-  }
-
-  function update(newConfig: ModalFuncProps) {
-    config = {
-      ...config,
-      ...newConfig,
-    }
-    render(config)
-  }
-
-  function close(...args: any[]) {
-    const nextConfig = {
-      ...config,
-      visible: false,
-      afterClose: destroy.bind(undefined, ...args),
-    }
-    update(nextConfig)
-  }
-
-  function render(usedConfig: ModalProps & { children: React.ReactNode }) {
-    const { children, ...others } = usedConfig
-    setTimeout(() => {
-      ReactDOM.render(
-        <ConfigProvider prefixCls={ANT_PREFIX}>
-          <Modal {...others}>{children}</Modal>
-        </ConfigProvider>,
-        div,
-      )
-    }, 0)
-  }
-
-  render(config)
-
-  return {
-    close,
-    update,
-  }
-}

examples/x6-app-dag/src/component/rx-component/rx-input.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { Observable } from 'rxjs'
-import { Input, ConfigProvider } from 'antd'
-import { InputProps } from 'antd/es/input'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { ANT_PREFIX } from '@/constants/global'
-
-interface RxInputProps extends Omit<InputProps, 'value'> {
-  value: Observable<string>
-}
-
-export const RxInput: React.FC<RxInputProps> = (props) => {
-  const { value, ...otherProps } = props
-  const [realValue] = useObservableState(() => value)
-  return (
-    <ConfigProvider prefixCls={ANT_PREFIX}>
-      <Input value={realValue} {...otherProps} />
-    </ConfigProvider>
-  )
-}

examples/x6-app-dag/src/constants/global.ts

@@ -1 +0,0 @@
-export const ANT_PREFIX = 'ant'

examples/x6-app-dag/src/constants/graph.ts

@@ -1,14 +0,0 @@
-export const GROUP_HORIZONTAL__PADDING = 24 // 分组横向 padding
-export const GROUP_VERTICAL__PADDING = 40 // 分组纵向 padding
-export const NODE_WIDTH = 180
-export const NODE_HEIGHT = 32
-
-// 触发画布重新渲染事件
-export const RERENDER_EVENT = 'RERENDER_EVENT'
-
-/*
- * 以下是拖拽相关
- */
-
-export const DRAGGABLE_ALGO_COMPONENT = 'ALGO_COMPONENT'
-export const DRAGGABLE_MODEL = 'MODEL'

examples/x6-app-dag/src/layout/header/experiment-title/index.less

@@ -1,42 +0,0 @@
-.menuWrap {
-  max-height: 316px;
-  overflow: auto;
-  position: relative;
-  top: -10px;
-  left: -1px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
-  :global {
-    .@{ant-prefix}-menu-item {
-      height: 28px;
-      line-height: 28px;
-      padding: 0px 8px;
-      margin: 0 !important;
-      color: rgba(0, 0, 0, 0.45);
-      font-size: 13px;
-      &:hover {
-        color: #1890ff;
-        background-color: @menu-item-active-bg;
-      }
-    }
-  }
-}
-
-.name {
-  padding-right: 2px;
-  color: rgba(0, 0, 0, 0.45);
-}
-
-.wrap {
-  height: 48px;
-  margin-left: 24px;
-  cursor: pointer;
-}
-
-.divider {
-  color: #ccc;
-}
-
-.dropdown {
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 12px;
-}

examples/x6-app-dag/src/layout/header/experiment-title/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import css from './index.less'
-
-export interface IProps {
-  experimentName?: string
-}
-
-export const ExperimentTitle: React.FC<IProps> = ({ experimentName }) => {
-  return (
-    <div className={css.wrap}>
-      <span className={css.name}> {experimentName} </span>
-    </div>
-  )
-}

examples/x6-app-dag/src/layout/header/index.less

@@ -1,38 +0,0 @@
-.header {
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 48px;
-  min-height: 48px;
-  overflow: hidden;
-  line-height: 48px;
-  background: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  padding: 0;
-  .headerLeft,
-  .headerRight {
-    display: flex;
-  }
-}
-
-.doc {
-  margin-right: 32px;
-  font-size: 12px;
-  a {
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  .text {
-    padding: 0 4px;
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  :global {
-    .anticon {
-      position: relative;
-      color: rgba(0, 0, 0, 0.45);
-      font-size: 14px;
-    }
-  }
-}

examples/x6-app-dag/src/layout/header/index.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Layout } from 'antd'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { GithubOutlined } from '@ant-design/icons'
-import { SimpleLogo } from './logo'
-import { ExperimentTitle } from './experiment-title'
-
-import css from './index.less'
-
-const { Header } = Layout
-
-interface IProps {
-  experimentId: string
-}
-
-export const GuideHeader: React.FC<IProps> = (props) => {
-  const expGraph = useExperimentGraph(props.experimentId)
-  const [activeExperiment] = useObservableState(expGraph.experiment$)
-
-  const openGithub = () => {
-    window.open(
-      'https://github.com/antvis/X6/tree/master/examples/x6-app-dag',
-      '_blank',
-    )
-  }
-
-  return (
-    <>
-      <Header className={css.header}>
-        <div className={css.headerLeft}>
-          <SimpleLogo />
-          <ExperimentTitle experimentName={activeExperiment.name} />
-        </div>
-        <div className={css.headerRight}>
-          <div className={css.doc}>
-            <GithubOutlined onClick={openGithub} />
-          </div>
-        </div>
-      </Header>
-    </>
-  )
-}

examples/x6-app-dag/src/layout/header/logo/index.less

@@ -1,15 +0,0 @@
-.root {
-  height: 48px;
-  width: 64px;
-  line-height: 48px;
-  position: relative;
-  border-right: 1px solid rgba(0, 0, 0, 0.08);
-  color: #fba831;
-}
-
-.logo {
-  top: 8px;
-  left: 18px;
-  position: absolute;
-  font-size: 28px;
-}

examples/x6-app-dag/src/layout/header/logo/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { ApartmentOutlined } from '@ant-design/icons'
-import css from './index.less'
-
-interface Props {
-  border?: boolean
-}
-
-export const SimpleLogo: React.FC<Props> = ({ border }) => {
-  return (
-    <div className={`${css.root} `}>
-      <ApartmentOutlined className={css.logo} />
-    </div>
-  )
-}

examples/x6-app-dag/src/mock/algo.ts

@@ -1,268 +0,0 @@
-export const algoData = [
-  {
-    id: 'recentlyUsed',
-    name: '最近使用',
-    isDir: true,
-    children: [
-      {
-        id: 10,
-        defSource: 2,
-        docUrl: '',
-        ioType: 0,
-        up: 148,
-        down: 11,
-        iconType: 1,
-        isDisabled: false,
-        author: 'demo author',
-        codeName: 'algo_1',
-        catId: 1,
-        lastModifyTime: '2020-08-25 15:43:39',
-        createdTime: '2015-04-16 13:38:11',
-        engineType: 0,
-        isComposite: false,
-        sequence: 0,
-        owner: 'system',
-        description: '组件描述信息',
-        name: '算法组件1',
-        parentId: 'recentlyUsed',
-        isBranch: false,
-        social: {
-          defSource: 2,
-          isEnabled: true,
-          docUrl: '#',
-          iconType: 1,
-          isDisabled: false,
-          author: 'demo author',
-          codeName: 'algo_1',
-          catId: 1,
-          lastModifyTime: '2020-08-25 15:43:39',
-          createdTime: '2015-04-16 13:38:11',
-          owner: 'system',
-          description: '组件描述信息',
-          name: '算法组件1',
-          id: 10,
-        },
-      },
-      {
-        id: 11,
-        defSource: 2,
-        docUrl: '',
-        ioType: 0,
-        up: 148,
-        down: 11,
-        iconType: 1,
-        isDisabled: false,
-        author: 'demo author',
-        codeName: 'algo_2',
-        catId: 1,
-        lastModifyTime: '2020-08-25 15:43:39',
-        createdTime: '2015-04-16 13:38:11',
-        engineType: 0,
-        isComposite: false,
-        sequence: 0,
-        owner: 'system',
-        description: '组件描述信息',
-        name: '算法组件2',
-        parentId: 'recentlyUsed',
-        isBranch: false,
-        social: {
-          defSource: 2,
-          isEnabled: true,
-          docUrl: '#',
-          iconType: 1,
-          isDisabled: false,
-          author: 'demo author',
-          codeName: 'algo_2',
-          catId: 1,
-          lastModifyTime: '2020-08-25 15:43:39',
-          createdTime: '2015-04-16 13:38:11',
-          owner: 'system',
-          description: '组件描述信息',
-          name: '算法组件2',
-          id: 11,
-        },
-      },
-      {
-        id: 12,
-        defSource: 2,
-        docUrl: '',
-        ioType: 0,
-        up: 148,
-        down: 11,
-        iconType: 1,
-        isDisabled: false,
-        author: 'demo author',
-        codeName: 'algo_3',
-        catId: 1,
-        lastModifyTime: '2020-08-25 15:43:39',
-        createdTime: '2015-04-16 13:38:11',
-        engineType: 0,
-        isComposite: false,
-        sequence: 0,
-        owner: 'system',
-        description: '组件描述信息',
-        name: '算法组件3',
-        parentId: 'recentlyUsed',
-        isBranch: false,
-        social: {
-          defSource: 2,
-          isEnabled: true,
-          docUrl: '#',
-          iconType: 1,
-          isDisabled: false,
-          author: 'demo author',
-          codeName: 'algo_3',
-          catId: 1,
-          lastModifyTime: '2020-08-25 15:43:39',
-          createdTime: '2015-04-16 13:38:11',
-          owner: 'system',
-          description: '组件描述信息',
-          name: '算法组件3',
-          id: 12,
-        },
-      },
-    ],
-  },
-  {
-    name: '数据读写',
-    id: 21,
-    category: 'source',
-    isDir: true,
-    children: [
-      {
-        defSource: 2,
-        docUrl: '',
-        ioType: 0,
-        up: 148,
-        down: 11,
-        iconType: 1,
-        isDisabled: false,
-        author: 'demo author',
-        codeName: 'odps_source',
-        catId: 1,
-        lastModifyTime: '2020-08-25 15:43:39',
-        createdTime: '2015-04-16 13:38:11',
-        engineType: 0,
-        isComposite: false,
-        sequence: 0,
-        owner: 'system',
-        description: '组件描述信息',
-        name: '读数据表',
-        id: 100,
-        parentId: 'recentlyUsed',
-        isBranch: false,
-        social: {
-          defSource: 2,
-          isEnabled: true,
-          docUrl: '#',
-          iconType: 1,
-          isDisabled: false,
-          author: 'demo author',
-          codeName: 'odps_source',
-          catId: 1,
-          lastModifyTime: '2020-08-25 15:43:39',
-          createdTime: '2015-04-16 13:38:11',
-          owner: 'system',
-          description: '组件描述信息',
-          name: '读数据表',
-          id: 100,
-        },
-      },
-    ],
-    isBranch: true,
-    isExpanded: false,
-    codeName: 'source',
-    parentId: 'platformAlgo',
-  },
-  {
-    name: '统计分析',
-    id: 22,
-    category: 'analytics',
-    isDir: true,
-    children: [],
-    isBranch: true,
-    isExpanded: false,
-    codeName: 'analytics',
-    parentId: 'platformAlgo',
-  },
-  {
-    name: '算法',
-    id: 23,
-    category: 'ai_algo',
-    isDir: true,
-    children: [],
-    isBranch: true,
-    isExpanded: false,
-    codeName: 'algorithm',
-    parentId: 'platformAlgo',
-  },
-  {
-    name: '预测',
-    id: 24,
-    category: 'predict',
-    isDir: true,
-    children: [],
-    isBranch: true,
-    isExpanded: false,
-    codeName: 'predict',
-    parentId: 'platformAlgo',
-  },
-  {
-    name: '评估',
-    id: 25,
-    category: 'evaluation',
-    isDir: true,
-    children: [],
-    isBranch: true,
-    isExpanded: false,
-    codeName: 'evaluation',
-    parentId: 'platformAlgo',
-  },
-]
-
-export const searchByKeyword = async (keyword: string) => {
-  return Array(10)
-    .fill(null)
-    .map((i, idx) => {
-      return {
-        defSource: 2,
-        docUrl: '',
-        ioType: 0,
-        up: 148,
-        down: 11,
-        iconType: 1,
-        isDir: false,
-        isDisabled: false,
-        author: 'demo author',
-        codeName: `${keyword}${idx}`,
-        catId: 1,
-        lastModifyTime: '2020-08-25 15:43:39',
-        createdTime: '2015-04-16 13:38:11',
-        engineType: 0,
-        isComposite: false,
-        sequence: 0,
-        owner: 'system',
-        description: '组件描述信息',
-        name: `${keyword}__${idx}`,
-        id: idx,
-        parentId: 'recentlyUsed',
-        isBranch: false,
-        social: {
-          defSource: 2,
-          isEnabled: true,
-          docUrl: '#',
-          iconType: 1,
-          isDisabled: false,
-          author: 'demo author',
-          name: `${keyword}-${idx}`,
-          codeName: `${keyword}${idx}`,
-          catId: 1,
-          lastModifyTime: '2020-08-25 15:43:39',
-          createdTime: '2015-04-16 13:38:11',
-          owner: 'system',
-          description: '组件描述信息',
-          id: idx,
-        },
-      }
-    })
-}

examples/x6-app-dag/src/mock/graph.ts

@@ -1,720 +0,0 @@
-import random from 'lodash/random'
-
-interface NodeParams {
-  name: string
-  x: number
-  y: number
-}
-
-export const copyNode = ({ name, x, y }: NodeParams) => {
-  const id = `${Date.now()}`
-  return {
-    id,
-    name,
-    inPorts: [
-      {
-        tableName: 'germany_credit_data',
-        sequence: 1,
-        description: '输入1',
-        id: id + 100000,
-      },
-      {
-        tableName: 'germany_credit_data',
-        sequence: 2,
-        description: '输入2',
-        id: id + 200000,
-      },
-    ],
-    outPorts: [
-      {
-        tableName: 'germany_credit_data',
-        sequence: 1,
-        description: '输出表1',
-        id: id + 300000,
-      },
-      {
-        tableName: 'germany_credit_data',
-        sequence: 2,
-        description: '输出表2',
-        id: id + 400000,
-      },
-    ],
-    positionX: x + 200 + random(20, false),
-    positionY: y + random(10, false),
-    codeName: 'source_11111',
-    catId: 1,
-    nodeDefId: 111111,
-    category: 'source',
-    status: 3,
-    groupId: 0,
-  }
-}
-export const addNode = ({ name, x, y }: NodeParams) => {
-  const id = `${Date.now()}`
-  return {
-    id,
-    name,
-    inPorts: [
-      {
-        tableName: 'germany_credit_data',
-        sequence: 1,
-        description: '输入1',
-        id: id + '_in_1',
-      },
-      {
-        tableName: 'germany_credit_data',
-        sequence: 2,
-        description: '输入2',
-        id: id + '_in_2',
-      },
-    ],
-    outPorts: [
-      {
-        tableName: 'germany_credit_data',
-        sequence: 1,
-        description: '输出表1',
-        id: id + '_out_1',
-      },
-      {
-        tableName: 'germany_credit_data',
-        sequence: 2,
-        description: '输出表2',
-        id: id + '_out_2',
-      },
-    ],
-    positionX: x,
-    positionY: y,
-    codeName: 'source_11111',
-    catId: 1,
-    nodeDefId: 111111,
-    category: 'source',
-    status: 3,
-    groupId: 0,
-  }
-}
-
-export const queryGraph = (id: string) => {
-  return {
-    lang: 'zh_CN',
-    success: true,
-    data: initData,
-    Lang: 'zh_CN',
-  }
-}
-
-export const addNodeGroup = async (groupName: string) => {
-  return {
-    success: true,
-    data: {
-      group: {
-        name: groupName,
-        id: Date.now(),
-      },
-    },
-  }
-}
-
-const initData = {
-  nodes: [
-    {
-      id: '1603716783816',
-      name: '算法组件1',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716783816_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716783816_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716783816_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716783816_out_2',
-        },
-      ],
-      positionX: -200,
-      positionY: -300,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716786205',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716786205_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716786205_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716786205_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716786205_out_2',
-        },
-      ],
-      positionX: -369,
-      positionY: -161,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716788394',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716788394_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716788394_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716788394_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716788394_out_2',
-        },
-      ],
-      positionX: -154,
-      positionY: -161,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716792826',
-      name: '算法组件3',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716792826_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716792826_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716792826_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716792826_out_2',
-        },
-      ],
-      positionX: -520,
-      positionY: -30,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716795011',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716795011_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716795011_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716795011_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716795011_out_2',
-        },
-      ],
-      positionX: 74,
-      positionY: -160,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716814719',
-      name: '算法组件3',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716814719_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716814719_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716814719_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716814719_out_2',
-        },
-      ],
-      positionX: -310,
-      positionY: -30,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716822805',
-      name: '算法组件3',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716822805_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716822805_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716822805_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716822805_out_2',
-        },
-      ],
-      positionX: -50,
-      positionY: -30,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716828657',
-      name: '算法组件3',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716828657_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716828657_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716828657_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716828657_out_2',
-        },
-      ],
-      positionX: 160,
-      positionY: -30,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716834901',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716834901_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716834901_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716834901_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716834901_out_2',
-        },
-      ],
-      positionX: -390,
-      positionY: 90,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716844054',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716844054_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716844054_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716844054_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716844054_out_2',
-        },
-      ],
-      positionX: -170,
-      positionY: 90,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716854368',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716854368_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716854368_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716854368_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716854368_out_2',
-        },
-      ],
-      positionX: 40,
-      positionY: 90,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716858435',
-      name: '算法组件3',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716858435_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716858435_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716858435_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716858435_out_2',
-        },
-      ],
-      positionX: -310,
-      positionY: 230,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-    {
-      id: '1603716868041',
-      name: '算法组件2',
-      inPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输入1',
-          id: '1603716868041_in_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输入2',
-          id: '1603716868041_in_2',
-        },
-      ],
-      outPorts: [
-        {
-          tableName: 'germany_credit_data',
-          sequence: 1,
-          description: '输出表1',
-          id: '1603716868041_out_1',
-        },
-        {
-          tableName: 'germany_credit_data',
-          sequence: 2,
-          description: '输出表2',
-          id: '1603716868041_out_2',
-        },
-      ],
-      positionX: -100,
-      positionY: 230,
-      codeName: 'source_11111',
-      catId: 1,
-      nodeDefId: 111111,
-      category: 'source',
-      status: 3,
-      groupId: 0,
-    },
-  ],
-  links: [
-    {
-      source: '1603716783816',
-      target: '1603716786205',
-      outputPortId: '1603716783816_out_1',
-      inputPortId: '1603716786205_in_1',
-    },
-    {
-      source: '1603716783816',
-      target: '1603716788394',
-      outputPortId: '1603716783816_out_2',
-      inputPortId: '1603716788394_in_1',
-    },
-    {
-      source: '1603716783816',
-      target: '1603716795011',
-      outputPortId: '1603716783816_out_2',
-      inputPortId: '1603716795011_in_1',
-    },
-    {
-      source: '1603716786205',
-      target: '1603716792826',
-      outputPortId: '1603716786205_out_1',
-      inputPortId: '1603716792826_in_1',
-    },
-    {
-      source: '1603716788394',
-      target: '1603716814719',
-      outputPortId: '1603716788394_out_1',
-      inputPortId: '1603716814719_in_1',
-    },
-    {
-      source: '1603716795011',
-      target: '1603716822805',
-      outputPortId: '1603716795011_out_1',
-      inputPortId: '1603716822805_in_1',
-    },
-    {
-      source: '1603716795011',
-      target: '1603716828657',
-      outputPortId: '1603716795011_out_2',
-      inputPortId: '1603716828657_in_2',
-    },
-    {
-      source: '1603716792826',
-      target: '1603716834901',
-      outputPortId: '1603716792826_out_1',
-      inputPortId: '1603716834901_in_1',
-    },
-    {
-      source: '1603716814719',
-      target: '1603716844054',
-      outputPortId: '1603716814719_out_1',
-      inputPortId: '1603716844054_in_1',
-    },
-    {
-      source: '1603716822805',
-      target: '1603716854368',
-      outputPortId: '1603716822805_out_1',
-      inputPortId: '1603716854368_in_1',
-    },
-    {
-      source: '1603716834901',
-      target: '1603716858435',
-      outputPortId: '1603716834901_out_1',
-      inputPortId: '1603716858435_in_1',
-    },
-    {
-      source: '1603716844054',
-      target: '1603716858435',
-      outputPortId: '1603716844054_out_1',
-      inputPortId: '1603716858435_in_2',
-    },
-    {
-      source: '1603716854368',
-      target: '1603716868041',
-      outputPortId: '1603716854368_out_1',
-      inputPortId: '1603716868041_in_1',
-    },
-  ],
-}

examples/x6-app-dag/src/mock/status.ts

@@ -1,108 +0,0 @@
-import get from 'lodash/get'
-import set from 'lodash/set'
-import cloneDeep from 'lodash/cloneDeep'
-
-let state = {
-  idx: 0,
-  running: false,
-  statusRes: {
-    lang: 'zh_CN',
-    success: true,
-    data: {
-      instStatus: {
-        '10571193': 'success',
-        '10571194': 'success',
-        '10571195': 'success',
-        '10571196': 'success',
-        '10571197': 'success',
-      },
-      execInfo: {
-        '10571193': {
-          jobStatus: 'success',
-          defName: '读数据表',
-          name: 'germany_credit_data',
-          id: 10571193,
-        },
-        '10571194': {
-          jobStatus: 'success',
-          defName: '离散值特征分析',
-          name: '离散值特征分析',
-          id: 10571194,
-        },
-        '10571195': {
-          jobStatus: 'success',
-          defName: '分箱',
-          startTime: '2020-10-19 13:28:55',
-          endTime: '2020-10-19 13:30:20',
-          name: '分箱',
-          id: 10571195,
-        },
-        '10571196': {
-          jobStatus: 'success',
-          defName: '评分卡训练',
-          startTime: '2020-10-19 13:28:55',
-          endTime: '2020-10-19 13:32:02',
-          name: '评分卡训练-1',
-          id: 10571196,
-        },
-      },
-      status: 'default',
-    },
-    Lang: 'zh_CN',
-  } as any,
-}
-
-export const runGraph = async (nodes: any[]) => {
-  const newState = getStatus()
-  newState.data.instStatus = {}
-  newState.data.execInfo = {}
-  nodes.forEach((node) => {
-    newState.data.instStatus[node.id] = 'default'
-    newState.data.execInfo[node.id] = {
-      jobStatus: 'default',
-      defName: node.name,
-      startTime: '2020-10-19 13:28:55',
-      endTime: '2020-10-19 13:32:02',
-      name: node.name,
-      id: 10571196,
-    }
-  })
-  state.running = true
-  state.idx = 0
-  state.statusRes = newState
-  return { success: true }
-}
-
-export const stopGraphRun = () => {
-  state.running = false
-  state.idx = 0
-  return { success: true }
-}
-
-const getStatus = () => cloneDeep(state.statusRes)
-
-export const queryGraphStatus = async () => {
-  const newState = getStatus()
-  // console.log('Call Api QueryGraphStatus', state)
-  if (state.running) {
-    const { instStatus, execInfo } = newState.data
-    const idList = Object.keys(instStatus)
-    if (state.idx === idList.length) {
-      state.idx = 0
-      state.running = false
-      idList.forEach((id) => {
-        set(instStatus, id, 'success')
-        set(execInfo, `${id}.jobStatus`, 'success')
-        set(newState, 'data.status', 'success')
-      })
-      return newState
-    }
-    const key = get(idList, state.idx)
-    set(instStatus, key, 'running')
-    set(execInfo, `${key}.jobStatus`, 'running')
-    set(newState, 'data.status', 'running')
-    state.idx += 1
-    return newState
-  }
-  return newState
-}

examples/x6-app-dag/src/models/guide-algo-component.ts

@@ -1,123 +0,0 @@
-/* eslint-disable no-param-reassign */
-import { useCallback, useState } from 'react'
-import { algoData, searchByKeyword } from '../mock/algo'
-
-export namespace Res {
-  export interface Data {
-    defs: NodeDef[]
-    cats: Cat[]
-  }
-
-  export interface NodeDef {
-    up: number
-    down: number
-    defSource: number
-    catName: string
-    isDeprecated: boolean
-    isSubscribed: boolean
-    isEnabled: boolean
-    iconType: number
-    docUrl: string
-    sequence: number
-    author?: string
-    ioType: number
-    lastModifyTime: string
-    createdTime: string
-    catId: number
-    isComposite: boolean
-    codeName: string
-    engineType?: number
-    description?: string
-    name: string
-    id: number
-    type: number
-    owner: string
-    algoSourceType?: number
-  }
-
-  export interface Cat {
-    defSource: number
-    isEnabled: boolean
-    iconType: number
-    codeName: string
-    description: string
-    sequence: number
-    name: string
-    id: number
-    category?: string
-  }
-}
-
-function dfs(
-  path = '',
-  nodes: any[],
-  isTarget: (node: any) => boolean,
-  result: string[] = [],
-) {
-  nodes.forEach((node, idx) => {
-    if (node.children) {
-      const currentIdx = path ? `${path}.${idx}.children` : `${idx}.children`
-      dfs(currentIdx, node.children, isTarget, result)
-    }
-
-    if (isTarget(node)) {
-      const currentIdx = path ? `${path}.${idx}` : idx
-      result.push(currentIdx.toString())
-    }
-  })
-}
-
-export default () => {
-  const [keyword, setKeyword] = useState<string>('') // 搜索关键字
-  const [loading, setLoading] = useState<boolean>(false) // 加载状态
-  const [componentTreeNodes, setComponentTreeNodes] = useState<any[]>([])
-  const [searchList, setSearchList] = useState<any[]>([]) // 搜索结果列表
-
-  // 加载组件
-  const loadComponentNodes = useCallback(() => {
-    setLoading(true)
-    const load = async () => {
-      try {
-        if (algoData) {
-          setComponentTreeNodes(algoData)
-        }
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    return load()
-  }, [])
-
-  // 搜索组件
-  const search = useCallback((params: { keyword: string }) => {
-    setKeyword(params.keyword ? params.keyword : '')
-    if (!params.keyword) {
-      return
-    }
-    setLoading(true)
-
-    const load = async () => {
-      try {
-        const nodes = ([] = await searchByKeyword(params.keyword))
-        setSearchList(nodes)
-      } finally {
-        setLoading(false)
-      }
-    }
-    load()
-  }, [])
-
-  return {
-    // 状态
-    keyword,
-    loading,
-    componentTreeNodes,
-    searchList,
-
-    // 方法
-    setKeyword,
-    loadComponentNodes,
-    search,
-  }
-}

examples/x6-app-dag/src/pages/common/canvas-handler/index.less

@@ -1,36 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.handler {
-  position: absolute;
-  top: 61px;
-  right: 14px;
-  z-index: 99;
-  width: 32px;
-  margin: 0;
-  padding: 3px 0;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 16px;
-  list-style-type: none;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.04);
-  border-radius: 3px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
-
-  .item {
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-      color: #000;
-      background-color: #e0e0e0;
-    }
-  }
-}
-
-.popover {
-  :global {
-    .@{ant-prefix}-popover-inner-content {
-      padding: 3px 8px;
-    }
-  }
-}

examples/x6-app-dag/src/pages/common/canvas-handler/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { Popover } from 'antd'
-import {
-  CompressOutlined,
-  OneToOneOutlined,
-  ZoomInOutlined,
-  ZoomOutOutlined,
-} from '@ant-design/icons'
-import classNames from 'classnames'
-import styles from './index.less'
-
-interface Props {
-  className?: string
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onFitContent: () => void
-  onRealContent: () => void
-}
-
-export const CanvasHandler: React.FC<Props> = (props) => {
-  const { className, onZoomIn, onZoomOut, onFitContent, onRealContent } = props
-
-  return (
-    <ul className={classNames(styles.handler, className)}>
-      <Popover
-        overlayClassName={styles.popover}
-        content="放大"
-        placement="left"
-      >
-        <li onClick={onZoomIn} className={styles.item}>
-          <ZoomInOutlined />
-        </li>
-      </Popover>
-      <Popover
-        overlayClassName={styles.popover}
-        content="缩小"
-        placement="left"
-      >
-        <li onClick={onZoomOut} className={styles.item}>
-          <ZoomOutOutlined />
-        </li>
-      </Popover>
-      <Popover
-        overlayClassName={styles.popover}
-        content="实际尺寸"
-        placement="left"
-      >
-        <li onClick={onRealContent} className={styles.item}>
-          <OneToOneOutlined />
-        </li>
-      </Popover>
-      <Popover
-        overlayClassName={styles.popover}
-        content="适应画布"
-        placement="left"
-      >
-        <li onClick={onFitContent} className={styles.item}>
-          <CompressOutlined />
-        </li>
-      </Popover>
-    </ul>
-  )
-}

examples/x6-app-dag/src/pages/common/graph-common/connector/index.ts

@@ -1,18 +0,0 @@
-import { Graph } from '@antv/x6'
-
-Graph.registerConnector(
-  'pai',
-  (s, t) => {
-    const offset = 4
-    const control = 80
-    const v1 = { x: s.x, y: s.y + offset + control }
-    const v2 = { x: t.x, y: t.y - offset - control }
-
-    return `M ${s.x} ${s.y}
-       L ${s.x} ${s.y + offset}
-       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${t.x} ${t.y - offset}
-       L ${t.x} ${t.y}
-      `
-  },
-  true,
-)

examples/x6-app-dag/src/pages/common/graph-common/node-popover/index.less

@@ -1,39 +0,0 @@
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  min-width: 220px;
-  .item {
-    font-size: 12px;
-    padding: 0 0 0;
-    line-height: 16px;
-    word-break: break-all;
-    margin: 0;
-    width: 220px;
-    display: flex;
-  }
-
-  .label {
-    flex: 1 0 45px;
-    text-align: right;
-    padding-right: 4px;
-    position: relative;
-    word-break: break-all;
-    color: rgba(0, 0, 0, 0.85);
-    &after {
-      content: ':';
-    }
-  }
-  .text {
-    padding-left: 4px;
-    flex: 3 0 100px;
-    color: rgba(0, 0, 0, 0.45);
-    word-break: break-all;
-  }
-}
-
-.content {
-  :global(.aicontent-popover-inner-content) {
-    padding: 12px 8px 8px 8px;
-  }
-}

examples/x6-app-dag/src/pages/common/graph-common/node-popover/index.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { Popover } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
-import { isEmpty } from 'lodash-es'
-import css from './index.less'
-
-interface TooltipProps {
-  children: React.ReactElement
-  status: StatusObj
-}
-
-interface StatusObj {
-  name: string
-  defName: string
-  jobStatus: string
-  startTime: string
-  endTime: string
-}
-
-export const NodePopover = ({ children, status }: TooltipProps) => {
-  const componentNode = (
-    <div style={{ width: '100%', height: '100%' }}>{children}</div>
-  )
-  if (isEmpty(status)) {
-    return componentNode
-  }
-  return (
-    <Popover
-      placement="bottomLeft"
-      content={<PopoverContent status={status} />}
-      overlayClassName={css.content}
-    >
-      {componentNode}
-    </Popover>
-  )
-}
-
-const nodeAtts: StatusObj = {
-  name: '节点名称',
-  defName: '算法名称',
-  jobStatus: '运行状态',
-  startTime: '开始时间',
-  endTime: '结束时间',
-}
-
-const PopoverContent = ({ status }: { status: StatusObj }) => (
-  <ul className={css.list}>
-    {!status.name && <LoadingOutlined />}
-    {Object.entries(nodeAtts).map(([key, text]) => {
-      const value = status[key as keyof StatusObj]
-      if (value) {
-        return (
-          <li key={key} className={css.item}>
-            <span className={css.label}>{text}</span>
-            <span className={css.text}>{value}</span>
-          </li>
-        )
-      }
-      return null
-    })}
-  </ul>
-)

examples/x6-app-dag/src/pages/common/graph-common/node-status/index.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import {
-  CheckCircleOutlined,
-  CloseCircleOutlined,
-  SyncOutlined,
-} from '@ant-design/icons'
-
-interface Props {
-  className?: string
-  status: 'success' | 'fail' | 'running' | 'ready' | 'upChangeSuccess'
-}
-
-export const NodeStatus: React.FC<Props> = (props) => {
-  const { className, status } = props
-  switch (status) {
-    case 'fail':
-      return (
-        <div className={className}>
-          <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
-        </div>
-      )
-    case 'success':
-    case 'upChangeSuccess': {
-      const color = status === 'success' ? '#2ecc71' : '#1890ff'
-      return (
-        <div className={className}>
-          <CheckCircleOutlined style={{ color }} />
-        </div>
-      )
-    }
-    case 'running':
-      return (
-        <div className={className}>
-          <SyncOutlined spin={true} style={{ color: '#1890ff' }} />
-        </div>
-      )
-    default:
-      return null
-  }
-}

examples/x6-app-dag/src/pages/common/graph-common/shape/edge.less

@@ -1,8 +0,0 @@
-.x6-edge {
-  &-selected,
-  &:hover {
-    path[stroke-width='1'] {
-      stroke-width: 3px;
-    }
-  }
-}

examples/x6-app-dag/src/pages/common/graph-common/shape/edge.ts

@@ -1,43 +0,0 @@
-import { Shape, Edge } from '@antv/x6'
-import './edge.less'
-
-export class BaseEdge extends Shape.Edge {
-  // eslint-disable-next-line class-methods-use-this
-  isGroupEdge() {
-    return false
-  }
-}
-
-export class GuideEdge extends BaseEdge {}
-
-GuideEdge.config({
-  shape: 'GuideEdge',
-  connector: { name: 'pai' },
-  zIndex: 2,
-  attrs: {
-    line: {
-      stroke: '#808080',
-      strokeWidth: 1,
-      targetMarker: {
-        stroke: 'none',
-        fill: 'none',
-      },
-    },
-  },
-})
-
-export class X6DemoGroupEdge extends GuideEdge {
-  // eslint-disable-next-line class-methods-use-this
-  isGroupEdge() {
-    return true
-  }
-}
-
-X6DemoGroupEdge.config({
-  shape: 'X6DemoGroupEdge',
-})
-
-Edge.registry.register({
-  GuideEdge: GuideEdge as any,
-  X6DemoGroupEdge: X6DemoGroupEdge as any,
-})

examples/x6-app-dag/src/pages/common/graph-common/shape/node.ts

@@ -1,150 +0,0 @@
-import { Dom, Node } from '@antv/x6'
-import { ReactShape } from '@antv/x6-react-shape'
-import { NODE_WIDTH, NODE_HEIGHT } from '@/constants/graph'
-
-export class BaseNode extends ReactShape {
-  // eslint-disable-next-line class-methods-use-this
-  isGroup() {
-    return false
-  }
-}
-
-export class X6DemoNode extends BaseNode {
-  getInPorts() {
-    return this.getPortsByGroup('in')
-  }
-
-  getOutPorts() {
-    return this.getPortsByGroup('out')
-  }
-}
-
-Node.registry.register('ais-rect-port', X6DemoNode as any)
-
-X6DemoNode.config({
-  width: NODE_WIDTH,
-  height: NODE_HEIGHT,
-  shape: 'ais-rect-port',
-  ports: {
-    groups: {
-      in: {
-        position: { name: 'top' },
-        zIndex: 2,
-      },
-      out: {
-        position: { name: 'bottom' },
-        zIndex: 2,
-      },
-    },
-  },
-  attrs: {
-    body: {
-      magnet: false,
-      fill: 'none',
-      stroke: 'none',
-      refWidth: '100%',
-      refHeight: '100%',
-      zIndex: 1,
-    },
-  },
-  portMarkup: [
-    {
-      tagName: 'foreignObject',
-      selector: 'fo',
-      attrs: {
-        width: 6,
-        height: 6,
-        x: -3,
-        y: -3,
-        zIndex: 10,
-        // magnet决定是否可交互
-        magnet: 'true',
-      },
-      children: [
-        {
-          ns: Dom.ns.xhtml,
-          tagName: 'body',
-          selector: 'foBody',
-          attrs: {
-            xmlns: Dom.ns.xhtml,
-          },
-          style: {
-            width: '100%',
-            height: '100%',
-          },
-          children: [
-            {
-              tagName: 'span',
-              selector: 'content',
-              style: {
-                width: '100%',
-                height: '100%',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-})
-
-export class X6DemoGroupNode extends BaseNode {
-  // eslint-disable-next-line class-methods-use-this
-  isGroup() {
-    return true
-  }
-}
-
-X6DemoGroupNode.config({
-  ports: {
-    groups: {
-      in: {
-        position: { name: 'top' },
-        zIndex: 2,
-      },
-      out: {
-        position: { name: 'bottom' },
-        zIndex: 2,
-      },
-    },
-  },
-  portMarkup: [
-    {
-      tagName: 'foreignObject',
-      selector: 'fo',
-      attrs: {
-        width: 6,
-        height: 6,
-        x: -3,
-        y: -3,
-        zIndex: 10,
-        // magnet决定是否可交互
-        magnet: 'true',
-      },
-      children: [
-        {
-          ns: Dom.ns.xhtml,
-          tagName: 'body',
-          selector: 'foBody',
-          attrs: {
-            xmlns: Dom.ns.xhtml,
-          },
-          style: {
-            width: '100%',
-            height: '100%',
-          },
-          children: [
-            {
-              tagName: 'span',
-              selector: 'content',
-              style: {
-                width: '100%',
-                height: '100%',
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-})

examples/x6-app-dag/src/pages/common/hooks/useSafeSetHtml.ts

@@ -1,14 +0,0 @@
-import { useEffect, MutableRefObject } from 'react'
-import DOMPurify from 'dompurify'
-
-export const useSafeSetHTML = (
-  ref: MutableRefObject<Element | null>,
-  htmlStr: string = '',
-) => {
-  useEffect(() => {
-    if (ref?.current instanceof Element && typeof htmlStr === 'string') {
-      // eslint-disable-next-line no-param-reassign
-      ref.current.innerHTML = DOMPurify.sanitize(htmlStr)
-    }
-  }, [htmlStr])
-}

examples/x6-app-dag/src/pages/common/style/x6-overwrite.less

@@ -1,82 +0,0 @@
-.x6-toolbar-overwrite {
-  :global {
-    .x6-toolbar {
-      height: 36px !important;
-      overflow: visible;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-      .x6-toolbar-content {
-        overflow: visible;
-
-        .x6-toolbar-group::before {
-          margin: 0 !important;
-        }
-
-        .x6-toolbar-item {
-          margin: 6px 0 !important;
-          padding: 0 12px !important;
-
-          .anticon {
-            font-size: 16px;
-          }
-        }
-      }
-    }
-  }
-}
-
-:global {
-  .x6-edge {
-    stroke-width: 1px;
-    &.success {
-      path:nth-child(2) {
-        stroke: #888 !important;
-      }
-      path:nth-child(3) {
-        fill: #888 !important;
-        stroke: #888 !important;
-      }
-    }
-    &.error {
-      stroke-width: 2px;
-      path:nth-child(2) {
-        stroke: rgba(245, 34, 45, 0.45) !important;
-        stroke-width: 2px;
-      }
-    }
-    &.edgeProcessing {
-      path:nth-child(2) {
-        stroke: rgba(57, 202, 116, 0.8);
-        stroke-width: 2px;
-        stroke-dasharray: 8px, 2px;
-        &:local {
-          animation: processing-line 30s infinite linear;
-        }
-      }
-    }
-    @keyframes processing-line {
-      to {
-        stroke-dashoffset: -1000;
-      }
-    }
-  }
-  .x6-split-box-horizontal > .x6-split-box-resizer,
-  .x6-split-box-vertical > .x6-split-box-resizer {
-    background: #e9e9e9;
-  }
-
-  .@{ant-prefix}-spin-container {
-    width: 100%;
-    height: 100%;
-  }
-
-  .x6-widget-selection-inner {
-    border: none !important;
-    box-shadow: none !important;
-  }
-
-  .x6-widget-selection-box {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}

examples/x6-app-dag/src/pages/common/utils/experiment.ts

@@ -1,171 +0,0 @@
-import { maxBy, minBy } from 'lodash-es'
-import { NExperimentGraph } from '@/pages/rx-models/typing'
-
-interface BasicPoint {
-  x: number
-  y: number
-}
-
-/**
- * 找出一组坐标的边缘坐标（最小和最大的边缘坐标轴）和中点
- * @param points
- */
-export function calcPointsInfo(points: BasicPoint[]) {
-  if (!Array.isArray(points) || !points.length) {
-    throw new Error('计算坐标边缘必须传入一组坐标')
-  }
-  const minX = minBy(points, (point: BasicPoint) => point.x)!.x
-  const minY = minBy(points, (point: BasicPoint) => point.y)!.y
-  const maxX = maxBy(points, (point: BasicPoint) => point.x)!.x
-  const maxY = maxBy(points, (point: BasicPoint) => point.y)!.y
-  const middleX = (minX + maxX) / 2
-  const middleY = (minY + maxY) / 2
-
-  return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    middleX,
-    middleY,
-  }
-}
-
-/**
- * 将一组坐标转换成相对某个点的相对租表
- * @param points
- * @param origin
- */
-export function transformPointsToOrigin(
-  points: BasicPoint[],
-  origin: BasicPoint,
-): BasicPoint[] {
-  return points.map((point) => ({
-    ...point,
-    x: point.x - origin.x,
-    y: point.y - origin.y,
-  }))
-}
-
-/**
- * 将一组相对某点的坐标还原回原始坐标
- * @param points
- * @param origin
- */
-export function revertPointsToOrigin(
-  points: BasicPoint[],
-  origin: BasicPoint,
-): BasicPoint[] {
-  return points.map((point) => ({
-    ...point,
-    x: point.x + origin.x,
-    y: point.y + origin.y,
-  }))
-}
-
-export function formatNodeToGraphNodeConf(originNode: {
-  id: number
-  nodeInstanceId?: number
-  positionX: number
-  positionY: number
-}): any {
-  const { id, nodeInstanceId, positionX, positionY } = originNode
-  return {
-    ...originNode,
-    x: positionX || 0,
-    y: positionY || 0,
-    id: (nodeInstanceId || id)!.toString(),
-    width: 180,
-    height: 32,
-    data: originNode,
-    ports: {
-      groups: {
-        inputPorts: {
-          position: {
-            name: 'top',
-            args: {
-              dr: 0,
-              dx: 0,
-              dy: 0,
-            },
-          },
-          attrs: {
-            circle: {
-              fill: '#ffffff',
-              stroke: '#31d0c6',
-              strokeWidth: 1,
-              r: 4,
-              style: 'cursor: default;',
-            },
-            text: {
-              fill: '#6a6c8a',
-            },
-          },
-        },
-        outputPorts: {
-          position: {
-            name: 'bottom',
-            args: {
-              dr: 0,
-              dx: 0,
-              dy: 0,
-            },
-          },
-          attrs: {
-            circle: {
-              fill: '#ffffff',
-              stroke: '#31d0c6',
-              strokeWidth: 1,
-              r: 4,
-              style: 'cursor: crosshair;',
-            },
-            text: {
-              fill: '#6a6c8a',
-            },
-          },
-        },
-      },
-    },
-  }
-}
-/**
- * 将实验图节点信息转换为节点和边的配置
- * @param graph
- */
-export function formatExperimentGraph(graph: any = {}) {
-  const { nodes = [], links = [], groups = [] } = graph
-  const formattedNodes = nodes.map((node: any) =>
-    formatNodeToGraphNodeConf(node),
-  )
-
-  const formattedEdges = links.map((link: any) => {
-    const { source, target } = link
-    return {
-      ...link,
-      source: source.toString(),
-      target: target.toString(),
-      label: '',
-    }
-  })
-
-  const groupNodeMap = groups.reduce(
-    (mapResult: any, currentGroup: NExperimentGraph.Group) => {
-      const { id } = currentGroup
-      return {
-        ...mapResult,
-        [id]:
-          formattedNodes.filter(
-            (node: any) => node.groupId.toString() === id.toString(),
-          ) || [],
-      }
-    },
-    {},
-  )
-
-  return {
-    nodes: formattedNodes,
-    edges: formattedEdges,
-    groups,
-    groupNodeMap,
-  }
-}

examples/x6-app-dag/src/pages/common/utils/graph.ts

@@ -1,17 +0,0 @@
-import { Graph } from '@antv/x6'
-
-// 将画布上的点转换成相对于 offset parent 的点
-export function graphPointToOffsetPoint(
-  graph: Graph,
-  graphPoint: { x: number; y: number },
-  containerElem: HTMLElement,
-) {
-  if (graph) {
-    const point = graph!.localToPage({ x: graphPoint.x, y: graphPoint.y })
-    const clientRect = containerElem?.getBoundingClientRect()
-    const y = point.y - (clientRect?.y || 0) // ! offset parent 不能是画布容器，否则会影响内部布局，所以 offset parent 在外部，算上上方 toolbar 的高度
-    const x = point.x - (clientRect?.x || 0)
-    return { x, y }
-  }
-  return { x: 0, y: 0 }
-}

examples/x6-app-dag/src/pages/component-config-panel/form/experiment-config.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { Form, Input, Radio } from 'antd'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-
-export interface Props {
-  name: string
-  experimentId: string
-}
-
-export const ExperimentForm: React.FC<Props> = ({ experimentId, name }) => {
-  const [form] = Form.useForm()
-
-  const expGraph = useExperimentGraph(experimentId)
-  const [activeExperiment] = useObservableState(expGraph.experiment$)
-
-  const onValuesChange = ({ experimentName }: { experimentName: string }) => {
-    expGraph.experiment$.next({ ...activeExperiment, name: experimentName })
-  }
-
-  React.useEffect(() => {
-    form.setFieldsValue({
-      experimentName: activeExperiment ? activeExperiment.name : '',
-    })
-  }, [activeExperiment])
-
-  return (
-    <Form
-      form={form}
-      layout="vertical"
-      initialValues={{
-        experimentName: activeExperiment ? activeExperiment.name : '',
-      }}
-      onValuesChange={onValuesChange}
-      requiredMark={false}
-    >
-      <Form.Item name="experimentName" label="实验名称">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label={name}>
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field C">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field D">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="RadioDemo">
-        <Radio.Group>
-          <Radio.Button value="optional">Optional</Radio.Button>
-          <Radio.Button value={true}>Required</Radio.Button>
-          <Radio.Button value={false}>Hidden</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-    </Form>
-  )
-}

examples/x6-app-dag/src/pages/component-config-panel/form/node-config.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { Form, Input } from 'antd'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import 'antd/lib/style/index.css'
-
-export interface Props {
-  name: string
-  experimentId: string
-  nodeId: string
-}
-
-export const NodeFormDemo: React.FC<Props> = ({
-  name,
-  nodeId,
-  experimentId,
-}) => {
-  const [form] = Form.useForm()
-
-  const expGraph = useExperimentGraph(experimentId)
-  const [node] = useObservableState(() => expGraph.activeNodeInstance$)
-
-  const onValuesChange = async ({ name }: { name: string }) => {
-    if (node.name !== name) {
-      await expGraph.renameNode(nodeId, name)
-    }
-  }
-
-  return (
-    <Form
-      form={form}
-      layout="vertical"
-      initialValues={{ name: node ? node.name : '' }}
-      onValuesChange={onValuesChange}
-      requiredMark={false}
-    >
-      <Form.Item label="节点名称" name="name">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label={name}>
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field C">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-      <Form.Item label="Field D">
-        <Input placeholder="input placeholder" />
-      </Form.Item>
-    </Form>
-  )
-}

examples/x6-app-dag/src/pages/component-config-panel/index.less

@@ -1,87 +0,0 @@
-@border-color: #e9e9e9;
-
-.setting {
-  height: calc(~'100% - 41px');
-  :global {
-    .ant-row.ant-form-item {
-      margin-bottom: 16px;
-    }
-    .ant-tabs-nav-list {
-      width: 100%;
-    }
-    .ant-tabs-card .ant-tabs-content {
-      margin-top: -16px;
-    }
-    .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-      background: #fff;
-      padding: 16px;
-    }
-    .ant-tabs-card > .ant-tabs-nav::before {
-      display: none;
-    }
-    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
-    .ant-tabs-tab {
-      flex: 1 0 50px;
-      padding: 7px 16px;
-      display: flex;
-      justify-content: center;
-    }
-    .ant-tabs-tab.ant-tabs-tab-active {
-      margin: 0 !important;
-    }
-    .ant-tabs-card .ant-tabs-tab,
-    [data-theme='compact'] .ant-tabs-card .ant-tabs-tab {
-      border-color: transparent;
-      background: transparent;
-    }
-    .ant-tabs-card .ant-tabs-tab-active,
-    [data-theme='compact'] .ant-tabs-card .ant-tabs-tab-active {
-      border-color: #fff;
-      background: #fff;
-    }
-    #components-tabs-demo-card-top .code-box-demo {
-      background: #f5f5f5;
-      overflow: hidden;
-      padding: 24px;
-    }
-    [data-theme='compact'] .ant-tabs-card .ant-tabs-content {
-      margin-top: -8px;
-    }
-    [data-theme='dark'] .ant-tabs-card .ant-tabs-tab {
-      border-color: transparent;
-      background: transparent;
-    }
-    [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
-      background: #000;
-    }
-    [data-theme='dark'] .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-      background: #141414;
-    }
-    [data-theme='dark'] .ant-tabs-card .ant-tabs-tab-active {
-      border-color: #141414;
-      background: #141414;
-    }
-    .ant-tabs-content {
-      height: calc(~'100vh - 125px');
-    }
-  }
-
-  .form {
-    height: calc(100vh - 100px);
-    flex-grow: 1;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background: #fff;
-  }
-}
-
-.footer {
-  position: relative;
-  flex-grow: 0;
-  height: 41px;
-  min-height: 41px;
-  padding: 8px;
-  background-color: #fff;
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-  box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.08);
-}

examples/x6-app-dag/src/pages/component-config-panel/index.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { Tabs } from 'antd'
-import classNames from 'classnames'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { ExperimentForm } from './form/experiment-config'
-import { NodeFormDemo } from './form/node-config'
-import css from './index.less'
-
-interface Props {
-  experimentId: string
-  className?: string
-}
-
-export const ComponentConfigPanel: React.FC<Props> = (props) => {
-  const { experimentId, className } = props
-  const expGraph = useExperimentGraph(experimentId)
-  const [activeNodeInstance] = useObservableState(
-    () => expGraph.activeNodeInstance$,
-  )
-
-  const nodeId = activeNodeInstance && activeNodeInstance.id
-
-  return (
-    <div className={classNames(className, css.confPanel)}>
-      <div className={css.setting}>
-        <Tabs
-          defaultActiveKey="setting"
-          type="card"
-          size="middle"
-          tabPosition="top"
-          destroyInactiveTabPane={true}
-        >
-          <Tabs.TabPane tab="参数设置" key="setting">
-            <div className={css.form}>
-              {nodeId && (
-                <NodeFormDemo
-                  name="节点参数"
-                  nodeId={nodeId}
-                  experimentId={experimentId}
-                />
-              )}
-              {!nodeId && (
-                <ExperimentForm name="实验设置" experimentId={experimentId} />
-              )}
-            </div>
-          </Tabs.TabPane>
-          <Tabs.TabPane tab="全局参数" key="params" disabled={true}>
-            <div className={css.form} />
-          </Tabs.TabPane>
-        </Tabs>
-      </div>
-      <div className={css.footer} />
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.less

@@ -1,66 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.list {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: #fff;
-
-  .tree {
-    height: 100%;
-    background-image: linear-gradient(#fff 50%, #f7f9fb 50%);
-    background-size: 100% 60px;
-
-    .treeFolder:global(.@{ant-prefix}-tree-treenode) {
-      align-items: center;
-      height: 30px;
-      padding: 0;
-      font-size: 12px;
-      line-height: 30px;
-
-      &::before {
-        height: 30px;
-      }
-
-      :global {
-        .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
-          width: auto;
-          margin-right: 8px;
-          color: rgba(0, 0, 0, 0.45);
-        }
-
-        .@{ant-prefix}-tree-node-content-wrapper {
-          display: flex;
-          align-items: center;
-          padding-left: 0;
-
-          .@{ant-prefix}-tree-title {
-            flex-grow: 1;
-          }
-        }
-      }
-    }
-
-    .treeNode:global(.@{ant-prefix}-tree-treenode) {
-      height: 30px;
-      line-height: 30px;
-
-      &::before {
-        height: 30px;
-      }
-
-      :global {
-        .@{ant-prefix}-tree-node-content-wrapper {
-          padding: 0;
-        }
-
-        .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
-          display: none;
-        }
-        .@{ant-prefix}-tree-switcher {
-          display: none;
-        }
-      }
-    }
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/index.tsx

@@ -1,66 +0,0 @@
-import React, { useCallback } from 'react'
-import { useModel } from 'umi'
-import { Tree } from 'antd'
-import { FolderFilled, FolderOpenFilled } from '@ant-design/icons'
-import { NodeTitle } from './node-title'
-import styles from './index.less'
-
-const { DirectoryTree, TreeNode } = Tree
-
-const FolderIcon = ({ expanded }: { expanded: boolean }) => {
-  return expanded ? <FolderOpenFilled /> : <FolderFilled />
-}
-
-export const CategoryTree = () => {
-  const { componentTreeNodes } = useModel('guide-algo-component')
-
-  const renderTree = useCallback(
-    (treeList: any[] = [], searchKey: string = '') => {
-      return treeList.map((item) => {
-        const { isDir, id, children } = item
-        const key = id.toString()
-        const title = <NodeTitle node={item} searchKey={searchKey} />
-
-        if (isDir) {
-          return (
-            <TreeNode
-              icon={FolderIcon}
-              key={key}
-              title={title}
-              className={styles.treeFolder}
-            >
-              {renderTree(children, searchKey)}
-            </TreeNode>
-          )
-        }
-
-        return (
-          <TreeNode
-            isLeaf={true}
-            key={key}
-            icon={<span />}
-            title={title}
-            className={styles.treeNode}
-          />
-        )
-      })
-    },
-    [],
-  )
-
-  const treeList = componentTreeNodes.filter((node) => node.status !== 4)
-
-  return (
-    <div className={styles.list}>
-      <DirectoryTree
-        showIcon={true}
-        selectable={false}
-        autoExpandParent={true}
-        className={styles.tree}
-        defaultExpandedKeys={['recentlyUsed']}
-      >
-        {renderTree(treeList)}
-      </DirectoryTree>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.less

@@ -1,140 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.nodeTitleWrapper {
-  &:hover {
-    .node {
-      width: 180px;
-      margin-left: 20px;
-      padding-left: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      background-color: #fff;
-      border-radius: 4px;
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
-
-      .nodeIcon {
-        display: flex;
-        justify-content: center;
-        width: 32px;
-        min-width: 32px;
-        margin-right: 0;
-        color: #1890ff;
-        background-color: rgba(229, 238, 255, 0.85);
-        cursor: move;
-      }
-
-      .label {
-        padding-left: 8px;
-        overflow: hidden;
-        background-color: #fff;
-        cursor: move;
-      }
-    }
-  }
-
-  .node {
-    display: flex;
-    height: 30px;
-    padding-left: 20px;
-    font-size: 12px;
-    line-height: 30px;
-
-    .nodeIcon {
-      display: inline-flex;
-      align-items: center;
-      margin-right: 4px;
-      color: #bfbfbf;
-    }
-
-    .label {
-      display: inline-block;
-      width: 200px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.keyword {
-  color: #f50;
-}
-
-.folder {
-  display: flex;
-  justify-content: space-between;
-  padding-right: 8px;
-
-  .label {
-    display: inline-block;
-    width: 184px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .team {
-    float: right;
-  }
-}
-
-:global {
-  .@{ant-prefix}-tree-title {
-    :local {
-      .doc {
-        position: absolute;
-        top: 0;
-        right: 5px;
-        color: transparent; // 防止拖拽时文档两个字被带进去
-        font-size: 10px;
-        line-height: 30px;
-      }
-    }
-  }
-}
-
-.popover {
-  width: 360px;
-  overflow: hidden;
-  .monitor {
-    margin: 8px 0;
-    b {
-      display: block;
-      line-height: 24px;
-    }
-  }
-  .doclink {
-    padding: 8px 0 0;
-  }
-  .description {
-    max-height: 600px;
-    padding: 8px 4px;
-    overflow: auto;
-    word-break: break-all;
-    background: #fbfbfb;
-    border-radius: 4px;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    a,
-    img,
-    p,
-    pre {
-      max-width: 100%;
-      margin: 0;
-      font-size: 12px !important;
-      line-height: 1.5em;
-      word-break: break-all !important;
-    }
-  }
-}
-
-.tag {
-  margin: 4px 0;
-  .label {
-    padding-right: 4px;
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/category-tree/node-title.tsx

@@ -1,141 +0,0 @@
-import React, { useCallback, useState, useRef } from 'react'
-import { toLower, unescape } from 'lodash-es'
-import { Popover, Tag } from 'antd'
-import { DragSource, ConnectDragPreview, ConnectDragSource } from 'react-dnd'
-import { DatabaseFilled, ReadOutlined } from '@ant-design/icons'
-import marked from 'marked'
-import { useSafeSetHTML } from '@/pages/common/hooks/useSafeSetHtml'
-import { DRAGGABLE_ALGO_COMPONENT } from '@/constants/graph'
-import styles from './node-title.less'
-
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-})
-
-const Document = (props: { node: any }) => {
-  const { node } = props
-  const descriptionNodeRef = useRef<HTMLDivElement>(null)
-  const { description, id, tag = '' } = node
-
-  const htmlStr = marked(
-    unescape(description || '暂无文档').replace(/\\n/gi, ' \n '),
-  )
-  useSafeSetHTML(descriptionNodeRef, htmlStr)
-
-  return (
-    <div className={styles.popover}>
-      {tag ? (
-        <div className={styles.tag}>
-          <span className={styles.label}> 标签: </span>
-          {tag.split(',').map((str: string) => (
-            <Tag key={str}>{str}</Tag>
-          ))}
-        </div>
-      ) : null}
-      <div className={styles.description}>
-        <div ref={descriptionNodeRef} />
-        <div className={styles.doclink}>
-          <a href={`#/${id}`} target="_blank" rel="noopener noreferrer">
-            查看更多
-          </a>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-interface Props {
-  node: any
-  searchKey: string
-  isDragging: boolean
-  connectDragSource: ConnectDragSource
-  connectDragPreview: ConnectDragPreview
-}
-
-const InnerNodeTitle = (props: Props) => {
-  const {
-    node = {},
-    searchKey = '',
-    connectDragPreview,
-    connectDragSource,
-  } = props
-  const { name = '', isDir } = node
-  const [visible, setVisible] = useState<boolean>(false)
-  const onMouseIn = useCallback(() => {
-    setVisible(true)
-  }, [])
-  const onMouseOut = useCallback(() => {
-    setVisible(false)
-  }, [])
-
-  // 文件夹
-  if (isDir) {
-    return <div className={styles.folder}>{name}</div>
-  }
-
-  const keywordIdx = searchKey ? toLower(name).indexOf(toLower(searchKey)) : -1
-
-  // 搜索高亮
-  if (keywordIdx > -1) {
-    const beforeStr = name.substr(0, keywordIdx)
-    const afterStr = name.substr(keywordIdx + searchKey.length)
-
-    return connectDragPreview(
-      connectDragSource(
-        <span className={styles.node}>
-          <DatabaseFilled className={styles.nodeIcon} />
-          <span className={styles.label}>
-            {beforeStr}
-            <span className={styles.keyword}>{searchKey}</span>
-            {afterStr}
-          </span>
-        </span>,
-      ),
-    )
-  }
-
-  return (
-    <div
-      className={styles.nodeTitleWrapper}
-      onMouseEnter={onMouseIn}
-      onMouseLeave={onMouseOut}
-    >
-      {connectDragPreview(
-        connectDragSource(
-          <div className={styles.node}>
-            <DatabaseFilled className={styles.nodeIcon} />
-            <span className={styles.label}>{name}</span>
-          </div>,
-        ),
-      )}
-      {visible && (
-        <Popover
-          visible={true}
-          title={name}
-          placement="right"
-          content={<Document node={node} />}
-          key="description"
-        >
-          <a className={styles.doc}>
-            <ReadOutlined /> 文档
-          </a>
-        </Popover>
-      )}
-    </div>
-  )
-}
-
-export const NodeTitle = DragSource(
-  DRAGGABLE_ALGO_COMPONENT,
-  {
-    beginDrag: (props: Props) => ({
-      component: props.node,
-    }),
-  },
-  (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging(),
-  }),
-)(InnerNodeTitle)

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/index.less

@@ -1,4 +0,0 @@
-.componentTree {
-  display: block;
-  flex-grow: 1;
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { useModel } from 'umi'
-import { useMount } from 'ahooks'
-import { CategoryTree } from './category-tree'
-import { SearchResultList } from './search-result-list'
-import styles from './index.less'
-
-export const ComponentTree = () => {
-  const { keyword, loadComponentNodes } = useModel('guide-algo-component')
-
-  useMount(() => {
-    loadComponentNodes()
-  })
-
-  return (
-    <div className={styles.componentTree}>
-      {keyword ? <SearchResultList /> : <CategoryTree />}
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/component-item.less

@@ -1,121 +0,0 @@
-@itemHeight: 30px;
-
-.nodeItem {
-  position: relative;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.itemBlock {
-  position: relative;
-
-  .nodeItem {
-    max-width: 150px;
-    height: @itemHeight;
-    padding: 0 5px 0 2.2px;
-    line-height: @itemHeight;
-    cursor: move;
-
-    &:hover {
-      padding: 0;
-      background-color: #fff;
-      border-radius: 4px;
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
-
-      .nodeIcon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: @itemHeight;
-        min-width: @itemHeight;
-        height: @itemHeight;
-        color: #1890ff;
-        background-color: rgba(229, 238, 255, 0.85);
-      }
-    }
-
-    .nodeIcon {
-      margin-right: 8px;
-      color: #bfbfbf;
-    }
-  }
-
-  .itemLable {
-    position: absolute;
-    top: -2px;
-    left: 158px;
-    font-size: 10px;
-    transform: scale(0.83);
-
-    &.gre {
-      color: #2ecc71;
-    }
-  }
-
-  .catLable {
-    position: absolute;
-    top: 5px;
-    left: 158px;
-    font-size: 10px;
-    white-space: nowrap;
-    transform: scale(0.83);
-  }
-
-  .description {
-    height: @itemHeight;
-    padding-left: 22px;
-    overflow: hidden;
-    line-height: @itemHeight;
-    text-overflow: ellipsis;
-  }
-  .link {
-    position: absolute;
-    top: 5px;
-    right: 0;
-    display: none;
-  }
-
-  &:hover {
-    .link {
-      display: block;
-    }
-  }
-}
-
-.componentDescription {
-  max-width: 360px;
-  max-height: 600px;
-  overflow: auto;
-  word-break: break-all;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  a,
-  img,
-  p {
-    max-width: 100%;
-    margin: 0;
-    font-size: 12px !important;
-    line-height: 1.5em;
-    word-break: break-all !important;
-  }
-}
-
-.statusTips {
-  max-width: 320px;
-  margin: 0;
-}
-
-.tag {
-  margin: 8px 0 4px;
-  .label {
-    padding-right: 4px;
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/component-item.tsx

@@ -1,184 +0,0 @@
-import React, { useRef } from 'react'
-import classname from 'classnames'
-import { Popover, Tag, Tooltip } from 'antd'
-import { DatabaseFilled, ProfileTwoTone } from '@ant-design/icons'
-import marked from 'marked'
-import { ConnectDragPreview, ConnectDragSource, DragSource } from 'react-dnd'
-import { ItemName } from '@/component/item-name'
-import { unescape } from '@/common/utils'
-import { useSafeSetHTML } from '@/pages/common/hooks/useSafeSetHtml'
-import { DRAGGABLE_ALGO_COMPONENT } from '@/constants/graph'
-import styles from './component-item.less'
-
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-})
-
-const Markdown2html: React.FC<{ description: string; tag: string }> = (
-  props,
-) => {
-  const { description, tag } = props
-  const descriptionElementRef = useRef<HTMLDivElement>(null)
-
-  useSafeSetHTML(
-    descriptionElementRef,
-    marked(unescape(description).replace(/\\n/gi, ' \n ')),
-  )
-
-  return (
-    <div className={styles.componentDescription}>
-      <div ref={descriptionElementRef} key="1" />
-      {tag ? (
-        <div className={styles.tag} key="2">
-          <span className={styles.label}> 标签: </span>
-          {tag.split(',').map((str, idx) => (
-            <Tag key={str + idx}>{str}</Tag>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-const renderSearchInfo = (params: {
-  id: number | string
-  name: string
-  catName: string
-  description: string
-  tag: string
-}) => {
-  const { id, name, catName, description = '暂无数据', tag } = params
-
-  return (
-    <>
-      {catName && (
-        <span className={`${styles.catLable} gray `} key="catName">
-          {catName}
-        </span>
-      )}
-
-      <span className={styles.link} key="link">
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href={`https://pai.alipay.com/component/detail/${id}`}
-        >
-          <Tooltip title="查看文档">
-            <ProfileTwoTone />
-          </Tooltip>
-        </a>
-      </span>
-
-      {description && (
-        <Popover
-          title={name}
-          placement="right"
-          content={<Markdown2html description={description} tag={tag} />}
-          key="description"
-        >
-          <div
-            className={classname(styles.description, 'gray', 'text-overflow')}
-          >
-            {description}
-          </div>
-        </Popover>
-      )}
-    </>
-  )
-}
-
-// ! 这里没有理解怎么会走到渲染这个链路上，因此代码先保留，后续可以再删掉或者使用
-const renderStatus = (params: {
-  changeType: string
-  isDeprecated: boolean
-  changeMessage: string
-}) => {
-  const { changeType, isDeprecated, changeMessage } = params
-  const renderItems = []
-  if (changeType) {
-    renderItems.push(
-      <Popover
-        content={<p className={styles.statusTips}>{changeMessage}</p>}
-        key="changeType"
-      >
-        <span className={classname(styles.itemLable, styles.gre)}>
-          {changeType.toLowerCase()}
-        </span>
-      </Popover>,
-    )
-  }
-
-  if (isDeprecated) {
-    renderItems.push(
-      <span className={classname(styles.itemLable, 'gray')} key="status">
-        已废弃
-      </span>,
-    )
-  }
-
-  return renderItems
-}
-
-interface Node {
-  keyword: string
-  algoSourceType: number
-  name: string
-  id: number
-  catName: string
-  description: string
-  tag: string
-  changeType: string
-  isDeprecated: boolean
-  changeMessage: string
-}
-
-interface NodeTitleProps {
-  data: Node
-  connectDragSource: ConnectDragSource
-  connectDragPreview: ConnectDragPreview
-}
-
-const InnerNodeTitle: React.FC<NodeTitleProps> = (props) => {
-  const { data, connectDragPreview, connectDragSource } = props
-  const { keyword, algoSourceType, name } = data
-  return (
-    <div>
-      {connectDragPreview(
-        connectDragSource(
-          <span
-            className={classname(styles.nodeItem, {
-              [styles.orange]: algoSourceType === 2,
-            })}
-          >
-            <DatabaseFilled className={styles.nodeIcon} />
-            <ItemName data={{ name, keyword }} />
-          </span>,
-        ),
-      )}
-      {keyword ? renderSearchInfo(data) : renderStatus(data)}
-    </div>
-  )
-}
-
-const NodeTitle = DragSource(
-  DRAGGABLE_ALGO_COMPONENT,
-  {
-    beginDrag: (props: NodeTitleProps) => ({
-      component: props.data,
-    }),
-  },
-  (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    connectDragPreview: connect.dragPreview(),
-    isDragging: monitor.isDragging(),
-  }),
-)(InnerNodeTitle)
-
-interface Props {
-  data: any
-}
-
-export const ComponentItem: React.FC<Props> = ({ data = {} }) => {
-  return <div className={styles.itemBlock}>{<NodeTitle data={data} />}</div>
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/index.less

@@ -1,37 +0,0 @@
-.searchList {
-  min-height: calc(~'100vh - 80px');
-  padding: 0;
-  list-style-type: none;
-  background-image: linear-gradient(#fff 50%, #f7f9fb 50%);
-  background-size: 100% 60px;
-
-  :global {
-    li {
-      padding: 0 4px 0 10px;
-      transition: all 0.2s ease-in-out;
-
-      &:hover {
-        background-color: #e3f4ff;
-      }
-    }
-
-    .flag {
-      padding-right: 4px;
-      color: #1890ff;
-      vertical-align: middle;
-    }
-  }
-}
-
-.resultTips {
-  height: 24px;
-  margin-top: 16px;
-  color: #a0a0a0;
-  line-height: 24px;
-  text-align: center;
-
-  .icon {
-    font-size: 24px;
-    vertical-align: top;
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/component-tree/search-result-list/index.tsx

@@ -1,44 +0,0 @@
-import React, { useCallback } from 'react'
-import { useModel } from 'umi'
-import { Spin } from 'antd'
-import { ProfileTwoTone } from '@ant-design/icons'
-
-import { ComponentItem } from './component-item'
-import styles from './index.less'
-
-export const SearchResultList = () => {
-  const { keyword, searchList, loading } = useModel('guide-algo-component')
-
-  const renderList = useCallback((list: any[], keywd: string) => {
-    return (
-      <ul className={styles.searchList}>
-        {list.map((component, idx) => (
-          <li key={idx.toString()}>
-            <ComponentItem data={{ ...component, keyword: keywd }} />
-          </li>
-        ))}
-      </ul>
-    )
-  }, [])
-
-  const renderEmptyResult = useCallback(() => {
-    return (
-      <>
-        <p className={styles.resultTips}>
-          <ProfileTwoTone />
-          {'没有搜索结果'}
-        </p>
-      </>
-    )
-  }, [])
-
-  return (
-    <Spin spinning={loading}>
-      <div className="tree-wrapper">
-        {searchList.length
-          ? renderList(searchList, keyword)
-          : renderEmptyResult()}
-      </div>
-    </Spin>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/index.less

@@ -1,52 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.componentSourceTree {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  background-color: #f7f9fb;
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-y: auto;
-  }
-
-  .links {
-    flex-grow: 0;
-    height: 41px;
-    min-height: 41px;
-    padding: 8px;
-    background-color: #fff;
-    border-top: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.08);
-
-    .link:global(.@{ant-prefix}-btn) {
-      display: inline-flex;
-      align-items: center;
-      width: 50%;
-      height: 20px;
-      padding-bottom: 0;
-      color: rgba(0, 0, 0, 0.65);
-      font-size: 12px;
-      line-height: 20px;
-      border-right: 1px solid rgba(0, 0, 0, 0.08);
-
-      &:last-of-type {
-        border-right: none;
-      }
-
-      &:hover {
-        color: #1890ff;
-      }
-
-      :global {
-        .anticon {
-          font-size: 16px;
-        }
-      }
-    }
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-import { SearchInput } from './search-input'
-import { ComponentTree } from './component-tree'
-import styles from './index.less'
-
-interface Props {
-  className?: string
-}
-
-export const ComponentSourceTree: React.FC<Props> = (props) => {
-  const { className } = props
-  return (
-    <div className={classNames(className, styles.componentSourceTree)}>
-      <div className={styles.component}>
-        <SearchInput />
-        <ComponentTree />
-      </div>
-      <div className={styles.links} />
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/search-input/index.less

@@ -1,12 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.searchInput {
-  width: 100%;
-  padding: 8px;
-
-  .input {
-    :global(.@{ant-prefix}-input) {
-      font-size: 12px;
-    }
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/component-source-tree/search-input/index.tsx

@@ -1,41 +0,0 @@
-import React, { useState } from 'react'
-import { Input } from 'antd'
-import { useDebounceFn } from 'ahooks'
-import { useModel } from 'umi'
-import styles from './index.less'
-
-const { Search } = Input
-
-export const SearchInput = () => {
-  const [value, setValue] = useState<string>('')
-  const { search, setKeyword } = useModel('guide-algo-component')
-
-  const { run: onDebouncedSearch } = useDebounceFn(
-    (v: string) => {
-      if (!v) {
-        return
-      }
-      search({ keyword: v })
-    },
-    { wait: 500 },
-  )
-
-  return (
-    <div className={styles.searchInput}>
-      <Search
-        className={styles.input}
-        placeholder="请输入组件名称或描述"
-        value={value}
-        allowClear={true}
-        onChange={(e) => {
-          const v = e.target.value
-          if (!v) {
-            setKeyword('')
-          }
-          setValue(v)
-        }}
-        onSearch={onDebouncedSearch}
-      />
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/component-tree-panel/index.less

@@ -1,50 +0,0 @@
-.nodeSourceTreeContainer {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  .tabWrapper {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    height: 36px;
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 12px;
-    background-color: #fff;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-
-    .tab {
-      display: flex;
-      flex-grow: 1;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      padding: 0 8px;
-      text-align: center;
-      cursor: pointer;
-
-      &:first-of-type {
-        border-right: 1px solid #f0f0f0;
-      }
-
-      &:hover {
-        color: #1890ff;
-      }
-
-      &.active {
-        color: #1890ff;
-        background-color: #f7f9fb;
-        cursor: default;
-      }
-    }
-  }
-
-  .tabContentWrapper {
-    flex-grow: 1;
-    max-height: calc(100% - 33px);
-
-    .hide {
-      display: none;
-    }
-  }
-}

examples/x6-app-dag/src/pages/component-tree-panel/index.tsx

@@ -1,38 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-import { ComponentSourceTree } from './component-source-tree'
-import styles from './index.less'
-
-interface Props {
-  className?: string
-  experimentId: string
-}
-
-type TabOption = 'component' | 'model'
-
-export const ComponentTreePanel: React.FC<Props> = (props) => {
-  const { className } = props
-  const [activeTab, setActiveTab] = useState<TabOption>('component')
-
-  return (
-    <div className={classNames(className, styles.nodeSourceTreeContainer)}>
-      <div className={styles.tabWrapper}>
-        <div
-          className={classNames(styles.tab, {
-            [styles.active]: activeTab === 'component',
-          })}
-          onClick={() => {
-            setActiveTab('component')
-          }}
-        >
-          组件库
-        </div>
-      </div>
-      <div className={styles.tabContentWrapper}>
-        <ComponentSourceTree
-          className={classNames({ [styles.hide]: activeTab !== 'component' })}
-        />
-      </div>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/bottom-toolbar.less

@@ -1,142 +0,0 @@
-@import (reference) '~antd/es/style/themes/default.less';
-
-.bottomToolbar {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 199;
-  height: 40px;
-  font-size: 12px;
-  background-color: #fff;
-  box-shadow: 0 0 16px -5px rgba(0, 0, 0, 0.2);
-  user-select: none;
-
-  .itemList {
-    color: rgba(0, 0, 0, 0.65);
-    text-align: center;
-    list-style-type: none;
-
-    .item {
-      display: inline-flex;
-      align-items: center;
-      height: 40px;
-      margin: 0 10px;
-      padding: 0;
-      line-height: 40px;
-      cursor: pointer;
-
-      a {
-        display: inline-flex;
-        align-items: center;
-        color: rgba(0, 0, 0, 0.65);
-
-        &:hover {
-          text-decoration: none;
-        }
-
-        &:focus {
-          text-decoration: none;
-          outline: none;
-        }
-      }
-
-      &.disabled {
-        color: #ccc;
-        cursor: default;
-
-        a {
-          color: #ccc;
-          cursor: default;
-        }
-      }
-
-      &:hover {
-        color: #1890ff;
-
-        a {
-          color: #1890ff;
-        }
-      }
-
-      :global {
-        & .anticon {
-          margin-right: 4px;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-}
-
-.menu {
-  padding: 4px 0;
-
-  :global {
-    .@{ant-prefix}-menu-item {
-      min-width: 110px;
-      height: 32px;
-      margin: 0 !important;
-      padding: 0 12px;
-      font-size: 12px;
-      line-height: 32px;
-
-      a::before {
-        display: none;
-      }
-
-      &-selected {
-        color: rgba(0, 0, 0, 0.65);
-        background-color: #fff !important;
-      }
-
-      &:hover {
-        color: rgba(0, 0, 0, 0.65);
-        background-color: #f5f5f5;
-      }
-
-      :local {
-        .label {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          &:hover {
-            color: rgba(0, 0, 0, 0.65);
-          }
-
-          .icon {
-            margin: 0;
-            color: rgba(0, 0, 0, 0.65);
-
-            &:hover {
-              color: #1890ff;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.menuPopover {
-  :global {
-    .@{ant-prefix}-popover-inner {
-      background-color: transparent;
-      box-shadow: none;
-
-      &-content {
-        padding: 0 4px;
-      }
-    }
-  }
-}
-
-.popover {
-  :global {
-    .@{ant-prefix}-popover-inner-content {
-      padding: 5px 12px;
-      font-size: 12px;
-    }
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/bottom-toolbar.tsx

@@ -1,94 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { Popover } from 'antd'
-import {
-  CloudUploadOutlined,
-  LogoutOutlined,
-  PlayCircleOutlined,
-} from '@ant-design/icons'
-import classNames from 'classnames'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import styles from './bottom-toolbar.less'
-
-interface Props {
-  experimentId: string
-}
-
-export const BottomToolbar: React.FC<Props> = (props) => {
-  const { experimentId } = props
-  const expGraph = useExperimentGraph(experimentId)
-  const [running] = useObservableState(expGraph.running$)
-  const [preparingRun, setPreparingRun] = useState(false)
-  const [preparingStop, setPreparingStop] = useState(false)
-
-  // running 的值发生变化，说明运行或停止按钮的操作产生了作用
-  useEffect(() => {
-    setPreparingRun(false)
-    setPreparingStop(false)
-  }, [running])
-
-  // 运行实验
-  const onRunExperiment = useCallback(() => {
-    setPreparingRun(true)
-    expGraph.runGraph().then((res: any) => {
-      if (!res.success) {
-        setPreparingRun(false)
-      }
-    })
-  }, [expGraph])
-
-  // 停止运行
-  const onStopRunExperiment = useCallback(() => {
-    setPreparingStop(true)
-    expGraph.stopRunGraph().then((res: any) => {
-      if (!res.success) {
-        setPreparingStop(false)
-      }
-    })
-  }, [expGraph])
-
-  const runningConfigs = [
-    {
-      content: '运行',
-      tip: '依次运行本实验的每个组件',
-      icon: PlayCircleOutlined,
-      disabled: preparingRun,
-      clickHandler: onRunExperiment,
-    },
-    {
-      content: '停止',
-      tip: '停止运行实验',
-      icon: LogoutOutlined,
-      disabled: preparingStop,
-      clickHandler: onStopRunExperiment,
-    },
-  ]
-
-  const runningConfig = runningConfigs[Number(!!running)]
-  const RunningIcon = runningConfig.icon
-
-  return (
-    <div className={styles.bottomToolbar}>
-      <ul className={styles.itemList}>
-        {/* 部署 */}
-        <li className={styles.item}>
-          <CloudUploadOutlined />
-          <span>部署</span>
-        </li>
-
-        {/* 运行/停止 */}
-        <Popover content={runningConfig.tip} overlayClassName={styles.popover}>
-          <li
-            className={classNames(styles.item, {
-              [styles.disabled]: runningConfig.disabled,
-            })}
-            onClick={runningConfig.clickHandler}
-          >
-            <RunningIcon />
-            <span>{runningConfig.content}</span>
-          </li>
-        </Popover>
-      </ul>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/canvas-content.less

@@ -1,12 +0,0 @@
-.canvasContent {
-  overflow: hidden;
-  background-color: #f7f7fa;
-  position: relative;
-
-  .runningStatus {
-    position: absolute;
-    right: 14px;
-    bottom: 48px;
-    color: rgba(0, 0, 0, 0.65);
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/canvas-content.tsx

@@ -1,107 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import { message } from 'antd'
-import '@antv/x6-react-shape'
-import { useDrop } from 'react-dnd'
-import classNames from 'classnames'
-import { DRAGGABLE_ALGO_COMPONENT, DRAGGABLE_MODEL } from '@/constants/graph'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { FloatingContextMenu } from './elements/floating-context-menu'
-import { CanvasHandler } from '../common/canvas-handler'
-import { GraphRunningStatus } from './elements/graph-running-status'
-import styles from './canvas-content.less'
-
-interface Props {
-  experimentId: string
-  className?: string
-}
-
-export const CanvasContent: React.FC<Props> = (props) => {
-  const { experimentId, className } = props
-
-  const containerRef = useRef<HTMLDivElement | null>(null)
-  const canvasRef = useRef<HTMLDivElement | null>(null)
-  const expGraph = useExperimentGraph(experimentId)
-
-  // 渲染画布
-  useEffect(() => {
-    expGraph.renderGraph(containerRef.current!, canvasRef.current!)
-  }, [expGraph])
-
-  // 处理组件拖拽落下事件
-  const [, dropRef] = useDrop({
-    accept: [DRAGGABLE_ALGO_COMPONENT, DRAGGABLE_MODEL],
-    drop: (item: any, monitor) => {
-      const currentMouseOffset = monitor.getClientOffset()
-      const sourceMouseOffset = monitor.getInitialClientOffset()
-      const sourceElementOffset = monitor.getInitialSourceClientOffset()
-      const diffX = sourceMouseOffset!.x - sourceElementOffset!.x
-      const diffY = sourceMouseOffset!.y - sourceElementOffset!.y
-      const x = currentMouseOffset!.x - diffX
-      const y = currentMouseOffset!.y - diffY
-      if (expGraph.isGraphReady()) {
-        expGraph.requestAddNode({
-          clientX: x,
-          clientY: y,
-          nodeMeta: item.component,
-        })
-      } else {
-        message.info('实验数据建立中，请稍后再尝试添加节点')
-      }
-    },
-  })
-
-  // 画布侧边 toolbar handler
-  const onHandleSideToolbar = useCallback(
-    (action: 'in' | 'out' | 'fit' | 'real') => () => {
-      // 确保画布已渲染
-      if (expGraph.isGraphReady()) {
-        switch (action) {
-          case 'in':
-            expGraph.zoomGraph(0.1)
-            break
-          case 'out':
-            expGraph.zoomGraph(-0.1)
-            break
-          case 'fit':
-            expGraph.zoomGraphToFit()
-            break
-          case 'real':
-            expGraph.zoomGraphRealSize()
-            break
-          default:
-        }
-      }
-    },
-    [expGraph],
-  )
-
-  return (
-    <div
-      ref={(elem) => {
-        containerRef.current = elem
-        dropRef(elem)
-      }}
-      className={classNames(className, styles.canvasContent)}
-    >
-      {/* 图和边的右键菜单 */}
-      <FloatingContextMenu experimentId={experimentId} />
-
-      {/* 缩放相关的 toolbar */}
-      <CanvasHandler
-        onZoomIn={onHandleSideToolbar('in')}
-        onZoomOut={onHandleSideToolbar('out')}
-        onFitContent={onHandleSideToolbar('fit')}
-        onRealContent={onHandleSideToolbar('real')}
-      />
-
-      {/* 图运行状态 */}
-      <GraphRunningStatus
-        className={styles.runningStatus}
-        experimentId={experimentId}
-      />
-
-      {/* 图容器 */}
-      <div ref={canvasRef} />
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/canvas-toolbar.less

@@ -1,69 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-@import (reference) '../common/style/x6-overwrite';
-
-.canvasToolbar {
-  background-color: #f7f9fb;
-
-  .x6-toolbar-overwrite();
-
-  .searchItem {
-    &:hover {
-      background-color: transparent !important;
-    }
-
-    .searchWrapper {
-      position: relative;
-
-      .search {
-        width: 200px;
-        background-color: transparent;
-        animation: expansion 0.2s ease-in-out;
-
-        @keyframes expansion {
-          from {
-            width: 0;
-          }
-
-          to {
-            width: 200px;
-          }
-        }
-
-        :global {
-          .@{ant-prefix}-input {
-            background-color: transparent;
-          }
-        }
-      }
-
-      .searchResult {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        z-index: 1;
-        width: 200px;
-        max-height: 200px;
-        padding: 4px 0;
-        overflow-y: auto;
-        color: rgba(0, 0, 0, 0.65);
-        list-style-type: none;
-        background-color: #fefefe;
-        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-
-        &.hide {
-          display: none;
-        }
-
-        .searchResultItem {
-          padding: 0 8px;
-          line-height: 24px;
-          text-align: left;
-
-          &:hover {
-            background-color: rgba(243, 249, 255, 0.92);
-          }
-        }
-      }
-    }
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/canvas-toolbar.tsx

@@ -1,168 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import { Toolbar } from '@antv/x6-react-components'
-import {
-  GatewayOutlined,
-  GroupOutlined,
-  PlaySquareOutlined,
-  RollbackOutlined,
-  UngroupOutlined,
-} from '@ant-design/icons'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { RxInput } from '@/component/rx-component/rx-input'
-import { showModal } from '@/component/modal'
-import { addNodeGroup } from '@/mock/graph'
-import { BehaviorSubject } from 'rxjs'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { formatGroupInfoToNodeMeta } from '@/pages/rx-models/graph-util'
-import styles from './canvas-toolbar.less'
-
-const { Item, Group } = Toolbar
-interface Props {
-  experimentId: string
-}
-
-enum Operations {
-  UNDO_DELETE = 'UNDO_DELETE',
-  GROUP_SELECT = 'GROUP_SELECT',
-  RUN_SELECTED = 'RUN_SELECTED',
-  NEW_GROUP = 'NEW_GROUP',
-  UNGROUP = 'UNGROUP',
-}
-
-export const CanvasToolbar: React.FC<Props> = (props) => {
-  const { experimentId } = props
-  const [selectionEnabled, setSelectionEnabled] = useState<boolean>(false)
-  const expGraph = useExperimentGraph(experimentId)
-  const [activeNodeInstance] = useObservableState(
-    () => expGraph.activeNodeInstance$,
-  )
-  const [selectedNodes] = useObservableState(() => expGraph.selectedNodes$)
-  const [selectedGroup] = useObservableState(() => expGraph.selectedGroup$)
-
-  const onClickItem = useCallback(
-    (itemName: string) => {
-      switch (itemName) {
-        case Operations.UNDO_DELETE:
-          expGraph.undoDeleteNode()
-          break
-        case Operations.GROUP_SELECT:
-          expGraph.toggleSelectionEnabled()
-          setSelectionEnabled((enabled) => !enabled)
-          break
-        case Operations.RUN_SELECTED:
-          expGraph.runGraph()
-          break
-        case Operations.NEW_GROUP: {
-          const value$ = new BehaviorSubject('')
-          const modal = showModal({
-            title: '新建分组',
-            width: 450,
-            okText: '确定',
-            cancelText: '取消',
-            children: (
-              <div
-                style={{ fontSize: 12, display: 'flex', alignItems: 'center' }}
-              >
-                <div style={{ width: 50, marginBottom: 8 }}>组名：</div>
-                <RxInput
-                  value={value$}
-                  onChange={(e) => {
-                    value$.next(e.target.value)
-                  }}
-                />
-              </div>
-            ),
-            onOk: () => {
-              modal.update({ okButtonProps: { loading: true } })
-              addNodeGroup(value$.getValue())
-                .then((res: any) => {
-                  modal.close()
-                  selectedNodes!.forEach((node) => {
-                    const nodeData = node.getData<any>()
-                    node.setData({ ...nodeData, groupId: res.data.group.id })
-                  })
-                  const nodeMetas: any[] = selectedNodes!.map((node) =>
-                    node.getData<any>(),
-                  )
-                  expGraph.addNode(
-                    formatGroupInfoToNodeMeta(res.data.group, nodeMetas),
-                  )
-                  expGraph.unSelectNode()
-                })
-                .finally(() => {
-                  modal.update({ okButtonProps: { loading: false } })
-                })
-            },
-          })
-          break
-        }
-        case Operations.UNGROUP: {
-          const descendantNodes = selectedGroup!.getDescendants()
-          const childNodes = descendantNodes.filter((node) => node.isNode())
-          childNodes.forEach((node) => {
-            const nodeData = node.getData<any>()
-            node.setData({ ...nodeData, groupId: 0 })
-          })
-          selectedGroup!.setChildren([])
-          expGraph.deleteNodes(selectedGroup!)
-          expGraph.unSelectNode()
-          break
-        }
-        default:
-      }
-    },
-    [expGraph, activeNodeInstance, selectedNodes, experimentId, selectedGroup],
-  )
-
-  const newGroupEnabled =
-    !!selectedNodes &&
-    !!selectedNodes.length &&
-    selectedNodes.length > 1 &&
-    selectedNodes.every((node) => {
-      return node.isNode() && !node.getData<any>().groupId
-    })
-
-  const unGroupEnabled = !selectedNodes?.length && !!selectedGroup
-
-  return (
-    <div className={styles.canvasToolbar}>
-      <Toolbar hoverEffect={true} onClick={onClickItem}>
-        <Group>
-          <Item
-            name={Operations.UNDO_DELETE}
-            tooltip="撤销删除节点"
-            icon={<RollbackOutlined />}
-          />
-          <Item
-            name={Operations.GROUP_SELECT}
-            active={selectionEnabled}
-            tooltip="框选节点"
-            icon={<GatewayOutlined />}
-          />
-        </Group>
-        <Group>
-          <Item
-            name={Operations.NEW_GROUP}
-            disabled={!newGroupEnabled}
-            tooltip="新建群组"
-            icon={<GroupOutlined />}
-          />
-          <Item
-            name={Operations.UNGROUP}
-            disabled={!unGroupEnabled}
-            tooltip="拆分群组"
-            icon={<UngroupOutlined />}
-          />
-        </Group>
-        <Group>
-          <Item
-            name={Operations.RUN_SELECTED}
-            disabled={!activeNodeInstance}
-            tooltip="执行选择节点"
-            icon={<PlaySquareOutlined />}
-          />
-        </Group>
-      </Toolbar>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/edge-context-menu/index.less

@@ -1,5 +0,0 @@
-.edgeContextMenu {
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/edge-context-menu/index.tsx

@@ -1,48 +0,0 @@
-import React, { useCallback, useRef } from 'react'
-import { DeleteOutlined } from '@ant-design/icons'
-import { useClickAway } from 'ahooks'
-import { Menu } from '@antv/x6-react-components'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { graphPointToOffsetPoint } from '@/pages/common//utils/graph'
-import styles from './index.less'
-
-interface Props {
-  experimentId: string
-  data: any
-}
-
-export const EdgeContextMenu: React.FC<Props> = (props) => {
-  const { experimentId, data } = props
-  const containerRef = useRef<HTMLDivElement>(null as any)
-  const expGraph = useExperimentGraph(experimentId)
-
-  useClickAway(() => {
-    expGraph.clearContextMenuInfo()
-  }, containerRef)
-
-  const onDeleteEdge = useCallback(() => {
-    expGraph.deleteEdgeFromContextMenu(data.edge)
-  }, [expGraph, data])
-
-  const { x: left, y: top } = graphPointToOffsetPoint(
-    expGraph.graph!,
-    data,
-    expGraph.wrapper!,
-  )
-
-  return (
-    <div
-      ref={containerRef}
-      className={styles.edgeContextMenu}
-      style={{ top, left }}
-    >
-      <Menu hasIcon={true}>
-        <Menu.Item
-          onClick={onDeleteEdge}
-          icon={<DeleteOutlined />}
-          text="删除"
-        />
-      </Menu>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/graph-context-menu/index.less

@@ -1,42 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.graphContextMenu {
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-}
-
-.loadExperimentModal {
-  :global {
-    .@{ant-prefix}-modal-title {
-      font-size: 14px;
-    }
-
-    .@{ant-prefix}-btn {
-      font-size: 12px;
-    }
-  }
-
-  .versionTable {
-    :global {
-      .@{ant-prefix}-table.@{ant-prefix}-table-small {
-        font-size: 12px;
-      }
-    }
-
-    .operations {
-      :global {
-        .@{ant-prefix}-btn {
-          &:first-of-type {
-            padding-left: 0;
-            border-left: 0;
-          }
-
-          &.@{ant-prefix}-btn-sm {
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/graph-context-menu/index.tsx

@@ -1,40 +0,0 @@
-import React, { useRef } from 'react'
-import { ReloadOutlined } from '@ant-design/icons'
-import { useClickAway } from 'ahooks'
-import { Menu } from '@antv/x6-react-components'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { graphPointToOffsetPoint } from '@/pages/common//utils/graph'
-import styles from './index.less'
-
-interface Props {
-  experimentId: string
-  data: any
-}
-
-export const GraphContextMenu: React.FC<Props> = (props) => {
-  const { experimentId, data } = props
-  const containerRef = useRef<HTMLDivElement>(null as any)
-  const expGraph = useExperimentGraph(experimentId)
-
-  useClickAway(() => {
-    expGraph.clearContextMenuInfo()
-  }, containerRef)
-
-  const { x: left, y: top } = graphPointToOffsetPoint(
-    expGraph.graph!,
-    data,
-    expGraph.wrapper!,
-  )
-
-  return (
-    <div
-      ref={containerRef}
-      className={styles.graphContextMenu}
-      style={{ top, left }}
-    >
-      <Menu hasIcon={true}>
-        <Menu.Item disabled={true} icon={<ReloadOutlined />} text="刷新" />
-      </Menu>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/node-context-menu/index.less

@@ -1,42 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.graphContextMenu {
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-}
-
-.loadExperimentModal {
-  :global {
-    .@{ant-prefix}-modal-title {
-      font-size: 14px;
-    }
-
-    .@{ant-prefix}-btn {
-      font-size: 12px;
-    }
-  }
-
-  .versionTable {
-    :global {
-      .@{ant-prefix}-table.@{ant-prefix}-table-small {
-        font-size: 12px;
-      }
-    }
-
-    .operations {
-      :global {
-        .@{ant-prefix}-btn {
-          &:first-of-type {
-            padding-left: 0;
-            border-left: 0;
-          }
-
-          &.@{ant-prefix}-btn-sm {
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/context-menu/node-context-menu/index.tsx

@@ -1,69 +0,0 @@
-import React, { useCallback, useRef } from 'react'
-import {
-  PlaySquareOutlined,
-  EditOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-} from '@ant-design/icons'
-import { useClickAway } from 'ahooks'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { Menu } from '@antv/x6-react-components'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { graphPointToOffsetPoint } from '@/pages/common//utils/graph'
-import styles from './index.less'
-
-interface Props {
-  experimentId: string
-  data: any
-}
-
-export const NodeContextMenu: React.FC<Props> = (props) => {
-  const { experimentId, data } = props
-  const containerRef = useRef<HTMLDivElement>(null as any)
-  const expGraph = useExperimentGraph(experimentId)
-  const [activeNodeInstance] = useObservableState(
-    () => expGraph.activeNodeInstance$,
-  )
-
-  useClickAway(() => {
-    expGraph.clearContextMenuInfo()
-  }, containerRef)
-
-  const onNodeCopy = useCallback(async () => {
-    await expGraph.onCopyNode(data.node)
-  }, [expGraph, activeNodeInstance])
-
-  const onNodeDel = useCallback(async () => {
-    await expGraph.requestDeleteNodes([data.node.id])
-  }, [expGraph, activeNodeInstance])
-
-  const onGraphRun = useCallback(async () => {
-    await expGraph.runGraph()
-  }, [expGraph])
-
-  const { x: left, y: top } = graphPointToOffsetPoint(
-    expGraph.graph!,
-    data,
-    expGraph.wrapper!,
-  )
-
-  return (
-    <div
-      ref={containerRef}
-      className={styles.graphContextMenu}
-      style={{ top, left }}
-    >
-      <Menu hasIcon={true}>
-        <Menu.Item onClick={onNodeCopy} icon={<CopyOutlined />} text="复制" />
-        <Menu.Item onClick={onNodeDel} icon={<DeleteOutlined />} text="删除" />
-        <Menu.Item disabled={true} icon={<EditOutlined />} text="重命名" />
-        <Menu.Divider />
-        <Menu.Item
-          onClick={onGraphRun}
-          icon={<PlaySquareOutlined />}
-          text="执行"
-        />
-      </Menu>
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/floating-context-menu.less

@@ -1,8 +0,0 @@
-.mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 99999;
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/floating-context-menu.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { EdgeContextMenu } from './context-menu/edge-context-menu'
-import { GraphContextMenu } from './context-menu/graph-context-menu'
-import { NodeContextMenu } from './context-menu/node-context-menu'
-import css from './floating-context-menu.less'
-
-interface ContextMenuProps {
-  experimentId: string
-  menuType: 'node' | 'edge' | 'graph'
-  menuData: any
-}
-
-export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
-  const { experimentId, menuType, menuData } = props
-
-  switch (menuType) {
-    case 'edge':
-      return <EdgeContextMenu experimentId={experimentId} data={menuData} />
-    case 'graph':
-      return <GraphContextMenu experimentId={experimentId} data={menuData} />
-    case 'node':
-      return <NodeContextMenu experimentId={experimentId} data={menuData} />
-    default:
-      return null
-  }
-}
-
-interface Props {
-  experimentId: string
-}
-
-export const FloatingContextMenu: React.FC<Props> = (props) => {
-  const { experimentId } = props
-  const expGraph = useExperimentGraph(experimentId)
-  const [contextMenuInfo] = useObservableState(() => expGraph.contextMenuInfo$)
-
-  if (!contextMenuInfo?.type) {
-    return null
-  }
-
-  return (
-    <div className={css.mask}>
-      <ContextMenu
-        experimentId={experimentId}
-        menuData={contextMenuInfo.data}
-        menuType={contextMenuInfo.type}
-      />
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/graph-running-status.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { LoadingOutlined } from '@ant-design/icons'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-
-interface Props {
-  className?: string
-  experimentId: string
-}
-
-export const GraphRunningStatus: React.FC<Props> = (props) => {
-  const { className, experimentId } = props
-  const experimentGraph = useExperimentGraph(experimentId)
-  const [executionStatus] = useObservableState(
-    () => experimentGraph.executionStatus$,
-  )
-
-  return (
-    <div className={className}>
-      {executionStatus?.status === 'preparing' && (
-        <>
-          <LoadingOutlined style={{ marginRight: 4 }} /> 准备中...
-        </>
-      )}
-    </div>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/node-element.less

@@ -1,198 +0,0 @@
-.nodeElement {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 180px;
-  height: 32px;
-  overflow: hidden;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
-
-  &.selected,
-  &:hover {
-    background-color: rgba(243, 249, 255, 0.92);
-    border: 1px solid #1890ff;
-    box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
-
-    .icon {
-      width: 32px;
-      height: 30px;
-      margin: 0 1px 0 -1px;
-    }
-
-    // .notation {
-    //   position: relative;
-    //   left: -1px;
-
-    //   :global {
-    //     .anticon {
-    //       position: relative;
-    //       right: -2px;
-    //     }
-    //   }
-    // }
-  }
-
-  & > * {
-    flex-grow: 1;
-  }
-
-  .icon {
-    display: inline-flex;
-    flex-grow: 0;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background-color: rgba(229, 238, 255, 0.85);
-    border-radius: 4px 0 0 4px;
-  }
-
-  .notation {
-    display: inline-flex;
-    align-items: center;
-    width: calc(100% - 32px);
-    padding: 0 8px;
-    user-select: none;
-
-    & > * {
-      flex-grow: 1;
-    }
-
-    .name {
-      overflow-x: hidden;
-      color: rgba(0, 0, 0, 0.65);
-      font-size: 12px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      vertical-align: middle;
-    }
-
-    .statusIcon {
-      display: inline-flex;
-      flex-grow: 0;
-      align-items: center;
-      font-size: 14px;
-      transform: translateZ(0);
-    }
-  }
-}
-
-:global {
-  .x6-node [magnet='true'] {
-    cursor: crosshair;
-    transition: none;
-  }
-
-  .x6-node [magnet='true']:hover {
-    opacity: 1;
-  }
-
-  .x6-node [magnet='true'][port-group='in'] {
-    cursor: move;
-    stroke: none;
-  }
-
-  .x6-port-body > span {
-    display: block;
-  }
-
-  .ais-port {
-    width: 100%;
-    height: 100%;
-    border: 1px solid #808080;
-    border-radius: 100%;
-    background: #fff;
-    display: block;
-  }
-
-  .ais-port.connected {
-    width: 0;
-    height: 0;
-    margin-top: 3px;
-    margin-left: -1px;
-    border-width: 5px 4px 0;
-    border-style: solid;
-    border-color: #808080 transparent transparent;
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  .x6-port-body.available {
-    overflow: visible;
-  }
-
-  .x6-port-body.available body {
-    overflow: visible;
-  }
-  .x6-port-body.available span {
-    overflow: visible;
-    display: block;
-  }
-
-  .x6-port-body.available body > span::before {
-    content: ' ';
-    float: left;
-    width: 20px;
-    height: 20px;
-    margin-top: -6px;
-    margin-left: -6px;
-    border-radius: 50%;
-    background-color: rgba(57, 202, 116, 0.6);
-    box-sizing: border-box;
-  }
-
-  .x6-port-body.available body > span::after {
-    content: ' ';
-    float: left;
-    clear: both;
-    width: 10px;
-    height: 10px;
-    margin-top: -15px;
-    margin-left: -1px;
-    border-radius: 50%;
-    background-color: #fff;
-    border: 1px solid #39ca74;
-    // position: relative;
-    z-index: 10;
-    box-sizing: border-box;
-    // transform: translateZ(0);
-    // position: relative
-  }
-
-  .x6-port-body.adsorbed {
-    overflow: visible;
-  }
-
-  .x6-port-body.adsorbed body {
-    overflow: visible;
-  }
-
-  .x6-port-body.adsorbed body > span::before {
-    content: ' ';
-    float: left;
-    width: 28px;
-    height: 28px;
-    margin-top: -9px;
-    margin-left: -10px;
-    border-radius: 50%;
-    background-color: rgba(57, 202, 116, 0.6);
-    box-sizing: border-box;
-  }
-
-  .x6-port-body.adsorbed body > span::after {
-    content: ' ';
-    float: left;
-    clear: both;
-    width: 10px;
-    height: 10px;
-    margin-top: -19px;
-    border-radius: 50%;
-    background-color: #fff;
-    border: 1px solid #39ca74;
-    // position: relative;
-    z-index: 10;
-    box-sizing: border-box;
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/node-element.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Node } from '@antv/x6'
-import classNames from 'classnames'
-import { ConfigProvider } from 'antd'
-import { filter, map } from 'rxjs/operators'
-import { DatabaseFilled } from '@ant-design/icons'
-import { useObservableState } from '@/common/hooks/useObservableState'
-import { ANT_PREFIX } from '@/constants/global'
-import { NExecutionStatus } from '@/pages/rx-models/typing'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { NodeStatus } from '@/pages/common/graph-common/node-status'
-import { NodePopover } from '../../common/graph-common/node-popover'
-import styles from './node-element.less'
-
-interface Props {
-  experimentId: string
-  node?: Node
-}
-
-export const NodeElement: React.FC<Props> = (props) => {
-  const { experimentId, node } = props
-  const experimentGraph = useExperimentGraph(experimentId)
-  const [instanceStatus] = useObservableState(
-    () =>
-      experimentGraph.executionStatus$.pipe(
-        filter((x) => !!x),
-        map((x) => x.execInfo),
-      ),
-    {} as NExecutionStatus.ExecutionStatus['execInfo'],
-  )
-  const data: any = node?.getData() || {}
-  const { name, id, selected } = data
-  const nodeStatus = instanceStatus[id] || {}
-
-  return (
-    <ConfigProvider prefixCls={ANT_PREFIX}>
-      <NodePopover status={nodeStatus}>
-        <div
-          className={classNames(styles.nodeElement, {
-            [styles.selected]: !!selected,
-          })}
-        >
-          <div className={styles.icon}>
-            <DatabaseFilled style={{ color: '#1890ff' }} />
-          </div>
-          <div className={styles.notation}>
-            <div className={styles.name}>{name}</div>
-            {nodeStatus.jobStatus && (
-              <NodeStatus
-                className={styles.statusIcon}
-                status={nodeStatus.jobStatus as any}
-              />
-            )}
-          </div>
-        </div>
-      </NodePopover>
-    </ConfigProvider>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/node-group.less

@@ -1,59 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-@borderColor: #d9d9d9;
-
-.nodeGroup {
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  background-color: #fff;
-  border: 1px dashed @borderColor;
-  border-radius: 4px;
-  cursor: default; // TODO: 暂时还不支持群组移动，先把鼠标变成不可拖动的类型
-
-  .row {
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    justify-content: space-between;
-    height: 32px;
-    padding: 0 8px;
-
-    .name {
-      z-index: 11;
-    }
-
-    .collapseButton {
-      z-index: 11;
-      order: -1;
-      cursor: pointer;
-    }
-
-    .toolbar {
-      z-index: 11;
-      margin-top: 2px;
-      cursor: pointer;
-    }
-  }
-}
-
-:global {
-  .x6-node-selected {
-    :local {
-      .nodeGroup {
-        background-color: rgba(243, 249, 255, 0.92);
-        border: 1px solid #1890ff;
-        box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
-      }
-    }
-  }
-}
-
-.namePopover {
-  :global {
-    .@{ant-prefix}-popover-inner-content {
-      padding: 8px 12px !important;
-      font-size: 12px;
-    }
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/elements/node-group.tsx

@@ -1,367 +0,0 @@
-import React, { useCallback } from 'react'
-import { Popover, ConfigProvider } from 'antd'
-import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'
-import { Edge } from '@antv/x6'
-import { ANT_PREFIX } from '@/constants/global'
-import { calcNodeScale } from '@/pages/rx-models/graph-util'
-import { useExperimentGraph } from '@/pages/rx-models/experiment-graph'
-import { NExperimentGraph } from '@/pages/rx-models/typing'
-import {
-  X6DemoGroupNode,
-  X6DemoNode,
-} from '@/pages/common/graph-common/shape/node'
-import { X6DemoGroupEdge } from '../../common/graph-common/shape/edge'
-import styles from './node-group.less'
-
-interface Props {
-  experimentId: string
-  node?: X6DemoGroupNode
-}
-
-export const NodeGroup: React.FC<Props> = (props) => {
-  const { experimentId, node } = props
-  const data = node!.getData<NExperimentGraph.Group>()
-  const { name, isCollapsed = false } = data
-  const experimentGraph = useExperimentGraph(experimentId)
-
-  // 折叠
-  const onCollapseGroup = useCallback(() => {
-    const { graph } = experimentGraph
-    const children = node!.getDescendants()
-    const childNodes: X6DemoNode[] = children.filter((child) =>
-      child.isNode(),
-    ) as any[]
-    const { x, y, width, height } = calcNodeScale(
-      { isCollapsed: true } as any,
-      childNodes.map((i) => i.getData()),
-    )
-
-    // 还原尺寸
-    node!.setProp({
-      position: { x, y },
-      size: { width, height },
-    })
-
-    // 处理 Data
-    node?.updateData({ isCollapsed: true })
-
-    // 隐藏子元素
-    children.forEach((child) => {
-      child.hide()
-      child.updateData({ hide: true })
-    })
-
-    // 删除桩和边
-    const groupEdges = graph?.getConnectedEdges(node!)
-    if (groupEdges?.length) {
-      experimentGraph.deleteEdges(groupEdges)
-    }
-    const ports = node!.getPorts()
-    if (ports?.length) {
-      node!.removePorts(ports)
-    }
-
-    // 创建新的连接桩和边
-    const incomingEdges = childNodes.reduce(
-      (accu: Edge[], curr: X6DemoNode) => {
-        const incomingEdgs = graph!.getIncomingEdges(curr)
-        if (incomingEdgs?.length) {
-          return [...accu, ...incomingEdgs]
-        }
-        return accu
-      },
-      [] as Edge[],
-    )
-    const outgoingEdges = childNodes.reduce(
-      (accu: Edge[], curr: X6DemoNode) => {
-        const outgoingEdgs = graph!.getOutgoingEdges(curr)
-        if (outgoingEdgs?.length) {
-          return [...accu, ...outgoingEdgs]
-        }
-        return accu
-      },
-      [] as Edge[],
-    )
-    if (incomingEdges?.length) {
-      const inputPortId = Date.now().toString()
-      node!.addPort({ group: 'in', id: inputPortId, connected: true })
-      incomingEdges
-        .filter(
-          (edge) =>
-            !childNodes.map((i) => i.id).includes(edge.getSourceCellId()),
-        ) // 只考虑从外部连接到组里的连线
-        .forEach((edge) => {
-          let sourceNodeId = edge.getSourceCellId()
-          let sourcePortId = edge.getSourcePortId()
-          const sourceNode: X6DemoNode = edge.getSourceCell()! as X6DemoNode
-          if (sourceNode instanceof X6DemoGroupNode) {
-            experimentGraph.deleteEdges(edge)
-            return
-          }
-          const sourceParentNode: X6DemoGroupNode | null =
-            sourceNode.parent as X6DemoGroupNode
-          // 若源节点不可见，且存在父群组节点，则说明源节点的父群组节点已折叠，此时创建一个连接折叠父节点的桩
-          if (
-            !sourceNode.visible &&
-            sourceParentNode instanceof X6DemoGroupNode
-          ) {
-            sourceNodeId = sourceParentNode.id
-            const parentNodePorts = sourceParentNode.getPortsByGroup('out')
-            sourcePortId = parentNodePorts[0].id
-          }
-          graph!.addEdge(
-            new X6DemoGroupEdge({
-              sourceAnchor: 'bottom',
-              source: {
-                cell: sourceNodeId,
-                port: sourcePortId,
-                anchor: {
-                  name: 'bottom',
-                },
-              },
-              target: {
-                cell: node!.id,
-                port: inputPortId,
-                anchor: {
-                  name: 'center',
-                },
-              },
-              zIndex: 1,
-            }),
-          )
-        })
-    }
-    if (outgoingEdges?.length) {
-      const outputPortId = Date.now().toString()
-      node!.addPort({ group: 'out', id: outputPortId, connected: false })
-      outgoingEdges
-        .filter(
-          (edge) =>
-            !childNodes.map((i) => i.id).includes(edge.getTargetCellId()),
-        )
-        .forEach((edge) => {
-          let targetNodeId = edge.getTargetCellId()
-          let targetPortId = edge.getTargetPortId()
-          const targetNode: X6DemoNode = edge.getTargetCell()! as X6DemoNode
-          if (targetNode instanceof X6DemoGroupNode) {
-            experimentGraph.deleteEdges(edge)
-            return
-          }
-          const targetParentNode: X6DemoGroupNode | null =
-            targetNode.parent as X6DemoGroupNode
-          // 若源节点不可见，且存在父群组节点，则说明源节点的父群组节点已折叠，此时创建一个连接折叠父节点的桩
-          if (
-            !targetNode.visible &&
-            targetParentNode instanceof X6DemoGroupNode
-          ) {
-            targetNodeId = targetParentNode.id
-            const parentNodePorts = targetParentNode.getPortsByGroup('in')
-            targetPortId = parentNodePorts[0].id
-          }
-          graph!.addEdge(
-            new X6DemoGroupEdge({
-              sourceAnchor: 'bottom',
-              source: {
-                cell: node!.id,
-                port: outputPortId,
-                anchor: {
-                  name: 'bottom',
-                },
-              },
-              target: {
-                cell: targetNodeId,
-                port: targetPortId,
-                anchor: {
-                  name: 'center',
-                },
-              },
-              zIndex: 1,
-            }),
-          )
-        })
-    }
-  }, [node, experimentGraph])
-
-  // 展开
-  const onExpandGroup = useCallback(() => {
-    const { graph } = experimentGraph
-    const children = node!.getDescendants()
-    const childNodes: X6DemoNode[] = children.filter((child) =>
-      child.isNode(),
-    ) as any[]
-    const { x, y, width, height } = calcNodeScale(
-      { isCollapsed: false } as any,
-      children.filter((i) => i.isNode()).map((i) => i.getData()),
-    )
-    // 还原尺寸
-    node!.setProp({
-      position: { x, y },
-      size: { width, height },
-    })
-
-    // 处理 Data
-    const prevData = node!.getData<object>()
-    node?.setData({ ...prevData, isCollapsed: false })
-
-    // 显示子元素
-    childNodes.forEach((child) => {
-      child.show()
-      child.updateData({ hide: false })
-    })
-
-    // 删除桩和边
-    const groupEdges = graph?.getConnectedEdges(node!)
-    if (groupEdges?.length) {
-      experimentGraph.deleteEdges(groupEdges)
-    }
-    const ports = node!.getPorts()
-    if (ports?.length) {
-      node!.removePorts(ports)
-    }
-
-    // 建立与外部折叠群组的连接
-    const childIncomingEdges = childNodes.reduce(
-      (accu: Edge[], curr: X6DemoNode) => {
-        const incomingEdgs = graph!.getIncomingEdges(curr)
-        if (incomingEdgs?.length) {
-          return [...accu, ...incomingEdgs]
-        }
-        return accu
-      },
-      [] as Edge[],
-    )
-    const childOutgoingEdges = childNodes.reduce(
-      (accu: Edge[], curr: X6DemoNode) => {
-        const outgoingEdgs = graph!.getOutgoingEdges(curr)
-        if (outgoingEdgs?.length) {
-          return [...accu, ...outgoingEdgs]
-        }
-        return accu
-      },
-      [] as Edge[],
-    )
-    if (childIncomingEdges?.length) {
-      childIncomingEdges
-        .filter(
-          (edge) =>
-            !childNodes.map((i) => i.id).includes(edge.getSourceCellId()),
-        ) // 只考虑从外部连接到组里的连线
-        .forEach((edge) => {
-          const sourceNode: X6DemoNode = edge.getSourceCell()! as X6DemoNode
-          if (sourceNode instanceof X6DemoGroupNode) {
-            experimentGraph.deleteEdges(edge)
-            return
-          }
-          const sourceParentNode: X6DemoGroupNode | null =
-            sourceNode.parent as X6DemoGroupNode
-          // 若源节点不可见，且存在父群组节点，则说明源节点的父群组节点已折叠，此时创建一个连接折叠父节点的桩
-          if (
-            !sourceNode.visible &&
-            sourceParentNode instanceof X6DemoGroupNode
-          ) {
-            const sourceNodeId = sourceParentNode.id
-            const parentNodePorts = sourceParentNode.getPortsByGroup('out')
-            const sourcePortId = parentNodePorts[0].id
-            const targetNodeId = edge.getTargetCellId()
-            const targetPortId = edge.getTargetPortId()
-            graph!.addEdge(
-              new X6DemoGroupEdge({
-                sourceAnchor: 'bottom',
-                source: {
-                  cell: sourceNodeId,
-                  port: sourcePortId,
-                  anchor: {
-                    name: 'bottom',
-                  },
-                },
-                target: {
-                  cell: targetNodeId,
-                  port: targetPortId,
-                  anchor: {
-                    name: 'center',
-                  },
-                },
-                zIndex: 1,
-              }),
-            )
-          }
-        })
-    }
-
-    if (childOutgoingEdges?.length) {
-      childOutgoingEdges
-        .filter(
-          (edge) =>
-            !childNodes.map((i) => i.id).includes(edge.getTargetCellId()),
-        )
-        .forEach((edge) => {
-          const targetNode: X6DemoNode = edge.getTargetCell()! as X6DemoNode
-          if (targetNode instanceof X6DemoGroupNode) {
-            experimentGraph.deleteEdges(edge)
-            return
-          }
-          const targetParentNode: X6DemoGroupNode | null =
-            targetNode.parent as X6DemoGroupNode
-          // 若源节点不可见，且存在父群组节点，则说明源节点的父群组节点已折叠，此时创建一个连接折叠父节点的桩
-          if (
-            !targetNode.visible &&
-            targetParentNode instanceof X6DemoGroupNode
-          ) {
-            const targetNodeId = targetParentNode.id
-            const parentNodePorts = targetParentNode.getPortsByGroup('in')
-            const targetPortId = parentNodePorts[0].id
-            const sourceNodeId = edge.getSourceCellId()
-            const sourcePortId = edge.getSourcePortId()
-            graph!.addEdge(
-              new X6DemoGroupEdge({
-                sourceAnchor: 'bottom',
-                source: {
-                  cell: sourceNodeId,
-                  port: sourcePortId,
-                  anchor: {
-                    name: 'bottom',
-                  },
-                },
-                target: {
-                  cell: targetNodeId,
-                  port: targetPortId,
-                  anchor: {
-                    name: 'center',
-                  },
-                },
-                zIndex: 1,
-              }),
-            )
-          }
-        })
-    }
-  }, [node, experimentGraph])
-
-  return (
-    <ConfigProvider prefixCls={ANT_PREFIX}>
-      <div className={styles.nodeGroup}>
-        <div className={styles.row}>
-          <Popover
-            content={`组名: ${name}`}
-            overlayClassName={styles.namePopover}
-          >
-            <div className={styles.name}>
-              {name.length > 20 ? `${name.slice(0, 20)}...` : name}
-            </div>
-          </Popover>
-          {isCollapsed ? (
-            <PlusSquareOutlined
-              className={styles.collapseButton}
-              onClick={onExpandGroup}
-            />
-          ) : (
-            <MinusSquareOutlined
-              className={styles.collapseButton}
-              onClick={onCollapseGroup}
-            />
-          )}
-        </div>
-      </div>
-    </ConfigProvider>
-  )
-}

examples/x6-app-dag/src/pages/dag-canvas/index.less

@@ -1,70 +0,0 @@
-@import (reference) '~antd/lib/style/themes/default.less';
-
-.dagContainer {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding-bottom: 40px;
-
-  .canvasContent {
-    flex-grow: 1;
-  }
-}
-
-:global {
-  .x6-edge {
-    stroke-width: 1px;
-    &.success {
-      path:nth-child(2) {
-        stroke: #888 !important;
-      }
-      path:nth-child(3) {
-        fill: #888 !important;
-        stroke: #888 !important;
-      }
-    }
-    &.error {
-      stroke-width: 2px;
-      path:nth-child(2) {
-        stroke: rgba(245, 34, 45, 0.45) !important;
-        stroke-width: 2px;
-      }
-    }
-    &.edgeProcessing {
-      path:nth-child(2) {
-        stroke: rgba(57, 202, 116, 0.8);
-        stroke-width: 2px;
-        stroke-dasharray: 8px, 2px;
-        &:local {
-          animation: processing-line 30s infinite linear;
-        }
-      }
-    }
-    @keyframes processing-line {
-      to {
-        stroke-dashoffset: -1000;
-      }
-    }
-  }
-  .x6-split-box-horizontal > .x6-split-box-resizer,
-  .x6-split-box-vertical > .x6-split-box-resizer {
-    background: #e9e9e9;
-  }
-
-  .@{ant-prefix}-spin-container {
-    width: 100%;
-    height: 100%;
-  }
-
-  .x6-widget-selection-inner {
-    border: none !important;
-    box-shadow: none !important;
-  }
-
-  .x6-widget-selection-box {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}

examples/x6-app-dag/src/pages/dag-canvas/index.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect } from 'react'
-import classNames from 'classnames'
-import {
-  useExperimentGraph,
-  useUnmountExperimentGraph,
-} from '@/pages/rx-models/experiment-graph'
-import { CanvasContent } from './canvas-content'
-import { CanvasToolbar } from './canvas-toolbar'
-import { BottomToolbar } from './bottom-toolbar'
-
-import styles from './index.less'
-
-interface Props {
-  experimentId: string
-  className?: string
-}
-
-export const DAGCanvas: React.FC<Props> = (props) => {
-  const { experimentId, className } = props
-  const expGraph = useExperimentGraph(experimentId)
-
-  // 处理画布卸载
-  useUnmountExperimentGraph(experimentId)
-
-  // 自定义算法组件的渲染控制
-  useEffect(() => {
-    ;(window as any).renderForm = expGraph.setActiveAlgoData
-    return () => {
-      delete (window as any).renderForm
-    }
-  }, [expGraph])
-
-  return (
-    <div className={classNames(styles.dagContainer, className)}>
-      <CanvasToolbar experimentId={experimentId} />
-      <CanvasContent
-        experimentId={experimentId}
-        className={styles.canvasContent}
-      />
-      <BottomToolbar experimentId={experimentId} />
-    </div>
-  )
-}