gantt-canvas-chart 1.3.0 → 1.4.0

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * 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",
@@ -196,6 +200,7 @@ class GanttChart {
     this.handleScroll = this.handleScroll.bind(this);
     this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
     this.verticalScrollTo = this.verticalScrollTo.bind(this);
+    this.handleResize = this.handleResize.bind(this);
     this.init();
   }
   init() {
@@ -218,7 +223,6 @@ class GanttChart {
   }
   setupEvents() {
     this.container.addEventListener("scroll", this.handleScroll);
-    this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
       setTimeout(() => {
@@ -260,6 +264,9 @@ class GanttChart {
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
     this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.data = [];
+    this.taskMap.clear();
+    this.taskPositions.clear();
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -369,19 +376,17 @@ 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");
-        console.log("left-loadMoreData::", this.data);
       } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
         await this.loadMoreData("right");
-        console.log("right-loadMoreData::", this.data);
       } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
         await this.loadMoreData("bottom");
-        console.log("bottom-loadMoreData::", this.data);
       }
     } finally {
       this.lastScrollLeft = scrollLeft;
@@ -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) {
@@ -510,17 +513,45 @@ class GanttChart {
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
+        let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+        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 && 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));
         }
+        if (x_actual_start) {
+          x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+        }
         this.taskPositions.set(task.id, {
           x_plan_start,
           x_plan_end,
           x_actual_start,
           x_actual_end,
+          offset_x_plan_start,
+          offset_x_plan_end,
+          offset_x_actual_start,
+          offset_x_actual_end,
+          x_plan_width,
+          x_actual_width,
           y: y + this.config.rowHeight * 0.5,
           row: i
         });
@@ -765,9 +796,9 @@ class GanttChart {
         if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-        const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+        const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -922,42 +953,35 @@ class GanttChart {
   }
   drawTask(ctx, task, y, pos) {
     const offset = 4;
-    const width = pos.x_plan_end - pos.x_plan_start;
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
     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 (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      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(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * 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;
-      pos.x_plan_start += width * offsetX;
-      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.x_plan_start + 2, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      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));
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_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.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_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;
+      const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
     }
   }
   getTaskStyles(task) {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * 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;
@@ -187,6 +188,12 @@ export declare interface TaskPosition {
     x_plan_end: number;
     x_actual_start: number | null;
     x_actual_end: number | null;
+    x_plan_width: number;
+    x_actual_width: number;
+    offset_x_plan_start: number;
+    offset_x_plan_end: number;
+    offset_x_actual_start: number | null;
+    offset_x_actual_end: number | null;
     y: number;
     row: number;
 }

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * 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",
@@ -194,6 +198,7 @@ class GanttChart {
     this.handleScroll = this.handleScroll.bind(this);
     this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
     this.verticalScrollTo = this.verticalScrollTo.bind(this);
+    this.handleResize = this.handleResize.bind(this);
     this.init();
   }
   init() {
@@ -216,7 +221,6 @@ class GanttChart {
   }
   setupEvents() {
     this.container.addEventListener("scroll", this.handleScroll);
-    this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
       setTimeout(() => {
@@ -258,6 +262,9 @@ class GanttChart {
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
     this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.data = [];
+    this.taskMap.clear();
+    this.taskPositions.clear();
     this.container.remove();
   }
   calculateFullTimeline() {
@@ -367,19 +374,17 @@ 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");
-        console.log("left-loadMoreData::", this.data);
       } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
         await this.loadMoreData("right");
-        console.log("right-loadMoreData::", this.data);
       } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
         await this.loadMoreData("bottom");
-        console.log("bottom-loadMoreData::", this.data);
       }
     } finally {
       this.lastScrollLeft = scrollLeft;
@@ -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) {
@@ -508,17 +511,45 @@ class GanttChart {
         const x_plan_start = this.dateToX(new Date(task.planStart));
         const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
+        let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+        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 && 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));
         }
+        if (x_actual_start) {
+          x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+        }
         this.taskPositions.set(task.id, {
           x_plan_start,
           x_plan_end,
           x_actual_start,
           x_actual_end,
+          offset_x_plan_start,
+          offset_x_plan_end,
+          offset_x_actual_start,
+          offset_x_actual_end,
+          x_plan_width,
+          x_actual_width,
           y: y + this.config.rowHeight * 0.5,
           row: i
         });
@@ -763,9 +794,9 @@ class GanttChart {
         if (!fromPos) return;
         const fromRowIndex = this.taskMap.get(depId).row;
         const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-        const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+        const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -920,42 +951,35 @@ class GanttChart {
   }
   drawTask(ctx, task, y, pos) {
     const offset = 4;
-    const width = pos.x_plan_end - pos.x_plan_start;
     const taskY = y + this.config.rowHeight * 0.15 + offset;
     const taskHeight = this.config.rowHeight * 0.7 - offset;
     const textY = y + this.config.rowHeight / 2 + offset;
     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 (this.config.showActual && pos.x_actual_start) {
       ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-      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(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+      ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * 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;
-      pos.x_plan_start += width * offsetX;
-      pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
       ctx.lineWidth = 4;
       ctx.beginPath();
-      ctx.moveTo(pos.x_plan_start + 2, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+      ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+      ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      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));
+      ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_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.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+      ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_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;
+      const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
       ctx.textAlign = "center";
-      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+      ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
     }
   }
   getTaskStyles(task) {

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.3.0
+ * 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",
@@ -198,6 +202,7 @@
       this.handleScroll = this.handleScroll.bind(this);
       this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
       this.verticalScrollTo = this.verticalScrollTo.bind(this);
+      this.handleResize = this.handleResize.bind(this);
       this.init();
     }
     init() {
@@ -220,7 +225,6 @@
     }
     setupEvents() {
       this.container.addEventListener("scroll", this.handleScroll);
-      this.handleResize = this.handleResize.bind(this);
       if (window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(this.handleResize);
         setTimeout(() => {
@@ -262,6 +266,9 @@
       this.container.removeEventListener("scroll", this.handleScroll);
       this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
       this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
+      this.data = [];
+      this.taskMap.clear();
+      this.taskPositions.clear();
       this.container.remove();
     }
     calculateFullTimeline() {
@@ -371,19 +378,17 @@
       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");
-          console.log("left-loadMoreData::", this.data);
         } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
           await this.loadMoreData("right");
-          console.log("right-loadMoreData::", this.data);
         } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
           await this.loadMoreData("bottom");
-          console.log("bottom-loadMoreData::", this.data);
         }
       } finally {
         this.lastScrollLeft = scrollLeft;
@@ -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) {
@@ -512,17 +515,45 @@
           const x_plan_start = this.dateToX(new Date(task.planStart));
           const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
           let x_actual_start = null, x_actual_end = null;
+          let offset_x_plan_start = NaN, offset_x_plan_end = NaN;
+          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 && 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));
           }
