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 styled from 'styled-components'
import {panelDimsToPanelPosition, usePanel} from './BasePanel'
import {useCssCursorLock} from '@theatre/studio/uiComponents/PointerEventsHandler'
const Container = styled.div`
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(() => {
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);
}
${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover {
background: rgba(59, 63, 69, 0.9);
@ -65,11 +66,10 @@ const Header = styled(BaseHeader)`
// Hit zone
&:before {
position: absolute;
inset: -1px -20px;
inset: -1px 0;
display: block;
content: ' ';
z-index: 5;
${pointerEventsAutoInNormalMode};
}
@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 {panelZIndexes} from '@theatre/studio/panels/BasePanel/common'
import ProjectsList from './ProjectsList/ProjectsList'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {useVal} from '@theatre/react'
import getStudio from '@theatre/studio/getStudio'
import useHotspot from '@theatre/studio/uiComponents/useHotspot'
@ -15,7 +14,7 @@ const Container = styled.div<{pin: boolean}>`
position: absolute;
left: 8px;
z-index: ${panelZIndexes.outlinePanel};
${pointerEventsAutoInNormalMode};
top: calc(${headerHeight} + 8px);
height: fit-content;
max-height: calc(100% - ${headerHeight});