apexgantt 3.2.0 → 3.4.0

package/README.md

@@ -357,14 +357,18 @@ ganttInstance.zoomOut();
 
 ## Events
 
-ApexGantt emits CustomEvents on the container element when tasks are updated through the dialog form.
-
-| Event                 | When                          | Detail                                        |
-| --------------------- | ----------------------------- | --------------------------------------------- |
-| `taskUpdate`          | Task is being updated         | `{ taskId, updates, updatedTask, timestamp }` |
-| `taskUpdateSuccess`   | Update completed successfully | `{ taskId, updatedTask, timestamp }`          |
-| `taskValidationError` | Form validation failed        | `{ taskId, errors, timestamp }`               |
-| `taskUpdateError`     | Update failed                 | `{ taskId, error, timestamp }`                |
+ApexGantt emits CustomEvents on the container element for various user interactions, allowing you to track and respond to changes in real-time.
+
+### Available Events
+
+| Event | When | Detail |
+| --- | --- | --- |
+| `taskUpdate` | Task is being updated | `{ taskId, updates, updatedTask, timestamp }` |
+| `taskUpdateSuccess` | Update completed successfully | `{ taskId, updatedTask, timestamp }` |
+| `taskValidationError` | Form validation failed | `{ taskId, errors, timestamp }` |
+| `taskUpdateError` | Update failed | `{ taskId, error, timestamp }` |
+| `taskDragged` | Task bar is dragged | `{ taskId, oldStartTime, oldEndTime, newStartTime, newEndTime, daysMoved, affectedChildTasks, timestamp }` |
+| `taskResized` | Task bar is resized | `{ taskId, resizeHandle, oldStartTime, oldEndTime, newStartTime, newEndTime, durationChange, timestamp }` |
 
 ### Events Usage
 

package/apexgantt.es.min.js

@@ -12929,6 +12929,32 @@ function getDefaultOptions(theme) {
   };
 }
 const DefaultOptions$1 = getDefaultOptions("light");
