@elyra/canvas 12.12.1 → 12.12.2

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

@@ -110,11 +110,6 @@ export default class SVGCanvasRenderer {
 		this.minScaleExtent = 0.2;
 		this.maxScaleExtent = 1.8;
 
-		// Allow us to keep track of the object (node or comment) being sized and
-		// its initial size and position at the start of the sizing event.
-		this.resizeObj = null;
-		this.resizeObjInitialInfo = null;
-
 		// Allows us to track the sizing behavior of comments
 		this.commentSizing = false;
 		this.commentSizingDirection = "";
@@ -123,9 +118,14 @@ export default class SVGCanvasRenderer {
 		this.nodeSizing = false;
 		this.nodeSizingDirection = "";
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
+
+		// Keeps track of the size and position, at the start of the sizing event,
+		// of the object (node or comment) being sized.
+		this.resizeObjInitialInfo = null;
 
-		// General purpose variables to allow us to handle resize and snap to grid
+		// Keeps track of the size and position, during a sizing event, of the
+		// object (node or comment) being sized, before it is snapped to grid.
 		this.notSnappedXPos = 0;
 		this.notSnappedYPos = 0;
 		this.notSnappedWidth = 0;
@@ -2094,12 +2094,12 @@ export default class SVGCanvasRenderer {
 
 		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
 		if (this.commentSizing) {
-			this.resizeObj = this.activePipeline.getComment(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getComment(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else if (this.nodeSizing) {
-			this.resizeObj = this.activePipeline.getNode(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getNode(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else {
 			this.dragObjectsStart(d3Event, d);
@@ -2107,12 +2107,12 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("dragStart", true);
 	}
 
-	dragMove(d3Event) {
+	dragMove(d3Event, d) {
 		this.logger.logStartTimer("dragMove");
 		if (this.commentSizing) {
-			this.resizeComment(d3Event);
+			this.resizeComment(d3Event, d);
 		} else if (this.nodeSizing) {
-			this.resizeNode(d3Event);
+			this.resizeNode(d3Event, d);
 		} else {
 			this.dragObjectsAction(d3Event);
 		}
@@ -2126,10 +2126,10 @@ export default class SVGCanvasRenderer {
 		this.removeTempCursorOverlay();
 
 		if (this.commentSizing) {
-			this.endCommentSizing();
+			this.endCommentSizing(d);
 
 		} else if (this.nodeSizing) {
-			this.endNodeSizing();
+			this.endNodeSizing(d);
 
 		} else if (this.dragging) {
 			this.dragObjectsEnd(d3Event, d);
@@ -5670,23 +5670,24 @@ export default class SVGCanvasRenderer {
 	// array based on the position of the pointer during the resize action
 	// then redraws the nodes and links (the link positions may move based
 	// on the node size change).
-	resizeNode(d3Event) {
-		const oldSupernode = Object.assign({}, this.resizeObj);
-		const minHeight = this.getMinHeight(this.resizeObj);
-		const minWidth = this.getMinWidth(this.resizeObj);
+	resizeNode(d3Event, d) {
+		const resizeObj = this.activePipeline.getNode(d.id);
+		const oldSupernode = Object.assign({}, resizeObj);
+		const minHeight = this.getMinHeight(resizeObj);
+		const minWidth = this.getMinWidth(resizeObj);
 
-		const delta = this.resizeObject(d3Event, this.resizeObj,
+		const delta = this.resizeObject(d3Event, resizeObj,
 			this.nodeSizingDirection, minWidth, minHeight);
 
 		if (delta && (delta.x_pos !== 0 || delta.y_pos !== 0 || delta.width !== 0 || delta.height !== 0)) {
-			if (CanvasUtils.isSupernode(this.resizeObj) &&
+			if (CanvasUtils.isSupernode(resizeObj) &&
 					this.config.enableMoveNodesOnSupernodeResize) {
 				const objectsInfo = CanvasUtils.moveSurroundingObjects(
 					oldSupernode,
 					this.activePipeline.getNodesAndComments(),
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that object positions should be updated.
 				);
 
@@ -5694,21 +5695,21 @@ export default class SVGCanvasRenderer {
 					oldSupernode,
 					this.activePipeline.links,
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that link positions should be updated.
 				);
 
 				// Overwrite the object and link info with any new info.
 				this.nodeSizingObjectsInfo = Object.assign(this.nodeSizingObjectsInfo, objectsInfo);
-				this.nodeSizingLinksInfo = Object.assign(this.nodeSizingLinksInfo, linksInfo);
+				this.nodeSizingDetLinksInfo = Object.assign(this.nodeSizingDetLinksInfo, linksInfo);
 			}
 
 			this.displayComments();
 			this.displayNodes();
 			this.displayLinks();
 
-			if (CanvasUtils.isSupernode(this.resizeObj)) {
+			if (CanvasUtils.isSupernode(resizeObj)) {
 				if (this.dispUtils.isDisplayingSubFlow()) {
 					this.displayBindingNodesToFitSVG();
 				}
@@ -5721,8 +5722,9 @@ export default class SVGCanvasRenderer {
 	// array based on the position of the pointer during the resize action
 	// then redraws the comment and links (the link positions may move based
 	// on the comment size change).
-	resizeComment(d3Event) {
-		this.resizeObject(d3Event, this.resizeObj, this.commentSizingDirection, 20, 20);
+	resizeComment(d3Event, d) {
+		const resizeObj = this.activePipeline.getComment(d.id);
+		this.resizeObject(d3Event, resizeObj, this.commentSizingDirection, 20, 20);
 		this.displayComments();
 		this.displayLinks();
 	}
@@ -5800,71 +5802,76 @@ export default class SVGCanvasRenderer {
 
 	// Finalises the sizing of a node by calling editActionHandler
 	// with an editNode action.
-	endNodeSizing() {
+	endNodeSizing(node) {
+		let resizeObj = this.activePipeline.getNode(node.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
 			// Add the dimensions of the object being resized to the array of object infos.
-			this.nodeSizingObjectsInfo[this.resizeObj.id] = {
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos
+			this.nodeSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
 			};
 
 			// If the node has been resized set the resize properties appropriately.
-			if (this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-					this.resizeObjInitialInfo.height !== this.resizeObj.height) {
-				this.nodeSizingObjectsInfo[this.resizeObj.id].isResized = true;
-				this.nodeSizingObjectsInfo[this.resizeObj.id].resizeWidth = this.resizeObj.width;
-				this.nodeSizingObjectsInfo[this.resizeObj.id].resizeHeight = this.resizeObj.height;
+			if (this.resizeObjInitialInfo.width !== resizeObj.width ||
+					this.resizeObjInitialInfo.height !== resizeObj.height) {
+				this.nodeSizingObjectsInfo[resizeObj.id].isResized = true;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeWidth = resizeObj.width;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeHeight = resizeObj.height;
 			}
 
 			this.canvasController.editActionHandler({
 				editType: "resizeObjects",
 				editSource: "canvas",
 				objectsInfo: this.nodeSizingObjectsInfo,
-				linksInfo: this.nodeSizingLinksInfo,
+				detachedLinksInfo: this.nodeSizingDetLinksInfo,
 				pipelineId: this.pipelineId
 			});
 		}
-		this.resizeObj = null;
 		this.nodeSizing = false;
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
 	}
 
 	// Finalises the sizing of a comment by calling editActionHandler
 	// with an editComment action.
-	endCommentSizing() {
+	endCommentSizing(comment) {
+		let resizeObj = this.activePipeline.getComment(comment.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
+			const commentSizingObjectsInfo = [];
+			commentSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
+			};
+
 			const data = {
-				editType: "editComment",
+				editType: "resizeObjects",
 				editSource: "canvas",
-				id: this.resizeObj.id,
-				content: this.resizeObj.content,
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos,
+				objectsInfo: commentSizingObjectsInfo,
+				detachedLinksInfo: {}, // Comments cannot have detached links
 				pipelineId: this.pipelineId
 			};
 			this.canvasController.editActionHandler(data);

package/src/common-properties/controls/expression/expression-builder/expression-builder.jsx

@@ -20,6 +20,7 @@ import ExpressionControl from "./../expression";
 import ExpressionSelectionPanel from "./expression-selection-panel";
 import { MESSAGE_KEYS } from "./../../../constants/constants";
 import { formatMessage } from "./../../../util/property-utils";
+import { isEqual } from "lodash";
 
 export default class ExpressionBuilder extends React.Component {
 	constructor(props) {
@@ -68,13 +69,13 @@ export default class ExpressionBuilder extends React.Component {
 
 	onBlur(editor, evt) {
 		this.lastCursorPos = editor.getCursor();
+		const currentValue = this.props.controller.getPropertyValue(this.props.propertyId);
 		const newValue = this.editor.getValue();
-		let skipValidate = false;
-		if (this.expressionSelectionPanel && this.expressionSelectionPanel.contains(evt.relatedTarget)) {
-			// don't validate on old content when adding new content
-			skipValidate = true;
+		const skipValidate = this.expressionSelectionPanel && evt && this.expressionSelectionPanel.contains(evt.relatedTarget);
+		// update property value when value is updated OR value is to be validated
+		if (!isEqual(currentValue, newValue) || !skipValidate) {
+			this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 		}
-		this.props.controller.updatePropertyValue(this.props.propertyId, newValue, skipValidate);
 	}
 
 	editorDidMount(editor, next) {

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

@@ -23,7 +23,7 @@ import { UnControlled as CodeMirror } from "react-codemirror2";
 import Icon from "./../../../icons/icon.jsx";
 import { Button } from "carbon-components-react";
 import classNames from "classnames";
-
+import { isEqual } from "lodash";
 import ValidationMessage from "./../../components/validation-message";
 import WideFlyout from "./../../components/wide-flyout";
 import { formatMessage } from "./../../util/property-utils";
@@ -102,8 +102,13 @@ class ExpressionControl extends React.Component {
 	}
 
 	// this is needed to ensure expression builder selection works.
-	componentDidUpdate() {
-		if (this.props.selectionRange && this.props.selectionRange.length > 0 && this.editor) {
+	componentDidUpdate(prevProps) {
+		if (
+			this.props.selectionRange &&
+			this.props.selectionRange.length > 0 &&
+			!isEqual(prevProps.selectionRange, this.props.selectionRange) &&
+			this.editor
+		) {
 			this.props.selectionRange.forEach((selected) => {
 				this.editor.setSelection(selected.anchor, selected.head);
 			});
@@ -225,6 +230,7 @@ class ExpressionControl extends React.Component {
 				validateIcon: response.type,
 				validationInProgress: false
 			});
+			this.editor.display.input.blur();
 		});
 	}