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