feat: api to update task; fix: couple bugs

src/bar.js

@@ -4,7 +4,27 @@ import { $, createSVG, animateSVG } from './svg_utils';
 export default class Bar {
     constructor(gantt, task) {
         this.set_defaults(gantt, task);
-        this.prepare();
+        this.prepare_wrappers();
+        this.prepare_helpers();
+        this.refresh();
+    }
+
+    refresh() {
+        this.bar_group.innerHTML = '';
+        this.handle_group.innerHTML = '';
+        if (this.task.custom_class) {
+            this.group.classList.add(this.task.custom_class);
+        } else {
+            this.group.classList = ['bar-wrapper'];
+        }
+
+        if (this.task.important) {
+            this.group.classList.add('important');
+        } else {
+            this.group.classList.remove('important');
+        }
+
+        this.prepare_values();
         this.draw();
         this.bind();
     }
@@ -16,21 +36,7 @@ export default class Bar {
         this.name = this.name || '';
     }
 
-    prepare() {
+    prepare_wrappers() {
-        this.prepare_values();
-        this.prepare_helpers();
-    }
-
-    prepare_values() {
-        this.invalid = this.task.invalid;
-        this.height = this.gantt.options.bar_height;
-        this.image_size = this.height - 5;
-        this.compute_x();
-        this.compute_y();
-        this.compute_duration();
-        this.corner_radius = this.gantt.options.bar_corner_radius;
-        this.width = this.gantt.config.column_width * this.duration;
-
         this.group = createSVG('g', {
             class:
                 'bar-wrapper' +
@@ -46,7 +52,18 @@ export default class Bar {
             class: 'handle-group',
             append_to: this.group,
         });
+    }
 
+    prepare_values() {
+        this.invalid = this.task.invalid;
+        this.height = this.gantt.options.bar_height;
+        this.image_size = this.height - 5;
+        this.compute_x();
+        this.compute_y();
+        this.compute_duration();
+        this.corner_radius = this.gantt.options.bar_corner_radius;
+        this.width = this.gantt.config.column_width * this.duration;
+        this.task.progress = Math.floor(this.task.progress * 100) / 100;
         if (this.task.progress < 0) this.task.progress = 0;
         if (this.task.progress > 100) this.task.progress = 100;
     }
@@ -330,6 +347,10 @@ export default class Bar {
                 this.gantt.$container
                     .querySelector(`.highlight-${task_id}`)
                     .classList.toggle('hide');
+                console.log(
+                    this.gantt.$container.querySelector(`.highlight-${task_id}`)
+                        .classList,
+                );
             });
         } else {
             let timeout;
@@ -485,7 +506,6 @@ export default class Bar {
             x_in_units * this.gantt.config.step,
             this.gantt.config.unit,
         );
-        console.log(date_utils.diff(new_start_date, this.gantt.gantt_start));
 
         const width_in_units = bar.getWidth() / this.gantt.config.column_width;
         const new_end_date = date_utils.add(

src/defaults.js

@@ -145,25 +145,16 @@ const DEFAULT_OPTIONS = {
         if (!ctx.chart.options.readonly) {
             ctx.add_action('Toggle Priority', (task, chart) => {
                 task.important = !task.important;
-                chart.refresh(
+                chart.update_task(task);
-                    chart.tasks.map((t) => (t.id !== task.id ? t : task)),
-                );
             });
             if (!ctx.chart.options.readonly_progress) {
                 ctx.add_action('+', (task, chart) => {
-                    task.progress +=
+                    task.progress += (1 / task.actual_duration) * 100;
-                        Math.floor((1 / task.actual_duration) * 10000) / 100;
+                    chart.update_task(task);
-                    chart.refresh(
-                        chart.tasks.map((t) => (t.id !== task.id ? t : task)),
-                    );
                 });
                 ctx.add_action('-', (task, chart) => {
-                    task.progress -=
+                    task.progress -= (1 / task.actual_duration) * 100;
-                        Math.floor((1 / task.actual_duration) * 10000) / 100;
+                    chart.update_task(task);
-                    console.log(task.progress);
-                    chart.refresh(
-                        chart.tasks.map((t) => (t.id !== task.id ? t : task)),
-                    );
                 });
             }
         }

src/index.js

@@ -217,6 +217,11 @@ export default class Gantt {
         this.change_view_mode();
     }
 
+    update_task(task) {
+        let bar = this.bars[task._index];
+        bar.refresh();
+    }
+
     change_view_mode(mode = this.options.view_mode) {
         if (typeof mode === 'string') {
             mode = this.options.view_modes.find((d) => d.name === mode);
@@ -607,7 +612,7 @@ export default class Gantt {
                         (this.options.bar_height + this.options.padding) *
                         this.tasks.length;
                     const d_formatted = date_utils
-                        .format(d, 'YYYY-MM-DD')
+                        .format(d, 'YYYY-MM-DD', this.options.language)
                         .replace(' ', '_');
 
                     if (labels[d]) {
@@ -797,7 +802,11 @@ export default class Gantt {
         return {
             date,
             formatted_date: sanitize(
-                date_utils.format(date, this.config.format_string),
+                date_utils.format(
+                    date,
+                    this.config.format_string,
+                    this.options.language,
+                ),
             ),
             column_width: this.config.column_width,
             x,
@@ -900,10 +909,15 @@ export default class Gantt {
             this.config.unit,
         );
 
-        let current_upper = this.config.view_mode.upper_text(this.current_date);
+        let current_upper = this.config.view_mode.upper_text(
+            this.current_date,
+            null,
+            this.options.language,
+        );
         let $el = this.upperTexts.find(
             (el) => el.textContent === current_upper,
         );
+        console.log(current_upper, $el);
 
         // Recalculate
         this.current_date = date_utils.add(
@@ -912,7 +926,11 @@ export default class Gantt {
                 this.config.column_width,
             this.config.unit,
         );
-        current_upper = this.config.view_mode.upper_text(this.current_date);
+        current_upper = this.config.view_mode.upper_text(
+            this.current_date,
+            null,
+            this.options.language,
+        );
         $el = this.upperTexts.find((el) => el.textContent === current_upper);
         $el.classList.add('current-upper');
         this.$current = $el;
@@ -992,8 +1010,8 @@ export default class Gantt {
             h.onmouseenter = (e) => {
                 timeout = setTimeout(() => {
                     label.classList.add('show');
-                    label.style.left = e.offsetX + 'px';
+                    label.style.left = (e.offsetX || e.layerX) + 'px';
-                    label.style.top = e.offsetY + 'px';
+                    label.style.top = (e.offsetY || e.layerY) + 'px';
                 }, 300);
             };
 
@@ -1126,6 +1144,8 @@ export default class Gantt {
 
             let current_upper = this.config.view_mode.upper_text(
                 this.current_date,
+                null,
+                this.options.language,
             );
             let $el = this.upperTexts.find(
                 (el) => el.textContent === current_upper,
@@ -1139,7 +1159,11 @@ export default class Gantt {
                     this.config.step,
                 this.config.unit,
             );
-            current_upper = this.config.view_mode.upper_text(this.current_date);
+            current_upper = this.config.view_mode.upper_text(
+                this.current_date,
+                null,
+                this.options.language,
+            );
             $el = this.upperTexts.find(
                 (el) => el.textContent === current_upper,
             );
@@ -1412,6 +1436,9 @@ export default class Gantt {
             el.classList.remove('active');
         });
         if (this.popup) this.popup.parent.classList.add('hide');
+        this.$container
+            .querySelectorAll('.date-range-highlight')
+            .forEach((k) => k.classList.add('hide'));
     }
 
     view_is(modes) {