Is it possible to get the original DOM event?

CesiumJS
1

I have added an input handler looking for MOUSE_MOVE events. I am getting the events. However, the only information I am receiving is the position of the cursor. I would like to be able to get the original DOM event which trigger the mouse move because I need to check to see if the mouse button is down.

I can use document.body.matches(':active') to test, but this seems like it is overkill when the information is available in the original event.

But, I am not sure how to get to that original event. Is it possible?

3

I have a sandcastle

I have attached a MOUSE_MOVE input action.

If I am correct, the MOUSE_MOVE input action expects a function that can receive a Cesium.ScreenSpaceEventHandler.MotionEvent. I do not see an event property here and when I try to log an event property, it tells me it is undefined.

Have I missed something? Can you provide a corrected sandcastle?

I am guessing you thought I was referring to Element: mousemove event - Web APIs | MDN, but am not. However, I assume that Cesium is using these Dom events. I just need to be able to get access to the original Dom event. But, I do not see how.

5

muhammad_shaoib_sale,

As the sandcastle I provided shows, the event parameter passed in does not contain the original DOM event object.

6

you need to add event listeners to the gl rendering context for the canvas object which holds the cesium instance, not cesium itself. I have an example of handling mouse dragging that can be found here: webGraphicsEngine/mouseControls.ts at main · shanebenlolo/webGraphicsEngine · GitHub

This example concerns itself with rotating a webgl cube, but the core functionality of checking for if a mouse is dragging should satisfy whatever requirements you’re trying to fulfill. Let me know if you have any questions.

7

@shane_benlolo, thank you. I think I will stick with document.body.matches(':active') for now.

It seems a bit extreme to go down into the webgl layer for this purpose.

9

To test this, I tried

handler.setInputAction((event) => {
  console.log( 'mouse move', event );
  console.log( 'mouse move', event.event );
  console.log( 'mouse move', event.originalEvent );

  
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

and the logging of originalEvent is undefined.

Can you provide a sandcastle or some code to demonstrate your solution? What did I do wrong?

10

Hi @eric-g-97477, if you are wanting to do something with a mouse motion while the button is down, could you use the DRAG events instead? See CameraEventType.

14

Check this : ScreenSpaceEventHandler - Cesium Documentation

In case of MOUSE_MOVE you’re waiting a Cesium.ScreenSpaceEventHandler.MotionEvent, so arguments are coordinates.

On my app, I can use window.event. But it is due to react (Resium ?) , I think, not cesium .