@workiom/frappe-gantt 1.0.5 → 1.0.7

package/src/index.js

@@ -879,6 +879,12 @@ export default class Gantt {
 
     make_arrows() {
         this.arrows = [];
+
+        // Calculate critical path if enabled
+        if (this.options.critical_path) {
+            this.calculate_critical_path();
+        }
+
         for (let task of this.tasks) {
             let arrows = [];
             arrows = task.dependencies
@@ -898,6 +904,95 @@ export default class Gantt {
         }
     }
 
+    calculate_critical_path() {
+        // Reset critical path flags
+        this.tasks.forEach(task => task._is_critical = false);
+
+        // Calculate Early Start (ES) and Early Finish (EF) - Forward pass
+        const task_es_ef = {};
+        this.tasks.forEach(task => {
+            task_es_ef[task.id] = { es: 0, ef: 0, ls: 0, lf: 0 };
+        });
+
+        // Forward pass: Calculate ES and EF
+        const calculateES = (task) => {
+            if (task_es_ef[task.id].ef > 0) return task_es_ef[task.id];
+
+            let maxEF = 0;
+            if (task.dependencies && task.dependencies.length > 0) {
+                task.dependencies.forEach(dep_id => {
+                    const dep_task = this.get_task(dep_id);
+                    if (dep_task) {
+                        const dep_values = calculateES(dep_task);
+                        maxEF = Math.max(maxEF, dep_values.ef);
+                    }
+                });
+            }
+
+            task_es_ef[task.id].es = maxEF;
+            const duration = date_utils.diff(task._end, task._start, 'hour') / 24; // in days
+            task_es_ef[task.id].ef = maxEF + duration;
+
+            return task_es_ef[task.id];
+        };
+
+        // Calculate ES/EF for all tasks
+        this.tasks.forEach(task => calculateES(task));
+
+        // Find project completion time
+        const projectDuration = Math.max(...Object.values(task_es_ef).map(v => v.ef));
+
+        // Backward pass: Calculate LS and LF
+        const calculateLS = (task) => {
+            if (task_es_ef[task.id].ls > 0 || task_es_ef[task.id].lf > 0) {
+                return task_es_ef[task.id];
+            }
+
+            // Find tasks that depend on this task
+            const dependents = this.tasks.filter(t =>
+                t.dependencies && t.dependencies.includes(task.id)
+            );
+
+            let minLS = projectDuration;
+            if (dependents.length > 0) {
+                dependents.forEach(dep_task => {
+                    const dep_values = calculateLS(dep_task);
+                    minLS = Math.min(minLS, dep_values.ls);
+                });
+            }
+
+            const duration = date_utils.diff(task._end, task._start, 'hour') / 24; // in days
+            task_es_ef[task.id].lf = minLS;
+            task_es_ef[task.id].ls = minLS - duration;
+
+            return task_es_ef[task.id];
+        };
+
+        // Calculate LS/LF for all tasks
+        this.tasks.forEach(task => calculateLS(task));
+
+        // Identify critical path: tasks where ES = LS (or slack = 0)
+        this.tasks.forEach(task => {
+            const values = task_es_ef[task.id];
+            const slack = values.ls - values.es;
+            task._is_critical = Math.abs(slack) < 0.01; // Use small epsilon for float comparison
+        });
+    }
+
+    update_arrow_critical_path() {
+        // Update arrow styling based on new critical path calculation
+        this.arrows.forEach(arrow => {
+            const is_critical = arrow.from_task.task._is_critical === true &&
+                              arrow.to_task.task._is_critical === true;
+
+            if (is_critical) {
+                arrow.element.classList.add('arrow-critical');
+            } else {
+                arrow.element.classList.remove('arrow-critical');
+            }
+        });
+    }
+
     map_arrows_on_bars() {
         for (let bar of this.bars) {
             bar.arrows = this.arrows.filter((arrow) => {
@@ -1341,19 +1436,42 @@ export default class Gantt {
 
         $.on(this.$svg, 'mouseup', (e) => {
             this.bar_being_dragged = null;
+            const tasks_changed = [];
+
             bars.forEach((bar) => {
                 const $bar = bar.$bar;
                 if (!$bar.finaldx) return;
                 bar.date_changed();
                 bar.compute_progress();
                 bar.set_action_completed();
+                // Track tasks that changed
+                tasks_changed.push({
+                    task: bar.task,
+                    start: bar.task._start,
+                    end: date_utils.add(bar.task._end, -1, 'second')
+                });
             });
 
             // Update dependent tasks based on dependencies_type
             // Only update for the parent bar that was actually moved
             const parent_bar = this.get_bar(parent_bar_id);
             if (parent_bar && parent_bar.$bar.finaldx) {
-                this.update_dependent_tasks_by_type(parent_bar);
+                const dependent_changes = this.update_dependent_tasks_by_type(parent_bar);
+                // Add dependent task changes to the list
+                tasks_changed.push(...dependent_changes);
+            }
+
+            // Recalculate critical path if enabled and any bar was moved
+            if (this.options.critical_path && bars.some(bar => bar.$bar.finaldx)) {
+                this.calculate_critical_path();
+                this.update_arrow_critical_path();
+            }
+
+            // Trigger on_after_date_change for all tasks that changed
+            if (tasks_changed.length > 0) {
+                tasks_changed.forEach(({task, start, end}) => {
+                    this.trigger_event('after_date_change', [task, start, end]);
+                });
             }
         });
 
@@ -1462,9 +1580,10 @@ export default class Gantt {
 
     update_dependent_tasks_by_type(parent_bar) {
         const dependencies_type = parent_bar.task.dependencies_type || this.options.dependencies_type;
+        const changed_tasks = [];
 
         // Skip if using fixed dependency type (current behavior)
-        if (dependencies_type === 'fixed') return;
+        if (dependencies_type === 'fixed') return changed_tasks;
 
         // Get all tasks that depend on this task
         const dependent_task_ids = this.dependency_map[parent_bar.task.id] || [];
@@ -1548,9 +1667,19 @@ export default class Gantt {
                 date_utils.add(new_end, -1, 'second'),
             ]);
 
-            // Recursively update dependents of this task
-            this.update_dependent_tasks_by_type(dependent_bar);
+            // Track this changed task
+            changed_tasks.push({
+                task: dependent_task,
+                start: new_start,
+                end: date_utils.add(new_end, -1, 'second')
+            });
+
+            // Recursively update dependents of this task and collect their changes
+            const recursive_changes = this.update_dependent_tasks_by_type(dependent_bar);
+            changed_tasks.push(...recursive_changes);
         });
+
+        return changed_tasks;
     }
 
     get_snap_position(dx, ox) {

package/src/styles/dark.css

@@ -8,6 +8,7 @@
     --g-text-light-dark: #ececec;
     --g-text-color-dark: #f7f7f7;
     --g-progress-color: #8a8aff;
+    --g-arrow-critical-color-dark: #ff9999;
 }
 
 .dark > .gantt-container .gantt {
@@ -27,6 +28,10 @@
         stroke: var(--g-text-muted-dark);
     }
 
+    & .arrow-critical {
+        stroke: var(--g-arrow-critical-color-dark);
+    }
+
     & .bar {
         fill: var(--g-bar-color-dark);
         stroke: none;

package/src/styles/gantt.css

@@ -267,6 +267,10 @@
         stroke-width: 1.5;
     }
 
+    & .arrow-critical {
+        stroke: var(--g-arrow-critical-color);
+    }
+
     & .bar-wrapper .bar {
         fill: var(--g-bar-color);
         stroke: var(--g-bar-border);
@@ -340,4 +344,35 @@
             }
         }
     }
+
+    & .add-task-icon {
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+
+        & .add-task-icon-bg {
+            fill: var(--g-bar-color);
+            stroke: var(--g-bar-border);
+            stroke-width: 1;
+            transition: all 0.2s ease;
+        }
+
+        & .add-task-icon-plus {
+            stroke: var(--g-text-dark);
+            stroke-width: 2;
+            stroke-linecap: round;
+            transition: stroke 0.2s ease;
+        }
+
+        &.active,
+        &:hover {
+            & .add-task-icon-bg {
+                fill: var(--g-progress-color);
+                stroke: var(--g-progress-color);
+            }
+
+            & .add-task-icon-plus {
+                stroke: var(--g-text-light);
+            }
+        }
+    }
 }

package/src/styles/light.css

@@ -1,5 +1,6 @@
 :root {
     --g-arrow-color: #1f2937;
+    --g-arrow-critical-color: #ff7676;
     --g-bar-color: #fff;
     --g-bar-border: #fff;
     --g-tick-color-thick: #ededed;