jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: smoother infinite padding, improved config

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-12-11 13:23:07 +05:30
parent f0a8bf7081
commit 0b1c6c9efb
2 changed files with 82 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/defaults.js
View File

@ -103,7 +103,7 @@ const DEFAULT_OPTIONS = {
column_width: 30, column_width: 30,
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
snap_at: null, snap_at: null,
extend_by_units: 7, infinite_padding: true,
header_height: 65, header_height: 65,
holidays: { '#fff7ed': 'weekend' }, holidays: { '#fff7ed': 'weekend' },
ignore: [], ignore: [],

152
src/index.js
View File

@ -75,9 +75,11 @@ export default class Gantt {
this.original_options = options; this.original_options = options;
this.options = { ...DEFAULT_OPTIONS, ...options }; this.options = { ...DEFAULT_OPTIONS, ...options };
this.config = {}; this.config = {
this.config.ignored_dates = []; ignored_dates: [],
this.config.ignored_positions = []; ignored_positions: [],
extend_by_units: 10,
};
if (typeof this.options.ignore !== 'function') { if (typeof this.options.ignore !== 'function') {
if (typeof this.options.ignore === 'string') if (typeof this.options.ignore === 'string')
@ -249,37 +251,50 @@ export default class Gantt {
gantt_end = date_utils.start_of(gantt_end, 'day'); gantt_end = date_utils.start_of(gantt_end, 'day');
// handle single value for padding // handle single value for padding
if (typeof this.config.view_mode.padding === 'string') if (!this.options.infinite_padding) {
this.config.view_mode.padding = [ if (typeof this.config.view_mode.padding === 'string')
this.config.view_mode.padding, this.config.view_mode.padding = [
this.config.view_mode.padding, this.config.view_mode.padding,
]; this.config.view_mode.padding,
];
let [padding_start, padding_end] = this.config.view_mode.padding.map( let [padding_start, padding_end] =
date_utils.parse_duration, this.config.view_mode.padding.map(date_utils.parse_duration);
); gantt_start = date_utils.add(
gantt_start = date_utils.add( gantt_start,
-padding_start.duration,
padding_start.scale,
);
gantt_end = date_utils.add(
gantt_end,
padding_end.duration,
padding_end.scale,
);
} else {
gantt_start = date_utils.add(
gantt_start,
-this.config.extend_by_units * 3,
this.config.unit,
);
gantt_end = date_utils.add(
gantt_end,
this.config.extend_by_units * 3,
this.config.unit,
);
}
console.log(
gantt_start, gantt_start,
-padding_start.duration, gantt_end,
padding_start.scale, this.config.extend_by_units * 3,
this.config.unit,
); );
let format_string = let format_string =
this.config.view_mode.format_string || 'YYYY-MM-DD HH'; this.config.view_mode.format_string || 'YYYY-MM-DD HH';
this.gantt_start = date_utils.parse( this.gantt_start = gantt_start;
date_utils.format(
gantt_start,
format_string,
this.options.language,
),
);
this.gantt_start.setHours(0, 0, 0, 0); this.gantt_start.setHours(0, 0, 0, 0);
this.gantt_end = date_utils.add( this.gantt_end = gantt_end;
gantt_end,
padding_end.duration,
padding_end.scale,
);
} }
setup_date_values() { setup_date_values() {
@ -1034,53 +1049,48 @@ export default class Gantt {
}); });
}); });
let extended = false; if (this.options.infinite_padding) {
$.on(this.$container, 'mousewheel', (e) => { let extended = false;
if (!extended && e.currentTarget.scrollLeft === 0) { $.on(this.$container, 'mousewheel', (e) => {
extended = true; let trigger = this.$container.scrollWidth / 2;
this.gantt_start = date_utils.add( if (!extended && e.currentTarget.scrollLeft <= trigger) {
this.gantt_start, let old_scroll_left = e.currentTarget.scrollLeft;
-this.options.extend_by_units, extended = true;
this.config.unit,
);
let old_scroll = this.options.scroll_to;
this.options.scroll_to = null;
this.setup_date_values();
this.render();
e.currentTarget.scrollLeft =
this.config.column_width * this.options.extend_by_units;
this.options.scroll_to = old_scroll;
this.set_scroll_position();
setTimeout(() => (extended = false), 1000);
}
if ( this.gantt_start = date_utils.add(
!extended && this.gantt_start,
e.currentTarget.scrollWidth - e.currentTarget.scrollLeft === -this.config.extend_by_units,
e.currentTarget.clientWidth this.config.unit,
) { );
let old_scroll_left = e.currentTarget.scrollLeft; this.setup_date_values();
extended = true; this.render();
this.gantt_end = date_utils.add( e.currentTarget.scrollLeft =
this.gantt_end,
this.options.extend_by_units,
this.config.unit,
);
let old_scroll = this.options.scroll_to;
this.options.scroll_to = 'end';
this.setup_date_values();
this.render();
this.options.scroll_to = old_scroll_left;
e.currentTarget.scrollTo({
left:
old_scroll_left + old_scroll_left +
this.config.column_width * this.options.extend_by_units, this.config.column_width * this.config.extend_by_units;
behavior: 'smooth', setTimeout(() => (extended = false), 300);
}); }
setTimeout(() => (extended = false), 1000);
} if (
}); !extended &&
e.currentTarget.scrollWidth -
(e.currentTarget.scrollLeft +
e.currentTarget.clientWidth) <=
trigger
) {
let old_scroll_left = e.currentTarget.scrollLeft;
extended = true;
this.gantt_end = date_utils.add(
this.gantt_end,
this.config.extend_by_units,
this.config.unit,
);
this.setup_date_values();
this.render();
e.currentTarget.scrollLeft = old_scroll_left;
setTimeout(() => (extended = false), 300);
}
});
}
$.on(this.$container, 'scroll', (e) => { $.on(this.$container, 'scroll', (e) => {
let elements = this.$container.querySelectorAll('.bar-wrapper'); let elements = this.$container.querySelectorAll('.bar-wrapper');