mirror of
https://github.com/tenrok/vue-ganttastic.git
synced 2026-06-20 08:30:32 +03:00
fix: other bars in same row need magnetic suction also
This commit is contained in:
yicone
+4
-61
@@ -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
|
||||
}
|
||||
},
|
||||
|
||||
+95
-4
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user