init

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,76 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/

actions/index.js

@@ -0,0 +1,5 @@
+
+module.exports = Object.assign(
+	{},
+	require('./pulse'),
+);

actions/pulse.js

@@ -0,0 +1,18 @@
+
+const { createActions: createActionCreators } = require('redux-actions');
+
+module.exports = createActionCreators({
+	PULSE: {
+		READY: null,
+		CLOSE: null,
+
+		NEW: null,
+		CHANGE: null,
+		REMOVE: null,
+
+		INFO: null,
+
+		MOVE_SINK_INPUT: (sinkInputIndex, destSinkIndex) => ({ sinkInputIndex, destSinkIndex }),
+		MOVE_SOURCE_OUTPUT: (sourceOutputIndex, destSourceIndex) => ({ sourceOutputIndex, destSourceIndex }),
+	},
+});

components/graph.bak.bak/index.js

@@ -0,0 +1,149 @@
+
+const {
+	map,
+	values,
+	flatten,
+	merge,
+	indexBy,
+} = require('ramda');
+
+const React = require('react');
+
+const r = require('r-dom');
+
+const { connect } = require('react-redux');
+
+const d3 = require('d3');
+
+const key = pao => `${pao.type}-${pao.index}`;
+
+class Graph extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.container = React.createRef();
+
+		this.connectionToPao = new WeakMap();
+	}
+
+	componentDidMount() {
+		this.svg = d3
+			.select(this.container.current)
+			.append('svg');
+	}
+
+	_connectSinkInput(sinkInput) {
+		const connection = this.jsPlumb.connect({
+			source: `client-${sinkInput.info.clientIndex}`,
+			target: `sink-${sinkInput.info.sinkIndex}`,
+			anchor: 'Continuous',
+			overlays: [ [ 'Arrow', { location: -1 } ] ],
+		});
+		this.connectionToPao.set(connection, sinkInput);
+	}
+
+	_connectSourceOutput(sourceOutput) {
+		const connection = this.jsPlumb.connect({
+			source: `source-${sourceOutput.info.sourceIndex}`,
+			target: `client-${sourceOutput.info.clientIndex}`,
+			anchor: 'Continuous',
+			overlays: [ [ 'Arrow', { location: -1 } ] ],
+		});
+		this.connectionToPao.set(connection, sourceOutput);
+	}
+
+	_connectByType(pao) {
+		if (pao.type === 'sinkInput') {
+			this._connectSinkInput(pao);
+		} else {
+			this._connectSourceOutput(pao);
+		}
+	}
+
+	_handleResize() {
+		this.svg
+			.attr('width', this.container.current.clientWidth)
+			.attr('height', this.container.current.clientHeight);
+	}
+
+	componentDidUpdate() {
+		this._handleResizeBound = this._handleResize.bind(this);
+		this.container.current.ownerDocument.defaultView.addEventListener('resize', this._handleResizeBound);
+
+		/*
+		this.jsPlumb.batch(() => {
+			const propsPaos = merge(
+				indexBy(key, values(this.props.sinkInputs)),
+				indexBy(key, values(this.props.sourceOutputs)),
+			);
+			this.jsPlumb.getAllConnections().forEach(connection => {
+				const connectionPao = this.connectionToPao.get(connection);
+				const k = key(connectionPao);
+				const propsPao = propsPaos[k];
+				if (!propsPao) {
+					this.jsPlumb.deleteConnection(connection);
+				} else if (propsPao === connectionPao) {
+					// Noop
+				} else if (propsPao.info) {
+					this.jsPlumb.deleteConnection(connection);
+					this._connectByType(propsPao);
+				}
+				delete propsPaos[k];
+			});
+			values(propsPaos).forEach(propsPao => {
+				if (propsPao.info) {
+					this._connectByType(propsPao);
+				}
+			});
+		});
+		*/
+
+		/*
+		flatten(
+			map(paos => map(pao => r.div({
+				id: key(pao),
+				key: key(pao),
+				className: 'jtk-node',
+				style: {
+					border: '1px solid black',
+					userSelect: 'none',
+					cursor: 'default',
+				},
+				ref: el => {
+					if (el) {
+						this.jsPlumb.draggable(el, {});
+						/// this.jsPlumb.addEndpoint();
+					}
+				},
+			}, [
+				key(pao),
+			]), values(paos)), [
+				this.props.sinks,
+				this.props.sources,
+				this.props.clients,
+			]),
+		)
+		*/
+	}
+
+	componentWillUnmount() {
+		this.container.current.ownerDocument.defaultView.removeEventListener('resize', this._handleResizeBound);
+	}
+
+	render() {
+		return r.div({
+			ref: this.container,
+			style: {
+				position: 'absolute',
+				left: 0,
+				right: 0,
+				top: 0,
+				bottom: 0,
+			},
+		});
+	}
+}
+
+module.exports = connect(
+	state => state.pulse,
+)(Graph);

