jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

fix scrolling issue, make smoother scrolling

Browse Source
This commit is contained in:
safwansamsudeen 2024-12-05 12:58:45 +05:30
parent 6c8cc993c4
commit 0c9e4aeb3e
2 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/gantt.css
View File

@ -28,7 +28,6 @@
overflow: auto; overflow: auto;
font-size: 12px; font-size: 12px;
height: 500px; height: 500px;
width: fit-content;
& .popup-wrapper { & .popup-wrapper {
position: absolute; position: absolute;

52
src/index.js
View File

@ -627,20 +627,22 @@ export default class Gantt {
highlightToday(view_mode) { highlightToday(view_mode) {
const today = new Date(); const today = new Date();
if (today < this.gantt_start || today > this.gantt_end) return null; if (today < this.gantt_start || today > this.gantt_end) return null;
let diff_in_units = date_utils.diff( const diff_in_units = date_utils.diff(
today, today,
this.gantt_start, this.gantt_start,
this.config.unit, this.config.unit,
); );
let left = const left =
(diff_in_units / this.config.step) * this.config.column_width; (diff_in_units / this.config.step) * this.config.column_width;
let date = date_utils.format( const height =
(this.options.bar_height + this.options.padding) *
this.tasks.length;
const date = date_utils.format(
today, today,
this.config.view_mode.format_string, this.config.view_mode.format_string,
this.options.language, this.options.language,
); );
this.$current_highlight = this.$current_highlight = this.create_el({
this.$current_highlight = this.create_el({
top, top,
left, left,
height, height,
@ -872,7 +874,7 @@ export default class Gantt {
(units_since_first_task / this.config.step) * (units_since_first_task / this.config.step) *
this.config.column_width - this.config.column_width -
this.config.column_width; this.config.column_width;
parent_element.scrollTo({ left: 400, behavior: 'smooth' }); parent_element.scrollTo({ left: scroll_pos, behavior: 'smooth' });
} }
scroll_today() { scroll_today() {
@ -954,30 +956,28 @@ export default class Gantt {
if (x_on_scroll_start) { if (x_on_scroll_start) {
dx = e.currentTarget.scrollLeft - x_on_scroll_start; dx = e.currentTarget.scrollLeft - x_on_scroll_start;
} }
const daysSinceStart =
((e.currentTarget.scrollLeft / this.config.column_width) *
this.config.step) /
24;
let format_str = 'D MMM';
if (['Year', 'Month'].includes(this.config.view_mode.name))
format_str = 'YYYY';
else if (['Day', 'Week'].includes(this.config.view_mode.name))
format_str = 'MMMM';
else if (this.view_is('Half Day')) format_str = 'D';
else if (this.view_is('Hour')) format_str = 'D MMMM';
let currentUpper = date_utils.format(
date_utils.add(this.gantt_start, daysSinceStart, 'day'),
format_str,
this.options.language,
);
const upperTexts = Array.from( const upperTexts = Array.from(
document.querySelectorAll('.upper-text'), document.querySelectorAll('.upper-text'),
); );
const $el = upperTexts.find(
(el) => el.textContent === currentUpper, let currentDate = date_utils.add(
this.gantt_start,
e.currentTarget.scrollLeft / this.config.column_width,
this.config.unit,
); );
let currentUpper = this.config.view_mode.upper_text(currentDate);
let $el = upperTexts.find((el) => el.textContent === currentUpper);
// Recalculate for smoother experience
currentDate = date_utils.add(
this.gantt_start,
(e.currentTarget.scrollLeft + $el.clientWidth) /
this.config.column_width,
this.config.unit,
);
currentUpper = this.config.view_mode.upper_text(currentDate);
$el = upperTexts.find((el) => el.textContent === currentUpper);
if ($el && !$el.classList.contains('current-upper')) { if ($el && !$el.classList.contains('current-upper')) {
const $current = document.querySelector('.current-upper'); const $current = document.querySelector('.current-upper');
if ($current) { if ($current) {