vue-gantt-3
Version:
A gantt component for Vue 3
205 lines (204 loc) • 8.56 kB
JavaScript
import { inject, triggerRef } from "vue";
import { getRound } from "../../../../utils/common.mjs";
const useTimeLineStretch = ({
edgeSpacing,
ganttViewWidth,
rowNodeMap,
movingTimeLineRowId,
movingTimeLine,
timeLineMoving,
visibleTimeLineMap,
disableStretch,
closeEdgeScroll,
sortTimeLineNodes,
mergeOverlapTimeLine,
freshVisibleTimeLines,
getDiffSecondByDistance,
getDistanceByDiffDate,
emitUpdateMinDate,
emitUpdateMaxDate,
updateParentTimeLine
}) => {
const wrapRef = inject("wrapRef");
const freshRowNodeDateByTimeLine = inject("freshRowNodeDateByTimeLine");
const getGanttMinAndMaxDate = inject("getGanttMinAndMaxDate");
const timeLineStretchChange = inject("timeLineStretchChange");
const clearDateCache = inject("clearDateCache");
const startTimeLineStretch = (e, timeLine, rowId, direction) => {
if (disableStretch.value || timeLine.disableStretch) return;
let lastX = e.clientX;
const oldWidth = timeLine.width;
const minWidth = 4;
const wrapWidth = wrapRef.value.offsetWidth;
const currentRowNode = rowNodeMap.value.get(rowId);
let invalidDistance = 0;
let startScrollX = 0;
movingTimeLine.value = timeLine;
movingTimeLineRowId.value = rowId;
e.stopPropagation();
const onMouseMove = (event) => {
let currentX = event.clientX;
const diffX = currentX - lastX;
const perInvalidDistance = calcPerInvalidDistance(timeLine.width, diffX, minWidth, direction);
if (invalidDistance === 0) {
timeLineStretch(timeLine, rowId, diffX, minWidth, direction);
}
const nextInvalidDistance = invalidDistance + perInvalidDistance;
if (nextInvalidDistance >= 0 && direction === "left" || nextInvalidDistance <= 0 && direction === "right") {
invalidDistance += perInvalidDistance;
} else if (invalidDistance > 0 && nextInvalidDistance < 0 && direction === "left" || invalidDistance < 0 && nextInvalidDistance > 0 && direction === "right") {
timeLineStretch(timeLine, rowId, nextInvalidDistance, minWidth, direction);
invalidDistance = 0;
}
const scrollLeft = wrapRef.value.scrollLeft;
const scrollDistance = 10;
if (direction === "left" && timeLine.translateX - scrollLeft <= edgeSpacing || direction === "right" && timeLine.translateX + timeLine.width - scrollLeft <= edgeSpacing) {
if (diffX < 0) {
if (!timeLineMoving.value) {
timeLineMoving.value = true;
startScrollX = lastX;
closeEdgeScroll(-10, (moveSpacing) => {
if (direction === "right" && timeLine.width - scrollDistance < minWidth) {
timeLineMoving.value = false;
invalidDistance -= minWidth - timeLine.width + scrollDistance;
}
timeLineStretch(timeLine, rowId, moveSpacing, minWidth, direction);
});
}
} else if (currentX >= startScrollX) {
timeLineMoving.value = false;
}
} else if (direction === "right" && scrollLeft + wrapWidth <= timeLine.translateX + timeLine.width + edgeSpacing || direction === "left" && scrollLeft + wrapWidth <= timeLine.translateX + edgeSpacing) {
if (diffX > 0) {
if (!timeLineMoving.value) {
timeLineMoving.value = true;
startScrollX = lastX;
closeEdgeScroll(scrollDistance, (moveSpacing) => {
if (direction === "left" && timeLine.width - scrollDistance < minWidth) {
timeLineMoving.value = false;
invalidDistance += minWidth - timeLine.width + scrollDistance;
}
timeLineStretch(timeLine, rowId, moveSpacing, minWidth, direction);
});
}
} else if (currentX <= startScrollX) {
timeLineMoving.value = false;
}
} else {
timeLineMoving.value = false;
}
lastX = currentX;
};
const onMouseUp = () => {
timeLineMoving.value = false;
movingTimeLine.value = null;
movingTimeLineRowId.value = "";
clearDateCache();
if (timeLine.width !== oldWidth) {
freshRowNodeDateByTimeLine(rowId);
if (currentRowNode == null ? void 0 : currentRowNode.timeLineNodes) {
sortTimeLineNodes(currentRowNode.timeLineNodes);
currentRowNode.timeLineNodes = mergeOverlapTimeLine(currentRowNode.timeLineNodes);
onTimeLineStretchChange(rowId, timeLine, direction);
visibleTimeLineMap.value.delete(rowId);
freshVisibleTimeLines(false);
}
}
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
};
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
};
const timeLineStretch = (timeLine, rowId, distance, minWidth, direction) => {
const oldWidth = timeLine.width;
if (direction === "left") {
timeLine.width -= distance;
} else {
timeLine.width += distance;
}
if (timeLine.width < minWidth) {
timeLine.width = minWidth;
}
const diffWidth = oldWidth - timeLine.width;
if (direction === "left") {
const nextStartDate = getDiffSecondByDistance(diffWidth, timeLine.startDate);
timeLine.timeLineNode.startDate = nextStartDate;
timeLine.startDate = nextStartDate;
if (getRound(timeLine.translateX) === edgeSpacing && diffWidth > 0) {
const { minStartDate } = getGanttMinAndMaxDate([rowId], true, false);
if (!minStartDate || nextStartDate.isBefore(minStartDate)) {
emitUpdateMinDate(nextStartDate);
timeLine.translateX = edgeSpacing;
updateParentTimeLine(rowId);
return;
} else if (nextStartDate.isAfter(minStartDate) || nextStartDate.isSame(minStartDate)) {
timeLine.translateX += getDistanceByDiffDate(minStartDate, nextStartDate);
emitUpdateMinDate(minStartDate);
updateParentTimeLine(rowId);
return;
}
}
timeLine.translateX += diffWidth;
} else {
const nextEndDate = getDiffSecondByDistance(-diffWidth, timeLine.endDate);
timeLine.timeLineNode.endDate = nextEndDate;
timeLine.endDate = nextEndDate;
if (getRound(timeLine.translateX + oldWidth + edgeSpacing) === getRound(ganttViewWidth.value) && diffWidth > 0) {
const { maxEndDate } = getGanttMinAndMaxDate([rowId], false, true);
if (!maxEndDate || nextEndDate.isAfter(maxEndDate)) {
emitUpdateMaxDate(nextEndDate);
updateParentTimeLine(rowId);
return;
} else if (nextEndDate.isBefore(maxEndDate) || nextEndDate.isSame(maxEndDate)) {
emitUpdateMaxDate(maxEndDate);
}
}
}
if (timeLine.translateX < edgeSpacing) {
emitUpdateMinDate(timeLine.startDate);
timeLine.translateX = edgeSpacing;
} else if (timeLine.translateX + timeLine.width + edgeSpacing > ganttViewWidth.value) {
emitUpdateMaxDate(timeLine.endDate);
}
updateParentTimeLine(rowId);
triggerRef(visibleTimeLineMap);
};
const calcPerInvalidDistance = (timeLineWidth, distance, minWidth, direction) => {
if (direction === "left") {
return minWidth - timeLineWidth + distance;
} else {
return timeLineWidth + distance - minWidth;
}
};
const onTimeLineStretchChange = (rowId, timeLine, direction) => {
const timeLineNode = timeLine.timeLineNode;
const timeLineIds = [timeLineNode.id];
const finalStartDate = direction === "left" ? timeLineNode.startDate : null;
const finalEndDate = direction === "right" ? timeLineNode.endDate : null;
if (timeLineNode.isMerge) {
const mergedTimeLineNodes = timeLineNode.mergedTimeLineNodes;
for (let mergedTimeLineNode of mergedTimeLineNodes) {
if (direction === "left") {
if (mergedTimeLineNode.startDate.isBefore(timeLineNode.startDate)) {
timeLineIds.push(mergedTimeLineNode.id);
mergedTimeLineNode.startDate = timeLineNode.startDate;
}
} else {
if (mergedTimeLineNode.endDate.isAfter(timeLineNode.endDate)) {
timeLineIds.push(mergedTimeLineNode.id);
mergedTimeLineNode.endDate = timeLineNode.endDate;
}
}
}
}
timeLineStretchChange(rowId, timeLineIds, finalStartDate, finalEndDate);
};
return {
startTimeLineStretch
};
};
export {
useTimeLineStretch
};
//# sourceMappingURL=useTimeLineStretch.mjs.map