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

Fix popover behavior when popover is open and the trigger is clicked (#211)

Browse source 
* Fix popover behavior when open and clicking on trigger

* Remove console log

* Resolve merge conflicts

* Remove destructuring in favor of property access

* Extract usePopover return type into an interface

* Fix merge
This commit is contained in:
Andrew Prifer 2022-09-14 20:05:09 +07:00 committed by GitHub
parent 8680f9d89e
commit 743254a6c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 169 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx
View file

@ -1,8 +1,8 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import type {ISheetObject} from '@theatre/core';
import { onChange, types, val} from '@theatre/core'
import type {ISheetObject} from '@theatre/core'
import {onChange, types, val} from '@theatre/core'
import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'

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

@ -62,7 +62,7 @@ const ProjectDetails: React.FC<{
}, 40000)
}, [])
const [tooltip, openExportTooltip] = usePopover(
const exportTooltip = usePopover(
{debugName: 'ProjectDetails', pointerDistanceThreshold: 50},
() => (
<ExportTooltip>
@ -81,13 +81,13 @@ const ProjectDetails: React.FC<{
return (
<>
{tooltip}
{exportTooltip.node}
<Container>
<StateConflictRow projectId={projectId} />
<TheExportRow>
<DetailPanelButton
onMouseEnter={(e) =>
openExportTooltip(e, e.target as unknown as HTMLButtonElement)
exportTooltip.open(e, e.target as unknown as HTMLButtonElement)
}
onClick={!downloaded ? exportProject : undefined}
disabled={downloaded}

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

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

19
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.tsx
View file

@ -99,14 +99,13 @@ export function AggregateKeyframeDot(
const logger = useLogger('AggregateKeyframeDot')
const {cur} = props.utils
const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
useKeyframeInlineEditorPopover(
props.editorProps.viewModel.type === 'sheetObject'
? sheetObjectBuild(props.editorProps.viewModel, cur.keyframes)
?.children ?? null
: propWithChildrenBuild(props.editorProps.viewModel, cur.keyframes)
?.children ?? null,
)
const inlineEditorPopover = useKeyframeInlineEditorPopover(
props.editorProps.viewModel.type === 'sheetObject'
? sheetObjectBuild(props.editorProps.viewModel, cur.keyframes)
?.children ?? null
: propWithChildrenBuild(props.editorProps.viewModel, cur.keyframes)
?.children ?? null,
)
const presence = usePresence(props.utils.itemKey)
presence.useRelations(
@ -136,7 +135,7 @@ export function AggregateKeyframeDot(
// Need this for the dragging logic to be able to get the keyframe props
// based on the position.
{...DopeSnap.includePositionSnapAttrs(cur.position)}
onClick={(e) => openEditor(e, ref.current!)}
onClick={(e) => inlineEditorPopover.open(e, ref.current!)}
/>
<AggregateKeyframeVisualDot
flag={presence.flag}
@ -144,7 +143,7 @@ export function AggregateKeyframeDot(
isSelected={cur.selected}
/>
{contextMenu}
{inlineEditorPopover}
{inlineEditorPopover.node}
</>
)
}

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

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

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

@ -101,20 +101,23 @@ const SingleKeyframeDot: React.VFC<ISingleKeyframeDotProps> = (props) => {
const [ref, node] = useRefAndState<HTMLDivElement | null>(null)
const [contextMenu] = useSingleKeyframeContextMenu(node, logger, props)
const [inlineEditorPopover, openEditor, _, isInlineEditorPopoverOpen] =
useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.leaf.pathToProp,
propConfig: props.leaf.propConf,
sheetObject: props.leaf.sheetObject,
trackId: props.leaf.trackId,
},
])
const {
node: inlineEditorPopover,
toggle: toggleEditor,
isOpen: isInlineEditorPopoverOpen,
} = useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.leaf.pathToProp,
propConfig: props.leaf.propConf,
sheetObject: props.leaf.sheetObject,
trackId: props.leaf.trackId,
},
])
const [isDragging] = useDragForSingleKeyframeDot(node, props, {
onClickFromDrag(dragStartEvent) {
openEditor(dragStartEvent, ref.current!)
toggleEditor(dragStartEvent, ref.current!)
},
})
@ -213,6 +216,8 @@ function useDragForSingleKeyframeDot(
const propsRef = useRef(props)
propsRef.current = props
const {onClickFromDrag} = options
const useDragOpts = useMemo<UseDragOpts>(() => {
return {
debugName: 'KeyframeDot/useDragKeyframe',
@ -268,7 +273,7 @@ function useDragForSingleKeyframeDot(
return (
handlers && {
...handlers,
onClick: options.onClickFromDrag,
onClick: onClickFromDrag,
onDragEnd: (...args) => {
handlers.onDragEnd?.(...args)
snapToNone()
@ -324,12 +329,12 @@ function useDragForSingleKeyframeDot(
snapToNone()
},
onClick(ev) {
options.onClickFromDrag(ev)
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, onRequestClose}) => {
}> = ({layoutP}) => {
const sheet = useVal(layoutP.sheet)
const fns = useMemo(() => {
@ -89,7 +89,6 @@ const LengthEditorPopover: React.FC<{
{...fns}
isValid={greaterThanZero}
inputRef={inputRef}
onBlur={onRequestClose.bind(null, 'length editor number input blur')}
nudge={nudge}
/>
</Container>

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

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

28
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
View file

@ -70,24 +70,26 @@ const GraphEditorDotNonScalar: React.VFC<IProps> = (props) => {
const curValue = props.which === 'left' ? 0 : 1
const [inlineEditorPopover, openEditor, _, _isInlineEditorPopoverOpen] =
useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.pathToProp,
propConfig: props.propConfig,
sheetObject: props.sheetObject,
trackId: props.trackId,
},
])
const inlineEditorPopover = useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.pathToProp,
propConfig: props.propConfig,
sheetObject: props.sheetObject,
trackId: props.trackId,
},
])
const isDragging = useDragKeyframe({
node,
props,
// dragging does not work with also having a click listener
onDetectedClick: (event) =>
openEditor(event, event.target instanceof Element ? event.target : node!),
inlineEditorPopover.toggle(
event,
event.target instanceof Element ? event.target : node!,
),
})
const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue)
@ -114,7 +116,7 @@ const GraphEditorDotNonScalar: React.VFC<IProps> = (props) => {
fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
}}
/>
{inlineEditorPopover}
{inlineEditorPopover.node}
{contextMenu}
</>
)

28
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
View file

@ -70,24 +70,26 @@ const GraphEditorDotScalar: React.VFC<IProps> = (props) => {
const curValue = cur.value as number
const cyInExtremumSpace = props.extremumSpace.fromValueSpace(curValue)
const [inlineEditorPopover, openEditor, _, _isInlineEditorPopoverOpen] =
useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.pathToProp,
propConfig: props.propConfig,
sheetObject: props.sheetObject,
trackId: props.trackId,
},
])
const inlineEditorPopover = useKeyframeInlineEditorPopover([
{
type: 'primitiveProp',
keyframe: props.keyframe,
pathToProp: props.pathToProp,
propConfig: props.propConfig,
sheetObject: props.sheetObject,
trackId: props.trackId,
},
])
const isDragging = useDragKeyframe({
node,
props,
// dragging does not work with also having a click listener
onDetectedClick: (event) =>
openEditor(event, event.target instanceof Element ? event.target : node!),
inlineEditorPopover.toggle(
event,
event.target instanceof Element ? event.target : node!,
),
})
return (
@ -112,7 +114,7 @@ const GraphEditorDotScalar: React.VFC<IProps> = (props) => {
fill: presence.flag === PresenceFlag.Primary ? 'white' : undefined,
}}
/>
{inlineEditorPopover}
{inlineEditorPopover.node}
{contextMenu}
</>
)

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

@ -193,19 +193,20 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
}) => {
const [thumbRef, thumbNode] = useRefAndState<HTMLElement | null>(null)
const [popoverNode, openPopover, closePopover, isPopoverOpen] = usePopover(
{debugName: 'Playhead'},
() => {
return (
<BasicPopover>
<PlayheadPositionPopover
layoutP={layoutP}
onRequestClose={closePopover}
/>
</BasicPopover>
)
},
)
const {
node: popoverNode,
toggle: togglePopover,
close: closePopover,
} = usePopover({debugName: 'Playhead'}, () => {
return (
<BasicPopover>
<PlayheadPositionPopover
layoutP={layoutP}
onRequestClose={closePopover}
/>
</BasicPopover>
)
})
const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
return {
@ -236,7 +237,7 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
snapToNone()
},
onClick(e) {
openPopover(e, thumbRef.current!)
togglePopover(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, onRequestClose}) => {
}> = ({layoutP}) => {
const sheet = val(layoutP.sheet)
const sequence = sheet.getSequence()
@ -80,7 +80,6 @@ const PlayheadPositionPopover: React.FC<{
{...fns}
isValid={greaterThanOrEqualToZero}
inputRef={inputRef}
onBlur={onRequestClose.bind(null, 'number input blur')}
nudge={nudge}
/>
</Container>

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

@ -75,31 +75,28 @@ function RgbaPropEditor({
[editingTools],
)
const [popoverNode, openPopover] = usePopover(
{debugName: 'RgbaPropEditor'},
() => (
<RgbaPopover>
<RgbaColorPicker
color={{
r: value.r,
g: value.g,
b: value.b,
a: value.a,
}}
temporarilySetValue={(color) => {
const rgba = decorateRgba(color)
editingTools.temporarilySetValue(rgba)
}}
permanentlySetValue={(color) => {
// console.log('perm')
const rgba = decorateRgba(color)
editingTools.permanentlySetValue(rgba)
}}
discardTemporaryValue={editingTools.discardTemporaryValue}
/>
</RgbaPopover>
),
)
const popover = usePopover({debugName: 'RgbaPropEditor'}, () => (
<RgbaPopover>
<RgbaColorPicker
color={{
r: value.r,
g: value.g,
b: value.b,
a: value.a,
}}
temporarilySetValue={(color) => {
const rgba = decorateRgba(color)
editingTools.temporarilySetValue(rgba)
}}
permanentlySetValue={(color) => {
// console.log('perm')
const rgba = decorateRgba(color)
editingTools.permanentlySetValue(rgba)
}}
discardTemporaryValue={editingTools.discardTemporaryValue}
/>
</RgbaPopover>
))
return (
<>
@ -108,7 +105,7 @@ function RgbaPropEditor({
rgbaColor={value}
ref={containerRef}
onClick={(e) => {
openPopover(e, containerRef.current)
popover.toggle(e, containerRef.current)
}}
/>
<HexInput
@ -120,7 +117,7 @@ function RgbaPropEditor({
autoFocus={autoFocus}
/>
</RowContainer>
{popoverNode}
{popover.node}
</>
)
}

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

@ -58,7 +58,7 @@ const HasUpdatesBadge = styled.div`
`
const GroupDivider = styled.div`
position: abolute;
position: absolute;
height: 32px;
width: 1px;
background: #373b40;
@ -98,7 +98,7 @@ const GlobalToolbar: React.FC = () => {
const hasUpdates =
useVal(getStudio().atomP.ahistoric.updateChecker.result.hasUpdates) === true
const [moreMenu, openMoreMenu] = usePopover(
const moreMenu = usePopover(
() => {
const triggerBounds = moreMenuTriggerRef.current!.getBoundingClientRect()
return {
@ -166,11 +166,11 @@ const GlobalToolbar: React.FC = () => {
<ExtensionToolbar showLeftDivider toolbarId="global" />
</SubContainer>
<SubContainer>
{moreMenu}
{moreMenu.node}
<ToolbarIconButton
ref={moreMenuTriggerRef}
onClick={(e) => {
openMoreMenu(e, moreMenuTriggerRef.current!)
moreMenu.toggle(e, moreMenuTriggerRef.current!)
}}
>
<Ellipsis />

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

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

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

@ -48,10 +48,22 @@ type Opts = {
verticalGap?: number
}
export interface IPopover {
/**
* The React node of the popover. Insert into your JSX using \{node\}. Its state
* will be managed automatically.
*/
node: React.ReactNode
open: OpenFn
close: CloseFn
toggle: OpenFn
isOpen: boolean
}
export default function usePopover(
opts: Opts | (() => Opts),
render: () => React.ReactElement,
): [node: React.ReactNode, open: OpenFn, close: CloseFn, isOpen: boolean] {
): IPopover {
const _debug = (...args: any) => {}
// want to make sure that we don't close a popover when dragging something (like a curve editor handle)
@ -104,6 +116,14 @@ 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
@ -146,7 +166,7 @@ export default function usePopover(
<></>
)
return [node, open, close, state.isOpen]
return {node, open, close, toggle, isOpen: state.isOpen}
}
/**

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

@ -2,15 +2,23 @@ import type {$IntentionalAny} from '@theatre/shared/utils/types'
import {useEffect} from 'react'
export default function useOnClickOutside(
container: Element | null,
container: Element | null | (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 (!e.composedPath().includes(container)) {
if (
containers.every((container) => !e.composedPath().includes(container))
) {
onOutside(e)
}
}