synthing

a waveform sequencing synth on the web
Log | Files | Refs | Submodules

index.js (2068B)

      1 import { h, Component} from 'preact';
      2 import helpers from '../helpers.js';
      3 import './style.css';
      4 
      5 export default class Param extends Component {
      6     componentDidMount() {
      7         const setUpMove = () => {
      8             this.internalVal = this.props.val;
      9         }
     10         const handleMove = (ev) => {
     11             // calculate how much to adjust the value given the
     12             // min and max values of the param, the speed of the mouse movement,
     13             // and the precision of the param.
     14             const maxMov = 300 / (this.props.precision ? this.props.precision + 1 : 1);
     15             const ratioMov = ev.movementY / maxMov;
     16             const expRatioMov = -Math.sign(ratioMov) * Math.pow(Math.abs(ratioMov), 1.3);
     17             const newVal = (expRatioMov * (this.props.maxVal - this.props.minVal)) + this.internalVal;
     18             this.internalVal = helpers.bounded(
     19                 newVal,
     20                 this.props.minVal,
     21                 this.props.maxVal
     22             );
     23             this.props.update(Number(this.internalVal.toFixed(this.props.precision)));
     24         }
     25         helpers.clickNDrag(this.paramRef, setUpMove, handleMove, null);
     26     }
     27     handleChange(e) {
     28         this.props.update(e.target.value);
     29     }
     30     getNumString() {
     31         return (this.props.precision !== undefined && this.props.val.toFixed
     32               ? this.props.val.toFixed(this.props.precision)
     33               : this.props.val)
     34              + (this.props.suffix || '');
     35     }
     36     render() {
     37         const inputId = `param-${this.props.name}`;
     38         return (
     39             <div class="param" ref={(param) => {this.paramRef = param}}>
     40                 <div class="input-container">
     41                     <label for={inputId}>{this.props.name}</label>
     42                     <input
     43                         type="text"
     44                         id={inputId}
     45                         value={this.getNumString()}
     46                         onChange={this.handleChange}
     47                     ></input>
     48                 </div>
     49                 {this.props.children}
     50             </div>
     51         )
     52     }
     53 }