gantt-canvas-chart 1.5.0 → 1.5.2

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.0
+ * gantt-canvas-chart v1.5.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -82,6 +82,40 @@ function firstValidValue(...args) {
   }
   return null;
 }
+function getMinMax(values) {
+  const validNumbers = values.filter((value) => {
+    return typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity;
+  });
+  if (validNumbers.length === 0) {
+    return null;
+  }
+  return {
+    min: Math.min(...validNumbers),
+    max: Math.max(...validNumbers)
+  };
+}
+function getMinMaxOptimized(values) {
+  let min = Infinity;
+  let max = -Infinity;
+  let hasValidValue = false;
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i];
+    if (typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity) {
+      hasValidValue = true;
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+  }
+  return hasValidValue ? { min, max } : null;
+}
+function dateToStart(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+function dateToEnd(value) {
+  const d = dateToStart(value);
+  d.setDate(d.getDate() + 1);
+  return new Date(d.getTime() - 1);
+}
 class GanttChart {
   rootContainer;
   container;
@@ -237,8 +271,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();
     }
@@ -522,7 +556,7 @@ 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_plan_start = null, offset_x_plan_end = null;
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
@@ -535,21 +569,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 (task.actualEnd) {
-          x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
-        }
         if (!isValidPlanTask && !isValidActualTask) {
           return;
         }
-        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,
@@ -805,9 +835,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.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
+        const fromX = getMinMax([fromPos.offset_x_plan_end, fromPos.offset_x_actual_end])?.max;
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
+        const toX = getMinMax([toPos.offset_x_actual_start, toPos.offset_x_plan_start])?.min;
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -861,10 +891,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);
       });
     }
