pict-section-flow 0.0.1 → 0.0.2

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

@@ -0,0 +1,72 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictProvider-Flow-PanelChrome
+ *
+ * Template-based provider for creating the panel chrome (the foreignObject
+ * wrapper, title bar, close button, and body container) for properties panels.
+ *
+ * Replaces the raw DOM API approach with a configuration template
+ * (Flow-PanelChrome-Template) registered in the FlowView's template set.
+ */
+class PictProviderFlowPanelChrome extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictProviderFlowPanelChrome';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Create a foreignObject containing the panel chrome and empty body container.
+	 *
+	 * Uses the Flow-PanelChrome-Template registered in the FlowView configuration
+	 * to render the inner HTML (title bar, close button, body container), then
+	 * attaches event isolation listeners so pointer and wheel events inside the
+	 * panel body do not propagate to the SVG interaction layer.
+	 *
+	 * @param {Object} pPanelData - Panel data from OpenPanels (Hash, NodeHash, X, Y, Width, Height, Title)
+	 * @param {SVGGElement} pPanelsLayer - The SVG <g> for panel foreignObjects
+	 * @returns {HTMLDivElement} The panel body container element for content rendering
+	 */
+	createPanelForeignObject(pPanelData, pPanelsLayer)
+	{
+		let tmpSVGHelper = this._FlowView._SVGHelperProvider;
+
+		// Create the SVG foreignObject wrapper
+		let tmpFO = tmpSVGHelper.createSVGElement('foreignObject');
+		tmpFO.setAttribute('class', 'pict-flow-panel-foreign-object');
+		tmpFO.setAttribute('data-panel-hash', pPanelData.Hash);
+		tmpFO.setAttribute('data-node-hash', pPanelData.NodeHash);
+		tmpFO.setAttribute('x', String(pPanelData.X));
+		tmpFO.setAttribute('y', String(pPanelData.Y));
+		tmpFO.setAttribute('width', String(pPanelData.Width));
+		tmpFO.setAttribute('height', String(pPanelData.Height));
+
+		// Render the panel chrome from the configuration template
+		let tmpPict = this._FlowView.pict || this._FlowView.fable;
+		let tmpTitle = pPanelData.Title || 'Properties';
+		let tmpChromeHTML = tmpPict.parseTemplateByHash('Flow-PanelChrome-Template',
+			{ Hash: pPanelData.Hash, Title: tmpTitle });
+
+		tmpFO.innerHTML = tmpChromeHTML;
+
+		// 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)
+		{
+			tmpBody.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
+			tmpBody.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
+		}
+
+		pPanelsLayer.appendChild(tmpFO);
+
+		return tmpBody;
+	}
+}
+
+module.exports = PictProviderFlowPanelChrome;

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

@@ -0,0 +1,30 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictProvider-Flow-SVGHelpers
+ *
+ * Shared SVG element creation utility used by all flow components
+ * that need to create SVG namespace elements (nodes, connections, tethers).
+ */
+class PictProviderFlowSVGHelpers extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictProviderFlowSVGHelpers';
+	}
+
+	/**
+	 * Create an SVG namespace element.
+	 *
+	 * @param {string} pTagName - The SVG element tag name (e.g., 'path', 'circle', 'g', 'rect', 'text')
+	 * @returns {SVGElement}
+	 */
+	createSVGElement(pTagName)
+	{
+		return document.createElementNS('http://www.w3.org/2000/svg', pTagName);
+	}
+}
+
+module.exports = PictProviderFlowSVGHelpers;

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

