1// Copyright (C) 2018 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15export class DragGestureHandler { 16 private readonly boundOnMouseDown = this.onMouseDown.bind(this); 17 private readonly boundOnMouseMove = this.onMouseMove.bind(this); 18 private readonly boundOnMouseUp = this.onMouseUp.bind(this); 19 private clientRect?: DOMRect; 20 private pendingMouseDownEvent?: MouseEvent; 21 private _isDragging = false; 22 23 constructor( 24 private element: HTMLElement, 25 private onDrag: (x: number, y: number) => void, 26 private onDragStarted: (x: number, y: number) => void = () => {}, 27 private onDragFinished = () => {}) { 28 element.addEventListener('mousedown', this.boundOnMouseDown); 29 } 30 31 private onMouseDown(e: MouseEvent) { 32 this._isDragging = true; 33 document.body.addEventListener('mousemove', this.boundOnMouseMove); 34 document.body.addEventListener('mouseup', this.boundOnMouseUp); 35 this.pendingMouseDownEvent = e; 36 // Prevent interactions with other DragGestureHandlers and event listeners 37 e.stopPropagation(); 38 } 39 40 // We don't start the drag gesture on mouse down, instead we wait until 41 // the mouse has moved at least 1px. This prevents accidental drags that 42 // were meant to be clicks. 43 private startDragGesture(e: MouseEvent) { 44 this.clientRect = this.element.getBoundingClientRect(); 45 this.onDragStarted( 46 e.clientX - this.clientRect.left, e.clientY - this.clientRect.top); 47 } 48 49 private onMouseMove(e: MouseEvent) { 50 if (e.buttons === 0) { 51 return this.onMouseUp(e); 52 } 53 if (this.pendingMouseDownEvent && 54 (Math.abs(e.clientX - this.pendingMouseDownEvent.clientX) > 1 || 55 Math.abs(e.clientY - this.pendingMouseDownEvent.clientY) > 1)) { 56 this.startDragGesture(this.pendingMouseDownEvent); 57 this.pendingMouseDownEvent = undefined; 58 } 59 if (!this.pendingMouseDownEvent) { 60 this.onDrag( 61 e.clientX - this.clientRect!.left, e.clientY - this.clientRect!.top); 62 } 63 e.stopPropagation(); 64 } 65 66 private onMouseUp(e: MouseEvent) { 67 this._isDragging = false; 68 document.body.removeEventListener('mousemove', this.boundOnMouseMove); 69 document.body.removeEventListener('mouseup', this.boundOnMouseUp); 70 if (!this.pendingMouseDownEvent) { 71 this.onDragFinished(); 72 } 73 e.stopPropagation(); 74 } 75 76 get isDragging() { 77 return this._isDragging; 78 } 79} 80