vue-gantt-3/es/components/ganttView/ganttBody/ganttGrid/GanttGrid.vue.mjs.map

A gantt component for Vue 3

{"version":3,"file":"GanttGrid.vue.mjs","sources":["../../../../../../src/components/ganttView/ganttBody/ganttGrid/GanttGrid.vue"],"sourcesContent":["<template>\n  <svg class=\"vg-grid-container\">\n    <g stroke-width=\"1\"\n       stroke=\"#e9e9e9\"\n       stroke-dasharray=\"12, 8\"\n       transform=\"translate(-0.5,-0.5)\">\n      <line v-for=\"position in verticalLinesList\"\n            :key=\"position\"\n            :x1=\"position\"\n            y1=\"0\"\n            :x2=\"position\"\n            y2=\"100%\"/>\n    </g>\n    <g stroke-width=\"1\" stroke=\"#e9e9e9\" transform=\"translate(-0.5,-0.5)\">\n      <line v-for=\"position in horizontalLinesList\"\n            :key=\"position\"\n            x1=\"0\"\n            :y1=\"position\"\n            x2=\"100%\"\n            :y2=\"position\"/>\n    </g>\n  </svg>\n</template>\n<script lang=\"ts\" setup>\nimport { GanttStyleOption, GanttBodyStartInfo } from '@/types';\nimport { ref, inject, Ref, computed, watch, toRef } from 'vue';\nimport { getRound } from '@/utils/common';\nimport dayjs from 'dayjs';\n\nexport interface Props {\n  rowHeight: number,\n  perHourSpacing: number,\n  rowBuffer: number,\n  edgeSpacing: number,\n  ganttMinDate: dayjs.Dayjs,\n  styleOption?: GanttStyleOption\n}\n\nconst props = defineProps<Props>();\n\nconst wrapRef = inject('wrapRef') as Ref<HTMLDivElement | undefined>;\nconst verticalLinesList = ref<number[]>([]);\nconst horizontalLinesList = ref<number[]>([]);\n\nconst scrollViewScrollTop = ref(0);\nconst scrollViewScrollLeft = ref(0);\nconst bufferWidth = 200;\nconst styleOption = toRef(props, 'styleOption');\n\nconst showHorizontalGridLines = computed(() => {\n  return styleOption.value?.showHorizontalGridLines;\n});\n\nconst freshGrid = () => {\n  freshVerticalLines();\n  freshHorizontalLines();\n};\n\n// get the left position of the first month vertical line\nconst startInfo = computed<GanttBodyStartInfo>(() => {\n  const { perHourSpacing, edgeSpacing, ganttMinDate } = props;\n  const diffHour = edgeSpacing / perHourSpacing;\n  const startDate = ganttMinDate.subtract(diffHour, 'hour');\n  const endDate = startDate.endOf('month');\n  const diff = endDate.diff(startDate, 'hour', true);\n  const startLeft = diff * perHourSpacing;\n\n  return {\n    startLeft,\n    startMonthDate: endDate,\n  };\n});\n\nconst freshVerticalLines = () => {\n  if (!wrapRef.value) return;\n\n  const wrapWidth = wrapRef.value.offsetWidth;\n  const { perHourSpacing } = props;\n\n  const { startMonthDate, startLeft } = startInfo.value;\n\n  const startLeftInView = scrollViewScrollLeft.value - bufferWidth;\n  const endLeftInView = scrollViewScrollLeft.value + wrapWidth + bufferWidth;\n\n  const newVerticalLinesList: number[] = [];\n  let start = startLeft;\n  let startMonthDateInView = startMonthDate;\n\n  if (startLeftInView > startLeft) {\n    const diffHour = (startLeftInView - startLeft) / perHourSpacing;\n    const startDateInView = startMonthDate.add(diffHour, 'hour');\n    const endMonthDate = startDateInView.endOf('month');\n    const diff = endMonthDate.diff(startMonthDate, 'hour', true);\n    start = startLeft + diff * perHourSpacing;\n    startMonthDateInView = endMonthDate;\n\n  }\n\n  const perDaySpacing = perHourSpacing * 24;\n  let nextStartMonthDateInView = startMonthDateInView;\n\n  while (start <= endLeftInView) {\n    newVerticalLinesList.push(getRound(start));\n    nextStartMonthDateInView = nextStartMonthDateInView.add(1, 'month');\n    const nextMonthDays = nextStartMonthDateInView.daysInMonth();\n    start += nextMonthDays * perDaySpacing;\n  }\n\n  verticalLinesList.value = newVerticalLinesList;\n};\n\nconst freshHorizontalLines = () => {\n  if (!wrapRef.value) return;\n\n  if (!showHorizontalGridLines.value) {\n    horizontalLinesList.value = [];\n    return;\n  }\n  const { rowHeight, rowBuffer } = props;\n  const wrapHeight = wrapRef.value.offsetHeight;\n  const bufferHeight = rowHeight * rowBuffer;\n  const startNumInView = Math.ceil((scrollViewScrollTop.value - bufferHeight) / rowHeight);\n  const endIdNumView = Math.floor((scrollViewScrollTop.value + wrapHeight + bufferHeight) / rowHeight);\n\n  const newHorizontalLinesList: number[] = [];\n  const start = Math.max(1, startNumInView);\n  for (let i = start; i <= endIdNumView + 1; i++) {\n    newHorizontalLinesList.push(i * rowHeight);\n  }\n\n  horizontalLinesList.value = newHorizontalLinesList;\n\n};\n\nwatch([startInfo, scrollViewScrollLeft], freshVerticalLines);\nwatch([scrollViewScrollTop, showHorizontalGridLines], freshHorizontalLines);\n\nconst onScroll = ({ scrollTop, scrollLeft }: {scrollTop: number, scrollLeft: number}) => {\n  scrollViewScrollTop.value = scrollTop;\n  scrollViewScrollLeft.value = scrollLeft;\n};\n\nconst onResize = () => {\n  freshGrid();\n\n};\n\ndefineExpose({\n  onScroll,\n  onResize\n});\n\n</script>\n<style lang=\"scss\">\n.vg-grid-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n</style>"],"names":[],"mappings":"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"}