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
|
function reactToDrag(element, onDrag, beforeDrag) {
let xStart, yStart
let startDrag = (event) => {
// Avoid the default events
event.preventDefault()
// Store the position where the drag started
xStart = event.pageX
yStart = event.pageY
// Fire the start drag event
if (beforeDrag) {
var { x, y } = parent.point(event.pageX, event.pageY)
beforeDrag(event, x, y)
}
// Register events to react to dragging and drag ends
SVG.on(window, ['mousemove.drag', 'touchmove.drag'], reactDrag)
SVG.on(window, ['mouseup.drag', 'touchend.drag'], stopDrag)
}
let reactDrag = (event) => {
// Convert screen coordinates to svg coordinates and use them
var { x, y } = parent.point(event.pageX, event.pageY)
if (onDrag) onDrag(event, x, y)
}
let stopDrag = (event) => {
SVG.off(window, ['mousemove.drag', 'touchmove.drag'])
SVG.off(window, ['mouseup.drag', 'touchend.drag'])
}
// Bind the drag tracker to this element directly
let parent = element.root()
let point = new SVG.Point()
element.mousedown(startDrag).touchstart(startDrag)
}
SVG.extend(SVG.Element, {
draggable: function (after) {
let sx, sy
reactToDrag(
this,
(e, x, y) => {
this.transform({
origin: [sx, sy],
position: [x, y]
})
if (after) {
after(this, x, y)
}
},
(e, x, y) => {
var toAbsolute = new SVG.Matrix(this).inverse()
var p = new SVG.Point(x, y).transform(toAbsolute)
sx = p.x
sy = p.y
}
)
return this
}
})
|
