- 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
- },
- })
|