feat: pass down bar container

src/components/GGanttBar.vue

@@ -25,23 +25,15 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  ref,
-  toRefs,
-  watch,
-  nextTick,
-  type CSSProperties,
-  onMounted,
-  onUnmounted
-} from "vue"
+import { computed, ref, toRefs, watch, type CSSProperties, onMounted, inject } from "vue"
 
 import useBarDragManagement from "../composables/useBarDragManagement"
 import useTimePositionMapping from "../composables/useTimePositionMapping"
 import useBarDragLimit from "../composables/useBarDragLimit"
 import type { GanttBarObject } from "../types"
 import provideEmitBarEvent from "../provider/provideEmitBarEvent"
 import provideConfig from "../provider/provideConfig"
+import { BAR_CONTAINER_KEY } from "../provider/symbols"
 
 const props = defineProps<{
   bar: GanttBarObject
@@ -84,15 +76,14 @@ const prepareForDrag = () => {
   )
 }
 
-const barElement = ref<HTMLElement | null>(null)
+const barContainerEl = inject(BAR_CONTAINER_KEY)
+
 const onMouseEvent = (e: MouseEvent) => {
   e.preventDefault()
   if (e.type === "mousedown") {
     prepareForDrag()
   }
-  const barContainer = barElement.value
-    ?.closest(".g-gantt-row-bars-container")
-    ?.getBoundingClientRect()
+  const barContainer = barContainerEl?.value?.getBoundingClientRect()
   let datetime
   if (barContainer) {
     datetime = mapPositionToTime(e.clientX - barContainer.left)

src/components/GGanttRow.vue

@@ -24,12 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref, toRefs, computed, type StyleValue } from "vue"
+import { ref, type Ref, toRefs, computed, type StyleValue, provide } from "vue"
 
 import useTimePositionMapping from "../composables/useTimePositionMapping"
 import provideConfig from "../provider/provideConfig"
 import type { GanttBarObject } from "../types"
 import GGanttBar from "./GGanttBar.vue"
+import { BAR_CONTAINER_KEY } from "../provider/symbols"
 
 const props = defineProps<{
   label: string
@@ -55,6 +56,8 @@ const rowStyle = computed(() => {
 const { mapPositionToTime } = useTimePositionMapping()
 const barContainer: Ref<HTMLElement | null> = ref(null)
 
+provide(BAR_CONTAINER_KEY, barContainer)
+
 const onDrop = (e: MouseEvent) => {
   const container = barContainer.value?.getBoundingClientRect()
   if (!container) {

src/provider/symbols.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from "vue"
+import type { InjectionKey, Ref } from "vue"
 
 import type { GGanttChartConfig } from "../components/GGanttChart.vue"
 import type { GanttBarObject } from "../types"
@@ -14,3 +14,6 @@ export type EmitBarEvent = (
 export const CHART_ROWS_KEY = Symbol("CHART_ROWS_KEY") as InjectionKey<GetChartRows>
 export const CONFIG_KEY = Symbol("CONFIG_KEY") as InjectionKey<GGanttChartConfig>
 export const EMIT_BAR_EVENT_KEY = Symbol("EMIT_BAR_EVENT_KEY") as InjectionKey<EmitBarEvent>
+export const BAR_CONTAINER_KEY = Symbol("BAR_CONTAINER_KEY") as InjectionKey<
+  Ref<HTMLElement | null>
+>