vxe-gantt
Version:
A vue based gantt component
1,035 lines (1,034 loc) • 35.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _dom = require("../../ui/src/dom");
var _core = require("@vxe-ui/core");
var _util = require("./util");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ganttHeader = _interopRequireDefault(require("./gantt-header"));
var _ganttBody = _interopRequireDefault(require("./gantt-body"));
var _ganttFooter = _interopRequireDefault(require("./gantt-footer"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const {
globalEvents
} = _core.VxeUI;
function createInternalData() {
return {
xeTable: null,
startMaps: {},
endMaps: {},
chartMaps: {},
elemStore: {},
// 存放横向 X 虚拟滚动相关的信息
scrollXStore: {
preloadSize: 0,
offsetSize: 0,
visibleSize: 0,
visibleStartIndex: 0,
visibleEndIndex: 0,
startIndex: 0,
endIndex: 0
},
// 存放纵向 Y 虚拟滚动相关信息
scrollYStore: {
preloadSize: 0,
offsetSize: 0,
visibleSize: 0,
visibleStartIndex: 0,
visibleEndIndex: 0,
startIndex: 0,
endIndex: 0
}
};
}
const maxYHeight = 5e6;
// const maxXWidth = 5e6
var _default = exports.default = (0, _comp.defineVxeComponent)({
name: 'VxeGanttView',
setup(props, context) {
const xID = _xeUtils.default.uniqueId();
const $xeGantt = (0, _vue.inject)('$xeGantt', {});
const {
computeTaskOpts,
computeStartField,
computeEndField,
computeScrollbarOpts,
computeScrollbarXToTop,
computeScrollbarYToLeft
} = $xeGantt.getComputeMaps();
const refElem = (0, _vue.ref)();
const refScrollXVirtualElem = (0, _vue.ref)();
const refScrollYVirtualElem = (0, _vue.ref)();
const refScrollXHandleElem = (0, _vue.ref)();
const refScrollXLeftCornerElem = (0, _vue.ref)();
const refScrollXRightCornerElem = (0, _vue.ref)();
const refScrollYHandleElem = (0, _vue.ref)();
const refScrollYTopCornerElem = (0, _vue.ref)();
const refScrollXWrapperElem = (0, _vue.ref)();
const refScrollYWrapperElem = (0, _vue.ref)();
const refScrollYBottomCornerElem = (0, _vue.ref)();
const refScrollXSpaceElem = (0, _vue.ref)();
const refScrollYSpaceElem = (0, _vue.ref)();
const refColInfoElem = (0, _vue.ref)();
const reactData = (0, _vue.reactive)({
// 是否启用了横向 X 可视渲染方式加载
scrollXLoad: false,
// 是否启用了纵向 Y 可视渲染方式加载
scrollYLoad: false,
// 是否存在纵向滚动条
overflowY: true,
// 是否存在横向滚动条
overflowX: true,
// 纵向滚动条的宽度
scrollbarWidth: 0,
// 横向滚动条的高度
scrollbarHeight: 0,
lazScrollLoading: false,
scrollVMLoading: false,
scrollYHeight: 0,
scrollYTop: 0,
isScrollYBig: false,
scrollXLeft: 0,
scrollXWidth: 0,
isScrollXBig: false,
minViewDate: null,
maxViewDate: null,
tableData: [],
tableColumn: [],
headerGroups: [],
viewCellWidth: 20
});
const internalData = createInternalData();
const refMaps = {
refElem
};
const computeMaps = {};
const $xeGanttView = {
xID,
props,
context,
reactData,
internalData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const parseStringDate = dateValue => {
const taskOpts = computeTaskOpts.value;
const {
dateFormat
} = taskOpts;
return _xeUtils.default.toStringDate(dateValue, dateFormat || null);
};
const handleParseColumn = () => {
const ganttProps = $xeGantt.props;
const ganttReactData = $xeGantt.reactData;
const {
treeConfig
} = ganttProps;
const {
taskScaleList
} = ganttReactData;
const {
minViewDate,
maxViewDate
} = reactData;
const minScale = _xeUtils.default.last(taskScaleList);
const fullCols = [];
const groupCols = [];
if (minScale && minViewDate && maxViewDate) {
const minSType = minScale.type;
const weekScale = taskScaleList.find(item => item.type === 'week');
let gapTime = 1000 * 60 * 60 * 24;
switch (minScale.type) {
case 'hour':
gapTime = 1000 * 60 * 60;
break;
case 'minute':
gapTime = 1000 * 60;
break;
case 'second':
gapTime = 1000;
break;
default:
{
break;
}
}
const currTime = minViewDate.getTime();
const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
switch (minScale.type) {
case 'day':
case 'date':
if (diffDayNum > 1000 * 60 * 60 * 24 * 366 * 3) {
reactData.tableColumn = [];
reactData.headerGroups = [];
return;
}
break;
case 'hour':
if (diffDayNum > 1000 * 60 * 60 * 24 * 31 * 3) {
reactData.tableColumn = [];
reactData.headerGroups = [];
return;
}
break;
case 'minute':
if (diffDayNum > 1000 * 60 * 60 * 24 * 3) {
reactData.tableColumn = [];
reactData.headerGroups = [];
return;
}
break;
case 'second':
if (diffDayNum > 1000 * 60 * 60 * 3) {
reactData.tableColumn = [];
reactData.headerGroups = [];
return;
}
break;
}
const renderListMaps = {
year: [],
quarter: [],
month: [],
week: [],
day: [],
date: [],
hour: [],
minute: [],
second: []
};
const tempTypeMaps = {
year: {},
quarter: {},
month: {},
week: {},
day: {},
date: {},
hour: {},
minute: {},
second: {}
};
const handleData = (type, colMaps, minCol) => {
if (minSType === type) {
return;
}
const currCol = colMaps[type];
const currKey = `${currCol.field}`;
let currGpCol = tempTypeMaps[type][currKey];
if (!currGpCol) {
currGpCol = currCol;
tempTypeMaps[type][currKey] = currGpCol;
renderListMaps[type].push(currGpCol);
}
if (currGpCol) {
if (!currGpCol.children) {
currGpCol.children = [];
}
currGpCol.children.push(minCol);
}
};
for (let i = 0; i < countSize; i++) {
const itemDate = new Date(currTime + i * gapTime);
const [yyyy, MM, dd, HH, mm, ss] = _xeUtils.default.toDateString(itemDate, 'yyyy-M-d-H-m-s').split('-');
const e = itemDate.getDay();
const E = e + 1;
const q = Math.ceil((itemDate.getMonth() + 1) / 3);
const W = _xeUtils.default.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined);
const dateObj = {
yy: yyyy,
M: MM,
d: dd,
H: HH,
m: mm,
s: ss,
q,
W,
E,
e
};
const colMaps = {
year: {
field: yyyy,
title: yyyy,
params: dateObj
},
quarter: {
field: `${yyyy}_q${q}`,
title: q,
params: dateObj
},
month: {
field: `${yyyy}_${MM}`,
title: MM,
params: dateObj
},
week: {
field: `${yyyy}_W${W}`,
title: W,
params: dateObj
},
day: {
field: `${yyyy}_${MM}_${dd}_E${E}`,
title: E,
params: dateObj
},
date: {
field: `${yyyy}_${MM}_${dd}`,
title: dd,
params: dateObj
},
hour: {
field: `${yyyy}_${MM}_${dd}_${HH}`,
title: HH,
params: dateObj
},
minute: {
field: `${yyyy}_${MM}_${dd}_${HH}_${mm}`,
title: mm,
params: dateObj
},
second: {
field: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`,
title: ss,
params: dateObj
}
};
const minCol = colMaps[minSType];
if (minScale.level < 19) {
handleData('year', colMaps, minCol);
}
if (minScale.level < 17) {
handleData('quarter', colMaps, minCol);
}
if (minScale.level < 14) {
handleData('month', colMaps, minCol);
}
if (minScale.level < 13) {
handleData('week', colMaps, minCol);
}
if (minScale.level < 11) {
handleData('day', colMaps, minCol);
}
if (minScale.level < 12) {
handleData('date', colMaps, minCol);
}
if (minScale.level < 7) {
handleData('hour', colMaps, minCol);
}
if (minScale.level < 5) {
handleData('minute', colMaps, minCol);
}
fullCols.push(minCol);
}
taskScaleList.forEach(scaleItem => {
if (scaleItem.type === minSType) {
groupCols.push({
scaleItem,
columns: fullCols
});
return;
}
const list = renderListMaps[scaleItem.type] || [];
if (list) {
list.forEach(item => {
item.childCount = item.children ? item.children.length : 0;
item.children = undefined;
});
}
groupCols.push({
scaleItem,
columns: list
});
});
const $xeTable = internalData.xeTable;
if ($xeTable) {
const startField = computeStartField.value;
const endField = computeEndField.value;
const {
computeTreeOpts
} = $xeTable.getComputeMaps();
const tableInternalData = $xeTable.internalData;
const {
afterFullData,
afterTreeFullData
} = tableInternalData;
const treeOpts = computeTreeOpts.value;
const {
transform
} = treeOpts;
const childrenField = treeOpts.children || treeOpts.childrenField;
const ctMaps = {};
const handleParseRender = row => {
const rowid = $xeTable.getRowid(row);
const startValue = _xeUtils.default.get(row, startField);
const endValue = _xeUtils.default.get(row, endField);
if (startValue && endValue) {
const startDate = parseStringDate(startValue);
const endDate = parseStringDate(endValue);
const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / gapTime);
const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / gapTime) + 1;
ctMaps[rowid] = {
row,
rowid,
oLeftSize,
oWidthSize
};
}
};
if (treeConfig) {
_xeUtils.default.eachTree(afterTreeFullData, handleParseRender, {
children: transform ? treeOpts.mapChildrenField : childrenField
});
} else {
afterFullData.forEach(handleParseRender);
}
internalData.chartMaps = ctMaps;
}
}
reactData.tableColumn = fullCols;
reactData.headerGroups = groupCols;
};
const handleUpdateData = () => {
const ganttProps = $xeGantt.props;
const {
treeConfig
} = ganttProps;
const $xeTable = internalData.xeTable;
const sdMaps = {};
const edMaps = {};
let minDate = null;
let maxDate = null;
if ($xeTable) {
const startField = computeStartField.value;
const endField = computeEndField.value;
const {
computeTreeOpts
} = $xeTable.getComputeMaps();
const tableInternalData = $xeTable.internalData;
const {
afterFullData,
afterTreeFullData
} = tableInternalData;
const treeOpts = computeTreeOpts.value;
const {
transform
} = treeOpts;
const childrenField = treeOpts.children || treeOpts.childrenField;
const handleMinMaxData = row => {
const startValue = _xeUtils.default.get(row, startField);
const endValue = _xeUtils.default.get(row, endField);
if (startValue && endValue) {
const startDate = parseStringDate(startValue);
if (!minDate || minDate.getTime() > startDate.getTime()) {
minDate = startDate;
}
const endDate = parseStringDate(endValue);
if (!maxDate || maxDate.getTime() < endDate.getTime()) {
maxDate = endDate;
}
}
};
if (treeConfig) {
_xeUtils.default.eachTree(afterTreeFullData, handleMinMaxData, {
children: transform ? treeOpts.mapChildrenField : childrenField
});
} else {
afterFullData.forEach(handleMinMaxData);
}
}
reactData.minViewDate = minDate;
reactData.maxViewDate = maxDate;
internalData.startMaps = sdMaps;
internalData.endMaps = edMaps;
handleParseColumn();
};
const calcScrollbar = () => {
const {
scrollXWidth,
scrollYHeight
} = reactData;
const {
elemStore
} = internalData;
const scrollbarOpts = computeScrollbarOpts.value;
const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
const xHandleEl = refScrollXHandleElem.value;
const yHandleEl = refScrollYHandleElem.value;
let overflowY = false;
let overflowX = false;
if (bodyWrapperElem) {
overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
if (yHandleEl) {
reactData.scrollbarWidth = scrollbarOpts.width || yHandleEl.offsetWidth - yHandleEl.clientWidth || 14;
}
reactData.overflowY = overflowY;
overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
if (xHandleEl) {
reactData.scrollbarHeight = scrollbarOpts.height || xHandleEl.offsetHeight - xHandleEl.clientHeight || 14;
}
reactData.overflowX = overflowX;
}
};
const updateChart = () => {
const {
viewCellWidth
} = reactData;
const {
elemStore,
chartMaps
} = internalData;
const chartWrapper = (0, _util.getRefElem)(elemStore['main-chart-wrapper']);
if (chartWrapper) {
_xeUtils.default.arrayEach(chartWrapper.children, rowEl => {
const barEl = rowEl.children[0];
if (!barEl) {
return;
}
const rowid = rowEl.getAttribute('rowid');
const rowRest = rowid ? chartMaps[rowid] : null;
if (rowRest) {
barEl.style.left = `${viewCellWidth * rowRest.oLeftSize}px`;
barEl.style.width = `${viewCellWidth * rowRest.oWidthSize}px`;
}
});
}
return (0, _vue.nextTick)();
};
const updateStyle = () => {
const {
scrollbarWidth,
scrollbarHeight,
tableColumn,
headerGroups
} = reactData;
const {
elemStore
} = internalData;
const $xeTable = internalData.xeTable;
const el = refElem.value;
if (!el || !el.clientHeight) {
return;
}
const scrollbarOpts = computeScrollbarOpts.value;
const scrollbarXToTop = computeScrollbarXToTop.value;
const scrollbarYToLeft = computeScrollbarYToLeft.value;
const xLeftCornerEl = refScrollXLeftCornerElem.value;
const xRightCornerEl = refScrollXRightCornerElem.value;
const scrollXVirtualEl = refScrollXVirtualElem.value;
let osbWidth = scrollbarWidth;
const osbHeight = scrollbarHeight;
let tbHeight = 0;
let tHeaderHeight = 0;
let tFooterHeight = 0;
if ($xeTable) {
const tableInternalData = $xeTable.internalData;
tbHeight = tableInternalData.tBodyHeight;
tHeaderHeight = tableInternalData.tHeaderHeight;
tFooterHeight = tableInternalData.tFooterHeight;
}
let yScrollbarVisible = 'visible';
if (scrollbarYToLeft || scrollbarOpts.y && scrollbarOpts.y.visible === false) {
osbWidth = 0;
yScrollbarVisible = 'hidden';
}
const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
if (headerScrollElem) {
headerScrollElem.style.height = `${tHeaderHeight}px`;
headerScrollElem.style.setProperty('--vxe-ui-gantt-view-cell-height', `${tHeaderHeight / headerGroups.length}px`);
}
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
if (bodyScrollElem) {
bodyScrollElem.style.height = `${tbHeight}px`;
}
const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
if (footerScrollElem) {
footerScrollElem.style.height = `${tFooterHeight}px`;
}
if (scrollXVirtualEl) {
scrollXVirtualEl.style.height = `${osbHeight}px`;
scrollXVirtualEl.style.visibility = 'visible';
}
const xWrapperEl = refScrollXWrapperElem.value;
if (xWrapperEl) {
xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
}
if (xLeftCornerEl) {
xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
xLeftCornerEl.style.display = scrollbarXToTop ? osbHeight ? 'block' : '' : '';
}
if (xRightCornerEl) {
xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
xRightCornerEl.style.display = scrollbarXToTop ? '' : osbHeight ? 'block' : '';
}
const scrollYVirtualEl = refScrollYVirtualElem.value;
if (scrollYVirtualEl) {
scrollYVirtualEl.style.width = `${osbWidth}px`;
scrollYVirtualEl.style.height = `${tbHeight + tHeaderHeight + tFooterHeight}px`;
scrollYVirtualEl.style.visibility = yScrollbarVisible;
}
const yTopCornerEl = refScrollYTopCornerElem.value;
if (yTopCornerEl) {
yTopCornerEl.style.height = `${tHeaderHeight}px`;
yTopCornerEl.style.display = tHeaderHeight ? 'block' : '';
}
const yWrapperEl = refScrollYWrapperElem.value;
if (yWrapperEl) {
yWrapperEl.style.height = `${tbHeight}px`;
yWrapperEl.style.top = `${tHeaderHeight}px`;
}
const yBottomCornerEl = refScrollYBottomCornerElem.value;
if (yBottomCornerEl) {
yBottomCornerEl.style.height = `${tFooterHeight}px`;
yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
yBottomCornerEl.style.display = tFooterHeight ? 'block' : '';
}
const colInfoElem = refColInfoElem.value;
if (colInfoElem) {
reactData.viewCellWidth = colInfoElem.clientWidth || 40;
}
let viewTableWidth = reactData.viewCellWidth * tableColumn.length;
if (bodyScrollElem) {
const viewWidth = bodyScrollElem.clientWidth;
const remainWidth = viewWidth - viewTableWidth;
if (remainWidth > 0) {
reactData.viewCellWidth += Math.floor(remainWidth / tableColumn.length);
viewTableWidth = viewWidth;
}
}
const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
if (headerTableElem) {
headerTableElem.style.width = `${viewTableWidth}px`;
}
if (bodyTableElem) {
bodyTableElem.style.width = `${viewTableWidth}px`;
}
reactData.scrollXWidth = viewTableWidth;
return updateChart();
};
const handleLazyRecalculate = () => {
calcScrollbar();
updateStyle();
updateChart();
return (0, _vue.nextTick)();
};
// const updateScrollXSpace = () => {
// }
const updateScrollYSpace = () => {
const {
elemStore
} = internalData;
const $xeTable = internalData.xeTable;
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
let ySpaceTop = 0;
let scrollYHeight = 0;
let isScrollYBig = false;
if ($xeTable) {
const tableReactData = $xeTable.reactData;
ySpaceTop = tableReactData.scrollYTop;
scrollYHeight = tableReactData.scrollYHeight;
isScrollYBig = tableReactData.isScrollYBig;
}
let ySpaceHeight = scrollYHeight;
let scrollYTop = ySpaceTop;
let clientHeight = 0;
if (bodyScrollElem) {
clientHeight = bodyScrollElem.clientHeight;
}
if (isScrollYBig) {
// 触底
if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
scrollYTop = maxYHeight - bodyTableElem.clientHeight;
} else {
scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight));
}
ySpaceHeight = maxYHeight;
}
const bodyChartWrapperElem = (0, _util.getRefElem)(elemStore['main-chart-wrapper']);
if (bodyTableElem) {
bodyTableElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
}
if (bodyChartWrapperElem) {
bodyChartWrapperElem.style.transform = `translate(${reactData.scrollXLeft || 0}px, ${scrollYTop}px)`;
}
const bodyYSpaceElem = (0, _util.getRefElem)(elemStore['main-body-ySpace']);
if (bodyYSpaceElem) {
bodyYSpaceElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
}
const scrollYSpaceEl = refScrollYSpaceElem.value;
if (scrollYSpaceEl) {
scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
}
reactData.scrollYTop = scrollYTop;
reactData.scrollYHeight = scrollYHeight;
reactData.isScrollYBig = isScrollYBig;
calcScrollbar();
return (0, _vue.nextTick)().then(() => {
updateStyle();
});
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const checkLastSyncScroll = (isRollX, isRollY) => {
const {
lcsTimeout
} = internalData;
reactData.lazScrollLoading = true;
if (lcsTimeout) {
clearTimeout(lcsTimeout);
}
internalData.lcsTimeout = setTimeout(() => {
internalData.lcsRunTime = Date.now();
internalData.lcsTimeout = undefined;
internalData.intoRunScroll = false;
internalData.inVirtualScroll = false;
internalData.inWheelScroll = false;
internalData.inHeaderScroll = false;
internalData.inBodyScroll = false;
internalData.inFooterScroll = false;
reactData.lazScrollLoading = false;
}, 200);
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleScrollEvent = (evnt, isRollY, isRollX, scrollTop, scrollLeft) => {
checkLastSyncScroll(isRollX, isRollY);
};
const ganttViewMethods = {
refreshData() {
handleUpdateData();
return handleLazyRecalculate();
},
updateViewData() {
const $xeTable = internalData.xeTable;
if ($xeTable) {
const tableReactData = $xeTable.reactData;
const {
tableData
} = tableReactData;
reactData.tableData = tableData;
}
return (0, _vue.nextTick)();
},
connectUpdate({
$table
}) {
if ($table) {
internalData.xeTable = $table;
}
return (0, _vue.nextTick)();
}
};
/**
* 同步表格滚动
*/
const syncTableScrollTop = scrollTop => {
const $xeTable = internalData.xeTable;
if ($xeTable) {
const tableInternalData = $xeTable.internalData;
const {
elemStore: tableElemStore
} = tableInternalData;
const tableBodyScrollElem = (0, _util.getRefElem)(tableElemStore['main-body-scroll']);
if (tableBodyScrollElem) {
tableBodyScrollElem.scrollTop = scrollTop;
}
}
};
const ganttViewPrivateMethods = {
handleUpdateStyle: updateStyle,
handleLazyRecalculate,
handleUpdateCurrentRow(row) {
const $xeTable = internalData.xeTable;
const el = refElem.value;
if ($xeTable && el) {
if (row) {
const tableProps = $xeTable.props;
const {
highlightCurrentRow
} = tableProps;
const {
computeRowOpts
} = $xeTable.getComputeMaps();
const rowOpts = computeRowOpts.value;
if (rowOpts.isCurrent || highlightCurrentRow) {
_xeUtils.default.arrayEach(el.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${$xeTable.getRowid(row)}"]`), elem => (0, _dom.addClass)(elem, 'row--current'));
}
} else {
_xeUtils.default.arrayEach(el.querySelectorAll('.vxe-gantt-view--body-row.row--current'), elem => (0, _dom.removeClass)(elem, 'row--current'));
}
}
},
handleUpdateHoverRow(row) {
const $xeTable = internalData.xeTable;
const el = refElem.value;
if ($xeTable && el) {
if (row) {
_xeUtils.default.arrayEach(el.querySelectorAll(`.vxe-gantt-view--body-row[rowid="${$xeTable.getRowid(row)}"]`), elem => (0, _dom.addClass)(elem, 'row--hover'));
} else {
_xeUtils.default.arrayEach(el.querySelectorAll('.vxe-gantt-view--body-row.row--hover'), elem => (0, _dom.removeClass)(elem, 'row--hover'));
}
}
},
triggerHeaderScrollEvent(evnt) {
const {
elemStore,
inVirtualScroll,
inBodyScroll,
inFooterScroll
} = internalData;
if (inVirtualScroll) {
return;
}
if (inBodyScroll || inFooterScroll) {
return;
}
const wrapperEl = evnt.currentTarget;
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
const xHandleEl = refScrollXHandleElem.value;
if (bodyScrollElem && wrapperEl) {
const isRollX = true;
const isRollY = false;
const currLeftNum = wrapperEl.scrollLeft;
internalData.inHeaderScroll = true;
(0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
(0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
}
},
triggerBodyScrollEvent(evnt) {
const {
elemStore,
inVirtualScroll,
inHeaderScroll,
inFooterScroll
} = internalData;
if (inVirtualScroll) {
return;
}
if (inHeaderScroll || inFooterScroll) {
return;
}
const wrapperEl = evnt.currentTarget;
const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
const xHandleEl = refScrollXHandleElem.value;
const yHandleEl = refScrollYHandleElem.value;
if (headerScrollElem && wrapperEl) {
const isRollX = true;
const isRollY = true;
const currLeftNum = wrapperEl.scrollLeft;
const currTopNum = wrapperEl.scrollTop;
internalData.inBodyScroll = true;
(0, _dom.setScrollLeft)(xHandleEl, currLeftNum);
(0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
(0, _dom.setScrollTop)(yHandleEl, currTopNum);
syncTableScrollTop(currTopNum);
handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
}
},
triggerFooterScrollEvent(evnt) {
const {
inVirtualScroll,
inHeaderScroll,
inBodyScroll
} = internalData;
if (inVirtualScroll) {
return;
}
if (inHeaderScroll || inBodyScroll) {
return;
}
const wrapperEl = evnt.currentTarget;
if (wrapperEl) {
const isRollX = true;
const isRollY = false;
const currLeftNum = wrapperEl.scrollLeft;
handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
}
},
triggerVirtualScrollXEvent(evnt) {
const {
elemStore,
inHeaderScroll,
inBodyScroll
} = internalData;
if (inHeaderScroll || inBodyScroll) {
return;
}
const wrapperEl = evnt.currentTarget;
const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
if (wrapperEl) {
const isRollY = false;
const isRollX = true;
const currLeftNum = wrapperEl.scrollLeft;
internalData.inVirtualScroll = true;
(0, _dom.setScrollLeft)(headerScrollElem, currLeftNum);
(0, _dom.setScrollLeft)(bodyScrollElem, currLeftNum);
handleScrollEvent(evnt, isRollY, isRollX, wrapperEl.scrollTop, currLeftNum);
}
},
triggerVirtualScrollYEvent(evnt) {
const {
elemStore,
inHeaderScroll,
inBodyScroll
} = internalData;
if (inHeaderScroll || inBodyScroll) {
return;
}
const wrapperEl = evnt.currentTarget;
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
if (wrapperEl) {
const isRollY = true;
const isRollX = false;
const currTopNum = wrapperEl.scrollTop;
internalData.inVirtualScroll = true;
(0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
syncTableScrollTop(currTopNum);
handleScrollEvent(evnt, isRollY, isRollX, currTopNum, wrapperEl.scrollLeft);
}
},
handleUpdateSXSpace() {
const {
scrollXLoad,
scrollXWidth
} = reactData;
const {
elemStore
} = internalData;
const layoutList = ['header', 'body', 'footer'];
layoutList.forEach(layout => {
const xSpaceElem = (0, _util.getRefElem)(elemStore[`main-${layout}-xSpace`]);
if (xSpaceElem) {
xSpaceElem.style.width = scrollXLoad ? `${scrollXWidth}px` : '';
}
});
const scrollXSpaceEl = refScrollXSpaceElem.value;
if (scrollXSpaceEl) {
scrollXSpaceEl.style.width = `${scrollXWidth}px`;
}
calcScrollbar();
return (0, _vue.nextTick)();
},
handleUpdateSYSpace: updateScrollYSpace,
handleUpdateSYStatus(sYLoad) {
reactData.scrollYLoad = sYLoad;
}
};
const handleGlobalResizeEvent = () => {
handleLazyRecalculate();
};
Object.assign($xeGanttView, ganttViewMethods, ganttViewPrivateMethods);
const renderScrollX = () => {
return (0, _vue.h)('div', {
key: 'vsx',
ref: refScrollXVirtualElem,
class: 'vxe-gantt-view--scroll-x-virtual'
}, [(0, _vue.h)('div', {
ref: refScrollXLeftCornerElem,
class: 'vxe-gantt-view--scroll-x-left-corner'
}), (0, _vue.h)('div', {
ref: refScrollXWrapperElem,
class: 'vxe-gantt-view--scroll-x-wrapper'
}, [(0, _vue.h)('div', {
ref: refScrollXHandleElem,
class: 'vxe-gantt-view--scroll-x-handle',
onScroll: $xeGanttView.triggerVirtualScrollXEvent
}, [(0, _vue.h)('div', {
ref: refScrollXSpaceElem,
class: 'vxe-gantt-view--scroll-x-space'
})])]), (0, _vue.h)('div', {
ref: refScrollXRightCornerElem,
class: 'vxe-gantt-view--scroll-x-right-corner'
})]);
};
const renderScrollY = () => {
return (0, _vue.h)('div', {
ref: refScrollYVirtualElem,
class: 'vxe-gantt-view--scroll-y-virtual'
}, [(0, _vue.h)('div', {
ref: refScrollYTopCornerElem,
class: 'vxe-gantt-view--scroll-y-top-corner'
}), (0, _vue.h)('div', {
ref: refScrollYWrapperElem,
class: 'vxe-gantt-view--scroll-y-wrapper'
}, [(0, _vue.h)('div', {
ref: refScrollYHandleElem,
class: 'vxe-gantt-view--scroll-y-handle',
onScroll: $xeGanttView.triggerVirtualScrollYEvent
}, [(0, _vue.h)('div', {
ref: refScrollYSpaceElem,
class: 'vxe-gantt-view--scroll-y-space'
})])]), (0, _vue.h)('div', {
ref: refScrollYBottomCornerElem,
class: 'vxe-gantt-view--scroll-y-bottom-corner'
})]);
};
const renderViewport = () => {
return (0, _vue.h)('div', {
class: 'vxe-gantt-view--viewport-wrapper'
}, [(0, _vue.h)(_ganttHeader.default), (0, _vue.h)(_ganttBody.default), (0, _vue.h)(_ganttFooter.default)]);
};
const renderBody = () => {
const scrollbarYToLeft = computeScrollbarYToLeft.value;
return (0, _vue.h)('div', {
class: 'vxe-gantt-view--layout-wrapper'
}, scrollbarYToLeft ? [renderScrollY(), renderViewport()] : [renderViewport(), renderScrollY()]);
};
const renderVN = () => {
const {
overflowX,
overflowY,
scrollXLoad,
scrollYLoad
} = reactData;
const scrollbarXToTop = computeScrollbarXToTop.value;
return (0, _vue.h)('div', {
ref: refElem,
class: ['vxe-gantt-view', {
'is--scroll-y': overflowY,
'is--scroll-x': overflowX,
'is--virtual-x': scrollXLoad,
'is--virtual-y': scrollYLoad
}]
}, [(0, _vue.h)('div', {
class: 'vxe-gantt-view--render-wrapper'
}, scrollbarXToTop ? [renderScrollX(), renderBody()] : [renderBody(), renderScrollX()]), (0, _vue.h)('div', {
class: 'vxe-gantt-view--render-vars'
}, [(0, _vue.h)('div', {
ref: refColInfoElem,
class: 'vxe-gantt-view--column-info'
})])]);
};
const tdFlag = (0, _vue.ref)(0);
(0, _vue.watch)(() => reactData.tableData, () => {
tdFlag.value++;
});
(0, _vue.watch)(() => reactData.tableData.length, () => {
tdFlag.value++;
});
(0, _vue.watch)(tdFlag, () => {
handleUpdateData();
});
(0, _vue.onMounted)(() => {
globalEvents.on($xeGanttView, 'resize', handleGlobalResizeEvent);
});
(0, _vue.onUnmounted)(() => {
globalEvents.off($xeGanttView, 'keydown');
_xeUtils.default.assign(internalData, createInternalData());
});
$xeGanttView.renderVN = renderVN;
(0, _vue.provide)('$xeGanttView', $xeGanttView);
return $xeGanttView;
},
render() {
return this.renderVN();
}
});