Mute with wheel click

actions/pulse.js

@@ -33,5 +33,10 @@ module.exports = createActionCreators({
 		SET_SOURCE_OUTPUT_CHANNEL_VOLUME: (index, channelIndex, volume) => ({ index, channelIndex, volume }),
 
 		SET_CARD_PROFILE: (index, profileName) => ({ index, profileName }),
+
+		SET_SINK_MUTE: (index, muted) => ({ index, muted }),
+		SET_SOURCE_MUTE: (index, muted) => ({ index, muted }),
+		SET_SINK_INPUT_MUTE_BY_INDEX: (index, muted) => ({ index, muted }),
+		SET_SOURCE_OUTPUT_MUTE_BY_INDEX: (index, muted) => ({ index, muted }),
 	},
 });

components/graph/base.js

@@ -15,6 +15,8 @@ const {
 
 const math = require('mathjs');
 
+const d3 = require('d3');
+
 const { size } = require('../../constants/view');
 
 class GraphView extends GraphViewBase {
@@ -88,6 +90,7 @@ class GraphView extends GraphViewBase {
 			nodeSize,
 			nodeKey,
 			nodeSubtypes,
+			onNodeMouseDown: this.props.onNodeMouseDown,
 			onNodeMouseEnter: this.handleNodeMouseEnter,
 			onNodeMouseLeave: this.handleNodeMouseLeave,
 			onNodeMove: this.handleNodeMove,
@@ -150,6 +153,7 @@ class GraphView extends GraphViewBase {
 			isSelected: selected,
 			nodeMoving,
 			renderEdgeText,
+			onEdgeMouseDown: this.props.onEdgeMouseDown,
 		});
 	}
 
@@ -181,9 +185,33 @@ class Node extends NodeBase {
 		Object.assign(this, {
 			_super_handleDragEnd: this.handleDragEnd,
 			handleDragEnd: this.constructor.prototype.handleDragEnd.bind(this),
+
+			handleMouseDown: this.constructor.prototype.handleMouseDown.bind(this),
 		});
 	}
 
+	componentDidMount() {
+		d3
+			.select(this.nodeRef.current)
+			.on('mousedown', this.handleMouseDown);
+
+		super.componentDidMount();
+	}
+
+	componentWillUnmount() {
+		d3
+			.select(this.nodeRef.current)
+			.on('mousedown', null);
+
+		super.componentWillUnmount();
+	}
+
+	handleMouseDown() {
+		if (this.props.onNodeMouseDown) {
+			this.props.onNodeMouseDown(d3.event, this.props.data);
+		}
+	}
+
 	handleDragEnd(...args) {
 		this.oldSibling = null;
 		return this._super_handleDragEnd(...args);
@@ -202,6 +230,32 @@ EdgeBase.calculateOffset = function (nodeSize, source, target) {
 };
 
 class Edge extends EdgeBase {
+	constructor(props) {
+		super(props);
+
+		Object.assign(this, {
+			handleMouseDown: this.constructor.prototype.handleMouseDown.bind(this),
+		});
+	}
+
+	componentDidMount() {
+		d3
+			.select(this.edgeOverlayRef.current)
+			.on('mousedown', this.handleMouseDown);
+	}
+
+	componentWillUnmount() {
+		d3
+			.select(this.edgeOverlayRef.current)
+			.on('mousedown', null);
+	}
+
+	handleMouseDown() {
+		if (this.props.onEdgeMouseDown) {
+			this.props.onEdgeMouseDown(d3.event, this.props.data);
+		}
+	}
+
 	render() {
 		const { data } = this.props;
 		const id = `${data.source || ''}_${data.target}`;

components/graph/index.js

@@ -471,10 +471,13 @@ class Graph extends React.Component {
 			onCreateNode: this.onCreateNode.bind(this),
 			onUpdateNode: this.onUpdateNode.bind(this),
 			onDeleteNode: this.onDeleteNode.bind(this),
+			onNodeMouseDown: this.onNodeMouseDown.bind(this),
+
 			onSelectEdge: this.onSelectEdge.bind(this),
 			onCreateEdge: this.onCreateEdge.bind(this),
 			onSwapEdge: this.onSwapEdge.bind(this),
 			onDeleteEdge: this.onDeleteEdge.bind(this),
+			onEdgeMouseDown: this.onEdgeMouseDown.bind(this),
 		});
 	}
 
@@ -539,6 +542,17 @@ class Graph extends React.Component {
 		}
 	}
 
+	onNodeMouseDown(event, data) {
+		const pai = dgoToPai.get(data);
+		if (pai && event.button === 1) {
+			if (pai.type === 'sink') {
+				this.props.setSinkMute(pai.index, !pai.muted);
+			} else if (pai.type === 'source') {
+				this.props.setSourceMute(pai.index, !pai.muted);
+			}
+		}
+	}
+
 	onSelectEdge(selected) {
 		this.setState({ selected });
 	}
@@ -562,6 +576,17 @@ class Graph extends React.Component {
 		}
 	}
 