+          if (x_actual_start) {
+            x_actual_width = (x_actual_end ? x_actual_end : this.dateToX(this.today)) - x_actual_start;
+            offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+            x_actual_end && (offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual);
+          }
           this.taskPositions.set(task.id, {
             x_plan_start,
             x_plan_end,
             x_actual_start,
             x_actual_end,
+            offset_x_plan_start,
+            offset_x_plan_end,
+            offset_x_actual_start,
+            offset_x_actual_end,
+            x_plan_width,
+            x_actual_width,
             y: y + this.config.rowHeight * 0.5,
             row: i
           });
@@ -767,9 +798,9 @@
           if (!fromPos) return;
           const fromRowIndex = this.taskMap.get(depId).row;
           const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-          const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+          const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
           const fromY = fromPos.y;
-          const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+          const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
           const toY = toPos.y;
           ctx.beginPath();
           if (isAdjacent) {
@@ -924,42 +955,35 @@
     }
     drawTask(ctx, task, y, pos) {
       const offset = 4;
-      const width = pos.x_plan_end - pos.x_plan_start;
       const taskY = y + this.config.rowHeight * 0.15 + offset;
       const taskHeight = this.config.rowHeight * 0.7 - offset;
       const textY = y + this.config.rowHeight / 2 + offset;
       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 (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        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(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * 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;
-        pos.x_plan_start += width * offsetX;
-        pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.x_plan_start + 2, taskY);
-        ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
+        ctx.moveTo(pos.offset_x_plan_start + offset / 2, taskY);
+        ctx.lineTo(pos.offset_x_plan_end - offset / 2, taskY);
         ctx.stroke();
       }
       ctx.fillStyle = "#000";
       if (this.config.showLeftRemark && task.leftRemark) {
         ctx.textAlign = "right";
-        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));
+        ctx.fillText(task.leftRemark, Math.round(Math.min(...[pos.offset_x_plan_start, pos.offset_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.round(Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8), Math.round(textY));
+        ctx.fillText(task.rightRemark, Math.round(Math.max(...[pos.offset_x_plan_end, pos.offset_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;
+        const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
         ctx.textAlign = "center";
-        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.x_actual_end - pos.x_actual_start));
+        ctx.fillText(task.centerRemark, Math.round(centerX), Math.round(textY), Math.round(pos.offset_x_actual_end - pos.offset_x_actual_start));
       }
     }
     getTaskStyles(task) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.3.0",
+  "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",