Merge branch 'release/2.2.0'

Author: Xeyos88

CHANGELOG.md

@@ -8,8 +8,6 @@ All notable changes to this project will be documented in this file.
 
 [Full Changelog](https://github.com/Xeyos88/HyVueGantt/compare/v2.0.0...v2.1.0)
 
-
-
 **✨ New Features:**
 
 - Drag and drop rows

docs/.vitepress/theme/components/ConnectionsGanttDemo.vue

@@ -95,6 +95,7 @@ onMounted(() => {
         :push-on-connect="true"
         color-scheme="dark"
         :holidayHighlight="'US'"
+        :markerConnection="'none'"
       >
         <g-gantt-row
           v-for="row in rows"

docs/.vitepress/theme/components/OtherGanttDemo.vue

@@ -274,7 +274,7 @@ onMounted(() => {
         label-column-title="Rows"
         :dayOptionLabel="['day','name','doy']"
         :milestones="milestones"
-        
+        :markerConnection="'bidirectional'"
       >
         <g-gantt-row
           v-for="row in rows"

docs/api/props.md

@@ -45,8 +45,8 @@ interface VisualProps {
   highlightedDaysInMonth?: number[];         // Array of days to highlight (1-31)
   highlightedMonths?: number[];              // Array of months to highlight (0-11, 0 is January)
   highlightedWeek?: number[];                // Array of weeks to highlight (1-53)
-  locale?: string;                          // Locale for dayjs
- 
+  locale?: string;                           // Locale for dayjs
+  markConnection?: MarkConnection            // Type of marker in connections
 
 }
 ```

docs/api/types.md

@@ -13,6 +13,7 @@ type DayOptionLabel = "day" | "doy" | "name" | "number"
 type ConnectionType = 'bezier' | 'straight' | 'squared';
 type ConnectionPattern = 'solid' | 'dot' | 'dash' | 'dashdot';
 type ConnectionSpeed = 'slow' | 'normal' | 'fast';
+type MarkerConnection = 'none' | 'forward' | 'bidirectional'
 ```
 
 ## Bar Configuration

docs/components/g-gantt-chart.md

@@ -70,6 +70,7 @@ Here's a minimal example of using the GGanttChart component:
 | dayOptionLabel| `DayOptionLabel[]` | `['day']` | Customization for time unit day |
 | locale| `string` | `'en'` | Locale for dayjs |
 | enableRowDragAndDrop| `boolean` | `false` | Enable drag and drop of rows |
+| markerConnection| `MarkerConnection` | `forward` | Choose the type of marker in connection |
 
 
 ### Events

docs/guide/chart-configuration.md

@@ -14,7 +14,6 @@ The GGanttChart component accepts several key configuration properties that defi
   :bar-start="'start'"
   :bar-end="'end'"
   :row-height="40"
-  :width="'100%'"
   :color-scheme="'default'"
   :grid="true"
   :push-on-overlap="true"
@@ -29,7 +28,6 @@ The GGanttChart component accepts several key configuration properties that defi
 - `precision`: Sets the time unit ('hour', 'day', 'week', 'month')
 - `bar-start` and `bar-end`: Specify data properties for dates
 - `row-height`: Controls row height in pixels
-- `width`: Chart width (percentage or pixels)
 
 ### Advanced Configuration
 

docs/live/events.md

@@ -8,7 +8,7 @@ Live demo of events issued by the Gantt component:
   <EventsGanttDemo />
 </ClientOnly>
 
-## Codice
+## Code
 
 ```vue
 <script setup lang="ts">

eslint.config.js

@@ -23,5 +23,8 @@ export default [
   ...vueTsEslintConfig(),
 
   skipFormatting,
-  includeIgnoreFile(gitignorePath)
+  includeIgnoreFile(gitignorePath),
+  {
+    ignores: ["**/tests/*", "**/docs/*"]
+  }
 ]

package-lock.json

@@ -1,10 +1,10 @@
 {
   "name": "hy-vue-gantt",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Evolution of vue-ganttastic package",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {
-    "serve": "vite",
+    "serve": "vite --host",
     "build": "npm run build:types && npm run build:lib",
     "build:lib": "vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir lib_types -p tsconfig.build.json",
@@ -92,6 +92,7 @@
     "url": "https://github.com/Xeyos88/HyVueGantt"
   },
   "dependencies": {
-    "@tsconfig/node22": "^22.0.0"
+    "@tsconfig/node22": "^22.0.0",
+    "uuid": "^11.0.5"
   }
 }

package.json

@@ -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,37 @@ 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) => {
+  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 +164,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/GGanttBar.vue

@@ -59,6 +59,7 @@ import type {
 import type { CSSProperties } from "vue"
 import useTimeaxisUnits from "../composables/useTimeaxisUnits"
 import { ganttWidth } from "../composables/useSimpleStore"
+import { v4 as uuidv4 } from "uuid"
 
 // Props & Emits Definition
 const props = withDefaults(defineProps<GGanttChartProps>(), {
@@ -104,10 +105,11 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   highlightedMonths: () => [],
   highlightedWeek: () => [],
   locale: "en",
-  enableRowDragAndDrop: false
+  enableRowDragAndDrop: false,
+  markerConnection: "forward"
 })
 
-const id = ref(crypto.randomUUID())
+const id = ref(uuidv4())
 const slots = useSlots()
 
 const rowManager = useRows(
@@ -312,6 +314,40 @@ const handleTimeaxisMouseUp = () => {
   isDraggingTimeaxis.value = false
 }
 
+const handleTimeaxisTouch = {
+  startX: 0,
+  isDragging: false
+}
+
+const handleTimeaxisTouchStart = (e: TouchEvent) => {
+  const touch = e.touches[0]
+  if (!touch) return
+
+  handleTimeaxisTouch.isDragging = true
+  handleTimeaxisTouch.startX = touch.clientX
+  e.preventDefault()
+}
+
+const handleTimeaxisTouchMove = (e: TouchEvent) => {
+  if (!handleTimeaxisTouch.isDragging || !ganttWrapper.value) return
+
+  const touch = e.touches[0]
+  if (!touch) return
+
+  const deltaX = touch.clientX - handleTimeaxisTouch.startX
+  handleTimeaxisTouch.startX = touch.clientX
+
+  ganttWrapper.value.scrollLeft -= deltaX
+  const maxScroll = ganttWrapper.value.scrollWidth - ganttWrapper.value.clientWidth
+  scrollPosition.value = (ganttWrapper.value.scrollLeft / maxScroll) * 100
+
+  e.preventDefault()
+}
+
+const handleTimeaxisTouchEnd = () => {
+  handleTimeaxisTouch.isDragging = false
+}
+
 // Bar Event Handling
 const emitBarEvent = (
   e: MouseEvent,
@@ -489,6 +525,10 @@ provide(GANTT_ID_KEY, id.value)
               v-if="!hideTimeaxis"
               ref="timeaxisComponent"
               @drag-start="handleTimeaxisMouseDown"
+              @touchstart="handleTimeaxisTouchStart"
+              @touchmove="handleTimeaxisTouchMove"
+              @touchend="handleTimeaxisTouchEnd"
+              @touchcancel="handleTimeaxisTouchEnd"
               :timeaxisUnits="timeaxisUnits"
               :internalPrecision="internalPrecision"
             >
@@ -541,6 +581,7 @@ provide(GANTT_ID_KEY, id.value)
                   <g-gantt-connector
                     v-if="barPositions.get(conn.sourceId) && barPositions.get(conn.targetId)"
                     v-bind="getConnectorProps(conn)!"
+                    :marker="markerConnection"
                   />
                 </template>
               </template>

src/components/GGanttChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BarPosition, ConnectionType } from "../types"
+import type { BarPosition, ConnectionType, MarkerConnection } from "../types"
 import { computed, ref } from "vue"
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   pattern?: "solid" | "dash" | "dot" | "dashdot"
   animated?: boolean
   animationSpeed?: "slow" | "normal" | "fast"
+  marker: MarkerConnection
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -29,41 +30,46 @@ const animationClass = computed(() => {
   return `connector-animated-${props.pattern}-${props.animationSpeed}`
 })
 
+const markerId = computed(() => `marker-start-${props.sourceBar.id}-${props.targetBar.id}`)
+const hasMarkerEnd = computed(() => props.marker === "bidirectional" || props.marker === "forward")
+const hasMarkerStart = computed(() => props.marker === "bidirectional")
+const markerDeltaEnd = computed(() => (hasMarkerEnd.value ? 4 : 0))
+const markerDeltaStart = computed(() => (hasMarkerStart.value ? 4 : 0))
+
 const pathData = computed(() => {
   const sourceX = props.sourceBar.x + props.sourceBar.width
   const sourceY = props.sourceBar.y + props.sourceBar.height / 2
   const targetX = props.targetBar.x
   const targetY = props.targetBar.y + props.targetBar.height / 2
 
   const OFFSET = 20
-  const isGoingBack = targetX < sourceX
-
+  const isGoingBack = targetX <= sourceX
   switch (props.type) {
     case "straight":
-      return `M ${sourceX},${sourceY} L ${targetX - 4},${targetY}`
+      return `M ${sourceX},${sourceY} L ${targetX - markerDeltaEnd.value},${targetY}`
 
     case "squared":
       if (isGoingBack) {
-        return `M ${sourceX},${sourceY}
+        return `M ${sourceX + markerDeltaStart.value},${sourceY}
                 h ${OFFSET}
                 v ${(targetY - sourceY) / 2}
                 h -${Math.abs(targetX - sourceX) + OFFSET * 2}
                 v ${(targetY - sourceY) / 2}
-                h ${OFFSET - 4}`
+                h ${OFFSET - markerDeltaEnd.value * 2}`
       }
 
-      return `M ${sourceX},${sourceY}
+      return `M ${sourceX + markerDeltaStart.value},${sourceY}
               h ${OFFSET}
               v ${targetY - sourceY}
-              h ${targetX - sourceX - OFFSET - 4}`
+              h ${targetX - sourceX - OFFSET - markerDeltaEnd.value * 2}`
 
     case "bezier":
     default:
       const controlPointX = (sourceX + targetX) / 2
-      return `M ${sourceX},${sourceY}
+      return `M ${sourceX + markerDeltaStart.value},${sourceY}
               C ${controlPointX},${sourceY}
                 ${controlPointX},${targetY}
-                ${targetX - 4},${targetY}`
+                ${targetX - markerDeltaEnd.value},${targetY}`
   }
 })
 
@@ -81,8 +87,6 @@ const nonAnimatedDashArray = computed(() => {
       return ""
   }
 })
-
-const markerId = computed(() => `marker-start-${props.sourceBar.id}-${props.targetBar.id}`)
 </script>
 
 <template>
@@ -152,8 +156,8 @@ const markerId = computed(() => `marker-start-${props.sourceBar.id}-${props.targ
       :stroke-dasharray="nonAnimatedDashArray"
       :class="['connector-path', animationClass]"
       :style="{
-        markerStart: 'none',
-        markerEnd: `url(#${markerId})`
+        markerStart: hasMarkerStart ? `url(#${markerId})` : 'none',
+        markerEnd: hasMarkerEnd ? `url(#${markerId})` : 'none'
       }"
     />
   </svg>