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

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

Javasscript event handling upon objects.

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

Contents

  Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 05:57 -0800
    Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 06:09 -0800
      Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:38 +0100
      Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-23 19:02 -0800
        Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:33 -0800
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:34 -0800
        Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-24 11:29 +0100
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:02 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:20 -0800
          Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-24 06:03 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 14:18 -0800
              Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 01:07 +0100
                Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 23:36 -0800
                  Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 10:35 +0100
    Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:27 +0100
    Re: Javasscript event handling upon objects. Aleksandro <aleksandro@gmx.com> - 2016-02-22 12:11 -0300
      Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 07:37 -0800
        Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 16:47 +0100
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 10:29 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:23 -0800
              Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:34 -0800
                Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 23:05 +0100

Page 1 of 2  [1] 2  Next page →

#29654 — Javasscript event handling upon objects.

Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?

[toc] | [next] | [standalone]

#29655

Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev jonas.t...@gmail.com:
> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?

If i create x,y,width,height objects in an array that i will print out as canvas rectangle.

Must i really check every array element, if the mouse click event cordinates are within the boundaries of x,y,width,height?

I did see someone wrote about a SVG library pros and cons and is it hard to learn?

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

#29657

jonas.thornvall@gmail.com wrote on 22 Feb 2016 in comp.lang.javascript:

> Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev
> jonas.t...@gmail.com: 

>> Why does not javascript objects have the possibility of adding event
>> handler properties like mouse click, drag, drop?

Why do you so often answer yourself?

This NG is about discussion with others.

> If i create x,y,width,height objects in an array that i will print out
> as canvas rectangle. 
> 
> Must i really check every array element

No, you can make a walk in the forrest instead.

> , if the mouse click event
> cordinates are within the boundaries of x,y,width,height?

You can make that walk anyway. 

> I did see someone wrote about a SVG library pros and cons and is it hard
> to learn? 

Seeing someone is not hard to learn, even during a walk in the forrest.

What exactly would you like to learn? Writing perhaps?
Writing during a walk in the forrest may have some "cons" indeed.

Perhaps next time you you wait posting till you are confident your Q
has reached maturity, and then decide if it is on-topic, logical and worth 
knowing an answer of?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#29672

On Monday, February 22, 2016 at 8:10:46 AM UTC-6, jonas.t...@gmail.com wrote:
> Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev jonas.t...@gmail.com:
> > Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> 
> If i create x,y,width,height objects in an array that i will print out as canvas rectangle.
> 
> Must i really check every array element, if the mouse click event cordinates are within the boundaries of x,y,width,height?

If you insist on using a canvas, then yes. You have to implement your own Scene Graph and your own event management.

In order to implement event management you have to implement collision detection between your mouse event and the objects in your scene. 

You do so by capturing the 2-dimensional position + event of the mouse against the canvas element and then translate into your data structure representing the scene. Hopefully you are using something like a quad-tree[1] or similar.

[1] https://en.wikipedia.org/wiki/Quadtree


> I did see someone wrote about a SVG library pros and cons and is it hard to learn?

It will be easier than trying to implement/reinvent it yourself using canvas APIs. The latter is far more low level.

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

#29677

Den onsdag 24 februari 2016 kl. 04:02:49 UTC+1 skrev Michael Haufe (TNO):
> On Monday, February 22, 2016 at 8:10:46 AM UTC-6, jonas.t...@gmail.com wrote:
> > Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev jonas.t...@gmail.com:
> > > Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> > 
> > If i create x,y,width,height objects in an array that i will print out as canvas rectangle.
> > 
> > Must i really check every array element, if the mouse click event cordinates are within the boundaries of x,y,width,height?
> 
> If you insist on using a canvas, then yes. You have to implement your own Scene Graph and your own event management.
> 
> In order to implement event management you have to implement collision detection between your mouse event and the objects in your scene. 
> 
> You do so by capturing the 2-dimensional position + event of the mouse against the canvas element and then translate into your data structure representing the scene. Hopefully you are using something like a quad-tree[1] or similar.
> 
> [1] https://en.wikipedia.org/wiki/Quadtree
> 
> 
> > I did see someone wrote about a SVG library pros and cons and is it hard to learn?
> 
> It will be easier than trying to implement/reinvent it yourself using canvas APIs. The latter is far more low level.

