ahri-cloud-projects/X6
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ support panning scroller graph byrightmousedown

Browse Source
This commit is contained in:
vector
2021-05-20 15:51:14 +08:00
parent a1603744bc
commit 6ffdb50044
2 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/x6-example-features/src/pages/scroller/index.tsx
View File

@ -54,7 +54,10 @@ export default class Example extends React.Component {
// height: 400,
pageVisible: true,
pageBreak: true,
pannable: true,
pannable: {
enabled: true,
eventTypes: ['leftMouseDown', 'rightMouseDown'],
},
// modifiers: 'shift',
},
minimap: {

56
packages/x6/src/graph/scroller.ts
View File

@ -11,7 +11,13 @@ export class ScrollerManager extends Base {
}
get pannable() {
return this.widgetOptions && this.widgetOptions.pannable === true
if (this.widgetOptions) {
if (typeof this.widgetOptions.pannable === 'object') {
return this.widgetOptions.pannable.enabled
}
return !!this.widgetOptions.pannable
}
return false
}
protected init() {
@ -24,15 +30,48 @@ export class ScrollerManager extends Base {
}
protected startListening() {
this.graph.on('blank:mousedown', this.preparePanning, this)
this.graph.on('node:unhandled:mousedown', this.preparePanning, this)
this.graph.on('edge:unhandled:mousedown', this.preparePanning, this)
let eventTypes = []
const pannable = this.widgetOptions.pannable
if (typeof pannable === 'object') {
eventTypes = pannable.eventTypes || []
} else {
eventTypes = ['leftMouseDown']
}
if (eventTypes.includes('leftMouseDown')) {
this.graph.on('blank:mousedown', this.preparePanning, this)
this.graph.on('node:unhandled:mousedown', this.preparePanning, this)
this.graph.on('edge:unhandled:mousedown', this.preparePanning, this)
}
if (eventTypes.includes('rightMouseDown')) {
this.onRightMouseDown = this.onRightMouseDown.bind(this)
this.view.$(this.graph.container).on('mousedown', this.onRightMouseDown)
}
}
protected stopListening() {
this.graph.off('blank:mousedown', this.preparePanning, this)
this.graph.off('node:unhandled:mousedown', this.preparePanning, this)
this.graph.off('edge:unhandled:mousedown', this.preparePanning, this)
let eventTypes = []
const pannable = this.widgetOptions.pannable
if (typeof pannable === 'object') {
eventTypes = pannable.eventTypes || []
} else {
eventTypes = ['leftMouseDown']
}
if (eventTypes.includes('leftMouseDown')) {
this.graph.off('blank:mousedown', this.preparePanning, this)
this.graph.off('node:unhandled:mousedown', this.preparePanning, this)
this.graph.off('edge:unhandled:mousedown', this.preparePanning, this)
}
if (eventTypes.includes('rightMouseDown')) {
this.view.$(this.graph.container).off('mousedown', this.onRightMouseDown)
}
}
protected onRightMouseDown(e: JQuery.MouseDownEvent) {
if (e.button === 2 && this.allowPanning(e, true) && this.widget) {
this.updateClassName(true)
this.widget.startPanning(e)
this.widget.once('pan:stop', () => this.updateClassName(false))
}
}
protected preparePanning({ e }: { e: JQuery.MouseDownEvent }) {
@ -140,9 +179,10 @@ export class ScrollerManager extends Base {
}
export namespace ScrollerManager {
type EventType = 'leftMouseDown' | 'rightMouseDown'
export interface Options extends Scroller.CommonOptions {
enabled?: boolean
pannable?: boolean
pannable?: boolean | { enabled: boolean; eventTypes: EventType[] }
/**
* alt, ctrl, shift, meta
*/