ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use DragRecognizer in AudioTrimmer

Browse Source
This commit is contained in:
Eric Rosenbaum committed 2019-07-25 15:53:07 -04:00
1 parent b0dbe9e323
commit 032cd5aa02
1 file changed
+20 -35
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/audio-trimmer.jsx
+20 -35
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import bindAll from 'lodash.bindall';
import AudioTrimmerComponent from '../components/audio-trimmer/audio-trimmer.jsx';
import {getEventXY} from '../lib/touch-utils';
import DragRecognizer from '../lib/drag-recognizer';
const MIN_LENGTH = 0.01; // Used to stop sounds being trimmed smaller than 1%
@@ -14,54 +14,39 @@ class AudioTrimmer extends React.Component {
'handleTrimEndMouseDown',
'handleTrimStartMouseMove',
'handleTrimEndMouseMove',
'handleTrimStartMouseUp',
'handleTrimEndMouseUp',
'storeRef'
]);
this.trimStartDragRecognizer = new DragRecognizer({
onDrag: this.handleTrimStartMouseMove,
touchDragAngle: 90,
distanceThreshold: 0
});
this.trimEndDragRecognizer = new DragRecognizer({
onDrag: this.handleTrimEndMouseMove,
touchDragAngle: 90,
distanceThreshold: 0
});
}
handleTrimStartMouseMove (e) {
const containerSize = this.containerElement.getBoundingClientRect().width;
const dx = (getEventXY(e).x - this.initialX) / containerSize;
handleTrimStartMouseMove (currentOffset, initialOffset) {
const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
const newTrim = Math.max(0, Math.min(this.props.trimEnd - MIN_LENGTH, this.initialTrim + dx));
this.props.onSetTrimStart(newTrim);
e.preventDefault();
}
handleTrimEndMouseMove (e) {
const containerSize = this.containerElement.getBoundingClientRect().width;
const dx = (getEventXY(e).x - this.initialX) / containerSize;
handleTrimEndMouseMove (currentOffset, initialOffset) {
const dx = (currentOffset.x - initialOffset.x) / this.containerSize;
const newTrim = Math.min(1, Math.max(this.props.trimStart + MIN_LENGTH, this.initialTrim + dx));
this.props.onSetTrimEnd(newTrim);
e.preventDefault();
}
handleTrimStartMouseUp () {
window.removeEventListener('mousemove', this.handleTrimStartMouseMove);
window.removeEventListener('mouseup', this.handleTrimStartMouseUp);
window.removeEventListener('touchmove', this.handleTrimStartMouseMove);
window.removeEventListener('touchend', this.handleTrimStartMouseUp);
}
handleTrimEndMouseUp () {
window.removeEventListener('mousemove', this.handleTrimEndMouseMove);
window.removeEventListener('mouseup', this.handleTrimEndMouseUp);
window.removeEventListener('touchmove', this.handleTrimEndMouseMove);
window.removeEventListener('touchend', this.handleTrimEndMouseUp);
}
handleTrimStartMouseDown (e) {
this.initialX = getEventXY(e).x;
this.containerSize = this.containerElement.getBoundingClientRect().width;
this.trimStartDragRecognizer.start(e);
this.initialTrim = this.props.trimStart;
window.addEventListener('mousemove', this.handleTrimStartMouseMove);
window.addEventListener('mouseup', this.handleTrimStartMouseUp);
window.addEventListener('touchmove', this.handleTrimStartMouseMove);
window.addEventListener('touchend', this.handleTrimStartMouseUp);
e.preventDefault();
}
handleTrimEndMouseDown (e) {
this.initialX = getEventXY(e).x;
this.containerSize = this.containerElement.getBoundingClientRect().width;
this.trimEndDragRecognizer.start(e);
this.initialTrim = this.props.trimEnd;
window.addEventListener('mousemove', this.handleTrimEndMouseMove);
window.addEventListener('mouseup', this.handleTrimEndMouseUp);
window.addEventListener('touchmove', this.handleTrimEndMouseMove);
window.addEventListener('touchend', this.handleTrimEndMouseUp);
e.preventDefault();
}
storeRef (el) {
this.containerElement = el;