pict-section-flow 1.0.1 → 1.2.0

package/example_applications/simple_cards/package.json

@@ -3,6 +3,14 @@
 	"version": "0.0.1",
 	"description": "Pict Section Flow - Simple Cards Example Application",
 	"main": "source/Pict-Application-FlowExample.js",
+	"retold": {
+		"ExampleApplication": {
+			"Stage": true,
+			"Title": "Simple Cards",
+			"Summary": "Twelve custom PictFlowCard subclasses across six categories — every panel type (Markdown / Template / Form / View), every BodyContent renderer (SVG / HTML / Canvas), wrapped in a multi-page Pict shell with router-driven navigation and a curated sample-graph catalog.",
+			"Complexity": "Basic"
+		}
+	},
 	"scripts": {
 		"start": "node source/Pict-Application-FlowExample.js",
 		"prebuild": "node ../../scripts/generate-card-help.js",
@@ -19,7 +27,7 @@
 		"pict-provider": "^1.0.3",
 		"pict-section-content": "^0.0.6",
 		"pict-section-form": "^1.0.192",
-		"pict-section-flow": "file:../../"
+		"pict-section-flow": "^1.0.1"
 	},
 	"devDependencies": {
 		"quackage": "^1.0.58"

package/example_applications/simple_cards/source/views/PictView-FlowExample-BottomBar.js

@@ -44,8 +44,8 @@ const _ViewConfiguration =
 <div class="flowexample-bottombar">
 	<span>Pict Section Flow Example &copy; 2025</span>
 	<div class="flowexample-bottombar-links">
-		<a href="https://github.com/stevenvelozo/pict" target="_blank">Pict</a>
-		<a href="https://github.com/stevenvelozo/fable" target="_blank">Fable</a>
+		<a href="https://github.com/fable-retold/pict" target="_blank">Pict</a>
+		<a href="https://github.com/fable-retold/fable" target="_blank">Fable</a>
 		<a onclick="{~P~}.PictApplication.navigateTo('/About')">About</a>
 	</div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -15,15 +15,15 @@
     "dependencies": {
         "fable-serviceproviderbase": "^3.0.19",
         "pict-provider": "^1.0.13",
-        "pict-section-form": "^1.0.196",
+        "pict-section-form": "^1.0.199",
         "pict-view": "^1.0.68"
     },
     "devDependencies": {
         "chai": "^6.2.2",
         "mocha": "^11.7.5",
-        "pict": "^1.0.369",
-        "pict-docuserve": "^1.3.2",
+        "pict": "^1.0.372",
+        "pict-docuserve": "^1.4.4",
         "pict-router": "^1.0.10",
-        "quackage": "^1.2.3"
+        "quackage": "^1.3.0"
     }
 }

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

@@ -40,7 +40,8 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 		let tmpFO = tmpSVGHelper.createSVGElement('foreignObject');
 		tmpFO.setAttribute('class', 'pict-flow-panel-foreign-object');
 		tmpFO.setAttribute('data-panel-hash', pPanelData.Hash);
-		tmpFO.setAttribute('data-node-hash', pPanelData.NodeHash);
+		tmpFO.setAttribute('data-node-hash', pPanelData.NodeHash || '');
+		if (pPanelData.ConnectionHash) { tmpFO.setAttribute('data-connection-hash', pPanelData.ConnectionHash); }
 		tmpFO.setAttribute('x', String(pPanelData.X));
 		tmpFO.setAttribute('y', String(pPanelData.Y));
 		tmpFO.setAttribute('width', String(pPanelData.Width));

package/source/providers/layouts/Layout-Layered.js

@@ -1,9 +1,10 @@
 const libCoerce = require('./Layout-Coerce.js');
