pict-section-flow 0.0.10 → 0.0.13

package/source/services/PictService-Flow-PathGenerator.js

@@ -178,6 +178,105 @@ class PictServiceFlowPathGenerator extends libFableServiceProviderBase
 		return `M ${pStart.x} ${pStart.y} L ${pDepart.x} ${pDepart.y} C ${pCP1a.x} ${pCP1a.y}, ${pCP1b.x} ${pCP1b.y}, ${pHandle.x} ${pHandle.y} C ${pCP2a.x} ${pCP2a.y}, ${pCP2b.x} ${pCP2b.y}, ${pApproach.x} ${pApproach.y} L ${pEnd.x} ${pEnd.y}`;
 	}
 
+	/**
+	 * Build an SVG multi-segment bezier path string.
+	 * Generates N+1 cubic bezier segments through N handle points.
+	 *
+	 * Pattern: M start L depart C cp,cp,handle[0] C cp,cp,handle[1] ... C cp,cp,approach L end
+	 *
+	 * Control points are computed using Catmull-Rom-to-Bezier conversion
+	 * for C1 (smooth tangent) continuity at every handle.
+	 *
+	 * @param {{x: number, y: number}} pStart - Port anchor start
+	 * @param {{x: number, y: number}} pDepart - Departure point after straight segment
+	 * @param {Array<{x: number, y: number}>} pHandles - Ordered handle waypoints
+	 * @param {{x: number, y: number}} pApproach - Approach point before final straight segment
+	 * @param {{x: number, y: number}} pEnd - Port anchor end
+	 * @param {{dx: number, dy: number}} pStartDir - Departure direction unit vector
+	 * @param {{dx: number, dy: number}} pEndDir - Approach direction unit vector
+	 * @returns {string} SVG path d attribute
+	 */
+	buildMultiBezierPathString(pStart, pDepart, pHandles, pApproach, pEnd, pStartDir, pEndDir)
+	{
+		// Build the full list of waypoints: depart, handle[0..N-1], approach
+		let tmpWaypoints = [pDepart];
+		for (let i = 0; i < pHandles.length; i++)
+		{
+			tmpWaypoints.push(pHandles[i]);
+		}
+		tmpWaypoints.push(pApproach);
+
+		let tmpPath = `M ${pStart.x} ${pStart.y} L ${pDepart.x} ${pDepart.y}`;
+
+		for (let i = 0; i < tmpWaypoints.length - 1; i++)
+		{
+			let tmpFrom = tmpWaypoints[i];
+			let tmpTo = tmpWaypoints[i + 1];
+
+			let tmpSegDX = tmpTo.x - tmpFrom.x;
+			let tmpSegDY = tmpTo.y - tmpFrom.y;
+			let tmpSegLen = Math.sqrt(tmpSegDX * tmpSegDX + tmpSegDY * tmpSegDY);
+			if (tmpSegLen < 1)
+			{
+				tmpSegLen = 1;
+			}
+			let tmpScale = tmpSegLen * 0.35;
+
+			// Tangent at tmpFrom
+			let tmpTanFromX, tmpTanFromY;
+			if (i === 0)
+			{
+				// First segment: use the port departure direction
+				tmpTanFromX = pStartDir.dx;
+				tmpTanFromY = pStartDir.dy;
+			}
+			else
+			{
+				// Interior handle: tangent points from previous toward next waypoint
+				let tmpPrev = tmpWaypoints[i - 1];
+				let tmpNext = tmpWaypoints[i + 1];
+				tmpTanFromX = tmpNext.x - tmpPrev.x;
+				tmpTanFromY = tmpNext.y - tmpPrev.y;
+				let tmpTanLen = Math.sqrt(tmpTanFromX * tmpTanFromX + tmpTanFromY * tmpTanFromY);
+				if (tmpTanLen < 1) tmpTanLen = 1;
+				tmpTanFromX /= tmpTanLen;
+				tmpTanFromY /= tmpTanLen;
+			}
+
+			// Tangent at tmpTo
+			let tmpTanToX, tmpTanToY;
+			if (i === tmpWaypoints.length - 2)
+			{
+				// Last segment: use the port approach direction (reversed for incoming)
+				tmpTanToX = -pEndDir.dx;
+				tmpTanToY = -pEndDir.dy;
+			}
+			else
+			{
+				// Interior handle: tangent points from previous toward next waypoint
+				let tmpPrev = tmpWaypoints[i];
+				let tmpNext = tmpWaypoints[i + 2];
+				tmpTanToX = tmpNext.x - tmpPrev.x;
+				tmpTanToY = tmpNext.y - tmpPrev.y;
+				let tmpTanLen = Math.sqrt(tmpTanToX * tmpTanToX + tmpTanToY * tmpTanToY);
+				if (tmpTanLen < 1) tmpTanLen = 1;
+				tmpTanToX /= tmpTanLen;
+				tmpTanToY /= tmpTanLen;
+			}
+
+			let tmpCP1X = tmpFrom.x + tmpTanFromX * tmpScale;
+			let tmpCP1Y = tmpFrom.y + tmpTanFromY * tmpScale;
+			let tmpCP2X = tmpTo.x - tmpTanToX * tmpScale;
+			let tmpCP2Y = tmpTo.y - tmpTanToY * tmpScale;
+
+			tmpPath += ` C ${tmpCP1X} ${tmpCP1Y}, ${tmpCP2X} ${tmpCP2Y}, ${tmpTo.x} ${tmpTo.y}`;
+		}
+
+		tmpPath += ` L ${pEnd.x} ${pEnd.y}`;
+
+		return tmpPath;
+	}
+
 	/**
 	 * Build an SVG orthogonal (right-angle) path string.
 	 * Pattern: M start L depart L corner1 L corner2 L approach L end
@@ -194,6 +293,189 @@ class PictServiceFlowPathGenerator extends libFableServiceProviderBase
 	{
 		return `M ${pStart.x} ${pStart.y} L ${pDepart.x} ${pDepart.y} L ${pCorner1.x} ${pCorner1.y} L ${pCorner2.x} ${pCorner2.y} L ${pApproach.x} ${pApproach.y} L ${pEnd.x} ${pEnd.y}`;
 	}
+
+	// ---- Directional Geometry ----
+
+	/**
+	 * Compute full directional geometry between two port anchors, including
+	 * departure/approach points and bezier control points.
+	 *
+	 * Uses sophisticated facing detection: when ports face each other the
+	 * curve offset scales with inline distance; when ports are on the same
+	 * axis but not facing, a wider offset prevents the path from collapsing;
+	 * perpendicular exits use a moderate offset.
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @returns {{departX: number, departY: number, approachX: number, approachY: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, startDir: {dx: number, dy: number}, endDir: {dx: number, dy: number}}}
+	 */
+	computeDirectionalGeometry(pStart, pEnd)
+	{
+		let tmpStartDir = this._FlowView._GeometryProvider.sideDirection(pStart.side || 'right');
+		let tmpEndDir   = this._FlowView._GeometryProvider.sideDirection(pEnd.side   || 'left');
+
+		let tmpStraightLen = 20;
+
+		let tmpDepartX = pStart.x + tmpStartDir.dx * tmpStraightLen;
+		let tmpDepartY = pStart.y + tmpStartDir.dy * tmpStraightLen;
+
+		let tmpApproachX = pEnd.x + tmpEndDir.dx * tmpStraightLen;
+		let tmpApproachY = pEnd.y + tmpEndDir.dy * tmpStraightLen;
+
+		let tmpDX = Math.abs(tmpApproachX - tmpDepartX);
+		let tmpDY = Math.abs(tmpApproachY - tmpDepartY);
+		let tmpDist = Math.sqrt(tmpDX * tmpDX + tmpDY * tmpDY);
+
+		let tmpBaseOffset = Math.max(Math.min(tmpDist * 0.4, 180), 30);
+
+		let tmpSameAxis = (tmpStartDir.dx !== 0 && tmpEndDir.dx !== 0) ||
+		                  (tmpStartDir.dy !== 0 && tmpEndDir.dy !== 0);
+
+		let tmpFacingEachOther = false;
+		if (tmpSameAxis)
+		{
+			if (tmpStartDir.dx === 1 && tmpEndDir.dx === -1 && pEnd.x >= pStart.x)
+			{
+				tmpFacingEachOther = true;
+			}
+			else if (tmpStartDir.dx === -1 && tmpEndDir.dx === 1 && pEnd.x <= pStart.x)
+			{
+				tmpFacingEachOther = true;
+			}
+			else if (tmpStartDir.dy === 1 && tmpEndDir.dy === -1 && pEnd.y >= pStart.y)
+			{
+				tmpFacingEachOther = true;
+			}
+			else if (tmpStartDir.dy === -1 && tmpEndDir.dy === 1 && pEnd.y <= pStart.y)
+			{
+				tmpFacingEachOther = true;
+			}
+		}
+
+		let tmpCurveOffset;
+
+		if (tmpFacingEachOther)
+		{
+			let tmpInlineDist = (tmpStartDir.dx !== 0) ? tmpDX : tmpDY;
+			tmpCurveOffset = Math.max(tmpInlineDist * 0.35, 30);
+		}
+		else if (tmpSameAxis)
+		{
+			tmpCurveOffset = Math.max(tmpBaseOffset, 60);
+		}
+		else
+		{
+			tmpCurveOffset = Math.max(tmpBaseOffset * 0.8, 40);
+		}
+
+		let tmpCP1X = tmpDepartX + tmpStartDir.dx * tmpCurveOffset;
+		let tmpCP1Y = tmpDepartY + tmpStartDir.dy * tmpCurveOffset;
+		let tmpCP2X = tmpApproachX + tmpEndDir.dx * tmpCurveOffset;
+		let tmpCP2Y = tmpApproachY + tmpEndDir.dy * tmpCurveOffset;
+
+		return {
+			departX: tmpDepartX, departY: tmpDepartY,
+			approachX: tmpApproachX, approachY: tmpApproachY,
+			cp1X: tmpCP1X, cp1Y: tmpCP1Y,
+			cp2X: tmpCP2X, cp2Y: tmpCP2Y,
+			startDir: tmpStartDir, endDir: tmpEndDir
+		};
+	}
+
+	// ---- Distance Utilities ----
+
+	/**
+	 * Distance from point (pPX, pPY) to line segment (pAX, pAY)-(pBX, pBY).
+	 * Pure math utility, no state.
+	 *
+	 * @param {number} pPX
+	 * @param {number} pPY
+	 * @param {number} pAX
+	 * @param {number} pAY
+	 * @param {number} pBX
+	 * @param {number} pBY
+	 * @returns {number}
+	 */
+	distanceToSegment(pPX, pPY, pAX, pAY, pBX, pBY)
+	{
+		let tmpDX = pBX - pAX;
+		let tmpDY = pBY - pAY;
+		let tmpLenSq = tmpDX * tmpDX + tmpDY * tmpDY;
+
+		if (tmpLenSq < 0.001)
+		{
+			// Degenerate segment
+			let tmpDPX = pPX - pAX;
+			let tmpDPY = pPY - pAY;
+			return Math.sqrt(tmpDPX * tmpDPX + tmpDPY * tmpDPY);
+		}
+
+		// Project point onto segment, clamped to [0, 1]
+		let tmpT = ((pPX - pAX) * tmpDX + (pPY - pAY) * tmpDY) / tmpLenSq;
+		if (tmpT < 0) tmpT = 0;
+		if (tmpT > 1) tmpT = 1;
+
+		let tmpClosestX = pAX + tmpT * tmpDX;
+		let tmpClosestY = pAY + tmpT * tmpDY;
+		let tmpDistX = pPX - tmpClosestX;
+		let tmpDistY = pPY - tmpClosestY;
+		return Math.sqrt(tmpDistX * tmpDistX + tmpDistY * tmpDistY);
+	}
+
+	// ---- Auto Midpoint Calculation ----
+
+	/**
+	 * Get the auto-calculated midpoint of the default bezier curve between
+	 * two port anchors, using the full directional geometry (facing detection,
+	 * adaptive curve offsets). Evaluates the cubic bezier at t=0.5.
+	 *
+	 * Used by ConnectionRenderer for connection midpoints.
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @returns {{x: number, y: number}}
+	 */
+	getAutoMidpoint(pStart, pEnd)
+	{
+		let tmpGeo = this.computeDirectionalGeometry(pStart, pEnd);
+
+		return this.evaluateCubicBezier(
+			{ x: tmpGeo.departX, y: tmpGeo.departY },
+			{ x: tmpGeo.cp1X, y: tmpGeo.cp1Y },
+			{ x: tmpGeo.cp2X, y: tmpGeo.cp2Y },
+			{ x: tmpGeo.approachX, y: tmpGeo.approachY },
+			0.5
+		);
+	}
+
+	/**
+	 * Get the auto-calculated midpoint using simple span-based control points.
+	 * Uses computeDepartApproach for basic geometry, then span * 0.4 for
+	 * control point distance. Evaluates the cubic bezier at t=0.5.
+	 *
+	 * Used by TetherService for tether midpoints.
+	 *
+	 * @param {{x: number, y: number, side: string}} pFrom
+	 * @param {{x: number, y: number, side: string}} pTo
+	 * @param {number} pDepartDist - Departure/approach distance
+	 * @returns {{x: number, y: number}}
+	 */
+	getAutoMidpointSimple(pFrom, pTo, pDepartDist)
+	{
+		let tmpDA = this.computeDepartApproach(pFrom, pTo, pDepartDist);
+
+		let tmpSpanX = Math.abs(tmpDA.approachX - tmpDA.departX);
+		let tmpSpanY = Math.abs(tmpDA.approachY - tmpDA.departY);
+		let tmpSpan = Math.max(tmpSpanX, tmpSpanY, 40);
+		let tmpCPDist = tmpSpan * 0.4;
+
+		let tmpP0 = { x: tmpDA.departX, y: tmpDA.departY };
+		let tmpP1 = { x: tmpDA.departX + tmpDA.fromDir.dx * tmpCPDist, y: tmpDA.departY + tmpDA.fromDir.dy * tmpCPDist };
+		let tmpP2 = { x: tmpDA.approachX + tmpDA.toDir.dx * tmpCPDist, y: tmpDA.approachY + tmpDA.toDir.dy * tmpCPDist };
+		let tmpP3 = { x: tmpDA.approachX, y: tmpDA.approachY };
+
+		return this.evaluateCubicBezier(tmpP0, tmpP1, tmpP2, tmpP3, 0.5);
+	}
 }
 
 module.exports = PictServiceFlowPathGenerator;

