diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..b7980dd --- /dev/null +++ b/.npmignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist +src/Playground.vue + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? \ No newline at end of file diff --git a/README.md b/README.md index ec78207..e109381 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,18 @@ export default { ## Contributing Pull requests are warmly welcomed, while every major change or proposal ought to be discussed in an issue first. As the project is still new, I will gladly accept suggestions, proposals, contributions etc. +### Contributing - How to run the project + 1. Clone the project + 2. Install the Vue CLI service, if you don't already have it installed: + ``` + npm install -g @vue/cli + npm install -g @vue/cli-service-global + ``` + 3. Playground.vue is a dedicated Vue SFC where all Vue-Ganttastic components can be + played around with and tested out. Get it running using: + ``` + vue serve src/Playground.vue + ``` ## Dependencies [Moment.js](https://momentjs.com/) diff --git a/package-lock.json b/package-lock.json index f7de915..f13e818 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "vue-ganttastic-beta", - "version": "0.9.1", + "name": "vue-ganttastic", + "version": "0.9.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 875b3a2..6b031a0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,11 @@ { "name": "vue-ganttastic", - "version": "0.9.4", + "version": "0.9.5", "description": "A simple and customizable Gantt chart component for Vue.js", + "repository": { + "type": "git", + "url": "https://github.com/InfectoOne/vue-ganttastic" + }, "main": "./dist/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/src/GGanttBar.vue b/src/GGanttBar.vue index 448fccc..f5b9b78 100644 --- a/src/GGanttBar.vue +++ b/src/GGanttBar.vue @@ -78,7 +78,9 @@ export default { // or is it dragged along some other bar from the same bundle cursorOffsetX: 0, mousemoveCallback: null, // gets initialized when starting to drag - // possible values: drag, dragByHandleLeft, dragByHandleRight + // possible values: drag, dragByHandleLeft, dragByHandleRight, + barStartBeforeDrag: null, + barEndBeforeDrag: null, } }, @@ -178,6 +180,8 @@ export default { /* --------------------------------------------------------- */ initDrag(e){ // "e" must be the mousedown event this.isDragging = true + this.barStartBeforeDrag = this.bar[this.barStart] + this.barEndBeforeDrag = this.bar[this.barEnd] let barX = this.$refs["g-gantt-bar"].getBoundingClientRect().left this.cursorOffsetX = e.clientX - barX let mousedownType = e.target.className @@ -252,6 +256,11 @@ export default { } }, + snapBack(){ + this.barStartMoment = this.barStartBeforeDrag + this.barEndMoment = this.barEndBeforeDrag + }, + manageOverlapping(){ if(!this.ganttChartProps.pushOnOverlap){ return diff --git a/src/GGanttChart.vue b/src/GGanttChart.vue index 6e81212..f9688b2 100644 --- a/src/GGanttChart.vue +++ b/src/GGanttChart.vue @@ -56,7 +56,8 @@ export default { grid: Boolean, highlightedHours: {type: Array, default: () => []}, width: {type: String, default: "100%"}, // the total width of the entire ganttastic component in % - pushOnOverlap: {type: Boolean} + pushOnOverlap: {type: Boolean}, + snapBackOnOverlap: {type: Boolean}, }, data(){ @@ -126,14 +127,33 @@ export default { }) }, + shouldSnapBackBar(ganttBar){ + if(this.snapBackOnOverlap){ + let {overlapBar} = ganttBar.getOverlapBarAndType(ganttBar.bar) + return !!overlapBar + } + return false + }, + + snapBackBundleIfNeeded(ganttBar){ + let barsFromBundle = this.getBarsFromBundle(ganttBar.barConfig.bundle) + if(this.shouldSnapBackBar(ganttBar) || barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))){ + ganttBar.snapBack() + barsFromBundle.forEach(gBar => gBar.snapBack()) + return true + } + return false + }, + onBarEvent(e, ganttBar){ this.$emit(`${e.type}-bar`, {event: e, bar: ganttBar.bar}) }, onDragendBar(e, ganttBar){ - let movedBarsInDrag = this.movedBarsInDrag + let didSnapBack = this.snapBackBundleIfNeeded(ganttBar) + let movedBars = didSnapBack ? new Set() : this.movedBarsInDrag this.movedBarsInDrag = new Set() - this.$emit("dragend-bar", {event: e, bar: ganttBar.bar, movedBars: movedBarsInDrag}) + this.$emit("dragend-bar", {event: e, bar: ganttBar.bar, movedBars}) }, // ------------------------------------------------------------------------ @@ -260,7 +280,9 @@ export default { moveBarsFromBundleOfPushedBar: (bar, minuteDiff, overlapType) => this.moveBarsFromBundleOfPushedBar(bar, minuteDiff, overlapType), setDragLimitsOfGanttBar : (ganttBar) => this.setDragLimitsOfGanttBar(ganttBar), onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar), - onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar) + onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar), + shouldSnapBackOnOverlap: () => this.snapBackOnOverlap, + snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar) } } } diff --git a/src/Playground.vue b/src/Playground.vue new file mode 100644 index 0000000..bbb9bf8 --- /dev/null +++ b/src/Playground.vue @@ -0,0 +1,176 @@ + + + + + + \ No newline at end of file