pict-section-flow 1.3.0 → 2.0.0

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

@@ -1,5 +1,5 @@
 const libFableServiceProviderBase = require('fable-serviceproviderbase');
-const libPerimeterMath = require('../providers/edges/Edge-PerimeterMath.js');
+const libPerimeterMath = require('pict-provider-graphlayout').Edges.PerimeterMath;
 
 // Chip (port-label badge) geometry — must mirror PortRenderer's badge
 // dimensions exactly so hint paths land on the chip's actual outer
@@ -116,12 +116,13 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 		// Hit area (wider invisible path for easier selection)
 		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpPathElement = null;
 		if (tmpShapeProvider)
 		{
 			let tmpHitArea = tmpShapeProvider.createConnectionHitAreaElement(tmpPath, pConnection.Hash);
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
+			tmpPathElement = tmpShapeProvider.createConnectionPathElement(
 				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
 			if (tmpConnTypeClass)
 			{
@@ -145,7 +146,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpHitArea.setAttribute('data-element-type', 'connection-hitarea');
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
 			tmpPathElement.setAttribute('class', `pict-flow-connection${tmpConnTypeClass} ${pIsSelected ? 'selected' : ''}`);
 			tmpPathElement.setAttribute('d', tmpPath);
 			tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
@@ -160,14 +161,25 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			pConnectionsLayer.appendChild(tmpPathElement);
 		}
 
+		// Per-connection host styling (a moodboard styles its own edges): stroke color / width / dash and
+		// the end markers, applied only when the connection's Data carries them so default (workflow)
+		// connections are untouched. A label, when set, is drawn at the midpoint.
+		let tmpHasMarkers = (typeof tmpData.SourceMarker !== 'undefined' || typeof tmpData.TargetMarker !== 'undefined');
+		this._applyConnectionStyle(tmpPathElement, tmpData, tmpViewIdentifier);
+		this._renderConnectionLabel(pConnection, tmpData, pConnectionsLayer, tmpSourcePos, tmpTargetPos);
+
 		// Render the colored endpoint dot at each end of the connection
 		// into the dedicated endpoints layer (sits *above* the nodes
 		// layer so the dot doesn't get hidden under the card chrome
 		// when an edge theme places it on the node's perimeter).
 		// PortRenderer suppresses its own circle for any port that
-		// participates in a connection — we own the dot here.
+		// participates in a connection — we own the dot here. Skipped when the
+		// connection supplies its own end markers (those own the endpoints).
 		let tmpEndpointsLayer = this._FlowView._EndpointsLayer || pConnectionsLayer;
-		this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		if (!tmpHasMarkers)
+		{
+			this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		}
 
 		// When the resolved attachment differs from the card-defined port
 		// position (e.g. a Perimeter theme moved the dot to the edge of the
@@ -187,6 +199,66 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		}
 	}
 
