@fatcore/gantt-lite 1.0.1 → 1.0.2

package/projects/gantt-lite/README.md

@@ -1,24 +0,0 @@
-# GanttLite
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project gantt-lite` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gantt-lite`.
-> Note: Don't forget to add `--project gantt-lite` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build gantt-lite` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build gantt-lite`, go to the dist folder `cd dist/gantt-lite` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test gantt-lite` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/gantt-lite/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/gantt-lite",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/projects/gantt-lite/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@fatcore/gantt-lite",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": ["dist"],
-  "scripts": {
-    "build": "tsc"
-  }
-}

package/projects/gantt-lite/src/gantt-lite.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from "@angular/core";
-import { GanttLiteComponent } from "./lib/gantt-lite.component";
-import { CommonModule } from "@angular/common";
-
-@NgModule({
-  declarations: [GanttLiteComponent],
-  imports: [CommonModule],
-  exports: [GanttLiteComponent]
-})
-export class GanttLiteModule {}

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

@@ -1,300 +0,0 @@
-import { Directive, Input } from '@angular/core';
-import { DataType, DateMode, DependencyPath, GanttColumn, GanttScale, GanttTask, ScaleConfig } from './gantt-lite.model';
-import { TimelineSlot } from './gantt-lite.model';
-
-@Directive()
-export abstract  class GanttLiteBase {
-    @Input() public rowHeight: number = 40;
-    @Input() public defaultScale: GanttScale = 'day';
-    @Input() public dataType: DataType = 'duration';
-    @Input() public dateMode: DateMode = 'local';
-    @Input() public extraColumns: GanttColumn[] = [];
-    protected slots: TimelineSlot[] = [];
-    protected tasks: GanttTask[] = [];
-    public dependencyPaths: DependencyPath[] = [];
-    protected scaleSelected: ScaleConfig = this.getScaleConfig(this.defaultScale);
-    protected headerHeight: number = 32;
-    protected ganttHeight: number = 0;
-    protected ganttWidth: number = 0;
-    protected leftPanelWidth = 320;
-    protected visibleGridColumns: GanttColumn[] = [];
-    protected visibleTooltipColumns: GanttColumn[] = [];
-    protected layout = { rootMaxHeight: 0, bodyHeight: 0, scrollHeight: 0, resizerHeight: 0 };
-    protected readonly scales: GanttScale[] = ['1m', '10m', '30m', 'hour', '6 hours', '12 hours', 'day', 'week', 'month', 'year'];
-    protected readonly scalesDate: GanttScale[] = ['1m', '10m', '30m', 'hour', 'day', 'week', 'month', 'year'];
-    protected readonly negativeSlotWidth = 50;
-    protected hasNegativeDependencySpace = false;
-
-    constructor() { }
-    
-    // recompute all sizes
-    protected recomputeLayout(): void {
-        this.layout.rootMaxHeight = this.ganttHeight - this.headerHeight + this.rowHeight - 3;
-        this.layout.bodyHeight = this.ganttHeight - this.rowHeight / 3;
-        this.layout.scrollHeight = this.ganttHeight - this.rowHeight;
-        this.layout.resizerHeight = this.ganttHeight + this.headerHeight - this.rowHeight;
-    }
-
-    protected get columns(): GanttColumn[] {
-        return [
-            ...this.coreColumns,
-            ...this.extraColumns
-        ];
-    }
-
-    // minimum columns to show gantt
-    protected readonly coreColumns: GanttColumn[] = [
-        {
-            id: 'label',
-            title: 'Name',
-            valueGetter: t => t.label,
-            showInGrid: true,
-            showInTooltip: true
-        },
-        {
-            id: 'start',
-            title: 'Start',
-            valueGetter: t => this.getDateString(t.start),
-            showInGrid: true,
-            showInTooltip: true,
-            hidden: () => this.dataType !== 'calendar'
-        },
-        {
-            id: 'end',
-            title: 'End',
-            valueGetter: t => this.getDateString(t.end),
-            showInGrid: true,
-            showInTooltip: true,
-            hidden: () => this.dataType !== 'calendar'
-        },
-        {
-            id: 'duration',
-            title: 'Duration',
-            valueGetter: t => this.getDuration(t),
-            showInGrid: true,
-            showInTooltip: true,
-            hidden: () => this.dataType !== 'duration'
-        }
-    ];
-
-    protected ganttWidthCalcul(): void {
-        this.ganttWidth = this.slots.length * this.scaleSelected.px;
-    }
-
-    protected ganttHeightCalcul(): void {
-        const max = Math.max(...this.tasks.map((t) => t.row));
-        this.ganttHeight = (max + 2) * this.rowHeight;
-    }
-
-    protected refreshVisibleColumns(): void {
-        this.visibleGridColumns = this.columns.filter(c =>
-            c.showInGrid &&
-            (!c.hidden || !c.hidden())
-        );
-
-        this.visibleTooltipColumns = this.columns.filter(c =>
-            c.showInTooltip &&
-            (!c.hidden || !c.hidden())
-        );
-    }
-
-    protected getRawTaskX(task: GanttTask): number {
-        return (task.startSlot ?? 0) * this.scaleSelected.px;
-    }
-
-    protected getDateString(date: Date | number | undefined | null): string {
-        if (!date) return '';
-        if (this.dateMode === 'utc') {
-            return (date as Date)
-                .toLocaleString([], {
-                    timeZone: 'UTC',
-                    day: '2-digit',
-                    month: '2-digit',
-                    year: 'numeric',
-                    hour: '2-digit',
-                    minute: '2-digit',
-                    hour12: false,
-                })
-                .replace(',', '');
-        }
-
-        return (date as Date)
-            .toLocaleString([], {
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false,
-            })
-            .replace(',', '');
-    }
-
-    protected getDuration(task: GanttTask | undefined | null): string {
-        if (!task) return '';
-
-        if (typeof task.start !== 'number' || typeof task.end !== 'number') {
-            throw new Error(`Task ${task.id} is not in duration mode`);
-        }
-
-        let total = task.end - task.start;
-        const days = Math.floor(total / 86400);
-        total %= 86400;
-        const hours = Math.floor(total / 3600);
-        total %= 3600;
-        const minutes = Math.floor(total / 60);
-        const seconds = total % 60;
-        let result = '';
-
-        if (days > 0) result += `${days}d `;
-        if (hours > 0 || days > 0) result += `${hours}h `;
-        if (minutes > 0 || hours > 0 || days > 0) result += `${minutes}m `;
-
-        result += `${seconds}s`;
-        return result.trim();
-    }
-
-    protected getTaskWidth(task: GanttTask): number {
-        return ((task.endSlot ?? 0) - (task.startSlot ?? 0)) * this.scaleSelected.px;
-    }
-
-    protected getGridTop(i: number): number {
-        return i * this.rowHeight;
-    }
-
-    protected getTaskX(task: GanttTask): number {
-        const base = (task.startSlot ?? 0) * this.scaleSelected.px;
-        return this.hasNegativeDependencySpace ? this.negativeSlotWidth + base : base;
-    }
-
-    protected getTaskY(task: GanttTask): number {
-        return task.row * this.rowHeight + this.rowHeight / 10;
-    }
-
-    public trackByIndex(index: number): number {
-        return index;
-    }
-
-    // get per arrow the path
-    protected getDependencyPath(fromId: string, toId: string): string {
-        const from = this.tasks.find((t) => t.id === fromId);
-        const to = this.tasks.find((t) => t.id === toId);
-        if (!from || !to) return '';
-        const fromRight = this.getTaskX(from) + this.getTaskWidth(from);
-        const toLeft = this.getTaskX(to);
-        const fromY = this.getTaskY(from) + this.rowHeight / 2 - this.rowHeight / 12;
-        const toY = this.getTaskY(to) + this.rowHeight / 2 - this.rowHeight / 12;
-
-        if (from.row === to.row) {
-            return `
-            M ${fromRight} ${fromY}
-            H ${fromRight + 20}
-            V ${toY}
-            H ${toLeft}`;
-        }
-
-        // consistent U-turn style (even if not strictly needed)
-        const escapeY = toY - this.rowHeight * 0.54;
-        const midX1 = fromRight + 25;
-        const midX2 = toLeft - 25;
-        return `
-            M ${fromRight} ${fromY}
-            H ${midX1}
-            V ${escapeY}
-            H ${midX2}
-            V ${toY}
-            H ${toLeft}`;
-    }
-
-    // size of columns per minutes
-    protected getScaleConfig(scale: any): ScaleConfig {
-        switch (scale) {
-            case '1m':
-                return { secondes: 60, px: 120 };
-            case '10m':
-                return { secondes: 600, px: 120 };
-            case '30m':
-                return { secondes: 1800, px: 120 };
-            case 'hour':
-                return { secondes: 3600, px: 120 };
-            case '6 hours':
-                return { secondes: 21600, px: 120 };
-            case '12 hours':
-                return { secondes: 43200, px: 120 };
-            case 'day':
-                return { secondes: 86400, px: 150 };
-            case 'week':
-                return { secondes: 604800, px: 200 };
-            case 'month':
-                return { secondes: 2592000, px: 350 };
-            case 'year':
-                return { secondes: 31536000, px: 500 };
-            default:
-                return { secondes: 1800, px: 120 };
-        }
-    }
-
-    protected alignOriginByScale(date: Date, defaultScale: GanttScale): Date {
-        const d = new Date(date);
-        switch (defaultScale) {
-            case 'week': {
-                // align monday
-                const d = new Date(date);
-                const day = d.getDay(); // 0 = Sunday, 1 = Monday, ...
-                const diff = day === 0 ? -6 : 1 - day; // move back to Monday
-                d.setDate(d.getDate() + diff);
-                d.setHours(0, 0, 0, 0);
-                return d
-            }
-            case 'month': {
-                d.setDate(1);
-                d.setHours(0, 0, 0, 0);
-                return d;
-            }
-            case 'year': {
-                d.setMonth(0, 1); // Jan 1
-                d.setHours(0, 0, 0, 0);
-                return d;
-            }
-            case 'day': {
-                // shift back by 1 day (buffer slot)
-                d.setDate(d.getDate() - 1);
-                d.setHours(0, 0, 0, 0);
-                return d;
-            }
-            case 'hour': {
-                // shift back by 1 hour
-                d.setHours(d.getHours() - 1);
-                d.setMinutes(0, 0, 0);
-                return d;
-            }
-            case '6 hours': {
-                d.setHours(d.getHours() - 6);
-                d.setMinutes(0, 0, 0);
-                return d;
-            }
-            case '12 hours': {
-                d.setHours(d.getHours() - 12);
-                d.setMinutes(0, 0, 0);
-                return d;
-            }
-            case '30m': {
-                d.setMinutes(d.getMinutes() - 30);
-                d.setSeconds(0, 0);
-                return d;
-            }
-            case '10m': {
-                d.setMinutes(d.getMinutes() - 10);
-                d.setSeconds(0, 0);
-                return d;
-            }
-            case '1m': {
-                d.setMinutes(d.getMinutes() - 1);
-                d.setSeconds(0, 0);
-                return d;
-            }
-            default:
-                return d;
-        }
-    }
-}

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

