pict-section-flow 0.0.10 → 0.0.13

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

@@ -0,0 +1,281 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-RenderManager
+ *
+ * Orchestrates rendering of the flow diagram: nodes, connections,
+ * tethers, panels, SVG marker definitions, and node position updates.
+ *
+ * Extracted from PictView-Flow.js to isolate rendering orchestration
+ * from data management and interaction handling.
+ */
+class PictServiceFlowRenderManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowRenderManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Render the complete flow diagram
+	 */
+	renderFlow()
+	{
+		if (!this._FlowView) return;
+		if (!this._FlowView._NodesLayer || !this._FlowView._ConnectionsLayer) return;
+
+		// Clear existing SVG content
+		while (this._FlowView._NodesLayer.firstChild)
+		{
+			this._FlowView._NodesLayer.removeChild(this._FlowView._NodesLayer.firstChild);
+		}
+		while (this._FlowView._ConnectionsLayer.firstChild)
+		{
+			this._FlowView._ConnectionsLayer.removeChild(this._FlowView._ConnectionsLayer.firstChild);
+		}
+
+		// Render connections first (behind nodes)
+		for (let i = 0; i < this._FlowView._FlowData.Connections.length; i++)
+		{
+			let tmpConnection = this._FlowView._FlowData.Connections[i];
+			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedConnectionHash === tmpConnection.Hash);
+
+			this._FlowView._ConnectionRenderer.renderConnection(
+				tmpConnection,
+				this._FlowView._ConnectionsLayer,
+				tmpIsSelected
+			);
+		}
+
+		// Render nodes
+		for (let i = 0; i < this._FlowView._FlowData.Nodes.length; i++)
+		{
+			let tmpNode = this._FlowView._FlowData.Nodes[i];
+			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedNodeHash === tmpNode.Hash);
+			let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpNode.Type);
+
+			// Enrich saved port data with metadata from the node type's DefaultPorts.
+			// Saved flow data may not include PortType or may have stale Side values,
+			// so we match each port to its DefaultPort counterpart by Label and Direction,
+			// then copy over PortType and Side from the authoritative node type definition.
+			if (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultPorts && tmpNode.Ports)
+			{
+				for (let p = 0; p < tmpNode.Ports.length; p++)
+				{
+					let tmpPort = tmpNode.Ports[p];
+					for (let d = 0; d < tmpNodeTypeConfig.DefaultPorts.length; d++)
+					{
+						let tmpDefault = tmpNodeTypeConfig.DefaultPorts[d];
+						if (tmpDefault.Label === tmpPort.Label && tmpDefault.Direction === tmpPort.Direction)
+						{
+							if (tmpDefault.PortType)
+							{
+								tmpPort.PortType = tmpDefault.PortType;
+							}
+							if (tmpDefault.Side)
+							{
+								tmpPort.Side = tmpDefault.Side;
+							}
+							break;
+						}
+					}
+				}
+			}
+
+			this._FlowView._NodeView.renderNode(tmpNode, this._FlowView._NodesLayer, tmpIsSelected, tmpNodeTypeConfig);
+		}
+
+		// Render properties panels and tethers
+		if (this._FlowView._PropertiesPanelView && this._FlowView._PanelsLayer && this._FlowView._TethersLayer)
+		{
+			this._FlowView._PropertiesPanelView.renderPanels(
+				this._FlowView._FlowData.OpenPanels,
+				this._FlowView._PanelsLayer,
+				this._FlowView._TethersLayer,
+				this._FlowView._FlowData.ViewState.SelectedTetherHash
+			);
+		}
+
+		// Update viewport transform
+		this._FlowView.updateViewportTransform();
+	}
+
+	/**
+	 * Re-render a single connection (remove and re-add) for smooth drag performance.
+	 * @param {string} pConnectionHash
+	 */
+	renderSingleConnection(pConnectionHash)
+	{
+		if (!this._FlowView || !this._FlowView._ConnectionsLayer) return;
+
+		// Remove existing elements for this connection
+		let tmpExisting = this._FlowView._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${pConnectionHash}"]`);
+		for (let i = 0; i < tmpExisting.length; i++)
+		{
+			tmpExisting[i].remove();
+		}
+
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return;
+
+		let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedConnectionHash === pConnectionHash);
+		this._FlowView._ConnectionRenderer.renderConnection(tmpConnection, this._FlowView._ConnectionsLayer, tmpIsSelected);
+	}
+
+	/**
+	 * Re-render a single tether (remove and re-add) for smooth drag performance.
+	 * @param {string} pPanelHash
+	 */
+	renderSingleTether(pPanelHash)
+	{
+		if (!this._FlowView || !this._FlowView._TethersLayer || !this._FlowView._TetherService) return;
+
+		// Remove existing tether elements for this panel
+		let tmpExisting = this._FlowView._TethersLayer.querySelectorAll(`[data-panel-hash="${pPanelHash}"]`);
+		for (let i = 0; i < tmpExisting.length; i++)
+		{
+			tmpExisting[i].remove();
+		}
+
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel) return;
+
+		let tmpNodeData = this._FlowView.getNode(tmpPanel.NodeHash);
+		if (!tmpNodeData) return;
+
+		let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedTetherHash === pPanelHash);
+		this._FlowView._TetherService.renderTether(tmpPanel, tmpNodeData, this._FlowView._TethersLayer, tmpIsSelected, this._FlowView.options.ViewIdentifier);
+	}
+
+	/**
+	 * Update a single node's position in the SVG without full re-render (for drag performance)
+	 * @param {string} pNodeHash
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	updateNodePosition(pNodeHash, pX, pY)
+	{
+		if (!this._FlowView) return;
+
+		let tmpNode = this._FlowView.getNode(pNodeHash);
+		if (!tmpNode) return;
+
+		if (this._FlowView.options.EnableGridSnap)
+		{
+			pX = this._FlowView._LayoutService.snapToGrid(pX, this._FlowView.options.GridSnapSize);
+			pY = this._FlowView._LayoutService.snapToGrid(pY, this._FlowView.options.GridSnapSize);
+		}
+
+		tmpNode.X = pX;
+		tmpNode.Y = pY;
+
+		// Reset customized handle positions for connections/tethers involving this node
+		this._FlowView._resetHandlesForNode(pNodeHash);
+
+		// Update the node's SVG group transform for smooth dragging
+		let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${pNodeHash}"]`);
+		if (tmpNodeGroup)
+		{
+			tmpNodeGroup.setAttribute('transform', `translate(${pX}, ${pY})`);
+		}
+
+		// Re-render connections that involve this node
+		this.renderConnectionsForNode(pNodeHash);
+
+		// Update tethers for any panels attached to this node
+		this.renderTethersForNode(pNodeHash);
+	}
+
+	/**
+	 * Re-render only connections that involve a specific node (for drag performance)
+	 * @param {string} pNodeHash
+	 */
+	renderConnectionsForNode(pNodeHash)
+	{
+		if (!this._FlowView || !this._FlowView._ConnectionsLayer) return;
+
+		let tmpAffectedConnections = this._FlowView._FlowData.Connections.filter((pConn) =>
+		{
+			return pConn.SourceNodeHash === pNodeHash || pConn.TargetNodeHash === pNodeHash;
+		});
+
+		for (let i = 0; i < tmpAffectedConnections.length; i++)
+		{
+			let tmpConn = tmpAffectedConnections[i];
+			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedConnectionHash === tmpConn.Hash);
+
+			// Remove existing connection SVG elements
+			let tmpExisting = this._FlowView._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${tmpConn.Hash}"]`);
+			for (let j = 0; j < tmpExisting.length; j++)
+			{
+				tmpExisting[j].remove();
+			}
+
+			// Re-render this connection
+			this._FlowView._ConnectionRenderer.renderConnection(tmpConn, this._FlowView._ConnectionsLayer, tmpIsSelected);
+		}
+	}
+
+	/**
+	 * Re-render tethers for panels attached to a specific node (for drag performance).
+	 * @param {string} pNodeHash
+	 */
+	renderTethersForNode(pNodeHash)
+	{
+		if (!this._FlowView || !this._FlowView._TethersLayer || !this._FlowView._TetherService) return;
+
+		let tmpAffectedPanels = this._FlowView._FlowData.OpenPanels.filter((pPanel) => pPanel.NodeHash === pNodeHash);
+		if (tmpAffectedPanels.length === 0) return;
+
+		// Remove existing tethers for these panels and re-render via TetherService
+		for (let i = 0; i < tmpAffectedPanels.length; i++)
+		{
+			let tmpExisting = this._FlowView._TethersLayer.querySelectorAll(`[data-panel-hash="${tmpAffectedPanels[i].Hash}"]`);
+			for (let j = 0; j < tmpExisting.length; j++)
+			{
+				tmpExisting[j].remove();
+			}
+
+			let tmpNodeData = this._FlowView.getNode(tmpAffectedPanels[i].NodeHash);
+			if (!tmpNodeData) continue;
+
+			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedTetherHash === tmpAffectedPanels[i].Hash);
+			this._FlowView._TetherService.renderTether(tmpAffectedPanels[i], tmpNodeData, this._FlowView._TethersLayer, tmpIsSelected, this._FlowView.options.ViewIdentifier);
+		}
+	}
+
+	/**
+	 * Re-inject SVG marker definitions (arrowheads).
+	 * Called after a theme switch to update arrowhead colors.
+	 */
+	reinjectMarkerDefs()
+	{
+		if (!this._FlowView || !this._FlowView._ConnectorShapesProvider || !this._FlowView._SVGElement) return;
+
+		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
+		let tmpDefs = this._FlowView._SVGElement.querySelector('defs');
+		if (!tmpDefs) return;
+
+		// Remove existing marker elements
+		let tmpExistingMarkers = tmpDefs.querySelectorAll('marker');
+		for (let i = 0; i < tmpExistingMarkers.length; i++)
+		{
+			tmpExistingMarkers[i].remove();
+		}
+
+		// Re-generate and inject
+		let tmpMarkerMarkup = this._FlowView._ConnectorShapesProvider.generateMarkerDefs(tmpViewIdentifier);
+		let tmpTempSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		tmpTempSVG.innerHTML = tmpMarkerMarkup;
+		while (tmpTempSVG.firstChild)
+		{
+			tmpDefs.appendChild(tmpTempSVG.firstChild);
+		}
+	}
+}
+
+module.exports = PictServiceFlowRenderManager;

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

