diff --git a/.storybook/stories/PresentationControls.stories.tsx b/.storybook/stories/PresentationControls.stories.tsx
new file mode 100644
index 000000000..13128f908
--- /dev/null
+++ b/.storybook/stories/PresentationControls.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react'
+
+import { Setup } from '../Setup'
+
+import { Box, PresentationControlProps, PresentationControls } from '../../src'
+
+export function PresentationControlStory({ enabled, ...rest }: PresentationControlProps) {
+ return (
+
+
+
+
+
+
+ )
+}
+
+PresentationControlStory.storyName = 'Default'
+PresentationControlStory.args = {
+ enabled: true,
+}
+
+export default {
+ title: 'Controls/PresentationControls',
+ component: PresentationControls,
+ decorators: [
+ (storyFn) => (
+
+ {storyFn()}
+
+ ),
+ ],
+}
diff --git a/README.md b/README.md
index 5bb41f7b9..e005cf2f4 100644
--- a/README.md
+++ b/README.md
@@ -372,6 +372,7 @@ Semi-OrbitControls with spring-physics, polar zoom and snap-back, for presentati
```jsx
[rotation[0] + polar[0], rotation[0] + polar[1]],
@@ -46,14 +48,17 @@ export function PresentationControls({
const [spring, api] = useSpring(() => ({ scale: 1, rotation: rInitial, config }))
React.useEffect(() => void api.start({ scale: 1, rotation: rInitial, config }), [rInitial])
React.useEffect(() => {
- if (global && cursor) gl.domElement.style.cursor = 'grab'
- }, [global, cursor, gl.domElement])
+ if (global && cursor && enabled) gl.domElement.style.cursor = 'grab'
+
+ return () => void (gl.domElement.style.cursor = 'default')
+ }, [global, cursor, gl.domElement, enabled])
const bind = useGesture(
{
onHover: ({ last }) => {
- if (cursor && !global) gl.domElement.style.cursor = last ? 'auto' : 'grab'
+ if (cursor && !global && enabled) gl.domElement.style.cursor = last ? 'auto' : 'grab'
},
onDrag: ({ down, delta: [x, y], memo: [oldY, oldX] = spring.rotation.animation.to || rInitial }) => {
+ if (!enabled) return [y, x]
if (cursor) gl.domElement.style.cursor = down ? 'grabbing' : 'grab'
x = MathUtils.clamp(oldX + (x / size.width) * Math.PI * speed, ...rAzimuth)
y = MathUtils.clamp(oldY + (y / size.height) * Math.PI * speed, ...rPolar)