names memoized components

This commit is contained in:
Steve Ruiz 2021-06-03 22:23:16 +01:00
parent bf16a6e292
commit 75beaf2516
3 changed files with 33 additions and 25 deletions

View file

@ -24,7 +24,7 @@ export default function Defs() {
)
}
const Def = memo(({ id }: { id: string }) => {
const Def = memo(function Def({ id }: { id: string }) {
const shape = useSelector(({ data }) => getPage(data).shapes[id])
if (!shape) return null
return getShapeUtils(shape).render(shape)

View file

@ -25,34 +25,38 @@ export default function Selected() {
)
}
export const ShapeOutline = memo(
({ id, isSelected }: { id: string; isSelected: boolean }) => {
const rIndicator = useRef<SVGUseElement>(null)
export const ShapeOutline = memo(function ShapeOutline({
id,
isSelected,
}: {
id: string
isSelected: boolean
}) {
const rIndicator = useRef<SVGUseElement>(null)
const shape = useSelector(({ data }) => getPage(data).shapes[id])
const shape = useSelector(({ data }) => getPage(data).shapes[id])
const events = useShapeEvents(id, rIndicator)
const events = useShapeEvents(id, rIndicator)
if (!shape) return null
if (!shape) return null
const transform = `
const transform = `
rotate(${shape.rotation * (180 / Math.PI)},
${getShapeUtils(shape).getCenter(shape)})
translate(${shape.point})
`
return (
<SelectIndicator
ref={rIndicator}
as="use"
href={'#' + id}
transform={transform}
isLocked={shape.isLocked}
{...events}
/>
)
}
)
return (
<SelectIndicator
ref={rIndicator}
as="use"
href={'#' + id}
transform={transform}
isLocked={shape.isLocked}
{...events}
/>
)
})
const SelectIndicator = styled('path', {
zStrokeWidth: 3,

View file

@ -47,11 +47,15 @@ function Shape({ id, isSelecting }: { id: string; isSelecting: boolean }) {
)
}
const RealShape = memo(
({ id, style }: { id: string; style: ReturnType<typeof getShapeStyle> }) => {
return <StyledShape as="use" href={'#' + id} {...style} />
}
)
const RealShape = memo(function RealShape({
id,
style,
}: {
id: string
style: ReturnType<typeof getShapeStyle>
}) {
return <StyledShape as="use" href={'#' + id} {...style} />
})
const StyledShape = styled('path', {
strokeLinecap: 'round',