#2033 Support new link line types (part 2) (#2042)

Signed-off-by: CTomlyn <[email protected]>

canvas_modules/common-canvas/src/common-canvas/constants/canvas-constants.js

@@ -42,8 +42,11 @@ export const LINK_TYPE_ELBOW = "Elbow";
 export const LINK_TYPE_STRAIGHT = "Straight";
 export const LINK_TYPE_PARALLAX = "Parallax";
 
+// Values for enableLinkMethod config parameter
+export const LINK_METHOD_PORTS = "Ports";
+export const LINK_METHOD_FREEFORM = "Freeform";
+
 // Values for enableLinkDirection config parameter
-export const LINK_DIR_FREEFORM = "Freeform";
 export const LINK_DIR_LEFT_RIGHT = "LeftRight";
 export const LINK_DIR_RIGHT_LEFT = "RightLeft";
 export const LINK_DIR_TOP_BOTTOM = "TopBottom";

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

@@ -33,7 +33,8 @@ 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_ELBOW, LINK_TYPE_STRAIGHT,
-	LINK_DIR_LEFT_RIGHT, LINK_DIR_RIGHT_LEFT, LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP, LINK_DIR_FREEFORM,
+	LINK_DIR_LEFT_RIGHT, LINK_DIR_RIGHT_LEFT, LINK_DIR_TOP_BOTTOM, LINK_DIR_BOTTOM_TOP,
+	LINK_METHOD_FREEFORM,
 	LINK_SELECTION_NONE, LINK_SELECTION_HANDLES, LINK_SELECTION_DETACHABLE,
 	CONTEXT_MENU_BUTTON, DEC_LINK, DEC_NODE, EDIT_ICON,
 	NODE_MENU_ICON, SUPER_NODE_EXPAND_ICON, PORT_OBJECT_IMAGE,
@@ -4514,7 +4515,7 @@ export default class SVGCanvasRenderer {
 
 		let linksArray = [];
 
-		if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM) {
+		if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) {
 			this.updateFreeformLinksForNodes();
 		}
 
