Skip to content

Commit

Permalink
fix #369: pointerEvents="listener" makes uikit elements not interacta…
Browse files Browse the repository at this point in the history 
…ble anymore (requires uikit >= 0.8.2 or < 0.7.0)
  • Loading branch information
@bbohlender
bbohlender committed Nov 5, 2024
1 parent 19aaf82 commit effe4e5
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 202 deletions.
187 changes: 23 additions & 164 deletions examples/uikit/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,175 +1,34 @@
import { Canvas } from '@react-three/fiber'
import { createXRStore, noEvents, PointerEvents, XR, XROrigin } from '@react-three/xr'
import { Environment } from '@react-three/drei'
import { Container, Text, Image, Root, setPreferredColorScheme } from '@react-three/uikit'
import { Button, Slider } from '@react-three/uikit-default'
import {
ArrowLeftIcon,
ArrowRightIcon,
ConstructionIcon,
ExpandIcon,
MenuIcon,
PlayIcon,
} from '@react-three/uikit-lucide'
import { useState } from 'react'
import { useControls } from 'leva'
import { createXRStore, noEvents, PointerEvents, XR } from '@react-three/xr'
import { Container, Fullscreen } from '@react-three/uikit'
import { useEffect, useRef } from 'react'

const store = createXRStore({
hand: {
teleportPointer: true,
},
controller: {
teleportPointer: true,
},
})

setPreferredColorScheme('dark')
const store = createXRStore()

