pict-section-flow 0.0.17 → 0.0.19

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

@@ -1,5 +1,10 @@
 const libPictProvider = require('pict-provider');
 
+// Built-in node types reference theme-aware roles via `ColorRole`. The
+// hex `TitleBarColor` / `BodyStyle` values remain as fallbacks for
+// rendering paths that bypass CSS (legacy consumers, exports). When a
+// role is set, the renderer skips applying those hex attributes — the
+// role's CSS class drives the visuals so theme swaps propagate.
 const _DefaultNodeTypes =
 {
 	'default':
@@ -13,6 +18,7 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' },
 			{ Hash: null, Direction: 'output', Side: 'right', Label: 'Out' }
 		],
+		ColorRole: 'neutral',
 		TitleBarColor: '#2c3e50',
 		BodyStyle: {}
 	},
@@ -26,6 +32,7 @@ const _DefaultNodeTypes =
 		[
 			{ Hash: null, Direction: 'output', Side: 'right', Label: 'Out' }
 		],
+		ColorRole: 'success',
 		TitleBarColor: '#27ae60',
 		BodyStyle:
 		{
@@ -43,6 +50,7 @@ const _DefaultNodeTypes =
 		[
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
 		],
+		ColorRole: 'accent',
 		TitleBarColor: '#1abc9c',
 		BodyStyle:
 		{
@@ -60,6 +68,7 @@ const _DefaultNodeTypes =
 		[
 			{ Hash: null, Direction: 'input', Side: 'left', Label: 'In' }
 		],
+		ColorRole: 'error',
 		TitleBarColor: '#e74c3c',
 		BodyStyle:
 		{
@@ -79,6 +88,7 @@ const _DefaultNodeTypes =
 			{ Hash: null, Direction: 'output', Side: 'right', Label: 'Yes' },
 			{ Hash: null, Direction: 'output', Side: 'bottom', Label: 'No' }
 		],
+		ColorRole: 'warning',
 		TitleBarColor: '#f39c12',
 		BodyStyle:
 		{

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

@@ -50,7 +50,11 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 		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 });
+			{
+				Hash: pPanelData.Hash,
+				Title: tmpTitle,
+				FlowViewIdentifier: this._FlowView.options.ViewIdentifier
+			});
 
 		tmpFO.innerHTML = tmpChromeHTML;
 
@@ -65,22 +69,8 @@ class PictProviderFlowPanelChrome extends libFableServiceProviderBase
 			tmpCloseIcon.textContent = '\u2715';
 		}
 
-		// 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)
-		{
-			tmpContent.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpContent.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
-		}
-
-		// Isolate events on the tab bar
-		let tmpTabbar = tmpFO.querySelector('.pict-flow-panel-tabbar');
-		if (tmpTabbar)
-		{
-			tmpTabbar.addEventListener('pointerdown', (pEvent) => { pEvent.stopPropagation(); });
-			tmpTabbar.addEventListener('wheel', (pEvent) => { pEvent.stopPropagation(); });
-		}
+		// Pointer/wheel isolation lives on the inline onpointerdown/onwheel
+		// attributes in Flow-PanelChrome-Template — see PictView-Flow.js.
 
 		pPanelsLayer.appendChild(tmpFO);
 

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

