1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {
createRef,
Component,
} = require("resource://devtools/client/shared/vendor/react.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
class Draggable extends Component {
static get propTypes() {
return {
onMove: PropTypes.func.isRequired,
onDoubleClick: PropTypes.func,
onStart: PropTypes.func,
onStop: PropTypes.func,
style: PropTypes.object,
title: PropTypes.string,
className: PropTypes.string,
};
}
constructor(props) {
super(props);
this.draggableEl = createRef();
this.startDragging = this.startDragging.bind(this);
this.stopDragging = this.stopDragging.bind(this);
this.onDoubleClick = this.onDoubleClick.bind(this);
this.onMove = this.onMove.bind(this);
this.mouseX = 0;
this.mouseY = 0;
}
startDragging(ev) {
const xDiff = Math.abs(this.mouseX - ev.clientX);
const yDiff = Math.abs(this.mouseY - ev.clientY);
// This allows for double-click.
if (this.props.onDoubleClick && xDiff + yDiff <= 1) {
return;
}
this.mouseX = ev.clientX;
this.mouseY = ev.clientY;
if (this.isDragging) {
return;
}
this.isDragging = true;
ev.preventDefault();
this.draggableEl.current.addEventListener("mousemove", this.onMove);
this.draggableEl.current.setPointerCapture(ev.pointerId);
this.props.onStart && this.props.onStart();
}
onDoubleClick() {
if (this.props.onDoubleClick) {
this.props.onDoubleClick();
}
}
onMove(ev) {
if (!this.isDragging) {
return;
}
ev.preventDefault();
// Use viewport coordinates so, moving mouse over iframes
// doesn't mangle (relative) coordinates.
this.props.onMove(ev.clientX, ev.clientY);
}
stopDragging(ev) {
if (!this.isDragging) {
return;
}
this.isDragging = false;
ev.preventDefault();
this.draggableEl.current.removeEventListener("mousemove", this.onMove);
this.draggableEl.current.releasePointerCapture(ev.pointerId);
this.props.onStop && this.props.onStop();
}
render() {
return dom.div({
ref: this.draggableEl,
role: "presentation",
style: this.props.style,
title: this.props.title,
className: this.props.className,
onMouseDown: this.startDragging,
onMouseUp: this.stopDragging,
onDoubleClick: this.onDoubleClick,
});
}
}
module.exports = Draggable;
|