components/graph.bak/index.js

@@ -0,0 +1,126 @@
+
+const {
+	map,
+	values,
+	flatten,
+	merge,
+	indexBy,
+} = require('ramda');
+
+const React = require('react');
+
+const r = require('r-dom');
+
+const { connect } = require('react-redux');
+
+const {
+	jsPlumb,
+} = require('jsplumb');
+
+const key = pao => `${pao.type}-${pao.index}`;
+
+class Graph extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.container = React.createRef();
+
+		this.connectionToPao = new WeakMap();
+	}
+
+	componentDidMount() {
+		this.jsPlumb = jsPlumb.getInstance({
+			Container: this.container.current,
+		});
+	}
+
+	_connectSinkInput(sinkInput) {
+		const connection = this.jsPlumb.connect({
+			source: `client-${sinkInput.info.clientIndex}`,
+			target: `sink-${sinkInput.info.sinkIndex}`,
+			anchor: 'Continuous',
+			overlays: [ [ 'Arrow', { location: -1 } ] ],
+		});
+		this.connectionToPao.set(connection, sinkInput);
+	}
+
+	_connectSourceOutput(sourceOutput) {
+		const connection = this.jsPlumb.connect({
+			source: `source-${sourceOutput.info.sourceIndex}`,
+			target: `client-${sourceOutput.info.clientIndex}`,
+			anchor: 'Continuous',
+			overlays: [ [ 'Arrow', { location: -1 } ] ],
+		});
+		this.connectionToPao.set(connection, sourceOutput);
+	}
+
+	_connectByType(pao) {
+		if (pao.type === 'sinkInput') {
+			this._connectSinkInput(pao);
+		} else {
+			this._connectSourceOutput(pao);
+		}
+	}
+
+	componentDidUpdate() {
+		this.jsPlumb.batch(() => {
+			const propsPaos = merge(
+				indexBy(key, values(this.props.sinkInputs)),
+				indexBy(key, values(this.props.sourceOutputs)),
+			);
+			this.jsPlumb.getAllConnections().forEach(connection => {
+				const connectionPao = this.connectionToPao.get(connection);
+				const k = key(connectionPao);
+				const propsPao = propsPaos[k];
+				if (!propsPao) {
+					this.jsPlumb.deleteConnection(connection);
+				} else if (propsPao === connectionPao) {
+					// Noop
+				} else if (propsPao.info) {
+					this.jsPlumb.deleteConnection(connection);
+					this._connectByType(propsPao);
+				}
+				delete propsPaos[k];
+			});
+			values(propsPaos).forEach(propsPao => {
+				if (propsPao.info) {
+					this._connectByType(propsPao);
+				}
+			});
+		});
+	}
+
+	render() {
+		return r.div({
+			ref: this.container,
+			style: { position: 'relative' },
+		}, flatten(
+			map(paos => map(pao => r.div({
+				id: key(pao),
+				key: key(pao),
+				className: 'jtk-node',
+				style: {
+					border: '1px solid black',
+					userSelect: 'none',
+					cursor: 'default',
+				},
+				ref: el => {
+					if (el) {
+						this.jsPlumb.draggable(el, {});
+						/// this.jsPlumb.addEndpoint();
+					}
+				},
+			}, [
+				key(pao),
+			]), values(paos)), [
+				this.props.sinks,
+				this.props.sources,
+				this.props.clients,
+			]),
+		));
+	}
+}
+
+module.exports = connect(
+	state => state.pulse,
+)(Graph);

components/graph/index.js

