diff --git a/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js b/canvas_modules/common-canvas/src/common-canvas/canvas-controller.js index 45d3278cda..a6d79a70c7 100644 --- 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 index ae85a5d14f..6d9c4426c0 100644 --- 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 index 718e6c74c8..acbced1f1d 100644 --- 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,7 +2773,7 @@ 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); @@ -2781,7 +2781,7 @@ export default class SVGCanvasRenderer { } 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();