Fixed review comments

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

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

@@ -23,7 +23,7 @@
 import { get, has, isNumber, set } from "lodash";
 import { ASSOCIATION_LINK, ASSOC_STRAIGHT, COMMENT_LINK, NODE_LINK,
 	LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST,
-	PORT_DISPLAY_IMAGE
+	PORT_DISPLAY_IMAGE, PORT_WIDTH_DEFAULT, PORT_HEIGHT_DEFAULT,
 } from "../common-canvas/constants/canvas-constants.js";
 
 export default class CanvasUtils {
@@ -1707,8 +1707,8 @@ export default class CanvasUtils {
 			newLayout.inputPortDisplayObjects = [
 				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.inputPortImage,
-					height: newLayout.inputPortHeight,
-					width: newLayout.inputPortWidth
+					height: newLayout.inputPortHeight || PORT_HEIGHT_DEFAULT,
+					width: newLayout.inputPortWidth || PORT_WIDTH_DEFAULT
 				}
 			];
 		}
@@ -1717,8 +1717,8 @@ export default class CanvasUtils {
 			newLayout.inputPortGuideObjects = [
 				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.inputPortGuideImage,
-					height: newLayout.inputPortHeight,
-					width: newLayout.inputPortWidth
+					height: newLayout.inputPortHeight || PORT_HEIGHT_DEFAULT,
+					width: newLayout.inputPortWidth || PORT_WIDTH_DEFAULT
 				}
 			];
 		}
@@ -1729,8 +1729,8 @@ export default class CanvasUtils {
 			newLayout.outputPortDisplayObjects = [
 				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.outputPortImage,
-					height: newLayout.outputPortHeight,
-					width: newLayout.outputPortWidth
+					height: newLayout.outputPortHeight || PORT_HEIGHT_DEFAULT,
+					width: newLayout.outputPortWidth || PORT_WIDTH_DEFAULT,
 				}
 			];
 		}
@@ -1739,8 +1739,8 @@ export default class CanvasUtils {
 			newLayout.outputPortGuideObjects = [
 				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.outputPortGuideImage,
-					height: newLayout.outputPortHeight,
-					width: newLayout.outputPortWidth
+					height: newLayout.outputPortHeight || PORT_HEIGHT_DEFAULT,
+					width: newLayout.outputPortWidth || PORT_WIDTH_DEFAULT
 				}
 			];
 		}

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

@@ -183,6 +183,11 @@ export const WEST = "w";
 export const CAUSE_MOUSE = "M";
 export const CAUSE_KEYBOARD = "K";
 
+// Defaults for port size incase width and height are not provided in
+// the inputPortDisplayObjects and outputPortDisplayObjects arrays.
+export const PORT_WIDTH_DEFAULT = 12;
+export const PORT_HEIGHT_DEFAULT = 12;
+
 // Context Menu button value
 export const CONTEXT_MENU_BUTTON = 2;
 

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

@@ -45,6 +45,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	NORTH, SOUTH, EAST, WEST,
 	WYSIWYG, CAUSE_KEYBOARD, CAUSE_MOUSE,
 	FLOW_IN, FLOW_OUT,
+	PORT_WIDTH_DEFAULT, PORT_HEIGHT_DEFAULT,
 	CANVAS_FOCUS
 } from "./constants/canvas-constants";
 import SUPERNODE_ICON from "../../assets/images/supernode.svg";
@@ -2032,10 +2033,10 @@ export default class SVGCanvasRenderer {
 				obj.attr("xlink:href", portInfo.src);
 			}
 			obj
