variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Revert "Fix popover behavior when open and clicking on trigger"

Browse source 
This reverts commit 935ac36467.
This commit is contained in:
Andrew Prifer 2022-06-10 21:27:02 +02:00
parent 935ac36467
commit 8ef99aef1b
13 changed files with 52 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx
View file

@ -55,7 +55,7 @@ const ProjectDetails: React.FC<{
}, 40000)
}, [])
const {node: tooltip, open: openExportTooltip} = usePopover(
const [tooltip, openExportTooltip] = usePopover(
{debugName: 'ProjectDetails', pointerDistanceThreshold: 50},
() => (
<ExportTooltip>

8
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.tsx
View file

@ -55,11 +55,7 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
const [contextMenu] = useConnectorContextMenu(props, node)
const [isDragging] = useDragKeyframe(node, props.editorProps)
const {
node: popoverNode,
toggle: togglePopover,
close: closePopover,
} = usePopover(
const [popoverNode, openPopover, closePopover] = usePopover(
() => {
const rightDims = val(editorProps.layoutP.rightDims)
@ -93,7 +89,7 @@ export const AggregateKeyframeConnector: React.VFC<IAggregateKeyframeConnectorPr
isSelected={connected ? connected.selected : false}
isPopoverOpen={isAggregateEditingInCurvePopover}
openPopover={(e) => {
if (node) togglePopover(e, node)
if (node) openPopover(e, node)
}}
/>
{popoverNode}

8
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx
View file

@ -41,11 +41,7 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
const {
node: popoverNode,
toggle: togglePopover,
close: closePopover,
} = usePopover(
const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
() => {
const rightDims = val(props.layoutP.rightDims)
return {
@ -87,7 +83,7 @@ const BasicKeyframeConnector: React.VFC<IBasicKeyframeConnectorProps> = (
connectorLengthInUnitSpace={connectorLengthInUnitSpace}
{...themeValues}
openPopover={(e) => {
if (node) togglePopover(e, node)
if (node) openPopover(e, node)
}}
>
{popoverNode}

17
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -94,14 +94,11 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
const {
node: inlineEditorPopover,
toggle: toggleEditor,
isOpen: isInlineEditorPopoverOpen,
} = useSingleKeyframeInlineEditorPopover(props)
const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
useSingleKeyframeInlineEditorPopover(props)
const [isDragging] = useDragForSingleKeyframeDot(node, props, {
onClickFromDrag(dragStartEvent) {
toggleEditor(dragStartEvent, ref.current!)
openEditor(dragStartEvent, ref.current!)
},
})
@ -230,8 +227,6 @@ function useDragForSingleKeyframeDot(
const propsRef = useRef(props)
propsRef.current = props
const {onClickFromDrag} = options
const useDragOpts = useMemo<UseDragOpts>(() => {
return {
debugName: 'KeyframeDot/useDragKeyframe',
@ -287,7 +282,7 @@ function useDragForSingleKeyframeDot(
return (
handlers && {
...handlers,
onClick: onClickFromDrag,
onClick: options.onClickFromDrag,
onDragEnd: (...args) => {
handlers.onDragEnd?.(...args)
snapToNone()
@ -343,12 +338,12 @@ function useDragForSingleKeyframeDot(
snapToNone()
},
onClick(ev) {
onClickFromDrag(ev)
options.onClickFromDrag(ev)
},
}
},
}
}, [onClickFromDrag])
}, [])
const [isDragging] = useDrag(node, useDragOpts)

3
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
View file

@ -32,7 +32,7 @@ const LengthEditorPopover: React.FC<{
* Called when user hits enter/escape
*/
onRequestClose: (reason: string) => void
}> = ({layoutP}) => {
}> = ({layoutP, onRequestClose}) => {
const sheet = useVal(layoutP.sheet)
const fns = useMemo(() => {
@ -89,6 +89,7 @@ const LengthEditorPopover: React.FC<{
{...fns}
isValid={greaterThanZero}
inputRef={inputRef}
onBlur={onRequestClose.bind(null, 'length editor number input blur')}
nudge={nudge}
/>
</Container>

18
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx
View file

@ -138,17 +138,19 @@ const RENDER_OUT_OF_VIEW_X = -10000
const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
const [nodeRef, node] = useRefAndState<HTMLDivElement | null>(null)
const [isDragging] = useDragBulge(node, {layoutP})
const {
node: popoverNode,
toggle: togglePopover,
close: closePopover,
} = usePopover({debugName: 'LengthIndicator'}, () => {
const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
{debugName: 'LengthIndicator'},
() => {
return (
<BasicPopover>
<LengthEditorPopover layoutP={layoutP} onRequestClose={closePopover} />
<LengthEditorPopover
layoutP={layoutP}
onRequestClose={closePopover}
/>
</BasicPopover>
)
})
},
)
return usePrism(() => {
const sheet = val(layoutP.sheet)
@ -189,7 +191,7 @@ const LengthIndicator: React.FC<IProps> = ({layoutP}) => {
ref={nodeRef}
// title="Length of the sequence. Drag or click to change."
onClick={(e) => {
togglePopover(e, node!)
openPopover(e, node!)
}}
{...includeLockFrameStampAttrs('hide')}
>

13
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
View file

@ -193,11 +193,9 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
}) => {
const [thumbRef, thumbNode] = useRefAndState<HTMLElement | null>(null)
const {
node: popoverNode,
toggle: togglePopover,
close: closePopover,
} = usePopover({debugName: 'Playhead'}, () => {
const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
{debugName: 'Playhead'},
() => {
return (
<BasicPopover>
<PlayheadPositionPopover
@ -206,7 +204,8 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
/>
</BasicPopover>
)
})
},
)
const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
return {
@ -237,7 +236,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
snapToNone()
},
onClick(e) {
togglePopover(e, thumbRef.current!)
openPopover(e, thumbRef.current!)
},
}
},

3
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/PlayheadPositionPopover.tsx
View file

@ -33,7 +33,7 @@ const PlayheadPositionPopover: React.FC<{
* Called when user hits enter/escape
*/
onRequestClose: (reason: string) => void
}> = ({layoutP}) => {
}> = ({layoutP, onRequestClose}) => {
const sheet = val(layoutP.sheet)
const sequence = sheet.getSequence()
@ -80,6 +80,7 @@ const PlayheadPositionPopover: React.FC<{
{...fns}
isValid={greaterThanZero}
inputRef={inputRef}
onBlur={onRequestClose.bind(null, 'number input blur')}
nudge={nudge}
/>
</Container>

4
theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
View file

@ -74,7 +74,7 @@ function RgbaPropEditor({
[editingTools],
)
const {node: popoverNode, toggle: togglePopover} = usePopover(
const [popoverNode, openPopover] = usePopover(
{debugName: 'RgbaPropEditor'},
() => (
<RgbaPopover>
@ -107,7 +107,7 @@ function RgbaPropEditor({
rgbaColor={value}
ref={containerRef}
onClick={(e) => {
togglePopover(e, containerRef.current)
openPopover(e, containerRef.current)
}}
/>
<HexInput

4
theatre/studio/src/toolbars/GlobalToolbar.tsx
View file

@ -88,7 +88,7 @@ const GlobalToolbar: React.FC = () => {
const hasUpdates =
useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates) === true
const {node: moreMenu, toggle: toggleMenu} = usePopover(
const [moreMenu, openMoreMenu] = usePopover(
() => {
const triggerBounds = moreMenuTriggerRef.current!.getBoundingClientRect()
return {
@ -138,7 +138,7 @@ const GlobalToolbar: React.FC = () => {
<ToolbarIconButton
ref={moreMenuTriggerRef}
onClick={(e) => {
toggleMenu(e, moreMenuTriggerRef.current!)
openMoreMenu(e, moreMenuTriggerRef.current!)
}}
>
<Ellipsis />

5
theatre/studio/src/uiComponents/Popover/TooltipWrapper.tsx
View file

@ -138,10 +138,7 @@ const TooltipWrapper: React.FC<{
props.onPointerOutside,
])
useOnClickOutside(
[container, props.target ?? null],
props.onClickOutside ?? noop,
)
useOnClickOutside(container, props.onClickOutside ?? noop)
return (
<ArrowContext.Provider value={arrowContextValue}>

18
theatre/studio/src/uiComponents/Popover/usePopover.tsx
View file

@ -51,13 +51,7 @@ type Opts = {
export default function usePopover(
opts: Opts | (() => Opts),
render: () => React.ReactElement,
): {
node: React.ReactNode
open: OpenFn
close: CloseFn
toggle: OpenFn
isOpen: boolean
} {
): [node: React.ReactNode, open: OpenFn, close: CloseFn, isOpen: boolean] {
const _debug = (...args: any) => {}
// want to make sure that we don't close a popover when dragging something (like a curve editor handle)
@ -110,14 +104,6 @@ export default function usePopover(
}
}, [])
const toggle = useCallback<OpenFn>((...args) => {
if (stateRef.current.isOpen) {
close('toggled')
} else {
open(...args)
}
}, [])
/**
* See doc comment on {@link useAutoCloseLockState}.
* Used to ensure that moving far away from a parent popover doesn't
@ -160,7 +146,7 @@ export default function usePopover(
<></>
)
return {node, open, close, toggle, isOpen: state.isOpen}
return [node, open, close, state.isOpen]
}
/**

13
theatre/studio/src/uiComponents/useOnClickOutside.ts
View file

@ -2,24 +2,15 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
import {useEffect} from 'react'
export default function useOnClickOutside(
container: Element | null | (Element | null)[],
container: Element | null,
onOutside: (e: MouseEvent) => void,
enabled?: boolean,
// Can be used e.g. to prevent unexpected closing-reopening when clicking on a
// popover's trigger.
) {
useEffect(() => {
if (!container || enabled === false) return
const containers = Array.isArray(container)
? (container.filter((container) => container) as Element[])
: [container]
const onMouseDown = (e: MouseEvent) => {
if (
containers.every((container) => !e.composedPath().includes(container))
) {
console.log('outside')
if (!e.composedPath().includes(container)) {
onOutside(e)
}
}