fix: ensure the container in html view (#3196 )

fix: set correct scroller options (#3195 )
fix: clear old background when background enabled in background (#3192 )
2023-02-02 17:00:48 +08:00 · 2023-02-02 16:39:46 +08:00 · 2023-02-01 22:55:29 +08:00 · 2023-02-01 11:27:54 +00:00 · 2023-02-01 19:20:26 +08:00 · 2023-01-31 09:52:16 +00:00
39 changed files with 505 additions and 244 deletions
--- a/31
+++ b/31
@ -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,13 +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>
-Kent <oo>
+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>
@ -26,17 +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 <>
+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>
@ -67,10 +69,11 @@ 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>
--- a/CONTRIBUTORS.svg
+++ b/CONTRIBUTORS.svg
--- a/README.md
+++ b/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/actions/workflow/status/antvis/x6/ci.yml?branch=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>

 ## 特性
--- a/examples/x6-example-features/CHANGELOG.md
+++ b/examples/x6-example-features/CHANGELOG.md
@ -1,3 +1,10 @@
+## @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)


--- a/examples/x6-example-features/package.json
+++ b/examples/x6-example-features/package.json
@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "@antv/x6-example-features",
-  "version": "2.0.1",
+  "version": "2.0.2",
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
--- a/examples/x6-example-features/src/pages/case/mind.tsx
+++ b/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
--- a/packages/x6-common/CHANGELOG.md
+++ b/packages/x6-common/CHANGELOG.md
@ -1,3 +1,17 @@
+## @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)


--- a/packages/x6-common/package.json
+++ b/packages/x6-common/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/x6-common",
-  "version": "2.0.4",
+  "version": "2.0.6",
  "description": "Basic toolkit for X6",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/packages/x6-common/src/algorithm/priorityqueue.ts
+++ b/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
--- a/packages/x6-common/src/css-loader/loader.ts
+++ b/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)
    }
--- a/packages/x6-plugin-clipboard/src/api.ts
+++ b/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
 }
--- a/packages/x6-plugin-clipboard/src/clipboard.ts
+++ b/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
  }

--- a/packages/x6-plugin-clipboard/src/index.ts
+++ b/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() {
--- a/packages/x6-plugin-dnd/CHANGELOG.md
+++ b/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)


--- a/packages/x6-plugin-dnd/package.json
+++ b/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",
--- a/packages/x6-plugin-dnd/src/index.ts
+++ b/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.
     */
--- a/packages/x6-plugin-scroller/src/index.ts
+++ b/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
  }
--- a/packages/x6-plugin-scroller/src/scroller.ts
+++ b/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
--- a/packages/x6-react-components/CHANGELOG.md
+++ b/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)


--- a/packages/x6-react-components/package.json
+++ b/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",
--- a/packages/x6-react-components/src/color-picker/index.tsx
+++ b/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,
--- a/packages/x6-react-components/src/menubar/item.tsx
+++ b/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()
--- a/packages/x6/CHANGELOG.md
+++ b/packages/x6/CHANGELOG.md
@ -1,3 +1,26 @@
+# @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)


--- a/packages/x6/package.json
+++ b/packages/x6/package.json
@ -1,6 +1,6 @@
 {
  "name": "@antv/x6",
-  "version": "2.1.3",
+  "version": "2.2.0",
  "description": "JavaScript diagramming library that uses SVG and HTML for rendering",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/packages/x6/src/graph/graph.ts
+++ b/packages/x6/src/graph/graph.ts
@ -1193,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
--- a/packages/x6/src/renderer/scheduler.ts
+++ b/packages/x6/src/renderer/scheduler.ts
@ -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({
@ -186,7 +183,7 @@ export class Scheduler extends Disposable {
          viewItem.view,
          flag,
          options,
-          cell.isNode() ? JOB_PRIORITY.RenderNode : JOB_PRIORITY.RenderEdge,
+          this.getRenderPriority(viewItem.view),
          false,
        )
      }
@ -234,6 +231,28 @@ export class Scheduler extends Disposable {
    }
  }

+  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()
@ -246,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,
+        )
      }
    }

@ -295,23 +317,25 @@ export class Scheduler extends Disposable {
    }
  }