package/source/services/PictService-Flow-PortRenderer.js

@@ -0,0 +1,269 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-PortRenderer
+ *
+ * Renders port circles, labels, and badges for flow diagram nodes.
+ *
+ * Extracted from PictView-Flow-Node.js to isolate port rendering logic
+ * from node body rendering and layout.
+ *
+ * Dependencies (all accessed via this._FlowView):
+ *   - _GeometryProvider — for getEdgeFromSide, getPortLocalPosition
+ *   - _ConnectorShapesProvider — for createPortElement
+ *   - _SVGHelperProvider — for createSVGElement
+ */
+class PictServiceFlowPortRenderer extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowPortRenderer';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Render ports for a node.
+	 * @param {Object} pNodeData
+	 * @param {SVGGElement} pGroup - The node's SVG group
+	 * @param {number} pWidth
+	 * @param {number} pHeight
+	 * @param {Object} [pNodeTypeConfig] - Node type configuration (for label display options)
+	 * @param {number} pNodeTitleBarHeight - Title bar height (for port position offset)
+	 */
+	renderPorts(pNodeData, pGroup, pWidth, pHeight, pNodeTypeConfig, pNodeTitleBarHeight)
+	{
+		if (!this._FlowView) return;
+		if (!pNodeData.Ports || !Array.isArray(pNodeData.Ports)) return;
+
+		let tmpPortLabelsVertical = (pNodeTypeConfig && pNodeTypeConfig.PortLabelsVertical);
+		let tmpPortLabelPadding = (pNodeTypeConfig && pNodeTypeConfig.PortLabelPadding);
+		let tmpPortLabelsOutside = (pNodeTypeConfig && pNodeTypeConfig.PortLabelsOutside);
+		let tmpGeometryProvider = this._FlowView._GeometryProvider;
+
+		// Group ports by their Side value (supports all 12 positions)
+		let tmpPortsBySide = {};
+		for (let i = 0; i < pNodeData.Ports.length; i++)
+		{
+			let tmpPort = pNodeData.Ports[i];
+			let tmpSide = tmpPort.Side || (tmpPort.Direction === 'input' ? 'left' : 'right');
+			if (!tmpPortsBySide[tmpSide])
+			{
+				tmpPortsBySide[tmpSide] = [];
+			}
+			tmpPortsBySide[tmpSide].push(tmpPort);
+		}
+
+		// Build port counts map for adaptive zone sizing
+		let tmpPortCountsBySide = {};
+		for (let tmpKey in tmpPortsBySide)
+		{
+			tmpPortCountsBySide[tmpKey] = tmpPortsBySide[tmpKey].length;
+		}
+
+		for (let tmpSide in tmpPortsBySide)
+		{
+			let tmpPorts = tmpPortsBySide[tmpSide];
+			// Determine the edge for label positioning
+			let tmpEdge = tmpGeometryProvider ? tmpGeometryProvider.getEdgeFromSide(tmpSide) : tmpSide;
+
+			for (let i = 0; i < tmpPorts.length; i++)
+			{
+				let tmpPort = tmpPorts[i];
+				let tmpPosition = this.getPortLocalPosition(tmpSide, i, tmpPorts.length, pWidth, pHeight, pNodeTitleBarHeight, tmpPortCountsBySide);
+
+				// Port label badge — flush against the node edge with no
+				// border on the edge side; rendered before the port circle
+				// so the circle visually sits on top of the badge
+				let tmpLabelElement = null;
+				if (tmpPort.Label)
+				{
+					let tmpPortTypeColorMap =
+					{
+						'event-in': '#3498db',
+						'event-out': '#2ecc71',
+						'setting': '#e67e22',
+						'value': '#f1c40f',
+						'error': '#e74c3c'
+					};
+					let tmpBorderColor = tmpPort.PortType ? (tmpPortTypeColorMap[tmpPort.PortType] || '#95a5a6') : '#95a5a6';
+
+					let tmpBadgeHeight = 12;
+					let tmpBadgePadH = 5;
+					let tmpBadgeBorderW = 2;
+					let tmpEdgePad = 1;
+					let tmpPortRadius = 5;
+
+					let tmpTextLen = tmpPort.Label.length * 5;
+					let tmpBadgeX, tmpBadgeY, tmpBadgeWidth;
+					let tmpTextX, tmpTextAnchor;
+					let tmpStripeX, tmpStripeY, tmpStripeW, tmpStripeH;
+					let tmpBorderPath;
+
+					if (tmpEdge === 'left')
+					{
+						tmpBadgeWidth = tmpPortRadius + tmpBadgePadH + tmpTextLen + tmpBadgePadH + tmpBadgeBorderW;
+						tmpBadgeX = tmpEdgePad;
+						tmpBadgeY = tmpPosition.y - tmpBadgeHeight / 2;
+						tmpTextX = tmpBadgeX + tmpPortRadius + tmpBadgePadH;
+						tmpTextAnchor = 'start';
+						tmpStripeX = tmpBadgeX + tmpBadgeWidth - tmpBadgeBorderW;
+						tmpStripeY = tmpBadgeY;
+						tmpStripeW = tmpBadgeBorderW;
+						tmpStripeH = tmpBadgeHeight;
+						tmpBorderPath = 'M ' + tmpBadgeX + ' ' + tmpBadgeY
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + tmpBadgeY
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + (tmpBadgeY + tmpBadgeHeight)
+							+ ' L ' + tmpBadgeX + ' ' + (tmpBadgeY + tmpBadgeHeight);
+					}
+					else if (tmpEdge === 'right')
+					{
+						tmpBadgeWidth = tmpBadgeBorderW + tmpBadgePadH + tmpTextLen + tmpBadgePadH + tmpPortRadius;
+						tmpBadgeX = pWidth - tmpBadgeWidth - tmpEdgePad;
+						tmpBadgeY = tmpPosition.y - tmpBadgeHeight / 2;
+						tmpTextX = tmpBadgeX + tmpBadgeBorderW + tmpBadgePadH;
+						tmpTextAnchor = 'start';
+						tmpStripeX = tmpBadgeX;
+						tmpStripeY = tmpBadgeY;
+						tmpStripeW = tmpBadgeBorderW;
+						tmpStripeH = tmpBadgeHeight;
+						tmpBorderPath = 'M ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + tmpBadgeY
+							+ ' L ' + tmpBadgeX + ' ' + tmpBadgeY
+							+ ' L ' + tmpBadgeX + ' ' + (tmpBadgeY + tmpBadgeHeight)
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + (tmpBadgeY + tmpBadgeHeight);
+					}
+					else if (tmpEdge === 'top')
+					{
+						tmpBadgeWidth = tmpTextLen + tmpBadgePadH * 2;
+						tmpBadgeX = tmpPosition.x - tmpBadgeWidth / 2;
+						tmpBadgeY = tmpEdgePad;
+						tmpTextX = tmpPosition.x;
+						tmpTextAnchor = 'middle';
+						tmpStripeX = tmpBadgeX;
+						tmpStripeY = tmpBadgeY + tmpBadgeHeight - tmpBadgeBorderW;
+						tmpStripeW = tmpBadgeWidth;
+						tmpStripeH = tmpBadgeBorderW;
+						tmpBorderPath = 'M ' + tmpBadgeX + ' ' + tmpBadgeY
+							+ ' L ' + tmpBadgeX + ' ' + (tmpBadgeY + tmpBadgeHeight)
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + (tmpBadgeY + tmpBadgeHeight)
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + tmpBadgeY;
+					}
+					else
+					{
+						tmpBadgeWidth = tmpTextLen + tmpBadgePadH * 2;
+						tmpBadgeX = tmpPosition.x - tmpBadgeWidth / 2;
+						tmpBadgeY = pHeight - tmpBadgeHeight - tmpEdgePad;
+						tmpTextX = tmpPosition.x;
+						tmpTextAnchor = 'middle';
+						tmpStripeX = tmpBadgeX;
+						tmpStripeY = tmpBadgeY;
+						tmpStripeW = tmpBadgeWidth;
+						tmpStripeH = tmpBadgeBorderW;
+						tmpBorderPath = 'M ' + tmpBadgeX + ' ' + (tmpBadgeY + tmpBadgeHeight)
+							+ ' L ' + tmpBadgeX + ' ' + tmpBadgeY
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + tmpBadgeY
+							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + (tmpBadgeY + tmpBadgeHeight);
+					}
+
+					// Background rect (cream, no stroke — border drawn separately)
+					let tmpBgRect = this._FlowView._SVGHelperProvider.createSVGElement('rect');
+					tmpBgRect.setAttribute('class', 'pict-flow-port-label-bg');
+					tmpBgRect.setAttribute('x', String(tmpBadgeX));
+					tmpBgRect.setAttribute('y', String(tmpBadgeY));
+					tmpBgRect.setAttribute('width', String(tmpBadgeWidth));
+					tmpBgRect.setAttribute('height', String(tmpBadgeHeight));
+					tmpBgRect.setAttribute('fill', 'var(--pf-port-label-bg, rgba(255, 253, 240, 0.5))');
+					pGroup.appendChild(tmpBgRect);
+
+					// 3-sided border path (open on the edge-facing side)
+					let tmpBorderPathEl = this._FlowView._SVGHelperProvider.createSVGElement('path');
+					tmpBorderPathEl.setAttribute('class', 'pict-flow-port-label-bg');
+					tmpBorderPathEl.setAttribute('d', tmpBorderPath);
+					tmpBorderPathEl.setAttribute('fill', 'none');
+					tmpBorderPathEl.setAttribute('stroke', tmpBorderColor);
+					tmpBorderPathEl.setAttribute('stroke-width', '0.75');
+					pGroup.appendChild(tmpBorderPathEl);
+
+					// Colored stripe on the inner side
+					let tmpStripe = this._FlowView._SVGHelperProvider.createSVGElement('rect');
+					tmpStripe.setAttribute('class', 'pict-flow-port-label-bg');
+					tmpStripe.setAttribute('x', String(tmpStripeX));
+					tmpStripe.setAttribute('y', String(tmpStripeY));
+					tmpStripe.setAttribute('width', String(tmpStripeW));
+					tmpStripe.setAttribute('height', String(tmpStripeH));
+					tmpStripe.setAttribute('fill', tmpBorderColor);
+					pGroup.appendChild(tmpStripe);
+
+					// Text label — appended after circle for z-order
+					tmpLabelElement = this._FlowView._SVGHelperProvider.createSVGElement('text');
+					tmpLabelElement.setAttribute('class', 'pict-flow-port-label');
+					tmpLabelElement.setAttribute('fill', 'var(--pf-port-label-text, #2c3e50)');
+					tmpLabelElement.textContent = tmpPort.Label;
+					tmpLabelElement.setAttribute('x', String(tmpTextX));
+					tmpLabelElement.setAttribute('y', String(tmpBadgeY + tmpBadgeHeight / 2));
+					tmpLabelElement.setAttribute('text-anchor', tmpTextAnchor);
+					tmpLabelElement.setAttribute('dominant-baseline', 'central');
+				}
+
+				// Port circle (rendered on top of badge background)
+				let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+				let tmpCircle;
+				if (tmpShapeProvider)
+				{
+					tmpCircle = tmpShapeProvider.createPortElement(tmpPort, tmpPosition, pNodeData.Hash);
+				}
+				else
+				{
+					tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+					let tmpPortClass = `pict-flow-port ${tmpPort.Direction}`;
+					if (tmpPort.PortType)
+					{
+						tmpPortClass += ` port-type-${tmpPort.PortType}`;
+					}
+					tmpCircle.setAttribute('class', tmpPortClass);
+					tmpCircle.setAttribute('cx', String(tmpPosition.x));
+					tmpCircle.setAttribute('cy', String(tmpPosition.y));
+					tmpCircle.setAttribute('r', '5');
+					tmpCircle.setAttribute('data-port-hash', tmpPort.Hash);
+					tmpCircle.setAttribute('data-node-hash', pNodeData.Hash);
+					tmpCircle.setAttribute('data-port-direction', tmpPort.Direction);
+					if (tmpPort.PortType)
+					{
+						tmpCircle.setAttribute('data-port-type', tmpPort.PortType);
+					}
+					tmpCircle.setAttribute('data-element-type', 'port');
+				}
+				pGroup.appendChild(tmpCircle);
+
+				// Port label text (on top of everything)
+				if (tmpLabelElement)
+				{
+					pGroup.appendChild(tmpLabelElement);
+				}
+			}
+		}
+	}
+
+	/**
+	 * Calculate port position relative to node origin.
+	 *
+	 * Delegates to the geometry provider's getPortLocalPosition method.
+	 *
+	 * @param {string} pSide - 'left', 'right', 'top', 'bottom' (or compound sides)
+	 * @param {number} pIndex - Index of this port on its side
+	 * @param {number} pTotal - Total ports on this side
+	 * @param {number} pWidth - Node width
+	 * @param {number} pHeight - Node height
+	 * @param {number} pNodeTitleBarHeight - Title bar height
+	 * @param {Object} [pPortCountsBySide] - Optional map of Side → count for adaptive zones
+	 * @returns {{x: number, y: number}}
+	 */
+	getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pNodeTitleBarHeight, pPortCountsBySide)
+	{
+		return this._FlowView._GeometryProvider.getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pNodeTitleBarHeight, pPortCountsBySide);
+	}
+}
+
+module.exports = PictServiceFlowPortRenderer;