feat: update hitbox on focus

nature-heart-software · Oct 12, 2024 · 3ed5f60 · 3ed5f60
1 parent 818617d
commit 3ed5f60
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 46 deletions.
diff --git a/apps/app/src/modules/vue-hitboxes/NvHitbox.vue b/apps/app/src/modules/vue-hitboxes/NvHitbox.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="componentRef" :data-hitbox-id="id">
-    <slot />
+    <slot/>
   </div>
 </template>
 <script lang="ts" setup>
@@ -37,23 +37,24 @@ const onHitboxUpdate = () => {
   }
 }
 const updateHitbox = throttle(
-  () => {
-    if (componentRef.value) {
-      const bounds = componentRef.value.getBoundingClientRect()
-      hitboxes.value.x = bounds.x * pixelRatio.value
-      hitboxes.value.y = bounds.y * pixelRatio.value
-      hitboxes.value.w = bounds.width * pixelRatio.value
-      hitboxes.value.h = bounds.height * pixelRatio.value
-    }
-  },
-  250,
-  { leading: true, trailing: true },
+    () => {
+      if (componentRef.value) {
+        const bounds = componentRef.value.getBoundingClientRect()
+        hitboxes.value.x = bounds.x * pixelRatio.value
+        hitboxes.value.y = bounds.y * pixelRatio.value
+        hitboxes.value.w = bounds.width * pixelRatio.value
+        hitboxes.value.h = bounds.height * pixelRatio.value
+      }
+    },
+    250,
+    { leading: true, trailing: true },
 )
 
 useIntersectionObserver(componentRef, updateHitbox)
 useMutationObserver(componentRef, updateHitbox, { attributes: true })
 useResizeObserver(componentRef, updateHitbox)
 useEventListener('resize', updateHitbox)
+useEventListener('focus', updateHitbox)
 onBeforeUnmount(() => {
   hitboxesStore.removeHitbox(hitboxes.value.id)
 })

diff --git a/apps/app/src/modules/vue-hitboxes/index.ts b/apps/app/src/modules/vue-hitboxes/index.ts
@@ -7,41 +7,43 @@ import { useDevicePixelRatio } from '@vueuse/core'
 export const hitboxClass = 'hitbox'
 
 const onElementChange = (element: Element, callback: () => any) => {
-  const resizeObserver = new ResizeObserver(callback)
-  const intersectionObserver = new IntersectionObserver(callback)
-  const mutationObserver = new MutationObserver(callback)
-  resizeObserver.observe(element)
-  intersectionObserver.observe(element)
-  mutationObserver.observe(element, { attributes: true })
-  window.addEventListener('resize', callback)
-  return () => {
-    resizeObserver.unobserve(element)
-    intersectionObserver.unobserve(element)
-    mutationObserver.disconnect()
-    window.removeEventListener('resize', callback)
-  }
+    const resizeObserver = new ResizeObserver(callback)
+    const intersectionObserver = new IntersectionObserver(callback)
+    const mutationObserver = new MutationObserver(callback)
+    resizeObserver.observe(element)
+    intersectionObserver.observe(element)
+    mutationObserver.observe(element, { attributes: true })
+    window.addEventListener('resize', callback)
+    window.addEventListener('focus', callback)
+    return () => {
+        resizeObserver.unobserve(element)
+        intersectionObserver.unobserve(element)
+        mutationObserver.disconnect()
+        window.removeEventListener('resize', callback)
+        window.removeEventListener('focus', callback)
+    }
 }
 export const watchHitbox = (selector: string) => {
-  ready(selector, (element: Element) => {
-    const id = uuid()
-    const hitboxesStore = useHitboxesStore()
-    const { pixelRatio } = useDevicePixelRatio()
-    const updateHitboxes = throttle(() => {
-      if (element) {
-        const { x, y, width: w, height: h } = element.getBoundingClientRect()
-        hitboxesStore.addHitbox({
-          id,
-          x: x * pixelRatio.value,
-          y: y * pixelRatio.value,
-          w: w * pixelRatio.value,
-          h: h * pixelRatio.value,
-        })
-      } else {
-        hitboxesStore.removeHitbox(id)
-      }
-    }, 250)
-    onElementChange(element, updateHitboxes)
-  })
+    ready(selector, (element: Element) => {
+        const id = uuid()
+        const hitboxesStore = useHitboxesStore()
+        const { pixelRatio } = useDevicePixelRatio()
+        const updateHitboxes = throttle(() => {
+            if (element) {
+                const { x, y, width: w, height: h } = element.getBoundingClientRect()
+                hitboxesStore.addHitbox({
+                    id,
+                    x: x * pixelRatio.value,
+                    y: y * pixelRatio.value,
+                    w: w * pixelRatio.value,
+                    h: h * pixelRatio.value,
+                })
+            } else {
+                hitboxesStore.removeHitbox(id)
+            }
+        }, 250)
+        onElementChange(element, updateHitboxes)
+    })
 }
 
-watchHitbox(`.${hitboxClass}`)
+watchHitbox(`.${ hitboxClass }`)