pict-section-flow 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.2.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/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,

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

@@ -11,7 +11,9 @@ const INTERACTION_STATES =
 	DRAGGING_HANDLE: 'dragging-handle',
 	CONNECTING: 'connecting',
 	PANNING: 'panning',
-	RESIZING_PANEL: 'resizing-panel'
+	RESIZING_PANEL: 'resizing-panel',
+	RESIZING_NODE: 'resizing-node',
+	MARQUEE: 'marquee'
 };
 
 class PictServiceFlowInteractionManager extends libFableServiceProviderBase
@@ -71,6 +73,13 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._ResizeStartY = 0;
 		this._ResizePanelStartHeight = 0;
 
+		// Node resize state (drag a node's bottom-right handle to set Width/Height)
+		this._ResizeNodeHash = null;
+		this._ResizeNodeStartX = 0;
+		this._ResizeNodeStartY = 0;
+		this._ResizeNodeStartWidth = 0;
+		this._ResizeNodeStartHeight = 0;
+
 		// Double-click detection for connections
 		this._LastConnectionClickTime = 0;
 		this._LastConnectionClickHash = null;
@@ -196,6 +205,15 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				let tmpNodeHash = this._getNodeHash(tmpTarget);
 				let tmpNow = Date.now();
 
+				// Shift-click toggles this node in the multi-selection (no drag, no panel).
+				if (tmpNodeHash && this._FlowView.options.EnableMultiSelect && pEvent.shiftKey)
+				{
+					this._LastClickTime = 0;
+					this._LastClickNodeHash = null;
+					this._FlowView.toggleNodeSelection(tmpNodeHash);
+					break;
+				}
+
 				// Check for double-click on same node
 				if (tmpNodeHash && tmpNodeHash === this._LastClickNodeHash
 					&& (tmpNow - this._LastClickTime) < this._DoubleClickThreshold)
@@ -223,6 +241,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._startPanelResize(pEvent, tmpTarget);
 				break;
 
+			case 'node-resize':
+				this._startNodeResize(pEvent, tmpTarget);
+				break;
+
 			case 'panel-close':
 			{
 				let tmpPanelHash = this._getPanelHash(tmpTarget);
@@ -343,10 +365,19 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			}
 
 			default:
-				// Click on background - start panning or deselect
-				if (pEvent.button === 0 && this._FlowView.options.EnablePanning)
+				// Click / drag on the empty background.
+				if (pEvent.button === 0)
 				{
-					this._startPanning(pEvent);
+					if (this._FlowView.options.EnableMultiSelect && !pEvent.shiftKey)
+					{
+						// Plain drag marquee-selects; a click (no drag) clears the selection on release.
+						this._startMarquee(pEvent);
+					}
+					else if (this._FlowView.options.EnablePanning)
+					{
+						// With multi-select on, shift+drag pans; otherwise this is the normal pan.
+						this._startPanning(pEvent);
+					}
 				}
 				break;
 		}
@@ -382,9 +413,17 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._onPanelResize(pEvent);
 				break;
 
+			case INTERACTION_STATES.RESIZING_NODE:
+				this._onNodeResize(pEvent);
+				break;
+
 			case INTERACTION_STATES.PANNING:
 				this._onPan(pEvent);
 				break;
+
+			case INTERACTION_STATES.MARQUEE:
+				this._onMarquee(pEvent);
+				break;
 		}
 	}
 
@@ -420,6 +459,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._endPanelResize(pEvent);
 				break;
 
+			case INTERACTION_STATES.RESIZING_NODE:
+				this._endNodeResize(pEvent);
+				break;
+
 			case INTERACTION_STATES.CONNECTING:
 				this._endConnection(pEvent);
 				break;
@@ -427,6 +470,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			case INTERACTION_STATES.PANNING:
 				this._endPanning(pEvent);
 				break;
+
+			case INTERACTION_STATES.MARQUEE:
+				this._endMarquee(pEvent);
+				break;
 		}
 	}
 
@@ -513,63 +560,208 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		let tmpNodeHash = this._getNodeHash(pTarget);
 		if (!tmpNodeHash) return;
 
-		this._FlowView.selectNode(tmpNodeHash);
+		// If the grabbed node is part of a multi-selection, drag the whole set; otherwise select just
+		// it. (Grabbing a node outside the current selection collapses to that single node.)
+		let tmpSelected = this._FlowView.getSelectedNodeHashes ? this._FlowView.getSelectedNodeHashes() : [];
+		let tmpIsMulti = this._FlowView.options.EnableMultiSelect && tmpSelected.length > 1 && tmpSelected.indexOf(tmpNodeHash) >= 0;
+		if (!tmpIsMulti)
+		{
+			this._FlowView.selectNode(tmpNodeHash);
+			tmpSelected = [tmpNodeHash];
+		}
 
-		let tmpNode = this._FlowView.getNode(tmpNodeHash);
-		if (!tmpNode) return;
+		// Capture each dragged node's start position so one delta applies to all of them.
+		this._DragNodes = [];
+		for (let i = 0; i < tmpSelected.length; i++)
+		{
+			let tmpN = this._FlowView.getNode(tmpSelected[i]);
+			if (tmpN) { this._DragNodes.push({ Hash: tmpN.Hash, StartX: tmpN.X, StartY: tmpN.Y }); }
+		}
+		if (this._DragNodes.length === 0) return;
 
 		this._State = INTERACTION_STATES.DRAGGING_NODE;
 		this._DragNodeHash = tmpNodeHash;
 		this._DragStartX = pEvent.clientX;
 		this._DragStartY = pEvent.clientY;
-		this._DragNodeStartX = tmpNode.X;
-		this._DragNodeStartY = tmpNode.Y;
 
 		this._SVGElement.classList.add('panning');
 
