I am trying to create a mouse and keyboard event handler that will work in parallel with the CesiumViewerWidget onObjectSelected click event handling. I can create the keyboard event handler just fine and it works, but the CesiumViewerWidget then fails to execute onObjectSelected code. What is the best way to have them both work or is this something that can't be done?
Thanks for any tips and/or answers.
- Paul C
How are you creating your mouse handler? You could try manually calling widget._handleLeftClick(e) from inside your left click handler, to trigger the normal object selection code.
Thanks for the suggestion Scott. I am using the jQuery way to add a click event handler : \(document\)\.click\(function\(e\) \{
// custom code here\.\.\.
\}\);
I am also using using (document).keyup and $(document).keydown to try to detect special keyboard modifiers (like shift and ctrl).
I just tried to add the widget code to this click function like you suggested, but it still doesn't select the object on the Cesium globe. Any other ideas?
- Paul
It seems to be working for me. I took the Cesium Viewer Widget.html Sandcastle example, and added to the :
and changed the script to:
require([
‘Cesium’, ‘Widgets/Dojo/CesiumViewerWidget’, ‘dojo/io-query’
], function(
Cesium, CesiumViewerWidget, ioQuery) {
“use strict”;
$(document).click(function(e) {
console.log(‘jquery click’);
});
var widget = new CesiumViewerWidget({
endUserOptions : {
source : ‘…/…/CesiumViewer/Gallery/simple.czml’
},
onObjectSelected : function(selectedObject) {
console.log('onObjectSelected ’ + (selectedObject && selectedObject.dynamicObject && selectedObject.dynamicObject.id));
}
});
widget.placeAt(‘cesiumContainer’);
widget.startup();
Sandcastle.finishedLoading();
});
When I click on the globe or on primitives in the scene, I get both ‘jquery click’ and ‘onObjectSelected’ printed to my console.
One thing I did notice while working on this: the default “centerCameraOnPick” behavior is removed when you replace the onObjectSelected function like this. If you want to restore that, you can call “widget.centerCameraOnPick(selectedObject)” from within your onObjectSelected handler function.
Thanks for the reply Scott. I guess my issue involves a bit more than just getting click and onObjectSelected to fire at the same time. I would like to have combo keys (i.e. ALT + click) being picked up by Cesium with the click event and being detected in onObjectSelected. If I hold down ALT and click, there is a problem that ripples up to Scene.js and it is because when ALT is held down at the same time as a click is sent, the window.position is undefined which causes an error in the widget _handleLeftClick due to expecting the window.position to be present. I'm still trying to figure out why holding down ALT changes the click event to not include that information, but it seems it is causing issues with onObjectSelected/_handleLeftClick in CesiumViewerWidget. I've noticed in the Cesium documentation there is a KeyboardEventModifier, but I'm unsure how to integrate that into onObjectSelected or $(document).click ();
Any insights?
Thanks again for your help so far.
- Paul C.
OK, I think the error in _handleLeftClick is a result of my earlier advice to call it manually. Now that I understand the code better, I don’t think that’s actually necessary, so I’d suggest removing it. It turns out that _handleLeftClick is designed to accept a different type of event than jQuery, so they’re not directly compatible.
If I understand your goal, you want to make alt-left click trigger object selection. If you open up CesiumViewerWidget, and find
var handler = new ScreenSpaceEventHandler(canvas);
Below you’ll see the default mouse bindings. In particular,
handler.setInputAction(lang.hitch(this, ‘_handleLeftClick’), ScreenSpaceEventType.LEFT_CLICK);
This binds left click (with no modifiers) to the _handleLeftClick function. If you want to switch to alt-left click, you can add KeyboardEventModifier.ALT as the third parameter (you’ll have to add KeyboardEventModifier to the require list at the top). Or, if you want to support both, you could call setInputAction twice.
Unfortunately, it looks like CesiumViewerWidget doesn’t expose this handler externally, which is one of the many flaws with the widget in its current state, so you’ll have to edit CesiumViewerWidget directly to make these changes.