Re: SVG dragging problem

Giorgio <[email protected]> Sat, 31 Oct 2009 06:50:20 -0700 (PDT)
Newsgroups gmane.comp.mozilla.devel.svg
Organization http://groups.google.com
Message-ID <f7db16cc-5e34-4582-b64d-e0024ebcdfdd@o10g2000yqa.googlegroups.com>
That's a good news, at least I am not the only one facing this bug. Do
you find it useful if I somehow confirm the bug on buzilla?

Giorgio

On 31 Ott, 10:00, Daniel Holbert <[email protected]> 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
> > . 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;
> > };
> > _______________________________________________
> > dev-tech-svg mailing list
> > [email protected]
> >https://lists.mozilla.org/listinfo/dev-tech-svg