⚙️ Implementation: How should the Gantt widget implement drag-to-reschedule tas...

Date: 2026-03-26
Time: 16:20:29 UTC
Session: gspace1-271.14
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How should the Gantt widget implement drag-to-reschedule task bars without CDK DragDrop?

Task: Implement Gantt drag-to-reschedule in Angular Elements context

🎯 Decision Made

Chosen:

Native mouse events (mousedown/mousemove/mouseup) on document with signal-based offset computation. A dragOffsetDays signal drives a computed(() => buildBars(..., drag)) that repositions all bars reactively on every pixel movement.

Options Considered:

1. Native mouse events + signal offset (chosen)
2. CDK DragDrop with custom boundary (wrong abstraction)
3. Pointer Events API (browser support gap)
4. Third-party Gantt library (bundle bloat, style conflict)

💭 Reasoning

CDK DragDrop is designed for list reordering (index-based). Gantt bars are positioned by pixel offsets derived from date math — you drag a bar and it needs to move exactly N days based on delta-pixels / cellWidth. CDK cannot express this semantics. Native mousedown/mousemove/mouseup on document (bound/unbound dynamically) gives full pixel control. The key design: store dragOffsetDays as a writable signal; the bars computed reads it and applies the offset to the dragged task's start/end before computing pixel positions. This makes the drag smooth and reactive without imperative DOM manipulation. On mouseup, the final offset is applied to the source data and persisted to MongoDB. Cleanup: always removeEventListener on mouseup to prevent memory leaks.

📁 Files Involved

• libs/libs-structural/platform-elements-angular/src/lib/components/gantt-widget/gantt-widget.component.ts
• libs/libs-structural/platform-elements-angular/src/lib/models/gantt.models.ts

🔗 Related

• Decision ID: dev_1774542029369_dwdpcsw
• Session: 271
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation