chore: 🔧 release x6-react-shape@1.6.6

Co-authored-by: 魄兵 <pobing.slb@alibaba-inc.com>

.github/dependabot.yml

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

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

@@ -1,5 +1,5 @@
-# This action will automatically close issues fixed in
-# pull requests that doesn't target the default branch.
+# 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,3 +1,5 @@
+# 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,3 +1,5 @@
+# Continuous integration.
+
 name: 👷　CI
 on:
   pull_request_target:
@@ -16,16 +18,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         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@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -49,19 +51,19 @@ jobs:
           github-token: ${{ env.bot_token }}
           path-to-lcov: ./packages/x6/test/coverage/lcov.info
       - name: 💡　Codecov(x6)
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6/test/coverage/lcov.info
           flags: x6
       - name: 💡　Codecov(x6-vector)
-        uses: codecov/codecov-action@v1
+        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@v1
+        uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           files: ./packages/x6-geometry/test/coverage/lcov.info

.github/workflows/config/labels.yml

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

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

@@ -1,3 +1,5 @@
+# Delete all but the last x GitHub releases for certain packages.
+
 name: 🚫　Delete Stale Releases
 on:
   repository_dispatch:
@@ -6,7 +8,7 @@ jobs:
   clean:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -20,6 +22,7 @@ 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,3 +1,5 @@
+# Build and deploy updated official site to GitHub pages.
+
 name: 🚀　Deploy Sites
 on:
   repository_dispatch:
@@ -10,9 +12,9 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
 
@@ -21,7 +23,7 @@ jobs:
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: 🚸　Setup Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -30,7 +32,7 @@ jobs:
 
       ## cache webpack(babel-loader, eslint-loader)
       - name: 💩　Setup Webpack Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -41,7 +43,7 @@ jobs:
 
       ## cache sites
       - name: 💩　Setup Sites Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         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,3 +1,5 @@
+# https://github.com/gitleaks/gitleaks-action
+
 name: 🥤　GitLeaks
 on:
   pull_request_target:
@@ -10,7 +12,7 @@ jobs:
   gitleaks:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: '1'
     - name: wget
@@ -18,4 +20,4 @@ jobs:
       with:
         args: -O .gitleaks.toml https://raw.githubusercontent.com/ycjcl868/gitleaks/master/.gitleaks.toml
     - name: gitleaks-action
-      uses: zricethezav/gitleaks-action@master
+      uses: zricethezav/gitleaks-action@v1.6.0

.github/workflows/label-commands.yml

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

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

@@ -1,3 +1,6 @@
+# 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,3 +1,6 @@
+# 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,3 +1,6 @@
+# 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,3 +1,6 @@
+# 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:
@@ -9,7 +12,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: actions/labeler@v2
+      - uses: actions/labeler@v4
         with:
           repo-token: ${{ env.bot_token }}
           configuration-path: .github/workflows/config/pr-label-file-paths.yml

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

@@ -1,10 +1,12 @@
+# 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@v2
+      - uses: actions/checkout@v3
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}

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

@@ -1,9 +1,16 @@
+# 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,3 +1,5 @@
+# Automatically label a PR depending on the PR's status
+
 name: 🏷️　Label(Status)
 on:
   pull_request_target:
@@ -17,4 +19,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,5 +1,6 @@
-# Github action for automatically adding label or setting assignee when a new
-# Issue or PR is opened. https://github.com/marketplace/actions/issue-labeler
+# 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
 
 name: 🏷️　Label(Title and Body)
 on:
@@ -16,7 +17,7 @@ jobs:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}
           env_name: bot_token
-      - uses: Naturalclar/issue-action@v2.0.1
+      - uses: Naturalclar/issue-action@v2.0.2
         with:
           title-or-body: title
           github-token: ${{ env.bot_token }}

.github/workflows/preview.yml

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

.github/workflows/rebase.yml

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

.github/workflows/release.yml

@@ -1,4 +1,8 @@
-# @see: https://dev.to/antongolub/the-chronicles-of-semantic-release-and-monorepos-5cfc
+# 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
 
 name: 🚀　Release
 on:
@@ -17,16 +21,16 @@ jobs:
         node-version: [16.x]
     steps:
       - name: ⤵️　Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: 🎉　Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         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@v2
+        uses: actions/cache@v3
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
@@ -60,7 +64,7 @@ jobs:
 
       - name: 🔀　Repository Dispatch
         if: github.ref == 'refs/heads/master'
-        uses: peter-evans/repository-dispatch@v1
+        uses: peter-evans/repository-dispatch@v2
         with:
           token: ${{ env.bot_token }}
           event-type: released

.github/workflows/slash-commands.yml

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

.github/workflows/stale.yml

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

.github/workflows/sync-labels.yml

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

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

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

.github/workflows/update-cache.yaml

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

.github/workflows/update-contributors.yml

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

.github/workflows/update-license.yml

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

.github/workflows/welcome.yml

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

.gitignore

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

AUTHORS

@@ -1,4 +1,5 @@
 BARM <284942955@qq.com>
+Candy <563378816@qq.com>
 Chaoqi <HAN>
 Clifford <ajard>
 DaiGang <42136433+daigang666@users.noreply.github.com>
@@ -6,11 +7,19 @@ 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>
@@ -18,18 +27,25 @@ 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>
@@ -37,18 +53,25 @@ 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>
@@ -58,6 +81,7 @@ 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/release-workflow/maintenance-releases.md)
-- [Publishing pre-releases](https://github.com/semantic-release/semantic-release/blob/master/docs/recipes/release-workflow/pre-releases.md)
+- [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)
 
 ### 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:
 
 ## 发布管理
 
-- [发布维护版本](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)
+- [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)
 
 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,9 +2,10 @@
 
 <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>
@@ -22,22 +23,15 @@
 
 ## Features
 
-- 🌱　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 |
+- 🌱　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
 
 ## Installation
 
+### NPM/Yarn
+
 ```shell
 # npm
 $ npm install @antv/x6 --save
@@ -46,20 +40,51 @@ $ 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>
 ```
 
-```ts
-import { Graph } from '@antv/x6'
+**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,
@@ -68,6 +93,7 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
+// Render target node.
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -76,23 +102,92 @@ const target = graph.addNode({
   label: 'World',
 })
 
+// Render edge from source to target.
 graph.addEdge({
   source,
   target,
 })
 ```
 
-## Links
+<img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*o4W3RLZicagAAAAAAAAAAAAAARQnAQ" alt="HelloWorld" />
 
-- [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)
+## 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>
 
 ## 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
@@ -100,19 +195,37 @@ $ npm install lerna -g
 
 # install deps and build
 $ yarn bootstrap
+```
 
-# enter the specified project development and debugging
-cd packages/x6
-yarn build:watch
+Then we can `cd` to dirs to development and debugging.
 
-# start example to see the effect
+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
+cd packages/x6
+
+// build esm to "em" dir
+yarn build:watch:esm
+
+// build commonjs to "lib" dir
+yarn build:watch:cjs
+```
+
 ## Contributing
 
-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.
+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
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

README.md

@@ -1,9 +1,10 @@
 简体中文 | [English](/README.en-us.md)
 
-<p align="center"><img alt="flow" src="/flow.svg"></p>
+<p align="center"><img 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>
@@ -20,24 +21,18 @@
 <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/Angular 定制节点样式和交互
+- 🌱　极易定制：支持使用 SVG/HTML/React/Vue 定制节点样式和交互
 - 🚀　开箱即用：内置 10+ 图编辑配套扩展，如框选、对齐线、小地图等
 - 🧲　数据驱动：基于 MVC 架构，用户更加专注于数据逻辑和业务逻辑
 - 💯　事件驱动：完备的事件系统，可以监听图表内发生的任何事件
 
-## 兼容环境
-
-- 现代浏览器和 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 |
-
 ## 安装
 
+### 使用 NPM/Yarn
+
 ```shell
 # npm
 $ npm install @antv/x6 --save
@@ -46,20 +41,51 @@ $ 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>
 ```
 
-```ts
-import { Graph } from '@antv/x6'
+**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,
@@ -68,6 +94,7 @@ const source = graph.addNode({
   label: 'Hello',
 })
 
+// 渲染目标节点
 const target = graph.addNode({
   x: 420,
   y: 180,
@@ -76,22 +103,95 @@ const target = graph.addNode({
   label: 'World',
 })
 
+// 渲染边
 graph.addEdge({
   source,
   target,
 })
 ```
 
-## 链接
+渲染结果如下。
 
-- [文档](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)
+<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/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 工具
@@ -100,19 +200,35 @@ $ npm install lerna -g
 
 # 安装项目依赖和初始化构建
 $ yarn bootstrap
+```
 
-# 进入到指定项目开发和调试
-cd packages/x6
-yarn build:watch
+然后可以进入到指定项目开发和调试。
 
-# 启动 example 查看效果
+如本地启动 `examples/x6-example-features` 示例：
+
+```shell
 cd examples/x6-example-features
+
 yarn start
 ```
 
-## 参与共建
+修复 X6 的 BUG 时可以开启 watch 模式，配合上面启动的本地 DEMO，实时查看修复效果：
 
-如果希望参与到 X6 的开发中，请遵从我们的[贡献指南](/CONTRIBUTING.zh-CN.md)。如果你贡献度足够活跃，你可以申请成为社区协作者。
+```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 头像到下面贡献者清单中。
 
 <a href="https://github.com/antvis/x6/graphs/contributors">
   <img src="/CONTRIBUTORS.svg" alt="Contributors" width="740" />

SECURITY.md

@@ -1,21 +0,0 @@
-# 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,3 +1,11 @@
+## @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"
+    "antd": ">=4.4.2 || >=5.0.0-beta.0"
   },
   "devDependencies": {
     "antd": "^4.4.2"

configs/package-json/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-package-json",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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.12.3",
+    "workspace-tools": "^0.18.4",
     "yargs-parser": "^20.2.7"
   }
 }

examples/x6-app-dag/CHANGELOG.md

@@ -1,3 +1,119 @@
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-06-07)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-06-06)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-06-05)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-05-31)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.3
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-05-17)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.2
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-05-16)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.1
+
+## @antv/x6-app-dag [1.1.8](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.7...@antv/x6-app-dag@1.1.8) (2022-05-14)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.0
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-05-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.5
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-05-01)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-26)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-21)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.4
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-13)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.3
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-09)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.2
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-05)
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-04-05)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.1
+
+## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-03-23)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.0
+
 ## @antv/x6-app-dag [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-dag@1.1.6...@antv/x6-app-dag@1.1.7) (2022-03-10)
 
 

examples/x6-app-dag/package.json

@@ -7,6 +7,7 @@
     "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"
   },
@@ -23,7 +24,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.32.3",
     "@antv/x6-react-components": "^1.1.16",
     "@antv/x6-react-shape": "^1.6.0",
     "@types/dompurify": "^2.0.4",

examples/x6-app-dag/typings.d.ts

@@ -1,10 +1,10 @@
-declare module '*.css'
-declare module '*.less'
-declare module '*.png'
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
 declare module '*.svg' {
   export function ReactComponent(
     props: React.SVGProps<SVGSVGElement>,
-  ): React.ReactElement
-  const url: string
-  export default url
+  ): React.ReactElement;
+  const url: string;
+  export default url;
 }

examples/x6-app-draw/CHANGELOG.md

@@ -1,3 +1,119 @@
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-06-07)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-06-06)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-06-05)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-05-31)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.3
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-05-17)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.2
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-05-16)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.1
+
+## @antv/x6-app-draw [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.6...@antv/x6-app-draw@1.1.7) (2022-05-14)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.0
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-05-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.5
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-05-01)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-26)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-21)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.4
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-13)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.3
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-09)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.2
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-05)
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-04-05)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.1
+
+## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-03-23)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.0
+
 ## @antv/x6-app-draw [1.1.6](https://github.com/antvis/x6/compare/@antv/x6-app-draw@1.1.5...@antv/x6-app-draw@1.1.6) (2022-03-10)
 
 

examples/x6-app-draw/package.json

@@ -9,7 +9,7 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.32.3",
     "@antv/x6-react-components": "^1.1.16",
     "antd": "^4.4.2",
     "react": "^16.8.6",

examples/x6-app-draw/tsconfig.json

@@ -10,7 +10,9 @@
     "baseUrl": "./",
     "strict": true,
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
     "allowSyntheticDefaultImports": true
   }

examples/x6-app-er/CHANGELOG.md

@@ -1,3 +1,119 @@
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-06-07)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-06-06)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-06-05)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-05-31)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.3
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-05-17)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.2
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-05-16)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.1
+
+## @antv/x6-app-er [1.1.8](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.7...@antv/x6-app-er@1.1.8) (2022-05-14)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.0
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-05-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.5
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-05-01)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-26)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-21)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.4
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-13)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.3
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-09)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-09)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.2
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-05)
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-04-05)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.1
+
+## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-03-23)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.0
+
 ## @antv/x6-app-er [1.1.7](https://github.com/antvis/x6/compare/@antv/x6-app-er@1.1.6...@antv/x6-app-er@1.1.7) (2022-03-10)
 
 

examples/x6-app-er/package.json

