chore(release): 🚀 publish

* docs: 📚️ add port connected demo

* feat: ✨ add scroller 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/dependabot.yml

@@ -1,6 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: "github-actions"
-  directory: "/"
-  schedule:
-      interval: "weekly"

.github/workflows/auto-close-fixed-issues.yml

@@ -1,5 +1,5 @@
-# Automatically close issues fixed in pull requests that doesn't target the default branch.
-
+# This action will automatically close issues fixed in
+# pull requests that doesn't target the default branch.
 name: 🚫　Auto Close Fixed Issues
 on:
   pull_request_target:

.github/workflows/auto-comment.yml

@@ -1,5 +1,3 @@
-# Comment on issues/PRs on certain events (currently not used at all.)
-
 name: 💬　Auto Comment
 on: [issues, pull_request_target]
 jobs:

.github/workflows/ci.yml

@@ -1,5 +1,3 @@
-# Continuous integration.
-
 name: 👷　CI
 on:
   pull_request_target:
@@ -18,16 +16,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -51,19 +49,13 @@ jobs:
           github-token: ${{ env.bot_token }}
           path-to-lcov: ./packages/x6/test/coverage/lcov.info
       - name: 💡　Codecov(x6)
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6/test/coverage/lcov.info
           flags: x6
-      - name: 💡　Codecov(x6-vector)
-        uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./packages/x6-vector/test/coverage/lcov.info
-          flags: x6-vector
       - name: 💡　Codecov(x6-geometry)
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6-geometry/test/coverage/lcov.info

.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/create-issue-branch.yml

@@ -1,6 +1,3 @@
-# Create a new branch dedicated to a specific issue
-# (may be superseded by GitHub functionalities)
-
 name: 🚧　Create Issue Branch
 on:
   issue_comment:
@@ -9,7 +6,7 @@ jobs:
   cib:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

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

@@ -1,5 +1,3 @@
-# Delete all but the last x GitHub releases for certain packages.
-
 name: 🚫　Delete Stale Releases
 on:
   repository_dispatch:
@@ -8,7 +6,7 @@ jobs:
   clean:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -22,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

@@ -1,5 +1,3 @@
-# Build and deploy updated official site to GitHub pages.
-
 name: 🚀　Deploy Sites
 on:
   repository_dispatch:
@@ -12,9 +10,9 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -23,7 +21,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: 🚸　Setup Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -32,7 +30,7 @@ jobs:
 
       ## cache webpack(babel-loader, eslint-loader)
       - name: 💩　Setup Webpack Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             node_modules
@@ -43,7 +41,7 @@ jobs:
 
       ## cache sites
       - name: 💩　Setup Sites Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: sites/x6-sites/static/demos
           key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}

.github/workflows/gitleaks.yml

@@ -1,5 +1,3 @@
-# https://github.com/gitleaks/gitleaks-action
-
 name: 🥤　GitLeaks
 on:
   pull_request_target:
@@ -12,7 +10,7 @@ jobs:
   gitleaks:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
       with:
         fetch-depth: '1'
     - name: wget
@@ -20,4 +18,4 @@ jobs:
       with:
         args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
     - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@v1.6.0
+      uses: zricethezav/gitleaks-action@master

.github/workflows/label-commands.yml

@@ -1,8 +1,3 @@
-# Perform certain actions when labels are added to
-# or removed from issues.
-#
-# See .github/workflows/config/label-commands.yml
-
 name: 👾　Label Commands
 on:
   pull_request_target:

.github/workflows/lock.yml

@@ -1,6 +1,3 @@
-# Locks closed issues and pull requests after a period of inactivity.
-# https://github.com/dessant/lock-threads
-
 name: ⛔️　Lock Threads
 on:
   schedule:
@@ -14,7 +11,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: dessant/lock-threads@v3
+      - uses: dessant/lock-threads@v2
         with:
           github-token: ${{ env.bot_token }}
           issue-lock-inactive-days: 365

.github/workflows/needs-more-info.yml

@@ -1,6 +1,3 @@
-# Request more info from newly opened issues/PRs that contain either default title/body or whose body is left blank
-# https://github.com/wow-actions/needs-more-info
-
 name: 🚨　Needs More Info
 on:
   pull_request_target:

.github/workflows/potential-duplicates.yml

@@ -1,6 +1,3 @@
-# Search for potential issue duplicates using Damerau–Levenshtein algorithm
-# https://github.com/wow-actions/potential-duplicates
-
 name: 🆖　Potential Duplicates
 on:
   issues:

.github/workflows/pr-label-branch-name.yml

