fix: fix element bounding

sheinsight · Jun 13, 2024 · 8b44742 · 8b44742
1 parent f1e84b0
commit 8b44742
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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),
   ])