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 } 37 38 // We don't start the drag gesture on mouse down, instead we wait until 39 // the mouse has moved at least 1px. This prevents accidental drags that 40 // were meant to be clicks. 41 private startDragGesture(e: MouseEvent) { 42 this.clientRect = this.element.getBoundingClientRect(); 43 this.onDragStarted( 44 e.clientX - this.clientRect.left, e.clientY - this.clientRect.top); 45 } 46 47 private onMouseMove(e: MouseEvent) { 48 if (e.buttons === 0) { 49 return this.onMouseUp(e); 50 } 51 if (this.pendingMouseDownEvent && 52 (Math.abs(e.clientX - this.pendingMouseDownEvent.clientX) > 1 || 53 Math.abs(e.clientY - this.pendingMouseDownEvent.clientY) > 1)) { 54 this.startDragGesture(this.pendingMouseDownEvent); 55 this.pendingMouseDownEvent = undefined; 56 } 57 if (!this.pendingMouseDownEvent) { 58 this.onDrag( 59 e.clientX - this.clientRect!.left, e.clientY - this.clientRect!.top); 60 } 61 } 62 63 private onMouseUp(_e: MouseEvent) { 64 this._isDragging = false; 65 document.body.removeEventListener('mousemove', this.boundOnMouseMove); 66 document.body.removeEventListener('mouseup', this.boundOnMouseUp); 67 if (!this.pendingMouseDownEvent) { 68 this.onDragFinished(); 69 } 70 } 71 72 get isDragging() { 73 return this._isDragging; 74 } 75} 76