-  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) {
@ -455,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()
--- a/packages/x6/src/shape/html.ts
+++ b/packages/x6/src/shape/html.ts
@ -36,7 +36,8 @@ export namespace HTML {
    }

    protected renderHTMLComponent() {
-      const container = this.selectors.foContent as Element
+      const container =
+        this.selectors && (this.selectors.foContent as HTMLDivElement)
      if (container) {
        Dom.empty(container)
        const content = shapeMaps[this.cell.shape]
--- a/packages/x6/src/view/edge.ts
+++ b/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
      }

--- a/packages/x6/src/view/node.ts
+++ b/packages/x6/src/view/node.ts
@ -357,7 +357,12 @@ export class NodeView<

  protected updatePorts() {
    const groups = this.cell.getParsedGroups()
-    Object.keys(groups).forEach((groupName) => this.updatePortGroup(groupName))
+    const groupList = Object.keys(groups)
+    if (groupList.length === 0) {
+      this.updatePortGroup()
+    } else {
+      groupList.forEach((groupName) => this.updatePortGroup(groupName))
+    }
  }

  protected updatePortGroup(groupName?: string) {
@ -452,6 +457,28 @@ export class NodeView<
    return { e, x, y, view, node, cell } as NodeView.PositionEventArgs<E>
  }

+  protected getPortEventArgs<E>(
+    e: E,
+    port: string,
+    pos?: { x: number; y: number },
+  ) {
+    const view = this // eslint-disable-line
+    const node = view.cell
+    const cell = node
+    if (pos) {
+      return {
+        e,
+        x: pos.x,
+        y: pos.y,
+        view,
+        node,
+        cell,
+        port,
+      } as NodeView.PositionEventArgs<E>
+    }
+    return { e, view, node, cell, port } as NodeView.MouseEventArgs<E>
+  }
+
  notifyMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
    super.onMouseDown(e, x, y)
    this.notify('node:mousedown', this.getEventArgs(e, x, y))
@ -467,19 +494,33 @@ export class NodeView<
    this.notify('node:mouseup', this.getEventArgs(e, x, y))
  }

+  notifyPortEvent(
+    name: string,
+    e: Dom.EventObject,
+    pos?: { x: number; y: number },
+  ) {
+    const port = this.findAttr('port', e.target)
+    if (port) {
+      this.notify(name, this.getPortEventArgs(e, port, pos))
+    }
+  }
+
  onClick(e: Dom.ClickEvent, x: number, y: number) {
    super.onClick(e, x, y)
    this.notify('node:click', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:click', e, { x, y })
  }

  onDblClick(e: Dom.DoubleClickEvent, x: number, y: number) {
    super.onDblClick(e, x, y)
    this.notify('node:dblclick', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:dblclick', e, { x, y })
  }

  onContextMenu(e: Dom.ContextMenuEvent, x: number, y: number) {
    super.onContextMenu(e, x, y)
    this.notify('node:contextmenu', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:contextmenu', e, { x, y })
  }

  onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
@ -487,6 +528,7 @@ export class NodeView<
      return
    }
    this.notifyMouseDown(e, x, y)
+    this.notifyPortEvent('node:port:mousedown', e, { x, y })
    this.startNodeDragging(e, x, y)
  }

@ -510,6 +552,7 @@ export class NodeView<
        })
      }
      this.notifyMouseMove(e, x, y)
+      this.notifyPortEvent('node:port:mousemove', e, { x, y })
    }

    this.setEventData<EventData.Mousemove>(e, data)
