scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-08 13:42:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Make slider handles stick to the cursor

Browse source
This commit is contained in:
adroitwhiz 2020-07-31 12:29:58 -04:00
parent 4f86762737
commit a436c6f3a8
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/forms/slider.jsx
View file

@ -17,15 +17,21 @@ class SliderComponent extends React.Component {
'handleMouseUp',
'handleMouseMove',
'handleClickBackground',
'setBackground'
'setBackground',
'setHandle'
]);
// Distance from the left edge of the slider handle to the mouse down/click event
this.handleClickOffset = 0;
}
handleMouseDown () {
handleMouseDown (event) {
document.addEventListener('mousemove', this.handleMouseMove);
document.addEventListener('mouseup', this.handleMouseUp);
document.addEventListener('touchmove', this.handleMouseMove, {passive: false});
document.addEventListener('touchend', this.handleMouseUp);
this.handleClickOffset = getEventXY(event).x - this.handle.getBoundingClientRect().left;
}
handleMouseUp () {
@ -41,20 +47,26 @@ class SliderComponent extends React.Component {
}
handleClickBackground (event) {
// Move slider handle's center to the cursor
this.handleClickOffset = HANDLE_WIDTH / 2;
this.props.onChange(this.scaleMouseToSliderPosition(event));
}
scaleMouseToSliderPosition (event){
const {x} = getEventXY(event);
const backgroundBBox = this.background.getBoundingClientRect();
const scaledX = x - backgroundBBox.left;
return Math.max(0, Math.min(100, 100 * scaledX / backgroundBBox.width));
const scaledX = x - backgroundBBox.left - this.handleClickOffset;
return Math.max(0, Math.min(100, 100 * scaledX / (backgroundBBox.width - HANDLE_WIDTH)));
}
setBackground (ref) {
this.background = ref;
}
setHandle (ref) {
this.handle = ref;
}
render () {
const halfHandleWidth = HANDLE_WIDTH / 2;
const pixelMin = halfHandleWidth;
@ -76,6 +88,7 @@ class SliderComponent extends React.Component {
>
<div
className={styles.handle}
ref={this.setHandle}
style={{
left: `${handleOffset}px`
}}