Skip to content

Commit

Permalink
feat: support both mouse selection with the left mouse button and pan…
Browse files Browse the repository at this point in the history 
…ning with the middle mouse button in the graph (#3965)

* feat(selection): add the eventTypes option which allows specifying selection listening buttons

* feat(panning): add a new eventType 'mouseWheelDown'

* test(selection): allow panning with mouseWheelDown in the selection example

* docs(selection): add document for new option 'eventTypes'

* docs(panning): add document for 'mouseWheelDown' of 'eventType'

* fix: improve code style

* fix: move eventTypes to Selection.CommonOptions & add into the default option

* fix: put mouse button check log inside callback to enable dynamically change eventTypes

* fix: optimize code style
  • Loading branch information
@aMoonkin
aMoonkin authored Nov 3, 2023
1 parent b92a23e commit cabfa0b
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 28 deletions.
4 changes: 4 additions & 0 deletions examples/x6-example-features/src/pages/selection/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ export default class Example extends React.Component {
width: 800,
height: 600,
grid: true,
panning: {
enabled: true,
eventTypes: ['mouseWheelDown'],
},
})

const keyboard = new Keyboard()
Expand Down
25 changes: 19 additions & 6 deletions packages/x6-plugin-selection/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
ModifierKey,
CssLoader,
Dom,
ObjectExt,
Cell,
EventArgs,
Graph,
Expand Down Expand Up @@ -42,11 +41,12 @@ export class Selection

constructor(options: Selection.Options = {}) {
super()
this.options = ObjectExt.merge(
{ enabled: true },
Selection.defaultOptions,
options,
)
this.options = {
enabled: true,
...Selection.defaultOptions,
...options,
}

CssLoader.ensure(this.name, content)
}

Expand Down Expand Up @@ -320,6 +320,10 @@ export class Selection
}

protected onBlankMouseDown({ e }: EventArgs['blank:mousedown']) {
if (!this.allowBlankMouseDown(e)) {
return
}

const allowGraphPanning = this.graph.panning.allowPanning(e, true)
const scroller = this.graph.getPlugin<any>('scroller')
const allowScrollerPanning = scroller && scroller.allowPanning(e, true)
Expand All @@ -331,6 +335,14 @@ export class Selection
}
}

protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
const eventTypes = this.options.eventTypes
return (
(eventTypes?.includes('leftMouseDown') && e.button === 0) ||
(eventTypes?.includes('mouseWheelDown') && e.button === 1)
)
}

protected onBlankClick() {
this.clean()
}
Expand Down Expand Up @@ -475,5 +487,6 @@ export namespace Selection {
selectEdgeOnMoved: false,
following: true,
content: null,
eventTypes: ['leftMouseDown', 'mouseWheelDown'],
}
}
5 changes: 5 additions & 0 deletions packages/x6-plugin-selection/src/selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -950,6 +950,8 @@ export class SelectionImpl extends View<SelectionImpl.EventArgs> {
}

