fix: bugs in popup

src/bar.js

@@ -335,49 +335,46 @@ export default class Bar {
             ]);
         });
 
-        this.popup_opened = false;
         if (this.gantt.options.popup_on === 'click') {
             $.on(this.group, 'mouseup', (e) => {
                 const posX = e.offsetX || e.layerX;
-                const cx = +this.$handle_progress.getAttribute('cx');
+                if (this.$handle_progress) {
-                if (cx > posX - 1 && cx < posX + 1) return;
+                    const cx = +this.$handle_progress.getAttribute('cx');
-                if (this.gantt.bar_being_dragged) return;
+                    console.log(cx, posX, this.gantt.bar_being_dragged);
-                if (!this.popup_opened)
+                    if (cx > posX - 1 && cx < posX + 1) return;
-                    this.gantt.show_popup({
+                    if (this.gantt.bar_being_dragged) return;
-                        x: e.offsetX || e.layerX,
+                }
-                        y: e.offsetY || e.layerY,
+                this.gantt.show_popup({
-                        task: this.task,
+                    x: e.offsetX || e.layerX,
-                        target: this.$bar,
+                    y: e.offsetY || e.layerY,
-                    });
+                    task: this.task,
-                this.popup_opened = !this.popup_opened;
+                    target: this.$bar,
-                this.gantt.$container
+                });
-                    .querySelector(`.highlight-${task_id}`)
-                    .classList.toggle('hide');
-            });
-        } else {
-            let timeout;
-            $.on(this.group, 'mouseenter', (e) => {
-                const pos = e.offsetX || e.layerX;
-                timeout = setTimeout(() => {
-                    this.gantt.show_popup({
-                        x: e.offsetX || e.layerX,
-                        y: e.offsetY || e.layerY,
-                        task: this.task,
-                        target: this.$bar,
-                    });
-                    this.gantt.$container
-                        .querySelector(`.highlight-${task_id}`)
-                        .classList.remove('hide');
-                }, 200);
-            });
-            $.on(this.group, 'mouseleave', () => {
-                clearTimeout(timeout);
-                this.gantt.popup?.hide?.();
-                this.gantt.$container
-                    .querySelector(`.highlight-${task_id}`)
-                    .classList.add('hide');
             });
         }
