「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图（四）

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。

在web项目中使用DHTMLX Gantt时，开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力，因此本文仅继续介绍DHTMLX Gantt的自定义用例。

DHTMLX Gantt v8.0正式版下载

在这个系列的文章中，您将学习如何使用DHTMLX Gantt组件构建类似jira的项目路线图。在上文中（点击这里回顾>>）主要介绍了如何实现工作项的自定义对话框窗口、自定义网格列等，本文将继续介绍如何自定义时间线调整器等，欢迎持续关注！

定制指南

自定义时间线调整器

路线图顶部还有一个双面调整器，可用于更改显示的日期范围，路线图包括任务的日期范围和显示的日期范围。它们不是一回事，任务日期的范围取决于已加载的任务，并根据任务日期进行更改。缺省情况下，不指定显示的日期范围，取决于任务日期。但是如果您设置了日期范围，它将保持不变，直到您更改它。

现在我们应该介绍关于调整器中日期范围的HTML元素结构，在后台，有一个元素用于显示任务日期的总范围。在前台，你可以看到两个圆的元素作为resizers。在这两个元素之间，我们使用了另一个元素，它突出显示相对于任务日期范围的显示日期范围。

<div class="range_resizer" title="Change the displayed date range">
<div class="total_range">
<div class="range_indicator">div>
<div class="left_resizer">div>
<div class="right_resizer">div>
div>
div>

为了使这些元素易于管理，您必须向窗口对象添加事件处理程序。单击鼠标按钮后，事件处理程序将检查鼠标是否位于左侧或右侧调整大小器上。如果是，则resizeElement元素保存在resizeElement变量中。

window.addEventListener('mousedown', function (e) {
const element = e.target.closest(".left_resizer") || e.target.closest(".right_resizer")
if (element) {
resizeElement = element;
}
});

在释放鼠标按钮之后，必须重置变量，以便在移动鼠标指针时不会改变任何其他内容。

window.addEventListener('mouseup', function (e) {
resizeElement = false;
});

如果resizer元素存储在变量中，则主要操作发生在mousemove事件中。首先，您需要添加两个常量来指定resizer元素的一半宽度(resizerWidth)和左/右缩进(margin)。

window.addEventListener('mousemove', function (e) {
if (resizeElement) {
const resizerWidth = 8;
const margin = 10;

然后将调整器宽度的一半添加到具有新元素位置的变量中，因此当鼠标移动时，元素将被放置在中间(而不是右边)。

let newPosition = e.pageX - resizerWidth;

之后，您将收到两个调整器的HTML元素、任务的日期范围以及它们的坐标。

const totalRange = document.querySelector(".total_range");
const leftResizer = document.querySelector(".left_resizer");
const rightResizer = document.querySelector(".right_resizer");
 
const totalRect = totalRange.getBoundingClientRect();
const leftRect = leftResizer.getBoundingClientRect();
const rightRect = rightResizer.getBoundingClientRect();

然后，您必须根据坐标和调整器的类型(左或右)修改新调整器的位置。调整大小器不应该扩展到日期范围元素之外，并且应该正确地放置在彼此之间。

if (resizeElement.className == "left_resizer") {
if (newPosition < totalRect.x) {
newPosition = totalRect.x
}
if (newPosition + resizerWidth >= rightRect.x) {
newPosition = rightRect.x - resizerWidth;
}
}
else {
if (newPosition > totalRect.x + totalRect.width - resizerWidth * 2) {
newPosition = totalRect.x + totalRect.width - resizerWidth * 2;
}
if (newPosition - resizerWidth <= leftRect.x) {
newPosition = leftRect.x + resizerWidth;
}
}

向正在拖动的调整大小器添加一个新坐标。

resizeElement.style.left = newPosition + "px";

设置显示的调整大小器日期范围的指示符元素坐标。

const rangeIndicator = document.querySelector(".range_indicator");
 
rangeIndicator.style.left = leftResizer.offsetLeft + margin + "px";
rangeIndicator.style.width = rightResizer.offsetLeft - leftResizer.offsetLeft + "px";

下一步是将两个调整器的坐标与路线图数据关联起来。在这里您应该获得任务日期范围，并在此范围内以天为单位计算持续时间。

const range = gantt.getSubtaskDates();
const rangeDuration = gantt.calculateDuration(range.start_date, range.end_date);

现在我们应该提到用于转换值的逻辑。对于左侧调整大小器，您应该沿x轴取其坐标(offsetLeft)并减去左侧边距。结果值应该除以任务日期范围的持续时间，然后乘以指示任务日期范围的元素的宽度。类似的逻辑适用于正确的调整大小器，只是您必须添加替代减去边距。

const leftPos = Math.round((leftResizer.offsetLeft - margin) / totalRect.width * rangeDuration);
const rightPos = Math.round((rightResizer.offsetLeft + margin) / totalRect.width * rangeDuration);

结果将是必须添加到任务日期范围的开始日期天数，您必须将这些值添加到start_date和end_date配置中。要重新绘制更改，需要使用render()方法。

gantt.config.start_date = gantt.date.add(range.start_date, leftPos, "day");
gantt.config.end_date = gantt.date.add(range.start_date, rightPos, "day")
 
gantt.render()

这些主要步骤将允许您构建与示例类似的jira路线图。