pict-section-flow 0.0.18 → 1.0.0

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

@@ -50,7 +50,11 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 		let tmpPict = this._FlowView.pict || this._FlowView.fable;
 		let tmpTitle = pPanelData.Title || 'Properties';
 		let tmpChromeHTML = tmpPict.parseTemplateByHash('Flow-PanelChrome-Template',
-			{ Hash: pPanelData.Hash, Title: tmpTitle });
+			{
+				Hash: pPanelData.Hash,
+				Title: tmpTitle,
+				FlowViewIdentifier: this._FlowView.options.ViewIdentifier
+			});
 
 		tmpFO.innerHTML = tmpChromeHTML;
 
@@ -65,22 +69,8 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 			tmpCloseIcon.textContent = '\u2715';
 		}
 
-		// Attach event isolation to the scrollable content area so
-		// pointer/wheel events inside the panel do not trigger SVG interactions
-		let tmpContent = tmpFO.querySelector('.pict-flow-panel-content');
-		if (tmpContent)
-		{
-			tmpContent.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpContent.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
-		}
-
-		// Isolate events on the tab bar
-		let tmpTabbar = tmpFO.querySelector('.pict-flow-panel-tabbar');
-		if (tmpTabbar)
-		{
-			tmpTabbar.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpTabbar.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
-		}
+		// Pointer/wheel isolation lives on the inline onpointerdown/onwheel
+		// attributes in Flow-PanelChrome-Template — see PictView-Flow.js.
 
 		pPanelsLayer.appendChild(tmpFO);
 

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

@@ -104,61 +104,58 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		if (!this._SVGElement) return;
 
-		// Use pointer events for unified mouse/touch handling
-		this._SVGElement.addEventListener('pointerdown', this._boundOnPointerDown);
-		this._SVGElement.addEventListener('pointermove', this._boundOnPointerMove);
-		this._SVGElement.addEventListener('pointerup', this._boundOnPointerUp);
-		this._SVGElement.addEventListener('pointerleave', this._boundOnPointerUp);
-		this._SVGElement.addEventListener('wheel', this._boundOnWheel, { passive: false });
-
-		// Keyboard events for delete
+		// Pointer/wheel/contextmenu live as inline attributes on the SVG
+		// template (see Flow-Container-Template in PictView-Flow.js); they
+		// route to InteractionManager via the FlowView's bridges. The
+		// keydown listener stays document-level because keyboard input
+		// has no element-level inline equivalent for the canvas-as-a-whole.
 		document.addEventListener('keydown', this._boundOnKeyDown);
+	}
 
-		// Handle right-click: add/remove bezier handles on connections
-		this._SVGElement.addEventListener('contextmenu', (pEvent) =>
-		{
-			pEvent.preventDefault();
+	/**
+	 * Inline-handler bridge — invoked from the SVG template's
+	 * `oncontextmenu` attribute. Prevents the browser context menu and
+	 * dispatches to the right bezier-handle action based on what was
+	 * right-clicked.
+	 *
+	 * @param {Event} pEvent
+	 */
+	handleContextMenu(pEvent)
+	{
+		pEvent.preventDefault();
 
-			let tmpTarget = pEvent.target;
-			let tmpElementType = this._getElementType(tmpTarget);
+		let tmpTarget = pEvent.target;
+		let tmpElementType = this._getElementType(tmpTarget);
 
-			switch (tmpElementType)
-			{
-				case 'connection':
-				case 'connection-hitarea':
-					this._addBezierHandle(tmpTarget, pEvent);
-					break;
+		switch (tmpElementType)
+		{
+			case 'connection':
+			case 'connection-hitarea':
+				this._addBezierHandle(tmpTarget, pEvent);
+				break;
 
-				case 'connection-handle':
-					this._removeBezierHandle(tmpTarget);
-					break;
+			case 'connection-handle':
+				this._removeBezierHandle(tmpTarget);
+				break;
 
-				case 'tether':
-				case 'tether-hitarea':
-					this._addTetherBezierHandle(tmpTarget, pEvent);
-					break;
+			case 'tether':
+			case 'tether-hitarea':
+				this._addTetherBezierHandle(tmpTarget, pEvent);
+				break;
 
-				case 'tether-handle':
-					this._removeTetherBezierHandle(tmpTarget);
-					break;
-			}
-		});
+			case 'tether-handle':
+				this._removeTetherBezierHandle(tmpTarget);
+				break;
+		}
 	}
 
 	/**
-	 * Remove all event listeners
+	 * Remove all event listeners. Pointer/wheel/contextmenu listeners live
+	 * as inline template attributes and don't need explicit teardown — they
+	 * disappear with the SVG element when the FlowView is destroyed.
 	 */
 	destroy()
 	{
-		if (this._SVGElement)
-		{
-			this._SVGElement.removeEventListener('pointerdown', this._boundOnPointerDown);
-			this._SVGElement.removeEventListener('pointermove', this._boundOnPointerMove);
-			this._SVGElement.removeEventListener('pointerup', this._boundOnPointerUp);
-			this._SVGElement.removeEventListener('pointerleave', this._boundOnPointerUp);
-			this._SVGElement.removeEventListener('wheel', this._boundOnWheel);
-		}
-
 		document.removeEventListener('keydown', this._boundOnKeyDown);
 	}
 

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

@@ -283,31 +283,17 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 	 */
 	_wirePortHintHover(pHoverEl, pPortHash, pNodeHash)
 	{
-		if (!pHoverEl || typeof pHoverEl.addEventListener !== 'function') return;
+		if (!pHoverEl || typeof pHoverEl.setAttribute !== 'function') return;
+		if (!this._FlowView || !this._FlowView.options) return;
 
-		let tmpFlowView = this._FlowView;
-		let tmpSelector = pPortHash
-			? `.pict-flow-port-hint[data-port-hash="${pPortHash}"]`
-			: `.pict-flow-port-hint[data-node-hash="${pNodeHash}"]`;
-
-		pHoverEl.addEventListener('mouseenter', function ()
-		{
-			let tmpScope = tmpFlowView._SVGElement || document;
-			let tmpHints = tmpScope.querySelectorAll(tmpSelector);
-			for (let i = 0; i < tmpHints.length; i++)
-			{
-				tmpHints[i].setAttribute('data-active', 'true');
-			}
-		});
-		pHoverEl.addEventListener('mouseleave', function ()
-		{
-			let tmpScope = tmpFlowView._SVGElement || document;
-			let tmpHints = tmpScope.querySelectorAll(tmpSelector);
-			for (let i = 0; i < tmpHints.length; i++)
-			{
-				tmpHints[i].removeAttribute('data-active');
-			}
-		});
+		// 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 + ")");
 	}
 
 	/**

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,6 +40,18 @@ 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);
@@ -430,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);
@@ -471,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')

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

@@ -74,7 +74,17 @@ const _DefaultConfiguration =
 		},
 		{
 			Hash: 'Flow-NodeProps-Editor',
-			Template: '<div class="pict-flow-node-props-fields"><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title</label><input type="text" class="pict-flow-node-props-input" data-prop="Title" value="{~D:Record.Title~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Width" value="{~D:Record.Width~}" min="60" step="10" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Height</label><input type="number" class="pict-flow-node-props-input" data-prop="Height" value="{~D:Record.Height~}" min="40" step="10" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Fill</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyFill" value="{~D:Record.BodyFillValue~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Stroke</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyStroke" value="{~D:Record.BodyStrokeValue~}" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Stroke Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Style.BodyStrokeWidth" value="{~D:Record.BodyStrokeWidthValue~}" min="0" max="10" step="0.5" /></div><div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title Bar</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.TitleBarColor" value="{~D:Record.TitleBarColorValue~}" /></div></div>'
+			// Inline oninput/onpointerdown wired to the FlowView's helper —
+			// see PictViewFlow._applyNodePropChange / _stopEvent.
+			Template: '<div class="pict-flow-node-props-fields" data-flow-view="{~D:Record.FlowViewIdentifier~}" data-node-hash="{~D:Record.NodeHash~}">'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title</label><input type="text" class="pict-flow-node-props-input" data-prop="Title" value="{~D:Record.Title~}" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Width" value="{~D:Record.Width~}" min="60" step="10" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Height</label><input type="number" class="pict-flow-node-props-input" data-prop="Height" value="{~D:Record.Height~}" min="40" step="10" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Fill</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyFill" value="{~D:Record.BodyFillValue~}" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Body Stroke</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.BodyStroke" value="{~D:Record.BodyStrokeValue~}" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Stroke Width</label><input type="number" class="pict-flow-node-props-input" data-prop="Style.BodyStrokeWidth" value="{~D:Record.BodyStrokeWidthValue~}" min="0" max="10" step="0.5" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '<div class="pict-flow-node-props-field"><label class="pict-flow-node-props-label">Title Bar</label><input type="color" class="pict-flow-node-props-input pict-flow-node-props-color" data-prop="Style.TitleBarColor" value="{~D:Record.TitleBarColorValue~}" oninput="_Pict.views[\'{~D:Record.FlowViewIdentifier~}\']._applyNodePropChange(\'{~D:Record.NodeHash~}\', this.getAttribute(\'data-prop\'), this.value, this.type, event)" onpointerdown="event.stopPropagation()" /></div>'
+				+ '</div>'
 		}
 	]
 };
@@ -216,12 +226,11 @@ class PictViewFlowPropertiesPanel extends libPictView
 		let tmpFO = pPanelsLayer.querySelector(`[data-panel-hash="${pPanelData.Hash}"]`);
 		if (tmpFO)
 		{
-			// Render appearance and help tabs
+			// 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);
-
-			// Wire up tab switching
-			this._wireTabSwitching(tmpFO);
 		}
 	}
 
@@ -559,27 +568,16 @@ class PictViewFlowPropertiesPanel extends libPictView
 			BodyFillValue: tmpStyle.BodyFill || tmpDefaultBodyFill,
 			BodyStrokeValue: tmpStyle.BodyStroke || tmpDefaultBodyStroke,
 			BodyStrokeWidthValue: tmpStyle.BodyStrokeWidth || 1,
-			TitleBarColorValue: tmpStyle.TitleBarColor || tmpDefaultTitleBarColor
+			TitleBarColorValue: tmpStyle.TitleBarColor || tmpDefaultTitleBarColor,
+			NodeHash: pPanelData.NodeHash,
+			FlowViewIdentifier: this._FlowView.options.ViewIdentifier
 		};
 
-		tmpAppearancePane.innerHTML = this.pict.parseTemplateByHash('Flow-NodeProps-Editor', tmpRecord);
-
-		// Wire up live change handlers on all input fields
-		let tmpInputs = tmpAppearancePane.querySelectorAll('.pict-flow-node-props-input');
-		for (let i = 0; i < tmpInputs.length; i++)
-		{
-			let tmpInput = tmpInputs[i];
-			let tmpProp = tmpInput.getAttribute('data-prop');
-
-			tmpInput.addEventListener('input', (pEvent) =>
-			{
-				pEvent.stopPropagation();
-				this._applyNodePropChange(pPanelData.NodeHash, tmpProp, tmpInput.value, tmpInput.type);
-			});
-
-			// Prevent pointer events from propagating to SVG drag handler
-			tmpInput.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-		}
+		// Inputs in the rendered template carry inline oninput/onpointerdown
+		// handlers that call the FlowView's _applyNodePropChange — no
+		// addEventListener wiring needed here.
+		this.pict.ContentAssignment.assignContent(tmpAppearancePane,
+			this.pict.parseTemplateByHash('Flow-NodeProps-Editor', tmpRecord));
 	}
 
 	/**
@@ -619,42 +617,37 @@ class PictViewFlowPropertiesPanel extends libPictView
 	}
 
 	/**
-	 * Wire up tab switching on all tab buttons within a panel foreignObject.
+	 * Switch the visible tab pane within a panel foreignObject. Invoked
+	 * from the inline `onclick` handler on tab buttons in
+	 * Flow-PanelChrome-Template via FlowView._handlePanelTabClick.
 	 *
-	 * @param {Element} pForeignObject - The panel's SVG foreignObject element
+	 * @param {Element} pTabElement - The clicked tab button
 	 */
