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] 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}