@@ -1,128 +0,0 @@
-<div class="gantt-root" [style.max-height.px]="layout.rootMaxHeight" [style.min-height.px]="100">
-    <!-- TOOLBAR -->
-    <div class="toolbar" [style.height.px]="buttonsHeight">
-        <div *ngIf="dateMode === 'utc' || dataType === 'duration'">
-            <button class="gantt-button" *ngFor="let s of scales" (click)="setScale(s)" [class.active]="defaultScale === s">
-                {{ s }}
-            </button>
-        </div>
-        <div *ngIf="dateMode !== 'utc' && dataType === 'calendar'">
-            <button class="gantt-button" *ngFor="let s of scalesDate" (click)="setScale(s)"
-                [class.active]="defaultScale === s">
-                {{ s }}
-            </button>
-        </div>
-        <label *ngIf="maxSlotsAlert" style="color: red;">
-            Data is too massive to show Gantt smoothly, try changing the scale
-        </label>
-    </div>
-    <!-- TOOLTIP -->
-    <div class="global-tooltip" [style.display]="tooltipTask ? 'block' : 'none'">
-        <ng-container *ngIf="tooltipTask as task">
-            <div *ngFor="let column of visibleTooltipColumns">
-                <strong>{{ column?.title }}:</strong>
-                {{ column?.valueGetter(task) }}
-            </div>
-        </ng-container>
-    </div>
-    <!-- BUTTONS FOR SCROLL GANTT -->
-    <div *ngIf="!maxSlotsAlert && loading === false" class="floating-nav">
-        <button class="nav-btn left" (mousedown)="startScroll('left')"
-            (mouseup)="stopScroll()" (mouseleave)="stopScroll()" #leftBtn >
-            ‹
-        </button>
-        <button class="nav-btn right" (mousedown)="startScroll('right')"
-            (mouseup)="stopScroll()" (mouseleave)="stopScroll()" #rightBtn>
-            ›
-        </button>
-    </div>
-    <!-- LOADING -->
-    <div class="loading-overlay" *ngIf="loading" [style.top]="'50%'">
-        <div class="spinner"></div>
-    </div>
-    <!-- SINGLE VERTICAL SCROLL -->
-    <div class="gantt-body" #ganttBodyScroll>
-        <!-- LEFT PANEL -->
-        <div class="left-panel" #leftPanel>
-            <div class="task-row header" [style.height.px]="headerHeight">
-                <div class="cell" *ngFor="let column of visibleGridColumns" [style.width.px]="column.width || 120">
-                    {{ column?.title }}
-                </div>
-            </div>
-            <div class="task-row" *ngFor="let task of tasks" [style.height.px]="rowHeight"
-                (click)="selectTask(task, true); $event.stopPropagation()"
-                [class.highlighted-row]="selectedTaskId === task.id">
-                <div class="cell" *ngFor="let column of visibleGridColumns" [style.width.px]="column.width || 120">
-                    {{ column?.valueGetter(task) }}
-                </div>
-            </div>
-        </div>
-        <!-- RESIZER -->
-        <div class="resizer" [style.height.px]="layout.resizerHeight" (mousedown)="startResize($event)">
-        </div>
-        <!-- RIGHT PANEL -->
-        <div class="right-panel" *ngIf="!maxSlotsAlert">
-            <!-- TIMELINE -->
-            <div class="timeline-header" #timelineHeader>
-                <div class="timeline-slot" *ngFor="let slot of slots" [style.width.px]="slot.width">
-                    {{ slot.label }}
-                </div>
-            </div>
-            <!-- HORIZONTAL SCROLL ONLY -->
-            <div class="horizontal-scroll" (scroll)="onHorizontalScroll($event)" #ganttScroll>
-                <div class="gantt-content" #ganttContent>
-                    <!-- GRID -->
-                    <div class="grid-layer">
-                        <div *ngFor="let slot of slots; let i = index; trackBy: trackByIndex" class="grid-line"
-                            [style.left.px]="slot.x - 1">
-                        </div>
-                        <!-- final vertical line -->
-                        <div class="grid-line" [style.left.px]="ganttWidth - 1">
-                        </div>
-                        <!-- horizontal lines -->
-                        <div class="horizontal-grid-layer">
-                            <div *ngFor="let task of tasks; let i = index; trackBy: trackByIndex"
-                                class="horizontal-line" [style.top.px]="getGridTop(i)">
-                            </div>
-                            <!-- final horizontal line -->
-                            <div class="horizontal-line" [style.top.px]="ganttHeight">
-                            </div>
-                        </div>
-                    </div>
-                    <!-- TASKS -->
-                    <div class="tasks-layer">
-                        <div *ngFor="let task of viewTasks; let i = index; trackBy: trackByIndex" class="task"
-                            (mouseenter)="showTooltip($event, task)" (mouseleave)="hideTooltip()"
-                            (click)="selectTask(task, false); $event.stopPropagation()"
-                            [class.highlighted-task]="selectedTaskId === task.id" [style.left.px]="task.x"
-                            [style.top.px]="task.y" [style.width.px]="task.width" [style.height.px]="task.height">
-                            <div class="task-label">
-                                {{ task.label }}
-                            </div>
-                        </div>
-                    </div>
-                    <!-- DEPENDENCIES -->
-                    <svg class="dependencies-svg">
-                        <defs>
-                            <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6"
-                                orient="auto">
-                                <path d="M 0 0 L 10 5 L 0 10 z" fill="#868d97" />
-                            </marker>
-                        </defs>
-                        <g class="dependencies-normal">
-                            <path *ngFor="let dep of dependencyPaths" [attr.d]="dep.path" class="dependency"
-                                [class.hidden]="hoveredDependencyIds.has(dep.id)" marker-end="url(#arrow)">
-                            </path>
-                        </g>
-                        <g class="dependencies-highlighted">
-                            <path *ngFor="let dep of dependencyPaths" [attr.d]="dep.path" class="highlighted-dependency"
-                                [class.hidden]="!hoveredDependencyIds.has(dep.id)" marker-end="url(#arrow)">
-                            </path>
-                        </g>
-                    </svg>
-                </div>
-            </div>
-        </div>
-        <div class="right-panel-dead" *ngIf="maxSlotsAlert"></div>
-    </div>
-</div>