pict-section-flow 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "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,18 @@ 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: #9b59b6;
+			--pf-port-error-fill: #e74c3c;
+
+			/* Connection Type Colors */
+			--pf-connection-event-stroke: #95a5a6;
+			--pf-connection-data-stroke: #9b59b6;
+			--pf-connection-error-stroke: #e74c3c;
+
 			/* Panels */
 			--pf-panel-bg: #ffffff;
 			--pf-panel-border: #d0d4d8;
@@ -286,6 +298,22 @@ 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;
@@ -326,6 +354,16 @@ 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-value {
+			stroke: var(--pf-connection-data-stroke);
+		}
+		.pict-flow-connection.conn-type-setting {
+			stroke: var(--pf-connection-data-stroke);
+		}
+		.pict-flow-connection.conn-type-error {
+			stroke: var(--pf-connection-error-stroke);
+		}
 		.pict-flow-connection-hitarea {
 			fill: none;
 			stroke: transparent;
@@ -591,6 +629,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;
 	}

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,9 @@ 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) : '';
+
 		// Hit area (wider invisible path for easier selection)
 		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
 		if (tmpShapeProvider)
@@ -78,6 +96,11 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
 				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
+			if (tmpConnTypeClass)
+			{
+				tmpPathElement.setAttribute('class',
+					(tmpPathElement.getAttribute('class') || '') + tmpConnTypeClass);
+			}
 			if (tmpStrokeDashArray)
 			{
 				tmpPathElement.setAttribute('stroke-dasharray', tmpStrokeDashArray);
@@ -94,7 +117,7 @@ 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');

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

@@ -329,13 +329,22 @@ 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);