feat: reset after view mode change
This commit is contained in:
Safwan Samsudeen
parent
a8d7814c82
commit
188ab1d35e
22
src/bar.js
22
src/bar.js
@ -280,12 +280,12 @@ export default class Bar {
|
||||
if (!this.gantt.options.readonly_dates) {
|
||||
this.handles.push(
|
||||
createSVG('rect', {
|
||||
x: bar.getEndX(),
|
||||
y: bar.getY() + 1,
|
||||
x: bar.getEndX() - handle_width / 2,
|
||||
y: bar.getY() + this.height / 4,
|
||||
width: handle_width,
|
||||
height: this.height - 2,
|
||||
rx: 1,
|
||||
ry: 1,
|
||||
height: this.height / 2,
|
||||
rx: 2,
|
||||
ry: 2,
|
||||
class: 'handle right',
|
||||
append_to: this.handle_group,
|
||||
}),
|
||||
@ -293,12 +293,12 @@ export default class Bar {
|
||||
|
||||
this.handles.push(
|
||||
createSVG('rect', {
|
||||
x: bar.getX(),
|
||||
y: bar.getY() + 1,
|
||||
x: bar.getX() - handle_width / 2,
|
||||
y: bar.getY() + this.height / 4,
|
||||
width: handle_width,
|
||||
height: this.height - 2,
|
||||
rx: 1,
|
||||
ry: 1,
|
||||
height: this.height / 2,
|
||||
rx: 2,
|
||||
ry: 2,
|
||||
class: 'handle left',
|
||||
append_to: this.handle_group,
|
||||
}),
|
||||
@ -309,7 +309,7 @@ export default class Bar {
|
||||
this.$handle_progress = createSVG('circle', {
|
||||
cx: bar_progress.getEndX(),
|
||||
cy: bar_progress.getY() + bar_progress.getHeight() / 2,
|
||||
r: 5,
|
||||
r: 4.5,
|
||||
class: 'handle progress',
|
||||
append_to: this.handle_group,
|
||||
});
|
||||
|
||||
@ -78,7 +78,7 @@ export default {
|
||||
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, {
|
||||
month: 'long',
|
||||
});
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
MMM: dateTimeFormatShort.format(date),
|
||||
};
|
||||
|
||||
let str = format_string;
|
||||
let str = date_format;
|
||||
const formatted_values = [];
|
||||
|
||||
Object.keys(format_map)
|
||||
|
||||
@ -17,6 +17,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
name: 'Hour',
|
||||
padding: '7d',
|
||||
step: '1h',
|
||||
date_format: 'YYYY-MM-DD HH:',
|
||||
lower_text: 'HH',
|
||||
upper_text: (d, ld, lang) =>
|
||||
!ld || d.getDate() !== ld.getDate()
|
||||
@ -28,6 +29,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
name: 'Quarter Day',
|
||||
padding: '7d',
|
||||
step: '6h',
|
||||
date_format: 'YYYY-MM-DD HH:',
|
||||
lower_text: 'HH',
|
||||
upper_text: (d, ld, lang) =>
|
||||
!ld || d.getDate() !== ld.getDate()
|
||||
@ -39,6 +41,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
name: 'Half Day',
|
||||
padding: '14d',
|
||||
step: '12h',
|
||||
date_format: 'YYYY-MM-DD HH:',
|
||||
lower_text: 'HH',
|
||||
upper_text: (d, ld, lang) =>
|
||||
!ld || d.getDate() !== ld.getDate()
|
||||
@ -51,7 +54,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
{
|
||||
name: 'Day',
|
||||
padding: '7d',
|
||||
format_string: 'YYYY-MM-DD',
|
||||
date_format: 'YYYY-MM-DD',
|
||||
step: '1d',
|
||||
lower_text: (d, ld, lang) =>
|
||||
!ld || d.getDate() !== ld.getDate()
|
||||
@ -67,7 +70,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
name: 'Week',
|
||||
padding: '1m',
|
||||
step: '7d',
|
||||
format_string: 'YYYY-MM-DD',
|
||||
date_format: 'YYYY-MM-DD',
|
||||
column_width: 140,
|
||||
lower_text: formatWeek,
|
||||
upper_text: (d, ld, lang) =>
|
||||
@ -82,7 +85,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
padding: '2m',
|
||||
step: '1m',
|
||||
column_width: 120,
|
||||
format_string: 'YYYY-MM',
|
||||
date_format: 'YYYY-MM',
|
||||
lower_text: 'MMMM',
|
||||
upper_text: (d, ld, lang) =>
|
||||
!ld || d.getFullYear() !== ld.getFullYear()
|
||||
@ -96,7 +99,7 @@ const DEFAULT_VIEW_MODES = [
|
||||
padding: '2y',
|
||||
step: '1y',
|
||||
column_width: 120,
|
||||
format_string: 'YYYY',
|
||||
date_format: 'YYYY',
|
||||
upper_text: (d, ld, lang) =>
|
||||
!ld || getDecade(d) !== getDecade(ld) ? getDecade(d) : '',
|
||||
lower_text: 'YYYY',
|
||||
@ -111,7 +114,7 @@ const DEFAULT_OPTIONS = {
|
||||
bar_height: 30,
|
||||
container_height: 'auto',
|
||||
column_width: null,
|
||||
date_format: 'YYYY-MM-DD',
|
||||
date_format: 'YYYY-MM-DD HH:mm',
|
||||
upper_header_height: 45,
|
||||
lower_header_height: 30,
|
||||
snap_at: null,
|
||||
@ -141,23 +144,6 @@ const DEFAULT_OPTIONS = {
|
||||
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}%`,
|
||||
);
|
||||
|
||||
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',
|
||||
readonly_progress: false,
|
||||
|
||||
25
src/index.js
25
src/index.js
@ -228,11 +228,11 @@ export default class Gantt {
|
||||
if (typeof mode === 'string') {
|
||||
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) {
|
||||
old_date = this.current_date;
|
||||
old_scroll_op = this.options.scroll_to;
|
||||
this.options.scroll_to = null;
|
||||
old_scroll_pos = this.$container.scrollLeft;
|
||||
}
|
||||
this.options.view_mode = mode.name;
|
||||
this.config.view_mode = mode;
|
||||
@ -241,7 +241,10 @@ export default class Gantt {
|
||||
this.render();
|
||||
if (maintain_pos) {
|
||||
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]);
|
||||
}
|
||||
@ -321,8 +324,8 @@ export default class Gantt {
|
||||
);
|
||||
}
|
||||
}
|
||||
this.config.format_string =
|
||||
this.config.view_mode.format_string || 'YYYY-MM-DD HH';
|
||||
this.config.date_format =
|
||||
this.config.view_mode.date_format || this.options.date_format;
|
||||
this.gantt_start.setHours(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@ -491,7 +494,7 @@ export default class Gantt {
|
||||
$select.addEventListener(
|
||||
'change',
|
||||
function () {
|
||||
this.change_view_mode($select.value);
|
||||
this.change_view_mode($select.value, true);
|
||||
}.bind(this),
|
||||
);
|
||||
this.$side_header.appendChild($select);
|
||||
@ -830,7 +833,7 @@ export default class Gantt {
|
||||
formatted_date: sanitize(
|
||||
date_utils.format(
|
||||
date,
|
||||
this.config.format_string,
|
||||
this.config.date_format,
|
||||
this.options.language,
|
||||
),
|
||||
),
|
||||
@ -985,7 +988,7 @@ export default class Gantt {
|
||||
sanitize(
|
||||
date_utils.format(
|
||||
current,
|
||||
this.config.format_string,
|
||||
this.config.date_format,
|
||||
this.options.language,
|
||||
),
|
||||
),
|
||||
@ -1000,19 +1003,18 @@ export default class Gantt {
|
||||
sanitize(
|
||||
date_utils.format(
|
||||
current,
|
||||
this.config.format_string,
|
||||
this.config.date_format,
|
||||
this.options.language,
|
||||
),
|
||||
),
|
||||
);
|
||||
c++;
|
||||
}
|
||||
|
||||
return [
|
||||
new Date(
|
||||
date_utils.format(
|
||||
current,
|
||||
this.config.format_string,
|
||||
this.config.date_format,
|
||||
this.options.language,
|
||||
) + ' ',
|
||||
),
|
||||
@ -1208,7 +1210,6 @@ export default class Gantt {
|
||||
let $el = this.upperTexts.find(
|
||||
(el) => el.textContent === current_upper,
|
||||
);
|
||||
console.log(this.current_date);
|
||||
|
||||
// Recalculate for smoother experience
|
||||
this.current_date = date_utils.add(
|
||||
|
||||
@ -47,13 +47,8 @@ export default class Popup {
|
||||
if (html === false) return;
|
||||
if (html) this.parent.innerHTML = html;
|
||||
|
||||
// set position
|
||||
let position_meta;
|
||||
if (target instanceof HTMLElement) {
|
||||
position_meta = target.getBoundingClientRect();
|
||||
} else if (target instanceof SVGElement) {
|
||||
position_meta = target.getBBox();
|
||||
}
|
||||
if (this.actions.innerHTML === '') this.actions.remove();
|
||||
else this.parent.appendChild(this.actions);
|
||||
|
||||
this.parent.style.left = x + 10 + 'px';
|
||||
this.parent.style.top = y - 10 + 'px';
|
||||
|
||||
@ -47,11 +47,11 @@
|
||||
& .action-btn {
|
||||
border: none;
|
||||
padding: 5px 8px;
|
||||
background-color: #dbeafe;
|
||||
background-color: var(--g-popup-actions);
|
||||
border-right: 1px solid var(--g-text-light);
|
||||
|
||||
&:hover {
|
||||
background-color: #93c5fd;
|
||||
background-color: brightness(97%);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@ -165,7 +165,7 @@
|
||||
& .side-header select {
|
||||
padding: 0;
|
||||
padding-right: 1rem;
|
||||
width: 50%;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
& .date-range-highlight {
|
||||
|
||||
@ -16,5 +16,6 @@
|
||||
--g-header-background: #fff;
|
||||
--g-row-color: #fdfdfd;
|
||||
--g-today-highlight: #37352f;
|
||||
--g-popup-actions: #ebeff2;
|
||||
--g-weekend-highlight-color: #f7f7f7;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user