@@ -219,7 +219,7 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 				.pict-flow-toolbar-btn {
 					background-color: rgba(255,255,255,0.05);
 					border-color: rgba(255,255,255,0.2);
-					color: #ffffff;
+					color: var(--theme-color-background-panel, #ffffff);
 				}
 				.pict-flow-toolbar-btn:hover {
 					background-color: rgba(255,255,255,0.1);
@@ -458,16 +458,16 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 				.pict-flow-toolbar {
 					background-color: #c0c0c0;
 					border-bottom: 2px solid #808080;
-					border-top: 1px solid #ffffff;
+					border-top: 1px solid var(--theme-color-background-panel, #ffffff);
 				}
 				.pict-flow-toolbar-btn {
 					background-color: #c0c0c0;
 					border: 2px outset #c0c0c0;
 					border-radius: 0;
-					color: #000000;
+					color: var(--theme-color-text-primary, #000000);
 				}
 				.pict-flow-toolbar-btn:hover {
-					background-color: #d0d0d0;
+					background-color: var(--theme-color-border-default, #d0d0d0);
 				}
 				.pict-flow-toolbar-btn:active {
 					border-style: inset;
@@ -544,10 +544,10 @@ class PictProviderFlowTheme extends libFableServiceProviderBase
 					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
 				}
 				/* Node-type bracket colors — each type gets its own bracket color */
-				.pict-flow-node-start .pict-flow-node-bracket { stroke: #27ae60; }
+				.pict-flow-node-start .pict-flow-node-bracket { stroke: var(--theme-color-status-success, #27ae60); }
 				.pict-flow-node-end .pict-flow-node-bracket { stroke: #1abc9c; }
-				.pict-flow-node-halt .pict-flow-node-bracket { stroke: #e74c3c; }
-				.pict-flow-node-decision .pict-flow-node-bracket { stroke: #f39c12; }
+				.pict-flow-node-halt .pict-flow-node-bracket { stroke: var(--theme-color-status-error, #e74c3c); }
+				.pict-flow-node-decision .pict-flow-node-bracket { stroke: var(--theme-color-status-warning, #f39c12); }
 				.pict-flow-node-default .pict-flow-node-bracket { stroke: #3498db; }
 				.pict-flow-node-action .pict-flow-node-bracket { stroke: #2c3e50; }
 				/* Override variant rules: no fills/strokes on body rects in whiteboard */

package/source/providers/edges/Edge-Bezier.js

@@ -0,0 +1,41 @@
+/**
+ * Edge-Bezier
+ *
+ * Default edge theme: smooth cubic bezier between source and target ports,
+ * with departure/approach geometry derived from each port's `Side`. This
+ * is a thin wrapper around the renderer's pre-existing bezier path
+ * generator — selecting it is equivalent to the historical default.
+ *
+ * Honors per-connection multi-handle waypoints (BezierHandles) when
+ * present so user-edited curves still survive.
+ */
+module.exports =
+{
+	Name: 'Bezier',
+	Label: 'Bezier (smooth)',
+	Description: 'Smooth cubic curves with side-aware departures.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpHelpers = pContext.Helpers;
+		let tmpSrc = pContext.Source;
+		let tmpTgt = pContext.Target;
+		let tmpData = (pContext.Connection && pContext.Connection.Data) || {};
+
+		// Preserve user-customized multi-handle bezier waypoints.
+		if (tmpData.HandleCustomized)
+		{
+			let tmpHandles = tmpHelpers.getBezierHandles(tmpData);
+			if (tmpHandles.length > 0)
+			{
+				return tmpHelpers.generateMultiBezier(tmpSrc, tmpTgt, tmpHandles);
+			}
+		}
+
+		return tmpHelpers.generateBezier(tmpSrc, tmpTgt);
+	},
+
+	DefaultParameters: {},
+
+	ParameterSchema: {}
+};

package/source/providers/edges/Edge-Orthogonal.js

@@ -0,0 +1,37 @@
+/**
+ * Edge-Orthogonal
+ *
+ * Right-angle (Manhattan) routing between source and target. Reads
+ * cleanly for layered DAGs and grid-shaped layouts. Per-connection
+ * `OrthoMidOffset` and customized corner overrides are preserved.
+ */
+module.exports =
+{
+	Name: 'Orthogonal',
+	Label: 'Orthogonal (right-angle)',
+	Description: 'Right-angle routing — reads well for DAGs and grids.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpHelpers = pContext.Helpers;
+		let tmpSrc = pContext.Source;
+		let tmpTgt = pContext.Target;
+		let tmpData = (pContext.Connection && pContext.Connection.Data) || {};
+
+		let tmpCorners = null;
+		if (tmpData.HandleCustomized && tmpData.OrthoCorner1X != null)
+		{
+			tmpCorners =
+			{
+				corner1: { x: tmpData.OrthoCorner1X, y: tmpData.OrthoCorner1Y },
+				corner2: { x: tmpData.OrthoCorner2X, y: tmpData.OrthoCorner2Y }
+			};
+		}
+
+		return tmpHelpers.generateOrthogonal(tmpSrc, tmpTgt, tmpCorners, tmpData.OrthoMidOffset || 0);
+	},
+
+	DefaultParameters: {},
+
+	ParameterSchema: {}
+};

package/source/providers/edges/Edge-OrthogonalSnap.js

@@ -0,0 +1,72 @@
+const libCoerce = require('../layouts/Layout-Coerce.js');
+
+/**
+ * Edge-OrthogonalSnap
+ *
+ * Demonstrates the "edge theme can affect node placement" axis. Same
+ * right-angle routing as Edge-Orthogonal, but with an `AdjustLayout`
+ * pass that snaps every node's X/Y to a grid so corner segments line
+ * up cleanly across the diagram.
+ *
+ * Trade-off: nodes shift slightly from the layout's natural positions
+ * to gain visual alignment. The user opts into this by picking the
+ * theme — the layout algorithm itself is unaware.
+ */
+module.exports =
+{
+	Name: 'OrthogonalSnap',
+	Label: 'Orthogonal (snap to grid)',
+	Description: 'Right-angle routing; snaps node positions to a grid for cleaner corner alignment. Demonstrates an edge theme that adjusts node placement.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpHelpers = pContext.Helpers;
+		let tmpSrc = pContext.Source;
+		let tmpTgt = pContext.Target;
+		let tmpData = (pContext.Connection && pContext.Connection.Data) || {};
+
+		let tmpCorners = null;
+		if (tmpData.HandleCustomized && tmpData.OrthoCorner1X != null)
+		{
+			tmpCorners =
+			{
+				corner1: { x: tmpData.OrthoCorner1X, y: tmpData.OrthoCorner1Y },
+				corner2: { x: tmpData.OrthoCorner2X, y: tmpData.OrthoCorner2Y }
+			};
+		}
+
+		return tmpHelpers.generateOrthogonal(tmpSrc, tmpTgt, tmpCorners, tmpData.OrthoMidOffset || 0);
+	},
+
+	/**
+	 * Snap each node's (X, Y) to the configured grid after the layout
+	 * has run. Mutates pNodes in place.
+	 *
+	 * @param {Array} pNodes
+	 * @param {Array} pConnections
+	 * @param {Object} pParameters
+	 */
+	AdjustLayout: function (pNodes, pConnections, pParameters)
+	{
+		let tmpGridSize = libCoerce.toFloat((pParameters || {}).GridSize, 20);
+		if (tmpGridSize <= 0) return;
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			let tmpNode = pNodes[i];
+			if (typeof tmpNode.X !== 'number' || typeof tmpNode.Y !== 'number') continue;
+			tmpNode.X = Math.round(tmpNode.X / tmpGridSize) * tmpGridSize;
+			tmpNode.Y = Math.round(tmpNode.Y / tmpGridSize) * tmpGridSize;
+		}
+	},
+
+	DefaultParameters:
+	{
+		GridSize: 20
+	},
+
+	ParameterSchema:
+	{
+		GridSize: { Type: 'PreciseNumber', Label: 'Grid size', Default: 20, Min: 1, Max: 200 }
+	}
+};

package/source/providers/edges/Edge-Perimeter-Linear.js

@@ -0,0 +1,31 @@
+const libPerimeterMath = require('./Edge-PerimeterMath.js');
+
+/**
+ * Edge-Perimeter-Linear
+ *
+ * Perimeter attachment + literal straight line between the two
+ * resolved exit points. Reads cleanly for force-directed and circular
+ * layouts where the topology already determines edge angles, and the
+ * curves of bezier add visual noise.
+ */
+module.exports =
+{
+	Name: 'Perimeter-Linear',
+	Label: 'Perimeter (linear)',
+	Description: 'Each connection exits the node at the perimeter, then runs as a straight line to the other end.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpS = pContext.Source;
+		let tmpT = pContext.Target;
+		return `M ${tmpS.x} ${tmpS.y} L ${tmpT.x} ${tmpT.y}`;
+	},
+
+	ResolveAttachment: function (pContext)
+	{
+		return libPerimeterMath.resolvePerimeterAttachment(pContext);
+	},
+
+	DefaultParameters: {},
+	ParameterSchema: {}
+};

package/source/providers/edges/Edge-Perimeter-Orthogonal.js

@@ -0,0 +1,39 @@
+const libPerimeterMath = require('./Edge-PerimeterMath.js');
+
+/**
+ * Edge-Perimeter-Orthogonal
+ *
+ * Perimeter attachment + right-angle (Manhattan) routing between
+ * the two resolved exit points. Best when the layout already has
+ * grid-like structure (Grid, Mesh) and you want connections to
+ * leave from whichever side faces the partner.
+ */
+module.exports =
+{
+	Name: 'Perimeter-Orthogonal',
+	Label: 'Perimeter (orthogonal)',
+	Description: 'Each connection exits the node at the perimeter, then routes via right-angle segments to the other end.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpData = (pContext.Connection && pContext.Connection.Data) || {};
+		let tmpCorners = null;
+		if (tmpData.HandleCustomized && tmpData.OrthoCorner1X != null)
+		{
+			tmpCorners =
+			{
+				corner1: { x: tmpData.OrthoCorner1X, y: tmpData.OrthoCorner1Y },
+				corner2: { x: tmpData.OrthoCorner2X, y: tmpData.OrthoCorner2Y }
+			};
+		}
+		return pContext.Helpers.generateOrthogonal(pContext.Source, pContext.Target, tmpCorners, tmpData.OrthoMidOffset || 0);
+	},
+
+	ResolveAttachment: function (pContext)
+	{
+		return libPerimeterMath.resolvePerimeterAttachment(pContext);
+	},
+
+	DefaultParameters: {},
+	ParameterSchema: {}
+};

package/source/providers/edges/Edge-Perimeter.js

@@ -0,0 +1,48 @@
+const libPerimeterMath = require('./Edge-PerimeterMath.js');
+
+/**
+ * Edge-Perimeter (Bezier)
+ *
+ * "Smart exit" routing with smooth bezier curves. Each connection
+ * exits the node at the perimeter point closest to its target —
+ * solves star/hub topologies where many connections share one port.
+ *
+ * Renders the path as a side-aware bezier (uses the side returned by
+ * `ResolveAttachment` so the curve departs in the right direction).
+ *
+ * See `Edge-Perimeter-Linear` and `Edge-Perimeter-Orthogonal` for the
+ * straight-line and right-angle variants.
+ */
+module.exports =
+{
+	Name: 'Perimeter',
+	Label: 'Perimeter (bezier)',
+	Description: 'Each connection exits the node at the perimeter point closest to its target, with smooth bezier curves. Fixes star/hub topologies where many lines share one port.',
+
+	GeneratePath: function (pContext)
+	{
+		// Honor user-edited bezier handles when the connection is selected
+		// and dragged. Without this, the drag handles render but moving
+		// them does nothing because Perimeter would always re-emit a
+		// fresh side-aware bezier.
+		let tmpHelpers = pContext.Helpers;
+		let tmpData = (pContext.Connection && pContext.Connection.Data) || {};
+		if (tmpData.HandleCustomized)
+		{
+			let tmpHandles = tmpHelpers.getBezierHandles(tmpData);
+			if (tmpHandles.length > 0)
+			{
+				return tmpHelpers.generateMultiBezier(pContext.Source, pContext.Target, tmpHandles);
+			}
+		}
+		return tmpHelpers.generateBezier(pContext.Source, pContext.Target);
+	},
+
+	ResolveAttachment: function (pContext)
+	{
+		return libPerimeterMath.resolvePerimeterAttachment(pContext);
+	},
+
+	DefaultParameters: {},
+	ParameterSchema: {}
+};

package/source/providers/edges/Edge-PerimeterMath.js

@@ -0,0 +1,92 @@
+/**
+ * Edge-PerimeterMath
+ *
+ * Shared geometry helper for the Perimeter family of edge themes
+ * (Perimeter, Perimeter-Linear, Perimeter-Orthogonal). Solves the
+ * "where on this node's bounding box should the line attach so it
+ * points at the other end" question.
+ *
+ * The themes themselves only differ in how they render the path
+ * between the two attachment points; the attachment math is identical.
+ */
+
+/**
+ * Resolve a perimeter attachment point for one end of a connection.
+ * Traces a line from the node's center toward the other end and returns
+ * the first crossing of the node's bounding-box perimeter, plus the
+ * `side` of that crossing (so the bezier helper departs in the right
+ * direction).
+ *
+ * @param {Object} pContext - the same shape the renderer passes into
+ *        ResolveAttachment (Node, OtherNode, OtherDefaultPosition,
+ *        DefaultPosition, …).
+ * @returns {{x: number, y: number, side: string}|Object|null}
+ *        Returns null when node geometry is missing; returns
+ *        DefaultPosition (verbatim) for degenerate same-center cases.
+ */
+function _resolvePerimeterAttachment(pContext)
+{
+	let tmpNode = pContext.Node;
+	if (!tmpNode || typeof tmpNode.X !== 'number' || typeof tmpNode.Y !== 'number') return null;
+
+	let tmpW = tmpNode.Width || 180;
+	let tmpH = tmpNode.Height || 80;
+	let tmpCx = tmpNode.X + tmpW / 2;
+	let tmpCy = tmpNode.Y + tmpH / 2;
+
+	let tmpAimX, tmpAimY;
+	if (pContext.OtherNode && typeof pContext.OtherNode.X === 'number')
+	{
+		let tmpOW = pContext.OtherNode.Width || 180;
+		let tmpOH = pContext.OtherNode.Height || 80;
+		tmpAimX = pContext.OtherNode.X + tmpOW / 2;
+		tmpAimY = pContext.OtherNode.Y + tmpOH / 2;
+	}
+	else if (pContext.OtherDefaultPosition)
+	{
+		tmpAimX = pContext.OtherDefaultPosition.x;
+		tmpAimY = pContext.OtherDefaultPosition.y;
+	}
+	else
+	{
+		return null;
+	}
+
+	let tmpDX = tmpAimX - tmpCx;
+	let tmpDY = tmpAimY - tmpCy;
+
+	if (tmpDX === 0 && tmpDY === 0) return pContext.DefaultPosition || null;
+
+	let tmpHalfW = tmpW / 2;
+	let tmpHalfH = tmpH / 2;
+
+	let tmpTX = (tmpDX > 0) ? tmpHalfW / tmpDX
+		: (tmpDX < 0) ? -tmpHalfW / tmpDX
+		: Infinity;
+	let tmpTY = (tmpDY > 0) ? tmpHalfH / tmpDY
+		: (tmpDY < 0) ? -tmpHalfH / tmpDY
+		: Infinity;
+
+	let tmpT, tmpSide;
+	if (tmpTX < tmpTY)
+	{
+		tmpT = tmpTX;
+		tmpSide = (tmpDX > 0) ? 'right' : 'left';
+	}
+	else
+	{
+		tmpT = tmpTY;
+		tmpSide = (tmpDY > 0) ? 'bottom' : 'top';
+	}
+
+	return {
+		x: tmpCx + tmpT * tmpDX,
+		y: tmpCy + tmpT * tmpDY,
+		side: tmpSide
+	};
+}
+
+module.exports =
+{
+	resolvePerimeterAttachment: _resolvePerimeterAttachment
+};

package/source/providers/edges/Edge-Straight.js

@@ -0,0 +1,24 @@
+/**
+ * Edge-Straight
+ *
+ * Literal straight line from source port to target port. Useful for
+ * dense clusters where curves add visual noise, and for force-directed
+ * layouts where the topology already determines edge angles.
+ */
+module.exports =
+{
+	Name: 'Straight',
+	Label: 'Straight line',
+	Description: 'Plain straight line between ports.',
+
+	GeneratePath: function (pContext)
+	{
+		let tmpSrc = pContext.Source;
+		let tmpTgt = pContext.Target;
+		return `M ${tmpSrc.x} ${tmpSrc.y} L ${tmpTgt.x} ${tmpTgt.y}`;
+	},
+
+	DefaultParameters: {},
+
+	ParameterSchema: {}
+};