25 lines
647 B
TypeScript
25 lines
647 B
TypeScript
|
import { useSelector } from "state"
|
||
|
|
import { deepCompareArrays } from "utils/utils"
|
||
|
|
import Shape from "./shape"
|
||
|
|
|
||
|
|
/*
|
||
|
|
On each state change, compare node ids of all shapes
|
||
|
|
on the current page. Kind of expensive but only happens
|
||
|
|
here; and still cheaper than any other pattern I've found.
|
||
|
|
*/
|
||
|
|
|
||
|
|
export default function Page() {
|
||
|
|
const currentPageShapeIds = useSelector((state) => {
|
||
|
|
const { currentPageId, document } = state.data
|
||
|
|
return Object.keys(document.pages[currentPageId].shapes)
|
||
|
|
}, deepCompareArrays)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{currentPageShapeIds.map((shapeId) => (
|
||
|
|
<Shape key={shapeId} id={shapeId} />
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|