@workiom/frappe-gantt 1.0.21 → 1.0.23

package/src/arrow.js

@@ -9,6 +9,7 @@ export default class Arrow {
         this.is_critical = this.check_critical_path();
         this.is_invalid = this.check_invalid_dependency();
         this.is_hovered = false;
+        this.is_active = false;
 
         this.calculate_path();
         this.draw();
@@ -76,47 +77,64 @@ export default class Arrow {
                 this.path = this._path_finish_to_start(
                     right_A, left_A, right_B, left_B, y_A, y_B, y_mid, padding, curve
                 );
+                this.label_pos = { x: left_B, y: y_B, side: 'left' };
                 break;
             case 'start-to-start':
                 this.path = this._path_start_to_start(
                     left_A, left_B, y_A, y_B, padding, curve
                 );
+                this.label_pos = { x: left_B, y: y_B, side: 'left' };
                 break;
             case 'finish-to-finish':
                 this.path = this._path_finish_to_finish(
                     right_A, right_B, y_A, y_B, padding, curve
                 );
+                this.label_pos = { x: right_B, y: y_B, side: 'right' };
                 break;
             case 'start-to-finish':
                 this.path = this._path_start_to_finish(
                     left_A, right_B, y_A, y_B, y_mid, padding, curve
                 );
+                this.label_pos = { x: right_B, y: y_B, side: 'right' };
                 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
                 );
+                this.label_pos = { x: left_B, y: y_B, side: 'left' };
         }
     }
 
     _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;
