Hi, Ok, last example, this one allows you to move a single object by mouse down and move or "lasso" objects, plus the selection rect resizes down to the selected objects. I have already sent this file to you, since Yahoo screws up the formatting, but I make it available to everyone here.
<?xml version="1.0" standalone="no"?> <svg width="100%" height="100%" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"; xmlns:ev="http://www.w3.org/2001/xml-events"; xmlns:xlink="http://www.w3.org/1999/xlink"; onload="ecmascript:_onload(evt)" onmousedown="ecmascript:MouseDown(evt)" onmousemove="ecmascript:MouseMove(evt)" onmouseup="ecmascript:MouseUp(evt)"> <script type="text/ecmascript"> <![CDATA[ var svgDoc=document; var svgRoot=svgDoc.documentElement; var ObjArray = new Array(); var GroupArray = new Array(); var SelectRect = null; var OrigX = 0; var OrigY = 0; var bInDrawRect = false; var bMoveObjects = false; var MyGroupObjectsObj = null; function _onload(evt) { MyGroupObjectsObj = svgDoc.getElementById("SelectGroup"); var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg";, "rect"); create_bar.setAttribute("id", "r_bar"); create_bar.setAttribute("fill", "green"); create_bar.setAttribute("x", "300"); create_bar.setAttribute("y", "50"); create_bar.setAttribute("width", "100"); create_bar.setAttribute("height", "30"); create_bar.setAttribute("pointer-events", "inherit"); create_bar.setAttribute("onmousedown","ecmascript: Obj_MouseDown(evt)"); svgRoot.insertBefore(create_bar, MyGroupObjectsObj); ObjArray[ObjArray.length] = create_bar; var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg";, "circle"); cir.setAttribute( "id","cir"); cir.setAttribute( "cx","420"); cir.setAttribute( "cy","165"); cir.setAttribute( "r","10"); cir.setAttribute('fill', 'red'); cir.setAttribute('pointer-events', 'inherit'); cir.setAttribute("onmousedown","ecmascript: Obj_MouseDown(evt)"); svgRoot.insertBefore(cir, MyGroupObjectsObj); ObjArray[ObjArray.length] = cir; } function Obj_MouseDown(evt) { if(SelectRect == null) { evt.stopPropagation(); var bFound = false; for(var pos = 0; pos < ObjArray.length;pos++) { if(ObjArray[pos] == evt.target) { var obj = ObjArray[pos]; GroupArray[GroupArray.length] = obj; ObjArray.splice(pos,1); svgRoot.removeChild(obj); MyGroupObjectsObj.appendChild(obj); //testing obj.setAttribute("stroke","black"); bFound = true; break; } }//for if(bFound) { OrigX = evt.clientX; OrigY = evt.clientY; SelectRect=svgDoc.createElementNS("http://www.w3.org/2000/svg";, "rect"); SelectRect.setAttribute("id", "SelectRect"); SelectRect.setAttribute("fill", "white"); SelectRect.setAttribute("stroke", "blue"); var gbbox = evt.target.getBBox(); SelectRect.setAttribute("x", gbbox.x); SelectRect.setAttribute("y", gbbox.y); SelectRect.setAttribute("width", gbbox.width); SelectRect.setAttribute("height", gbbox.height); SelectRect.setAttribute("fill-opacity", 0.000001); SelectRect.setAttribute("pointer-events", "inherit"); //svgRoot.insertBefore(SelectRect,svgDoc.getElementById("Main_BKG").nextSibl ing); svgRoot.appendChild(SelectRect); bMoveObjects = true; } } } function MouseDown(evt) { evt.stopPropagation(); if(!bInDrawRect && SelectRect == null) { OrigX = evt.clientX; OrigY = evt.clientY; SelectRect=svgDoc.createElementNS("http://www.w3.org/2000/svg";, "rect"); SelectRect.setAttribute("id", "SelectRect"); SelectRect.setAttribute("fill", "white"); SelectRect.setAttribute("stroke", "blue"); SelectRect.setAttribute("x", evt.clientX); SelectRect.setAttribute("y", evt.clientY); SelectRect.setAttribute("fill-opacity", 0.000001); SelectRect.setAttribute("width", "1"); SelectRect.setAttribute("height", "1"); SelectRect.setAttribute("pointer-events", "inherit"); //svgRoot.insertBefore(SelectRect,svgDoc.getElementById("Main_BKG").nextSibl ing); svgRoot.appendChild(SelectRect); bInDrawRect = true; } else if(SelectRect != null) { var selbbox = SelectRect.getBBox(); if((evt.clientX > selbbox.x) && (evt.clientX < (selbbox.x+selbbox.width)) && (evt.clientY > selbbox.y) && (evt.clientY < (selbbox.y+selbbox.height))) { //in SelectRect bMoveObjects = true; OrigX = evt.clientX; OrigY = evt.clientY; }//if else { //ouside of SelectRect, so now we //remove all items and put them back and our rect for(var pos = 0; pos < GroupArray.length;pos++) { var obj = GroupArray[pos]; ObjArray[ObjArray.length] = obj; GroupArray.splice(pos,1); pos--; MyGroupObjectsObj.removeChild(obj); svgRoot.insertBefore(obj, MyGroupObjectsObj); //testing obj.setAttribute("stroke","none"); }//for svgRoot.removeChild(SelectRect); SelectRect = null; }//else } } function MouseMove(evt) { evt.stopPropagation(); if(bInDrawRect) { var dx = Math.abs(evt.clientX - OrigX); var dy = Math.abs(evt.clientY - OrigY); SelectRect.setAttribute("width", dx); SelectRect.setAttribute("height", dy); } else if(bMoveObjects) { var dx = evt.clientX - OrigX; var dy = evt.clientY - OrigY; OrigX = evt.clientX; OrigY = evt.clientY; for(var pos = 0; pos < GroupArray.length;pos++) { var obj = GroupArray[pos]; switch(obj.tagName) { case "rect": var xpos = Number(obj.getAttribute("x")); var ypos = Number(obj.getAttribute("y")); xpos += dx; ypos += dy; obj.setAttribute("x", xpos); obj.setAttribute("y", ypos); break; case "circle": var xpos = Number(obj.getAttribute("cx")); var ypos = Number(obj.getAttribute("cy")); xpos += dx; ypos += dy; obj.setAttribute("cx", xpos); obj.setAttribute("cy", ypos); break; }//switch } var xpos = Number(SelectRect.getAttribute("x")); var ypos = Number(SelectRect.getAttribute("y")); xpos += dx; ypos += dy; SelectRect.setAttribute("x", xpos); SelectRect.setAttribute("y", ypos); } } function MouseUp(evt) { evt.stopPropagation(); if(bInDrawRect) { bInDrawRect = false; var selbbox = SelectRect.getBBox(); for(var pos = 0; pos < ObjArray.length;pos++) { var objbbox = ObjArray[pos].getBBox(); if((objbbox.x > selbbox.x) && ((objbbox.x+objbbox.width) < (selbbox.x+selbbox.width)) && (objbbox.y > selbbox.y) && ((objbbox.y+objbbox.height) < (selbbox.y+selbbox.height))) { var obj = ObjArray[pos]; GroupArray[GroupArray.length] = obj; ObjArray.splice(pos,1); pos--; svgRoot.removeChild(obj); MyGroupObjectsObj.appendChild(obj); //testing obj.setAttribute("stroke","black"); } }//for var gbbox = MyGroupObjectsObj.getBBox(); SelectRect.setAttribute("x", gbbox.x); SelectRect.setAttribute("y", gbbox.y); SelectRect.setAttribute("width", gbbox.width); SelectRect.setAttribute("height", gbbox.height); } bMoveObjects = false; } ]]> </script> <rect id="Main_BKG" x="0" y="0" width="100%" height="100%" stroke="none" fill="rgb(255,255,255)" /> <g id="SelectGroup" ></g> </svg> ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