@@ -0,0 +1,399 @@
+
+const {
+	map,
+	values,
+	flatten,
+	memoizeWith,
+	pick,
+} = require('ramda');
+
+const React = require('react');
+
+const r = require('r-dom');
+
+const { connect } = require('react-redux');
+const { bindActionCreators } = require('redux');
+
+const {
+	GraphView,
+	Edge,
+} = require('react-digraph');
+
+const math = require('mathjs');
+
+const { pulse: pulseActions } = require('../../actions');
+
+const { getPaiByTypeAndIndex } = require('../../selectors');
+
+Edge.calculateOffset = function (nodeSize, source, target) {
+	const arrowVector = math.matrix([ target.x - source.x, target.y - source.y ]);
+	const offsetLength = Math.max(0, Math.min((0.85 * size), (math.norm(arrowVector) / 2) - 40));
+	const offsetVector = math.dotMultiply(arrowVector, (offsetLength / math.norm(arrowVector)) || 0);
+
+	return {
+		xOff: offsetVector.get([ 0 ]),
+		yOff: offsetVector.get([ 1 ]),
+	};
+};
+
+const weakmapId_ = new WeakMap();
+const weakmapId = o => {
+	if (!weakmapId_.has(o)) {
+		weakmapId_.set(o, String(Math.random()));
+	}
+	return weakmapId_.get(o);
+};
+
+const dgoToPai = new WeakMap();
+
+const memoize = memoizeWith(weakmapId);
+
+const key = pao => `${pao.type}-${pao.index}`;
+
+const sourceKey = pai => {
+	if (pai.clientIndex === -1) {
+		return `module-${pai.moduleIndex}`;
+	}
+	return `client-${pai.clientIndex}`;
+};
+
+const targetKey = pai => {
+	if (pai.type === 'sinkInput') {
+		return `sink-${pai.sinkIndex}`;
+	}
+	return `source-${pai.sourceIndex}`;
+};
+
+const paoToNode = memoize(pao => ({
+	id: key(pao),
+	index: pao.index,
+	type: pao.type,
+}));
+
+const paiToEdge = memoize(pai => ({
+	source: sourceKey(pai),
+	target: targetKey(pai),
+	index: pai.index,
+	type: pai.type,
+}));
+
+const graphConfig = {
+	nodeTypes: {},
+
+	nodeSubtypes: {},
+
+	edgeTypes: {
+		sinkInput: {
+			shapeId: '#sinkInput',
+			shape: r('symbol', {
+				viewBox: '0 0 50 50',
+				id: 'sinkInput',
+				key: '0',
+			}, r.circle({
+				cx: '25',
+				cy: '25',
+				r: '8',
+				fill: 'currentColor',
+			})),
+		},
+		sourceOutput: {
+			shapeId: '#sourceOutput',
+			shape: r('symbol', {
+				viewBox: '0 0 50 50',
+				id: 'sourceOutput',
+				key: '0',
+			}, r.circle({
+				cx: '25',
+				cy: '25',
+				r: '8',
+				fill: 'currentColor',
+			})),
+		},
+	},
+};
+
+class D {
+	constructor(s = '') {
+		this._s = s;
+	}
+
+	_next(...args) {
+		return new this.constructor([ this._s, ...args ].join(' '));
+	}
+
+	moveTo(x, y) {
+		return this._next('M', x, y);
+	}
+
+	lineTo(x, y) {
+		return this._next('L', x, y);
+	}
+
+	close() {
+		return this._next('z');
+	}
+
+	toString() {
+		return this._s;
+	}
+}
+
+const d = () => new D();
+
+const size = 120;
+const s2 = size / 2;
+
+const Sink = () => r.path({
+	d: d()
+		.moveTo(-s2, 0)
+		.lineTo(-s2 * 1.3, -s2)
+		.lineTo(s2, -s2)
+		.lineTo(s2, s2)
+		.lineTo(-s2 * 1.3, s2)
+		.close()
+		.toString(),
+});
+
+const Source = () => r.path({
+	d: d()
+		.moveTo(s2 * 1.3, 0)
+		.lineTo(s2, s2)
+		.lineTo(-s2, s2)
+		.lineTo(-s2, -s2)
+		.lineTo(s2, -s2)
+		.close()
+		.toString(),
+});
+
+const Client = () => r.path({
+	d: d()
+		.moveTo(s2 * 1.3, 0)
+		.lineTo(s2, s2)
+		.lineTo(-s2 * 1.3, s2)
+		.lineTo(-s2, 0)
+		.lineTo(-s2 * 1.3, -s2)
+		.lineTo(s2, -s2)
+		.close()
+		.toString(),
+});
+
+const Module = Client;
+
+const gridDotSize = 2;
+const gridSpacing = 36;
+const renderDefs = () => r(React.Fragment, [
+	r.pattern({
+		id: 'background-pattern',
+		key: 'background-pattern',
+		width: gridSpacing,
+		height: gridSpacing,
+		patternUnits: 'userSpaceOnUse',
+	}, r.circle({
+		className: 'grid-dot',
+		cx: (gridSpacing || 0) / 2,
+		cy: (gridSpacing || 0) / 2,
+		r: gridDotSize,
+	})),
+
+	r('marker', {
+		id: 'start-arrow',
+		viewBox: '0 -8 16 16',
+		refX: '8',
+		markerWidth: '16',
+		markerHeight: '16',
+		orient: 'auto',
+	}, r.path({
+		className: 'arrow',
+		d: 'M 16,-8 L 0,0 L 16,8',
+	})),
+]);
+
+const renderNode = (nodeRef, data, key, selected, hovered) => r({
+	sink: Sink,
+	source: Source,
+	client: Client,
+	module: Module,
+}[data.type], {
+	selected,
+	hovered,
+});
+
+const DebugText = ({ dgo, pai, open = false }) => r.div({
+	style: {
+		fontSize: '50%',
+	},
+}, [
+	open && JSON.stringify(dgo, null, 2),
+	open && JSON.stringify(pai, null, 2),
+]);
+
+const SinkText = ({ dgo, pai }) => r.div([
+	r.div({
+		title: pai.name,
+	}, pai.description),
+	r(DebugText, { dgo, pai }),
+]);
+
+const SourceText = ({ dgo, pai }) => r.div([
+	r.div({
+		title: pai.name,
+	}, pai.description),
+	r(DebugText, { dgo, pai }),
+]);
+
+const ClientText = ({ dgo, pai }) => r.div([
+	r.div({
+	}, pai.name),
+	r(DebugText, { dgo, pai }),
+]);
+
+const ModuleText = ({ dgo, pai }) => r.div([
+	r.div({
+		title: pai.properties.module.description,
+	}, pai.name),
+	r(DebugText, { dgo, pai }),
+]);
+
+const renderNodeText = dgo => r('foreignObject', {
+	x: -s2,
+	y: -s2,
+}, r.div({
+	style: {
+		width: size,
+		height: size,
+
+		padding: 2,
+
+		whiteSpace: 'pre',
+	},
+}, r({
+	sink: SinkText,
+	source: SourceText,
+	client: ClientText,
+	module: ModuleText,
+}[dgo.type] || ModuleText, {
+	dgo,
+	pai: dgoToPai.get(dgo),
+})));
+
+const afterRenderEdge = (id, element, edge, edgeContainer) => {
+	if (edge.type) {
+		edgeContainer.classList.add(edge.type);
+	}
+};
+
+class Graph extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			selected: null,
+		};
+	}
+
+	onSelectNode(selected) {
+		this.setState({ selected });
+	}
+
+	onCreateNode() {
+		
+	}
+
+	onUpdateNode() {
+	}
+
+	onDeleteNode() {
+	}
+
+	onSelectEdge() {
+	}
+
+	onCreateEdge() {
+	}
+
+	onSwapEdge(sourceNode, targetNode, edge) {
+		if (edge.type === 'sinkInput') {
+			this.props.moveSinkInput(edge.index, targetNode.index);
+		} else {
+			this.props.moveSourceOutput(edge.index, targetNode.index);
+		}
+	}
+
+	onDeleteEdge() {}
+
+	render() {
+		const nodes = map(paoToNode, flatten(map(values, [
+			this.props.objects.sinks,
+			this.props.objects.sources,
+			this.props.objects.clients,
+			this.props.objects.modules,
+		])));
+		const edges = map(paiToEdge, flatten(map(values, [
+			this.props.infos.sinkInputs,
+			this.props.infos.sourceOutputs,
+		])));
+
+		nodes.forEach(node => {
+			if (node.x !== undefined) {
+				return;
+			}
+
+			if (node.type === 'source') {
+				node.x = 0 * size;
+			} else if (node.type === 'sink') {
+				node.x = 10 * size;
+			} else {
+				node.x = (2 * size) + (Math.round(6 * Math.random()) * size);
+			}
+
+			node.y = Math.random() * 1200;
+		});
+
+		nodes.forEach(node => {
+			const pai = getPaiByTypeAndIndex(node.type, node.index)({ pulse: this.props });
+			dgoToPai.set(node, pai);
+		});
+
+		return r.div({
+			id: 'graph',
+			style: {},
+		}, r(GraphView, {
+			nodeKey: 'id',
+
+			nodes,
+			edges,
+
+			selected: this.state.selected,
+
+			...graphConfig,
+
+			onSelectNode: this.onSelectNode.bind(this),
+			onCreateNode: this.onCreateNode.bind(this),
+			onUpdateNode: this.onUpdateNode.bind(this),
+			onDeleteNode: this.onDeleteNode.bind(this),
+			onSelectEdge: this.onSelectEdge.bind(this),
+			onCreateEdge: this.onCreateEdge.bind(this),
+			onSwapEdge: this.onSwapEdge.bind(this),
+			onDeleteEdge: this.onDeleteEdge.bind(this),
+
+			showGraphControls: false,
+
+			edgeArrowSize: 16,
+
+			backgroundFillId: '#background-pattern',
+
+			renderDefs,
+			renderNode,
+			renderNodeText,
+			afterRenderEdge,
+		}));
+	}
+}
+
+module.exports = connect(
+	state => state.pulse,
+	dispatch => bindActionCreators(pick([
+		'moveSinkInput',
+		'moveSourceOutput',
+	], pulseActions), dispatch),
+)(Graph);

