gantt-canvas-chart 1.1.1 → 1.3.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.1.1
+ * gantt-canvas-chart v1.3.0
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -89,12 +89,14 @@ class GanttChart {
   mainCanvas;
   scrollDummy;
   tooltip;
+  scrolling;
+  showTooltip;
   headerCtx;
   mainCtx;
   timelineStart;
   timelineEnd;
   minDate;
-  // private maxDate: Date | null;
+  maxDate;
   pixelsPerDay;
   scrollLeft;
   scrollTop;
@@ -108,9 +110,14 @@ class GanttChart {
   resizeObserver;
   taskPositions;
   taskMap;
-  boundHandleMouseMove;
-  boundHandleMouseLeave;
-  boundHandleScroll;
+  isLoadingData = false;
+  hasMoreDataLeft = true;
+  hasMoreDataRight = true;
+  hasMoreDataBottom = true;
+  lastScrollLeft = 0;
+  lastScrollTop = 0;
+  onDataLoad = null;
+  scrollLoadTimer = null;
   constructor(rootContainer, data, config = {}) {
     const container = document.createElement("div");
     const scrollEl = document.createElement("div");
@@ -129,6 +136,8 @@ class GanttChart {
     this.rootContainer = rootContainer;
     this.container = container;
     this.data = data;
+    this.scrolling = false;
+    this.showTooltip = false;
     this.config = {
       viewMode: "Month",
       rowHeight: 48,
@@ -146,11 +155,14 @@ class GanttChart {
       todayColor: "#ff4d4f",
       offsetTop: 0,
       offsetLeft: 0,
+      enabledLoadMore: [],
       viewFactors: { Day: 80, Week: 20, Month: 15, Year: 6 },
       planBorderColor: "#C1EFCF",
       actualBgColor: "#5AC989",
+      headerBgColor: "#f9f9f9",
       ...config
     };
+    this.updateLoadMoreConf();
     this.headerCanvas = headerCanvas;
     this.mainCanvas = mainCanvas;
     this.scrollDummy = scrollEl;
@@ -164,6 +176,7 @@ class GanttChart {
     this.timelineStart = /* @__PURE__ */ new Date();
     this.timelineEnd = /* @__PURE__ */ new Date();
     this.minDate = null;
+    this.maxDate = null;
     this.pixelsPerDay = 40;
     this.scrollLeft = 0;
     this.scrollTop = 0;
@@ -176,10 +189,11 @@ class GanttChart {
     this.totalHeight = 0;
     this.taskPositions = /* @__PURE__ */ new Map();
     this.taskMap = /* @__PURE__ */ new Map();
-    this.boundHandleMouseMove = this.handleMouseMove.bind(this);
-    this.boundHandleMouseLeave = this.handleMouseLeave.bind(this);
-    this.boundHandleScroll = this.handleScroll.bind(this);
-    this.scrollToStartDate = this.scrollToStartDate.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.horizontalScrollTo = this.horizontalScrollTo.bind(this);
+    this.verticalScrollTo = this.verticalScrollTo.bind(this);
     this.init();
   }
   init() {
@@ -189,6 +203,11 @@ class GanttChart {
     this.setupEvents();
     this.handleResize();
   }
+  updateLoadMoreConf() {
+    this.hasMoreDataLeft = this.config.enabledLoadMore.includes("left");
+    this.hasMoreDataRight = this.config.enabledLoadMore.includes("right");
+    this.hasMoreDataBottom = this.config.enabledLoadMore.includes("bottom");
+  }
   buildTaskMap() {
     this.taskMap.clear();
     this.data.forEach((row, rowIndex) => {
@@ -196,7 +215,7 @@ class GanttChart {
     });
   }
   setupEvents() {
-    this.container.addEventListener("scroll", this.boundHandleScroll);
+    this.container.addEventListener("scroll", this.handleScroll);
     this.handleResize = this.handleResize.bind(this);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
@@ -205,8 +224,8 @@ class GanttChart {
       }, 100);
     }
     if (this.config.showTooltip) {
-      this.mainCanvas.addEventListener("mousemove", this.boundHandleMouseMove);
-      this.mainCanvas.addEventListener("mouseleave", this.boundHandleMouseLeave);
+      this.mainCanvas.addEventListener("mousemove", this.handleMouseMove);
+      this.mainCanvas.addEventListener("mouseleave", this.handleMouseLeave);
     }
   }
   updateConfig(newConfig) {
@@ -217,6 +236,7 @@ class GanttChart {
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
+    this.updateLoadMoreConf();
     this.updateDimensions();
     this.render();
   }
@@ -235,17 +255,18 @@ class GanttChart {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
     }
-    this.container.removeEventListener("scroll", this.boundHandleScroll);
-    this.mainCanvas.removeEventListener("mousemove", this.boundHandleMouseMove);
-    this.mainCanvas.removeEventListener("mouseleave", this.boundHandleMouseLeave);
+    this.container.removeEventListener("scroll", this.handleScroll);
+    this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
+    this.mainCanvas.removeEventListener("mouseleave", this.handleMouseLeave);
     this.container.remove();
   }
   calculateFullTimeline() {
+    const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
     if (this.data.length === 0) {
       minDate = /* @__PURE__ */ new Date();
-      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 30);
+      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
         const pStart = new Date(task.planStart);
@@ -261,8 +282,11 @@ class GanttChart {
       });
     }
     this.minDate = minDate;
-    minDate = DateUtils.addDays(minDate, -7);
-    maxDate = DateUtils.addDays(maxDate, 14);
+    this.maxDate = maxDate;
+    const minYear = minDate.getFullYear();
+    const maxYear = maxDate.getFullYear();
+    minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
+    maxDate = DateUtils.addDays(maxYear === 1e3 ? new Date(currentYear + 1, 0, 1) : maxDate, 14);
     switch (this.config.viewMode) {
       case "Year":
         this.timelineStart = DateUtils.getStartOfYear(minDate);
@@ -301,7 +325,14 @@ class GanttChart {
     this.updateDimensions();
     this.render();
   }
+  // Add this method to register the data loading callback
+  setOnDataLoadCallback(callback) {
+    this.onDataLoad = callback;
+  }
   handleScroll(e) {
+    if (this.showTooltip) {
+      this.handleMouseLeave();
+    }
     const target = e.target;
     this.scrollLeft = target.scrollLeft;
     this.scrollTop = target.scrollTop;
@@ -309,7 +340,134 @@ class GanttChart {
       detail: { scrollTop: this.scrollTop, scrollLeft: this.scrollLeft }
     });
     this.container.dispatchEvent(event);
-    requestAnimationFrame(() => this.render());
+    if (this.config.enabledLoadMore.length > 0) {
+      if (this.scrollLoadTimer !== null) {
+        clearTimeout(this.scrollLoadTimer);
+        this.scrollLoadTimer = null;
+      }
+      this.scrollLoadTimer = window.setTimeout(() => {
+        this.checkScrollLoad();
+        this.scrollLoadTimer = null;
+      }, 100);
+    }
+    requestAnimationFrame(() => {
+      this.scrolling = true;
+      this.render(true);
+      this.scrolling = false;
+    });
+  }
+  //  checkScrollLoad method
+  async checkScrollLoad() {
+    if (this.isLoadingData || !this.onDataLoad) {
+      return;
+    }
+    const scrollLeft = this.scrollLeft;
+    const scrollTop = this.scrollTop;
+    const viewportWidth = this.viewportWidth;
+    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;
+    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;
+      this.lastScrollTop = scrollTop;
+    }
+  }
+  // Add this method to reset scroll loading state
+  resetScrollLoadingState() {
+    this.hasMoreDataLeft = true;
+    this.hasMoreDataRight = true;
+    this.hasMoreDataBottom = true;
+    this.lastScrollLeft = 0;
+    this.lastScrollTop = 0;
+    if (this.scrollLoadTimer !== null) {
+      clearTimeout(this.scrollLoadTimer);
+      this.scrollLoadTimer = null;
+    }
+  }
+  // Add this new method to load additional data
+  async loadMoreData(direction) {
+    if (this.isLoadingData || !this.onDataLoad) {
+      return;
+    }
+    this.isLoadingData = true;
+    try {
+      let newData = null;
+      switch (direction) {
+        case "left":
+          newData = await this.onDataLoad("left", { date: this.minDate });
+          if (newData && newData.length > 0) {
+            this.prependData(newData);
+          } else {
+            this.hasMoreDataLeft = false;
+          }
+          break;
+        case "right":
+          newData = await this.onDataLoad("right", { date: this.maxDate });
+          if (newData && newData.length > 0) {
+            this.appendData(newData);
+          } else {
+            this.hasMoreDataRight = false;
+          }
+          break;
+        case "bottom":
+          const currentRowCount = this.data.length;
+          newData = await this.onDataLoad("bottom", { offset: currentRowCount });
+          if (newData && newData.length > 0) {
+            this.appendRows(newData);
+          } else {
+            this.hasMoreDataBottom = false;
+          }
+          break;
+      }
+      if (newData && newData.length > 0) {
+        this.buildTaskMap();
+        this.calculateFullTimeline();
+        this.updateDimensions();
+        this.render();
+      }
+    } catch (error) {
+      console.error("Error loading additional data:", error);
+    } finally {
+      this.isLoadingData = false;
+    }
+  }
+  // Add this method to append data to the right
+  appendData(newData) {
+    newData.forEach((newRow, index) => {
+      if (index < this.data.length) {
+        this.data[index].tasks = [...this.data[index].tasks, ...newRow.tasks];
+      } else {
+        this.data.push(newRow);
+      }
+    });
+  }
+  // Add this method to prepend data to the left
+  prependData(newData) {
+    newData.forEach((newRow, index) => {
+      if (index < this.data.length) {
+        this.data[index].tasks = [...newRow.tasks, ...this.data[index].tasks];
+      } else {
+        this.data.push(newRow);
+      }
+    });
+  }
+  // Add this method to append rows to the bottom
+  appendRows(newData) {
+    this.data.push(...newData);
   }
   setScrollTop(scrollTop) {
     if (this.scrollTop !== scrollTop) this.container.scrollTop = scrollTop;
@@ -323,10 +481,14 @@ class GanttChart {
   }
   updateDimensions() {
     const totalDays = DateUtils.diffDays(this.timelineStart, this.timelineEnd) + 1;
-    this.totalWidth = totalDays * this.pixelsPerDay;
-    this.totalHeight = this.data.length * this.config.rowHeight + this.config.headerHeight;
-    this.scrollDummy.style.width = `${this.totalWidth}px`;
-    this.scrollDummy.style.height = `${this.totalHeight}px`;
+    const newTotalWidth = totalDays * this.pixelsPerDay;
+    const newTotalHeight = this.data.length * this.config.rowHeight + this.config.headerHeight;
+    if (this.totalWidth !== newTotalWidth || this.totalHeight !== newTotalHeight) {
+      this.totalWidth = newTotalWidth;
+      this.totalHeight = newTotalHeight;
+      this.scrollDummy.style.width = `${this.totalWidth}px`;
+      this.scrollDummy.style.height = `${this.totalHeight}px`;
+    }
   }
   setupCanvas(canvas, width, height) {
     canvas.width = width * this.devicePixelRatio;
@@ -344,13 +506,13 @@ class GanttChart {
       const y = i * this.config.rowHeight;
       row.tasks.forEach((task) => {
         const x_plan_start = this.dateToX(new Date(task.planStart));
-        const x_plan_end = this.dateToX(DateUtils.addDays(new Date(task.planEnd), 1));
+        const x_plan_end = this.dateToX(DateUtils.addDays(task.planEnd, 1));
         let x_actual_start = null, x_actual_end = null;
         if (task.actualStart) {
           x_actual_start = this.dateToX(new Date(task.actualStart));
         }
         if (task.actualEnd) {
-          x_actual_end = this.dateToX(DateUtils.addDays(new Date(task.actualEnd), 1));
+          x_actual_end = this.dateToX(DateUtils.addDays(task.actualEnd, 1));
         }
         this.taskPositions.set(task.id, {
           x_plan_start,
@@ -376,9 +538,11 @@ class GanttChart {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
   }
-  render() {
+  render(scrolling = false) {
     this.updateVirtualRanges();
-    this.calculateAllTaskPositions();
+    if (!scrolling) {
+      this.calculateAllTaskPositions();
+    }
     this.renderHeader();
     this.renderMain();
   }
@@ -388,82 +552,132 @@ class GanttChart {
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.save();
     ctx.translate(-this.scrollLeft, 0);
-    ctx.fillStyle = "#f9f9f9";
+    ctx.fillStyle = this.config.headerBgColor;
     ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
     ctx.textBaseline = "middle";
     ctx.textRendering = "optimizeLegibility";
     let currentDate = new Date(this.visibleDateRange.start);
     currentDate = this.getIterationStartDate(currentDate);
-    let lastUpperText = "";
-    while (this.dateToX(currentDate) < this.scrollLeft - this.pixelsPerDay * 7) {
+    const visibleBlocks = [];
+    let calcDate = new Date(currentDate);
+    while (calcDate <= this.visibleDateRange.end) {
       let nextDate;
+      let upperText = "";
       switch (this.config.viewMode) {
         case "Day":
-          nextDate = DateUtils.addDays(currentDate, 1);
+          upperText = DateUtils.format(calcDate, "yyyy年MM月");
+          nextDate = DateUtils.addDays(calcDate, 1);
           break;
         case "Week":
-          nextDate = DateUtils.addDays(currentDate, 7);
+          const weekStart = DateUtils.getStartOfWeek(calcDate);
+          upperText = DateUtils.format(weekStart, "yyyy年MM月");
+          nextDate = DateUtils.addDays(weekStart, 7);
           break;
         case "Month":
-          nextDate = DateUtils.addMonths(currentDate, 1);
+          upperText = `${calcDate.getFullYear()}年`;
+          nextDate = DateUtils.addMonths(calcDate, 1);
           break;
         case "Year":
-          nextDate = DateUtils.addMonths(currentDate, 6);
+          if (calcDate.getMonth() === 0 && calcDate.getDate() === 1) {
+            upperText = `${calcDate.getFullYear()}年`;
+            nextDate = DateUtils.addMonths(calcDate, 6);
+          } else if (calcDate.getMonth() === 6 && calcDate.getDate() === 1) {
+            upperText = `${calcDate.getFullYear()}年`;
+            nextDate = DateUtils.addMonths(calcDate, 6);
+          } else {
+            calcDate = DateUtils.addDays(calcDate, 1);
+            continue;
+          }
+          break;
+        default:
+          nextDate = DateUtils.addDays(calcDate, 1);
+          break;
+      }
+      const startX = this.dateToX(calcDate);
+      const endX = this.dateToX(nextDate);
+      visibleBlocks.push({
+        startX,
+        endX,
+        text: upperText,
+        yPos: h * 0.35
+      });
+      calcDate = nextDate;
+    }
+    let currentDateForLower = new Date(currentDate);
+    while (this.dateToX(currentDateForLower) < this.scrollLeft - this.pixelsPerDay * 7) {
+      let nextDate;
+      switch (this.config.viewMode) {
+        case "Day":
+          nextDate = DateUtils.addDays(currentDateForLower, 1);
+          break;
+        case "Week":
+          nextDate = DateUtils.addDays(currentDateForLower, 7);
+          break;
+        case "Month":
+          nextDate = DateUtils.addMonths(currentDateForLower, 1);
+          break;
+        case "Year":
+          nextDate = DateUtils.addMonths(currentDateForLower, 6);
           break;
         default:
-          nextDate = DateUtils.addDays(currentDate, 1);
+          nextDate = DateUtils.addDays(currentDateForLower, 1);
           break;
       }
-      if (nextDate.getTime() === currentDate.getTime()) {
-        currentDate = DateUtils.addDays(currentDate, 1);
+      if (nextDate.getTime() === currentDateForLower.getTime()) {
+        currentDateForLower = DateUtils.addDays(currentDateForLower, 1);
       } else {
-        currentDate = nextDate;
+        currentDateForLower = nextDate;
       }
     }
-    while (currentDate <= this.visibleDateRange.end) {
-      const x = this.dateToX(currentDate);
-      let upperText = "", lowerText = "", nextDate;
+    const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
+    ctx.fillStyle = "#333";
+    ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+    ctx.textAlign = "left";
+    groupedBlocks.forEach((group) => {
+      const visibleStart = Math.max(group.startX, this.scrollLeft);
+      const visibleEnd = Math.min(group.endX, this.scrollLeft + this.viewportWidth);
+      if (visibleEnd > visibleStart) {
+        ctx.fillStyle = this.config.headerBgColor;
+        ctx.fillRect(visibleStart, 0, visibleEnd - visibleStart, h * 0.5);
+        ctx.fillStyle = "#333";
+        ctx.fillText(group.text, visibleStart + 5, group.yPos);
+      }
+    });
+    while (currentDateForLower <= this.visibleDateRange.end) {
+      const x = this.dateToX(currentDateForLower);
+      let lowerText = "";
+      let nextDate;
       switch (this.config.viewMode) {
         case "Day":
-          upperText = DateUtils.format(currentDate, "yyyy年MM月");
-          lowerText = `${DateUtils.format(currentDate, "d")} ${DateUtils.format(currentDate, "W")}`;
-          nextDate = DateUtils.addDays(currentDate, 1);
+          lowerText = `${DateUtils.format(currentDateForLower, "d")} ${DateUtils.format(currentDateForLower, "W")}`;
+          nextDate = DateUtils.addDays(currentDateForLower, 1);
           break;
         case "Week":
-          const weekStart = DateUtils.getStartOfWeek(currentDate);
-          upperText = DateUtils.format(weekStart, "yyyy年MM月");
+          const weekStart = DateUtils.getStartOfWeek(currentDateForLower);
           lowerText = `第${DateUtils.getWeekNumber(weekStart)}周`;
           nextDate = DateUtils.addDays(weekStart, 7);
           break;
         case "Month":
-          upperText = `${currentDate.getFullYear()}年`;
-          lowerText = `${currentDate.getMonth() + 1}月`;
-          nextDate = DateUtils.addMonths(currentDate, 1);
+          lowerText = `${currentDateForLower.getMonth() + 1}月`;
+          nextDate = DateUtils.addMonths(currentDateForLower, 1);
           break;
         case "Year":
-          if (currentDate.getMonth() === 0 && currentDate.getDate() === 1) {
-            upperText = `${currentDate.getFullYear()}年`;
+          if (currentDateForLower.getMonth() === 0 && currentDateForLower.getDate() === 1) {
             lowerText = `上半年`;
-            nextDate = DateUtils.addMonths(currentDate, 6);
-          } else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1) {
-            upperText = `${currentDate.getFullYear()}年`;
+            nextDate = DateUtils.addMonths(currentDateForLower, 6);
+          } else if (currentDateForLower.getMonth() === 6 && currentDateForLower.getDate() === 1) {
             lowerText = `下半年`;
-            nextDate = DateUtils.addMonths(currentDate, 6);
+            nextDate = DateUtils.addMonths(currentDateForLower, 6);
           } else {
-            currentDate = DateUtils.addDays(currentDate, 1);
+            currentDateForLower = DateUtils.addDays(currentDateForLower, 1);
             continue;
           }
           break;
+        default:
+          nextDate = DateUtils.addDays(currentDateForLower, 1);
+          break;
       }
       const unitWidth = this.dateToX(nextDate) - x;
-      if (upperText !== lastUpperText) {
-        ctx.fillStyle = "#333";
-        ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
-        ctx.textRendering = "optimizeLegibility";
-        ctx.textAlign = "left";
-        ctx.fillText(upperText, x + 5, h * 0.35);
-        lastUpperText = upperText;
-      }
       ctx.fillStyle = "#000412";
       ctx.font = '14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
       ctx.textAlign = "center";
@@ -473,10 +687,10 @@ class GanttChart {
       ctx.lineTo(x, h);
       ctx.strokeStyle = "#e0e0e0";
       ctx.stroke();
-      if (nextDate.getTime() === currentDate.getTime()) {
-        currentDate = DateUtils.addDays(currentDate, 1);
+      if (nextDate.getTime() === currentDateForLower.getTime()) {
+        currentDateForLower = DateUtils.addDays(currentDateForLower, 1);
       } else {
-        currentDate = nextDate;
+        currentDateForLower = nextDate;
       }
     }
     ctx.beginPath();
@@ -486,6 +700,22 @@ class GanttChart {
     ctx.stroke();
     ctx.restore();
   }
+  // Helper method to group consecutive blocks with same text
+  groupConsecutiveBlocks(blocks) {
+    if (blocks.length === 0) return [];
+    const grouped = [];
+    let currentGroup = { ...blocks[0] };
+    for (let i = 1; i < blocks.length; i++) {
+      if (blocks[i].text === currentGroup.text && Math.abs(blocks[i].startX - currentGroup.endX) < 1) {
+        currentGroup.endX = blocks[i].endX;
+      } else {
+        grouped.push(currentGroup);
+        currentGroup = { ...blocks[i] };
+      }
+    }
+    grouped.push(currentGroup);
+    return grouped;
+  }
   renderMain() {
     const ctx = this.mainCtx;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -681,7 +911,7 @@ class GanttChart {
     const x = this.dateToX(this.today);
     if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
       ctx.strokeStyle = this.config.todayColor;
-      ctx.lineWidth = 2;
+      ctx.lineWidth = 1;
       ctx.beginPath();
       ctx.moveTo(x, this.scrollTop);
       ctx.lineTo(x, this.scrollTop + this.viewportHeight);
@@ -709,8 +939,8 @@ class GanttChart {
       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, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan, taskY);
+      ctx.moveTo(pos.x_plan_start + 2, taskY);
+      ctx.lineTo(pos.x_plan_start + width * percent_plan - 2, taskY);
       ctx.stroke();
     }
     ctx.fillStyle = "#000";
@@ -746,6 +976,9 @@ class GanttChart {
     return styles;
   }
   handleMouseMove(e) {
+    if (this.scrolling) {
+      return;
+    }
     const rect = this.mainCanvas.getBoundingClientRect();
     const mouseX = e.clientX - rect.left;
     const mouseY = e.clientY - rect.top;
@@ -758,15 +991,16 @@ class GanttChart {
     if (this.config.tooltipFormat) {
       const htmlStr = this.config.tooltipFormat(row, date, this.config);
       if (!htmlStr) {
-        return this.handleMouseLeave();
+        this.handleMouseLeave();
+        return;
       }
       this.tooltip.innerHTML = htmlStr;
     } else {
       const overlappingTasks = row.tasks.filter((task) => {
-        const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(task.planEnd), 1);
+        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.actualStart) {
-          const aStart = new Date(task.actualStart), aEnd = DateUtils.addDays(new Date(task.actualEnd), 1);
+          const aStart = new Date(task.actualStart).setHours(0, 0, 0, 0), aEnd = DateUtils.addDays(task.actualEnd, 1);
           if (date >= aStart && date < aEnd) return true;
         }
         return false;
@@ -780,6 +1014,7 @@ class GanttChart {
       this.tooltip.innerHTML = html;
     }
     this.tooltip.style.display = "block";
+    this.showTooltip = true;
     if (this.config.tooltipColor === "white") {
       this.tooltip.style.background = "#fff";
       this.tooltip.style.color = "#000";
@@ -809,6 +1044,7 @@ class GanttChart {
   }
   handleMouseLeave() {
     this.tooltip.style.display = "none";
+    this.showTooltip = false;
   }
   /**
    * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
@@ -820,17 +1056,29 @@ class GanttChart {
     return diffMilliseconds * pixelsPerDay / DateUtils.ONE_DAY_MS;
   }
   /**
-   * scroll to specified date position, default to minDate
+   * horizontal scroll to specified date position, default to minDate
    *
    * @param date
    */
-  scrollToStartDate(date) {
+  horizontalScrollTo(date) {
     const startDate = date ? date : this.minDate;
     if (startDate) {
       const xPosition = this.dateToX(startDate);
       this.container.scrollTo({ left: xPosition - 80 });
     }
   }
+  /**
+   * vertical scroll to specified position
+   *
+   * @param  params
+   */
+  verticalScrollTo(params) {
+    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 });
+    }
+  }
 }
 export {
   DateUtils,