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

Merge pull request #325 from fsih/unfocusText

Browse source 
Unfocus text fields when canvas clicked and don't take keystrokes in canvas when text fields are focused
This commit is contained in:
DD Liu 2018-03-20 14:06:59 -04:00 committed by GitHub
commit 724fe85645
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -50,6 +50,10 @@ class PaintEditor extends React.Component {
} }
componentDidMount () { componentDidMount () {
document.addEventListener('keydown', this.props.onKeyPress); 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) { componentDidUpdate (prevProps) {
if (this.props.isEyeDropping && !prevProps.isEyeDropping) { if (this.props.isEyeDropping && !prevProps.isEyeDropping) {
@ -61,6 +65,8 @@ class PaintEditor extends React.Component {
componentWillUnmount () { componentWillUnmount () {
document.removeEventListener('keydown', this.props.onKeyPress); document.removeEventListener('keydown', this.props.onKeyPress);
this.stopEyeDroppingLoop(); this.stopEyeDroppingLoop();
document.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('touchstart', this.onMouseDown);
} }
handleUpdateSvg (skipSnapshot) { handleUpdateSvg (skipSnapshot) {
// Store the zoom/pan and restore it after snapshotting // Store the zoom/pan and restore it after snapshotting
@ -134,7 +140,12 @@ class PaintEditor extends React.Component {
this.setState({canvas: canvas}); this.setState({canvas: canvas});
this.canvas = canvas; this.canvas = canvas;
} }
onMouseDown () { onMouseDown (event) {
if (event.target === paper.view.element &&
document.activeElement instanceof HTMLInputElement) {
document.activeElement.blur();
}
if (this.props.isEyeDropping) { if (this.props.isEyeDropping) {
const colorString = this.eyeDropper.colorString; const colorString = this.eyeDropper.colorString;
const callback = this.props.changeColorToEyeDropper; const callback = this.props.changeColorToEyeDropper;
@ -164,11 +175,6 @@ class PaintEditor extends React.Component {
this.eyeDropper.pickX = -1; this.eyeDropper.pickX = -1;
this.eyeDropper.pickY = -1; this.eyeDropper.pickY = -1;
this.eyeDropper.activate(); 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(() => { this.intervalId = setInterval(() => {
const colorInfo = this.eyeDropper.getColorInfo( const colorInfo = this.eyeDropper.getColorInfo(
@ -190,8 +196,6 @@ class PaintEditor extends React.Component {
} }
stopEyeDroppingLoop () { stopEyeDroppingLoop () {
clearInterval(this.intervalId); clearInterval(this.intervalId);
document.removeEventListener('mousedown', this.onMouseDown);
document.removeEventListener('touchstart', this.onMouseDown);
} }
render () { render () {
return ( return (

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

@ -232,6 +232,11 @@ class ReshapeTool extends paper.Tool {
this.active = false; this.active = false;
} }
handleKeyDown (event) { 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 nudgeAmount = 1 / paper.view.zoom;
const selected = getSelectedLeafItems(); const selected = getSelectedLeafItems();
if (selected.length === 0) return; if (selected.length === 0) return;