tldraw/hooks/usePageShapes.ts
Steve Ruiz d1a3860bb1 Fixes a perf-killing deepCompare in context menu
Was deep comparing an array of actual selected shapes, rather than selected shape ids
2021-06-27 10:07:20 +01:00

36 lines
960 B
TypeScript

import { useSelector } from 'state'
import { getShapeUtils } from 'state/shape-utils'
import { PageState, Bounds } from 'types'
import {
boundsCollide,
boundsContain,
deepCompareArrays,
getPage,
getViewport,
} from 'utils'
const viewportCache = new WeakMap<PageState, Bounds>()
export default function usePageShapes(): string[] {
return useSelector((s) => {
const page = getPage(s.data)
const pageState = s.data.pageStates[page.id]
if (!viewportCache.has(pageState)) {
const viewport = getViewport(s.data)
viewportCache.set(pageState, viewport)
}
const viewport = viewportCache.get(pageState)
return s.values.currentShapes
.filter((shape) => {
const shapeBounds = getShapeUtils(shape).getBounds(shape)
return (
boundsContain(viewport, shapeBounds) ||
boundsCollide(viewport, shapeBounds)
)
})
.map((shape) => shape.id)
}, deepCompareArrays)
}