-		let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${tmpNodeHash}"]`);
-		if (tmpNodeGroup)
+		for (let i = 0; i < this._DragNodes.length; i++)
 		{
-			tmpNodeGroup.classList.add('dragging');
+			let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${this._DragNodes[i].Hash}"]`);
+			if (tmpNodeGroup) { tmpNodeGroup.classList.add('dragging'); }
 		}
 	}
 
 	_onNodeDrag(pEvent)
 	{
-		if (!this._DragNodeHash) return;
+		if (!this._DragNodes || this._DragNodes.length === 0) return;
 
 		let tmpVS = this._FlowView.viewState;
 		let tmpDX = (pEvent.clientX - this._DragStartX) / tmpVS.Zoom;
 		let tmpDY = (pEvent.clientY - this._DragStartY) / tmpVS.Zoom;
 
-		let tmpNewX = this._DragNodeStartX + tmpDX;
-		let tmpNewY = this._DragNodeStartY + tmpDY;
+		// A single-node drag can show alignment guides and snap to other nodes' edges/centers.
+		// Multi-drag keeps the rigid group offset (aligning a moving group is ambiguous).
+		if (this._DragNodes.length === 1 && this._FlowView.options.EnableAlignmentGuides)
+		{
+			let tmpHash = this._DragNodes[0].Hash;
+			let tmpNode = this._FlowView.getNode(tmpHash);
+			let tmpX = this._snapToGrid(this._DragNodes[0].StartX + tmpDX);
+			let tmpY = this._snapToGrid(this._DragNodes[0].StartY + tmpDY);
+			if (tmpNode)
+			{
+				let tmpAlign = this._alignmentFor(tmpNode, tmpX, tmpY);
+				this._drawGuides(tmpAlign.Guides);
+				this._FlowView.updateNodePosition(tmpHash, tmpAlign.X, tmpAlign.Y);
+				return;
+			}
+		}
 
-		this._FlowView.updateNodePosition(this._DragNodeHash, tmpNewX, tmpNewY);
+		for (let i = 0; i < this._DragNodes.length; i++)
+		{
+			let tmpNewX = this._snapToGrid(this._DragNodes[i].StartX + tmpDX);
+			let tmpNewY = this._snapToGrid(this._DragNodes[i].StartY + tmpDY);
+			this._FlowView.updateNodePosition(this._DragNodes[i].Hash, tmpNewX, tmpNewY);
+		}
+	}
+
+	// ---- Alignment guides (single-node drag) ----
+	// Compare the dragged node's six reference lines (left / center-x / right and top / center-y /
+	// bottom) against every other node's. Within a small threshold the dragged node snaps so the lines
+	// coincide, and a guide line is reported spanning both nodes. Returns the (possibly snapped)
+	// position plus the guides to draw; a pure computation so it can be unit-tested without a DOM.
+	_alignmentFor(pDragNode, pX, pY)
+	{
+		let tmpZoom = (this._FlowView.viewState && this._FlowView.viewState.Zoom) ? this._FlowView.viewState.Zoom : 1;
+		let tmpThreshold = 6 / tmpZoom;
+		let tmpDefaultW = this._FlowView.options.DefaultNodeWidth || 180;
+		let tmpDefaultH = this._FlowView.options.DefaultNodeHeight || 80;
+		let tmpW = (typeof pDragNode.Width === 'number') ? pDragNode.Width : tmpDefaultW;
+		let tmpH = (typeof pDragNode.Height === 'number') ? pDragNode.Height : tmpDefaultH;
+
+		let tmpDragV = [ pX, pX + tmpW / 2, pX + tmpW ];   // left, center-x, right
+		let tmpDragH = [ pY, pY + tmpH / 2, pY + tmpH ];   // top, center-y, bottom
+
+		let tmpBestV = null;
+		let tmpBestH = null;
+		let tmpNodes = this._FlowView._FlowData.Nodes || [];
+
+		for (let i = 0; i < tmpNodes.length; i++)
+		{
+			let tmpO = tmpNodes[i];
+			if (tmpO.Hash === pDragNode.Hash) continue;
+			let tmpOW = (typeof tmpO.Width === 'number') ? tmpO.Width : tmpDefaultW;
+			let tmpOH = (typeof tmpO.Height === 'number') ? tmpO.Height : tmpDefaultH;
+			let tmpOtherV = [ tmpO.X, tmpO.X + tmpOW / 2, tmpO.X + tmpOW ];
+			let tmpOtherH = [ tmpO.Y, tmpO.Y + tmpOH / 2, tmpO.Y + tmpOH ];
+
+			for (let a = 0; a < tmpDragV.length; a++)
+			{
+				for (let b = 0; b < tmpOtherV.length; b++)
+				{
+					let tmpD = Math.abs(tmpDragV[a] - tmpOtherV[b]);
+					if (tmpD <= tmpThreshold && (!tmpBestV || tmpD < tmpBestV.Delta))
+					{
+						tmpBestV = { Delta: tmpD, Pos: tmpOtherV[b], SnapX: pX + (tmpOtherV[b] - tmpDragV[a]), OtherTop: tmpO.Y, OtherBottom: tmpO.Y + tmpOH };
+					}
+				}
+			}
+			for (let a = 0; a < tmpDragH.length; a++)
+			{
+				for (let b = 0; b < tmpOtherH.length; b++)
+				{
+					let tmpD = Math.abs(tmpDragH[a] - tmpOtherH[b]);
+					if (tmpD <= tmpThreshold && (!tmpBestH || tmpD < tmpBestH.Delta))
+					{
+						tmpBestH = { Delta: tmpD, Pos: tmpOtherH[b], SnapY: pY + (tmpOtherH[b] - tmpDragH[a]), OtherLeft: tmpO.X, OtherRight: tmpO.X + tmpOW };
+					}
+				}
+			}
+		}
+
+		let tmpResult = { X: pX, Y: pY, Guides: [] };
+		if (tmpBestV)
+		{
+			tmpResult.X = tmpBestV.SnapX;
+			tmpResult.Guides.push({ Type: 'v', Pos: tmpBestV.Pos, A: Math.min(tmpResult.Y, tmpBestV.OtherTop), B: Math.max(tmpResult.Y + tmpH, tmpBestV.OtherBottom) });
+		}
+		if (tmpBestH)
+		{
+			tmpResult.Y = tmpBestH.SnapY;
+			tmpResult.Guides.push({ Type: 'h', Pos: tmpBestH.Pos, A: Math.min(tmpResult.X, tmpBestH.OtherLeft), B: Math.max(tmpResult.X + tmpW, tmpBestH.OtherRight) });
+		}
+		return tmpResult;
+	}
+
+	_drawGuides(pGuides)
+	{
+		this._clearGuides();
+		if (!pGuides || pGuides.length === 0 || !this._FlowView._ViewportElement) return;
+		this._GuideElements = [];
+		for (let i = 0; i < pGuides.length; i++)
+		{
+			let tmpG = pGuides[i];
+			let tmpLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+			tmpLine.setAttribute('class', 'pict-flow-align-guide');
+			if (tmpG.Type === 'v') { tmpLine.setAttribute('x1', tmpG.Pos); tmpLine.setAttribute('x2', tmpG.Pos); tmpLine.setAttribute('y1', tmpG.A); tmpLine.setAttribute('y2', tmpG.B); }
+			else { tmpLine.setAttribute('y1', tmpG.Pos); tmpLine.setAttribute('y2', tmpG.Pos); tmpLine.setAttribute('x1', tmpG.A); tmpLine.setAttribute('x2', tmpG.B); }
+			this._FlowView._ViewportElement.appendChild(tmpLine);
+			this._GuideElements.push(tmpLine);
+		}
+	}
+
+	_clearGuides()
+	{
+		if (this._GuideElements)
+		{
+			for (let i = 0; i < this._GuideElements.length; i++)
+			{
+				let tmpEl = this._GuideElements[i];
+				if (tmpEl.parentNode) { tmpEl.parentNode.removeChild(tmpEl); }
+			}
+		}
+		this._GuideElements = null;
+	}
+
+	// Snap a coordinate or size to the grid when the flow has EnableGridSnap on; otherwise pass through.
+	_snapToGrid(pValue)
+	{
+		if (!this._FlowView.options.EnableGridSnap) { return pValue; }
+		// A defined GridSnapSize of 0 means "no snap"; only an absent size falls back to the default.
+		let tmpGrid = (typeof this._FlowView.options.GridSnapSize === 'number') ? this._FlowView.options.GridSnapSize : 20;
+		if (tmpGrid <= 0) { return pValue; }
+		return Math.round(pValue / tmpGrid) * tmpGrid;
 	}
 
 	_endNodeDrag(pEvent)
 	{
 		this._SVGElement.classList.remove('panning');
+		this._clearGuides();
 
-		let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${this._DragNodeHash}"]`);
-		if (tmpNodeGroup)
+		let tmpDragged = this._DragNodes || [];
+		for (let i = 0; i < tmpDragged.length; i++)
 		{
-			tmpNodeGroup.classList.remove('dragging');
+			let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${tmpDragged[i].Hash}"]`);
+			if (tmpNodeGroup) { tmpNodeGroup.classList.remove('dragging'); }
 		}
 
 		this._FlowView.renderFlow();
 		this._FlowView.marshalFromView();
 
-		let tmpNode = this._FlowView.getNode(this._DragNodeHash);
-		if (tmpNode && this._FlowView._EventHandlerProvider)
+		if (this._FlowView._EventHandlerProvider)
 		{
-			this._FlowView._EventHandlerProvider.fireEvent('onNodeMoved', tmpNode);
+			for (let i = 0; i < tmpDragged.length; i++)
+			{
+				let tmpNode = this._FlowView.getNode(tmpDragged[i].Hash);
+				if (tmpNode) { this._FlowView._EventHandlerProvider.fireEvent('onNodeMoved', tmpNode); }
+			}
 			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
 		}
 
 		this._State = INTERACTION_STATES.IDLE;
 		this._DragNodeHash = null;
+		this._DragNodes = null;
 	}
 
 	// ---- Panel Dragging ----
