vue-gantt-3
Version:
A gantt component for Vue 3
291 lines (290 loc) • 13.3 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const BlackTriangle = require("../../../../assets/images/BlackTriangle.svg.js");
const dayjs = require("dayjs");
const minMax = require("dayjs/plugin/minMax");
const isBetween = require("dayjs/plugin/isBetween");
const useTimeLine = require("./useTimeLine.js");
const useTimePoint = require("./useTimePoint.js");
const useTimeLineStretch = require("./useTimeLineStretch.js");
const useTimeLineMove = require("./useTimeLineMove.js");
const timePoint = require("../../../../assets/images/timePoint.svg.js");
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__ */ vue.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 = vue.inject("wrapRef");
const scrollViewScrollTop = vue.ref(0);
const scrollViewScrollLeft = vue.ref(0);
const currentVisibleRowIds = vue.toRef(props, "visibleRowIds");
const selectedRowIds = vue.inject("selectedRowIds");
const timeLineMoving = vue.ref(false);
const movingTimeLine = vue.ref(null);
const movingTimeLineRowId = vue.ref("");
const perHourSpacingRef = vue.toRef(props, "perHourSpacing");
const ganttViewWidthRef = vue.toRef(props, "ganttViewWidth");
const rowHeightRef = vue.toRef(props, "rowHeight");
const rowNodeMapRef = vue.toRef(props, "rowNodeMap");
const timePointSize = vue.computed(() => {
var _a;
return ((_a = props.styleOption) == null ? void 0 : _a.timePointSize) || 28;
});
const disableStretch = vue.computed(() => {
var _a;
return (_a = props.styleOption) == null ? void 0 : _a.disableStretch;
});
const disableMove = vue.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 = vue.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.useTimeLine({
rowHeight: rowHeightRef,
rowBuffer: props.rowBuffer,
perHourSpacing: perHourSpacingRef,
scrollViewScrollTop,
scrollViewScrollLeft,
rowNodeMap: rowNodeMapRef,
currentVisibleRowIds,
startInfo,
movingTimeLineRowId,
movingTimeLine,
createTimePointNodes: useTimePoint.createTimePointNodes
});
vue.watch([currentVisibleRowIds, scrollViewScrollTop], freshTimeLineViewAfterScrollTop);
vue.watch([startInfo, scrollViewScrollLeft], () => freshVisibleTimeLines(true));
const {
onTimePointContextMenu,
onTimePointMouseDown
} = useTimePoint.useTimePoint({
timePointSize,
perHourSpacing: perHourSpacingRef,
rowNodeMap: rowNodeMapRef,
visibleTimeLineMap
});
const { startTimeLineStretch } = useTimeLineStretch.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.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(visibleRows), (row) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: row.id,
class: vue.normalizeClass(["vg-time-line-row vg-row", { "vg-selected-row": vue.unref(selectedRowIds).has(row.id) }]),
"data-row-id": row.id,
style: vue.normalizeStyle({ height: rowHeightRef.value + "px", transform: `translateY(${row.translateY}px)` })
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(visibleTimeLineMap).get(row.id), (timeLine) => {
var _a, _b, _c, _d, _e;
return vue.openBlock(), vue.createElementBlock("div", {
key: timeLine.id,
style: vue.normalizeStyle({ width: timeLine.width + "px", transform: `translateX(${timeLine.translateX}px)` }),
class: "vg-time-line-row-time-line"
}, [
timeLine.type === "normal" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(["vg-time-line-normal", { moving: timeLine.moving === true, disabledMove: timeLine.disableMove || disableMove.value }]),
onMousedown: (e) => vue.unref(startTimeLineMove)(e, timeLine, row.id)
}, [
vue.withDirectives(vue.createElementVNode("div", {
class: "vg-move-block first-block",
onMousedown: (e) => vue.unref(startTimeLineStretch)(e, timeLine, row.id, "left")
}, null, 40, _hoisted_4), [
[vue.vShow, !timeLine.disableStretch && !disableStretch.value]
]),
_ctx.timeLineRender ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.timeLineRender), {
key: 0,
params: _ctx.timeLineRenderParams,
visibleTimeLine: timeLine,
timeLineWidth: timeLine.width,
rowNode: row.rowNode
}, null, 8, ["params", "visibleTimeLine", "timeLineWidth", "rowNode"])) : vue.createCommentVNode("", true),
!_ctx.timeLineRender ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "vg-time-line-normal-body",
style: vue.normalizeStyle({ backgroundColor: getTimeLineBackgroundColor(timeLine) })
}, [
vue.withDirectives(vue.createElementVNode("div", {
class: vue.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" }])
}, [
vue.withDirectives(vue.createElementVNode("img", {
src: timeLine.icon,
alt: ""
}, null, 8, _hoisted_5), [
[vue.vShow, ((_c = _ctx.styleOption) == null ? void 0 : _c.barsLabeling) === "insideBarWithIcon" && timeLine.icon]
]),
vue.createElementVNode("span", null, vue.toDisplayString(timeLine.label || ""), 1)
], 2), [
[vue.vShow, ((_d = _ctx.styleOption) == null ? void 0 : _d.barsLabeling) !== "none"]
])
], 4)) : vue.createCommentVNode("", true),
vue.withDirectives(vue.createElementVNode("div", {
class: "vg-move-block last-block",
onMousedown: (e) => vue.unref(startTimeLineStretch)(e, timeLine, row.id, "right")
}, null, 40, _hoisted_6), [
[vue.vShow, !timeLine.disableStretch && !disableStretch.value]
]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_e = timeLine.timePointNodes) == null ? void 0 : _e.filter(() => {
var _a2;
return (_a2 = _ctx.styleOption) == null ? void 0 : _a2.showTimePoints;
}), (timePoint$1) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: timePoint$1.id,
class: "vg-time-line-normal-time-points",
style: vue.normalizeStyle({ transform: `translate(${timePoint$1.translateX - timePointSize.value / 2 - 1}px, -50%)`, width: `${timePointSize.value}px`, height: `${timePointSize.value}px` }),
onContextmenu: vue.withModifiers((e) => vue.unref(onTimePointContextMenu)(e, timeLine, timePoint$1, row.id), ["stop"]),
onMousedown: vue.withModifiers((e) => vue.unref(onTimePointMouseDown)(e, timeLine, timePoint$1), ["stop"])
}, [
timePoint$1.useTimePointComp ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.timePointComp), vue.mergeProps({
key: 0,
ref_for: true
}, timePoint$1.compParams), null, 16)) : (vue.openBlock(), vue.createElementBlock("img", {
key: 1,
src: timePoint$1.icon || vue.unref(timePoint.default),
alt: ""
}, null, 8, _hoisted_8))
], 44, _hoisted_7);
}), 128))
], 42, _hoisted_3)) : vue.createCommentVNode("", true),
timeLine.type === "parentTimeLineNode" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, _cache[0] || (_cache[0] = [
vue.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="' + BlackTriangle.default + '"></span><span class="vg-time-line-parentNode-triangle vg-time-line-parentNode-triangle-right"><img width="12" src="' + BlackTriangle.default + '"></span>', 3)
]))) : vue.createCommentVNode("", true),
timeLine.type === "sameDateTimeLineNode" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10)) : vue.createCommentVNode("", true)
], 4);
}), 128))
], 14, _hoisted_2);
}), 128))
]);
};
}
});
exports.default = _sfc_main;
//# sourceMappingURL=GanttTimeLineView.vue.js.map