jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: reset after view mode change

Browse Source
This commit is contained in:
Safwan Samsudeen 2025-01-08 16:31:47 +05:30
parent a8d7814c82
commit 188ab1d35e
7 changed files with 40 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/bar.js
View File

@ -280,12 +280,12 @@ export default class Bar {
if (!this.gantt.options.readonly_dates) { if (!this.gantt.options.readonly_dates) {
this.handles.push( this.handles.push(
createSVG('rect', { createSVG('rect', {
x: bar.getEndX(), x: bar.getEndX() - handle_width / 2,
y: bar.getY() + 1, y: bar.getY() + this.height / 4,
width: handle_width, width: handle_width,
height: this.height - 2, height: this.height / 2,
rx: 1, rx: 2,
ry: 1, ry: 2,
class: 'handle right', class: 'handle right',
append_to: this.handle_group, append_to: this.handle_group,
}), }),
@ -293,12 +293,12 @@ export default class Bar {
this.handles.push( this.handles.push(
createSVG('rect', { createSVG('rect', {
x: bar.getX(), x: bar.getX() - handle_width / 2,
y: bar.getY() + 1, y: bar.getY() + this.height / 4,
width: handle_width, width: handle_width,
height: this.height - 2, height: this.height / 2,
rx: 1, rx: 2,
ry: 1, ry: 2,
class: 'handle left', class: 'handle left',
append_to: this.handle_group, append_to: this.handle_group,
}), }),
@ -309,7 +309,7 @@ export default class Bar {
this.$handle_progress = createSVG('circle', { this.$handle_progress = createSVG('circle', {
cx: bar_progress.getEndX(), cx: bar_progress.getEndX(),
cy: bar_progress.getY() + bar_progress.getHeight() / 2, cy: bar_progress.getY() + bar_progress.getHeight() / 2,
r: 5, r: 4.5,
class: 'handle progress', class: 'handle progress',
append_to: this.handle_group, append_to: this.handle_group,
}); });

4
src/date_utils.js
View File

@ -78,7 +78,7 @@ export default {
return date_string + (with_time ? ' ' + time_string : ''); return date_string + (with_time ? ' ' + time_string : '');
}, },
format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') { format(date, date_format = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
const dateTimeFormat = new Intl.DateTimeFormat(lang, { const dateTimeFormat = new Intl.DateTimeFormat(lang, {
month: 'long', month: 'long',
}); });
@ -103,7 +103,7 @@ export default {
MMM: dateTimeFormatShort.format(date), MMM: dateTimeFormatShort.format(date),
}; };
let str = format_string; let str = date_format;
const formatted_values = []; const formatted_values = [];
Object.keys(format_map) Object.keys(format_map)

30
src/defaults.js
View File

@ -17,6 +17,7 @@ const DEFAULT_VIEW_MODES = [
name: 'Hour', name: 'Hour',
padding: '7d', padding: '7d',
step: '1h', step: '1h',
date_format: 'YYYY-MM-DD HH:',
lower_text: 'HH', lower_text: 'HH',
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate() !ld || d.getDate() !== ld.getDate()
@ -28,6 +29,7 @@ const DEFAULT_VIEW_MODES = [
name: 'Quarter Day', name: 'Quarter Day',
padding: '7d', padding: '7d',
step: '6h', step: '6h',
date_format: 'YYYY-MM-DD HH:',
lower_text: 'HH', lower_text: 'HH',
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate() !ld || d.getDate() !== ld.getDate()
@ -39,6 +41,7 @@ const DEFAULT_VIEW_MODES = [
name: 'Half Day', name: 'Half Day',
padding: '14d', padding: '14d',
step: '12h', step: '12h',
date_format: 'YYYY-MM-DD HH:',
lower_text: 'HH', lower_text: 'HH',
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate() !ld || d.getDate() !== ld.getDate()
@ -51,7 +54,7 @@ const DEFAULT_VIEW_MODES = [
{ {
name: 'Day', name: 'Day',
padding: '7d', padding: '7d',
format_string: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
step: '1d', step: '1d',
lower_text: (d, ld, lang) => lower_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate() !ld || d.getDate() !== ld.getDate()
@ -67,7 +70,7 @@ const DEFAULT_VIEW_MODES = [
name: 'Week', name: 'Week',
padding: '1m', padding: '1m',
step: '7d', step: '7d',
format_string: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
column_width: 140, column_width: 140,
lower_text: formatWeek, lower_text: formatWeek,
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
@ -82,7 +85,7 @@ const DEFAULT_VIEW_MODES = [
padding: '2m', padding: '2m',
step: '1m', step: '1m',
column_width: 120, column_width: 120,
format_string: 'YYYY-MM', date_format: 'YYYY-MM',
lower_text: 'MMMM', lower_text: 'MMMM',
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
!ld || d.getFullYear() !== ld.getFullYear() !ld || d.getFullYear() !== ld.getFullYear()
@ -96,7 +99,7 @@ const DEFAULT_VIEW_MODES = [
padding: '2y', padding: '2y',
step: '1y', step: '1y',
column_width: 120, column_width: 120,
format_string: 'YYYY', date_format: 'YYYY',
upper_text: (d, ld, lang) => upper_text: (d, ld, lang) =>
!ld || getDecade(d) !== getDecade(ld) ? getDecade(d) : '', !ld || getDecade(d) !== getDecade(ld) ? getDecade(d) : '',
lower_text: 'YYYY', lower_text: 'YYYY',
@ -111,7 +114,7 @@ const DEFAULT_OPTIONS = {
bar_height: 30, bar_height: 30,
container_height: 'auto', container_height: 'auto',
column_width: null, column_width: null,
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD HH:mm',
upper_header_height: 45, upper_header_height: 45,
lower_header_height: 30, lower_header_height: 30,
snap_at: null, snap_at: null,
@ -141,23 +144,6 @@ const DEFAULT_OPTIONS = {
ctx.set_details( ctx.set_details(
`${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})<br/>Progress: ${Math.floor(ctx.task.progress * 100) / 100}%`, `${start_date} - ${end_date} (${ctx.task.actual_duration} days${ctx.task.ignored_duration ? ' + ' + ctx.task.ignored_duration + ' excluded' : ''})<br/>Progress: ${Math.floor(ctx.task.progress * 100) / 100}%`,
); );
if (!ctx.chart.options.readonly) {
if (!ctx.chart.options.readonly_progress) {
ctx.add_action('+', (task, chart) => {
chart.update_task(task.id, {
progress:
task.progress + (1 / task.actual_duration) * 100,
});
});
ctx.add_action('-', (task, chart) => {
chart.update_task(task.id, {
progress:
task.progress - (1 / task.actual_duration) * 100,
});
});
}
}
}, },
popup_on: 'click', popup_on: 'click',
readonly_progress: false, readonly_progress: false,

25
src/index.js
View File

@ -228,11 +228,11 @@ export default class Gantt {
if (typeof mode === 'string') { if (typeof mode === 'string') {
mode = this.options.view_modes.find((d) => d.name === mode); mode = this.options.view_modes.find((d) => d.name === mode);
} }
let old_scroll_op, old_scroll_pos; let old_date, old_scroll_op;
if (maintain_pos) { if (maintain_pos) {
old_date = this.current_date;
old_scroll_op = this.options.scroll_to; old_scroll_op = this.options.scroll_to;
this.options.scroll_to = null; this.options.scroll_to = null;
old_scroll_pos = this.$container.scrollLeft;
} }
this.options.view_mode = mode.name; this.options.view_mode = mode.name;
this.config.view_mode = mode; this.config.view_mode = mode;
@ -241,7 +241,10 @@ export default class Gantt {
this.render(); this.render();
if (maintain_pos) { if (maintain_pos) {
this.options.scroll_to = old_scroll_op; this.options.scroll_to = old_scroll_op;
this.$container.scrollLeft = old_scroll_pos; this.$container.scrollLeft =
(date_utils.diff(old_date, this.gantt_start, this.config.unit) /
this.config.step) *
this.config.column_width;
} }
this.trigger_event('view_change', [mode]); this.trigger_event('view_change', [mode]);
} }
@ -321,8 +324,8 @@ export default class Gantt {
); );
} }
} }
this.config.format_string = this.config.date_format =
this.config.view_mode.format_string || 'YYYY-MM-DD HH'; this.config.view_mode.date_format || this.options.date_format;
this.gantt_start.setHours(0, 0, 0, 0); this.gantt_start.setHours(0, 0, 0, 0);
} }
@ -491,7 +494,7 @@ export default class Gantt {
$select.addEventListener( $select.addEventListener(
'change', 'change',
function () { function () {
this.change_view_mode($select.value); this.change_view_mode($select.value, true);
}.bind(this), }.bind(this),
); );
this.$side_header.appendChild($select); this.$side_header.appendChild($select);
@ -830,7 +833,7 @@ export default class Gantt {
formatted_date: sanitize( formatted_date: sanitize(
date_utils.format( date_utils.format(
date, date,
this.config.format_string, this.config.date_format,
this.options.language, this.options.language,
), ),
), ),
@ -985,7 +988,7 @@ export default class Gantt {
sanitize( sanitize(
date_utils.format( date_utils.format(
current, current,
this.config.format_string, this.config.date_format,
this.options.language, this.options.language,
), ),
), ),
@ -1000,19 +1003,18 @@ export default class Gantt {
sanitize( sanitize(
date_utils.format( date_utils.format(
current, current,
this.config.format_string, this.config.date_format,
this.options.language, this.options.language,
), ),
), ),
); );
c++; c++;
} }
return [ return [
new Date( new Date(
date_utils.format( date_utils.format(
current, current,
this.config.format_string, this.config.date_format,
this.options.language, this.options.language,
) + ' ', ) + ' ',
), ),
@ -1208,7 +1210,6 @@ export default class Gantt {
let $el = this.upperTexts.find( let $el = this.upperTexts.find(
(el) => el.textContent === current_upper, (el) => el.textContent === current_upper,
); );
console.log(this.current_date);
// Recalculate for smoother experience // Recalculate for smoother experience
this.current_date = date_utils.add( this.current_date = date_utils.add(

9
src/popup.js
View File

@ -47,13 +47,8 @@ export default class Popup {
if (html === false) return; if (html === false) return;
if (html) this.parent.innerHTML = html; if (html) this.parent.innerHTML = html;
// set position if (this.actions.innerHTML === '') this.actions.remove();
let position_meta; else this.parent.appendChild(this.actions);
if (target instanceof HTMLElement) {
position_meta = target.getBoundingClientRect();
} else if (target instanceof SVGElement) {
position_meta = target.getBBox();
}
this.parent.style.left = x + 10 + 'px'; this.parent.style.left = x + 10 + 'px';
this.parent.style.top = y - 10 + 'px'; this.parent.style.top = y - 10 + 'px';

6
src/styles/gantt.css
View File

@ -47,11 +47,11 @@
& .action-btn { & .action-btn {
border: none; border: none;
padding: 5px 8px; padding: 5px 8px;
background-color: #dbeafe; background-color: var(--g-popup-actions);
border-right: 1px solid var(--g-text-light); border-right: 1px solid var(--g-text-light);
&:hover { &:hover {
background-color: #93c5fd; background-color: brightness(97%);
} }
&:first-child { &:first-child {
@ -165,7 +165,7 @@
& .side-header select { & .side-header select {
padding: 0; padding: 0;
padding-right: 1rem; padding-right: 1rem;
width: 50%; width: 85px;
} }
& .date-range-highlight { & .date-range-highlight {

1
src/styles/light.css
View File

@ -16,5 +16,6 @@
--g-header-background: #fff; --g-header-background: #fff;
--g-row-color: #fdfdfd; --g-row-color: #fdfdfd;
--g-today-highlight: #37352f; --g-today-highlight: #37352f;
--g-popup-actions: #ebeff2;
--g-weekend-highlight-color: #f7f7f7; --g-weekend-highlight-color: #f7f7f7;
} }