Dart SVG Drag and Drop Slipping Mouse - html

Question

I try to create drag and drop behavior in Dart using SVG. I have BasicUnits that are basically GElement (<g>)s. Right now it has a body, which is a RectElement. I am using that element to move the unit around. Here is the definition:
class BasicUnit {
SvgSvgElement canvas;
GElement group;
RectElement body;
bool dragging;
num dragOffsetX, dragOffsetY, width, height;
BasicUnit(SvgSvgElement this.canvas, num x, num y, num this.width, num this.height) {
this.body = new RectElement();
this.body.setAttribute('x', '$x');
this.body.setAttribute('y', '$y');
this.body.setAttribute('width', '$width');
this.body.setAttribute('height', '$height');
this.body.classes.add('processing_body');
this.body.onMouseDown.listen(select);
this.body.onMouseMove.listen(moveStarted);
this.body.onMouseUp.listen(moveCompleted);
this.body.onMouseLeave.listen(moveCompleted);
this.group = new GElement();
this.group.append(this.body);
this.dragging = false;
}
void select(MouseEvent e) {
e.preventDefault();
this.dragging = true;
var mouseCoordinates = getMouseCoordinates(e);
this.dragOffsetX = mouseCoordinates['x'] - body.getCtm().e; //double.parse(body.attributes['x']);
this.dragOffsetY = mouseCoordinates['y'] - body.getCtm().f;
}
void moveStarted(MouseEvent e) {
e.preventDefault();
if (dragging) {
var mouseCoordinates = getMouseCoordinates(e);
num newX = mouseCoordinates['x'] - dragOffsetX;
num newY = mouseCoordinates['y'] - dragOffsetY;
this.body.setAttribute('transform', 'translate($newX, $newY)');
}
}
void moveCompleted(MouseEvent e) {
e.preventDefault();
this.dragging = false;
}
dynamic getMouseCoordinates(e) {
return {'x': (e.offset.x - this.canvas.currentTranslate.x)/this.canvas.currentScale,
'y': (e.offset.y - this.canvas.currentTranslate.y)/this.canvas.currentScale};
}
}
I have an Application object. It gets the svg element for given id. Here is the definition:
class Application {
int WIDTH = 80, HEIGHT = 60;
SvgSvgElement canvas;
Application(canvas_id) {
this.canvas = document.querySelector(canvas_id);
this.canvas.onDoubleClick.listen((MouseEvent e) => addUnit(e));
}
void addUnit(MouseEvent e) {
num x = e.offset.x - WIDTH/2;
num y = e.offset.y - HEIGHT/2;
BasicUnit newUnit = new BasicUnit(this.canvas, x, y, WIDTH, HEIGHT);
this.canvas.append(newUnit.group);
}
}
My problem is that my mouse is slipping over BasicUnit or <g> element. When you select the element close to its edges and try to drag, suddenly element gets dropped. If you try to drag and drop fast, that is the case as well. I tried to follow the example on this webpage, but couldn't figure out what the problem is.
UPDATE
Full source code available here.
UPDATE II
Here is a demo.

Answer 1

The browser is trying to drag the text around that is selected after you double click on the page. This can be fixed easily by preventing the default behaviour for the onMouseDown event (your select method):
void select(MouseEvent e) {
e.preventDefault();
this.dragging = true;
this.group.parentNode.append(this.group);
var mouseCoordinates = this.getMouseCoordinates(e);
this.dragOffsetX = mouseCoordinates['x'] - this.body.getCtm().e;
this.dragOffsetY = mouseCoordinates['y'] - this.body.getCtm().f;
}
The other problem is caused by the svg not drawing fast enough to keep up with the mouse coordinates. So, when moved fast enough the mouse coordinates move outside the body of the SVG element, so the element will no longer get mouse move events. This can be solved by listening for the onMouseMove and onMouseLeave events on the background SVG element (canvas in your example) instead of the elements being moved:
body.onMouseDown.listen(select);
canvas.onMouseMove.listen(moveStarted);
body.onMouseUp.listen(moveCompleted);
canvas.onMouseLeave.listen(moveCompleted);
EDIT:
Using the above method works unless the onMouseUp occurs when the element being dragged is underneath another element, in which case the element is still being dragged until another onMouseUp event occurs on that element, or the cursor moves outside of the viewing area. This can be fixed by just listening for onMouseUp events on the canvas instead of body:
canvas.onMouseUp.listen(moveCompleted);
See this example.
Additionally it might be better to turn on the onMouseMove, onMouseUp, and onMouseLeave listeners when the element is clicked (in your select method), then disable the listeners on onMouseUp and onMouseLeave (the moveCompleted method). I have done this in the example above.