export namespace SelectionImpl {
type SelectionEventType = 'leftMouseDown' | 'mouseWheelDown'

export interface CommonOptions {
model?: Model
collection?: Collection
Expand Down Expand Up @@ -977,6 +979,9 @@ export namespace SelectionImpl {

// Whether to respond event on the selectionBox
pointerEvents?: 'none' | 'auto'

// with which mouse button the selection can be started
eventTypes?: SelectionEventType[]
}

export interface Options extends CommonOptions {
Expand Down
24 changes: 18 additions & 6 deletions packages/x6/src/graph/panning.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,10 @@ export class PanningManager extends Base {
}

protected onMouseDown({ e }: { e: Dom.MouseDownEvent }) {
const eventTypes = this.widgetOptions.eventTypes
if (!(eventTypes && eventTypes.includes('leftMouseDown'))) {
if (!this.allowBlankMouseDown(e)) {
return
}

const selection = this.graph.getPlugin<any>('selection')
const allowRubberband = selection && selection.allowRubberband(e, true)
if (
Expand All @@ -117,24 +117,32 @@ export class PanningManager extends Base {

protected onRightMouseDown(e: Dom.MouseDownEvent) {
const eventTypes = this.widgetOptions.eventTypes
if (!(eventTypes && eventTypes.includes('rightMouseDown'))) {
if (!(eventTypes?.includes('rightMouseDown') && e.button === 2)) {
return
}
if (e.button === 2 && this.allowPanning(e, true)) {
if (this.allowPanning(e, true)) {
this.startPanning(e)
}
}

protected onMouseWheel(e: WheelEvent, deltaX: number, deltaY: number) {
const eventTypes = this.widgetOptions.eventTypes
if (!(eventTypes && eventTypes.includes('mouseWheel'))) {
if (!eventTypes?.includes('mouseWheel')) {
return
}
if (!e.ctrlKey) {
this.graph.translateBy(-deltaX, -deltaY)
}
}

protected allowBlankMouseDown(e: Dom.MouseDownEvent) {
const eventTypes = this.widgetOptions.eventTypes
return (
(eventTypes?.includes('leftMouseDown') && e.button === 0) ||
(eventTypes?.includes('mouseWheelDown') && e.button === 1)
)
}

protected allowMouseWheel(e: WheelEvent) {
return this.pannable && !e.ctrlKey
}
Expand Down Expand Up @@ -187,7 +195,11 @@ export class PanningManager extends Base {
}

export namespace PanningManager {
type EventType = 'leftMouseDown' | 'rightMouseDown' | 'mouseWheel'
type EventType =
| 'leftMouseDown'
| 'rightMouseDown'
| 'mouseWheel'
| 'mouseWheelDown'
export interface Options {
enabled?: boolean
modifiers?: string | ModifierKey[] | null
Expand Down
5 changes: 3 additions & 2 deletions sites/x6-sites/docs/api/graph/panning.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const graph = new Graph({
interface Options {
enabled?: boolean
modifiers?: ModifierKey
eventTypes?: ('leftMouseDown' | 'rightMouseDown' | 'mouseWheel')[]
eventTypes?: ('leftMouseDown' | 'rightMouseDown' | 'mouseWheel', 'mouseWheelDown')[]
}
```

Expand Down Expand Up @@ -70,7 +70,8 @@ type ModifierKey = string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null
- `leftMouseDown`: 按下鼠标左键移动进行拖拽
- `rightMouseDown`: 按下鼠标右键移动进行拖拽
- `mouseWheel`: 使用鼠标滚轮拖拽
- `mouseWheel`: 使用鼠标滚轮滚动拖拽
- `mouseWheelDown`: 按下鼠标滚轮进行拖拽
## 方法
Expand Down
40 changes: 26 additions & 14 deletions sites/x6-sites/docs/tutorial/plugins/selection.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,21 @@ graph.use(

## 配置

| 属性名 | 类型 | 默认值 | 必选 | 描述 |
|----------------------------|----------------|--------------------|------|------------------------------------------------------------------------------------------------------------------------------------------|
| className | string | - | | 附加样式名，用于定制样式 |
| multiple | boolean | `true` | | 是否启用点击多选，启用后按住 `ctrl` 或 `command` 键点击节点实现多选 |
| multipleSelectionModifiers | ModifierKey | `['ctrl', 'meta']` | | 用于设置上面点击多选配套的修饰键 |
| rubberband | boolean | `false` | | 是否启用框选节点功能 |
| modifiers | ModifierKey | - | | 用于设置上面框选配套的修饰键 |
| strict | boolean | `false` | | 选框是否需要完全包围节点时才选中节点 |
| movable | boolean | `true` | | 拖动选框时框选的节点是否一起移动 |
| content | string | - | | 设置附加显示的内容 |
| filter | Filter | - | | 节点过滤器 |
| showNodeSelectionBox | boolean | `false` | | 是否显示节点的选择框 |
| showEdgeSelectionBox | boolean | `false` | | 是否显示边的选择框 |
| pointerEvents | `node \| auto` | `auto` | | 如果打开 `showNodeSelectionBox` 时，会在节点上方盖一层元素，导致节点的事件无法响应，此时可以配置 `pointerEvents: none` 来解决，默认值是 `auto` |
| 属性名 | 类型 | 默认值 | 必选 | 描述 |
| -------------------------- | -------------------- | ------------------------------------- | ---- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| className | string | - | | 附加样式名，用于定制样式 |
| multiple | boolean | `true` | | 是否启用点击多选，启用后按住 `ctrl` 或 `command` 键点击节点实现多选 |
| multipleSelectionModifiers | ModifierKey | `['ctrl', 'meta']` | | 用于设置上面点击多选配套的修饰键 |
| rubberband | boolean | `false` | | 是否启用框选节点功能 |
| modifiers | ModifierKey | - | | 用于设置上面框选配套的修饰键 |
| strict | boolean | `false` | | 选框是否需要完全包围节点时才选中节点 |
| movable | boolean | `true` | | 拖动选框时框选的节点是否一起移动 |
| content | string | - | | 设置附加显示的内容 |
| filter | Filter | - | | 节点过滤器 |
| showNodeSelectionBox | boolean | `false` | | 是否显示节点的选择框 |
| showEdgeSelectionBox | boolean | `false` | | 是否显示边的选择框 |
| pointerEvents | `node \| auto` | `auto` | | 如果打开 `showNodeSelectionBox` 时，会在节点上方盖一层元素，导致节点的事件无法响应，此时可以配置 `pointerEvents: none` 来解决，默认值是 `auto` |
| eventTypes | SelectionEventType[] | `['leftMouseDown', 'mouseWheelDown']` | | 用于设置框选的触发事件类型 |

`Filter` 的类型定义如下：

Expand All @@ -96,6 +97,17 @@ X6 中修饰键包括 `alt`、`ctrl`、`meta`、`shift` 四个，设置修饰键
- `alt&ctrl` 表示同时按下 `alt` 和 `ctrl`。
- `alt|ctrl&shift` 表示同时按下 `alt` 和 `shift` 或者同时按下 `ctrl` 和 `shift`。
`SelectionEventType` 的类型定义如下：
```ts
type SelectionEventType = 'leftMouseDown' | 'mouseWheelDown';
```
触发框选的交互方式。支持2种形式或者他们之间的组合：

- `leftMouseDown`: 按下鼠标左键移动进行拖拽
- `mouseWheelDown`: 按下鼠标滚轮进行拖拽


## API

### graph.select(...)
Expand Down

0 comments on commit cabfa0b

Please sign in to comment.