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

Make the stage color picker work with touch.

Browse Source
This commit is contained in:
Paul Kaplan committed 2019-03-06 11:17:36 -05:00
1 parent 7c557db8b4
commit b2b4da2f68
1 file changed
+51 -35
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/stage.jsx
+51 -35
View File
@@ -175,9 +175,11 @@ class Stage extends React.Component {
const {x, y} = getEventXY(e);
const mousePosition = [x - this.rect.left, y - this.rect.top];
// Set the pickX/Y for the color picker loop to pick up
this.pickX = mousePosition[0];
this.pickY = mousePosition[1];
if (this.props.isColorPicking) {
// Set the pickX/Y for the color picker loop to pick up
this.pickX = mousePosition[0];
this.pickY = mousePosition[1];
}
if (this.state.mouseDown && !this.state.isDragging) {
const distanceFromMouseDown = Math.sqrt(
@@ -231,38 +233,11 @@ class Stage extends React.Component {
this.onStopDrag(mousePosition[0], mousePosition[1]);
}
this.props.vm.postIOData('mouse', data);
}
onMouseDown (e) {
this.updateRect();
const {x, y} = getEventXY(e);
const mousePosition = [x - this.rect.left, y - this.rect.top];
if (e.button === 0 || (window.TouchEvent && e instanceof TouchEvent)) {
this.setState({
mouseDown: true,
mouseDownPosition: mousePosition,
mouseDownTimeoutId: setTimeout(
this.onStartDrag.bind(this, mousePosition[0], mousePosition[1]),
400
)
});
}
const data = {
isDown: true,
x: mousePosition[0],
y: mousePosition[1],
canvasWidth: this.rect.width,
canvasHeight: this.rect.height
};
this.props.vm.postIOData('mouse', data);
if (e.preventDefault) {
// Prevent default to prevent touch from dragging page
e.preventDefault();
// But we do want any active input to be blurred
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
if (this.props.isColorPicking) {
if (this.props.isColorPicking &&
mousePosition[0] > 0 && mousePosition[0] < this.rect.width &&
mousePosition[1] > 0 && mousePosition[1] < this.rect.height
) {
const {r, g, b} = this.state.colorInfo.color;
const componentToString = c => {
const hex = c.toString(16);
@@ -271,6 +246,47 @@ class Stage extends React.Component {
const colorString = `#${componentToString(r)}${componentToString(g)}${componentToString(b)}`;
this.props.onDeactivateColorPicker(colorString);
this.setState({colorInfo: null});
this.pickX = null;
this.pickY = null;
}
}
onMouseDown (e) {
this.updateRect();
const {x, y} = getEventXY(e);
const mousePosition = [x - this.rect.left, y - this.rect.top];
if (this.props.isColorPicking) {
// Set the pickX/Y for the color picker loop to pick up
this.pickX = mousePosition[0];
this.pickY = mousePosition[1];
// Immediately update the color picker info
this.setState({colorInfo: this.getColorInfo(this.pickX, this.pickY)});
} else {
if (e.button === 0 || (window.TouchEvent && e instanceof TouchEvent)) {
this.setState({
mouseDown: true,
mouseDownPosition: mousePosition,
mouseDownTimeoutId: setTimeout(
this.onStartDrag.bind(this, mousePosition[0], mousePosition[1]),
400
)
});
}
const data = {
isDown: true,
x: mousePosition[0],
y: mousePosition[1],
canvasWidth: this.rect.width,
canvasHeight: this.rect.height
};
this.props.vm.postIOData('mouse', data);
if (e.preventDefault) {
// Prevent default to prevent touch from dragging page
e.preventDefault();
// But we do want any active input to be blurred
if (document.activeElement && document.activeElement.blur) {
document.activeElement.blur();
}
}
}
}
onWheel (e) {