diff --git a/src/GGanttChart.vue b/src/GGanttChart.vue index a623a1c..c0c6ed1 100644 --- a/src/GGanttChart.vue +++ b/src/GGanttChart.vue @@ -61,7 +61,8 @@ export default { minGapBetweenBars: { type: Number, default: 0 - } + }, + defaultBarLength: { type: Number, default: 1 } }, data(){ @@ -295,7 +296,8 @@ export default { onDragendBar: (e, ganttBar) => this.onDragendBar(e, ganttBar), shouldSnapBackOnOverlap: () => this.snapBackOnOverlap, snapBackBundle: (ganttBar) => this.snapBackBundle(ganttBar), - getMinGapBetweenBars: () => this.minGapBetweenBars + getMinGapBetweenBars: () => this.minGapBetweenBars, + getDefaultBarLength: () => this.defaultBarLength } } } diff --git a/src/GGanttRow.vue b/src/GGanttRow.vue index f414500..820ca93 100644 --- a/src/GGanttRow.vue +++ b/src/GGanttRow.vue @@ -20,6 +20,7 @@ @dragover="onDragover($event)" @dragleave="onDragleave($event)" @drop="onDrop($event)" + @dblclick="onDoubleClick($event)" @mouseover="onMouseover()" @mouseleave="onMouseleave()" > @@ -69,7 +70,8 @@ export default { "getThemeColors", "getHourCount", "getChartStart", - "getChartEnd" + "getChartEnd", + "getDefaultBarLength" ], data(){ @@ -125,6 +127,18 @@ export default { this.$emit("drop", {event: e, bar, time: time.format("YYYY-MM-DD HH:mm:ss")}) }, + onDoubleClick(e){ + let barContainer = this.$refs.barContainer.getBoundingClientRect() + let xPos = e.clientX - barContainer.left + let hourDiffFromStart = (xPos/barContainer.width) * this.getHourCount() + let time = moment(this.getChartStart()).add(hourDiffFromStart, "hours") + let bar = {}; + bar[this.barStart] = time.format("YYYY-MM-DD HH:mm:ss") + bar[this.barEnd] = time.add(this.getDefaultBarLength(), "hours").format("YYYY-MM-DD HH:mm:ss") + bar.ganttBarConfig = {handles: true} + this.bars.push(bar) + }, + onMouseover(){ if(this.highlightOnHover){ this.$refs["g-gantt-row"].style.backgroundColor = this.getThemeColors().hoverHighlight