Fix popover behavior when popover is open and the trigger is clicked (t…

…heatre-js#211) * 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
ehtick · Sep 14, 2022 · 743254a · 743254a
1 parent 8680f9d
commit 743254a
Show file tree

Hide file tree

Showing 17 changed files with 169 additions and 128 deletions.
diff --git a/packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx b/packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx
@@ -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'
 

diff --git a/theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx b/theatre/studio/src/panels/DetailPanel/ProjectDetails.tsx
@@ -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}

diff --git a/...heet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.tsx b/...heet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeConnector.tsx
@@ -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}

diff --git a/.../DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.tsx b/.../DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeDot.tsx
@@ -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,15 +135,15 @@ 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}
         isAllHere={cur.allHere}
         isSelected={cur.selected}
       />
       {contextMenu}
-      {inlineEditorPopover}
+      {inlineEditorPopover.node}
     </>
   )
 }

diff --git a/...EditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx b/...EditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/BasicKeyframeConnector.tsx
@@ -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}

diff --git a/...uenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx b/...uenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
@@ -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)
 

diff --git a/...io/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx b/...io/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthEditorPopover.tsx
@@ -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>

diff --git a/...studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx b/...studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx
@@ -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')}
             >

diff --git a/...nceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx b/...nceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotNonScalar.tsx
@@ -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}
     </>
   )

diff --git a/...quenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx b/...quenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/GraphEditorDotScalar.tsx
@@ -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}
     </>
   )

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
@@ -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!)
           },
         }
       },