chore: 🔧 release x6-react-shape@1.6.6

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

.github/dependabot.yml

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

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

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

.github/workflows/auto-comment.yml

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

.github/workflows/ci.yml

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

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

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

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

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

.github/workflows/deploy-sites.yml

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

.github/workflows/gitleaks.yml

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

.github/workflows/label-commands.yml

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

.github/workflows/lock.yml

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

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

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

.github/workflows/potential-duplicates.yml

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

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

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

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

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

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

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

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

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

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

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

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

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

.github/workflows/preview.yml

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

.github/workflows/rebase.yml

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

.github/workflows/release.yml

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

.github/workflows/slash-commands.yml

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

.github/workflows/stale.yml

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

.github/workflows/sync-labels.yml

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

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

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

.github/workflows/update-authors.yml

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

.github/workflows/update-cache.yaml

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

.github/workflows/update-contributors.yml

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

.github/workflows/update-license.yml

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

.github/workflows/welcome.yml

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

AUTHORS

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

README.en-us.md

@@ -160,9 +160,7 @@ graph.addEdge({
 Welcome to join the **X6 Communication Group** (Scan the QR Code to Join us). We also welcome the github [issues](https://github.com/antvis/x6/issues).
 
 <a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
+  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
 </a>
 
 ## Development

README.md

@@ -76,7 +76,7 @@ $ yarn add @antv/x6
 ```ts
 // 从 node_modules 引入
 import { Graph } from '@antv/x6'
-// 从 CND 引入时，我们暴露了 X6 这个全局变量
+// 从 CDN 引入时，我们暴露了 X6 这个全局变量
 // const { Graph } = X6
 
 // 创建 Graph 的实例
@@ -121,7 +121,7 @@ graph.addEdge({
 - [基础教程](https://x6.antv.vision/zh/docs/tutorial/basic/graph)
 - [进阶实践](https://x6.antv.vision/zh/docs/tutorial/intermediate/serialization)
 - [高级指引](https://x6.antv.vision/zh/docs/tutorial/advanced/animation)
-- [更新日志](https://x6.antv.vision/zh/docs/tutorial/log)
+- [更新日志](https://www.yuque.com/antv/x6/xgb04i)
 
 ## 应用案例
 
@@ -165,9 +165,7 @@ graph.addEdge({
 需要注意的是，提问题时请配上 [CodeSandbox](https://codesandbox.io/s/pensive-sound-f4nhc) 的复现代码，方便快速定位和解决问题。
 
 <a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
+  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
 </a>
 
 ## 如何开发

configs/package-json/CHANGELOG.md

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

configs/package-json/antd.json

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

configs/package-json/package.json

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

examples/x6-app-dag/CHANGELOG.md

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

examples/x6-app-dag/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.32.3",
     "@antv/x6-react-components": "^1.1.16",
     "@antv/x6-react-shape": "^1.6.0",
     "@types/dompurify": "^2.0.4",

examples/x6-app-draw/CHANGELOG.md

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

examples/x6-app-draw/package.json

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

examples/x6-app-er/CHANGELOG.md

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

examples/x6-app-er/package.json

@@ -22,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.32.3",
     "@antv/x6-react-components": "^1.1.16",
     "@antv/x6-react-shape": "^1.6.0",
     "antd": "^4.4.2",

examples/x6-example-features/CHANGELOG.md

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

examples/x6-example-features/package.json

@@ -9,10 +9,10 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@antv/x6": "^1.30.2",
+    "@antv/x6": "^1.34.0",
     "@antv/x6-react-components": "^1.1.16",
     "@antv/x6-react-shape": "^1.6.0",
-    "@antv/x6-vector": "^1.3.0",
+    "@antv/x6-vector": "^1.4.0",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",

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

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

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

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

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

@@ -327,6 +327,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 600,
+      snapline: true,
       panning: {
         enabled: true,
         eventTypes: ['leftMouseDown', 'mouseWheel'],

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

@@ -1,173 +0,0 @@
-import React from 'react'
-import ReactDom from 'react-dom'
-import { Tooltip } from 'antd'
-import { Graph, Markup, ToolsView, EdgeView } from '@antv/x6'
-import '../index.less'
-
-class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipTool.Options> {
-  private delay = 100
-  private moveTimer: number
-  private enterTimer: number
-  private leaveTimer: number
-  private tooltipVisible: boolean
-
-  protected onRender() {
-    this.updatePosition()
-  }
-
-  private toggleTooltip(visible: boolean) {
-    ReactDom.unmountComponentAtNode(this.childNodes.foContent)
-
-    if (visible) {
-      ReactDom.render(
-        <Tooltip title={this.options.tooltip} visible={true}>
-          <div />
-        </Tooltip>,
-        this.childNodes.foContent,
-      )
-    }
-    this.tooltipVisible = visible
-  }
-
-  private updatePosition(e?: MouseEvent) {
-    const fo = this.childNodes.fo as SVGForeignObjectElement
-    if (e) {
-      const pos = this.graph.clientToLocal(e.clientX, e.clientY)
-      fo.setAttribute('x', `${pos.x}`)
-      fo.setAttribute('y', `${pos.y}`)
-    } else {
-      fo.setAttribute('x', `-10000`)
-      fo.setAttribute('y', `-10000`)
-    }
-  }
-
-  private onMouseEnter({ e }: EdgeView.EventArgs['edge:mouseenter']) {
-    this.updatePosition(e.originalEvent)
-    window.clearTimeout(this.leaveTimer)
-    this.enterTimer = window.setTimeout(
-      () => this.toggleTooltip(true),
-      this.delay,
-    )
-    if (this.options.follow != false) {
-      document.addEventListener('mousemove', this.onMouseMove)
-    }
-  }
-
-  private onMouseLeave() {
-    this.updatePosition()
-    window.clearTimeout(this.enterTimer)
-    this.leaveTimer = window.setTimeout(
-      () => this.toggleTooltip(false),
-      this.delay,
-    )
-    if (this.options.follow != false) {
-      document.removeEventListener('mousemove', this.onMouseMove)
-    }
-  }
-
-  private onMouseMove = (e: MouseEvent) => {
-    window.clearTimeout(this.moveTimer)
-    window.clearTimeout(this.enterTimer)
-    this.updatePosition(e)
-    this.moveTimer = window.setTimeout(() => {
-      if (this.tooltipVisible) {
-        this.toggleTooltip(false)
-      }
-      this.toggleTooltip(true)
-    }, this.delay)
-  }
-
-  delegateEvents() {
-    this.cellView.on('edge:mouseenter', this.onMouseEnter, this)
-    this.cellView.on('edge:mouseleave', this.onMouseLeave, this)
-    return super.delegateEvents()
-  }
-
-  protected onRemove() {
-    this.cellView.off('edge:mouseenter', this.onMouseEnter, this)
-    this.cellView.off('edge:mouseleave', this.onMouseLeave, this)
-  }
-}
-
-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/react/portal.tsx

@@ -1,21 +1,16 @@
-import React from 'react'
+import React, { memo, useEffect, useRef, useState } from 'react'
 import { Graph, Node, Color } from '@antv/x6'
-import { Portal } from '@antv/x6-react-shape'
+import { Portal, ReactShape } from '@antv/x6-react-shape'
 import '../index.less'
 
-class MyComponent extends React.Component<{ node?: Node; text: string }> {
-  shouldComponentUpdate() {
-    const node = this.props.node
-    if (node) {
-      if (node.hasChanged('data')) {
-        return true
-      }
-    }
+// You should do this outside your components
+// (or make sure its not recreated on every render).
+//
+// 这个调用需要在组件外进行。
+const X6ReactPortalProvider = Portal.getProvider()
 
-    return false
-  }
-
-  render() {
+const MyComponent = memo(
+  ({ node, text }: { node?: ReactShape; text: string }) => {
     const color = Color.randomHex()
     return (
       <div
@@ -28,18 +23,25 @@ class MyComponent extends React.Component<{ node?: Node; text: string }> {
           background: color,
         }}
       >
-        {this.props.text}
+        {text}
       </div>
     )
-  }
-}
+  },
+  (prev, next) => {
+    return Boolean(next.node?.hasChanged('data'))
+  },
+)
 
-export default class Example extends React.Component {
-  private container: HTMLDivElement
+export default () => {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!container.current) {
+      return
+    }
 
-  componentDidMount() {
     const graph = new Graph({
-      container: this.container,
+      container: container.current,
       width: 800,
       height: 600,
     })
@@ -61,7 +63,7 @@ export default class Example extends React.Component {
       y: 320,
       width: 160,
       height: 60,
-      component: (node) => {
+      component: (node: Node) => {
         return <div>{node.attr('body/fill')}</div>
       },
       // component: () => <Test text="target" />,
@@ -80,19 +82,18 @@ export default class Example extends React.Component {
     update()
 
     console.log(graph.toJSON())
-  }
+    return () => graph.dispose()
+  }, [])
 
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
+  const [counter, setCounter] = useState(0)
 
-  render() {
-    const X6ReactPortalProvider = Portal.getProvider()
-    return (
-      <div className="x6-graph-wrap">
-        <X6ReactPortalProvider />
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
+  return (
+    <div className="x6-graph-wrap">
+      <button onClick={() => setCounter((i) => i + 1)}>
+        Counter: {counter}
+      </button>
+      <X6ReactPortalProvider />
+      <div ref={container} className="x6-graph" />
+    </div>
+  )
 }

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

@@ -17,18 +17,20 @@ class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipToolOptions> {
   }
 
   private toggleTooltip(visible: boolean) {
-    ReactDom.unmountComponentAtNode(this.knob)
-    if (visible) {
-      ReactDom.render(
-        <Tooltip
-          title={this.options.tooltip}
-          visible={true}
-          destroyTooltipOnHide
-        >
-          <div />
-        </Tooltip>,
-        this.knob,
-      )
+    if (this.knob) {
+      ReactDom.unmountComponentAtNode(this.knob)
+      if (visible) {
+        ReactDom.render(
+          <Tooltip
+            title={this.options.tooltip}
+            visible={true}
+            destroyTooltipOnHide
+          >
+            <div />
+          </Tooltip>,
+          this.knob,
+        )
+      }
     }
   }
 
@@ -69,6 +71,7 @@ class TooltipTool extends ToolsView.ToolItem<EdgeView, TooltipToolOptions> {
   }
 
   protected onRemove() {
+    this.toggleTooltip(false)
     this.cellView.off('cell:mouseenter', this.onMosueEnter, this)
     this.cellView.off('cell:mouseleave', this.onMouseLeave, this)
     this.cellView.off('cell:mousemove', this.onMouseMove, this)

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

@@ -1,6 +1,8 @@
-import React from 'react'
 import { Button } from 'antd'
+import React from 'react'
+
 import { Graph } from '@antv/x6'
+
 import '../index.less'
 
 export default class Example extends React.Component<
@@ -22,10 +24,13 @@ export default class Example extends React.Component<
       height: 600,
       grid: true,
       history: true,
+      embedding: {
+        enabled: true,
+      },
     })
 
     this.history = graph.history
-    this.history.on('change', () => {
+    this.history.on('change', (info) => {
       this.setState({
         canRedo: this.history.canRedo(),
         canUndo: this.history.canUndo(),
@@ -62,6 +67,21 @@ export default class Example extends React.Component<
       },
     })
 
+    graph.addNode({
+      x: 400,
+      y: 100,
+      width: 150,
+      height: 150,
+      attrs: {
+        label: {
+          text: '🌎',
+        },
+        body: {
+          strokeWidth: 1,
+        },
+      },
+    })
+
     graph.addEdge({ source, target, arrts: { line: { strokeWidth: 1 } } })
   }
 

examples/x6-example-features/src/pages/vector/version.ts

@@ -1,3 +0,0 @@
-import { version } from '@antv/x6-vector'
-
-console.log(version)

package.json

@@ -26,7 +26,8 @@
     "package:check": "yarn package-inherit check",
     "package:inherit": "yarn package-inherit update",
     "prepare": "is-ci || husky install configs/husky-config",
-    "precommit": "yarn lint-staged && lerna run --concurrency 1 --stream precommit"
+    "precommit": "yarn lint-staged && lerna run --concurrency 1 --stream precommit",
+    "publish:latest": "lerna publish from-package --no-private --ignore-scripts --dist-tag v1"
   },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,less,md,json}": [

packages/x6-angular-shape/CHANGELOG.md

@@ -1,3 +1,5 @@
+## @antv/x6-angular-shape [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-angular-shape@1.3.0...@antv/x6-angular-shape@1.3.1) (2022-06-05)
+
 # @antv/x6-angular-shape [1.3.0](https://github.com/antvis/x6/compare/@antv/x6-angular-shape@1.2.0...@antv/x6-angular-shape@1.3.0) (2022-01-11)
 
 

packages/x6-angular-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-angular-shape",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "X6 shape for rendering angular components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,12 +49,12 @@
     "@angular/cdk": ">=10.2.3",
     "@angular/common": "^10.2.3",
     "@angular/core": ">=10.2.3",
-    "@antv/x6": ">=1.0.0"
+    "@antv/x6": "^1.x"
   },
   "devDependencies": {
     "@angular/cdk": "^10.2.3",
     "@angular/common": "^10.2.3",
-    "@angular/core": "^10.2.3",
+    "@angular/core": "^11.0.5",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",

packages/x6-geometry/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @antv/x6-geometry [1.0.12](https://github.com/antvis/x6/compare/@antv/x6-geometry@1.0.11...@antv/x6-geometry@1.0.12) (2022-05-16)
+
+
+### Bug Fixes
+
+* remove the browserslist configuration in package.json ([#2084](https://github.com/antvis/x6/issues/2084)) ([de59617](https://github.com/antvis/x6/commit/de59617532cb20c0103ac701f44f2d0509b782e0))
+
+## @antv/x6-geometry [1.0.12](https://github.com/antvis/x6/compare/@antv/x6-geometry@1.0.11...@antv/x6-geometry@1.0.12) (2022-05-09)
+
+
+### Bug Fixes
+
+* remove the browserslist configuration in package.json ([#2084](https://github.com/antvis/x6/issues/2084)) ([de59617](https://github.com/antvis/x6/commit/de59617532cb20c0103ac701f44f2d0509b782e0))
+
 ## @antv/x6-geometry [1.0.11](https://github.com/antvis/x6/compare/@antv/x6-geometry@1.0.10...@antv/x6-geometry@1.0.11) (2021-11-14)
 
 # @antv/x6-geometry 1.0.0 (2021-11-11)

packages/x6-geometry/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.11",
+  "version": "1.0.14",
   "name": "@antv/x6-geometry",
   "description": "Some useful geometry operations.",
   "main": "lib/index.js",
@@ -26,17 +26,16 @@
     "build:esm": "tsc --module esnext --target es2015 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
     "build:umd": "rollup -c",
-    "build:version": "node ../../scripts/version.js",
     "build:watch": "yarn build:esm --w",
     "build:watch:esm": "yarn build:esm --w",
     "build:watch:cjs": "yarn build:cjs --w",
     "build:dev": "run-p build:cjs build:esm",
-    "build": "run-p build:version build:dev build:umd",
+    "build": "run-p build:dev build:umd",
     "prebuild": "run-s lint clean",
     "test": "jest",
     "coveralls": "cat ./test/coverage/lcov.info | coveralls",
     "pretest": "run-p clean:coverage",
-    "prepare": "run-s build:version test build",
+    "prepare": "run-s test build",
     "precommit": "lint-staged"
   },
   "lint-staged": {
@@ -91,11 +90,6 @@
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox ESR",
-    "> 1%"
-  ],
   "author": {
     "name": "bubkoo",
     "email": "bubkoo.wy@gmail.com"

packages/x6-geometry/src/index.ts

@@ -1,4 +1,3 @@
-export * from './version'
 export * from './angle'
 export * from './point'
 export * from './line'

packages/x6-geometry/src/version.test.ts

@@ -1,9 +0,0 @@
-import { version } from './version'
-
-describe('version', () => {
-  it('should match the `version` field of package.json', () => {
-    // eslint-disable-next-line
-    const expected = require('../package.json').version
-    expect(version).toBe(expected)
-  })
-})

packages/x6-geometry/src/version.ts

@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/**
- * Auto generated version file, do not modify it!
- */
-const version = '1.0.8'
-export { version }

packages/x6-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-components",
-  "version": "1.1.16",
+  "version": "1.1.20",
   "description": "React components for building x6 editors",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,7 +61,7 @@
     "@antv/x6-package-json/rollup.json"
   ],
   "peerDependencies": {
-    "antd": ">=4.4.2",
+    "antd": ">=4.4.2 || >=5.0.0-beta.0",
     "react": ">=16.8.6 || >=17.0.0",
     "react-dom": ">=16.8.6 || >=17.0.0"
   },
@@ -71,7 +71,7 @@
     "rc-dropdown": "^3.0.0-alpha.0",
     "rc-util": "^4.15.7",
     "react-color": "2.17.1",
-    "react-resize-detector": "^6.6.4",
+    "react-resize-detector": "^7.0.0",
     "ua-parser-js": "^0.7.20"
   },
   "devDependencies": {

packages/x6-react-components/src/color-picker/index.tsx

@@ -5,7 +5,6 @@ import React from 'react'
 import classNames from 'classnames'
 import { Popover } from 'antd'
 import { PopoverProps } from 'antd/es/popover'
-import 'antd/es/popover/style/index.css'
 import addEventListener from 'rc-util/lib/Dom/addEventListener'
 import {
   SketchPicker,
@@ -101,11 +100,15 @@ export class ColorPicker extends React.Component<
     const { color } = this.state
     const { disabled, overlayProps, style } = this.props
     const baseCls = `${this.props.prefixCls}-color-picker`
-    const popoverProps: PopoverProps = {}
+    const popoverProps: PopoverProps & { open?: boolean } = {}
     if (disabled) {
       popoverProps.visible = false
+      // Support for antd 5.0
+      popoverProps.open = false
     } else {
       popoverProps.visible = this.state.active
+      // Support for antd 5.0
+      popoverProps.open = this.state.active
     }
 
     const colorStr =

packages/x6-react-components/src/toolbar/item.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import classNames from 'classnames'
 import { Tooltip } from 'antd'
 import { TooltipProps } from 'antd/es/tooltip'
-import 'antd/es/tooltip/style/index.css'
 import { Menu } from '../menu'
 import { Dropdown } from '../dropdown'
 import { ToolbarContext } from './context'

packages/x6-react-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-shape",
-  "version": "1.6.0",
+  "version": "1.6.6",
   "description": "X6 shape for rendering react components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,7 +10,8 @@
   "files": [
     "dist",
     "es",
-    "lib"
+    "lib",
+    "src"
   ],
   "keywords": [
     "shape",
@@ -30,9 +31,8 @@
     "build:watch:esm": "yarn build:esm --w",
     "build:watch:cjs": "yarn build:cjs --w",
     "build": "run-p build:cjs build:esm build:umd",
-    "prebuild": "run-s lint clean",
-    "prepare": "yarn build",
-    "precommit": "lint-staged"
+    "prebuild": "run-s clean",
+    "prepare": "yarn build"
   },
   "lint-staged": {
     "src/**/*.ts": [
@@ -46,7 +46,7 @@
     "@antv/x6-package-json/rollup.json"
   ],
   "peerDependencies": {
-    "@antv/x6": ">=1.0.0",
+    "@antv/x6": "^1.x",
     "react": ">=16.8.6 || >=17.0.0",
     "react-dom": ">=16.8.6 || >=17.0.0"
   },

packages/x6-react-shape/src/view.ts

@@ -6,17 +6,24 @@ import { Portal } from './portal'
 import { Wrap } from './wrap'
 
 export class ReactShapeView extends NodeView<ReactShape> {
+  protected targetId() {
+    return `${this.graph.view.cid}:${this.cell.id}`
+  }
+
   protected init() {
     super.init()
     this.cell.on('removed', () => {
-      Portal.disconnect(this.cell.id)
+      Portal.disconnect(this.targetId())
     })
   }
 
   getComponentContainer() {
-    return this.cell.prop('useForeignObject') === false
-      ? (this.selectors.content as SVGElement)
-      : (this.selectors.foContent as HTMLDivElement)
+    return (
+      this.selectors &&
+      (this.cell.prop('useForeignObject') === false
+        ? (this.selectors.content as SVGElement)
+        : (this.selectors.foContent as HTMLDivElement))
+    )
   }
 
   confirmUpdate(flag: number) {
@@ -42,7 +49,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
       const component = this.graph.hook.getReactComponent(node)
       const elem = React.createElement(Wrap, { graph, node, component })
       if (Portal.isActive()) {
-        Portal.connect(this.cell.id, ReactDOM.createPortal(elem, root))
+        Portal.connect(this.targetId(), ReactDOM.createPortal(elem, root))
       } else {
         ReactDOM.render(elem, root)
       }
@@ -57,32 +64,8 @@ export class ReactShapeView extends NodeView<ReactShape> {
     return root
   }
 
-  onMouseDown(e: JQuery.MouseDownEvent, x: number, y: number) {
-    const target = e.target as Element
-    const tagName = target.tagName.toLowerCase()
-    if (tagName === 'input') {
-      const type = target.getAttribute('type')
-      if (
-        type == null ||
-        [
-          'text',
-          'password',
-          'number',
-          'email',
-          'search',
-          'tel',
-          'url',
-        ].includes(type)
-      ) {
-        return
-      }
-    }
-
-    super.onMouseDown(e, x, y)
-  }
-
   unmount() {
-    Portal.disconnect(this.cell.id)
+    Portal.disconnect(this.targetId())
     this.unmountReactComponent()
     super.unmount()
     return this

packages/x6-vector/CHANGELOG.md

@@ -1,3 +1,43 @@
+# @antv/x6-vector [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-vector@1.3.1...@antv/x6-vector@1.4.0) (2022-05-16)
+
+
+### Bug Fixes
+
+* remove the browserslist configuration in package.json ([#2084](https://github.com/antvis/x6/issues/2084)) ([de59617](https://github.com/antvis/x6/commit/de59617532cb20c0103ac701f44f2d0509b782e0))
+
+
+### Features
+
+* ✨ unified minimap interaction between scroller and panning ([#2109](https://github.com/antvis/x6/issues/2109)) ([3c7c06a](https://github.com/antvis/x6/commit/3c7c06ac30b48d563cbfa5dca298789ac6ea1ba2))
+
+# @antv/x6-vector [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-vector@1.3.2...@antv/x6-vector@1.4.0) (2022-05-14)
+
+
+### Features
+
+* ✨ unified minimap interaction between scroller and panning ([#2109](https://github.com/antvis/x6/issues/2109)) ([3c7c06a](https://github.com/antvis/x6/commit/3c7c06ac30b48d563cbfa5dca298789ac6ea1ba2))
+
+## @antv/x6-vector [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-vector@1.3.1...@antv/x6-vector@1.3.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* remove the browserslist configuration in package.json ([#2084](https://github.com/antvis/x6/issues/2084)) ([de59617](https://github.com/antvis/x6/commit/de59617532cb20c0103ac701f44f2d0509b782e0))
+
+## @antv/x6-vector [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-vector@1.3.0...@antv/x6-vector@1.3.1) (2022-04-05)
+
+
+### Bug Fixes
+
+* 🐛 fix lgtm alert ([#1975](https://github.com/antvis/x6/issues/1975)) ([7440903](https://github.com/antvis/x6/commit/7440903281be9214d8cff7f69c4e44106d751422))
+
+## @antv/x6-vector [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-vector@1.3.0...@antv/x6-vector@1.3.1) (2022-04-05)
+
+
+### Bug Fixes
+
+* 🐛 fix lgtm alert ([#1975](https://github.com/antvis/x6/issues/1975)) ([7440903](https://github.com/antvis/x6/commit/7440903281be9214d8cff7f69c4e44106d751422))
+
 # @antv/x6-vector [1.3.0](https://github.com/antvis/x6/compare/@antv/x6-vector@1.2.3...@antv/x6-vector@1.3.0) (2021-12-18)
 
 

packages/x6-vector/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0",
+  "version": "1.4.2",
   "name": "@antv/x6-vector",
   "description": "Lightweight library for manipulating and animating SVG.",
   "main": "lib/index.js",
@@ -26,20 +26,19 @@
     "build:esm": "tsc --module esnext --target es2015 --outDir ./es",
     "build:cjs": "tsc --module commonjs --target es5 --outDir ./lib",
     "build:umd": "rollup -c",
-    "build:version": "node ../../scripts/version.js",
     "build:csstype": "node ./scripts/csstype.js",
     "build:watch": "yarn build:esm --w",
     "build:watch:esm": "yarn build:esm --w",
     "build:watch:cjs": "yarn build:cjs --w",
     "build:dev": "run-p build:csstype build:cjs build:esm",
-    "build": "run-p build:version build:dev build:umd",
+    "build": "run-p build:dev build:umd",
     "prebuild": "run-s lint clean",
     "test": "karma start",
     "test:watch": "karma start --single-run=false --auto-watch",
     "test:debug": "karma start --browsers=Chrome --single-run=false --auto-watch --debug",
     "coveralls": "cat ./test/coverage/lcov.info | coveralls",
     "pretest": "run-p clean:coverage",
-    "prepare": "run-s build:version test build",
+    "prepare": "run-s test build",
     "precommit": "lint-staged"
   },
   "lint-staged": {
@@ -103,11 +102,6 @@
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox ESR",
-    "> 1%"
-  ],
   "author": {
     "name": "bubkoo",
     "email": "bubkoo.wy@gmail.com"

packages/x6-vector/src/dom/common/adopter.ts

@@ -94,7 +94,7 @@ export namespace Adopter {
 
     // Make sure, that HTML elements are created with the correct namespace
     const wrapper = isHTML ? createHTMLNode('div') : createSVGNode('svg')
-    wrapper.innerHTML = node
+    wrapper.innerHTML = typeof node === 'string' ? unescape(node) : node
 
     // We can use firstChild here because we know,
     // that the first char is < and thus an element

packages/x6-vector/src/global/version.test.ts

@@ -1,9 +0,0 @@
-import { version } from './version'
-
-describe('version', () => {
-  it('should match the `version` field of package.json', () => {
-    // eslint-disable-next-line
-    const expected = require('../../package.json').version
-    expect(version).toBe(expected)
-  })
-})

packages/x6-vector/src/global/version.ts

@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/**
- * Auto generated version file, do not modify it!
- */
-const version = '1.3.0'
-export { version }

packages/x6-vector/src/index.ts

@@ -1,3 +1,2 @@
-export * from './global/version'
 export * from './dom'
 export * from './vector'

packages/x6-vector/src/vector/image/image.test.ts

@@ -3,7 +3,8 @@ import { SVG } from '../svg/svg'
 import { Image } from './image'
 
 describe('Image', () => {
-  const url = 'http://via.placeholder.com/120x80'
+  const url =
+    'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*bSBhSbhNr2QAAAAAAAAAAAAAARQnAQ'
 
   describe('constructor()', () => {
     it('should create an instance of Image', () => {

packages/x6-vue-shape/CHANGELOG.md

@@ -1,3 +1,33 @@
+# @antv/x6-vue-shape [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@1.3.2...@antv/x6-vue-shape@1.4.0) (2022-05-09)
+
+
+### Features
+
+* vue3支持使用useTeleport ([#2078](https://github.com/antvis/x6/issues/2078)) ([b8c2175](https://github.com/antvis/x6/commit/b8c217572a696a11fc0fbad7050fffb34ab6c3af))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.5
+
+## @antv/x6-vue-shape [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@1.3.1...@antv/x6-vue-shape@1.3.2) (2022-04-05)
+
+
+### Bug Fixes
+
+* **x6-vue-shape:** 🐛 error on removing fragment node ([#1974](https://github.com/antvis/x6/issues/1974)) ([6614e4f](https://github.com/antvis/x6/commit/6614e4f83c5926d97a55db48232f58ba17f64a00))
+
+
+
+
+
+### Dependencies
+
+* **@antv/x6:** upgraded to 1.31.1
+
 ## @antv/x6-vue-shape [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@1.3.0...@antv/x6-vue-shape@1.3.1) (2022-01-12)
 
 

packages/x6-vue-shape/README.md

@@ -26,17 +26,7 @@ graph.addNode({
   y: 48,
   width: 180,
   height: 40,
-  component: {
-    template: `<hello-world :name="name"></hello-world>`,
-    data() {
-      return {
-        name: 'x6',
-      }
-    },
-    components: {
-      HelloWorld,
-    }
-  },
+  component: HelloWorld,
 })
 ```
 

packages/x6-vue-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-vue-shape",
-  "version": "1.3.1",
+  "version": "1.5.4",
   "description": "X6 shape for rendering vue components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,10 +45,10 @@
     "@antv/x6-package-json/rollup.json"
   ],
   "dependencies": {
-    "vue-demi": "^0.7.4"
+    "vue-demi": "latest"
   },
   "peerDependencies": {
-    "@antv/x6": ">=1.0.0",
+    "@antv/x6": "^1.x",
     "@vue/composition-api": "^1.0.0-rc.6",
     "vue": "^2.6.12 || ^3.0.0"
   },

packages/x6-vue-shape/src/index.ts

@@ -3,3 +3,4 @@ import './hook'
 export * from './node'
 export * from './view'
 export * from './registry'
+export * from './teleport'

packages/x6-vue-shape/src/registry.ts

@@ -1,14 +1,9 @@
 import { Graph, Node, Registry } from '@antv/x6'
+import { ComponentInstance } from 'vue-demi'
 
-export type VueComponent = {
-  template: string
-  data?: { [key: string]: any }
-  components?: { [key: string]: any }
-  computed?: { [key: string]: any }
-  methods?: { [key: string]: any }
-}
+export declare type VueComponent = ComponentInstance
 
-export type Definition =
+export declare type Definition =
   | VueComponent
   | ((this: Graph, node: Node) => VueComponent)
 

packages/x6-vue-shape/src/teleport.ts

@@ -0,0 +1,118 @@
+import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
+import { Graph, NodeView, Scheduler } from '@antv/x6'
+import { VueShape } from './node'
+import { VueShapeView } from './view'
+
+export function useTeleport(uniqViewId: string) {
+  if (isVue3) {
+    const { Teleport, markRaw, Fragment, VNode, VNodeData } = Vue as any
+    const action: any = 'vue'
+
+    const items = reactive<{ [key: string]: any }>({})
+
+    const TeleportContainer = defineComponent({
+      setup() {
+        return () =>
+          h(
+            Fragment,
+            {},
+            Object.keys(items).map((id) => h(items[id])),
+          )
+      },
+    })
+
+    const connect = (
+      id: string,
+      node: VueShape,
+      graph: Graph,
+      component: any,
+      getContainer: () => HTMLDivElement,
+    ) => {
+      if (items[id]) {
+        // confirmUpdate可能导致多次调用，所以判断一下
+        return
+      }
+      items[id] = markRaw(
+        defineComponent({
+          render: () =>
+            (getContainer()
+              ? h(Teleport, { to: getContainer() } as typeof VNodeData, [
+                  h(component, { graph, node } as any),
+                ])
+              : null) as typeof VNode,
+          provide: () => ({
+            getGraph: () => graph,
+            getNode: () => node,
+          }),
+        }),
+      )
+    }
+    const disconnect = (id: string) => {
+      delete items[id]
+    }
+
+    class VuePortalShapeView extends NodeView<VueShape> {
+      getTargetId() {
+        return `${this.graph.view.cid}:${this.cell.id}`
+      }
+      init() {
+        super.init()
+        const targetId = this.getTargetId()
+        this.cell.on('removed', () => {
+          disconnect(targetId)
+        })
+        this.renderVueComponent()
+      }
+      renderVueComponent() {
+        const targetId = this.getTargetId()
+        const component = this.graph.hook.getVueComponent(this.cell)
+        // 这里需要将当前View的cell以及graph还有component等对象存储起来给TeleportContainer使用
+        connect(
+          targetId,
+          this.cell,
+          this.graph,
+          component,
+          this.getComponentContainer.bind(this),
+        )
+      }
+      getComponentContainer() {
+        return this.cell.prop('useForeignObject') === false
+          ? (this.selectors.content as SVGElement)
+          : (this.selectors.foContent as HTMLDivElement)
+      }
+      confirmUpdate(flag: any) {
+        const ret = super.confirmUpdate(flag)
+        return this.handleAction(ret, action, () => {
+          // 参照VueShapeView进行渲染，修复 #2505
+          Scheduler.scheduleTask(() => {
+            this.renderVueComponent()
+          })
+        })
+      }
+      unmount(elem: Element) {
+        // 基类调用removeView的时候，会自动调用unmount
+        const targetId = this.getTargetId()
+        disconnect(targetId)
+        super.unmount(elem)
+        return this
+      }
+    }
+    VuePortalShapeView.config({
+      bootstrap: [action],
+      actions: {
+        component: action,
+      },
+    })
+
+    NodeView.registry.register(uniqViewId, VuePortalShapeView, true)
+
+    return TeleportContainer
+  }
+  // 如果是vue2就默认输出一个警告信息
+  console.warn('useTeleport should run in vue3')
+  // 或者拿默认的view注册一个，保证这个api是可用状态，不至于用户使用了，但是报错
+  NodeView.registry.register(uniqViewId, VueShapeView, true)
+  return defineComponent(() => null)
+}
+
+export default useTeleport

packages/x6-vue-shape/src/view.ts

@@ -1,7 +1,6 @@
 import { NodeView, Scheduler } from '@antv/x6'
 import { isVue2, isVue3, createApp, h, Vue2 } from 'vue-demi'
 import { VueShape } from './node'
-import { VueComponent } from './registry'
 
 export class VueShapeView extends NodeView<VueShape> {
   private vm: any
@@ -33,31 +32,28 @@ export class VueShapeView extends NodeView<VueShape> {
       const component = this.graph.hook.getVueComponent(node)
       if (isVue2) {
         const Vue = Vue2 as any
-        const div = document.createElement('div')
-        div.style.width = '100%'
-        div.style.height = '100%'
         if (typeof component === 'string') {
-          div.innerHTML = component
-          this.vm = new Vue({ el: div })
+          this.vm = new Vue({ template: component })
         } else {
-          const { template, ...other } = component as VueComponent
-          div.innerHTML = template
           this.vm = new Vue({
-            el: div,
+            render() {
+              // 保留之前的provide，增加传递graph和node
+              return h(component as any, { graph, node } as any)
+            },
             provide() {
               return {
                 getGraph: () => graph,
                 getNode: () => node,
               }
             },
-            ...other,
           })
         }
-        root.appendChild(this.vm.$el)
+        this.vm.$mount(root)
       } else if (isVue3) {
         this.vm = createApp({
           render() {
-            return h(component as any)
+            // 保留之前的provide，增加传递graph和node
+            return h(component as any, { graph, node } as any)
           },
           provide() {
             return {
@@ -73,12 +69,12 @@ export class VueShapeView extends NodeView<VueShape> {
 
   protected unmountVueComponent() {
     const root = this.getComponentContainer()
-    root.innerHTML = ''
     if (this.vm) {
       isVue2 && this.vm.$destroy()
       isVue3 && this.vm.unmount()
       this.vm = null
     }
+    root.innerHTML = ''
     return root
   }
 

packages/x6/CHANGELOG.md

@@ -1,3 +1,83 @@
+## @antv/x6 [1.32.3](https://github.com/antvis/x6/compare/@antv/x6@1.32.2...@antv/x6@1.32.3) (2022-05-31)
+
+
+### Bug Fixes
+
+* :bug: Fixed the error when a node meet an invisiable node in node:embedding event ([#2129](https://github.com/antvis/x6/issues/2129)) ([6ef7f55](https://github.com/antvis/x6/commit/6ef7f55334d9415bce217c9cc5885f1bc084de92))
+
+## @antv/x6 [1.32.2](https://github.com/antvis/x6/compare/@antv/x6@1.32.1...@antv/x6@1.32.2) (2022-05-17)
+
+
+### Bug Fixes
+
+* 🐛 fix minimap error in after resize graph ([#2117](https://github.com/antvis/x6/issues/2117)) ([e1bb928](https://github.com/antvis/x6/commit/e1bb9289b0e5bd8106baaf88e16cbab125c5fc4e))
+
+## @antv/x6 [1.32.1](https://github.com/antvis/x6/compare/@antv/x6@1.32.0...@antv/x6@1.32.1) (2022-05-16)
+
+
+### Bug Fixes
+
+* 🐛 auto zoom minimap graph to fit content ([#2111](https://github.com/antvis/x6/issues/2111)) ([12e3e89](https://github.com/antvis/x6/commit/12e3e8969f35ed14acff16bf62da6ea9012137da))
+
+# @antv/x6 [1.32.0](https://github.com/antvis/x6/compare/@antv/x6@1.31.5...@antv/x6@1.32.0) (2022-05-14)
+
+
+### Features
+
+* ✨ unified minimap interaction between scroller and panning ([#2109](https://github.com/antvis/x6/issues/2109)) ([3c7c06a](https://github.com/antvis/x6/commit/3c7c06ac30b48d563cbfa5dca298789ac6ea1ba2))
+
+## @antv/x6 [1.31.5](https://github.com/antvis/x6/compare/@antv/x6@1.31.4...@antv/x6@1.31.5) (2022-05-09)
+
+
+### Bug Fixes
+
+* :bug: fix the graph function zoomTo not return the graph instance. ([#2090](https://github.com/antvis/x6/issues/2090)) ([692a4ee](https://github.com/antvis/x6/commit/692a4ee1b0c3063580e0e3433922c073cadf1880))
+* 🐛 not rerender tools when edge update ([#2095](https://github.com/antvis/x6/issues/2095)) ([26ce96f](https://github.com/antvis/x6/commit/26ce96f7a20e272b06e5044840d2393815884d87))
+* remove the browserslist configuration in package.json ([#2084](https://github.com/antvis/x6/issues/2084)) ([de59617](https://github.com/antvis/x6/commit/de59617532cb20c0103ac701f44f2d0509b782e0))
+
+## @antv/x6 [1.31.4](https://github.com/antvis/x6/compare/@antv/x6@1.31.3...@antv/x6@1.31.4) (2022-04-21)
+
+
+### Bug Fixes
+
+* 🐛 exclude case-sensitive-attr in kebablizeAttrs ([#2031](https://github.com/antvis/x6/issues/2031)) ([1e513ad](https://github.com/antvis/x6/commit/1e513adfdeee34c833c70eed037d26e28be33594))
+
+## @antv/x6 [1.31.3](https://github.com/antvis/x6/compare/@antv/x6@1.31.2...@antv/x6@1.31.3) (2022-04-09)
+
+
+### Bug Fixes
+
+* fix animationOptions type ([#1989](https://github.com/antvis/x6/issues/1989)) ([5020e92](https://github.com/antvis/x6/commit/5020e92ce8b758d1e7baeb7e3b5035142b3b6186))
+
+## @antv/x6 [1.31.2](https://github.com/antvis/x6/compare/@antv/x6@1.31.1...@antv/x6@1.31.2) (2022-04-09)
+
+
+### Bug Fixes
+
+* 🐛 change copystyle not include number propery when toSvg ([#1985](https://github.com/antvis/x6/issues/1985)) ([214b927](https://github.com/antvis/x6/commit/214b92704d6c6099047597110477809a4e0d900c))
+* 🐛 fix scroller resize size miscalculation when graph resize ([#1977](https://github.com/antvis/x6/issues/1977)) ([e6de636](https://github.com/antvis/x6/commit/e6de6363aea991b1984010cb8f1d90f89a25388a))
+
+## @antv/x6 [1.31.1](https://github.com/antvis/x6/compare/@antv/x6@1.31.0...@antv/x6@1.31.1) (2022-04-05)
+
+
+### Bug Fixes
+
+* 🐛 fix lgtm alert ([#1975](https://github.com/antvis/x6/issues/1975)) ([7440903](https://github.com/antvis/x6/commit/7440903281be9214d8cff7f69c4e44106d751422))
+
+# @antv/x6 [1.31.0](https://github.com/antvis/x6/compare/@antv/x6@1.30.2...@antv/x6@1.31.0) (2022-03-23)
+
+
+### Bug Fixes
+
+* 🐛 change the order of statement ([#1910](https://github.com/antvis/x6/issues/1910)) ([eff14ba](https://github.com/antvis/x6/commit/eff14baca749753a10bde0a81adfd55898cf7215))
+* 🐛 fix cellEditorOptions typo ([#1895](https://github.com/antvis/x6/issues/1895)) ([4d174d7](https://github.com/antvis/x6/commit/4d174d7807463d64ff248fe4ee1e09010bad4bfc))
+
+
+### Features
+
+* ✨ delete the new Function mode to avoid the CSP policy ([#1921](https://github.com/antvis/x6/issues/1921)) ([157b207](https://github.com/antvis/x6/commit/157b2072f35cd7d883eab95b9a874444858758e3))
+* 🐛　support click on the non-text area without adding a new label ([#1894](https://github.com/antvis/x6/issues/1894)) ([4ae1b9e](https://github.com/antvis/x6/commit/4ae1b9ef4f43b9c9f96796c5c5fa31f968b82bdf))
+
 ## @antv/x6 [1.30.2](https://github.com/antvis/x6/compare/@antv/x6@1.30.1...@antv/x6@1.30.2) (2022-03-10)
 
 

packages/x6/README.md

@@ -76,7 +76,7 @@ $ yarn add @antv/x6
 ```ts
 // 从 node_modules 引入
 import { Graph } from '@antv/x6'
-// 从 CND 引入时，我们暴露了 X6 这个全局变量
+// 从 CDN 引入时，我们暴露了 X6 这个全局变量
 // const { Graph } = X6
 
 // 创建 Graph 的实例
@@ -121,7 +121,7 @@ graph.addEdge({
 - [基础教程](https://x6.antv.vision/zh/docs/tutorial/basic/graph)
 - [进阶实践](https://x6.antv.vision/zh/docs/tutorial/intermediate/serialization)
 - [高级指引](https://x6.antv.vision/zh/docs/tutorial/advanced/animation)
-- [更新日志](https://x6.antv.vision/zh/docs/tutorial/log)
+- [更新日志](https://www.yuque.com/antv/x6/xgb04i)
 
 ## 应用案例
 
@@ -165,9 +165,7 @@ graph.addEdge({
 需要注意的是，提问题时请配上 [CodeSandbox](https://codesandbox.io/s/pensive-sound-f4nhc) 的复现代码，方便快速定位和解决问题。
 
 <a href="https://qr.dingtalk.com/action/joingroup?code=v1,k1,rOHuvgq5s0EHDktyyQJffDE3ZAmHnbB2e6iwn/w4BKs=&_dt_no_comment=1&origin=11" target="_blank" rel="noopener noreferrer">
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*Up-4S4v8H-0AAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群1" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*4Y_5S7i26LAAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群2" width="375" />
-  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*KHB4QJAsW4QAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群3" width="375" />
+  <img src="https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*nFa5TaWsSOoAAAAAAAAAAAAAARQnAQ" alt="X6 图可视化交流群4" width="260" />
 </a>
 
 ## 如何开发

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "1.30.2",
+  "version": "1.35.0",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,18 +36,17 @@
     "build:umd": "rollup -c",
     "build:less": "node ./scripts/style",
     "build:readme": "node ./scripts/readme.js",
-    "build:version": "node ../../scripts/version.js",
     "build:csstype": "node ./scripts/csstype.js",
     "build:dev": "run-p build:csstype build:less build:cjs build:esm",
     "build:watch": "yarn build:esm --w",
     "build:watch:esm": "yarn build:esm --w",
     "build:watch:cjs": "yarn build:cjs --w",
-    "build": "run-p build:readme build:version build:dev build:umd",
+    "build": "run-p build:readme build:dev build:umd",
     "prebuild": "run-s lint clean",
     "test": "karma start",
     "coveralls": "cat ./test/coverage/lcov.info | coveralls",
     "pretest": "run-p clean:coverage",
-    "prepare": "run-s build:version test build",
+    "prepare": "run-s test build",
     "precommit": "lint-staged"
   },
   "lint-staged": {
@@ -134,11 +133,6 @@
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
-  "browserslist": [
-    "last 2 versions",
-    "Firefox ESR",
-    "> 1%"
-  ],
   "author": {
     "name": "bubkoo",
     "email": "bubkoo.wy@gmail.com"

packages/x6/src/addon/dnd/index.ts

@@ -73,7 +73,7 @@ export class Dnd extends View {
     this.targetModel.startBatch('dnd')
     this.$container
       .addClass('dragging')
-      .appendTo(this.options.containerParent || document.body)
+      .appendTo(this.options.draggingContainer || document.body)
 
     this.sourceNode = node
     this.prepareDragging(node, e.clientX, e.clientY)
@@ -338,9 +338,15 @@ export class Dnd extends View {
 
   protected isInsideValidArea(p: Point.PointLike) {
     let targetRect: Rectangle
+    let dndRect: Rectangle | null = null
     const targetGraph = this.targetGraph
     const targetScroller = this.targetScroller
 
+    if (this.options.dndContainer) {
+      dndRect = this.getDropArea(this.options.dndContainer)
+    }
+    const isInsideDndRect = dndRect && dndRect.containsPoint(p)
+
     if (targetScroller) {
       if (targetScroller.options.autoResize) {
         targetRect = this.getDropArea(targetScroller.container)
@@ -354,7 +360,7 @@ export class Dnd extends View {
       targetRect = this.getDropArea(targetGraph.container)
     }
 
-    return targetRect && targetRect.containsPoint(p)
+    return !isInsideDndRect && targetRect && targetRect.containsPoint(p)
   }
 
   protected getDropArea(elem: Element) {
@@ -456,7 +462,11 @@ export namespace Dnd {
           duration?: number
           easing?: string
         }
-    containerParent?: HTMLElement
+    draggingContainer?: HTMLElement
+    /**
+     * dnd tool box container.
+     */
+    dndContainer?: HTMLElement
     getDragNode: (sourceNode: Node, options: GetDragNodeOptions) => Node
     getDropNode: (draggingNode: Node, options: GetDropNodeOptions) => Node
     validateNode?: (

packages/x6/src/addon/minimap/index.ts

@@ -2,7 +2,6 @@ import { FunctionExt } from '../../util'
 import { View } from '../../view/view'
 import { Graph } from '../../graph/graph'
 import { EventArgs } from '../../graph/events'
-import { Point } from '../../geometry'
 
 namespace ClassName {
   export const root = 'widget-minimap'
@@ -129,8 +128,9 @@ export class MiniMap extends View {
         this.updateViewport,
       )
     } else {
-      this.sourceGraph.on('translate', this.onSourceGraphTransform, this)
-      this.sourceGraph.on('scale', this.onSourceGraphTransform, this)
+      this.sourceGraph.on('translate', this.onTransform, this)
+      this.sourceGraph.on('scale', this.onTransform, this)
+      this.sourceGraph.on('model:updated', this.onModelUpdated, this)
     }
     this.sourceGraph.on('resize', this.updatePaper, this)
     this.delegateEvents({
@@ -145,8 +145,9 @@ export class MiniMap extends View {
     if (this.scroller) {
       this.$graphContainer.off(this.getEventNamespace())
     } else {
-      this.sourceGraph.off('translate', this.onSourceGraphTransform, this)
-      this.sourceGraph.off('scale', this.onSourceGraphTransform, this)
+      this.sourceGraph.off('translate', this.onTransform, this)
+      this.sourceGraph.off('scale', this.onTransform, this)
+      this.sourceGraph.off('model:updated', this.onModelUpdated, this)
     }
     this.sourceGraph.off('resize', this.updatePaper, this)
     this.undelegateEvents()
@@ -158,17 +159,16 @@ export class MiniMap extends View {
     this.targetGraph.dispose()
   }
 
-  protected onSourceGraphTransform() {
-    if (!this.targetGraphTransforming) {
-      this.updatePaper(
-        this.sourceGraph.options.width,
-        this.sourceGraph.options.height,
-      )
-    } else {
+  protected onTransform(options: { ui: boolean }) {
+    if (options.ui || this.targetGraphTransforming) {
       this.updateViewport()
     }
   }
 
+  protected onModelUpdated() {
+    this.targetGraph.zoomToFit()
+  }
+
   protected updatePaper(width: number, height: number): this
   protected updatePaper({ width, height }: EventArgs['resize']): this
   protected updatePaper(w: number | EventArgs['resize'], h?: number) {
@@ -200,21 +200,26 @@ export class MiniMap extends View {
     height *= ratio // eslint-disable-line
     this.targetGraph.resizeGraph(width, height)
     this.targetGraph.translate(x, y)
-    this.targetGraph.scale(ratio, ratio)
+
+    if (this.scroller) {
+      this.targetGraph.scale(ratio, ratio)
+    } else {
+      this.targetGraph.zoomToFit()
+    }
+
     this.updateViewport()
     return this
   }
 
   protected updateViewport() {
-    const ratio = this.ratio
-    const scale = this.sourceGraph.transform.getScale()
+    const sourceGraphScale = this.sourceGraph.transform.getScale()
+    const targetGraphScale = this.targetGraph.transform.getScale()
 
     let origin = null
     if (this.scroller) {
       origin = this.scroller.clientToLocalPoint(0, 0)
     } else {
-      const ctm = this.sourceGraph.matrix()
-      origin = new Point(-ctm.e / ctm.a, -ctm.f / ctm.d)
+      origin = this.graph.graphToLocal(0, 0)
     }
 
     const position = this.$(this.targetGraph.container).position()
@@ -222,10 +227,14 @@ export class MiniMap extends View {
     translation.ty = translation.ty || 0
 
     this.geometry = {
-      top: position.top + origin.y * ratio + translation.ty,
-      left: position.left + origin.x * ratio + translation.tx,
-      width: (this.$graphContainer.innerWidth()! * ratio) / scale.sx,
-      height: (this.$graphContainer.innerHeight()! * ratio) / scale.sy,
+      top: position.top + origin.y * targetGraphScale.sy + translation.ty,
+      left: position.left + origin.x * targetGraphScale.sx + translation.tx,
+      width:
+        (this.$graphContainer.innerWidth()! * targetGraphScale.sx) /
+        sourceGraphScale.sx,
+      height:
+        (this.$graphContainer.innerHeight()! * targetGraphScale.sy) /
+        sourceGraphScale.sy,
     }
     this.$viewport.css(this.geometry)
   }

packages/x6/src/addon/scroller/index.ts

@@ -346,6 +346,11 @@ export class Scroller extends View {
       const graphHeight = this.graph.options.height
       const pageWidth = this.options.pageWidth! * this.sx
       const pageHeight = this.options.pageHeight! * this.sy
+
+      if (pageWidth === 0 || pageHeight === 0) {
+        return
+      }
+
       if (graphWidth > pageWidth || graphHeight > pageHeight) {
         let hasPageBreak = false
         const container = document.createElement('div')
@@ -396,12 +401,76 @@ export class Scroller extends View {
       gridWidth: this.options.pageWidth,
       gridHeight: this.options.pageHeight,
       allowNewOrigin: 'negative',
+      contentArea: this.calcContextArea(resizeOptions),
       ...resizeOptions,
     }
 
     this.graph.fitToContent(this.getFitToContentOptions(options))
   }
 
+  protected calcContextArea(
+    resizeOptions:
+      | (TransformManager.FitToContentFullOptions & {
+          direction?:
+            | Scroller.AutoResizeDirection
+            | Scroller.AutoResizeDirection[]
+        })
+      | undefined,
+  ) {
+    const direction = resizeOptions?.direction
+
+    if (!direction) {
+      return this.graph.transform.getContentArea(resizeOptions)
+    }
+
+    function getCellBBox(cell: Cell) {
+      let rect = cell.getBBox()
+      if (rect) {
+        if (cell.isNode()) {
+          const angle = cell.getAngle()
+          if (angle != null && angle !== 0) {
+            rect = rect.bbox(angle)
+          }
+        }
+      }
+      return rect
+    }
+
+    const gridWidth = this.options.pageWidth || 1
+    const gridHeight = this.options.pageHeight || 1
+    let calculativeCells = this.graph.getCells()
+
+    if (!direction.includes('top')) {
+      calculativeCells = calculativeCells.filter((cell) => {
+        const bbox = getCellBBox(cell)
+        return bbox.y >= 0
+      })
+    }
+
+    if (!direction.includes('left')) {
+      calculativeCells = calculativeCells.filter((cell) => {
+        const bbox = getCellBBox(cell)
+        return bbox.x >= 0
+      })
+    }
+
+    if (!direction.includes('right')) {
+      calculativeCells = calculativeCells.filter((cell) => {
+        const bbox = getCellBBox(cell)
+        return bbox.x + bbox.width <= gridWidth
+      })
+    }
+
+    if (!direction.includes('bottom')) {
+      calculativeCells = calculativeCells.filter((cell) => {
+        const bbox = getCellBBox(cell)
+        return bbox.y + bbox.height <= gridHeight
+      })
+    }
+
+    return this.model.getCellsBBox(calculativeCells) || new Rectangle()
+  }
+
   protected getFitToContentOptions(
     options: TransformManager.FitToContentFullOptions,
   ) {
@@ -1021,8 +1090,8 @@ export class Scroller extends View {
   }
 
   resize(width?: number, height?: number) {
-    let w = width != null ? width : this.container.clientWidth
-    let h = height != null ? height : this.container.clientHeight
+    let w = width != null ? width : this.container.offsetWidth
+    let h = height != null ? height : this.container.offsetHeight
 
     if (typeof w === 'number') {
       w = Math.round(w)
@@ -1201,17 +1270,25 @@ export namespace Scroller {
      * @deprecated
      */
     fitTocontentOptions?:
-      | TransformManager.FitToContentFullOptions
+      | (TransformManager.FitToContentFullOptions & {
+          direction?: AutoResizeDirection | AutoResizeDirection[]
+        })
       | ((
           this: Scroller,
           scroller: Scroller,
-        ) => TransformManager.FitToContentFullOptions)
+        ) => TransformManager.FitToContentFullOptions & {
+          direction?: AutoResizeDirection | AutoResizeDirection[]
+        })
     autoResizeOptions?:
-      | TransformManager.FitToContentFullOptions
+      | (TransformManager.FitToContentFullOptions & {
+          direction?: AutoResizeDirection | AutoResizeDirection[]
+        })
       | ((
           this: Scroller,
           scroller: Scroller,
-        ) => TransformManager.FitToContentFullOptions)
+        ) => TransformManager.FitToContentFullOptions & {
+          direction?: AutoResizeDirection | AutoResizeDirection[]
+        })
   }
 
   export interface Options extends CommonOptions {
@@ -1258,6 +1335,8 @@ export namespace Scroller {
     visibility?: number
     center?: Point.PointLike
   }
+
+  export type AutoResizeDirection = 'top' | 'right' | 'bottom' | 'left'
 }
 
 export namespace Scroller {

packages/x6/src/addon/selection/index.ts

@@ -125,19 +125,16 @@ export class Selection extends View<Selection.EventArgs> {
     options,
   }: Collection.EventArgs['node:change:position']) {
     const { showNodeSelectionBox, pointerEvents } = this.options
-    const { ui, selection } = options
-    let allowTranslating = !this.translating
+    const { ui, selection, translateBy, snapped } = options
 
-    /* Scenarios where this method is not called:
-     * 1. ShowNodeSelection is true or ponterEvents is none
-     * 2. Avoid circular calls with the selection tag
-     */
-    allowTranslating =
-      allowTranslating &&
-      (showNodeSelectionBox !== true || pointerEvents === 'none')
-    allowTranslating = allowTranslating && ui && !selection
+    const allowTranslating =
+      (showNodeSelectionBox !== true || pointerEvents === 'none') &&
+      !this.translating &&
+      !selection
 
-    if (allowTranslating) {
+    const translateByUi = ui && translateBy && node.id === translateBy
+
+    if (allowTranslating && (translateByUi || snapped)) {
       this.translating = true
       const current = node.position()
       const previous = node.previous('position')!
@@ -289,6 +286,7 @@ export class Selection extends View<Selection.EventArgs> {
       offsetY: y,
       scrollerX: 0,
       scrollerY: 0,
+      moving: false,
     })
 
     this.delegateDocumentEvents(Private.documentEvents, evt.data)
@@ -893,7 +891,7 @@ export class Selection extends View<Selection.EventArgs> {
       added,
       removed,
       options,
-      selected: this.cells,
+      selected: this.cells.filter((cell) => !!this.graph.getCellById(cell.id)),
     }
     this.trigger('selection:changed', args)
     this.graph.trigger('selection:changed', args)

packages/x6/src/addon/snapline/index.less

@@ -12,16 +12,7 @@
 
   &-vertical,
   &-horizontal {
-    position: absolute;
-    opacity: 1;
-    pointer-events: none;
-  }
-
-  &-horizontal {
-    border-bottom: 1px solid #2ecc71;
-  }
-
-  &-vertical {
-    border-right: 1px solid #2ecc71;
+    stroke: #2ecc71;
+    stroke-width: 1px;
   }
 }

packages/x6/src/addon/snapline/index.ts

@@ -1,13 +1,14 @@
-import { ArrayExt, FunctionExt } from '../../util'
 import { IDisablable } from '../../common'
-import { Point, Rectangle, Angle } from '../../geometry'
-import { Node } from '../../model/node'
-import { Model } from '../../model/model'
-import { View } from '../../view/view'
-import { CellView } from '../../view/cell'
-import { NodeView } from '../../view/node'
+import { Angle, Point, Rectangle } from '../../geometry'
 import { Graph } from '../../graph'
 import { EventArgs } from '../../graph/events'
+import { Model } from '../../model/model'
+import { Node } from '../../model/node'
+import { ArrayExt, FunctionExt } from '../../util'
+import { Vector } from '../../util/vector'
+import { CellView } from '../../view/cell'
+import { NodeView } from '../../view/node'
+import { View } from '../../view/view'
 
 export class Snapline extends View implements IDisablable {
   public readonly options: Snapline.Options
@@ -17,9 +18,11 @@ export class Snapline extends View implements IDisablable {
   protected filterFunction: Snapline.FilterFunction | null
   protected offset: Point.PointLike
   protected timer: number | null
-  protected $container: JQuery<HTMLElement>
-  protected $horizontal: JQuery<HTMLElement>
-  protected $vertical: JQuery<HTMLElement>
+
+  public container: SVGElement
+  protected containerWrapper: Vector
+  protected horizontal: Vector
+  protected vertical: Vector
 
   protected get model() {
     return this.graph.model
@@ -43,6 +46,7 @@ export class Snapline extends View implements IDisablable {
     const { graph, ...others } = options
     this.graph = graph
     this.options = { tolerance: 10, ...others }
+    this.offset = { x: 0, y: 0 }
     this.render()
     this.parseFilter()
     if (!this.disabled) {
@@ -79,23 +83,27 @@ export class Snapline extends View implements IDisablable {
   }
 
   protected render() {
-    this.container = document.createElement('div')
-    this.$container = this.$(this.container)
-    this.$horizontal = this.$(document.createElement('div')).addClass(
-      this.horizontalClassName,
-    )
-    this.$vertical = this.$(document.createElement('div')).addClass(
-      this.verticalClassName,
-    )
+    const container = (this.containerWrapper = new Vector('svg'))
+    const horizontal = (this.horizontal = new Vector('line'))
+    const vertical = (this.vertical = new Vector('line'))
 
-    this.$container
-      .hide()
-      .addClass(this.containerClassName)
-      .append([this.$horizontal, this.$vertical])
+    container.addClass(this.containerClassName)
+    horizontal.addClass(this.horizontalClassName)
+    vertical.addClass(this.verticalClassName)
+
+    container.setAttribute('width', '100%')
+    container.setAttribute('height', '100%')
+
+    horizontal.setAttribute('display', 'none')
+    vertical.setAttribute('display', 'none')
+
+    container.append([horizontal, vertical])
 
     if (this.options.className) {
-      this.$container.addClass(this.options.className)
+      container.addClass(this.options.className)
     }
+
+    this.container = this.containerWrapper.node
   }
 
   protected startListening() {
@@ -566,53 +574,47 @@ export class Snapline extends View implements IDisablable {
     horizontalLeft?: number
     horizontalWidth?: number
   }) {
-    const ctm = this.graph.matrix()
-    const sx = ctm.a
-    const sy = ctm.d
-    const tx = ctm.e
-    const ty = ctm.f
-
-    const sharp = this.options.sharp
-    const hasScroller = this.graph.scroller.widget != null
-
+    // https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
     if (metadata.horizontalTop) {
-      this.$horizontal
-        .css({
-          top: metadata.horizontalTop * sy + ty,
-          left: sharp
-            ? metadata.horizontalLeft! * sx + tx
-            : hasScroller
-            ? '-300%'
-            : 0,
-          width: sharp
-            ? metadata.horizontalWidth! * sx
-            : hasScroller
-            ? '700%'
-            : '100%',
-        })
-        .show()
+      const start = this.graph.localToGraph(
+        new Point(metadata.horizontalLeft, metadata.horizontalTop),
+      )
+      const end = this.graph.localToGraph(
+        new Point(
+          metadata.horizontalLeft! + metadata.horizontalWidth!,
+          metadata.horizontalTop,
+        ),
+      )
+      this.horizontal.setAttributes({
+        x1: this.options.sharp ? `${start.x}` : '0',
+        y1: `${start.y}`,
+        x2: this.options.sharp ? `${end.x}` : '100%',
+        y2: `${end.y}`,
+        display: 'inherit',
+      })
     } else {
-      this.$horizontal.hide()
+      this.horizontal.setAttribute('display', 'none')
     }
 
     if (metadata.verticalLeft) {
-      this.$vertical
-        .css({
-          left: metadata.verticalLeft * sx + tx,
-          top: sharp
-            ? metadata.verticalTop! * sy + ty
-            : hasScroller
-            ? '-300%'
-            : 0,
-          height: sharp
-            ? metadata.verticalHeight! * sy
-            : hasScroller
-            ? '700%'
-            : '100%',
-        })
-        .show()
+      const start = this.graph.localToGraph(
+        new Point(metadata.verticalLeft, metadata.verticalTop),
+      )
+      const end = this.graph.localToGraph(
+        new Point(
+          metadata.verticalLeft,
+          metadata.verticalTop! + metadata.verticalHeight!,
+        ),
+      )
+      this.vertical.setAttributes({
+        x1: `${start.x}`,
+        y1: this.options.sharp ? `${start.y}` : '0',
+        x2: `${end.x}`,
+        y2: this.options.sharp ? `${end.y}` : '100%',
+        display: 'inherit',
+      })
     } else {
-      this.$vertical.hide()
+      this.vertical.setAttribute('display', 'none')
     }
 
     this.show()
@@ -626,7 +628,6 @@ export class Snapline extends View implements IDisablable {
   }
 
   show() {
-    this.$container.show()
     this.resetTimer()
     if (this.container.parentNode == null) {
       this.graph.container.appendChild(this.container)
@@ -635,16 +636,18 @@ export class Snapline extends View implements IDisablable {
   }
 
   hide() {
-    this.$container.hide()
     this.resetTimer()
+    this.vertical.setAttribute('display', 'none')
+    this.horizontal.setAttribute('display', 'none')
     const clean = this.options.clean
     const delay = typeof clean === 'number' ? clean : clean !== false ? 3000 : 0
     if (delay > 0) {
       this.timer = window.setTimeout(() => {
-        this.unmount()
+        if (this.container.parentNode !== null) {
+          this.unmount()
+        }
       }, delay)
     }
-
     return this
   }
 

packages/x6/src/addon/transform/index.ts

@@ -436,6 +436,7 @@ export class Transform extends Widget<Transform.Options> {
         if (options.rotateGrid) {
           target = Util.snapToGrid(target, options.rotateGrid)
         }
+        target = Angle.normalize(target)
 
         if (currentAngle !== target) {
           node.rotate(target, { absolute: true })
@@ -520,6 +521,11 @@ export class Transform extends Widget<Transform.Options> {
       }
     }
   }
+
+  protected onRemove() {
+    this.stopListening()
+    super.onRemove()
+  }
 }
 
 export namespace Transform {

packages/x6/src/common/algorithm/priorityqueue.ts

@@ -45,7 +45,7 @@ export class PriorityQueue<T> {
    */
   insert(priority: number, value: T, id?: string) {
     const item: PriorityQueue.DataItem<T> = { priority, value }
-    const index = this.data.length - 1
+    const index = this.data.length
     if (id) {
       item.id = id
       this.index[id] = index
@@ -96,7 +96,9 @@ export class PriorityQueue<T> {
     const data = this.data
     const peek = data[0]
     const last = data.pop()!
-    delete this.index[data.length]
+    if (peek.id) {
+      delete this.index[peek.id]
+    }
 
     if (data.length > 0) {
       data[0] = last

packages/x6/src/global/index.ts

@@ -1,3 +1,2 @@
 export * from './util'
 export * from './config'
-export * from './version'

packages/x6/src/global/track.ts

@@ -1,23 +0,0 @@
-import { Config } from './config'
-import { version } from './version'
-
-function track() {
-  if (Config.trackable) {
-    const host = 'https://kcart.alipay.com/web/bi.do'
-    const img = new Image()
-    const metadata = {
-      ...Config.trackInfo,
-      version,
-      pg: document.URL,
-      r: new Date().getTime(),
-      x6: true,
-      page_type: 'syslog',
-    }
-    const data = encodeURIComponent(JSON.stringify([metadata]))
-    img.src = `${host}?BIProfile=merge&d=${data}`
-  }
-}
-
-if (process.env.NODE_ENV !== 'development' && Config.trackable) {
-  setTimeout(track, 3000)
-}

packages/x6/src/global/version.test.ts

@@ -1,9 +0,0 @@
-import { version } from './version'
-
-describe('version', () => {
-  it('should match the `version` field of package.json', () => {
-    // eslint-disable-next-line
-    const expected = require('../../package.json').version
-    expect(version).toBe(expected)
-  })
-})

packages/x6/src/global/version.ts

@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/**
- * Auto generated version file, do not modify it!
- */
-const version = '1.30.2'
-export { version }

packages/x6/src/graph/clipboard.ts

@@ -47,6 +47,7 @@ export class ClipboardManager extends Base implements IDisablable {
         ...this.commonOptions,
         ...options,
       })
+      this.graph.trigger('clipboard:changed', { cells })
     }
   }
 
@@ -56,6 +57,7 @@ export class ClipboardManager extends Base implements IDisablable {
         ...this.commonOptions,
         ...options,
       })
+      this.graph.trigger('clipboard:changed', { cells })
     }
   }
 
@@ -72,6 +74,7 @@ export class ClipboardManager extends Base implements IDisablable {
   clean(force?: boolean) {
     if (!this.disabled || force) {
       this.widget.clean()
+      this.graph.trigger('clipboard:changed', { cells: [] })
     }
   }
 
@@ -86,6 +89,12 @@ export class ClipboardManager extends Base implements IDisablable {
 }
 
 export namespace ClipboardManager {
+  export interface ClipboardEventArgs {
+    'clipboard:changed': {
+      cells: Cell[]
+    }
+  }
+
   export interface Options extends Clipboard.Options {
     enabled?: boolean
   }

packages/x6/src/graph/events.ts

@@ -1,6 +1,7 @@
 import { Model } from '../model'
 import { CellView } from '../view'
 import { Selection } from '../addon/selection'
+import { ClipboardManager } from './clipboard'
 import { Renderer } from './renderer'
 
 interface CommonEventArgs<E> {
@@ -15,7 +16,8 @@ interface PositionEventArgs<E> extends CommonEventArgs<E> {
 export interface EventArgs
   extends Omit<Model.EventArgs, 'sorted' | 'updated' | 'reseted'>,
     CellView.EventArgs,
-    Selection.SelectionEventArgs {
+    Selection.SelectionEventArgs,
+    ClipboardManager.ClipboardEventArgs {
   'model:sorted'?: Model.EventArgs['sorted']
   'model:updated': Model.EventArgs['updated']
   'model:reseted': Model.EventArgs['reseted']

packages/x6/src/graph/format.ts

@@ -109,8 +109,9 @@ export class FormatManager extends Base {
 
         Object.keys(computedStyle).forEach((property) => {
           if (
+            !NumberExt.isNumeric(property) &&
             computedStyle.getPropertyValue(property) !==
-            defaultComputedStyle[property]
+              defaultComputedStyle[property]
           ) {
             customStyle[property] = computedStyle.getPropertyValue(property)
           }

packages/x6/src/graph/graph.ts

@@ -691,6 +691,8 @@ export class Graph extends Basecoat<EventArgs> {
     } else {
       this.transform.zoom(factor, { ...options, absolute: true })
     }
+
+    return this
   }
 
   zoomToRect(

packages/x6/src/graph/history.ts

@@ -204,7 +204,7 @@ export class HistoryManager
       (Util.isAddEvent(event) && revert) ||
       (Util.isRemoveEvent(event) && !revert)
     ) {
-      cell.remove(options)
+      cell && cell.remove(options)
     } else if (
       (Util.isAddEvent(event) && !revert) ||
       (Util.isRemoveEvent(event) && revert)
@@ -218,7 +218,7 @@ export class HistoryManager
     } else if (Util.isChangeEvent(event)) {
       const data = cmd.data as HistoryManager.ChangingData
       const key = data.key
-      if (key) {
+      if (key && cell) {
         const value = revert ? data.prev[key] : data.next[key]
         cell.prop(key, value, options)
       }
@@ -398,6 +398,7 @@ export class HistoryManager
       if (cmds.length > 0) {
         this.redoStack = []
         this.undoStack.push(cmds)
+        this.consolidateCommands()
         this.notify('add', cmds, options)
       }
       this.batchCommands = null
@@ -469,9 +470,66 @@ export class HistoryManager
       this.emit('batch', { cmd, options })
     } else {
       this.undoStack.push(cmd)
+      this.consolidateCommands()
       this.notify('add', cmd, options)
     }
   }
+
+  /**
+   * Conditionally combine multiple undo items into one.
+   *
+   * Currently this is only used combine a `cell:changed:position` event
+   * followed by multiple `cell:change:parent` and `cell:change:children`
+   * events, such that a "move + embed" action can be undone in one step.
+   *
+   * See https://github.com/antvis/X6/issues/2421
+   *
+   * This is an ugly WORKAROUND. It does not solve deficiencies in the batch
+   * system itself.
+   */
+  private consolidateCommands() {
+    const lastCommandGroup = this.undoStack[this.undoStack.length - 1]
+    const penultimateCommandGroup = this.undoStack[this.undoStack.length - 2]
+
+    // We are looking for at least one cell:change:parent
+    // and one cell:change:children
+    if (!Array.isArray(lastCommandGroup)) {
+      return
+    }
+    const eventTypes = new Set(lastCommandGroup.map((cmd) => cmd.event))
+    if (
+      eventTypes.size !== 2 ||
+      !eventTypes.has('cell:change:parent') ||
+      !eventTypes.has('cell:change:children')
+    ) {
+      return
+    }
+
+    // We are looking for events from user interactions
+    if (!lastCommandGroup.every((cmd) => cmd.batch && cmd.options?.ui)) {
+      return
+    }
+
+    // We are looking for a command group with exactly one event, whose event
+    // type is cell:change:position, and is from user interactions
+    if (
+      !Array.isArray(penultimateCommandGroup) ||
+      penultimateCommandGroup.length !== 1
+    ) {
+      return
+    }
+    const maybePositionChange = penultimateCommandGroup[0]
+    if (
+      maybePositionChange.event !== 'cell:change:position' ||
+      !maybePositionChange.options?.ui
+    ) {
+      return
+    }
+
+    // Actually consolidating the commands we get
+    penultimateCommandGroup.push(...lastCommandGroup)
+    this.undoStack.pop()
+  }
 }
 
 export namespace HistoryManager {