You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

center-handle.tsx 526B

12345678910111213141516171819202122232425262728293031323334
  1. import styled from 'styles'
  2. import { Bounds } from 'types'
  3. export default function CenterHandle({
  4. bounds,
  5. isLocked,
  6. }: {
  7. bounds: Bounds
  8. isLocked: boolean
  9. }) {
  10. return (
  11. <StyledBounds
  12. width={bounds.width}
  13. height={bounds.height}
  14. pointerEvents="none"
  15. isLocked={isLocked}
  16. />
  17. )
  18. }
  19. const StyledBounds = styled('rect', {
  20. fill: 'none',
  21. stroke: '$bounds',
  22. zStrokeWidth: 2,
  23. variants: {
  24. isLocked: {
  25. true: {
  26. zStrokeWidth: 1,
  27. zDash: 2,
  28. },
  29. },
  30. },
  31. })