commit d0b7360fd9384c7f82fd66cd69326a6c48e5062a
parent bd28ca810eab6d2303217ade018939a0b6cf5f2d
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date: Tue, 20 Feb 2018 21:31:13 -0800
Fix wave-table draw for multiple wave-tables
Diffstat:
4 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -129,7 +129,6 @@ class App extends Component {
return accum;
}, [])
- //TODO: for some reason, this function ends up modifying the array passed in as a prop to WaveEditor. I probably need to break editor out into viewer as well. But in any case, there should be a nice way to observe changes in the array or at least communicate when a change has happened.
totalWaveform = () => {
const allWaves = this.activeWaveforms();
if (allWaves.length === 0) {
diff --git a/src/WaveEditor/index.js b/src/WaveEditor/index.js
@@ -28,6 +28,7 @@ export default class waveEditor extends Component {
this.divRef.addEventListener('mousedown', (ev) => {
document.addEventListener('mousemove', handleMove);
helpers.oneTime(document, 'mouseup', (ev) => {
+ handleMove(ev);
document.removeEventListener('mousemove', handleMove);
this.setState({
prevZone: null
diff --git a/src/WaveTable/index.js b/src/WaveTable/index.js
@@ -3,37 +3,37 @@ import helpers from '../helpers';
import consts from '../consts';
import './style.css';
-const drawArea = helpers.throttle((amplitudes, canvas, begin = 0, end = undefined) => {
+const drawArea = helpers.soon((amplitudes, canvas, begin = 0, end = undefined) => {
const ctx = canvas.getContext("2d");
const rectWidth = canvas.width / consts.BUF_SIZE;
const roundedWidth = Math.max(1, rectWidth)
const lineWidth = 1;
const halfCanvas = (canvas.height - lineWidth) / 2;
- window.requestAnimationFrame(() => {
- amplitudes.forEach((amp, idx) => {
- amp *= halfCanvas;
- const roundedXOffset = Math.round(idx * rectWidth);
- ctx.clearRect(roundedXOffset, 0, roundedWidth + 1, canvas.height);
- ctx.fillStyle = "#ff735e";
- ctx.fillRect(roundedXOffset, halfCanvas, roundedWidth + 1, -amp);
- });
+ amplitudes.forEach((amp, idx) => {
+ amp *= halfCanvas;
+ const roundedXOffset = Math.round(idx * rectWidth);
+ ctx.clearRect(roundedXOffset, 0, roundedWidth + 1, canvas.height);
+ ctx.fillStyle = "#ff735e";
+ ctx.fillRect(roundedXOffset, halfCanvas, roundedWidth + 1, -amp);
});
-}, 20)
+});
export default class WaveTable extends Component {
+ constructor() {
+ super();
+ this.drawArea = helpers.throttle(drawArea, 30);
+ }
componentWillUpdate() {
return false;
}
componentDidMount() {
- drawArea(this.props.waveform, this.canvasRef);
+ this.drawArea(this.props.waveform, this.canvasRef);
if (this.props.setCanvasRef) {
this.props.setCanvasRef(this.canvasRef);
}
}
componentWillReceiveProps(newProps) {
- if (newProps.waveform !== this.props.waveform) {
- drawArea(newProps.waveform, this.canvasRef);
- }
+ this.drawArea(newProps.waveform, this.canvasRef);
}
render() {
const height = this.props.height || 400;
diff --git a/src/helpers.js b/src/helpers.js
@@ -1,5 +1,6 @@
+const partial = (f, ...args) => (...moreArgs) => f(...args, ...moreArgs);
export default {
- partial: (f, ...args) => (...moreArgs) => f(...args, ...moreArgs),
+ partial,
linear: (m, x, b) => (m * x) + b,
bounded: (val, min, max) => val < min ? min : (val > max ? max : val),
scale: (buf, amt) => buf.map(val => val * amt),
@@ -11,6 +12,10 @@ export default {
}
target.addEventListener(type, doOnce);
},
+ soon: (fn, ms=0) => {
+ return (...args) =>
+ window.setTimeout(partial(fn, ...args), ms);
+ },
throttle: (fn, ms) => {
let time = 0;
return (...args) => {
