diff --git a/src/GGanttBar.vue b/src/GGanttBar.vue index e22d8ba..0d9dce9 100644 --- a/src/GGanttBar.vue +++ b/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 }) - - 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) - } - } - } - }) - } - + // console.log('endDrag', { left, right, move }) 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 } }, diff --git a/src/GGanttChart.vue b/src/GGanttChart.vue index 4e6d449..d8e2988 100644 --- a/src/GGanttChart.vue +++ b/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, diff --git a/src/GGanttRow.vue b/src/GGanttRow.vue index a8189c3..7c5fa7e 100644 --- a/src/GGanttRow.vue +++ b/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, },