@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
161 lines • 7.02 kB
JavaScript
import { InputState } from "../../InputManager/IInputManager";
import { PointF } from "@aurigma/design-atoms-model/Math";
import { PlaceholderItemHandler } from "../../../ItemHandlers";
import { ItemsCommand, SelectionCommand } from "@aurigma/design-atoms-interfaces";
export class DefaultKeyInputHandler {
constructor(_commandManager, _canvas, _selectionHandler) {
this._commandManager = _commandManager;
this._canvas = _canvas;
this._selectionHandler = _selectionHandler;
this._moveDirection = {
left: false,
right: false,
up: false,
down: false
};
this._lastMoveDirection = { horizontal: null, vertical: null };
this._spacePressed = false;
}
async onKeyInput(params) {
var _a;
const inPlaceEditingHandler = this._canvas.inPlaceEditingHandler;
if (inPlaceEditingHandler != null) {
return inPlaceEditingHandler.processInPlaceEditingKeyEvent(params);
}
switch (params.code) {
case "Escape":
if (params.state === InputState.Started) {
const placeholder = this._selectedPlaceholder();
if (placeholder && placeholder.editing)
await this._commandManager.execute(ItemsCommand.editPlaceholder, { placeholder: placeholder.item, state: false });
else
await this._commandManager.execute(SelectionCommand.clearSelection);
}
break;
case "KeyA":
if (params.ctrlKey && params.state === InputState.Started) {
params.preventDefault();
await this._commandManager.execute(SelectionCommand.selectAll);
}
break;
case "ArrowLeft":
case "ArrowRight":
case "ArrowUp":
case "ArrowDown":
this._moveItems(params);
break;
case "Delete":
case "Backspace":
if (params.state === InputState.Started)
this._tryToDeleteSelectedHandlers();
break;
case "KeyZ":
case "KeyY":
if (params.state !== InputState.Started)
return;
const history = (_a = this._canvas) === null || _a === void 0 ? void 0 : _a.history;
if (params.ctrlKey && history != null) {
return params.code === "KeyY" ? history.redo() : history.undo();
}
break;
case "Space":
if (params.state === InputState.Started) {
this._spacePressed = true;
}
else if (params.state === InputState.Finished) {
this._spacePressed = false;
}
params.preventDefault();
break;
}
}
get spacePressed() {
return this._spacePressed;
}
_canDeleteItemHandler(itemHandler) {
const productHandler = this._canvas.viewer.productHandler;
return (!this._canvas.simpleMode &&
itemHandler != null &&
itemHandler.layer != null &&
!itemHandler.isLocked() &&
productHandler.isInteractive(itemHandler.item) &&
!itemHandler.layer.locked &&
itemHandler.visible &&
itemHandler.layer.visible &&
itemHandler.getPermissions() &&
itemHandler.getPermissions().allowDelete);
}
_tryToDeleteSelectedHandlers(force = false) {
let canDeleteItemHandlers = true;
if (!canDeleteItemHandlers)
return;
let canDelete = true;
const selectedItemHandlers = this._selectedHandlers;
for (let i = 0; i < selectedItemHandlers.length; i++) {
const itemHandler = selectedItemHandlers.getItem(i);
if (!this._canDeleteItemHandler(itemHandler)) {
canDelete = false;
break;
}
}
if (!canDelete)
return;
this._commandManager.execute(ItemsCommand.deleteItems, {
items: selectedItemHandlers.toArray().map(h => h.item),
force: force
});
}
_moveItems(params) {
const items = this._selectedItems;
if (items.length === 0)
return;
const deltaAmount = params.shiftKey ? 10 : 1;
switch (params.code) {
case "ArrowLeft":
this._moveDirection.left = params.state !== InputState.Finished;
this._lastMoveDirection.horizontal = this._moveDirection.left ? "left" : (this._moveDirection.right ? "right" : null);
break;
case "ArrowRight":
this._moveDirection.right = params.state !== InputState.Finished;
this._lastMoveDirection.horizontal = this._moveDirection.right ? "right" : (this._moveDirection.left ? "left" : null);
break;
case "ArrowUp":
this._moveDirection.up = params.state !== InputState.Finished;
this._lastMoveDirection.vertical = this._moveDirection.down ? "down" : (this._moveDirection.up ? "up" : null);
break;
case "ArrowDown":
this._moveDirection.down = params.state !== InputState.Finished;
this._lastMoveDirection.vertical = this._moveDirection.up ? "up" : (this._moveDirection.down ? "down" : null);
break;
}
const delta = new PointF();
delta.x = this._lastMoveDirection.horizontal === "right" ? deltaAmount : (this._lastMoveDirection.horizontal === "left" ? -deltaAmount : 0);
delta.y = this._lastMoveDirection.vertical === "down" ? deltaAmount : (this._lastMoveDirection.vertical === "up" ? -deltaAmount : 0);
const canvasAngle = this._canvas.viewer.contentAngle;
if (canvasAngle > 0) {
delta.rotate(-canvasAngle);
}
const finished = !Object.values(this._moveDirection).some(v => v);
const args = {
delta: delta.clone(),
finished: finished
};
this._selectionHandler.move(args, params.state);
params.preventDefault();
}
get _selectedHandlers() {
return this._selectionHandler.selectedItemHandlers;
}
get _selectedItems() {
return this._selectedHandlers.toArray().map(h => h.item);
}
_selectedPlaceholder() {
if (this._selectedHandlers.length == 1) {
const handler = this._selectedHandlers.get(0);
if (handler instanceof PlaceholderItemHandler)
return handler;
}
return null;
}
}
//# sourceMappingURL=DefaultKeyInputHandler.js.map