chore(release): 🚀 publish

- @antv/x6-react-components@1.1.19
 - @antv/x6-react-shape@1.6.3
 - @antv/x6-vue-shape@1.5.3
 - @antv/x6@1.34.3

.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,24 @@ 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>
 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 +80,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/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/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 } } })
   }
 

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": "yarn build:dev && lerna publish --no-private --ignore-scripts"
   },
   "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.1",
   "description": "X6 shape for rendering angular components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -54,7 +54,7 @@
   "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.12",
   "name": "@antv/x6-geometry",
   "description": "Some useful geometry operations.",
   "main": "lib/index.js",
@@ -91,11 +91,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/version.ts

@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '1.0.8'
+const version = '1.0.12'
 export { version }

packages/x6-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-components",
-  "version": "1.1.16",
+  "version": "1.1.19",
   "description": "React components for building x6 editors",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -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-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-shape",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "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",

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

@@ -57,30 +57,6 @@ 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)
     this.unmountReactComponent()

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.0",
   "name": "@antv/x6-vector",
   "description": "Lightweight library for manipulating and animating SVG.",
   "main": "lib/index.js",
@@ -103,11 +103,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.ts

@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '1.3.0'
+const version = '1.4.0'
 export { version }

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.3",
   "description": "X6 shape for rendering vue components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,7 +45,7 @@
     "@antv/x6-package-json/rollup.json"
   ],
   "dependencies": {
-    "vue-demi": "^0.7.4"
+    "vue-demi": "latest"
   },
   "peerDependencies": {
     "@antv/x6": ">=1.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.34.3",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -134,11 +134,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

@@ -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) {
@@ -457,6 +463,10 @@ export namespace Dnd {
           easing?: string
         }
     containerParent?: 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,7 +125,7 @@ export class Selection extends View<Selection.EventArgs> {
     options,
   }: Collection.EventArgs['node:change:position']) {
     const { showNodeSelectionBox, pointerEvents } = this.options
-    const { ui, selection } = options
+    const { ui, selection, translateBy } = options
     let allowTranslating = !this.translating
 
     /* Scenarios where this method is not called:
@@ -137,6 +137,10 @@ export class Selection extends View<Selection.EventArgs> {
       (showNodeSelectionBox !== true || pointerEvents === 'none')
     allowTranslating = allowTranslating && ui && !selection
 
+    // Avoid circular calls of child nodes
+    allowTranslating =
+      allowTranslating && translateBy && node.id === translateBy
+
     if (allowTranslating) {
       this.translating = true
       const current = node.position()
@@ -289,6 +293,7 @@ export class Selection extends View<Selection.EventArgs> {
       offsetY: y,
       scrollerX: 0,
       scrollerY: 0,
+      moving: false,
     })
 
     this.delegateDocumentEvents(Private.documentEvents, evt.data)
@@ -893,7 +898,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 })

packages/x6/src/global/version.ts

@@ -3,5 +3,5 @@
 /**
  * Auto generated version file, do not modify it!
  */
-const version = '1.30.2'
+const version = '1.34.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

@@ -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 {

packages/x6/src/graph/hook.ts

@@ -553,12 +553,12 @@ export class Hook extends Base implements Hook.IHook {
       }
     }
 
-    if (valid && allowNode != null) {
+    // When judging nodes, the influence of the ports should be excluded,
+    // because the ports and nodes have the same terminalView
+    if (valid && allowNode != null && terminalMagnet == null) {
       if (typeof allowNode === 'boolean') {
-        if (!allowNode && terminalView != null) {
-          if (NodeView.isNodeView(terminalView) && terminalMagnet == null) {
-            valid = false
-          }
+        if (!allowNode && NodeView.isNodeView(terminalView)) {
+          valid = false
         }
       } else {
         valid = doValidate(allowNode)

packages/x6/src/graph/keyboard.ts

@@ -106,8 +106,13 @@ export class Keyboard extends Disposable implements IDisablable {
 
   protected isGraphEvent(e: KeyboardEvent) {
     const target = (e.srcElement || e.target) as Element
+    const currentTarget = e.currentTarget as Element
     if (target) {
-      if (target === this.target || target === document.body) {
+      if (
+        target === this.target ||
+        currentTarget === this.target ||
+        target === document.body
+      ) {
         return true
       }
 
@@ -119,8 +124,8 @@ export class Keyboard extends Disposable implements IDisablable {
 
   isInputEvent(e: KeyboardEvent | JQuery.MouseUpEvent) {
     const target = e.target as Element
-    const tagName = target && target.tagName.toLowerCase()
-    return tagName === 'input'
+    const tagName = target?.tagName?.toLowerCase()
+    return ['input', 'textarea'].includes(tagName)
   }
 
   isEnabledForEvent(e: KeyboardEvent) {

packages/x6/src/graph/mousewheel.ts

@@ -135,14 +135,17 @@ export class MouseWheel extends Disposable implements IDisablable {
           } else {
             scroller.zoom(targetScale, { absolute: true })
           }
-        } else if (this.options.zoomAtMousePosition) {
-          const origin = this.graph.coord.clientToGraphPoint(this.startPos)
-          this.graph.zoom(targetScale, {
-            absolute: true,
-            center: origin.clone(),
-          })
         } else {
-          this.graph.zoom(targetScale, { absolute: true })
+          if (this.options.zoomAtMousePosition) {
+            const origin = this.graph.coord.clientToGraphPoint(this.startPos)
+            this.graph.transform.zoom(targetScale, {
+              absolute: true,
+              center: origin.clone(),
+              ui: true,
+            })
+          } else {
+            this.graph.transform.zoom(targetScale, { absolute: true, ui: true })
+          }
         }
       }
       this.currentScale = null

packages/x6/src/graph/options.ts

@@ -130,7 +130,9 @@ export namespace Options {
     /**
      * Prevent the default context menu from being displayed.
      */
-    preventDefaultContextMenu: boolean
+    preventDefaultContextMenu:
+      | boolean
+      | ((this: Graph, { view }: { view: CellView | null }) => boolean)
 
     preventDefaultDblClick: boolean
 
@@ -731,6 +733,7 @@ export namespace Options {
       rubberEdge: false, // next version will set to true
       pointerEvents: 'auto',
       multiple: true,
+      multipleSelectionModifiers: ['ctrl', 'meta'],
       movable: true,
       strict: false,
       useCellGeometry: false,

packages/x6/src/graph/panning.ts

@@ -102,7 +102,10 @@ export class PanningManager extends Base {
     const dy = e.clientY - this.clientY
     this.clientX = e.clientX
     this.clientY = e.clientY
-    this.graph.translateBy(dx, dy)
+    const ts = this.graph.transform.getTranslation()
+    const tx = ts.tx + dx
+    const ty = ts.ty + dy
+    this.graph.transform.translate(tx, ty, { ui: true })
   }
 
   // eslint-disable-next-line

packages/x6/src/graph/renderer.ts

@@ -162,6 +162,8 @@ export class Renderer extends Base {
     if (visible) {
       this.processEdgeOnTerminalVisibleChanged(cell, true)
     }
+
+    // this.sortViews()
   }
 
   protected processEdgeOnTerminalVisibleChanged(node: Cell, visible: boolean) {

packages/x6/src/graph/selection.ts

@@ -76,6 +76,13 @@ export class SelectionManager extends Base {
     )
   }
 
+  allowMultipleSelection(e: JQuery.MouseDownEvent | JQuery.MouseUpEvent) {
+    return (
+      this.isMultiple() &&
+      ModifierKey.isMatch(e, this.widgetOptions.multipleSelectionModifiers)
+    )
+  }
+
   protected onCellMouseMove({ cell }: EventArgs['cell:mousemove']) {
     this.movedMap.set(cell, true)
   }
@@ -96,7 +103,7 @@ export class SelectionManager extends Base {
     }
 
     if (!disabled) {
-      if (options.multiple === false || (!e.ctrlKey && !e.metaKey)) {
+      if (!this.allowMultipleSelection(e)) {
         this.reset(cell)
       } else if (this.unselectMap.has(cell)) {
         this.unselectMap.delete(cell)
@@ -112,7 +119,7 @@ export class SelectionManager extends Base {
 
   protected onBoxMouseDown({ e, cell }: Selection.EventArgs['box:mousedown']) {
     if (!this.disabled) {
-      if (this.widgetOptions.multiple !== false && (e.ctrlKey || e.metaKey)) {
+      if (this.allowMultipleSelection(e)) {
         this.unselect(cell)
         this.unselectMap.set(cell, true)
       }
@@ -256,6 +263,7 @@ export namespace SelectionManager {
     rubberband?: boolean
     modifiers?: string | ModifierKey[] | null
     multiple?: boolean
+    multipleSelectionModifiers?: string | ModifierKey[] | null
     selectCellOnMoved?: boolean
     selectNodeOnMoved?: boolean
     selectEdgeOnMoved?: boolean

packages/x6/src/graph/transform.ts

@@ -136,7 +136,13 @@ export class TransformManager extends Base {
     return Dom.matrixToScale(this.getMatrix())
   }
 
-  scale(sx: number, sy: number = sx, ox = 0, oy = 0) {
+  scale(
+    sx: number,
+    sy: number = sx,
+    ox = 0,
+    oy = 0,
+    options: TransformManager.TransformOptions = {},
+  ) {
     sx = this.clampScale(sx) // eslint-disable-line
     sy = this.clampScale(sy) // eslint-disable-line
 
@@ -154,7 +160,7 @@ export class TransformManager extends Base {
     matrix.d = sy
 
     this.setMatrix(matrix)
-    this.graph.trigger('scale', { sx, sy, ox, oy })
+    this.graph.trigger('scale', { sx, sy, ox, oy, ...options })
     return this
   }
 
@@ -167,7 +173,10 @@ export class TransformManager extends Base {
     return this.getScale().sx
   }
 
-  zoom(factor: number, options?: TransformManager.ZoomOptions) {
+  zoom(
+    factor: number,
+    options?: TransformManager.ZoomOptions & TransformManager.TransformOptions,
+  ) {
     options = options || {} // eslint-disable-line
 
     let sx = factor
@@ -210,11 +219,11 @@ export class TransformManager extends Base {
       const tx = cx - (cx - ts.tx) * (sx / scale.sx)
       const ty = cy - (cy - ts.ty) * (sy / scale.sy)
       if (tx !== ts.tx || ty !== ts.ty) {
-        this.translate(tx, ty)
+        this.translate(tx, ty, { ui: options.ui })
       }
     }
 
-    this.scale(sx, sy)
+    this.scale(sx, sy, 0, 0, { ui: options.ui })
 
     return this
   }
@@ -242,7 +251,11 @@ export class TransformManager extends Base {
     return Dom.matrixToTranslation(this.getMatrix())
   }
 
-  translate(tx: number, ty: number) {
+  translate(
+    tx: number,
+    ty: number,
+    options: TransformManager.TransformOptions = {},
+  ) {
     const matrix = this.getMatrix()
     matrix.e = tx || 0
     matrix.f = ty || 0
@@ -250,7 +263,7 @@ export class TransformManager extends Base {
     const ts = this.getTranslation()
     this.options.x = ts.tx
     this.options.y = ts.ty
-    this.graph.trigger('translate', { ...ts })
+    this.graph.trigger('translate', { ...ts, ...options })
     return this
   }
 
@@ -594,6 +607,9 @@ export class TransformManager extends Base {
 }
 
 export namespace TransformManager {
+  export interface TransformOptions {
+    ui?: boolean
+  }
   export interface FitToContentOptions extends GetContentAreaOptions {
     minWidth?: number
     minHeight?: number

packages/x6/src/graph/view.ts

@@ -139,13 +139,30 @@ export class GraphView extends View {
     }
   }
 
+  protected isPreventDefaultContextMenu(
+    evt: JQuery.ContextMenuEvent,
+    view: CellView | null,
+  ) {
+    let preventDefaultContextMenu = this.options.preventDefaultContextMenu
+    if (typeof preventDefaultContextMenu === 'function') {
+      preventDefaultContextMenu = FunctionExt.call(
+        preventDefaultContextMenu,
+        this.graph,
+        { view },
+      )
+    }
+
+    return preventDefaultContextMenu
+  }
+
   protected onContextMenu(evt: JQuery.ContextMenuEvent) {
-    if (this.options.preventDefaultContextMenu) {
+    const e = this.normalizeEvent(evt)
+    const view = this.findView(e.target)
+
+    if (this.isPreventDefaultContextMenu(e, view)) {
       evt.preventDefault()
     }
 
-    const e = this.normalizeEvent(evt)
-    const view = this.findView(e.target)
     if (this.guard(e, view)) {
       return
     }
@@ -201,7 +218,10 @@ export class GraphView extends View {
     if (view) {
       view.onMouseDown(e, localPoint.x, localPoint.y)
     } else {
-      if (this.options.preventDefaultBlankAction) {
+      if (
+        this.options.preventDefaultBlankAction &&
+        ['touchstart'].includes(e.type)
+      ) {
         e.preventDefault()
       }
 
@@ -470,8 +490,11 @@ export class GraphView extends View {
     })
   }
 
-  protected onMagnetContextMenu(e: JQuery.ContextMenuEvent) {
-    if (this.options.preventDefaultContextMenu) {
+  protected onMagnetContextMenu(evt: JQuery.ContextMenuEvent) {
+    const e = this.normalizeEvent(evt)
+    const view = this.findView(e.target)
+
+    if (this.isPreventDefaultContextMenu(e, view)) {
       e.preventDefault()
     }
     this.handleMagnetEvent(e, (view, e, magnet, x, y) => {

packages/x6/src/model/edge.ts

@@ -1099,7 +1099,7 @@ export namespace Edge {
     port?: string
   }
 
-  export type TerminalData = TerminalPointData | TerminalCellData
+  export type TerminalData = TerminalPointData | TerminalCellLooseData
 
   export function equalTerminals(a: TerminalData, b: TerminalData) {
     const a1 = a as TerminalCellData

packages/x6/src/model/model.ts

@@ -159,27 +159,31 @@ export class Model extends Basecoat<Model.EventArgs> {
 
   protected onEdgeTerminalChanged(edge: Edge, type: Edge.TerminalType) {
     const ref = type === 'source' ? this.outgoings : this.incomings
-    const prev = edge.previous<Edge.TerminalCellData>(type)
+    const prev = edge.previous<Edge.TerminalCellLooseData>(type)
 
     if (prev && prev.cell) {
-      const cache = ref[prev.cell]
+      const cellId = Cell.isCell(prev.cell) ? prev.cell.id : prev.cell
+      const cache = ref[cellId]
       const index = cache ? cache.indexOf(edge.id) : -1
       if (index >= 0) {
         cache.splice(index, 1)
         if (cache.length === 0) {
-          delete ref[prev.cell]
+          delete ref[cellId]
         }
       }
     }
 
-    const terminal = edge.getTerminal(type) as Edge.TerminalCellData
+    const terminal = edge.getTerminal(type) as Edge.TerminalCellLooseData
     if (terminal && terminal.cell) {
-      const cache = ref[terminal.cell] || []
+      const terminalId = Cell.isCell(terminal.cell)
+        ? terminal.cell.id
+        : terminal.cell
+      const cache = ref[terminalId] || []
       const index = cache.indexOf(edge.id)
       if (index === -1) {
         cache.push(edge.id)
       }
-      ref[terminal.cell] = cache
+      ref[terminalId] = cache
     }
   }
 

packages/x6/src/registry/attr/connection.ts

@@ -9,24 +9,44 @@ export const connection: Attr.Definition = {
   qualify: isEdgeView,
   set(val, args) {
     const view = args.view as EdgeView
+    const reverse = ((val as any).reverse || false) as boolean
     const stubs = ((val as any).stubs || 0) as number
     let d
     if (Number.isFinite(stubs) && stubs !== 0) {
-      let offset
-      if (stubs < 0) {
-        const len = view.getConnectionLength() || 0
-        offset = (len + stubs) / 2
-      } else {
-        offset = stubs
-      }
-
-      const path = view.getConnection()
-      if (path) {
-        const sourceParts = path.divideAtLength(offset)
-        const targetParts = path.divideAtLength(-offset)
-        if (sourceParts && targetParts) {
-          d = `${sourceParts[0].serialize()} ${targetParts[1].serialize()}`
+      if (!reverse) {
+        let offset
+        if (stubs < 0) {
+          const len = view.getConnectionLength() || 0
+          offset = (len + stubs) / 2
+        } else {
+          offset = stubs
         }
+
+        const path = view.getConnection()
+        if (path) {
+          const sourceParts = path.divideAtLength(offset)
+          const targetParts = path.divideAtLength(-offset)
+          if (sourceParts && targetParts) {
+            d = `${sourceParts[0].serialize()} ${targetParts[1].serialize()}`
+          }
+        }
+      } else {
+        let offset
+        let length
+        const len = view.getConnectionLength() || 0
+        if (stubs < 0) {
+          offset = (len + stubs) / 2
+          length = -stubs
+        } else {
+          offset = stubs
+          length = len - stubs * 2
+        }
+
+        const path = view.getConnection()
+        d = path
+          ?.divideAtLength(offset)?.[1]
+          ?.divideAtLength(length)?.[0]
+          ?.serialize()
       }
     }
 

packages/x6/src/registry/router/manhattan/obstacle-map.ts

@@ -76,9 +76,11 @@ export class ObstacleMap {
       const excludeShapes = options.excludeShapes
       const excType = shape ? excludeShapes.includes(shape) : false
       const excTerminal = excludedTerminals.some((cell) => cell.id === node.id)
+      const excNode = options.excludeNodes.includes(node)
       const excAncestor = excludedAncestors.includes(node.id)
       const excHidden = options.excludeHiddenNodes && !node.isVisible()
-      const excluded = excType || excTerminal || excAncestor || excHidden
+      const excluded =
+        excType || excTerminal || excNode || excAncestor || excHidden
 
       if (!excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)

packages/x6/src/registry/router/manhattan/options.ts

@@ -1,6 +1,6 @@
 import { NumberExt } from '../../../util'
 import { Point, Rectangle, Angle } from '../../../geometry'
-import { Edge } from '../../../model'
+import { Edge, Node } from '../../../model'
 import { EdgeView } from '../../../view'
 import { orth } from '../orth'
 import { Router } from '../index'
@@ -46,6 +46,11 @@ export interface ResolvedOptions {
    */
   excludeShapes: string[]
 
+  /**
+   * Should certain nodes not be considered as obstacles?
+   */
+  excludeNodes: Node[]
+
   /**
    * Should certain hidden nodes not be considered as obstacles?
    */
@@ -141,6 +146,7 @@ export const defaults: ManhattanRouterOptions = {
   perpendicular: true,
   excludeTerminals: [],
   excludeShapes: [], // ['text']
+  excludeNodes: [],
   excludeHiddenNodes: false,
   startDirections: ['top', 'right', 'bottom', 'left'],
   endDirections: ['top', 'right', 'bottom', 'left'],
@@ -221,7 +227,7 @@ export function resolveOptions(options: ManhattanRouterOptions) {
 
   if (result.padding) {
     const sides = NumberExt.normalizeSides(result.padding)
-    options.paddingBox = {
+    result.paddingBox = {
       x: -sides.left,
       y: -sides.top,
       width: sides.left + sides.right,

packages/x6/src/registry/tool/button.ts

@@ -80,10 +80,12 @@ export class Button extends ToolsView.ToolItem<
     let tangent
     let position
     let angle
-    if (NumberExt.isPercentage(distance)) {
-      tangent = view.getTangentAtRatio(parseFloat(distance) / 100)
+
+    const d = NumberExt.normalizePercentage(distance, 1)
+    if (d >= 0 && d <= 1) {
+      tangent = view.getTangentAtRatio(d)
     } else {
-      tangent = view.getTangentAtLength(distance)
+      tangent = view.getTangentAtLength(d)
     }
 
     if (tangent) {