pict-section-flow 0.0.2 → 0.0.3

package/source/views/PictView-Flow.js

@@ -5,6 +5,9 @@ const libPictServiceFlowConnectionRenderer = require('../services/PictService-Fl
 const libPictServiceFlowTether = require('../services/PictService-Flow-Tether.js');
 const libPictServiceFlowLayout = require('../services/PictService-Flow-Layout.js');
 const libPictServiceFlowPathGenerator = require('../services/PictService-Flow-PathGenerator.js');
+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 libPictProviderFlowNodeTypes = require('../providers/PictProvider-Flow-NodeTypes.js');
 const libPictProviderFlowEventHandler = require('../providers/PictProvider-Flow-EventHandler.js');
@@ -12,9 +15,15 @@ const libPictProviderFlowLayouts = require('../providers/PictProvider-Flow-Layou
 const libPictProviderFlowSVGHelpers = require('../providers/PictProvider-Flow-SVGHelpers.js');
 const libPictProviderFlowGeometry = require('../providers/PictProvider-Flow-Geometry.js');
 const libPictProviderFlowPanelChrome = require('../providers/PictProvider-Flow-PanelChrome.js');
+const libPictProviderFlowCSS = require('../providers/PictProvider-Flow-CSS.js');
+const libPictProviderFlowIcons = require('../providers/PictProvider-Flow-Icons.js');
+const libPictProviderFlowConnectorShapes = require('../providers/PictProvider-Flow-ConnectorShapes.js');
+const libPictProviderFlowTheme = require('../providers/PictProvider-Flow-Theme.js');
+const libPictProviderFlowNoise = require('../providers/PictProvider-Flow-Noise.js');
 
 const libPictViewFlowNode = require('./PictView-Flow-Node.js');
 const libPictViewFlowToolbar = require('./PictView-Flow-Toolbar.js');
+const libPictViewFlowFloatingToolbar = require('./PictView-Flow-FloatingToolbar.js');
 const libPictViewFlowPropertiesPanel = require('./PictView-Flow-PropertiesPanel.js');
 
 const libPictFlowCardPropertiesPanel = require('../PictFlowCardPropertiesPanel.js');
@@ -52,398 +61,25 @@ const _DefaultConfiguration =
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
 
-	CSS: /*css*/`
-		.pict-flow-container {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			min-height: 400px;
-			overflow: hidden;
-			background-color: #fafafa;
-			border: 1px solid #e0e0e0;
-			border-radius: 4px;
-			display: flex;
-			flex-direction: column;
-		}
-		.pict-flow-svg-container {
-			flex: 1;
-			min-height: 0;
-			position: relative;
-		}
-		.pict-flow-svg {
-			width: 100%;
-			height: 100%;
-			cursor: grab;
-			user-select: none;
-			-webkit-user-select: none;
-		}
-		.pict-flow-svg.panning {
-			cursor: grabbing;
-		}
-		.pict-flow-svg.connecting {
-			cursor: crosshair;
-		}
-		.pict-flow-grid-pattern line {
-			stroke: #e8e8e8;
-			stroke-width: 0.5;
-		}
-		.pict-flow-node {
-			cursor: pointer;
-		}
-		.pict-flow-node:hover .pict-flow-node-body {
-			filter: brightness(0.97);
-		}
-		.pict-flow-node.selected .pict-flow-node-body {
-			stroke: #3498db;
-			stroke-width: 2.5;
-		}
-		.pict-flow-node.dragging {
-			opacity: 0.85;
-			cursor: grabbing;
-		}
-		.pict-flow-node-body {
-			fill: #ffffff;
-			stroke: #bdc3c7;
-			stroke-width: 1.5;
-			rx: 6;
-			ry: 6;
-			transition: filter 0.15s;
-		}
-		.pict-flow-node-title-bar {
-			fill: #2c3e50;
-			rx: 6;
-			ry: 6;
-		}
-		.pict-flow-node-title-bar-bottom {
-			fill: #2c3e50;
-		}
-		.pict-flow-node-title {
-			fill: #ffffff;
-			font-size: 12px;
-			font-weight: 700;
-			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			pointer-events: none;
-		}
-		.pict-flow-node-type-label {
-			fill: #95a5a6;
-			font-size: 10px;
-			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			pointer-events: none;
-		}
-		.pict-flow-port {
-			cursor: crosshair;
-			transition: r 0.15s;
-		}
-		.pict-flow-port.input {
-			fill: #3498db;
-			stroke: #2980b9;
-			stroke-width: 1.5;
-		}
-		.pict-flow-port.output {
-			fill: #2ecc71;
-			stroke: #27ae60;
-			stroke-width: 1.5;
-		}
-		.pict-flow-port:hover {
-			r: 7;
-		}
-		.pict-flow-port-label {
-			fill: #7f8c8d;
-			font-size: 9px;
-			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			pointer-events: none;
-		}
-		.pict-flow-connection {
-			fill: none;
-			stroke: #95a5a6;
-			stroke-width: 2;
-			cursor: pointer;
-			transition: stroke 0.15s;
-		}
-		.pict-flow-connection:hover {
-			stroke: #7f8c8d;
-			stroke-width: 3;
-		}
-		.pict-flow-connection.selected {
-			stroke: #3498db;
-			stroke-width: 3;
-		}
-		.pict-flow-connection-hitarea {
-			fill: none;
-			stroke: transparent;
-			stroke-width: 12;
-			cursor: pointer;
-		}
-		.pict-flow-drag-connection {
-			fill: none;
-			stroke: #3498db;
-			stroke-width: 2;
-			stroke-dasharray: 6 3;
-			pointer-events: none;
-		}
-		.pict-flow-node-decision .pict-flow-node-body {
-			fill: #fff9e6;
-			stroke: #f39c12;
-		}
-		.pict-flow-node-start .pict-flow-node-body {
-			fill: #eafaf1;
-			stroke: #27ae60;
-			rx: 25;
-			ry: 25;
-		}
-		.pict-flow-node-end .pict-flow-node-body {
-			fill: #fdedec;
-			stroke: #e74c3c;
-			rx: 25;
-			ry: 25;
-		}
-		.pict-flow-connection-handle {
-			fill: #ffffff;
-			stroke: #3498db;
-			stroke-width: 2;
-			cursor: grab;
-			transition: r 0.15s;
-			filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-		}
-		.pict-flow-connection-handle:hover {
-			r: 8;
-			stroke-width: 2.5;
-		}
-		.pict-flow-connection-handle-midpoint {
-			fill: #ffffff;
-			stroke: #e67e22;
-			stroke-width: 2;
-			cursor: grab;
-			transition: r 0.15s;
-			filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-		}
-		.pict-flow-connection-handle-midpoint:hover {
-			r: 8;
-			stroke-width: 2.5;
-		}
-		.pict-flow-tether-line {
-			fill: none;
-			stroke: #95a5a6;
-			stroke-width: 1.5;
-			stroke-dasharray: 6 4;
-			pointer-events: visibleStroke;
-			cursor: pointer;
-		}
-		.pict-flow-tether-line.selected {
-			stroke: #3498db;
-			stroke-width: 2;
-		}
-		.pict-flow-tether-hitarea {
-			fill: none;
-			stroke: transparent;
-			stroke-width: 10;
-			cursor: pointer;
-		}
-		.pict-flow-tether-handle {
-			fill: #ffffff;
-			stroke: #3498db;
-			stroke-width: 2;
-			cursor: grab;
-			transition: r 0.15s;
-			filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-		}
-		.pict-flow-tether-handle:hover {
-			r: 8;
-			stroke-width: 2.5;
-		}
-		.pict-flow-tether-handle-midpoint {
-			fill: #ffffff;
-			stroke: #e67e22;
-			stroke-width: 2;
-			cursor: grab;
-			transition: r 0.15s;
-			filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
-		}
-		.pict-flow-tether-handle-midpoint:hover {
-			r: 8;
-			stroke-width: 2.5;
-		}
-		.pict-flow-node-panel-indicator {
-			fill: #3498db;
-			stroke: #2980b9;
-			stroke-width: 1;
-			cursor: pointer;
-		}
-		.pict-flow-node-panel-indicator:hover {
-			fill: #2980b9;
-		}
-		.pict-flow-panel-foreign-object {
-			overflow: visible;
-		}
-		.pict-flow-panel {
-			background: #ffffff;
-			border: 1px solid #bdc3c7;
-			border-radius: 6px;
-			box-shadow: 0 2px 8px rgba(0,0,0,0.12);
-			display: flex;
-			flex-direction: column;
-			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-			font-size: 13px;
-			overflow: hidden;
-			width: 100%;
-			height: 100%;
-			box-sizing: border-box;
-		}
-		.pict-flow-panel-titlebar {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding: 6px 10px;
-			background: #ecf0f1;
-			border-bottom: 1px solid #d5dbdb;
-			cursor: grab;
-			user-select: none;
-			-webkit-user-select: none;
-			flex-shrink: 0;
-		}
-		.pict-flow-panel-titlebar.dragging {
-			cursor: grabbing;
-		}
-		.pict-flow-panel-title-text {
-			font-weight: 600;
-			font-size: 12px;
-			color: #2c3e50;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.pict-flow-panel-close-btn {
-			cursor: pointer;
-			color: #95a5a6;
-			font-size: 14px;
-			line-height: 1;
-			padding: 2px 4px;
-			border: none;
-			background: none;
-		}
-		.pict-flow-panel-close-btn:hover {
-			color: #e74c3c;
-		}
-		.pict-flow-panel-body {
-			flex: 1;
-			overflow: auto;
-			padding: 8px;
-		}
-		.pict-flow-fullscreen {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw;
-			height: 100vh;
-			z-index: 9999;
-			border-radius: 0;
-			border: none;
-			min-height: 100vh;
-		}
-		.pict-flow-fullscreen .pict-flow-svg {
-			min-height: calc(100vh - 50px);
-		}
-		.pict-flow-info-panel {
-			padding: 4px;
-			font-size: 12px;
-			line-height: 1.5;
-			color: #2c3e50;
-		}
-		.pict-flow-info-panel-header {
-			font-size: 14px;
-			font-weight: 600;
-			margin-bottom: 4px;
-		}
-		.pict-flow-info-panel-header.with-icon {
-			font-size: 16px;
-		}
-		.pict-flow-info-panel-description {
-			font-size: 11px;
-			color: #7f8c8d;
-			margin-bottom: 8px;
-		}
-		.pict-flow-info-panel-badges {
-			margin-bottom: 8px;
-		}
-		.pict-flow-info-panel-badge {
-			display: inline-block;
-			padding: 1px 6px;
-			border-radius: 3px;
-			font-size: 10px;
-			margin-right: 4px;
-		}
-		.pict-flow-info-panel-badge.category {
-			background: #ecf0f1;
-			color: #7f8c8d;
-		}
-		.pict-flow-info-panel-badge.code {
-			background: #eaf2f8;
-			color: #2980b9;
-			font-family: monospace;
-		}
-		.pict-flow-info-panel-section {
-			margin-bottom: 6px;
-		}
-		.pict-flow-info-panel-section-title {
-			font-size: 10px;
-			font-weight: 700;
-			text-transform: uppercase;
-			letter-spacing: 0.5px;
-			color: #95a5a6;
-			margin-bottom: 2px;
-		}
-		.pict-flow-info-panel-port {
-			padding: 2px 6px;
-			background: #f8f9fa;
-			margin-bottom: 2px;
-			font-size: 11px;
-		}
-		.pict-flow-info-panel-port.input {
-			border-left: 3px solid #3498db;
-		}
-		.pict-flow-info-panel-port.output {
-			border-left: 3px solid #2ecc71;
-		}
-		.pict-flow-info-panel-port-constraint {
-			color: #95a5a6;
-			font-size: 10px;
-		}
-	`,
+	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~}">\u2715</span></div><div class="pict-flow-panel-body" data-panel-hash="{~D:Record.Hash~}"></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-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>`
 		},
 		{
 			Hash: 'Flow-Container-Template',
 			Template: /*html*/`
 <div class="pict-flow-container" id="Flow-Wrapper-{~D:Record.ViewIdentifier~}">
 	<div id="Flow-Toolbar-{~D:Record.ViewIdentifier~}"></div>
+	<div id="Flow-FloatingToolbar-Container-{~D:Record.ViewIdentifier~}" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100;"></div>
 	<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">
 			<defs>
-				<marker id="flow-arrowhead-{~D:Record.ViewIdentifier~}"
-					markerWidth="5" markerHeight="7"
-					refX="7.5" refY="3.5"
-					orient="auto" markerUnits="strokeWidth">
-					<polygon points="0 0, 5 3.5, 0 7" fill="#95a5a6" />
-				</marker>
-				<marker id="flow-arrowhead-selected-{~D:Record.ViewIdentifier~}"
-					markerWidth="5" markerHeight="7"
-					refX="7.5" refY="3.5"
-					orient="auto" markerUnits="strokeWidth">
-					<polygon points="0 0, 5 3.5, 0 7" fill="#3498db" />
-				</marker>
-				<marker id="flow-tether-arrowhead-{~D:Record.ViewIdentifier~}"
-					markerWidth="4" markerHeight="6"
-					refX="6" refY="3"
-					orient="auto" markerUnits="strokeWidth">
-					<polygon points="0 0, 4 3, 0 6" fill="#95a5a6" />
-				</marker>
 				<pattern id="flow-grid-{~D:Record.ViewIdentifier~}"
 					width="20" height="20" patternUnits="userSpaceOnUse">
 					<line x1="20" y1="0" x2="20" y2="20" class="pict-flow-grid-pattern" />
@@ -507,6 +143,18 @@ class PictViewFlow extends libPictView
 		{
 			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);
@@ -519,6 +167,26 @@ class PictViewFlow extends libPictView
 		{
 			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);
@@ -539,6 +207,10 @@ class PictViewFlow extends libPictView
 		{
 			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);
@@ -592,6 +264,14 @@ class PictViewFlow extends libPictView
 		this._TetherService = null;
 		this._LayoutService = null;
 		this._PathGenerator = null;
+		this._ViewportManager = null;
+		this._SelectionManager = null;
+		this._PanelManager = null;
+		this._CSSProvider = null;
+		this._IconProvider = null;
+		this._ConnectorShapesProvider = null;
+		this._ThemeProvider = null;
+		this._NoiseProvider = null;
 		this._SVGHelperProvider = null;
 		this._GeometryProvider = null;
 		this._PanelChromeProvider = null;
@@ -602,8 +282,6 @@ class PictViewFlow extends libPictView
 		this._ToolbarView = null;
 		this._PropertiesPanelView = null;
 
-		this._IsFullscreen = false;
-
 		this.initialRenderComplete = false;
 	}
 
@@ -617,6 +295,12 @@ class PictViewFlow extends libPictView
 		return this._FlowData.ViewState;
 	}
 
+	// Backward-compatible getter for InteractionManager direct access
+	get _IsFullscreen()
+	{
+		return this._ViewportManager ? this._ViewportManager._IsFullscreen : false;
+	}
+
 	/**
 	 * Override render to pass view options as the template record,
 	 * so template expressions like {~D:Record.ViewIdentifier~} resolve correctly.
@@ -640,6 +324,31 @@ class PictViewFlow extends libPictView
 	{
 		super.onBeforeInitialize();
 
+		// Instantiate theme and noise providers (before CSS so theme state is available)
+		this._ThemeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowTheme', { FlowView: this });
+		this._NoiseProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNoise');
+
+		// Apply initial theme from options
+		if (this.options.Theme)
+		{
+			this._ThemeProvider.setTheme(this.options.Theme);
+		}
+		if (typeof this.options.NoiseLevel === 'number')
+		{
+			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');
@@ -651,11 +360,15 @@ class PictViewFlow extends libPictView
 		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();
 
 		return super.onBeforeInitialize();
 	}
@@ -713,6 +426,36 @@ 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)
 		{
@@ -748,6 +491,18 @@ class PictViewFlow extends libPictView
 		{
 			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 });
@@ -759,6 +514,25 @@ class PictViewFlow extends libPictView
 		if (!this._LayoutProvider)
 		{
 			this._LayoutProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowLayouts', { FlowView: this });
+			this._LayoutProvider.loadPersistedLayouts();
+		}
+
+		// Inject marker defs via the connector shapes provider
+		// Note: insertAdjacentHTML does not work on SVG elements (wrong namespace),
+		// so we parse via a temporary <svg> element to ensure SVG namespace.
+		if (this._ConnectorShapesProvider && this._SVGElement)
+		{
+			let tmpDefs = this._SVGElement.querySelector('defs');
+			if (tmpDefs)
+			{
+				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);
+				}
+			}
 		}
 
 		// Setup the toolbar if enabled
@@ -890,6 +664,12 @@ class PictViewFlow extends libPictView
 			)
 		};
 
+		// Merge any browser-persisted layouts into the newly loaded data
+		if (this._LayoutProvider)
+		{
+			this._LayoutProvider.loadPersistedLayouts();
+		}
+
 		if (this.initialRenderComplete)
 		{
 			this.renderFlow();
@@ -1107,18 +887,7 @@ class PictViewFlow extends libPictView
 	 */
 	selectNode(pNodeHash)
 	{
-		let tmpPreviousSelection = this._FlowData.ViewState.SelectedNodeHash;
-		this._FlowData.ViewState.SelectedNodeHash = pNodeHash;
-		this._FlowData.ViewState.SelectedConnectionHash = null;
-		this._FlowData.ViewState.SelectedTetherHash = null;
-
-		this.renderFlow();
-
-		if (this._EventHandlerProvider && pNodeHash !== tmpPreviousSelection)
-		{
-			let tmpNode = pNodeHash ? this._FlowData.Nodes.find((pNode) => pNode.Hash === pNodeHash) : null;
-			this._EventHandlerProvider.fireEvent('onNodeSelected', tmpNode);
-		}
+		return this._SelectionManager.selectNode(pNodeHash);
 	}
 
 	/**
@@ -1127,18 +896,7 @@ class PictViewFlow extends libPictView
 	 */
 	selectConnection(pConnectionHash)
 	{
-		let tmpPreviousSelection = this._FlowData.ViewState.SelectedConnectionHash;
-		this._FlowData.ViewState.SelectedConnectionHash = pConnectionHash;
-		this._FlowData.ViewState.SelectedNodeHash = null;
-		this._FlowData.ViewState.SelectedTetherHash = null;
-
-		this.renderFlow();
-
-		if (this._EventHandlerProvider && pConnectionHash !== tmpPreviousSelection)
-		{
-			let tmpConnection = pConnectionHash ? this._FlowData.Connections.find((pConn) => pConn.Hash === pConnectionHash) : null;
-			this._EventHandlerProvider.fireEvent('onConnectionSelected', tmpConnection);
-		}
+		return this._SelectionManager.selectConnection(pConnectionHash);
 	}
 
 	/**
@@ -1146,10 +904,7 @@ class PictViewFlow extends libPictView
 	 */
 	deselectAll()
 	{
-		this._FlowData.ViewState.SelectedNodeHash = null;
-		this._FlowData.ViewState.SelectedConnectionHash = null;
-		this._FlowData.ViewState.SelectedTetherHash = null;
-		this.renderFlow();
+		return this._SelectionManager.deselectAll();
 	}
 
 	/**
@@ -1158,15 +913,7 @@ class PictViewFlow extends libPictView
 	 */
 	deleteSelected()
 	{
-		if (this._FlowData.ViewState.SelectedNodeHash)
-		{
-			return this.removeNode(this._FlowData.ViewState.SelectedNodeHash);
-		}
-		if (this._FlowData.ViewState.SelectedConnectionHash)
-		{
-			return this.removeConnection(this._FlowData.ViewState.SelectedConnectionHash);
-		}
-		return false;
+		return this._SelectionManager.deleteSelected();
 	}
 
 	/**
@@ -1174,11 +921,7 @@ class PictViewFlow extends libPictView
 	 */
 	updateViewportTransform()
 	{
-		if (!this._ViewportElement) return;
-		let tmpVS = this._FlowData.ViewState;
-		this._ViewportElement.setAttribute('transform',
-			`translate(${tmpVS.PanX}, ${tmpVS.PanY}) scale(${tmpVS.Zoom})`
-		);
+		return this._ViewportManager.updateViewportTransform();
 	}
 
 	/**
@@ -1189,19 +932,7 @@ class PictViewFlow extends libPictView
 	 */
 	setZoom(pZoom, pFocusX, pFocusY)
 	{
-		let tmpNewZoom = Math.max(this.options.MinZoom, Math.min(this.options.MaxZoom, pZoom));
-		let tmpOldZoom = this._FlowData.ViewState.Zoom;
-
-		if (typeof pFocusX === 'number' && typeof pFocusY === 'number')
-		{
-			// Zoom toward focus point
-			let tmpVS = this._FlowData.ViewState;
-			tmpVS.PanX = pFocusX - (pFocusX - tmpVS.PanX) * (tmpNewZoom / tmpOldZoom);
-			tmpVS.PanY = pFocusY - (pFocusY - tmpVS.PanY) * (tmpNewZoom / tmpOldZoom);
-		}
-
-		this._FlowData.ViewState.Zoom = tmpNewZoom;
-		this.updateViewportTransform();
+		return this._ViewportManager.setZoom(pZoom, pFocusX, pFocusY);
 	}
 
 	/**
@@ -1209,39 +940,7 @@ class PictViewFlow extends libPictView
 	 */
 	zoomToFit()
 	{
-		if (this._FlowData.Nodes.length === 0) return;
-		if (!this._SVGElement) return;
-
-		let tmpMinX = Infinity, tmpMinY = Infinity;
-		let tmpMaxX = -Infinity, tmpMaxY = -Infinity;
-
-		for (let i = 0; i < this._FlowData.Nodes.length; i++)
-		{
-			let tmpNode = this._FlowData.Nodes[i];
-			tmpMinX = Math.min(tmpMinX, tmpNode.X);
-			tmpMinY = Math.min(tmpMinY, tmpNode.Y);
-			tmpMaxX = Math.max(tmpMaxX, tmpNode.X + tmpNode.Width);
-			tmpMaxY = Math.max(tmpMaxY, tmpNode.Y + tmpNode.Height);
-		}
-
-		let tmpPadding = 50;
-		let tmpFlowWidth = tmpMaxX - tmpMinX + tmpPadding * 2;
-		let tmpFlowHeight = tmpMaxY - tmpMinY + tmpPadding * 2;
-
-		let tmpSVGRect = this._SVGElement.getBoundingClientRect();
-		let tmpScaleX = tmpSVGRect.width / tmpFlowWidth;
-		let tmpScaleY = tmpSVGRect.height / tmpFlowHeight;
-		let tmpZoom = Math.min(tmpScaleX, tmpScaleY, 1.0); // Don't zoom in past 1.0
-		tmpZoom = Math.max(this.options.MinZoom, Math.min(this.options.MaxZoom, tmpZoom));
-
-		let tmpCenterX = (tmpMinX + tmpMaxX) / 2;
-		let tmpCenterY = (tmpMinY + tmpMaxY) / 2;
-
-		this._FlowData.ViewState.Zoom = tmpZoom;
-		this._FlowData.ViewState.PanX = (tmpSVGRect.width / 2) - (tmpCenterX * tmpZoom);
-		this._FlowData.ViewState.PanY = (tmpSVGRect.height / 2) - (tmpCenterY * tmpZoom);
-
-		this.updateViewportTransform();
+		return this._ViewportManager.zoomToFit();
 	}
 
 	/**
@@ -1269,41 +968,129 @@ class PictViewFlow extends libPictView
 	 */
 	toggleFullscreen()
 	{
-		let tmpViewIdentifier = this.options.ViewIdentifier;
-		let tmpContainerElements = this.pict.ContentAssignment.getElement(`#Flow-Wrapper-${tmpViewIdentifier}`);
-		if (tmpContainerElements.length < 1) return this._IsFullscreen;
+		return this._ViewportManager.toggleFullscreen();
+	}
 
