pict-section-flow 0.0.17 → 0.0.19

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

@@ -43,6 +43,12 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 		let tmpPortLabelsOutside = (pNodeTypeConfig && pNodeTypeConfig.PortLabelsOutside);
 		let tmpGeometryProvider = this._FlowView._GeometryProvider;
 
+		// Connected ports get their colored dot drawn by the connection
+		// renderer at the actual line attachment (which may have been
+		// reshaped by an edge theme like Perimeter). Unconnected ports
+		// still draw their dot at the static card-defined position.
+		let tmpConnectedPortHashes = this._collectConnectedPortHashes(pNodeData.Hash);
+
 		// Group ports by their Side value (supports all 12 positions)
 		let tmpPortsBySide = {};
 		for (let i = 0; i < pNodeData.Ports.length; i++)
@@ -167,6 +173,16 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 							+ ' L ' + (tmpBadgeX + tmpBadgeWidth) + ' ' + (tmpBadgeY + tmpBadgeHeight);
 					}
 
+					// Wrap the badge elements in a hoverable group so we can
+					// listen for mouseenter/mouseleave on the badge as a
+					// whole. Tagged with data-port-hash + data-node-hash so
+					// the hover handler can surface this port's hint paths.
+					let tmpBadgeGroup = this._FlowView._SVGHelperProvider.createSVGElement('g');
+					tmpBadgeGroup.setAttribute('class', 'pict-flow-port-badge');
+					tmpBadgeGroup.setAttribute('data-port-hash', tmpPort.Hash);
+					tmpBadgeGroup.setAttribute('data-node-hash', pNodeData.Hash);
+					this._wirePortHintHover(tmpBadgeGroup, tmpPort.Hash, null);
+
 					// Background rect (cream, no stroke — border drawn separately)
 					let tmpBgRect = this._FlowView._SVGHelperProvider.createSVGElement('rect');
 					tmpBgRect.setAttribute('class', 'pict-flow-port-label-bg');
@@ -175,7 +191,7 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 					tmpBgRect.setAttribute('width', String(tmpBadgeWidth));
 					tmpBgRect.setAttribute('height', String(tmpBadgeHeight));
 					tmpBgRect.setAttribute('fill', 'var(--pf-port-label-bg, rgba(255, 253, 240, 0.5))');
-					pGroup.appendChild(tmpBgRect);
+					tmpBadgeGroup.appendChild(tmpBgRect);
 
 					// 3-sided border path (open on the edge-facing side)
 					let tmpBorderPathEl = this._FlowView._SVGHelperProvider.createSVGElement('path');
@@ -184,7 +200,7 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 					tmpBorderPathEl.setAttribute('fill', 'none');
 					tmpBorderPathEl.setAttribute('stroke', tmpBorderColor);
 					tmpBorderPathEl.setAttribute('stroke-width', '0.75');
-					pGroup.appendChild(tmpBorderPathEl);
+					tmpBadgeGroup.appendChild(tmpBorderPathEl);
 
 					// Colored stripe on the inner side
 					let tmpStripe = this._FlowView._SVGHelperProvider.createSVGElement('rect');
@@ -194,7 +210,9 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 					tmpStripe.setAttribute('width', String(tmpStripeW));
 					tmpStripe.setAttribute('height', String(tmpStripeH));
 					tmpStripe.setAttribute('fill', tmpBorderColor);
-					pGroup.appendChild(tmpStripe);
+					tmpBadgeGroup.appendChild(tmpStripe);
+
+					pGroup.appendChild(tmpBadgeGroup);
 
 					// Text label — appended after circle for z-order
 					tmpLabelElement = this._FlowView._SVGHelperProvider.createSVGElement('text');
@@ -207,35 +225,41 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 					tmpLabelElement.setAttribute('dominant-baseline', 'central');
 				}
 