@@ -12,17 +12,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 	}
 
 	/**
-	 * Create an SVG namespace element
-	 * @param {string} pTagName
-	 * @returns {SVGElement}
-	 */
-	_createSVGElement(pTagName)
-	{
-		return document.createElementNS('http://www.w3.org/2000/svg', pTagName);
-	}
-
-	/**
-	 * Render a connection as an SVG path with hit area
+	 * Render a connection as an SVG path with hit area and optional handles.
 	 * @param {Object} pConnection - The connection data
 	 * @param {SVGGElement} pConnectionsLayer - The SVG group to append to
 	 * @param {boolean} pIsSelected - Whether this connection is selected
@@ -36,11 +26,34 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 		if (!tmpSourcePos || !tmpTargetPos) return;
 
-		let tmpPath = this._generateDirectionalPath(tmpSourcePos, tmpTargetPos);
+		let tmpData = pConnection.Data || {};
+		let tmpLineMode = tmpData.LineMode || 'bezier';
+		let tmpPath;
+
+		if (tmpLineMode === 'orthogonal')
+		{
+			let tmpCorners = null;
+			if (tmpData.HandleCustomized && tmpData.OrthoCorner1X != null)
+			{
+				tmpCorners =
+				{
+					corner1: { x: tmpData.OrthoCorner1X, y: tmpData.OrthoCorner1Y },
+					corner2: { x: tmpData.OrthoCorner2X, y: tmpData.OrthoCorner2Y }
+				};
+			}
+			tmpPath = this._generateOrthogonalPath(tmpSourcePos, tmpTargetPos, tmpCorners, tmpData.OrthoMidOffset || 0);
+		}
+		else
+		{
+			let tmpHandleX = (tmpData.HandleCustomized && tmpData.BezierHandleX != null) ? tmpData.BezierHandleX : null;
+			let tmpHandleY = (tmpData.HandleCustomized && tmpData.BezierHandleY != null) ? tmpData.BezierHandleY : null;
+			tmpPath = this._generateBezierPathWithHandle(tmpSourcePos, tmpTargetPos, tmpHandleX, tmpHandleY);
+		}
+
 		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
 
 		// Hit area (wider invisible path for easier selection)
-		let tmpHitArea = this._createSVGElement('path');
+		let tmpHitArea = this._FlowView._SVGHelperProvider.createSVGElement('path');
 		tmpHitArea.setAttribute('class', 'pict-flow-connection-hitarea');
 		tmpHitArea.setAttribute('d', tmpPath);
 		tmpHitArea.setAttribute('data-connection-hash', pConnection.Hash);
@@ -48,7 +61,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		pConnectionsLayer.appendChild(tmpHitArea);
 
 		// Visible connection path
-		let tmpPathElement = this._createSVGElement('path');
+		let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
 		tmpPathElement.setAttribute('class', `pict-flow-connection ${pIsSelected ? 'selected' : ''}`);
 		tmpPathElement.setAttribute('d', tmpPath);
 		tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
@@ -65,77 +78,47 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		}
 
 		pConnectionsLayer.appendChild(tmpPathElement);
-	}
 
-	/**
-	 * Get the outward unit direction vector for a given port side.
-	 *
-	 * @param {string} pSide - 'left', 'right', 'top', or 'bottom'
-	 * @returns {{dx: number, dy: number}}
-	 */
-	_sideDirection(pSide)
-	{
-		switch (pSide)
+		// Render drag handles when selected
+		if (pIsSelected)
 		{
-			case 'left':   return { dx: -1, dy:  0 };
-			case 'right':  return { dx:  1, dy:  0 };
-			case 'top':    return { dx:  0, dy: -1 };
-			case 'bottom': return { dx:  0, dy:  1 };
-			default:       return { dx:  1, dy:  0 };
+			this._renderHandles(pConnection, pConnectionsLayer, tmpSourcePos, tmpTargetPos);
 		}
 	}
 
 	/**
-	 * Generate a direction-aware path between two ports.
-	 *
-	 * The path is composed of three segments:
-	 *   1. A short straight "departure" segment leaving the source port
-	 *      in its outward direction.
-	 *   2. A cubic bezier curve connecting the departure point to an
-	 *      "approach" point near the target port.
-	 *   3. A short straight "approach" segment arriving at the target
-	 *      port aligned with its inward direction.
+	 * Compute the departure and approach points plus control points
+	 * for a direction-aware bezier between two ports.
 	 *
-	 * The straight approach segment at the end ensures the arrowhead
-	 * marker is always oriented correctly (pointing straight into the
-	 * port) regardless of the overall curve shape.
+	 * This extracts the intermediate geometry from _generateDirectionalPath
+	 * so it can be reused by _getAutoMidpoint and _generateBezierPathWithHandle.
 	 *
-	 * @param {{x: number, y: number, side: string}} pStart - Start port position + side
-	 * @param {{x: number, y: number, side: string}} pEnd   - End port position + side
-	 * @returns {string} SVG path d attribute
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @returns {{departX, departY, approachX, approachY, cp1X, cp1Y, cp2X, cp2Y, startDir, endDir}}
 	 */
