Why not LEFT_UP handler fired?

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

Hello guys and thanks in advance for your help.

My code is very simple as below.

When I click and release the mouse left button for the first time after program start, I can not see “left up” console message.

But from the second time, I can see “left up” console message.

Is there anyone who can explain why?

Thanks

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(movement) {

console.log(“left down”);

var handler1 = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler1.setInputAction(function(movement) {

console.info(“mouse move”);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler1.setInputAction(function(movement) {

console.warn(“left up”);

handler1.destroy();

}, Cesium.ScreenSpaceEventType.LEFT_UP);

}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

**3. Context. Why do you need to do this? We might know a better way to **

accomplish your goal.

I am making a polygon drawing tool.

After polygon is drawn, we need to modify the vertex of the polygon.

To do this, we select one vertex and drag and drop to the desired position.

Above code is used for this.

4. The Cesium version you’re using, your operating system and browser.

Cesium version 1.59.

windows 10

Chrome 75.0.3770.100

2

The reason you only see the left up on the second click, is because you only add that listener after the first click is done. You should restructure your event listeners so they’re all added together, and you can check based on the state of your application to take the right action when the events are fired. So this should work:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(movement) {

console.log(“left down”);

}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {

console.info(“mouse move”);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(movement) {

console.warn(“left up”);

}, Cesium.ScreenSpaceEventType.LEFT_UP);

``

3

Thank you.

But here is more correct answer.

viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(movement) {

console.log(“left down”);

var handler1 = new Cesium.ScreenSpaceEventHandler(scene.canvas);

/*

important

if following setting is not done, left up will be not fired.

left up listener will be fired only when _buttonDown[0] is true.

please refer cesium source handleMouseUp function

if(screenSpaceEventHandler._buttonDown[MouseButton.LEFT]){

cancelMouseEvent(screenSpaceEventHandler, ScreenSpaceEventType.LEFT_UP, ScreenSpaceEventType.LEFT_CLICK, event);

screenSpaceEventHandler._buttonDown[MouseButton.LEFT] = false;

}

*/

**Handler1._buttonDown[0] = true; **

handler1.setInputAction(function(movement) {

console.info(“mouse move”);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler1.setInputAction(function(movement) {

console.warn(“left up”);

handler1.destroy();

}, Cesium.ScreenSpaceEventType.LEFT_UP);

}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

4

I would advise against relying on private variables like that in production, since that implementation may change without a deprecation notice.