-		let tmpContainer = tmpContainerElements[0];
+	/**
+	 * Exit fullscreen mode if currently active.
+	 */
+	exitFullscreen()
+	{
+		return this._ViewportManager.exitFullscreen();
+	}
 
-		this._IsFullscreen = !this._IsFullscreen;
+	// ── Theme API ────────────────────────────────────────────────────────
 
-		if (this._IsFullscreen)
+	/**
+	 * Switch the active theme and re-render.
+	 * @param {string} pThemeKey - Theme key (e.g. 'default', 'sketch', 'blueprint', 'mono', 'retro-80s', 'retro-90s')
+	 */
+	setTheme(pThemeKey)
+	{
+		if (!this._ThemeProvider)
+		{
+			this.log.warn('PictSectionFlow setTheme: ThemeProvider not available');
+			return;
+		}
+
+		let tmpApplied = this._ThemeProvider.setTheme(pThemeKey);
+		if (!tmpApplied) return;
+
+		// Re-register CSS with the new theme overrides
+		if (this._CSSProvider)
 		{
-			tmpContainer.classList.add('pict-flow-fullscreen');
+			this._CSSProvider.registerCSS();
 		}
-		else
+
+		// Re-inject marker defs (arrowhead colors may have changed)
+		this._reinjectMarkerDefs();
+
+		// Full re-render
+		if (this.initialRenderComplete)
 		{
-			tmpContainer.classList.remove('pict-flow-fullscreen');
+			this.renderFlow();
 		}
 
-		return this._IsFullscreen;
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onThemeChanged', pThemeKey);
+		}
 	}
 
 	/**
-	 * Exit fullscreen mode if currently active.
+	 * Set the noise level (0 to 1) and re-render.
+	 * @param {number} pLevel - 0 = precise, 1 = maximum wobble
 	 */
