Refactor

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

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

@@ -149,7 +149,7 @@ export default class CanvasController {
 			correctConfig.enableNodeLayout =
 				CanvasUtils.convertPortPosInfo(correctConfig.enableNodeLayout);
 			correctConfig.enableNodeLayout =
-				CanvasUtils.convertPortObjectInfo(correctConfig.enableNodeLayout);
+				CanvasUtils.convertPortDisplayInfo(correctConfig.enableNodeLayout);
 			this.objectModel.openPaletteIfNecessary(config);
 			this.objectModel.setCanvasConfig(correctConfig);
 		}

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

@@ -22,7 +22,8 @@
 
 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 }
+	LINK_TYPE_STRAIGHT, SUPER_NODE, NORTH, SOUTH, EAST, WEST,
+	PORT_DISPLAY_IMAGE}
 	from "../common-canvas/constants/canvas-constants.js";
 
 export default class CanvasUtils {
@@ -1693,28 +1694,28 @@ export default class CanvasUtils {
 
 	// Convert now deprecated layout fields to the port objects arrays.
 	// TODO - Remove this in a future major release.
-	static convertPortObjectInfo(layout) {
+	static convertPortDisplayInfo(layout) {
 		const newLayout = layout;
 
 		if (!layout) {
 			return newLayout;
 		}
 
 		// If custom fields exist for input object info, write the values into the
-		// inputPortObjects array.
-		if (newLayout.inputPortObject === "image") {
-			newLayout.inputPortObjects = [
-				{ type: "image",
+		// inputPortDisplayObjects array.
+		if (newLayout.inputPortObject === PORT_DISPLAY_IMAGE) {
+			newLayout.inputPortDisplayObjects = [
+				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.inputPortImage,
 					height: newLayout.inputPortHeight,
 					width: newLayout.inputPortWidth
 				}
 			];
 		}
 
-		if (newLayout.inputPortGuideObject === "image") {
+		if (newLayout.inputPortGuideObject === PORT_DISPLAY_IMAGE) {
 			newLayout.inputPortGuideObjects = [
-				{ type: "image",
+				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.inputPortGuideImage,
 					height: newLayout.inputPortHeight,
 					width: newLayout.inputPortWidth
@@ -1723,20 +1724,20 @@ export default class CanvasUtils {
 		}
 
 		// If custom fields exist for output object info, write the values into the
-		// outputPortObjects array.
-		if (newLayout.outputPortObject === "image") {
-			newLayout.outputPortObjects = [
-				{ type: "image",
+		// outputPortDisplayObjects array.
+		if (newLayout.outputPortObject === PORT_DISPLAY_IMAGE) {
+			newLayout.outputPortDisplayObjects = [
+				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.outputPortImage,
 					height: newLayout.outputPortHeight,
 					width: newLayout.outputPortWidth
 				}
 			];
 		}
 
-		if (newLayout.outputPortGuideObject === "image") {
+		if (newLayout.outputPortGuideObject === PORT_DISPLAY_IMAGE) {
 			newLayout.outputPortGuideObjects = [
-				{ type: "image",
+				{ type: PORT_DISPLAY_IMAGE,
 					src: newLayout.outputPortGuideImage,
 					height: newLayout.outputPortHeight,
 					width: newLayout.outputPortWidth

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

@@ -108,9 +108,9 @@ export const SUCCESS = "success";
 export const HORIZONTAL = "horizonal";
 export const VERTICAL = "vertical";
 
-export const PORT_OBJECT_CIRCLE = "circle";
-export const PORT_OBJECT_IMAGE = "image";
-export const PORT_OBJECT_JSX = "jsx";
+export const PORT_DISPLAY_CIRCLE = "circle";
+export const PORT_DISPLAY_IMAGE = "image";
+export const PORT_DISPLAY_JSX = "jsx";
 
 export const FLOW_IN = "in";
 export const FLOW_OUT = "out";

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

@@ -38,7 +38,7 @@ import { ASSOC_RIGHT_SIDE_CURVE, ASSOCIATION_LINK, NODE_LINK, COMMENT_LINK,
 	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_CIRCLE, PORT_OBJECT_IMAGE, PORT_OBJECT_JSX,
+	PORT_DISPLAY_CIRCLE, PORT_DISPLAY_IMAGE, PORT_DISPLAY_JSX,
 	TIP_TYPE_NODE, TIP_TYPE_PORT, TIP_TYPE_DEC, TIP_TYPE_LINK,
 	USE_DEFAULT_ICON, USE_DEFAULT_EXT_ICON,
 	SUPER_NODE, SNAP_TO_GRID_AFTER, SNAP_TO_GRID_DURING,
@@ -1896,19 +1896,19 @@ export default class SVGCanvasRenderer {
 			.attr("data-port-id", (port) => port.id)
 			.attr("isSupernodeBinding", CanvasUtils.isSuperBindingNode(node) ? "yes" : "no")
 			.each((port, i, inputPorts) => {
-				const portInfo = this.getPortInfo(node.layout.inputPortObjects, i);
+				const portDisplayInfo = this.getPortDisplayInfo(node.layout.inputPortDisplayObjects, i);
 				const obj = d3.select(inputPorts[i]);
 				obj
-					.append(portInfo.tag)
+					.append(portDisplayInfo.tag)
 					.attr("class", "d3-node-port-input-main" +
-						(portInfo.tag === "foreignObject" ? " d3-foreign-object-port-jsx" : ""));
+						(portDisplayInfo.tag === "foreignObject" ? " d3-foreign-object-port-jsx" : ""));
 
 				// Show a port arrow inside the port circle if:
 				// We are not supporting association link creation,
 				// and we are drawing a circle and this is not a super binding node.
 				obj
 					.filter(() => (!this.config.enableAssocLinkCreation &&
-						portInfo.type === PORT_OBJECT_CIRCLE &&
+						portDisplayInfo.type === PORT_DISPLAY_CIRCLE &&
 						!CanvasUtils.isSuperBindingNode(node)))
 					.append("path")
 					.attr("class", "d3-node-port-input-arrow");
@@ -1924,9 +1924,9 @@ export default class SVGCanvasRenderer {
 			.each((port, i, inputPorts) => {
 				const obj = d3.select(inputPorts[i]);
 				const portIdx = CanvasUtils.getPortIndex(node.inputs, port.id);
-				const portInfo = this.getPortInfo(node.layout.inputPortObjects, portIdx);
+				const portDisplayInfo = this.getPortDisplayInfo(node.layout.inputPortDisplayObjects, portIdx);
 				const transform = this.getPortImageTransform(port, FLOW_IN);
-				this.updatePort(obj, portInfo, node, port.cx, port.cy, transform);
+				this.updatePort(obj, portDisplayInfo, node, port.cx, port.cy, transform);
 			});
 
 		joinedInputPortGrps.selectChildren(".d3-node-port-input-arrow")
@@ -1992,7 +1992,7 @@ export default class SVGCanvasRenderer {
 			.attr("data-port-id", (port) => port.id)
 			.attr("isSupernodeBinding", CanvasUtils.isSuperBindingNode(node) ? "yes" : "no")
 			.each((port, i, outputPorts) => {
-				const portInfo = this.getPortInfo(node.layout.outputPortObjects, i);
+				const portInfo = this.getPortDisplayInfo(node.layout.outputPortDisplayObjects, i);
 				const obj = d3.select(outputPorts[i]);
 				obj
 					.append(portInfo.tag)
@@ -2010,7 +2010,7 @@ export default class SVGCanvasRenderer {
 			.each((port, i, outputPorts) => {
 				const obj = d3.select(outputPorts[i]);
 				const portIdx = CanvasUtils.getPortIndex(node.outputs, port.id);
-				const portInfo = this.getPortInfo(node.layout.outputPortObjects, portIdx);
+				const portInfo = this.getPortDisplayInfo(node.layout.outputPortDisplayObjects, portIdx);
 				const transform = this.getPortImageTransform(port, FLOW_OUT);
 				this.updatePort(obj, portInfo, node, port.cx, port.cy, transform);
 			});
@@ -2024,8 +2024,8 @@ export default class SVGCanvasRenderer {
 	}
 
 	updatePort(obj, portInfo, node, cx, cy, transform) {
-		if (portInfo.type === PORT_OBJECT_JSX || portInfo.type === PORT_OBJECT_IMAGE) {
-			if (portInfo.type === PORT_OBJECT_JSX) {
+		if (portInfo.type === PORT_DISPLAY_JSX || portInfo.type === PORT_DISPLAY_IMAGE) {
+			if (portInfo.type === PORT_DISPLAY_JSX) {
 				obj
 					.each((portData, idx, exts) => this.externalUtils.addJsxExternalObject(portInfo.src, idx, exts));
 			} else {
@@ -2046,9 +2046,9 @@ export default class SVGCanvasRenderer {
 		}
 	}
 
-	getPortInfo(portObjects, i) {
-		const idx = (i < portObjects.length) ? i : portObjects.length - 1;
-		const portObj = portObjects[idx];
+	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 {
@@ -4229,7 +4229,7 @@ export default class SVGCanvasRenderer {
 		const commentGrp = d3.select(commentObj);
 
 		const commentPort = commentGrp
-			.append(PORT_OBJECT_CIRCLE)
+			.append(PORT_DISPLAY_CIRCLE)
 			.attr("cx", (com) => com.width / 2)
 			.attr("cy", (com) => com.height + this.canvasLayout.commentHighlightGap)
 			.attr("r", this.canvasLayout.commentPortRadius)
@@ -4701,15 +4701,15 @@ export default class SVGCanvasRenderer {
 			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
 				const obj = d3.select(linkHandles[index]);
-				if (this.canvasLayout.linkStartHandleObject === PORT_OBJECT_IMAGE) {
+				if (this.canvasLayout.linkStartHandleObject === PORT_DISPLAY_IMAGE) {
 					obj
 						.attr("xlink:href", this.canvasLayout.linkStartHandleImage)
 						.attr("x", (d) => d.x1 - (this.canvasLayout.linkStartHandleWidth / 2))
 						.attr("y", (d) => d.y1 - (this.canvasLayout.linkStartHandleHeight / 2))
 						.attr("width", this.canvasLayout.linkStartHandleWidth)
 						.attr("height", this.canvasLayout.linkStartHandleHeight);
 
-				} else if (this.canvasLayout.linkStartHandleObject === PORT_OBJECT_CIRCLE) {
+				} else if (this.canvasLayout.linkStartHandleObject === PORT_DISPLAY_CIRCLE) {
 					obj
 						.attr("r", this.canvasLayout.linkStartHandleRadius)
 						.attr("cx", (d) => d.x1)
@@ -4730,7 +4730,7 @@ export default class SVGCanvasRenderer {
 			.datum((d) => this.activePipeline.getLink(d.id))
 			.each((datum, index, linkHandles) => {
 				const obj = d3.select(linkHandles[index]);
-				if (this.canvasLayout.linkEndHandleObject === PORT_OBJECT_IMAGE) {
+				if (this.canvasLayout.linkEndHandleObject === PORT_DISPLAY_IMAGE) {
 					obj
 						.attr("xlink:href", this.canvasLayout.linkEndHandleImage)
 						.attr("x", (d) => d.x2 - (this.canvasLayout.linkEndHandleWidth / 2))
@@ -4739,7 +4739,7 @@ export default class SVGCanvasRenderer {
 						.attr("height", this.canvasLayout.linkEndHandleHeight)
 						.attr("transform", (d) => this.getLinkImageTransform(d));
 
-				} else if (this.canvasLayout.linkEndHandleObject === PORT_OBJECT_CIRCLE) {
+				} else if (this.canvasLayout.linkEndHandleObject === PORT_DISPLAY_CIRCLE) {
 					obj
 						.attr("r", this.canvasLayout.linkEndHandleRadius)
 						.attr("cx", (d) => d.x2)

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

@@ -26,7 +26,7 @@ import CanvasUtils from "./common-canvas-utils.js";
 import { ASSOCIATION_LINK, COMMENT_LINK, NODE_LINK,
 	LINK_TYPE_CURVE, LINK_TYPE_STRAIGHT, LINK_SELECTION_DETACHABLE,
 	FLOW_IN, FLOW_OUT,
-	PORT_OBJECT_CIRCLE,
+	PORT_DISPLAY_CIRCLE,
 	LINK_METHOD_PORTS }
 	from "./constants/canvas-constants.js";
 
@@ -135,8 +135,8 @@ export default class SVGCanvasUtilsDragNewLink {
 				action: this.ren.config.enableAssocLinkCreation ? ASSOCIATION_LINK : NODE_LINK,
 				startPos: { x: srcNode.x_pos + port.cx, y: srcNode.y_pos + port.cy },
 				portFlow: FLOW_IN,
-				portInfo: this.ren.getPortInfo(srcNode.layout.inputPortObjects, portIndex),
-				guideInfo: this.ren.getPortInfo(srcNode.layout.inputPortGuideObjects, portIndex),
+				portDisplayInfo: this.ren.getPortDisplayInfo(srcNode.layout.inputPortDisplayObjects, portIndex),
+				portGuideInfo: this.ren.getPortDisplayInfo(srcNode.layout.inputPortGuideObjects, portIndex),
 				portRadius: this.ren.getPortRadius(srcNode),
 				minInitialLine: srcNode.layout.minInitialLine,
 				linkArray: []
@@ -155,8 +155,8 @@ export default class SVGCanvasUtilsDragNewLink {
 				action: this.ren.config.enableAssocLinkCreation ? ASSOCIATION_LINK : NODE_LINK,
 				startPos: { x: srcNode.x_pos + port.cx, y: srcNode.y_pos + port.cy },
 				portFlow: FLOW_OUT,
-				portInfo: this.ren.getPortInfo(srcNode.layout.outputPortObjects, portIndex),
-				guideInfo: this.ren.getPortInfo(srcNode.layout.outputPortGuideObjects, portIndex),
+				portDisplayInfo: this.ren.getPortDisplayInfo(srcNode.layout.outputPortDisplayObjects, portIndex),
+				portGuideInfo: this.ren.getPortDisplayInfo(srcNode.layout.outputPortGuideObjects, portIndex),
 				portRadius: this.ren.getPortRadius(srcNode),
 				minInitialLine: srcNode.layout.minInitialLine,
 				linkArray: []
@@ -299,7 +299,7 @@ export default class SVGCanvasUtilsDragNewLink {
 		// we draw a circle at the start of the link to cover over the actual
 		// link line that is drawn from the port's center.
 		if (this.ren.canvasLayout.linkMethod === LINK_METHOD_PORTS &&
-			this.drawingNewLinkData.portInfo.type === PORT_OBJECT_CIRCLE) {
+			this.drawingNewLinkData.portDisplayInfo.type === PORT_DISPLAY_CIRCLE) {
 			connectionStartSel
 				.data(this.drawingNewLinkData.linkArray)
 				.enter()
@@ -320,15 +320,15 @@ export default class SVGCanvasUtilsDragNewLink {
 		connectionGuideSel
 			.data(this.drawingNewLinkData.linkArray)
 			.enter()
-			.append(this.drawingNewLinkData.guideInfo.tag)
+			.append(this.drawingNewLinkData.portGuideInfo.tag)
 			.attr("class", "d3-new-connection-guide")
 			.attr("linkType", linkCategory)
 			.merge(connectionGuideSel)
 			.each((d, i, guideSel) => {
 				const obj = d3.select(guideSel[i]);
 				const transform = this.ren.getLinkImageTransform(d);
 				this.ren.updatePort(obj,
-					this.drawingNewLinkData.guideInfo,
+					this.drawingNewLinkData.portGuideInfo,
 					this.drawingNewLinkData.srcObj,
 					d.x2,
 					d.y2,
@@ -581,8 +581,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.guideInfo?.wd / 2))
-					.attr("y", saveY1 - (saveNewLinkData.guideInfo?.ht / 2))
+					.attr("x", saveX1 - (saveNewLinkData.portGuideInfo?.wd / 2))
+					.attr("y", saveY1 - (saveNewLinkData.portGuideInfo?.ht / 2))
 					.attr("cx", saveX1)
 					.attr("cy", saveY1)
 					.attr("transform", null);

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

@@ -26,7 +26,7 @@ import {
 const portsHorizontalDefaultLayout = {
 	nodeLayout: {
 		// Default node sizes. These dimensions might be overridden for nodes that have
-		// more ports than will fit in the default size if inputPortAutoPosition is.
+		// 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,
@@ -38,7 +38,7 @@ const portsHorizontalDefaultLayout = {
 		// Displays the node outline shape underneath the image and label.
 		nodeShapeDisplay: true,
 
-		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeOutlineDisplay is true.
+		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeShapeDisplay is true.
 		nodeShape: "port-arcs",
 
 		// An SVG path or a function that returns an SVG path. The paths define the node
@@ -169,7 +169,7 @@ const portsHorizontalDefaultLayout = {
 		// 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
 		// in the array, the last element will be used for all remaining ports.
-		inputPortObjects: [
+		inputPortDisplayObjects: [
 			{ type: "circle" }
 		],
 
@@ -220,7 +220,7 @@ const portsHorizontalDefaultLayout = {
 		// The order of the elements corresponds to the order of ports in the
 		// 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.
-		outputPortObjects: [
+		outputPortDisplayObjects: [
 			{ type: "circle" }
 		],
 
@@ -239,7 +239,7 @@ const portsHorizontalDefaultLayout = {
 			{ x_pos: 0, y_pos: 20, pos: "topRight" }
 		],
 
-		// An array of elements to control display of input port guide objects.
+		// An array of elements to control display of output port guide objects.
 		// That is the object drawn at the end of a new link as it is being dragged.
 		// Each element can have a number of different structures like this:
 		// Either
@@ -484,7 +484,7 @@ const portsHorizontalDefaultLayout = {
 const portsVerticalDefaultLayout = {
 	nodeLayout: {
 		// Default node sizes. These dimensions might be overridden for nodes that have
-		// more ports than will fit in the default size if inputPortAutoPosition is.
+		// 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,
@@ -496,7 +496,7 @@ const portsVerticalDefaultLayout = {
 		// Displays the node outline shape underneath the image and label.
 		nodeShapeDisplay: true,
 
-		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeOutlineDisplay is true.
+		// Default node shape. Can be "rectangle" or "port-arcs". Used when nodeShapeDisplay is true.
 		nodeShape: "rectangle",
 
 		// An SVG path or a function that returns an SVG path. The paths define the node
@@ -627,7 +627,7 @@ const portsVerticalDefaultLayout = {
 		// 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
 		// in the array, the last element will be used for all remaining ports.
-		inputPortObjects: [
+		inputPortDisplayObjects: [
 			{ type: "circle" }
 		],
 
@@ -678,7 +678,7 @@ const portsVerticalDefaultLayout = {
 		// The order of the elements corresponds to the order of ports in the
 		// 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.
-		outputPortObjects: [
+		outputPortDisplayObjects: [
 			{ type: "circle" }
 		],
 
@@ -697,7 +697,7 @@ const portsVerticalDefaultLayout = {
 			{ x_pos: 0, y_pos: 29, pos: "topRight" }
 		],
 
-		// An array of elements to control display of input port guide objects.
+		// An array of elements to control display of output port guide objects.
 		// That is the object drawn at the end of a new link as it is being dragged.
 		// Each element can have a number of different structures like this:
 		// Either

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

@@ -147,7 +147,7 @@ function setNodeLayoutAttributes(node, nodeLayout, layoutHandler) {
 			// TODO - This should be removed in a future major release.
 			// This method converts now deprecated port object variables from customLayout
 			// to the new port object info arrays for input and output ports.
-			customLayout = CanvasUtils.convertPortObjectInfo(customLayout);
+			customLayout = CanvasUtils.convertPortDisplayInfo(customLayout);
 
 			const decs = CanvasUtils.getCombinedDecorations(node.layout.decorations, customLayout.decorations);
 			node.layout = Object.assign({}, node.layout, customLayout, { decorations: decs });