synthing

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

index.js (2298B)

      1 import { h, Component } from 'preact';
      2 import WaveTable from '../WaveTable/';
      3 import consts from '../consts.js';
      4 import helpers from '../helpers.js';
      5 import './style.css';
      6 
      7 const smoothZoneRange = function (waveData, begin, end) {
      8     if (begin > end) {
      9         let tmp = begin;
     10         begin = end;
     11         end = tmp;
     12     }
     13     const slope = (waveData[end] - waveData[begin]) / (end - begin);
     14     for (let i = begin + 1; i < end; i++) {
     15         waveData[i] = helpers.linear(slope, i - begin, waveData[begin]);
     16     }
     17     return true;
     18 }
     19 
     20 export default class waveEditor extends Component {
     21     componentDidMount() {
     22         const handleMove = (ev) => {
     23             this.updateWaveform({
     24                 x: ev.x + window.scrollX,
     25                 y: ev.y + window.scrollY
     26             }, this.props.waveform);
     27         };
     28         const handleUp = (ev) => {
     29             handleMove(ev);
     30             this.setState({
     31                 prevZone: null
     32             })
     33         };
     34         helpers.clickNDrag(this.divRef, null, handleMove, handleUp);
     35     }
     36     componentWillUpdate() {
     37         return false;
     38     }
     39     updateWaveform(mouseData, waveform) {
     40         const waveCanvas = this.divRef;
     41         const canvasCoords = {
     42             x: mouseData.x - waveCanvas.offsetLeft,
     43             y: mouseData.y - waveCanvas.offsetTop,
     44         };
     45         const newWaveform = waveform.slice();
     46 
     47         let zone = helpers.bounded(
     48             Math.floor(consts.BUF_SIZE * canvasCoords.x / waveCanvas.clientWidth),
     49             0,
     50             consts.BUF_SIZE - 1
     51         );
     52 
     53         let val = helpers.bounded(
     54             ((waveCanvas.clientHeight / 2) - canvasCoords.y) / (waveCanvas.clientHeight / 2),
     55             -1,
     56             1
     57         );
     58 
     59         newWaveform[zone] = val;
     60         if (this.state.prevZone !== null &&
     61             Math.abs(this.state.prevZone - zone) > 1) {
     62             smoothZoneRange(newWaveform, this.state.prevZone, zone)
     63         }
     64 
     65         this.setState({
     66             prevZone: zone
     67         });
     68         this.props.updateWaveform(newWaveform);
     69 
     70     }
     71     render() {
     72         return (
     73             <div
     74                 class="wave-editor"
     75                 ref={(div) => {this.divRef = div}}
     76             >
     77                 <WaveTable waveform={this.props.waveform} />
     78             </div>
     79         );
     80     }
     81 }