From e9931bde248a9cd6d61894635dd72260a45f6527 Mon Sep 17 00:00:00 2001
From: Safwan Samsudeen <safwansamsudeen.c@gmail.com>
Date: Sun, 28 Apr 2024 17:46:01 +0530
Subject: [PATCH] feat: improved progress handle

---
 src/bar.js     | 23 +++++++++++++++++------
 src/gantt.scss | 12 ++++++++++--
 src/index.js   |  2 +-
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/bar.js b/src/bar.js
index af6cf5a..254da13 100644
--- a/src/bar.js
+++ b/src/bar.js
@@ -149,7 +149,7 @@ export default class Bar {
     $date_highlight.classList.add('date-highlight')
     $date_highlight.style.height = this.height * 0.8 + 'px'
     $date_highlight.style.width = this.width + 'px'
-    $date_highlight.style.top = this.gantt.options.header_height - 24 + 'px'
+    $date_highlight.style.top = this.gantt.options.header_height - 25 + 'px'
     $date_highlight.style.left = x + 'px'
     this.$date_highlight = $date_highlight
     this.gantt.$lower_header.prepend($date_highlight)
@@ -254,13 +254,24 @@ export default class Bar {
 
   get_progress_polygon_points() {
     const bar_progress = this.$bar_progress;
+    let icon_width = 10;
+    let icon_height = 15;
+
     return [
-      bar_progress.getEndX() - 6,
-      bar_progress.getY() + bar_progress.getHeight() + 8,
-      bar_progress.getEndX() + 6,
-      bar_progress.getY() + bar_progress.getHeight() + 8,
+      bar_progress.getEndX() - icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
+
       bar_progress.getEndX(),
-      bar_progress.getY() + bar_progress.getHeight() + 0.5,
+      bar_progress.getY() + bar_progress.getHeight() / 2 - icon_height / 2,
+
+      bar_progress.getEndX() + icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
+
+      bar_progress.getEndX(),
+      bar_progress.getY() + bar_progress.getHeight() / 2 + icon_height / 2,
+
+      bar_progress.getEndX() - icon_width / 2,
+      bar_progress.getY() + bar_progress.getHeight() / 2,
     ];
   }
 
diff --git a/src/gantt.scss b/src/gantt.scss
index 735f592..4bf6eaf 100644
--- a/src/gantt.scss
+++ b/src/gantt.scss
@@ -38,11 +38,11 @@ $dark-blue: #2c94ec !default;
   }
 
   .upper-header {
-    height: 50px;
+    height: 40px;
   }
 
   .lower-header {
-    height: 56px;
+    height: 30px;
   }
 
   .lower-text {
@@ -218,6 +218,10 @@ $dark-blue: #2c94ec !default;
     .handle {
       fill: $handle-color-important;
     }
+
+    .handle.progress {
+      fill: $text-light;
+    }
   }
 
 
@@ -229,6 +233,10 @@ $dark-blue: #2c94ec !default;
     transition: opacity 0.3s ease;
   }
 
+  .handle.progress {
+    fill: $text-muted;
+  }
+
   .bar-wrapper {
     cursor: pointer;
     outline: none;
diff --git a/src/index.js b/src/index.js
index d6211a9..255fcef 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1182,7 +1182,7 @@ export default class Gantt {
     this.$svg.innerHTML = "";
     this.$header?.remove?.()
     this.$current_highlight?.remove?.()
-    this.$popup_wrapper?.remove?.()
+    this.$popup_wrapper.innerHTML = ''
   }
 }