diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index df4f8e5ca..bcccb7fe7 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -25,6 +25,7 @@ const SpriteSelectorItem = props => ( }} disable={props.preventContextMenu} id={`${props.name}-${contextMenuId}`} + ref={props.componentRef} > {typeof props.number === 'undefined' ? null : (
{props.number}
@@ -89,6 +90,7 @@ const SpriteSelectorItem = props => ( SpriteSelectorItem.propTypes = { className: PropTypes.string, + componentRef: PropTypes.func, costumeURL: PropTypes.string, details: PropTypes.string, name: PropTypes.string.isRequired, diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx index 101ecd92f..f946cf83f 100644 --- a/src/containers/sprite-selector-item.jsx +++ b/src/containers/sprite-selector-item.jsx @@ -9,6 +9,7 @@ import storage from '../lib/storage'; import VM from 'scratch-vm'; import getCostumeUrl from '../lib/get-costume-url'; import DragRecognizer from '../lib/drag-recognizer'; +import {getEventXY} from '../lib/touch-utils'; import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx'; @@ -17,6 +18,7 @@ class SpriteSelectorItem extends React.PureComponent { super(props); bindAll(this, [ 'getCostumeData', + 'setRef', 'handleClick', 'handleDelete', 'handleDuplicate', @@ -25,7 +27,8 @@ class SpriteSelectorItem extends React.PureComponent { 'handleMouseLeave', 'handleMouseDown', 'handleDragEnd', - 'handleDrag' + 'handleDrag', + 'handleTouchEnd' ]); this.dragRecognizer = new DragRecognizer({ @@ -33,7 +36,11 @@ class SpriteSelectorItem extends React.PureComponent { onDragEnd: this.handleDragEnd }); } + componentDidMount () { + document.addEventListener('touchend', this.handleTouchEnd); + } componentWillUnmount () { + document.removeEventListener('touchend', this.handleTouchEnd); this.dragRecognizer.reset(); } getCostumeData () { @@ -67,6 +74,13 @@ class SpriteSelectorItem extends React.PureComponent { }); this.noClick = true; } + handleTouchEnd (e) { + const {x, y} = getEventXY(e); + const {top, left, bottom, right} = this.ref.getBoundingClientRect(); + if (x >= left && x <= right && y >= top && y <= bottom) { + this.handleMouseEnter(); + } + } handleMouseDown (e) { this.dragRecognizer.start(e); } @@ -94,6 +108,10 @@ class SpriteSelectorItem extends React.PureComponent { handleMouseEnter () { this.props.dispatchSetHoveredSprite(this.props.id); } + setRef (component) { + // Access the DOM node using .elem because it is going through ContextMenuTrigger + this.ref = component && component.elem; + } render () { const { /* eslint-disable no-unused-vars */ @@ -113,6 +131,7 @@ class SpriteSelectorItem extends React.PureComponent { } = this.props; return ( = left && x <= right && y >= top && y <= bottom) { + this.handleMouseEnter(); + } + } addBackdropFromLibraryItem (item, shouldActivateTab = true) { const vmBackdrop = { name: item.name, @@ -137,12 +153,16 @@ class StageSelector extends React.Component { setFileInput (input) { this.fileInput = input; } + setRef (ref) { + this.ref = ref; + } render () { const componentProps = omit(this.props, [ 'asset', 'dispatchSetHoveredSprite', 'id', 'intl', 'onActivateTab', 'onSelect', 'onShowImporting', 'onCloseImporting']); return (