pict-section-flow 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {

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

@@ -768,6 +768,19 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			cursor: pointer;
 			transition: stroke 0.15s;
 		}
+		/* A connection's label (Data.Label), drawn at the midpoint. The white halo (paint-order) keeps it
+		   legible where it crosses the line. */
+		.pict-flow-connection-label {
+			font-size: 12px;
+			font-family: inherit;
+			fill: var(--pf-text-primary, #2c3e50);
+			paint-order: stroke;
+			stroke: var(--theme-color-background-primary, #ffffff);
+			stroke-width: 3px;
+			stroke-linejoin: round;
+			pointer-events: none;
+			user-select: none;
+		}
 		.pict-flow-connection:hover {
 			stroke: var(--pf-connection-stroke-hover);
 			stroke-width: 3;
@@ -1285,6 +1298,19 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			border-right: none;
 			padding-right: 0;
 		}
+		/* The host-supplied extra-button group (ToolbarExtraButtons) renders even
+		   when empty; collapse it so consumers that pass no buttons see no gap. */
+		.pict-flow-toolbar-group:empty {
+			display: none;
+		}
+		.pict-flow-toolbar-btn-active {
+			background-color: var(--pf-button-active-bg);
+			border-color: var(--pf-button-hover-border);
+		}
+		/* An icon-only host button (ToolbarExtraButtons with no Label) renders an empty text span. */
+		.pict-flow-toolbar-btn-text:empty {
+			display: none;
+		}
 		.pict-flow-toolbar-btn {
 			display: inline-flex;
 			align-items: center;

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

@@ -465,6 +465,14 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 			+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-tether" points="' + tmpTetherMarker.Points + '" fill="' + tmpTetherMarker.Fill + '" />'
 			+ '</marker>';
 
+		// Generic per-connection end markers, selectable per connection via Data.SourceMarker /
+		// Data.TargetMarker (a host like a moodboard styles its own edges). fill="context-stroke" makes
+		// each marker take the connection's own stroke color, so a recolored line recolors its markers.
+		tmpMarkup += '<marker id="flow-marker-arrow-end-' + pViewIdentifier + '" markerWidth="10" markerHeight="10" refX="8.5" refY="5" orient="auto" markerUnits="strokeWidth"><path d="M1,1 L9,5 L1,9 z" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-arrow-start-' + pViewIdentifier + '" markerWidth="10" markerHeight="10" refX="1.5" refY="5" orient="auto-start-reverse" markerUnits="strokeWidth"><path d="M1,1 L9,5 L1,9 z" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-dot-' + pViewIdentifier + '" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto" markerUnits="strokeWidth"><circle cx="4" cy="4" r="3" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-square-' + pViewIdentifier + '" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto" markerUnits="strokeWidth"><rect x="1" y="1" width="6" height="6" fill="context-stroke" /></marker>';
+
 		return tmpMarkup;
 	}
 }

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

@@ -45,6 +45,14 @@ const _DefaultIcons =
 
 	// ── UI Icons ───────────────────────────────────────────────────────────
 
+	'edit': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>',
+
+	'check': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+
+	'background': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/></svg>',
+
+	'connect': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M8 8l8 8" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="6" cy="6" r="3" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="18" cy="18" r="3" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/></svg>',
+
 	'fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>',
 
 	'exit-fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="M14 10l7-7"/><path d="M3 21l7-7"/></svg>',

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

@@ -116,12 +116,13 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 		// Hit area (wider invisible path for easier selection)
 		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpPathElement = null;
 		if (tmpShapeProvider)
 		{
 			let tmpHitArea = tmpShapeProvider.createConnectionHitAreaElement(tmpPath, pConnection.Hash);
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
+			tmpPathElement = tmpShapeProvider.createConnectionPathElement(
 				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
 			if (tmpConnTypeClass)
 			{
@@ -145,7 +146,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpHitArea.setAttribute('data-element-type', 'connection-hitarea');
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
 			tmpPathElement.setAttribute('class', `pict-flow-connection${tmpConnTypeClass} ${pIsSelected ? 'selected' : ''}`);
 			tmpPathElement.setAttribute('d', tmpPath);
 			tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
@@ -160,14 +161,25 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			pConnectionsLayer.appendChild(tmpPathElement);
 		}
 
+		// Per-connection host styling (a moodboard styles its own edges): stroke color / width / dash and
+		// the end markers, applied only when the connection's Data carries them so default (workflow)
+		// connections are untouched. A label, when set, is drawn at the midpoint.
+		let tmpHasMarkers = (typeof tmpData.SourceMarker !== 'undefined' || typeof tmpData.TargetMarker !== 'undefined');
+		this._applyConnectionStyle(tmpPathElement, tmpData, tmpViewIdentifier);
+		this._renderConnectionLabel(pConnection, tmpData, pConnectionsLayer, tmpSourcePos, tmpTargetPos);
+
 		// Render the colored endpoint dot at each end of the connection
 		// into the dedicated endpoints layer (sits *above* the nodes
 		// layer so the dot doesn't get hidden under the card chrome
 		// when an edge theme places it on the node's perimeter).
 		// PortRenderer suppresses its own circle for any port that
-		// participates in a connection — we own the dot here.
+		// participates in a connection — we own the dot here. Skipped when the
+		// connection supplies its own end markers (those own the endpoints).
 		let tmpEndpointsLayer = this._FlowView._EndpointsLayer || pConnectionsLayer;
-		this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		if (!tmpHasMarkers)
+		{
+			this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		}
 
 		// When the resolved attachment differs from the card-defined port
 		// position (e.g. a Perimeter theme moved the dot to the edge of the
@@ -187,6 +199,66 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		}
 	}
 
+	// Apply per-connection host styling to the path element from the connection's Data: StrokeColor,
+	// StrokeWidth, StrokeStyle ('solid' | 'dashed' | 'dotted') and SourceMarker / TargetMarker
+	// ('none' | 'arrow' | 'dot' | 'square'). Each is applied only when present, so connections that do
+	// not carry these keys render exactly as before.
+	_applyConnectionStyle(pPathElement, pData, pViewIdentifier)
+	{
+		if (!pPathElement || !pData || !pPathElement.style) { return; }
+		// Stroke color / width / dash go through inline style, NOT SVG presentation attributes: the
+		// .pict-flow-connection CSS rule sets stroke + stroke-width, and a stylesheet rule beats a
+		// presentation attribute, so an attribute would be silently ignored. Inline style outranks the
+		// stylesheet, so the per-connection appearance wins.
+		if (pData.StrokeColor) { pPathElement.style.stroke = pData.StrokeColor; }
+		if (pData.StrokeWidth) { pPathElement.style.strokeWidth = String(pData.StrokeWidth); }
+		if (pData.StrokeStyle)
+		{
+			pPathElement.style.strokeDasharray = (pData.StrokeStyle === 'dashed') ? '7,5' : ((pData.StrokeStyle === 'dotted') ? '1.5,4' : 'none');
+		}
+		// Markers are not styled by CSS, so attributes are correct (they reference the marker defs).
+		if (typeof pData.TargetMarker !== 'undefined')
+		{
+			let tmpEnd = this._connectionMarkerId(pData.TargetMarker, 'end', pViewIdentifier);
+			if (tmpEnd) { pPathElement.setAttribute('marker-end', 'url(#' + tmpEnd + ')'); }
+			else { pPathElement.removeAttribute('marker-end'); }
+		}
+		if (typeof pData.SourceMarker !== 'undefined')
+		{
+			let tmpStart = this._connectionMarkerId(pData.SourceMarker, 'start', pViewIdentifier);
+			if (tmpStart) { pPathElement.setAttribute('marker-start', 'url(#' + tmpStart + ')'); }
+			else { pPathElement.removeAttribute('marker-start'); }
+		}
+	}
+
+	// Resolve a marker name + end ('start' | 'end') to its SVG marker def id; null for 'none'/unknown.
+	_connectionMarkerId(pMarker, pEnd, pViewIdentifier)
+	{
+		if (pMarker === 'arrow') { return 'flow-marker-arrow-' + pEnd + '-' + pViewIdentifier; }
+		if (pMarker === 'dot') { return 'flow-marker-dot-' + pViewIdentifier; }
+		if (pMarker === 'square') { return 'flow-marker-square-' + pViewIdentifier; }
+		return null;
+	}
+
+	// Draw a connection's label (Data.Label) at the midpoint of its endpoints. A white halo (paint-order
+	// stroke, set in CSS) keeps it legible over the line. Skipped when there is no label.
+	_renderConnectionLabel(pConnection, pData, pLayer, pSourcePos, pTargetPos)
+	{
+		// Render when a Label key is present (even ''), so a host that edits the label in place has an
+		// element to update; a connection with no Label key (a default workflow edge) gets none.
+		if (!pData || typeof pData.Label === 'undefined' || !pSourcePos || !pTargetPos) { return; }
+		if (!this._FlowView._SVGHelperProvider) { return; }
+		let tmpText = this._FlowView._SVGHelperProvider.createSVGElement('text');
+		tmpText.setAttribute('class', 'pict-flow-connection-label');
+		tmpText.setAttribute('x', String((pSourcePos.x + pTargetPos.x) / 2));
+		tmpText.setAttribute('y', String((pSourcePos.y + pTargetPos.y) / 2));
+		tmpText.setAttribute('text-anchor', 'middle');
+		tmpText.setAttribute('dominant-baseline', 'middle');
+		tmpText.setAttribute('data-connection-hash', pConnection.Hash);
+		tmpText.textContent = pData.Label;
+		pLayer.appendChild(tmpText);
+	}
+
 	/**
 	 * Append the colored endpoint dots for both ends of a connection
 	 * onto the destination layer (absolute coords). Reuses

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

@@ -1163,7 +1163,8 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		if (!tmpNodeHash || !tmpPortHash) return;
 
-		if (tmpPortDirection !== 'output')
+		// A connection normally starts from an output port; undirected mode lets any port start one.
+		if (!this._FlowView.options.EnableUndirectedConnections && tmpPortDirection !== 'output')
 		{
 			return;
 		}
@@ -1217,7 +1218,8 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			let tmpTargetNodeHash = tmpTarget.getAttribute('data-node-hash');
 			let tmpTargetPortDirection = tmpTarget.getAttribute('data-port-direction');
 
-			if (tmpTargetPortHash && tmpTargetNodeHash && tmpTargetPortDirection === 'input')
+			// A connection normally completes on an input port; undirected mode lets any port receive it.
+			if (tmpTargetPortHash && tmpTargetNodeHash && (this._FlowView.options.EnableUndirectedConnections || tmpTargetPortDirection === 'input'))
 			{
 				this._FlowView.addConnection(
 					this._ConnectSourceNodeHash,

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

@@ -11,6 +11,10 @@ const _DefaultConfiguration =
 
 	FlowViewIdentifier: 'Pict-Flow',
 
+	// Host-supplied buttons (mirrors the docked toolbar's ToolbarExtraButtons), so floating mode keeps
+	// the same custom buttons. Each entry is { Hash, Icon, Label?, Tooltip?, Active? }.
+	ToolbarExtraButtons: [],
+
 	CSS: false,
 
 	Templates:
@@ -64,6 +68,7 @@ const _DefaultConfiguration =
 		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('fullscreen')">
 		<span id="Flow-FloatingIcon-fullscreen-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
+	{~TS:Flow-FloatingToolbar-Extra-Button:Record.ToolbarExtraButtons~}
 	<div class="pict-flow-floating-separator"></div>
 	<button class="pict-flow-floating-btn" data-flow-action="dock-toolbar" title="Dock Toolbar"
 		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('dock-toolbar')">
@@ -71,6 +76,15 @@ const _DefaultConfiguration =
 	</button>
 </div>
 `
+		},
+		{
+			Hash: 'Flow-FloatingToolbar-Extra-Button',
+			// Icon-only host button (the floating toolbar is compact). Icon span
+			// is filled post-render by _populateIcons (keyed by Hash).
+			Template: /*html*/`<button class="pict-flow-floating-btn" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleExtraClick('{~D:Record.Hash~}', this)">
+	<span id="Flow-FloatingExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
+</button>`
 		}
 	],
 
