[patch][need cla] drag and drop support for SVG widgets

[dylan]

add support for drag and drop API for SVG widgets.

[[email protected]…]

I have started a fix for this, if anyone is interested. I'm transforming the elements local coordinates to the screen coordinates via getScreenCTM, but I am having trouble with scroll position. Maybe someone can help with that part?

I added these functions to style.js:

function calculateScreenCoords( node )
{
    var box = extractBox( node );
    var matrix = node.getScreenCTM();
    var newBox = translateBox( box, matrix );
    node.screenCords = {x:newBox.p1.x,y:newBox.p1.y,width:newBox.width,height:newBox.height};
    node.offsetWidth = newBox.width;
    node.offsetHeight = newBox.height;
}

function applyMatrix( point, matrix )
{
    return new Point(
        matrix.a*point.x + matrix.c*point.y + matrix.e,
        matrix.b*point.x + matrix.d*point.y + matrix.f );
}

function Point(x,y)
{
    this.x = x;
    this.y = y;
}

function extractBox( elem )
{
    var box = {};
    box.p1 = new Point(elem.x.baseVal.value, elem.y.baseVal.value);
    box.width = elem.width.baseVal.value;
    box.height = elem.height.baseVal.value;
    box.p2 = new Point( box.p1.x + box.width, box.p1.y + box.height);
    return box;
}

function translateBox( box, matrix )
{
    var box2 = {};
    box2.p1 = applyMatrix( box.p1, matrix );
    box2.p2 = applyMatrix( box.p2, matrix );
    box2.height = box2.p2.y - box2.p1.y;
    if( box2.height < 0 ) box2.height *= -1;
    box2.p1.y -= box2.height;
    box2.p1.y -= window.scrollY;
    box2.width = box2.p2.x - box2.p1.x;
    if( box2.width < 0 ) box2.width *= -1;
    return box2;
}

and this is the new tail end of dojo.style.getTotalOffset:

else if(node[coord]){
		offset += node[coord];
	}else if( node[coord] && node[coord].baseVal ){
	    if( ! node.screenCoords )
	        calculateScreenCoords( node );
	    offset += node.screenCoords[coord];
	}
	return offset;

getInner* and getContent* also have changed"

dojo.style.getContentWidth = function (node){
    if( ! node.offsetHeight ) calculateScreenCoords( node );
	return node.offsetWidth - dojo.style.getPaddingWidth(node) - dojo.style.getBorderWidth(node);
}

dojo.style.getInnerWidth = function (node){
    if( ! node.offsetHeight ) calculateScreenCoords( node );
	return node.offsetWidth;
}
...
dojo.style.getContentHeight = function (node){
    if( ! node.offsetHeight ) calculateScreenCoords( node );
	return node.offsetHeight - dojo.style.getPaddingHeight(node) - dojo.style.getBorderHeight(node);
}

dojo.style.getInnerHeight = function (node){
    if( ! node.offsetHeight ) calculateScreenCoords( node );
	return node.offsetHeight; // FIXME: does this work?
}

Finally (I think) I made a change to isInsideBox to try and help with the scrolling issue (far from perfect):

isInsideBox: function(e, coords){
		if(	(e.clientX > coords[0][0])&&
			(e.clientX < coords[1][0])&&
			(e.clientY > coords[0][1])&&
			(e.clientY < coords[1][1]) ){
			return true;
		}
		else if( (e.pageX > coords[0][0])&&
			(e.pageX < coords[1][0])&&
			(e.pageY > coords[0][1])&&
			(e.pageY < coords[1][1]) ){
			return true;
	    }
		return false;
	}

[[email protected]…]

The previous code does not support arbitrary shaped SVGElements, e.g. the path element.

The new extractBox:

function extractBox( elem )
{
    var box = elem.getBBox();
    box.p1 = new Point(box.x, box.y);
    box.p2 = new Point( box.p1.x + box.width, box.p1.y + box.height);
    return box;
}

and thenew tail of getTotalOffset:

	else if(node[coord] && ! node.constructor.toString().indexOf("SVG") ){
		offset += node[coord];
	}else if( node.constructor.toString().indexOf("SVG") ){
	    if( ! node.screenCoords )
	        calculateScreenCoords( node );
	    offset += node.screenCoords[coord];
	}
	return offset;

[Tom Trenka]

Reassigning.

[dylan]

Ben, sorry for the delay in looking at your patch. We need a CLA on file for you I think, http://dojotoolkit.org/icla.txt

[Tom Trenka]

Closing this in favor of dojox.gfx and the new DnD system, which should be working with it.