gantt-canvas-chart 1.0.1-alpha.0 → 1.0.2

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1-alpha.0
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -147,8 +147,8 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-      planBorderColor: "#caeed2",
-      actualBgColor: "#78c78f",
+      planBorderColor: "#C1EFCF",
+      actualBgColor: "#5AC989",
       ...config
     };
     this.headerCanvas = headerCanvas;
@@ -383,6 +383,7 @@ class GanttChart {
     ctx.fillStyle = "#f9f9f9";
     ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
+    ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
     currentDate = this.getIterationStartDate(currentDate);
     let lastUpperText = "";
@@ -449,13 +450,14 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.textRendering = "optimizeLegibility";
         ctx.textAlign = "left";
         ctx.fillText(upperText, x + 5, h * 0.35);
         lastUpperText = upperText;
       }
-      ctx.fillStyle = "#666";
-      ctx.font = "12px sans-serif";
+      ctx.fillStyle = "#000412";
+      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
       ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
       ctx.beginPath();
@@ -569,7 +571,9 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = "12px Arial";
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.textRendering = "optimizeSpeed";
+    ctx.imageSmoothingEnabled = false;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
@@ -586,7 +590,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -701,7 +705,7 @@ class GanttChart {
       ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
-    ctx.fillStyle = "#333";
+    ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
       ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
@@ -810,3 +814,4 @@ class GanttChart {
 }
 exports.DateUtils = DateUtils;
 exports.GanttChart = GanttChart;
+exports.firstValidValue = firstValidValue;

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1-alpha.0
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -10,6 +10,7 @@
   overflow: hidden;
   position: relative;
   background: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .__gantt-chart-container {
@@ -18,6 +19,7 @@
   position: relative;
   background: #ffffff;
   height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 .__gantt-scroll-dummy {
@@ -37,6 +39,7 @@
   z-index: 10;
   background: #f8fafc;
   border-bottom: 1px solid #e2e8f0;
+  text-rendering: optimizeSpeed;
 }
 
 .__gantt-main-canvas {
@@ -44,6 +47,26 @@
   top: 56px; /* Corresponds to header height */
   left: 0;
   z-index: 1;
+  text-rendering: optimizeSpeed;
+}
+
+/* Add to your CSS file or create a stylesheet */
+.__gantt-chart-container {
+  transform: translateZ(0); /* Force hardware acceleration */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.__gantt-header-canvas,
+.__gantt-main-canvas {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  shape-rendering: crispEdges;
+  /* Add font rendering optimizations */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeSpeed;
 }
 
 /* Tooltip */

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1-alpha.0
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -145,8 +145,8 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-      planBorderColor: "#caeed2",
-      actualBgColor: "#78c78f",
+      planBorderColor: "#C1EFCF",
+      actualBgColor: "#5AC989",
       ...config
     };
     this.headerCanvas = headerCanvas;
@@ -381,6 +381,7 @@ class GanttChart {
     ctx.fillStyle = "#f9f9f9";
     ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
+    ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
     currentDate = this.getIterationStartDate(currentDate);
     let lastUpperText = "";
@@ -447,13 +448,14 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = "bold 13px sans-serif";
+        ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.textRendering = "optimizeLegibility";
         ctx.textAlign = "left";
         ctx.fillText(upperText, x + 5, h * 0.35);
         lastUpperText = upperText;
       }
-      ctx.fillStyle = "#666";
-      ctx.font = "12px sans-serif";
+      ctx.fillStyle = "#000412";
+      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
       ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
       ctx.beginPath();
@@ -567,7 +569,9 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = "12px Arial";
+    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.textRendering = "optimizeSpeed";
+    ctx.imageSmoothingEnabled = false;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
       const y = i * this.config.rowHeight;
@@ -584,7 +588,7 @@ class GanttChart {
     }
   }
   drawGrid(ctx, startDate, endDate) {
-    ctx.strokeStyle = "#f0f0f0";
+    ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
@@ -699,7 +703,7 @@ class GanttChart {
       ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
       ctx.stroke();
     }
-    ctx.fillStyle = "#333";
+    ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
       ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
@@ -808,5 +812,6 @@ class GanttChart {
 }
 export {
   DateUtils,
-  GanttChart
+  GanttChart,
+  firstValidValue
 };

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.1-alpha.0
+ * gantt-canvas-chart v1.0.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -149,8 +149,8 @@
         offsetTop: 0,
         offsetLeft: 0,
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
-        planBorderColor: "#caeed2",
-        actualBgColor: "#78c78f",
+        planBorderColor: "#C1EFCF",
+        actualBgColor: "#5AC989",
         ...config
       };
       this.headerCanvas = headerCanvas;
@@ -385,6 +385,7 @@
       ctx.fillStyle = "#f9f9f9";
       ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
       ctx.textBaseline = "middle";
+      ctx.textRendering = "optimizeLegibility";
       let currentDate = new Date(this.visibleDateRange.start);
       currentDate = this.getIterationStartDate(currentDate);
       let lastUpperText = "";
@@ -451,13 +452,14 @@
         const unitWidth = this.dateToX(nextDate) - x;
         if (upperText !== lastUpperText) {
           ctx.fillStyle = "#333";
-          ctx.font = "bold 13px sans-serif";
+          ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+          ctx.textRendering = "optimizeLegibility";
           ctx.textAlign = "left";
           ctx.fillText(upperText, x + 5, h * 0.35);
           lastUpperText = upperText;
         }
-        ctx.fillStyle = "#666";
-        ctx.font = "12px sans-serif";
+        ctx.fillStyle = "#000412";
+        ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
         ctx.textAlign = "center";
         ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
         ctx.beginPath();
@@ -571,7 +573,9 @@
     }
     drawAllTasks(ctx) {
       ctx.textBaseline = "middle";
-      ctx.font = "12px Arial";
+      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.textRendering = "optimizeSpeed";
+      ctx.imageSmoothingEnabled = false;
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
         const y = i * this.config.rowHeight;
@@ -588,7 +592,7 @@
       }
     }
     drawGrid(ctx, startDate, endDate) {
-      ctx.strokeStyle = "#f0f0f0";
+      ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
       if (this.config.showRowLines) {
@@ -703,7 +707,7 @@
         ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
         ctx.stroke();
       }
-      ctx.fillStyle = "#333";
+      ctx.fillStyle = "#000";
       if (this.config.showLeftRemark && task.leftRemark) {
         ctx.textAlign = "right";
         ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
@@ -812,5 +816,6 @@
   }
   exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;
+  exports2.firstValidValue = firstValidValue;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));

