@elyra/canvas 12.10.1 → 12.11.1

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

@@ -17,6 +17,7 @@
 /* eslint no-invalid-this: "off" */
 /* eslint brace-style: "off" */
 /* eslint no-lonely-if: "off" */
+/* eslint max-depth: "off" */
 
 // Import just the D3 modules that are needed and combine them as the 'd3' object.
 import * as d3Drag from "d3-drag";
@@ -26,7 +27,7 @@ import * as d3Fetch from "d3-fetch";
 import * as d3Zoom from "./d3-zoom-extension/src";
 const d3 = Object.assign({}, d3Drag, d3Ease, d3Selection, d3Fetch, d3Zoom);
 
-import { cloneDeep, escape as escapeText, get, isEmpty, set,
+import { cloneDeep, escape as escapeText, get, set,
 	unescape as unescapeText } from "lodash";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
@@ -50,6 +51,7 @@ import SvgCanvasNodes from "./svg-canvas-utils-nodes.js";
 import SvgCanvasComments from "./svg-canvas-utils-comments.js";
 import SvgCanvasLinks from "./svg-canvas-utils-links.js";
 import SvgCanvasDecs from "./svg-canvas-utils-decs.js";
+import SVGCanvasPipeline from "./svg-canvas-pipeline";
 
 const showLinksTime = false;
 
@@ -82,8 +84,7 @@ export default class SVGCanvasRenderer {
 		this.config = config;
 		this.canvasController = canvasController;
 		this.objectModel = this.canvasController.getObjectModel();
-		this.activePipeline = this.getActivePipeline(pipelineId); // Must come after line setting this.canvasInfo
-		this.activePipeline = CanvasUtils.preProcessPipeline(this.activePipeline);
+		this.activePipeline = new SVGCanvasPipeline(pipelineId, canvasInfo);
 
 		// An array of renderers for the supernodes on the canvas.
 		this.superRenderers = [];
@@ -164,6 +165,15 @@ export default class SVGCanvasRenderer {
 		// option is switched on.
 		this.dragNewLinkOverNode = null;
 
+
+		// Flag to indicate if the current drag operation is for a node that can
+		// be inserted into a link. Such a node would need input and output ports.
+		this.existingNodeInsertableIntoLink = false;
+
+		// Flag to indicate if the current drag operation is for a node that can
+		// be attachd to a a detachd link.
+		this.existingNodeAttachableToDetachedLinks = false;
+
 		// Allow us to track when a selection is being made so there is
 		// no need to re-render whole canvas
 		this.selecting = false;
@@ -267,15 +277,6 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("constructor" + pipelineId.substring(0, 5));
 	}
 
-	isCanvasEmptyOrBindingsOnly() {
-		return (isEmpty(this.activePipeline.nodes) || this.containsOnlyBindingNodes(this.activePipeline)) &&
-						isEmpty(this.activePipeline.comments);
-	}
-
-	containsOnlyBindingNodes(pipeline) {
-		return !pipeline.nodes.find((node) => !CanvasUtils.isSuperBindingNode(node));
-	}
-
 	// Returns the data object for the parent supernode that references the
 	// active pipeline (managed by this renderer). We get the supernode by
 	// looking through the overall canvas info objects.
@@ -289,17 +290,13 @@ export default class SVGCanvasRenderer {
 				if (!node) {
 					node =
 						pipeline.nodes.find((n) =>
-							this.nodeUtils.isSupernode(n) && n.id === this.supernodeInfo.id);
+							CanvasUtils.isSupernode(n) && n.id === this.supernodeInfo.id);
 				}
 			}
 		});
 		return node;
 	}
 
-	getSupernodes(pipeline) {
-		return pipeline.nodes.filter((node) => this.nodeUtils.isSupernode(node));
-	}
-
 	getZoomTransform() {
 		return this.zoomTransform;
 	}
@@ -312,19 +309,10 @@ export default class SVGCanvasRenderer {
 		this.zoomStartPoint = { x: 0, y: 0, k: 0 };
 	}
 
