docs: fix a broken link in model.zh.md (#3275)

feat: refactor the virtual rendering logic

.github/workflows/release.yml

@@ -15,7 +15,8 @@ jobs:
     steps:
       - name: ⤵️　Checkout
         uses: actions/checkout@v3
-
+        with:
+          persist-credentials: false
       - name: 🎉　Setup nodejs
         uses: actions/setup-node@v3
         with:

.github/workflows/welcome.yml

@@ -20,9 +20,7 @@ jobs:
             👋 @{{ author }}
 
             Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
-
             To help make it easier for us to investigate your issue, please follow the [contributing guidelines](https://github.com/antvis/X6/blob/master/CONTRIBUTING.md).
-
             We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
 
           FIRST_PR: |

CONTRIBUTORS

@@ -8,6 +8,7 @@ Draco <Draco.coder@gmail.com>
 Eve-Sama <17764594863@163.com>
 Eve-Sama <948832626@qq.com>
 Gossypol <31892817+gossypol@users.noreply.github.com>
+HQidea <HQidea@users.noreply.github.com>
 ImgBotApp <ImgBotHelp@gmail.com>
 Indomi <indomi126@gmail.com>
 James Tsang <wtzeng1@gmail.com>
@@ -28,14 +29,17 @@ Opportunity <opportunity@live.in>
 Questions <chip@twostewards.com>
 RuiLin Dong <48054715+halodong@users.noreply.github.com>
 SSC <273702440@qq.com>
+Samuel Bodin <1637651+bodinsamuel@users.noreply.github.com>
 Simon He <57086651+Simon-He95@users.noreply.github.com>
 Sindori <441933726@qq.com>
+Struggle <1178825961@qq.com>
 Struggle Roue <47975400+struggleRoue@users.noreply.github.com>
 Susan <527971893@qq.com>
 Thomas Zeugner <tomsoftware@gmx.de>
 Tony Wu <93302820+tonywu6@users.noreply.github.com>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
+Xia Wenqi <xiawenqi90@gmail.com>
 Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
 Zhenyu Hou <skyking_H@hotmail.com>
 _XiaoTian <istianlei@qq.com>
@@ -54,6 +58,8 @@ kelin.zrh <34393362+AricZhu@users.noreply.github.com>
 kingshuaishuai <ken.wang@mrs.ai>
 kio <1421104933@qq.com>
 lijing666 <lijing241@yeah.net>
+linkun <33945539+linkun-wang@users.noreply.github.com>
+linkun <linkun0922@163.com>
 lopn <lopnxrp@126.com>
 luchunwei <luchunwei@gmail.com>
 luzhuang <364439895@qq.com>
@@ -69,6 +75,7 @@ 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>
@@ -87,6 +94,7 @@ zdc1111 <39116292+zdc1111@users.noreply.github.com>
 小耀 <jinyue.gjy@antfin.com>
 崖 <bubkoo.wy@gmail.com>
 崖崖崖 <bubkoo.wy@gmail.com>
+张子睿 <411489774@qq.com>
 文瑀 <wenyu.jqq@antfin.com>
 映月 <38279397+orientMoon@users.noreply.github.com>
 杨凌 <89915256@qq.com>

examples/x6-example-features/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @antv/x6-example-features [2.1.1](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.1.0...@antv/x6-example-features@2.1.1) (2023-02-18)
+
+
+### Bug Fixes
+
+* mindmap demo duplicate node id, close [#3256](https://github.com/antvis/X6/issues/3256) ([#3257](https://github.com/antvis/X6/issues/3257)) ([c510756](https://github.com/antvis/X6/commit/c510756fe4e96c8e7471c2fb558e6019ec69b057))
+
+# @antv/x6-example-features [2.1.0](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.3...@antv/x6-example-features@2.1.0) (2023-02-17)
+
+
+### Features
+
+* history add max stack size ([#3253](https://github.com/antvis/X6/issues/3253)) ([fba5310](https://github.com/antvis/X6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
+
 ## @antv/x6-example-features [2.0.2](https://github.com/antvis/X6/compare/@antv/x6-example-features@2.0.1...@antv/x6-example-features@2.0.2) (2023-01-17)
 
 

examples/x6-example-features/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-example-features",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "scripts": {
     "start": "umi dev",
     "build": "umi build",

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

@@ -309,9 +309,14 @@ export default class Example extends React.Component {
       if (dataItem) {
         let item: MindMapData | null = null
         const length = dataItem.children ? dataItem.children.length : 0
+        let nid = `${id}-${length + 1}`
+        if (graph.hasCell(nid)) {
+          // 如果通过length + 1拼接出来的节点id在画布中存在了，就在id后面加上随机数
+          nid = nid + Math.random()
+        }
         if (type === 'topic') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: nid,
             type: 'topic-branch',
             label: `分支主题${length + 1}`,
             width: 100,
@@ -319,7 +324,7 @@ export default class Example extends React.Component {
           }
         } else if (type === 'topic-branch') {
           item = {
-            id: `${id}-${length + 1}`,
+            id: nid,
             type: 'topic-child',
             label: `子主题${length + 1}`,
             width: 60,

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

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Graph } from '@antv/x6'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Selection } from '@antv/x6-plugin-selection'
+import { History } from '@antv/x6-plugin-history'
+import '../index.less'
+
+export default class Example extends React.Component<
+  {},
+  { graph: Graph | undefined }
+> {
+  private container: HTMLDivElement
+
+  componentDidMount() {
+    const graph = new Graph({
+      container: this.container,
+      width: 800,
+      height: 600,
+      grid: true,
+    })
+
+    this.setState({ graph })
+
+    const selection = new Selection({ enabled: true })
+    const keyboard = new Keyboard({ enabled: true })
+    const history = new History({ enabled: true, stackSize: 5 })
+
+    graph.use(selection)
+    graph.use(keyboard)
+    graph.use(history)
+
+    graph.addNode({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'A' } },
+    })
+
+    graph.addNode({
+      x: 250,
+      y: 50,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'B' } },
+    })
+
+    graph.addNode({
+      x: 350,
+      y: 150,
+      width: 100,
+      height: 40,
+      attrs: { label: { text: 'C' } },
+    })
+
+    keyboard.bindKey('backspace', () => {
+      graph.removeCells(selection.getSelectedCells())
+    })
+    keyboard.bindKey('command+z', () => {
+      this.undo()
+    })
+    keyboard.bindKey('command+shift+z', () => {
+      this.redo()
+    })
+  }
+
+  refContainer = (container: HTMLDivElement) => {
+    this.container = container
+  }
+
+  enablePlugins = () => {
+    const { graph } = this.state
+    graph?.enablePlugins('keyboard')
+  }
+
+  disablePlugins = () => {
+    const { graph } = this.state
+    graph?.disablePlugins('keyboard')
+  }
+
+  undo = () => {
+    const { graph } = this.state
+    const history = graph?.getPlugin('history') as History
+    history?.undo()
+  }
+
+  redo = () => {
+    const { graph } = this.state
+    const history = graph?.getPlugin('history') as History
+    history?.redo()
+  }
+
+  render() {
+    return (
+      <div className="x6-graph-wrap">
+        <div ref={this.refContainer} className="x6-graph" />
+        <button onClick={this.enablePlugins}>enable</button>
+        <button onClick={this.disablePlugins}>disable</button>
+        <button onClick={this.undo}>undo</button>
+        <button onClick={this.redo}>redo</button>
+      </div>
+    )
+  }
+}

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

@@ -179,6 +179,10 @@ const dataSource = [
     example: 'animation/transition',
     description: '动画',
   },
+  {
+    example: 'history',
+    description: '时光回溯',
+  },
 ].map((item, index) => ({ key: index, ...item }))
 
 const columns = [

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

@@ -4,7 +4,10 @@ import { Keyboard } from '@antv/x6-plugin-keyboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import '../index.less'
 
-export default class Example extends React.Component {
+export default class Example extends React.Component<
+  {},
+  { graph: Graph | undefined }
+> {
   private container: HTMLDivElement
 
   componentDidMount() {
@@ -15,6 +18,8 @@ export default class Example extends React.Component {
       grid: true,
     })
 
+    this.setState({ graph })
+
     const selection = new Selection({ enabled: true })
     const keyboard = new Keyboard({ enabled: true })
     graph.use(selection)
@@ -53,10 +58,22 @@ export default class Example extends React.Component {
     this.container = container
   }
 
+  enablePlugins = () => {
+    const { graph } = this.state
+    graph.enablePlugins('keyboard')
+  }
+
+  disablePlugins = () => {
+    const { graph } = this.state
+    graph.disablePlugins('keyboard')
+  }
+
   render() {
     return (
       <div className="x6-graph-wrap">
         <div ref={this.refContainer} className="x6-graph" />
+        <button onClick={this.enablePlugins}>enable</button>
+        <button onClick={this.disablePlugins}>disable</button>
       </div>
     )
   }

packages/x6-common/CHANGELOG.md

@@ -1,3 +1,17 @@
+## @antv/x6-common [2.0.8](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.7...@antv/x6-common@2.0.8) (2023-02-18)
+
+
+### Bug Fixes
+
+* fix typo for dom event handlers ([#3255](https://github.com/antvis/x6/issues/3255)) ([9b4fa86](https://github.com/antvis/x6/commit/9b4fa86daa587fe8818f3615bc1e40738a0f2319))
+
+## @antv/x6-common [2.0.6](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.5...@antv/x6-common@2.0.6) (2023-01-31)
+
+
+### Bug Fixes
+
+* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
+
 ## @antv/x6-common [2.0.5](https://github.com/antvis/x6/compare/@antv/x6-common@2.0.4...@antv/x6-common@2.0.5) (2023-01-18)
 
 

packages/x6-common/package.json

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

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

@@ -729,7 +729,7 @@ type TypeEventHandlersBase<TDelegateTarget, TData, TCurrentTarget, TTarget> = {
     TCurrentTarget,
     TTarget
   >]?:
-    | TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, TType>
+    | TypeEventHandler<TDelegateTarget, TData, TCurrentTarget, TTarget, string>
     | false
     | Record<string, unknown>
 }

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

@@ -198,7 +198,14 @@ export function text(
   const autoLineHeight = defaultLineHeight === 'auto'
   const lineHeight = autoLineHeight ? '1.5em' : defaultLineHeight || '1em'
 
-  empty(elem)
+  let needEmptyElem = true
+  const childs = elem.children
+  if (childs.length === 1 && childs[0].tagName.toUpperCase() === 'TITLE') {
+    needEmptyElem = false
+  }
+  if (needEmptyElem) {
+    empty(elem)
+  }
 
   attr(elem, {
     // Preserve spaces, do not consecutive spaces to get collapsed to one.

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

@@ -1,4 +1,4 @@
-export { debounce } from 'lodash-es'
+export { debounce, throttle } from 'lodash-es'
 
 type Fn = (...args: any[]) => any
 

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

@@ -32,14 +32,12 @@ export class Clipboard
     if (this.disabled) {
       this.options.enabled = true
     }
-    return this
   }
 
   disable() {
     if (!this.disabled) {
       this.options.enabled = false
     }
-    return this
   }
 
   toggleEnabled(enabled?: boolean) {
@@ -60,8 +58,8 @@ export class Clipboard
     return this
   }
 
-  isEmpty() {
-    return this.clipboardImpl.isEmpty()
+  isEmpty(options: Clipboard.Options = {}) {
+    return this.clipboardImpl.isEmpty(options)
   }
 
   getCellsInClipboard() {

packages/x6-plugin-history/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @antv/x6-plugin-history [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.3...@antv/x6-plugin-history@2.2.0) (2023-02-17)
+
+
+### Features
+
+* history add max stack size ([#3253](https://github.com/antvis/x6/issues/3253)) ([fba5310](https://github.com/antvis/x6/commit/fba531064ad8027c451a81b60d5efd7f7314a0fa))
+
 ## @antv/x6-plugin-history [2.1.3](https://github.com/antvis/x6/compare/@antv/x6-plugin-history@2.1.2...@antv/x6-plugin-history@2.1.3) (2022-11-25)
 
 

packages/x6-plugin-history/package.json

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

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

@@ -25,6 +25,7 @@ export class History
   protected batchLevel = 0
   protected lastBatchIndex = -1
   protected freezed = false
+  protected stackSize = 0 // 0: not limit
 
   protected readonly handlers: (<T extends History.ModelEvents>(
     event: T,
@@ -33,6 +34,8 @@ export class History
 
   constructor(options: History.Options) {
     super()
+    const { stackSize = 0 } = options
+    this.stackSize = stackSize
     this.options = Util.getOptions(options)
     this.validator = new History.Validator({
       history: this,
@@ -101,7 +104,7 @@ export class History
       const cmd = this.redoStack.pop()
       if (cmd) {
         this.applyCommand(cmd, options)
-        this.undoStack.push(cmd)
+        this.undoStackPush(cmd)
         this.notify('redo', cmd, options)
       }
     }
@@ -424,7 +427,7 @@ export class History
       const cmds = this.filterBatchCommand(this.batchCommands)
       if (cmds.length > 0) {
         this.redoStack = []
-        this.undoStack.push(cmds)
+        this.undoStackPush(cmds)
         this.consolidateCommands()
         this.notify('add', cmds, options)
       }
@@ -498,7 +501,7 @@ export class History
       this.lastBatchIndex = Math.max(this.lastBatchIndex, 0)
       this.emit('batch', { cmd, options })
     } else {
-      this.undoStack.push(cmd)
+      this.undoStackPush(cmd)
       this.consolidateCommands()
       this.notify('add', cmd, options)
     }
@@ -560,6 +563,17 @@ export class History
     this.undoStack.pop()
   }
 
+  protected undoStackPush(cmd: History.Commands) {
+    if (this.stackSize === 0) {
+      this.undoStack.push(cmd)
+      return
+    }
+    if (this.undoStack.length >= this.stackSize) {
+      this.undoStack.shift()
+    }
+    this.undoStack.push(cmd)
+  }
+
   @Basecoat.dispose()
   dispose() {
     this.validator.dispose()
@@ -614,7 +628,9 @@ export namespace History {
     cancelInvalid?: boolean
   }
 
-  export interface Options extends Partial<CommonOptions> {}
+  export interface Options extends Partial<CommonOptions> {
+    stackSize?: number
+  }
 
   interface Data {
     id?: string

packages/x6-plugin-keyboard/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @antv/x6-plugin-keyboard [2.2.0](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.4...@antv/x6-plugin-keyboard@2.2.0) (2023-02-06)
+
+
+### Features
+
+* keyboard support clear and custom trigger ([#3202](https://github.com/antvis/x6/issues/3202)) ([668c932](https://github.com/antvis/x6/commit/668c93242fbcebb987cccc3dcfd56982f7c66252))
+
 ## @antv/x6-plugin-keyboard [2.1.4](https://github.com/antvis/x6/compare/@antv/x6-plugin-keyboard@2.1.3...@antv/x6-plugin-keyboard@2.1.4) (2022-11-29)
 
 

packages/x6-plugin-keyboard/package.json

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

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

@@ -14,6 +14,8 @@ declare module '@antv/x6/lib/graph/graph' {
       action?: KeyboardImpl.Action,
     ) => Graph
     unbindKey: (keys: string | string[], action?: KeyboardImpl.Action) => Graph
+    clearKeys: () => Graph
+    triggerKey: (key: string, action: KeyboardImpl.Action) => Graph
   }
 }
 
@@ -71,3 +73,19 @@ Graph.prototype.unbindKey = function (
   }
   return this
 }
+
+Graph.prototype.clearKeys = function() {
+  const keyboard = this.getPlugin('keyboard') as Keyboard
+  if(keyboard) {
+    keyboard.clear()
+  }
+  return this
+}
+
+Graph.prototype.triggerKey = function(key: string, action: KeyboardImpl.Action) {
+  const keyboard = this.getPlugin('keyboard') as Keyboard
+  if(keyboard) {
+    keyboard.trigger(key, action)
+  }
+  return this
+}

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

@@ -27,12 +27,10 @@ export class Keyboard extends Disposable {
 
   enable() {
     this.keyboardImpl.enable()
-    return this
   }
 
   disable() {
     this.keyboardImpl.disable()
-    return this
   }
 
   toggleEnabled(enabled?: boolean) {
@@ -61,6 +59,17 @@ export class Keyboard extends Disposable {
     return this
   }
 
+  trigger(key: string, action?: KeyboardImpl.Action) {
+    this.keyboardImpl.trigger(key, action)
+    return this
+  }
+
+  clear() {
+    this.keyboardImpl.clear()
+    return this
+  }
+
+
   unbindKey(keys: string | string[], action?: KeyboardImpl.Action) {
     this.keyboardImpl.off(keys, action)
     return this

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

@@ -21,7 +21,6 @@ export class KeyboardImpl extends Disposable implements IDisablable {
     private readonly options: KeyboardImpl.Options & { graph: Graph },
   ) {
     super()
-
     const scroller = this.graph.getPlugin('scroller') as any
     this.container = scroller ? scroller.container : this.graph.container
 
@@ -76,6 +75,14 @@ export class KeyboardImpl extends Disposable implements IDisablable {
     this.mousetrap.unbind(this.getKeys(keys), action)
   }
 
+  clear() {
+    this.mousetrap.reset()
+  }
+
+  trigger(key: string, action?: KeyboardImpl.Action) {
+    this.mousetrap.trigger(key, action)
+  }
+
   private focus(e: EventArgs['node:mouseup']) {
     const isInputEvent = this.isInputEvent(e.e)
     if (isInputEvent) {
@@ -95,7 +102,7 @@ export class KeyboardImpl extends Disposable implements IDisablable {
 
   protected formatkey(key: string) {
     const formated = key
-      .toLowerCase()
+      .toLocaleLowerCase()
       .replace(/\s/g, '')
       .replace('delete', 'del')
       .replace('cmd', 'command')

packages/x6-plugin-scroller/package.json

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

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

@@ -35,17 +35,16 @@ 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,
-    })
+    const options = ScrollerImpl.getOptions({ ...this.options, graph })
+    this.options = options
+    this.scrollerImpl = new ScrollerImpl(options)
     this.setup()
     this.startListening()
     this.updateClassName()
@@ -401,8 +400,10 @@ export namespace Scroller {
   export interface EventArgs extends ScrollerImpl.EventArgs {}
 
   type EventType = 'leftMouseDown' | 'rightMouseDown'
-  export interface Options extends ScrollerImpl.CommonOptions {
+  interface ScrollerOptions extends ScrollerImpl.Options {
     pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
     modifiers?: string | ModifierKey[] | null // alt, ctrl, shift, meta
   }
+
+  export type Options = Omit<ScrollerOptions, 'graph'>
 }

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/src/index.ts

@@ -62,14 +62,12 @@ export class Selection extends Basecoat<SelectionImpl.EventArgs> {
     if (this.disabled) {
       this.options.enabled = true
     }
-    return this
   }
 
   disable() {
     if (!this.disabled) {
       this.options.enabled = false
     }
-    return this
   }
 
   toggleEnabled(enabled?: boolean) {

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

@@ -29,12 +29,10 @@ export class Snapline extends Disposable {
 
   enable() {
     this.snaplineImpl.enable()
-    return this
   }
 
   disable() {
     this.snaplineImpl.disable()
-    return this
   }
 
   toggleEnabled(enabled?: boolean) {

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

@@ -7,6 +7,7 @@ export class Transform extends Basecoat<Transform.EventArgs> {
   private graph: Graph
   protected widgets: Map<Node, TransformImpl> = new Map()
   public name = 'transform'
+  private disabled = false
 
   constructor(public readonly options: Transform.Options) {
     super()
@@ -15,6 +16,9 @@ export class Transform extends Basecoat<Transform.EventArgs> {
 
   init(graph: Graph) {
     this.graph = graph
+    if (this.disabled) {
+      return
+    }
     this.startListening()
   }
 
@@ -28,6 +32,24 @@ export class Transform extends Basecoat<Transform.EventArgs> {
     this.graph.off('blank:mousedown', this.onBlankMouseDown, this)
   }
 
+  enable() {
+    if (this.disabled) {
+      this.disabled = false
+      this.startListening()
+    }
+  }
+
+  disable() {
+    if (!this.disabled) {
+      this.disabled = true
+      this.stopListening()
+    }
+  }
+
+  isEnabled() {
+    return !this.disabled
+  }
+
   protected onNodeClick({ node }: EventArgs['node:click']) {
     this.clearWidgets()
     const widget = this.createTransform(node)

packages/x6-react-components/CHANGELOG.md

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

packages/x6-react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-react-components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "React components for building x6 editors",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6/CHANGELOG.md

@@ -1,3 +1,29 @@
+# @antv/x6 [2.3.0](https://github.com/antvis/x6/compare/@antv/x6@2.2.1...@antv/x6@2.3.0) (2023-02-06)
+
+
+### Bug Fixes
+
+* **scheduler:** remove spammy console.log ([#3200](https://github.com/antvis/x6/issues/3200)) ([1f83a2b](https://github.com/antvis/x6/commit/1f83a2b8a84b53303293e724e7f9d0ee49182efc))
+
+
+### Features
+
+* add options for positionCell api ([#3208](https://github.com/antvis/x6/issues/3208)) ([58c0fe4](https://github.com/antvis/x6/commit/58c0fe459c0314997440b4af7dc0443abe199924))
+
+## @antv/x6 [2.2.1](https://github.com/antvis/x6/compare/@antv/x6@2.2.0...@antv/x6@2.2.1) (2023-02-02)
+
+
+### Bug Fixes
+
+* ensure the container in html view ([#3196](https://github.com/antvis/x6/issues/3196)) ([3a59703](https://github.com/antvis/x6/commit/3a59703f1c2da3ac8c8471eb9b864ac4cf468f97))
+
+# @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)

packages/x6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6",
-  "version": "2.1.6",
+  "version": "2.3.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

@@ -702,8 +702,8 @@ export class Graph extends Basecoat<EventArgs> {
   /**
    * Position the center of graph to the center of the viewport.
    */
-  center() {
-    return this.centerPoint()
+  center(options?: Transform.CenterOptions) {
+    return this.centerPoint(options)
   }
 
   /**
@@ -712,13 +712,25 @@ export class Graph extends Basecoat<EventArgs> {
    * only center along the specified dimension and keep the other coordinate
    * unchanged.
    */
-  centerPoint(x: number, y: null | number): this
-  centerPoint(x: null | number, y: number): this
-  centerPoint(): this
-  centerPoint(x?: number | null, y?: number | null) {
+  centerPoint(
+    x: number,
+    y: null | number,
+    options?: Transform.CenterOptions,
+  ): this
+  centerPoint(
+    x: null | number,
+    y: number,
+    options?: Transform.CenterOptions,
+  ): this
+  centerPoint(optons?: Transform.CenterOptions): this
+  centerPoint(
+    x?: number | null | Transform.CenterOptions,
+    y?: number | null,
+    options?: Transform.CenterOptions,
+  ) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.centerPoint(x as number, y as number)
+      scroller.centerPoint(x as number, y as number, options)
     } else {
       this.transform.centerPoint(x as number, y as number)
     }
@@ -737,10 +749,10 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  centerCell(cell: Cell) {
+  centerCell(cell: Cell, options?: Transform.PositionContentOptions) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.centerCell(cell)
+      scroller.centerCell(cell, options)
     } else {
       this.transform.centerCell(cell)
     }
@@ -752,10 +764,11 @@ export class Graph extends Basecoat<EventArgs> {
     point: Point.PointLike,
     x: number | string,
     y: number | string,
+    options: Transform.CenterOptions = {},
   ) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.positionPoint(point, x, y)
+      scroller.positionPoint(point, x, y, options)
     } else {
       this.transform.positionPoint(point, x, y)
     }
@@ -763,10 +776,14 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  positionRect(rect: Rectangle.RectangleLike, direction: Transform.Direction) {
+  positionRect(
+    rect: Rectangle.RectangleLike,
+    direction: Transform.Direction,
+    options?: Transform.CenterOptions,
+  ) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.positionRect(rect, direction)
+      scroller.positionRect(rect, direction, options)
     } else {
       this.transform.positionRect(rect, direction)
     }
@@ -774,10 +791,14 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  positionCell(cell: Cell, direction: Transform.Direction) {
+  positionCell(
+    cell: Cell,
+    direction: Transform.Direction,
+    options?: Transform.CenterOptions,
+  ) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.positionCell(cell, direction)
+      scroller.positionCell(cell, direction, options)
     } else {
       this.transform.positionCell(cell, direction)
     }
@@ -1198,6 +1219,53 @@ export class Graph extends Basecoat<EventArgs> {
     ) as T
   }
 
+  getPlugins<T extends Graph.Plugin[]>(pluginName: string[]): T | undefined {
+    return Array.from(this.installedPlugins).filter((plugin) =>
+      pluginName.includes(plugin.name),
+    ) as T
+  }
+
+  disablePlugins(plugins: string[] | string) {
+    let postPlugins = plugins
+    if (!Array.isArray(postPlugins)) {
+      postPlugins = [postPlugins]
+    }
+    const aboutToChangePlugins = this.getPlugins(postPlugins)
+    aboutToChangePlugins?.forEach((plugin) => {
+      plugin?.disable?.()
+    })
+    return this
+  }
+
+  enablePlugins(plugins: string[] | string) {
+    let postPlugins = plugins
+    if (!Array.isArray(postPlugins)) {
+      postPlugins = [postPlugins]
+    }
+    const aboutToChangePlugins = this.getPlugins(postPlugins)
+    aboutToChangePlugins?.forEach((plugin) => {
+      plugin?.enable?.()
+    })
+    return this
+  }
+
+  disposePlugins(plugins: string[] | string) {
+    let postPlugins = plugins
+    if (!Array.isArray(postPlugins)) {
+      postPlugins = [postPlugins]
+    }
+    const aboutToChangePlugins = this.getPlugins(postPlugins)
+    aboutToChangePlugins?.forEach((plugin) => {
+      plugin.dispose()
+    })
+    return this
+  }
+
+  isPluginEnabled(pluginName: string) {
+    const pluginIns = this.getPlugin(pluginName)
+    return pluginIns?.isEnabled?.()
+  }
+
   // #endregion
 
   // #region dispose
@@ -1343,5 +1411,8 @@ export namespace Graph {
     name: string
     init: (graph: Graph, ...options: any[]) => any
     dispose: () => void
+    disable?: () => void
+    enable?: () => void
+    isEnabled?: () => boolean
   }
 }

packages/x6/src/graph/virtual-render.ts

@@ -3,7 +3,9 @@ import { Base } from './base'
 
 export class VirtualRenderManager extends Base {
   protected init() {
-    this.resetRenderArea = FunctionExt.debounce(this.resetRenderArea, 200)
+    this.resetRenderArea = FunctionExt.throttle(this.resetRenderArea, 200, {
+      leading: true,
+    })
     this.resetRenderArea()
     this.startListening()
   }

packages/x6/src/model/model.ts

@@ -244,6 +244,13 @@ export class Model extends Basecoat<Model.EventArgs> {
     return node
   }
 
+  updateNode(metadata: Node.Metadata, options: Model.SetOptions = {}) {
+    const node = this.createNode(metadata)
+    const prop = node.getProp()
+    node.dispose()
+    return this.updateCell(prop, options)
+  }
+
   createNode(metadata: Node.Metadata) {
     return Node.create(metadata)
   }
@@ -258,6 +265,13 @@ export class Model extends Basecoat<Model.EventArgs> {
     return Edge.create(metadata)
   }
 
+  updateEdge(metadata: Edge.Metadata, options: Model.SetOptions = {}) {
+    const edge = this.createEdge(metadata)
+    const prop = edge.getProp()
+    edge.dispose()
+    return this.updateCell(prop, options)
+  }
+
   addCell(cell: Cell | Cell[], options: Model.AddOptions = {}) {
     if (Array.isArray(cell)) {
       return this.addCells(cell, options)
@@ -295,6 +309,23 @@ export class Model extends Basecoat<Model.EventArgs> {
     return this
   }
 
+  updateCell(prop: Cell.Properties, options: Model.SetOptions = {}): boolean {
+    const existing = prop.id && this.getCell(prop.id)
+    if (existing) {
+      return this.batchUpdate(
+        'update',
+        () => {
+          Object.keys(prop).forEach((key) =>
+            existing.setProp(key, prop[key], options),
+          )
+          return true
+        },
+        prop,
+      )
+    }
+    return false
+  }
+
   removeCell(cellId: string, options?: Collection.RemoveOptions): Cell | null
   removeCell(cell: Cell, options?: Collection.RemoveOptions): Cell | null
   removeCell(

packages/x6/src/renderer/queueJob.ts

@@ -7,7 +7,7 @@ export class JobQueue {
   private initialTime = Date.now()
 
   queueJob(job: Job) {
-    if (job.priority === JOB_PRIORITY.PRIOR) {
+    if (job.priority & JOB_PRIORITY.PRIOR) {
       job.cb()
     } else {
       const index = this.findInsertionIndex(job)
@@ -81,11 +81,20 @@ export class JobQueue {
   }
 
   private findInsertionIndex(job: Job) {
-    let start = 0
-    while (this.queue[start] && this.queue[start].priority >= job.priority) {
-      start += 1
+    let left = 0
+    let ins = this.queue.length
+    let right = ins - 1
+    const priority = job.priority
+    while (left <= right) {
+      const mid = ((right - left) >> 1) + left
+      if (priority <= this.queue[mid].priority) {
+        left = mid + 1
+      } else {
+        ins = mid
+        right = mid - 1
+      }
     }
-    return start
+    return ins
   }
 
   private scheduleJob() {
@@ -135,10 +144,10 @@ export interface Job {
 }
 
 export enum JOB_PRIORITY {
-  RenderEdge = 1,
-  RenderNode = 2,
-  Update = 3,
-  PRIOR = 100,
+  RenderEdge = /**/ 1 << 1,
+  RenderNode = /**/ 1 << 2,
+  Update = /*    */ 1 << 3,
+  PRIOR = /*     */ 1 << 20,
 }
 
 // function findInsertionIndex(job: Job) {

packages/x6/src/renderer/scheduler.ts

@@ -215,7 +215,6 @@ export class Scheduler extends Disposable {
     }
 
     if (result) {
-      console.log('left flag', result) // eslint-disable-line
       if (
         cell.isEdge() &&
         (result & view.getFlag(['source', 'target'])) === 0
@@ -451,10 +450,12 @@ export class Scheduler extends Disposable {
     for (let i = 0, n = edges.length; i < n; i += 1) {
       const edge = edges[i]
       const viewItem = this.views[edge.id]
-      if (!viewItem) {
+      const edgeView = viewItem.view
+
+      if (!viewItem || !this.isViewMounted(edgeView)) {
         continue
       }
-      const edgeView = viewItem.view
+
       const flagLabels: FlagManager.Action[] = ['update']
       if (edge.getTargetCell() === cell) {
         flagLabels.push('target')
@@ -473,10 +474,33 @@ export class Scheduler extends Disposable {
   }
 
   protected isInRenderArea(view: CellView) {
-    return (
-      !this.renderArea ||
-      this.renderArea.isIntersectWithRect(view.cell.getBBox())
-    )
+    if (!this.renderArea) {
+      return true
+    }
+    if (view.isNodeView()) {
+      const node = view.cell
+      return this.renderArea.isIntersectWithRect(node.getBBox())
+    }
+    if (view.isEdgeView()) {
+      const edge = view.cell
+      const sourceCell = edge.getSourceCell()
+      const targetCell = edge.getTargetCell()
+      if (sourceCell) {
+        const sourceViewItem = this.views[sourceCell.id]
+        if (sourceViewItem && !this.isViewMounted(sourceViewItem.view)) {
+          return false
+        }
+      }
+
+      if (targetCell) {
+        const targetViewItem = this.views[targetCell.id]
+        if (targetViewItem && !this.isViewMounted(targetViewItem.view)) {
+          return false
+        }
+      }
+    }
+
+    return true
   }
 
   protected getRenderPriority(view: CellView) {

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]

sites/x6-sites/CHANGELOG.md

@@ -1,3 +1,25 @@
+## @antv/x6-sites [1.5.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.5.1...@antv/x6-sites@1.5.2) (2023-02-18)
+
+# @antv/x6-sites [1.5.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.4.1...@antv/x6-sites@1.5.0) (2023-02-06)
+
+
+### Features
+
+* keyboard support clear and custom trigger ([#3202](https://github.com/antvis/x6/issues/3202)) ([668c932](https://github.com/antvis/x6/commit/668c93242fbcebb987cccc3dcfd56982f7c66252))
+
+# @antv/x6-sites [1.4.0](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.2...@antv/x6-sites@1.4.0) (2023-01-31)
+
+
+### Bug Fixes
+
+* fix index error for priorityQueue ([#3179](https://github.com/antvis/x6/issues/3179)) ([d64150b](https://github.com/antvis/x6/commit/d64150bfadf10fe21f44734a0267261260b8c53b))
+* prevent highlighting new edge ([#3170](https://github.com/antvis/x6/issues/3170)) ([bd30f7f](https://github.com/antvis/x6/commit/bd30f7f61de530a9b6671aaedd4be2e026de8d44))
+
+
+### Features
+
+* add port events ([#3185](https://github.com/antvis/x6/issues/3185)) ([3265fe5](https://github.com/antvis/x6/commit/3265fe5b983f22e34d60c647212824961ecfdab5))
+
 ## @antv/x6-sites [1.3.2](https://github.com/antvis/x6/compare/@antv/x6-sites@1.3.1...@antv/x6-sites@1.3.2) (2023-01-13)
 
 

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

@@ -24,7 +24,7 @@ new Graph(options: Options)
 | [mousewheel](/zh/docs/api/graph/mousewheel)                                    | boolean \| `MouseWheel.Options` |      | 鼠标滚轮缩放，默认禁用。                                                                          | `false` |
 | [grid](/zh/docs/api/graph/grid)                                                | boolean \| number \| `GridManager.Options` |      | 网格，默认使用 `10px` 的网格，但不绘制网格背景。                                                  | `false` |
 | [background](/zh/docs/api/graph/background)                                    | false \| `BackgroundManager.Options` |      | 背景，默认不绘制背景。                                                                            | `false` |
-| [translating](/zh/docs/api/interacting/interaction#trasnlating)                        | `Translating.Options` |      | 限制节点移动。                                                                                        | { restrict: false }                                            |
+| [translating](/zh/docs/api/interacting/interaction#translating)                        | `Translating.Options` |      | 限制节点移动。                                                                                        | { restrict: false }                                            |
 | [embedding](/zh/docs/api/interacting/interaction#embedding)                          | boolean \| `Embedding.Options` |      | 嵌套节点，默认禁用。                                                                              | `false` |
 | [connecting](/zh/docs/api/interacting/interaction#connecting)                        | `Connecting.Options` |      | 连线选项。                                                                                        | { snap: false, ... } |
 | [highlighting](/zh/docs/api/interacting/interaction#highlighting)                    | `Highlighting.Options` |      | 高亮选项。                                                                                        | {...}                                            |

sites/x6-sites/docs/api/interacting/interaction.zh.md

@@ -342,7 +342,7 @@ new Graph({
 
 上面 `magnetAvailable.name` 其实是高亮器的名称，X6 内置了 `stroke` 和 `className` 两种高亮器，详细信息参考 [Highlighter](/zh/docs/api/registry/highlighter)
 
-## trasnlating
+## translating
 
 可以在全局配置 `translating` 来限制节点的移动范围。
 

sites/x6-sites/docs/api/model/labels.zh.md

@@ -499,7 +499,7 @@ function parseStringLabel(label: string): Label {
 
 ```ts
 Edge.config({
-  defaultlabel: {
+  defaultLabel: {
     markup: [
       {
         tagName: "rect",

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

@@ -716,7 +716,7 @@ toJSON(options?: ToJSONOptions): object
 
 | 名称         | 类型 | 必选 | 默认值  | 描述                                                                                                      |
 | ------------ | ---- | :--: | ------- | --------------------------------------------------------------------------------------------------------- |
-| options.deep | diff |      | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/tutorial/basic/cell#选项默认值)不同的部分）。 |
+| options.deep | diff |      | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/api/model/cell#选项默认值)不同的部分）。 |
 
 ### parseJSON(...)
 

sites/x6-sites/docs/tutorial/plugins/history.zh.md

@@ -54,6 +54,7 @@ graph.use(
 | 属性名           | 类型                            | 默认值  | 必选 | 描述                                                                                                 |
 | ---------------- | ------------------------------- | ------- | ---- | ---------------------------------------------------------------------------------------------------- |
 | enabled          | boolean                         | `false` |      | 是否开启撤销重做功能                                                                                 |
+| stackSize         | number                         | `0` |      | `stackSize` 为 0 表示不限制历史记录栈的长度，如果设置为其他数字表示最多只会记录该数字长度的历史记录                                                                                 |
 | ignoreAdd        | boolean                         | `false` |      | `ignoreAdd` 如果为 `true`，添加添加元素不会被记录到历史记录                                          |
 | ignoreRemove     | boolean                         | `false` |      | `ignoreRemove` 如果为 `true`，删除元素不会被记录到历史记录                                           |
 | ignoreChange     | boolean                         | `false` |      | `ignoreChange` 如果为 `true`，元素属性变化是否被记录到历史记录                                       |

sites/x6-sites/docs/tutorial/plugins/keyboard.zh.md

@@ -107,6 +107,25 @@ unbindKey(
 
 解绑快捷键。
 
+### graph.clearKeys()
+
+```sign
+clearKeys(): this
+```
+
+清除所有快捷键。
+
+### graph.triggerKey()
+
+```sign
+triggerKey(
+  keys: string,
+  action?: 'keypress' | 'keydown' | 'keyup',
+): this
+```
+
+手动触发快捷键。
+
 ### graph.isKeyboardEnabled()
 
 ```sign

sites/x6-sites/docs/tutorial/plugins/stencil.md

@@ -97,7 +97,7 @@ export interface Group {
   graphWidth?: number; // 模板画布宽度
   graphHeight?: number; // 模板画布高度
   graphPadding?: number; // 模板画布边距
-  graphOptions?: Graph.Options; // 模板画布线下
+  graphOptions?: Graph.Options; // 模板画布选项
   layout?: (this: Stencil, model: Model, group?: Group | null) => any;
   layoutOptions?: any; // 布局选项
 }

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'
   }
 }

sites/x6-sites/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/x6-sites",
-  "version": "1.3.2",
+  "version": "1.5.2",
   "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",