pict-section-flow 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -11,12 +11,14 @@
     "author": "steven velozo <steven@velozo.com>",
     "license": "MIT",
     "dependencies": {
-        "pict-view": "^1.0.67",
+        "fable-serviceproviderbase": "^3.0.19",
         "pict-provider": "^1.0.12",
-        "fable-serviceproviderbase": "^3.0.19"
+        "pict-section-form": "^1.0.194",
+        "pict-view": "^1.0.67"
     },
     "devDependencies": {
-        "pict": "^1.0.354",
-        "quackage": "^1.0.59"
+        "pict": "^1.0.357",
+        "pict-router": "^1.0.6",
+        "quackage": "^1.0.64"
     }
 }

package/source/PictFlowCard.js

@@ -105,6 +105,7 @@ class PictFlowCard extends libFableServiceProviderBase
 		this.cardPortLabelsOnHover = (typeof tmpOptions.PortLabelsOnHover === 'boolean') ? tmpOptions.PortLabelsOnHover : false;
 		this.cardPortLabelsVertical = (typeof tmpOptions.PortLabelsVertical === 'boolean') ? tmpOptions.PortLabelsVertical : false;
 		this.cardPortLabelPadding = (typeof tmpOptions.PortLabelPadding === 'boolean') ? tmpOptions.PortLabelPadding : false;
+		this.cardPortLabelsOutside = (typeof tmpOptions.PortLabelsOutside === 'boolean') ? tmpOptions.PortLabelsOutside : false;
 		this.cardLabelsInFront = (typeof tmpOptions.LabelsInFront === 'boolean') ? tmpOptions.LabelsInFront : true;
 	}
 
@@ -184,6 +185,7 @@ class PictFlowCard extends libFableServiceProviderBase
 		tmpResult.PortLabelsOnHover = this.cardPortLabelsOnHover;
 		tmpResult.PortLabelsVertical = this.cardPortLabelsVertical;
 		tmpResult.PortLabelPadding = this.cardPortLabelPadding;
+		tmpResult.PortLabelsOutside = this.cardPortLabelsOutside;
 		tmpResult.LabelsInFront = this.cardLabelsInFront;
 
 		// Include properties panel config if defined
@@ -251,5 +253,6 @@ module.exports.default_configuration =
 	PortLabelsOnHover: false,
 	PortLabelsVertical: false,
 	PortLabelPadding: false,
+	PortLabelsOutside: false,
 	LabelsInFront: true
 };

package/source/panels/FlowCardPropertiesPanel-Template.js

@@ -67,7 +67,7 @@ class FlowCardPropertiesPanelTemplate extends libPictFlowCardPropertiesPanel
 		if (!tmpTemplateHash) return;
 
 		let tmpRecord = this._NodeData;
-		let tmpHTML = this.fable.parseTemplate(tmpTemplateHash, tmpRecord, null, [tmpRecord]);
+		let tmpHTML = this.fable.parseTemplateByHash(tmpTemplateHash, tmpRecord, null, [tmpRecord]);
 		this._ContentContainer.innerHTML = tmpHTML;
 	}
 }

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

@@ -6,6 +6,16 @@ const libFableServiceProviderBase = require('fable-serviceproviderbase');
  * Shared geometry utilities for the flow diagram.
  * Provides direction vectors and edge center calculations used by
  * connections, tethers, and other flow components.
+ *
+ * Port Side values (12 positions):
+ *
+ *   Top edge:    'top-left'     'top'     'top-right'
+ *   Left edge:   'left-top'     'left'    'left-bottom'
+ *   Right edge:  'right-top'    'right'   'right-bottom'
+ *   Bottom edge: 'bottom-left'  'bottom'  'bottom-right'
+ *
+ * The old 4-value sides ('left', 'right', 'top', 'bottom') map to
+ * the middle position on each edge for backward compatibility.
  */
 class PictProviderFlowGeometry extends libFableServiceProviderBase
 {
@@ -16,15 +26,55 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		this.serviceType = 'PictProviderFlowGeometry';
 	}
 
