@workiom/frappe-gantt 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -5
- package/dist/frappe-gantt.css +1 -1
- package/dist/frappe-gantt.es.js +788 -724
- package/dist/frappe-gantt.umd.js +39 -39
- package/package.json +1 -1
- package/src/arrow.js +107 -1
- package/src/dependency_shifting.js +56 -33
- package/src/index.js +36 -0
- package/src/styles/dark.css +18 -0
- package/src/styles/gantt.css +26 -0
- package/src/styles/light.css +2 -0
package/README.md
CHANGED
|
@@ -169,17 +169,20 @@ let tasks = [
|
|
|
169
169
|
|
|
170
170
|
#### Dependency Shifting Configuration
|
|
171
171
|
|
|
172
|
-
The `dependency_shifting` option controls how dependent tasks respond when a bar is dragged
|
|
172
|
+
The `dependency_shifting` option controls how dependent tasks respond when a bar is dragged or resized.
|
|
173
173
|
|
|
174
174
|
**Available Modes:**
|
|
175
175
|
|
|
176
176
|
- **`none`** (default): No shifting. Dependency arrows may visually overlap — no correction is applied.
|
|
177
177
|
|
|
178
|
-
- **`maintain_buffer_all`**:
|
|
178
|
+
- **`maintain_buffer_all`**: Shifts tasks by the same delta to preserve all gaps. Direction depends on the interaction:
|
|
179
|
+
- **Drag**: both upstream and downstream tasks shift
|
|
180
|
+
- **Right-resize** (end date changes): downstream tasks shift
|
|
181
|
+
- **Left-resize** (start date changes): upstream tasks shift
|
|
179
182
|
|
|
180
|
-
- **`maintain_buffer_downstream`**:
|
|
183
|
+
- **`maintain_buffer_downstream`**: Only downstream (child) tasks ever shift — regardless of whether the bar was dragged or resized. Left-resize does nothing.
|
|
181
184
|
|
|
182
|
-
- **`consume_buffer`**: Dependency-type-aware shifting. A shift only happens when a real conflict exists —
|
|
185
|
+
- **`consume_buffer`**: Dependency-type-aware shifting. A shift only happens when a real conflict exists — remaining buffer is consumed silently. When buffer is exhausted, the minimum required shift is applied. Direction follows the same rules as `maintain_buffer_all` (drag → both, right-resize → downstream, left-resize → upstream).
|
|
183
186
|
|
|
184
187
|
Conflict conditions per dependency type:
|
|
185
188
|
| Type | Conflict when |
|
|
@@ -198,7 +201,7 @@ let gantt = new Gantt("#gantt", tasks, {
|
|
|
198
201
|
```
|
|
199
202
|
|
|
200
203
|
**Behavior notes:**
|
|
201
|
-
- Shifting fires after
|
|
204
|
+
- Shifting fires after release (mouseup), not during live dragging or resizing
|
|
202
205
|
- When a task has multiple predecessors, the maximum required shift is applied (ensures all constraints are satisfied)
|
|
203
206
|
- Cycles in the dependency graph are safely skipped
|
|
204
207
|
|
|
@@ -253,6 +256,29 @@ Frappe Gantt provides event callbacks to respond to user interactions:
|
|
|
253
256
|
| `on_view_change` | Triggered when the view mode changes. | `mode` (string) |
|
|
254
257
|
| `on_hover` | Triggered when hovering over a task. | `task`, `screenX`, `screenY`, `event` |
|
|
255
258
|
| `on_task_add` | Triggered when the add task icon is clicked. | `task` - the parent task object |
|
|
259
|
+
| `on_arrow_click` | Triggered when a dependency arrow is clicked (activated). Clicking the same arrow again or clicking outside deselects it — deselection does not re-fire this event. | `from_task`, `to_task` — the connected task objects |
|
|
260
|
+
|
|
261
|
+
#### Arrow Active State
|
|
262
|
+
|
|
263
|
+
Hovering over a dependency arrow highlights it and its connected bars, and shows a small badge near the destination bar indicating the dependency type (`FS`, `SS`, `FF`, or `SF`).
|
|
264
|
+
|
|
265
|
+
Clicking an arrow puts it into an **active state** — the highlight and badge persist even after the mouse moves away.
|
|
266
|
+
|
|
267
|
+
- **Hover** → highlights arrow and connected bars, shows dependency type badge
|
|
268
|
+
- **Click an arrow or its badge** → activates it, fires `on_arrow_click`, badge stays visible
|
|
269
|
+
- **Click the same arrow again** → deactivates (toggle off), no callback
|
|
270
|
+
- **Click a different arrow** → deactivates the previous, activates the new one
|
|
271
|
+
- **Click anywhere outside** (including outside the SVG) → deactivates
|
|
272
|
+
|
|
273
|
+
**Example:**
|
|
274
|
+
|
|
275
|
+
```js
|
|
276
|
+
let gantt = new Gantt("#gantt", tasks, {
|
|
277
|
+
on_arrow_click: (from_task, to_task) => {
|
|
278
|
+
console.log(`Dependency: ${from_task.id} → ${to_task.id}`);
|
|
279
|
+
}
|
|
280
|
+
});
|
|
281
|
+
```
|
|
256
282
|
|
|
257
283
|
**Example:**
|
|
258
284
|
|
package/dist/frappe-gantt.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--g-arrow-color: #1f2937;--g-arrow-hover-color: #007bff;--g-arrow-critical-color: #f5c044;--g-arrow-invalid-color: #ff7676;--g-bar-color: #fff;--g-bar-border: #fff;--g-tick-color-thick: #ededed;--g-tick-color: #f3f3f3;--g-actions-background: #f3f3f3;--g-border-color: #ebeff2;--g-text-muted: #7c7c7c;--g-text-light: #fff;--g-text-dark: #171717;--g-progress-color: #dbdbdb;--g-handle-color: transparent;--g-weekend-label-color: #dcdce4;--g-expected-progress: #c4c4e9;--g-header-background: #fff;--g-row-color: #fdfdfd;--g-row-border-color: #c7c7c7;--g-today-highlight: #37352f;--g-popup-actions: #ebeff2;--g-weekend-highlight-color: #f7f7f7;--g-task-column-bg: #ffffff;--g-task-row-bg: #ffffff;--g-resize-handle-hover: rgba(59, 130, 246, .3);--g-resize-handle-active: rgba(59, 130, 246, .5)}.gantt-wrapper{display:flex;width:100%;position:relative}.gantt-wrapper.rtl{flex-direction:row-reverse}.gantt-container{line-height:14.5px;position:relative;overflow:auto;font-size:12px;height:var(--gv-grid-height);flex:1;min-width:0;border-radius:8px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#fff;box-shadow:0 10px 24px -3px #0003;padding:10px;border-radius:5px;width:max-content;z-index:1000}.gantt-container .popup-wrapper .title{margin-bottom:2px;color:var(--g-text-dark);font-size:.85rem;font-weight:650;line-height:15px}.gantt-container .popup-wrapper .subtitle{color:var(--g-text-dark);font-size:.8rem;margin-bottom:5px}.gantt-container .popup-wrapper .details{color:var(--g-text-muted);font-size:.7rem}.gantt-container .popup-wrapper .actions{margin-top:10px;margin-left:3px}.gantt-container .popup-wrapper .action-btn{border:none;padding:5px 8px;background-color:var(--g-popup-actions);border-right:1px solid var(--g-text-light)}.gantt-container .popup-wrapper .action-btn:hover{background-color:brightness(97%)}.gantt-container .popup-wrapper .action-btn:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.gantt-container .popup-wrapper .action-btn:last-child{border-right:none;border-top-right-radius:4px;border-bottom-right-radius:4px}.gantt-container .grid-header{height:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);background-color:var(--g-header-background);position:sticky;top:0;left:0;border-bottom:1px solid var(--g-row-border-color);z-index:1000}.gantt-container .lower-text,.gantt-container .upper-text{text-anchor:middle}.gantt-container .upper-header{height:var(--gv-upper-header-height)}.gantt-container .lower-header{height:var(--gv-lower-header-height)}.gantt-container .lower-text{font-size:12px;position:absolute;width:calc(var(--gv-column-width) * .8);height:calc(var(--gv-lower-header-height) * .8);margin:0 calc(var(--gv-column-width) * .1);align-content:center;text-align:center;color:var(--g-text-muted)}.gantt-container .upper-text{position:absolute;width:fit-content;font-weight:500;font-size:14px;color:var(--g-text-dark);height:calc(var(--gv-lower-header-height) * .66)}.gantt-container .current-upper{position:sticky;left:0!important;padding-left:17px;background:#fff}.gantt-container .side-header{position:sticky;top:0;right:0;float:right;z-index:1000;line-height:20px;font-weight:400;width:max-content;margin-left:auto;padding-right:10px;padding-top:10px;background:var(--g-header-background);display:flex}.gantt-container .side-header *{transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--g-actions-background);border-radius:.5rem;border:none;padding:5px 8px;color:var(--g-text-dark);font-size:14px;letter-spacing:.02em;font-weight:420;box-sizing:content-box;margin-right:5px}.gantt-container .side-header *:last-child{margin-right:0}.gantt-container .side-header *:hover{filter:brightness(97.5%)}.gantt-container .side-header select{width:60px;padding-top:2px;padding-bottom:2px}.gantt-container .side-header select:focus{outline:none}.gantt-container .date-range-highlight{background-color:var(--g-progress-color);border-radius:12px;height:calc(var(--gv-lower-header-height) - 6px);top:calc(var(--gv-upper-header-height) + 5px);position:absolute}.gantt-container .current-highlight{position:absolute;background:var(--g-today-highlight);width:1px;z-index:999}.gantt-container .current-ball-highlight{position:absolute;background:var(--g-today-highlight);z-index:1001;border-radius:50%}.gantt-container .current-date-highlight{background:var(--g-today-highlight);color:var(--g-text-light);border-radius:5px}.gantt-container .holiday-label{position:absolute;top:0;left:0;opacity:0;z-index:1000;background:--g-weekend-label-color;border-radius:5px;padding:2px 5px}.gantt-container .holiday-label.show{opacity:100}.gantt-container .extras{position:sticky;left:0}.gantt-container .extras .adjust{position:absolute;left:8px;top:calc(var(--gv-grid-height) - 60px);background-color:#000000b3;color:#fff;border:none;padding:8px;border-radius:3px}.gantt-container .hide{display:none}.gantt{user-select:none;-webkit-user-select:none;position:absolute;left:0}.gantt .grid-background{fill:none}.gantt .grid-row{fill:var(--g-row-color)}.gantt .row-line{stroke:var(--g-border-color)}.gantt .tick{stroke:var(--g-tick-color);stroke-width:.4}.gantt .tick.thick{stroke:var(--g-tick-color-thick);stroke-width:.7}.gantt .arrow{fill:none;stroke:var(--g-arrow-color);stroke-width:1.5}.gantt .arrow-critical{stroke:var(--g-arrow-critical-color)}.gantt .arrow-invalid{stroke:var(--g-arrow-invalid-color)}.gantt .arrow-hover{stroke:var(--g-arrow-hover-color)}.gantt .bar-wrapper .bar{fill:var(--g-bar-color);stroke:var(--g-bar-border);stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-wrapper .bar.bar-arrow-critical{outline-color:var(--g-arrow-critical-color)}.gantt .bar-wrapper .bar.bar-arrow-invalid{outline-color:var(--g-arrow-invalid-color)}.gantt .bar-progress{fill:var(--g-progress-color);border-radius:4px}.gantt .bar-expected-progress{fill:var(--g-expected-progress)}.gantt .bar-invalid{fill:transparent;stroke:var(--g-bar-border);stroke-width:1;stroke-dasharray:5}:is(.gantt .bar-invalid)~.bar-label{fill:var(--g-text-light)}.gantt .bar-label{fill:var(--g-text-dark);dominant-baseline:central;font-family:Helvetica;font-size:13px;font-weight:400}.gantt .bar-label.big{fill:var(--g-text-dark);text-anchor:start}.gantt .handle{fill:var(--g-handle-color);opacity:0;transition:opacity .3s ease}.gantt .handle.active,.gantt .handle.visible{cursor:ew-resize;opacity:1}.gantt .handle.progress{fill:var(--g-text-muted)}.gantt .bar-wrapper{cursor:pointer}.gantt .bar-wrapper .bar{outline:1px solid var(--g-row-border-color);border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-range-highlight{display:block}.gantt .add-task-icon{cursor:pointer;transition:opacity .2s ease}.gantt .add-task-icon .add-task-icon-bg{fill:var(--g-bar-color);stroke:var(--g-bar-border);stroke-width:1;transition:all .2s ease}.gantt .add-task-icon .add-task-icon-plus{stroke:var(--g-text-dark);stroke-width:2;stroke-linecap:round;transition:stroke .2s ease}.gantt .add-task-icon.active .add-task-icon-bg,.gantt .add-task-icon:hover .add-task-icon-bg{fill:var(--g-progress-color);stroke:var(--g-progress-color)}.gantt .add-task-icon.active .add-task-icon-plus,.gantt .add-task-icon:hover .add-task-icon-plus{stroke:var(--g-text-light)}.task-column{flex-shrink:0;width:var(--gv-task-column-width, 150px);height:var(--gv-grid-height);background-color:var(--g-task-column-bg);border-right:1px solid var(--g-row-border-color);overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;position:relative;scrollbar-width:none;-ms-overflow-style:none}.task-column::-webkit-scrollbar{display:none}.task-column-header{height:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);background-color:var(--g-header-background);border-bottom:1px solid var(--g-row-border-color);position:sticky;top:0;z-index:1001;display:flex;align-items:center;padding:0 12px;font-weight:600;font-size:13px;color:var(--g-text-dark)}.task-column-content{position:relative;width:100%;padding-top:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);overflow:visible}.task-row{position:absolute;width:100%;padding:0 12px;display:flex;align-items:center;font-size:13px;color:var(--g-text-dark);border-bottom:1px solid var(--g-row-border-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--g-task-row-bg)}.task-column-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;min-height:calc(var(--gv-task-column-content-height) + var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);cursor:col-resize;z-index:1002;background-color:transparent;transition:background-color .2s ease}.task-column-resize-handle:hover{background-color:var(--g-resize-handle-hover)}.task-column.resizing .task-column-resize-handle{background-color:var(--g-resize-handle-active)}.task-column.resizing{-webkit-user-select:none;user-select:none}.gantt-wrapper.rtl .task-column{border-right:none;border-left:1px solid var(--g-row-border-color)}.gantt-wrapper.rtl .task-column-resize-handle{right:auto;left:0}
|
|
1
|
+
:root{--g-arrow-color: #1f2937;--g-arrow-hover-color: #007bff;--g-arrow-critical-color: #f5c044;--g-arrow-invalid-color: #ff7676;--g-bar-color: #fff;--g-bar-border: #fff;--g-tick-color-thick: #ededed;--g-tick-color: #f3f3f3;--g-actions-background: #f3f3f3;--g-border-color: #ebeff2;--g-text-muted: #7c7c7c;--g-text-light: #fff;--g-text-dark: #171717;--g-progress-color: #dbdbdb;--g-handle-color: transparent;--g-weekend-label-color: #dcdce4;--g-expected-progress: #c4c4e9;--g-header-background: #fff;--g-row-color: #fdfdfd;--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, .3);--g-resize-handle-active: rgba(59, 130, 246, .5)}.gantt-wrapper{display:flex;width:100%;position:relative}.gantt-wrapper.rtl{flex-direction:row-reverse}.gantt-container{line-height:14.5px;position:relative;overflow:auto;font-size:12px;height:var(--gv-grid-height);flex:1;min-width:0;border-radius:8px}.gantt-container .popup-wrapper{position:absolute;top:0;left:0;background:#fff;box-shadow:0 10px 24px -3px #0003;padding:10px;border-radius:5px;width:max-content;z-index:1000}.gantt-container .popup-wrapper .title{margin-bottom:2px;color:var(--g-text-dark);font-size:.85rem;font-weight:650;line-height:15px}.gantt-container .popup-wrapper .subtitle{color:var(--g-text-dark);font-size:.8rem;margin-bottom:5px}.gantt-container .popup-wrapper .details{color:var(--g-text-muted);font-size:.7rem}.gantt-container .popup-wrapper .actions{margin-top:10px;margin-left:3px}.gantt-container .popup-wrapper .action-btn{border:none;padding:5px 8px;background-color:var(--g-popup-actions);border-right:1px solid var(--g-text-light)}.gantt-container .popup-wrapper .action-btn:hover{background-color:brightness(97%)}.gantt-container .popup-wrapper .action-btn:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.gantt-container .popup-wrapper .action-btn:last-child{border-right:none;border-top-right-radius:4px;border-bottom-right-radius:4px}.gantt-container .grid-header{height:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);background-color:var(--g-header-background);position:sticky;top:0;left:0;border-bottom:1px solid var(--g-row-border-color);z-index:1000}.gantt-container .lower-text,.gantt-container .upper-text{text-anchor:middle}.gantt-container .upper-header{height:var(--gv-upper-header-height)}.gantt-container .lower-header{height:var(--gv-lower-header-height)}.gantt-container .lower-text{font-size:12px;position:absolute;width:calc(var(--gv-column-width) * .8);height:calc(var(--gv-lower-header-height) * .8);margin:0 calc(var(--gv-column-width) * .1);align-content:center;text-align:center;color:var(--g-text-muted)}.gantt-container .upper-text{position:absolute;width:fit-content;font-weight:500;font-size:14px;color:var(--g-text-dark);height:calc(var(--gv-lower-header-height) * .66)}.gantt-container .current-upper{position:sticky;left:0!important;padding-left:17px;background:#fff}.gantt-container .side-header{position:sticky;top:0;right:0;float:right;z-index:1000;line-height:20px;font-weight:400;width:max-content;margin-left:auto;padding-right:10px;padding-top:10px;background:var(--g-header-background);display:flex}.gantt-container .side-header *{transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--g-actions-background);border-radius:.5rem;border:none;padding:5px 8px;color:var(--g-text-dark);font-size:14px;letter-spacing:.02em;font-weight:420;box-sizing:content-box;margin-right:5px}.gantt-container .side-header *:last-child{margin-right:0}.gantt-container .side-header *:hover{filter:brightness(97.5%)}.gantt-container .side-header select{width:60px;padding-top:2px;padding-bottom:2px}.gantt-container .side-header select:focus{outline:none}.gantt-container .date-range-highlight{background-color:var(--g-progress-color);border-radius:12px;height:calc(var(--gv-lower-header-height) - 6px);top:calc(var(--gv-upper-header-height) + 5px);position:absolute}.gantt-container .current-highlight{position:absolute;background:var(--g-today-highlight);width:1px;z-index:999}.gantt-container .current-ball-highlight{position:absolute;background:var(--g-today-highlight);z-index:1001;border-radius:50%}.gantt-container .current-date-highlight{background:var(--g-today-highlight);color:var(--g-text-light);border-radius:5px}.gantt-container .holiday-label{position:absolute;top:0;left:0;opacity:0;z-index:1000;background:--g-weekend-label-color;border-radius:5px;padding:2px 5px}.gantt-container .holiday-label.show{opacity:100}.gantt-container .extras{position:sticky;left:0}.gantt-container .extras .adjust{position:absolute;left:8px;top:calc(var(--gv-grid-height) - 60px);background-color:#000000b3;color:#fff;border:none;padding:8px;border-radius:3px}.gantt-container .hide{display:none}.gantt{user-select:none;-webkit-user-select:none;position:absolute;left:0}.gantt .grid-background{fill:none}.gantt .grid-row{fill:var(--g-row-color)}.gantt .row-line{stroke:var(--g-border-color)}.gantt .tick{stroke:var(--g-tick-color);stroke-width:.4}.gantt .tick.thick{stroke:var(--g-tick-color-thick);stroke-width:.7}.gantt .arrow{fill:none;stroke:var(--g-arrow-color);stroke-width:1.5}.gantt .arrow-critical{stroke:var(--g-arrow-critical-color)}.gantt .arrow-invalid{stroke:var(--g-arrow-invalid-color)}.gantt .arrow-hover,.gantt .arrow-active{stroke:var(--g-arrow-hover-color)}.gantt .arrow-type-label{stroke-width:0;cursor:pointer}.gantt .arrow-type-label rect{fill:var(--g-arrow-type-label-bg)}.gantt .arrow-type-label text{fill:var(--g-arrow-type-label-color);font-size:10px;font-weight:600;font-family:inherit;pointer-events:none}.gantt .bar-wrapper .bar{fill:var(--g-bar-color);stroke:var(--g-bar-border);stroke-width:0;transition:stroke-width .3s ease}.gantt .bar-wrapper .bar.bar-arrow-active{outline-color:var(--g-arrow-hover-color);outline-width:2px;outline-style:solid}.gantt .bar-wrapper .bar.bar-arrow-critical{outline-color:var(--g-arrow-critical-color)}.gantt .bar-wrapper .bar.bar-arrow-invalid{outline-color:var(--g-arrow-invalid-color)}.gantt .bar-progress{fill:var(--g-progress-color);border-radius:4px}.gantt .bar-expected-progress{fill:var(--g-expected-progress)}.gantt .bar-invalid{fill:transparent;stroke:var(--g-bar-border);stroke-width:1;stroke-dasharray:5}:is(.gantt .bar-invalid)~.bar-label{fill:var(--g-text-light)}.gantt .bar-label{fill:var(--g-text-dark);dominant-baseline:central;font-family:Helvetica;font-size:13px;font-weight:400}.gantt .bar-label.big{fill:var(--g-text-dark);text-anchor:start}.gantt .handle{fill:var(--g-handle-color);opacity:0;transition:opacity .3s ease}.gantt .handle.active,.gantt .handle.visible{cursor:ew-resize;opacity:1}.gantt .handle.progress{fill:var(--g-text-muted)}.gantt .bar-wrapper{cursor:pointer}.gantt .bar-wrapper .bar{outline:1px solid var(--g-row-border-color);border-radius:3px}.gantt .bar-wrapper:hover .bar{transition:transform .3s ease}.gantt .bar-wrapper:hover .date-range-highlight{display:block}.gantt .add-task-icon{cursor:pointer;transition:opacity .2s ease}.gantt .add-task-icon .add-task-icon-bg{fill:var(--g-bar-color);stroke:var(--g-bar-border);stroke-width:1;transition:all .2s ease}.gantt .add-task-icon .add-task-icon-plus{stroke:var(--g-text-dark);stroke-width:2;stroke-linecap:round;transition:stroke .2s ease}.gantt .add-task-icon.active .add-task-icon-bg,.gantt .add-task-icon:hover .add-task-icon-bg{fill:var(--g-progress-color);stroke:var(--g-progress-color)}.gantt .add-task-icon.active .add-task-icon-plus,.gantt .add-task-icon:hover .add-task-icon-plus{stroke:var(--g-text-light)}.task-column{flex-shrink:0;width:var(--gv-task-column-width, 150px);height:var(--gv-grid-height);background-color:var(--g-task-column-bg);border-right:1px solid var(--g-row-border-color);overflow-y:auto;overflow-x:hidden;-webkit-user-select:none;user-select:none;position:relative;scrollbar-width:none;-ms-overflow-style:none}.task-column::-webkit-scrollbar{display:none}.task-column-header{height:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);background-color:var(--g-header-background);border-bottom:1px solid var(--g-row-border-color);position:sticky;top:0;z-index:1001;display:flex;align-items:center;padding:0 12px;font-weight:600;font-size:13px;color:var(--g-text-dark)}.task-column-content{position:relative;width:100%;padding-top:calc(var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);overflow:visible}.task-row{position:absolute;width:100%;padding:0 12px;display:flex;align-items:center;font-size:13px;color:var(--g-text-dark);border-bottom:1px solid var(--g-row-border-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:var(--g-task-row-bg)}.task-column-resize-handle{position:absolute;top:0;right:0;width:6px;height:100%;min-height:calc(var(--gv-task-column-content-height) + var(--gv-lower-header-height) + var(--gv-upper-header-height) + 10px);cursor:col-resize;z-index:1002;background-color:transparent;transition:background-color .2s ease}.task-column-resize-handle:hover{background-color:var(--g-resize-handle-hover)}.task-column.resizing .task-column-resize-handle{background-color:var(--g-resize-handle-active)}.task-column.resizing{-webkit-user-select:none;user-select:none}.gantt-wrapper.rtl .task-column{border-right:none;border-left:1px solid var(--g-row-border-color)}.gantt-wrapper.rtl .task-column-resize-handle{right:auto;left:0}
|