Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #32819 > unrolled thread

Logic and code for programming a drawtook to make connected nodes.

Back to article view | Back to comp.lang.javascript

Contents

  Logic and code for programming a drawtook to make connected nodes. jonas.thornvall@gmail.com - 2017-03-20 00:35 -0700
    Re: Logic and code for programming a drawtook to make connected nodes. jonas.thornvall@gmail.com - 2017-03-20 02:38 -0700
      Re: Logic and code for programming a drawtook to make connected nodes. jonas.thornvall@gmail.com - 2017-03-24 18:30 -0700

#32819 — Logic and code for programming a drawtook to make connected nodes.

I was trying to program a simple draw program that put out nodes and connect them with double chained links, it will break the chain it draw by presssing CTRL and of course you must be able to connect it to a node already there. Also you must be able to start draw from a node already there.

Probably i should done some form of case study and started out there, because the amount of spagetti code this "simple?" task generated is unfatoomable.
Either i started out in wrong end, or the logic behind the linking of nodetree is more complex than i really understand.

I started without any real idea where it should end. Maybe there acutally is more cases than ome recognize? If anyone have an idea howto do this in a more ***structured*** and coherent manner i am all ears. Drawtool is the function called when draw start.

SPAGETTI WARNING!!!

http://anybase.co.nf

function drawTool(){
  message2="DRAWTOOL SELECTED";
  justdraw=true;
  overlapping=false;
  for(var b=0;b<arr.length;b++){
    if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
     {m=b;justdraw=false;selectednodeoverlap();} else {}
   }
  if (justdraw==true) {drawLine();justdraw=false;}
}

function selectednodeoverlap() {
    if (drawstart == true) {message2="FOCUSED="+m; oldnode=m; drawstart=false;} else {
      inarray = arr[m].nodelinks.indexOf(oldnode);
      if (inarray == -1 && m!=oldnode) {
        arr[oldnode].nodelinks.push(m);
        arr[m].nodelinks.push(oldnode);
        drawstart=true;
      }
    }
     out_update();
}



function drawLine(){
      if (drawstart==true){
        standardcolor = rndColor();
        m = arr.length;
            arr[m] = {
            nodelinks: [],
            hold: false,
            rposX: mousePos.x,
            rposY: mousePos.y,
            rwidth: 10,
            rheigth: 10,
            rcolor: standardcolor,
            bcolor: standardcolor,
            print: true
        };
        nodes = m + 1;
        document.NoNodes.nodeval.value = nodes;
        drawstart=false;
        out_update();
      } else if (drawstart==false) {
      standardcolor = rndColor();
      m = arr.length;
      check_overlapping();
      if(overlapping==false){
      arr[m] = {
          nodelinks: [],
          hold: false,
          rposX: mousePos.x,
          rposY: mousePos.y,
          rwidth: 10,
          rheigth: 10,
          rcolor: standardcolor,
          bcolor: standardcolor,
          print: true
      };
      printnode[m] = m;
      if(m>0){
        inarray = arr[m].nodelinks.indexOf(m-1);
        if (inarray == -1) {
        arr[m].nodelinks.push(m-1);
        arr[m-1].nodelinks.push(m);
        oldnode=m;
       }
      }
      nodes = m + 1;
      document.NoNodes.nodeval.value = nodes;
      out_update();
    }
}
}

function check_overlapping(){
  //alert("checking");
  overlapping=false;
  for(var b=0;b<arr.length;b++){
    if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
     {
       overlapping=true;
       inarray = arr[b].nodelinks.indexOf(m-1);
       if (inarray == -1) {
       arr[m-1].nodelinks.push(b);
       arr[b].nodelinks.push(m-1);
       m=oldnode;
       out_update();
     }
  }
}
return overlapping;
}

[toc] | [next] | [standalone]

#32820

