@elyra/canvas 12.36.0 → 12.38.0

package/locales/common-canvas/locales/sv.json

@@ -21,6 +21,7 @@
   "canvas.stateTagReadOnly": "Skrivskyddad",
   "canvas.stateTagTipLocked": "Det här flödet är låst och kan inte redigeras.",
   "canvas.stateTagTipReadOnly": "Det här flödet kan inte redigeras.",
+  "canvas.returnToPrevious": "Återgå till föregående flöde",
   "comment.colorBackground": "Färgbakgrund",
   "comment.editComment": "Redigera kommentar",
   "node.createSupernode": "Skapa supernod",

package/locales/common-canvas/locales/zh-CN.json

@@ -21,6 +21,7 @@
   "canvas.stateTagReadOnly": "只读",
   "canvas.stateTagTipLocked": "此流已锁定，无法编辑。",
   "canvas.stateTagTipReadOnly": "无法编辑此流。",
+  "canvas.returnToPrevious": "返回到上一个流",
   "comment.colorBackground": "设置背景色",
   "comment.editComment": "编辑注释",
   "node.createSupernode": "创建超节点",

package/locales/common-canvas/locales/zh-TW.json

@@ -21,6 +21,7 @@
   "canvas.stateTagReadOnly": "唯讀",
   "canvas.stateTagTipLocked": "此流程已鎖定且無法編輯。",
   "canvas.stateTagTipReadOnly": "無法編輯此流程。",
+  "canvas.returnToPrevious": "回到前一個流程",
   "comment.colorBackground": "顏色背景",
   "comment.editComment": "編輯註解",
   "node.createSupernode": "建立超級節點",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elyra/canvas",
-  "version": "12.36.0",
+  "version": "12.38.0",
   "description": "Elyra common-canvas",
   "main": "dist/common-canvas.js",
   "module": "dist/common-canvas.es.js",
@@ -34,11 +34,10 @@
     "markdown-it": "^13.0.1",
     "prop-types": "^15.7.2",
     "react-codemirror2": "^7.2.1",
-    "react-contextmenu": "^2.14.0",
     "react-draggable": "^4.4.4",
     "react-inlinesvg": "^2.1.0",
     "react-portal": "^4.2.1",
-    "react-resize-detector": "^5.2.0",
+    "react-resize-detector": "^9.1.0",
     "react-virtualized": "^9.22.2",
     "redux": "^4.0.5",
     "seedrandom": "^3.0.5",

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