@@ -684,6 +876,71 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._ResizePanelHash = null;
 	}
 
+	// ---- Node Resizing ----
+	// Drag the bottom-right handle (rendered on the selected node when the flow's
+	// EnableNodeResizing option is on) to set Width/Height. Deltas are divided by the
+	// zoom so the corner tracks the pointer at any zoom level.
+
+	_startNodeResize(pEvent, pTarget)
+	{
+		if (!this._FlowView.options.EnableNodeResizing) return;
+
+		let tmpNodeHash = this._getNodeHash(pTarget);
+		if (!tmpNodeHash) return;
+
+		let tmpNode = this._FlowView.getNode(tmpNodeHash);
+		if (!tmpNode) return;
+
+		this._State = INTERACTION_STATES.RESIZING_NODE;
+		this._ResizeNodeHash = tmpNodeHash;
+		this._ResizeNodeStartX = pEvent.clientX;
+		this._ResizeNodeStartY = pEvent.clientY;
+		this._ResizeNodeStartWidth = tmpNode.Width || 180;
+		this._ResizeNodeStartHeight = tmpNode.Height || 80;
+
+		this._SVGElement.classList.add('panning');
+		if (pEvent.stopPropagation) pEvent.stopPropagation();
+	}
+
+	_onNodeResize(pEvent)
+	{
+		if (!this._ResizeNodeHash) return;
+
+		let tmpVS = this._FlowView.viewState;
+		let tmpDX = (pEvent.clientX - this._ResizeNodeStartX) / tmpVS.Zoom;
+		let tmpDY = (pEvent.clientY - this._ResizeNodeStartY) / tmpVS.Zoom;
+
+		let tmpMinW = this._FlowView.options.MinimumNodeWidth || 48;
+		let tmpMinH = this._FlowView.options.MinimumNodeHeight || 32;
+
+		let tmpNode = this._FlowView.getNode(this._ResizeNodeHash);
+		if (!tmpNode) return;
+
+		tmpNode.Width = Math.max(tmpMinW, this._snapToGrid(Math.round(this._ResizeNodeStartWidth + tmpDX)));
+		tmpNode.Height = Math.max(tmpMinH, this._snapToGrid(Math.round(this._ResizeNodeStartHeight + tmpDY)));
+
+		// Re-render so the body (and any HTML/image content) reflows to the new size.
+		this._FlowView.renderFlow();
+	}
+
+	_endNodeResize(pEvent)
+	{
+		this._SVGElement.classList.remove('panning');
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		let tmpNode = this._FlowView.getNode(this._ResizeNodeHash);
+		if (tmpNode && this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeResized', tmpNode);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+		}
+
+		this._State = INTERACTION_STATES.IDLE;
+		this._ResizeNodeHash = null;
+	}
+
 	// ---- Handle Dragging ----
 
 	_startHandleDrag(pEvent, pConnectionHash, pPanelHash, pHandleType, pIsTether)
@@ -1023,6 +1280,81 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._State = INTERACTION_STATES.IDLE;
 	}
 
+	// ---- Marquee selection (multi-select) ----
+	// A rubber-band rectangle drawn in world coordinates (inside the transformed viewport group), so it
+	// tracks the nodes under it regardless of pan/zoom. On release every node whose box intersects the
+	// rectangle is selected; a rectangle too small to be a deliberate drag is treated as a click that
+	// clears the selection.
+
+	_startMarquee(pEvent)
+	{
+		let tmpStart = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
+		this._MarqueeStartX = tmpStart.x;
+		this._MarqueeStartY = tmpStart.y;
+		this._MarqueeCurrentX = tmpStart.x;
+		this._MarqueeCurrentY = tmpStart.y;
+		this._State = INTERACTION_STATES.MARQUEE;
+
+		let tmpRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+		tmpRect.setAttribute('class', 'pict-flow-marquee');
+		tmpRect.setAttribute('x', tmpStart.x);
+		tmpRect.setAttribute('y', tmpStart.y);
+		tmpRect.setAttribute('width', 0);
+		tmpRect.setAttribute('height', 0);
+		this._MarqueeElement = tmpRect;
+		if (this._FlowView._ViewportElement) { this._FlowView._ViewportElement.appendChild(tmpRect); }
+	}
+
+	_onMarquee(pEvent)
+	{
+		if (!this._MarqueeElement) return;
+		let tmpCur = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
+		this._MarqueeCurrentX = tmpCur.x;
+		this._MarqueeCurrentY = tmpCur.y;
+		let tmpX = Math.min(this._MarqueeStartX, tmpCur.x);
+		let tmpY = Math.min(this._MarqueeStartY, tmpCur.y);
+		this._MarqueeElement.setAttribute('x', tmpX);
+		this._MarqueeElement.setAttribute('y', tmpY);
+		this._MarqueeElement.setAttribute('width', Math.abs(tmpCur.x - this._MarqueeStartX));
+		this._MarqueeElement.setAttribute('height', Math.abs(tmpCur.y - this._MarqueeStartY));
+	}
+
+	_endMarquee(pEvent)
+	{
+		let tmpX = Math.min(this._MarqueeStartX, this._MarqueeCurrentX);
+		let tmpY = Math.min(this._MarqueeStartY, this._MarqueeCurrentY);
+		let tmpW = Math.abs(this._MarqueeCurrentX - this._MarqueeStartX);
+		let tmpH = Math.abs(this._MarqueeCurrentY - this._MarqueeStartY);
+
+		if (this._MarqueeElement && this._MarqueeElement.parentNode)
+		{
+			this._MarqueeElement.parentNode.removeChild(this._MarqueeElement);
+		}
+		this._MarqueeElement = null;
+		this._State = INTERACTION_STATES.IDLE;
+
+		// Too small to be a deliberate drag: treat as a background click and clear the selection.
+		if (tmpW < 4 && tmpH < 4)
+		{
+			this._FlowView.deselectAll();
+			return;
+		}
+
+		let tmpHits = [];
+		let tmpNodes = this._FlowView._FlowData.Nodes || [];
+		let tmpDefaultW = this._FlowView.options.DefaultNodeWidth || 180;
+		let tmpDefaultH = this._FlowView.options.DefaultNodeHeight || 80;
+		for (let i = 0; i < tmpNodes.length; i++)
+		{
+			let tmpN = tmpNodes[i];
+			let tmpNW = (typeof tmpN.Width === 'number') ? tmpN.Width : tmpDefaultW;
+			let tmpNH = (typeof tmpN.Height === 'number') ? tmpN.Height : tmpDefaultH;
+			let tmpIntersects = !(tmpN.X > tmpX + tmpW || (tmpN.X + tmpNW) < tmpX || tmpN.Y > tmpY + tmpH || (tmpN.Y + tmpNH) < tmpY);
+			if (tmpIntersects) { tmpHits.push(tmpN.Hash); }
+		}
+		this._FlowView.selectNodes(tmpHits);
+	}
+
 	// ---- Connection Selection ----
 
 	_selectConnection(pTarget)

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

