pict-section-flow 0.0.1 → 0.0.2

package/source/views/PictView-Flow.js

@@ -2,13 +2,26 @@ const libPictView = require('pict-view');
 
 const libPictServiceFlowInteractionManager = require('../services/PictService-Flow-InteractionManager.js');
 const libPictServiceFlowConnectionRenderer = require('../services/PictService-Flow-ConnectionRenderer.js');
+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 libPictProviderFlowNodeTypes = require('../providers/PictProvider-Flow-NodeTypes.js');
 const libPictProviderFlowEventHandler = require('../providers/PictProvider-Flow-EventHandler.js');
+const libPictProviderFlowLayouts = require('../providers/PictProvider-Flow-Layouts.js');
+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 libPictViewFlowNode = require('./PictView-Flow-Node.js');
 const libPictViewFlowToolbar = require('./PictView-Flow-Toolbar.js');
+const libPictViewFlowPropertiesPanel = require('./PictView-Flow-PropertiesPanel.js');
+
+const libPictFlowCardPropertiesPanel = require('../PictFlowCardPropertiesPanel.js');
+const libPanelTemplate = require('../panels/FlowCardPropertiesPanel-Template.js');
+const libPanelMarkdown = require('../panels/FlowCardPropertiesPanel-Markdown.js');
+const libPanelForm = require('../panels/FlowCardPropertiesPanel-Form.js');
+const libPanelView = require('../panels/FlowCardPropertiesPanel-View.js');
 
 const _DefaultConfiguration =
 {
@@ -49,11 +62,17 @@ const _DefaultConfiguration =
 			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%;
-			min-height: 400px;
 			cursor: grab;
 			user-select: none;
 			-webkit-user-select: none;
@@ -178,16 +197,231 @@ const _DefaultConfiguration =
 			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;
+		}
 	`,
 
 	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>`
+		},
 		{
 			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-SVG-Container-{~D:Record.ViewIdentifier~}">
+	<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">
@@ -204,6 +438,12 @@ const _DefaultConfiguration =
 					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" />
@@ -216,6 +456,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-tethers-layer" id="Flow-Tethers-{~D:Record.ViewIdentifier~}"></g>
+				<g class="pict-flow-panels-layer" id="Flow-Panels-{~D:Record.ViewIdentifier~}"></g>
 			</g>
 		</svg>
 	</div>
@@ -253,10 +495,30 @@ class PictViewFlow extends libPictView
 		{
 			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('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('PictProviderFlowNodeTypes'))
 		{
 			this.fable.addServiceType('PictProviderFlowNodeTypes', libPictProviderFlowNodeTypes);
@@ -265,6 +527,10 @@ class PictViewFlow extends libPictView
 		{
 			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);
@@ -273,17 +539,44 @@ class PictViewFlow extends libPictView
 		{
 			this.fable.addServiceType('PictViewFlowToolbar', libPictViewFlowToolbar);
 		}
+		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);
+		}
 
 		// Internal state
 		this._FlowData = {
 			Nodes: [],
 			Connections: [],
+			OpenPanels: [],
+			SavedLayouts: [],
 			ViewState: {
 				PanX: 0,
 				PanY: 0,
 				Zoom: 1,
 				SelectedNodeHash: null,
-				SelectedConnectionHash: null
+				SelectedConnectionHash: null,
+				SelectedTetherHash: null
 			}
 		};
 
@@ -291,14 +584,25 @@ class PictViewFlow extends libPictView
 		this._ViewportElement = null;
 		this._NodesLayer = null;
 		this._ConnectionsLayer = null;
+		this._TethersLayer = null;
+		this._PanelsLayer = null;
 
 		this._InteractionManager = null;
 		this._ConnectionRenderer = null;
+		this._TetherService = null;
 		this._LayoutService = null;
+		this._PathGenerator = null;
+		this._SVGHelperProvider = null;
+		this._GeometryProvider = null;
+		this._PanelChromeProvider = null;
 		this._NodeTypeProvider = null;
+		this._LayoutProvider = null;
 		this._EventHandlerProvider = null;
 		this._NodeView = null;
 		this._ToolbarView = null;
+		this._PropertiesPanelView = null;
+
+		this._IsFullscreen = false;
 
 		this.initialRenderComplete = false;
 	}
@@ -336,14 +640,22 @@ class PictViewFlow extends libPictView
 	{
 		super.onBeforeInitialize();
 
-		// Register services
+		// 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 });
 
-		// Register providers
-		this._NodeTypeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNodeTypes', { 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 });
 
 		return super.onBeforeInitialize();
 	}
@@ -389,6 +701,36 @@ class PictViewFlow extends libPictView
 			this._ConnectionsLayer = tmpConnectionsElements[0];
 		}
 