+	/**
+	 * Extract the edge name from a Side value.
+	 *
+	 * Maps all 12 positions (and the 4 legacy values) back to
+	 * the edge they sit on: 'left', 'right', 'top', or 'bottom'.
+	 *
+	 * @param {string} pSide - Any valid Side value
+	 * @returns {string} The edge: 'left', 'right', 'top', or 'bottom'
+	 */
+	getEdgeFromSide(pSide)
+	{
+		switch (pSide)
+		{
+			case 'left-top':
+			case 'left':
+			case 'left-bottom':
+				return 'left';
+
+			case 'right-top':
+			case 'right':
+			case 'right-bottom':
+				return 'right';
+
+			case 'top-left':
+			case 'top':
+			case 'top-right':
+				return 'top';
+
+			case 'bottom-left':
+			case 'bottom':
+			case 'bottom-right':
+				return 'bottom';
+
+			default:
+				return 'right';
+		}
+	}
+
 	/**
 	 * Get the outward unit direction vector for a given side.
 	 *
-	 * @param {string} pSide - 'left', 'right', 'top', or 'bottom'
+	 * All positions on the same edge share the same direction vector.
+	 *
+	 * @param {string} pSide - Any valid Side value (12 positions or 4 legacy)
 	 * @returns {{dx: number, dy: number}}
 	 */
 	sideDirection(pSide)
 	{
-		switch (pSide)
+		switch (this.getEdgeFromSide(pSide))
 		{
 			case 'left':   return { dx: -1, dy: 0 };
 			case 'right':  return { dx: 1, dy: 0 };
@@ -63,12 +113,17 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 	/**
 	 * Calculate a port's local 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.
+	 * Supports 12 positions (3 zones per edge).  For left/right edges,
+	 * the body area below the title bar is divided into three vertical zones
+	 * (start/middle/end).  For top/bottom edges, the full width is divided
+	 * into three horizontal zones.
 	 *
-	 * @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
+	 * Multiple ports sharing the same Side value distribute evenly within
+	 * their zone.
+	 *
+	 * @param {string} pSide - Side value (any of 12 positions or 4 legacy)
+	 * @param {number} pIndex - Index of this port within its Side group
+	 * @param {number} pTotal - Total ports with this Side value
 	 * @param {number} pWidth - Node width
 	 * @param {number} pHeight - Node height
 	 * @param {number} pTitleBarHeight - Height of the node title bar
@@ -76,30 +131,66 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 	 */
 	getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pTitleBarHeight)
 	{
-		let tmpSpacing;
+		let tmpEdge = this.getEdgeFromSide(pSide);
+		let tmpZone = this._getZoneFromSide(pSide);
+
+		if (tmpEdge === 'left' || tmpEdge === 'right')
+		{
+			let tmpX = (tmpEdge === 'left') ? 0 : pWidth;
+			let tmpBodyHeight = pHeight - pTitleBarHeight;
+			let tmpZoneStart = pTitleBarHeight + tmpBodyHeight * tmpZone.start;
+			let tmpZoneHeight = tmpBodyHeight * (tmpZone.end - tmpZone.start);
+			let tmpSpacing = tmpZoneHeight / (pTotal + 1);
+			let tmpY = tmpZoneStart + tmpSpacing * (pIndex + 1);
+			return { x: tmpX, y: tmpY };
+		}
 
+		// top or bottom
+		let tmpY = (tmpEdge === 'top') ? 0 : pHeight;
+		let tmpZoneStart = pWidth * tmpZone.start;
+		let tmpZoneWidth = pWidth * (tmpZone.end - tmpZone.start);
+		let tmpSpacing = tmpZoneWidth / (pTotal + 1);
+		let tmpX = tmpZoneStart + tmpSpacing * (pIndex + 1);
+		return { x: tmpX, y: tmpY };
+	}
+
+	/**
+	 * Get the zone fraction (start, end) for a Side value.
+	 *
+	 * Each edge is divided into three zones of equal size:
+	 *   start:  0.0 — 0.333
+	 *   middle: 0.333 — 0.667
+	 *   end:    0.667 — 1.0
+	 *
+	 * @param {string} pSide
+	 * @returns {{start: number, end: number}}
+	 */
+	_getZoneFromSide(pSide)
+	{
 		switch (pSide)
 		{
-			case 'left':
-			{
-				let tmpBodyHeight = pHeight - pTitleBarHeight;
-				tmpSpacing = tmpBodyHeight / (pTotal + 1);
-				return { x: 0, y: pTitleBarHeight + tmpSpacing * (pIndex + 1) };
-			}
-			case 'right':
-			{
-				let tmpBodyHeight = pHeight - pTitleBarHeight;
-				tmpSpacing = tmpBodyHeight / (pTotal + 1);
-				return { x: pWidth, y: pTitleBarHeight + tmpSpacing * (pIndex + 1) };
-			}
-			case 'top':
-				tmpSpacing = pWidth / (pTotal + 1);
-				return { x: tmpSpacing * (pIndex + 1), y: 0 };
-			case 'bottom':
-				tmpSpacing = pWidth / (pTotal + 1);
-				return { x: tmpSpacing * (pIndex + 1), y: pHeight };
-			default:
-				return { x: pWidth, y: pHeight / 2 };
+			// Left edge: top, middle, bottom
+			case 'left-top':     return { start: 0.0,   end: 0.333 };
+			case 'left':         return { start: 0.333, end: 0.667 };
+			case 'left-bottom':  return { start: 0.667, end: 1.0 };
+
+			// Right edge: top, middle, bottom
+			case 'right-top':    return { start: 0.0,   end: 0.333 };
+			case 'right':        return { start: 0.333, end: 0.667 };
+			case 'right-bottom': return { start: 0.667, end: 1.0 };
+
+			// Top edge: left, middle, right
+			case 'top-left':     return { start: 0.0,   end: 0.333 };
+			case 'top':          return { start: 0.333, end: 0.667 };
+			case 'top-right':    return { start: 0.667, end: 1.0 };
+
+			// Bottom edge: left, middle, right
+			case 'bottom-left':  return { start: 0.0,   end: 0.333 };
+			case 'bottom':       return { start: 0.333, end: 0.667 };
+			case 'bottom-right': return { start: 0.667, end: 1.0 };
+
+			// Fallback: full range (legacy behavior)
+			default:             return { start: 0.0,   end: 1.0 };
 		}
 	}
 }

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

