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

Unfocus text fields when canvas clicked

Browse source
This commit is contained in:
DD 2018-03-15 13:20:07 -04:00
parent 254bbe1285
commit 7a0a0784e1
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/containers/paint-editor.jsx
View file

@ -50,6 +50,10 @@ class PaintEditor extends React.Component {
}
componentDidMount () {
document.addEventListener('keydown', this.props.onKeyPress);
// document listeners used to detect if a mouse is down outside of the
// canvas, and should therefore stop the eye dropper
document.addEventListener('mousedown', this.onMouseDown);
document.addEventListener('touchstart', this.onMouseDown);
}
componentDidUpdate (prevProps) {
if (this.props.isEyeDropping && !prevProps.isEyeDropping) {
@ -61,6 +65,8 @@ class PaintEditor extends React.Component {
componentWillUnmount () {
document.removeEventListener('keydown', this.props.onKeyPress);
this.stopEyeDroppingLoop();
document.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('touchstart', this.onMouseDown);
}
handleUpdateSvg (skipSnapshot) {
// Store the zoom/pan and restore it after snapshotting
@ -135,6 +141,10 @@ class PaintEditor extends React.Component {
this.canvas = canvas;
}
onMouseDown () {
if (document.activeElement instanceof HTMLInputElement) {
document.activeElement.blur();
}
if (this.props.isEyeDropping) {
const colorString = this.eyeDropper.colorString;
const callback = this.props.changeColorToEyeDropper;
@ -164,11 +174,6 @@ class PaintEditor extends React.Component {
this.eyeDropper.pickX = -1;
this.eyeDropper.pickY = -1;
this.eyeDropper.activate();
// document listeners used to detect if a mouse is down outside of the
// canvas, and should therefore stop the eye dropper
document.addEventListener('mousedown', this.onMouseDown);
document.addEventListener('touchstart', this.onMouseDown);
this.intervalId = setInterval(() => {
const colorInfo = this.eyeDropper.getColorInfo(
@ -190,8 +195,6 @@ class PaintEditor extends React.Component {
}
stopEyeDroppingLoop () {
clearInterval(this.intervalId);
document.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('touchstart', this.onMouseDown);
}
render () {
return (

5
src/helper/selection-tools/reshape-tool.js
View file

@ -232,6 +232,11 @@ class ReshapeTool extends paper.Tool {
this.active = false;
}
handleKeyDown (event) {
if (event.event.target instanceof HTMLInputElement) {
// Ignore nudge if a text input field is focused
return;
}
const nudgeAmount = 1 / paper.view.zoom;
const selected = getSelectedLeafItems();
if (selected.length === 0) return;