@elyra/canvas 12.12.0 → 12.12.3

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 = [];
 
-		// General purpose variables to allow us to handle resize and snap to grid
+		// 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;
+
+		// 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;
@@ -1884,7 +1884,7 @@ export default class SVGCanvasRenderer {
 			this.canvasController.setSelections(selections, this.activePipeline.id);
 			this.regionSelect = false;
 
-		} else if (this.dispUtils.isDisplayingFullPage()) {
+		} else if (this.dispUtils.isDisplayingFullPage() && this.zoomChanged()) {
 			// Set the internal zoom value for canvasSVG used by D3. This will be
 			// used by d3Event next time a zoom action is initiated.
 			this.canvasSVG.property("__zoom", this.zoomTransform);
@@ -1904,6 +1904,14 @@ export default class SVGCanvasRenderer {
 		this.removeTempCursorOverlay();
 	}
 
+	// Returns true if the current zoom transform is different from the
+	// zoom values at the beginning of the zoom action.
+	zoomChanged() {
+		return (this.zoomTransform.k !== this.zoomStartPoint.k ||
+			this.zoomTransform.x !== this.zoomStartPoint.x ||
+			this.zoomTransform.y !== this.zoomStartPoint.y);
+	}
+
 	zoomCanvasBackground(d3Event) {
 		this.regionSelect = false;
 
@@ -2086,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);
@@ -2099,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);
 		}
@@ -2118,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);
@@ -5662,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.
 				);
 
@@ -5686,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();
 				}
@@ -5713,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();
 	}
@@ -5792,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();
 		});
 	}
 

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

@@ -25,7 +25,7 @@ import PipelineOutHandler from "./pipeline-out-handler.js";
 import CanvasUtils from "../common-canvas/common-canvas-utils";
 
 import dagre from "dagre/dist/dagre.min.js";