+const libRank = require('./Layout-Rank.js');
 
 /**
  * Layout-Layered
  *
- * Topological-sort (Kahn's algorithm) left-to-right layered layout.
+ * Cycle-tolerant left-to-right layered layout.
  *
  * This is the original `autoLayout` behavior of pict-section-flow,
  * extracted into a layout-algorithm descriptor. Calling
@@ -34,100 +35,45 @@ module.exports =
 
 		let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
 
-		// Build adjacency information
 		let tmpNodeMap = {};
-		let tmpInDegree = {};
-		let tmpOutEdges = {};
-
 		for (let i = 0; i < pNodes.length; i++)
 		{
-			let tmpNode = pNodes[i];
-			tmpNodeMap[tmpNode.Hash] = tmpNode;
-			tmpInDegree[tmpNode.Hash] = 0;
-			tmpOutEdges[tmpNode.Hash] = [];
-		}
-
-		for (let i = 0; i < tmpConnections.length; i++)
-		{
-			let tmpConn = tmpConnections[i];
-			if (tmpInDegree.hasOwnProperty(tmpConn.TargetNodeHash))
-			{
-				tmpInDegree[tmpConn.TargetNodeHash]++;
-			}
-			if (tmpOutEdges.hasOwnProperty(tmpConn.SourceNodeHash))
-			{
-				tmpOutEdges[tmpConn.SourceNodeHash].push(tmpConn.TargetNodeHash);
-			}
+			tmpNodeMap[pNodes[i].Hash] = pNodes[i];
 		}
 
-		// Topological sort (Kahn's algorithm)
-		let tmpLayers = [];
-		let tmpQueue = [];
-		let tmpAssigned = {};
-
-		for (let tmpHash in tmpInDegree)
+		// Rank the nodes into layers, left to right, with cycle breaking. The
+		// shared ranker keeps back-edged graphs (workflows, state machines) from
+		// collapsing into one tall column the way plain Kahn's topological sort
+		// would. See Layout-Rank.js.
+		let tmpLayers = libRank.toRanks(pNodes, tmpConnections);
+
+		// Measure each layer's stacked height so layers can be centered on one
+		// shared horizontal axis. Without centering every layer top-aligns at
+		// StartY, so a one-node layer beside a five-node layer reads as a
+		// diagonal drift down the page instead of a balanced band.
+		let tmpLayerHeights = [];
+		let tmpMaxLayerHeight = 0;
+		for (let l = 0; l < tmpLayers.length; l++)
 		{
-			if (tmpInDegree[tmpHash] === 0)
+			let tmpHeight = 0;
+			for (let i = 0; i < tmpLayers[l].length; i++)
 			{
-				tmpQueue.push(tmpHash);
+				let tmpNode = tmpNodeMap[tmpLayers[l][i]];
+				tmpHeight += (tmpNode && tmpNode.Height) ? tmpNode.Height : 80;
+				if (i > 0) tmpHeight += tmpVerticalSpacing;
 			}
+			tmpLayerHeights.push(tmpHeight);
+			if (tmpHeight > tmpMaxLayerHeight) tmpMaxLayerHeight = tmpHeight;
 		}
 
-		while (tmpQueue.length > 0)
-		{
-			let tmpCurrentLayer = [];
-			let tmpNextQueue = [];
-
-			for (let i = 0; i < tmpQueue.length; i++)
-			{
-				let tmpNodeHash = tmpQueue[i];
-				if (tmpAssigned[tmpNodeHash]) continue;
-
-				tmpAssigned[tmpNodeHash] = true;
-				tmpCurrentLayer.push(tmpNodeHash);
-
-				let tmpEdges = tmpOutEdges[tmpNodeHash] || [];
-				for (let j = 0; j < tmpEdges.length; j++)
-				{
-					let tmpTargetHash = tmpEdges[j];
-					tmpInDegree[tmpTargetHash]--;
-					if (tmpInDegree[tmpTargetHash] <= 0 && !tmpAssigned[tmpTargetHash])
-					{
-						tmpNextQueue.push(tmpTargetHash);
-					}
-				}
-			}
-
-			if (tmpCurrentLayer.length > 0)
-			{
-				tmpLayers.push(tmpCurrentLayer);
-			}
-
-			tmpQueue = tmpNextQueue;
-		}
-
-		// Handle cycles or disconnected nodes
-		let tmpRemainingNodes = [];
-		for (let i = 0; i < pNodes.length; i++)
-		{
-			if (!tmpAssigned[pNodes[i].Hash])
-			{
-				tmpRemainingNodes.push(pNodes[i].Hash);
-			}
-		}
-		if (tmpRemainingNodes.length > 0)
-		{
-			tmpLayers.push(tmpRemainingNodes);
-		}
-
-		// Assign positions based on layers
+		// Assign positions: one column per layer, each layer vertically centered.
 		let tmpCurrentX = tmpStartX;
 
 		for (let tmpLayerIndex = 0; tmpLayerIndex < tmpLayers.length; tmpLayerIndex++)
 		{
 			let tmpLayer = tmpLayers[tmpLayerIndex];
 			let tmpMaxWidth = 0;
-			let tmpCurrentY = tmpStartY;
+			let tmpCurrentY = tmpStartY + ((tmpMaxLayerHeight - tmpLayerHeights[tmpLayerIndex]) / 2);
 
 			for (let i = 0; i < tmpLayer.length; i++)
 			{

package/source/providers/layouts/Layout-Rank.js

@@ -0,0 +1,141 @@
+/**
+ * Layout-Rank
+ *
+ * Shared cycle-tolerant topological ranking for the directed layouts
+ * (Layered, Staggered).
+ *
+ * Plain Kahn's topological sort drops every node that participates in a cycle
+ * into a single trailing rank. Any graph with back-edges (workflows, state
+ * machines: rejections, retries, "send back") therefore collapses into one
+ * tall stripe of unranked nodes, which is the historical "auto-layout bunches
+ * everything together and is useless" behavior.
+ *
+ * `toRanks` instead breaks each cycle at its most-resolved node: when a round
+ * finds nothing dependency-free but nodes remain, it forces the unassigned
+ * node with the fewest unmet predecessors into the next rank and continues.
+ * Cyclic graphs then rank left to right the same way a DAG does.
+ *
+ * Returns an array of ranks; each rank is an array of node Hashes in stable
+ * source order. Self-loops are ignored for ranking (they cannot define an
+ * order). Callers map Hashes back to node objects themselves.
+ */
+function toRanks(pNodes, pConnections)
+{
+	let tmpRanks = [];
+	if (!pNodes || pNodes.length === 0)
+	{
+		return tmpRanks;
+	}
+
+	let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
+
+	let tmpInDegree = {};
+	let tmpOutEdges = {};
+	for (let i = 0; i < pNodes.length; i++)
+	{
+		tmpInDegree[pNodes[i].Hash] = 0;
+		tmpOutEdges[pNodes[i].Hash] = [];
+	}
+
+	for (let i = 0; i < tmpConnections.length; i++)
+	{
+		let tmpConn = tmpConnections[i];
+		// A self-loop cannot define a rank order; skip it.
+		if (tmpConn.SourceNodeHash === tmpConn.TargetNodeHash)
+		{
+			continue;
+		}
+		if (tmpInDegree.hasOwnProperty(tmpConn.TargetNodeHash))
+		{
+			tmpInDegree[tmpConn.TargetNodeHash]++;
+		}
+		if (tmpOutEdges.hasOwnProperty(tmpConn.SourceNodeHash))
+		{
+			tmpOutEdges[tmpConn.SourceNodeHash].push(tmpConn.TargetNodeHash);
+		}
+	}
+
+	let tmpAssigned = {};
+	let tmpAssignedCount = 0;
+
+	while (tmpAssignedCount < pNodes.length)
+	{
+		let tmpRank = [];
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			let tmpHash = pNodes[i].Hash;
+			if (!tmpAssigned[tmpHash] && tmpInDegree[tmpHash] <= 0)
+			{
+				tmpRank.push(tmpHash);
+			}
+		}
+
+		if (tmpRank.length === 0)
+		{
+			// Cycle break: nothing is dependency-free, so force the unassigned
+			// node with the fewest remaining predecessors (ties keep source
+			// order, which keeps the result stable across runs).
+			let tmpMinDegree = Infinity;
+			let tmpPick = null;
+			for (let i = 0; i < pNodes.length; i++)
+			{
+				let tmpHash = pNodes[i].Hash;
+				if (!tmpAssigned[tmpHash] && tmpInDegree[tmpHash] < tmpMinDegree)
+				{
+					tmpMinDegree = tmpInDegree[tmpHash];
+					tmpPick = tmpHash;
+				}
+			}
+			if (tmpPick === null)
+			{
+				break; // safety; every node is already assigned
+			}
+			tmpRank.push(tmpPick);
+		}
+
+		// Commit the whole rank, then relax its out-edges so the next round
+		// sees the successors it just freed.
+		for (let i = 0; i < tmpRank.length; i++)
+		{
+			tmpAssigned[tmpRank[i]] = true;
+			tmpAssignedCount++;
+		}
+		for (let i = 0; i < tmpRank.length; i++)
+		{
+			let tmpEdges = tmpOutEdges[tmpRank[i]] || [];
+			for (let j = 0; j < tmpEdges.length; j++)
+			{
+				tmpInDegree[tmpEdges[j]]--;
+			}
+		}
+
+		tmpRanks.push(tmpRank);
+	}
+
+	return tmpRanks;
+}
+
+/**
+ * Flatten ranks to a single ordered list of node Hashes (rank by rank, source
+ * order within a rank). Convenience for layouts that walk one sequence.
+ */
+function toOrder(pNodes, pConnections)
+{
+	let tmpRanks = toRanks(pNodes, pConnections);
+	let tmpOrder = [];
+	for (let i = 0; i < tmpRanks.length; i++)
+	{
+		for (let j = 0; j < tmpRanks[i].length; j++)
+		{
+			tmpOrder.push(tmpRanks[i][j]);
+		}
+	}
+	return tmpOrder;
+}
+
+module.exports =
+{
+	toRanks: toRanks,
+	toOrder: toOrder
+};

