tldraw/components/canvas/selected.tsx
2021-06-05 07:36:39 +01:00

79 lines
1.9 KiB
TypeScript

import styled from 'styles'
import { useSelector } from 'state'
import { deepCompareArrays, getPage } from 'utils/utils'
import { getShapeUtils } from 'lib/shape-utils'
import useShapeEvents from 'hooks/useShapeEvents'
import { memo, useRef } from 'react'
import { ShapeType } from 'types'
import * as vec from 'utils/vec'
export default function Selected() {
const currentSelectedShapeIds = useSelector(({ data }) => {
return Array.from(data.selectedIds.values())
}, deepCompareArrays)
const isSelecting = useSelector((s) => s.isInAny('notPointing', 'pinching'))
if (!isSelecting) return null
return (
<g>
{currentSelectedShapeIds.map((id) => (
<ShapeOutline key={id} id={id} />
))}
</g>
)
}
export const ShapeOutline = memo(function ShapeOutline({ id }: { id: string }) {
const rIndicator = useRef<SVGUseElement>(null)
const shape = useSelector((s) => getPage(s.data).shapes[id])
const events = useShapeEvents(id, shape?.type === ShapeType.Group, rIndicator)
if (!shape) return null
// This needs computation from state, similar to bounds, in order
// to handle parent rotation.
const center = getShapeUtils(shape).getCenter(shape)
const bounds = getShapeUtils(shape).getBounds(shape)
const transform = `
rotate(${shape.rotation * (180 / Math.PI)},
${center})
translate(${bounds.minX},${bounds.minY})
`
return (
<SelectIndicator
ref={rIndicator}
as="use"
href={'#' + id}
transform={transform}
isLocked={shape.isLocked}
{...events}
/>
)
})
const SelectIndicator = styled('path', {
zStrokeWidth: 1,
strokeLineCap: 'round',
strokeLinejoin: 'round',
stroke: '$selected',
fill: 'transparent',
pointerEvents: 'none',
paintOrder: 'stroke fill markers',
variants: {
isLocked: {
true: {
zDash: 2,
},
false: {},
},
variant: {},
},
})