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; padding-right: 4px;
line-height: 26px; line-height: 26px;
flex-wrap: nowrap; flex-wrap: nowrap;
${LeftRowHeader}:hover & {
color: #ccc;
}
` `
const LeftRowHead_Icon = styled.span<{isCollapsed: boolean}>` const LeftRowHead_Icon = styled.span<{isCollapsed: boolean}>`
@ -93,13 +97,14 @@ const AnyCompositeRow: React.FC<{
}) => { }) => {
const hasChildren = Array.isArray(children) && children.length > 0 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 ? ( return leaf.shouldRender ? (
<LeftRowContainer depth={leaf.depth} ref={containerRef}> <LeftRowContainer depth={leaf.depth}>
<LeftRowHeader <LeftRowHeader
ref={rowHeaderRef}
style={{ style={{
height: leaf.nodeHeight + 'px', 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` const PrimitivePropRowHead_Label = styled.span`
margin-right: 4px; margin-right: 4px;
${propNameTextCSS}; ${propNameTextCSS};
${PrimitivePropRowHead}:hover & {
color: #ccc;
}
` `
const PrimitivePropRow: React.FC<{ const PrimitivePropRow: React.FC<{
@ -132,13 +136,14 @@ const PrimitivePropRow: React.FC<{
const label = leaf.pathToProp[leaf.pathToProp.length - 1] const label = leaf.pathToProp[leaf.pathToProp.length - 1]
const isSelectable = true const isSelectable = true
const containerRef = useRef<HTMLLIElement | null>(null) const headRef = useRef<HTMLDivElement | null>(null)
usePropHighlightMouseEnter(containerRef.current, leaf) usePropHighlightMouseEnter(headRef.current, leaf)
return ( return (
<PrimitivePropRowContainer depth={leaf.depth} ref={containerRef}> <PrimitivePropRowContainer depth={leaf.depth}>
<PrimitivePropRowHead <PrimitivePropRowHead
ref={headRef}
isEven={leaf.n % 2 === 0} isEven={leaf.n % 2 === 0}
style={{ style={{
height: leaf.nodeHeight + 'px', height: leaf.nodeHeight + 'px',