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

Perf: Memoize SingleKeyframeEditor

Browse source
This commit is contained in:
Aria Minaei 2022-07-12 12:07:50 +02:00 committed by Aria
parent 10f21224f4
commit 8f08499fb6
2 changed files with 64 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -95,44 +95,46 @@ const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>`
type ISingleKeyframeDotProps = ISingleKeyframeEditorProps type ISingleKeyframeDotProps = ISingleKeyframeEditorProps
/** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */ /** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */
const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => { const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = React.memo(
const logger = useLogger('SingleKeyframeDot', props.keyframe.id) (props) => {
const presence = usePresence(props.itemKey) const logger = useLogger('SingleKeyframeDot', props.keyframe.id)
const [ref, node] = useRefAndState<HTMLDivElement | null>(null) const presence = usePresence(props.itemKey)
const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props) const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] = const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
useSingleKeyframeInlineEditorPopover({ useSingleKeyframeInlineEditorPopover({
keyframe: props.keyframe, keyframe: props.keyframe,
pathToProp: props.leaf.pathToProp, pathToProp: props.leaf.pathToProp,
propConf: props.leaf.propConf, propConf: props.leaf.propConf,
sheetObject: props.leaf.sheetObject, sheetObject: props.leaf.sheetObject,
trackId: props.leaf.trackId, trackId: props.leaf.trackId,
})
const [isDragging] = useDragForSingleKeyframeDot(node, props, {
onClickFromDrag(dragStartEvent) {
openEditor(dragStartEvent, ref.current!)
},
}) })
const [isDragging] = useDragForSingleKeyframeDot(node, props, { return (
onClickFromDrag(dragStartEvent) { <>
openEditor(dragStartEvent, ref.current!) <HitZone
}, ref={ref}
}) isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
{...presence.attrs}
return ( />
<> <Diamond
<HitZone isSelected={!!props.selection}
ref={ref} isInlineEditorPopoverOpen={isInlineEditorPopoverOpen}
isInlineEditorPopoverOpen={isInlineEditorPopoverOpen} flag={presence.flag}
{...presence.attrs} />
/> {inlineEditorPopover}
<Diamond {contextMenu}
isSelected={!!props.selection} </>
isInlineEditorPopoverOpen={isInlineEditorPopoverOpen} )
flag={presence.flag} },
/> )
{inlineEditorPopover}
{contextMenu}
</>
)
}
export default SingleKeyframeDot export default SingleKeyframeDot

52
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx
View file

@ -29,32 +29,34 @@ export type ISingleKeyframeEditorProps = {
selection: undefined | DopeSheetSelection selection: undefined | DopeSheetSelection
} }
const SingleKeyframeEditor: React.VFC<ISingleKeyframeEditorProps> = (props) => { const SingleKeyframeEditor: React.VFC<ISingleKeyframeEditorProps> = React.memo(
const { (props) => {
index, const {
keyframe, index,
track: {data: trackData}, keyframe,
} = props track: {data: trackData},
const cur = trackData.keyframes[index] } = props
const next = trackData.keyframes[index + 1] const cur = trackData.keyframes[index]
const next = trackData.keyframes[index + 1]
const connected = cur.connectedRight && !!next const connected = cur.connectedRight && !!next
return ( return (
<SingleKeyframeEditorContainer <SingleKeyframeEditorContainer
style={{ style={{
top: `${props.leaf.nodeHeight / 2}px`, top: `${props.leaf.nodeHeight / 2}px`,
left: `calc(${val( left: `calc(${val(
props.layoutP.scaledSpace.leftPadding, props.layoutP.scaledSpace.leftPadding,
)}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${ )}px + calc(var(--unitSpaceToScaledSpaceMultiplier) * ${
cur.position cur.position
}px))`, }px))`,
}} }}
> >
<SingleKeyframeDot {...props} itemKey={props.itemKey} /> <SingleKeyframeDot {...props} itemKey={props.itemKey} />
{connected ? <SingleKeyframeConnector {...props} /> : noConnector} {connected ? <SingleKeyframeConnector {...props} /> : noConnector}
</SingleKeyframeEditorContainer> </SingleKeyframeEditorContainer>
) )
} },
)
export default SingleKeyframeEditor export default SingleKeyframeEditor