diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx index 697b2dc..ae9212e 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx @@ -95,44 +95,46 @@ const HitZone = styled.div<{isInlineEditorPopoverOpen: boolean}>` type ISingleKeyframeDotProps = ISingleKeyframeEditorProps /** The ◆ you can grab onto in "keyframe editor" (aka "dope sheet" in other programs) */ -const SingleKeyframeDot: React.VFC = (props) => { - const logger = useLogger('SingleKeyframeDot', props.keyframe.id) - const presence = usePresence(props.itemKey) - const [ref, node] = useRefAndState(null) +const SingleKeyframeDot: React.VFC = React.memo( + (props) => { + const logger = useLogger('SingleKeyframeDot', props.keyframe.id) + const presence = usePresence(props.itemKey) + const [ref, node] = useRefAndState(null) - const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props) - const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] = - useSingleKeyframeInlineEditorPopover({ - keyframe: props.keyframe, - pathToProp: props.leaf.pathToProp, - propConf: props.leaf.propConf, - sheetObject: props.leaf.sheetObject, - trackId: props.leaf.trackId, + const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props) + const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] = + useSingleKeyframeInlineEditorPopover({ + keyframe: props.keyframe, + pathToProp: props.leaf.pathToProp, + propConf: props.leaf.propConf, + sheetObject: props.leaf.sheetObject, + trackId: props.leaf.trackId, + }) + + const [isDragging] = useDragForSingleKeyframeDot(node, props, { + onClickFromDrag(dragStartEvent) { + openEditor(dragStartEvent, ref.current!) + }, }) - const [isDragging] = useDragForSingleKeyframeDot(node, props, { - onClickFromDrag(dragStartEvent) { - openEditor(dragStartEvent, ref.current!) - }, - }) - - return ( - <> - - - {inlineEditorPopover} - {contextMenu} - - ) -} + return ( + <> + + + {inlineEditorPopover} + {contextMenu} + + ) + }, +) export default SingleKeyframeDot diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx index 48ecb04..494beb4 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeEditor.tsx @@ -29,32 +29,34 @@ export type ISingleKeyframeEditorProps = { selection: undefined | DopeSheetSelection } -const SingleKeyframeEditor: React.VFC = (props) => { - const { - index, - keyframe, - track: {data: trackData}, - } = props - const cur = trackData.keyframes[index] - const next = trackData.keyframes[index + 1] +const SingleKeyframeEditor: React.VFC = React.memo( + (props) => { + const { + index, + keyframe, + track: {data: trackData}, + } = props + const cur = trackData.keyframes[index] + const next = trackData.keyframes[index + 1] - const connected = cur.connectedRight && !!next + const connected = cur.connectedRight && !!next - return ( - - - {connected ? : noConnector} - - ) -} + return ( + + + {connected ? : noConnector} + + ) + }, +) export default SingleKeyframeEditor