lazy-widgets
Version:
Typescript retained mode GUI for the HTML canvas API
78 lines • 2.92 kB
JavaScript
import { FlexAlignment } from '../../theme/FlexAlignment.js';
import { Alignment } from '../../theme/Alignment.js';
import { VirtualKeyRow } from './VirtualKeyRow.js';
import { Column } from '../Column.js';
import { LeaveEvent } from '../../events/LeaveEvent.js';
import { PointerPressEvent } from '../../events/PointerPressEvent.js';
import { PointerReleaseEvent } from '../../events/PointerReleaseEvent.js';
import { PointerMoveEvent } from '../../events/PointerMoveEvent.js';
import { defaultVirtualKeyboardTemplate } from '../../core/VirtualKeyboardTemplate.js';
import { filterIDFromProperties } from '../../helpers/filterIDFromProperties.js';
/**
* A virtual keyboard widget.
*
* Needs a {@link KeyboardDriver} so that key events can be queued.
*
* Equivalent to creating a {@link Column} of {@link VirtualKeyRow} with a shared
* {@link KeyContext}. Key rows will be created with SpaceBetween main alignment
* and Stretch cross alignment.
*
* Ignores all events except pointer events, so that the virtual keyboard never
* gets the keyboard or tab focus.
*
* @category Widget
*/
export class VirtualKeyboard extends Column {
/**
* @param keyboardTemplate - By default, the virtual keyboard template is {@link defaultVirtualKeyboardTemplate}.
*/
constructor(keyboardDriver, keyboardTemplate = defaultVirtualKeyboardTemplate, properties) {
properties = Object.assign({ multiContainerAlignment: {
main: FlexAlignment.SpaceBetween, cross: Alignment.Stretch,
} }, properties);
super([], properties);
// Make context
const keyContext = {
callback: (key) => {
keyboardDriver.keyPress(key, keyContext.shift, keyContext.ctrl, keyContext.alt, true);
},
shift: false,
ctrl: false,
alt: false,
};
const propertiesNoID = filterIDFromProperties(properties);
for (const rowTemplate of keyboardTemplate) {
this.add(new VirtualKeyRow(rowTemplate, keyContext, propertiesNoID));
}
}
handleEvent(event) {
// Ignore all non-pointer events
if (event.type === PointerPressEvent.type || event.type === PointerReleaseEvent.type || event.type === PointerMoveEvent.type || event.type === LeaveEvent.type) {
return super.handleEvent(event);
}
else {
return null;
}
}
}
VirtualKeyboard.autoXML = {
name: 'virtual-keyboard',
inputConfig: [
{
name: 'keyboard-driver',
mode: 'value',
validator: 'keyboard-driver',
},
{
name: 'row-template',
mode: 'value',
validator: 'array',
},
{
name: 'key-context',
mode: 'value',
validator: 'key-context',
},
]
};
//# sourceMappingURL=VirtualKeyboard.js.map