pict-section-flow 0.0.10 → 0.0.13

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

@@ -0,0 +1,338 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-DataManager
+ *
+ * Manages flow data lifecycle: serialization, deserialization, and CRUD
+ * operations for nodes and connections.
+ *
+ * Extracted from PictView-Flow.js to keep the view focused on
+ * coordination and lifecycle rather than data manipulation.
+ */
+class PictServiceFlowDataManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowDataManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	// ---- Marshaling ----
+
+	/**
+	 * Marshal data from AppData into the flow view
+	 */
+	marshalToView()
+	{
+		if (!this._FlowView) return;
+
+		if (this._FlowView.options.FlowDataAddress)
+		{
+			const tmpAddressSpace =
+			{
+				Fable: this._FlowView.fable,
+				Pict: this._FlowView.pict || this._FlowView.fable,
+				AppData: this._FlowView.pict ? this._FlowView.pict.AppData : this._FlowView.fable.AppData,
+				Bundle: this._FlowView.Bundle,
+				Options: this._FlowView.options
+			};
+			let tmpData = this._FlowView.fable.manifest.getValueByHash(tmpAddressSpace, this._FlowView.options.FlowDataAddress);
+			if (typeof tmpData === 'object' && tmpData !== null)
+			{
+				this.setFlowData(tmpData);
+			}
+		}
+	}
+
+	/**
+	 * Marshal data from the flow view back to AppData
+	 */
+	marshalFromView()
+	{
+		if (!this._FlowView) return;
+
+		if (this._FlowView.options.FlowDataAddress)
+		{
+			const tmpAddressSpace =
+			{
+				Fable: this._FlowView.fable,
+				Pict: this._FlowView.pict || this._FlowView.fable,
+				AppData: this._FlowView.pict ? this._FlowView.pict.AppData : this._FlowView.fable.AppData,
+				Bundle: this._FlowView.Bundle,
+				Options: this._FlowView.options
+			};
+			this._FlowView.fable.manifest.setValueByHash(tmpAddressSpace, this._FlowView.options.FlowDataAddress, JSON.parse(JSON.stringify(this._FlowView._FlowData)));
+		}
+	}
+
+	// ---- Flow Data Get/Set ----
+
+	/**
+	 * Get the complete flow data object
+	 * @returns {Object} The flow data including nodes, connections, and view state
+	 */
+	getFlowData()
+	{
+		if (!this._FlowView) return {};
+		return JSON.parse(JSON.stringify(this._FlowView._FlowData));
+	}
+
+	/**
+	 * Set the complete flow data object and re-render
+	 * @param {Object} pFlowData - The flow data to set
+	 */
+	setFlowData(pFlowData)
+	{
+		if (!this._FlowView) return;
+
+		if (typeof pFlowData !== 'object' || pFlowData === null)
+		{
+			this._FlowView.log.warn('PictSectionFlow setFlowData received invalid data');
+			return;
+		}
+
+		this._FlowView._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._FlowView._LayoutProvider)
+		{
+			this._FlowView._LayoutProvider.loadPersistedLayouts();
+		}
+
+		if (this._FlowView.initialRenderComplete)
+		{
+			this._FlowView.renderFlow();
+		}
+	}
+
+	// ---- Node CRUD ----
+
+	/**
+	 * 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)
+	{
+		if (!this._FlowView) return null;
+
+		let tmpType = pType || this._FlowView.options.DefaultNodeType;
+		let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpType);
+
+		let tmpNodeHash = `node-${this._FlowView.fable.getUUID()}`;
+		let tmpNode =
+		{
+			Hash: tmpNodeHash,
+			Type: tmpType,
+			X: pX || 100,
+			Y: pY || 100,
+			Width: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultWidth) || this._FlowView.options.DefaultNodeWidth,
+			Height: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultHeight) || this._FlowView.options.DefaultNodeHeight,
+			Title: pTitle || (tmpNodeTypeConfig && tmpNodeTypeConfig.Label) || 'New Node',
+			Ports: (tmpNodeTypeConfig && tmpNodeTypeConfig.DefaultPorts)
+				? JSON.parse(JSON.stringify(tmpNodeTypeConfig.DefaultPorts))
+				: [
+					{ Hash: `port-in-${this._FlowView.fable.getUUID()}`, Direction: 'input', Side: 'left', Label: 'In' },
+					{ Hash: `port-out-${this._FlowView.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._FlowView.fable.getUUID()}`;
+			}
+		}
+
+		this._FlowView._FlowData.Nodes.push(tmpNode);
+		this._FlowView.renderFlow();
+		this.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeAdded', tmpNode);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._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)
+	{
+		if (!this._FlowView) return false;
+
+		let tmpNodeIndex = this._FlowView._FlowData.Nodes.findIndex((pNode) => pNode.Hash === pNodeHash);
+		if (tmpNodeIndex < 0)
+		{
+			this._FlowView.log.warn(`PictSectionFlow removeNode: node ${pNodeHash} not found`);
+			return false;
+		}
+
+		let tmpRemovedNode = this._FlowView._FlowData.Nodes.splice(tmpNodeIndex, 1)[0];
+
+		// Remove all connections involving this node
+		this._FlowView._FlowData.Connections = this._FlowView._FlowData.Connections.filter((pConnection) =>
+		{
+			return pConnection.SourceNodeHash !== pNodeHash && pConnection.TargetNodeHash !== pNodeHash;
+		});
+
+		// Close any open panels for this node
+		this._FlowView.closePanelForNode(pNodeHash);
+
+		// Clear selection if this node was selected
+		if (this._FlowView._FlowData.ViewState.SelectedNodeHash === pNodeHash)
+		{
+			this._FlowView._FlowData.ViewState.SelectedNodeHash = null;
+		}
+
+		this._FlowView.renderFlow();
+		this.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeRemoved', tmpRemovedNode);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return true;
+	}
+
+	// ---- Connection CRUD ----
+
+	/**
+	 * 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)
+	{
+		if (!this._FlowView) return false;
+
+		// Validate that both nodes and ports exist
+		let tmpSourceNode = this._FlowView._FlowData.Nodes.find((pNode) => pNode.Hash === pSourceNodeHash);
+		let tmpTargetNode = this._FlowView._FlowData.Nodes.find((pNode) => pNode.Hash === pTargetNodeHash);
+
+		if (!tmpSourceNode || !tmpTargetNode)
+		{
+			this._FlowView.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._FlowView.log.warn('PictSectionFlow addConnection: source or target port not found');
+			return false;
+		}
+
+		// Prevent self-connections
+		if (pSourceNodeHash === pTargetNodeHash)
+		{
+			this._FlowView.log.warn('PictSectionFlow addConnection: cannot connect a node to itself');
+			return false;
+		}
+
+		// Check for duplicate connections
+		let tmpDuplicate = this._FlowView._FlowData.Connections.find((pConn) =>
+		{
+			return pConn.SourceNodeHash === pSourceNodeHash
+				&& pConn.SourcePortHash === pSourcePortHash
+				&& pConn.TargetNodeHash === pTargetNodeHash
+				&& pConn.TargetPortHash === pTargetPortHash;
+		});
+		if (tmpDuplicate)
+		{
+			this._FlowView.log.warn('PictSectionFlow addConnection: duplicate connection');
+			return false;
+		}
+
+		let tmpConnection =
+		{
+			Hash: `conn-${this._FlowView.fable.getUUID()}`,
+			SourceNodeHash: pSourceNodeHash,
+			SourcePortHash: pSourcePortHash,
+			TargetNodeHash: pTargetNodeHash,
+			TargetPortHash: pTargetPortHash,
+			Data: pData || {}
+		};
+
+		this._FlowView._FlowData.Connections.push(tmpConnection);
+		this._FlowView.renderFlow();
+		this.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onConnectionCreated', tmpConnection);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._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)
+	{
+		if (!this._FlowView) return false;
+
+		let tmpConnectionIndex = this._FlowView._FlowData.Connections.findIndex((pConn) => pConn.Hash === pConnectionHash);
+		if (tmpConnectionIndex < 0)
+		{
+			this._FlowView.log.warn(`PictSectionFlow removeConnection: connection ${pConnectionHash} not found`);
+			return false;
+		}
+
+		let tmpRemovedConnection = this._FlowView._FlowData.Connections.splice(tmpConnectionIndex, 1)[0];
+
+		if (this._FlowView._FlowData.ViewState.SelectedConnectionHash === pConnectionHash)
+		{
+			this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
+		}
+
+		this._FlowView.renderFlow();
+		this.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onConnectionRemoved', tmpRemovedConnection);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return true;
+	}
+}
+
+module.exports = PictServiceFlowDataManager;

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

@@ -10,7 +10,8 @@ const INTERACTION_STATES =
 	DRAGGING_PANEL: 'dragging-panel',
 	DRAGGING_HANDLE: 'dragging-handle',
 	CONNECTING: 'connecting',
-	PANNING: 'panning'
+	PANNING: 'panning',
+	RESIZING_PANEL: 'resizing-panel'
 };
 
 class PictServiceFlowInteractionManager extends libFableServiceProviderBase
@@ -65,6 +66,15 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._LastClickNodeHash = null;
 		this._DoubleClickThreshold = 400;
 
+		// Panel resize state
+		this._ResizePanelHash = null;
+		this._ResizeStartY = 0;
+		this._ResizePanelStartHeight = 0;
+
+		// Double-click detection for connections
+		this._LastConnectionClickTime = 0;
+		this._LastConnectionClickHash = null;
+
 		// Double-click detection for handles
 		this._LastHandleClickTime = 0;
 		this._LastHandleClickHash = null;
@@ -100,10 +110,25 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		// Keyboard events for delete
 		document.addEventListener('keydown', this._boundOnKeyDown);
 
-		// Prevent context menu on right-click
+		// Handle right-click: add/remove bezier handles on connections
 		this._SVGElement.addEventListener('contextmenu', (pEvent) =>
 		{
 			pEvent.preventDefault();
+
+			let tmpTarget = pEvent.target;
+			let tmpElementType = this._getElementType(tmpTarget);
+
+			switch (tmpElementType)
+			{
+				case 'connection':
+				case 'connection-hitarea':
+					this._addBezierHandle(tmpTarget, pEvent);
+					break;
+
+				case 'connection-handle':
+					this._removeBezierHandle(tmpTarget);
+					break;
+			}
 		});
 	}
 
@@ -135,14 +160,18 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		let tmpTarget = pEvent.target;
 		let tmpElementType = this._getElementType(tmpTarget);
 
-		// Check if click is inside a panel body — let HTML handle its own events
-		if (tmpTarget.closest && tmpTarget.closest('.pict-flow-panel-body'))
+		// Check if click is inside a panel content area — let HTML handle its own events
+		if (tmpTarget.closest && tmpTarget.closest('.pict-flow-panel-content'))
 		{
 			return;
 		}
 
-		// Capture pointer for smooth dragging
-		this._SVGElement.setPointerCapture(pEvent.pointerId);
+		// Capture pointer for smooth dragging (left-click only — right-click
+		// needs the real target for contextmenu handle add/remove)
+		if (pEvent.button === 0)
+		{
+			this._SVGElement.setPointerCapture(pEvent.pointerId);
+		}
 
 		switch (tmpElementType)
 		{
@@ -180,6 +209,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._startPanelDrag(pEvent, tmpTarget);
 				break;
 
+			case 'panel-resize':
+				this._startPanelResize(pEvent, tmpTarget);
+				break;
+
 			case 'panel-close':
 			{
 				let tmpPanelHash = this._getPanelHash(tmpTarget);
@@ -251,8 +284,26 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 			case 'connection':
 			case 'connection-hitarea':
-				this._selectConnection(tmpTarget);
+			{
+				let tmpConnectionHash = this._getConnectionHash(tmpTarget);
+				let tmpNow = Date.now();
+
+				// Check for double-click on same connection to add a handle
+				if (tmpConnectionHash && tmpConnectionHash === this._LastConnectionClickHash
+					&& (tmpNow - this._LastConnectionClickTime) < this._DoubleClickThreshold)
+				{
+					this._LastConnectionClickTime = 0;
+					this._LastConnectionClickHash = null;
+					this._addBezierHandle(tmpTarget, pEvent);
+				}
+				else
+				{
+					this._LastConnectionClickTime = tmpNow;
+					this._LastConnectionClickHash = tmpConnectionHash;
+					this._selectConnection(tmpTarget);
+				}
 				break;
+			}
 
 			default:
 				// Click on background - start panning or deselect
@@ -290,6 +341,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._onConnectionDrag(pEvent);
 				break;
 
+			case INTERACTION_STATES.RESIZING_PANEL:
+				this._onPanelResize(pEvent);
+				break;
+
 			case INTERACTION_STATES.PANNING:
 				this._onPan(pEvent);
 				break;
@@ -324,6 +379,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._endHandleDrag(pEvent);
 				break;
 
+			case INTERACTION_STATES.RESIZING_PANEL:
+				this._endPanelResize(pEvent);
+				break;
+
 			case INTERACTION_STATES.CONNECTING:
 				this._endConnection(pEvent);
 				break;
@@ -527,6 +586,67 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragPanelHash = null;
 	}
 
+	// ---- Panel Resizing ----
+
+	_startPanelResize(pEvent, pTarget)
+	{
+		let tmpPanelHash = this._getPanelHash(pTarget);
+		if (!tmpPanelHash) return;
+
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === tmpPanelHash);
+		if (!tmpPanel) return;
+
+		this._State = INTERACTION_STATES.RESIZING_PANEL;
+		this._ResizePanelHash = tmpPanelHash;
+		this._ResizeStartY = pEvent.clientY;
+		this._ResizePanelStartHeight = tmpPanel.Height;
+
+		this._SVGElement.classList.add('panning');
+	}
+
+	_onPanelResize(pEvent)
+	{
+		if (!this._ResizePanelHash) return;
+
+		let tmpVS = this._FlowView.viewState;
+		let tmpDY = (pEvent.clientY - this._ResizeStartY) / tmpVS.Zoom;
+		let tmpNewHeight = Math.max(120, this._ResizePanelStartHeight + tmpDY);
+
+		// Update the panel data
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === this._ResizePanelHash);
+		if (tmpPanel)
+		{
+			tmpPanel.Height = tmpNewHeight;
+		}
+
+		// Update the foreignObject height directly for smooth resizing
+		if (this._FlowView._PanelsLayer)
+		{
+			let tmpFO = this._FlowView._PanelsLayer.querySelector('[data-panel-hash="' + this._ResizePanelHash + '"]');
+			if (tmpFO)
+			{
+				tmpFO.setAttribute('height', String(tmpNewHeight));
+			}
+		}
+	}
+
+	_endPanelResize(pEvent)
+	{
+		this._SVGElement.classList.remove('panning');
+
+		// Re-render to sync tethers
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+		}
+
+		this._State = INTERACTION_STATES.IDLE;
+		this._ResizePanelHash = null;
+	}
+
 	// ---- Handle Dragging ----
 
 	_startHandleDrag(pEvent, pConnectionHash, pPanelHash, pHandleType, pIsTether)
@@ -601,6 +721,43 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragHandleIsTether = false;
 	}
 
+	// ---- Right-Click Handle Add/Remove ----
+
+	/**
+	 * Add a bezier handle to a connection at the right-click position.
+	 * @param {Element} pTarget - The SVG element that was right-clicked
+	 * @param {MouseEvent} pEvent - The contextmenu event
+	 */
+	_addBezierHandle(pTarget, pEvent)
+	{
+		let tmpConnectionHash = this._getConnectionHash(pTarget);
+		if (!tmpConnectionHash) return;
+
+		// Select the connection so handle circles are rendered after the re-render
+		this._FlowView.selectConnection(tmpConnectionHash);
+
+		let tmpCoords = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
+		this._FlowView.addConnectionHandle(tmpConnectionHash, tmpCoords.x, tmpCoords.y);
+	}
+
+	/**
+	 * Remove a bezier handle from a connection.
+	 * @param {Element} pTarget - The handle SVG element that was right-clicked
+	 */
+	_removeBezierHandle(pTarget)
+	{
+		let tmpConnectionHash = this._getConnectionHash(pTarget);
+		if (!tmpConnectionHash) return;
+
+		let tmpHandleType = pTarget.getAttribute('data-handle-type');
+		if (!tmpHandleType || !tmpHandleType.startsWith('bezier-handle-')) return;
+
+		let tmpIndex = parseInt(tmpHandleType.replace('bezier-handle-', ''), 10);
+		if (isNaN(tmpIndex)) return;
+
+		this._FlowView.removeConnectionHandle(tmpConnectionHash, tmpIndex);
+	}
+
 	// ---- Line Mode Toggling ----
 
 	_toggleConnectionLineMode(pConnectionHash)
@@ -615,6 +772,7 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		// Reset handle positions when switching modes
 		tmpConnection.Data.HandleCustomized = false;
+		tmpConnection.Data.BezierHandles = [];
 		tmpConnection.Data.BezierHandleX = null;
 		tmpConnection.Data.BezierHandleY = null;
 		tmpConnection.Data.OrthoCorner1X = null;