pict-section-flow 0.0.17 → 0.0.19

package/source/views/PictView-Flow.js

@@ -59,6 +59,7 @@ const _DefaultConfiguration =
 	EnableConnectionCreation: true,
 	EnableGridSnap: false,
 	GridSnapSize: 20,
+	EnableLayoutMenu: true,
 
 	MinZoom: 0.1,
 	MaxZoom: 5.0,
@@ -68,16 +69,29 @@ const _DefaultConfiguration =
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
 
+	// Layout-algorithm subsystem defaults
+	DefaultLayoutAlgorithm: 'Custom',
+	DefaultLayoutParameters: {},
+	DefaultLayoutAutoApply: false,
+
+	// Edge-theme subsystem defaults — null = inherit from active layout's
+	// `DefaultEdgeTheme` field, with hard fallback to 'Bezier'.
+	DefaultEdgeTheme: null,
+	DefaultEdgeThemeParameters: {},
+
 	CSS: false,
 
 	Templates:
 	[
 		{
 			Hash: 'Flow-PanelChrome-Template',
-			Template: /*html*/`<div class="pict-flow-panel" xmlns="http://www.w3.org/1999/xhtml"><div class="pict-flow-panel-titlebar" data-element-type="panel-titlebar" data-panel-hash="{~D:Record.Hash~}"><span class="pict-flow-panel-title-text">{~D:Record.Title~}</span><span class="pict-flow-panel-close-btn" data-element-type="panel-close" data-panel-hash="{~D:Record.Hash~}"><span class="pict-flow-panel-close-icon"></span></span></div><div class="pict-flow-panel-content" data-panel-hash="{~D:Record.Hash~}"><div class="pict-flow-panel-tab-pane active" data-tab="properties" data-panel-hash="{~D:Record.Hash~}"></div><div class="pict-flow-panel-tab-pane" data-tab="help" data-panel-hash="{~D:Record.Hash~}" style="display:none;"></div><div class="pict-flow-panel-tab-pane" data-tab="appearance" data-panel-hash="{~D:Record.Hash~}" style="display:none;"></div></div><div class="pict-flow-panel-resize-handle" data-element-type="panel-resize" data-panel-hash="{~D:Record.Hash~}"></div><div class="pict-flow-panel-tabbar" data-panel-hash="{~D:Record.Hash~}"><div class="pict-flow-panel-tab active" data-tab-target="properties" data-panel-hash="{~D:Record.Hash~}">Properties</div><div class="pict-flow-panel-tab" data-tab-target="help" data-panel-hash="{~D:Record.Hash~}" style="display:none;">Help</div><div class="pict-flow-panel-tab" data-tab-target="appearance" data-panel-hash="{~D:Record.Hash~}">Appearance</div></div></div>`
+			Template: /*html*/`<div class="pict-flow-panel" xmlns="http://www.w3.org/1999/xhtml"><div class="pict-flow-panel-titlebar" data-element-type="panel-titlebar" data-panel-hash="{~D:Record.Hash~}"><span class="pict-flow-panel-title-text">{~D:Record.Title~}</span><span class="pict-flow-panel-close-btn" data-element-type="panel-close" data-panel-hash="{~D:Record.Hash~}"><span class="pict-flow-panel-close-icon"></span></span></div><div class="pict-flow-panel-content" data-panel-hash="{~D:Record.Hash~}" onpointerdown="event.stopPropagation()" onwheel="event.stopPropagation()"><div class="pict-flow-panel-tab-pane active" data-tab="properties" data-panel-hash="{~D:Record.Hash~}"></div><div class="pict-flow-panel-tab-pane" data-tab="help" data-panel-hash="{~D:Record.Hash~}" style="display:none;"></div><div class="pict-flow-panel-tab-pane" data-tab="appearance" data-panel-hash="{~D:Record.Hash~}" style="display:none;"></div></div><div class="pict-flow-panel-resize-handle" data-element-type="panel-resize" data-panel-hash="{~D:Record.Hash~}"></div><div class="pict-flow-panel-tabbar" data-panel-hash="{~D:Record.Hash~}" onpointerdown="event.stopPropagation()" onwheel="event.stopPropagation()"><div class="pict-flow-panel-tab active" data-tab-target="properties" data-panel-hash="{~D:Record.Hash~}" onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._handlePanelTabClick(this, event)">Properties</div><div class="pict-flow-panel-tab" data-tab-target="help" data-panel-hash="{~D:Record.Hash~}" style="display:none;" onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._handlePanelTabClick(this, event)">Help</div><div class="pict-flow-panel-tab" data-tab-target="appearance" data-panel-hash="{~D:Record.Hash~}" onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._handlePanelTabClick(this, event)">Appearance</div></div></div>`
 		},
 		{
 			Hash: 'Flow-Container-Template',
+			// Inline pointer/wheel/contextmenu handlers route to the
+			// InteractionManager via the FlowView. Keyboard events stay
+			// document-level (no element-level inline equivalent).
 			Template: /*html*/`
 <div class="pict-flow-container" id="Flow-Wrapper-{~D:Record.ViewIdentifier~}">
 	<div id="Flow-Toolbar-{~D:Record.ViewIdentifier~}"></div>
@@ -85,7 +99,13 @@ const _DefaultConfiguration =
 	<div class="pict-flow-svg-container" id="Flow-SVG-Container-{~D:Record.ViewIdentifier~}">
 		<svg class="pict-flow-svg"
 			id="Flow-SVG-{~D:Record.ViewIdentifier~}"
-			xmlns="http://www.w3.org/2000/svg">
+			xmlns="http://www.w3.org/2000/svg"
+			onpointerdown="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGPointerDown(event)"
+			onpointermove="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGPointerMove(event)"
+			onpointerup="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGPointerUp(event)"
+			onpointerleave="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGPointerUp(event)"
+			onwheel="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGWheel(event)"
+			oncontextmenu="_Pict.views['{~D:Record.ViewIdentifier~}']._handleSVGContextMenu(event)">
 			<defs>
 				<pattern id="flow-grid-{~D:Record.ViewIdentifier~}"
 					width="20" height="20" patternUnits="userSpaceOnUse">
@@ -99,6 +119,8 @@ const _DefaultConfiguration =
 			<g class="pict-flow-viewport" id="Flow-Viewport-{~D:Record.ViewIdentifier~}">
 				<g class="pict-flow-connections-layer" id="Flow-Connections-{~D:Record.ViewIdentifier~}"></g>
 				<g class="pict-flow-nodes-layer" id="Flow-Nodes-{~D:Record.ViewIdentifier~}"></g>
+				<g class="pict-flow-endpoints-layer" id="Flow-Endpoints-{~D:Record.ViewIdentifier~}"></g>
+				<g class="pict-flow-port-hints-layer" id="Flow-PortHints-{~D:Record.ViewIdentifier~}"></g>
 				<g class="pict-flow-tethers-layer" id="Flow-Tethers-{~D:Record.ViewIdentifier~}"></g>
 				<g class="pict-flow-panels-layer" id="Flow-Panels-{~D:Record.ViewIdentifier~}"></g>
 			</g>
@@ -195,13 +217,24 @@ class PictViewFlow extends libPictView
 				SelectedNodeHash: null,
 				SelectedConnectionHash: null,
 				SelectedTetherHash: null
-			}
+			},
+			LayoutAlgorithm: this.options.DefaultLayoutAlgorithm || 'Custom',
+			LayoutParameters: JSON.parse(JSON.stringify(this.options.DefaultLayoutParameters || {})),
+			LayoutAutoApply: !!this.options.DefaultLayoutAutoApply,
+			EdgeTheme: this.options.DefaultEdgeTheme || null,
+			EdgeThemeParameters: JSON.parse(JSON.stringify(this.options.DefaultEdgeThemeParameters || {}))
 		};
 
+		// Re-entrancy guard for the auto-apply event handler
+		this._AutoApplyInProgress = false;
+		this._AutoApplyHandlerHashes = [];
+
 		this._SVGElement = null;
 		this._ViewportElement = null;
 		this._NodesLayer = null;
 		this._ConnectionsLayer = null;
+		this._EndpointsLayer = null;
+		this._PortHintsLayer = null;
 		this._TethersLayer = null;
 		this._PanelsLayer = null;
 
@@ -327,9 +360,65 @@ class PictViewFlow extends libPictView
 		// Instantiate all remaining services (skips Theme + Noise since already set)
 		this._instantiateServices();
 
+		// Subscribe to the host application's pict-provider-theme so the flow
+		// editor's marker arrowhead colors and shape overrides update when the
+		// host swaps light/dark or palette themes. CSS variables (--theme-*)
+		// re-resolve automatically — only the SVG <marker> defs (which inline
+		// fill colors at build time) and ConnectorShapesProvider state need a
+		// manual refresh.
+		this._subscribeToHostTheme();
+
 		return super.onBeforeInitialize();
 	}
 
+	/**
+	 * If the host application has registered pict-provider-theme, subscribe
+	 * to its onApply hook so we can refresh anything that doesn't pick up
+	 * the new --theme-* CSS variables automatically (SVG marker fills,
+	 * connector shape overrides). No-op when no host theme provider is
+	 * available — the flow editor still functions with its built-in themes.
+	 */
+	_subscribeToHostTheme()
+	{
+		let tmpHostTheme = this._resolveHostThemeProvider();
+		if (!tmpHostTheme || typeof tmpHostTheme.onApply !== 'function') return;
+
+		this._HostThemeUnsubscribe = tmpHostTheme.onApply(() =>
+		{
+			if (this._CSSProvider) this._CSSProvider.registerCSS();
+			this._reinjectMarkerDefs();
+			if (this.initialRenderComplete) this.renderFlow();
+		});
+	}
+
+	/**
+	 * Locate the host's pict-provider-theme instance. It is normally
+	 * registered under a stable service hash by the host app; we check
+	 * common locations so consumers don't have to wire it manually.
+	 * @returns {Object|null}
+	 */
+	_resolveHostThemeProvider()
+	{
+		let tmpPict = this.pict;
+		if (!tmpPict) return null;
+		if (tmpPict.providers)
+		{
+			let tmpKeys = Object.keys(tmpPict.providers);
+			for (let i = 0; i < tmpKeys.length; i++)
+			{
+				let tmpProvider = tmpPict.providers[tmpKeys[i]];
+				if (tmpProvider
+					&& typeof tmpProvider.onApply === 'function'
+					&& typeof tmpProvider.applyTheme === 'function'
+					&& typeof tmpProvider.listThemes === 'function')
+				{
+					return tmpProvider;
+				}
+			}
+		}
+		return null;
+	}
+
 	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
 	{
 		if (!this.initialRenderComplete)
@@ -371,6 +460,18 @@ class PictViewFlow extends libPictView
 			this._ConnectionsLayer = tmpConnectionsElements[0];
 		}
 
+		let tmpEndpointsElements = this.pict.ContentAssignment.getElement(`#Flow-Endpoints-${tmpViewIdentifier}`);
+		if (tmpEndpointsElements.length > 0)
+		{
+			this._EndpointsLayer = tmpEndpointsElements[0];
+		}
+
+		let tmpPortHintsElements = this.pict.ContentAssignment.getElement(`#Flow-PortHints-${tmpViewIdentifier}`);
+		if (tmpPortHintsElements.length > 0)
+		{
+			this._PortHintsLayer = tmpPortHintsElements[0];
+		}
+
 		let tmpTethersElements = this.pict.ContentAssignment.getElement(`#Flow-Tethers-${tmpViewIdentifier}`);
 		if (tmpTethersElements.length > 0)
 		{
@@ -451,6 +552,9 @@ class PictViewFlow extends libPictView
 		// Bind interaction events
 		this._InteractionManager.initialize(this._SVGElement, this._ViewportElement);
 
+		// Wire the auto-apply handler to structural-change events
+		this._subscribeAutoApplyHandlers();
+
 		// Load initial flow data if an address is configured
 		if (this.options.FlowDataAddress)
 		{
@@ -535,13 +639,104 @@ class PictViewFlow extends libPictView
 	}
 
 	/**
-	 * Apply auto-layout to all nodes
+	 * Apply auto-layout to all nodes.
+	 *
+	 * Backwards-compatible signature: when called with no arguments,
+	 * dispatches to the Layered algorithm with its default parameters
+	 * (matching the pre-subsystem behavior).
+	 *
+	 * If `pAlgorithmName` is provided it is used directly; otherwise the
+	 * configured `_FlowData.LayoutAlgorithm` is used (unless that value
+	 * is 'Custom' or unset, in which case it falls back to 'Layered').
+	 *
+	 * @param {string} [pAlgorithmName]
+	 * @param {Object} [pParameters]
 	 */
-	autoLayout()
+	autoLayout(pAlgorithmName, pParameters)
 	{
-		if (this._LayoutService)
+		if (!this._LayoutService) return;
+
+		let tmpName;
+		let tmpParams;
+		if (typeof pAlgorithmName === 'string' && pAlgorithmName !== '')
 		{
-			this._LayoutService.autoLayout(this._FlowData.Nodes, this._FlowData.Connections);
+			tmpName = pAlgorithmName;
+			tmpParams = pParameters || {};
+		}
+		else
+		{
+			let tmpConfigured = this._FlowData.LayoutAlgorithm;
+			tmpName = (typeof tmpConfigured === 'string' && tmpConfigured !== '' && tmpConfigured !== 'Custom') ? tmpConfigured : 'Layered';
+			tmpParams = (tmpName === this._FlowData.LayoutAlgorithm) ? (this._FlowData.LayoutParameters || {}) : {};
+		}
+
+		this._LayoutService.autoLayout(this._FlowData.Nodes, this._FlowData.Connections, tmpName, tmpParams);
+		this.renderFlow();
+		this.marshalFromView();
+
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
+		}
+	}
+
+	/**
+	 * Apply the currently configured layout algorithm to the flow, then
+	 * call the active edge theme's `AdjustLayout` callback (if any) to
+	 * let the theme adjust node positions for cleaner edge rendering
+	 * (e.g. snap to grid, optimize for crossing minimization).
+	 *
+	 * Reads `_FlowData.LayoutAlgorithm` / `LayoutParameters` /
+	 * `EdgeTheme` / `EdgeThemeParameters`. No-op when algorithm is
+	 * 'Custom' — but the edge theme's adjustment still runs (so themes
+	 * like OrthogonalSnap can snap hand-placed nodes too).
+	 */
+	applyCurrentLayout()
+	{
+		if (!this._LayoutService) return;
+		let tmpAlgorithm = this._FlowData.LayoutAlgorithm || 'Custom';
+
+		this._AutoApplyInProgress = true;
+		try
+		{
+			if (tmpAlgorithm !== 'Custom')
+			{
+				this._LayoutService.applyLayout(
+					this._FlowData.Nodes,
+					this._FlowData.Connections,
+					tmpAlgorithm,
+					this._FlowData.LayoutParameters || {}
+				);
+			}
+
+			// Edge-theme post-processing (placement adjustment).
+			let tmpEdgeTheme = this._LayoutService.resolveActiveEdgeTheme({});
+			if (tmpEdgeTheme && typeof tmpEdgeTheme.AdjustLayout === 'function')
+			{
+				try
+				{
+					let tmpEdgeParams = this._LayoutService.getMergedEdgeThemeParameters(
+						tmpEdgeTheme.Name,
+						this._FlowData.EdgeThemeParameters || {}
+					);
+					tmpEdgeTheme.AdjustLayout(this._FlowData.Nodes, this._FlowData.Connections, tmpEdgeParams);
+				}
+				catch (pError)
+				{
+					this.log.warn(`PictSectionFlow edge theme '${tmpEdgeTheme.Name}' AdjustLayout threw: ${pError.message}`);
+				}
+			}
+
+			let tmpHadAdjust = !!(tmpEdgeTheme && typeof tmpEdgeTheme.AdjustLayout === 'function');
+			let tmpDidLayout = (tmpAlgorithm !== 'Custom');
+
+			if (!tmpDidLayout && !tmpHadAdjust)
+			{
+				// Custom + theme-without-AdjustLayout → no positions changed.
+				// Don't render or fire onFlowChanged.
+				return;
+			}
+
 			this.renderFlow();
 			this.marshalFromView();
 
@@ -550,6 +745,143 @@ class PictViewFlow extends libPictView
 				this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
 			}
 		}
+		finally
+		{
+			this._AutoApplyInProgress = false;
+		}
+	}
+
+	/**
+	 * Set the active edge theme (and optionally its parameters). Re-runs
+	 * the current layout so any `AdjustLayout` callback takes effect.
+	 *
+	 * @param {string|null} pThemeName - null clears the override (theme
+	 *   then resolves via the active layout's `DefaultEdgeTheme`).
+	 * @param {Object} [pParameters]
+	 */
+	setEdgeTheme(pThemeName, pParameters)
+	{
+		if (!this._LayoutService) return;
+		if (pThemeName != null && typeof pThemeName !== 'string') return;
+
+		if (pThemeName)
+		{
+			let tmpTheme = this._LayoutService.getEdgeTheme(pThemeName);
+			if (!tmpTheme)
+			{
+				this.log.warn(`PictSectionFlow setEdgeTheme: unknown theme '${pThemeName}'`);
+				return;
+			}
+			this._FlowData.EdgeTheme = pThemeName;
+			this._FlowData.EdgeThemeParameters = Object.assign({}, tmpTheme.DefaultParameters || {}, pParameters || {});
+		}
+		else
+		{
+			this._FlowData.EdgeTheme = null;
+			this._FlowData.EdgeThemeParameters = pParameters ? Object.assign({}, pParameters) : {};
+		}
+
+		this.applyCurrentLayout();
+	}
+
+	/**
+	 * Read the currently configured edge theme settings.
+	 * Returns the *resolved* active theme (factoring in fallback to the
+	 * active layout's `DefaultEdgeTheme`) plus the explicit override
+	 * (if any) for round-tripping into UI.
+	 *
+	 * @returns {{ Theme: string, Override: string|null, Parameters: Object }}
+	 */
+	getEdgeTheme()
+	{
+		let tmpResolved = this._LayoutService ? this._LayoutService.resolveActiveEdgeTheme({}) : null;
+		return {
+			Theme: tmpResolved ? tmpResolved.Name : null,
+			Override: this._FlowData.EdgeTheme || null,
+			Parameters: JSON.parse(JSON.stringify(this._FlowData.EdgeThemeParameters || {}))
+		};
+	}
+
+	/**
+	 * Set the configured layout algorithm and (optionally) its parameters
+	 * and auto-apply flag. Persists to `_FlowData` and applies the layout
+	 * immediately when the algorithm is non-Custom.
+	 *
+	 * @param {string} pAlgorithmName
+	 * @param {Object} [pParameters] - merged over the algorithm's defaults
+	 * @param {boolean} [pAutoApply] - if provided, also sets `LayoutAutoApply`
+	 */
+	setLayoutAlgorithm(pAlgorithmName, pParameters, pAutoApply)
+	{
+		if (!this._LayoutService) return;
+		if (typeof pAlgorithmName !== 'string' || pAlgorithmName === '') return;
+
+		let tmpAlgo = this._LayoutService.getAlgorithm(pAlgorithmName);
+		if (!tmpAlgo)
+		{
+			this.log.warn(`PictSectionFlow setLayoutAlgorithm: unknown algorithm '${pAlgorithmName}'`);
+			return;
+		}
+
+		this._FlowData.LayoutAlgorithm = pAlgorithmName;
+		this._FlowData.LayoutParameters = Object.assign({}, tmpAlgo.DefaultParameters || {}, pParameters || {});
+		if (typeof pAutoApply === 'boolean')
+		{
+			this._FlowData.LayoutAutoApply = pAutoApply;
+		}
+
+		// Always run applyCurrentLayout so the new layout's `DefaultEdgeTheme`
+		// takes effect on connection rendering — even when switching to
+		// 'Custom' (which doesn't reposition nodes but does re-render edges).
+		this.applyCurrentLayout();
+		this.renderFlow();
+	}
+
+	/**
+	 * Toggle whether the configured layout re-applies on structural changes.
+	 * @param {boolean} pAutoApply
+	 */
+	setLayoutAutoApply(pAutoApply)
+	{
+		this._FlowData.LayoutAutoApply = !!pAutoApply;
+		this.marshalFromView();
+	}
+
+	/**
+	 * Read the currently configured layout algorithm settings.
+	 * @returns {{ Algorithm: string, Parameters: Object, AutoApply: boolean }}
+	 */
+	getLayoutAlgorithm()
+	{
+		return {
+			Algorithm: this._FlowData.LayoutAlgorithm || 'Custom',
+			Parameters: JSON.parse(JSON.stringify(this._FlowData.LayoutParameters || {})),
+			AutoApply: !!this._FlowData.LayoutAutoApply
+		};
+	}
+
+	/**
+	 * Subscribe the auto-apply handler to structural-change events. Idempotent.
+	 * Only structural events trigger re-layout — `onNodeMoved` is intentionally
+	 * NOT subscribed so user drags are never clobbered until the next add/remove.
+	 */
+	_subscribeAutoApplyHandlers()
+	{
+		if (!this._EventHandlerProvider) return;
+		if (this._AutoApplyHandlerHashes.length > 0) return;
+
+		let tmpEvents = ['onNodeAdded', 'onNodeRemoved', 'onConnectionCreated', 'onConnectionRemoved'];
+		for (let i = 0; i < tmpEvents.length; i++)
+		{
+			let tmpHash = this._EventHandlerProvider.registerHandler(tmpEvents[i], () =>
+			{
+				if (this._AutoApplyInProgress) return;
+				if (!this._FlowData.LayoutAutoApply) return;
+				if (!this._FlowData.LayoutAlgorithm || this._FlowData.LayoutAlgorithm === 'Custom') return;
+				this.applyCurrentLayout();
+			});
+			if (tmpHash) this._AutoApplyHandlerHashes.push({ Event: tmpEvents[i], Hash: tmpHash });
+		}
 	}
 
 	/**
@@ -881,6 +1213,122 @@ class PictViewFlow extends libPictView
 	{
 		return this._PanelManager.updatePanelPosition(pPanelHash, pX, pY);
 	}
+
+	// ── Inline-handler bridges (called from template onclick/oninput attrs)
+
+	/**
+	 * Handle a click on a panel tab button. Stops propagation so the
+	 * underlying SVG doesn't see it, then delegates to the properties
+	 * panel view for the actual visibility toggle.
+	 *
+	 * @param {Element} pTabElement
+	 * @param {Event} pEvent
+	 */
+	_handlePanelTabClick(pTabElement, pEvent)
+	{
+		if (pEvent && typeof pEvent.stopPropagation === 'function')
+		{
+			pEvent.stopPropagation();
+		}
+		if (this._PropertiesPanelView)
+		{
+			this._PropertiesPanelView.switchPanelTab(pTabElement);
+		}
+	}
+
+	/**
+	 * Apply a node property change driven from the appearance editor's
+	 * inline `oninput` handler. Stops propagation, then delegates to the
+	 * properties panel view.
+	 *
+	 * @param {string} pNodeHash
+	 * @param {string} pPropPath
+	 * @param {string} pValue
+	 * @param {string} pInputType - 'text' | 'number' | 'color'
+	 * @param {Event} [pEvent]
+	 */
+	_applyNodePropChange(pNodeHash, pPropPath, pValue, pInputType, pEvent)
+	{
+		if (pEvent && typeof pEvent.stopPropagation === 'function')
+		{
+			pEvent.stopPropagation();
+		}
+		if (this._PropertiesPanelView)
+		{
+			this._PropertiesPanelView._applyNodePropChange(pNodeHash, pPropPath, pValue, pInputType);
+		}
+	}
+
+	/**
+	 * Inline-handler bridge — light up port-hint paths matching the given
+	 * port (and optionally node) hash. Called from inline `onmouseenter`
+	 * on port badges; see PictService-Flow-PortRenderer._wirePortHintHover.
+	 *
+	 * @param {string|null} pPortHash
+	 * @param {string|null} pNodeHash
+	 */
+	_activatePortHints(pPortHash, pNodeHash)
+	{
+		this._togglePortHints(pPortHash, pNodeHash, true);
+	}
+
+	/**
+	 * Inline-handler bridge — clear port-hint highlights.
+	 *
+	 * @param {string|null} pPortHash
+	 * @param {string|null} pNodeHash
+	 */
+	_deactivatePortHints(pPortHash, pNodeHash)
+	{
+		this._togglePortHints(pPortHash, pNodeHash, false);
+	}
+
+	_togglePortHints(pPortHash, pNodeHash, pActive)
+	{
+		let tmpScope = this._SVGElement || document;
+		let tmpSelector = pPortHash
+			? '.pict-flow-port-hint[data-port-hash="' + pPortHash + '"]'
+			: '.pict-flow-port-hint[data-node-hash="' + pNodeHash + '"]';
+		let tmpHints = tmpScope.querySelectorAll(tmpSelector);
+		for (let i = 0; i < tmpHints.length; i++)
+		{
+			if (pActive)
+			{
+				tmpHints[i].setAttribute('data-active', 'true');
+			}
+			else
+			{
+				tmpHints[i].removeAttribute('data-active');
+			}
+		}
+	}
+
+	// ── SVG inline pointer/wheel bridges ─────────────────────────────────
+
+	_handleSVGPointerDown(pEvent)
+	{
+		if (this._InteractionManager) this._InteractionManager._onPointerDown(pEvent);
+	}
+
+	_handleSVGPointerMove(pEvent)
+	{
+		if (this._InteractionManager) this._InteractionManager._onPointerMove(pEvent);
+	}
+
+	_handleSVGPointerUp(pEvent)
+	{
+		if (this._InteractionManager) this._InteractionManager._onPointerUp(pEvent);
+	}
+
+	_handleSVGWheel(pEvent)
+	{
+		if (this._InteractionManager) this._InteractionManager._onWheel(pEvent);
+	}
+
+	_handleSVGContextMenu(pEvent)
+	{
+		if (this._InteractionManager) this._InteractionManager.handleContextMenu(pEvent);
+	}
 }
 
 module.exports = PictViewFlow;