pict-section-flow 1.3.0 → 2.0.0

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,16 @@ 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{~D:Record.ToggleClass~}{~D:Record.ActiveClass~}" 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>
+	<span class="pict-flow-toolbar-btn-led" aria-hidden="true"></span>
+</button>`
 		}
 	],
 
@@ -111,9 +126,37 @@ 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;
+				// Mirror the docked toolbar so toggle buttons show the same status LED here.
+				tmpExtraButtons[i].ToggleClass = tmpExtraButtons[i].Toggle ? ' pict-flow-toolbar-btn-toggle' : '';
+				tmpExtraButtons[i].ActiveClass = tmpExtraButtons[i].Active ? ' pict-flow-toolbar-btn-active' : '';
+			}
+		}
 		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 +265,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);
@@ -339,6 +346,35 @@ class PictViewFlowNode extends libPictView
 			tmpGroup.appendChild(tmpHandle);
 		}
 
+		// Rotate handle: a grip on a short arm above the node, shown when this node is selected, the
+		// flow allows rotation, and we are not read-only. Its data-element-type routes pointer-down to
+		// the InteractionManager's node-rotate path. Lives in node-local space, so it orbits with the card.
+		if (pIsSelected && this._FlowView.options && this._FlowView.options.EnableNodeRotation
+			&& !(typeof this._FlowView.isReadOnly === 'function' && this._FlowView.isReadOnly()))
+		{
+			let tmpArmLength = 22;
+			let tmpRotateCenterX = tmpWidth / 2;
+
+			let tmpArm = this._FlowView._SVGHelperProvider.createSVGElement('line');
+			tmpArm.setAttribute('class', 'pict-flow-node-rotate-arm');
+			tmpArm.setAttribute('x1', String(tmpRotateCenterX));
+			tmpArm.setAttribute('y1', '0');
+			tmpArm.setAttribute('x2', String(tmpRotateCenterX));
+			tmpArm.setAttribute('y2', String(-tmpArmLength));
+			tmpArm.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpArm.setAttribute('data-element-type', 'node-rotate');
+			tmpGroup.appendChild(tmpArm);
+
+			let tmpGrip = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+			tmpGrip.setAttribute('class', 'pict-flow-node-rotate-handle');
+			tmpGrip.setAttribute('cx', String(tmpRotateCenterX));
+			tmpGrip.setAttribute('cy', String(-tmpArmLength - 5));
+			tmpGrip.setAttribute('r', '6');
+			tmpGrip.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpGrip.setAttribute('data-element-type', 'node-rotate');
+			tmpGroup.appendChild(tmpGrip);
+		}
+
 		pNodesLayer.appendChild(tmpGroup);
 	}
 

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,19 @@ 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.ToggleClass~}{~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>
+	<span class="pict-flow-toolbar-btn-led" aria-hidden="true"></span>
+</button>`
 		},
 		{
 			Hash: 'Flow-AddNode-List',
@@ -121,7 +139,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 +155,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 +233,35 @@ 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' : '';
+			// Toggle buttons (stateful on/off, e.g. a pan or connect toggle) get a status LED that the
+			// ActiveClass fills; plain action buttons (Toggle falsy) render no LED.
+			tmpExtraButtons[i].ToggleClass = tmpExtraButtons[i].Toggle ? ' pict-flow-toolbar-btn-toggle' : '';
+			// 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 +366,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 +607,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 +745,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
 				});
 			}
@@ -1532,7 +1606,7 @@ class PictViewFlowToolbar extends libPictView
 		let tmpNoiseEnabled = !!(tmpActiveRenderer && tmpActiveRenderer.NoiseConfig && tmpActiveRenderer.NoiseConfig.Enabled);
 		let tmpNoiseDisplay = tmpNoiseEnabled ? '' : 'display:none;';
 
-		this.pict.ContentAssignment.assignContent(pContainer,
+		let tmpHTML =
 			'<div class="pict-flow-popup-settings-section">'
 			+ '<label class="pict-flow-popup-settings-label">Theme</label>'
 			+ '<select class="pict-flow-popup-settings-select"'
@@ -1551,7 +1625,50 @@ class PictViewFlowToolbar extends libPictView
 			+ ' oninput="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleNoiseSliderInput(this)" />'
 			+ '<span class="pict-flow-popup-settings-slider-value">' + tmpNoiseLevel + '%</span>'
 			+ '</div>'
-			+ '</div>');
+			+ '</div>';
+
+		tmpHTML += this._buildHostSettingsSections();
+
+		this.pict.ContentAssignment.assignContent(pContainer, tmpHTML);
+	}
+
+	/**
+	 * Host-contributed settings sections. A consumer adds entries to the flow view's
+	 * `SettingsSections` option so its own controls (e.g. a whiteboard's background
+	 * picker) live in the gear popup instead of a separate panel. Each entry is
+	 * `{ Label?, HTML? , Build?(flowView) }`; Build is evaluated at open time so a
+	 * section can reflect live state. Returns concatenated section markup ('' when none).
+	 * @returns {string}
+	 */
+	_buildHostSettingsSections()
+	{
+		let tmpSections = (this._FlowView && this._FlowView.options && Array.isArray(this._FlowView.options.SettingsSections))
+			? this._FlowView.options.SettingsSections
+			: [];
+		let tmpOut = '';
+		for (let i = 0; i < tmpSections.length; i++)
+		{
+			let tmpSection = tmpSections[i];
+			let tmpSectionHTML = '';
+			if (typeof tmpSection.Build === 'function')
+			{
+				tmpSectionHTML = tmpSection.Build(this._FlowView) || '';
+			}
+			else if (typeof tmpSection.HTML === 'string')
+			{
+				tmpSectionHTML = tmpSection.HTML;
+			}
+			if (!tmpSectionHTML)
+			{
+				continue;
+			}
+			tmpOut += '<div class="pict-flow-popup-divider"></div>'
+				+ '<div class="pict-flow-popup-settings-section">'
+				+ (tmpSection.Label ? '<label class="pict-flow-popup-settings-label">' + tmpSection.Label + '</label>' : '')
+				+ tmpSectionHTML
+				+ '</div>';
+		}
+		return tmpOut;
 	}
 
 	/**
@@ -1677,7 +1794,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 +1860,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;