Sharing costumes and sounds to other sprites and the stage

src/components/asset-panel/selector.jsx

@@ -13,6 +13,7 @@ import styles from './selector.css';
 const Selector = props => {
     const {
         buttons,
+        containerRef,
         dragType,
         items,
         selectedItemIndex,
@@ -46,7 +47,10 @@ const Selector = props => {
     }
 
     return (
-        <Box className={styles.wrapper}>
+        <Box
+            className={styles.wrapper}
+            componentRef={containerRef}
+        >
             <Box className={styles.listArea}>
                 {items.map((item, index) => (
                     <SortableAsset
@@ -87,6 +91,7 @@ Selector.propTypes = {
         img: PropTypes.string.isRequired,
         onClick: PropTypes.func
     })),
+    containerRef: PropTypes.func,
     dragType: PropTypes.oneOf(Object.keys(DragConstants)),
     draggingIndex: PropTypes.number,
     draggingType: PropTypes.oneOf(Object.keys(DragConstants)),

src/components/sprite-selector-item/sprite-selector-item.css

@@ -21,6 +21,7 @@
     transition: 0.25s ease-out;
 
     user-select: none;
+    touch-action: none;
 }
 
 .sprite-selector-item.is-selected {

src/components/sprite-selector/sprite-list.jsx

@@ -13,6 +13,7 @@ import styles from './sprite-selector.css';
 
 const SpriteList = function (props) {
     const {
+        containerRef,
         editingTarget,
         draggingIndex,
         draggingType,
@@ -31,7 +32,10 @@ const SpriteList = function (props) {
     const isSpriteDrag = draggingType === DragConstants.SPRITE;
 
     return (
-        <Box className={styles.itemsWrapper}>
+        <Box
+            className={styles.itemsWrapper}
+            componentRef={containerRef}
+        >
             {items.map((sprite, index) => {
 
                 // If the sprite has just received a block drop, used for green highlight
@@ -42,7 +46,14 @@ const SpriteList = function (props) {
                 );
 
                 // If the sprite is indicating it can receive block dropping, used for blue highlight
-                const isRaised = !receivedBlocks && raised && sprite.id !== editingTarget;
+                let isRaised = !receivedBlocks && raised && sprite.id !== editingTarget;
+
+                // A sprite is also raised if a costume or sound is being dragged.
+                // Note the absence of the self-sharing check: a sprite can share assets with itself.
+                // This is a quirk of 2.0, but seems worth leaving possible, it
+                // allows quick (albeit unusual) duplication of assets.
+                isRaised = isRaised || draggingType === DragConstants.COSTUME ||
+                    draggingType === DragConstants.SOUND;
 
                 return (
                     <SortableAsset
@@ -77,6 +88,7 @@ const SpriteList = function (props) {
 };
 
 SpriteList.propTypes = {
+    containerRef: PropTypes.func,
     draggingIndex: PropTypes.number,
     draggingType: PropTypes.oneOf(Object.keys(DragConstants)),
     editingTarget: PropTypes.string,

src/containers/target-pane.jsx

@@ -107,14 +107,25 @@ class TargetPane extends React.Component {
             this.props.onReceivedBlocks(true);
         }
     }
-
     handleDrop (dragInfo) {
+        const {sprite: targetId} = this.props.hoveredTarget;
         if (dragInfo.dragType === DragConstants.SPRITE) {
             // Add one to both new and target index because we are not counting/moving the stage
             this.props.vm.reorderTarget(dragInfo.index + 1, dragInfo.newIndex + 1);
+        } else if (targetId) {
+            // Something is being dragged over one of the sprite tiles or the backdrop.
+            // Dropping assets like sounds and costumes duplicate the asset on the
+            // hovered target. Shared costumes also become the current costume on that target.
+            // However, dropping does not switch the editing target or activate that editor tab.
+            // This is based on 2.0 behavior, but seems like it keeps confusing switching to a minimum.
+            // it allows the user to share multiple things without switching back and forth.
+            if (dragInfo.dragType === DragConstants.COSTUME) {
+                this.props.vm.shareCostumeToTarget(dragInfo.index, targetId);
+            } else if (targetId && dragInfo.dragType === DragConstants.SOUND) {
+                this.props.vm.shareSoundToTarget(dragInfo.index, targetId);
+            }
         }
     }
-
     render () {
         const {
             onActivateTab, // eslint-disable-line no-unused-vars

src/lib/sortable-hoc.jsx

@@ -9,12 +9,15 @@ const SortableHOC = function (WrappedComponent) {
         constructor (props) {
             super(props);
             bindAll(this, [
+                'setRef',
                 'handleAddSortable',
                 'handleRemoveSortable'
             ]);
 
             this.sortableRefs = [];
             this.boxes = null;
+            this.ref = null;
+            this.containerBox = null;
         }
 
         componentWillReceiveProps (newProps) {
@@ -25,6 +28,10 @@ const SortableHOC = function (WrappedComponent) {
                     if (a.top === b.top) return a.left - b.left;
                     return a.top - b.top;
                 });
+                if (!this.ref) {
+                    throw new Error('The containerRef must be assigned to the sortable area');
+                }
+                this.containerBox = this.ref.getBoundingClientRect();
             } else if (!newProps.dragInfo.dragging && this.props.dragInfo.dragging) {
                 this.props.onDrop(Object.assign({},
                     this.props.dragInfo, {newIndex: this.getMouseOverIndex()}));
@@ -64,17 +71,25 @@ const SortableHOC = function (WrappedComponent) {
             // the dragging object. Obviously only exists if there is a drag (i.e. currentOffset).
             let mouseOverIndex = null;
             if (this.props.dragInfo.currentOffset) {
-                mouseOverIndex = indexForPositionOnList(
-                    this.props.dragInfo.currentOffset, this.boxes);
+                const {x, y} = this.props.dragInfo.currentOffset;
+                const {top, left, bottom, right} = this.containerBox;
+                if (x >= left && x <= right && y >= top && y <= bottom) {
+                    mouseOverIndex = indexForPositionOnList(
+                        this.props.dragInfo.currentOffset, this.boxes);
+                }
             }
             return mouseOverIndex;
         }
+        setRef (el) {
+            this.ref = el;
+        }
         render () {
             const {dragInfo: {index: dragIndex, dragType}, items} = this.props;
             const mouseOverIndex = this.getMouseOverIndex();
             const ordering = this.getOrdering(items, dragIndex, mouseOverIndex);
             return (
                 <WrappedComponent
+                    containerRef={this.setRef}
                     draggingIndex={dragIndex}
                     draggingType={dragType}
                     mouseOverIndex={mouseOverIndex}