From 48da7af283649d0dff94f5c21ca9b8e5534e5d56 Mon Sep 17 00:00:00 2001
From: Josh Ellis <joshua.ellis18@gmail.com>
Date: Wed, 3 Feb 2021 18:20:53 +0000
Subject: [PATCH] fix: minor TS issue & use normal setup directly in story

---
 .../stories/PointerLockControls.stories.tsx   | 15 +++----
 src/core/PointerLockControls.tsx              | 42 +++++++++----------
 2 files changed, 27 insertions(+), 30 deletions(-)

diff --git a/.storybook/stories/PointerLockControls.stories.tsx b/.storybook/stories/PointerLockControls.stories.tsx
index f93e9f10f..ef493625e 100644
--- 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
index 89b554be3..5f3066ac4 100644
--- 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
+})