tldraw/components/canvas/defs.tsx
2021-05-28 14:08:51 +01:00

25 lines
674 B
TypeScript

import { getShapeUtils } from "lib/shape-utils"
import { useSelector } from "state"
import { deepCompareArrays, getPage } from "utils/utils"
export default function Defs() {
const currentPageShapeIds = useSelector(({ data }) => {
return Object.values(getPage(data).shapes)
.sort((a, b) => a.childIndex - b.childIndex)
.map((shape) => shape.id)
}, deepCompareArrays)
return (
<defs>
{currentPageShapeIds.map((id) => (
<Def key={id} id={id} />
))}
</defs>
)
}
export function Def({ id }: { id: string }) {
const shape = useSelector(({ data }) => getPage(data).shapes[id])
return getShapeUtils(shape).render(shape)
}