Well i did it not really but it work with rectangles, it have some minor quirks like it is not aware it is hold and not put on top. So basicly you can pick up  any number of elements and probably swap order of elements so you can bring them to front. But  picking them up, move them and relase them work.

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

#29678

Den onsdag 24 februari 2016 kl. 10:33:30 UTC+1 skrev jonas.t...@gmail.com:
> Den onsdag 24 februari 2016 kl. 04:02:49 UTC+1 skrev Michael Haufe (TNO):
> > On Monday, February 22, 2016 at 8:10:46 AM UTC-6, jonas.t...@gmail.com wrote:
> > > Den måndag 22 februari 2016 kl. 14:57:30 UTC+1 skrev jonas.t...@gmail.com:
> > > > Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> > > 
> > > If i create x,y,width,height objects in an array that i will print out as canvas rectangle.
> > > 
> > > Must i really check every array element, if the mouse click event cordinates are within the boundaries of x,y,width,height?
> > 
> > If you insist on using a canvas, then yes. You have to implement your own Scene Graph and your own event management.
> > 
> > In order to implement event management you have to implement collision detection between your mouse event and the objects in your scene. 
> > 
> > You do so by capturing the 2-dimensional position + event of the mouse against the canvas element and then translate into your data structure representing the scene. Hopefully you are using something like a quad-tree[1] or similar.
> > 
> > [1] https://en.wikipedia.org/wiki/Quadtree
> > 
> > 
> > > I did see someone wrote about a SVG library pros and cons and is it hard to learn?
> > 
> > It will be easier than trying to implement/reinvent it yourself using canvas APIs. The latter is far more low level.
> 
> Well i did it not really but it work with rectangles, it have some minor quirks like it is not aware it is hold and not put on top. So basicly you can pick up  any number of elements and probably swap order of elements so you can bring them to front. But  picking them up, move them and relase them work.

<!DOCTYPE html>
<html>
<head>
    <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
<div id="container" style="width:10000px">
<div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
<table border="2" bgcolor="beige" width=190><tr>
<td bgcolor="green" align="middle">
<form name=Edoit onSubmit="initanime(); return false;">
<input type=submit name="init_anime" value="Anim"></form></td>
<td bgcolor="red" align="middle">
<form name=Fdoit onSubmit="stopanime(); return false;">
<input type=submit name="stop_anime" value="haltA">
</form></td></tr></table>
</div>
<div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
<canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
</div>
</body>
</html>

<script type="text/javascript">
// GLOBAL VARIABLES
arr=new Array();
var refresh = 5;
var timer = 5;


function RandomSQ(){
k=0;min=30;max=830;
MX=Math.floor(Math.random() * (max - min)) + min;
MY=Math.floor(Math.random() * (max - min)) + min;
arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
k++;

while(k<64){
 elements=arr.length;
  dodot=true;
  MX=Math.floor(Math.random() * (max - min)) + min;
  MY=Math.floor(Math.random() * (max - min)) + min;
  for(i=0;i<elements;i++){ 
     testx=Math.abs(arr[i].rposX-MX);
     testy=Math.abs(arr[i].rposY-MY);
     if (testx<40 && testy<40){dodot=false;} 
  }

 if (dodot==true){
         arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
         k++;
  }
}

}



// Create array
function Myarray()
{
i=0;j=0;k=0;
MX=50;MY=50;
while(j<8){

while(i<8){
arr[k] = {hold:false,rposX:MX, rposY:MY, rwidth:10, rheigth:10,rcolor:"blue"};
i++;k++;
MX=MX+80;
//MY=MY-7;
}
MX=50;
MY=MY+80;

i=0;
j++;
}

}

