Partial mobile support

Author: Xeyos88

src/components/GGanttBar.vue

@@ -5,6 +5,7 @@ import useBarDragManagement from "../composables/useBarDragManagement"
 import useTimePositionMapping from "../composables/useTimePositionMapping"
 import useBarDragLimit from "../composables/useBarDragLimit"
 import { useBarKeyboardControl } from "../composables/useBarKeyboardControl"
+import { useTouchEvents } from "../composables/useTouchEvents"
 import type { GanttBarObject } from "../types"
 import provideEmitBarEvent from "../provider/provideEmitBarEvent"
 import provideConfig from "../provider/provideConfig"
@@ -46,11 +47,10 @@ const prepareForDrag = () => {
 
   window.addEventListener("mousemove", firstMousemoveCallback, {
     once: true
-  }) // on first mousemove event
+  })
   window.addEventListener(
     "mouseup",
     () => {
-      // in case user does not move the mouse after mousedown at all
       window.removeEventListener("mousemove", firstMousemoveCallback)
       isDragging.value = false
     },
@@ -78,6 +78,38 @@ const { barStart, barEnd, width, chartStart, chartEnd, chartSize } = config
 const xStart = ref(0)
 const xEnd = ref(0)
 
+const { handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel } = useTouchEvents(
+  (_draggedBar, e) => {
+    firstMousemoveCallback(e)
+    isDragging.value = true
+  }
+)
+const onTouchEvent = (e: TouchEvent) => {
+  console.log(e)
+  if (bar.value.ganttBarConfig.immobile) return
+
+  let mouseEvent: MouseEvent | undefined
+
+  switch (e.type) {
+    case "touchstart":
+      mouseEvent = handleTouchStart(e, bar.value)!
+      break
+    case "touchmove":
+      mouseEvent = handleTouchMove(e)!
+      break
+    case "touchend":
+      mouseEvent = handleTouchEnd(e)!
+      break
+    case "touchcancel":
+      mouseEvent = handleTouchCancel(e)!
+      break
+  }
+
+  if (mouseEvent) {
+    onMouseEvent(mouseEvent)
+  }
+}
+
 onMounted(() => {
   xStart.value = mapTimeToPosition(bar.value[barStart.value])
   xEnd.value = mapTimeToPosition(bar.value[barEnd.value])
@@ -133,6 +165,10 @@ const getGroupBarPath = (width: number, height: number) => {
     @mouseenter="onMouseEvent"
     @mouseleave="onMouseEvent"
     @contextmenu="onMouseEvent"
+    @touchstart="onTouchEvent"
+    @touchmove="onTouchEvent"
+    @touchend="onTouchEvent"
+    @touchcancel="onTouchEvent"
     @keydown="onBarKeyDown"
     role="listitem"
     :aria-label="`Activity ${barConfig.label}`"

src/components/GGanttLabelColumn.vue

@@ -21,6 +21,7 @@ import {
 import useDayjsHelper from "../composables/useDayjsHelper"
 import type { UseRowsReturn } from "../composables/useRows"
 import { useRowDragAndDrop } from "../composables/useRowDragAndDrop"
+import { useColumnTouchResize } from "../composables/useColumnTouchResize"
 
 interface LabelColumnRowProps extends ChartRow {
   indentLevel?: number
@@ -67,6 +68,24 @@ const {
   (_event, payload) => emit("row-drop", payload)
 )
 
+const { touchState, handleTouchStart, handleTouchMove, handleTouchEnd, handleTouchCancel } =
+  useColumnTouchResize()
+
+const handleColumnTouchStart = (e: TouchEvent, column: string) => {
+  if (!labelResizable) return
+
+  const currentWidth = columnWidths.get(column) || labelColumnWidth.value
+  handleTouchStart(e, column, currentWidth)
+}
+
+const handleColumnTouchMove = (e: TouchEvent) => {
+  if (!labelResizable) return
+
+  handleTouchMove(e, (column: string, newWidth: number) => {
+    columnWidths.set(column, newWidth)
+  })
+}
+
 const columnWidths = reactive<Map<string, number>>(new Map())
 const isDragging = ref(false)
 const dragStartX = ref(0)
@@ -397,7 +416,15 @@ defineExpose({
             v-if="labelResizable"
             class="column-resizer"
             @mousedown="(e) => handleDragStart(e, column.field)"
-            :class="{ 'is-dragging': isDragging && draggedColumn === column.field }"
+            @touchstart="(e) => handleColumnTouchStart(e, column.field)"
+            @touchmove="handleColumnTouchMove"
+            @touchend="handleTouchEnd"
+            @touchcancel="handleTouchCancel"
+            :class="{
+              'is-dragging': isDragging && draggedColumn === column.field,
+              'is-touch-resizing':
+                touchState.isResizing && touchState.currentColumn === column.field
+            }"
           ></div>
         </div>
       </template>
@@ -611,10 +638,21 @@ defineExpose({
 }
 
 .column-resizer:hover,
-.column-resizer.is-dragging {
+.column-resizer.is-dragging,
+.column-resizer.is-touch-resizing {
   background: rgba(0, 0, 0, 0.1);
 }
 
+.g-label-column-header-cell:has(.column-resizer.is-touch-resizing) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+@media (max-width: 768px) {
+  .column-resizer {
+    width: 16px;
+  }
+}
+
 .g-label-column {
   user-select: none;
 }

src/composables/useColumnTouchResize.ts

@@ -0,0 +1,70 @@
+import { ref } from "vue"
+
+interface TouchResizeState {
+  isResizing: boolean
+  startX: number
+  currentColumn: string | null
+  initialWidth: number
+}
+
+export function useColumnTouchResize() {
+  const touchState = ref<TouchResizeState>({
+    isResizing: false,
+    startX: 0,
+    currentColumn: null,
+    initialWidth: 0
+  })
+
+  const resetTouchState = () => {
+    touchState.value = {
+      isResizing: false,
+      startX: 0,
+      currentColumn: null,
+      initialWidth: 0
+    }
+  }
+
+  const handleTouchStart = (e: TouchEvent, column: string, currentWidth: number) => {
+    const touch = e.touches[0]
+    if (!touch) return
+
+    e.preventDefault()
+
+    touchState.value = {
+      isResizing: true,
+      startX: touch.clientX,
+      currentColumn: column,
+      initialWidth: currentWidth
+    }
+  }
+
+  const handleTouchMove = (e: TouchEvent, onResize: (column: string, newWidth: number) => void) => {
+    const touch = e.touches[0]
+    if (!touch || !touchState.value.isResizing) return
+
+    e.preventDefault()
+
+    const deltaX = touch.clientX - touchState.value.startX
+    const newWidth = Math.max(50, touchState.value.initialWidth + deltaX)
+
+    if (touchState.value.currentColumn) {
+      onResize(touchState.value.currentColumn, newWidth)
+    }
+  }
+
+  const handleTouchEnd = () => {
+    if (touchState.value.isResizing) {
+      resetTouchState()
+    }
+  }
+
+  const handleTouchCancel = handleTouchEnd
+
+  return {
+    touchState,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleTouchCancel
+  }
+}

src/composables/useRowDragAndDrop.ts

@@ -112,6 +112,31 @@ export function useRowDragAndDrop(
     }
   }
 
+  const isDescendant = (parent: ChartRow, potentialChild: ChartRow): boolean => {
+    if (!parent.children) {
+      return false
+    }
+
+    return parent.children.some(
+      (child) => child.id === potentialChild.id || isDescendant(child, potentialChild)
+    )
+  }
+
+  const findRowIndexById = (rows: ChartRow[], id: string | number): [number, ChartRow[]] => {
+    for (let i = 0; i < rows.length; i++) {
+      if (rows[i]!.id === id) {
+        return [i, rows]
+      }
+      if (rows[i]!.children?.length) {
+        const [index, parentRows] = findRowIndexById(rows[i]!.children!, id)
+        if (index !== -1) {
+          return [index, parentRows]
+        }
+      }
+    }
+    return [-1, rows]
+  }
+
   /**
    * Handles the completion of a drag operation
    * Updates row positions and emits drop event
@@ -122,40 +147,14 @@ export function useRowDragAndDrop(
       return
     }
 
-    const isDescendant = (parent: ChartRow, potentialChild: ChartRow): boolean => {
-      if (!parent.children) {
-        return false
-      }
-
-      return parent.children.some(
-        (child) => child.id === potentialChild.id || isDescendant(child, potentialChild)
-      )
-    }
-
     if (isDescendant(draggedRow, dropTarget.row)) {
       return
     }
 
-    const findRowIndexById = (rows: ChartRow[], id: string | number): [number, ChartRow[]] => {
-      for (let i = 0; i < rows.length; i++) {
-        if (rows[i]!.id === id) {
-          return [i, rows]
-        }
-        if (rows[i]!.children?.length) {
-          const [index, parentRows] = findRowIndexById(rows[i]!.children!, id)
-          if (index !== -1) {
-            return [index, parentRows]
-          }
-        }
-      }
-      return [-1, rows]
-    }
-
     const [sourceIndex, sourceParentRows] = findRowIndexById(rows.value, draggedRow.id!)
     const [targetIndex, targetParentRows] = findRowIndexById(rows.value, dropTarget.row.id!)
 
     if (sourceIndex === -1 || targetIndex === -1) {
-      console.log("Row non trovate")
       return
     }
 
@@ -200,6 +199,8 @@ export function useRowDragAndDrop(
     handleDragStart,
     handleDragOver,
     handleDrop,
-    resetOrder
+    resetOrder,
+    isDescendant,
+    findRowIndexById
   }
 }