-				// Port circle (rendered on top of badge background)
-				let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
-				let tmpCircle;
-				if (tmpShapeProvider)
+				// Port circle (rendered on top of badge background) —
+				// only for unconnected ports. Connected ports get their
+				// dot painted by the connection renderer at the actual
+				// attachment point (so it follows edge-theme overrides).
+				if (!tmpConnectedPortHashes[tmpPort.Hash])
 				{
-					tmpCircle = tmpShapeProvider.createPortElement(tmpPort, tmpPosition, pNodeData.Hash);
-				}
-				else
-				{
-					tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
-					let tmpPortClass = `pict-flow-port ${tmpPort.Direction}`;
-					if (tmpPort.PortType)
+					let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+					let tmpCircle;
+					if (tmpShapeProvider)
 					{
-						tmpPortClass += ` port-type-${tmpPort.PortType}`;
+						tmpCircle = tmpShapeProvider.createPortElement(tmpPort, tmpPosition, pNodeData.Hash);
 					}
-					tmpCircle.setAttribute('class', tmpPortClass);
-					tmpCircle.setAttribute('cx', String(tmpPosition.x));
-					tmpCircle.setAttribute('cy', String(tmpPosition.y));
-					tmpCircle.setAttribute('r', '5');
-					tmpCircle.setAttribute('data-port-hash', tmpPort.Hash);
-					tmpCircle.setAttribute('data-node-hash', pNodeData.Hash);
-					tmpCircle.setAttribute('data-port-direction', tmpPort.Direction);
-					if (tmpPort.PortType)
+					else
 					{
-						tmpCircle.setAttribute('data-port-type', tmpPort.PortType);
+						tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+						let tmpPortClass = `pict-flow-port ${tmpPort.Direction}`;
+						if (tmpPort.PortType)
+						{
+							tmpPortClass += ` port-type-${tmpPort.PortType}`;
+						}
+						tmpCircle.setAttribute('class', tmpPortClass);
+						tmpCircle.setAttribute('cx', String(tmpPosition.x));
+						tmpCircle.setAttribute('cy', String(tmpPosition.y));
+						tmpCircle.setAttribute('r', '5');
+						tmpCircle.setAttribute('data-port-hash', tmpPort.Hash);
+						tmpCircle.setAttribute('data-node-hash', pNodeData.Hash);
+						tmpCircle.setAttribute('data-port-direction', tmpPort.Direction);
+						if (tmpPort.PortType)
+						{
+							tmpCircle.setAttribute('data-port-type', tmpPort.PortType);
+						}
+						tmpCircle.setAttribute('data-element-type', 'port');
 					}
-					tmpCircle.setAttribute('data-element-type', 'port');
+					pGroup.appendChild(tmpCircle);
 				}
-				pGroup.appendChild(tmpCircle);
 
 				// Port label text (on top of everything)
 				if (tmpLabelElement)
@@ -246,6 +270,64 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 		}
 	}
 
