gantt-canvas-chart 1.4.0 → 1.5.1

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.4.0
+ * gantt-canvas-chart v1.5.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -205,8 +205,8 @@ class GanttChart {
   }
   init() {
     this.buildTaskMap();
-    this.calculateFullTimeline();
     this.updatePixelsPerDay();
+    this.calculateFullTimeline();
     this.setupEvents();
     this.handleResize();
   }
@@ -237,8 +237,8 @@ class GanttChart {
   updateConfig(newConfig) {
     Object.assign(this.config, newConfig);
     if (newConfig.viewMode) {
-      this.container.scrollLeft = 0;
-      this.scrollLeft = 0;
+      this.container.scrollLeft = this.config.scrollEdgeThresholds + 2;
+      this.scrollLeft = this.config.scrollEdgeThresholds + 2;
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
@@ -278,6 +278,9 @@ class GanttChart {
       maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
+        if (task.hide) {
+          return;
+        }
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
         if (pStart < minDate) minDate = pStart;
@@ -311,8 +314,8 @@ class GanttChart {
         break;
       case "Day":
       default:
-        this.timelineStart = DateUtils.addDays(minDate, -3);
-        this.timelineEnd = DateUtils.addDays(maxDate, 3);
+        this.timelineStart = DateUtils.addDays(minDate, 3);
+        this.timelineEnd = DateUtils.addDays(maxDate, -5);
         break;
     }
   }
@@ -478,7 +481,7 @@ class GanttChart {
     if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
-    const buffer = 200;
+    const buffer = 100;
     this.visibleDateRange = {
       start: this.xToDate(this.scrollLeft - buffer),
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -508,8 +511,14 @@ class GanttChart {
     this.taskPositions.clear();
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
+      if (row.hide) {
+        continue;
+      }
       const y = i * this.config.rowHeight;
       row.tasks.forEach((task) => {
+        if (task.hide) {
+          return;
+        }
         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;
@@ -526,21 +535,17 @@ class GanttChart {
           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));
+        x_actual_start = this.dateToX(new Date(task.actualStart));
+        x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd ? task.actualEnd : this.today, 1));
+        if (x_actual_start && x_actual_end && x_actual_start < x_actual_end) {
+          x_actual_width = x_actual_end - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual;
           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,
@@ -852,10 +857,9 @@ class GanttChart {
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
         if (!pos) return;
-        if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
-          if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
-            return;
-        }
+        const isPlanVisible = pos.x_plan_end >= this.scrollLeft && pos.x_plan_start <= this.scrollLeft + this.viewportWidth;
+        const isActualVisible = pos.x_actual_start && pos.x_actual_end && pos.x_actual_end >= this.scrollLeft && pos.x_actual_start <= this.scrollLeft + this.viewportWidth;
+        if (!isPlanVisible && !isActualVisible) return;
         this.drawTask(ctx, task, y, pos);
       });
     }
@@ -941,7 +945,7 @@ class GanttChart {
     ctx.stroke();
   }
   drawToday(ctx) {
-    const x = this.dateToX(this.today);
+    const x = this.dateToX(DateUtils.addDays(this.today, 1));
     if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
       ctx.strokeStyle = this.config.todayColor;
       ctx.lineWidth = 1;
@@ -972,11 +976,11 @@ class GanttChart {
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      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));
+      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 * 2), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      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));
+      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 * 2), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
@@ -1090,7 +1094,7 @@ class GanttChart {
     const startDate = date ? date : this.minDate;
     if (startDate) {
       const xPosition = this.dateToX(startDate);
-      this.container.scrollTo({ left: xPosition - 80 });
+      this.container.scrollTo({ left: Math.max(this.config.scrollEdgeThresholds + 2, xPosition - 80) });
     }
   }
   /**
@@ -1102,7 +1106,7 @@ class GanttChart {
     if (params && (params.rowId || params.rowIndex)) {
       const rowIndex = params.rowIndex ? params.rowIndex : this.data.findIndex((row) => row.id === params.rowId);
       const yPosition = this.config.rowHeight * rowIndex;
-      this.container.scrollTo({ top: yPosition - 80 });
+      this.container.scrollTo({ top: Math.max(this.config.scrollEdgeThresholds + 2, yPosition - 80) });
     }
   }
 }

package/dist/index.css

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

package/dist/index.d.ts

@@ -20,10 +20,28 @@ export declare class DateUtils {
  */
 export declare function firstValidValue(...args: any[]): any;
 
