@workiom/frappe-gantt 1.0.19 → 1.0.21

package/src/index.js

@@ -1,5 +1,6 @@
 import date_utils from './date_utils';
 import { $, createSVG } from './svg_utils';
+import { compute_dependency_shifts } from './dependency_shifting';
 
 import Arrow from './arrow';
 import Bar from './bar';
@@ -244,20 +245,17 @@ export default class Gantt {
                     }
                 }
 
-                // dependencies
-                if (
-                    typeof task.dependencies === 'string' ||
-                    !task.dependencies
-                ) {
-                    let deps = [];
-                    if (task.dependencies) {
-                        deps = task.dependencies
-                            .split(',')
-                            .map((d) => d.trim().replaceAll(' ', '_'))
-                            .filter((d) => d);
-                    }
-                    task.dependencies = deps;
+                // dependencies — must be an array of { id, type? } objects
+                if (typeof task.dependencies === 'string' ||
+                    (Array.isArray(task.dependencies) && task.dependencies.some((d) => typeof d === 'string'))) {
+                    console.warn(`[frappe-gantt] Task "${task.id}": dependencies must be an array of {id, type?} objects. String format is no longer supported.`);
+                }
+                if (!Array.isArray(task.dependencies)) {
+                    task.dependencies = [];
                 }
+                task.dependencies = task.dependencies
+                    .filter((d) => d && typeof d.id === 'string')
+                    .map((d) => ({ ...d, id: d.id.replaceAll(' ', '_') }));
 
                 // uids
                 if (!task.id) {
@@ -283,8 +281,8 @@ export default class Gantt {
         this.dependency_map = {};
         for (let t of this.tasks) {
             for (let d of t.dependencies) {
-                this.dependency_map[d] = this.dependency_map[d] || [];
-                this.dependency_map[d].push(t.id);
+                this.dependency_map[d.id] = this.dependency_map[d.id] || [];
+                this.dependency_map[d.id].push(t.id);
             }
         }
     }
@@ -297,7 +295,35 @@ export default class Gantt {
     update_task(id, new_details) {
         let task = this.tasks.find((t) => t.id === id);
         let bar = this.bars[task._index];
+
+        // Check if dependencies are being updated
+        const dependenciesChanged = new_details.dependencies !== undefined;
+
         Object.assign(task, new_details);
+
+        // If dependencies changed, rebuild arrows
+        if (dependenciesChanged) {
+            // Normalize to array of {id, type?} objects; non-array values (e.g. null) become []
+            if (!Array.isArray(task.dependencies)) {
+                task.dependencies = [];
+            }
+            task.dependencies = task.dependencies
+                .filter((d) => d && typeof d.id === 'string')
+                .map((d) => ({ ...d, id: d.id.replaceAll(' ', '_') }));
+
+            // Rebuild dependency map
+            this.setup_dependencies();
+
+            // Clear existing arrows from the DOM
+            this.layers.arrow.innerHTML = '';
+
+            // Recreate all arrows
+            this.make_arrows();
+
+            // Remap arrows on bars
+            this.map_arrows_on_bars();
+        }
+
         bar.refresh();
     }
 
@@ -1061,21 +1087,23 @@ export default class Gantt {
         for (let task of this.tasks) {
             let arrows = [];
             arrows = task.dependencies
-                .map((task_id) => {
-                    const dependency = this.get_task(task_id);
+                .map((dep) => {
+                    const dependency = this.get_task(dep.id);
                     if (!dependency) return;
 
-                    // Skip if either task has no bar (e.g., tasks without dates)
                     const from_bar = this.bars[dependency._index];
                     const to_bar = this.bars[task._index];
                     if (!from_bar || !to_bar) return;
 
+                    const resolved_type = dep.type || this.options.dependencies_type || 'finish-to-start';
                     const arrow = new Arrow(
                         this,
-                        from_bar, // from_task
-                        to_bar, // to_task
+                        from_bar,
+                        to_bar,
+                        resolved_type,
                     );
                     this.layers.arrow.appendChild(arrow.element);
+                    this.layers.arrow.appendChild(arrow.hit_element);
                     return arrow;
                 })
                 .filter(Boolean); // filter falsy values
@@ -1099,8 +1127,8 @@ export default class Gantt {
 
             let maxEF = 0;
             if (task.dependencies && task.dependencies.length > 0) {
-                task.dependencies.forEach(dep_id => {
-                    const dep_task = this.get_task(dep_id);
+                task.dependencies.forEach(dep => {
+                    const dep_task = this.get_task(dep.id);
                     if (dep_task) {
                         const dep_values = calculateES(dep_task);
                         maxEF = Math.max(maxEF, dep_values.ef);
@@ -1129,7 +1157,7 @@ export default class Gantt {
 
             // Find tasks that depend on this task
             const dependents = this.tasks.filter(t =>
-                t.dependencies && t.dependencies.includes(task.id)
+                t.dependencies && t.dependencies.some(d => d.id === task.id)
             );
 
             let minLS = projectDuration;
@@ -1460,20 +1488,7 @@ export default class Gantt {
             x_on_start = e.offsetX || e.layerX;
 
             parent_bar_id = bar_wrapper.getAttribute('data-id');
-            const parent_bar = this.get_bar(parent_bar_id);
-            const dependencies_type = parent_bar.task.dependencies_type || this.options.dependencies_type;
-
-            let ids;
-            // Only move dependencies during drag if dependencies_type is 'fixed' and move_dependencies is true
-            if (this.options.move_dependencies && dependencies_type === 'fixed') {
-                ids = [
-                    parent_bar_id,
-                    ...this.get_all_dependent_tasks(parent_bar_id),
-                ];
-            } else {
-                ids = [parent_bar_id];
-            }
-            bars = ids.map((id) => this.get_bar(id));
+            bars = [this.get_bar(parent_bar_id)];
 
             this.bar_being_dragged = false;
             pos = x_on_start;
@@ -1695,22 +1710,71 @@ export default class Gantt {
                 });
             });
 
-            // Update dependent tasks based on dependencies_type
-            // Only update for the parent bar that was actually moved
-            // DISABLED: Allow invalid dependencies instead of auto-updating
-            // const parent_bar = this.get_bar(parent_bar_id);
-            // if (parent_bar && parent_bar.$bar.finaldx) {
-            //     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();
             }
 
+            // Apply dependency shifting
+            if (tasks_changed.length > 0 && this.options.dependency_shifting !== 'none') {
+                // Derive shift direction based on mode and interaction type
+                const _mode = this.options.dependency_shifting;
+                let direction;
+                if (is_resizing_left) {
+                    // maintain_buffer_downstream: left-resize does nothing
+                    direction = _mode === 'maintain_buffer_downstream' ? 'none' : 'upstream';
+                } else if (is_resizing_right) {
+                    direction = 'downstream';
+                } else {
+                    // drag: maintain_buffer_downstream pushes downstream only;
+                    // maintain_buffer_all and consume_buffer propagate both ways
+                    direction = _mode === 'maintain_buffer_downstream' ? 'downstream' : 'both';
+                }
+                tasks_changed.forEach(({ task }) => {
+                    if (direction === 'none') return;
+                    const dragged_bar = bars.find((b) => b.task.id === task.id);
+                    if (!dragged_bar || !dragged_bar.$bar.finaldx) return;
+
+                    const units_moved = dragged_bar.$bar.finaldx / this.config.column_width;
+                    const ms_per_unit =
+                        this.config.unit === 'hour'  ? 3600000 :
+                        this.config.unit === 'day'   ? 86400000 :
+                        this.config.unit === 'month' ? 30 * 86400000 :
+                        this.config.unit === 'year'  ? 365 * 86400000 : 86400000;
+                    const deltaMs = units_moved * this.config.step * ms_per_unit;
+
+                    const shift_map = compute_dependency_shifts(
+                        this.tasks,
+                        task.id,
+                        deltaMs,
+                        this.options.dependency_shifting,
+                        direction,
+                    );
+
+                    shift_map.forEach((shiftMs, taskId) => {
+                        const affected_bar = this.get_bar(taskId);
+                        if (!affected_bar) return;
+
+                        const affected_task = affected_bar.task;
+                        const new_start = new Date(affected_task._start.getTime() + shiftMs);
+                        const new_x =
+                            (date_utils.diff(new_start, this.gantt_start, this.config.unit) /
+                                this.config.step) *
+                            this.config.column_width;
+
+                        affected_bar.update_bar_position({ x: new_x });
+                        affected_bar.update_arrow_position();
+
+                        this.trigger_event('after_date_change', [
+                            affected_task,
+                            affected_task._start,
+                            date_utils.add(affected_task._end, -1, 'second'),
+                        ]);
+                    });
+                });
+            }
+
             // Trigger on_after_date_change for all tasks that changed
             if (tasks_changed.length > 0) {
                 tasks_changed.forEach(({task, start, end}) => {
@@ -1718,6 +1782,10 @@ export default class Gantt {
                 });
             }
 
+            // Reset finaldx so subsequent mouseup events (e.g. from scrolling)
+            // don't re-trigger date changes or dependency shifting
+            bars.forEach((bar) => { bar.$bar.finaldx = 0; });
+
             // Reset drag flags after handling callbacks
             is_dragging = false;
             is_resizing_left = false;
@@ -1913,110 +1981,6 @@ export default class Gantt {
         return out.filter(Boolean);
     }
 
-    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 changed_tasks;
-
-        // Get all tasks that depend on this task
-        const dependent_task_ids = this.dependency_map[parent_bar.task.id] || [];
-
-        dependent_task_ids.forEach(dependent_id => {
-            const dependent_bar = this.get_bar(dependent_id);
-            if (!dependent_bar) return;
-
-            const dependent_task = dependent_bar.task;
-            const dep_type = dependent_task.dependencies_type || this.options.dependencies_type;
-
-            // Calculate new dates based on dependency type
-            let new_start, new_end;
-            const task_duration = date_utils.diff(dependent_task._end, dependent_task._start, 'hour');
-            let should_update = false;
-
-            switch(dep_type) {
-                case 'finish-to-start':
-                    // Dependent task starts when parent task finishes
-                    // Only update if parent ends after dependent currently starts
-                    if (parent_bar.task._end > dependent_task._start) {
-                        new_start = new Date(parent_bar.task._end);
-                        new_end = date_utils.add(new_start, task_duration, 'hour');
-                        should_update = true;
-                    }
-                    break;
-
-                case 'start-to-start':
-                    // Dependent task starts when parent task starts
-                    // Only update if parent starts after dependent currently starts
-                    if (parent_bar.task._start > dependent_task._start) {
-                        new_start = new Date(parent_bar.task._start);
-                        new_end = date_utils.add(new_start, task_duration, 'hour');
-                        should_update = true;
-                    }
-                    break;
-
-                case 'finish-to-finish':
-                    // Dependent task finishes when parent task finishes
-                    // Only update if parent ends after dependent currently ends
-                    if (parent_bar.task._end > dependent_task._end) {
-                        new_end = new Date(parent_bar.task._end);
-                        new_start = date_utils.add(new_end, -task_duration, 'hour');
-                        should_update = true;
-                    }
-                    break;
-
-                case 'start-to-finish':
-                    // Dependent task finishes when parent task starts
-                    // Only update if parent starts after dependent currently ends
-                    if (parent_bar.task._start > dependent_task._end) {
-                        new_end = new Date(parent_bar.task._start);
-                        new_start = date_utils.add(new_end, -task_duration, 'hour');
-                        should_update = true;
-                    }
-                    break;
-
-                default:
-                    return;
-            }
-
-            // Only update if constraint requires it
-            if (!should_update) return;
-
-            // Update the dependent task dates
-            dependent_task._start = new_start;
-            dependent_task._end = new_end;
-
-            // Refresh the dependent bar
-            dependent_bar.compute_x();
-            dependent_bar.compute_duration();
-            dependent_bar.update_bar_position({
-                x: dependent_bar.x,
-                width: dependent_bar.width
-            });
-
-            // Trigger date_change event for the dependent task
-            this.trigger_event('date_change', [
-                dependent_task,
-                new_start,
-                date_utils.add(new_end, -1, 'second'),
-            ]);
-
-            // 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) {
         let unit_length = 1;
         const default_snap =

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-hover-color-dark: #60a5fa;
     --g-arrow-critical-color-dark: #f5c044;
     --g-arrow-invalid-color-dark: #ff7676;
     --g-resize-handle-hover-dark: rgba(96, 165, 250, 0.4);
@@ -39,6 +40,10 @@
         stroke: var(--g-arrow-invalid-color-dark);
     }
 
+    & .arrow-hover {
+        stroke: var(--g-arrow-hover-color-dark);
+    }
+
     & .bar {
         fill: var(--g-bar-color-dark);
         stroke: none;

package/src/styles/gantt.css

@@ -287,6 +287,11 @@
         stroke: var(--g-arrow-invalid-color);
     }
 
+    & .arrow-hover {
+        stroke: var(--g-arrow-hover-color);
+    }
+
+
     & .bar-wrapper .bar {
         fill: var(--g-bar-color);
         stroke: var(--g-bar-border);
@@ -294,6 +299,14 @@
         transition: stroke-width 0.3s ease;
     }
 
+    & .bar-wrapper .bar.bar-arrow-critical {
+        outline-color: var(--g-arrow-critical-color);
+    }
+
+    & .bar-wrapper .bar.bar-arrow-invalid {
+        outline-color: var(--g-arrow-invalid-color);
+    }
+
     & .bar-progress {
         fill: var(--g-progress-color);
         border-radius: 4px;

package/src/styles/light.css

@@ -1,5 +1,6 @@
 :root {
     --g-arrow-color: #1f2937;
+    --g-arrow-hover-color: #007bff;
     --g-arrow-critical-color: #f5c044;
     --g-arrow-invalid-color: #ff7676;
     --g-bar-color: #fff;