SVG dragging problem
Giorgio
it is months I am facing an irritating problem in my SVG-based web-
application. Basically, I am implementing a drag functionality within
an SVG embedded object. The SVG contains a set of rectangles (with
text inside them), a set of ellipses (with text) and set of paths
connecting some elements. Now, the user is able to move rectangles and
ellipses and the paths are recomputed and drawn in the correct new
position.
The issue is that sometimes (actually most of the times), when the
user tries to drag something, the movement is slowed down and the icon
of the "official" firefox drag and drop function appears. It seems
like the handler of firefox drag and drop kicks in.
In order to clarify the situation I prepared a video http://vimeo.com/7162526
. The problem appears at the ~23rd sec.
I hope you can help me out,
thanks in advance
Giorgio
P.S: This is the code I'm using for the drag functionality:
/**
* This function is called at the beginning in order to initialize all
the
* datastructures.
*/
function Init(obj) {
SVGDocument = obj.ownerDocument;
SVGRoot = SVGDocument.documentElement;
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
lines = new Array();
newX = 0;
newY = 0;
isMoving = false;
}
/**
* This function is called when a concept is clicked for moving. It
firstly
* removes lines that are connected to the concept, then it activates
other
* event listners.
*
* @param evt
* the event mousedown generating the call.
*/
function move(evt) {
if (!evt)
return;
query = top.getQuery();
var group = evt.element().parentNode;
transMatrix = group.getCTM();
GrabPoint.x = evt.pointerX() - Number(transMatrix.e);
GrabPoint.y = evt.pointerY() - Number(transMatrix.f);
setLines(evt.element().id);
document.addEventListener("mousemove", moving, true);
document.addEventListener("mouseup", mouseUp, true);
document.addEventListener("mouseout", mouseUp, true);
evt.stopPropagation()
}
/**
* This function is called when a concept is being dragged around.
*
* @param evt
* the event generating the call
*/
function moving(evt) {
evt = evt || window.event;
getTrueCoords(evt);
if (TrueCoords.x == GrabPoint.x && TrueCoords.y == GrabPoint.y) {
isMoving = false;
} else {
isMoving = true;
}
newX = TrueCoords.x - GrabPoint.x;
newY = TrueCoords.y - GrabPoint.y;
if (evt.element().parentNode) {
evt.element().parentNode.setAttribute('transform', 'translate(' +
newX
+ ',' + newY + ')');
evt.element().parentNode.setAttribute('dragx', newX);
evt.element().parentNode.setAttribute('dragy', newY);
}
//lines are redrawn here
evt.stopPropagation()
}
/**
* This function is called when the element is standing.
*
* @param evt
* the event generating the call.
*/
function mouseUp(evt) {
isMoving = false;
document.removeEventListener("mousemove", moving, true);
document.removeEventListener("mouseup", mouseUp, true);
document.removeEventListener("mouseout", mouseUp, true);
}
function getTrueCoords(evt) {
// find the current zoom level and pan setting, and adjust the
reported
// mouse position accordingly
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.pointerX() - translation.x) / newScale;
TrueCoords.y = (evt.pointerY() - translation.y) / newScale;
};
Daniel Holbert
issue earlier today:
https://bugzilla.mozilla.org/show_bug.cgi?id=525591
~Daniel
> _______________________________________________
> dev-tech-svg mailing list
> dev-te...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-tech-svg
Giorgio
you find it useful if I somehow confirm the bug on buzilla?
Giorgio
On 31 Ott, 10:00, Daniel Holbert <dholb...@mozilla.com> wrote:
> I'm not sure what causes it, but I actually filed a bug on this exact
> issue earlier today:
> https://bugzilla.mozilla.org/show_bug.cgi?id=525591
>
> ~Daniel
>
> On 10/31/2009 01:50 AM, Giorgio wrote:
>
> > Hi all,
>
> > it is months I am facing an irritating problem in my SVG-based web-
> > application. Basically, I am implementing a drag functionality within
> > an SVG embedded object. The SVG contains a set of rectangles (with
> > text inside them), a set of ellipses (with text) and set of paths
> > connecting some elements. Now, the user is able to move rectangles and
> > ellipses and the paths are recomputed and drawn in the correct new
> > position.
>
> > The issue is that sometimes (actually most of the times), when the
> > user tries to drag something, the movement is slowed down and the icon
> > of the "official" firefox drag and drop function appears. It seems
> > like the handler of firefox drag and drop kicks in.
>
> > In order to clarify the situation I prepared a videohttp://vimeo.com/7162526
> > dev-tech-...@lists.mozilla.org
> >https://lists.mozilla.org/listinfo/dev-tech-svg