@@ -292,22 +292,28 @@ class PictViewFlowNode extends libPictView
 
 		let tmpPortLabelsVertical = (pNodeTypeConfig && pNodeTypeConfig.PortLabelsVertical);
 		let tmpPortLabelPadding = (pNodeTypeConfig && pNodeTypeConfig.PortLabelPadding);
+		let tmpPortLabelsOutside = (pNodeTypeConfig && pNodeTypeConfig.PortLabelsOutside);
+		let tmpGeometryProvider = this._FlowView._GeometryProvider;
 
-		// Group ports by side and direction for positioning
-		let tmpPortsBySide = { left: [], right: [], top: [], bottom: [] };
+		// 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])
+			if (!tmpPortsBySide[tmpSide])
 			{
-				tmpPortsBySide[tmpSide].push(tmpPort);
+				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];
@@ -334,7 +340,8 @@ class PictViewFlowNode extends libPictView
 				}
 				pGroup.appendChild(tmpCircle);
 
-				// Port label
+				// Port label — use the edge for alignment (all positions on the
+				// same edge share the same label direction)
 				if (tmpPort.Label)
 				{
 					let tmpLabel = this._FlowView._SVGHelperProvider.createSVGElement('text');
@@ -345,62 +352,64 @@ class PictViewFlowNode extends libPictView
 					let tmpLabelOffset = 12;
 					let tmpPaddingExtra = tmpPortLabelPadding ? 8 : 0;
 
-					if (tmpPortLabelsVertical)
+					// 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)
 					{
-						// Vertical labels: rotated -90° and centered on the port position.
-						// After rotation, text-anchor controls vertical centering, so 'middle'
-						// ensures the label is centered next to its port circle.
-						switch (tmpSide)
+						switch (tmpEdge)
 						{
 							case 'left':
-								tmpLabel.setAttribute('x', String(tmpPosition.x + tmpLabelOffset + tmpPaddingExtra));
+								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}, ${tmpPosition.y})`);
+								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip}, ${tmpPosition.y})`);
 								break;
 							case 'right':
-								tmpLabel.setAttribute('x', String(tmpPosition.x - tmpLabelOffset - tmpPaddingExtra));
+								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}, ${tmpPosition.y})`);
+								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));
+								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})`);
+								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));
+								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})`);
+								tmpLabel.setAttribute('transform', `rotate(-90, ${tmpPosition.x}, ${tmpPosition.y - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip})`);
 								break;
 						}
 					}
 					else
 					{
 						// Horizontal labels (default)
-						switch (tmpSide)
+						switch (tmpEdge)
 						{
 							case 'left':
-								tmpLabel.setAttribute('x', String(tmpPosition.x + tmpLabelOffset + tmpPaddingExtra));
+								tmpLabel.setAttribute('x', String(tmpPosition.x + (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
 								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', 'start');
+								tmpLabel.setAttribute('text-anchor', tmpPortLabelsOutside ? 'end' : 'start');
 								break;
 							case 'right':
-								tmpLabel.setAttribute('x', String(tmpPosition.x - tmpLabelOffset - tmpPaddingExtra));
+								tmpLabel.setAttribute('x', String(tmpPosition.x - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
 								tmpLabel.setAttribute('y', String(tmpPosition.y));
-								tmpLabel.setAttribute('text-anchor', 'end');
+								tmpLabel.setAttribute('text-anchor', tmpPortLabelsOutside ? 'start' : 'end');
 								break;
 							case 'top':
 								tmpLabel.setAttribute('x', String(tmpPosition.x));
-								tmpLabel.setAttribute('y', String(tmpPosition.y + tmpLabelOffset + tmpPaddingExtra));
+								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));
+								tmpLabel.setAttribute('y', String(tmpPosition.y - (tmpLabelOffset + tmpPaddingExtra) * tmpOutsideFlip));
 								tmpLabel.setAttribute('text-anchor', 'middle');
 								break;
 						}