vue-gantt-3
Version:
A gantt component for Vue 3
136 lines (135 loc) • 4.79 kB
JavaScript
import { defineComponent, inject, ref, toRef, watch, createElementBlock, openBlock, normalizeStyle, createVNode } from "vue";
import _sfc_main$1 from "./ganttGrid/GanttGrid.vue.mjs";
/* empty css */
import _sfc_main$2 from "./ganttTimeLineView/GanttTimeLineView.vue.mjs";
/* empty css */
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "GanttBody",
props: {
rowHeight: {},
edgeSpacing: {},
perHourSpacing: {},
rowBuffer: {},
ganttMinDate: {},
ganttMaxDate: {},
ganttViewWidth: {},
rows: {},
rowNodeMap: {},
visibleRowIds: {},
styleOption: {},
timePointComp: {},
timeLineRender: {},
timeLineRenderParams: {}
},
emits: ["updateMinDate", "updateMaxDate"],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const props = __props;
const wrapRef = inject("wrapRef");
const wrapRefWidth = ref(0);
const ganttGridRef = ref();
const ganttTimeLineViewRef = ref();
const ganttViewWidth = toRef(props, "ganttViewWidth");
const ganttBodyWidth = ref("");
const ganttBodyHeight = ref("");
const getGanttBodyWidth = () => {
if (!wrapRef.value) {
ganttBodyWidth.value = "100%";
return;
}
ganttBodyWidth.value = Math.max(wrapRefWidth.value, ganttViewWidth.value) + "px";
};
const getGanttBodyHeight = () => {
const { visibleRowIds, rowHeight } = props;
const contentHeight = visibleRowIds.length * rowHeight;
if (!wrapRef.value) {
ganttBodyHeight.value = contentHeight + "px";
} else {
const wrapHeight = wrapRef.value.offsetHeight;
ganttBodyHeight.value = Math.max(contentHeight, wrapHeight) + "px";
}
};
watch(ganttViewWidth, () => {
getGanttBodyWidth();
});
watch(() => props.visibleRowIds, () => {
getGanttBodyHeight();
});
const onScroll = ({ scrollTop, scrollLeft }) => {
if (ganttGridRef.value) {
ganttGridRef.value.onScroll({ scrollTop, scrollLeft });
}
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.onScroll({ scrollTop, scrollLeft });
}
};
const onResize = () => {
var _a;
wrapRefWidth.value = ((_a = wrapRef.value) == null ? void 0 : _a.offsetWidth) || 0;
getGanttBodyWidth();
getGanttBodyHeight();
if (ganttGridRef.value) {
ganttGridRef.value.onResize();
}
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.onResize();
}
};
const freshTimeLines = (rowNodes) => {
if (ganttTimeLineViewRef.value) {
ganttTimeLineViewRef.value.freshTimeLines(rowNodes);
}
};
const updateMinDate = (minDate) => {
emit("updateMinDate", minDate);
};
const updateMaxDate = (maxDate) => {
emit("updateMaxDate", maxDate);
};
__expose({
onResize,
onScroll,
freshTimeLines
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "vg-body",
style: normalizeStyle({ height: ganttBodyHeight.value, width: ganttBodyWidth.value })
}, [
createVNode(_sfc_main$1, {
ref_key: "ganttGridRef",
ref: ganttGridRef,
rowHeight: _ctx.rowHeight,
perHourSpacing: _ctx.perHourSpacing,
rowBuffer: _ctx.rowBuffer,
edgeSpacing: _ctx.edgeSpacing,
ganttMinDate: _ctx.ganttMinDate,
styleOption: _ctx.styleOption
}, null, 8, ["rowHeight", "perHourSpacing", "rowBuffer", "edgeSpacing", "ganttMinDate", "styleOption"]),
createVNode(_sfc_main$2, {
ref_key: "ganttTimeLineViewRef",
ref: ganttTimeLineViewRef,
rowHeight: _ctx.rowHeight,
perHourSpacing: _ctx.perHourSpacing,
ganttMinDate: _ctx.ganttMinDate,
ganttMaxDate: _ctx.ganttMaxDate,
rowBuffer: _ctx.rowBuffer,
rowNodeMap: _ctx.rowNodeMap,
visibleRowIds: _ctx.visibleRowIds,
edgeSpacing: _ctx.edgeSpacing,
styleOption: _ctx.styleOption,
timePointComp: _ctx.timePointComp,
ganttViewWidth: ganttViewWidth.value,
timeLineRender: _ctx.timeLineRender,
timeLineRenderParams: _ctx.timeLineRenderParams,
onUpdateMinDate: updateMinDate,
onUpdateMaxDate: updateMaxDate
}, null, 8, ["rowHeight", "perHourSpacing", "ganttMinDate", "ganttMaxDate", "rowBuffer", "rowNodeMap", "visibleRowIds", "edgeSpacing", "styleOption", "timePointComp", "ganttViewWidth", "timeLineRender", "timeLineRenderParams"])
], 4);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=GanttBody.vue.mjs.map