Bugfix/bugs 284/marty blocks appearing with backdrop drops

src/components/asset-panel/selector.jsx

@@ -9,12 +9,14 @@ import SortableHOC from '../../lib/sortable-hoc.jsx';
 import DragConstants from '../../lib/drag-constants';
 
 import styles from './selector.css';
+import target_types_enum from '../../lib/target_types_enum.js';
 
 const Selector = props => {
     const {
         buttons,
         containerRef,
         dragType,
+        targetType,
         isRtl,
         items,
         selectedItemIndex,
@@ -48,7 +50,6 @@ const Selector = props => {
             </Box>
         );
     }
-
     return (
         <Box
             className={styles.wrapper}
@@ -72,6 +73,7 @@ const Selector = props => {
                             details={item.details}
                             dragPayload={item.dragPayload}
                             dragType={dragType}
+                            targetType={targetType}
                             id={index}
                             index={index}
                             name={item.name}
@@ -98,6 +100,7 @@ Selector.propTypes = {
     })),
     containerRef: PropTypes.func,
     dragType: PropTypes.oneOf(Object.keys(DragConstants)),
+    targetType: PropTypes.oneOf(Object.keys(target_types_enum)),
     draggingIndex: PropTypes.number,
     draggingType: PropTypes.oneOf(Object.keys(DragConstants)),
     isRtl: PropTypes.bool,

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

@@ -0,0 +1,123 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+/* @todo: refactor this class name, and component: `sprite-selector` to `sprite` */
+.sprite-selector-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    position: relative;
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 0.8rem;
+    color: $text-primary;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $ui-black-transparent;
+    border-radius: $space;
+
+    text-align: center;
+    cursor: pointer;
+
+    user-select: none;
+}
+
+.sprite-selector-item.is-selected {
+    box-shadow: 0px 0px 0px 4px $motion-transparent;
+    border: 2px solid $motion-primary;
+    background: $ui-white;
+}
+
+.sprite-selector-item:hover {
+    border: 2px solid $motion-primary;
+    background: $ui-white;
+}
+
+.sprite-selector-item:hover .sprite-image, .is-selected .sprite-image {
+    filter: drop-shadow(0px 0px 2px  $ui-black-transparent);
+}
+
+/* Outer/Inner chicanery is to prevent layouts when sprite image changes */
+.sprite-image-outer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform: translateZ(0);
+}
+
+.sprite-image-inner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sprite-image {
+    user-select: none;
+    pointer-events: none;
+    max-width: 32px;
+    max-height: 32px;
+}
+
+.sprite-info {
+    padding: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+
+    font-size: 0.625rem;
+    color: $text-primary;
+    user-select: none;
+}
+
+.sprite-name, .sprite-details {
+    /*
+        For truncating overflowing text gracefully
+        Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
+    */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.sprite-details {
+    margin-top: 0.125rem;
+    font-size: 0.5rem;
+}
+
+.is-selected .sprite-info {
+    background: $motion-primary;
+    color: $ui-white;
+}
+
+.delete-button {
+    position: absolute;
+    top: -.625rem;
+    z-index: auto;
+}
+
+[dir="ltr"] .delete-button {
+    right: -.625rem;
+}
+
+[dir="rtl"] .delete-button {
+    left: -.625rem;
+}
+
+.number {
+    position: absolute;
+    top: 0.15rem;
+    font-size: 0.625rem;
+    font-weight: bold;
+    z-index: 2;
+}
+
+[dir="ltr"] .number {
+    left: 0.15rem;
+}
+
+[dir="rtl"] .number {
+    right: 0.15rem;
+}

src/components/robot-selector-item/robot-selector-item.jsx

@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+
+import styles from "./robot-selector-item.css";
+import { ContextMenuTrigger } from "react-contextmenu";
+
+// react-contextmenu requires unique id to match trigger and context menu
+let contextMenuId = 0;
+
+const SpriteSelectorItem = (props) => {
+  return (
+    <ContextMenuTrigger
+      attributes={{
+        className: classNames(props.className, styles.spriteSelectorItem, {
+          [styles.isSelected]: props.selected,
+        }),
+        onClick: props.onClick,
+        onMouseEnter: props.onMouseEnter,
+        onMouseLeave: props.onMouseLeave,
+        onMouseDown: props.onMouseDown,
+        onTouchStart: props.onMouseDown,
+      }}
+      disable={props.preventContextMenu}
+      id={`${props.name}-${contextMenuId}`}
+      ref={props.componentRef}
+    >
+      {typeof props.number === "undefined" ? null : (
+        <div className={styles.number}>{props.number}</div>
+      )}
+      {props.costumeURL ? (
+        <div className={styles.spriteImageOuter}>
+          <div className={styles.spriteImageInner}>
+            <img
+              className={styles.spriteImage}
+              draggable={false}
+              src={props.costumeURL}
+            />
+          </div>
+        </div>
+      ) : null}
+      <div className={styles.spriteInfo}>
+        <div className={styles.spriteName}>{props.name}</div>
+        {props.details ? (
+          <div className={styles.spriteDetails}>{props.details}</div>
+        ) : null}
+      </div>
+    </ContextMenuTrigger>
+  );
+};
+
+SpriteSelectorItem.propTypes = {
+  className: PropTypes.string,
+  componentRef: PropTypes.func,
+  costumeURL: PropTypes.string,
+  details: PropTypes.string,
+  name: PropTypes.string,
+  number: PropTypes.number,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  preventContextMenu: PropTypes.bool,
+  selected: PropTypes.bool.isRequired,
+};
+
+export default SpriteSelectorItem;