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

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

@ -93,18 +93,20 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
() => logger._debug('see aggregatedKeyframes', props.aggregatedKeyframes),
)
const posKfs: IAggregateKeyframesAtPosition[] = [
...aggregatedKeyframes.byPosition.entries(),
]
.sort((a, b) => a[0] - b[0])
.map(
([position, keyframes]): IAggregateKeyframesAtPosition => ({
position,
keyframes,
selected: selectedPositions.get(position),
allHere: keyframes.length === aggregatedKeyframes.tracks.length,
}),
)
const posKfs: IAggregateKeyframesAtPosition[] = useMemo(
() =>
[...aggregatedKeyframes.byPosition.entries()]
.sort((a, b) => a[0] - b[0])
.map(
([position, keyframes]): IAggregateKeyframesAtPosition => ({
position,
keyframes,
selected: selectedPositions.get(position),
allHere: keyframes.length === aggregatedKeyframes.tracks.length,
}),
),
[aggregatedKeyframes, selectedPositions],
)
const snapPositionsState = useVal(snapPositionsStateD)
@ -129,20 +131,24 @@ function AggregatedKeyframeTrack_memo(props: IAggregatedKeyframeTracksProps) {
/>
))
const keyframeEditorProps = posKfs.map(
(
{position, keyframes},
index,
): {editorProps: IAggregateKeyframeEditorProps; position: number} => ({
position,
editorProps: {
index,
layoutP,
viewModel,
aggregateKeyframes: posKfs,
selection: selectedPositions.has(position) ? selection : undefined,
},
}),
const keyframeEditorProps = useMemo(
() =>
posKfs.map(
(
{position, keyframes},
index,
): {editorProps: IAggregateKeyframeEditorProps; position: number} => ({
position,
editorProps: {
index,
layoutP,
viewModel,
aggregateKeyframes: posKfs,
selection: selectedPositions.has(position) ? selection : undefined,
},
}),
),
[posKfs, viewModel, selectedPositions],
)
const [isDragging] = useDragForAggregateKeyframeDot(