@@ -63,7 +63,9 @@ class PictServiceFlowRenderManager extends libFableServiceProviderBase
 		for (let i = 0; i < this._FlowView._FlowData.Nodes.length; i++)
 		{
 			let tmpNode = this._FlowView._FlowData.Nodes[i];
-			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedNodeHash === tmpNode.Hash);
+			let tmpSelectedSet = this._FlowView._FlowData.ViewState.SelectedNodeHashes;
+			let tmpIsSelected = (this._FlowView._FlowData.ViewState.SelectedNodeHash === tmpNode.Hash)
+				|| (Array.isArray(tmpSelectedSet) && tmpSelectedSet.indexOf(tmpNode.Hash) >= 0);
 			let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpNode.Type);
 
 			// Enrich saved port data with metadata from the node type's DefaultPorts.

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

@@ -25,6 +25,9 @@ class PictServiceFlowSelectionManager extends libFableServiceProviderBase
 	{
 		let tmpPreviousSelection = this._FlowView._FlowData.ViewState.SelectedNodeHash;
 		this._FlowView._FlowData.ViewState.SelectedNodeHash = pNodeHash;
+		// Single selection keeps the set in lockstep, so the renderer (which highlights the set) and
+		// any multi-select consumer see one consistent picture.
+		this._FlowView._FlowData.ViewState.SelectedNodeHashes = pNodeHash ? [pNodeHash] : [];
 		this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
 		this._FlowView._FlowData.ViewState.SelectedTetherHash = null;
 
@@ -37,6 +40,72 @@ class PictServiceFlowSelectionManager extends libFableServiceProviderBase
 		}
 	}
 
+	/**
+	 * The current selection set as an array of node hashes.
+	 * @returns {Array<string>}
+	 */
+	getSelectedNodeHashes()
+	{
+		let tmpSet = this._FlowView._FlowData.ViewState.SelectedNodeHashes;
+		return Array.isArray(tmpSet) ? tmpSet.slice() : [];
+	}
+
+	/**
+	 * Toggle a node's membership in the selection set (shift-click). The primary SelectedNodeHash
+	 * tracks the most recently affected member (or null when the set empties).
+	 * @param {string} pNodeHash
+	 */
+	toggleNodeSelection(pNodeHash)
+	{
+		if (!pNodeHash) return;
+		let tmpVS = this._FlowView._FlowData.ViewState;
+		let tmpSet = Array.isArray(tmpVS.SelectedNodeHashes) ? tmpVS.SelectedNodeHashes.slice() : [];
+		let tmpIndex = tmpSet.indexOf(pNodeHash);
+		if (tmpIndex >= 0)
+		{
+			tmpSet.splice(tmpIndex, 1);
+			tmpVS.SelectedNodeHash = tmpSet.length ? tmpSet[tmpSet.length - 1] : null;
+		}
+		else
+		{
+			tmpSet.push(pNodeHash);
+			tmpVS.SelectedNodeHash = pNodeHash;
+		}
+		tmpVS.SelectedNodeHashes = tmpSet;
+		tmpVS.SelectedConnectionHash = null;
+		tmpVS.SelectedTetherHash = null;
+
+		this._FlowView.renderFlow();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			let tmpNode = tmpVS.SelectedNodeHash ? this._FlowView._FlowData.Nodes.find((pNode) => pNode.Hash === tmpVS.SelectedNodeHash) : null;
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeSelected', tmpNode);
+		}
+	}
+
+	/**
+	 * Replace the selection set with the given node hashes (marquee result).
+	 * @param {Array<string>} pNodeHashes
+	 */
+	selectNodes(pNodeHashes)
+	{
+		let tmpVS = this._FlowView._FlowData.ViewState;
+		let tmpSet = Array.isArray(pNodeHashes) ? pNodeHashes.slice() : [];
+		tmpVS.SelectedNodeHashes = tmpSet;
+		tmpVS.SelectedNodeHash = tmpSet.length ? tmpSet[tmpSet.length - 1] : null;
+		tmpVS.SelectedConnectionHash = null;
+		tmpVS.SelectedTetherHash = null;
+
+		this._FlowView.renderFlow();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			let tmpNode = tmpVS.SelectedNodeHash ? this._FlowView._FlowData.Nodes.find((pNode) => pNode.Hash === tmpVS.SelectedNodeHash) : null;
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeSelected', tmpNode);
+		}
+	}
+
 	/**
 	 * Select a connection
 	 * @param {string|null} pConnectionHash - Hash of the connection to select, or null to deselect
@@ -83,24 +152,36 @@ class PictServiceFlowSelectionManager extends libFableServiceProviderBase
 	deselectAll()
 	{
 		this._FlowView._FlowData.ViewState.SelectedNodeHash = null;
+		this._FlowView._FlowData.ViewState.SelectedNodeHashes = [];
 		this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
 		this._FlowView._FlowData.ViewState.SelectedTetherHash = null;
 		this._FlowView.renderFlow();
 	}
 
 	/**
-	 * Delete the currently selected node or connection
+	 * Delete the current selection: every node in the multi-select set (falling back to the single
+	 * SelectedNodeHash), or the selected connection.
 	 * @returns {boolean}
 	 */
 	deleteSelected()
 	{
-		if (this._FlowView._FlowData.ViewState.SelectedNodeHash)
+		let tmpVS = this._FlowView._FlowData.ViewState;
+		let tmpSet = Array.isArray(tmpVS.SelectedNodeHashes) ? tmpVS.SelectedNodeHashes.slice() : [];
+		if (tmpSet.length === 0 && tmpVS.SelectedNodeHash) { tmpSet = [tmpVS.SelectedNodeHash]; }
+
+		if (tmpSet.length > 0)
 		{
-			return this._FlowView.removeNode(this._FlowView._FlowData.ViewState.SelectedNodeHash);
+			tmpVS.SelectedNodeHash = null;
+			tmpVS.SelectedNodeHashes = [];
+			let tmpRemovedAny = false;
+			// removeNode marshals/renders/fires events per call; for a multi-delete that is acceptable
+			// (selections are small) and keeps each removal's event semantics intact.
+			tmpSet.forEach((pHash) => { if (this._FlowView.removeNode(pHash)) { tmpRemovedAny = true; } });
+			return tmpRemovedAny;
 		}
-		if (this._FlowView._FlowData.ViewState.SelectedConnectionHash)
+		if (tmpVS.SelectedConnectionHash)
 		{
-			return this._FlowView.removeConnection(this._FlowView._FlowData.ViewState.SelectedConnectionHash);
+			return this._FlowView.removeConnection(tmpVS.SelectedConnectionHash);
 		}
 		return false;
 	}