export function App() {
const [counter, setCounter] = useState(0)
const { visible } = useControls({ visible: true })
const ref = useRef(null)
useEffect(() => console.log(ref), [])
return (
<>
<button onClick={() => store.enterAR()}>Enter AR</button>
<Canvas events={noEvents} style={{ width: '100%', flexGrow: 1 }}>
<PointerEvents batchEvents={false} />
<XR store={store}>
<XROrigin visible={visible} />
<Environment preset="city" />

<group pointerEventsType={{ deny: 'grab' }} position={[0, 1.5, -0.5]}>
<Root
dark={{ backgroundColor: 'rgb(31,41,55)' }}
flexDirection="column"
pixelSize={0.005}
height="auto"
maxHeight={200}
width="100%"
backgroundColor="rgb(255,255,255)"
borderRadius={8}
overflow="scroll"
>
<Container
dark={{ backgroundColor: 'rgb(55,65,81)' }}
display="flex"
justifyContent="space-between"
alignItems="center"
flexShrink={0}
borderTopLeftRadius={8}
borderTopRightRadius={8}
backgroundColor="rgb(243,244,246)"
paddingLeft={16}
paddingRight={16}
paddingTop={8}
paddingBottom={8}
>
<Text
fontSize={18}
fontWeight={500}
lineHeight={28}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
flexDirection="column"
>
Music Player
</Text>
<Container display="flex" flexDirection="row" gapColumn={8}>
<ExpandIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
<ConstructionIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
<MenuIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Container>
</Container>
<Container flexShrink={0} display="flex" flexDirection="column" gapRow={16} padding={16}>
<Container display="flex" alignItems="center" flexDirection="row" gapColumn={16}>
<Image height={64} src="placeholder.svg" width={64} flexDirection="column"></Image>
<Container flexGrow={1} flexShrink={1} flexBasis="0%" flexDirection="column" gapRow={4}>
<Text
fontSize={18}
fontWeight={500}
lineHeight={28}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
flexDirection="column"
>
Blowin' in the Wind
</Text>
<Text
fontSize={14}
lineHeight={20}
color="rgb(107,114,128)"
dark={{ color: 'rgb(156,163,175)' }}
flexDirection="column"
>
Bob Dylan {counter.toString()}
</Text>
</Container>
</Container>
<Slider />
<Container display="flex" alignItems="center" justifyContent="space-between">
<Button size="icon" variant="ghost">
<ArrowLeftIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Button>
<Button onClick={() => setCounter((c) => c + 1)} size="icon" variant="ghost" padding={8}>
<PlayIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Button>
<Button size="icon" variant="ghost">
<ArrowRightIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Button>
</Container>
</Container>
<Container flexShrink={0} padding={16} flexDirection="column">
<Text
fontSize={18}
fontWeight={500}
lineHeight={28}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
marginBottom={8}
flexDirection="column"
>
Playlist
</Text>
<Container flexDirection="column" gapRow={8}>
<Container display="flex" alignItems="center" justifyContent="space-between">
<Text
fontSize={14}
lineHeight={20}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
flexDirection="column"
>
Like a Rolling Stone
</Text>
<PlayIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Container>
<Container display="flex" alignItems="center" justifyContent="space-between">
<Text
fontSize={14}
lineHeight={20}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
flexDirection="column"
>
The Times They Are a-Changin'
</Text>
<PlayIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Container>
<Container display="flex" alignItems="center" justifyContent="space-between">
<Text
fontSize={14}
lineHeight={20}
color="rgb(17,24,39)"
dark={{ color: 'rgb(243,244,246)' }}
flexDirection="column"
>
Subterranean Homesick Blues
</Text>
<PlayIcon color="rgb(17,24,39)" dark={{ color: 'rgb(243,244,246)' }} />
</Container>
</Container>
</Container>
</Root>
</group>
<Canvas events={noEvents}>
<PointerEvents />
<XR store={createXRStore()}>
<Fullscreen pointerEvents="listener">
<Container
ref={ref}
width={50}
height={50}
// This will not fire with pointerEvents="listener"
onClick={() => console.log('click container')}
backgroundColor="red"
/>
</Fullscreen>
<mesh onClick={() => console.log('click box')}>
<boxGeometry />
<meshNormalMaterial />
</mesh>
</XR>
</Canvas>
</>
Expand Down
26 changes: 13 additions & 13 deletions examples/uikit/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"dependencies": {
"@pmndrs/pointer-events": "workspace:^",
"@react-three/drei": "^9.108.3",
"@react-three/uikit": "^0.7.1",
"@react-three/uikit-default": "^0.7.1",
"@react-three/uikit-lucide": "^0.7.1",
"@react-three/xr": "workspace:^",
"leva": "^0.9.35"
},
"scripts": {
"dev": "vite --host"
}
}
"dependencies": {
"@pmndrs/pointer-events": "workspace:^",
"@react-three/drei": "^9.108.3",
"@react-three/uikit": "^0.8.2",
"@react-three/uikit-default": "^0.8.2",
"@react-three/uikit-lucide": "^0.8.2",
"@react-three/xr": "workspace:^",
"leva": "^0.9.35"
},
"scripts": {
"dev": "vite --host"
}
}
11 changes: 7 additions & 4 deletions packages/pointer-events/src/intersections/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,14 +106,17 @@ export function intersectPointerEventTargets(
}
}

function hasObjectListeners({ _listeners, __r3f }: Object3D): boolean {
if (__r3f != null && __r3f?.eventCount > 0) {
function hasObjectListeners(object: Object3D): boolean {
if (object.ancestorsHaveListeners) {
return true
}
if (_listeners == null) {
if (object.__r3f != null && object.__r3f?.eventCount > 0) {
return true
}
if (object._listeners == null) {
return false
}
const entries = Object.entries(_listeners)
const entries = Object.entries(object._listeners)
const length = entries.length
for (let i = 0; i < length; i++) {
const entry = entries[i]
Expand Down
1 change: 1 addition & 0 deletions packages/pointer-events/src/pointer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ declare module 'three' {

intersectChildren?: boolean
interactableDescendants?: Array<Object3D>
ancestorsHaveListeners?: boolean
}
}

Expand Down
42 changes: 21 additions & 21 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit effe4e5

Please sign in to comment.