@workiom/frappe-gantt 1.0.21 → 1.0.23

package/src/index.js

@@ -449,6 +449,9 @@ export default class Gantt {
         this.bind_bar_events();
         this.bind_task_column_resize();
         this.bind_task_column_scroll();
+        if (this.options.allow_dependency_creation) {
+            this.bind_dependency_linking();
+        }
     }
 
     render() {
@@ -474,6 +477,12 @@ export default class Gantt {
                 append_to: this.$svg,
             });
         }
+        if (this.options.allow_dependency_creation) {
+            this.layers.linking = createSVG('g', {
+                class: 'linking',
+                append_to: this.$svg,
+            });
+        }
         this.$extras = this.create_el({
             classes: 'extras',
             append_to: this.$container,
@@ -1078,6 +1087,7 @@ export default class Gantt {
 
     make_arrows() {
         this.arrows = [];
+        this.active_arrow = null;
 
         // Calculate critical path if enabled
         if (this.options.critical_path) {
@@ -1346,7 +1356,7 @@ export default class Gantt {
             '.grid-row, .grid-header, .ignored-bar, .holiday-highlight',
             (e, delegatedTarget) => {
                 // Check if click is on a grid-row (not header or other elements)
-                if (delegatedTarget && delegatedTarget.classList.contains('grid-row')) {
+                if (delegatedTarget && (delegatedTarget.classList.contains('grid-row') || delegatedTarget.classList.contains('ignored-bar') || delegatedTarget.classList.contains('holiday-highlight'))) {
                     // Get the click position relative to the SVG
                     const svg = this.$svg;
                     const pt = svg.createSVGPoint();
@@ -1370,6 +1380,13 @@ export default class Gantt {
                             this.config.unit
                         );
 
+                        // If weekend/ignored skipping is enabled, advance to next non-ignored day
+                        if (this.config.ignored_function) {
+                            while (this.config.ignored_function(clicked_date)) {
+                                clicked_date = date_utils.add(clicked_date, 1, 'day');
+                            }
+                        }
+
                         // Set start date to clicked date and end date to 1 day after
                         task._start = clicked_date;
                         task._end = date_utils.add(clicked_date, 1, 'day');
@@ -1454,6 +1471,7 @@ export default class Gantt {
         let parent_bar_id = null;
         let bars = []; // instanceof Bar
         this.bar_being_dragged = null;
+        this.active_arrow = null;
 
         const action_in_progress = () =>
             is_dragging || is_resizing_left || is_resizing_right;
@@ -1462,6 +1480,11 @@ export default class Gantt {
             if (e.target.classList.contains('grid-row')) this.unselect_all();
         };
 
+        if (!this._document_click_handler) {
+            this._document_click_handler = () => this.set_active_arrow(null);
+            document.addEventListener('click', this._document_click_handler);
+        }
+
         let pos = 0;
         $.on(this.$svg, 'mousemove', '.bar-wrapper, .handle', (e) => {
             if (
@@ -1472,6 +1495,7 @@ export default class Gantt {
         });
 
         $.on(this.$svg, 'mousedown', '.bar-wrapper, .handle', (e, element) => {
+            if (e.target.classList.contains('connector-circle')) return;
             const bar_wrapper = $.closest('.bar-wrapper', element);
             if (element.classList.contains('left')) {
                 is_resizing_left = true;
@@ -1938,7 +1962,6 @@ export default class Gantt {
             }
 
             let dx = now_x - x_on_start;
-            console.log($bar_progress);
             if (dx > $bar_progress.max_dx) {
                 dx = $bar_progress.max_dx;
             }
@@ -1965,6 +1988,229 @@ export default class Gantt {
         });
     }
 
+    bind_dependency_linking() {
+        this.is_linking = false;
+        this.linking_source_bar = null;
+        this.linking_source_endpoint = null;
+        this.linking_temp_line = null;
+        this.linking_snap_badge = null;
+
+        $.on(this.$svg, 'mousedown', '.connector-circle', (e, circle) => {
+            const bar_wrapper = $.closest('.bar-wrapper', circle);
+            if (!bar_wrapper) return;
+            const bar_id = bar_wrapper.getAttribute('data-id');
+            const source_bar = this.get_bar(bar_id);
+            if (!source_bar) return;
+
+            this.is_linking = true;
+            this.linking_source_bar = source_bar;
+            this.linking_source_endpoint = circle.getAttribute('data-endpoint');
+
+            const cx = parseFloat(circle.getAttribute('cx'));
+            const cy = parseFloat(circle.getAttribute('cy'));
+
+            this.linking_temp_line = createSVG('line', {
+                x1: cx,
+                y1: cy,
+                x2: cx,
+                y2: cy,
+                class: 'linking-temp-line',
+                append_to: this.layers.linking,
+            });
+        });
+
+        $.on(this.$svg, 'mousemove', (e) => {
+            if (!this.is_linking || !this.linking_temp_line) return;
+            const pt = this.$svg.createSVGPoint();
+            pt.x = e.clientX;
+            pt.y = e.clientY;
+            const svgP = pt.matrixTransform(this.$svg.getScreenCTM().inverse());
+            this.linking_temp_line.setAttribute('x2', svgP.x);
+            this.linking_temp_line.setAttribute('y2', svgP.y);
+        });
+
+        $.on(this.$svg, 'mouseover', '.connector-circle', (e, circle) => {
+            if (!this.is_linking) return;
+            const bar_wrapper = $.closest('.bar-wrapper', circle);
+            if (!bar_wrapper) return;
+            const bar_id = bar_wrapper.getAttribute('data-id');
+            if (bar_id === this.linking_source_bar.task.id) return;
+
+            circle.setAttribute('r', '9');
+            if (this.linking_temp_line) {
+                this.linking_temp_line.classList.add('snap');
+            }
+
+            if (!this.linking_snap_badge) {
+                const to_ep = circle.getAttribute('data-endpoint');
+                const type = this._resolve_dependency_type(
+                    this.linking_source_endpoint,
+                    to_ep,
+                );
+                const abbr = { 'finish-to-start': 'FS', 'start-to-start': 'SS', 'finish-to-finish': 'FF', 'start-to-finish': 'SF' }[type] || 'FS';
+                const cx = parseFloat(circle.getAttribute('cx'));
+                const cy = parseFloat(circle.getAttribute('cy'));
+                this.linking_snap_badge = createSVG('text', {
+                    x: cx + 12,
+                    y: cy - 10,
+                    class: 'linking-snap-badge',
+                    append_to: this.layers.linking,
+                });
+                this.linking_snap_badge.textContent = abbr;
+            }
+        });
+
+        $.on(this.$svg, 'mouseout', '.connector-circle', (e, circle) => {
+            if (!this.is_linking) return;
+            circle.setAttribute('r', '4');
+            if (this.linking_temp_line) {
+                this.linking_temp_line.classList.remove('snap');
+            }
+            if (this.linking_snap_badge) {
+                this.linking_snap_badge.remove();
+                this.linking_snap_badge = null;
+            }
+        });
+
+        $.on(this.$svg, 'mouseup', '.connector-circle', (e, circle) => {
+            if (!this.is_linking) return;
+            const bar_wrapper = $.closest('.bar-wrapper', circle);
+            if (!bar_wrapper) return;
+            const bar_id = bar_wrapper.getAttribute('data-id');
+            if (bar_id !== this.linking_source_bar.task.id) {
+                const to_bar = this.get_bar(bar_id);
+                const to_endpoint = circle.getAttribute('data-endpoint');
+                if (to_bar) {
+                    this._commit_dependency(to_bar, to_endpoint);
+                }
+            }
+            // _cancel_linking() is called by the document mouseup handler
+        });
+
+        document.addEventListener('mouseup', () => {
+            if (!this.is_linking) return;
+            this._cancel_linking();
+        });
+
+        document.addEventListener('keydown', (e) => {
+            if (
+                (e.key === 'Delete' || e.key === 'Backspace') &&
+                this.active_arrow
+            ) {
+                const tag = e.target.tagName;
+                if (tag === 'INPUT' || tag === 'TEXTAREA' || e.target.isContentEditable) return;
+                e.preventDefault();
+                this.delete_dependency(this.active_arrow);
+            }
+        });
+    }
+
+    _resolve_dependency_type(from_endpoint, to_endpoint) {
+        if (from_endpoint === 'end' && to_endpoint === 'start') return 'finish-to-start';
+        if (from_endpoint === 'start' && to_endpoint === 'start') return 'start-to-start';
+        if (from_endpoint === 'end' && to_endpoint === 'end') return 'finish-to-finish';
+        if (from_endpoint === 'start' && to_endpoint === 'end') return 'start-to-finish';
+        return 'finish-to-start';
+    }
+
+    _commit_dependency(to_bar, to_endpoint) {
+        const from_task = this.linking_source_bar.task;
+        const to_task = to_bar.task;
+        const type = this._resolve_dependency_type(
+            this.linking_source_endpoint,
+            to_endpoint,
+        );
+
+        // Find any existing dependency from the same source task (any type)
+        const existing = to_task.dependencies.find((d) => d.id === from_task.id);
+        const existing_type = existing
+            ? existing.type || this.options.dependencies_type || 'finish-to-start'
+            : null;
+
+        // Remove existing connection between this pair (if any)
+        const deps_without_existing = to_task.dependencies.filter(
+            (d) => d.id !== from_task.id,
+        );
+
+        if (existing_type === type) {
+            // Same type drawn again — toggle off (just remove)
+            this.update_task(to_task.id, { dependencies: deps_without_existing });
+            if (this.options.on_dependency_delete) {
+                this.options.on_dependency_delete(from_task, to_task, type);
+            }
+            return;
+        }
+
+        // Remove reverse dependency if it exists (prevents cycles)
+        const reverse = from_task.dependencies?.find((d) => d.id === to_task.id);
+        if (reverse) {
+            const reverse_type =
+                reverse.type || this.options.dependencies_type || 'finish-to-start';
+            this.update_task(from_task.id, {
+                dependencies: from_task.dependencies.filter((d) => d.id !== to_task.id),
+            });
+            if (this.options.on_dependency_delete) {
+                this.options.on_dependency_delete(to_task, from_task, reverse_type);
+            }
+        }
+
+        // Different type (or no prior connection) — replace with new
+        const new_deps = [...deps_without_existing, { id: from_task.id, type }];
+        this.update_task(to_task.id, { dependencies: new_deps });
+
+        if (existing) {
+            if (this.options.on_dependency_changed) {
+                this.options.on_dependency_changed(
+                    from_task,
+                    to_task,
+                    existing_type,
+                    type,
+                );
+            }
+        } else {
+            if (this.options.on_dependency_create) {
+                this.options.on_dependency_create(from_task, to_task, type);
+            }
+        }
+    }
+
+    _cancel_linking() {
+        if (this.linking_temp_line) {
+            this.linking_temp_line.remove();
+            this.linking_temp_line = null;
+        }
+        if (this.linking_snap_badge) {
+            this.linking_snap_badge.remove();
+            this.linking_snap_badge = null;
+        }
+        this.$svg
+            .querySelectorAll('.connector-circle[r="9"]')
+            .forEach((el) => el.setAttribute('r', '4'));
+
+        this.is_linking = false;
+        this.linking_source_bar = null;
+        this.linking_source_endpoint = null;
+    }
+
+    delete_dependency(arrow) {
+        const from_task = arrow.from_task.task;
+        const to_task = arrow.to_task.task;
+        const arrow_type = arrow.dependency_type;
+
+        const new_deps = to_task.dependencies.filter((d) => {
+            const dep_type =
+                d.type || this.options.dependencies_type || 'finish-to-start';
+            return !(d.id === from_task.id && dep_type === arrow_type);
+        });
+
+        this.set_active_arrow(null);
+        this.update_task(to_task.id, { dependencies: new_deps });
+
+        if (this.options.on_dependency_delete) {
+            this.options.on_dependency_delete(from_task, to_task, arrow_type);
+        }
+    }
+
     get_all_dependent_tasks(task_id) {
         let out = [];
         let to_process = [task_id];
@@ -2026,6 +2272,20 @@ export default class Gantt {
         }
     }
 
+    set_active_arrow(arrow) {
+        if (this.active_arrow === arrow) return;
+        if (this.active_arrow) {
+            this.active_arrow.deactivate();
+        }
+        this.active_arrow = arrow;
+        if (arrow) {
+            arrow.activate();
+            if (this.options.on_arrow_click) {
+                this.options.on_arrow_click(arrow.from_task.task, arrow.to_task.task);
+            }
+        }
+    }
+
     unselect_all() {
         if (this.popup) this.popup.parent.classList.add('hide');
         this.$container

package/src/styles/dark.css

@@ -11,8 +11,14 @@
     --g-arrow-hover-color-dark: #60a5fa;
     --g-arrow-critical-color-dark: #f5c044;
     --g-arrow-invalid-color-dark: #ff7676;
+    --g-arrow-type-label-bg-dark: #4a4a4a;
+    --g-arrow-type-label-color-dark: #fff;
     --g-resize-handle-hover-dark: rgba(96, 165, 250, 0.4);
     --g-resize-handle-active-dark: rgba(96, 165, 250, 0.6);
+    --g-connector-start-color-dark: #4ade80;
+    --g-connector-end-color-dark: #fb923c;
+    --g-connector-linking-color-dark: #818cf8;
+    --g-connector-fill-dark: #ffffff;
 }
 
 .dark > .gantt-container .gantt {
@@ -44,11 +50,27 @@
         stroke: var(--g-arrow-hover-color-dark);
     }
 
+    & .arrow-active {
+        stroke: var(--g-arrow-hover-color-dark);
+    }
+
+    & .arrow-type-label rect {
+        fill: var(--g-arrow-type-label-bg-dark);
+    }
+
+    & .arrow-type-label text {
+        fill: var(--g-arrow-type-label-color-dark);
+    }
+
     & .bar {
         fill: var(--g-bar-color-dark);
         stroke: none;
     }
 
+    & .bar-wrapper .bar.bar-arrow-active {
+        outline-color: var(--g-arrow-hover-color-dark);
+    }
+
     & .bar-progress {
         fill: var(--g-progress-color);
     }
@@ -87,6 +109,11 @@
             }
         }
     }
+
+    --g-connector-start-color: var(--g-connector-start-color-dark);
+    --g-connector-end-color: var(--g-connector-end-color-dark);
+    --g-connector-linking-color: var(--g-connector-linking-color-dark);
+    --g-connector-fill: var(--g-connector-fill-dark);
 }
 
 .dark > .gantt-container {

package/src/styles/gantt.css

@@ -291,6 +291,26 @@
         stroke: var(--g-arrow-hover-color);
     }
 
+    & .arrow-active {
+        stroke: var(--g-arrow-hover-color);
+    }
+
+    & .arrow-type-label {
+        stroke-width: 0;
+        cursor: pointer;
+    }
+
+    & .arrow-type-label rect {
+        fill: var(--g-arrow-type-label-bg);
+    }
+
+    & .arrow-type-label text {
+        fill: var(--g-arrow-type-label-color);
+        font-size: 10px;
+        font-weight: 600;
+        font-family: inherit;
+        pointer-events: none;
+    }
 
     & .bar-wrapper .bar {
         fill: var(--g-bar-color);
@@ -299,6 +319,12 @@
         transition: stroke-width 0.3s ease;
     }
 
+    & .bar-wrapper .bar.bar-arrow-active {
+        outline-color: var(--g-arrow-hover-color);
+        outline-width: 2px;
+        outline-style: solid;
+    }
+
     & .bar-wrapper .bar.bar-arrow-critical {
         outline-color: var(--g-arrow-critical-color);
     }
@@ -372,6 +398,28 @@
                 display: block;
             }
         }
+
+        & .connector-circle {
+            fill: var(--g-connector-fill);
+            opacity: 0;
+            cursor: crosshair;
+            transition: opacity 0.2s ease;
+            pointer-events: all;
+        }
+
+        & .connector-circle.connector-start {
+            stroke: var(--g-connector-start-color);
+            stroke-width: 2;
+        }
+
+        & .connector-circle.connector-end {
+            stroke: var(--g-connector-end-color);
+            stroke-width: 2;
+        }
+
+        &:hover .connector-circle {
+            opacity: 1;
+        }
     }
 
     & .add-task-icon {
@@ -404,6 +452,27 @@
             }
         }
     }
+
+    & .linking-temp-line {
+        stroke: var(--g-connector-linking-color);
+        stroke-width: 2;
+        stroke-dasharray: 5, 4;
+        fill: none;
+        pointer-events: none;
+    }
+
+    & .linking-temp-line.snap {
+        stroke: var(--g-connector-start-color);
+        stroke-dasharray: 0;
+    }
+
+    & .linking-snap-badge {
+        font-size: 11px;
+        font-weight: 700;
+        fill: var(--g-connector-start-color);
+        pointer-events: none;
+        user-select: none;
+    }
 }
 
 /* Task Name Column */

package/src/styles/light.css

@@ -21,9 +21,15 @@
     --g-row-border-color: #c7c7c7;
     --g-today-highlight: #37352f;
     --g-popup-actions: #ebeff2;
+    --g-arrow-type-label-bg: #dbdbdb;
+    --g-arrow-type-label-color: #000;
     --g-weekend-highlight-color: #f7f7f7;
     --g-task-column-bg: #ffffff;
     --g-task-row-bg: #ffffff;
     --g-resize-handle-hover: rgba(59, 130, 246, 0.3);
     --g-resize-handle-active: rgba(59, 130, 246, 0.5);
+    --g-connector-start-color: #22c55e;
+    --g-connector-end-color: #f97316;
+    --g-connector-linking-color: #6366f1;
+    --g-connector-fill: #ffffff;
 }