mirrors/vue-ganttastic
2
0
Fork 0
mirror of https://github.com/tenrok/vue-ganttastic.git synced 2026-05-17 03:59:36 +03:00
Code Activity

chore: format

Browse Source
This commit is contained in:
Сергей Солодягин
2023-10-11 15:24:41 +03:00
parent edba5c3ae6
commit 6ae2dc4aa3
47 changed files with 11776 additions and 22497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+8 -5
View File
@@ -1,17 +1,20 @@
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
root: true,
env: {
node: true
},
'extends': [
extends: [
'plugin:vue/essential',
'eslint:recommended'
'eslint:recommended',
'plugin:prettier/recommended'
],
parserOptions: {
parser: 'babel-eslint'
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
'no-console': isProduction ? 'warn' : 'off',
'no-debugger': isProduction ? 'warn' : 'off'
}
}
.gitattributes
+1
View File
@@ -0,0 +1 @@
* text=auto eol=lf
.github/workflows/deploy.yml
+31
View File
@@ -0,0 +1,31 @@
name: Deploy to GH Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@master
with:
persist-credentials: false
- name: Install 🔧
run: npm install
- name: Build 🏗️
run: npm run demo:build
env:
NODE_ENV: production
- name: Deploy to GH Pages 🚀
if: ${{ github.event_name != 'pull_request' }}
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: demo
.gitignore
+10 -20
View File
@@ -1,27 +1,17 @@
.DS_Store
### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
### VisualStudioCode Patch ###
# Ignore all local history of files
**/.history
# npm
node_modules
# output directories
# Output directories
/demo
/dist
.npmrc
+2
View File
@@ -0,0 +1,2 @@
registry=https://registry.npmjs.org/
@tenrok:registry=https://registry.npmjs.org/
.prettierrc.js
+4 -3
View File
@@ -1,11 +1,12 @@
// https://prettier.io/docs/en/options.html
module.exports = {
arrowParens: 'avoid',
bracketSpacing: true,
printWidth: 80,
printWidth: 120,
semi: false,
singleQuote: true,
tabWidth: 2,
trailingComma: 'none',
useTabs: false,
vueIndentScriptAndStyle: true
useTabs: false
}
.vscode/extensions.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"recommendations": ["editorconfig.editorconfig", "esbenp.prettier-vscode"]
}
.vscode/settings.json
Vendored
+9
View File
@@ -0,0 +1,9 @@
{
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.fontWeight": "400",
"editor.foldingStrategy": "indentation",
"editor.formatOnSave": true,
"editor.rulers": [120],
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
README.md
+8 -2
View File
@@ -1,10 +1,15 @@
# Vue-Ganttastic
![screenshot](https://user-images.githubusercontent.com/4740535/143231164-88cd538f-f4ff-4fc6-8cb0-a25f4bab465c.png)
[![Version](https://img.shields.io/npm/v/@tenrok/vue-ganttastic.svg)](https://www.npmjs.com/package/@tenrok/vue-ganttastic)
[![License](https://img.shields.io/npm/l/@tenrok/vue-ganttastic.svg)](https://github.com/tenrok/vue-ganttastic/blob/main/LICENSE)
[![Vue.js](https://img.shields.io/badge/vue-2.7.14-brightgreen.svg?logo=vue.js)](https://github.com/vuejs/vue)
[![GitHub last commit](https://img.shields.io/github/last-commit/tenrok/vue-ganttastic.svg)](https://github.com/tenrok/vue-ganttastic)
[![Downloads](https://img.shields.io/npm/dm/@tenrok/vue-ganttastic.svg)](https://npmcharts.com/compare/@tenrok/vue-ganttastic?minimal=true)
[![Demo](https://img.shields.io/badge/demo-demo-blue.svg)](https://tenrok.github.io/vue-ganttastic/)
A simple and easy-to-use Gantt chart component for Vue.js
[Demo](http://vue-ganttastic.vercel.app/)
![screenshot](https://user-images.githubusercontent.com/4740535/143231164-88cd538f-f4ff-4fc6-8cb0-a25f4bab465c.png)
## Installation
@@ -31,6 +36,7 @@ For more detailed information, such as how to style the bars or additional confi
The following code showcases a simple usage example in a .vue SFC (Single File Component)
<!-- prettier-ignore -->
```html
<template>
...
babel.config.js
+1 -3
View File
@@ -1,5 +1,3 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
presets: ['@vue/cli-plugin-babel/preset']
}
lib/components/GGanttBar.vue
+36 -139
View File
@@ -35,8 +35,7 @@
<div
class="color-indicator"
:style="{
background:
this.barStyle.background || this.barStyle.backgroundColor
background: this.barStyle.background || this.barStyle.backgroundColor
}"
/>
<div>
@@ -59,10 +58,7 @@ String.prototype.formatUnicorn =
if (arguments.length) {
const notSeenInNature = '#$%#$%' // or whatever
const t = typeof arguments[0]
let args =
'string' === t || 'number' === t
? Array.prototype.slice.call(arguments)
: arguments[0]
let args = 'string' === t || 'number' === t ? Array.prototype.slice.call(arguments) : arguments[0]
for (let key in args) {
let rv = String(args[key]).replace('{', notSeenInNature)
str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), rv)
@@ -123,9 +119,7 @@ export default {
},
timeChildFormat() {
return this.chartProps.precision === 'month'
? 'DD.MM.YYYY'
: 'DD.MM.YYYY HH:mm'
return this.chartProps.precision === 'month' ? 'DD.MM.YYYY' : 'DD.MM.YYYY HH:mm'
},
barConfigKey() {
@@ -184,12 +178,8 @@ export default {
},
barDurationText() {
const duration = moment.duration(
this.barEndMoment.diff(this.barStartMoment)
)
return `${Math.floor(duration.as('d'))} ${moment
.utc(duration.as('ms'))
.format('HH:mm')}`
const duration = moment.duration(this.barEndMoment.diff(this.barStartMoment))
return `${Math.floor(duration.as('d'))} ${moment.utc(duration.as('ms')).format('HH:mm')}`
},
barConfig() {
@@ -198,11 +188,8 @@ export default {
...this.localBar[this.barConfigKey],
background: this.localBar[this.barConfigKey].isShadow
? 'grey'
: this.localBar[this.barConfigKey].background ||
this.localBar[this.barConfigKey].backgroundColor,
opacity: this.localBar[this.barConfigKey].isShadow
? '0.3'
: this.localBar[this.barConfigKey].opacity
: this.localBar[this.barConfigKey].background || this.localBar[this.barConfigKey].backgroundColor,
opacity: this.localBar[this.barConfigKey].isShadow ? '0.3' : this.localBar[this.barConfigKey].opacity
}
}
return {}
@@ -268,23 +255,17 @@ export default {
},
onContextmenu(e) {
const time = this.mapPositionToTime(
e.clientX - this.barContainer.left
).format(this.timeFormat)
const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
this.onBarEvent({ event: e, type: e.type, time }, this)
},
onClick(e) {
const time = this.mapPositionToTime(
e.clientX - this.barContainer.left
).format(this.timeFormat)
const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
this.onBarEvent({ event: e, type: e.type, time }, this)
},
onDblclick(e) {
const time = this.mapPositionToTime(
e.clientX - this.barContainer.left
).format(this.timeFormat)
const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
this.onBarEvent({ event: e, type: e.type, time }, this)
},
@@ -301,15 +282,11 @@ export default {
once: true
})
// if next mousemove happens after mouse up (if user just presses mouse button down, then up, without moving):
window.addEventListener(
'mouseup',
() => window.removeEventListener('mousemove', this.onFirstMousemove),
{ once: true }
)
window.addEventListener('mouseup', () => window.removeEventListener('mousemove', this.onFirstMousemove), {
once: true
})
}
const time = this.mapPositionToTime(
e.clientX - this.barContainer.left
).format(this.timeFormat)
const time = this.mapPositionToTime(e.clientX - this.barContainer.left).format(this.timeFormat)
this.onBarEvent({ event: e, type: e.type, time }, this)
},
@@ -358,11 +335,7 @@ export default {
const chart = e.target.closest('.g-gantt-chart')
if (!chart) return
let barWidth = this.$refs['g-bar'].getBoundingClientRect().width
let newXStart =
chart.scrollLeft +
e.clientX -
this.barContainer.left -
this.cursorOffsetX
let newXStart = chart.scrollLeft + e.clientX - this.barContainer.left - this.cursorOffsetX
let newXEnd = newXStart + barWidth
if (this.isPosOutOfDragRange(newXStart, newXEnd)) {
return
@@ -378,10 +351,7 @@ export default {
if (!chart) return
let newXStart = chart.scrollLeft + e.clientX - this.barContainer.left
let newStartMoment = this.mapPositionToTime(newXStart)
if (
this.barEndMoment.diff(newStartMoment, this.timeUnit) < 1 ||
this.isPosOutOfDragRange(newXStart, null)
) {
if (this.barEndMoment.diff(newStartMoment, this.timeUnit) < 1 || this.isPosOutOfDragRange(newXStart, null)) {
return
}
this.barStartMoment = newStartMoment
@@ -393,10 +363,7 @@ export default {
if (!chart) return
let newXEnd = chart.scrollLeft + e.clientX - this.barContainer.left
let newEndMoment = this.mapPositionToTime(newXEnd)
if (
newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) ||
this.isPosOutOfDragRange(null, newXEnd)
) {
if (newEndMoment.isSameOrBefore(this.barStartMoment, this.timeUnit) || this.isPosOutOfDragRange(null, newXEnd)) {
return
}
this.barEndMoment = newEndMoment
@@ -410,18 +377,10 @@ export default {
if (newXEnd > this.barContainer.width) {
return true
}
if (
newXStart &&
this.dragLimitLeft !== null &&
newXStart < this.dragLimitLeft + this.minGapBetweenBars
) {
if (newXStart && this.dragLimitLeft !== null && newXStart < this.dragLimitLeft + this.minGapBetweenBars) {
return true
}
if (
newXEnd &&
this.dragLimitRight !== null &&
newXEnd > this.dragLimitRight - this.minGapBetweenBars
) {
if (newXEnd && this.dragLimitRight !== null && newXEnd > this.dragLimitRight - this.minGapBetweenBars) {
return true
}
@@ -434,25 +393,14 @@ export default {
// return true
// }
if (
!this.chartProps.pushOnOverlap ||
this.barConfig.pushOnOverlap === false
) {
if (!this.chartProps.pushOnOverlap || this.barConfig.pushOnOverlap === false) {
return false
}
const isSqueezeToLeft =
newXStart &&
moment(this.localBar[this.barStartKey]).isBefore(
this.barStartBeforeDrag
)
const isSqueezeToRight =
newXEnd &&
moment(this.localBar[this.barEndKey]).isAfter(this.barEndBeforeDrag)
const isSqueezeToLeft = newXStart && moment(this.localBar[this.barStartKey]).isBefore(this.barStartBeforeDrag)
const isSqueezeToRight = newXEnd && moment(this.localBar[this.barEndKey]).isAfter(this.barEndBeforeDrag)
const currentIndex = this.allBarsInRow.findIndex(
bar => bar == this.localBar
)
const currentIndex = this.allBarsInRow.findIndex(bar => bar == this.localBar)
let otherBars = []
if (isSqueezeToRight) {
@@ -514,10 +462,7 @@ export default {
},
manageOverlapping() {
if (
!this.chartProps.pushOnOverlap ||
this.barConfig.pushOnOverlap === false
) {
if (!this.chartProps.pushOnOverlap || this.barConfig.pushOnOverlap === false) {
return
}
let currentBar = this.localBar
@@ -530,12 +475,7 @@ export default {
let overlapEndMoment = moment(overlapBar[this.barEndKey])
switch (overlapType) {
case 'left':
minuteDiff =
overlapEndMoment.diff(
currentStartMoment,
this.timeChildKey,
true
) + this.minGapBetweenBars
minuteDiff = overlapEndMoment.diff(currentStartMoment, this.timeChildKey, true) + this.minGapBetweenBars
overlapBar[this.barEndKey] = currentStartMoment
.subtract(this.minGapBetweenBars, this.timeChildKey, true)
.format(this.timeFormat)
@@ -544,12 +484,7 @@ export default {
.format(this.timeFormat)
break
case 'right':
minuteDiff =
currentEndMoment.diff(
overlapStartMoment,
this.timeChildKey,
true
) + this.minGapBetweenBars
minuteDiff = currentEndMoment.diff(overlapStartMoment, this.timeChildKey, true) + this.minGapBetweenBars
overlapBar[this.barStartKey] = currentEndMoment
.add(this.minGapBetweenBars, this.timeChildKey, true)
.format(this.timeFormat)
@@ -559,9 +494,7 @@ export default {
break
default:
// eslint-disable-next-line
console.warn(
'One bar is inside of the other one! This should never occur while push-on-overlap is active!'
)
console.warn('One bar is inside of the other one! This should never occur while push-on-overlap is active!')
return
}
this.moveBarsFromBundleOfPushedBar(overlapBar, minuteDiff, overlapType)
@@ -575,36 +508,20 @@ export default {
let barEndMoment = moment(bar[this.barEndKey])
let overlapLeft, overlapRight, overlapInBetween
let overlapBar = this.allBarsInRow.find(otherBar => {
if (
otherBar === bar ||
(otherBar[this.barConfigKey] &&
otherBar[this.barConfigKey].pushOnOverlap === false)
) {
if (otherBar === bar || (otherBar[this.barConfigKey] && otherBar[this.barConfigKey].pushOnOverlap === false)) {
return false
}
let otherBarStartMoment = moment(otherBar[this.barStartKey])
let otherBarEndMoment = moment(otherBar[this.barEndKey])
overlapLeft = barStartMoment.isBetween(
otherBarStartMoment,
otherBarEndMoment
)
overlapRight = barEndMoment.isBetween(
otherBarStartMoment,
otherBarEndMoment
)
overlapLeft = barStartMoment.isBetween(otherBarStartMoment, otherBarEndMoment)
overlapRight = barEndMoment.isBetween(otherBarStartMoment, otherBarEndMoment)
overlapInBetween =
otherBarStartMoment.isBetween(barStartMoment, barEndMoment) ||
otherBarEndMoment.isBetween(barStartMoment, barEndMoment)
return overlapLeft || overlapRight || overlapInBetween
})
let overlapType = overlapLeft
? 'left'
: overlapRight
? 'right'
: overlapInBetween
? 'between'
: null
let overlapType = overlapLeft ? 'left' : overlapRight ? 'right' : overlapInBetween ? 'between' : null
return { overlapBar, overlapType }
},
@@ -613,28 +530,12 @@ export default {
moveBarByChildPointsAndPush(childPointCount, direction) {
switch (direction) {
case 'left':
this.barStartMoment = moment(this.barStartMoment).subtract(
childPointCount,
this.timeChildKey,
true
)
this.barEndMoment = moment(this.barEndMoment).subtract(
childPointCount,
this.timeChildKey,
true
)
this.barStartMoment = moment(this.barStartMoment).subtract(childPointCount, this.timeChildKey, true)
this.barEndMoment = moment(this.barEndMoment).subtract(childPointCount, this.timeChildKey, true)
break
case 'right':
this.barStartMoment = moment(this.barStartMoment).add(
childPointCount,
this.timeChildKey,
true
)
this.barEndMoment = moment(this.barEndMoment).add(
childPointCount,
this.timeChildKey,
true
)
this.barStartMoment = moment(this.barStartMoment).add(childPointCount, this.timeChildKey, true)
this.barEndMoment = moment(this.barEndMoment).add(childPointCount, this.timeChildKey, true)
break
default:
// eslint-disable-next-line
@@ -648,11 +549,7 @@ export default {
/* ------- MAPPING POSITION TO TIME (AND VICE VERSA) ------- */
/* --------------------------------------------------------- */
mapTimeToPosition(time) {
let timeDiffFromStart = moment(time).diff(
this.chartStartMoment,
this.timeUnit,
true
)
let timeDiffFromStart = moment(time).diff(this.chartStartMoment, this.timeUnit, true)
let pos = (timeDiffFromStart / this.timeCount) * this.barContainer.width
return pos
},
lib/components/GGanttChart.vue
+50 -154
View File
@@ -1,9 +1,5 @@
<template>
<div
class="g-gantt-chart-container"
:data-theme="theme"
:style="{ width, height }"
>
<div class="g-gantt-chart-container" :data-theme="theme" :style="{ width, height }">
<div class="g-gantt-chart">
<g-gantt-timeaxis
v-if="!hideTimeaxis"
@@ -20,10 +16,7 @@
:month-format="monthFormat"
/>
<div
class="g-gantt-rows-container"
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
>
<div class="g-gantt-rows-container" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }">
<g-gantt-grid
v-if="grid"
:chart-start="chartStart"
@@ -107,22 +100,16 @@ 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))
}
},
methods: {
getGanttBarChildrenList() {
let ganttBarChildren = []
let ganttRowChildrenList = this.$children.filter(
childComp => childComp.$options.name === GGanttRow.name
)
let ganttRowChildrenList = this.$children.filter(childComp => childComp.$options.name === GGanttRow.name)
ganttRowChildrenList.forEach(row => {
let ganttBarChildrenOfRow = row.$children.filter(
childComp => childComp.$options.name === GGanttBar.name
)
let ganttBarChildrenOfRow = row.$children.filter(childComp => childComp.$options.name === GGanttBar.name)
ganttBarChildren.push(...ganttBarChildrenOfRow)
})
return ganttBarChildren
@@ -132,23 +119,15 @@ export default {
if (bundleId === undefined || bundleId === null) {
return []
}
return this.getGanttBarChildrenList().filter(
ganttBarChild => ganttBarChild.barConfig.bundle === bundleId
)
return this.getGanttBarChildrenList().filter(ganttBarChild => ganttBarChild.barConfig.bundle === bundleId)
},
initDragOfBarsFromBundle(gGanttBar, e) {
gGanttBar.initDrag(e)
this.movedBarsInDrag.add(gGanttBar.bar)
if (
gGanttBar.barConfig.bundle !== null &&
gGanttBar.barConfig.bundle !== undefined
) {
if (gGanttBar.barConfig.bundle !== null && gGanttBar.barConfig.bundle !== undefined) {
this.getGanttBarChildrenList().forEach(ganttBarChild => {
if (
ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle &&
ganttBarChild !== gGanttBar
) {
if (ganttBarChild.barConfig.bundle === gGanttBar.barConfig.bundle && ganttBarChild !== gGanttBar) {
ganttBarChild.initDrag(e)
this.movedBarsInDrag.add(ganttBarChild.bar)
}
@@ -158,17 +137,12 @@ export default {
moveBarsFromBundleOfPushedBar(pushedBar, minuteDiff, overlapType) {
this.movedBarsInDrag.add(pushedBar)
let bundleId = pushedBar[this.barConfigKey]
? pushedBar[this.barConfigKey].bundle
: null
let bundleId = pushedBar[this.barConfigKey] ? pushedBar[this.barConfigKey].bundle : null
if (bundleId === undefined || bundleId === null) {
return
}
this.getGanttBarChildrenList().forEach(ganttBarChild => {
if (
ganttBarChild.barConfig.bundle === bundleId &&
ganttBarChild.bar !== pushedBar
) {
if (ganttBarChild.barConfig.bundle === bundleId && ganttBarChild.bar !== pushedBar) {
ganttBarChild.moveBarByChildPointsAndPush(minuteDiff, overlapType)
this.movedBarsInDrag.add(ganttBarChild.bar)
}
@@ -176,10 +150,7 @@ export default {
},
shouldSnapBackBar(ganttBar) {
if (
this.snapBackOnOverlap &&
ganttBar.barConfig.pushOnOverlap !== false
) {
if (this.snapBackOnOverlap && ganttBar.barConfig.pushOnOverlap !== false) {
let { overlapBar } = ganttBar.getOverlapBarAndType(ganttBar.bar)
return !!overlapBar
}
@@ -188,10 +159,7 @@ export default {
snapBackBundleIfNeeded(ganttBar) {
let barsFromBundle = this.getBarsFromBundle(ganttBar.barConfig.bundle)
if (
this.shouldSnapBackBar(ganttBar) ||
barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))
) {
if (this.shouldSnapBackBar(ganttBar) || barsFromBundle.some(gBar => this.shouldSnapBackBar(gBar))) {
ganttBar.snapBack()
barsFromBundle.forEach(gBar => gBar.snapBack())
return true
@@ -214,77 +182,45 @@ export default {
if (this.precision === 'month') {
if (left && bar == ganttBar.bar) {
if (moment(bar[this.barStartKey]).hours() < 12) {
bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(0)
.format()
bar[this.barStartKey] = moment(bar[this.barStartKey]).hours(0).format()
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey])
.hours(24)
.format()
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()
bar[this.barEndKey] = moment(bar[this.barEndKey]).hours(0).format()
} else {
bar[this.barEndKey] = moment(bar[this.barEndKey])
.hours(24)
.format()
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()
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()
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()
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(0).format()
} else {
bar[this.barStartKey] = moment(bar[this.barStartKey])
.minutes(60)
.format()
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()
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(0).format()
} else {
bar[this.barEndKey] = moment(bar[this.barEndKey])
.minutes(60)
.format()
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()
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()
bar[this.barStartKey] = moment(bar[this.barStartKey]).minutes(60).format()
bar[this.barEndKey] = moment(bar[this.barEndKey]).minutes(60).format()
}
}
}
@@ -306,29 +242,20 @@ export default {
return
}
for (let side of ['left', 'right']) {
let [totalGapDistance, bundleBarsOnPath] =
this.countGapDistanceToNextImmobileBar(bar, null, side, false)
let [totalGapDistance, bundleBarsOnPath] = this.countGapDistanceToNextImmobileBar(bar, null, side, false)
for (let i = 0; i < bundleBarsOnPath.length; i++) {
let barFromBundle = bundleBarsOnPath[i].bar
let gapDist = bundleBarsOnPath[i].gapDistance
let otherBarsFromBundle = this.getBarsFromBundle(
barFromBundle.barConfig.bundle
).filter(otherBar => otherBar !== barFromBundle)
let otherBarsFromBundle = this.getBarsFromBundle(barFromBundle.barConfig.bundle).filter(
otherBar => otherBar !== barFromBundle
)
otherBarsFromBundle.forEach(otherBar => {
let [newGapDistance, newBundleBars] =
this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
if (
newGapDistance !== null &&
(newGapDistance < totalGapDistance || !totalGapDistance)
) {
let [newGapDistance, newBundleBars] = this.countGapDistanceToNextImmobileBar(otherBar, gapDist, side)
if (newGapDistance !== null && (newGapDistance < totalGapDistance || !totalGapDistance)) {
totalGapDistance = newGapDistance
}
newBundleBars.forEach(newBundleBar => {
if (
!bundleBarsOnPath.find(
barAndGap => barAndGap.bar === newBundleBar.bar
)
) {
if (!bundleBarsOnPath.find(barAndGap => barAndGap.bar === newBundleBar.bar)) {
bundleBarsOnPath.push(newBundleBar)
}
})
@@ -337,16 +264,11 @@ export default {
if (totalGapDistance != null && side === 'left') {
bar.dragLimitLeft = bar.$refs['g-bar'].offsetLeft - totalGapDistance
} else if (totalGapDistance != null && side === 'right') {
bar.dragLimitRight =
bar.$refs['g-bar'].offsetLeft +
bar.$refs['g-bar'].offsetWidth +
totalGapDistance
bar.dragLimitRight = bar.$refs['g-bar'].offsetLeft + bar.$refs['g-bar'].offsetWidth + totalGapDistance
}
}
// all bars from the bundle of the clicked bar need to have the same drag limit:
let barsFromBundleOfClickedBar = this.getBarsFromBundle(
bar.barConfig.bundle
)
let barsFromBundleOfClickedBar = this.getBarsFromBundle(bar.barConfig.bundle)
barsFromBundleOfClickedBar.forEach(barFromBundle => {
barFromBundle.dragLimitLeft = bar.dragLimitLeft
barFromBundle.dragLimitRight = bar.dragLimitRight
@@ -356,29 +278,16 @@ export default {
// returns the gap distance to the next immobile bar
// in the row where the given bar (parameter) is (added to gapDistanceSoFar)
// and a list of all bars on that path that belong to a bundle
countGapDistanceToNextImmobileBar(
bar,
gapDistanceSoFar,
side = 'left',
ignoreShadows = true
) {
let bundleBarsAndGapDist = bar.barConfig.bundle
? [{ bar, gapDistance: gapDistanceSoFar }]
: []
countGapDistanceToNextImmobileBar(bar, gapDistanceSoFar, side = 'left', ignoreShadows = true) {
let bundleBarsAndGapDist = bar.barConfig.bundle ? [{ bar, gapDistance: gapDistanceSoFar }] : []
let currentBar = bar
let nextBar = this.getNextGanttBar(currentBar, side)
// left side:
if (side === 'left') {
while (nextBar) {
let nextBarOffsetRight =
nextBar.$refs['g-bar'].offsetLeft +
nextBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar +=
currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight
if (
nextBar.barConfig.immobile ||
(nextBar.barConfig.isShadow && !ignoreShadows)
) {
let nextBarOffsetRight = nextBar.$refs['g-bar'].offsetLeft + nextBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar += currentBar.$refs['g-bar'].offsetLeft - nextBarOffsetRight
if (nextBar.barConfig.immobile || (nextBar.barConfig.isShadow && !ignoreShadows)) {
return [gapDistanceSoFar, bundleBarsAndGapDist]
} else if (nextBar.barConfig.bundle) {
bundleBarsAndGapDist.push({
@@ -392,15 +301,9 @@ export default {
}
if (side === 'right') {
while (nextBar) {
let currentBarOffsetRight =
currentBar.$refs['g-bar'].offsetLeft +
currentBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar +=
nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight
if (
nextBar.barConfig.immobile ||
(nextBar.barConfig.isShadow && !ignoreShadows)
) {
let currentBarOffsetRight = currentBar.$refs['g-bar'].offsetLeft + currentBar.$refs['g-bar'].offsetWidth
gapDistanceSoFar += nextBar.$refs['g-bar'].offsetLeft - currentBarOffsetRight
if (nextBar.barConfig.immobile || (nextBar.barConfig.isShadow && !ignoreShadows)) {
return [gapDistanceSoFar, bundleBarsAndGapDist]
} else if (nextBar.barConfig.bundle) {
bundleBarsAndGapDist.push({
@@ -440,12 +343,8 @@ export default {
}
if (allBarsLeftOrRight.length > 0) {
return allBarsLeftOrRight.reduce((bar1, bar2) => {
let bar1Dist = Math.abs(
bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
)
let bar2Dist = Math.abs(
bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft
)
let bar1Dist = Math.abs(bar1.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft)
let bar2Dist = Math.abs(bar2.$refs['g-bar'].offsetLeft - bar.$refs['g-bar'].offsetLeft)
return bar1Dist < bar2Dist ? bar1 : bar2
}, allBarsLeftOrRight[0])
} else {
@@ -464,15 +363,12 @@ export default {
return {
getTimeCount: () => this.timeCount,
getChartProps: () => this.$props,
initDragOfBarsFromBundle: (bundleId, e) =>
this.initDragOfBarsFromBundle(bundleId, e),
initDragOfBarsFromBundle: (bundleId, e) => this.initDragOfBarsFromBundle(bundleId, e),
moveBarsFromBundleOfPushedBar: (bar, minuteDiff, overlapType) =>
this.moveBarsFromBundleOfPushedBar(bar, minuteDiff, overlapType),
setDragLimitsOfGanttBar: ganttBar =>
this.setDragLimitsOfGanttBar(ganttBar),
setDragLimitsOfGanttBar: ganttBar => this.setDragLimitsOfGanttBar(ganttBar),
onBarEvent: (e, ganttBar) => this.onBarEvent(e, ganttBar),
onDragendBar: (e, ganttBar, action) =>
this.onDragendBar(e, ganttBar, action),
onDragendBar: (e, ganttBar, action) => this.onDragendBar(e, ganttBar, action),
getTimeUnit: () => this.timeUnit,
getTimeFormat: () => this.timeFormat
}
lib/components/GGanttGrid.vue
+3 -12
View File
@@ -1,8 +1,5 @@
<template>
<div
class="g-gantt-grid"
:style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }"
>
<div class="g-gantt-grid" :style="{ left: `${rowLabelWidth}px`, width: `${timeCount * gridSize}px` }">
<div
v-for="(childPoint, index) in allChildPoints"
:key="index"
@@ -58,16 +55,10 @@ export default {
isHighlighted(point) {
switch (this.precision) {
case 'day':
if (
this.highlightedDays.includes(
moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD')
)
) {
if (this.highlightedDays.includes(moment(point, 'YYYY-MM-DD').format('YYYY-MM-DD'))) {
return true
} else {
return this.highlightedHours.includes(
moment(point, 'YYYY-MM-DD H').get('hour')
)
return this.highlightedHours.includes(moment(point, 'YYYY-MM-DD H').get('hour'))
}
case 'month':
return this.highlightedDays.includes(point)
lib/components/GGanttRow.vue
+5 -19
View File
@@ -1,10 +1,5 @@
<template>
<div
ref="g-row"
class="g-gantt-row"
:style="{ height: `${chartProps.rowHeight}px` }"
v-on="$listeners"
>
<div ref="g-row" class="g-gantt-row" :style="{ height: `${chartProps.rowHeight}px` }" v-on="$listeners">
<div class="g-gantt-row__label" :style="rowLabelStyle">
<span :title="label">
<slot name="label">{{ label }}</slot>
@@ -151,10 +146,7 @@ export default {
const timeDiffFromStart = (xPos / barContainer.width) * this.timeCount
const time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
const bar = this.localBars.find(bar =>
time.isBetween(
bar[this.chartProps.barStartKey],
bar[this.chartProps.barEndKey]
)
time.isBetween(bar[this.chartProps.barStartKey], bar[this.chartProps.barEndKey])
)
this.$emit('drop', { event: e, bar, time: time.format(this.timeFormat) })
},
@@ -163,22 +155,16 @@ export default {
if (!this.chartProps.allowAdd) return
let barContainer = this.$refs.barContainer.getBoundingClientRect()
let xPos = e.clientX - barContainer.left
let timeDiffFromStart = Math.floor(
(xPos / barContainer.width) * this.timeCount
)
let timeDiffFromStart = Math.floor((xPos / barContainer.width) * this.timeCount)
let time = moment(this.chartStart).add(timeDiffFromStart, this.timeUnit)
let bar = {}
bar[this.chartProps.barStartKey] = time.format()
bar[this.chartProps.barEndKey] = time
.add(this.defaultBarLength, this.timeUnit)
.format()
bar[this.chartProps.barEndKey] = time.add(this.defaultBarLength, this.timeUnit).format()
bar[this.barConfigKey] = { handles: true }
this.localBars.push(bar)
this.localBars.sort((first, second) =>
moment(first[this.chartProps.barStartKey]).diff(
second[this.chartProps.barStartKey]
)
moment(first[this.chartProps.barStartKey]).diff(second[this.chartProps.barStartKey])
)
},
lib/components/GGanttTimeaxis.vue
+13 -45
View File
@@ -1,9 +1,5 @@
<template>
<div
ref="g-timeaxis"
class="g-gantt-timeaxis"
:style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }"
>
<div ref="g-timeaxis" class="g-gantt-timeaxis" :style="{ width: `${timeCount * gridSize + rowLabelWidth}px` }">
<div
class="g-gantt-timeaxis__empty-space"
:style="{
@@ -11,11 +7,7 @@
}"
/>
<div class="g-gantt-timeaxis__days">
<div
v-for="point in axisPoints"
:key="point.text"
class="g-gantt-timeaxis__day"
>
<div v-for="point in axisPoints" :key="point.text" class="g-gantt-timeaxis__day">
<div v-html="pointFormatted(point) || '&nbsp;'"></div>
<div class="g-gantt-timeaxis__hours">
<div
@@ -24,9 +16,7 @@
class="g-gantt-timeaxis__hour"
:style="{ width: `${gridSize}px` }"
>
<span :style="{ fontSize: hourFontSize }">{{
childPoint.text
}}</span>
<span :style="{ fontSize: hourFontSize }">{{ childPoint.text }}</span>
<div class="g-gantt-timeaxis__hour-pin" />
</div>
</div>
@@ -93,9 +83,7 @@ export default {
methods: {
initAxis() {
this.precision === 'day'
? this.initAxisDaysAndHours()
: this.initAxisMonthsAndDays()
this.precision === 'day' ? this.initAxisDaysAndHours() : this.initAxisMonthsAndDays()
},
initAxisMonthsAndDays() {
@@ -103,16 +91,10 @@ export default {
let end = moment(this.chartEnd)
this.axisPoints = []
while (start.isBefore(end)) {
let dayCountOfMonth = start.isSame(end, 'month')
? end.date() - 1
: start.daysInMonth() - start.date() + 1
let dayCountOfMonth = start.isSame(end, 'month') ? end.date() - 1 : start.daysInMonth() - start.date() + 1
let widthPercentage = (dayCountOfMonth / this.timeCount) * 100
let endDay = start.isSame(end, 'month')
? end.date() - 1
: start.daysInMonth()
this.axisPoints.push(
this.getAxisMonthObject(start, widthPercentage, endDay)
)
let endDay = start.isSame(end, 'month') ? end.date() - 1 : start.daysInMonth()
this.axisPoints.push(this.getAxisMonthObject(start, widthPercentage, endDay))
start.add(1, 'month').date(1).hour(0)
}
},
@@ -122,14 +104,10 @@ export default {
let end = moment(this.chartEnd)
this.axisPoints = []
while (start.isBefore(end)) {
let hourCountOfDay = start.isSame(end, 'day')
? end.hour()
: 24 - start.hour()
let hourCountOfDay = start.isSame(end, 'day') ? end.hour() : 24 - start.hour()
let widthPercentage = (hourCountOfDay / this.timeCount) * 100
let endHour = start.isSame(end, 'day') ? end.hour() - 1 : 23 // -1 because the last hour is not included e.g if chartEnd=04:00 the last interval we display is between 03 and 04
this.axisPoints.push(
this.getAxisDayObject(start, widthPercentage, endHour)
)
this.axisPoints.push(this.getAxisDayObject(start, widthPercentage, endHour))
start.add(1, 'day').hour(0)
}
},
@@ -175,25 +153,15 @@ export default {
moveTimemarker(event) {
const chart = this.timemarker.closest('.g-gantt-chart')
if (!chart) return
let pos =
chart.scrollLeft +
event.clientX -
this.timemarkerOffset -
this.horizontalAxisContainer.left
if (pos > this.horizontalAxisContainer.width)
pos = this.horizontalAxisContainer.width
let pos = chart.scrollLeft + event.clientX - this.timemarkerOffset - this.horizontalAxisContainer.left
if (pos > this.horizontalAxisContainer.width) pos = this.horizontalAxisContainer.width
this.timemarker.style.left = `${pos}px`
},
onWindowResize() {
if (!this.$refs['g-timeaxis']) return
this.horizontalAxisContainer =
this.$refs['g-timeaxis'].getBoundingClientRect()
this.hourFontSize =
Math.min(
9.5,
0.75 * (this.horizontalAxisContainer.width / this.timeCount)
) + 'px'
this.horizontalAxisContainer = this.$refs['g-timeaxis'].getBoundingClientRect()
this.hourFontSize = Math.min(9.5, 0.75 * (this.horizontalAxisContainer.width / this.timeCount)) + 'px'
},
pointFormatted(point) {
lib/scss/index.scss
+1 -1
View File
@@ -1,4 +1,4 @@
@use "sass:meta";
@use 'sass:meta';
// default
@import './variables';
package-lock.json
Generated
+9585 -20088
View File
File diff suppressed because it is too large Load Diff
package.json
+19 -16
View File
@@ -15,6 +15,10 @@
"bugs": {
"url": "https://github.com/tenrok/vue-ganttastic/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/tenrok/vue-ganttastic.git"
},
"license": "MIT",
"author": {
"name": "Marko Zunic",
@@ -31,32 +35,31 @@
"url": "https://github.com/solodyagin"
}
],
"main": "dist/vue-ganttastic.common.js",
"files": [
"dist/vue-ganttastic.*"
],
"main": "dist/vue-ganttastic.common.js",
"repository": {
"type": "git",
"url": "git+https://github.com/tenrok/vue-ganttastic.git"
},
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
"demo:build": "vue-cli-service build",
"lib:build": "vue-cli-service build --target lib --name vue-ganttastic lib/index.js",
"lint": "vue-cli-service lint"
"lint": "vue-cli-service lint --fix",
"serve": "vue-cli-service serve --open"
},
"dependencies": {
"vue": "^2.7.14"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.19",
"@vue/cli-plugin-eslint": "~4.5.19",
"@vue/cli-service": "~4.5.19",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^9.16.1",
"sass": "^1.69.1",
"sass-loader": "^10.4.1",
"@babel/eslint-parser": "^7.22.15",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"eslint": "^8.51.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^2.8.8",
"sass": "^1.69.2",
"sass-loader": "^13.3.2",
"vue-template-compiler": "^2.7.14"
},
"peerDependencies": {
src/App.vue
+3 -11
View File
@@ -224,8 +224,7 @@ export default {
tooltip: 'Bar tooltip',
config: {
color: 'white',
background:
'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)'
background: 'repeating-linear-gradient(45deg, #de7359, #de7359 10px, #ffc803 10px, #ffc803 20px)'
}
}
]
@@ -271,13 +270,7 @@ export default {
rowLabelWidth: 300,
hideTimeaxis: false,
highlightOnHover: true,
highlightedDays: [
'2020-03-01',
'2020-03-08',
'2020-03-15',
'2020-03-22',
'2020-03-29'
],
highlightedDays: ['2020-03-01', '2020-03-08', '2020-03-15', '2020-03-22', '2020-03-29'],
width: '90vw',
height: '250px',
allowAdd: false,
@@ -339,8 +332,7 @@ export default {
}
],
style: {
background:
'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)',
background: 'linear-gradient(-45deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 52%)',
backgroundSize: '1em 1em'
}
},
vetur.config.js
+2 -2
View File
@@ -2,7 +2,7 @@
/** @type {import('vls').VeturConfig} */
module.exports = {
settings: {
'vetur.ignoreProjectWarning': true,
'vetur.ignoreProjectWarning': true
},
projects: ['./'],
projects: ['./']
}
vue.config.js
+7 -2
View File
@@ -1,9 +1,12 @@
const isProduction = process.env.NODE_ENV === 'production'
const isBuildLib =
(process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
module.exports = {
publicPath: '',
publicPath: isProduction ? '/vue-ganttastic/' : '',
outputDir: isBuildLib ? 'dist' : 'demo',
css: {
loaderOptions: {
sass: {
@@ -12,9 +15,11 @@ module.exports = {
},
extract: true
},
productionSourceMap: false,
chainWebpack: config => {
if (process.env.VUE_CLI_BUILD_TARGET === 'lib') {
if (isBuildLib) {
config.externals({
...config.get('externals'),
moment: 'moment'