fix: minor TS issue & use normal setup directly in story

pmndrs · Feb 3, 2021 · 48da7af · 48da7af
1 parent 9541256
commit 48da7af
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/.storybook/stories/PointerLockControls.stories.tsx b/.storybook/stories/PointerLockControls.stories.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { Vector3 } from 'three'
 import { Canvas } from 'react-three-fiber'
 
+import { Setup } from '../Setup'
+
 import { PointerLockControls, Icosahedron } from '../../src'
 
 export default {
@@ -49,12 +50,10 @@ function Icosahedrons() {
 function PointerLockControlsScene() {
   return (
     <>
-      <Canvas colorManagement shadowMap camera={{ position: [0, 0, 10] }} pixelRatio={window.devicePixelRatio}>
+      <Setup controls={false} camera={{ position: [0, 0, 10] }}>
         <Icosahedrons />
         <PointerLockControls />
-        <ambientLight intensity={0.8} />
-        <pointLight intensity={1} position={[0, 6, 0]} />
-      </Canvas>
+      </Setup>
     </>
   )
 }
@@ -79,12 +78,10 @@ function PointerLockControlsSceneWithSelector() {
       >
         Click here to play
       </div>
-      <Canvas colorManagement shadowMap camera={{ position: [0, 0, 10] }} pixelRatio={window.devicePixelRatio}>
+      <Setup controls={false} camera={{ position: [0, 0, 10] }}>
         <Icosahedrons />
         <PointerLockControls selector="#instructions" />
-        <ambientLight intensity={0.8} />
-        <pointLight intensity={1} position={[0, 6, 0]} />
-      </Canvas>
+      </Setup>
     </>
   )
 }

diff --git a/src/core/PointerLockControls.tsx b/src/core/PointerLockControls.tsx
@@ -5,27 +5,27 @@ import useEffectfulState from '../helpers/useEffectfulState'
 
 export type PointerLockControls = ReactThreeFiber.Object3DNode<PointerLockControlsImpl, typeof PointerLockControlsImpl>
 
-export const PointerLockControls = React.forwardRef(
-  ({ selector, ...props }: { selector: string } & PointerLockControls, ref) => {
-    const { camera, gl, invalidate } = useThree()
-    const controls = useEffectfulState(
-      () => new PointerLockControlsImpl(camera, gl.domElement),
-      [camera, gl.domElement],
-      ref as any
-    )
+export type PointerLockControlsProps = PointerLockControls & { selector?: string }
 
-    React.useEffect(() => {
-      controls?.addEventListener?.('change', invalidate)
-      return () => controls?.removeEventListener?.('change', invalidate)
-    }, [controls, invalidate])
+export const PointerLockControls = React.forwardRef(({ selector, ...props }: PointerLockControlsProps, ref) => {
+  const { camera, gl, invalidate } = useThree()
+  const controls = useEffectfulState(
+    () => new PointerLockControlsImpl(camera, gl.domElement),
+    [camera, gl.domElement],
+    ref as any
+  )
 
-    React.useEffect(() => {
-      const handler = () => controls?.lock()
-      const element = selector ? document.querySelector(selector) : document
-      element && element.addEventListener('click', handler)
-      return () => (element ? element.removeEventListener('click', handler) : undefined)
-    }, [controls, selector])
+  React.useEffect(() => {
+    controls?.addEventListener?.('change', invalidate)
+    return () => controls?.removeEventListener?.('change', invalidate)
+  }, [controls, invalidate])
 
-    return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
-  }
-)
+  React.useEffect(() => {
+    const handler = () => controls?.lock()
+    const element = selector ? document.querySelector(selector) : document
+    element && element.addEventListener('click', handler)
+    return () => (element ? element.removeEventListener('click', handler) : undefined)
+  }, [controls, selector])
+
+  return controls ? <primitive dispose={undefined} object={controls} {...props} /> : null
+})