@@ -224,27 +224,7 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 	 */
 	getAutoMidpoint(pFrom, pTo)
 	{
-		let tmpDepartDist = 20;
-		let tmpFromDir = this._FlowView._GeometryProvider.sideDirection(pFrom.side);
-		let tmpToDir = this._FlowView._GeometryProvider.sideDirection(pTo.side);
-
-		let tmpDepartX = pFrom.x + tmpFromDir.dx * tmpDepartDist;
-		let tmpDepartY = pFrom.y + tmpFromDir.dy * tmpDepartDist;
-		let tmpApproachX = pTo.x + tmpToDir.dx * tmpDepartDist;
-		let tmpApproachY = pTo.y + tmpToDir.dy * tmpDepartDist;
-
-		let tmpSpanX = Math.abs(tmpApproachX - tmpDepartX);
-		let tmpSpanY = Math.abs(tmpApproachY - tmpDepartY);
-		let tmpSpan = Math.max(tmpSpanX, tmpSpanY, 40);
-		let tmpCPDist = tmpSpan * 0.4;
-
-		let tmpP0 = { x: tmpDepartX, y: tmpDepartY };
-		let tmpP1 = { x: tmpDepartX + tmpFromDir.dx * tmpCPDist, y: tmpDepartY + tmpFromDir.dy * tmpCPDist };
-		let tmpP2 = { x: tmpApproachX + tmpToDir.dx * tmpCPDist, y: tmpApproachY + tmpToDir.dy * tmpCPDist };
-		let tmpP3 = { x: tmpApproachX, y: tmpApproachY };
-
-		// Evaluate cubic bezier at t=0.5
-		return this._FlowView._PathGenerator.evaluateCubicBezier(tmpP0, tmpP1, tmpP2, tmpP3, 0.5);
+		return this._FlowView._PathGenerator.getAutoMidpointSimple(pFrom, pTo, 20);
 	}
 
 	/**
@@ -541,30 +521,14 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 	 */
 	_createHandle(pLayer, pPanelHash, pHandleType, pX, pY, pClassName)
 	{
-		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		if (!this._FlowView._ConnectorShapesProvider) return;
+
 		let tmpShapeKey = (pClassName === 'pict-flow-tether-handle-midpoint')
 			? 'tether-handle-midpoint' : 'tether-handle';
 
-		if (tmpShapeProvider)
-		{
-			let tmpHandle = tmpShapeProvider.createHandleElement(
-				pPanelHash, pHandleType, pX, pY, tmpShapeKey);
-			tmpHandle.setAttribute('data-element-type', 'tether-handle');
-			tmpHandle.setAttribute('data-panel-hash', pPanelHash);
-			pLayer.appendChild(tmpHandle);
-		}
-		else
-		{
-			let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
-			tmpCircle.setAttribute('class', pClassName);
-			tmpCircle.setAttribute('cx', String(pX));
-			tmpCircle.setAttribute('cy', String(pY));
-			tmpCircle.setAttribute('r', '6');
-			tmpCircle.setAttribute('data-element-type', 'tether-handle');
-			tmpCircle.setAttribute('data-panel-hash', pPanelHash);
-			tmpCircle.setAttribute('data-handle-type', pHandleType);
-			pLayer.appendChild(tmpCircle);
-		}
+		this._FlowView._ConnectorShapesProvider.createFullHandle(
+			pLayer, pPanelHash, pHandleType, pX, pY,
+			tmpShapeKey, 'tether-handle', 'data-panel-hash');
 	}
 }
 

