Use ResizeObserver to get chart size

docs/.vuepress/client.ts

@@ -1,5 +1,5 @@
 import { defineClientConfig } from '@vuepress/client'
-import {ganttastic} from "../../src/index"
+import {ganttastic} from "../../src/vue-ganttastic"
 
 // see: https://v2.vuepress.vuejs.org/advanced/cookbook/usage-of-client-config.html
 export default defineClientConfig({

package.json

@@ -68,5 +68,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/InfectoOne/vue-ganttastic"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.1.1"
   }
 }

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.js"
 import useTimePositionMapping from "../composables/useTimePositionMapping.js"
 import useBarDragLimit from "../composables/useBarDragLimit.js"
 import type { GanttBarObject } from "../types"
 import provideEmitBarEvent from "../provider/provideEmitBarEvent.js"
 import provideConfig from "../provider/provideConfig.js"
+import { BAR_CONTAINER_KEY } from "../provider/symbols"
 
 const props = defineProps<{
   bar: GanttBarObject
@@ -84,43 +76,36 @@ 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)
   }
   emitBarEvent(e, bar.value, datetime)
 }
 
-const { barStart, barEnd, width, chartStart, chartEnd } = config
+const { barStart, barEnd, width, chartStart, chartEnd, chartSize } = config
 
 const xStart = ref(0)
 const xEnd = ref(0)
 
-function calculateBarSize() {
-  xStart.value = mapTimeToPosition(bar.value[barStart.value])
-  xEnd.value = mapTimeToPosition(bar.value[barEnd.value])
-}
-
-watch(
-  [bar, width, chartStart, chartEnd],
-  async () => {
-    await nextTick()
-    calculateBarSize()
-  },
-  { deep: true, immediate: true }
-)
-
-onMounted(() => window.addEventListener("resize", calculateBarSize))
-onUnmounted(() => window.removeEventListener("resize", calculateBarSize))
+onMounted(() => {
+  watch(
+    [bar, width, chartStart, chartEnd, chartSize.width],
+    () => {
+      xStart.value = mapTimeToPosition(bar.value[barStart.value])
+      xEnd.value = mapTimeToPosition(bar.value[barEnd.value])
+    },
+    { deep: true, immediate: true }
+  )
+})
 
 const barStyle = computed(() => {
   return {

src/components/GGanttBarTooltip.vue

@@ -73,15 +73,15 @@ const { toDayjs } = useDayjsHelper()
 const { precision, font } = config
 const tooltipContent = computed(() => {
   const format = TOOLTIP_FORMATS[precision.value]
-  if (bar && bar.value) {
-    const barStartFormatted = toDayjs(bar.value, "start").format(format)
-    const barEndFormatted = toDayjs(bar.value, "end").format(format)
-    // NOTE: this is not the HYPHEN-MINUS (-) character by intend.
-    // Instead we use the correct typographic sign the en-dash
-    // see: https://en.wikipedia.org/wiki/Dash#Ranges_of_values
-    return `${barStartFormatted} – ${barEndFormatted}`
+  if (!bar?.value) {
+    return ""
   }
-  return ""
+  const barStartFormatted = toDayjs(bar.value, "start").format(format)
+  const barEndFormatted = toDayjs(bar.value, "end").format(format)
+  // NOTE: this is not the HYPHEN-MINUS (-) character by intend.
+  // Instead we use the correct typographic sign the en-dash
+  // see: https://en.wikipedia.org/wiki/Dash#Ranges_of_values
+  return `${barStartFormatted} – ${barEndFormatted}`
 })
 </script>
 

src/components/GGanttChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    ref="gGanttChart"
+    ref="ganttChart"
     class="g-gantt-chart"
     :style="{ width, background: colors.background, fontFamily: font }"
   >
@@ -49,6 +49,7 @@ import { colorSchemes, type ColorScheme } from "../color-schemes.js"
 import type { ColorSchemeKey } from "../color-schemes.js"
 import { CHART_ROWS_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY } from "../provider/symbols.js"
 import type { GanttBarObject } from "../types"
+import { useElementSize } from "@vueuse/core"
 
 export interface GGanttChartProps {
   chartStart: string
@@ -70,7 +71,10 @@ export interface GGanttChartProps {
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
   colors: ComputedRef<ColorScheme>
-  gGanttChart: Ref<HTMLElement | null>
+  chartSize: {
+    width: Ref<number>
+    height: Ref<number>
+  }
 }
 
 const props = withDefaults(defineProps<GGanttChartProps>(), {
@@ -205,12 +209,14 @@ const emitBarEvent = (
   }
 }
 
-const gGanttChart = ref<HTMLElement | null>(null)
+const ganttChart = ref<HTMLElement | null>(null)
+const chartSize = useElementSize(ganttChart)
+
 provide(CHART_ROWS_KEY, getChartRows)
 provide(CONFIG_KEY, {
   ...toRefs(props),
   colors,
-  gGanttChart
+  chartSize
 })
 provide(EMIT_BAR_EVENT_KEY, emitBarEvent)
 </script>

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.js"
 import provideConfig from "../provider/provideConfig.js"
 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) {