Only triggering delete on shortcut if 2d-graph in focus

src/editor/js/components/editor.tsx

@@ -36,6 +36,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     private defaultWarmupTicks = 100;
     private warmupTicks = 100;
     private renderer: any;
+    private graphInFocus = false;
 
     constructor(props: propTypes) {
         super(props);
@@ -113,6 +114,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         // Subscribe to global key-press events
         document.onkeydown = this.handleKeyDown;
         document.onkeyup = this.handleKeyUp;
+        document.onmousedown = this.handleMouseDown;
 
         return true;
     }
@@ -128,17 +130,22 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
         });
 
         // Key events
-        if (
-            key === "Escape" &&
-            document.activeElement === this.renderer.current
-        ) {
+        if (key === "Escape") {
             // Only delete if 2d-graph is the focused element
             this.selectNode(undefined);
-        } else if (key === "Delete" && this.state.selectedNode !== undefined) {
+        } else if (
+            key === "Delete" &&
+            this.state.selectedNode !== undefined &&
+            this.graphInFocus
+        ) {
             this.state.selectedNode.delete();
         }
     }
 
+    private handleMouseDown(event: any) {
+        this.graphInFocus = false;
+    }
+
     private handleKeyUp(event: KeyboardEvent) {
         const key: string = event.key;
 
@@ -155,6 +162,8 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
      * @param event Click event.
      */
     private handleBackgroundClick(event: any, position: clickPosition) {
+        this.graphInFocus = true;
+
         // Is there really no node there? Trying to prevent small error, where this event is triggered, even if there is a node.
         const placeholderNode: Node = {
             id: undefined,
@@ -240,6 +249,8 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     }
 
     private handleNodeClick(node: Node) {
+        this.graphInFocus = true;
+
         if (this.state.keys["Shift"]) {
             // Connect two nodes when second select while shift is pressed
             if (this.state.selectedNode == undefined) {
@@ -355,6 +366,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     }
 
     private handleNodeDrag(node: Node, translate: positionTranslate) {
+        this.graphInFocus = true;
         this.selectNode(node);
 
         // Should run connect logic?
@@ -384,6 +396,8 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
     }
 
     private handleLinkClick(link: Link) {
+        this.graphInFocus = true;
+
         if (this.state.keys["Control"]) {
             // Delete link when control is pressed
             link.delete();