jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

fix: many small bugs

Browse Source
This commit is contained in:
Safwan Samsudeen 2025-01-08 14:52:46 +05:30
parent 7dcc132830
commit 1f1a5f04e1
5 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/bar.js
View File

@ -340,7 +340,6 @@ export default class Bar {
const posX = e.offsetX || e.layerX; const posX = e.offsetX || e.layerX;
if (this.$handle_progress) { if (this.$handle_progress) {
const cx = +this.$handle_progress.getAttribute('cx'); const cx = +this.$handle_progress.getAttribute('cx');
console.log(cx, posX, this.gantt.bar_being_dragged);
if (cx > posX - 1 && cx < posX + 1) return; if (cx > posX - 1 && cx < posX + 1) return;
if (this.gantt.bar_being_dragged) return; if (this.gantt.bar_being_dragged) return;
} }
@ -427,7 +426,8 @@ export default class Bar {
} }
update_label_position_on_horizontal_scroll({ x, sx }) { update_label_position_on_horizontal_scroll({ x, sx }) {
const container = document.querySelector('.gantt-container'); const container =
this.gantt.$container.querySelector('.gantt-container');
const label = this.group.querySelector('.bar-label'); const label = this.group.querySelector('.bar-label');
const img = this.group.querySelector('.bar-img') || ''; const img = this.group.querySelector('.bar-img') || '';
const img_mask = this.bar_group.querySelector('.img_mask') || ''; const img_mask = this.bar_group.querySelector('.img_mask') || '';
@ -551,6 +551,7 @@ export default class Bar {
const diff = const diff =
date_utils.diff(task_start, gantt_start, this.gantt.config.unit) / date_utils.diff(task_start, gantt_start, this.gantt.config.unit) /
this.gantt.config.step; this.gantt.config.step;
let x = diff * column_width; let x = diff * column_width;
/* Since the column width is based on 30, /* Since the column width is based on 30,
@ -558,21 +559,21 @@ export default class Bar {
and then add the days in the month, making sure the number does not exceed 29 and then add the days in the month, making sure the number does not exceed 29
so it is within the column */ so it is within the column */
if (this.gantt.view_is('Month')) { // if (this.gantt.view_is('Month')) {
const diffDaysBasedOn30DayMonths = // const diffDaysBasedOn30DayMonths =
date_utils.diff(task_start, gantt_start, 'month') * 30; // date_utils.diff(task_start, gantt_start, 'month') * 30;
const dayInMonth = Math.min( // const dayInMonth = Math.min(
29, // 29,
date_utils.format( // date_utils.format(
task_start, // task_start,
'DD', // 'DD',
this.gantt.options.language, // this.gantt.options.language,
), // ),
); // );
const diff = diffDaysBasedOn30DayMonths + dayInMonth; // const diff = diffDaysBasedOn30DayMonths + dayInMonth;
x = (diff * column_width) / 30; // x = (diff * column_width) / 30;
} // }
this.x = x; this.x = x;
} }

2
src/defaults.js
View File

@ -9,7 +9,7 @@ function formatWeek(d, ld, lang) {
let endOfWeek = date_utils.add(d, 6, 'day'); let endOfWeek = date_utils.add(d, 6, 'day');
let endFormat = endOfWeek.getMonth() !== d.getMonth() ? 'D MMM' : 'D'; let endFormat = endOfWeek.getMonth() !== d.getMonth() ? 'D MMM' : 'D';
let beginFormat = !ld || d.getMonth() !== ld.getMonth() ? 'D MMM' : 'D'; let beginFormat = !ld || d.getMonth() !== ld.getMonth() ? 'D MMM' : 'D';
return `${date_utils.format(d, beginFormat, lang)}-${date_utils.format(endOfWeek, endFormat, lang)}`; return `${date_utils.format(d, beginFormat, lang)} - ${date_utils.format(endOfWeek, endFormat, lang)}`;
} }
const DEFAULT_VIEW_MODES = [ const DEFAULT_VIEW_MODES = [

14
src/index.js
View File

@ -283,9 +283,8 @@ export default class Gantt {
} }
} }
gantt_start = date_utils.start_of(gantt_start, 'day'); gantt_start = date_utils.start_of(gantt_start, this.config.unit);
gantt_end = date_utils.start_of(gantt_end, 'day'); gantt_end = date_utils.start_of(gantt_end, this.config.unit);
// handle single value for padding // handle single value for padding
if (!refresh) { if (!refresh) {
if (!this.options.infinite_padding) { if (!this.options.infinite_padding) {
@ -325,6 +324,7 @@ export default class Gantt {
this.config.format_string = this.config.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.setHours(0, 0, 0, 0); this.gantt_start.setHours(0, 0, 0, 0);
console.log(this.gantt_start);
} }
setup_date_values() { setup_date_values() {
@ -485,6 +485,8 @@ export default class Gantt {
const $option = document.createElement('option'); const $option = document.createElement('option');
$option.value = mode.name; $option.value = mode.name;
$option.textContent = mode.name; $option.textContent = mode.name;
if (mode.name === this.config.view_mode.name)
$option.selected = true;
$select.appendChild($option); $select.appendChild($option);
} }
@ -688,7 +690,7 @@ export default class Gantt {
classes: 'current-highlight', classes: 'current-highlight',
append_to: this.$container, append_to: this.$container,
}); });
this.$current_highlight = this.create_el({ this.$current_ball_highlight = this.create_el({
top: this.config.header_height - 6, top: this.config.header_height - 6,
left: left - 2.5, left: left - 2.5,
width: 6, width: 6,
@ -1315,7 +1317,9 @@ export default class Gantt {
is_dragging = false; is_dragging = false;
is_resizing_left = false; is_resizing_left = false;
is_resizing_right = false; is_resizing_right = false;
document.querySelector('.visible').classList.remove('visible'); this.$container
.querySelector('.visible')
?.classList?.remove?.('visible');
}); });
$.on(this.$svg, 'mouseup', (e) => { $.on(this.$svg, 'mouseup', (e) => {

51
src/styles/gantt.css
View File

@ -120,42 +120,51 @@
& .side-header { & .side-header {
position: sticky; position: sticky;
top: 5px;
right: 0;
float: right;
z-index: 1000; z-index: 1000;
line-height: 20px; line-height: 20px;
background: white;
font-weight: 400; font-weight: 400;
top: 5px;
width: max-content; width: max-content;
margin-left: auto; margin-left: auto;
right: 5px;
padding-left: 5px; padding-left: 5px;
padding-top: 5px;
background: var(--g-header-background);
} }
& .side-header * { & .side-header * {
background: var(--g-actions-background); transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: var(--g-actions-background);
text-align: -webkit-center; text-align: -webkit-center;
text-align: center; text-align: center;
height: 30px; height: 1.75rem;
border-radius: 0; border-radius: 0.5rem;
border: 1px solid grey; border: none;
border-right: none; padding: 0 0.5rem;
color: var(--g-text-dark); color: var(--g-text-dark);
padding: 4px 10px;
position: sticky; position: sticky;
float: right; margin: 5px;
right: 0; font-size: 14px;
top: 5px; line-height: 1.15;
font-size: 12px; letter-spacing: 0.02em;
font-weight: 420;
&:last-child {
margin-right: 0;
}
&:hover {
filter: brightness(97.5%);
}
} }
& .side-header *:first-child { & .side-header select {
border-radius: 0 8px 8px 0; padding: 0;
border-right: 1px solid grey; width: 50%;
}
& .side-header *:last-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
} }
& .date-range-highlight { & .date-range-highlight {

4
src/styles/light.css
View File

@ -4,7 +4,7 @@
--g-bar-border: #fff; --g-bar-border: #fff;
--g-tick-color-thick: #e0e0e0; --g-tick-color-thick: #e0e0e0;
--g-tick-color: #ebeef0; --g-tick-color: #ebeef0;
--g-actions-background: #f4f5f6; --g-actions-background: #f3f3f3;
--g-border-color: #ebeff2; --g-border-color: #ebeff2;
--g-text-muted: #7c7c7c; --g-text-muted: #7c7c7c;
--g-text-light: #fff; --g-text-light: #fff;
@ -13,7 +13,7 @@
--g-handle-color: #37352f; --g-handle-color: #37352f;
--g-weekend-label-color: #dcdce4; --g-weekend-label-color: #dcdce4;
--g-expected-progress: #c4c4e9; --g-expected-progress: #c4c4e9;
--g-header-background: #ffffff; --g-header-background: #fff;
--g-row-color: #fdfdfd; --g-row-color: #fdfdfd;
--g-today-highlight: #37352f; --g-today-highlight: #37352f;
--g-weekend-highlight-color: #f7f7f7; --g-weekend-highlight-color: #f7f7f7;