Loading ...
Sorry, an error occurred while loading the content.

RE: [svg-developers] Drag more then ONE objects together or groups

Expand Messages
  • Chris Peto
    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
    Message 1 of 10 , Nov 25, 2010
    • 0 Attachment
      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>
    • Jacob Beard
      Might be better to use something like pastebin to share code samples: http://pastebin.com/ Jake ... [Non-text portions of this message
      Message 2 of 10 , Nov 25, 2010
      • 0 Attachment
        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 <svgdev@...>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]
      • Chris Peto
        Hi, Actually, I put it on my site at: http://www.resource-solutions.de/svg/select/groupping.svg Cheers, Chris ... From: svg-developers@yahoogroups.com
        Message 3 of 10 , Nov 25, 2010
        • 0 Attachment
          Hi,

          Actually, I put it on my site at:

          http://www.resource-solutions.de/svg/select/groupping.svg

          Cheers,
          Chris

          -----Original Message-----
          From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com]
          On Behalf Of Jacob Beard
          Sent: Donnerstag, 25. November 2010 16:46
          To: svg-developers@yahoogroups.com
          Subject: Re: [svg-developers] Drag more then ONE objects together or groups

          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
          <svgdev@...>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-unsubscribe@yahoogroups.com
          -or-
          visit http://groups.yahoo.com/group/svg-developers and click "edit my
          membership"
          ----Yahoo! Groups Links
        • th_w@ymail.com
          ... I think it s still good to copy the code into the post because it will be available in the mail archives. Merely linked code could become inaccessible. By
          Message 4 of 10 , Nov 25, 2010
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, Jacob Beard <jbeard4@...> wrote:
            >
            > Might be better to use something like pastebin to share code samples:

            I think it's still good to copy the code into the post because it will be available in the mail archives. Merely linked code could become inaccessible.

            By the way, thanks for the select & drag example!

            Thomas W.

            P.S.: Due to a problem with the Yahoo Groups Web interface I couldn't post this as a reply to the original message. Sorry if this disorganises the thread in your mail reader.
          Your message has been successfully submitted and would be delivered to recipients shortly.