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 type {Pointer} from '@theatre/dataverse'
import {val} from '@theatre/dataverse'
import React, {Fragment} from 'react'
import React, {useMemo} from 'react'
import styled from 'styled-components'
import SingleKeyframeEditor from './KeyframeEditor/SingleKeyframeEditor'
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 track = useMemo(
() => ({data: trackData, id: leaf.trackId}),
[trackData, leaf.trackId],
)
const keyframeEditors = trackData.keyframes.map((kf, index) => (
<Fragment key={'keyframe-' + kf.id}>
{snapToAllKeyframes && (
<KeyframeSnapTarget
layoutP={layoutP}
leaf={leaf}
position={kf.position}
/>
<SingleKeyframeEditor
key={'keyframe-' + kf.id}
itemKey={createStudioSheetItemKey.forTrackKeyframe(
leaf.sheetObject,
leaf.trackId,
kf.id,
)}
<SingleKeyframeEditor
itemKey={createStudioSheetItemKey.forTrackKeyframe(
leaf.sheetObject,
leaf.trackId,
kf.id,
)}
keyframe={kf}
index={index}
track={{
data: trackData,
id: leaf.trackId,
}}
layoutP={layoutP}
leaf={leaf}
selection={
selectedKeyframeIds[kf.id] === true ? selection : undefined
}
/>
</Fragment>
keyframe={kf}
index={index}
track={track}
layoutP={layoutP}
leaf={leaf}
selection={selectedKeyframeIds[kf.id] === true ? selection : undefined}
/>
))
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 (
<Container
ref={containerRef}
@ -121,12 +124,15 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = React.memo(
>
{keyframeEditors}
{snapTargets}
<>{additionalSnapTargets}</>
{contextMenu}
</Container>
)
},
)
BasicKeyframedTrack.displayName = `BasicKeyframedTrack`
export default BasicKeyframedTrack
function useBasicKeyframedTrackContextMenu(