//Get X,Y cordinates mouse position
function getPosition(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}

// Onload
function scriptload()
{
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
   initscript();
   listeners();
   startanime();
}

//Listenters logic
function listeners(){
myCanvas.addEventListener("mouseup", function(evt){
        mouseUp = getPosition(canvas, evt);
        message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
       }, false);
myCanvas.addEventListener("mousedown", function(evt){
        mouseDown = getPosition(canvas, evt);
        message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
       }, false);
myCanvas.addEventListener('mousemove', function(evt) {
       mousePos = getPosition(canvas, evt);
       message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
       }, false);
}



//Initiate values
function initscript()
{
hold=false;
message="";
mousePos = [0,0];
mouseDown = [0,0];
mouseUp=[0,0];
//Myarray();
RandomSQ();
SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
}

//Paint logic
function redraw()
{
           //Clear canvas
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           listener_logic();
           //Redraw canvas
           paint_out(canvas,message);
}

//How program behave on mouse click, drag, drop
function listener_logic(){

 for(t=0;t<64;t++){
if (mouseDown.x>=arr[t].rposX && mouseDown.x<=(arr[t].rposX+arr[t].rwidth) && mouseDown.y>=arr[t].rposY && mouseDown.y<=(arr[t].rposY+arr[t].rheigth)){
message = 'Got it:' + mousePos.x + ',' + mousePos.y;
arr[t].hold=true;

} else if (mouseUp.x>=arr[t].rposX && mouseUp.x<=(arr[t].rposX+arr[t].rwidth) && mouseUp.y>=arr[t].rposY && mouseUp.y<=(arr[t].rposY+arr[t].rheigth)){
message = 'Released it:' + mousePos.x + ',' + mousePos.y;
arr[t].hold=false;
}
}

}
//Paint out and redraw stuff on canvas
function paint_out(canvas, message)
{
  
   for(t=0;t<64;t++){
   if (arr[t].hold==true){arr[t].rposX=mousePos.x-10;arr[t].rposY=mousePos.y-10;  }
   }
   ctx.font = '18pt Calibri';
   ctx.fillStyle = 'black';
   ctx.fillText(message, 10, 25);
 
  for(t=0;t<64;t++){
   ctx.fillStyle = arr[t].rcolor;
  ctx.fillRect(arr[t].rposX, arr[t].rposY,arr[t].rwidth,arr[t].rheigth);
   }

}

//Start animation "form"
function startanime()
{
   refresh = setInterval(redraw, 150);

}

//Stop animation "form"
function stopanime()
{
   clearInterval(refresh);
}
</script> 

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

#29679

"Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 24 Feb 2016 in
comp.lang.javascript: 

>> I did see someone wrote about a SVG library pros and cons and is it
>> hard 
> to learn?
> 
> It will be easier than trying to implement/reinvent it yourself using
> canvas APIs. The latter is far more low level. 

Maybe so, but depicting only rectangles [even with rounded corners],
why not use bordered divs that are absolutely positioned?

Using libraries where html can do the trick, well ....

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#29680

Den onsdag 24 februari 2016 kl. 11:29:38 UTC+1 skrev Evertjan.:
> "Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 24 Feb 2016 in
> comp.lang.javascript: 
> 
> >> I did see someone wrote about a SVG library pros and cons and is it
> >> hard 
> > to learn?
> > 
> > It will be easier than trying to implement/reinvent it yourself using
> > canvas APIs. The latter is far more low level. 
> 
> Maybe so, but depicting only rectangles [even with rounded corners],
> why not use bordered divs that are absolutely positioned?
> 
> Using libraries where html can do the trick, well ....
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

I need to be able to move them around like this and put interconnecting links. And i will as soon i can figure out the formula for multiples of nodes needed for evenly distributed unique links.

