fix: #23 - hitbox for close button incorrect

pmndrs · Mar 19, 2024 · 2a28f5b · 2a28f5b
1 parent 1e2b12b
commit 2a28f5b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/examples/dashboard/src/App.tsx b/examples/dashboard/src/App.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/tabs'
 import { DialogAnchor } from '@/dialog'
-
+import { noEvents, XWebPointers } from '@coconut-xr/xinteraction/react'
 import { CalendarDateRangePicker } from './components/DateRangePicker'
 import { MainNav } from './components/MainNav'
 import { Overview } from './components/Overview'
@@ -22,11 +22,13 @@ export default function App() {
   const [open, setOpen] = useState(false)
   return (
     <Canvas
+      events={noEvents}
       flat
       camera={{ position: [0, 0, 18], fov: 35 }}
       style={{ height: '100dvh', touchAction: 'none' }}
       gl={{ localClippingEnabled: true }}
     >
+      <XWebPointers />
       <Fullscreen backgroundColor={0xffffff} dark={{ backgroundColor: 0x0 }}>
         <Defaults>
           <DialogAnchor>

diff --git a/examples/dashboard/src/components/UserNav.tsx b/examples/dashboard/src/components/UserNav.tsx
@@ -1,4 +1,4 @@
-import { Text, Container, CustomContainer } from '@react-three/uikit'
+import { Text, Container } from '@react-three/uikit'
 import { BellRing } from '@react-three/uikit-lucide'
 import { Avatar } from '@/avatar'
 import { Button } from '@/button'
@@ -36,9 +36,6 @@ export function UserNav({ open, setOpen }: { open: boolean; setOpen: (open: bool
         <Avatar cursor="pointer" src="/uikit/examples/dashboard/01.png" height={32} width={32} />
       </DialogTrigger>
       <DialogContent positionType="relative" transformTranslateZ={200} sm={{ maxWidth: 425 }}>
-        <CustomContainer transformTranslateZ={-1} positionType="absolute" inset={0}>
-          <meshBasicMaterial colorWrite={false} />
-        </CustomContainer>
         <DialogHeader>
           <DialogTitle>
             <Text>Edit profile</Text>

diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
@@ -6,7 +6,6 @@ import {
   DefaultProperties,
   Container,
   Content,
-  CustomContainer,
   Svg,
   Text,
   Image,
@@ -84,9 +83,6 @@ export default function App() {
             width={300}
             height={100}
           />
-          <CustomContainer transformRotateZ={45} height={200} width={4}>
-            <meshPhongMaterial depthWrite={false} transparent color="green" />
-          </CustomContainer>
           <Content
             height={200}
             width={200}

diff --git a/packages/kits/default/dialog.tsx b/packages/kits/default/dialog.tsx
@@ -116,6 +116,8 @@ export function DialogOverlay(props: ComponentPropsWithoutRef<typeof Container>)
   return (
     <Container
       onPointerMove={(e) => e.stopPropagation()}
+      onPointerEnter={(e) => e.stopPropagation()}
+      onPointerLeave={(e) => e.stopPropagation()}
       onWheel={(e) => e.stopPropagation()}
       positionType="absolute"
       inset={0}
@@ -169,6 +171,7 @@ export function DialogContent({ children, sm, ...props }: ComponentPropsWithoutR
             onClick={close}
             cursor="pointer"
             positionType="absolute"
+            zIndexOffset={50}
             positionRight={16}
             positionTop={16}
             borderRadius={2}

diff --git a/packages/uikit/src/components/custom.tsx b/packages/uikit/src/components/custom.tsx
@@ -114,17 +114,19 @@ export const CustomContainer = forwardRef<
       hoverHandlers={hoverHandlers}
       activeHandlers={activeHandlers}
     >
-      <mesh
-        receiveShadow={properties.receiveShadow}
-        castShadow={properties.castShadow}
-        customDepthMaterial={properties.customDepthMaterial}
-        customDistanceMaterial={properties.customDistanceMaterial}
-        ref={meshRef}
-        matrixAutoUpdate={false}
-        geometry={panelGeometry}
-      >
-        <FlexProvider value={undefined as any}>{properties.children}</FlexProvider>
-      </mesh>
+      <FlexProvider value={undefined as any}>
+        <mesh
+          receiveShadow={properties.receiveShadow}
+          castShadow={properties.castShadow}
+          customDepthMaterial={properties.customDepthMaterial}
+          customDistanceMaterial={properties.customDistanceMaterial}
+          ref={meshRef}
+          matrixAutoUpdate={false}
+          geometry={panelGeometry}
+        >
+          {properties.children}
+        </mesh>
+      </FlexProvider>
     </InteractionGroup>
   )
 })