diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx index 6ba1675ad2ac811dce002000b52173571e25e006..f66cdf41fd4df2807561f76420457962e4934808 100644 --- a/src/editor/js/components/editor.tsx +++ b/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();