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

Also highlight the hovered props in the sequence editor panel

Browse source
This commit is contained in:
Aria Minaei 2022-06-13 15:01:45 +02:00 committed by Aria
parent 4d92ad1932
commit 1b36e8f6f9
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx
View file

@ -45,6 +45,10 @@ const LeftRowHead_Label = styled.span`
padding-right: 4px;
line-height: 26px;
flex-wrap: nowrap;
${LeftRowHeader}:hover & {
color: #ccc;
}
`
const LeftRowHead_Icon = styled.span<{isCollapsed: boolean}>`
@ -93,13 +97,14 @@ const AnyCompositeRow: React.FC<{
}) => {
const hasChildren = Array.isArray(children) && children.length > 0
const containerRef = useRef<HTMLLIElement | null>(null)
const rowHeaderRef = useRef<HTMLDivElement | null>(null)
usePropHighlightMouseEnter(containerRef.current, leaf)
usePropHighlightMouseEnter(rowHeaderRef.current, leaf)
return leaf.shouldRender ? (
<LeftRowContainer depth={leaf.depth} ref={containerRef}>
<LeftRowContainer depth={leaf.depth}>
<LeftRowHeader
ref={rowHeaderRef}
style={{
height: leaf.nodeHeight + 'px',
}}

11
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/PrimitivePropRow.tsx
View file

@ -77,6 +77,10 @@ const GraphIcon = () => (
const PrimitivePropRowHead_Label = styled.span`
margin-right: 4px;
${propNameTextCSS};
${PrimitivePropRowHead}:hover & {
color: #ccc;
}
`
const PrimitivePropRow: React.FC<{
@ -132,13 +136,14 @@ const PrimitivePropRow: React.FC<{
const label = leaf.pathToProp[leaf.pathToProp.length - 1]
const isSelectable = true
const containerRef = useRef<HTMLLIElement | null>(null)
const headRef = useRef<HTMLDivElement | null>(null)
usePropHighlightMouseEnter(containerRef.current, leaf)
usePropHighlightMouseEnter(headRef.current, leaf)
return (
<PrimitivePropRowContainer depth={leaf.depth} ref={containerRef}>
<PrimitivePropRowContainer depth={leaf.depth}>
<PrimitivePropRowHead
ref={headRef}
isEven={leaf.n % 2 === 0}
style={{
height: leaf.nodeHeight + 'px',