@visactor/vtable-gantt
Version:
canvas table width high performance
513 lines (507 loc) • 43.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.Gantt = exports.createRootElement = void 0;
const scenegraph_1 = require("./scenegraph/scenegraph"), env_1 = require("./env"), ts_types_1 = require("./ts-types"), vtable_1 = require("@visactor/vtable"), event_manager_1 = require("./event/event-manager"), state_manager_1 = require("./state/state-manager"), gantt_helper_1 = require("./gantt-helper"), EventTarget_1 = require("./event/EventTarget"), util_1 = require("./tools/util"), DataSource_1 = require("./data/DataSource"), vutils_1 = require("@visactor/vutils"), plugin_manager_1 = require("./plugins/plugin-manager");
function createRootElement(padding, className = "vtable-gantt") {
var _a, _b;
const element = document.createElement("div");
element.setAttribute("tabindex", "0"), element.classList.add(className), element.style.outline = "none",
element.style.margin = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
const width = (element.offsetWidth || (null === (_a = element.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) || 1) - 1, height = (element.offsetHeight || (null === (_b = element.parentElement) || void 0 === _b ? void 0 : _b.offsetHeight) || 1) - 1;
return element.style.width = width && width - padding.left - padding.right + "px" || "0px",
element.style.height = height && height - padding.top - padding.bottom + "px" || "0px",
element;
}
exports.createRootElement = createRootElement;
class Gantt extends EventTarget_1.EventTarget {
constructor(container, options) {
var _a, _b, _c, _d, _e;
super(), this.parsedOptions = {}, this.container = container, this.options = options,
this.taskTableWidth = "number" == typeof (null === (_a = null == options ? void 0 : options.taskListTable) || void 0 === _a ? void 0 : _a.tableWidth) ? null === (_b = null == options ? void 0 : options.taskListTable) || void 0 === _b ? void 0 : _b.tableWidth : -1,
this.taskTableColumns = null !== (_d = null === (_c = null == options ? void 0 : options.taskListTable) || void 0 === _c ? void 0 : _c.columns) && void 0 !== _d ? _d : [],
this.records = null !== (_e = null == options ? void 0 : options.records) && void 0 !== _e ? _e : [],
this._sortScales(), (0, gantt_helper_1.initOptions)(this), (0, gantt_helper_1.initProjectTaskTimes)(this),
this.data = new DataSource_1.DataSource(this), this._generateTimeLineDateMap(),
this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length, this.element = createRootElement({
top: 0,
right: 0,
left: 0,
bottom: 0
}, "vtable-gantt"), this.element.style.left = this.taskTableWidth ? `${this.taskTableWidth}px` : "0px",
this.canvas = document.createElement("canvas"), this.element.appendChild(this.canvas),
this.context = this.canvas.getContext("2d"), container ? (container.appendChild(this.element),
this._updateSize()) : this._updateSize(), this._generateListTable(), this._syncPropsFromTable(),
(0, gantt_helper_1.createSplitLineAndResizeLine)(this), this.scenegraph = new scenegraph_1.Scenegraph(this),
this.stateManager = new state_manager_1.StateManager(this), this.eventManager = new event_manager_1.EventManager(this),
this.scenegraph.afterCreateSceneGraph(), this._scrollToMarkLine(), this.pluginManager = new plugin_manager_1.PluginManager(this, options);
}
renderTaskBarsTable() {
this.scenegraph.updateNextFrame();
}
_updateSize() {
var _a, _b, _c, _d, _e, _f, _g, _h;
let widthP = 0, heightP = 0;
if ("browser" === env_1.Env.mode) {
const element = this.getElement();
let widthWithoutPadding = 0, heightWithoutPadding = 0;
if (element.parentElement) {
const computedStyle = element.parentElement.style || window.getComputedStyle(element.parentElement);
widthWithoutPadding = element.parentElement.offsetWidth - parseInt(computedStyle.paddingLeft || "0px", 10) - parseInt(computedStyle.paddingRight || "0px", 10),
heightWithoutPadding = element.parentElement.offsetHeight - parseInt(computedStyle.paddingTop || "0px", 10) - parseInt(computedStyle.paddingBottom || "0px", 20);
}
const width1 = (null != widthWithoutPadding ? widthWithoutPadding : 1) - 1 - this.taskTableWidth, height1 = (null != heightWithoutPadding ? heightWithoutPadding : 1) - 1;
element.style.width = width1 && `${width1}px` || "0px", element.style.height = height1 && `${height1}px` || "0px";
const {canvas: canvas} = this;
widthP = null !== (_b = null === (_a = canvas.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) && void 0 !== _b ? _b : 1,
heightP = null !== (_d = null === (_c = canvas.parentElement) || void 0 === _c ? void 0 : _c.offsetHeight) && void 0 !== _d ? _d : 1,
(null === (_e = null == this ? void 0 : this.scenegraph) || void 0 === _e ? void 0 : _e.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "",
canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`,
canvas.style.height = `${heightP}px`);
} else env_1.Env.mode;
const width = Math.floor(widthP - (0, gantt_helper_1.getVerticalScrollBarSize)(this.parsedOptions.scrollStyle)), height = Math.floor(heightP - (0,
gantt_helper_1.getHorizontalScrollBarSize)(this.parsedOptions.scrollStyle));
if (this.tableNoFrameWidth = widthP, this.tableNoFrameHeight = Math.floor(heightP),
this.parsedOptions.outerFrameStyle) {
const lineWidth = null === (_f = this.parsedOptions.outerFrameStyle) || void 0 === _f ? void 0 : _f.borderLineWidth;
this.tableX = this.taskTableColumns.length >= 1 || (null === (_g = this.options) || void 0 === _g ? void 0 : _g.rowSeriesNumber) ? null !== (_h = this.parsedOptions.verticalSplitLine.lineWidth) && void 0 !== _h ? _h : 0 : lineWidth,
this.tableY = lineWidth, this.tableNoFrameWidth = Math.min(width - lineWidth - this.tableX, this.getAllDateColsWidth()),
this.tableNoFrameHeight = height - 2 * lineWidth;
}
}
_updateListTableSize(taskListTableInstance) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
if (taskListTableInstance && ("auto" !== (null === (_b = null === (_a = this.options) || void 0 === _a ? void 0 : _a.taskListTable) || void 0 === _b ? void 0 : _b.tableWidth) && -1 !== this.taskTableWidth || (this.taskTableWidth = taskListTableInstance.getAllColsWidth() + this.parsedOptions.outerFrameStyle.borderLineWidth,
(null === (_d = null === (_c = this.options) || void 0 === _c ? void 0 : _c.taskListTable) || void 0 === _d ? void 0 : _d.maxTableWidth) && (this.taskTableWidth = Math.min(null === (_f = null === (_e = this.options) || void 0 === _e ? void 0 : _e.taskListTable) || void 0 === _f ? void 0 : _f.maxTableWidth, this.taskTableWidth)),
(null === (_h = null === (_g = this.options) || void 0 === _g ? void 0 : _g.taskListTable) || void 0 === _h ? void 0 : _h.minTableWidth) && (this.taskTableWidth = Math.max(null === (_k = null === (_j = this.options) || void 0 === _j ? void 0 : _j.taskListTable) || void 0 === _k ? void 0 : _k.minTableWidth, this.taskTableWidth)),
this.element.style.left = this.taskTableWidth ? `${this.taskTableWidth}px` : "0px",
taskListTableInstance.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + 2 * this.parsedOptions.outerFrameStyle.borderLineWidth),
this._updateSize()), taskListTableInstance.columnHeaderLevelCount > 1)) if (taskListTableInstance.columnHeaderLevelCount === this.parsedOptions.timeLineHeaderRowHeights.length) for (let i = 0; i < taskListTableInstance.columnHeaderLevelCount; i++) taskListTableInstance.setRowHeight(i, this.parsedOptions.timeLineHeaderRowHeights[i]); else {
const newRowHeight = this.getAllHeaderRowsHeight() / taskListTableInstance.columnHeaderLevelCount;
for (let i = 0; i < taskListTableInstance.columnHeaderLevelCount; i++) taskListTableInstance.setRowHeight(i, newRowHeight);
}
}
_generateListTable() {
var _a;
if (this.taskTableColumns.length >= 1 || (null === (_a = this.options) || void 0 === _a ? void 0 : _a.rowSeriesNumber)) {
const listTableOption = this._generateListTableOptions();
this.taskListTableInstance = new vtable_1.ListTable(this.container, listTableOption),
this._updateListTableSize(this.taskListTableInstance);
}
}
_generateListTableOptions() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41;
const listTable_options = {}, needPutInListTableKeys = [ "container", "records", "rowSeriesNumber", "overscrollBehavior", "pixelRatio", "eventOptions" ];
for (const key in this.options) needPutInListTableKeys.indexOf(key) >= 0 && (listTable_options[key] = this.options[key]);
listTable_options.defaultRowHeight = this.options.rowHeight;
for (const key in this.options.taskListTable) {
if (listTable_options[key] = this.options.taskListTable[key], "columns" === key && (listTable_options[key][listTable_options[key].length - 1].disableColumnResize = !0,
this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Inline || this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Separate || this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact)) for (let i = 0; i < listTable_options.columns.length; i++) listTable_options.columns[i].tree && (listTable_options.columns[i].tree = !1);
"hierarchyExpandLevel" !== key || this.parsedOptions.tasksShowMode !== ts_types_1.TasksShowMode.Sub_Tasks_Inline && this.parsedOptions.tasksShowMode !== ts_types_1.TasksShowMode.Sub_Tasks_Separate && this.parsedOptions.tasksShowMode !== ts_types_1.TasksShowMode.Sub_Tasks_Arrange && this.parsedOptions.tasksShowMode !== ts_types_1.TasksShowMode.Sub_Tasks_Compact || delete listTable_options[key];
}
if (null === (_a = this.options.taskListTable) || void 0 === _a ? void 0 : _a.theme) if (listTable_options.theme = null === (_b = this.options.taskListTable) || void 0 === _b ? void 0 : _b.theme,
listTable_options.theme.bodyStyle && !(0, util_1.isPropertyWritable)(listTable_options.theme, "bodyStyle")) {
listTable_options.theme = (null === (_c = this.options.taskListTable) || void 0 === _c ? void 0 : _c.theme).extends((null === (_d = this.options.taskListTable) || void 0 === _d ? void 0 : _d.theme).getExtendTheme());
const extendThemeOption = listTable_options.theme.getExtendTheme();
listTable_options.theme.clearBodyStyleCache(), (null === (_e = listTable_options.theme.headerStyle) || void 0 === _e ? void 0 : _e.bgColor) || (extendThemeOption.headerStyle ? extendThemeOption.headerStyle.bgColor || (extendThemeOption.headerStyle.bgColor = this.parsedOptions.timelineHeaderBackgroundColor) : extendThemeOption.headerStyle = {
bgColor: this.parsedOptions.timelineHeaderBackgroundColor
}), extendThemeOption.bodyStyle ? extendThemeOption.bodyStyle.frameStyle = {
borderLineWidth: [ null !== (_g = null === (_f = this.parsedOptions.horizontalSplitLine) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 0, 0, 0, 0 ],
borderColor: null === (_h = this.parsedOptions.horizontalSplitLine) || void 0 === _h ? void 0 : _h.lineColor
} : extendThemeOption.bodyStyle = {
frameStyle: {
borderLineWidth: [ null !== (_k = null === (_j = this.parsedOptions.horizontalSplitLine) || void 0 === _j ? void 0 : _j.lineWidth) && void 0 !== _k ? _k : 0, 0, 0, 0 ],
borderColor: null === (_l = this.parsedOptions.horizontalSplitLine) || void 0 === _l ? void 0 : _l.lineColor
}
}, extendThemeOption.cellInnerBorder = !1, extendThemeOption.frameStyle = Object.assign({}, this.parsedOptions.outerFrameStyle, {
shadowBlur: 0,
cornerRadius: [ null !== (_o = null === (_m = this.parsedOptions.outerFrameStyle) || void 0 === _m ? void 0 : _m.cornerRadius) && void 0 !== _o ? _o : 0, 0, 0, null !== (_q = null === (_p = this.parsedOptions.outerFrameStyle) || void 0 === _p ? void 0 : _p.cornerRadius) && void 0 !== _q ? _q : 0 ],
borderLineWidth: [ null !== (_s = null === (_r = this.parsedOptions.outerFrameStyle) || void 0 === _r ? void 0 : _r.borderLineWidth) && void 0 !== _s ? _s : 0, 0, null !== (_u = null === (_t = this.parsedOptions.outerFrameStyle) || void 0 === _t ? void 0 : _t.borderLineWidth) && void 0 !== _u ? _u : 0, null !== (_w = null === (_v = this.parsedOptions.outerFrameStyle) || void 0 === _v ? void 0 : _v.borderLineWidth) && void 0 !== _w ? _w : 0 ]
}), extendThemeOption.scrollStyle = Object.assign({}, null === (_y = null === (_x = this.options.taskListTable) || void 0 === _x ? void 0 : _x.theme) || void 0 === _y ? void 0 : _y.scrollStyle, this.parsedOptions.scrollStyle, {
verticalVisible: "none"
}), extendThemeOption.columnResize = Object.assign({
labelColor: "rgba(0,0,0,0)",
labelBackgroundFill: "rgba(0,0,0,0)"
}, null == extendThemeOption ? void 0 : extendThemeOption.columnResize), extendThemeOption.underlayBackgroundColor || (extendThemeOption.underlayBackgroundColor = this.parsedOptions.underlayBackgroundColor);
} else listTable_options.theme.headerStyle ? listTable_options.theme.headerStyle.bgColor || (listTable_options.theme.headerStyle.bgColor = this.parsedOptions.timelineHeaderBackgroundColor) : listTable_options.theme.headerStyle = {
bgColor: this.parsedOptions.timelineHeaderBackgroundColor
}, listTable_options.theme.headerStyle = Object.assign({}, vtable_1.themes.DEFAULT.headerStyle, {
bgColor: this.parsedOptions.timelineHeaderBackgroundColor
}, null === (_0 = null === (_z = this.options.taskListTable) || void 0 === _z ? void 0 : _z.theme) || void 0 === _0 ? void 0 : _0.headerStyle),
listTable_options.theme.bodyStyle = Object.assign({}, vtable_1.themes.DEFAULT.bodyStyle, null === (_2 = null === (_1 = this.options.taskListTable) || void 0 === _1 ? void 0 : _1.theme) || void 0 === _2 ? void 0 : _2.bodyStyle, {
frameStyle: {
borderLineWidth: [ null !== (_4 = null === (_3 = this.parsedOptions.horizontalSplitLine) || void 0 === _3 ? void 0 : _3.lineWidth) && void 0 !== _4 ? _4 : 0, 0, 0, 0 ],
borderColor: null === (_5 = this.parsedOptions.horizontalSplitLine) || void 0 === _5 ? void 0 : _5.lineColor
}
}), listTable_options.theme.cellInnerBorder = !1, listTable_options.theme.frameStyle = Object.assign({}, this.parsedOptions.outerFrameStyle, {
cornerRadius: [ null !== (_7 = null === (_6 = this.parsedOptions.outerFrameStyle) || void 0 === _6 ? void 0 : _6.cornerRadius) && void 0 !== _7 ? _7 : 0, 0, 0, null !== (_9 = null === (_8 = this.parsedOptions.outerFrameStyle) || void 0 === _8 ? void 0 : _8.cornerRadius) && void 0 !== _9 ? _9 : 0 ],
borderLineWidth: [ null !== (_11 = null === (_10 = this.parsedOptions.outerFrameStyle) || void 0 === _10 ? void 0 : _10.borderLineWidth) && void 0 !== _11 ? _11 : 0, 0, null !== (_13 = null === (_12 = this.parsedOptions.outerFrameStyle) || void 0 === _12 ? void 0 : _12.borderLineWidth) && void 0 !== _13 ? _13 : 0, null !== (_15 = null === (_14 = this.parsedOptions.outerFrameStyle) || void 0 === _14 ? void 0 : _14.borderLineWidth) && void 0 !== _15 ? _15 : 0 ]
}), listTable_options.theme.scrollStyle = Object.assign({}, null === (_17 = null === (_16 = this.options.taskListTable) || void 0 === _16 ? void 0 : _16.theme) || void 0 === _17 ? void 0 : _17.scrollStyle, this.parsedOptions.scrollStyle, {
verticalVisible: "none"
}), listTable_options.theme.columnResize = Object.assign({
labelColor: "rgba(0,0,0,0)",
labelBackgroundFill: "rgba(0,0,0,0)"
}, null === (_19 = null === (_18 = this.options.taskListTable) || void 0 === _18 ? void 0 : _18.theme) || void 0 === _19 ? void 0 : _19.columnResize),
listTable_options.theme.underlayBackgroundColor || (listTable_options.theme.underlayBackgroundColor = this.parsedOptions.underlayBackgroundColor); else listTable_options.theme = {
scrollStyle: Object.assign({}, null === (_21 = null === (_20 = this.options.taskListTable) || void 0 === _20 ? void 0 : _20.theme) || void 0 === _21 ? void 0 : _21.scrollStyle, this.parsedOptions.scrollStyle, {
verticalVisible: "none"
}),
headerStyle: Object.assign({}, vtable_1.themes.DEFAULT.headerStyle, {
bgColor: this.parsedOptions.timelineHeaderBackgroundColor
}, null === (_23 = null === (_22 = this.options.taskListTable) || void 0 === _22 ? void 0 : _22.theme) || void 0 === _23 ? void 0 : _23.headerStyle),
bodyStyle: Object.assign({}, vtable_1.themes.DEFAULT.bodyStyle, null === (_25 = null === (_24 = this.options.taskListTable) || void 0 === _24 ? void 0 : _24.theme) || void 0 === _25 ? void 0 : _25.bodyStyle, {
frameStyle: {
borderLineWidth: [ null !== (_27 = null === (_26 = this.parsedOptions.horizontalSplitLine) || void 0 === _26 ? void 0 : _26.lineWidth) && void 0 !== _27 ? _27 : 0, 0, 0, 0 ],
borderColor: null === (_28 = this.parsedOptions.horizontalSplitLine) || void 0 === _28 ? void 0 : _28.lineColor
}
}),
cellInnerBorder: !1,
frameStyle: Object.assign({}, this.parsedOptions.outerFrameStyle, {
cornerRadius: [ null !== (_30 = null === (_29 = this.parsedOptions.outerFrameStyle) || void 0 === _29 ? void 0 : _29.cornerRadius) && void 0 !== _30 ? _30 : 0, 0, 0, null !== (_32 = null === (_31 = this.parsedOptions.outerFrameStyle) || void 0 === _31 ? void 0 : _31.cornerRadius) && void 0 !== _32 ? _32 : 0 ],
borderLineWidth: [ null !== (_34 = null === (_33 = this.parsedOptions.outerFrameStyle) || void 0 === _33 ? void 0 : _33.borderLineWidth) && void 0 !== _34 ? _34 : 0, 0, null !== (_36 = null === (_35 = this.parsedOptions.outerFrameStyle) || void 0 === _35 ? void 0 : _35.borderLineWidth) && void 0 !== _36 ? _36 : 0, null !== (_38 = null === (_37 = this.parsedOptions.outerFrameStyle) || void 0 === _37 ? void 0 : _37.borderLineWidth) && void 0 !== _38 ? _38 : 0 ]
}),
columnResize: Object.assign({
labelColor: "rgba(0,0,0,0)",
labelBackgroundFill: "rgba(0,0,0,0)"
}, null === (_40 = null === (_39 = this.options.taskListTable) || void 0 === _39 ? void 0 : _39.theme) || void 0 === _40 ? void 0 : _40.columnResize),
underlayBackgroundColor: this.parsedOptions.underlayBackgroundColor
};
return listTable_options.canvasWidth = this.taskTableWidth, listTable_options.canvasHeight = this.canvas.height,
listTable_options.defaultHeaderRowHeight = this.getAllHeaderRowsHeight(), this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Separate ? (listTable_options.customComputeRowHeight = args => {
var _a;
const {row: row, table: table} = args, record = table.getRecordByRowCol(0, row);
if (record) return ((null === (_a = record.children) || void 0 === _a ? void 0 : _a.length) || 1) * this.parsedOptions.rowHeight;
}, listTable_options.defaultRowHeight = "auto", listTable_options.customConfig = {
forceComputeAllRowHeight: !0
}) : this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact ? (listTable_options.customComputeRowHeight = args => {
const {row: row, table: table} = args, record = table.getRecordByRowCol(0, row);
if (record) return (0, gantt_helper_1.computeRowsCountByRecordDateForCompact)(this, record) * this.parsedOptions.rowHeight;
}, listTable_options.defaultRowHeight = "auto", listTable_options.customConfig = {
forceComputeAllRowHeight: !0
}) : this.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange ? (listTable_options.customComputeRowHeight = args => {
const {row: row, table: table} = args, record = table.getRecordByRowCol(0, row);
if (record) return (0, gantt_helper_1.computeRowsCountByRecordDate)(this, record) * this.parsedOptions.rowHeight;
}, listTable_options.defaultRowHeight = "auto", listTable_options.customConfig = {
forceComputeAllRowHeight: !0
}) : listTable_options.defaultRowHeight = null !== (_41 = this.options.rowHeight) && void 0 !== _41 ? _41 : 40,
listTable_options.clearDOM = !1, listTable_options;
}
getElement() {
return this.element;
}
getContainer() {
return this.element.parentElement;
}
_sortScales() {
const {timelineHeader: timelineHeader} = this.options;
if (timelineHeader) {
const timelineScales = timelineHeader.scales, sortOrder = [ "year", "quarter", "month", "week", "day", "hour", "minute", "second" ];
1 === timelineScales.length && ("hour" !== timelineScales[0].unit && "minute" !== timelineScales[0].unit && "second" !== timelineScales[0].unit || (this.parsedOptions.timeScaleIncludeHour = !0));
const orderedScales = timelineScales.slice().sort(((a, b) => {
"hour" !== a.unit && "minute" !== a.unit && "second" !== a.unit || (this.parsedOptions.timeScaleIncludeHour = !0);
const indexA = sortOrder.indexOf(a.unit), indexB = sortOrder.indexOf(b.unit);
return -1 === indexA ? 1 : -1 === indexB ? -1 : indexA - indexB;
})), reverseOrderedScales = timelineScales.slice().sort(((a, b) => {
const indexA = sortOrder.indexOf(a.unit), indexB = sortOrder.indexOf(b.unit);
return -1 === indexA ? 1 : -1 === indexB ? -1 : indexB - indexA;
}));
this.parsedOptions.sortedTimelineScales = orderedScales, this.parsedOptions.reverseSortedTimelineScales = reverseOrderedScales;
}
}
_generateTimeLineDateMap() {
if (this.parsedOptions.minDate && this.parsedOptions.maxDate) for (const scale of this.parsedOptions.reverseSortedTimelineScales) scale.timelineDates = (0,
gantt_helper_1.generateTimeLineDate)(new Date(this.parsedOptions.minDate), this.parsedOptions.maxDate, scale);
}
getRowHeightByIndex(index) {
return this.taskListTableInstance ? this.taskListTableInstance.getRowHeight(index + this.taskListTableInstance.columnHeaderLevelCount) : this.parsedOptions.rowHeight;
}
getRowsHeightByIndex(startIndex, endIndex) {
return this.taskListTableInstance ? this.taskListTableInstance.getRowsHeight(startIndex + this.taskListTableInstance.columnHeaderLevelCount, endIndex + this.taskListTableInstance.columnHeaderLevelCount) : this.parsedOptions.rowHeight * (endIndex - startIndex + 1);
}
getAllRowsHeight() {
return this.taskListTableInstance ? this.taskListTableInstance.getAllRowsHeight() : this.getAllHeaderRowsHeight() + this.itemCount * this.parsedOptions.rowHeight;
}
getAllHeaderRowsHeight() {
return this.parsedOptions.timeLineHeaderRowHeights.reduce(((acc, curr, index) => !1 === this.parsedOptions.sortedTimelineScales[index].visible ? acc : acc + curr), 0);
}
getAllDateColsWidth() {
var _a, _b;
return this.parsedOptions.timelineColWidth * (null !== (_b = null === (_a = this.parsedOptions.reverseSortedTimelineScales[0].timelineDates) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0);
}
getAllTaskBarsHeight() {
return this.taskListTableInstance ? this.taskListTableInstance.getRowsHeight(this.taskListTableInstance.columnHeaderLevelCount, this.taskListTableInstance.rowCount - 1) : this.itemCount * this.parsedOptions.rowHeight;
}
getRecordIndexByTaskShowIndex(showIndex) {
return this.taskListTableInstance ? this.taskListTableInstance.getRecordIndexByCell(0, this.taskListTableInstance.columnHeaderLevelCount + showIndex) : showIndex;
}
getTaskShowIndexByRecordIndex(index) {
return this.taskListTableInstance.getBodyRowIndexByRecordIndex(index);
}
getRecordByIndex(taskShowIndex, sub_task_index) {
var _a, _b;
if (this.taskListTableInstance) {
if ((0, vutils_1.isValid)(sub_task_index)) {
const record = this.taskListTableInstance.getRecordByCell(0, taskShowIndex + this.taskListTableInstance.columnHeaderLevelCount);
if (Array.isArray(sub_task_index)) {
const recordIndex = this.getRecordIndexByTaskShowIndex(taskShowIndex), parentIndexLength = Array.isArray(recordIndex) ? recordIndex.length : 1, new_sub_task_index = [ ...sub_task_index ];
new_sub_task_index.splice(0, parentIndexLength);
let currentRecord = record;
for (;new_sub_task_index.length > 0; ) {
const index = new_sub_task_index.shift();
currentRecord = null === (_a = null == currentRecord ? void 0 : currentRecord.children) || void 0 === _a ? void 0 : _a[index];
}
return currentRecord;
}
return null === (_b = null == record ? void 0 : record.children) || void 0 === _b ? void 0 : _b[sub_task_index];
}
return this.taskListTableInstance.getRecordByCell(0, taskShowIndex + this.taskListTableInstance.columnHeaderLevelCount);
}
return this.records[taskShowIndex];
}
_refreshTaskBar(taskShowIndex, sub_task_index) {
this.scenegraph.taskBar.updateTaskBarNode(taskShowIndex, sub_task_index), this.scenegraph.refreshRecordLinkNodes(taskShowIndex, void 0, this.scenegraph.taskBar.getTaskBarNodeByIndex(taskShowIndex, sub_task_index)),
this.scenegraph.updateNextFrame();
}
_updateRecordToListTable(record, index) {
this.taskListTableInstance.updateRecords([ record ], [ index ]);
}
getTaskInfoByTaskListIndex(taskShowIndex, sub_task_index) {
const taskRecord = this.getRecordByIndex(taskShowIndex, sub_task_index), isMilestone = null == taskRecord ? void 0 : taskRecord.type, startDateField = this.parsedOptions.startDateField, endDateField = this.parsedOptions.endDateField, progressField = this.parsedOptions.progressField, rawDateStartDateTime = (0,
util_1.createDateAtMidnight)(null == taskRecord ? void 0 : taskRecord[startDateField]).getTime(), rawDateEndDateTime = (0,
util_1.createDateAtMidnight)(null == taskRecord ? void 0 : taskRecord[endDateField]).getTime();
if (isMilestone && !(null == taskRecord ? void 0 : taskRecord[startDateField]) || !isMilestone && (rawDateEndDateTime < this.parsedOptions._minDateTime || rawDateStartDateTime > this.parsedOptions._maxDateTime || !(null == taskRecord ? void 0 : taskRecord[startDateField]) || !(null == taskRecord ? void 0 : taskRecord[endDateField]))) return {
taskDays: 0,
progress: 0,
startDate: null,
endDate: null,
taskRecord: taskRecord
};
const progress = (0, gantt_helper_1.convertProgress)(taskRecord[progressField]);
let startDate, endDate;
this.parsedOptions.timeScaleIncludeHour ? (startDate = (0, util_1.createDateAtMidnight)(Math.min(Math.max(this.parsedOptions._minDateTime, rawDateStartDateTime), this.parsedOptions._maxDateTime)),
endDate = (0, util_1.createDateAtLastMillisecond)(Math.max(Math.min(this.parsedOptions._maxDateTime, rawDateEndDateTime), this.parsedOptions._minDateTime), !0)) : (startDate = (0,
util_1.createDateAtMidnight)(Math.min(Math.max(this.parsedOptions._minDateTime, rawDateStartDateTime), this.parsedOptions._maxDateTime), !0),
endDate = (0, util_1.createDateAtLastHour)(Math.max(Math.min(this.parsedOptions._maxDateTime, rawDateEndDateTime), this.parsedOptions._minDateTime), !0));
return {
taskRecord: taskRecord,
taskDays: (endDate.getTime() - startDate.getTime() + 1) / 864e5,
startDate: startDate,
endDate: endDate,
progress: progress
};
}
_updateStartDateToTaskRecord(startDate, index, sub_task_index) {
var _a;
const taskRecord = this.getRecordByIndex(index, sub_task_index), startDateField = this.parsedOptions.startDateField, dateFormat = null !== (_a = this.parsedOptions.dateFormat) && void 0 !== _a ? _a : (0,
util_1.parseDateFormat)(taskRecord[startDateField]), newStartDate = (0, util_1.formatDate)(startDate, dateFormat);
if (taskRecord[startDateField] = newStartDate, (0, vutils_1.isValid)(sub_task_index)) Array.isArray(sub_task_index) && this.stateManager.updateProjectTaskTimes(sub_task_index); else {
const indexs = this.getRecordIndexByTaskShowIndex(index);
this._updateRecordToListTable(taskRecord, indexs), Array.isArray(indexs) && this.stateManager.updateProjectTaskTimes(indexs);
}
}
_updateEndDateToTaskRecord(endDate, index, sub_task_index) {
var _a;
const taskRecord = this.getRecordByIndex(index, sub_task_index), endDateField = this.parsedOptions.endDateField, dateFormat = null !== (_a = this.parsedOptions.dateFormat) && void 0 !== _a ? _a : (0,
util_1.parseDateFormat)(taskRecord[endDateField]), newEndDate = (0, util_1.formatDate)(endDate, dateFormat);
if (taskRecord[endDateField] = newEndDate, (0, vutils_1.isValid)(sub_task_index)) Array.isArray(sub_task_index) && this.stateManager.updateProjectTaskTimes(sub_task_index); else {
const indexs = this.getRecordIndexByTaskShowIndex(index);
this._updateRecordToListTable(taskRecord, indexs), Array.isArray(indexs) && this.stateManager.updateProjectTaskTimes(indexs);
}
}
_updateStartEndDateToTaskRecord(startDate, endDate, index, sub_task_index) {
var _a;
const taskRecord = this.getRecordByIndex(index, sub_task_index), startDateField = this.parsedOptions.startDateField, endDateField = this.parsedOptions.endDateField, dateFormat = null !== (_a = this.parsedOptions.dateFormat) && void 0 !== _a ? _a : (0,
util_1.parseDateFormat)(taskRecord[startDateField]), newStartDate = (0, util_1.formatDate)(startDate, dateFormat);
taskRecord[startDateField] = newStartDate;
const newEndDate = (0, util_1.formatDate)(endDate, dateFormat);
if (taskRecord[endDateField] = newEndDate, (0, vutils_1.isValid)(sub_task_index)) Array.isArray(sub_task_index) && this.stateManager.updateProjectTaskTimes(sub_task_index); else {
const indexs = this.getRecordIndexByTaskShowIndex(index);
this._updateRecordToListTable(taskRecord, indexs), Array.isArray(indexs) && this.stateManager.updateProjectTaskTimes(indexs);
}
}
_dragOrderTaskRecord(source_index, source_sub_task_index, target_index, target_sub_task_index) {
this.data.adjustOrder(source_index, source_sub_task_index, target_index, target_sub_task_index);
}
updateTaskRecord(record, task_index, sub_task_index) {
if ((0, vutils_1.isValid)(sub_task_index)) {
const index = "number" == typeof task_index ? task_index : task_index[0];
return this._updateRecordToListTable(record, [ index, sub_task_index ]), void this._refreshTaskBar(index, sub_task_index);
}
if (Array.isArray(task_index)) {
const index = task_index[0], sub_index = task_index[1];
return this._updateRecordToListTable(record, task_index), void this._refreshTaskBar(index, sub_index);
}
let recordIndexs = task_index;
"tree" === this.taskListTableInstance.rowHierarchyType && (recordIndexs = this.taskListTableInstance.getRecordIndexByCell(0, task_index + this.taskListTableInstance.columnHeaderLevelCount)),
this._updateRecordToListTable(record, recordIndexs), this._refreshTaskBar(task_index, void 0);
}
setPixelRatio(pixelRatio) {
var _a;
null === (_a = this.taskListTableInstance) || void 0 === _a || _a.setPixelRatio(pixelRatio),
this.parsedOptions.pixelRatio = pixelRatio, this.scenegraph.setPixelRatio(pixelRatio);
}
updateTasksShowMode(tasksShowMode) {
this.options.tasksShowMode = tasksShowMode, this.updateOption(this.options);
}
_resize() {
var _a;
this._updateSize(), null === (_a = this.taskListTableInstance) || void 0 === _a || _a.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + 2 * this.parsedOptions.outerFrameStyle.borderLineWidth),
this._syncPropsFromTable(), this.scenegraph.resize(), (0, gantt_helper_1.updateSplitLineAndResizeLine)(this);
}
_syncPropsFromTable() {
this.itemCount = this.taskListTableInstance ? this.taskListTableInstance.rowCount - this.taskListTableInstance.columnHeaderLevelCount : this.records.length,
this.headerHeight = this.getAllHeaderRowsHeight(), this.drawHeight = Math.min(this.getAllRowsHeight(), this.tableNoFrameHeight),
this.gridHeight = this.drawHeight - this.headerHeight;
}
getContext() {
return this.context;
}
release() {
var _a, _b;
null === (_a = super.release) || void 0 === _a || _a.call(this), this.eventManager.release(),
null === (_b = this.taskListTableInstance) || void 0 === _b || _b.release();
const {parentElement: parentElement} = this.element;
parentElement && (parentElement.removeChild(this.element), this.verticalSplitResizeLine && parentElement.removeChild(this.verticalSplitResizeLine),
this.horizontalSplitLine && parentElement.removeChild(this.horizontalSplitLine)),
this.scenegraph = null, this.pluginManager.release();
}
updateOption(options) {
var _a, _b, _c, _d, _e;
if (this.parsedOptions = {}, this.options = options, this.taskTableWidth = "number" == typeof (null === (_a = null == options ? void 0 : options.taskListTable) || void 0 === _a ? void 0 : _a.tableWidth) ? null === (_b = null == options ? void 0 : options.taskListTable) || void 0 === _b ? void 0 : _b.tableWidth : -1,
this.taskTableColumns = null !== (_d = null === (_c = null == options ? void 0 : options.taskListTable) || void 0 === _c ? void 0 : _c.columns) && void 0 !== _d ? _d : [],
this.records = null !== (_e = null == options ? void 0 : options.records) && void 0 !== _e ? _e : [],
this._sortScales(), (0, gantt_helper_1.initOptions)(this), this.data.setRecords(this.records),
this._generateTimeLineDateMap(), this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length,
this._updateSize(), this.taskListTableInstance) {
const listTableOption = this._generateListTableOptions();
this.taskListTableInstance.updateOption(listTableOption), this._updateListTableSize(this.taskListTableInstance);
}
this._syncPropsFromTable(), this.scenegraph.updateStageBackground(), this.element.style.left = this.taskTableWidth ? `${this.taskTableWidth}px` : "0px",
(0, gantt_helper_1.updateSplitLineAndResizeLine)(this), this.scenegraph.updateSceneGraph(),
this.scenegraph.afterCreateSceneGraph(), this._scrollToMarkLine();
}
setRecords(records) {
this.records = records, this.data.setRecords(records), (0, gantt_helper_1.updateOptionsWhenRecordChanged)(this),
this.taskListTableInstance.setRecords(records), this._syncPropsFromTable(), this._generateTimeLineDateMap(),
this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length, this._updateSize(),
this.scenegraph.refreshAll(), this.verticalSplitResizeLine.style.height = this.drawHeight + "px";
const left = this.stateManager.scroll.horizontalBarPos, top = this.stateManager.scroll.verticalBarPos;
this.scenegraph.setX(-left), this.scenegraph.setY(-top);
}
updateScales(scales) {
const oldScalesLength = this.parsedOptions.sortedTimelineScales.length;
if (this.options.timelineHeader.scales = scales, this._sortScales(), (0, gantt_helper_1.updateOptionsWhenScaleChanged)(this),
this._generateTimeLineDateMap(), this.timeLineHeaderLevel = this.parsedOptions.sortedTimelineScales.length,
this.scenegraph.refreshAll(), (0, gantt_helper_1.updateSplitLineAndResizeLine)(this),
this.taskListTableInstance) if (this.taskListTableInstance.columnHeaderLevelCount === this.parsedOptions.timeLineHeaderRowHeights.length) for (let i = 0; i < this.taskListTableInstance.columnHeaderLevelCount; i++) this.taskListTableInstance.setRowHeight(i, this.parsedOptions.timeLineHeaderRowHeights[i]); else {
const newRowHeight = this.getAllHeaderRowsHeight() / this.taskListTableInstance.columnHeaderLevelCount;
for (let i = 0; i < this.taskListTableInstance.columnHeaderLevelCount; i++) this.taskListTableInstance.setRowHeight(i, newRowHeight);
}
oldScalesLength !== scales.length && this._resize();
}
updateDateRange(minDate, maxDate) {
this.options.minDate = minDate, this.options.maxDate = maxDate, (0, gantt_helper_1.updateOptionsWhenDateRangeChanged)(this),
this._generateTimeLineDateMap(), this._updateSize(), this.scenegraph.refreshAll(),
this._scrollToMarkLine();
}
updateMarkLine(markLine) {
this.options.markLine = markLine, (0, gantt_helper_1.updateOptionsWhenMarkLineChanged)(this),
this.scenegraph.markLine.refresh(), this.scenegraph.renderSceneGraph();
}
addMarkLine(markLine) {
this.options.markLine = [ ...this.parsedOptions.markLine, markLine ], (0, gantt_helper_1.updateOptionsWhenMarkLineChanged)(this),
this.scenegraph.markLine.refresh(), this.scenegraph.renderSceneGraph(), this.scenegraph.updateNextFrame();
}
updateCurrentMarkLine(markLine) {
const currentMarkLineIndex = this.parsedOptions.markLine.findIndex((item => item.date === markLine.date));
-1 !== currentMarkLineIndex && (this.options.markLine = [ ...this.parsedOptions.markLine.slice(0, currentMarkLineIndex), Object.assign(Object.assign({}, this.options.markLine[currentMarkLineIndex]), markLine), ...this.parsedOptions.markLine.slice(currentMarkLineIndex + 1) ],
(0, gantt_helper_1.updateOptionsWhenMarkLineChanged)(this), this.scenegraph.markLine.refresh(),
this.scenegraph.renderSceneGraph(), this.scenegraph.updateNextFrame());
}
_scrollToMarkLine() {
if (this.parsedOptions.scrollToMarkLineDate && this.parsedOptions.minDate) {
const minDate = this.parsedOptions.minDate, {unit: unit, step: step} = this.parsedOptions.reverseSortedTimelineScales[0], left = (0,
util_1.computeCountToTimeScale)(this.parsedOptions.scrollToMarkLineDate, minDate, unit, step) * this.parsedOptions.timelineColWidth - this.tableNoFrameWidth / 2;
this.stateManager.setScrollLeft(left);
}
}
scrollToMarkLine(date) {
if (!date || !this.parsedOptions.minDate) return;
const minDate = this.parsedOptions.minDate, {unit: unit, step: step} = this.parsedOptions.reverseSortedTimelineScales[0], left = (0,
util_1.computeCountToTimeScale)(date, minDate, unit, step) * this.parsedOptions.timelineColWidth - this.tableNoFrameWidth / 2;
this.stateManager.setScrollLeft(left);
}
addLink(link) {
this.parsedOptions.dependencyLinks.push(link), this.scenegraph.dependencyLink.initLinkLine(this.parsedOptions.dependencyLinks.length - 1),
this.scenegraph.updateNextFrame();
}
deleteLink(link) {
if (this.parsedOptions.dependencyLinkDeletable) {
const index = this.parsedOptions.dependencyLinks.findIndex((item => item.type === link.type && item.linkedFromTaskKey === link.linkedFromTaskKey && item.linkedToTaskKey === link.linkedToTaskKey));
if (-1 !== index) {
const link = this.parsedOptions.dependencyLinks[index];
this.parsedOptions.dependencyLinks.splice(index, 1), this.scenegraph.dependencyLink.deleteLink(link),
this.scenegraph.updateNextFrame();
}
}
}
get scrollTop() {
return this.stateManager.scrollTop;
}
set scrollTop(value) {
this.stateManager.setScrollTop(value);
}
get scrollLeft() {
return this.stateManager.scrollLeft;
}
set scrollLeft(value) {
this.stateManager.setScrollLeft(value);
}
getTaskBarRelativeRect(index) {
const taskBarNode = this.scenegraph.taskBar.getTaskBarNodeByIndex(index);
return {
left: taskBarNode.attribute.x + this.taskListTableInstance.tableNoFrameWidth + this.taskListTableInstance.tableX + this.tableX - this.scrollLeft,
top: taskBarNode.attribute.y + this.tableY + this.headerHeight - this.scrollTop,
width: taskBarNode.attribute.width,
height: taskBarNode.attribute.height
};
}
getDateColWidth(dateIndex) {
return this.parsedOptions.timelineColWidth;
}
getDateColsWidth(startDateIndex, endDateIndex) {
return (endDateIndex - startDateIndex + 1) * this.parsedOptions.timelineColWidth;
}
getDateRangeByIndex(index) {
const minScale = this.parsedOptions.reverseSortedTimelineScales[0];
if (index < minScale.timelineDates.length) {
return {
startDate: minScale.timelineDates[index].startDate,
endDate: minScale.timelineDates[index].endDate
};
}
return null;
}
parseTimeFormat(date) {
return (0, util_1.parseDateFormat)(date);
}
getTaskBarStyle(task_index, sub_task_index) {
const {startDate: startDate, endDate: endDate, taskRecord: taskRecord} = this.getTaskInfoByTaskListIndex(task_index, sub_task_index);
let style;
if (style = taskRecord.type === ts_types_1.TaskType.PROJECT ? this.parsedOptions.projectBarStyle : this.parsedOptions.taskBarStyle,
"function" == typeof style) {
return style({
index: task_index,
startDate: startDate,
endDate: endDate,
taskRecord: taskRecord,
ganttInstance: this
});
}
return style;
}
formatDate(date, format) {
return (0, util_1.formatDate)(date, format);
}
}
exports.Gantt = Gantt;