vue-gantt-3
Version:
A gantt component for Vue 3
81 lines (80 loc) • 2.96 kB
JavaScript
import { inject, triggerRef } from "vue";
import dayjs from "dayjs";
const createTimePointNodes = (timeLine) => {
var _a;
return (_a = timeLine.timePoints) == null ? void 0 : _a.map((timePoint) => {
return {
date: dayjs(timePoint.date),
id: timePoint.id,
data: timePoint,
icon: timePoint.icon,
useTimePointComp: timePoint.useTimePointComp,
translateX: 0,
compParams: timePoint.compParams
};
});
};
const useTimePoint = ({
timePointSize,
perHourSpacing,
rowNodeMap,
visibleTimeLineMap
}) => {
const timePointContextMenu = inject("timePointContextMenu");
const onTimePointContextMenu = (e, timeLine, timePoint, rowId) => {
var _a;
const offsetX = e.offsetX;
const diffX = offsetX - timePointSize.value / 2;
const diffSecond = diffX / perHourSpacing.value * 60 * 60;
const halfSeconf = timePointSize.value / 2 / perHourSpacing.value * 60 * 60;
const clickedDate = timePoint.date.add(diffSecond, "second");
const minDate = clickedDate.add(-halfSeconf, "second");
const maxDate = clickedDate.add(halfSeconf, "second");
const selectedTimePoints = ((_a = timeLine.timePointNodes) == null ? void 0 : _a.filter((timePointNode) => {
return timePointNode.date.isBetween(minDate, maxDate);
})) || [];
const selectedTimePointsData = selectedTimePoints.map((timePointNode) => timePointNode.data);
timePointContextMenu(e, selectedTimePointsData, rowNodeMap.value.get(rowId));
};
const timePointMoveFinished = inject("timePointMoveFinished");
const onTimePointMouseDown = (e, timeLine, timePoint) => {
const startX = e.clientX;
const startTranslateX = timePoint.translateX;
const onMouseMove = (event) => {
let currentX = event.clientX;
const diffX = currentX - startX;
let translateX = startTranslateX + diffX;
if (translateX < 0) {
translateX = 0;
}
if (translateX > timeLine.width) {
translateX = timeLine.width;
}
timePoint.translateX = translateX;
triggerRef(visibleTimeLineMap);
};
const onMouseUp = () => {
if (timePoint.translateX !== startTranslateX) {
const diffX = timePoint.translateX - startTranslateX;
const diffSecond = diffX / perHourSpacing.value * 60 * 60;
const roundOffSecond = diffX < 0 ? Math.ceil(diffSecond) : Math.floor(diffSecond);
const newDate = timePoint.date.add(roundOffSecond, "second");
timePoint.date = newDate;
timePointMoveFinished(timePoint.data, newDate);
}
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
};
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
};
return {
onTimePointContextMenu,
onTimePointMouseDown
};
};
export {
createTimePointNodes,
useTimePoint
};
//# sourceMappingURL=useTimePoint.mjs.map