pict-section-flow 1.0.1 → 1.2.0

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

@@ -529,8 +529,44 @@ class PictViewFlowNode extends libPictView
 	 * @param {number} pTitleBarHeight
 	 * @param {Object} pNodeTypeConfig
 	 */
+	// Append a CSS fragment to an SVG element's inline style (which wins over the stylesheet), keeping
+	// any existing inline style.
+	_appendElementStyle(pElement, pStyleFragment)
+	{
+		let tmpExisting = pElement.getAttribute('style') || '';
+		if (tmpExisting && tmpExisting.charAt(tmpExisting.length - 1) !== ';') { tmpExisting += ';'; }
+		pElement.setAttribute('style', tmpExisting + pStyleFragment);
+	}
+
+	/**
+	 * Height of the strip that squares off the bottom corners of the title bar. It must cover the
+	 * bottom rounded corners (so the title bar meets the body in a straight seam) but must never reach
+	 * the top ones, so it is capped at half the title bar height. Without the cap a corner radius
+	 * larger than the title bar (a capsule card: radius 24 on a 22px bar) yields a strip taller than
+	 * the whole title bar, which paints over the rounded TOP corners and makes the card read as square
+	 * on top and rounded only on the bottom.
+	 *
+	 * @param {number|null} pCornerRadius - the card corner radius, or null for the theme default
+	 * @param {number} pTitleBarHeight - the title bar height in user units
+	 * @returns {number}
+	 */
+	static titleBarBottomStripHeight(pCornerRadius, pTitleBarHeight)
+	{
+		let tmpRadius = (typeof pCornerRadius === 'number') ? pCornerRadius : 0;
+		return Math.min(Math.max(8, tmpRadius), Math.floor(pTitleBarHeight / 2));
+	}
+
 	_renderRectNodeBody(pGroup, pNodeData, pWidth, pHeight, pTitleBarHeight, pNodeTypeConfig)
 	{
+		// Per-card corner radius (a node-data or node-type override of the theme default), so a card
+		// type can read as a rounded rectangle, a capsule, or a sharp box. null leaves the
+		// theme/CSS default in place. Set as the --pf-node-body-radius custom property on the node
+		// group; the body and title-bar both read it through their `rx: var(--pf-node-body-radius)`,
+		// and it inherits to both, so one assignment rounds the whole card.
+		let tmpCornerRadius = (typeof pNodeData.CornerRadius === 'number') ? pNodeData.CornerRadius
+			: ((pNodeTypeConfig && typeof pNodeTypeConfig.CornerRadius === 'number') ? pNodeTypeConfig.CornerRadius : null);
+		if (tmpCornerRadius != null) { this._appendElementStyle(pGroup, '--pf-node-body-radius:' + tmpCornerRadius + 'px'); }
+
 		// Node body (main rectangle)
 		let tmpBody = this._FlowView._SVGHelperProvider.createSVGElement('rect');
 		tmpBody.setAttribute('class', 'pict-flow-node-body');
@@ -598,16 +634,17 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpTitleBar.setAttribute('fill', pNodeData.TitleBarColor);
 		}
-
 		pGroup.appendChild(tmpTitleBar);
 
-		// Title bar bottom fill (to square off the rounded corners at the bottom of the title bar)
+		// Title bar bottom fill: squares off the rounded corners at the bottom of the title bar so it
+		// meets the body in a straight seam. See titleBarBottomStripHeight for why it is capped.
+		let tmpBottomStripHeight = PictViewFlowNode.titleBarBottomStripHeight(tmpCornerRadius, pTitleBarHeight);
 		let tmpTitleBarBottom = this._FlowView._SVGHelperProvider.createSVGElement('rect');
 		tmpTitleBarBottom.setAttribute('class', 'pict-flow-node-title-bar-bottom');
 		tmpTitleBarBottom.setAttribute('x', '0');