+const GanttEvents = {
+  /**
+   * emits when a task is being updated (before completion)
+   */
+  TASK_UPDATE: "taskUpdate",
+  /**
+   * emits when form validation fails
+   */
+  TASK_VALIDATION_ERROR: "taskValidationError",
+  /**
+   * emits after a task update completes successfully
+   */
+  TASK_UPDATE_SUCCESS: "taskUpdateSuccess",
+  /**
+   * emits when a task update fails
+   */
+  TASK_UPDATE_ERROR: "taskUpdateError",
+  /**
+   * emits when a task bar is dragged to a new position
+   */
+  TASK_DRAGGED: "taskDragged",
+  /**
+   * emits when a task bar is resized via handles
+   */
+  TASK_RESIZED: "taskResized"
+};
 class BarDragManager {
   constructor(taskId, options, viewMode, chartContext, dataManager) {
     this.taskId = taskId;
@@ -12940,6 +12966,8 @@ class BarDragManager {
       daysPerPixel: 0,
       initialLeft: 0,
       initialPosition: 0,
+      initialStartTime: "",
+      initialEndTime: "",
       isDragging: false,
       parentWidth: 0,
       parentX1: 0,
@@ -12970,6 +12998,8 @@ class BarDragManager {
         ...this.dragState,
         initialLeft: parseInt(barElement.style.left) || 0,
         initialPosition: e.clientX,
+        initialStartTime: this.task.startTime,
+        initialEndTime: this.task.endTime,
         isDragging: true,
         startX: e.clientX
       };
@@ -13016,10 +13046,47 @@ class BarDragManager {
       barElement.classList.remove("dragging");
       const currentWidth = parseInt(barElement.style.width) || 0;
       const { calculatedLeft, daysMoved } = this.calculateFinalPosition(e, currentWidth);
+      if (daysMoved === 0) {
+        this.dragState = {
+          ...this.dragState,
+          isDragging: false
+        };
+        return;
+      }
+      const newStart = dayjs(this.task.startTime).add(daysMoved, "day").format(this.options.inputDateFormat);
+      const newEnd = dayjs(this.task.endTime).add(daysMoved, "day").format(this.options.inputDateFormat);
+      const affectedChildTasks = this.dragState.childTasks.map((childTask) => ({
+        taskId: childTask.id,
+        newStartTime: dayjs(childTask.startTime).add(daysMoved, "day").format(this.options.inputDateFormat),
+        newEndTime: childTask.endTime ? dayjs(childTask.endTime).add(daysMoved, "day").format(this.options.inputDateFormat) : null
+      })).filter((child) => child.newEndTime !== null);
+      this.emitTaskDraggedEvent(daysMoved, newStart, newEnd, affectedChildTasks);
       this.updateTaskPosition(barElement, calculatedLeft, daysMoved, onUpdate);
       this.updateChildrenPositions(calculatedLeft, daysMoved, onUpdate);
     };
   }
+  emitTaskDraggedEvent(daysMoved, newStartTime, newEndTime, affectedChildTasks) {
+    const eventDetail = {
+      taskId: this.task.id,
+      oldStartTime: this.dragState.initialStartTime,
+      oldEndTime: this.dragState.initialEndTime,
+      newStartTime,
+      newEndTime,
+      daysMoved,
+      affectedChildTasks,
+      timestamp: Date.now()
+    };
+    const event = new CustomEvent(GanttEvents.TASK_DRAGGED, {
+      detail: eventDetail,
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    });
+    const chartContainer = this.chartContext.getChartContainer();
+    if (chartContainer) {
+      chartContainer.dispatchEvent(event);
+    }
+  }
   isOutOfBounds(currentLeft, currentWidth, dx2) {
     const { parentX1, parentX2 } = this.dragState;
     return dx2 < 0 && currentLeft <= parentX1 || dx2 > 0 && currentLeft + currentWidth >= parentX2;
@@ -13084,6 +13151,8 @@ class BarResizeManager {
       initialLeft: 0,
       initialPosition: 0,
       initialWidth: 0,
+      initialStartTime: "",
+      initialEndTime: "",
       isResizing: false,
       parentWidth: 0,
       parentX1: 0,
@@ -13130,6 +13199,11 @@ class BarResizeManager {
       barElement.classList.remove("resizing");
       const { daysPerPixel, initialLeft, initialPosition, initialWidth, parentX1, parentX2, resizeHandle } = this.interactionState;
       const dx2 = e.clientX - initialPosition;
+      const oldStartTime = this.interactionState.initialStartTime;
+      const oldEndTime = this.interactionState.initialEndTime;
+      let newStartTime = oldStartTime;
+      let newEndTime = oldEndTime;
+      let durationChange = 0;
       if (resizeHandle === "left") {
         let daysChange = Math.round(dx2 / daysPerPixel);
         let calculatedLeft = initialLeft + daysChange * daysPerPixel;
@@ -13143,10 +13217,19 @@ class BarResizeManager {
           calculatedLeft = initialLeft + initialWidth - daysPerPixel;
           daysChange = Math.round((calculatedLeft - initialLeft) / daysPerPixel);
         }
+        if (daysChange === 0) {
+          this.interactionState = {
+            ...this.interactionState,
+            isResizing: false,
+            resizeHandle: null
+          };
+          return;
+        }
         barElement.style.left = `${calculatedLeft}px`;
         barElement.style.width = `${calculatedWidth}px`;
-        const newStart = dayjs(this.task.startTime).add(daysChange, "day").format(this.options.inputDateFormat);
-        onUpdate == null ? void 0 : onUpdate(this.task.id, { startTime: newStart });
+        newStartTime = dayjs(this.task.startTime).add(daysChange, "day").format(this.options.inputDateFormat);
+        durationChange = -daysChange;
+        onUpdate == null ? void 0 : onUpdate(this.task.id, { startTime: newStartTime });
       } else {
         let daysWidth = Math.round(dx2 / daysPerPixel);
         let calculatedWidth = initialWidth + daysWidth * daysPerPixel;
@@ -13157,10 +13240,20 @@ class BarResizeManager {
           calculatedWidth = parentX2 - initialLeft;
           daysWidth = Math.round((calculatedWidth - initialWidth) / daysPerPixel);
         }
+        if (daysWidth === 0) {
+          this.interactionState = {
+            ...this.interactionState,
+            isResizing: false,
+            resizeHandle: null
+          };
+          return;
+        }
         barElement.style.width = `${calculatedWidth}px`;
-        const newEnd = dayjs(this.task.endTime).add(daysWidth, "day").format(this.options.inputDateFormat);
-        onUpdate == null ? void 0 : onUpdate(this.task.id, { endTime: newEnd });
+        newEndTime = dayjs(this.task.endTime).add(daysWidth, "day").format(this.options.inputDateFormat);
+        durationChange = daysWidth;
+        onUpdate == null ? void 0 : onUpdate(this.task.id, { endTime: newEndTime });
       }
+      this.emitTaskResizedEvent(resizeHandle, oldStartTime, oldEndTime, newStartTime, newEndTime, durationChange);
       this.dataManager.updateDependencyArrows(this.task.id, this.chartContext);
       this.interactionState = {
         ...this.interactionState,
@@ -13169,6 +13262,28 @@ class BarResizeManager {
       };
     };
   }
+  emitTaskResizedEvent(resizeHandle, oldStartTime, oldEndTime, newStartTime, newEndTime, durationChange) {
+    const eventDetail = {
+      taskId: this.task.id,
+      resizeHandle,
+      oldStartTime,
+      oldEndTime,
+      newStartTime,
+      newEndTime,
+      durationChange,
+      timestamp: Date.now()
+    };
+    const event = new CustomEvent(GanttEvents.TASK_RESIZED, {
+      detail: eventDetail,
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    });
+    const chartContainer = this.chartContext.getChartContainer();
+    if (chartContainer) {
+      chartContainer.dispatchEvent(event);
+    }
+  }
   createResizeMouseDownHandler(barElement) {
     return (e, handle) => {
       var _a;
@@ -13179,6 +13294,8 @@ class BarResizeManager {
         initialLeft: parseInt(barElement.style.left) || 0,
         initialPosition: e.clientX,
         initialWidth: parseInt(barElement.style.width) || 0,
+        initialStartTime: this.task.startTime,
+        initialEndTime: this.task.endTime,
         isResizing: true,
         resizeHandle: handle,
         startX: e.clientX
@@ -13389,24 +13506,6 @@ class Dialog {
     firstFocusable == null ? void 0 : firstFocusable.focus();
   }
 }
-const GanttEvents = {
-  /**
-   * emits when a task is being updated (before completion)
-   */
-  TASK_UPDATE: "taskUpdate",
-  /**
-   * emits when form validation fails
-   */
-  TASK_VALIDATION_ERROR: "taskValidationError",
-  /**
-   * emits after a task update completes successfully
-   */
-  TASK_UPDATE_SUCCESS: "taskUpdateSuccess",
-  /**
-   * emits when a task update fails
-   */
-  TASK_UPDATE_ERROR: "taskUpdateError"
-};
 class TaskForm {
   constructor(chartContext, dataManager, task, containerElement, onSubmit, dateFormat = "MM-DD-YYYY") {
     this.chartContext = chartContext;
@@ -14330,6 +14429,32 @@ class DataManager {
   }
   getDateRange(add = 0, viewMode) {
     const tasks = this.getTasks();
+    if (tasks.length === 0) {
+      const today = dayjs();
+      const startDate = today.startOf(viewMode);
+      let defaultRange = 1;
+      switch (viewMode) {
+        case "day":
+          defaultRange = 30;
+          break;
+        case "week":
+          defaultRange = 12;
+          break;
+        case "month":
+          defaultRange = 12;
+          break;
+        case "quarter":
+          defaultRange = 4;
+          break;
+        case "year":
+          defaultRange = 5;
+          break;
+        default:
+          defaultRange = 12;
+      }
+      const endDate = startDate.add(defaultRange + add, viewMode);
+      return [startDate, endDate];
+    }
     const startDates = tasks.map((task) => dayjs(task.startTime));
     const endDates = tasks.filter((task) => !!task.endTime).map((task) => dayjs(task.endTime));
     return [dayjs.min(startDates), dayjs.max(endDates).add(add, viewMode)];
@@ -16534,12 +16659,11 @@ class GanttStateManager {
    */
   captureState(element, dataManager, viewMode) {
     const horizontalScroll = element.querySelector(".timeline-horizontal-scroll");
-    const tasksBodyWrapper = element.querySelector(".tasks-body-wrapper");
-    const timelineBodyWrapper = element.querySelector(".timeline-body-wrapper");
+    const splitViewContainer = element.querySelector(".split-view-container");
     this.state.scrollPosition = {
       horizontal: (horizontalScroll == null ? void 0 : horizontalScroll.scrollLeft) || 0,
-      tasksVertical: (tasksBodyWrapper == null ? void 0 : tasksBodyWrapper.scrollTop) || 0,
-      timelineVertical: (timelineBodyWrapper == null ? void 0 : timelineBodyWrapper.scrollTop) || 0
+      tasksVertical: (splitViewContainer == null ? void 0 : splitViewContainer.scrollTop) || 0,
+      timelineVertical: (splitViewContainer == null ? void 0 : splitViewContainer.scrollTop) || 0
     };
     this.state.viewMode = viewMode;
     this.state.collapsedTasks = new Set(
@@ -16553,20 +16677,16 @@ class GanttStateManager {
     if (!skipScroll) {
       requestAnimationFrame(() => {
         const horizontalScroll = element.querySelector(".timeline-horizontal-scroll");
-        const tasksBodyWrapper = element.querySelector(".tasks-body-wrapper");
-        const timelineBodyWrapper = element.querySelector(".timeline-body-wrapper");
+        const splitViewContainer = element.querySelector(".split-view-container");
         if (horizontalScroll) {
           horizontalScroll.scrollLeft = this.state.scrollPosition.horizontal;
         }
-        if (tasksBodyWrapper) {
-          tasksBodyWrapper.scrollTop = this.state.scrollPosition.tasksVertical;
+        if (splitViewContainer) {
+          splitViewContainer.scrollTop = this.state.scrollPosition.tasksVertical;
         }
-        if (timelineBodyWrapper) {
-          timelineBodyWrapper.scrollTop = this.state.scrollPosition.timelineVertical;
-          const timelineHeader = element.querySelector(".timeline-header");
-          if (timelineHeader) {
-            timelineHeader.scrollLeft = this.state.scrollPosition.horizontal;
-          }
+        const timelineHeader = element.querySelector(".timeline-header");
+        if (timelineHeader) {
+          timelineHeader.scrollLeft = this.state.scrollPosition.horizontal;
         }
       });
     }
@@ -16754,6 +16874,7 @@ class ApexGantt extends BaseChart {
     this.splitBarResizeHandler = null;
     this.containerResizeObserver = null;
     this.lastKnownWidth = 0;
+    this.lastKnownHeight = 0;
     this.resizeDebounceTimer = null;
     const themeDefaults = getDefaultOptions(options == null ? void 0 : options.theme);
     let processedSeries;
@@ -16989,16 +17110,11 @@ class ApexGantt extends BaseChart {
     this.setCSSVariables();
     this.initializeTooltip();
     this.element.innerHTML = "";
-    const existingDimensions = this.hasExplicitDimensions();
+    this.hasExplicitDimensions();
     const normalizedHeight = this.normalizeDimension(height2);
     const normalizedWidth = this.normalizeDimension(width2);
     this.element.style.width = normalizedWidth;
-    if (normalizedHeight === "100%" && existingDimensions.height) {
-      const computedHeight = window.getComputedStyle(this.element).height;
-      this.element.style.height = computedHeight;
-    } else {
-      this.element.style.height = normalizedHeight;
-    }
+    this.element.style.height = normalizedHeight;
     this.element.style.display = "flex";
     this.element.style.flexDirection = "column";
     this.element.style.boxSizing = "border-box";
@@ -17620,6 +17736,10 @@ class ApexGantt extends BaseChart {
     if (!ganttContainer || !timelineBody || !tasksBody) {
       return;
     }
+    const oldEmptyTimelineRows = timelineBody.querySelectorAll(".timeline-empty-row");
+    oldEmptyTimelineRows.forEach((row) => row.remove());
+    const oldEmptyTaskRows = tasksBody.querySelectorAll(".tasks-empty-row");
+    oldEmptyTaskRows.forEach((row) => row.remove());
     const containerHeight = ganttContainer.clientHeight;
     const existingRows = timelineBody.querySelectorAll(".timeline-data-row:not(.timeline-empty-row)");
     const existingRowCount = existingRows.length;
@@ -17628,8 +17748,17 @@ class ApexGantt extends BaseChart {
     const emptyRowsNeeded = Math.max(0, totalRowsNeeded - existingRowCount);
     if (emptyRowsNeeded === 0)
       return;
+    let cellCount = 0;
     const firstRow = timelineBody.querySelector(".timeline-data-row");
-    const cellCount = firstRow ? firstRow.querySelectorAll(".timeline-data-cell").length : 0;
+    if (firstRow) {
+      cellCount = firstRow.querySelectorAll(".timeline-data-cell").length;
+    } else {
+      const timelineHeader = ganttContainer.querySelector(".timeline-header");
+      if (timelineHeader) {
+        const headerCells = timelineHeader.querySelectorAll(".timeline-header-cell");
+        cellCount = headerCells.length;
+      }
+    }
     if (cellCount === 0)
       return;
     for (let i = 0; i < emptyRowsNeeded; i++) {
@@ -17785,7 +17914,7 @@ class ApexGantt extends BaseChart {
     return value;
   }
   /**
-   * resize observer for container to handle responsive width changes
+   * resize observer for container to handle responsive width and height changes
    */
   setupContainerResizeObserver() {
     if (!this.element) {
@@ -17795,16 +17924,23 @@ class ApexGantt extends BaseChart {
       this.containerResizeObserver.disconnect();
     }
     const normalizedWidth = this.normalizeDimension(this.options.width);
+    const normalizedHeight = this.normalizeDimension(this.options.height);
     const isPercentageWidth = typeof normalizedWidth === "string" && normalizedWidth.includes("%");
-    if (!isPercentageWidth) {
+    const isPercentageHeight = typeof normalizedHeight === "string" && normalizedHeight.includes("%");
+    if (!isPercentageWidth && !isPercentageHeight) {
       return;
     }
     this.lastKnownWidth = this.element.offsetWidth;
+    this.lastKnownHeight = this.element.offsetHeight;
     this.containerResizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const newWidth = entry.contentRect.width;
-        if (Math.abs(newWidth - this.lastKnownWidth) > 1) {
+        const newHeight = entry.contentRect.height;
+        const widthChanged = Math.abs(newWidth - this.lastKnownWidth) > 1;
+        const heightChanged = Math.abs(newHeight - this.lastKnownHeight) > 1;
+        if (widthChanged || heightChanged) {
           this.lastKnownWidth = newWidth;
+          this.lastKnownHeight = newHeight;
           this.handleContainerResize();
         }
       }
@@ -17825,7 +17961,10 @@ class ApexGantt extends BaseChart {
       return;
     }
     const normalizedWidth = this.normalizeDimension(this.options.width);
-    if (typeof normalizedWidth === "string" && normalizedWidth.includes("%")) {
+    const normalizedHeight = this.normalizeDimension(this.options.height);
+    const isPercentageWidth = typeof normalizedWidth === "string" && normalizedWidth.includes("%");
+    const isPercentageHeight = typeof normalizedHeight === "string" && normalizedHeight.includes("%");
+    if (isPercentageWidth) {
       const computedWidth = window.getComputedStyle(this.element.parentElement || this.element).width;
       const currentElementWidth = window.getComputedStyle(this.element).width;
       if (computedWidth !== currentElementWidth) {
@@ -17836,6 +17975,11 @@ class ApexGantt extends BaseChart {
         });
       }
     }
+    if (isPercentageHeight) {
+      requestAnimationFrame(() => {
+        this.fillEmptyRowsAfterRender();
+      });
+    }
   }
   destroy() {
     try {