vue-gantt-3
Version:
A gantt component for Vue 3
150 lines (149 loc) • 5.76 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common = require("../../../../utils/common.js");
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__ */ vue.defineComponent({
__name: "GanttGrid",
props: {
rowHeight: {},
perHourSpacing: {},
rowBuffer: {},
edgeSpacing: {},
ganttMinDate: {},
styleOption: {}
},
setup(__props, { expose: __expose }) {
const props = __props;
const wrapRef = vue.inject("wrapRef");
const verticalLinesList = vue.ref([]);
const horizontalLinesList = vue.ref([]);
const wrapWidth = vue.ref(0);
const wrapHeight = vue.ref(0);
const scrollViewScrollTop = vue.ref(0);
const scrollViewScrollLeft = vue.ref(0);
const styleOption = vue.toRef(props, "styleOption");
const showHorizontalGridLines = vue.computed(() => {
var _a;
return (_a = styleOption.value) == null ? void 0 : _a.showHorizontalGridLines;
});
const freshGrid = () => {
freshVerticalLines();
freshHorizontalLines();
};
const startInfo = vue.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(common.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;
};
vue.watch([startInfo, scrollViewScrollLeft], freshVerticalLines);
vue.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 vue.openBlock(), vue.createElementBlock("svg", _hoisted_1, [
vue.createElementVNode("g", _hoisted_2, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(verticalLinesList.value, (position) => {
return vue.openBlock(), vue.createElementBlock("line", {
key: position,
x1: position,
y1: "0",
x2: position,
y2: "100%"
}, null, 8, _hoisted_3);
}), 128))
]),
vue.createElementVNode("g", _hoisted_4, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(horizontalLinesList.value, (position) => {
return vue.openBlock(), vue.createElementBlock("line", {
key: position,
x1: "0",
y1: position,
x2: "100%",
y2: position
}, null, 8, _hoisted_5);
}), 128))
])
]);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=GanttGrid.vue.js.map