pict-section-flow 0.0.10 → 0.0.13

package/source/views/PictView-Flow.js

@@ -8,6 +8,10 @@ const libPictServiceFlowPathGenerator = require('../services/PictService-Flow-Pa
 const libPictServiceFlowViewportManager = require('../services/PictService-Flow-ViewportManager.js');
 const libPictServiceFlowSelectionManager = require('../services/PictService-Flow-SelectionManager.js');
 const libPictServiceFlowPanelManager = require('../services/PictService-Flow-PanelManager.js');
+const libPictServiceFlowDataManager = require('../services/PictService-Flow-DataManager.js');
+const libPictServiceFlowConnectionHandleManager = require('../services/PictService-Flow-ConnectionHandleManager.js');
+const libPictServiceFlowRenderManager = require('../services/PictService-Flow-RenderManager.js');
+const libPictServiceFlowPortRenderer = require('../services/PictService-Flow-PortRenderer.js');
 
 const libPictProviderFlowNodeTypes = require('../providers/PictProvider-Flow-NodeTypes.js');
 const libPictProviderFlowEventHandler = require('../providers/PictProvider-Flow-EventHandler.js');
@@ -67,7 +71,7 @@ const _DefaultConfiguration =
 	[
 		{
 			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-body" data-panel-hash="{~D:Record.Hash~}"></div><div class="pict-flow-panel-node-props" data-panel-hash="{~D:Record.Hash~}"><div class="pict-flow-panel-node-props-header" data-element-type="node-props-toggle" data-panel-hash="{~D:Record.Hash~}"><span class="pict-flow-panel-node-props-chevron">&#9654;</span><span class="pict-flow-panel-node-props-title">Node Properties</span></div><div class="pict-flow-panel-node-props-body" style="display:none;"></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~}"><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>`
 		},
 		{
 			Hash: 'Flow-Container-Template',
@@ -122,119 +126,58 @@ class PictViewFlow extends libPictView
 
 		this.serviceType = 'PictSectionFlow';
 
-		// Register service types with fable so they can be instantiated
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowInteractionManager'))
-		{
-			this.fable.addServiceType('PictServiceFlowInteractionManager', libPictServiceFlowInteractionManager);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowConnectionRenderer'))
-		{
-			this.fable.addServiceType('PictServiceFlowConnectionRenderer', libPictServiceFlowConnectionRenderer);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowTether'))
-		{
-			this.fable.addServiceType('PictServiceFlowTether', libPictServiceFlowTether);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowLayout'))
-		{
-			this.fable.addServiceType('PictServiceFlowLayout', libPictServiceFlowLayout);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowPathGenerator'))
-		{
-			this.fable.addServiceType('PictServiceFlowPathGenerator', libPictServiceFlowPathGenerator);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowViewportManager'))
-		{
-			this.fable.addServiceType('PictServiceFlowViewportManager', libPictServiceFlowViewportManager);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowSelectionManager'))
-		{
-			this.fable.addServiceType('PictServiceFlowSelectionManager', libPictServiceFlowSelectionManager);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictServiceFlowPanelManager'))
-		{
-			this.fable.addServiceType('PictServiceFlowPanelManager', libPictServiceFlowPanelManager);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowSVGHelpers'))
-		{
-			this.fable.addServiceType('PictProviderFlowSVGHelpers', libPictProviderFlowSVGHelpers);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowGeometry'))
-		{
-			this.fable.addServiceType('PictProviderFlowGeometry', libPictProviderFlowGeometry);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowPanelChrome'))
-		{
-			this.fable.addServiceType('PictProviderFlowPanelChrome', libPictProviderFlowPanelChrome);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowCSS'))
-		{
-			this.fable.addServiceType('PictProviderFlowCSS', libPictProviderFlowCSS);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowIcons'))
-		{
-			this.fable.addServiceType('PictProviderFlowIcons', libPictProviderFlowIcons);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowConnectorShapes'))
-		{
-			this.fable.addServiceType('PictProviderFlowConnectorShapes', libPictProviderFlowConnectorShapes);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowTheme'))
-		{
-			this.fable.addServiceType('PictProviderFlowTheme', libPictProviderFlowTheme);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowNoise'))
-		{
-			this.fable.addServiceType('PictProviderFlowNoise', libPictProviderFlowNoise);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowNodeTypes'))
-		{
-			this.fable.addServiceType('PictProviderFlowNodeTypes', libPictProviderFlowNodeTypes);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowEventHandler'))
-		{
-			this.fable.addServiceType('PictProviderFlowEventHandler', libPictProviderFlowEventHandler);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictProviderFlowLayouts'))
-		{
-			this.fable.addServiceType('PictProviderFlowLayouts', libPictProviderFlowLayouts);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictViewFlowNode'))
-		{
-			this.fable.addServiceType('PictViewFlowNode', libPictViewFlowNode);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictViewFlowToolbar'))
-		{
-			this.fable.addServiceType('PictViewFlowToolbar', libPictViewFlowToolbar);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictViewFlowFloatingToolbar'))
-		{
-			this.fable.addServiceType('PictViewFlowFloatingToolbar', libPictViewFlowFloatingToolbar);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictViewFlowPropertiesPanel'))
-		{
-			this.fable.addServiceType('PictViewFlowPropertiesPanel', libPictViewFlowPropertiesPanel);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel'))
-		{
-			this.fable.addServiceType('PictFlowCardPropertiesPanel', libPictFlowCardPropertiesPanel);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel-Template'))
-		{
-			this.fable.addServiceType('PictFlowCardPropertiesPanel-Template', libPanelTemplate);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel-Markdown'))
-		{
-			this.fable.addServiceType('PictFlowCardPropertiesPanel-Markdown', libPanelMarkdown);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel-Form'))
-		{
-			this.fable.addServiceType('PictFlowCardPropertiesPanel-Form', libPanelForm);
-		}
-		if (!this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel-View'))
-		{
-			this.fable.addServiceType('PictFlowCardPropertiesPanel-View', libPanelView);
-		}
+		// ---- Declarative service registry ----
+		// Each entry defines a service to register, instantiate, and guard.
+		// Optional flags:
+		//   NoFlowView  — instantiate without { FlowView: this }
+		//   PostInit    — method name to call on the instance after creation
+		//   RegisterOnly — only register the type; do not bulk-instantiate
+		this._ServiceRegistry =
+		[
+			// Providers (stateless or config-only — no FlowView needed)
+			{ ServiceType: 'PictProviderFlowSVGHelpers',   Library: libPictProviderFlowSVGHelpers,   Property: '_SVGHelperProvider',    NoFlowView: true },
+			{ ServiceType: 'PictProviderFlowGeometry',      Library: libPictProviderFlowGeometry,      Property: '_GeometryProvider',     NoFlowView: true },
+			{ ServiceType: 'PictProviderFlowNoise',         Library: libPictProviderFlowNoise,         Property: '_NoiseProvider',        NoFlowView: true },
+
+			// Providers (need FlowView)
+			{ ServiceType: 'PictProviderFlowTheme',         Library: libPictProviderFlowTheme,         Property: '_ThemeProvider' },
+			{ ServiceType: 'PictProviderFlowCSS',           Library: libPictProviderFlowCSS,           Property: '_CSSProvider',          PostInit: 'registerCSS' },
+			{ ServiceType: 'PictProviderFlowIcons',         Library: libPictProviderFlowIcons,         Property: '_IconProvider',         PostInit: 'registerIconTemplates' },
+			{ ServiceType: 'PictProviderFlowConnectorShapes', Library: libPictProviderFlowConnectorShapes, Property: '_ConnectorShapesProvider' },
+			{ ServiceType: 'PictProviderFlowPanelChrome',   Library: libPictProviderFlowPanelChrome,   Property: '_PanelChromeProvider' },
+			{ ServiceType: 'PictProviderFlowNodeTypes',     Library: libPictProviderFlowNodeTypes,     Property: '_NodeTypeProvider',   ExtraOptions: () => ({ AdditionalNodeTypes: this.options.NodeTypes }) },
+			{ ServiceType: 'PictProviderFlowEventHandler',  Library: libPictProviderFlowEventHandler,  Property: '_EventHandlerProvider' },
+			{ ServiceType: 'PictProviderFlowLayouts',       Library: libPictProviderFlowLayouts,       Property: '_LayoutProvider',       PostInit: 'loadPersistedLayouts' },
+
+			// Services
+			{ ServiceType: 'PictServiceFlowPathGenerator',           Library: libPictServiceFlowPathGenerator,           Property: '_PathGenerator' },
+			{ ServiceType: 'PictServiceFlowDataManager',             Library: libPictServiceFlowDataManager,             Property: '_DataManager' },
+			{ ServiceType: 'PictServiceFlowConnectionHandleManager', Library: libPictServiceFlowConnectionHandleManager, Property: '_ConnectionHandleManager' },
+			{ ServiceType: 'PictServiceFlowRenderManager',           Library: libPictServiceFlowRenderManager,           Property: '_RenderManager' },
+			{ ServiceType: 'PictServiceFlowPortRenderer',            Library: libPictServiceFlowPortRenderer,            Property: '_PortRenderer' },
+			{ ServiceType: 'PictServiceFlowInteractionManager',      Library: libPictServiceFlowInteractionManager,      Property: '_InteractionManager' },
+			{ ServiceType: 'PictServiceFlowConnectionRenderer',      Library: libPictServiceFlowConnectionRenderer,      Property: '_ConnectionRenderer' },
+			{ ServiceType: 'PictServiceFlowTether',                  Library: libPictServiceFlowTether,                  Property: '_TetherService' },
+			{ ServiceType: 'PictServiceFlowLayout',                  Library: libPictServiceFlowLayout,                  Property: '_LayoutService' },
+			{ ServiceType: 'PictServiceFlowViewportManager',         Library: libPictServiceFlowViewportManager,         Property: '_ViewportManager' },
+			{ ServiceType: 'PictServiceFlowSelectionManager',        Library: libPictServiceFlowSelectionManager,        Property: '_SelectionManager' },
+			{ ServiceType: 'PictServiceFlowPanelManager',            Library: libPictServiceFlowPanelManager,            Property: '_PanelManager' },
+
+			// View types (register only — instantiated with custom config in onAfterInitialRender)
+			{ ServiceType: 'PictViewFlowNode',             Library: libPictViewFlowNode,             RegisterOnly: true },
+			{ ServiceType: 'PictViewFlowToolbar',          Library: libPictViewFlowToolbar,          RegisterOnly: true },
+			{ ServiceType: 'PictViewFlowFloatingToolbar',  Library: libPictViewFlowFloatingToolbar,  RegisterOnly: true },
+			{ ServiceType: 'PictViewFlowPropertiesPanel',  Library: libPictViewFlowPropertiesPanel,  RegisterOnly: true },
+
+			// Panel types (register only)
+			{ ServiceType: 'PictFlowCardPropertiesPanel',           Library: libPictFlowCardPropertiesPanel,  RegisterOnly: true },
+			{ ServiceType: 'PictFlowCardPropertiesPanel-Template',  Library: libPanelTemplate,               RegisterOnly: true },
+			{ ServiceType: 'PictFlowCardPropertiesPanel-Markdown',  Library: libPanelMarkdown,               RegisterOnly: true },
+			{ ServiceType: 'PictFlowCardPropertiesPanel-Form',      Library: libPanelForm,                   RegisterOnly: true },
+			{ ServiceType: 'PictFlowCardPropertiesPanel-View',      Library: libPanelView,                   RegisterOnly: true }
+		];
+
+		this._registerServiceTypes();
 
 		// Internal state
 		this._FlowData = {
@@ -259,6 +202,11 @@ class PictViewFlow extends libPictView
 		this._TethersLayer = null;
 		this._PanelsLayer = null;
 
+		this._DataManager = null;
+		this._ConnectionHandleManager = null;
+		this._RenderManager = null;
+		this._PortRenderer = null;
+
 		this._InteractionManager = null;
 		this._ConnectionRenderer = null;
 		this._TetherService = null;
@@ -285,6 +233,41 @@ class PictViewFlow extends libPictView
 		this.initialRenderComplete = false;
 	}
 
+	_registerServiceTypes()
+	{
+		for (let i = 0; i < this._ServiceRegistry.length; i++)
+		{
+			let tmpEntry = this._ServiceRegistry[i];
+			if (!this.fable.servicesMap.hasOwnProperty(tmpEntry.ServiceType))
+			{
+				this.fable.addServiceType(tmpEntry.ServiceType, tmpEntry.Library);
+			}
+		}
+	}
+
+	_instantiateServices()
+	{
+		for (let i = 0; i < this._ServiceRegistry.length; i++)
+		{
+			let tmpEntry = this._ServiceRegistry[i];
+			if (tmpEntry.RegisterOnly) continue;
+			if (this[tmpEntry.Property]) continue;
+
+			let tmpOptions = tmpEntry.NoFlowView ? {} : { FlowView: this };
+			if (typeof tmpEntry.ExtraOptions === 'function')
+			{
+				Object.assign(tmpOptions, tmpEntry.ExtraOptions());
+			}
+
+			this[tmpEntry.Property] = this.fable.instantiateServiceProviderWithoutRegistration(tmpEntry.ServiceType, tmpOptions);
+
+			if (tmpEntry.PostInit && typeof this[tmpEntry.Property][tmpEntry.PostInit] === 'function')
+			{
+				this[tmpEntry.Property][tmpEntry.PostInit]();
+			}
+		}
+	}
+
 	get flowData()
 	{
 		return this._FlowData;
@@ -324,7 +307,7 @@ class PictViewFlow extends libPictView
 	{
 		super.onBeforeInitialize();
 
-		// Instantiate theme and noise providers (before CSS so theme state is available)
+		// Theme + Noise must be created first (CSS PostInit depends on theme state)
 		this._ThemeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowTheme', { FlowView: this });
 		this._NoiseProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNoise');
 
@@ -338,37 +321,8 @@ class PictViewFlow extends libPictView
 			this._ThemeProvider.setNoiseLevel(this.options.NoiseLevel);
 		}
 
-		// Instantiate and register the centralized CSS provider
-		this._CSSProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowCSS', { FlowView: this });
-		this._CSSProvider.registerCSS();
-
-		// Instantiate the SVG icon provider
-		this._IconProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowIcons', { FlowView: this });
-		this._IconProvider.registerIconTemplates();
-
-		// Instantiate the connector shapes provider
-		this._ConnectorShapesProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowConnectorShapes', { FlowView: this });
-
-		// Instantiate shared utility providers first (used by services below)
-		this._SVGHelperProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowSVGHelpers');
-		this._GeometryProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowGeometry');
-		this._PathGenerator = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowPathGenerator', { FlowView: this });
-		this._PanelChromeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowPanelChrome', { FlowView: this });
-
-		// Instantiate services
-		this._InteractionManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowInteractionManager', { FlowView: this });
-		this._ConnectionRenderer = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowConnectionRenderer', { FlowView: this });
-		this._TetherService = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowTether', { FlowView: this });
-		this._LayoutService = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowLayout', { FlowView: this });
-		this._ViewportManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowViewportManager', { FlowView: this });
-		this._SelectionManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowSelectionManager', { FlowView: this });
-		this._PanelManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowPanelManager', { FlowView: this });
-
-		// Instantiate providers, passing any additional node types from view options
-		this._NodeTypeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNodeTypes', { FlowView: this, AdditionalNodeTypes: this.options.NodeTypes });
-		this._EventHandlerProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowEventHandler', { FlowView: this });
-		this._LayoutProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowLayouts', { FlowView: this });
-		this._LayoutProvider.loadPersistedLayouts();
+		// Instantiate all remaining services (skips Theme + Noise since already set)
+		this._instantiateServices();
 
 		return super.onBeforeInitialize();
 	}
@@ -426,96 +380,8 @@ class PictViewFlow extends libPictView
 			this._PanelsLayer = tmpPanelsElements[0];
 		}
 
-		// Initialize theme and noise providers (fallback if not already created)
-		if (!this._ThemeProvider)
-		{
-			this._ThemeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowTheme', { FlowView: this });
-		}
-		if (!this._NoiseProvider)
-		{
-			this._NoiseProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNoise');
-		}
-
-		// Initialize CSS provider (fallback if not already created)
-		if (!this._CSSProvider)
-		{
-			this._CSSProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowCSS', { FlowView: this });
-			this._CSSProvider.registerCSS();
-		}
-
-		// Initialize icon provider (fallback if not already created)
-		if (!this._IconProvider)
-		{
-			this._IconProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowIcons', { FlowView: this });
-			this._IconProvider.registerIconTemplates();
-		}
-
-		// Initialize connector shapes provider (fallback if not already created)
-		if (!this._ConnectorShapesProvider)
-		{
-			this._ConnectorShapesProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowConnectorShapes', { FlowView: this });
-		}
-
-		// Initialize shared utility providers (used by services below)
-		if (!this._SVGHelperProvider)
-		{
-			this._SVGHelperProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowSVGHelpers');
-		}
-		if (!this._GeometryProvider)
-		{
-			this._GeometryProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowGeometry');
-		}
-		if (!this._PathGenerator)
-		{
-			this._PathGenerator = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowPathGenerator', { FlowView: this });
-		}
-		if (!this._PanelChromeProvider)
-		{
-			this._PanelChromeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowPanelChrome', { FlowView: this });
-		}
-
-		// Initialize services with references
-		if (!this._InteractionManager)
-		{
-			this._InteractionManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowInteractionManager', { FlowView: this });
-		}
-		if (!this._ConnectionRenderer)
-		{
-			this._ConnectionRenderer = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowConnectionRenderer', { FlowView: this });
-		}
-		if (!this._TetherService)
-		{
-			this._TetherService = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowTether', { FlowView: this });
-		}
-		if (!this._LayoutService)
-		{
-			this._LayoutService = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowLayout', { FlowView: this });
-		}
-		if (!this._ViewportManager)
-		{
-			this._ViewportManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowViewportManager', { FlowView: this });
-		}
-		if (!this._SelectionManager)
-		{
-			this._SelectionManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowSelectionManager', { FlowView: this });
-		}
-		if (!this._PanelManager)
-		{
-			this._PanelManager = this.fable.instantiateServiceProviderWithoutRegistration('PictServiceFlowPanelManager', { FlowView: this });
-		}
-		if (!this._NodeTypeProvider)
-		{
-			this._NodeTypeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNodeTypes', { FlowView: this, AdditionalNodeTypes: this.options.NodeTypes });
-		}
-		if (!this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowEventHandler', { FlowView: this });
-		}
-		if (!this._LayoutProvider)
-		{
-			this._LayoutProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowLayouts', { FlowView: this });
-			this._LayoutProvider.loadPersistedLayouts();
-		}
+		// Ensure all services are initialized (fallback if onBeforeInitialize was skipped)
+		this._instantiateServices();
 
 		// Inject marker defs via the connector shapes provider
 		// Note: insertAdjacentHTML does not work on SVG elements (wrong namespace),
@@ -590,296 +456,16 @@ class PictViewFlow extends libPictView
 		this.renderFlow();
 	}
 
-	/**
-	 * Marshal data from AppData into the flow view
-	 */
-	marshalToView()
-	{
-		if (this.options.FlowDataAddress)
-		{
-			const tmpAddressSpace =
-			{
-				Fable: this.fable,
-				Pict: this.pict || this.fable,
-				AppData: this.pict ? this.pict.AppData : this.fable.AppData,
-				Bundle: this.Bundle,
-				Options: this.options
-			};
-			let tmpData = this.fable.manifest.getValueByHash(tmpAddressSpace, this.options.FlowDataAddress);
-			if (typeof tmpData === 'object' && tmpData !== null)
-			{
-				this.setFlowData(tmpData);
-			}
-		}
-	}
-
-	/**
-	 * Marshal data from the flow view back to AppData
-	 */
-	marshalFromView()
-	{
-		if (this.options.FlowDataAddress)
-		{
-			const tmpAddressSpace =
-			{
-				Fable: this.fable,
-				Pict: this.pict || this.fable,
-				AppData: this.pict ? this.pict.AppData : this.fable.AppData,
-				Bundle: this.Bundle,
-				Options: this.options
-			};
-			this.fable.manifest.setValueByHash(tmpAddressSpace, this.options.FlowDataAddress, JSON.parse(JSON.stringify(this._FlowData)));
-		}
-	}
-
-	/**
-	 * Get the complete flow data object
-	 * @returns {Object} The flow data including nodes, connections, and view state
-	 */
-	getFlowData()
-	{
-		return JSON.parse(JSON.stringify(this._FlowData));
-	}
-
-	/**
-	 * Set the complete flow data object and re-render
-	 * @param {Object} pFlowData - The flow data to set
-	 */
-	setFlowData(pFlowData)
-	{
-		if (typeof pFlowData !== 'object' || pFlowData === null)
-		{
-			this.log.warn('PictSectionFlow setFlowData received invalid data');
-			return;
-		}
-
-		this._FlowData = {
-			Nodes: Array.isArray(pFlowData.Nodes) ? pFlowData.Nodes : [],
-			Connections: Array.isArray(pFlowData.Connections) ? pFlowData.Connections : [],
-			OpenPanels: Array.isArray(pFlowData.OpenPanels) ? pFlowData.OpenPanels : [],
-			SavedLayouts: Array.isArray(pFlowData.SavedLayouts) ? pFlowData.SavedLayouts : [],
-			ViewState: Object.assign(
-				{ PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedConnectionHash: null, SelectedTetherHash: null },
-				pFlowData.ViewState || {}
-			)
-		};
-
-		// Merge any browser-persisted layouts into the newly loaded data
-		if (this._LayoutProvider)
-		{
-			this._LayoutProvider.loadPersistedLayouts();
-		}
-
-		if (this.initialRenderComplete)
-		{
-			this.renderFlow();
-		}
-	}
-
-	/**
-	 * Add a new node to the flow
-	 * @param {string} pType - The node type hash
-	 * @param {number} pX - X position
-	 * @param {number} pY - Y position
-	 * @param {string} [pTitle] - Optional title
-	 * @param {Object} [pData] - Optional additional data
-	 * @returns {Object} The created node
-	 */
-	addNode(pType, pX, pY, pTitle, pData)
-	{
-		let tmpType = pType || this.options.DefaultNodeType;
-		let tmpNodeTypeConfig = this._NodeTypeProvider.getNodeType(tmpType);
-
-		let tmpNodeHash = `node-${this.fable.getUUID()}`;
-		let tmpNode =
-		{
-			Hash: tmpNodeHash,
-			Type: tmpType,
-			X: pX || 100,
-			Y: pY || 100,
-			Width: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultWidth) || this.options.DefaultNodeWidth,
-			Height: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultHeight) || this.options.DefaultNodeHeight,
-			Title: pTitle || (tmpNodeTypeConfig && tmpNodeTypeConfig.Label) || 'New Node',
-			Ports: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultPorts)
-				? JSON.parse(JSON.stringify(tmpNodeTypeConfig.DefaultPorts))
-				: [
-					{ Hash: `port-in-${this.fable.getUUID()}`, Direction: 'input', Side: 'left', Label: 'In' },
-					{ Hash: `port-out-${this.fable.getUUID()}`, Direction: 'output', Side: 'right', Label: 'Out' }
-				],
-			Data: pData || {}
-		};
-
-		// Ensure each port has a unique hash
-		for (let i = 0; i < tmpNode.Ports.length; i++)
-		{
-			if (!tmpNode.Ports[i].Hash)
-			{
-				tmpNode.Ports[i].Hash = `port-${tmpNode.Ports[i].Direction}-${this.fable.getUUID()}`;
-			}
-		}
-
-		this._FlowData.Nodes.push(tmpNode);
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onNodeAdded', tmpNode);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return tmpNode;
-	}
-
-	/**
-	 * Remove a node and all its connections
-	 * @param {string} pNodeHash - The hash of the node to remove
-	 * @returns {boolean} Whether the node was removed
-	 */
-	removeNode(pNodeHash)
-	{
-		let tmpNodeIndex = this._FlowData.Nodes.findIndex((pNode) => pNode.Hash === pNodeHash);
-		if (tmpNodeIndex < 0)
-		{
-			this.log.warn(`PictSectionFlow removeNode: node ${pNodeHash} not found`);
-			return false;
-		}
-
-		let tmpRemovedNode = this._FlowData.Nodes.splice(tmpNodeIndex, 1)[0];
-
-		// Remove all connections involving this node
-		this._FlowData.Connections = this._FlowData.Connections.filter((pConnection) =>
-		{
-			return pConnection.SourceNodeHash !== pNodeHash && pConnection.TargetNodeHash !== pNodeHash;
-		});
-
-		// Close any open panels for this node
-		this.closePanelForNode(pNodeHash);
+	// ---- Data Manager Delegations ----
 
-		// Clear selection if this node was selected
-		if (this._FlowData.ViewState.SelectedNodeHash === pNodeHash)
-		{
-			this._FlowData.ViewState.SelectedNodeHash = null;
-		}
-
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onNodeRemoved', tmpRemovedNode);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return true;
-	}
-
-	/**
-	 * Add a connection between two ports
-	 * @param {string} pSourceNodeHash
-	 * @param {string} pSourcePortHash
-	 * @param {string} pTargetNodeHash
-	 * @param {string} pTargetPortHash
-	 * @param {Object} [pData] - Optional additional data
-	 * @returns {Object|false} The created connection, or false if invalid
-	 */
-	addConnection(pSourceNodeHash, pSourcePortHash, pTargetNodeHash, pTargetPortHash, pData)
-	{
-		// Validate that both nodes and ports exist
-		let tmpSourceNode = this._FlowData.Nodes.find((pNode) => pNode.Hash === pSourceNodeHash);
-		let tmpTargetNode = this._FlowData.Nodes.find((pNode) => pNode.Hash === pTargetNodeHash);
-
-		if (!tmpSourceNode || !tmpTargetNode)
-		{
-			this.log.warn('PictSectionFlow addConnection: source or target node not found');
-			return false;
-		}
-
-		let tmpSourcePort = tmpSourceNode.Ports.find((pPort) => pPort.Hash === pSourcePortHash);
-		let tmpTargetPort = tmpTargetNode.Ports.find((pPort) => pPort.Hash === pTargetPortHash);
-
-		if (!tmpSourcePort || !tmpTargetPort)
-		{
-			this.log.warn('PictSectionFlow addConnection: source or target port not found');
-			return false;
-		}
-
-		// Prevent self-connections
-		if (pSourceNodeHash === pTargetNodeHash)
-		{
-			this.log.warn('PictSectionFlow addConnection: cannot connect a node to itself');
-			return false;
-		}
-
-		// Check for duplicate connections
-		let tmpDuplicate = this._FlowData.Connections.find((pConn) =>
-		{
-			return pConn.SourceNodeHash === pSourceNodeHash
-				&& pConn.SourcePortHash === pSourcePortHash
-				&& pConn.TargetNodeHash === pTargetNodeHash
-				&& pConn.TargetPortHash === pTargetPortHash;
-		});
-		if (tmpDuplicate)
-		{
-			this.log.warn('PictSectionFlow addConnection: duplicate connection');
-			return false;
-		}
-
-		let tmpConnection =
-		{
-			Hash: `conn-${this.fable.getUUID()}`,
-			SourceNodeHash: pSourceNodeHash,
-			SourcePortHash: pSourcePortHash,
-			TargetNodeHash: pTargetNodeHash,
-			TargetPortHash: pTargetPortHash,
-			Data: pData || {}
-		};
-
-		this._FlowData.Connections.push(tmpConnection);
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onConnectionCreated', tmpConnection);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return tmpConnection;
-	}
-
-	/**
-	 * Remove a connection
-	 * @param {string} pConnectionHash - The hash of the connection to remove
-	 * @returns {boolean} Whether the connection was removed
-	 */
-	removeConnection(pConnectionHash)
-	{
-		let tmpConnectionIndex = this._FlowData.Connections.findIndex((pConn) => pConn.Hash === pConnectionHash);
-		if (tmpConnectionIndex < 0)
-		{
-			this.log.warn(`PictSectionFlow removeConnection: connection ${pConnectionHash} not found`);
-			return false;
-		}
-
-		let tmpRemovedConnection = this._FlowData.Connections.splice(tmpConnectionIndex, 1)[0];
-
-		if (this._FlowData.ViewState.SelectedConnectionHash === pConnectionHash)
-		{
-			this._FlowData.ViewState.SelectedConnectionHash = null;
-		}
-
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onConnectionRemoved', tmpRemovedConnection);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return true;
-	}
+	marshalToView() { return this._DataManager.marshalToView(); }
+	marshalFromView() { return this._DataManager.marshalFromView(); }
+	getFlowData() { return this._DataManager.getFlowData(); }
+	setFlowData(pFlowData) { return this._DataManager.setFlowData(pFlowData); }
+	addNode(pType, pX, pY, pTitle, pData) { return this._DataManager.addNode(pType, pX, pY, pTitle, pData); }
+	removeNode(pNodeHash) { return this._DataManager.removeNode(pNodeHash); }
+	addConnection(pSourceNodeHash, pSourcePortHash, pTargetNodeHash, pTargetPortHash, pData) { return this._DataManager.addConnection(pSourceNodeHash, pSourcePortHash, pTargetNodeHash, pTargetPortHash, pData); }
+	removeConnection(pConnectionHash) { return this._DataManager.removeConnection(pConnectionHash); }
 
 	/**
 	 * Select a node
@@ -1064,34 +650,7 @@ class PictViewFlow extends libPictView
 		return 'default';
 	}
 
-	/**
-	 * Re-inject SVG marker definitions (arrowheads).
-	 * Called after a theme switch to update arrowhead colors.
-	 */
-	_reinjectMarkerDefs()
-	{
-		if (!this._ConnectorShapesProvider || !this._SVGElement) return;
-
-		let tmpViewIdentifier = this.options.ViewIdentifier;
-		let tmpDefs = this._SVGElement.querySelector('defs');
-		if (!tmpDefs) return;
-
-		// Remove existing marker elements
-		let tmpExistingMarkers = tmpDefs.querySelectorAll('marker');
-		for (let i = 0; i < tmpExistingMarkers.length; i++)
-		{
-			tmpExistingMarkers[i].remove();
-		}
-
-		// Re-generate and inject
-		let tmpMarkerMarkup = this._ConnectorShapesProvider.generateMarkerDefs(tmpViewIdentifier);
-		let tmpTempSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-		tmpTempSVG.innerHTML = tmpMarkerMarkup;
-		while (tmpTempSVG.firstChild)
-		{
-			tmpDefs.appendChild(tmpTempSVG.firstChild);
-		}
-	}
+	_reinjectMarkerDefs() { return this._RenderManager.reinjectMarkerDefs(); }
 
 	/**
 	 * Get a node by hash
@@ -1122,74 +681,19 @@ class PictViewFlow extends libPictView
 		return this._SelectionManager.selectTether(pPanelHash);
 	}
 
-	/**
-	 * Update a connection handle position during drag (for real-time feedback).
-	 * @param {string} pConnectionHash
-	 * @param {string} pHandleType - 'bezier-midpoint', 'ortho-corner1', 'ortho-corner2', 'ortho-midpoint'
-	 * @param {number} pX
-	 * @param {number} pY
-	 */
-	updateConnectionHandle(pConnectionHash, pHandleType, pX, pY)
-	{
-		let tmpConnection = this.getConnection(pConnectionHash);
-		if (!tmpConnection) return;
-
-		if (!tmpConnection.Data) tmpConnection.Data = {};
-		tmpConnection.Data.HandleCustomized = true;
-
-		switch (pHandleType)
-		{
-			case 'bezier-midpoint':
-				tmpConnection.Data.BezierHandleX = pX;
-				tmpConnection.Data.BezierHandleY = pY;
-				break;
-
-			case 'ortho-corner1':
-				tmpConnection.Data.OrthoCorner1X = pX;
-				tmpConnection.Data.OrthoCorner1Y = pY;
-				break;
-
-			case 'ortho-corner2':
-				tmpConnection.Data.OrthoCorner2X = pX;
-				tmpConnection.Data.OrthoCorner2Y = pY;
-				break;
-
-			case 'ortho-midpoint':
-			{
-				// Midpoint drag shifts the corridor offset
-				let tmpSourcePos = this.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
-				let tmpTargetPos = this.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
-				if (tmpSourcePos && tmpTargetPos)
-				{
-					let tmpGeom = this._ConnectionRenderer._computeDirectionalGeometry(tmpSourcePos, tmpTargetPos);
-					let tmpStartDir = tmpGeom.startDir;
-
-					// Compute offset along the corridor axis
-					if (Math.abs(tmpStartDir.dx) > Math.abs(tmpStartDir.dy))
-					{
-						// Horizontal departure — corridor is vertical, shift is along X
-						let tmpAutoMidX = (tmpGeom.departX + tmpGeom.approachX) / 2;
-						tmpConnection.Data.OrthoMidOffset = pX - tmpAutoMidX;
-					}
-					else
-					{
-						// Vertical departure — corridor is horizontal, shift is along Y
-						let tmpAutoMidY = (tmpGeom.departY + tmpGeom.approachY) / 2;
-						tmpConnection.Data.OrthoMidOffset = pY - tmpAutoMidY;
-					}
-				}
-				break;
-			}
-		}
+	// ---- Connection Handle Manager Delegations ----
 
-		this._renderSingleConnection(pConnectionHash);
-	}
+	updateConnectionHandle(pConnectionHash, pHandleType, pX, pY) { return this._ConnectionHandleManager.updateConnectionHandle(pConnectionHash, pHandleType, pX, pY); }
+	addConnectionHandle(pConnectionHash, pX, pY) { return this._ConnectionHandleManager.addConnectionHandle(pConnectionHash, pX, pY); }
+	removeConnectionHandle(pConnectionHash, pIndex) { return this._ConnectionHandleManager.removeConnectionHandle(pConnectionHash, pIndex); }
+	_resetHandlesForNode(pNodeHash) { return this._ConnectionHandleManager.resetHandlesForNode(pNodeHash); }
+	_resetHandlesForPanel(pPanelHash) { return this._ConnectionHandleManager.resetHandlesForPanel(pPanelHash); }
 
 	/**
 	 * Update a tether handle position during drag (for real-time feedback).
 	 * Delegates state update to the TetherService.
 	 * @param {string} pPanelHash
-	 * @param {string} pHandleType - 'bezier-midpoint', 'ortho-corner1', 'ortho-corner2', 'ortho-midpoint'
+	 * @param {string} pHandleType
 	 * @param {number} pX
 	 * @param {number} pY
 	 */
@@ -1206,103 +710,6 @@ class PictViewFlow extends libPictView
 		this._renderSingleTether(pPanelHash);
 	}
 
-	/**
-	 * Re-render a single connection (remove and re-add) for smooth drag performance.
-	 * @param {string} pConnectionHash
-	 */
-	_renderSingleConnection(pConnectionHash)
-	{
-		if (!this._ConnectionsLayer) return;
-
-		// Remove existing elements for this connection
-		let tmpExisting = this._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${pConnectionHash}"]`);
-		for (let i = 0; i < tmpExisting.length; i++)
-		{
-			tmpExisting[i].remove();
-		}
-
-		let tmpConnection = this.getConnection(pConnectionHash);
-		if (!tmpConnection) return;
-
-		let tmpIsSelected = (this._FlowData.ViewState.SelectedConnectionHash === pConnectionHash);
-		this._ConnectionRenderer.renderConnection(tmpConnection, this._ConnectionsLayer, tmpIsSelected);
-	}
-
-	/**
-	 * Re-render a single tether (remove and re-add) for smooth drag performance.
-	 * @param {string} pPanelHash
-	 */
-	_renderSingleTether(pPanelHash)
-	{
-		if (!this._TethersLayer || !this._TetherService) return;
-
-		// Remove existing tether elements for this panel
-		let tmpExisting = this._TethersLayer.querySelectorAll(`[data-panel-hash="${pPanelHash}"]`);
-		for (let i = 0; i < tmpExisting.length; i++)
-		{
-			tmpExisting[i].remove();
-		}
-
-		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
-		if (!tmpPanel) return;
-
-		let tmpNodeData = this.getNode(tmpPanel.NodeHash);
-		if (!tmpNodeData) return;
-
-		let tmpIsSelected = (this._FlowData.ViewState.SelectedTetherHash === pPanelHash);
-		this._TetherService.renderTether(tmpPanel, tmpNodeData, this._TethersLayer, tmpIsSelected, this.options.ViewIdentifier);
-	}
-
-	/**
-	 * Reset handle positions for all connections/tethers involving a node.
-	 * Called when a node moves. Preserves LineMode but resets handle coordinates to auto.
-	 * @param {string} pNodeHash
-	 */
-	_resetHandlesForNode(pNodeHash)
-	{
-		// Reset connection handles
-		for (let i = 0; i < this._FlowData.Connections.length; i++)
-		{
-			let tmpConn = this._FlowData.Connections[i];
-			if (tmpConn.SourceNodeHash === pNodeHash || tmpConn.TargetNodeHash === pNodeHash)
-			{
-				if (tmpConn.Data && tmpConn.Data.HandleCustomized)
-				{
-					tmpConn.Data.HandleCustomized = false;
-					tmpConn.Data.BezierHandleX = null;
-					tmpConn.Data.BezierHandleY = null;
-					tmpConn.Data.OrthoCorner1X = null;
-					tmpConn.Data.OrthoCorner1Y = null;
-					tmpConn.Data.OrthoCorner2X = null;
-					tmpConn.Data.OrthoCorner2Y = null;
-					tmpConn.Data.OrthoMidOffset = 0;
-				}
-			}
-		}
-
-		// Reset tether handles for panels attached to this node
-		if (this._TetherService)
-		{
-			this._TetherService.resetHandlesForNode(this._FlowData.OpenPanels, pNodeHash);
-		}
-	}
-
-	/**
-	 * Reset tether handle positions for a specific panel.
-	 * Called when a panel is dragged.
-	 * @param {string} pPanelHash
-	 */
-	_resetHandlesForPanel(pPanelHash)
-	{
-		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
-		if (!tmpPanel) return;
-
-		if (this._TetherService)
-		{
-			this._TetherService.resetHandlePositions(tmpPanel);
-		}
-	}
-
 	/**
 	 * Get a port's absolute position in SVG coordinates.
 	 *
@@ -1341,7 +748,10 @@ class PictViewFlow extends libPictView
 			}
 		}
 
-		let tmpLocal = this._GeometryProvider.getPortLocalPosition(tmpPort.Side, tmpPortIndex, tmpPortCount, tmpNode.Width, tmpHeight, tmpTitleBarHeight);
+		// Build port counts map for adaptive zone sizing
+		let tmpPortCountsBySide = this._GeometryProvider.buildPortCountsBySide(tmpNode.Ports);
+
+		let tmpLocal = this._GeometryProvider.getPortLocalPosition(tmpPort.Side, tmpPortIndex, tmpPortCount, tmpNode.Width, tmpHeight, tmpTitleBarHeight, tmpPortCountsBySide);
 
 		return { x: tmpNode.X + tmpLocal.x, y: tmpNode.Y + tmpLocal.y, side: tmpPort.Side || 'right' };
 	}
@@ -1357,176 +767,14 @@ class PictViewFlow extends libPictView
 		return this._ViewportManager.screenToSVGCoords(pScreenX, pScreenY);
 	}
 
-	/**
-	 * Render the complete flow diagram
-	 */
-	renderFlow()
-	{
-		if (!this._NodesLayer || !this._ConnectionsLayer) return;
-
-		// Clear existing SVG content
-		while (this._NodesLayer.firstChild)
-		{
-			this._NodesLayer.removeChild(this._NodesLayer.firstChild);
-		}
-		while (this._ConnectionsLayer.firstChild)
-		{
-			this._ConnectionsLayer.removeChild(this._ConnectionsLayer.firstChild);
-		}
-
-		// Render connections first (behind nodes)
-		for (let i = 0; i < this._FlowData.Connections.length; i++)
-		{
-			let tmpConnection = this._FlowData.Connections[i];
-			let tmpIsSelected = (this._FlowData.ViewState.SelectedConnectionHash === tmpConnection.Hash);
-
-			this._ConnectionRenderer.renderConnection(
-				tmpConnection,
-				this._ConnectionsLayer,
-				tmpIsSelected
-			);
-		}
-
-		// Render nodes
-		for (let i = 0; i < this._FlowData.Nodes.length; i++)
-		{
-			let tmpNode = this._FlowData.Nodes[i];
-			let tmpIsSelected = (this._FlowData.ViewState.SelectedNodeHash === tmpNode.Hash);
-			let tmpNodeTypeConfig = this._NodeTypeProvider.getNodeType(tmpNode.Type);
-
-			// Enrich saved port data with metadata from the node type's DefaultPorts.
-			// Saved flow data may not include PortType or may have stale Side values,
-			// so we match each port to its DefaultPort counterpart by Label and Direction,
-			// then copy over PortType and Side from the authoritative node type definition.
-			if (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultPorts && tmpNode.Ports)
-			{
-				for (let p = 0; p < tmpNode.Ports.length; p++)
-				{
-					let tmpPort = tmpNode.Ports[p];
-					for (let d = 0; d < tmpNodeTypeConfig.DefaultPorts.length; d++)
-					{
-						let tmpDefault = tmpNodeTypeConfig.DefaultPorts[d];
-						if (tmpDefault.Label === tmpPort.Label && tmpDefault.Direction === tmpPort.Direction)
-						{
-							if (tmpDefault.PortType)
-							{
-								tmpPort.PortType = tmpDefault.PortType;
-							}
-							if (tmpDefault.Side)
-							{
-								tmpPort.Side = tmpDefault.Side;
-							}
-							break;
-						}
-					}
-				}
-			}
-
-			this._NodeView.renderNode(tmpNode, this._NodesLayer, tmpIsSelected, tmpNodeTypeConfig);
-		}
+	// ---- Render Manager Delegations ----
 
-		// Render properties panels and tethers
-		if (this._PropertiesPanelView && this._PanelsLayer && this._TethersLayer)
-		{
-			this._PropertiesPanelView.renderPanels(this._FlowData.OpenPanels, this._PanelsLayer, this._TethersLayer, this._FlowData.ViewState.SelectedTetherHash);
-		}
-
-		// Update viewport transform
-		this.updateViewportTransform();
-	}
-
-	/**
-	 * Update a single node's position in the SVG without full re-render (for drag performance)
-	 * @param {string} pNodeHash
-	 * @param {number} pX
-	 * @param {number} pY
-	 */
-	updateNodePosition(pNodeHash, pX, pY)
-	{
-		let tmpNode = this.getNode(pNodeHash);
-		if (!tmpNode) return;
-
-		if (this.options.EnableGridSnap)
-		{
-			pX = this._LayoutService.snapToGrid(pX, this.options.GridSnapSize);
-			pY = this._LayoutService.snapToGrid(pY, this.options.GridSnapSize);
-		}
-
-		tmpNode.X = pX;
-		tmpNode.Y = pY;
-
-		// Reset customized handle positions for connections/tethers involving this node
-		this._resetHandlesForNode(pNodeHash);
-
-		// Update the node's SVG group transform for smooth dragging
-		let tmpNodeGroup = this._NodesLayer.querySelector(`[data-node-hash="${pNodeHash}"]`);
-		if (tmpNodeGroup)
-		{
-			tmpNodeGroup.setAttribute('transform', `translate(${pX}, ${pY})`);
-		}
-
-		// Re-render connections that involve this node
-		this._renderConnectionsForNode(pNodeHash);
-
-		// Update tethers for any panels attached to this node
-		this._renderTethersForNode(pNodeHash);
-	}
-
-	/**
-	 * Re-render only connections that involve a specific node (for drag performance)
-	 * @param {string} pNodeHash
-	 */
-	_renderConnectionsForNode(pNodeHash)
-	{
-		let tmpAffectedConnections = this._FlowData.Connections.filter((pConn) =>
-		{
-			return pConn.SourceNodeHash === pNodeHash || pConn.TargetNodeHash === pNodeHash;
-		});
-
-		for (let i = 0; i < tmpAffectedConnections.length; i++)
-		{
-			let tmpConn = tmpAffectedConnections[i];
-			let tmpIsSelected = (this._FlowData.ViewState.SelectedConnectionHash === tmpConn.Hash);
-
-			// Remove existing connection SVG elements
-			let tmpExisting = this._ConnectionsLayer.querySelectorAll(`[data-connection-hash="${tmpConn.Hash}"]`);
-			for (let j = 0; j < tmpExisting.length; j++)
-			{
-				tmpExisting[j].remove();
-			}
-
-			// Re-render this connection
-			this._ConnectionRenderer.renderConnection(tmpConn, this._ConnectionsLayer, tmpIsSelected);
-		}
-	}
-
-	/**
-	 * Re-render tethers for panels attached to a specific node (for drag performance).
-	 * @param {string} pNodeHash
-	 */
-	_renderTethersForNode(pNodeHash)
-	{
-		if (!this._TethersLayer || !this._TetherService) return;
-
-		let tmpAffectedPanels = this._FlowData.OpenPanels.filter((pPanel) => pPanel.NodeHash === pNodeHash);
-		if (tmpAffectedPanels.length === 0) return;
-
-		// Remove existing tethers for these panels and re-render via TetherService
-		for (let i = 0; i < tmpAffectedPanels.length; i++)
-		{
-			let tmpExisting = this._TethersLayer.querySelectorAll(`[data-panel-hash="${tmpAffectedPanels[i].Hash}"]`);
-			for (let j = 0; j < tmpExisting.length; j++)
-			{
-				tmpExisting[j].remove();
-			}
-
-			let tmpNodeData = this.getNode(tmpAffectedPanels[i].NodeHash);
-			if (!tmpNodeData) continue;
-
-			let tmpIsSelected = (this._FlowData.ViewState.SelectedTetherHash === tmpAffectedPanels[i].Hash);
-			this._TetherService.renderTether(tmpAffectedPanels[i], tmpNodeData, this._TethersLayer, tmpIsSelected, this.options.ViewIdentifier);
-		}
-	}
+	renderFlow() { return this._RenderManager.renderFlow(); }
+	_renderSingleConnection(pConnectionHash) { return this._RenderManager.renderSingleConnection(pConnectionHash); }
+	_renderSingleTether(pPanelHash) { return this._RenderManager.renderSingleTether(pPanelHash); }
+	updateNodePosition(pNodeHash, pX, pY) { return this._RenderManager.updateNodePosition(pNodeHash, pX, pY); }
+	_renderConnectionsForNode(pNodeHash) { return this._RenderManager.renderConnectionsForNode(pNodeHash); }
+	_renderTethersForNode(pNodeHash) { return this._RenderManager.renderTethersForNode(pNodeHash); }
 
 	// ---- Properties Panel Management ----