UNPKG

@visactor/vtable-gantt

Version:

canvas table width high performance

240 lines (234 loc) 22.1 kB
"use strict"; var __importDefault = this && this.__importDefault || function(mod) { return mod && mod.__esModule ? mod : { default: mod }; }; Object.defineProperty(exports, "__esModule", { value: !0 }), exports.Scenegraph = void 0; const vrender_1 = require("@visactor/vtable/es/vrender"), grid_1 = require("./grid"), env_1 = require("../env"), scroll_bar_1 = require("./scroll-bar"), scroll_1 = require("../event/scroll"), timeline_header_1 = require("./timeline-header"), task_bar_1 = require("./task-bar"), mark_line_1 = require("./mark-line"), frame_border_1 = require("./frame-border"), gantt_helper_1 = require("../gantt-helper"), graphic_1 = __importDefault(require("./graphic")), task_creation_button_1 = require("./task-creation-button"), tooltip_1 = require("./tooltip"), dependency_link_1 = require("./dependency-link"), drag_order_line_1 = require("./drag-order-line"), ts_types_1 = require("../ts-types"); vrender_1.container.load(graphic_1.default); class Scenegraph { constructor(gantt) { let width, height; this._gantt = gantt, this.tableGroupWidth = gantt.tableNoFrameWidth, this.tableGroupHeight = Math.min(gantt.tableNoFrameHeight, gantt.drawHeight), "node" === env_1.Env.mode || (vrender_1.vglobal.setEnv("browser"), width = gantt.canvas.width, height = gantt.canvas.height), this.stage = (0, vrender_1.createStage)({ canvas: gantt.canvas, width: width, height: height, disableDirtyBounds: !1, background: gantt.parsedOptions.underlayBackgroundColor, enableLayout: !0, autoRender: !1, context: { appName: "vtable" }, pluginList: [ "poptipForText" ] }), this.stage.gantt = this._gantt, this.stage.table = this._gantt, this.stage.defaultLayer.setTheme({ group: { boundsPadding: 0, strokeBoundsBuffer: 0, lineJoin: "round" }, text: { ignoreBuf: !0 } }), this.initSceneGraph(); } initSceneGraph() { this.ganttGroup = new vrender_1.Group({ x: this._gantt.tableX, y: this._gantt.tableY, width: this.tableGroupWidth, height: this.tableGroupHeight, clip: !0, pickable: !1 }), this.stage.defaultLayer.add(this.ganttGroup), this.ganttGroup.name = "table", this.timelineHeader = new timeline_header_1.TimelineHeader(this), this.grid = new grid_1.Grid(this), this.dependencyLink = new dependency_link_1.DependencyLink(this), this.taskBar = new task_bar_1.TaskBar(this), this.markLine = new mark_line_1.MarkLine(this), this.toolTip = new tooltip_1.ToolTip(this), this.frameBorder = new frame_border_1.FrameBorder(this), this.scrollbarComponent = new scroll_bar_1.ScrollBarComponent(this._gantt), this.stage.defaultLayer.addChild(this.scrollbarComponent.hScrollBar), this.stage.defaultLayer.addChild(this.scrollbarComponent.vScrollBar), this.dragOrderLine = new drag_order_line_1.DragOrderLine(this); } updateSceneGraph() { const gantt = this._gantt; let width, height; this.tableGroupWidth = gantt.tableNoFrameWidth, this.tableGroupHeight = Math.min(gantt.tableNoFrameHeight, gantt.drawHeight), "node" === env_1.Env.mode || (vrender_1.vglobal.setEnv("browser"), width = gantt.canvas.width, height = gantt.canvas.height), this.stage.resize(width, height), this.refreshAll(); } afterCreateSceneGraph() { this.scrollbarComponent.updateScrollBar(), (0, scroll_1.bindScrollBarListener)(this._gantt.eventManager); } refreshAll() { this.tableGroupHeight = Math.min(this._gantt.tableNoFrameHeight, this._gantt.drawHeight), this.tableGroupWidth = this._gantt.tableNoFrameWidth, this.ganttGroup.setAttribute("height", this.tableGroupHeight), this.ganttGroup.setAttribute("width", this.tableGroupWidth), this.timelineHeader.refresh(), this.grid.refresh(), this.taskBar.refresh(), this.dependencyLink.refresh(), this.markLine.refresh(), this.dependencyLink.refresh(), this.frameBorder.refresh(), this.scrollbarComponent.updateScrollBar(), this.updateNextFrame(); } refreshTaskBars() { this.dependencyLink.refresh(), this.taskBar.refresh(), this.updateNextFrame(); } refreshTaskBarsAndGrid() { this._gantt.verticalSplitResizeLine.style.height = this._gantt.drawHeight + "px", this.tableGroupHeight = Math.min(this._gantt.tableNoFrameHeight, this._gantt.drawHeight), this.ganttGroup.setAttribute("height", this.tableGroupHeight), this.grid.refresh(), this.taskBar.refresh(), this.dependencyLink.refresh(), this.markLine.refresh(), this.frameBorder.resize(), this.scrollbarComponent.updateScrollBar(), this.updateNextFrame(); } updateTableSize() { this.tableGroupHeight = Math.min(this._gantt.tableNoFrameHeight, this._gantt.drawHeight), this.tableGroupWidth = this._gantt.tableNoFrameWidth, this.ganttGroup.setAttributes({ x: this._gantt.tableX, y: this._gantt.tableY, width: this._gantt.tableNoFrameWidth, height: this.tableGroupHeight }), this.grid.resize(), this.taskBar.resize(), this.dependencyLink.resize(), this.markLine.refresh(), this.frameBorder.resize(); } updateStageBackground() { this.stage.background = this._gantt.parsedOptions.underlayBackgroundColor, this.updateNextFrame(); } renderSceneGraph() { this.stage.render(); } updateNextFrame() { this.stage.renderNextFrame(); } get width() { var _a, _b; return null !== (_b = null === (_a = this.ganttGroup.attribute) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : 0; } get height() { var _a, _b; return null !== (_b = null === (_a = this.ganttGroup.attribute) || void 0 === _a ? void 0 : _a.height) && void 0 !== _b ? _b : 0; } get x() { var _a, _b; return null !== (_b = null === (_a = this.ganttGroup.attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0; } get y() { var _a, _b; return null !== (_b = null === (_a = this.ganttGroup.attribute) || void 0 === _a ? void 0 : _a.y) && void 0 !== _b ? _b : 0; } setX(x, isEnd = !1) { this.timelineHeader.setX(x), this.grid.setX(x), this.taskBar.setX(x), this.dependencyLink.setX(x), this.markLine.setX(x), this.updateNextFrame(); } setY(y, isEnd = !1) { this.grid.setY(y), this.taskBar.setY(y), this.dependencyLink.setY(y), this.updateNextFrame(); } setPixelRatio(pixelRatio) { this.stage.disableDirtyBounds(), this.stage.window.setDpr(pixelRatio), this.stage.render(), this.stage.enableDirtyBounds(); } resize() { this.updateTableSize(), this.scrollbarComponent.updateScrollBar(), this.updateNextFrame(); } release() { this.stage.release(); } showTaskCreationButton(x, y, dateIndex) { this.taskCreationButton || (this.taskCreationButton = new task_creation_button_1.TaskCreationButton(this._gantt.scenegraph)); const createButton_max_width = this._gantt.parsedOptions.taskBarCreationMaxWidth, createButton_min_width = this._gantt.parsedOptions.taskBarCreationMinWidth, col_width = this._gantt.getDateColWidth(dateIndex), button_width = createButton_max_width ? Math.min(createButton_max_width, createButton_min_width ? Math.max(createButton_min_width, col_width) : col_width) : createButton_min_width ? Math.max(createButton_min_width, col_width) : col_width, button_x = x - (button_width - col_width) / 2; this.taskCreationButton.show(button_x, y, button_width, this._gantt.parsedOptions.rowHeight), this.updateNextFrame(); } hideTaskCreationButton() { this.taskCreationButton && (this.taskCreationButton.hide(), this.updateNextFrame()); } showToolTip(target) { this.toolTip || (this.toolTip = new tooltip_1.ToolTip(this._gantt.scenegraph)), this.toolTip.show(target); } hideToolTip() { this.toolTip.hide(); } refreshRecordLinkNodes(taskIndex, sub_task_index, target, dy = 0) { const gantt = this._gantt, record = gantt.getRecordByIndex(taskIndex, sub_task_index), vtable_gantt_linkedTo = record.vtable_gantt_linkedTo, vtable_gantt_linkedFrom = record.vtable_gantt_linkedFrom; for (let i = 0; i < (null == vtable_gantt_linkedTo ? void 0 : vtable_gantt_linkedTo.length); i++) { const link = vtable_gantt_linkedTo[i], linkLineNode = link.vtable_gantt_linkLineNode, lineArrowNode = link.vtable_gantt_linkArrowNode, {linkedToTaskKey: linkedToTaskKey, linkedFromTaskKey: linkedFromTaskKey, type: type} = link, {taskKeyField: taskKeyField, minDate: minDate} = gantt.parsedOptions, linkedFromTaskRecord = (0, gantt_helper_1.findRecordByTaskKey)(gantt.records, taskKeyField, linkedFromTaskKey), linkedToTaskRecord = (0, gantt_helper_1.findRecordByTaskKey)(gantt.records, taskKeyField, linkedToTaskKey); let linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskTaskDays, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskTaskDays, linkedToTaskShowIndex, linkedFromTaskShowIndex, diffY; const taskBarStyle = this._gantt.getTaskBarStyle(taskIndex, sub_task_index); if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Inline) { const new_indexs = (0, gantt_helper_1.getTaskIndexsByTaskY)(target.attribute.y + dy, gantt); linkedFromTaskShowIndex = linkedFromTaskRecord.index[0]; linkedToTaskShowIndex = gantt.getRowsHeightByIndex(0, new_indexs.task_index - 1) / gantt.parsedOptions.rowHeight, ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskRecord.index[0], linkedToTaskRecord.index[1])), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskRecord.index[0], linkedFromTaskRecord.index[1])); const taskbarHeight = taskBarStyle.width; diffY = target.attribute.y + taskbarHeight / 2 - (linkedToTaskShowIndex + .5) * gantt.parsedOptions.rowHeight; } else if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Project_Sub_Tasks_Inline) { const fromParentRecordShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index.slice(0, -1)), toParentRecordShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index.slice(0, -1)), fromParentRecord = gantt.getRecordByIndex(fromParentRecordShowIndex), toParentRecord = gantt.getRecordByIndex(toParentRecordShowIndex); linkedFromTaskShowIndex = fromParentRecord.type === ts_types_1.TaskType.PROJECT && "expand" !== fromParentRecord.hierarchyState && !1 !== gantt.parsedOptions.projectSubTasksExpandable ? fromParentRecordShowIndex : gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index), linkedToTaskShowIndex = toParentRecord.type === ts_types_1.TaskType.PROJECT && "expand" !== toParentRecord.hierarchyState && !1 !== gantt.parsedOptions.projectSubTasksExpandable ? toParentRecordShowIndex : gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index), ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskShowIndex, linkedToTaskRecord.index)), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex, linkedFromTaskRecord.index)); } else if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Separate || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact) { const new_indexs = (0, gantt_helper_1.getTaskIndexsByTaskY)(target.attribute.y + dy, gantt); linkedFromTaskShowIndex = gantt.getRowsHeightByIndex(0, linkedFromTaskRecord.index[0] - 1) / gantt.parsedOptions.rowHeight + (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact ? linkedFromTaskRecord.record.vtable_gantt_showIndex : linkedFromTaskRecord.index[1]); linkedToTaskShowIndex = gantt.getRowsHeightByIndex(0, new_indexs.task_index - 1) / gantt.parsedOptions.rowHeight + (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact ? linkedToTaskRecord.record.vtable_gantt_showIndex : new_indexs.sub_task_index), ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskRecord.index[0], linkedToTaskRecord.index[1])), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskRecord.index[0], linkedFromTaskRecord.index[1])); const taskbarHeight = taskBarStyle.width; diffY = target.attribute.y + taskbarHeight / 2 - (linkedToTaskShowIndex + .5) * gantt.parsedOptions.rowHeight; } else { if (linkedFromTaskShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index), linkedToTaskShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index), -1 === linkedFromTaskShowIndex || -1 === linkedToTaskShowIndex) continue; ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskShowIndex)), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex)); } if (!(linkedFromTaskStartDate && linkedFromTaskEndDate && linkedToTaskStartDate && linkedToTaskEndDate && linkLineNode && lineArrowNode)) return; const {linePoints: linePoints, arrowPoints: arrowPoints} = (0, dependency_link_1.updateLinkLinePoints)(type, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskShowIndex, linkedFromTaskTaskDays, linkedFromTaskRecord.record.type === ts_types_1.TaskType.MILESTONE, null, 0, linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskShowIndex, linkedToTaskTaskDays, linkedToTaskRecord.record.type === ts_types_1.TaskType.MILESTONE, target, null != diffY ? diffY : 0, this._gantt); linkLineNode.setAttribute("points", linePoints), lineArrowNode.setAttribute("points", arrowPoints); } for (let i = 0; i < (null == vtable_gantt_linkedFrom ? void 0 : vtable_gantt_linkedFrom.length); i++) { const link = vtable_gantt_linkedFrom[i], linkLineNode = link.vtable_gantt_linkLineNode, lineArrowNode = link.vtable_gantt_linkArrowNode, {linkedToTaskKey: linkedToTaskKey, linkedFromTaskKey: linkedFromTaskKey, type: type} = link, {taskKeyField: taskKeyField, minDate: minDate} = gantt.parsedOptions, linkedToTaskRecord = (0, gantt_helper_1.findRecordByTaskKey)(gantt.records, taskKeyField, linkedToTaskKey), linkedFromTaskRecord = (0, gantt_helper_1.findRecordByTaskKey)(gantt.records, taskKeyField, linkedFromTaskKey); let linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskTaskDays, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskTaskDays, linkedToTaskShowIndex, linkedFromTaskShowIndex, diffY; const taskBarStyle = this._gantt.getTaskBarStyle(taskIndex, sub_task_index); if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Inline) { const new_indexs = (0, gantt_helper_1.getTaskIndexsByTaskY)(target.attribute.y + dy, gantt); linkedFromTaskShowIndex = gantt.getRowsHeightByIndex(0, new_indexs.task_index - 1) / gantt.parsedOptions.rowHeight, linkedToTaskShowIndex = linkedToTaskRecord.index[0], ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskRecord.index[0], linkedToTaskRecord.index[1])), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskRecord.index[0], linkedFromTaskRecord.index[1])); const taskbarHeight = taskBarStyle.width; diffY = target.attribute.y + taskbarHeight / 2 - (linkedFromTaskShowIndex + .5) * gantt.parsedOptions.rowHeight; } else if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Project_Sub_Tasks_Inline) { const fromParentRecordShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index.slice(0, -1)), toParentRecordShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index.slice(0, -1)), fromParentRecord = gantt.getRecordByIndex(fromParentRecordShowIndex), toParentRecord = gantt.getRecordByIndex(toParentRecordShowIndex); linkedFromTaskShowIndex = fromParentRecord.type === ts_types_1.TaskType.PROJECT && "expand" !== fromParentRecord.hierarchyState && !1 !== gantt.parsedOptions.projectSubTasksExpandable ? fromParentRecordShowIndex : gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index), linkedToTaskShowIndex = toParentRecord.type === ts_types_1.TaskType.PROJECT && "expand" !== toParentRecord.hierarchyState && !1 !== gantt.parsedOptions.projectSubTasksExpandable ? toParentRecordShowIndex : gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index), ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskShowIndex, linkedToTaskRecord.index)), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex, linkedFromTaskRecord.index)); } else if (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Separate || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact) { const new_indexs = (0, gantt_helper_1.getTaskIndexsByTaskY)(target.attribute.y + dy, gantt); linkedFromTaskShowIndex = gantt.getRowsHeightByIndex(0, new_indexs.task_index - 1) / gantt.parsedOptions.rowHeight + (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact ? linkedFromTaskRecord.record.vtable_gantt_showIndex : new_indexs.sub_task_index); linkedToTaskShowIndex = gantt.getRowsHeightByIndex(0, linkedToTaskRecord.index[0] - 1) / gantt.parsedOptions.rowHeight + (gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Arrange || gantt.parsedOptions.tasksShowMode === ts_types_1.TasksShowMode.Sub_Tasks_Compact ? linkedToTaskRecord.record.vtable_gantt_showIndex : linkedToTaskRecord.index[1]), ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskRecord.index[0], linkedToTaskRecord.index[1])), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskRecord.index[0], linkedFromTaskRecord.index[1])); const taskbarHeight = taskBarStyle.width; diffY = target.attribute.y + taskbarHeight / 2 - (linkedFromTaskShowIndex + .5) * gantt.parsedOptions.rowHeight; } else { if (linkedFromTaskShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedFromTaskRecord.index), linkedToTaskShowIndex = gantt.getTaskShowIndexByRecordIndex(linkedToTaskRecord.index), -1 === linkedFromTaskShowIndex || -1 === linkedToTaskShowIndex) continue; ({startDate: linkedToTaskStartDate, endDate: linkedToTaskEndDate, taskDays: linkedToTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedToTaskShowIndex)), ({startDate: linkedFromTaskStartDate, endDate: linkedFromTaskEndDate, taskDays: linkedFromTaskTaskDays} = gantt.getTaskInfoByTaskListIndex(linkedFromTaskShowIndex)); } if (!(linkedFromTaskStartDate && linkedFromTaskEndDate && linkedToTaskStartDate && linkedToTaskEndDate && linkLineNode && lineArrowNode)) return; const {linePoints: linePoints, arrowPoints: arrowPoints} = (0, dependency_link_1.updateLinkLinePoints)(type, linkedFromTaskStartDate, linkedFromTaskEndDate, linkedFromTaskShowIndex, linkedFromTaskTaskDays, linkedFromTaskRecord.record.type === ts_types_1.TaskType.MILESTONE, target, null != diffY ? diffY : 0, linkedToTaskStartDate, linkedToTaskEndDate, linkedToTaskShowIndex, linkedToTaskTaskDays, linkedToTaskRecord.record.type === ts_types_1.TaskType.MILESTONE, null, 0, this._gantt); linkLineNode.setAttribute("points", linePoints), lineArrowNode.setAttribute("points", arrowPoints); } } } exports.Scenegraph = Scenegraph; //# sourceMappingURL=scenegraph.js.map