feat: add options for positionCell api (#3208)

* feat: keyboard support clear and custom trigger

* feat: keyboard support clear and custom trigger

* feat: add return this

* feat: add doc

* feat: add doc

* feat: adjust order

* feat: change order

---------

Co-authored-by: Struggle <lijianqiang.seven@bytedance.com>

.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

@@ -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 <>
+Samuel Bodin <1637651+bodinsamuel@users.noreply.github.com>
+Simon He <57086651+Simon-He95@users.noreply.github.com>
 Sindori <441933726@qq.com>
+Struggle Roue <47975400+struggleRoue@users.noreply.github.com>
 Susan <527971893@qq.com>
-Thomas <eugne>
-Tony <>
+Thomas Zeugner <tomsoftware@gmx.de>
+Tony Wu <93302820+tonywu6@users.noreply.github.com>
 Utopia <greatauk11@gmail.com>
 XLZY <1017866168@qq.com>
-Xingjian <han>
-Zhenyu <o>
+Xingjian Zhang <44231913+THUzxj@users.noreply.github.com>
+Zhenyu Hou <skyking_H@hotmail.com>
 _XiaoTian <istianlei@qq.com>
 arthur657834 <kingkom7834@126.com>
 boyu.zlj <boyu.zlj@antgroup.com>
@@ -68,10 +70,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>

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,10 @@
+## @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.6",
   "description": "Basic toolkit for X6",
   "main": "lib/index.js",
   "module": "es/index.js",

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

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

packages/x6-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-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) {

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

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

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

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

packages/x6-plugin-selection/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-react-components/src/color-picker/index.tsx

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

packages/x6/CHANGELOG.md

@@ -1,3 +1,19 @@
+## @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.5",
+  "version": "2.2.1",
   "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

@@ -763,10 +763,14 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  positionRect(rect: Rectangle.RectangleLike, direction: Transform.Direction) {
+  positionRect(
+    rect: Rectangle.RectangleLike,
+    direction: Transform.Direction,
+    options?: { padding?: NumberExt.SideOptions },
+  ) {
     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 +778,14 @@ export class Graph extends Basecoat<EventArgs> {
     return this
   }
 
-  positionCell(cell: Cell, direction: Transform.Direction) {
+  positionCell(
+    cell: Cell,
+    direction: Transform.Direction,
+    options?: { padding?: NumberExt.SideOptions },
+  ) {
     const scroller = this.getPlugin<any>('scroller')
     if (scroller) {
-      scroller.positionCell(cell, direction)
+      scroller.positionCell(cell, direction, options)
     } else {
       this.transform.positionCell(cell, direction)
     }
@@ -1193,15 +1201,56 @@ export class Graph extends Basecoat<EventArgs> {
   }
 
   getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined {
-    let result: Graph.Plugin | undefined
+    return Array.from(this.installedPlugins).find(
+      (plugin) => plugin.name === pluginName,
+    ) as T
+  }
 
-    this.installedPlugins.forEach((plugin) => {
-      if (plugin.name === pluginName) {
-        result = plugin
-      }
+  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
+  }
 
-    return result as T
+  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
@@ -1349,5 +1398,8 @@ export namespace Graph {
     name: string
     init: (graph: Graph, ...options: any[]) => any
     dispose: () => void
+    disable?: () => void
+    enable?: () => void
+    isEnabled?: () => boolean
   }
 }

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

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]

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
       }
 

packages/x6/src/view/node.ts

@@ -457,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))
@@ -472,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) {
@@ -492,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)
   }
 
@@ -515,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)
@@ -527,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
@@ -545,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) {
@@ -1092,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 {}
@@ -1124,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
     }

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: [],
+})

sites/x6-sites/CHANGELOG.md

@@ -1,3 +1,16 @@
+# @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/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` 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。

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/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` |      | 是否分页                                                                                                                                                                                  |

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         | -                  |      | 设置附加显示的内容                                                                                                                             |

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.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.0.16",
+    "dumi": "^2.1.6",
     "elkjs": "^0.8.2",
     "highlight.js": "^10.1.2",
     "react": "^18.0.0",