constants/pulse.js

@@ -0,0 +1,34 @@
+
+const things = [ {
+	method: 'getModules',
+	type: 'module',
+	key: 'modules',
+}, {
+	method: 'getCards',
+	type: 'card',
+	key: 'cards',
+}, {
+	method: 'getClients',
+	type: 'client',
+	key: 'clients',
+}, {
+	method: 'getSinks',
+	type: 'sink',
+	key: 'sinks',
+}, {
+	method: 'getSources',
+	type: 'source',
+	key: 'sources',
+}, {
+	method: 'getSinkInputs',
+	type: 'sinkInput',
+	key: 'sinkInputs',
+}, {
+	method: 'getSourceOutputs',
+	type: 'sourceOutput',
+	key: 'sourceOutputs',
+} ];
+
+module.exports = {
+	things,
+};

index.css

@@ -0,0 +1,41 @@
+body {
+	margin: 0;
+	background: var(--themeBaseColor);
+	color: var(--themeTextColor);
+	font: -webkit-control;
+}
+
+.view-wrapper .graph {
+	background: var(--themeBaseColor);
+}
+
+.view-wrapper .grid-dot {
+	fill: var(--themeBgColor);
+}
+
+.view-wrapper .node {
+	fill: var(--themeBgColor);
+	stroke: var(--borders);
+}
+
+.view-wrapper .node.hovered {
+	stroke: var(--themeSelectedBgColor);
+}
+.view-wrapper .node.selected {
+	fill: var(--themeSelectedBgColor);
+	color: var(--themeSelectedFgColor);
+}
+
+.view-wrapper .sourceOutput .edge {
+	/* marker-end: none; */
+	/* marker-start: url(#start-arrow); */
+	marker-end: url(#start-arrow);
+}
+
+.view-wrapper .graph .edge {
+	stroke: var(--successColor);
+}
+
+.view-wrapper .graph .arrow {
+	fill: var(--successColor);
+}

index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="./index.css">
+<div id="root"></div>
+<script>require('./renderer.js')</script>

index.js

@@ -0,0 +1,11 @@
+
+const { app, BrowserWindow } = require('electron');
+
+const theme = require('./utils/theme');
+
+app.on('ready', () => {
+	const win = new BrowserWindow({
+		backgroundColor: theme.colors.themeBaseColor,
+	});
+	win.loadFile('index.html');
+});

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "pagraphcontrol3",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "GPL-3.0",
+  "devDependencies": {
+    "ava": "^0.25.0",
+    "electron": "^3.0.8",
+    "eslint-config-xo-overrides": "^1.1.2",
+    "remotedev-server": "^0.2.6",
+    "uws": "^99.0.0",
+    "xo": "^0.23.0"
+  },
+  "scripts": {
+    "start": "electron ."
+  },
+  "xo": {
+    "extends": [
+      "eslint-config-xo-overrides"
+    ]
+  },
+  "dependencies": {
+    "@jakejarrett/gtk-theme": "^1.1.2",
+    "camelcase": "^5.0.0",
+    "mathjs": "^5.2.3",
+    "paclient": "^0.0.2",
+    "r-dom": "^2.4.0",
+    "ramda": "^0.25.0",
+    "react": "^16.6.0",
+    "react-digraph": "^5.1.3",
+    "react-dom": "^16.6.0",
+    "react-redux": "^5.1.0",
+    "recompose": "^0.30.0",
+    "redux": "^4.0.1",
+    "redux-actions": "^2.6.4",
+    "redux-logger": "^3.0.6",
+    "redux-persist": "^5.10.0",
+    "redux-promise-middleware": "^5.1.1",
+    "redux-thunk": "^2.3.0",
+    "remote-redux-devtools": "^0.5.13",
+    "reselect": "^4.0.0"
+  }
+}

