pict-section-flow 0.0.8 → 0.0.9

package/package.json

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

package/source/PictFlowCard.js

@@ -137,6 +137,10 @@ class PictFlowCard extends libFableServiceProviderBase
 			{
 				tmpPort.PortType = tmpInput.PortType;
 			}
+			if (tmpInput.DataType)
+			{
+				tmpPort.DataType = tmpInput.DataType;
+			}
 			tmpPorts.push(tmpPort);
 		}
 
@@ -155,6 +159,10 @@ class PictFlowCard extends libFableServiceProviderBase
 			{
 				tmpOutPort.PortType = tmpOutput.PortType;
 			}
+			if (tmpOutput.DataType)
+			{
+				tmpOutPort.DataType = tmpOutput.DataType;
+			}
 			tmpPorts.push(tmpOutPort);
 		}
 

package/source/panels/FlowCardPropertiesPanel-Form.js

@@ -53,7 +53,7 @@ class FlowCardPropertiesPanelForm extends libPictFlowCardPropertiesPanel
 		// 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;
+		this.fable.AppData.Record = pNodeData;
 
 		try
 		{

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

@@ -60,6 +60,8 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			--pf-port-output-fill: #2ecc71;
 			--pf-port-stroke: #ffffff;
 			--pf-port-stroke-width: 2;
+			--pf-port-label-bg: rgba(255, 253, 240, 0.5);
+			--pf-port-label-text: #2c3e50;
 
 			/* Port Type Colors */
 			--pf-port-event-in-fill: #3498db;
@@ -663,6 +665,18 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			color: #8e99a4;
 			font-size: 10px;
 		}