-	getActivePipeline(pipelineId) {
-		const pipeline = this.canvasInfo.pipelines.find((p) => p.id === pipelineId);
-		if (pipeline) {
-			return pipeline;
-		}
-		return { id: pipelineId, nodes: [], comments: [], links: [] };
-	}
-
 	setCanvasInfoRenderer(canvasInfo) {
 		this.logger.logStartTimer("setCanvasInfoRenderer" + this.pipelineId.substring(0, 5));
 		this.canvasInfo = canvasInfo;
-		this.activePipeline = this.getActivePipeline(this.pipelineId);
-		this.activePipeline = CanvasUtils.preProcessPipeline(this.activePipeline);
+		this.activePipeline = new SVGCanvasPipeline(this.pipelineId, canvasInfo);
 		this.canvasLayout = this.objectModel.getCanvasLayout(); // Refresh the canvas layout info in case it changed.
 
 		// Set the display state incase we changed from in-place to full-page
@@ -361,7 +349,7 @@ export default class SVGCanvasRenderer {
 	// undo action.
 	cleanUpSuperRenderers() {
 		const newSuperRenderers = [];
-		const supernodes = this.getSupernodes(this.activePipeline);
+		const supernodes = this.activePipeline.getSupernodes();
 
 		supernodes.forEach((supernode) => {
 			const ren = this.getRendererForSupernode(supernode);
@@ -530,7 +518,7 @@ export default class SVGCanvasRenderer {
 			// dimensions accordingly.
 			let topAreaHeight;
 			let svgHt;
-			if (this.nodeUtils.isExpanded(supernodeDatum)) {
+			if (CanvasUtils.isExpanded(supernodeDatum)) {
 				topAreaHeight = this.canvasLayout.supernodeTopAreaHeight;
 				svgHt = supernodeDatum.height - (this.canvasLayout.supernodeTopAreaHeight + this.canvasLayout.supernodeSVGAreaPadding);
 			} else {
@@ -881,9 +869,9 @@ export default class SVGCanvasRenderer {
 			fObjectDiv.attr("width", labelDisplayLength);
 		}
 
-		// Calculate the zoom amount if the browser itself is zoomed.
-		// At the time of writing this value is not returned correctly by Safari.
-		const browserZoom = window.devicePixelRatio / 2;
+		// Get the amount the actual browser page is 'zoomed'. This is differet
+		// to the zoom amount for the canvas objects.
+		const browserZoom = this.getBrowserZoom();
 
 		// Calculate the center of the node area for positioning the mouse pointer
 		// on the image when it is being dragged.
@@ -897,6 +885,29 @@ export default class SVGCanvasRenderer {
 		};
 	}
 
+	// Returns the amount the actual browser page is 'zoomed'. This is differet
+	// to the zoom amount for the canvas objects. Unfortunately, this value is not
+	// returned the same for each type of browser so we have to calculate it based
+	// on the type of browser.
+	getBrowserZoom() {
+		let browserZoom = window.devicePixelRatio;
+
+		// Make sure we search for browser idntifiers in this order because with
+		// the Chrome browser userAgent contains the words "Chrome and "Safari"!
+		// However, with the Safari browser, userAgent only contains the word "Safari".
+		if (navigator.userAgent.includes("Chrome")) {
+			browserZoom = window.devicePixelRatio; // This works for Chrome
+
+		} else if (navigator.userAgent.includes("Safari")) {
+			browserZoom = (window.outerWidth - 8) / window.innerWidth; // This works for Safari
+
+		} else if (navigator.userAgent.includes("Firefox")) {
+			browserZoom = window.devicePixelRatio / 2; // This works for Firefox
+		}
+
+		return browserZoom;
+	}
+
 	// Returns an object containing the dimensions of the ghost node that hovers
 	// over canvas when a node is being dragged from the palette. The ghost node
 	// is based on the default node width and height so any change to these values
@@ -909,10 +920,22 @@ export default class SVGCanvasRenderer {
 		};
 	}
 
+	nodeTemplateDragStart(nodeTemplate) {
+		if (this.isNodeTemplateInsertableIntoLink(nodeTemplate)) {
+			this.setDataLinkSelectionAreaWider(true);
+		}
+	}
+
+	nodeTemplateDragEnd(nodeTemplate) {
+		if (this.isNodeTemplateInsertableIntoLink(nodeTemplate)) {
+			this.setDataLinkSelectionAreaWider(false);
+		}
+	}
+
 	// Highlights any data link, that an 'insertable' nodeTemplate from the
 	// palette, is dragged over. The x and y passed in are in page coordinates
 	// based on the top left corner of the page.
-	nodeTemplateDraggedOver(nodeTemplate, x, y) {
+	nodeTemplateDragOver(nodeTemplate, x, y) {
 		if (this.isNodeTemplateInsertableIntoLink(nodeTemplate)) {
 			const link = this.getLinkAtMousePos(x, y);
 			// Set highlighting when there is no link because this will turn
@@ -1121,7 +1144,7 @@ export default class SVGCanvasRenderer {
 	transformMousePosForNode(x, y) {
 		const mousePos = this.convertPageCoordsToCanvasCoords(x, y);
 
-		// Offset mousePos so new node appers in center of mouse location.
+		// Offset mousePos so new node appears in center of mouse location.
 		const ghost = this.getGhostDimensions();
 		mousePos.x -= ghost.width / 2;
 		mousePos.y -= ghost.height / 2;
@@ -1135,7 +1158,7 @@ export default class SVGCanvasRenderer {
 	// is not explicitely set to zero (which some crazy apps want to do!).
 	isNodeTemplateInsertableIntoLink(nodeTemplate) {
 		return this.config.enableInsertNodeDroppedOnLink &&
-			this.isNonBindingNode(nodeTemplate) &&
+			CanvasUtils.hasInputAndOutputPorts(nodeTemplate) &&
 			!this.isPortMaxCardinalityZero(nodeTemplate.inputs[0]) &&
 			!this.isPortMaxCardinalityZero(nodeTemplate.outputs[0]);
 	}
@@ -1146,9 +1169,9 @@ export default class SVGCanvasRenderer {
 	isExistingNodeInsertableIntoLink() {
 		return (this.config.enableInsertNodeDroppedOnLink &&
 			this.dragObjects.length === 1 &&
-			this.isNode(this.dragObjects[0]) &&
-			this.isNonBindingNode(this.dragObjects[0]) &&
-			!this.nodeUtils.isNodeDefaultPortsCardinalityAtMax(this.dragObjects[0], this.activePipeline.links));
+			CanvasUtils.isNode(this.dragObjects[0]) &&
+			CanvasUtils.hasInputAndOutputPorts(this.dragObjects[0]) &&
+			!CanvasUtils.isNodeDefaultPortsCardinalityAtMax(this.dragObjects[0], this.activePipeline.links));
 	}
 
 	// Returns true if the current drag objects array has a single node which
@@ -1157,7 +1180,7 @@ export default class SVGCanvasRenderer {
 	isExistingNodeAttachableToDetachedLinks() {
 		return (this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE &&
 			this.dragObjects.length === 1 &&
-			this.isNode(this.dragObjects[0]));
+			CanvasUtils.isNode(this.dragObjects[0]));
 	}
 
 	// Returns true if the current node template being dragged from the palette
@@ -1214,35 +1237,8 @@ export default class SVGCanvasRenderer {
 		return false;
 	}
 
-	getLink(linkId) {
-		const link = this.activePipeline.links.find((l) => l.id === linkId);
-		return (typeof link === "undefined") ? null : link;
-	}
-
-	// Returns truthy if the object passed in is a node (and not a comment).
-	// Comments don't have a type property.
-	isNode(obj) {
-		return obj.type;
-	}
-
-	getNode(nodeId) {
-		const node = this.activePipeline.nodes.find((nd) => nd.id === nodeId);
-		return (typeof node === "undefined") ? null : node;
-	}
-
-	getNodes(nodeIds) {
-		const nodes = [];
-		nodeIds.forEach((nId) => {
-			const n = this.getNode(nId);
-			if (n) {
-				nodes.push(n);
-			}
-		});
-		return nodes;
-	}
-
 	getNodePort(nodeId, portId, type) {
-		const node = this.activePipeline.nodes.find((nd) => nd.id === nodeId);
+		const node = this.activePipeline.getNode(nodeId);
 		if (node) {
 			let ports;
 			if (type === "input") {
@@ -1256,19 +1252,6 @@ export default class SVGCanvasRenderer {
 		return null;
 	}
 
-	getComment(commentId) {
-		const comment = this.activePipeline.comments.find((com) => com.id === commentId);
-		return (typeof comment === "undefined") ? null : comment;
-	}
-
-	getNodeOrComment(id) {
-		let obj = this.getNode(id);
-		if (obj === null) {
-			obj = this.getComment(id);
-		}
-		return obj;
-	}
-
 	// Sets the maximum zoom extent if we are the renderer of the top level flow
 	// or calls the same method on our parent renderer if we are a sub-flow. This
 	// means the factors will multiply as they percolate up to the top flow.
@@ -1375,7 +1358,7 @@ export default class SVGCanvasRenderer {
 		// to the SVG area. We only attach the zoom behaviour to the top most SVG
 		// area i.e. when we are displaying either the primary pipeline full page
 		// or a sub-pipeline full page.
-		if (!this.isCanvasEmptyOrBindingsOnly() &&
+		if (!this.activePipeline.isEmptyOrBindingsOnly() &&
 				this.dispUtils.isDisplayingFullPage()) {
 			this.canvasSVG
 				.call(this.zoom);
@@ -1454,7 +1437,7 @@ export default class SVGCanvasRenderer {
 	getCanvasCursor() {
 		if (this.dispUtils.isDisplayingFullPage()) {
 			if (this.config.enableInteractionType === INTERACTION_TRACKPAD ||
-					this.isCanvasEmptyOrBindingsOnly()) {
+					this.activePipeline.isEmptyOrBindingsOnly()) {
 				return "default";
 			}
 			return "grab";
@@ -1707,7 +1690,7 @@ export default class SVGCanvasRenderer {
 
 	getZoomToReveal(nodeIDs, xPos, yPos) {
 		const transformedSVGRect = this.getTransformedViewportDimensions();
-		const nodes = this.getNodes(nodeIDs);
+		const nodes = this.activePipeline.getNodes(nodeIDs);
 		const canvasDimensions = CanvasUtils.getCanvasDimensions(nodes, [], [], 0);
 		const canv = this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, 1, 10);
 		const xPosInt = parseInt(xPos, 10);
@@ -2011,9 +1994,8 @@ export default class SVGCanvasRenderer {
 	// a sub-flow that map to a port in the containing supernode. The dimensions
 	// are scaled by k and padded by pad (if provided).
 	getCanvasDimensionsAdjustedForScale(k, pad) {
-		const canvasDimensions = CanvasUtils.getCanvasDimensions(
-			this.activePipeline.nodes, this.activePipeline.comments,
-			this.activePipeline.links, this.canvasLayout.commentHighlightGap);
+		const gap = this.canvasLayout.commentHighlightGap;
+		const canvasDimensions = this.activePipeline.getCanvasDimensions(gap);
 		return this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, k, pad);
 	}
 
@@ -2106,43 +2088,17 @@ export default class SVGCanvasRenderer {
 
 		this.closeContextMenuIfOpen();
 
-		// Note: Comment and Node resizing is started by the comment/supernode highlight rectangle.
+		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
 		if (this.commentSizing) {
-			this.resizeObj = this.getComment(d.id);
+			this.resizeObj = this.activePipeline.getComment(d.id);
 			this.initializeResizeVariables(this.resizeObj);
 
 		} else if (this.nodeSizing) {
-			this.resizeObj = this.getNode(d.id);
+			this.resizeObj = this.activePipeline.getNode(d.id);
 			this.initializeResizeVariables(this.resizeObj);
 
 		} else {
-			this.dragging = true;
-			this.dragOffsetX = 0;
-			this.dragOffsetY = 0;
-			this.dragRunningX = 0;
-			this.dragRunningY = 0;
-			this.dragObjects = this.getDragObjects(d);
-			if (this.dragObjects && this.dragObjects.length > 0) {
-				this.dragStartX = this.dragObjects[0].x_pos;
-				this.dragStartY = this.dragObjects[0].y_pos;
-			}
-
-			// If we are dragging an 'insertable' node, set it to be translucent so
-			// that, when it is dragged over a link line, the highlightd line can be seen OK.
-			if (this.isExistingNodeInsertableIntoLink()) {
-				this.setNodeTranslucentState(this.dragObjects[0].id, true);
-			}
-
-			// If we are dragging an 'attachable' node, set it to be translucent so
-			// that, when it is dragged over link lines, the highlightd lines can be seen OK.
-			if (this.isExistingNodeAttachableToDetachedLinks()) {
-				const mousePos = this.getTransformedMousePos(d3Event);
-				this.dragPointerOffsetInNode = {
-					x: mousePos.x - this.dragObjects[0].x_pos,
-					y: mousePos.y - this.dragObjects[0].y_pos
-				};
-				this.setNodeTranslucentState(this.dragObjects[0].id, true);
-			}
+			this.dragObjectsStart(d3Event, d);
 		}
 		this.logger.logEndTimer("dragStart", true);
 	}
@@ -2154,87 +2110,7 @@ export default class SVGCanvasRenderer {
 		} else if (this.nodeSizing) {
 			this.resizeNode(d3Event);
 		} else {
-			this.dragOffsetX += d3Event.dx;
-			this.dragOffsetY += d3Event.dy;
-
-			// Limit the size a drag can be so, when the user is dragging objects in
-			// an in-place subflow they do not drag them too far.
-			// this.logger.log("Drag offset X = " + this.dragOffsetX + " y = " + this.dragOffsetY);
-			if (this.dispUtils.isDisplayingSubFlowInPlace() &&
-					(this.dragOffsetX > 1000 || this.dragOffsetX < -1000 ||
-						this.dragOffsetY > 1000 || this.dragOffsetY < -1000)) {
-				this.dragOffsetX -= d3Event.dx;
-				this.dragOffsetY -= d3Event.dy;
-
-			} else {
-				let	increment = { x: 0, y: 0 };
-
-				if (this.config.enableSnapToGridType === SNAP_TO_GRID_DURING) {
-					const stgPos = this.snapToGridDraggedNode();
-
-					increment = {
-						x: stgPos.x - this.dragObjects[0].x_pos,
-						y: stgPos.y - this.dragObjects[0].y_pos
-					};
-
-				} else {
-					increment = {
-						x: d3Event.dx,
-						y: d3Event.dy
-					};
-				}
-
-				this.dragRunningX += increment.x;
-				this.dragRunningY += increment.y;
-
-				this.dragObjects.forEach((d) => {
-					d.x_pos += increment.x;
-					d.y_pos += increment.y;
-				});
-
-				if (this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE) {
-					this.getSelectedLinks().forEach((link) => {
-						if (link.srcPos) {
-							link.srcPos.x_pos += increment.x;
-							link.srcPos.y_pos += increment.y;
-						}
-						if (link.trgPos) {
-							link.trgPos.x_pos += increment.x;
-							link.trgPos.y_pos += increment.y;
-						}
-					});
-				}
-			}
-
-			this.displayCanvas();
-
-			if (this.isExistingNodeInsertableIntoLink()) {
-				const link = this.getLinkAtMousePos(d3Event.sourceEvent.clientX, d3Event.sourceEvent.clientY);
-				// Set highlighting when there is no link because this will turn
-				// current highlighting off. And only switch on highlighting when we are
-				// over a fully attached link (not a detached link) and provided the
-				// link is not to/from the node being dragged (which is possible in
-				// some odd situations).
-				if (!link ||
-						(this.isLinkFullyAttached(link) &&
-							this.dragObjects[0].id !== link.srcNodeId &&
-							this.dragObjects[0].id !== link.trgNodeId)) {
-					this.setInsertNodeIntoLinkHighlighting(link);
-				}
-			}
-
-			if (this.isExistingNodeAttachableToDetachedLinks()) {
-				const mousePos = this.getTransformedMousePos(d3Event);
-				const node = this.dragObjects[0];
-				const ghostArea = {
-					x1: mousePos.x - this.dragPointerOffsetInNode.x,
-					y1: mousePos.y - this.dragPointerOffsetInNode.y,
-					x2: mousePos.x - this.dragPointerOffsetInNode.x + node.width,
-					y2: mousePos.y - this.dragPointerOffsetInNode.y + node.height
-				};
-				const links = this.getAttachableLinksForNodeAtPos(node, ghostArea);
-				this.setDetachedLinkHighlighting(links);
-			}
+			this.dragObjectsAction(d3Event);
 		}
 
 		this.logger.logEndTimer("dragMove", true);
@@ -2252,70 +2128,201 @@ export default class SVGCanvasRenderer {
 			this.endNodeSizing();
 
 		} else if (this.dragging) {
-			// Set to false before updating object model so main body of displayNodes is run.
-			this.dragging = false;
+			this.dragObjectsEnd(d3Event, d);
+		}
+
+		this.logger.logEndTimer("dragEnd", true);
+	}
+
+	// Starts the dragging action for canvas objects (nodes and comments).
+	dragObjectsStart(d3Event, d) {
+		// Ensure flags are false before staring a new drag.
+		this.existingNodeInsertableIntoLink = false;
+		this.existingNodeAttachableToDetachedLinks = false;
+
+		this.dragging = true;
+		this.dragOffsetX = 0;
+		this.dragOffsetY = 0;
+		this.dragRunningX = 0;
+		this.dragRunningY = 0;
+		this.dragObjects = this.getDragObjects(d);
+		if (this.dragObjects && this.dragObjects.length > 0) {
+			this.dragStartX = this.dragObjects[0].x_pos;
+			this.dragStartY = this.dragObjects[0].y_pos;
+		}
+
+		// If we are dragging an 'insertable' node, set it to be translucent so
+		// that, when it is dragged over a link line, the highlightd line can be seen OK.
+		if (this.isExistingNodeInsertableIntoLink()) {
+			this.existingNodeInsertableIntoLink = true;
+			this.setNodeTranslucentState(this.dragObjects[0].id, true);
+			this.setDataLinkSelectionAreaWider(true);
+		}
+
+		// If we are dragging an 'attachable' node, set it to be translucent so
+		// that, when it is dragged over link lines, the highlightd lines can be seen OK.
+		if (this.isExistingNodeAttachableToDetachedLinks()) {
+			this.existingNodeAttachableToDetachedLinks = true;
+			const mousePos = this.getTransformedMousePos(d3Event);
+			this.dragPointerOffsetInNode = {
+				x: mousePos.x - this.dragObjects[0].x_pos,
+				y: mousePos.y - this.dragObjects[0].y_pos
+			};
+			this.setNodeTranslucentState(this.dragObjects[0].id, true);
+		}
+	}
+
+	// Performs the dragging action for canvas objects (nodes and comments).
+	dragObjectsAction(d3Event) {
+		this.dragOffsetX += d3Event.dx;
+		this.dragOffsetY += d3Event.dy;
 
-			// If the pointer hasn't moved and enableDragWithoutSelect we interpret
-			// that as a select on the object.
-			if (this.dragOffsetX === 0 &&
-					this.dragOffsetY === 0 &&
-					this.config.enableDragWithoutSelect) {
-				this.selectObjectSourceEvent(d3Event, d);
+		// Limit the size a drag can be so, when the user is dragging objects in
+		// an in-place subflow they do not drag them too far.
+		// this.logger.log("Drag offset X = " + this.dragOffsetX + " y = " + this.dragOffsetY);
+		if (this.dispUtils.isDisplayingSubFlowInPlace() &&
+				(this.dragOffsetX > 1000 || this.dragOffsetX < -1000 ||
+					this.dragOffsetY > 1000 || this.dragOffsetY < -1000)) {
+			this.dragOffsetX -= d3Event.dx;
+			this.dragOffsetY -= d3Event.dy;
+
+		} else {
+			let	increment = { x: 0, y: 0 };
+
+			if (this.config.enableSnapToGridType === SNAP_TO_GRID_DURING) {
+				const stgPos = this.snapToGridDraggedNode();
+
+				increment = {
+					x: stgPos.x - this.dragObjects[0].x_pos,
+					y: stgPos.y - this.dragObjects[0].y_pos
+				};
 
 			} else {
-				if (this.dragRunningX !== 0 ||
-						this.dragRunningY !== 0) {
-					let dragFinalOffset = null;
-					if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-						const stgPos = this.snapToGridDraggedNode();
-						dragFinalOffset = {
-							x: stgPos.x - this.dragStartX,
-							y: stgPos.y - this.dragStartY
-						};
-					} else {
-						dragFinalOffset = { x: this.dragRunningX, y: this.dragRunningY };
-					}
+				increment = {
+					x: d3Event.dx,
+					y: d3Event.dy
+				};
+			}
 
-					if (this.isExistingNodeInsertableIntoLink() &&
-							this.dragOverLink) {
-						this.canvasController.editActionHandler({
-							editType: "insertNodeIntoLink",
-							editSource: "canvas",
-							node: this.dragObjects[0],
-							link: this.dragOverLink,
-							offsetX: dragFinalOffset.x,
-							offsetY: dragFinalOffset.y,
-							pipelineId: this.activePipeline.id });
-					} else if (this.isExistingNodeAttachableToDetachedLinks() &&
-											this.dragOverDetachedLinks.length > 0) {
-						this.canvasController.editActionHandler({
-							editType: "attachNodeToLinks",
-							editSource: "canvas",
-							node: this.dragObjects[0],
-							detachedLinks: this.dragOverDetachedLinks,
-							offsetX: dragFinalOffset.x,
-							offsetY: dragFinalOffset.y,
-							pipelineId: this.activePipeline.id });
-					} else {
-						this.canvasController.editActionHandler({
-							editType: "moveObjects",
-							editSource: "canvas",
-							nodes: this.dragObjects.map((o) => o.id),
-							links: this.getSelectedLinks().filter((l) => l.srcPos || l.trgPos), // Filter detached links
-							offsetX: dragFinalOffset.x,
-							offsetY: dragFinalOffset.y,
-							pipelineId: this.activePipeline.id });
+			this.dragRunningX += increment.x;
+			this.dragRunningY += increment.y;
+
+			this.dragObjects.forEach((d) => {
+				d.x_pos += increment.x;
+				d.y_pos += increment.y;
+			});
+
+			if (this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE) {
+				this.getSelectedLinks().forEach((link) => {
+					if (link.srcPos) {
+						link.srcPos.x_pos += increment.x;
+						link.srcPos.y_pos += increment.y;
 					}
-				}
+					if (link.trgPos) {
+						link.trgPos.x_pos += increment.x;
+						link.trgPos.y_pos += increment.y;
+					}
+				});
 			}
+		}
 
-			// Switch off any drag highlighting
-			this.unsetNodeTranslucentState();
-			this.unsetInsertNodeIntoLinkHighlighting();
-			this.unsetDetachedLinkHighlighting();
+		this.displayCanvas();
+
+		if (this.existingNodeInsertableIntoLink) {
+			const link = this.getLinkAtMousePos(d3Event.sourceEvent.clientX, d3Event.sourceEvent.clientY);
+			// Set highlighting when there is no link because this will turn
+			// current highlighting off. And only switch on highlighting when we are
+			// over a fully attached link (not a detached link) and provided the
+			// link is not to/from the node being dragged (which is possible in
+			// some odd situations).
+			if (!link ||
+					(this.isLinkFullyAttached(link) &&
+						this.dragObjects[0].id !== link.srcNodeId &&
+						this.dragObjects[0].id !== link.trgNodeId)) {
+				this.setInsertNodeIntoLinkHighlighting(link);
+			}
 		}
 
-		this.logger.logEndTimer("dragEnd", true);
+		if (this.existingNodeAttachableToDetachedLinks) {
+			const mousePos = this.getTransformedMousePos(d3Event);
+			const node = this.dragObjects[0];
+			const ghostArea = {
+				x1: mousePos.x - this.dragPointerOffsetInNode.x,
+				y1: mousePos.y - this.dragPointerOffsetInNode.y,
+				x2: mousePos.x - this.dragPointerOffsetInNode.x + node.width,
+				y2: mousePos.y - this.dragPointerOffsetInNode.y + node.height
+			};
+			const links = this.getAttachableLinksForNodeAtPos(node, ghostArea);
+			this.setDetachedLinkHighlighting(links);
+		}
+	}
+
+	// Ends the dragging action for canvas objects (nodes and comments).
+	dragObjectsEnd(d3Event, d) {
+		// Set to false before updating object model so main body of displayNodes is run.
+		this.dragging = false;
+
+		// If the pointer hasn't moved and enableDragWithoutSelect we interpret
+		// that as a select on the object.
+		if (this.dragOffsetX === 0 &&
+				this.dragOffsetY === 0 &&
+				this.config.enableDragWithoutSelect) {
+			this.selectObjectSourceEvent(d3Event, d);
+
+		} else {
+			if (this.dragRunningX !== 0 ||
+					this.dragRunningY !== 0) {
+				let dragFinalOffset = null;
+				if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
+					const stgPos = this.snapToGridDraggedNode();
+					dragFinalOffset = {
+						x: stgPos.x - this.dragStartX,
+						y: stgPos.y - this.dragStartY
+					};
+				} else {
+					dragFinalOffset = { x: this.dragRunningX, y: this.dragRunningY };
+				}
+
+				if (this.existingNodeInsertableIntoLink &&
+						this.dragOverLink) {
+					this.canvasController.editActionHandler({
+						editType: "insertNodeIntoLink",
+						editSource: "canvas",
+						node: this.dragObjects[0],
+						link: this.dragOverLink,
+						offsetX: dragFinalOffset.x,
+						offsetY: dragFinalOffset.y,
+						pipelineId: this.activePipeline.id });
+
+				} else if (this.existingNodeAttachableToDetachedLinks &&
+										this.dragOverDetachedLinks.length > 0) {
+					this.canvasController.editActionHandler({
+						editType: "attachNodeToLinks",
+						editSource: "canvas",
+						node: this.dragObjects[0],
+						detachedLinks: this.dragOverDetachedLinks,
+						offsetX: dragFinalOffset.x,
+						offsetY: dragFinalOffset.y,
+						pipelineId: this.activePipeline.id });
+
+				} else {
+					this.canvasController.editActionHandler({
+						editType: "moveObjects",
+						editSource: "canvas",
+						nodes: this.dragObjects.map((o) => o.id),
+						links: this.getSelectedLinks().filter((l) => l.srcPos || l.trgPos), // Filter detached links
+						offsetX: dragFinalOffset.x,
+						offsetY: dragFinalOffset.y,
+						pipelineId: this.activePipeline.id });
+				}
+			}
+		}
+
+		// Switch off any drag highlighting
+		this.setDataLinkSelectionAreaWider(false);
+		this.unsetNodeTranslucentState();
+		this.unsetInsertNodeIntoLinkHighlighting();
+		this.unsetDetachedLinkHighlighting();
 	}
 
 	dragStartLinkHandle(d3Event, d) {
@@ -2326,7 +2333,7 @@ export default class SVGCanvasRenderer {
 		this.draggingLinkHandle = true;
 
 		const handleSelection = d3.select(d3Event.sourceEvent.currentTarget);
-		const link = this.getLink(d.id);
+		const link = this.activePipeline.getLink(d.id);
 		const oldLink = cloneDeep(link);
 
 		const linkGrpSelector = this.getLinkGroupSelectionById(d.id);
@@ -2349,14 +2356,14 @@ export default class SVGCanvasRenderer {
 			if (this.draggingLinkData.endBeingDragged === "end") {
 				const links = this.activePipeline.links.filter((lnk) => lnk.id !== link.id);
 				this.setUnavailableTargetNodesHighlighting(
-					this.getNode(this.draggingLinkData.link.srcNodeId),
+					this.activePipeline.getNode(this.draggingLinkData.link.srcNodeId),
 					this.draggingLinkData.link.srcNodePortId,
 					links
 				);
 			} else if (this.draggingLinkData.endBeingDragged === "start") {
 				const links = this.activePipeline.links.filter((lnk) => lnk.id !== link.id);
 				this.setUnavailableSourceNodesHighlighting(
-					this.getNode(this.draggingLinkData.oldLink.trgNodeId),
+					this.activePipeline.getNode(this.draggingLinkData.oldLink.trgNodeId),
 					this.draggingLinkData.link.trgNodePortId,
 					links
 				);
@@ -2449,7 +2456,7 @@ export default class SVGCanvasRenderer {
 		const nodeGroupSel = this.getAllNodeGroupsSelection();
 
 		nodeGroupSel
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("transform", (d) => `translate(${d.x_pos}, ${d.y_pos})`);
 
 		if (this.dispUtils.isDisplayingSubFlow()) {
@@ -2493,6 +2500,8 @@ export default class SVGCanvasRenderer {
 	}
 
 	createNodes(enter) {
+		this.logger.logStartTimer("createNodes");
+
 		const newNodeGroups = enter
 			.append("g")
 			.attr("data-id", (d) => this.getId("node_grp", d.id))
@@ -2504,7 +2513,7 @@ export default class SVGCanvasRenderer {
 		}
 
 		// Node Sizing Area.
-		newNodeGroups.filter((d) => this.nodeUtils.isSupernode(d))
+		newNodeGroups.filter((d) => CanvasUtils.isSupernode(d))
 			.append("path")
 			.attr("class", "d3-node-sizing")
 			.call(this.attachNodeSizingListeners.bind(this));
@@ -2538,31 +2547,35 @@ export default class SVGCanvasRenderer {
 			.append("xhtml:span") // Provide a namespace when span is inside foreignObject
 			.call(this.attachNodeLabelSpanListeners.bind(this));
 
+		this.logger.logEndTimer("createNodes");
+
 		return newNodeGroups;
 	}
 
 	updateNodes(joinedNodeGrps) {
+		this.logger.logStartTimer("updateNodes");
+
 		// Node Sizing Area
 		joinedNodeGrps.selectChildren(".d3-node-sizing")
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeShapePathSizing(d));
 
 		// Node Selection Highlighting Outline.
 		joinedNodeGrps.selectChildren(".d3-node-selection-highlight")
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeSelectionOutline(d))
 			.attr("data-selected", (d) => (this.objectModel.isSelected(d.id, this.activePipeline.id) ? "yes" : "no"))
 			.attr("style", (d) => this.getNodeSelectionOutlineStyle(d, "default"));
 
 		// Node Body
 		joinedNodeGrps.selectChildren(".d3-node-body-outline")
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeShapePath(d))
 			.attr("style", (d) => this.getNodeBodyStyle(d, "default"));
 
 		// Node Image
 		joinedNodeGrps.selectChildren(".d3-node-image")
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.each((d, i, nodeGrps) => this.setNodeImageContent(nodeGrps[i], d))
 			.attr("x", (d) => this.nodeUtils.getNodeImagePosX(d))
 			.attr("y", (d) => this.nodeUtils.getNodeImagePosY(d))
@@ -2572,7 +2585,7 @@ export default class SVGCanvasRenderer {
 
 		// Node Label
 		joinedNodeGrps.selectChildren(".d3-foreign-object")
-			.datum((d) => this.getNode(d.id))
+			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("x", (d) => this.nodeUtils.getNodeLabelPosX(d))
 			.attr("y", (d) => this.nodeUtils.getNodeLabelPosY(d))
 			.attr("width", (d) => this.nodeUtils.getNodeLabelWidth(d))
@@ -2599,7 +2612,7 @@ export default class SVGCanvasRenderer {
 
 			this.displayPorts(nodeGrp, d);
 
-			if (this.nodeUtils.isSupernode(d)) {
+			if (CanvasUtils.isSupernode(d)) {
 				this.displaySupernodeContents(d, d3.select(grps[index]));
 			}
 
@@ -2612,6 +2625,7 @@ export default class SVGCanvasRenderer {
 				this.displayDecorations(d, DEC_NODE, nodeGrp, decorations);
 			}
 		});
+		this.logger.logEndTimer("updateNodes");
 	}
 
 	// Handles the display of a supernode sub-flow contents or hides the contents
@@ -2619,7 +2633,7 @@ export default class SVGCanvasRenderer {
 	displaySupernodeContents(d, supernodeD3Object) {
 		let ren = this.getRendererForSupernode(d);
 
-		if (this.nodeUtils.isExpanded(d)) {
+		if (CanvasUtils.isExpanded(d)) {
 			if (!ren) {
 				ren = this.createSupernodeRenderer(d, supernodeD3Object); // Create will call displayCanvas
 				this.superRenderers.push(ren);
@@ -2848,7 +2862,7 @@ export default class SVGCanvasRenderer {
 	attachNodeSizingListeners(nodeGrps) {
 		nodeGrps
 			.on("mousedown", (d3Event, d) => {
-				if (this.nodeUtils.isExpandedSupernode(d)) {
+				if (CanvasUtils.isExpandedSupernode(d)) {
 					this.nodeSizing = true;
 					// Note - node resizing and finalization of size is handled by drag functions.
 					this.addTempCursorOverlay(this.nodeSizingCursor);
@@ -2862,7 +2876,7 @@ export default class SVGCanvasRenderer {
 			// the node outline.
 			.on("mousemove mouseenter", (d3Event, d) => {
 				if (this.config.enableEditingActions && // Only set cursor when we are able to edit nodes
-						this.nodeUtils.isExpandedSupernode(d) &&
+						CanvasUtils.isExpandedSupernode(d) &&
 						!this.isRegionSelectOrSizingInProgress()) { // Don't switch sizing direction if we are already sizing
 					let cursorType = "pointer";
 					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
@@ -2879,7 +2893,7 @@ export default class SVGCanvasRenderer {
 		nodeLabels
 			.on("mouseenter", (d3Event, d) => {
 				const labelSel = d3.select(d3Event.currentTarget);
-				if (this.config.enableDisplayFullLabelOnHover && !this.nodeUtils.isExpandedSupernode(d)) {
+				if (this.config.enableDisplayFullLabelOnHover && !CanvasUtils.isExpandedSupernode(d)) {
 					const spanSel = labelSel.selectAll("span");
 					labelSel
 						.attr("x", this.nodeUtils.getNodeLabelHoverPosX(d))
@@ -2890,7 +2904,7 @@ export default class SVGCanvasRenderer {
 			})
 			.on("mouseleave", (d3Event, d) => {
 				const labelSel = d3.select(d3Event.currentTarget);
-				if (this.config.enableDisplayFullLabelOnHover && !this.nodeUtils.isExpandedSupernode(d)) {
+				if (this.config.enableDisplayFullLabelOnHover && !CanvasUtils.isExpandedSupernode(d)) {
 					labelSel
 						.attr("x", this.nodeUtils.getNodeLabelPosX(d))
 						.attr("width", this.nodeUtils.getNodeLabelWidth(d))
@@ -2929,7 +2943,7 @@ export default class SVGCanvasRenderer {
 					// Make sure this is just a left mouse button click - we don't want context menu click starting a line being drawn
 					if (d3Event.button === 0) {
 						CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stops the node drag behavior when clicking on the handle/circle
-						const srcNode = this.getNode(node.id);
+						const srcNode = this.activePipeline.getNode(node.id);
 						this.drawingNewLinkData = {
 							srcObjId: node.id,
 							srcPortId: port.id,
@@ -2987,7 +3001,7 @@ export default class SVGCanvasRenderer {
 				// Make sure this is just a left mouse button click - we don't want context menu click starting a line being drawn
 				if (d3Event.button === 0) {
 					CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stops the node drag behavior when clicking on the handle/circle
-					const srcNode = this.getNode(node.id);
+					const srcNode = this.activePipeline.getNode(node.id);
 					if (!CanvasUtils.isSrcCardinalityAtMax(port.id, srcNode, this.activePipeline.links)) {
 						this.drawingNewLinkData = {
 							srcObjId: node.id,
@@ -3203,7 +3217,7 @@ export default class SVGCanvasRenderer {
 		// to be a timing issue since the same problem is not evident with the
 		// similar code for the node group object.
 		// TODO - Issue 2465 - Find out why this problem occurs.
-		const objectTypeName = this.getObjectTypeName(d);
+		const objectTypeName = this.activePipeline.getObjectTypeName(d);
 		if (objectTypeName === "node" || objectTypeName === "link") {
 			this.canvasController.clickActionHandler({
 				clickType: d3EventType === "contextmenu" || this.ellipsisClicked ? "SINGLE_CLICK_CONTEXTMENU" : "SINGLE_CLICK",
@@ -3215,16 +3229,6 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
-	// Returns the name of the type of object d.
-	getObjectTypeName(d) {
-		if (this.getComment(d.id)) {
-			return "comment";
-		} else if (this.getNode(d.id)) {
-			return "node";
-		}
-		return "link";
-	}
-
 	// Displays a set of decorations on either a node or link object.
 	// d       - This is a node or link object.
 	// objType - A string set to either DEC_NODE or DEC_LINK.
@@ -3459,11 +3463,11 @@ export default class SVGCanvasRenderer {
 		if (!d.image) {
 			return null;
 		} else if (d.image === USE_DEFAULT_ICON) {
-			if (this.nodeUtils.isSupernode(d)) {
+			if (CanvasUtils.isSupernode(d)) {
 				return SUPERNODE_ICON;
 			}
 		} else if (d.image === USE_DEFAULT_EXT_ICON) {
-			if (this.nodeUtils.isSupernode(d)) {
+			if (CanvasUtils.isSupernode(d)) {
 				return SUPERNODE_EXT_ICON;
 			}
 		}
@@ -3538,14 +3542,14 @@ export default class SVGCanvasRenderer {
 
 	doesExpandedSupernodeHaveStyledNodes(d) {
 		let expandedSupernodeHaveStyledNodes = false;
-		if (this.nodeUtils.isExpandedSupernode(d) && d.subflow_ref && d.subflow_ref.pipeline_id_ref) {
-			const subflow = this.getActivePipeline(d.subflow_ref.pipeline_id_ref);
+		if (CanvasUtils.isExpandedSupernode(d) && d.subflow_ref && d.subflow_ref.pipeline_id_ref) {
+			const subflow = new SVGCanvasPipeline(d.subflow_ref.pipeline_id_ref, this.canvasInfo);
 			const nodeGrp = subflow.nodes;
 			nodeGrp.forEach((node) => {
 				if (node.style || node.style_temp) {
 					expandedSupernodeHaveStyledNodes = true;
 					return;
-				} else if (!expandedSupernodeHaveStyledNodes && this.nodeUtils.isExpandedSupernode(node)) {
+				} else if (!expandedSupernodeHaveStyledNodes && CanvasUtils.isExpandedSupernode(node)) {
 					expandedSupernodeHaveStyledNodes = this.doesExpandedSupernodeHaveStyledNodes(node);
 				}
 			});
@@ -3643,7 +3647,7 @@ export default class SVGCanvasRenderer {
 
 
 			// Add Supernode expansion icon and background for expanded supernodes
-			if (this.nodeUtils.isExpandedSupernode(d)) {
+			if (CanvasUtils.isExpandedSupernode(d)) {
 				const expGrp = nodeGrp
 					.append("g")
 					.attr("transform", (nd) => this.nodeUtils.getNodeExpansionIconTranslate(nd))
@@ -3730,13 +3734,6 @@ export default class SVGCanvasRenderer {
 			.attr("transform", (port) => this.getPortArrowPathTransform(port));
 	}
 
-	// Returns true if the object passed in is a non-binding node. There's a
-	// chance the object might be a comment so we make sure the object is a
-	// node before checking the type.
-	isNonBindingNode(obj) {
-		return (this.isNode(obj) && obj.type !== "binding");
-	}
-
 	// Returns true if the port (from a node template) passed in has a max
 	// cardinaility of zero. If cardinality or cardinality.max is missing the
 	// max is considered to be non-zero.
@@ -3951,7 +3948,7 @@ export default class SVGCanvasRenderer {
 
 	drawNewCommentLinkForPorts(transPos) {
 		const that = this;
-		const srcComment = this.getComment(this.drawingNewLinkData.srcObjId);
+		const srcComment = this.activePipeline.getComment(this.drawingNewLinkData.srcObjId);
 		const startPos = this.linkUtils.getNewStraightCommentLinkStartPos(srcComment, transPos);
 		const linkType = COMMENT_LINK;
 
@@ -4044,7 +4041,7 @@ export default class SVGCanvasRenderer {
 		if (trgNode !== null) {
 			const type = this.drawingNewLinkData.action;
 			if (type === NODE_LINK) {
-				const srcNode = this.getNode(this.drawingNewLinkData.srcObjId);
+				const srcNode = this.activePipeline.getNode(this.drawingNewLinkData.srcObjId);
 				const srcPortId = this.drawingNewLinkData.srcPortId;
 				const trgPortId = this.getInputNodePortId(d3Event, trgNode);
 
@@ -4077,7 +4074,7 @@ export default class SVGCanvasRenderer {
 				}
 
 			} else if (type === ASSOCIATION_LINK) {
-				const srcNode = this.getNode(this.drawingNewLinkData.srcObjId);
+				const srcNode = this.activePipeline.getNode(this.drawingNewLinkData.srcObjId);
 
 				if (CanvasUtils.isAssocConnectionAllowed(srcNode, trgNode, this.activePipeline.links)) {
 					this.canvasController.editActionHandler({
@@ -4256,7 +4253,7 @@ export default class SVGCanvasRenderer {
 				newLink: newLink,
 				pipelineId: this.pipelineId });
 		} else {
-			this.restoreLink(this.draggingLinkData.oldLink);
+			this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
 			this.displayLinks();
 		}
 
@@ -4326,17 +4323,11 @@ export default class SVGCanvasRenderer {
 		return null;
 	}
 
-	// Restores the link in the links array with the one passd in.
-	restoreLink(oldLink) {
-		const index = this.activePipeline.links.findIndex((l) => l.id === oldLink.id);
-		this.activePipeline.links.splice(index, 1, oldLink);
-	}
-
 	// Returns true if the update command for a dragged link can be executed.
 	// It might be prevented from executing if either the course
 	canExecuteUpdateLinkCommand(newLink, oldLink) {
-		const srcNode = this.getNode(newLink.srcNodeId);
-		const trgNode = this.getNode(newLink.trgNodeId);
+		const srcNode = this.activePipeline.getNode(newLink.srcNodeId);
+		const trgNode = this.activePipeline.getNode(newLink.trgNodeId);
 		const linkSrcChanged = this.hasLinkSrcChanged(newLink, oldLink);
 		const linkTrgChanged = this.hasLinkTrgChanged(newLink, oldLink);
 		const links = this.activePipeline.links;
@@ -4418,20 +4409,11 @@ export default class SVGCanvasRenderer {
 	// Returns a link, if one can be found, at the position indicated by x and y
 	// coordinates.
 	getLinkAtMousePos(x, y) {
-		const element = this.getLinkElementAtMousePos(x, y);
+		const element = this.getElementWithClassAtPosition(x, y, "d3-data-link");
 		const link = this.getNodeLinkForElement(element);
 		return link;
 	}
 
-	// Returns a link DOM element, if one can be found, at the
-	// position indicated by x and y coordinates.
-	getLinkElementAtMousePos(x, y) {
-		this.setDataLinkSelectionAreaWider(true);
-		const element = this.getElementWithClassAtPosition(x, y, "d3-data-link");
-		this.setDataLinkSelectionAreaWider(false);
-		return element;
-	}
-
 	// Returns the node link object from the canvasInfo corresponding to the
 	// element passed in provided it is a 'path' DOM object. Returns null if
 	// a link cannot be found.
@@ -4439,7 +4421,7 @@ export default class SVGCanvasRenderer {
 		if (element) {
 			const datum = d3.select(element).datum();
 			if (datum) {
-				var foundLink = this.getLink(datum.id, this.pipelineId);
+				var foundLink = this.activePipeline.getLink(datum.id);
 				if (foundLink && foundLink.type === NODE_LINK) {
 					return foundLink;
 				}
@@ -4448,8 +4430,12 @@ export default class SVGCanvasRenderer {
 		return null;
 	}
 
+	// Switches the link selection area to be wider (when state is true) and
+	// regular size (when state is false).  The wider width assists detection
+	// of a node being dragged over the link - for when the 'insert node into link'
+	// feature is active.
 	setDataLinkSelectionAreaWider(state) {
-		this.canvasSVG.selectAll(".d3-data-link-selection-area").classed("d3-extra-width", state);
+		this.nodesLinksGrp.selectAll(".d3-data-link-selection-area").classed("d3-extra-width", state);
 	}
 
 	// Returns a node, if one can be found, at the position indicated by
@@ -4563,7 +4549,7 @@ export default class SVGCanvasRenderer {
 		if (element && element.nodeName === "g") {
 			const datum = d3.select(element).datum();
 			if (datum) {
-				return this.getNode(datum.id);
+				return this.activePipeline.getNode(datum.id);
 			}
 		}
 		return null;
@@ -4679,7 +4665,7 @@ export default class SVGCanvasRenderer {
 
 	// Returns a path string that will draw the selection outline shape of the node.
 	getNodeSelectionOutline(data) {
-		if (data.layout.selectionPath && !this.nodeUtils.isExpanded(data)) {
+		if (data.layout.selectionPath && !CanvasUtils.isExpanded(data)) {
 			return data.layout.selectionPath;
 
 		} else if (data.layout.nodeShape === "port-arcs") {
@@ -4691,7 +4677,7 @@ export default class SVGCanvasRenderer {
 
 	// Returns a path string that will draw the body shape of the node.
 	getNodeShapePath(data) {
-		if (data.layout.bodyPath && !this.nodeUtils.isExpanded(data)) {
+		if (data.layout.bodyPath && !CanvasUtils.isExpanded(data)) {
 			return data.layout.bodyPath;
 
 		} else if (data.layout.nodeShape === "port-arcs") {
@@ -4893,7 +4879,7 @@ export default class SVGCanvasRenderer {
 			} else {
 				let xPosition = 0;
 
-				if (this.nodeUtils.isExpandedSupernode(data)) {
+				if (CanvasUtils.isExpandedSupernode(data)) {
 					const widthSvgArea = data.width - (2 * this.canvasLayout.supernodeSVGAreaPadding);
 					const remainingSpace = widthSvgArea - portsWidth;
 					xPosition = (2 * this.canvasLayout.supernodeSVGAreaPadding) + (remainingSpace / 2);
@@ -4947,7 +4933,7 @@ export default class SVGCanvasRenderer {
 	setPortPositionsLeftRightAllPorts(data, ports, portsHeight, xPos, yPos) {
 		let yPosition = 0;
 
-		if (this.nodeUtils.isExpandedSupernode(data)) {
+		if (CanvasUtils.isExpandedSupernode(data)) {
 			const heightSvgArea = data.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
 			const remainingSpace = heightSvgArea - portsHeight;
 			yPosition = this.canvasLayout.supernodeTopAreaHeight + this.canvasLayout.supernodeSVGAreaPadding + (remainingSpace / 2);
@@ -4979,7 +4965,7 @@ export default class SVGCanvasRenderer {
 	// regular nodes or expanded supernodes.
 	setPortPositionsLeftRightSinglePort(data, ports, xPos, yPos) {
 		let yPosition = 0;
-		if (this.nodeUtils.isExpandedSupernode(data)) {
+		if (CanvasUtils.isExpandedSupernode(data)) {
 			const heightSvgArea = data.height - this.canvasLayout.supernodeTopAreaHeight - this.canvasLayout.supernodeSVGAreaPadding;
 			yPosition = this.canvasLayout.supernodeTopAreaHeight + (heightSvgArea / 2);
 
@@ -5012,7 +4998,7 @@ export default class SVGCanvasRenderer {
 	displayMovedComments() {
 		this.getAllCommentGroupsSelection()
 			.attr("transform", (c) => `translate(${c.x_pos}, ${c.y_pos})`)
-			.datum((d) => this.getComment(d.id));
+			.datum((d) => this.activePipeline.getComment(d.id));
 	}
 
 	displayCommentsSelectionStatus() {
@@ -5088,7 +5074,7 @@ export default class SVGCanvasRenderer {
 
 		// Comment Sizing Area
 		joinedCommentGrps.selectChildren(".d3-comment-sizing")
-			.datum((c) => this.getComment(c.id))
+			.datum((c) => this.activePipeline.getComment(c.id))
 			.attr("x", -this.canvasLayout.commentSizingArea)
 			.attr("y", -this.canvasLayout.commentSizingArea)
 			.attr("height", (c) => c.height + (2 * this.canvasLayout.commentSizingArea))
@@ -5097,7 +5083,7 @@ export default class SVGCanvasRenderer {
 
 		// Comment Selection Highlighting Outline
 		joinedCommentGrps.selectChildren(".d3-comment-selection-highlight")
-			.datum((c) => this.getComment(c.id))
+			.datum((c) => this.activePipeline.getComment(c.id))
 			.attr("x", -this.canvasLayout.commentHighlightGap)
 			.attr("y", -this.canvasLayout.commentHighlightGap)
 			.attr("height", (c) => c.height + (2 * this.canvasLayout.commentHighlightGap))
@@ -5107,7 +5093,7 @@ export default class SVGCanvasRenderer {
 
 		// Comment Body
 		joinedCommentGrps.selectChildren(".d3-comment-rect")
-			.datum((c) => this.getComment(c.id))
+			.datum((c) => this.activePipeline.getComment(c.id))
 			.attr("height", (c) => c.height)
 			.attr("width", (c) => c.width)
 			.attr("class", "d3-comment-rect")
@@ -5115,7 +5101,7 @@ export default class SVGCanvasRenderer {
 
 		// Comment Text
 		joinedCommentGrps.selectChildren(".d3-foreign-object")
-			.datum((c) => this.getComment(c.id))
+			.datum((c) => this.activePipeline.getComment(c.id))
 			.attr("width", (c) => c.width)
 			.attr("height", (c) => c.height)
 			.select("div")
@@ -5299,14 +5285,14 @@ export default class SVGCanvasRenderer {
 		if (this.textAreaHeight < scrollHeight) {
 			this.textAreaHeight = scrollHeight;
 			foreignObject.style("height", this.textAreaHeight + "px");
-			this.getComment(data.id).height = this.textAreaHeight;
+			this.activePipeline.getComment(data.id).height = this.textAreaHeight;
 			this.displayComments();
 			this.displayLinks();
 		}
 	}
 
 	saveCommentChanges(id, newText, newHeight) {
-		const comment = this.getComment(id);
+		const comment = this.activePipeline.getComment(id);
 		const data = {
 			editType: "editComment",
 			editSource: "canvas",
@@ -5669,7 +5655,7 @@ export default class SVGCanvasRenderer {
 			if (this.config.enableMoveNodesOnSupernodeResize) {
 				const objectsInfo = CanvasUtils.moveSurroundingObjects(
 					oldSupernode,
-					this.activePipeline.nodes.concat(this.activePipeline.comments),
+					this.activePipeline.getNodesAndComments(),
 					this.nodeSizingDirection,
 					this.resizeObj.width,
 					this.resizeObj.height,
@@ -5954,13 +5940,13 @@ export default class SVGCanvasRenderer {
 		// Update link selection area
 		joinedLinkGrps
 			.selectAll(".d3-link-selection-area")
-			.datum((d) => this.getLink(d.id))
+			.datum((d) => this.activePipeline.getLink(d.id))
 			.attr("d", (d) => d.pathInfo.path);
 
 		// Update link line
 		joinedLinkGrps
 			.selectAll(".d3-link-line")
-			.datum((d) => this.getLink(d.id))
+			.datum((d) => this.activePipeline.getLink(d.id))
 			.attr("d", (d) => d.pathInfo.path)
 			.attr("class", "d3-link-line")
 			.attr("style", (d) => CanvasUtils.getObjectStyle(d, "line", "default"));
@@ -5971,7 +5957,7 @@ export default class SVGCanvasRenderer {
 											(d.type === COMMENT_LINK && this.canvasLayout.commentLinkArrowHead) ||
 											(d.type === NODE_LINK && this.canvasLayout.linkType === LINK_TYPE_STRAIGHT))
 			.selectAll(".d3-link-line-arrow-head")
-			.datum((d) => this.getLink(d.id))
+			.datum((d) => this.activePipeline.getLink(d.id))
 			.attr("d", (d) => this.getArrowHead(d))
 			.attr("transform", (d) => this.getArrowHeadTransform(d))
 			.attr("class", "d3-link-line-arrow-head")
@@ -6095,7 +6081,7 @@ export default class SVGCanvasRenderer {
 	updateHandles(handlesGrp, lineArray) {
 		handlesGrp
 			.selectAll(".d3-link-handle-start")
-			.datum((d) => this.getLink(d.id))
+			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
 				const obj = d3.select(linkHandles[index]);
 				if (this.canvasLayout.linkStartHandleObject === "image") {
@@ -6116,7 +6102,7 @@ export default class SVGCanvasRenderer {
 
 		handlesGrp
 			.selectAll(".d3-link-handle-end")
-			.datum((d) => this.getLink(d.id))
+			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
 				const obj = d3.select(linkHandles[index]);
 				if (this.canvasLayout.linkEndHandleObject === "image") {
@@ -6225,7 +6211,7 @@ export default class SVGCanvasRenderer {
 			customClass = " " + d.class_name;
 		}
 
-		const supernodeClass = this.nodeUtils.isSupernode(d) && this.nodeUtils.isExpanded(d)
+		const supernodeClass = CanvasUtils.isExpandedSupernode(d)
 			? " d3-node-supernode-expanded"
 			: "";
 
@@ -6745,7 +6731,7 @@ export default class SVGCanvasRenderer {
 			str += " regionSelect = true";
 		}
 		if (str === "Flags:") {
-			str += " None set to true";
+			str += " None";
 		}
 		return str;
 	}