apexgantt 3.3.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;