Might be better to use something like pastebin to share code samples: http://pastebin.com/
<http://pastebin.com/>Jake On Thu, Nov 25, 2010 at 1:28 PM, Chris Peto <svg...@resource-solutions.de>wrote: > > > 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> > > > [Non-text portions of this message have been removed] ------------------------------------ ----- 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/