-	exitFullscreen()
+	setNoiseLevel(pLevel)
+	{
+		if (!this._ThemeProvider)
+		{
+			this.log.warn('PictSectionFlow setNoiseLevel: ThemeProvider not available');
+			return;
+		}
+
+		this._ThemeProvider.setNoiseLevel(pLevel);
+
+		// Full re-render to apply new noise
+		if (this.initialRenderComplete)
+		{
+			this.renderFlow();
+		}
+	}
+
+	/**
+	 * Get the current noise level (0 to 1).
+	 * @returns {number}
+	 */
+	getNoiseLevel()
+	{
+		if (this._ThemeProvider)
+		{
+			return this._ThemeProvider.getNoiseLevel();
+		}
+		return 0;
+	}
+
+	/**
+	 * Get the active theme key.
+	 * @returns {string}
+	 */
+	getThemeKey()
+	{
+		if (this._ThemeProvider)
+		{
+			return this._ThemeProvider.getActiveThemeKey();
+		}
+		return 'default';
+	}
+
+	/**
+	 * Re-inject SVG marker definitions (arrowheads).
+	 * Called after a theme switch to update arrowhead colors.
+	 */
+	_reinjectMarkerDefs()
 	{
-		if (!this._IsFullscreen) return;
+		if (!this._ConnectorShapesProvider || !this._SVGElement) return;
 
 		let tmpViewIdentifier = this.options.ViewIdentifier;
-		let tmpContainerElements = this.pict.ContentAssignment.getElement(`#Flow-Wrapper-${tmpViewIdentifier}`);
-		if (tmpContainerElements.length > 0)
+		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++)
 		{
-			tmpContainerElements[0].classList.remove('pict-flow-fullscreen');
+			tmpExistingMarkers[i].remove();
 		}
 