@@ -1,6 +1,3 @@
-# Automatically apply labels to your PRs based on branch name patterns like feature/* or fix/*
-# https://github.com/TimonVS/pr-labeler-action
-
 name: 🏷️　Label(Branch Name)
 on:
   pull_request_target:

.github/workflows/pr-label-file-paths.yml

@@ -1,6 +1,3 @@
-# Label a PR according to the packages it involves, based on changed files
-# and the rules defined in .github/workflows/config/pr-label-file-paths.yml
-
 name: 🏷️　Label(File Paths)
 on: pull_request_target
 jobs:
@@ -12,7 +9,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: actions/labeler@v4
+      - uses: actions/labeler@v2
         with:
           repo-token: ${{ env.bot_token }}
           configuration-path: .github/workflows/config/pr-label-file-paths.yml

.github/workflows/pr-label-patch-size.yml

@@ -1,12 +1,10 @@
-# Assign labels based on pull request change sizes.
-
 name: 🏷️　Label(Patch Size)
 on: pull_request_target
 jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/pr-label-status-dummy.yml

@@ -1,16 +1,9 @@
-# Automatically label a PR depending on the PR's status (springboard)
-
 name: 🏷️　Label(Status) Dummy
 on:
   pull_request_review:
     types: [submitted, dismissed]
-permissions:
-  contents: read
-
 jobs:
   dummy:
-    permissions:
-      contents: none
     runs-on: ubuntu-latest
     steps:
       - run: echo "this is a dummy workflow that triggers a workflow_run; it's necessary because otherwise the repo secrets will not be in scope for externally forked pull requests"

.github/workflows/pr-label-status.yml

@@ -1,5 +1,3 @@
-# Automatically label a PR depending on the PR's status
-
 name: 🏷️　Label(Status)
 on:
   pull_request_target:
@@ -19,4 +17,4 @@ jobs:
       - uses: wow-actions/pr-triage@v1
         with:
           GITHUB_TOKEN: ${{ env.bot_token }}
-          WORKFLOW_ID: ${{ github.event.workflow_run.id }}
+          WORKFLOW-ID: ${{ github.event.workflow_run.id }}

.github/workflows/pr-label-title-body.yml

@@ -1,6 +1,5 @@
-# Automatically add labels or setting assignees when a new issue or PR is opened,
-# based on its title and body.
-# https://github.com/marketplace/actions/issue-labeler
+# Github action for automatically adding label or setting assignee when a new
+# Issue or PR is opened. https://github.com/marketplace/actions/issue-labeler
 
 name: 🏷️　Label(Title and Body)
 on:
@@ -17,7 +16,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: Naturalclar/issue-action@v2.0.2
+      - uses: Naturalclar/issue-action@v2.0.1
         with:
           title-or-body: title
           github-token: ${{ env.bot_token }}

.github/workflows/preview.yml

@@ -1,5 +1,3 @@
-# https://github.com/afc163/surge-preview
-
 name: 🔂　Surge PR Preview
 on:
   pull_request_target:
