@elyra/canvas 12.11.2 → 12.12.2

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

@@ -17,7 +17,6 @@
 /* eslint no-invalid-this: "off" */
 /* eslint brace-style: "off" */
 /* eslint no-lonely-if: "off" */
-/* eslint max-depth: "off" */
 
 // Import just the D3 modules that are needed and combine them as the 'd3' object.
 import * as d3Drag from "d3-drag";
@@ -27,7 +26,7 @@ import * as d3Fetch from "d3-fetch";
 import * as d3Zoom from "./d3-zoom-extension/src";
 const d3 = Object.assign({}, d3Drag, d3Ease, d3Selection, d3Fetch, d3Zoom);
 
-import { cloneDeep, escape as escapeText, get, set,
+import { cloneDeep, escape as escapeText, forOwn, get,
 	unescape as unescapeText } from "lodash";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
@@ -39,12 +38,12 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	TIP_TYPE_NODE, TIP_TYPE_PORT, TIP_TYPE_DEC, TIP_TYPE_LINK,
 	INTERACTION_MOUSE, INTERACTION_TRACKPAD,
 	USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
-	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING }
+	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
+	NORTH, SOUTH, EAST, WEST }
 	from "./constants/canvas-constants";
 import SUPERNODE_ICON from "../../assets/images/supernode.svg";
 import SUPERNODE_EXT_ICON from "../../assets/images/supernode_ext.svg";
 import Logger from "../logging/canvas-logger.js";
-import LocalStorage from "./local-storage.js";
 import CanvasUtils from "./common-canvas-utils.js";
 import SvgCanvasDisplay from "./svg-canvas-utils-display.js";
 import SvgCanvasNodes from "./svg-canvas-utils-nodes.js";