@@ -7,6 +7,7 @@
     "build": "umi build",
     "postinstall": "umi generate tmp",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
     "test:coverage": "umi-test --coverage"
   },
   "gitHooks": {
@@ -21,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.32.3",
     "@antv/x6-react-components": "^1.1.16",
     "@antv/x6-react-shape": "^1.6.0",
     "antd": "^4.4.2",

examples/x6-example-features/CHANGELOG.md

@@ -1,3 +1,318 @@
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-06-07)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-06-06)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-06-05)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-05-31)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.3
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-05-17)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.2
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-05-16)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.1
+* **@antv/x6-vector:** upgraded to 1.4.0
+
+## @antv/x6-example-features [1.2.3](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.2...@antv/x6-example-features@1.2.3) (2022-05-14)
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.32.0
+* **@antv/x6-vector:** upgraded to 1.4.0
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.5
+* **@antv/x6-vector:** upgraded to 1.3.2
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-05-01)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-26)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-21)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.4
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-13)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-09)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.3
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-09)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-09)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.2
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-05)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6-vector:** upgraded to 1.3.1
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-04-05)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.1
+* **@antv/x6-vector:** upgraded to 1.3.1
+
+## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-03-23)
+
+
+### Bug Fixes
+
+* 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/x6/issues/1391)) ([cc01fdf](https://github.com/antvis/x6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
+* 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/x6/issues/1425)) ([4208846](https://github.com/antvis/x6/commit/4208846337326d8983f1662faa8da67efd8568b4))
+
+
+### Performance Improvements
+
+* ⚡️ add simple config to remove rect and text element ([#1449](https://github.com/antvis/x6/issues/1449)) ([0b5f241](https://github.com/antvis/x6/commit/0b5f2413f0b907316784149027615ae2d09616a4))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.0
+
 ## @antv/x6-example-features [1.2.2](https://github.com/antvis/x6/compare/@antv/x6-example-features@1.2.1...@antv/x6-example-features@1.2.2) (2022-03-10)
 
 

examples/x6-example-features/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "2.0.2-beta.0",
+  "version": "1.2.2",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -9,24 +9,23 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^1.30.2",
-    "@antv/x6-next": "^2.0.6-beta.0",
-    "@antv/x6-react-components": "^2.0.6-beta.0",
-    "@antv/x6-react-shape": "^2.0.6-beta.0",
-    "@antv/x6-vector": "^1.3.0",
+    "@antv/x6": "^1.34.0",
+    "@antv/x6-react-components": "^1.1.16",
+    "@antv/x6-react-shape": "^1.6.0",
+    "@antv/x6-vector": "^1.4.0",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
     "elkjs": "^0.7.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.8.6",
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
     "@types/jest": "^25.2.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.0.11",
     "@types/react-helmet": "^6.0.0",
     "@types/react-test-renderer": "^16.0.3",
     "eslint": "^7.16.0",

examples/x6-example-features/src/pages/animation/1.tsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Graph, Cell } from '@antv/x6-next'
-import { Point } from '@antv/x6-geometry'
-import { Timing, Interp } from '@antv/x6-common'
+import { Graph, Cell, Point, Timing, Interp } from '@antv/x6'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -13,9 +11,6 @@ export default class Example extends React.Component {
       width: 650,
       height: 400,
       grid: 1,
-      background: {
-        color: '#F2F7FA',
-      },
     })
 
     const ball = graph.addNode({
@@ -28,12 +23,9 @@ export default class Example extends React.Component {
         label: {
           text: 'ball',
           fontSize: 20,
-          stroke: '#8f8f8f',
         },
         body: {
           fill: '#FFFFFF',
-          stroke: '#8f8f8f',
-          strokeWidth: 1,
         },
       },
     })
@@ -67,6 +59,7 @@ export default class Example extends React.Component {
       {
         delay: 5000,
         duration: 2000,
+        easing: 'easeInBounce',
         interp: (
           start: { text: String; fontSize: number },
           end: { text: String; fontSize: number },
@@ -91,12 +84,9 @@ export default class Example extends React.Component {
         label: {
           text: 'u.f.o.',
           fontSize: 10,
-          stroke: '8f8f8f',
         },
         body: {
           fill: '#FFFFFF',
-          stroke: '#8f8f8f',
-          strokeWidth: 1,
         },
       },
     })

examples/x6-example-features/src/pages/animation/2.tsx

@@ -5,11 +5,12 @@ import '../index.less'
 class BallView extends NodeView {
   protected speed: number = 0
   protected angle: number = 0
+  protected timerId: number = 0
   protected edge: Edge | null
 
   protected init() {
-    this.cell.transition('attrs/label/opacity', 1, {
-      delay: 0,
+    this.timerId = this.cell.transition('attrs/label/opacity', 1, {
+      delay: (1 + Math.random()) * 3000,
       duration: 3000,
       timing: 'inout',
       interp: function (a: number, b: number) {
@@ -27,7 +28,7 @@ class BallView extends NodeView {
     })
 
     this.cell.on('change:position', ({ cell, current }) => {
-      const node = cell as any as Node
+      const node = (cell as any) as Node
       this.angle = Point.create(node.getPosition()).theta(
         node.previous('position'),
       )
@@ -96,13 +97,17 @@ class BallView extends NodeView {
   }
 
   onMouseDown(e: JQuery.MouseDownEvent, x: number, y: number) {
-    console.log('mousedown1')
     // Do not allow drag element while it's still in a transition.
     if (this.cell.getTransitions().indexOf('position') > -1) {
-      console.log('mousedown2')
       return
     }
 
+    // Cancel displaying 'drag me!' if dragging already starts.
+    if (this.timerId) {
+      clearTimeout(this.timerId)
+      delete this.timerId
+    }
+
     this.edge = this.graph.addEdge({
       shape: 'edge',
       source: this.cell.getBBox().getCenter(),
@@ -123,7 +128,7 @@ class BallView extends NodeView {
 
     // Change the marker arrow color.
     this.edge.on('change:target', ({ cell }) => {
-      const edge = cell as any as Edge
+      const edge = (cell as any) as Edge
       const sourcePoint = edge.getSourcePoint()!
       const targetPoint = edge.getTargetPoint()!
       const dist = sourcePoint.distance(targetPoint)

examples/x6-example-features/src/pages/animation/3.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { Graph, EdgeView, NodeView } from '@antv/x6'
+import { animateAlongEdge, animateAlongNode, clearAnimation } from './animation'
+import '../index.less'
+
+export default class Example extends React.Component {
+  private container: HTMLDivElement
+  private animate = false
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    const source = graph.addNode({
+      id: 'source',
+      shape: 'rect',
+      x: 80,
+      y: 250,
+      width: 160,
+      height: 60,
+    })
+
+    const target = graph.addNode({
+      id: 'target',
+      shape: 'rect',
+      x: 520,
+      y: 250,
+      width: 160,
+      height: 60,
+    })
+
+    graph.addEdge({
+      id: 'edge',
+      source,
+      target,
+    })
+
+    document.addEventListener('click', () => {
+      if (this.animate) {
+        this.animate = false
+        clearAnimation()
+      } else {
+        this.animate = true
+        this.play(graph)
+      }
+    })
+  }
+
+  play(graph: Graph) {
+    const sourceNodeView = graph.findViewByCell(
+      graph.getCellById('source'),
+    ) as NodeView
+    const targetNodeView = graph.findViewByCell(
+      graph.getCellById('target'),
+    ) as NodeView
+    const edgeView = graph.findViewByCell(graph.getCellById('edge')) as EdgeView
+
+    animateAlongNode(sourceNodeView, 'M 0 30 L 0 0 L 160 0 L 160 30')
+    animateAlongNode(sourceNodeView, 'M 0 30 L 0 60 L 160 60 L 160 30', () => {
+      animateAlongEdge(edgeView, () => {
+        animateAlongNode(targetNodeView, 'M 0 0 L 160 0 L 160 60 L 0 60')
+      })
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/animation/animation.ts

@@ -0,0 +1,94 @@
+import { Vector, EdgeView, NodeView, Dom } from '@antv/x6'
+
+const animateToken: SVGElement[] = []
+
+export const removeAnimationElem = (elem: SVGElement) => {
+  const index = animateToken.findIndex((token) => token === elem)
+  if (index) {
+    animateToken.splice(index, 1)
+  }
+  Dom.remove(elem)
+}
+
+export const animateAlongEdge = (
+  edgeView: EdgeView,
+  compelete?: () => void,
+) => {
+  const token = Vector.create('circle', { r: 4, fill: 'red' })
+  const path = edgeView.container.querySelector('path')
+  const animate = Dom.createSvgElement<SVGAnimateMotionElement>('animateMotion')
+  const mpath = Dom.createSvgElement('mpath')
+
+  const attrs = {
+    dur: '1000ms',
+    repeatCount: '1',
+    calcMode: 'linear',
+    fill: 'freeze',
+  }
+
+  const id = Dom.ensureId(path!)
+  animate.appendChild(mpath)
+  token.node.appendChild(animate)
+  token.appendTo(edgeView.container)
+  Dom.attr(mpath, { 'xlink:href': `#${id}` })
+  Dom.attr(animate, attrs)
+
+  animateToken.push(token.node)
+  animate.addEventListener('endEvent', () => {
+    removeAnimationElem(token.node)
+    if (compelete) {
+      compelete()
+    }
+  })
+
+  const ani = animate as any
+
+  setTimeout(() => {
+    ani.beginElement()
+  })
+}
+
+export const animateAlongNode = (
+  nodeView: NodeView,
+  path: string,
+  compelete?: () => void,
+) => {
+  const token = Vector.create('circle', { r: 4, fill: 'red' })
+  const animate = Dom.createSvgElement<SVGAnimateMotionElement>('animateMotion')
+
+  const attrs = {
+    dur: '2000ms',
+    repeatCount: '1',
+    calcMode: 'linear',
+    fill: 'freeze',
+  }
+
+  Dom.attr(animate, {
+    ...attrs,
+    path,
+  })
+
+  token.append(animate)
+  nodeView.container.appendChild(token.node)
+  animateToken.push(token.node)
+
+  animate.addEventListener('endEvent', () => {
+    removeAnimationElem(token.node)
+    if (compelete) {
+      compelete()
+    }
+  })
+
+  const ani = animate as any
+
+  setTimeout(() => {
+    ani.beginElement()
+  })
+}
+
+export const clearAnimation = () => {
+  const animations = [...animateToken]
+  animations.forEach((item) => {
+    removeAnimationElem(item)
+  })
+}

examples/x6-example-features/src/pages/bus/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, Cell } from '@antv/x6-next'
+import { Graph, Cell } from '@antv/x6'
 import { Bus, Connector, Component, Fader, Aux } from './shapes'
 import '../index.less'
 import './index.less'
@@ -12,6 +12,9 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 800,
+      async: true,
+      frozen: true,
+      sorting: 'approx',
       translating: {
         restrict: true,
       },
@@ -203,6 +206,8 @@ export default class Example extends React.Component {
       connector24,
       connector25,
     ] as any)
+
+    graph.unfreeze()
   }
 
   refContainer = (container: HTMLDivElement) => {

examples/x6-example-features/src/pages/bus/shapes.ts

@@ -1,4 +1,4 @@
-import { Node, Shape } from '@antv/x6-next'
+import { Node, Shape } from '@antv/x6'
 
 export class Bus extends Shape.Edge {
   static create(x: number, label: string, color: string) {

examples/x6-example-features/src/pages/case/dag.tsx

@@ -1,453 +1,454 @@
-// import React from 'react'
-// import { Graph, Node, Path, Cell } from '@antv/x6'
-// import '@antv/x6-react-shape'
-// import '../index.less'
-// import './index.less'
-// interface NodeStatus {
-//   id: string
-//   status: 'default' | 'success' | 'failed' | 'running'
-//   label?: string
-// }
+import React from 'react'
+import { Graph, Node, Path, Cell } from '@antv/x6'
+import '@antv/x6-react-shape'
+import '../index.less'
+import './index.less'
+interface NodeStatus {
+  id: string
+  status: 'default' | 'success' | 'failed' | 'running'
+  label?: string
+}
 
-// const image = {
-//   logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
-//   success:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
-//   failed:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
-//   running:
-//     'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
-// }
-// export class AlgoNode extends React.Component<{ node?: Node }> {
-//   shouldComponentUpdate() {
-//     const { node } = this.props
-//     if (node) {
-//       if (node.hasChanged('data')) {
-//         return true
-//       }
-//     }
-//     return false
-//   }
+const image = {
+  logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
+  success:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
+  failed:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
+  running:
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
+}
+export class AlgoNode extends React.Component<{ node?: Node }> {
+  shouldComponentUpdate() {
+    const { node } = this.props
+    if (node) {
+      if (node.hasChanged('data')) {
+        return true
+      }
+    }
+    return false
+  }
 
-//   render() {
-//     const { node } = this.props
-//     const data = node?.getData() as NodeStatus
-//     const { label, status = 'default' } = data
+  render() {
+    const { node } = this.props
+    const data = node?.getData() as NodeStatus
+    const { label, status = 'default' } = data
 
-//     return (
-//       <div className={`node ${status}`}>
-//         <img src={image.logo} alt="logo" />
-//         <span className="label">{label}</span>
-//         <span className="status">
-//           {status === 'success' && <img src={image.success} alt="success" />}
-//           {status === 'failed' && <img src={image.failed} alt="failed" />}
-//           {status === 'running' && <img src={image.running} alt="running" />}
-//         </span>
-//       </div>
-//     )
-//   }
-// }
+    return (
+      <div className={`node ${status}`}>
+        <img src={image.logo} />
+        <span className="label">{label}</span>
+        <span className="status">
+          {status === 'success' && <img src={image.success} />}
+          {status === 'failed' && <img src={image.failed} />}
+          {status === 'running' && <img src={image.running} />}
+        </span>
+      </div>
+    )
+  }
+}
 
-// Graph.registerNode(
-//   'dag-node',
-//   {
-//     inherit: 'react-shape',
-//     width: 180,
-//     height: 36,
-//     component: <AlgoNode />,
-//     ports: {
-//       groups: {
-//         top: {
-//           position: 'top',
-//           attrs: {
-//             circle: {
-//               r: 4,
-//               magnet: true,
-//               stroke: '#C2C8D5',
-//               strokeWidth: 1,
-//               fill: '#fff',
-//             },
-//           },
-//         },
-//         bottom: {
-//           position: 'bottom',
-//           attrs: {
-//             circle: {
-//               r: 4,
-//               magnet: true,
-//               stroke: '#C2C8D5',
-//               strokeWidth: 1,
-//               fill: '#fff',
-//             },
-//           },
-//         },
-//       },
-//     },
-//   },
-//   true,
-// )
+Graph.registerNode(
+  'dag-node',
+  {
+    inherit: 'react-shape',
+    width: 180,
+    height: 36,
+    component: <AlgoNode />,
+    ports: {
+      groups: {
+        top: {
+          position: 'top',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#C2C8D5',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+        bottom: {
+          position: 'bottom',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#C2C8D5',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+    },
+  },
+  true,
+)
 
-// Graph.registerEdge(
-//   'dag-edge',
-//   {
-//     inherit: 'edge',
-//     attrs: {
-//       line: {
-//         stroke: '#C2C8D5',
-//         strokeWidth: 1,
-//         targetMarker: null,
-//       },
-//     },
-//   },
-//   true,
-// )
+Graph.registerEdge(
+  'dag-edge',
+  {
+    inherit: 'edge',
+    attrs: {
+      line: {
+        stroke: '#C2C8D5',
+        strokeWidth: 1,
+        targetMarker: null,
+      },
+    },
+  },
+  true,
+)
 
-// Graph.registerConnector(
-//   'algo-connector',
-//   (s, e) => {
-//     const offset = 4
-//     const deltaY = Math.abs(e.y - s.y)
-//     const control = Math.floor((deltaY / 3) * 2)
+Graph.registerConnector(
+  'algo-connector',
+  (s, e) => {
+    const offset = 4
+    const deltaY = Math.abs(e.y - s.y)
+    const control = Math.floor((deltaY / 3) * 2)
 
-//     const v1 = { x: s.x, y: s.y + offset + control }
-//     const v2 = { x: e.x, y: e.y - offset - control }
+    const v1 = { x: s.x, y: s.y + offset + control }
+    const v2 = { x: e.x, y: e.y - offset - control }
 
-//     return Path.normalize(
-//       `M ${s.x} ${s.y}
-//        L ${s.x} ${s.y + offset}
-//        C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
-//        L ${e.x} ${e.y}
-//       `,
-//     )
-//   },
-//   true,
-// )
+    return Path.normalize(
+      `M ${s.x} ${s.y}
+       L ${s.x} ${s.y + offset}
+       C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
+       L ${e.x} ${e.y}
+      `,
+    )
+  },
+  true,
+)
 
-// const data = [
-//   {
-//     id: '1',
-//     shape: 'dag-node',
-//     x: 290,
-//     y: 110,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '1-1',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '2',
-//     shape: 'dag-node',
-//     x: 290,
-//     y: 225,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '2-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '2-2',
-//         group: 'bottom',
-//       },
-//       {
-//         id: '2-3',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '3',
-//     shape: 'dag-node',
-//     x: 170,
-//     y: 350,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '3-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '3-2',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '4',
-//     shape: 'dag-node',
-//     x: 450,
-//     y: 350,
-//     data: {
-//       label: '读数据',
-//       status: 'success',
-//     },
-//     ports: [
-//       {
-//         id: '4-1',
-//         group: 'top',
-//       },
-//       {
-//         id: '4-2',
-//         group: 'bottom',
-//       },
-//     ],
-//   },
-//   {
-//     id: '5',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '1',
-//       port: '1-1',
-//     },
-//     target: {
-//       cell: '2',
-//       port: '2-1',
-//     },
-//     zIndex: 0,
-//   },
-//   {
-//     id: '6',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '2',
-//       port: '2-2',
-//     },
-//     target: {
-//       cell: '3',
-//       port: '3-1',
-//     },
-//     zIndex: 0,
-//   },
-//   {
-//     id: '7',
-//     shape: 'dag-edge',
-//     source: {
-//       cell: '2',
-//       port: '2-3',
-//     },
-//     target: {
-//       cell: '4',
-//       port: '4-1',
-//     },
-//     zIndex: 0,
-//   },
-// ]
+const data = [
+  {
+    id: '1',
+    shape: 'dag-node',
+    x: 290,
+    y: 110,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '1-1',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '2',
+    shape: 'dag-node',
+    x: 290,
+    y: 225,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '2-1',
+        group: 'top',
+      },
+      {
+        id: '2-2',
+        group: 'bottom',
+      },
+      {
+        id: '2-3',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '3',
+    shape: 'dag-node',
+    x: 170,
+    y: 350,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '3-1',
+        group: 'top',
+      },
+      {
+        id: '3-2',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '4',
+    shape: 'dag-node',
+    x: 450,
+    y: 350,
+    data: {
+      label: '读数据',
+      status: 'success',
+    },
+    ports: [
+      {
+        id: '4-1',
+        group: 'top',
+      },
+      {
+        id: '4-2',
+        group: 'bottom',
+      },
+    ],
+  },
+  {
+    id: '5',
+    shape: 'dag-edge',
+    source: {
+      cell: '1',
+      port: '1-1',
+    },
+    target: {
+      cell: '2',
+      port: '2-1',
+    },
+    zIndex: 0,
+  },
+  {
+    id: '6',
+    shape: 'dag-edge',
+    source: {
+      cell: '2',
+      port: '2-2',
+    },
+    target: {
+      cell: '3',
+      port: '3-1',
+    },
+    zIndex: 0,
+  },
+  {
+    id: '7',
+    shape: 'dag-edge',
+    source: {
+      cell: '2',
+      port: '2-3',
+    },
+    target: {
+      cell: '4',
+      port: '4-1',
+    },
+    zIndex: 0,
+  },
+]
 
-// const nodeStatusList = [
-//   [
-//     {
-//       id: '1',
-//       status: 'running',
-//     },
-//     {
-//       id: '2',
-//       status: 'default',
-//     },
-//     {
-//       id: '3',
-//       status: 'default',
-//     },
-//     {
-//       id: '4',
-//       status: 'default',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'running',
-//     },
-//     {
-//       id: '3',
-//       status: 'default',
-//     },
-//     {
-//       id: '4',
-//       status: 'default',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'success',
-//     },
-//     {
-//       id: '3',
-//       status: 'running',
-//     },
-//     {
-//       id: '4',
-//       status: 'running',
-//     },
-//   ],
-//   [
-//     {
-//       id: '1',
-//       status: 'success',
-//     },
-//     {
-//       id: '2',
-//       status: 'success',
-//     },
-//     {
-//       id: '3',
-//       status: 'success',
-//     },
-//     {
-//       id: '4',
-//       status: 'failed',
-//     },
-//   ],
-// ]
-// export default class Example extends React.Component {
-//   private container: HTMLDivElement
+const nodeStatusList = [
+  [
+    {
+      id: '1',
+      status: 'running',
+    },
+    {
+      id: '2',
+      status: 'default',
+    },
+    {
+      id: '3',
+      status: 'default',
+    },
+    {
+      id: '4',
+      status: 'default',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'running',
+    },
+    {
+      id: '3',
+      status: 'default',
+    },
+    {
+      id: '4',
+      status: 'default',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'success',
+    },
+    {
+      id: '3',
+      status: 'running',
+    },
+    {
+      id: '4',
+      status: 'running',
+    },
+  ],
+  [
+    {
+      id: '1',
+      status: 'success',
+    },
+    {
+      id: '2',
+      status: 'success',
+    },
+    {
+      id: '3',
+      status: 'success',
+    },
+    {
+      id: '4',
+      status: 'failed',
+    },
+  ],
+]
+export default class Example extends React.Component {
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph: Graph = new Graph({
-//       container: this.container,
-//       width: 800,
-//       height: 600,
-//       panning: {
-//         enabled: true,
-//         eventTypes: ['leftMouseDown', 'mouseWheel'],
-//       },
-//       mousewheel: {
-//         enabled: true,
-//         modifiers: 'ctrl',
-//         factor: 1.1,
-//         maxScale: 1.5,
-//         minScale: 0.5,
-//       },
-//       highlighting: {
-//         magnetAdsorbed: {
-//           name: 'stroke',
-//           args: {
-//             attrs: {
-//               fill: '#fff',
-//               stroke: '#31d0c6',
-//               strokeWidth: 4,
-//             },
-//           },
-//         },
-//       },
-//       connecting: {
-//         snap: true,
-//         allowBlank: false,
-//         allowLoop: false,
-//         highlight: true,
-//         connector: 'algo-connector',
-//         connectionPoint: 'anchor',
-//         anchor: 'center',
-//         validateMagnet({ magnet }) {
-//           return magnet.getAttribute('port-group') !== 'top'
-//         },
-//         createEdge() {
-//           return graph.createEdge({
-//             shape: 'dag-edge',
-//             attrs: {
-//               line: {
-//                 strokeDasharray: '5 5',
-//               },
-//             },
-//             zIndex: -1,
-//           })
-//         },
-//       },
-//       selecting: {
-//         enabled: true,
-//         multiple: true,
-//         rubberEdge: true,
-//         rubberNode: true,
-//         modifiers: 'shift',
-//         rubberband: true,
-//       },
-//     })
+  componentDidMount() {
+    const graph: Graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      snapline: true,
+      panning: {
+        enabled: true,
+        eventTypes: ['leftMouseDown', 'mouseWheel'],
+      },
+      mousewheel: {
+        enabled: true,
+        modifiers: 'ctrl',
+        factor: 1.1,
+        maxScale: 1.5,
+        minScale: 0.5,
+      },
+      highlighting: {
+        magnetAdsorbed: {
+          name: 'stroke',
+          args: {
+            attrs: {
+              fill: '#fff',
+              stroke: '#31d0c6',
+              strokeWidth: 4,
+            },
+          },
+        },
+      },
+      connecting: {
+        snap: true,
+        allowBlank: false,
+        allowLoop: false,
+        highlight: true,
+        connector: 'algo-connector',
+        connectionPoint: 'anchor',
+        anchor: 'center',
+        validateMagnet({ magnet }) {
+          return magnet.getAttribute('port-group') !== 'top'
+        },
+        createEdge() {
+          return graph.createEdge({
+            shape: 'dag-edge',
+            attrs: {
+              line: {
+                strokeDasharray: '5 5',
+              },
+            },
+            zIndex: -1,
+          })
+        },
+      },
+      selecting: {
+        enabled: true,
+        multiple: true,
+        rubberEdge: true,
+        rubberNode: true,
+        modifiers: 'shift',
+        rubberband: true,
+      },
+    })
 
-//     graph.on('edge:connected', ({ edge }) => {
-//       edge.attr({
-//         line: {
-//           strokeDasharray: '',
-//         },
-//       })
-//     })
+    graph.on('edge:connected', ({ edge }) => {
+      edge.attr({
+        line: {
+          strokeDasharray: '',
+        },
+      })
+    })
 
-//     graph.on('node:change:data', ({ node }) => {
-//       const edges = graph.getIncomingEdges(node)
-//       const { status } = node.getData() as NodeStatus
-//       edges?.forEach((edge) => {
-//         if (status === 'running') {
-//           edge.attr('line/strokeDasharray', 5)
-//           edge.attr('line/style/animation', 'running-line 30s infinite linear')
-//         } else {
-//           edge.attr('line/strokeDasharray', '')
-//           edge.attr('line/style/animation', '')
-//         }
-//       })
-//     })
+    graph.on('node:change:data', ({ node }) => {
+      const edges = graph.getIncomingEdges(node)
+      const { status } = node.getData() as NodeStatus
+      edges?.forEach((edge) => {
+        if (status === 'running') {
+          edge.attr('line/strokeDasharray', 5)
+          edge.attr('line/style/animation', 'running-line 30s infinite linear')
+        } else {
+          edge.attr('line/strokeDasharray', '')
+          edge.attr('line/style/animation', '')
+        }
+      })
+    })
 
-//     // 初始化节点/边
-//     const init = (data: Cell.Metadata[]) => {
-//       const cells: Cell[] = []
-//       data.forEach((item) => {
-//         if (item.shape === 'dag-node') {
-//           cells.push(graph.createNode(item))
-//         } else {
-//           cells.push(graph.createEdge(item))
-//         }
-//       })
-//       graph.resetCells(cells)
-//     }
+    // 初始化节点/边
+    const init = (data: Cell.Metadata[]) => {
+      const cells: Cell[] = []
+      data.forEach((item) => {
+        if (item.shape === 'dag-node') {
+          cells.push(graph.createNode(item))
+        } else {
+          cells.push(graph.createEdge(item))
+        }
+      })
+      graph.resetCells(cells)
+    }
 
-//     // 显示节点状态
-//     const showNodeStatus = async (statusList: NodeStatus[][]) => {
-//       const status = statusList.shift()
-//       status?.forEach((item) => {
-//         const { id, status } = item
-//         const node = graph.getCellById(id)
-//         const data = node.getData() as NodeStatus
-//         node.setData({
-//           ...data,
-//           status: status,
-//         })
-//       })
-//       setTimeout(() => {
-//         showNodeStatus(statusList)
-//       }, 3000)
-//     }
+    // 显示节点状态
+    const showNodeStatus = async (statusList: NodeStatus[][]) => {
+      const status = statusList.shift()
+      status?.forEach((item) => {
+        const { id, status } = item
+        const node = graph.getCellById(id)
+        const data = node.getData() as NodeStatus
+        node.setData({
+          ...data,
+          status: status,
+        })
+      })
+      setTimeout(() => {
+        showNodeStatus(statusList)
+      }, 3000)
+    }
 
-//     init(data)
-//     showNodeStatus(nodeStatusList)
-//   }
+    init(data)
+    showNodeStatus(nodeStatusList)
+  }
 
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
 
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <div ref={this.refContainer} className="dag" />
-//       </div>
-//     )
-//   }
-// }
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/case/elk.tsx

@@ -155,7 +155,7 @@ export default class Example extends React.Component {
       const { bendPoints = [] } = edge.sections[0]
 
       if (pos) {
-        bendPoints.forEach((bendPoint: Position) => {
+        bendPoints.map((bendPoint: Position) => {
           bendPoint.x += pos.x
           bendPoint.y += pos.y
         })

examples/x6-example-features/src/pages/case/index.less

@@ -1,72 +1,70 @@
-.dag {
+.node {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #c2c8d5;
+  border-left: 4px solid #1890ff;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
+  img {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+  .label {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 104px;
+    margin-left: 8px;
+    color: #666;
+    font-size: 12px;
+  }
+  .status {
+    flex-shrink: 0;
+  }
+  &.success {
+    border-left: 4px solid #52c41a;
+  }
+  &.failed {
+    border-left: 4px solid #ff4d4f;
+  }
+  &.running .status img {
+    animation: spin 1s linear infinite;
+  }
+}
+
+.x6-node-selected {
   .node {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    border: 1px solid #c2c8d5;
-    border-left: 4px solid #1890ff;
-    border-radius: 4px;
-    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
-    img {
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      margin-left: 8px;
-    }
-    .label {
-      display: inline-block;
-      flex-shrink: 0;
-      width: 104px;
-      margin-left: 8px;
-      color: #666;
-      font-size: 12px;
-    }
-    .status {
-      flex-shrink: 0;
-    }
-    &.success {
-      border-left: 4px solid #52c41a;
-    }
-    &.failed {
-      border-left: 4px solid #ff4d4f;
-    }
-    &.running .status img {
-      animation: spin 1s linear infinite;
-    }
+    border-color: #1890ff;
+    border-radius: 2px;
+    box-shadow: 0 0 0 4px #d4e8fe;
   }
-
-  .x6-node-selected {
-    .node {
-      border-color: #1890ff;
-      border-radius: 2px;
-      box-shadow: 0 0 0 4px #d4e8fe;
-    }
-    .node.success {
-      border-color: #52c41a;
-      border-radius: 2px;
-      box-shadow: 0 0 0 4px #ccecc0;
-    }
-    .node.failed {
-      border-color: #ff4d4f;
-      border-radius: 2px;
-      box-shadow: 0 0 0 4px #fedcdc;
-    }
+  .node.success {
+    border-color: #52c41a;
+    border-radius: 2px;
+    box-shadow: 0 0 0 4px #ccecc0;
   }
-
-  .x6-edge:hover {
-    path:nth-child(2) {
-      stroke: #1890ff;
-      stroke-width: 1px;
-    }
+  .node.failed {
+    border-color: #ff4d4f;
+    border-radius: 2px;
+    box-shadow: 0 0 0 4px #fedcdc;
   }
+}
 
-  .x6-edge-selected {
-    path:nth-child(2) {
-      stroke: #1890ff;
-      stroke-width: 1.5px !important;
-    }
+.x6-edge:hover {
+  path:nth-child(2) {
+    stroke: #1890ff;
+    stroke-width: 1px;
+  }
+}
+
+.x6-edge-selected {
+  path:nth-child(2) {
+    stroke: #1890ff;
+    stroke-width: 1.5px !important;
   }
 }
 

examples/x6-example-features/src/pages/edge/custom-marker.tsx

@@ -189,7 +189,8 @@ export default class Example extends React.Component {
             stroke: '#31d0c6',
             fill: '#31d0c6',
             name: 'path',
-            d: 'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
+            d:
+              'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
             offsetX: 10,
           },
         },

examples/x6-example-features/src/pages/edge/native-marker.tsx

@@ -98,12 +98,14 @@ export default class Example extends React.Component {
           stroke: '#31d0c6',
           sourceMarker: {
             name: 'path',
-            d: 'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
+            d:
+              'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
           },
           targetMarker: {
             name: 'path',
             offsetX: 10,
-            d: 'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
+            d:
+              'M4.834,4.834L4.833,4.833c-5.889,5.892-5.89,15.443,0.001,21.334s15.44,5.888,21.33-0.002c5.891-5.891,5.893-15.44,0.002-21.33C20.275-1.056,10.725-1.056,4.834,4.834zM25.459,5.542c0.833,0.836,1.523,1.757,2.104,2.726l-4.08,4.08c-0.418-1.062-1.053-2.06-1.912-2.918c-0.859-0.859-1.857-1.494-2.92-1.913l4.08-4.08C23.7,4.018,24.622,4.709,25.459,5.542zM10.139,20.862c-2.958-2.968-2.959-7.758-0.001-10.725c2.966-2.957,7.756-2.957,10.725,0c2.954,2.965,2.955,7.757-0.001,10.724C17.896,23.819,13.104,23.817,10.139,20.862zM5.542,25.459c-0.833-0.837-1.524-1.759-2.105-2.728l4.081-4.081c0.418,1.063,1.055,2.06,1.914,2.919c0.858,0.859,1.855,1.494,2.917,1.913l-4.081,4.081C7.299,26.982,6.379,26.292,5.542,25.459zM8.268,3.435l4.082,4.082C11.288,7.935,10.29,8.571,9.43,9.43c-0.858,0.859-1.494,1.855-1.912,2.918L3.436,8.267c0.58-0.969,1.271-1.89,2.105-2.727C6.377,4.707,7.299,4.016,8.268,3.435zM22.732,27.563l-4.082-4.082c1.062-0.418,2.061-1.053,2.919-1.912c0.859-0.859,1.495-1.857,1.913-2.92l4.082,4.082c-0.58,0.969-1.271,1.891-2.105,2.728C24.623,26.292,23.701,26.983,22.732,27.563z',
           },
         },
       },

examples/x6-example-features/src/pages/edge/tooltip.tsx

@@ -1,174 +0,0 @@
-import React from 'react'
-import ReactDom from 'react-dom'
-import { Tooltip } from 'antd'
-import { Graph, Markup, ToolsView, EdgeView } from '@antv/x6'
-import '../index.less'
-
-class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipTool.Options> {
-  private delay = 100
-  private moveTimer: number
-  private enterTimer: number
-  private leaveTimer: number
-  private tooltipVisible: boolean
-
-  protected onRender() {
-    this.updatePosition()
-  }
-
-  private toggleTooltip(visible: boolean) {
-    ReactDom.unmountComponentAtNode(this.childNodes.foContent)
-
-    if (visible) {
-      ReactDom.render(
-        <Tooltip title={this.options.tooltip} visible={true}>
-          <div />
-        </Tooltip>,
-        this.childNodes.foContent,
-      )
-    }
-    this.tooltipVisible = visible
-  }
-
-  private updatePosition(e?: MouseEvent) {
-    const fo = this.childNodes.fo as SVGForeignObjectElement
-    if (e) {
-      const pos = this.graph.clientToLocal(e.clientX, e.clientY)
-      fo.setAttribute('x', `${pos.x}`)
-      fo.setAttribute('y', `${pos.y}`)
-    } else {
-      fo.setAttribute('x', `-10000`)
-      fo.setAttribute('y', `-10000`)
-    }
-  }
-
-  private onMouseEnter({ e }: EdgeView.EventArgs['edge:mouseenter']) {
-    this.updatePosition(e.originalEvent)
-    window.clearTimeout(this.leaveTimer)
-    this.enterTimer = window.setTimeout(
-      () => this.toggleTooltip(true),
-      this.delay,
-    )
-    if (this.options.follow !== false) {
-      document.addEventListener('mousemove', this.onMouseMove)
-    }
-  }
-
-  private onMouseLeave() {
-    this.updatePosition()
-    window.clearTimeout(this.enterTimer)
-    this.leaveTimer = window.setTimeout(
-      () => this.toggleTooltip(false),
-      this.delay,
-    )
-    if (this.options.follow !== false) {
-      document.removeEventListener('mousemove', this.onMouseMove)
-    }
-  }
-
-  private onMouseMove = (e: MouseEvent) => {
-    window.clearTimeout(this.moveTimer)
-    window.clearTimeout(this.enterTimer)
-    this.updatePosition(e)
-    this.moveTimer = window.setTimeout(() => {
-      if (this.tooltipVisible) {
-        this.toggleTooltip(false)
-      }
-      this.toggleTooltip(true)
-    }, this.delay)
-  }
-
-  delegateEvents() {
-    this.cellView.on('edge:mouseenter', this.onMouseEnter, this)
-    this.cellView.on('edge:mouseleave', this.onMouseLeave, this)
-    return super.delegateEvents()
-  }
-
-  protected onRemove() {
-    this.cellView.off('edge:mouseenter', this.onMouseEnter, this)
-    this.cellView.off('edge:mouseleave', this.onMouseLeave, this)
-  }
-}
-
-// eslint-disable-next-line
-namespace TooltipTool {
-  TooltipTool.config({
-    markup: Markup.getForeignObjectMarkup(),
-  })
-
-  export interface Options extends ToolsView.ToolItem.Options {
-    follow?: boolean
-    tooltip?: string
-  }
-}
-
-Graph.registerEdgeTool('tooltip', TooltipTool, true)
-
-export default class Example extends React.Component {
-  private container: HTMLDivElement
-
-  componentDidMount() {
-    const graph = new Graph({
-      container: this.container,
-      width: 800,
-      height: 400,
-      grid: true,
-    })
-
-    graph.addEdge({
-      source: { x: 40, y: 40 },
-      target: { x: 380, y: 40 },
-      vertices: [
-        { x: 40, y: 80 },
-        { x: 200, y: 80 },
-        { x: 200, y: 40 },
-      ],
-      attrs: {
-        line: {
-          stroke: '#3c4260',
-          strokeWidth: 2,
-          targetMarker: 'classic',
-        },
-      },
-      tools: [
-        {
-          name: 'tooltip',
-          args: { follow: false, tooltip: 'tooltip test 1' },
-        },
-      ],
-    })
-
-    graph.addEdge({
-      source: { x: 40, y: 160 },
-      target: { x: 380, y: 160 },
-      vertices: [
-        { x: 40, y: 200 },
-        { x: 200, y: 200 },
-        { x: 200, y: 160 },
-      ],
-      attrs: {
-        line: {
-          stroke: '#3c4260',
-          strokeWidth: 2,
-          targetMarker: 'classic',
-        },
-      },
-      connector: 'smooth',
-      tools: {
-        name: 'tooltip',
-        args: { follow: true, tooltip: 'tooltip test 2' },
-      },
-    })
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
-}

examples/x6-example-features/src/pages/edge/validate-connection.tsx

@@ -14,9 +14,7 @@ export default class Example extends React.Component {
         validateMagnet({ cell, magnet }) {
           let count = 0
           const connectionCount = magnet.getAttribute('connection-count')
-          const max = connectionCount
-            ? parseInt(connectionCount, 10)
-            : Number.MAX_SAFE_INTEGER
+          const max = connectionCount ? parseInt(connectionCount, 10) : Number.MAX_SAFE_INTEGER
           const outgoingEdges = graph.getOutgoingEdges(cell)
           if (outgoingEdges) {
             outgoingEdges.forEach((edge: Edge) => {

examples/x6-example-features/src/pages/embed/nested2.tsx

@@ -94,7 +94,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 namespace Example {
   export interface Props {}
   export interface State {

examples/x6-example-features/src/pages/expand/index.tsx

@@ -163,7 +163,7 @@ export default class Example extends React.Component {
           if (!magnet) {
             return true
           }
-          var cell = cellView.cell as any as TogglableRect
+          var cell = (cellView.cell as any) as TogglableRect
           var portId = magnet.getAttribute('port')
           return portId ? !cell.isPortCollapsed(portId) : true
         },
@@ -180,7 +180,7 @@ export default class Example extends React.Component {
       e.stopPropagation()
       var portId = magnet.getAttribute('port')
       if (portId) {
-        const rect = view.cell as any as TogglableRect
+        const rect = (view.cell as any) as TogglableRect
         rect.expandPort(portId)
       }
     })
@@ -191,13 +191,13 @@ export default class Example extends React.Component {
         const visible = current !== false
         const sourceCell = cell.getSourceCell()
         if (sourceCell) {
-          const rect = sourceCell as any as TogglableRect
+          const rect = (sourceCell as any) as TogglableRect
           rect.onConnectedEdgeVisibleChange(cell, 'source', visible)
         }
 
         const targetCell = cell.getTargetCell()
         if (targetCell) {
-          const rect = targetCell as any as TogglableRect
+          const rect = (targetCell as any) as TogglableRect
           rect.onConnectedEdgeVisibleChange(cell, 'target', visible)
         }
       }

examples/x6-example-features/src/pages/expand/tree/index.tsx

@@ -87,7 +87,7 @@ export default class Example extends React.Component {
     return (
       <div className="x6-graph-wrap">
         <div ref={this.refContainer} className="x6-graph" />
-        <div id="minimap" />
+        <div id="minimap"/>
       </div>
     )
   }

examples/x6-example-features/src/pages/fta/shapes.ts

@@ -53,8 +53,10 @@ export class IntermediateEvent extends Event {
     })
   }
   gateTypes = {
-    or: 'M -20 0 C -20 -15 -10 -30 0 -30 C 10 -30 20 -15 20 0 C 10 -6 -10 -6 -20 0',
-    xor: 'M -20 0 C -20 -15 -10 -30 0 -30 C 10 -30 20 -15 20 0 C 10 -6 -10 -6 -20 0 M -20 0 0 -30 M 0 -30 20 0',
+    or:
+      'M -20 0 C -20 -15 -10 -30 0 -30 C 10 -30 20 -15 20 0 C 10 -6 -10 -6 -20 0',
+    xor:
+      'M -20 0 C -20 -15 -10 -30 0 -30 C 10 -30 20 -15 20 0 C 10 -6 -10 -6 -20 0 M -20 0 0 -30 M 0 -30 20 0',
     and: 'M -20 0 C -20 -25 -10 -30 0 -30 C 10 -30 20 -25 20 0 Z',
     priority_and:
       'M -20 0 C -20 -25 -10 -30 0 -30 C 10 -30 20 -25 20 0 Z M -20 0 0 -30 20 0',

examples/x6-example-features/src/pages/graph/attribute-card.tsx

@@ -154,7 +154,6 @@ export class AttributeCard extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace AttributeCard {
   export interface Props {
     attrs: {

examples/x6-example-features/src/pages/graph/background-card.tsx

@@ -212,7 +212,6 @@ export class BackgroundCard extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace BackgroundCard {
   export interface Props {
     onChange: (res: Graph.BackgroundOptions) => void

examples/x6-example-features/src/pages/graph/bbox-card.tsx

@@ -33,7 +33,6 @@ export class BBoxCard extends React.Component<GridCard.Props> {
   }
 }
 
-// eslint-disable-next-line
 export namespace GridCard {
   export interface Props {
     x: number

examples/x6-example-features/src/pages/graph/fit-card.tsx

@@ -105,7 +105,6 @@ export class FitToContentCard extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace FitToContentCard {
   export interface Props {
     onChange: (options: State) => void

examples/x6-example-features/src/pages/graph/grid-card.tsx

@@ -228,7 +228,6 @@ export class GridCard extends React.Component<GridCard.Props, GridCard.State> {
   }
 }
 
-// eslint-disable-next-line
 export namespace GridCard {
   export interface Props {
     onGridSizeChange: (size: number) => void

examples/x6-example-features/src/pages/graph/index.tsx

@@ -77,7 +77,7 @@ export default class Example extends React.Component<
           }),
         })
       })
-      .on('translate', ({ origin: { x, y } }) => {
+      .on('translate', ({origin: {x, y}}) => {
         this.effect.hideAll()
         this.setState({
           attrs: getAttrs({
@@ -195,7 +195,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 namespace Example {
   export interface Props {}
   export interface State {

examples/x6-example-features/src/pages/graph/scale-card.tsx

@@ -122,7 +122,6 @@ export class ScaleContentToFitCard extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace ScaleContentToFitCard {
   export interface Props {
     onChange: (options: State) => void

examples/x6-example-features/src/pages/graph/zoom.tsx

@@ -42,7 +42,7 @@ export default class Example extends React.Component {
             stroke: '#9254de',
           },
         },
-      },
+      }, 
       {
         id: '2',
         shape: 'rect',
@@ -57,7 +57,7 @@ export default class Example extends React.Component {
             stroke: '#9254de',
           },
         },
-      },
+      }, 
       {
         id: '3',
         shape: 'rect',
@@ -72,7 +72,7 @@ export default class Example extends React.Component {
             stroke: '#9254de',
           },
         },
-      },
+      }, 
       {
         id: '4',
         shape: 'rect',
@@ -87,7 +87,7 @@ export default class Example extends React.Component {
             stroke: '#9254de',
           },
         },
-      },
+      }, 
       {
         id: '5',
         shape: 'rect',
@@ -185,8 +185,8 @@ export default class Example extends React.Component {
   }
 
   onPositionPoint = () => {
-    this.graph1.positionPoint({ x: 50, y: 60 }, 100, 100)
-    this.graph2.positionPoint({ x: 50, y: 60 }, 100, 100)
+    this.graph1.positionPoint({x: 50, y: 60}, 100, 100)
+    this.graph2.positionPoint({x: 50, y: 60}, 100, 100)
   }
 
   onPositionRect = () => {
@@ -214,37 +214,23 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div>
+      <div> 
         <div className="x6-graph-wrap" style={{ display: 'flex' }}>
           <div ref={this.refContainer1} className="x6-graph" />
           <div ref={this.refContainer2} className="x6-graph" />
         </div>
-        <div
-          style={{
-            display: 'flex',
-            flexFlow: 'wrap',
-            flexShrink: 0,
-            padding: '24px 48px',
-          }}
-        >
+        <div style={{
+          display: 'flex',
+          flexFlow: 'wrap',
+          flexShrink: 0,
+          padding: '24px 48px',
+        }}>
           <Button onClick={() => this.onZoom(0.1)}>ZoomIn</Button>
           <Button onClick={() => this.onZoom(-0.1)}>ZoomOut</Button>
-          <Button
-            onClick={() => this.onZoom(0.1, { center: { x: 300, y: 200 } })}
-          >
-            ZoomIn At [300, 200]
-          </Button>
-          <Button
-            onClick={() => this.onZoom(-0.1, { center: { x: 300, y: 200 } })}
-          >
-            ZoomOut At [300, 200]
-          </Button>
+          <Button onClick={() => this.onZoom(0.1, { center: {x: 300, y: 200} })}>ZoomIn At [300, 200]</Button>
+          <Button onClick={() => this.onZoom(-0.1, { center: {x: 300, y: 200} })}>ZoomOut At [300, 200]</Button>
           <Button onClick={() => this.onZoomTo(1.5)}>ZoomTo</Button>
-          <Button
-            onClick={() => this.onZoomTo(1.5, { center: { x: 200, y: 100 } })}
-          >
-            ZoomTo At [200, 100]
-          </Button>
+          <Button onClick={() => this.onZoomTo(1.5, { center: {x: 200, y: 100} })}>ZoomTo At [200, 100]</Button>
           <Button onClick={() => this.onZoomToRect()}>ZoomToRect</Button>
           <Button onClick={() => this.onZoomToFit()}>ZoomToFit</Button>
           <Button onClick={() => this.onCenterPoint()}>CenterPoint</Button>
@@ -253,9 +239,7 @@ export default class Example extends React.Component {
           <Button onClick={() => this.onCenterCell()}>CenterCell</Button>
           <Button onClick={() => this.onPositionPoint()}>PositionPoint</Button>
           <Button onClick={() => this.onPositionRect()}>PositionRect</Button>
-          <Button onClick={() => this.onPositionContent()}>
-            PositionContent
-          </Button>
+          <Button onClick={() => this.onPositionContent()}>PositionContent</Button>
           <Button onClick={() => this.onPositionCell()}>PositionCell</Button>
         </div>
       </div>

examples/x6-example-features/src/pages/group/index.tsx

@@ -1,310 +1,310 @@
-// import React from 'react'
-// import { Graph, Node } from '@antv/x6'
-// import '@antv/x6-react-shape'
-// import data from './data.json'
-// import '../index.less'
-// import './index.less'
+import React from 'react'
+import { Graph, Node } from '@antv/x6'
+import '@antv/x6-react-shape'
+import data from './data.json'
+import '../index.less'
+import './index.less'
 
-// //#region react component
-// interface IProps {
-//   node?: Node
-// }
-// interface IState {
-//   collapsed: boolean
-// }
-// class GroupComponent extends React.Component<IProps, IState> {
-//   state = {
-//     collapsed: false,
-//   }
+//#region react component
+interface IProps {
+  node?: Node
+}
+interface IState {
+  collapsed: boolean
+}
+class GroupComponent extends React.Component<IProps, IState> {
+  state = {
+    collapsed: false,
+  }
 
-//   shouldComponentUpdate(nextProps: IProps, nextState: IState) {
-//     return nextState.collapsed !== this.state.collapsed
-//   }
+  shouldComponentUpdate(nextProps: IProps, nextState: IState) {
+    return nextState.collapsed !== this.state.collapsed
+  }
 
-//   onCollapse = () => {
-//     const node = this.props.node
-//     const target = !this.state.collapsed
+  onCollapse = () => {
+    const node = this.props.node
+    const target = !this.state.collapsed
 
-//     if (node) {
-//       const cells = node.getChildren()
-//       if (cells) {
-//         cells.forEach((cell: Node) => {
-//           if (target) {
-//             cell.hide()
-//           } else {
-//             cell.show()
-//           }
-//         })
-//       }
-//       if (target) {
-//         node.prop('previousSize', node.size())
-//         node.size(160, 32)
-//       } else {
-//         const previousSize = node.prop('previousSize')
-//         node.size(previousSize.width, previousSize.height)
-//       }
-//     }
+    if (node) {
+      const cells = node.getChildren()
+      if (cells) {
+        cells.forEach((cell: Node) => {
+          if (target) {
+            cell.hide()
+          } else {
+            cell.show()
+          }
+        })
+      }
+      if (target) {
+        node.prop('previousSize', node.size())
+        node.size(160, 32)
+      } else {
+        const previousSize = node.prop('previousSize')
+        node.size(previousSize.width, previousSize.height)
+      }
+    }
 
-//     this.setState({
-//       collapsed: target,
-//     })
-//   }
+    this.setState({
+      collapsed: target,
+    })
+  }
 
-//   render() {
-//     return (
-//       <div className="group">
-//         <div className="header">
-//           <span>
-//             <img
-//               src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*rYacTYE0PR0AAAAAAAAAAAAAARQnAQ"
-//               alt="group"
-//             />
-//             <span>Group</span>
-//           </span>
-//           <span className="btn" onClick={this.onCollapse}>
-//             {this.state.collapsed ? '+' : '-'}
-//           </span>
-//         </div>
-//       </div>
-//     )
-//   }
-// }
-// Graph.registerReactComponent('group', <GroupComponent />, true)
-// //#endregion
+  render() {
+    return (
+      <div className="group">
+        <div className="header">
+          <span>
+            <img
+              src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*rYacTYE0PR0AAAAAAAAAAAAAARQnAQ"
+              alt="group"
+            />
+            <span>Group</span>
+          </span>
+          <span className="btn" onClick={this.onCollapse}>
+            {this.state.collapsed ? '+' : '-'}
+          </span>
+        </div>
+      </div>
+    )
+  }
+}
+Graph.registerReactComponent('group', <GroupComponent />, true)
+//#endregion
 
-// export default class Example extends React.Component {
-//   private graph: Graph
-//   private container: HTMLDivElement
+export default class Example extends React.Component {
+  private graph: Graph
+  private container: HTMLDivElement
 
-//   componentDidMount() {
-//     const graph = new Graph({
-//       container: this.container,
-//       width: 800,
-//       height: 600,
-//       grid: true,
-//       connecting: {
-//         connector: 'smooth',
-//       },
-//     })
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+      connecting: {
+        connector: 'smooth',
+      },
+    })
 
-//     this.graph = graph
-//     this.initShape()
-//     this.initEvent()
-//   }
+    this.graph = graph
+    this.initShape()
+    this.initEvent()
+  }
 
-//   initShape = () => {
-//     const nodes = data.nodes
-//     const edges = data.edges
-//     const groups = data.groups
-//     const newEdges: typeof edges = []
+  initShape = () => {
+    const nodes = data.nodes
+    const edges = data.edges
+    const groups = data.groups
+    const newEdges: typeof edges = []
 
-//     const getNode = (nodeId: string) => {
-//       if (nodeId) {
-//         return nodes.find((node) => node.id === nodeId)
-//       }
-//       return null
-//     }
+    const getNode = (nodeId: string) => {
+      if (nodeId) {
+        return nodes.find((node) => node.id === nodeId)
+      }
+      return null
+    }
 
-//     const getGroup = (groupId: string | undefined) => {
-//       if (groupId) {
-//         return groups.find((group) => group.id === groupId)
-//       }
-//       return null
-//     }
+    const getGroup = (groupId: string | undefined) => {
+      if (groupId) {
+        return groups.find((group) => group.id === groupId)
+      }
+      return null
+    }
 
-//     // 将连接到群组内部节点的连线进行拆分
-//     // source  target    op
-//     //   √       X      source->群组->target
-//     //   X       √      source->群组->target
-//     //   √       √      source->群组1->群组2->target
-//     edges.forEach((edge) => {
-//       const sourceNodeId =
-//         typeof edge.source === 'string' ? edge.source : edge.source.cell
-//       const targetNodeId =
-//         typeof edge.target === 'string' ? edge.target : edge.target.cell
-//       const sourceNode = getNode(sourceNodeId)
-//       const targetNode = getNode(targetNodeId)
-//       const sourceGroup = getGroup(sourceNode?.group)
-//       const targetGroup = getGroup(targetNode?.group)
+    // 将连接到群组内部节点的连线进行拆分
+    // source  target    op
+    //   √       X      source->群组->target
+    //   X       √      source->群组->target
+    //   √       √      source->群组1->群组2->target
+    edges.forEach((edge) => {
+      const sourceNodeId =
+        typeof edge.source === 'string' ? edge.source : edge.source.cell
+      const targetNodeId =
+        typeof edge.target === 'string' ? edge.target : edge.target.cell
+      const sourceNode = getNode(sourceNodeId)
+      const targetNode = getNode(targetNodeId)
+      const sourceGroup = getGroup(sourceNode?.group)
+      const targetGroup = getGroup(targetNode?.group)
 
-//       if (sourceGroup !== targetGroup) {
-//         if (sourceGroup && targetGroup) {
-//           const sourceGroupPort = {
-//             cell: sourceGroup.id,
-//             port: sourceGroup.ports.items[0].id,
-//           }
-//           const targetGroupPort = {
-//             cell: targetGroup.id,
-//             port: targetGroup.ports.items[0].id,
-//           }
-//           newEdges.push(
-//             ...[
-//               {
-//                 ...edge,
-//                 source: edge.source,
-//                 target: sourceGroupPort,
-//                 id: `${edge.id}_1`,
-//                 for: edge.id,
-//               },
-//               {
-//                 ...edge,
-//                 source: targetGroupPort,
-//                 target: edge.target,
-//                 id: `${edge.id}_2`,
-//                 for: edge.id,
-//               },
-//             ],
-//           )
-//           edge.source = sourceGroupPort
-//           edge.target = targetGroupPort
+      if (sourceGroup !== targetGroup) {
+        if (sourceGroup && targetGroup) {
+          const sourceGroupPort = {
+            cell: sourceGroup.id,
+            port: sourceGroup.ports.items[0].id,
+          }
+          const targetGroupPort = {
+            cell: targetGroup.id,
+            port: targetGroup.ports.items[0].id,
+          }
+          newEdges.push(
+            ...[
+              {
+                ...edge,
+                source: edge.source,
+                target: sourceGroupPort,
+                id: `${edge.id}_1`,
+                for: edge.id,
+              },
+              {
+                ...edge,
+                source: targetGroupPort,
+                target: edge.target,
+                id: `${edge.id}_2`,
+                for: edge.id,
+              },
+            ],
+          )
+          edge.source = sourceGroupPort
+          edge.target = targetGroupPort
 
-//           const sourceChildren = sourceGroup.children as string[]
-//           const targetChildren = targetGroup.children as string[]
-//           sourceChildren.push(sourceNode!.id)
-//           targetChildren.push(targetNode!.id)
-//         } else if (sourceGroup) {
-//           const sourceGroupPort = {
-//             cell: sourceGroup.id,
-//             port: sourceGroup.ports.items[0].id,
-//           }
-//           newEdges.push(
-//             ...[
-//               {
-//                 ...edge,
-//                 source: edge.source,
-//                 target: sourceGroupPort,
-//                 id: `${edge.id}_1`,
-//                 for: edge.id,
-//               },
-//             ],
-//           )
-//           edge.source = sourceGroupPort
+          const sourceChildren = sourceGroup.children as string[]
+          const targetChildren = targetGroup.children as string[]
+          sourceChildren.push(sourceNode!.id)
+          targetChildren.push(targetNode!.id)
+        } else if (sourceGroup) {
+          const sourceGroupPort = {
+            cell: sourceGroup.id,
+            port: sourceGroup.ports.items[0].id,
+          }
+          newEdges.push(
+            ...[
+              {
+                ...edge,
+                source: edge.source,
+                target: sourceGroupPort,
+                id: `${edge.id}_1`,
+                for: edge.id,
+              },
+            ],
+          )
+          edge.source = sourceGroupPort
 
-//           const children = sourceGroup.children as string[]
-//           children.push(sourceNode!.id)
-//         } else if (targetGroup) {
-//           const targetGroupPort = {
-//             cell: targetGroup.id,
-//             port: targetGroup.ports.items[0].id,
-//           }
-//           newEdges.push(
-//             ...[
-//               {
-//                 ...edge,
-//                 source: targetGroupPort,
-//                 target: edge.target,
-//                 id: `${edge.id}_1`,
-//                 for: edge.id,
-//               },
-//             ],
-//           )
-//           edge.target = targetGroupPort
+          const children = sourceGroup.children as string[]
+          children.push(sourceNode!.id)
+        } else if (targetGroup) {
+          const targetGroupPort = {
+            cell: targetGroup.id,
+            port: targetGroup.ports.items[0].id,
+          }
+          newEdges.push(
+            ...[
+              {
+                ...edge,
+                source: targetGroupPort,
+                target: edge.target,
+                id: `${edge.id}_1`,
+                for: edge.id,
+              },
+            ],
+          )
+          edge.target = targetGroupPort
 
-//           const children = targetGroup.children as string[]
-//           children.push(targetNode!.id)
-//         }
-//       }
-//     })
+          const children = targetGroup.children as string[]
+          children.push(targetNode!.id)
+        }
+      }
+    })
 
-//     this.graph.addNodes([...nodes, ...groups])
-//     this.graph.addEdges([...edges, ...newEdges])
-//   }
+    this.graph.addNodes([...nodes, ...groups])
+    this.graph.addEdges([...edges, ...newEdges])
+  }
 
-//   initEvent = () => {
-//     const graph = this.graph
-//     graph.on('node:moving', ({ node }) => {
-//       const isGroup = node.prop('isGroup')
-//       if (isGroup) {
-//         node.prop('originPosition', node.getPosition())
-//         return
-//       }
+  initEvent = () => {
+    const graph = this.graph
+    graph.on('node:moving', ({ node }) => {
+      const isGroup = node.prop('isGroup')
+      if (isGroup) {
+        node.prop('originPosition', node.getPosition())
+        return
+      }
 
-//       const groupId = node.prop('group')
-//       const group = graph.getNodes().find((node) => node.id === groupId)
-//       if (!group) {
-//         return
-//       }
+      const groupId = node.prop('group')
+      const group = graph.getNodes().find((node) => node.id === groupId)
+      if (!group) {
+        return
+      }
 
-//       let hasChange = false
-//       let originSize = group.prop('originSize')
-//       if (originSize == null) {
-//         originSize = group.size()
-//         group.prop('originSize', originSize)
-//       }
-//       let originPosition = group.prop('originPosition')
-//       if (originPosition == null) {
-//         originPosition = group.position()
-//         group.prop('originPosition', originPosition)
-//       }
+      let hasChange = false
+      let originSize = group.prop('originSize')
+      if (originSize == null) {
+        originSize = group.size()
+        group.prop('originSize', originSize)
+      }
+      let originPosition = group.prop('originPosition')
+      if (originPosition == null) {
+        originPosition = group.position()
+        group.prop('originPosition', originPosition)
+      }
 
-//       let x = originPosition.x
-//       let y = originPosition.y
-//       let cornerX = originPosition.x + originSize.width
-//       let cornerY = originPosition.y + originSize.height
-//       const childs = group.getChildren()
-//       if (childs) {
-//         childs.forEach((child) => {
-//           const bbox = child.getBBox().inflate(32)
-//           const corner = bbox.getCorner()
+      let x = originPosition.x
+      let y = originPosition.y
+      let cornerX = originPosition.x + originSize.width
+      let cornerY = originPosition.y + originSize.height
+      const childs = group.getChildren()
+      if (childs) {
+        childs.forEach((child) => {
+          const bbox = child.getBBox().inflate(32)
+          const corner = bbox.getCorner()
 
-//           if (bbox.x < x) {
-//             x = bbox.x
-//             hasChange = true
-//           }
+          if (bbox.x < x) {
+            x = bbox.x
+            hasChange = true
+          }
 
-//           if (bbox.y < y) {
-//             y = bbox.y
-//             hasChange = true
-//           }
+          if (bbox.y < y) {
+            y = bbox.y
+            hasChange = true
+          }
 
-//           if (corner.x > cornerX) {
-//             cornerX = corner.x
-//             hasChange = true
-//           }
+          if (corner.x > cornerX) {
+            cornerX = corner.x
+            hasChange = true
+          }
 
-//           if (corner.y > cornerY) {
-//             cornerY = corner.y
-//             hasChange = true
-//           }
-//         })
-//       }
+          if (corner.y > cornerY) {
+            cornerY = corner.y
+            hasChange = true
+          }
+        })
+      }
 
-//       if (hasChange) {
-//         group.prop({
-//           position: { x, y },
-//           size: { width: cornerX - x, height: cornerY - y },
-//         })
-//       }
-//     })
-//   }
+      if (hasChange) {
+        group.prop({
+          position: { x, y },
+          size: { width: cornerX - x, height: cornerY - y },
+        })
+      }
+    })
+  }
 
-//   toJson = () => {
-//     const res = this.graph.toJSON()
-//     const cells = res.cells
-//     res.cells = cells
-//       .filter((cell) => !cell.for)
-//       .map((cell) => {
-//         if (cell.shape === 'edge') {
-//           return {
-//             ...cell,
-//             source: cell.originSource || cell.source,
-//             target: cell.originTarget || cell.target,
-//           }
-//         }
-//         return cell
-//       })
-//     return res
-//   }
+  toJson = () => {
+    const res = this.graph.toJSON()
+    const cells = res.cells
+    res.cells = cells
+      .filter((cell) => !cell.for)
+      .map((cell) => {
+        if (cell.shape === 'edge') {
+          return {
+            ...cell,
+            source: cell.originSource || cell.source,
+            target: cell.originTarget || cell.target,
+          }
+        }
+        return cell
+      })
+    return res
+  }
 
-//   refContainer = (container: HTMLDivElement) => {
-//     this.container = container
-//   }
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
 
-//   render() {
-//     return (
-//       <div className="x6-graph-wrap">
-//         <div ref={this.refContainer} className="x6-graph" />
-//       </div>
-//     )
-//   }
-// }
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+      </div>
+    )
+  }
+}

examples/x6-example-features/src/pages/index.less

@@ -23,9 +23,3 @@
   box-shadow: 0 0 10px 1px #e9e9e9;
   margin: 0 auto;
 }
-
-.home {
-  width: 800px;
-  height: 100%;
-  margin: 0 auto;
-}

examples/x6-example-features/src/pages/index.tsx

@@ -1,42 +1,9 @@
 import React from 'react'
-import { Table } from 'antd'
-import './index.less'
 
-const dataSource = [
-  {
-    key: '1',
-    example: 'animation/transition',
-    description: 'transition 动画',
-  },
-]
-
-const columns = [
-  {
-    title: 'example',
-    dataIndex: 'example',
-    render(text: string) {
-      return (
-        <a href={`./${text}`} target="_blank">
-          {text}
-        </a>
-      )
-    },
-  },
-  {
-    title: 'description',
-    dataIndex: 'description',
-  },
-]
-
-export default function () {
+export default function() {
   return (
-    <div className="home">
-      <Table
-        dataSource={dataSource}
-        columns={columns}
-        pagination={false}
-        size="small"
-      />
+    <div>
+      <h1>Feature List</h1>
     </div>
   )
 }

examples/x6-example-features/src/pages/issues/520.tsx

@@ -245,7 +245,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace Example {
   export interface Props {}
 

examples/x6-example-features/src/pages/issues/531.tsx

@@ -174,7 +174,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace Example {
   export interface Props {}
 

examples/x6-example-features/src/pages/issues/537.tsx

@@ -32,7 +32,7 @@ class ContextMenuTool extends ToolsView.ToolItem<
           trigger={['click']}
           overlay={this.options.menu}
         >
-          <a href="#" />
+          <a />
         </Dropdown>,
         this.knob,
         () => {

examples/x6-example-features/src/pages/issues/596.tsx

@@ -43,7 +43,8 @@ const data = {
       y: 40,
       attrs: {
         label: {
-          text: 'testing测试测试测试thisisaveryveryveryveryveryverylongword jsvascriptjsvascriptjsvascript',
+          text:
+            'testing测试测试测试thisisaveryveryveryveryveryverylongword jsvascriptjsvascriptjsvascript',
         },
       },
     },

examples/x6-example-features/src/pages/issues/627.tsx

@@ -84,7 +84,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace Example {
   export interface Props {}
 

examples/x6-example-features/src/pages/issues/er.tsx

@@ -56,10 +56,14 @@ export default class Example extends React.Component {
 
     graph.on('edge:connected', ({ edge }) => {
       graph.batchUpdate(() => {
-        const { port: sourcePort, ...source } =
-          edge.getSource() as Edge.TerminalCellData
-        const { port: targetPort, ...target } =
-          edge.getTarget() as Edge.TerminalCellData
+        const {
+          port: sourcePort,
+          ...source
+        } = edge.getSource() as Edge.TerminalCellData
+        const {
+          port: targetPort,
+          ...target
+        } = edge.getTarget() as Edge.TerminalCellData
 
         edge.removeProp('source')
         edge.removeProp('target')

examples/x6-example-features/src/pages/keyboard/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { Graph } from '@antv/x6-next'
-import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Graph } from '@antv/x6'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -12,28 +11,17 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       grid: true,
-      // selecting: {
-      //   enabled: true,
-      //   showNodeSelectionBox: true,
-      // },
-      // clipboard: {
-      //   enabled: true,
-      // },
-      // keyboard: {
-      //   enabled: true,
-      //   global: false,
-      // },
-    })
-
-    graph.use(
-      new Keyboard({
+      selecting: {
         enabled: true,
-      }),
-    )
-
-    const keyboard = graph.getPlugin('keyboard') as Keyboard
-    keyboard.bindKey('backspace', () => {
-      console.log('backspace')
+        showNodeSelectionBox: true,
+      },
+      clipboard: {
+        enabled: true,
+      },
+      keyboard: {
+        enabled: true,
+        global: false,
+      },
     })
 
     graph.addNode({
@@ -60,30 +48,30 @@ export default class Example extends React.Component {
       attrs: { label: { text: 'C' } },
     })
 
-    // graph.bindKey('meta+c', () => {
-    //   const cells = graph.getSelectedCells()
-    //   if (cells.length) {
-    //     graph.copy(cells)
-    //   }
-    //   return false
-    // })
+    graph.bindKey('meta+c', () => {
+      const cells = graph.getSelectedCells()
+      if (cells.length) {
+        graph.copy(cells)
+      }
+      return false
+    })
 
-    // graph.bindKey('meta+v', () => {
-    //   if (!graph.isClipboardEmpty()) {
-    //     const cells = graph.paste({ offset: 32 })
-    //     graph.resetSelection(cells)
-    //   }
-    //   console.log(graph.toJSON())
-    //   return false
-    // })
+    graph.bindKey('meta+v', () => {
+      if (!graph.isClipboardEmpty()) {
+        const cells = graph.paste({ offset: 32 })
+        graph.resetSelection(cells)
+      }
+      console.log(graph.toJSON())
+      return false
+    })
 
-    // graph.bindKey('backspace', () => {
-    //   graph.removeCells(graph.getSelectedCells())
-    // })
+    graph.bindKey('backspace', () => {
+      graph.removeCells(graph.getSelectedCells())
+    })
 
-    // graph.on('selection:changed', ({ selected }) => {
-    //   console.log(selected)
-    // })
+    graph.on('selection:changed', ({ selected }) => {
+      console.log(selected)
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {

examples/x6-example-features/src/pages/measurement/angle-shape.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
 import {
   Graph,
   Node,
@@ -139,7 +138,7 @@ Graph.registerEdge(
             return defaults
           }
 
-          const attr = val as {} as AngleEdge.AngleOptions
+          const attr = (val as {}) as AngleEdge.AngleOptions
           var angleRadius = attr.radius || 40
           var angleStart = attr.start || 'self'
           var anglePie = attr.pie || false
@@ -182,7 +181,7 @@ Graph.registerEdge(
         set(val, options) {
           let text = ''
           const view = options.view as EdgeView
-          const attr = val as {} as AngleEdge.AngleTextOptions
+          const attr = (val as {}) as AngleEdge.AngleTextOptions
 
           let meta = AngleEdge.getArcMeta(view, attr.type, { radius: 40 })
           if (meta) {
@@ -214,8 +213,8 @@ Graph.registerEdge(
             line = new Line(connectionPoint, p).setLength(distance)
           } else {
             const c = new Line(arcPoint1, arcPoint2).getCenter()
-            line = new Line(connectionPoint, c).setLength(distance)
-            largeArcFlag && line.scale(-1, -1, line.start)
+            ;(line = new Line(connectionPoint, c).setLength(distance)),
+              largeArcFlag && line.scale(-1, -1, line.start)
           }
 
           const pos = line.end
@@ -231,7 +230,6 @@ Graph.registerEdge(
   true,
 )
 
-// eslint-disable-next-line
 namespace Cache {
   function ensure(view: EdgeView) {
     const cacheKey = 'angleData'
@@ -239,7 +237,7 @@ namespace Cache {
     if (!(cacheKey in cache)) {
       cache[cacheKey] = {}
     }
-    return cache[cacheKey] as Object as {
+    return (cache[cacheKey] as Object) as {
       [key: string]: AngleEdge.Metadata | null
     }
   }
@@ -263,7 +261,6 @@ namespace Cache {
   }
 }
 
-// eslint-disable-next-line
 namespace AngleEdge {
   export type AngleStart = 'self' | 'source' | 'target'
   export type AngleDirection = 'clockwise' | 'anticlockwise' | 'small' | 'large'

examples/x6-example-features/src/pages/measurement/angle.tsx

@@ -202,7 +202,8 @@ export default class Example extends React.Component {
                 {
                   tagName: 'path',
                   attrs: {
-                    d: 'M -4 -0.8 L -7.2 2.4 L -4 5.6 L -4 3.2 L 1.6 3.2 L 1.6 1.6 L -4 1.6 L -4 -0.8 Z M 7.2 -2.4 L 4 -5.6 L 4 -3.2 L -1.6 -3.2 L -1.6 -1.6 L 4 -1.6 L 4 0.8 L 7.2 -2.4 Z',
+                    d:
+                      'M -4 -0.8 L -7.2 2.4 L -4 5.6 L -4 3.2 L 1.6 3.2 L 1.6 1.6 L -4 1.6 L -4 -0.8 Z M 7.2 -2.4 L 4 -5.6 L 4 -3.2 L -1.6 -3.2 L -1.6 -1.6 L 4 -1.6 L 4 0.8 L 7.2 -2.4 Z',
                     cursor: 'pointer',
                     strokeWidth: 2,
                     fill: '#fff',
@@ -240,7 +241,8 @@ export default class Example extends React.Component {
                 {
                   tagName: 'path',
                   attrs: {
-                    d: 'M -4 -0.8 L -7.2 2.4 L -4 5.6 L -4 3.2 L 1.6 3.2 L 1.6 1.6 L -4 1.6 L -4 -0.8 Z M 7.2 -2.4 L 4 -5.6 L 4 -3.2 L -1.6 -3.2 L -1.6 -1.6 L 4 -1.6 L 4 0.8 L 7.2 -2.4 Z',
+                    d:
+                      'M -4 -0.8 L -7.2 2.4 L -4 5.6 L -4 3.2 L 1.6 3.2 L 1.6 1.6 L -4 1.6 L -4 -0.8 Z M 7.2 -2.4 L 4 -5.6 L 4 -3.2 L -1.6 -3.2 L -1.6 -1.6 L 4 -1.6 L 4 0.8 L 7.2 -2.4 Z',
                     cursor: 'pointer',
                     strokeWidth: 2,
                     fill: '#fff',

examples/x6-example-features/src/pages/measurement/distance-shape.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-namespace */
 import { Graph, Shape, EdgeView, Edge, Registry, Point, Angle } from '@antv/x6'
 
 Graph.registerNode(
@@ -139,7 +138,7 @@ export const DistanceEdgeBase = Graph.registerEdge(
       distanceAnchor: {
         set(val, { view }) {
           if (typeof val === 'object') {
-            const attr = val as {} as DistanceEdge.DistanceAnchorOptions
+            const attr = (val as {}) as DistanceEdge.DistanceAnchorOptions
             const edgeView = view as EdgeView
             const anchor = edgeView.getTerminalAnchor(attr.type)
             const kont = edgeView.getTerminalConnectionPoint(attr.type)
@@ -152,7 +151,7 @@ export const DistanceEdgeBase = Graph.registerEdge(
       distanceText: {
         set(val, options) {
           const view = options.view as EdgeView
-          const attr = val as {} as DistanceEdge.DistanceTextOptions
+          const attr = (val as {}) as DistanceEdge.DistanceTextOptions
           const text = DistanceEdge.getDistanceText(view, attr)
           const raw = Registry.Attr.presets.text as Registry.Attr.SetDefinition
           raw.set.call(this, text, options)

examples/x6-example-features/src/pages/org/index.tsx

@@ -247,7 +247,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace Example {
   export interface Props {}
 

examples/x6-example-features/src/pages/path/random.tsx

@@ -31,7 +31,6 @@ class Coords {
   }
 }
 
-// eslint-disable-next-line
 namespace RandomDir {
   let radian = 4
 

examples/x6-example-features/src/pages/performance/async.tsx

@@ -181,7 +181,7 @@ export default class Example extends React.Component<
 
     edges.shift()
 
-    this.viewport = viewportTemplate.clone() as any as Node
+    this.viewport = (viewportTemplate.clone() as any) as Node
 
     console.time('perf-reset')
 
@@ -305,7 +305,6 @@ export default class Example extends React.Component<
   }
 }
 
-// eslint-disable-next-line
 export namespace Example {
   export interface Props {}
 

examples/x6-example-features/src/pages/performance/report/normal/edge.json

@@ -1,102 +1,81 @@
-[
-  {
-    "num": 200,
-    "time": 0.379,
-    "type": "async"
-  },
-  {
-    "num": 400,
-    "time": 0.481,
-    "type": "async"
-  },
-  {
-    "num": 600,
-    "time": 0.569,
-    "type": "async"
-  },
-  {
-    "num": 800,
-    "time": 0.681,
-    "type": "async"
-  },
-  {
-    "num": 1000,
-    "time": 0.79,
-    "type": "async"
-  },
-  {
-    "num": 1200,
-    "time": 0.915,
-    "type": "async"
-  },
-  {
-    "num": 1400,
-    "time": 1.056,
-    "type": "async"
-  },
-  {
-    "num": 1600,
-    "time": 1.24,
-    "type": "async"
-  },
-  {
-    "num": 1800,
-    "time": 1.388,
-    "type": "async"
-  },
-  {
-    "num": 2000,
-    "time": 1.497,
-    "type": "async"
-  },
-  {
-    "num": 200,
-    "time": 0.224,
-    "type": "sync"
-  },
-  {
-    "num": 400,
-    "time": 0.355,
-    "type": "sync"
-  },
-  {
-    "num": 600,
-    "time": 0.489,
-    "type": "sync"
-  },
-  {
-    "num": 800,
-    "time": 0.579,
-    "type": "sync"
-  },
-  {
-    "num": 1000,
-    "time": 0.764,
-    "type": "sync"
-  },
-  {
-    "num": 1200,
-    "time": 0.858,
-    "type": "sync"
-  },
-  {
-    "num": 1400,
-    "time": 0.992,
-    "type": "sync"
-  },
-  {
-    "num": 1600,
-    "time": 1.126,
-    "type": "sync"
-  },
-  {
-    "num": 1800,
-    "time": 1.282,
-    "type": "sync"
-  },
-  {
-    "num": 2000,
-    "time": 1.763,
-    "type": "sync"
-  }
-]
+[{
+  "num": 200,
+  "time": 0.379,
+  "type": "async"
+}, {
+  "num": 400,
+  "time": 0.481,
+  "type": "async"
+}, {
+  "num": 600,
+  "time": 0.569,
+  "type": "async"
+}, {
+  "num": 800,
+  "time": 0.681,
+  "type": "async"
+}, {
+  "num": 1000,
+  "time": 0.79,
+  "type": "async"
+}, {
+  "num": 1200,
+  "time": 0.915,
+  "type": "async"
+}, {
+  "num": 1400,
+  "time": 1.056,
+  "type": "async"
+}, {
+  "num": 1600,
+  "time": 1.24,
+  "type": "async"
+}, {
+  "num": 1800,
+  "time": 1.388,
+  "type": "async"
+}, {
+  "num": 2000,
+  "time": 1.497,
+  "type": "async"
+},{
+  "num": 200,
+  "time": 0.224,
+  "type": "sync"
+}, {
+  "num": 400,
+  "time": 0.355,
+  "type": "sync"
+}, {
+  "num": 600,
+  "time": 0.489,
+  "type": "sync"
+}, {
+  "num": 800,
+  "time": 0.579,
+  "type": "sync"
+}, {
+  "num": 1000,
+  "time": 0.764,
+  "type": "sync"
+}, {
+  "num": 1200,
+  "time": 0.858,
+  "type": "sync"
+}, {
+  "num": 1400,
+  "time": 0.992,
+  "type": "sync"
+}, {
+  "num": 1600,
+  "time": 1.126,
+  "type": "sync"
+}, {
+  "num": 1800,
+  "time": 1.282,
+  "type": "sync"
+}, {
+  "num": 2000,
+  "time": 1.763,
+  "type": "sync"
+}]

examples/x6-example-features/src/pages/performance/report/normal/edge.tsx

@@ -73,7 +73,7 @@ export default class Example extends React.Component {
         })
         nodes.push(a)
       })
-
+      
       Array.from({ length: num }).forEach(() => {
         const a = graph.createEdge({
           shape: 'performance_normal_edge',
@@ -92,7 +92,7 @@ export default class Example extends React.Component {
     function test(num: number, iterations: number) {
       const { nodes, edges } = mockCells(num)
       graph.model.resetCells(nodes)
-
+      
       const startTime = new Date().getTime()
       graph.model.addCells(edges)
       if (ASYNC) {
@@ -121,11 +121,7 @@ export default class Example extends React.Component {
     function output() {
       const res = Object.keys(result).map((key: string) => ({
         num: parseInt(key, 10),
-        time: parseFloat(
-          (result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(
-            3,
-          ),
-        ),
+        time: parseFloat((result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(3)),
         type: ASYNC ? 'async' : 'sync',
       }))
       document.getElementById('result')!.innerText = JSON.stringify(res)
@@ -141,7 +137,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div className="x6-graph-wrap">
-        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }} />
+        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }}/>
         <div ref={this.refContainer} className="x6-graph" />
       </div>
     )

examples/x6-example-features/src/pages/performance/report/normal/node.json

@@ -1,102 +1,81 @@
-[
-  {
-    "num": 500,
-    "time": 0.285,
-    "type": "sync"
-  },
-  {
-    "num": 1000,
-    "time": 0.477,
-    "type": "sync"
-  },
-  {
-    "num": 1500,
-    "time": 0.744,
-    "type": "sync"
-  },
-  {
-    "num": 2000,
-    "time": 0.964,
-    "type": "sync"
-  },
-  {
-    "num": 2500,
-    "time": 1.347,
-    "type": "sync"
-  },
-  {
-    "num": 3000,
-    "time": 1.561,
-    "type": "sync"
-  },
-  {
-    "num": 3500,
-    "time": 1.831,
-    "type": "sync"
-  },
-  {
-    "num": 4000,
-    "time": 2.14,
-    "type": "sync"
-  },
-  {
-    "num": 4500,
-    "time": 2.715,
-    "type": "sync"
-  },
-  {
-    "num": 5000,
-    "time": 2.848,
-    "type": "sync"
-  },
-  {
-    "num": 500,
-    "time": 0.276,
-    "type": "async"
-  },
-  {
-    "num": 1000,
-    "time": 0.429,
-    "type": "async"
-  },
-  {
-    "num": 1500,
-    "time": 0.677,
-    "type": "async"
-  },
-  {
-    "num": 2000,
-    "time": 0.897,
-    "type": "async"
-  },
-  {
-    "num": 2500,
-    "time": 1.356,
-    "type": "async"
-  },
-  {
-    "num": 3000,
-    "time": 1.584,
-    "type": "async"
-  },
-  {
-    "num": 3500,
-    "time": 2.045,
-    "type": "async"
-  },
-  {
-    "num": 4000,
-    "time": 2.347,
-    "type": "async"
-  },
-  {
-    "num": 4500,
-    "time": 2.705,
-    "type": "async"
-  },
-  {
-    "num": 5000,
-    "time": 3.072,
-    "type": "async"
-  }
-]
+[{
+  "num": 500,
+  "time": 0.285,
+  "type": "sync"
+}, {
+  "num": 1000,
+  "time": 0.477,
+  "type": "sync"
+}, {
+  "num": 1500,
+  "time": 0.744,
+  "type": "sync"
+}, {
+  "num": 2000,
+  "time": 0.964,
+  "type": "sync"
+}, {
+  "num": 2500,
+  "time": 1.347,
+  "type": "sync"
+}, {
+  "num": 3000,
+  "time": 1.561,
+  "type": "sync"
+}, {
+  "num": 3500,
+  "time": 1.831,
+  "type": "sync"
+}, {
+  "num": 4000,
+  "time": 2.14,
+  "type": "sync"
+}, {
+  "num": 4500,
+  "time": 2.715,
+  "type": "sync"
+}, {
+  "num": 5000,
+  "time": 2.848,
+  "type": "sync"
+},{
+  "num": 500,
+  "time": 0.276,
+  "type": "async"
+}, {
+  "num": 1000,
+  "time": 0.429,
+  "type": "async"
+}, {
+  "num": 1500,
+  "time": 0.677,
+  "type": "async"
+}, {
+  "num": 2000,
+  "time": 0.897,
+  "type": "async"
+}, {
+  "num": 2500,
+  "time": 1.356,
+  "type": "async"
+}, {
+  "num": 3000,
+  "time": 1.584,
+  "type": "async"
+}, {
+  "num": 3500,
+  "time": 2.045,
+  "type": "async"
+}, {
+  "num": 4000,
+  "time": 2.347,
+  "type": "async"
+}, {
+  "num": 4500,
+  "time": 2.705,
+  "type": "async"
+}, {
+  "num": 5000,
+  "time": 3.072,
+  "type": "async"
+}]

examples/x6-example-features/src/pages/performance/report/normal/node.tsx

@@ -90,11 +90,7 @@ export default class Example extends React.Component {
     function output() {
       const res = Object.keys(result).map((key: string) => ({
         num: parseInt(key, 10),
-        time: parseFloat(
-          (result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(
-            3,
-          ),
-        ),
+        time: parseFloat((result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(3)),
         type: ASYNC ? 'async' : 'sync',
       }))
       document.getElementById('result')!.innerText = JSON.stringify(res)
@@ -110,7 +106,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div className="x6-graph-wrap">
-        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }} />
+        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }}/>
         <div ref={this.refContainer} className="x6-graph" />
       </div>
     )

examples/x6-example-features/src/pages/performance/report/normal/port.json

@@ -1,102 +1,81 @@
-[
-  {
-    "num": 500,
-    "time": 0.594,
-    "type": "sync"
-  },
-  {
-    "num": 1000,
-    "time": 1.005,
-    "type": "sync"
-  },
-  {
-    "num": 1500,
-    "time": 1.514,
-    "type": "sync"
-  },
-  {
-    "num": 2000,
-    "time": 2.014,
-    "type": "sync"
-  },
-  {
-    "num": 2500,
-    "time": 2.775,
-    "type": "sync"
-  },
-  {
-    "num": 3000,
-    "time": 3.103,
-    "type": "sync"
-  },
-  {
-    "num": 3500,
-    "time": 3.689,
-    "type": "sync"
-  },
-  {
-    "num": 4000,
-    "time": 4.844,
-    "type": "sync"
-  },
-  {
-    "num": 4500,
-    "time": 4.972,
-    "type": "sync"
-  },
-  {
-    "num": 5000,
-    "time": 6.49,
-    "type": "sync"
-  },
-  {
-    "num": 500,
-    "time": 0.546,
-    "type": "async"
-  },
-  {
-    "num": 1000,
-    "time": 0.934,
-    "type": "async"
-  },
-  {
-    "num": 1500,
-    "time": 1.37,
-    "type": "async"
-  },
-  {
-    "num": 2000,
-    "time": 1.867,
-    "type": "async"
-  },
-  {
-    "num": 2500,
-    "time": 2.976,
-    "type": "async"
-  },
-  {
-    "num": 3000,
-    "time": 3.687,
-    "type": "async"
-  },
-  {
-    "num": 3500,
-    "time": 4.809,
-    "type": "async"
-  },
-  {
-    "num": 4000,
-    "time": 5.251,
-    "type": "async"
-  },
-  {
-    "num": 4500,
-    "time": 6.628,
-    "type": "async"
-  },
-  {
-    "num": 5000,
-    "time": 7.04,
-    "type": "async"
-  }
-]
+[{
+  "num": 500,
+  "time": 0.594,
+  "type": "sync"
+}, {
+  "num": 1000,
+  "time": 1.005,
+  "type": "sync"
+}, {
+  "num": 1500,
+  "time": 1.514,
+  "type": "sync"
+}, {
+  "num": 2000,
+  "time": 2.014,
+  "type": "sync"
+}, {
+  "num": 2500,
+  "time": 2.775,
+  "type": "sync"
+}, {
+  "num": 3000,
+  "time": 3.103,
+  "type": "sync"
+}, {
+  "num": 3500,
+  "time": 3.689,
+  "type": "sync"
+}, {
+  "num": 4000,
+  "time": 4.844,
+  "type": "sync"
+}, {
+  "num": 4500,
+  "time": 4.972,
+  "type": "sync"
+}, {
+  "num": 5000,
+  "time": 6.49,
+  "type": "sync"
+}, {
+  "num": 500,
+  "time": 0.546,
+  "type": "async"
+}, {
+  "num": 1000,
+  "time": 0.934,
+  "type": "async"
+}, {
+  "num": 1500,
+  "time": 1.37,
+  "type": "async"
+}, {
+  "num": 2000,
+  "time": 1.867,
+  "type": "async"
+}, {
+  "num": 2500,
+  "time": 2.976,
+  "type": "async"
+}, {
+  "num": 3000,
+  "time": 3.687,
+  "type": "async"
+}, {
+  "num": 3500,
+  "time": 4.809,
+  "type": "async"
+}, {
+  "num": 4000,
+  "time": 5.251,
+  "type": "async"
+}, {
+  "num": 4500,
+  "time": 6.628,
+  "type": "async"
+}, {
+  "num": 5000,
+  "time": 7.04,
+  "type": "async"
+}]

examples/x6-example-features/src/pages/performance/report/normal/port.tsx

@@ -156,11 +156,7 @@ export default class Example extends React.Component {
     function output() {
       const res = Object.keys(result).map((key: string) => ({
         num: parseInt(key, 10),
-        time: parseFloat(
-          (result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(
-            3,
-          ),
-        ),
+        time: parseFloat((result[key].reduce((pre, cur) => pre + cur, 0) / ITERATIONS).toFixed(3)),
         type: ASYNC ? 'async' : 'sync',
       }))
       document.getElementById('result')!.innerText = JSON.stringify(res)
@@ -176,7 +172,7 @@ export default class Example extends React.Component {
   render() {
     return (
       <div className="x6-graph-wrap">
-        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }} />
+        <div id="result" style={{ paddingLeft: 8, paddingBottom: 8 }}/>
         <div ref={this.refContainer} className="x6-graph" />
       </div>
     )

examples/x6-example-features/src/pages/performance/report/react/node.json

@@ -1,102 +1,81 @@
-[
-  {
-    "num": 500,
-    "time": 0.232,
-    "type": "sync"
-  },
-  {
-    "num": 1000,
-    "time": 0.344,
-    "type": "sync"
-  },
-  {
-    "num": 1500,
-    "time": 0.565,
-    "type": "sync"
-  },
-  {
-    "num": 2000,
-    "time": 0.707,
-    "type": "sync"
-  },
-  {
-    "num": 2500,
-    "time": 0.903,
-    "type": "sync"
-  },
-  {
-    "num": 3000,
-    "time": 1.147,
-    "type": "sync"
-  },
-  {
-    "num": 3500,
-    "time": 1.36,
-    "type": "sync"
-  },
-  {
-    "num": 4000,
-    "time": 1.589,
-    "type": "sync"
-  },
-  {
-    "num": 4500,
-    "time": 1.848,
-    "type": "sync"
-  },
-  {
-    "num": 5000,
-    "time": 2.332,
-    "type": "sync"
-  },
-  {
-    "num": 500,
-    "time": 0.39,
-    "type": "async"
-  },
-  {
-    "num": 1000,
-    "time": 0.633,
-    "type": "async"
-  },
-  {
-    "num": 1500,
-    "time": 0.903,
-    "type": "async"
-  },
-  {
-    "num": 2000,
-    "time": 1.163,
-    "type": "async"
-  },
-  {
-    "num": 2500,
-    "time": 1.831,
-    "type": "async"
-  },
-  {
-    "num": 3000,
-    "time": 2.172,
-    "type": "async"
-  },
-  {
-    "num": 3500,
-    "time": 2.739,
-    "type": "async"
-  },
-  {
-    "num": 4000,
-    "time": 3.073,
-    "type": "async"
-  },
-  {
-    "num": 4500,
-    "time": 3.7,
-    "type": "async"
-  },
-  {
-    "num": 5000,
-    "time": 4.065,
-    "type": "async"
-  }
-]
+[{
+  "num": 500,
+  "time": 0.232,
+  "type": "sync"
+}, {
+  "num": 1000,
+  "time": 0.344,
+  "type": "sync"
+}, {
+  "num": 1500,
+  "time": 0.565,
+  "type": "sync"
+}, {
+  "num": 2000,
+  "time": 0.707,
+  "type": "sync"
+}, {
+  "num": 2500,
+  "time": 0.903,
+  "type": "sync"
+}, {
+  "num": 3000,
+  "time": 1.147,
+  "type": "sync"
+}, {
+  "num": 3500,
+  "time": 1.36,
+  "type": "sync"
+}, {
+  "num": 4000,
+  "time": 1.589,
+  "type": "sync"
+}, {
+  "num": 4500,
+  "time": 1.848,
+  "type": "sync"
+}, {
+  "num": 5000,
+  "time": 2.332,
+  "type": "sync"
+}, {
+  "num": 500,
+  "time": 0.39,
+  "type": "async"
+}, {
+  "num": 1000,
+  "time": 0.633,
+  "type": "async"
+}, {
+  "num": 1500,
+  "time": 0.903,
+  "type": "async"
+}, {
+  "num": 2000,
+  "time": 1.163,
+  "type": "async"
+}, {
+  "num": 2500,
+  "time": 1.831,
+  "type": "async"
+}, {
+  "num": 3000,
+  "time": 2.172,
+  "type": "async"
+}, {
+  "num": 3500,
+  "time": 2.739,
+  "type": "async"
+}, {
+  "num": 4000,
+  "time": 3.073,
+  "type": "async"
+}, {
+  "num": 4500,
+  "time": 3.7,
+  "type": "async"
+}, {
+  "num": 5000,
+  "time": 4.065,
+  "type": "async"
+}]