feat(bar): bar label and tooltip always visible

.gitignore

@@ -29,3 +29,6 @@ docs/.vitepress/temp
 docs/.vitepress/dist
 
 *.tgz
+
+# Package manager
+.npmrc

src/components/GGanttBar.vue

@@ -18,13 +18,15 @@
     @mouseleave="onMouseEvent"
     @contextmenu="onMouseEvent"
   >
-    <div class="g-gantt-bar-label">
-      <slot :bar="bar">
-        <div>
-          {{ barConfig.label || "" }}
-        </div>
-        <div v-if="barConfig.html" v-html="barConfig.html"/>
-      </slot>
+    <div class="g-gantt-bar-label-container" :style="labelPosition">
+      <div class="g-gantt-bar-label">
+        <slot :bar="bar">
+          <div>
+            {{ barConfig.label || "" }}
+          </div>
+          <div v-if="barConfig.html" v-html="barConfig.html"/>
+        </slot>
+      </div>
     </div>
     <template v-if="barConfig.hasHandles">
       <div class="g-gantt-bar-handle-left" />
@@ -105,6 +107,34 @@ const { barStart, barEnd, width, chartStart, chartEnd, chartSize } = config
 const xStart = ref(0)
 const xEnd = ref(0)
 
+// Position bar label to the center of the visible part of the chart
+const labelPosition = computed((): Record<string, string> => {
+  const barContainer = barContainerEl?.value?.getBoundingClientRect()
+  if (!barContainer) {
+    return {}
+  }
+  // The bar either ends at the end of the container (overflow) or at the element's position in the chart
+  const barVisibleRight = Math.min(xEnd.value, barContainer.right - barContainer.left)
+  // The bar either starts at the beginning of the container (overflow) or at the element's position in the chart
+  const barVisibleLeft = Math.max(xStart.value, 0)
+  // Visible width of the bar
+  const barVisibleWidth = barVisibleRight - barVisibleLeft
+
+  // The label container is positioned from the left.
+  // If overflowing on the left, adjust the label's positioning to fit in the visible part
+  let offsetLeft = 0
+  if (xStart.value < 0) {
+    // Shift the left position by the width of the hidden part
+    offsetLeft = -xStart.value
+  }
+
+  return {
+    left: `${offsetLeft}px`,
+    width: `${barVisibleWidth}px`,
+    position: "absolute"
+  }
+})
+
 onMounted(() => {
   watch(
     [bar, width, chartStart, chartEnd, chartSize.width],

src/components/GGanttBarTooltip.vue

@@ -20,11 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, nextTick } from "vue"
+import { computed, toRefs, ref, watch, nextTick, inject } from "vue"
 
 import type { GanttBarObject } from "../types"
 import useDayjsHelper from "../composables/useDayjsHelper.js"
 import provideConfig from "../provider/provideConfig.js"
+import { CHART_CONTAINER_KEY } from "../provider/symbols"
 
 const TOOLTIP_FORMATS = {
   hour: "HH:mm",
@@ -44,6 +45,8 @@ const props = defineProps<{
 const { bar } = toRefs(props)
 const { precision, font, barStart, barEnd, rowHeight } = provideConfig()
 
+const barContainerEl = inject(CHART_CONTAINER_KEY)
+
 const tooltipTop = ref("0px")
 const tooltipLeft = ref("0px")
 watch(
@@ -52,7 +55,7 @@ watch(
     await nextTick()
 
     const barId = bar?.value?.ganttBarConfig.id || ""
-    if (!barId) {
+    if (!barId || !barContainerEl?.value) {
       return
     }
 
@@ -61,7 +64,7 @@ watch(
       top: 0,
       left: 0
     }
-    const leftValue = Math.max(left, 10)
+    const leftValue = Math.max(left, barContainerEl?.value.getBoundingClientRect().left)
     tooltipTop.value = `${top + rowHeight.value - 10}px`
     tooltipLeft.value = `${leftValue}px`
   },

src/components/GGanttChart.vue

@@ -77,6 +77,7 @@ import {
   CHART_ROWS_KEY,
   CONFIG_KEY,
   EMIT_BAR_EVENT_KEY,
+  CHART_CONTAINER_KEY,
   type ChartRow
 } from "../provider/symbols.js"
 
@@ -254,6 +255,7 @@ const emitBarEvent = (
 const ganttChart = ref<HTMLElement | null>(null)
 const chartSize = useElementSize(ganttChart)
 
+provide(CHART_CONTAINER_KEY, ganttChart)
 provide(CHART_ROWS_KEY, getChartRows)
 provide(CONFIG_KEY, {
   ...toRefs(props),

src/provider/symbols.ts

@@ -18,3 +18,6 @@ export const EMIT_BAR_EVENT_KEY = Symbol("EMIT_BAR_EVENT_KEY") as InjectionKey<E
 export const BAR_CONTAINER_KEY = Symbol("BAR_CONTAINER_KEY") as InjectionKey<
   Ref<HTMLElement | null>
 >
+export const CHART_CONTAINER_KEY = Symbol("CHART_CONTAINER_KEY") as InjectionKey<
+  Ref<HTMLElement | null>
+>