gantt-canvas-chart 1.2.0 → 1.3.1

package/dist/index.umd.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.
  */
@@ -93,6 +93,8 @@
     mainCanvas;
     scrollDummy;
     tooltip;
+    scrolling;
+    showTooltip;
     headerCtx;
     mainCtx;
     timelineStart;
@@ -112,9 +114,14 @@
     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");
@@ -133,6 +140,8 @@
       this.rootContainer = rootContainer;
       this.container = container;
       this.data = data;
+      this.scrolling = false;
+      this.showTooltip = false;
       this.config = {
         viewMode: "Month",
         rowHeight: 48,
@@ -150,11 +159,14 @@
         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;
@@ -181,10 +193,12 @@
       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() {
@@ -194,6 +208,11 @@
       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) => {
@@ -201,8 +220,7 @@
       });
     }
     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(() => {
@@ -210,8 +228,8 @@
         }, 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) {
@@ -222,6 +240,7 @@
         this.updatePixelsPerDay();
         this.calculateFullTimeline();
       }
+      this.updateLoadMoreConf();
       this.updateDimensions();
       this.render();
     }
@@ -240,13 +259,16 @@
       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) {
@@ -310,7 +332,14 @@
       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;
@@ -318,7 +347,131 @@
         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;
@@ -332,10 +485,14 @@
     }
     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;
@@ -353,19 +510,41 @@
         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
           });
@@ -385,9 +564,11 @@
           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();
     }
@@ -397,82 +578,132 @@
       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";
@@ -482,10 +713,10 @@
         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();
@@ -495,6 +726,22 @@
       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);
@@ -542,9 +789,9 @@
           if (!fromPos) return;
           const fromRowIndex = this.taskMap.get(depId).row;
           const isAdjacent = Math.abs(toRowIndex - fromRowIndex) === 1;
-          const fromX = Math.max(fromPos.x_plan_end, fromPos.x_actual_end || fromPos.x_plan_end);
+          const fromX = Math.max(fromPos.offset_x_plan_end, fromPos.offset_x_actual_end || fromPos.offset_x_plan_end);
           const fromY = fromPos.y;
-          const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+          const toX = Math.min(toPos.offset_x_plan_start, toPos.offset_x_actual_start || toPos.offset_x_plan_start);
           const toY = toPos.y;
           ctx.beginPath();
           if (isAdjacent) {
@@ -699,42 +946,35 @@
     }
     drawTask(ctx, task, y, pos) {
       const offset = 4;
-      const width = pos.x_plan_end - pos.x_plan_start;
       const taskY = y + this.config.rowHeight * 0.15 + offset;
       const taskHeight = this.config.rowHeight * 0.7 - offset;
       const textY = y + this.config.rowHeight / 2 + offset;
       const [offsetX_actual, percent_actual] = this.config.viewMode === "Day" && task.actualOffsetPercent ? task.actualOffsetPercent : [0, 1];
-      const [offsetX, percent_plan] = this.config.viewMode === "Day" && task.planOffsetPercent ? task.planOffsetPercent : [0, 1];
       if (this.config.showActual && pos.x_actual_start) {
         ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
-        const aWidth = (pos.x_actual_end ? pos.x_actual_end : this.dateToX(this.today)) - pos.x_actual_start;
-        pos.x_actual_start += aWidth * offsetX_actual;
-        pos.x_actual_end && (pos.x_actual_end = pos.x_actual_start + aWidth * percent_actual);
-        ctx.fillRect(Math.round(pos.x_actual_start), Math.round(taskY + 2), Math.round(aWidth * percent_actual), Math.round(taskHeight - 2));
+        ctx.fillRect(pos.offset_x_actual_start, Math.round(taskY + 2), Math.round(pos.x_actual_width * percent_actual), Math.round(taskHeight - 2));
       }
       if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
         ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
-        pos.x_plan_start += width * offsetX;
-        pos.x_plan_end && (pos.x_plan_end = pos.x_plan_start + width * percent_plan);
         ctx.lineWidth = 4;
         ctx.beginPath();
-        ctx.moveTo(pos.x_plan_start, 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) {
@@ -755,6 +995,9 @@
       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;
@@ -767,15 +1010,16 @@
       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;
@@ -789,6 +1033,7 @@
         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";
@@ -818,6 +1063,7 @@
     }
     handleMouseLeave() {
       this.tooltip.style.display = "none";
+      this.showTooltip = false;
     }
     /**
      * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
@@ -829,17 +1075,29 @@
       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 });
+      }
+    }
   }
   exports2.DateUtils = DateUtils;
   exports2.GanttChart = GanttChart;