Started swapping the drag library

package.json

@@ -14,7 +14,7 @@
     "v-tooltip": "^2.0.0-rc.33",
     "verte": "^0.0.12",
     "vue": "^2.5.17",
-    "vue-drag-resize": "^1.3.2"
+    "vue-draggable-resizable": "^2.0.0-rc2"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1",

src/components/tasks/gantt-component.vue

@@ -26,25 +26,25 @@
 		</div>
 		<div class="tasks" :style="{'width': fullWidth + 'px'}">
 			<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
-				<VueDragResize
+				<vue-draggable-resizable
 						class="task"
 						:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id, 'has-light-text': !t.hasDarkColor(), 'has-dark-text': t.hasDarkColor()}"
                         :style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
-                        :isActive="true"
+                        :active="true"
 						:x="t.offsetDays * dayWidth - 6"
 						:y="0"
-						:w="t.durationDays * dayWidth"
+						:w="calcWidth(t)"
 						:h="31"
-						:minw="dayWidth"
+						:minWidth="dayWidth"
-						:snapToGrid="true"
+						:grid="[dayWidth, 1]"
-						:gridX="dayWidth"
+						:handles="['mr', 'ml']"
-						:sticks="['mr', 'ml']"
 						axis="x"
-						:parentLimitation="true"
+						parent=".row"
 						:parentW="fullWidth"
+						:onDragStart="setDraggedTask(t)"
+						:onResizeStart="setDraggedTask(t)"
 						@resizestop="resizeTask"
 						@dragstop="resizeTask"
-						@clicked="taskDragged = t"
 				>
                     <span :class="{
                     'has-high-priority': t.priority >= priorities.HIGH,
@@ -66,30 +66,31 @@
                     <a @click="editTask(theTasks[k])" class="edit-toggle">
                         <icon icon="pen"/>
                     </a>
-                 </VueDragResize>
+                 </vue-draggable-resizable>
 			</div>
 			<template v-if="showTaskswithoutDates">
 				<div class="row" v-for="(t, k) in tasksWithoutDates" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
-					<VueDragResize
+					<vue-draggable-resizable
 							class="task nodate"
-							:isActive="true"
+							:active="true"
 							:x="dayOffsetUntilToday * dayWidth - 6"
 							:y="0"
 							:h="31"
-							:minw="dayWidth"
+							:minWidth="dayWidth"
 							:snapToGrid="true"
-							:gridX="dayWidth"
+							:grid="[dayWidth, 1]"
-							:sticks="['mr', 'ml']"
+							:handles="['mr', 'ml']"
 							axis="x"
-							:parentLimitation="true"
+							:parent="true"
 							:parentW="fullWidth"
+							:onDragStart="setDraggedTask(t)"
+							:onResizeStart="setDraggedTask(t)"
 							@resizestop="resizeTask"
 							@dragstop="resizeTask"
-							@clicked="taskDragged = t"
 							v-tooltip="'This task has no dates set.'"
 					>
 						<span>{{t.text}}</span>
-					</VueDragResize>
+					</vue-draggable-resizable>
 				</div>
 			</template>
 		</div>
@@ -135,7 +136,7 @@
 </template>
 
 <script>
-	import VueDragResize from 'vue-drag-resize'
+	import VueDraggableResizable from 'vue-draggable-resizable'
 	import message from '../../message'
 	import EditTask from './edit-task'
 
@@ -148,7 +149,7 @@
 		name: 'GanttChart',
 		components: {
 			EditTask,
-			VueDragResize,
+			VueDraggableResizable,
 		},
 		props: {
 			list: {
@@ -258,32 +259,59 @@
 						return 0
 					})
 			},
+			calcWidth(t) {
+				return t.durationDays * this.dayWidth
+			},
 			addGantAttributes(t) {
-				t.endDate === null ? this.endDate : t.endDate
+				t.endDate = (t.endDate === null || t.endDate === 0) ? this.endDate : t.endDate
 				t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
 				t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
 				return t
 			},
-			resizeTask(newRect) {
+			setDraggedTask(t) {
+				this.taskDragged = t
+				// eslint-disable-next-line
+				console.log('set task dragged')
+			},
+			resizeTask(x, y, width) {
 
 				// Timeout to definitly catch if the user clicked on taskedit
-				setTimeout(() => {
+				let tt = setInterval(() => {
+
+					// We let the interval here run as long as taskDragged is not set, which means this function has been called
+					// before setDraggedTask.
+					// Once taskDragged is not empty, we run the actual code and cancel the timeout loop.
+					// This is pretty ugly...
+					if(this.taskDragged !== null && this.taskDragged !== undefined) {
+						clearInterval(tt)
+					} else {
+						// eslint-disable-next-line
+						console.log('fckin js')
+						return
+					}
 
 					if(this.isTaskEdit) {
 						return
 					}
 
+					// eslint-disable-next-line
+					console.log('finally doing stuff', this.taskDragged)
+
+					// If the function was called from the drag handler, we need to calculate the width ourselves
+					if (parseInt(width) === 0 || width === undefined) {
+						width = this.taskDragged.durationDays * this.dayWidth
+					}
+
 					let didntHaveDates = this.taskDragged.startDate === null ? true : false
 
 					let startDate = new Date(this.startDate)
-					startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
+					startDate.setDate(startDate.getDate() + x / this.dayWidth + 1)
 					startDate.setUTCHours(0)
 					startDate.setUTCMinutes(0)
 					startDate.setUTCSeconds(0)
 					startDate.setUTCMilliseconds(0)
-					this.taskDragged.startDate = startDate
 					let endDate = new Date(startDate)
-					endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
+					endDate.setDate(endDate.getDate() + width / this.dayWidth)
 					this.taskDragged.startDate = startDate
 					this.taskDragged.endDate = endDate
 

src/styles/gantt.scss

@@ -58,17 +58,17 @@ $gantt-vertical-border-color: lighten($grey, 45);
 
     .row {
       height: 45px;
+      padding: 0.5em;
 
       .task {
         display: inline-block;
         border: 2px solid $primary;
         background: lighten($primary, 40);
         font-size: 0.85em;
-        margin: 0.5em;
         border-radius: 6px;
         padding: 0.25em 0.5em;
         cursor: grab;
-        position: relative;
+        position: relative !important;
 
         -webkit-touch-callout: none; // iOS Safari
         -webkit-user-select: none; // Safari

yarn.lock

@@ -9338,10 +9338,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
-vue-drag-resize@^1.3.2:
+vue-draggable-resizable@^2.0.0-rc2:
-  version "1.3.2"
+  version "2.0.0-rc2"
-  resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz#99132a99746c878e4596fad08d36c98f604930a3"
+  resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.0.0-rc2.tgz#492925541eabebeb5b805b2fafb358ff27927d24"
-  integrity sha512-XiSEep3PPh9IPQqa4vIy/YENBpYch2SIPNipcPAEGhaSa0V8A8gSq9s7JQ66p/hiINdnR7f5ZqAkOdm6zU/4Gw==
+  integrity sha512-ctVl5elVhRT3Py1vFqCOcbdCyFdbPq9Y0SQJ/96/MWcBQ4vod2pJNwWe00BS8H2iT7hCUaUJfMcMH8200L1jmg==
 
 vue-eslint-parser@^2.0.3:
   version "2.0.3"