pict-section-flow 0.0.10 → 0.0.13

package/source/providers/PictProvider-Flow-ConnectorShapes.js

@@ -320,6 +320,30 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 		return tmpElement;
 	}
 
+	/**
+	 * Create a complete drag handle element with all data attributes set and
+	 * append it to the given layer.  Unifies the handle-creation logic that
+	 * was previously duplicated in ConnectionRenderer and TetherService.
+	 *
+	 * @param {SVGGElement} pLayer - The SVG group to append the handle to
+	 * @param {string} pOwnerHash - Connection hash or panel hash
+	 * @param {string} pHandleType - e.g. 'ortho-corner1', 'bezier-midpoint'
+	 * @param {number} pX
+	 * @param {number} pY
+	 * @param {string} pShapeKey - Shape config key ('connection-handle', 'tether-handle-midpoint', etc.)
+	 * @param {string} pElementType - data-element-type value ('connection-handle' or 'tether-handle')
+	 * @param {string} pOwnerAttrName - data attribute name for the owner ('data-connection-hash' or 'data-panel-hash')
+	 * @returns {SVGElement}
+	 */
+	createFullHandle(pLayer, pOwnerHash, pHandleType, pX, pY, pShapeKey, pElementType, pOwnerAttrName)
+	{
+		let tmpHandle = this.createHandleElement(pOwnerHash, pHandleType, pX, pY, pShapeKey);
+		tmpHandle.setAttribute('data-element-type', pElementType);
+		tmpHandle.setAttribute(pOwnerAttrName, pOwnerHash);
+		pLayer.appendChild(tmpHandle);
+		return tmpHandle;
+	}
+
 	/**
 	 * Create a temporary drag connection path element.
 	 * @param {string} pPath - The SVG path d-string

package/source/providers/PictProvider-Flow-Geometry.js

@@ -114,9 +114,12 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 	 * Calculate a port's local position relative to node origin.
 	 *
 	 * Supports 12 positions (3 zones per edge).  For left/right edges,
-	 * the body area below the title bar is divided into three vertical zones
-	 * (start/middle/end).  For top/bottom edges, the full width is divided
-	 * into three horizontal zones.
+	 * the body area below the title bar is divided into vertical zones.
+	 * For top/bottom edges, the full width is divided into horizontal zones.
+	 *
+	 * When pPortCountsBySide is provided, zone fractions are computed
+	 * proportionally based on actual port counts (adaptive zones).
+	 * Otherwise, fixed 1/3 zones are used for backward compatibility.
 	 *
 	 * Multiple ports sharing the same Side value distribute evenly within
 	 * their zone.
@@ -127,12 +130,21 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 	 * @param {number} pWidth - Node width
 	 * @param {number} pHeight - Node height
 	 * @param {number} pTitleBarHeight - Height of the node title bar
+	 * @param {Object} [pPortCountsBySide] - Optional map of Side → port count
+	 *        for all ports on the node.  Enables adaptive zone sizing.
 	 * @returns {{x: number, y: number}}
 	 */
