From b8181c8f7e3542a7bb6a282717d12d97bd2cf985 Mon Sep 17 00:00:00 2001
From: Eugenio Topa <eugenio.topa@altecspace.it>
Date: Thu, 19 Dec 2024 17:48:14 +0100
Subject: [PATCH] [FIX] Connetions with max rows

---
 LICENSE                                       | 21 +++++++++++++++++++
 README.md                                     |  3 +++
 .../theme/components/AdvancedGanttDemo.vue    |  8 ++-----
 .../theme/components/BasicGanttDemo.vue       |  4 ----
 .../theme/components/ConnectionsGanttDemo.vue |  4 ----
 .../theme/components/OtherGanttDemo.vue       |  5 -----
 .../theme/components/TimeGanttDemo.vue        |  3 ---
 docs/.vitepress/theme/index.ts                | 21 ++++++++++++++-----
 docs/components/g-gantt-chart.md              |  2 --
 docs/guide/installation.md                    |  2 --
 package.json                                  |  4 ++--
 src/composables/useConnections.ts             |  6 ++++--
 12 files changed, 48 insertions(+), 35 deletions(-)
 create mode 100644 LICENSE

diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5b765c9
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
index 8cf839e..ca3bc6d 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,9 @@ A powerful Gantt chart component for Vue 3, evolved from vue-ganttastic. Provide
 
 <img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/logo.png?raw=true" alt="logo HyVueGantt" witdh="300" height="300">
 
