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