package/source/providers/layouts/Layout-Staggered.js

@@ -0,0 +1,131 @@
+const libCoerce = require('./Layout-Coerce.js');
+const libRank = require('./Layout-Rank.js');
+
+/**
+ * Layout-Staggered
+ *
+ * Serpentine "stairstep" layout for directed graphs. It ranks the nodes left
+ * to right by connection topology (the same cycle-tolerant ranking the Layered
+ * layout uses), then walks that ordered sequence along a band that steps down a
+ * few rows and back up, advancing horizontally at every node.
+ *
+ * The point is vertical-space efficiency: a long directed chain (a workflow, a
+ * delivery pipeline, a state machine) laid out purely left to right runs off
+ * the right edge of the canvas. Folding it into a stairstep band keeps the
+ * left-to-right reading order while using the height of the viewport, so the
+ * whole graph frames at a usable zoom.
+ *
+ * `Rows` sets how deep the band steps before folding back: 2 is a simple
+ * zigzag (odd nodes high, even nodes low); 3+ is a deeper stairstep. The row
+ * index follows a triangle wave so the band descends and then climbs rather
+ * than snapping back to the top between runs.
+ *
+ * Numeric parameters are typed `PreciseNumber` so they survive ExpressionParser
+ * solver chains; Layout-Coerce converts them back to JS floats at entry.
+ */
+module.exports =
+{
+	Name: 'Staggered',
+	Label: 'Staggered (Stairstep)',
+	Description: 'Topological order folded along a serpentine stairstep band.',
+	DefaultEdgeTheme: 'Perimeter',
+
+	Apply: function (pNodes, pConnections, pParameters)
+	{
+		if (!pNodes || pNodes.length === 0) return;
+
+		let tmpParams = pParameters || {};
+		let tmpSpacing       = libCoerce.toFloat(tmpParams.Spacing, 1.0);
+		let tmpRows          = Math.max(1, libCoerce.toInt(tmpParams.Rows, 2));
+		let tmpColumnSpacing = libCoerce.toFloat(tmpParams.ColumnSpacing, 80) * tmpSpacing;
+		let tmpRowOffset     = libCoerce.toFloat(tmpParams.RowOffset, 150) * tmpSpacing;
+		let tmpStartX        = libCoerce.toFloat(tmpParams.StartX, 80);
+		let tmpStartY        = libCoerce.toFloat(tmpParams.StartY, 80);
+
+		let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
+
+		let tmpNodeMap = {};
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			tmpNodeMap[pNodes[i].Hash] = pNodes[i];
+		}
+
+		let tmpOrder = libRank.toOrder(pNodes, tmpConnections);
+
+		// A uniform column pitch (the widest node plus the spacing) keeps the
+		// stairstep diagonal even regardless of individual node widths.
+		let tmpMaxWidth = 0;
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			tmpMaxWidth = Math.max(tmpMaxWidth, pNodes[i].Width || 180);
+		}
+		let tmpColumnPitch = tmpMaxWidth + tmpColumnSpacing;
+
+		// Triangle wave: descend (Rows - 1) steps, then climb (Rows - 1) steps.
+		let tmpPeriod = (tmpRows > 1) ? (2 * (tmpRows - 1)) : 1;
+
+		for (let i = 0; i < tmpOrder.length; i++)
+		{
+			let tmpNode = tmpNodeMap[tmpOrder[i]];
+			if (!tmpNode) continue;
+
+			let tmpRow;
+			if (tmpRows <= 1)
+			{
+				tmpRow = 0;
+			}
+			else
+			{
+				let tmpPhase = i % tmpPeriod;
+				tmpRow = (tmpPhase < tmpRows) ? tmpPhase : (tmpPeriod - tmpPhase);
+			}
+
+			tmpNode.X = tmpStartX + (i * tmpColumnPitch);
+			tmpNode.Y = tmpStartY + (tmpRow * tmpRowOffset);
+		}
+	},
+
+	DefaultParameters:
+	{
+		Spacing: 1.0,
+		Rows: 2,
+		ColumnSpacing: 80,
+		RowOffset: 150,
+		StartX: 80,
+		StartY: 80
+	},
+
+	ParameterSchema:
+	{
+		Spacing:       { Type: 'PreciseNumber', Label: 'Spacing (multiplier)', Default: 1.0, Min: 0.1, Max: 5 },
+		Rows:          { Type: 'Number',        Label: 'Rows',          Default: 2,   Min: 1, Max: 12 },
+		ColumnSpacing: { Type: 'PreciseNumber', Label: 'Column spacing', Default: 80,  Min: 0, Max: 1000 },
+		RowOffset:     { Type: 'PreciseNumber', Label: 'Row offset',    Default: 150, Min: 0, Max: 1000 },
+		StartX:        { Type: 'PreciseNumber', Label: 'Start X',       Default: 80,  Min: -10000, Max: 10000 },
+		StartY:        { Type: 'PreciseNumber', Label: 'Start Y',       Default: 80,  Min: -10000, Max: 10000 }
+	},
+
+	ParameterManifest:
+	{
+		Scope: 'PictFlowLayout-Staggered',
+		Sections:
+		[
+			{ Name: 'Staggered Parameters', Hash: 'PFLStaggeredSection', Groups: [{ Name: 'Defaults', Hash: 'PFLStaggeredGroup' }] }
+		],
+		Descriptors:
+		{
+			'PictFlowLayoutEditor.Parameters.Spacing':
+			{ Name: 'Spacing (multiplier)', Hash: 'Spacing', DataType: 'PreciseNumber', Default: 1.0, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 0, Width: 6, Min: 0.1, Max: 5 } },
+			'PictFlowLayoutEditor.Parameters.Rows':
+			{ Name: 'Rows', Hash: 'Rows', DataType: 'Number', Default: 2, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 0, Width: 6, Min: 1, Max: 12 } },
+			'PictFlowLayoutEditor.Parameters.ColumnSpacing':
+			{ Name: 'Column spacing', Hash: 'ColumnSpacing', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 1, Width: 6, Min: 0, Max: 1000 } },
+			'PictFlowLayoutEditor.Parameters.RowOffset':
+			{ Name: 'Row offset', Hash: 'RowOffset', DataType: 'PreciseNumber', Default: 150, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 1, Width: 6, Min: 0, Max: 1000 } },
+			'PictFlowLayoutEditor.Parameters.StartX':
+			{ Name: 'Start X', Hash: 'StartX', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 2, Width: 6, Min: -10000, Max: 10000 } },
+			'PictFlowLayoutEditor.Parameters.StartY':
+			{ Name: 'Start Y', Hash: 'StartY', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 2, Width: 6, Min: -10000, Max: 10000 } }
+		}
+	}
+};