+        let timeout;
+        $.on(this.group, 'mouseenter', (e) => {
+            timeout = setTimeout(() => {
+                if (this.gantt.options.popup_on === 'hover')
+                    this.gantt.show_popup({
+                        x: e.offsetX || e.layerX,
+                        y: e.offsetY || e.layerY,
+                        task: this.task,
+                        target: this.$bar,
+                    });
+                this.gantt.$container
+                    .querySelector(`.highlight-${task_id}`)
+                    .classList.remove('hide');
+            }, 200);
+        });
+        $.on(this.group, 'mouseleave', () => {
+            clearTimeout(timeout);
+            if (this.gantt.options.popup_on === 'hover')
+                this.gantt.popup?.hide?.();
+            this.gantt.$container
+                .querySelector(`.highlight-${task_id}`)
+                .classList.add('hide');
+        });
 
         $.on(this.group, 'click', () => {
             this.gantt.trigger_event('click', [this.task]);

src/index.js

@@ -397,12 +397,16 @@ export default class Gantt {
 
     make_grid_background() {
         const grid_width = this.dates.length * this.config.column_width;
-        const grid_height =
+        const grid_height = Math.max(
             this.config.header_height +
-            this.options.padding +
+                this.options.padding +
-            (this.options.bar_height + this.options.padding) *
+                (this.options.bar_height + this.options.padding) *
-                this.tasks.length -
+                    this.tasks.length -
-            10;
+                10,
+            this.options.container_height !== 'auto'
+                ? this.options.container_height
+                : 0,
+        );
 
         createSVG('rect', {
             x: 0,
@@ -417,6 +421,9 @@ export default class Gantt {
             height: grid_height,
             width: '100%',
         });
+        this.grid_height = grid_height;
+        if (this.options.container_height === 'auto')
+            this.$container.style.height = grid_height + 'px';
     }
 
     make_grid_rows() {
@@ -426,7 +433,11 @@ export default class Gantt {
         const row_height = this.options.bar_height + this.options.padding;
 
         let y = this.config.header_height;
-        for (let _ of this.tasks) {
+        for (
+            let y = this.config.header_height;
+            y < this.grid_height;
+            y += row_height
+        ) {
             createSVG('rect', {
                 x: 0,
                 y,
@@ -435,8 +446,6 @@ export default class Gantt {
                 class: 'grid-row',
                 append_to: rows_layer,
             });
-
-            y += this.options.bar_height + this.options.padding;
         }
     }
 
@@ -503,9 +512,7 @@ export default class Gantt {
         if (this.options.lines === 'none') return;
         let tick_x = 0;
         let tick_y = this.config.header_height;
-        let tick_height =
+        let tick_height = this.grid_height - this.config.header_height;
-            (this.options.bar_height + this.options.padding) *
-            this.tasks.length;
 
         let $lines_layer = createSVG('g', {
             class: 'lines_layer',
@@ -517,7 +524,11 @@ export default class Gantt {
         const row_width = this.dates.length * this.config.column_width;
         const row_height = this.options.bar_height + this.options.padding;
         if (this.options.lines !== 'vertical') {
-            for (let _ of this.tasks) {
+            for (
+                let y = this.config.header_height;
+                y < this.grid_height;
+                y += row_height
+            ) {
                 createSVG('line', {
                     x1: 0,
                     y1: row_y + row_height,
@@ -618,9 +629,7 @@ export default class Gantt {
                         ) /
                             this.config.step) *
                         this.config.column_width;
-                    const height =
+                    const height = this.grid_height - this.config.header_height;
-                        (this.options.bar_height + this.options.padding) *
-                        this.tasks.length;
                     const d_formatted = date_utils
                         .format(d, 'YYYY-MM-DD', this.options.language)
                         .replace(' ', '_');
@@ -671,14 +680,11 @@ export default class Gantt {
 
         const left =
             (diff_in_units / this.config.step) * this.config.column_width;
-        const height =
-            (this.options.bar_height + this.options.padding) *
-            this.tasks.length;
 
         this.$current_highlight = this.create_el({
             top: this.config.header_height,
             left,
-            height,
+            height: this.grid_height - this.config.header_height,
             classes: 'current-highlight',
             append_to: this.$container,
         });
@@ -886,15 +892,13 @@ export default class Gantt {
     }
 
     set_dimensions() {
-        const { width: cur_width, height } = this.$svg.getBoundingClientRect();
+        const { width: cur_width } = this.$svg.getBoundingClientRect();
         const actual_width = this.$svg.querySelector('.grid .grid-row')
             ? this.$svg.querySelector('.grid .grid-row').getAttribute('width')
             : 0;
         if (cur_width < actual_width) {
             this.$svg.setAttribute('width', actual_width);
         }
-        if (this.options.container_height === 'auto')
-            this.$container.style.height = height + 'px';
     }
 
     set_scroll_position(date) {
@@ -1084,9 +1088,16 @@ export default class Gantt {
         this.$svg.onclick = (e) => {
             if (e.target.classList.contains('grid-row')) this.unselect_all();
         };
-        $.on(this.$svg, 'mousemove', '.bar-wrapper, .handle', () => {
+
-            if (this.bar_being_dragged === false) this.bar_being_dragged = true;
+        let pos = 0;
+        $.on(this.$svg, 'mousemove', '.bar-wrapper, .handle', (e) => {
+            if (
+                this.bar_being_dragged === false &&
+                Math.abs((e.offsetX || e.layerX) - pos) > 10
+            )
+                this.bar_being_dragged = true;
         });
+
         $.on(this.$svg, 'mousedown', '.bar-wrapper, .handle', (e, element) => {
             const bar_wrapper = $.closest('.bar-wrapper', element);
             bars.forEach((bar) => bar.group.classList.remove('active'));
@@ -1118,6 +1129,7 @@ export default class Gantt {
             bars = ids.map((id) => this.get_bar(id));
 
             this.bar_being_dragged = false;
+            pos = x_on_start;
 
             bars.forEach((bar) => {
                 const $bar = bar.$bar;

src/styles/gantt.css

@@ -312,8 +312,8 @@
         cursor: pointer;
 
         & .bar {
-            -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.9));
+            -webkit-filter: drop-shadow(1px 1px 2px rgba(15, 15, 15, 0.2));
-            filter: drop-shadow(3px 3px 2px rgba(17, 43, 66, 0.26));
+            filter: drop-shadow(1px 1px 2px rgba(15, 15, 15, 0.2));
             border-radius: 3px;
         }