@elyra/canvas 12.32.2 → 12.33.0

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

@@ -4639,14 +4639,26 @@ export default class SVGCanvasRenderer {
 		const newLink = this.getNewLinkOnDrag(d3Event);
 
 		if (newLink) {
-			this.canvasController.editActionHandler({
-				editType: "updateLink",
-				editSource: "canvas",
-				newLink: newLink,
-				pipelineId: this.pipelineId });
+			const editSubType = this.getLinkEditSubType(newLink);
+			// If editSubType is set the user did a gesture that requires a change
+			// to the object model.
+			if (editSubType) {
+				this.canvasController.editActionHandler({
+					editType: "updateLink",
+					editSubType: editSubType,
+					editSource: "canvas",
+					newLink: newLink,
+					pipelineId: this.pipelineId });
+			// If editSubType is null, the user performed a gesture which should
+			// not be executed as an action so draw the link back in its old position.
+			} else {
+				this.snapBackOldLink();
+			}
+		// newLink might be null when we are dragging a link handle with
+		// enableLinkSelection not set to detachable. If that's the case the
+		// link needs to snap back (redrawn) to its original position.
 		} else {
-			this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
-			this.displayLinks();
+			this.snapBackOldLink();
 		}
 
 		// Switch 'new link over node' highlighting off
@@ -4658,6 +4670,70 @@ export default class SVGCanvasRenderer {
 		this.stopDraggingLink();
 	}
 
+	// Resets and redraws the link being dragged back to its original position.
+	// This is necessary when the user performs a link drag gesture which should
+	// NOT be executed as an action -- therefore the link need to be drawn back
+	// in its original position.
+	snapBackOldLink() {
+		this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
+		this.displayLinks();
+	}
+
+	// Returns the edit sub-type for the link action being performed to further
+	// explain the updateLink action.
+	getLinkEditSubType(newLink) {
+		const oldLink = this.draggingLinkData.oldLink;
+
+		if (oldLink.srcNodeId && !newLink.srcNodeId) {
+			return "detachFromSrcNode";
+
+		} else if (oldLink.trgNodeId && !newLink.trgNodeId) {
+			return "detachFromTrgNode";
+
+		} else if (!oldLink.srcNodeId && newLink.srcNodeId) {
+			return "attachToSrcNode";
+
+		} else if (!oldLink.trgNodeId && newLink.trgNodeId) {
+			return "attachToTrgNode";
+
+		} else if (!oldLink.srcNodeId && !newLink.srcNodeId &&
+								(oldLink.srcPos.x_pos !== newLink.srcPos.x_pos ||
+									oldLink.srcPos.y_pos !== newLink.srcPos.y_pos)) {
+			return "moveSrcPosition";
+
+		} else if (!oldLink.trgNodeId && !newLink.trgNodeId &&
+								(oldLink.trgPos.x_pos !== newLink.trgPos.x_pos ||
+									oldLink.trgPos.y_pos !== newLink.trgPos.y_pos)) {
+			return "moveTrgPosition";
+
+		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
+							oldLink.srcNodeId !== newLink.srcNodeId) {
+			return "switchSrcNode";
+
+		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
+							oldLink.trgNodeId !== newLink.trgNodeId) {
+			return "switchTrgNode";
+
+		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
+							oldLink.srcNodeId === newLink.srcNodeId &&
+							oldLink.srcNodePortId !== newLink.srcNodePortId) {
+			return "switchSrcNodePort";
+
+		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
+							oldLink.trgNodeId === newLink.trgNodeId &&
+							oldLink.trgNodePortId !== newLink.trgNodePortId) {
+			return "switchTrgNodePort";
+		}
+		// We arrive here, in two ways:
+		// 1. if the user dragged a link handle from a node/port and dropped it
+		//    back on the same node/port.
+		// 2. If the user clicked on the unattached end of a detached link but did
+		//    not move it anywhere
+		// In these cases, the updateLink action should NOT be performed and
+		// consequently NO command should be added to the command stack.
+		return null;
+	}
+
 	// Returns a new link if one can be created given the current data in the
 	// this.draggingLinkData object. Returns null if a link cannot be created.
 	getNewLinkOnDrag(d3Event, nodeProximity) {
@@ -4665,6 +4741,7 @@ export default class SVGCanvasRenderer {
 		const newLink = cloneDeep(oldLink);
 
 		if (this.draggingLinkData.endBeingDragged === "start") {
+			delete newLink.srcObj;
 			delete newLink.srcNodeId;
 			delete newLink.srcNodePortId;
 			delete newLink.srcPos;
@@ -4675,6 +4752,7 @@ export default class SVGCanvasRenderer {
 
 			if (srcNode) {
 				newLink.srcNodeId = srcNode.id;
+				newLink.srcObj = this.activePipeline.getNode(srcNode.id);
 				newLink.srcNodePortId = nodeProximity
 					? this.getNodePortIdNearMousePos(d3Event, OUTPUT_TYPE, srcNode)
 					: this.getOutputNodePortId(d3Event, srcNode);
@@ -4683,6 +4761,7 @@ export default class SVGCanvasRenderer {
 			}
 
 		} else {
+			delete newLink.trgNode;
 			delete newLink.trgNodeId;
 			delete newLink.trgNodePortId;
 			delete newLink.trgPos;
@@ -4693,6 +4772,7 @@ export default class SVGCanvasRenderer {
 
 			if (trgNode) {
 				newLink.trgNodeId = trgNode.id;
+				newLink.trgNode = this.activePipeline.getNode(trgNode.id);
 				newLink.trgNodePortId = nodeProximity
 					? this.getNodePortIdNearMousePos(d3Event, INPUT_TYPE, trgNode)
 					: this.getInputNodePortId(d3Event, trgNode);
@@ -6549,6 +6629,7 @@ export default class SVGCanvasRenderer {
 					: null;
 			const coords = this.linkUtils.getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation);
 
+			// Set additional calculated fields on link object.
 			link.coordsUpdated =
 				link.x1 !== coords.x1 ||
 				link.y1 !== coords.y1 ||
@@ -6556,8 +6637,6 @@ export default class SVGCanvasRenderer {
 				link.y2 !== coords.y2;
 
 			link.assocLinkVariation = assocLinkVariation;
-			link.srcPortId = srcPortId;
-			link.trgPortId = trgPortId;
 			link.x1 = coords.x1;
 			link.y1 = coords.y1;
 			link.x2 = coords.x2;
@@ -6625,14 +6704,13 @@ export default class SVGCanvasRenderer {
 			}
 		}
 
+		// Set additional calculated fields on link object.
 		link.coordsUpdated =
 			link.x1 !== coords.x1 ||
 			link.y1 !== coords.y1 ||
 			link.x2 !== coords.x2 ||
 			link.y2 !== coords.y2;
 
-		link.srcPortId = srcPortId;
-		link.trgPortId = trgPortId;
 		link.x1 = coords.x1;
 		link.y1 = coords.y1;
 		link.x2 = coords.x2;

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

@@ -251,11 +251,11 @@ class FlexibleTable extends React.Component {
 		let dynamicH = this.state.dynamicHeight;
 		const multiSelectTableHeight = REM_ROW_HEIGHT + REM_HEADER_HEIGHT;
 		if (Array.isArray(this.props.data) && this.props.data.length < this.state.rows) {
-			newHeight = (REM_ROW_HEIGHT * this.props.data.length + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+			newHeight = (REM_ROW_HEIGHT * this.props.data.length + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) * ONE_REM_HEIGHT;
 		} else if (this.state.rows > 0) {
-			newHeight = (REM_ROW_HEIGHT * this.state.rows + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) + "rem";
+			newHeight = (REM_ROW_HEIGHT * this.state.rows + REM_HEADER_HEIGHT + (this.props.selectedEditRow ? multiSelectTableHeight : 0)) * ONE_REM_HEIGHT;
 		} else if (this.state.rows === 0) { // only display header
-			newHeight = REM_HEADER_HEIGHT + "rem";
+			newHeight = REM_HEADER_HEIGHT * ONE_REM_HEIGHT;
 		} else if (this.state.rows === -1) {
 			if (this.flexibleTable) {
 				const labelAndDescriptionHeight = 50; // possible dynamically set this in the future
@@ -267,7 +267,7 @@ class FlexibleTable extends React.Component {
 					dynamicH = -1;
 				} else {
 					const totalHeight = flyoutHeight !== 0 ? flyoutHeight : tearsheetHeight;
-					newHeight = `calc(${totalHeight - ftHeaderHeight - labelAndDescriptionHeight}px - 3.5rem)`; // 3.5rem to adjust padding
+					newHeight = `calc(${totalHeight - ftHeaderHeight - labelAndDescriptionHeight}px - ${(3.5 * ONE_REM_HEIGHT)}px)`; // 3.5rem to adjust padding
 					dynamicH = (totalHeight - ftHeaderHeight - labelAndDescriptionHeight) - (3.5 * 16);
 				}
 			}
@@ -528,7 +528,7 @@ class FlexibleTable extends React.Component {
 		const multiSelectEditRowsPixels = multiSelectEditRowsRem * ONE_REM_HEIGHT;
 		if (this.state.rows !== -1 && this.state.tableHeight) {
 			const remHeight = parseInt(this.state.tableHeight, 10);
-			tableHeight = (remHeight - (this.props.selectedEditRow ? multiSelectEditRowsRem : 0)) * ONE_REM_HEIGHT;
+			tableHeight = (remHeight - (this.props.selectedEditRow ? multiSelectEditRowsRem : 0));
 		} else if (this.state.rows === -1 && this.state.dynamicHeight && this.state.dynamicHeight !== -1) {
 			tableHeight = this.state.dynamicHeight - (this.props.selectedEditRow ? multiSelectEditRowsPixels : 0);
 		}

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

@@ -162,7 +162,7 @@ export const DATEPICKER_TYPE = {
 
 export const DEFAULT_DATEPICKER_FORMAT = "Y-m-d"; // ISO format
 
-export const DEFAULT_DATE_FORMAT = "yyyy-mm-dd";
+export const DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
 
 export const DEFAULT_TIME_FORMAT = "H:m:s";
 

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

@@ -30,6 +30,10 @@ import { has } from "lodash";
 class NumberfieldControl extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			invalidNumber: false
+		};
 		this.onDirection = this.onDirection.bind(this);
 		this.generateNumber = this.generateNumber.bind(this);
 		this.id = ControlUtils.getControlId(this.props.propertyId);
@@ -56,6 +60,15 @@ class NumberfieldControl extends React.Component {
 		}
 	}
 
+	onInput(evt) {
+		// There's a specific case when manually deleting negative number (eg. -1), 1 is deleted first and then - becomes an invalid number
+		// After user deletes - sign , onInput is called however onChange event isn't triggered.
+		// At this time, invalidNumber state variable is true but the evt.target.value will be a valid "empty" number because - sign was deleted.
+		if (this.state.invalidNumber && evt.target.validity && !evt.target.validity.badInput) {
+			this.handleChange(evt);
+		}
+	}
+
 	handleChange(evt, direction) {
 		if (typeof direction === "string") {
 			this.onDirection(direction);
@@ -79,11 +92,16 @@ class NumberfieldControl extends React.Component {
 				};
 				this.props.controller.updateErrorMessage(this.props.propertyId, errorMessage);
 			}
+			this.setState({ invalidNumber: true });
 			// Return without updating property value
 			return;
 		}
 		// Number is valid, clear invalid number error if it exists
-		const invalidNumberError = this.props.controller.getErrorMessage(this.props.propertyId) !== null &&
+		if (this.state.invalidNumber) {
+			this.setState({ invalidNumber: false });
+		}
+
+		const invalidNumberError = this.props.controller.getErrorMessage(this.props.propertyId) &&
 		this.props.controller.getErrorMessage(this.props.propertyId).validation_id === "invalid_number";
 		if (invalidNumberError) {
 			this.props.controller.updateErrorMessage(this.props.propertyId, null);
@@ -151,6 +169,7 @@ class NumberfieldControl extends React.Component {
 					allowEmpty
 					light={this.props.controller.getLight() && this.props.control.light}
 					hideSteppers={this.props.tableControl || (this.props.control.controlType === ControlType.NUMBERFIELD)}
+					onInput={this.onInput.bind(this)}
 				/>
 				{numberGenerator}
 				<ValidationMessage inTable={this.props.tableControl} tableOnly state={this.props.state} messageInfo={this.props.messageInfo} />
@@ -176,7 +195,7 @@ NumberfieldControl.propTypes = {
 const mapStateToProps = (state, ownProps) => ({
 	value: ownProps.controller.getPropertyValue(ownProps.propertyId),
 	state: ownProps.controller.getControlState(ownProps.propertyId),
-	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId)
+	messageInfo: ownProps.controller.getErrorMessage(ownProps.propertyId, true) // Filter error messages for hidden/disabled controls
 });
 
 export default connect(mapStateToProps, null)(NumberfieldControl);