@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx

@@ -0,0 +1,287 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { animated, easings, useSpring } from '@react-spring/web'
+import styled from 'styled-components'
+
+import {
+  getDeckDefFromRobotType,
+  getModuleDef2,
+  getPositionFromSlotId,
+} from '@opentrons/shared-data'
+
+import { COLORS } from '../../helix-design-system'
+import { BaseDeck } from '../BaseDeck'
+import { LabwareRender } from '../Labware'
+import { IDENTITY_AFFINE_TRANSFORM, multiplyMatrices } from '../utils'
+
+import type { ReactNode } from 'react'
+import type {
+  DeckConfiguration,
+  DeckDefinition,
+  LabwareDefinition2,
+  LabwareLocation,
+  LoadedLabware,
+  LoadedModule,
+  RobotType,
+  Vector3D,
+} from '@opentrons/shared-data'
+import type { StyleProps } from '../../primitives'
+
+const getModulePosition = (
+  deckDef: DeckDefinition,
+  moduleId: string,
+  loadedModules: LoadedModule[]
+): Vector3D | null => {
+  const loadedModule = loadedModules.find(m => m.id === moduleId)
+  if (loadedModule == null) return null
+  const modSlot = deckDef.locations.addressableAreas.find(
+    s => s.id === loadedModule.location.slotName
+  )
+  if (modSlot == null) return null
+
+  const modPosition = getPositionFromSlotId(modSlot.id, deckDef)
+  if (modPosition == null) return null
+  const [modX, modY] = modPosition
+
+  const deckSpecificAffineTransform =
+    getModuleDef2(loadedModule.model).slotTransforms?.[deckDef.otId]?.[
+      modSlot.id
+    ]?.labwareOffset ?? IDENTITY_AFFINE_TRANSFORM
+  const [[labwareX], [labwareY], [labwareZ]] = multiplyMatrices(
+    [[modX], [modY], [1], [1]],
+    deckSpecificAffineTransform
+  )
+  return { x: labwareX, y: labwareY, z: labwareZ }
+}
+
+function getLabwareCoordinates({
+  deckDef,
+  location,
+  loadedModules,
+  loadedLabware,
+}: {
+  deckDef: DeckDefinition
+  location: LabwareLocation
+  loadedModules: LoadedModule[]
+  loadedLabware: LoadedLabware[]
+}): Vector3D | null {
+  if (location === 'offDeck' || location === 'systemLocation') {
+    return null
+  } else if ('labwareId' in location) {
+    const loadedAdapter = loadedLabware.find(l => l.id === location.labwareId)
+    if (loadedAdapter == null) return null
+    const loadedAdapterLocation = loadedAdapter.location
+
+    if (
+      loadedAdapterLocation === 'offDeck' ||
+      loadedAdapterLocation === 'systemLocation' ||
+      'labwareId' in loadedAdapterLocation
+    )
+      return null
+    //  adapter on module
+    if ('moduleId' in loadedAdapterLocation) {
+      return getModulePosition(
+        deckDef,
+        loadedAdapterLocation.moduleId,
+        loadedModules
+      )
+    }
+
+    //  adapter on deck
+    const loadedAdapterSlotPosition = getPositionFromSlotId(
+      'slotName' in loadedAdapterLocation
+        ? loadedAdapterLocation.slotName
+        : loadedAdapterLocation.addressableAreaName,
+      deckDef
+    )
+    return loadedAdapterSlotPosition != null
+      ? {
+          x: loadedAdapterSlotPosition[0],
+          y: loadedAdapterSlotPosition[1],
+          z: loadedAdapterSlotPosition[2],
+        }
+      : null
+  } else if ('addressableAreaName' in location) {
+    const slotCoordinateTuple = getPositionFromSlotId(
+      location.addressableAreaName,
+      deckDef
+    )
+    return slotCoordinateTuple != null
+      ? {
+          x: slotCoordinateTuple[0],
+          y: slotCoordinateTuple[1],
+          z: slotCoordinateTuple[2],
+        }
+      : null
+  } else if ('slotName' in location) {
+    const slotCoordinateTuple = getPositionFromSlotId(
+      location.slotName,
+      deckDef
+    )
+    return slotCoordinateTuple != null
+      ? {
+          x: slotCoordinateTuple[0],
+          y: slotCoordinateTuple[1],
+          z: slotCoordinateTuple[2],
+        }
+      : null
+  } else {
+    return getModulePosition(deckDef, location.moduleId, loadedModules)
+  }
+}
+
+const SPLASH_Y_BUFFER_MM = 10
+
+interface MoveLabwareOnDeckProps extends StyleProps {
+  robotType: RobotType
+  movedLabwareDef: LabwareDefinition2
+  initialLabwareLocation: LabwareLocation
+  finalLabwareLocation: LabwareLocation
+  loadedModules: LoadedModule[]
+  loadedLabware: LoadedLabware[]
+  deckConfig: DeckConfiguration
+  backgroundItems?: ReactNode
+  deckFill?: string
+}
+export function MoveLabwareOnDeck(
+  props: MoveLabwareOnDeckProps
+): JSX.Element | null {
+  const {
+    robotType,
+    movedLabwareDef,
+    loadedLabware,
+    initialLabwareLocation,
+    finalLabwareLocation,
+    loadedModules,
+    deckConfig,
+    backgroundItems = null,
+    ...styleProps
+  } = props
+  const deckDef = useMemo(() => getDeckDefFromRobotType(robotType), [robotType])
+
+  const initialSlotId =
+    initialLabwareLocation === 'offDeck' ||
+    initialLabwareLocation === 'systemLocation' ||
+    !('slotName' in initialLabwareLocation)
+      ? deckDef.locations.addressableAreas[1].id
+      : initialLabwareLocation.slotName
+
+  const slotPosition = getPositionFromSlotId(initialSlotId, deckDef) ?? [
+    0,
+    0,
+    0,
+  ]
+
+  const offDeckPosition = {
+    x: slotPosition[0],
+    y:
+      deckDef.cornerOffsetFromOrigin[1] -
+      movedLabwareDef.dimensions.xDimension -
+      SPLASH_Y_BUFFER_MM,
+  }
+  const initialPosition =
+    getLabwareCoordinates({
+      deckDef,
+      location: initialLabwareLocation,
+      loadedModules,
+      loadedLabware,
+    }) ?? offDeckPosition
+  const finalPosition =
+    getLabwareCoordinates({
+      deckDef,
+      location: finalLabwareLocation,
+      loadedModules,
+      loadedLabware,
+    }) ?? offDeckPosition
+
+  const shouldReset = usePositionChangeReset(initialPosition, finalPosition)
+
+  const springProps = useSpring({
+    reset: shouldReset,
+    config: { duration: 1000, easing: easings.easeInOutSine },
+    from: {
+      ...initialPosition,
+      splashOpacity: 0,
+      deckOpacity: 0,
+    },
+    to: [
+      { deckOpacity: 1 },
+      { splashOpacity: 1 },
+      { splashOpacity: 0 },
+      { ...finalPosition },
+      { splashOpacity: 1 },
+      { splashOpacity: 0 },
+      { deckOpacity: 0 },
+    ],
+    loop: true,
+  })
+
+  if (deckDef == null) {
+    return null
+  }
+
+  return (
+    <BaseDeck
+      deckConfig={deckConfig}
+      robotType={robotType}
+      svgProps={{
+        style: { opacity: springProps.deckOpacity },
+        ...styleProps,
+      }}
+      animatedSVG
+    >
+      {backgroundItems}
+      <AnimatedG style={{ x: springProps.x, y: springProps.y }}>
+        <g
+          transform={`translate(${movedLabwareDef.cornerOffsetFromSlot.x}, ${movedLabwareDef.cornerOffsetFromSlot.y})`}
+        >
+          <LabwareRender definition={movedLabwareDef} highlight={true} />
+          <AnimatedG style={{ opacity: springProps.splashOpacity }}>
+            <path
+              d="M158.027 111.537L154.651 108.186M145.875 113L145.875 109.253M161 99.3038L156.864 99.3038M11.9733 10.461L15.3495 13.8128M24.1255 9L24.1254 12.747M9 22.6962L13.1357 22.6962"
+              stroke={COLORS.blue50}
+              strokeWidth="3.57"
+              strokeLinecap="round"
+              transform="scale(.97, -1) translate(-19, -104)"
+            />
+          </AnimatedG>
+        </g>
+      </AnimatedG>
+    </BaseDeck>
+  )
+}
+
+function usePositionChangeReset(
+  initialPosition: { x: number; y: number },
+  finalPosition: { x: number; y: number }
+): boolean {
+  const [shouldReset, setShouldReset] = useState(false)
+
+  useLayoutEffect(() => {
+    if (shouldReset) {
+      setShouldReset(false)
+      return
+    }
+
+    const isNewPosition =
+      previousInitialRef.current?.x !== initialPosition.x ||
+      previousInitialRef.current?.y !== initialPosition.y ||
+      previousFinalRef.current?.x !== finalPosition.x ||
+      previousFinalRef.current?.y !== finalPosition.y
+
+    if (isNewPosition) {
+      setShouldReset(true)
+    }
+
+    previousInitialRef.current = initialPosition
+    previousFinalRef.current = finalPosition
+  }, [initialPosition, finalPosition])
+
+  const previousInitialRef = useRef(initialPosition)
+  const previousFinalRef = useRef(finalPosition)
+
+  return shouldReset
+}
+/**
+ * These animated components needs to be split out because react-spring and styled-components don't play nice
+ * @see https://github.com/pmndrs/react-spring/issues/1515 */
+const AnimatedG = styled(animated.g as any)``