-	_wireTabSwitching(pForeignObject)
+	switchPanelTab(pTabElement)
 	{
-		let tmpTabs = pForeignObject.querySelectorAll('.pict-flow-panel-tab');
-		let tmpPanes = pForeignObject.querySelectorAll('.pict-flow-panel-tab-pane');
+		let tmpForeignObject = pTabElement.closest('foreignObject');
+		if (!tmpForeignObject) return;
+
+		let tmpTarget = pTabElement.getAttribute('data-tab-target');
+		let tmpTabs = tmpForeignObject.querySelectorAll('.pict-flow-panel-tab');
+		let tmpPanes = tmpForeignObject.querySelectorAll('.pict-flow-panel-tab-pane');
 
 		for (let i = 0; i < tmpTabs.length; i++)
 		{
-			tmpTabs[i].addEventListener('click', (pEvent) =>
-			{
-				pEvent.stopPropagation();
-				let tmpTarget = pEvent.currentTarget.getAttribute('data-tab-target');
-
-				// Deactivate all tabs and panes
-				for (let j = 0; j < tmpTabs.length; j++)
-				{
-					tmpTabs[j].classList.remove('active');
-				}
-				for (let j = 0; j < tmpPanes.length; j++)
-				{
-					tmpPanes[j].classList.remove('active');
-					tmpPanes[j].style.display = 'none';
-				}
+			tmpTabs[i].classList.remove('active');
+		}
+		for (let i = 0; i < tmpPanes.length; i++)
+		{
+			tmpPanes[i].classList.remove('active');
+			tmpPanes[i].style.display = 'none';
+		}
 
-				// Activate the selected tab and pane
-				pEvent.currentTarget.classList.add('active');
-				let tmpTargetPane = pForeignObject.querySelector('.pict-flow-panel-tab-pane[data-tab="' + tmpTarget + '"]');
-				if (tmpTargetPane)
-				{
-					tmpTargetPane.classList.add('active');
-					tmpTargetPane.style.display = 'block';
-				}
-			});
+		pTabElement.classList.add('active');
+		let tmpTargetPane = tmpForeignObject.querySelector('.pict-flow-panel-tab-pane[data-tab="' + tmpTarget + '"]');
+		if (tmpTargetPane)
+		{
+			tmpTargetPane.classList.add('active');
+			tmpTargetPane.style.display = 'block';
 		}
 	}