fix(behaviors): contextmenu and blur events will interrupt drag process (#6253)

* fix(behaviors): contextmenu and blur events will interrupt drag process

* refactor: fix cr issue

---------

Co-authored-by: antv <antv@antfin.com>
This commit is contained in:
Aaron 2024-09-02 10:02:29 +08:00 committed by GitHub
parent 9b1eadc018
commit 6317115603
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -155,11 +155,6 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
private isDragging: boolean = false; private isDragging: boolean = false;
private get animation() {
if (!this.options.shadow) return false;
return this.options.animation;
}
constructor(context: RuntimeContext, options: DragElementOptions) { constructor(context: RuntimeContext, options: DragElementOptions) {
super(context, Object.assign({}, DragElement.defaultOptions, options)); super(context, Object.assign({}, DragElement.defaultOptions, options));
this.onDragStart = this.onDragStart.bind(this); this.onDragStart = this.onDragStart.bind(this);
@ -183,7 +178,15 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
} }
private bindEvents() { private bindEvents() {
const { graph } = this.context; const { graph, canvas } = this.context;
// @ts-expect-error internal property
const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;
if ($canvas) {
$canvas.addEventListener('blur', this.onDragEnd);
$canvas.addEventListener('contextmenu', this.onDragEnd);
}
this.enableElements.forEach((type) => { this.enableElements.forEach((type) => {
graph.on(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart); graph.on(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);
graph.on(`${type}:${CommonEvent.DRAG}`, this.onDrag); graph.on(`${type}:${CommonEvent.DRAG}`, this.onDrag);
@ -410,7 +413,14 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
} }
private unbindEvents() { private unbindEvents() {
const { graph } = this.context; const { graph, canvas } = this.context;
// @ts-expect-error internal property
const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;
if ($canvas) {
$canvas.removeEventListener('blur', this.onDragEnd);
$canvas.removeEventListener('contextmenu', this.onDragEnd);
}
this.enableElements.forEach((type) => { this.enableElements.forEach((type) => {
graph.off(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart); graph.off(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);