fix editLabware drag and drop

Opentrons · Feb 14, 2024 · 7e4ca7e · 7e4ca7e
1 parent c737b0f
commit 7e4ca7e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 35 deletions.
diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx
@@ -20,8 +20,8 @@ import styles from './LabwareOverlays.css'
 
 interface Props {
   labwareOnDeck: LabwareOnDeck
-  setHoveredLabware: (val?: LabwareOnDeck | null) => unknown
-  setDraggedLabware: (val?: LabwareOnDeck | null) => unknown
+  setHoveredLabware: (val?: LabwareOnDeck | null) => void
+  setDraggedLabware: (val?: LabwareOnDeck | null) => void
   swapBlocked: boolean
 }
 
@@ -38,6 +38,7 @@ export const EditLabware = (props: Props): JSX.Element | null => {
   const savedLabware = useSelector(labwareIngredSelectors.getSavedLabware)
   const dispatch = useDispatch<ThunkDispatch<any>>()
   const { t } = useTranslation('deck')
+  const ref = React.useRef(null)
 
   const { isTiprack } = labwareOnDeck.def.parameters
   const hasName = savedLabware[labwareOnDeck.id]
@@ -62,26 +63,21 @@ export const EditLabware = (props: Props): JSX.Element | null => {
 
   const [{ draggedLabware, isOver }, drop] = useDrop(() => ({
     accept: DND_TYPES.LABWARE,
-    canDrop: (item: any) => {
-      const draggedItem = item?.labwareOnDeck
-      const draggedLabware = draggedItem?.labwareOnDeck
+    canDrop: (item: DroppedItem) => {
+      const draggedLabware = item?.labwareOnDeck
       const isDifferentSlot =
         draggedLabware && draggedLabware.slot !== labwareOnDeck.slot
       return isDifferentSlot && !swapBlocked
     },
-    drop: (item: any) => {
-      const draggedItem = item?.labwareOnDeck
-      if (draggedItem) {
-        dispatch(
-          moveDeckItem(draggedItem.labwareOnDeck.slot, labwareOnDeck.slot)
-        )
+    drop: (item: DroppedItem) => {
+      const draggedLabware = item?.labwareOnDeck
+      if (draggedLabware) {
+        dispatch(moveDeckItem(draggedLabware.slot, labwareOnDeck.slot))
       }
     },
 
-    hover: (monitor: DropTargetMonitor) => {
-      if (monitor.canDrop()) {
-        setHoveredLabware(labwareOnDeck)
-      }
+    hover: () => {
+      setHoveredLabware(labwareOnDeck)
     },
     collect: (monitor: DropTargetMonitor) => ({
       isOver: monitor.isOver(),
@@ -151,17 +147,18 @@ export const EditLabware = (props: Props): JSX.Element | null => {
       )
     }
 
-    const dragResult = drag(
-      <div ref={drop}>
-        <div
-          className={cx(styles.slot_overlay, {
-            [styles.appear_on_mouseover]: !isBeingDragged && !isYetUnnamed,
-            [styles.appear]: isOver,
-            [styles.disabled]: isBeingDragged,
-          })}
-        >
-          {contents}
-        </div>
+    drag(drop(ref))
+
+    const dragResult = (
+      <div
+        ref={ref}
+        className={cx(styles.slot_overlay, {
+          [styles.appear_on_mouseover]: !isBeingDragged && !isYetUnnamed,
+          [styles.appear]: isOver,
+          [styles.disabled]: isBeingDragged,
+        })}
+      >
+        {contents}
       </div>
     )
 

diff --git a/protocol-designer/src/components/steplist/ContextMenu.tsx b/protocol-designer/src/components/steplist/ContextMenu.tsx
@@ -61,10 +61,6 @@ export const ContextMenu = (props: Props): JSX.Element => {
   })
 
   const makeHandleContextMenu = (stepId: StepIdType) => (event: MouseEvent) => {
-    console.log(
-      'handle context menu called before isMulti SelectMode',
-      isMultiSelectMode
-    )
     if (isMultiSelectMode) return
     event.preventDefault()
 
@@ -84,7 +80,6 @@ export const ContextMenu = (props: Props): JSX.Element => {
       screenH - clickY > rootH
         ? clickY + MENU_OFFSET_PX
         : clickY - rootH - MENU_OFFSET_PX
-    console.log('handle context menu called')
     setVisible(true)
     setStepId(stepId)
     setPosition({ left, top })

diff --git a/protocol-designer/src/components/steplist/DraggableStepItems.tsx b/protocol-designer/src/components/steplist/DraggableStepItems.tsx
@@ -92,8 +92,6 @@ export const DraggableStepItems = (
   React.useEffect(() => {
     setStepIds(orderedStepIds)
   }, [orderedStepIds])
-  console.log('orderedStepIds', orderedStepIds)
-  console.log('stepIds', stepIds)
 
   const clickDrop = (): void => {
     if (!isEqual(orderedStepIds, stepIds)) {
@@ -120,8 +118,7 @@ export const DraggableStepItems = (
     stepIds.findIndex(id => stepId === id)
 
   const currentIds = isOver ? stepIds : orderedStepIds
-  console.log('isover', isOver)
-  console.log('currentIds', currentIds)
+
   return (
     <>
       <ContextMenu>