From bbf89581c6c277a79ce99973d94caaf58279dc42 Mon Sep 17 00:00:00 2001 From: Jethary Date: Thu, 15 Feb 2024 17:56:01 -0500 Subject: [PATCH] remove dragPreview --- .../RobotCoordinateSpaceWithDOMCoords.tsx | 26 +------------ .../DeckSetup/LabwareOverlays/DragPreview.css | 5 --- .../DeckSetup/LabwareOverlays/DragPreview.tsx | 38 ------------------- .../DeckSetup/LabwareOverlays/EditLabware.tsx | 19 +--------- .../LabwareOverlays/LabwareOverlays.css | 2 +- .../DeckSetup/LabwareOverlays/index.ts | 1 - .../src/components/DeckSetup/index.tsx | 9 +---- .../steplist/DraggableStepItems.tsx | 5 --- 8 files changed, 6 insertions(+), 99 deletions(-) delete mode 100644 protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.css delete mode 100644 protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.tsx diff --git a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.tsx b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.tsx index d016a44d162..5daece60d7f 100644 --- a/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.tsx +++ b/components/src/hardware-sim/RobotCoordinateSpace/RobotCoordinateSpaceWithDOMCoords.tsx @@ -4,10 +4,6 @@ import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data' export interface RobotCoordinateSpaceWithDOMCoordsRenderProps { deckSlotsById: { [slotId: string]: DeckSlot } - getRobotCoordsFromDOMCoords: ( - domX: number, - domY: number - ) => { x: number; y: number } } interface RobotCoordinateSpaceWithDOMCoordsProps @@ -19,32 +15,12 @@ interface RobotCoordinateSpaceWithDOMCoordsProps ) => React.ReactNode } -type GetRobotCoordsFromDOMCoords = RobotCoordinateSpaceWithDOMCoordsRenderProps['getRobotCoordsFromDOMCoords'] - export function RobotCoordinateSpaceWithDOMCoords( props: RobotCoordinateSpaceWithDOMCoordsProps ): JSX.Element | null { const { children, deckDef, viewBox, ...restProps } = props const wrapperRef = React.useRef(null) - const getRobotCoordsFromDOMCoords: GetRobotCoordsFromDOMCoords = (x, y) => { - if (wrapperRef.current == null) return { x: 0, y: 0 } - - const cursorPoint = wrapperRef.current.createSVGPoint() - - cursorPoint.x = x - cursorPoint.y = y - - const screenCTM = wrapperRef.current.getScreenCTM() - if (!screenCTM) return { x, y } - - const transformedY = wrapperRef.current.clientHeight - y - - cursorPoint.y = transformedY - const transformedPoint = cursorPoint.matrixTransform(screenCTM.inverse()) - - return transformedPoint - } if (deckDef == null && viewBox == null) return null let wholeDeckViewBox @@ -66,7 +42,7 @@ export function RobotCoordinateSpaceWithDOMCoords( transform="scale(1, -1)" {...restProps} > - {children?.({ deckSlotsById, getRobotCoordsFromDOMCoords })} + {children?.({ deckSlotsById })} ) } diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.css b/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.css deleted file mode 100644 index 1634b4980ed..00000000000 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.css +++ /dev/null @@ -1,5 +0,0 @@ -@import '@opentrons/components'; - -.labware_drag_preview { - opacity: 0.5; -} diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.tsx deleted file mode 100644 index 6add5f95569..00000000000 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/DragPreview.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react' -import { useDragLayer, XYCoord } from 'react-dnd' -import { LabwareOnDeck } from '../LabwareOnDeck' -import { DND_TYPES } from '../../../constants' -import { RobotWorkSpaceRenderProps } from '@opentrons/components' -import styles from './DragPreview.css' - -interface DragPreviewProps { - getRobotCoordsFromDOMCoords: RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords'] -} - -export const DragPreview = (props: DragPreviewProps): JSX.Element | null => { - const { getRobotCoordsFromDOMCoords } = props - const { item, itemType, isDragging, currentOffset } = useDragLayer( - monitor => ({ - item: monitor.getItem(), - itemType: monitor.getItemType(), - isDragging: monitor.isDragging(), - currentOffset: monitor.getSourceClientOffset(), - }) - ) - - if (!isDragging || !currentOffset || itemType !== DND_TYPES.LABWARE) { - return null - } - - const { x, y } = currentOffset - const cursor: XYCoord = getRobotCoordsFromDOMCoords(x, -y) - - return ( - - ) -} diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx index 69635f53a40..9a0db4bab38 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/EditLabware.tsx @@ -115,23 +115,8 @@ export const EditLabware = (props: Props): JSX.Element | null => { if (swapBlocked) { contents = null - } else if (draggedLabware) { - contents = ( -
- {t( - `overlay.slot.${isBeingDragged ? 'drag_to_new_slot' : 'place_here'}` - )} -
- // - ) + } else if (draggedLabware != null) { + contents = null } else { contents = ( <> diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareOverlays.css b/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareOverlays.css index fbce92ed741..29a069ae2e9 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareOverlays.css +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareOverlays.css @@ -33,7 +33,7 @@ } .slot_overlay.disabled { - background-color: color-mod(var(--c-light-gray) alpha(0.9)); + background-color: color-mod(var(--c-light-gray) alpha(0.7)); color: var(--c-font-dark); } diff --git a/protocol-designer/src/components/DeckSetup/LabwareOverlays/index.ts b/protocol-designer/src/components/DeckSetup/LabwareOverlays/index.ts index 490ee828367..cd857edd17a 100644 --- a/protocol-designer/src/components/DeckSetup/LabwareOverlays/index.ts +++ b/protocol-designer/src/components/DeckSetup/LabwareOverlays/index.ts @@ -1,4 +1,3 @@ export { SlotControls } from './SlotControls' export { AdapterControls } from './AdapterControls' export { LabwareControls } from './LabwareControls' -export { DragPreview } from './DragPreview' diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx index 9e9a7ebdebf..8ee1ebc1bf4 100644 --- a/protocol-designer/src/components/DeckSetup/index.tsx +++ b/protocol-designer/src/components/DeckSetup/index.tsx @@ -8,7 +8,6 @@ import { FlexTrash, Module, RobotCoordinateSpaceWithDOMCoords, - RobotWorkSpaceRenderProps, SingleSlotFixture, StagingAreaFixture, StagingAreaLocation, @@ -64,7 +63,6 @@ import { AdapterControls, SlotControls, LabwareControls, - DragPreview, } from './LabwareOverlays' import { FlexModuleTag } from './FlexModuleTag' import { Ot2ModuleTag } from './Ot2ModuleTag' @@ -102,7 +100,6 @@ const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [ ] interface ContentsProps { - getRobotCoordsFromDOMCoords: RobotWorkSpaceRenderProps['getRobotCoordsFromDOMCoords'] activeDeckSetup: InitialDeckSetup selectedTerminalItemId?: TerminalItemId | null showGen1MultichannelCollisionWarnings: boolean @@ -118,7 +115,6 @@ const darkFill = COLORS.grey60 export const DeckSetupContents = (props: ContentsProps): JSX.Element => { const { activeDeckSetup, - getRobotCoordsFromDOMCoords, showGen1MultichannelCollisionWarnings, deckDef, robotType, @@ -482,7 +478,6 @@ export const DeckSetupContents = (props: ContentsProps): JSX.Element => { ) })} - ) } @@ -567,7 +562,7 @@ export const DeckSetup = (): JSX.Element => { : deckDef.cornerOffsetFromOrigin[1] } ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`} > - {({ getRobotCoordsFromDOMCoords }) => ( + {() => ( <> {robotType === OT2_ROBOT_TYPE ? ( { )} {...{ deckDef, - getRobotCoordsFromDOMCoords, + showGen1MultichannelCollisionWarnings, }} /> diff --git a/protocol-designer/src/components/steplist/DraggableStepItems.tsx b/protocol-designer/src/components/steplist/DraggableStepItems.tsx index 2836ab01d90..c34ff040fdf 100644 --- a/protocol-designer/src/components/steplist/DraggableStepItems.tsx +++ b/protocol-designer/src/components/steplist/DraggableStepItems.tsx @@ -24,7 +24,6 @@ import styles from './StepItem.css' interface DragDropStepItemProps extends ConnectedStepItemProps { stepId: StepIdType - findStepIndex: (stepIdType: StepIdType) => number clickDrop: () => void moveStep: (dragIndex: number, value: number) => void setIsOver: React.Dispatch> @@ -141,9 +140,6 @@ export const DraggableStepItems = ( [] ) - const findStepIndex = (stepId: StepIdType): number => - stepIds.findIndex(id => stepId === id) - const currentIds = isOver ? stepIds : orderedStepIds return ( @@ -158,7 +154,6 @@ export const DraggableStepItems = ( // @ts-expect-error onStepContextMenu={makeStepOnContextMenu(stepId)} moveStep={moveStep} - findStepIndex={findStepIndex} clickDrop={clickDrop} setIsOver={setIsOver} index={index}