+        const going_up = y_B < y_A;
 
         if (x_right < left_B) {
-            // Case 1: space between tasks — 3 segments: right, down, right
+            // Case 1: gap between tasks — 3 segments: right, vertical, right
+            if (!going_up) {
+                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`;
+            }
             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`;
+            M ${right_A} ${y_A}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 1 ${curve} ${-curve}
+            H ${left_B}
+            m -5 -5 l 5 5 l -5 5`;
         }
 
-        // Case 2: overlap — 5 segments: right, down, left, down, right
+        // Case 2: overlap — 5 segments: right, vertical, left, vertical, right
         const x_left = left_B - padding;
-        return `
+        if (!going_up) {
+            return `
             M ${right_A} ${y_A}
             H ${x_right - curve}
             a ${curve} ${curve} 0 0 1 ${curve} ${curve}
@@ -128,12 +146,27 @@ export default class Arrow {
             a ${curve} ${curve} 0 0 0 ${curve} ${curve}
             H ${left_B}
             m -5 -5 l 5 5 l -5 5`;
+        }
+        return `
+            M ${right_A} ${y_A}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${-curve}
+            V ${y_mid + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${-curve}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 1 ${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;
+        const going_up = y_B < y_A;
 
-        return `
+        if (!going_up) {
+            return `
             M ${left_A} ${y_A}
             H ${x_left + curve}
             a ${curve} ${curve} 0 0 0 ${-curve} ${curve}
@@ -141,12 +174,23 @@ export default class Arrow {
             a ${curve} ${curve} 0 0 0 ${curve} ${curve}
             H ${left_B}
             m -5 -5 l 5 5 l -5 5`;
+        }
+        return `
+            M ${left_A} ${y_A}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 1 ${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;
+        const going_up = y_B < y_A;
 
-        return `
+        if (!going_up) {
+            return `
             M ${right_A} ${y_A}
             H ${x_right - curve}
             a ${curve} ${curve} 0 0 1 ${curve} ${curve}
@@ -154,13 +198,27 @@ export default class Arrow {
             a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
             H ${right_B}
             m 5 -5 l -5 5 l 5 5`;
+        }
+        return `
+            M ${right_A} ${y_A}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 0 ${-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;
+        const going_up = y_B < y_A;
+        // crossed: from-task is to the right of to-task — not enough room for mid-column detour
+        const crossed = x_right < x_left + 2 * curve;
 
-        return `
+        if (!crossed) {
+            if (!going_up) {
+                return `
             M ${left_A} ${y_A}
             H ${x_left + curve}
             a ${curve} ${curve} 0 0 0 ${-curve} ${curve}
@@ -172,6 +230,39 @@ export default class Arrow {
             a ${curve} ${curve} 0 0 1 ${-curve} ${curve}
             H ${right_B}
             m 5 -5 l -5 5 l 5 5`;
+            }
+            return `
+            M ${left_A} ${y_A}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${-curve}
+            V ${y_mid + curve}
+            a ${curve} ${curve} 0 0 1 ${curve} ${-curve}
+            H ${x_right - curve}
+            a ${curve} ${curve} 0 0 0 ${curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${-curve}
+            H ${right_B}
+            m 5 -5 l -5 5 l 5 5`;
+        }
+
+        if (!going_up) {
+            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 1 ${-curve} ${curve}
+            H ${right_B}
+            m 5 -5 l -5 5 l 5 5`;
+        }
+        return `
+            M ${left_A} ${y_A}
+            H ${x_left + curve}
+            a ${curve} ${curve} 0 0 1 ${-curve} ${-curve}
+            V ${y_B + curve}
+            a ${curve} ${curve} 0 0 0 ${-curve} ${-curve}
+            H ${right_B}
+            m 5 -5 l -5 5 l 5 5`;
     }
 
     _get_connected_bars() {
@@ -220,6 +311,7 @@ export default class Arrow {
                 const bar = el.querySelector('.bar');
                 if (bar) bar.classList.add(bar_class);
             });
+            this._show_label();
         });
 
         this.hit_element.addEventListener('mouseleave', () => {
@@ -227,8 +319,106 @@ export default class Arrow {
             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');
+                if (bar) {
+                    bar.classList.remove('bar-arrow-hover');
+                    if (!this.is_active) {
+                        bar.classList.remove('bar-arrow-critical', 'bar-arrow-invalid');
+                    }
+                }
             });
+            if (!this.is_active && !this.is_hovered) this._hide_label();
+        });
+
+        this.hit_element.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (this.is_active) {
+                this.gantt.set_active_arrow(null);
+            } else {
+                this.gantt.set_active_arrow(this);
+            }
+        });
+    }
+
+    _get_type_abbr() {
+        const map = {
+            'finish-to-start': 'FS',
+            'start-to-start': 'SS',
+            'finish-to-finish': 'FF',
+            'start-to-finish': 'SF',
+        };
+        return map[this.dependency_type] || 'FS';
+    }
+
+    _show_label() {
+        if (this.label_element) return;
+        const abbr = this._get_type_abbr();
+        const w = 21;
+        const h = 20;
+        const { x: tip_x, y: tip_y, side } = this.label_pos;
+        const cx = side === 'left'
+            ? tip_x - 10 - w / 2
+            : tip_x + 10 + w / 2;
+        const cy = tip_y;
+
+        this.label_element = createSVG('g', { class: 'arrow-type-label' });
+        const bg = createSVG('rect', {
+            x: cx - w / 2,
+            y: cy - h / 2,
+            width: w,
+            height: h,
+            rx: 3,
+        });
+        const text = createSVG('text', {
+            x: cx,
+            y: cy,
+            'dominant-baseline': 'middle',
+            'text-anchor': 'middle',
+        });
+        text.textContent = abbr;
+        this.label_element.appendChild(bg);
+        this.label_element.appendChild(text);
+        this.label_element.addEventListener('mouseenter', () => {
+            this.hit_element.dispatchEvent(new MouseEvent('mouseenter', { bubbles: false }));
+        });
+        this.label_element.addEventListener('mouseleave', () => {
+            this.hit_element.dispatchEvent(new MouseEvent('mouseleave', { bubbles: false }));
+        });
+        this.label_element.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.hit_element.dispatchEvent(new MouseEvent('click', { bubbles: false }));
+        });
+        this.gantt.layers.arrow.appendChild(this.label_element);
+    }
+
+    _hide_label() {
+        if (this.label_element) {
+            this.label_element.remove();
+            this.label_element = null;
+        }
+    }
+
+    activate() {
+        this.is_active = true;
+        this.element.classList.add('arrow-active');
+        this._show_label();
+        const bar_class = this.is_invalid
+            ? 'bar-arrow-invalid'
+            : this.is_critical
+            ? 'bar-arrow-critical'
+            : 'bar-arrow-active';
+        this._get_connected_bars().forEach(el => {
+            const bar = el.querySelector('.bar');
+            if (bar) bar.classList.add(bar_class);
+        });
+    }
+
+    deactivate() {
+        this.is_active = false;
+        this.element.classList.remove('arrow-active');
+        this._hide_label();
+        this._get_connected_bars().forEach(el => {
+            const bar = el.querySelector('.bar');
+            if (bar) bar.classList.remove('bar-arrow-active', 'bar-arrow-critical', 'bar-arrow-invalid');
         });
     }
 
@@ -248,6 +438,7 @@ export default class Arrow {
             arrowClass = 'arrow-critical';
         }
         if (this.is_hovered) arrowClass += ' arrow-hover';
+        if (this.is_active) arrowClass += ' arrow-active';
         this.element.setAttribute('class', arrowClass.trim());
     }
 }

package/src/bar.js

@@ -115,6 +115,7 @@ export default class Bar {
         if (this.gantt.options.task_add_icon_position) {
             this.draw_add_task_icon();
         }
+        this.draw_connector_circles();
     }
 
     draw_bar() {
@@ -439,6 +440,48 @@ export default class Bar {
         }
     }
 
+    draw_connector_circles() {
+        this.$connector_start = null;
+        this.$connector_end = null;
+        if (!this.gantt.options.allow_dependency_creation) return;
+        if (this.gantt.options.readonly) return;
+        const isRTL = this.gantt.options.isRTL;
+        const cy = this.y + this.height / 2;
+        const start_cx = isRTL ? this.x + this.width : this.x;
+        const end_cx = isRTL ? this.x : this.x + this.width;
+
+        this.$connector_start = createSVG('circle', {
+            class: 'connector-circle connector-start',
+            'data-endpoint': 'start',
+            cx: start_cx,
+            cy,
+            r: 4,
+            append_to: this.handle_group,
+        });
+        this.$connector_end = createSVG('circle', {
+            class: 'connector-circle connector-end',
+            'data-endpoint': 'end',
+            cx: end_cx,
+            cy,
+            r: 4,
+            append_to: this.handle_group,
+        });
+    }
+
+    update_connector_circles() {
+        if (!this.$connector_start) return;
+        const isRTL = this.gantt.options.isRTL;
+        const bx = this.$bar.getX();
+        const bw = this.$bar.getWidth();
+        const cy = this.y + this.height / 2;
+        const start_cx = isRTL ? bx + bw : bx;
+        const end_cx = isRTL ? bx : bx + bw;
+        this.$connector_start.setAttribute('cx', start_cx);
+        this.$connector_start.setAttribute('cy', cy);
+        this.$connector_end.setAttribute('cx', end_cx);
+        this.$connector_end.setAttribute('cy', cy);
+    }
+
     bind() {
         if (this.invalid) return;
         this.setup_click_event();
@@ -653,6 +696,7 @@ export default class Bar {
 
         this.update_progressbar_position();
         this.update_arrow_position();
+        this.update_connector_circles();
     }
 
     update_label_position_on_horizontal_scroll({ x, sx }) {

package/src/defaults.js

@@ -108,6 +108,7 @@ const DEFAULT_VIEW_MODES = [
 ];
 
 const DEFAULT_OPTIONS = {
+    allow_dependency_creation: true,
     arrow_curve: 5,
     auto_move_label: false,
     bar_corner_radius: 3,