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

A gantt component for Vue 3

{"version":3,"file":"GanttBody.vue.mjs","sources":["../../../../../src/components/ganttView/ganttBody/GanttBody.vue"],"sourcesContent":["<template>\n  <div class=\"vg-body\" :style=\"{height: ganttBodyHeight, width: ganttBodyWidth}\">\n    <GanttGrid\n      ref=\"ganttGridRef\"\n      :rowHeight=\"rowHeight\"\n      :perHourSpacing=\"perHourSpacing\"\n      :rowBuffer=\"rowBuffer\"\n      :edgeSpacing=\"edgeSpacing\"\n      :ganttMinDate=\"ganttMinDate\"\n      :styleOption=\"styleOption\"\n    ></GanttGrid>\n    <GanttTimeLineView\n      ref=\"ganttTimeLineViewRef\"\n      :rowHeight=\"rowHeight\"\n      :perHourSpacing=\"perHourSpacing\"\n      :ganttMinDate=\"ganttMinDate\"\n      :ganttMaxDate=\"ganttMaxDate\"\n      :rowBuffer=\"rowBuffer\"\n      :rowNodeMap=\"rowNodeMap\"\n      :visibleRowIds=\"visibleRowIds\"\n      :edgeSpacing=\"edgeSpacing\"\n      :styleOption=\"styleOption\"\n      :timePointComp=\"timePointComp\"\n      :ganttViewWidth=\"ganttViewWidth\"\n      :timeLineRender=\"timeLineRender\"\n      :timeLineRenderParams=\"timeLineRenderParams\"\n      @update-min-date=\"updateMinDate\"\n      @update-max-date=\"updateMaxDate\"\n    ></GanttTimeLineView>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport dayjs from 'dayjs';\nimport { ref, inject, toRef, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport GanttGrid from './ganttGrid/GanttGrid.vue';\nimport GanttTimeLineView from './ganttTimeLineView/GanttTimeLineView.vue';\nimport { RowData, GanttRowNode, GanttStyleOption } from '@/types';\n\nexport interface Props {\n  rowHeight: number,\n  edgeSpacing: number,\n  perHourSpacing: number,\n  rowBuffer: number,\n  ganttMinDate: dayjs.Dayjs,\n  ganttMaxDate: dayjs.Dayjs | null,\n  ganttViewWidth: number,\n  rows: RowData[],\n  rowNodeMap: Map<string, GanttRowNode>,\n  visibleRowIds: string[],\n  styleOption?: GanttStyleOption,\n  timePointComp?: any,\n  timeLineRender?: any,\n  timeLineRenderParams?: Record<string, any>,\n}\n\nconst emit = defineEmits<{\n  (event: 'updateMinDate', date: dayjs.Dayjs): void,\n  (event: 'updateMaxDate', date: dayjs.Dayjs): void,\n}>();\n\nconst props = defineProps<Props>();\n\nconst wrapRef = inject('wrapRef') as Ref<HTMLDivElement | undefined>;\nconst wrapRefWidth = ref(0);\nconst ganttGridRef = ref<InstanceType<typeof GanttGrid>>();\nconst ganttTimeLineViewRef = ref<InstanceType<typeof GanttTimeLineView>>();\nconst ganttViewWidth = toRef(props, 'ganttViewWidth');\n\nconst ganttBodyWidth = ref('');\nconst ganttBodyHeight = ref('');\n\nconst getGanttBodyWidth = () => {\n  if (!wrapRef.value) {\n    ganttBodyWidth.value = '100%';\n    return;\n  }\n  ganttBodyWidth.value = Math.max(wrapRefWidth.value, ganttViewWidth.value) + 'px';\n};\n\nconst getGanttBodyHeight = () => {\n  const { visibleRowIds, rowHeight } = props;\n  const contentHeight = visibleRowIds.length * rowHeight as number;\n  if (!wrapRef.value) {\n    ganttBodyHeight.value = contentHeight + 'px';\n  } else {\n    const wrapHeight = wrapRef.value.offsetHeight as number;\n    ganttBodyHeight.value = Math.max(contentHeight, wrapHeight) + 'px';\n  }\n};\n\nwatch(ganttViewWidth, () => {\n  getGanttBodyWidth();\n});\n\nwatch(() => props.visibleRowIds, () => {\n  getGanttBodyHeight();\n});\n\nconst onScroll = ({ scrollTop, scrollLeft }: {scrollTop: number, scrollLeft: number}) => {\n  if (ganttGridRef.value) {\n    ganttGridRef.value.onScroll({ scrollTop, scrollLeft });\n  }\n  if (ganttTimeLineViewRef.value) {\n    ganttTimeLineViewRef.value.onScroll({ scrollTop, scrollLeft });\n  }\n};\n\nconst onResize = () => {\n  wrapRefWidth.value = wrapRef.value?.offsetWidth || 0;\n  getGanttBodyWidth();\n  getGanttBodyHeight();\n  if (ganttGridRef.value) {\n    ganttGridRef.value.onResize();\n  }\n  if (ganttTimeLineViewRef.value) {\n    ganttTimeLineViewRef.value.onResize();\n  }\n};\n\nconst freshTimeLines = (rowNodes: GanttRowNode[]) => {\n  if (ganttTimeLineViewRef.value) {\n    ganttTimeLineViewRef.value.freshTimeLines(rowNodes);\n  }\n};\n\nconst updateMinDate = (minDate: dayjs.Dayjs) => {\n  emit('updateMinDate', minDate);\n};\n\nconst updateMaxDate = (maxDate: dayjs.Dayjs) => {\n  emit('updateMaxDate', maxDate);\n};\n\ndefineExpose({\n  onResize,\n  onScroll,\n  freshTimeLines\n});\n\n</script>\n<style lang=\"scss\">\n.vg-body {\n  position: relative;\n  font-size: 0;\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,UAAM,OAAO;AAKb,UAAM,QAAQ;AAER,UAAA,UAAU,OAAO,SAAS;AAC1B,UAAA,eAAe,IAAI,CAAC;AAC1B,UAAM,eAAe,IAAoC;AACzD,UAAM,uBAAuB,IAA4C;AACnE,UAAA,iBAAiB,MAAM,OAAO,gBAAgB;AAE9C,UAAA,iBAAiB,IAAI,EAAE;AACvB,UAAA,kBAAkB,IAAI,EAAE;AAE9B,UAAM,oBAAoB,MAAM;AAC1B,UAAA,CAAC,QAAQ,OAAO;AAClB,uBAAe,QAAQ;AACvB;AAAA,MAAA;AAEF,qBAAe,QAAQ,KAAK,IAAI,aAAa,OAAO,eAAe,KAAK,IAAI;AAAA,IAC9E;AAEA,UAAM,qBAAqB,MAAM;AACzB,YAAA,EAAE,eAAe,UAAA,IAAc;AAC/B,YAAA,gBAAgB,cAAc,SAAS;AACzC,UAAA,CAAC,QAAQ,OAAO;AAClB,wBAAgB,QAAQ,gBAAgB;AAAA,MAAA,OACnC;AACC,cAAA,aAAa,QAAQ,MAAM;AACjC,wBAAgB,QAAQ,KAAK,IAAI,eAAe,UAAU,IAAI;AAAA,MAAA;AAAA,IAElE;AAEA,UAAM,gBAAgB,MAAM;AACR,wBAAA;AAAA,IAAA,CACnB;AAEK,UAAA,MAAM,MAAM,eAAe,MAAM;AAClB,yBAAA;AAAA,IAAA,CACpB;AAED,UAAM,WAAW,CAAC,EAAE,WAAW,iBAA0D;AACvF,UAAI,aAAa,OAAO;AACtB,qBAAa,MAAM,SAAS,EAAE,WAAW,YAAY;AAAA,MAAA;AAEvD,UAAI,qBAAqB,OAAO;AAC9B,6BAAqB,MAAM,SAAS,EAAE,WAAW,YAAY;AAAA,MAAA;AAAA,IAEjE;AAEA,UAAM,WAAW,MAAM;;AACR,mBAAA,UAAQ,aAAQ,UAAR,mBAAe,gBAAe;AACjC,wBAAA;AACC,yBAAA;AACnB,UAAI,aAAa,OAAO;AACtB,qBAAa,MAAM,SAAS;AAAA,MAAA;AAE9B,UAAI,qBAAqB,OAAO;AAC9B,6BAAqB,MAAM,SAAS;AAAA,MAAA;AAAA,IAExC;AAEM,UAAA,iBAAiB,CAAC,aAA6B;AACnD,UAAI,qBAAqB,OAAO;AACT,6BAAA,MAAM,eAAe,QAAQ;AAAA,MAAA;AAAA,IAEtD;AAEM,UAAA,gBAAgB,CAAC,YAAyB;AAC9C,WAAK,iBAAiB,OAAO;AAAA,IAC/B;AAEM,UAAA,gBAAgB,CAAC,YAAyB;AAC9C,WAAK,iBAAiB,OAAO;AAAA,IAC/B;AAEa,aAAA;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}