vue-gantt-3
Version:
A gantt component for Vue 3
291 lines (290 loc) • 13 kB
JavaScript
import { defineComponent, inject, ref, toRef, computed, watch, createElementBlock, openBlock, Fragment, renderList, unref, normalizeStyle, normalizeClass, createCommentVNode, withDirectives, createBlock, createElementVNode, vShow, resolveDynamicComponent, toDisplayString, withModifiers, mergeProps, createStaticVNode } from "vue";
import _imports_0 from "../../../../assets/images/BlackTriangle.svg.mjs";
import dayjs from "dayjs";
import minMax from "dayjs/plugin/minMax";
import isBetween from "dayjs/plugin/isBetween";
import { useTimeLine } from "./useTimeLine.mjs";
import { useTimePoint, createTimePointNodes } from "./useTimePoint.mjs";
import { useTimeLineStretch } from "./useTimeLineStretch.mjs";
import { useTimeLineMove } from "./useTimeLineMove.mjs";
import timePointSvg from "../../../../assets/images/timePoint.svg.mjs";
const _hoisted_1 = { class: "vg-time-line-view" };
const _hoisted_2 = ["data-row-id"];
const _hoisted_3 = ["onMousedown"];
const _hoisted_4 = ["onMousedown"];
const _hoisted_5 = ["src"];
const _hoisted_6 = ["onMousedown"];
const _hoisted_7 = ["onContextmenu", "onMousedown"];
const _hoisted_8 = ["src"];
const _hoisted_9 = {
key: 1,
class: "vg-time-line-parentNode"
};
const _hoisted_10 = {
key: 2,
class: "vg-time-line-sameNode"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "GanttTimeLineView",
props: {
rowHeight: {},
ganttMinDate: {},
ganttMaxDate: {},
perHourSpacing: {},
rowBuffer: {},
visibleRowIds: {},
rowNodeMap: {},
ganttViewWidth: {},
edgeSpacing: {},
styleOption: {},
timePointComp: {},
timeLineRender: {},
timeLineRenderParams: {}
},
emits: ["updateMinDate", "updateMaxDate"],
setup(__props, { expose: __expose, emit: __emit }) {
dayjs.extend(minMax);
dayjs.extend(isBetween);
const props = __props;
const emit = __emit;
const wrapRef = inject("wrapRef");
const scrollViewScrollTop = ref(0);
const scrollViewScrollLeft = ref(0);
const currentVisibleRowIds = toRef(props, "visibleRowIds");
const selectedRowIds = inject("selectedRowIds");
const timeLineMoving = ref(false);
const movingTimeLine = ref(null);
const movingTimeLineRowId = ref("");
const perHourSpacingRef = toRef(props, "perHourSpacing");
const ganttViewWidthRef = toRef(props, "ganttViewWidth");
const rowHeightRef = toRef(props, "rowHeight");
const rowNodeMapRef = toRef(props, "rowNodeMap");
const timePointSize = computed(() => {
var _a;
return ((_a = props.styleOption) == null ? void 0 : _a.timePointSize) || 28;
});
const disableStretch = computed(() => {
var _a;
return (_a = props.styleOption) == null ? void 0 : _a.disableStretch;
});
const disableMove = computed(() => {
var _a;
return (_a = props.styleOption) == null ? void 0 : _a.disableMove;
});
const getTimeLineBackgroundColor = (timeLine) => {
var _a, _b;
return ((_a = timeLine.styleOption) == null ? void 0 : _a.backgroundColor) || ((_b = props.styleOption) == null ? void 0 : _b.barColor) || "";
};
const startInfo = computed(() => {
const { perHourSpacing, edgeSpacing, ganttMinDate } = props;
const diffHour = edgeSpacing / perHourSpacing;
const startDate = ganttMinDate.subtract(diffHour, "hour");
return {
startDate
};
});
const onScroll = ({ scrollTop, scrollLeft }) => {
scrollViewScrollTop.value = scrollTop;
scrollViewScrollLeft.value = scrollLeft;
};
const onResize = () => {
freshTimeLineView();
};
const emitUpdateMinDate = (date) => {
emit("updateMinDate", date);
};
const emitUpdateMaxDate = (date) => {
emit("updateMaxDate", date);
};
const getDiffSecondByDistance = (distance, startDate) => {
const { perHourSpacing } = props;
const diffSecond = distance / perHourSpacing * 60 * 60;
return startDate.add(diffSecond, "second");
};
const getDistanceByDiffDate = (startDate, endDate) => {
const { perHourSpacing } = props;
return endDate.diff(startDate, "hour", true) * perHourSpacing;
};
const closeEdgeScroll = (perMoveSpacing, callBack) => {
if (timeLineMoving.value) {
wrapRef.value.scrollLeft += perMoveSpacing;
callBack(perMoveSpacing);
requestAnimationFrame(() => {
closeEdgeScroll(perMoveSpacing, callBack);
});
}
};
const {
freshTimeLineView,
freshTimeLineViewAfterScrollTop,
freshTimeLines,
freshVisibleTimeLines,
sortTimeLineNodes,
mergeOverlapTimeLine,
visibleTimeLineMap,
visibleRows,
updateParentTimeLine
} = useTimeLine({
rowHeight: rowHeightRef,
rowBuffer: props.rowBuffer,
perHourSpacing: perHourSpacingRef,
scrollViewScrollTop,
scrollViewScrollLeft,
rowNodeMap: rowNodeMapRef,
currentVisibleRowIds,
startInfo,
movingTimeLineRowId,
movingTimeLine,
createTimePointNodes
});
watch([currentVisibleRowIds, scrollViewScrollTop], freshTimeLineViewAfterScrollTop);
watch([startInfo, scrollViewScrollLeft], () => freshVisibleTimeLines(true));
const {
onTimePointContextMenu,
onTimePointMouseDown
} = useTimePoint({
timePointSize,
perHourSpacing: perHourSpacingRef,
rowNodeMap: rowNodeMapRef,
visibleTimeLineMap
});
const { startTimeLineStretch } = useTimeLineStretch({
edgeSpacing: props.edgeSpacing,
ganttViewWidth: ganttViewWidthRef,
rowNodeMap: rowNodeMapRef,
movingTimeLineRowId,
movingTimeLine,
timeLineMoving,
visibleTimeLineMap,
disableStretch,
closeEdgeScroll,
sortTimeLineNodes,
mergeOverlapTimeLine,
freshVisibleTimeLines,
getDiffSecondByDistance,
getDistanceByDiffDate,
emitUpdateMinDate,
emitUpdateMaxDate,
updateParentTimeLine
});
const { startTimeLineMove } = useTimeLineMove({
edgeSpacing: props.edgeSpacing,
ganttViewWidth: ganttViewWidthRef,
rowNodeMap: rowNodeMapRef,
movingTimeLineRowId,
movingTimeLine,
timeLineMoving,
visibleTimeLineMap,
disableMove,
closeEdgeScroll,
sortTimeLineNodes,
mergeOverlapTimeLine,
freshVisibleTimeLines,
getDiffSecondByDistance,
getDistanceByDiffDate,
emitUpdateMinDate,
emitUpdateMaxDate,
updateParentTimeLine
});
__expose({
onScroll,
onResize,
freshTimeLines
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleRows), (row) => {
return openBlock(), createElementBlock("div", {
key: row.id,
class: normalizeClass(["vg-time-line-row vg-row", { "vg-selected-row": unref(selectedRowIds).has(row.id) }]),
"data-row-id": row.id,
style: normalizeStyle({ height: rowHeightRef.value + "px", transform: `translateY(${row.translateY}px)` })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleTimeLineMap).get(row.id), (timeLine) => {
var _a, _b, _c, _d, _e;
return openBlock(), createElementBlock("div", {
key: timeLine.id,
style: normalizeStyle({ width: timeLine.width + "px", transform: `translateX(${timeLine.translateX}px)` }),
class: "vg-time-line-row-time-line"
}, [
timeLine.type === "normal" ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(["vg-time-line-normal", { moving: timeLine.moving === true, disabledMove: timeLine.disableMove || disableMove.value }]),
onMousedown: (e) => unref(startTimeLineMove)(e, timeLine, row.id)
}, [
withDirectives(createElementVNode("div", {
class: "vg-move-block first-block",
onMousedown: (e) => unref(startTimeLineStretch)(e, timeLine, row.id, "left")
}, null, 40, _hoisted_4), [
[vShow, !timeLine.disableStretch && !disableStretch.value]
]),
_ctx.timeLineRender ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.timeLineRender), {
key: 0,
params: _ctx.timeLineRenderParams,
visibleTimeLine: timeLine,
timeLineWidth: timeLine.width,
rowNode: row.rowNode
}, null, 8, ["params", "visibleTimeLine", "timeLineWidth", "rowNode"])) : createCommentVNode("", true),
!_ctx.timeLineRender ? (openBlock(), createElementBlock("div", {
key: 1,
class: "vg-time-line-normal-body",
style: normalizeStyle({ backgroundColor: getTimeLineBackgroundColor(timeLine) })
}, [
withDirectives(createElementVNode("div", {
class: normalizeClass(["vg-time-line-label", { toLeft: ((_a = _ctx.styleOption) == null ? void 0 : _a.barsLabeling) === "beforeTheBar", toRight: ((_b = _ctx.styleOption) == null ? void 0 : _b.barsLabeling) === "afterTheBar" }])
}, [
withDirectives(createElementVNode("img", {
src: timeLine.icon,
alt: ""
}, null, 8, _hoisted_5), [
[vShow, ((_c = _ctx.styleOption) == null ? void 0 : _c.barsLabeling) === "insideBarWithIcon" && timeLine.icon]
]),
createElementVNode("span", null, toDisplayString(timeLine.label || ""), 1)
], 2), [
[vShow, ((_d = _ctx.styleOption) == null ? void 0 : _d.barsLabeling) !== "none"]
])
], 4)) : createCommentVNode("", true),
withDirectives(createElementVNode("div", {
class: "vg-move-block last-block",
onMousedown: (e) => unref(startTimeLineStretch)(e, timeLine, row.id, "right")
}, null, 40, _hoisted_6), [
[vShow, !timeLine.disableStretch && !disableStretch.value]
]),
(openBlock(true), createElementBlock(Fragment, null, renderList((_e = timeLine.timePointNodes) == null ? void 0 : _e.filter(() => {
var _a2;
return (_a2 = _ctx.styleOption) == null ? void 0 : _a2.showTimePoints;
}), (timePoint) => {
return openBlock(), createElementBlock("div", {
key: timePoint.id,
class: "vg-time-line-normal-time-points",
style: normalizeStyle({ transform: `translate(${timePoint.translateX - timePointSize.value / 2 - 1}px, -50%)`, width: `${timePointSize.value}px`, height: `${timePointSize.value}px` }),
onContextmenu: withModifiers((e) => unref(onTimePointContextMenu)(e, timeLine, timePoint, row.id), ["stop"]),
onMousedown: withModifiers((e) => unref(onTimePointMouseDown)(e, timeLine, timePoint), ["stop"])
}, [
timePoint.useTimePointComp ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.timePointComp), mergeProps({
key: 0,
ref_for: true
}, timePoint.compParams), null, 16)) : (openBlock(), createElementBlock("img", {
key: 1,
src: timePoint.icon || unref(timePointSvg),
alt: ""
}, null, 8, _hoisted_8))
], 44, _hoisted_7);
}), 128))
], 42, _hoisted_3)) : createCommentVNode("", true),
timeLine.type === "parentTimeLineNode" ? (openBlock(), createElementBlock("div", _hoisted_9, _cache[0] || (_cache[0] = [
createStaticVNode('<div class="vg-time-line-parentNode-bar"></div><span class="vg-time-line-parentNode-triangle vg-time-line-parentNode-triangle-left"><img width="12" src="' + _imports_0 + '"></span><span class="vg-time-line-parentNode-triangle vg-time-line-parentNode-triangle-right"><img width="12" src="' + _imports_0 + '"></span>', 3)
]))) : createCommentVNode("", true),
timeLine.type === "sameDateTimeLineNode" ? (openBlock(), createElementBlock("div", _hoisted_10)) : createCommentVNode("", true)
], 4);
}), 128))
], 14, _hoisted_2);
}), 128))
]);
};
}
});
export {
_sfc_main as default
};
//# sourceMappingURL=GanttTimeLineView.vue.mjs.map