+	/**
+	 * Wire mouseenter/mouseleave on a hoverable element so it activates
+	 * port-hint paths in the port-hints layer. When `pPortHash` is set,
+	 * only hints for that port light up; when `pNodeHash` is set (and
+	 * port hash is null), every hint on that node lights up. Static —
+	 * no closure-state dependency on the node/port objects themselves.
+	 *
+	 * @param {SVGElement} pHoverEl
+	 * @param {string|null} pPortHash
+	 * @param {string|null} pNodeHash
+	 */
+	_wirePortHintHover(pHoverEl, pPortHash, pNodeHash)
+	{
+		if (!pHoverEl || typeof pHoverEl.setAttribute !== 'function') return;
+		if (!this._FlowView || !this._FlowView.options) return;
+
+		// Inline attribute handlers — survive the connection-layer rebuild
+		// without leaving stale listeners on detached DOM nodes.
+		let tmpFlowViewIdentifier = this._FlowView.options.ViewIdentifier;
+		let tmpHashArg = pPortHash ? ('"' + pPortHash + '", null') : ('null, "' + pNodeHash + '"');
+		pHoverEl.setAttribute('onmouseenter',
+			"_Pict.views['" + tmpFlowViewIdentifier + "']._activatePortHints(" + tmpHashArg + ")");
+		pHoverEl.setAttribute('onmouseleave',
+			"_Pict.views['" + tmpFlowViewIdentifier + "']._deactivatePortHints(" + tmpHashArg + ")");
+	}
+
+	/**
+	 * Build a hash-set of port hashes on the given node that participate
+	 * in any connection (either as source or target). Used to suppress
+	 * the static port circle so the connection renderer can paint the
+	 * dot at the resolved attachment point instead.
+	 *
+	 * @param {string} pNodeHash
+	 * @returns {Object} keyed by port hash → true
+	 */
+	_collectConnectedPortHashes(pNodeHash)
+	{
+		let tmpResult = {};
+		if (!this._FlowView || !this._FlowView._FlowData || !Array.isArray(this._FlowView._FlowData.Connections))
+		{
+			return tmpResult;
+		}
+		let tmpConns = this._FlowView._FlowData.Connections;
+		for (let i = 0; i < tmpConns.length; i++)
+		{
+			let tmpConn = tmpConns[i];
+			if (tmpConn.SourceNodeHash === pNodeHash && tmpConn.SourcePortHash)
+			{
+				tmpResult[tmpConn.SourcePortHash] = true;
+			}
+			if (tmpConn.TargetNodeHash === pNodeHash && tmpConn.TargetPortHash)
+			{
+				tmpResult[tmpConn.TargetPortHash] = true;
+			}
+		}
+		return tmpResult;
+	}
+
 	/**
 	 * Calculate port position relative to node origin.
 	 *

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

@@ -37,6 +37,14 @@ class PictServiceFlowRenderManager extends libFableServiceProviderBase
 		{
 			this._FlowView._ConnectionsLayer.removeChild(this._FlowView._ConnectionsLayer.firstChild);
 		}
+		if (this._FlowView._EndpointsLayer)
+		{
+			while (this._FlowView._EndpointsLayer.firstChild) this._FlowView._EndpointsLayer.removeChild(this._FlowView._EndpointsLayer.firstChild);
+		}
+		if (this._FlowView._PortHintsLayer)
+		{
+			while (this._FlowView._PortHintsLayer.firstChild) this._FlowView._PortHintsLayer.removeChild(this._FlowView._PortHintsLayer.firstChild);
+		}
 
 		// Render connections first (behind nodes)
 		for (let i = 0; i < this._FlowView._FlowData.Connections.length; i++)
@@ -112,12 +120,10 @@ class PictServiceFlowRenderManager extends libFableServiceProviderBase
 	{
 		if (!this._FlowView || !this._FlowView._ConnectionsLayer) return;
 
-		// Remove existing elements for this connection
-		let tmpExisting = this._FlowView._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${pConnectionHash}"]`);
-		for (let i = 0; i < tmpExisting.length; i++)
-		{
-			tmpExisting[i].remove();
-		}
+		// Remove existing elements for this connection across all layers
+		// where it might live (path / hit-area in connections, dots in
+		// endpoints, hint paths in port-hints).
+		this._removeConnectionElements(pConnectionHash);
 
 		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
 		if (!tmpConnection) return;
@@ -208,15 +214,39 @@ class PictServiceFlowRenderManager extends libFableServiceProviderBase
 			let tmpConn = tmpAffectedConnections[i];
 			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedConnectionHash === tmpConn.Hash);
 
-			// Remove existing connection SVG elements
-			let tmpExisting = this._FlowView._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${tmpConn.Hash}"]`);
+			// Remove existing connection SVG elements across all layers
+			this._removeConnectionElements(tmpConn.Hash);
+
+			// Re-render this connection
+			this._FlowView._ConnectionRenderer.renderConnection(tmpConn, this._FlowView._ConnectionsLayer, tmpIsSelected);
+		}
+	}
+
+	/**
+	 * Remove every SVG element tagged with `data-connection-hash="<hash>"`
+	 * from any of the layers a connection might write into (connections,
+	 * endpoints, port-hints). Centralised so per-connection re-render
+	 * paths stay in sync with whatever layers ConnectionRenderer touches.
+	 *
+	 * @param {string} pConnectionHash
+	 */
+	_removeConnectionElements(pConnectionHash)
+	{
+		let tmpLayers =
+		[
+			this._FlowView._ConnectionsLayer,
+			this._FlowView._EndpointsLayer,
+			this._FlowView._PortHintsLayer
+		];
+		for (let i = 0; i < tmpLayers.length; i++)
+		{
+			let tmpLayer = tmpLayers[i];
+			if (!tmpLayer) continue;
+			let tmpExisting = tmpLayer.querySelectorAll(`[data-connection-hash="${pConnectionHash}"]`);
 			for (let j = 0; j < tmpExisting.length; j++)
 			{
 				tmpExisting[j].remove();
 			}
-
-			// Re-render this connection
-			this._FlowView._ConnectionRenderer.renderConnection(tmpConn, this._FlowView._ConnectionsLayer, tmpIsSelected);
 		}
 	}
 

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

