「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图（四）
DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。
在web项目中使用DHTMLX Gantt时，开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的自定义能力，因此本文仅继续介绍DHTMLX Gantt的自定义用例。
在这个系列的文章中，您将学习如何使用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路线图。