Toolbar shortcuts

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Nov 27, 2024 · bceb37b · bceb37b
1 parent 76d03e3
commit bceb37b
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 55 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/keyboard-utils.js b/canvas_modules/common-canvas/src/common-canvas/keyboard-utils.js
@@ -52,7 +52,7 @@ const ZERO_KEY = "Digit0";
 export default class KeyboardUtils {
 
 	/* ----------------------------------------- */
-	/* Canvas navigation key functions           */
+	/* Canvas navigation                         */
 	/* ----------------------------------------- */
 
 	static spaceKey(evt) {
@@ -132,7 +132,7 @@ export default class KeyboardUtils {
 	}
 
 	/* ----------------------------------------- */
-	/* Canvas objects navigation key functions   */
+	/* Canvas objects navigation                 */
 	/* ----------------------------------------- */
 
 	static nextObjectInGroup(d3Event) {
@@ -202,6 +202,18 @@ export default class KeyboardUtils {
 		return !this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.code === DOWN_ARROW_KEY;
 	}
 
+	/* ----------------------------------------- */
+	/* Links                                     */
+	/* ----------------------------------------- */
+
+	static createLink(d3Event) {
+		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.code === PERIOD_KEY;
+	}
+
+	/* ----------------------------------------- */
+	/* Comment Text Display                      */
+	/* ----------------------------------------- */
+
 	static scrollTextUp(d3Event) {
 		return !this.isMetaKey(d3Event) && !d3Event.shiftKey && d3Event.altKey && d3Event.code === DOWN_ARROW_KEY;
 	}
@@ -210,8 +222,12 @@ export default class KeyboardUtils {
 		return !this.isMetaKey(d3Event) && !d3Event.shiftKey && d3Event.altKey && d3Event.code === UP_ARROW_KEY;
 	}
 
-	static createLink(d3Event) {
-		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.code === PERIOD_KEY;
+	/* ----------------------------------------- */
+	/* Text Toolbar                              */
+	/* ----------------------------------------- */
+
+	static returnToTextEditing(evt) {
+		return evt.code === TAB_KEY && !evt.shiftKey;
 	}
 
 	/* ----------------------------------------- */
@@ -268,6 +284,43 @@ export default class KeyboardUtils {
 		return this.isMetaKey(d3Event) && d3Event.code === LAB_KEY;
 	}
 
+	/* ----------------------------------------- */
+	/* Toolbar                                   */
+	/* ----------------------------------------- */
+
+	static openSubArea(evt) {
+		return evt.code === DOWN_ARROW_KEY;
+	}
+
+	static closeSubArea(evt) {
+		return evt.code === ESC_KEY;
+	}
+
+	static openSubAreaFromMenu(evt) {
+		return evt.code === RIGHT_ARROW_KEY;
+	}
+
+	static closeSubAreaToMenu(evt) {
+		return evt.code === LEFT_ARROW_KEY;
+	}
+
+	static setFocusOnNextToolbarBtn(evt) {
+		return evt.code === RIGHT_ARROW_KEY;
+	}
+
+	static setFocusOnPreviousToolbarBtn(evt) {
+		return evt.code === LEFT_ARROW_KEY;
+	}
+
+	static setFocusOnNextMenuItem(evt) {
+		return evt.code === DOWN_ARROW_KEY;
+	}
+
+	static setFocusOnPreviousMenuItem(evt) {
+		return evt.code === UP_ARROW_KEY;
+	}
+
+
 	/* ----------------------------------------- */
 	/* Color Picker                              */
 	/* ----------------------------------------- */
@@ -340,14 +393,6 @@ export default class KeyboardUtils {
 		return evt.code === ESC_KEY;
 	}
 
-	/* ----------------------------------------- */
-	/* Text Toolbar key functions                */
-	/* ----------------------------------------- */
-
-	static returnToTextEditing(evt) {
-		return evt.code === TAB_KEY && !evt.shiftKey;
-	}
-
 	/* ----------------------------------------- */
 	/* Palette key functions                */
 	/* ----------------------------------------- */

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-action-item.jsx
@@ -18,13 +18,12 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import ToolbarButtonItem from "./toolbar-button-item.jsx";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 
 import classNames from "classnames";
 import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 import ToolbarSubPanel from "./toolbar-sub-panel.jsx";
 
-const ESC_KEY = 27;
-const DOWN_ARROW_KEY = 40;
 const TOOLBAR_ICON_WIDTH = 40;
 
 class ToolbarActionItem extends React.Component {
@@ -51,10 +50,10 @@ class ToolbarActionItem extends React.Component {
 	}
 
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			this.closeSubArea();
 
-		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+		} else if (KeyboardUtils.openSubArea(evt)) {
 			if (this.hasSubArea()) {
 				this.openSubArea();
 			}

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-overflow-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-overflow-item.jsx
@@ -20,11 +20,9 @@ import PropTypes from "prop-types";
 import { v4 as uuid4 } from "uuid";
 import { Button } from "@carbon/react";
 import { OverflowMenuVertical } from "@carbon/react/icons";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 
-const ESC_KEY = 27;
-const DOWN_ARROW_KEY = 40;
-
 class ToolbarOverflowItem extends React.Component {
 	constructor(props) {
 		super(props);
@@ -55,10 +53,10 @@ class ToolbarOverflowItem extends React.Component {
 	}
 
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			this.closeSubArea();
 
-		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+		} else if (KeyboardUtils.openSubArea(evt)) {
 			this.openSubArea();
 		}
 		// Left and Right arrow clicks are caught in the

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu-item.jsx
@@ -18,15 +18,12 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import ToolbarButtonItem from "./toolbar-button-item.jsx";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 
 import classNames from "classnames";
 import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 import ToolbarSubPanel from "./toolbar-sub-panel.jsx";
 
-const ESC_KEY = 27;
-const LEFT_ARROW_KEY = 37;
-const RIGHT_ARROW_KEY = 39;
-
 class ToolbarSubMenuItem extends React.Component {
 	constructor(props) {
 		super(props);
@@ -67,16 +64,16 @@ class ToolbarSubMenuItem extends React.Component {
 	// Handles keyboard input on a sub-menu item. The Up and Down arrow
 	// key presses are handled in toolbar-sub-menu.jsx.
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			this.props.closeParentSubArea();
 			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY) {
+		} else if (KeyboardUtils.closeSubAreaToMenu(evt)) {
 			if (this.props.isInCascadeMenu) {
 				this.props.closeParentSubArea();
 			}
 
-		} else if (evt.keyCode === RIGHT_ARROW_KEY) {
+		} else if (KeyboardUtils.openSubAreaFromMenu(evt)) {
 			if (!this.props.isInCascadeMenu &&
 					(this.props.actionObj.subMenu || this.props.actionObj.subPanel)) {
 				this.openSubArea();

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-menu.jsx
@@ -18,15 +18,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import ToolbarSubMenuItem from "./toolbar-sub-menu-item.jsx";
 import ToolbarDividerItem from "./toolbar-divider-item";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 
 import { adjustSubAreaPosition, generateSubAreaStyle } from "./toolbar-sub-utils.js";
 
-const ESC_KEY = 27;
-const LEFT_ARROW_KEY = 37;
-const UP_ARROW_KEY = 38;
-const RIGHT_ARROW_KEY = 39;
-const DOWN_ARROW_KEY = 40;
-
 class ToolbarSubMenu extends React.Component {
 	constructor(props) {
 		super(props);
@@ -71,21 +66,19 @@ class ToolbarSubMenu extends React.Component {
 	// Handles keyboard input on a sub-menu. The Esc, Left arrow and Right arrow
 	// key presses are handled in toolbar-sub-menu-item.jsx.
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
 
-		} else if (evt.keyCode === UP_ARROW_KEY) {
+		} else if (KeyboardUtils.setFocusOnPreviousMenuItem(evt)) {
 			this.setFocusOnPreviousItem();
 			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
 
-		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+		} else if (KeyboardUtils.setFocusOnNextMenuItem(evt)) {
 			this.setFocusOnNextItem();
 			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY) {
-			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
-
-		} else if (evt.keyCode === RIGHT_ARROW_KEY) {
+		} else if (KeyboardUtils.openSubAreaFromMenu(evt) ||
+					KeyboardUtils.closeSubAreaToMenu(evt)) {
 			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
 		}
 	}

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-sub-panel.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-sub-panel.jsx
@@ -18,11 +18,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import { adjustSubAreaPosition, generateSubAreaStyle } from "./toolbar-sub-utils.js";
-
-const ESC_KEY = 27;
-const LEFT_ARROW_KEY = 37;
-const RIGHT_ARROW_KEY = 39;
-
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 
 class ToolbarSubPanel extends React.Component {
 	constructor(props) {
@@ -43,11 +39,12 @@ class ToolbarSubPanel extends React.Component {
 	}
 
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			this.props.closeSubArea();
 			evt.stopPropagation();
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY || evt.keyCode === RIGHT_ARROW_KEY) {
+		} else if (KeyboardUtils.openSubAreaFromMenu(evt) ||
+					KeyboardUtils.closeSubAreaToMenu(evt)) {
 			evt.stopPropagation();
 		}
 	}

diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar.jsx
@@ -18,14 +18,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import ReactResizeDetector from "react-resize-detector";
 
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 import ToolbarActionItem from "./toolbar-action-item.jsx";
 import ToolbarOverflowItem from "./toolbar-overflow-item.jsx";
 import ToolbarDividerItem from "./toolbar-divider-item.jsx";
 
-const ESC_KEY = 27;
-const LEFT_ARROW_KEY = 37;
-const RIGHT_ARROW_KEY = 39;
-
 class Toolbar extends React.Component {
 	constructor(props) {
 		super(props);
@@ -122,18 +119,18 @@ class Toolbar extends React.Component {
 	// toolbar items. We set the focusAction appropriately based on which
 	// key is pressed.
 	onKeyDown(evt) {
-		if (evt.keyCode === ESC_KEY) {
+		if (KeyboardUtils.closeSubArea(evt)) {
 			if (this.props.closeToolbarOnEsc) {
 				this.props.closeToolbar();
 
 			} else {
 				this.setFocusOnItem(); // Reset focus on current focusAction.
 			}
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY) {
+		} else if (KeyboardUtils.setFocusOnPreviousToolbarBtn(evt)) {
 			this.setFocusOnPreviousItem();
 
-		} else if (evt.keyCode === RIGHT_ARROW_KEY) {
+		} else if (KeyboardUtils.setFocusOnNextToolbarBtn(evt)) {
 			this.setFocusOnNextItem();
 		}
 	}