pict-section-flow 0.0.3 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.3",
+    "version": "0.0.6",
     "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;
 	}
 
@@ -132,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);
 		}
 
@@ -139,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
@@ -184,6 +194,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 +262,6 @@ module.exports.default_configuration =
 	PortLabelsOnHover: false,
 	PortLabelsVertical: false,
 	PortLabelPadding: false,
+	PortLabelsOutside: false,
 	LabelsInFront: true
 };

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/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-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/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/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

@@ -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];
@@ -323,18 +329,28 @@ 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
+				// 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 +361,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;
 						}