gantt-canvas-chart 1.0.2 → 1.1.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.2
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -95,6 +95,8 @@ class GanttChart {
   mainCtx;
   timelineStart;
   timelineEnd;
+  minDate;
+  // private maxDate: Date | null;
   pixelsPerDay;
   scrollLeft;
   scrollTop;
@@ -163,6 +165,7 @@ class GanttChart {
     this.mainCtx = this.mainCanvas.getContext("2d");
     this.timelineStart = /* @__PURE__ */ new Date();
     this.timelineEnd = /* @__PURE__ */ new Date();
+    this.minDate = null;
     this.pixelsPerDay = 40;
     this.scrollLeft = 0;
     this.scrollTop = 0;
@@ -178,6 +181,7 @@ class GanttChart {
     this.boundHandleMouseMove = this.handleMouseMove.bind(this);
     this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
+    this.scrollToStartDate = this.scrollToStartDate.bind(this);
     this.init();
   }
   init() {
@@ -218,12 +222,16 @@ class GanttChart {
     this.updateDimensions();
     this.render();
   }
-  setData(newData) {
+  setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
-    this.calculateFullTimeline();
-    this.updateDimensions();
-    this.render();
+    if (newConfig) {
+      this.updateConfig(newConfig);
+    } else {
+      this.calculateFullTimeline();
+      this.updateDimensions();
+      this.render();
+    }
   }
   destroy() {
     if (this.resizeObserver) {
@@ -254,6 +262,7 @@ class GanttChart {
         }
       });
     }
+    this.minDate = minDate;
     minDate = DateUtils.addDays(minDate, -7);
     maxDate = DateUtils.addDays(maxDate, 14);
     switch (this.config.viewMode) {
@@ -289,8 +298,8 @@ class GanttChart {
     this.viewportWidth = this.container.clientWidth;
     this.viewportHeight = this.container.clientHeight;
     this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-    this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-    this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+    this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+    this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
     this.updateDimensions();
     this.render();
   }
@@ -328,6 +337,7 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    return ctx;
   }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
@@ -450,16 +460,16 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = 'bold 14px -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 = "#000412";
-      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
-      ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+      ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
       ctx.moveTo(x, h * 0.5);
       ctx.lineTo(x, h);
@@ -693,7 +703,7 @@ class GanttChart {
       const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
       pos.x_actual_start += aWidth * offsetX_actual;
       pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-      ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
@@ -708,16 +718,16 @@ class GanttChart {
     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);
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
     }
   }
   getTaskStyles(task) {
@@ -811,6 +821,18 @@ class GanttChart {
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
     return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
   }
+  /**
+   * scroll to specified date position, default to minDate
+   *
+   * @param date
+   */
+  scrollToStartDate(date) {
+    const startDate = date ? date : this.minDate;
+    if (startDate) {
+      const xPosition = this.dateToX(startDate);
+      this.container.scrollTo({ left: xPosition - 80 });
+    }
+  }
 }
 exports.DateUtils = DateUtils;
 exports.GanttChart = GanttChart;

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.2
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

package/dist/{main.d.ts → index.d.ts}

@@ -33,6 +33,7 @@ export declare class GanttChart {
     private mainCtx;
     private timelineStart;
     private timelineEnd;
+    private minDate;
     private pixelsPerDay;
     private scrollLeft;
     private scrollTop;
@@ -54,7 +55,7 @@ export declare class GanttChart {
     private buildTaskMap;
     private setupEvents;
     updateConfig(newConfig: GanttConfig): void;
-    setData(newData: GanttData): void;
+    setData(newData: GanttData, newConfig?: GanttConfig): void;
     destroy(): void;
     private calculateFullTimeline;
     private updatePixelsPerDay;
@@ -88,6 +89,12 @@ export declare class GanttChart {
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
+    /**
+     * scroll to specified date position, default to minDate
+     *
+     * @param date
+     */
+    scrollToStartDate(date?: Date): void;
 }
 
 declare interface GanttConfig {

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.2
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -93,6 +93,8 @@ class GanttChart {
   mainCtx;
   timelineStart;
   timelineEnd;
+  minDate;
+  // private maxDate: Date | null;
   pixelsPerDay;
   scrollLeft;
   scrollTop;
@@ -161,6 +163,7 @@ class GanttChart {
     this.mainCtx = this.mainCanvas.getContext("2d");
     this.timelineStart = /* @__PURE__ */ new Date();
     this.timelineEnd = /* @__PURE__ */ new Date();
+    this.minDate = null;
     this.pixelsPerDay = 40;
     this.scrollLeft = 0;
     this.scrollTop = 0;
@@ -176,6 +179,7 @@ class GanttChart {
     this.boundHandleMouseMove = this.handleMouseMove.bind(this);
     this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
     this.boundHandleScroll = this.handleScroll.bind(this);
+    this.scrollToStartDate = this.scrollToStartDate.bind(this);
     this.init();
   }
   init() {
@@ -216,12 +220,16 @@ class GanttChart {
     this.updateDimensions();
     this.render();
   }
-  setData(newData) {
+  setData(newData, newConfig) {
     this.data = newData;
     this.buildTaskMap();
-    this.calculateFullTimeline();
-    this.updateDimensions();
-    this.render();
+    if (newConfig) {
+      this.updateConfig(newConfig);
+    } else {
+      this.calculateFullTimeline();
+      this.updateDimensions();
+      this.render();
+    }
   }
   destroy() {
     if (this.resizeObserver) {
@@ -252,6 +260,7 @@ class GanttChart {
         }
       });
     }
+    this.minDate = minDate;
     minDate = DateUtils.addDays(minDate, -7);
     maxDate = DateUtils.addDays(maxDate, 14);
     switch (this.config.viewMode) {
@@ -287,8 +296,8 @@ class GanttChart {
     this.viewportWidth = this.container.clientWidth;
     this.viewportHeight = this.container.clientHeight;
     this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-    this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-    this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+    this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+    this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
     this.updateDimensions();
     this.render();
   }
@@ -326,6 +335,7 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    return ctx;
   }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
@@ -448,16 +458,16 @@ class GanttChart {
       const unitWidth = this.dateToX(nextDate) - x;
       if (upperText !== lastUpperText) {
         ctx.fillStyle = "#333";
-        ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = 'bold 14px -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 = "#000412";
-      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
-      ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+      ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
       ctx.moveTo(x, h * 0.5);
       ctx.lineTo(x, h);
@@ -691,7 +701,7 @@ class GanttChart {
       const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
       pos.x_actual_start += aWidth * offsetX_actual;
       pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-      ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+      ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
     }
     if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
       ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
@@ -706,16 +716,16 @@ class GanttChart {
     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);
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
     }
   }
   getTaskStyles(task) {
@@ -809,6 +819,18 @@ class GanttChart {
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
     return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
   }
+  /**
+   * scroll to specified date position, default to minDate
+   *
+   * @param date
+   */
+  scrollToStartDate(date) {
+    const startDate = date ? date : this.minDate;
+    if (startDate) {
+      const xPosition = this.dateToX(startDate);
+      this.container.scrollTo({ left: xPosition - 80 });
+    }
+  }
 }
 export {
   DateUtils,

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.0.2
+ * gantt-canvas-chart v1.1.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -97,6 +97,8 @@
     mainCtx;
     timelineStart;
     timelineEnd;
+    minDate;
+    // private maxDate: Date | null;
     pixelsPerDay;
     scrollLeft;
     scrollTop;
@@ -165,6 +167,7 @@
       this.mainCtx = this.mainCanvas.getContext("2d");
       this.timelineStart = /* @__PURE__ */ new Date();
       this.timelineEnd = /* @__PURE__ */ new Date();
+      this.minDate = null;
       this.pixelsPerDay = 40;
       this.scrollLeft = 0;
       this.scrollTop = 0;
@@ -180,6 +183,7 @@
       this.boundHandleMouseMove = this.handleMouseMove.bind(this);
       this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
       this.boundHandleScroll = this.handleScroll.bind(this);
+      this.scrollToStartDate = this.scrollToStartDate.bind(this);
       this.init();
     }
     init() {
@@ -220,12 +224,16 @@
       this.updateDimensions();
       this.render();
     }
-    setData(newData) {
+    setData(newData, newConfig) {
       this.data = newData;
       this.buildTaskMap();
-      this.calculateFullTimeline();
-      this.updateDimensions();
-      this.render();
+      if (newConfig) {
+        this.updateConfig(newConfig);
+      } else {
+        this.calculateFullTimeline();
+        this.updateDimensions();
+        this.render();
+      }
     }
     destroy() {
       if (this.resizeObserver) {
@@ -256,6 +264,7 @@
           }
         });
       }
+      this.minDate = minDate;
       minDate = DateUtils.addDays(minDate, -7);
       maxDate = DateUtils.addDays(maxDate, 14);
       switch (this.config.viewMode) {
@@ -291,8 +300,8 @@
       this.viewportWidth = this.container.clientWidth;
       this.viewportHeight = this.container.clientHeight;
       this.mainCanvas.style.top = `${this.config.headerHeight}px`;
-      this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
-      this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+      this.headerCtx = this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+      this.mainCtx = this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
       this.updateDimensions();
       this.render();
     }
@@ -330,6 +339,7 @@
       canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      return ctx;
     }
     calculateAllTaskPositions() {
       this.taskPositions.clear();
@@ -452,16 +462,16 @@
         const unitWidth = this.dateToX(nextDate) - x;
         if (upperText !== lastUpperText) {
           ctx.fillStyle = "#333";
-          ctx.font = 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+          ctx.font = 'bold 14px -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 = "#000412";
-        ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
         ctx.textAlign = "center";
-        ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+        ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
         ctx.moveTo(x, h * 0.5);
         ctx.lineTo(x, h);
@@ -695,7 +705,7 @@
         const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
         pos.x_actual_start += aWidth * offsetX_actual;
         pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-        ctx.fillRect(pos.x_actual_start, taskY, aWidth * percent_actual, taskHeight);
+        ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
       }
       if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
         ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
@@ -710,16 +720,16 @@
       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);
+        ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8), Math.round(textY));
       }
       if (this.config.showRightRemark && task.rightRemark) {
         ctx.textAlign = "left";
-        ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+        ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
       }
       if (this.config.showCenterRemark && task.centerRemark) {
         const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
         ctx.textAlign = "center";
-        ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
       }
     }
     getTaskStyles(task) {
@@ -813,6 +823,18 @@
     static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {
       return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
     }
+    /**
+     * scroll to specified date position, default to minDate
+     *
+     * @param date
+     */
+    scrollToStartDate(date) {
+      const startDate = date ? date : this.minDate;
+      if (startDate) {
+        const xPosition = this.dateToX(startDate);
+        this.container.scrollTo({ left: xPosition - 80 });
+      }
+    }
   }
   exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;

package/package.json

@@ -1,16 +1,23 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
-  "types": "dist/main.d.ts",
+  "types": "dist/index.d.ts",
   "unpkg": "dist/index.umd.js",
   "jsdelivr": "dist/index.umd.js",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
-      "types": "./dist/types/main.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.cjs"
     },