pict-section-flow 0.0.5 → 0.0.7

package/package.json

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

package/source/PictFlowCard.js

@@ -133,6 +133,10 @@ class PictFlowCard extends libFableServiceProviderBase
 					MinimumInputCount: (typeof tmpInput.MinimumInputCount === 'number') ? tmpInput.MinimumInputCount : 0,
 					MaximumInputCount: (typeof tmpInput.MaximumInputCount === 'number') ? tmpInput.MaximumInputCount : -1
 				};
+			if (tmpInput.PortType)
+			{
+				tmpPort.PortType = tmpInput.PortType;
+			}
 			tmpPorts.push(tmpPort);
 		}
 
@@ -140,13 +144,18 @@ class PictFlowCard extends libFableServiceProviderBase
 		for (let i = 0; i < this.cardOutputs.length; i++)
 		{
 			let tmpOutput = this.cardOutputs[i];
-			tmpPorts.push(
+			let tmpOutPort =
 				{
 					Hash: null,
 					Direction: 'output',
 					Side: tmpOutput.Side || 'right',
 					Label: tmpOutput.Name || `Out ${i + 1}`
-				});
+				};
+			if (tmpOutput.PortType)
+			{
+				tmpOutPort.PortType = tmpOutput.PortType;
+			}
+			tmpPorts.push(tmpOutPort);
 		}
 
 		// If no ports were defined, provide sensible defaults

package/source/panels/FlowCardPropertiesPanel-Form.js

@@ -50,6 +50,11 @@ class FlowCardPropertiesPanelForm extends libPictFlowCardPropertiesPanel
 		let tmpContainerID = `pict-flow-panel-form-${pNodeData.Hash}`;
 		pContainer.innerHTML = `<div id="${tmpContainerID}"></div>`;
 
+		// Bind the node data to AppData.Record so the form descriptors
+		// (which use addresses like Record.Data.SearchString) resolve against
+		// the actual node object.
+		this.pict.AppData.Record = pNodeData;
+
 		try
 		{
 			// Look for an existing metacontroller or create one

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

@@ -61,6 +61,20 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-port-stroke: #ffffff;
 			--pf-port-stroke-width: 2;
 
+			/* Port Type Colors */
+			--pf-port-event-in-fill: #3498db;
+			--pf-port-event-out-fill: #2ecc71;
+			--pf-port-setting-fill: #e67e22;
+			--pf-port-value-fill: #f1c40f;
+			--pf-port-error-fill: #e74c3c;
+
+			/* 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 */
 			--pf-panel-bg: #ffffff;
 			--pf-panel-border: #d0d4d8;
@@ -286,18 +300,40 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			r: 7;
 			filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.20));
 		}
+		/* Port type color overrides */
+		.pict-flow-port.port-type-event-in {
+			fill: var(--pf-port-event-in-fill);
+		}
+		.pict-flow-port.port-type-event-out {
+			fill: var(--pf-port-event-out-fill);
+		}
+		.pict-flow-port.port-type-setting {
+			fill: var(--pf-port-setting-fill);
+		}
+		.pict-flow-port.port-type-value {
+			fill: var(--pf-port-value-fill);
+		}
+		.pict-flow-port.port-type-error {
+			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;
 		}
 		`;
@@ -326,6 +362,22 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			stroke: var(--pf-connection-selected-stroke);
 			stroke-width: 3;
 		}
+		/* Connection type color overrides (based on source port type) */
+		.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-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);
+		}
 		.pict-flow-connection-hitarea {
 			fill: none;
 			stroke: transparent;
@@ -591,6 +643,22 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-info-panel-port.output {
 			border-left: 3px solid var(--pf-port-output-fill);
 		}
+		/* Info panel port type color overrides */
+		.pict-flow-info-panel-port.port-type-event-in {
+			border-left-color: var(--pf-port-event-in-fill);
+		}
+		.pict-flow-info-panel-port.port-type-event-out {
+			border-left-color: var(--pf-port-event-out-fill);
+		}
+		.pict-flow-info-panel-port.port-type-setting {
+			border-left-color: var(--pf-port-setting-fill);
+		}
+		.pict-flow-info-panel-port.port-type-value {
+			border-left-color: var(--pf-port-value-fill);
+		}
+		.pict-flow-info-panel-port.port-type-error {
+			border-left-color: var(--pf-port-error-fill);
+		}
 		.pict-flow-info-panel-port-constraint {
 			color: #8e99a4;
 			font-size: 10px;

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

@@ -195,7 +195,12 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 	{
 		let tmpConfig = this._DefaultShapes['port'];
 		let tmpElement = this._FlowView._SVGHelperProvider.createSVGElement(tmpConfig.ElementType);
-		tmpElement.setAttribute('class', tmpConfig.ClassName + ' ' + pPortData.Direction);
+		let tmpClassName = tmpConfig.ClassName + ' ' + pPortData.Direction;
+		if (pPortData.PortType)
+		{
+			tmpClassName += ' port-type-' + pPortData.PortType;
+		}
+		tmpElement.setAttribute('class', tmpClassName);
 		tmpElement.setAttribute('cx', String(pPosition.x));
 		tmpElement.setAttribute('cy', String(pPosition.y));
 		// Apply config attributes (r, etc.)
@@ -206,6 +211,10 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 		tmpElement.setAttribute('data-port-hash', pPortData.Hash);
 		tmpElement.setAttribute('data-node-hash', pNodeHash);
 		tmpElement.setAttribute('data-port-direction', pPortData.Direction);
+		if (pPortData.PortType)
+		{
+			tmpElement.setAttribute('data-port-type', pPortData.PortType);
+		}
 		tmpElement.setAttribute('data-element-type', 'port');
 		return tmpElement;
 	}
@@ -376,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 + '"'
@@ -386,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

@@ -24,6 +24,21 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		let tmpSourcePos = this._FlowView.getPortPosition(pConnection.SourceNodeHash, pConnection.SourcePortHash);
 		let tmpTargetPos = this._FlowView.getPortPosition(pConnection.TargetNodeHash, pConnection.TargetPortHash);
 
+		// Look up the source port's PortType for connection coloring
+		let tmpSourcePortType = null;
+		let tmpSourceNode = this._FlowView.getNode(pConnection.SourceNodeHash);
+		if (tmpSourceNode && tmpSourceNode.Ports)
+		{
+			for (let i = 0; i < tmpSourceNode.Ports.length; i++)
+			{
+				if (tmpSourceNode.Ports[i].Hash === pConnection.SourcePortHash)
+				{
+					tmpSourcePortType = tmpSourceNode.Ports[i].PortType || null;
+					break;
+				}
+			}
+		}
+
 		if (!tmpSourcePos || !tmpTargetPos) return;
 
 		let tmpData = pConnection.Data || {};
@@ -69,6 +84,24 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
 
+		// 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)
@@ -78,6 +111,13 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
 				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
+			if (tmpConnTypeClass)
+			{
+				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);
@@ -94,19 +134,11 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			pConnectionsLayer.appendChild(tmpHitArea);
 
 			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
-			tmpPathElement.setAttribute('class', `pict-flow-connection ${pIsSelected ? 'selected' : ''}`);
+			tmpPathElement.setAttribute('class', `pict-flow-connection${tmpConnTypeClass} ${pIsSelected ? 'selected' : ''}`);
 			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)
@@ -329,93 +479,30 @@ class PictViewFlowNode extends libPictView
 				else
 				{
 					tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
-					tmpCircle.setAttribute('class', `pict-flow-port ${tmpPort.Direction}`);
+					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 — 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);
 		}