fix: other bars in same row need magnetic suction also

src/GGanttBar.vue

@@ -51,8 +51,6 @@ export default {
 
   props: {
     bar: { type: Object },
-    barStartKey: { type: String }, // property name of the bar objects that represents the start datetime,
-    barEndKey: { type: String }, // property name of the bar objects that represents the end datetime,
     barContainer: [Object, DOMRect],
     allBarsInRow: { type: Array },
   },
@@ -92,6 +90,8 @@ export default {
       timeChildFormat:
         this.ganttChartProps.timeaxisMode === 'month_days' ? 'MM-DD' : 'HH:mm',
       timeFormat: this.getTimeFormat(),
+      barStartKey: this.ganttChartProps.barStartKey,
+      barEndKey: this.ganttChartProps.barEndKey,
     }
   },
 
@@ -331,9 +331,6 @@ export default {
     },
 
     endDrag(e) {
-      // Magnetic suction
-
-      if (this.ganttChartProps.isMagnetic) {
         let left = false,
           right = false,
           move = false
@@ -348,61 +345,7 @@ export default {
             move = true
             break
         }
-        console.log({ left, right, move })
+      // console.log('endDrag', { left, right, move })
-
-        this.allBarsInRow.forEach((bar) => {
-          if (this.ganttChartProps.timeaxisMode === 'month_days') {
-            if (left && bar == this.bar) {
-              if (moment(bar[this.barStartKey]).hours() < 12) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0)
-              } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24)
-              }
-            } else if (right && bar == this.bar) {
-              if (moment(bar[this.barEndKey]).hours() < 12) {
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0)
-              } else {
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24)
-              }
-            } else {
-              if (moment(bar[this.barStartKey]).hours() < 12) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0)
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0)
-              } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(24)
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(24)
-              }
-            }
-          } else {
-            if (left && bar == this.bar) {
-              if (moment(bar[this.barStartKey]).minutes() < 30) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0)
-              } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(
-                  60
-                )
-              }
-            } else if (right && bar == this.bar) {
-              if (moment(bar[this.barEndKey]).minutes() < 30) {
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0)
-              } else {
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60)
-              }
-            } else {
-              if (moment(bar[this.barStartKey]).minutes() < 30) {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0)
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0)
-              } else {
-                bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(
-                  60
-                )
-                bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60)
-              }
-            }
-          }
-        })
-      }
-
       this.isDragging = false
       this.dragLimitLeft = null
       this.dragLimitRight = null
@@ -410,7 +353,7 @@ export default {
       window.removeEventListener('mousemove', this.mousemoveCallback)
       window.removeEventListener('mouseup', this.endDrag)
       if (this.isMainBarOfDrag) {
-        this.onDragendBar(e, this)
+        this.onDragendBar(e, this, { left, right, move })
         this.isMainBarOfDrag = false
       }
     },

src/GGanttChart.vue

@@ -65,6 +65,8 @@ export default {
     defaultBarLength: { type: Number, default: 1 },
     // ["month_days", "day_hours"]
     timeaxisMode: { type: String, default: 'month_days' },
+    barStartKey: { type: String, required: true }, // property name of the bar objects that represents the start datetime
+    barEndKey: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
   },
 
   data() {
@@ -73,7 +75,9 @@ export default {
       movedBarsInDrag: new Set(),
       timeUnit: this.timeaxisMode === 'month_days' ? 'days' : 'hours',
       timeFormat:
-        this.timeaxisMode === 'month_days' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm',
+        this.timeaxisMode === 'month_days'
+          ? 'YYYY-MM-DD HH'
+          : 'YYYY-MM-DD HH:mm',
     }
   },
 
@@ -81,7 +85,9 @@ export default {
     timeCount() {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
-      return Math.floor(momentChartEnd.diff(momentChartStart, this.timeUnit, true))
+      return Math.floor(
+        momentChartEnd.diff(momentChartStart, this.timeUnit, true)
+      )
     },
 
     themeColors() {
@@ -177,9 +183,93 @@ export default {
       this.$emit(`${type}-bar`, { event, bar: ganttBar.bar, time })
     },
 
-    onDragendBar(e, ganttBar) {
+    onDragendBar(e, ganttBar, action) {
       let didSnapBack = this.snapBackBundleIfNeeded(ganttBar)
       let movedBars = didSnapBack ? new Set() : this.movedBarsInDrag
+      // Magnetic suction
+      if (movedBars.size && this.isMagnetic) {
+        let { left, right, move } = action
+
+        movedBars.forEach((bar) => {
+          if (this.timeaxisMode === 'month_days') {
+            if (left && bar == ganttBar.bar) {
+              if (moment(bar[this.barStartKey]).hours() < 12) {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .hours(0)
+                  .format()
+              } else {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .hours(24)
+                  .format()
+              }
+            } else if (right && bar == ganttBar.bar) {
+              if (moment(bar[this.barEndKey]).hours() < 12) {
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .hours(0)
+                  .format()
+              } else {
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .hours(24)
+                  .format()
+              }
+            } else {
+              if (moment(bar[this.barStartKey]).hours() < 12) {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .hours(0)
+                  .format()
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .hours(0)
+                  .format()
+              } else {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .hours(24)
+                  .format()
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .hours(24)
+                  .format()
+              }
+            }
+          } else {
+            if (left && bar == ganttBar.bar) {
+              if (moment(bar[this.barStartKey]).minutes() < 30) {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .minutes(0)
+                  .format()
+              } else {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .minutes(60)
+                  .format()
+              }
+            } else if (right && bar == ganttBar.bar) {
+              if (moment(bar[this.barEndKey]).minutes() < 30) {
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .minutes(0)
+                  .format()
+              } else {
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .minutes(60)
+                  .format()
+              }
+            } else {
+              if (moment(bar[this.barStartKey]).minutes() < 30) {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .minutes(0)
+                  .format()
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .minutes(0)
+                  .format()
+              } else {
+                bar[this.barStartKey] = moment(bar[this.barStartKey])
+                  .minutes(60)
+                  .format()
+                bar[this.barEndKey] = moment(bar[this.barEndKey])
+                  .minutes(60)
+                  .format()
+              }
+            }
+          }
+        })
+      }
       this.movedBarsInDrag = new Set()
       this.$emit('dragend-bar', { event: e, bar: ganttBar.bar, movedBars })
     },
@@ -373,7 +463,8 @@ export default {
       setDragLimitsOfGanttBar: (ganttBar) =>
         this.setDragLimitsOfGanttBar(ganttBar),
       onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar),
-      onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar),
+      onDragendBar: (e, ganttBar, action) =>
+        this.onDragendBar(e, ganttBar, action),
       shouldSnapBackOnOverlap: () => this.snapBackOnOverlap,
       snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar),
       getMinGapBetweenBars: () => this.minGapBetweenBars,

src/GGanttRow.vue

@@ -26,8 +26,6 @@
         :key="`ganttastic_bar_${index}`"
         :bar="bar"
         ref="ganttBar"
-        :bar-start-key="barStartKey"
-        :bar-end-key="barEndKey"
         :bar-container="barContainer"
         :all-bars-in-row="bars"
       >
@@ -53,8 +51,6 @@ export default {
   props: {
     label: { type: String, default: 'Row' },
     bars: { type: Array, default: () => [] },
-    barStartKey: { type: String, required: true }, // property name of the bar objects that represents the start datetime
-    barEndKey: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
     highlightOnHover: Boolean,
   },