@workiom/frappe-gantt 1.0.21 → 1.0.22

package/src/index.js

@@ -1078,6 +1078,7 @@ export default class Gantt {
 
     make_arrows() {
         this.arrows = [];
+        this.active_arrow = null;
 
         // Calculate critical path if enabled
         if (this.options.critical_path) {
@@ -1454,6 +1455,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 +1464,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 (
@@ -2026,6 +2033,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,6 +11,8 @@
     --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);
 }
@@ -44,11 +46,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);
     }

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);
     }

package/src/styles/light.css

@@ -21,6 +21,8 @@
     --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;