Style tweaks

theatre/studio/src/panels/BasePanel/BasePanel.tsx

@@ -1,8 +1,9 @@
 import {val} from '@theatre/dataverse'
 import {usePrism} from '@theatre/dataverse-react'
-import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import type {$IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import getStudio from '@theatre/studio/getStudio'
 import type {PanelPosition} from '@theatre/studio/store/types'
+import useLockSet from '@theatre/studio/uiComponents/useLockSet'
 import React, {useContext} from 'react'
 import useWindowSize from 'react-use/esm/useWindowSize'
 import styled from 'styled-components'
@@ -26,6 +27,8 @@ type PanelStuff = {
     width: number
     height: number
   }
+  boundsHighlighted: boolean
+  addBoundsHighlightLock: () => VoidFn
 }
 
 export const panelDimsToPanelPosition = (
@@ -74,6 +77,8 @@ const BasePanel: React.FC<{
   minDims: {width: number; height: number}
 }> = ({panelId, children, defaultPosition, minDims}) => {
   const windowSize = useWindowSize(800, 200)
+  const [boundsHighlighted, addBoundsHighlightLock] = useLockSet()
+
   const {stuff} = usePrism(() => {
     const {edges} =
       val(getStudio()!.atomP.historic.panelPositions[panelId]) ??
@@ -119,9 +124,11 @@ const BasePanel: React.FC<{
       },
       panelId,
       minDims,
+      boundsHighlighted,
+      addBoundsHighlightLock,
     }
     return {stuff}
-  }, [panelId, windowSize])
+  }, [panelId, windowSize, boundsHighlighted, addBoundsHighlightLock])
 
   return <PanelContext.Provider value={stuff}>{children}</PanelContext.Provider>
 }

theatre/studio/src/panels/BasePanel/PanelDragZone.tsx

@@ -1,5 +1,5 @@
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import type {$IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import getStudio from '@theatre/studio/getStudio'
 import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore'
 import useDrag from '@theatre/studio/uiComponents/useDrag'
@@ -23,10 +23,17 @@ const PanelDragZone: React.FC<
   const dragOpts: Parameters<typeof useDrag>[1] = useMemo(() => {
     let stuffBeforeDrag = panelStuffRef.current
     let tempTransaction: CommitOrDiscard | undefined
+    let unlock: VoidFn | undefined
     return {
       lockCursorTo: 'move',
       onDragStart() {
         stuffBeforeDrag = panelStuffRef.current
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
+        unlock = panelStuff.addBoundsHighlightLock()
       },
       onDrag(dx, dy) {
         const newDims: typeof panelStuff['dims'] = {
@@ -48,6 +55,11 @@ const PanelDragZone: React.FC<
         })
       },
       onDragEnd(dragHappened) {
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
         if (dragHappened) {
           tempTransaction?.commit()
         } else {
@@ -60,8 +72,35 @@ const PanelDragZone: React.FC<
 
   useDrag(node, dragOpts)
 
-  // @ts-ignore ignore
-  return <Container {...props} ref={ref} />
+  const [onMouseEnter, onMouseLeave] = useMemo(() => {
+    let unlock: VoidFn | undefined
+    return [
+      function onMouseEnter() {
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
+        unlock = panelStuff.addBoundsHighlightLock()
+      },
+      function onMouseLeave() {
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
+      },
+    ]
+  }, [])
+
+  return (
+    <Container
+      {...props}
+      ref={ref}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    />
+  )
 }
 
 export default PanelDragZone

theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx

@@ -1,5 +1,5 @@
 import useRefAndState from '@theatre/studio/utils/useRefAndState'
-import type {$IntentionalAny} from '@theatre/shared/utils/types'
+import type {$IntentionalAny, VoidFn} from '@theatre/shared/utils/types'
 import getStudio from '@theatre/studio/getStudio'
 import type {CommitOrDiscard} from '@theatre/studio/StudioStore/StudioStore'
 import useDrag from '@theatre/studio/uiComponents/useDrag'
@@ -126,11 +126,19 @@ const PanelResizeHandle: React.FC<{
   const dragOpts: Parameters<typeof useDrag>[1] = useMemo(() => {
     let stuffBeforeDrag = panelStuffRef.current
     let tempTransaction: CommitOrDiscard | undefined
+    let unlock: VoidFn | undefined
+
     return {
       lockCursorTo: cursors[which],
       onDragStart() {
         stuffBeforeDrag = panelStuffRef.current
         setIsDragging(true)
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
+        unlock = panelStuff.addBoundsHighlightLock()
       },
       onDrag(dx, dy) {
         const newDims: typeof panelStuff['dims'] = {
@@ -184,6 +192,11 @@ const PanelResizeHandle: React.FC<{
         })
       },
       onDragEnd(dragHappened) {
+        if (unlock) {
+          const u = unlock
+          unlock = undefined
+          u()
+        }
         setIsDragging(false)
         if (dragHappened) {
           tempTransaction?.commit()
@@ -199,7 +212,11 @@ const PanelResizeHandle: React.FC<{
   const Comp = els[which]
 
   return (
-    <Comp ref={ref} isDragging={isDragging} style={{cursor: cursors[which]}} />
+    <Comp
+      ref={ref}
+      isDragging={isDragging || panelStuff.boundsHighlighted}
+      style={{cursor: cursors[which]}}
+    />
   )
 }
 

theatre/studio/src/uiComponents/useLockSet.ts

@@ -0,0 +1,22 @@
+import {useMemo, useState} from 'react'
+
+type Unlock = () => void
+
+type AddLock = () => Unlock
+
+export default function useLockSet(): [isLocked: boolean, addLock: AddLock] {
+  const [isLocked, _setIsLocked] = useState(false)
+  const addLock = useMemo(() => {
+    const locks = new Set()
+    return () => {
+      const unlock = () => {
+        locks.delete(unlock)
+        _setIsLocked(locks.size > 0)
+      }
+      locks.add(unlock)
+      _setIsLocked(true)
+      return unlock
+    }
+  }, [])
+  return [isLocked, addLock]
+}