@eclipse-glsp/client
Version:
A sprotty-based client for GLSP
174 lines • 7.12 kB
JavaScript
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.KeyboardGrid = void 0;
/********************************************************************************
* Copyright (c) 2023-2025 Business Informatics Group (TU Wien) and others.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* This Source Code may also be made available under the following Secondary
* Licenses when the conditions for such availability set forth in the Eclipse
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
* with the GNU Classpath Exception which is available at
* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/
require("../../../../css/keyboard.css");
const sprotty_1 = require("@eclipse-glsp/sprotty");
const inversify_1 = require("inversify");
const ui_extension_1 = require("../../../base/ui-extension/ui-extension");
const action_1 = require("./action");
const constants_1 = require("./constants");
let KeyboardGrid = class KeyboardGrid extends ui_extension_1.GLSPAbstractUIExtension {
constructor() {
super(...arguments);
this.triggerActions = [];
}
id() {
return constants_1.KeyboardGridMetadata.ID;
}
containerClass() {
return constants_1.KeyboardGridMetadata.ID;
}
handle(action) {
if (action_1.EnableKeyboardGridAction.is(action)) {
this.triggerActions = action.options.triggerActions;
this.originId = action.options.originId;
this.actionDispatcher.dispatch(sprotty_1.SetUIExtensionVisibilityAction.create({
extensionId: constants_1.KeyboardGridMetadata.ID,
visible: true
}));
}
}
initializeContents(containerElement) {
containerElement.tabIndex = constants_1.KeyboardGridMetadata.TAB_INDEX;
containerElement.classList.add('grid-container');
for (let i = 1; i <= 9; i++) {
const gridNumber = document.createElement('div');
const gridItem = document.createElement('div');
gridItem.classList.add('grid-item');
gridItem.id = `keyboard-grid-item-${i}`;
gridNumber.classList.add('grid-item-number');
gridNumber.innerHTML = i.toString();
gridItem.appendChild(gridNumber);
containerElement.appendChild(gridItem);
}
this.containerElement.onkeydown = ev => {
this.onKeyDown(ev);
};
}
onKeyDown(event) {
this.activateCellIfDigitEvent(event);
this.hideIfEscapeEvent(event);
this.actionDispatcher.dispatch(action_1.KeyboardGridKeyboardEventAction.create({
originId: this.originId,
event
}));
}
setContainerVisible(visible) {
if (this.containerElement) {
if (visible) {
this.containerElement.classList.remove('grid-hidden');
this.containerElement.classList.add('grid-visible');
}
else {
this.containerElement.classList.remove('grid-visible');
this.containerElement.classList.add('grid-hidden');
}
}
}
show(root, ...contextElementIds) {
super.show(root, ...contextElementIds);
this.containerElement.focus();
}
hideIfEscapeEvent(event) {
if (this.matchesDeactivateGrid(event)) {
this.hide();
}
}
activateCellIfDigitEvent(event) {
let index = undefined;
for (let i = 1; i <= 9; i++) {
if (this.matchesGridBoxAtIndex(event, i)) {
index = i;
break;
}
}
if (index !== undefined) {
const position = this.centerPositionOfCell(index);
this.dispatchActionsForCell(index, position);
}
}
dispatchActionsForCell(index, cellCenter) {
this.actionDispatcher.dispatchAll([
...this.triggerActions,
action_1.KeyboardGridCellSelectedAction.create({
originId: this.originId,
cellId: index.toString(),
centerCellPosition: cellCenter
})
]);
}
centerPositionOfCell(index) {
let x = 0;
let y = 0;
const activeGridCell = document.getElementById(`keyboard-grid-item-${index}`);
// eslint-disable-next-line no-null/no-null
if (activeGridCell !== null) {
const positions = this.getCenterOfCell(activeGridCell);
x = positions[0];
y = positions[1];
}
return {
x,
y
};
}
matchesDeactivateGrid(event) {
return (0, sprotty_1.matchesKeystroke)(event, 'Escape');
}
matchesGridBoxAtIndex(event, index) {
return (0, sprotty_1.matchesKeystroke)(event, ('Digit' + index)) || (0, sprotty_1.matchesKeystroke)(event, ('Numpad' + index));
}
// https://www.delftstack.com/howto/javascript/get-position-of-element-in-javascript/
getOffset(el) {
let _x = 0;
let _y = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
getCenterOfCell(cell) {
const cellLeft = this.getOffset(cell).left;
const cellTop = this.getOffset(cell).top;
const cellWidth = cell.offsetWidth;
const cellHeight = cell.offsetHeight;
const newCellWidth = cellWidth / 2;
const newCellHeight = cellHeight / 2;
return [cellLeft + newCellWidth, cellTop + newCellHeight];
}
};
exports.KeyboardGrid = KeyboardGrid;
__decorate([
(0, inversify_1.inject)(sprotty_1.TYPES.IActionDispatcher),
__metadata("design:type", Object)
], KeyboardGrid.prototype, "actionDispatcher", void 0);
exports.KeyboardGrid = KeyboardGrid = __decorate([
(0, inversify_1.injectable)()
], KeyboardGrid);
//# sourceMappingURL=keyboard-grid.js.map