6 Replies Latest reply on May 31, 2016 11:53 AM by LeoTaro

    html mousemove outside panel event capture

    ralphmce Level 1

      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"); });

        • 1. Re: html mousemove outside panel event capture
          LeoTaro Level 4

          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.

          • 2. Re: html mousemove outside panel event capture
            ralphmce Level 1

            No, I've not looked at it.

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

            Thanks!

            R

            • 3. Re: html mousemove outside panel event capture
              ralphmce Level 1

              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

              • 4. Re: html mousemove outside panel event capture
                LeoTaro Level 4

                ralphmce wrote:

                 

                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.

                That doesn't surprise me. It would surprise me if you managed to get any information out of Adobe. Do you have a contact?

                 

                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.

                Two other approaches would be:

                 

                1. Hook into the message processing loop of AI to pick up the mouse move messages.

                2. Use a timer to periodically check the mouse location.

                 

                Whichever method you use, you should ensure that the mouse messages still get to their original destination.

                 

                Why do you need to get the mouse move messages outside of your window anyway.

                • 5. Re: html mousemove outside panel event capture
                  ralphmce Level 1

                  I have a contact at Adobe, will wait an see what they say.

                   

                  As to why I need the mouse events, its for a parameter movement. As the user selects an X/Y controller I want them to be able to continue moving in X/Y until they want to stop, and not have restart their movement each time they come to the edge of the panel, that would be really lame.

                   

                  Is there a known point to hook into the processing loop? I didn't seem to see any events I could hook into, but may have missed a trick.

                   

                  Thanks again, *really* appreciate the help!

                  R

                  • 6. Re: html mousemove outside panel event capture
                    LeoTaro Level 4

                    To hook into the messaging loop you need to use platform specific code. I have done it before in test plugins, but have never done it in a plugin that has been released. Like your background thread, it is probably not a very good idea.