@elyra/canvas 12.31.2 → 12.32.1

package/src/toolbar/toolbar-action-item.jsx

@@ -28,11 +28,13 @@ import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
 import { Button } from "carbon-components-react";
 import SVG from "react-inlinesvg";
 import classNames from "classnames";
-import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16,
+import ToolbarActionSubArea from "./toolbar-action-sub-area.jsx";
+import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,
 	Cut16, Copy16, Paste16, Edit16,	ColorPalette16, Maximize16, Minimize16,
-	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16, ChevronRight16 } from "@carbon/icons-react";
+	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,
+	ChevronRight16, ChevronDown16, ChevronUp16 } from "@carbon/icons-react";
 import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
-	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE,
+	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
 	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
 	TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,
 	TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
@@ -47,20 +49,39 @@ class ToolbarActionItem extends React.Component {
 	constructor(props) {
 		super(props);
 
+		this.state = {
+			subAreaDisplayed: false
+		};
+
 		this.actionClickHandler = this.actionClickHandler.bind(this);
 		this.onMouseEnter = this.onMouseEnter.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
+		this.openSubArea = this.openSubArea.bind(this);
+		this.closeSubArea = this.closeSubArea.bind(this);
+		this.clickOutside = this.clickOutside.bind(this);
+	}
+
+	componentDidMount() {
+		if (this.props.actionObj.getSubPanelCloseFn) {
+			this.props.actionObj.getSubPanelCloseFn(this.closeSubArea);
+		}
+	}
+
+	// We must remove the eventListener in case this class is unmounted due
+	// to the toolbar getting redrawn.
+	componentWillUnmount() {
+		document.removeEventListener("click", this.clickOutside, false);
 	}
 
 	onMouseEnter(evt) {
-		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
-			this.props.subMenuActionHandler(this.props.actionObj.action);
+		if ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {
+			this.openSubArea();
 		}
 	}
 
 	onMouseLeave(evt) {
-		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
-			this.props.subMenuActionHandler("");
+		if ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {
+			this.closeSubArea();
 		}
 	}
 
@@ -84,6 +105,8 @@ class ToolbarActionItem extends React.Component {
 			return <Undo16 disabled={disabled} />;
 		case (TOOLBAR_REDO):
 			return <Redo16 disabled={disabled} />;
+		case (TOOLBAR_CLIPBOARD):
+			return <Result16 disabled={disabled} />;
 		case (TOOLBAR_CUT):
 			return <Cut16 disabled={disabled} />;
 		case (TOOLBAR_COPY):
@@ -173,8 +196,45 @@ class ToolbarActionItem extends React.Component {
 		return null;
 	}
 
+	clickOutside(evt) {
+		if (this.state.subAreaDisplayed) {
+			const items = document.getElementsByClassName(this.generateActionName());
+			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
+
+			if (!isOver) {
+				this.closeSubArea();
+			}
+		}
+	}
+
+	openSubArea() {
+		this.setState({ subAreaDisplayed: true });
+	}
+
+	closeSubArea() {
+		this.setState({ subAreaDisplayed: false });
+	}
+
 	actionClickHandler(evt) {
-		if (!this.props.actionObj.subMenu && !this.props.actionObj.subPanel) {
+		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
+			if (this.state.showExtendedMenu) {
+				document.removeEventListener("click", this.clickOutside, false);
+			} else {
+				document.addEventListener("click", this.clickOutside, false);
+			}
+
+			if (this.props.setResizeHandler) {
+				if (this.state.subAreaDisplayed) {
+					this.props.setResizeHandler(null);
+				} else {
+					this.props.setResizeHandler(this.closeSubArea);
+				}
+			}
+
+			if (!this.props.overflow) {
+				this.setState({ subAreaDisplayed: !this.state.subAreaDisplayed });
+			}
+		} else {
 			this.props.toolbarActionHandler(this.props.actionObj.action, evt);
 		}
 	}
@@ -204,10 +264,10 @@ class ToolbarActionItem extends React.Component {
 		// If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.
 		const kind = actionObj.kind || "ghost";
 
-		const chevronIcon = actionObj.subMenu || this.props.actionObj.subPanel ? (<ChevronRight16 />) : null;
+		const chevronIcon = this.generateChevronIcon(actionObj);
 
 		let buttonContent = (
-			<div className={itemContentClassName}>
+			<div id={"open-action-item"} className={itemContentClassName}>
 				{labelBefore}
 				{icon}
 				{labelAfter}
@@ -237,6 +297,41 @@ class ToolbarActionItem extends React.Component {
 		return buttonContent;
 	}
 
+	// Returns a chevron icon if the action icon is displaying a sub-menu or
+	// sub-panel. The chevron will:
+	//  * point right if this action item is in a drop down menu
+	//  * point down if this action item is displayed with text in the toolbar
+	//    and the menu isn't displayed
+	//  * point up if this action item is displayed with text in the toolbar
+	//    and the menu is displayed
+	//  * be a mini-chevron (small triangle in the bottom right of icon) if this
+	//    action item isn't displayed with text.
+	generateChevronIcon(actionObj) {
+		if (actionObj.subMenu || actionObj.subPanel) {
+			if (this.props.overflow) {
+				return (<ChevronRight16 />);
+			}
+			if (actionObj.incLabelWithIcon === "before" ||
+					actionObj.incLabelWithIcon === "after") {
+				const chev = this.state.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);
+				return (<div className={"toolbar-up-down-chevron"}>{chev}</div>);
+			}
+			return this.generateChevronMini();
+		}
+		return null;
+	}
+
+	// Returns an svg to display the little triangle that appears in the bottom
+	// right corner of icons that, when clicked, show a drop down menu.
+	generateChevronMini() {
+		const path = this.props.size === "sm" ? "M 29 29 L 29 23 23 29 Z" : "M 37 37 L 37 30 30 37 Z";
+		return (
+			<svg className="toolbar-tick-svg">
+				<path d={path} className="toolbar-tick-mark" />
+			</svg>
+		);
+	}
+
 	generateActionName(actionObj) {
 		return this.props.actionObj.action + "-action";
 	}
@@ -277,34 +372,19 @@ class ToolbarActionItem extends React.Component {
 	// supPanel field  OR a sub-menu which is a list of options which is created
 	// from the array of items the caller passes in the subMenu field.
 	generateSubArea() {
-		if (this.props.displaySubArea) {
-			const style = this.calcSubAreaStyle();
-
-			if (this.props.actionObj.subPanel) {
-				return (
-					<div style={style} className={"toolbar-popover-list subpanel"}>
-						{this.props.actionObj.subPanel}
-					</div>
-				);
-			}
-			const subMenuItems = this.props.generateToolbarItems(this.props.actionObj.subMenu, true, false);
-
-			return (
-				<div style={style} className={"toolbar-popover-list submenu"}>
-					{subMenuItems}
-				</div>
-			);
-		}
-
-		return null;
-	}
+		const elements = document.getElementsByClassName(this.generateActionName());
+		const actionItemRect = elements && elements.length > 0 ? elements[0].getBoundingClientRect() : { top: 0, left: 0, width: 120 };
 
-	calcSubAreaStyle() {
-		const className = this.generateActionName();
-		const elements = document.getElementsByClassName(className);
-		const rect = elements && elements.length > 0 ? elements[0].getBoundingClientRect() : { top: 0, left: 0, width: 120 };
-		const style = { top: rect.top - 1, left: rect.left + rect.width };
-		return style;
+		return (
+			<ToolbarActionSubArea
+				actionObj={this.props.actionObj}
+				generateToolbarItems={this.props.generateToolbarItems}
+				closeSubArea={this.props.actionObj.closeSubAreaOnClick ? this.closeSubArea : null}
+				actionItemRect={actionItemRect}
+				containingDivId={this.props.containingDivId}
+				expandDirection={this.props.overflow ? "horizontal" : "vertical" }
+			/>
+		);
 	}
 
 	render() {
@@ -330,7 +410,7 @@ class ToolbarActionItem extends React.Component {
 			kindAsClass,
 			actionName);
 
-		const subArea = this.generateSubArea();
+		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
 
 		return (
 			<div className={itemClassName} data-toolbar-item={isToolbarItem} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
@@ -362,6 +442,8 @@ ToolbarActionItem.propTypes = {
 		textContent: PropTypes.string,
 		isSelected: PropTypes.bool,
 		kind: PropTypes.string,
+		closeSubAreaOnClick: PropTypes.bool,
+		getSubPanelCloseFn: PropTypes.func,
 		subMenu: PropTypes.array,
 		subPanel: PropTypes.object,
 		jsx: PropTypes.object,
@@ -373,10 +455,10 @@ ToolbarActionItem.propTypes = {
 	}),
 	tooltipDirection: PropTypes.oneOf(["top", "bottom"]),
 	toolbarActionHandler: PropTypes.func.isRequired,
-	subMenuActionHandler: PropTypes.func.isRequired,
 	generateToolbarItems: PropTypes.func.isRequired,
+	setResizeHandler: PropTypes.func,
 	instanceId: PropTypes.number.isRequired,
-	displaySubArea: PropTypes.bool,
+	containingDivId: PropTypes.string,
 	overflow: PropTypes.bool,
 	onFocus: PropTypes.func,
 	size: PropTypes.oneOf(["md", "sm"])

package/src/toolbar/toolbar-action-sub-area.jsx

@@ -0,0 +1,126 @@
+/*
+ * 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 { genElementByClass, genRectByClass } from "./toolbar-utils.js";
+
+class ToolbarActionSubArea extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.onClick = this.onClick.bind(this);
+	}
+
+	componentDidMount() {
+		if (this.props.containingDivId) {
+			this.adjustSubAreaPosition();
+		}
+	}
+
+	// If we are given a closeSubArea function then call it. We will only have
+	// such a function if the user has specified the closeSubAreaOnClick prop for
+	// the parent action AND provided the user has not stopped event propogation.
+	onClick() {
+		if (this.props.closeSubArea) {
+			this.props.closeSubArea();
+		}
+	}
+
+	// Adjust the position of the sub-area to make sure it doesn't extend
+	// outside the containing divs boundary. We need to do this after the subarea
+	// has been mounted so we can query its size and position.
+	adjustSubAreaPosition() {
+		const containingDiv = document.getElementById(this.props.containingDivId);
+		const containingDivRect = containingDiv.getBoundingClientRect();
+
+		const classToGet = this.props.actionObj.subPanel ? "subpanel" : "submenu";
+
+		const thisArea = genElementByClass(classToGet, containingDiv);
+		const thisAreaRect = genRectByClass(classToGet, containingDiv);
+
+		const outsideBottom = thisAreaRect.bottom - containingDivRect.bottom;
+		const outsideRight = thisAreaRect.right - containingDivRect.right;
+
+		if (this.props.expandDirection === "vertical") {
+			if (outsideBottom > 0) {
+				const newTop = this.props.actionItemRect.top - thisAreaRect.height;
+				thisArea.style.top = newTop + "px";
+			}
+
+			if (outsideRight > 0) {
+				const newLeft = this.props.actionItemRect.left - outsideRight - 2;
+				thisArea.style.left = newLeft + "px";
+			}
+
+		} else {
+			if (outsideBottom > 0) {
+				const newTop = thisAreaRect.top - outsideBottom - 2;
+				thisArea.style.top = newTop + "px";
+			}
+
+			if (outsideRight > 0) {
+				const newLeft = this.props.actionItemRect.left - thisAreaRect.width;
+				thisArea.style.left = newLeft + "px";
+			}
+		}
+	}
+
+	generateSubAreaStyle() {
+		if (this.props.expandDirection === "vertical") {
+			return {
+				top: this.props.actionItemRect.bottom + 1,
+				left: this.props.actionItemRect.left
+			};
+		}
+		return {
+			top: this.props.actionItemRect.top - 1,
+			left: this.props.actionItemRect.left + this.props.actionItemRect.width
+		};
+	}
+
+	render() {
+		const style = this.generateSubAreaStyle();
+
+		if (this.props.actionObj.subPanel) {
+			return (
+				<div style={style} className={"toolbar-popover-list subpanel"} onClick={this.onClick}>
+					{this.props.actionObj.subPanel}
+				</div>
+			);
+		} else if (this.props.actionObj.subMenu) {
+			const subMenuItems = this.props.generateToolbarItems(this.props.actionObj.subMenu, true, false);
+
+			return (
+				<div style={style} className={"toolbar-popover-list submenu"} onClick={this.onClick}>
+					{subMenuItems}
+				</div>
+			);
+		}
+		return null;
+	}
+}
+
+ToolbarActionSubArea.propTypes = {
+	actionObj: PropTypes.object.isRequired,
+	generateToolbarItems: PropTypes.func.isRequired,
+	closeSubArea: PropTypes.func,
+	actionItemRect: PropTypes.object.isRequired,
+	expandDirection: PropTypes.string.isRequired,
+	containingDivId: PropTypes.string
+};
+
+export default ToolbarActionSubArea;

package/src/toolbar/toolbar-overflow-item.jsx

@@ -17,36 +17,83 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import { v4 as uuid4 } from "uuid";
 import { Button } from "carbon-components-react";
 import { OverflowMenuVertical16 } from "@carbon/icons-react";
+import ToolbarOverflowMenu from "./toolbar-overflow-menu.jsx";
 
 class ToolbarOverflowItem extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			showExtendedMenu: false
+		};
+		this.uuid = uuid4();
 		this.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);
+		this.clickOutside = this.clickOutside.bind(this);
+	}
+
+	// We must remove the eventListener in case this class is unmounted due
+	// to the toolbar getting redrawn.
+	componentWillUnmount() {
+		document.removeEventListener("click", this.clickOutside, false);
+	}
+
+	genOverflowButtonClass() {
+		return "toolbar-spacer toolbar-index-" + this.props.index + " toolbar-uuid-" + this.uuid;
 	}
 
 	toggleExtendedMenu() {
-		this.props.toggleExtendedMenu(this.props.index);
+		if (this.state.showExtendedMenu) {
+			document.removeEventListener("click", this.clickOutside, false);
+		} else {
+			document.addEventListener("click", this.clickOutside, false);
+		}
+
+		if (this.props.setResizeHandler) {
+			if (this.state.showExtendedMenu) {
+				this.props.setResizeHandler(null);
+			} else {
+				this.props.setResizeHandler(() => {
+					this.setState({ showExtendedMenu: false });
+				});
+			}
+		}
+
+		this.setState({ showExtendedMenu: !this.state.showExtendedMenu });
+	}
+
+	clickOutside(evt) {
+		if (this.state.showExtendedMenu) {
+			const items = document.getElementsByClassName("toolbar-uuid-" + this.uuid);
+			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
+
+			if (!isOver) {
+				this.setState({ showExtendedMenu: false });
+			}
+		}
 	}
 
 	render() {
+		if (this.props.setResizeHandler && !this.state.showExtendedMenu) {
+			this.props.setResizeHandler(null);
+		}
+
 		let overflowMenu = null;
-		if (this.props.showExtendedMenu) {
+		if (this.state.showExtendedMenu) {
 			const menuItems = this.props.generateExtensionMenuItems(this.props.index);
-			if (menuItems.length > 0) {
-				overflowMenu = (
-					<div className={"toolbar-popover-list"}>
-						{menuItems}
-					</div>
-				);
-			}
+			overflowMenu = (
+				<ToolbarOverflowMenu
+					menuItems={menuItems}
+					containingDivId={this.props.containingDivId}
+					buttonClass={"toolbar-uuid-" + this.uuid}
+				/>
+			);
 		}
 
-		const className = "toolbar-spacer toolbar-index-" + this.props.index;
-
 		return (
-			<div className={className} >
+			<div className={this.genOverflowButtonClass()} >
 				<div className={"toolbar-overflow-item"}>
 					<Button kind="ghost"
 						tabIndex={-1}
@@ -69,10 +116,10 @@ class ToolbarOverflowItem extends React.Component {
 }
 
 ToolbarOverflowItem.propTypes = {
-	showExtendedMenu: PropTypes.bool.isRequired,
-	toggleExtendedMenu: PropTypes.func.isRequired,
 	index: PropTypes.number.isRequired,
 	generateExtensionMenuItems: PropTypes.func,
+	setResizeHandler: PropTypes.func,
+	containingDivId: PropTypes.string,
 	onFocus: PropTypes.func,
 	label: PropTypes.string,
 	size: PropTypes.oneOf(["md", "sm"])

package/src/toolbar/toolbar-overflow-menu.jsx

@@ -0,0 +1,77 @@
+/*
+ * 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.
+ * 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 { genElementByClass, genRectByClass } from "./toolbar-utils.js";
+
+class ToolbarOverflowMenu extends React.Component {
+
+	componentDidMount() {
+		if (this.props.containingDivId) {
+			this.setSubAreaStyle();
+		}
+	}
+
+	setSubAreaStyle() {
+		const containingDiv = document.getElementById(this.props.containingDivId);
+		const containingDivRect = containingDiv.getBoundingClientRect();
+
+		const mainMenu = genElementByClass("toolbar-popover-list", containingDiv);
+		const mainMenuRect = genRectByClass("toolbar-popover-list", containingDiv);
+
+		if (mainMenuRect) {
+			const overflowButtonRect = genRectByClass(this.props.buttonClass, containingDiv);
+
+			if (overflowButtonRect) {
+				const contextToolbaRect = genRectByClass("context-toolbar", containingDiv);
+
+				if (contextToolbaRect) {
+					const outsideRight = mainMenuRect.right - containingDivRect.right;
+					if (outsideRight > 0) {
+						const overflowIconOffsetX = overflowButtonRect.left - contextToolbaRect.left;
+						mainMenu.style.left = (overflowIconOffsetX - outsideRight - 2) + "px";
+					}
+
+					const outsideBottom = mainMenuRect.bottom - containingDivRect.bottom;
+					if (outsideBottom > 0) {
+						mainMenu.style.top = -mainMenuRect.height + "px";
+					}
+				}
+			}
+		}
+	}
+
+	render() {
+		let overflowMenu = null;
+		if (this.props.menuItems.length > 0) {
+			overflowMenu = (
+				<div className={"toolbar-popover-list"}>
+					{this.props.menuItems}
+				</div>
+			);
+		}
+		return overflowMenu;
+	}
+}
+
+ToolbarOverflowMenu.propTypes = {
+	menuItems: PropTypes.array.isRequired,
+	containingDivId: PropTypes.string,
+	buttonClass: PropTypes.string
+};
+
+export default ToolbarOverflowMenu;

package/src/toolbar/toolbar-utils.js

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ * 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.
+ */
+
+export const genElementByClass = (className, containingDiv) => {
+	const elements = containingDiv.getElementsByClassName(className);
+
+	if (elements && elements.length > 0) {
+		return elements[0];
+	}
+	return null;
+};
+
+export const genRectByClass = (className, containingDiv) => {
+	const element = genElementByClass(className, containingDiv);
+
+	if (element) {
+		return element.getBoundingClientRect();
+	}
+	return null;
+};