@@ -4616,7 +4617,7 @@ export default class SVGCanvasRenderer {
 			coords.srcDir = this.getSrcDirForDetachedLink(link, coords.x1, coords.y1);
 
 		} else {
-			if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM) {
+			if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) {
 				const endPos = { x: link.trgPos.x_pos, y: link.trgPos.y_pos };
 				const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(srcObj, endPos, link.srcOriginInfo);
 				coords.x1 = startPos.x;
@@ -4646,7 +4647,7 @@ export default class SVGCanvasRenderer {
 			coords.trgDir = this.getTrgDirForDetachedLink(link, coords.x2, coords.y2);
 
 		} else {
-			if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM) {
+			if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) {
 				const endPos = { x: link.srcPos.x_pos, y: link.srcPos.y_pos };
 				const startPos = this.linkUtils.getNewFreeformNodeLinkStartPos(trgNode, endPos, link.trgOriginInfo);
 				coords.x2 = startPos.x;
@@ -5174,7 +5175,7 @@ export default class SVGCanvasRenderer {
 	getArrowHeadTransform(link) {
 		let angle = 0;
 
-		if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM) {
+		if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) {
 			angle = this.getAngleBasedForFreeformLink(link);
 
 		} else {

canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-links.js

@@ -21,7 +21,7 @@ import CanvasUtils from "./common-canvas-utils.js";
 import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, COMMENT_LINK, NODE_LINK,
 	ASSOC_VAR_CURVE_LEFT, ASSOC_VAR_CURVE_RIGHT, ASSOC_VAR_DOUBLE_BACK_LEFT, ASSOC_VAR_DOUBLE_BACK_RIGHT,
 	LINK_TYPE_ELBOW, LINK_TYPE_STRAIGHT, LINK_TYPE_PARALLAX,
-	LINK_DIR_FREEFORM,
+	LINK_METHOD_FREEFORM,
 	NORTH, SOUTH, EAST, WEST }
 	from "./constants/canvas-constants";
 
@@ -89,7 +89,7 @@ export default class SvgCanvasLinks {
 	getLinkCoords(link, srcObj, srcPortId, trgNode, trgPortId, assocLinkVariation) {
 		let coords = null;
 		if (link.type === NODE_LINK) {
-			if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM) {
+			if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM) {
 				coords = this.getNodeLinkCoordsForFreeform(srcObj, trgNode, link);
 			} else {
 				coords = this.getNodeLinkCoordsForPortsConnection(srcObj, srcPortId, trgNode, trgPortId);
@@ -434,7 +434,7 @@ export default class SvgCanvasLinks {
 		const minInitialLine = this.getMinInitialLine(link, drawingNewLinkMinInitialLine);
 
 		if (link.type === NODE_LINK) {
-			if (this.canvasLayout.linkDirection === LINK_DIR_FREEFORM &&
+			if (this.canvasLayout.linkMethod === LINK_METHOD_FREEFORM &&
 					this.canvasLayout.linkType === LINK_TYPE_STRAIGHT) {
 				return this.getStraightPath(link, minInitialLine);
 			}

canvas_modules/common-canvas/src/object-model/config-utils.js

@@ -54,6 +54,7 @@ export default class ConfigUtils {
 			enableNodeFormatType: "Horizontal",
 			enableLinkType: "Curve",
 			enableStraightLinksAsFreeform: false, // TODO - Remove in next major release.
+			enableLinkMethod: "Ports",
 			enableLinkDirection: "LeftRight",
 			enableLinkSelection: LINK_SELECTION_NONE,
 			enableLinkReplaceOnNewConnection: false,

canvas_modules/common-canvas/src/object-model/layout-dimensions.js

@@ -15,12 +15,18 @@
  */
 
 import { cloneDeep } from "lodash";
-import { LINK_DIR_FREEFORM, LINK_TYPE_STRAIGHT } from "../common-canvas/constants/canvas-constants";
+import {
+	LINK_METHOD_FREEFORM,
+	LINK_METHOD_PORTS,
+	LINK_TYPE_STRAIGHT,
+	LINK_DIR_LEFT_RIGHT
+} from "../common-canvas/constants/canvas-constants";
 
 const portsHorizontalDefaultLayout = {
 	nodeLayout: {
-		// Default node sizes. The height might be overridden for nodes with more ports
-		// than will fit in the default size.
+		// Default node sizes. These dimensions might be overridden for nodes that have
+		// more ports than will fit in the default size if inputPortAutoPosition is.
+		// set to true and outputPortAutoPosition is set to true. (See below).
 		defaultNodeWidth: 160,
 		defaultNodeHeight: 40,
 
@@ -126,7 +132,7 @@ const portsHorizontalDefaultLayout = {
 		nodeCornerResizeArea: 10,
 
 		// What point to draw the data links from and to when enableLinkType is set
-		// to "Straight" and enableLinkDirection is set to "Freeform".
+		// to "Straight" and enableLinkMethod is set to "Freeform".
 		// Possible values are "image_center" or "node_center".
 		drawNodeLinkLineFromTo: "node_center",
 
@@ -291,8 +297,12 @@ const portsHorizontalDefaultLayout = {
 		// ---------------------------------------------------------------------------
 		// Layout values for links
 		// ---------------------------------------------------------------------------
-		// Specifies which direction the nodes will be linked up
-		linkDirection: "LeftRight",
+		// Specifies which method the links will use. Either: "Ports" or "Freeform"
+		linkMethod: LINK_METHOD_PORTS,
+
+		// TODO - this should be changed to be a node layout property called 'portPlacement'
+		// in the next major release.
+		linkDirection: LINK_DIR_LEFT_RIGHT,
 
 		// Whether to display a link line when linked node/comments overlap. For
 		// straight links we don't want to show the link when objects overlap but
@@ -423,8 +433,9 @@ const portsHorizontalDefaultLayout = {
 
 const portsVerticalDefaultLayout = {
 	nodeLayout: {
-		// Default node sizes. The height might be overridden for nodes with more ports
-		// than will fit in the default size.
+		// Default node sizes. These dimensions might be overridden for nodes that have
+		// more ports than will fit in the default size if inputPortAutoPosition is.
+		// set to true and outputPortAutoPosition is set to true. (See below).
 		defaultNodeWidth: 70,
 		defaultNodeHeight: 75,
 
@@ -530,7 +541,7 @@ const portsVerticalDefaultLayout = {
 		nodeCornerResizeArea: 10,
 
 		// What point to draw the data links from and to when enableLinkType is set
-		// to "Straight" and enableLinkDirection is set to "Freeform".
+		// to "Straight" and enableLinkMethod is set to "Freeform".
 		// Possible values are "image_center" or "node_center".
 		drawNodeLinkLineFromTo: "node_center",
 
@@ -695,8 +706,13 @@ const portsVerticalDefaultLayout = {
 		// ---------------------------------------------------------------------------
 		// Layout values for links
 		// ---------------------------------------------------------------------------
-		// Specifies which direction the nodes will be linked up
-		linkDirection: "LeftRight",
+		// Specifies which method the links will use. Either: "Ports" or "Freeform"
+		linkMethod: LINK_METHOD_PORTS,
+
+		// Specifies the default placement of ports on a node.
+		// TODO - this should be changed to be a node layout property called 'portPlacement'
+		// in the next major release.
+		linkDirection: LINK_DIR_LEFT_RIGHT,
 
 		// Whether to display a link line when linked node/comments overlap. For
 		// straight links we don't want to show the link when objects overlap but
@@ -862,12 +878,14 @@ export default class LayoutDimensions {
 	static overrideCanvasLayout(layout, config, overlayLayout) {
 		// TODO - In a future major release the enableStraightLinksAsFreeform field should be
 		// removed and this ovverride code should be returned to its original behavior where
-		// config.enableLinkDirection should directly override linkDirection in the canvasLayout.
-		const linkDirection = (config.enableLinkType === "Straight" && config.enableStraightLinksAsFreeform)
-			? "Freeform"
-			: config.enableLinkDirection;
+		// config.enableLinkMethod should directly override linkMethod in the canvasLayout.
+		const linkMethod = (config.enableLinkType === "Straight" && config.enableStraightLinksAsFreeform)
+			? LINK_METHOD_FREEFORM
+			: config.enableLinkMethod;
+
+		const linkDirection = config.enableLinkDirection;
 
-		layout.canvasLayout = Object.assign({}, layout.canvasLayout, { linkDirection }, overlayLayout.canvasLayout || {});
+		layout.canvasLayout = Object.assign({}, layout.canvasLayout, { linkMethod, linkDirection }, overlayLayout.canvasLayout || {});
 
 		return layout;
 	}
@@ -963,10 +981,11 @@ export default class LayoutDimensions {
 
 	// Sets the default arrow head for node (data) links to true for freeform links.
 	// TODO -- the second part of this if should be removed when enableStraightLinksAsFreeform
-	// in the next major release.
+	// is removed in the next major release.
 	static overrideArrowHead(layout, config) {
-		if (config.enableLinkDirection === LINK_DIR_FREEFORM ||
-				(config.enableStraightLinksAsFreeform && config.enableLinkType === LINK_TYPE_STRAIGHT)) {
+		if ((config.enableLinkMethod === LINK_METHOD_FREEFORM ||
+				(config.enableStraightLinksAsFreeform && config.enableLinkType === LINK_TYPE_STRAIGHT)) &&
+				!layout.canvasLayout.dataLinkArrowHead) {
 			layout.canvasLayout.dataLinkArrowHead = true;
 		}
 		return layout;

canvas_modules/harness/cypress/e2e/canvas/links.cy.js

@@ -111,31 +111,31 @@ describe("Test basic link construction", function() {
 		cy.openCanvasDefinition("allTypesCanvas.json");
 	});
 
-	it("Test all 8 combinations of link type and link direction", function() {
+	it("Test all 8 combinations of link type and link method", function() {
 
 		// Test the 4 Ports (LeftRight) combinations
 
-		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkMethod": "Ports" });
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 159 128.5 C 228 128.5 228 167.5 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 159 128.5 L 179 128.5 Q 189 128.5 189 138.5 L 189 157.5 Q 189 167.5 199 167.5 L 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 159 128.5 L 189 128.5 L 267 167.5 L 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
@@ -144,28 +144,28 @@ describe("Test basic link construction", function() {
 
 		// Test the 4 Freeform combinations
 
-		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 166 137 C 228 137 228 176 290 176"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 166 137 L 186 137 Q 196 137 196 147 L 196 166 Q 196 176 206 176 L 290 176"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
 			"M 166 137 L 196 137 L 260 176 L 290 176"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Binding (entry) node", "outPort", "Execution node", "inPort",
@@ -175,7 +175,7 @@ describe("Test basic link construction", function() {
 
 	it("Test 8 cominations of creation and construction of self-referencing link", function() {
 
-		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkDirection": "LeftRight",
+		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkMethod": "Ports",
 			"selectedSelfRefLinks": true, "selectedLinkSelection": "LinkOnly" });
 
 		// Delete the two links connected to the Execution node
@@ -198,7 +198,7 @@ describe("Test basic link construction", function() {
 			"118.5 Q 267 118.5 267 143 Q 267 167.5 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
@@ -207,14 +207,14 @@ describe("Test basic link construction", function() {
 			"167.5 277 167.5 L 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
 			"M 367 167.5 L 397 167.5 L 397 118.5 L 267 118.5 L 267 167.5 L 297 167.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkDirection": "LeftRight" });
+		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkMethod": "Ports" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
@@ -223,28 +223,28 @@ describe("Test basic link construction", function() {
 
 		// Test the 4 Freeform combinations
 
-		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Curve", "selectedLinkMethod": "Freeform" });
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
 			"M 374 176 L 404 101.5 332  101.5 332 131.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Elbow", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
 			"M 374 176 L 394 176 Q 404 176 404 166 L 404 111.5 Q 404 101.5 394 101.5 " +
 			"L 342 101.5 Q 332 101.5 332 111.5 L 332 131.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Parallax", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",
 			"M 374 176 L 404 176 L 404 101.5 L 332 101.5 L 332 131.5"
 		);
 
-		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkDirection": "Freeform" });
+		cy.setCanvasConfig({ "selectedLinkType": "Straight", "selectedLinkMethod": "Freeform" });
 		cy.wait(10);
 		cy.verifyLinkPath(
 			"Execution node", "outPort", "Execution node", "inPort",