Re: SVG dragging problem

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 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;
> };
> _______________________________________________
> dev-tech-svg mailing list
> [email protected]
> https://lists.mozilla.org/listinfo/dev-tech-svg