-		tmpTitleBarBottom.setAttribute('y', String(pTitleBarHeight - 8));
+		tmpTitleBarBottom.setAttribute('y', String(pTitleBarHeight - tmpBottomStripHeight));
 		tmpTitleBarBottom.setAttribute('width', String(pWidth));
-		tmpTitleBarBottom.setAttribute('height', '8');
+		tmpTitleBarBottom.setAttribute('height', String(tmpBottomStripHeight));
 		tmpTitleBarBottom.setAttribute('data-node-hash', pNodeData.Hash);
 		tmpTitleBarBottom.setAttribute('data-element-type', 'node-body');
 

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

@@ -242,6 +242,13 @@ class PictViewFlowPropertiesPanel extends libPictView
 	 */
 	_renderPanelContent(pPanelData, pBodyContainer)
 	{
+		// Connection (edge) panels resolve their config and data differently from node panels.
+		if (pPanelData.ConnectionHash)
+		{
+			this._renderConnectionPanelContent(pPanelData, pBodyContainer);
+			return;
+		}
+
 		let tmpNodeData = this._FlowView.getNode(pPanelData.NodeHash);
 		if (!tmpNodeData) return;
 
@@ -298,6 +305,54 @@ class PictViewFlowPropertiesPanel extends libPictView
 		this._renderPortSummary(pBodyContainer, tmpNodeTypeConfig);
 	}
 
