chore(release): 🚀 publish

* docs: 📚️ add port connected demo

* feat: ✨ add scroller api

.github/dependabot.yml

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

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

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

.github/workflows/auto-comment.yml

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

.github/workflows/ci.yml

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

.github/workflows/config/labels.yml

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

.github/workflows/create-issue-branch.yml

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

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

@@ -1,5 +1,3 @@
-# Delete all but the last x GitHub releases for certain packages.
-
 name: 🚫　Delete Stale Releases
 on:
   repository_dispatch:
@@ -8,7 +6,7 @@ jobs:
   clean:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v2
       - uses: wow-actions/use-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
@@ -22,7 +20,6 @@ jobs:
           group: '(?!^)@.*$'
           exclude: |
             @antv/x6@**
-            @antv/x6-react@**
             @antv/x6-vue-shape@**
             @antv/x6-react-shape@**
             @antv/x6-angular-shape@**

.github/workflows/deploy-sites.yml

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

.github/workflows/gitleaks.yml

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

.github/workflows/label-commands.yml

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

.github/workflows/lock.yml

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

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

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

.github/workflows/potential-duplicates.yml

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

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

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

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

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

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

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

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

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

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

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

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

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

.github/workflows/preview.yml

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

.github/workflows/rebase.yml

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

.github/workflows/release.yml

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

.github/workflows/slash-commands.yml

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

.github/workflows/stale.yml

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

.github/workflows/sync-labels.yml

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

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

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

.github/workflows/update-authors.yml

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

.github/workflows/update-cache.yaml

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

.github/workflows/update-contributors.yml

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

.github/workflows/update-license.yml

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

.github/workflows/welcome.yml

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

.gitignore

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

AUTHORS

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

CONTRIBUTING.md

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

CONTRIBUTING.zh-CN.md

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

README.en-us.md

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

README.md

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

SECURITY.md

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

configs/package-json/CHANGELOG.md

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

configs/package-json/antd.json

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

configs/package-json/package.json

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

examples/x6-app-dag/CHANGELOG.md

@@ -1,119 +1,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-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,7 +7,6 @@
     "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"
   },
@@ -24,7 +23,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
-    "@antv/x6": "^1.32.3",
+    "@antv/x6": "^1.30.2",
     "@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,119 +1,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-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.32.3",
+    "@antv/x6": "^1.30.2",
     "@antv/x6-react-components": "^1.1.16",
     "antd": "^4.4.2",
     "react": "^16.8.6",

examples/x6-app-draw/tsconfig.json

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

examples/x6-app-er/CHANGELOG.md

@@ -1,119 +1,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-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,7 +7,6 @@
     "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": {
@@ -22,7 +21,7 @@
     ]
   },
   "dependencies": {
-    "@antv/x6": "^1.32.3",
+    "@antv/x6": "^1.30.2",
     "@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,318 +1,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-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": "1.2.2",
+  "version": "2.0.2-beta.0",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
@@ -9,23 +9,24 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@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",
+    "@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",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
     "elkjs": "^0.7.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.8.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
     "@types/jest": "^25.2.1",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^16.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-helmet": "^6.0.0",
     "@types/react-test-renderer": "^16.0.3",
     "eslint": "^7.16.0",

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

@@ -5,12 +5,11 @@ 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.timerId = this.cell.transition('attrs/label/opacity', 1, {
-      delay: (1 + Math.random()) * 3000,
+    this.cell.transition('attrs/label/opacity', 1, {
+      delay: 0,
       duration: 3000,
       timing: 'inout',
       interp: function (a: number, b: number) {
@@ -28,7 +27,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'),
       )
@@ -97,17 +96,13 @@ 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(),
@@ -128,7 +123,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/transition.tsx

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Graph, Cell } from '@antv/x6'
+import { Graph, Cell } from '@antv/x6-next'
 import { Bus, Connector, Component, Fader, Aux } from './shapes'
 import '../index.less'
 import './index.less'
@@ -12,9 +12,6 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 800,
-      async: true,
-      frozen: true,
-      sorting: 'approx',
       translating: {
         restrict: true,
       },
@@ -206,8 +203,6 @@ 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'
+import { Node, Shape } from '@antv/x6-next'
 
 export class Bus extends Shape.Edge {
   static create(x: number, label: string, color: string) {

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

@@ -1,454 +1,453 @@
-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} />
-        <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>
-    )
-  }
-}
+//     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>
+//     )
+//   }
+// }
 
-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,
-      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,
-      },
-    })
+//   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,
+//       },
+//     })
 