+		/* Port summary section appended below form panels */
+		.pict-flow-port-summary {
+			margin-top: 12px;
+			padding-top: 8px;
+			border-top: 1px solid #e8eaed;
+		}
+		.pict-flow-info-panel-port.event {
+			border-left: 3px solid var(--pf-port-event-in-fill);
+		}
+		.pict-flow-info-panel-port.value {
+			border-left: 3px solid var(--pf-port-value-fill);
+		}
 		`;
 	}
 

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

@@ -436,7 +436,7 @@ class PictViewFlowNode extends libPictView
 					tmpBgRect.setAttribute('y', String(tmpBadgeY));
 					tmpBgRect.setAttribute('width', String(tmpBadgeWidth));
 					tmpBgRect.setAttribute('height', String(tmpBadgeHeight));
-					tmpBgRect.setAttribute('fill', 'rgba(255, 253, 240, 0.5)');
+					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)
@@ -461,7 +461,7 @@ class PictViewFlowNode extends libPictView
 					// 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.setAttribute('fill', 'var(--pf-port-label-text, #2c3e50)');
 					tmpLabelElement.textContent = tmpPort.Label;
 					tmpLabelElement.setAttribute('x', String(tmpTextX));
 					tmpLabelElement.setAttribute('y', String(tmpBadgeY + tmpBadgeHeight / 2));

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

@@ -56,6 +56,22 @@ const _DefaultConfiguration =
 			Hash: 'Flow-InfoPanel-Port-Constraint',
 			Template: ' <span class="pict-flow-info-panel-port-constraint">{~D:Record.ConstraintText~}</span>'
 		},
+		{
+			Hash: 'Flow-InfoPanel-Section-Generic',
+			Template: '<div class="pict-flow-info-panel-section"><div class="pict-flow-info-panel-section-title">{~D:Record.SectionTitle~}</div>{~D:Record.PortsContent~}</div>'
+		},
+		{
+			Hash: 'Flow-InfoPanel-Port-Event',
+			Template: '<div class="pict-flow-info-panel-port event">{~D:Record.Label~}</div>'
+		},
+		{
+			Hash: 'Flow-InfoPanel-Port-Value',
+			Template: '<div class="pict-flow-info-panel-port value">{~D:Record.Label~}{~D:Record.DataType~}</div>'
+		},
+		{
+			Hash: 'Flow-InfoPanel-Port-DataType',
+			Template: ' <span class="pict-flow-info-panel-port-constraint">{~D:Record.DataTypeText~}</span>'
+		},
 		{
 			Hash: 'Flow-NodeProps-Editor',
 			Template: '<div class="pict-flow-node-props-fields"><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title</label><input type="text" class="pict-flow-node-props-input" data-prop="Title" value="{~D:Record.Title~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Width" value="{~D:Record.Width~}" min="60" step="10" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Height</label><input type="number" class="pict-flow-node-props-input" data-prop="Height" value="{~D:Record.Height~}" min="40" step="10" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Fill</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyFill" value="{~D:Record.BodyFillValue~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Stroke</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyStroke" value="{~D:Record.BodyStrokeValue~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Stroke Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Style.BodyStrokeWidth" value="{~D:Record.BodyStrokeWidthValue~}" min="0" max="10" step="0.5" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title Bar</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.TitleBarColor" value="{~D:Record.TitleBarColorValue~}" /></div></div>'
@@ -262,6 +278,11 @@ class PictViewFlowPropertiesPanel extends libPictView
 		{
 			tmpInstance.render(pBodyContainer, tmpNodeData);
 		}
+
+		// After the form renders, append port summary sections showing
+		// event inputs, event outputs, and state outputs.
+		// SettingsInputs are already visible as form fields above.
+		this._renderPortSummary(pBodyContainer, tmpNodeTypeConfig);
 	}
 
 	/**
@@ -362,6 +383,107 @@ class PictViewFlowPropertiesPanel extends libPictView
 		pContainer.innerHTML = this.pict.parseTemplateByHash('Flow-InfoPanel-Wrapper', { PanelContent: tmpContentParts.join('') });
 	}
 
+	/**
+	 * Render port summary sections below the form panel content.
+	 * Shows event inputs, event outputs, and state outputs — the ports
+	 * that the form does not cover (since the form only shows SettingsInputs).
+	 *
+	 * @param {HTMLDivElement} pContainer
+	 * @param {Object} pNodeTypeConfig
+	 */
+	_renderPortSummary(pContainer, pNodeTypeConfig)
+	{
+		let tmpPorts = pNodeTypeConfig.DefaultPorts || [];
+		if (tmpPorts.length === 0) return;
+
+		// Categorize ports by type (settings are already shown as form fields)
+		let tmpEventInputs = [];
+		let tmpEventOutputs = [];
+		let tmpStateOutputs = [];
+
+		for (let i = 0; i < tmpPorts.length; i++)
+		{
+			let tmpPort = tmpPorts[i];
+			let tmpPortType = tmpPort.PortType || '';
+
+			if (tmpPortType === 'event-in')
+			{
+				tmpEventInputs.push(tmpPort);
+			}
+			else if (tmpPortType === 'event-out' || tmpPortType === 'error')
+			{
+				tmpEventOutputs.push(tmpPort);
+			}
+			else if (tmpPortType === 'value')
+			{
+				tmpStateOutputs.push(tmpPort);
+			}
+		}
+
+		// Only render if there are non-settings ports to show
+		if (tmpEventInputs.length === 0 && tmpEventOutputs.length === 0 && tmpStateOutputs.length === 0)
+		{
+			return;
+		}
+
+		let tmpSummaryParts = [];
+
+		// Event Inputs
+		if (tmpEventInputs.length > 0)
+		{
+			let tmpPortsContent = '';
+			for (let i = 0; i < tmpEventInputs.length; i++)
+			{
+				tmpPortsContent += this.pict.parseTemplateByHash('Flow-InfoPanel-Port-Event', { Label: tmpEventInputs[i].Label || tmpEventInputs[i].Name || 'Event In' });
+			}
+			tmpSummaryParts.push(this.pict.parseTemplateByHash('Flow-InfoPanel-Section-Generic', { SectionTitle: 'Event Inputs', PortsContent: tmpPortsContent }));
+		}
+
+		// Event Outputs
+		if (tmpEventOutputs.length > 0)
+		{
+			let tmpPortsContent = '';
+			for (let i = 0; i < tmpEventOutputs.length; i++)
+			{
+				let tmpPort = tmpEventOutputs[i];
+				let tmpLabel = tmpPort.Label || tmpPort.Name || 'Event Out';
+				if (tmpPort.PortType === 'error')
+				{
+					tmpLabel += ' ⚠';
+				}
+				tmpPortsContent += this.pict.parseTemplateByHash('Flow-InfoPanel-Port-Event', { Label: tmpLabel });
+			}
+			tmpSummaryParts.push(this.pict.parseTemplateByHash('Flow-InfoPanel-Section-Generic', { SectionTitle: 'Event Outputs', PortsContent: tmpPortsContent }));
+		}
+
+		// State Outputs
+		if (tmpStateOutputs.length > 0)
+		{
+			let tmpPortsContent = '';
+			for (let i = 0; i < tmpStateOutputs.length; i++)
+			{
+				let tmpPort = tmpStateOutputs[i];
+				let tmpLabel = tmpPort.Label || tmpPort.Name || 'Output';
+				let tmpDataType = '';
+				if (tmpPort.DataType)
+				{
+					tmpDataType = this.pict.parseTemplateByHash('Flow-InfoPanel-Port-DataType', { DataTypeText: tmpPort.DataType });
+				}
+				tmpPortsContent += this.pict.parseTemplateByHash('Flow-InfoPanel-Port-Value', { Label: tmpLabel, DataType: tmpDataType });
+			}
+			tmpSummaryParts.push(this.pict.parseTemplateByHash('Flow-InfoPanel-Section-Generic', { SectionTitle: 'State Outputs', PortsContent: tmpPortsContent }));
+		}
+
+		if (tmpSummaryParts.length > 0)
+		{
+			// Create a wrapper div for the port summary and append it to the container
+			let tmpSummaryDiv = document.createElement('div');
+			tmpSummaryDiv.className = 'pict-flow-info-panel pict-flow-port-summary';
+			tmpSummaryDiv.innerHTML = tmpSummaryParts.join('');
+			pContainer.appendChild(tmpSummaryDiv);
+		}
+	}
+
 	/**
 	 * Build the constraint markup for a port using configuration templates.
 	 *