@@ -111,9 +125,34 @@ class PictViewFlowFloatingToolbar extends libPictView
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
 	{
+		// Stamp the owning view onto each host button so its row resolves.
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
+			}
+		}
 		return super.render(pRenderableHash, pRenderDestinationAddress, this.options);
 	}
 
+	/**
+	 * Handle a click on a host-supplied (ToolbarExtraButtons) floating button.
+	 * Routes to the docked toolbar's _handleExtraAction (the single dispatch
+	 * point that fires the FlowView's onToolbarButton hook).
+	 *
+	 * @param {string} pHash - The button's Hash
+	 * @param {HTMLElement} pElement - The clicked button element
+	 */
+	_handleExtraClick(pHash, pElement)
+	{
+		if (this._ToolbarView)
+		{
+			this._ToolbarView._handleExtraAction(pHash, pElement);
+		}
+	}
+
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
@@ -222,6 +261,20 @@ class PictViewFlowFloatingToolbar extends libPictView
 				tmpElements[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpIconMap[tmpKeys[i]], 16);
 			}
 		}
+
+		// Host-supplied extra buttons (keyed by Hash, icon from the button's Icon key).
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				let tmpExtraIcon = this.pict.ContentAssignment.getElement(`#Flow-FloatingExtraIcon-${tmpExtraButtons[i].Hash}-${tmpFlowViewIdentifier}`);
+				if (tmpExtraIcon.length > 0)
+				{
+					tmpExtraIcon[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpExtraButtons[i].Icon, 16);
+				}
+			}
+		}
 	}
 
 	/**

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

@@ -52,6 +52,13 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpClassList += ' pict-flow-node-color-' + tmpColorRole;
 		}
+		// A host can stamp an extra CSS class onto a node via node.NodeClass (e.g. a moodboard marks a
+		// card whose connection points should stay visible on a read-only board). Survives re-renders
+		// because it lives on the node data.
+		if (typeof pNodeData.NodeClass === 'string' && pNodeData.NodeClass)
+		{
+			tmpClassList += ' ' + pNodeData.NodeClass;
+		}
 		tmpGroup.setAttribute('class', tmpClassList);
 		tmpGroup.setAttribute('transform', `translate(${pNodeData.X}, ${pNodeData.Y})`);
 		tmpGroup.setAttribute('data-node-hash', pNodeData.Hash);

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

@@ -226,14 +226,36 @@ class PictViewFlowPropertiesPanel extends libPictView
 		let tmpFO = pPanelsLayer.querySelector(`[data-panel-hash="${pPanelData.Hash}"]`);
 		if (tmpFO)
 		{
-			// Render appearance and help tabs. Tab-switching click handlers
-			// are inline `onclick=` attributes in Flow-PanelChrome-Template
-			// that call FlowView._handlePanelTabClick → switchPanelTab.
-			this._renderAppearanceTab(pPanelData, tmpFO);
-			this._renderHelpTab(pPanelData, tmpFO);
+			// The Appearance tab edits a node's body/title appearance, which a connection (edge) has none
+			// of -- so for a connection panel, hide that tab (and the now-single-tab bar) and leave just
+			// the connection's own panel. Node panels keep the appearance + help tabs.
+			if (pPanelData.ConnectionHash)
+			{
+				this._hidePanelTabsForConnection(tmpFO);
+			}
+			else
+			{
+				// Tab-switching click handlers are inline `onclick=` attributes in Flow-PanelChrome-Template
+				// that call FlowView._handlePanelTabClick → switchPanelTab.
+				this._renderAppearanceTab(pPanelData, tmpFO);
+				this._renderHelpTab(pPanelData, tmpFO);
+			}
 		}
 	}
 
+	// Hide the node-oriented Appearance (and Help) tabs plus the tab bar for a connection panel, so it
+	// shows only its single Properties pane with no lone tab.
+	_hidePanelTabsForConnection(pForeignObject)
+	{
+		if (!pForeignObject) { return; }
+		let tmpAppearanceTab = pForeignObject.querySelector('.pict-flow-panel-tab[data-tab-target="appearance"]');
+		if (tmpAppearanceTab) { tmpAppearanceTab.style.display = 'none'; }
+		let tmpAppearancePane = pForeignObject.querySelector('.pict-flow-panel-tab-pane[data-tab="appearance"]');
+		if (tmpAppearancePane) { tmpAppearancePane.style.display = 'none'; }
+		let tmpTabbar = pForeignObject.querySelector('.pict-flow-panel-tabbar');
+		if (tmpTabbar) { tmpTabbar.style.display = 'none'; }
+	}
+
 	/**
 	 * Instantiate (or reuse) the panel type implementation and render into the body container.
 	 *

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

@@ -15,6 +15,10 @@ const _DefaultConfiguration =
 	EnableAddNode: true,
 	EnableCardPalette: true,
 
+	// Host-supplied buttons (set by the FlowView from its own ToolbarExtraButtons option). Each entry
+	// is { Hash, Icon, Label?, Tooltip?, Active? }. Rendered as a group via Flow-Toolbar-Extra-Button.
+	ToolbarExtraButtons: [],
+
 	CSS: false,
 
 	Templates:
@@ -77,6 +81,7 @@ const _DefaultConfiguration =
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-zoom-fit-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
 	</div>
+	<div class="pict-flow-toolbar-group pict-flow-toolbar-extra">{~TS:Flow-Toolbar-Extra-Button:Record.ToolbarExtraButtons~}</div>
 	<div class="pict-flow-toolbar-group pict-flow-toolbar-right">
 		<button class="pict-flow-toolbar-btn" data-flow-action="settings-popup" id="Flow-Toolbar-Settings-{~D:Record.FlowViewIdentifier~}" title="Theme Settings"
 			onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleToolbarAction('settings-popup')">
@@ -105,6 +110,18 @@ const _DefaultConfiguration =
 <div class="pict-flow-toolbar-popup-anchor" id="Flow-Toolbar-PopupAnchor-{~D:Record.FlowViewIdentifier~}">
 </div>
 `
+		},
+		{
+			Hash: 'Flow-Toolbar-Extra-Button',
+			// Host-supplied button. The icon span is filled post-render by
+			// _populateToolbarIcons (keyed by Hash), matching how the built-in
+			// button icons are injected. FlowViewIdentifier + ActiveClass are
+			// stamped onto each row in render().
+			Template: /*html*/`<button class="pict-flow-toolbar-btn{~D:Record.ActiveClass~}" id="Flow-Toolbar-Extra-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleExtraAction('{~D:Record.Hash~}', this)">
+	<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-ExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
+	<span class="pict-flow-toolbar-btn-text">{~D:Record.Label~}</span>
+</button>`
 		},
 		{
 			Hash: 'Flow-AddNode-List',
@@ -121,7 +138,7 @@ const _DefaultConfiguration =
 				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._addNodeFromPopup(this.getAttribute(\'data-node-type\'))">'
 				+ '<span class="pict-flow-popup-list-item-icon">{~D:Record.IconHTML~}</span>'
 				+ '<span class="pict-flow-popup-list-item-label">{~D:Record.Label~}</span>'
-				+ '{~NE:Record.Code^<span class="pict-flow-popup-list-item-code">{~D:Record.Code~}</span>~}'
+				+ '{~D:Record.CodeBlock~}'
 				+ '</div>'
 		},
 		{
@@ -137,13 +154,16 @@ const _DefaultConfiguration =
 		},
 		{
 			Hash: 'Flow-Cards-Card',
+			// The icon / swatch / code spans are pre-rendered into complete HTML blocks by
+			// _buildCardsPopup (a block is '' when its piece is absent). The template can't build them
+			// inline: the engine does not parse a nested {~D:~} inside a {~NE:~} (its `~}` terminator
+			// collides with the inner tag's), which left the palette showing raw template literals.
 			Template: '<div class="pict-flow-palette-card{~D:Record.DisabledClass~}" data-card-type="{~D:Record.CardType~}" title="{~D:Record.Tooltip~}"'
 				+ ' onclick="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._ToolbarView._addCardFromPopup(this.getAttribute(\'data-card-type\'))">'
-				+ '{~NE:Record.IconHTML^<span class="pict-flow-palette-card-icon">{~D:Record.IconHTML~}</span>~}'
-				+ '{~NE:Record.IconEmoji^<span class="pict-flow-palette-card-icon">{~D:Record.IconEmoji~}</span>~}'
-				+ '{~NE:Record.SwatchColor^<span class="pict-flow-palette-card-swatch" style="background-color: {~D:Record.SwatchColor~};"></span>~}'
+				+ '{~D:Record.IconBlock~}'
+				+ '{~D:Record.SwatchBlock~}'
 				+ '<span class="pict-flow-palette-card-title">{~D:Record.Label~}</span>'
-				+ '{~NE:Record.Code^<span class="pict-flow-palette-card-code">{~D:Record.Code~}</span>~}'
+				+ '{~D:Record.CodeBlock~}'
 				+ '</div>'
 		},
 		{
@@ -212,11 +232,32 @@ class PictViewFlowToolbar extends libPictView
 
 	render(pRenderableHash, pRenderDestinationAddress, pTemplateRecordAddress)
 	{
+		// Stamp the per-row render fields onto each host-supplied button so the
+		// Flow-Toolbar-Extra-Button rows resolve their owning view and active
+		// state (nested {~D:~} addressing inside {~TS:~} is not supported).
+		this._stampExtraButtons();
 		// Pass this.options as the template record so {~D:Record.FlowViewIdentifier~}
 		// resolves correctly in the toolbar template.
 		return super.render(pRenderableHash, pRenderDestinationAddress, this.options);
 	}
 
+	/**
+	 * Stamp FlowViewIdentifier + ActiveClass onto each ToolbarExtraButtons entry
+	 * so the row template can address them.
+	 */
+	_stampExtraButtons()
+	{
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (!Array.isArray(tmpExtraButtons)) return;
+		for (let i = 0; i < tmpExtraButtons.length; i++)
+		{
+			tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
+			tmpExtraButtons[i].ActiveClass = tmpExtraButtons[i].Active ? ' pict-flow-toolbar-btn-active' : '';
+			// A label-less (icon-only) button renders an empty text span; CSS (:empty) collapses it.
+			if (typeof tmpExtraButtons[i].Label !== 'string') { tmpExtraButtons[i].Label = ''; }
+		}
+	}
+
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
@@ -321,6 +362,20 @@ class PictViewFlowToolbar extends libPictView
 		{
 			tmpAutoChevron[0].innerHTML = tmpIconProvider.getIconSVGMarkup('chevron-down', 8);
 		}
+
+		// Host-supplied extra buttons (keyed by Hash, icon from the button's Icon key).
+		let tmpExtraButtons = this.options.ToolbarExtraButtons;
+		if (Array.isArray(tmpExtraButtons))
+		{
+			for (let i = 0; i < tmpExtraButtons.length; i++)
+			{
+				let tmpExtraIcon = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-ExtraIcon-${tmpExtraButtons[i].Hash}-${tmpFlowViewIdentifier}`);
+				if (tmpExtraIcon.length > 0)
+				{
+					tmpExtraIcon[0].innerHTML = tmpIconProvider.getIconSVGMarkup(tmpExtraButtons[i].Icon, 14);
+				}
+			}
+		}
 	}
 
 	// ── Popup Management ──────────────────────────────────────────────────
@@ -548,12 +603,16 @@ class PictViewFlowToolbar extends libPictView
 				let tmpResolvedKey = tmpIconProvider.resolveIconKey(tmpMeta);
 				tmpIconHTML = tmpIconProvider.getIconSVGMarkup(tmpResolvedKey, 16);
 			}
+			let tmpRowCode = tmpMeta.Code || '';
 			tmpRows.push(
 			{
 				NodeType: tmpTypeKeys[i],
 				Label: tmpTypeConfig.Label || '',
 				IconHTML: tmpIconHTML,
-				Code: tmpMeta.Code || '',
+				Code: tmpRowCode,
+				// Pre-rendered so the template renders it with {~D:~} (a nested {~D:~} inside {~NE:~} is
+				// not parsed by the engine).
+				CodeBlock: tmpRowCode ? ('<span class="pict-flow-popup-list-item-code">' + tmpRowCode + '</span>') : '',
 				FlowViewIdentifier: tmpFlowViewIdentifier
 			});
 		}
@@ -682,16 +741,27 @@ class PictViewFlowToolbar extends libPictView
 					tmpIconHTML = tmpIconProvider.getIconSVGMarkup('default', 14);
 				}
 
+				// Pre-render each conditional span into a complete HTML block ('' when absent). The
+				// template renders these directly with {~D:~}; it cannot wrap them inline because the
+				// engine does not parse a nested {~D:~} inside a {~NE:~}.
+				let tmpCode = tmpMeta.Code || '';
+				let tmpSwatchColor = (!tmpIconHTML && !tmpIsEmoji && tmpCardConfig.TitleBarColor) ? tmpCardConfig.TitleBarColor : '';
+				let tmpIconBlock = '';
+				if (tmpIconHTML) { tmpIconBlock = '<span class="pict-flow-palette-card-icon">' + tmpIconHTML + '</span>'; }
+				else if (tmpIsEmoji) { tmpIconBlock = '<span class="pict-flow-palette-card-icon">' + tmpMeta.Icon + '</span>'; }
+				let tmpSwatchBlock = tmpSwatchColor ? ('<span class="pict-flow-palette-card-swatch" style="background-color: ' + tmpSwatchColor + ';"></span>') : '';
+				let tmpCodeBlock = tmpCode ? ('<span class="pict-flow-palette-card-code">' + tmpCode + '</span>') : '';
+
 				tmpMatching.push(
 				{
 					CardType: tmpCardConfig.Hash,
 					Label: tmpCardConfig.Label || '',
-					Code: tmpMeta.Code || '',
-					IconHTML: tmpIconHTML,
-					IconEmoji: tmpIsEmoji ? tmpMeta.Icon : '',
+					Code: tmpCode,
+					IconBlock: tmpIconBlock,
+					SwatchBlock: tmpSwatchBlock,
+					CodeBlock: tmpCodeBlock,
 					DisabledClass: (tmpMeta.Enabled === false) ? ' disabled' : '',
 					Tooltip: tmpMeta.Tooltip || tmpMeta.Description || '',
-					SwatchColor: (!tmpIconHTML && !tmpIsEmoji && tmpCardConfig.TitleBarColor) ? tmpCardConfig.TitleBarColor : '',
 					FlowViewIdentifier: tmpFlowViewIdentifier
 				});
 			}
@@ -1677,7 +1747,8 @@ class PictViewFlowToolbar extends libPictView
 					FlowViewIdentifier: tmpFlowViewIdentifier,
 					DefaultDestinationAddress: `#Flow-FloatingToolbar-Container-${tmpFlowViewIdentifier}`,
 					EnableAddNode: this.options.EnableAddNode,
-					EnableCardPalette: this.options.EnableCardPalette
+					EnableCardPalette: this.options.EnableCardPalette,
+					ToolbarExtraButtons: this.options.ToolbarExtraButtons
 				}
 			);
 			this._FloatingToolbarView._ToolbarView = this;
@@ -1742,6 +1813,23 @@ class PictViewFlowToolbar extends libPictView
 	 * Handle a toolbar action
 	 * @param {string} pAction
 	 */
+	/**
+	 * Handle a click on a host-supplied (ToolbarExtraButtons) button. Routes to
+	 * the FlowView's onToolbarButton hook with the button hash and the clicked
+	 * element (so the host can anchor a popover next to it).
+	 *
+	 * @param {string} pHash - The button's Hash
+	 * @param {HTMLElement} pElement - The clicked button element
+	 */
+	_handleExtraAction(pHash, pElement)
+	{
+		if (!this._FlowView) return;
+		if (typeof this._FlowView.options.onToolbarButton === 'function')
+		{
+			this._FlowView.options.onToolbarButton(pHash, pElement);
+		}
+	}
+
 	_handleToolbarAction(pAction)
 	{
 		if (!this._FlowView) return;

package/source/views/PictView-Flow.js

@@ -59,6 +59,11 @@ const _DefaultConfiguration =
 	EnableZooming: true,
 	EnableNodeDragging: true,
 	EnableConnectionCreation: true,
+	// When on, a connection can be drawn between ANY two ports (any port can start a drag, any port can
+	// receive it), rather than only output -> input. Off by default so directed graphs (workflows) keep
+	// their source/target semantics; free-form canvases (a moodboard, whose links are undirected) turn it
+	// on so a card's ports connect in any direction.
+	EnableUndirectedConnections: false,
 	// When on, the selected node shows a bottom-right grip that resizes it by drag. Off by default
 	// so existing diagrams are unaffected; free-form canvases (moodboards) turn it on.
 	EnableNodeResizing: false,
@@ -73,6 +78,15 @@ const _DefaultConfiguration =
 	EnableAlignmentGuides: false,
 	EnableLayoutMenu: true,
 
+	// Host-supplied toolbar buttons. Each entry is { Hash, Icon, Label?, Tooltip?, Active? } where Icon
+	// is a flow icon-provider key (edit, check, background, ...). They render in BOTH the docked and the
+	// floating toolbar (so they survive every toolbar mode) and, on click, fire onToolbarButton below.
+	// Empty by default, so existing consumers are unaffected.
+	ToolbarExtraButtons: [],
+	// Fired when a ToolbarExtraButtons button is clicked: onToolbarButton(pHash, pElement). The element
+	// lets the host anchor a popover next to the button. Off (false) by default.
+	onToolbarButton: false,
+
 	MinZoom: 0.1,
 	MaxZoom: 5.0,
 	ZoomStep: 0.1,
@@ -562,7 +576,8 @@ class PictViewFlow extends libPictView
 						DefaultDestinationAddress: `#Flow-Toolbar-${tmpViewIdentifier}`,
 						FlowViewIdentifier: tmpViewIdentifier,
 						EnableAddNode: this.options.EnableAddNode,
-						EnableCardPalette: this.options.EnableCardPalette
+						EnableCardPalette: this.options.EnableCardPalette,
+						ToolbarExtraButtons: this.options.ToolbarExtraButtons
 					}
 				));
 			// Use the toolbar's render method after it's set up
@@ -1418,6 +1433,27 @@ class PictViewFlow extends libPictView
 		let tmpSource = this.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
 		let tmpTarget = this.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
 		if (!tmpSource || !tmpTarget) return null;
+		// A connection renders as a curve, so the straight-line average of its endpoints sits OFF the
+		// line (the panel tether would point into empty space). Prefer the true midpoint of the rendered
+		// path -- getPointAtLength at half its length, which is genuinely on the line. Fall back to the
+		// endpoint average when the path element or SVG geometry is unavailable (e.g. server-side render).
+		if (this._SVGElement && typeof this._SVGElement.querySelector === 'function')
+		{
+			let tmpPathElement = this._SVGElement.querySelector('.pict-flow-connection[data-connection-hash="' + pConnectionHash + '"]');
+			if (tmpPathElement && typeof tmpPathElement.getTotalLength === 'function' && typeof tmpPathElement.getPointAtLength === 'function')
+			{
+				try
+				{
+					let tmpLength = tmpPathElement.getTotalLength();
+					if (tmpLength > 0)
+					{
+						let tmpPoint = tmpPathElement.getPointAtLength(tmpLength / 2);
+						return { x: tmpPoint.x, y: tmpPoint.y };
+					}
+				}
+				catch (pError) { /* fall through to the straight-line midpoint */ }
+			}
+		}
 		return { x: (tmpSource.x + tmpTarget.x) / 2, y: (tmpSource.y + tmpTarget.y) / 2 };
 	}
 

