From 7dcc132830bd17f5d4cf3598cd45f1467c178696 Mon Sep 17 00:00:00 2001
From: Safwan Samsudeen <safwansamsudeen.c@gmail.com>
Date: Wed, 8 Jan 2025 13:01:19 +0530
Subject: [PATCH] fix: handle bar disappearing

---
 src/index.js         | 9 +++------
 src/styles/gantt.css | 7 ++++---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/index.js b/src/index.js
index b4ef1f9..23830d6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1100,17 +1100,16 @@ export default class Gantt {
 
         $.on(this.$svg, 'mousedown', '.bar-wrapper, .handle', (e, element) => {
             const bar_wrapper = $.closest('.bar-wrapper', element);
-            bars.forEach((bar) => bar.group.classList.remove('active'));
             if (element.classList.contains('left')) {
                 is_resizing_left = true;
+                element.classList.add('visible');
             } else if (element.classList.contains('right')) {
                 is_resizing_right = true;
+                element.classList.add('visible');
             } else if (element.classList.contains('bar-wrapper')) {
                 is_dragging = true;
             }
 
-            bar_wrapper.classList.add('active');
-
             if (this.popup) this.popup.hide();
 
             x_on_start = e.offsetX || e.layerX;
@@ -1316,6 +1315,7 @@ export default class Gantt {
             is_dragging = false;
             is_resizing_left = false;
             is_resizing_right = false;
+            document.querySelector('.visible').classList.remove('visible');
         });
 
         $.on(this.$svg, 'mouseup', (e) => {
@@ -1479,9 +1479,6 @@ export default class Gantt {
     }
 
     unselect_all() {
-        [...this.$svg.querySelectorAll('.bar-wrapper')].forEach((el) => {
-            el.classList.remove('active');
-        });
         if (this.popup) this.popup.parent.classList.add('hide');
         this.$container
             .querySelectorAll('.date-range-highlight')
diff --git a/src/styles/gantt.css b/src/styles/gantt.css
index 67a7019..c9f549b 100644
--- a/src/styles/gantt.css
+++ b/src/styles/gantt.css
@@ -137,7 +137,7 @@
         text-align: center;
         height: 30px;
         border-radius: 0;
-        border: 1px dotted grey;
+        border: 1px solid grey;
         border-right: none;
         color: var(--g-text-dark);
         padding: 4px 10px;
@@ -150,7 +150,7 @@
 
     & .side-header *:first-child {
         border-radius: 0 8px 8px 0;
-        border-right: 1px dotted grey;
+        border-right: 1px solid grey;
     }
 
     & .side-header *:last-child {
@@ -298,7 +298,8 @@
         fill: var(--g-handle-color);
         opacity: 0;
         transition: opacity 0.3s ease;
-        &.active {
+        &.active,
+        &.visible {
             cursor: ew-resize;
             opacity: 1;
         }