@@ -15,14 +13,14 @@ jobs:
       matrix:
         node-version: [16.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
 
       - name: 🌱　Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: 🚸　Setup yarn cacha
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -31,7 +29,7 @@ jobs:
 
       ## cache webpack(babel-loader, eslint-loader)
       - name: 💩　Setup webpack cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             node_modules
@@ -42,7 +40,7 @@ jobs:
 
       ## cache sites
       - name: 💩　Setup sites cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: sites/x6-sites/static/demos
           key: ${{ runner.os }}-sites-${{ hashFiles('./packages/x6/package.json', './sites/x6-sites-demos/**/src') }}
@@ -50,7 +48,7 @@ jobs:
             ${{ runner.os }}-sites-
 
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/rebase.yml

@@ -1,5 +1,3 @@
-# Automatically rebase PRs via the /rebase command
-
 name: 🎉　Rebase
 on:
   issue_comment:
@@ -9,7 +7,7 @@ jobs:
     if: github.event.issue.pull_request != '' && contains(github.event.comment.body, '/rebase')
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@master
         with:
           fetch-depth: 0
       - uses: wow-actions/use-app-token@v1

.github/workflows/release.yml

@@ -1,8 +1,4 @@
-# Create new GitHub releases using scripts/monorepo-semantic-release
-# and the semantic-release package.
-#
-# See https://www.npmjs.com/package/semantic-release
-# See https://dev.to/antongolub/the-chronicles-of-semantic-release-and-monorepos-5cfc
+# @see: https://dev.to/antongolub/the-chronicles-of-semantic-release-and-monorepos-5cfc
 
 name: 🚀　Release
 on:
@@ -21,16 +17,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -64,7 +60,7 @@ jobs:
 
       - name: 🔀　Repository Dispatch
         if: github.ref == 'refs/heads/master'
-        uses: peter-evans/repository-dispatch@v2
+        uses: peter-evans/repository-dispatch@v1
         with:
           token: ${{ env.bot_token }}
           event-type: released

.github/workflows/slash-commands.yml

@@ -1,5 +1,3 @@
-# https://github.com/wow-actions/slash-commands
-
 name: 🔱　Slash Commands
 on:
   issue_comment:

.github/workflows/stale.yml

@@ -1,5 +1,3 @@
-# Warn and then close issues and PRs that have had no activity for a specified amount of time.
-
 name: 👻　Stale
 on:
   schedule:
@@ -13,7 +11,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: actions/stale@v6
+      - uses: actions/stale@v3
         with:
           repo-token: ${{ env.bot_token }}
           stale-issue-message: |

.github/workflows/sync-labels.yml

@@ -1,5 +1,3 @@
-# Update issue labels in repo as defined in /.github/workflows/config/labels.yml
-
 name: 🔄　Sync Labels
 on:
   push:
@@ -11,7 +9,7 @@ jobs:
   sync:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

.github/workflows/sync-to-gitee.yml

@@ -1,5 +1,3 @@
-# Sync repo to https://gitee.com/
-#
 # https://github.com/marketplace/actions/gitee-pages-action
 # 配置步骤如下
 # 1. 在命令行终端或 Git Bash 使用命令 ssh-keygen -t rsa -C "youremail@example.com" 生成 SSH Key，注意替换为自己的邮箱。生成的 id_rsa 是私钥，id_rsa.pub 是公钥。(⚠️注意此处不要设置密码)

.github/workflows/update-authors.yml

@@ -1,5 +1,3 @@
-# Automatically generate and update AUTHORS.txt.
-
 name: 🎗　Update Authors
 on:
   push:
@@ -11,7 +9,7 @@ jobs:
   authors:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
         with:
           fetch-depth: 0
       - uses: wow-actions/use-app-token@v1

.github/workflows/update-cache.yaml

@@ -1,5 +1,4 @@
-# Cache dependencies and build outputs to improve workflow execution time.
-# https://github.com/actions/cache
+# Auto update cahe
 
 name: 🌈　Update Cache
 on:
@@ -11,9 +10,6 @@ on:
       - next-major
       - alpha
       - beta
-permissions:
-  contents: read
-
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -22,9 +18,9 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
       - name: 🌱　Get Cache Directory
@@ -32,7 +28,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: 🚸　Setup Cache
         id: cache
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}

.github/workflows/update-contributors.yml

@@ -1,5 +1,3 @@
-# Update /CONTRIBUTORS.svg to include new contributors' avatars.
-
 name: 🤝　Update Contributors
 on:
   schedule:

.github/workflows/update-license.yml

@@ -1,5 +1,3 @@
-# Renew the copyright notice in LICENSE at the beginning of every year.
-
 name: 🔑　Update License
 on:
   schedule:
@@ -8,7 +6,7 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v2
       with:
         fetch-depth: 0
     - uses: wow-actions/use-app-token@v1

.github/workflows/welcome.yml

@@ -1,5 +1,3 @@
-# Comment a welcome message on an issue if it's the reporter's first issue.
-
 name: 👋　Welcome
 on:
   pull_request_target:

.gitignore

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

AUTHORS

@@ -1,5 +1,4 @@
 BARM <284942955@qq.com>
-Candy <563378816@qq.com>
 Chaoqi <HAN>
 Clifford <ajard>
 DaiGang <42136433+daigang666@users.noreply.github.com>
@@ -7,19 +6,11 @@ Dong <48054715+halodong@users.noreply.github.com>
 Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
-Gossypol <31892817+gossypol@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
-Indomi <indomi126@gmail.com>
 James <san>
 Jógvan <lse>
 Ken <ei>
-Limbo <49612796+JUST-Limbo@users.noreply.github.com>
-Lixu <37231473+wflixu@users.noreply.github.com>
-Lloyd <ho>
 Lyn <47809781+lyn-boyu@users.noreply.github.com>
-Mingfei <az8641683@163.com>
-MrMengJ <2646973632@qq.com>
-Naveen <172697+naveensrinivasan@users.noreply.github.com>
 NewByVector <NewByVector@users.noreply.github.com>
 Olive.Wang <olivewind.wang@gmail.com>
 Opportunity <opportunity@live.in>