Den måndag 20 mars 2017 kl. 08:36:03 UTC+1 skrev jonas.t...@gmail.com:
> I was trying to program a simple draw program that put out nodes and connect them with double chained links, it will break the chain it draw by presssing CTRL and of course you must be able to connect it to a node already there. Also you must be able to start draw from a node already there.
> 
> Probably i should done some form of case study and started out there, because the amount of spagetti code this "simple?" task generated is unfatoomable.
> Either i started out in wrong end, or the logic behind the linking of nodetree is more complex than i really understand.
> 
> I started without any real idea where it should end. Maybe there acutally is more cases than ome recognize? If anyone have an idea howto do this in a more ***structured*** and coherent manner i am all ears. Drawtool is the function called when draw start.
> 
> SPAGETTI WARNING!!!
> 
> http://anybase.co.nf
> 
> function drawTool(){
>   message2="DRAWTOOL SELECTED";
>   justdraw=true;
>   overlapping=false;
>   for(var b=0;b<arr.length;b++){
>     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
>      {m=b;justdraw=false;selectednodeoverlap();} else {}
>    }
>   if (justdraw==true) {drawLine();justdraw=false;}
> }
> 
> function selectednodeoverlap() {
>     if (drawstart == true) {message2="FOCUSED="+m; oldnode=m; drawstart=false;} else {
>       inarray = arr[m].nodelinks.indexOf(oldnode);
>       if (inarray == -1 && m!=oldnode) {
>         arr[oldnode].nodelinks.push(m);
>         arr[m].nodelinks.push(oldnode);
>         drawstart=true;
>       }
>     }
>      out_update();
> }
> 
> 
> 
> function drawLine(){
>       if (drawstart==true){
>         standardcolor = rndColor();
>         m = arr.length;
>             arr[m] = {
>             nodelinks: [],
>             hold: false,
>             rposX: mousePos.x,
>             rposY: mousePos.y,
>             rwidth: 10,
>             rheigth: 10,
>             rcolor: standardcolor,
>             bcolor: standardcolor,
>             print: true
>         };
>         nodes = m + 1;
>         document.NoNodes.nodeval.value = nodes;
>         drawstart=false;
>         out_update();
>       } else if (drawstart==false) {
>       standardcolor = rndColor();
>       m = arr.length;
>       check_overlapping();
>       if(overlapping==false){
>       arr[m] = {
>           nodelinks: [],
>           hold: false,
>           rposX: mousePos.x,
>           rposY: mousePos.y,
>           rwidth: 10,
>           rheigth: 10,
>           rcolor: standardcolor,
>           bcolor: standardcolor,
>           print: true
>       };
>       printnode[m] = m;
>       if(m>0){
>         inarray = arr[m].nodelinks.indexOf(m-1);
>         if (inarray == -1) {
>         arr[m].nodelinks.push(m-1);
>         arr[m-1].nodelinks.push(m);
>         oldnode=m;
>        }
>       }
>       nodes = m + 1;
>       document.NoNodes.nodeval.value = nodes;
>       out_update();
>     }
> }
> }
> 
> function check_overlapping(){
>   //alert("checking");
>   overlapping=false;
>   for(var b=0;b<arr.length;b++){
>     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
>      {
>        overlapping=true;
>        inarray = arr[b].nodelinks.indexOf(m-1);
>        if (inarray == -1) {
>        arr[m-1].nodelinks.push(b);
>        arr[b].nodelinks.push(m-1);
>        m=oldnode;
>        out_update();
>      }
>   }
> }
> return overlapping;
> }

There was even more cases leading to more spagetti, but now i am quite sure it handle every case correct.



function drawTool(){
  message2="DRAWTOOL SELECTED";
  justdraw=true;
  overlapping=false;
  for(var b=0;b<arr.length;b++){
    if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
     {m=b;justdraw=false;selectednodeoverlap();} else {}
   }
  if (justdraw==true) {drawLine();justdraw=false;}
}

function drawLine(){
      if (drawstart==true){
        standardcolor = rndColor();
        m = arr.length;
            arr[m] = {
            nodelinks: [],
            hold: false,
            rposX: mousePos.x,
            rposY: mousePos.y,
            rwidth: 10,
            rheigth: 10,
            rcolor: standardcolor,
            bcolor: standardcolor,
            print: true
        };
        nodes = m + 1;
        document.NoNodes.nodeval.value = nodes;
        drawstart=false;
        out_update();
      } else if (drawstart==false) {
      standardcolor = rndColor();
      m = arr.length;
      check_overlapping();
      if(overlapping==false){
      arr[m] = {
          nodelinks: [],
          hold: false,
          rposX: mousePos.x,
          rposY: mousePos.y,
          rwidth: 10,
          rheigth: 10,
          rcolor: standardcolor,
          bcolor: standardcolor,
          print: true
      };
      printnode[m] = m;
      if(m>0 && focus==false){
        inarray = arr[m].nodelinks.indexOf(m-1);
        if (inarray == -1) {
        arr[m].nodelinks.push(m-1);
        arr[m-1].nodelinks.push(m);
        oldnode=m;
       }    else if (m>0 && focus==true){
            inarray = arr[m].nodelinks.indexOf(oldnode);
        if (inarray == -1) {
        arr[m].nodelinks.push(oldnode);
        arr[oldnode].nodelinks.push(m);
        focus=false;
        drawstart=true;
      }
      }
      }
      nodes = m + 1;
      document.NoNodes.nodeval.value = nodes;
      out_update();
    }
}
}