-		this._IsFullscreen = false;
+		// 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);
+		}
 	}
 
 	/**
@@ -1332,18 +1119,7 @@ class PictViewFlow extends libPictView
 	 */
 	selectTether(pPanelHash)
 	{
-		let tmpPreviousSelection = this._FlowData.ViewState.SelectedTetherHash;
-		this._FlowData.ViewState.SelectedTetherHash = pPanelHash;
-		this._FlowData.ViewState.SelectedNodeHash = null;
-		this._FlowData.ViewState.SelectedConnectionHash = null;
-
-		this.renderFlow();
-
-		if (this._EventHandlerProvider && pPanelHash !== tmpPreviousSelection)
-		{
-			let tmpPanel = pPanelHash ? this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash) : null;
-			this._EventHandlerProvider.fireEvent('onTetherSelected', tmpPanel);
-		}
+		return this._SelectionManager.selectTether(pPanelHash);
 	}
 
 	/**
@@ -1552,40 +1328,9 @@ class PictViewFlow extends libPictView
 
 		let tmpTitleBarHeight = (this._NodeView && this._NodeView.options.NodeTitleBarHeight) || 28;
 
-		let tmpX, tmpY;
+		let tmpLocal = this._GeometryProvider.getPortLocalPosition(tmpPort.Side, tmpPortIndex, tmpPortCount, tmpNode.Width, tmpNode.Height, tmpTitleBarHeight);
 
-		switch (tmpPort.Side)
-		{
-			case 'left':
-			{
-				// Distribute ports in the body area below the title bar
-				let tmpBodyHeight = tmpNode.Height - tmpTitleBarHeight;
-				tmpX = tmpNode.X;
-				tmpY = tmpNode.Y + tmpTitleBarHeight + ((tmpPortIndex + 1) / (tmpPortCount + 1)) * tmpBodyHeight;
-				break;
-			}
-			case 'right':
-			{
-				let tmpBodyHeight = tmpNode.Height - tmpTitleBarHeight;
-				tmpX = tmpNode.X + tmpNode.Width;
-				tmpY = tmpNode.Y + tmpTitleBarHeight + ((tmpPortIndex + 1) / (tmpPortCount + 1)) * tmpBodyHeight;
-				break;
-			}
-			case 'top':
-				tmpX = tmpNode.X + ((tmpPortIndex + 1) / (tmpPortCount + 1)) * tmpNode.Width;
-				tmpY = tmpNode.Y;
-				break;
-			case 'bottom':
-				tmpX = tmpNode.X + ((tmpPortIndex + 1) / (tmpPortCount + 1)) * tmpNode.Width;
-				tmpY = tmpNode.Y + tmpNode.Height;
-				break;
-			default:
-				tmpX = tmpNode.X + tmpNode.Width;
-				tmpY = tmpNode.Y + tmpNode.Height / 2;
-				break;
-		}
-
-		return { x: tmpX, y: tmpY, side: tmpPort.Side || 'right' };
+		return { x: tmpNode.X + tmpLocal.x, y: tmpNode.Y + tmpLocal.y, side: tmpPort.Side || 'right' };
 	}
 
 	/**
@@ -1596,29 +1341,7 @@ class PictViewFlow extends libPictView
 	 */
 	screenToSVGCoords(pScreenX, pScreenY)
 	{
-		if (!this._SVGElement)
-		{
-			return { x: pScreenX, y: pScreenY };
-		}
-
-		let tmpPoint = this._SVGElement.createSVGPoint();
-		tmpPoint.x = pScreenX;
-		tmpPoint.y = pScreenY;
-
-		let tmpCTM = this._SVGElement.getScreenCTM();
-		if (tmpCTM)
-		{
-			let tmpInverse = tmpCTM.inverse();
-			let tmpTransformed = tmpPoint.matrixTransform(tmpInverse);
-			// Account for viewport pan/zoom
-			let tmpVS = this._FlowData.ViewState;
-			return {
-				x: (tmpTransformed.x - tmpVS.PanX) / tmpVS.Zoom,
-				y: (tmpTransformed.y - tmpVS.PanY) / tmpVS.Zoom
-			};
-		}
-
-		return { x: pScreenX, y: pScreenY };
+		return this._ViewportManager.screenToSVGCoords(pScreenX, pScreenY);
 	}
 
 	/**
@@ -1773,59 +1496,7 @@ class PictViewFlow extends libPictView
 	 */
 	openPanel(pNodeHash)
 	{
-		let tmpNode = this.getNode(pNodeHash);
-		if (!tmpNode) return false;
-
-		let tmpNodeTypeConfig = this._NodeTypeProvider.getNodeType(tmpNode.Type);
-		if (!tmpNodeTypeConfig) return false;
-
-		// Check if a panel is already open for this node
-		let tmpExisting = this._FlowData.OpenPanels.find((pPanel) => pPanel.NodeHash === pNodeHash);
-		if (tmpExisting) return tmpExisting;
-
-		let tmpPanelConfig = tmpNodeTypeConfig.PropertiesPanel;
-		let tmpPanelHash = `panel-${this.fable.getUUID()}`;
-		let tmpWidth, tmpHeight, tmpPanelType, tmpTitle;
-
-		if (tmpPanelConfig)
-		{
-			tmpWidth = tmpPanelConfig.DefaultWidth || 300;
-			tmpHeight = tmpPanelConfig.DefaultHeight || 200;
-			tmpPanelType = tmpPanelConfig.PanelType || 'Base';
-			tmpTitle = tmpPanelConfig.Title || tmpNodeTypeConfig.Label || 'Properties';
-		}
-		else
-		{
-			// No PropertiesPanel configured — open an auto-generated info panel
-			tmpWidth = 240;
-			tmpHeight = 180;
-			tmpPanelType = 'Info';
-			tmpTitle = tmpNodeTypeConfig.Label || tmpNode.Title || 'Node Info';
-		}
-
-		let tmpPanelData =
-		{
-			Hash: tmpPanelHash,
-			NodeHash: pNodeHash,
-			PanelType: tmpPanelType,
-			Title: tmpTitle,
-			X: tmpNode.X + tmpNode.Width + 30,
-			Y: tmpNode.Y,
-			Width: tmpWidth,
-			Height: tmpHeight
-		};
-
-		this._FlowData.OpenPanels.push(tmpPanelData);
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onPanelOpened', tmpPanelData);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return tmpPanelData;
+		return this._PanelManager.openPanel(pNodeHash);
 	}
 
 	/**
@@ -1835,27 +1506,7 @@ class PictViewFlow extends libPictView
 	 */
 	closePanel(pPanelHash)
 	{
-		let tmpIndex = this._FlowData.OpenPanels.findIndex((pPanel) => pPanel.Hash === pPanelHash);
-		if (tmpIndex < 0) return false;
-
-		let tmpRemovedPanel = this._FlowData.OpenPanels.splice(tmpIndex, 1)[0];
-
-		// Clean up the panel instance
-		if (this._PropertiesPanelView)
-		{
-			this._PropertiesPanelView.destroyPanel(pPanelHash);
-		}
-
-		this.renderFlow();
-		this.marshalFromView();
-
-		if (this._EventHandlerProvider)
-		{
-			this._EventHandlerProvider.fireEvent('onPanelClosed', tmpRemovedPanel);
-			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
-		}
-
-		return true;
+		return this._PanelManager.closePanel(pPanelHash);
 	}
 
 	/**
@@ -1865,23 +1516,7 @@ class PictViewFlow extends libPictView
 	 */
 	closePanelForNode(pNodeHash)
 	{
-		let tmpPanelsToClose = this._FlowData.OpenPanels.filter((pPanel) => pPanel.NodeHash === pNodeHash);
-		if (tmpPanelsToClose.length === 0) return false;
-
-		for (let i = 0; i < tmpPanelsToClose.length; i++)
-		{
-			let tmpIndex = this._FlowData.OpenPanels.indexOf(tmpPanelsToClose[i]);
-			if (tmpIndex >= 0)
-			{
-				this._FlowData.OpenPanels.splice(tmpIndex, 1);
-			}
-			if (this._PropertiesPanelView)
-			{
-				this._PropertiesPanelView.destroyPanel(tmpPanelsToClose[i].Hash);
-			}
-		}
-
-		return true;
+		return this._PanelManager.closePanelForNode(pNodeHash);
 	}
 
 	/**
@@ -1891,13 +1526,7 @@ class PictViewFlow extends libPictView
 	 */
 	togglePanel(pNodeHash)
 	{
-		let tmpExisting = this._FlowData.OpenPanels.find((pPanel) => pPanel.NodeHash === pNodeHash);
-		if (tmpExisting)
-		{
-			this.closePanel(tmpExisting.Hash);
-			return false;
-		}
-		return this.openPanel(pNodeHash);
+		return this._PanelManager.togglePanel(pNodeHash);
 	}
 
 	/**
@@ -1908,28 +1537,7 @@ class PictViewFlow extends libPictView
 	 */
 	updatePanelPosition(pPanelHash, pX, pY)
 	{
-		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
-		if (!tmpPanel) return;
-
-		tmpPanel.X = pX;
-		tmpPanel.Y = pY;
-
-		// Reset tether handle positions when panel moves
-		this._resetHandlesForPanel(pPanelHash);
-
-		// Update the foreignObject position directly for smooth dragging
-		if (this._PanelsLayer)
-		{
-			let tmpFO = this._PanelsLayer.querySelector(`[data-panel-hash="${pPanelHash}"]`);
-			if (tmpFO)
-			{
-				tmpFO.setAttribute('x', String(pX));
-				tmpFO.setAttribute('y', String(pY));
-			}
-		}
-
-		// Update the tether for this panel
-		this._renderTethersForNode(tmpPanel.NodeHash);
+		return this._PanelManager.updatePanelPosition(pPanelHash, pX, pY);
 	}
 }