@workiom/frappe-gantt 1.0.19 → 1.0.21

package/src/arrow.js

@@ -1,12 +1,14 @@
 import { createSVG } from './svg_utils';
 
 export default class Arrow {
-    constructor(gantt, from_task, to_task) {
+    constructor(gantt, from_task, to_task, dependency_type) {
         this.gantt = gantt;
         this.from_task = from_task;
         this.to_task = to_task;
+        this.dependency_type = dependency_type;
         this.is_critical = this.check_critical_path();
         this.is_invalid = this.check_invalid_dependency();
+        this.is_hovered = false;
 
         this.calculate_path();
         this.draw();
@@ -21,18 +23,11 @@ export default class Arrow {
     }
 
     check_invalid_dependency() {
-        const dependencies_type = this.to_task.task.dependencies_type ||
-                                  this.gantt.options.dependencies_type;
-
-        // Fixed dependencies use old logic
-        if (dependencies_type === 'fixed') {
-            return this.to_task.$bar.getX() < this.from_task.$bar.getX();
-        }
-
+        const dependency_type = this.dependency_type;
         const parent_task = this.from_task.task;
         const child_task = this.to_task.task;
 
-        switch(dependencies_type) {
+        switch(dependency_type) {
             case 'finish-to-start':
                 // Child task cannot start before parent finishes
                 return child_task._start < parent_task._end;
@@ -54,81 +49,139 @@ export default class Arrow {
     }
 
     calculate_path() {
-        let start_x =
-            this.from_task.$bar.getX() + this.from_task.$bar.getWidth() / 2;
-
-        const condition = () =>
-            this.to_task.$bar.getX() < start_x + this.gantt.options.padding &&
-            start_x > this.from_task.$bar.getX() + this.gantt.options.padding;
-
-        while (condition()) {
-            start_x -= 10;
+        const opt = this.gantt.options;
+        const cfg = this.gantt.config;
+        const curve = opt.arrow_curve;
+        const padding = opt.padding;
+
+        // Anchor x positions
+        const right_A = this.from_task.$bar.getX() + this.from_task.$bar.getWidth();
+        const left_A  = this.from_task.$bar.getX();
+        const right_B = this.to_task.$bar.getX() + this.to_task.$bar.getWidth();
+        const left_B  = this.to_task.$bar.getX();
+
+        // Anchor y positions — vertical center of each bar row
+        const row_center = (task) =>
+            cfg.header_height +
+            opt.bar_height / 2 +
+            (opt.padding + opt.bar_height) * task.task._index +
+            opt.padding / 2;
+
+        const y_A = row_center(this.from_task);
+        const y_B = row_center(this.to_task);
+        const y_mid = (y_A + y_B) / 2;
+
+        switch (this.dependency_type) {
+            case 'finish-to-start':
+                this.path = this._path_finish_to_start(
+                    right_A, left_A, right_B, left_B, y_A, y_B, y_mid, padding, curve
+                );
+                break;
+            case 'start-to-start':
+                this.path = this._path_start_to_start(
+                    left_A, left_B, y_A, y_B, padding, curve
+                );
+                break;
+            case 'finish-to-finish':
+                this.path = this._path_finish_to_finish(
+                    right_A, right_B, y_A, y_B, padding, curve
+                );
+                break;
+            case 'start-to-finish':
+                this.path = this._path_start_to_finish(
+                    left_A, right_B, y_A, y_B, y_mid, padding, curve
+                );
+                break;
+            default:
+                this.path = this._path_finish_to_start(
+                    right_A, left_A, right_B, left_B, y_A, y_B, y_mid, padding, curve
+                );
         }
-        start_x -= 10;
-
-        let start_y =
-            this.gantt.config.header_height +
-            this.gantt.options.bar_height +
-            (this.gantt.options.padding + this.gantt.options.bar_height) *
-                this.from_task.task._index +
-            this.gantt.options.padding / 2;
-
-        let end_x = this.to_task.$bar.getX() - 13;
-        let end_y =
-            this.gantt.config.header_height +
-            this.gantt.options.bar_height / 2 +
-            (this.gantt.options.padding + this.gantt.options.bar_height) *
-                this.to_task.task._index +
-            this.gantt.options.padding / 2;
-
-        const from_is_below_to =
-            this.from_task.task._index > this.to_task.task._index;
-
-        let curve = this.gantt.options.arrow_curve;
-        const clockwise = from_is_below_to ? 1 : 0;
-        let curve_y = from_is_below_to ? -curve : curve;
-
-        if (
-            this.to_task.$bar.getX() <=
-            this.from_task.$bar.getX() + this.gantt.options.padding
-        ) {
-            let down_1 = this.gantt.options.padding / 2 - curve;
-            if (down_1 < 0) {
-                down_1 = 0;
-                curve = this.gantt.options.padding / 2;
-                curve_y = from_is_below_to ? -curve : curve;
-            }
-            const down_2 =
-                this.to_task.$bar.getY() +
-                this.to_task.$bar.getHeight() / 2 -
-                curve_y;
-            const left = this.to_task.$bar.getX() - this.gantt.options.padding;
-            this.path = `
-                M ${start_x} ${start_y}
-                v ${down_1}
-                a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
-                H ${left}
-                a ${curve} ${curve} 0 0 ${clockwise} ${-curve} ${curve_y}
-                V ${down_2}
-                a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve_y}
-                L ${end_x} ${end_y}
-                m -5 -5
-                l 5 5
-                l -5 5`;
-        } else {
-            if (end_x < start_x + curve) curve = end_x - start_x;
-
-            let offset = from_is_below_to ? end_y + curve : end_y - curve;
-
-            this.path = `
-              M ${start_x} ${start_y}
-              V ${offset}
-              a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve}
-              L ${end_x} ${end_y}
-              m -5 -5
-              l 5 5
-              l -5 5`;
+    }
+
+    _path_finish_to_start(right_A, left_A, right_B, left_B, y_A, y_B, y_mid, padding, curve) {
+        const x_right = right_A + padding;
+
+        if (x_right < left_B) {
+            // Case 1: space between tasks — 3 segments: right, down, right
+            return `
+                M ${right_A} ${y_A}
+                H ${x_right - curve}
+                a ${curve} ${curve} 0 0 1 ${curve} ${curve}
+                V ${y_B - curve}
+                a ${curve} ${curve} 0 0 0 ${curve} ${curve}
+                H ${left_B}
+                m -5 -5 l 5 5 l -5 5`;
         }
+
+        // Case 2: overlap — 5 segments: right, down, left, down, right
+        const x_left = left_B - padding;
+        return `
+            M ${right_A} ${y_A}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 1 ${curve} ${curve}
+            V ${y_mid - curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${curve}
+            V ${y_B - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${curve}
+            H ${left_B}
+            m -5 -5 l 5 5 l -5 5`;
+    }
+
+    _path_start_to_start(left_A, left_B, y_A, y_B, padding, curve) {
+        const x_left = Math.min(left_A, left_B) - padding;
+
+        return `
+            M ${left_A} ${y_A}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${curve}
+            V ${y_B - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${curve}
+            H ${left_B}
+            m -5 -5 l 5 5 l -5 5`;
+    }
+
+    _path_finish_to_finish(right_A, right_B, y_A, y_B, padding, curve) {
+        const x_right = Math.max(right_A, right_B) + padding;
+
+        return `
+            M ${right_A} ${y_A}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 1 ${curve} ${curve}
+            V ${y_B - curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
+            H ${right_B}
+            m 5 -5 l -5 5 l 5 5`;
+    }
+
+    _path_start_to_finish(left_A, right_B, y_A, y_B, y_mid, padding, curve) {
+        const x_left  = left_A - padding;
+        const x_right = right_B + padding;
+
+        return `
+            M ${left_A} ${y_A}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${curve}
+            V ${y_mid - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${curve}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 1 ${curve} ${curve}
+            V ${y_B - curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
+            H ${right_B}
+            m 5 -5 l -5 5 l 5 5`;
+    }
+
+    _get_connected_bars() {
+        const from_id = this.from_task.task.id;
+        const to_id   = this.to_task.task.id;
+        return Array.from(
+            this.gantt.$svg.querySelectorAll(
+                `[data-id="${CSS.escape(from_id)}"], [data-id="${CSS.escape(to_id)}"]`
+            )
+        );
     }
 
     draw() {
@@ -145,11 +198,44 @@ export default class Arrow {
             'data-to': this.to_task.task.id,
             class: arrowClass,
         });
+
+        // Wide transparent path for easier mouse targeting
+        this.hit_element = createSVG('path', {
+            d: this.path,
+            stroke: 'transparent',
+            'stroke-width': 15,
+            fill: 'none',
+            style: 'pointer-events: stroke; cursor: pointer;',
+        });
+
+        this.hit_element.addEventListener('mouseenter', () => {
+            this.is_hovered = true;
+            this.element.classList.add('arrow-hover');
+            const bar_class = this.is_invalid
+                ? 'bar-arrow-invalid'
+                : this.is_critical
+                ? 'bar-arrow-critical'
+                : 'bar-arrow-hover';
+            this._get_connected_bars().forEach(el => {
+                const bar = el.querySelector('.bar');
+                if (bar) bar.classList.add(bar_class);
+            });
+        });
+
+        this.hit_element.addEventListener('mouseleave', () => {
+            this.is_hovered = false;
+            this.element.classList.remove('arrow-hover');
+            this._get_connected_bars().forEach(el => {
+                const bar = el.querySelector('.bar');
+                if (bar) bar.classList.remove('bar-arrow-hover', 'bar-arrow-critical', 'bar-arrow-invalid');
+            });
+        });
     }
 
     update() {
         this.calculate_path();
         this.element.setAttribute('d', this.path);
+        this.hit_element.setAttribute('d', this.path);
 
         // Update invalid state
         this.is_invalid = this.check_invalid_dependency();
@@ -161,6 +247,7 @@ export default class Arrow {
         } else if (this.is_critical) {
             arrowClass = 'arrow-critical';
         }
-        this.element.setAttribute('class', arrowClass);
+        if (this.is_hovered) arrowClass += ' arrow-hover';
+        this.element.setAttribute('class', arrowClass.trim());
     }
 }

package/src/bar.js

@@ -655,76 +655,6 @@ export default class Bar {
         this.update_arrow_position();
     }
 
-    validate_dependency_constraints(new_x, new_width = null) {
-        const dependencies_type = this.task.dependencies_type || this.gantt.options.dependencies_type;
-
-        // For fixed dependencies, use old validation logic
-        if (dependencies_type === 'fixed') {
-            const xs = this.task.dependencies.map((dep) => {
-                return this.gantt.get_bar(dep).$bar.getX();
-            });
-            return xs.reduce((prev, curr) => {
-                return prev && new_x >= curr;
-            }, true);
-        }
-
-        // Calculate what the new dates would be
-        const new_start_x = new_x / this.gantt.config.column_width;
-        const new_start = date_utils.add(
-            this.gantt.gantt_start,
-            new_start_x * this.gantt.config.step,
-            this.gantt.config.unit
-        );
-
-        const bar_width = new_width || this.$bar.getWidth();
-        const width_in_units = bar_width / this.gantt.config.column_width;
-        const new_end = date_utils.add(
-            new_start,
-            width_in_units * this.gantt.config.step,
-            this.gantt.config.unit
-        );
-
-        // Check constraints for each parent dependency
-        for (const dep_id of this.task.dependencies) {
-            const parent_bar = this.gantt.get_bar(dep_id);
-            if (!parent_bar) continue;
-
-            const parent_task = parent_bar.task;
-
-            switch(dependencies_type) {
-                case 'finish-to-start':
-                    // This task cannot start before parent finishes
-                    if (new_start < parent_task._end) {
-                        return false;
-                    }
-                    break;
-
-                case 'start-to-start':
-                    // This task cannot start before parent starts
-                    if (new_start < parent_task._start) {
-                        return false;
-                    }
-                    break;
-
-                case 'finish-to-finish':
-                    // This task cannot finish before parent finishes
-                    if (new_end < parent_task._end) {
-                        return false;
-                    }
-                    break;
-
-                case 'start-to-finish':
-                    // This task cannot finish before parent starts
-                    if (new_end < parent_task._start) {
-                        return false;
-                    }
-                    break;
-            }
-        }
-
-        return true;
-    }
-
     update_label_position_on_horizontal_scroll({ x, sx }) {
         const container = this.gantt.$container;
         const label = this.group.querySelector('.bar-label');

package/src/defaults.js

@@ -116,7 +116,8 @@ const DEFAULT_OPTIONS = {
     column_width: null,
     critical_path: false,
     date_format: 'YYYY-MM-DD HH:mm',
-    dependencies_type: 'fixed',
+    dependencies_type: 'finish-to-start',
+    dependency_shifting: 'none', // 'none' | 'maintain_buffer_all' | 'maintain_buffer_downstream' | 'consume_buffer'
     upper_header_height: 45,
     lower_header_height: 30,
     snap_at: null,
@@ -126,7 +127,6 @@ const DEFAULT_OPTIONS = {
     isRTL: false,
     language: 'en',
     lines: 'both',
-    move_dependencies: true,
     padding: 18,
     popup: (ctx) => {
         ctx.set_title(ctx.task.name);

package/src/dependency_shifting.js

@@ -0,0 +1,201 @@
+/**
+ * Computes how much each dependent task should shift after a task is dragged.
+ *
+ * @param {object[]} tasks       - Full gantt tasks array (each with _start, _end as Date, id, dependencies)
+ * @param {string}   movedTaskId - ID of the task that was dragged
+ * @param {number}   deltaMs     - Net movement in milliseconds (negative = moved earlier)
+ * @param {string}   mode        - Value of options.dependency_shifting
+ * @returns {Map<string, number>} taskId → deltaMs to apply (movedTaskId is excluded)
+ */
+export function compute_dependency_shifts(tasks, movedTaskId, deltaMs, mode, direction = 'downstream') {
+    if (mode === 'none' || deltaMs === 0) return new Map();
+
+    if (!['upstream', 'downstream', 'both'].includes(direction)) {
+        console.warn(`[frappe-gantt] compute_dependency_shifts: unknown direction "${direction}", falling back to "downstream"`);
+        direction = 'downstream';
+    }
+
+    // Build graph
+    const taskById = new Map();
+    const predecessors = new Map(); // taskId -> [{ id, type }]
+    const successors = new Map();   // taskId -> [{ id, type }]
+
+    for (const task of tasks) {
+        if (task._has_no_dates) continue;
+        taskById.set(task.id, task);
+        predecessors.set(task.id, []);
+        successors.set(task.id, []);
+    }
+
+    for (const task of tasks) {
+        if (task._has_no_dates) continue;
+        for (const dep of task.dependencies || []) {
+            if (!taskById.has(dep.id)) continue;
+            const type = dep.type || 'finish-to-start';
+            predecessors.get(task.id).push({ id: dep.id, type });
+            successors.get(dep.id).push({ id: task.id, type });
+        }
+    }
+
+    if (mode === 'maintain_buffer_all') {
+        const bidirectional = direction === 'both';
+        const upstream_only = direction === 'upstream';
+        return _bfs_shift(movedTaskId, deltaMs, predecessors, successors, bidirectional, upstream_only);
+    }
+    if (mode === 'maintain_buffer_downstream') {
+        const bidirectional = direction === 'both';
+        const upstream_only = direction === 'upstream';
+        return _bfs_shift(movedTaskId, deltaMs, predecessors, successors, bidirectional, upstream_only);
+    }
+    if (mode === 'consume_buffer') {
+        return _consume_buffer_shift(movedTaskId, deltaMs, taskById, predecessors, successors, direction);
+    }
+
+    return new Map();
+}
+
+/**
+ * BFS traversal: applies the same deltaMs to every reachable task.
+ * bidirectional=true visits both upstream and downstream.
+ * upstream_only=true (and bidirectional=false) visits predecessors only.
+ * Default (both false) visits successors only.
+ */
+function _bfs_shift(movedTaskId, deltaMs, predecessors, successors, bidirectional, upstream_only) {
+    const result = new Map();
+    const visited = new Set([movedTaskId]);
+    const queue = [];
+
+    const enqueue = (neighbors) => {
+        for (const { id } of neighbors) {
+            if (!visited.has(id)) {
+                visited.add(id);
+                queue.push(id);
+            }
+        }
+    };
+
+    if (upstream_only && !bidirectional) {
+        enqueue(predecessors.get(movedTaskId) || []);
+    } else {
+        enqueue(successors.get(movedTaskId) || []);
+        if (bidirectional) enqueue(predecessors.get(movedTaskId) || []);
+    }
+
+    while (queue.length > 0) {
+        const id = queue.shift();
+        result.set(id, deltaMs);
+        if (upstream_only && !bidirectional) {
+            enqueue(predecessors.get(id) || []);
+        } else {
+            enqueue(successors.get(id) || []);
+            if (bidirectional) enqueue(predecessors.get(id) || []);
+        }
+    }
+
+    return result;
+}
+
+/**
+ * Dependency-type-aware shifting.
+ * Forward pass (topological order): shift downstream tasks by the minimum needed to resolve conflicts.
+ * Backward pass (reverse topological order): pull upstream tasks earlier if needed.
+ * Diamond resolution: when multiple predecessors propose a shift, take the maximum.
+ */
+function _consume_buffer_shift(movedTaskId, deltaMs, taskById, predecessors, successors, direction) {
+    // Kahn's algorithm for topological order
+    const in_degree = new Map();
+    for (const [id] of taskById) {
+        in_degree.set(id, (predecessors.get(id) || []).length);
+    }
+
+    const topo_order = [];
+    const queue = [];
+    for (const [id, deg] of in_degree) {
+        if (deg === 0) queue.push(id);
+    }
+    while (queue.length > 0) {
+        const id = queue.shift();
+        topo_order.push(id);
+        for (const { id: succId } of successors.get(id) || []) {
+            const new_deg = in_degree.get(succId) - 1;
+            in_degree.set(succId, new_deg);
+            if (new_deg === 0) queue.push(succId);
+        }
+    }
+
+    // The moved task's dates are already updated by date_changed() before this
+    // function is called, so its effective shift is 0 — no double-counting.
+    const shifts = new Map([[movedTaskId, 0]]);
+
+    // Helpers: effective timestamps accounting for accumulated shifts
+    const eff_start = (id) => taskById.get(id)._start.getTime() + (shifts.get(id) || 0);
+    const eff_end = (id) => taskById.get(id)._end.getTime() + (shifts.get(id) || 0);
+
+    // Forward pass: push downstream tasks later when a conflict exists
+    if (direction === 'downstream' || direction === 'both') {
+        for (const id of topo_order) {
+            if (id === movedTaskId) continue;
+            let max_shift = 0;
+            for (const { id: predId, type } of predecessors.get(id) || []) {
+                const needed = _conflict_shift(predId, id, type, eff_start, eff_end);
+                if (needed > max_shift) max_shift = needed;
+            }
+            if (max_shift > 0) {
+                shifts.set(id, (shifts.get(id) || 0) + max_shift);
+            }
+        }
+    }
+
+    // Backward pass: pull upstream tasks earlier when a conflict exists
+    if (direction === 'upstream' || direction === 'both') {
+        for (let i = topo_order.length - 1; i >= 0; i--) {
+            const id = topo_order[i];
+            if (id === movedTaskId) continue;
+            let max_pull = 0; // most-negative value wins (furthest earlier)
+            for (const { id: succId, type } of successors.get(id) || []) {
+                const needed = _conflict_shift(id, succId, type, eff_start, eff_end);
+                // If a forward conflict exists for this pair, the predecessor must shift earlier
+                if (needed > 0) {
+                    const pull = -needed;
+                    if (pull < max_pull) max_pull = pull;
+                }
+            }
+            if (max_pull < 0) {
+                shifts.set(id, (shifts.get(id) || 0) + max_pull);
+            }
+        }
+    }
+
+    // Return map without the moved task (caller already applied its shift)
+    const result = new Map();
+    for (const [id, shift] of shifts) {
+        if (id !== movedTaskId && shift !== 0) {
+            result.set(id, shift);
+        }
+    }
+    return result;
+}
+
+/**
+ * Returns the positive millisecond shift needed to resolve a conflict between pred and succ,
+ * based on the dependency type. Returns 0 if no conflict.
+ */
+function _conflict_shift(predId, succId, type, eff_start, eff_end) {
+    const pred_start = eff_start(predId);
+    const pred_end = eff_end(predId);
+    const succ_start = eff_start(succId);
+    const succ_end = eff_end(succId);
+
+    switch (type) {
+        case 'finish-to-start':
+            return pred_end > succ_start ? pred_end - succ_start : 0;
+        case 'start-to-start':
+            return pred_start > succ_start ? pred_start - succ_start : 0;
+        case 'finish-to-finish':
+            return pred_end > succ_end ? pred_end - succ_end : 0;
+        case 'start-to-finish':
+            return pred_start > succ_end ? pred_start - succ_end : 0;
+        default:
+            return pred_end > succ_start ? pred_end - succ_start : 0;
+    }
+}