From 2b88b86156ba312085224db4e04d78417c5580af Mon Sep 17 00:00:00 2001 From: futpib Date: Fri, 16 Nov 2018 20:17:27 +0300 Subject: [PATCH] Mute with wheel click --- actions/pulse.js | 5 +++ components/graph/base.js | 54 ++++++++++++++++++++++++++++ components/graph/index.js | 28 +++++++++++++++ components/graph/satellites-graph.js | 14 +++++++- store/pulse-middleware.js | 17 +++++++++ 5 files changed, 117 insertions(+), 1 deletion(-) diff --git a/actions/pulse.js b/actions/pulse.js index e1bb3d8..2b5e7dc 100644 --- a/actions/pulse.js +++ b/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 }), }, }); diff --git a/components/graph/base.js b/components/graph/base.js index 36d2650..bb60eab 100644 --- a/components/graph/base.js +++ b/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}`; diff --git a/components/graph/index.js b/components/graph/index.js index 8f55023..61619e0 100644 --- a/components/graph/index.js +++ b/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, diff --git a/components/graph/satellites-graph.js b/components/graph/satellites-graph.js index 2a4d8c7..d91a8f2 100644 --- a/components/graph/satellites-graph.js +++ b/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, diff --git a/store/pulse-middleware.js b/store/pulse-middleware.js index 8d07949..0a01b55 100644 --- a/store/pulse-middleware.js +++ b/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 => {