variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Perf: Make <AggregateKeyframeTrack> render its children with memoized props

Browse source
This commit is contained in:
Aria Minaei 2022-07-12 13:09:00 +02:00 committed by Aria
parent 86dd2cbf86
commit 707a27462d
1 changed files with 32 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregatedKeyframeTrack.tsx
View file

@ -93,9 +93,9 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
() => logger._debug('see aggregatedKeyframes', props.aggregatedKeyframes), () => logger._debug('see aggregatedKeyframes', props.aggregatedKeyframes),
) )
const posKfs: IAggregateKeyframesAtPosition[] = [ const posKfs: IAggregateKeyframesAtPosition[] = useMemo(
...aggregatedKeyframes.byPosition.entries(), () =>
] [...aggregatedKeyframes.byPosition.entries()]
.sort((a, b) => a[0] - b[0]) .sort((a, b) => a[0] - b[0])
.map( .map(
([position, keyframes]): IAggregateKeyframesAtPosition => ({ ([position, keyframes]): IAggregateKeyframesAtPosition => ({
@ -104,6 +104,8 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
selected: selectedPositions.get(position), selected: selectedPositions.get(position),
allHere: keyframes.length === aggregatedKeyframes.tracks.length, allHere: keyframes.length === aggregatedKeyframes.tracks.length,
}), }),
),
[aggregatedKeyframes, selectedPositions],
) )
const snapPositionsState = useVal(snapPositionsStateD) const snapPositionsState = useVal(snapPositionsStateD)
@ -129,7 +131,9 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
/> />
)) ))
const keyframeEditorProps = posKfs.map( const keyframeEditorProps = useMemo(
() =>
posKfs.map(
( (
{position, keyframes}, {position, keyframes},
index, index,
@ -143,6 +147,8 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
selection: selectedPositions.has(position) ? selection : undefined, selection: selectedPositions.has(position) ? selection : undefined,
}, },
}), }),
),
[posKfs, viewModel, selectedPositions],
) )
const [isDragging] = useDragForAggregateKeyframeDot( const [isDragging] = useDragForAggregateKeyframeDot(