package/source/views/PictView-Flow-Node.js

@@ -296,7 +296,7 @@ class PictViewFlowNode extends libPictView
 	}
 
 	/**
-	 * Render ports for a node
+	 * Render ports for a node — delegates to the PortRenderer service.
 	 * @param {Object} pNodeData
 	 * @param {SVGGElement} pGroup - The node's SVG group
 	 * @param {number} pWidth
@@ -305,225 +305,7 @@ class PictViewFlowNode extends libPictView
 	 */
 	_renderPorts(pNodeData, pGroup, pWidth, pHeight, pNodeTypeConfig)
 	{
-		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);
-		}
-
-		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);
-
-				// 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.
-	 *
-	 * For left and right side ports, positioning is offset below the title bar
-	 * so that ports never overlap the header area.
-	 *
-	 * @param {string} pSide - 'left', 'right', 'top', 'bottom'
-	 * @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
-	 * @returns {{x: number, y: number}}
-	 */
-	_getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight)
-	{
-		return this._FlowView._GeometryProvider.getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, this.options.NodeTitleBarHeight);
+		this._FlowView._PortRenderer.renderPorts(pNodeData, pGroup, pWidth, pHeight, pNodeTypeConfig, this.options.NodeTitleBarHeight);
 	}
 
 	/**