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

Perf: Avoid re-rendering keyframes when snap targets change

Browse source
This commit is contained in:
Aria Minaei 2022-07-12 12:08:39 +02:00 committed by Aria
parent 8f08499fb6
commit f82c9d1155
1 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx
View file

@ -5,7 +5,7 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
import {usePrism, useVal} from '@theatre/react' import {usePrism, useVal} from '@theatre/react'
import type {Pointer} from '@theatre/dataverse' import type {Pointer} from '@theatre/dataverse'
import {val} from '@theatre/dataverse' import {val} from '@theatre/dataverse'
import React, {Fragment} from 'react' import React, {useMemo} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import SingleKeyframeEditor from './KeyframeEditor/SingleKeyframeEditor' import SingleKeyframeEditor from './KeyframeEditor/SingleKeyframeEditor'
import type {IContextMenuItem} from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu' import type {IContextMenuItem} from '@theatre/studio/uiComponents/simpleContextMenu/useContextMenu'
@ -73,34 +73,26 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = React.memo(
const snapToAllKeyframes = snapPositionsState.mode === 'snapToAll' const snapToAllKeyframes = snapPositionsState.mode === 'snapToAll'
const track = useMemo(
() => ({data: trackData, id: leaf.trackId}),
[trackData, leaf.trackId],
)
const keyframeEditors = trackData.keyframes.map((kf, index) => ( const keyframeEditors = trackData.keyframes.map((kf, index) => (
<Fragment key={'keyframe-' + kf.id}> <SingleKeyframeEditor
{snapToAllKeyframes && ( key={'keyframe-' + kf.id}
<KeyframeSnapTarget itemKey={createStudioSheetItemKey.forTrackKeyframe(
layoutP={layoutP} leaf.sheetObject,
leaf={leaf} leaf.trackId,
position={kf.position} kf.id,
/>
)} )}
<SingleKeyframeEditor keyframe={kf}
itemKey={createStudioSheetItemKey.forTrackKeyframe( index={index}
leaf.sheetObject, track={track}
leaf.trackId, layoutP={layoutP}
kf.id, leaf={leaf}
)} selection={selectedKeyframeIds[kf.id] === true ? selection : undefined}
keyframe={kf} />
index={index}
track={{
data: trackData,
id: leaf.trackId,
}}
layoutP={layoutP}
leaf={leaf}
selection={
selectedKeyframeIds[kf.id] === true ? selection : undefined
}
/>
</Fragment>
)) ))
const snapTargets = snapPositions.map((position) => ( const snapTargets = snapPositions.map((position) => (
@ -112,6 +104,17 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = React.memo(
/> />
)) ))
const additionalSnapTargets = !snapToAllKeyframes
? null
: trackData.keyframes.map((kf) => (
<KeyframeSnapTarget
key={`additionalSnapTarget-${kf.id}`}
layoutP={layoutP}
leaf={leaf}
position={kf.position}
/>
))
return ( return (
<Container <Container
ref={containerRef} ref={containerRef}
@ -121,12 +124,15 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = React.memo(
> >
{keyframeEditors} {keyframeEditors}
{snapTargets} {snapTargets}
<>{additionalSnapTargets}</>
{contextMenu} {contextMenu}
</Container> </Container>
) )
}, },
) )
BasicKeyframedTrack.displayName = `BasicKeyframedTrack`
export default BasicKeyframedTrack export default BasicKeyframedTrack
function useBasicKeyframedTrackContextMenu( function useBasicKeyframedTrackContextMenu(