@elyra/canvas 12.33.0 → 12.34.0

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

@@ -210,19 +210,35 @@ export default class SVGCanvasRenderer {
 		// no link is currently being drawn.
 		this.drawingNewLinkData = null;
 
-		// Create a drag object for use with nodes and comments.
-		this.drag = d3.drag()
+		// Create a drag handler for use with nodes and comments.
+		this.dragHandler = d3.drag()
 			.on("start", this.dragStart.bind(this))
 			.on("drag", this.dragMove.bind(this))
 			.on("end", this.dragEnd.bind(this));
 
+		// Create a drag handler that will switch off the drag behavior of nodes
+		// and comments, for use when editing actions are not allowed.
+		this.noDragHandler = d3.drag()
+			.on("start", null)
+			.on("drag", null)
+			.on("end", null);
+
 		this.draggingLinkData = null;
 
-		this.dragSelectionHandle = d3.drag()
+		// Create a drag handler that can be used with draggable ends of
+		// detached links.
+		this.dragLinkHandler = d3.drag()
 			.on("start", this.dragStartLinkHandle.bind(this))
 			.on("drag", this.dragMoveLinkHandle.bind(this))
 			.on("end", this.dragEndLinkHandle.bind(this));
 
+		// Create a drag handler that will switch off the drag behavior of
+		// detached links, for use when editing actions are not allowed.
+		this.noDragLinkHandler = d3.drag()
+			.on("start", null)
+			.on("drag", null)
+			.on("end", null);
+
 		// Create a zoom object for use with the canvas.
 		this.zoom =
 			d3.zoom()
@@ -328,8 +344,9 @@ export default class SVGCanvasRenderer {
 		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
 	}
 
-	setCanvasInfoRenderer(canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout) {
+	setCanvasInfoRenderer(canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, config) {
 		this.logger.logStartTimer("setCanvasInfoRenderer" + this.pipelineId.substring(0, 5));
+		this.config = config;
 		this.canvasInfo = canvasInfo;
 		this.selectionInfo = selectionInfo;
 		this.breadcrumbs = breadcrumbs;
@@ -338,6 +355,23 @@ export default class SVGCanvasRenderer {
 
 		this.activePipeline.initialize(this.pipelineId, canvasInfo, selectionInfo);
 
+		// Must recreate these utils objects because they use the config object
+		// which may have changed.
+		this.linkUtils = new SvgCanvasLinks(this.config, this.canvasLayout, this.nodeUtils, this.commentUtils);
+		this.svgCanvasTextArea = new SvgCanvasTextArea(
+			this.config,
+			this.dispUtils,
+			this.nodeUtils,
+			this.decUtils,
+			this.canvasController,
+			this.canvasDiv,
+			this.activePipeline,
+			this.displayComments.bind(this), // Function
+			this.displayLinks.bind(this), // Function
+			this.getCommentToolbarPos.bind(this) // Function
+		);
+
+
 		// Set the display state incase we changed from in-place to full-page
 		// sub-flow display.
 		this.dispUtils.setDisplayState();
@@ -2703,7 +2737,7 @@ export default class SVGCanvasRenderer {
 			.attr("transform", (d) => `translate(${d.x_pos}, ${d.y_pos})`)
 			.attr("class", (d) => this.getNodeGroupClass(d))
 			.attr("style", (d) => this.getNodeGrpStyle(d))
-			.call((joinedNodeGrps) => this.updateNodes(joinedNodeGrps));
+			.call((joinedNodeGrps) => this.updateNodes(joinedNodeGrps, data));
 	}
 
 	createNodes(enter) {
@@ -2714,79 +2748,75 @@ export default class SVGCanvasRenderer {
 			.attr("data-id", (d) => this.getId("node_grp", d.id))
 			.call(this.attachNodeGroupListeners.bind(this));
 
-		if (this.config.enableEditingActions) {
-			newNodeGroups
-				.call(this.drag);	 // Must put drag after mousedown listener so mousedown gets called first.
-		}
-
-		// Node Sizing Area.
-		newNodeGroups.filter((d) => this.shouldDisplayNodeSizingArea(d))
-			.append("path")
-			.attr("class", "d3-node-sizing")
-			.call(this.attachNodeSizingListeners.bind(this));
-
-		// Node Selection Highlighting Outline.
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d))
-			.append("path")
-			.attr("class", "d3-node-selection-highlight");
-
-		// Node Body
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.nodeShapeDisplay)
-			.append("path")
-			.attr("class", "d3-node-body-outline");
-
-		// Optional foreign object to contain a React object
-		newNodeGroups.filter((d) => d.layout.nodeExternalObject)
-			.append("foreignObject")
-			.attr("class", "d3-foreign-object-external-node");
-
-		// Node Image
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.imageDisplay)
-			.each((node, i, nodeGrps) => {
-				const nodeImage = this.getNodeImage(node);
-				const nodeImageType = this.getImageType(nodeImage);
-				d3.select(nodeGrps[i])
-					.append(nodeImageType)
-					.attr("class", (d) => this.nodeUtils.getNodeImageClass(d));
-			});
-
-		// Node Label
-		newNodeGroups.filter((d) => !CanvasUtils.isSuperBindingNode(d) && d.layout.labelDisplay)
-			.append("foreignObject")
-			.attr("class", "d3-foreign-object-node-label")
-			.call(this.attachNodeLabelListeners.bind(this))
-			.append("xhtml:div") // Provide a namespace when div is inside foreignObject
-			.append("xhtml:span") // Provide a namespace when span is inside foreignObject
-			.call(this.attachNodeLabelSpanListeners.bind(this));
-
 		this.logger.logEndTimer("createNodes");
 
 		return newNodeGroups;
 	}
 
-	updateNodes(joinedNodeGrps) {
+	updateNodes(joinedNodeGrps, data) {
 		this.logger.logStartTimer("updateNodes");
 
+		const nonBindingNodeGrps = joinedNodeGrps.filter((node) => !CanvasUtils.isSuperBindingNode(node));
+
 		// Node Sizing Area
-		joinedNodeGrps.selectChildren(".d3-node-sizing")
+		nonBindingNodeGrps
+			.selectChildren(".d3-node-sizing")
+			.data((d) => (this.shouldDisplayNodeSizingArea(d) ? [d] : []), (d) => d.id)
+			.join(
+				(enter) =>
+					enter
+						.append("path")
+						.attr("class", "d3-node-sizing")
+						.call(this.attachNodeSizingListeners.bind(this))
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeShapePathSizing(d));
 
+
 		// Node Selection Highlighting Outline.
-		joinedNodeGrps.selectChildren(".d3-node-selection-highlight")
+		nonBindingNodeGrps
+			.selectChildren(".d3-node-selection-highlight")
+			.data((d) => ([d]), (d) => d.id)
+			.join(
+				(enter) =>
+					enter
+						.append("path")
+						.attr("class", "d3-node-selection-highlight")
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeSelectionOutline(d))
 			.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? "yes" : "no"))
 			.attr("style", (d) => this.getNodeSelectionOutlineStyle(d, "default"));
 
 		// Node Body
-		joinedNodeGrps.selectChildren(".d3-node-body-outline")
+		nonBindingNodeGrps
+			.selectChildren(".d3-node-body-outline")
+			.data((d) => (d.layout.nodeShapeDisplay ? [d] : []), (d) => d.id)
+			.join(
+				(enter) =>
+					enter
+						.append("path")
+						.attr("class", "d3-node-body-outline")
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeShapePath(d))
 			.attr("style", (d) => this.getNodeBodyStyle(d, "default"));
 
 		// Optional foreign object to contain a React object
-		joinedNodeGrps.selectChildren(".d3-foreign-object-external-node")
+		nonBindingNodeGrps
+			.selectChildren(".d3-foreign-object-external-node")
+			.data((d) => (d.layout.nodeExternalObject ? [d] : []), (d) => d.id)
+			.join(
+				(enter) =>
+					enter
+						.append("foreignObject")
+						.attr("class", "d3-foreign-object-external-node"),
+				null,
+				(exit) => {
+					exit.each(removeExternalObject.bind(this));
+					exit.remove();
+				}
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("width", (d) => d.width)
 			.attr("height", (d) => d.height)
@@ -2795,9 +2825,17 @@ export default class SVGCanvasRenderer {
 			.each(addNodeExternalObject.bind(this));
 
 		// Node Image
-		joinedNodeGrps.selectChildren(".d3-node-image")
+		nonBindingNodeGrps
+			.selectChildren(".d3-node-image")
+			.data((d) => (d.layout.imageDisplay ? [d] : []), (d) => d.id)
+			.join(
+				(enter) =>
+					enter
+						.append((d) => this.getImageElement(d))
+						.attr("class", "d3-node-image")
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
-			.each((d, i, nodeGrps) => this.setNodeImageContent(nodeGrps[i], d))
+			.each((d, idx, imgs) => this.setNodeImageContent(imgs[idx], d))
 			.attr("x", (d) => this.nodeUtils.getNodeImagePosX(d))
 			.attr("y", (d) => this.nodeUtils.getNodeImagePosY(d))
 			.attr("width", (d) => this.nodeUtils.getNodeImageWidth(d))
@@ -2805,7 +2843,22 @@ export default class SVGCanvasRenderer {
 			.attr("style", (d) => this.getNodeImageStyle(d, "default"));
 
 		// Node Label
-		joinedNodeGrps.selectChildren(".d3-foreign-object-node-label")
+		nonBindingNodeGrps
+			.selectChildren(".d3-foreign-object-node-label")
+			.data((d) => (d.layout.labelDisplay ? [d] : []), (d) => d.id)
+			.join(
+				(enter) => {
+					const labelFOSel = enter
+						.append("foreignObject")
+						.attr("class", "d3-foreign-object-node-label")
+						.call(this.attachNodeLabelListeners.bind(this));
+					labelFOSel
+						.append("xhtml:div") // Provide a namespace when div is inside foreignObject
+						.append("xhtml:span") // Provide a namespace when span is inside foreignObject
+						.call(this.attachNodeLabelSpanListeners.bind(this));
+					return labelFOSel;
+				}
+			)
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("x", (d) => this.nodeUtils.getNodeLabelPosX(d))
 			.attr("y", (d) => this.nodeUtils.getNodeLabelPosY(d))
@@ -2818,11 +2871,11 @@ export default class SVGCanvasRenderer {
 			.html((d) => escapeText(d.label));
 
 		// Node Ellipsis Icon - if one exists
-		joinedNodeGrps.selectChildren(".d3-node-ellipsis-group")
+		nonBindingNodeGrps.selectChildren(".d3-node-ellipsis-group")
 			.attr("transform", (d) => this.nodeUtils.getNodeEllipsisTranslate(d));
 
 		// Node (Supernode) Expansion Icon - if one exists
-		joinedNodeGrps.selectChildren(".d3-node-super-expand-icon-group")
+		nonBindingNodeGrps.selectChildren(".d3-node-super-expand-icon-group")
 			.attr("transform", (d) => this.nodeUtils.getNodeExpansionIconTranslate(d));
 
 		// Ports display; Supernode sub-flow display; Error marker display; and
@@ -2845,6 +2898,16 @@ export default class SVGCanvasRenderer {
 				this.displayDecorations(d, DEC_NODE, nodeGrp, decorations);
 			}
 		});
+
+		// Add or remove drag behavior as appropriate
+		if (this.config.enableEditingActions) {
+			nonBindingNodeGrps
+				.call(this.dragHandler);
+		} else {
+			nonBindingNodeGrps
+				.call(this.noDragHandler);
+		}
+
 		this.logger.logEndTimer("updateNodes");
 	}
 
@@ -2874,7 +2937,8 @@ export default class SVGCanvasRenderer {
 					this.selectionInfo,
 					this.breadcrumbs,
 					this.nodeLayout,
-					this.canvasLayout
+					this.canvasLayout,
+					this.config
 				);
 			}
 		} else {
@@ -3798,6 +3862,16 @@ export default class SVGCanvasRenderer {
 		return nodeImage && nodeImage.endsWith(".svg") && this.config.enableImageDisplay !== "SVGAsImage" ? "svg" : "image";
 	}
 
+	// Returns a DOM element for the image of the node passed in.
+	getImageElement(node) {
+		const nodeImage = this.getNodeImage(node);
+		const imageType = this.getImageType(nodeImage);
+		if (imageType === "image") {
+			return d3.create("svg:image").node();
+		}
+		return d3.create("svg").node();
+	}
+
 	setNodeStyles(d, type, nodeGrp) {
 		this.setNodeBodyStyles(d, type, nodeGrp);
 		this.setNodeSelectionOutlineStyles(d, type, nodeGrp);
@@ -3931,7 +4005,10 @@ export default class SVGCanvasRenderer {
 
 	addDynamicNodeIcons(d3Event, d, nodeGrp) {
 		if (!this.nodeSizing && !CanvasUtils.isSuperBindingNode(d)) {
-			this.addEllipsisIcon(d, nodeGrp);
+			// Add the ellipsis icon if requested by layout config.
+			if (d.layout.ellipsisDisplay) {
+				this.addEllipsisIcon(d, nodeGrp);
+			}
 
 			// Add Supernode expansion icon and background for expanded supernodes
 			if (CanvasUtils.isExpandedSupernode(d)) {
@@ -3976,7 +4053,6 @@ export default class SVGCanvasRenderer {
 	addEllipsisIcon(d, nodeGrp) {
 		const ellipsisGrp = nodeGrp
 			.append("g")
-			.filter(() => d.layout.ellipsisDisplay)
 			.attr("class", "d3-node-ellipsis-group")
 			.attr("transform", (nd) => this.nodeUtils.getNodeEllipsisTranslate(nd))
 			.on("mousedown", (d3Event) => {
@@ -5471,11 +5547,6 @@ export default class SVGCanvasRenderer {
 			.attr("data-id", (c) => this.getId("comment_grp", c.id))
 			.call(this.attachCommentGroupListeners.bind(this));
 
-		if (this.config.enableEditingActions) {
-			newCommentGroups
-				.call(this.drag);	 // Must put drag after mousedown listener so mousedown gets called first.
-		}
-
 		// Comment Sizing Area
 		newCommentGroups
 			.append("rect")
@@ -5551,6 +5622,15 @@ export default class SVGCanvasRenderer {
 				this.config.enableMarkdownInComments
 					? markdownIt.render(c.content)
 					: escapeText(c.content)));
+
+		// Add or remove drag behavior as appropriate
+		if (this.config.enableEditingActions) {
+			joinedCommentGrps
+				.call(this.dragHandler);
+		} else {
+			joinedCommentGrps
+				.call(this.noDragHandler);
+		}
 	}
 
 	// Attaches the appropriate listeners to the comment groups.
@@ -6327,7 +6407,7 @@ export default class SVGCanvasRenderer {
 	// Creates a new start handle and a new end handle for the link groups
 	// passed in.
 	createNewHandles(handlesGrp) {
-		const startHandle = handlesGrp
+		handlesGrp
 			.append(this.canvasLayout.linkStartHandleObject)
 			.attr("class", (d) => "d3-link-handle-start")
 			// Use mouse down instead of click because it gets called before drag start.
@@ -6339,11 +6419,7 @@ export default class SVGCanvasRenderer {
 				this.logger.log("Link end handle - finished mouse down");
 			});
 
-		if (this.config.enableEditingActions) {
-			startHandle.call(this.dragSelectionHandle);
-		}
-
-		const endHandle = handlesGrp
+		handlesGrp
 			.append(this.canvasLayout.linkEndHandleObject)
 			.attr("class", (d) => "d3-link-handle-end")
 			// Use mouse down instead of click because it gets called before drag start.
@@ -6355,14 +6431,11 @@ export default class SVGCanvasRenderer {
 				this.logger.log("Link end handle - finished mouse down");
 			});
 
-		if (this.config.enableEditingActions) {
-			endHandle.call(this.dragSelectionHandle);
-		}
 	}
 
 	// Updates the start and end link handles for the handle groups passed in.
 	updateHandles(handlesGrp, lineArray) {
-		handlesGrp
+		const startHandle = handlesGrp
 			.selectAll(".d3-link-handle-start")
 			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
@@ -6383,7 +6456,14 @@ export default class SVGCanvasRenderer {
 				}
 			});
 
-		handlesGrp
+		// Add or remove drag behavior as appropriate
+		if (this.config.enableEditingActions) {
+			startHandle.call(this.dragLinkHandler);
+		} else {
+			startHandle.call(this.noDragLinkHandler);
+		}
+
+		const endHandle = handlesGrp
 			.selectAll(".d3-link-handle-end")
 			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
@@ -6404,6 +6484,13 @@ export default class SVGCanvasRenderer {
 						.attr("cy", (d) => d.y2);
 				}
 			});
+
+		// Add or remove drag behavior as appropriate
+		if (this.config.enableEditingActions) {
+			endHandle.call(this.dragLinkHandler);
+		} else {
+			endHandle.call(this.noDragLinkHandler);
+		}
 	}
 
 	// Sets the custom inline styles on the link object passed in.

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

@@ -30,10 +30,6 @@ export default class SvgCanvasNodes {
 			pos.y <= node.y_pos + node.height;
 	}
 
-	getNodeImageClass(node) {
-		return "d3-node-image";
-	}
-
 	getNodeLabelClass(node) {
 		if (CanvasUtils.isExpandedSupernode(node)) {
 			return "d3-node-label d3-label-single-line " + this.getMessageLabelClass(node.messages);

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

@@ -178,7 +178,14 @@ class DropDown extends React.Component {
 
 	// evt is null when onBlur, empty string when clicking the 'x' to clear input
 	handleOnInputChange(evt) {
-		if (evt !== null) {
+		const currentValue = this.props.controller.getPropertyValue(this.props.propertyId);
+
+		// Don't update property value during initial render
+		if ((typeof currentValue === "undefined" || currentValue === null) && evt === "") {
+			return;
+		}
+
+		if (evt !== null && evt !== currentValue) {
 			const value = evt;
 			this.props.controller.updatePropertyValue(this.props.propertyId, value);
 		}

package/src/notification-panel/notification-panel.scss

@@ -24,6 +24,7 @@ $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
 	transition: 0.25s ease-in-out;
 	opacity: 1;
 	margin-top: 0;
+	z-index: 2; // Ensure panel appears on top of bottom panel.
 
 	&.panel-hidden {
 		transition: 0.25s ease-in-out;

package/src/toolbar/toolbar-action-item.jsx

@@ -267,7 +267,7 @@ class ToolbarActionItem extends React.Component {
 		const chevronIcon = this.generateChevronIcon(actionObj);
 
 		let buttonContent = (
-			<div id={"open-action-item"} className={itemContentClassName}>
+			<div className={itemContentClassName}>
 				{labelBefore}
 				{icon}
 				{labelAfter}