package/test/CardPalette_tests.js

@@ -0,0 +1,43 @@
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPictViewFlowToolbar = require('../source/views/PictView-Flow-Toolbar.js');
+
+// The card palette and the add-node list render one row per card type. Each row's icon / swatch / code
+// pieces are conditional, but the pict template engine does NOT parse a nested {~D:~} inside a {~NE:~}
+// (the NE `~}` terminator collides with the inner tag's), which left the palette showing raw template
+// literals like "{~D:Record.IconHTML ~}~};">~} Image". The fix pre-renders each piece into a complete
+// HTML block in the popup builder and renders it with a plain {~D:~}. These tests guard that the
+// broken pattern does not return.
+suite('Flow card palette + add-node row templates',
+function ()
+{
+	function templateByHash(pHash)
+	{
+		let tmpTemplate = libPictViewFlowToolbar.default_configuration.Templates.find((pT) => pT.Hash === pHash);
+		return tmpTemplate ? tmpTemplate.Template : null;
+	}
+
+	// A {~NE:Addr^ ... {~ ... ~} ... ~} block: an NE whose content contains a nested template tag.
+	const _NESTED_NE = /\{~NE:[^^]+\^[^~]*\{~/;
+
+	test('the card-palette row renders pre-built blocks, with no nested tag inside an NE',
+	function ()
+	{
+		let tmpTemplate = templateByHash('Flow-Cards-Card');
+		libExpect(tmpTemplate, 'Flow-Cards-Card template exists').to.be.a('string');
+		libExpect(_NESTED_NE.test(tmpTemplate), 'no nested {~..~} inside an {~NE:~}').to.equal(false);
+		libExpect(tmpTemplate).to.contain('{~D:Record.IconBlock~}');
+		libExpect(tmpTemplate).to.contain('{~D:Record.SwatchBlock~}');
+		libExpect(tmpTemplate).to.contain('{~D:Record.CodeBlock~}');
+	});
+
+	test('the add-node row renders a pre-built code block, with no nested tag inside an NE',
+	function ()
+	{
+		let tmpTemplate = templateByHash('Flow-AddNode-Row');
+		libExpect(tmpTemplate, 'Flow-AddNode-Row template exists').to.be.a('string');
+		libExpect(_NESTED_NE.test(tmpTemplate), 'no nested {~..~} inside an {~NE:~}').to.equal(false);
+		libExpect(tmpTemplate).to.contain('{~D:Record.CodeBlock~}');
+	});
+});

package/test/ConnectionStyle_tests.js

@@ -0,0 +1,90 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libConnectorShapes = require('../source/providers/PictProvider-Flow-ConnectorShapes.js');
+const libConnectionRenderer = require('../source/services/PictService-Flow-ConnectionRenderer.js');
+
+// Per-connection appearance: a host (a moodboard) styles its own edges by stamping Data on a
+// connection -- stroke color / width / style and the marker at each end ('none' | 'arrow' | 'dot' |
+// 'square'). The renderer applies these only when present, so default (workflow) edges are untouched.
+suite('Flow connection appearance',
+function ()
+{
+	suite('marker defs',
+	function ()
+	{
+		test('generateMarkerDefs includes the generic arrow / dot / square markers (color-matched)',
+		function ()
+		{
+			let tmpProvider = new libConnectorShapes(new libFable({}), {}, 'CS-Test');
+			let tmpDefs = tmpProvider.generateMarkerDefs('view1');
+			libExpect(tmpDefs).to.contain('flow-marker-arrow-end-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-arrow-start-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-dot-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-square-view1');
+			libExpect(tmpDefs).to.contain('context-stroke');
+		});
+	});
+
+	suite('_connectionMarkerId',
+	function ()
+	{
+		let _Resolve = libConnectionRenderer.prototype._connectionMarkerId;
+
+		test('resolves marker names to def ids per end; none / unknown -> null',
+		function ()
+		{
+			libExpect(_Resolve('arrow', 'end', 'v')).to.equal('flow-marker-arrow-end-v');
+			libExpect(_Resolve('arrow', 'start', 'v')).to.equal('flow-marker-arrow-start-v');
+			libExpect(_Resolve('dot', 'end', 'v')).to.equal('flow-marker-dot-v');
+			libExpect(_Resolve('square', 'end', 'v')).to.equal('flow-marker-square-v');
+			libExpect(_Resolve('none', 'end', 'v')).to.equal(null);
+			libExpect(_Resolve(undefined, 'end', 'v')).to.equal(null);
+		});
+	});
+
+	suite('_applyConnectionStyle',
+	function ()
+	{
+		let _Self = { _connectionMarkerId: libConnectionRenderer.prototype._connectionMarkerId };
+		function makePath()
+		{
+			let tmpAttrs = {};
+			// Stroke color / width / dash are set via inline style (they must outrank the .pict-flow-connection
+			// CSS rule); markers are SVG attributes.
+			return { style: {}, setAttribute: function (pK, pV) { tmpAttrs[pK] = pV; }, removeAttribute: function (pK) { delete tmpAttrs[pK]; }, attrs: tmpAttrs };
+		}
+
+		test('applies stroke color / width / dash via inline style + markers via attributes',
+		function ()
+		{
+			let tmpPath = makePath();
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, { StrokeColor: '#abcdef', StrokeWidth: 4, StrokeStyle: 'dashed', SourceMarker: 'dot', TargetMarker: 'arrow' }, 'v');
+			libExpect(tmpPath.style.stroke).to.equal('#abcdef');
+			libExpect(tmpPath.style.strokeWidth).to.equal('4');
+			libExpect(tmpPath.style.strokeDasharray).to.equal('7,5');
+			libExpect(tmpPath.attrs['marker-start']).to.equal('url(#flow-marker-dot-v)');
+			libExpect(tmpPath.attrs['marker-end']).to.equal('url(#flow-marker-arrow-end-v)');
+		});
+
+		test('solid sets the dash to none; a none marker clears that end',
+		function ()
+		{
+			let tmpPath = makePath();
+			tmpPath.setAttribute('marker-end', 'url(#old)');
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, { StrokeStyle: 'solid', TargetMarker: 'none' }, 'v');
+			libExpect(tmpPath.style.strokeDasharray).to.equal('none');
+			libExpect(tmpPath.attrs['marker-end']).to.equal(undefined);
+		});
+
+		test('Data with no style keys leaves the element untouched',
+		function ()
+		{
+			let tmpPath = makePath();
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, {}, 'v');
+			libExpect(Object.keys(tmpPath.attrs).length).to.equal(0);
+			libExpect(Object.keys(tmpPath.style).length).to.equal(0);
+		});
+	});
+});

