@elyra/canvas 12.30.0 → 12.31.0

package/src/common-canvas/cc-context-toolbar.jsx

@@ -0,0 +1,205 @@
+/*
+ * Copyright 2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import Toolbar from "../toolbar/toolbar.jsx";
+import Logger from "../logging/canvas-logger.js";
+import ColorPickerPanel from "../color-picker/color-picker-panel.jsx";
+
+const CM_TOOLBAR_GAP = 4;
+const CM_ICON_SIZE = 32;
+const CM_ICON_PAD = 2;
+
+class CommonCanvasContextToolbar extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.logger = new Logger("CC-Context-Toolbar");
+		this.onMouseEnter = this.onMouseEnter.bind(this);
+		this.onMouseLeave = this.onMouseLeave.bind(this);
+		this.toolbarActionHandler = this.toolbarActionHandler.bind(this);
+		this.colorClicked = this.colorClicked.bind(this);
+	}
+
+	onMouseLeave(evt) {
+		this.props.canvasController.setMouseInContextToolbar(false);
+		setTimeout(() => this.props.canvasController.closeContextToolbar(), 200);
+	}
+
+	onMouseEnter(evt) {
+		this.props.canvasController.setMouseInContextToolbar(true);
+	}
+
+	getToolbarConfig({ toolbarItems, overflowMenuItems }) {
+		const leftBar = [];
+		toolbarItems.forEach((item) => {
+			leftBar.push(this.getMenuItem(item));
+		});
+
+		// Records if we have just displayed a divider. This is useful because we
+		// only want to display one divider if there is a divider element
+		// immediately after another divider element in the overflowMenuItems array.
+		let previousDivider = false;
+
+		overflowMenuItems.forEach((item) => {
+			if (item.divider) {
+				if (!previousDivider) {
+					leftBar.push({ divider: true });
+					previousDivider = true;
+				}
+			} else {
+				leftBar.push(this.getMenuItem(item));
+				previousDivider = false;
+			}
+		});
+
+		return {
+			leftBar: leftBar,
+			rightBar: []
+		};
+	}
+
+	getMenuItem(menuItem) {
+		const subPanel = this.getSubPanel(menuItem);
+		const subMenu = !subPanel && menuItem.submenu ? this.getSubMenu(menuItem) : null;
+		return { action: menuItem.action, label: menuItem.label, subMenu, subPanel, enable: this.getEnable(menuItem), iconEnabled: menuItem.icon };
+	}
+
+	getSubPanel(menuItem) {
+		if (menuItem.action === "colorBackground") {
+			return this.buildColorPickerPanel();
+		}
+		return null;
+	}
+
+
+	getSubMenu(menuItem) {
+		if (typeof menuItem.menu === "object") {
+			return menuItem.menu.map((option) => {
+				if (option.divider) {
+					return { divider: true };
+				}
+				return { action: option.action, label: option.label, enable: this.getEnable(option), iconEnabled: option.icon };
+			});
+		}
+		return null;
+	}
+
+	getEnable(menuItem) {
+		if (typeof menuItem.enable === "undefined") {
+			return true;
+		}
+		return menuItem.enable;
+	}
+
+	// Returns the width of the context toolbar.
+	getContextToolbarWidth(toolbarItems, overflowMenuItems) {
+		// If there is at least one overflow item, we will need an overflow
+		// icon which will increase the toolbar items by one.
+		const overflowItemCount = overflowMenuItems.length > 0 ? 1 : 0;
+		const toolbarItemsCount = toolbarItems.length + overflowItemCount;
+
+		// If we have some overflow menu items, we reduce the width by one pixel
+		// which forces the overflow menu and the overflow icon to be shown.
+		const reduction = overflowMenuItems.length > 0 ? 1 : 0;
+		return (toolbarItemsCount * (CM_ICON_SIZE + CM_ICON_PAD)) - reduction;
+	}
+
+	toolbarActionHandler(action, editParam) {
+		this.props.canvasController.setMouseInContextToolbar(false);
+		this.props.canvasController.closeContextToolbar();
+		this.props.canvasController.contextMenuActionHandler(action, editParam);
+	}
+
+	colorClicked(color) {
+		this.toolbarActionHandler("colorSelectedObjects", { color });
+	}
+
+	buildColorPickerPanel() {
+		return (
+			<ColorPickerPanel clickActionHandler={this.colorClicked} />
+		);
+	}
+
+	shouldCenterJustifyToolbar() {
+		const objType = this.props.contextSource.type;
+		return (
+			objType === "link" ||
+			objType === "canvas" ||
+			objType === "node" &&
+				this.props.contextSource.targetObject.layout.contextToolbarPosition === "topCenter" &&
+				!this.props.contextSource.targetObject.is_expanded);
+	}
+
+	render() {
+		this.logger.log("render");
+
+		let contextToolbar = null;
+
+		if (this.props.showContextMenu) {
+			const toolbarItems = this.props.contextMenuDef.filter((cmItem) => cmItem.toolbarItem && !cmItem.divider);
+			const overflowMenuItems = this.props.contextMenuDef.filter((cmItem) => !cmItem.toolbarItem);
+			const toolbarConfig = this.getToolbarConfig({ toolbarItems, overflowMenuItems });
+
+			const toolbarWidth = this.getContextToolbarWidth(toolbarItems, overflowMenuItems);
+
+			// Note: cmPos is already adjusted as a starting point for the context
+			// toolbar position by a calculation in svg-canvas-renderer.js.
+			const pos = this.props.contextSource.cmPos || { x: 0, y: 0 };
+			const x = this.shouldCenterJustifyToolbar()
+				? pos.x - (toolbarWidth / 2)
+				: pos.x - toolbarWidth;
+			const y = (pos.y - CM_ICON_SIZE) - CM_TOOLBAR_GAP;
+
+			contextToolbar = (
+				<div className={"context-toolbar"} style={{ left: x, top: y, width: toolbarWidth }}
+					onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+				>
+					<Toolbar
+						config={toolbarConfig}
+						instanceId={this.props.canvasController.getInstanceId()}
+						toolbarActionHandler={this.toolbarActionHandler}
+						tooltipDirection={"top"}
+						size={"sm"}
+					/>
+				</div>
+			);
+		}
+
+		return contextToolbar;
+	}
+}
+
+CommonCanvasContextToolbar.propTypes = {
+	// Provided by CommonCanvas
+	canvasController: PropTypes.object.isRequired,
+	containingDivId: PropTypes.string.isRequired,
+
+	// Provided by redux
+	contextMenuDef: PropTypes.array.isRequired,
+	contextSource: PropTypes.object.isRequired,
+	showContextMenu: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = (state, ownProps) => ({
+	contextMenuDef: state.contextmenu.menuDef,
+	contextSource: state.contextmenu.source,
+	showContextMenu: state.contextmenu.isOpen
+});
+
+export default connect(mapStateToProps)(CommonCanvasContextToolbar);

package/src/common-canvas/cc-text-toolbar.jsx

@@ -32,7 +32,7 @@ class CommonCanvasTextToolbar extends React.Component {
 		super(props);
 
 		this.getLabel = this.getLabel.bind(this);
-		this.logger = new Logger("CC-Toolbar");
+		this.logger = new Logger("CC-Text-Toolbar");
 	}
 
 	getLabel(labelId, substituteObj) {
@@ -63,14 +63,14 @@ class CommonCanvasTextToolbar extends React.Component {
 		const bulletedListLabel = this.getJsxLabel("texttoolbar.bulletedListAction", "shift + 8");
 		const headerOptions = (
 			<div>
-				<OverflowMenu id={"headerMenu"} iconDescription={""} renderIcon={TextScale32} >
+				<OverflowMenu id={"headerMenu"} iconDescription={""} renderIcon={TextScale32} size={"sm"}>
 					<OverflowMenuItem itemText={this.getLabel("texttoolbar.titleAction")} onClick={(evt) => this.props.actionHandler("title", evt)} />
 					<OverflowMenuItem itemText={this.getLabel("texttoolbar.headerAction")} onClick={(evt) => this.props.actionHandler("header", evt)} />
 					<OverflowMenuItem itemText={this.getLabel("texttoolbar.subheaderAction")} onClick={(evt) => this.props.actionHandler("subheader", evt)} />
 					<OverflowMenuItem itemText={this.getLabel("texttoolbar.bodyAction")} onClick={(evt) => this.props.actionHandler("body", evt)} />
 				</OverflowMenu>
 				<svg className="text-toolbar-tick-svg">
-					<path d="M 39 39 L 39 33 33 39 Z" className="text-toolbar-tick-mark" />
+					<path d="M 31 31 L 31 25 25 31 Z" className="text-toolbar-tick-mark" />
 				</svg>
 			</div>
 		);
@@ -108,6 +108,7 @@ class CommonCanvasTextToolbar extends React.Component {
 						instanceId={this.props.canvasController.getInstanceId()}
 						toolbarActionHandler={this.props.actionHandler}
 						tooltipDirection={"top"}
+						size={"sm"}
 					/>
 				</div>
 			);

package/src/common-canvas/cc-toolbar.jsx

@@ -30,9 +30,10 @@ class CommonCanvasToolbar extends React.Component {
 	constructor(props) {
 		super(props);
 
+		this.logger = new Logger("CC-Toolbar");
+
 		this.getLabel = this.getLabel.bind(this);
 		this.toolbarActionHandler = this.toolbarActionHandler.bind(this);
-		this.logger = new Logger("CC-Toolbar");
 	}
 
 	getLabel(labelId, substituteObj) {
@@ -184,7 +185,7 @@ class CommonCanvasToolbar extends React.Component {
 				{ divider: true },
 				{ action: TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
 					label: this.props.notificationConfig.label,
-					enable: true,
+					enable: this.props.notificationConfig.enable,
 					isSelected: this.props.isNotificationOpen,
 					className: this.getNotificationClassName(),
 					textContent: (notificationCount > 9) ? "9+" : notificationCount.toString()
@@ -272,7 +273,7 @@ class CommonCanvasToolbar extends React.Component {
 
 		if (this.props.enableToolbarLayout === TOOLBAR_LAYOUT_TOP) {
 			canvasToolbar = (
-				<div aria-label={this.getLabel("toolbar.label")} role="navigation">
+				<div aria-label={this.getLabel("toolbar.label")} role="navigation" className={"common-canvas-toolbar"} >
 					<Toolbar
 						config={toolbarConfig}
 						instanceId={this.props.canvasController.getInstanceId()}
@@ -282,7 +283,6 @@ class CommonCanvasToolbar extends React.Component {
 				</div>
 			);
 		}
-
 		return canvasToolbar;
 	}
 }

package/src/common-canvas/common-canvas-utils.js

@@ -912,11 +912,6 @@ export default class CanvasUtils {
 		return regionSelections;
 	}
 
-	// Returns true if the ID passed in is in the array.
-	static isSelected(nodeId, array) {
-		return array.findIndex((id) => id === nodeId) !== -1;
-	}
-
 	// Return true if the position provided is within the area provided.
 	static isPosInArea(pos, area, pad) {
 		return pos.x_pos > area.x1 - pad &&

package/src/common-canvas/common-canvas.scss

@@ -130,10 +130,35 @@ $panel-border-color: $ui-03;
 	}
 }
 
+.common-canvas-toolbar {
+	border-bottom: $toolbar-divider-width solid $ui-04;
+}
 
 .text-toolbar {
+	.toolbar-div {
+		animation: raise-toolbar 0.3s linear;
+		border: 1px solid $ui-04;
+	}
+}
+
+// Below, we have to override the Carbon button's focus highlighting in the
+// context toolbar to get a complete border around the overflow icon. This is
+// necessary because the width allocated to the context toolbar is reduced by
+// one pixel to force the overflow icon to be displayed. 
+.context-toolbar  {
+	.toolbar-overflow-item {
+		button:focus {
+			border-color: transparent;
+			box-shadow: inset 0 0 0 1px $interactive-01, inset 0 0 0 2px $interactive-01
+		}
+	}
+}
+
+.text-toolbar,
+.context-toolbar  {
 	position: absolute;
 	// top and left will be calculated and set for the text toolbar programmatically
+	// top, left and width will be calculated and set for the context toolbar programmatically
 	top: 0;
 	left: 0;
 	width: fit-content;
@@ -143,8 +168,6 @@ $panel-border-color: $ui-03;
 		// opening by adjusting its 'height' and 'top' values.
 		position: relative;
 		left: 0;
-		animation: raise-toolbar 0.3s linear;
-		border: 1px solid $ui-04;
 		padding-right: 0px;
 
 		.toolbar-left-bar {
@@ -156,8 +179,8 @@ $panel-border-color: $ui-03;
 		position: absolute;
 		top: 0;
 		left: 0;
-		height: 40px;
-		width: 40px;
+		height: 32px;
+		width: 32px;
 		pointer-events: none;
 	}
 
@@ -166,6 +189,13 @@ $panel-border-color: $ui-03;
 	}
 }
 
+.text-toolbar  {
+	.toolbar-div {
+		animation: raise-toolbar 0.3s linear;
+	}
+}
+
+
 // Causes the text toolbar to animate upwards from the top of the comment
 // to its final position
 @keyframes raise-toolbar {

package/src/common-canvas/constants/canvas-constants.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2022 Elyra Authors
+ * Copyright 2017-2023 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -178,9 +178,13 @@ export const TOOLBAR_REDO = "redo";
 export const TOOLBAR_CUT = "cut";
 export const TOOLBAR_COPY = "copy";
 export const TOOLBAR_PASTE = "paste";
+export const TOOLBAR_CREATE_COMMENT = "createComment";
 export const TOOLBAR_CREATE_AUTO_COMMENT = "createAutoComment";
+export const TOOLBAR_SET_COMMENT_EDIT_MODE = "setCommentEditingMode";
 export const TOOLBAR_SHOW_COMMENTS = "commentsShow";
 export const TOOLBAR_HIDE_COMMENTS = "commentsHide";
+export const TOOLBAR_COLOR_BACKGROUND = "colorBackground";
+export const TOOLBAR_DELETE_LINK = "deleteLink";
 export const TOOLBAR_DELETE_SELECTED_OBJECTS = "deleteSelectedObjects";
 export const TOOLBAR_ZOOM_IN = "zoomIn";
 export const TOOLBAR_ZOOM_OUT = "zoomOut";
@@ -190,6 +194,10 @@ export const TOOLBAR_ARRANGE_VERTICALLY = "arrangeVertically";
 export const TOOLBAR_TOGGLE_NOTIFICATION_PANEL = "toggleNotificationPanel";
 export const TOOLBAR_OPEN_PALETTE = "paletteOpen";
 export const TOOLBAR_CLOSE_PALETTE = "paletteClose";
+export const TOOLBAR_EXPAND_SUPERNODE_IN_PLACE = "expandSuperNodeInPlace";
+export const TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE = "collapseSuperNodeInPlace";
+export const TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE = "displaySubPipeline";
+export const TOOLBAR_SET_NODE_LABEL_EDIT = "setNodeLabelEditingMode";
 
 export const EDIT_ICON =
 	"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">" +

package/src/common-canvas/svg-canvas-d3.js

@@ -167,6 +167,10 @@ export default class SVGCanvasD3 {
 		return this.renderer ? this.renderer.getZoom() : null;
 	}
 
+	setCommentEditingMode(commentId, pipelineId) {
+		this.renderer.setCommentEditingMode(commentId, pipelineId);
+	}
+
 	setNodeLabelEditingMode(nodeId, pipelineId) {
 		this.renderer.setNodeLabelEditingMode(nodeId, pipelineId);
 	}