@elyra/canvas 12.15.0 → 12.16.0

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

@@ -1540,9 +1540,13 @@ export default class CanvasController {
 		}
 	}
 
-	// Returns the current zoom object for the currently displayed canvas.
+	// Returns the current zoom object for the currently displayed canvas or null
+	// if the canvas is not yet rendered for the first time.
 	getZoom() {
-		return this.getSVGCanvasD3().getZoom();
+		if (this.canvasContents) {
+			return this.getSVGCanvasD3().getZoom();
+		}
+		return null;
 	}
 
 	// Returns a zoom object required to pan the objects (nodes and/or comments)
@@ -2468,7 +2472,7 @@ export default class CanvasController {
 			}
 			case "createSuperNode":
 			case "createSuperNodeExternal": {
-				command = new CreateSuperNodeAction(data, this.objectModel, this.labelUtil);
+				command = new CreateSuperNodeAction(data, this.objectModel, this.labelUtil, this.getCanvasConfig().enableUseCardFromOriginalPorts);
 				this.commandStack.do(command);
 				break;
 			}

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

@@ -354,7 +354,7 @@ export default class CanvasUtils {
 			}
 		}
 
-		return { x: startPointX, y: startPointY };
+		return { x: startPointX, y: startPointY, originX, originY };
 	}
 
 	// Returns a direction NORTH, SOUTH, EAST or WEST which is the direction

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

