Deterministic layout

components/graph/base.js

@@ -15,6 +15,8 @@ const {
 
 const math = require('mathjs');
 
+const { size } = require('../../constants/view');
+
 class GraphView extends GraphViewBase {
 	constructor(props) {
 		if (!props.layoutEngine) {
@@ -151,8 +153,6 @@ GraphView.defaultProps = merge(GraphViewBase.defaultProps, {
 	layoutEngineType: null,
 });
 
-const size = 120;
-
 class Node extends NodeBase {
 	constructor(props) {
 		super(props);

components/graph/index.js

@@ -31,6 +31,8 @@ const {
 	PA_VOLUME_NORM,
 } = require('../../constants/pulse');
 
+const { size } = require('../../constants/view');
+
 const VolumeSlider = require('../../components/volume-slider');
 
 const {
@@ -106,7 +108,6 @@ const graphConfig = {
 	},
 };
 
-const size = 120;
 const s2 = size / 2;
 
 const Sink = () => r.path({

components/graph/layout-engine.js

@@ -1,5 +1,17 @@
 
-const size = 200;
+const { size } = require('../../constants/view');
+
+const margin = size / 10;
+const step = size + (2 * margin);
+
+function nodesIntersect(a, b) {
+	if (a.x === undefined || a.y === undefined || b.x === undefined || b.y === undefined) {
+		return undefined;
+	}
+
+	return (((a.x - size - margin) < b.x) && (b.x < (a.x + size + margin))) &&
+		(((a.y - size - margin) < b.y) && (b.y < (a.y + size + margin)));
+}
 
 module.exports = class LayoutEngine {
 	constructor(graphViewProps) {
@@ -10,21 +22,39 @@ module.exports = class LayoutEngine {
 		return node;
 	}
 
-	adjustNodes(nodes, nodesMap) {
+	adjustNodes(nodes) {
 		nodes.forEach(node => {
+			if (node.type === 'satellite') {
+				return;
+			}
+
 			if (node.x !== undefined) {
 				return;
 			}
 
 			if (node.type === 'source') {
-				node.x = 0 * size;
+				node.x = 0 * step;
 			} else if (node.type === 'sink') {
-				node.x = 10 * size;
+				node.x = 8 * step;
 			} else {
-				node.x = (2 * size) + (Math.round(6 * Math.random()) * size);
+				node.x = (2 * step) + ((node.index % 5) * step);
 			}
 
-			node.y = Math.random() * 1200;
+			node.y = 0;
+
+			for (const otherNode of nodes) {
+				if (otherNode.type === 'satellite') {
+					continue;
+				}
+
+				if (otherNode === node) {
+					continue;
+				}
+
+				if (nodesIntersect(node, otherNode)) {
+					node.y += size + margin;
+				}
+			}
 		});
 
 		return nodes;

constants/view.js

@@ -0,0 +1,4 @@
+
+const size = 120;
+
+module.exports = { size };