+/**
+ * GanttChart Class
+ *
+ * Core Features:
+ * 1. Virtual Rendering: Only renders tasks visible in the current viewport for performance optimization
+ * 2. Dynamic Scrolling: Supports both horizontal and vertical scrolling with virtualized data loading
+ * 3. Dual Timeline Display: Shows both planned and actual timelines for tasks
+ * 4. Data Validation Handling:
+ *    - Automatically handles invalid data where start dates are after end dates by skipping rendering
+ *    - For tasks with only actual start time (no end time), automatically extends visualization to today
+ *    - Filters out tasks with completely invalid date ranges
+ * 5. Dependency Visualization: Draws arrows between dependent tasks with smart routing
+ * 6. Infinite Scroll Loading: Supports dynamic data loading when scrolling to edges
+ * 7. Responsive Design: Adapts to container size changes using ResizeObserver
+ * 8. Tooltip System: Provides detailed information on hover with customizable formatting
+ * 9. Multiple View Modes: Supports Day/Week/Month/Year views with appropriate scaling
+ * 10. Custom Styling: Allows per-task styling through configuration options
+ */
 export declare class GanttChart {
     private rootContainer;
     container: HTMLElement;
-    private data;
+    data: GanttData;
     private config;
     private headerCanvas;
     private mainCanvas;
@@ -49,7 +67,10 @@ export declare class GanttChart {
     private totalHeight;
     private resizeObserver;
     private taskPositions;
-    private taskMap;
+    taskMap: Map<string, {
+        row: number;
+        task: Task;
+    }>;
     private isLoadingData;
     private hasMoreDataLeft;
     private hasMoreDataRight;
@@ -160,13 +181,14 @@ export declare type LoadMoreDirection = 'left' | 'right' | 'bottom';
 export declare interface Row {
     id: string;
     name: string;
+    hide?: boolean;
     tasks: Task[];
 }
 
 export declare interface Task {
     id: string;
     name: string;
-    type?: 'task' | 'leave';
+    type?: 'task' | 'leave' | 'overtime' | string;
     planStart?: string;
     planEnd?: string;
     actualStart?: string;
@@ -178,6 +200,7 @@ export declare interface Task {
     styleClass?: string;
     planBorderColor?: string;
     actualBgColor?: string;
+    hide?: boolean;
     _data?: any;
     planOffsetPercent?: [number, number];
     actualOffsetPercent?: [number, number];

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.4.0
+ * gantt-canvas-chart v1.5.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -203,8 +203,8 @@ class GanttChart {
   }
   init() {
     this.buildTaskMap();
-    this.calculateFullTimeline();
     this.updatePixelsPerDay();
+    this.calculateFullTimeline();
     this.setupEvents();
     this.handleResize();
   }
@@ -235,8 +235,8 @@ class GanttChart {
   updateConfig(newConfig) {
     Object.assign(this.config, newConfig);
     if (newConfig.viewMode) {
-      this.container.scrollLeft = 0;
-      this.scrollLeft = 0;
+      this.container.scrollLeft = this.config.scrollEdgeThresholds + 2;
+      this.scrollLeft = this.config.scrollEdgeThresholds + 2;
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
@@ -276,6 +276,9 @@ class GanttChart {
       maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
+        if (task.hide) {
+          return;
+        }
         const pStart = new Date(task.planStart);
         const pEnd = new Date(task.planEnd);
         if (pStart < minDate) minDate = pStart;
@@ -309,8 +312,8 @@ class GanttChart {
         break;
       case "Day":
       default:
-        this.timelineStart = DateUtils.addDays(minDate, -3);
-        this.timelineEnd = DateUtils.addDays(maxDate, 3);
+        this.timelineStart = DateUtils.addDays(minDate, 3);
+        this.timelineEnd = DateUtils.addDays(maxDate, -5);
         break;
     }
   }
@@ -476,7 +479,7 @@ class GanttChart {
     if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
   }
   updateVirtualRanges() {
-    const buffer = 200;
+    const buffer = 100;
     this.visibleDateRange = {
       start: this.xToDate(this.scrollLeft - buffer),
       end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -506,8 +509,14 @@ class GanttChart {
     this.taskPositions.clear();
     for (let i = 0; i < this.data.length; i++) {
       const row = this.data[i];
+      if (row.hide) {
+        continue;
+      }
       const y = i * this.config.rowHeight;
       row.tasks.forEach((task) => {
+        if (task.hide) {
+          return;
+        }
         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;
@@ -524,21 +533,17 @@ class GanttChart {
           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));
+        x_actual_start = this.dateToX(new Date(task.actualStart));
+        x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd ? task.actualEnd : this.today, 1));
+        if (x_actual_start && x_actual_end && x_actual_start < x_actual_end) {
+          x_actual_width = x_actual_end - x_actual_start;
+          offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+          offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual;
           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,
@@ -850,10 +855,9 @@ class GanttChart {
       row.tasks.forEach((task) => {
         const pos = this.taskPositions.get(task.id);
         if (!pos) return;
-        if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
-          if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
-            return;
-        }
+        const isPlanVisible = pos.x_plan_end >= this.scrollLeft && pos.x_plan_start <= this.scrollLeft + this.viewportWidth;
+        const isActualVisible = pos.x_actual_start && pos.x_actual_end && pos.x_actual_end >= this.scrollLeft && pos.x_actual_start <= this.scrollLeft + this.viewportWidth;
+        if (!isPlanVisible && !isActualVisible) return;
         this.drawTask(ctx, task, y, pos);
       });
     }
@@ -939,7 +943,7 @@ class GanttChart {
     ctx.stroke();
   }
   drawToday(ctx) {
-    const x = this.dateToX(this.today);
+    const x = this.dateToX(DateUtils.addDays(this.today, 1));
     if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
       ctx.strokeStyle = this.config.todayColor;
       ctx.lineWidth = 1;
@@ -970,11 +974,11 @@ class GanttChart {
     ctx.fillStyle = "#000";
     if (this.config.showLeftRemark && task.leftRemark) {
       ctx.textAlign = "right";
-      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));
+      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 * 2), Math.round(textY));
     }
     if (this.config.showRightRemark && task.rightRemark) {
       ctx.textAlign = "left";
-      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));
+      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 * 2), Math.round(textY));
     }
     if (this.config.showCenterRemark && task.centerRemark) {
       const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
@@ -1088,7 +1092,7 @@ class GanttChart {
     const startDate = date ? date : this.minDate;
     if (startDate) {
       const xPosition = this.dateToX(startDate);
-      this.container.scrollTo({ left: xPosition - 80 });
+      this.container.scrollTo({ left: Math.max(this.config.scrollEdgeThresholds + 2, xPosition - 80) });
     }
   }
   /**
@@ -1100,7 +1104,7 @@ class GanttChart {
     if (params && (params.rowId || params.rowIndex)) {
       const rowIndex = params.rowIndex ? params.rowIndex : this.data.findIndex((row) => row.id === params.rowId);
       const yPosition = this.config.rowHeight * rowIndex;
-      this.container.scrollTo({ top: yPosition - 80 });
+      this.container.scrollTo({ top: Math.max(this.config.scrollEdgeThresholds + 2, yPosition - 80) });
     }
   }
 }

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.4.0
+ * gantt-canvas-chart v1.5.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -207,8 +207,8 @@
     }
     init() {
       this.buildTaskMap();
-      this.calculateFullTimeline();
       this.updatePixelsPerDay();
+      this.calculateFullTimeline();
       this.setupEvents();
       this.handleResize();
     }
@@ -239,8 +239,8 @@
     updateConfig(newConfig) {
       Object.assign(this.config, newConfig);
       if (newConfig.viewMode) {
-        this.container.scrollLeft = 0;
-        this.scrollLeft = 0;
+        this.container.scrollLeft = this.config.scrollEdgeThresholds + 2;
+        this.scrollLeft = this.config.scrollEdgeThresholds + 2;
         this.updatePixelsPerDay();
         this.calculateFullTimeline();
       }
@@ -280,6 +280,9 @@
         maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
       } else {
         this.taskMap.forEach(({ task }) => {
+          if (task.hide) {
+            return;
+          }
           const pStart = new Date(task.planStart);
           const pEnd = new Date(task.planEnd);
           if (pStart < minDate) minDate = pStart;
@@ -313,8 +316,8 @@
           break;
         case "Day":
         default:
-          this.timelineStart = DateUtils.addDays(minDate, -3);
-          this.timelineEnd = DateUtils.addDays(maxDate, 3);
+          this.timelineStart = DateUtils.addDays(minDate, 3);
+          this.timelineEnd = DateUtils.addDays(maxDate, -5);
           break;
       }
     }
@@ -480,7 +483,7 @@
       if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
     }
     updateVirtualRanges() {
-      const buffer = 200;
+      const buffer = 100;
       this.visibleDateRange = {
         start: this.xToDate(this.scrollLeft - buffer),
         end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
@@ -510,8 +513,14 @@
       this.taskPositions.clear();
       for (let i = 0; i < this.data.length; i++) {
         const row = this.data[i];
+        if (row.hide) {
+          continue;
+        }
         const y = i * this.config.rowHeight;
         row.tasks.forEach((task) => {
+          if (task.hide) {
+            return;
+          }
           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;
@@ -528,21 +537,17 @@
             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));
+          x_actual_start = this.dateToX(new Date(task.actualStart));
+          x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd ? task.actualEnd : this.today, 1));
+          if (x_actual_start && x_actual_end && x_actual_start < x_actual_end) {
+            x_actual_width = x_actual_end - x_actual_start;
+            offset_x_actual_start = Math.round(x_actual_start + x_actual_width * offsetX_actual);
+            offset_x_actual_end = offset_x_actual_start + x_actual_width * percent_actual;
             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,
@@ -854,10 +859,9 @@
         row.tasks.forEach((task) => {
           const pos = this.taskPositions.get(task.id);
           if (!pos) return;
-          if (pos.x_plan_end < this.scrollLeft || pos.x_plan_start > this.scrollLeft + this.viewportWidth) {
-            if (!pos.x_actual_start || pos.x_actual_end < this.scrollLeft || pos.x_actual_start > this.scrollLeft + this.viewportWidth)
-              return;
-          }
+          const isPlanVisible = pos.x_plan_end >= this.scrollLeft && pos.x_plan_start <= this.scrollLeft + this.viewportWidth;
+          const isActualVisible = pos.x_actual_start && pos.x_actual_end && pos.x_actual_end >= this.scrollLeft && pos.x_actual_start <= this.scrollLeft + this.viewportWidth;
+          if (!isPlanVisible && !isActualVisible) return;
           this.drawTask(ctx, task, y, pos);
         });
       }
@@ -943,7 +947,7 @@
       ctx.stroke();
     }
     drawToday(ctx) {
-      const x = this.dateToX(this.today);
+      const x = this.dateToX(DateUtils.addDays(this.today, 1));
       if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
         ctx.strokeStyle = this.config.todayColor;
         ctx.lineWidth = 1;
@@ -974,11 +978,11 @@
       ctx.fillStyle = "#000";
       if (this.config.showLeftRemark && task.leftRemark) {
         ctx.textAlign = "right";
-        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));
+        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 * 2), Math.round(textY));
       }
       if (this.config.showRightRemark && task.rightRemark) {
         ctx.textAlign = "left";
-        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));
+        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 * 2), Math.round(textY));
       }
       if (this.config.showCenterRemark && task.centerRemark) {
         const centerX = pos.offset_x_actual_start + (pos.offset_x_actual_end - pos.offset_x_actual_start) / 2;
@@ -1092,7 +1096,7 @@
       const startDate = date ? date : this.minDate;
       if (startDate) {
         const xPosition = this.dateToX(startDate);
-        this.container.scrollTo({ left: xPosition - 80 });
+        this.container.scrollTo({ left: Math.max(this.config.scrollEdgeThresholds + 2, xPosition - 80) });
       }
     }
     /**
@@ -1104,7 +1108,7 @@
       if (params && (params.rowId || params.rowIndex)) {
         const rowIndex = params.rowIndex ? params.rowIndex : this.data.findIndex((row) => row.id === params.rowId);
         const yPosition = this.config.rowHeight * rowIndex;
-        this.container.scrollTo({ top: yPosition - 80 });
+        this.container.scrollTo({ top: Math.max(this.config.scrollEdgeThresholds + 2, yPosition - 80) });
       }
     }
   }

package/package.json

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