@fatcore/gantt-lite 1.0.0

package/projects/gantt-lite/src/lib/gantt-lite.component.scss

@@ -0,0 +1,323 @@
+/* GANTT ROOT */
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.gantt-root {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.gantt-body {
+    flex: 1;
+    display: flex;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(170, 170, 170, 0.8);
+}
+
+/* TOOLBAR */
+.toolbar {
+    flex-shrink: 0;
+    display: flex;
+    gap: 8px;
+    background: white;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.toolbar button.active {
+    font-weight: bold;
+}
+
+/* LOADING */
+.loading-overlay {
+    position: sticky;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+/* TOOLTIP */
+.global-tooltip {
+    position: fixed;
+    background: rgba(88, 88, 88, 0.9);
+    color: white;
+    padding: 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    z-index: 1000;
+    pointer-events: none;
+}
+
+/* LEFT PANEL */
+.left-panel {
+    flex-shrink: 0;
+    background: white;
+    border-right: 1px solid #dcdcdc;
+}
+
+.task-row {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 120px;
+    gap: 0 10px;
+    font-size: small;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.cell {
+    padding: 0 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.task-row.header {
+    font-size: small;
+    font-weight: 600;
+    position: sticky;
+    top: 0;
+    background: white !important;
+    z-index: 1;
+}
+
+.task-row:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+
+.highlighted-row {
+    background: rgba(255, 0, 0, 0.3) !important;
+}
+
+/* RESIZER */
+.resizer {
+    min-width: 7px;
+    cursor: col-resize;
+    background: #b4b4b4;
+}
+
+.resizer:hover {
+    background: #696969;
+}
+
+
+/* RIGHT PANEL */
+.right-panel {
+    flex: 1;
+    min-width: 100px !important;
+    position: relative;
+}
+
+.right-panel-dead {
+    flex: 1;
+    height: 10000px;
+    min-width: 100px !important;
+    position: relative;
+    background-color: #696969;
+}
+
+/* ONLY HORIZONTAL SCROLL */
+.horizontal-scroll {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    position: relative;
+}
+
+/* MAIN CONTENT */
+.gantt-content {
+    position: relative;
+}
+
+/* TIMELINE HEADER */
+.timeline-header {
+    display: flex;
+    position: sticky;
+    top: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    z-index: 20;
+    background: white;
+    border-bottom: 1px solid #ccc;
+}
+
+.timeline-slot {
+    flex: 0 0 auto;
+    border-right: 1px solid #e0e0e0;
+    padding: 8px;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 12px;
+}
+
+.highlighted-task {
+    background: rgba(255, 0, 0, 0.4) !important;
+    border-color: #b71c1c !important;
+    z-index: 10;
+}
+
+/* GRID */
+.grid-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.grid-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: rgba(200, 200, 200, 0.35);
+}
+
+.horizontal-grid-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.horizontal-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(200, 200, 200, 0.25);
+}
+
+/* DEPENDENCIES */
+.dependencies-svg {
+    overflow: visible;
+}
+
+.dependencies-normal {
+    pointer-events: none;
+}
+
+.dependencies-highlighted {
+    pointer-events: none;
+}
+
+/* NORMAL DEPENDENCIES */
+.dependency {
+    stroke: #9ba2ad;
+    stroke-width: 1.6;
+    fill: none;
+    opacity: 0.35;
+}
+
+/* HIGHLIGHTED DEPENDENCIES */
+.highlighted-dependency {
+    stroke: #52555a;
+    stroke-width: 2.7;
+    fill: none;
+    opacity: 1;
+}
+
+/* OPTIONAL: fade non-selected dependencies when hovering */
+.dependencies-svg.hovering .dependency {
+    opacity: 0.035;
+}
+
+/* TASKS */
+.tasks-layer {
+    position: relative;
+    z-index: 2;
+}
+
+.task {
+    position: absolute;
+    background: rgba(155, 148, 247, 0.75);
+    opacity: 0.85;
+    color: rgb(80, 80, 80);
+    padding-top: 4px;
+    border-radius: 4px;
+    font-size: 11px;
+    white-space: nowrap;
+    min-width: 2px;
+}
+
+.task:hover {
+    background: rgba(255, 0, 0, 0.15);
+}
+
+/* SPINNER */
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #ddd;
+    border-top-color: #3f51b5;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* BUTTON SCROLL GANTT */
+.floating-nav {
+    position: sticky;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 100;
+    pointer-events: none;
+}
+
+.nav-btn {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: auto;
+    background: rgba(92, 154, 248, 0.4);
+    border: none;
+    color: rgb(83, 83, 83);
+    font-size: 26px;
+    cursor: pointer;
+    backdrop-filter: blur(1px);
+    border-radius: 2px;
+    line-height: 1;
+    text-align: center;
+}
+
+.nav-btn:hover {
+    background: rgba(92, 154, 248, 0.7);
+}
+
+.nav-btn.left {
+    margin-left: 13px;
+}
+
+.nav-btn.right {
+    right: 23px;
+}
+
+.task-label {
+    padding-left: 6px;
+}
+
+.hidden {
+    display: none;
+}

package/projects/gantt-lite/src/lib/gantt-lite.component.ts

@@ -0,0 +1,391 @@
+import { Component, ElementRef, ViewChild, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { DependencyPath, GanttScale, GanttTask, GanttTaskView } from './gantt-lite.model';
+import { SlotIndexToDateLabelConverter } from './gantt-lite.helper';
+import { GanttLiteBase } from './gantt-lite-base';
+
+@Component({
+    selector: 'gantt-lite',
+    templateUrl: './gantt-lite.component.html',
+    styleUrls: ['./gantt-lite.component.scss'],
+    standalone: false,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GanttLiteComponent extends GanttLiteBase {
+    @Input()
+    public set rawTasks(value: GanttTask[]) {
+        this._rawTasks = value ?? [];
+        this.recalculteAll();
+    }
+    public get rawTasks(): GanttTask[] {
+        return this._rawTasks;
+    }
+    @ViewChild('ganttBodyScroll') private ganttBodyScroll!: ElementRef<HTMLDivElement>;
+    @ViewChild('ganttContent') private ganttContent!: ElementRef<HTMLDivElement>;
+    @ViewChild('ganttScroll') private ganttScroll!: ElementRef<HTMLDivElement>;
+    @ViewChild('leftPanel') private leftPanel!: ElementRef<HTMLButtonElement>;
+    @ViewChild('timelineHeader') private timelineHeader!: ElementRef<HTMLDivElement>;
+    @ViewChild('leftBtn') private leftBtn!: ElementRef<HTMLButtonElement>;
+    @ViewChild('rightBtn') private rightBtn!: ElementRef<HTMLButtonElement>;
+    public toolbarHeight: number = 27;
+    public hoveredDependencyIds = new Set<string>();
+    public selectedTaskId: string | null = null;
+    public tooltipTask: GanttTask | null = null;
+    public tooltipX = 0;
+    public tooltipY = 0;
+    public maxSlotsAlert: boolean = false;
+    public loading: boolean = false;
+    public showLeftBtn = false;
+    public showRightBtn = true;
+    public buttonsHeight: number = 20;
+    public viewTasks: GanttTaskView[] = [];
+    private _rawTasks: GanttTask[] = [];
+    private originDate: number = 0;
+    private resizing = false;
+    private scrollInterval: any;
+    private labelConverter: SlotIndexToDateLabelConverter | null = null;
+
+    constructor(private cdr: ChangeDetectorRef) { super(); }
+
+    // recalculate all Gantt
+    private recalculteAll(): void {
+        this.loading = true;
+        this.cdr.markForCheck();
+        setTimeout(() => {
+            const start = performance.now();
+            this.refreshVisibleColumns();
+            this.scaleSelected = this.getScaleConfig(this.defaultScale);
+
+            if (this.dataType !== 'duration') {
+                const base = new Date(Math.min(...this.rawTasks.map((t) => (t.start as Date).getTime())));
+                this.originDate = this.alignOriginByScale(base, this.defaultScale).getTime();
+                this.labelConverter = new SlotIndexToDateLabelConverter(
+                    this.dateMode,
+                    this.originDate,
+                    this.scaleSelected.secondes,
+                    this.hasNegativeDependencySpace
+                );
+                this.buildTaskSlotsFromDates();
+            } else {
+                this.labelConverter = new SlotIndexToDateLabelConverter(
+                    this.dateMode,
+                    this.originDate,
+                    this.scaleSelected.secondes,
+                    this.hasNegativeDependencySpace
+                );
+                this.buildTaskSlotsFromDuration();
+            }
+            this.detectNegativeDependencySpace();
+            this.calculateTimelineSlots();
+            this.getAllDependencyPaths();
+            this.ganttHeightCalcul();
+            this.ganttWidthCalcul();
+            this.recomputeLayout();
+            this.ganttScroll.nativeElement.style.height = this.layout.scrollHeight + 'px';
+            this.ganttBodyScroll.nativeElement.style.height = this.layout.bodyHeight + 'px';
+            this.timelineHeader.nativeElement.style.height = this.headerHeight + 'px';
+            this.ganttContent.nativeElement.style.height = this.ganttHeight - this.rowHeight + 'px';
+            this.ganttContent.nativeElement.style.width = this.ganttWidth + 'px';
+            this.leftPanel.nativeElement.style.width = this.leftPanelWidth + 'px';
+
+            this.buildViewTasks();
+            setTimeout(() => {
+                this.recenterSelectedTask();
+            }, 0);
+            this.loading = false;
+            this.cdr.markForCheck();
+            requestAnimationFrame(() => {
+                const end = performance.now();
+                console.log('frame time including render:', end - start, 'ms');
+            });
+        }, 0);
+    }
+    
+
+    private buildViewTasks(): void {
+        const h = this.rowHeight / 1.25;
+
+        this.viewTasks = this.tasks.map((t): GanttTaskView => {
+            return {
+                ...t,
+                x: this.getTaskX(t),
+                y: this.getTaskY(t),
+                width: this.getTaskWidth(t),
+                height: h,
+            };
+        });
+    }
+
+    // click on button 10m, hour, months
+    public setScale(scale: GanttScale): void {
+        this.defaultScale = scale;
+        this.recalculteAll();
+    }
+
+
+    // if task was selected scroll back to it
+    private recenterSelectedTask(): void {
+        if (!this.selectedTaskId) {
+            if (!this.ganttScroll) return;
+            this.ganttScroll.nativeElement.scrollLeft = 0;
+
+            // force header sync
+            if (this.timelineHeader?.nativeElement) {
+                this.timelineHeader.nativeElement.scrollLeft = 0;
+            }
+            this.onScrolled();
+        }
+
+        const task = this.tasks.find((t) => t.id === this.selectedTaskId);
+        if (!task || !this.ganttScroll) return;
+
+        // scroll X
+        const viewportWidth = this.ganttScroll.nativeElement.clientWidth;
+        const targetScrollLeft = this.getTaskX(task) - viewportWidth / 2;
+        this.ganttScroll.nativeElement.scrollTo({ left: Math.max(targetScrollLeft, 0), behavior: 'auto' });
+
+        // scroll Y
+        const viewportHeight = this.ganttBodyScroll.nativeElement.clientHeight;
+        const targetTop = task.row * this.rowHeight;
+        const scrollTop = targetTop - viewportHeight / 2 + this.rowHeight / 2;
+        this.ganttBodyScroll.nativeElement.scrollTo({ top: Math.max(scrollTop, 0), behavior: 'auto' });
+
+        this.onScrolled();
+    }
+
+    // detect if there is a need to add the N/A slot in order to be able to show dependency arrow before 0.
+    private detectNegativeDependencySpace(): void {
+        const originTasks = this.tasks.filter((t) => (t.startSlot ?? 0) === 0);
+
+        this.hasNegativeDependencySpace = originTasks.some((task) => {
+            const fromRight = this.getRawTaskX(task) + this.getTaskWidth(task);
+            return (task.dependencies ?? []).some((depId: any) => {
+                const target = this.tasks.find((t) => t.id === depId);
+                if (!target) return false;
+
+                const toLeft = this.getRawTaskX(target);
+                // true if dependency goes "backwards"
+                return toLeft < fromRight;
+            });
+        });
+    }
+
+    // scroll buttons left/right => click small go, stay clicked scroll a lot
+    public startScroll(direction: 'left' | 'right'): void {
+        // instant first move           
+        this.scrollInterval = setInterval(() => {
+            this.ganttScroll.nativeElement.scrollLeft += direction === 'left' ? -100 : 100;
+            this.onScrolled();
+        }, 50);
+    }
+
+    // update buttons left/right after a scroll.
+    private onScrolled(): void {
+        const el = this.ganttScroll.nativeElement;
+        const maxScrollLeft = el.scrollWidth - el.clientWidth;
+        // left button
+        this.showLeftBtn = el.scrollLeft > 0;
+        if (this.leftBtn?.nativeElement) {
+            if (this.showLeftBtn) {
+                this.leftBtn.nativeElement.style.display = 'block';
+                this.leftBtn.nativeElement.style.left = this.leftPanel.nativeElement.style.width;
+            } else {
+                this.leftBtn.nativeElement.style.display = 'none';
+                this.leftBtn.nativeElement.style.left = this.leftPanel.nativeElement.style.width;
+            }
+        }
+        // right button
+        this.showRightBtn = el.scrollLeft < maxScrollLeft - 1 || el.scrollLeft === 0; // small tolerance
+        if (this.rightBtn?.nativeElement) {
+            if (this.showRightBtn) {
+                this.rightBtn.nativeElement.style.display = 'block';
+            } else {
+                this.rightBtn.nativeElement.style.display = 'none';
+            }
+        }
+        if (!this.showLeftBtn || !this.showRightBtn) {
+            this.stopScroll();
+        }
+    }
+
+    public stopScroll(): void{
+        clearInterval(this.scrollInterval);
+    }
+
+    // to sync header and grid
+    public onHorizontalScroll(event: Event): void {
+        this.timelineHeader.nativeElement.scrollLeft = (event.target as HTMLElement).scrollLeft;
+    }
+
+    // highlight dependencies (arrows)
+    private updateHoveredDependencies(task: GanttTask | null): void {
+        this.hoveredDependencyIds.clear();
+        if (!task) {
+            return;
+        }
+
+        // outgoing dependencies
+        for (const dep of task.dependencies ?? []) {
+            this.hoveredDependencyIds.add(`${dep}->${task.id}`);
+        }
+
+        // incoming dependencies
+        for (const t of this.tasks) {
+            if ((t.dependencies ?? []).includes(task.id)) {
+                this.hoveredDependencyIds.add(`${task.id}->${t.id}`);
+            }
+        }
+    }
+
+    // select task left and right panel
+    public selectTask(task: GanttTask, scroll: boolean): void {
+        if (this.selectedTaskId === task.id) {
+            this.selectedTaskId = null;
+            this.hoveredDependencyIds.clear();
+            this.hideTooltip();
+            this.onScrolled();
+            return;
+        }
+
+        this.selectedTaskId = task.id;
+        this.updateHoveredDependencies(task);
+        this.onScrolled();
+        if (!scroll || !this.ganttScroll) return;
+
+        const container = this.ganttScroll.nativeElement as HTMLElement;
+        const viewportWidth = container.clientWidth;
+        const targetScrollLeft = this.getTaskX(task) - viewportWidth / 2;
+
+        container.scrollTo({
+            left: Math.max(targetScrollLeft, 0),
+            behavior: 'smooth',
+        });
+        this.onScrolled();
+    }
+
+    // resize between panel left and right
+    public startResize(event: MouseEvent): void {
+        event.preventDefault();
+        this.resizing = true;
+        const containerRect = this.ganttBodyScroll.nativeElement.getBoundingClientRect();
+        const left = containerRect.left;
+        const min = 50;
+        const max = containerRect.width - 75;
+        const moveHandler = (e: MouseEvent): void => {
+            if (!this.resizing) return;
+            const x = e.clientX - left;
+            const width = x < min ? min : x > max ? max : x;
+
+            // direct DOM update (no Angular)
+            this.leftPanel.nativeElement.style.width = width + 'px';
+            if (this.leftBtn?.nativeElement) {
+                this.leftBtn.nativeElement.style.left = `${width}px`;
+            }
+        };
+
+        const upHandler = (): void => {
+            this.resizing = false;
+            window.removeEventListener('mousemove', moveHandler);
+            window.removeEventListener('mouseup', upHandler);
+        };
+
+        window.addEventListener('mousemove', moveHandler);
+        window.addEventListener('mouseup', upHandler);
+    }
+
+    public showTooltip(event: MouseEvent, task: GanttTask): void {
+        this.tooltipTask = task;
+        const tooltip = document.querySelector('.global-tooltip') as HTMLElement;
+        if (!tooltip) return;
+        tooltip.style.left = `${event.clientX + 10}px`;
+        tooltip.style.top = `${event.clientY - 50}px`;
+        tooltip.style.display = 'block';
+    }
+
+    public hideTooltip(): void {
+        this.tooltipTask = null;
+        const tooltip = document.querySelector('.global-tooltip') as HTMLElement;
+        if (!tooltip) return;
+        tooltip.style.display = 'none';
+    }
+
+    private buildTaskSlotsFromDates(): void {
+        const slotMs = this.scaleSelected.secondes * 1000;
+        this.tasks = this.rawTasks.map((t) => {
+            if (!(t.start instanceof Date) || !(t.end instanceof Date)) {
+                throw new Error(`Task "${t.id}" must have Date start/end values.`);
+            }
+
+            const startSlot = ((t.start as Date).getTime() - this.originDate) / slotMs;
+            const endSlot = ((t.end as Date).getTime() - this.originDate) / slotMs;
+            return { ...t, startSlot, endSlot };
+        });
+    }
+
+    private buildTaskSlotsFromDuration(): void {
+        this.tasks = this.rawTasks.map((t) => {
+            if (typeof t.start !== 'number' || typeof t.end !== 'number') {
+                throw new Error(`Task "${t.id}" must have numeric start/end values expressed in minutes.`);
+            }
+
+            const startSlot = t.start / this.scaleSelected.secondes;
+            const endSlot = t.end / this.scaleSelected.secondes;
+            return { ...t, startSlot, endSlot };
+        });
+    }
+
+    // get all slots (timeline)
+    private calculateTimelineSlots(): void {
+        const maxSlot = Math.max(...this.tasks.map(t => t.endSlot ?? 0));
+        if (maxSlot > 53000) {
+            this.maxSlotsAlert = true;
+            this.slots = [];
+            return;
+        }
+        this.maxSlotsAlert = false;
+        const buffer = [];
+        let offsetX = 0;
+
+        if (this.hasNegativeDependencySpace) {
+            buffer.push({
+                index: -1,
+                x: 0,
+                width: this.negativeSlotWidth,
+                label: 'N/A'
+            });
+            offsetX = this.negativeSlotWidth;
+        }
+
+        for (let i = 0; i <= maxSlot + 2; i++) {
+            buffer.push({
+                index: i,
+                x: offsetX + i * this.scaleSelected.px,
+                width: this.scaleSelected.px,
+                label: this.getSlotLabel(i) ?? 'Error',
+            });
+        }
+
+        this.slots = buffer;
+    }
+
+    // get all paths of arrows
+    protected getAllDependencyPaths(): void {
+        this.dependencyPaths = this.tasks.flatMap((task): DependencyPath[] =>
+            (task.dependencies ?? []).map(
+                (dep: any): DependencyPath => ({
+                    from: dep,
+                    to: task.id,
+                    id: `${dep}->${task.id}`,
+                    path: this.getDependencyPath(dep, task.id),
+                })
+            )
+        );
+    }
+
+    // get label for date header
+    private getSlotLabel(index: number): string {
+        if (this.dataType === 'calendar') {
+            return this.labelConverter?.getLabelCalendar(index, this.defaultScale) ?? 'Error';
+        }
+        return this.labelConverter?.getLabelDuration(index, this.defaultScale) ?? 'Error';
+    }
+}