@@ -950,7 +979,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;
@@ -981,11 +1010,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(getMinMax([pos.offset_x_plan_start, pos.offset_x_actual_start])?.min - 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(getMinMax([pos.offset_x_plan_end, pos.offset_x_actual_end])?.max + 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;
@@ -1032,11 +1061,10 @@ class GanttChart {
       this.tooltip.innerHTML = htmlStr;
     } else {
       const overlappingTasks = row.tasks.filter((task) => {
-        const pStart = new Date(task.planStart).setHours(0, 0, 0, 0), pEnd = DateUtils.addDays(task.planEnd, 1);
-        if (date >= pStart && date < pEnd) return true;
+        if (task.planStart && task.planEnd && date > dateToStart(new Date(task.planStart)) && date <= dateToEnd(new Date(task.planEnd))) return true;
         if (task.actualStart) {
-          const aStart = new Date(task.actualStart).setHours(0, 0, 0, 0), aEnd = DateUtils.addDays(task.actualEnd, 1);
-          if (date >= aStart && date < aEnd) return true;
+          const aEnd = task.actualEnd ? new Date(task.actualEnd) : this.today;
+          if (date >= dateToStart(new Date(task.actualStart)) && date <= dateToEnd(aEnd)) return true;
         }
         return false;
       });
@@ -1099,7 +1127,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) });
     }
   }
   /**
@@ -1111,10 +1139,14 @@ 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) });
     }
   }
 }
 exports.DateUtils = DateUtils;
 exports.GanttChart = GanttChart;
+exports.dateToEnd = dateToEnd;
+exports.dateToStart = dateToStart;
 exports.firstValidValue = firstValidValue;
+exports.getMinMax = getMinMax;
+exports.getMinMaxOptimized = getMinMaxOptimized;

package/dist/index.css

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

package/dist/index.d.ts

@@ -1,3 +1,17 @@
+/**
+ * 将日期转换为一天的结束时间，即23点59分59秒999毫秒
+ * @param {Date} value
+ * @returns {Date}
+ */
+export declare function dateToEnd(value: Date): Date;
+
+/**
+ * 将日期转换为一天的开始时间，即0点0分0秒0毫秒
+ * @param {Date} value
+ * @returns {Date}
+ */
+export declare function dateToStart(d: Date): Date;
+
 export declare class DateUtils {
     static readonly ONE_DAY_MS: number;
     static format(date: Date, format?: string): string;
@@ -20,6 +34,24 @@ 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;
@@ -49,7 +81,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;
@@ -155,6 +190,30 @@ export declare interface GanttConfig {
 
 export declare type GanttData = Row[];
 
+/**
+ * Finds the minimum and maximum values from a series of numbers,
+ * automatically filtering out invalid values such as undefined, null, and NaN.
+ *
+ * @param values - An array of values to process
+ * @returns An object containing min and max values, or null if no valid values exist
+ */
+export declare function getMinMax(values: any[]): {
+    min: number;
+    max: number;
+} | null;
+
+/**
+ * Finds the minimum and maximum values from a series of numbers,for very large datasets using a single-pass algorithm
+ * automatically filtering out invalid values such as undefined, null, and NaN.
+ *
+ * @param values - An array of values to process
+ * @returns An object containing min and max values, or null if no valid values exist
+ */
+export declare function getMinMaxOptimized(values: any[]): {
+    min: number;
+    max: number;
+} | null;
+
 export declare type LoadMoreDirection = 'left' | 'right' | 'bottom';
 
 export declare interface Row {
@@ -192,8 +251,8 @@ export declare interface TaskPosition {
     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_plan_start: number | null;
+    offset_x_plan_end: number | null;
     offset_x_actual_start: number | null;
     offset_x_actual_end: number | null;
     y: number;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.0
+ * gantt-canvas-chart v1.5.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -80,6 +80,40 @@ function firstValidValue(...args) {
   }
   return null;
 }
+function getMinMax(values) {
+  const validNumbers = values.filter((value) => {
+    return typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity;
+  });
+  if (validNumbers.length === 0) {
+    return null;
+  }
+  return {
+    min: Math.min(...validNumbers),
+    max: Math.max(...validNumbers)
+  };
+}
+function getMinMaxOptimized(values) {
+  let min = Infinity;
+  let max = -Infinity;
+  let hasValidValue = false;
+  for (let i = 0; i < values.length; i++) {
+    const value = values[i];
+    if (typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity) {
+      hasValidValue = true;
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+  }
+  return hasValidValue ? { min, max } : null;
+}
+function dateToStart(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+}
+function dateToEnd(value) {
+  const d = dateToStart(value);
+  d.setDate(d.getDate() + 1);
+  return new Date(d.getTime() - 1);
+}
 class GanttChart {
   rootContainer;
   container;
@@ -235,8 +269,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();
     }
@@ -520,7 +554,7 @@ 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_plan_start = null, offset_x_plan_end = null;
         let offset_x_actual_start = null, offset_x_actual_end = null;
         let x_plan_width = 0;
         let x_actual_width = 0;
@@ -533,21 +567,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 (task.actualEnd) {
-          x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
-        }
         if (!isValidPlanTask && !isValidActualTask) {
           return;
         }
-        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,
@@ -803,9 +833,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.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
+        const fromX = getMinMax([fromPos.offset_x_plan_end, fromPos.offset_x_actual_end])?.max;
         const fromY = fromPos.y;
-        const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
+        const toX = getMinMax([toPos.offset_x_actual_start, toPos.offset_x_plan_start])?.min;
         const toY = toPos.y;
         ctx.beginPath();
         if (isAdjacent) {
@@ -859,10 +889,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);
       });
     }
@@ -948,7 +977,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;
@@ -979,11 +1008,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(getMinMax([pos.offset_x_plan_start, pos.offset_x_actual_start])?.min - 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(getMinMax([pos.offset_x_plan_end, pos.offset_x_actual_end])?.max + 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;
@@ -1030,11 +1059,10 @@ class GanttChart {
       this.tooltip.innerHTML = htmlStr;
     } else {
       const overlappingTasks = row.tasks.filter((task) => {
-        const pStart = new Date(task.planStart).setHours(0, 0, 0, 0), pEnd = DateUtils.addDays(task.planEnd, 1);
-        if (date >= pStart && date < pEnd) return true;
+        if (task.planStart && task.planEnd && date > dateToStart(new Date(task.planStart)) && date <= dateToEnd(new Date(task.planEnd))) return true;
         if (task.actualStart) {
-          const aStart = new Date(task.actualStart).setHours(0, 0, 0, 0), aEnd = DateUtils.addDays(task.actualEnd, 1);
-          if (date >= aStart && date < aEnd) return true;
+          const aEnd = task.actualEnd ? new Date(task.actualEnd) : this.today;
+          if (date >= dateToStart(new Date(task.actualStart)) && date <= dateToEnd(aEnd)) return true;
         }
         return false;
       });
@@ -1097,7 +1125,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) });
     }
   }
   /**
@@ -1109,12 +1137,16 @@ 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) });
     }
   }
 }
 export {
   DateUtils,
   GanttChart,
-  firstValidValue
+  dateToEnd,
+  dateToStart,
+  firstValidValue,
+  getMinMax,
+  getMinMaxOptimized
 };

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.5.0
+ * gantt-canvas-chart v1.5.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -84,6 +84,40 @@
     }
     return null;
   }
+  function getMinMax(values) {
+    const validNumbers = values.filter((value) => {
+      return typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity;
+    });
+    if (validNumbers.length === 0) {
+      return null;
+    }
+    return {
+      min: Math.min(...validNumbers),
+      max: Math.max(...validNumbers)
+    };
+  }
+  function getMinMaxOptimized(values) {
+    let min = Infinity;
+    let max = -Infinity;
+    let hasValidValue = false;
+    for (let i = 0; i < values.length; i++) {
+      const value = values[i];
+      if (typeof value === "number" && !isNaN(value) && value !== Infinity && value !== -Infinity) {
+        hasValidValue = true;
+        if (value < min) min = value;
+        if (value > max) max = value;
+      }
+    }
+    return hasValidValue ? { min, max } : null;
+  }
+  function dateToStart(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
+  }
+  function dateToEnd(value) {
+    const d = dateToStart(value);
+    d.setDate(d.getDate() + 1);
+    return new Date(d.getTime() - 1);
+  }
   class GanttChart {
     rootContainer;
     container;
@@ -239,8 +273,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();
       }
@@ -524,7 +558,7 @@
           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_plan_start = null, offset_x_plan_end = null;
           let offset_x_actual_start = null, offset_x_actual_end = null;
           let x_plan_width = 0;
           let x_actual_width = 0;
@@ -537,21 +571,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 (task.actualEnd) {
-            x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
-          }
           if (!isValidPlanTask && !isValidActualTask) {
             return;
           }
-          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,
@@ -807,9 +837,9 @@
           if (!fromPos) return;
           const fromRowIndex = this.taskMap.get(depId).row;
           const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-          const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
+          const fromX = getMinMax([fromPos.offset_x_plan_end, fromPos.offset_x_actual_end])?.max;
           const fromY = fromPos.y;
-          const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
+          const toX = getMinMax([toPos.offset_x_actual_start, toPos.offset_x_plan_start])?.min;
           const toY = toPos.y;
           ctx.beginPath();
           if (isAdjacent) {
@@ -863,10 +893,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);
         });
       }
@@ -952,7 +981,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;
@@ -983,11 +1012,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(getMinMax([pos.offset_x_plan_start, pos.offset_x_actual_start])?.min - 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(getMinMax([pos.offset_x_plan_end, pos.offset_x_actual_end])?.max + 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;
@@ -1034,11 +1063,10 @@
         this.tooltip.innerHTML = htmlStr;
       } else {
         const overlappingTasks = row.tasks.filter((task) => {
-          const pStart = new Date(task.planStart).setHours(0, 0, 0, 0), pEnd = DateUtils.addDays(task.planEnd, 1);
-          if (date >= pStart && date < pEnd) return true;
+          if (task.planStart && task.planEnd && date > dateToStart(new Date(task.planStart)) && date <= dateToEnd(new Date(task.planEnd))) return true;
           if (task.actualStart) {
-            const aStart = new Date(task.actualStart).setHours(0, 0, 0, 0), aEnd = DateUtils.addDays(task.actualEnd, 1);
-            if (date >= aStart && date < aEnd) return true;
+            const aEnd = task.actualEnd ? new Date(task.actualEnd) : this.today;
+            if (date >= dateToStart(new Date(task.actualStart)) && date <= dateToEnd(aEnd)) return true;
           }
           return false;
         });
@@ -1101,7 +1129,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) });
       }
     }
     /**
@@ -1113,12 +1141,16 @@
       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) });
       }
     }
   }
   exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;
+  exports2.dateToEnd = dateToEnd;
+  exports2.dateToStart = dateToStart;
   exports2.firstValidValue = firstValidValue;
+  exports2.getMinMax = getMinMax;
+  exports2.getMinMaxOptimized = getMinMaxOptimized;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));

package/package.json

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