reducers/index.js

@@ -0,0 +1,17 @@
+
+const { combineReducers } = require('redux');
+
+const { reducer: pulse, initialState: pulseInitialState } = require('./pulse');
+
+const initialState = {
+	pulse: pulseInitialState,
+};
+
+const reducer = combineReducers({
+	pulse,
+});
+
+module.exports = {
+	initialState,
+	reducer,
+};

reducers/pulse.js

@@ -0,0 +1,69 @@
+
+const {
+	always,
+	merge,
+	omit,
+	fromPairs,
+	map,
+} = require('ramda');
+
+const { combineReducers } = require('redux');
+
+const { handleActions } = require('redux-actions');
+
+const { pulse } = require('../actions');
+
+const { things } = require('../constants/pulse');
+
+const initialState = {
+	state: 'closed',
+
+	objects: fromPairs(map(({ key }) => [ key, {} ], things)),
+	infos: fromPairs(map(({ key }) => [ key, {} ], things)),
+};
+
+const reducer = combineReducers({
+	state: handleActions({
+		[pulse.ready]: always('ready'),
+		[pulse.close]: always('closed'),
+	}, initialState.state),
+
+	objects: combineReducers(fromPairs(map(({ key, type }) => [ key, handleActions({
+		[pulse.new]: (state, { payload }) => {
+			if (payload.type !== type) {
+				return state;
+			}
+			return merge(state, {
+				[payload.index]: payload,
+			});
+		},
+		[pulse.remove]: (state, { payload }) => {
+			if (payload.type !== type) {
+				return state;
+			}
+			return omit([ payload.index ], state);
+		},
+	}, initialState.objects[key]) ], things))),
+
+	infos: combineReducers(fromPairs(map(({ key, type }) => [ key, handleActions({
+		[pulse.remove]: (state, { payload }) => {
+			if (payload.type !== type) {
+				return state;
+			}
+			return omit([ payload.index ], state);
+		},
+		[pulse.info]: (state, { payload }) => {
+			if (payload.type !== type) {
+				return state;
+			}
+			return merge(state, {
+				[payload.index]: payload,
+			});
+		},
+	}, initialState.infos[key]) ], things))),
+});
+
+module.exports = {
+	initialState,
+	reducer,
+};

