performance upgrades and required changes such as propagating pointer…

… event properties manually inside the UI
pmndrs · Nov 1, 2024 · f2da9f0 · f2da9f0
1 parent 9b95d71
commit f2da9f0
Show file tree

Hide file tree

Showing 28 changed files with 497 additions and 233 deletions.
diff --git a/examples/apfel/package.json b/examples/apfel/package.json
@@ -12,7 +12,7 @@
     "maath": "^0.10.7",
     "r3f-perf": "^7.1.2",
     "react-dom": "^18.2.0",
-    "@pmndrs/pointer-events": "6.2.1"
+    "@react-three/xr": "6.4.0"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/apfel/src/App.tsx b/examples/apfel/src/App.tsx
@@ -1,11 +1,11 @@
-import { Canvas, useThree } from '@react-three/fiber'
+import { Canvas } from '@react-three/fiber'
 import { Fullscreen, Text, Container } from '@react-three/uikit'
 import { Copy } from '@react-three/uikit-lucide'
 import { Card } from '@/card.js'
 import { Button } from '@/button.js'
 import { Tabs, TabsButton } from '@/tabs.js'
 import { Defaults } from '@/theme.js'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { TextOnCard } from './components/card.js'
 import { CheckboxOnCard } from './components/checkbox.js'
 import { ButtonsOnCard } from './components/button.js'
@@ -16,7 +16,7 @@ import { TabBarWithText } from './components/tab-bar.js'
 import { ProgressBarsOnCard } from './components/progress.js'
 import { LoadingSpinnersOnCard } from './components/loading.js'
 import { InputsOnCard } from './components/input.js'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 const componentPages = {
   card: TextOnCard,
@@ -49,12 +49,8 @@ export default function App() {
   }
   const ComponentPage = componentPages[component]
   return (
-    <Canvas
-      events={() => ({ enabled: false, priority: 0 })}
-      style={{ height: '100dvh', touchAction: 'none' }}
-      gl={{ localClippingEnabled: true }}
-    >
-      <SwitchToXRPointerEvents />
+    <Canvas events={noEvents} style={{ height: '100dvh', touchAction: 'none' }} gl={{ localClippingEnabled: true }}>
+      <PointerEvents />
       <color attach="background" args={['black']} />
       <ambientLight intensity={0.5} />
       <directionalLight intensity={1} position={[-5, 5, 10]} />
@@ -103,11 +99,3 @@ export default function App() {
     </Canvas>
   )
 }
-
-function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, camera, scene), [domElement, camera, scene])
-  return null
-}
diff --git a/examples/dashboard/package.json b/examples/dashboard/package.json
@@ -9,7 +9,7 @@
     "react-dom": "^18.2.0",
     "vite-plugin-mkcert": "^1.17.4",
     "zustand": "^4.4.7",
-    "@pmndrs/pointer-events": "6.2.1"
+    "@react-three/xr": "6.4.0"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/dashboard/src/App.tsx b/examples/dashboard/src/App.tsx
@@ -15,7 +15,7 @@ import { RecentSales } from './components/RecentSales.js'
 import { TeamSwitcher } from './components/TeamSwitcher.js'
 import { UserNav } from './components/UserNav.js'
 import { create } from 'zustand'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 setPreferredColorScheme('light')
 
@@ -27,7 +27,7 @@ export default function App() {
     <>
       <FrameCounter />
       <Canvas
-        events={() => ({ enabled: false, priority: 0 })}
+        events={noEvents}
         frameloop="demand"
         flat
         camera={{ position: [0, 0, 18], fov: 35, zoom: 100 }}
@@ -36,7 +36,7 @@ export default function App() {
         orthographic
       >
         <CountFrames />
-        <SwitchToXRPointerEvents />
+        <PointerEvents />
         <Fullscreen distanceToCamera={1} backgroundColor={0xffffff} dark={{ backgroundColor: 0x0 }}>
           <Defaults>
             <DialogAnchor>
@@ -260,11 +260,3 @@ export function DashboardPage({ open, setOpen }: { open: boolean; setOpen: (open
     </Container>
   )
 }
-
-function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, camera, scene), [domElement, camera, scene])
-  return null
-}
diff --git a/examples/default/package.json b/examples/default/package.json
@@ -7,7 +7,7 @@
     "@react-three/uikit-lucide": "workspace:^",
     "r3f-perf": "^7.1.2",
     "react-dom": "^18.2.0",
