Skip to main content
Inspiring
May 27, 2016
Question

html mousemove outside panel event capture

  • May 27, 2016
  • 1 reply
  • 1089 views

I'm using the html examples from the SDK for the interface to my plugin. So far everything is great, I'm becoming quite the html 5 fan. But there is one issue that is really bugging that I can't seem to find a means to get around, not politely at any rate.

I have a parameter that moves in X and Y. When I select and drag it things move in X and Y, yahoo! Until I drag outside the panel and I stop getting the mousemove events. The mouseup event still works, but not the mousemove. I appreciate this is a known issue in html for many, but I was hoping someone else might have come up on this and remedied it.

I have considered sending a mouseleave event and then hijacking the event loop and using system calls to get the mouse position, but that is flaky and well let's be honest, rude. So has anyone come up with some more elegant?

As ever, any help/advice is very much appreciated.

Thanks

R

My code :

function my_mouse_down_event( event , param)

{

     mouse_event_target = param;

     mouse_event_last_pos_x = window.event.x;

     mouse_event_last_pos_y = window.event.y;

     //Set up the listeners for the Mouse Up and Mouse Move Events common to all

     document.addEventListener('mousemove', function(e){     my_mouse_up_event( event ); });

     document.addEventListener('mouseup', function(e){       my_mouse_up_event( event ); });

  }

function my_mouse_up_event( event )

  {

     mouse_event_target = 'none';

     //Note! The mouse position in the event is correct, negative values for outside the pane as expected

    

     //Remove the the listeners for the Mouse Up and Mouse Move Events common to all

     document.removeEventListener('mousemove', function(e){    my_mouse_move_event( event ); });

     document.removeEventListener('mouseup', function(e){      my_mouse_up_event( event ); });

}

function my_mouse_move_event( event , param)

{

     //Events here only received while the cursor is over my panel.

    if(mouse_event_target == 'none')

    {

      return;

    }

   var xChange = window.event.x - mouse_event_last_pos_x;

    //Get y up as positive

    var yChange = mouse_event_last_pos_y - window.event.y;

    

    var  paramData = X and Y change in mouse movement

     my_param_changed(paramData);

}

$("#xy_move").mousedown( function( event ) {     my_mouse_down_event( event , "xy_move"); });

This topic has been closed for replies.

1 reply

Inspiring
May 27, 2016

Have you looked at the Html5 PointerLock API:

Pointer Lock and First Person Shooter Controls - HTML5 Rocks

I haven't used it and I don't know if it works in Illustrator panels.

ralphmceAuthor
Inspiring
May 27, 2016

No, I've not looked at it.

I'll try it out and report back next week.

Thanks!

R

ralphmceAuthor
Inspiring
May 31, 2016

OK, it looks like the key elements of pointerlock have not been implemented in Ai. I'm going to see if I can find out any more from them.

In the meantime I did try 2 alternate approaches :

1. Use the mouse down and mouse events to kick a C++ thread into action or shut it down and use system calls to track mouse changes. Mouse events came in fine, but connecting to the pertinent callbacks in Ai caused issues, would rather not try and force things from outside expected threads, I would expect the ceiling to come down on me.

2. This one was rather fun, just because it was a sort of Rube Goldberg machine. I used the above method to get the mouse movement events then I sent those to the html panel which once it received them sent them back to the C++ plugin via the usual callbacks. And my God it worked! But its clunky, a bit slow and let's face it, madness.

I'll report back when I have more.

R