FIx context toolbar

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Dec 3, 2024 · 84a6c5d · 84a6c5d
1 parent 8a4dd8c
commit 84a6c5d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js b/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js
@@ -57,7 +57,7 @@ import getContextMenuDefiniton from "./canvas-controller-menu-utils.js";
 import { get, isEmpty } from "lodash";
 import { CANVAS_FOCUS,
 	LINK_SELECTION_NONE, LINK_SELECTION_DETACHABLE,
-	SNAP_TO_GRID_NONE, SUPER_NODE, WYSIWYG
+	SNAP_TO_GRID_NONE, SUPER_NODE, WYSIWYG, CAUSE_MOUSE, CAUSE_KEYBOARD
 } from "./constants/canvas-constants";
 
 import { cloneDeep } from "lodash";
@@ -1662,10 +1662,17 @@ export default class CanvasController {
 		return this.objectModel.getContextMenuSource();
 	}
 
-	closeContextToolbar() {
-		if (!this.mouseInContextToolbar && !this.mouseInObject) {
+	closeContextToolbar(cause = CAUSE_MOUSE) {
+		if (cause === CAUSE_KEYBOARD) {
 			this.objectModel.closeContextMenu();
-			this.restoreFocus();
+			if (this.getSVGCanvasD3()) {
+				this.getSVGCanvasD3().setTabbedIn();
+				this.restoreFocus();
+			}
+
+		} else if (!this.mouseInContextToolbar && !this.mouseInObject) {
+			this.objectModel.closeContextMenu();
+			this.setFocusOnCanvas();
 		}
 	}
 

diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-context-toolbar.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-context-toolbar.jsx
@@ -21,6 +21,7 @@ import { findLastIndex } from "lodash";
 import Toolbar from "../toolbar/toolbar.jsx";
 import Logger from "../logging/canvas-logger.js";
 import ColorPicker from "../color-picker";
+import { CAUSE_KEYBOARD } from "./constants/canvas-constants.js";
 
 const CM_TOOLBAR_GAP = 2;
 const CM_ICON_SIZE = 32;
@@ -159,7 +160,7 @@ class CommonCanvasContextToolbar extends React.Component {
 	closeContextToolbar() {
 		this.props.canvasController.setMouseInContextToolbar(false);
 		this.props.canvasController.setMouseInObject(null);
-		this.props.canvasController.closeContextToolbar();
+		this.props.canvasController.closeContextToolbar(CAUSE_KEYBOARD);
 	}
 
 	colorClicked(color) {

diff --git a/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js b/canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js
@@ -175,7 +175,11 @@ export const SOUTH = "s";
 export const EAST = "e";
 export const WEST = "w";
 
+// Cuase or actions
+export const CAUSE_MOUSE = "M";
+export const CAUSE_KEYBOARD = "K";
 
+// Context Menu button value
 export const CONTEXT_MENU_BUTTON = 2;
 
 export const CANVAS_CARBON_ICONS = {

diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
@@ -42,7 +42,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
 	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
 	NORTH, SOUTH, EAST, WEST,
-	WYSIWYG,
+	WYSIWYG, CAUSE_KEYBOARD, CAUSE_MOUSE,
 	CANVAS_FOCUS }
 	from "./constants/canvas-constants";
 import SUPERNODE_ICON from "../../assets/images/supernode.svg";
@@ -2118,7 +2118,7 @@ export default class SVGCanvasRenderer {
 							this.selectObject(d3Event, d, "node");
 
 							if (this.config.enableContextToolbar) {
-								this.addContextToolbar(d3Event, d, "node");
+								this.addContextToolbar(d3Event, d, "node", CAUSE_KEYBOARD);
 							} else {
 								const pos = this.getObjectCenterPosition(d3Event.currentTarget);
 								this.openContextMenu(d3Event, "node", d, null, pos);
@@ -2139,8 +2139,7 @@ export default class SVGCanvasRenderer {
 				this.setNodeStyles(d, "hover", nodeGrp);
 
 				if (this.config.enableContextToolbar) {
-					this.setFocusObject(d, d3Event);
-					this.addContextToolbar(d3Event, d, "node");
+					this.addContextToolbar(d3Event, d, "node", CAUSE_MOUSE);
 				} else {
 					this.addDynamicNodeIcons(d3Event, d, nodeGrp);
 				}
@@ -2986,10 +2985,12 @@ export default class SVGCanvasRenderer {
 		return { x: d.x_pos + d.width, y: d.y_pos };
 	}
 
-	addContextToolbar(d3Event, d, objType, xPos, yPos) {
+	addContextToolbar(d3Event, d, objType, cause, xPos, yPos) {
 		if (!this.isSizing() && !this.isDragging() &&
 				!this.svgCanvasTextArea.isEditingText() && !CanvasUtils.isSuperBindingNode(d)) {
-			this.canvasController.setMouseInObject(d.id);
+			if (cause === CAUSE_MOUSE) {
+				this.canvasController.setMouseInObject(d.id);
+			}
 			let pos = this.getDefaultContextToolbarPos(objType, d);
 			pos.x = xPos ? pos.x + xPos : pos.x;
 			pos.y = yPos ? pos.y + yPos : pos.y;
@@ -4069,7 +4070,7 @@ export default class SVGCanvasRenderer {
 						this.selectObject(d3Event, d, "comment");
 
 						if (this.config.enableContextToolbar) {
-							this.addContextToolbar(d3Event, d, "comment");
+							this.addContextToolbar(d3Event, d, "comment", CAUSE_KEYBOARD);
 						} else {
 							const pos = this.getObjectCenterPosition(d3Event.currentTarget);
 							this.openContextMenu(d3Event, "comment", d, null, pos);
@@ -4085,10 +4086,7 @@ export default class SVGCanvasRenderer {
 					this.createCommentPort(d3Event.currentTarget, d);
 				}
 				if (this.config.enableContextToolbar) {
-					if (!this.svgCanvasTextArea.isEditingText()) {
-						this.setFocusObject(d, d3Event);
-					}
-					this.addContextToolbar(d3Event, d, "comment");
+					this.addContextToolbar(d3Event, d, "comment", CAUSE_MOUSE);
 				}
 				if (this.commentHasScrollableText(d3Event.currentTarget)) {
 					this.removeCanvasZoomBehavior(); // Remove canvas zoom behavior to allow scrolling of comment
@@ -4550,7 +4548,7 @@ export default class SVGCanvasRenderer {
 						}
 
 						if (this.config.enableContextToolbar) {
-							this.addContextToolbar(d3Event, d, "link",
+							this.addContextToolbar(d3Event, d, "link", CAUSE_KEYBOARD,
 								this.canvasLayout.linkContextToolbarPosX,
 								this.canvasLayout.linkContextToolbarPosY
 							);
@@ -4577,8 +4575,7 @@ export default class SVGCanvasRenderer {
 				this.setLinkLineStyles(targetObj, d, "hover");
 
 				if (this.config.enableContextToolbar) {
-					this.setFocusObject(d, d3Event);
-					this.addContextToolbar(d3Event, d, "link",
+					this.addContextToolbar(d3Event, d, "link", CAUSE_MOUSE,
 						this.canvasLayout.linkContextToolbarPosX,
 						this.canvasLayout.linkContextToolbarPosY
 					);