-	getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pTitleBarHeight)
+	getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pTitleBarHeight, pPortCountsBySide)
 	{
 		let tmpEdge = this.getEdgeFromSide(pSide);
-		let tmpZone = this._getZoneFromSide(pSide);
+		let tmpZone = pPortCountsBySide
+			? this._computeAdaptiveZone(pSide, pPortCountsBySide)
+			: this._getZoneFromSide(pSide);
+
+		// Use the fixed zone to decide alignment intent (start/center/end)
+		// because adaptive zones shift boundaries when neighbouring zones
+		// are empty, which would break alignment decisions.
+		let tmpFixedZone = this._getZoneFromSide(pSide);
 
 		// Minimum spacing between port centers (px)
 		let tmpMinSpacing = 16;
@@ -142,18 +154,49 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		// and always leave a visible gap above the node bottom edge.
 		let tmpBottomPad = 16;
 
+		// Determine alignment from the fixed zone position:
+		//   start zone  (0.000 – 0.333) → start-align (offset 0)
+		//   middle zone (0.333 – 0.667) → center
+		//   end zone    (0.667 – 1.000) → end-align
+		let tmpAlignment = 'start';
+		if (tmpFixedZone.start >= 0.5)
+		{
+			tmpAlignment = 'end';
+		}
+		else if (tmpFixedZone.start >= 0.17)
+		{
+			tmpAlignment = 'center';
+		}
+
 		if (tmpEdge === 'left' || tmpEdge === 'right')
 		{
 			let tmpX = (tmpEdge === 'left') ? 0 : pWidth;
 			let tmpBodyHeight = pHeight - pTitleBarHeight - tmpBottomPad;
 			let tmpZoneStart = pTitleBarHeight + tmpBodyHeight * tmpZone.start;
 			let tmpZoneHeight = tmpBodyHeight * (tmpZone.end - tmpZone.start);
-			let tmpSpacing = tmpZoneHeight / (pTotal + 1);
-			if (tmpSpacing < tmpMinSpacing)
+
+			// Use fixed spacing so port gaps stay consistent across cards
+			// even when one edge drives the card height beyond what the
+			// other needs.
+			let tmpSpacing = tmpMinSpacing;
+			let tmpGroupHeight = tmpSpacing * (pTotal + 1);
+			let tmpSlack = tmpZoneHeight - tmpGroupHeight;
+			if (tmpSlack < 0)
+			{
+				tmpSlack = 0;
+			}
+
+			let tmpAlignOffset = 0;
+			if (tmpAlignment === 'end')
 			{
-				tmpSpacing = tmpMinSpacing;
+				tmpAlignOffset = tmpSlack;
 			}
-			let tmpY = tmpZoneStart + tmpSpacing * (pIndex + 1);
+			else if (tmpAlignment === 'center')
+			{
+				tmpAlignOffset = tmpSlack / 2;
+			}
+
+			let tmpY = tmpZoneStart + tmpAlignOffset + tmpSpacing * (pIndex + 1);
 			return { x: tmpX, y: tmpY };
 		}
 
@@ -161,12 +204,26 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		let tmpY = (tmpEdge === 'top') ? 0 : pHeight;
 		let tmpZoneStart = pWidth * tmpZone.start;
 		let tmpZoneWidth = pWidth * (tmpZone.end - tmpZone.start);
-		let tmpSpacing = tmpZoneWidth / (pTotal + 1);
-		if (tmpSpacing < tmpMinSpacing)
+
+		let tmpSpacing = tmpMinSpacing;
+		let tmpGroupWidth = tmpSpacing * (pTotal + 1);
+		let tmpSlack = tmpZoneWidth - tmpGroupWidth;
+		if (tmpSlack < 0)
 		{
-			tmpSpacing = tmpMinSpacing;
+			tmpSlack = 0;
 		}
-		let tmpX = tmpZoneStart + tmpSpacing * (pIndex + 1);
+
+		let tmpAlignOffset = 0;
+		if (tmpAlignment === 'end')
+		{
+			tmpAlignOffset = tmpSlack;
+		}
+		else if (tmpAlignment === 'center')
+		{
+			tmpAlignOffset = tmpSlack / 2;
+		}
+
+		let tmpX = tmpZoneStart + tmpAlignOffset + tmpSpacing * (pIndex + 1);
 		return { x: tmpX, y: tmpY };
 	}
 
@@ -178,6 +235,8 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 	 *   middle: 0.333 — 0.667
 	 *   end:    0.667 — 1.0
 	 *
+	 * Used as fallback when adaptive zones are not available.
+	 *
 	 * @param {string} pSide
 	 * @returns {{start: number, end: number}}
 	 */
@@ -209,13 +268,116 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 			default:             return { start: 0.0,   end: 1.0 };
 		}
 	}