renderer.js

@@ -0,0 +1,25 @@
+/* global document */
+
+const r = require('r-dom');
+
+const { render } = require('react-dom');
+
+const { Provider } = require('react-redux');
+
+const createStore = require('./store');
+
+const Graph = require('./components/graph');
+
+const theme = require('./utils/theme');
+
+const Root = () => r(Provider, {
+	store: createStore(),
+}, [
+	r(Graph),
+]);
+
+Object.entries(theme.colors).forEach(([ key, value ]) => {
+	document.body.style.setProperty('--' + key, value);
+});
+
+render(r(Root), document.getElementById('root'));

selectors/index.js

@@ -0,0 +1,16 @@
+
+const {
+	map,
+	prop,
+	indexBy,
+} = require('ramda');
+
+const { things } = require('../constants/pulse');
+
+const storeKeyByType = map(prop('key'), indexBy(prop('type'), things));
+
+const getPaiByTypeAndIndex = (type, index) => state => state.pulse.infos[storeKeyByType[type]][index];
+
+module.exports = {
+	getPaiByTypeAndIndex,
+};

store/index.js

@@ -0,0 +1,47 @@
+
+const { createStore, applyMiddleware } = require('redux');
+
+// const { createLogger } = require('redux-logger');
+const { composeWithDevTools } = require('remote-redux-devtools');
+
+const { default: thunkMiddleware } = require('redux-thunk');
+const { default: createPromiseMiddleware } = require('redux-promise-middleware');
+
+const { persistStore, persistReducer } = require('redux-persist');
+const { default: storage } = require('redux-persist/lib/storage');
+
+const { reducer, initialState } = require('../reducers');
+
+const pulseMiddleware = require('./pulse-middleware');
+
+const persistConfig = {
+	key: 'redux-persist',
+	whitelist: [ 'localStorage' ],
+	storage,
+};
+
+const dev = process.env.NODE_ENV !== 'production';
+
+module.exports = (state = initialState) => {
+	const middlewares = [
+		thunkMiddleware,
+		createPromiseMiddleware(),
+		pulseMiddleware,
+		// dev && createLogger(),
+	].filter(Boolean);
+
+	const reducer_ = persistReducer(persistConfig, reducer);
+
+	const store = createStore(
+		reducer_,
+		state,
+		composeWithDevTools({
+			realtime: dev,
+			hostname: 'localhost', port: 8000,
+		})(applyMiddleware(...middlewares)),
+	);
+
+	persistStore(store);
+
+	return store;
+};