+	// Apply per-connection host styling to the path element from the connection's Data: StrokeColor,
+	// StrokeWidth, StrokeStyle ('solid' | 'dashed' | 'dotted') and SourceMarker / TargetMarker
+	// ('none' | 'arrow' | 'dot' | 'square'). Each is applied only when present, so connections that do
+	// not carry these keys render exactly as before.
+	_applyConnectionStyle(pPathElement, pData, pViewIdentifier)
+	{
+		if (!pPathElement || !pData || !pPathElement.style) { return; }
+		// Stroke color / width / dash go through inline style, NOT SVG presentation attributes: the
+		// .pict-flow-connection CSS rule sets stroke + stroke-width, and a stylesheet rule beats a
+		// presentation attribute, so an attribute would be silently ignored. Inline style outranks the
+		// stylesheet, so the per-connection appearance wins.
+		if (pData.StrokeColor) { pPathElement.style.stroke = pData.StrokeColor; }
+		if (pData.StrokeWidth) { pPathElement.style.strokeWidth = String(pData.StrokeWidth); }
+		if (pData.StrokeStyle)
+		{
+			pPathElement.style.strokeDasharray = (pData.StrokeStyle === 'dashed') ? '7,5' : ((pData.StrokeStyle === 'dotted') ? '1.5,4' : 'none');
+		}
+		// Markers are not styled by CSS, so attributes are correct (they reference the marker defs).
+		if (typeof pData.TargetMarker !== 'undefined')
+		{
+			let tmpEnd = this._connectionMarkerId(pData.TargetMarker, 'end', pViewIdentifier);
+			if (tmpEnd) { pPathElement.setAttribute('marker-end', 'url(#' + tmpEnd + ')'); }
+			else { pPathElement.removeAttribute('marker-end'); }
+		}
+		if (typeof pData.SourceMarker !== 'undefined')
+		{
+			let tmpStart = this._connectionMarkerId(pData.SourceMarker, 'start', pViewIdentifier);
+			if (tmpStart) { pPathElement.setAttribute('marker-start', 'url(#' + tmpStart + ')'); }
+			else { pPathElement.removeAttribute('marker-start'); }
+		}
+	}
+
+	// Resolve a marker name + end ('start' | 'end') to its SVG marker def id; null for 'none'/unknown.
+	_connectionMarkerId(pMarker, pEnd, pViewIdentifier)
+	{
+		if (pMarker === 'arrow') { return 'flow-marker-arrow-' + pEnd + '-' + pViewIdentifier; }
+		if (pMarker === 'dot') { return 'flow-marker-dot-' + pViewIdentifier; }
+		if (pMarker === 'square') { return 'flow-marker-square-' + pViewIdentifier; }
+		return null;
+	}
+
+	// Draw a connection's label (Data.Label) at the midpoint of its endpoints. A white halo (paint-order
+	// stroke, set in CSS) keeps it legible over the line. Skipped when there is no label.
+	_renderConnectionLabel(pConnection, pData, pLayer, pSourcePos, pTargetPos)
+	{
+		// Render when a Label key is present (even ''), so a host that edits the label in place has an
+		// element to update; a connection with no Label key (a default workflow edge) gets none.
+		if (!pData || typeof pData.Label === 'undefined' || !pSourcePos || !pTargetPos) { return; }
+		if (!this._FlowView._SVGHelperProvider) { return; }
+		let tmpText = this._FlowView._SVGHelperProvider.createSVGElement('text');
+		tmpText.setAttribute('class', 'pict-flow-connection-label');
+		tmpText.setAttribute('x', String((pSourcePos.x + pTargetPos.x) / 2));
+		tmpText.setAttribute('y', String((pSourcePos.y + pTargetPos.y) / 2));
+		tmpText.setAttribute('text-anchor', 'middle');
+		tmpText.setAttribute('dominant-baseline', 'middle');
+		tmpText.setAttribute('data-connection-hash', pConnection.Hash);
+		tmpText.textContent = pData.Label;
+		pLayer.appendChild(tmpText);
+	}
+
 	/**
 	 * Append the colored endpoint dots for both ends of a connection
 	 * onto the destination layer (absolute coords). Reuses

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

@@ -0,0 +1,113 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-CursorManager
+ *
+ * Owns the canvas pointer cursor as a single, intentional concern. The cursor is
+ * a pure function of the interaction state machine (InteractionManager._State)
+ * plus the view mode (read-only, read-only navigation, whether panning is
+ * enabled). It is applied through ONE chokepoint: a `data-flow-cursor` token
+ * attribute on the SVG element, which the CSS maps to a real cursor.
+ *
+ * This replaces the previous approach (a base `cursor: grab` on the SVG plus
+ * `panning` / `connecting` class toggles scattered across the InteractionManager)
+ * so cursor behavior is derived from state rather than maintained by hand at
+ * every interaction site. Element-scoped hover cursors (ports, handles, panel
+ * chrome, toolbar buttons) stay on those elements -- they are correctly scoped
+ * and win for their own element regardless of the canvas cursor.
+ *
+ * To extend: add a state-to-token case in resolveCursor and a CSS rule for the
+ * token. The InteractionManager calls update() on every state transition (via
+ * its _setState), and the view calls it when the mode changes.
+ */
+class PictServiceFlowCursorManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowCursorManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Map an interaction state + mode to a cursor token. Pure: no DOM, no side
+	 * effects, so it is unit testable.
+	 *
+	 * @param {Object} pContext - { state, readOnly, navigating, panningEnabled }
+	 * @returns {string} a cursor token: 'default' | 'grab' | 'grabbing' | 'crosshair' | 'resize'
+	 */
+	resolveCursor(pContext)
+	{
+		let tmpContext = pContext || {};
+
+		switch (tmpContext.state)
+		{
+			case 'panning':
+			case 'dragging-node':
+			case 'dragging-panel':
+			case 'dragging-handle':
+			case 'rotating-node':
+				return 'grabbing';
+
+			case 'resizing-node':
+			case 'resizing-panel':
+				return 'resize';
+
+			case 'connecting':
+			case 'marquee':
+				return 'crosshair';
+
+			default:
+				// Idle: the canvas cursor signals whether the background can be grabbed.
+				// Read-only is static unless navigation (the hand toggle) is on; in edit
+				// mode the background is grabbable when panning is enabled.
+				if (tmpContext.readOnly)
+				{
+					return tmpContext.navigating ? 'grab' : 'default';
+				}
+				return tmpContext.panningEnabled ? 'grab' : 'default';
+		}
+	}
+
+	/**
+	 * Gather the current state + mode and apply the resolved cursor token. Called
+	 * by the InteractionManager on every state transition and by the view on mode
+	 * changes. Safe to call before the SVG exists (no-op).
+	 */
+	update()
+	{
+		if (!this._FlowView)
+		{
+			return;
+		}
+
+		let tmpInteractionManager = this._FlowView._InteractionManager;
+		let tmpToken = this.resolveCursor(
+			{
+				state: (tmpInteractionManager && tmpInteractionManager._State) ? tmpInteractionManager._State : 'idle',
+				readOnly: (typeof this._FlowView.isReadOnly === 'function') ? this._FlowView.isReadOnly() : false,
+				navigating: (typeof this._FlowView.isReadOnlyNavigation === 'function') ? this._FlowView.isReadOnlyNavigation() : false,
+				panningEnabled: this._FlowView.options ? (this._FlowView.options.EnablePanning !== false) : true
+			});
+
+		this.apply(tmpToken);
+	}
+
+	/**
+	 * Write the cursor token to the SVG element. The CSS maps
+	 * `.pict-flow-svg[data-flow-cursor="<token>"]` to a real cursor.
+	 * @param {string} pToken
+	 */
+	apply(pToken)
+	{
+		let tmpElement = this._FlowView ? this._FlowView._SVGElement : null;
+		if (tmpElement && typeof tmpElement.setAttribute === 'function')
+		{
+			tmpElement.setAttribute('data-flow-cursor', pToken);
+		}
+	}
+}
+
+module.exports = PictServiceFlowCursorManager;