-				.attr("x", cx - (portInfo.wd / 2))
-				.attr("y", cy - (portInfo.ht / 2))
-				.attr("width", portInfo.wd)
-				.attr("height", portInfo.ht)
+				.attr("x", cx - (portInfo.width / 2))
+				.attr("y", cy - (portInfo.height / 2))
+				.attr("width", portInfo.width)
+				.attr("height", portInfo.height)
 				.attr("transform", transform);
 
 		} else {
@@ -2049,15 +2050,11 @@ export default class SVGCanvasRenderer {
 	getPortDisplayInfo(displayObjects, i) {
 		const idx = (i < displayObjects.length) ? i : displayObjects.length - 1;
 		const portObj = displayObjects[idx];
-		const ty = portObj.type;
-		const tg = ty === "jsx" ? "foreignObject" : ty; // Translate the tag to 'foreignObject' if type is 'jsx'.
-		return {
-			type: ty,
-			tag: tg,
-			src: portObj.src,
-			ht: portObj.height,
-			wd: portObj.width
-		};
+		const obj = { ...portObj };
+		obj.tag = portObj.type === "jsx" ? "foreignObject" : portObj.type;
+		obj.width = obj.width || PORT_WIDTH_DEFAULT;
+		obj.width = obj.height || PORT_HEIGHT_DEFAULT;
+		return obj;
 	}
 
 	// Attaches the appropriate listeners to the node groups.

canvas_modules/common-canvas/src/common-canvas/svg-canvas-utils-drag-new-link.js

@@ -167,10 +167,6 @@ export default class SVGCanvasUtilsDragNewLink {
 		}
 	}
 
-	getPortIndex(portId, ports) {
-		return ports.findIndex((p) => p.id === portId);
-	}
-
 	drawNewLink(d3Event) {
 		if (this.ren.config.enableEditingActions === false || !this.drawingNewLinkData) {
 			return;
@@ -581,8 +577,8 @@ export default class SVGCanvasUtilsDragNewLink {
 					// 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.portGuideInfo?.wd / 2))
-					.attr("y", saveY1 - (saveNewLinkData.portGuideInfo?.ht / 2))
+					.attr("x", saveX1 - (saveNewLinkData.portGuideInfo?.width / 2))
+					.attr("y", saveY1 - (saveNewLinkData.portGuideInfo?.height / 2))
 					.attr("cx", saveX1)
 					.attr("cy", saveY1)
 					.attr("transform", null);
@@ -603,7 +599,7 @@ export default class SVGCanvasUtilsDragNewLink {
 			.each((x, i, foreignObjects) =>
 				this.ren.externalUtils.removeExternalObject(x, i, foreignObjects));
 
-		// Remove all the constituent part of the new link.
+		// Remove all the constituent parts of the new link.
 		this.ren.nodesLinksGrp.selectAll(".d3-new-connection-line").remove();
 		this.ren.nodesLinksGrp.selectAll(".d3-new-connection-start").remove();
 		this.ren.nodesLinksGrp.selectAll(".d3-new-connection-guide").remove();

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

@@ -233,7 +233,7 @@ const portsHorizontalDefaultLayout = {
 		// this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are
 		// offsets from the pos point on the node.
 		// The order of the elements corresponds to the order of ports in the
-		// outputs array for the node. If there are more input ports than elements
+		// outputs array for the node. If there are more output ports than elements
 		// in the array, the last element will be used for all remaining ports.
 		outputPortPositions: [
 			{ x_pos: 0, y_pos: 20, pos: "topRight" }
@@ -250,7 +250,7 @@ const portsHorizontalDefaultLayout = {
 		// { type: "jsx", src: (<FaceCool />), width: 16, height: 16 }
 		//
 		// The order of the elements corresponds to the order of ports in the
-		// inputs array for the node. If there are more input ports than elements
+		// outputs array for the node. If there are more output ports than elements
 		// in the array, the last element will be used for all remaining ports.
 		outputPortGuideObjects: [
 			{ type: "circle" }
@@ -691,7 +691,7 @@ const portsVerticalDefaultLayout = {
 		// this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are
 		// offsets from the pos point on the node.
 		// The order of the elements corresponds to the order of ports in the
-		// outputs array for the node. If there are more input ports than elements
+		// outputs array for the node. If there are more output ports than elements
 		// in the array, the last element will be used for all remaining ports.
 		outputPortPositions: [
 			{ x_pos: 0, y_pos: 29, pos: "topRight" }
@@ -708,7 +708,7 @@ const portsVerticalDefaultLayout = {
 		// { type: "jsx", src: (<FaceCool />), width: 16, height: 16 }
 		//
 		// The order of the elements corresponds to the order of ports in the
-		// inputs array for the node. If there are more input ports than elements
+		// outputs array for the node. If there are more output ports than elements
 		// in the array, the last element will be used for all remaining ports.
 		outputPortGuideObjects: [
 			{ type: "circle" }

canvas_modules/harness/src/client/components/custom-canvases/network/network-canvas.jsx

@@ -62,8 +62,7 @@ export default class NetworkCanvas extends React.Component {
 				outputPortDisplay: true,
 
 				outputPortGuideObject: "image",
-				outputPortGuideImage: "/images/custom-canvases/flows/decorations/dragStateArrow.svg",
-				outputPortGuideImageRotate: true
+				outputPortGuideImage: "/images/custom-canvases/flows/decorations/dragStateArrow.svg"
 			},
 			enableCanvasLayout: {
 				dataLinkArrowHead: "M 0 0 L -5 -2 -5 2 Z"

docs/pages/03.06.01-node-customization.md

@@ -229,7 +229,7 @@ The possible node layout properties are shown below with the values they have wh
     // this: { x_pos: 5, y_pos: 10, pos: "topRight" }. x_pos and y_pos are
     // offsets from the pos point on the node.
     // The order of the elements corresponds to the order of ports in the
-    // outputs array for the node. If there are more input ports than elements
+    // outputs array for the node. If there are more output ports than elements
     // in the array, the last element will be used for all remaining ports.
     outputPortPositions: [
         { x_pos: 0, y_pos: 20, pos: "topRight" }
@@ -246,7 +246,7 @@ The possible node layout properties are shown below with the values they have wh
     // { type: "jsx", src: (<FaceCool />), width: 16, height: 16 }
     //
     // The order of the elements corresponds to the order of ports in the
-    // inputs array for the node. If there are more input ports than elements
+    // outputs array for the node. If there are more output ports than elements
     // in the array, the last element will be used for all remaining ports.
     outputPortGuideObjects: [
         { type: "circle" }