package/source/services/PictService-Flow-DataManager.js

@@ -328,6 +328,12 @@ class PictServiceFlowDataManager extends libFableServiceProviderBase
 
 		let tmpRemovedConnection = this._FlowView._FlowData.Connections.splice(tmpConnectionIndex, 1)[0];
 
+		// Close any properties panel open for this connection.
+		if (typeof this._FlowView.closePanelForConnection === 'function')
+		{
+			this._FlowView.closePanelForConnection(pConnectionHash);
+		}
+
 		if (this._FlowView._FlowData.ViewState.SelectedConnectionHash === pConnectionHash)
 		{
 			this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;

package/source/services/PictService-Flow-InteractionManager.js

@@ -322,7 +322,16 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				{
 					this._LastConnectionClickTime = 0;
 					this._LastConnectionClickHash = null;
-					this._addBezierHandle(tmpTarget, pEvent);
+					// When the host configured a connection properties panel, double-click opens it;
+					// otherwise keep the default behavior of adding a bezier handle.
+					if (this._FlowView.options.ConnectionPropertiesPanel && tmpConnectionHash)
+					{
+						this._FlowView.toggleConnectionPanel(tmpConnectionHash);
+					}
+					else
+					{
+						this._addBezierHandle(tmpTarget, pEvent);
+					}
 				}
 				else
 				{

package/source/services/PictService-Flow-Layout.js

@@ -2,6 +2,7 @@ const libFableServiceProviderBase = require('fable-serviceproviderbase');
 
 const libLayoutCustom           = require('../providers/layouts/Layout-Custom.js');
 const libLayoutLayered          = require('../providers/layouts/Layout-Layered.js');
+const libLayoutStaggered        = require('../providers/layouts/Layout-Staggered.js');
 const libLayoutForcedFromCenter = require('../providers/layouts/Layout-ForcedFromCenter.js');
 const libLayoutGrid             = require('../providers/layouts/Layout-Grid.js');
 const libLayoutCircular         = require('../providers/layouts/Layout-Circular.js');
@@ -20,6 +21,7 @@ const _BUILTIN_ALGORITHMS =
 [
 	libLayoutCustom,
 	libLayoutLayered,
+	libLayoutStaggered,
 	libLayoutForcedFromCenter,
 	libLayoutGrid,
 	libLayoutCircular,

package/source/services/PictService-Flow-PanelManager.js

@@ -152,6 +152,98 @@ class PictServiceFlowPanelManager extends libFableServiceProviderBase
 		return this.openPanel(pNodeHash);
 	}
 
+	/**
+	 * Open a properties panel for a connection (edge). The panel config comes from the FlowView's
+	 * ConnectionPropertiesPanel option (connections are not typed, so one config serves them all);
+	 * the panel is placed near the connection's midpoint and tethers to it. Returns false when no
+	 * ConnectionPropertiesPanel is configured, so a host that has not opted in keeps the default
+	 * edge behavior (double-click adds a bezier handle).
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false} The panel data, or false
+	 */
+	openConnectionPanel(pConnectionHash)
+	{
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return false;
+
+		let tmpPanelConfig = this._FlowView.options.ConnectionPropertiesPanel;
+		if (!tmpPanelConfig) return false;
+
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpExisting) return tmpExisting;
+
+		let tmpMidpoint = this._FlowView.getConnectionMidpoint(pConnectionHash) || { x: 0, y: 0 };
+		let tmpWidth = tmpPanelConfig.DefaultWidth || 300;
+		let tmpHeight = tmpPanelConfig.DefaultHeight || 200;
+
+		let tmpPanelData =
+		{
+			Hash: `panel-${this.fable.getUUID()}`,
+			ConnectionHash: pConnectionHash,
+			NodeHash: null,
+			PanelType: tmpPanelConfig.PanelType || 'Base',
+			Title: tmpPanelConfig.Title || 'Connection',
+			X: tmpMidpoint.x + 40,
+			Y: tmpMidpoint.y + 20,
+			Width: tmpWidth,
+			Height: tmpHeight
+		};
+
+		this._FlowView._FlowData.OpenPanels.push(tmpPanelData);
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onPanelOpened', tmpPanelData);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return tmpPanelData;
+	}
+
+	/**
+	 * Toggle a properties panel for a connection (open if closed, close if open).
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	toggleConnectionPanel(pConnectionHash)
+	{
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpExisting)
+		{
+			this.closePanel(tmpExisting.Hash);
+			return false;
+		}
+		return this.openConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Close all panels for a given connection.
+	 * @param {string} pConnectionHash
+	 * @returns {boolean}
+	 */
+	closePanelForConnection(pConnectionHash)
+	{
+		let tmpPanelsToClose = this._FlowView._FlowData.OpenPanels.filter((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpPanelsToClose.length === 0) return false;
+
+		for (let i = 0; i < tmpPanelsToClose.length; i++)
+		{
+			let tmpIndex = this._FlowView._FlowData.OpenPanels.indexOf(tmpPanelsToClose[i]);
+			if (tmpIndex >= 0)
+			{
+				this._FlowView._FlowData.OpenPanels.splice(tmpIndex, 1);
+			}
+			if (this._FlowView._PropertiesPanelView)
+			{
+				this._FlowView._PropertiesPanelView.destroyPanel(tmpPanelsToClose[i].Hash);
+			}
+		}
+
+		return true;
+	}
+
 	/**
 	 * Update a panel's position (for drag).
 	 * @param {string} pPanelHash
@@ -180,8 +272,20 @@ class PictServiceFlowPanelManager extends libFableServiceProviderBase
 			}
 		}
 
-		// Update the tether for this panel
-		this._FlowView._renderTethersForNode(tmpPanel.NodeHash);
+		// Update the tether for this panel. A node panel refreshes just its node's tethers; a
+		// connection panel has no node, so reconcile the panels layer (redraws all tethers, which
+		// is where the connection-midpoint tether is recomputed).
+		if (tmpPanel.ConnectionHash)
+		{
+			if (this._FlowView._PropertiesPanelView && this._FlowView._PanelsLayer && this._FlowView._TethersLayer)
+			{
+				this._FlowView._PropertiesPanelView.renderPanels(this._FlowView._FlowData.OpenPanels, this._FlowView._PanelsLayer, this._FlowView._TethersLayer, this._FlowView._FlowData.ViewState.SelectedTetherHash);
+			}
+		}
+		else
+		{
+			this._FlowView._renderTethersForNode(tmpPanel.NodeHash);
+		}
 	}
 }