@elyra/canvas 12.43.0 → 12.45.0

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

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -245,34 +245,29 @@ export default class SvgCanvasLinks {
 	}
 
 	getNodeLinkCoordsForPorts(srcNode, srcPortId, trgNode, trgPortId) {
-		let srcX = srcNode.width + srcNode.layout.outputPortRightPosX;
-		let srcY = srcNode.layout.outputPortRightPosY;
-		let trgX = trgNode.layout.inputPortLeftPosX;
-		let trgY = trgNode.layout.inputPortLeftPosY;
-
-		if (this.canvasLayout.linkDirection === LINK_DIR_TOP_BOTTOM) {
-			srcX = srcNode.layout.outputPortBottomPosX;
-			srcY = srcNode.height + srcNode.layout.outputPortBottomPosY;
-			trgX = trgNode.layout.inputPortTopPosX;
-			trgY = trgNode.layout.inputPortTopPosY;
-
-		} else if (this.canvasLayout.linkDirection === LINK_DIR_BOTTOM_TOP) {
-			srcX = srcNode.layout.outputPortBottomPosX;
-			srcY = srcNode.layout.outputPortBottomPosY;
-			trgX = trgNode.layout.inputPortTopPosX;
-			trgY = trgNode.height + trgNode.layout.inputPortTopPosY;
-		}
+		let srcX;
+		let srcY;
+		let trgX;
+		let trgY;
 
 		if (srcNode.outputs && srcNode.outputs.length > 0) {
 			const port = srcNode.outputs.find((srcPort) => srcPort.id === srcPortId);
 			srcX = port ? port.cx : srcX;
 			srcY = port ? port.cy : srcY;
+
+		} else {
+			srcX = this.nodeUtils.getNodePortPosX(srcNode.layout.outputPortPositions[0], srcNode);
+			srcY = this.nodeUtils.getNodePortPosY(srcNode.layout.outputPortPositions[0], srcNode);
 		}
 
 		if (trgNode.inputs && trgNode.inputs.length > 0) {
 			const port = trgNode.inputs.find((trgPort) => trgPort.id === trgPortId);
 			trgX = port ? port.cx : trgX;
 			trgY = port ? port.cy : trgY;
+
+		} else {
+			trgX = this.nodeUtils.getNodePortPosX(trgNode.layout.inputPortPositions[0], trgNode);
+			trgY = this.nodeUtils.getNodePortPosY(trgNode.layout.inputPortPositions[0], trgNode);
 		}
 
 		return {
@@ -284,31 +279,32 @@ export default class SvgCanvasLinks {
 	}
 
 	getAssociationCurveLinkCoords(srcNode, trgNode, assocLinkVariation) {
-		let x1 = 0;
-		let x2 = 0;
+		let srcX = 0;
+		let trgX = 0;
 
 		if (assocLinkVariation === ASSOC_VAR_CURVE_RIGHT) {
-			x1 = srcNode.x_pos + srcNode.width;
-			x2 = trgNode.x_pos;
+			srcX = srcNode.width;
+			trgX = 0;
 
 		} else if (assocLinkVariation === ASSOC_VAR_CURVE_LEFT) {
-			x1 = srcNode.x_pos;
-			x2 = trgNode.x_pos + trgNode.width;
+			srcX = 0;
+			trgX = trgNode.width;
 
 		} else if (assocLinkVariation === ASSOC_VAR_DOUBLE_BACK_LEFT) {
-			x1 = srcNode.x_pos;
-			x2 = trgNode.x_pos;
+			srcX = 0;
+			trgX = 0;
 
 		} else {
-			x1 = srcNode.x_pos + srcNode.width;
-			x2 = trgNode.x_pos + trgNode.width;
+			srcX = srcNode.width;
+			trgX = trgNode.width;
 		}
 
 		return {
-			x1: x1,
-			y1: srcNode.y_pos + srcNode.layout.outputPortRightPosY,
-			x2: x2,
-			y2: trgNode.y_pos + trgNode.layout.inputPortLeftPosY };
+			x1: srcNode.x_pos + srcX,
+			y1: srcNode.y_pos + this.nodeUtils.getNodePortPosY(srcNode.layout.outputPortPositions[0], srcNode),
+			x2: trgNode.x_pos + trgX,
+			y2: trgNode.y_pos + this.nodeUtils.getNodePortPosY(trgNode.layout.inputPortPositions[0], trgNode)
+		};
 	}
 
 	getCommentLinkCoords(srcComment, trgNode) {

package/src/common-canvas/svg-canvas-utils-nodes.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -339,20 +339,12 @@ export default class SvgCanvasNodes {
 		return node.layout.errorHeight;
 	}
 
-	getNodeInputPortLeftPosX(node) {
-		return this.getElementPosX(node.width, node.layout.inputPortLeftPosX, node.layout.inputPortLeftPosition);
+	getNodePortPosX(posInfo, node) {
+		return this.getElementPosX(node.width, posInfo.x_pos, posInfo.pos);
 	}
 
-	getNodeInputPortLeftPosY(node) {
-		return this.getElementPosY(node.height, node.layout.inputPortLeftPosY, node.layout.inputPortLeftPosition);
-	}
-
-	getNodeOutputPortRightPosX(node) {
-		return this.getElementPosX(node.width, node.layout.outputPortRightPosX, node.layout.outputPortRightPosition);
-	}
-
-	getNodeOutputPortRightPosY(node) {
-		return this.getElementPosY(node.height, node.layout.outputPortRightPosY, node.layout.outputPortRightPosition);
+	getNodePortPosY(posInfo, node) {
+		return this.getElementPosY(node.height, posInfo.y_pos, posInfo.pos);
 	}
 
 	getElementPosX(width, xOffset = 0, position = "topLeft") {

package/src/common-canvas/svg-canvas-utils-zoom.js

@@ -132,10 +132,11 @@ export default class SVGCanvasUtilsZoom {
 		this.zoomTransform = d3.zoomIdentity.translate(0, 0).scale(1);
 	}
 
-	// Zooms the canvas to the extent specified in the zoom object.
-	zoomTo(zoomObject) {
-		const animateTime = 500;
-		this.zoomCanvasInvokeZoomBehavior(zoomObject, animateTime);
+	// Zooms the canvas to the extent specified in the zoom object. Animate
+	// the zoom by the time specified (in milliseconds) or by 500ms by default.
+	zoomTo(zoomObject, animateTime) {
+		const at = typeof animateTime === "undefined" ? 500 : animateTime;
+		this.zoomCanvasInvokeZoomBehavior(zoomObject, at);
 	}
 
 	// Pans the canvas by the x and y amount specified in the time specified.

package/src/icons/icon.scss

@@ -51,5 +51,5 @@ svg.canvas-state-icon-info {
 }
 
 svg.canvas-state-icon-information-hollow {
-	fill: $icon-01;
+	fill: $icon-02;
 }

package/src/object-model/config-utils.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ import { isMatch, isMatchWith, omit } from "lodash";
 import LayoutDimensions from "./layout-dimensions.js";
 import { ASSOC_STRAIGHT, LINK_SELECTION_NONE } from "../common-canvas/constants/canvas-constants";
 
-export default class CanvasUtils {
+export default class ConfigUtils {
 
 	// Returns a config object which is the result of merging config into
 	// startConfig.

package/src/object-model/layout-dimensions.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-2023 Elyra Authors
+ * Copyright 2017-2024 Elyra Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { cloneDeep } from "lodash";
+
 const portsHorizontalDefaultLayout = {
 	nodeLayout: {
 		// Default node sizes. The height might be overridden for nodes with more ports
@@ -154,26 +156,19 @@ const portsHorizontalDefaultLayout = {
 		inputPortWidth: 12,
 		inputPortHeight: 12,
 
-		// Position of left single input port. Multiple input ports will be
-		// automatically positioned with the Y coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "LeftRight".
-		inputPortLeftPosX: 0,
-		inputPortLeftPosY: 20,
-
-		// Position of top single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "TopBottom".
-		inputPortTopPosX: 80,
-		inputPortTopPosY: 0,
-
-		// Position of bottom single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the bottom left corner of the node outline.
-		// Used when linkDirection is "BottomTop".
-		inputPortBottomPosX: 80,
-		inputPortBottomPosY: 0,
+		// Indicates whether multiple input ports should be automatically
+		// positioned (true) or positioned based on the contents of
+		// inputPortPositions array (false).
+		inputPortAutoPosition: true,
+
+		// An array of input port positions. Each element is structured like
+		// this: { x_pos: 5, y_pos: 10, pos: "topLeft" }. 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
+		// inputs array for the node.
+		inputPortPositions: [
+			{ x_pos: 0, y_pos: 20, pos: "topLeft" }
+		],
 
 		// The 'guide' is the object drawn at the mouse position as a new line
 		// is being dragged outwards.
@@ -196,27 +191,19 @@ const portsHorizontalDefaultLayout = {
 		outputPortWidth: 12,
 		outputPortHeight: 12,
 
-		// Position of right single output port. Multiple input ports will be
-		// automatically positioned with the Y coordinate being overriden. These
-		// values are an offset from the top right corner of the node outline.
-		// Used when linkDirection is "LeftRight".
-		outputPortRightPosition: "topRight",
-		outputPortRightPosX: 0,
-		outputPortRightPosY: 20,
-
-		// Position of top single output port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "BottomTop".
-		outputPortTopPosX: 80,
-		outputPortTopPosY: 0,
-
-		// Position of bottom single output port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the bottom left corner of the node outline.
-		// Used when linkDirection is "TopBottom".
-		outputPortBottomPosX: 80,
-		outputPortBottomPosY: 0,
+		// Indicates whether multiple output ports should be automatically
+		// positioned (true) or positioned based on the contents of
+		// outputPortPositions array (false).
+		outputPortAutoPosition: true,
+
+		// An array of output port positions. Each element is structured like
+		// 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.
+		outputPortPositions: [
+			{ x_pos: 0, y_pos: 20, pos: "topRight" }
+		],
 
 		// The 'guide' is the object drawn at the mouse position as a new line
 		// is being dragged outwards.
@@ -412,7 +399,7 @@ const portsHorizontalDefaultLayout = {
 		// to switch the data-new-link-over attribute to "yes".
 		nodeProximity: 20,
 
-		// Adds additional area around the ghost areaa dragged from the palette
+		// Adds additional area around the ghost area dragged from the palette
 		// which can increase the possibility of detecting detached links.
 		ghostAreaPadding: 10,
 
@@ -569,26 +556,19 @@ const portsVerticalDefaultLayout = {
 		inputPortWidth: 12,
 		inputPortHeight: 12,
 
-		// Position of left single input port. Multiple input ports will be
-		// automatically positioned with the Y coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "LeftRight".
-		inputPortLeftPosX: 0,
-		inputPortLeftPosY: 29,
-
-		// Position of top single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "TopBottom".
-		inputPortTopPosX: 35,
-		inputPortTopPosY: 0,
-
-		// Position of bottom single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the bottom left corner of the node outline.
-		// Used when linkDirection is "BottomTop".
-		inputPortBottomPosX: 35,
-		inputPortBottomPosY: 0,
+		// Indicates whether multiple input ports should be automatically
+		// positioned (true) or positioned based on the contents of
+		// inputPortPositions array (false).
+		inputPortAutoPosition: true,
+
+		// An array of input port positions. Each element is structured like
+		// this: { x_pos: 5, y_pos: 10, pos: "topLeft" }. 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
+		// inputs array for the node.
+		inputPortPositions: [
+			{ x_pos: 0, y_pos: 29, pos: "topLeft" }
+		],
 
 		// The 'guide' is the object drawn at the mouse position as a new line
 		// is being dragged outwards.
@@ -611,27 +591,19 @@ const portsVerticalDefaultLayout = {
 		outputPortWidth: 12,
 		outputPortHeight: 12,
 
-		// Position of right single input port. Multiple input ports will be
-		// automatically positioned with the Y coordinate being overriden. These
-		// values are an offset from the top right corner of the node outline.
-		// Used when linkDirection is "LeftRight".
-		outputPortRightPosition: "topRight",
-		outputPortRightPosX: 0,
-		outputPortRightPosY: 29,
-
-		// Position of top single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the top left corner of the node outline.
-		// Used when linkDirection is "BottomTop".
-		outputPortTopPosX: 35,
-		outputPortTopPosY: 0,
-
-		// Position of bottom single input port. Multiple input ports will be
-		// automatically positioned with the X coordinate being overriden. These
-		// values are an offset from the bottom left corner of the node outline.
-		// Used when linkDirection is "TopBottom".
-		outputPortBottomPosX: 35,
-		outputPortBottomPosY: 0,
+		// Indicates whether multiple output ports should be automatically
+		// positioned (true) or positioned based on the contents of
+		// outputPortPositions array (false).
+		outputPortAutoPosition: true,
+
+		// An array of output port positions. Each element is structured like
+		// 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.
+		outputPortPositions: [
+			{ x_pos: 0, y_pos: 29, pos: "topRight" }
+		],
 
 		// The 'guide' is the object drawn at the mouse position as a new line
 		// is being dragged outwards.
@@ -827,7 +799,7 @@ const portsVerticalDefaultLayout = {
 		// to switch the data-new-link-over attribute to "yes".
 		nodeProximity: 20,
 
-		// Adds additional area around the ghost areaa dragged from the palette
+		// Adds additional area around the ghost area dragged from the palette
 		// which can increase the possibility of detecting detached links.
 		ghostAreaPadding: 10,
 
@@ -850,7 +822,8 @@ export default class LayoutDimensions {
 		let newLayout = this.getDefaultLayout(config);
 
 		if (config) {
-			newLayout = this.overrideNodeLayout(newLayout, overlayLayout); // Do this first because snap-to-grid depends on this.
+			newLayout = this.overridePortPositions(newLayout, config); // Must do this before overrideNodeLayout
+			newLayout = this.overrideNodeLayout(newLayout, overlayLayout); // Must do this before overrideSnapToGrid
 			newLayout = this.overrideCanvasLayout(newLayout, config, overlayLayout);
 			newLayout = this.overrideLinkType(newLayout, config);
 			newLayout = this.overrideSnapToGrid(newLayout, config);
@@ -867,7 +840,7 @@ export default class LayoutDimensions {
 		} else {
 			defaultLayout = portsHorizontalDefaultLayout;
 		}
-		return Object.assign({}, defaultLayout);
+		return cloneDeep(defaultLayout);
 	}
 
 	static overrideNodeLayout(layout, overlayLayout) {
@@ -939,4 +912,26 @@ export default class LayoutDimensions {
 		}
 		return Number.parseInt(snapToGridSizeStr, 10);
 	}
+
+	// Overrides the port positioning fields in the layout based on the type of node
+	// and the link direction.
+	static overridePortPositions(layout, config) {
+		if (config.enableLinkDirection === "BottomTop") {
+			layout.nodeLayout.inputPortPositions = [
+				{ x_pos: 0, y_pos: 0, pos: "bottomCenter" }
+			];
+			layout.nodeLayout.outputPortPositions = [
+				{ x_pos: 0, y_pos: 0, pos: "topCenter" }
+			];
+
+		} else if (config.enableLinkDirection === "TopBottom") {
+			layout.nodeLayout.inputPortPositions = [
+				{ x_pos: 0, y_pos: 0, pos: "topCenter" }
+			];
+			layout.nodeLayout.outputPortPositions = [
+				{ x_pos: 0, y_pos: 0, pos: "bottomCenter" }
+			];
+		}
+		return layout;
+	}
 }