+	onEdgeMouseDown(event, data) {
+		const pai = dgoToPai.get(data);
+		if (pai && event.button === 1) {
+			if (pai.type === 'sinkInput') {
+				this.props.setSinkInputMuteByIndex(pai.index, !pai.muted);
+			} else if (pai.type === 'sourceOutput') {
+				this.props.setSourceOutputMuteByIndex(pai.index, !pai.muted);
+			}
+		}
+	}
+
 	render() {
 		let edges = map(paoToEdge, flatten(map(values, [
 			this.props.objects.sinkInputs,
@@ -653,10 +678,13 @@ class Graph extends React.Component {
 			onCreateNode: this.onCreateNode,
 			onUpdateNode: this.onUpdateNode,
 			onDeleteNode: this.onDeleteNode,
+			onNodeMouseDown: this.onNodeMouseDown,
+
 			onSelectEdge: this.onSelectEdge,
 			onCreateEdge: this.onCreateEdge,
 			onSwapEdge: this.onSwapEdge,
 			onDeleteEdge: this.onDeleteEdge,
+			onEdgeMouseDown: this.onEdgeMouseDown,
 
 			showGraphControls: false,
 

components/graph/satellites-graph.js

@@ -77,6 +77,7 @@ class GraphView extends React.Component {
 			onNodeMove: this.onNodeMove.bind(this),
 
 			onSelectEdge: this.onSelectEdge.bind(this),
+			onEdgeMouseDown: this.onEdgeMouseDown.bind(this),
 
 			renderNode: this.renderNode.bind(this),
 			renderNodeText: this.renderNodeText.bind(this),
@@ -159,7 +160,16 @@ class GraphView extends React.Component {
 
 	onSelectEdge(edge) {
 		const originalEdge = satelliteEdgeToOriginalEdge.get(edge);
-		this.props.onSelectEdge(originalEdge);
+		if (this.props.onSelectEdge) {
+			this.props.onSelectEdge(originalEdge || edge);
+		}
+	}
+
+	onEdgeMouseDown(event, edge) {
+		const originalEdge = satelliteEdgeToOriginalEdge.get(edge);
+		if (this.props.onEdgeMouseDown) {
+			this.props.onEdgeMouseDown(event, originalEdge || edge);
+		}
 	}
 
 	renderNode(nodeRef, dgo, key, selected, hovered) {
@@ -220,6 +230,8 @@ class GraphView extends React.Component {
 
 			onSelectEdge: this.onSelectEdge,
 
+			onEdgeMouseDown: this.onEdgeMouseDown,
+
 			renderNode: this.renderNode,
 			renderNodeText: this.renderNodeText,
 

store/pulse-middleware.js

@@ -203,6 +203,23 @@ module.exports = store => {
 			pa.setCardProfile(index, profileName, rethrow);
 			return state;
 		},
+
+		[pulseActions.setSinkMute]: (state, { payload: { index, muted } }) => {
+			pa.setSinkMute(index, muted, rethrow);
+			return state;
+		},
+		[pulseActions.setSourceMute]: (state, { payload: { index, muted } }) => {
+			pa.setSourceMute(index, muted, rethrow);
+			return state;
+		},
+		[pulseActions.setSinkInputMuteByIndex]: (state, { payload: { index, muted } }) => {
+			pa.setSinkInputMuteByIndex(index, muted, rethrow);
+			return state;
+		},
+		[pulseActions.setSourceOutputMuteByIndex]: (state, { payload: { index, muted } }) => {
+			pa.setSourceOutputMuteByIndex(index, muted, rethrow);
+			return state;
+		},
 	}, null);
 
 	return next => action => {