pict-section-flow 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {

package/source/providers/PictProvider-Flow-CSS.js

@@ -65,12 +65,14 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-port-event-in-fill: #3498db;
 			--pf-port-event-out-fill: #2ecc71;
 			--pf-port-setting-fill: #e67e22;
-			--pf-port-value-fill: #9b59b6;
+			--pf-port-value-fill: #f1c40f;
 			--pf-port-error-fill: #e74c3c;
 
-			/* Connection Type Colors */
-			--pf-connection-event-stroke: #95a5a6;
-			--pf-connection-data-stroke: #9b59b6;
+			/* Connection Type Colors (match source port) */
+			--pf-connection-event-in-stroke: #3498db;
+			--pf-connection-event-out-stroke: #2ecc71;
+			--pf-connection-setting-stroke: #e67e22;
+			--pf-connection-value-stroke: #f1c40f;
 			--pf-connection-error-stroke: #e74c3c;
 
 			/* Panels */
@@ -315,17 +317,23 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			fill: var(--pf-port-error-fill);
 		}
 		.pict-flow-port-label {
-			fill: #7f8c8d;
-			font-size: 9px;
+			font-size: 8px;
+			font-weight: 600;
 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 			pointer-events: none;
 		}
+		/* Port label badge background */
+		.pict-flow-port-label-bg {
+			pointer-events: none;
+		}
 		/* Port labels on hover: hidden by default, revealed on node hover */
