feat: drag scrollbar

pmndrs · Aug 26, 2024 · 3170664 · 3170664
1 parent 9e1cc20
commit 3170664
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 59 deletions.
diff --git a/examples/uikit/package.json b/examples/uikit/package.json
@@ -1,6 +1,7 @@
 {
   "type": "module",
   "dependencies": {
+    "@pmndrs/pointer-events": "^6.2.1",
     "@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
@@ -1,5 +1,5 @@
 import { ComponentRef, StrictMode, Suspense, useEffect, useMemo, useRef, useState } from 'react'
-import { Canvas } from '@react-three/fiber'
+import { Canvas, useThree } from '@react-three/fiber'
 import { Box, OrbitControls, OrthographicCamera, RenderTexture } from '@react-three/drei'
 import { signal } from '@preact/signals-core'
 import {
@@ -16,12 +16,12 @@ import {
   FontFamilyProvider,
   ComponentInternals,
   ImageProperties,
-  canvasInputProps,
   Video,
   useMeasureText,
 } from '@react-three/uikit'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
+import { forwardHtmlEvents } from '@pmndrs/pointer-events'
 
 export default function App() {
   const texture = useMemo(() => signal<Texture | undefined>(undefined), [])
@@ -43,11 +43,12 @@ export default function App() {
         <source src="./video.mp4" />
       </video>
       <Canvas
-        {...canvasInputProps}
+        events={() => ({ enabled: false, priority: 0 })}
         frameloop="demand"
         style={{ height: '100dvh', touchAction: 'none' }}
         gl={{ localClippingEnabled: true }}
       >
+        <SwitchToXRPointerEvents />
         <MeasureText />
         <OrbitControls />
         <Box />
@@ -349,3 +350,11 @@ 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/uikit/src/components/container.ts b/packages/uikit/src/components/container.ts
@@ -34,6 +34,7 @@ import { createInteractionPanel } from '../panel/instanced-panel-mesh.js'
 import { Initializers } from '../utils.js'
 import { darkPropertyTransformers } from '../dark.js'
 import { getDefaultPanelMaterialConfig } from '../panel/index.js'
+import { computedInheritableProperty } from '../internals.js'
 
 export type InheritableContainerProperties = WithClasses<
   WithConditionals<
@@ -119,6 +120,7 @@ export function createContainer(
   const scrollPosition = createScrollPosition()
   applyScrollPosition(childrenContainer, scrollPosition, parentContext.root.pixelSize, initializers)
   const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, globalMatrix, parentContext.root.pixelSize)
+  const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
   createScrollbars(
     mergedProperties,
     scrollPosition,
@@ -128,6 +130,7 @@ export function createContainer(
     parentContext.clippingRect,
     orderInfo,
     parentContext.root.panelGroupManager,
+    scrollbarWidth,
     initializers,
   )
   const interactionPanel = createInteractionPanel(
@@ -142,7 +145,7 @@ export function createContainer(
     parentContext.anyAncestorScrollable,
     flexState,
     object,
-    interactionPanel,
+    scrollbarWidth,
     properties,
     parentContext.root,
     initializers,

diff --git a/packages/uikit/src/components/image.ts b/packages/uikit/src/components/image.ts
@@ -156,6 +156,7 @@ export function createImage(
   const scrollPosition = createScrollPosition()
   applyScrollPosition(childrenContainer, scrollPosition, parentContext.root.pixelSize, initializers)
   const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, globalMatrix, parentContext.root.pixelSize)
+  const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
   createScrollbars(
     mergedProperties,
     scrollPosition,
@@ -165,6 +166,7 @@ export function createImage(
     parentContext.clippingRect,
     orderInfo,
     parentContext.root.panelGroupManager,
+    scrollbarWidth,
     initializers,
   )
   const interactionPanel = createImageMesh(
@@ -182,7 +184,7 @@ export function createImage(
     parentContext.anyAncestorScrollable,
     flexState,
     object,
-    interactionPanel,
+    scrollbarWidth,
     properties,
     parentContext.root,
     initializers,

diff --git a/packages/uikit/src/components/root.ts b/packages/uikit/src/components/root.ts
@@ -173,6 +173,7 @@ export function createRoot(
   const scrollPosition = createScrollPosition()
   applyScrollPosition(childrenContainer, scrollPosition, pixelSize, initializers)
   const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, identityMatrix, pixelSize)
+  const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
   createScrollbars(
     mergedProperties,
     scrollPosition,
@@ -182,6 +183,7 @@ export function createRoot(
     undefined,
     orderInfo,
     panelGroupManager,
+    scrollbarWidth,
     initializers,
   )
 
@@ -210,7 +212,7 @@ export function createRoot(
     undefined,
     flexState,
     object,
-    interactionPanel,
+    scrollbarWidth,
     properties,
     ctx,
     initializers,

diff --git a/packages/uikit/src/components/svg.ts b/packages/uikit/src/components/svg.ts
@@ -53,6 +53,7 @@ import { SVGLoader, SVGResult } from 'three/examples/jsm/loaders/SVGLoader.js'
 import { darkPropertyTransformers } from '../dark.js'
 import { PanelGroupProperties, computedPanelGroupDependencies, getDefaultPanelMaterialConfig } from '../panel/index.js'
 import { KeepAspectRatioProperties } from './image.js'
+import { computedInheritableProperty } from '../internals.js'
 
 export type InheritableSvgProperties = WithClasses<
   WithConditionals<
@@ -170,6 +171,7 @@ export function createSvg(
   const scrollPosition = createScrollPosition()
   applyScrollPosition(childrenContainer, scrollPosition, parentContext.root.pixelSize, initializers)
   const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, globalMatrix, parentContext.root.pixelSize)
+  const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
   createScrollbars(
     mergedProperties,
     scrollPosition,
@@ -179,6 +181,7 @@ export function createSvg(
     parentContext.clippingRect,
     orderInfo,
     parentContext.root.panelGroupManager,
+    scrollbarWidth,
     initializers,
   )
 
@@ -195,7 +198,7 @@ export function createSvg(
     parentContext.anyAncestorScrollable,
     flexState,
     object,
-    interactionPanel,
+    scrollbarWidth,
     properties,
     parentContext.root,
     initializers,