+		let tmpTethersElements = this.pict.ContentAssignment.getElement(`#Flow-Tethers-${tmpViewIdentifier}`);
+		if (tmpTethersElements.length > 0)
+		{
+			this._TethersLayer = tmpTethersElements[0];
+		}
+
+		let tmpPanelsElements = this.pict.ContentAssignment.getElement(`#Flow-Panels-${tmpViewIdentifier}`);
+		if (tmpPanelsElements.length > 0)
+		{
+			this._PanelsLayer = tmpPanelsElements[0];
+		}
+
+		// 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)
 		{
@@ -398,18 +740,26 @@ class PictViewFlow extends libPictView
 		{
 			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._NodeTypeProvider)
 		{
-			this._NodeTypeProvider = this.fable.instantiateServiceProviderWithoutRegistration('PictProviderFlowNodeTypes', { FlowView: this });
+			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 });
+		}
 
 		// Setup the toolbar if enabled
 		if (this.options.EnableToolbar)
@@ -442,6 +792,17 @@ class PictViewFlow extends libPictView
 			));
 		this._NodeView._FlowView = this;
 
+		// Setup the properties panel renderer
+		this._PropertiesPanelView = this.fable.instantiateServiceProviderWithoutRegistration('PictViewFlowPropertiesPanel',
+			Object.assign({},
+				libPictViewFlowPropertiesPanel.default_configuration,
+				{
+					ViewIdentifier: `Flow-PropertiesPanel-${tmpViewIdentifier}`,
+					AutoRender: false
+				}
+			));
+		this._PropertiesPanelView._FlowView = this;
+
 		// Bind interaction events
 		this._InteractionManager.initialize(this._SVGElement, this._ViewportElement);
 
@@ -521,8 +882,10 @@ class PictViewFlow extends libPictView
 		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 },
+				{ PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedConnectionHash: null, SelectedTetherHash: null },
 				pFlowData.ViewState || {}
 			)
 		};
@@ -610,6 +973,9 @@ class PictViewFlow extends libPictView
 			return pConnection.SourceNodeHash !== pNodeHash && pConnection.TargetNodeHash !== pNodeHash;
 		});
 
+		// Close any open panels for this node
+		this.closePanelForNode(pNodeHash);
+
 		// Clear selection if this node was selected
 		if (this._FlowData.ViewState.SelectedNodeHash === pNodeHash)
 		{
@@ -744,6 +1110,7 @@ class PictViewFlow extends libPictView
 		let tmpPreviousSelection = this._FlowData.ViewState.SelectedNodeHash;
 		this._FlowData.ViewState.SelectedNodeHash = pNodeHash;
 		this._FlowData.ViewState.SelectedConnectionHash = null;
+		this._FlowData.ViewState.SelectedTetherHash = null;
 
 		this.renderFlow();
 
@@ -763,6 +1130,7 @@ class PictViewFlow extends libPictView
 		let tmpPreviousSelection = this._FlowData.ViewState.SelectedConnectionHash;
 		this._FlowData.ViewState.SelectedConnectionHash = pConnectionHash;
 		this._FlowData.ViewState.SelectedNodeHash = null;
+		this._FlowData.ViewState.SelectedTetherHash = null;
 
 		this.renderFlow();
 
@@ -780,6 +1148,7 @@ class PictViewFlow extends libPictView
 	{
 		this._FlowData.ViewState.SelectedNodeHash = null;
 		this._FlowData.ViewState.SelectedConnectionHash = null;
+		this._FlowData.ViewState.SelectedTetherHash = null;
 		this.renderFlow();
 	}
 
@@ -893,6 +1262,50 @@ class PictViewFlow extends libPictView
 		}
 	}
 
