Add volume peaks display

components/graph/base.js

@@ -31,6 +31,11 @@ class GraphView extends GraphViewBase {
 			_super_renderBackground: this.renderBackground,
 			renderBackground: this.constructor.prototype.renderBackground.bind(this),
 
+			_super_handleZoomStart: this.handleZoomStart,
+			handleZoomStart: this.constructor.prototype.handleZoomStart.bind(this),
+			_super_handleZoomEnd: this.handleZoomEnd,
+			handleZoomEnd: this.constructor.prototype.handleZoomEnd.bind(this),
+
 			_super_handleNodeMove: this.handleNodeMove,
 			handleNodeMove: this.constructor.prototype.handleNodeMove.bind(this),
 
@@ -164,6 +169,8 @@ class GraphView extends GraphViewBase {
 			onNodeMouseDown: this.props.onNodeMouseDown,
 			onNodeMouseEnter: this.handleNodeMouseEnter,
 			onNodeMouseLeave: this.handleNodeMouseLeave,
+			onNodeDragStart: this.props.onNodeDragStart,
+			onNodeDragEnd: this.props.onNodeDragEnd,
 			onNodeMove: this.handleNodeMove,
 			onNodeUpdate: this.handleNodeUpdate,
 			onNodeSelected: this.handleNodeSelected,
@@ -175,6 +182,20 @@ class GraphView extends GraphViewBase {
 		});
 	}
 
