sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for 'delete' key (#56)

Browse Source 
* add package-lock.json to gitignore as project appears to use yarn

* add support for deleting elements with "delete" key + assign magic numbers and keycode values to named properties
This commit is contained in:
Kevin Viglucci 2020-01-03 09:47:34 -06:00 committed by Christopher Chedeau
parent c2c13f0f27
commit 527209e740
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,6 +4,7 @@ logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
# Dependency directories
node_modules/

45
src/index.tsx
View File

@ -418,6 +418,28 @@ type AppState = {
viewBackgroundColor: string;
};
const KEYS = {
ARROW_LEFT: "ArrowLeft",
ARROW_RIGHT: "ArrowRight",
ARROW_DOWN: "ArrowDown",
ARROW_UP: "ArrowUp",
ESCAPE: "Escape",
DELETE: "Delete",
BACKSPACE: "Backspace"
};
function isArrowKey(keyCode: string) {
return (
keyCode === KEYS.ARROW_LEFT ||
keyCode === KEYS.ARROW_RIGHT ||
keyCode === KEYS.ARROW_DOWN ||
keyCode === KEYS.ARROW_UP
);
}
const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
const ELEMENT_TRANSLATE_AMOUNT = 1;
class App extends React.Component<{}, AppState> {
public componentDidMount() {
document.addEventListener("keydown", this.onKeyDown, false);
@ -443,27 +465,24 @@ class App extends React.Component<{}, AppState> {
return;
}
if (event.key === "Escape") {
if (event.key === KEYS.ESCAPE) {
clearSelection();
this.forceUpdate();
event.preventDefault();
} else if (event.key === "Backspace") {
} else if (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) {
deleteSelectedElements();
this.forceUpdate();
event.preventDefault();
} else if (
event.key === "ArrowLeft" ||
event.key === "ArrowRight" ||
event.key === "ArrowUp" ||
event.key === "ArrowDown"
) {
const step = event.shiftKey ? 5 : 1;
} else if (isArrowKey(event.key)) {
const step = event.shiftKey
? ELEMENT_SHIFT_TRANSLATE_AMOUNT
: ELEMENT_TRANSLATE_AMOUNT;
elements.forEach(element => {
if (element.isSelected) {
if (event.key === "ArrowLeft") element.x -= step;
else if (event.key === "ArrowRight") element.x += step;
else if (event.key === "ArrowUp") element.y -= step;
else if (event.key === "ArrowDown") element.y += step;
if (event.key === KEYS.ARROW_LEFT) element.x -= step;
else if (event.key === KEYS.ARROW_RIGHT) element.x += step;
else if (event.key === KEYS.ARROW_UP) element.y -= step;
else if (event.key === KEYS.ARROW_DOWN) element.y += step;
}
});
this.forceUpdate();