variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Revert "Handle requestPointerLock error cases in iframes P-199 (#272)"

Browse source 
This reverts commit 2ef9d5e346.
This commit is contained in:
Elliot 2022-08-17 14:34:42 -04:00
parent 14603bccbd
commit a871aa628f
2 changed files with 3 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/playground/src/tests/in-iframe/index.tsx
View file

@ -1,11 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<iframe
src="/shared/dom"
style={{width: '600px', height: '600px'}}
sandbox="allow-scripts allow-same-origin"
/>,
document.getElementById('root'),
)

26
theatre/studio/src/uiComponents/useDrag.ts
View file

@ -151,24 +151,6 @@ type IUseDragStateDetection_Detected = {
dragEventCount: number dragEventCount: number
} }
// pointer lock may not have been accepted, because we might be in an iframe which disallows pointer locking
let isPointerLockAllowed = !isSafari
function requestPointerLockSafely(target: Element): Promise<boolean> {
if (!isPointerLockAllowed) return Promise.resolve(false)
try {
// Checking introduced with https://linear.app/theatre/issue/P-199/dont-use-pointer-lock-when-in-an-iframe
return Promise.resolve(target.requestPointerLock())
.then(() => true)
.catch(() => {
isPointerLockAllowed = false
return false
})
} catch (_err) {
isPointerLockAllowed = false
return Promise.resolve(false)
}
}
export default function useDrag( export default function useDrag(
target: HTMLElement | SVGElement | undefined | null, target: HTMLElement | SVGElement | undefined | null,
opts: UseDragOpts, opts: UseDragOpts,
@ -180,7 +162,7 @@ export default function useDrag(
* Safari has a gross behavior with locking the pointer changes the height of the webpage * Safari has a gross behavior with locking the pointer changes the height of the webpage
* See {@link UseDragOpts.shouldPointerLock} for more context. * See {@link UseDragOpts.shouldPointerLock} for more context.
*/ */
const isPointerLockUsed = opts.shouldPointerLock && isPointerLockAllowed const isPointerLockUsed = opts.shouldPointerLock && !isSafari
const stateRef = useRef<IUseDragStateRef>({ const stateRef = useRef<IUseDragStateRef>({
domDragStarted: false, domDragStarted: false,
@ -224,7 +206,7 @@ export default function useDrag(
DRAG_DETECTION_DISTANCE_THRESHOLD DRAG_DETECTION_DISTANCE_THRESHOLD
) { ) {
if (isPointerLockUsed) { if (isPointerLockUsed) {
requestPointerLockSafely(target) target.requestPointerLock()
} }
stateStarted.detection = { stateStarted.detection = {
@ -266,9 +248,7 @@ export default function useDrag(
if (!stateRef.current.domDragStarted) return if (!stateRef.current.domDragStarted) return
const dragHappened = stateRef.current.detection.detected const dragHappened = stateRef.current.detection.detected
stateRef.current = {domDragStarted: false} stateRef.current = {domDragStarted: false}
if (isPointerLockUsed && document.pointerLockElement === target) { if (opts.shouldPointerLock && !isSafari) document.exitPointerLock()
document.exitPointerLock()
}
callbacksRef.current.onDragEnd(dragHappened) callbacksRef.current.onDragEnd(dragHappened)
// ensure that the window is focused after a successful drag // ensure that the window is focused after a successful drag