From 0a5e7e16b602a7c4c38930a71ded6802cef55c8f Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 23 Jul 2021 22:17:51 +0200 Subject: [PATCH] Style tweaks --- .../studio/src/panels/BasePanel/BasePanel.tsx | 11 ++++- .../src/panels/BasePanel/PanelDragZone.tsx | 45 +++++++++++++++++-- .../panels/BasePanel/PanelResizeHandle.tsx | 21 ++++++++- theatre/studio/src/uiComponents/useLockSet.ts | 22 +++++++++ 4 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 theatre/studio/src/uiComponents/useLockSet.ts 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] +}