+
+	/**
+	 * Get the three zone Side keys for a given edge, in order.
+	 *
+	 * @param {string} pEdge - 'left', 'right', 'top', or 'bottom'
+	 * @returns {Array<string>} Three Side keys in start-to-end order
+	 */
+	_getZoneKeysForEdge(pEdge)
+	{
+		switch (pEdge)
+		{
+			case 'left':   return ['left-top', 'left', 'left-bottom'];
+			case 'right':  return ['right-top', 'right', 'right-bottom'];
+			case 'top':    return ['top-left', 'top', 'top-right'];
+			case 'bottom': return ['bottom-left', 'bottom', 'bottom-right'];
+			default:       return ['right-top', 'right', 'right-bottom'];
+		}
+	}
+
+	/**
+	 * Compute an adaptive zone fraction for a Side value based on the
+	 * actual port distribution across all zones on the same edge.
+	 *
+	 * Instead of fixed 1/3 splits, zones are sized proportionally to the
+	 * space each zone needs (minSpacing * (portCount + 1)).  Zones with
+	 * zero ports collapse to zero, giving occupied zones more room.
+	 *
+	 * @param {string} pSide - The Side value to compute a zone for
+	 * @param {Object} pPortCountsBySide - Map of Side → number of ports
+	 * @returns {{start: number, end: number}}
+	 */
+	_computeAdaptiveZone(pSide, pPortCountsBySide)
+	{
+		let tmpEdge = this.getEdgeFromSide(pSide);
+		let tmpZoneKeys = this._getZoneKeysForEdge(tmpEdge);
+
+		let tmpMinSpacing = 16;
+
+		// Compute the space each zone needs: minSpacing * (count + 1)
+		// The +1 provides padding at both ends of the zone.
+		let tmpTotalSpace = 0;
+		let tmpSpaceByZone = {};
+		for (let i = 0; i < tmpZoneKeys.length; i++)
+		{
+			let tmpKey = tmpZoneKeys[i];
+			let tmpCount = pPortCountsBySide[tmpKey] || 0;
+			let tmpSpace = (tmpCount > 0) ? (tmpMinSpacing * (tmpCount + 1)) : 0;
+			tmpSpaceByZone[tmpKey] = tmpSpace;
+			tmpTotalSpace += tmpSpace;
+		}
+
+		// If no ports on this edge at all, fall back to fixed zones
+		if (tmpTotalSpace === 0)
+		{
+			return this._getZoneFromSide(pSide);
+		}
+
+		// Compute proportional start/end for the requested zone
+		let tmpCumulativeStart = 0;
+		for (let i = 0; i < tmpZoneKeys.length; i++)
+		{
+			let tmpKey = tmpZoneKeys[i];
+			let tmpFraction = tmpSpaceByZone[tmpKey] / tmpTotalSpace;
+			if (tmpKey === pSide)
+			{
+				return { start: tmpCumulativeStart, end: tmpCumulativeStart + tmpFraction };
+			}
+			tmpCumulativeStart += tmpFraction;
+		}
+
+		// Should not reach here; fall back to fixed zones
+		return this._getZoneFromSide(pSide);
+	}
+
+	/**
+	 * Build a map of Side → port count from an array of port objects.
+	 *
+	 * Convenience method for callers that need to pass port counts
+	 * to getPortLocalPosition or computeMinimumNodeHeight.
+	 *
+	 * @param {Array} pPorts - Array of port objects with Side, Direction
+	 * @returns {Object} Map of Side value → count
+	 */
+	buildPortCountsBySide(pPorts)
+	{
+		let tmpCounts = {};
+		if (!pPorts || !Array.isArray(pPorts))
+		{
+			return tmpCounts;
+		}
+		for (let i = 0; i < pPorts.length; i++)
+		{
+			let tmpSide = pPorts[i].Side || (pPorts[i].Direction === 'input' ? 'left' : 'right');
+			if (!tmpCounts[tmpSide])
+			{
+				tmpCounts[tmpSide] = 0;
+			}
+			tmpCounts[tmpSide]++;
+		}
+		return tmpCounts;
+	}
+
 	/**
 	 * Compute the minimum node height required so that all ports
 	 * (with their badges) fit within the node boundary.
 	 *
-	 * Uses the same zone system and minimum spacing as getPortLocalPosition.
-	 * For each left/right zone, calculates where the last port would land
-	 * and ensures the node is tall enough to contain it plus badge clearance.
+	 * Uses adaptive zone sizing: instead of assuming each zone gets
+	 * a fixed 1/3 of the body, sums the space needed by all occupied
+	 * zones on each left/right edge.  This produces compact cards
+	 * whose height scales linearly with total port count.
 	 *
 	 * @param {Array} pPorts - Array of port objects with Side, Direction
 	 * @param {number} pTitleBarHeight - Height of the title bar
@@ -229,26 +391,16 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 		}
 
 		let tmpMinSpacing = 16;
-		let tmpBadgeHalfHeight = 6;
 		let tmpBottomPad = 16;
 
 		// Count ports per Side value
-		let tmpCountBySide = {};
-		for (let i = 0; i < pPorts.length; i++)
-		{
-			let tmpSide = pPorts[i].Side || (pPorts[i].Direction === 'input' ? 'left' : 'right');
-			if (!tmpCountBySide[tmpSide])
-			{
-				tmpCountBySide[tmpSide] = 0;
-			}
-			tmpCountBySide[tmpSide]++;
-		}
-
-		let tmpMinHeight = 0;
+		let tmpCountBySide = this.buildPortCountsBySide(pPorts);
 
+		// Sum the space needed per edge (left, right) across all zones.
+		// Each zone needs minSpacing * (count + 1) pixels.
+		let tmpSpacePerEdge = {};
 		for (let tmpSide in tmpCountBySide)
 		{
-			let tmpCount = tmpCountBySide[tmpSide];
 			let tmpEdge = this.getEdgeFromSide(tmpSide);
 
 			// Only left/right edge zones affect required height
@@ -257,16 +409,21 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 				continue;
 			}
 
-			let tmpZone = this._getZoneFromSide(tmpSide);
+			let tmpCount = tmpCountBySide[tmpSide];
+			let tmpZoneSpace = tmpMinSpacing * (tmpCount + 1);
 
-			// With bottomPad reserving space at the bottom:
-			//   bodyHeight = H - titleBar - bottomPad
-			//   lastPortY = titleBar + bodyHeight * zone.start + minSpacing * count
-			//   Need: lastPortY + badgeHalfHeight <= H - bottomPad
-			// Solving for H:
-			//   H >= titleBar + bottomPad + (minSpacing * count + badgeHalfHeight) / (1 - zone.start)
-			let tmpRequired = pTitleBarHeight + tmpBottomPad + (tmpMinSpacing * tmpCount + tmpBadgeHalfHeight) / (tmpZone.end - tmpZone.start);
+			if (!tmpSpacePerEdge[tmpEdge])
+			{
+				tmpSpacePerEdge[tmpEdge] = 0;
+			}
+			tmpSpacePerEdge[tmpEdge] += tmpZoneSpace;
+		}
 
+		// The minimum height is titleBar + bottomPad + max edge space
+		let tmpMinHeight = 0;
+		for (let tmpEdge in tmpSpacePerEdge)
+		{
+			let tmpRequired = pTitleBarHeight + tmpBottomPad + tmpSpacePerEdge[tmpEdge];
 			if (tmpRequired > tmpMinHeight)
 			{
 				tmpMinHeight = tmpRequired;

package/source/providers/PictProvider-Flow-PanelChrome.js

@@ -65,26 +65,28 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 			tmpCloseIcon.textContent = '\u2715';
 		}
 
-		// Attach event isolation to the panel body so pointer/wheel events
-		// inside the panel content do not trigger SVG interactions
-		let tmpBody = tmpFO.querySelector('.pict-flow-panel-body');
-		if (tmpBody)
+		// Attach event isolation to the scrollable content area so
+		// pointer/wheel events inside the panel do not trigger SVG interactions
+		let tmpContent = tmpFO.querySelector('.pict-flow-panel-content');
+		if (tmpContent)
 		{
-			tmpBody.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpBody.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
+			tmpContent.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+			tmpContent.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
 		}
 
-		// Isolate events on the collapsible node properties editor section
-		let tmpNodeProps = tmpFO.querySelector('.pict-flow-panel-node-props');
-		if (tmpNodeProps)
+		// Isolate events on the tab bar
+		let tmpTabbar = tmpFO.querySelector('.pict-flow-panel-tabbar');
+		if (tmpTabbar)
 		{
-			tmpNodeProps.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpNodeProps.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
+			tmpTabbar.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+			tmpTabbar.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
 		}
 
 		pPanelsLayer.appendChild(tmpFO);
 
-		return tmpBody;
+		// Return the properties tab pane as the body container for content rendering
+		let tmpPropertiesPane = tmpFO.querySelector('.pict-flow-panel-tab-pane[data-tab="properties"]');
+		return tmpPropertiesPane;
 	}
 }
 

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

@@ -0,0 +1,263 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-ConnectionHandleManager
+ *
+ * Manages connection handle lifecycle: dragging, adding, removing,
+ * and resetting bezier/orthogonal handles on connections and tethers.
+ *
+ * Extracted from PictView-Flow.js to isolate handle CRUD operations
+ * from the main view.
+ */
+class PictServiceFlowConnectionHandleManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowConnectionHandleManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Update a connection handle position during drag (for real-time feedback).
+	 * @param {string} pConnectionHash
+	 * @param {string} pHandleType - 'bezier-midpoint', 'bezier-handle-N', 'ortho-corner1', 'ortho-corner2', 'ortho-midpoint'
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	updateConnectionHandle(pConnectionHash, pHandleType, pX, pY)
+	{
+		if (!this._FlowView) return;
+
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return;
+
+		if (!tmpConnection.Data) tmpConnection.Data = {};
+		tmpConnection.Data.HandleCustomized = true;
+
+		// Multi-handle bezier: handle type is 'bezier-handle-N'
+		if (pHandleType && pHandleType.startsWith('bezier-handle-'))
+		{
+			let tmpIndex = parseInt(pHandleType.replace('bezier-handle-', ''), 10);
+			if (!isNaN(tmpIndex) && Array.isArray(tmpConnection.Data.BezierHandles)
+				&& tmpIndex < tmpConnection.Data.BezierHandles.length)
+			{
+				tmpConnection.Data.BezierHandles[tmpIndex].x = pX;
+				tmpConnection.Data.BezierHandles[tmpIndex].y = pY;
+			}
+			this._FlowView._renderSingleConnection(pConnectionHash);
+			return;
+		}
+
+		switch (pHandleType)
+		{
+			case 'bezier-midpoint':
+				// Legacy single-handle: migrate to BezierHandles array
+				if (!Array.isArray(tmpConnection.Data.BezierHandles)
+					|| tmpConnection.Data.BezierHandles.length === 0)
+				{
+					tmpConnection.Data.BezierHandles = [{ x: pX, y: pY }];
+				}
+				else
+				{
+					tmpConnection.Data.BezierHandles[0].x = pX;
+					tmpConnection.Data.BezierHandles[0].y = pY;
+				}
+				// Keep legacy fields in sync for backward compat
+				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._FlowView.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
+				let tmpTargetPos = this._FlowView.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
+				if (tmpSourcePos && tmpTargetPos)
+				{
+					let tmpGeom = this._FlowView._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._FlowView._renderSingleConnection(pConnectionHash);
+	}
+
+	/**
+	 * Add a bezier handle to a connection at the specified position.
+	 * The handle is inserted at the correct index based on which
+	 * segment of the curve the click point is closest to.
+	 *
+	 * @param {string} pConnectionHash
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	addConnectionHandle(pConnectionHash, pX, pY)
+	{
+		if (!this._FlowView) return;
+
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return;
+
+		if (!tmpConnection.Data) tmpConnection.Data = {};
+
+		// Ensure BezierHandles array exists (migrate from legacy if needed)
+		if (!Array.isArray(tmpConnection.Data.BezierHandles))
+		{
+			tmpConnection.Data.BezierHandles = [];
+			if (tmpConnection.Data.BezierHandleX != null && tmpConnection.Data.BezierHandleY != null)
+			{
+				tmpConnection.Data.BezierHandles.push({
+					x: tmpConnection.Data.BezierHandleX,
+					y: tmpConnection.Data.BezierHandleY
+				});
+			}
+		}
+
+		// Ensure bezier mode
+		tmpConnection.Data.LineMode = 'bezier';
+
+		let tmpSourcePos = this._FlowView.getPortPosition(tmpConnection.SourceNodeHash, tmpConnection.SourcePortHash);
+		let tmpTargetPos = this._FlowView.getPortPosition(tmpConnection.TargetNodeHash, tmpConnection.TargetPortHash);
+
+		let tmpInsertIndex = 0;
+		if (tmpSourcePos && tmpTargetPos && this._FlowView._ConnectionRenderer)
+		{
+			tmpInsertIndex = this._FlowView._ConnectionRenderer.computeInsertionIndex(
+				tmpConnection.Data.BezierHandles,
+				{ x: pX, y: pY },
+				tmpSourcePos,
+				tmpTargetPos
+			);
+		}
+
+		tmpConnection.Data.BezierHandles.splice(tmpInsertIndex, 0, { x: pX, y: pY });
+		tmpConnection.Data.HandleCustomized = true;
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+	}
+
+	/**
+	 * Remove a bezier handle from a connection by index.
+	 *
+	 * @param {string} pConnectionHash
+	 * @param {number} pIndex - Index in the BezierHandles array
+	 */
+	removeConnectionHandle(pConnectionHash, pIndex)
+	{
+		if (!this._FlowView) return;
+
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection || !tmpConnection.Data) return;
+
+		if (!Array.isArray(tmpConnection.Data.BezierHandles)) return;
+		if (pIndex < 0 || pIndex >= tmpConnection.Data.BezierHandles.length) return;
+
+		tmpConnection.Data.BezierHandles.splice(pIndex, 1);
+
+		if (tmpConnection.Data.BezierHandles.length === 0)
+		{
+			tmpConnection.Data.HandleCustomized = false;
+			tmpConnection.Data.BezierHandleX = null;
+			tmpConnection.Data.BezierHandleY = null;
+		}
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+	}
+
+	/**
+	 * 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)
+	{
+		if (!this._FlowView) return;
+
+		// Reset connection handles
+		for (let i = 0; i < this._FlowView._FlowData.Connections.length; i++)
+		{
+			let tmpConn = this._FlowView._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._FlowView._TetherService)
+		{
+			this._FlowView._TetherService.resetHandlesForNode(this._FlowView._FlowData.OpenPanels, pNodeHash);
+		}
+	}
+
+	/**
+	 * Reset tether handle positions for a specific panel.
+	 * Called when a panel is dragged.
+	 * @param {string} pPanelHash
+	 */
+	resetHandlesForPanel(pPanelHash)
+	{
+		if (!this._FlowView) return;
+
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel) return;
+
+		if (this._FlowView._TetherService)
+		{
+			this._FlowView._TetherService.resetHandlePositions(tmpPanel);
+		}
+	}
+}
+
+module.exports = PictServiceFlowConnectionHandleManager;