package/source/views/PictView-Flow-Node.js

@@ -86,6 +86,13 @@ class PictViewFlowNode extends libPictView
 		pNodeData.Width = tmpWidth;
 		pNodeData.Height = tmpHeight;
 
+		// Optional rotation (degrees) about the node's center. Applied on top of the position
+		// translate so free-form canvases can tilt a card; zero / unset leaves it axis-aligned.
+		if (typeof pNodeData.Rotation === 'number' && pNodeData.Rotation)
+		{
+			tmpGroup.setAttribute('transform', PictViewFlowNode.nodeTransform(pNodeData.X, pNodeData.Y, pNodeData.Rotation, tmpWidth, tmpHeight));
+		}
+
 		// Determine node body mode from theme (bracket vs rect)
 		let tmpNodeBodyMode = 'rect';
 		if (this._FlowView._ThemeProvider)
@@ -160,8 +167,10 @@ class PictViewFlowNode extends libPictView
 				tmpGroup.appendChild(tmpTypeLabel);
 			}
 
-			// FlowCard metadata: icon in title bar, code badge in body (hover-only via CSS)
-			if (pNodeTypeConfig && pNodeTypeConfig.CardMetadata)
+			// FlowCard metadata: icon in title bar, code badge in body (hover-only via CSS). Skip the
+			// title icon entirely when there is no title bar (height 0), e.g. edge-to-edge moodboard
+			// cards, otherwise the default fallback glyph paints in the card's top-left corner.
+			if (pNodeTypeConfig && pNodeTypeConfig.CardMetadata && tmpTitleBarHeight > 0)
 			{
 				let tmpMeta = pNodeTypeConfig.CardMetadata;
 				let tmpIconProvider = this._FlowView._IconProvider;
@@ -312,6 +321,24 @@ class PictViewFlowNode extends libPictView
 			tmpGroup.appendChild(tmpIndicator);
 		}
 
+		// Resize handle: a small grip at the bottom-right corner, shown only when this node is
+		// selected and the flow allows node resizing. Its data-element-type routes pointer-down to
+		// the InteractionManager's node-resize path. Appended last so it paints over the body.
+		if (pIsSelected && this._FlowView.options && this._FlowView.options.EnableNodeResizing)
+		{
+			let tmpHandleSize = 14;
+			let tmpHandle = this._FlowView._SVGHelperProvider.createSVGElement('rect');
+			tmpHandle.setAttribute('class', 'pict-flow-node-resize-handle');
+			tmpHandle.setAttribute('x', String(tmpWidth - (tmpHandleSize - 4)));
+			tmpHandle.setAttribute('y', String(tmpHeight - (tmpHandleSize - 4)));
+			tmpHandle.setAttribute('width', String(tmpHandleSize));
+			tmpHandle.setAttribute('height', String(tmpHandleSize));
+			tmpHandle.setAttribute('rx', '3');
+			tmpHandle.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpHandle.setAttribute('data-element-type', 'node-resize');
+			tmpGroup.appendChild(tmpHandle);
+		}
+
 		pNodesLayer.appendChild(tmpGroup);
 	}
 
@@ -556,6 +583,26 @@ class PictViewFlowNode extends libPictView
 		return Math.min(Math.max(8, tmpRadius), Math.floor(pTitleBarHeight / 2));
 	}
 
+	/**
+	 * The SVG group transform for a node: a position translate, plus a rotation about the node's
+	 * center when a non-zero rotation (degrees) is given.
+	 * @param {number} pX
+	 * @param {number} pY
+	 * @param {number} pRotation - degrees; 0 / non-number means no rotation
+	 * @param {number} pWidth
+	 * @param {number} pHeight
+	 * @returns {string}
+	 */
+	static nodeTransform(pX, pY, pRotation, pWidth, pHeight)
+	{
+		let tmpRotation = (typeof pRotation === 'number') ? pRotation : 0;
+		if (!tmpRotation)
+		{
+			return `translate(${pX}, ${pY})`;
+		}
+		return `translate(${pX}, ${pY}) rotate(${tmpRotation} ${pWidth / 2} ${pHeight / 2})`;
+	}
+
 	_renderRectNodeBody(pGroup, pNodeData, pWidth, pHeight, pTitleBarHeight, pNodeTypeConfig)
 	{
 		// Per-card corner radius (a node-data or node-type override of the theme default), so a card

package/source/views/PictView-Flow.js

@@ -59,8 +59,18 @@ const _DefaultConfiguration =
 	EnableZooming: true,
 	EnableNodeDragging: true,
 	EnableConnectionCreation: true,
+	// When on, the selected node shows a bottom-right grip that resizes it by drag. Off by default
+	// so existing diagrams are unaffected; free-form canvases (moodboards) turn it on.
+	EnableNodeResizing: false,
 	EnableGridSnap: false,
 	GridSnapSize: 20,
+	// When on, several nodes can be selected at once: shift-click a node to toggle it, drag on the
+	// empty canvas to marquee-select (shift+drag pans), and dragging any selected node moves them all.
+	// Off by default so single-selection diagrams are unaffected; free-form canvases turn it on.
+	EnableMultiSelect: false,
+	// When on, dragging a single node shows alignment guide lines (and snaps) as its edges or centers
+	// line up with other nodes. Off by default; free-form canvases turn it on.
+	EnableAlignmentGuides: false,
 	EnableLayoutMenu: true,
 
 	MinZoom: 0.1,
@@ -70,6 +80,8 @@ const _DefaultConfiguration =
 	DefaultNodeType: 'default',
 	DefaultNodeWidth: 180,
 	DefaultNodeHeight: 80,
+	MinimumNodeWidth: 48,
+	MinimumNodeHeight: 32,
 
 	// Properties panel for connections (edges). Connections are not typed, so one config serves
 	// them all: { PanelType, DefaultWidth, DefaultHeight, Title, Configuration }. When set, a
@@ -227,6 +239,9 @@ class PictViewFlow extends libPictView
 				PanY: 0,
 				Zoom: 1,
 				SelectedNodeHash: null,
+				// The full selection set (multi-select). SelectedNodeHash stays the primary / most
+				// recently touched member for backward compatibility; single-select keeps it == [hash].
+				SelectedNodeHashes: [],
 				SelectedConnectionHash: null,
 				SelectedTetherHash: null
 			},
@@ -558,15 +573,13 @@ class PictViewFlow extends libPictView
 			}
 		}
 
-		// Setup the node renderer
+		// Setup the node renderer. A consumer can override the node title-bar height (e.g. a moodboard
+		// sets it to 0 for edge-to-edge image and note cards) via the flow-level NodeTitleBarHeight
+		// option; otherwise the renderer keeps its own default.
+		let tmpNodeViewOptions = { ViewIdentifier: `Flow-NodeRenderer-${tmpViewIdentifier}`, AutoRender: false };
+		if (typeof this.options.NodeTitleBarHeight === 'number') { tmpNodeViewOptions.NodeTitleBarHeight = this.options.NodeTitleBarHeight; }
 		this._NodeView = this.fable.instantiateServiceProviderWithoutRegistration('PictViewFlowNode',
-			Object.assign({},
-				libPictViewFlowNode.default_configuration,
-				{
-					ViewIdentifier: `Flow-NodeRenderer-${tmpViewIdentifier}`,
-					AutoRender: false
-				}
-			));
+			Object.assign({}, libPictViewFlowNode.default_configuration, tmpNodeViewOptions));
 		this._NodeView._FlowView = this;
 
 		// Setup the properties panel renderer