@@ -17,42 +17,56 @@ const _DefaultConfiguration =
 	[
 		{
 			Hash: 'Flow-FloatingToolbar-Template',
+			// Inline handlers route to the floating toolbar view via _Pict.views
+			// (see _handleButtonClick / _startDrag / _toggleCollapse).
 			Template: /*html*/`
 <div class="pict-flow-floating-toolbar" id="Flow-FloatingToolbar-{~D:Record.FlowViewIdentifier~}">
-	<div class="pict-flow-floating-grip" id="Flow-FloatingGrip-{~D:Record.FlowViewIdentifier~}" title="Drag to move · Double-click to collapse">
+	<div class="pict-flow-floating-grip" id="Flow-FloatingGrip-{~D:Record.FlowViewIdentifier~}" title="Drag to move · Double-click to collapse"
+		onmousedown="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._startDrag(event)"
+		ondblclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleGripDoubleClick(event)">
 		<span id="Flow-FloatingIcon-grip-{~D:Record.FlowViewIdentifier~}"></span>
 	</div>
-	<button class="pict-flow-floating-btn" data-flow-action="add-node" title="Add Node">
+	<button class="pict-flow-floating-btn" data-flow-action="add-node" title="Add Node"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('add-node')">
 		<span id="Flow-FloatingIcon-plus-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="cards-popup" title="Cards">
+	<button class="pict-flow-floating-btn" data-flow-action="cards-popup" title="Cards"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('cards-popup')">
 		<span id="Flow-FloatingIcon-cards-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="delete-selected" title="Delete Selected">
+	<button class="pict-flow-floating-btn" data-flow-action="delete-selected" title="Delete Selected"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('delete-selected')">
 		<span id="Flow-FloatingIcon-trash-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 	<div class="pict-flow-floating-separator"></div>
-	<button class="pict-flow-floating-btn" data-flow-action="zoom-in" title="Zoom In">
+	<button class="pict-flow-floating-btn" data-flow-action="zoom-in" title="Zoom In"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('zoom-in')">
 		<span id="Flow-FloatingIcon-zoom-in-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="zoom-out" title="Zoom Out">
+	<button class="pict-flow-floating-btn" data-flow-action="zoom-out" title="Zoom Out"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('zoom-out')">
 		<span id="Flow-FloatingIcon-zoom-out-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="zoom-fit" title="Fit to View">
+	<button class="pict-flow-floating-btn" data-flow-action="zoom-fit" title="Fit to View"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('zoom-fit')">
 		<span id="Flow-FloatingIcon-zoom-fit-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 	<div class="pict-flow-floating-separator"></div>
-	<button class="pict-flow-floating-btn" data-flow-action="auto-layout" title="Auto Layout">
+	<button class="pict-flow-floating-btn" data-flow-action="auto-layout" title="Auto Layout"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('auto-layout')">
 		<span id="Flow-FloatingIcon-auto-layout-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="layout-popup" title="Layout">
+	<button class="pict-flow-floating-btn" data-flow-action="layout-popup" title="Layout"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('layout-popup')">
 		<span id="Flow-FloatingIcon-layout-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="fullscreen" title="Toggle Fullscreen">
+	<button class="pict-flow-floating-btn" data-flow-action="fullscreen" title="Toggle Fullscreen"
+		onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleButtonClick('fullscreen')">
 		<span id="Flow-FloatingIcon-fullscreen-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 	<div class="pict-flow-floating-separator"></div>
-	<button class="pict-flow-floating-btn" data-flow-action="dock-toolbar" title="Dock Toolbar">
+	<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')">
 		<span id="Flow-FloatingIcon-dock-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 </div>
@@ -104,58 +118,13 @@ class PictViewFlowFloatingToolbar extends libPictView
 	{
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
 
-		// Bind click delegation for action buttons
-		let tmpFloatingToolbar = this.pict.ContentAssignment.getElement(`#Flow-FloatingToolbar-${tmpFlowViewIdentifier}`);
-		if (tmpFloatingToolbar.length > 0)
-		{
-			tmpFloatingToolbar[0].addEventListener('click', (pEvent) =>
-			{
-				let tmpTarget = pEvent.target;
-				if (!tmpTarget) return;
-
-				let tmpButton = tmpTarget.closest('[data-flow-action]');
-				if (!tmpButton) return;
-
-				let tmpAction = tmpButton.getAttribute('data-flow-action');
-				if (tmpAction === 'dock-toolbar')
-				{
-					if (this._ToolbarView)
-					{
-						this._ToolbarView._setToolbarMode('docked');
-					}
-					return;
-				}
-
-				// Delegate all other actions to the docked toolbar
-				if (this._ToolbarView)
-				{
-					this._ToolbarView._handleToolbarAction(tmpAction);
-				}
-			});
-		}
-
-		// Bind drag behavior on the grip
-		let tmpGrip = this.pict.ContentAssignment.getElement(`#Flow-FloatingGrip-${tmpFlowViewIdentifier}`);
-		if (tmpGrip.length > 0)
-		{
-			tmpGrip[0].addEventListener('mousedown', (pEvent) =>
-			{
-				this._startDrag(pEvent);
-			});
-
-			// Double-click grip to toggle collapsed state
-			tmpGrip[0].addEventListener('dblclick', (pEvent) =>
-			{
-				pEvent.preventDefault();
-				pEvent.stopPropagation();
-				this._toggleCollapse();
-			});
-		}
-
-		// Populate icons
+		// Button clicks and grip drag/dblclick are wired inline in
+		// Flow-FloatingToolbar-Template — see _handleButtonClick / _startDrag /
+		// _handleGripDoubleClick. Only icon population and option-based
+		// pruning happen here.
 		this._populateIcons();
 
-		// Remove buttons from DOM based on options
+		let tmpFloatingToolbar = this.pict.ContentAssignment.getElement(`#Flow-FloatingToolbar-${tmpFlowViewIdentifier}`);
 		if (tmpFloatingToolbar.length > 0)
 		{
 			if (this.options.EnableAddNode === false)
@@ -179,6 +148,45 @@ class PictViewFlowFloatingToolbar extends libPictView
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
 
+	/**
+	 * Handle a click on a floating toolbar action button. Called from the
+	 * inline `onclick` handler on each button.
+	 *
+	 * @param {string} pAction - Value of the button's data-flow-action attr
+	 */
+	_handleButtonClick(pAction)
+	{
+		if (pAction === 'dock-toolbar')
+		{
+			if (this._ToolbarView)
+			{
+				this._ToolbarView._setToolbarMode('docked');
+			}
+			return;
+		}
+		if (this._ToolbarView)
+		{
+			this._ToolbarView._handleToolbarAction(pAction);
+		}
+	}
+
+	/**
+	 * Handle a double-click on the grip. Toggles collapsed state and
+	 * prevents the event from reaching the surrounding canvas. Called
+	 * from the inline `ondblclick` handler.
+	 *
+	 * @param {Event} pEvent
+	 */
+	_handleGripDoubleClick(pEvent)
+	{
+		if (pEvent && typeof pEvent.preventDefault === 'function')
+		{
+			pEvent.preventDefault();
+			pEvent.stopPropagation();
+		}
+		this._toggleCollapse();
+	}
+
 	/**
 	 * Populate SVG icons into all floating toolbar button spans.
 	 */

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

@@ -40,11 +40,31 @@ class PictViewFlowNode extends libPictView
 			if (pNodeTypeConfig.PortLabelsOnHover) tmpClassList += ' pict-flow-node-port-labels-hover';
 			if (pNodeTypeConfig.PortLabelsVertical) tmpClassList += ' pict-flow-node-port-labels-vertical';
 		}
+
+		// Resolve theme-aware ColorRole. Per-node override wins; falls back
+		// to the node type's role. A role of 'none' (or empty string)
+		// explicitly opts out — useful when a card wants to keep its
+		// hex BodyStyle/TitleBarColor regardless of the host theme.
+		let tmpColorRole = (typeof pNodeData.ColorRole !== 'undefined')
+			? pNodeData.ColorRole
+			: (pNodeTypeConfig && pNodeTypeConfig.ColorRole);
+		if (tmpColorRole && tmpColorRole !== 'none')
+		{
+			tmpClassList += ' pict-flow-node-color-' + tmpColorRole;
+		}
 		tmpGroup.setAttribute('class', tmpClassList);
 		tmpGroup.setAttribute('transform', `translate(${pNodeData.X}, ${pNodeData.Y})`);
 		tmpGroup.setAttribute('data-node-hash', pNodeData.Hash);
 		tmpGroup.setAttribute('data-element-type', 'node');
 
+		// Hover the whole node → activate every port-hint that points
+		// at any of this node's ports. Lets the user see *all* of the
+		// node's reroute lines at once, not just one badge at a time.
+		if (this._FlowView._PortRenderer && typeof this._FlowView._PortRenderer._wirePortHintHover === 'function')
+		{
+			this._FlowView._PortRenderer._wirePortHintHover(tmpGroup, null, pNodeData.Hash);
+		}
+
 		let tmpWidth = pNodeData.Width || 180;
 		let tmpHeight = pNodeData.Height || 80;
 		let tmpTitleBarHeight = this.options.NodeTitleBarHeight;
@@ -422,9 +442,10 @@ class PictViewFlowNode extends libPictView
 		tmpDiv.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
 		tmpDiv.setAttribute('class', 'pict-flow-node-body-content-html');
 
-		// Pointer event isolation — prevent node drag/canvas pan
-		tmpDiv.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-		tmpDiv.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
+		// Pointer event isolation — prevent node drag/canvas pan.
+		// Inline attribute handlers (visible in DOM, no closure leak).
+		tmpDiv.setAttribute('onpointerdown', 'event.stopPropagation()');
+		tmpDiv.setAttribute('onwheel', 'event.stopPropagation()');
 
 		// Render template content
 		let tmpRenderedContent = this._resolveBodyTemplate(pBodyContent, pNodeData, pPict);
@@ -463,9 +484,9 @@ class PictViewFlowNode extends libPictView
 		tmpCanvas.style.width = '100%';
 		tmpCanvas.style.height = '100%';
 
-		// Pointer event isolation
-		tmpCanvas.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-		tmpCanvas.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
+		// Pointer event isolation — inline attribute handlers.
+		tmpCanvas.setAttribute('onpointerdown', 'event.stopPropagation()');
+		tmpCanvas.setAttribute('onwheel', 'event.stopPropagation()');
 
 		// Invoke render callback (the primary rendering path for canvas)
 		if (typeof pBodyContent.RenderCallback === 'function')
@@ -529,6 +550,17 @@ class PictViewFlowNode extends libPictView
 			}
 		}
 
