From 8b447424abd7c84a4edfc613410872bbc6f389d0 Mon Sep 17 00:00:00 2001
From: Viki <hi@viki.moe>
Date: Thu, 13 Jun 2024 20:54:40 +0800
Subject: [PATCH] fix: fix element bounding

---
 src/use-css-var/index.ts          | 2 +-
 src/use-element-bounding/index.ts | 2 +-
 src/use-element-by-point/demo.tsx | 3 +--
 src/use-element-size/index.ts     | 2 +-
 src/use-focus/index.ts            | 2 +-
 src/use-mouse/demo.tsx            | 2 +-
 src/use-mouse/index.ts            | 9 ++++++++-
 7 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/use-css-var/index.ts b/src/use-css-var/index.ts
index 40f929c3..a18e7132 100644
--- a/src/use-css-var/index.ts
+++ b/src/use-css-var/index.ts
@@ -43,7 +43,7 @@ export function useCssVar<T extends HTMLElement = HTMLElement>(
     const { propName, defaultValue } = latest.current
 
     if (el.current) {
-      const value = getCssVar(propName, el.current, defaultValue)
+      const value = getCssVar(propName, el, defaultValue)
       _setVariable(value || defaultValue)
     }
   })
diff --git a/src/use-element-bounding/index.ts b/src/use-element-bounding/index.ts
index dff922dc..1282961e 100644
--- a/src/use-element-bounding/index.ts
+++ b/src/use-element-bounding/index.ts
@@ -101,7 +101,7 @@ export function useElementBounding<T extends HTMLElement = HTMLElement>(
   })
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: effect need to re-run when reset, windowResize or windowScroll changes
-  useEffect(() => void update(), [reset, windowScroll, windowResize])
+  useEffect(() => void update(), [el.current, reset, windowScroll, windowResize])
 
   useResizeObserver(el, update)
   useMutationObserver(el, update, { attributeFilter: ['style', 'class'] })
diff --git a/src/use-element-by-point/demo.tsx b/src/use-element-by-point/demo.tsx
index e0e3b568..40309657 100644
--- a/src/use-element-by-point/demo.tsx
+++ b/src/use-element-by-point/demo.tsx
@@ -7,7 +7,6 @@ export function App() {
 
   const [bounding] = useElementBounding(element as HTMLElement | null)
   const styleTag = useStyleTag('* { cursor: crosshair !important; }')
-
   const isActive = mouseControls.isActive() && controls.isActive()
 
   const pause = () => {
@@ -51,7 +50,7 @@ export function App() {
           width: `${bounding.width}px`,
           height: `${bounding.height}px`,
           backgroundColor: controls.isActive() ? 'rgb(46 133 85 / 0.24)' : 'transparent',
-          zIndex: controls.isActive() ? 99999 : 'unset',
+          zIndex: controls.isActive() ? 9999999 : 'unset',
         }}
       />
       <div className={lineCls} style={{ left: x, top: 0, width: controls.isActive() ? 1 : 0, height: '100%' }} />
diff --git a/src/use-element-size/index.ts b/src/use-element-size/index.ts
index 511ed168..68f5c64b 100644
--- a/src/use-element-size/index.ts
+++ b/src/use-element-size/index.ts
@@ -46,7 +46,7 @@ export function useElementSize<T extends HTMLElement = HTMLElement>(
       const isSvg = el.current?.namespaceURI?.includes('svg')
 
       if (isSvg && el.current) {
-        setSize(getElSize(el.current))
+        setSize(getElSize(el))
       } else {
         if (boxSize && box.length) {
           setSize({
diff --git a/src/use-focus/index.ts b/src/use-focus/index.ts
index 478a3a96..628b83a1 100644
--- a/src/use-focus/index.ts
+++ b/src/use-focus/index.ts
@@ -52,7 +52,7 @@ export function useFocus<T extends HTMLElement = HTMLElement>(
   useEventListener(el, 'blur', () => setFocused(false))
 
   useMount(() => {
-    const isCurrentFocused = isElActive(el.current)
+    const isCurrentFocused = isElActive(el)
 
     if (focused && !isCurrentFocused) focus()
     if (!focused && isCurrentFocused) setFocused(true)
diff --git a/src/use-mouse/demo.tsx b/src/use-mouse/demo.tsx
index 9900265c..62bbfcc8 100644
--- a/src/use-mouse/demo.tsx
+++ b/src/use-mouse/demo.tsx
@@ -7,7 +7,7 @@ export function App() {
   const screen = useMouse({ type: 'screen' })
   const move = useMouse({ type: 'movement' })
 
-  const controls = [page, client, screen]
+  const controls = [page, client, screen, move]
   const isActive = controls.every((e) => e.isActive())
 
   return (
diff --git a/src/use-mouse/index.ts b/src/use-mouse/index.ts
index a6c5a55c..db5426be 100644
--- a/src/use-mouse/index.ts
+++ b/src/use-mouse/index.ts
@@ -141,7 +141,14 @@ export function useMouse(options: UseMouseOptions = {}): UseMouseReturn {
   const cleanups = useLatest([
     useEventListener(target, ['mousemove', 'dragover'], mouseHandler, evtOptions),
     useEventListener(target, isTouch ? ['touchstart', 'touchmove'] : [], touchHandler, evtOptions),
-    useEventListener(target, resetOnEnds ? 'touchend' : [], () => setPosition(initialValue), evtOptions),
+    useEventListener(
+      target,
+      resetOnEnds ? 'touchend' : [],
+      () => {
+        pausable.isActive() && setPosition(initialValue)
+      },
+      evtOptions,
+    ),
     useEventListener(() => window, isScroll ? 'scroll' : [], scrollHandler, evtOptions),
   ])