@@ -616,6 +629,33 @@ class PictViewFlow extends libPictView
 		return this._SelectionManager.selectNode(pNodeHash);
 	}
 
+	/**
+	 * Toggle a node's membership in the selection set (multi-select; shift-click).
+	 * @param {string} pNodeHash
+	 */
+	toggleNodeSelection(pNodeHash)
+	{
+		return this._SelectionManager.toggleNodeSelection(pNodeHash);
+	}
+
+	/**
+	 * Replace the selection set with the given node hashes (multi-select; marquee result).
+	 * @param {Array<string>} pNodeHashes
+	 */
+	selectNodes(pNodeHashes)
+	{
+		return this._SelectionManager.selectNodes(pNodeHashes);
+	}
+
+	/**
+	 * The current selection set as an array of node hashes.
+	 * @returns {Array<string>}
+	 */
+	getSelectedNodeHashes()
+	{
+		return this._SelectionManager.getSelectedNodeHashes();
+	}
+
 	/**
 	 * Select a connection
 	 * @param {string|null} pConnectionHash - Hash of the connection to select, or null to deselect

package/test/InteractionManager_tests.js

@@ -0,0 +1,279 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libInteractionManager = require('../source/services/PictService-Flow-InteractionManager.js');
+const STATES = libInteractionManager.INTERACTION_STATES;
+
+// A minimal FlowView stand-in: just the surface the node-resize path touches.
+function makeMockFlowView(pNode)
+{
+	let tmpFired = [];
+	return {
+		options: { EnableNodeResizing: true, MinimumNodeWidth: 48, MinimumNodeHeight: 32 },
+		viewState: { Zoom: 1 },
+		flowData: {},
+		_nodes: (function () { let m = {}; m[pNode.Hash] = pNode; return m; })(),
+		getNode: function (pHash) { return this._nodes[pHash] || null; },
+		renderFlow: function () { this._rendered = (this._rendered || 0) + 1; },
+		marshalFromView: function () { this._marshaled = (this._marshaled || 0) + 1; },
+		_EventHandlerProvider: { fireEvent: function (pName) { tmpFired.push(pName); } },
+		_firedEvents: tmpFired
+	};
+}
+
+function makeTarget(pHash)
+{
+	return { getAttribute: function (pAttr) { return (pAttr === 'data-node-hash') ? pHash : null; } };
+}
+
+function makeManager(pFable, pNode)
+{
+	let tmpFV = makeMockFlowView(pNode);
+	let tmpIM = new libInteractionManager(pFable, { FlowView: tmpFV }, 'IM-Test');
+	// initialize() would set this from the real SVG element; stub the class-list surface.
+	tmpIM._SVGElement = { classList: { add: function () {}, remove: function () {} } };
+	return { im: tmpIM, fv: tmpFV };
+}
+
+suite('PictService-Flow-InteractionManager',
+function ()
+{
+	let _Fable;
+	setup(function () { _Fable = new libFable({}); });
+
+	suite('node resize',
+	function ()
+	{
+		test('resizes from the start size by the pointer delta divided by zoom',
+		function ()
+		{
+			let tmpNode = { Hash: 'n1', X: 0, Y: 0, Width: 100, Height: 80 };
+			let tmp = makeManager(_Fable, tmpNode);
+			tmp.fv.viewState.Zoom = 2;
+
+			tmp.im._startNodeResize({ clientX: 200, clientY: 100, stopPropagation: function () {} }, makeTarget('n1'));
+			libExpect(tmp.im._State).to.equal(STATES.RESIZING_NODE);
+
+			// +100px / +40px at zoom 2 -> +50 / +20 world units
+			tmp.im._onNodeResize({ clientX: 300, clientY: 140 });
+			libExpect(tmpNode.Width).to.equal(150);
+			libExpect(tmpNode.Height).to.equal(100);
+		});
+
+		test('clamps to the minimum size',
+		function ()
+		{
+			let tmpNode = { Hash: 'n1', Width: 100, Height: 80 };
+			let tmp = makeManager(_Fable, tmpNode);
+
+			tmp.im._startNodeResize({ clientX: 0, clientY: 0, stopPropagation: function () {} }, makeTarget('n1'));
+			tmp.im._onNodeResize({ clientX: -1000, clientY: -1000 });
+			libExpect(tmpNode.Width).to.equal(48);
+			libExpect(tmpNode.Height).to.equal(32);
+		});
+
+		test('end fires onNodeResized + onFlowChanged, marshals, and returns to idle',
+		function ()
+		{
+			let tmpNode = { Hash: 'n1', Width: 100, Height: 80 };
+			let tmp = makeManager(_Fable, tmpNode);
+
+			tmp.im._startNodeResize({ clientX: 0, clientY: 0, stopPropagation: function () {} }, makeTarget('n1'));
+			tmp.im._endNodeResize({});
+
+			libExpect(tmp.fv._firedEvents).to.include('onNodeResized');
+			libExpect(tmp.fv._firedEvents).to.include('onFlowChanged');
+			libExpect(tmp.fv._marshaled).to.be.greaterThan(0);
+			libExpect(tmp.im._State).to.equal(STATES.IDLE);
+			libExpect(tmp.im._ResizeNodeHash).to.equal(null);
+		});
+
+		test('does not start when EnableNodeResizing is off',
+		function ()
+		{
+			let tmpNode = { Hash: 'n1', Width: 100, Height: 80 };
+			let tmp = makeManager(_Fable, tmpNode);
+			tmp.fv.options.EnableNodeResizing = false;
+
+			tmp.im._startNodeResize({ clientX: 0, clientY: 0, stopPropagation: function () {} }, makeTarget('n1'));
+			libExpect(tmp.im._State).to.equal(STATES.IDLE);
+			libExpect(tmp.im._ResizeNodeHash).to.equal(null);
+		});
+	});
+
+	suite('grid snap',
+	function ()
+	{
+		test('snaps a value to the grid when EnableGridSnap is on',
+		function ()
+		{
+			let tmp = makeManager(_Fable, { Hash: 'n1' });
+			tmp.fv.options.EnableGridSnap = true;
+			tmp.fv.options.GridSnapSize = 10;
+			libExpect(tmp.im._snapToGrid(37)).to.equal(40);
+			libExpect(tmp.im._snapToGrid(53)).to.equal(50);
+			libExpect(tmp.im._snapToGrid(45)).to.equal(50);
+		});
+
+		test('passes the value through when EnableGridSnap is off',
+		function ()
+		{
+			let tmp = makeManager(_Fable, { Hash: 'n1' });
+			tmp.fv.options.EnableGridSnap = false;
+			libExpect(tmp.im._snapToGrid(37)).to.equal(37);
+		});
+
+		test('passes through when the grid size is zero or missing',
+		function ()
+		{
+			let tmp = makeManager(_Fable, { Hash: 'n1' });
+			tmp.fv.options.EnableGridSnap = true;
+			tmp.fv.options.GridSnapSize = 0;
+			libExpect(tmp.im._snapToGrid(37)).to.equal(37);
+		});
+	});
+
+	// ---- Multi-select ----
+
+	function makeMultiMockFlowView(pNodes)
+	{
+		let tmpSelected = [];
+		let tmpCalls = { selectNodes: [], deselectAll: 0, updateNodePosition: [] };
+		let tmpViewportChildren = [];
+		return {
+			options: { EnableMultiSelect: true, EnableNodeDragging: true, DefaultNodeWidth: 180, DefaultNodeHeight: 80 },
+			viewState: { Zoom: 1 },
+			_FlowData: { Nodes: pNodes.slice() },
+			_ViewportElement: { appendChild: function (e) { tmpViewportChildren.push(e); }, removeChild: function (e) { tmpViewportChildren = tmpViewportChildren.filter((c) => c !== e); } },
+			_NodesLayer: { querySelector: function () { return { classList: { add: function () {}, remove: function () {} } }; } },
+			_nodes: (function () { let m = {}; pNodes.forEach((n) => { m[n.Hash] = n; }); return m; })(),
+			getNode: function (pHash) { return this._nodes[pHash] || null; },
+			// Identity coordinate mapping so screen deltas equal world deltas in the test.
+			screenToSVGCoords: function (pX, pY) { return { x: pX, y: pY }; },
+			getSelectedNodeHashes: function () { return tmpSelected.slice(); },
+			selectNode: function (pHash) { tmpSelected = pHash ? [pHash] : []; },
+			selectNodes: function (pHashes) { tmpSelected = pHashes.slice(); tmpCalls.selectNodes.push(pHashes.slice()); },
+			deselectAll: function () { tmpSelected = []; tmpCalls.deselectAll++; },
+			updateNodePosition: function (pHash, pX, pY) { let n = this._nodes[pHash]; if (n) { n.X = pX; n.Y = pY; } tmpCalls.updateNodePosition.push({ Hash: pHash, X: pX, Y: pY }); },
+			renderFlow: function () {},
+			marshalFromView: function () {},
+			_EventHandlerProvider: { fireEvent: function () {} },
+			_calls: tmpCalls,
+			_setSelected: function (pArr) { tmpSelected = pArr.slice(); }
+		};
+	}
+
+	function makeMultiManager(pFable, pNodes)
+	{
+		let tmpFV = makeMultiMockFlowView(pNodes);
+		let tmpIM = new libInteractionManager(pFable, { FlowView: tmpFV }, 'IM-Multi-Test');
+		tmpIM._SVGElement = { classList: { add: function () {}, remove: function () {} } };
+		return { im: tmpIM, fv: tmpFV };
+	}
+
+	suite('marquee selection',
+	function ()
+	{
+		let _MNodes;
+		let _SavedDocument;
+		setup(function ()
+		{
+			_MNodes = [ { Hash: 'n1', X: 0, Y: 0, Width: 100, Height: 80 }, { Hash: 'n2', X: 200, Y: 0, Width: 100, Height: 80 }, { Hash: 'n3', X: 400, Y: 0, Width: 100, Height: 80 } ];
+			// The marquee draws a real SVG <rect>; stub the DOM factory for the headless test, restore after.
+			_SavedDocument = global.document;
+			global.document = { createElementNS: function () { let tmpEl = { setAttribute: function (pK, pV) { tmpEl[pK] = pV; } }; return tmpEl; } };
+		});
+		teardown(function () { global.document = _SavedDocument; });
+
+		test('a drag selects every node whose box intersects the rectangle',
+		function ()
+		{
+			let tmp = makeMultiManager(_Fable, _MNodes);
+			tmp.im._startMarquee({ clientX: 0, clientY: 0 });
+			libExpect(tmp.im._State).to.equal(STATES.MARQUEE);
+			tmp.im._onMarquee({ clientX: 250, clientY: 100 });
+			tmp.im._endMarquee({ clientX: 250, clientY: 100 });
+			libExpect(tmp.fv._calls.selectNodes.length).to.equal(1);
+			libExpect(tmp.fv._calls.selectNodes[0]).to.deep.equal(['n1', 'n2']);
+			libExpect(tmp.im._State).to.equal(STATES.IDLE);
+		});
+
+		test('a tiny rectangle (a click) clears the selection instead of selecting',
+		function ()
+		{
+			let tmp = makeMultiManager(_Fable, _MNodes);
+			tmp.im._startMarquee({ clientX: 10, clientY: 10 });
+			tmp.im._onMarquee({ clientX: 12, clientY: 11 });
+			tmp.im._endMarquee({ clientX: 12, clientY: 11 });
+			libExpect(tmp.fv._calls.deselectAll).to.equal(1);
+			libExpect(tmp.fv._calls.selectNodes.length).to.equal(0);
+		});
+	});
+
+	suite('multi-drag',
+	function ()
+	{
+		let _MNodes;
+		setup(function () { _MNodes = [ { Hash: 'n1', X: 0, Y: 0, Width: 100, Height: 80 }, { Hash: 'n2', X: 200, Y: 50, Width: 100, Height: 80 } ]; });
+
+		test('dragging a node in the selection moves every selected node by the same delta',
+		function ()
+		{
+			let tmp = makeMultiManager(_Fable, _MNodes);
+			tmp.fv._setSelected(['n1', 'n2']);
+			tmp.im._startNodeDrag({ clientX: 0, clientY: 0 }, makeTarget('n1'));
+			libExpect(tmp.im._State).to.equal(STATES.DRAGGING_NODE);
+			libExpect(tmp.im._DragNodes.length).to.equal(2);
+
+			tmp.im._onNodeDrag({ clientX: 30, clientY: 20 });
+			libExpect(_MNodes[0].X).to.equal(30);
+			libExpect(_MNodes[0].Y).to.equal(20);
+			libExpect(_MNodes[1].X).to.equal(230);
+			libExpect(_MNodes[1].Y).to.equal(70);
+		});
+
+		test('dragging a node outside the selection collapses to just that node',
+		function ()
+		{
+			let tmp = makeMultiManager(_Fable, _MNodes);
+			tmp.fv._setSelected(['n2']);
+			tmp.im._startNodeDrag({ clientX: 0, clientY: 0 }, makeTarget('n1'));
+			libExpect(tmp.im._DragNodes.length).to.equal(1);
+			libExpect(tmp.im._DragNodes[0].Hash).to.equal('n1');
+		});
+	});
+
+	suite('alignment guides',
+	function ()
+	{
+		test('snaps the dragged node so a near edge lines up, and reports guides',
+		function ()
+		{
+			let tmpNodes = [ { Hash: 'drag', X: 0, Y: 0, Width: 100, Height: 80 }, { Hash: 'other', X: 200, Y: 0, Width: 100, Height: 80 } ];
+			let tmp = makeMultiManager(_Fable, tmpNodes);
+			let tmpDrag = tmpNodes[0];
+			// Move the dragged node so its left edge (197) is 3px from the other node's left (200).
+			let tmpResult = tmp.im._alignmentFor(tmpDrag, 197, 0);
+			libExpect(tmpResult.X).to.equal(200); // snapped to align left edges
+			libExpect(tmpResult.Y).to.equal(0);   // tops already aligned
+			let tmpVGuide = tmpResult.Guides.find(function (g) { return g.Type === 'v'; });
+			let tmpHGuide = tmpResult.Guides.find(function (g) { return g.Type === 'h'; });
+			libExpect(tmpVGuide).to.be.an('object');
+			libExpect(tmpVGuide.Pos).to.equal(200);
+			libExpect(tmpHGuide).to.be.an('object');
+			libExpect(tmpHGuide.Pos).to.equal(0);
+		});
+
+		test('no snap or guides when nothing is within the threshold',
+		function ()
+		{
+			let tmpNodes = [ { Hash: 'drag', X: 0, Y: 0, Width: 100, Height: 80 }, { Hash: 'other', X: 200, Y: 0, Width: 100, Height: 80 } ];
+			let tmp = makeMultiManager(_Fable, tmpNodes);
+			let tmpResult = tmp.im._alignmentFor(tmpNodes[0], 500, 500);
+			libExpect(tmpResult.X).to.equal(500);
+			libExpect(tmpResult.Y).to.equal(500);
+			libExpect(tmpResult.Guides.length).to.equal(0);
+		});
+	});
+});

package/test/NodeView_tests.js

@@ -46,4 +46,21 @@ function ()
 			}
 		});
 	});
+
+	suite('nodeTransform',
+	function ()
+	{
+		test('a zero / absent rotation is a plain position translate',
+		function ()
+		{
+			libExpect(libPictViewFlowNode.nodeTransform(40, 60, 0, 100, 80)).to.equal('translate(40, 60)');
+			libExpect(libPictViewFlowNode.nodeTransform(40, 60, null, 100, 80)).to.equal('translate(40, 60)');
+		});
+
+		test('a non-zero rotation rotates about the node center',
+		function ()
+		{
+			libExpect(libPictViewFlowNode.nodeTransform(40, 60, 15, 100, 80)).to.equal('translate(40, 60) rotate(15 50 40)');
+		});
+	});
 });

package/test/SelectionManager_tests.js

@@ -0,0 +1,185 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libSelectionManager = require('../source/services/PictService-Flow-SelectionManager.js');
+
+// A minimal FlowView stand-in: just the surface the selection manager touches.
+function makeMockFlowView(pNodes)
+{
+	let tmpFired = [];
+	let tmpRemoved = [];
+	return {
+		_FlowData:
+		{
+			Nodes: pNodes.slice(),
+			Connections: [],
+			OpenPanels: [],
+			ViewState: { SelectedNodeHash: null, SelectedNodeHashes: [], SelectedConnectionHash: null, SelectedTetherHash: null }
+		},
+		renderFlow: function () { this._rendered = (this._rendered || 0) + 1; },
+		removeNode: function (pHash) { tmpRemoved.push(pHash); this._FlowData.Nodes = this._FlowData.Nodes.filter((n) => n.Hash !== pHash); return true; },
+		removeConnection: function (pHash) { tmpRemoved.push('conn:' + pHash); return true; },
+		_EventHandlerProvider: { fireEvent: function (pName, pPayload) { tmpFired.push({ Name: pName, Payload: pPayload }); } },
+		_firedEvents: tmpFired,
+		_removed: tmpRemoved
+	};
+}
+
+function makeManager(pFable, pNodes)
+{
+	let tmpFV = makeMockFlowView(pNodes);
+	let tmpSM = new libSelectionManager(pFable, { FlowView: tmpFV }, 'SM-Test');
+	return { sm: tmpSM, fv: tmpFV, vs: tmpFV._FlowData.ViewState };
+}
+
+suite('PictService-Flow-SelectionManager',
+function ()
+{
+	let _Fable;
+	let _Nodes;
+	setup(function ()
+	{
+		_Fable = new libFable({});
+		_Nodes = [ { Hash: 'n1', X: 0, Y: 0, Width: 100, Height: 80 }, { Hash: 'n2', X: 200, Y: 0, Width: 100, Height: 80 }, { Hash: 'n3', X: 400, Y: 0, Width: 100, Height: 80 } ];
+	});
+
+	suite('single selection keeps the set in lockstep',
+	function ()
+	{
+		test('selectNode sets the primary and a one-element set',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNode('n2');
+			libExpect(tmp.vs.SelectedNodeHash).to.equal('n2');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n2']);
+		});
+
+		test('selectNode(null) clears both the primary and the set',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNode('n2');
+			tmp.sm.selectNode(null);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal(null);
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal([]);
+		});
+	});
+
+	suite('toggleNodeSelection',
+	function ()
+	{
+		test('adds a node, then a second, then removes the first',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.toggleNodeSelection('n1');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n1']);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal('n1');
+
+			tmp.sm.toggleNodeSelection('n3');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n1', 'n3']);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal('n3');
+
+			tmp.sm.toggleNodeSelection('n1');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n3']);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal('n3');
+		});
+
+		test('toggling the last member empties the set and nulls the primary',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.toggleNodeSelection('n1');
+			tmp.sm.toggleNodeSelection('n1');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal([]);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal(null);
+		});
+	});
+
+	suite('selectNodes',
+	function ()
+	{
+		test('replaces the set and sets the primary to the last hash',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNode('n1');
+			tmp.sm.selectNodes(['n2', 'n3']);
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n2', 'n3']);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal('n3');
+		});
+
+		test('an empty array clears the selection',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNodes(['n1', 'n2']);
+			tmp.sm.selectNodes([]);
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal([]);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal(null);
+		});
+
+		test('getSelectedNodeHashes returns a copy (mutating it does not change state)',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNodes(['n1', 'n2']);
+			let tmpCopy = tmp.sm.getSelectedNodeHashes();
+			tmpCopy.push('n3');
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal(['n1', 'n2']);
+		});
+	});
+
+	suite('deleteSelected (multi)',
+	function ()
+	{
+		test('removes every node in the selection set',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNodes(['n1', 'n3']);
+			let tmpResult = tmp.sm.deleteSelected();
+			libExpect(tmpResult).to.equal(true);
+			libExpect(tmp.fv._removed).to.deep.equal(['n1', 'n3']);
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal([]);
+			libExpect(tmp.vs.SelectedNodeHash).to.equal(null);
+		});
+
+		test('falls back to the single primary when the set is empty',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.fv._FlowData.ViewState.SelectedNodeHash = 'n2';
+			tmp.fv._FlowData.ViewState.SelectedNodeHashes = [];
+			tmp.sm.deleteSelected();
+			libExpect(tmp.fv._removed).to.deep.equal(['n2']);
+		});
+
+		test('deletes the selected connection when no nodes are selected',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.fv._FlowData.ViewState.SelectedConnectionHash = 'c1';
+			tmp.sm.deleteSelected();
+			libExpect(tmp.fv._removed).to.deep.equal(['conn:c1']);
+		});
+	});
+
+	suite('deselectAll',
+	function ()
+	{
+		test('clears the primary, the set, and the connection/tether selections',
+		function ()
+		{
+			let tmp = makeManager(_Fable, _Nodes);
+			tmp.sm.selectNodes(['n1', 'n2']);
+			tmp.fv._FlowData.ViewState.SelectedConnectionHash = 'c1';
+			tmp.sm.deselectAll();
+			libExpect(tmp.vs.SelectedNodeHash).to.equal(null);
+			libExpect(tmp.vs.SelectedNodeHashes).to.deep.equal([]);
+			libExpect(tmp.vs.SelectedConnectionHash).to.equal(null);
+		});
+	});
+});