Well first of multiple of nodes/edges for 3 linked is 4 that evens out.
And for a 4 linked uniform nodenetwork 9 nodes/edges is the first multiple that evens out. But what is the general formula?

http://jt.node365.se/nodes3.html

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

#29681

Den onsdag 24 februari 2016 kl. 12:03:02 UTC+1 skrev jonas.t...@gmail.com:
> Den onsdag 24 februari 2016 kl. 11:29:38 UTC+1 skrev Evertjan.:
> > "Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 24 Feb 2016 in
> > comp.lang.javascript: 
> > 
> > >> I did see someone wrote about a SVG library pros and cons and is it
> > >> hard 
> > > to learn?
> > > 
> > > It will be easier than trying to implement/reinvent it yourself using
> > > canvas APIs. The latter is far more low level. 
> > 
> > Maybe so, but depicting only rectangles [even with rounded corners],
> > why not use bordered divs that are absolutely positioned?
> > 
> > Using libraries where html can do the trick, well ....
> > 
> > -- 
> > Evertjan.
> > The Netherlands.
> > (Please change the x'es to dots in my emailaddress)
> 
> I need to be able to move them around like this and put interconnecting links. And i will as soon i can figure out the formula for multiples of nodes needed for evenly distributed unique links.
> 
> Well first of multiple of nodes/edges for 3 linked is 4 that evens out.
> And for a 4 linked uniform nodenetwork 9 nodes/edges is the first multiple that evens out. But what is the general formula?
> 
> http://jt.node365.se/nodes3.html

Sorry 9 nodes/"vertices" is the minimum that even outs for a 4-linked/edged network.

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

#29682

On Wednesday, February 24, 2016 at 4:29:38 AM UTC-6, Evertjan. wrote:
> "Michael Haufe (TNO)" wrote on 24 Feb 2016 in
> comp.lang.javascript: 
> 
> >> I did see someone wrote about a SVG library pros and cons and is it
> >> hard 
> > to learn?
> > 
> > It will be easier than trying to implement/reinvent it yourself using
> > canvas APIs. The latter is far more low level. 
> 
> Maybe so, but depicting only rectangles [even with rounded corners],
> why not use bordered divs that are absolutely positioned?
> 
> Using libraries where html can do the trick, well ....

Indeed.

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

#29683

Den onsdag 24 februari 2016 kl. 15:03:25 UTC+1 skrev Michael Haufe (TNO):
> On Wednesday, February 24, 2016 at 4:29:38 AM UTC-6, Evertjan. wrote:
> > "Michael Haufe (TNO)" wrote on 24 Feb 2016 in
> > comp.lang.javascript: 
> > 
> > >> I did see someone wrote about a SVG library pros and cons and is it
> > >> hard 
> > > to learn?
> > > 
> > > It will be easier than trying to implement/reinvent it yourself using
> > > canvas APIs. The latter is far more low level. 
> > 
> > Maybe so, but depicting only rectangles [even with rounded corners],
> > why not use bordered divs that are absolutely positioned?
> > 
> > Using libraries where html can do the trick, well ....
> 
> Indeed.

There seem to be trouble with my logic or the event handler. If you release mouse in the same spot as  you grabbed object it never release it.

It also seem to think that the mouse on quite a few places.

http://jt.node365.se/nodes4.html

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

#29684

jonas.thornvall@gmail.com wrote on 24 Feb 2016 in comp.lang.javascript:

> Den onsdag 24 februari 2016 kl. 15:03:25 UTC+1 skrev Michael Haufe
> (TNO): 
>> On Wednesday, February 24, 2016 at 4:29:38 AM UTC-6, Evertjan. wrote:
>> > "Michael Haufe (TNO)" wrote on 24 Feb 2016 in
>> > comp.lang.javascript: 
>> > 
>> > >> I did see someone wrote about a SVG library pros and cons and is
>> > >> it hard 
>> > > to learn?
>> > > 
>> > > It will be easier than trying to implement/reinvent it yourself
>> > > using canvas APIs. The latter is far more low level. 
>> > 
>> > Maybe so, but depicting only rectangles [even with rounded corners],
>> > why not use bordered divs that are absolutely positioned?
>> > 
>> > Using libraries where html can do the trick, well ....
>> 
>> Indeed.
> 
> There seem to be trouble with my logic or the event handler. If you
> release mouse in the same spot as  you grabbed object it never release
> it. 

Then it seems wise not to grab object!

Do you randomly pick a posting and respond with something unrelated?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#29685

Den torsdag 25 februari 2016 kl. 01:07:31 UTC+1 skrev Evertjan.:
> jonas.thornvall@gmail.com wrote on 24 Feb 2016 in comp.lang.javascript:
> 
> > Den onsdag 24 februari 2016 kl. 15:03:25 UTC+1 skrev Michael Haufe
> > (TNO): 
> >> On Wednesday, February 24, 2016 at 4:29:38 AM UTC-6, Evertjan. wrote:
> >> > "Michael Haufe (TNO)" wrote on 24 Feb 2016 in
> >> > comp.lang.javascript: 
> >> > 
> >> > >> I did see someone wrote about a SVG library pros and cons and is
> >> > >> it hard 
> >> > > to learn?
> >> > > 
> >> > > It will be easier than trying to implement/reinvent it yourself
> >> > > using canvas APIs. The latter is far more low level. 
> >> > 
> >> > Maybe so, but depicting only rectangles [even with rounded corners],
> >> > why not use bordered divs that are absolutely positioned?
> >> > 
> >> > Using libraries where html can do the trick, well ....
> >> 
> >> Indeed.
> > 
> > There seem to be trouble with my logic or the event handler. If you
> > release mouse in the same spot as  you grabbed object it never release
> > it. 
> 
> Then it seems wise not to grab object!
> 
> Do you randomly pick a posting and respond with something unrelated?
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

If the shoe fits.

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

#29686

jonas.thornvall@gmail.com wrote on 25 Feb 2016 in comp.lang.javascript:

>> Do you randomly pick a posting and respond with something unrelated?
> 
> If the shoe fits.

This is so impolite to this NG. 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#29656

jonas.thornvall@gmail.com wrote on 22 Feb 2016 in comp.lang.javascript:

> Why does not javascript objects have the possibility of adding event
> handler properties like mouse click, drag, drop? 

Because javascript-objects are not DOM-elements.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#29659

On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?

Javascript objects alone have nothing to do with UI interaction. If you
want your object to respond to it, bind said events of a visual element
to the methods you need.

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

#29661

Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
> > Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> 
> Javascript objects alone have nothing to do with UI interaction. If you
> want your object to respond to it, bind said events of a visual element
> to the methods you need.

Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it. 

The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?

Well i will post my example code soon, and you can tell if it is the wrong way to do it.

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

#29662

On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
> Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
>> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
>>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
>>
>> Javascript objects alone have nothing to do with UI interaction. If you
>> want your object to respond to it, bind said events of a visual element
>> to the methods you need.
>
> Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
>
> The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
>
> Well i will post my example code soon, and you can tell if it is the wrong way to do it.
>

Depends on what you are doing. If your array of rectangles is actually 
an array of DOM objects (for example a bunch of DIVs positioned inside 
some parent container element or perhaps SVG objects) then you could 
indeed register the listeners on those "rectangles".

The basic fact is that registering event handlers is defined on DOM 
elements.

If you have your own definition of rectangles you will still need a DOM 
object that you use to represent them on (draw) and that will give you 
events that you can map back to your rectangles. Something like a canvas 
would work fine...

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

#29663

Den måndag 22 februari 2016 kl. 16:47:58 UTC+1 skrev Silvio:
> On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
> > Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
> >> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
> >>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> >>
> >> Javascript objects alone have nothing to do with UI interaction. If you
> >> want your object to respond to it, bind said events of a visual element
> >> to the methods you need.
> >
> > Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
> >
> > The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
> >
> > Well i will post my example code soon, and you can tell if it is the wrong way to do it.
> >
> 
> Depends on what you are doing. If your array of rectangles is actually 
> an array of DOM objects (for example a bunch of DIVs positioned inside 
> some parent container element or perhaps SVG objects) then you could 
> indeed register the listeners on those "rectangles".
> 
> The basic fact is that registering event handlers is defined on DOM 
> elements.
> 
> If you have your own definition of rectangles you will still need a DOM 
> object that you use to represent them on (draw) and that will give you 
> events that you can map back to your rectangles. Something like a canvas 
> would work fine...

The logic with the eventhandlers somehow escape me why isnt't mouseup and mousedown booleans i get the object. But i fail to see how i can release it so maybe the approach is wrong?

<!DOCTYPE html>
<html>
<head>
    <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
<div id="container" style="width:10000px">
<div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
<table border="2" bgcolor="beige" width=190><tr>
<td bgcolor="green" align="middle">
<form name=Edoit onSubmit="initanime(); return false;">
<input type=submit name="init_anime" value="Anim"></form></td>
<td bgcolor="red" align="middle">
<form name=Fdoit onSubmit="stopanime(); return false;">
<input type=submit name="stop_anime" value="haltA">
</form></td></tr></table>
</div>
<div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
<canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
</div>
</body>
</html>

<script type="text/javascript">
// GLOBAL VARIABLES

var refresh = 5;
var timer = 5;

//Get X,Y cordinates mouse position
function getPosition(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}

// Onload
function scriptload()
{
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
   initscript();
   listeners();
   startanime();
}

//Listenters logic
function listeners(){
myCanvas.addEventListener("mouseup", function(evt){
        mouseUp = getPosition(canvas, evt);
        message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
       }, false);
myCanvas.addEventListener("mousedown", function(evt){
        mouseDown = getPosition(canvas, evt);
        message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
       }, false);
myCanvas.addEventListener('mousemove', function(evt) {
       mousePos = getPosition(canvas, evt);
       message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
       }, false);
}



//Initiate values
function initscript()
{
hold=false;
message="";
mousePos = [0,0];
mouseDown = [0,0];
mouseUp=[0,0]
SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
}

//Paint logic
function redraw()
{
           //Clear canvas
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           listener_logic();
           //Redraw canvas
           paint_out(canvas,message);
}

//How program behave on mouse click, drag, drop
function listener_logic(){
if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
message = 'Got it:' + mousePos.x + ',' + mousePos.y;
hold=!hold;
} 
}