+	/**
+	 * Toggle fullscreen mode on the flow editor container.
+	 * Uses a CSS fixed-position overlay instead of the Fullscreen API.
+	 * @returns {boolean} The new fullscreen state
+	 */
+	toggleFullscreen()
+	{
+		let tmpViewIdentifier = this.options.ViewIdentifier;
+		let tmpContainerElements = this.pict.ContentAssignment.getElement(`#Flow-Wrapper-${tmpViewIdentifier}`);
+		if (tmpContainerElements.length < 1) return this._IsFullscreen;
+
+		let tmpContainer = tmpContainerElements[0];
+
+		this._IsFullscreen = !this._IsFullscreen;
+
+		if (this._IsFullscreen)
+		{
+			tmpContainer.classList.add('pict-flow-fullscreen');
+		}
+		else
+		{
+			tmpContainer.classList.remove('pict-flow-fullscreen');
+		}
+
+		return this._IsFullscreen;
+	}
+
+	/**
+	 * Exit fullscreen mode if currently active.
+	 */
+	exitFullscreen()
+	{
+		if (!this._IsFullscreen) return;
+
+		let tmpViewIdentifier = this.options.ViewIdentifier;
+		let tmpContainerElements = this.pict.ContentAssignment.getElement(`#Flow-Wrapper-${tmpViewIdentifier}`);
+		if (tmpContainerElements.length > 0)
+		{
+			tmpContainerElements[0].classList.remove('pict-flow-fullscreen');
+		}
+
+		this._IsFullscreen = false;
+	}
+
 	/**
 	 * Get a node by hash
 	 * @param {string} pNodeHash
@@ -913,6 +1326,207 @@ class PictViewFlow extends libPictView
 		return this._FlowData.Connections.find((pConn) => pConn.Hash === pConnectionHash) || null;
 	}
 
+	/**
+	 * Select a tether by its panel hash.
+	 * @param {string|null} pPanelHash - Hash of the panel whose tether to select, or null to deselect
+	 */
+	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);
+		}
+	}
+
+	/**
+	 * 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;
+			}
+		}
+
+		this._renderSingleConnection(pConnectionHash);
+	}
+
+	/**
+	 * 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 {number} pX
+	 * @param {number} pY
+	 */
+	updateTetherHandle(pPanelHash, pHandleType, pX, pY)
+	{
+		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel) return;
+
+		if (this._TetherService)
+		{
+			this._TetherService.updateHandlePosition(tmpPanel, pHandleType, pX, pY);
+		}
+
+		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.
 	 *
@@ -1047,6 +1661,12 @@ class PictViewFlow extends libPictView
 			this._NodeView.renderNode(tmpNode, this._NodesLayer, tmpIsSelected, tmpNodeTypeConfig);
 		}
 
+		// 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();
 	}
@@ -1071,6 +1691,9 @@ class PictViewFlow extends libPictView
 		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)
@@ -1080,6 +1703,9 @@ class PictViewFlow extends libPictView
 
 		// Re-render connections that involve this node
 		this._renderConnectionsForNode(pNodeHash);
+
+		// Update tethers for any panels attached to this node
+		this._renderTethersForNode(pNodeHash);
 	}
 
 	/**
@@ -1109,6 +1735,202 @@ class PictViewFlow extends libPictView
 			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);
+		}
+	}
+
+	// ---- Properties Panel Management ----
+
+	/**
+	 * Open a properties panel for a node.
+	 * @param {string} pNodeHash - The hash of the node to open a panel for
+	 * @returns {Object|false} The panel data, or false if the node has no PropertiesPanel config
+	 */
+	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;
+	}
+
+	/**
+	 * Close a properties panel by panel hash.
+	 * @param {string} pPanelHash
+	 * @returns {boolean}
+	 */
+	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;
+	}
+
+	/**
+	 * Close all panels for a given node.
+	 * @param {string} pNodeHash
+	 * @returns {boolean}
+	 */
+	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;
+	}
+
+	/**
+	 * Toggle a properties panel for a node (open if closed, close if open).
+	 * @param {string} pNodeHash
+	 * @returns {Object|false}
+	 */
+	togglePanel(pNodeHash)
+	{
+		let tmpExisting = this._FlowData.OpenPanels.find((pPanel) => pPanel.NodeHash === pNodeHash);
+		if (tmpExisting)
+		{
+			this.closePanel(tmpExisting.Hash);
+			return false;
+		}
+		return this.openPanel(pNodeHash);
+	}
+
+	/**
+	 * Update a panel's position (for drag).
+	 * @param {string} pPanelHash
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	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);
+	}
 }
 
 module.exports = PictViewFlow;