feat: add magnetic effect

src/GGanttBar.vue

@@ -35,9 +35,9 @@
               this.barStyle.background || this.barStyle.backgroundColor,
           }"
         />
-        {{ bar[barStart] }}
+        {{ barStartText }}
         -
-        {{ bar[barEnd] }}
+        {{ barEndText }}
       </div>
     </transition>
   </div>
@@ -51,8 +51,8 @@ export default {
 
   props: {
     bar: { type: Object },
-    barStart: { type: String }, // property name of the bar objects that represents the start datetime
+    barStartKey: { type: String }, // property name of the bar objects that represents the start datetime,
-    barEnd: { type: String }, // property name of the bar objects that represents the end datetime,
+    barEndKey: { type: String }, // property name of the bar objects that represents the end datetime,
     barContainer: [Object, DOMRect],
     allBarsInRow: { type: Array },
   },
@@ -85,29 +85,43 @@ export default {
       barStartBeforeDrag: null,
       barEndBeforeDrag: null,
       timeUnit: this.getTimeUnit(),
-      timeChildKey: this.getTimeUnit() === 'days' ? 'hours' : 'minutes',
+      timeChildKey:
+        this.ganttChartProps.timeaxisMode === 'month_days'
+          ? 'hours'
+          : 'minutes',
+      timeChildFormat:
+        this.ganttChartProps.timeaxisMode === 'month_days' ? 'MM-DD' : 'HH:mm',
       timeFormat: this.getTimeFormat(),
     }
   },
 
   computed: {
-    // use these computed moment objects to work with the bar's start/end dates:
-    // instead of directly mutating them:
     barStartMoment: {
-      get() {
+      get: function () {
-        return moment(this.bar[this.barStart])
+        return moment(this.bar[this.barStartKey], this.timeFormat)
       },
-      set(value) {
+      set: function (value) {
-        this.bar[this.barStart] = moment(value).format(this.timeFormat)
+        this.bar[this.barStartKey] = value.format(this.timeFormat)
+      },
+    },
+    barEndMoment: {
+      get: function () {
+        return moment(this.bar[this.barEndKey])
+      },
+      set: function (value) {
+        this.bar[this.barEndKey] = value.format(this.timeFormat)
+      },
+    },
+    barStartText: {
+      get() {
+        return moment(this.barStartMoment).format(this.timeChildFormat)
       },
     },
 
-    barEndMoment: {
+    barEndText: {
       get() {
-        return moment(this.bar[this.barEnd])
+        let endMoment = moment(this.barEndMoment)
-      },
+        return endMoment.format(this.timeChildFormat)
-      set(value) {
-        this.bar[this.barEnd] = moment(value).format(this.timeFormat)
       },
     },
 
@@ -128,6 +142,8 @@ export default {
     },
 
     barStyle() {
+      if (!this.barContainer.width) return
+
       let xStart = this.mapTimeToPosition(this.barStartMoment)
       let xEnd = this.mapTimeToPosition(this.barEndMoment)
       return {
@@ -228,8 +244,9 @@ export default {
     initDrag(e) {
       // "e" must be the mousedown event
       this.isDragging = true
-      this.barStartBeforeDrag = this.bar[this.barStart]
+      this.barStartBeforeDrag = this.bar[this.barStartKey]
-      this.barEndBeforeDrag = this.bar[this.barEnd]
+      this.barEndBeforeDrag = this.bar[this.barEndKey]
+
       let barX = this.$refs['g-gantt-bar'].getBoundingClientRect().left
       this.cursorOffsetX = e.clientX - barX
       let mousedownType = e.target.className
@@ -239,7 +256,7 @@ export default {
           this.mousemoveCallback = this.dragByHandleLeft
           break
         case 'g-gantt-bar-handle-right':
-          document.body.style.cursor = 'w-resize'
+          document.body.style.cursor = 'e-resize'
           this.mousemoveCallback = this.dragByHandleRight
           break
         default:
@@ -279,7 +296,7 @@ export default {
       let newXEnd = e.clientX - this.barContainer.left
       let newEndMoment = this.mapPositionToTime(newXEnd)
       if (
-        newEndMoment.isSameOrBefore(this.barStartMoment) ||
+        newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) ||
         this.isPosOutOfDragRange(null, newXEnd)
       ) {
         return
@@ -289,13 +306,13 @@ export default {
     },
 
     isPosOutOfDragRange(xStart, xEnd) {
-      // 不能推动旁边的bar时，拖拽就不停止
-      if (!this.ganttChartProps.pushOnOverlap) {
-        return false
-      }
       if (xStart && xStart < 0) {
         return true
       }
+      // 设置允许推动旁边的bar时，拖拽到到位置就算进入了重叠，也不算超出范围
+      if (this.ganttChartProps.pushOnOverlap) {
+        return false
+      }
       if (
         xStart &&
         this.dragLimitLeft !== null &&
@@ -314,6 +331,78 @@ export default {
     },
 
     endDrag(e) {
+      // Magnetic suction
+
+      if (this.ganttChartProps.isMagnetic) {
+        let left = false,
+          right = false,
+          move = false
+        switch (document.body.style.cursor) {
+          case 'e-resize':
+            right = true
+            break
+          case 'w-resize':
+            left = true
+            break
+          default:
+            move = true
+            break
+        }
+        console.log({ 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
@@ -327,8 +416,8 @@ export default {
     },
 
     snapBack() {
-      this.barStartMoment = this.barStartBeforeDrag
+      this.barStartMoment = moment(this.barStartBeforeDrag)
-      this.barEndMoment = this.barEndBeforeDrag
+      this.barEndMoment = moment(this.barEndBeforeDrag)
     },
 
     manageOverlapping() {
@@ -342,10 +431,10 @@ export default {
       let { overlapBar, overlapType } = this.getOverlapBarAndType(currentBar)
       while (overlapBar) {
         let minuteDiff
-        let currentStartMoment = moment(currentBar[this.barStart])
+        let currentStartMoment = moment(currentBar[this.barStartKey])
-        let currentEndMoment = moment(currentBar[this.barEnd])
+        let currentEndMoment = moment(currentBar[this.barEndKey])
-        let overlapStartMoment = moment(overlapBar[this.barStart])
+        let overlapStartMoment = moment(overlapBar[this.barStartKey])
-        let overlapEndMoment = moment(overlapBar[this.barEnd])
+        let overlapEndMoment = moment(overlapBar[this.barEndKey])
         switch (overlapType) {
           case 'left':
             minuteDiff =
@@ -354,10 +443,10 @@ export default {
                 this.timeChildKey,
                 true
               ) + this.getMinGapBetweenBars()
-            overlapBar[this.barEnd] = currentStartMoment
+            overlapBar[this.barEndKey] = currentStartMoment
               .subtract(this.getMinGapBetweenBars(), this.timeChildKey, true)
               .format(this.timeFormat)
-            overlapBar[this.barStart] = overlapStartMoment
+            overlapBar[this.barStartKey] = overlapStartMoment
               .subtract(minuteDiff, this.timeChildKey, true)
               .format(this.timeFormat)
             break
@@ -368,10 +457,10 @@ export default {
                 this.timeChildKey,
                 true
               ) + this.getMinGapBetweenBars()
-            overlapBar[this.barStart] = currentEndMoment
+            overlapBar[this.barStartKey] = currentEndMoment
               .add(this.getMinGapBetweenBars(), this.timeChildKey, true)
               .format(this.timeFormat)
-            overlapBar[this.barEnd] = overlapEndMoment
+            overlapBar[this.barEndKey] = overlapEndMoment
               .add(minuteDiff, this.timeChildKey, true)
               .format(this.timeFormat)
             break
@@ -389,8 +478,8 @@ export default {
     },
 
     getOverlapBarAndType(bar) {
-      let barStartMoment = moment(bar[this.barStart])
+      let barStartMoment = moment(bar[this.barStartKey])
-      let barEndMoment = moment(bar[this.barEnd])
+      let barEndMoment = moment(bar[this.barEndKey])
       let overlapLeft, overlapRight, overlapInBetween
       let overlapBar = this.allBarsInRow.find((otherBar) => {
         if (
@@ -399,13 +488,20 @@ export default {
         ) {
           return false
         }
-        let otherBarStart = moment(otherBar[this.barStart])
+        let otherBarStartMoment = moment(otherBar[this.barStartKey])
-        let otherBarEnd = moment(otherBar[this.barEnd])
+        let otherBarEndMoment = moment(otherBar[this.barEndKey])
-        overlapLeft = barStartMoment.isBetween(otherBarStart, otherBarEnd)
+
-        overlapRight = barEndMoment.isBetween(otherBarStart, otherBarEnd)
+        overlapLeft = barStartMoment.isBetween(
+          otherBarStartMoment,
+          otherBarEndMoment
+        )
+        overlapRight = barEndMoment.isBetween(
+          otherBarStartMoment,
+          otherBarEndMoment
+        )
         overlapInBetween =
-          otherBarStart.isBetween(barStartMoment, barEndMoment) ||
+          otherBarStartMoment.isBetween(barStartMoment, barEndMoment) ||
-          otherBarEnd.isBetween(barStartMoment, barEndMoment)
+          otherBarEndMoment.isBetween(barStartMoment, barEndMoment)
         return overlapLeft || overlapRight || overlapInBetween
       })
       let overlapType = overlapLeft
@@ -420,35 +516,35 @@ export default {
 
     // this is used in GGanttChart, when a bar from a bundle is pushed
     // so that bars from its bundle also get pushed
-    moveBarByMinutesAndPush(minuteCount, direction) {
+    moveBarByChildPointsAndPush(childPointCount, direction) {
       switch (direction) {
         case 'left':
           this.barStartMoment = moment(this.barStartMoment).subtract(
-            minuteCount,
+            childPointCount,
             this.timeChildKey,
             true
           )
           this.barEndMoment = moment(this.barEndMoment).subtract(
-            minuteCount,
+            childPointCount,
             this.timeChildKey,
             true
           )
           break
         case 'right':
           this.barStartMoment = moment(this.barStartMoment).add(
-            minuteCount,
+            childPointCount,
             this.timeChildKey,
             true
           )
           this.barEndMoment = moment(this.barEndMoment).add(
-            minuteCount,
+            childPointCount,
             this.timeChildKey,
             true
           )
           break
         default:
           // eslint-disable-next-line
-          console.warn('wrong direction in moveBarByMinutesAndPush')
+          console.warn('wrong direction in moveBarByChildPointsAndPush')
           return
       }
       this.manageOverlapping()
@@ -463,7 +559,9 @@ export default {
         this.timeUnit,
         true
       )
-      return (timeDiffFromStart / this.getTimeCount()) * this.barContainer.width
+      let pos =
+        (timeDiffFromStart / this.getTimeCount()) * this.barContainer.width
+      return pos
     },
 
     mapPositionToTime(xPos) {
@@ -519,15 +617,16 @@ export default {
   background: white;
   opacity: 0.7;
   border-radius: 40px;
-  cursor: w-resize;
 }
 
 .g-gantt-bar-handle-left {
   left: 0;
+  cursor: w-resize;
 }
 
 .g-gantt-bar-handle-right {
   right: 0;
+  cursor: e-resize;
 }
 
 .g-gantt-bar-label img {

src/GGanttChart.vue

@@ -56,6 +56,7 @@ export default {
     highlightedHours: { type: Array, default: () => [] },
     width: { type: String, default: '100%' }, // the total width of the entire ganttastic component in %
     pushOnOverlap: { type: Boolean },
+    isMagnetic: { type: Boolean },
     snapBackOnOverlap: { type: Boolean },
     minGapBetweenBars: {
       type: Number,
@@ -72,7 +73,7 @@ export default {
       movedBarsInDrag: new Set(),
       timeUnit: this.timeaxisMode === 'month_days' ? 'days' : 'hours',
       timeFormat:
-        this.timeaxisMode === 'month_days' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm',
+        this.timeaxisMode === 'month_days' ? 'YYYY-MM-DD HH' : 'YYYY-MM-DD HH:mm',
     }
   },
 
@@ -142,7 +143,7 @@ export default {
           ganttBarChild.barConfig.bundle === bundleId &&
           ganttBarChild.bar !== pushedBar
         ) {
-          ganttBarChild.moveBarByMinutesAndPush(minuteDiff, overlapType)
+          ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType)
           this.movedBarsInDrag.add(ganttBarChild.bar)
         }
       })
@@ -377,9 +378,8 @@ export default {
       snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar),
       getMinGapBetweenBars: () => this.minGapBetweenBars,
       getDefaultBarLength: () => this.defaultBarLength,
-      getTimeaxisMode: () => this.timeaxisMode,
       getTimeUnit: () => this.timeUnit,
-      getTimeFormat: () => this.timeFormat
+      getTimeFormat: () => this.timeFormat,
     }
   },
 }

src/GGanttGrid.vue

@@ -7,11 +7,11 @@
     }"
   >
     <div
-      v-for="(hour, index) in allHours"
+      v-for="(childPoint, index) in allChildPoints"
       :key="index"
       :class="{
         'g-grid-line': true,
-        'g-grid-line-highlighted': highlightedHours.includes(hour),
+        'g-grid-line-highlighted': highlightedHours.includes(childPoint),
       }"
     />
   </div>
@@ -23,7 +23,7 @@ import moment from 'moment'
 export default {
   name: 'GGanttGrid',
 
-  inject: ['getTimeaxisMode'],
+  inject: ['ganttChartProps'],
 
   props: {
     chartStart: { type: String },
@@ -33,11 +33,11 @@ export default {
   },
 
   computed: {
-    allHours() {
+    allChildPoints() {
       let momentChartStart = moment(this.chartStart)
       let momentChartEnd = moment(this.chartEnd)
       let res = []
-      const timeaxisMode = this.getTimeaxisMode()
+      const timeaxisMode = this.ganttChartProps.timeaxisMode
       while (momentChartStart.isSameOrBefore(momentChartEnd)) {
         if (timeaxisMode === 'month_days') {
           res.push(momentChartStart.date())

src/GGanttRow.vue

@@ -26,8 +26,8 @@
         :key="`ganttastic_bar_${index}`"
         :bar="bar"
         ref="ganttBar"
-        :bar-start="barStart"
+        :bar-start-key="barStartKey"
-        :bar-end="barEnd"
+        :bar-end-key="barEndKey"
         :bar-container="barContainer"
         :all-bars-in-row="bars"
       >
@@ -53,8 +53,8 @@ export default {
   props: {
     label: { type: String, default: 'Row' },
     bars: { type: Array, default: () => [] },
-    barStart: { type: String, required: true }, // property name of the bar objects that represents the start datetime
+    barStartKey: { type: String, required: true }, // property name of the bar objects that represents the start datetime
-    barEnd: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
+    barEndKey: { type: String, required: true }, // property name of the bar objects that represents the end datetime,
     highlightOnHover: Boolean,
   },
 
@@ -103,15 +103,9 @@ export default {
     onDragover(e) {
       e.preventDefault() // enables dropping content on row
       if (this.highlightOnHover) {
-        console.log({
-          backgroundColor: this.$refs['g-gantt-row'].style.backgroundColor,
-        })
         this.$refs[
           'g-gantt-row'
         ].style.backgroundColor = this.getThemeColors().hoverHighlight
-        console.log({
-          backgroundColor: this.$refs['g-gantt-row'].style.backgroundColor,
-        })
       }
     },
 

src/GGanttTimeaxis.vue

@@ -55,7 +55,7 @@ import moment from 'moment'
 export default {
   name: 'GGanttTimeaxis',
 
-  inject: ['getTimeaxisMode', 'getTimeUnit', 'getTimeFormat'],
+  inject: ['ganttChartProps', 'getTimeUnit', 'getTimeFormat'],
 
   props: {
     chartStart: String,
@@ -73,9 +73,9 @@ export default {
       timemarker: null,
       hourFontSize: '11px',
       dayFormat: 'MM-DD', // ISO 8601
-      mode: this.getTimeaxisMode(),
+      mode: this.ganttChartProps.timeaxisMode,
       timeUnit: this.getTimeUnit(),
-      timeFormat: this.getTimeFormat()
+      timeFormat: this.getTimeFormat(),
     }
   },
 
@@ -198,17 +198,17 @@ export default {
       }
     },
 
-    monthFormatted(month) {
+    monthFormatted(point) {
       // do not display month text if the month is smaller than x%
-      return month.widthPercentage >= (1 / 32) * 100
+      return point.widthPercentage >= (1 / 32) * 100
-        ? moment().locale(this.locale).localeData().months(month.value)
+        ? moment().locale(this.locale).localeData().months(point.value)
         : ''
     },
 
-    dayFormatted(day) {
+    dayFormatted(point) {
       // do not display day text if the day is smaller than 12%
-      return day.widthPercentage >= 12
+      return point.widthPercentage >= 12
-        ? moment(day.value).locale(this.locale).format(this.dayFormat)
+        ? moment(point.value).locale(this.locale).format(this.dayFormat)
         : ''
     },
   },

src/Playground.vue

@@ -2,33 +2,35 @@
 <template>
   <div>
     <g-gantt-chart
-        :chart-start="chartStart"
+      :chart-start="chartStart"
-        :chart-end="chartEnd"
+      :chart-end="chartEnd"
-        :grid="grid"
+      :grid="grid"
-        :hide-timeaxis="hideTimeaxis"
+      :hide-timeaxis="hideTimeaxis"
-        :push-on-overlap="true"
+      :push-on-overlap="pushOnOverlap"
-        snap-back-on-overlap
+      snap-back-on-overlap
-        :highlighted-hours="highlightedHours"
+      timeaxisMode="day_hours"
-        :row-label-width="`${rowLabelWidth}%`"
+      :is-magnetic="isMagnetic"
-        :row-height="rowHeight"
+      :highlighted-hours="highlightedHours"
-        :theme="selectedTheme"
+      :row-label-width="`${rowLabelWidth}%`"
-        @dragend-bar="onDragend($event)"
+      :row-height="rowHeight"
-      >
+      :theme="selectedTheme"
-        <template v-for="row in rowList">
+      @dragend-bar="onDragend($event)"
-          <g-gantt-row 
+    >
-            :key="row.label"
+      <template v-for="row in rowList">
-            :label="row.label"
+        <g-gantt-row
-            :bars="row.barList"
+          :key="row.label"
-            :highlight-on-hover="highlightOnHover"
+          :label="row.label"
-            bar-start="myStart"
+          :bars="row.barList"
-            bar-end="myEnd"
+          :highlight-on-hover="highlightOnHover"
-          >
+          bar-start-key="myStart"
-            <template #bar-label="{bar}">
+          bar-end-key="myEnd"
-              <span>{{bar.label}}</span>
+        >
-            </template>
+          <template #bar-label="{ bar }">
-          </g-gantt-row>
+            <span>{{ bar.label }}</span>
-        </template>
+          </template>
-      </g-gantt-chart>
+        </g-gantt-row>
+      </template>
+    </g-gantt-chart>
   </div>
 </template>
 
@@ -37,144 +39,186 @@ import GGanttChart from './GGanttChart.vue'
 import GGanttRow from './GGanttRow.vue'
 
 export default {
-  components:{
+  components: {
     GGanttChart,
-    GGanttRow
+    GGanttRow,
   },
-  data(){
+  data() {
     return {
-      chartStart: "2020-03-02 00:00",
+      chartStart: '2020-03-02 00:00',
-      chartEnd: "2020-03-04 00:00",
+      chartEnd: '2020-03-04 00:00',
       pushOnOverlap: true,
+      isMagnetic: true,
       grid: true,
       rowHeight: 40,
       rowLabelWidth: 15,
       hideTimeaxis: false,
       highlightOnHover: false,
       hours: [...Array(24).keys()],
-      highlightedHours: [10,12],
+      highlightedHours: [10, 12],
       showContextmenu: false,
       contextmenuTimeout: null,
       contextmenuX: 0,
       contextmenuY: 0,
-      selectedTheme: "default",
+      selectedTheme: 'default',
       themes: [
-        "default",
+        'default',
-        "vue",
+        'vue',
-        "dark",
+        'dark',
-        "material-blue",
+        'material-blue',
-        "creamy",
+        'creamy',
-        "slumber",
+        'slumber',
-        "sky",
+        'sky',
-        "crimson",
+        'crimson',
-        "grove",
+        'grove',
-        "fuchsia",
+        'fuchsia',
-        "flare"
+        'flare',
       ],
       rowList: [
         {
-          label: "Row #1",
+          label: 'Row #1',
           barList: [
             {
-              myStart: "2020-03-03 18:00",
+              myStart: '2020-03-03 18:00',
-              myEnd: "2020-03-03 23:00",
+              myEnd: '2020-03-03 23:00',
-              label: "Immobile",
+              label: 'Immobile',
-              ganttBarConfig: {color:"white", backgroundColor: "#404040", opacity: 0.5, immobile: true}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#404040',
+                opacity: 0.5,
+                immobile: true,
+              },
             },
             {
-              myStart: "2020-03-03 04:00",
+              myStart: '2020-03-03 04:00',
-              myEnd: "2020-03-03 15:00",
+              myEnd: '2020-03-03 15:00',
-              label: "Bar",
+              label: 'Bar',
-              ganttBarConfig: {color:"white", backgroundColor: "#2e74a3", bundle: "blueBundle"}
+              ganttBarConfig: {
-            }
+                color: 'white',
-          ]
+                backgroundColor: '#2e74a3',
+                bundle: 'blueBundle',
+              },
+            },
+          ],
         },
 
         {
-          label: "Row #2",
+          label: 'Row #2',
           barList: [
             {
-              myStart: "2020-03-02 09:00",
+              myStart: '2020-03-02 09:00',
-              myEnd: "2020-03-02 18:00",
+              myEnd: '2020-03-02 18:00',
-              image: "vue_ganttastic_logo_no_text.png",
+              image: 'vue_ganttastic_logo_no_text.png',
-              label: "I have an image",
+              label: 'I have an image',
-              ganttBarConfig: {color:"white", backgroundColor: "#de3b26", bundle:"redBundle"}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#de3b26',
+                bundle: 'redBundle',
+              },
             },
             {
-              myStart: "2020-03-03 04:00",
+              myStart: '2020-03-03 04:00',
-              myEnd: "2020-03-03 15:00",
+              myEnd: '2020-03-03 15:00',
-              label: "We belong together ^",
+              label: 'We belong together ^',
-              ganttBarConfig: {color:"white", backgroundColor: "#2e74a3", bundle:"blueBundle"}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#2e74a3',
+                bundle: 'blueBundle',
+              },
             },
             {
-              myStart: "2020-03-03 18:00",
+              myStart: '2020-03-03 18:00',
-              myEnd: "2020-03-03 22:00",
+              myEnd: '2020-03-03 22:00',
-              label: "Bar",
+              label: 'Bar',
-              ganttBarConfig: {color:"white", backgroundColor: "#aa34a3"}
+              ganttBarConfig: { color: 'white', backgroundColor: '#aa34a3' },
-            }
+            },
-          ]
+          ],
         },
 
         {
-          label: "Row #3",
+          label: 'Row #3',
           barList: [
             {
-              myStart: "2020-03-02 09:00",
+              myStart: '2020-03-02 09:00',
-              myEnd: "2020-03-02 18:00",
+              myEnd: '2020-03-02 18:00',
-              label: "I am with stupid ^",
+              label: 'I am with stupid ^',
-              ganttBarConfig: {color:"white", backgroundColor: "#de3b26", bundle: "redBundle"}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#de3b26',
+                bundle: 'redBundle',
+              },
             },
             {
-              myStart: "2020-03-02 22:30",
+              myStart: '2020-03-02 22:30',
-              myEnd: "2020-03-03 05:00",
+              myEnd: '2020-03-03 05:00',
-              label: "With handles!",
+              label: 'With handles!',
-              ganttBarConfig: {color:"white", backgroundColor: "#a23def", handles: true}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#a23def',
+                handles: true,
+              },
             },
             {
-              myStart: "2020-03-02 01:00",
+              myStart: '2020-03-02 01:00',
-              myEnd: "2020-03-02 07:00",
+              myEnd: '2020-03-02 07:00',
-              label: "Bar",
+              label: 'Bar',
-              ganttBarConfig: {color:"white", backgroundColor: "#5effad", pushOnOverlap: false, zIndex: 3}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#5effad',
+                pushOnOverlap: false,
+                zIndex: 3,
+              },
             },
             {
-              myStart: "2020-03-03 14:00",
+              myStart: '2020-03-03 14:00',
-              myEnd: "2020-03-03 20:00",
+              myEnd: '2020-03-03 20:00',
-              label: "Woooow!",
+              label: 'Woooow!',
-              ganttBarConfig: {color:"white", background: "repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)"}
+              ganttBarConfig: {
-            }, 
+                color: 'white',
-          ]
+                background:
+                  'repeating-linear-gradient(45deg,#de7359,#de7359 10px,#ffc803 10px,#ffc803 20px)',
+              },
+            },
+          ],
         },
 
         {
-          label: "Row #4",
+          label: 'Row #4',
           barList: [
             {
-              myStart: "2020-03-03 06:30",
+              myStart: '2020-03-03 06:30',
-              myEnd: "2020-03-03 20:00",
+              myEnd: '2020-03-03 20:00',
-              label: "Bar",
+              label: 'Bar',
-              ganttBarConfig:{color:"white", backgroundColor: "#d18aaf", handles: true}
+              ganttBarConfig: {
+                color: 'white',
+                backgroundColor: '#d18aaf',
+                handles: true,
+              },
             },
             {
-              myStart: "2020-03-02 00:30",
+              myStart: '2020-03-02 00:30',
-              myEnd: "2020-03-03 01:00",
+              myEnd: '2020-03-03 01:00',
-              label: "Rectangular",
+              label: 'Rectangular',
-              ganttBarConfig: {color:"white", backgroundColor: "#f2840f", borderRadius: 0}
+              ganttBarConfig: {
-            }, 
+                color: 'white',
-          ]
+                backgroundColor: '#f2840f',
-        }
+                borderRadius: 0,
-
+              },
-      ]
+            },
+          ],
+        },
+      ],
     }
   },
 
   methods: {
-    onDragend(e){
+    onDragend(e) {
-      console.log(e)
+      let {event, bar} = e
-    }
+      console.log('onDragend', {event: event.type, bar})
-  }
+    },
+  },
 }
 </script>
 
 <style>
-
 </style>