#1699 Context toolbar overflow menu remains open when moving mouse cu… (

#1700)
elyra-ai · Feb 19, 2024 · 92b2001 · 92b2001
1 parent a44e230
commit 92b2001
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 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
@@ -1552,12 +1552,24 @@ export default class CanvasController {
 		}
 	}
 
+	// Manages the flag that indicates whether the mouse cursor is over
+	// the context toolbar or not. This flag is used for controlling the
+	// display of the context toolbar.
 	setMouseInContextToolbar(state) {
 		this.mouseInContextToolbar = state;
 	}
 
-	setMouseInObject(state) {
-		this.mouseInObject = state;
+	// Manages the flag that indicates whether the mouse cursor is over
+	// an object (node, comment or link) or not. This flag is used for
+	// controlling the display of the context toolbar. 'id' is either the id
+	// of the object the cursor is over, or null, if it is not over an object.
+	setMouseInObject(id) {
+		// Close the context toolbar immediately if the mouse cursor moves
+		// from one object to another.
+		if (id && id !== this.mouseInObject) {
+			this.closeContextToolbar();
+		}
+		this.mouseInObject = id;
 	}
 
 	openNotificationPanel() {

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
@@ -22,7 +22,7 @@ import Toolbar from "../toolbar/toolbar.jsx";
 import Logger from "../logging/canvas-logger.js";
 import ColorPicker from "../color-picker";
 
-const CM_TOOLBAR_GAP = 4;
+const CM_TOOLBAR_GAP = 2;
 const CM_ICON_SIZE = 32;
 const CM_ICON_PAD = 2;
 

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
@@ -2773,15 +2773,15 @@ export default class SVGCanvasRenderer {
 	addContextToolbar(d3Event, d, objType) {
 		if (!this.isSizing() && !this.isDragging() &&
 				!this.svgCanvasTextArea.isEditingText() && !CanvasUtils.isSuperBindingNode(d)) {
-			this.canvasController.setMouseInObject(true);
+			this.canvasController.setMouseInObject(d.id);
 			let pos = this.getContextToolbarPos(objType, d);
 			pos = this.zoomUtils.unTransformPos(pos);
 			this.openContextMenu(d3Event, objType, d, null, pos);
 		}
 	}
 
 	removeContextToolbar() {
-		this.canvasController.setMouseInObject(false);
+		this.canvasController.setMouseInObject(null);
 		if (this.canvasController.isContextMenuDisplayed()) {
 			setTimeout(() => this.canvasController.closeContextToolbar(), 200);
 		}
@@ -2974,6 +2974,8 @@ export default class SVGCanvasRenderer {
 
 	}
 
+	// Opens either the context menu or the context toolbar depending on which is
+	// currently enabled.
 	openContextMenu(d3Event, type, d, port, pos) {
 		CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stop the browser context menu appearing
 		this.canvasController.contextMenuHandler({
@@ -2991,6 +2993,8 @@ export default class SVGCanvasRenderer {
 			zoom: this.zoomUtils.getZoomScale() });
 	}
 
+	// Closes the conetext menu if open. Called by various drag utility
+	// classes.
 	closeContextMenuIfOpen() {
 		if (this.canvasController.isContextMenuDisplayed()) {
 			this.canvasController.closeContextMenu();