xeokit / xeokit-sdk

Open source JavaScript SDK for viewing high-detail, full-precision 3D BIM and AEC models in the Web browser.
https://xeokit.io
Other
709 stars 285 forks source link

CameraControl Keyboard listeners #1500

Open Kurtil opened 3 months ago

Kurtil commented 3 months ago

The current behaviour of the CameraControl keyboard listeners is to react on keyboard keydown events only if the mouse is over the canvas. (here and here)

This does not suit me because I am developing an interface where a lot of stuff appear above the canvas:

May-21-2024 17-01-48

It happens very often that the mouse is overing one of the UI parts and not directly the canvas. In this cases, I would like to keep the keyboard updating the camera.

I have two solutions for this and would like to know if one of these appears to be the right one in your opinion.

SOLUTION 1: (simplest)

Adding a CameraControl config that allows to react to keyboard keydown events even if the mouse is not overing the canvas. Something like: (to add here and here)

if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
    return;
}

With a default to true for retro-compatibility.

SOLUTION 2:

Adding a CameraControl config that allows to react to keyboard keydown events if the mouse is overing another DOMElement that the canvas. In my usecase, the xeokit viewer canvas and the UI parts are children of the same div element. To be able to specify this div could limit the keyboard listeners to react only if the mouse is overing a part of the window UI but not only the canvas.

One implementation could be to change the canvas of the MouseMiscHandler file into something like:

const mouseMoveTarget = configs.keyboardEnabledOnMouseoverTarget ?? this._scene.canvas.canvas;

But this solution brings more complexity into the code and the naming have to be perfect.

I'd be glad to hear what you think @xeolabs.

xeolabs commented 2 months ago

@Kurtil Solution 1 looks fine to me - if you can make a PR I'll merge. I would suggest a new property CameraControl.keyboardEnabledOnlyIfMouseOver, like https://github.com/xeokit/xeokit-sdk/blob/master/src/viewer/scene/CameraControl/CameraControl.js#L910