main ?? use pointer lock rework

Author: debabin

src/hooks/useCssVar/useCssVar.demo.tsx

@@ -1,8 +1,7 @@
 import { useCssVar } from './useCssVar';
 
 const Demo = () => {
-  const key = '--color';
-  const colorVar = useCssVar(key, '#7fa998');
+  const colorVar = useCssVar('--color', '#7fa998');
 
   const switchColor = () => {
     if (colorVar.value === '#df8543') colorVar.set('#7fa998');

src/hooks/useElementSize/useElementSize.ts

@@ -68,7 +68,7 @@ export const useElementSize = ((...params: any[]) => {
   useEffect(() => {
     if (!target && !internalRef) return;
     const element = (target ? getElement(target) : internalRef) as Element;
-
+    if (element) return;
     const observer = new ResizeObserver(([entry]) => {
       const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
 

src/hooks/useEventListener/useEventListener.ts

@@ -73,9 +73,8 @@ export const useEventListener = ((...params: any[]) => {
   const internalListener = useEvent(listener);
 
   useEffect(() => {
-    if (!target && !internalRef) return;
     const callback = (event: Event) => internalListener(event);
-    const element = target ? getElement(target) : internalRef;
+    const element = target ? getElement(target) : (internalRef ?? window);
     if (element) {
       events.forEach((event) => element.addEventListener(event, callback, options));
       return () => {

src/hooks/useMap/useMap.demo.tsx

@@ -12,7 +12,7 @@ const Demo = () => {
 
   return (
     <>
-      <div style={{ display: 'flex', gap: 8 }}>
+      <div className='flex gap-2'>
         <input placeholder='Name' {...nameInput.register()} />
         <input type='number' placeholder='Age' {...ageInput.register()} />
 
@@ -28,7 +28,7 @@ const Demo = () => {
         </button>
       </div>
 
-      <div style={{ marginTop: 8 }}>
+      <div className='mt-4 flex gap-2 flex-col'>
         {Array.from(users.value).map(([name, age], index) => (
           <div key={index}>
             {name}: <code>{age}</code>

src/hooks/usePointerLock/usePointerLock.demo.tsx

@@ -1,30 +1,44 @@
+
 import type { CSSProperties } from 'react';
 
+import { useRef } from 'react';
+
+import { useEventListener } from '../useEventListener/useEventListener';
 import { usePointerLock } from './usePointerLock';
 
-const Demo = () => {
-  const { lock, unlock } = usePointerLock();
+const getSideStyles = (index: number) => ({
+  "--i": index,
+  transform: "rotateY(calc(90deg * var(--i))) translateZ(50px)"
+} as CSSProperties)
+const getBaseStyles = (index: number) => ({ "--i": index, transform: "rotateX(calc(90deg * var(--i))) translateZ(50px)" } as CSSProperties)
+const face = 'absolute top-0 left-0 w-full h-full border-1 border-solid border-black backface-hidden bg-cyan-500 opacity-50'
 
-  const containerStyle: CSSProperties = {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  };
 
-  const elementStyle: CSSProperties = {
-    border: '1px solid #949CE0',
-    color: '#949CE0',
-    padding: '25px',
-    cursor: 'move'
-  };
+const Demo = () => {
+  const { element, unlock, lock } = usePointerLock();
+  const positionRef = useRef({ x: 0, y: 0 });
+
+  useEventListener('mousemove', (event) => {
+    positionRef.current = { x: positionRef.current.x + event.movementX, y: positionRef.current.y + event.movementY };
+    if (!element) return
+    const cube = element as HTMLElement;
+    const x = positionRef.current.y + event.movementY / 2
+    const y = positionRef.current.x + event.movementX / 2
+    cube.style.transform = `rotateY(calc(${y} * 1deg)) rotateX(calc(${x} * 1deg))`
+  }, { passive: true })
 
   return (
-    <div style={containerStyle}>
-      <div style={elementStyle} onMouseDownCapture={lock} onMouseUpCapture={unlock}>
-        Move me
+    <div className='flex justify-center items-center perspective-normal h-32'>
+      <div className='cursor-all-scroll relative w-[100px] h-[100px] transform-3d' onMouseDownCapture={lock} onMouseUpCapture={unlock}>
+        <span className={face} style={getBaseStyles(1)} />
+        <span className={face} style={getBaseStyles(-1)} />
+        <span className={face} style={getSideStyles(0)} />
+        <span className={face} style={getSideStyles(1)} />
+        <span className={face} style={getSideStyles(2)} />
+        <span className={face} style={getSideStyles(3)} />
       </div>
     </div>
-  );
+  )
 };
 
 export default Demo;

src/hooks/usePointerLock/usePointerLock.ts

@@ -1,13 +1,12 @@
-import type { MouseEvent, RefObject } from 'react';
+import type { MouseEvent } from 'react';
 
 import { useEffect, useState } from 'react';
 
-type UsePointerLockTarget = RefObject<Element | null | undefined>;
-
+/** The use pointer lock return type */
 interface UsePointerLockReturn {
   element?: Element;
   supported: boolean;
-  lock: (event: Event | MouseEvent<Element>) => void;
+  lock: (event: MouseEvent) => void;
   unlock: () => boolean;
 }
 
@@ -16,16 +15,13 @@ interface UsePointerLockReturn {
  * @description - Hook that provides reactive pointer lock
  * @category Sensors
  *
- * @param {UsePointerLockTarget} target The target element for the pointer lock
  * @returns {UsePointerLockReturn} An object containing the pointer lock element and functions to interact with the pointer lock
  *
  * @example
  * const { supported, lock, unlock, element } = usePointerLock();
  */
-
-export const usePointerLock = (target?: UsePointerLockTarget): UsePointerLockReturn => {
-  const supported = !!document && 'pointerLockElement' in document;
-
+export const usePointerLock = (): UsePointerLockReturn => {
+  const supported = typeof document !== 'undefined' && 'pointerLockElement' in document;
   const [element, setElement] = useState<Element>();
 
   useEffect(() => {
@@ -59,25 +55,25 @@ export const usePointerLock = (target?: UsePointerLockTarget): UsePointerLockRet
       document.removeEventListener('pointerlockchange', handlePointerLockChange);
       document.removeEventListener('pointerlockerror', handlePointerLockError);
     };
-  }, [supported, element]);
-
-  const lock = (event: Event | MouseEvent<Element>) => {
-    if (!supported) return;
+  }, []);
 
-    const element = event instanceof Event ? target?.current : event.currentTarget;
+  const lock = (event: MouseEvent) => {
+    if (!supported) return false;
 
-    if (!element) return;
+    if (event instanceof Event) return false;
 
-    element.requestPointerLock();
+    event.currentTarget.requestPointerLock();
 
-    setElement(element);
+    setElement(event.currentTarget);
+    return true;
   };
 
   const unlock = () => {
+    if (!supported) return false;
+
     if (!element) return false;
 
     document.exitPointerLock();
-
     setElement(undefined);
 
     return true;

src/hooks/useScrollTo/useScrollTo.demo.tsx

@@ -18,19 +18,22 @@ const Demo = () => {
   return (
     <div>
       <div ref={scrollTo.ref} style={{ overflow: 'auto', height: 300, padding: 20 }}>
-        <div style={blockStyle}>First amazing block</div>
-        <div style={blockStyle}>Second amazing block</div>
-        <div style={blockStyle}>Third amazing block</div>
+        <div style={blockStyle}><code>First</code> amazing block</div>
+        <div style={blockStyle}><code>Second</code> amazing block</div>
+        <div style={blockStyle}><code>Third</code>  amazing block</div>
       </div>
-      <div>
-        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 0 })}>
-          Scroll to block 1
+      <p>
+        Scroll to:
+      </p>
+      <div className='flex w-full gap-2'>
+        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 0, behavior: 'smooth' })}>
+          1
         </button>
-        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 260 })}>
-          Scroll to block 2
+        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 260, behavior: 'smooth' })}>
+          2
         </button>
-        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 520 })}>
-          Scroll to block 3
+        <button type='button' onClick={() => scrollTo.trigger({ x: 0, y: 520, behavior: 'smooth' })}>
+          3
         </button>
       </div>
     </div>