-import { cloneDeep, get, has } from "lodash";
+import { cloneDeep, get, has, set } from "lodash";
 
 import { ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK, VERTICAL,
 	DAGRE_HORIZONTAL, DAGRE_VERTICAL,
@@ -419,10 +419,8 @@ export default class APIPipeline {
 				node.y_pos = 0;
 				node = PipelineOutHandler.createSchemaNode(node, []);
 				if (node.type === SUPER_NODE) {
-					if (!node.app_data) {
-						node.app_data = {};
-					}
-					node.app_data.pipeline_data = this.objectModel.getSchemaPipelinesForSupernode(node);
+					const pData = this.objectModel.getSchemaPipelinesForSupernode(node);
+					set(node, "app_data.ui_data.sub_pipelines", pData);
 				}
 				newNodes.push(node);
 			}
@@ -501,7 +499,7 @@ export default class APIPipeline {
 	addNode(newNode) {
 		if (newNode) {
 			if (newNode.type === SUPER_NODE) {
-				this.addSupernode(newNode, get(newNode, "app_data.pipeline_data"));
+				this.addSupernode(newNode, get(newNode, "sub_pipelines"));
 			} else {
 				this.store.dispatch({ type: "ADD_NODE", data: { newNode: newNode }, pipelineId: this.pipelineId });
 			}
@@ -541,7 +539,9 @@ export default class APIPipeline {
 		const sn = Object.assign({}, supernode);
 		if (sn.app_data) {
 			sn.app_data = Object.assign({}, sn.app_data);
-			delete sn.app_data.pipeline_data;
+			if (sn.app_data.ui_data) {
+				delete sn.app_data.ui_data.sub_pipelines;
+			}
 		}
 		return sn;
 	}

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

@@ -228,8 +228,8 @@ export default class ObjectModel {
 		if (nodeTemplate) {
 			node = PipelineInHandler.convertNode(nodeTemplate, this.getCanvasLayout());
 
-			// PipelineInHandler will not handle the app_data.pipeline_data field of
-			// supernodes so...
+			// PipelineInHandler will not handle the conversion of sub_pipelines
+			// in supernodes to internal format so...
 			if (node.type === SUPER_NODE) {
 				node = this.convertPipelineData(node);
 			}
@@ -239,7 +239,7 @@ export default class ObjectModel {
 	}
 
 	convertPipelineData(supernode) {
-		const pd = get(supernode, "app_data.pipeline_data");
+		const pd = get(supernode, "sub_pipelines");
 		let newPd;
 		if (pd) {
 			newPd = supernode.subflow_ref.url
@@ -254,24 +254,26 @@ export default class ObjectModel {
 			newPd = [newPipeline];
 			set(supernode, "subflow_ref.pipeline_id_ref", newPipeline.id);
 		}
-		set(supernode, "app_data.pipeline_data", newPd);
+		supernode.sub_pipelines = newPd;
 		return supernode;
 	}
 
 	// Returns an object containing nodes and pipelines. The nodes are the
 	// same as the array of nodes passed in except that, any supernodes within
-	// the array will have their app_data.pipeline_data fields removed. The
+	// the array will have their app_data.ui_data.sub_pipelines fields removed. The
 	// pipelines returned will be any pipelines that were contained within the
-	// app_data.pipeline_data fields.
+	// app_data.ui_data.sub_pipelines fields.
 	extractAddDataPipelines(inNodes) {
 		const pipelines = [];
 		const nodes = [];
 		inNodes.forEach((n) => {
 			if (CanvasUtils.isSupernode(n)) {
-				const pDataArray = get(n, "app_data.pipeline_data");
+				const pDataArray = get(n, "sub_pipelines");
 				if (pDataArray) {
 					pipelines.push(...pDataArray);
-					delete n.app_data.pipeline_data;
+					if (n.sub_pipelines) {
+						delete n.sub_pipelines;
+					}
 				}
 			}
 			nodes.push(n);
@@ -1451,7 +1453,7 @@ export default class ObjectModel {
 		if (nodes) {
 			nodes.forEach((node) => {
 				let clonedNode = this.cloneNode(node);
-				// Pipelines in app_data.pipeline_data in supernodes will be in schema
+				// Pipelines in app_data.ui_data.sub_pipelines in supernodes will be in schema
 				// format (conforming to the pipeline flow schema) so they must be converted.
 				if (clonedNode.type === SUPER_NODE) {
 					clonedNode = this.convertPipelineData(clonedNode);
@@ -2295,7 +2297,7 @@ export default class ObjectModel {
 			const supernodes = CanvasUtils.filterSupernodes(nodes);
 			supernodes.forEach((supernode) => {
 				pipelines = pipelines.concat(this.getSchemaPipelinesForSupernode(supernode));
-				set(supernode, "app_data.pipeline_data", pipelines);
+				supernode.sub_pipelines = pipelines;
 			});
 		}
 

package/src/object-model/pipeline-in-handler.js

@@ -136,6 +136,9 @@ export default class PipelineInHandler {
 		if (has(node, "app_data.ui_data.style")) {
 			obj.style = node.app_data.ui_data.style;
 		}
+		if (has(node, "app_data.ui_data.sub_pipelines")) {
+			obj.sub_pipelines = node.app_data.ui_data.sub_pipelines;
+		}
 		if (has(node, "isSupernodeInputBinding")) {
 			obj.isSupernodeInputBinding = true;
 		}

package/src/object-model/redux/reducers/canvastoolbar.js

@@ -18,7 +18,10 @@ export default (state = {}, action) => {
 	switch (action.type) {
 	// Setting a zoom amount needs to cause toolbar to be re-rendered to
 	// enable/disable zoom buttons.
-	case "SET_ZOOM":
+	case "SET_ZOOM": {
+		return Object.assign({}, state);
+	}
+
 	case "SET_TOOLBAR_CONFIG": {
 		return Object.assign({}, state, { config: action.data.toolbarConfig });
 	}