-
Notifications
You must be signed in to change notification settings - Fork 41
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#244 add use pointer lock #254
Conversation
useEventListener(document, 'pointerlockchange', () => { | ||
if (!isSupported) return; | ||
|
||
const currentElement = document!.pointerLockElement ?? element; | ||
|
||
if (targetElement && currentElement === targetElement.current) { | ||
setElement(document.pointerLockElement as MaybeHTMLElement); | ||
if (!element) { | ||
targetElement.current = triggerElement.current = null; | ||
} | ||
} | ||
}); | ||
|
||
useEventListener(document, 'pointerlockerror', () => { | ||
if (!isSupported) return; | ||
|
||
const currentElement = document!.pointerLockElement ?? element; | ||
|
||
if (currentElement === (target?.current || triggerElement.current)) { | ||
const action = document!.pointerLockElement ? 'release' : 'acquire'; | ||
|
||
throw new Error(`Failed to ${action} pointer lock.`); | ||
} | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
в хуке лучше не использовать другие хуки особенно. лучше сделать обычный useEffect
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- не бери прям все из vueuse, смотри на другие хуки из нашей либы
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- данную логику все можно легко описать в одном useEffect
interface UsePointerLockOptions { | ||
document?: Document; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
опции пока удаляем
} | ||
|
||
interface UsePointerLockReturn { | ||
isSupported: boolean; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
supported везде без is
triggerElement: MutableRefObject<MaybeHTMLElement>; | ||
element: MaybeHTMLElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
MaybeHTMLElement это опять же своровано из vueuse, не надо тащить все оттуда
const triggerElement = useRef<MaybeHTMLElement>(); | ||
const targetElement = useRef<MaybeHTMLElement>(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
это пока тоже удаляем, я думаю самое важно просто lock и unlock на сегодня
}); | ||
|
||
const lock = (event: MouseEvent<HTMLDivElement> | Event) => { | ||
if (!isSupported) throw new Error('Pointer Lock API is not supported by your browser.'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
не надо ошибки, просто return
…ерез useEffect, убрал лишние targetElement & triggerElement, поменял типы
setElement(document.pointerLockElement as Element); | ||
} | ||
}; | ||
const handlePointerLockError = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
хендлер нужно делать внутри useEffect, а то removeEventListener работать не будет, нужна таже ссылка
|
||
/** | ||
* @name usePointerLock | ||
* @description - Reactive pointer lock |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Посмотри, как другие оформляются desc
* @description - Reactive pointer lock | ||
* @category Sensors | ||
* | ||
* @param {RefObject<Element>} target |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
аналогично тут
const lock = (event: MouseEvent<Element> | Event) => { | ||
if (!supported) return; | ||
|
||
const targetElement = event instanceof Event ? target?.current : event.currentTarget; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
тут просто element
No description provided.