gantt-canvas-chart 1.3.1 → 1.4.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.4.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -121,6 +121,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
+    if (rootContainer.querySelector(".__gantt-chart-container")) {
+      throw new Error("GanttChart already exists in this container");
+    }
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
     const headerCanvas = document.createElement("canvas");
@@ -157,6 +160,7 @@ class GanttChart {
       todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      scrollEdgeThresholds: 10,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -372,9 +376,10 @@ class GanttChart {
     const viewportHeight = this.viewportHeight;
     const totalWidth = this.totalWidth;
     const totalHeight = this.totalHeight;
-    const atLeftEdge = scrollLeft <= 5;
-    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+    const thresholds = this.config.scrollEdgeThresholds;
+    const atLeftEdge = scrollLeft <= thresholds;
+    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
@@ -390,9 +395,7 @@ class GanttChart {
   }
   // Add this method to reset scroll loading state
   resetScrollLoadingState() {
-    this.hasMoreDataLeft = true;
-    this.hasMoreDataRight = true;
-    this.hasMoreDataBottom = true;
+    this.updateLoadMoreConf();
     this.lastScrollLeft = 0;
     this.lastScrollTop = 0;
     if (this.scrollLoadTimer !== null) {
@@ -514,15 +517,21 @@ class GanttChart {
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
+        let isValidPlanTask = false, isValidActualTask = false;
         const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
         const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-        if (x_plan_start && x_plan_end) {
+        if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
           x_plan_width = x_plan_end - x_plan_start;
           offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
           x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+          isValidPlanTask = true;
         }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
+          isValidActualTask = true;
+        }
+        if (!isValidPlanTask && !isValidActualTask) {
+          return;
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));

package/dist/index.css

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

package/dist/index.d.ts

@@ -142,6 +142,7 @@ export declare interface GanttConfig {
     todayColor?: string;
     offsetTop?: number;
     offsetLeft?: number;
+    scrollEdgeThresholds?: number;
     enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
     viewFactors?: {
         Day: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.4.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -119,6 +119,9 @@ class GanttChart {
   onDataLoad = null;
   scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
+    if (rootContainer.querySelector(".__gantt-chart-container")) {
+      throw new Error("GanttChart already exists in this container");
+    }
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
     const headerCanvas = document.createElement("canvas");
@@ -155,6 +158,7 @@ class GanttChart {
       todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      scrollEdgeThresholds: 10,
       enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
@@ -370,9 +374,10 @@ class GanttChart {
     const viewportHeight = this.viewportHeight;
     const totalWidth = this.totalWidth;
     const totalHeight = this.totalHeight;
-    const atLeftEdge = scrollLeft <= 5;
-    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+    const thresholds = this.config.scrollEdgeThresholds;
+    const atLeftEdge = scrollLeft <= thresholds;
+    const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+    const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
     try {
       if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
         await this.loadMoreData("left");
@@ -388,9 +393,7 @@ class GanttChart {
   }
   // Add this method to reset scroll loading state
   resetScrollLoadingState() {
-    this.hasMoreDataLeft = true;
-    this.hasMoreDataRight = true;
-    this.hasMoreDataBottom = true;
+    this.updateLoadMoreConf();
     this.lastScrollLeft = 0;
     this.lastScrollTop = 0;
     if (this.scrollLoadTimer !== null) {
@@ -512,15 +515,21 @@ class GanttChart {
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
+        let isValidPlanTask = false, isValidActualTask = false;
         const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
         const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-        if (x_plan_start && x_plan_end) {
+        if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
           x_plan_width = x_plan_end - x_plan_start;
           offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
           x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+          isValidPlanTask = true;
         }
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
+          isValidActualTask = true;
+        }
+        if (!isValidPlanTask && !isValidActualTask) {
+          return;
         }
         if (task.actualEnd) {
           x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.1
+ * gantt-canvas-chart v1.4.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -123,6 +123,9 @@
     onDataLoad = null;
     scrollLoadTimer = null;
     constructor(rootContainer, data, config = {}) {
+      if (rootContainer.querySelector(".__gantt-chart-container")) {
+        throw new Error("GanttChart already exists in this container");
+      }
       const container = document.createElement("div");
       const scrollEl = document.createElement("div");
       const headerCanvas = document.createElement("canvas");
@@ -159,6 +162,7 @@
         todayColor: "#ff4d4f",
         offsetTop: 0,
         offsetLeft: 0,
+        scrollEdgeThresholds: 10,
         enabledLoadMore: [],
         viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
         planBorderColor: "#C1EFCF",
@@ -374,9 +378,10 @@
       const viewportHeight = this.viewportHeight;
       const totalWidth = this.totalWidth;
       const totalHeight = this.totalHeight;
-      const atLeftEdge = scrollLeft <= 5;
-      const atRightEdge = scrollLeft + viewportWidth >= totalWidth - 5;
-      const atBottomEdge = scrollTop + viewportHeight >= totalHeight - 5;
+      const thresholds = this.config.scrollEdgeThresholds;
+      const atLeftEdge = scrollLeft <= thresholds;
+      const atRightEdge = scrollLeft + viewportWidth >= totalWidth - thresholds;
+      const atBottomEdge = scrollTop + viewportHeight >= totalHeight - thresholds;
       try {
         if (this.hasMoreDataLeft && atLeftEdge && scrollLeft < this.lastScrollLeft) {
           await this.loadMoreData("left");
@@ -392,9 +397,7 @@
     }
     // Add this method to reset scroll loading state
     resetScrollLoadingState() {
-      this.hasMoreDataLeft = true;
-      this.hasMoreDataRight = true;
-      this.hasMoreDataBottom = true;
+      this.updateLoadMoreConf();
       this.lastScrollLeft = 0;
       this.lastScrollTop = 0;
       if (this.scrollLoadTimer !== null) {
@@ -516,15 +519,21 @@
           let offset_x_actual_start = null, offset_x_actual_end = null;
           let x_plan_width = 0;
           let x_actual_width = 0;
+          let isValidPlanTask = false, isValidActualTask = false;
           const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
           const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
-          if (x_plan_start && x_plan_end) {
+          if (x_plan_start && x_plan_end && x_plan_start < x_plan_end) {
             x_plan_width = x_plan_end - x_plan_start;
             offset_x_plan_start = x_plan_start + x_plan_width * offsetX;
             x_plan_end && (offset_x_plan_end = offset_x_plan_start + x_plan_width * percent_plan);
+            isValidPlanTask = true;
           }
           if (task.actualStart) {
             x_actual_start = this.dateToX(new Date(task.actualStart));
+            isValidActualTask = true;
+          }
+          if (!isValidPlanTask && !isValidActualTask) {
+            return;
           }
           if (task.actualEnd) {
             x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));

package/package.json

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