diff --git a/theatre/studio/src/panels/BasePanel/BasePanel.tsx b/theatre/studio/src/panels/BasePanel/BasePanel.tsx
index 8ccb3d6..e9b8447 100644
--- a/theatre/studio/src/panels/BasePanel/BasePanel.tsx
+++ b/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 {children}
}
diff --git a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx b/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
index c5ccca7..4076f4f 100644
--- a/theatre/studio/src/panels/BasePanel/PanelDragZone.tsx
+++ b/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[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
+ 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 (
+
+ )
}
export default PanelDragZone
diff --git a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx b/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
index 8082fd6..e405074 100644
--- a/theatre/studio/src/panels/BasePanel/PanelResizeHandle.tsx
+++ b/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[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 (
-
+
)
}
diff --git a/theatre/studio/src/uiComponents/useLockSet.ts b/theatre/studio/src/uiComponents/useLockSet.ts
new file mode 100644
index 0000000..24b4844
--- /dev/null
+++ b/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]
+}