store/pulse-middleware.js

@@ -0,0 +1,106 @@
+
+const PAClient = require('paclient');
+
+const { handleActions } = require('redux-actions');
+
+const { pulse: pulseActions } = require('../actions');
+
+const { things } = require('../constants/pulse');
+
+function getFnFromType(type) {
+	let fn;
+	switch (type) {
+		case 'sink':
+		case 'card':
+		case 'source':
+			fn = type;
+			break;
+		case 'sinkInput':
+		case 'sourceOutput':
+		case 'client':
+		case 'module':
+			fn = `${type}ByIndex`;
+			break;
+		default:
+			throw new Error('Unexpected type: ' + type);
+	}
+	return 'get' + fn[0].toUpperCase() + fn.slice(1);
+}
+
+module.exports = store => {
+	const pa = new PAClient();
+
+	const getInfo = (type, index) => pa[getFnFromType(type)](index, (err, info) => {
+		if (err) {
+			if (err.message === 'No such entity') {
+				console.warn(err.message, type, index);
+				return;
+			}
+			throw err;
+		}
+		info.type = info.type || type;
+		store.dispatch(pulseActions.info(info));
+	});
+
+	pa
+		.on('ready', () => {
+			store.dispatch(pulseActions.ready());
+			pa.subscribe('all');
+			things.forEach(({ method, type }) => {
+				pa[method]((err, infos) => {
+					if (err) {
+						throw err;
+					}
+					infos.forEach(info => {
+						const { index } = info;
+						info.type = info.type || type;
+						store.dispatch(pulseActions.new({ type, index }));
+						store.dispatch(pulseActions.info(info));
+					});
+				});
+			});
+		})
+		.on('close', () => {
+			store.dispatch(pulseActions.close());
+		})
+		.on('new', (type, index) => {
+			store.dispatch(pulseActions.new({ type, index }));
+			getInfo(type, index);
+		})
+		.on('change', (type, index) => {
+			store.dispatch(pulseActions.change({ type, index }));
+			getInfo(type, index);
+		})
+		.on('remove', (type, index) => {
+			store.dispatch(pulseActions.remove({ type, index }));
+		});
+
+	pa.connect();
+
+	const handlePulseActions = handleActions({
+		[pulseActions.moveSinkInput]: (state, { payload: { sinkInputIndex, destSinkIndex } }) => {
+			pa.moveSinkInput(sinkInputIndex, destSinkIndex, error => {
+				if (error) {
+					throw error;
+				}
+			});
+			return state;
+		},
+		[pulseActions.moveSourceOutput]: (state, { payload: { sourceOutputIndex, destSourceIndex } }) => {
+			pa.moveSourceOutput(sourceOutputIndex, destSourceIndex, error => {
+				if (error) {
+					throw error;
+				}
+			});
+			return state;
+		},
+	}, null);
+
+	return next => action => {
+		const ret = next(action);
+
+		handlePulseActions(null, action);
+
+		return ret;
+	};
+};

utils/theme/index.js

@@ -0,0 +1,11 @@
+
+const { theme } = require('@jakejarrett/gtk-theme');
+const camelCase = require('camelcase');
+
+const colors = {};
+
+theme.css.replace(/@define-color\s+([\w_]+?)\s+(.+?);/g, (_, name, value) => {
+	colors[camelCase(name)] = value;
+});
+
+module.exports = { colors };