package/src/hardware-sim/Deck/OT2Layers.tsx

@@ -0,0 +1,160 @@
+import { COLORS } from '../../helix-design-system'
+
+export function FixedBase(): JSX.Element {
+  return (
+    <g id="fixedBase">
+      <path
+        d="M506.326,494.546h-619.653V-65.506h68.503V397c0,2.935,2.388,5.324,5.324,5.324H260c2.935,0,5.324-2.388,5.324-5.324V284.5c0-6.99,5.687-12.676,12.677-12.676h154.5c2.936,0,5.324-2.388,5.324-5.324V-65.506h68.503V494.546z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+interface FixedTrashProps {
+  highlight?: boolean
+}
+export function FixedTrash(props: FixedTrashProps): JSX.Element {
+  const { highlight = false } = props
+  return (
+    <g id="fixedTrash">
+      <path
+        d="M441.107,289.57v135.86c0,8.368-6.808,15.176-15.176,15.176H283.07c-8.368,0-15.176-6.808-15.176-15.176V289.57c0-8.368,6.808-15.177,15.176-15.177h142.86C434.298,274.394,441.107,281.202,441.107,289.57z M425.053,434H283.947c-1.24,0-2.484-0.034-3.702-0.287c-2-0.416-3.81-1.446-4.884-3.227c-1.152-1.91-1.289-4.185-1.289-6.359v-88.629c0-2.683,0.259-5.609,2.263-7.612c2.004-2.003,4.928-2.263,7.612-2.263h25.939c1.693,0.006,3.545-0.167,4.807-1.429c1.262-1.262,1.435-3.115,1.429-4.807v-28.94c0-2.124,0.129-4.338,1.209-6.225c1.059-1.851,2.904-2.933,4.954-3.36c1.222-0.255,2.468-0.289,3.712-0.289h99.056c2.124,0,4.339,0.129,6.226,1.209c1.851,1.06,2.933,2.904,3.36,4.954c0.255,1.222,0.289,2.468,0.289,3.712v133.68c0,2.684-0.259,5.607-2.263,7.611C430.661,433.741,427.737,434,425.053,434z"
+        style={{
+          fill: highlight ? 'none' : 'rgb(237, 237, 237)',
+          stroke: highlight ? COLORS.blue50 : 'none',
+          fillRule: 'evenodd',
+          strokeWidth: 2,
+        }}
+      ></path>
+    </g>
+  )
+}
+export function DoorStops(): JSX.Element {
+  return (
+    <g id="doorStops">
+      <path
+        d="M-63.6-67.68v2.35h8.06v-2.35H-63.6z M-75.45-65.33h27.95c1.381,0,2.5,1.119,2.5,2.5v15c0,1.381-1.119,2.5-2.5,2.5h-27.95c-1.381,0-2.5-1.119-2.5-2.5v-15C-77.95-64.211-76.831-65.33-75.45-65.33z M468.45-45.33H440.5c-1.381,0-2.5-1.119-2.5-2.5v-15c0-1.381,1.119-2.5,2.5-2.5h27.95c1.381,0,2.5,1.119,2.5,2.5v15C470.95-46.449,469.831-45.33,468.45-45.33z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function MetalFrame(): JSX.Element {
+  return (
+    <g id="metalFrame">
+      <path
+        d="M506.65,443.07v51.05h2v-51.05H506.65z M-113.65,494.12h-2v-51.05h2V494.12z M506.65-65.08h2v51.05h-2V-65.08z M-113.65-14.03v-51.05h-2v51.05H-113.65z M-113.15-66.08v51.55h3v-12.5h5c0.803,0,1.588-0.242,2.252-0.694l23.2-15.8c1.094-0.745,1.748-1.983,1.748-3.306v-19.25h12.5v-2h-50.2v2H-113.15z M-113.15,495.12h-2.5v2h50.2v-2h-12.5v-19.25c0-1.323-0.654-2.561-1.748-3.306l-23.2-15.8c-0.664-0.452-1.449-0.694-2.252-0.694h-5v-12.5h-3V495.12z M506.15,495.12v-51.55h-3v12.5h-5c-0.803,0-1.588,0.242-2.252,0.694l-23.2,15.8c-1.094,0.745-1.748,1.983-1.748,3.306v19.25h-12.5v2h50.2v-2H506.15z M506.15-14.53v-51.55h2.5v-2h-50.2v2h12.5v19.25c0,1.323,0.654,2.561,1.748,3.306l23.2,15.8c0.664,0.452,1.449,0.694,2.252,0.694h5v12.5H506.15z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function RemovableDeckOutline(): JSX.Element {
+  return (
+    <g id="removableDeckOutline">
+      <path
+        d="M-44.5-60.33c0-2.761,2.239-5,5-5h472c2.761,0,5,2.239,5,5V266.5c0,2.761-2.239,5-5,5H278c-7.18,0-13,5.82-13,13v0l0,112.5c0,2.761-2.239,5-5,5H-39.5c-2.761,0-5-2.239-5-5L-44.5-60.33z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(237, 237, 237)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+
+export function SlotRidges(): JSX.Element {
+  return (
+    <g id="slotRidges">
+      <path
+        d="M265,278.75h-4.5v71.5h4.5V278.75z M120.75,357.5H7.25v4.5h113.5V357.5z M7.25,271.5h113.5V267H7.25V271.5z M-4.5,350.25H0l0-71.5h-4.5V350.25 M139.75,357.5h113.5v4.5h-113.5V357.5z M132.5,350.25v-71.5H128v71.5H132.5z M253.25,267h-113.5v4.5h113.5V267z M385.75,267h-113.5v4.5h113.5V267z M120.75,176.5H7.25v4.5h113.5V176.5z M0,188.25l0,71.5h-4.5v-71.5H0z M0,97.75l0,71.5h-4.5v-71.5H0z M393,188.25v71.5h4.5v-71.5H393z M260.5,188.25v71.5h4.5v-71.5H260.5z M385.75,176.5h-113.5v4.5h113.5V176.5z M128,188.25v71.5h4.5v-71.5H128z M393,97.75v71.5h4.5v-71.5H393z M253.25,176.5h-113.5v4.5h113.5V176.5z M260.5,97.75v71.5h4.5v-71.5H260.5z M128,97.75v71.5h4.5v-71.5H128z M385.75,86h-113.5v4.5h113.5V86z M393,7.25v71.5h4.5V7.25H393z M385.75,0l-113.5,0v-4.5h113.5V0z M253.25,86h-113.5v4.5h113.5V86z M260.5,7.25v71.5h4.5V7.25H260.5z M253.25,0l-113.5,0v-4.5h113.5V0z M120.75,0L7.25,0v-4.5h113.5V0z M120.75,86H7.25v4.5h113.5V86z M128,7.25v71.5h4.5V7.25H128z M0,7.25l0,71.5h-4.5V7.25H0z"
+        style={{
+          fill: 'rgb(237, 237, 237)',
+          stroke: 'none',
+          fillRule: 'evenodd',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function SlotNumbers(): JSX.Element {
+  return (
+    <g id="slotNumbers">
+      <path
+        d="M327.879,29.245c7.276,0,12.41,1.696,12.41,9.687c0,5.216-2.252,7.894-7.698,8.111c-0.157,0.006-0.301,0.085-0.391,0.214c-0.158,0.227-0.102,0.538,0.125,0.696c3.058,2.129,5.114,3.655,6.89,5.262c0.314,0.284,0.494,0.688,0.494,1.112v4.22c0,0.828-0.672,1.5-1.5,1.5h-16.687c-0.828,0-1.5-0.672-1.5-1.5v-3.428c0-0.828,0.672-1.5,1.5-1.5h7.347c0.137,0,0.268-0.057,0.362-0.156c0.19-0.2,0.181-0.517-0.019-0.707c-0.953-0.901-3.261-2.616-6.8-5.055c-0.406-0.28-0.649-0.742-0.649-1.235v-2.418c0-0.828,0.672-1.5,1.5-1.5h0.732c6.116,0,7.902-0.58,7.902-3.125c0-3.169-1.652-3.616-5.268-3.616c-1.169,0-3.183,0.141-4.79,0.355c-0.026,0.003-0.051,0.006-0.077,0.008c-0.826,0.067-1.549-0.548-1.616-1.374l-0.267-3.31c-0.062-0.773,0.474-1.465,1.238-1.598C323.4,29.49,325.902,29.245,327.879,29.245z M219.767,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.195c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.901c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.267C219.095,309.343,219.767,308.672,219.767,307.843z M83.865,304.076c-1.964-1.384-3.527-1.83-7.009-1.83c-3.437,0-4.955,0.447-6.919,1.83c-3.08,2.187-4.152,9.107-4.152,13.794c0,4.731,1.072,11.606,4.152,13.793c1.964,1.384,3.482,1.831,6.919,1.831c3.482,0,5.045-0.447,7.009-1.831c3.08-2.187,4.107-9.062,4.107-13.793C87.972,313.182,86.945,306.263,83.865,304.076z M72.548,125.549v-3.357c0-0.828-0.672-1.5-1.5-1.5h-4.41c-0.828,0-1.5,0.672-1.5,1.5v3.357c0,0.276-0.224,0.5-0.5,0.5H54.094c-0.828,0-1.5,0.672-1.5,1.5v4.129c0,1.218,0.223,2.427,0.657,3.565l5.662,14.84c0.222,0.581,0.78,0.965,1.402,0.965h4.335c0.828,0,1.5-0.671,1.5-1.5c0-0.199-0.04-0.396-0.116-0.58c-3.975-9.491-5.932-14.562-6.181-15.9c-0.051-0.271,0.128-0.533,0.4-0.583c0.03-0.006,0.061-0.008,0.091-0.008h4.294c0.276,0,0.5,0.224,0.5,0.5v6.482c0,0.828,0.672,1.5,1.5,1.5h4.41c0.828,0,1.5-0.672,1.5-1.5v-6.482c0-0.276,0.224-0.5,0.5-0.5h0.991c0.828,0,1.5-0.672,1.5-1.5v-3.428c0-0.828-0.672-1.5-1.5-1.5h-0.991C72.772,126.049,72.548,125.825,72.548,125.549z M61.008,307.843v-3.651c0-0.828-0.672-1.5-1.5-1.5H43.312c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.183-1.611,0.323-1.795,1.131c-0.025,0.109-0.037,0.22-0.037,0.331v3.568c0,0.706,0.492,1.316,1.181,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704c0-0.276,0.224-0.5,0.5-0.5h3.268C60.337,309.343,61.008,308.672,61.008,307.843z M74.017,235.738c-2.57-6.341-5.287-9.609-7.183-15.297c-0.915-2.705-1.156-4.772-1.198-7.275c-0.014-0.819-0.681-1.475-1.5-1.475h-5.534c-0.828,0-1.5,0.672-1.5,1.5l0,0v0.196c0,10.461,7.661,17.867,8.146,21.122c0.041,0.273-0.148,0.528-0.421,0.568c-0.025,0.004-0.049,0.005-0.074,0.005h-9.454c-0.828,0-1.5,0.672-1.5,1.5v3.964c0,0.828,0.672,1.5,1.5,1.5H72.7c0.828,0,1.5-0.672,1.5-1.5v-3.871C74.2,236.355,74.138,236.036,74.017,235.738z M56.192,29.692c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.16c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.038,0-0.075-0.004-0.111-0.012l-4.163-0.946c-0.808-0.184-1.612,0.322-1.796,1.13c-0.025,0.109-0.037,0.221-0.037,0.333v3.567c0,0.706,0.492,1.316,1.182,1.466l5.306,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v0V36.843c0-0.276,0.224-0.5,0.5-0.5h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5H56.192z M341.048,130.379c0-8.571-4.152-10.133-10.848-10.133c-7.812,0-11.205,2.054-11.205,10c0,6.72,1.021,11.132,8.721,20.269c0.285,0.338,0.705,0.533,1.147,0.533h5.726c0.828,0,1.5-0.672,1.5-1.5c0-0.346-0.119-0.681-0.338-0.948c-1.522-1.866-3.89-4.796-5.903-8.096c-0.144-0.236-0.069-0.543,0.166-0.687c0.078-0.048,0.168-0.073,0.26-0.073c0.025,0,0.05,0.002,0.075,0.006c0.891,0.134,1.625,0.317,2.798,0.317C339.396,140.066,341.048,137.075,341.048,130.379 M196.977,211.245c-6.562,0-11.339,1.562-11.339,8.08c0,3.832,1,6.143,4.714,7.79c0.252,0.112,0.366,0.407,0.254,0.66c-0.049,0.111-0.137,0.2-0.246,0.251c-2.893,1.345-3.963,3.473-3.963,7.013c0,5.803,4.107,7.455,10.58,7.455s10.58-1.652,10.58-7.455c0-3.5-1.1-5.505-4.084-6.844c-0.252-0.113-0.365-0.409-0.251-0.661c0.049-0.108,0.134-0.196,0.242-0.247c3.968-1.884,4.808-4.157,4.808-7.961C208.271,212.808,203.54,211.245,196.977,211.245z M191.04,133.772h-1.958c-0.828,0-1.5,0.672-1.5,1.5c0,0.017,0,0.034,0.001,0.051l0.481,14.276c0.027,0.808,0.69,1.45,1.499,1.45h15.244c0.828,0,1.5-0.672,1.5-1.5l0,0v-3.428c0-0.828-0.672-1.5-1.5-1.5h-8.632c-0.266,0-0.485-0.208-0.499-0.474l-0.208-3.956c-0.015-0.276,0.197-0.511,0.473-0.526c0.008,0,0.016-0.001,0.024-0.001c7.602-0.031,11.1-1.59,11.1-8.571c0-9.151-5.268-10.848-12.767-10.848c-2.045,0-4.508,0.239-6.314,0.546c-0.764,0.13-1.304,0.821-1.244,1.594l0.264,3.437c0.063,0.826,0.785,1.444,1.611,1.381c0.037-0.003,0.073-0.007,0.11-0.013c1.531-0.232,3.543-0.338,4.815-0.338c3.661,0,5.089,0.625,5.089,3.437C198.629,133.325,197.468,133.772,191.04,133.772z M188.299,29.692h17.713h0c0.828,0,1.5,0.672,1.5,1.5v3.651v0c0,0.828-0.672,1.5-1.5,1.5H195.96c-0.276,0-0.5,0.224-0.5,0.5v0.08c0,1.295,1.428,2.545,4.821,5.313l2.901,2.366c3.482,2.812,4.152,4.419,4.152,8.303c0,6.384-3.482,7.589-9.91,7.589c-2.799,0-6.477-0.305-8.442-0.767c-0.708-0.166-1.194-0.816-1.155-1.542l0.201-3.677c0.044-0.795,0.701-1.418,1.498-1.418c0.088,0,0.176,0.008,0.262,0.023c1.687,0.3,4.047,0.595,5.225,0.595c2.544,0,3.75-0.178,3.75-2.187c0.044-1.652-1.116-2.812-4.062-5.223l-2.723-2.187c-5-4.063-5.178-6.072-5.178-10.312v-2.607C186.799,30.364,187.471,29.692,188.299,29.692z M189.24,309.343h3.268c0.828,0,1.5-0.672,1.5-1.5v-3.651c0-0.828-0.672-1.5-1.5-1.5h-16.196c-0.828,0-1.5,0.672-1.5,1.5v3.651c0,0.828,0.672,1.5,1.5,1.5h4.161c0.276,0,0.5,0.224,0.5,0.5v15.853c0,0.276-0.223,0.5-0.5,0.5c-0.037,0-0.075-0.004-0.111-0.012l-4.164-0.946c-0.808-0.184-1.612,0.322-1.795,1.13c-0.025,0.109-0.037,0.22-0.037,0.332v3.568c0,0.706,0.492,1.316,1.181,1.466l5.305,1.154c0.489,0.106,0.987,0.159,1.487,0.159h4.9c0.828,0,1.5-0.672,1.5-1.5v-21.704C188.74,309.567,188.964,309.343,189.24,309.343 M332.282,212.225c7.701,9.137,8.721,13.55,8.721,20.269c0,7.946-3.392,10-11.249,10c-6.652,0-10.803-1.563-10.803-10.134c0-6.696,1.607-9.687,7.901-9.687c1.173,0,1.906,0.183,2.797,0.317c0.118,0.018,0.238-0.007,0.339-0.069c0.235-0.146,0.307-0.454,0.161-0.688c-1.965-3.17-4.225-6.18-5.782-8.094c-0.218-0.267-0.336-0.602-0.337-0.946c0-0.828,0.671-1.5,1.5-1.5h5.605C331.577,211.692,331.997,211.887,332.282,212.225z M329.933,134.887c-2.724,0-3.259-0.625-3.259-4.375c0-3.705,0.848-4.107,3.259-4.107c2.544,0,3.258,0.402,3.258,4.107C333.191,134.307,332.388,134.887,329.933,134.887z M196.933,224.772c-2.321,0-3.527-1.83-3.527-4.375c0-2.634,0.982-3.08,3.571-3.08c2.589,0,3.616,0.491,3.616,3.08C200.593,222.941,199.299,224.772,196.933,224.772z M197.022,236.959c-2.5,0-3.259-0.625-3.259-3.169c0-2.098,0.804-3.928,3.169-3.928c2.321,0,3.169,1.83,3.169,3.928C200.102,236.244,199.388,236.959,197.022,236.959z M74.981,309.254c0.492-0.759,0.938-0.893,1.875-0.893c1.027,0,1.518,0.134,1.92,0.893c0.759,1.205,1.205,5.401,1.205,8.616c0,3.258-0.401,7.454-1.205,8.705c-0.446,0.758-0.893,0.848-1.92,0.848c-0.937,0-1.428-0.134-1.875-0.848c-0.714-1.206-1.205-5.447-1.205-8.705C73.776,314.655,74.267,310.414,74.981,309.254z M330.066,236.289c-2.589,0-3.169-0.312-3.169-4.062c0-3.794,0.714-4.33,3.169-4.33c2.679,0,3.259,0.58,3.259,4.33C333.325,235.976,332.477,236.289,330.066,236.289z"
+        style={{
+          fill: 'rgb(204, 204, 204)',
+          stroke: 'none',
+          fillRule: 'evenodd',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function CalibrationMarkings(): JSX.Element {
+  return (
+    <g id="calibrationMarkings">
+      <path
+        d="M12.13,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5s-0.5,0.224-0.5,0.5C11.63,351.776,11.854,352,12.13,352z M11.88,348.75v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181v-1.253h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38v-1.253c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181v1.253h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067H11.88z M248.37,352c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C247.87,351.776,248.094,352,248.37,352z M248.62,348.75h1.253c0.075,0.001,0.135-0.022,0.182-0.067c0.045-0.047,0.066-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.182-0.067h-1.253v-1.253c0-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.067,0.107-0.067,0.181v1.253h-1.253c-0.075-0.001-0.135,0.022-0.182,0.067c-0.045,0.047-0.066,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.182,0.067h1.253v1.253c0,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.067-0.107,0.067-0.181V348.75z M380.62,256.498v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067h1.253v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067h-1.253v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066C380.642,256.362,380.619,256.423,380.62,256.498z M12.13,260.5c-0.276,0-0.5,0.224-0.5,0.5c0,0.276,0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5C12.63,260.724,12.406,260.5,12.13,260.5z M380.87,261.5c0.276,0,0.5-0.224,0.5-0.5c0-0.276-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5C380.37,261.276,380.594,261.5,380.87,261.5z M11.88,258.25v1.252c-0.001,0.075,0.022,0.135,0.067,0.182c0.047,0.045,0.108,0.066,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.182v-1.252h1.253c0.074,0,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.067-0.181-0.067H12.38v-1.253c0.001-0.075-0.022-0.135-0.067-0.182c-0.047-0.045-0.108-0.066-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.182v1.253h-1.253c-0.074,0-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.067,0.181,0.067H11.88z M381.12,7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067c-0.045,0.047-0.067,0.108-0.066,0.183c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067c0.045-0.047,0.067-0.108,0.066-0.183c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067h-1.253V7.497 M11.88,8.75h-1.253c-0.074-0.001-0.134,0.022-0.181,0.067C10.401,8.864,10.379,8.925,10.38,9c-0.001,0.075,0.021,0.136,0.066,0.183c0.047,0.045,0.107,0.068,0.181,0.067h1.253v1.253c-0.001,0.074,0.022,0.134,0.067,0.181c0.047,0.045,0.108,0.067,0.183,0.066c0.075,0.001,0.136-0.021,0.183-0.066c0.045-0.047,0.068-0.107,0.067-0.181V9.25h1.253c0.074,0.001,0.134-0.022,0.181-0.067C13.859,9.136,13.881,9.075,13.88,9c0.001-0.075-0.021-0.136-0.066-0.183c-0.047-0.045-0.107-0.068-0.181-0.067H12.38V7.497c0.001-0.074-0.022-0.134-0.067-0.181c-0.047-0.045-0.108-0.067-0.183-0.066c-0.075-0.001-0.136,0.021-0.183,0.066c-0.045,0.047-0.068,0.107-0.067,0.181V8.75z M12.13,5.5c-0.276,0-0.5,0.224-0.5,0.5s0.224,0.5,0.5,0.5s0.5-0.224,0.5-0.5S12.406,5.5,12.13,5.5z M380.87,6.5c0.276,0,0.5-0.224,0.5-0.5s-0.224-0.5-0.5-0.5c-0.276,0-0.5,0.224-0.5,0.5S380.594,6.5,380.87,6.5z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function RemovalHandle(): JSX.Element {
+  return (
+    <g id="removalHandle">
+      <path
+        d="M159-48.915c-7.732,0-14,6.268-14,14c0,7.732,6.268,14,14,14h75c7.732,0,14-6.268,14-14c0-7.732-6.268-14-14-14H159z M234-47.415c6.904,0,12.5,5.596,12.5,12.5s-5.596,12.5-12.5,12.5h-75c-6.904,0-12.5-5.596-12.5-12.5s5.596-12.5,12.5-12.5H234z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}
+export function ScrewHoles(): JSX.Element {
+  return (
+    <g id="screwHoles">
+      <path
+        d="M-31.5,162.21c-3.38,0-6.12,2.74-6.12,6.12c0,3.38,2.74,6.12,6.12,6.12s6.12-2.74,6.12-6.12C-25.38,164.95-28.12,162.21-31.5,162.21z M424.5,174.45c3.38,0,6.12-2.74,6.12-6.12c0-3.38-2.74-6.12-6.12-6.12c-3.38,0-6.12,2.74-6.12,6.12C418.38,171.71,421.12,174.45,424.5,174.45z M424.5,166.23c-1.16,0-2.1,0.94-2.1,2.1c0,1.16,0.94,2.1,2.1,2.1c1.16,0,2.1-0.94,2.1-2.1C426.6,167.17,425.66,166.23,424.5,166.23z M-31.5,170.43c1.16,0,2.1-0.94,2.1-2.1c0-1.16-0.94-2.1-2.1-2.1c-1.16,0-2.1,0.94-2.1,2.1C-33.6,169.49-32.66,170.43-31.5,170.43z"
+        style={{
+          fill: 'rgb(255, 255, 255)',
+          stroke: 'rgb(204, 204, 204)',
+          width: '100%',
+          height: '100%',
+        }}
+      ></path>
+    </g>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsForeignDiv.tsx

@@ -0,0 +1,51 @@
+import { Box } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsForeignDivProps {
+  width?: string | number
+  height?: string | number
+  x?: string | number
+  y?: string | number
+  children?: ReactNode
+  outerProps?: any
+  innerDivProps?: ComponentProps<typeof Box>
+  transformWithSVG?: boolean
+  extraTransform?: string
+  /** optional data-testid to test foreignObjects in cypress */
+  dataTestId?: string
+}
+
+export const RobotCoordsForeignDiv = (
+  props: RobotCoordsForeignDivProps
+): JSX.Element => {
+  const {
+    children,
+    x = 0,
+    y = 0,
+    height = '100%',
+    width = '100%',
+    outerProps,
+    innerDivProps,
+    transformWithSVG = false,
+    extraTransform = '',
+    dataTestId = '',
+  } = props
+
+  const transform = `scale(1, -1) ${extraTransform}`
+  return (
+    <foreignObject
+      data-testid={dataTestId}
+      {...{ x, y, height, width, ...outerProps }}
+      transform={transformWithSVG ? transform : extraTransform}
+    >
+      <Box
+        style={transformWithSVG ? {} : { transform }}
+        xmlns="http://www.w3.org/1999/xhtml"
+        {...innerDivProps}
+      >
+        {children}
+      </Box>
+    </foreignObject>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsForeignObject.tsx

@@ -0,0 +1,44 @@
+import { css } from 'styled-components'
+
+import { Flex, ForeignObject } from '../../primitives'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsForeignObjectProps {
+  width: string | number
+  height: string | number
+  x: string | number
+  y: string | number
+  children?: ReactNode
+  foreignObjectProps?: ComponentProps<typeof ForeignObject>
+  flexProps?: ComponentProps<typeof Flex>
+}
+
+export const RobotCoordsForeignObject = (
+  props: RobotCoordsForeignObjectProps
+): JSX.Element => {
+  const {
+    children,
+    x,
+    y,
+    height,
+    width,
+    foreignObjectProps = {},
+    flexProps = {},
+  } = props
+
+  return (
+    <ForeignObject {...{ x, y, height, width }}>
+      <Flex
+        height="100%"
+        width="100%"
+        css={css`
+          transform: scale(1, -1);
+        `}
+        {...foreignObjectProps}
+      >
+        <Flex {...flexProps}>{children}</Flex>
+      </Flex>
+    </ForeignObject>
+  )
+}

package/src/hardware-sim/Deck/RobotCoordsText.tsx

@@ -0,0 +1,33 @@
+import { css } from 'styled-components'
+
+import type { ComponentProps, ReactNode } from 'react'
+
+export interface RobotCoordsTextProps extends ComponentProps<'text'> {
+  x: number
+  y: number
+  children?: ReactNode
+  canHighlight?: boolean
+}
+
+/** SVG text reflected to use take robot coordinates as props */
+// TODO: Ian 2019-05-07 reconcile this with Brian's version
+export function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element {
+  const { x, y, children, canHighlight = true, ...additionalProps } = props
+  return (
+    <text
+      {...additionalProps}
+      x={x}
+      y={-1 * y}
+      transform="scale(1, -1)"
+      css={
+        !canHighlight
+          ? css`
+              user-select: none;
+            `
+          : undefined
+      }
+    >
+      {children}
+    </text>
+  )
+}