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

A gantt component for Vue 3

import { defineComponent, inject, ref, toRef, computed, watch, createElementBlock, openBlock, createElementVNode, Fragment, renderList } from "vue";
import { getRound } from "../../../../utils/common.mjs";
const _hoisted_1 = { class: "vg-grid-container" };
const _hoisted_2 = {
  "stroke-width": "1",
  stroke: "#e9e9e9",
  "stroke-dasharray": "12, 8",
  transform: "translate(-0.5,-0.5)"
};
const _hoisted_3 = ["x1", "x2"];
const _hoisted_4 = {
  "stroke-width": "1",
  stroke: "#e9e9e9",
  transform: "translate(-0.5,-0.5)"
};
const _hoisted_5 = ["y1", "y2"];
const bufferWidth = 200;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "GanttGrid",
  props: {
    rowHeight: {},
    perHourSpacing: {},
    rowBuffer: {},
    edgeSpacing: {},
    ganttMinDate: {},
    styleOption: {}
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const wrapRef = inject("wrapRef");
    const verticalLinesList = ref([]);
    const horizontalLinesList = ref([]);
    const wrapWidth = ref(0);
    const wrapHeight = ref(0);
    const scrollViewScrollTop = ref(0);
    const scrollViewScrollLeft = ref(0);
    const styleOption = toRef(props, "styleOption");
    const showHorizontalGridLines = computed(() => {
      var _a;
      return (_a = styleOption.value) == null ? void 0 : _a.showHorizontalGridLines;
    });
    const freshGrid = () => {
      freshVerticalLines();
      freshHorizontalLines();
    };
    const startInfo = computed(() => {
      const { perHourSpacing, edgeSpacing, ganttMinDate } = props;
      const diffHour = edgeSpacing / perHourSpacing;
      const startDate = ganttMinDate.subtract(diffHour, "hour");
      const endDate = startDate.endOf("month");
      const diff = endDate.diff(startDate, "hour", true);
      const startLeft = diff * perHourSpacing;
      return {
        startLeft,
        startMonthDate: endDate
      };
    });
    const freshVerticalLines = () => {
      if (!wrapRef.value) return;
      const { perHourSpacing } = props;
      const { startMonthDate, startLeft } = startInfo.value;
      const startLeftInView = scrollViewScrollLeft.value - bufferWidth;
      const endLeftInView = scrollViewScrollLeft.value + wrapWidth.value + bufferWidth;
      const newVerticalLinesList = [];
      let start = startLeft;
      let startMonthDateInView = startMonthDate;
      if (startLeftInView > startLeft) {
        const diffHour = (startLeftInView - startLeft) / perHourSpacing;
        const startDateInView = startMonthDate.add(diffHour, "hour");
        const endMonthDate = startDateInView.endOf("month");
        const diff = endMonthDate.diff(startMonthDate, "hour", true);
        start = startLeft + diff * perHourSpacing;
        startMonthDateInView = endMonthDate;
      }
      const perDaySpacing = perHourSpacing * 24;
      let nextStartMonthDateInView = startMonthDateInView;
      while (start <= endLeftInView) {
        newVerticalLinesList.push(getRound(start));
        nextStartMonthDateInView = nextStartMonthDateInView.add(1, "month");
        const nextMonthDays = nextStartMonthDateInView.daysInMonth();
        start += nextMonthDays * perDaySpacing;
      }
      verticalLinesList.value = newVerticalLinesList;
    };
    const freshHorizontalLines = () => {
      if (!wrapRef.value) return;
      if (!showHorizontalGridLines.value) {
        horizontalLinesList.value = [];
        return;
      }
      const { rowHeight, rowBuffer } = props;
      const bufferHeight = rowHeight * rowBuffer;
      const startNumInView = Math.ceil((scrollViewScrollTop.value - bufferHeight) / rowHeight);
      const endIdNumView = Math.floor((scrollViewScrollTop.value + wrapHeight.value + bufferHeight) / rowHeight);
      const newHorizontalLinesList = [];
      const start = Math.max(1, startNumInView);
      for (let i = start; i <= endIdNumView + 1; i++) {
        newHorizontalLinesList.push(i * rowHeight);
      }
      horizontalLinesList.value = newHorizontalLinesList;
    };
    watch([startInfo, scrollViewScrollLeft], freshVerticalLines);
    watch([scrollViewScrollTop, showHorizontalGridLines], freshHorizontalLines);
    const onScroll = ({ scrollTop, scrollLeft }) => {
      scrollViewScrollTop.value = scrollTop;
      scrollViewScrollLeft.value = scrollLeft;
    };
    const onResize = () => {
      var _a, _b;
      wrapWidth.value = ((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0;
      wrapHeight.value = ((_b = wrapRef.value) == null ? void 0 : _b.offsetHeight) || 0;
      freshGrid();
    };
    __expose({
      onScroll,
      onResize
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("svg", _hoisted_1, [
        createElementVNode("g", _hoisted_2, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(verticalLinesList.value, (position) => {
            return openBlock(), createElementBlock("line", {
              key: position,
              x1: position,
              y1: "0",
              x2: position,
              y2: "100%"
            }, null, 8, _hoisted_3);
          }), 128))
        ]),
        createElementVNode("g", _hoisted_4, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(horizontalLinesList.value, (position) => {
            return openBlock(), createElementBlock("line", {
              key: position,
              x1: "0",
              y1: position,
              x2: "100%",
              y2: position
            }, null, 8, _hoisted_5);
          }), 128))
        ])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=GanttGrid.vue.mjs.map