From 5d264ce8c41446d968b4944ff3bcfe540d51298d Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Mon, 16 Nov 2020 17:48:15 -0800 Subject: [PATCH] h5: event handler as methods * changed event handlers to be methods, but init to var bindable which is more typescrip like (and easier to understand IMO) * this happened to fix issue dragging between 2 grids not moving obj --- src/dragdrop/dd-draggable.ts | 17 ++++++++++++----- src/dragdrop/dd-droppable.ts | 14 ++++++++++---- src/dragdrop/dd-resizable-handle.ts | 11 ++++++++--- 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/dragdrop/dd-draggable.ts b/src/dragdrop/dd-draggable.ts index 89c00849d..b9bf583ef 100644 --- a/src/dragdrop/dd-draggable.ts +++ b/src/dragdrop/dd-draggable.ts @@ -54,6 +54,13 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt super(); this.el = el; this.option = option; + // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions) + this.mouseDown = this.mouseDown.bind(this); + this.dragStart = this.dragStart.bind(this); + this.drag = this.drag.bind(this); + this.dragEnd = this.dragEnd.bind(this); + this.dragFollow = this.dragFollow.bind(this); + this.init(); } @@ -106,11 +113,11 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt return this; } - private mouseDown = (event: MouseEvent): void => { + private mouseDown(event: MouseEvent): void { this.mouseDownElement = event.target as HTMLElement; } - private dragStart = (event: DragEvent): void => { + private dragStart(event: DragEvent): void { if (this.option.handle && !( this.mouseDownElement && this.mouseDownElement.matches( @@ -149,7 +156,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt return this; } - private drag = (event: DragEvent): void => { + private drag(event: DragEvent): void { this.dragFollow(event); const ev = DDUtils.initEvent(event, { target: this.el, type: 'drag' }); if (this.option.drag) { @@ -158,7 +165,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt this.triggerEvent('drag', ev); } - private dragEnd = (event: DragEvent): void => { + private dragEnd(event: DragEvent): void { if (this.dragFollowTimer) { clearTimeout(this.dragFollowTimer); delete this.dragFollowTimer; @@ -229,7 +236,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt return this; } - private dragFollow = (event: DragEvent): void => { + private dragFollow(event: DragEvent): void { if (this.paintTimer) { cancelAnimationFrame(this.paintTimer); } diff --git a/src/dragdrop/dd-droppable.ts b/src/dragdrop/dd-droppable.ts index 6bc2e4bf5..cdc4a7158 100644 --- a/src/dragdrop/dd-droppable.ts +++ b/src/dragdrop/dd-droppable.ts @@ -29,6 +29,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt super(); this.el = el; this.option = opts; + // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions) + this.dragEnter = this.dragEnter.bind(this); + this.dragOver = this.dragOver.bind(this); + this.dragLeave = this.dragLeave.bind(this); + this.drop = this.drop.bind(this); + this.init(); } @@ -80,7 +86,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt return this; } - protected dragEnter = (event: DragEvent): void => { + protected dragEnter(event: DragEvent): void { this.el.removeEventListener('dragenter', this.dragEnter); this.acceptable = this.canDrop(); if (this.acceptable) { @@ -97,12 +103,12 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt this.el.addEventListener('dragleave', this.dragLeave); } - private dragOver = (event: DragEvent): void => { + private dragOver(event: DragEvent): void { event.preventDefault(); event.stopPropagation(); } - private dragLeave = (event: DragEvent): void => { + private dragLeave(event: DragEvent): void { if (this.el.contains(event.relatedTarget as HTMLElement)) { return; } this.el.removeEventListener('dragleave', this.dragLeave); this.el.classList.remove('ui-droppable-over'); @@ -119,7 +125,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt this.el.addEventListener('dragenter', this.dragEnter); } - private drop = (event: DragEvent): void => { + private drop(event: DragEvent): void { if (this.acceptable) { event.preventDefault(); const ev = DDUtils.initEvent(event, { target: this.el, type: 'drop' }); diff --git a/src/dragdrop/dd-resizable-handle.ts b/src/dragdrop/dd-resizable-handle.ts index acc3562cc..ab47b5ef0 100644 --- a/src/dragdrop/dd-resizable-handle.ts +++ b/src/dragdrop/dd-resizable-handle.ts @@ -25,6 +25,11 @@ export class DDResizableHandle { this.host = host; this.dir = direction; this.option = option; + // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions) + this.mouseDown = this.mouseDown.bind(this); + this.mouseMove = this.mouseMove.bind(this); + this.mouseUp = this.mouseUp.bind(this); + this.init(); } @@ -40,7 +45,7 @@ export class DDResizableHandle { return this; } - private mouseDown = (event: MouseEvent): void => { + private mouseDown(event: MouseEvent): void { this.mouseDownEvent = event; setTimeout(() => { document.addEventListener('mousemove', this.mouseMove, true); @@ -55,7 +60,7 @@ export class DDResizableHandle { }, 100); } - private mouseMove = (event: MouseEvent): void => { + private mouseMove(event: MouseEvent): void { if (!this.started && !this.mouseMoving) { if (this.hasMoved(event, this.mouseDownEvent)) { this.mouseMoving = true; @@ -68,7 +73,7 @@ export class DDResizableHandle { } } - private mouseUp = (event: MouseEvent): void => { + private mouseUp(event: MouseEvent): void { if (this.mouseMoving) { this.triggerEvent('stop', event); }