+## Guide and Docs
+
+For further guides and references, check out the [documentation](https://github.com/Xeyos88/HyVueGantt).  
 
 ## 🚀 Installation
 
diff --git a/docs/.vitepress/theme/components/AdvancedGanttDemo.vue b/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
index c6fc24e..7ca3d00 100644
--- a/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
+++ b/docs/.vitepress/theme/components/AdvancedGanttDemo.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 const currentScheme = ref('default')
 
@@ -70,8 +66,8 @@ onMounted(() => {
           </select>
         </div>
       <g-gantt-chart
-        chart-start="2024-12-10"
-        chart-end="2024-12-20"
+        chart-start="2024-12-11"
+        chart-end="2024-12-17"
         precision="day"
         bar-start="start"
         bar-end="end"
diff --git a/docs/.vitepress/theme/components/BasicGanttDemo.vue b/docs/.vitepress/theme/components/BasicGanttDemo.vue
index d2c9d78..bf2ab61 100644
--- a/docs/.vitepress/theme/components/BasicGanttDemo.vue
+++ b/docs/.vitepress/theme/components/BasicGanttDemo.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([
diff --git a/docs/.vitepress/theme/components/ConnectionsGanttDemo.vue b/docs/.vitepress/theme/components/ConnectionsGanttDemo.vue
index 1e28d84..8ac51bd 100644
--- a/docs/.vitepress/theme/components/ConnectionsGanttDemo.vue
+++ b/docs/.vitepress/theme/components/ConnectionsGanttDemo.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([
diff --git a/docs/.vitepress/theme/components/OtherGanttDemo.vue b/docs/.vitepress/theme/components/OtherGanttDemo.vue
index f7f962e..a02b3ee 100644
--- a/docs/.vitepress/theme/components/OtherGanttDemo.vue
+++ b/docs/.vitepress/theme/components/OtherGanttDemo.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
-
-dayjs.extend(isSameOrBefore)
-
 const isLibraryReady = ref(false)
 
 const rows = ref([
diff --git a/docs/.vitepress/theme/components/TimeGanttDemo.vue b/docs/.vitepress/theme/components/TimeGanttDemo.vue
index 14d4a39..a9bd14d 100644
--- a/docs/.vitepress/theme/components/TimeGanttDemo.vue
+++ b/docs/.vitepress/theme/components/TimeGanttDemo.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import { GGanttChart, GGanttRow } from 'hy-vue-gantt'
 
-dayjs.extend(isSameOrBefore)
 
 const isLibraryReady = ref(false)
 const currentPrecision = ref('hour')
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 14e5548..06784c8 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,20 @@
 import DefaultTheme from 'vitepress/theme'
 import { defineClientComponent } from 'vitepress'
 import './custom.css'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-
-dayjs.extend(isSameOrBefore)
+import dayjs from "dayjs"
+import isoWeek from "dayjs/plugin/isoWeek"
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js"
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
+import isBetween from "dayjs/plugin/isBetween.js"
+import weekOfYear from "dayjs/plugin/weekOfYear"
+import advancedFormat from "dayjs/plugin/advancedFormat"
+import customParseFormat from "dayjs/plugin/customParseFormat.js"
+
+export function extendDayjs() {
+  dayjs.extend(isSameOrBefore)
+  dayjs.extend(isSameOrAfter)
+  dayjs.extend(isBetween)
+}
 
 const GanttDemo = defineClientComponent(() => {
   return import('./components/BasicGanttDemo.vue')
@@ -30,10 +40,11 @@ const OtherGanttDemo = defineClientComponent(() => {
 export default {
   extends: DefaultTheme,
   enhanceApp({ app }) {
+    extendDayjs()
     app.component('BasicGanttDemo', GanttDemo)
     app.component('ConnectionsGanttDemo', ConnectionsGanttDemo)
     app.component('TimeGanttDemo', TimeGanttDemo)
     app.component('AdvancedGanttDemo',AdvancedGanttDemo)
-    app.component('OtherGanttDemo',OtherGanttDemo)
+    app.component('OtherGanttDemo', OtherGanttDemo)
   }
 }
\ No newline at end of file
diff --git a/docs/components/g-gantt-chart.md b/docs/components/g-gantt-chart.md
index fff3354..3d6705c 100644
--- a/docs/components/g-gantt-chart.md
+++ b/docs/components/g-gantt-chart.md
@@ -29,8 +29,6 @@ Here's a minimal example of using the GGanttChart component:
 
 ### Props
 
-### Props
-
 | Prop Name | Type | Default | Description |
 |-----------|------|---------|-------------|
 | chartStart | `string \| Date` | Required | The start date of the chart's visible range |
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
index 0d18fda..3e54be0 100644
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@@ -36,8 +36,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import hyvuegantt from 'hy-vue-gantt'
 
-// Import the default styles
-import 'hy-vue-gantt/dist/style.css'
 
 const app = createApp(App)
 app.use(hyvuegantt)
diff --git a/package.json b/package.json
index b14f468..b07df5b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hy-vue-gantt",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Fork and update of vue-ganttastic",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {
@@ -56,7 +56,7 @@
     "dayjs": "^1.11.13",
     "vue": "^3.5.13"
   },
-  "homepage": "",
+  "homepage": "https://xeyos88.github.io/HyVueGantt/",
   "keywords": [
     "gantt",
     "chart",
diff --git a/src/composables/useConnections.ts b/src/composables/useConnections.ts
index b668228..d69bd8c 100644
--- a/src/composables/useConnections.ts
+++ b/src/composables/useConnections.ts
@@ -67,6 +67,8 @@ export function useConnections(
     const parentElement = document.getElementById(id.value)
     const rowsContainer = parentElement!.querySelector(".g-gantt-rows-container")
     if (!rowsContainer) return
+    const scrollTop = rowsContainer.scrollTop
+    const scrollLeft = rowsContainer.scrollLeft
 
     const containerRect = rowsContainer.getBoundingClientRect()
     const bars = parentElement!.querySelectorAll(".g-gantt-bar")
@@ -80,8 +82,8 @@ export function useConnections(
       if (barId) {
         const position = {
           id: barId,
-          x: rect.left - containerRect.left,
-          y: rect.top - containerRect.top,
+          x: rect.left - containerRect.left +scrollLeft,
+          y: rect.top - containerRect.top +scrollTop,
           width: rect.width,
           height: rect.height
         }