//Paint out and redraw stuff on canvas
function paint_out(canvas, message)
{
   if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
   ctx.font = '18pt Calibri';
   ctx.fillStyle = 'black';
   ctx.fillText(message, 10, 25);
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
}

//Start animation "form"
function startanime()
{
   refresh = setInterval(redraw, 50);
}

//Stop animation "form"
function stopanime()
{
   clearInterval(refresh);
}
</script>

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

#29665

Den måndag 22 februari 2016 kl. 19:29:55 UTC+1 skrev jonas.t...@gmail.com:
> Den måndag 22 februari 2016 kl. 16:47:58 UTC+1 skrev Silvio:
> > On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
> > > Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
> > >> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
> > >>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> > >>
> > >> Javascript objects alone have nothing to do with UI interaction. If you
> > >> want your object to respond to it, bind said events of a visual element
> > >> to the methods you need.
> > >
> > > Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
> > >
> > > The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
> > >
> > > Well i will post my example code soon, and you can tell if it is the wrong way to do it.
> > >
> > 
> > Depends on what you are doing. If your array of rectangles is actually 
> > an array of DOM objects (for example a bunch of DIVs positioned inside 
> > some parent container element or perhaps SVG objects) then you could 
> > indeed register the listeners on those "rectangles".
> > 
> > The basic fact is that registering event handlers is defined on DOM 
> > elements.
> > 
> > If you have your own definition of rectangles you will still need a DOM 
> > object that you use to represent them on (draw) and that will give you 
> > events that you can map back to your rectangles. Something like a canvas 
> > would work fine...
> 
> The logic with the eventhandlers somehow escape me why isnt't mouseup and mousedown booleans i get the object. But i fail to see how i can release it so maybe the approach is wrong?
> 
> <!DOCTYPE html>
> <html>
> <head>
>     <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
> </head>
> <body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
> <div id="container" style="width:10000px">
> <div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
> <table border="2" bgcolor="beige" width=190><tr>
> <td bgcolor="green" align="middle">
> <form name=Edoit onSubmit="initanime(); return false;">
> <input type=submit name="init_anime" value="Anim"></form></td>
> <td bgcolor="red" align="middle">
> <form name=Fdoit onSubmit="stopanime(); return false;">
> <input type=submit name="stop_anime" value="haltA">
> </form></td></tr></table>
> </div>
> <div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
> <canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
> </div>
> <div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
> Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
> </div>
> </body>
> </html>
> 
> <script type="text/javascript">
> // GLOBAL VARIABLES
> 
> var refresh = 5;
> var timer = 5;
> 
> //Get X,Y cordinates mouse position
> function getPosition(canvas, evt) {
>         var rect = canvas.getBoundingClientRect();
>         return {
>           x: evt.clientX - rect.left,
>           y: evt.clientY - rect.top
>         };
> }
> 
> // Onload
> function scriptload()
> {
>    canvas = document.getElementById("myCanvas");
>    ctx = canvas.getContext("2d");
>    initscript();
>    listeners();
>    startanime();
> }
> 
> //Listenters logic
> function listeners(){
> myCanvas.addEventListener("mouseup", function(evt){
>         mouseUp = getPosition(canvas, evt);
>         message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
>        }, false);
> myCanvas.addEventListener("mousedown", function(evt){
>         mouseDown = getPosition(canvas, evt);
>         message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>        }, false);
> myCanvas.addEventListener('mousemove', function(evt) {
>        mousePos = getPosition(canvas, evt);
>        message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
>        }, false);
> }
> 
> 
> 
> //Initiate values
> function initscript()
> {
> hold=false;
> message="";
> mousePos = [0,0];
> mouseDown = [0,0];
> mouseUp=[0,0]
> SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
> }
> 
> //Paint logic
> function redraw()
> {
>            //Clear canvas
>            ctx.clearRect(0, 0, canvas.width, canvas.height);
>            listener_logic();
>            //Redraw canvas
>            paint_out(canvas,message);
> }
> 
> //How program behave on mouse click, drag, drop
> function listener_logic(){
> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
> hold=!hold;
> } 
> }
> 
> //Paint out and redraw stuff on canvas
> function paint_out(canvas, message)
> {
>    if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
>    ctx.font = '18pt Calibri';
>    ctx.fillStyle = 'black';
>    ctx.fillText(message, 10, 25);
>    ctx.fillStyle = "#FF0000";
>    ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
> }
> 
> //Start animation "form"
> function startanime()
> {
>    refresh = setInterval(redraw, 50);
> }
> 
> //Stop animation "form"
> function stopanime()
> {
>    clearInterval(refresh);
> }
> </script>

I just fail to see why and how mouseDown can still generate new cordinates when the mousebutton no longer pressed? And why isn't it a mousedown a boolean?
I understan mousepos

What is actually mouseup, mousedown and mousemove they do not seem to be variables? How can a listener for mouseDown keep generating cordinates after button released?

Or is the mouseDown.x and mouseDown.y same x and y and as in the other two eventhandlers?

myCanvas.addEventListener("mousedown", function(evt){
        mouseDown = getPosition(canvas, evt);
        message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
       }, false); 

if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
 message = 'Got it:' + mousePos.x + ',' + mousePos.y;
}

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

Page 1 of 2  [1] 2  Next page →

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

csiph-web