@@ -250,11 +250,13 @@ export default class CanvasController {
 	// elyra-ai pipeline-schemas repo. Documents conforming to older versions may be
 	// provided but they will be upgraded to the most recent version.
 	setPipelineFlow(flow) {
+		this.logger.logStartTimer("setPipelineFlow");
 		this.objectModel.setPipelineFlow(flow);
 		// When a pipeline flow is loaded it may have expanded supernodes which
 		// refer to external pipelines and these need to be loaded for the
 		// pipeline to display correctly.
 		this.ensureVisibleExpandedPipelinesAreLoaded();
+		this.logger.logEndTimer("setPipelineFlow");
 	}
 
 	// Clears the pipleine flow and displays an empty canvas.
@@ -1567,6 +1569,11 @@ export default class CanvasController {
 		return this.objectModel.isRightFlyoutOpen();
 	}
 
+	isDisplayingFullPageSubFlow() {
+		const breadcrumbs = this.objectModel.getBreadcrumbs();
+		return breadcrumbs.length > 1;
+	}
+
 	// Displays a pipeline (identified by the pipelineId passed in). This must be
 	// one of the pipelines referenced by the current set of breadcrumbs. It
 	// cannot be used to open a new pipeline outside the current set of breadcruumbs.

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

@@ -27,9 +27,9 @@ import CommonCanvasContextToolbar from "./cc-context-toolbar.jsx";
 import CommonCanvasTextToolbar from "./cc-text-toolbar.jsx";
 import CommonCanvasStateTag from "./cc-state-tag.jsx";
 import CanvasUtils from "./common-canvas-utils.js";
-import { FlowData16 } from "@carbon/icons-react";
+import { Button } from "carbon-components-react";
+import { FlowData16, ArrowLeft16 } from "@carbon/icons-react";
 import { DND_DATA_TEXT, STATE_TAG_LOCKED, STATE_TAG_READ_ONLY } from "./constants/canvas-constants";
-
 import Logger from "../logging/canvas-logger.js";
 import SVGCanvasD3 from "./svg-canvas-d3.js";
 
@@ -92,6 +92,7 @@ class CanvasContents extends React.Component {
 		this.onKeyDown = this.onKeyDown.bind(this);
 		this.onKeyUp = this.onKeyUp.bind(this);
 		this.onMouseMove = this.onMouseMove.bind(this);
+		this.onClickReturnToPrevious = this.onClickReturnToPrevious.bind(this);
 
 		// Variables to handle strange HTML drag and drop behaviors. That is, pairs
 		// of dragEnter/dragLeave events are fired as an external object is
@@ -200,12 +201,16 @@ class CanvasContents extends React.Component {
 			} else if (CanvasUtils.isCmndCtrlPressed(evt) &&
 					!evt.shiftKey && evt.keyCode === Z_KEY && actions.undo) {
 				CanvasUtils.stopPropagationAndPreventDefault(evt);
-				this.props.canvasController.keyboardActionHandler("undo");
+				if (this.props.canvasController.canUndo()) {
+					this.props.canvasController.keyboardActionHandler("undo");
+				}
 
 			} else if (CanvasUtils.isCmndCtrlPressed(evt) &&
 					((evt.shiftKey && evt.keyCode === Z_KEY) || evt.keyCode === Y_KEY && actions.redo)) {
 				CanvasUtils.stopPropagationAndPreventDefault(evt);
-				this.props.canvasController.keyboardActionHandler("redo");
+				if (this.props.canvasController.canRedo()) {
+					this.props.canvasController.keyboardActionHandler("redo");
+				}
 
 			} else if (CanvasUtils.isCmndCtrlPressed(evt) && evt.keyCode === C_KEY && actions.copyToClipboard) {
 				CanvasUtils.stopPropagationAndPreventDefault(evt);
@@ -266,6 +271,13 @@ class CanvasContents extends React.Component {
 		}
 	}
 
+	// Handles the click on the "Return to previous flow" button.
+	onClickReturnToPrevious(evt) {
+		evt.stopPropagation();
+		evt.preventDefault();
+		this.props.canvasController.displayPreviousPipeline();
+	}
+
 	setCanvasInfo() {
 		// TODO - Eventually move nodeLayout and canvasLayout into redux and then
 		// pass them into this.svgCanvasD3() as props.
@@ -333,6 +345,30 @@ class CanvasContents extends React.Component {
 		return emptyCanvas;
 	}
 
+	getReturnToPreviousBtn() {
+		let returnToPrevious = null;
+		if (!this.props.canvasController.isPrimaryPipelineEmpty() &&
+				(this.props.canvasController.isDisplayingFullPageSubFlow() ||
+					this.props.canvasConfig?.enableCanvasLayout?.alwaysDisplayBackToParentFlow)) {
+			const label = this.getLabel("canvas.returnToPrevious");
+			returnToPrevious = (
+				<div className={"return-to-previous"}>
+					<Button kind={"tertiary"}
+						onClick={this.onClickReturnToPrevious}
+						aria-label={label}
+						size={"md"}
+					>
+						<div className={"return-to-previous-content"}>
+							<ArrowLeft16 />
+							<span>{label}</span>
+						</div>
+					</Button>
+				</div>
+			);
+		}
+		return returnToPrevious;
+	}
+
 	getContextMenu() {
 		if (this.props.canvasConfig.enableContextToolbar) {
 			return (
@@ -531,6 +567,7 @@ class CanvasContents extends React.Component {
 
 		const stateTag = this.getStateTag();
 		const emptyCanvas = this.getEmptyCanvas();
+		const returnToPreviousBtn = this.getReturnToPreviousBtn();
 		const contextMenu = this.getContextMenu();
 		const textToolbar = this.getTextToolbar();
 		const dropZoneCanvas = this.getDropZone();
@@ -549,6 +586,7 @@ class CanvasContents extends React.Component {
 					>
 						{svgCanvasDiv}
 						{emptyCanvas}
+						{returnToPreviousBtn}
 						{stateTag}
 						{contextMenu}
 						{textToolbar}

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

@@ -863,9 +863,16 @@ export default class CanvasUtils {
 	}
 
 	// Returns an array of selected object IDs for nodes, comments and links
-	// that are within the region provided. Links are only included if
+	// that are within the region (inReg) provided. Links are only included if
 	// includeLinks is truthy.
-	static selectInRegion(region, pipeline, includeLinks, linkType, enableAssocLinkType) {
+	static selectInRegion(inReg, pipeline, includeLinks, linkType, enableAssocLinkType) {
+		const region = {
+			x1: inReg.x,
+			y1: inReg.y,
+			x2: inReg.x + inReg.width,
+			y2: inReg.y + inReg.height
+		};
+
 		var regionSelections = [];
 		for (const node of pipeline.nodes) {
 			if (!this.isSuperBindingNode(node) && // Don't include binding nodes in select

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

@@ -57,7 +57,6 @@ $panel-border-color: $ui-03;
 	cursor: default;
 	overflow: hidden;
 	position: relative; // This allows the State Tag to have positio: absolute
-
 }
 
 .right-flyout-panel {
@@ -74,7 +73,6 @@ $panel-border-color: $ui-03;
 	// Make sure the bottom panel appear above the empty canvas content
 	// (when displayed) in the flow editor div.
 	z-index: 1;
-
 }
 
 .bottom-panel-drag {
@@ -201,7 +199,6 @@ $panel-border-color: $ui-03;
 	grid-template-columns: 1fr;
 }
 
-
 /* Styles for empty canvas objects */
 
 .empty-canvas {
@@ -241,6 +238,36 @@ $panel-border-color: $ui-03;
 	text-align: center;
 }
 
+/* Styles for 'Return to previous flow' button - shown for full-page sub-flows */
+
+.return-to-previous {
+	position: absolute;
+	left: 15px;
+	top: 15px;
+	background-color: $ui-background;
+	& button {
+		background-color: $ui-background;
+		padding-right: 20px;
+	}
+	& button:hover,
+	& button:focus {
+		background-color: $ui-03;
+		color: $interactive-01;
+	}
+	& .return-to-previous-content {
+		display: flex;
+		background-color: transparent;
+		& svg {
+			margin-top: 1px;
+			margin-left: 4px;
+			margin-right: 7px;
+		}
+		& span {
+			padding-bottom: 2px;
+		}
+	}
+}
+
 /* Styles for drop zone canvas objects */
 
 .dropzone-canvas {

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

@@ -235,12 +235,6 @@ export const NODE_WARNING_ICON =
 	"<path style=\"stroke-width: 0; fill: #161616; opacity: 1;\" d=\"M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z\"></path>" +
 	"</svg>";
 
-export const LEFT_ARROW_ICON =
-	"<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" " +
-	"width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" style=\"will-change: transform;\">" +
-	"<path d=\"M13 26L14.41 24.59 6.83 17 29 17 29 15 6.83 15 14.41 7.41 13 6 3 16 13 26z\"></path>" +
-	"<title>Arrow left</title></svg>";
-
 // This image is stored in the format to be shown as an <img> in the JSX
 // created by palette-flyout-content-category render method.
 export const SAVED_NODES_FOLDER_ICON =

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

@@ -107,9 +107,7 @@ export default class SVGCanvasD3 {
 	}
 
 	convertPageCoordsToSnappedCanvasCoords(pos) {
-		let positon = this.renderer.convertPageCoordsToCanvasCoords(pos.x, pos.y);
-		positon = this.renderer.getMousePosSnapToGrid(positon);
-		return positon;
+		return this.renderer.convertPageCoordsToSnappedCanvasCoords(pos);
 	}
 
 	nodeTemplateDragStart(nodeTemplate) {

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

@@ -21,10 +21,6 @@ $canvas-background-color: $ui-background;
 $region-selector-stroke-color: $ui-05;
 $region-selector-fill-color: $ui-03;
 
-// 'Back to previous flow' control colors
-$back-to-previous-flow-box-color: $interactive-01;
-$back-to-previous-flow-box-fill-hover: $ui-03;
-
 // Node colors
 $node-body-stroke: $ui-05;
 $node-body-fill: $ui-01;
@@ -154,28 +150,6 @@ $link-highlight-color: $support-04;
 	fill: transparent;
 }
 
-/* Back to Previous Flow control */
-
-.d3-back-to-previous-flow-box {
-	stroke: $back-to-previous-flow-box-color;
-	fill: $canvas-background-color;
-}
-
-.d3-back-to-previous-flow-box[data-pointer-hover="yes"] {
-	stroke: $back-to-previous-flow-box-color;
-	fill: $back-to-previous-flow-box-fill-hover;
-}
-
-.d3-back-to-previous-flow-text {
-	font-size: 14px;
-	font-weight: 400;
-	fill: $back-to-previous-flow-box-color;
-}
-
-.d3-back-to-previous-flow-box, .d3-back-to-previous-flow-text {
-	cursor: pointer;
-}
-
 /* Ghost div and node used when dragging a node from the palette */
 
 .d3-ghost-div {

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

@@ -76,7 +76,13 @@ export default class SVGCanvasPipeline {
 		return (typeof node === "undefined") ? null : node;
 	}
 
+	// Returns nodes from the active pipeline. If nodeIds is
+	// provided as an array the nodes correspondong to those IDs
+	// are returned otherwise all nodes are retunred.
 	getNodes(nodeIds) {
+		if (!nodeIds) {
+			return this.pipeline.nodes;
+		}
 		const nodes = [];
 		nodeIds.forEach((nId) => {
 			const n = this.getNode(nId);