+		// Per-node BodyStyle override (wins over the node-type default).
+		// Lets a flow author paint individual cards distinctly without
+		// registering a new node type per category.
+		if (pNodeData.BodyStyle)
+		{
+			for (let tmpStyleKey in pNodeData.BodyStyle)
+			{
+				tmpBody.setAttribute(tmpStyleKey, pNodeData.BodyStyle[tmpStyleKey]);
+			}
+		}
+
 		// Apply per-instance style overrides (for node-specific editing)
 		// These must be applied as inline styles so they override CSS rules
 		// (CSS declarations take precedence over SVG presentation attributes).
@@ -561,6 +593,11 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpTitleBar.setAttribute('fill', pNodeTypeConfig.TitleBarColor);
 		}
+		// Per-node TitleBarColor (wins over node-type default).
+		if (pNodeData.TitleBarColor)
+		{
+			tmpTitleBar.setAttribute('fill', pNodeData.TitleBarColor);
+		}
 
 		pGroup.appendChild(tmpTitleBar);
 
@@ -578,6 +615,10 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpTitleBarBottom.setAttribute('fill', pNodeTypeConfig.TitleBarColor);
 		}
+		if (pNodeData.TitleBarColor)
+		{
+			tmpTitleBarBottom.setAttribute('fill', pNodeData.TitleBarColor);
+		}
 
 		// Per-instance title bar color override
 		// Applied as inline style to override CSS rules.