package/dist/main.d.ts

@@ -1,4 +1,148 @@
-import { GanttChart } from './core/ganttChart';
-import { DateUtils } from './core/dateUtils';
-
-export { GanttChart, DateUtils };
+export declare class DateUtils {
+    static readonly ONE_DAY_MS: number;
+    static format(date: Date, format?: string): string;
+    static addDays(date: Date, days: number): Date;
+    static addMonths(date: Date, months: number): Date;
+    static addYears(date: Date, years: number): Date;
+    static diffDays(date1: Date, date2: Date): number;
+    static diffDaysInclusive(date1: Date, date2: Date): number;
+    static getDaysInMonth(year: number, month: number): number;
+    static getWeekNumber(d: Date): number;
+    static getStartOfWeek(d: Date): Date;
+    static getStartOfMonth(d: Date): Date;
+    static getStartOfYear(d: Date): Date;
+}
+
+/**
+ * 获取第一个有效值
+ * @param args 有效值可选项
+ * @returns
+ */
+export declare function firstValidValue(...args: any[]): any;
+
+export declare class GanttChart {
+    private rootContainer;
+    private container;
+    private data;
+    private config;
+    private headerCanvas;
+    private mainCanvas;
+    private scrollDummy;
+    private tooltip;
+    private headerCtx;
+    private mainCtx;
+    private timelineStart;
+    private timelineEnd;
+    private pixelsPerDay;
+    private scrollLeft;
+    private scrollTop;
+    private visibleDateRange;
+    private today;
+    private devicePixelRatio;
+    private viewportWidth;
+    private viewportHeight;
+    private totalWidth;
+    private totalHeight;
+    private resizeObserver;
+    private taskPositions;
+    private taskMap;
+    private boundHandleMouseMove;
+    private boundHandleMouseLeave;
+    private boundHandleScroll;
+    constructor(rootContainer: HTMLElement, data: GanttData, config?: GanttConfig);
+    private init;
+    private buildTaskMap;
+    private setupEvents;
+    updateConfig(newConfig: GanttConfig): void;
+    setData(newData: GanttData): void;
+    destroy(): void;
+    private calculateFullTimeline;
+    private updatePixelsPerDay;
+    private dateToX;
+    private xToDate;
+    private handleResize;
+    private handleScroll;
+    setScrollTop(scrollTop: number): void;
+    private updateVirtualRanges;
+    private updateDimensions;
+    private setupCanvas;
+    private calculateAllTaskPositions;
+    private getIterationStartDate;
+    render(): void;
+    private renderHeader;
+    private renderMain;
+    private drawArrow;
+    private drawAllDependencies;
+    private drawAllTasks;
+    private drawGrid;
+    private drawToday;
+    private drawTask;
+    private getTaskStyles;
+    private handleMouseMove;
+    private getTaskTooltipHtml;
+    private handleMouseLeave;
+    /**
+     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
+     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
+     * @param pixelsPerDay 每日的像素数
+     * @returns
+     */
+    static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
+}
+
+declare interface GanttConfig {
+    viewMode?: 'Day' | 'Week' | 'Month' | 'Year';
+    planBorderColor?: string;
+    actualBgColor?: string;
+    rowHeight?: number;
+    headerHeight?: number;
+    showPlan?: boolean;
+    showActual?: boolean;
+    showRowLines?: boolean;
+    showColLines?: boolean;
+    showLeftRemark?: boolean;
+    showRightRemark?: boolean;
+    showCenterRemark?: boolean;
+    showTooltip?: boolean;
+    tooltipColor?: 'black' | 'white';
+    todayColor?: string;
+    offsetTop?: number;
+    offsetLeft?: number;
+    viewFactors?: {
+        Day: number;
+        Week: number;
+        Month: number;
+        Year: number;
+    };
+    tooltipFormat?: null | ((task: Row, date: Date, config: GanttConfig) => string);
+}
+
+declare type GanttData = Row[];
+
+declare interface Row {
+    id: string;
+    name: string;
+    tasks: Task[];
+}
+
+declare interface Task {
+    id: string;
+    name: string;
+    type?: 'task' | 'leave';
+    planStart?: string;
+    planEnd?: string;
+    actualStart?: string;
+    actualEnd?: string;
+    dependencies?: string[];
+    leftRemark?: string;
+    rightRemark?: string;
+    centerRemark?: string;
+    styleClass?: string;
+    planBorderColor?: string;
+    actualBgColor?: string;
+    _data?: any;
+    planOffsetPercent?: [number, number];
+    actualOffsetPercent?: [number, number];
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.0.1-alpha.0",
+  "version": "1.0.2",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",
@@ -10,10 +10,11 @@
   "jsdelivr": "dist/index.umd.js",
   "exports": {
     ".": {
+      "types": "./dist/types/main.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.cjs"
     },
-    "./styles": "./dist/index.css"
+    "./style.css": "./dist/index.css"
   },
   "files": [
     "dist"
@@ -38,9 +39,9 @@
   },
   "devDependencies": {
     "@types/node": "^24.10.1",
-    "typescript": "^5.0.0",
+    "typescript": "~5.8.0",
     "vite": "^7.2.2",
     "vite-plugin-banner": "^0.8.1",
-    "vite-plugin-dts": "^3.0.0"
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/core/dateUtils.d.ts

@@ -1,14 +0,0 @@
-export declare class DateUtils {
-    static readonly ONE_DAY_MS: number;
-    static format(date: Date, format?: string): string;
-    static addDays(date: Date, days: number): Date;
-    static addMonths(date: Date, months: number): Date;
-    static addYears(date: Date, years: number): Date;
-    static diffDays(date1: Date, date2: Date): number;
-    static diffDaysInclusive(date1: Date, date2: Date): number;
-    static getDaysInMonth(year: number, month: number): number;
-    static getWeekNumber(d: Date): number;
-    static getStartOfWeek(d: Date): Date;
-    static getStartOfMonth(d: Date): Date;
-    static getStartOfYear(d: Date): Date;
-}

package/dist/core/ganttChart.d.ts

@@ -1,71 +0,0 @@
-import { GanttData, GanttConfig } from './types';
-
-export declare class GanttChart {
-    private rootContainer;
-    private container;
-    private data;
-    private config;
-    private headerCanvas;
-    private mainCanvas;
-    private scrollDummy;
-    private tooltip;
-    private headerCtx;
-    private mainCtx;
-    private timelineStart;
-    private timelineEnd;
-    private pixelsPerDay;
-    private scrollLeft;
-    private scrollTop;
-    private visibleDateRange;
-    private today;
-    private devicePixelRatio;
-    private viewportWidth;
-    private viewportHeight;
-    private totalWidth;
-    private totalHeight;
-    private resizeObserver;
-    private taskPositions;
-    private taskMap;
-    private boundHandleMouseMove;
-    private boundHandleMouseLeave;
-    private boundHandleScroll;
-    constructor(rootContainer: HTMLElement, data: GanttData, config?: GanttConfig);
-    private init;
-    private buildTaskMap;
-    private setupEvents;
-    updateConfig(newConfig: GanttConfig): void;
-    setData(newData: GanttData): void;
-    destroy(): void;
-    private calculateFullTimeline;
-    private updatePixelsPerDay;
-    private dateToX;
-    private xToDate;
-    private handleResize;
-    private handleScroll;
-    setScrollTop(scrollTop: number): void;
-    private updateVirtualRanges;
-    private updateDimensions;
-    private setupCanvas;
-    private calculateAllTaskPositions;
-    private getIterationStartDate;
-    render(): void;
-    private renderHeader;
-    private renderMain;
-    private drawArrow;
-    private drawAllDependencies;
-    private drawAllTasks;
-    private drawGrid;
-    private drawToday;
-    private drawTask;
-    private getTaskStyles;
-    private handleMouseMove;
-    private getTaskTooltipHtml;
-    private handleMouseLeave;
-    /**
-     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-     * @param pixelsPerDay 每日的像素数
-     * @returns
-     */
-    static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
-}

package/dist/core/types.d.ts

@@ -1,63 +0,0 @@
-export interface Task {
-    id: string;
-    name: string;
-    type?: 'task' | 'leave';
-    planStart?: string;
-    planEnd?: string;
-    actualStart?: string;
-    actualEnd?: string;
-    dependencies?: string[];
-    leftRemark?: string;
-    rightRemark?: string;
-    centerRemark?: string;
-    styleClass?: string;
-    planBorderColor?: string;
-    actualBgColor?: string;
-    _data?: any;
-    planOffsetPercent?: [number, number];
-    actualOffsetPercent?: [number, number];
-}
-export interface Row {
-    id: string;
-    name: string;
-    tasks: Task[];
-}
-export type GanttData = Row[];
-export interface GanttConfig {
-    viewMode?: 'Day' | 'Week' | 'Month' | 'Year';
-    planBorderColor?: string;
-    actualBgColor?: string;
-    rowHeight?: number;
-    headerHeight?: number;
-    showPlan?: boolean;
-    showActual?: boolean;
-    showRowLines?: boolean;
-    showColLines?: boolean;
-    showLeftRemark?: boolean;
-    showRightRemark?: boolean;
-    showCenterRemark?: boolean;
-    showTooltip?: boolean;
-    tooltipColor?: 'black' | 'white';
-    todayColor?: string;
-    offsetTop?: number;
-    offsetLeft?: number;
-    viewFactors?: {
-        Day: number;
-        Week: number;
-        Month: number;
-        Year: number;
-    };
-    tooltipFormat?: null | ((task: Row, date: Date, config: GanttConfig) => string);
-}
-export interface TaskPosition {
-    x_plan_start: number;
-    x_plan_end: number;
-    x_actual_start: number | null;
-    x_actual_end: number | null;
-    y: number;
-    row: number;
-}
-export interface VisibleDateRange {
-    start: Date;
-    end: Date;
-}

package/dist/core/utils.d.ts

@@ -1,6 +0,0 @@
-/**
- * 获取第一个有效值
- * @param args 有效值可选项
- * @returns
- */
-export declare function firstValidValue(...args: any[]): any;