Input
Extends:
Meditates mouse, touch and keyboard events for various interaction controls.
Ordinarily, you would only use this component as a utility to help manage input events and state for your own custom input handlers.
- Located at Scene#input
- Used by (at least) CameraControl
Usage
Subscribing to mouse events on the canvas:
import {Viewer} from "xeokit-sdk.es.js";
const viewer = new Viewer({
canvasId: "myCanvas"
});
const input = viewer.scene.input;
const onMouseDown = input.on("mousedown", (canvasCoords) => {
console.log("Mouse down at: x=" + canvasCoords[0] + ", y=" + coords[1]);
});
const onMouseUp = input.on("mouseup", (canvasCoords) => {
console.log("Mouse up at: x=" + canvasCoords[0] + ", y=" + canvasCoords[1]);
});
const onMouseClicked = input.on("mouseclicked", (canvasCoords) => {
console.log("Mouse clicked at: x=" + canvasCoords[0] + ", y=" + canvasCoords[1]);
});
const onDblClick = input.on("dblclick", (canvasCoords) => {
console.log("Double-click at: x=" + canvasCoords[0] + ", y=" + canvasCoords[1]);
});
Subscribing to keyboard events on the canvas:
const onKeyDown = input.on("keydown", (keyCode) => {
switch (keyCode) {
case this.KEY_A:
console.log("The 'A' key is down");
break;
case this.KEY_B:
console.log("The 'B' key is down");
break;
case this.KEY_C:
console.log("The 'C' key is down");
break;
default:
console.log("Some other key is down");
}
});
const onKeyUp = input.on("keyup", (keyCode) => {
switch (keyCode) {
case this.KEY_A:
console.log("The 'A' key is up");
break;
case this.KEY_B:
console.log("The 'B' key is up");
break;
case this.KEY_C:
console.log("The 'C' key is up");
break;
default:
console.log("Some other key is up");
}
});
Checking if keys are down:
const isCtrlDown = input.ctrlDown;
const isAltDown = input.altDown;
const shiftDown = input.shiftDown;
//...
const isAKeyDown = input.keyDown[input.KEY_A];
const isBKeyDown = input.keyDown[input.KEY_B];
const isShiftKeyDown = input.keyDown[input.KEY_SHIFT];
//...
Unsubscribing from events:
input.off(onMouseDown);
input.off(onMouseUp);
//...
Disabling all events
Event handling is enabled by default.
To disable all events:
myViewer.scene.input.setEnabled(false);
To enable all events again:
myViewer.scene.input.setEnabled(true);
Disabling keyboard input
When the mouse is over the canvas, the canvas will consume keyboard events. Therefore, sometimes we need to disable keyboard control, so that other UI elements can get those events.
To disable keyboard events:
myViewer.scene.input.setKeyboardEnabled(false);
To enable keyboard events again:
myViewer.scene.input.setKeyboardEnabled(true)
Member Summary
Public Members | ||
public |
Code for the A key. |
|
public |
Code for the ADD key. |
|
public |
Code for the ALT key. |
|
public |
Code for the B key. |
|
public |
Code for the BACKSPACE key. |
|
public |
Code for the BACK_SLASH key. |
|
public |
Code for the C key. |
|
public |
Code for the CAPS_LOCK key. |
|
public |
Code for the CLOSE_BRACKET key. |
|
public |
Code for the COMMA key. |
|
public |
Code for the CTRL key. |
|
public |
Code for the D key. |
|
public |
Code for the DASH key. |
|
public |
Code for the DECIMAL POINT key. |
|
public |
Code for the DELETE key. |
|
public |
Code for the DIVIDE key. |
|
public |
Code for the DOWN_ARROW key. |
|
public |
Code for the E key. |
|
public |
Code for the END key. |
|
public |
Code for the ENTER key. |
|
public |
Code for the EQUAL_SIGN key. |
|
public |
Code for the ESCAPE key. |
|
public |
Code for the F key. |
|
public |
Code for the F1 key. |
|
public |
Code for the F10 key. |
|
public |
Code for the F11 key. |
|
public |
Code for the F12 key. |
|
public |
Code for the F2 key. |
|
public |
Code for the F3 key. |
|
public |
Code for the F4 key. |
|
public |
Code for the F5 key. |
|
public |
Code for the F6 key. |
|
public |
Code for the F7 key. |
|
public |
Code for the F8 key. |
|
public |
Code for the F9 key. |
|
public |
Code for the FORWARD_SLASH key. |
|
public |
Code for the G key. |
|
public |
Code for the GRAVE_ACCENT key. |
|
public |
Code for the H key. |
|
public |
Code for the HOME key. |
|
public |
Code for the I key. |
|
public |
Code for the INSERT key. |
|
public |
Code for the J key. |
|
public |
Code for the K key. |
|
public |
Code for the L key. |
|
public |
Code for the LEFT_ARROW key. |
|
public |
Code for the LEFT_WINDOW key. |
|
public |
Code for the M key. |
|
public |
Code for the MULTIPLY key. |
|
public |
Code for the N key. |
|
public |
Code for the number pad 0 key. |
|
public |
Code for the number pad 1 key. |
|
public |
Code for the number pad 2 key. |
|
public |
Code for the number pad 3 key. |
|
public |
Code for the number pad 4 key. |
|
public |
Code for the number pad 5 key. |
|
public |
Code for the number pad 6 key. |
|
public |
Code for the number pad 7 key. |
|
public |
Code for the number pad 8 key. |
|
public |
Code for the number pad 9 key. |
|
public |
Code for the 0 key. |
|
public |
Code for the 1 key. |
|
public |
Code for the 2 key. |
|
public |
Code for the 3 key. |
|
public |
Code for the 4 key. |
|
public |
Code for the 5 key. |
|
public |
Code for the 6 key. |
|
public |
Code for the 7 key. |
|
public |
Code for the 8 key. |
|
public |
Code for the 9 key. |
|
public |
Code for the NUM_LOCK key. |
|
public |
Code for the O key. |
|
public |
Code for the OPEN_BRACKET key. |
|
public |
Code for the P key. |
|
public |
Code for the PAGE_DOWN key. |
|
public |
Code for the PAGE_UP key. |
|
public |
Code for the PAUSE_BREAK key. |
|
public |
Code for the PERIOD key. |
|
public |
Code for the Q key. |
|
public |
Code for the R key. |
|
public |
Code for the RIGHT_ARROW key. |
|
public |
Code for the RIGHT_WINDOW key. |
|
public |
Code for the S key. |
|
public |
Code for the SCROLL_LOCK key. |
|
public |
Code for the SELECT key. |
|
public |
Code for the SEMI_COLON key. |
|
public |
Code for the SHIFT key. |
|
public |
Code for the SINGLE_QUOTE key. |
|
public |
Code for the SPACE key. |
|
public |
Code for the SUBTRACT key. |
|
public |
Code for the T key. |
|
public |
Code for the TAB key. |
|
public |
Code for the U key. |
|
public |
Code for the UP_ARROW key. |
|
public |
Code for the V key. |
|
public |
Code for the W key. |
|
public |
Code for the X key. |
|
public |
Code for the Y key. |
|
public |
Code for the Z key. |
|
public |
Code for the left mouse button. |
|
public |
Code for the middle mouse button. |
|
public |
Code for the right mouse button. |
|
public |
True whenever ALT key is down. |
|
public |
True whenever CTRL key is down. |
|
public |
element: HTMLCanvasElement The canvas element that mouse and keyboards are bound to. |
|
public |
True while input enabled |
|
public |
Flag for each key that's down. |
|
public |
True while keyboard input is enabled. |
|
public |
Current mouse position within the canvas. |
|
public |
True whenever left mouse button is down. |
|
public |
True whenever middle mouse button is down. |
|
public |
True whenever the right mouse button is down. |
|
public |
True while the mouse is over the canvas. |
|
public |
|
Method Summary
Public Methods | ||
public |
Gets whether input handlers are enabled. |
|
public |
Gets whether keyboard input is enabled. |
|
public |
setEnabled(enable: Boolean) Sets whether input handlers are enabled. |
|
public |
setKeyboardEnabled(value: Boolean) Sets whether or not keyboard input is enabled. |
Inherited Summary
From class Component | ||
public get |
The Component that owns the lifecycle of this Component, if any. |
|
public |
True as soon as this Component has been destroyed |
|
public |
ID of this Component, unique within the Scene. |
|
public |
meta: * Arbitrary, user-defined metadata on this component. |
|
public |
The parent Scene that contains this Component. |
|
public |
The viewer that contains this Scene. |
|
public |
clear() Destroys all Components that are owned by this. |
|
public |
destroy() Destroys this component. |
|
public |
Logs an error for this component to the JavaScript console. |
|
public |
Fires an event on this component. |
|
public |
Returns true if there are any subscribers to the given event on this component. |
|
public |
Tests if this component is of the given type, or is a subclass of the given type. |
|
public |
Logs a console debugging message for this component. |
|
public |
Cancels an event subscription that was previously made with Component#on or Component#once. |
|
public |
Subscribes to an event on this component. |
|
public |
Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd. |
|
public |
scheduleTask(task: *) Schedule a task to perform on the next browser interval |
|
public |
Logs a warning for this component to the JavaScript console. |
Public Members
public KEY_ADD: Number source
Code for the ADD key.
Properties:
Name | Type | Attribute | Description |
KEY_ADD | * |
public KEY_ALT: Number source
Code for the ALT key.
Properties:
Name | Type | Attribute | Description |
KEY_ALT | * |
public KEY_BACKSPACE: Number source
Code for the BACKSPACE key.
Properties:
Name | Type | Attribute | Description |
KEY_BACKSPACE | * |
public KEY_BACK_SLASH: Number source
Code for the BACK_SLASH key.
Properties:
Name | Type | Attribute | Description |
KEY_BACK_SLASH | * |
public KEY_CAPS_LOCK: Number source
Code for the CAPS_LOCK key.
Properties:
Name | Type | Attribute | Description |
KEY_CAPS_LOCK | * |
public KEY_CLOSE_BRACKET: Number source
Code for the CLOSE_BRACKET key.
Properties:
Name | Type | Attribute | Description |
KEY_CLOSE_BRACKET | * |
public KEY_COMMA: Number source
Code for the COMMA key.
Properties:
Name | Type | Attribute | Description |
KEY_COMMA | * |
public KEY_CTRL: Number source
Code for the CTRL key.
Properties:
Name | Type | Attribute | Description |
KEY_CTRL | * |
public KEY_DASH: Number source
Code for the DASH key.
Properties:
Name | Type | Attribute | Description |
KEY_DASH | * |
public KEY_DECIMAL_POINT: Number source
Code for the DECIMAL POINT key.
Properties:
Name | Type | Attribute | Description |
KEY_DECIMAL_POINT | * |
public KEY_DELETE: Number source
Code for the DELETE key.
Properties:
Name | Type | Attribute | Description |
KEY_DELETE | * |
public KEY_DIVIDE: Number source
Code for the DIVIDE key.
Properties:
Name | Type | Attribute | Description |
KEY_DIVIDE | * |
public KEY_DOWN_ARROW: Number source
Code for the DOWN_ARROW key.
Properties:
Name | Type | Attribute | Description |
KEY_DOWN_ARROW | * |
public KEY_END: Number source
Code for the END key.
Properties:
Name | Type | Attribute | Description |
KEY_END | * |
public KEY_ENTER: Number source
Code for the ENTER key.
Properties:
Name | Type | Attribute | Description |
KEY_ENTER | * |
public KEY_EQUAL_SIGN: Number source
Code for the EQUAL_SIGN key.
Properties:
Name | Type | Attribute | Description |
KEY_EQUAL_SIGN | * |
public KEY_ESCAPE: Number source
Code for the ESCAPE key.
Properties:
Name | Type | Attribute | Description |
KEY_ESCAPE | * |
public KEY_F10: Number source
Code for the F10 key.
Properties:
Name | Type | Attribute | Description |
KEY_F10 | * |
public KEY_F11: Number source
Code for the F11 key.
Properties:
Name | Type | Attribute | Description |
KEY_F11 | * |
public KEY_F12: Number source
Code for the F12 key.
Properties:
Name | Type | Attribute | Description |
KEY_F12 | * |
public KEY_FORWARD_SLASH: Number source
Code for the FORWARD_SLASH key.
Properties:
Name | Type | Attribute | Description |
KEY_FORWARD_SLASH | * |
public KEY_GRAVE_ACCENT: Number source
Code for the GRAVE_ACCENT key.
Properties:
Name | Type | Attribute | Description |
KEY_GRAVE_ACCENT | * |
public KEY_HOME: Number source
Code for the HOME key.
Properties:
Name | Type | Attribute | Description |
KEY_HOME | * |
public KEY_INSERT: Number source
Code for the INSERT key.
Properties:
Name | Type | Attribute | Description |
KEY_INSERT | * |
public KEY_LEFT_ARROW: Number source
Code for the LEFT_ARROW key.
Properties:
Name | Type | Attribute | Description |
KEY_LEFT_ARROW | * |
public KEY_LEFT_WINDOW: Number source
Code for the LEFT_WINDOW key.
Properties:
Name | Type | Attribute | Description |
KEY_LEFT_WINDOW | * |
public KEY_MULTIPLY: Number source
Code for the MULTIPLY key.
Properties:
Name | Type | Attribute | Description |
KEY_MULTIPLY | * |
public KEY_NUMPAD_0: Number source
Code for the number pad 0 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_0 | * |
public KEY_NUMPAD_1: Number source
Code for the number pad 1 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_1 | * |
public KEY_NUMPAD_2: Number source
Code for the number pad 2 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD | * | 2 |
public KEY_NUMPAD_3: Number source
Code for the number pad 3 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_3 | * |
public KEY_NUMPAD_4: Number source
Code for the number pad 4 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_4 | * |
public KEY_NUMPAD_5: Number source
Code for the number pad 5 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_5 | * |
public KEY_NUMPAD_6: Number source
Code for the number pad 6 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_6 | * |
public KEY_NUMPAD_7: Number source
Code for the number pad 7 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_7 | * |
public KEY_NUMPAD_8: Number source
Code for the number pad 8 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_8 | * |
public KEY_NUMPAD_9: Number source
Code for the number pad 9 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUMPAD_9 | * |
public KEY_NUM_0: Number source
Code for the 0 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_0 | * |
public KEY_NUM_1: Number source
Code for the 1 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_1 | * |
public KEY_NUM_2: Number source
Code for the 2 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_2 | * |
public KEY_NUM_3: Number source
Code for the 3 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_3 | * |
public KEY_NUM_4: Number source
Code for the 4 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_4 | * |
public KEY_NUM_5: Number source
Code for the 5 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_5 | * |
public KEY_NUM_6: Number source
Code for the 6 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_6 | * |
public KEY_NUM_7: Number source
Code for the 7 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_7 | * |
public KEY_NUM_8: Number source
Code for the 8 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_8 | * |
public KEY_NUM_9: Number source
Code for the 9 key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_9 | * |
public KEY_NUM_LOCK: Number source
Code for the NUM_LOCK key.
Properties:
Name | Type | Attribute | Description |
KEY_NUM_LOCK | * |
public KEY_OPEN_BRACKET: Number source
Code for the OPEN_BRACKET key.
Properties:
Name | Type | Attribute | Description |
KEY_OPEN_BRACKET | * |
public KEY_PAGE_DOWN: Number source
Code for the PAGE_DOWN key.
Properties:
Name | Type | Attribute | Description |
KEY_PAGE_DOWN | * |
public KEY_PAGE_UP: Number source
Code for the PAGE_UP key.
Properties:
Name | Type | Attribute | Description |
KEY_PAGE_UP | * |
public KEY_PAUSE_BREAK: Number source
Code for the PAUSE_BREAK key.
Properties:
Name | Type | Attribute | Description |
KEY_PAUSE_BREAK | * |
public KEY_PERIOD: Number source
Code for the PERIOD key.
Properties:
Name | Type | Attribute | Description |
KEY_PERIOD | * |
public KEY_RIGHT_ARROW: Number source
Code for the RIGHT_ARROW key.
Properties:
Name | Type | Attribute | Description |
KEY_RIGHT_ARROW | * |
public KEY_RIGHT_WINDOW: Number source
Code for the RIGHT_WINDOW key.
Properties:
Name | Type | Attribute | Description |
KEY_RIGHT_WINDOW | * |
public KEY_SCROLL_LOCK: Number source
Code for the SCROLL_LOCK key.
Properties:
Name | Type | Attribute | Description |
KEY_SCROLL_LOCK | * |
public KEY_SELECT_KEY: Number source
Code for the SELECT key.
Properties:
Name | Type | Attribute | Description |
KEY_SELECT | * |
public KEY_SEMI_COLON: Number source
Code for the SEMI_COLON key.
Properties:
Name | Type | Attribute | Description |
KEY_SEMI_COLON | * |
public KEY_SHIFT: Number source
Code for the SHIFT key.
Properties:
Name | Type | Attribute | Description |
KEY_SHIFT | * |
public KEY_SINGLE_QUOTE: Number source
Code for the SINGLE_QUOTE key.
Properties:
Name | Type | Attribute | Description |
KEY_SINGLE_QUOTE | * |
public KEY_SPACE: Number source
Code for the SPACE key.
Properties:
Name | Type | Attribute | Description |
KEY_SPACE | * |
public KEY_SUBTRACT: Number source
Code for the SUBTRACT key.
Properties:
Name | Type | Attribute | Description |
KEY_SUBTRACT | * |
public KEY_TAB: Number source
Code for the TAB key.
Properties:
Name | Type | Attribute | Description |
KEY_TAB | * |
public KEY_UP_ARROW: Number source
Code for the UP_ARROW key.
Properties:
Name | Type | Attribute | Description |
KEY_UP_ARROW | * |
public MOUSE_LEFT_BUTTON: Number source
Code for the left mouse button.
Properties:
Name | Type | Attribute | Description |
MOUSE_LEFT_BUTTON | * |
public MOUSE_MIDDLE_BUTTON: Number source
Code for the middle mouse button.
Properties:
Name | Type | Attribute | Description |
MOUSE_MIDDLE_BUTTON | * |
public MOUSE_RIGHT_BUTTON: Number source
Code for the right mouse button.
Properties:
Name | Type | Attribute | Description |
MOUSE_RIGHT_BUTTON | * |
Public Methods
public getKeyboardEnabled(): Boolean source
Gets whether keyboard input is enabled.
Default value is true
.
CameraControl will not respond to keyboard events while this is set false
.