fix offset padding

src/hooks/useNoteOverlay.hook.ts

@@ -1,34 +1,42 @@
-import { computed, onMounted, Ref, ref, toValue } from 'vue'
+import { computed, onMounted, Ref, ref, toValue } from "vue"
 
-import { NOTE_WIDTH } from '@/constants/note-width'
+import { NOTE_WIDTH } from "@/constants/note-width"
-import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useOverlay } from "@/hooks/useOverlay.hook"
-import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 
 const BOOKMARK_WIDTH = 2
+const OFFSET = 24 // stacked-note padding
 
 export const useNoteOverlay = (
   className: string,
-  index: Ref<number> | number
+  index: Ref<number> | number,
 ) => {
   const { x, y, isMobile } = useOverlay()
   const noteHeight = ref(0)
 
-  // TODO: it seems to have a wrong offset,
-  // visible when there are a lot of notes.
   const displayNoteOverlay = computed(() => {
     const valueIndex = toValue(index)
 
+    if (valueIndex === 1) {
+      console.log(
+        valueIndex,
+        x.value > valueIndex * NOTE_WIDTH,
+        x.value,
+        valueIndex * NOTE_WIDTH,
+      )
+    }
+
     if (isMobile.value) {
       return y.value > valueIndex * noteHeight.value
     } else {
-      return x.value > valueIndex * NOTE_WIDTH
+      return x.value > valueIndex * NOTE_WIDTH - valueIndex * OFFSET
     }
   })
 
   onMounted(() => {
     const { stackedNotes } = useRouteQueryStackedNotes()
     const noteElement = document.querySelector(
-      `.${className}`
+      `.${className}`,
     ) as HTMLElement | null
 
     if (!noteElement) {
@@ -42,7 +50,7 @@ export const useNoteOverlay = (
       noteElement.style.left = `${(toValue(index) + 1) * BOOKMARK_WIDTH}rem`
 
       const stackedNoteContainers = document.querySelectorAll(
-        '.stacked-note'
+        ".stacked-note",
       ) as NodeListOf<HTMLElement>
 
       stackedNoteContainers.forEach((stackedNote, ind) => {
@@ -54,6 +62,6 @@ export const useNoteOverlay = (
   })
 
   return {
-    displayNoteOverlay
+    displayNoteOverlay,
   }
 }

src/hooks/useNoteView.hook.ts

@@ -1,12 +1,12 @@
-import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { computed, onMounted, onUnmounted, watch } from "vue"
 
-import { noteEventBus } from '@/bus/noteEventBus'
+import { noteEventBus } from "@/bus/noteEventBus"
-import { NOTE_WIDTH } from '@/constants/note-width'
+import { NOTE_WIDTH } from "@/constants/note-width"
-import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useOverlay } from "@/hooks/useOverlay.hook"
-import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
-import { resolvePath } from '@/modules/repo/services/resolvePath'
+import { resolvePath } from "@/modules/repo/services/resolvePath"
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
-import { pathToNotePathTitle } from '@/utils/noteTitle'
+import { pathToNotePathTitle } from "@/utils/noteTitle"
 
 export const useNoteView = (containerClass: string) => {
   const store = useUserRepoStore()
@@ -18,34 +18,34 @@ export const useNoteView = (containerClass: string) => {
       if (!note) {
         return obj
       }
-      const filePath = store.files.find((file) => file.sha === note)?.path ?? ''
+      const filePath = store.files.find((file) => file.sha === note)?.path ?? ""
 
       obj[note] = pathToNotePathTitle(filePath)
 
       return obj
-    }, {})
+    }, {}),
   )
 
   const unsubscribeLink = noteEventBus.addEventBusListener(
     ({ path, currentNoteSHA }) => {
       const currentFile = store.files.find(
-        (file) => file.sha === currentNoteSHA
+        (file) => file.sha === currentNoteSHA,
       )
 
-      const finalPath = resolvePath(currentFile?.path ?? '', path)
+      const finalPath = resolvePath(currentFile?.path ?? "", path)
 
       const file = store.files.find((file) => file.path === finalPath)
       if (!file?.sha) {
         return
       }
 
-      addStackedNote(currentNoteSHA ?? '', file.sha)
+      addStackedNote(currentNoteSHA ?? "", file.sha)
-    }
+    },
   )
 
   const resizeContainer = () => {
     const container = document.querySelector(
-      `.${containerClass}`
+      `.${containerClass}`,
     ) as HTMLElement | null
     if (!container) {
       return
@@ -68,10 +68,10 @@ export const useNoteView = (containerClass: string) => {
   })
 
   watch(stackedNotes, resizeContainer, {
-    immediate: true
+    immediate: true,
   })
 
   return {
-    titles
+    titles,
   }
 }