pict-section-flow 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {

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

@@ -270,6 +270,29 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-node-title-bar-bottom {
 			fill: var(--pf-node-title-bar-color);
 		}
+		.pict-flow-node-resize-handle {
+			fill: var(--theme-color-brand-primary, #2880a6);
+			stroke: var(--theme-color-background-panel, #ffffff);
+			stroke-width: 1.5;
+			cursor: nwse-resize;
+			opacity: 0.85;
+		}
+		.pict-flow-node-resize-handle:hover { opacity: 1; }
+		.pict-flow-marquee {
+			fill: var(--theme-color-brand-primary, #2880a6);
+			fill-opacity: 0.10;
+			stroke: var(--theme-color-brand-primary, #2880a6);
+			stroke-width: 1;
+			stroke-dasharray: 4 3;
+			pointer-events: none;
+		}
+		.pict-flow-align-guide {
+			stroke: #e5397f;
+			stroke-width: 1;
+			stroke-dasharray: 3 2;
+			pointer-events: none;
+			shape-rendering: crispEdges;
+		}
 		.pict-flow-node-title {
 			fill: var(--pf-node-title-fill);
 			font-size: var(--pf-node-title-size);

package/source/providers/layouts/Layout-Layered.js

@@ -1,9 +1,10 @@
 const libCoerce = require('./Layout-Coerce.js');
+const libRank = require('./Layout-Rank.js');
 
 /**
  * Layout-Layered
  *
- * Topological-sort (Kahn's algorithm) left-to-right layered layout.
+ * Cycle-tolerant left-to-right layered layout.
  *
  * This is the original `autoLayout` behavior of pict-section-flow,
  * extracted into a layout-algorithm descriptor. Calling
@@ -34,100 +35,45 @@ module.exports =
 
 		let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
 
-		// Build adjacency information
 		let tmpNodeMap = {};
-		let tmpInDegree = {};
-		let tmpOutEdges = {};
-
 		for (let i = 0; i < pNodes.length; i++)
 		{
-			let tmpNode = pNodes[i];
-			tmpNodeMap[tmpNode.Hash] = tmpNode;
-			tmpInDegree[tmpNode.Hash] = 0;
-			tmpOutEdges[tmpNode.Hash] = [];
-		}
-
-		for (let i = 0; i < tmpConnections.length; i++)
-		{
-			let tmpConn = tmpConnections[i];
-			if (tmpInDegree.hasOwnProperty(tmpConn.TargetNodeHash))
-			{
-				tmpInDegree[tmpConn.TargetNodeHash]++;
-			}
-			if (tmpOutEdges.hasOwnProperty(tmpConn.SourceNodeHash))
-			{
-				tmpOutEdges[tmpConn.SourceNodeHash].push(tmpConn.TargetNodeHash);
-			}
+			tmpNodeMap[pNodes[i].Hash] = pNodes[i];
 		}
 
-		// Topological sort (Kahn's algorithm)
-		let tmpLayers = [];
-		let tmpQueue = [];
-		let tmpAssigned = {};
-
-		for (let tmpHash in tmpInDegree)
+		// Rank the nodes into layers, left to right, with cycle breaking. The
+		// shared ranker keeps back-edged graphs (workflows, state machines) from
+		// collapsing into one tall column the way plain Kahn's topological sort
+		// would. See Layout-Rank.js.
+		let tmpLayers = libRank.toRanks(pNodes, tmpConnections);
+
+		// Measure each layer's stacked height so layers can be centered on one
+		// shared horizontal axis. Without centering every layer top-aligns at
+		// StartY, so a one-node layer beside a five-node layer reads as a
+		// diagonal drift down the page instead of a balanced band.
+		let tmpLayerHeights = [];
+		let tmpMaxLayerHeight = 0;
+		for (let l = 0; l < tmpLayers.length; l++)
 		{
-			if (tmpInDegree[tmpHash] === 0)
+			let tmpHeight = 0;
+			for (let i = 0; i < tmpLayers[l].length; i++)
 			{
-				tmpQueue.push(tmpHash);
+				let tmpNode = tmpNodeMap[tmpLayers[l][i]];
+				tmpHeight += (tmpNode && tmpNode.Height) ? tmpNode.Height : 80;
+				if (i > 0) tmpHeight += tmpVerticalSpacing;
 			}
+			tmpLayerHeights.push(tmpHeight);
+			if (tmpHeight > tmpMaxLayerHeight) tmpMaxLayerHeight = tmpHeight;
 		}
 
-		while (tmpQueue.length > 0)
-		{
-			let tmpCurrentLayer = [];
-			let tmpNextQueue = [];
-
-			for (let i = 0; i < tmpQueue.length; i++)
-			{
-				let tmpNodeHash = tmpQueue[i];
-				if (tmpAssigned[tmpNodeHash]) continue;
-
-				tmpAssigned[tmpNodeHash] = true;
-				tmpCurrentLayer.push(tmpNodeHash);
-
-				let tmpEdges = tmpOutEdges[tmpNodeHash] || [];
-				for (let j = 0; j < tmpEdges.length; j++)
-				{
-					let tmpTargetHash = tmpEdges[j];
-					tmpInDegree[tmpTargetHash]--;
-					if (tmpInDegree[tmpTargetHash] <= 0 && !tmpAssigned[tmpTargetHash])
-					{
-						tmpNextQueue.push(tmpTargetHash);
-					}
-				}
-			}
-
-			if (tmpCurrentLayer.length > 0)
-			{
-				tmpLayers.push(tmpCurrentLayer);
-			}
-
-			tmpQueue = tmpNextQueue;
-		}
-
-		// Handle cycles or disconnected nodes
-		let tmpRemainingNodes = [];
-		for (let i = 0; i < pNodes.length; i++)
-		{
-			if (!tmpAssigned[pNodes[i].Hash])
-			{
-				tmpRemainingNodes.push(pNodes[i].Hash);
-			}
-		}
-		if (tmpRemainingNodes.length > 0)
-		{
-			tmpLayers.push(tmpRemainingNodes);
-		}
-
-		// Assign positions based on layers
+		// Assign positions: one column per layer, each layer vertically centered.
 		let tmpCurrentX = tmpStartX;
 
 		for (let tmpLayerIndex = 0; tmpLayerIndex < tmpLayers.length; tmpLayerIndex++)
 		{
 			let tmpLayer = tmpLayers[tmpLayerIndex];
 			let tmpMaxWidth = 0;
-			let tmpCurrentY = tmpStartY;
+			let tmpCurrentY = tmpStartY + ((tmpMaxLayerHeight - tmpLayerHeights[tmpLayerIndex]) / 2);
 
 			for (let i = 0; i < tmpLayer.length; i++)
 			{

package/source/providers/layouts/Layout-Rank.js

@@ -0,0 +1,141 @@
+/**
+ * Layout-Rank
+ *
+ * Shared cycle-tolerant topological ranking for the directed layouts
+ * (Layered, Staggered).
+ *
+ * Plain Kahn's topological sort drops every node that participates in a cycle
+ * into a single trailing rank. Any graph with back-edges (workflows, state
+ * machines: rejections, retries, "send back") therefore collapses into one
+ * tall stripe of unranked nodes, which is the historical "auto-layout bunches
+ * everything together and is useless" behavior.
+ *
+ * `toRanks` instead breaks each cycle at its most-resolved node: when a round
+ * finds nothing dependency-free but nodes remain, it forces the unassigned
+ * node with the fewest unmet predecessors into the next rank and continues.
+ * Cyclic graphs then rank left to right the same way a DAG does.
+ *
+ * Returns an array of ranks; each rank is an array of node Hashes in stable
+ * source order. Self-loops are ignored for ranking (they cannot define an
+ * order). Callers map Hashes back to node objects themselves.
+ */
+function toRanks(pNodes, pConnections)
+{
+	let tmpRanks = [];
+	if (!pNodes || pNodes.length === 0)
+	{
+		return tmpRanks;
+	}
+
+	let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
+
+	let tmpInDegree = {};
+	let tmpOutEdges = {};
+	for (let i = 0; i < pNodes.length; i++)
+	{
+		tmpInDegree[pNodes[i].Hash] = 0;
+		tmpOutEdges[pNodes[i].Hash] = [];
+	}
+
+	for (let i = 0; i < tmpConnections.length; i++)
+	{
+		let tmpConn = tmpConnections[i];
+		// A self-loop cannot define a rank order; skip it.
+		if (tmpConn.SourceNodeHash === tmpConn.TargetNodeHash)
+		{
+			continue;
+		}
+		if (tmpInDegree.hasOwnProperty(tmpConn.TargetNodeHash))
+		{
+			tmpInDegree[tmpConn.TargetNodeHash]++;
+		}
+		if (tmpOutEdges.hasOwnProperty(tmpConn.SourceNodeHash))
+		{
+			tmpOutEdges[tmpConn.SourceNodeHash].push(tmpConn.TargetNodeHash);
+		}
+	}
+
+	let tmpAssigned = {};
+	let tmpAssignedCount = 0;
+
+	while (tmpAssignedCount < pNodes.length)
+	{
+		let tmpRank = [];
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			let tmpHash = pNodes[i].Hash;
+			if (!tmpAssigned[tmpHash] && tmpInDegree[tmpHash] <= 0)
+			{
+				tmpRank.push(tmpHash);
+			}
+		}
+
+		if (tmpRank.length === 0)
+		{
+			// Cycle break: nothing is dependency-free, so force the unassigned
+			// node with the fewest remaining predecessors (ties keep source
+			// order, which keeps the result stable across runs).
+			let tmpMinDegree = Infinity;
+			let tmpPick = null;
+			for (let i = 0; i < pNodes.length; i++)
+			{
+				let tmpHash = pNodes[i].Hash;
+				if (!tmpAssigned[tmpHash] && tmpInDegree[tmpHash] < tmpMinDegree)
+				{
+					tmpMinDegree = tmpInDegree[tmpHash];
+					tmpPick = tmpHash;
+				}
+			}
+			if (tmpPick === null)
+			{
+				break; // safety; every node is already assigned
+			}
+			tmpRank.push(tmpPick);
+		}
+
+		// Commit the whole rank, then relax its out-edges so the next round
+		// sees the successors it just freed.
+		for (let i = 0; i < tmpRank.length; i++)
+		{
+			tmpAssigned[tmpRank[i]] = true;
+			tmpAssignedCount++;
+		}
+		for (let i = 0; i < tmpRank.length; i++)
+		{
+			let tmpEdges = tmpOutEdges[tmpRank[i]] || [];
+			for (let j = 0; j < tmpEdges.length; j++)
+			{
+				tmpInDegree[tmpEdges[j]]--;
+			}
+		}
+
+		tmpRanks.push(tmpRank);
+	}
+
+	return tmpRanks;
+}
+
+/**
+ * Flatten ranks to a single ordered list of node Hashes (rank by rank, source
+ * order within a rank). Convenience for layouts that walk one sequence.
+ */
+function toOrder(pNodes, pConnections)
+{
+	let tmpRanks = toRanks(pNodes, pConnections);
+	let tmpOrder = [];
+	for (let i = 0; i < tmpRanks.length; i++)
+	{
+		for (let j = 0; j < tmpRanks[i].length; j++)
+		{
+			tmpOrder.push(tmpRanks[i][j]);
+		}
+	}
+	return tmpOrder;
+}
+
+module.exports =
+{
+	toRanks: toRanks,
+	toOrder: toOrder
+};

package/source/providers/layouts/Layout-Staggered.js

@@ -0,0 +1,131 @@
+const libCoerce = require('./Layout-Coerce.js');
+const libRank = require('./Layout-Rank.js');
+
+/**
+ * Layout-Staggered
+ *
+ * Serpentine "stairstep" layout for directed graphs. It ranks the nodes left
+ * to right by connection topology (the same cycle-tolerant ranking the Layered
+ * layout uses), then walks that ordered sequence along a band that steps down a
+ * few rows and back up, advancing horizontally at every node.
+ *
+ * The point is vertical-space efficiency: a long directed chain (a workflow, a
+ * delivery pipeline, a state machine) laid out purely left to right runs off
+ * the right edge of the canvas. Folding it into a stairstep band keeps the
+ * left-to-right reading order while using the height of the viewport, so the
+ * whole graph frames at a usable zoom.
+ *
+ * `Rows` sets how deep the band steps before folding back: 2 is a simple
+ * zigzag (odd nodes high, even nodes low); 3+ is a deeper stairstep. The row
+ * index follows a triangle wave so the band descends and then climbs rather
+ * than snapping back to the top between runs.
+ *
+ * Numeric parameters are typed `PreciseNumber` so they survive ExpressionParser
+ * solver chains; Layout-Coerce converts them back to JS floats at entry.
+ */
+module.exports =
+{
+	Name: 'Staggered',
+	Label: 'Staggered (Stairstep)',
+	Description: 'Topological order folded along a serpentine stairstep band.',
+	DefaultEdgeTheme: 'Perimeter',
+
+	Apply: function (pNodes, pConnections, pParameters)
+	{
+		if (!pNodes || pNodes.length === 0) return;
+
+		let tmpParams = pParameters || {};
+		let tmpSpacing       = libCoerce.toFloat(tmpParams.Spacing, 1.0);
+		let tmpRows          = Math.max(1, libCoerce.toInt(tmpParams.Rows, 2));
+		let tmpColumnSpacing = libCoerce.toFloat(tmpParams.ColumnSpacing, 80) * tmpSpacing;
+		let tmpRowOffset     = libCoerce.toFloat(tmpParams.RowOffset, 150) * tmpSpacing;
+		let tmpStartX        = libCoerce.toFloat(tmpParams.StartX, 80);
+		let tmpStartY        = libCoerce.toFloat(tmpParams.StartY, 80);
+
+		let tmpConnections = Array.isArray(pConnections) ? pConnections : [];
+
+		let tmpNodeMap = {};
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			tmpNodeMap[pNodes[i].Hash] = pNodes[i];
+		}
+
+		let tmpOrder = libRank.toOrder(pNodes, tmpConnections);
+
+		// A uniform column pitch (the widest node plus the spacing) keeps the
+		// stairstep diagonal even regardless of individual node widths.
+		let tmpMaxWidth = 0;
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			tmpMaxWidth = Math.max(tmpMaxWidth, pNodes[i].Width || 180);
+		}
+		let tmpColumnPitch = tmpMaxWidth + tmpColumnSpacing;
+
+		// Triangle wave: descend (Rows - 1) steps, then climb (Rows - 1) steps.
+		let tmpPeriod = (tmpRows > 1) ? (2 * (tmpRows - 1)) : 1;
+
+		for (let i = 0; i < tmpOrder.length; i++)
+		{
+			let tmpNode = tmpNodeMap[tmpOrder[i]];
+			if (!tmpNode) continue;
+
+			let tmpRow;
+			if (tmpRows <= 1)
+			{
+				tmpRow = 0;
+			}
+			else
+			{
+				let tmpPhase = i % tmpPeriod;
+				tmpRow = (tmpPhase < tmpRows) ? tmpPhase : (tmpPeriod - tmpPhase);
+			}
+
+			tmpNode.X = tmpStartX + (i * tmpColumnPitch);
+			tmpNode.Y = tmpStartY + (tmpRow * tmpRowOffset);
+		}
+	},
+
+	DefaultParameters:
+	{
+		Spacing: 1.0,
+		Rows: 2,
+		ColumnSpacing: 80,
+		RowOffset: 150,
+		StartX: 80,
+		StartY: 80
+	},
+
+	ParameterSchema:
+	{
+		Spacing:       { Type: 'PreciseNumber', Label: 'Spacing (multiplier)', Default: 1.0, Min: 0.1, Max: 5 },
+		Rows:          { Type: 'Number',        Label: 'Rows',          Default: 2,   Min: 1, Max: 12 },
+		ColumnSpacing: { Type: 'PreciseNumber', Label: 'Column spacing', Default: 80,  Min: 0, Max: 1000 },
+		RowOffset:     { Type: 'PreciseNumber', Label: 'Row offset',    Default: 150, Min: 0, Max: 1000 },
+		StartX:        { Type: 'PreciseNumber', Label: 'Start X',       Default: 80,  Min: -10000, Max: 10000 },
+		StartY:        { Type: 'PreciseNumber', Label: 'Start Y',       Default: 80,  Min: -10000, Max: 10000 }
+	},
+
+	ParameterManifest:
+	{
+		Scope: 'PictFlowLayout-Staggered',
+		Sections:
+		[
+			{ Name: 'Staggered Parameters', Hash: 'PFLStaggeredSection', Groups: [{ Name: 'Defaults', Hash: 'PFLStaggeredGroup' }] }
+		],
+		Descriptors:
+		{
+			'PictFlowLayoutEditor.Parameters.Spacing':
+			{ Name: 'Spacing (multiplier)', Hash: 'Spacing', DataType: 'PreciseNumber', Default: 1.0, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 0, Width: 6, Min: 0.1, Max: 5 } },
+			'PictFlowLayoutEditor.Parameters.Rows':
+			{ Name: 'Rows', Hash: 'Rows', DataType: 'Number', Default: 2, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 0, Width: 6, Min: 1, Max: 12 } },
+			'PictFlowLayoutEditor.Parameters.ColumnSpacing':
+			{ Name: 'Column spacing', Hash: 'ColumnSpacing', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 1, Width: 6, Min: 0, Max: 1000 } },
+			'PictFlowLayoutEditor.Parameters.RowOffset':
+			{ Name: 'Row offset', Hash: 'RowOffset', DataType: 'PreciseNumber', Default: 150, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 1, Width: 6, Min: 0, Max: 1000 } },
+			'PictFlowLayoutEditor.Parameters.StartX':
+			{ Name: 'Start X', Hash: 'StartX', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 2, Width: 6, Min: -10000, Max: 10000 } },
+			'PictFlowLayoutEditor.Parameters.StartY':
+			{ Name: 'Start Y', Hash: 'StartY', DataType: 'PreciseNumber', Default: 80, PictForm: { Section: 'PFLStaggeredSection', Group: 'PFLStaggeredGroup', Row: 2, Width: 6, Min: -10000, Max: 10000 } }
+		}
+	}
+};

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

@@ -106,7 +106,7 @@ class PictServiceFlowDataManager extends libFableServiceProviderBase
 			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 },
+				{ PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedNodeHashes: [], SelectedConnectionHash: null, SelectedTetherHash: null },
 				pFlowData.ViewState || {}
 			),
 			LayoutAlgorithm: (typeof pFlowData.LayoutAlgorithm === 'string' && pFlowData.LayoutAlgorithm !== '') ? pFlowData.LayoutAlgorithm : tmpDefaultAlgorithm,