gantt-canvas-chart 1.0.0

package/dist/index.umd.js

@@ -0,0 +1,794 @@
+/*!
+ * gantt-canvas-chart v1.0.0
+ * (c) 2025-present chandq
+ * Released under the MIT License.
+ */
+
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.GanttChart = {}));
+})(this, (function(exports2) {
+  "use strict";
+  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";
+    }
+  }
+  exports2.GanttChart = GanttChart;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+}));