-    "@pmndrs/pointer-events": "6.2.1"
+    "@react-three/xr": "6.4.0"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/default/src/App.tsx b/examples/default/src/App.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-import { Canvas, useThree } from '@react-three/fiber'
-import { Fullscreen, Text, Container, getPreferredColorScheme, setPreferredColorScheme } from '@react-three/uikit'
+import { useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { Fullscreen, Text, getPreferredColorScheme, setPreferredColorScheme } from '@react-three/uikit'
 import { Copy, Moon, Sun, SunMoon } from '@react-three/uikit-lucide'
 
 import { Defaults, colors } from '@/theme.js'
@@ -32,7 +32,7 @@ import { ToggleGroupDemo } from './components/toggle-group.js'
 import InputDemo from './components/input.js'
 import TextareDemo from './components/textarea.js'
 import { VideoDemo } from './components/video.js'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 const componentPages = {
   accordion: AccordionDemo,
@@ -80,12 +80,8 @@ export default function App() {
   }
   const [pcs, updatePCS] = useState(() => getPreferredColorScheme())
   return (
-    <Canvas
-      events={() => ({ enabled: false, priority: 0 })}
-      style={{ height: '100dvh', touchAction: 'none' }}
-      gl={{ localClippingEnabled: true }}
-    >
-      <SwitchToXRPointerEvents />
+    <Canvas events={noEvents} style={{ height: '100dvh', touchAction: 'none' }} gl={{ localClippingEnabled: true }}>
+      <PointerEvents />
       <color attach="background" args={['black']} />
       <ambientLight intensity={0.5} />
       <directionalLight intensity={0} position={[5, 1, 10]} />
@@ -149,11 +145,3 @@ export default function App() {
     </Canvas>
   )
 }
-
-function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, camera, scene), [domElement, camera, scene])
-  return null
-}
diff --git a/examples/performance/package.json b/examples/performance/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "dependencies": {
-    "@pmndrs/pointer-events": "^6.2.19",
+    "@react-three/xr": "^6.4.0",
     "@preact/signals-core": "^1.5.1",
     "@react-three/drei": "^9.96.1",
     "@react-three/uikit": "workspace:^",

diff --git a/examples/performance/src/App.tsx b/examples/performance/src/App.tsx
@@ -1,50 +1,42 @@
-import { Canvas, useThree } from '@react-three/fiber'
+import { Canvas } from '@react-three/fiber'
 import { DefaultProperties, Container, Text, Root } from '@react-three/uikit'
 import { OrbitControls } from '@react-three/drei'
 import { Perf } from 'r3f-perf'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
-import { useEffect } from 'react'
-
-//events={() => ({ enabled: false, priority: 0 })}
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 export default function App() {
   return (
-    <Canvas
-      events={() => ({ enabled: false, priority: 0 })}
-      style={{ height: '100dvh', touchAction: 'none' }}
-      gl={{ localClippingEnabled: true }}
-    >
+    <Canvas events={noEvents} style={{ height: '100dvh', touchAction: 'none' }} gl={{ localClippingEnabled: true }}>
       <color attach="background" args={['black']} />
-      <SwitchToXRPointerEvents />
+      <PointerEvents />
       <OrbitControls />
       <Perf />
       <Root width={1920 * 2} positionType="relative">
         <DefaultProperties fontSize={4}>
           <Container positionType="absolute" gap={1} flexWrap="wrap" inset={0}>
-            {new Array(20000).fill(null).map((_, i) => (
-              <Container
-                key={i}
-                padding={2}
-                borderRadius={Math.random() * 5}
-                backgroundColor={Math.random() * 0xffffff}
-                borderWidth={Math.random() * 1}
-                borderColor={Math.random() * 0xffffff}
-                onClick={() => console.log('what up?')}
-              >
-                <Text>Hello World</Text>
-              </Container>
-            ))}
+            {new Array(20000).fill(null).map((_, i) => {
+              const borderWidth = Math.random() * 1
+              return (
+                <Container
+                  key={i}
+                  borderRadius={Math.random() * 5}
+                  backgroundColor={Math.random() * 0xffffff}
+                  borderWidth={borderWidth}
+                  borderColor={Math.random() * 0xffffff}
+                  height={4 + 4 + 2 * borderWidth}
+                  padding={2}
+                  pointerEvents="none"
+                  hover={{ backgroundColor: 'white', borderColor: 'black' }}
+                >
+                  <Text pointerEvents="auto" hover={{ color: 'red' }}>
+                    Hello World
+                  </Text>
+                </Container>
+              )
+            })}
           </Container>
         </DefaultProperties>
       </Root>
     </Canvas>
   )
 }
-
-function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, camera, scene), [domElement, camera, scene])
-  return null
-}
diff --git a/examples/performance/vite.config.ts b/examples/performance/vite.config.ts
@@ -6,7 +6,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   optimizeDeps: {
-    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+    include: ['@react-three/uikit'],
   },
   base: '/uikit/examples/performance/',
   resolve: {

diff --git a/examples/uikit/package.json b/examples/uikit/package.json
@@ -1,7 +1,7 @@
 {
   "type": "module",
   "dependencies": {
-    "@pmndrs/pointer-events": "^6.2.1",
+    "@react-three/xr": "^6.4.0",
     "@preact/signals-core": "^1.5.1",
     "@react-three/drei": "^9.96.1",
     "@react-three/uikit": "workspace:^",

diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
@@ -22,8 +22,8 @@ import {
 } from '@react-three/uikit'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
-import { forwardHtmlEvents } from '@pmndrs/pointer-events'
 import { Perf } from 'r3f-perf'
+import { noEvents, PointerEvents } from '@react-three/xr'
 
 export default function App() {
   const texture = useMemo(() => signal<Texture | undefined>(undefined), [])
@@ -60,12 +60,12 @@ export default function App() {
         <source src="./video.mp4" />
       </video>
       <Canvas
-        events={() => ({ enabled: false, priority: 0 })}
+        events={noEvents}
         style={{ height: '100dvh', touchAction: 'none' }}
         gl={{ localClippingEnabled: true }}
         onClick={() => setShow((s) => !s)}
       >
-        <SwitchToXRPointerEvents />
+        <PointerEvents />
         <MeasureText />
         <OrbitControls />
         <Box />
@@ -377,11 +377,3 @@ function MeasureText() {
           </DefaultProperties>
         </Root>
  */
-
-export function SwitchToXRPointerEvents() {
-  const domElement = useThree((s) => s.gl.domElement)
-  const camera = useThree((s) => s.camera)
-  const scene = useThree((s) => s.scene)
-  useEffect(() => forwardHtmlEvents(domElement, camera, scene), [domElement, camera, scene])
-  return null
-}
diff --git a/packages/react/src/container.tsx b/packages/react/src/container.tsx
@@ -12,6 +12,7 @@ import {
   PointerEventsProperties,
 } from '@pmndrs/uikit/internals'
 import { ComponentInternals, useComponentInternals } from './ref.js'
+import { DefaultProperties } from './default.js'
 
 export type ContainerProperties = {
   name?: string
@@ -54,7 +55,9 @@ export const Container: (
     <AddHandlers properties={properties} handlers={internals.handlers} ref={outerRef}>
       <primitive object={internals.interactionPanel} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
-        <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        <DefaultProperties {...internals.pointerEventsProperties}>
+          <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        </DefaultProperties>
       </object3D>
     </AddHandlers>
   )

diff --git a/packages/react/src/image.tsx b/packages/react/src/image.tsx
@@ -12,6 +12,7 @@ import { AddHandlers, usePropertySignals } from './utilts.js'
 import { ParentProvider, useParent } from './context.js'
 import { ComponentInternals, useComponentInternals } from './ref.js'
 import type { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events.js'
+import { DefaultProperties } from './default.js'
 
 export type ImageProperties = BaseImageProperties &
   EventHandlers & {
@@ -54,7 +55,9 @@ export const Image: (
     <AddHandlers properties={properties} ref={outerRef} handlers={internals.handlers}>
       <primitive object={internals.interactionPanel} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
-        <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        <DefaultProperties {...internals.pointerEventsProperties}>
+          <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        </DefaultProperties>
       </object3D>
     </AddHandlers>
   )

diff --git a/packages/react/src/root.tsx b/packages/react/src/root.tsx
@@ -18,6 +18,7 @@ import {
 import { Object3D } from 'three'
 import { ComponentInternals, useComponentInternals } from './ref.js'
 import { Signal, computed, signal } from '@preact/signals-core'
+import { DefaultProperties } from './default.js'
 
 export type RootProperties = BaseRootProperties &
   WithReactive<{ pixelSize?: number }> & {
@@ -90,7 +91,9 @@ export const Root: (
     <AddHandlers properties={properties} handlers={internals.handlers} ref={outerRef}>
       <primitive object={internals.interactionPanel} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
-        <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        <DefaultProperties {...internals.pointerEventsProperties}>
+          <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        </DefaultProperties>
       </object3D>
     </AddHandlers>
   )

diff --git a/packages/react/src/svg.tsx b/packages/react/src/svg.tsx
@@ -12,6 +12,7 @@ import { AddHandlers, usePropertySignals } from './utilts.js'
 import { ParentProvider, useParent } from './context.js'
 import { ComponentInternals, useComponentInternals } from './ref.js'
 import type { EventHandlers } from '@react-three/fiber/dist/declarations/src/core/events.js'
+import { DefaultProperties } from './default.js'
 
 export type SvgProperties = BaseSvgProperties &
   EventHandlers & {
@@ -47,7 +48,9 @@ export const Svg: (
       <primitive object={internals.interactionPanel} />
       <primitive object={internals.centerGroup} />
       <object3D matrixAutoUpdate={false} ref={innerRef}>
-        <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        <DefaultProperties {...internals.pointerEventsProperties}>
+          <ParentProvider value={internals}>{properties.children}</ParentProvider>
+        </DefaultProperties>
       </object3D>
     </AddHandlers>
   )