package/test/ToolbarExtraButtons_tests.js

@@ -0,0 +1,138 @@
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libPictViewFlow = require('../source/views/PictView-Flow.js');
+const libPictViewFlowToolbar = require('../source/views/PictView-Flow-Toolbar.js');
+const libPictViewFlowFloatingToolbar = require('../source/views/PictView-Flow-FloatingToolbar.js');
+
+// The toolbar custom-button API (ToolbarExtraButtons + onToolbarButton) lets a host add its own buttons
+// to the flow toolbar. They render in both the docked and the floating toolbar (so they survive every
+// toolbar mode) and, on click, fire the FlowView's onToolbarButton hook. These are harness-free unit
+// tests: the render-time stamping and the click dispatch are prototype methods called against light
+// stubs, so no DOM or full Pict app is needed.
+suite('Flow Toolbar custom buttons (ToolbarExtraButtons)',
+function ()
+{
+	suite('default_configuration is additive + backward compatible',
+	function ()
+	{
+		test('the flow view defaults to no extra buttons and no hook',
+		function ()
+		{
+			libExpect(libPictViewFlow.default_configuration.ToolbarExtraButtons).to.be.an('array');
+			libExpect(libPictViewFlow.default_configuration.ToolbarExtraButtons.length).to.equal(0);
+			libExpect(libPictViewFlow.default_configuration.onToolbarButton).to.equal(false);
+		});
+
+		test('both toolbar views default to an empty extra-button list',
+		function ()
+		{
+			libExpect(libPictViewFlowToolbar.default_configuration.ToolbarExtraButtons).to.be.an('array');
+			libExpect(libPictViewFlowToolbar.default_configuration.ToolbarExtraButtons.length).to.equal(0);
+			libExpect(libPictViewFlowFloatingToolbar.default_configuration.ToolbarExtraButtons).to.be.an('array');
+			libExpect(libPictViewFlowFloatingToolbar.default_configuration.ToolbarExtraButtons.length).to.equal(0);
+		});
+
+		test('both toolbar templates render the extra-button group + row template',
+		function ()
+		{
+			let tmpDockedTemplates = libPictViewFlowToolbar.default_configuration.Templates;
+			let tmpDockedBar = tmpDockedTemplates.find((pT) => pT.Hash === 'Flow-Toolbar-Template');
+			let tmpDockedRow = tmpDockedTemplates.find((pT) => pT.Hash === 'Flow-Toolbar-Extra-Button');
+			libExpect(tmpDockedBar.Template).to.contain('{~TS:Flow-Toolbar-Extra-Button:Record.ToolbarExtraButtons~}');
+			libExpect(tmpDockedRow).to.be.an('object');
+			libExpect(tmpDockedRow.Template).to.contain('_handleExtraAction');
+
+			let tmpFloatTemplates = libPictViewFlowFloatingToolbar.default_configuration.Templates;
+			let tmpFloatBar = tmpFloatTemplates.find((pT) => pT.Hash === 'Flow-FloatingToolbar-Template');
+			let tmpFloatRow = tmpFloatTemplates.find((pT) => pT.Hash === 'Flow-FloatingToolbar-Extra-Button');
+			libExpect(tmpFloatBar.Template).to.contain('{~TS:Flow-FloatingToolbar-Extra-Button:Record.ToolbarExtraButtons~}');
+			libExpect(tmpFloatRow).to.be.an('object');
+			libExpect(tmpFloatRow.Template).to.contain('_handleExtraClick');
+		});
+	});
+
+	suite('_stampExtraButtons (render-time per-row fields)',
+	function ()
+	{
+		test('stamps FlowViewIdentifier and an empty ActiveClass onto each button',
+		function ()
+		{
+			let tmpStub =
+			{
+				options:
+				{
+					FlowViewIdentifier: 'MB-FlowView-7',
+					ToolbarExtraButtons: [ { Hash: 'background', Icon: 'background' }, { Hash: 'done', Icon: 'check' } ]
+				}
+			};
+			libPictViewFlowToolbar.prototype._stampExtraButtons.call(tmpStub);
+			libExpect(tmpStub.options.ToolbarExtraButtons[0].FlowViewIdentifier).to.equal('MB-FlowView-7');
+			libExpect(tmpStub.options.ToolbarExtraButtons[0].ActiveClass).to.equal('');
+			libExpect(tmpStub.options.ToolbarExtraButtons[1].FlowViewIdentifier).to.equal('MB-FlowView-7');
+		});
+
+		test('an Active button gets the active class',
+		function ()
+		{
+			let tmpStub =
+			{
+				options:
+				{
+					FlowViewIdentifier: 'Pict-Flow',
+					ToolbarExtraButtons: [ { Hash: 'edit', Icon: 'edit', Active: true } ]
+				}
+			};
+			libPictViewFlowToolbar.prototype._stampExtraButtons.call(tmpStub);
+			libExpect(tmpStub.options.ToolbarExtraButtons[0].ActiveClass).to.equal(' pict-flow-toolbar-btn-active');
+		});
+
+		test('a non-array extra-button option is tolerated',
+		function ()
+		{
+			let tmpStub = { options: { FlowViewIdentifier: 'Pict-Flow', ToolbarExtraButtons: false } };
+			libExpect(function () { libPictViewFlowToolbar.prototype._stampExtraButtons.call(tmpStub); }).to.not.throw();
+		});
+	});
+
+	suite('click dispatch fires onToolbarButton(hash, element)',
+	function ()
+	{
+		test('the docked toolbar routes a click to the FlowView hook with the element',
+		function ()
+		{
+			let tmpFired = [];
+			let tmpElement = { id: 'the-button' };
+			let tmpStub =
+			{
+				_FlowView: { options: { onToolbarButton: (pHash, pEl) => { tmpFired.push({ Hash: pHash, El: pEl }); } } }
+			};
+			libPictViewFlowToolbar.prototype._handleExtraAction.call(tmpStub, 'background', tmpElement);
+			libExpect(tmpFired.length).to.equal(1);
+			libExpect(tmpFired[0].Hash).to.equal('background');
+			libExpect(tmpFired[0].El).to.equal(tmpElement);
+		});
+
+		test('no hook configured is a no-op (does not throw)',
+		function ()
+		{
+			let tmpStub = { _FlowView: { options: { onToolbarButton: false } } };
+			libExpect(function () { libPictViewFlowToolbar.prototype._handleExtraAction.call(tmpStub, 'edit', {}); }).to.not.throw();
+		});
+
+		test('the floating toolbar routes its click through the docked toolbar dispatch',
+		function ()
+		{
+			let tmpSeen = [];
+			let tmpElement = { id: 'floating-button' };
+			let tmpFloatStub =
+			{
+				_ToolbarView: { _handleExtraAction: (pHash, pEl) => { tmpSeen.push({ Hash: pHash, El: pEl }); } }
+			};
+			libPictViewFlowFloatingToolbar.prototype._handleExtraClick.call(tmpFloatStub, 'done', tmpElement);
+			libExpect(tmpSeen.length).to.equal(1);
+			libExpect(tmpSeen[0].Hash).to.equal('done');
+			libExpect(tmpSeen[0].El).to.equal(tmpElement);
+		});
+	});
+});

