commit f6e47df2d4ef885ba7d5e1c84109436b000bba18
parent 9272e0354f9d95a3108cf0bc374d7cb405efd31b
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Wed, 7 Mar 2018 15:48:47 -0800
Volume becomes HSlider
Diffstat:
6 files changed, 84 insertions(+), 84 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -4,7 +4,7 @@ import WaveManager from '../WaveManager/';
import Synth from '../Synth/';
import CircleButton from '../CircleButton/';
import WaveTable from '../WaveTable/';
-import Volume from '../Volume/';
+import HSlider from '../HSlider/';
import Param from '../Param/';
import Wheel from '../Wheel/';
import './App.css';
@@ -106,7 +106,7 @@ class App extends Component {
tones: [{
active: true,
waveform: initialWave.slice(),
- volume: 0.7,
+ mix: 0.7,
mute: false,
solo: false,
beats: boolArray.update(boolArray.create(initBeats), 0, true)
@@ -168,14 +168,14 @@ class App extends Component {
(val, j) => (
runningAverage(
val,
- currTone.waveform[j] * currTone.volume,
+ currTone.waveform[j] * currTone.mix,
i + 1
)
)
)
),
- helpers.scale(firstTone.waveform, firstTone.volume)
+ helpers.scale(firstTone.waveform, firstTone.mix)
);
}
@@ -206,7 +206,7 @@ class App extends Component {
const tones = immObjArray.add(this.state.tones, at, {
waveform,
beats: boolArray.create(this.state.numBeats),
- volume: 0.7,
+ mix: 0.7,
mute: false,
solo: false
});
@@ -303,10 +303,10 @@ class App extends Component {
)
});
}}
- volume={this.state.tones[idx].volume}
- updateVolume={(volume) => {
+ mix={this.state.tones[idx].mix}
+ updateMix={(mix) => {
this.updateTone(idx, {
- volume
+ mix
});
}}
></WaveManager>
@@ -360,7 +360,7 @@ class App extends Component {
update={this.setBeats}
/>
<Adsr adsr={this.state.adsr} update={this.updateAdsr} />
- <Volume volume={this.state.volume} update={this.updateVolume} />
+ <HSlider value={this.state.volume} update={this.updateVolume} />
</div>
<div class="wave-manager-container">
{tones}
diff --git a/src/HSlider/index.js b/src/HSlider/index.js
@@ -0,0 +1,41 @@
+import { h, Component } from 'preact';
+import helpers from '../helpers';
+import './style.css';
+
+const mapVal = (val) => val * val;
+const unmapVal = (val) => Math.sqrt(val);
+
+export default class HSlider extends Component {
+ handleUpdate = (ev) => {
+ const minValX = this.sliderRef.offsetLeft;
+ const maxValX = this.sliderRef.offsetLeft + this.sliderRef.offsetWidth;
+ const width = maxValX - minValX;
+ const offset = helpers.bounded(ev.x - minValX, 0, width);
+ this.props.update(mapVal(offset / width));
+
+ }
+ componentDidMount() {
+ helpers.clickNDrag(this.sliderRef, this.handleUpdate, this.handleUpdate, null);
+ }
+ render() {
+ return (
+ <div class={`HSlider${this.props.class ? ' ' + this.props.class : ''}`} ref={(ref) => {this.volRef = ref}}>
+ {this.props.children.length
+ ? this.props.children
+ : (<span class="icon-volume"></span>)
+ }
+ <div
+ class="hslider-triangle-container"
+ ref={(ref) => {this.sliderRef = ref}}
+ >
+ <div
+ class="hslider-triangle -foreground"
+ style={`transform: scale(${unmapVal(this.props.value)});`}
+ ></div>
+ <div class="hslider-triangle -background"></div>
+ </div>
+ </div>
+ );
+
+ }
+}
diff --git a/src/HSlider/style.css b/src/HSlider/style.css
@@ -0,0 +1,29 @@
+.hslider-triangle {
+ display: inline-block;
+ border: 8px solid transparent;
+ border-right-color: black;
+ border-right-width: 30px;
+ border-left-width: 0px;
+ height: 0px;
+}
+
+.hslider-triangle.-background {
+ opacity: 0.3;
+}
+
+.hslider-triangle.-foreground {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform-origin: left;
+}
+
+.hslider-triangle-container {
+ display: inline-flex;
+ position: relative;
+ margin-left: 2px;
+}
+
+.HSlider {
+ display: inline-flex;
+}
diff --git a/src/Volume/index.js b/src/Volume/index.js
@@ -1,41 +0,0 @@
-import { h, Component } from 'preact';
-import helpers from '../helpers';
-import './style.css';
-
-const mapVol = (vol) => vol * vol;
-const unmapVol = (vol) => Math.sqrt(vol);
-
-export default class Volume extends Component {
- handleUpdate = (ev) => {
- const minVolX = this.sliderRef.offsetLeft;
- const maxVolX = this.sliderRef.offsetLeft + this.sliderRef.offsetWidth;
- const width = maxVolX - minVolX;
- const offset = helpers.bounded(ev.x - minVolX, 0, width);
- this.props.update(mapVol(offset / width));
-
- }
- componentDidMount() {
- helpers.clickNDrag(this.sliderRef, this.handleUpdate, this.handleUpdate, null);
- }
- render() {
- return (
- <div class={`Volume${this.props.class ? ' ' + this.props.class : ''}`} ref={(ref) => {this.volRef = ref}}>
- {this.props.children.length
- ? this.props.children
- : (<span class="icon-volume"></span>)
- }
- <div
- class="volume-triangle-container"
- ref={(ref) => {this.sliderRef = ref}}
- >
- <div
- class="volume-triangle -foreground"
- style={`transform: scale(${unmapVol(this.props.volume)});`}
- ></div>
- <div class="volume-triangle -background"></div>
- </div>
- </div>
- );
-
- }
-}
diff --git a/src/Volume/style.css b/src/Volume/style.css
@@ -1,29 +0,0 @@
-.volume-triangle {
- display: inline-block;
- border: 8px solid transparent;
- border-right-color: black;
- border-right-width: 30px;
- border-left-width: 0px;
- height: 0px;
-}
-
-.volume-triangle.-background {
- opacity: 0.3;
-}
-
-.volume-triangle.-foreground {
- position: absolute;
- top: 0;
- left: 0;
- transform-origin: left;
-}
-
-.volume-triangle-container {
- display: inline-flex;
- position: relative;
- margin-left: 2px;
-}
-
-.Volume {
- display: inline-flex;
-}
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -1,7 +1,7 @@
import { h, Component } from 'preact';
import CheckBox from '../CheckBox/';
import WaveTable from '../WaveTable/';
-import Volume from '../Volume/';
+import HSlider from '../HSlider/';
import helpers from '../helpers';
import './style.css';
@@ -40,13 +40,13 @@ export default class WaveManager extends Component {
>
mute
</button>
- <Volume
- volume={this.props.volume}
- update={this.props.updateVolume}
+ <HSlider
+ value ={this.props.mix}
+ update={this.props.updateMix}
class="item"
>
<span>mix</span>
- </Volume>
+ </HSlider>
</div>
</div>
<div class="beats">