@ -522,6 +565,7 @@ export class NodeView<
      this.stopMagnetDragging(e, x, y)
    } else {
      this.notifyMouseUp(e, x, y)
+      this.notifyPortEvent('node:port:mouseup', e, { x, y })
      if (action === 'move') {
        const meta = data as EventData.Moving
        const view = meta.targetView || this
@ -540,22 +584,26 @@ export class NodeView<
  onMouseOver(e: Dom.MouseOverEvent) {
    super.onMouseOver(e)
    this.notify('node:mouseover', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseover', e)
  }

  onMouseOut(e: Dom.MouseOutEvent) {
    super.onMouseOut(e)
    this.notify('node:mouseout', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseout', e)
  }

  onMouseEnter(e: Dom.MouseEnterEvent) {
    this.updateClassName(e)
    super.onMouseEnter(e)
    this.notify('node:mouseenter', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseenter', e)
  }

  onMouseLeave(e: Dom.MouseLeaveEvent) {
    super.onMouseLeave(e)
    this.notify('node:mouseleave', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseleave', e)
  }

  onMouseWheel(e: Dom.EventObject, x: number, y: number, delta: number) {
@ -1087,14 +1135,13 @@ export namespace NodeView {
  interface MagnetEventArgs {
    magnet: Element
  }
-
  export interface MouseEventArgs<E> {
    e: E
    node: Node
    cell: Node
    view: NodeView
+    port?: string
  }
-
  export interface PositionEventArgs<E>
    extends MouseEventArgs<E>,
      CellView.PositionEventArgs {}
@ -1119,6 +1166,17 @@ export namespace NodeView {
    'node:mousewheel': PositionEventArgs<Dom.EventObject> &
      CellView.MouseDeltaEventArgs

+    'node:port:click': PositionEventArgs<Dom.ClickEvent>
+    'node:port:dblclick': PositionEventArgs<Dom.DoubleClickEvent>
+    'node:port:contextmenu': PositionEventArgs<Dom.ContextMenuEvent>
+    'node:port:mousedown': PositionEventArgs<Dom.MouseDownEvent>
+    'node:port:mousemove': PositionEventArgs<Dom.MouseMoveEvent>
+    'node:port:mouseup': PositionEventArgs<Dom.MouseUpEvent>
+    'node:port:mouseover': MouseEventArgs<Dom.MouseOverEvent>
+    'node:port:mouseout': MouseEventArgs<Dom.MouseOutEvent>
+    'node:port:mouseenter': MouseEventArgs<Dom.MouseEnterEvent>
+    'node:port:mouseleave': MouseEventArgs<Dom.MouseLeaveEvent>
+
    'node:customevent': PositionEventArgs<Dom.MouseDownEvent> & {
      name: string
    }
--- a/sites/x6-sites/.dumirc.ts
+++ b/sites/x6-sites/.dumirc.ts
@ -1,23 +1,26 @@
-import { defineConfig } from 'dumi';
-import { repository, version } from './package.json';
+import { defineConfig } from 'dumi'
+import { repository, version } from './package.json'

 export default defineConfig({
-  locales: [{ id: 'zh', name: '中文' }, { id: 'en', name: 'English' }],
+  locales: [
+    { id: 'zh', name: '中文' },
+    { id: 'en', name: 'English' },
+  ],
  themeConfig: {
    title: 'X6',
    description: 'JavaScript diagramming library',
    defaultLanguage: 'zh',
    siteUrl: 'https://x6.antv.antgroup.com',
    isAntVSite: false,
-    githubUrl: repository,                                              // GitHub 地址
-    showSearch: true,                                                   // 是否显示搜索框
-    showGithubCorner: true,                                             // 是否显示头部的 GitHub icon
-    showGithubStars: true,                                              // 是否显示 GitHub star 数量
-    showAntVProductsCard: true,                                         // 是否显示 AntV 产品汇总的卡片
-    showLanguageSwitcher: false,                                        // 是否显示官网语言切换
-    showWxQrcode: true,                                                 // 是否显示头部菜单的微信公众号
-    showChartResize: true,                                              // 是否在 demo 页展示图表视图切换
-    showAPIDoc: false,                                                  // 是否在 demo 页展示API文档
+    githubUrl: repository, // GitHub 地址
+    showSearch: true, // 是否显示搜索框
+    showGithubCorner: true, // 是否显示头部的 GitHub icon
+    showGithubStars: true, // 是否显示 GitHub star 数量
+    showAntVProductsCard: true, // 是否显示 AntV 产品汇总的卡片
+    showLanguageSwitcher: false, // 是否显示官网语言切换
+    showWxQrcode: true, // 是否显示头部菜单的微信公众号
+    showChartResize: true, // 是否在 demo 页展示图表视图切换
+    showAPIDoc: false, // 是否在 demo 页展示API文档
    versions: {
      [version]: 'https://x6.antv.antgroup.com',
      '1.x': 'https://x6.antv.vision',
@ -73,7 +76,8 @@ export default defineConfig({
        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',
+      image:
+        'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*A1g0RaZ-GJcAAAAAAAAAAAAADtOHAQ/original',
      buttons: [
        {
          text: {
@ -152,19 +156,44 @@ export default defineConfig({
          zh: '可视化编排可以用简单的方式将复杂的流程呈现出来，让用户更容易理解工作流',
          en: '可视化编排可以用简单的方式将复杂的流程呈现出来，让用户更容易理解工作流',
        },
-        image: 'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*QsT0TpxA8-AAAAAAAAAAAAAADtOHAQ/original',
+        image:
+          'https://mdn.alipayobjects.com/huamei_f4t1bn/afts/img/A*QsT0TpxA8-AAAAAAAAAAAAAADtOHAQ/original',
        isAppLogo: true,
      },
    ],
    companies: [
-      { name: '阿里云', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ' },
-      { name: '支付宝', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ', },
-      { name: '天猫', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ', },
-      { name: '淘宝网', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ', },
-      { name: '网上银行', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ', },
-      { name: '京东', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ', },
-      { name: 'yunos', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ', },
-      { name: '菜鸟', img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ', },
+      {
+        name: '阿里云',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*V_xMRIvw2iwAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '支付宝',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*lYDrRZvcvD4AAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '天猫',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*BQrxRK6oemMAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '淘宝网',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*1l8-TqUr7UcAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '网上银行',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ZAKFQJ5Bz4MAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '京东',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*yh-HRr3hCpgAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: 'yunos',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*_js7SaNosUwAAAAAAAAAAABkARQnAQ',
+      },
+      {
+        name: '菜鸟',
+        img: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*TgV-RZDODJIAAAAAAAAAAABkARQnAQ',
+      },
    ],
    docs: [
      {
@ -264,22 +293,21 @@ export default defineConfig({
    },
    playground: {
      extraLib: '',
-      container: '<div id="container"></div>',
+      container:
+        '<div id="container" style="min-width: 400px; min-height: 600px;"></div>',
      devDependencies: {
        typescript: 'latest',
      },
    },
    announcement: {
      zh: '',
-      en: ''
-    }
+      en: '',
+    },
  },
  mfsu: false,
  alias: {
    '@': __dirname,
  },
-  links: [
-  ],
-  scripts: [
-  ],
-})
+  links: [],
+  scripts: [],
+})
--- a/sites/x6-sites/CHANGELOG.md
+++ b/sites/x6-sites/CHANGELOG.md
@ -1,3 +1,31 @@
+# @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)


--- a/sites/x6-sites/LEGAL.md
+++ b/sites/x6-sites/LEGAL.md
@ -0,0 +1,7 @@
+Legal Disclaimer
+
+Within this source code, the comments in Chinese shall be the original, governing version. Any comment in other languages are for reference only. In the event of any conflict between the Chinese language version comments and other language version comments, the Chinese language version shall prevail.
+
+法律免责声明
+
+关于代码注释部分，中文注释为官方版本，其它语言注释仅做参考。中文注释可能与其它语言注释存在不一致，当中文注释与其它语言注释存在不一致时，请以中文注释为准。
--- a/sites/x6-sites/docs/api/registry/router.zh.md
+++ b/sites/x6-sites/docs/api/registry/router.zh.md
@ -221,11 +221,11 @@ graph.addEdge({

 支持的参数如下表：

-| 参数名    | 参数类型           | 是否必选 | 默认值 | 参数说明                                                                                           |
-| --------- | ------------------ | :------: | ------ | -------------------------------------------------------------------------------------------------- | --- | ---- | --- | --------- | ------------------------------------ |
-| offset    | number \| 'center' |    否    | `32`   | 路由的第一个点和最后一个点与节点之间的距离。当取值为 `'center'` 时，节点距离的中心作为路由点坐标。 |
-| min       | number             |    否    | `16`   | 路由的第一个点和最后一个点与节点之间的最小距离。                                                   |
-| direction | `'T'               |   'B'    | 'L'    | 'R'                                                                                                | 'H' | 'V'` | 否  | undefined | 路由方向，缺省时将自动选择最优方向。 |
+| 参数名    | 参数类型                                 | 是否必选 | 默认值    | 参数说明                                                     |
+| --------- | ---------------------------------------- | -------- | --------- | ------------------------------------------------------------ |
+| offset    | number \|'center'                        | 否       | `32`      | 路由的第一个点和最后一个点与节点之间的距离。当取值为 `'center'` 时，节点距离的中心作为路由点坐标。 |
+| min       | number                                   | 否       | `16`      | 路由的第一个点和最后一个点与节点之间的最小距离。             |
+| direction | `'T'`\|`'B'`\|`'L'`\|`'R'`\|`'H'`\|`'V'` | 否       | undefined | 路由方向，缺省时将自动选择最优方向。                         |

 例如：

--- a/sites/x6-sites/docs/tutorial/basic/events.zh.md
+++ b/sites/x6-sites/docs/tutorial/basic/events.zh.md
@ -19,17 +19,17 @@ redirect_from:

 ### 鼠标事件

-| 事件     | cell 节点/边       | node 节点          | edge 边            | blank 画布空白区域  |
-| -------- | ------------------ | ------------------ | ------------------ | ------------------- |
-| 单击     | `cell:click`       | `node:click`       | `edge:click`       | `blank:click`       |
-| 双击     | `cell:dblclick`    | `node:dblclick`    | `edge:dblclick`    | `blank:dblclick`    |
-| 右键     | `cell:contextmenu` | `node:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
-| 鼠标按下 | `cell:mousedown`   | `node:mousedown`   | `edge:mousedown`   | `blank:mousedown`   |
-| 移动鼠标 | `cell:mousemove`   | `node:mousemove`   | `edge:mousemove`   | `blank:mousemove`   |
-| 鼠标抬起 | `cell:mouseup`     | `node:mouseup`     | `edge:mouseup`     | `blank:mouseup`     |
-| 鼠标滚轮 | `cell:mousewheel`  | `node:mousewheel`  | `edge:mousewheel`  | `blank:mousewheel`  |
-| 鼠标进入 | `cell:mouseenter`  | `node:mouseenter`  | `edge:mouseenter`  | `graph:mouseenter`  |
-| 鼠标离开 | `cell:mouseleave`  | `node:mouseleave`  | `edge:mouseleave`  | `graph:mouseleave`  |
+| 事件   | cell 节点/边          | node 节点            | port 连接桩                | edge 边             | blank 画布空白区域        |
+|-------|---------------------|---------------------|--------------------------|---------------------|----------------------|
+| 单击   | `cell:click`       | `node:click`       | `node:port:click`       | `edge:click`       | `blank:click`       |
+| 双击   | `cell:dblclick`    | `node:dblclick`    | `node:port:dblclick`    | `edge:dblclick`    | `blank:dblclick`    |
+| 右键   | `cell:contextmenu` | `node:contextmenu` | `node:port:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
+| 鼠标按下 | `cell:mousedown`   | `node:mousedown`   | `node:port:mousedown`   | `edge:mousedown`   | `blank:mousedown`   |
+| 移动鼠标 | `cell:mousemove`   | `node:mousemove`   | `node:port:mousemove`   | `edge:mousemove`   | `blank:mousemove`   |
+| 鼠标抬起 | `cell:mouseup`     | `node:mouseup`     | `node:port:mouseup`     | `edge:mouseup`     | `blank:mouseup`     |
+| 鼠标滚轮 | `cell:mousewheel`  | `node:mousewheel`  | -                       | `edge:mousewheel`  | `blank:mousewheel`  |
+| 鼠标进入 | `cell:mouseenter`  | `node:mouseenter`  | `node:port:mouseenter`  | `edge:mouseenter`  | `graph:mouseenter`  |
+| 鼠标离开 | `cell:mouseleave`  | `node:mouseleave`  | `node:port:mouseleave`  | `edge:mouseleave`  | `graph:mouseleave`  |

 :::warning{title=注意：}
 需要注意的是，这里的 `mousemove` 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。
--- a/sites/x6-sites/docs/tutorial/plugins/dnd.zh.md
+++ b/sites/x6-sites/docs/tutorial/plugins/dnd.zh.md
@ -70,11 +70,12 @@ export default () => {

 | 选项                 | 类型                                                                                | 必选 | 默认值 | 说明                                                                                                     |
 | -------------------- | ----------------------------------------------------------------------------------- | :--: | ------ | -------------------------------------------------------------------------------------------------------- |
-| options.target       | Graph                                                                               |  ✓️  |        | 目标画布。                                                                                               |
-| options.getDragNode  | (sourceNode: Node, options: GetDragNodeOptions) => Node                             |      |        | 拖拽开始时，获取被拖拽的节点，默认克隆 `dnd.start` 传入的节点。                                          |
-| options.getDropNode  | (draggingNode: Node, options: GetDropNodeOptions) => Node                           |      |        | 拖拽结束时，获取放置到目标画布的节点，默认克隆被拖拽的节点。                                             |
-| options.validateNode | (droppingNode: Node, options: ValidateNodeOptions) => boolean \| Promins\<boolean\> |      |        | 拖拽结束时，验证节点是否可以放置到目标画布中。                                                           |
-| options.dndContainer | HTMLElement                                                                         |      |        | 如果设置 `dndContainer`，在 `dndContainer` 上放开鼠标不会放置节点，常用于 `dnd` 容器处于画布上面的场景。 |
+| target       | Graph                                                                               |  ✓️  |        | 目标画布。                                                                                               |
+| getDragNode  | (sourceNode: Node, options: GetDragNodeOptions) => Node                             |      |        | 拖拽开始时，获取被拖拽的节点，默认克隆 `dnd.start` 传入的节点。                                          |
+| getDropNode  | (draggingNode: Node, options: GetDropNodeOptions) => Node                           |      |        | 拖拽结束时，获取放置到目标画布的节点，默认克隆被拖拽的节点。                                             |
+| validateNode | (droppingNode: Node, options: ValidateNodeOptions) => boolean \| Promins\<boolean\> |      |        | 拖拽结束时，验证节点是否可以放置到目标画布中。                                                           |
+| dndContainer | HTMLElement                                                                         |      |        | 如果设置 `dndContainer`，在 `dndContainer` 上放开鼠标不会放置节点，常用于 `dnd` 容器处于画布上面的场景。 |
+| draggingContainer | HTMLElement                                                                         |      |    `document.body`   | 自定义拖拽画布容器。 |

 ## 常见问题

--- a/sites/x6-sites/docs/tutorial/plugins/scroller.zh.md
+++ b/sites/x6-sites/docs/tutorial/plugins/scroller.zh.md
@ -55,7 +55,6 @@ graph.use(
 | width            | number              | -       |      | `Scroller` 的宽度，默认为画布容器宽度                                                                                                                                                     |
 | height           | number              | -       |      | `Scroller` 的高度，默认为画布容器高度                                                                                                                                                     |
 | modifiers        | ModifierKey         | -       |      | 设置修饰键后需要点击鼠标并按下修饰键才能触发画布拖拽                                                                                                                                      |
-| cursor           | string              | -       |      | 画布鼠标样式，默认为空。当 `cursor` 为空并开启拖拽时，将自动为画布设置 `grab` 鼠标样式                                                                                                    |
 | pageWidth        | number              | -       |      | 每一页的宽度，默认为画布容器宽度                                                                                                                                                          |
 | pageHeight       | number              | -       |      | 每一页的高度，默认为画布容器高度                                                                                                                                                          |
 | pageVisible      | boolean             | `false` |      | 是否分页                                                                                                                                                                                  |
--- a/sites/x6-sites/docs/tutorial/plugins/selection.zh.md
+++ b/sites/x6-sites/docs/tutorial/plugins/selection.zh.md
@ -62,8 +62,8 @@ graph.use(
 | className                  | string         | -                  |      | 附加样式名，用于定制样式                                                                                                                       |
 | multiple                   | boolean        | `true`             |      | 是否启用点击多选，启用后按住 `ctrl` 或 `command` 键点击节点实现多选                                                                            |
 | multipleSelectionModifiers | ModifierKey    | `['ctrl', 'meta']` |      | 用于设置上面点击多选配套的修饰键                                                                                                               |
-| rubberband                 | boolean        | `false`            |      | 是否启用多选节点功能                                                                                                                           |
-| modifiers                  | ModifierKey    | -                  |      | 设置修饰键后需要点击鼠标并按下修饰键才能触发多选                                                                                               |
+| rubberband                 | boolean        | `false`            |      | 是否启用框选节点功能                                                                                                                           |
+| modifiers                  | ModifierKey    | -                  |      | 用于设置上面框选配套的修饰键                                                                                               |
 | strict                     | boolean        | `false`            |      | 选框是否需要完全包围节点时才选中节点                                                                                                           |
 | movable                    | boolean        | `true`             |      | 拖动选框时框选的节点是否一起移动                                                                                                               |
 | content                    | string         | -                  |      | 设置附加显示的内容                                                                                                                             |
--- a/sites/x6-sites/examples/showcase/practices/demo/flowchart.ts
+++ b/sites/x6-sites/examples/showcase/practices/demo/flowchart.ts
@ -23,12 +23,7 @@ const graph = new Graph({
    maxScale: 3,
  },
  connecting: {
-    router: {
-      name: 'manhattan',
-      args: {
-        padding: 1,
-      },
-    },
+    router: 'manhattan',
    connector: {
      name: 'rounded',
      args: {
@ -77,27 +72,39 @@ const graph = new Graph({

 // #region 使用插件
 graph
-.use(new Transform({
-  resizing: true,
-  rotating: true,
-}))
-.use(new Selection({
-  enabled: true,
-  rubberband: true,
-  showNodeSelectionBox: true,
-}))
-.use(new Snapline({
-  enabled: true,
-}))
-.use(new Keyboard({
-  enabled: true,
-}))
-.use(new Clipboard({
-  enabled: true,
-}))
-.use(new History({
-  enabled: true,
-}))
+  .use(
+    new Transform({
+      resizing: true,
+      rotating: true,
+    }),
+  )
+  .use(
+    new Selection({
+      enabled: true,
+      rubberband: true,
+      showNodeSelectionBox: true,
+    }),
+  )
+  .use(
+    new Snapline({
+      enabled: true,
+    }),
+  )
+  .use(
+    new Keyboard({
+      enabled: true,
+    }),
+  )
+  .use(
+    new Clipboard({
+      enabled: true,
+    }),
+  )
+  .use(
+    new History({
+      enabled: true,
+    }),
+  )
 // #endregion

 // #region 初始化 stencil
@ -154,7 +161,7 @@ graph.bindKey(['meta+v', 'ctrl+v'], () => {
  return false
 })

-//undo redo
+// undo redo
 graph.bindKey(['meta+z', 'ctrl+z'], () => {
  if (graph.canUndo()) {
    graph.undo()
@ -176,7 +183,7 @@ graph.bindKey(['meta+a', 'ctrl+a'], () => {
  }
 })

-//delete
+// delete
 graph.bindKey('backspace', () => {
  const cells = graph.getSelectedCells()
  if (cells.length) {
@ -200,7 +207,7 @@ graph.bindKey(['ctrl+2', 'meta+2'], () => {

 // 控制连接桩显示/隐藏
 const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
-  for (let i = 0, len = ports.length; i < len; i = i + 1) {
+  for (let i = 0, len = ports.length; i < len; i += 1) {
    ports[i].style.visibility = show ? 'visible' : 'hidden'
  }
 }
--- a/sites/x6-sites/package.json
+++ b/sites/x6-sites/package.json
@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "@antv/x6-sites",
-  "version": "1.3.0",
+  "version": "1.4.0",
  "description": "X6 sites deployed on gh-pages",
  "scripts": {
    "dev": "dumi dev",
@ -14,7 +14,7 @@
    "sites"
  ],
  "dependencies": {
-    "@antv/dumi-theme-antv": "^0.3.0-beta.22",
+    "@antv/dumi-theme-antv": "^0.3.5",
    "@antv/hierarchy": "^0.6.6",
    "@antv/layout": "^0.3.12",
    "@antv/x6": "^2.x",
@ -33,7 +33,7 @@
    "@antv/x6-react-shape": "^2.x",
    "antd": "^4.4.2",
    "dagre": "^0.8.5",
-    "dumi": "^2.x",
+    "dumi": "^2.1.6",
    "elkjs": "^0.8.2",
    "highlight.js": "^10.1.2",
    "react": "^18.0.0",
Author	SHA1	Message	Date
vector	3a59703f1c	fix: ensure the container in html view (#3196 )	2023-02-02 17:00:48 +08:00
vector	45218c36f6	fix: set correct scroller options (#3195 )	2023-02-02 16:39:46 +08:00
vector	17b36e21c7	fix: clear old background when background enabled in background (#3192 )	2023-02-01 22:55:29 +08:00
x6-bot[bot]	1682a1d953	chore: update CONTRIBUTORS [skip ci]	2023-02-01 11:27:54 +00:00
vector	bcf3380d2b	fix: get correct clipboard content when useLocalStorage enabed (#3189 )	2023-02-01 19:20:26 +08:00
x6-bot[bot]	24368d4f86	chore(release): release 4 packages [skip ci] [@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)	2023-01-31 09:52:16 +00:00
vector	3265fe5b98	feat: add port events (#3185 )	2023-01-31 17:41:12 +08:00
x6-bot[bot]	5599286473	chore: update CONTRIBUTORS [skip ci]	2023-01-30 19:48:36 +00:00
vector	d64150bfad	fix: fix index error for priorityQueue (#3179 )	2023-01-31 03:41:53 +08:00
vector	cae8625feb	fix: don't hide when click on color picker (#3172 )	2023-01-29 14:47:43 +08:00
x6-bot[bot]	d8f1729f09	chore: update contributors [skip ci]	2023-01-28 07:57:12 +00:00
Struggle Roue	20c170b44a	Fix/edge mousedown (#3169 ) * fix: onMousedown add event notify * fix: onMousedown add super event notify * fix: use notifyMouseDown --------- Co-authored-by: seven <lijianqiang.seven@bytedance.com>	2023-01-28 15:56:54 +08:00
x6-bot[bot]	0e8769642a	chore: update contributors [skip ci]	2023-01-28 06:20:00 +00:00
vector	bd30f7f61d	fix: prevent highlighting new edge (#3170 )	2023-01-28 14:19:38 +08:00
x6-bot[bot]	e3e7cfc66f	chore: update CONTRIBUTORS [skip ci]	2023-01-28 02:17:37 +00:00
Struggle Roue	c86ed1a031	chore: use find to repalce forEach (#3159 ) Co-authored-by: seven <lijianqiang.seven@bytedance.com>	2023-01-28 10:09:53 +08:00
x6-bot[bot]	ae179eb2cd	chore(release): release 1 package [skip ci] [@antv/x6@2.1.6](https://www.npmjs.com/package/@antv/x6/v/2.1.6) [@antv/x6@2.1.6](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.1.6)	2023-01-19 02:28:11 +00:00
vector	2a3e523b1b	refactor: refactor cell remove schedule (#3154 )	2023-01-19 10:17:11 +08:00
x6-bot[bot]	b5af7844af	chore(release): release 1 package [skip ci] [@antv/x6-common@2.0.5](https://www.npmjs.com/package/@antv/x6-common/v/2.0.5) [@antv/x6-common@2.0.5](https://github.com/antvis/X6/releases/tag/%40antv/x6-common%402.0.5)	2023-01-18 15:08:37 +00:00
vector	9c48ad8dfc	fix: optimize css loader (#3156 )	2023-01-18 22:55:16 +08:00
x6-bot[bot]	1a5f1655df	chore(release): release 2 packages [skip ci] [@antv/x6-example-features@2.0.2](https://github.com/antvis/X6/releases/tag/%40antv/x6-example-features%402.0.2) [@antv/x6-react-components@2.0.6](https://www.npmjs.com/package/@antv/x6-react-components/v/2.0.6) [@antv/x6-react-components@2.0.6](https://github.com/antvis/X6/releases/tag/%40antv/x6-react-components%402.0.6)	2023-01-17 01:56:18 +00:00
vector	90dad14d7e	fix: stop propagation when click menu item (#3147 )	2023-01-17 09:42:30 +08:00
x6-bot[bot]	323e01559d	chore: update contributors [skip ci]	2023-01-16 15:20:32 +00:00
Lloyd Zhou	bfc8d7f17a	fix(mindmap demo): can not find target id when create edge (#3144 )	2023-01-16 23:20:08 +08:00
x6-bot[bot]	df24392728	chore: update contributors [skip ci]	2023-01-15 13:21:33 +00:00
Lloyd Zhou	fc940fa53c	refactor: mindmap demo remove resetCells (#3141 )	2023-01-15 21:21:12 +08:00
x6-bot[bot]	604c848c2a	chore(release): release 3 packages [skip ci] [@antv/x6@2.1.5](https://www.npmjs.com/package/@antv/x6/v/2.1.5) [@antv/x6@2.1.5](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.1.5) [@antv/x6-plugin-dnd@2.0.4](https://www.npmjs.com/package/@antv/x6-plugin-dnd/v/2.0.4) [@antv/x6-plugin-dnd@2.0.4](https://github.com/antvis/X6/releases/tag/%40antv/x6-plugin-dnd%402.0.4) [@antv/x6-sites@1.3.2](https://github.com/antvis/X6/releases/tag/%40antv/x6-sites%401.3.2)	2023-01-13 14:20:05 +00:00
vector	7b091f35de	fix: change dragging container options (#3139 )	2023-01-13 22:09:21 +08:00
x6-bot[bot]	95c72c3033	chore: update CONTRIBUTORS [skip ci]	2023-01-13 13:13:12 +00:00
x6-bot[bot]	0c91218b64	chore: update contributors [skip ci]	2023-01-13 13:06:09 +00:00
_XiaoTian	61c030a162	docs: fix document formatting (#3135 ) docs: fix document formatting	2023-01-13 21:05:46 +08:00
x6-bot[bot]	5c5f3e5319	chore: update contributors [skip ci]	2023-01-11 02:13:33 +00:00
x6-bot[bot]	06a8f28c2d	chore: update contributors [skip ci]	2023-01-10 02:17:09 +00:00
x6-bot[bot]	ece198265b	chore: update contributors [skip ci]	2023-01-05 14:48:42 +00:00
vector	6abd0683ea	fix: update group even group is empty (#3117 )	2023-01-05 22:48:20 +08:00
vector	fff95806c8	docs: add LEGAL for sites (#3112 )	2023-01-04 20:41:06 +08:00
崖	a069449782	chore: update badge style	2023-01-04 12:18:58 +08:00
x6-bot[bot]	3b25683529	chore(release): release 2 packages [skip ci] [@antv/x6@2.1.4](https://www.npmjs.com/package/@antv/x6/v/2.1.4) [@antv/x6@2.1.4](https://github.com/antvis/X6/releases/tag/%40antv/x6%402.1.4) [@antv/x6-sites@1.3.1](https://github.com/antvis/X6/releases/tag/%40antv/x6-sites%401.3.1)	2023-01-03 14:07:28 +00:00