-    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="x6-graph" />
-      </div>
-    )
-  }
-}
+//   render() {
+//     return (
+//       <div className="x6-graph-wrap">
+//         <div ref={this.refContainer} className="dag" />
+//       </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.map((bendPoint: Position) => {
+        bendPoints.forEach((bendPoint: Position) => {
           bendPoint.x += pos.x
           bendPoint.y += pos.y
         })

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

@@ -1,70 +1,72 @@
-.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 {
+.dag {
   .node {
-    border-color: #1890ff;
-    border-radius: 2px;
-    box-shadow: 0 0 0 4px #d4e8fe;
+    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;
+    }
   }
-  .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;
-  }
-}
 
-.x6-edge:hover {
-  path:nth-child(2) {
-    stroke: #1890ff;
-    stroke-width: 1px;
+  .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;
+    }
   }
-}
 
-.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,8 +189,7 @@ 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,14 +98,12 @@ 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

@@ -0,0 +1,174 @@
+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,7 +14,9 @@ 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,6 +94,7 @@ 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,10 +53,8 @@ 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,6 +154,7 @@ 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,6 +212,7 @@ 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,6 +33,7 @@ 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,6 +105,7 @@ 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,6 +228,7 @@ 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,6 +195,7 @@ 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,6 +122,7 @@ 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,23 +214,37 @@ 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>
@@ -239,7 +253,9 @@ 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,3 +23,9 @@
   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,9 +1,42 @@
 import React from 'react'
+import { Table } from 'antd'
+import './index.less'
 
