chore(deps-dev): bump webpack from 5.76.2 to 5.94.0

Bumps [webpack](https://github.com/webpack/webpack) from 5.76.2 to 5.94.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.76.2...v5.94.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.npmrc

@@ -1,2 +1,2 @@
-registry=https://registry.npm.taobao.org
-strict-peer-dependencies=false
+registry=https://registry.npmmirror.com
+strict-peer-dependencies=false

CONTRIBUTORS

@@ -1,33 +1,44 @@
 91jojo <jstxhl@live.com>
 @thinkinggis <lzx199065@gmail.com>
+Aflext Yang <aflext@gmail.com>
 BARM <284942955@qq.com>
 CJrZhang <39872522+CJrZhang@users.noreply.github.com>
 Candy <563378816@qq.com>
 Chaoqi ZHANG <prncoprs@163.com>
 Clifford Fajardo <cliffordfajardo@users.noreply.github.com>
 DaiGang <42136433+daigang666@users.noreply.github.com>
+David <36500514+qiufeihong2018@users.noreply.github.com>
 Dong <48054715+halodong@users.noreply.github.com>
 Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
+Frank William <65594180+ai-qing-hai@users.noreply.github.com>
+Gomi <gxy880520@qq.com>
 Gossypol <31892817+gossypol@users.noreply.github.com>
 HQidea <HQidea@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
+Indigo-w <59961969+Indigo-w@users.noreply.github.com>
 Indomi <indomi126@gmail.com>
 JackyChen02 <70377567+JackyChen02@users.noreply.github.com>
 James Tsang <wtzeng1@gmail.com>
 JasonSun <42314340+LolipopJ@users.noreply.github.com>
+Jie <51285767+DimplesY@users.noreply.github.com>
+Jimwan <897527394@qq.com>
 Jinxing Lin <172601673@qq.com>
 Jógvan Olsen <jogvanolsen@hotmail.com>
 Ken Geis <geis.ken@gmail.com>
 Kent Wood <minzojian@hotmail.com>
+KevinXi <48853785+Sorryhx@users.noreply.github.com>
 Ko.Rei <32183014+Ko-Rei@users.noreply.github.com>
+LNAhri <lukas@lukas-craft.de>
+Libin Song <songlibin1994@gmail.com>
 Limbo <49612796+JUST-Limbo@users.noreply.github.com>
 Lixu <37231473+wflixu@users.noreply.github.com>
 Lloyd Zhou <lloydzhou@users.noreply.github.com>
 Lyn <47809781+lyn-boyu@users.noreply.github.com>
 MOMO <329053928@qq.com>
 Mingfei <az8641683@163.com>
+Mingfei Ding <35296199+aMoonkin@users.noreply.github.com>
 MrMengJ <2646973632@qq.com>
 Naveen <172697+naveensrinivasan@users.noreply.github.com>
 NewByVector <NewByVector@users.noreply.github.com>
@@ -49,6 +60,7 @@ WBbug <1056342711@qq.com>
 XLZY <1017866168@qq.com>
 Xia Wenqi <xiawenqi90@gmail.com>
 Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
+Yue JIN <40021217+kingyue737@users.noreply.github.com>
 Zhenyu Hou <skyking_H@hotmail.com>
 _XiaoTian <istianlei@qq.com>
 aimagic <40253639+aimagic@users.noreply.github.com>
@@ -58,14 +70,19 @@ breezefaith <nyzhangzc@qq.com>
 bubkoo <bubkoo.wy@gmail.com>
 bubkoo <bubkoo@users.noreply.github.com>
 budlion <dongqi.ldq@alibaba-inc.com>
+chenBoy <129058082+myBoringCode@users.noreply.github.com>
 cuidong626 <cuidong1234@outlook.com>
+cyrilluce <cyrilluce@gmail.com>
 daigang <1210242662@qq.com>
 doublewu <592581554@qq.com>
+fang-ng4 <907648506@qq.com>
+hylerrix <hylerrix@gmail.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>
+leondt <168417370+leondt1@users.noreply.github.com>
 lijing666 <lijing241@yeah.net>
 linkun <33945539+linkun-wang@users.noreply.github.com>
 linkun <linkun0922@163.com>
@@ -73,6 +90,7 @@ lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
 lvhuiyang <ilvhuiyang@gmail.com>
+markliao <liaodalin19903@126.com>
 myzxlin <myzxlin@163.com>
 newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
@@ -96,12 +114,16 @@ wtzeng1 <wtzeng1@gmail.com>
 x6-bot <x6-bot@users.noreply.github.com>
 xrkffgg <xrkffgg@gmail.com>
 yaojin2070 <48686959+yaojin2070@users.noreply.github.com>
+yinhf <yinhangfeng@gmail.com>
+yuxuan-ctrl <83435945+yuxuan-ctrl@users.noreply.github.com>
 zdc1111 <39116292+zdc1111@users.noreply.github.com>
 zzyyu <33147972+zzyyu@users.noreply.github.com>
 €alix <qq287649920@gmail.com>
 一纸忘忧 <54543761+ikxin@users.noreply.github.com>
 九思⚡⚡⚡ <2228429150@qq.com>
+云剪者 <584518260@qq.com>
 何腾飞 <avrin.live.cn@outlook.com>
+你捉不到的this <2228429150@qq.com>
 依枫 <deng25st@163.com>
 偏右 <afc163@gmail.com>
 大卫 <36500514+qiufeihong2018@users.noreply.github.com>
@@ -109,6 +131,8 @@ zzyyu <33147972+zzyyu@users.noreply.github.com>
 崖 <bubkoo.wy@gmail.com>
 崖崖崖 <bubkoo.wy@gmail.com>
 张子睿 <411489774@qq.com>
+徒言 <chaimaoyuan@foxmail.com>
+德布罗煜 <1056317718@qq.com>
 文瑀 <wenyu.jqq@antfin.com>
 映月 <38279397+orientMoon@users.noreply.github.com>
 杨凌 <89915256@qq.com>
@@ -116,6 +140,7 @@ zzyyu <33147972+zzyyu@users.noreply.github.com>
 粑粑超 <842486229@qq.com>
 練氣士 <62411296+hongfaqiu@users.noreply.github.com>
 诸岳 <dengfuping_private@163.com>
+迷悟 <1010953107@qq.com>
 金强强 <wenyu.jqq@antfin.com>
 问崖 <bubkoo.wy@gmail.com>
 问崖 <pengxingjian.pxj@antfin.com>

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2023 Alipay.inc
+Copyright (c) 2021-2024 Alipay.inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

examples/x6-example-features/CHANGELOG.md

@@ -1,112 +0,0 @@
-## @antv/x6-example-features [2.1.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.1.0...@antv/x6-example-features@2.1.1) (2023-02-18)
-
-### Bug Fixes
-
-- mindmap demo duplicate node id, close [#3256](https://github.com/antvis/X6/issues/3256) ([#3257](https://github.com/antvis/X6/issues/3257)) ([c510756](https://github.com/antvis/X6/commit/c510756fe4e96c8e7471c2fb558e6019ec69b057))
-
-# @antv/x6-example-features [2.1.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.3...@antv/x6-example-features@2.1.0) (2023-02-17)
-
-### Features
-
-- history add max stack size ([#3253](https://github.com/antvis/X6/issues/3253)) ([fba5310](https://github.com/antvis/X6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
-
-## @antv/x6-example-features [2.0.2](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.1...@antv/x6-example-features@2.0.2) (2023-01-17)
-
-### Bug Fixes
-
-- **mindmap demo:** can not find target id when create edge ([#3144](https://github.com/antvis/X6/issues/3144)) ([bfc8d7f](https://github.com/antvis/X6/commit/bfc8d7f17ac900f70b696c1fa7a3f3f3a389103f))
-
-## @antv/x6-example-features [2.0.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.0...@antv/x6-example-features@2.0.1) (2022-12-16)
-
-### Bug Fixes
-
-- make resizing options take effect ([#3014](https://github.com/antvis/X6/issues/3014)) ([604c024](https://github.com/antvis/X6/commit/604c0244cd71ec8e911754dfe524f12c04e4e9ad))
-
-# @antv/x6-example-features [2.0.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@1.1.2...@antv/x6-example-features@2.0.0) (2022-11-24)
-
-### Bug Fixes
-
-- 🐛 add return value for autoScroller in scroller plugin ([5e102a3](https://github.com/antvis/X6/commit/5e102a39c5bd14a478edd4f36c4264997027c2a9))
-- 🐛 add timeout for schedule ([#2303](https://github.com/antvis/X6/issues/2303)) ([a6a2d12](https://github.com/antvis/X6/commit/a6a2d12b07add27ef19eebbf7b5ca7cd17dde09e))
-- 🐛 break text with chinese characters(double byte character) ([14199bc](https://github.com/antvis/X6/commit/14199bc8529adddb347ef934926503a789b64980)), closes [#596](https://github.com/antvis/X6/issues/596)
-- 🐛 change jobqueue to transient ([0e39d94](https://github.com/antvis/X6/commit/0e39d9447bc8c0ba0b11c272bf9b64df9ba95a33))
-- 🐛 do not generate new commands on redoing/undoing ([5b3d713](https://github.com/antvis/X6/commit/5b3d7133f3a7b4841f461e67af5963ec84820741)), closes [#627](https://github.com/antvis/X6/issues/627)
-- 🐛 do not update pagesize automatically when set graph size ([949a42d](https://github.com/antvis/X6/commit/949a42dacfc5023d25bcabc0a3a1a7d8578f1b96)), closes [#644](https://github.com/antvis/X6/issues/644) [#564](https://github.com/antvis/X6/issues/564)
-- 🐛 fix add tools not work ([f5d1d6a](https://github.com/antvis/X6/commit/f5d1d6a326021247ee8967675fc9490ddbb6d0aa))
-- 🐛 fix model event trigger twice ([#789](https://github.com/antvis/X6/issues/789)) ([7638143](https://github.com/antvis/X6/commit/7638143b04c0a50a333200423753f6bd19a6ceb3))
-- 🐛 fix running error of x6-example-demo ([#1111](https://github.com/antvis/X6/issues/1111)) ([d5c854f](https://github.com/antvis/X6/commit/d5c854f644e4926dba2913a216870bdbaafd425a))
-- 🐛 fix the error in selected nodes position when snapline enabled ([#2797](https://github.com/antvis/X6/issues/2797)) ([1e7f132](https://github.com/antvis/X6/commit/1e7f132bed15006cc5535f1294f0b8a545dd6441))
-- 🐛 fix type error ([30ca7a9](https://github.com/antvis/X6/commit/30ca7a92817d28e58589413e36d3d2931360b8ae))
-- 🐛 fix x6-react-components version in demo ([709cdae](https://github.com/antvis/X6/commit/709cdae33d13acfd77af11e8bb5fb4f493dd5bd5))
-- 🐛 interact with input rendered in react component ([82478b1](https://github.com/antvis/X6/commit/82478b1d66e3b8b4346dab9041cb00e54fea9be1))
-- 🐛 linear gradient along edge path ([669fc5b](https://github.com/antvis/X6/commit/669fc5bd2d57635ce9d45dc0470674dad74f4add)), closes [#635](https://github.com/antvis/X6/issues/635)
-- 🐛 liner gradient not available on horizontal and vertical edges ([333689a](https://github.com/antvis/X6/commit/333689a880a30dbc0879705b7f655cec8d30f1df)), closes [#635](https://github.com/antvis/X6/issues/635)
-- 🐛 optimize cell remove method ([391fe8f](https://github.com/antvis/X6/commit/391fe8fd88f10d936c5860f465c7a423632f30f9))
-- 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/X6/issues/1391)) ([cc01fdf](https://github.com/antvis/X6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
-- 🐛 set the async of minimapGraph to be the same as sourceGraph ([9dded68](https://github.com/antvis/X6/commit/9dded6853d66b86e7bbeb738b2df15b51d1a8627))
-- 🐛 should render vertices tool with lowest z-index ([213a01f](https://github.com/antvis/X6/commit/213a01fca28b1e790ce58d228aa460ea798bb98f)), closes [#638](https://github.com/antvis/X6/issues/638)
-- 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/X6/issues/1425)) ([4208846](https://github.com/antvis/X6/commit/4208846337326d8983f1662faa8da67efd8568b4))
-- fix contextmenu show multiple times ([5d437ce](https://github.com/antvis/X6/commit/5d437cef07427bf9f2cbae9b2e08dd4a6544ff70))
-- fix demo import path error ([2ebf581](https://github.com/antvis/X6/commit/2ebf581dc1ec9c5ee4501917a7cbddbbb4b69c0f))
-- fix path error in custom router demo ([#620](https://github.com/antvis/X6/issues/620)) ([7cd3a7e](https://github.com/antvis/X6/commit/7cd3a7e57d772481ad33949ee832a36aab59ef3a))
-- refactor example ([#2831](https://github.com/antvis/X6/issues/2831)) ([3d8f005](https://github.com/antvis/X6/commit/3d8f005696021f1d9f91a96812ebadce179f2d73))
-- remove x6-common and x6-geometry deps ([#2830](https://github.com/antvis/X6/issues/2830)) ([5b5f5aa](https://github.com/antvis/X6/commit/5b5f5aa7ea6fded1b15abc79b9b5a5e2281b3ab9))
-- update dependencies and fix type errors ([#1103](https://github.com/antvis/X6/issues/1103)) ([49d4371](https://github.com/antvis/X6/commit/49d43716ada672e609e4e6d9c6fdca3f494b6f68))
-- **wip:** 🐛 click event of contextmenu was not triggered ([2c9363e](https://github.com/antvis/X6/commit/2c9363e46904979901d4b467995d289c094d329a))
-
-### chore
-
-- release beta ([b5f3cfa](https://github.com/antvis/X6/commit/b5f3cfa2042f5196a995a38a8f41f140cabdce57))
-
-### Documentation
-
-- refresh changelogs ([44f89a1](https://github.com/antvis/X6/commit/44f89a1e1a85513a9bf548be87be38e3cdc82574))
-
-### Features
-
-- ✨ add `primer` and `useForeignObject` option for react-shape ([ab6a06f](https://github.com/antvis/X6/commit/ab6a06f1fe70b71ae31acc47b0d9cb02c86097e2))
-- ✨ add autoResize feature ([5aeae97](https://github.com/antvis/X6/commit/5aeae976cd7638b2b5c05bc12bc56b562366fe5f))
-- ✨ add clipboard plugin ([8107f6d](https://github.com/antvis/X6/commit/8107f6df5de52a33e1b8094a44d59ee7fd2a8042))
-- ✨ add dnd plugin ([269fae9](https://github.com/antvis/X6/commit/269fae9e5eeb969c6a7884373aa3a32002c064e6))
-- ✨ add history plugin ([#2819](https://github.com/antvis/X6/issues/2819)) ([fd8d384](https://github.com/antvis/X6/commit/fd8d384a29d0f2e02bf066efd19ed3f92614c524))
-- ✨ add html shape ([8d75504](https://github.com/antvis/X6/commit/8d7550413f9f6f3177eab9d0f7fef14c55949fb8))
-- ✨ add keyboard plugin ([#2665](https://github.com/antvis/X6/issues/2665)) ([bf53677](https://github.com/antvis/X6/commit/bf536778ca7ee3229390dfcfcb085ec55edd9fb2))
-- ✨ add library for manipulating and animating SVG ([c07a177](https://github.com/antvis/X6/commit/c07a17785fc99372baaa66ea2525acf1d332fa11))
-- ✨ add minimap plugin ([6cdecbb](https://github.com/antvis/X6/commit/6cdecbbba9a4db1f67189e23fb89f2a7ba2af99e))
-- ✨ add panning and mousewheel module ([#2243](https://github.com/antvis/X6/issues/2243)) ([55d36e4](https://github.com/antvis/X6/commit/55d36e46808a4c79b086d7798bce396d5211a1dc))
-- ✨ add scroller api ([12173bf](https://github.com/antvis/X6/commit/12173bf500624f197ed56cf6a797499587178cba))
-- ✨ add selection plugin ([#2742](https://github.com/antvis/X6/issues/2742)) ([50a5dc7](https://github.com/antvis/X6/commit/50a5dc7cd8c2e39a1f8bf8359a0eb189dda8cb86))
-- ✨ add snapline plugin ([294672b](https://github.com/antvis/X6/commit/294672b3066b15ab834ce2a3172facc49004c950))
-- ✨ add some missing api ([1dcb3d9](https://github.com/antvis/X6/commit/1dcb3d92fd83e5dfd1a1af9670d539a99dd9f55a))
-- ✨ add stencil plugin ([#2815](https://github.com/antvis/X6/issues/2815)) ([4e1fb7b](https://github.com/antvis/X6/commit/4e1fb7bef8ff5548edf2529eb27be0a66a600996))
-- ✨ add transform plugin ([#2818](https://github.com/antvis/X6/issues/2818)) ([660e2d7](https://github.com/antvis/X6/commit/660e2d7689bfa59a0f4a4a5e3c0ace70dec21e9e))
-- ✨ add virtual render feature ([#2198](https://github.com/antvis/X6/issues/2198)) ([fcba5e1](https://github.com/antvis/X6/commit/fcba5e14808d44c80b658c090cc2a4ebcdc64f6d))
-- ✨ add xmind demo ([adb2c98](https://github.com/antvis/X6/commit/adb2c98e23e93b7084fd20f05801f2595d4ac990))
-- ✨ auto resize graph when container resized ([9c7bc9a](https://github.com/antvis/X6/commit/9c7bc9a4bb210451283663cd99a29bd6c79e2ec4)), closes [#531](https://github.com/antvis/X6/issues/531)
-- ✨ export common and geometry in x6 package ([#2820](https://github.com/antvis/X6/issues/2820)) ([df28200](https://github.com/antvis/X6/commit/df282000cc5e17521147c77c210e172c444c9938))
-- ✨ expose the selection api ([#2756](https://github.com/antvis/X6/issues/2756)) ([f3edbbc](https://github.com/antvis/X6/commit/f3edbbc95d2038a61116fa71bb0c3016f1c92d5e))
-- ✨ improve auto-resize feature ([40d5335](https://github.com/antvis/X6/commit/40d53355cedc0bbbeb1e26948b67254dc6a40d85))
-- ✨ random path demo ([38ec683](https://github.com/antvis/X6/commit/38ec683673e2da64296521f23a91f951a442adc0))
-- ✨ support inherit options for react-shape registry ([#2596](https://github.com/antvis/X6/issues/2596)) ([ad63046](https://github.com/antvis/X6/commit/ad63046e89fa5853b0cf15947af1ed2a7b625188))
-- ✨ support panning scroller graph byrightmousedown ([6ffdb50](https://github.com/antvis/X6/commit/6ffdb5004401b30ff5852a08de9286a934780be3))
-- add scroller plugin ([#2580](https://github.com/antvis/X6/issues/2580)) ([5e0e2ac](https://github.com/antvis/X6/commit/5e0e2acde7d7e259ea27d001983e950878d0ecc8))
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/X6/issues/2864)) ([774f547](https://github.com/antvis/X6/commit/774f547b85522eb2411dca949d36ecfe535503f3))
-- force release 2.0-beta ([6987d9c](https://github.com/antvis/X6/commit/6987d9ce64454cd76f697d33f96715dbdf56524a))
-- support mouseenter and mouseleave event ([#2559](https://github.com/antvis/X6/issues/2559)) ([ecfd426](https://github.com/antvis/X6/commit/ecfd4263b1266a128bf8651c4dd745ff8ab038b3))
-- sync code from master ([#2004](https://github.com/antvis/X6/issues/2004)) ([c681405](https://github.com/antvis/X6/commit/c68140504bd21f654870f3d2fc1ad2f16f1113c8)), closes [#1974](https://github.com/antvis/X6/issues/1974) [#1977](https://github.com/antvis/X6/issues/1977) [#1985](https://github.com/antvis/X6/issues/1985) [#1988](https://github.com/antvis/X6/issues/1988) [#1991](https://github.com/antvis/X6/issues/1991) [#1989](https://github.com/antvis/X6/issues/1989)
-- upgrade react to 18 in react-components ([#2836](https://github.com/antvis/X6/issues/2836)) ([5138562](https://github.com/antvis/X6/commit/5138562515ddbd3975adc9d93514f21d6fc2bb3e))
-
-### Performance Improvements
-
-- ⚡️ add getMatrixByElementAttr and getBBoxByElementAttr to reduce reflow ([ba5b22a](https://github.com/antvis/X6/commit/ba5b22a33a0af067d77735c5cc46a60a45734dca))
-- ⚡️ 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))
-- ⚡️ check whether label existed in port ([#2063](https://github.com/antvis/X6/issues/2063)) ([5ae7271](https://github.com/antvis/X6/commit/5ae7271a25e804a9321aa80e31dcf6e43144728b))
-- ⚡️ optimize breakText for a high performance version ([#2242](https://github.com/antvis/X6/issues/2242)) ([0aced58](https://github.com/antvis/X6/commit/0aced58056d908ec092bca1889b5ef367a94fe68))
-- ⚡️ optimize node render performance ([6554959](https://github.com/antvis/X6/commit/65549599d2f82f8052d16776c8d36ce7ee2fba9b))
-- ⚡️ repalce getTransformToElement and getBBox to improve performance ([#2177](https://github.com/antvis/X6/issues/2177)) ([1436586](https://github.com/antvis/X6/commit/1436586f85cc2e2f6ec71548f6d6c232be793154))
-
-### BREAKING CHANGES
-
-- dump to 2.0
-- force release 2.0-beta
-- 2.0-beta

examples/x6-example-features/package.json

@@ -3,7 +3,7 @@
   "name": "@antv/x6-example-features",
   "version": "2.1.1",
   "scripts": {
-    "start": "umi dev",
+    "start": "export NODE_OPTIONS=--openssl-legacy-provider && umi dev",
     "build": "umi build",
     "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix"
   },
@@ -48,7 +48,10 @@
     "react-test-renderer": "^16.7.0",
     "umi": "^2.9.0",
     "umi-plugin-react": "^1.8.0",
-    "umi-types": "^0.3.0"
+    "umi-types": "^0.3.0",
+    "@fluidframework/aqueduct": "^0.33.5",
+    "@fluidframework/get-tinylicious-container": "^0.33.5",
+    "@fluidframework/map": "^0.33.5"
   },
   "engines": {
     "node": ">=8.0.0"

examples/x6-example-features/src/collaboration/app.ts

@@ -0,0 +1,52 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import type { Graph } from '@antv/x6'
+import { getDefaultObjectFromContainer } from '@fluidframework/aqueduct'
+import { getTinyliciousContainer } from '@fluidframework/get-tinylicious-container'
+
+import { GraphDataObjectContainerRuntimeFactory } from './containerCode'
+import type { IGraphDataObject } from './dataObject'
+import { connectGraph } from './view'
+
+// In interacting with the service, we need to be explicit about whether we're creating a new document vs. loading
+// an existing one.  We also need to provide the unique ID for the document we are creating or loading from.
+
+// In this app, we'll choose to create a new document when navigating directly to http://localhost:8080.  For the ID,
+// we'll choose to use the current timestamp.  We'll also choose to interpret the URL hash as an existing document's
+// ID to load from, so the URL for a document load will look something like http://localhost:8080/#1596520748752.
+// These policy choices are arbitrary for demo purposes, and can be changed however you'd like.
+
+const createNew = false
+// if (location.hash.length === 0) {
+//     createNew = true;
+//     location.hash = Date.now().toString();
+// }
+// const documentId = location.hash.substring(1);
+// document.title = documentId;
+
+export async function start(graph: Graph): Promise<void> {
+  // The getTinyliciousContainer helper function facilitates loading our container code into a Container and
+  // connecting to a locally-running test service called Tinylicious.  This will look different when moving to a
+  // production service, but ultimately we'll still be getting a reference to a Container object.  The helper
+  // function takes the ID of the document we're creating or loading, the container code to load into it, and a
+  // flag to specify whether we're creating a new document or loading an existing one.
+  const container = await getTinyliciousContainer(
+    'test',
+    GraphDataObjectContainerRuntimeFactory,
+    createNew,
+  )
+
+  // In this app, we know our container code provides a default data object that is an IGraphDataObject.
+  const graphDataObject: IGraphDataObject =
+    await getDefaultObjectFromContainer<IGraphDataObject>(container)
+
+  connectGraph(graphDataObject, graph)
+
+  // Reload the page on any further hash changes, e.g. in case you want to paste in a different document ID.
+  // window.addEventListener('hashchange', () => {
+  //   location.reload();
+  // });
+}

examples/x6-example-features/src/collaboration/containerCode.ts

@@ -0,0 +1,24 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import { ContainerRuntimeFactoryWithDefaultDataStore } from '@fluidframework/aqueduct'
+
+import { GraphDataObjectInstantiationFactory } from './dataObject'
+
+/**
+ * The GraphDataObjectContainerRuntimeFactory is the container code for our scenario.
+ *
+ * Since we only need to instantiate and retrieve a single dice roller for our scenario, we can use a
+ * ContainerRuntimeFactoryWithDefaultDataStore. We provide it with the type of the data object we want to create
+ * and retrieve by default, and the registry entry mapping the type to the factory.
+ *
+ * This container code will create the single default data object on our behalf and make it available on the
+ * Container with a URL of "/", so it can be retrieved via container.request("/").
+ */
+export const GraphDataObjectContainerRuntimeFactory =
+  new ContainerRuntimeFactoryWithDefaultDataStore(
+    GraphDataObjectInstantiationFactory,
+    new Map([GraphDataObjectInstantiationFactory.registryEntry]),
+  )

examples/x6-example-features/src/collaboration/dataObject.ts

@@ -0,0 +1,252 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+import type { EventEmitter } from 'events'
+
+import { StringExt } from '@antv/x6'
+import { DataObject, DataObjectFactory } from '@fluidframework/aqueduct'
+import type { IFluidHandle } from '@fluidframework/core-interfaces'
+import type { IValueChanged } from '@fluidframework/map'
+import { SharedMap } from '@fluidframework/map'
+
+/**
+ * IGraphDataObject describes the public API surface for our graph data object.
+ */
+export interface IGraphDataObject extends EventEmitter {
+  cells: SharedMap
+  users: SharedMap
+
+  userId: string
+
+  on(event: string, listener: (id: string, attributes: any) => void): this
+  on(
+    event: string,
+    listener: (id: string, attributes: any, prevAttributes: any) => void,
+  ): this
+
+  setCell(id: string, attributes: any): void
+
+  deleteCell(id: string): void
+
+  updateUser(attributes: any): void
+}
+
+export interface IUser {
+  id: string
+  name: string
+  color: string
+  x?: number
+  y?: number
+  selection?: string
+}
+
+export const initialCells = [
+  {
+    id: 'test_node_1',
+    x: 100,
+    y: 100,
+    shape: 'dag-node',
+    data: {
+      id: 'test_node_1',
+      codeName: 'ss_sgd_train',
+      label: '逻辑回归',
+      status: 0,
+    },
+    ports: [
+      {
+        id: 'test_node_1_input_0',
+        group: 'top',
+        type: 'sf.table.vtable',
+      },
+      {
+        id: 'test_node_1_input_1',
+        group: 'top',
+        type: 'sf.table.individual',
+      },
+      {
+        id: 'test_node_1_output_0',
+        group: 'bottom',
+        type: 'sf.model.ss_sgb',
+      },
+    ],
+  },
+  {
+    id: 'test_node_2',
+    x: 300,
+    y: 300,
+    shape: 'dag-node',
+    data: {
+      id: 'test_node_2',
+      codeName: 'ss_sgd_predict',
+      label: '模型预测',
+      status: 2,
+    },
+    ports: [
+      {
+        id: 'test_node_2_input_0',
+        group: 'top',
+        type: 'sf.model.ss_sgb',
+      },
+      {
+        id: 'test_node_2_input_1',
+        group: 'top',
+        type: 'sf.table.vtable',
+      },
+      {
+        id: 'test_node_2_output_0',
+        group: 'bottom',
+        type: 'sf.table.individual',
+      },
+    ],
+  },
+  {
+    shape: 'dag-edge',
+    id: 'test_node_1_output_0__test_node_2_input_0',
+    source: {
+      cell: 'test_node_1',
+      port: 'test_node_1_output_0',
+    },
+    target: {
+      cell: 'test_node_2',
+      port: 'test_node_2_input_0',
+    },
+    data: {
+      id: 'test_node_1_output_0__test_node_2_input_0',
+      source: 'test_node_1',
+      sourceAnchor: 'test_node_1_output_0',
+      target: 'test_node_2',
+      targetAnchor: 'test_node_2_input_0',
+    },
+    zIndex: -1,
+  },
+]
+
+/**
+ * The GraphDataObject is our data object that implements the IGraphDataObject interface.
+ */
+export class GraphDataObject extends DataObject implements IGraphDataObject {
+  /**
+   * initializingFirstTime is run only once by the first client to create the DataObject.  Here we use it to
+   * initialize the state of the DataObject.
+   */
+
+  private _cells: SharedMap
+  private _users: SharedMap
+
+  protected async initializingFirstTime() {
+    const cellsMap = SharedMap.create(this.runtime)
+    const usersMap = SharedMap.create(this.runtime)
+
+    this.root.set('cellsMap', cellsMap.handle)
+    this.root.set('usersMap', usersMap.handle)
+
+    await this.initMaps()
+    initialCells.forEach((cell) => {
+      this.setCell(cell.id, { ...cell })
+    })
+  }
+
+  /**
+   * hasInitialized is run by each client as they load the DataObject.  Here we use it to set up usage of the
+   * DataObject, by registering an event listener for graph data object.
+   */
+  protected async hasInitialized() {
+    await this.initMaps()
+
+    this.cells.on('valueChanged', (changed: IValueChanged) => {
+      this.emit('cellChanged', changed.key, this.cells.get(changed.key))
+    })
+
+    this.users.on('valueChanged', (changed: IValueChanged) => {
+      this.emit(
+        'userChanged',
+        changed.key,
+        this.users.get(changed.key),
+        changed.previousValue,
+      )
+    })
+
+    this.addUser()
+  }
+
+  private async initMaps() {
+    if (!this._cells) {
+      const mapHandle = this.root.get<IFluidHandle<SharedMap>>('cellsMap')
+      if (!mapHandle) throw Error('Something went wrong')
+      this._cells = await mapHandle.get()
+    }
+    if (!this._users) {
+      const mapHandle = this.root.get<IFluidHandle<SharedMap>>('usersMap')
+      if (!mapHandle) throw Error('Something went wrong')
+      this._users = await mapHandle.get()
+    }
+  }
+
+  public get cells() {
+    return this._cells
+  }
+
+  public get users() {
+    return this._users
+  }
+
+  public setCell(id: string, attributes: any) {
+    this.cells.set(id, attributes)
+  }
+
+  public deleteCell(id: string) {
+    if (this.cells.has(id)) {
+      this.cells.delete(id)
+    }
+  }
+
+  public userId: string
+
+  public addUser() {
+    if (
+      sessionStorage.getItem('userId') &&
+      this.users.get<IUser>(<string>sessionStorage.getItem('userId'))
+    ) {
+      this.userId = <string>sessionStorage.getItem('userId') //This session might have has a user
+    } else {
+      const user: IUser = {
+        id: StringExt.uuid(),
+        name: 'Fake',
+        color: getRandomColor(),
+      }
+      this.userId = user.id
+      sessionStorage.setItem('userId', user.id)
+      this.users.set(user.id, user)
+    }
+  }
+
+  public getUser(): IUser | undefined {
+    return this.users.get<IUser>(this.userId)
+  }
+
+  public updateUser(attributes: any) {
+    return this.users.set(this.userId, { ...this.getUser(), ...attributes })
+  }
+}
+
+function getRandomColor(): string {
+  const letters = '0123456789ABCDEF'
+  let color = '#'
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)]
+  }
+  return color
+}
+
+/**
+ * The DataObjectFactory is used by Fluid Framework to instantiate our DataObject.  We provide it with a unique name
+ * and the constructor it will call.  In this scenario, the third and fourth arguments are not used.
+ */
+export const GraphDataObjectInstantiationFactory = new DataObjectFactory(
+  'graph-data-object',
+  GraphDataObject,
+  [],
+  {},
+)

examples/x6-example-features/src/collaboration/index.ts

@@ -0,0 +1 @@
+export * from './app'

examples/x6-example-features/src/collaboration/view.ts

@@ -0,0 +1,92 @@
+import type { Graph } from '@antv/x6'
+import { Vector } from '@antv/x6'
+
+import type { IGraphDataObject, IUser } from './dataObject'
+
+export function connectGraph(graphDataObject: IGraphDataObject, graph: Graph) {
+  const updateCell = (id: string, attributes: any) => {
+    const cell = graph.getCellById(id)
+    if (cell) {
+      if (attributes) {
+        cell.setProp(attributes)
+      } else {
+        cell.remove()
+      }
+    } else {
+      if (!attributes) return
+      if (attributes.shape === 'dag-edge') {
+        graph.addEdge(attributes)
+      } else if (attributes.shape === 'dag-node') {
+        graph.addNode(attributes)
+      }
+    }
+  }
+
+  graphDataObject.cells.forEach((cell) => updateCell(cell.id, cell))
+
+  graphDataObject.on('cellChanged', updateCell)
+
+  graph.on('cell:added', function ({ cell }) {
+    graphDataObject.setCell(cell.id, cell.prop())
+  })
+
+  graph.on('cell:change:*', function ({ cell }) {
+    graphDataObject.setCell(cell.id, cell.prop())
+  })
+
+  graph.on('cell:removed', function ({ cell }) {
+    graphDataObject.deleteCell(cell.id)
+  })
+
+  const remoteCursors: { [userId: string]: Vector } = {}
+
+  graphDataObject.on(
+    'userChanged',
+    function (id: string, user: IUser, previous: IUser) {
+      if (user.selection) {
+        const cell = graph.getCellById(user.selection)
+        if (cell) {
+          graph.select(cell)
+        }
+      }
+
+      if (
+        previous &&
+        previous.selection &&
+        previous.selection !== user.selection
+      ) {
+        const cell = graph.getCellById(previous.selection)
+        if (cell) {
+          graph.unselect(cell)
+        }
+      }
+
+      if (id === graphDataObject.userId) return
+      let circle: Vector
+      if (!remoteCursors[id]) {
+        circle = Vector.create('circle').attr({
+          r: 5,
+          'pointer-events': 'none',
+        })
+        circle.appendTo(graph.view.decorator)
+        remoteCursors[id] = circle
+      } else {
+        circle = remoteCursors[id]
+      }
+      circle.attr({ cx: user.x || 0, cy: user.y || 0, fill: user.color })
+    },
+  )
+
+  graph.container.addEventListener('mousemove', (evt: any) => {
+    const point = graph.clientToLocal(evt.clientX, evt.clientY)
+    graphDataObject.updateUser(point.toJSON())
+  })
+
+  graph.on('node:click', function ({ cell }) {
+    graphDataObject.updateUser({ selection: cell.id })
+  })
+
+  graph.on('blank:click', function () {
+    graphDataObject.updateUser({ selection: '' })
+  })
+}

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

@@ -13,6 +13,10 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       grid: true,
+      panning: {
+        enabled: true,
+        eventTypes: ['mouseWheelDown'],
+      },
     })
 
     const keyboard = new Keyboard()

package.json

@@ -22,7 +22,8 @@
     "setup:husky": "husky install .husky",
     "prepare": "is-ci || run-p setup:husky build:dev",
     "start:demo": "cd ./examples/x6-example-features && pnpm start",
-    "start:site": "cd ./sites/x6-sites && pnpm start"
+    "start:site": "cd ./sites/x6-sites && pnpm start",
+    "release": "pnpm publish --no-git-checks -r --filter @antv/x6"
   },
   "rss": {
     "clean:turbo": "rimraf .turbo",
@@ -37,8 +38,8 @@
     "build:umd": "pnpm run --if-present build:less && rollup -c ../../rollup.config.js --bundleConfigAsCjs",
     "build:dev": "pnpm run --if-present build:less && run-p -s build:cjs build:esm",
     "build:watch": "run-s -s build:watch:esm",
-    "build:watch:esm": "run-s -s 'build:esm -- -w'",
-    "build:watch:cjs": "run-s -s 'build:cjs -- -w'",
+    "build:watch:esm": "run-s -s \"build:esm -- -w\"",
+    "build:watch:cjs": "run-s -s \"build:cjs -- -w\"",
     "build": "run-p -s build:dev build:umd",
     "prebuild": "run-s -s clean:build",
     "test": {
@@ -139,7 +140,7 @@
     "less": "^4.1.1",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.31",
     "postcss-less": "^6.0.0",
     "prettier": "^2.8.0",
     "pretty-quick": "^3.1.1",
@@ -152,7 +153,7 @@
     "run-shared-scripts": "^1.1.5",
     "semantic-release": "^19.0.5",
     "sinon": "^15.0.1",
-    "stylelint": "^14.15.0",
+    "stylelint": "^15.10.1",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard": "^29.0.0",

packages/x6-angular-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-angular-shape",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "X6 shape for rendering angular components.",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -44,9 +44,9 @@ export class AngularShapeView extends NodeView<AngularShape> {
   }
 
   protected renderAngularContent(): void {
-    this.unmountAngularContent()
     const container = this.getNodeContainer()
     if (container) {
+      this.unmountAngularContent()
       const node = this.cell
       const { injector, content } = registerInfo.get(node.shape)!
       const viewContainerRef = injector.get(ViewContainerRef)
@@ -61,7 +61,9 @@ export class AngularShapeView extends NodeView<AngularShape> {
           this.setInstanceInput(content, embeddedViewRef),
         )
       } else {
-        const componentRef = viewContainerRef.createComponent(content)
+        const componentRef = viewContainerRef.createComponent(content, {
+          injector,
+        })
         const insertNode = (componentRef.hostView as EmbeddedViewRef<any>)
           .rootNodes[0] as HTMLElement
         container.appendChild(insertNode)
@@ -69,6 +71,7 @@ export class AngularShapeView extends NodeView<AngularShape> {
         node.on('change:data', () =>
           this.setInstanceInput(content, componentRef),
         )
+        node.on('removed', () => componentRef.destroy())
       }
     }
   }

packages/x6-common/CHANGELOG.md

@@ -1,37 +1,7 @@
-## @antv/x6-common [2.0.10](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.9...@antv/x6-common@2.0.10) (2023-02-24)
+# @antv/x6-common
 
-### Bug Fixes
+## 2.0.14
 
-- add textLength & lengthAdjust to CASE_SENSITIVE_ATTR ([#3281](https://github.com/antvis/x6/issues/3281)) ([76fb1ac](https://github.com/antvis/x6/commit/76fb1acf74b0f1c308f7c824d02c12244b7ac8f3))
+### Patch Changes
 
-## @antv/x6-common [2.0.8](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.7...@antv/x6-common@2.0.8) (2023-02-18)
-
-### Bug Fixes
-
-- fix typo for dom event handlers ([#3255](https://github.com/antvis/x6/issues/3255)) ([9b4fa86](https://github.com/antvis/x6/commit/9b4fa86daa587fe8818f3615bc1e40738a0f2319))
-
-## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
-
-### Bug Fixes
-
-- fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
-
-## @antv/x6-common [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.4...@antv/x6-common@2.0.5) (2023-01-18)
-
-### Bug Fixes
-
-- optimize css loader ([#3156](https://github.com/antvis/x6/issues/3156)) ([9c48ad8](https://github.com/antvis/x6/commit/9c48ad8dfc99e623a57855295d07c35be5483073))
-
-## @antv/x6-common [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.3...@antv/x6-common@2.0.4) (2022-12-20)
-
-### Bug Fixes
-
-- fix window incompatibility problem ([#3070](https://github.com/antvis/x6/issues/3070)) ([d8e1e63](https://github.com/antvis/x6/commit/d8e1e637d8027b9494cd26efc87815d74bd51366))
-
-## @antv/x6-common [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.0...@antv/x6-common@2.0.1) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-common [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.0...@antv/x6-common@2.0.1) (2022-11-24)
+- add case sensitive attr

packages/x6-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-common",
-  "version": "2.0.13",
+  "version": "2.0.17",
   "description": "Basic toolkit for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-common/src/__tests__/dom/event.test.ts

@@ -294,10 +294,16 @@ describe('EventDom', () => {
         expect(() => div.off('click', false)).not.toThrowError()
       })
 
-      it('should do noting for elem which do not bind any events', () => {
+      it('should do nothing for elem which do not bind any events', () => {
         const div = new EventDom()
         expect(() => div.off()).not.toThrowError()
       })
+
+      it('should do nothing for unexist event', () => {
+        const div = new EventDom()
+        div.on('whatever', () => {})
+        expect(() => div.off('unexist')).not.toThrowError()
+      })
     })
 
     describe('trigger()', () => {

packages/x6-common/src/common/basecoat.ts

@@ -3,7 +3,15 @@ import { EventArgs } from '../event/types'
 import { ObjectExt } from '../object'
 import { Disposable } from './disposable'
 
-export class Basecoat<A extends EventArgs = any> extends Events<A> {}
+export class Basecoat<A extends EventArgs = any>
+  extends Events<A>
+  implements Disposable
+{
+  @Disposable.dispose()
+  dispose() {
+    this.off()
+  }
+}
 
 export interface Basecoat extends Disposable {}
 

packages/x6-common/src/common/disposable.ts

@@ -56,11 +56,11 @@ export namespace Disposable {
     ) => {
       const raw = descriptor.value
       const proto = target.__proto__ as IDisposable // eslint-disable-line
-      descriptor.value = function (this: IDisposable) {
+      descriptor.value = function (this: IDisposable, ...args: any[]) {
         if (this.disposed) {
           return
         }
-        raw.call(this)
+        raw.call(this, ...args)
         proto.dispose.call(this)
       }
     }

packages/x6-common/src/dom/attr.ts

@@ -8,6 +8,7 @@ export const CASE_SENSITIVE_ATTR = [
   'repeatCount',
   'textLength',
   'lengthAdjust',
+  'gradientUnits',
 ]
 
 export type Attributes = { [key: string]: string | number | null | undefined }

packages/x6-common/src/dom/event/core.ts

@@ -148,7 +148,10 @@ export namespace Core {
       let type = originType
       const hook = EventHook.get(type)
       type = (selector ? hook.delegateType : hook.bindType) || type
-      const bag = events[type] || {}
+      const bag = events[type]
+      if (!bag) {
+        return
+      }
       const rns =
         namespaces.length > 0
           ? new RegExp(`(^|\\.)${namespaces.join('\\.(?:.*\\.|)')}(\\.|$)`)

packages/x6-common/src/dom/matrix.ts

@@ -1,7 +1,6 @@
 import { PointLike } from '../types'
 import { createSvgElement } from './elem'
 
-const svgDocument = createSvgElement('svg') as SVGSVGElement
 const transformRegex = /(\w+)\(([^,)]+),?([^)]+)?\)/gi
 const transformSeparatorRegex = /[ ,]+/
 const transformationListRegex = /^(\w+)\((.*)\)/
@@ -36,6 +35,7 @@ export interface Scale {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGPoint
  */
 export function createSVGPoint(x: number, y: number) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   const p = svgDocument.createSVGPoint()
   p.x = x
   p.y = y
@@ -58,6 +58,7 @@ export function createSVGPoint(x: number, y: number) {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGMatrix
  */
 export function createSVGMatrix(matrix?: DOMMatrix | MatrixLike | null) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   const mat = svgDocument.createSVGMatrix()
   if (matrix != null) {
     const source = matrix as any
@@ -75,6 +76,7 @@ export function createSVGMatrix(matrix?: DOMMatrix | MatrixLike | null) {
  * @see https://developer.mozilla.org/en/docs/Web/API/SVGTransform
  */
 export function createSVGTransform(matrix?: DOMMatrix | MatrixLike) {
+  const svgDocument = createSvgElement('svg') as SVGSVGElement
   if (matrix != null) {
     if (!(matrix instanceof DOMMatrix)) {
       matrix = createSVGMatrix(matrix) // eslint-disable-line

packages/x6-common/src/dom/prefix.ts

@@ -5,7 +5,7 @@ function camelize(str: string) {
 
 const memoized: { [key: string]: string | null } = {}
 const prefixes = ['webkit', 'ms', 'moz', 'o']
-const testStyle = document ? document.createElement('div').style : {}
+const testStyle = typeof document !== 'undefined' ? document.createElement('div').style : {}
 
 function getWithPrefix(name: string) {
   for (let i = 0; i < prefixes.length; i += 1) {

packages/x6-common/src/dom/selection.ts

@@ -1,4 +1,6 @@
 export const clearSelection = (function () {
+  if (typeof document == 'undefined')
+    return function () {}
   const doc = document as any
   if (doc.selection) {
     return function () {

packages/x6-common/src/dom/text.ts

@@ -1,13 +1,12 @@
 /* eslint-disable no-control-regex */
 
 import { Size } from '../types'
+import { StringExt } from '../string'
 import { Text } from '../text'
 import { attr } from './attr'
 import { Vector } from '../vector'
 import { createSvgElement, empty } from './elem'
 
-const canvasContext = document.createElement('canvas').getContext('2d')!
-
 function createTextPathNode(
   attrs: { d?: string; 'xlink:href'?: string },
   elem: SVGElement,
@@ -373,6 +372,7 @@ export function text(
 }
 
 export function measureText(text: string, styles: any = {}) {
+  const canvasContext = document.createElement('canvas').getContext('2d')!
   if (!text) {
     return { width: 0 }
   }
@@ -442,6 +442,27 @@ export function breakText(
   const width = size.width
   const height = size.height
   const eol = options.eol || '\n'
+  const fontSize = styles.fontSize || 14
+  const lineHeight = styles.lineHeight
+    ? parseFloat(styles.lineHeight)
+    : Math.ceil(fontSize * 1.4)
+  const maxLines = Math.floor(height / lineHeight)
+
+  if (text.indexOf(eol) > -1) {
+    const delimiter = StringExt.uuid()
+    const splitText: string[] = []
+
+    text.split(eol).map((line) => {
+      const part = breakText(line, { ...size, height: Number.MAX_SAFE_INTEGER }, styles, { ...options, eol: delimiter })
+
+      if (part) {
+        splitText.push(...part.split(delimiter))
+      }
+    })
+
+    return splitText.slice(0, maxLines).join(eol)
+  }
+
   const { width: textWidth } = measureText(text, styles)
 
   if (textWidth < width) {
@@ -449,11 +470,6 @@ export function breakText(
   }
 
   const lines = []
-  const fontSize = styles.fontSize || 14
-  const lineHeight = styles.lineHeight
-    ? parseFloat(styles.lineHeight)
-    : Math.ceil(fontSize * 1.4)
-  const maxLines = Math.floor(height / lineHeight)
 
   let remainText = text
   let remainWidth = textWidth

packages/x6-common/src/polyfill/index.ts

@@ -10,27 +10,29 @@ if (
 
 // compatible with ParentNode.append() before chrome 54
 // https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-;(function (arr) {
-  arr.forEach((item) => {
-    if (Object.prototype.hasOwnProperty.call(item, 'append')) {
-      return
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value(...args: any[]) {
-        const docFrag = document.createDocumentFragment()
+if (typeof window !== 'undefined') {
+  ;(function (arr) {
+    arr.forEach((item) => {
+      if (Object.prototype.hasOwnProperty.call(item, 'append')) {
+        return
+      }
+      Object.defineProperty(item, 'append', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value(...args: any[]) {
+          const docFrag = document.createDocumentFragment()
 
-        args.forEach((arg: any) => {
-          const isNode = arg instanceof Node
-          docFrag.appendChild(
-            isNode ? arg : document.createTextNode(String(arg)),
-          )
-        })
+          args.forEach((arg: any) => {
+            const isNode = arg instanceof Node
+            docFrag.appendChild(
+              isNode ? arg : document.createTextNode(String(arg)),
+            )
+          })
 
-        this.appendChild(docFrag)
-      },
+          this.appendChild(docFrag)
+        },
+      })
     })
-  })
-})([Element.prototype, Document.prototype, DocumentFragment.prototype])
+  })([Element.prototype, Document.prototype, DocumentFragment.prototype])
+}

packages/x6-devtool/package.json

@@ -23,7 +23,7 @@
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
     "style-loader": "^3.3.1",
-    "webpack": "^5.66.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "4.9.1"
   }
 }

packages/x6-geometry/CHANGELOG.md

@@ -1,11 +0,0 @@
-## @antv/x6-geometry [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-geometry@2.0.3...@antv/x6-geometry@2.0.4) (2022-11-29)
-
-## @antv/x6-geometry [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-geometry@2.0.2...@antv/x6-geometry@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-geometry [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-geometry@2.0.1...@antv/x6-geometry@2.0.2) (2022-11-25)
-
-## @antv/x6-geometry [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-geometry@2.0.0...@antv/x6-geometry@2.0.1) (2022-11-24)

packages/x6-plugin-clipboard/CHANGELOG.md

@@ -1,19 +0,0 @@
-## @antv/x6-plugin-clipboard [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-clipboard@2.1.2...@antv/x6-plugin-clipboard@2.1.3) (2022-11-25)
-
-### Bug Fixes
-
-- broken file ([d6df2d5](https://github.com/antvis/x6/commit/d6df2d59811dc18791208af36b452e11e6391f3b))
-
-## @antv/x6-plugin-clipboard [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-clipboard@2.1.1...@antv/x6-plugin-clipboard@2.1.2) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-clipboard [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-clipboard@2.1.0...@antv/x6-plugin-clipboard@2.1.1) (2022-11-25)
-
-# @antv/x6-plugin-clipboard [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-clipboard@2.0.0...@antv/x6-plugin-clipboard@2.1.0) (2022-11-24)
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-dnd/CHANGELOG.md

@@ -1,19 +0,0 @@
-## @antv/x6-plugin-dnd [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.3...@antv/x6-plugin-dnd@2.0.4) (2023-01-13)
-
-### Bug Fixes
-
-- change dragging container options ([#3139](https://github.com/antvis/x6/issues/3139)) ([7b091f3](https://github.com/antvis/x6/commit/7b091f35dee147c5e7bf97577e14e11ceb7e8e3d))
-
-## @antv/x6-plugin-dnd [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.2...@antv/x6-plugin-dnd@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-dnd [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.1...@antv/x6-plugin-dnd@2.0.2) (2022-11-25)
-
-## @antv/x6-plugin-dnd [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-dnd@2.0.0...@antv/x6-plugin-dnd@2.0.1) (2022-11-24)
-
-### Bug Fixes
-
-- export snap methods from snapline ([#2904](https://github.com/antvis/x6/issues/2904)) ([826ccdd](https://github.com/antvis/x6/commit/826ccdd9a033486ad5b90d666340e46f6c266af7))

packages/x6-plugin-dnd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-dnd",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "description": "dnd plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,5 +61,8 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "dom-align": "^1.12.4"
   }
 }

packages/x6-plugin-dnd/src/index.ts

@@ -12,6 +12,7 @@ import {
   Graph,
   EventArgs,
 } from '@antv/x6'
+import { alignPoint } from 'dom-align'
 import { content } from './style/raw'
 
 export class Dnd extends View implements Graph.Plugin {
@@ -26,7 +27,6 @@ export class Dnd extends View implements Graph.Plugin {
   protected delta: Point | null
   protected padding: number | null
   protected snapOffset: Point.PointLike | null
-  protected originOffset: null | { left: number; top: number }
 
   public options: Dnd.Options
   public draggingGraph: Graph
@@ -155,6 +155,7 @@ export class Dnd extends View implements Graph.Plugin {
     draggingGraph.fitToContent({
       padding,
       allowNewOrigin: 'any',
+      useCellGeometry: false,
     })
 
     const bbox = delegateView.getBBox()
@@ -164,28 +165,30 @@ export class Dnd extends View implements Graph.Plugin {
     this.draggingView = delegateView
     this.draggingBBox = draggingNode.getBBox()
     this.padding = padding
-    this.originOffset = this.updateGraphPosition(clientX, clientY)
+    this.updateGraphPosition(clientX, clientY)
   }
 
   protected updateGraphPosition(clientX: number, clientY: number) {
-    const scrollTop =
-      document.body.scrollTop || document.documentElement.scrollTop
     const delta = this.delta!
     const nodeBBox = this.geometryBBox
     const padding = this.padding || 5
     const offset = {
       left: clientX - delta.x - nodeBBox.width / 2 - padding,
-      top: clientY - delta.y - nodeBBox.height / 2 - padding + scrollTop,
+      top: clientY - delta.y - nodeBBox.height / 2 - padding,
     }
 
     if (this.draggingGraph) {
-      Dom.css(this.container, {
-        left: `${offset.left}px`,
-        top: `${offset.top}px`,
-      })
+      alignPoint(
+        this.container,
+        {
+          clientX: offset.left,
+          clientY: offset.top,
+        },
+        {
+          points: ['tl'],
+        },
+      )
     }
-
-    return offset
   }
 
   protected updateNodePosition(x: number, y: number) {
@@ -322,7 +325,6 @@ export class Dnd extends View implements Graph.Plugin {
       this.delta = null
       this.padding = null
       this.snapOffset = null
-      this.originOffset = null
       this.undelegateDocumentEvents()
     }
   }

packages/x6-plugin-export/CHANGELOG.md

@@ -1,14 +0,0 @@
-## @antv/x6-plugin-export [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-export@2.1.1...@antv/x6-plugin-export@2.1.2) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-export [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-export@2.1.0...@antv/x6-plugin-export@2.1.1) (2022-11-25)
-
-# @antv/x6-plugin-export [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-export@2.0.0...@antv/x6-plugin-export@2.1.0) (2022-11-24)
-
-### Features
-
-- add exportSVG methods ([#2906](https://github.com/antvis/x6/issues/2906)) ([847f225](https://github.com/antvis/x6/commit/847f2256326db0589ac37f1e1fa185560b61bdb7))
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-export/src/index.ts

@@ -35,7 +35,7 @@ export class Export extends Basecoat<Export.EventArgs> implements Graph.Plugin {
   }
 
   exportJPEG(fileName = 'chart', options: Export.ToImageOptions = {}) {
-    this.toPNG((dataUri) => {
+    this.toJPEG((dataUri) => {
       DataUri.downloadDataUri(dataUri, fileName)
     }, options)
   }
@@ -49,6 +49,16 @@ export class Export extends Basecoat<Export.EventArgs> implements Graph.Plugin {
   toSVG(callback: Export.ToSVGCallback, options: Export.ToSVGOptions = {}) {
     this.notify('before:export', options)
 
+    // to keep pace with it's doc description witch, the default value should be true.
+    // without Object.hasOwn method cause by ts config target.
+    // without instance.hasOwnProperty method cause by ts rule.
+    // the condition will be false if these properties have been set undefined in the target,
+    // but will be true if these properties are not in the target, cause the doc.
+    !Object.prototype.hasOwnProperty.call(options, 'copyStyle') &&
+      (options.copyStyles = true)
+    !Object.prototype.hasOwnProperty.call(options, 'serializeImages') &&
+      (options.serializeImages = true)
+
     const rawSVG = this.view.svg
     const vSVG = Vector.create(rawSVG).clone()
     let clonedSVG = vSVG.node as SVGSVGElement
@@ -94,7 +104,7 @@ export class Export extends Basecoat<Export.EventArgs> implements Graph.Plugin {
     //    custom stylesheets onto the `style` attribute of each of the nodes
     //    in SVG.
 
-    if (options.copyStyles !== false) {
+    if (options.copyStyles) {
       const document = rawSVG.ownerDocument!
       const raws = Array.from(rawSVG.querySelectorAll('*'))
       const clones = Array.from(clonedSVG.querySelectorAll('*'))

packages/x6-plugin-history/CHANGELOG.md

@@ -1,25 +0,0 @@
-# @antv/x6-plugin-history [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.3...@antv/x6-plugin-history@2.2.0) (2023-02-17)
-
-### Features
-
-- history add max stack size ([#3253](https://github.com/antvis/x6/issues/3253)) ([fba5310](https://github.com/antvis/x6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
-
-## @antv/x6-plugin-history [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.2...@antv/x6-plugin-history@2.1.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-history [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.1...@antv/x6-plugin-history@2.1.2) (2022-11-25)
-
-## @antv/x6-plugin-history [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.0...@antv/x6-plugin-history@2.1.1) (2022-11-24)
-
-### Bug Fixes
-
-- deep clone instead of shallow clone ([#2924](https://github.com/antvis/x6/issues/2924)) ([75f4297](https://github.com/antvis/x6/commit/75f42978cb0ed4c9e7c7ac141ffa29603cb27596))
-
-# @antv/x6-plugin-history [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.0.0...@antv/x6-plugin-history@2.1.0) (2022-11-24)
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-history/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-history",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "history plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-history/src/index.ts

@@ -268,10 +268,15 @@ export class History
         const value = revert ? data.prev[key] : data.next[key]
 
         if (data.key === 'attrs') {
-          this.ensureUndefinedAttrs(
+          const hasUndefinedAttr = this.ensureUndefinedAttrs(
             value,
             revert ? data.next[key] : data.prev[key],
           )
+          if (hasUndefinedAttr) {
+            // recognize a `dirty` flag and re-render itself in order to remove
+            // the attribute from SVGElement.
+            options.dirty = true
+          }
         }
 
         cell.prop(key, value, options)
@@ -602,6 +607,7 @@ export class History
     newAttrs: Record<string, any>,
     oldAttrs: Record<string, any>,
   ) {
+    let hasUndefinedAttr = false
     if (
       newAttrs !== null &&
       oldAttrs !== null &&
@@ -610,16 +616,21 @@ export class History
     ) {
       Object.keys(oldAttrs).forEach((key) => {
         // eslint-disable-next-line no-prototype-builtins
-        if (!newAttrs.hasOwnProperty(key)) {
+        if (newAttrs[key] === undefined && oldAttrs[key] !== undefined) {
           newAttrs[key] = undefined
+          hasUndefinedAttr = true
         } else if (
           typeof newAttrs[key] === 'object' &&
           typeof oldAttrs[key] === 'object'
         ) {
-          this.ensureUndefinedAttrs(newAttrs[key], oldAttrs[key])
+          hasUndefinedAttr = this.ensureUndefinedAttrs(
+            newAttrs[key],
+            oldAttrs[key],
+          )
         }
       })
     }
+    return hasUndefinedAttr
   }
 
   @Basecoat.dispose()

packages/x6-plugin-keyboard/CHANGELOG.md

@@ -1,31 +0,0 @@
-# @antv/x6-plugin-keyboard [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.4...@antv/x6-plugin-keyboard@2.2.0) (2023-02-06)
-
-### Features
-
-- keyboard support clear and custom trigger ([#3202](https://github.com/antvis/x6/issues/3202)) ([668c932](https://github.com/antvis/x6/commit/668c93242fbcebb987cccc3dcfd56982f7c66252))
-
-## @antv/x6-plugin-keyboard [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.3...@antv/x6-plugin-keyboard@2.1.4) (2022-11-29)
-
-### Bug Fixes
-
-- not trigger keyboard event whith delete key in contenteditable elem ([#2965](https://github.com/antvis/x6/issues/2965)) ([4978110](https://github.com/antvis/x6/commit/4978110b4594aee801d39c74f5c190432846eba4))
-
-## @antv/x6-plugin-keyboard [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.2...@antv/x6-plugin-keyboard@2.1.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-keyboard [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.1...@antv/x6-plugin-keyboard@2.1.2) (2022-11-25)
-
-## @antv/x6-plugin-keyboard [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.0...@antv/x6-plugin-keyboard@2.1.1) (2022-11-25)
-
-### Performance Improvements
-
-- update deps ([f20127a](https://github.com/antvis/x6/commit/f20127af555d9b7beaac3a07ac308d5c0d4e53a3))
-
-# @antv/x6-plugin-keyboard [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.0.0...@antv/x6-plugin-keyboard@2.1.0) (2022-11-24)
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-keyboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-keyboard",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "keyboard plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-keyboard/src/keyboard.ts

@@ -106,6 +106,10 @@ export class KeyboardImpl extends Disposable implements IDisablable {
       .replace(/\s/g, '')
       .replace('delete', 'del')
       .replace('cmd', 'command')
+      .replace('arrowup', 'up')
+      .replace('arrowright', 'right')
+      .replace('arrowdown', 'down')
+      .replace('arrowleft', 'left')
 
     const formatFn = this.options.format
     if (formatFn) {

packages/x6-plugin-minimap/CHANGELOG.md

@@ -1,13 +0,0 @@
-## @antv/x6-plugin-minimap [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-minimap@2.0.2...@antv/x6-plugin-minimap@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-minimap [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-minimap@2.0.1...@antv/x6-plugin-minimap@2.0.2) (2022-11-25)
-
-## @antv/x6-plugin-minimap [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-minimap@2.0.0...@antv/x6-plugin-minimap@2.0.1) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))

packages/x6-plugin-minimap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-minimap",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "minimap plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-minimap/src/index.ts

@@ -1,12 +1,4 @@
-import {
-  FunctionExt,
-  CssLoader,
-  Dom,
-  View,
-  Graph,
-  EventArgs,
-  Model,
-} from '@antv/x6'
+import { FunctionExt, CssLoader, Dom, View, Graph, EventArgs } from '@antv/x6'
 import { content } from './style/raw'
 
 export class MiniMap extends View implements Graph.Plugin {
@@ -138,12 +130,11 @@ export class MiniMap extends View implements Graph.Plugin {
 
   protected onRemove() {
     this.stopListening()
-    this.targetGraph.model = new Model()
-    this.targetGraph.dispose()
+    this.targetGraph.dispose(false)
   }
 
   protected onTransform(options: { ui: boolean }) {
-    if (options.ui || this.targetGraphTransforming) {
+    if (options.ui || this.targetGraphTransforming || !this.scroller) {
       this.updateViewport()
     }
   }

packages/x6-plugin-scroller/CHANGELOG.md

@@ -1,14 +0,0 @@
-## @antv/x6-plugin-scroller [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-scroller@2.0.2...@antv/x6-plugin-scroller@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-scroller [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-scroller@2.0.1...@antv/x6-plugin-scroller@2.0.2) (2022-11-25)
-
-## @antv/x6-plugin-scroller [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-scroller@2.0.0...@antv/x6-plugin-scroller@2.0.1) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))
-- resize graph when scale scroller ([#2903](https://github.com/antvis/x6/issues/2903)) ([cee4aa4](https://github.com/antvis/x6/commit/cee4aa4e53b2821ed11d5602fccdb36625957c72))

packages/x6-plugin-scroller/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-scroller",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "scroller plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-scroller/src/scroller.ts

@@ -865,8 +865,8 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
 
   protected removeTransition() {
     Dom.removeClass(this.container, ScrollerImpl.transitionClassName)
-    Dom.Event.off(this.container, ScrollerImpl.transitionEventName)
-    Dom.css(this.container, {
+    Dom.Event.off(this.content, ScrollerImpl.transitionEventName)
+    Dom.css(this.content, {
       transform: '',
       transformOrigin: '',
       transition: '',

packages/x6-plugin-selection/CHANGELOG.md

@@ -1,29 +0,0 @@
-## @antv/x6-plugin-selection [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-selection@2.1.3...@antv/x6-plugin-selection@2.1.4) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-selection [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-selection@2.1.2...@antv/x6-plugin-selection@2.1.3) (2022-11-25)
-
-## @antv/x6-plugin-selection [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-selection@2.1.1...@antv/x6-plugin-selection@2.1.2) (2022-11-24)
-
-### Bug Fixes
-
-- support antd5 in react components ([#2933](https://github.com/antvis/x6/issues/2933)) ([2ecc213](https://github.com/antvis/x6/commit/2ecc213094250b476b533b444c0f3716f88b7987))
-
-## @antv/x6-plugin-selection [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-selection@2.1.0...@antv/x6-plugin-selection@2.1.1) (2022-11-24)
-
-### Bug Fixes
-
-- modify the semantics of filter ([#2927](https://github.com/antvis/x6/issues/2927)) ([bc261fb](https://github.com/antvis/x6/commit/bc261fb9929aa0b4d3fa4194bcc780ea701b029e))
-
-# @antv/x6-plugin-selection [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-selection@2.0.0...@antv/x6-plugin-selection@2.1.0) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-selection/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-selection",
-  "version": "2.1.7",
+  "version": "2.2.2",
   "description": "selection plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-selection/src/api.ts

@@ -307,7 +307,7 @@ Graph.prototype.unselect = function (
 ) {
   const selection = this.getPlugin('selection') as Selection
   if (selection) {
-    return selection.unselect(cells, options)
+    selection.unselect(cells, options)
   }
   return this
 }

packages/x6-plugin-selection/src/index.ts

@@ -3,7 +3,6 @@ import {
   ModifierKey,
   CssLoader,
   Dom,
-  ObjectExt,
   Cell,
   EventArgs,
   Graph,
@@ -42,11 +41,12 @@ export class Selection
 
   constructor(options: Selection.Options = {}) {
     super()
-    this.options = ObjectExt.merge(
-      { enabled: true },
-      Selection.defaultOptions,
-      options,
-    )
+    this.options = {
+      enabled: true,
+      ...Selection.defaultOptions,
+      ...options,
+    }
+
     CssLoader.ensure(this.name, content)
   }
 
@@ -320,6 +320,10 @@ export class Selection
   }
 
   protected onBlankMouseDown({ e }: EventArgs['blank:mousedown']) {
+    if (!this.allowBlankMouseDown(e)) {
+      return
+    }
+
     const allowGraphPanning = this.graph.panning.allowPanning(e, true)
     const scroller = this.graph.getPlugin<any>('scroller')
     const allowScrollerPanning = scroller && scroller.allowPanning(e, true)
@@ -331,6 +335,14 @@ export class Selection
     }
   }
 
+  protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
+    const eventTypes = this.options.eventTypes
+    return (
+      (eventTypes?.includes('leftMouseDown') && e.button === 0) ||
+      (eventTypes?.includes('mouseWheelDown') && e.button === 1)
+    )
+  }
+
   protected onBlankClick() {
     this.clean()
   }
@@ -475,5 +487,6 @@ export namespace Selection {
     selectEdgeOnMoved: false,
     following: true,
     content: null,
+    eventTypes: ['leftMouseDown', 'mouseWheelDown'],
   }
 }

packages/x6-plugin-selection/src/selection.ts

@@ -126,7 +126,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     const { ui, selection, translateBy, snapped } = options
 
     const allowTranslating =
-      (showNodeSelectionBox !== true || pointerEvents === 'none') &&
+      (showNodeSelectionBox !== true || (pointerEvents && this.getPointerEventsValue(pointerEvents) === 'none')) &&
       !this.translating &&
       !selection
 
@@ -468,12 +468,12 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
         }
       } else {
         const scale = this.graph.transform.getScale()
-        for (let i = 0, len = this.$boxes.length; i < len; i += 1) {
-          this.updateElementPosition(
-            this.$boxes[i],
-            dx * scale.sx,
-            dy * scale.sy,
-          )
+        for (
+          let i = 0, $boxes = this.$boxes, len = $boxes.length;
+          i < len;
+          i += 1
+        ) {
+          this.updateElementPosition($boxes[i], dx * scale.sx, dy * scale.sy)
         }
         this.updateElementPosition(
           this.selectionContainer,
@@ -807,6 +807,12 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     )
   }
 
+  protected getPointerEventsValue(pointerEvents: 'none' | 'auto' | ((cells: Cell[]) => 'none' | 'auto')) {
+    return typeof pointerEvents === 'string'
+      ? pointerEvents
+      : pointerEvents(this.cells)
+  }
+
   protected createSelectionBox(cell: Cell) {
     this.addCellSelectedClassName(cell)
 
@@ -819,6 +825,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
 
         const className = this.boxClassName
         const box = document.createElement('div')
+        const pointerEvents = this.options.pointerEvents
         Dom.addClass(box, className)
         Dom.addClass(box, `${className}-${cell.isNode() ? 'node' : 'edge'}`)
         Dom.attr(box, 'data-cell-id', cell.id)
@@ -828,7 +835,9 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
           top: bbox.y,
           width: bbox.width,
           height: bbox.height,
-          pointerEvents: this.options.pointerEvents || 'auto',
+          pointerEvents: pointerEvents
+            ? this.getPointerEventsValue(pointerEvents)
+            : 'auto',
         })
         Dom.appendTo(box, this.container)
         this.showSelected()
@@ -848,10 +857,15 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
   confirmUpdate() {
     if (this.boxCount) {
       this.hide()
-      for (let i = 0, len = this.$boxes.length; i < len; i += 1) {
-        const box = this.$boxes[i]
+      for (
+        let i = 0, $boxes = this.$boxes, len = $boxes.length;
+        i < len;
+        i += 1
+      ) {
+        const box = $boxes[i]
         const cellId = Dom.attr(box, 'data-cell-id')
         Dom.remove(box)
+        this.boxCount -= 1
         const cell = this.collection.get(cellId)
         if (cell) {
           this.createSelectionBox(cell)
@@ -945,6 +959,8 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
 }
 
 export namespace SelectionImpl {
+  type SelectionEventType = 'leftMouseDown' | 'mouseWheelDown'
+
   export interface CommonOptions {
     model?: Model
     collection?: Collection
@@ -971,7 +987,10 @@ export namespace SelectionImpl {
     rubberEdge?: boolean
 
     // Whether to respond event on the selectionBox
-    pointerEvents?: 'none' | 'auto'
+    pointerEvents?: 'none' | 'auto' | ((cells: Cell[]) => 'none' | 'auto')
+
+    // with which mouse button the selection can be started
+    eventTypes?: SelectionEventType[]
   }
 
   export interface Options extends CommonOptions {

packages/x6-plugin-snapline/CHANGELOG.md

@@ -1,30 +0,0 @@
-## @antv/x6-plugin-snapline [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-snapline@2.1.3...@antv/x6-plugin-snapline@2.1.4) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-snapline [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-snapline@2.1.2...@antv/x6-plugin-snapline@2.1.3) (2022-11-25)
-
-## @antv/x6-plugin-snapline [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-snapline@2.1.1...@antv/x6-plugin-snapline@2.1.2) (2022-11-24)
-
-### Bug Fixes
-
-- updae react-resize-detector version ([#2930](https://github.com/antvis/x6/issues/2930)) ([d6ae519](https://github.com/antvis/x6/commit/d6ae5199c00be6429a828f537b194adddd2b6aeb))
-
-## @antv/x6-plugin-snapline [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-snapline@2.1.0...@antv/x6-plugin-snapline@2.1.1) (2022-11-24)
-
-### Bug Fixes
-
-- modify the semantics of filter ([#2927](https://github.com/antvis/x6/issues/2927)) ([bc261fb](https://github.com/antvis/x6/commit/bc261fb9929aa0b4d3fa4194bcc780ea701b029e))
-
-# @antv/x6-plugin-snapline [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-snapline@2.0.0...@antv/x6-plugin-snapline@2.1.0) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))
-- export snap methods from snapline ([#2904](https://github.com/antvis/x6/issues/2904)) ([826ccdd](https://github.com/antvis/x6/commit/826ccdd9a033486ad5b90d666340e46f6c266af7))
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-stencil/CHANGELOG.md

@@ -1,13 +0,0 @@
-## @antv/x6-plugin-stencil [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-stencil@2.0.2...@antv/x6-plugin-stencil@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-stencil [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-stencil@2.0.1...@antv/x6-plugin-stencil@2.0.2) (2022-11-25)
-
-## @antv/x6-plugin-stencil [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-stencil@2.0.0...@antv/x6-plugin-stencil@2.0.1) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))

packages/x6-plugin-stencil/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-stencil",
-  "version": "2.0.4",
+  "version": "2.1.5",
   "description": "stencil plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-stencil/src/index.ts

@@ -37,9 +37,7 @@ export class Stencil extends View implements Graph.Plugin {
 
   constructor(options: Partial<Stencil.Options> = {}) {
     super()
-
     CssLoader.ensure(this.name, content)
-
     this.graphs = {}
     this.groups = {}
     this.options = {
@@ -52,6 +50,150 @@ export class Stencil extends View implements Graph.Plugin {
   init() {
     this.dnd = new Dnd(this.options)
     this.onSearch = FunctionExt.debounce(this.onSearch, 200)
+
+    this.initContainer()
+    this.initSearch()
+    this.initContent()
+    this.initGroups()
+    this.setTitle()
+    this.startListening()
+  }
+
+  // #region api
+
+  load(groups: { [groupName: string]: (Node | Node.Metadata)[] }): this
+  load(nodes: (Node | Node.Metadata)[], groupName?: string): this
+  load(
+    data:
+      | { [groupName: string]: (Node | Node.Metadata)[] }
+      | (Node | Node.Metadata)[],
+    groupName?: string,
+  ) {
+    if (Array.isArray(data)) {
+      this.loadGroup(data, groupName)
+    } else if (this.options.groups) {
+      Object.keys(this.options.groups).forEach((groupName) => {
+        if (data[groupName]) {
+          this.loadGroup(data[groupName], groupName)
+        }
+      })
+    }
+    return this
+  }
+
+  unload(groups: { [groupName: string]: (Node | Node.Metadata)[] }): this
+  unload(nodes: (Node | Node.Metadata)[], groupName?: string): this
+  unload(
+    data:
+      | { [groupName: string]: (Node | Node.Metadata)[] }
+      | (Node | Node.Metadata)[],
+    groupName?: string,
+  ) {
+    if (Array.isArray(data)) {
+      this.loadGroup(data, groupName, true)
+    } else if (this.options.groups) {
+      Object.keys(this.options.groups).forEach((groupName) => {
+        if (data[groupName]) {
+          this.loadGroup(data[groupName], groupName, true)
+        }
+      })
+    }
+    return this
+  }
+
+  toggleGroup(groupName: string) {
+    if (this.isGroupCollapsed(groupName)) {
+      this.expandGroup(groupName)
+    } else {
+      this.collapseGroup(groupName)
+    }
+    return this
+  }
+
+  collapseGroup(groupName: string) {
+    if (this.isGroupCollapsable(groupName)) {
+      const group = this.groups[groupName]
+      if (group && !this.isGroupCollapsed(groupName)) {
+        this.trigger('group:collapse', { name: groupName })
+        Dom.addClass(group, 'collapsed')
+      }
+    }
+    return this
+  }
+
+  expandGroup(groupName: string) {
+    if (this.isGroupCollapsable(groupName)) {
+      const group = this.groups[groupName]
+      if (group && this.isGroupCollapsed(groupName)) {
+        this.trigger('group:expand', { name: groupName })
+        Dom.removeClass(group, 'collapsed')
+      }
+    }
+    return this
+  }
+
+  isGroupCollapsable(groupName: string) {
+    const group = this.groups[groupName]
+    return Dom.hasClass(group, 'collapsable')
+  }
+
+  isGroupCollapsed(groupName: string) {
+    const group = this.groups[groupName]
+    return group && Dom.hasClass(group, 'collapsed')
+  }
+
+  collapseGroups() {
+    Object.keys(this.groups).forEach((groupName) =>
+      this.collapseGroup(groupName),
+    )
+    return this
+  }
+
+  expandGroups() {
+    Object.keys(this.groups).forEach((groupName) => this.expandGroup(groupName))
+    return this
+  }
+
+  resizeGroup(groupName: string, size: { width: number; height: number }) {
+    const graph = this.graphs[groupName]
+    if (graph) {
+      graph.resize(size.width, size.height)
+    }
+    return this
+  }
+
+  addGroup(group: Stencil.Group | Stencil.Group[]) {
+    const groups = Array.isArray(group) ? group : [group]
+    if (this.options.groups) {
+      this.options.groups.push(...groups)
+    } else {
+      this.options.groups = groups
+    }
+    groups.forEach((group) => this.initGroup(group))
+  }
+
+  removeGroup(groupName: string | string[]) {
+    const groupNames = Array.isArray(groupName) ? groupName : [groupName]
+    if (this.options.groups) {
+      this.options.groups = this.options.groups.filter(
+        (group) => !groupNames.includes(group.name),
+      )
+      groupNames.forEach((groupName) => {
+        const graph = this.graphs[groupName]
+        this.unregisterGraphEvents(graph)
+        graph.dispose()
+        delete this.graphs[groupName]
+
+        const elem = this.groups[groupName]
+        Dom.remove(elem)
+        delete this.groups[groupName]
+      })
+    }
+  }
+
+  // #endregion
+
+  protected initContainer() {
     this.container = document.createElement('div')
     Dom.addClass(this.container, this.prefixClassName(ClassNames.base))
     Dom.attr(
@@ -59,7 +201,90 @@ export class Stencil extends View implements Graph.Plugin {
       'data-not-found-text',
       this.options.notFoundText || 'No matches found',
     )
+  }
 
+  protected initContent() {
+    this.content = document.createElement('div')
+    Dom.addClass(this.content, this.prefixClassName(ClassNames.content))
+    Dom.appendTo(this.content, this.container)
+  }
+
+  protected initSearch() {
+    if (this.options.search) {
+      Dom.addClass(this.container, 'searchable')
+      Dom.append(this.container, this.renderSearch())
+    }
+  }
+
+  protected initGroup(group: Stencil.Group) {
+    const globalGraphOptions = this.options.stencilGraphOptions || {}
+    const groupElem = document.createElement('div')
+    Dom.addClass(groupElem, this.prefixClassName(ClassNames.group))
+    Dom.attr(groupElem, 'data-name', group.name)
+
+    if (
+      (group.collapsable == null && this.options.collapsable) ||
+      group.collapsable !== false
+    ) {
+      Dom.addClass(groupElem, 'collapsable')
+    }
+
+    Dom.toggleClass(groupElem, 'collapsed', group.collapsed === true)
+
+    const title = document.createElement('h3')
+    Dom.addClass(title, this.prefixClassName(ClassNames.groupTitle))
+    title.innerHTML = group.title || group.name
+
+    const content = document.createElement('div')
+    Dom.addClass(content, this.prefixClassName(ClassNames.groupContent))
+
+    const graphOptionsInGroup = group.graphOptions
+    const graph = new Graph({
+      ...globalGraphOptions,
+      ...graphOptionsInGroup,
+      container: document.createElement('div'),
+      model: globalGraphOptions.model || new Model(),
+      width: group.graphWidth || this.options.stencilGraphWidth,
+      height: group.graphHeight || this.options.stencilGraphHeight,
+      interacting: false,
+      preventDefaultBlankAction: false,
+    })
+
+    this.registerGraphEvents(graph)
+
+    Dom.append(content, graph.container)
+    Dom.append(groupElem, [title, content])
+    Dom.appendTo(groupElem, this.content)
+
+    this.groups[group.name] = groupElem
+    this.graphs[group.name] = graph
+  }
+
+  protected initGroups() {
+    this.clearGroups()
+    this.setCollapsableState()
+
+    if (this.options.groups && this.options.groups.length) {
+      this.options.groups.forEach((group) => {
+        this.initGroup(group)
+      })
+    } else {
+      const globalGraphOptions = this.options.stencilGraphOptions || {}
+      const graph = new Graph({
+        ...globalGraphOptions,
+        container: document.createElement('div'),
+        model: globalGraphOptions.model || new Model(),
+        width: this.options.stencilGraphWidth,
+        height: this.options.stencilGraphHeight,
+        interacting: false,
+        preventDefaultBlankAction: false,
+      })
+      Dom.append(this.content, graph.container)
+      this.graphs[Private.defaultGroupName] = graph
+    }
+  }
+
+  protected setCollapsableState() {
     this.options.collapsable =
       this.options.collapsable &&
       this.options.groups &&
@@ -74,81 +299,19 @@ export class Stencil extends View implements Graph.Plugin {
         )
       if (collapsed) {
         Dom.addClass(this.container, 'collapsed')
+      } else {
+        Dom.removeClass(this.container, 'collapsed')
       }
+    } else {
+      Dom.removeClass(this.container, 'collapsable')
     }
+  }
 
+  protected setTitle() {
     const title = document.createElement('div')
     Dom.addClass(title, this.prefixClassName(ClassNames.title))
     title.innerHTML = this.options.title
     Dom.appendTo(title, this.container)
-
-    if (this.options.search) {
-      Dom.addClass(this.container, 'searchable')
-      Dom.append(this.container, this.renderSearch())
-    }
-
-    this.content = document.createElement('div')
-    Dom.addClass(this.content, this.prefixClassName(ClassNames.content))
-    Dom.appendTo(this.content, this.container)
-
-    const globalGraphOptions = this.options.stencilGraphOptions || {}
-
-    if (this.options.groups && this.options.groups.length) {
-      this.options.groups.forEach((group) => {
-        const groupElem = document.createElement('div')
-        Dom.addClass(groupElem, this.prefixClassName(ClassNames.group))
-        Dom.attr(groupElem, 'data-name', group.name)
-
-        if (
-          (group.collapsable == null && this.options.collapsable) ||
-          group.collapsable !== false
-        ) {
-          Dom.addClass(groupElem, 'collapsable')
-        }
-
-        Dom.toggleClass(groupElem, 'collapsed', group.collapsed === true)
-
-        const title = document.createElement('h3')
-        Dom.addClass(title, this.prefixClassName(ClassNames.groupTitle))
-        title.innerHTML = group.title || group.name
-
-        const content = document.createElement('div')
-        Dom.addClass(content, this.prefixClassName(ClassNames.groupContent))
-
-        const graphOptionsInGroup = group.graphOptions
-        const graph = new Graph({
-          ...globalGraphOptions,
-          ...graphOptionsInGroup,
-          container: document.createElement('div'),
-          model: globalGraphOptions.model || new Model(),
-          width: group.graphWidth || this.options.stencilGraphWidth,
-          height: group.graphHeight || this.options.stencilGraphHeight,
-          interacting: false,
-          preventDefaultBlankAction: false,
-        })
-
-        Dom.append(content, graph.container)
-        Dom.append(groupElem, [title, content])
-        Dom.appendTo(groupElem, this.content)
-
-        this.groups[group.name] = groupElem
-        this.graphs[group.name] = graph
-      })
-    } else {
-      const graph = new Graph({
-        ...globalGraphOptions,
-        container: document.createElement('div'),
-        model: globalGraphOptions.model || new Model(),
-        width: this.options.stencilGraphWidth,
-        height: this.options.stencilGraphHeight,
-        interacting: false,
-        preventDefaultBlankAction: false,
-      })
-      Dom.append(this.content, graph.container)
-      this.graphs[Private.defaultGroupName] = graph
-    }
-
-    this.startListening()
   }
 
   protected renderSearch() {
@@ -179,48 +342,35 @@ export class Stencil extends View implements Graph.Plugin {
       [`focusin .${searchText}`]: 'onSearchFocusIn',
       [`focusout .${searchText}`]: 'onSearchFocusOut',
     })
-
-    Object.keys(this.graphs).forEach((groupName) => {
-      const graph = this.graphs[groupName]
-      graph.on('cell:mousedown', this.onDragStart, this)
-    })
   }
 
   protected stopListening() {
     this.undelegateEvents()
-    Object.keys(this.graphs).forEach((groupName) => {
-      const graph = this.graphs[groupName]
-      graph.off('cell:mousedown', this.onDragStart, this)
-    })
   }
 
-  load(groups: { [groupName: string]: (Node | Node.Metadata)[] }): this
-  load(nodes: (Node | Node.Metadata)[], groupName?: string): this
-  load(
-    data:
-      | { [groupName: string]: (Node | Node.Metadata)[] }
-      | (Node | Node.Metadata)[],
+  protected registerGraphEvents(graph: Graph) {
+    graph.on('cell:mousedown', this.onDragStart, this)
+  }
+
+  protected unregisterGraphEvents(graph: Graph) {
+    graph.off('cell:mousedown', this.onDragStart, this)
+  }
+
+  protected loadGroup(
+    cells: (Node | Node.Metadata)[],
     groupName?: string,
+    reverse?: boolean,
   ) {
-    if (Array.isArray(data)) {
-      this.loadGroup(data, groupName)
-    } else if (this.options.groups) {
-      Object.keys(this.options.groups).forEach((groupName) => {
-        if (data[groupName]) {
-          this.loadGroup(data[groupName], groupName)
-        }
-      })
-    }
-    return this
-  }
-
-  protected loadGroup(cells: (Node | Node.Metadata)[], groupName?: string) {
     const model = this.getModel(groupName)
     if (model) {
       const nodes = cells.map((cell) =>
         Node.isNode(cell) ? cell : Node.create(cell),
       )
-      model.resetCells(nodes)
+      if (reverse === true) {
+        model.removeCells(nodes)
+      } else {
+        model.resetCells(nodes)
+      }
     }
 
     const group = this.getGroup(groupName)
@@ -251,6 +401,10 @@ export class Stencil extends View implements Graph.Plugin {
 
   protected onDragStart(args: EventArgs['node:mousedown']) {
     const { e, node } = args
+    const group = this.getGroupByNode(node)
+    if (group && group.nodeMovable === false) {
+      return
+    }
     this.dnd.start(node, e)
   }
 
@@ -402,73 +556,36 @@ export class Stencil extends View implements Graph.Plugin {
     return null
   }
 
-  toggleGroup(groupName: string) {
-    if (this.isGroupCollapsed(groupName)) {
-      this.expandGroup(groupName)
-    } else {
-      this.collapseGroup(groupName)
+  protected getGroupByNode(node: Node) {
+    const groups = this.options.groups
+    if (groups) {
+      return groups.find((group) => {
+        const model = this.getModel(group.name)
+        if (model) {
+          return model.has(node.id)
+        }
+        return false
+      })
     }
-    return this
+    return null
   }
 
-  collapseGroup(groupName: string) {
-    if (this.isGroupCollapsable(groupName)) {
-      const group = this.groups[groupName]
-      if (group && !this.isGroupCollapsed(groupName)) {
-        this.trigger('group:collapse', { name: groupName })
-        Dom.addClass(group, 'collapsed')
-      }
-    }
-    return this
-  }
-
-  expandGroup(groupName: string) {
-    if (this.isGroupCollapsable(groupName)) {
-      const group = this.groups[groupName]
-      if (group && this.isGroupCollapsed(groupName)) {
-        this.trigger('group:expand', { name: groupName })
-        Dom.removeClass(group, 'collapsed')
-      }
-    }
-    return this
-  }
-
-  isGroupCollapsable(groupName: string) {
-    const group = this.groups[groupName]
-    return Dom.hasClass(group, 'collapsable')
-  }
-
-  isGroupCollapsed(groupName: string) {
-    const group = this.groups[groupName]
-    return group && Dom.hasClass(group, 'collapsed')
-  }
-
-  collapseGroups() {
-    Object.keys(this.groups).forEach((groupName) =>
-      this.collapseGroup(groupName),
-    )
-    return this
-  }
-
-  expandGroups() {
-    Object.keys(this.groups).forEach((groupName) => this.expandGroup(groupName))
-    return this
-  }
-
-  resizeGroup(groupName: string, size: { width: number; height: number }) {
-    const graph = this.graphs[groupName]
-    if (graph) {
-      graph.resize(size.width, size.height)
-    }
-    return this
-  }
-
-  onRemove() {
+  protected clearGroups() {
     Object.keys(this.graphs).forEach((groupName) => {
       const graph = this.graphs[groupName]
-      graph.view.remove()
-      delete this.graphs[groupName]
+      this.unregisterGraphEvents(graph)
+      graph.dispose()
     })
+    Object.keys(this.groups).forEach((groupName) => {
+      const elem = this.groups[groupName]
+      Dom.remove(elem)
+    })
+    this.graphs = {}
+    this.groups = {}
+  }
+
+  protected onRemove() {
+    this.clearGroups()
     this.dnd.remove()
     this.stopListening()
     this.undelegateDocumentEvents()
@@ -512,6 +629,8 @@ export namespace Stencil {
     title?: string
     collapsed?: boolean
     collapsable?: boolean
+    nodeMovable?: boolean
+
     graphWidth?: number
     graphHeight?: number
     graphPadding?: number

packages/x6-plugin-transform/CHANGELOG.md

@@ -1,35 +0,0 @@
-## @antv/x6-plugin-transform [2.1.6](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.5...@antv/x6-plugin-transform@2.1.6) (2023-02-24)
-
-### Bug Fixes
-
-- transform active-handle class should remove when active removed ([#3298](https://github.com/antvis/x6/issues/3298)) ([709a141](https://github.com/antvis/x6/commit/709a141e28e9f25d54ece0ade353bd343ac0e55f))
-
-## @antv/x6-plugin-transform [2.1.5](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.4...@antv/x6-plugin-transform@2.1.5) (2022-12-24)
-
-### Bug Fixes
-
-- add defense for view in transform plugin ([#3092](https://github.com/antvis/x6/issues/3092)) ([fb8098c](https://github.com/antvis/x6/commit/fb8098c1c06440dd69f4e93881fd36f7e6de2a56))
-
-## @antv/x6-plugin-transform [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.3...@antv/x6-plugin-transform@2.1.4) (2022-12-07)
-
-### Bug Fixes
-
-- make resizing options take effect ([#3014](https://github.com/antvis/x6/issues/3014)) ([604c024](https://github.com/antvis/x6/commit/604c0244cd71ec8e911754dfe524f12c04e4e9ad))
-
-## @antv/x6-plugin-transform [2.1.2](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.1...@antv/x6-plugin-transform@2.1.2) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-plugin-transform [2.1.1](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.1.0...@antv/x6-plugin-transform@2.1.1) (2022-11-25)
-
-# @antv/x6-plugin-transform [2.1.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-transform@2.0.0...@antv/x6-plugin-transform@2.1.0) (2022-11-24)
-
-### Bug Fixes
-
-- add missing script for building style ([e683155](https://github.com/antvis/x6/commit/e68315528a202cbc5a9ad256d168943e001d7116))
-
-### Features
-
-- attach plugin api and events to grpah instance ([#2864](https://github.com/antvis/x6/issues/2864)) ([774f547](https://github.com/antvis/x6/commit/774f547b85522eb2411dca949d36ecfe535503f3))

packages/x6-plugin-transform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-plugin-transform",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "transform plugin for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-plugin-transform/src/transform.ts

@@ -557,6 +557,7 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
 
   @View.dispose()
   dispose() {
+    this.stopListening()
     this.remove()
     this.off()
   }

packages/x6-react-components/CHANGELOG.md

@@ -1,45 +0,0 @@
-## @antv/x6-react-components [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.6...@antv/x6-react-components@2.0.7) (2023-01-31)
-
-### Bug Fixes
-
-- don't hide when click on color picker ([#3172](https://github.com/antvis/x6/issues/3172)) ([cae8625](https://github.com/antvis/x6/commit/cae8625feb20fd93cc8002fa6ed00d345d3cf33c))
-
-## @antv/x6-react-components [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.5...@antv/x6-react-components@2.0.6) (2023-01-17)
-
-### Bug Fixes
-
-- stop propagation when click menu item ([#3147](https://github.com/antvis/x6/issues/3147)) ([90dad14](https://github.com/antvis/x6/commit/90dad14d7e1ad8639b80b215596c8f4bad7b00ed))
-
-## @antv/x6-react-components [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.4...@antv/x6-react-components@2.0.5) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-react-components [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.3...@antv/x6-react-components@2.0.4) (2022-11-25)
-
-## @antv/x6-react-components [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.2...@antv/x6-react-components@2.0.3) (2022-11-25)
-
-### Bug Fixes
-
-- support antd5 in react components ([#2933](https://github.com/antvis/x6/issues/2933)) ([2ecc213](https://github.com/antvis/x6/commit/2ecc213094250b476b533b444c0f3716f88b7987))
-- update react type version ([#2937](https://github.com/antvis/x6/issues/2937)) ([d4df46a](https://github.com/antvis/x6/commit/d4df46ab40c0f2fb6e7a76fc0083d7b4710555b9))
-
-### Performance Improvements
-
-- update deps ([f20127a](https://github.com/antvis/x6/commit/f20127af555d9b7beaac3a07ac308d5c0d4e53a3))
-
-## @antv/x6-react-components [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.2...@antv/x6-react-components@2.0.3) (2022-11-24)
-
-### Bug Fixes
-
-- support antd5 in react components ([#2933](https://github.com/antvis/x6/issues/2933)) ([2ecc213](https://github.com/antvis/x6/commit/2ecc213094250b476b533b444c0f3716f88b7987))
-- update react type version ([#2937](https://github.com/antvis/x6/issues/2937)) ([d4df46a](https://github.com/antvis/x6/commit/d4df46ab40c0f2fb6e7a76fc0083d7b4710555b9))
-
-## @antv/x6-react-components [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.1...@antv/x6-react-components@2.0.2) (2022-11-24)
-
-### Bug Fixes
-
-- updae react-resize-detector version ([#2930](https://github.com/antvis/x6/issues/2930)) ([d6ae519](https://github.com/antvis/x6/commit/d6ae5199c00be6429a828f537b194adddd2b6aeb))
-
-## @antv/x6-react-components [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-react-components@2.0.0...@antv/x6-react-components@2.0.1) (2022-11-24)

packages/x6-react-shape/CHANGELOG.md

@@ -1,19 +0,0 @@
-## @antv/x6-react-shape [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-react-shape@2.0.3...@antv/x6-react-shape@2.0.4) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-react-shape [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-react-shape@2.0.2...@antv/x6-react-shape@2.0.3) (2022-11-25)
-
-## @antv/x6-react-shape [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-react-shape@2.0.1...@antv/x6-react-shape@2.0.2) (2022-11-25)
-
-### Performance Improvements
-
-- update deps ([f20127a](https://github.com/antvis/x6/commit/f20127af555d9b7beaac3a07ac308d5c0d4e53a3))
-
-## @antv/x6-react-shape [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-react-shape@2.0.0...@antv/x6-react-shape@2.0.1) (2022-11-24)
-
-### Bug Fixes
-
-- optimize typo for react-shape ([#2870](https://github.com/antvis/x6/issues/2870)) ([86412e2](https://github.com/antvis/x6/commit/86412e23d242347d6ee1c9ccd63a6ccf3caf4c49))

packages/x6-react-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-shape",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "X6 shape for rendering react components.",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -32,7 +32,7 @@ export class ReactShapeView extends NodeView<ReactShape> {
     if (container) {
       const elem = React.createElement(Wrap, { node, graph: this.graph })
       if (Portal.isActive()) {
-        const portal = createPortal(elem, container) as ReactPortal
+        const portal = createPortal(elem, container, node.id) as ReactPortal
         Portal.connect(this.targetId(), portal)
       } else {
         this.root = createRoot(container)

packages/x6-vue-shape/CHANGELOG.md

@@ -1,27 +0,0 @@
-## @antv/x6-vue-shape [2.0.9](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.8...@antv/x6-vue-shape@2.0.9) (2022-12-21)
-
-### Bug Fixes
-
-- get graph from right place ([#3078](https://github.com/antvis/x6/issues/3078)) ([844ee5f](https://github.com/antvis/x6/commit/844ee5fa043cbcd788ec1693f88576e797426228))
-
-## @antv/x6-vue-shape [2.0.7](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.6...@antv/x6-vue-shape@2.0.7) (2022-12-09)
-
-### Bug Fixes
-
-- cannot read properties of undefined when unmount vue component ([#3024](https://github.com/antvis/x6/issues/3024)) ([187e318](https://github.com/antvis/x6/commit/187e318aee8622591781d3b8fc45d72a4d54a989))
-
-## @antv/x6-vue-shape [2.0.4](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.3...@antv/x6-vue-shape@2.0.4) (2022-11-25)
-
-### Bug Fixes
-
-- npm version ([cb0cfde](https://github.com/antvis/x6/commit/cb0cfdeb4dbe8858569e6899db08ccb9ab8ba4e7))
-
-## @antv/x6-vue-shape [2.0.3](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.2...@antv/x6-vue-shape@2.0.3) (2022-11-25)
-
-## @antv/x6-vue-shape [2.0.2](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.1...@antv/x6-vue-shape@2.0.2) (2022-11-24)
-
-### Bug Fixes
-
-- updae react-resize-detector version ([#2930](https://github.com/antvis/x6/issues/2930)) ([d6ae519](https://github.com/antvis/x6/commit/d6ae5199c00be6429a828f537b194adddd2b6aeb))
-
-## @antv/x6-vue-shape [2.0.1](https://github.com/antvis/x6/compare/@antv/x6-vue-shape@2.0.0...@antv/x6-vue-shape@2.0.1) (2022-11-24)

packages/x6-vue-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-vue-shape",
-  "version": "2.0.11",
+  "version": "2.1.2",
   "description": "X6 shape for rendering vue components.",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -1,4 +1,4 @@
-import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
+import { defineComponent, h, reactive, isVue3, Teleport, markRaw, Fragment } from 'vue-demi'
 import { Graph } from '@antv/x6'
 import { VueShape } from './node'
 
@@ -13,10 +13,9 @@ export function connect(
   graph: Graph,
 ) {
   if (active) {
-    const { Teleport, markRaw } = Vue as any
     items[id] = markRaw(
       defineComponent({
-        render: () => h(Teleport, { to: container } as any, [h(component)]),
+        render: () => h(Teleport, { to: container } as any, [h(component, { node, graph })]),
         provide: () => ({
           getNode: () => node,
           getGraph: () => graph,
@@ -41,7 +40,6 @@ export function getTeleport(): any {
     throw new Error('teleport is only available in Vue3')
   }
   active = true
-  const { Fragment } = Vue as any
 
   return defineComponent({
     setup() {

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

@@ -36,7 +36,7 @@ export class VueShapeView extends NodeView<VueShape> {
           this.vm = new Vue({
             el: root,
             render(h: any) {
-              return h(component)
+              return h(component, { node, graph })
             },
             provide() {
               return {
@@ -51,7 +51,7 @@ export class VueShapeView extends NodeView<VueShape> {
           } else {
             this.vm = createApp({
               render() {
-                return h(component)
+                return h(component, { node, graph })
               },
               provide() {
                 return {

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.11.3",
+  "version": "2.18.1",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,7 +44,7 @@
     "pretest": "rss"
   },
   "dependencies": {
-    "@antv/x6-common": "^2.0.13",
+    "@antv/x6-common": "^2.0.16",
     "@antv/x6-geometry": "^2.0.5",
     "utility-types": "^3.10.0"
   },

packages/x6/src/graph/graph.ts

@@ -1262,6 +1262,7 @@ export class Graph extends Basecoat<EventArgs> {
     const aboutToChangePlugins = this.getPlugins(postPlugins)
     aboutToChangePlugins?.forEach((plugin) => {
       plugin.dispose()
+      this.installedPlugins.delete(plugin)
     })
     return this
   }
@@ -1271,9 +1272,10 @@ export class Graph extends Basecoat<EventArgs> {
   // #region dispose
 
   @Basecoat.dispose()
-  dispose() {
-    this.clearCells()
-    this.off()
+  dispose(clean = true) {
+    if (clean) {
+      this.model.dispose()
+    }
 
     this.css.dispose()
     this.defs.dispose()
@@ -1306,6 +1308,7 @@ export namespace Graph {
   export import TransformManager = Transform
   export import HighlightManager = Highlight
   export import BackgroundManager = Background
+  export import PanningManager = Panning
 }
 
 export namespace Graph {

packages/x6/src/graph/index.ts

@@ -3,3 +3,4 @@ export * from './view'
 export * from './events'
 export * from './transform'
 export * from './background'
+export * from './options'

packages/x6/src/graph/mousewheel.ts

@@ -50,7 +50,7 @@ export class MouseWheel extends Base {
     const guard = this.widgetOptions.guard
 
     return (
-      (guard == null || guard.call(e)) &&
+      (guard == null || guard(e)) &&
       ModifierKey.isMatch(e, this.widgetOptions.modifiers)
     )
   }
@@ -59,7 +59,7 @@ export class MouseWheel extends Base {
     const guard = this.widgetOptions.guard
 
     if (
-      (guard == null || guard.call(e)) &&
+      (guard == null || guard(e)) &&
       ModifierKey.isMatch(e, this.widgetOptions.modifiers)
     ) {
       const factor = this.widgetOptions.factor || 1.2
@@ -81,9 +81,9 @@ export class MouseWheel extends Base {
           // webkit and to avoid rounding errors for zoom steps
           this.cumulatedFactor =
             Math.round(this.currentScale * factor * 20) / 20 / this.currentScale
-          if (this.cumulatedFactor === 1) {
-            this.cumulatedFactor = 1.05
-          }
+        }
+        if (this.cumulatedFactor <= 1) {
+          this.cumulatedFactor = 1.05
         }
       } else {
         // zoomout
@@ -98,9 +98,9 @@ export class MouseWheel extends Base {
             Math.round(this.currentScale * (1 / factor) * 20) /
             20 /
             this.currentScale
-          if (this.cumulatedFactor === 1) {
-            this.cumulatedFactor = 0.95
-          }
+        }
+        if (this.cumulatedFactor >= 1) {
+          this.cumulatedFactor = 0.95
         }
       }
 
@@ -114,6 +114,7 @@ export class MouseWheel extends Base {
       let targetScale = this.graph.transform.clampScale(
         currentScale * this.cumulatedFactor,
       )
+
       const minScale = this.widgetOptions.minScale || Number.MIN_SAFE_INTEGER
       const maxScale = this.widgetOptions.maxScale || Number.MAX_SAFE_INTEGER
       targetScale = NumberExt.clamp(targetScale, minScale, maxScale)

packages/x6/src/graph/options.ts

@@ -54,7 +54,9 @@ export namespace Options {
     guard: (e: Dom.EventObject, view?: CellView | null) => boolean
 
     onPortRendered?: (args: OnPortRenderedArgs) => void
-    onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
+    onEdgeLabelRendered?: (
+      args: OnEdgeLabelRenderedArgs,
+    ) => undefined | ((args: OnEdgeLabelRenderedArgs) => void)
 
     createCellView?: (
       this: Graph,
@@ -109,7 +111,7 @@ export namespace Options {
     /**
      * Snap edge to the closest node/port in the given radius on dragging.
      */
-    snap: boolean | { radius: number }
+    snap: boolean | { radius: number; anchor?: 'center' | 'bbox' }
 
     /**
      * Specify whether connect to point on the graph is allowed.

packages/x6/src/graph/panning.ts

@@ -6,6 +6,7 @@ export class PanningManager extends Base {
   private clientX: number
   private clientY: number
   private mousewheelHandle: Dom.MouseWheelHandle
+  private isSpaceKeyPressed: boolean
 
   protected get widgetOptions() {
     return this.options.panning
@@ -16,69 +17,53 @@ export class PanningManager extends Base {
   }
 
   protected init() {
+    this.onRightMouseDown = this.onRightMouseDown.bind(this)
+    this.onSpaceKeyDown = this.onSpaceKeyDown.bind(this)
+    this.onSpaceKeyUp = this.onSpaceKeyUp.bind(this)
     this.startListening()
     this.updateClassName()
   }
 
   protected startListening() {
-    const eventTypes = this.widgetOptions.eventTypes
-    if (!eventTypes) {
-      return
-    }
-    if (eventTypes.includes('leftMouseDown')) {
-      this.graph.on('blank:mousedown', this.preparePanning, this)
-      this.graph.on('node:unhandled:mousedown', this.preparePanning, this)
-      this.graph.on('edge:unhandled:mousedown', this.preparePanning, this)
-    }
-    if (eventTypes.includes('rightMouseDown')) {
-      this.onRightMouseDown = this.onRightMouseDown.bind(this)
-      Dom.Event.on(this.graph.container, 'mousedown', this.onRightMouseDown)
-    }
-    if (eventTypes.includes('mouseWheel')) {
-      this.mousewheelHandle = new Dom.MouseWheelHandle(
-        this.graph.container,
-        this.onMouseWheel.bind(this),
-        this.allowMouseWheel.bind(this),
-      )
-      this.mousewheelHandle.enable()
-    }
+    this.graph.on('blank:mousedown', this.onMouseDown, this)
+    this.graph.on('node:unhandled:mousedown', this.onMouseDown, this)
+    this.graph.on('edge:unhandled:mousedown', this.onMouseDown, this)
+    Dom.Event.on(this.graph.container, 'mousedown', this.onRightMouseDown)
+    Dom.Event.on(document.body, {
+      keydown: this.onSpaceKeyDown,
+      keyup: this.onSpaceKeyUp,
+    })
+    this.mousewheelHandle = new Dom.MouseWheelHandle(
+      this.graph.container,
+      this.onMouseWheel.bind(this),
+      this.allowMouseWheel.bind(this),
+    )
+    this.mousewheelHandle.enable()
   }
 
   protected stopListening() {
-    const eventTypes = this.widgetOptions.eventTypes
-    if (!eventTypes) {
-      return
-    }
-    if (eventTypes.includes('leftMouseDown')) {
-      this.graph.off('blank:mousedown', this.preparePanning, this)
-      this.graph.off('node:unhandled:mousedown', this.preparePanning, this)
-      this.graph.off('edge:unhandled:mousedown', this.preparePanning, this)
-    }
-    if (eventTypes.includes('rightMouseDown')) {
-      Dom.Event.off(this.graph.container, 'mousedown', this.onRightMouseDown)
-    }
-    if (eventTypes.includes('mouseWheel')) {
-      if (this.mousewheelHandle) {
-        this.mousewheelHandle.disable()
-      }
-    }
-  }
-
-  protected preparePanning({ e }: { e: Dom.MouseDownEvent }) {
-    const selection = this.graph.getPlugin<any>('selection')
-    const allowRubberband = selection && selection.allowRubberband(e, true)
-    if (
-      this.allowPanning(e, true) ||
-      (this.allowPanning(e) && !allowRubberband)
-    ) {
-      this.startPanning(e)
+    this.graph.off('blank:mousedown', this.onMouseDown, this)
+    this.graph.off('node:unhandled:mousedown', this.onMouseDown, this)
+    this.graph.off('edge:unhandled:mousedown', this.onMouseDown, this)
+    Dom.Event.off(this.graph.container, 'mousedown', this.onRightMouseDown)
+    Dom.Event.off(document.body, {
+      keydown: this.onSpaceKeyDown,
+      keyup: this.onSpaceKeyUp,
+    })
+    if (this.mousewheelHandle) {
+      this.mousewheelHandle.disable()
     }
   }
 
   allowPanning(e: Dom.MouseDownEvent, strict?: boolean) {
+    ;(e as any).spaceKey = this.isSpaceKeyPressed
     return (
       this.pannable &&
-      ModifierKey.isMatch(e, this.widgetOptions.modifiers, strict)
+      ModifierKey.isMatch(
+        e,
+        this.widgetOptions.modifiers as ModifierKey,
+        strict,
+      )
     )
   }
 
@@ -131,21 +116,60 @@ export class PanningManager extends Base {
     }
   }
 
-  protected onRightMouseDown(e: Dom.MouseDownEvent) {
-    if (e.button === 2 && this.allowPanning(e, true)) {
+  protected onMouseDown({ e }: { e: Dom.MouseDownEvent }) {
+    if (!this.allowBlankMouseDown(e)) {
+      return
+    }
+
+    const selection = this.graph.getPlugin<any>('selection')
+    const allowRubberband = selection && selection.allowRubberband(e, true)
+    if (
+      this.allowPanning(e, true) ||
+      (this.allowPanning(e) && !allowRubberband)
+    ) {
       this.startPanning(e)
     }
   }
 
-  protected allowMouseWheel(e: WheelEvent) {
-    return this.pannable && !e.ctrlKey
+  protected onRightMouseDown(e: Dom.MouseDownEvent) {
+    const eventTypes = this.widgetOptions.eventTypes
+    if (!(eventTypes?.includes('rightMouseDown') && e.button === 2)) {
+      return
+    }
+    if (this.allowPanning(e, true)) {
+      this.startPanning(e)
+    }
   }
 
   protected onMouseWheel(e: WheelEvent, deltaX: number, deltaY: number) {
-    if (!e.ctrlKey) {
-      this.graph.translateBy(-deltaX, -deltaY)
+    this.graph.translateBy(-deltaX, -deltaY)
+  }
+
+  protected onSpaceKeyDown(e: Dom.KeyDownEvent) {
+    if (e.which === 32) {
+      this.isSpaceKeyPressed = true
     }
   }
+  protected onSpaceKeyUp(e: Dom.KeyUpEvent) {
+    if (e.which === 32) {
+      this.isSpaceKeyPressed = false
+    }
+  }
+  protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
+    const eventTypes = this.widgetOptions.eventTypes
+    return (
+      (eventTypes?.includes('leftMouseDown') && e.button === 0) ||
+      (eventTypes?.includes('mouseWheelDown') && e.button === 1)
+    )
+  }
+
+  protected allowMouseWheel(e: WheelEvent) {
+    return (
+      this.pannable &&
+      !e.ctrlKey &&
+      this.widgetOptions.eventTypes?.includes('mouseWheel')
+    )
+  }
 
   autoPanning(x: number, y: number) {
     const buffer = 10
@@ -195,10 +219,14 @@ export class PanningManager extends Base {
 }
 
 export namespace PanningManager {
-  type EventType = 'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
+  type EventType =
+    | 'leftMouseDown'
+    | 'rightMouseDown'
+    | 'mouseWheel'
+    | 'mouseWheelDown'
   export interface Options {
     enabled?: boolean
-    modifiers?: string | ModifierKey[] | null
+    modifiers?: string | Array<ModifierKey | 'space'> | null
     eventTypes?: EventType[]
   }
 }

packages/x6/src/graph/view.ts

@@ -18,6 +18,11 @@ export class GraphView extends View {
 
   private restore: () => void
 
+  /** Graph's `this.container` is from outer, should not dispose */
+  protected get disposeContainer(): boolean {
+    return false
+  }
+
   protected get options() {
     return this.graph.options
   }

packages/x6/src/model/collection.ts

@@ -313,6 +313,11 @@ export class Collection extends Basecoat<Collection.EventArgs> {
     this.cells = []
     this.map = {}
   }
+
+  @Collection.dispose()
+  dispose() {
+    this.reset([])
+  }
 }
 
 export namespace Collection {

packages/x6/src/model/edge.ts

@@ -793,7 +793,7 @@ export class Edge<
 
     // Unembeds the edge if source and target has no common
     // ancestor or common ancestor changed
-    if (prevParent && (!newParent || newParent.id !== prevParent.id)) {
+    if (prevParent && newParent && newParent.id !== prevParent.id) {
       prevParent.unembed(this, options)
     }
 

packages/x6/src/model/model.ts

@@ -340,6 +340,7 @@ export class Model extends Basecoat<Model.EventArgs> {
   }
 
   updateCellId(cell: Cell, newId: string) {
+    if (cell.id === newId) return
     this.startBatch('update', { id: newId })
     cell.prop('id', newId)
     const newCell = cell.clone({ keepId: true })
@@ -1322,6 +1323,11 @@ export class Model extends Basecoat<Model.EventArgs> {
   }
 
   // #endregion
+
+  @Model.dispose()
+  dispose() {
+    this.collection.dispose()
+  }
 }
 
 export namespace Model {

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

@@ -96,7 +96,8 @@ export const textWrap: Attr.Definition = {
     let wrappedText
     let txt = info.text
     if (txt == null) {
-      txt = attrs.text
+      // the edge of the label is assigned to txt
+      txt = attrs.text || elem?.textContent
     }
 
     if (txt != null) {

packages/x6/src/registry/connector/jumpover.ts

@@ -68,6 +68,18 @@ function findLineIntersections(line: Line, crossCheckLines: Line[]) {
   crossCheckLines.forEach((crossCheckLine) => {
     const intersection = line.intersectsWithLine(crossCheckLine)
     if (intersection) {
+      const { x, y } = intersection;
+      const { start, end } = crossCheckLine;
+      const startIsIntersection =
+        Math.round(start.x) === Math.round(x) &&
+        Math.round(start.y) === Math.round(y);
+      const endIsIntersection =
+        Math.round(end.x) === Math.round(x) &&
+        Math.round(end.y) === Math.round(y);
+      //If the starting or ending point is the same as the intersection point, return
+      if (startIsIntersection || endIsIntersection) {
+        return;
+      }
       intersections.push(intersection)
     }
   })

packages/x6/src/registry/node-anchor/bbox.ts

@@ -35,9 +35,14 @@ function createBBoxAnchor(
     | 'bottomRight',
 ): NodeAnchor.Definition<BBoxEndpointOptions> {
   return function (view, magnet, ref, options: BBoxEndpointOptions = {}) {
-    const bbox = options.rotate
-      ? view.getUnrotatedBBoxOfElement(magnet)
-      : view.getBBoxOfElement(magnet)
+    let bbox
+    if (view.cell.visible) {
+      bbox = options.rotate
+        ? view.getUnrotatedBBoxOfElement(magnet)
+        : view.getBBoxOfElement(magnet)
+    } else {
+      bbox = view.cell.getBBox()
+    }
     const result = bbox[method]
 
     result.x += NumberExt.normalizePercentage(options.dx, bbox.width)

packages/x6/src/registry/node-anchor/middle-side.ts

@@ -20,7 +20,11 @@ const middleSide: NodeAnchor.ResolvedDefinition<MiddleSideEndpointOptions> =
       center = node.getBBox().getCenter()
       angle = node.getAngle()
     } else {
-      bbox = view.getBBoxOfElement(magnet)
+      if (node.visible) {
+        bbox = view.getBBoxOfElement(magnet)
+      } else {
+        bbox = view.cell.getBBox()
+      }
     }
 
     const padding = options.padding

packages/x6/src/registry/node-anchor/orth.ts

@@ -8,8 +8,10 @@ export interface OrthEndpointOptions extends ResolveOptions {
 
 const orthogonal: NodeAnchor.ResolvedDefinition<OrthEndpointOptions> =
   function (view, magnet, refPoint, options) {
-    const angle = view.cell.getAngle()
-    const bbox = view.getBBoxOfElement(magnet)
+    const angle = Angle.normalize(view.cell.getAngle())
+    const bbox = view.cell.visible
+      ? view.getBBoxOfElement(magnet)
+      : view.cell.getBBox()
     const result = bbox.getCenter()
     const topLeft = bbox.getTopLeft()
     const bottomRight = bbox.getBottomRight()

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

@@ -87,7 +87,7 @@ export class ObstacleMap {
       const excluded =
         excludedShape || excludedTerminal || excludedNode || excludedAncestor
 
-      if (!excluded) {
+      if (node.isVisible() && !excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)
         const origin = bbox.getOrigin().snapToGrid(mapGridSize)
         const corner = bbox.getCorner().snapToGrid(mapGridSize)

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

@@ -84,6 +84,7 @@ export class CellEditor extends ToolsView.ToolItem<
     let minWidth = 20
     let translate = ''
     let { x, y } = this.options
+    const { width, height } = this.options
 
     if (typeof x !== 'undefined' && typeof y !== 'undefined') {
       const bbox = cell.getBBox()
@@ -105,6 +106,13 @@ export class CellEditor extends ToolsView.ToolItem<
     style.top = `${pos.y}px`
     style.transform = `scale(${scale.sx}, ${scale.sy}) ${translate}`
     style.minWidth = `${minWidth}px`
+
+    if (typeof width === 'number') {
+      style.width = `${width}px`
+    }
+    if (typeof height === 'number') {
+      style.height = `${height}px`
+    }
   }
 
   updateEdgeEditorTransform() {
@@ -152,7 +160,7 @@ export class CellEditor extends ToolsView.ToolItem<
     style.transform = `scale(${scale.sx}, ${scale.sy}) translate(-50%, -50%)`
   }
 
-  onDocumentMouseDown(e: Dom.MouseDownEvent) {
+  onDocumentMouseUp(e: Dom.MouseDownEvent) {
     if (this.editor && e.target !== this.editor) {
       const value = this.editor.innerText.replace(/\n$/, '') || ''
       // set value, when value is null, we will remove label in edge
@@ -163,13 +171,15 @@ export class CellEditor extends ToolsView.ToolItem<
   }
 
   onCellDblClick({ e }: { e: Dom.DoubleClickEvent }) {
-    e.stopPropagation()
-    this.removeElement()
-    this.event = e
-    this.createElement()
-    this.updateEditor()
-    this.autoFocus()
-    this.delegateDocumentEvents(this.options.documentEvents!)
+    if (!this.editor) {
+      e.stopPropagation()
+      this.removeElement()
+      this.event = e
+      this.createElement()
+      this.updateEditor()
+      this.autoFocus()
+      this.delegateDocumentEvents(this.options.documentEvents!)
+    }
   }
 
   onMouseDown(e: Dom.MouseDownEvent) {
@@ -270,6 +280,8 @@ export namespace CellEditor {
   export interface CellEditorOptions extends ToolsView.ToolItem.Options {
     x?: number | string
     y?: number | string
+    width?: number
+    height?: number
     attrs: {
       fontSize: number
       fontFamily: string
@@ -306,9 +318,12 @@ export namespace CellEditor {
     isSVGElement: false,
     events: {
       mousedown: 'onMouseDown',
+      touchstart: 'onMouseDown',
     },
     documentEvents: {
-      mousedown: 'onDocumentMouseDown',
+      mouseup: 'onDocumentMouseUp',
+      touchend: 'onDocumentMouseUp',
+      touchcancel: 'onDocumentMouseUp',
     },
   })
 }

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

@@ -1,5 +1,5 @@
 import { Point } from '@antv/x6-geometry'
-import { Dom } from '@antv/x6-common'
+import { Dom, ModifierKey } from '@antv/x6-common'
 import { Config } from '../../config'
 import { View } from '../../view/view'
 import { ToolsView } from '../../view/tool'
@@ -145,6 +145,7 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
     edgeView.cell.startBatch('move-vertex', { ui: true, toolId: this.cid })
     if (!this.options.stopPropagation) {
       const { e: evt, x, y } = this.getMouseEventArgs(e)
+      this.eventData(evt, { start: { x, y } })
       edgeView.notifyMouseDown(evt, x, y)
     }
   }
@@ -165,6 +166,13 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
     }
   }
 
+  protected stopBatch(vertexAdded: boolean) {
+    this.cell.stopBatch('move-vertex', { ui: true, toolId: this.cid })
+    if (vertexAdded) {
+      this.cell.stopBatch('add-vertex', { ui: true, toolId: this.cid })
+    }
+  }
+
   protected onHandleChanged({ e }: Vertices.Handle.EventArgs['changed']) {
     const options = this.options
     const edgeView = this.cellView
@@ -174,6 +182,7 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
     }
 
     if (!options.removeRedundancies) {
+      this.stopBatch(this.eventData(e).vertexAdded)
       return
     }
 
@@ -188,16 +197,19 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
 
     this.blur()
 
-    edgeView.cell.stopBatch('move-vertex', { ui: true, toolId: this.cid })
-
-    if (this.eventData(e).vertexAdded) {
-      edgeView.cell.stopBatch('add-vertex', { ui: true, toolId: this.cid })
-    }
+    this.stopBatch(this.eventData(e).vertexAdded)
 
     const { e: evt, x, y } = this.getMouseEventArgs(e)
 
     if (!this.options.stopPropagation) {
       edgeView.notifyMouseUp(evt, x, y)
+      const { start } = this.eventData(evt)
+      if (start) {
+        const { x: startX, y: startY } = start
+        if (startX === x && startY === y) {
+          edgeView.onClick(evt as unknown as Dom.ClickEvent, x, y)
+        }
+      }
     }
 
     edgeView.checkMouseleave(evt)
@@ -237,14 +249,19 @@ export class Vertices extends ToolsView.ToolItem<EdgeView, Vertices.Options> {
     }
   }
 
+  protected allowAddVertex(e: Dom.MouseDownEvent) {
+    const guard = this.guard(e)
+    const addable = this.options.addable && this.cellView.can('vertexAddable')
+    const matchModifiers = this.options.modifiers
+      ? ModifierKey.isMatch(e, this.options.modifiers)
+      : true
+    return !guard && addable && matchModifiers
+  }
+
   protected onPathMouseDown(evt: Dom.MouseDownEvent) {
     const edgeView = this.cellView
 
-    if (
-      this.guard(evt) ||
-      !this.options.addable ||
-      !edgeView.can('vertexAddable')
-    ) {
+    if (!this.allowAddVertex(evt)) {
       return
     }
 
@@ -278,6 +295,7 @@ export namespace Vertices {
     removable?: boolean
     removeRedundancies?: boolean
     stopPropagation?: boolean
+    modifiers?: string | ModifierKey[]
     attrs?: Attr.SimpleAttrs | ((handle: Handle) => Attr.SimpleAttrs)
     createHandle?: (options: Handle.Options) => Handle
     processHandle?: (handle: Handle) => void

packages/x6/src/renderer/queueJob.ts

@@ -140,9 +140,9 @@ export interface Job {
 }
 
 export enum JOB_PRIORITY {
-  RenderEdge = /**/ 1 << 1,
-  RenderNode = /**/ 1 << 2,
-  Update = /*    */ 1 << 3,
+  Update = /*    */ 1 << 1,
+  RenderEdge = /**/ 1 << 2,
+  RenderNode = /**/ 1 << 3,
   PRIOR = /*     */ 1 << 20,
 }
 

packages/x6/src/renderer/scheduler.ts

@@ -54,7 +54,8 @@ export class Scheduler extends Disposable {
     this.queue.clearJobs()
     this.removeZPivots()
     this.resetViews()
-    this.renderViews(this.model.getCells(), options)
+    const cells = this.model.getCells()
+    this.renderViews(cells, { ...options, queue: cells.map((cell) => cell.id) })
   }
 
   protected onCellAdded({ cell, options }: Model.EventArgs['cell:added']) {
@@ -106,7 +107,7 @@ export class Scheduler extends Disposable {
     viewItem.options = options
 
     const priorAction = view.hasAction(flag, ['translate', 'resize', 'rotate'])
-    if (view.isNodeView() && priorAction) {
+    if (priorAction || options.async === false) {
       priority = JOB_PRIORITY.PRIOR // eslint-disable-line
       flush = false // eslint-disable-line
     }
@@ -116,6 +117,16 @@ export class Scheduler extends Disposable {
       priority,
       cb: () => {
         this.renderViewInArea(view, flag, options)
+        const queue = options.queue
+        if (queue) {
+          const index = queue.indexOf(view.cell.id)
+          if (index >= 0) {
+            queue.splice(index, 1)
+          }
+          if (queue.length === 0) {
+            this.graph.trigger('render:done')
+          }
+        }
       },
     })
 
@@ -513,6 +524,11 @@ export class Scheduler extends Disposable {
   @Disposable.dispose()
   dispose() {
     this.stopListening()
+    // clear views
+    Object.keys(this.views).forEach((id) => {
+      this.views[id].view.dispose()
+    })
+    this.views = {}
   }
 }
 export namespace Scheduler {
@@ -537,5 +553,6 @@ export namespace Scheduler {
   export interface EventArgs {
     'view:mounted': { view: CellView }
     'view:unmounted': { view: CellView }
+    'render:done': null
   }
 }

packages/x6/src/shape/html.ts

@@ -17,15 +17,17 @@ export namespace HTML {
   export class View extends NodeView<HTML> {
     protected init() {
       super.init()
-      this.cell.on('change:*', ({ key }) => {
-        const content = shapeMaps[this.cell.shape]
-        if (content) {
-          const { effect } = content
-          if (!effect || effect.includes(key)) {
-            this.renderHTMLComponent()
-          }
+      this.cell.on('change:*', this.onCellChangeAny, this)
+    }
+
+    protected onCellChangeAny({ key }: Cell.EventArgs['change:*']) {
+      const content = shapeMaps[this.cell.shape]
+      if (content) {
+        const { effect } = content
+        if (!effect || effect.includes(key)) {
+          this.renderHTMLComponent()
         }
-      })
+      }
     }
 
     confirmUpdate(flag: number) {
@@ -58,6 +60,11 @@ export namespace HTML {
         }
       }
     }
+
+    @View.dispose()
+    dispose() {
+      this.cell.off('change:*', this.onCellChangeAny, this)
+    }
   }
 
   export namespace View {

packages/x6/src/shape/index.ts

@@ -1,12 +1,10 @@
 export * from './rect'
 export * from './edge'
-export * from './rect'
 export * from './ellipse'
 export * from './polygon'
 export * from './polyline'
 export * from './path'
 export * from './text-block'
 export * from './image'
-export * from './edge'
 export * from './circle'
 export * from './html'

packages/x6/src/util/index.ts

@@ -10,8 +10,6 @@ import { Dom, PointData, PointLike } from '@antv/x6-common'
 import { normalize } from '../registry/marker/util'
 
 export namespace Util {
-  const svgDocument = Dom.createSvgElement('svg') as SVGSVGElement
-
   export const normalizeMarker = normalize
   /**
    * Transforms point by an SVG transformation represented by `matrix`.
@@ -47,6 +45,7 @@ export namespace Util {
     rect: Rectangle.RectangleLike,
     matrix: DOMMatrix,
   ) {
+    const svgDocument = Dom.createSvgElement('svg') as SVGSVGElement
     const p = svgDocument.createSVGPoint()
 
     p.x = rect.x
@@ -405,6 +404,14 @@ export namespace Util {
     }
 
     const shape = toGeometryShape(node)
-    return shape.bbox() || Rectangle.create()
+    const bbox = shape.bbox() || Rectangle.create()
+
+    // const transform = node.getAttribute('transform')
+    // if (transform) {
+    //   const nodeMatrix = Dom.transformStringToMatrix(transform)
+    //   return transformRectangle(bbox, nodeMatrix)
+    // }
+
+    return bbox
   }
 }

packages/x6/src/view/cell.ts

@@ -251,7 +251,11 @@ export class CellView<
   }
 
   protected setup() {
-    this.cell.on('changed', ({ options }) => this.onAttrsChange(options))
+    this.cell.on('changed', this.onCellChanged, this)
+  }
+
+  protected onCellChanged({ options }: Cell.EventArgs['changed']) {
+    this.onAttrsChange(options)
   }
 
   protected onAttrsChange(options: Cell.MutateOptions) {
@@ -552,11 +556,11 @@ export class CellView<
   addTools(options: ToolsView.Options | null): this
   addTools(tools: ToolsView | null): this
   addTools(config: ToolsView | ToolsView.Options | null) {
-    if (!this.can('toolsAddable')) {
-      return this
-    }
     this.removeTools()
     if (config) {
+      if (!this.can('toolsAddable')) {
+        return this
+      }
       const tools = ToolsView.isToolsView(config)
         ? config
         : new ToolsView(config)
@@ -739,6 +743,11 @@ export class CellView<
     view.onMouseEnter(e as Dom.MouseEnterEvent)
   }
 
+  @CellView.dispose()
+  dispose() {
+    this.cell.off('changed', this.onCellChanged, this)
+  }
+
   // #endregion
 }
 

packages/x6/src/view/edge.ts

@@ -51,6 +51,9 @@ export class EdgeView<
   protected labelContainer: Element | null
   protected labelCache: { [index: number]: Element }
   protected labelSelectors: { [index: number]: Markup.Selectors }
+  protected labelDestroyFn: {
+    [index: number]: (args: GraphOptions.OnEdgeLabelRenderedArgs) => void
+  } = {}
 
   protected get [Symbol.toStringTag]() {
     return EdgeView.toStringTag
@@ -162,15 +165,40 @@ export class EdgeView<
         const selectors = this.labelSelectors[i]
         const onEdgeLabelRendered = this.graph.options.onEdgeLabelRendered
         if (onEdgeLabelRendered) {
-          onEdgeLabelRendered({
+          const fn = onEdgeLabelRendered({
             edge,
             label,
             container,
             selectors,
           })
+          if (fn) {
+            this.labelDestroyFn[i] = fn
+          }
+        }
+      }
+    }
+  }
+
+  protected destroyCustomizeLabels() {
+    const labels = this.cell.labels
+
+    if (this.labelCache && this.labelSelectors && this.labelDestroyFn) {
+      for (let i = 0, n = labels.length; i < n; i += 1) {
+        const fn = this.labelDestroyFn[i]
+        const container = this.labelCache[i]
+        const selectors = this.labelSelectors[i]
+        if (fn && container && selectors) {
+          fn({
+            edge: this.cell,
+            label: labels[i],
+            container,
+            selectors,
+          })
         }
       }
     }
+
+    this.labelDestroyFn = {}
   }
 
   protected renderLabels() {
@@ -241,6 +269,8 @@ export class EdgeView<
   }
 
   onLabelsChange(options: any = {}) {
+    this.destroyCustomizeLabels()
+
     if (this.shouldRerenderLabels(options)) {
       this.renderLabels()
     } else {
@@ -376,7 +406,7 @@ export class EdgeView<
     this.cleanCache()
     this.updateConnection(options)
 
-    const attrs = this.cell.getAttrs()
+    const { text, ...attrs } = this.cell.getAttrs()
     if (attrs != null) {
       this.updateAttrs(this.container, attrs, {
         selectors: this.selectors,
@@ -917,15 +947,18 @@ export class EdgeView<
 
     for (let i = 0, ii = labels.length; i < ii; i += 1) {
       const label = labels[i]
+      const labelNode = this.labelCache[i]
+
+      if (!labelNode) {
+        continue
+      }
+
       const labelPosition = this.normalizeLabelPosition(
         label.position as Edge.LabelPosition,
       )
       const pos = ObjectExt.merge({}, defaultPosition, labelPosition)
       const matrix = this.getLabelTransformationMatrix(pos)
-      this.labelCache[i].setAttribute(
-        'transform',
-        Dom.matrixToTransformString(matrix),
-      )
+      labelNode.setAttribute('transform', Dom.matrixToTransformString(matrix))
     }
 
     return this
@@ -1965,6 +1998,7 @@ export class EdgeView<
     const graph = this.graph
     const { snap, allowEdge } = graph.options.connecting
     const radius = (typeof snap === 'object' && snap.radius) || 50
+    const anchor = (typeof snap === 'object' && snap.anchor) || 'center'
 
     const views = graph.renderer.findViewsInArea(
       {
@@ -1998,7 +2032,10 @@ export class EdgeView<
     views.forEach((view) => {
       if (view.container.getAttribute('magnet') !== 'false') {
         if (view.isNodeView()) {
-          distance = view.cell.getBBox().getCenter().distance(pos)
+          distance =
+            anchor === 'center'
+              ? view.cell.getBBox().getCenter().distance(pos)
+              : view.cell.getBBox().getNearestPointToPoint(pos).distance(pos)
         } else if (view.isEdgeView()) {
           const point = view.getClosestPoint(pos)
           if (point) {

packages/x6/src/view/node.ts

@@ -751,6 +751,7 @@ export class NodeView<
       } else {
         const view = candidate.findView(graph) as NodeView
         if (
+          validateEmbeding &&
           FunctionExt.call(validateEmbeding, graph, {
             child: this.cell,
             parent: view.cell,

packages/x6/src/view/view.ts

@@ -13,6 +13,11 @@ export abstract class View<A extends EventArgs = any> extends Basecoat<A> {
     return 2
   }
 
+  /** If need remove `this.container` DOM */
+  protected get disposeContainer() {
+    return true
+  }
+
   constructor() {
     super()
     this.cid = Private.uniqueId()
@@ -39,8 +44,12 @@ export abstract class View<A extends EventArgs = any> extends Basecoat<A> {
       this.removeEventListeners(document)
       this.onRemove()
       delete View.views[this.cid]
+      if (this.disposeContainer) {
+        this.unmount(elem)
+      }
+    } else {
+      this.unmount(elem)
     }
-    this.unmount(elem)
     return this
   }
 
@@ -362,6 +371,11 @@ export abstract class View<A extends EventArgs = any> extends Basecoat<A> {
   normalizeEvent<T extends Dom.EventObject>(evt: T) {
     return View.normalizeEvent(evt)
   }
+
+  @View.dispose()
+  dispose() {
+    this.remove()
+  }
 }
 
 export namespace View {

sites/x6-sites/.dumirc.ts

@@ -12,6 +12,7 @@ export default defineConfig({
     defaultLanguage: 'zh',
     siteUrl: 'https://x6.antv.antgroup.com',
     isAntVSite: false,
+    footerTheme: 'light', // 白色 底部主题
     githubUrl: repository, // GitHub 地址
     showSearch: true, // 是否显示搜索框
     showGithubCorner: true, // 是否显示头部的 GitHub icon
@@ -66,18 +67,35 @@ export default defineConfig({
         },
         order: 4,
       },
+      {
+        slug: 'docs/xflow/guide/introduction.md',
+        title: {
+          zh: 'XFlow',
+          en: 'XFlow',
+        },
+        order: 5,
+      },
     ],
     detail: {
+      engine: {
+        zh: 'X6',
+        en: 'X6',
+      },
       title: {
-        zh: 'X6 图编辑引擎',
-        en: 'X6 图编辑引擎',
+        zh: 'X6·图编辑引擎',
+        en: 'X6·图编辑引擎',
       },
       description: {
         zh: 'X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。',
         en: 'X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。',
       },
       image:
-        'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*A1g0RaZ-GJcAAAAAAAAAAAAADtOHAQ/original',
+        'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5qQsTo0dkOcAAAAAAAAAAAAADmJ7AQ/original',
+      imageStyle: {
+        transform: 'scale(0.7)',
+        marginTop: '70px',
+        marginLeft: '100px',
+      },
       buttons: [
         {
           text: {
@@ -238,6 +256,30 @@ export default defineConfig({
         },
         order: 4,
       },
+      {
+        slug: 'xflow/guide',
+        title: {
+          zh: '开始',
+          en: 'start',
+        },
+        order: 1,
+      },
+      {
+        slug: 'xflow/components',
+        title: {
+          zh: '组件',
+          en: 'component',
+        },
+        order: 2,
+      },
+      {
+        slug: 'xflow/hooks',
+        title: {
+          zh: 'Hook',
+          en: 'Hook',
+        },
+        order: 3,
+      },
     ],
     examples: [
       {

sites/x6-sites/CHANGELOG.md

@@ -1,111 +0,0 @@
-## @antv/x6-sites [1.6.5](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.4...@antv/x6-sites@1.6.5) (2023-03-02)
-
-### Bug Fixes
-
-- add excludeShapes options for manhattan router ([#3334](https://github.com/antvis/x6/issues/3334)) ([c76a23b](https://github.com/antvis/x6/commit/c76a23b53425f5cbb7f767c0fe5510f3f81c417c))
-
-## @antv/x6-sites [1.6.3](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.2...@antv/x6-sites@1.6.3) (2023-03-02)
-
-## @antv/x6-sites [1.6.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.1...@antv/x6-sites@1.6.2) (2023-02-28)
-
-## @antv/x6-sites [1.6.1](https://github.com/antvis/x6/compare/@antv/x6-sites@1.6.0...@antv/x6-sites@1.6.1) (2023-02-27)
-
-## @antv/x6-sites [1.5.5](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.4...@antv/x6-sites@1.5.5) (2023-02-27)
-
-## @antv/x6-sites [1.5.4](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.3...@antv/x6-sites@1.5.4) (2023-02-24)
-
-## @antv/x6-sites [1.5.3](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.2...@antv/x6-sites@1.5.3) (2023-02-23)
-
-## @antv/x6-sites [1.5.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.1...@antv/x6-sites@1.5.2) (2023-02-18)
-
-# @antv/x6-sites [1.5.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.4.1...@antv/x6-sites@1.5.0) (2023-02-06)
-
-### Features
-
-- keyboard support clear and custom trigger ([#3202](https://github.com/antvis/x6/issues/3202)) ([668c932](https://github.com/antvis/x6/commit/668c93242fbcebb987cccc3dcfd56982f7c66252))
-
-# @antv/x6-sites [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.2...@antv/x6-sites@1.4.0) (2023-01-31)
-
-### Bug Fixes
-
-- fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
-- prevent highlighting new edge ([#3170](https://github.com/antvis/x6/issues/3170)) ([bd30f7f](https://github.com/antvis/x6/commit/bd30f7f61de530a9b6671aaedd4be2e026de8d44))
-
-### Features
-
-- add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
-
-## @antv/x6-sites [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.1...@antv/x6-sites@1.3.2) (2023-01-13)
-
-### Bug Fixes
-
-- change dragging container options ([#3139](https://github.com/antvis/x6/issues/3139)) ([7b091f3](https://github.com/antvis/x6/commit/7b091f35dee147c5e7bf97577e14e11ceb7e8e3d))
-- update group even group is empty ([#3117](https://github.com/antvis/x6/issues/3117)) ([6abd068](https://github.com/antvis/x6/commit/6abd0683eab22eb0fa1a4702642ab76b91320694))
-
-## @antv/x6-sites [1.3.1](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.0...@antv/x6-sites@1.3.1) (2023-01-03)
-
-### Bug Fixes
-
-- optimize rendering logic to prevent loops ([#3108](https://github.com/antvis/x6/issues/3108)) ([45337e4](https://github.com/antvis/x6/commit/45337e4a62224aaffd60fc8b2670a071c5560796))
-
-# @antv/x6-sites [1.3.0](https://github.com/antvis/X6/compare/@antv/x6-sites@1.2.2...@antv/x6-sites@1.3.0) (2023-01-01)
-
-### Features
-
-- add data processing dag example ([#3091](https://github.com/antvis/X6/issues/3091)) ([d3301d3](https://github.com/antvis/X6/commit/d3301d33d575269d9219ab1337a2ec1785d61494))
-
-## @antv/x6-sites [1.2.2](https://github.com/antvis/X6/compare/@antv/x6-sites@1.2.1...@antv/x6-sites@1.2.2) (2022-12-24)
-
-### Bug Fixes
-
-- schedule edge when source and target is not ready ([#3090](https://github.com/antvis/X6/issues/3090)) ([019333d](https://github.com/antvis/X6/commit/019333d79d7f22c44c400f29d501497f4323af1a))
-
-# @antv/x6-sites [1.2.0](https://github.com/antvis/X6/compare/@antv/x6-sites@1.1.2...@antv/x6-sites@1.2.0) (2022-12-16)
-
-### Bug Fixes
-
-- 🐛 add keepId for node clone ([#1254](https://github.com/antvis/X6/issues/1254)) ([cef5862](https://github.com/antvis/X6/commit/cef58628902aa97efa62f022203ebcaca3639092))
-- 🐛 add updateCellId api ([#1739](https://github.com/antvis/X6/issues/1739)) ([78cdb3b](https://github.com/antvis/X6/commit/78cdb3bd56e7655ffcb2e5046d00f5d4f932cd3c))
-- 🐛 alerts on lgtm.com ([#1104](https://github.com/antvis/X6/issues/1104)) ([eb2791d](https://github.com/antvis/X6/commit/eb2791dee16440d8c8600b7819552892c2ce2c02))
-- 🐛 change home path in speedup js ([#1369](https://github.com/antvis/X6/issues/1369)) ([31f8960](https://github.com/antvis/X6/commit/31f8960e72b0567bb13683e51db8b97207604c0b))
-- 🐛 change type of padding in ScaleContentToFitOptions ([#1203](https://github.com/antvis/X6/issues/1203)) ([1031d06](https://github.com/antvis/X6/commit/1031d0653b4641adfc27b7572b57d23fec0cc182))
-- 🐛 fix add tools not work ([f5d1d6a](https://github.com/antvis/X6/commit/f5d1d6a326021247ee8967675fc9490ddbb6d0aa))
-- 🐛 fix validateEdge trigger timming ([48b72a1](https://github.com/antvis/X6/commit/48b72a1332d536a8b640fbfc6a3e4c463f5b79bc))
-- 🐛 not create label when text is empty ([#1783](https://github.com/antvis/X6/issues/1783)) ([ed1fcd1](https://github.com/antvis/X6/commit/ed1fcd1f26601150d1b7913b8eaaf329a958af53))
-- 🐛 optimize addTools params ([1366eac](https://github.com/antvis/X6/commit/1366eac7f554ede24db6c558c581142ecb7c1a37))
-- 🐛 optimize contextmenu tools ([#1391](https://github.com/antvis/X6/issues/1391)) ([cc01fdf](https://github.com/antvis/X6/commit/cc01fdf208f4fbd283a6ce3d7a106716e8e10300))
-- 🐛 optimize usage of mousewheel ([37b3010](https://github.com/antvis/X6/commit/37b3010f763926fbd04d822e74238f6e206c024c))
-- 🐛 release x6 v1.28.2 ([#1654](https://github.com/antvis/X6/issues/1654)) ([745b90a](https://github.com/antvis/X6/commit/745b90ac94dbbd9443ecf1456e6a5aa9eb646594))
-- 🐛 remove single tool by name or index ([#565](https://github.com/antvis/X6/issues/565)) ([73d5d67](https://github.com/antvis/X6/commit/73d5d67541d4950a9c362a3bc7c7e6200640b40f)), closes [#552](https://github.com/antvis/X6/issues/552)
-- 🐛 unified panning api ([#1151](https://github.com/antvis/X6/issues/1151)) ([d60e9d8](https://github.com/antvis/X6/commit/d60e9d882dfa85bf39b47ba75a6379b5cbd1a965))
-- 🐛 update layout version ([35abd4a](https://github.com/antvis/X6/commit/35abd4a04d04d2f4ff84cf2604f39b69f5303f8e))
-- 🐛 update x6-react-shape version ([#1425](https://github.com/antvis/X6/issues/1425)) ([4208846](https://github.com/antvis/X6/commit/4208846337326d8983f1662faa8da67efd8568b4))
-- add `placeholder` and `notFoundText` for stencil component ([#574](https://github.com/antvis/X6/issues/574)) ([c42464b](https://github.com/antvis/X6/commit/c42464b376835dc5c4e2139582fbe09df4183153)), closes [#555](https://github.com/antvis/X6/issues/555)
-- curve demo ([#1306](https://github.com/antvis/X6/issues/1306)) ([de13692](https://github.com/antvis/X6/commit/de1369282f00e24180c7269e3373e67ae79aa338))
-- fix angular typo ([#1154](https://github.com/antvis/X6/issues/1154)) ([25b47c3](https://github.com/antvis/X6/commit/25b47c39b9d036a6d55a28450792d4f788bf903f))
-- fix can not create node when mouseup in demo ([#628](https://github.com/antvis/X6/issues/628)) ([c336262](https://github.com/antvis/X6/commit/c336262cc7d1697a2a5f8e8ff229767415f136e0))
-- fix contextmenu show multiple times ([5d437ce](https://github.com/antvis/X6/commit/5d437cef07427bf9f2cbae9b2e08dd4a6544ff70))
-- fix demo import path error ([2ebf581](https://github.com/antvis/X6/commit/2ebf581dc1ec9c5ee4501917a7cbddbbb4b69c0f))
-- fix editable cell demo ([7e6d003](https://github.com/antvis/X6/commit/7e6d003d7d937c35a41ed326cdb1d78041826da9))
-- fix path error in custom router demo ([#620](https://github.com/antvis/X6/issues/620)) ([7cd3a7e](https://github.com/antvis/X6/commit/7cd3a7e57d772481ad33949ee832a36aab59ef3a))
-- fix trigger multiple moved event when close movable config ([3eb9d69](https://github.com/antvis/X6/commit/3eb9d6934efc5d73f7dd830d169a166ccb7bd9ac))
-- remove useless repo url ([2f92e33](https://github.com/antvis/X6/commit/2f92e33d0e42801624b9e32f3e508445ed34e6d0))
-- x6 support ie 11 ([#585](https://github.com/antvis/X6/issues/585)) ([5df9aaa](https://github.com/antvis/X6/commit/5df9aaaa88f943402d18fed6b7e5ae0abd5ed9b9))
-
-### Features
-
-- ✨ allow disable auto resize in some high performance scenario ([9bfa702](https://github.com/antvis/X6/commit/9bfa7025c05b29c0774a499d88961a9cf4394dda))
-- ✨ add cell-editor tool ([#1202](https://github.com/antvis/X6/issues/1202)) ([98e80d1](https://github.com/antvis/X6/commit/98e80d10c9bfbd0c8486944dd212db2db731a225))
-- ✨ add containerParent config for dnd ([fc6498f](https://github.com/antvis/X6/commit/fc6498f6e2d52d05eab6790851c3437c6c28ee2b))
-- ✨ add direction option for midside node-anchor ([ee62cc0](https://github.com/antvis/X6/commit/ee62cc07ba706037e0a10e08d5440472e1ce97c9))
-- ✨ add excludeHiddenNodes for manhattan router ([#1400](https://github.com/antvis/X6/issues/1400)) ([28a472a](https://github.com/antvis/X6/commit/28a472ab8e3097ffd12be0fb8909c084156e5afd))
-- ✨ add insertPort api ([#1763](https://github.com/antvis/X6/issues/1763)) ([6809dba](https://github.com/antvis/X6/commit/6809dba2d86308d0b315d0c6164f91d80e8a40ff))
-- ✨ add resizeGroup for stencil ([#1388](https://github.com/antvis/X6/issues/1388)) ([d9bec60](https://github.com/antvis/X6/commit/d9bec60ce3819f45151ac8d1336e2ae94842d3d4))
-- ✨ add rubberNode and rubberEdge config ([#949](https://github.com/antvis/X6/issues/949)) ([a2f6fb3](https://github.com/antvis/X6/commit/a2f6fb38d03ecac123f006ed33b3f71da7952355))
-- ✨ auto resize graph when container resized ([9c7bc9a](https://github.com/antvis/X6/commit/9c7bc9a4bb210451283663cd99a29bd6c79e2ec4)), closes [#531](https://github.com/antvis/X6/issues/531)
-- ✨ panning support rightMouseDown and mousehwheel ([728977c](https://github.com/antvis/X6/commit/728977c5843a9868736e7f2f3b9d0d77e8837d3c))
-- ✨ support minimap in normal graph ([f42160f](https://github.com/antvis/X6/commit/f42160f8259ca7cf290fe8a431a5fe1900b729a8))
-- add angualr shape ([#1141](https://github.com/antvis/X6/issues/1141)) ([398cca4](https://github.com/antvis/X6/commit/398cca43d3697c97f32f831b5fec73e416c0d733))
-- add following config for selection ([#687](https://github.com/antvis/X6/issues/687)) ([4de6701](https://github.com/antvis/X6/commit/4de6701c0b29f8e71293403b5b813bb64a27f3a5))
-- sync code from master ([#2004](https://github.com/antvis/X6/issues/2004)) ([c681405](https://github.com/antvis/X6/commit/c68140504bd21f654870f3d2fc1ad2f16f1113c8)), closes [#1974](https://github.com/antvis/X6/issues/1974) [#1977](https://github.com/antvis/X6/issues/1977) [#1985](https://github.com/antvis/X6/issues/1985) [#1988](https://github.com/antvis/X6/issues/1988) [#1991](https://github.com/antvis/X6/issues/1991) [#1989](https://github.com/antvis/X6/issues/1989)
-- x6-angular-shape support pass arguments ([#1250](https://github.com/antvis/X6/issues/1250)) ([b683f82](https://github.com/antvis/X6/commit/b683f82d70c05f993db46394bcc50d221b02443e))

sites/x6-sites/docs/api/graph/graph.zh.md

@@ -15,7 +15,7 @@ new Graph(options: Options)
 
 | 选项 | 类型 | 必选 | 描述 | 默认值 |
 | --- | --- | :-: | --- | --- |
-| containers | `HTMLElement` | ✓ | 画布的容器。 |  |
+| container | `HTMLElement` | ✓ | 画布的容器。 |  |
 | width | `number` |  | 画布宽度，默认使用容器宽度。 | - |
 | height | `number` |  | 画布高度，默认使用容器高度。 | - |
 | scaling | `{ min?: number, max?: number }` |  | 画布的最小最大缩放级别。 | `{ min: 0.01, max: 16 }` |

sites/x6-sites/docs/api/graph/mousewheel.zh.md

@@ -73,7 +73,7 @@ interface MouseWheelOptions {
 new Graph({
   mousewheel: {
     enabled: true,
-    guard(this: Graph, e: WheelEvent) {
+    guard(e: WheelEvent) {
       if (e.altKey) {
         // 当按下 alt 键时，忽略所有滚动事件
         return false

sites/x6-sites/docs/api/graph/panning.zh.md

@@ -38,7 +38,7 @@ const graph = new Graph({
 interface Options {
   enabled?: boolean
   modifiers?: ModifierKey
-  eventTypes?: ('leftMouseDown' | 'rightMouseDown' | 'mouseWheel')[]
+  eventTypes?: ('leftMouseDown' | 'rightMouseDown' | 'mouseWheel', 'mouseWheelDown')[]
 }
 ```
 
@@ -53,7 +53,7 @@ interface Options {
 `ModifierKey` 的类型定义如下：
 
 ```ts
-type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null
+type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift' | 'space')[] | null
 ```
 
 支持以下几种形式：
@@ -70,7 +70,8 @@ type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null
 
 - `leftMouseDown`: 按下鼠标左键移动进行拖拽
 - `rightMouseDown`: 按下鼠标右键移动进行拖拽
-- `mouseWheel`: 使用鼠标滚轮拖拽
+- `mouseWheel`: 使用鼠标滚轮滚动拖拽
+- `mouseWheelDown`: 按下鼠标滚轮进行拖拽
 
 ## 方法