pict-section-flow 1.2.0 → 1.4.0

package/test/ConnectionStyle_tests.js

@@ -0,0 +1,90 @@
+const libFable = require('fable');
+const libChai = require('chai');
+const libExpect = libChai.expect;
+
+const libConnectorShapes = require('../source/providers/PictProvider-Flow-ConnectorShapes.js');
+const libConnectionRenderer = require('../source/services/PictService-Flow-ConnectionRenderer.js');
+
+// Per-connection appearance: a host (a moodboard) styles its own edges by stamping Data on a
+// connection -- stroke color / width / style and the marker at each end ('none' | 'arrow' | 'dot' |
+// 'square'). The renderer applies these only when present, so default (workflow) edges are untouched.
+suite('Flow connection appearance',
+function ()
+{
+	suite('marker defs',
+	function ()
+	{
+		test('generateMarkerDefs includes the generic arrow / dot / square markers (color-matched)',
+		function ()
+		{
+			let tmpProvider = new libConnectorShapes(new libFable({}), {}, 'CS-Test');
+			let tmpDefs = tmpProvider.generateMarkerDefs('view1');
+			libExpect(tmpDefs).to.contain('flow-marker-arrow-end-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-arrow-start-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-dot-view1');
+			libExpect(tmpDefs).to.contain('flow-marker-square-view1');
+			libExpect(tmpDefs).to.contain('context-stroke');
+		});
+	});
+
+	suite('_connectionMarkerId',
+	function ()
+	{
+		let _Resolve = libConnectionRenderer.prototype._connectionMarkerId;
+
+		test('resolves marker names to def ids per end; none / unknown -> null',
+		function ()
+		{
+			libExpect(_Resolve('arrow', 'end', 'v')).to.equal('flow-marker-arrow-end-v');
+			libExpect(_Resolve('arrow', 'start', 'v')).to.equal('flow-marker-arrow-start-v');
+			libExpect(_Resolve('dot', 'end', 'v')).to.equal('flow-marker-dot-v');
+			libExpect(_Resolve('square', 'end', 'v')).to.equal('flow-marker-square-v');
+			libExpect(_Resolve('none', 'end', 'v')).to.equal(null);
+			libExpect(_Resolve(undefined, 'end', 'v')).to.equal(null);
+		});
+	});
+
+	suite('_applyConnectionStyle',
+	function ()
+	{
+		let _Self = { _connectionMarkerId: libConnectionRenderer.prototype._connectionMarkerId };
+		function makePath()
+		{
+			let tmpAttrs = {};
+			// Stroke color / width / dash are set via inline style (they must outrank the .pict-flow-connection
+			// CSS rule); markers are SVG attributes.
+			return { style: {}, setAttribute: function (pK, pV) { tmpAttrs[pK] = pV; }, removeAttribute: function (pK) { delete tmpAttrs[pK]; }, attrs: tmpAttrs };
+		}
+
+		test('applies stroke color / width / dash via inline style + markers via attributes',
+		function ()
+		{
+			let tmpPath = makePath();
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, { StrokeColor: '#abcdef', StrokeWidth: 4, StrokeStyle: 'dashed', SourceMarker: 'dot', TargetMarker: 'arrow' }, 'v');
+			libExpect(tmpPath.style.stroke).to.equal('#abcdef');
+			libExpect(tmpPath.style.strokeWidth).to.equal('4');
+			libExpect(tmpPath.style.strokeDasharray).to.equal('7,5');
+			libExpect(tmpPath.attrs['marker-start']).to.equal('url(#flow-marker-dot-v)');
+			libExpect(tmpPath.attrs['marker-end']).to.equal('url(#flow-marker-arrow-end-v)');
+		});
+
+		test('solid sets the dash to none; a none marker clears that end',
+		function ()
+		{
+			let tmpPath = makePath();
+			tmpPath.setAttribute('marker-end', 'url(#old)');
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, { StrokeStyle: 'solid', TargetMarker: 'none' }, 'v');
+			libExpect(tmpPath.style.strokeDasharray).to.equal('none');
+			libExpect(tmpPath.attrs['marker-end']).to.equal(undefined);
+		});
+
+		test('Data with no style keys leaves the element untouched',
+		function ()
+		{
+			let tmpPath = makePath();
+			libConnectionRenderer.prototype._applyConnectionStyle.call(_Self, tmpPath, {}, 'v');
+			libExpect(Object.keys(tmpPath.attrs).length).to.equal(0);
+			libExpect(Object.keys(tmpPath.style).length).to.equal(0);
+		});
+	});
+});

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