gantt-canvas-chart 1.5.2 → 1.5.3

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.3
  * (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");
@@ -251,8 +253,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 +533,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;
@@ -543,12 +557,13 @@ class GanttChart {
   }
   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 +607,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) {
@@ -884,10 +901,17 @@ class GanttChart {
     ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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,14 +920,22 @@ 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);
@@ -1048,10 +1080,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.3
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.2
+ * gantt-canvas-chart v1.5.3
  * (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");
@@ -249,8 +251,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 +531,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;
@@ -541,12 +555,13 @@ class GanttChart {
   }
   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 +605,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) {
@@ -882,10 +899,17 @@ class GanttChart {
     ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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,14 +918,22 @@ 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);
@@ -1046,10 +1078,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.3
  * (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");
@@ -253,8 +255,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 +535,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;
@@ -545,12 +559,13 @@
     }
     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 +609,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) {
@@ -886,10 +903,17 @@
       ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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,14 +922,22 @@
           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);
@@ -1050,10 +1082,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.3",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",