From 2c2e4213828022e713992236684b8b19ab957d6c Mon Sep 17 00:00:00 2001
From: Elliot <key.draw@gmail.com>
Date: Thu, 16 Jun 2022 10:14:51 -0400
Subject: [PATCH] Fix outline panel blocking clicks incorrectly (#223)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fülöp Kovács <kovacs.fulop@gmail.com>
Co-authored-by: Cole Lawrence <cole@colelawrence.com>
---
 theatre/studio/src/panels/BasePanel/PanelDragZone.tsx   | 4 +++-
 theatre/studio/src/panels/OutlinePanel/BaseItem.tsx     | 4 ++--
 theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx | 3 +--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx b/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
index ee893c8..7dcad76 100644
--- a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
+++ b/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
@@ -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
diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
index 11fa632..5f1e168 100644
--- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
@@ -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()) {
diff --git a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
index 913db4a..fa9fe3f 100644
--- a/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
@@ -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});