-		.pict-flow-node-port-labels-hover .pict-flow-port-label {
+		.pict-flow-node-port-labels-hover .pict-flow-port-label,
+		.pict-flow-node-port-labels-hover .pict-flow-port-label-bg {
 			opacity: 0;
 			transition: opacity 0.2s;
 		}
-		.pict-flow-node-port-labels-hover:hover .pict-flow-port-label {
+		.pict-flow-node-port-labels-hover:hover .pict-flow-port-label,
+		.pict-flow-node-port-labels-hover:hover .pict-flow-port-label-bg {
 			opacity: 1;
 		}
 		`;
@@ -355,11 +363,17 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			stroke-width: 3;
 		}
 		/* Connection type color overrides (based on source port type) */
-		.pict-flow-connection.conn-type-value {
-			stroke: var(--pf-connection-data-stroke);
+		.pict-flow-connection.conn-type-event-in {
+			stroke: var(--pf-connection-event-in-stroke);
+		}
+		.pict-flow-connection.conn-type-event-out {
+			stroke: var(--pf-connection-event-out-stroke);
 		}
 		.pict-flow-connection.conn-type-setting {
-			stroke: var(--pf-connection-data-stroke);
+			stroke: var(--pf-connection-setting-stroke);
+		}
+		.pict-flow-connection.conn-type-value {
+			stroke: var(--pf-connection-value-stroke);
 		}
 		.pict-flow-connection.conn-type-error {
 			stroke: var(--pf-connection-error-stroke);

package/source/providers/PictProvider-Flow-ConnectorShapes.js

@@ -385,7 +385,7 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 
 		let tmpMarkup = '';
 
-		// Normal connection arrowhead
+		// Normal connection arrowhead (default gray)
 		tmpMarkup += '<marker id="flow-arrowhead-' + pViewIdentifier + '"'
 			+ ' markerWidth="' + tmpConnectionMarker.MarkerWidth + '"'
 			+ ' markerHeight="' + tmpConnectionMarker.MarkerHeight + '"'
@@ -395,6 +395,28 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 			+ '<polygon points="' + tmpConnectionMarker.Points + '" fill="' + tmpConnectionMarker.Fill + '" />'
 			+ '</marker>';
 
+		// Per-port-type connection arrowheads
+		let tmpPortTypeColors =
+		{
+			'event-in': '#3498db',
+			'event-out': '#2ecc71',
+			'setting': '#e67e22',
+			'value': '#f1c40f',
+			'error': '#e74c3c'
+		};
+
+		for (let tmpType in tmpPortTypeColors)
+		{
+			tmpMarkup += '<marker id="flow-arrowhead-' + tmpType + '-' + pViewIdentifier + '"'
+				+ ' markerWidth="' + tmpConnectionMarker.MarkerWidth + '"'
+				+ ' markerHeight="' + tmpConnectionMarker.MarkerHeight + '"'
+				+ ' refX="' + tmpConnectionMarker.RefX + '"'
+				+ ' refY="' + tmpConnectionMarker.RefY + '"'
+				+ ' orient="auto" markerUnits="strokeWidth">'
+				+ '<polygon points="' + tmpConnectionMarker.Points + '" fill="' + tmpPortTypeColors[tmpType] + '" />'
+				+ '</marker>';
+		}
+
 		// Selected connection arrowhead
 		tmpMarkup += '<marker id="flow-arrowhead-selected-' + pViewIdentifier + '"'
 			+ ' markerWidth="' + tmpSelectedMarker.MarkerWidth + '"'

package/source/providers/PictProvider-Flow-Geometry.js

@@ -134,13 +134,25 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		let tmpEdge = this.getEdgeFromSide(pSide);
 		let tmpZone = this._getZoneFromSide(pSide);
 
+		// Minimum spacing between port centers (px)
+		let tmpMinSpacing = 16;
+
+		// Reserve space at the bottom of the body so that port badges
+		// never overlap the panel-indicator icon (10×10 rect at bottom-right)
+		// and always leave a visible gap above the node bottom edge.
+		let tmpBottomPad = 16;
+
 		if (tmpEdge === 'left' || tmpEdge === 'right')
 		{
 			let tmpX = (tmpEdge === 'left') ? 0 : pWidth;
-			let tmpBodyHeight = pHeight - pTitleBarHeight;
+			let tmpBodyHeight = pHeight - pTitleBarHeight - tmpBottomPad;
 			let tmpZoneStart = pTitleBarHeight + tmpBodyHeight * tmpZone.start;
 			let tmpZoneHeight = tmpBodyHeight * (tmpZone.end - tmpZone.start);
 			let tmpSpacing = tmpZoneHeight / (pTotal + 1);
+			if (tmpSpacing < tmpMinSpacing)
+			{
+				tmpSpacing = tmpMinSpacing;
+			}
 			let tmpY = tmpZoneStart + tmpSpacing * (pIndex + 1);
 			return { x: tmpX, y: tmpY };
 		}
@@ -150,6 +162,10 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		let tmpZoneStart = pWidth * tmpZone.start;
 		let tmpZoneWidth = pWidth * (tmpZone.end - tmpZone.start);
 		let tmpSpacing = tmpZoneWidth / (pTotal + 1);
+		if (tmpSpacing < tmpMinSpacing)
+		{
+			tmpSpacing = tmpMinSpacing;
+		}
 		let tmpX = tmpZoneStart + tmpSpacing * (pIndex + 1);
 		return { x: tmpX, y: tmpY };
 	}
@@ -193,6 +209,72 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 			default:             return { start: 0.0,   end: 1.0 };
 		}
 	}
+	/**
+	 * Compute the minimum node height required so that all ports
+	 * (with their badges) fit within the node boundary.
+	 *
+	 * Uses the same zone system and minimum spacing as getPortLocalPosition.
+	 * For each left/right zone, calculates where the last port would land
+	 * and ensures the node is tall enough to contain it plus badge clearance.
+	 *
+	 * @param {Array} pPorts - Array of port objects with Side, Direction
+	 * @param {number} pTitleBarHeight - Height of the title bar
+	 * @returns {number} Minimum node height in pixels (0 if no ports)
+	 */
+	computeMinimumNodeHeight(pPorts, pTitleBarHeight)
+	{
+		if (!pPorts || !Array.isArray(pPorts) || pPorts.length === 0)
+		{
+			return 0;
+		}
+
+		let tmpMinSpacing = 16;
+		let tmpBadgeHalfHeight = 6;
+		let tmpBottomPad = 16;
+
+		// Count ports per Side value
+		let tmpCountBySide = {};
+		for (let i = 0; i < pPorts.length; i++)
+		{
+			let tmpSide = pPorts[i].Side || (pPorts[i].Direction === 'input' ? 'left' : 'right');
+			if (!tmpCountBySide[tmpSide])
+			{
+				tmpCountBySide[tmpSide] = 0;
+			}
+			tmpCountBySide[tmpSide]++;
+		}
+
+		let tmpMinHeight = 0;
+
+		for (let tmpSide in tmpCountBySide)
+		{
+			let tmpCount = tmpCountBySide[tmpSide];
+			let tmpEdge = this.getEdgeFromSide(tmpSide);
+
+			// Only left/right edge zones affect required height
+			if (tmpEdge !== 'left' && tmpEdge !== 'right')
+			{
+				continue;
+			}
+
+			let tmpZone = this._getZoneFromSide(tmpSide);
+
+			// With bottomPad reserving space at the bottom:
+			//   bodyHeight = H - titleBar - bottomPad
+			//   lastPortY = titleBar + bodyHeight * zone.start + minSpacing * count
+			//   Need: lastPortY + badgeHalfHeight <= H - bottomPad
+			// Solving for H:
+			//   H >= titleBar + bottomPad + (minSpacing * count + badgeHalfHeight) / (1 - zone.start)
+			let tmpRequired = pTitleBarHeight + tmpBottomPad + (tmpMinSpacing * tmpCount + tmpBadgeHalfHeight) / (1 - tmpZone.start);
+
+			if (tmpRequired > tmpMinHeight)
+			{
+				tmpMinHeight = tmpRequired;
+			}
+		}
+
+		return Math.ceil(tmpMinHeight);
+	}
 }
 
 module.exports = PictProviderFlowGeometry;

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

@@ -87,6 +87,21 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		// Build the port-type CSS class suffix for connection coloring
 		let tmpConnTypeClass = tmpSourcePortType ? (' conn-type-' + tmpSourcePortType) : '';
 
+		// Determine the arrowhead marker based on port type
+		let tmpArrowMarkerId;
+		if (pIsSelected)
+		{
+			tmpArrowMarkerId = 'flow-arrowhead-selected-' + tmpViewIdentifier;
+		}
+		else if (tmpSourcePortType)
+		{
+			tmpArrowMarkerId = 'flow-arrowhead-' + tmpSourcePortType + '-' + tmpViewIdentifier;
+		}
+		else
+		{
+			tmpArrowMarkerId = 'flow-arrowhead-' + tmpViewIdentifier;
+		}
+
 		// Hit area (wider invisible path for easier selection)
 		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
 		if (tmpShapeProvider)
@@ -101,6 +116,8 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 				tmpPathElement.setAttribute('class',
 					(tmpPathElement.getAttribute('class') || '') + tmpConnTypeClass);
 			}
+			// Override the default arrowhead with the typed one
+			tmpPathElement.setAttribute('marker-end', 'url(#' + tmpArrowMarkerId + ')');
 			if (tmpStrokeDashArray)
 			{
 				tmpPathElement.setAttribute('stroke-dasharray', tmpStrokeDashArray);
@@ -121,15 +138,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpPathElement.setAttribute('d', tmpPath);
 			tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
 			tmpPathElement.setAttribute('data-element-type', 'connection');
-
-			if (pIsSelected)
-			{
-				tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-selected-${tmpViewIdentifier})`);
-			}
-			else
-			{
-				tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-${tmpViewIdentifier})`);
-			}
+			tmpPathElement.setAttribute('marker-end', 'url(#' + tmpArrowMarkerId + ')');
 
 			if (tmpStrokeDashArray)
 			{

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

@@ -49,6 +49,23 @@ class PictViewFlowNode extends libPictView
 		let tmpHeight = pNodeData.Height || 80;
 		let tmpTitleBarHeight = this.options.NodeTitleBarHeight;
 
+		// Ensure node is tall enough for all ports in their zones
+		let tmpGeomProvider = this._FlowView._GeometryProvider;
+		if (tmpGeomProvider && pNodeData.Ports && pNodeData.Ports.length > 0)
+		{
+			let tmpMinHeight = tmpGeomProvider.computeMinimumNodeHeight(pNodeData.Ports, tmpTitleBarHeight);
+			if (tmpMinHeight > tmpHeight)
+			{
+				tmpHeight = tmpMinHeight;
+			}
+		}
+
+		// Write the adjusted dimensions back to the node data so that
+		// connection rendering (which reads pNodeData.Width/Height to
+		// compute port positions) uses the same values we render with.
+		pNodeData.Width = tmpWidth;
+		pNodeData.Height = tmpHeight;
+
 		// Determine node body mode from theme (bracket vs rect)
 		let tmpNodeBodyMode = 'rect';
 		if (this._FlowView._ThemeProvider)
@@ -319,7 +336,140 @@ class PictViewFlowNode extends libPictView
 				let tmpPort = tmpPorts[i];
 				let tmpPosition = this._getPortLocalPosition(tmpSide, i, tmpPorts.length, pWidth, pHeight);
 
-				// Port circle
+				// 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', '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', '#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)
@@ -349,82 +499,10 @@ class PictViewFlowNode extends libPictView
 				}
 				pGroup.appendChild(tmpCircle);
 
-				// Port label — use the edge for alignment (all positions on the
-				// same edge share the same label direction)
-				if (tmpPort.Label)
+				// Port label text (on top of everything)
+				if (tmpLabelElement)
 				{
-					let tmpLabel = this._FlowView._SVGHelperProvider.createSVGElement('text');
-					tmpLabel.setAttribute('class', 'pict-flow-port-label');
-					tmpLabel.textContent = tmpPort.Label;
-
-					// Base offset from port center; PortLabelPadding adds extra space
-					let tmpLabelOffset = 12;
-					let tmpPaddingExtra = tmpPortLabelPadding ? 8 : 0;
-
-					// When PortLabelsOutside is true, labels render outside the node
-				// boundary (away from center) instead of inside (toward center).
-				// The direction multiplier flips the offset direction per edge.
-				let tmpOutsideFlip = tmpPortLabelsOutside ? -1 : 1;
-
-				if (tmpPortLabelsVertical)
-					{
-						switch (tmpEdge)
-						{
-							case 'left':
-								tmpLabel.setAttribute('x', String(tmpPosition.x + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip}, ${tmpPosition.y})`);
-								break;
-							case 'right':
-								tmpLabel.setAttribute('x', String(tmpPosition.x - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip}, ${tmpPosition.y})`);
-								break;
-							case 'top':
-								tmpLabel.setAttribute('x', String(tmpPosition.x));
-								tmpLabel.setAttribute('y', String(tmpPosition.y + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x}, ${tmpPosition.y + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip})`);
-								break;
-							case 'bottom':
-								tmpLabel.setAttribute('x', String(tmpPosition.x));
-								tmpLabel.setAttribute('y', String(tmpPosition.y - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x}, ${tmpPosition.y - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip})`);
-								break;
-						}
-					}
-					else
-					{
-						// Horizontal labels (default)
-						switch (tmpEdge)
-						{
-							case 'left':
-								tmpLabel.setAttribute('x', String(tmpPosition.x + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', tmpPortLabelsOutside ? 'end' : 'start');
-								break;
-							case 'right':
-								tmpLabel.setAttribute('x', String(tmpPosition.x - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', tmpPortLabelsOutside ? 'start' : 'end');
-								break;
-							case 'top':
-								tmpLabel.setAttribute('x', String(tmpPosition.x));
-								tmpLabel.setAttribute('y', String(tmpPosition.y + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								break;
-							case 'bottom':
-								tmpLabel.setAttribute('x', String(tmpPosition.x));
-								tmpLabel.setAttribute('y', String(tmpPosition.y - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
-								tmpLabel.setAttribute('text-anchor', 'middle');
-								break;
-						}
-					}
-					tmpLabel.setAttribute('dominant-baseline', 'central');
-					pGroup.appendChild(tmpLabel);
+					pGroup.appendChild(tmpLabelElement);
 				}
 			}
 		}

package/source/views/PictView-Flow.js

@@ -1328,7 +1328,20 @@ class PictViewFlow extends libPictView
 
 		let tmpTitleBarHeight = (this._NodeView && this._NodeView.options.NodeTitleBarHeight) || 28;
 
-		let tmpLocal = this._GeometryProvider.getPortLocalPosition(tmpPort.Side, tmpPortIndex, tmpPortCount, tmpNode.Width, tmpNode.Height, tmpTitleBarHeight);
+		// Use the adjusted node height that accounts for minimum port
+		// spacing.  Connections render before nodes, so the node renderer
+		// may not have written back its adjusted height yet.
+		let tmpHeight = tmpNode.Height || 80;
+		if (this._GeometryProvider && tmpNode.Ports && tmpNode.Ports.length > 0)
+		{
+			let tmpMinHeight = this._GeometryProvider.computeMinimumNodeHeight(tmpNode.Ports, tmpTitleBarHeight);
+			if (tmpMinHeight > tmpHeight)
+			{
+				tmpHeight = tmpMinHeight;
+			}
+		}
+
+		let tmpLocal = this._GeometryProvider.getPortLocalPosition(tmpPort.Side, tmpPortIndex, tmpPortCount, tmpNode.Width, tmpHeight, tmpTitleBarHeight);
 
 		return { x: tmpNode.X + tmpLocal.x, y: tmpNode.Y + tmpLocal.y, side: tmpPort.Side || 'right' };
 	}
@@ -1381,6 +1394,34 @@ class PictViewFlow extends libPictView
 			let tmpIsSelected = (this._FlowData.ViewState.SelectedNodeHash === tmpNode.Hash);
 			let tmpNodeTypeConfig = this._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._NodeView.renderNode(tmpNode, this._NodesLayer, tmpIsSelected, tmpNodeTypeConfig);
 		}