function selectednodeoverlap() {
    if (drawstart == true) { focus=true;message2="FOCUSED="+m; oldnode=m; drawstart=false;} else {
      inarray = arr[m].nodelinks.indexOf(oldnode);
      if (inarray == -1 && m!=oldnode) {
        arr[oldnode].nodelinks.push(m);
        arr[m].nodelinks.push(oldnode);
        drawstart=true;
        focus=false;
      }
    }
     out_update();
}

function check_overlapping(){
  //alert("checking");
  overlapping=false;
  for(var b=0;b<arr.length;b++){
    if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
     {
       overlapping=true;
       inarray = arr[b].nodelinks.indexOf(m-1);
       if (inarray == -1) {
       arr[m-1].nodelinks.push(b);
       arr[b].nodelinks.push(m-1);
       m=oldnode;
       out_update();
     }
  }
}
return overlapping;
}

[toc] | [prev] | [next] | [standalone]

#32844

Den måndag 20 mars 2017 kl. 10:38:46 UTC+1 skrev jonas.t...@gmail.com:
> Den måndag 20 mars 2017 kl. 08:36:03 UTC+1 skrev jonas.t...@gmail.com:
> > I was trying to program a simple draw program that put out nodes and connect them with double chained links, it will break the chain it draw by presssing CTRL and of course you must be able to connect it to a node already there. Also you must be able to start draw from a node already there.
> > 
> > Probably i should done some form of case study and started out there, because the amount of spagetti code this "simple?" task generated is unfatoomable.
> > Either i started out in wrong end, or the logic behind the linking of nodetree is more complex than i really understand.
> > 
> > I started without any real idea where it should end. Maybe there acutally is more cases than ome recognize? If anyone have an idea howto do this in a more ***structured*** and coherent manner i am all ears. Drawtool is the function called when draw start.
> > 
> > SPAGETTI WARNING!!!
> > 
> > http://anybase.co.nf
> > 
> > function drawTool(){
> >   message2="DRAWTOOL SELECTED";
> >   justdraw=true;
> >   overlapping=false;
> >   for(var b=0;b<arr.length;b++){
> >     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
> >      {m=b;justdraw=false;selectednodeoverlap();} else {}
> >    }
> >   if (justdraw==true) {drawLine();justdraw=false;}
> > }
> > 
> > function selectednodeoverlap() {
> >     if (drawstart == true) {message2="FOCUSED="+m; oldnode=m; drawstart=false;} else {
> >       inarray = arr[m].nodelinks.indexOf(oldnode);
> >       if (inarray == -1 && m!=oldnode) {
> >         arr[oldnode].nodelinks.push(m);
> >         arr[m].nodelinks.push(oldnode);
> >         drawstart=true;
> >       }
> >     }
> >      out_update();
> > }
> > 
> > 
> > 
> > function drawLine(){
> >       if (drawstart==true){
> >         standardcolor = rndColor();
> >         m = arr.length;
> >             arr[m] = {
> >             nodelinks: [],
> >             hold: false,
> >             rposX: mousePos.x,
> >             rposY: mousePos.y,
> >             rwidth: 10,
> >             rheigth: 10,
> >             rcolor: standardcolor,
> >             bcolor: standardcolor,
> >             print: true
> >         };
> >         nodes = m + 1;
> >         document.NoNodes.nodeval.value = nodes;
> >         drawstart=false;
> >         out_update();
> >       } else if (drawstart==false) {
> >       standardcolor = rndColor();
> >       m = arr.length;
> >       check_overlapping();
> >       if(overlapping==false){
> >       arr[m] = {
> >           nodelinks: [],
> >           hold: false,
> >           rposX: mousePos.x,
> >           rposY: mousePos.y,
> >           rwidth: 10,
> >           rheigth: 10,
> >           rcolor: standardcolor,
> >           bcolor: standardcolor,
> >           print: true
> >       };
> >       printnode[m] = m;
> >       if(m>0){
> >         inarray = arr[m].nodelinks.indexOf(m-1);
> >         if (inarray == -1) {
> >         arr[m].nodelinks.push(m-1);
> >         arr[m-1].nodelinks.push(m);
> >         oldnode=m;
> >        }
> >       }
> >       nodes = m + 1;
> >       document.NoNodes.nodeval.value = nodes;
> >       out_update();
> >     }
> > }
> > }
> > 
> > function check_overlapping(){
> >   //alert("checking");
> >   overlapping=false;
> >   for(var b=0;b<arr.length;b++){
> >     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
> >      {
> >        overlapping=true;
> >        inarray = arr[b].nodelinks.indexOf(m-1);
> >        if (inarray == -1) {
> >        arr[m-1].nodelinks.push(b);
> >        arr[b].nodelinks.push(m-1);
> >        m=oldnode;
> >        out_update();
> >      }
> >   }
> > }
> > return overlapping;
> > }
> 
> There was even more cases leading to more spagetti, but now i am quite sure it handle every case correct.
> 
> 
> 
> function drawTool(){
>   message2="DRAWTOOL SELECTED";
>   justdraw=true;
>   overlapping=false;
>   for(var b=0;b<arr.length;b++){
>     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
>      {m=b;justdraw=false;selectednodeoverlap();} else {}
>    }
>   if (justdraw==true) {drawLine();justdraw=false;}
> }
> 
> function drawLine(){
>       if (drawstart==true){
>         standardcolor = rndColor();
>         m = arr.length;
>             arr[m] = {
>             nodelinks: [],
>             hold: false,
>             rposX: mousePos.x,
>             rposY: mousePos.y,
>             rwidth: 10,
>             rheigth: 10,
>             rcolor: standardcolor,
>             bcolor: standardcolor,
>             print: true
>         };
>         nodes = m + 1;
>         document.NoNodes.nodeval.value = nodes;
>         drawstart=false;
>         out_update();
>       } else if (drawstart==false) {
>       standardcolor = rndColor();
>       m = arr.length;
>       check_overlapping();
>       if(overlapping==false){
>       arr[m] = {
>           nodelinks: [],
>           hold: false,
>           rposX: mousePos.x,
>           rposY: mousePos.y,
>           rwidth: 10,
>           rheigth: 10,
>           rcolor: standardcolor,
>           bcolor: standardcolor,
>           print: true
>       };
>       printnode[m] = m;
>       if(m>0 && focus==false){
>         inarray = arr[m].nodelinks.indexOf(m-1);
>         if (inarray == -1) {
>         arr[m].nodelinks.push(m-1);
>         arr[m-1].nodelinks.push(m);
>         oldnode=m;
>        }    else if (m>0 && focus==true){
>             inarray = arr[m].nodelinks.indexOf(oldnode);
>         if (inarray == -1) {
>         arr[m].nodelinks.push(oldnode);
>         arr[oldnode].nodelinks.push(m);
>         focus=false;
>         drawstart=true;
>       }
>       }
>       }
>       nodes = m + 1;
>       document.NoNodes.nodeval.value = nodes;
>       out_update();
>     }
> }
> }
> 
> function selectednodeoverlap() {
>     if (drawstart == true) { focus=true;message2="FOCUSED="+m; oldnode=m; drawstart=false;} else {
>       inarray = arr[m].nodelinks.indexOf(oldnode);
>       if (inarray == -1 && m!=oldnode) {
>         arr[oldnode].nodelinks.push(m);
>         arr[m].nodelinks.push(oldnode);
>         drawstart=true;
>         focus=false;
>       }
>     }
>      out_update();
> }
> 
> function check_overlapping(){
>   //alert("checking");
>   overlapping=false;
>   for(var b=0;b<arr.length;b++){
>     if (mousePos.x >= arr[b].rposX && mousePos.x <= (arr[b].rposX + arr[b].rwidth) && mousePos.y >= arr[b].rposY && mousePos.y <= (arr[b].rposY + arr[b].rheigth))
>      {
>        overlapping=true;
>        inarray = arr[b].nodelinks.indexOf(m-1);
>        if (inarray == -1) {
>        arr[m-1].nodelinks.push(b);
>        arr[b].nodelinks.push(m-1);
>        m=oldnode;
>        out_update();
>      }
>   }
> }
> return overlapping;
> }

Spagetti resist solution but a very nice group reshaper of nodes, did just happen. The mirroring effect almost create the illusion of 3D tranformations.

http://anybase.co.nf/

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web