@@ -3892,6 +3892,8 @@ export default class SVGCanvasRenderer {
 			"y1": startPos.y,
 			"x2": transPos.x,
 			"y2": transPos.y,
+			"originX": startPos.originX,
+			"originY": startPos.originY,
 			"type": linkType }];
 
 		if (this.config.enableAssocLinkCreation) {
@@ -3909,15 +3911,24 @@ export default class SVGCanvasRenderer {
 		const connectionStartSel = this.nodesLinksGrp.selectAll(".d3-new-connection-start");
 		const connectionGuideSel = this.nodesLinksGrp.selectAll(".d3-new-connection-guide");
 
-		connectionLineSel
-			.data(this.drawingNewLinkData.linkArray)
-			.enter()
-			.append("path")
-			.attr("class", "d3-new-connection-line")
-			.attr("linkType", linkType)
-			.merge(connectionLineSel)
-			.attr("d", pathInfo.path)
-			.attr("transform", pathInfo.transform);
+		// For a straight node line, don't draw the new link line when the guide
+		// icon or object is inside the node boundary.
+		if (linkType === NODE_LINK &&
+				this.canvasLayout.linkType === LINK_TYPE_STRAIGHT &&
+				this.nodeUtils.isPointInNodeBoundary(transPos, this.drawingNewLinkData.srcNode)) {
+			this.removeNewLinkLine();
+
+		} else {
+			connectionLineSel
+				.data(this.drawingNewLinkData.linkArray)
+				.enter()
+				.append("path")
+				.attr("class", "d3-new-connection-line")
+				.attr("linkType", linkType)
+				.merge(connectionLineSel)
+				.attr("d", pathInfo.path)
+				.attr("transform", pathInfo.transform);
+		}
 
 		if (this.canvasLayout.linkType !== LINK_TYPE_STRAIGHT) {
 			connectionStartSel
@@ -3970,8 +3981,8 @@ export default class SVGCanvasRenderer {
 	getLinkImageTransform(d) {
 		let angle = 0;
 		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
-			const adjacent = d.x2 - d.x1;
-			const opposite = d.y2 - d.y1;
+			const adjacent = d.x2 - (d.originX || d.x1);
+			const opposite = d.y2 - (d.originY || d.y1);
 			if (adjacent === 0 && opposite === 0) {
 				angle = 0;
 			} else {
@@ -4259,6 +4270,10 @@ export default class SVGCanvasRenderer {
 		this.nodesLinksGrp.selectAll(".d3-new-connection-arrow").remove();
 	}
 
+	removeNewLinkLine() {
+		this.nodesLinksGrp.selectAll(".d3-new-connection-line").remove();
+	}
+
 	dragLinkHandle(d3Event) {
 		const transPos = this.getTransformedMousePos(d3Event);
 		const link = this.draggingLinkData.link;
@@ -4856,15 +4871,13 @@ export default class SVGCanvasRenderer {
 			this.setPortPositionsVertical(node, node.outputs, node.outputPortsWidth, node.layout.outputPortTopPosX, node.layout.outputPortTopPosY);
 		} else {
 			this.setPortPositionsLeftRight(node, node.inputs, node.inputPortsHeight, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosY);
-			this.setPortPositionsLeftRight(node, node.outputs, node.outputPortsHeight, this.getOutputPortRightPosX(node), node.layout.outputPortRightPosY,
+			this.setPortPositionsLeftRight(node, node.outputs, node.outputPortsHeight,
+				this.nodeUtils.getNodeOutputPortRightPosX(node),
+				this.nodeUtils.getNodeOutputPortRightPosY(node),
 				this.config.enableSingleOutputPortDisplay);
 		}
 	}
 
-	getOutputPortRightPosX(node) {
-		return node.width + node.layout.outputPortRightPosX;
-	}
-
 	getOutputPortBottomPosY(node) {
 		return node.height + node.layout.outputPortBottomPosY;
 	}
@@ -5578,8 +5591,10 @@ export default class SVGCanvasRenderer {
 			};
 
 			// If the node has been resized set the resize properties appropriately.
-			if (this.resizeObjInitialInfo.width !== resizeObj.width ||
-					this.resizeObjInitialInfo.height !== resizeObj.height) {
+			// We use some padding because sometimes, when a node is sized back to its
+			// original dimensions, it isn't retunred to EXACTLY its default width/height.
+			if (resizeObj.height > resizeObj.layout.defaultNodeHeight + 2 ||
+					resizeObj.width > resizeObj.layout.defaultNodeWidth + 2) {
 				this.nodeSizingObjectsInfo[resizeObj.id].isResized = true;
 				this.nodeSizingObjectsInfo[resizeObj.id].resizeWidth = resizeObj.width;
 				this.nodeSizingObjectsInfo[resizeObj.id].resizeHeight = resizeObj.height;
@@ -6021,7 +6036,11 @@ export default class SVGCanvasRenderer {
 			? " d3-draggable"
 			: " d3-non-draggable";
 
-		return "d3-node-group" + supernodeClass + draggableClass + customClass;
+		const resizeClass = d.isResized // this.isNodeResized(d)
+			? " d3-resized"
+			: "";
+
+		return "d3-node-group" + supernodeClass + resizeClass + draggableClass + customClass;
 	}
 
 	// Pushes the links to be below nodes within the nodesLinksGrp group.
@@ -6144,6 +6163,8 @@ export default class SVGCanvasRenderer {
 			link.y1 = coords.y1;
 			link.x2 = coords.x2;
 			link.y2 = coords.y2;
+			link.originX = coords.originX;
+			link.originY = coords.originY;
 			return link;
 		}
 		return null;
@@ -6171,6 +6192,8 @@ export default class SVGCanvasRenderer {
 				const startPos = this.linkUtils.getNewStraightNodeLinkStartPos(srcObj, endPos, link.srcOriginInfo);
 				coords.x1 = startPos.x;
 				coords.y1 = startPos.y;
+				coords.originX = startPos.originX;
+				coords.originY = startPos.originY;
 
 			} else {
 				srcPortId = this.getSourcePortId(link, srcObj);
@@ -6209,6 +6232,8 @@ export default class SVGCanvasRenderer {
 		link.y1 = coords.y1;
 		link.x2 = coords.x2;
 		link.y2 = coords.y2;
+		link.originX = coords.originX;
+		link.originY = coords.originY;
 
 		return link;
 	}

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

@@ -212,7 +212,11 @@ export default class SvgCanvasLinks {
 			srcCenterX,
 			srcCenterY);
 
-		return { x1: startPos.x, y1: startPos.y, x2: endPos.x, y2: endPos.y };
+		return {
+			originX: startPos.originX, originY: startPos.originY,
+			x1: startPos.x, y1: startPos.y,
+			x2: endPos.x, y2: endPos.y
+		};
 	}
 
 	getCenterOffset(node, originInfo) {

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

@@ -23,6 +23,13 @@ export default class SvgCanvasNodes {
 		this.canvasLayout = canvasLayout;
 	}
 
+	isPointInNodeBoundary(pos, node) {
+		return pos.x >= node.x_pos &&
+			pos.x <= node.x_pos + node.width &&
+			pos.y >= node.y_pos &&
+			pos.y <= node.y_pos + node.height;
+	}
+
 	getNodeImageClass(node) {
 		return "d3-node-image";
 	}
@@ -336,6 +343,22 @@ export default class SvgCanvasNodes {
 		return node.layout.errorHeight;
 	}
 
+	getNodeInputPortLeftPosX(node) {
+		return this.getElementPosX(node.width, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosition);
+	}
+
+	getNodeInputPortLeftPosY(node) {
+		return this.getElementPosY(node.height, node.layout.inputPortLeftPosY, node.layout.inputPortLeftPosition);
+	}
+
+	getNodeOutputPortRightPosX(node) {
+		return this.getElementPosX(node.width, node.layout.outputPortRightPosX, node.layout.outputPortRightPosition);
+	}
+
+	getNodeOutputPortRightPosY(node) {
+		return this.getElementPosY(node.height, node.layout.outputPortRightPosY, node.layout.outputPortRightPosition);
+	}
+
 	getElementPosX(width, xOffset = 0, position = "topLeft") {
 		let x = 0;
 

package/src/common-properties/components/virtualized-table/virtualized-table.jsx

@@ -396,6 +396,11 @@ class VirtualizedTable extends React.Component {
 					onMouseLeave={(evt) => this.overSelectOption(evt)}
 					onFocus={(evt) => this.overSelectOption(evt)}
 					onBlur={(evt) => this.overSelectOption(evt)}
+					onKeyDown={(evt) => {
+						if (evt.code === "Space" || evt.code === "Enter") {
+							this.onRowClick(evt, rowData, index);
+						}
+					}}
 				>
 					<Checkbox
 						id={`properties-vt-row-cb-${scrollKey}-${index}`}
@@ -442,11 +447,6 @@ class VirtualizedTable extends React.Component {
 				role="row"
 				style={newStyle}
 				onMouseDown={(evt) => this.onRowClick(evt, rowData, index)}
-				onKeyPress={(evt) => {
-					if (evt.code === "Space" || evt.code === "Enter") {
-						this.onRowClick(evt, rowData, index);
-					}
-				}}
 			>
 				{selectOption}
 				{columns}

package/src/common-properties/controls/radioset/radioset.jsx

@@ -202,16 +202,18 @@ class RadiosetControl extends React.Component {
 			};
 			buttons.push(
 				<div key={i} className="properties-radioset-panel">
-					<RadioButton
-						key={i}
-						id={ControlUtils.getControlId(id, this.uuid)}
-						disabled={disabled || itemDisabled}
-						labelText={valueSet.valueLabels[i]}
-						value={val}
-						onChange={this.handleChange}
-						checked={checked}
-					/>
-					{tooltipIcon}
+					<div className="properties-radioset-tooltip">
+						<RadioButton
+							key={i}
+							id={ControlUtils.getControlId(id, this.uuid)}
+							disabled={disabled || itemDisabled}
+							labelText={valueSet.valueLabels[i]}
+							value={val}
+							onChange={this.handleChange}
+							checked={checked}
+						/>
+						{tooltipIcon}
+					</div>
 					{optionalPanel}
 				</div>
 			);

package/src/common-properties/controls/radioset/radioset.scss

@@ -23,6 +23,7 @@
 	}
 }
 
+
 .properties-radio-button-group {
 	display: block;
 	&.horizontal {
@@ -38,28 +39,29 @@
 	.properties-radioset-panel {
 		margin-bottom: $spacing-02;
 		margin-right: $spacing-04;
-		display: grid;
-		grid-template-columns: 1fr 8fr;
-		grid-template-rows: auto;
-		grid-template-areas:
-			"radio tooltip"
-			"panel panel";
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		flex-wrap: wrap;
+		overflow: hidden;
 		.bx--radio-button-wrapper{
-			grid-area: radio;
 			margin-right: 0; // We removed the space between radio & tooltip to position it correctly
 		}
-		.tooltip-container{
-			grid-area: tooltip;
+		.properties-radioset-tooltip {
+			display: flex;
+			align-items: center;
+			margin: 2.5px 0 1.5px 1.5px;
 		}
 		.properties-control-nested-panel{
-			grid-area: panel;
+			flex-basis: 100%;
+			width: 100%;
 		}
 		&:last-of-type {
 			margin-bottom: 0; // don't want margin when last radio button in group
 		}
-
 		.bx--radio-button-wrapper > label {
 			justify-content: left; // override carbon style to center justify radio-button labels
+			align-items: center;
 		}
 	}
 	&.error:not([disabled]) {

package/src/object-model/api-pipeline.js

@@ -1144,19 +1144,32 @@ export default class APIPipeline {
 		return linkNodeList;
 	}
 
+	// Creates a node link from the srcInfo and trgInfo and other link 'data'
+	// passed in.
 	createNodeLink(srcInfo, trgInfo, data) {
 		const srcNode = this.getNode(srcInfo.id);
 		const trgNode = this.getNode(trgInfo.id);
 		const links = this.getLinks();
 
-		if (CanvasUtils.isConnectionAllowed(srcInfo.portId, trgInfo.portId, srcNode, trgNode, links, data.type)) {
+		if ((srcInfo.srcPos && trgInfo.trgPos) || // Fully detached
+				(srcInfo.srcPos && CanvasUtils.isTrgConnectionAllowedWithDetachedLinks(trgInfo.portId, trgNode, links)) || // Semi-detached
+				(trgInfo.trgPos && CanvasUtils.isSrcConnectionAllowedWithDetachedLinks(srcInfo.portId, srcNode, links)) || // Semi-detached
+				(CanvasUtils.isConnectionAllowed(srcInfo.portId, trgInfo.portId, srcNode, trgNode, links, data.type))) { // Fully attached
 			const link = {};
-			link.id = data.id ? data.id : this.objectModel.getUniqueId(CREATE_NODE_LINK, { "sourceNode": this.getNode(srcInfo.id), "targetNode": this.getNode(trgInfo.id) });
+			link.id = data.id ? data.id : this.objectModel.getUniqueId(CREATE_NODE_LINK, { "sourceNode": srcNode, "targetNode": trgNode });
 			link.type = data.type;
-			link.srcNodeId = srcInfo.id;
-			link.srcNodePortId = srcInfo.portId;
-			link.trgNodeId = trgInfo.id;
-			link.trgNodePortId = trgInfo.portId;
+			if (srcInfo.srcPos) {
+				link.srcPos = srcInfo.srcPos;
+			} else {
+				link.srcNodeId = srcInfo.id;
+				link.srcNodePortId = srcInfo.portId;
+			}
+			if (trgInfo.trgPos) {
+				link.trgPos = trgInfo.trgPos;
+			} else {
+				link.trgNodeId = trgInfo.id;
+				link.trgNodePortId = trgInfo.portId;
+			}
 			if (data.class_name) {
 				link.class_name = data.class_name;
 			}

package/src/object-model/config-utils.js

@@ -94,6 +94,7 @@ export default class CanvasUtils {
 			dropZoneCanvasContent: null,
 			enableNodeLayout: {},
 			enableCanvasLayout: {}, // Not documented
+			enableUseCardFromOriginalPorts: false, // Not documented
 			tipConfig: {
 				"palette": true,
 				"nodes": true,

package/src/object-model/layout-dimensions.js

@@ -181,21 +181,22 @@ const portsHorizontalDefaultLayout = {
 		outputPortWidth: 12,
 		outputPortHeight: 12,
 
-		// Position of right single input port. Multiple input ports will be
+		// Position of right single output port. Multiple input ports will be
 		// automatically positioned with the Y coordinate being overriden. These
 		// values are an offset from the top right corner of the node outline.
 		// Used when linkDirection is "LeftRight".
+		outputPortRightPosition: "topRight",
 		outputPortRightPosX: 0,
 		outputPortRightPosY: 20,
 
-		// Position of top single input port. Multiple input ports will be
+		// Position of top single output port. Multiple input ports will be
 		// automatically positioned with the X coordinate being overriden. These
 		// values are an offset from the top left corner of the node outline.
 		// Used when linkDirection is "BottomTop".
 		outputPortTopPosX: 80,
 		outputPortTopPosY: 0,
 
-		// Position of bottom single input port. Multiple input ports will be
+		// Position of bottom single output port. Multiple input ports will be
 		// automatically positioned with the X coordinate being overriden. These
 		// values are an offset from the bottom left corner of the node outline.
 		// Used when linkDirection is "TopBottom".
@@ -575,6 +576,7 @@ const portsVerticalDefaultLayout = {
 		// automatically positioned with the Y coordinate being overriden. These
 		// values are an offset from the top right corner of the node outline.
 		// Used when linkDirection is "LeftRight".
+		outputPortRightPosition: "topRight",
 		outputPortRightPosX: 0,
 		outputPortRightPosY: 29,