-export default function() {
+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 () {
   return (
-    <div>
-      <h1>Feature List</h1>
+    <div className="home">
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        size="small"
+      />
     </div>
   )
 }

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

@@ -245,6 +245,7 @@ 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,6 +174,7 @@ 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 />
+          <a href="#" />
         </Dropdown>,
         this.knob,
         () => {

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

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

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

@@ -84,6 +84,7 @@ 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,14 +56,10 @@ 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,5 +1,6 @@
 import React from 'react'
-import { Graph } from '@antv/x6'
+import { Graph } from '@antv/x6-next'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
 import '../index.less'
 
 export default class Example extends React.Component {
@@ -11,17 +12,28 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       grid: true,
-      selecting: {
+      // selecting: {
+      //   enabled: true,
+      //   showNodeSelectionBox: true,
+      // },
+      // clipboard: {
+      //   enabled: true,
+      // },
+      // keyboard: {
+      //   enabled: true,
+      //   global: false,
+      // },
+    })
+
+    graph.use(
+      new Keyboard({
         enabled: true,
-        showNodeSelectionBox: true,
-      },
-      clipboard: {
-        enabled: true,
-      },
-      keyboard: {
-        enabled: true,
-        global: false,
-      },
+      }),
+    )
+
+    const keyboard = graph.getPlugin('keyboard') as Keyboard
+    keyboard.bindKey('backspace', () => {
+      console.log('backspace')
     })
 
     graph.addNode({
@@ -48,30 +60,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,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import {
   Graph,
   Node,
@@ -138,7 +139,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
@@ -181,7 +182,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) {
@@ -213,8 +214,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
@@ -230,6 +231,7 @@ Graph.registerEdge(
   true,
 )
 
+// eslint-disable-next-line
 namespace Cache {
   function ensure(view: EdgeView) {
     const cacheKey = 'angleData'
@@ -237,7 +239,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
     }
   }
@@ -261,6 +263,7 @@ 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,8 +202,7 @@ 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',
@@ -241,8 +240,7 @@ 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,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-namespace */
 import { Graph, Shape, EdgeView, Edge, Registry, Point, Angle } from '@antv/x6'
 
 Graph.registerNode(
@@ -138,7 +139,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)
@@ -151,7 +152,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,6 +247,7 @@ 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,6 +31,7 @@ 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,6 +305,7 @@ 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,81 +1,102 @@
-[{
-  "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,7 +121,11 @@ 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)
@@ -137,7 +141,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,81 +1,102 @@
-[{
-  "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,7 +90,11 @@ 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)
@@ -106,7 +110,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,81 +1,102 @@
-[{
-  "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,7 +156,11 @@ 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)
@@ -172,7 +176,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,81 +1,102 @@
-[{
-  "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"
+  }
+]

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

@@ -102,7 +102,11 @@ 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)
@@ -118,7 +122,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/port.json

@@ -1,81 +1,102 @@
-[{
-  "num": 500,
-  "time": 1.167,
-  "type": "async"
-}, {
-  "num": 1000,
-  "time": 1.969,
-  "type": "async"
-}, {
-  "num": 1500,
-  "time": 2.944,
-  "type": "async"
-}, {
-  "num": 2000,
-  "time": 3.886,
-  "type": "async"
-}, {
-  "num": 2500,
-  "time": 6.275,
-  "type": "async"
-}, {
-  "num": 3000,
-  "time": 7.236,
-  "type": "async"
-}, {
-  "num": 3500,
-  "time": 9.368,
-  "type": "async"
-}, {
-  "num": 4000,
-  "time": 10.251,
-  "type": "async"
-}, {
-  "num": 4500,
-  "time": 12.526,
-  "type": "async"
-}, {
-  "num": 5000,
-  "time": 13.472,
-  "type": "async"
-}, {
-  "num": 500,
-  "time": 0.768,
-  "type": "sync"
-}, {
-  "num": 1000,
-  "time": 1.353,
-  "type": "sync"
-}, {
-  "num": 1500,
-  "time": 1.951,
-  "type": "sync"
-}, {
-  "num": 2000,
-  "time": 2.604,
-  "type": "sync"
-}, {
-  "num": 2500,
-  "time": 3.522,
-  "type": "sync"
-}, {
-  "num": 3000,
-  "time": 4.03,
-  "type": "sync"
-}, {
-  "num": 3500,
-  "time": 4.803,
-  "type": "sync"
-}, {
-  "num": 4000,
-  "time": 6.168,
-  "type": "sync"
-}, {
-  "num": 4500,
-  "time": 7.369,
-  "type": "sync"
-}, {
-  "num": 5000,
-  "time": 8.581,
-  "type": "sync"
-}]
+[
+  {
+    "num": 500,
+    "time": 1.167,
+    "type": "async"
+  },
+  {
+    "num": 1000,
+    "time": 1.969,
+    "type": "async"
+  },
+  {
+    "num": 1500,
+    "time": 2.944,
+    "type": "async"
+  },
+  {
+    "num": 2000,
+    "time": 3.886,
+    "type": "async"
+  },
+  {
+    "num": 2500,
+    "time": 6.275,
+    "type": "async"
+  },
+  {
+    "num": 3000,
+    "time": 7.236,
+    "type": "async"
+  },
+  {
+    "num": 3500,
+    "time": 9.368,
+    "type": "async"
+  },
+  {
+    "num": 4000,
+    "time": 10.251,
+    "type": "async"
+  },
+  {
+    "num": 4500,
+    "time": 12.526,
+    "type": "async"
+  },
+  {
+    "num": 5000,
+    "time": 13.472,
+    "type": "async"
+  },
+  {
+    "num": 500,
+    "time": 0.768,
+    "type": "sync"
+  },
+  {
+    "num": 1000,
+    "time": 1.353,
+    "type": "sync"
+  },
+  {
+    "num": 1500,
+    "time": 1.951,
+    "type": "sync"
+  },
+  {
+    "num": 2000,
+    "time": 2.604,
+    "type": "sync"
+  },
+  {
+    "num": 2500,
+    "time": 3.522,
+    "type": "sync"
+  },
+  {
+    "num": 3000,
+    "time": 4.03,
+    "type": "sync"
+  },
+  {
+    "num": 3500,
+    "time": 4.803,
+    "type": "sync"
+  },
+  {
+    "num": 4000,
+    "time": 6.168,
+    "type": "sync"
+  },
+  {
+    "num": 4500,
+    "time": 7.369,
+    "type": "sync"
+  },
+  {
+    "num": 5000,
+    "time": 8.581,
+    "type": "sync"
+  }
+]