gantt-canvas-chart 1.0.0

package/dist/index.es.js

@@ -0,0 +1,790 @@
+/*!
+ * gantt-canvas-chart v1.0.0
+ * (c) 2025-present chandq
+ * Released under the MIT License.
+ */
+
+class DateUtils {
+  static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
+  static format(date, format = "yyyy-MM-dd") {
+    const o = {
+      "M+": date.getMonth() + 1,
+      "d+": date.getDate(),
+      "h+": date.getHours(),
+      "m+": date.getMinutes(),
+      "s+": date.getSeconds(),
+      "q+": Math.floor((date.getMonth() + 3) / 3),
+      W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
+    };
+    if (/(y+)/.test(format))
+      format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (let k in o)
+      if (new RegExp("(" + k + ")").test(format))
+        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+    return format;
+  }
+  static addDays(date, days) {
+    const r = new Date(date);
+    r.setDate(r.getDate() + days);
+    return r;
+  }
+  static addMonths(date, months) {
+    const d = new Date(date);
+    d.setDate(1);
+    d.setMonth(d.getMonth() + months);
+    return d;
+  }
+  static addYears(date, years) {
+    const r = new Date(date);
+    r.setFullYear(r.getFullYear() + years);
+    return r;
+  }
+  static diffDays(date1, date2) {
+    return Math.round((new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()).getTime() - new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()).getTime()) / this.ONE_DAY_MS);
+  }
+  static diffDaysInclusive(date1, date2) {
+    return this.diffDays(date1, date2) + 1;
+  }
+  static getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+  static getWeekNumber(d) {
+    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+    return Math.ceil(((d - yearStart) / 864e5 + 1) / 7);
+  }
+  static getStartOfWeek(d) {
+    const date = new Date(d);
+    const day = date.getDay() || 7;
+    if (day !== 1)
+      date.setHours(-24 * (day - 1));
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+  static getStartOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+  }
+  static getStartOfYear(d) {
+    return new Date(d.getFullYear(), 0, 1);
+  }
+}
+function firstValidValue(...args) {
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] !== null && args[i] !== void 0) {
+      return args[i];
+    }
+  }
+  return null;
+}
+class GanttChart {
+  rootContainer;
+  container;
+  data;
+  config;
+  headerCanvas;
+  mainCanvas;
+  scrollDummy;
+  tooltip;
+  headerCtx;
+  mainCtx;
+  timelineStart;
+  timelineEnd;
+  pixelsPerDay;
+  scrollLeft;
+  scrollTop;
+  visibleDateRange;
+  today;
+  devicePixelRatio;
+  viewportWidth;
+  viewportHeight;
+  totalWidth;
+  totalHeight;
+  resizeObserver;
+  taskPositions;
+  taskMap;
+  constructor(rootContainer, data, config = {}) {
+    const container = document.createElement("div");
+    const scrollEl = document.createElement("div");
+    const headerCanvas = document.createElement("canvas");
+    const mainCanvas = document.createElement("canvas");
+    container.classList.add("__gantt-chart-container");
+    scrollEl.classList.add("__gantt-scroll-dummy");
+    headerCanvas.classList.add("__gantt-header-canvas");
+    mainCanvas.classList.add("__gantt-main-canvas");
+    container.appendChild(scrollEl);
+    container.appendChild(headerCanvas);
+    container.appendChild(mainCanvas);
+    rootContainer.classList.add("__gantt-chart-wrapper");
+    rootContainer.appendChild(container);
+    this.resizeObserver = null;
+    this.rootContainer = rootContainer;
+    this.container = container;
+    this.data = data;
+    this.config = {
+      viewMode: "Month",
+      rowHeight: 48,
+      headerHeight: 56,
+      showPlan: true,
+      showActual: true,
+      showRowLines: true,
+      showColLines: true,
+      showLeftRemark: false,
+      showRightRemark: false,
+      showCenterRemark: false,
+      showTooltip: true,
+      tooltipColor: "black",
+      offsetTop: 0,
+      offsetLeft: 0,
+      planBorderColor: "#caeed2",
+      actualBgColor: "#78c78f",
+      ...config
+    };
+    this.headerCanvas = headerCanvas;
+    this.mainCanvas = mainCanvas;
+    this.scrollDummy = scrollEl;
+    const tooltip = document.createElement("div");
+    tooltip.classList.add("__gantt-tooltip");
+    document.body.appendChild(tooltip);
+    this.tooltip = tooltip;
+    this.mainCanvas.style.top = `${this.config.headerHeight}px`;
+    this.headerCtx = this.headerCanvas.getContext("2d");
+    this.mainCtx = this.mainCanvas.getContext("2d");
+    this.timelineStart = /* @__PURE__ */ new Date();
+    this.timelineEnd = /* @__PURE__ */ new Date();
+    this.pixelsPerDay = 40;
+    this.scrollLeft = 0;
+    this.scrollTop = 0;
+    this.visibleDateRange = { start: /* @__PURE__ */ new Date(), end: /* @__PURE__ */ new Date() };
+    this.today = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+    this.devicePixelRatio = window.devicePixelRatio || 1;
+    this.viewportWidth = 0;
+    this.viewportHeight = 0;
+    this.totalWidth = 0;
+    this.totalHeight = 0;
+    this.taskPositions = /* @__PURE__ */ new Map();
+    this.taskMap = /* @__PURE__ */ new Map();
+    this.init();
+  }
+  init() {
+    this.buildTaskMap();
+    this.calculateFullTimeline();
+    this.updatePixelsPerDay();
+    this.setupEvents();
+    this.handleResize();
+  }
+  buildTaskMap() {
+    this.taskMap.clear();
+    this.data.forEach((row, rowIndex) => {
+      row.tasks.forEach((task) => this.taskMap.set(task.id, { row: rowIndex, task }));
+    });
+  }
+  setupEvents() {
+    this.container.addEventListener("scroll", this.handleScroll.bind(this));
+    this.handleResize = this.handleResize.bind(this);
+    if (window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(this.handleResize);
+      setTimeout(() => {
+        this.resizeObserver.observe(this.rootContainer);
+      }, 100);
+    }
+    if (this.config.showTooltip) {
+      this.mainCanvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+      this.mainCanvas.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
+    }
+  }
+  updateConfig(newConfig) {
+    Object.assign(this.config, newConfig);
+    if (newConfig.viewMode) {
+      this.container.scrollLeft = 0;
+      this.scrollLeft = 0;
+      this.updatePixelsPerDay();
+      this.calculateFullTimeline();
+    }
+    this.updateDimensions();
+    this.render();
+  }
+  setData(newData) {
+    this.data = newData;
+    this.buildTaskMap();
+    this.calculateFullTimeline();
+    this.updateDimensions();
+    this.render();
+  }
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+    this.container.remove();
+  }
+  calculateFullTimeline() {
+    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);
+    } else {
+      this.taskMap.forEach(({ task }) => {
+        const pStart = new Date(task.planStart);
+        const pEnd = new Date(task.planEnd);
+        if (pStart < minDate)
+          minDate = pStart;
+        if (pEnd > maxDate)
+          maxDate = pEnd;
+        if (task.actualStart) {
+          const aStart = new Date(task.actualStart);
+          const aEnd = new Date(task.actualEnd);
+          if (aStart < minDate)
+            minDate = aStart;
+          if (aEnd > maxDate)
+            maxDate = aEnd;
+        }
+      });
+    }
+    minDate = DateUtils.addDays(minDate, -7);
+    maxDate = DateUtils.addDays(maxDate, 14);
+    switch (this.config.viewMode) {
+      case "Year":
+        this.timelineStart = DateUtils.getStartOfYear(minDate);
+        this.timelineEnd = DateUtils.addDays(DateUtils.addYears(DateUtils.getStartOfYear(maxDate), 1), -1);
+        break;
+      case "Month":
+        this.timelineStart = DateUtils.getStartOfMonth(minDate);
+        this.timelineEnd = DateUtils.addDays(DateUtils.addMonths(DateUtils.getStartOfMonth(maxDate), 1), -1);
+        break;
+      case "Week":
+        this.timelineStart = DateUtils.getStartOfWeek(minDate);
+        this.timelineEnd = DateUtils.addDays(DateUtils.getStartOfWeek(maxDate), 7);
+        break;
+      case "Day":
+      default:
+        this.timelineStart = DateUtils.addDays(minDate, -3);
+        this.timelineEnd = DateUtils.addDays(maxDate, 3);
+        break;
+    }
+  }
+  updatePixelsPerDay() {
+    const viewFactors = { Day: 80, Week: 20, Month: 15, Year: 6 };
+    this.pixelsPerDay = viewFactors[this.config.viewMode];
+  }
+  dateToX(date) {
+    return DateUtils.diffDays(this.timelineStart, date) * this.pixelsPerDay;
+  }
+  xToDate(x) {
+    return DateUtils.addDays(this.timelineStart, x / this.pixelsPerDay);
+  }
+  handleResize() {
+    this.viewportWidth = this.container.clientWidth;
+    this.viewportHeight = this.container.clientHeight;
+    this.mainCanvas.style.top = `${this.config.headerHeight}px`;
+    this.setupCanvas(this.headerCanvas, this.viewportWidth, this.config.headerHeight);
+    this.setupCanvas(this.mainCanvas, this.viewportWidth, this.viewportHeight - this.config.headerHeight);
+    this.updateDimensions();
+    this.render();
+  }
+  handleScroll(e) {
+    const target = e.target;
+    this.scrollLeft = target.scrollLeft;
+    this.scrollTop = target.scrollTop;
+    const event = new CustomEvent("ganttscroll", {
+      detail: { scrollTop: this.scrollTop, scrollLeft: this.scrollLeft }
+    });
+    this.container.dispatchEvent(event);
+    requestAnimationFrame(() => this.render());
+  }
+  setScrollTop(scrollTop) {
+    if (this.scrollTop !== scrollTop)
+      this.container.scrollTop = scrollTop;
+  }
+  updateVirtualRanges() {
+    const buffer = 200;
+    this.visibleDateRange = {
+      start: this.xToDate(this.scrollLeft - buffer),
+      end: this.xToDate(this.scrollLeft + this.viewportWidth + buffer)
+    };
+  }
+  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`;
+  }
+  setupCanvas(canvas, width, height) {
+    canvas.width = width * this.devicePixelRatio;
+    canvas.height = height * this.devicePixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext("2d");
+    ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+  }
+  calculateAllTaskPositions() {
+    this.taskPositions.clear();
+    for (let i = 0; i < this.data.length; i++) {
+      const row = this.data[i];
+      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));
+        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));
+        }
+        this.taskPositions.set(task.id, {
+          x_plan_start,
+          x_plan_end,
+          x_actual_start,
+          x_actual_end,
+          y: y + this.config.rowHeight * 0.5,
+          row: i
+        });
+      });
+    }
+  }
+  getIterationStartDate(date) {
+    switch (this.config.viewMode) {
+      case "Year":
+        return DateUtils.getStartOfYear(date);
+      case "Month":
+        return DateUtils.getStartOfMonth(date);
+      case "Week":
+        return DateUtils.getStartOfWeek(date);
+      case "Day":
+      default:
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+  }
+  render() {
+    this.updateVirtualRanges();
+    this.calculateAllTaskPositions();
+    this.renderHeader();
+    this.renderMain();
+  }
+  renderHeader() {
+    const ctx = this.headerCtx;
+    const h = this.config.headerHeight;
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.save();
+    ctx.translate(-this.scrollLeft, 0);
+    ctx.fillStyle = "#f9f9f9";
+    ctx.fillRect(this.scrollLeft, 0, this.viewportWidth, h);
+    ctx.textBaseline = "middle";
+    let currentDate = new Date(this.visibleDateRange.start);
+    currentDate = this.getIterationStartDate(currentDate);
+    let lastUpperText = "";
+    while (this.dateToX(currentDate) < this.scrollLeft - this.pixelsPerDay * 7) {
+      let nextDate;
+      switch (this.config.viewMode) {
+        case "Day":
+          nextDate = DateUtils.addDays(currentDate, 1);
+          break;
+        case "Week":
+          nextDate = DateUtils.addDays(currentDate, 7);
+          break;
+        case "Month":
+          nextDate = DateUtils.addMonths(currentDate, 1);
+          break;
+        case "Year":
+          nextDate = DateUtils.addMonths(currentDate, 6);
+          break;
+        default:
+          nextDate = DateUtils.addDays(currentDate, 1);
+          break;
+      }
+      if (nextDate.getTime() === currentDate.getTime()) {
+        currentDate = DateUtils.addDays(currentDate, 1);
+      } else {
+        currentDate = nextDate;
+      }
+    }
+    while (currentDate <= this.visibleDateRange.end) {
+      const x = this.dateToX(currentDate);
+      let upperText = "", lowerText = "", 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);
+          break;
+        case "Week":
+          const weekStart = DateUtils.getStartOfWeek(currentDate);
+          upperText = DateUtils.format(weekStart, "yyyy年MM月");
+          lowerText = `第${DateUtils.getWeekNumber(weekStart)}周`;
+          nextDate = DateUtils.addDays(weekStart, 7);
+          break;
+        case "Month":
+          upperText = `${currentDate.getFullYear()}年`;
+          lowerText = `${currentDate.getMonth() + 1}月`;
+          nextDate = DateUtils.addMonths(currentDate, 1);
+          break;
+        case "Year":
+          if (currentDate.getMonth() === 0 && currentDate.getDate() === 1) {
+            upperText = `${currentDate.getFullYear()}年`;
+            lowerText = `上半年`;
+            nextDate = DateUtils.addMonths(currentDate, 6);
+          } else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1) {
+            upperText = `${currentDate.getFullYear()}年`;
+            lowerText = `下半年`;
+            nextDate = DateUtils.addMonths(currentDate, 6);
+          } else {
+            currentDate = DateUtils.addDays(currentDate, 1);
+            continue;
+          }
+          break;
+      }
+      const unitWidth = this.dateToX(nextDate) - x;
+      if (upperText !== lastUpperText) {
+        ctx.fillStyle = "#333";
+        ctx.font = "bold 13px sans-serif";
+        ctx.textAlign = "left";
+        ctx.fillText(upperText, x + 5, h * 0.35);
+        lastUpperText = upperText;
+      }
+      ctx.fillStyle = "#666";
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(lowerText, x + unitWidth / 2, h * 0.7);
+      ctx.beginPath();
+      ctx.moveTo(x, h * 0.5);
+      ctx.lineTo(x, h);
+      ctx.strokeStyle = "#e0e0e0";
+      ctx.stroke();
+      if (nextDate.getTime() === currentDate.getTime()) {
+        currentDate = DateUtils.addDays(currentDate, 1);
+      } else {
+        currentDate = nextDate;
+      }
+    }
+    ctx.beginPath();
+    ctx.moveTo(this.scrollLeft, h - 0.5);
+    ctx.lineTo(this.scrollLeft + this.viewportWidth, h - 0.5);
+    ctx.strokeStyle = "#e0e0e0";
+    ctx.stroke();
+    ctx.restore();
+  }
+  renderMain() {
+    const ctx = this.mainCtx;
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    ctx.save();
+    ctx.translate(-this.scrollLeft, -this.scrollTop);
+    const { start: startDate, end: endDate } = this.visibleDateRange;
+    this.drawGrid(ctx, startDate, endDate);
+    this.drawToday(ctx);
+    this.drawAllDependencies(ctx);
+    this.drawAllTasks(ctx);
+    ctx.restore();
+  }
+  // Helper: Draw arrow
+  drawArrow(ctx, x, y, direction) {
+    const size = 6;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    if (direction === "right") {
+      ctx.lineTo(x - size, y - size * 0.6);
+      ctx.lineTo(x - size, y + size * 0.6);
+    } else if (direction === "down") {
+      ctx.lineTo(x - size * 0.6, y - size);
+      ctx.lineTo(x + size * 0.6, y - size);
+    } else if (direction === "up") {
+      ctx.lineTo(x - size * 0.6, y + size);
+      ctx.lineTo(x + size * 0.6, y + size);
+    }
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.fill();
+  }
+  drawAllDependencies(ctx) {
+    const lineColor = "#64748b";
+    const lineWidth = 1;
+    ctx.strokeStyle = lineColor;
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    this.taskMap.forEach(({ task }) => {
+      if (!task.dependencies || task.dependencies.length === 0)
+        return;
+      const toPos = this.taskPositions.get(task.id);
+      if (!toPos)
+        return;
+      const toRowIndex = this.taskMap.get(task.id).row;
+      task.dependencies.forEach((depId) => {
+        const fromPos = this.taskPositions.get(depId);
+        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 fromY = fromPos.y;
+        const toX = Math.min(toPos.x_plan_start, toPos.x_actual_start || toPos.x_plan_start);
+        const toY = toPos.y;
+        ctx.beginPath();
+        if (isAdjacent) {
+          const isDown = toRowIndex > fromRowIndex;
+          const rowH = this.config.rowHeight;
+          const fromY_Edge = fromY + (isDown ? rowH * 0.3 : -rowH * 0.3);
+          const toY_Edge = toY + (isDown ? -rowH * 0.3 : rowH * 0.3);
+          const midY = (fromY + toY) / 2;
+          ctx.moveTo(fromX, fromY_Edge);
+          ctx.lineTo(fromX, midY);
+          ctx.lineTo(toX, midY);
+          ctx.lineTo(toX, toY_Edge);
+          ctx.stroke();
+          this.drawArrow(ctx, toX, toY_Edge, isDown ? "down" : "up");
+        } else {
+          const gap = 15;
+          const exitX = fromX + gap;
+          ctx.moveTo(fromX, fromY);
+          if (toX > exitX + gap) {
+            ctx.lineTo(exitX, fromY);
+            ctx.lineTo(exitX, toY);
+            ctx.lineTo(toX, toY);
+            ctx.stroke();
+            this.drawArrow(ctx, toX, toY, "right");
+          } else {
+            const isDown = toRowIndex > fromRowIndex;
+            const rowH = this.config.rowHeight;
+            const targetGapY = toY - (isDown ? rowH / 2 : -rowH / 2);
+            const entryX = toX - gap;
+            ctx.lineTo(exitX, fromY);
+            ctx.lineTo(exitX, targetGapY);
+            ctx.lineTo(entryX, targetGapY);
+            ctx.lineTo(entryX, toY);
+            ctx.lineTo(toX, toY);
+            ctx.stroke();
+            this.drawArrow(ctx, toX, toY, "right");
+          }
+        }
+      });
+    });
+  }
+  drawAllTasks(ctx) {
+    ctx.textBaseline = "middle";
+    ctx.font = "12px Arial";
+    for (let i = 0; i < this.data.length; i++) {
+      const row = this.data[i];
+      const y = i * this.config.rowHeight;
+      if (y + this.config.rowHeight < this.scrollTop || y > this.scrollTop + this.viewportHeight)
+        continue;
+      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;
+        }
+        this.drawTask(ctx, task, y, pos);
+      });
+    }
+  }
+  drawGrid(ctx, startDate, endDate) {
+    ctx.strokeStyle = "#f0f0f0";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    if (this.config.showRowLines) {
+      for (let i = 0; i <= this.data.length; i++) {
+        const y = i * this.config.rowHeight;
+        if (y < this.scrollTop || y > this.scrollTop + this.viewportHeight)
+          continue;
+        ctx.moveTo(this.scrollLeft, y);
+        ctx.lineTo(this.scrollLeft + this.viewportWidth, y);
+      }
+    }
+    if (this.config.showColLines) {
+      let currentDate = startDate;
+      switch (this.config.viewMode) {
+        case "Day":
+          currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+          break;
+        case "Week":
+          currentDate = DateUtils.getStartOfWeek(startDate);
+          break;
+        case "Month":
+          currentDate = DateUtils.getStartOfMonth(startDate);
+          break;
+        case "Year":
+          currentDate = DateUtils.getStartOfYear(startDate);
+          break;
+      }
+      let nextDate;
+      while (this.dateToX(currentDate) < this.scrollLeft - this.pixelsPerDay * 7) {
+        switch (this.config.viewMode) {
+          case "Day":
+            nextDate = DateUtils.addDays(currentDate, 1);
+            break;
+          case "Week":
+            nextDate = DateUtils.addDays(currentDate, 7);
+            break;
+          case "Month":
+            nextDate = DateUtils.addMonths(currentDate, 1);
+            break;
+          case "Year":
+            nextDate = currentDate.getMonth() === 0 && currentDate.getDate() === 1 ? DateUtils.addMonths(currentDate, 6) : DateUtils.addMonths(currentDate, 6);
+            break;
+          default:
+            nextDate = DateUtils.addDays(currentDate, 1);
+            break;
+        }
+        currentDate = nextDate;
+      }
+      while (currentDate <= endDate) {
+        const x = this.dateToX(currentDate);
+        ctx.moveTo(x, this.scrollTop);
+        ctx.lineTo(x, this.scrollTop + this.viewportHeight);
+        switch (this.config.viewMode) {
+          case "Day":
+            nextDate = DateUtils.addDays(currentDate, 1);
+            break;
+          case "Week":
+            nextDate = DateUtils.addDays(currentDate, 7);
+            break;
+          case "Month":
+            nextDate = DateUtils.addMonths(currentDate, 1);
+            break;
+          case "Year":
+            if (currentDate.getMonth() === 0 && currentDate.getDate() === 1)
+              nextDate = DateUtils.addMonths(currentDate, 6);
+            else if (currentDate.getMonth() === 6 && currentDate.getDate() === 1)
+              nextDate = DateUtils.addMonths(currentDate, 6);
+            else
+              nextDate = DateUtils.addDays(currentDate, 1);
+            break;
+          default:
+            nextDate = DateUtils.addDays(currentDate, 1);
+            break;
+        }
+        if (nextDate.getTime() === currentDate.getTime())
+          currentDate = DateUtils.addDays(currentDate, 1);
+        else
+          currentDate = nextDate;
+      }
+    }
+    ctx.stroke();
+  }
+  drawToday(ctx) {
+    const x = this.dateToX(this.today);
+    if (x >= this.scrollLeft && x <= this.scrollLeft + this.viewportWidth) {
+      ctx.strokeStyle = "#ff4d4f";
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(x, this.scrollTop);
+      ctx.lineTo(x, this.scrollTop + this.viewportHeight);
+      ctx.stroke();
+    }
+  }
+  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;
+    if (this.config.showActual && pos.x_actual_start) {
+      const aWidth = (pos.x_actual_end ? pos.x_actual_end : pos.x_plan_end) - pos.x_actual_start;
+      ctx.fillStyle = task.actualBgColor ? task.actualBgColor : this.config.actualBgColor;
+      ctx.fillRect(pos.x_actual_start, taskY, aWidth, taskHeight);
+    }
+    if (this.config.showPlan && pos.x_plan_start && pos.x_plan_end) {
+      ctx.strokeStyle = task.planBorderColor ? task.planBorderColor : this.config.planBorderColor;
+      ctx.lineWidth = 4;
+      ctx.beginPath();
+      ctx.moveTo(pos.x_plan_start, taskY);
+      ctx.lineTo(pos.x_plan_start + width, taskY);
+      ctx.stroke();
+    }
+    ctx.fillStyle = "#333";
+    if (this.config.showLeftRemark && task.leftRemark) {
+      ctx.textAlign = "right";
+      ctx.fillText(task.leftRemark, Math.min(...[pos.x_plan_start, pos.x_actual_start].filter((val) => val !== null && val !== void 0)) - 8, textY);
+    }
+    if (this.config.showRightRemark && task.rightRemark) {
+      ctx.textAlign = "left";
+      ctx.fillText(task.rightRemark, Math.max(...[pos.x_plan_end, pos.x_actual_end].filter((val) => val !== null && val !== void 0)) + 8, textY);
+    }
+    if (this.config.showCenterRemark && task.centerRemark) {
+      const centerX = pos.x_actual_start + (pos.x_actual_end - pos.x_actual_start) / 2;
+      ctx.textAlign = "center";
+      ctx.fillText(task.centerRemark, centerX, textY, pos.x_actual_end - pos.x_actual_start);
+    }
+  }
+  getTaskStyles(task) {
+    let styles = { planBorder: "#2563eb", actualBg: "#3b82f6" };
+    if (task.styleClass === "demo1-task") {
+      styles.planBorder = "#fb923c";
+      styles.actualBg = "#fdba74";
+    }
+    if (task.styleClass === "demo2-plan") {
+      styles.planBorder = "#22c55e";
+    }
+    if (task.styleClass === "demo2-completed") {
+      styles.actualBg = "#86efac";
+    }
+    if (task.styleClass === "demo2-leave") {
+      styles.actualBg = "#f43f5e";
+    }
+    return styles;
+  }
+  handleMouseMove(e) {
+    const rect = this.mainCanvas.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const chartX = mouseX + this.scrollLeft;
+    const chartY = mouseY + this.scrollTop;
+    const rowIndex = Math.floor(chartY / this.config.rowHeight);
+    const date = this.xToDate(chartX);
+    if (rowIndex < 0 || rowIndex >= this.data.length)
+      return this.handleMouseLeave();
+    const row = this.data[rowIndex];
+    const overlappingTasks = row.tasks.filter((task) => {
+      const pStart = new Date(task.planStart), pEnd = DateUtils.addDays(new Date(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);
+        if (date >= aStart && date < aEnd)
+          return true;
+      }
+      return false;
+    });
+    if (overlappingTasks.length === 0)
+      return this.handleMouseLeave();
+    let html = `<strong>${row.name}</strong> (${DateUtils.format(date, "yyyy-MM-dd")})<hr class="__gantt_tooltip-divider">`;
+    overlappingTasks.forEach((task) => html += this.getTaskTooltipHtml(task));
+    this.tooltip.innerHTML = html;
+    this.tooltip.style.display = "block";
+    if (this.config.tooltipColor === "white") {
+      this.tooltip.style.background = "#fff";
+      this.tooltip.style.color = "#000";
+    }
+    const tipRect = this.tooltip.getBoundingClientRect();
+    let x = e.clientX + 15, y = e.clientY + 15;
+    if (x + tipRect.width > window.innerWidth)
+      x = e.clientX - 15 - tipRect.width;
+    if (y + tipRect.height > window.innerHeight)
+      y = e.clientY - 15 - tipRect.height;
+    this.tooltip.style.left = `${x + this.config.offsetLeft}px`;
+    this.tooltip.style.top = `${y + this.config.offsetTop}px`;
+  }
+  getTaskTooltipHtml(task) {
+    if (task.type === "leave") {
+      const days = DateUtils.diffDaysInclusive(new Date(task.actualStart), new Date(task.actualEnd));
+      return `<div><span style="color: ${firstValidValue(task.actualBgColor, this.config.actualBgColor, "#f43f5e")};">■</span> <strong>${task.name} (${days}天)</strong><br><span class="__gantt_tooltip-indent">${task.actualStart} 到 ${task.actualEnd}</span></div>`;
+    }
+    let html = `<div><span style="color: ${firstValidValue(task.actualBgColor, this.config.actualBgColor, this.config.planBorderColor, this.getTaskStyles(task).planBorder)};">■</span> <strong>${task.name}</strong><br>`;
+    if (this.config.showPlan) {
+      const days = DateUtils.diffDaysInclusive(new Date(task.planStart), new Date(task.planEnd));
+      html += `<span class="__gantt_tooltip-indent">计划: ${task.planStart} - ${task.planEnd} (${days}天)</span><br>`;
+    }
+    if (this.config.showActual && task.actualStart) {
+      const days = DateUtils.diffDaysInclusive(new Date(task.actualStart), new Date(task.actualEnd));
+      html += `<span class="__gantt_tooltip-indent">实际: ${task.actualStart} - ${task.actualEnd} (${days}天)</span><br>`;
+    }
+    return html + "</div>";
+  }
+  handleMouseLeave() {
+    this.tooltip.style.display = "none";
+  }
+}
+export {
+  GanttChart
+};