Added Alt+R and Alt+r as shortcut key for Renaming of blocks (#283)

* added shortcut key for rename * added shortcut key for rename with caps R
JdeRobot · Mar 3, 2024 · 3888770 · 3888770
1 parent d1c1e11
commit 3888770
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/frontend/src/components/blocks/basic/constant/constant-widget.tsx b/frontend/src/components/blocks/basic/constant/constant-widget.tsx
@@ -41,6 +41,14 @@ export class ConstantBlockWidget extends React.Component<ConstantBlockWidgetProp
         };
     }
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown); // Adding keydown event listener when component mounts
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown); // Removing keydown event listener when component unmounts
+    }
+
     /**
      * Handler for context menu
      * @param key Key cooresponding to the context menu clicked
@@ -110,4 +118,15 @@ export class ConstantBlockWidget extends React.Component<ConstantBlockWidgetProp
             this.props.node.data.value = actual_val; // Update the value data in the component's props with the converted value
         }
     }
+
+        /**
+     * Keydown event handler to listen for Alt+R key combination
+     * @param event Keydown event
+     */
+        handleKeyDown = (event: KeyboardEvent) => {
+            const { node } = this.props;
+            if (event.altKey && (event.key === 'r' || event.key === 'R') && node.isSelected()) {
+                this.props.editor.editNode(node); // Trigger rename action
+            }
+        }
 }
diff --git a/frontend/src/components/blocks/basic/input/input-widget.tsx b/frontend/src/components/blocks/basic/input/input-widget.tsx
@@ -26,6 +26,14 @@ export class InputBlockWidget extends React.Component<InputBlockWidgetProps> {
 
     readonly contextOptions: ContextOption[] = [{key: 'rename', label: 'Rename'}, {key: 'delete', label: 'Delete'}];
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown); // Adding keydown event listener when component mounts
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown); // Removing keydown event listener when component unmounts
+    }
+
     /**
      * Handler for context menu
      * @param key Key cooresponding to the context menu clicked
@@ -67,4 +75,15 @@ export class InputBlockWidget extends React.Component<InputBlockWidgetProps> {
             </BaseBlock>
         );
     }
+
+       /**
+     * Keydown event handler to listen for Alt+R key combination
+     * @param event Keydown event
+     */
+       handleKeyDown = (event: KeyboardEvent) => {
+        const { node } = this.props;
+        if (event.altKey && (event.key === 'r' || event.key === 'R') && node.isSelected()) {
+            this.props.editor.editNode(node); // Trigger rename action
+        }
+    }
 }
diff --git a/frontend/src/components/blocks/basic/output/output-widget.tsx b/frontend/src/components/blocks/basic/output/output-widget.tsx
@@ -25,6 +25,14 @@ export class OutputBlockWidget extends React.Component<OutputBlockWidgetProps> {
 
     readonly contextOptions: ContextOption[] = [{key: 'rename', label: 'Rename'}, {key: 'delete', label: 'Delete'}];
 
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown); // Adding keydown event listener when component mounts
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown); // Removing keydown event listener when component unmounts
+    }
+
     /**
      * Handler for context menu
      * @param key Key cooresponding to the context menu clicked
@@ -66,4 +74,15 @@ export class OutputBlockWidget extends React.Component<OutputBlockWidgetProps> {
             </BaseBlock>
         );
     }
+
+       /**
+     * Keydown event handler to listen for Alt+R key combination
+     * @param event Keydown event
+     */
+       handleKeyDown = (event: KeyboardEvent) => {
+        const { node } = this.props;
+        if (event.altKey && (event.key === 'r' || event.key === 'R') && node.isSelected()) {
+            this.props.editor.editNode(node); // Trigger rename action
+        }
+    }
 }