gantt-canvas-chart 1.2.0 → 1.3.1

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.2.0
+ * gantt-canvas-chart v1.3.1
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -89,6 +89,8 @@ class GanttChart {
   mainCanvas;
   scrollDummy;
   tooltip;
+  scrolling;
+  showTooltip;
   headerCtx;
   mainCtx;
   timelineStart;
@@ -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;
@@ -177,10 +189,12 @@ 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.handleResize = this.handleResize.bind(this);
     this.init();
   }
   init() {
@@ -190,6 +204,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) => {
@@ -197,8 +216,7 @@ class GanttChart {
     });
   }
   setupEvents() {
-    this.container.addEventListener("scroll", this.boundHandleScroll);
-    this.handleResize = this.handleResize.bind(this);
+    this.container.addEventListener("scroll", this.handleScroll);
     if (window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(this.handleResize);
       setTimeout(() => {
@@ -206,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) {
@@ -218,6 +236,7 @@ class GanttChart {
       this.updatePixelsPerDay();
       this.calculateFullTimeline();
     }
+    this.updateLoadMoreConf();
     this.updateDimensions();
     this.render();
   }
@@ -236,13 +255,16 @@ 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.data = [];
+    this.taskMap.clear();
+    this.taskPositions.clear();
     this.container.remove();
   }
   calculateFullTimeline() {
-    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
     if (this.data.length === 0) {
@@ -306,7 +328,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;
@@ -314,7 +343,131 @@ 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");
+      } else if (this.hasMoreDataRight && atRightEdge && scrollLeft > this.lastScrollLeft) {
+        await this.loadMoreData("right");
+      } else if (this.hasMoreDataBottom && atBottomEdge && scrollTop > this.lastScrollTop) {
+        await this.loadMoreData("bottom");
+      }
+    } 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;
@@ -328,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;
@@ -349,19 +506,41 @@ 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;
+        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;
+        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_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);
+        }
         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));
+        }
+        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
         });
@@ -381,9 +560,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();
   }
@@ -393,82 +574,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":
+          upperText = DateUtils.format(calcDate, "yyyy年MM月");
+          nextDate = DateUtils.addDays(calcDate, 1);
+          break;
+        case "Week":
+          const weekStart = DateUtils.getStartOfWeek(calcDate);
+          upperText = DateUtils.format(weekStart, "yyyy年MM月");
+          nextDate = DateUtils.addDays(weekStart, 7);
+          break;
+        case "Month":
+          upperText = `${calcDate.getFullYear()}年`;
+          nextDate = DateUtils.addMonths(calcDate, 1);
+          break;
+        case "Year":
+          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(currentDate, 1);
+          nextDate = DateUtils.addDays(currentDateForLower, 1);
           break;
         case "Week":
-          nextDate = DateUtils.addDays(currentDate, 7);
+          nextDate = DateUtils.addDays(currentDateForLower, 7);
           break;
         case "Month":
-          nextDate = DateUtils.addMonths(currentDate, 1);
+          nextDate = DateUtils.addMonths(currentDateForLower, 1);
           break;
         case "Year":
-          nextDate = DateUtils.addMonths(currentDate, 6);
+          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";
@@ -478,10 +709,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();
@@ -491,6 +722,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);
@@ -538,9 +785,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) {
@@ -695,42 +942,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, taskY);
-      ctx.lineTo(pos.x_plan_start + width * percent_plan, 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) {
@@ -751,6 +991,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;
@@ -763,15 +1006,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;
@@ -785,6 +1029,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";
@@ -814,6 +1059,7 @@ class GanttChart {
   }
   handleMouseLeave() {
     this.tooltip.style.display = "none";
+    this.showTooltip = false;
   }
   /**
    * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
@@ -825,17 +1071,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,