Mouse move event to Raphael paper

[PHPSessionID]

Hi,

Can we attach a mousemove event to Raphael paper

like 

var paper = Raphael(someDiv, width, height);

paper.mousemove (function(event){ ....}

TIA

[Adrian Dusa]

I think I have seen this question before, if I remember correctly it
involved creating a transparent rectangle over the whole paper and
attach the mousemove event to that rectangle, something like:

var paper = Raphael(someDiv, width, height);

var myrectangle = paper.rect(0, 0, yourWidth, yourHeight);
myrectangle.attr({fill: "none", stroke: "none"});
myrectangle.mousemove (function(event){...}

Hth,
Adrian

[PHPSessionID]

Hi Adrian,

Thanks for the info.

This is what I am doing now. I am setting the opacity of the rect to 0. But is there any way to get the mouse coordinates with respect to the Raphael element rect. Like 0,0 in the top corner. 

event.clientX shows only the coordinates with respect to document, so I have to minus the offset left of Raphael paper from this value.

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

[Adrian Dusa]

On Sat, Jul 16, 2011 at 21:01, PHPSessionID <phpses...@gmail.com> wrote:
> Hi Adrian,
> Thanks for the info.
> This is what I am doing now. I am setting the opacity of the rect to 0. But
> is there any way to get the mouse coordinates with respect to the Raphael
> element rect. Like 0,0 in the top corner.
> event.clientX shows only the coordinates with respect to document, so I have
> to minus the offset left of Raphael paper from this value.

Erhm... I wouldn't know, sorry (only a beginner myself).
Maybe someone else on the list...
Adrian

[Scott Conklin]

i did it the way you were doing it to and then tried this way and it seems to work. this way you don't need the invisible rect

 paper.canvas.onmousemove = function(e) { 

  e = e || window.event; 

         //show x coordinate of mouse in context of svg element only

console.log(e.offsetX);

} 

[Han]

.offsetX and .offsetY are, alas, unreliable cross-browser: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

If you use jQuery, which normalizes .pageX and .pageY, then you can just subtract the .offset().left and .offset().top from .pageX and .pageY, something like:

$(myrectangle.node).mousemove(function(e) {

  var offset = $(this).offset(), offsetX = e.pageX - offset.left, offsetY = e.pageY - offset.top;

  //do something with offsetX and offsetY

});

Note that .offset() in some browsers is fairly expensive, so you want to save it like so rather than calculating it twice.

Also, I prefer using a div, in some browsers there are weird quirks with attaching event handlers to SVG elements, like needing fill.

Han

[Clifford Heath]

On 17/07/2011, at 11:08 AM, Han wrote:
> .offsetX and .offsetY are, alas, unreliable cross-browser: http://www.quirksmode.org/dom/w3c_cssom.html#mousepos
>
> If you use jQuery, which normalizes .pageX and .pageY, then you can
> just subtract the .offset().left and .offset().top from .pageX
> and .pageY, something like:

It's a good idea, if you use jQuery, to also normalise the Raphael
events, by calling "e = jQuery.event.fix(e)" just inside the Raphael
event handler.

Clifford Heath.

[Han]

Luckily, if you do $(myrectangle.node).mousemove(...), you'll attach a jQuery event handler, which normalizes the event for you :)

Didn't know about jQuery.event.fix(), though, neat trick. Is it documented?

Han

[Clifford Heath]

On 18/07/2011, at 5:55 AM, Han wrote:
> Luckily, if you do $(myrectangle.node).mousemove(...), you'll attach
> a jQuery event handler, which normalizes the event for you :)

Yes, but that is problematic in many surprising cases, and
shouldn't be used unless absolutely necessary. Read the
archives, but the problem is that Raphael reserves the right
to (and sometimes does) recreate the .node, which loses
your handlers.

> Didn't know about jQuery.event.fix(), though, neat trick. Is it
> documented?

I don't know of any documentation for it. I found it while
searching for a solution for my jquery.key module, because
after fix()ing the event, a single-quote and a left-arrow event
look identical in Opera.

Clifford Heath.

[Han]

Didn't know that node isn't necessarily persistent, good to know.

Actually the single-quote and left-arrow only look identical on keypress. I've struggled with that before, and the bulletproof solution doesn't involve mucking about with keyCode vs charCode vs which, what you do is you check for control keys like the arrow keys, backspace etc on keydown, and on keypress just `String.fromCharCode(e.which)`, where `e.which` has been normalized by jQuery, see the first half of my internal docs. Note that this isn't bulletproof for international keyboards, which is why the link is to an old version of my internal docs, I eventually set a timeout on keypress for a procedure that checked the contents of the hidden textarea. But that's another story.

Han

[Scott Conklin]

thanks for the tips; i will use jquery.

>>  there are weird quirks with attaching event handlers to SVG elements, like needing fill.

what do you mean by "needing fill"? 

[Clifford Heath]

On 19/07/2011, at 5:53 AM, Han wrote:
> Actually the single-quote and left-arrow only look identical on
> keypress.

Check https://github.com/cjheath/jquery.key for a comprehensive solution
to these problems. You need to use originalEvent to find what existed
before jQuery normalised the event.

jquery.key handles distinguishing all printable and non-printable keys,
including auto-repeat. It's quite hard, it took three days of
exploring quirksmode
to get it right.

Clifford Heath

[sanojian]

Take a look at my simple drawing tool example for a solution that
doesn't require jQuery. Make sure you set a "fill" on the background
and leave it slightly opaque (opacity: 0.01) or it will not capture
mouse events.

http://www.irunmywebsite.com/raphael/drawtool2.php

On Jul 19, 12:19 am, Clifford Heath <clifford.he...@gmail.com> wrote:
> On 19/07/2011, at 5:53 AM, Han wrote:
>
> > Actually the single-quote and left-arrow only look identical on  
> > keypress.
>

> Checkhttps://github.com/cjheath/jquery.keyfor a comprehensive solution

[Dmitry Baranovskiy]

Why not to leave zero opacity?

2011/7/19 sanojian <sano...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Raphaël" group.
To post to this group, send an email to raph...@googlegroups.com.
To unsubscribe from this group, send email to raphaeljs+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/raphaeljs?hl=en-GB.

--
Best regards,
Dmitry Baranovskiy
http://dmitry.baranovskiy.com

[sanojian]

Oh, you are correct zero opacity works just fine. The fill is the
important thing.

On Jul 19, 9:52 am, Dmitry Baranovskiy <dmitry.baranovs...@gmail.com>
wrote:

> Why not to leave zero opacity?
>

> 2011/7/19 sanojian <sanoj...@gmail.com>

>
>
>
> > Take a look at my simple drawing tool example for a solution that
> > doesn't require jQuery.  Make sure you set a "fill" on the background
> > and leave it slightly opaque (opacity: 0.01) or it will not capture
> > mouse events.
>
> >http://www.irunmywebsite.com/raphael/drawtool2.php
>
> > On Jul 19, 12:19 am, Clifford Heath <clifford.he...@gmail.com> wrote:
> > > On 19/07/2011, at 5:53 AM, Han wrote:
>
> > > > Actually the single-quote and left-arrow only look identical on
> > > > keypress.
>

> > > Checkhttps://github.com/cjheath/jquery.keyfora comprehensive solution

[hermannin...@gmail.com]

thanks!