@elyra/canvas 12.33.0 → 12.35.0

package/src/common-canvas/cc-central-items.jsx

@@ -17,6 +17,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
+import Palette from "../palette/palette.jsx";
+import CommonCanvasTooltip from "./cc-tooltip.jsx";
 import CanvasContents from "./cc-contents.jsx";
 import CommonCanvasToolbar from "./cc-toolbar.jsx";
 import CommonCanvasRightFlyout from "./cc-right-flyout.jsx";
@@ -31,42 +33,84 @@ class CommonCanvasCentralItems extends React.Component {
 		this.logger = new Logger("CC-CentralItems");
 	}
 
+	// Prevent the default behavior (which is to show a plus-sign pointer) as
+	// an object is being dragged over the common canvas components.
+	// Note: this is overriden by the canvas area itself to allow external objects
+	// to be dragged over it.
+	onDragOver(evt) {
+		evt.preventDefault();
+	}
+
+	// Prevent an object being dropped on the common canvas causing a file
+	// download event (which is the default!). Note: this is overriden by the
+	// canvas area itself to allow external objects to be dropped on it.
+	onDrop(evt) {
+		evt.preventDefault();
+	}
+
+	generateClass() {
+		let className = "common-canvas";
+
+		className += (
+			!this.props.enableEditingActions
+				? " config-editing-actions-false"
+				: "");
+
+		className += (
+			this.props.enableParentClass
+				? " " + this.props.enableParentClass
+				: "");
+
+		return className;
+	}
+
 	render() {
 		this.logger.log("render");
 
+		const tip = (<CommonCanvasTooltip canvasController={this.props.canvasController} />);
+		const palette = (<Palette canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
 		const rightFlyout = (<CommonCanvasRightFlyout />);
 		const canvasToolbar = (<CommonCanvasToolbar canvasController={this.props.canvasController} />);
-		const notificationPanel = (<NotificationPanel canvasController={this.props.canvasController} />);
 		const canvasContents = (<CanvasContents canvasController={this.props.canvasController} />);
 		const bottomPanel = (<CanvasBottomPanel canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
 		const topPanel = (<CanvasTopPanel canvasController={this.props.canvasController} containingDivId={this.props.containingDivId} />);
+		const notificationPanel = (<NotificationPanel canvasController={this.props.canvasController} />);
 
-		let centralItems = null;
+		let rightSideItems = null;
 		if (this.props.enableRightFlyoutUnderToolbar) {
-			centralItems = (
-				<div className="common-canvas-right-side-items-under-toolbar">
+			const templateRows = this.props.toolbarIsOpen ? "auto 1fr" : "1fr";
+			const templateCols = this.props.rightFlyoutIsOpen ? "1fr auto" : "1fr";
+			let templateRows2 = this.props.topPanelIsOpen ? "auto 1fr" : "1fr";
+			templateRows2 += this.props.bottomPanelIsOpen ? " auto" : "";
+
+			rightSideItems = (
+				<div className="common-canvas-right-side-items-under-toolbar" style={{ gridTemplateRows: templateRows }}>
 					{canvasToolbar}
-					<div id={this.props.containingDivId} className="common-canvas-items-container-under-toolbar">
-						<div className="common-canvas-with-bottom-panel">
-							{canvasContents}
+					<div id={this.props.containingDivId} className="common-canvas-items-container-under-toolbar" style={{ gridTemplateColumns: templateCols }}>
+						<div className="common-canvas-with-top-and-bottom-panel" style={{ gridTemplateRows: templateRows2 }}>
 							{topPanel}
+							{canvasContents}
 							{bottomPanel}
 						</div>
-						<div>
-							{rightFlyout}
-						</div>
-						{notificationPanel}
+						{rightFlyout}
 					</div>
+					{notificationPanel}
 				</div>
 			);
 
 		} else {
-			centralItems = (
+			let templateRows = "";
+			templateRows += this.props.toolbarIsOpen ? "auto" : "";
+			templateRows += this.props.topPanelIsOpen ? " auto" : "";
+			templateRows += " 1fr"; // For canvas contents
+			templateRows += this.props.bottomPanelIsOpen ? " auto" : "";
+
+			rightSideItems = (
 				<div className="common-canvas-right-side-items">
-					<div id={this.props.containingDivId} className="common-canvas-items-container">
+					<div id={this.props.containingDivId} className="common-canvas-items-container" style={{ gridTemplateRows: templateRows }}>
 						{canvasToolbar}
-						{canvasContents}
 						{topPanel}
+						{canvasContents}
 						{bottomPanel}
 						{notificationPanel}
 					</div>
@@ -75,7 +119,15 @@ class CommonCanvasCentralItems extends React.Component {
 			);
 		}
 
-		return centralItems;
+		const divClassName = this.generateClass();
+
+		return (
+			<div className={divClassName} onDragOver={this.onDragOver} onDrop={this.onDrop}>
+				{palette}
+				{rightSideItems}
+				{tip}
+			</div>
+		);
 	}
 }
 
@@ -85,11 +137,23 @@ CommonCanvasCentralItems.propTypes = {
 	containingDivId: PropTypes.string.isRequired,
 
 	// Provided by Redux
-	enableRightFlyoutUnderToolbar: PropTypes.bool
+	enableParentClass: PropTypes.string,
+	enableEditingActions: PropTypes.bool,
+	enableRightFlyoutUnderToolbar: PropTypes.bool,
+	toolbarIsOpen: PropTypes.bool,
+	topPanelIsOpen: PropTypes.bool,
+	bottomPanelIsOpen: PropTypes.bool,
+	rightFlyoutIsOpen: PropTypes.bool
 };
 
 const mapStateToProps = (state, ownProps) => ({
-	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar
+	enableParentClass: state.canvasconfig.enableParentClass,
+	enableEditingActions: state.canvasconfig.enableEditingActions,
+	enableRightFlyoutUnderToolbar: state.canvasconfig.enableRightFlyoutUnderToolbar,
+	toolbarIsOpen: (state.canvasconfig.enableToolbarLayout !== "None"),
+	topPanelIsOpen: state.toppanel.isOpen,
+	bottomPanelIsOpen: state.bottompanel.isOpen,
+	rightFlyoutIsOpen: state.rightflyout.isOpen
 });
 
 export default connect(mapStateToProps)(CommonCanvasCentralItems);

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

@@ -536,39 +536,23 @@ class CanvasContents extends React.Component {
 		const dropZoneCanvas = this.getDropZone();
 		const svgCanvasDiv = this.getSVGCanvasDiv();
 
-		const mainClassName = this.props.canvasConfig.enableRightFlyoutUnderToolbar
-			? "common-canvas-main"
-			: null;
-
-		let dropDivClassName = this.props.canvasConfig.enableRightFlyoutUnderToolbar
-			? "common-canvas-drop-div-under-toolbar"
-			: "common-canvas-drop-div";
-
-		dropDivClassName = this.props.canvasConfig.enableToolbarLayout === "None"
-			? dropDivClassName + " common-canvas-toolbar-none"
-			: dropDivClassName;
-
-		dropDivClassName = this.props.bottomPanelIsOpen
-			? dropDivClassName + " common-canvas-bottom-panel-is-open"
-			: dropDivClassName;
-
 		return (
-			<main aria-label={this.getLabel("canvas.label")} role="main" className={mainClassName}>
+			<main aria-label={this.getLabel("canvas.label")} role="main">
 				<ReactResizeDetector handleWidth handleHeight onResize={this.refreshOnSizeChange}>
 					<div
 						id={this.mainCanvasDivId}
-						className={dropDivClassName}
+						className="common-canvas-drop-div"
 						onDrop={this.drop}
 						onDragOver={this.dragOver}
 						onDragEnter={this.dragEnter}
 						onDragLeave={this.dragLeave}
 					>
+						{stateTag}
 						{emptyCanvas}
 						{svgCanvasDiv}
 						{contextMenu}
 						{textToolbar}
 						{dropZoneCanvas}
-						{stateTag}
 					</div>
 				</ReactResizeDetector>
 			</main>

package/src/common-canvas/cc-right-flyout.jsx

@@ -28,7 +28,7 @@ class CommonCanvasRightFlyout extends React.Component {
 	render() {
 		this.logger.log("render");
 
-		let rightFlyout = (<div className="right-flyout-panel" />);
+		let rightFlyout = null;
 
 		if (this.props.content && this.props.isOpen) {
 			const rfClass = this.props.enableRightFlyoutUnderToolbar

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

@@ -18,8 +18,6 @@ import React from "react";
 import { Provider } from "react-redux";
 import { injectIntl } from "react-intl";
 import PropTypes from "prop-types";
-import Palette from "../palette/palette.jsx";
-import CommonCanvasTooltip from "./cc-tooltip.jsx";
 import CommonCanvasCentralItems from "./cc-central-items.jsx";
 import Logger from "../logging/canvas-logger.js";
 
@@ -43,21 +41,6 @@ class CommonCanvas extends React.Component {
 		this.initializeController(this.props);
 	}
 
-	// Prevent the default behavior (which is to show a plus-sign pointer) as
-	// an object is being dragged over the common canvas components.
-	// Note: this is overriden by the canvas area itself to allow external objects
-	// to be dragged over it.
-	onDragOver(evt) {
-		evt.preventDefault();
-	}
-
-	// Prevent an object being dropped on the common canvas causing a file
-	// download event (which is the default!). Note: this is overriden by the
-	// canvas area itself to allow external objects to be dropped on it.
-	onDrop(evt) {
-		evt.preventDefault();
-	}
-
 	initializeController(props) {
 		this.logger.logStartTimer("initializeController");
 		props.canvasController.setCanvasConfig(props.config);
@@ -87,44 +70,12 @@ class CommonCanvas extends React.Component {
 		this.logger.logEndTimer("initializeController");
 	}
 
-	generateClass() {
-		let className = "common-canvas";
-
-		className += (
-			!this.isEditingAllowed()
-				? " config-editing-actions-false"
-				: "");
-
-		className += (
-			this.props.config && this.props.config.enableParentClass
-				? " " + this.props.config.enableParentClass
-				: "");
-
-		return className;
-	}
-
-	isEditingAllowed() {
-		return this.props.config &&
-			(typeof this.props.config.enableEditingActions === "undefined" ||
-				this.props.config.enableEditingActions === true);
-	}
-
 	render() {
 		this.logger.log("render");
 
-		const tip = (<CommonCanvasTooltip canvasController={this.props.canvasController} />);
-		const palette = (<Palette canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
-		const centralItems = (<CommonCanvasCentralItems canvasController={this.props.canvasController} containingDivId={this.containingDivId} />);
-
-		const className = this.generateClass();
-
 		return (
 			<Provider store={this.props.canvasController.getStore()}>
-				<div className={className} onDragOver={this.onDragOver} onDrop={this.onDrop}>
-					{palette}
-					{centralItems}
-					{tip}
-				</div>
+				<CommonCanvasCentralItems canvasController={this.props.canvasController} containingDivId={this.containingDivId} />
 			</Provider>
 		);
 	}

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

@@ -40,6 +40,9 @@ $panel-border-color: $ui-03;
 	height: 100%;
 	position: relative;
 	width: 100%;
+	display: grid;
+	grid-template-columns: 1fr;
+	/* grid-template-rows is set dynamically in cc-central-items */
 }
 
 .common-canvas-right-side-items {
@@ -47,37 +50,14 @@ $panel-border-color: $ui-03;
 	display: flex;
 }
 
-.common-canvas-main {
-	width: 100%;
-	height: 100%;
-}
-
-.common-canvas-with-bottom-panel {
-	width: 100%;
-	position: relative;
-
-	.top-panel {
-		top: 0;
-	}
-}
-
 .common-canvas-drop-div {
-	height: calc(100% - #{$toolbar-button-height});
+	height: 100%;
 	width: 100%;
 	min-width: inherit;
-	position: absolute;
 	cursor: default;
-	top: $toolbar-button-height;
 	overflow: hidden;
+	position: relative; // This allows the State Tag to have positio: absolute
 
-	&.common-canvas-toolbar-none {
-		height: 100%;
-		top: 0;
-	}
-
-	&.common-canvas-toolbar-none.common-canvas-bottom-panel-is-open {
-		top: 0;
-	}
 }
 
 .right-flyout-panel {
@@ -90,11 +70,11 @@ $panel-border-color: $ui-03;
 .bottom-panel {
 	display: flex;
 	flex-direction: column;
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	border-top: $panel-border-width solid $panel-border-color;
+	// Make sure the bottom panel appear above the empty canvas content
+	// (when displayed) in the flow editor div.
+	z-index: 1;
+
 }
 
 .bottom-panel-drag {
@@ -119,15 +99,7 @@ $panel-border-color: $ui-03;
 .top-panel {
 	display: flex;
 	flex-direction: column;
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: $toolbar-button-height;
 	border-bottom: $panel-border-width solid $panel-border-color;
-
-	&.common-canvas-toolbar-none {
-		top: 0;
-	}
 }
 
 .common-canvas-toolbar {
@@ -208,23 +180,28 @@ $panel-border-color: $ui-03;
  * enableRightFlyoutUnderToolbar is true. */
 
 .common-canvas-right-side-items-under-toolbar {
+	display: grid;
+	/* grid-template-rows is set dynamically in cc-central-items */
+	grid-template-columns: 1fr;
 	width: 100%;
 }
 
 .common-canvas-items-container-under-toolbar {
-	height: calc(100% - #{$toolbar-button-height});
+	height: 100%;
 	width: 100%;
-	display: flex;
+	display: grid;
+	grid-template-rows: 1fr auto;
+	/* grid-template-columns is set dynamically in cc-central-items */
 }
 
-.common-canvas-drop-div-under-toolbar {
-	height: 100%;
+.common-canvas-with-top-and-bottom-panel {
 	width: 100%;
-	position: relative; // Needed to allow textarea (for commnt editing) to be positiond OK.
-	cursor: default;
-	overflow: hidden;
+	display: grid;
+	/* grid-template-rows is set dynamically in cc-central-items */
+	grid-template-columns: 1fr;
 }
 
+
 /* Styles for empty canvas objects */
 
 .empty-canvas {
@@ -310,8 +287,9 @@ $panel-border-color: $ui-03;
 	@include carbon--type-style("productive-heading-01");
 	color: $inverse-01;
 	background-color: $background-inverse;
+	width: fit-content;
 	height: 40px;
-	position: absolute;
+	position: absolute; /* Positioned relative to the common-canvas-drop-div */
 	left: 50%;
 	top: 16px;
 	transform: translate(-50%, 0%);

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

@@ -72,7 +72,8 @@ export default class SVGCanvasD3 {
 			this.logger.logStartTimer("set canvas info");
 
 			this.canvasInfo = this.cloneCanvasInfo(canvasInfo);
-			this.renderer.setCanvasInfoRenderer(this.canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout);
+			this.config = this.cloneConfig(config);
+			this.renderer.setCanvasInfoRenderer(this.canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, this.config);
 
 			this.logger.logEndTimer("set canvas info", true);
 		}

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

@@ -161,7 +161,7 @@ export default class SVGCanvasPipeline {
 	}
 
 	// Preprocesses the pipeline to set the connected attribute of the ports
-	// for each node. This is used when rendering the connection satus of ports.
+	// for each node. This is used when rendering the connection status of ports.
 	preProcessPipeline(pipeline) {
 		this.setAllPortsDisconnected(pipeline);
 
@@ -176,7 +176,7 @@ export default class SVGCanvasPipeline {
 				link.srcObj = this.getNode(link.srcNodeId);
 				link.trgNode = this.getNode(link.trgNodeId);
 
-				// For node (port) links, we need to set the isPosrtConnected field
+				// For node (port) links, we need to set the isConnected field
 				// for each port.
 				if (link.type === NODE_LINK) {
 					if (link.srcObj) {