+	handleZoomStart(...args) {
+		if (this.props.onZoomStart) {
+			this.props.onZoomStart();
+		}
+		return this._super_handleZoomStart(...args);
+	}
+
+	handleZoomEnd(...args) {
+		if (this.props.onZoomEnd) {
+			this.props.onZoomEnd();
+		}
+		return this._super_handleZoomEnd(...args);
+	}
+
 	handleNodeMove(position, nodeId, shiftKey) {
 		this._super_handleNodeMove(position, nodeId, shiftKey);
 		if (this.props.onNodeMove) {
@@ -254,6 +275,9 @@ class Node extends NodeBase {
 		super(props);
 
 		Object.assign(this, {
+			_super_handleDragStart: this.handleDragStart,
+			handleDragStart: this.constructor.prototype.handleDragStart.bind(this),
+
 			_super_handleDragEnd: this.handleDragEnd,
 			handleDragEnd: this.constructor.prototype.handleDragEnd.bind(this),
 
@@ -283,7 +307,17 @@ class Node extends NodeBase {
 		}
 	}
 
+	handleDragStart(...args) {
+		if (this.props.onNodeDragStart) {
+			this.props.onNodeDragStart(...args);
+		}
+		return this._super_handleDragStart(...args);
+	}
+
 	handleDragEnd(...args) {
+		if (this.props.onNodeDragEnd) {
+			this.props.onNodeDragEnd(...args);
+		}
 		this.oldSibling = null;
 		return this._super_handleDragEnd(...args);
 	}

components/graph/index.js

@@ -78,13 +78,15 @@ const { primaryPulseServer } = require('../../reducers/pulse');
 const { keyMap } = require('../hot-keys');
 
 const {
-	GraphView,
+	SatellitesGraphView,
 } = require('./satellites-graph');
 
 const {
 	Edge,
 } = require('./base');
 
+const Peaks = require('./peaks');
+
 const LayoutEngine = require('./layout-engine');
 
 const maximum = reduce(max, -Infinity);
@@ -268,7 +270,7 @@ const renderDefs = () => r(React.Fragment, [
 ]);
 
 const renderBackground = ({
-	gridSize = 40960,
+	gridSize = 40960 / 4,
 	onMouseDown,
 }) => r.rect({
 	className: 'background',
@@ -717,14 +719,19 @@ class GraphObjectContextMenu extends React.PureComponent {
 
 const backgroundSymbol = Symbol('graph.backgroundSymbol');
 
-class Graph extends React.Component {
+class Graph extends React.PureComponent {
 	constructor(props) {
 		super(props);
 
+		this.satellitesGraphViewRef = React.createRef();
+
 		this.state = {
 			selected: null,
 			moved: null,
 			contexted: null,
+
+			isDraggingNode: false,
+			isZooming: false,
 		};
 
 		this._requestedIcons = new Set();
@@ -732,11 +739,16 @@ class Graph extends React.Component {
 		Object.assign(this, {
 			onBackgroundMouseDown: this.onBackgroundMouseDown.bind(this),
 
+			onZoomStart: this.onZoomStart.bind(this),
+			onZoomEnd: this.onZoomEnd.bind(this),
+
 			onSelectNode: this.onSelectNode.bind(this),
 			onCreateNode: this.onCreateNode.bind(this),
 			onUpdateNode: this.onUpdateNode.bind(this),
 			onDeleteNode: this.onDeleteNode.bind(this),
 			onNodeMouseDown: this.onNodeMouseDown.bind(this),
+			onNodeDragStart: this.onNodeDragStart.bind(this),
+			onNodeDragEnd: this.onNodeDragEnd.bind(this),
 
 			onSelectEdge: this.onSelectEdge.bind(this),
 			canCreateEdge: this.canCreateEdge.bind(this),
@@ -803,6 +815,7 @@ class Graph extends React.Component {
 					if (binary.startsWith('pavucontrol') ||
 						binary.startsWith('kmix') ||
 						binary === 'pulseaudio' ||
+						name === 'papeaks' ||
 						name === 'paclient.js'
 					) {
 						return false;
@@ -857,19 +870,6 @@ class Graph extends React.Component {
 		};
 	}
 
-	shouldComponentUpdate(nextProps, nextState) {
-		return !(
-			(nextProps.serverInfo === this.props.serverInfo) &&
-				(nextProps.objects === this.props.objects) &&
-				(nextProps.infos === this.props.infos) &&
-				(nextProps.preferences === this.props.preferences) &&
-				(nextProps.icons === this.props.icons) &&
-				(nextState.selected === this.state.selected) &&
-				(nextState.contexted === this.state.contexted) &&
-				(nextState.moved === this.state.moved)
-		);
-	}
-
 	componentDidMount() {
 		this.getIconPath('starred');
 
@@ -942,6 +942,18 @@ class Graph extends React.Component {
 		}
 	}
 
+	onNodeDragStart() {
+		this.setState({
+			isDraggingNode: true,
+		});
+	}
+
+	onNodeDragEnd() {
+		this.setState({
+			isDraggingNode: false,
+		});
+	}
+
 	onSelectEdge(selected) {
 		this.setState({ selected });
 	}
@@ -1113,6 +1125,18 @@ class Graph extends React.Component {
 		this.graphViewElement.focus();
 	}
 
+	onZoomStart() {
+		this.setState({
+			isZooming: true,
+		});
+	}
+
+	onZoomEnd() {
+		this.setState({
+			isZooming: false,
+		});
+	}
+
 	hotKeyEscape() {
 		const { moved } = this.state;
 
@@ -1397,12 +1421,29 @@ class Graph extends React.Component {
 	render() {
 		const { nodes, edges } = this.state;
 
+		const satellitesGraphViewState = path(
+			[ 'current', 'state' ],
+			this.satellitesGraphViewRef,
+		);
+
 		return r(HotKeys, {
 			handlers: map(f => bind(f, this), pick(keys(keyMap), this)),
 		}, r.div({
 			id: 'graph',
 		}, [
-			r(GraphView, {
+			!this.props.preferences.hideLiveVolumePeaks && r(Peaks, {
+				key: 'peaks',
+				nodes: defaultTo([], prop('satelliteNodes', satellitesGraphViewState)),
+				edges: defaultTo([], prop('satelliteEdges', satellitesGraphViewState)),
+				accommodateGraphAnimation: this.state.isDraggingNode || this.state.isZooming,
+				peaks: this.props.peaks,
+			}),
+
+			r(SatellitesGraphView, {
+				key: 'graph',
+
+				ref: this.satellitesGraphViewRef,
+
 				nodeKey: 'id',
 				edgeKey: 'id',
 
@@ -1418,11 +1459,16 @@ class Graph extends React.Component {
 
 				onBackgroundMouseDown: this.onBackgroundMouseDown,
 
+				onZoomStart: this.onZoomStart,
+				onZoomEnd: this.onZoomEnd,
+
 				onSelectNode: this.onSelectNode,
 				onCreateNode: this.onCreateNode,
 				onUpdateNode: this.onUpdateNode,
 				onDeleteNode: this.onDeleteNode,
 				onNodeMouseDown: this.onNodeMouseDown,
+				onNodeDragStart: this.onNodeDragStart,
+				onNodeDragEnd: this.onNodeDragEnd,
 
 				onSelectEdge: this.onSelectEdge,
 				canCreateEdge: this.canCreateEdge,
@@ -1451,6 +1497,8 @@ class Graph extends React.Component {
 			this.state.contexted && (
 				this.state.contexted === backgroundSymbol ?
 					r(BackgroundContextMenu, {
+						key: 'background-context-menu',
+
 						onClose: this.onContextMenuClose,
 
 						onLoadModule: this.props.openLoadModuleModal,
@@ -1460,6 +1508,8 @@ class Graph extends React.Component {
 						onLoadModuleNullSink: this.onLoadModuleNullSink,
 					}) :
 					r(GraphObjectContextMenu, {
+						key: 'graph-object-context-menu',
+
 						onClose: this.onContextMenuClose,
 
 						canSetAsDefault: this.canContextMenuSetAsDefault,

components/graph/peaks.js

@@ -0,0 +1,149 @@
+/* global window, performance */
+
+const React = require('react');
+
+const r = require('r-dom');
+
+const PIXI = require('pixi.js');
+
+const theme = require('../../utils/theme');
+
+PIXI.ticker.shared.autoStart = false;
+
+class Peaks extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {};
+
+		this.containerRef = React.createRef();
+
+		this.handleTick = this.handleTick.bind(this);
+		this.handlePeak = this.handlePeak.bind(this);
+		this.handleResize = this.handleResize.bind(this);
+		this.handleAnimationFrame = this.handleAnimationFrame.bind(this);
+	}
+
+	componentDidMount() {
+		this.app = new PIXI.Application(window.innerWidth, window.innerHeight, {
+			autoStart: false,
+			transparent: true,
+		});
+		this.app.ticker.add(this.handleTick);
+
+		this.trailTexture = PIXI.Texture.fromImage('assets/trail.png');
+		this.points = [
+			new PIXI.Point(0, 0),
+			new PIXI.Point(100, 100),
+		];
+		this.rope = new PIXI.mesh.Rope(this.trailTexture, this.points);
+		this.rope.blendmode = PIXI.BLEND_MODES.ADD;
+		this.app.stage.addChild(this.rope);
+
+		this.ropes = {};
+
+		this.containerRef.current.appendChild(this.app.view);
+
+		this.peaks = {};
+		this.props.peaks.on('peak', this.handlePeak);
+
+		this.graph = window.document.querySelector('#graph .graph');
+		this.view = this.graph.querySelector('.view');
+
+		window.addEventListener('resize', this.handleResize);
+
+		this.lastAnimationFrameTimeStamp = 0;
+		this.requestAnimationFrame();
+	}
+
+	componentWillUnmount() {
+		this.app.destroy();
+
+		this.props.peaks.off('peak', this.handlePeak);
+
+		window.removeEventListener('resize', this.handleResize);
+
+		window.cancelAnimationFrame(this.animationFrameRequest);
+	}
+
+	requestAnimationFrame() {
+		this.animationFrameRequest = window.requestAnimationFrame(this.handleAnimationFrame);
+	}
+
+	get targetDelay() {
+		if (this.props.accommodateGraphAnimation) {
+			return 1000 / 70;
+		}
+		return 1000 / 25;
+	}
+
+	handleAnimationFrame(timeStamp) {
+		if (timeStamp < this.lastAnimationFrameTimeStamp + this.targetDelay) {
+			this.requestAnimationFrame();
+			return;
+		}
+
+		this.lastAnimationFrameTimeStamp = timeStamp;
+
+		this.app.ticker.update(timeStamp);
+
+		this.requestAnimationFrame();
+	}
+
+	handleTick() {
+		const matrix = this.view.getScreenCTM();
+		const point = this.graph.createSVGPoint();
+
+		const p = ({ x = 0, y = 0 }) => {
+			point.x = x;
+			point.y = y;
+
+			const p = point.matrixTransform(matrix);
+
+			return new PIXI.Point(p.x, p.y);
+		};
+
+		const ropes = this.props.edges
+			.filter(edge => {
+				return edge.type === 'sinkInput' || edge.type === 'sourceOutput';
+			})
+			.map(edge => {
+				const source = this.props.nodes.find(n => n.id === edge.source);
+				const target = this.props.nodes.find(n => n.id === edge.target);
+
+				const peak = this.peaks[target.target] || this.peaks[target.edge];
+
+				const points = [
+					p(target),
+					p(source),
+				];
+				const rope = new PIXI.mesh.Rope(this.trailTexture, points);
+				rope.blendmode = PIXI.BLEND_MODES.ADD;
+				rope.alpha = peak === undefined ? 0 : peak ** (1 / 3);
+				rope.tint = parseInt(theme.colors.themeSelectedBgColor.replace(/#/g, ''), 16);
+
+				return rope;
+			});
+
+		this.app.stage.removeChildren();
+		ropes.forEach(r => this.app.stage.addChild(r));
+	}
+
+	handlePeak(type, id, peak) {
+		this.peaks[`${type}-${id}`] = peak;
+	}
+
+	handleResize() {
+		this.app.renderer.resize(window.innerWidth, window.innerHeight);
+		this.app.ticker.update(performance.now());
+	}
+
+	render() {
+		return r.div({
+			className: 'peaks',
+			ref: this.containerRef,
+		});
+	}
+}
+
+module.exports = Peaks;

components/graph/satellites-graph.js

@@ -59,7 +59,7 @@ const satelliteSpread = 36;
 
 const satelliteEdgeToOriginalEdge = new WeakMap();
 
-class GraphView extends React.Component {
+class SatellitesGraphView extends React.Component {
 	constructor(props) {
 		super(props);
 
@@ -116,10 +116,17 @@ class GraphView extends React.Component {
 			return satelliteNode;
 		}, edges), originalEdgesByTargetNodeKey);
 
+		const satelliteNodes = flatten(map(node => {
+			const satelliteNodes = satelliteNodesByTargetNodeKey[node.id] || [];
+			SatellitesGraphView.repositionSatellites(node, satelliteNodes);
+			return satelliteNodes.concat(node);
+		}, props.nodes));
+
 		return {
 			originalEdgesByTargetNodeKey,
 			satelliteNodesByTargetNodeKey,
 			satelliteEdges,
+			satelliteNodes,
 
 			selected,
 			moved,
@@ -215,21 +222,14 @@ class GraphView extends React.Component {
 	}
 
 	render() {
-		const { nodeKey } = this.props;
 		const {
-			satelliteNodesByTargetNodeKey,
 			satelliteEdges: edges,
+			satelliteNodes: nodes,
 
 			selected,
 			moved,
 		} = this.state;
 
-		const nodes = flatten(map(node => {
-			const satelliteNodes = satelliteNodesByTargetNodeKey[node[nodeKey]] || [];
-			this.constructor.repositionSatellites(node, satelliteNodes);
-			return satelliteNodes.concat(node);
-		}, this.props.nodes));
-
 		return r(GraphViewBase, {
 			...this.props,
 
@@ -261,4 +261,4 @@ class GraphView extends React.Component {
 	}
 }
 
-module.exports = { GraphView };
+module.exports = { SatellitesGraphView };

components/modals/index.js

@@ -73,7 +73,7 @@ class Modals extends React.PureComponent {
 
 	static getDerivedStateFromProps(props, state) {
 		return {
-			actions: merge(state.actions, mapObjIndexed((f, name) => function (...args) {
+			actions: merge(state.actions, map(a => a.bind(this), mapObjIndexed((f, name) => function (...args) {
 				const continuation = () => {
 					props[name](...args);
 					this.setState(this.initialState);
@@ -104,7 +104,7 @@ class Modals extends React.PureComponent {
 
 					return null;
 				},
-			})),
+			}))),
 		};
 	}
 
@@ -139,7 +139,7 @@ class Modals extends React.PureComponent {
 		const { actions, target, confirmation, continuation } = this.state;
 
 		return r(React.Fragment, [
-			...[].concat(children({ actions: map(a => a.bind(this), actions) })),
+			...[].concat(children({ actions })),
 
 			r(ConfirmationModal, {
 				target,

components/preferences/index.js

@@ -154,6 +154,15 @@ class Preferences extends React.Component {
 
 			r.hr(),
 
+			r.div([
+				r(Checkbox, {
+					checked: this.props.preferences.hideLiveVolumePeaks,
+					onChange: () => this.props.actions.toggle('hideLiveVolumePeaks'),
+				}, 'Hide live volume peaks'),
+			]),
+
+			r.hr(),
+
 			r.div([
 				r(Checkbox, {
 					checked: this.props.preferences.hideOnScreenButtons,

components/volume-peaks-provider/index.js

@@ -0,0 +1,137 @@
+
+const { EventEmitter } = require('events');
+
+const { spawn } = require('child_process');
+
+const { connect } = require('react-redux');
+
+const React = require('react');
+
+const r = require('r-dom');
+
+const { primaryPulseServer } = require('../../reducers/pulse');
+
+const PA_SUBSCRIPTION_EVENT_SOURCE = 0x0001;
+const PA_SUBSCRIPTION_EVENT_SINK_INPUT = 0x0002;
+
+const VolumePeaksContext = React.createContext(null);
+
+function spawnProcess({ onPeak, onExit }) {
+	const process = spawn('/home/futpib/code/papeaks/target/release/papeaks', [
+		'--output',
+		'binary',
+	], {
+		stdio: [ 'ignore', 'pipe', 'inherit' ],
+	});
+
+	let leftover = null;
+	const handleData = data => {
+		if (leftover) {
+			data = Buffer.concat([ leftover, data ]);
+		}
+
+		let p = 0;
+		while (p < data.length) {
+			const left = data.length - p;
+			if (left >= 12) {
+				leftover = null;
+			} else {
+				leftover = data.slice(p);
+				break;
+			}
+
+			const type = data.readInt32LE(p);
+			p += 4;
+			const index = data.readInt32LE(p);
+			p += 4;
+			const peak = data.readFloatLE(p);
+			p += 4;
+
+			const typeStr = type === PA_SUBSCRIPTION_EVENT_SOURCE ?
+				'source' :
+				type === PA_SUBSCRIPTION_EVENT_SINK_INPUT ?
+					'sinkInput' :
+					'unexpected';
+			onPeak(typeStr, index, peak);
+		}
+	};
+
+	const handleExit = () => {
+		process.off('data', handleData);
+		process.off('exit', handleExit);
+		if (onExit) {
+			onExit();
+		}
+	};
+
+	process.stdout.on('data', handleData);
+	process.on('exit', handleExit);
+
+	return process;
+}
+
+class VolumePeaksProvider extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {};
+
+		this.emitter = new EventEmitter();
+	}
+
+	static getDerivedStateFromProps(props) {
+		const state = props.hideLiveVolumePeaks ? 'closed' : props.state;
+		return { state };
+	}
+
+	componentDidMount() {
+		if (this.state.state === 'ready') {
+			this._spawnProcess();
+		}
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+		if (this.state.state !== 'ready' && prevState.state === 'ready') {
+			this._killProcess();
+		} else if (this.state.state === 'ready' && prevState.state !== 'ready') {
+			this._spawnProcess();
+		}
+	}
+
+	componentWillUnmount() {
+		this._killProcess();
+		this.emitter.removeAllListeners();
+	}
+
+	_spawnProcess() {
+		this.process = spawnProcess({
+			onPeak: (type, index, peak) => {
+				this.emitter.emit('peak', type, index, peak);
+			},
+		});
+	}
+
+	_killProcess() {
+		if (this.process && !this.process.killed) {
+			this.process.kill();
+		}
+	}
+
+	render() {
+		return r(VolumePeaksContext.Provider, {
+			value: this.emitter,
+		}, this.props.children);
+	}
+}
+
+module.exports = {
+	VolumePeaksProvider: connect(
+		state => ({
+			state: state.pulse[primaryPulseServer].state,
+
+			hideLiveVolumePeaks: state.preferences.hideLiveVolumePeaks,
+		}),
+	)(VolumePeaksProvider),
+
+	VolumePeaksConsumer: VolumePeaksContext.Consumer,
+};

index.css

@@ -100,8 +100,23 @@ div[tabindex="-1"]:focus {
 	border-color: var(--themeSelectedBgColor);
 }
 
-.view-wrapper .graph {
+.peaks {
-	background: var(--themeBaseColor);
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	pointer-events: none;
+}
+
+.view-wrapper.view-wrapper {
+	background: transparent;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 }
 
 .view-wrapper .grid-dot {

package.json

@@ -35,6 +35,7 @@
     "freedesktop-icons": "^0.1.0",
     "ini": "^1.3.5",
     "mathjs": "^5.2.3",
+    "pixi.js": "^4.8.2",
     "prop-types": "^15.6.2",
     "r-dom": "^2.4.0",
     "ramda": "^0.25.0",

reducers/preferences.js

@@ -29,6 +29,8 @@ const initialState = {
 	maxVolume: 1.5,
 	volumeStep: 1 / 20,
 
+	hideLiveVolumePeaks: false,
+
 	doNotAskForConfirmations: false,
 	showDebugInfo: false,
 

renderer.js

@@ -18,12 +18,15 @@ const ServerInfo = require('./components/server-info');
 const { HotKeys } = require('./components/hot-keys');
 const { MenuProvider } = require('./components/menu');
 const Modals = require('./components/modals');
+const { VolumePeaksProvider, VolumePeaksConsumer } = require('./components/volume-peaks-provider');
 
 const theme = require('./utils/theme');
 
 const Root = () => r(ReduxProvider, {
 	store: createStore(),
-}, r(HotKeys, {
+}, r(VolumePeaksProvider, {
+}, r(VolumePeaksConsumer, {
+}, peaks => r(HotKeys, {
 }, ({
 	graphRef,
 	cardsRef,
@@ -35,14 +38,14 @@ const Root = () => r(ReduxProvider, {
 	...modalsActions,
 	...hotKeysActions,
 }, [
+	r(Graph, { ref: graphRef, peaks, ...modalsActions }),
 	r(TopLeftOnScreenButtonGroup, hotKeysActions),
-	r(Graph, { ref: graphRef, ...modalsActions }),
 	r(Cards, { ref: cardsRef }),
 	r(Network, { ref: networkRef, ...modalsActions }),
 	r(Preferences, { ref: preferencesRef }),
 	r(ServerInfo),
 	r(Log),
-]))));
+]))))));
 
 Object.entries(theme.colors).forEach(([ key, value ]) => {
 	document.body.style.setProperty('--' + key, value);

yarn.lock

@@ -976,6 +976,11 @@ binary@^0.3.0:
     buffers "~0.1.1"
     chainsaw "~0.1.0"
 
+bit-twiddle@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bit-twiddle/-/bit-twiddle-1.0.2.tgz#0c6c1fabe2b23d17173d9a61b7b7093eb9e1769e"
+  integrity sha1-DGwfq+KyPRcXPZpht7cJPrnhdp4=
+
 bluebird@^3.0.0:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.2.tgz#1be0908e054a751754549c270489c1505d4ab15a"
@@ -2130,6 +2135,11 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
+earcut@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.1.3.tgz#ca579545f351941af7c3d0df49c9f7d34af99b0c"
+  integrity sha512-AxdCdWUk1zzK/NuZ7e1ljj6IGC+VAdC3Qb7QQDsXpfNrc5IM8tL9nNXUmEGE6jRHTfZ10zhzRhtDmWVsR5pd3A==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -2568,6 +2578,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+eventemitter3@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -3975,6 +3990,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
+ismobilejs@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/ismobilejs/-/ismobilejs-0.4.1.tgz#1a5f126c70fed39c93da380fa62cbae5723e7dc2"
+  integrity sha1-Gl8SbHD+05yT2jgPpiy65XI+fcI=
+
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -4695,6 +4715,11 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+mini-signals@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mini-signals/-/mini-signals-1.2.0.tgz#45b08013c5fae51a24aa1a935cd317c9ed721d74"
+  integrity sha1-RbCAE8X65RokqhqTXNMXye1yHXQ=
+
 "minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -5292,6 +5317,11 @@ parse-ms@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d"
   integrity sha1-VjRtR0nXjyNDDKDHE4UK75GqNh0=
 
+parse-uri@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-uri/-/parse-uri-1.0.0.tgz#2872dcc22f1a797acde1583d8a0ac29552ddac20"
+  integrity sha1-KHLcwi8aeXrN4Vg9igrClVLdrCA=
+
 parseurl@~1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
@@ -5411,6 +5441,25 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+pixi-gl-core@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/pixi-gl-core/-/pixi-gl-core-1.1.4.tgz#8b4b5c433b31e419bc379dc565ce1b835a91b372"
+  integrity sha1-i0tcQzsx5Bm8N53FZc4bg1qRs3I=
+
+pixi.js@^4.8.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/pixi.js/-/pixi.js-4.8.2.tgz#c9e6f5f3b6780d2236705a7539e4e5ca3d74151f"
+  integrity sha512-OHA3Q3wwxRJXkVWALVuiUcUqQZd5p0rQF9ikCvOmux3A6Lxb5S61v4PMEAVgR3+1auZekbv/GNHCxDGFCQSi8g==
+  dependencies:
+    bit-twiddle "^1.0.2"
+    earcut "^2.1.3"
+    eventemitter3 "^2.0.0"
+    ismobilejs "^0.4.0"
+    object-assign "^4.0.1"
+    pixi-gl-core "^1.1.4"
+    remove-array-items "^1.0.0"
+    resource-loader "^2.1.1"
+
 pkg-conf@^2.0.0, pkg-conf@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/pkg-conf/-/pkg-conf-2.1.0.tgz#2126514ca6f2abfebd168596df18ba57867f0058"
@@ -6107,6 +6156,11 @@ remotedev-utils@^0.1.1:
     remotedev-serialize "^0.1.0"
     shortid "^2.2.6"
 
+remove-array-items@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-array-items/-/remove-array-items-1.1.0.tgz#e3d4aaba795a412479ea89408dee345387da7d3b"
+  integrity sha512-+YAHWd5patqAM/F4uBsto9h8RXDVxPRrKW46AkbI6eH12OFrN9wlGpkNWYxCjCfwtkidTjaaCXqU634V4mysvw==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -6217,6 +6271,14 @@ resolve@^1.1.6, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.8.1:
   dependencies:
     path-parse "^1.0.5"
 
+resource-loader@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/resource-loader/-/resource-loader-2.1.1.tgz#f03ec08dd26aae0b0dd2a24a6d312aec2b5a004d"
+  integrity sha512-jRMGYUfa4AGk9ib45Wxc93lobhQVoiCUAUkWqsbb/fhGPge97YT1S8aC0xBEQpolMsrdmB3o7SH8VmIEvIDOLA==
+  dependencies:
+    mini-signals "^1.1.1"
+    parse-uri "^1.0.0"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"