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* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
package-lock.json
# Dependency directories # Dependency directories
node_modules/ node_modules/

45
src/index.tsx
View File

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