fix: set correct scroller options (#3195)

[@antv/x6@2.2.0](https://www.npmjs.com/package/@antv/x6/v/2.2.0)
[@antv/x6@2.2.0](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.2.0)

[@antv/x6-common@2.0.6](https://www.npmjs.com/package/@antv/x6-common/v/2.0.6)
[@antv/x6-common@2.0.6](https://github.com/antvis/X6/releases/tag/%40antv/x6-common%402.0.6)

[@antv/x6-react-components@2.0.7](https://www.npmjs.com/package/@antv/x6-react-components/v/2.0.7)
[@antv/x6-react-components@2.0.7](https://github.com/antvis/X6/releases/tag/%40antv/x6-react-components%402.0.7)

[@antv/x6-sites@1.4.0](https://github.com/antvis/X6/releases/tag/%40antv/x6-sites%401.4.0)

.github/workflows/codeql.yml

@@ -1,4 +1,4 @@
-name: "CodeQL"
+name: ⛵️　CodeQL
 
 on:
   push:
@@ -30,7 +30,7 @@ jobs:
         uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
-          config-file: ./.github/codeql.yml
+          config-file: ./.github/workflows/config/codeql.yml
           queries: +security-and-quality
 
       - name: Autobuild

.github/workflows/config/codeql.yml

@@ -1,5 +1,5 @@
 paths-ignore:
-  - sites/x6-sites/static
+  - sites/public
 query-filters:
   - exclude:
       id: js/use-before-declaration

.github/workflows/release.yml

@@ -57,8 +57,9 @@ jobs:
           private_key: ${{ secrets.PRIVATE_KEY }}
 
       - name: 📦　Semantic Release
-        run: pnpm srm --debug --combine-commits --comment-footer 'Thanks for being a part of the [AntV](https://github.com/antvis) community! 💪💯'
+        run: pnpm srm --combine-commits --comment-footer 'Thanks for being a part of the [AntV](https://github.com/antvis) community! 💪💯'
         env:
+          SRM_DEBUG: ${{ secrets.SRM_DEBUG }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ env.BOT_TOKEN }}

.gitignore

@@ -15,3 +15,5 @@ dist
 tmp
 test/coverage
 packages/**/src/style/raw.ts
+.eslintcache
+.stylelintcache

.lgtm.yml

@@ -1,12 +0,0 @@
-# @see https://help.semmle.com/lgtm-enterprise/user/help/lgtm.yml-configuration-file.html
-# @template https://lgtm.com/static/downloads/lgtm.template.yml
-
-queries:
-  - exclude: js/use-before-declaration
-  - exclude: js/polynomial-redos
-
-extraction:
-  javascript:
-    index:
-      filters:
-        - exclude: "sites/x6-sites/static"

.prettierignore

@@ -12,5 +12,5 @@ es/
 lib/
 dist/
 coverage/
-sites/x6-sites/static/demos
+sites/public
 csstype.ts

.stylelintrc

@@ -15,6 +15,11 @@
     "no-invalid-double-slash-comments": null,
     "no-descending-specificity": null,
     "declaration-empty-line-before": null,
-    "no-duplicate-selectors": null
+    "no-duplicate-selectors": null,
+    "value-no-vendor-prefix": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "number-max-precision": null
   }
 }

CONTRIBUTORS

@@ -1,7 +1,7 @@
 BARM <284942955@qq.com>
 Candy <563378816@qq.com>
-Chaoqi <HAN>
-Clifford <ajard>
+Chaoqi ZHANG <prncoprs@163.com>
+Clifford Fajardo <cliffordfajardo@users.noreply.github.com>
 DaiGang <42136433+daigang666@users.noreply.github.com>
 Dong <48054715+halodong@users.noreply.github.com>
 Draco <Draco.coder@gmail.com>
@@ -10,12 +10,13 @@ Eve-Sama <948832626@qq.com>
 Gossypol <31892817+gossypol@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
 Indomi <indomi126@gmail.com>
-James <san>
-Jógvan <lse>
-Ken <ei>
+James Tsang <wtzeng1@gmail.com>
+Jógvan Olsen <jogvanolsen@hotmail.com>
+Ken Geis <geis.ken@gmail.com>
+Kent Wood <minzojian@hotmail.com>
 Limbo <49612796+JUST-Limbo@users.noreply.github.com>
 Lixu <37231473+wflixu@users.noreply.github.com>
-Lloyd <ho>
+Lloyd Zhou <lloydzhou@users.noreply.github.com>
 Lyn <47809781+lyn-boyu@users.noreply.github.com>
 MOMO <329053928@qq.com>
 Mingfei <az8641683@163.com>
@@ -25,16 +26,19 @@ NewByVector <NewByVector@users.noreply.github.com>
 Olive.Wang <olivewind.wang@gmail.com>
 Opportunity <opportunity@live.in>
 Questions <chip@twostewards.com>
-RuiLin <on>
+RuiLin Dong <48054715+halodong@users.noreply.github.com>
 SSC <273702440@qq.com>
+Simon He <57086651+Simon-He95@users.noreply.github.com>
 Sindori <441933726@qq.com>
+Struggle Roue <47975400+struggleRoue@users.noreply.github.com>
 Susan <527971893@qq.com>
-Thomas <eugne>
-Tony <>
+Thomas Zeugner <tomsoftware@gmx.de>
+Tony Wu <93302820+tonywu6@users.noreply.github.com>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
-Xingjian <han>
-Zhenyu <o>
+Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
+Zhenyu Hou <skyking_H@hotmail.com>
+_XiaoTian <istianlei@qq.com>
 arthur657834 <kingkom7834@126.com>
 boyu.zlj <boyu.zlj@antgroup.com>
 breezefaith <nyzhangzc@qq.com>
@@ -58,16 +62,18 @@ myzxlin <myzxlin@163.com>
 newbyvector <vectorse@126.com>
 niexq <1879633916@qq.com>
 niexq <niexq@firstgrid.cn>
+njshuisheng <34205271+njshuisheng@users.noreply.github.com>
 pengxingjian.pxj <pengxingjian.pxj@alibaba-inc.com>
 pfdgithub <pfdgithub@users.noreply.github.com>
 qingchi <qinky94@163.com>
 qu <33251372+Qujh97@users.noreply.github.com>
 sallen450 <qinghua10199@gmail.com>
 semantic-release-bot <semantic-release-bot@martynus.net>
+siaikin <abc1310054026@outlook.com>
 vector <vectorse@126.com>
 wenbei <38773084+wb-wenbei@users.noreply.github.com>
 wgf <34190465+evelope@users.noreply.github.com>
-wind <>
+wind X <35559153+XueMeijing@users.noreply.github.com>
 wjqsummer <52412389+wjqsummer@users.noreply.github.com>
 wtzeng1 <wtzeng1@gmail.com>
 x6-bot <x6-bot@users.noreply.github.com>
@@ -77,6 +83,7 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
 €alix <qq287649920@gmail.com>
 九思⚡⚡⚡ <2228429150@qq.com>
 何腾飞 <avrin.live.cn@outlook.com>
+依枫 <deng25st@163.com>
 偏右 <afc163@gmail.com>
 小耀 <jinyue.gjy@antfin.com>
 崖 <bubkoo.wy@gmail.com>

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2022 Alipay.inc
+Copyright (c) 2021-2023 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

README.md

@@ -6,18 +6,17 @@
 <p align="center"><strong>提供简单易用的节点定制能力和开箱即用的交互组件，方便我们快速搭建流程图、DAG 图、ER 图等图应用</strong></p>
 
 <p align="center">
-<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/workflow/status/antvis/x6/%F0%9F%91%B7%E3%80%80CI/master?logo=github&style=flat-square"></a>
-<!-- <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=flat-square&token=15CO54WYUV"></a> -->
-<a href="https://lgtm.com/projects/g/antvis/x6/context:javascript"><img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/antvis/x6.svg?logo=lgtm&style=flat-square"></a>
-<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?style=flat-square"></a>
-<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=flat-square"></a>
+<a href="https://github.com/antvis/X6/actions/workflows/ci.yml"><img alt="build" src="https://img.shields.io/github/actions/workflow/status/antvis/x6/ci.yml?branch=master&style=for-the-badge&logo=github"></a>
+<!-- <a href="https://app.codecov.io/gh/antvis/X6"><img alt="coverage" src="https://img.shields.io/codecov/c/gh/antvis/x6?logo=codecov&style=for-the-badge&token=15CO54WYUV"></a> -->
+<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Package" src="https://img.shields.io/npm/v/@antv/x6.svg?logo=npm&style=for-the-badge"></a>
+<a href="https://www.npmjs.com/package/@antv/x6"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@antv/x6?logo=npm&style=for-the-badge"></a>
 </p>
 
 <p align="center">
-<a href="/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=flat-square" alt="MIT License"></a>
-<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=flat-square"></a>
-<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square"></a>
-<a href="https://x6.antv.antgroup.com"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=flat-square&logo=google-chrome&logoColor=0076D6"></a>
+<a href="/LICENSE"><img src="https://img.shields.io/github/license/antvis/x6?style=for-the-badge" alt="MIT License"></a>
+<a href="https://www.typescriptlang.org"><img alt="Language" src="https://img.shields.io/badge/language-TypeScript-blue.svg?style=for-the-badge"></a>
+<a href="https://github.com/antvis/x6/pulls"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=for-the-badge"></a>
+<a href="https://x6.antv.antgroup.com"><img alt="website" src="https://img.shields.io/static/v1?label=&labelColor=505050&message=website&color=0076D6&style=for-the-badge&logo=google-chrome&logoColor=f5f5f5"></a>
 </p>
 
 ## 特性

examples/x6-example-features/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @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)
 
 

examples/x6-example-features/package.json

@@ -1,17 +1,18 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",
-    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix",
-    "precommit": "lint-staged"
+    "lint": "eslint 'src/**/*.{js,ts}?(x)' --fix"
   },
   "dependencies": {
+    "@antv/hierarchy": "^0.6.8",
     "@antv/x6": "^2.x",
     "@antv/x6-plugin-clipboard": "^2.x",
     "@antv/x6-plugin-dnd": "^2.x",
+    "@antv/x6-plugin-export": "^2.x",
     "@antv/x6-plugin-history": "^2.x",
     "@antv/x6-plugin-keyboard": "^2.x",
     "@antv/x6-plugin-minimap": "^2.x",
@@ -20,42 +21,34 @@
     "@antv/x6-plugin-snapline": "^2.x",
     "@antv/x6-plugin-stencil": "^2.x",
     "@antv/x6-plugin-transform": "^2.x",
-    "@antv/x6-plugin-export": "^2.x",
     "@antv/x6-react-components": "^2.x",
     "@antv/x6-react-shape": "^2.x",
     "antd": "^4.4.2",
     "classnames": "^2.2.6",
     "dagre": "^0.8.5",
-    "elkjs": "^0.7.1",
+    "elkjs": "^0.8.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-helmet": "^6.0.0",
-    "@antv/hierarchy": "^0.6.8"
+    "react-helmet": "^6.0.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^29.2.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-helmet": "^6.0.0",
-    "@types/react-test-renderer": "^16.0.3",
-    "eslint": "^7.16.0",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-plugin-import": "^1.13.5",
+    "eslint": "^8.29.0",
     "eslint-config-umi": "^1.4.0",
-    "eslint-plugin-flowtype": "^4.7.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.11.1",
-    "lint-staged": "^10.5.3",
     "react-test-renderer": "^16.7.0",
     "umi": "^2.9.0",
     "umi-plugin-react": "^1.8.0",
-    "umi-types": "^0.3.0",
-    "babel-plugin-import": "^1.13.5"
-  },
-  "lint-staged": {
-    "src/**/*.ts": [
-      "eslint --fix"
-    ]
+    "umi-types": "^0.3.0"
   },
   "engines": {
     "node": ">=8.0.0"

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

@@ -7,17 +7,17 @@
 
 .nav {
   position: absolute;
-  z-index: 101;
   top: 0;
   bottom: 0;
   left: 0;
-  font-size: 13px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  z-index: 101;
+  box-sizing: border-box;
   width: 220px;
   padding: 0 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 13px;
   border-right: 1px solid #e9e9e9;
-  box-sizing: border-box;
 
   ul {
     padding-left: 16px;
@@ -29,11 +29,11 @@
 }
 
 .content {
+  flex-grow: 1;
   box-sizing: border-box;
+  margin-left: 220px;
+  padding: 34px;
   overflow-x: hidden;
   overflow-y: auto;
-  flex-grow: 1;
-  margin-left: 220px;
-  background: #ffffff;
-  padding: 34px;
+  background: #fff;
 }

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

@@ -8,13 +8,15 @@
     border: 1px solid #c2c8d5;
     border-left: 4px solid #1890ff;
     border-radius: 4px;
-    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 2px 5px 1px rgb(0 0 0 / 6%);
+
     img {
+      flex-shrink: 0;
       width: 20px;
       height: 20px;
-      flex-shrink: 0;
       margin-left: 8px;
     }
+
     .label {
       display: inline-block;
       flex-shrink: 0;
@@ -23,15 +25,19 @@
       color: #666;
       font-size: 12px;
     }
+
     .status {
       flex-shrink: 0;
     }
+
     &.success {
       border-left: 4px solid #52c41a;
     }
+
     &.failed {
       border-left: 4px solid #ff4d4f;
     }
+
     &.running .status img {
       animation: spin 1s linear infinite;
     }
@@ -43,11 +49,13 @@
       border-radius: 2px;
       box-shadow: 0 0 0 4px #d4e8fe;
     }
+
     .node.success {
       border-color: #52c41a;
       border-radius: 2px;
       box-shadow: 0 0 0 4px #ccecc0;
     }
+
     .node.failed {
       border-color: #ff4d4f;
       border-radius: 2px;
@@ -80,6 +88,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

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

@@ -4,6 +4,7 @@
       visibility: hidden;
       cursor: pointer;
     }
+
     &:hover image {
       visibility: visible;
     }

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

@@ -212,12 +212,15 @@ export default class Example extends React.Component {
           return 'right'
         },
       })
-      const cells: Cell[] = []
       const traverse = (hierarchyItem: HierarchyResult) => {
         if (hierarchyItem) {
           const { data, children } = hierarchyItem
-          cells.push(
-            graph.createNode({
+          // 检查当前遍历的节点已经存在还是需要新添加？
+          if (graph.hasCell(data.id)) {
+            const node = graph.getCellById(data.id)
+            node.prop('position', { x: hierarchyItem.x, y: hierarchyItem.y })
+          } else {
+            const node = graph.addNode({
               id: data.id,
               shape: data.type === 'topic-child' ? 'topic-child' : 'topic',
               x: hierarchyItem.x,
@@ -226,13 +229,18 @@ export default class Example extends React.Component {
               height: data.height,
               label: data.label,
               type: data.type,
-            }),
-          )
+            })
+          }
           if (children) {
             children.forEach((item: HierarchyResult) => {
               const { id, data } = item
-              cells.push(
-                graph.createEdge({
+              // 先遍历子节点（里面包含创建逻辑，如果画布没有开启async的时候，创建边会提示找不到target节点）
+              traverse(item)
+              const eid = `${hierarchyItem.id}-->${id}`
+              // 检查当前边是否已经存在
+              if (!graph.hasCell(eid)) {
+                graph.addEdge({
+                  id: eid,
                   shape: 'mindmap-edge',
                   source: {
                     cell: hierarchyItem.id,
@@ -257,15 +265,13 @@ export default class Example extends React.Component {
                       name: 'left',
                     },
                   },
-                }),
-              )
-              traverse(item)
+                })
+              }
             })
           }
         }
       }
       traverse(result)
-      graph.resetCells(cells)
       graph.centerContent()
     }
 
@@ -334,10 +340,16 @@ export default class Example extends React.Component {
 
     const removeNode = (id: string) => {
       const res = findItem(data, id)
-      const dataItem = res?.parent
-      if (dataItem && dataItem.children) {
-        const { children } = dataItem
+      const parentItem = res?.parent
+      const nodeItem = res?.node
+      if (parentItem && parentItem.children) {
+        const { children } = parentItem
         const index = children.findIndex((item) => item.id === id)
+        // 删除的时候，先删节点以及可能存在的子节点，再调用render，对data数据进行遍历
+        if (nodeItem && nodeItem.children) {
+          nodeItem.children.forEach((item) => graph.removeCell(item.id))
+        }
+        graph.removeCell(id)
         return children.splice(index, 1)
       }
       return null

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

@@ -2,24 +2,25 @@
   position: relative;
 }
 
-.validating:after {
+.validating::after {
   position: absolute;
   top: 4px;
   left: 4px;
-  content: ' ';
   display: block;
   width: 50px;
   height: 50px;
-  border-radius: 50%;
   border: 6px solid #873bf4;
-  border-color: #873bf4 transparent #873bf4 transparent;
+  border-color: #873bf4 transparent;
+  border-radius: 50%;
   animation: lds-dual-ring 1.2s linear infinite;
+  content: ' ';
 }
 
 @keyframes lds-dual-ring {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }

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

@@ -2,14 +2,14 @@
   .x6-example-wrap {
     width: 100%;
     height: 100%;
-    background-color: #ffffff;
+    background-color: #fff;
 
     .left-side {
       position: fixed;
-      width: 336px;
-      left: 24px;
-      top: 0px;
+      top: 0;
       bottom: 0;
+      left: 24px;
+      width: 336px;
       padding: 0 8px;
       overflow-x: visible;
       overflow-y: auto;
@@ -17,18 +17,18 @@
 
     .right-side {
       position: fixed;
+      top: 0;
       right: 24px;
+      bottom: 0;
       width: 336px;
       padding: 0 8px;
-      top: 0px;
-      bottom: 0;
       overflow-x: visible;
       overflow-y: auto;
     }
 
     .ant-card {
-      box-shadow: 0 0 10px 1px #e9e9e9;
       margin-top: 24px;
+      box-shadow: 0 0 10px 1px #e9e9e9;
     }
 
     .ant-row-flex {
@@ -36,14 +36,14 @@
     }
 
     .slider-value {
-      background: #eee;
-      color: #333333;
-      padding: 3px 7px;
-      border-radius: 10px;
       display: inline-block;
-      font-size: 12px;
       margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
       line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
     }
 
     .x6-graph {
@@ -52,15 +52,15 @@
 
     .x6-node {
       path {
-        fill: #6a6c8a;
-        stroke-width: 0px;
         transition: fill 0.1s;
+        fill: #6a6c8a;
+        stroke-width: 0;
       }
 
       text {
-        fill: #fff;
-        font-size: 12px;
         font-weight: lighter;
+        font-size: 12px;
+        fill: #fff;
       }
 
       &:hover path {
@@ -80,37 +80,37 @@
     }
 
     .bbox {
+      transition-duration: 0.5s;
+      transition-property: stroke-opacity;
+      pointer-events: none;
+      fill: none;
       stroke: #16a085;
       stroke-width: 2;
       stroke-opacity: 0;
-      fill: none;
-      transition-property: stroke-opacity;
-      transition-duration: 0.5s;
-      pointer-events: none;
     }
 
     .axis {
+      pointer-events: none;
       stroke: #95a5a6;
       stroke-dasharray: 2, 4;
       stroke-width: 1;
-      pointer-events: none;
     }
 
     .padding {
+      transition-duration: 1s;
+      transition-property: stroke-opacity;
+      pointer-events: none;
       stroke: #1abc9c;
       stroke-opacity: 0;
-      transition-property: stroke-opacity;
-      transition-duration: 1s;
-      pointer-events: none;
     }
 
     .grid {
+      transition-duration: 1s;
+      transition-property: stroke-opacity;
+      pointer-events: none;
       stroke: #16a085;
       stroke-width: 0.5;
       stroke-opacity: 0;
-      transition-property: stroke-opacity;
-      transition-duration: 1s;
-      pointer-events: none;
     }
 
     .active {

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

@@ -1,9 +1,9 @@
 .custom-html {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
   color: #000;
   font-size: 16px;
   border: 1px solid #000;

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

@@ -1,27 +1,27 @@
 .x6-graph-wrap {
   width: 100%;
   height: 100%;
-  background-color: #ffffff;
-  overflow: auto;
   padding: 32px 0;
+  overflow: auto;
+  background-color: #fff;
 
   > h1 {
     display: block;
     width: 800px;
-    margin: 0 auto 32px auto;
+    margin: 0 auto 32px;
   }
 }
 
 .x6-graph-tools {
   width: 800px;
-  margin: 0 auto 32px auto;
+  margin: 0 auto 32px;
 }
 
 .x6-graph {
   width: 100%;
   height: 100%;
-  box-shadow: 0 0 10px 1px #e9e9e9;
   margin: 0 auto;
+  box-shadow: 0 0 10px 1px #e9e9e9;
 }
 
 .x6-node-selected {

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

@@ -1,10 +1,10 @@
 .react-algo-node {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   border: 1px solid #5f95ff;
   border-radius: 14px;
-  display: flex;
-  align-items: center;
 
   img {
     width: 24px;
@@ -13,8 +13,8 @@
 
   span {
     margin-left: 4px;
-    font-size: 12px;
     color: #000000a6;
+    font-size: 12px;
   }
 
   &.dark {

examples/x6-example-features/src/pages/react/port.less

@@ -2,20 +2,20 @@
   .my-port {
     width: 100%;
     height: 100%;
+    background: #eee;
     border: 1px solid #808080;
     border-radius: 100%;
-    background: #eee;
 
     &.connected {
       width: 0;
       height: 0;
       margin-top: 5px;
       margin-left: 1px;
-      border-width: 5px 4px 0;
-      border-style: solid;
-      border-color: #808080 transparent transparent;
-      border-radius: 0;
       background-color: transparent;
+      border-color: #808080 transparent transparent;
+      border-style: solid;
+      border-width: 5px 4px 0;
+      border-radius: 0;
     }
   }
 
@@ -30,30 +30,30 @@
     }
 
     body > div::before {
-      content: ' ';
       float: left;
+      box-sizing: border-box;
       width: 20px;
       height: 20px;
       margin-top: -5px;
       margin-left: -5px;
+      background-color: rgb(57 202 116 / 60%);
       border-radius: 50%;
-      background-color: rgba(57, 202, 116, 0.6);
-      box-sizing: border-box;
+      content: ' ';
     }
 
     body > div::after {
-      content: ' ';
+      position: relative;
+      z-index: 10;
       float: left;
       clear: both;
+      box-sizing: border-box;
       width: 10px;
       height: 10px;
       margin-top: -15px;
-      border-radius: 50%;
       background-color: #fff;
       border: 1px solid #39ca74;
-      position: relative;
-      z-index: 10;
-      box-sizing: border-box;
+      border-radius: 50%;
+      content: ' ';
     }
   }
 
@@ -65,30 +65,30 @@
     }
 
     body > div::before {
-      content: ' ';
       float: left;
+      box-sizing: border-box;
       width: 28px;
       height: 28px;
       margin-top: -9px;
       margin-left: -9px;
+      background-color: rgb(57 202 116 / 60%);
       border-radius: 50%;
-      background-color: rgba(57, 202, 116, 0.6);
-      box-sizing: border-box;
+      content: ' ';
     }
 
     body > div::after {
-      content: ' ';
+      position: relative;
+      z-index: 10;
       float: left;
       clear: both;
+      box-sizing: border-box;
       width: 10px;
       height: 10px;
       margin-top: -19px;
-      border-radius: 50%;
       background-color: #fff;
       border: 1px solid #39ca74;
-      position: relative;
-      z-index: 10;
-      box-sizing: border-box;
+      border-radius: 50%;
+      content: ' ';
     }
   }
 }

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

@@ -1,4 +1,4 @@
 .x6-graph-scroller {
-  box-shadow: 0 0 10px 1px #e9e9e9;
   margin: 0 auto;
+  box-shadow: 0 0 10px 1px #e9e9e9;
 }

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

@@ -25,7 +25,6 @@ export default class Example extends React.Component {
       strict: true,
       showNodeSelectionBox: true,
       selectCellOnMoved: false,
-      useCellGeometry: true,
       filter(cell) {
         return cell !== a
       },

examples/x6-example-features/src/pages/table/component.less

@@ -1,20 +1,20 @@
 .react-table {
   width: 100%;
   height: 100%;
-  border: 1px solid #edf2f5;
-  background-color: #fff;
-  border-radius: 5px;
   overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #edf2f5;
+  border-radius: 5px;
 
   .inner {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     padding: 12px;
-    border: 1px solid #fff;
     background: #edf2f5;
+    border: 1px solid #fff;
     border-radius: 5px;
-    display: flex;
-    flex-direction: column;
   }
 
   .header {
@@ -36,21 +36,21 @@
   }
 
   ul {
-    padding: 0;
     margin: 0;
+    padding: 0;
   }
 
   li {
-    list-style: none;
     height: 40px;
-    line-height: 40px;
     padding-left: 16px;
+    line-height: 40px;
+    list-style: none;
     border: 1px solid transparent;
 
     &:hover {
-      border: 1px solid #1890ff;
       // background: rgba(230,247,255,.92);
       z-index: 0;
+      border: 1px solid #1890ff;
     }
   }
 }
@@ -58,8 +58,8 @@
 .react-table-port {
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  background: #eee;
   border: 1px solid #808080;
   border-radius: 100%;
-  background: #eee;
-  overflow: hidden;
 }

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

@@ -1,41 +1,44 @@
 .tools {
   width: 800px;
   margin: 32px auto;
+
   .ant-input {
     margin-bottom: 16px;
   }
 }
 
 .react-node {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   border: 1px solid #5f95ff;
   border-radius: 14px;
-  display: flex;
-  align-items: center;
+
   img {
     width: 24px;
     height: 24px;
   }
+
   span {
     margin-left: 4px;
-    font-size: 12px;
     color: #000000a6;
+    font-size: 12px;
   }
 }
 
 .stutterer {
-  transform: scale(1.5);
-  height: 310px;
-  width: 310px;
   position: absolute;
-  left: 0;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
+  left: 0;
+  width: 310px;
+  height: 310px;
   margin: auto;
-  box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.2);
   border-radius: 200px;
+  box-shadow: 0 0 10px 10px rgb(0 0 0 / 20%);
+  transform: scale(1.5);
 }
 
 .clockHand {
@@ -50,12 +53,12 @@
 }
 
 .innerLine {
-  border-radius: 6px;
   position: absolute;
-  height: 149px;
-  left: 47.5%;
   top: 0%;
+  left: 47.5%;
   width: 5%;
+  height: 149px;
   background-color: red;
+  border-radius: 6px;
   transform-origin: bottom center;
 }

package.json

@@ -2,9 +2,9 @@
   "name": "x6",
   "private": true,
   "scripts": {
-    "preinstall": "node ./scripts/preinstall",
-    "lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --fix",
-    "lint:style": "stylelint '**/src/**/*.less' --syntax less --fix",
+    "preinstall": "npx only-allow pnpm",
+    "lint:ts": "eslint '**/src/**/*.{js,ts}?(x)' --cache --fix",
+    "lint:style": "stylelint '**/src/**/*.less' --customSyntax postcss-less --cache --fix",
     "lint": "run-s lint:ts lint:style",
     "prettier": "prettier --write '**/*.{js,mjs,jsx,tsx,ts,less,md,json}'",
     "pretty-quick": "pretty-quick",
@@ -15,7 +15,6 @@
     "build:dev": "turbo run build:dev --filter=./packages/*",
     "build:umd": "turbo run build:umd --filter=./packages/*",
     "build:demos": "sh ./scripts/build-demos",
-    "build:sites": "sh ./scripts/build-sites",
     "clean:turbo": "pnpm -r --if-present --parallel --filter=./packages/* run clean:turbo",
     "clean:build": "pnpm -r --if-present --parallel --filter=./packages/* run clean",
     "clean:modules": "pnpm -r --parallel exec rimraf node_modules && rimraf node_modules",
@@ -37,8 +36,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": {
@@ -89,40 +88,40 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@commitlint/config-conventional": "^17.3.0",
-    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-commonjs": "^23.0.5",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@semantic-release-monorepo/cli": "^2.1.0",
-    "@semantic-release/changelog": "^6.0.1",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@semantic-release-monorepo/cli": "^2.1.2",
+    "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@types/jasmine": "^4.3.0",
-    "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.9",
+    "@types/jest": "^29.2.4",
+    "@types/node": "^18.11.15",
     "@types/sinon": "^10.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
     "boxen": "^7.0.0",
     "colors": "^1.4.0",
     "coveralls": "^3.1.1",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-unicorn": "^45.0.0",
-    "fs-extra": "^10.0.0",
+    "eslint-plugin-unicorn": "^45.0.2",
+    "fs-extra": "^11.1.0",
     "husky": "^8.0.1",
     "is-ci": "^3.0.0",
     "jasmine-core": "^4.5.0",
@@ -131,25 +130,25 @@
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "^2.0.0",
     "karma-jasmine": "^5.1.0",
-    "karma-spec-reporter": "^0.0.34",
+    "karma-spec-reporter": "^0.0.36",
     "karma-typescript": "5.5.3",
     "karma-typescript-es6-transform": "5.5.3",
     "less": "^4.1.1",
     "lodash": "^4.17.21",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.20",
+    "postcss-less": "^6.0.0",
     "prettier": "^2.8.0",
     "pretty-quick": "^3.1.1",
     "rimraf": "^3.0.2",
-    "rollup": "^3.4.0",
+    "rollup": "^3.7.4",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-progress": "^1.1.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "run-shared-scripts": "^1.1.4",
+    "run-shared-scripts": "^1.1.5",
     "semantic-release": "^19.0.5",
-    "sinon": "^14.0.1",
+    "sinon": "^15.0.1",
     "stylelint": "^14.15.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-rational-order": "^0.1.2",
@@ -161,5 +160,8 @@
     "tslib": "^2.4.1",
     "turbo": "^1.6.3",
     "typescript": "^4.9.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.2.0"
   }
 }

packages/x6-common/CHANGELOG.md

@@ -1,3 +1,24 @@
+## @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)
 
 

packages/x6-common/package.json

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

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

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

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

@@ -6,5 +6,5 @@ export {
   sortBy,
   groupBy,
   difference,
-  max
+  max,
 } from 'lodash-es'

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-constructor-return */
+
 import { NumberExt } from '../number'
 
 export class Color {

packages/x6-common/src/css-loader/loader.ts

@@ -2,6 +2,7 @@ import { Platform } from '../platform'
 
 interface CssModule {
   name: string
+  loadTimes: number
   styleElement: HTMLStyleElement | null
 }
 
@@ -10,7 +11,10 @@ const cssModules: CssModule[] = []
 export function ensure(name: string, content: string) {
   const cssModule = cssModules.find((m) => m.name === name)
   if (cssModule) {
-    return
+    cssModule.loadTimes += 1
+    if (cssModule.loadTimes > 1) {
+      return
+    }
   }
 
   if (!Platform.isApplyingHMR()) {
@@ -25,6 +29,7 @@ export function ensure(name: string, content: string) {
 
     cssModules.push({
       name,
+      loadTimes: 1,
       styleElement,
     })
   }
@@ -34,7 +39,13 @@ export function clean(name: string) {
   const index = cssModules.findIndex((m) => m.name === name)
 
   if (index > -1) {
-    let styleElement = cssModules[index].styleElement
+    const cssModule = cssModules[index]
+    cssModule.loadTimes -= 1
+    if (cssModule.loadTimes > 0) {
+      return
+    }
+
+    let styleElement = cssModule.styleElement
     if (styleElement && styleElement.parentNode) {
       styleElement.parentNode.removeChild(styleElement)
     }

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

@@ -117,6 +117,7 @@ export function unsetByPath(
   return obj
 }
 
+// eslint-disable-next-line default-param-last
 export function flatten(obj: any, delim = '/', stop?: (val: any) => boolean) {
   const ret: { [key: string]: any } = {}
 

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

@@ -1,6 +1,10 @@
 // compatible with NodeList.prototype.forEach() before chrome 51
 // https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
-if (window.NodeList && !NodeList.prototype.forEach) {
+if (
+  typeof window === 'object' &&
+  window.NodeList &&
+  !NodeList.prototype.forEach
+) {
   NodeList.prototype.forEach = Array.prototype.forEach as any
 }
 

packages/x6-geometry/src/path/util.ts

@@ -1,6 +1,8 @@
+/* eslint-disable default-param-last */
+
 import { Point } from '../point'
 
-const regexSupportedData = new RegExp(`^[\\s\\dLMCZz,.]*$`)
+const regexSupportedData = new RegExp(`^[\\s\\dLMCZz,.]*$`) // eslint-disable-line prefer-regex-literals
 
 export function isValid(data: any) {
   if (typeof data !== 'string') {

packages/x6-geometry/src/polyline.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-constructor-return */
+
 import { Line } from './line'
 import { Point } from './point'
 import { Rectangle } from './rectangle'

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

@@ -7,7 +7,7 @@ declare module '@antv/x6/lib/graph/graph' {
     enableClipboard: () => Graph
     disableClipboard: () => Graph
     toggleClipboard: (enabled?: boolean) => Graph
-    isClipboardEmpty: () => boolean
+    isClipboardEmpty: (options?: Clipboard.Options) => boolean
     getCellsInClipboard: () => Cell[]
     cleanClipboard: () => Graph
     copy: (cells: Cell[], options?: Clipboard.CopyOptions) => Graph
@@ -55,10 +55,10 @@ Graph.prototype.toggleClipboard = function (enabled?: boolean) {
   return this
 }
 
-Graph.prototype.isClipboardEmpty = function () {
+Graph.prototype.isClipboardEmpty = function (options?: Clipboard.Options) {
   const clipboard = this.getPlugin('clipboard') as Clipboard
   if (clipboard) {
-    return clipboard.isEmpty()
+    return clipboard.isEmpty(options)
   }
   return true
 }

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

@@ -89,7 +89,12 @@ export class ClipboardImpl {
     }
   }
 
-  isEmpty() {
+  isEmpty(options: ClipboardImpl.Options = {}) {
+    if (options.useLocalStorage) {
+      // With useLocalStorage turned on, no real cells can be obtained without deserialize first
+      // https://github.com/antvis/X6/issues/2573
+      this.deserialize(options)
+    }
     return this.cells.length <= 0
   }
 

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

@@ -60,8 +60,8 @@ export class Clipboard
     return this
   }
 
-  isEmpty() {
-    return this.clipboardImpl.isEmpty()
+  isEmpty(options: Clipboard.Options = {}) {
+    return this.clipboardImpl.isEmpty(options)
   }
 
   getCellsInClipboard() {

packages/x6-plugin-dnd/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @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)
 
 

packages/x6-plugin-dnd/package.json

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

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

@@ -81,7 +81,10 @@ export class Dnd extends View {
 
     this.targetModel.startBatch('dnd')
     Dom.addClass(this.container, 'dragging')
-    Dom.appendTo(this.container, this.options.containerParent || document.body)
+    Dom.appendTo(
+      this.container,
+      this.options.draggingContainer || document.body,
+    )
 
     this.sourceNode = node
     this.prepareDragging(node, e.clientX, e.clientY)
@@ -481,7 +484,7 @@ export namespace Dnd {
     //       duration?: number
     //       easing?: string
     //     }
-    containerParent?: HTMLElement
+    draggingContainer?: HTMLElement
     /**
      * dnd tool box container.
      */

packages/x6-plugin-export/package.json

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

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

@@ -3,12 +3,54 @@ import { Export } from './index'
 
 declare module '@antv/x6/lib/graph/graph' {
   interface Graph {
+    toSVG: (
+      callback: Export.ToSVGCallback,
+      options?: Export.ToSVGOptions,
+    ) => void
+    toPNG: (
+      callback: Export.ToSVGCallback,
+      options?: Export.ToImageOptions,
+    ) => void
+    toJPEG: (
+      callback: Export.ToSVGCallback,
+      options?: Export.ToImageOptions,
+    ) => void
     exportPNG: (fileName?: string, options?: Export.ToImageOptions) => void
     exportJPEG: (fileName?: string, options?: Export.ToImageOptions) => void
     exportSVG: (fileName?: string, options?: Export.ToSVGOptions) => void
   }
 }
 
+Graph.prototype.toSVG = function (
+  callback: Export.ToSVGCallback,
+  options?: Export.ToSVGOptions,
+) {
+  const instance = this.getPlugin('export') as Export
+  if (instance) {
+    instance.toSVG(callback, options)
+  }
+}
+
+Graph.prototype.toPNG = function (
+  callback: Export.ToSVGCallback,
+  options?: Export.ToImageOptions,
+) {
+  const instance = this.getPlugin('export') as Export
+  if (instance) {
+    instance.toPNG(callback, options)
+  }
+}
+
+Graph.prototype.toJPEG = function (
+  callback: Export.ToSVGCallback,
+  options?: Export.ToImageOptions,
+) {
+  const instance = this.getPlugin('export') as Export
+  if (instance) {
+    instance.toJPEG(callback, options)
+  }
+}
+
 Graph.prototype.exportPNG = function (
   fileName?: string,
   options?: Export.ToImageOptions,

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

@@ -17,7 +17,7 @@
 
     > svg {
       pointer-events: none;
-      shape-rendering: optimizeSpeed;
+      shape-rendering: optimizespeed;
     }
 
     .x6-node * {

packages/x6-plugin-scroller/package.json

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

packages/x6-plugin-scroller/src/index.less

@@ -37,14 +37,10 @@
 
   &&-pannable[data-panning='false'] {
     cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
   }
 
   &&-pannable[data-panning='true'] {
     cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
     user-select: none;
   }
 }

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

@@ -35,17 +35,15 @@ export class Scroller extends Basecoat<Scroller.EventArgs> {
     return this.scrollerImpl.container
   }
 
-  constructor(public readonly options: Scroller.Options) {
+  constructor(public options: Scroller.Options) {
     super()
     CssLoader.ensure(this.name, content)
   }
 
   public init(graph: Graph) {
     this.graph = graph
-    this.scrollerImpl = new ScrollerImpl({
-      ...this.options,
-      graph,
-    })
+    this.options = ScrollerImpl.getOptions({ ...this.options, graph })
+    this.scrollerImpl = new ScrollerImpl(this.options)
     this.setup()
     this.startListening()
     this.updateClassName()
@@ -401,7 +399,7 @@ export namespace Scroller {
   export interface EventArgs extends ScrollerImpl.EventArgs {}
 
   type EventType = 'leftMouseDown' | 'rightMouseDown'
-  export interface Options extends ScrollerImpl.CommonOptions {
+  export interface Options extends ScrollerImpl.Options {
     pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
     modifiers?: string | ModifierKey[] | null // alt, ctrl, shift, meta
   }

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

@@ -1128,7 +1128,8 @@ export namespace ScrollerImpl {
     panning: { e: Dom.MouseMoveEvent }
     'pan:stop': { e: Dom.MouseUpEvent }
   }
-  export interface CommonOptions {
+  export interface Options {
+    graph: Graph
     enabled?: boolean
     className?: string
     width?: number
@@ -1151,10 +1152,6 @@ export namespace ScrollerImpl {
           scroller: ScrollerImpl,
         ) => TransformManager.FitToContentFullOptions)
   }
-
-  export interface Options extends CommonOptions {
-    graph: Graph
-  }
   export interface CenterOptions {
     padding?: NumberExt.SideOptions
   }
@@ -1266,7 +1263,7 @@ export namespace ScrollerImpl {
       result.background == null
     ) {
       result.background = graphOptions.background
-      delete graphOptions.background
+      options.graph.background.clear()
     }
 
     return result as ScrollerImpl.Options

packages/x6-plugin-selection/package.json

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

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

@@ -464,7 +464,6 @@ export namespace Selection {
     multipleSelectionModifiers: ['ctrl', 'meta'],
     movable: true,
     strict: false,
-    useCellGeometry: false,
     selectCellOnMoved: false,
     selectNodeOnMoved: false,
     selectEdgeOnMoved: false,

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

@@ -607,29 +607,21 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
     let views: CellView[] = []
 
     if (this.options.rubberNode) {
-      if (this.options.useCellGeometry) {
-        views = views.concat(
-          graph.model
-            .getNodesInArea(rect, options)
-            .map((node) => graph.renderer.findViewByCell(node))
-            .filter((view) => view != null) as CellView[],
-        )
-      } else {
-        views = views.concat(graph.renderer.findViewsInArea(rect, options))
-      }
+      views = views.concat(
+        graph.model
+          .getNodesInArea(rect, options)
+          .map((node) => graph.renderer.findViewByCell(node))
+          .filter((view) => view != null) as CellView[],
+      )
     }
 
     if (this.options.rubberEdge) {
-      if (this.options.useCellGeometry) {
-        views = views.concat(
-          graph.model
-            .getEdgesInArea(rect, options)
-            .map((edge) => graph.renderer.findViewByCell(edge))
-            .filter((view) => view != null) as CellView[],
-        )
-      } else {
-        views = views.concat(graph.renderer.findEdgeViewsInArea(rect, options))
-      }
+      views = views.concat(
+        graph.model
+          .getEdgesInArea(rect, options)
+          .map((edge) => graph.renderer.findViewByCell(edge))
+          .filter((view) => view != null) as CellView[],
+      )
     }
 
     return views
@@ -761,7 +753,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
       const view = this.graph.renderer.findViewByCell(cell)
       if (view) {
         const bbox = view.getBBox({
-          useCellGeometry: this.options.useCellGeometry,
+          useCellGeometry: true,
         })
         origin.x = Math.min(origin.x, bbox.x)
         origin.y = Math.min(origin.y, bbox.y)
@@ -822,7 +814,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
       const view = this.graph.renderer.findViewByCell(cell)
       if (view) {
         const bbox = view.getBBox({
-          useCellGeometry: this.options.useCellGeometry,
+          useCellGeometry: true,
         })
 
         const className = this.boxClassName
@@ -899,7 +891,7 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
   protected onCellAdded({ cell }: Collection.EventArgs['added']) {
     // The collection do not known the cell was removed when cell was
     // removed by interaction(such as, by "delete" shortcut), so we should
-    // manually listen to cell's remove evnet.
+    // manually listen to cell's remove event.
     this.listenCellRemoveEvent(cell)
     this.createSelectionBox(cell)
     this.updateContainer()
@@ -971,7 +963,6 @@ export namespace SelectionImpl {
     showNodeSelectionBox?: boolean
     movable?: boolean
     following?: boolean
-    useCellGeometry?: boolean
     content?: Content
 
     // Can select node or edge when rubberband

packages/x6-plugin-snapline/package.json

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

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

@@ -247,12 +247,12 @@
   }
 
   input[type='search'] {
-    -webkit-appearance: textfield;
+    appearance: textfield;
   }
 
   input[type='search']::-webkit-search-cancel-button,
   input[type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+    appearance: none;
   }
 
   &-search-text {

packages/x6-plugin-transform/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @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)
 
 

packages/x6-plugin-transform/package.json

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

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

@@ -90,18 +90,23 @@ export class Transform extends Basecoat<Transform.EventArgs> {
     )
 
     const options: TransformImpl.Options = {
-      resizable: resizing.enabled,
+      resizable: !!resizing.enabled,
       minWidth: resizing.minWidth || 0,
       maxWidth: resizing.maxWidth || Number.MAX_SAFE_INTEGER,
       minHeight: resizing.minHeight || 0,
       maxHeight: resizing.maxHeight || Number.MAX_SAFE_INTEGER,
-      orthogonalResizing: resizing.orthogonal || true,
-      restrictedResizing: resizing.restrict || false,
-      autoScrollOnResizing: resizing.autoScroll || true,
-      preserveAspectRatio: resizing.preserveAspectRatio || false,
-      allowReverse: resizing.allowReverse || true,
+      orthogonalResizing:
+        typeof resizing.orthogonal === 'boolean' ? resizing.orthogonal : true,
+      restrictedResizing: !!resizing.restrict,
+      autoScrollOnResizing:
+        typeof resizing.autoScroll === 'boolean' ? resizing.autoScroll : true,
+      preserveAspectRatio: !!resizing.preserveAspectRatio,
+      allowReverse:
+        typeof resizing.allowReverse === 'boolean'
+          ? resizing.allowReverse
+          : true,
 
-      rotatable: rotating.enabled || false,
+      rotatable: !!rotating.enabled,
       rotateGrid: rotating.grid || 15,
     }
 

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

@@ -107,7 +107,11 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
 
   render() {
     this.renderHandles()
-    this.view.addClass(Private.NODE_CLS)
+
+    if (this.view) {
+      this.view.addClass(Private.NODE_CLS)
+    }
+
     Dom.addClass(this.container, this.containerClassName)
     Dom.toggleClass(
       this.container,
@@ -153,7 +157,9 @@ export class TransformImpl extends View<TransformImpl.EventArgs> {
   }
 
   remove() {
-    this.view.removeClass(Private.NODE_CLS)
+    if (this.view) {
+      this.view.removeClass(Private.NODE_CLS)
+    }
     return super.remove()
   }
 

packages/x6-react-components/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @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)
 
 

packages/x6-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-components",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "React components for building x6 editors",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -57,17 +57,17 @@
     "classnames": "^2.2.6",
     "rc-dropdown": "^3.0.0-alpha.0",
     "rc-util": "^4.15.7",
-    "react-color": "2.17.1",
+    "react-color": "2.19.3",
     "react-resize-detector": "^7.0.0",
     "ua-parser-js": "^0.7.20"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.1",
-    "@types/react-resize-detector": "^6.1.0",
     "@types/react-dom": "^18.0.9",
+    "@types/react-resize-detector": "^6.1.0",
     "@types/ua-parser-js": "^0.7.33",
-    "antd": "^5.0.0",
+    "antd": "^5.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/x6-react-components/src/auto-scroll-box/style/index.less

@@ -1 +1 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');

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

@@ -37,7 +37,9 @@ export class ColorPicker extends React.Component<
 
   onDocumentClick = (e: React.MouseEvent) => {
     const target = e.target as HTMLDivElement
-    if (target === this.container || this.container.contains(target)) {
+    const picker = this.container.querySelector('.sketch-picker')!
+
+    if (target === picker || picker.contains(target)) {
       return
     }
 
@@ -59,12 +61,9 @@ export class ColorPicker extends React.Component<
     if (this.props.onChange) {
       this.props.onChange(value, event)
     }
-
     this.setState({
-      active: false,
       color: value.rgb,
     })
-    this.unbindDocEvent()
   }
 
   handleClick = (e: React.MouseEvent) => {
@@ -84,8 +83,10 @@ export class ColorPicker extends React.Component<
     }
   }
 
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
+  refContainer = (popoverRef: { getContainer: () => HTMLDivElement }) => {
+    if (popoverRef) {
+      this.container = popoverRef.getContainer()
+    }
   }
 
   renderPicker() {
@@ -123,10 +124,12 @@ export class ColorPicker extends React.Component<
         {...popoverProps}
         content={this.renderPicker()}
         overlayClassName={`${baseCls}-overlay`}
+        destroyTooltipOnHide
+        ref={this.refContainer}
+        trigger={[]}
       >
         <div
           style={style}
-          ref={this.refContainer}
           onClick={this.handleClick}
           className={classNames(baseCls, {
             [`${baseCls}-disabled`]: disabled,

packages/x6-react-components/src/color-picker/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @color-picker-prefix-cls: ~'@{x6-prefix}-color-picker';
 
@@ -27,7 +27,7 @@
       background: transparent;
 
       .sketch-picker {
-        box-shadow: #e9e9e9 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 8px 16px !important;
+        box-shadow: #e9e9e9 0 0 0 1px, rgb(0 0 0 / 10%) 0 8px 16px !important;
       }
     }
   }

packages/x6-react-components/src/context-menu/style/index.less

@@ -1,2 +1,2 @@
-@import '../../style/themes/index';
-@import '../../menu/style/index';
+@import url('../../style/themes/index');
+@import url('../../menu/style/index');

packages/x6-react-components/src/dropdown/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @dropdown-prefix-cls: ~'@{x6-prefix}-dropdown';
 
@@ -11,7 +11,7 @@
   max-height: 320px;
   overflow-y: scroll;
   border-radius: 3px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
 
   // &::before {
   //   position: absolute;

packages/x6-react-components/src/menu/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @menu-prefix-cls: ~'@{x6-prefix}-menu';
 
@@ -103,8 +103,8 @@
     right: 12px;
     width: 0;
     height: 0;
-    border-top: 4px solid rgba(0, 0, 0, 0);
-    border-bottom: 4px solid rgba(0, 0, 0, 0);
+    border-top: 4px solid rgb(0 0 0 / 0%);
+    border-bottom: 4px solid rgb(0 0 0 / 0%);
     border-left: 5px solid @menu-submenu-arrow-color;
     opacity: 0.4;
     pointer-events: none;

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

@@ -26,6 +26,7 @@ class MenubarItemInner extends React.PureComponent<
   }
 
   onClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
     this.props.context.activeMenubar()
     this.removeDeactive(e.currentTarget.parentElement)
     this.active()

packages/x6-react-components/src/menubar/style/index.less

@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../menu/style/index';
+@import url('../../style/themes/index');
+@import url('../../menu/style/index');
 
 @menubar-prefix-cls: ~'@{x6-prefix}-menubar';
 
@@ -96,7 +96,7 @@
     }
 
     & > .@{menu-prefix-cls} {
-      border-radius: 0 4px 4px 4px;
+      border-radius: 0 4px 4px;
     }
 
     .@{menu-prefix-cls}-submenu-menu {

packages/x6-react-components/src/scroll-box/style/index.less

@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../scrollbar/style/index';
+@import url('../../style/themes/index');
+@import url('../../scrollbar/style/index');
 
 @scrollBox-prefix-cls: ~'@{x6-prefix}-scroll-box';
 

packages/x6-react-components/src/scrollbar/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @scrollbar-prefix-cls: ~'@{x6-prefix}-scrollbar';
 

packages/x6-react-components/src/split-box/style/index.less

@@ -1,4 +1,4 @@
-@import '../../style/themes/index';
+@import url('../../style/themes/index');
 
 @splitBox-prefix-cls: ~'@{x6-prefix}-split-box';
 

packages/x6-react-components/src/style/index.less

@@ -1 +1 @@
-@import './themes/index';
+@import url('./themes/index');

packages/x6-react-components/src/style/themes/index.less

@@ -1 +1 @@
-@import './default.less';
+@import url('./default.less');

packages/x6-react-components/src/toolbar/style/index.less

@@ -1,5 +1,5 @@
-@import '../../style/themes/index';
-@import '../../dropdown/style/index';
+@import url('../../style/themes/index');
+@import url('../../dropdown/style/index');
 
 @toolbar-prefix-cls: ~'@{x6-prefix}-toolbar';
 
@@ -42,7 +42,7 @@
       width: 1px;
       height: 40%;
       margin: 0 6px;
-      background-color: rgba(0, 0, 0, 0.15);
+      background-color: rgb(0 0 0 / 15%);
       content: ' ';
       pointer-events: none;
     }
@@ -111,9 +111,9 @@
     width: 0;
     height: 0;
     margin-left: 6px;
-    border-color: #262626 transparent transparent transparent;
+    border-color: #262626 transparent transparent;
     border-style: solid;
-    border-width: 5px 4px 0 4px;
+    border-width: 5px 4px 0;
     opacity: 0.4;
   }
 

packages/x6-react-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-shape",
-  "version": "2.0.5",
+  "version": "2.1.0",
   "description": "X6 shape for rendering react components.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "@antv/x6": "^2.x",
-    "react": ">=16.8.6 || >=17.0.0 || >=18.0.0",
-    "react-dom": ">=16.8.6 || >=17.0.0 || >= 18.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">= 18.0.0"
   },
   "devDependencies": {
     "@antv/x6": "^2.x",

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

@@ -1,19 +1,16 @@
-import React, { ReactPortal, version as reactVersion } from 'react'
-import ReactDOM, { createPortal } from 'react-dom'
-import type { Root, createRoot as CreateRoot } from 'react-dom/client'
+import React, { ReactPortal } from 'react'
+import { createPortal } from 'react-dom'
+import { createRoot, Root } from 'react-dom/client'
 import { Dom, NodeView } from '@antv/x6'
 import { ReactShape } from './node'
 import { Portal } from './portal'
 import { Wrap } from './wrap'
 
-const [, major] = /^(\d+)\.\d+\.\d+$/.exec(reactVersion)!
-const reactMajor = Number(major)
-const isPreEighteen = reactMajor < 18
 export class ReactShapeView extends NodeView<ReactShape> {
   root?: Root
 
   getComponentContainer() {
-    return this.selectors.foContent as HTMLDivElement
+    return this.selectors && (this.selectors.foContent as HTMLDivElement)
   }
 
   confirmUpdate(flag: number) {
@@ -29,36 +26,22 @@ export class ReactShapeView extends NodeView<ReactShape> {
     const node = this.cell
 
     if (container) {
-      const graph = node.model ? node.model.graph : null
-      // Actually in the dnd plugin, this graph is empty,
-      // in order to make the external perception type of graph is a graph, rather than graph | null, so hack this.
-      const elem = React.createElement(Wrap, { node, graph: graph! })
+      const elem = React.createElement(Wrap, { node, graph: this.graph })
       if (Portal.isActive()) {
         const portal = createPortal(elem, container) as ReactPortal
         Portal.connect(this.cell.id, portal)
       } else {
-        if (isPreEighteen) {
-          ReactDOM.render(elem, container)
-        } else {
-          // eslint-disable-next-line
-          const createRoot = require('react-dom/client')
-            .createRoot as typeof CreateRoot
-          this.root = createRoot(container)
-          this.root.render(elem)
-        }
+        this.root = createRoot(container)
+        this.root.render(elem)
       }
     }
   }
 
   protected unmountReactComponent() {
     const container = this.getComponentContainer()
-    if (container) {
-      if (isPreEighteen) {
-        ReactDOM.unmountComponentAtNode(container)
-      } else if (this.root) {
-        this.root.unmount()
-        this.root = undefined
-      }
+    if (container && this.root) {
+      this.root.unmount()
+      this.root = undefined
     }
   }
 

packages/x6-vue-shape/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @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)
 
 

packages/x6-vue-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-vue-shape",
-  "version": "2.0.4",
+  "version": "2.0.9",
   "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,5 @@
 import { defineComponent, h, reactive, isVue3, Vue } from 'vue-demi'
+import { Graph } from '@antv/x6'
 import { VueShape } from './node'
 
 let active = false
@@ -9,6 +10,7 @@ export function connect(
   component: any,
   container: HTMLDivElement,
   node: VueShape,
+  graph: Graph,
 ) {
   if (active) {
     const { Teleport, markRaw } = Vue as any
@@ -17,6 +19,7 @@ export function connect(
         render: () => h(Teleport, { to: container } as any, [h(component)]),
         provide: () => ({
           getNode: () => node,
+          getGraph: () => graph,
         }),
       }),
     )

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

@@ -8,7 +8,7 @@ export class VueShapeView extends NodeView<VueShape> {
   private vm: any
 
   getComponentContainer() {
-    return this.selectors.foContent as HTMLDivElement
+    return this.selectors && (this.selectors.foContent as HTMLDivElement)
   }
 
   confirmUpdate(flag: number) {
@@ -18,7 +18,7 @@ export class VueShapeView extends NodeView<VueShape> {
     })
   }
 
-  protected targetId(){
+  protected targetId() {
     return `${this.graph.view.cid}:${this.cell.id}`
   }
 
@@ -26,6 +26,7 @@ export class VueShapeView extends NodeView<VueShape> {
     this.unmountVueComponent()
     const root = this.getComponentContainer()
     const node = this.cell
+    const graph = this.graph
 
     if (root) {
       const { component } = shapeMaps[node.shape]
@@ -40,12 +41,13 @@ export class VueShapeView extends NodeView<VueShape> {
             provide() {
               return {
                 getNode: () => node,
+                getGraph: () => graph,
               }
             },
           })
         } else if (isVue3) {
           if (isActive()) {
-            connect(this.targetId(), component, root, node)
+            connect(this.targetId(), component, root, node, graph)
           } else {
             this.vm = createApp({
               render() {
@@ -54,6 +56,7 @@ export class VueShapeView extends NodeView<VueShape> {
               provide() {
                 return {
                   getNode: () => node,
+                  getGraph: () => graph,
                 }
               },
             })
@@ -71,7 +74,9 @@ export class VueShapeView extends NodeView<VueShape> {
       isVue3 && this.vm.unmount()
       this.vm = null
     }
-    root.innerHTML = ''
+    if (root) {
+      root.innerHTML = ''
+    }
     return root
   }
 

packages/x6/CHANGELOG.md

@@ -1,3 +1,69 @@
+# @antv/x6 [2.2.0](https://github.com/antvis/x6/compare/@antv/x6@2.1.7...@antv/x6@2.2.0) (2023-01-31)
+
+
+### Features
+
+* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
+
+## @antv/x6 [2.1.6](https://github.com/antvis/x6/compare/@antv/x6@2.1.5...@antv/x6@2.1.6) (2023-01-19)
+
+## @antv/x6 [2.1.5](https://github.com/antvis/x6/compare/@antv/x6@2.1.4...@antv/x6@2.1.5) (2023-01-13)
+
+
+### Bug Fixes
+
+* update group even group is empty ([#3117](https://github.com/antvis/x6/issues/3117)) ([6abd068](https://github.com/antvis/x6/commit/6abd0683eab22eb0fa1a4702642ab76b91320694))
+
+## @antv/x6 [2.1.4](https://github.com/antvis/x6/compare/@antv/x6@2.1.3...@antv/x6@2.1.4) (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 [2.1.3](https://github.com/antvis/x6/compare/@antv/x6@2.1.2...@antv/x6@2.1.3) (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 [2.1.1](https://github.com/antvis/x6/compare/@antv/x6@2.1.0...@antv/x6@2.1.1) (2022-12-19)
+
+
+### Bug Fixes
+
+* arrowhead not get options bug ([#3065](https://github.com/antvis/x6/issues/3065)) ([3b668fe](https://github.com/antvis/x6/commit/3b668feb4eac47994f52d0cc977d22a8a2c06acd))
+* set snapToGrid to false by default ([#3066](https://github.com/antvis/x6/issues/3066)) ([e2bb71d](https://github.com/antvis/x6/commit/e2bb71d95484b29187fafca97f1a386e9b984095))
+
+# @antv/x6 [2.1.0](https://github.com/antvis/x6/compare/@antv/x6@2.0.9...@antv/x6@2.1.0) (2022-12-19)
+
+
+### Features
+
+* add snapToGrid options for manhattan router ([#3062](https://github.com/antvis/x6/issues/3062)) ([824560d](https://github.com/antvis/x6/commit/824560ddda7016158cce3166773e1af009bfe498))
+
+## @antv/x6 [2.0.9](https://github.com/antvis/x6/compare/@antv/x6@2.0.8...@antv/x6@2.0.9) (2022-12-16)
+
+
+### Bug Fixes
+
+* :bug: char ghosting when edit text ([#2560](https://github.com/antvis/x6/issues/2560)) ([#3043](https://github.com/antvis/x6/issues/3043)) ([15284e7](https://github.com/antvis/x6/commit/15284e778a09f4f2e5a8f777330744b0cfe88e9e))
+
+## @antv/x6 [2.0.8](https://github.com/antvis/x6/compare/@antv/x6@2.0.7...@antv/x6@2.0.8) (2022-12-08)
+
+
+### Bug Fixes
+
+* trigger preventDefault by origin event ([#3017](https://github.com/antvis/x6/issues/3017)) ([4a6a634](https://github.com/antvis/x6/commit/4a6a634a8acfad5c1a7bb93ac17fb3b97239e853))
+
+## @antv/x6 [2.0.7](https://github.com/antvis/x6/compare/@antv/x6@2.0.6...@antv/x6@2.0.7) (2022-12-06)
+
+
+### Bug Fixes
+
+* hide elems when visible is false ([#3007](https://github.com/antvis/x6/issues/3007)) ([057d520](https://github.com/antvis/x6/commit/057d5209ff827d0231ecc6562e768907f75aff2d))
+
 ## @antv/x6 [2.0.4](https://github.com/antvis/x6/compare/@antv/x6@2.0.3...@antv/x6@2.0.4) (2022-11-25)
 
 

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/src/graph/graph.ts

@@ -58,8 +58,12 @@ export class Graph extends Basecoat<EventArgs> {
     this.grid = new Grid(this)
     this.background = new Background(this)
 
-    this.model = this.options.model ? this.options.model : new Model()
-    this.model.graph = this
+    if (this.options.model) {
+      this.model = this.options.model
+    } else {
+      this.model = new Model()
+      this.model.graph = this
+    }
 
     this.renderer = new ViewRenderer(this)
     this.panning = new Panning(this)
@@ -1189,15 +1193,9 @@ export class Graph extends Basecoat<EventArgs> {
   }
 
   getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined {
-    let result: Graph.Plugin | undefined
-
-    this.installedPlugins.forEach((plugin) => {
-      if (plugin.name === pluginName) {
-        result = plugin
-      }
-    })
-
-    return result as T
+    return Array.from(this.installedPlugins).find(
+      (plugin) => plugin.name === pluginName,
+    ) as T
   }
 
   // #endregion

packages/x6/src/graph/options.ts

@@ -55,6 +55,8 @@ export namespace Options {
 
     onPortRendered?: (args: OnPortRenderedArgs) => void
     onEdgeLabelRendered?: (args: OnEdgeLabelRenderedArgs) => void
+
+    createCellView?: (this: Graph, cell: Cell) => CellView | null | undefined
   }
 
   export interface ManualBooleans {

packages/x6/src/graph/view.ts

@@ -149,7 +149,7 @@ export class GraphView extends View {
   protected onContextMenu(evt: Dom.ContextMenuEvent) {
     const e = this.normalizeEvent(evt)
     const view = this.findView(e.target)
-    
+
     if (this.isPreventDefaultContextMenu(view)) {
       evt.preventDefault()
     }
@@ -201,7 +201,7 @@ export class GraphView extends View {
     }
 
     if (this.options.preventDefaultMouseDown) {
-      e.preventDefault()
+      evt.preventDefault()
     }
 
     const localPoint = this.graph.snapToGrid(e.clientX, e.clientY)
@@ -213,7 +213,7 @@ export class GraphView extends View {
         this.options.preventDefaultBlankAction &&
         ['touchstart'].includes(e.type)
       ) {
-        e.preventDefault()
+        evt.preventDefault()
       }
 
       this.graph.trigger('blank:mousedown', {

packages/x6/src/index.less

@@ -1,4 +1,4 @@
-@import './style/index';
+@import url('./style/index');
 
 // tools
-@import './registry/tool/editor';
+@import url('./registry/tool/editor');

packages/x6/src/model/model.ts

@@ -358,14 +358,14 @@ export class Model extends Basecoat<Model.EventArgs> {
   disconnectConnectedEdges(cell: Cell | string, options: Edge.SetOptions = {}) {
     const cellId = typeof cell === 'string' ? cell : cell.id
     this.getConnectedEdges(cell).forEach((edge) => {
-      const sourceCell = edge.getSourceCell()
-      const targetCell = edge.getTargetCell()
+      const sourceCellId = edge.getSourceCellId()
+      const targetCellId = edge.getTargetCellId()
 
-      if (sourceCell && sourceCell.id === cellId) {
+      if (sourceCellId === cellId) {
         edge.setSource({ x: 0, y: 0 }, options)
       }
 
-      if (targetCell && targetCell.id === cellId) {
+      if (targetCellId === cellId) {
         edge.setTarget({ x: 0, y: 0 }, options)
       }
     })

packages/x6/src/registry/index.ts

@@ -12,3 +12,5 @@ export * from './edge-anchor'
 export * from './connection-point'
 export * from './router'
 export * from './connector'
+
+export * from './registry'

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

@@ -71,15 +71,17 @@ export class ObstacleMap {
     const mapGridSize = this.mapGridSize
 
     model.getNodes().reduce((map, node) => {
-      const shape = node.shape
-      const excludeShapes = options.excludeShapes
-      const excType = shape ? excludeShapes.includes(shape) : false
-      const excTerminal = excludedTerminals.some((cell) => cell.id === node.id)
-      const excNode = options.excludeNodes.includes(node)
-      const excAncestor = excludedAncestors.includes(node.id)
-      const excHidden = options.excludeHiddenNodes && !node.isVisible()
-      const excluded =
-        excType || excTerminal || excNode || excAncestor || excHidden
+      const excludedTerminal = excludedTerminals.some(
+        (cell) => cell.id === node.id,
+      )
+      const excludedNode = options.excludeNodes.some((item) => {
+        if (typeof item === 'string') {
+          return node.id === item
+        }
+        return item === node
+      })
+      const excludedAncestor = excludedAncestors.includes(node.id)
+      const excluded = excludedTerminal || excludedNode || excludedAncestor
 
       if (!excluded) {
         const bbox = node.getBBox().moveAndExpand(options.paddingBox)

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

@@ -41,20 +41,10 @@ export interface ResolvedOptions {
    */
   excludeTerminals: Edge.TerminalType[]
 
-  /**
-   * Should certain types of nodes not be considered as obstacles?
-   */
-  excludeShapes: string[]
-
-  /**
-   * Should certain hidden nodes not be considered as obstacles?
-   */
-  excludeHiddenNodes: boolean
-
   /**
    * Should certain nodes not be considered as obstacles?
    */
-   excludeNodes: Node[]
+  excludeNodes: (Node | string)[]
 
   /**
    * Possible starting directions from a node.
@@ -132,6 +122,9 @@ export interface ResolvedOptions {
   ) => Point[] | null
 
   previousDirectionAngle?: number | null
+
+  // Whether the calculation results are aligned with the grid
+  snapToGrid?: boolean
 }
 
 export type ManhattanRouterOptions = {
@@ -145,9 +138,7 @@ export const defaults: ManhattanRouterOptions = {
   maxDirectionChange: 90,
   perpendicular: true,
   excludeTerminals: [],
-  excludeShapes: [], // ['text']
   excludeNodes: [],
-  excludeHiddenNodes: false,
   startDirections: ['top', 'right', 'bottom', 'left'],
   endDirections: ['top', 'right', 'bottom', 'left'],
   directionMap: {
@@ -195,6 +186,7 @@ export const defaults: ManhattanRouterOptions = {
 
   fallbackRouter: orth,
   draggingRouter: null,
+  snapToGrid: true,
 }
 
 export function resolve<T>(

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

@@ -265,6 +265,32 @@ function findRoute(
   return null
 }
 
+function snap(vertices: Point[], gridSize = 10) {
+  if (vertices.length <= 1) {
+    return vertices
+  }
+
+  for (let i = 0, len = vertices.length; i < len - 1; i += 1) {
+    const first = vertices[i]
+    const second = vertices[i + 1]
+    if (first.x === second.x) {
+      const x = gridSize * Math.round(first.x / gridSize)
+      if (first.x !== x) {
+        first.x = x
+        second.x = x
+      }
+    } else if (first.y === second.y) {
+      const y = gridSize * Math.round(first.y / gridSize)
+      if (first.y !== y) {
+        first.y = y
+        second.y = y
+      }
+    }
+  }
+
+  return vertices
+}
+
 export const router: Router.Definition<ManhattanRouterOptions> = function (
   vertices,
   optionsRaw,
@@ -328,7 +354,7 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
     if (partialRoute === null) {
       // eslint-next-line
       console.warn(`Unable to execute manhattan algorithm, use orth instead`)
-      
+
       return FunctionExt.call(
         options.fallbackRouter,
         this,
@@ -350,5 +376,9 @@ export const router: Router.Definition<ManhattanRouterOptions> = function (
     newVertices.push(...partialRoute)
   }
 
+  if (options.snapToGrid) {
+    return snap(newVertices, edgeView.graph.grid.getGridSize())
+  }
+
   return newVertices
 }

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

@@ -74,6 +74,7 @@ class Arrowhead extends ToolsView.ToolItem<EdgeView, Arrowhead.Options> {
         x: coords.x,
         y: coords.y,
         options: {
+          ...this.options,
           toolId: this.cid,
         },
       })

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

@@ -1,4 +1,4 @@
-@import '../../style/index';
+@import url('../../style/index');
 
 .@{x6-prefix}-cell-tool-editor {
   position: relative;

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

@@ -94,6 +94,9 @@ export class CellEditor extends ToolsView.ToolItem<
     }
     editor.innerText = text || ''
 
+    // clear display value when edit status because char ghosting.
+    this.setCellText('')
+
     return this
   }
 
@@ -102,15 +105,7 @@ export class CellEditor extends ToolsView.ToolItem<
       const cell = this.cell
       const value = this.editor.innerText.replace(/\n$/, '') || ''
       // set value
-      const setText = this.options.setText
-      if (typeof setText === 'function') {
-        FunctionExt.call(setText, this.cellView, {
-          cell: this.cell,
-          value,
-          index: this.labelIndex,
-          distance: this.distance,
-        })
-      }
+      this.setCellText(value)
       // remove tool
       cell.removeTool(cell.isEdge() ? 'edge-editor' : 'node-editor')
       this.undelegateDocumentEvents()
@@ -141,6 +136,18 @@ export class CellEditor extends ToolsView.ToolItem<
       selection.addRange(range)
     }
   }
+
+  setCellText(value: string) {
+    const setText = this.options.setText
+    if (typeof setText === 'function') {
+      FunctionExt.call(setText, this.cellView, {
+        cell: this.cell,
+        value,
+        index: this.labelIndex,
+        distance: this.distance,
+      })
+    }
+  }
 }
 
 export namespace CellEditor {

packages/x6/src/renderer/scheduler.ts

@@ -1,4 +1,4 @@
-import { KeyValue, Dom, Disposable } from '@antv/x6-common'
+import { KeyValue, Dom, Disposable, FunctionExt } from '@antv/x6-common'
 import { Rectangle } from '@antv/x6-geometry'
 import { Model, Cell } from '../model'
 import { View, CellView, NodeView, EdgeView } from '../view'
@@ -8,6 +8,7 @@ import { Graph } from '../graph'
 
 export class Scheduler extends Disposable {
   public views: KeyValue<Scheduler.View> = {}
+  public willRemoveViews: KeyValue<Scheduler.View> = {}
   protected zPivots: KeyValue<Comment>
   private graph: Graph
   private renderArea?: Rectangle
@@ -51,7 +52,7 @@ export class Scheduler extends Disposable {
   protected onModelReseted({ options }: Model.EventArgs['reseted']) {
     this.queue.clearJobs()
     this.removeZPivots()
-    this.removeViews()
+    this.resetViews()
     this.renderViews(this.model.getCells(), options)
   }
 
@@ -59,12 +60,8 @@ export class Scheduler extends Disposable {
     this.renderViews([cell], options)
   }
 
-  protected onCellRemoved({ cell, options }: Model.EventArgs['cell:removed']) {
-    const viewItem = this.views[cell.id]
-    if (viewItem) {
-      const view = viewItem.view
-      this.requestViewUpdate(view, Scheduler.FLAG_REMOVE, options)
-    }
+  protected onCellRemoved({ cell }: Model.EventArgs['cell:removed']) {
+    this.removeViews([cell])
   }
 
   protected onCellZIndexChanged({
@@ -181,13 +178,15 @@ export class Scheduler extends Disposable {
         }
       }
 
-      this.requestViewUpdate(
-        viewItem.view,
-        flag,
-        options,
-        cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
-        false,
-      )
+      if (viewItem) {
+        this.requestViewUpdate(
+          viewItem.view,
+          flag,
+          options,
+          this.getRenderPriority(viewItem.view),
+          false,
+        )
+      }
     })
 
     this.flush()
@@ -217,9 +216,43 @@ export class Scheduler extends Disposable {
 
     if (result) {
       console.log('left flag', result) // eslint-disable-line
+      if (
+        cell.isEdge() &&
+        (result & view.getFlag(['source', 'target'])) === 0
+      ) {
+        this.queue.queueJob({
+          id,
+          priority: JOB_PRIORITY.RenderEdge,
+          cb: () => {
+            this.updateView(view, flag, options)
+          },
+        })
+      }
     }
   }
 
+  protected removeViews(cells: Cell[]) {
+    cells.forEach((cell) => {
+      const id = cell.id
+      const viewItem = this.views[id]
+
+      if (viewItem) {
+        this.willRemoveViews[id] = viewItem
+        delete this.views[id]
+
+        this.queue.queueJob({
+          id,
+          priority: this.getRenderPriority(viewItem.view),
+          cb: () => {
+            this.removeView(viewItem.view)
+          },
+        })
+      }
+    })
+
+    this.flush()
+  }
+
   protected flush() {
     this.graph.options.async
       ? this.queue.queueFlush()
@@ -232,10 +265,13 @@ export class Scheduler extends Disposable {
       const viewItem = this.views[ids[i]]
       if (viewItem && viewItem.state === Scheduler.ViewState.WAITTING) {
         const { view, flag, options } = viewItem
-        const priority = view.cell.isNode()
-          ? JOB_PRIORITY.RenderNode
-          : JOB_PRIORITY.RenderEdge
-        this.requestViewUpdate(view, flag, options, priority, false)
+        this.requestViewUpdate(
+          view,
+          flag,
+          options,
+          this.getRenderPriority(view),
+          false,
+        )
       }
     }
 
@@ -272,27 +308,34 @@ export class Scheduler extends Disposable {
       const zIndex = view.cell.getZIndex()
       const pivot = this.addZPivot(zIndex)
       this.container.insertBefore(view.container, pivot)
+
+      if (!view.cell.isVisible()) {
+        this.toggleVisible(view.cell, false)
+      }
+
       viewItem.state = Scheduler.ViewState.MOUNTED
     }
   }
 
-  protected removeViews() {
-    Object.keys(this.views).forEach((id) => {
-      const viewItem = this.views[id]
+  protected resetViews() {
+    this.willRemoveViews = { ...this.views }
+    Object.keys(this.willRemoveViews).forEach((id) => {
+      const viewItem = this.willRemoveViews[id]
       if (viewItem) {
-        this.removeView(viewItem.view.cell)
+        this.removeView(viewItem.view)
       }
     })
     this.views = {}
+    this.willRemoveViews = {}
   }
 
-  protected removeView(cell: Cell) {
-    const viewItem = this.views[cell.id]
-    if (viewItem) {
+  protected removeView(view: CellView) {
+    const cell = view.cell
+    const viewItem = this.willRemoveViews[cell.id]
+    if (view) {
       viewItem.view.remove()
-      delete this.views[cell.id]
+      delete this.willRemoveViews[cell.id]
     }
-    return viewItem.view
   }
 
   protected toggleVisible(cell: Cell, visible: boolean) {
@@ -370,15 +413,22 @@ export class Scheduler extends Disposable {
   }
 
   protected createCellView(cell: Cell) {
-    const options = { graph: this.graph }
+    const createViewHook = this.graph.options.createCellView
+    if (createViewHook) {
+      const ret = FunctionExt.call(createViewHook, this.graph, cell)
+      if (ret || ret === null) {
+        return ret
+      }
+    }
 
     const view = cell.view
+    const options = { graph: this.graph }
+
     if (view != null && typeof view === 'string') {
       const def = CellView.registry.get(view)
       if (def) {
         return new def(cell, options) // eslint-disable-line new-cap
       }
-
       return CellView.registry.onNotFound(view)
     }
 
@@ -429,6 +479,12 @@ export class Scheduler extends Disposable {
     )
   }
 
+  protected getRenderPriority(view: CellView) {
+    return view.cell.isNode()
+      ? JOB_PRIORITY.RenderNode
+      : JOB_PRIORITY.RenderEdge
+  }
+
   @Disposable.dispose()
   dispose() {
     this.stopListening()

packages/x6/src/style/index.less

@@ -1,4 +1,4 @@
-@import './themes/index';
+@import url('./themes/index');
 
 .noScalingStroke() {
   vector-effect: non-scaling-stroke;

packages/x6/src/style/themes/index.less

@@ -1 +1 @@
-@import './default.less';
+@import url('./default.less');

packages/x6/src/view/edge.ts

@@ -1398,6 +1398,7 @@ export class EdgeView<
   }
 
   onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
+    this.notifyMouseDown(e, x, y)
     this.startEdgeDragging(e, x, y)
   }
 
@@ -2191,7 +2192,9 @@ export class EdgeView<
     for (let i = 0, ii = cells.length; i < ii; i += 1) {
       const view = graph.findViewByCell(cells[i])
 
-      if (!view) {
+      // Prevent highlighting new edge
+      // Close https://github.com/antvis/X6/issues/2853
+      if (!view || view.cell.id === this.cell.id) {
         continue
       }