pict-section-flow 1.1.0 → 1.3.0

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);
 	}
 
@@ -529,8 +556,64 @@ class PictViewFlowNode extends libPictView
 	 * @param {number} pTitleBarHeight
 	 * @param {Object} pNodeTypeConfig
 	 */
+	// Append a CSS fragment to an SVG element's inline style (which wins over the stylesheet), keeping
+	// any existing inline style.
+	_appendElementStyle(pElement, pStyleFragment)
+	{
+		let tmpExisting = pElement.getAttribute('style') || '';
+		if (tmpExisting && tmpExisting.charAt(tmpExisting.length - 1) !== ';') { tmpExisting += ';'; }
+		pElement.setAttribute('style', tmpExisting + pStyleFragment);
+	}
+
+	/**
+	 * Height of the strip that squares off the bottom corners of the title bar. It must cover the
+	 * bottom rounded corners (so the title bar meets the body in a straight seam) but must never reach
+	 * the top ones, so it is capped at half the title bar height. Without the cap a corner radius
+	 * larger than the title bar (a capsule card: radius 24 on a 22px bar) yields a strip taller than
+	 * the whole title bar, which paints over the rounded TOP corners and makes the card read as square
+	 * on top and rounded only on the bottom.
+	 *
+	 * @param {number|null} pCornerRadius - the card corner radius, or null for the theme default
+	 * @param {number} pTitleBarHeight - the title bar height in user units
+	 * @returns {number}
+	 */
+	static titleBarBottomStripHeight(pCornerRadius, pTitleBarHeight)
+	{
+		let tmpRadius = (typeof pCornerRadius === 'number') ? pCornerRadius : 0;
+		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
+		// type can read as a rounded rectangle, a capsule, or a sharp box. null leaves the
+		// theme/CSS default in place. Set as the --pf-node-body-radius custom property on the node
+		// group; the body and title-bar both read it through their `rx: var(--pf-node-body-radius)`,
+		// and it inherits to both, so one assignment rounds the whole card.
+		let tmpCornerRadius = (typeof pNodeData.CornerRadius === 'number') ? pNodeData.CornerRadius
+			: ((pNodeTypeConfig && typeof pNodeTypeConfig.CornerRadius === 'number') ? pNodeTypeConfig.CornerRadius : null);
+		if (tmpCornerRadius != null) { this._appendElementStyle(pGroup, '--pf-node-body-radius:' + tmpCornerRadius + 'px'); }
+
 		// Node body (main rectangle)
 		let tmpBody = this._FlowView._SVGHelperProvider.createSVGElement('rect');
 		tmpBody.setAttribute('class', 'pict-flow-node-body');
@@ -598,16 +681,17 @@ class PictViewFlowNode extends libPictView
 		{
 			tmpTitleBar.setAttribute('fill', pNodeData.TitleBarColor);
 		}
-
 		pGroup.appendChild(tmpTitleBar);
 
-		// Title bar bottom fill (to square off the rounded corners at the bottom of the title bar)
+		// Title bar bottom fill: squares off the rounded corners at the bottom of the title bar so it
+		// meets the body in a straight seam. See titleBarBottomStripHeight for why it is capped.
+		let tmpBottomStripHeight = PictViewFlowNode.titleBarBottomStripHeight(tmpCornerRadius, pTitleBarHeight);
 		let tmpTitleBarBottom = this._FlowView._SVGHelperProvider.createSVGElement('rect');
 		tmpTitleBarBottom.setAttribute('class', 'pict-flow-node-title-bar-bottom');
 		tmpTitleBarBottom.setAttribute('x', '0');
-		tmpTitleBarBottom.setAttribute('y', String(pTitleBarHeight - 8));
+		tmpTitleBarBottom.setAttribute('y', String(pTitleBarHeight - tmpBottomStripHeight));
 		tmpTitleBarBottom.setAttribute('width', String(pWidth));
-		tmpTitleBarBottom.setAttribute('height', '8');
+		tmpTitleBarBottom.setAttribute('height', String(tmpBottomStripHeight));
 		tmpTitleBarBottom.setAttribute('data-node-hash', pNodeData.Hash);
 		tmpTitleBarBottom.setAttribute('data-element-type', 'node-body');
 

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);
+		});
+	});
+});