@@ -27,25 +18,18 @@ Questions <chip@twostewards.com>
 RuiLin <on>
 SSC <273702440@qq.com>
 Sindori <441933726@qq.com>
-Susan <527971893@qq.com>
-Thomas <eugne>
 Tony <>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
-Xingjian <han>
 Zhenyu <o>
-arthur657834 <kingkom7834@126.com>
 boyu.zlj <boyu.zlj@antgroup.com>
 breezefaith <nyzhangzc@qq.com>
 bubkoo <bubkoo.wy@gmail.com>
 bubkoo <bubkoo@users.noreply.github.com>
 budlion <dongqi.ldq@alibaba-inc.com>
-cuidong626 <cuidong1234@outlook.com>
 daigang <1210242662@qq.com>
 doublewu <592581554@qq.com>
 iceytea <liyunheasap@yeah.net>
-jiqili <43718732+jiqili@users.noreply.github.com>
-kelin.zrh <34393362+AricZhu@users.noreply.github.com>
 kingshuaishuai <ken.wang@mrs.ai>
 kio <1421104933@qq.com>
 lijing666 <lijing241@yeah.net>
@@ -53,25 +37,18 @@ lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
 lvhuiyang <ilvhuiyang@gmail.com>
-myzxlin <myzxlin@163.com>
 newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
 niexq <niexq@firstgrid.cn>
 pengxingjian.pxj <pengxingjian.pxj@alibaba-inc.com>
-pfdgithub <pfdgithub@users.noreply.github.com>
 qingchi <qinky94@163.com>
-qu <33251372+Qujh97@users.noreply.github.com>
-sallen450 <qinghua10199@gmail.com>
 semantic-release-bot <semantic-release-bot@martynus.net>
 vector <vectorse@126.com>
-wenbei <38773084+wb-wenbei@users.noreply.github.com>
 wgf <34190465+evelope@users.noreply.github.com>
-wind <>
 wjqsummer <52412389+wjqsummer@users.noreply.github.com>
 wtzeng1 <wtzeng1@gmail.com>
 x6-bot <x6-bot@users.noreply.github.com>
 xrkffgg <xrkffgg@gmail.com>
-yaojin2070 <48686959+yaojin2070@users.noreply.github.com>
 zdc1111 <39116292+zdc1111@users.noreply.github.com>
 九思⚡⚡⚡ <2228429150@qq.com>
 何腾飞 <avrin.live.cn@outlook.com>
@@ -81,7 +58,6 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
 文瑀 <wenyu.jqq@antfin.com>
 杨凌 <89915256@qq.com>
 柏愚 <boyu.zlj@antfin.com>
-粑粑超 <842486229@qq.com>
 金强强 <wenyu.jqq@antfin.com>
 问崖 <bubkoo.wy@gmail.com>
 问崖 <pengxingjian.pxj@antfin.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,92 +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*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
-</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
@@ -195,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'
-// 从 CDN 引入时，我们暴露了 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,95 +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://www.yuque.com/antv/x6/xgb04i)
-
-## 应用案例
-
-<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*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
-</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 工具
@@ -200,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.

configs/package-json/CHANGELOG.md

@@ -1,11 +1,3 @@
-## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-07)
-
-## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-06)
-
-## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-06-05)
-
-## @antv/x6-package-json [1.0.2](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.1...@antv/x6-package-json@1.0.2) (2022-05-31)
-
 ## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-14)
 
 ## @antv/x6-package-json [1.0.1](https://github.com/antvis/x6/compare/@antv/x6-package-json@1.0.0...@antv/x6-package-json@1.0.1) (2021-11-08)

configs/package-json/antd.json

@@ -1,6 +1,6 @@
 {
   "peerDependencies": {
-    "antd": ">=4.4.2 || >=5.0.0-beta.0"
+    "antd": ">=4.4.2"
   },
   "devDependencies": {
     "antd": "^4.4.2"

configs/package-json/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-package-json",
-  "version": "1.0.2",
+  "version": "1.0.1",
   "bin": {
     "package-compare": "./bin/package-compare.js",
     "package-inherit": "./bin/package-inherit.js"
@@ -73,7 +73,7 @@
     "chalk": "^4.1.0",
     "detect-newline": "^3.1.0",
     "parse-package-name": "^0.1.0",
-    "workspace-tools": "^0.18.4",
+    "workspace-tools": "^0.12.3",
     "yargs-parser": "^20.2.7"
   }
 }

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.32.3",
-    "@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;
-  }
-}