Merge branch 'feature/history-mode' into develop

package.json

@@ -40,6 +40,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@senojs/rollup-plugin-style-inject": "^0.2.3",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.10.1",
     "@types/postcss-preset-env": "^7.7.0",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -93,6 +94,7 @@
   },
   "dependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "lodash-es": "^4.17.21",
     "uuid": "^11.0.5"
   }
 }

src/components/GGanttChart.vue

@@ -11,7 +11,9 @@ import {
   faMagnifyingGlassPlus,
   faMagnifyingGlassMinus,
   faExpandAlt,
-  faCompressAlt
+  faCompressAlt,
+  faUndo,
+  faRedo
 } from "@fortawesome/free-solid-svg-icons"
 import {
   computed,
@@ -43,7 +45,7 @@ import { useConnections } from "../composables/useConnections"
 import { useTooltip } from "../composables/useTooltip"
 import { useChartNavigation } from "../composables/useChartNavigation"
 import { useKeyboardNavigation } from "../composables/useKeyboardNavigation"
-import { useRows } from "../composables/useRows"
+import { useRows, findBarInRows } from "../composables/useRows"
 
 // Types and Constants
 import { colorSchemes, type ColorSchemeKey } from "../color-schemes"
@@ -391,6 +393,7 @@ const emitBarEvent = (
       isDragging.value = false
       emit("dragend-bar", { bar, e, movedBars })
       updateBarPositions()
+      rowManager.onBarMove()
       break
     case "contextmenu":
       emit("contextmenu-bar", { bar, e, datetime })
@@ -421,6 +424,76 @@ const updateRangeBackground = () => {
   }
 }
 
+const undo = () => {
+  const changes = rowManager.undo()
+  if (!changes) return
+
+  changes.rowChanges.forEach((rowChange) => {
+    emit("row-drop", {
+      sourceRow: rowChange.sourceRow,
+      targetRow: undefined,
+      newIndex: rowChange.newIndex,
+      parentId: rowChange.newParentId
+    })
+  })
+
+  changes.barChanges.forEach((barChange) => {
+    const bar = findBarInRows(rowManager.rows.value, barChange.barId)
+    if (!bar) return
+
+    emit("dragend-bar", {
+      bar,
+      e: new MouseEvent("mouseup"),
+      movedBars: new Map([
+        [
+          bar,
+          {
+            oldStart: barChange.newStart!,
+            oldEnd: barChange.newEnd!
+          }
+        ]
+      ])
+    })
+  })
+
+  updateBarPositions()
+}
+
+const redo = () => {
+  const changes = rowManager.redo()
+  if (!changes) return
+
+  changes.rowChanges.forEach((rowChange) => {
+    emit("row-drop", {
+      sourceRow: rowChange.sourceRow,
+      targetRow: undefined,
+      newIndex: rowChange.newIndex,
+      parentId: rowChange.newParentId
+    })
+  })
+
+  changes.barChanges.forEach((barChange) => {
+    const bar = findBarInRows(rowManager.rows.value, barChange.barId)
+    if (!bar) return
+
+    emit("dragend-bar", {
+      bar,
+      e: new MouseEvent("mouseup"),
+      movedBars: new Map([
+        [
+          bar,
+          {
+            oldStart: barChange.oldStart!,
+            oldEnd: barChange.oldEnd!
+          }
+        ]
+      ])
+    })
+  })
+
+  updateBarPositions()
+}
+
 // ResizeObserver instance
 let resizeObserver: ResizeObserver
 
@@ -673,7 +746,6 @@ provide(GANTT_ID_KEY, id.value)
             </button>
           </div>
         </div>
-
         <!-- Zoom Controls -->
         <div class="g-gantt-command-zoom">
           <button
@@ -691,6 +763,18 @@ provide(GANTT_ID_KEY, id.value)
             <FontAwesomeIcon :icon="faMagnifyingGlassPlus" class="command-icon" />
           </button>
         </div>
+        <div class="g-gantt-command-history">
+          <button
+            @click="undo"
+            :disabled="!rowManager.canUndo.value"
+            aria-label="Annulla ultima azione"
+          >
+            <FontAwesomeIcon :icon="faUndo" class="command-icon" />
+          </button>
+          <button @click="redo" :disabled="!rowManager.canRedo.value" aria-label="Ripeti azione">
+            <FontAwesomeIcon :icon="faRedo" class="command-icon" />
+          </button>
+        </div>
 
         <!-- Custom Commands Slot -->
         <div class="g-gantt-command-custom">
@@ -753,7 +837,8 @@ provide(GANTT_ID_KEY, id.value)
 .g-gantt-command-fixed,
 .g-gantt-command-slider,
 .g-gantt-command-vertical,
-.g-gantt-command-zoom {
+.g-gantt-command-zoom,
+.g-gantt-command-history {
   display: flex;
   align-items: center;
   gap: 2px;
@@ -766,7 +851,8 @@ provide(GANTT_ID_KEY, id.value)
 .g-gantt-command-vertical button:disabled,
 .g-gantt-command-slider button:disabled,
 .g-gantt-command-zoom button:disabled,
-.g-gantt-command-groups button:disabled {
+.g-gantt-command-groups button:disabled,
+.g-gantt-command-history button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }

src/composables/useColumnTouchResize.ts

@@ -1,12 +1,20 @@
 import { ref } from "vue"
 
+/**
+ * Interface defining the state for touch-based column resizing
+ */
 interface TouchResizeState {
   isResizing: boolean
   startX: number
   currentColumn: string | null
   initialWidth: number
 }
 
+/**
+ * A composable that manages touch-based column resizing functionality
+ * Handles touch events and width calculations for responsive column sizing
+ * @returns Object containing resize state and event handlers
+ */
 export function useColumnTouchResize() {
   const touchState = ref<TouchResizeState>({
     isResizing: false,
@@ -15,6 +23,10 @@ export function useColumnTouchResize() {
     initialWidth: 0
   })
 
+  /**
+   * Resets resize state to initial values
+   * Called when resize operation ends or is cancelled
+   */
   const resetTouchState = () => {
     touchState.value = {
       isResizing: false,
@@ -24,6 +36,13 @@ export function useColumnTouchResize() {
     }
   }
 
+  /**
+   * Initializes touch resize operation
+   * Sets up initial positions and state for resizing
+   * @param e - Touch event that started the resize
+   * @param column - Column being resized
+   * @param currentWidth - Current width of the column
+   */
   const handleTouchStart = (e: TouchEvent, column: string, currentWidth: number) => {
     const touch = e.touches[0]
     if (!touch) return
@@ -38,6 +57,12 @@ export function useColumnTouchResize() {
     }
   }
 
+  /**
+   * Handles ongoing touch resize movement
+   * Calculates and applies new column width
+   * @param e - Touch move event
+   * @param onResize - Callback function to update column width
+   */
   const handleTouchMove = (e: TouchEvent, onResize: (column: string, newWidth: number) => void) => {
     const touch = e.touches[0]
     if (!touch || !touchState.value.isResizing) return
@@ -52,12 +77,20 @@ export function useColumnTouchResize() {
     }
   }
 
+  /**
+   * Finalizes touch resize operation
+   * Cleans up state and event listeners
+   */
   const handleTouchEnd = () => {
     if (touchState.value.isResizing) {
       resetTouchState()
     }
   }
 
+  /**
+   * Handles touch cancel event
+   * Behaves same as touch end
+   */
   const handleTouchCancel = handleTouchEnd
 
   return {