+	/**
+	 * Render the content of a connection (edge) panel. The config is the FlowView's single
+	 * ConnectionPropertiesPanel (connections are not typed); the panel-type instance renders
+	 * against the connection object, so a Form panel edits Connection.Data.* and a Template panel
+	 * renders against the connection.
+	 *
+	 * @param {Object} pPanelData
+	 * @param {HTMLDivElement} pBodyContainer
+	 */
+	_renderConnectionPanelContent(pPanelData, pBodyContainer)
+	{
+		let tmpConnectionData = this._FlowView.getConnection(pPanelData.ConnectionHash);
+		if (!tmpConnectionData) return;
+
+		let tmpPanelConfig = this._FlowView.options.ConnectionPropertiesPanel;
+		if (!tmpPanelConfig)
+		{
+			pBodyContainer.innerHTML = '<em>No connection properties panel configured.</em>';
+			return;
+		}
+
+		let tmpPanelType = tmpPanelConfig.PanelType || 'Base';
+		let tmpServiceName = `PictFlowCardPropertiesPanel-${tmpPanelType}`;
+		let tmpInstance = this._PanelInstances[pPanelData.Hash];
+
+		if (!tmpInstance)
+		{
+			if (this.fable.servicesMap.hasOwnProperty(tmpServiceName))
+			{
+				tmpInstance = this.fable.instantiateServiceProviderWithoutRegistration(tmpServiceName, tmpPanelConfig);
+			}
+			else if (this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel'))
+			{
+				tmpInstance = this.fable.instantiateServiceProviderWithoutRegistration('PictFlowCardPropertiesPanel', tmpPanelConfig);
+			}
+			if (tmpInstance)
+			{
+				tmpInstance._FlowView = this._FlowView;
+				this._PanelInstances[pPanelData.Hash] = tmpInstance;
+			}
+		}
+
+		if (tmpInstance)
+		{
+			tmpInstance.render(pBodyContainer, tmpConnectionData);
+		}
+	}
+
 	/**
 	 * Render an auto-generated info panel for nodes without a configured PropertiesPanel.
 	 * Shows the node type, description, and a summary of input/output ports with
@@ -716,11 +771,23 @@ class PictViewFlowPropertiesPanel extends libPictView
 		let tmpTetherService = this._FlowView._TetherService;
 		if (!tmpTetherService) return;
 
-		let tmpNodeData = this._FlowView.getNode(pPanelData.NodeHash);
-		if (!tmpNodeData) return;
+		// A connection panel tethers to the edge midpoint; model it as a zero-size anchor at that
+		// point so the same tether geometry applies. A node panel tethers to its node.
+		let tmpAnchorData;
+		if (pPanelData.ConnectionHash)
+		{
+			let tmpMidpoint = this._FlowView.getConnectionMidpoint(pPanelData.ConnectionHash);
+			if (!tmpMidpoint) return;
+			tmpAnchorData = { X: tmpMidpoint.x, Y: tmpMidpoint.y, Width: 0, Height: 0 };
+		}
+		else
+		{
+			tmpAnchorData = this._FlowView.getNode(pPanelData.NodeHash);
+			if (!tmpAnchorData) return;
+		}
 
 		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
-		tmpTetherService.renderTether(pPanelData, tmpNodeData, pTethersLayer, pIsSelected, tmpViewIdentifier);
+		tmpTetherService.renderTether(pPanelData, tmpAnchorData, pTethersLayer, pIsSelected, tmpViewIdentifier);
 	}
 
 	/**

package/source/views/PictView-Flow.js

@@ -71,6 +71,11 @@ const _DefaultConfiguration =
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
 
+	// Properties panel for connections (edges). Connections are not typed, so one config serves
+	// them all: { PanelType, DefaultWidth, DefaultHeight, Title, Configuration }. When set, a
+	// double-click on a connection opens this panel; when false, double-click adds a bezier handle.
+	ConnectionPropertiesPanel: false,
+
 	// Layout-algorithm subsystem defaults
 	DefaultLayoutAlgorithm: 'Custom',
 	DefaultLayoutParameters: {},
@@ -1328,6 +1333,54 @@ class PictViewFlow extends libPictView
 		return this._PanelManager.togglePanel(pNodeHash);
 	}
 
+	/**
+	 * Open a properties panel for a connection (edge). Requires the ConnectionPropertiesPanel
+	 * option; returns false otherwise.
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	openConnectionPanel(pConnectionHash)
+	{
+		return this._PanelManager.openConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Toggle a properties panel for a connection.
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	toggleConnectionPanel(pConnectionHash)
+	{
+		return this._PanelManager.toggleConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Close all panels for a given connection.
+	 * @param {string} pConnectionHash
+	 * @returns {boolean}
+	 */
+	closePanelForConnection(pConnectionHash)
+	{
+		return this._PanelManager.closePanelForConnection(pConnectionHash);
+	}
+
+	/**
+	 * The midpoint of a connection in SVG coordinates, averaged from its two endpoint ports. Used
+	 * to place and tether a connection's properties panel. Returns null if the connection or
+	 * either port can not be resolved.
+	 * @param {string} pConnectionHash
+	 * @returns {{x: number, y: number}|null}
+	 */
+	getConnectionMidpoint(pConnectionHash)
+	{
+		let tmpConnection = this.getConnection(pConnectionHash);
+		if (!tmpConnection) return null;
+		let tmpSource = this.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
+		let tmpTarget = this.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
+		if (!tmpSource || !tmpTarget) return null;
+		return { x: (tmpSource.x + tmpTarget.x) / 2, y: (tmpSource.y + tmpTarget.y) / 2 };
+	}
+
 	/**
 	 * Update a panel's position (for drag).
 	 * @param {string} pPanelHash

package/test/Layout_tests.js

@@ -6,6 +6,8 @@ const libLayoutService = require('../source/services/PictService-Flow-Layout.js'
 
 const libLayoutCustom           = require('../source/providers/layouts/Layout-Custom.js');
 const libLayoutLayered          = require('../source/providers/layouts/Layout-Layered.js');
+const libLayoutStaggered        = require('../source/providers/layouts/Layout-Staggered.js');
+const libLayoutRank             = require('../source/providers/layouts/Layout-Rank.js');
 const libLayoutForcedFromCenter = require('../source/providers/layouts/Layout-ForcedFromCenter.js');
 const libLayoutGrid             = require('../source/providers/layouts/Layout-Grid.js');
 const libLayoutCircular         = require('../source/providers/layouts/Layout-Circular.js');
@@ -86,15 +88,15 @@ suite
 
 				test
 				(
-					'should register all seven built-in algorithms by default',
+					'should register all eight built-in algorithms by default',
 					function (fDone)
 					{
 						let tmpNames = _LayoutService.getAlgorithmNames();
 						libExpect(tmpNames).to.include.members([
-							'Custom', 'Layered', 'ForcedFromCenter',
+							'Custom', 'Layered', 'Staggered', 'ForcedFromCenter',
 							'Grid', 'Circular', 'Tabular', 'Columnar'
 						]);
-						libExpect(tmpNames.length).to.equal(7);
+						libExpect(tmpNames.length).to.equal(8);
 						fDone();
 					}
 				);
@@ -184,9 +186,10 @@ suite
 					function (fDone)
 					{
 						let tmpAll = _LayoutService.listAlgorithms();
-						libExpect(tmpAll.length).to.equal(7);
+						libExpect(tmpAll.length).to.equal(8);
 						let tmpNames = tmpAll.map((pA) => pA.Name);
 						libExpect(tmpNames).to.include('Custom');
+						libExpect(tmpNames).to.include('Staggered');
 						libExpect(tmpNames).to.include('ForcedFromCenter');
 						fDone();
 					}
@@ -315,6 +318,207 @@ suite
 						fDone();
 					}
 				);
+
+				test
+				(
+					'a back-edge cycle does NOT collapse into one column (regression)',
+					function (fDone)
+					{
+						// n0 -> n1 -> n2 -> n3 -> n4 with a back-edge n4 -> n1.
+						// Plain Kahn's would place n0, then dump n1..n4 into a single
+						// trailing layer (one tall column). The cycle-tolerant ranker
+						// must spread them across columns instead.
+						let tmpNodes = makeNodes(5);
+						let tmpConns = makeChain(5);
+						tmpConns.push({ Hash: 'c-back', SourceNodeHash: 'n-4', TargetNodeHash: 'n-1' });
+
+						libLayoutLayered.Apply(tmpNodes, tmpConns, libLayoutLayered.DefaultParameters);
+
+						let tmpColumns = {};
+						let tmpMaxPerColumn = 0;
+						for (let i = 0; i < tmpNodes.length; i++)
+						{
+							let tmpX = tmpNodes[i].X;
+							tmpColumns[tmpX] = (tmpColumns[tmpX] || 0) + 1;
+							tmpMaxPerColumn = Math.max(tmpMaxPerColumn, tmpColumns[tmpX]);
+						}
+						// Five distinct columns, one node each — no tower.
+						libExpect(Object.keys(tmpColumns).length).to.equal(5);
+						libExpect(tmpMaxPerColumn).to.equal(1);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'a self-loop does not strand a node in a trailing column',
+					function (fDone)
+					{
+						// n0 -> n1 -> n2 with a self-loop on n1.
+						let tmpNodes = makeNodes(3);
+						let tmpConns = makeChain(3);
+						tmpConns.push({ Hash: 'c-self', SourceNodeHash: 'n-1', TargetNodeHash: 'n-1' });
+
+						libLayoutLayered.Apply(tmpNodes, tmpConns, libLayoutLayered.DefaultParameters);
+
+						// Clean chain: three columns left to right, one node each.
+						libExpect(tmpNodes[0].X).to.be.below(tmpNodes[1].X);
+						libExpect(tmpNodes[1].X).to.be.below(tmpNodes[2].X);
+						fDone();
+					}
+				);
+			}
+		);
+
+		// ── Rank (shared ranker) ──────────────────────────────────────
+
+		suite
+		(
+			'Layout-Rank ranker',
+			function ()
+			{
+				test
+				(
+					'a chain ranks one node per rank, in order',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(4);
+						let tmpRanks = libLayoutRank.toRanks(tmpNodes, makeChain(4));
+						libExpect(tmpRanks.length).to.equal(4);
+						libExpect(tmpRanks[0]).to.deep.equal(['n-0']);
+						libExpect(tmpRanks[3]).to.deep.equal(['n-3']);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'unconnected nodes share the first rank',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(3);
+						let tmpRanks = libLayoutRank.toRanks(tmpNodes, []);
+						libExpect(tmpRanks.length).to.equal(1);
+						libExpect(tmpRanks[0].length).to.equal(3);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'toOrder visits every node exactly once even with a cycle',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(5);
+						let tmpConns = makeChain(5);
+						tmpConns.push({ Hash: 'c-back', SourceNodeHash: 'n-4', TargetNodeHash: 'n-1' });
+						let tmpOrder = libLayoutRank.toOrder(tmpNodes, tmpConns);
+						libExpect(tmpOrder.length).to.equal(5);
+						let tmpSeen = {};
+						for (let i = 0; i < tmpOrder.length; i++) tmpSeen[tmpOrder[i]] = true;
+						libExpect(Object.keys(tmpSeen).length).to.equal(5);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'empty input returns an empty rank list',
+					function (fDone)
+					{
+						libExpect(libLayoutRank.toRanks([], [])).to.deep.equal([]);
+						libExpect(libLayoutRank.toOrder(null, null)).to.deep.equal([]);
+						fDone();
+					}
+				);
+			}
+		);
+
+		// ── Staggered ─────────────────────────────────────────────────
+
+		suite
+		(
+			'Staggered algorithm',
+			function ()
+			{
+				test
+				(
+					'two rows zigzag: X strictly increases, Y alternates',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(4);
+						let tmpConns = makeChain(4);
+						libLayoutStaggered.Apply(tmpNodes, tmpConns, { Rows: 2, ColumnSpacing: 80, RowOffset: 150, StartX: 0, StartY: 0 });
+
+						// Topological order is n0..n3; column pitch = 180 + 80 = 260.
+						libExpect(tmpNodes[0].X).to.equal(0);
+						libExpect(tmpNodes[1].X).to.equal(260);
+						libExpect(tmpNodes[2].X).to.equal(520);
+						libExpect(tmpNodes[3].X).to.equal(780);
+						// Rows=2 → row pattern 0,1,0,1 → Y 0,150,0,150.
+						libExpect(tmpNodes[0].Y).to.equal(0);
+						libExpect(tmpNodes[1].Y).to.equal(150);
+						libExpect(tmpNodes[2].Y).to.equal(0);
+						libExpect(tmpNodes[3].Y).to.equal(150);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'three rows make a triangle-wave stairstep (down then up)',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(6);
+						let tmpConns = makeChain(6);
+						libLayoutStaggered.Apply(tmpNodes, tmpConns, { Rows: 3, RowOffset: 100, StartX: 0, StartY: 0 });
+
+						// period = 4 → row phases 0,1,2,1,0,1 → Y 0,100,200,100,0,100.
+						let tmpRows = tmpNodes.map((pN) => pN.Y / 100);
+						libExpect(tmpRows).to.deep.equal([0, 1, 2, 1, 0, 1]);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'column pitch follows the widest node',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(3);
+						tmpNodes[1].Width = 400; // widest
+						libLayoutStaggered.Apply(tmpNodes, makeChain(3), { ColumnSpacing: 50, StartX: 0 });
+						// pitch = 400 + 50 = 450
+						libExpect(tmpNodes[1].X).to.equal(450);
+						libExpect(tmpNodes[2].X).to.equal(900);
+						fDone();
+					}
+				);
+
+				test
+				(
+					'Rows=1 places every node on a single row',
+					function (fDone)
+					{
+						let tmpNodes = makeNodes(4);
+						libLayoutStaggered.Apply(tmpNodes, makeChain(4), { Rows: 1, StartY: 42 });
+						for (let i = 0; i < tmpNodes.length; i++)
+						{
+							libExpect(tmpNodes[i].Y).to.equal(42);
+						}
+						fDone();
+					}
+				);
+
+				test
+				(
+					'empty node list does not throw',
+					function (fDone)
+					{
+						libExpect(function () { libLayoutStaggered.Apply([], [], {}); }).to.not.throw();
+						fDone();
+					}
+				);
 			}
 		);
 

package/test/NodeView_tests.js

@@ -0,0 +1,49 @@
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPictViewFlowNode = require('../source/views/PictView-Flow-Node.js');
+
+suite('PictView-Flow-Node',
+function ()
+{
+	// The title-bar bottom strip squares off the title bar's lower corners. The regression it guards
+	// against: a corner radius larger than the title bar made the strip taller than the whole title
+	// bar, so it painted over the rounded TOP corners and the card read as square on top (only the
+	// bottom rounded). See titleBarBottomStripHeight.
+	suite('titleBarBottomStripHeight',
+	function ()
+	{
+		test('never exceeds half the title bar height, even for a capsule radius',
+		function ()
+		{
+			// radius 24 on a 22px title bar must not produce a 24px strip (which would cover the top)
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(24, 22)).to.equal(11);
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(100, 30)).to.equal(15);
+		});
+
+		test('covers small radii with the 8px floor',
+		function ()
+		{
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(5, 22)).to.equal(8);
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(0, 22)).to.equal(8);
+		});
+
+		test('treats a null/absent radius as no override (8px floor)',
+		function ()
+		{
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(null, 22)).to.equal(8);
+			libExpect(libPictViewFlowNode.titleBarBottomStripHeight(undefined, 22)).to.equal(8);
+		});
+
+		test('the strip is always at most the title bar height for any radius',
+		function ()
+		{
+			let tmpTitleBarHeight = 22;
+			for (let tmpRadius = 0; tmpRadius <= 60; tmpRadius++)
+			{
+				let tmpStrip = libPictViewFlowNode.titleBarBottomStripHeight(tmpRadius, tmpTitleBarHeight);
+				libExpect(tmpStrip).to.be.at.most(Math.floor(tmpTitleBarHeight / 2));
+			}
+		});
+	});
+});

package/test/PanelManager_tests.js

@@ -0,0 +1,172 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPanelManager = require('../source/services/PictService-Flow-PanelManager.js');
+
+/**
+ * Connection (edge) properties panels. The node-panel path is well covered through the view; these
+ * focus on the connection additions: gating on ConnectionPropertiesPanel, placement near the edge
+ * midpoint, the open/toggle/close lifecycle, and that node panels are not disturbed.
+ */
+suite
+(
+	'PictService-Flow-PanelManager (connection panels)',
+	function ()
+	{
+		let _Fable;
+		let _PanelManager;
+		let _MockFlowView;
+
+		setup
+		(
+			function ()
+			{
+				_Fable = new libFable({});
+
+				_MockFlowView =
+				{
+					fable: _Fable,
+					log: _Fable.log,
+					options:
+					{
+						ViewIdentifier: 'Test-Flow',
+						ConnectionPropertiesPanel: false
+					},
+					_FlowData:
+					{
+						Nodes:
+						[
+							{ Hash: 'n1', Type: 'state', X: 0, Y: 0, Width: 100, Height: 60, Ports: [ { Hash: 'n1-out', Direction: 'output' } ] },
+							{ Hash: 'n2', Type: 'state', X: 300, Y: 0, Width: 100, Height: 60, Ports: [ { Hash: 'n2-in', Direction: 'input' } ] }
+						],
+						Connections:
+						[
+							{ Hash: 'c1', SourceNodeHash: 'n1', SourcePortHash: 'n1-out', TargetNodeHash: 'n2', TargetPortHash: 'n2-in', Data: {} }
+						],
+						OpenPanels: [],
+						ViewState: { SelectedTetherHash: null }
+					},
+					getConnection: function (pHash) { return this._FlowData.Connections.find((pConn) => pConn.Hash === pHash) || null; },
+					getNode: function (pHash) { return this._FlowData.Nodes.find((pNode) => pNode.Hash === pHash) || null; },
+					getConnectionMidpoint: function (pHash) { return this.getConnection(pHash) ? { x: 200, y: 30 } : null; },
+					_NodeTypeProvider:
+					{
+						getNodeType: function () { return { Label: 'State', PropertiesPanel: { PanelType: 'Form', DefaultWidth: 300, DefaultHeight: 220, Title: 'State' } }; }
+					},
+					renderFlow: function () {},
+					marshalFromView: function () {},
+					_PropertiesPanelView: { destroyPanel: function () {} },
+					_EventHandlerProvider: { fireEvent: function () {} }
+				};
+
+				_PanelManager = new libPanelManager(_Fable, { FlowView: _MockFlowView }, 'PM-Test');
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel returns false when no ConnectionPropertiesPanel is configured',
+			function ()
+			{
+				let tmpResult = _PanelManager.openConnectionPanel('c1');
+				libExpect(tmpResult).to.equal(false);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel returns false for an unknown connection',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpResult = _PanelManager.openConnectionPanel('no-such-connection');
+				libExpect(tmpResult).to.equal(false);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel opens a panel carrying the ConnectionHash, placed near the midpoint',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form', DefaultWidth: 320, DefaultHeight: 240, Title: 'Transition' };
+				let tmpPanel = _PanelManager.openConnectionPanel('c1');
+
+				libExpect(tmpPanel).to.be.an('object');
+				libExpect(tmpPanel.ConnectionHash).to.equal('c1');
+				libExpect(tmpPanel.NodeHash).to.equal(null);
+				libExpect(tmpPanel.Title).to.equal('Transition');
+				libExpect(tmpPanel.Width).to.equal(320);
+				libExpect(tmpPanel.Height).to.equal(240);
+				// Midpoint is (200, 30); the panel is offset from it.
+				libExpect(tmpPanel.X).to.equal(240);
+				libExpect(tmpPanel.Y).to.equal(50);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+			}
+		);
+
+		test
+		(
+			'openConnectionPanel is idempotent: a second open returns the same panel',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpFirst = _PanelManager.openConnectionPanel('c1');
+				let tmpSecond = _PanelManager.openConnectionPanel('c1');
+				libExpect(tmpSecond.Hash).to.equal(tmpFirst.Hash);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+			}
+		);
+
+		test
+		(
+			'toggleConnectionPanel opens then closes',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpOpened = _PanelManager.toggleConnectionPanel('c1');
+				libExpect(tmpOpened).to.be.an('object');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+
+				let tmpClosed = _PanelManager.toggleConnectionPanel('c1');
+				libExpect(tmpClosed).to.equal(false);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'closePanelForConnection removes the connection panel',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				_PanelManager.openConnectionPanel('c1');
+				let tmpRemoved = _PanelManager.closePanelForConnection('c1');
+				libExpect(tmpRemoved).to.equal(true);
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(0);
+			}
+		);
+
+		test
+		(
+			'node panels still open alongside connection panels, keyed separately',
+			function ()
+			{
+				_MockFlowView.options.ConnectionPropertiesPanel = { PanelType: 'Form' };
+				let tmpNodePanel = _PanelManager.openPanel('n1');
+				let tmpConnPanel = _PanelManager.openConnectionPanel('c1');
+
+				libExpect(tmpNodePanel.NodeHash).to.equal('n1');
+				libExpect(tmpConnPanel.ConnectionHash).to.equal('c1');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(2);
+
+				// Closing the connection panel leaves the node panel intact.
+				_PanelManager.closePanelForConnection('c1');
+				libExpect(_MockFlowView._FlowData.OpenPanels.length).to.equal(1);
+				libExpect(_MockFlowView._FlowData.OpenPanels[0].NodeHash).to.equal('n1');
+			}
+		);
+	}
+);