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

Fix outline panel blocking clicks incorrectly (#223)

Browse source 
Co-authored-by: Fülöp Kovács <kovacs.fulop@gmail.com>
Co-authored-by: Cole Lawrence <cole@colelawrence.com>
This commit is contained in:
Elliot 2022-06-16 10:14:51 -04:00 committed by GitHub
parent 4e4b8f83e9
commit 2c2e421382
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
View file

@ -6,6 +6,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag'
import React, {useMemo, useRef} from 'react' import React, {useMemo, useRef} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {panelDimsToPanelPosition, usePanel} from './BasePanel' import {panelDimsToPanelPosition, usePanel} from './BasePanel'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
const Container = styled.div` const Container = styled.div`
cursor: move; cursor: move;
@ -63,7 +64,8 @@ const PanelDragZone: React.FC<
} }
}, []) }, [])
useDrag(node, dragOpts) const [isDragging] = useDrag(node, dragOpts)
useCssCursorLock(isDragging, 'dragging', 'move')
const [onMouseEnter, onMouseLeave] = useMemo(() => { const [onMouseEnter, onMouseLeave] = useMemo(() => {
let unlock: VoidFn | undefined let unlock: VoidFn | undefined

4
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -46,6 +46,7 @@ const Header = styled(BaseHeader)`
background: rgba(29, 53, 59, 0.7); background: rgba(29, 53, 59, 0.7);
} }
${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover { &:not(.not-selectable):not(.selected):hover {
background: rgba(59, 63, 69, 0.9); background: rgba(59, 63, 69, 0.9);
@ -65,11 +66,10 @@ const Header = styled(BaseHeader)`
// Hit zone // Hit zone
&:before { &:before {
position: absolute; position: absolute;
inset: -1px -20px; inset: -1px 0;
display: block; display: block;
content: ' '; content: ' ';
z-index: 5; z-index: 5;
${pointerEventsAutoInNormalMode};
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {

3
theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
View file

@ -2,7 +2,6 @@ import React, {useEffect, useLayoutEffect} from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common' import {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import ProjectsList from './ProjectsList/ProjectsList' import ProjectsList from './ProjectsList/ProjectsList'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {useVal} from '@theatre/react' import {useVal} from '@theatre/react'
import getStudio from '@theatre/studio/getStudio' import getStudio from '@theatre/studio/getStudio'
import useHotspot from '@theatre/studio/uiComponents/useHotspot' import useHotspot from '@theatre/studio/uiComponents/useHotspot'
@ -15,7 +14,7 @@ const Container = styled.div<{pin: boolean}>`
position: absolute; position: absolute;
left: 8px; left: 8px;
z-index: ${panelZIndexes.outlinePanel}; z-index: ${panelZIndexes.outlinePanel};
${pointerEventsAutoInNormalMode};
top: calc(${headerHeight} + 8px); top: calc(${headerHeight} + 8px);
height: fit-content; height: fit-content;
max-height: calc(100% - ${headerHeight}); max-height: calc(100% - ${headerHeight});