-	_generateDirectionalPath(pStart, pEnd)
+	_computeDirectionalGeometry(pStart, pEnd)
 	{
-		let tmpStartDir = this._sideDirection(pStart.side || 'right');
-		let tmpEndDir   = this._sideDirection(pEnd.side   || 'left');
+		let tmpStartDir = this._FlowView._GeometryProvider.sideDirection(pStart.side || 'right');
+		let tmpEndDir   = this._FlowView._GeometryProvider.sideDirection(pEnd.side   || 'left');
 
-		// Length of the straight segments leaving/entering each port.
-		// The arrowhead is ~20px (10 marker * 2 stroke-width), so
-		// the approach segment needs to be at least that long to look
-		// clean. We use 20px as a minimum.
 		let tmpStraightLen = 20;
 
-		// Departure point: offset from source port along its outward direction
 		let tmpDepartX = pStart.x + tmpStartDir.dx * tmpStraightLen;
 		let tmpDepartY = pStart.y + tmpStartDir.dy * tmpStraightLen;
 
-		// Approach point: offset from target port along its OUTWARD direction
-		// (i.e. away from the port, so the line segment goes inward toward the port)
 		let tmpApproachX = pEnd.x + tmpEndDir.dx * tmpStraightLen;
 		let tmpApproachY = pEnd.y + tmpEndDir.dy * tmpStraightLen;
 
-		// Now compute the bezier between the departure and approach points
 		let tmpDX = Math.abs(tmpApproachX - tmpDepartX);
 		let tmpDY = Math.abs(tmpApproachY - tmpDepartY);
 		let tmpDist = Math.sqrt(tmpDX * tmpDX + tmpDY * tmpDY);
 
-		// Base offset for control points
 		let tmpBaseOffset = Math.max(Math.min(tmpDist * 0.4, 180), 30);
 
 		let tmpSameAxis = (tmpStartDir.dx !== 0 && tmpEndDir.dx !== 0) ||
 		                  (tmpStartDir.dy !== 0 && tmpEndDir.dy !== 0);
 
-		// Check if the ports are "facing each other" on the same axis
 		let tmpFacingEachOther = false;
 		if (tmpSameAxis)
 		{
@@ -173,18 +156,293 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpCurveOffset = Math.max(tmpBaseOffset * 0.8, 40);
 		}
 
-		// Control points extend outward from the departure/approach points
 		let tmpCP1X = tmpDepartX + tmpStartDir.dx * tmpCurveOffset;
 		let tmpCP1Y = tmpDepartY + tmpStartDir.dy * tmpCurveOffset;
 		let tmpCP2X = tmpApproachX + tmpEndDir.dx * tmpCurveOffset;
 		let tmpCP2Y = tmpApproachY + tmpEndDir.dy * tmpCurveOffset;
 
-		// Build the composite path:
-		// 1. Move to source port
-		// 2. Line to departure point (straight out from port)
-		// 3. Bezier curve to approach point
-		// 4. Line to target port (straight into port — arrowhead aligns here)
-		return `M ${pStart.x} ${pStart.y} L ${tmpDepartX} ${tmpDepartY} C ${tmpCP1X} ${tmpCP1Y}, ${tmpCP2X} ${tmpCP2Y}, ${tmpApproachX} ${tmpApproachY} L ${pEnd.x} ${pEnd.y}`;
+		return {
+			departX: tmpDepartX, departY: tmpDepartY,
+			approachX: tmpApproachX, approachY: tmpApproachY,
+			cp1X: tmpCP1X, cp1Y: tmpCP1Y,
+			cp2X: tmpCP2X, cp2Y: tmpCP2Y,
+			startDir: tmpStartDir, endDir: tmpEndDir
+		};
+	}
+
+	/**
+	 * Generate a direction-aware path between two ports.
+	 *
+	 * The path is composed of three segments:
+	 *   1. A short straight "departure" segment leaving the source port
+	 *      in its outward direction.
+	 *   2. A cubic bezier curve connecting the departure point to an
+	 *      "approach" point near the target port.
+	 *   3. A short straight "approach" segment arriving at the target
+	 *      port aligned with its inward direction.
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart - Start port position + side
+	 * @param {{x: number, y: number, side: string}} pEnd   - End port position + side
+	 * @returns {string} SVG path d attribute
+	 */
+	_generateDirectionalPath(pStart, pEnd)
+	{
+		let tmpGeo = this._computeDirectionalGeometry(pStart, pEnd);
+
+		return this._FlowView._PathGenerator.buildBezierPathString(
+			{ x: pStart.x, y: pStart.y },
+			{ x: tmpGeo.departX, y: tmpGeo.departY },
+			{ x: tmpGeo.cp1X, y: tmpGeo.cp1Y },
+			{ x: tmpGeo.cp2X, y: tmpGeo.cp2Y },
+			{ x: tmpGeo.approachX, y: tmpGeo.approachY },
+			{ x: pEnd.x, y: pEnd.y }
+		);
+	}
+
+	/**
+	 * Generate a bezier path with an optional user-controlled midpoint handle.
+	 *
+	 * If handle is null, uses the standard auto-calculated bezier.
+	 * If handle is set, splits into two cubic bezier segments passing
+	 * through the handle point for a smooth S-curve.
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @param {number|null} pHandleX
+	 * @param {number|null} pHandleY
+	 * @returns {string} SVG path d attribute
+	 */
+	_generateBezierPathWithHandle(pStart, pEnd, pHandleX, pHandleY)
+	{
+		if (pHandleX == null || pHandleY == null)
+		{
+			return this._generateDirectionalPath(pStart, pEnd);
+		}
+
+		let tmpGeo = this._computeDirectionalGeometry(pStart, pEnd);
+
+		// Split into two cubic bezier segments through the handle point.
+		// First segment: depart -> handle
+		// Second segment: handle -> approach
+		// Control points are computed to ensure smooth tangent at the handle.
+		let tmpCP1aX = tmpGeo.departX + tmpGeo.startDir.dx * ((Math.abs(pHandleX - tmpGeo.departX) + Math.abs(pHandleY - tmpGeo.departY)) * 0.4);
+		let tmpCP1aY = tmpGeo.departY + tmpGeo.startDir.dy * ((Math.abs(pHandleX - tmpGeo.departX) + Math.abs(pHandleY - tmpGeo.departY)) * 0.4);
+
+		// The tangent at the handle should be smooth: the control points on
+		// either side of the handle should be collinear through it.
+		// Use the direction from depart to approach as the tangent direction.
+		let tmpTangentX = tmpGeo.approachX - tmpGeo.departX;
+		let tmpTangentY = tmpGeo.approachY - tmpGeo.departY;
+		let tmpTangentLen = Math.sqrt(tmpTangentX * tmpTangentX + tmpTangentY * tmpTangentY);
+		if (tmpTangentLen < 1) tmpTangentLen = 1;
+		let tmpTangentNX = tmpTangentX / tmpTangentLen;
+		let tmpTangentNY = tmpTangentY / tmpTangentLen;
+
+		let tmpTangentScale = tmpTangentLen * 0.2;
+
+		let tmpCP1bX = pHandleX - tmpTangentNX * tmpTangentScale;
+		let tmpCP1bY = pHandleY - tmpTangentNY * tmpTangentScale;
+		let tmpCP2aX = pHandleX + tmpTangentNX * tmpTangentScale;
+		let tmpCP2aY = pHandleY + tmpTangentNY * tmpTangentScale;
+
+		let tmpCP2bX = tmpGeo.approachX + tmpGeo.endDir.dx * ((Math.abs(pHandleX - tmpGeo.approachX) + Math.abs(pHandleY - tmpGeo.approachY)) * 0.4);
+		let tmpCP2bY = tmpGeo.approachY + tmpGeo.endDir.dy * ((Math.abs(pHandleX - tmpGeo.approachX) + Math.abs(pHandleY - tmpGeo.approachY)) * 0.4);
+
+		return this._FlowView._PathGenerator.buildSplitBezierPathString(
+			{ x: pStart.x, y: pStart.y },
+			{ x: tmpGeo.departX, y: tmpGeo.departY },
+			{ x: tmpCP1aX, y: tmpCP1aY },
+			{ x: tmpCP1bX, y: tmpCP1bY },
+			{ x: pHandleX, y: pHandleY },
+			{ x: tmpCP2aX, y: tmpCP2aY },
+			{ x: tmpCP2bX, y: tmpCP2bY },
+			{ x: tmpGeo.approachX, y: tmpGeo.approachY },
+			{ x: pEnd.x, y: pEnd.y }
+		);
+	}
+
+	/**
+	 * Get the auto-calculated midpoint of the default bezier curve between two ports.
+	 * Evaluates the cubic bezier at t=0.5.
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @returns {{x: number, y: number}}
+	 */
+	getAutoMidpoint(pStart, pEnd)
+	{
+		let tmpGeo = this._computeDirectionalGeometry(pStart, pEnd);
+
+		return this._FlowView._PathGenerator.evaluateCubicBezier(
+			{ x: tmpGeo.departX, y: tmpGeo.departY },
+			{ x: tmpGeo.cp1X, y: tmpGeo.cp1Y },
+			{ x: tmpGeo.cp2X, y: tmpGeo.cp2Y },
+			{ x: tmpGeo.approachX, y: tmpGeo.approachY },
+			0.5
+		);
+	}
+
+	/**
+	 * Generate an orthogonal (90-degree angles only) path between two ports.
+	 *
+	 * Path format: M start L depart L corner1 L corner2 L approach L end
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @param {Object|null} pCorners - { corner1: {x,y}, corner2: {x,y} } or null for auto
+	 * @param {number} pMidOffset - Offset for the auto-calculated corridor position
+	 * @returns {string} SVG path d attribute
+	 */
+	_generateOrthogonalPath(pStart, pEnd, pCorners, pMidOffset)
+	{
+		let tmpStartDir = this._FlowView._GeometryProvider.sideDirection(pStart.side || 'right');
+		let tmpEndDir   = this._FlowView._GeometryProvider.sideDirection(pEnd.side   || 'left');
+
+		let tmpStraightLen = 20;
+
+		let tmpDepartX = pStart.x + tmpStartDir.dx * tmpStraightLen;
+		let tmpDepartY = pStart.y + tmpStartDir.dy * tmpStraightLen;
+
+		let tmpApproachX = pEnd.x + tmpEndDir.dx * tmpStraightLen;
+		let tmpApproachY = pEnd.y + tmpEndDir.dy * tmpStraightLen;
+
+		let tmpCorner1, tmpCorner2;
+
+		if (pCorners && pCorners.corner1 && pCorners.corner2)
+		{
+			tmpCorner1 = pCorners.corner1;
+			tmpCorner2 = pCorners.corner2;
+		}
+		else
+		{
+			let tmpAutoCorners = this._FlowView._PathGenerator.computeAutoOrthogonalCorners(
+				tmpDepartX, tmpDepartY,
+				tmpApproachX, tmpApproachY,
+				tmpStartDir, tmpEndDir,
+				pMidOffset || 0
+			);
+			tmpCorner1 = tmpAutoCorners.corner1;
+			tmpCorner2 = tmpAutoCorners.corner2;
+		}
+
+		return this._FlowView._PathGenerator.buildOrthogonalPathString(
+			{ x: pStart.x, y: pStart.y },
+			{ x: tmpDepartX, y: tmpDepartY },
+			tmpCorner1,
+			tmpCorner2,
+			{ x: tmpApproachX, y: tmpApproachY },
+			{ x: pEnd.x, y: pEnd.y }
+		);
+	}
+
+	/**
+	 * Get the full orthogonal geometry for a connection (for handle positioning).
+	 *
+	 * @param {{x: number, y: number, side: string}} pStart
+	 * @param {{x: number, y: number, side: string}} pEnd
+	 * @param {Object} pData - Connection.Data
+	 * @returns {{corner1: {x,y}, corner2: {x,y}, midpoint: {x,y}}}
+	 */
+	getOrthogonalGeometry(pStart, pEnd, pData)
+	{
+		let tmpStartDir = this._FlowView._GeometryProvider.sideDirection(pStart.side || 'right');
+		let tmpEndDir   = this._FlowView._GeometryProvider.sideDirection(pEnd.side   || 'left');
+
+		let tmpStraightLen = 20;
+
+		let tmpDepartX = pStart.x + tmpStartDir.dx * tmpStraightLen;
+		let tmpDepartY = pStart.y + tmpStartDir.dy * tmpStraightLen;
+		let tmpApproachX = pEnd.x + tmpEndDir.dx * tmpStraightLen;
+		let tmpApproachY = pEnd.y + tmpEndDir.dy * tmpStraightLen;
+
+		if (pData && pData.HandleCustomized && pData.OrthoCorner1X != null)
+		{
+			let tmpCorner1 = { x: pData.OrthoCorner1X, y: pData.OrthoCorner1Y };
+			let tmpCorner2 = { x: pData.OrthoCorner2X, y: pData.OrthoCorner2Y };
+			let tmpMidpoint =
+			{
+				x: (tmpCorner1.x + tmpCorner2.x) / 2,
+				y: (tmpCorner1.y + tmpCorner2.y) / 2
+			};
+			return { corner1: tmpCorner1, corner2: tmpCorner2, midpoint: tmpMidpoint };
+		}
+
+		return this._FlowView._PathGenerator.computeAutoOrthogonalCorners(
+			tmpDepartX, tmpDepartY,
+			tmpApproachX, tmpApproachY,
+			tmpStartDir, tmpEndDir,
+			(pData && pData.OrthoMidOffset) || 0
+		);
+	}
+
+	/**
+	 * Render drag handles for the selected connection.
+	 *
+	 * @param {Object} pConnection
+	 * @param {SVGGElement} pLayer
+	 * @param {{x, y, side}} pStart - Source port position
+	 * @param {{x, y, side}} pEnd   - Target port position
+	 */
+	_renderHandles(pConnection, pLayer, pStart, pEnd)
+	{
+		let tmpData = pConnection.Data || {};
+		let tmpLineMode = tmpData.LineMode || 'bezier';
+
+		if (tmpLineMode === 'orthogonal')
+		{
+			let tmpGeometry = this.getOrthogonalGeometry(pStart, pEnd, tmpData);
+
+			// Corner 1 handle
+			this._createHandle(pLayer, pConnection.Hash, 'ortho-corner1',
+				tmpGeometry.corner1.x, tmpGeometry.corner1.y, 'pict-flow-connection-handle');
+
+			// Midpoint handle (between corners)
+			this._createHandle(pLayer, pConnection.Hash, 'ortho-midpoint',
+				tmpGeometry.midpoint.x, tmpGeometry.midpoint.y, 'pict-flow-connection-handle-midpoint');
+
+			// Corner 2 handle
+			this._createHandle(pLayer, pConnection.Hash, 'ortho-corner2',
+				tmpGeometry.corner2.x, tmpGeometry.corner2.y, 'pict-flow-connection-handle');
+		}
+		else
+		{
+			// Bezier midpoint handle
+			let tmpMidpoint;
+			if (tmpData.HandleCustomized && tmpData.BezierHandleX != null)
+			{
+				tmpMidpoint = { x: tmpData.BezierHandleX, y: tmpData.BezierHandleY };
+			}
+			else
+			{
+				tmpMidpoint = this.getAutoMidpoint(pStart, pEnd);
+			}
+
+			this._createHandle(pLayer, pConnection.Hash, 'bezier-midpoint',
+				tmpMidpoint.x, tmpMidpoint.y, 'pict-flow-connection-handle');
+		}
+	}
+
+	/**
+	 * Create a single SVG circle handle element.
+	 *
+	 * @param {SVGGElement} pLayer
+	 * @param {string} pConnectionHash
+	 * @param {string} pHandleType
+	 * @param {number} pX
+	 * @param {number} pY
+	 * @param {string} pClassName
+	 */
+	_createHandle(pLayer, pConnectionHash, pHandleType, pX, pY, pClassName)
+	{
+		let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+		tmpCircle.setAttribute('class', pClassName);
+		tmpCircle.setAttribute('cx', String(pX));
+		tmpCircle.setAttribute('cy', String(pY));
+		tmpCircle.setAttribute('r', '6');
+		tmpCircle.setAttribute('data-element-type', 'connection-handle');
+		tmpCircle.setAttribute('data-connection-hash', pConnectionHash);
+		tmpCircle.setAttribute('data-handle-type', pHandleType);
+		pLayer.appendChild(tmpCircle);
 	}
 
 	/**
@@ -195,7 +453,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 	 */
 	_generateBezierPath(pStart, pEnd)
 	{
-		// During drag operations we may not have side info; default to right→left
+		// During drag operations we may not have side info; default to right->left
 		let tmpStart = { x: pStart.x, y: pStart.y, side: pStart.side || 'right' };
 		let tmpEnd   = { x: pEnd.x,   y: pEnd.y,   side: pEnd.side   || 'left' };
 		return this._generateDirectionalPath(tmpStart, tmpEnd);
@@ -218,7 +476,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			{ x: pEndX,   y: pEndY,   side: 'left' }
 		);
 
-		let tmpPathElement = this._createSVGElement('path');
+		let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
 		tmpPathElement.setAttribute('class', 'pict-flow-drag-connection');
 		tmpPathElement.setAttribute('d', tmpPath);
 		pLayer.appendChild(tmpPathElement);