69 lines
1.5 KiB
TypeScript
69 lines
1.5 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 { useRef } from 'react'
|
|
|
|
export default function Selected() {
|
|
const currentPageShapeIds = useSelector(({ data }) => {
|
|
return Array.from(data.selectedIds.values())
|
|
}, deepCompareArrays)
|
|
|
|
const isSelecting = useSelector((s) => s.isIn('selecting'))
|
|
|
|
if (!isSelecting) return null
|
|
|
|
return (
|
|
<g>
|
|
{currentPageShapeIds.map((id) => (
|
|
<ShapeOutline key={id} id={id} />
|
|
))}
|
|
</g>
|
|
)
|
|
}
|
|
|
|
export function ShapeOutline({ id }: { id: string }) {
|
|
const rIndicator = useRef<SVGUseElement>(null)
|
|
|
|
const shape = useSelector(({ data }) => getPage(data).shapes[id])
|
|
|
|
const events = useShapeEvents(id, rIndicator)
|
|
|
|
if (!shape) return null
|
|
|
|
const transform = `
|
|
rotate(${shape.rotation * (180 / Math.PI)},
|
|
${getShapeUtils(shape).getCenter(shape)})
|
|
translate(${shape.point})
|
|
`
|
|
|
|
return (
|
|
<Indicator
|
|
ref={rIndicator}
|
|
as="use"
|
|
href={'#' + id}
|
|
transform={transform}
|
|
isLocked={shape.isLocked}
|
|
{...events}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const Indicator = styled('path', {
|
|
zStrokeWidth: 1,
|
|
strokeLineCap: 'round',
|
|
strokeLinejoin: 'round',
|
|
stroke: '$selected',
|
|
fill: 'transparent',
|
|
pointerEvents: 'all',
|
|
|
|
variants: {
|
|
isLocked: {
|
|
true: {
|
|
zDash: 2,
|
|
},
|
|
false: {},
|
|
},
|
|
},
|
|
})
|