@elyra/canvas 12.36.0 → 12.37.0

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

@@ -19,12 +19,9 @@
 /* eslint no-lonely-if: "off" */
 
 // Import just the D3 modules that are needed and combine them as the 'd3' object.
-import * as d3Drag from "d3-drag";
-import * as d3Ease from "d3-ease";
 import * as d3Selection from "d3-selection";
 import * as d3Fetch from "d3-fetch";
-import * as d3Zoom from "./d3-zoom-extension/src";
-const d3 = Object.assign({}, d3Drag, d3Ease, d3Selection, d3Fetch, d3Zoom);
+const d3 = Object.assign({}, d3Selection, d3Fetch);
 
 const markdownIt = require("markdown-it")({
 	html: false, // Don't allow HTML to be executed in comments.
@@ -32,17 +29,15 @@ const markdownIt = require("markdown-it")({
 	typographer: true
 });
 
-import { cloneDeep, escape as escapeText, forOwn, get } from "lodash";
-import { addNodeExternalObject, addDecExternalObject, removeExternalObject } from "./svg-canvas-utils-external.js";
+import { escape as escapeText, forOwn, get } 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,
 	LINK_TYPE_CURVE, LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT,
 	LINK_DIR_LEFT_RIGHT, LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP,
 	LINK_SELECTION_NONE, LINK_SELECTION_HANDLES, LINK_SELECTION_DETACHABLE,
-	CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, LEFT_ARROW_ICON, EDIT_ICON,
-	NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_CIRCLE, PORT_OBJECT_IMAGE,
+	CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, EDIT_ICON,
+	NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_IMAGE,
 	TIP_TYPE_NODE, TIP_TYPE_PORT, TIP_TYPE_DEC, TIP_TYPE_LINK,
-	INTERACTION_MOUSE, INTERACTION_TRACKPAD, INTERACTION_CARBON,
 	USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
 	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
 	NORTH, SOUTH, EAST, WEST }
@@ -56,15 +51,16 @@ 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 SvgCanvasExternal from "./svg-canvas-utils-external.js";
 import SvgCanvasTextArea from "./svg-canvas-utils-textarea.js";
+import SvgCanvasDragObject from "./svg-canvas-utils-drag-objects.js";
+import SvgCanvasDragNewLink from "./svg-canvas-utils-drag-new-link.js";
+import SvgCanvasDragDetLink from "./svg-canvas-utils-drag-det-link.js";
+import SvgCanvasZoom from "./svg-canvas-utils-zoom.js";
 import SVGCanvasPipeline from "./svg-canvas-pipeline";
 
 const NINETY_DEGREES = 90;
 
-const INPUT_TYPE = "input_type";
-const OUTPUT_TYPE = "output_type";
-
-
 export default class SVGCanvasRenderer {
 	constructor(pipelineId, canvasDiv, canvasController, canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, config, supernodeInfo = {}) {
 		this.logger = new Logger(["SVGCanvasRenderer", "PipeId", pipelineId]);
@@ -92,6 +88,11 @@ export default class SVGCanvasRenderer {
 		this.commentUtils = new SvgCanvasComments();
 		this.linkUtils = new SvgCanvasLinks(this.config, this.canvasLayout, this.nodeUtils, this.commentUtils);
 		this.decUtils = new SvgCanvasDecs(this.canvasLayout);
+		this.dragObjectUtils = new SvgCanvasDragObject(this);
+		this.dragNewLinkUtils = new SvgCanvasDragNewLink(this);
+		this.dragDetLinkUtils = new SvgCanvasDragDetLink(this);
+		this.zoomUtils = new SvgCanvasZoom(this);
+		this.externalUtils = new SvgCanvasExternal(this);
 		this.svgCanvasTextArea = new SvgCanvasTextArea(
 			this.config,
 			this.dispUtils,
@@ -108,44 +109,6 @@ export default class SVGCanvasRenderer {
 		this.dispUtils.setDisplayState();
 		this.logger.log(this.dispUtils.getDisplayStateMsg());
 
-		// Initialize zoom variables
-		this.initializeZoomVariables();
-
-		// Dimensions for extent of canvas scaling
-		this.minScaleExtent = 0.2;
-		this.maxScaleExtent = 1.8;
-
-		// Allows us to track the sizing behavior of comments
-		this.commentSizing = false;
-		this.commentSizingDirection = "";
-
-		// Allows us to track the sizing behavior of nodes
-		this.nodeSizing = false;
-		this.nodeSizingDirection = "";
-		this.nodeSizingObjectsInfo = {};
-		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;
-
-		// 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;
-		this.notSnappedHeight = 0;
-
-		// Allows us to record the drag behavior or nodes and comments.
-		this.dragging = false;
-		this.dragOffsetX = 0;
-		this.dragOffsetY = 0;
-		this.dragRunningX = 0;
-		this.dragRunningY = 0;
-		this.dragObjects = [];
-		this.dragStartX = 0;
-		this.dragStartY = 0;
-
 		// The data link a node is currently being dragged over. It will be null
 		// when the node being dragged is not over a data link.
 		this.dragOverLink = null;
@@ -165,101 +128,32 @@ 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 attached to a detached link.
-		this.existingNodeAttachableToDetachedLinks = false;
-
-		// Flag to indicate when the space key is down (used when dragging).
-		this.spaceKeyPressed = false;
-
-		// Flag to indicate when a zoom is invoked programmatically.
-		this.zoomingAction = false;
-
-		// Keep track of when the context menu has been closed, so we don't remove
-		// selections when a context menu is closed during a zoom gesture.
-		this.contextMenuClosedOnZoom = false;
-
-		// Keep track of when text editing has been closed, so we don't remove
-		// selections when that happens during a zoom gesture.
-		this.textEditingClosedOnZoom = false;
-
-		// Used to monitor the region selection rectangle.
-		this.regionSelect = false;
-
-		// Used to track the start of the zoom.
-		this.zoomStartPoint = { x: 0, y: 0, k: 0, startX: 0, startY: 0 };
-
-		// I was not able to figure out how to use the zoom filter method to
-		// allow mousedown and mousemove messages to go through to the canvas to
-		// do region selection. Therefore I had to implement region selection in
-		// the zoom methods. This has the side effect that, when a region is
-		// selected, d3Event.transform.x and d3Event.transform.y are incremented
-		// even though the objects in the canvas have not moved. The values below
-		// are used to store the current transform x and y amounts at the beginning
-		// of the region selection and then restore those amounts at the end of
-		// the region selection.
-		this.regionStartTransformX = 0;
-		this.regionStartTransformY = 0;
-
-		// Object to store variables for dynamically drawing a new link line. The
-		// existence of this object means a new link is being drawn. A null means
-		// no link is currently being drawn.
-		this.drawingNewLinkData = null;
-
-		// 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));
-
-		this.draggingLinkData = null;
-
-		// 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 zoom object for use with the canvas.
-		this.zoom =
-			d3.zoom()
-				.trackpad(this.config.enableInteractionType === INTERACTION_TRACKPAD)
-				.preventBackGesture(true)
-				.wheelDelta((d3Event) => -d3Event.deltaY * (this.config.enableInteractionType === INTERACTION_TRACKPAD ? 0.02 : 0.002))
-				.scaleExtent([this.minScaleExtent, this.maxScaleExtent])
-				.on("start", this.zoomStart.bind(this))
-				.on("zoom", this.zoomAction.bind(this))
-				.on("end", this.zoomEnd.bind(this));
-
 		this.initializeGhostDiv();
 
 		this.canvasSVG = this.createCanvasSVG();
 		this.canvasDefs = this.canvasSVG.selectChildren("defs");
-		this.canvasGrp = this.createCanvasGroup(this.canvasSVG, "d3-canvas-group"); // Group to contain all canvas objects
-		this.canvasUnderlay = this.createCanvasUnderlay(this.canvasGrp, "d3-canvas-underlay"); // Put underlay rectangle under comments, nodes and links
-		this.commentsGrp = this.createCanvasGroup(this.canvasGrp, "d3-comments-group"); // Group to always position comments under nodes and links
-		this.nodesLinksGrp = this.createCanvasGroup(this.canvasGrp, "d3-nodes-links-group"); // Group to position nodes and links over comments
-		this.boundingRectsGrp = this.createBoundingRectanglesGrp(this.canvasGrp, "d3-bounding-rect-group"); // Group to optionally add bounding rectangles over all objects
 
+		// Group to contain all canvas objects
+		this.canvasGrp = this.createCanvasGroup(this.canvasSVG, "d3-canvas-group");
+
+		// Put underlay rectangle under comments, nodes and links
+		this.canvasUnderlay = this.createCanvasUnderlay(this.canvasGrp, "d3-canvas-underlay");
+
+		// Group to always position comments under nodes and links
+		this.commentsGrp = this.createCanvasGroup(this.canvasGrp, "d3-comments-group");
+
+		// Group to position nodes and links over comments
+		this.nodesLinksGrp = this.createCanvasGroup(this.canvasGrp, "d3-nodes-links-group");
+
+		// Group to optionally add bounding rectangles over all objects
+		this.boundingRectsGrp = this.createBoundingRectanglesGrp(this.canvasGrp, "d3-bounding-rect-group");
 
 		this.resetCanvasSVGBehaviors();
 
 		this.displayCanvas();
 
 		if (this.dispUtils.isDisplayingFullPage()) {
-			this.restoreZoom();
-		}
-
-		// If we are showing a sub-flow in full screen mode, or the options is
-		// switched on to always display it, show the 'back to parent' control.
-		if (this.dispUtils.isDisplayingSubFlowFullPage() ||
-				this.canvasLayout.alwaysDisplayBackToParentFlow) {
-			this.addBackToParentFlowArrow(this.canvasSVG);
+			this.zoomUtils.restoreZoom();
 		}
 
 		// If we are showing a sub-flow in full screen mode and there
@@ -280,30 +174,62 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("constructor" + pipelineId.substring(0, 5));
 	}
 
+	// Sets the pressed state of the space bar. This is called
+	// from outside canvas via svg-canvas-d3.
 	setSpaceKeyPressed(state) {
-		this.spaceKeyPressed = state;
+		this.zoomUtils.setSpaceKeyPressed(state);
 		this.resetCanvasCursor();
 	}
 
 	// Returns true if the space bar is pressed and held down. This is called
-	// from outside canvas via svg-canvas-d3 as well as internally.
+	// from outside canvas via svg-canvas-d3.
 	isSpaceKeyPressed() {
-		return this.spaceKeyPressed;
+		return this.zoomUtils.isSpaceKeyPressed();
 	}
 
-	// Returns true if the event indicates that a drag is in action. This means
-	// with regular Mouse interation that the space bar is pressed or with
-	// legacy interation it means the shift key is NOT pressed.
-	isDragActivated(d3Event) {
-		if (this.config.enableInteractionType === INTERACTION_CARBON) {
-			return this.isSpaceKeyPressed();
-		}
-		return (d3Event && d3Event.sourceEvent && !d3Event.sourceEvent.shiftKey);
+	zoomTo(zoomObject) {
+		this.zoomUtils.zoomTo(zoomObject);
+	}
+
+	translateBy(x, y, animateTime) {
+		this.zoomUtils.translateBy(x, y, animateTime);
+	}
+
+	zoomIn() {
+		this.zoomUtils.zoomIn();
+	}
+
+	zoomOut() {
+		this.zoomUtils.zoomOut();
+	}
+
+	zoomToFit() {
+		this.zoomUtils.zoomToFit();
+	}
+
+	isZoomedToMax() {
+		return this.zoomUtils.isZoomedToMax();
+	}
+
+	isZoomedToMin() {
+		return this.zoomUtils.isZoomedToMin();
+	}
+
+	getZoomToReveal(objectIDs, xPos, yPos) {
+		return this.zoomUtils.getZoomToReveal(objectIDs, xPos, yPos);
+	}
+
+	getZoom() {
+		return this.zoomUtils.getZoom();
+	}
+
+	getTransformedViewportDimensions() {
+		return this.zoomUtils.getTransformedViewportDimensions();
 	}
 
 	// 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.
+	// looking through the overall canvas info object.
 	// Don't be tempted into thinking you can retrieve the supernode datum by
 	// calling the parent renderer because there is no parent renderer when we
 	// are showing a sub-flow in full page mode.
@@ -321,15 +247,8 @@ export default class SVGCanvasRenderer {
 		return node;
 	}
 
-	getZoomTransform() {
-		return this.zoomTransform;
-	}
-
-	initializeZoomVariables() {
-		// Allows us to record the current zoom amounts.
-		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
-	}
-
+	// Provides new canvas info data to this renderer and other display and layout info
+	// so the canvas can be redisplayed.
 	setCanvasInfoRenderer(canvasInfo, selectionInfo, breadcrumbs, nodeLayout, canvasLayout, config) {
 		this.logger.logStartTimer("setCanvasInfoRenderer" + this.pipelineId.substring(0, 5));
 		this.config = config;
@@ -422,7 +341,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	clearCanvas() {
-		this.initializeZoomVariables();
+		this.zoomUtils.resetZoomTransform();
 		this.canvasSVG.remove();
 	}
 
@@ -468,25 +387,27 @@ export default class SVGCanvasRenderer {
 			this.displaySVGToFitSupernode();
 		}
 
-		// The supernode will not have any calculated port positions when the
-		// subflow is being displayed full screen, so calculate them first.
-		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
-			this.displayPortsForSubFlowFullPage();
-		}
-
 		this.displayCanvasAccoutrements();
 
 		this.logger.logEndTimer("displayCanvas");
 	}
 
+	// Displays zoom and size dependent canvas elements.
 	displayCanvasAccoutrements() {
 		if (this.config.enableBoundingRectangles) {
 			this.displayBoundingRectangles();
 		}
 
-		if (this.config.enableCanvasUnderlay !== "None" && this.dispUtils.isDisplayingPrimaryFlowFullPage()) {
+		if (this.config.enableCanvasUnderlay !== "None" &&
+				this.dispUtils.isDisplayingPrimaryFlowFullPage()) {
 			this.setCanvasUnderlaySize();
 		}
+
+		// The supernode will not have any calculated port positions when the
+		// subflow is being displayed full screen, so calculate them first.
+		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
+			this.displayPortsForSubFlowFullPage();
+		}
 	}
 
 	// Ensures the binding ports for a full-page sub-flow are calculated
@@ -544,7 +465,7 @@ export default class SVGCanvasRenderer {
 	// Moves the binding nodes in a sub-flow, which map to nodes in the parent
 	// supernode, to the edge of the SVG area.
 	moveSuperBindingNodes() {
-		const transformedSVGRect = this.getTransformedViewportDimensions();
+		const transformedSVGRect = this.zoomUtils.getTransformedViewportDimensions();
 
 		// this.logger.log("transformedSVGRect" +
 		// 	" x = " + transformedSVGRect.x +
@@ -611,10 +532,10 @@ export default class SVGCanvasRenderer {
 		if (!this.activePipeline) {
 			return;
 		}
-		const svgRect = this.getViewportDimensions();
-		const transformedSVGRect = this.getTransformedRect(svgRect, 1);
-		const canv = this.getCanvasDimensionsAdjustedForScale(1);
-		const canvWithPadding = this.getCanvasDimensionsAdjustedForScale(1, this.getZoomToFitPadding());
+		const svgRect = this.zoomUtils.getViewportDimensions();
+		const transformedSVGRect = this.zoomUtils.getTransformedRect(svgRect, 1);
+		const canv = this.zoomUtils.getCanvasDimensions();
+		const canvWithPadding = this.zoomUtils.getCanvasDimensionsWithPadding();
 
 		this.boundingRectsGrp.selectChildren(".d3-bounding").remove();
 
@@ -668,6 +589,16 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Selects any objects in the region provided where region is { x, y, width, height }
+	selectObjsInRegion(region) {
+		const selections =
+			CanvasUtils.selectInRegion(region, this.activePipeline,
+				this.config.enableLinkSelection !== LINK_SELECTION_NONE,
+				this.config.enableLinkType,
+				this.config.enableAssocLinkType);
+		this.canvasController.setSelections(selections, this.activePipeline.id);
+	}
+
 	// Returns true when we are editing text. Called by svg-canvas-d3.
 	isEditingText() {
 		if (this.svgCanvasTextArea.isEditingText()) {
@@ -684,20 +615,17 @@ export default class SVGCanvasRenderer {
 
 	// Returns true when we are dragging objects. Called by svg-canvas-d3.
 	isDragging() {
-		return this.dragging;
+		return this.dragObjectUtils.isMoving() || this.dragNewLinkUtils.isDragging() || this.dragDetLinkUtils.isDragging();
 	}
 
-	// Returns true if the node should be resizeable. Expanded supernodes are
-	// always resizabele and all other nodes, except collapsed supernodes, are
-	// resizeable when enableResizableNodes is switched on.
-	isNodeResizable(node) {
-		if (!this.config.enableEditingActions ||
-				CanvasUtils.isSuperBindingNode(node) ||
-				CanvasUtils.isCollapsedSupernode(node) ||
-				(!this.config.enableResizableNodes && !CanvasUtils.isExpandedSupernode(node))) {
-			return false;
-		}
-		return true;
+	// Returns true whenever a node or comment is being resized.
+	isSizing() {
+		this.dragObjectUtils.isSizing();
+	}
+
+	// Returns true whenever a node or comment is being moved.
+	isMoving() {
+		this.dragObjectUtils.isMoving();
 	}
 
 	// Returns true if the node should have a resizing area. We should display
@@ -784,22 +712,11 @@ export default class SVGCanvasRenderer {
 		return transPos;
 	}
 
-	// Returns the object passed in with its position and size snapped to
-	// the current grid dimensions.
-	snapToGridObject(inResizeObj) {
-		const resizeObj = inResizeObj;
-		resizeObj.x_pos = CanvasUtils.snapToGrid(resizeObj.x_pos, this.canvasLayout.snapToGridXPx);
-		resizeObj.y_pos = CanvasUtils.snapToGrid(resizeObj.y_pos, this.canvasLayout.snapToGridYPx);
-		resizeObj.width = CanvasUtils.snapToGrid(resizeObj.width, this.canvasLayout.snapToGridXPx);
-		resizeObj.height = CanvasUtils.snapToGrid(resizeObj.height, this.canvasLayout.snapToGridYPx);
-		return resizeObj;
-	}
-
 	// Returns the current mouse position transformed by the current zoom
 	// transformation amounts based on the local SVG -- that is, if we're
 	// displaying a sub-flow it is based on the SVG in the supernode.
 	getTransformedMousePos(d3Event) {
-		return this.transformPos(this.getMousePos(d3Event, this.canvasSVG));
+		return this.zoomUtils.transformPos(this.getMousePos(d3Event, this.canvasSVG));
 	}
 
 	// Returns the current mouse position based on the D3 SVG selection object
@@ -818,45 +735,19 @@ export default class SVGCanvasRenderer {
 		return { x: 0, y: 0 };
 	}
 
+	// Returns the page position passed in snapped to the grid in canvas
+	// coordinates. Called externally via svg-canvas-d3.
+	convertPageCoordsToSnappedCanvasCoords(pos) {
+		let positon = this.convertPageCoordsToCanvasCoords(pos.x, pos.y);
+		positon = this.getMousePosSnapToGrid(positon);
+		return positon;
+	}
+
 	// Convert coordinates from the page (based on the page top left corner) to
 	// canvas coordinates based on the canvas coordinate system.
 	convertPageCoordsToCanvasCoords(x, y) {
 		const svgRect = this.canvasSVG.node().getBoundingClientRect();
-		return this.transformPos({ x: x - Math.round(svgRect.left), y: y - Math.round(svgRect.top) });
-	}
-
-	// Transforms the x and y fields passed in by the current zoom
-	// transformation amounts to convert a coordinate position in screen pixels
-	// to a canvas coordinate position.
-	transformPos(pos) {
-		return {
-			x: (pos.x - this.zoomTransform.x) / this.zoomTransform.k,
-			y: (pos.y - this.zoomTransform.y) / this.zoomTransform.k
-		};
-	}
-
-	// Transforms the x and y fields passed in by the current zoom
-	// transformation amounts to convert a canvas coordinate position
-	// to a coordinate position in screen pixels.
-	unTransformPos(pos) {
-		return {
-			x: (pos.x * this.zoomTransform.k) + this.zoomTransform.x,
-			y: (pos.y * this.zoomTransform.k) + this.zoomTransform.y
-		};
-	}
-
-	// Transforms the x, y, height and width fields of the object passed in by the
-	// current zoom transformation amounts to convert coordinate positions and
-	// dimensions in screen pixels to coordinate positions and dimensions in
-	// zoomed pixels.
-	getTransformedRect(svgRect, pad) {
-		const transPad = (pad / this.zoomTransform.k);
-		return {
-			x: (-this.zoomTransform.x / this.zoomTransform.k) + transPad,
-			y: (-this.zoomTransform.y / this.zoomTransform.k) + transPad,
-			height: (svgRect.height / this.zoomTransform.k) - (2 * transPad),
-			width: (svgRect.width / this.zoomTransform.k) - (2 * transPad)
-		};
+		return this.zoomUtils.transformPos({ x: x - Math.round(svgRect.left), y: y - Math.round(svgRect.top) });
 	}
 
 	// Creates the div which contains the ghost node for drag and
@@ -893,6 +784,7 @@ export default class SVGCanvasRenderer {
 	getGhostNode(node) {
 		const that = this;
 		const ghostDivSel = this.getGhostDivSel();
+		const zoomScale = this.zoomUtils.getZoomScale();
 
 		// Calculate the ghost area width which is the maximum of either the node
 		// label or the default node width.
@@ -908,8 +800,8 @@ export default class SVGCanvasRenderer {
 		// Create a new SVG area for the ghost area.
 		const ghostAreaSVG = ghostDivSel
 			.append("svg")
-			.attr("width", ghostAreaWidth * this.zoomTransform.k)
-			.attr("height", (50 + node.height) * this.zoomTransform.k) // Add some extra pixels, in case label is below label bottom
+			.attr("width", ghostAreaWidth * zoomScale)
+			.attr("height", (50 + node.height) * zoomScale) // Add some extra pixels, in case label is below label bottom
 			.attr("x", 0)
 			.attr("y", 0)
 			.attr("class", "d3-ghost-svg");
@@ -971,7 +863,7 @@ export default class SVGCanvasRenderer {
 
 			// Next calculate the amount, if any, the label protrudes beyond the edge
 			// of the node width and move the ghost group by that amount.
-			xOffset = Math.max(0, (labelDisplayLength - node.width) / 2) * this.zoomTransform.k;
+			xOffset = Math.max(0, (labelDisplayLength - node.width) / 2) * zoomScale;
 
 			// If the label is center justified, restrict the label width to the
 			// display amount and adjust the x coordinate to compensate for the change
@@ -986,7 +878,7 @@ export default class SVGCanvasRenderer {
 			}
 		}
 
-		ghostGrp.attr("transform", `translate(${xOffset}, 0) scale(${this.zoomTransform.k})`);
+		ghostGrp.attr("transform", `translate(${xOffset}, 0) scale(${zoomScale})`);
 
 		// Get the amount the actual browser page is 'zoomed'. This is differet
 		// to the zoom amount for the canvas objects.
@@ -994,8 +886,8 @@ export default class SVGCanvasRenderer {
 
 		// Calculate the center of the node area for positioning the mouse pointer
 		// on the image when it is being dragged.
-		const centerX = (xOffset + ((node.width / 2) * this.zoomTransform.k)) * browserZoom;
-		const centerY = ((node.height / 2) * this.zoomTransform.k) * browserZoom;
+		const centerX = (xOffset + ((node.width / 2) * zoomScale)) * browserZoom;
+		const centerY = ((node.height / 2) * zoomScale) * browserZoom;
 
 		return {
 			element: ghostDivSel.node(),
@@ -1141,62 +1033,33 @@ export default class SVGCanvasRenderer {
 			.attr("data-drag-node-over", state ? true : null); // true will add the attr, null will remove it
 	}
 
-	// Switches on or off node port highlighting depending on the node
+	// Switches on or off node highlighting depending on the node
 	// passed in and keeps track of the currently highlighted node. This is
-	// called as a new link is being drawn towards a target node to highlight
-	// the target node.
-	setNewLinkOverNode(d3Event) {
-		const nodeNearMouse = this.getNodeNearMousePos(d3Event, this.canvasLayout.nodeProximity);
-		if (nodeNearMouse && this.isConnectionAllowedToNearbyNode(d3Event, nodeNearMouse)) {
+	// called as a new link or a detached link is being dragged towards or
+	// away from a target node to highlight or unhighlight the target node.
+	setHighlightingOverNode(state, nodeNearMouse) {
+		if (state) {
 			if (!this.dragNewLinkOverNode) {
 				this.dragNewLinkOverNode = nodeNearMouse;
-				this.setNewLinkOverNodeHighlighting(this.dragNewLinkOverNode, true);
+				this.setLinkOverNode(this.dragNewLinkOverNode, true);
 
 			} else if (nodeNearMouse.id !== this.dragNewLinkOverNode.id) {
-				this.setNewLinkOverNodeHighlighting(this.dragNewLinkOverNode, false);
+				this.setLinkOverNode(this.dragNewLinkOverNode, false);
 				this.dragNewLinkOverNode = nodeNearMouse;
-				this.setNewLinkOverNodeHighlighting(this.dragNewLinkOverNode, true);
+				this.setLinkOverNode(this.dragNewLinkOverNode, true);
 			}
 
 		} else {
 			if (this.dragNewLinkOverNode) {
-				this.setNewLinkOverNodeHighlighting(this.dragNewLinkOverNode, false);
+				this.setLinkOverNode(this.dragNewLinkOverNode, false);
 				this.dragNewLinkOverNode = null;
 			}
 		}
 	}
 
-	isConnectionAllowedToNearbyNode(d3Event, nodeNearMouse) {
-		if (this.drawingNewLinkData) {
-			if (this.drawingNewLinkData.action === NODE_LINK) {
-				const srcNode = this.drawingNewLinkData.srcNode;
-				const trgNode = nodeNearMouse;
-				const srcNodePortId = this.drawingNewLinkData.srcNodePortId;
-				const trgNodePortId = CanvasUtils.getDefaultInputPortId(trgNode); // TODO - make specific to nodes.
-				return CanvasUtils.isDataConnectionAllowed(srcNodePortId, trgNodePortId, srcNode, trgNode, this.activePipeline.links);
-
-			} else if (this.drawingNewLinkData.action === ASSOCIATION_LINK) {
-				const srcNode = this.drawingNewLinkData.srcNode;
-				const trgNode = nodeNearMouse;
-				return CanvasUtils.isAssocConnectionAllowed(srcNode, trgNode, this.activePipeline.links);
-
-			} else if (this.drawingNewLinkData.action === COMMENT_LINK) {
-				const srcObjId = this.drawingNewLinkData.srcObjId;
-				const trgNodeId = nodeNearMouse.id;
-				return CanvasUtils.isCommentLinkConnectionAllowed(srcObjId, trgNodeId, this.activePipeline.links);
-			}
-		} else if (this.draggingLinkData) {
-			const newLink = this.getNewLinkOnDrag(d3Event, this.canvasLayout.nodeProximity);
-			if (newLink) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	// Switches on or off the input-port highlighting on the node passed in.
-	// This is called when the user drags a new link towards a target node.
-	setNewLinkOverNodeHighlighting(node, state) {
+	// Switches on or off the highlighting on the node passed in.
+	// This is called when the user drags a link towards a target node.
+	setLinkOverNode(node, state) {
 		if (node) {
 			this.getNodeGroupSelectionById(node.id)
 				.attr("data-new-link-over", state ? "yes" : "no");
@@ -1205,8 +1068,8 @@ export default class SVGCanvasRenderer {
 
 	// Removes the data-new-link-over attribute used for highlighting a node
 	// that a new link is being dragged towards or over.
-	setNewLinkOverNodeCancel() {
-		this.setNewLinkOverNodeHighlighting(this.dragNewLinkOverNode, false);
+	setLinkOverNodeCancel() {
+		this.setLinkOverNode(this.dragNewLinkOverNode, false);
 		this.dragNewLinkOverNode = null;
 	}
 
@@ -1275,25 +1138,6 @@ export default class SVGCanvasRenderer {
 			!this.isPortMaxCardinalityZero(nodeTemplate.outputs[0]);
 	}
 
-	// Returns true if the current drag objects array has a single node which
-	// is 'insertable' into a data link between nodes on the canvas.  Returns
-	// false otherwise, including if a single comment is being dragged.
-	isExistingNodeInsertableIntoLink() {
-		return (this.config.enableInsertNodeDroppedOnLink &&
-			this.dragObjects.length === 1 &&
-			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
-	// is 'attachable' to any detached link on the canvas. Returns false otherwise,
-	// including if a single comment is being dragged.
-	isExistingNodeAttachableToDetachedLinks() {
-		return (this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE &&
-			this.dragObjects.length === 1 &&
-			CanvasUtils.isNode(this.dragObjects[0]));
-	}
 
 	// Returns true if the current node template being dragged from the palette
 	// is 'attachable' to any detached link on the canvas. Returns false otherwise.
@@ -1328,7 +1172,6 @@ export default class SVGCanvasRenderer {
 		});
 
 		if (attachableLinks.length > 0) {
-
 			// Make sure the attachable links can be attached to the node based on
 			// the availability of ports and whether they are maxed out or not.
 			const linkArrays =
@@ -1354,15 +1197,15 @@ export default class SVGCanvasRenderer {
 	// means the factors will multiply as they percolate up to the top flow.
 	setMaxZoomExtent(factor) {
 		if (this.dispUtils.isDisplayingFullPage()) {
-			const newMaxExtent = this.maxScaleExtent * factor;
-
-			this.zoom.scaleExtent([this.minScaleExtent, newMaxExtent]);
+			this.zoomUtils.setMaxZoomExtent(factor);
 		} else {
-			const newFactor = Number(factor) * 1 / this.zoomTransform.k;
+			const newFactor = Number(factor) * 1 / this.zoomUtils.getZoomScale();
 			this.supernodeInfo.renderer.setMaxZoomExtent(newFactor);
 		}
 	}
 
+	// Returns a new canvas SVG object with all the behavior expected of a great
+	// SVG canvas object.
 	createCanvasSVG() {
 		this.logger.log("Create Canvas SVG.");
 
@@ -1393,14 +1236,14 @@ export default class SVGCanvasRenderer {
 			.attr("x", dims.x)
 			.attr("y", dims.y)
 			.on("mouseenter", (d3Event, d) => {
-				// If we are a sub-flow (i.e we have a parent renderer) set the max
+				// If we are a sub-flow (i.e. we have a parent renderer) set the max
 				// zoom extent with a factor calculated from our zoom amount.
 				if (this.supernodeInfo.renderer && this.config.enableZoomIntoSubFlows) {
-					this.supernodeInfo.renderer.setMaxZoomExtent(1 / this.zoomTransform.k);
+					this.supernodeInfo.renderer.setMaxZoomExtent(1 / this.zoomUtils.getZoomScale());
 				}
 			})
 			.on("mouseleave", (d3Event, d) => {
-				// If we are a sub-flow (i.e we have a parent renderer) set the max
+				// If we are a sub-flow (i.e. we have a parent renderer) set the max
 				// zoom extent with a factor of 1.
 				if (this.supernodeInfo.renderer && this.config.enableZoomIntoSubFlows) {
 					this.supernodeInfo.renderer.setMaxZoomExtent(1);
@@ -1458,21 +1301,12 @@ export default class SVGCanvasRenderer {
 		if (!this.activePipeline.isEmptyOrBindingsOnly() &&
 				this.dispUtils.isDisplayingFullPage()) {
 			this.canvasSVG
-				.call(this.zoom);
+				.call(this.zoomUtils.getZoomHandler());
 		}
 
 		// These behaviors will be applied to SVG areas at the top level and
 		// SVG areas displaying an in-place subflow
 		this.canvasSVG
-			.on("mousemove.zoom", (d3Event) => {
-				// this.logger.log("Zoom - mousemove - drawingNewLink = " + this.drawingNewLinkData ? "yes" : "no");
-				if (this.drawingNewLinkData) {
-					this.drawNewLink(d3Event);
-				}
-				if (this.draggingLinkData) {
-					this.dragLinkHandle(d3Event);
-				}
-			})
 			// Don't use mousedown.zoom here as it will replace the zoom start behavior
 			// and prevent panning of canvas background.
 			.on("mousedown", (d3Event) => {
@@ -1485,16 +1319,8 @@ export default class SVGCanvasRenderer {
 					d3Event.stopPropagation();
 				}
 			})
-			.on("mouseup.zoom", (d3Event) => {
-				this.logger.log("Canvas - mouseup-zoom");
-				if (this.drawingNewLinkData) {
-					this.completeNewLink(d3Event);
-				}
-				if (this.draggingLinkData) {
-					this.completeDraggedLink(d3Event);
-				}
-			})
 			.on("click.zoom", (d3Event) => {
+				// Control comes here after the zoomClick action has been perfoemd in zoomUtils.
 				this.logger.log("Canvas - click-zoom");
 
 				this.canvasController.clickActionHandler({
@@ -1519,7 +1345,7 @@ export default class SVGCanvasRenderer {
 	// Resets the pointer cursor on the background rectangle in the Canvas SVG area.
 	resetCanvasCursor() {
 		const selector = ".d3-svg-background[data-pipeline-id='" + this.activePipeline.id + "']";
-		this.canvasSVG.select(selector).style("cursor", this.isDragActivated() && this.dispUtils.isDisplayingFullPage() ? "grab" : "default");
+		this.canvasSVG.select(selector).style("cursor", this.zoomUtils.isDragActivated() && this.dispUtils.isDisplayingFullPage() ? "grab" : "default");
 	}
 
 	createCanvasGroup(canvasObj, className) {
@@ -1541,7 +1367,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	setCanvasUnderlaySize(x = 0, y = 0) {
-		const canv = this.getCanvasDimensionsAdjustedForScale(1, this.getZoomToFitPadding());
+		const canv = this.zoomUtils.getCanvasDimensionsWithPadding();
 		if (canv) {
 			this.canvasUnderlay
 				.attr("x", canv.left - 50)
@@ -1551,50 +1377,6 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
-	addBackToParentFlowArrow(canvasSVG) {
-		const g = canvasSVG
-			.append("g")
-			.attr("transform", "translate(15, 15)")
-			.on("mouseenter", function(d3Event, d) { // Use function keyword so 'this' pointer references the DOM text object
-				d3.select(this).select("rect")
-					.attr("data-pointer-hover", "yes");
-			})
-			.on("mouseleave", function(d3Event, d) { // Use function keyword so 'this' pointer references the DOM text object
-				d3.select(this).select("rect")
-					.attr("data-pointer-hover", "no");
-			})
-			.on("mousedown mouseup", (d3Event) => {
-				// Prevent mouse events going through to the canvas. This prevents
-				// a drag gesture on the button activating the canvas drag action.
-				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-			})
-			.on("click", (d3Event) => {
-				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-				this.canvasController.displayPreviousPipeline();
-			});
-
-		g.append("rect")
-			.attr("x", 0)
-			.attr("y", 0)
-			.attr("width", 210)
-			.attr("height", 40)
-			.attr("class", "d3-back-to-previous-flow-box");
-
-		g.append("svg")
-			.attr("x", 16)
-			.attr("y", 11)
-			.attr("width", 16)
-			.attr("height", 16)
-			.html(LEFT_ARROW_ICON)
-			.attr("class", "d3-back-to-previous-flow-text");
-
-		g.append("text")
-			.attr("x", 40)
-			.attr("y", 24)
-			.attr("class", "d3-back-to-previous-flow-text")
-			.text("Return to previous flow");
-	}
-
 	createDropShadow(defs) {
 		var dropShadowFilter = defs.append("filter")
 			.attr("id", this.getId("node_drop_shadow"))
@@ -1643,6 +1425,7 @@ export default class SVGCanvasRenderer {
 			});
 		}
 	}
+
 	setNodeLabelEditingMode(nodeId, pipelineId) {
 		if (this.pipelineId === pipelineId) {
 			const node = this.activePipeline.getNode(nodeId);
@@ -1694,1066 +1477,133 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
-	// Restores the zoom of the canvas, if it has changed, based on the type
-	// of 'save zoom' specified in the configuration and, if no saved zoom, was
-	// provided pans the canvas area so it is always visible.
-	restoreZoom() {
-		let newZoom = this.canvasController.getSavedZoom(this.pipelineId);
-
-		// If there's no saved zoom, and enablePanIntoViewOnOpen is set, pan so
-		// the canvas area (containing nodes and comments) is visible in the viewport.
-		if (!newZoom && this.config.enablePanIntoViewOnOpen) {
-			const canvWithPadding = this.getCanvasDimensionsAdjustedForScale(1, this.getZoomToFitPadding());
-			if (canvWithPadding) {
-				newZoom = { x: -canvWithPadding.left, y: -canvWithPadding.top, k: 1 };
+	// Repositions the comment toolbar so it is always over the top of the
+	// comment being edited.
+	repositionCommentToolbar() {
+		if (this.config.enableMarkdownInComments &&
+				this.dispUtils.isDisplayingFullPage() &&
+				this.svgCanvasTextArea.isEditingText()) {
+			// If a node label or text decoration is being edited com will be undefined.
+			const com = this.activePipeline.getComment(this.svgCanvasTextArea.getEditingTextId());
+			if (com) {
+				const pos = this.getCommentToolbarPos(com);
+				this.canvasController.moveTextToolbar(pos.x, pos.y);
 			}
 		}
-
-		// If there's no saved zoom and we have some initial pan amounts provided use them.
-		if (!newZoom && this.canvasLayout.initialPanX && this.canvasLayout.initialPanY) {
-			newZoom = { x: this.canvasLayout.initialPanX, y: this.canvasLayout.initialPanY, k: 1 };
-		}
-
-		// If new zoom is different to the current zoom amount, apply it.
-		if (newZoom &&
-				(newZoom.k !== this.zoomTransform.k ||
-					newZoom.x !== this.zoomTransform.x ||
-					newZoom.y !== this.zoomTransform.y)) {
-			this.zoomCanvasInvokeZoomBehavior(newZoom);
-		}
 	}
 
-	// Zooms the canvas to the amount specified in newZoomTransform. Zooming the
-	// canvas in this way will invoke the zoom behavior methods: zoomStart,
-	// zoomAction and zoomEnd. It does not perform a zoom if newZoomTransform
-	// is the same as the current zoom transform.
-	zoomCanvasInvokeZoomBehavior(newZoomTransform, animateTime) {
-		if (isFinite(newZoomTransform.x) &&
-				isFinite(newZoomTransform.y) &&
-				isFinite(newZoomTransform.k) &&
-				this.zoomHasChanged(newZoomTransform)) {
-			this.zoomingAction = true;
-			const zoomTransform = d3.zoomIdentity.translate(newZoomTransform.x, newZoomTransform.y).scale(newZoomTransform.k);
-			if (animateTime) {
-				this.canvasSVG.call(this.zoom).transition()
-					.duration(animateTime)
-					.call(this.zoom.transform, zoomTransform);
-			} else {
-				this.canvasSVG.call(this.zoom.transform, zoomTransform);
-			}
-			this.zoomingAction = false;
-		}
+	// Returns a position object that describes the position in page coordinates
+	// of the comment toolbar so that it is positioned above the comment being edited.
+	getCommentToolbarPos(com) {
+		const pos = this.zoomUtils.unTransformPos({ x: com.x_pos, y: com.y_pos });
+		return {
+			x: pos.x + this.canvasLayout.commentToolbarPosX,
+			y: pos.y + this.canvasLayout.commentToolbarPosY
+		};
 	}
 
-	// Return true if the new zoom transform passed in is different from the
-	// current zoom transform.
-	zoomHasChanged(newZoomTransform) {
-		return newZoomTransform.k !== this.zoomTransform.k ||
-			newZoomTransform.x !== this.zoomTransform.x ||
-			newZoomTransform.y !== this.zoomTransform.y;
-	}
+	// Returns the snap-to-grid position of the object positioned at objPos.x
+	// and objPos.y. The grid that is snapped to is defined by this.snapToGridXPx
+	// and this.snapToGridYPx values which are pixel values.
+	snapToGridPosition(objPos) {
+		const stgPosX = CanvasUtils.snapToGrid(objPos.x, this.canvasLayout.snapToGridXPx);
+		const stgPosY = CanvasUtils.snapToGrid(objPos.y, this.canvasLayout.snapToGridYPx);
 
-	zoomToFit() {
-		const padding = this.getZoomToFitPadding();
-		const canvasDimensions = this.getCanvasDimensionsAdjustedForScale(1, padding);
-		const viewPortDimensions = this.getViewportDimensions();
+		return { x: stgPosX, y: stgPosY };
+	}
 
-		if (canvasDimensions) {
-			const xRatio = viewPortDimensions.width / canvasDimensions.width;
-			const yRatio = viewPortDimensions.height / canvasDimensions.height;
-			const newScale = Math.min(xRatio, yRatio, 1); // Don't let the canvas be scaled more than 1 in either direction
+	// Displays all the nodes on the canvas either by creating new nodes,
+	// updating existing nodes or removing unwanted nodes.
+	displayNodes() {
+		this.logger.logStartTimer("displayNodes " + this.getFlags());
 
-			let x = (viewPortDimensions.width - (canvasDimensions.width * newScale)) / 2;
-			let y = (viewPortDimensions.height - (canvasDimensions.height * newScale)) / 2;
+		// Set the port positions for all ports - these will be needed when displaying
+		// nodes and links. This needs to be done here because a resized supernode
+		// will cause its ports to move and resizing comments causes links to be
+		// redrawn which will need port positions to be set appropriately.
+		this.setPortPositionsAllNodes();
 
-			x -= newScale * canvasDimensions.left;
-			y -= newScale * canvasDimensions.top;
+		const sel = this.getAllNodeGroupsSelection();
+		this.displayNodesSubset(sel, this.activePipeline.nodes);
 
-			this.zoomCanvasInvokeZoomBehavior({ x: x, y: y, k: newScale });
-		}
+		this.logger.logEndTimer("displayNodes " + this.getFlags());
 	}
 
-	// Returns the padding space for the canvas objects to be zoomed which takes
-	// into account any connections that need to be made to/from any sub-flow
-	// binding nodes plus any space needed for the binding nodes ports.
-	getZoomToFitPadding() {
-		let padding = this.canvasLayout.zoomToFitPadding;
+	displayMovedNodes() {
+		this.logger.logStartTimer("displayMovedNodes");
+		const nodeGroupSel = this.getAllNodeGroupsSelection();
+
+		nodeGroupSel
+			.datum((d) => this.activePipeline.getNode(d.id))
+			.attr("transform", (d) => `translate(${d.x_pos}, ${d.y_pos})`);
 
 		if (this.dispUtils.isDisplayingSubFlow()) {
-			// Allocate some space for connecting lines and the binding node ports
-			const newPadding = this.getMaxZoomToFitPaddingForConnections() + (2 * this.canvasLayout.supernodeBindingPortRadius);
-			padding = Math.max(padding, newPadding);
+			nodeGroupSel
+				.each((d, i, nodeGrps) => {
+					if (d.isSupernodeInputBinding) {
+						this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-output-main");
+					}
+					if (d.isSupernodeOutputBinding) {
+						this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-input-main");
+						this.updatePortArrowPath(nodeGrps[i], "d3-node-port-input-arrow");
+					}
+				});
 		}
-		return padding;
+		this.logger.logEndTimer("displayMovedNodes");
 	}
 
-	zoomTo(zoomObject) {
-		const animateTime = 500;
-		this.zoomCanvasInvokeZoomBehavior(zoomObject, animateTime);
-	}
+	displayNodesSelectionStatus(selectionInfo) {
+		this.logger.logStartTimer("displayNodesSelectionStatus");
 
-	getZoom() {
-		return { x: this.zoomTransform.x, y: this.zoomTransform.y, k: this.zoomTransform.k };
-	}
+		this.getAllNodeGroupsSelection()
+			.selectChildren(".d3-node-selection-highlight")
+			.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? "yes" : "no"));
 
-	translateBy(x, y, animateTime) {
-		const z = this.getZoomTransform();
-		const zoomObject = d3.zoomIdentity.translate(z.x + x, z.y + y).scale(z.k);
-		this.zoomCanvasInvokeZoomBehavior(zoomObject, animateTime);
+		this.logger.logEndTimer("displayNodesSelectionStatus");
 	}
 
-	zoomIn() {
-		if (this.zoomTransform.k < this.maxScaleExtent) {
-			const newScale = Math.min(this.zoomTransform.k * 1.1, this.maxScaleExtent);
-			this.canvasSVG.call(this.zoom.scaleTo, newScale);
-		}
-	}
+	displaySingleNode(d) {
+		this.logger.logStartTimer("displaySingleNode " + this.getFlags());
 
-	zoomOut() {
-		if (this.zoomTransform.k > this.minScaleExtent) {
-			const newScale = Math.max(this.zoomTransform.k / 1.1, this.minScaleExtent);
-			this.canvasSVG.call(this.zoom.scaleTo, newScale);
-		}
-	}
+		this.setPortPositionsForNode(d);
 
-	isZoomedToMax() {
-		return this.zoomTransform ? this.zoomTransform.k === this.maxScaleExtent : false;
-	}
+		const selection = this.getNodeGroupSelectionById(d.id);
+		this.displayNodesSubset(selection, [d]);
 
-	isZoomedToMin() {
-		return this.zoomTransform ? this.zoomTransform.k === this.minScaleExtent : false;
+		this.logger.logEndTimer("displaySingleNode " + this.getFlags());
 	}
 
-	getZoomToReveal(objectIDs, xPos, yPos) {
-		const transformedSVGRect = this.getTransformedViewportDimensions();
-		const nodes = this.activePipeline.getNodes(objectIDs);
-		const comments = this.activePipeline.getComments(objectIDs);
-		const links = this.activePipeline.getLinks(objectIDs);
-
-		if (nodes.length > 0 || comments.length > 0 || links.length > 0) {
-			const canvasDimensions = CanvasUtils.getCanvasDimensions(nodes, comments, links, 0, 0, true);
-			const canv = this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, 1, 10);
-			const xPosInt = parseInt(xPos, 10);
-			const yPosInt = typeof yPos === "undefined" ? xPosInt : parseInt(yPos, 10);
-
-			if (canv) {
-				let xOffset;
-				let yOffset;
+	displayNodesSubset(selection, data) {
+		selection
+			.data(data, (d) => d.id)
+			.join(
+				(enter) => this.createNodes(enter),
+				null,
+				(remove) => this.removeNodes(remove)
+			)
+			.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, data));
+	}
 
-				if (!Number.isNaN(xPosInt) && !Number.isNaN(yPosInt)) {
-					xOffset = transformedSVGRect.x + (transformedSVGRect.width * (xPosInt / 100)) - (canv.left + (canv.width / 2));
-					yOffset = transformedSVGRect.y + (transformedSVGRect.height * (yPosInt / 100)) - (canv.top + (canv.height / 2));
+	createNodes(enter) {
+		this.logger.logStartTimer("createNodes");
 
-				} else {
-					if (canv.right > transformedSVGRect.x + transformedSVGRect.width) {
-						xOffset = transformedSVGRect.x + transformedSVGRect.width - canv.right;
-					}
-					if (canv.left < transformedSVGRect.x) {
-						xOffset = transformedSVGRect.x - canv.left;
-					}
-					if (canv.bottom > transformedSVGRect.y + transformedSVGRect.height) {
-						yOffset = transformedSVGRect.y + transformedSVGRect.height - canv.bottom;
-					}
-					if (canv.top < transformedSVGRect.y) {
-						yOffset = transformedSVGRect.y - canv.top;
-					}
-				}
+		const newNodeGroups = enter
+			.append("g")
+			.attr("data-id", (d) => this.getId("node_grp", d.id))
+			.call(this.attachNodeGroupListeners.bind(this));
 
-				if (typeof xOffset !== "undefined" || typeof yOffset !== "undefined") {
-					const x = this.zoomTransform.x + ((xOffset || 0)) * this.zoomTransform.k;
-					const y = this.zoomTransform.y + ((yOffset || 0)) * this.zoomTransform.k;
-					return { x: x || 0, y: y || 0, k: this.zoomTransform.k };
-				}
-			}
-		}
+		this.logger.logEndTimer("createNodes");
 
-		return null;
+		return newNodeGroups;
 	}
 
-	// Returns an object representing the viewport dimensions which have been
-	// transformed for the current zoom amount.
-	getTransformedViewportDimensions() {
-		const svgRect = this.getViewportDimensions();
-		return this.getTransformedRect(svgRect, 0);
-	}
+	updateNodes(joinedNodeGrps, data) {
+		this.logger.logStartTimer("updateNodes");
 
-	// Returns the dimensions of the SVG area. When we are displaying a sub-flow
-	// we can use the supernode's dimensions. If not we are displaying
-	// full-page so we can use getBoundingClientRect() to get the dimensions
-	// (for some reason that method doesn't return correct values with embedded SVG areas).
-	getViewportDimensions() {
-		let viewportDimensions = {};
-
-		if (this.dispUtils.isDisplayingSubFlowInPlace()) {
-			const dims = this.getParentSupernodeSVGDimensions();
-			viewportDimensions.width = dims.width;
-			viewportDimensions.height = dims.height;
-
-		} else {
-			if (this.canvasSVG && this.canvasSVG.node()) {
-				viewportDimensions = this.canvasSVG.node().getBoundingClientRect();
-			} else {
-				viewportDimensions = { x: 0, y: 0, width: 1100, height: 640 }; // Return a sensible default (for Jest tests)
-			}
-		}
-		return viewportDimensions;
-	}
-
-	zoomStart(d3Event) {
-		this.logger.log("zoomStart - " + JSON.stringify(d3Event.transform));
-
-		// Ensure any open tip is closed before starting a zoom operation.
-		this.canvasController.closeTip();
-
-		// Close the context menu, if it's open, before panning or zooming.
-		// If the context menu is opened inside the expanded supernode (in-place
-		// subflow), when the user zooms the canvas, the full page flow is handling
-		// that zoom, which causes a refresh in the subflow, so the full page flow
-		// will take care of closing the context menu. This means the in-place
-		// subflow doesn’t need to do anything on zoom,
-		// hence: !this.dispUtils.isDisplayingSubFlowInPlace()
-		if (this.canvasController.isContextMenuDisplayed() &&
-				!this.dispUtils.isDisplayingSubFlowInPlace()) {
-			this.canvasController.closeContextMenu();
-			this.contextMenuClosedOnZoom = true;
-		}
-
-		// Any text editing in progress will be closed by the textarea's blur event
-		// if the user clicks on the canvas background. So we set this flag to
-		// prevent the selection being lost in the zoomEnd (mouseup) event.
-		if (this.svgCanvasTextArea.isEditingText()) {
-			this.textEditingClosedOnZoom = true;
-		}
-
-		this.regionSelect = this.shouldDoRegionSelect(d3Event);
-
-		if (this.regionSelect) {
-			// Add a delay so, if the user just clicks, they don't see the crosshair.
-			// This will be cleared in zoomEnd if the user's click takes less than 200 ms.
-			this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("crosshair"), 200);
-			this.regionStartTransformX = d3Event.transform.x;
-			this.regionStartTransformY = d3Event.transform.y;
-
-		} else {
-			if (this.isDragActivated(d3Event)) {
-				this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("grabbing"), 200);
-			} else {
-				this.addingCursorOverlay = setTimeout(() => this.addTempCursorOverlay("default"), 200);
-			}
-		}
-
-		const transPos = this.getTransformedMousePos(d3Event);
-		this.zoomStartPoint = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k, startX: transPos.x, startY: transPos.y };
-		this.previousD3Event = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k };
-		// Calculate the canvas dimensions here, so we don't have to recalculate
-		// them for every zoom action event.
-		this.zoomCanvasDimensions = CanvasUtils.getCanvasDimensions(
-			this.activePipeline.nodes, this.activePipeline.comments,
-			this.activePipeline.links, this.canvasLayout.commentHighlightGap);
-	}
-
-	zoomAction(d3Event) {
-		this.logger.log("zoomAction - " + JSON.stringify(d3Event.transform));
-
-		// If the scale amount is the same we are not zooming, so we must be panning.
-		if (d3Event.transform.k === this.zoomStartPoint.k) {
-			if (this.regionSelect) {
-				this.drawRegionSelector(d3Event);
-
-			} else {
-				this.zoomCanvasBackground(d3Event);
-			}
-		} else {
-			this.addTempCursorOverlay("default");
-			this.zoomCanvasBackground(d3Event);
-			this.zoomCommentToolbar();
-		}
-	}
-
-	zoomEnd(d3Event) {
-		this.logger.log("zoomEnd - " + JSON.stringify(d3Event.transform));
-
-		// Clears the display of the cursor overlay if the user clicks within 200 ms
-		clearTimeout(this.addingCursorOverlay);
-
-		const transPos = this.getTransformedMousePos(d3Event);
-
-		if (this.drawingNewLinkData) {
-			this.stopDrawingNewLink();
-
-		} else if (this.draggingLinkData) {
-			this.stopDraggingLink();
-
-		// The user just clicked -- with no drag.
-		} else if (transPos.x === this.zoomStartPoint.startX &&
-							transPos.y === this.zoomStartPoint.startY &&
-							!this.zoomChanged()) {
-			this.zoomClick(d3Event);
-
-		} else if (this.regionSelect) {
-			this.zoomEndRegionSelect(d3Event);
-
-		} else if (this.dispUtils.isDisplayingFullPage() && this.zoomChanged()) {
-			this.zoomSave();
-		}
-
-		// Remove the cursor overlay and reset the SVG background rectangle
-		// cursor style, which was set in the zoom start method.
-		this.resetCanvasCursor(d3Event);
-		this.removeTempCursorOverlay();
-		this.contextMenuClosedOnZoom = false;
-		this.textEditingClosedOnZoom = false;
-		this.regionSelect = false;
-	}
-
-	// Returns true if the region select gesture is requested by the user.
-	shouldDoRegionSelect(d3Event) {
-		// The this.zoomingAction flag indicates zooming is being invoked
-		// programmatically.
-		if (this.zoomingAction) {
-			return false;
-
-		} else if (this.config.enableInteractionType === INTERACTION_MOUSE &&
-				(d3Event && d3Event.sourceEvent && d3Event.sourceEvent.shiftKey)) {
-			return true;
-
-		} else if (this.config.enableInteractionType === INTERACTION_CARBON &&
-							!this.isSpaceKeyPressed(d3Event)) {
-			return true;
-
-		} else if (this.config.enableInteractionType === INTERACTION_TRACKPAD &&
-				(d3Event.sourceEvent && d3Event.sourceEvent.buttons === 1) && // Main button is pressed
-				!this.spaceKeyPressed) {
-			return true;
-		}
-
-		return false;
-	}
-
-	// 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;
-
-		if (this.dispUtils.isDisplayingPrimaryFlowFullPage()) {
-			const incTransform = this.getTransformIncrement(d3Event);
-			this.zoomTransform = this.zoomConstrainRegular(incTransform, this.getViewportDimensions(), this.zoomCanvasDimensions);
-		} else {
-			this.zoomTransform = d3.zoomIdentity.translate(d3Event.transform.x, d3Event.transform.y).scale(d3Event.transform.k);
-		}
-
-		this.canvasGrp.attr("transform", this.zoomTransform);
-
-		if (this.config.enableBoundingRectangles) {
-			this.displayBoundingRectangles();
-		}
-
-		if (this.config.enableCanvasUnderlay !== "None" &&
-				this.dispUtils.isDisplayingPrimaryFlowFullPage()) {
-			this.setCanvasUnderlaySize();
-		}
-
-		// The supernode will not have any calculated port positions when the
-		// subflow is being displayed full screen, so calculate them first.
-		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
-			this.displayPortsForSubFlowFullPage();
-		}
-	}
-
-	// Handles a zoom operation that is just a click on the canvas background.
-	zoomClick(d3Event) {
-		// Only clear selections under these conditions:
-		// * if the click was on the canvas of the current active pipeline. (This
-		//   is because clicking on the canvas background of an expanded supernode
-		//   should select that node.)
-		// * if we have not just closed a context menu
-		// * if we have not just closed text editing
-		// * if editing actions are enabled OR the target is the canvas background.
-		//   (This condition is necessary because when editing actions are disabled,
-		//   for a read-only canvas, the mouse-up over a node can cause this method
-		//   to be called.)
-		if (this.dispUtils.isDisplayingCurrentPipeline() &&
-				!this.contextMenuClosedOnZoom &&
-				!this.textEditingClosedOnZoom &&
-				(this.config.enableEditingActions ||
-				(d3Event.sourceEvent &&
-					d3Event.sourceEvent.target.classList.contains("d3-svg-background")))) {
-			this.canvasController.clearSelections();
-		}
-	}
-
-	// Handles the behavior when the user stops doing a region select.
-	zoomEndRegionSelect(d3Event) {
-		this.removeRegionSelector();
-
-		// Reset the transform x and y to what they were before the region
-		// selection action was started. This directly sets the x and y values
-		// in the __zoom property of the svgCanvas DOM object.
-		d3Event.transform.x = this.regionStartTransformX;
-		d3Event.transform.y = this.regionStartTransformY;
-
-		const { startX, startY, width, height } = this.getRegionDimensions(d3Event);
-
-		const region = { x1: startX, y1: startY, x2: startX + width, y2: startY + height };
-		const selections =
-			CanvasUtils.selectInRegion(region, this.activePipeline,
-				this.config.enableLinkSelection !== LINK_SELECTION_NONE,
-				this.config.enableLinkType,
-				this.config.enableAssocLinkType);
-		this.canvasController.setSelections(selections, this.activePipeline.id);
-	}
-
-	// Save the zoom amount. The canvas controller/object model will decide
-	// how this info is saved.
-	zoomSave() {
-		// 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);
-
-		const data = {
-			editType: "setZoom",
-			editSource: "canvas",
-			zoom: this.zoomTransform,
-			pipelineId: this.activePipeline.id
-		};
-		this.canvasController.editActionHandler(data);
-
-	}
-
-	// Repositions the comment toolbar so it is always over the top of the
-	// comment being edited.
-	zoomCommentToolbar() {
-		if (this.config.enableMarkdownInComments &&
-				this.dispUtils.isDisplayingFullPage() &&
-				this.svgCanvasTextArea.isEditingText()) {
-			// If a node label or text decoration is being edited com will be undefined.
-			const com = this.activePipeline.getComment(this.svgCanvasTextArea.getEditingTextId());
-			if (com) {
-				const pos = this.getCommentToolbarPos(com);
-				this.canvasController.moveTextToolbar(pos.x, pos.y);
-			}
-		}
-	}
-
-	// Returns a position object that describes the position in page coordinates
-	// of the comment toolbar so that it is positioned above the comment being edited.
-	getCommentToolbarPos(com) {
-		const pos = this.unTransformPos({ x: com.x_pos, y: com.y_pos });
-		return {
-			x: pos.x + this.canvasLayout.commentToolbarPosX,
-			y: pos.y + this.canvasLayout.commentToolbarPosY
-		};
-	}
-
-	// Returns a new zoom which is the result of incrementing the current zoom
-	// by the amount since the previous d3Event transform amount.
-	// We calculate increments because d3Event.transform is not based on
-	// the constrained zoom position (which is very annoying) so we keep track
-	// of the current constraind zoom amount in this.zoomTransform.
-	getTransformIncrement(d3Event) {
-		const xInc = d3Event.transform.x - this.previousD3Event.x;
-		const yInc = d3Event.transform.y - this.previousD3Event.y;
-
-		const newTransform = { x: this.zoomTransform.x + xInc, y: this.zoomTransform.y + yInc, k: d3Event.transform.k };
-		this.previousD3Event = { x: d3Event.transform.x, y: d3Event.transform.y, k: d3Event.transform.k };
-		return newTransform;
-	}
-
-	// Returns a modifed transform object so that the canvas area (the area
-	// containing nodes and comments) is constrained such that it never totally
-	// disappears from the view port.
-	zoomConstrainRegular(transform, viewPort, canvasDimensions) {
-		if (!canvasDimensions) {
-			return this.zoomTransform;
-		}
-
-		const k = transform.k;
-		let x = transform.x;
-		let y = transform.y;
-
-		const canv =
-			this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, k, this.getZoomToFitPadding());
-
-		const rightOffsetLimit = viewPort.width - Math.min((viewPort.width * 0.25), (canv.width * 0.25));
-		const leftOffsetLimit = -(Math.max((canv.width - (viewPort.width * 0.25)), (canv.width * 0.75)));
-
-		const bottomOffsetLimit = viewPort.height - Math.min((viewPort.height * 0.25), (canv.height * 0.25));
-		const topOffsetLimit = -(Math.max((canv.height - (viewPort.height * 0.25)), (canv.height * 0.75)));
-
-		if (x > -canv.left + rightOffsetLimit) {
-			x = -canv.left + rightOffsetLimit;
-
-		} else if (x < -canv.left + leftOffsetLimit) {
-			x = -canv.left + leftOffsetLimit;
-		}
-
-		if (y > -canv.top + bottomOffsetLimit) {
-			y = -canv.top + bottomOffsetLimit;
-
-		} else if (y < -canv.top + topOffsetLimit) {
-			y = -canv.top + topOffsetLimit;
-		}
-
-		return d3.zoomIdentity.translate(x, y).scale(k);
-	}
-
-	// Returns the dimensions in SVG coordinates of the canvas area. This is
-	// based on the position and width and height of the nodes and comments. It
-	// does not include the 'super binding nodes' which are the binding nodes in
-	// 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 gap = this.canvasLayout.commentHighlightGap;
-		const canvasDimensions = this.activePipeline.getCanvasDimensions(gap);
-		return this.convertCanvasDimensionsAdjustedForScaleWithPadding(canvasDimensions, k, pad);
-	}
-
-	convertCanvasDimensionsAdjustedForScaleWithPadding(canv, k, pad) {
-		const padding = pad || 0;
-		if (canv) {
-			return {
-				left: (canv.left * k) - padding,
-				top: (canv.top * k) - padding,
-				right: (canv.right * k) + padding,
-				bottom: (canv.bottom * k) + padding,
-				width: (canv.width * k) + (2 * padding),
-				height: (canv.height * k) + (2 * padding)
-			};
-		}
-		return null;
-	}
-
-	drawRegionSelector(d3Event) {
-		this.removeRegionSelector();
-		const { startX, startY, width, height } = this.getRegionDimensions(d3Event);
-
-		this.canvasGrp
-			.append("rect")
-			.attr("width", width)
-			.attr("height", height)
-			.attr("x", startX)
-			.attr("y", startY)
-			.attr("class", "d3-region-selector");
-	}
-
-	removeRegionSelector() {
-		this.canvasGrp.selectAll(".d3-region-selector").remove();
-	}
-
-	// Returns the startX, startY, width and height of the selection region
-	// where startX and startY are always the top left corner of the region
-	// and width and height are therefore always positive.
-	getRegionDimensions(d3Event) {
-		const transPos = this.getTransformedMousePos(d3Event);
-		let startX = this.zoomStartPoint.startX;
-		let startY = this.zoomStartPoint.startY;
-		let width = transPos.x - startX;
-		let height = transPos.y - startY;
-
-		if (width < 0) {
-			width = Math.abs(width);
-			startX -= width;
-		}
-		if (height < 0) {
-			height = Math.abs(height);
-			startY -= height;
-		}
-
-		return { startX, startY, width, height };
-	}
-
-	// Records the initial starting position of the object being sized so
-	// that drag increments can be added to the original starting
-	// position to aid calculating the snap-to-grid position.
-	initializeResizeVariables(resizeObj) {
-		this.resizeObjInitialInfo = {
-			x_pos: resizeObj.x_pos, y_pos: resizeObj.y_pos, width: resizeObj.width, height: resizeObj.height };
-		this.notSnappedXPos = resizeObj.x_pos;
-		this.notSnappedYPos = resizeObj.y_pos;
-		this.notSnappedWidth = resizeObj.width;
-		this.notSnappedHeight = resizeObj.height;
-	}
-
-	// Returns an array of objects to drag. If enableDragWithoutSelect is true,
-	// and the object on which this drag start has initiated is not in the
-	// set of selected objects, then just that object is to be dragged. Otherwise,
-	// the selected objects are the objects to be dragged.
-	getDragObjects(d) {
-		const selectedObjects = this.activePipeline.getSelectedNodesAndComments();
-
-		if (this.config.enableDragWithoutSelect &&
-				selectedObjects.findIndex((o) => o.id === d.id) === -1) {
-			return [d];
-		}
-
-		return selectedObjects;
-	}
-
-	dragStart(d3Event, d) {
-		this.logger.logStartTimer("dragStart");
-
-		this.closeContextMenuIfOpen();
-
-		if (this.config.enableContextToolbar) {
-			this.removeContextToolbar();
-		}
-
-
-		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
-		if (this.commentSizing) {
-			this.initializeResizeVariables(d);
-
-		} else if (this.nodeSizing) {
-			this.initializeResizeVariables(d);
-
-		} else {
-			this.dragObjectsStart(d3Event, d);
-		}
-		this.logger.logEndTimer("dragStart", true);
-	}
-
-	dragMove(d3Event, d) {
-		this.logger.logStartTimer("dragMove");
-		if (this.commentSizing) {
-			this.resizeComment(d3Event, d);
-		} else if (this.nodeSizing) {
-			this.resizeNode(d3Event, d);
-		} else {
-			this.dragObjectsAction(d3Event);
-		}
-
-		this.logger.logEndTimer("dragMove", true);
-	}
-
-	dragEnd(d3Event, d) {
-		this.logger.logStartTimer("dragEnd");
-
-		this.removeTempCursorOverlay();
-
-		if (this.commentSizing) {
-			this.endCommentSizing(d);
-
-		} else if (this.nodeSizing) {
-			this.endNodeSizing(d);
-
-		} else if (this.dragging) {
-			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()) {
-			// Only style the node to be translucent if this action isn't cancelled
-			// by the user releasing the mouse button within 200 ms of pressing it.
-			// This stops the node flashing when the user is only selecting it.
-			this.startNodeInsertingInLink = setTimeout(() => {
-				this.existingNodeInsertableIntoLink = true;
-				this.setNodeTranslucentState(this.dragObjects[0].id, true);
-				this.setDataLinkSelectionAreaWider(true);
-			}, 200);
-		}
-
-		// 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()) {
-			// Only style the node to be translucent if this action isn't cancelled
-			// by the user releasing the mouse button within 200 ms of pressing it.
-			// This stops the node from when the user is only selecting it.
-			this.startNodeAttachingToDetachedLinks = setTimeout(() => {
-				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);
-			}, 200);
-		}
-	}
-
-	// Performs the dragging action for canvas objects (nodes and comments).
-	dragObjectsAction(d3Event) {
-		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.activePipeline.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.displayMovedComments();
-		this.displayMovedNodes();
-		this.displayMovedLinks();
-		this.displayCanvasAccoutrements();
-
-		if (this.dispUtils.isDisplayingSubFlowInPlace()) {
-			this.displaySVGToFitSupernode();
-		}
-
-
-		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);
-			}
-		}
-
-		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;
-
-		// Cancels the styling of insertable/attachable nodes if the user releases
-		// the mouse button with 200 milliseconds of pressing it on the node. This
-		// stops the node flashing when the user just selects the node.
-		clearTimeout(this.startNodeInsertingInLink);
-		clearTimeout(this.startNodeAttachingToDetachedLinks);
-
-		// 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.activePipeline.getSelectedDetachedLinks(),
-						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) {
-		this.logger.logStartTimer("dragStartLinkHandle");
-
-		this.closeContextMenuIfOpen();
-
-		this.draggingLinkHandle = true;
-
-		const handleSelection = d3.select(d3Event.sourceEvent.currentTarget);
-		const link = this.activePipeline.getLink(d.id);
-		const oldLink = cloneDeep(link);
-
-		const linkGrpSelector = this.getLinkGroupSelectionById(d.id);
-
-		this.draggingLinkData = {
-			lineInfo: d,
-			link: link,
-			oldLink: oldLink,
-			linkGrpSelection: d3.select(linkGrpSelector)
-		};
-
-		if (handleSelection.attr("class").includes("d3-link-handle-end")) {
-			this.draggingLinkData.endBeingDragged = "end";
-
-		} else if (handleSelection.attr("class").includes("d3-link-handle-start")) {
-			this.draggingLinkData.endBeingDragged = "start";
-		}
-
-		if (this.config.enableHighlightUnavailableNodes) {
-			if (this.draggingLinkData.endBeingDragged === "end") {
-				const links = this.activePipeline.links.filter((lnk) => lnk.id !== link.id);
-				this.setUnavailableTargetNodesHighlighting(
-					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.activePipeline.getNode(this.draggingLinkData.oldLink.trgNodeId),
-					this.draggingLinkData.link.trgNodePortId,
-					links
-				);
-			}
-		}
-
-		this.dragLinkHandle(d3Event);
-		this.logger.logEndTimer("dragStartLinkHandle", true);
-	}
-
-	dragMoveLinkHandle(d3Event) {
-		this.logger.logStartTimer("dragMoveLinkHandle");
-		this.dragLinkHandle(d3Event);
-		this.logger.logEndTimer("dragMoveLinkHandle", true);
-	}
-
-	dragEndLinkHandle(d3Event) {
-		this.logger.logStartTimer("dragEndLinkHandle");
-		this.completeDraggedLink(d3Event);
-		this.draggingLinkHandle = false;
-		this.logger.logEndTimer("dragEndLinkHandle", true);
-	}
-
-	// Switches on or off the translucent state of the node identified by the
-	// node ID passed in. This is used when an 'insertable' node is dragged on
-	// the canvas. It makes is easier for the user to see the highlighted link
-	// when the node is dragged over it.
-	setNodeTranslucentState(nodeId, state) {
-		this.getNodeGroupSelectionById(nodeId).classed("d3-node-group-translucent", state);
-	}
-
-	// Switched off the translucent state of the objects being dragged (if
-	// there are any).
-	unsetNodeTranslucentState() {
-		if (this.dragObjects && this.dragObjects.length > 0) {
-			this.setNodeTranslucentState(this.dragObjects[0].id, false);
-		}
-	}
-
-	// Returns the snap-to-grid position of the object positioned at
-	// this.dragStartX and this.dragStartY after applying the current offset of
-	// this.dragOffsetX and this.dragOffsetY.
-	snapToGridDraggedNode() {
-		const objPosX = this.dragStartX + this.dragOffsetX;
-		const objPosY = this.dragStartY + this.dragOffsetY;
-
-		return this.snapToGridPosition({ x: objPosX, y: objPosY });
-	}
-
-	// Returns the snap-to-grid position of the object positioned at objPos.x
-	// and objPos.y. The grid that is snapped to is defined by this.snapToGridXPx
-	// and this.snapToGridYPx values which are pixel values.
-	snapToGridPosition(objPos) {
-		const stgPosX = CanvasUtils.snapToGrid(objPos.x, this.canvasLayout.snapToGridXPx);
-		const stgPosY = CanvasUtils.snapToGrid(objPos.y, this.canvasLayout.snapToGridYPx);
-
-		return { x: stgPosX, y: stgPosY };
-	}
-
-	// Displays all the nodes on the canvas either by creating new nodes,
-	// updating existing nodes or removing unwanted nodes.
-	displayNodes() {
-		this.logger.logStartTimer("displayNodes " + this.getFlags());
-
-		// Set the port positions for all ports - these will be needed when displaying
-		// nodes and links. This needs to be done here because a resized supernode
-		// will cause its ports to move and resizing comments causes links to be
-		// redrawn which will need port positions to be set appropriately.
-		this.setPortPositionsAllNodes();
-
-		const sel = this.getAllNodeGroupsSelection();
-		this.displayNodesSubset(sel, this.activePipeline.nodes);
-
-		this.logger.logEndTimer("displayNodes " + this.getFlags());
-	}
-
-	displayMovedNodes() {
-		this.logger.logStartTimer("displayMovedNodes");
-		const nodeGroupSel = this.getAllNodeGroupsSelection();
-
-		nodeGroupSel
-			.datum((d) => this.activePipeline.getNode(d.id))
-			.attr("transform", (d) => `translate(${d.x_pos}, ${d.y_pos})`);
-
-		if (this.dispUtils.isDisplayingSubFlow()) {
-			nodeGroupSel
-				.each((d, i, nodeGrps) => {
-					if (d.isSupernodeInputBinding) {
-						this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-output-main");
-					}
-					if (d.isSupernodeOutputBinding) {
-						this.updatePortRadiusAndPos(nodeGrps[i], d, "d3-node-port-input-main");
-						this.updatePortArrowPath(nodeGrps[i], "d3-node-port-input-arrow");
-					}
-				});
-		}
-		this.logger.logEndTimer("displayMovedNodes");
-	}
-
-	displayNodesSelectionStatus(selectionInfo) {
-		this.logger.logStartTimer("displayNodesSelectionStatus");
-
-		this.getAllNodeGroupsSelection()
-			.selectChildren(".d3-node-selection-highlight")
-			.attr("data-selected", (d) => (this.activePipeline.isSelected(d.id) ? "yes" : "no"));
-
-		this.logger.logEndTimer("displayNodesSelectionStatus");
-	}
-
-	displaySingleNode(d) {
-		this.logger.logStartTimer("displaySingleNode " + this.getFlags());
-
-		this.setPortPositionsForNode(d);
-
-		const selection = this.getNodeGroupSelectionById(d.id);
-		this.displayNodesSubset(selection, [d]);
-
-		this.logger.logEndTimer("displaySingleNode " + this.getFlags());
-	}
-
-	displayNodesSubset(selection, data) {
-		selection
-			.data(data, (d) => d.id)
-			.join(
-				(enter) => this.createNodes(enter),
-				null,
-				(remove) => this.removeNodes(remove)
-			)
-			.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, data));
-	}
-
-	createNodes(enter) {
-		this.logger.logStartTimer("createNodes");
-
-		const newNodeGroups = enter
-			.append("g")
-			.attr("data-id", (d) => this.getId("node_grp", d.id))
-			.call(this.attachNodeGroupListeners.bind(this));
-
-		this.logger.logEndTimer("createNodes");
-
-		return newNodeGroups;
-	}
-
-	updateNodes(joinedNodeGrps, data) {
-		this.logger.logStartTimer("updateNodes");
-
-		const nonBindingNodeGrps = joinedNodeGrps.filter((node) => !CanvasUtils.isSuperBindingNode(node));
+		const nonBindingNodeGrps = joinedNodeGrps.filter((node) => !CanvasUtils.isSuperBindingNode(node));
 
 		// Node Sizing Area
 		nonBindingNodeGrps
@@ -2769,7 +1619,6 @@ export default class SVGCanvasRenderer {
 			.datum((d) => this.activePipeline.getNode(d.id))
 			.attr("d", (d) => this.getNodeShapePathSizing(d));
 
-
 		// Node Selection Highlighting Outline.
 		nonBindingNodeGrps
 			.selectChildren(".d3-node-selection-highlight")
@@ -2810,7 +1659,8 @@ export default class SVGCanvasRenderer {
 						.attr("class", "d3-foreign-object-external-node"),
 				null,
 				(exit) => {
-					exit.each(removeExternalObject.bind(this));
+					exit.each((d, idx, exts) =>
+						this.externalUtils.removeExternalObject(d, idx, exts));
 					exit.remove();
 				}
 			)
@@ -2819,7 +1669,8 @@ export default class SVGCanvasRenderer {
 			.attr("height", (d) => d.height)
 			.attr("x", 0)
 			.attr("y", 0)
-			.each(addNodeExternalObject.bind(this));
+			.each((d, idx, exts) =>
+				this.externalUtils.addNodeExternalObject(d, idx, exts));
 
 		// Node Image
 		nonBindingNodeGrps
@@ -2898,8 +1749,9 @@ export default class SVGCanvasRenderer {
 
 		// Add or remove drag behavior as appropriate
 		if (this.config.enableEditingActions) {
+			const handler = this.dragObjectUtils.getDragObjectHandler();
 			nonBindingNodeGrps
-				.call(this.dragHandler);
+				.call(handler);
 		} else {
 			nonBindingNodeGrps
 				.on(".drag", null);
@@ -2912,7 +1764,8 @@ export default class SVGCanvasRenderer {
 		// Remove any foreign objects for react nodes, if necessary.
 		removeSel
 			.selectChildren(".d3-foreign-object-external-node")
-			.each(removeExternalObject.bind(this));
+			.each((d, idx, exts) =>
+				this.externalUtils.removeExternalObject(d, idx, exts));
 
 		// Remove all nodes in the selection.
 		removeSel.remove();
@@ -3026,6 +1879,13 @@ export default class SVGCanvasRenderer {
 						.attr("transform", this.getPortArrowPathTransform(port));
 				}
 			});
+
+		if (this.config.enableEditingActions) {
+			const handler = this.dragNewLinkUtils.getDragNewLinkHandler();
+			joinedInputPortGrps.call(handler);
+		} else {
+			joinedInputPortGrps.on(".drag", null);
+		}
 	}
 
 	displayOutputPorts(nodeGrp, node) {
@@ -3068,8 +1928,8 @@ export default class SVGCanvasRenderer {
 		return outputPortGroups;
 	}
 
-	updateOutputPorts(joinedOutputPortGroups, node) {
-		joinedOutputPortGroups.selectChildren(".d3-node-port-output-main")
+	updateOutputPorts(joinedOutputPortGrps, node) {
+		joinedOutputPortGrps.selectChildren(".d3-node-port-output-main")
 			.datum((port) => node.outputs.find((o) => port.id === o.id))
 			.each((port, i, outputPorts) => {
 				const obj = d3.select(outputPorts[i]);
@@ -3087,12 +1947,22 @@ export default class SVGCanvasRenderer {
 						.attr("cy", port.cy);
 				}
 			});
+
+		if (this.config.enableEditingActions) {
+			const handler = this.dragNewLinkUtils.getDragNewLinkHandler();
+			joinedOutputPortGrps.call(handler);
+		} else {
+			joinedOutputPortGrps.on(".drag", null);
+		}
 	}
 
 	// Attaches the appropriate listeners to the node groups.
 	attachNodeGroupListeners(nodeGrps) {
 		nodeGrps
 			.on("mouseenter", (d3Event, d) => {
+				if (this.isDragging()) {
+					return;
+				}
 				const nodeGrp = d3.select(d3Event.currentTarget);
 				this.raiseNodeToTop(nodeGrp);
 				this.setNodeStyles(d, "hover", nodeGrp);
@@ -3125,7 +1995,7 @@ export default class SVGCanvasRenderer {
 			// Use mouse down instead of click because it gets called before drag start.
 			.on("mousedown", (d3Event, d) => {
 				this.logger.logStartTimer("Node Group - mouse down");
-				d3Event.stopPropagation(); // Stop event going to canvas when enableEditingActions is false
+				d3Event.stopPropagation();
 				if (this.svgCanvasTextArea.isEditingText()) {
 					this.svgCanvasTextArea.completeEditing();
 				}
@@ -3139,16 +2009,6 @@ export default class SVGCanvasRenderer {
 				// Don't stop propogation. Mouse move messages must be allowed to
 				// propagate to canvas zoom operation.
 			})
-			.on("mouseup", (d3Event, d) => {
-				this.logger.log("Node Group - mouse up");
-				d3Event.stopPropagation();
-				if (this.drawingNewLinkData) {
-					this.completeNewLink(d3Event);
-				}
-				if (this.draggingLinkData) {
-					this.completeDraggedLink(d3Event, d);
-				}
-			})
 			.on("click", (d3Event, d) => {
 				this.logger.log("Node Group - click");
 				d3Event.stopPropagation();
@@ -3181,11 +2041,7 @@ export default class SVGCanvasRenderer {
 	attachNodeSizingListeners(nodeGrps) {
 		nodeGrps
 			.on("mousedown", (d3Event, d) => {
-				if (this.isNodeResizable(d)) {
-					this.nodeSizing = true;
-					// Note - node resizing and finalization of size is handled by drag functions.
-					this.addTempCursorOverlay(this.nodeSizingCursor);
-				}
+				this.dragObjectUtils.mouseDownNodeSizingArea(d);
 			})
 			// Use mousemove as well as mouseenter so the cursor will change
 			// if the pointer moves from one area of the node outline to another
@@ -3194,19 +2050,10 @@ export default class SVGCanvasRenderer {
 			// pointer leaves the temporary overlay (which is removed) and enters
 			// the node outline.
 			.on("mousemove mouseenter", (d3Event, d) => {
-				if (this.isNodeResizable(d) &&
-						!this.isRegionSelectOrSizingInProgress()) { // Don't switch sizing direction if we are already sizing
-					let cursorType = "default";
-					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
-						this.nodeSizingDirection = this.getSizingDirection(d3Event, d, d.layout.nodeCornerResizeArea);
-						this.nodeSizingCursor = this.getCursorBasedOnDirection(this.nodeSizingDirection);
-						cursorType = this.nodeSizingCursor;
-					}
-					d3.select(d3Event.currentTarget).style("cursor", cursorType);
-				}
+				this.dragObjectUtils.mouseEnterNodeSizingArea(d3Event, d);
 			})
 			.on("mouseleave", (d3Event, d) => {
-				d3.select(d3Event.currentTarget).style("cursor", "default");
+				this.dragObjectUtils.mouseLeaveNodeSizingArea(d3Event, d);
 			});
 	}
 
@@ -3219,7 +2066,7 @@ export default class SVGCanvasRenderer {
 					labelSel
 						.attr("x", this.nodeUtils.getNodeLabelHoverPosX(d))
 						.attr("width", this.nodeUtils.getNodeLabelHoverWidth(d))
-						.attr("height", this.nodeUtils.getNodeLabelHoverHeight(d, spanSel.node(), this.zoomTransform.k));
+						.attr("height", this.nodeUtils.getNodeLabelHoverHeight(d, spanSel.node(), this.zoomUtils.getZoomScale()));
 					spanSel.classed("d3-label-full", true);
 				}
 			})
@@ -3259,37 +2106,6 @@ export default class SVGCanvasRenderer {
 
 	attachInputPortListeners(inputPorts, node) {
 		inputPorts
-			.on("mousedown", (d3Event, port) => {
-				if (!this.config.enableEditingActions) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					return;
-				}
-				if (this.config.enableAssocLinkCreation) {
-					// 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.activePipeline.getNode(node.id);
-						this.drawingNewLinkData = {
-							srcObjId: node.id,
-							srcPortId: port.id,
-							action: this.config.enableAssocLinkCreation ? ASSOCIATION_LINK : NODE_LINK,
-							srcNode: srcNode,
-							startPos: { x: srcNode.x_pos + port.cx, y: srcNode.y_pos + port.cy },
-							portType: "input",
-							portObject: node.layout.inputPortObject,
-							portImage: node.layout.inputPortImage,
-							portWidth: node.layout.inputPortWidth,
-							portHeight: node.layout.inputPortHeight,
-							portRadius: this.getPortRadius(srcNode),
-							minInitialLine: srcNode.layout.minInitialLine,
-							guideObject: node.layout.inputPortGuideObject,
-							guideImage: node.layout.inputPortGuideImage,
-							linkArray: []
-						};
-						this.drawNewLink(d3Event);
-					}
-				}
-			})
 			.on("mouseenter", (d3Event, port) => {
 				CanvasUtils.stopPropagationAndPreventDefault(d3Event); // stop event propagation, otherwise node tip is shown
 				if (this.canOpenTip(TIP_TYPE_PORT)) {
@@ -3322,40 +2138,6 @@ export default class SVGCanvasRenderer {
 
 	attachOutputPortListeners(outputPorts, node) {
 		outputPorts
-			.on("mousedown", (d3Event, port) => {
-				if (!this.config.enableEditingActions) {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					return;
-				}
-				// 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.activePipeline.getNode(node.id);
-					if (!CanvasUtils.isSrcCardinalityAtMax(port.id, srcNode, this.activePipeline.links)) {
-						this.drawingNewLinkData = {
-							srcObjId: node.id,
-							srcPortId: port.id,
-							action: this.config.enableAssocLinkCreation ? ASSOCIATION_LINK : NODE_LINK,
-							srcNode: srcNode,
-							startPos: { x: srcNode.x_pos + port.cx, y: srcNode.y_pos + port.cy },
-							portType: "output",
-							portObject: node.layout.outputPortObject,
-							portImage: node.layout.outputPortImage,
-							portWidth: node.layout.outputPortWidth,
-							portHeight: node.layout.outputPortHeight,
-							portRadius: this.getPortRadius(srcNode),
-							minInitialLine: srcNode.layout.minInitialLine,
-							guideObject: node.layout.outputPortGuideObject,
-							guideImage: node.layout.outputPortGuideImage,
-							linkArray: []
-						};
-						if (this.config.enableHighlightUnavailableNodes) {
-							this.setUnavailableTargetNodesHighlighting(srcNode, port.id, this.activePipeline.links);
-						}
-						this.drawNewLink(d3Event);
-					}
-				}
-			})
 			.on("mouseenter", (d3Event, port) => {
 				CanvasUtils.stopPropagationAndPreventDefault(d3Event); // stop event propagation, otherwise node tip is shown
 				if (this.canOpenTip(TIP_TYPE_PORT)) {
@@ -3416,7 +2198,7 @@ export default class SVGCanvasRenderer {
 		const nodeObj = foreignObj.parentElement;
 		const nodeGrpSel = d3.select(nodeObj);
 		const transform = this.nodeUtils.getNodeLabelEditIconTranslate(node, spanObj,
-			this.zoomTransform.k, this.config.enableDisplayFullLabelOnHover);
+			this.zoomUtils.getZoomScale(), this.config.enableDisplayFullLabelOnHover);
 
 		this.displayEditIcon(spanObj, nodeGrpSel, transform,
 			(d3Event, d) => this.displayNodeLabelTextArea(d, d3Event.currentTarget.parentNode));
@@ -3430,7 +2212,7 @@ export default class SVGCanvasRenderer {
 		const decObj = foreignObj.parentElement;
 		const decGrpSel = d3.select(decObj);
 		const transform = this.decUtils.getDecLabelEditIconTranslate(
-			dec, obj, objType, spanObj, this.zoomTransform.k);
+			dec, obj, objType, spanObj, this.zoomUtils.getZoomScale());
 
 		this.displayEditIcon(spanObj, decGrpSel, transform,
 			(d3Event, d) => this.displayDecLabelTextArea(dec, obj, objType, d3Event.currentTarget.parentNode));
@@ -3683,9 +2465,11 @@ export default class SVGCanvasRenderer {
 			extSel
 				.attr("width", this.decUtils.getDecWidth(dec, d, objType))
 				.attr("height", this.decUtils.getDecHeight(dec, d, objType))
-				.each(addDecExternalObject.bind(this));
+				.each((decData, idx, exts) =>
+					this.externalUtils.addDecExternalObject(decData, idx, exts));
 		} else {
-			extSel.each(removeExternalObject.bind(this));
+			extSel.each((decData, idx, exts) =>
+				this.externalUtils.removeExternalObject(decData, idx, exts));
 			extSel.remove();
 		}
 	}
@@ -3940,55 +2724,11 @@ export default class SVGCanvasRenderer {
 					expandedSupernodeHaveStyledNodes = true;
 					return;
 				} else if (!expandedSupernodeHaveStyledNodes && CanvasUtils.isExpandedSupernode(node)) {
-					expandedSupernodeHaveStyledNodes = this.doesExpandedSupernodeHaveStyledNodes(node);
-				}
-			});
-		}
-		return expandedSupernodeHaveStyledNodes;
-	}
-
-	// Returns the maximum amount for padding, when zooming to fit the canvas
-	// objects within a subflow, to allow the connection lines to be displayed
-	// without them doubling back on themselves.
-	getMaxZoomToFitPaddingForConnections() {
-		const paddingForInputBinding = this.getMaxPaddingForConnectionsFromInputBindingNodes();
-		const paddingForOutputBinding = this.getMaxPaddingForConnectionsToOutputBindingNodes();
-		const padding = Math.max(paddingForInputBinding, paddingForOutputBinding);
-		return padding;
-	}
-
-	// Returns the maximum amount for padding, when zooming to fit the canvas
-	// objects within a subflow, to allow the connection lines (from input binding
-	// nodes to other sub-flow nodes) to be displayed without them doubling back
-	// on themselves.
-	getMaxPaddingForConnectionsFromInputBindingNodes() {
-		let maxPadding = 0;
-		const inputBindingNodes = this.activePipeline.nodes.filter((n) => n.isSupernodeInputBinding);
-
-		inputBindingNodes.forEach((n) => {
-			const nodePadding = CanvasUtils.getNodePaddingToTargetNodes(n, this.activePipeline.nodes,
-				this.activePipeline.links, this.canvasLayout.linkType);
-			maxPadding = Math.max(maxPadding, nodePadding);
-		});
-
-		return maxPadding;
-	}
-
-	// Returns the maximum amount for padding, when zooming to fit the canvas
-	// objects within a subflow, to allow the connection lines (from sub-flow nodes
-	// to output binding nodes) to be displayed without them doubling back
-	// on themselves.
-	getMaxPaddingForConnectionsToOutputBindingNodes() {
-		let maxPadding = 0;
-		const outputBindingNodes = this.activePipeline.nodes.filter((n) => n.isSupernodeOutputBinding);
-
-		this.activePipeline.nodes.forEach((n) => {
-			const nodePadding = CanvasUtils.getNodePaddingToTargetNodes(n, outputBindingNodes,
-				this.activePipeline.links, this.canvasLayout.linkType);
-			maxPadding = Math.max(maxPadding, nodePadding);
-		});
-
-		return maxPadding;
+					expandedSupernodeHaveStyledNodes = this.doesExpandedSupernodeHaveStyledNodes(node);
+				}
+			});
+		}
+		return expandedSupernodeHaveStyledNodes;
 	}
 
 	getPortRadius(d) {
@@ -3998,11 +2738,11 @@ export default class SVGCanvasRenderer {
 	// Returns the radius size of the supernode binding ports scaled up by
 	// the zoom scale amount to give the actual size.
 	getBindingPortRadius() {
-		return this.canvasLayout.supernodeBindingPortRadius / this.zoomTransform.k;
+		return this.canvasLayout.supernodeBindingPortRadius / this.zoomUtils.getZoomScale();
 	}
 
 	addDynamicNodeIcons(d3Event, d, nodeGrp) {
-		if (!this.nodeSizing && !CanvasUtils.isSuperBindingNode(d)) {
+		if (!this.isSizing() && !CanvasUtils.isSuperBindingNode(d)) {
 			// Add the ellipsis icon if requested by layout config.
 			if (d.layout.ellipsisDisplay) {
 				this.addEllipsisIcon(d, nodeGrp);
@@ -4027,11 +2767,11 @@ export default class SVGCanvasRenderer {
 	}
 
 	addContextToolbar(d3Event, d, objType) {
-		if (!this.nodeSizing && !this.dragging && !this.draggingLinkData &&
+		if (!this.isSizing() && !this.isDragging() &&
 				!this.svgCanvasTextArea.isEditingText() && !CanvasUtils.isSuperBindingNode(d)) {
 			this.canvasController.setMouseInObject(true);
 			let pos = this.getContextToolbarPos(objType, d);
-			pos = this.unTransformPos(pos);
+			pos = this.zoomUtils.unTransformPos(pos);
 			this.openContextMenu(d3Event, objType, d, null, pos);
 		}
 	}
@@ -4122,836 +2862,167 @@ export default class SVGCanvasRenderer {
 			.attr("y", this.canvasLayout.supernodeExpansionIconHoverAreaPadding);
 	}
 
-	// Returns an array of breadcrumbs for the DOM element passed in. The DOM
-	// element is expected to be an element within a node (like the expansion
-	// icon). The output array will contain one breadcrumb for each nested
-	// supernode down to the supernode of which the DOM element is a part. So if
-	// there are three nested supernodes and the DOM element is part of the third
-	// one, the breadcrumbs array will have three elements.
-	getSupernodeBreadcrumbs(domEl) {
-		const breadcrumbs = [];
-
-		let nodeGroupEl = domEl.closest(".d3-node-group");
-
-		while (nodeGroupEl) {
-			const svgAreaEl = nodeGroupEl.closest(".svg-area");
-			const supernodeDatum = this.getD3DatumFromDomEl(nodeGroupEl);
-			const parentPipelineId = svgAreaEl.getAttribute("data-pipeline-id");
-
-			breadcrumbs.push(
-				this.canvasController.createBreadcrumb(supernodeDatum, parentPipelineId)
-			);
-
-			nodeGroupEl = svgAreaEl.closest(".d3-node-group");
-		}
-
-		// Reverse the order, so they appear in the nesting order of the supernodes.
-		return breadcrumbs.reverse();
-	}
-
-	// Returns the datum object (managd by D3) for the DOM element passed in.
-	getD3DatumFromDomEl(el) {
-		const sel = d3.select(el);
-		if (sel) {
-			return sel.datum();
-		}
-		return null;
-	}
-
-	updatePortRadiusAndPos(nodeObj, node, portObjClassName) {
-		const nodeGrp = d3.select(nodeObj);
-		nodeGrp.selectAll("." + portObjClassName)
-			.attr("r", () => this.getPortRadius(node))
-			.attr("cx", (port) => port.cx)
-			.attr("cy", (port) => port.cy); // Port position may change for binding nodes with multiple-ports.
-	}
-
-	updatePortArrowPath(nodeObj, portArrowClassName) {
-		const nodeGrp = d3.select(nodeObj);
-		nodeGrp.selectAll("." + portArrowClassName)
-			.attr("d", (port) => this.getPortArrowPath(port))
-			.attr("transform", (port) => this.getPortArrowPathTransform(port));
-	}
-
-	// 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.
-	isPortMaxCardinalityZero(port) {
-		return (get(port, "app_data.ui_data.cardinality.max", 1) === 0);
-	}
-
-	isMouseOverContextToolbar(d3Event) {
-		return this.getElementWithClassAtMousePos(d3Event, "context-toolbar");
-	}
-
-	removeDynamicNodeIcons(d3Event, d, nodeGrp) {
-		if (d.layout.ellipsisDisplay) {
-			nodeGrp.selectChildren(".d3-node-ellipsis-group").remove();
-		}
-		nodeGrp.selectChildren(".d3-node-super-expand-icon-group").remove();
-	}
-
-	createSupernodeRenderer(d, supernodeD3Object) {
-		if (d.subflow_ref && d.subflow_ref.pipeline_id_ref) {
-			const superRenderer = new SVGCanvasRenderer(
-				d.subflow_ref.pipeline_id_ref,
-				this.canvasDiv,
-				this.canvasController,
-				this.canvasInfo,
-				this.selectionInfo,
-				this.breadcrumbs,
-				this.nodeLayout,
-				this.canvasLayout,
-				this.config,
-				{ id: d.id,
-					pipelineId: this.activePipeline.id,
-					renderer: this, // Only provided for in-place sub-flow
-					d3Selection: supernodeD3Object // Only provided for in-place sub-flow
-				});
-			return superRenderer;
-		}
-		return null;
-	}
-
-	// Returns the renderer for the supernode passed in. With external
-	// pipeline handling the pipeline referencd by the supernode can change
-	// over time so we have to make sure the renderer is for the supernode AND
-	// for the active pipeline.
-	getRendererForSupernode(d) {
-		return this.superRenderers.find((sr) =>
-			sr.supernodeInfo.id === d.id && sr.activePipeline.id === d.subflow_ref.pipeline_id_ref);
-	}
-
-	// Returns an array containing any renderers that are for the supernode passed
-	// in but where the supernode does NOT reference the renderer's active pipeline.
-	getDiscardedRenderersForSupernode(d) {
-		return this.superRenderers.filter((sr) =>
-			sr.supernodeInfo.id === d.id && sr.activePipeline.id !== d.subflow_ref.pipeline_id_ref);
-
-	}
-
-	openContextMenu(d3Event, type, d, port, pos) {
-		CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stop the browser context menu appearing
-		this.canvasController.contextMenuHandler({
-			type: type,
-			targetObject: type === "canvas" ? null : d,
-			id: type === "canvas" ? null : d.id, // For historical puposes, we pass d.id as well as d as targetObject.
-			pipelineId: this.activePipeline.id,
-			cmPos: pos
-				? pos
-				: this.getMousePos(d3Event, this.canvasDiv.selectAll("svg")), // Get mouse pos relative to top most SVG area even in a subflow.
-			mousePos: this.getMousePosSnapToGrid(this.getTransformedMousePos(d3Event)),
-			selectedObjectIds: this.canvasController.getSelectedObjectIds(),
-			addBreadcrumbs: (d && d.type === SUPER_NODE) ? this.getSupernodeBreadcrumbs(d3Event.currentTarget) : null,
-			port: port,
-			zoom: this.zoomTransform.k });
-	}
-
-	closeContextMenuIfOpen() {
-		if (this.canvasController.isContextMenuDisplayed()) {
-			this.canvasController.closeContextMenu();
-		}
-		if (this.config.enableContextToolbar) {
-			this.removeContextToolbar();
-		}
-	}
-
-	callDecoratorCallback(d3Event, node, dec) {
-		d3Event.stopPropagation();
-		if (this.canvasController.decorationActionHandler) {
-			this.canvasController.decorationActionHandler(node, dec.id, this.activePipeline.id);
-		}
-	}
-
-	drawNewLink(d3Event) {
-		if (this.config.enableEditingActions === false) {
-			return;
-		}
-
-		this.closeContextMenuIfOpen();
-
-		const transPos = this.getTransformedMousePos(d3Event);
-
-		if (this.drawingNewLinkData.action === COMMENT_LINK) {
-			this.drawNewCommentLinkForPorts(transPos);
-		} else {
-			this.drawNewNodeLinkForPorts(transPos);
-		}
-		// Switch on an attribute to indicate a new link is being dragged
-		// towards and over a target node.
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNode(d3Event);
-		}
-	}
-
-	drawNewNodeLinkForPorts(transPos) {
-		var that = this;
-		const linkType = this.config.enableAssocLinkCreation ? ASSOCIATION_LINK : NODE_LINK;
-
-		let startPos;
-		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
-			startPos = this.linkUtils.getNewStraightNodeLinkStartPos(this.drawingNewLinkData.srcNode, transPos);
-		} else {
-			startPos = {
-				x: this.drawingNewLinkData.startPos.x,
-				y: this.drawingNewLinkData.startPos.y };
-		}
-
-		this.drawingNewLinkData.linkArray = [{
-			"x1": startPos.x,
-			"y1": startPos.y,
-			"x2": transPos.x,
-			"y2": transPos.y,
-			"originX": startPos.originX,
-			"originY": startPos.originY,
-			"type": linkType }];
-
-		if (this.config.enableAssocLinkCreation) {
-			this.drawingNewLinkData.linkArray[0].assocLinkVariation =
-				this.getNewLinkAssocVariation(
-					this.drawingNewLinkData.linkArray[0].x1,
-					this.drawingNewLinkData.linkArray[0].x2,
-					this.drawingNewLinkData.portType);
-		}
-
-		const pathInfo = this.linkUtils.getConnectorPathInfo(
-			this.drawingNewLinkData.linkArray[0], this.drawingNewLinkData.minInitialLine);
-
-		const connectionLineSel = this.nodesLinksGrp.selectAll(".d3-new-connection-line");
-		const connectionStartSel = this.nodesLinksGrp.selectAll(".d3-new-connection-start");
-		const connectionGuideSel = this.nodesLinksGrp.selectAll(".d3-new-connection-guide");
-
-		// For a straight node line, don't draw the new link line when the guide
-		// icon or object is inside the node boundary.
-		if (linkType === NODE_LINK &&
-				this.canvasLayout.linkType === LINK_TYPE_STRAIGHT &&
-				this.nodeUtils.isPointInNodeBoundary(transPos, this.drawingNewLinkData.srcNode)) {
-			this.removeNewLinkLine();
-
-		} else {
-			connectionLineSel
-				.data(this.drawingNewLinkData.linkArray)
-				.enter()
-				.append("path")
-				.attr("class", "d3-new-connection-line")
-				.attr("linkType", linkType)
-				.merge(connectionLineSel)
-				.attr("d", pathInfo.path)
-				.attr("transform", pathInfo.transform);
-		}
-
-		if (this.canvasLayout.linkType !== LINK_TYPE_STRAIGHT) {
-			connectionStartSel
-				.data(this.drawingNewLinkData.linkArray)
-				.enter()
-				.append(this.drawingNewLinkData.portObject)
-				.attr("class", "d3-new-connection-start")
-				.attr("linkType", linkType)
-				.merge(connectionStartSel)
-				.each(function(d) {
-					// No need to draw the starting object of the new line if it is an image.
-					if (that.drawingNewLinkData.portObject === PORT_OBJECT_CIRCLE) {
-						d3.select(this)
-							.attr("cx", d.x1)
-							.attr("cy", d.y1)
-							.attr("r", that.drawingNewLinkData.portRadius);
-					}
-				});
-		}
-
-		connectionGuideSel
-			.data(this.drawingNewLinkData.linkArray)
-			.enter()
-			.append(this.drawingNewLinkData.guideObject)
-			.attr("class", "d3-new-connection-guide")
-			.attr("linkType", linkType)
-			.on("mouseup", (d3Event) => {
-				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-				this.completeNewLink(d3Event);
-			})
-			.merge(connectionGuideSel)
-			.each(function(d) {
-				if (that.drawingNewLinkData.guideObject === PORT_OBJECT_IMAGE) {
-					d3.select(this)
-						.attr("xlink:href", that.drawingNewLinkData.guideImage)
-						.attr("x", d.x2 - (that.drawingNewLinkData.portWidth / 2))
-						.attr("y", d.y2 - (that.drawingNewLinkData.portHeight / 2))
-						.attr("width", that.drawingNewLinkData.portWidth)
-						.attr("height", that.drawingNewLinkData.portHeight)
-						.attr("transform", that.getLinkImageTransform(d));
-				} else {
-					d3.select(this)
-						.attr("cx", d.x2)
-						.attr("cy", d.y2)
-						.attr("r", that.drawingNewLinkData.portRadius);
-				}
-			});
-	}
-
-	getLinkImageTransform(d) {
-		let angle = 0;
-		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
-			const adjacent = d.x2 - (d.originX || d.x1);
-			const opposite = d.y2 - (d.originY || d.y1);
-			if (adjacent === 0 && opposite === 0) {
-				angle = 0;
-			} else {
-				angle = Math.atan(opposite / adjacent) * (180 / Math.PI);
-				angle = adjacent >= 0 ? angle : angle + 180;
-				if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) {
-					angle -= 90;
-				} else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
-					angle += 90;
-				}
-			}
-			return `rotate(${angle},${d.x2},${d.y2})`;
-		}
-		return null;
-	}
-
-	drawNewCommentLinkForPorts(transPos) {
-		const that = this;
-		const srcComment = this.activePipeline.getComment(this.drawingNewLinkData.srcObjId);
-		const startPos = this.linkUtils.getNewStraightCommentLinkStartPos(srcComment, transPos);
-		const linkType = COMMENT_LINK;
-
-		this.drawingNewLinkData.linkArray = [{
-			"x1": startPos.x,
-			"y1": startPos.y,
-			"x2": transPos.x,
-			"y2": transPos.y,
-			"type": linkType }];
-
-		const connectionLineSel = this.nodesLinksGrp.selectAll(".d3-new-connection-line");
-		const connectionGuideSel = this.nodesLinksGrp.selectAll(".d3-new-connection-guide");
-
-		connectionLineSel
-			.data(this.drawingNewLinkData.linkArray)
-			.enter()
-			.append("path")
-			.attr("class", "d3-new-connection-line")
-			.attr("linkType", linkType)
-			.merge(connectionLineSel)
-			.attr("d", (d) => that.linkUtils.getConnectorPathInfo(d).path);
-
-		connectionGuideSel
-			.data(this.drawingNewLinkData.linkArray)
-			.enter()
-			.append("circle")
-			.attr("class", "d3-new-connection-guide")
-			.attr("linkType", linkType)
-			.on("mouseup", (d3Event) => {
-				CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-				this.completeNewLink(d3Event);
-			})
-			.merge(connectionGuideSel)
-			.attr("cx", (d) => d.x2)
-			.attr("cy", (d) => d.y2)
-			.attr("r", this.canvasLayout.commentPortRadius);
-
-		if (this.canvasLayout.commentLinkArrowHead) {
-			const connectionArrowHeadSel = this.nodesLinksGrp.selectAll(".d3-new-connection-arrow");
-
-			connectionArrowHeadSel
-				.data(this.drawingNewLinkData.linkArray)
-				.enter()
-				.append("path")
-				.attr("class", "d3-new-connection-arrow")
-				.attr("linkType", linkType)
-				.on("mouseup", (d3Event) => {
-					CanvasUtils.stopPropagationAndPreventDefault(d3Event);
-					this.completeNewLink(d3Event);
-				})
-				.merge(connectionArrowHeadSel)
-				.attr("d", (d) => this.getArrowHead(d))
-				.attr("transform", (d) => this.getArrowHeadTransform(d));
-		}
-	}
-
-	// Handles the completion of a new link being drawn from a source node.
-	completeNewLink(d3Event) {
-		if (this.config.enableEditingActions === false) {
-			return;
-		}
-
-		if (this.config.enableHighlightUnavailableNodes) {
-			this.unsetUnavailableNodesHighlighting();
-		}
-		var trgNode = this.getNodeAtMousePos(d3Event);
-		if (trgNode !== null) {
-			this.completeNewLinkOnNode(d3Event, trgNode);
-		} else {
-			if (this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE &&
-					this.drawingNewLinkData.action === NODE_LINK &&
-					!this.config.enableAssocLinkCreation) {
-				this.completeNewDetachedLink(d3Event);
-			} else {
-				this.stopDrawingNewLink();
-			}
-		}
-	}
-
-	// Handles the completion of a new link when the end is dropped on a node.
-	completeNewLinkOnNode(d3Event, trgNode) {
-		// If we completed a connection remove the new line objects.
-		this.removeNewLink();
-
-		// Switch 'new link over node' highlighting off
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNodeCancel();
-		}
-
-		if (trgNode !== null) {
-			const type = this.drawingNewLinkData.action;
-			if (type === NODE_LINK) {
-				const srcNode = this.activePipeline.getNode(this.drawingNewLinkData.srcObjId);
-				const srcPortId = this.drawingNewLinkData.srcPortId;
-				const trgPortId = this.getInputNodePortId(d3Event, trgNode);
-
-				if (CanvasUtils.isDataConnectionAllowed(srcPortId, trgPortId, srcNode, trgNode, this.activePipeline.links)) {
-					this.canvasController.editActionHandler({
-						editType: "linkNodes",
-						editSource: "canvas",
-						nodes: [{ "id": this.drawingNewLinkData.srcObjId, "portId": this.drawingNewLinkData.srcPortId }],
-						targetNodes: [{ "id": trgNode.id, "portId": trgPortId }],
-						type: type,
-						linkType: "data", // Added for historical purposes - for WML Canvas support
-						pipelineId: this.pipelineId });
-
-				} else if (this.config.enableLinkReplaceOnNewConnection &&
-										CanvasUtils.isDataLinkReplacementAllowed(srcPortId, trgPortId, srcNode, trgNode, this.activePipeline.links)) {
-					const linksToTrgPort = CanvasUtils.getDataLinksConnectedTo(trgPortId, trgNode, this.activePipeline.links);
-					// We only replace a link to a maxed out cardinality port if there
-					// is only one link. i.e. the input port cardinality is 0:1
-					if (linksToTrgPort.length === 1) {
-						this.canvasController.editActionHandler({
-							editType: "linkNodesAndReplace",
-							editSource: "canvas",
-							nodes: [{ "id": this.drawingNewLinkData.srcObjId, "portId": this.drawingNewLinkData.srcPortId }],
-							targetNodes: [{ "id": trgNode.id, "portId": trgPortId }],
-							type: type,
-							pipelineId: this.pipelineId,
-							replaceLink: linksToTrgPort[0]
-						});
-					}
-				}
-
-			} else if (type === ASSOCIATION_LINK) {
-				const srcNode = this.activePipeline.getNode(this.drawingNewLinkData.srcObjId);
-
-				if (CanvasUtils.isAssocConnectionAllowed(srcNode, trgNode, this.activePipeline.links)) {
-					this.canvasController.editActionHandler({
-						editType: "linkNodes",
-						editSource: "canvas",
-						nodes: [{ "id": this.drawingNewLinkData.srcObjId }],
-						targetNodes: [{ "id": trgNode.id }],
-						type: type,
-						pipelineId: this.pipelineId });
-				}
-
-			} else {
-				if (CanvasUtils.isCommentLinkConnectionAllowed(this.drawingNewLinkData.srcObjId, trgNode.id, this.activePipeline.links)) {
-					this.canvasController.editActionHandler({
-						editType: "linkComment",
-						editSource: "canvas",
-						nodes: [this.drawingNewLinkData.srcObjId],
-						targetNodes: [trgNode.id],
-						type: COMMENT_LINK,
-						linkType: "comment", // Added for historical purposes - for WML Canvas support
-						pipelineId: this.pipelineId });
-				}
-			}
-		}
-
-		this.drawingNewLinkData = null;
-	}
-
-	// Handles the completion of a new link when the end is dropped away from
-	// a node (when enableLinkSelection is set to LINK_SELECTION_DETACHABLE)
-	// which creates a  new detached link.
-	completeNewDetachedLink(d3Event) {
-		// If we completed a connection remove the new line objects.
-		this.removeNewLink();
-
-		// Switch 'new link over node' highlighting off
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNodeCancel();
-		}
-
-		const endPoint = this.getTransformedMousePos(d3Event);
-		this.canvasController.editActionHandler({
-			editType: "createDetachedLink",
-			editSource: "canvas",
-			srcNodeId: this.drawingNewLinkData.srcObjId,
-			srcNodePortId: this.drawingNewLinkData.srcPortId,
-			trgPos: endPoint,
-			type: NODE_LINK,
-			pipelineId: this.pipelineId });
-
-		this.drawingNewLinkData = null;
-	}
-
-	stopDrawingNewLink() {
-		// Switch 'new link over node' highlighting off
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNodeCancel();
-		}
-
-		this.stopDrawingNewLinkForPorts();
-		this.drawingNewLinkData = null;
-	}
-
-	stopDrawingNewLinkForPorts() {
-		const saveX1 = this.drawingNewLinkData.linkArray[0].x1;
-		const saveY1 = this.drawingNewLinkData.linkArray[0].y1;
-		const saveX2 = this.drawingNewLinkData.linkArray[0].x2;
-		const saveY2 = this.drawingNewLinkData.linkArray[0].y2;
-
-		const saveNewLinkData = Object.assign({}, this.drawingNewLinkData);
-
-		this.drawingNewLinkData = null;
-
-		// If we completed a connection successfully just remove the new line
-		// objects.
-		let newPath = "";
-		let duration = 350;
-
-		if (this.canvasLayout.linkType === LINK_TYPE_CURVE) {
-			newPath = "M " + saveX1 + " " + saveY1 +
-								"C " + saveX2 + " " + saveY2 +
-								" " + saveX2 + " " + saveY2 +
-								" " + saveX2 + " " + saveY2;
-
-		} else if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
-			if (saveX1 < saveX2) {
-				duration = 0;
-			}
-			newPath = "M " + saveX1 + " " + saveY1 +
-								"L " + saveX2 + " " + saveY2 +
-								" " + saveX2 + " " + saveY2 +
-								" " + saveX2 + " " + saveY2;
-
-		} else {
-			newPath = "M " + saveX1 + " " + saveY1 +
-								"L " + saveX2 + " " + saveY2 +
-								"Q " + saveX2 + " " + saveY2 + " " + saveX2 + " " + saveY2 +
-								"L " + saveX2 + " " + saveY2 +
-								"Q " + saveX2 + " " + saveY2 + " " + saveX2 + " " + saveY2 +
-								"L " + saveX2 + " " + saveY2 +
-								"Q " + saveX2 + " " + saveY2 + " " + saveX2 + " " + saveY2 +
-								"L " + saveX2 + " " + saveY2 +
-								"Q " + saveX2 + " " + saveY2 + " " + saveX2 + " " + saveY2 +
-								"L " + saveX2 + " " + saveY2;
-		}
-
-		this.nodesLinksGrp.selectAll(".d3-new-connection-line")
-			.transition()
-			.duration(duration)
-			.attr("d", newPath)
-			.on("end", () => {
-				this.nodesLinksGrp.selectAll(".d3-new-connection-arrow").remove();
-
-				this.nodesLinksGrp.selectAll(".d3-new-connection-guide")
-					.transition()
-					.duration(1000)
-					.ease(d3.easeElastic)
-					// The lines below set all attributes for images AND circles even
-					// though some attributes will not be relevant. This is done
-					// because I could not get the .each() method to work here (which
-					// would be necessary to have an if statement based on guide object)
-					.attr("x", saveX1 - (saveNewLinkData.portWidth / 2))
-					.attr("y", saveY1 - (saveNewLinkData.portHeight / 2))
-					.attr("cx", saveX1)
-					.attr("cy", saveY1)
-					.attr("transform", null);
-				this.nodesLinksGrp.selectAll(".d3-new-connection-line")
-					.transition()
-					.duration(1000)
-					.ease(d3.easeElastic)
-					.attr("d", "M " + saveX1 + " " + saveY1 +
-											"L " + saveX1 + " " + saveY1)
-					.on("end", this.removeNewLink.bind(this));
-			});
-	}
-
-	removeNewLink() {
-		this.nodesLinksGrp.selectAll(".d3-new-connection-line").remove();
-		this.nodesLinksGrp.selectAll(".d3-new-connection-start").remove();
-		this.nodesLinksGrp.selectAll(".d3-new-connection-guide").remove();
-		this.nodesLinksGrp.selectAll(".d3-new-connection-arrow").remove();
-	}
+	// Returns an array of breadcrumbs for the DOM element passed in. The DOM
+	// element is expected to be an element within a node (like the expansion
+	// icon). The output array will contain one breadcrumb for each nested
+	// supernode down to the supernode of which the DOM element is a part. So if
+	// there are three nested supernodes and the DOM element is part of the third
+	// one, the breadcrumbs array will have three elements.
+	getSupernodeBreadcrumbs(domEl) {
+		const breadcrumbs = [];
 
-	removeNewLinkLine() {
-		this.nodesLinksGrp.selectAll(".d3-new-connection-line").remove();
-	}
+		let nodeGroupEl = domEl.closest(".d3-node-group");
 
-	dragLinkHandle(d3Event) {
-		const transPos = this.getTransformedMousePos(d3Event);
-		const link = this.draggingLinkData.link;
+		while (nodeGroupEl) {
+			const svgAreaEl = nodeGroupEl.closest(".svg-area");
+			const supernodeDatum = this.getD3DatumFromDomEl(nodeGroupEl);
+			const parentPipelineId = svgAreaEl.getAttribute("data-pipeline-id");
 
-		if (this.draggingLinkData.endBeingDragged === "start") {
-			link.srcPos = { x_pos: transPos.x, y_pos: transPos.y };
-			delete link.srcNodeId;
-			delete link.srcNodePortId;
-			delete link.srcObj;
+			breadcrumbs.push(
+				this.canvasController.createBreadcrumb(supernodeDatum, parentPipelineId)
+			);
 
-		} else {
-			link.trgPos = { x_pos: transPos.x, y_pos: transPos.y };
-			delete link.trgNodeId;
-			delete link.trgNodePortId;
-			delete link.trgNode;
+			nodeGroupEl = svgAreaEl.closest(".d3-node-group");
 		}
 
-		this.displayLinks();
-
-		// Switch on an attribute to indicate a new link is being dragged
-		// towards and over a target node.
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNode(d3Event);
-		}
-	}
-
-	completeDraggedLink(d3Event) {
-		const newLink = this.getNewLinkOnDrag(d3Event);
-
-		if (newLink) {
-			const editSubType = this.getLinkEditSubType(newLink);
-			// If editSubType is set the user did a gesture that requires a change
-			// to the object model.
-			if (editSubType) {
-				this.canvasController.editActionHandler({
-					editType: "updateLink",
-					editSubType: editSubType,
-					editSource: "canvas",
-					newLink: newLink,
-					pipelineId: this.pipelineId });
-			// If editSubType is null, the user performed a gesture which should
-			// not be executed as an action so draw the link back in its old position.
-			} else {
-				this.snapBackOldLink();
-			}
-		// newLink might be null when we are dragging a link handle with
-		// enableLinkSelection not set to detachable. If that's the case the
-		// link needs to snap back (redrawn) to its original position.
-		} else {
-			this.snapBackOldLink();
-		}
+		// Reverse the order, so they appear in the nesting order of the supernodes.
+		return breadcrumbs.reverse();
+	}
 
-		// Switch 'new link over node' highlighting off
-		if (this.config.enableHighlightNodeOnNewLinkDrag) {
-			this.setNewLinkOverNodeCancel();
+	// Returns the datum object (managd by D3) for the DOM element passed in.
+	getD3DatumFromDomEl(el) {
+		const sel = d3.select(el);
+		if (sel) {
+			return sel.datum();
 		}
-
-		this.unsetUnavailableNodesHighlighting();
-		this.stopDraggingLink();
+		return null;
 	}
 
-	// Resets and redraws the link being dragged back to its original position.
-	// This is necessary when the user performs a link drag gesture which should
-	// NOT be executed as an action -- therefore the link need to be drawn back
-	// in its original position.
-	snapBackOldLink() {
-		this.activePipeline.replaceLink(this.draggingLinkData.oldLink);
-		this.displayLinks();
+	updatePortRadiusAndPos(nodeObj, node, portObjClassName) {
+		const nodeGrp = d3.select(nodeObj);
+		nodeGrp.selectAll("." + portObjClassName)
+			.attr("r", () => this.getPortRadius(node))
+			.attr("cx", (port) => port.cx)
+			.attr("cy", (port) => port.cy); // Port position may change for binding nodes with multiple-ports.
 	}
 
-	// Returns the edit sub-type for the link action being performed to further
-	// explain the updateLink action.
-	getLinkEditSubType(newLink) {
-		const oldLink = this.draggingLinkData.oldLink;
-
-		if (oldLink.srcNodeId && !newLink.srcNodeId) {
-			return "detachFromSrcNode";
-
-		} else if (oldLink.trgNodeId && !newLink.trgNodeId) {
-			return "detachFromTrgNode";
-
-		} else if (!oldLink.srcNodeId && newLink.srcNodeId) {
-			return "attachToSrcNode";
-
-		} else if (!oldLink.trgNodeId && newLink.trgNodeId) {
-			return "attachToTrgNode";
-
-		} else if (!oldLink.srcNodeId && !newLink.srcNodeId &&
-								(oldLink.srcPos.x_pos !== newLink.srcPos.x_pos ||
-									oldLink.srcPos.y_pos !== newLink.srcPos.y_pos)) {
-			return "moveSrcPosition";
-
-		} else if (!oldLink.trgNodeId && !newLink.trgNodeId &&
-								(oldLink.trgPos.x_pos !== newLink.trgPos.x_pos ||
-									oldLink.trgPos.y_pos !== newLink.trgPos.y_pos)) {
-			return "moveTrgPosition";
+	updatePortArrowPath(nodeObj, portArrowClassName) {
+		const nodeGrp = d3.select(nodeObj);
+		nodeGrp.selectAll("." + portArrowClassName)
+			.attr("d", (port) => this.getPortArrowPath(port))
+			.attr("transform", (port) => this.getPortArrowPathTransform(port));
+	}
 
-		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
-							oldLink.srcNodeId !== newLink.srcNodeId) {
-			return "switchSrcNode";
+	// 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.
+	isPortMaxCardinalityZero(port) {
+		return (get(port, "app_data.ui_data.cardinality.max", 1) === 0);
+	}
 
-		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
-							oldLink.trgNodeId !== newLink.trgNodeId) {
-			return "switchTrgNode";
+	isMouseOverContextToolbar(d3Event) {
+		return this.getElementWithClassAtMousePos(d3Event, "context-toolbar");
+	}
 
-		} else if (oldLink.srcNodeId && newLink.srcNodeId &&
-							oldLink.srcNodeId === newLink.srcNodeId &&
-							oldLink.srcNodePortId !== newLink.srcNodePortId) {
-			return "switchSrcNodePort";
+	removeDynamicNodeIcons(d3Event, d, nodeGrp) {
+		if (d.layout.ellipsisDisplay) {
+			nodeGrp.selectChildren(".d3-node-ellipsis-group").remove();
+		}
+		nodeGrp.selectChildren(".d3-node-super-expand-icon-group").remove();
+	}
 
-		} else if (oldLink.trgNodeId && newLink.trgNodeId &&
-							oldLink.trgNodeId === newLink.trgNodeId &&
-							oldLink.trgNodePortId !== newLink.trgNodePortId) {
-			return "switchTrgNodePort";
+	createSupernodeRenderer(d, supernodeD3Object) {
+		if (d.subflow_ref && d.subflow_ref.pipeline_id_ref) {
+			const superRenderer = new SVGCanvasRenderer(
+				d.subflow_ref.pipeline_id_ref,
+				this.canvasDiv,
+				this.canvasController,
+				this.canvasInfo,
+				this.selectionInfo,
+				this.breadcrumbs,
+				this.nodeLayout,
+				this.canvasLayout,
+				this.config,
+				{ id: d.id,
+					pipelineId: this.activePipeline.id,
+					renderer: this, // Only provided for in-place sub-flow
+					d3Selection: supernodeD3Object // Only provided for in-place sub-flow
+				});
+			return superRenderer;
 		}
-		// We arrive here, in two ways:
-		// 1. if the user dragged a link handle from a node/port and dropped it
-		//    back on the same node/port.
-		// 2. If the user clicked on the unattached end of a detached link but did
-		//    not move it anywhere
-		// In these cases, the updateLink action should NOT be performed and
-		// consequently NO command should be added to the command stack.
 		return null;
 	}
 
-	// Returns a new link if one can be created given the current data in the
-	// this.draggingLinkData object. Returns null if a link cannot be created.
-	getNewLinkOnDrag(d3Event, nodeProximity) {
-		const oldLink = this.draggingLinkData.oldLink;
-		const newLink = cloneDeep(oldLink);
-
-		if (this.draggingLinkData.endBeingDragged === "start") {
-			delete newLink.srcObj;
-			delete newLink.srcNodeId;
-			delete newLink.srcNodePortId;
-			delete newLink.srcPos;
-
-			const srcNode = nodeProximity
-				? this.getNodeNearMousePos(d3Event, nodeProximity)
-				: this.getNodeAtMousePos(d3Event);
-
-			if (srcNode) {
-				newLink.srcNodeId = srcNode.id;
-				newLink.srcObj = this.activePipeline.getNode(srcNode.id);
-				newLink.srcNodePortId = nodeProximity
-					? this.getNodePortIdNearMousePos(d3Event, OUTPUT_TYPE, srcNode)
-					: this.getOutputNodePortId(d3Event, srcNode);
-			}	else {
-				newLink.srcPos = this.draggingLinkData.link.srcPos;
-			}
-
-		} else {
-			delete newLink.trgNode;
-			delete newLink.trgNodeId;
-			delete newLink.trgNodePortId;
-			delete newLink.trgPos;
-
-			const trgNode = nodeProximity
-				? this.getNodeNearMousePos(d3Event, nodeProximity)
-				: this.getNodeAtMousePos(d3Event);
-
-			if (trgNode) {
-				newLink.trgNodeId = trgNode.id;
-				newLink.trgNode = this.activePipeline.getNode(trgNode.id);
-				newLink.trgNodePortId = nodeProximity
-					? this.getNodePortIdNearMousePos(d3Event, INPUT_TYPE, trgNode)
-					: this.getInputNodePortId(d3Event, trgNode);
-			}	else {
-				newLink.trgPos = this.draggingLinkData.link.trgPos;
-			}
-		}
+	// Returns the renderer for the supernode passed in. With external
+	// pipeline handling the pipeline referencd by the supernode can change
+	// over time so we have to make sure the renderer is for the supernode AND
+	// for the active pipeline.
+	getRendererForSupernode(d) {
+		return this.superRenderers.find((sr) =>
+			sr.supernodeInfo.id === d.id && sr.activePipeline.id === d.subflow_ref.pipeline_id_ref);
+	}
 
-		// If links are not detachable, we cannot create a link if srcPos
-		// or trgPos are set because that would create a detached link unconnected
-		// to either a source node or a target node or both.
-		if (this.config.enableLinkSelection !== LINK_SELECTION_DETACHABLE &&
-				(newLink.srcPos || newLink.trgPos)) {
-			return null;
-		}
+	// Returns an array containing any renderers that are for the supernode passed
+	// in but where the supernode does NOT reference the renderer's active pipeline.
+	getDiscardedRenderersForSupernode(d) {
+		return this.superRenderers.filter((sr) =>
+			sr.supernodeInfo.id === d.id && sr.activePipeline.id !== d.subflow_ref.pipeline_id_ref);
 
-		if (this.canExecuteUpdateLinkCommand(newLink, oldLink)) {
-			return newLink;
-		}
-		return null;
 	}
 
-	// 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.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;
-		let executeCommand = true;
+	openContextMenu(d3Event, type, d, port, pos) {
+		CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stop the browser context menu appearing
+		this.canvasController.contextMenuHandler({
+			type: type,
+			targetObject: type === "canvas" ? null : d,
+			id: type === "canvas" ? null : d.id, // For historical puposes, we pass d.id as well as d as targetObject.
+			pipelineId: this.activePipeline.id,
+			cmPos: pos
+				? pos
+				: this.getMousePos(d3Event, this.canvasDiv.selectAll("svg")), // Get mouse pos relative to top most SVG area even in a subflow.
+			mousePos: this.getMousePosSnapToGrid(this.getTransformedMousePos(d3Event)),
+			selectedObjectIds: this.canvasController.getSelectedObjectIds(),
+			addBreadcrumbs: (d && d.type === SUPER_NODE) ? this.getSupernodeBreadcrumbs(d3Event.currentTarget) : null,
+			port: port,
+			zoom: this.zoomUtils.getZoomScale() });
+	}
 
-		if (linkSrcChanged && srcNode &&
-				!CanvasUtils.isSrcConnectionAllowedWithDetachedLinks(newLink.srcNodePortId, srcNode, links)) {
-			executeCommand = false;
-		}
-		if (linkTrgChanged && trgNode &&
-				!CanvasUtils.isTrgConnectionAllowedWithDetachedLinks(newLink.trgNodePortId, trgNode, links)) {
-			executeCommand = false;
+	closeContextMenuIfOpen() {
+		if (this.canvasController.isContextMenuDisplayed()) {
+			this.canvasController.closeContextMenu();
 		}
-		if (srcNode && trgNode &&
-				!CanvasUtils.isConnectionAllowedWithDetachedLinks(newLink.srcNodePortId, newLink.trgNodePortId, srcNode, trgNode, links)) {
-			executeCommand = false;
+		if (this.config.enableContextToolbar) {
+			this.removeContextToolbar();
 		}
-		return executeCommand;
 	}
 
-	// Returns true if the source information has changed between
-	// the two links.
-	hasLinkSrcChanged(newLink, oldLink) {
-		let linkUpdated = false;
-
-		if (newLink.srcNodeId) {
-			if (newLink.srcNodeId !== oldLink.srcNodeId) {
-				linkUpdated = true;
-			}
-
-			if (newLink.srcNodePortId !== oldLink.srcNodePortId) {
-				linkUpdated = true;
-			}
-
-		}	else {
-			if (oldLink.srcPos) {
-				if (newLink.srcPos.x_pos !== oldLink.srcPos.x_pos ||
-						newLink.srcPos.y_pos !== oldLink.srcPos.y_pos) {
-					linkUpdated = true;
-				}
-			} else {
-				linkUpdated = true;
-			}
+	callDecoratorCallback(d3Event, node, dec) {
+		d3Event.stopPropagation();
+		if (this.canvasController.decorationActionHandler) {
+			this.canvasController.decorationActionHandler(node, dec.id, this.activePipeline.id);
 		}
-		return linkUpdated;
 	}
 
-	// Returns true if the target information has changed between
-	// the two links.
-	hasLinkTrgChanged(newLink, oldLink) {
-		let linkUpdated = false;
-
-		if (newLink.trgNodeId) {
-			if (newLink.trgNodeId !== oldLink.trgNodeId) {
-				linkUpdated = true;
-			}
-
-			if (newLink.trgNodePortId !== oldLink.trgNodePortId) {
-				linkUpdated = true;
-			}
 
-		}	else {
-			if (oldLink.trgPos) {
-				if (newLink.trgPos.x_pos !== oldLink.trgPos.x_pos ||
-						newLink.trgPos.y_pos !== oldLink.trgPos.y_pos) {
-					linkUpdated = true;
-				}
+	getLinkImageTransform(d) {
+		let angle = 0;
+		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
+			const adjacent = d.x2 - (d.originX || d.x1);
+			const opposite = d.y2 - (d.originY || d.y1);
+			if (adjacent === 0 && opposite === 0) {
+				angle = 0;
 			} else {
-				linkUpdated = true;
+				angle = Math.atan(opposite / adjacent) * (180 / Math.PI);
+				angle = adjacent >= 0 ? angle : angle + 180;
+				if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) {
+					angle -= 90;
+				} else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
+					angle += 90;
+				}
 			}
+			return `rotate(${angle},${d.x2},${d.y2})`;
 		}
-		return linkUpdated;
-	}
-
-	stopDraggingLink() {
-		this.draggingLinkData = null;
+		return null;
 	}
 
 	// Returns a link, if one can be found, at the position indicated by x and y
@@ -5083,7 +3154,7 @@ export default class SVGCanvasRenderer {
 			.each((d) => {
 				let portRadius = d.layout.portRadius;
 				if (CanvasUtils.isSuperBindingNode(d)) {
-					portRadius = this.canvasLayout.supernodeBindingPortRadius / this.zoomTransform.k;
+					portRadius = this.canvasLayout.supernodeBindingPortRadius / this.zoomUtils.getZoomScale();
 				}
 
 				if (pos.x >= d.x_pos - portRadius - prox && // Target port sticks out by its radius so need to allow for it.
@@ -5096,75 +3167,6 @@ export default class SVGCanvasRenderer {
 		return node;
 	}
 
-	getNodePortIdNearMousePos(d3Event, portType, node) {
-		const pos = this.getTransformedMousePos(d3Event);
-		let portId = null;
-		let defaultPortId = null;
-
-		if (node) {
-			if (portType === OUTPUT_TYPE) {
-				const portObjs = this.getAllNodeGroupsSelection()
-					.selectChildren("." + this.getNodeOutputPortClassName())
-					.selectChildren(".d3-node-port-output-main");
-
-				portId = this.searchForPortNearMouse(
-					node, pos, portObjs,
-					node.layout.outputPortObject,
-					node.width);
-				defaultPortId = CanvasUtils.getDefaultOutputPortId(node);
-
-			} else {
-				const portObjs = this.getAllNodeGroupsSelection()
-					.selectChildren("." + this.getNodeInputPortClassName())
-					.selectChildren(".d3-node-port-input-main");
-
-				portId = this.searchForPortNearMouse(
-					node, pos, portObjs,
-					node.layout.inputPortObject,
-					0);
-				defaultPortId = CanvasUtils.getDefaultInputPortId(node);
-			}
-		}
-
-		if (!portId) {
-			portId = defaultPortId;
-		}
-		return portId;
-	}
-
-	// Returns a port ID for the port identified by the position (pos) on the
-	// node (node) further specified by the other parameters.
-	searchForPortNearMouse(node, pos, portObjs, portObjectType, nodeWidthOffset) {
-		let portId = null;
-		portObjs
-			.each((p, i, portGrps) => {
-				const portSel = d3.select(portGrps[i]);
-				if (portObjectType === PORT_OBJECT_IMAGE) {
-					const xx = node.x_pos + Number(portSel.attr("x"));
-					const yy = node.y_pos + Number(portSel.attr("y"));
-					const wd = Number(portSel.attr("width"));
-					const ht = Number(portSel.attr("height"));
-					if (pos.x >= xx &&
-							pos.x <= xx + nodeWidthOffset + wd &&
-							pos.y >= yy &&
-							pos.y <= yy + ht) {
-						portId = portGrps[i].getAttribute("data-port-id");
-					}
-				} else { // Port must be a circle
-					const cx = node.x_pos + Number(portSel.attr("cx"));
-					const cy = node.y_pos + Number(portSel.attr("cy"));
-					if (pos.x >= cx - node.layout.portRadius && // Target port sticks out by its radius so need to allow for it.
-							pos.x <= cx + node.layout.portRadius &&
-							pos.y >= cy - node.layout.portRadius &&
-							pos.y <= cy + node.layout.portRadius) {
-						portId = portGrps[i].getAttribute("data-port-id");
-					}
-				}
-			});
-
-		return portId;
-	}
-
 	// Returns a sizing rectangle for nodes and comments. This extends an
 	// invisible area out beyond the highlight sizing line to improve usability
 	// when sizing.
@@ -5410,7 +3412,7 @@ export default class SVGCanvasRenderer {
 				// necessary with binding nodes with mutiple ports.
 				let multiplier = 1;
 				if (CanvasUtils.isSuperBindingNode(data)) {
-					multiplier = 1 / this.zoomTransform.k;
+					multiplier = 1 / this.zoomUtils.getZoomScale();
 				}
 
 				ports.forEach((p) => {
@@ -5464,7 +3466,7 @@ export default class SVGCanvasRenderer {
 		// necessary with binding nodes with mutiple ports.
 		let multiplier = 1;
 		if (CanvasUtils.isSuperBindingNode(data)) {
-			multiplier = 1 / this.zoomTransform.k;
+			multiplier = 1 / this.zoomUtils.getZoomScale();
 		}
 		ports.forEach((p) => {
 			yPosition += (data.layout.portArcRadius * multiplier);
@@ -5623,10 +3625,11 @@ export default class SVGCanvasRenderer {
 					? markdownIt.render(c.content)
 					: escapeText(c.content)));
 
-		// Add or remove drag behavior as appropriate
+		// Add or remove drag object behavior for the comment groups.
 		if (this.config.enableEditingActions) {
+			const handler = this.dragObjectUtils.getDragObjectHandler();
 			joinedCommentGrps
-				.call(this.dragHandler);
+				.call(handler);
 		} else {
 			joinedCommentGrps
 				.on(".drag", null);
@@ -5637,6 +3640,9 @@ export default class SVGCanvasRenderer {
 	attachCommentGroupListeners(commentGrps) {
 		commentGrps
 			.on("mouseenter", (d3Event, d) => {
+				if (this.isDragging()) {
+					return;
+				}
 				this.setCommentStyles(d, "hover", d3.select(d3Event.currentTarget));
 				if (this.config.enableEditingActions && d.id !== this.svgCanvasTextArea.getEditingTextId()) {
 					this.createCommentPort(d3Event.currentTarget, d);
@@ -5657,7 +3663,7 @@ export default class SVGCanvasRenderer {
 			// Use mouse down instead of click because it gets called before drag start.
 			.on("mousedown", (d3Event, d) => {
 				this.logger.logStartTimer("Comment Group - mouse down");
-				d3Event.stopPropagation(); // Stop event going to canvas when enableEditingActions is false
+				d3Event.stopPropagation();
 				if (this.svgCanvasTextArea.isEditingText()) {
 					this.svgCanvasTextArea.completeEditing();
 				}
@@ -5700,9 +3706,7 @@ export default class SVGCanvasRenderer {
 	attachCommentSizingListeners(commentGrps) {
 		commentGrps
 			.on("mousedown", (d3Event, d) => {
-				this.commentSizing = true;
-				// Note - comment resizing and finalization of size is handled by drag functions.
-				this.addTempCursorOverlay(this.commentSizingCursor);
+				this.dragObjectUtils.mouseDownCommentSizingArea();
 			})
 			// Use mousemove here rather than mouseenter so the cursor will change
 			// if the pointer moves from one area of the node outline to another
@@ -5711,17 +3715,10 @@ export default class SVGCanvasRenderer {
 			// pointer leaves the temporary overlay (which is removed) and enters
 			// the node outline.
 			.on("mousemove mouseenter", (d3Event, d) => {
-				if (this.config.enableEditingActions && // Only set cursor when we are able to edit comments
-					!this.isRegionSelectOrSizingInProgress()) // Don't switch sizing direction if we are already sizing
-				{
-					let cursorType = "default";
-					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
-						this.commentSizingDirection = this.getSizingDirection(d3Event, d, this.canvasLayout.commentCornerResizeArea);
-						this.commentSizingCursor = this.getCursorBasedOnDirection(this.commentSizingDirection);
-						cursorType = this.commentSizingCursor;
-					}
-					d3.select(d3Event.currentTarget).style("cursor", cursorType);
-				}
+				this.dragObjectUtils.mouseEnterCommentSizingArea(d3Event, d);
+			})
+			.on("mouseleave", (d3Event, d) => {
+				this.dragObjectUtils.mouseLeaveCommentSizingArea(d3Event, d);
 			});
 	}
 
@@ -5731,26 +3728,19 @@ export default class SVGCanvasRenderer {
 	createCommentPort(commentObj, d) {
 		const commentGrp = d3.select(commentObj);
 
-		commentGrp
+		const commentPort = commentGrp
 			.append("circle")
 			.attr("cx", (com) => com.width / 2)
 			.attr("cy", (com) => com.height + this.canvasLayout.commentHighlightGap)
 			.attr("r", this.canvasLayout.commentPortRadius)
-			.attr("class", "d3-comment-port-circle")
-			.on("mousedown", (d3Event, cd) => {
-				CanvasUtils.stopPropagationAndPreventDefault(d3Event); // Stops the node drag behavior when clicking on the handle/circle
-				this.drawingNewLinkData = {
-					srcObjId: d.id,
-					action: COMMENT_LINK,
-					startPos: {
-						x: d.x_pos - this.canvasLayout.commentHighlightGap,
-						y: d.y_pos - this.canvasLayout.commentHighlightGap
-					},
-					linkArray: []
-				};
-				this.drawNewLink(d3Event);
-			});
+			.attr("class", "d3-comment-port-circle");
 
+		if (this.config.enableEditingActions) {
+			const handler = this.dragNewLinkUtils.getDragNewLinkHandler();
+			commentPort.call(handler);
+		} else {
+			commentPort.on(".drag", null);
+		}
 	}
 
 	deleteCommentPort(commentObj) {
@@ -5840,7 +3830,7 @@ export default class SVGCanvasRenderer {
 	// Returns true if this renderer or any of its ancestors are currently in the
 	// process of selecting a region or sizing a node or comment.
 	isRegionSelectOrSizingInProgress() {
-		if (this.regionSelect || this.nodeSizing || this.commentSizing) {
+		if (this.regionSelect || this.isSizing()) {
 			return true;
 		}
 		if (this.supernodeInfo.renderer) {
@@ -5851,336 +3841,6 @@ export default class SVGCanvasRenderer {
 		return false;
 	}
 
-	// This method allows us to avoid a strange behavior which only appears in the
-	// Chrome browser. That is, when the mouse pointer is inside the
-	// node/comment selection highlight area but is close to either the
-	// right or bottom side of the node/comment body, any mousedown events will go
-	// to the body instead of the highlight area. We use this method to detect
-	// this situation and use the result to decide whether to display the sizing
-	// cursor or not.
-	isPointerCloseToBodyEdge(d3Event, d) {
-		const pos = this.getTransformedMousePos(d3Event);
-		const rightEdge = d.x_pos + d.width;
-		const bottomEdge = d.y_pos + d.height;
-
-		// Is the pointer within 1 pixel of the right edge of the node or comment
-		const rightEdgeState =
-			pos.x >= rightEdge && pos.x <= rightEdge + 1 &&
-			pos.y >= 0 && pos.y <= bottomEdge;
-
-		// Is the pointer within 1 pixel of the bottom edge of the node or comment
-		const bottomEdgeState =
-			pos.y >= bottomEdge && pos.y <= bottomEdge + 1 &&
-			pos.x >= 0 && pos.x <= rightEdge;
-
-		return rightEdgeState || bottomEdgeState;
-	}
-
-	// Returns the comment or supernode sizing direction (i.e. one of n, s, e, w, nw, ne,
-	// sw or se) based on the current mouse position and the position and
-	// dimensions of the comment or node outline.
-	getSizingDirection(d3Event, d, cornerResizeArea) {
-		var xPart = "";
-		var yPart = "";
-
-		const transPos = this.getTransformedMousePos(d3Event);
-		if (transPos.x < d.x_pos + cornerResizeArea) {
-			xPart = "w";
-		} else if (transPos.x > d.x_pos + d.width - cornerResizeArea) {
-			xPart = "e";
-		}
-		if (transPos.y < d.y_pos + cornerResizeArea) {
-			yPart = "n";
-		} else if (transPos.y > d.y_pos + d.height - cornerResizeArea) {
-			yPart = "s";
-		}
-
-		return yPart + xPart;
-	}
-
-	// Returns a cursor type based on the currect comment sizing direction.
-	// Possible values are: ns-resize, ew-resize, nwse-resize or nesw-resize.
-	getCursorBasedOnDirection(direction) {
-		var cursorType;
-		switch (direction) {
-		case "n":
-		case "s":
-			cursorType = "ns-resize";
-			break;
-		case "e":
-		case "w":
-			cursorType = "ew-resize";
-			break;
-		case "nw":
-		case "se":
-			cursorType = "nwse-resize";
-			break;
-		case "ne":
-		case "sw":
-			cursorType = "nesw-resize";
-			break;
-		default:
-			cursorType = "";
-		}
-
-		return cursorType;
-	}
-
-	// Returns the minimum allowed height for the node passed in. For supernodes
-	// this means combining the bigger of the space for the inputs and output ports
-	// with some space for the top of the display frame and the padding at the
-	// bottom of the frame. Then the bigger of that height versus the default
-	// supernode minimum height is retunred.
-	getMinHeight(node) {
-		if (CanvasUtils.isSupernode(node)) {
-			const minHt = Math.max(node.inputPortsHeight, node.outputPortsHeight) +
-				this.canvasLayout.supernodeTopAreaHeight + this.canvasLayout.supernodeSVGAreaPadding;
-			return Math.max(this.canvasLayout.supernodeMinHeight, minHt);
-		}
-		return node.layout.defaultNodeHeight;
-	}
-
-	// Returns the minimum allowed width for the node passed in.
-	getMinWidth(node) {
-		if (CanvasUtils.isSupernode(node)) {
-			return this.canvasLayout.supernodeMinWidth;
-		}
-		return node.layout.defaultNodeWidth;
-	}
-
-	// Sets the size and position of the node in the canvasInfo.nodes
-	// 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, resizeObj) {
-		const oldSupernode = Object.assign({}, resizeObj);
-		const minHeight = this.getMinHeight(resizeObj);
-		const minWidth = this.getMinWidth(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(resizeObj) &&
-					this.config.enableMoveNodesOnSupernodeResize) {
-				const objectsInfo = CanvasUtils.moveSurroundingObjects(
-					oldSupernode,
-					this.activePipeline.getNodesAndComments(),
-					this.nodeSizingDirection,
-					resizeObj.width,
-					resizeObj.height,
-					true // Pass true to indicate that object positions should be updated.
-				);
-
-				const linksInfo = CanvasUtils.moveSurroundingDetachedLinks(
-					oldSupernode,
-					this.activePipeline.links,
-					this.nodeSizingDirection,
-					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.nodeSizingDetLinksInfo = Object.assign(this.nodeSizingDetLinksInfo, linksInfo);
-			}
-
-			this.logger.logStartTimer("displayObjects");
-
-			this.displayMovedComments();
-			this.displayMovedNodes();
-			this.displaySingleNode(resizeObj);
-			this.displayMovedLinks();
-			this.displayCanvasAccoutrements();
-
-			if (CanvasUtils.isSupernode(resizeObj)) {
-				if (this.dispUtils.isDisplayingSubFlow()) {
-					this.displayBindingNodesToFitSVG();
-				}
-				this.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
-			}
-			this.logger.logEndTimer("displayObjects");
-		}
-	}
-
-	// Sets the size and position of the comment in the canvasInfo.comments
-	// 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, resizeObj) {
-		this.resizeObject(d3Event, resizeObj, this.commentSizingDirection, 20, 20);
-		this.displaySingleComment(resizeObj);
-		this.displayMovedLinks();
-		this.displayCanvasAccoutrements();
-	}
-
-	// Sets the size and position of the object in the canvasInfo
-	// array based on the position of the pointer during the resize action.
-	resizeObject(d3Event, canvasObj, direction, minWidth, minHeight) {
-		let incrementX = 0;
-		let incrementY = 0;
-		let incrementWidth = 0;
-		let incrementHeight = 0;
-
-		if (direction.indexOf("e") > -1) {
-			incrementWidth += d3Event.dx;
-		}
-		if (direction.indexOf("s") > -1) {
-			incrementHeight += d3Event.dy;
-		}
-		if (direction.indexOf("n") > -1) {
-			incrementY += d3Event.dy;
-			incrementHeight -= d3Event.dy;
-		}
-		if (direction.indexOf("w") > -1) {
-			incrementX += d3Event.dx;
-			incrementWidth -= d3Event.dx;
-		}
-
-		let xPos = 0;
-		let yPos = 0;
-		let width = 0;
-		let height = 0;
-
-		if (this.config.enableSnapToGridType === SNAP_TO_GRID_DURING) {
-			// Calculate where the object being resized would be and its size given
-			// current increments.
-			this.notSnappedXPos += incrementX;
-			this.notSnappedYPos += incrementY;
-			this.notSnappedWidth += incrementWidth;
-			this.notSnappedHeight += incrementHeight;
-
-			xPos = CanvasUtils.snapToGrid(this.notSnappedXPos, this.canvasLayout.snapToGridXPx);
-			yPos = CanvasUtils.snapToGrid(this.notSnappedYPos, this.canvasLayout.snapToGridYPx);
-			width = CanvasUtils.snapToGrid(this.notSnappedWidth, this.canvasLayout.snapToGridXPx);
-			height = CanvasUtils.snapToGrid(this.notSnappedHeight, this.canvasLayout.snapToGridYPx);
-
-			width = Math.max(width, minWidth);
-			height = Math.max(height, minHeight);
-
-		} else {
-			xPos = canvasObj.x_pos + incrementX;
-			yPos = canvasObj.y_pos + incrementY;
-			width = canvasObj.width + incrementWidth;
-			height = canvasObj.height + incrementHeight;
-		}
-
-		// Don't allow the object area to shrink below the min width and height.
-		// For comment sizing, errors may occur especially if the width becomes
-		// less that one character's width. For node sizing we want at least some
-		// area to display the sub-flow.
-		if (width < minWidth || height < minHeight) {
-			return null;
-		}
-
-		const delta = {
-			width: width - canvasObj.width,
-			height: height - canvasObj.height,
-			x_pos: xPos - canvasObj.x_pos,
-			y_pos: yPos - canvasObj.y_pos
-		};
-
-		canvasObj.x_pos = xPos;
-		canvasObj.y_pos = yPos;
-		canvasObj.width = width;
-		canvasObj.height = height;
-
-		return delta;
-	}
-
-	// Finalises the sizing of a node by calling editActionHandler
-	// with an editNode action.
-	endNodeSizing(node) {
-		let resizeObj = node;
-		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			resizeObj = this.snapToGridObject(resizeObj);
-			resizeObj = this.restrictNodeSizingToMinimums(resizeObj);
-		}
-
-		// If the dimensions or position has changed, issue the "resizeObjects" 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 !== 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[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.
-			// We use some padding because sometimes, when a node is sized back to its
-			// original dimensions, it isn't retunred to EXACTLY its default width/height.
-			if (resizeObj.height > resizeObj.layout.defaultNodeHeight + 2 ||
-					resizeObj.width > resizeObj.layout.defaultNodeWidth + 2) {
-				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,
-				detachedLinksInfo: this.nodeSizingDetLinksInfo,
-				pipelineId: this.pipelineId
-			});
-		}
-		this.nodeSizing = false;
-		this.nodeSizingObjectsInfo = {};
-		this.nodeSizingDetLinksInfo = {};
-	}
-
-	// Finalises the sizing of a comment by calling editActionHandler
-	// with an editComment action.
-	endCommentSizing(comment) {
-		let resizeObj = comment;
-		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			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 !== 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: "resizeObjects",
-				editSource: "canvas",
-				objectsInfo: commentSizingObjectsInfo,
-				detachedLinksInfo: {}, // Comments cannot have detached links
-				pipelineId: this.pipelineId
-			};
-			this.canvasController.editActionHandler(data);
-		}
-		this.commentSizing = false;
-	}
-
-	// Ensure the snap-to-grid does not make the width or height smaller than
-	// the minimums allowed.
-	restrictNodeSizingToMinimums(resizeObj) {
-		const minHeight = this.getMinHeight(resizeObj);
-		const minWidth = this.getMinWidth(resizeObj);
-		resizeObj.width = Math.max(resizeObj.width, minWidth);
-		resizeObj.height = Math.max(resizeObj.height, minHeight);
-		return resizeObj;
-	}
-
 	// Displays all the links on the canvas either by creating new links,
 	// updating existing links or removing unwanted links.
 	displayLinks() {
@@ -6238,6 +3898,7 @@ export default class SVGCanvasRenderer {
 
 	// Creates all newly created links specified in the enter selection.
 	createLinks(enter) {
+		this.logger.logStartTimer("createLinks");
 		// Add groups for links
 		const newLinkGrps = enter.append("g")
 			.attr("data-id", (d) => this.getId("link_grp", d.id))
@@ -6281,6 +3942,8 @@ export default class SVGCanvasRenderer {
 				});
 		}
 
+		this.logger.logEndTimer("createLinks");
+
 		return newLinkGrps;
 	}
 
@@ -6288,6 +3951,7 @@ export default class SVGCanvasRenderer {
 	// selection object. The selection object will contain newly created links
 	// as well as existing links.
 	updateLinks(joinedLinkGrps, lineArray) {
+		this.logger.logStartTimer("updateLinks");
 		// Update link selection area
 		joinedLinkGrps
 			.selectAll(".d3-link-selection-area")
@@ -6333,9 +3997,11 @@ export default class SVGCanvasRenderer {
 			});
 		}
 
-		if (!this.dragging) {
+		if (!this.isMoving() && !this.isSizing()) {
 			this.setDisplayOrder(joinedLinkGrps);
 		}
+
+		this.logger.logEndTimer("updateLinks");
 	}
 
 	attachLinkGroupListeners(linkGrps) {
@@ -6365,6 +4031,10 @@ export default class SVGCanvasRenderer {
 				this.openContextMenu(d3Event, "link", d);
 			})
 			.on("mouseenter", (d3Event, link) => {
+				if (this.isDragging()) {
+					return;
+				}
+
 				const targetObj = d3Event.currentTarget;
 
 				if (this.config.enableLinkSelection === LINK_SELECTION_HANDLES ||
@@ -6377,8 +4047,7 @@ export default class SVGCanvasRenderer {
 					this.addContextToolbar(d3Event, link, "link");
 				}
 
-				if (this.canOpenTip(TIP_TYPE_LINK) &&
-						!this.draggingLinkData) {
+				if (this.canOpenTip(TIP_TYPE_LINK)) {
 					this.canvasController.closeTip();
 					this.canvasController.openTip({
 						id: this.getId("link_tip", link.id),
@@ -6444,7 +4113,8 @@ export default class SVGCanvasRenderer {
 
 		// Add or remove drag behavior as appropriate
 		if (this.config.enableEditingActions) {
-			startHandle.call(this.dragLinkHandler);
+			const handler = this.dragDetLinkUtils.getDragDetachedLinkHandler();
+			startHandle.call(handler);
 		} else {
 			startHandle.on(".drag", null);
 		}
@@ -6473,7 +4143,8 @@ export default class SVGCanvasRenderer {
 
 		// Add or remove drag behavior as appropriate
 		if (this.config.enableEditingActions) {
-			endHandle.call(this.dragLinkHandler);
+			const handler = this.dragDetLinkUtils.getDragDetachedLinkHandler();
+			endHandle.call(handler);
 		} else {
 			endHandle.on(".drag", null);
 		}
@@ -6623,22 +4294,26 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	// Raises the node, specified by the node ID, above other nodes and objects.
+	// Called by external utils.
+	raiseNodeToTopById(nodeId) {
+		this.getNodeGroupSelectionById(nodeId).raise();
+	}
+
 	// Raises the node above other nodes and objects (on the mouse entering
 	// the node). This is necessary for apps that have ports that protrude from
 	// the side of the node and where those nodes may be positioned close to each
 	// other so it makes the ports appear on top of any adjacent node. We don't
 	// raise the nodes for various conditions:
 	// * The enableRaiseNodesToTopOnHover config option is set to false
-	// * We are currently drawing a new link
-	// * We are dragging some object(s) around
+	// * We are currently dragging to create a new link, or to move objects or detached links
 	// * There are one or more selected links
 	// * We are editing text
 	raiseNodeToTop(nodeGrp) {
 		if (this.config.enableRaiseNodesToTopOnHover &&
-				this.drawingNewLinkData === null &&
-				!this.dragging &&
-				this.activePipeline.getSelectedLinksCount() === 0 &&
-				!this.isEditingText()) {
+			!this.isDragging() &&
+			this.activePipeline.getSelectedLinksCount() === 0 &&
+			!this.isEditingText()) {
 			nodeGrp.raise();
 		}
 	}
@@ -6667,11 +4342,9 @@ export default class SVGCanvasRenderer {
 		return link.decorations && link.decorations.length > 0;
 	}
 
-	isLinkBeingDragged(link) {
-		return this.draggingLinkData && this.draggingLinkData.link.id === link.id;
-	}
-
 	buildLinksArray() {
+		this.logger.logStartTimer("buildLinksArray");
+
 		let linksArray = [];
 
 		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
@@ -6681,8 +4354,9 @@ export default class SVGCanvasRenderer {
 		this.activePipeline.links.forEach((link) => {
 			let linkObj = null;
 
-			if (((this.config.enableLinkSelection === LINK_SELECTION_HANDLES && this.isLinkBeingDragged(link)) ||
-						this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE) &&
+			if (((this.config.enableLinkSelection === LINK_SELECTION_HANDLES &&
+					this.dragDetLinkUtils.isLinkBeingDragged(link)) ||
+					this.config.enableLinkSelection === LINK_SELECTION_DETACHABLE) &&
 					(!link.srcObj || !link.trgNode)) {
 				linkObj = this.getDetachedLineObj(link);
 
@@ -6703,6 +4377,8 @@ export default class SVGCanvasRenderer {
 		// Add connection path info to the links.
 		linksArray = this.linkUtils.addConnectionPaths(linksArray);
 
+		this.logger.logEndTimer("buildLinksArray");
+
 		return linksArray;
 	}
 
@@ -7258,24 +4934,24 @@ export default class SVGCanvasRenderer {
 
 	canOpenTip(tipType) {
 		return this.canvasController.isTipEnabled(tipType) &&
-			!this.regionSelect && !this.dragging &&
-			!this.commentSizing && !this.nodeSizing && !this.drawingNewLinkData;
+			!this.regionSelect && !this.isDragging() && !this.isSizing();
 	}
 
-	// Return the x,y coordinates of the svg group relative to the window's viewport
-	// This is used when a new comment is created from the toolbar to make sure the
-	// new comment always appears in the view port.
+	// Return the x,y coordinates for the default position of a new comment
+	// created from the toolbar. This make sure the new comment always appears
+	// in the top left corner of the view port.
 	getDefaultCommentOffset() {
 		let xPos = this.canvasLayout.addCommentOffsetX;
 		let yPos = this.canvasLayout.addCommentOffsetY;
+		const z = this.zoomUtils.getZoomTransform();
 
-		if (this.zoomTransform) {
-			xPos = this.zoomTransform.x / this.zoomTransform.k;
-			yPos = this.zoomTransform.y / this.zoomTransform.k;
+		if (z) {
+			const xPanByScale = z.x / z.k;
+			const yPanByScale = z.y / z.k;
 
-			// The window's viewport is in the opposite direction of zoomTransform
-			xPos = -xPos + this.canvasLayout.addCommentOffsetX;
-			yPos = -yPos + this.canvasLayout.addCommentOffsetY;
+			// Offset in the negative direction.
+			xPos = -xPanByScale + this.canvasLayout.addCommentOffsetX;
+			yPos = -yPanByScale + this.canvasLayout.addCommentOffsetY;
 		}
 
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_DURING ||
@@ -7288,14 +4964,11 @@ export default class SVGCanvasRenderer {
 	// Returns a string that explains which flags are set to true.
 	getFlags() {
 		let str = "Flags:";
-		if (this.dragging) {
+		if (this.isDragging()) {
 			str += " dragging = true";
 		}
-		if (this.nodeSizing) {
-			str += " nodeSizing = true";
-		}
-		if (this.commentSizing) {
-			str += " commentSizing = true";
+		if (this.isSizing()) {
+			str += " sizing = true";
 		}
 		if (this.regionSelect) {
 			str += " regionSelect = true";