From eed4c36b7b20773a4dbbf8dcbb81a24ccb86e5ff Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 19 Jun 2019 15:41:59 -0400
Subject: [PATCH 1/3] Emit hover on touch end to make sharing to sprites work
 on touch

---
 .../sprite-selector-item.jsx                  |  1 +
 src/containers/sprite-selector-item.jsx       | 22 ++++++++++++++++++-
 src/containers/stage-selector.jsx             | 22 ++++++++++++++++++-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index e2e56170b..4f8cca8c4 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.dragging}
         id={`${props.name}-${contextMenuId}`}
+        ref={props.componentRef}
     >
         {typeof props.number === 'undefined' ? null : (
             <div className={styles.number}>{props.number}</div>
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index f3f79bb56..07d25ae7e 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -19,6 +19,7 @@ class SpriteSelectorItem extends React.PureComponent {
         super(props);
         bindAll(this, [
             'getCostumeData',
+            'setRef',
             'handleClick',
             'handleDelete',
             'handleDuplicate',
@@ -27,15 +28,29 @@ class SpriteSelectorItem extends React.PureComponent {
             'handleMouseLeave',
             'handleMouseDown',
             'handleMouseMove',
-            'handleMouseUp'
+            'handleMouseUp',
+            'handleTouchEnd'
         ]);
     }
+    componentDidMount () {
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    componentWillUnmount () {
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
     getCostumeData () {
         if (this.props.costumeURL) return this.props.costumeURL;
         if (!this.props.asset) return null;
 
         return getCostumeUrl(this.props.asset);
     }
+    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();
+        }
+    }
     handleMouseUp () {
         this.initialOffset = null;
         window.removeEventListener('mouseup', this.handleMouseUp);
@@ -103,6 +118,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 */
@@ -122,6 +141,7 @@ class SpriteSelectorItem extends React.PureComponent {
         } = this.props;
         return (
             <SpriteSelectorItemComponent
+                componentRef={this.setRef}
                 costumeURL={this.getCostumeData()}
                 onClick={this.handleClick}
                 onDeleteButtonClick={onDeleteButtonClick ? this.handleDelete : null}
diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx
index d091c9587..94d1d6c00 100644
--- a/src/containers/stage-selector.jsx
+++ b/src/containers/stage-selector.jsx
@@ -15,6 +15,7 @@ import ThrottledPropertyHOC from '../lib/throttled-property-hoc.jsx';
 import {emptyCostume} from '../lib/empty-assets';
 import sharedMessages from '../lib/shared-messages';
 import {fetchCode} from '../lib/backpack-api';
+import {getEventXY} from '../lib/touch-utils';
 
 import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
 
@@ -46,10 +47,25 @@ class StageSelector extends React.Component {
             'handleBackdropUpload',
             'handleMouseEnter',
             'handleMouseLeave',
+            'handleTouchEnd',
             'handleDrop',
-            'setFileInput'
+            'setFileInput',
+            'setRef'
         ]);
     }
+    componentDidMount () {
+        document.addEventListener('touchend', this.handleTouchEnd);
+    }
+    componentWillUnmount () {
+        document.removeEventListener('touchend', this.handleTouchEnd);
+    }
+    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();
+        }
+    }
     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 (
             <DroppableThrottledStage
+                componentRef={this.setRef}
                 fileInputRef={this.setFileInput}
                 onBackdropFileUpload={this.handleBackdropUpload}
                 onBackdropFileUploadClick={this.handleFileUploadClick}

From c424f25da16415a2a784a8d8005b8a2ac765e75f Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 21 Jun 2019 09:33:26 -0400
Subject: [PATCH 2/3] Fix proptypes

---
 src/components/sprite-selector-item/sprite-selector-item.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 4f8cca8c4..930f655fd 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -90,6 +90,7 @@ const SpriteSelectorItem = props => (
 
 SpriteSelectorItem.propTypes = {
     className: PropTypes.string,
+    componentRef: PropTypes.func,
     costumeURL: PropTypes.string,
     details: PropTypes.string,
     dragging: PropTypes.bool,

From 26e4bc2ad26d86aff08bc74c06272febf138090c Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 26 Jun 2019 10:56:54 -0400
Subject: [PATCH 3/3] Fix merge conflicts

---
 src/containers/sprite-selector-item.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index b800eafe4..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';
 
@@ -35,14 +36,12 @@ class SpriteSelectorItem extends React.PureComponent {
             onDragEnd: this.handleDragEnd
         });
     }
-    componentWillUnmount () {
-        this.dragRecognizer.reset();
-    }
     componentDidMount () {
         document.addEventListener('touchend', this.handleTouchEnd);
     }
     componentWillUnmount () {
         document.removeEventListener('touchend', this.handleTouchEnd);
+        this.dragRecognizer.reset();
     }
     getCostumeData () {
         if (this.props.costumeURL) return this.props.costumeURL;