@fatcore/gantt-lite 1.0.1 → 1.0.2

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

@@ -1,323 +0,0 @@
-/* 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

@@ -1,391 +0,0 @@
-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';
-    }
-}