gantt-canvas-chart 1.5.2 → 1.5.4

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -155,7 +155,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
-    if (rootContainer.querySelector(".__gantt-chart-container")) {
+    if (!rootContainer) {
+      throw new Error("Root container element is required");
+    } else if (rootContainer.querySelector(".__gantt-chart-container")) {
       throw new Error("GanttChart already exists in this container");
     }
     const container = document.createElement("div");
@@ -195,6 +197,7 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -251,8 +254,18 @@ class GanttChart {
   }
   buildTaskMap() {
     this.taskMap.clear();
-    this.data.forEach((row, rowIndex) => {
-      row.tasks.forEach((task) => this.taskMap.set(task.id, { row: rowIndex, task }));
+    let visibleRowIndex = 0;
+    this.data.forEach((row) => {
+      row.tasks.forEach((task) => {
+        this.taskMap.set(task.id, {
+          row: row.hide ? -1 : visibleRowIndex,
+          // Use -1 for hidden rows
+          task
+        });
+      });
+      if (!row.hide) {
+        visibleRowIndex++;
+      }
     });
   }
   setupEvents() {
@@ -521,10 +534,12 @@ class GanttChart {
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
     };
   }
+  // Update the updateDimensions method to calculate height based on visible rows
   updateDimensions() {
     const totalDays = DateUtils.diffDays(this.timelineStart, this.timelineEnd) + 1;
+    const visibleRowCount = this.data.filter((row) => !row.hide).length;
     const newTotalWidth = totalDays * this.pixelsPerDay;
-    const newTotalHeight = this.data.length * this.config.rowHeight + this.config.headerHeight;
+    const newTotalHeight = visibleRowCount * this.config.rowHeight + this.config.headerHeight;
     if (this.totalWidth !== newTotalWidth || this.totalHeight !== newTotalHeight) {
       this.totalWidth = newTotalWidth;
       this.totalHeight = newTotalHeight;
@@ -539,16 +554,26 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
-    for (let i = 0; i < this.data.length; i++) {
+    let visibleRowIndex = 0;
+    for (let i = 0, len = this.data.length; i < len; i++) {
       const row = this.data[i];
       if (row.hide) {
         continue;
       }
-      const y = i * this.config.rowHeight;
+      const y = visibleRowIndex * this.config.rowHeight;
       row.tasks.forEach((task) => {
         if (task.hide) {
           return;
@@ -592,9 +617,11 @@ class GanttChart {
           x_plan_width,
           x_actual_width,
           y: y + this.config.rowHeight * 0.5,
-          row: i
+          row: visibleRowIndex
+          // Use visible row index instead of original index
         });
       });
+      visibleRowIndex++;
     }
   }
   getIterationStartDate(date) {
@@ -623,9 +650,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -703,20 +730,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -751,7 +778,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -765,11 +792,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -792,7 +814,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -881,13 +903,20 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
+    let visibleRowIndex = 0;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
-      const y = i * this.config.rowHeight;
-      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
+      if (row.hide) {
+        continue;
+      }
+      const y = visibleRowIndex * this.config.rowHeight;
+      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) {
+        visibleRowIndex++;
+        continue;
+      }
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
         if (!pos) return;
@@ -896,18 +925,27 @@ class GanttChart {
         if (!isPlanVisible && !isActualVisible) return;
         this.drawTask(ctx, task, y, pos);
       });
+      visibleRowIndex++;
     }
   }
+  // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
-      for (let i = 0; i <= this.data.length; i++) {
+      let visibleRowCount = 0;
+      for (let i = 0; i < this.data.length; i++) {
+        if (!this.data[i].hide) {
+          visibleRowCount++;
+        }
+      }
+      for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -948,7 +986,7 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
         switch (this.config.viewMode) {
@@ -997,14 +1035,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), 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;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
@@ -1048,10 +1086,21 @@ class GanttChart {
     const mouseY = e.clientY - rect.top;
     const chartX = mouseX + this.scrollLeft;
     const chartY = mouseY + this.scrollTop;
-    const rowIndex = Math.floor(chartY / this.config.rowHeight);
+    const visibleRowIndex = Math.floor(chartY / this.config.rowHeight);
+    let actualRowIndex = -1;
+    let visibleRowCount = 0;
+    for (let i = 0; i < this.data.length; i++) {
+      if (!this.data[i].hide) {
+        if (visibleRowCount === visibleRowIndex) {
+          actualRowIndex = i;
+          break;
+        }
+        visibleRowCount++;
+      }
+    }
     const date = this.xToDate(chartX);
-    if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
-    const row = this.data[rowIndex];
+    if (actualRowIndex < 0 || actualRowIndex >= this.data.length) return this.handleMouseLeave();
+    const row = this.data[actualRowIndex];
     if (this.config.tooltipFormat) {
       const htmlStr = this.config.tooltipFormat(row, date, this.config);
       if (!htmlStr) {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -10,7 +10,8 @@
   overflow: hidden;
   position: relative;
   background: white;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-chart-container {
@@ -19,7 +20,8 @@
   position: relative;
   background: #ffffff;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: Roboto, PingFang SC, Noto Sans SC, Microsoft YaHei UI, Microsoft YaHei, Segoe UI, Helvetica Neue,
+    Helvetica, Arial, sans-serif;
 }
 
 .__gantt-scroll-dummy {

package/dist/index.d.ts

@@ -118,6 +118,11 @@ export declare class GanttChart {
     private updateVirtualRanges;
     private updateDimensions;
     private setupCanvas;
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val: number): number;
     private calculateAllTaskPositions;
     private getIterationStartDate;
     render(scrolling?: boolean): void;
@@ -178,6 +183,7 @@ export declare interface GanttConfig {
     offsetTop?: number;
     offsetLeft?: number;
     scrollEdgeThresholds?: number;
+    xGap?: number;
     enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
     viewFactors?: {
         Day: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -153,7 +153,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
-    if (rootContainer.querySelector(".__gantt-chart-container")) {
+    if (!rootContainer) {
+      throw new Error("Root container element is required");
+    } else if (rootContainer.querySelector(".__gantt-chart-container")) {
       throw new Error("GanttChart already exists in this container");
     }
     const container = document.createElement("div");
@@ -193,6 +195,7 @@ class GanttChart {
       offsetTop: 0,
       offsetLeft: 0,
       scrollEdgeThresholds: 10,
+      xGap: 0,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -249,8 +252,18 @@ class GanttChart {
   }
   buildTaskMap() {
     this.taskMap.clear();
-    this.data.forEach((row, rowIndex) => {
-      row.tasks.forEach((task) => this.taskMap.set(task.id, { row: rowIndex, task }));
+    let visibleRowIndex = 0;
+    this.data.forEach((row) => {
+      row.tasks.forEach((task) => {
+        this.taskMap.set(task.id, {
+          row: row.hide ? -1 : visibleRowIndex,
+          // Use -1 for hidden rows
+          task
+        });
+      });
+      if (!row.hide) {
+        visibleRowIndex++;
+      }
     });
   }
   setupEvents() {
@@ -519,10 +532,12 @@ class GanttChart {
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
     };
   }
+  // Update the updateDimensions method to calculate height based on visible rows
   updateDimensions() {
     const totalDays = DateUtils.diffDays(this.timelineStart, this.timelineEnd) + 1;
+    const visibleRowCount = this.data.filter((row) => !row.hide).length;
     const newTotalWidth = totalDays * this.pixelsPerDay;
-    const newTotalHeight = this.data.length * this.config.rowHeight + this.config.headerHeight;
+    const newTotalHeight = visibleRowCount * this.config.rowHeight + this.config.headerHeight;
     if (this.totalWidth !== newTotalWidth || this.totalHeight !== newTotalHeight) {
       this.totalWidth = newTotalWidth;
       this.totalHeight = newTotalHeight;
@@ -537,16 +552,26 @@ class GanttChart {
     canvas.style.height = `${height}px`;
     const ctx = canvas.getContext("2d");
     ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+    ctx.textBaseline = "middle";
+    ctx.imageSmoothingEnabled = false;
     return ctx;
   }
+  /**
+   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+   */
+  snap(val) {
+    return Math.floor(val) + 0.5;
+  }
   calculateAllTaskPositions() {
     this.taskPositions.clear();
-    for (let i = 0; i < this.data.length; i++) {
+    let visibleRowIndex = 0;
+    for (let i = 0, len = this.data.length; i < len; i++) {
       const row = this.data[i];
       if (row.hide) {
         continue;
       }
-      const y = i * this.config.rowHeight;
+      const y = visibleRowIndex * this.config.rowHeight;
       row.tasks.forEach((task) => {
         if (task.hide) {
           return;
@@ -590,9 +615,11 @@ class GanttChart {
           x_plan_width,
           x_actual_width,
           y: y + this.config.rowHeight * 0.5,
-          row: i
+          row: visibleRowIndex
+          // Use visible row index instead of original index
         });
       });
+      visibleRowIndex++;
     }
   }
   getIterationStartDate(date) {
@@ -621,9 +648,9 @@ class GanttChart {
     const h = this.config.headerHeight;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, 0);
+    ctx.translate(-Math.round(this.scrollLeft), 0);
     ctx.fillStyle = this.config.headerBgColor;
-    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
@@ -701,20 +728,20 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
       const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
       if (visibleEnd > visibleStart) {
         ctx.fillStyle = this.config.headerBgColor;
-        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDateForLower);
+      const x = this.snap(this.dateToX(currentDateForLower));
       let lowerText = "";
       let nextDate;
       switch (this.config.viewMode) {
@@ -749,7 +776,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -763,11 +790,6 @@ class GanttChart {
         currentDateForLower = nextDate;
       }
     }
-    ctx.beginPath();
-    ctx.moveTo(this.scrollLeft, h - 0.5);
-    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
     ctx.restore();
   }
   // Helper method to group consecutive blocks with same text
@@ -790,7 +812,7 @@ class GanttChart {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
-    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
     const { start: startDate, end: endDate } = this.visibleDateRange;
     this.drawGrid(ctx, startDate, endDate);
     this.drawToday(ctx);
@@ -879,13 +901,20 @@ class GanttChart {
   }
   drawAllTasks(ctx) {
     ctx.textBaseline = "middle";
-    ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textRendering = "optimizeSpeed";
     ctx.imageSmoothingEnabled = false;
+    let visibleRowIndex = 0;
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
-      const y = i * this.config.rowHeight;
-      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
+      if (row.hide) {
+        continue;
+      }
+      const y = visibleRowIndex * this.config.rowHeight;
+      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) {
+        visibleRowIndex++;
+        continue;
+      }
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
         if (!pos) return;
@@ -894,18 +923,27 @@ class GanttChart {
         if (!isPlanVisible && !isActualVisible) return;
         this.drawTask(ctx, task, y, pos);
       });
+      visibleRowIndex++;
     }
   }
+  // In the drawGrid method
   drawGrid(ctx, startDate, endDate) {
     ctx.strokeStyle = "#e6e6e6";
     ctx.lineWidth = 1;
     ctx.beginPath();
     if (this.config.showRowLines) {
-      for (let i = 0; i <= this.data.length; i++) {
+      let visibleRowCount = 0;
+      for (let i = 0; i < this.data.length; i++) {
+        if (!this.data[i].hide) {
+          visibleRowCount++;
+        }
+      }
+      for (let i = 0; i <= visibleRowCount; i++) {
         const y = i * this.config.rowHeight;
         if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-        ctx.moveTo(this.scrollLeft, y);
-        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+        const sharpY = this.snap(y);
+        ctx.moveTo(this.scrollLeft, sharpY);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
       }
     }
     if (this.config.showColLines) {
@@ -946,7 +984,7 @@ class GanttChart {
         currentDate = nextDate;
       }
       while (currentDate <= endDate) {
-        const x = this.dateToX(currentDate);
+        const x = this.snap(this.dateToX(currentDate));
         ctx.moveTo(x, this.scrollTop);
         ctx.lineTo(x, this.scrollTop + this.viewportHeight);
         switch (this.config.viewMode) {
@@ -995,14 +1033,14 @@ class GanttChart {
     const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
     if (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), 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;
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
@@ -1046,10 +1084,21 @@ class GanttChart {
     const mouseY = e.clientY - rect.top;
     const chartX = mouseX + this.scrollLeft;
     const chartY = mouseY + this.scrollTop;
-    const rowIndex = Math.floor(chartY / this.config.rowHeight);
+    const visibleRowIndex = Math.floor(chartY / this.config.rowHeight);
+    let actualRowIndex = -1;
+    let visibleRowCount = 0;
+    for (let i = 0; i < this.data.length; i++) {
+      if (!this.data[i].hide) {
+        if (visibleRowCount === visibleRowIndex) {
+          actualRowIndex = i;
+          break;
+        }
+        visibleRowCount++;
+      }
+    }
     const date = this.xToDate(chartX);
-    if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
-    const row = this.data[rowIndex];
+    if (actualRowIndex < 0 || actualRowIndex >= this.data.length) return this.handleMouseLeave();
+    const row = this.data[actualRowIndex];
     if (this.config.tooltipFormat) {
       const htmlStr = this.config.tooltipFormat(row, date, this.config);
       if (!htmlStr) {

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.4
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -157,7 +157,9 @@
     onDataLoad = null;
     scrollLoadTimer = null;
     constructor(rootContainer, data, config = {}) {
-      if (rootContainer.querySelector(".__gantt-chart-container")) {
+      if (!rootContainer) {
+        throw new Error("Root container element is required");
+      } else if (rootContainer.querySelector(".__gantt-chart-container")) {
         throw new Error("GanttChart already exists in this container");
       }
       const container = document.createElement("div");
@@ -197,6 +199,7 @@
         offsetTop: 0,
         offsetLeft: 0,
         scrollEdgeThresholds: 10,
+        xGap: 0,
         enabledLoadMore: [],
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#C1EFCF",
@@ -253,8 +256,18 @@
     }
     buildTaskMap() {
       this.taskMap.clear();
-      this.data.forEach((row, rowIndex) => {
-        row.tasks.forEach((task) => this.taskMap.set(task.id, { row: rowIndex, task }));
+      let visibleRowIndex = 0;
+      this.data.forEach((row) => {
+        row.tasks.forEach((task) => {
+          this.taskMap.set(task.id, {
+            row: row.hide ? -1 : visibleRowIndex,
+            // Use -1 for hidden rows
+            task
+          });
+        });
+        if (!row.hide) {
+          visibleRowIndex++;
+        }
       });
     }
     setupEvents() {
@@ -523,10 +536,12 @@
         end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
       };
     }
+    // Update the updateDimensions method to calculate height based on visible rows
     updateDimensions() {
       const totalDays = DateUtils.diffDays(this.timelineStart, this.timelineEnd) + 1;
+      const visibleRowCount = this.data.filter((row) => !row.hide).length;
       const newTotalWidth = totalDays * this.pixelsPerDay;
-      const newTotalHeight = this.data.length * this.config.rowHeight + this.config.headerHeight;
+      const newTotalHeight = visibleRowCount * this.config.rowHeight + this.config.headerHeight;
       if (this.totalWidth !== newTotalWidth || this.totalHeight !== newTotalHeight) {
         this.totalWidth = newTotalWidth;
         this.totalHeight = newTotalHeight;
@@ -541,16 +556,26 @@
       canvas.style.height = `${height}px`;
       const ctx = canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      ctx.textBaseline = "middle";
+      ctx.imageSmoothingEnabled = false;
       return ctx;
     }
+    /**
+     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
+     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     */
+    snap(val) {
+      return Math.floor(val) + 0.5;
+    }
     calculateAllTaskPositions() {
       this.taskPositions.clear();
-      for (let i = 0; i < this.data.length; i++) {
+      let visibleRowIndex = 0;
+      for (let i = 0, len = this.data.length; i < len; i++) {
         const row = this.data[i];
         if (row.hide) {
           continue;
         }
-        const y = i * this.config.rowHeight;
+        const y = visibleRowIndex * this.config.rowHeight;
         row.tasks.forEach((task) => {
           if (task.hide) {
             return;
@@ -594,9 +619,11 @@
             x_plan_width,
             x_actual_width,
             y: y + this.config.rowHeight * 0.5,
-            row: i
+            row: visibleRowIndex
+            // Use visible row index instead of original index
           });
         });
+        visibleRowIndex++;
       }
     }
     getIterationStartDate(date) {
@@ -625,9 +652,9 @@
       const h = this.config.headerHeight;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, 0);
+      ctx.translate(-Math.round(this.scrollLeft), 0);
       ctx.fillStyle = this.config.headerBgColor;
-      ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+      ctx.fillRect(Math.round(this.scrollLeft), 0, this.viewportWidth, h);
       ctx.textBaseline = "middle";
       ctx.textRendering = "optimizeLegibility";
       let currentDate = new Date(this.visibleDateRange.start);
@@ -705,20 +732,20 @@
       }
       const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
       ctx.fillStyle = "#333";
-      ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "left";
       groupedBlocks.forEach((group) => {
         const visibleStart = Math.max(group.startX, this.scrollLeft);
         const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
         if (visibleEnd > visibleStart) {
           ctx.fillStyle = this.config.headerBgColor;
-          ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+          ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
           ctx.fillStyle = "#333";
-          ctx.fillText(group.text, visibleStart + 5, group.yPos);
+          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
         }
       });
       while (currentDateForLower <= this.visibleDateRange.end) {
-        const x = this.dateToX(currentDateForLower);
+        const x = this.snap(this.dateToX(currentDateForLower));
         let lowerText = "";
         let nextDate;
         switch (this.config.viewMode) {
@@ -753,7 +780,7 @@
         }
         const unitWidth = this.dateToX(nextDate) - x;
         ctx.fillStyle = "#000412";
-        ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+        ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
         ctx.textAlign = "center";
         ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
@@ -767,11 +794,6 @@
           currentDateForLower = nextDate;
         }
       }
-      ctx.beginPath();
-      ctx.moveTo(this.scrollLeft, h - 0.5);
-      ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
-      ctx.strokeStyle = "#e0e0e0";
-      ctx.stroke();
       ctx.restore();
     }
     // Helper method to group consecutive blocks with same text
@@ -794,7 +816,7 @@
       const ctx = this.mainCtx;
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
-      ctx.translate(-this.scrollLeft, -this.scrollTop);
+      ctx.translate(-Math.round(this.scrollLeft), -Math.round(this.scrollTop));
       const { start: startDate, end: endDate } = this.visibleDateRange;
       this.drawGrid(ctx, startDate, endDate);
       this.drawToday(ctx);
@@ -883,13 +905,20 @@
     }
     drawAllTasks(ctx) {
       ctx.textBaseline = "middle";
-      ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+      ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textRendering = "optimizeSpeed";
       ctx.imageSmoothingEnabled = false;
+      let visibleRowIndex = 0;
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
-        const y = i * this.config.rowHeight;
-        if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
+        if (row.hide) {
+          continue;
+        }
+        const y = visibleRowIndex * this.config.rowHeight;
+        if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight) {
+          visibleRowIndex++;
+          continue;
+        }
         row.tasks.forEach((task) => {
           const pos = this.taskPositions.get(task.id);
           if (!pos) return;
@@ -898,18 +927,27 @@
           if (!isPlanVisible && !isActualVisible) return;
           this.drawTask(ctx, task, y, pos);
         });
+        visibleRowIndex++;
       }
     }
+    // In the drawGrid method
     drawGrid(ctx, startDate, endDate) {
       ctx.strokeStyle = "#e6e6e6";
       ctx.lineWidth = 1;
       ctx.beginPath();
       if (this.config.showRowLines) {
-        for (let i = 0; i <= this.data.length; i++) {
+        let visibleRowCount = 0;
+        for (let i = 0; i < this.data.length; i++) {
+          if (!this.data[i].hide) {
+            visibleRowCount++;
+          }
+        }
+        for (let i = 0; i <= visibleRowCount; i++) {
           const y = i * this.config.rowHeight;
           if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight) continue;
-          ctx.moveTo(this.scrollLeft, y);
-          ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+          const sharpY = this.snap(y);
+          ctx.moveTo(this.scrollLeft, sharpY);
+          ctx.lineTo(this.scrollLeft + this.viewportWidth, sharpY);
         }
       }
       if (this.config.showColLines) {
@@ -950,7 +988,7 @@
           currentDate = nextDate;
         }
         while (currentDate <= endDate) {
-          const x = this.dateToX(currentDate);
+          const x = this.snap(this.dateToX(currentDate));
           ctx.moveTo(x, this.scrollTop);
           ctx.lineTo(x, this.scrollTop + this.viewportHeight);
           switch (this.config.viewMode) {
@@ -999,14 +1037,14 @@
       const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
       if (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start + this.config.xGap, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual - this.config.xGap), 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;
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
-        ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
+        ctx.moveTo(pos.offset_x_plan_start + offset / 2 + this.config.xGap, taskY);
+        ctx.lineTo(pos.offset_x_plan_end - offset / 2 - this.config.xGap, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#000";
@@ -1050,10 +1088,21 @@
       const mouseY = e.clientY - rect.top;
       const chartX = mouseX + this.scrollLeft;
       const chartY = mouseY + this.scrollTop;
-      const rowIndex = Math.floor(chartY / this.config.rowHeight);
+      const visibleRowIndex = Math.floor(chartY / this.config.rowHeight);
+      let actualRowIndex = -1;
+      let visibleRowCount = 0;
+      for (let i = 0; i < this.data.length; i++) {
+        if (!this.data[i].hide) {
+          if (visibleRowCount === visibleRowIndex) {
+            actualRowIndex = i;
+            break;
+          }
+          visibleRowCount++;
+        }
+      }
       const date = this.xToDate(chartX);
-      if (rowIndex < 0 || rowIndex >= this.data.length) return this.handleMouseLeave();
-      const row = this.data[rowIndex];
+      if (actualRowIndex < 0 || actualRowIndex >= this.data.length) return this.handleMouseLeave();
+      const row = this.data[actualRowIndex];
       if (this.config.tooltipFormat) {
         const htmlStr = this.config.tooltipFormat(row, date, this.config);
         if (!htmlStr) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",