@@ -111,11 +110,6 @@ export default class SVGCanvasRenderer {
 		this.minScaleExtent = 0.2;
 		this.maxScaleExtent = 1.8;
 
-		// Allow us to keep track of the object (node or comment) being sized and
-		// its initial size and position at the start of the sizing event.
-		this.resizeObj = null;
-		this.resizeObjInitialInfo = null;
-
 		// Allows us to track the sizing behavior of comments
 		this.commentSizing = false;
 		this.commentSizingDirection = "";
@@ -124,9 +118,14 @@ export default class SVGCanvasRenderer {
 		this.nodeSizing = false;
 		this.nodeSizingDirection = "";
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
+
+		// Keeps track of the size and position, at the start of the sizing event,
+		// of the object (node or comment) being sized.
+		this.resizeObjInitialInfo = null;
 
-		// General purpose variables to allow us to handle resize and snap to grid
+		// Keeps track of the size and position, during a sizing event, of the
+		// object (node or comment) being sized, before it is snapped to grid.
 		this.notSnappedXPos = 0;
 		this.notSnappedYPos = 0;
 		this.notSnappedWidth = 0;
@@ -255,16 +254,12 @@ export default class SVGCanvasRenderer {
 			this.addBackToParentFlowArrow(this.canvasSVG);
 		}
 
-		// If we are showing a sub-flow in full screen mode, zoom it to fit the
-		// screen so it looks similar to the in-place sub-flow view unless there
-		// is a saved zoom for this pipeline.
-		if (this.dispUtils.isDisplayingSubFlowFullPage()) {
-			if (!this.config.enableSaveZoom ||
-					this.config.enableSaveZoom === "None" ||
-					(this.config.enableSaveZoom === "LocalStorage" && !this.getSavedZoom()) ||
-					(this.config.enableSaveZoom === "Pipelineflow" && !this.activePipeline.zoom)) {
-				this.zoomToFit();
-			}
+		// If we are showing a sub-flow in full screen mode and there
+		// is no saved zoom for this pipeline, zoom it to fit the
+		// screen so it looks similar to the in-place sub-flow view.
+		if (this.dispUtils.isDisplayingSubFlowFullPage() &&
+				!this.canvasController.getSavedZoom(this.pipelineId)) {
+			this.zoomToFit();
 		}
 
 		// If we are showing an in-place subflow make sure any already existing
@@ -624,6 +619,27 @@ export default class SVGCanvasRenderer {
 		return this.dragging;
 	}
 
+	// 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 if the node should have a resizing area. We should display
+	// a sizing area even for collapsed supernodes so it is available if/when
+	// the supernode is expanded
+	shouldDisplayNodeSizingArea(node) {
+		return !CanvasUtils.isSuperBindingNode(node) &&
+			(CanvasUtils.isSupernode(node) || this.config.enableResizableNodes);
+	}
+
 	getAllNodeGroupsSelection() {
 		return this.nodesLinksGrp.selectChildren(".d3-node-group");
 	}
@@ -775,9 +791,16 @@ export default class SVGCanvasRenderer {
 		const ghost = this.getGhostDimensions();
 		const node = this.canvasController.convertNodeTemplate(nodeTemplate);
 		node.layout = this.canvasController.getObjectModel().getNodeLayout();
-		node.width = node.is_expanded ? node.expanded_width : ghost.width;
-		node.height = node.is_expanded ? node.expanded_height : ghost.height;
-
+		if (node.is_expanded) {
+			node.width = node.expanded_width;
+			node.height = node.expanded_height;
+		} else if (node.isResized) {
+			node.width = node.resizeWidth;
+			node.height = node.resizeHeight;
+		} else {
+			node.width = ghost.width;
+			node.height = ghost.height;
+		}
 		const nodeImage = this.getNodeImage(node);
 		const nodeImageType = this.getImageType(nodeImage);
 		const ghostDivSel = this.getGhostDivSel();
@@ -1551,18 +1574,7 @@ export default class SVGCanvasRenderer {
 	// 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 = null;
-
-		if (this.config.enableSaveZoom === "Pipelineflow" &&
-				this.activePipeline.zoom) {
-			newZoom = this.activePipeline.zoom;
-
-		} else if (this.config.enableSaveZoom === "LocalStorage") {
-			const savedZoom = this.getSavedZoom();
-			if (savedZoom) {
-				newZoom = savedZoom;
-			}
-		}
+		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.
@@ -1605,24 +1617,6 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
-	// Saves the zoom object passed in for this pipeline in local storage.
-	setSavedZoom(zoom) {
-		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
-		const savedZooms = canvasSavedZoomValues ? JSON.parse(canvasSavedZoomValues) : {};
-		set(savedZooms, [this.canvasInfo.id, this.pipelineId], zoom);
-		LocalStorage.set("canvasSavedZoomValues", JSON.stringify(savedZooms));
-	}
-
-	// Returns the zoom for this pipeline saved in local storage
-	getSavedZoom() {
-		const canvasSavedZoomValues = LocalStorage.get("canvasSavedZoomValues");
-		if (canvasSavedZoomValues) {
-			const savedZoom = JSON.parse(canvasSavedZoomValues);
-			return get(savedZoom, [this.canvasInfo.id, this.pipelineId]);
-		}
-		return null;
-	}
-
 	zoomToFit() {
 		const padding = this.getZoomToFitPadding();
 		const canvasDimensions = this.getCanvasDimensionsAdjustedForScale(1, padding);
@@ -1688,6 +1682,14 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
+	isZoomedToMax() {
+		return this.zoomTransform ? this.zoomTransform.k === this.maxScaleExtent : false;
+	}
+
+	isZoomedToMin() {
+		return this.zoomTransform ? this.zoomTransform.k === this.minScaleExtent : false;
+	}
+
 	getZoomToReveal(nodeIDs, xPos, yPos) {
 		const transformedSVGRect = this.getTransformedViewportDimensions();
 		const nodes = this.activePipeline.getNodes(nodeIDs);
@@ -1882,24 +1884,18 @@ export default class SVGCanvasRenderer {
 			this.canvasController.setSelections(selections, this.activePipeline.id);
 			this.regionSelect = false;
 
-		} else if (this.dispUtils.isDisplayingFullPage()) {
+		} else if (this.dispUtils.isDisplayingFullPage() && this.zoomChanged()) {
 			// Set the internal zoom value for canvasSVG used by D3. This will be
 			// used by d3Event next time a zoom action is initiated.
 			this.canvasSVG.property("__zoom", this.zoomTransform);
 
-
-			if (this.config.enableSaveZoom === "Pipelineflow") {
-				const data = {
-					editType: "setPipelineZoom",
-					editSource: "canvas",
-					zoom: this.zoomTransform,
-					pipelineId: this.activePipeline.id
-				};
-				this.canvasController.editActionHandler(data);
-
-			} else if (this.config.enableSaveZoom === "LocalStorage") {
-				this.setSavedZoom(this.zoomTransform);
-			}
+			const data = {
+				editType: "setZoom",
+				editSource: "canvas",
+				zoom: this.zoomTransform,
+				pipelineId: this.activePipeline.id
+			};
+			this.canvasController.editActionHandler(data);
 		}
 
 		// Remove the cursor overlay and reset the SVG background rectangle
@@ -1908,6 +1904,14 @@ export default class SVGCanvasRenderer {
 		this.removeTempCursorOverlay();
 	}
 
+	// Returns true if the current zoom transform is different from the
+	// zoom values at the beginning of the zoom action.
+	zoomChanged() {
+		return (this.zoomTransform.k !== this.zoomStartPoint.k ||
+			this.zoomTransform.x !== this.zoomStartPoint.x ||
+			this.zoomTransform.y !== this.zoomStartPoint.y);
+	}
+
 	zoomCanvasBackground(d3Event) {
 		this.regionSelect = false;
 
@@ -2090,12 +2094,12 @@ export default class SVGCanvasRenderer {
 
 		// Note: Comment and Node resizing is started by the comment/node highlight rectangle.
 		if (this.commentSizing) {
-			this.resizeObj = this.activePipeline.getComment(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getComment(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else if (this.nodeSizing) {
-			this.resizeObj = this.activePipeline.getNode(d.id);
-			this.initializeResizeVariables(this.resizeObj);
+			const resizeObj = this.activePipeline.getNode(d.id);
+			this.initializeResizeVariables(resizeObj);
 
 		} else {
 			this.dragObjectsStart(d3Event, d);
@@ -2103,12 +2107,12 @@ export default class SVGCanvasRenderer {
 		this.logger.logEndTimer("dragStart", true);
 	}
 
-	dragMove(d3Event) {
+	dragMove(d3Event, d) {
 		this.logger.logStartTimer("dragMove");
 		if (this.commentSizing) {
-			this.resizeComment(d3Event);
+			this.resizeComment(d3Event, d);
 		} else if (this.nodeSizing) {
-			this.resizeNode(d3Event);
+			this.resizeNode(d3Event, d);
 		} else {
 			this.dragObjectsAction(d3Event);
 		}
@@ -2122,10 +2126,10 @@ export default class SVGCanvasRenderer {
 		this.removeTempCursorOverlay();
 
 		if (this.commentSizing) {
-			this.endCommentSizing();
+			this.endCommentSizing(d);
 
 		} else if (this.nodeSizing) {
-			this.endNodeSizing();
+			this.endNodeSizing(d);
 
 		} else if (this.dragging) {
 			this.dragObjectsEnd(d3Event, d);
@@ -2513,7 +2517,7 @@ export default class SVGCanvasRenderer {
 		}
 
 		// Node Sizing Area.
-		newNodeGroups.filter((d) => CanvasUtils.isSupernode(d))
+		newNodeGroups.filter((d) => this.shouldDisplayNodeSizingArea(d))
 			.append("path")
 			.attr("class", "d3-node-sizing")
 			.call(this.attachNodeSizingListeners.bind(this));
@@ -2862,7 +2866,7 @@ export default class SVGCanvasRenderer {
 	attachNodeSizingListeners(nodeGrps) {
 		nodeGrps
 			.on("mousedown", (d3Event, d) => {
-				if (CanvasUtils.isExpandedSupernode(d)) {
+				if (this.isNodeResizable(d)) {
 					this.nodeSizing = true;
 					// Note - node resizing and finalization of size is handled by drag functions.
 					this.addTempCursorOverlay(this.nodeSizingCursor);
@@ -2875,8 +2879,7 @@ 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 nodes
-						CanvasUtils.isExpandedSupernode(d) &&
+				if (this.isNodeResizable(d) &&
 						!this.isRegionSelectOrSizingInProgress()) { // Don't switch sizing direction if we are already sizing
 					let cursorType = "pointer";
 					if (!this.isPointerCloseToBodyEdge(d3Event, d)) {
@@ -2886,6 +2889,9 @@ export default class SVGCanvasRenderer {
 					}
 					d3.select(d3Event.currentTarget).style("cursor", cursorType);
 				}
+			})
+			.on("mouseleave", (d3Event, d) => {
+				d3.select(d3Event.currentTarget).style("cursor", "pointer");
 			});
 	}
 
@@ -4688,7 +4694,7 @@ export default class SVGCanvasRenderer {
 	}
 
 	// Returns a path that will draw the shape for the rectangle node
-	// display. This is draw as a path rather than an SVG rectangle to make the
+	// display. This is drawn as a path rather than an SVG rectangle to make the
 	// calling code more generic.
 	getRectangleNodeShapePath(data, highlightGap) {
 		const gap = highlightGap ? highlightGap : 0;
@@ -5638,27 +5644,50 @@ export default class SVGCanvasRenderer {
 		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) {
-		const oldSupernode = Object.assign({}, this.resizeObj);
-		const minSupernodeHeight = Math.max(this.resizeObj.inputPortsHeight, this.resizeObj.outputPortsHeight) +
-			this.canvasLayout.supernodeTopAreaHeight + this.canvasLayout.supernodeSVGAreaPadding;
+	resizeNode(d3Event, d) {
+		const resizeObj = this.activePipeline.getNode(d.id);
+		const oldSupernode = Object.assign({}, resizeObj);
+		const minHeight = this.getMinHeight(resizeObj);
+		const minWidth = this.getMinWidth(resizeObj);
 
-		const delta = this.resizeObject(d3Event, this.resizeObj,
-			this.nodeSizingDirection, this.canvasLayout.supernodeMinWidth,
-			Math.max(this.canvasLayout.supernodeMinHeight, minSupernodeHeight));
+		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 (this.config.enableMoveNodesOnSupernodeResize) {
+			if (CanvasUtils.isSupernode(resizeObj) &&
+					this.config.enableMoveNodesOnSupernodeResize) {
 				const objectsInfo = CanvasUtils.moveSurroundingObjects(
 					oldSupernode,
 					this.activePipeline.getNodesAndComments(),
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that object positions should be updated.
 				);
 
@@ -5666,22 +5695,26 @@ export default class SVGCanvasRenderer {
 					oldSupernode,
 					this.activePipeline.links,
 					this.nodeSizingDirection,
-					this.resizeObj.width,
-					this.resizeObj.height,
+					resizeObj.width,
+					resizeObj.height,
 					true // Pass true to indicate that link positions should be updated.
 				);
 
 				// Overwrite the object and link info with any new info.
 				this.nodeSizingObjectsInfo = Object.assign(this.nodeSizingObjectsInfo, objectsInfo);
-				this.nodeSizingLinksInfo = Object.assign(this.nodeSizingLinksInfo, linksInfo);
+				this.nodeSizingDetLinksInfo = Object.assign(this.nodeSizingDetLinksInfo, linksInfo);
 			}
+
 			this.displayComments();
 			this.displayNodes();
 			this.displayLinks();
-			if (this.dispUtils.isDisplayingSubFlow()) {
-				this.displayBindingNodesToFitSVG();
+
+			if (CanvasUtils.isSupernode(resizeObj)) {
+				if (this.dispUtils.isDisplayingSubFlow()) {
+					this.displayBindingNodesToFitSVG();
+				}
+				this.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
 			}
-			this.superRenderers.forEach((renderer) => renderer.displaySVGToFitSupernode());
 		}
 	}
 
@@ -5689,8 +5722,9 @@ export default class SVGCanvasRenderer {
 	// array based on the position of the pointer during the resize action
 	// then redraws the comment and links (the link positions may move based
 	// on the comment size change).
-	resizeComment(d3Event) {
-		this.resizeObject(d3Event, this.resizeObj, this.commentSizingDirection, 20, 20);
+	resizeComment(d3Event, d) {
+		const resizeObj = this.activePipeline.getComment(d.id);
+		this.resizeObject(d3Event, resizeObj, this.commentSizingDirection, 20, 20);
 		this.displayComments();
 		this.displayLinks();
 	}
@@ -5768,63 +5802,76 @@ export default class SVGCanvasRenderer {
 
 	// Finalises the sizing of a node by calling editActionHandler
 	// with an editNode action.
-	endNodeSizing() {
+	endNodeSizing(node) {
+		let resizeObj = this.activePipeline.getNode(node.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
 			// Add the dimensions of the object being resized to the array of object infos.
-			this.nodeSizingObjectsInfo[this.resizeObj.id] = {
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos
+			this.nodeSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
 			};
 
+			// If the node has been resized set the resize properties appropriately.
+			if (this.resizeObjInitialInfo.width !== resizeObj.width ||
+					this.resizeObjInitialInfo.height !== resizeObj.height) {
+				this.nodeSizingObjectsInfo[resizeObj.id].isResized = true;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeWidth = resizeObj.width;
+				this.nodeSizingObjectsInfo[resizeObj.id].resizeHeight = resizeObj.height;
+			}
+
 			this.canvasController.editActionHandler({
 				editType: "resizeObjects",
 				editSource: "canvas",
 				objectsInfo: this.nodeSizingObjectsInfo,
-				linksInfo: this.nodeSizingLinksInfo,
+				detachedLinksInfo: this.nodeSizingDetLinksInfo,
 				pipelineId: this.pipelineId
 			});
 		}
-		this.resizeObj = null;
 		this.nodeSizing = false;
 		this.nodeSizingObjectsInfo = [];
-		this.nodeSizingLinksInfo = [];
+		this.nodeSizingDetLinksInfo = [];
 	}
 
 	// Finalises the sizing of a comment by calling editActionHandler
 	// with an editComment action.
-	endCommentSizing() {
+	endCommentSizing(comment) {
+		let resizeObj = this.activePipeline.getComment(comment.id);
 		if (this.config.enableSnapToGridType === SNAP_TO_GRID_AFTER) {
-			this.resizeObj = this.snapToGridObject(this.resizeObj);
+			resizeObj = this.snapToGridObject(resizeObj);
 		}
 
 		// If the dimensions or position has changed, issue the command.
 		// Note: x_pos or y_pos might change on resize if the node is sized
 		// upwards or to the left.
-		if (this.resizeObjInitialInfo.x_pos !== this.resizeObj.x_pos ||
-				this.resizeObjInitialInfo.y_pos !== this.resizeObj.y_pos ||
-				this.resizeObjInitialInfo.width !== this.resizeObj.width ||
-				this.resizeObjInitialInfo.height !== this.resizeObj.height) {
+		if (this.resizeObjInitialInfo.x_pos !== resizeObj.x_pos ||
+				this.resizeObjInitialInfo.y_pos !== resizeObj.y_pos ||
+				this.resizeObjInitialInfo.width !== resizeObj.width ||
+				this.resizeObjInitialInfo.height !== resizeObj.height) {
+			const commentSizingObjectsInfo = [];
+			commentSizingObjectsInfo[resizeObj.id] = {
+				width: resizeObj.width,
+				height: resizeObj.height,
+				x_pos: resizeObj.x_pos,
+				y_pos: resizeObj.y_pos
+			};
+
 			const data = {
-				editType: "editComment",
+				editType: "resizeObjects",
 				editSource: "canvas",
-				id: this.resizeObj.id,
-				content: this.resizeObj.content,
-				width: this.resizeObj.width,
-				height: this.resizeObj.height,
-				x_pos: this.resizeObj.x_pos,
-				y_pos: this.resizeObj.y_pos,
+				objectsInfo: commentSizingObjectsInfo,
+				detachedLinksInfo: {}, // Comments cannot have detached links
 				pipelineId: this.pipelineId
 			};
 			this.canvasController.editActionHandler(data);
@@ -6278,6 +6325,11 @@ export default class SVGCanvasRenderer {
 
 	buildLinksArray() {
 		let linksArray = [];
+
+		if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
+			this.updateLinksForNodes();
+		}
+
 		this.activePipeline.links.forEach((link) => {
 			let linkObj = null;
 
@@ -6331,7 +6383,7 @@ export default class SVGCanvasRenderer {
 				link.type === ASSOCIATION_LINK && this.config.enableAssocLinkType === ASSOC_RIGHT_SIDE_CURVE
 					? this.getAssocLinkVariation(srcObj, trgNode)
 					: null;
-			const coords = this.linkUtils.getLinkCoords(link.type, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation);
+			const coords = this.linkUtils.getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation);
 
 			link.assocLinkVariation = assocLinkVariation;
 			link.srcPortId = srcPortId;
@@ -6364,7 +6416,7 @@ export default class SVGCanvasRenderer {
 		} else {
 			if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
 				const endPos = { x: link.trgPos.x_pos, y: link.trgPos.y_pos };
-				const startPos = this.linkUtils.getNewStraightNodeLinkStartPos(srcObj, endPos);
+				const startPos = this.linkUtils.getNewStraightNodeLinkStartPos(srcObj, endPos, link.srcOriginInfo);
 				coords.x1 = startPos.x;
 				coords.y1 = startPos.y;
 
@@ -6385,7 +6437,7 @@ export default class SVGCanvasRenderer {
 		} else {
 			if (this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
 				const endPos = { x: link.srcPos.x_pos, y: link.srcPos.y_pos };
-				const startPos = this.linkUtils.getNewStraightNodeLinkStartPos(trgNode, endPos);
+				const startPos = this.linkUtils.getNewStraightNodeLinkStartPos(trgNode, endPos, link.trgOriginInfo);
 				coords.x2 = startPos.x;
 				coords.y2 = startPos.y;
 
@@ -6564,6 +6616,184 @@ export default class SVGCanvasRenderer {
 		});
 	}
 
+	// Updates the data links for all the nodes with two optional fields
+	// (called srcOriginInfo and trgOriginInfo) based on the location of the
+	// nodes the links go from and to. The info in these fields is used to
+	// calculate the starting and ending position of straight line links.
+	// This ensures that input and output links that go in a certain direction
+	// (NORTH, SOUTH, EAST or WEST) are grouped together so they can be
+	// separated out when straight lines are drawn between nodes.
+	updateLinksForNodes() {
+		this.activePipeline.nodes.forEach((n) => this.updateLinksForNode(n));
+	}
+
+	// Updates the links going into and out of the node passed in with up to
+	// two new fields (called srcOriginInfo and trgOriginInfo).
+	updateLinksForNode(node) {
+		const linksInfo = {};
+		linksInfo.n = [];
+		linksInfo.s = [];
+		linksInfo.e = [];
+		linksInfo.w = [];
+
+		// Update the linksInfo arrays for each direction: n, s, e and w.
+		this.activePipeline.links.forEach((link) => {
+			if (link.type === NODE_LINK) {
+				if (link.trgNode && link.trgNode.id === node.id) {
+					if (link.srcObj) {
+						const dir = this.getDirAdjusted(link.trgNode, link.srcObj);
+						linksInfo[dir].push({ type: "in", endNode: link.srcObj, link });
+
+					} else if (link.srcPos) {
+						const dir = this.getDirToEndPos(link.trgNode, link.srcPos.x_pos, link.srcPos.y_pos);
+						linksInfo[dir].push({ type: "in", x: link.srcPos.x_pos, y: link.srcPos.y_pos, link });
+					}
+
+				} else if (link.srcObj && link.srcObj.id === node.id) {
+					if (link.trgNode) {
+						const dir = this.getDirAdjusted(link.srcObj, link.trgNode);
+						linksInfo[dir].push({ type: "out", endNode: link.trgNode, link });
+
+					} else if (link.trgPos) {
+						const dir = this.getDirToEndPos(link.srcObj, link.trgPos.x_pos, link.trgPos.y_pos);
+						linksInfo[dir].push({ type: "out", x: link.trgPos.x_pos, y: link.trgPos.y_pos, link });
+					}
+				}
+			}
+		});
+
+		linksInfo.n = this.sortLinksInfo(linksInfo.n, NORTH);
+		linksInfo.s = this.sortLinksInfo(linksInfo.s, SOUTH);
+		linksInfo.e = this.sortLinksInfo(linksInfo.e, EAST);
+		linksInfo.w = this.sortLinksInfo(linksInfo.w, WEST);
+
+		this.updateLinksInfo(linksInfo.n, NORTH);
+		this.updateLinksInfo(linksInfo.s, SOUTH);
+		this.updateLinksInfo(linksInfo.e, EAST);
+		this.updateLinksInfo(linksInfo.w, WEST);
+	}
+
+	// Returns the direction of a link from the start node to the end node
+	// as either NORTH, SOUTH, EAST or WEST. Some direction combinations
+	// have to be overriden to prevent link lines overlapping.
+	getDirAdjusted(startNode, endNode) {
+		let dir = this.getDirToNode(startNode, endNode);
+
+		// When start -> end is SOUTH and end -> start is WEST the returned direction
+		// becomes EAST instead of SOUTH to prevent link lines overlapping.
+		if (dir === SOUTH) {
+			const dir2 = this.getDirToNode(endNode, startNode);
+			if (dir2 === WEST) {
+				dir = EAST;
+			}
+
+		// When start -> end is NORTH and end -> start is EAST the returned direction
+		// becomes WEST instead of NORTH to prevent link lines overlapping.
+		} else if (dir === NORTH) {
+			const dir2 = this.getDirToNode(endNode, startNode);
+			if (dir2 === EAST) {
+				dir = WEST;
+			}
+		}
+		return dir;
+	}
+
+	// Returns the direction (NORTH, SOUTH, EAST or WEST) from the start node
+	// to the end node.
+	getDirToNode(startNode, endNode) {
+		const endX = this.nodeUtils.getNodeCenterPosX(endNode);
+		const endY = this.nodeUtils.getNodeCenterPosY(endNode);
+		return this.getDirToEndPos(startNode, endX, endY);
+	}
+
+	// Returns the direction (NORTH, SOUTH, EAST or WEST) from the start node
+	// to the end position endX, endY.
+	getDirToEndPos(startNode, endX, endY) {
+		const originX = this.nodeUtils.getNodeCenterPosX(startNode);
+		const originY = this.nodeUtils.getNodeCenterPosY(startNode);
+
+		const x = startNode.x_pos;
+		const y = startNode.y_pos;
+		const w = startNode.width;
+		const h = startNode.height;
+
+		return CanvasUtils.getDir(x, y, w, h, originX, originY, endX, endY);
+	}
+
+	// Returns the linksDirArray passed in with the linkInfo objects in the
+	// array ordered by the position of the end of each link line, depending on
+	// the direction (dir) of the lines. This is achieved by spliting the links
+	// into groups where links in the same group go to/from the same node.
+	sortLinksInfo(linksDirArrayIn, dir) {
+		let linksDirArray = linksDirArrayIn;
+		if (linksDirArray.length > 1) {
+			const groups = this.getLinkInfoGroups(linksDirArray);
+
+			forOwn(groups, (group) => {
+				group.forEach((li, i) => {
+					const node = li.endNode;
+					const parts = group.length + 1;
+
+					if (dir === NORTH || dir === SOUTH) {
+						li.x = node.x_pos + ((node.width / parts) * (i + 1));
+						li.y = this.nodeUtils.getNodeCenterPosY(node);
+					} else {
+						li.x = this.nodeUtils.getNodeCenterPosX(node);
+						li.y = node.y_pos + ((node.height / parts) * (i + 1));
+					}
+				});
+			});
+
+			// For NORTH and SOUTH links we sort linksDirArray by the x co-ordinate
+			// of the end of each link. For EAST and WEST we sort by the y
+			// co-ordinate.
+			if (dir === NORTH || dir === SOUTH) {
+				linksDirArray = linksDirArray.sort((a, b) => (a.x > b.x ? 1 : -1));
+			} else {
+				linksDirArray = linksDirArray.sort((a, b) => (a.y > b.y ? 1 : -1));
+			}
+		}
+		return linksDirArray;
+	}
+
+	// Returns a 'groups' object where each field is index by a node ID and
+	// contains an array of linkInfo objects that go to/from the node.
+	getLinkInfoGroups(linksDirArray) {
+		const groups = {};
+		linksDirArray.forEach((li) => {
+			// Only create groups for attached links.
+			if (li.endNode) {
+				if (!groups[li.endNode.id]) {
+					groups[li.endNode.id] = [];
+				}
+				groups[li.endNode.id].push(li);
+			}
+		});
+		return groups;
+	}
+
+	// Updates the link objects referenced by the linkInfo objects in the
+	// linksDirArray with info to specify the link direction (n, s, e or w),
+	// plus the index and number of connections. This is used when
+	// drawing straight lines to/from nodes to spread out the lines.
+	updateLinksInfo(linksDirArray, dir) {
+		linksDirArray.forEach((li, i) => {
+			if (li.type === "out") {
+				li.link.srcOriginInfo = {
+					dir: dir,
+					idx: i,
+					len: linksDirArray.length
+				};
+			} else {
+				li.link.trgOriginInfo = {
+					dir: dir,
+					idx: i,
+					len: linksDirArray.length
+				};
+			}
+		});
+	}
+
 	// Returns a variation of association link to draw when a new link is being
 	// drawn outwards from a port. startX is the beginning point of the line
 	// at the port. endX is the position where the mouse is currently positioned.