package/test/UndirectedConnections_tests.js

@@ -0,0 +1,70 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libInteractionManager = require('../source/services/PictService-Flow-InteractionManager.js');
+const STATES = libInteractionManager.INTERACTION_STATES;
+
+// EnableUndirectedConnections lets a connection be drawn between ANY two ports rather than only
+// output -> input. A free-form canvas (a moodboard) turns it on so a card's ports connect in any
+// direction; directed graphs (workflows) leave it off. These tests cover the start side of the drag
+// (the gate that previously hard-required an output port). The completion side uses
+// document.elementFromPoint, so it is exercised in the browser rather than here.
+function makeFlowView(pUndirected)
+{
+	return {
+		options: { EnableConnectionCreation: true, EnableUndirectedConnections: pUndirected },
+		// Returning null skips the drag-line DOM creation, so no document is needed.
+		getPortPosition: function () { return null; },
+		_ViewportElement: { appendChild: function () {} }
+	};
+}
+
+function makeManager(pFable, pFlowView)
+{
+	let tmpManager = new libInteractionManager(pFable, { FlowView: pFlowView }, 'IM-Test');
+	tmpManager._SVGElement = { classList: { add: function () {}, remove: function () {} } };
+	return tmpManager;
+}
+
+function makePort(pNodeHash, pPortHash, pDirection)
+{
+	let tmpAttrs = { 'data-node-hash': pNodeHash, 'data-port-hash': pPortHash, 'data-port-direction': pDirection };
+	return { getAttribute: function (pName) { return Object.prototype.hasOwnProperty.call(tmpAttrs, pName) ? tmpAttrs[pName] : null; } };
+}
+
+suite('Flow undirected connections (EnableUndirectedConnections)',
+function ()
+{
+	let _Fable;
+	setup(function () { _Fable = new libFable({}); });
+
+	test('directed mode (default): an input port does NOT start a connection',
+	function ()
+	{
+		let tmpManager = makeManager(_Fable, makeFlowView(false));
+		tmpManager._startConnection({ stopPropagation: function () {} }, makePort('n1', 'p1', 'input'));
+		libExpect(tmpManager._State).to.not.equal(STATES.CONNECTING);
+	});
+
+	test('undirected mode: an input port DOES start a connection',
+	function ()
+	{
+		let tmpManager = makeManager(_Fable, makeFlowView(true));
+		tmpManager._startConnection({ stopPropagation: function () {} }, makePort('n1', 'p1', 'input'));
+		libExpect(tmpManager._State).to.equal(STATES.CONNECTING);
+		libExpect(tmpManager._ConnectSourceNodeHash).to.equal('n1');
+		libExpect(tmpManager._ConnectSourcePortHash).to.equal('p1');
+	});
+
+	test('an output port starts a connection in either mode',
+	function ()
+	{
+		[ false, true ].forEach(function (pUndirected)
+		{
+			let tmpManager = makeManager(_Fable, makeFlowView(pUndirected));
+			tmpManager._startConnection({ stopPropagation: function () {} }, makePort('n1', 'p1', 'output'));
+			libExpect(tmpManager._State).to.equal(STATES.CONNECTING);
+		});
+	});
+});