From f5f61afd99aa398168630d60ef5a9b2344ce2dfc Mon Sep 17 00:00:00 2001 From: safwansamsudeen Date: Tue, 10 Dec 2024 16:36:26 +0530 Subject: [PATCH] changes for demo --- src/bar.js | 78 +++++++++++++++++++++++-------------------------- src/defaults.js | 2 +- src/index.js | 72 +++++++++++++++++++++++++++++---------------- 3 files changed, 85 insertions(+), 67 deletions(-) diff --git a/src/bar.js b/src/bar.js index cb89bfe..8a21b37 100644 --- a/src/bar.js +++ b/src/bar.js @@ -31,18 +31,6 @@ export default class Bar { this.corner_radius = this.gantt.options.bar_corner_radius; this.width = this.gantt.config.column_width * this.duration; - this.progress_width = - this.gantt.config.column_width * - this.actual_duration * - (this.task.progress / 100) || 0; - - // Adjust for ignored areas - const progress_area = this.x + this.progress_width; - this.progress_width += - this.gantt.config.ignored_positions.reduce((acc, val) => { - return acc + (val >= this.x && val <= progress_area); - }, 0) * this.gantt.config.column_width; - this.group = createSVG('g', { class: 'bar-wrapper' + @@ -147,6 +135,7 @@ export default class Bar { draw_progress_bar() { if (this.invalid) return; + this.progress_width = this.calculate_progress_width(); this.$bar_progress = createSVG('rect', { x: this.x, @@ -181,6 +170,38 @@ export default class Bar { animateSVG(this.$bar_progress, 'width', 0, this.progress_width); } + calculate_progress_width() { + const width = this.$bar.getWidth(); + const ignored_end = this.x + width; + const total_ignored_area = + this.gantt.config.ignored_positions.reduce((acc, val) => { + return acc + (val >= this.x && val < ignored_end); + }, 0) * this.gantt.config.column_width; + let progress_width = + ((width - total_ignored_area) * this.task.progress) / 100; + + const progress_end = this.x + progress_width; + const total_ignored_progress = + this.gantt.config.ignored_positions.reduce((acc, val) => { + return acc + (val >= this.x && val < progress_end); + }, 0) * this.gantt.config.column_width; + + progress_width += total_ignored_progress; + + let ignored_regions = this.gantt.get_ignored_region( + this.x + progress_width, + ); + + while (ignored_regions.length) { + progress_width += this.gantt.config.column_width; + ignored_regions = this.gantt.get_ignored_region( + this.x + progress_width, + ); + } + this.progress_width = progress_width; + return progress_width; + } + draw_label() { let x_coord = this.x + this.$bar.getWidth() / 2; @@ -198,6 +219,7 @@ export default class Bar { // labels get BBox in the next tick requestAnimationFrame(() => this.update_label_position()); } + draw_thumbnail() { let x_offset = 10, y_offset = 2; @@ -638,36 +660,10 @@ export default class Bar { if (this.invalid || this.gantt.options.readonly) return; this.$bar_progress.setAttribute('x', this.$bar.getX()); - const width = this.$bar.getWidth(); - const ignored_end = this.x + width; - const total_ignored_area = - this.gantt.config.ignored_positions.reduce((acc, val) => { - return acc + (val >= this.x && val < ignored_end); - }, 0) * this.gantt.config.column_width; - let progress_width = - ((width - total_ignored_area) * this.task.progress) / 100; - - const progress_end = this.x + progress_width; - const total_ignored_progress = - this.gantt.config.ignored_positions.reduce((acc, val) => { - return acc + (val >= this.x && val < progress_end); - }, 0) * this.gantt.config.column_width; - - progress_width += total_ignored_progress; - - let ignored_regions = this.gantt.get_ignored_region( - this.x + progress_width, + this.$bar_progress.setAttribute( + 'width', + this.calculate_progress_width(), ); - - while (ignored_regions.length) { - progress_width += this.gantt.config.column_width; - ignored_regions = this.gantt.get_ignored_region( - this.x + progress_width, - ); - } - this.progress_width = progress_width; - - this.$bar_progress.setAttribute('width', this.progress_width); } update_label_position() { diff --git a/src/defaults.js b/src/defaults.js index e5fdf4e..043ef2b 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -102,7 +102,7 @@ const DEFAULT_OPTIONS = { container_height: 300, column_width: 30, date_format: 'YYYY-MM-DD', - default_snap: '1d', + snap_at: null, extend_by_units: 7, header_height: 65, holidays: { '#fff7ed': 'weekend' }, diff --git a/src/index.js b/src/index.js index 1a51ad8..36690d3 100644 --- a/src/index.js +++ b/src/index.js @@ -207,6 +207,8 @@ export default class Gantt { mode = this.options.view_modes.find((d) => d.name === mode); } + // For change + this.options.view_mode = mode.name; this.config.view_mode = mode; this.update_view_scale(mode); this.setup_dates(); @@ -311,7 +313,8 @@ export default class Gantt { this.make_arrows(); this.map_arrows_on_bars(); this.set_dimensions(); - this.set_scroll_position(this.options.scroll_to); + if (this.options.scroll_to !== false) + this.set_scroll_position(this.options.scroll_to); } setup_layers() { @@ -770,8 +773,20 @@ export default class Gantt { let upper_text = this.config.view_mode.upper_text; let lower_text = this.config.view_mode.lower_text; - if (!upper_text) upper_text = () => ''; - if (!lower_text) lower_text = () => ''; + + if (!upper_text) { + this.config.view_mode.upper_text = () => ''; + } else if (typeof upper_text === 'string') { + this.config.view_mode.upper_text = (date) => + date_utils.format(date, upper_text, this.options.language); + } + + if (!lower_text) { + this.config.view_mode.lower_text = () => ''; + } else if (typeof lower_text === 'string') { + this.config.view_mode.lower_text = (date) => + date_utils.format(date, lower_text, this.options.language); + } return { date, @@ -780,14 +795,16 @@ export default class Gantt { .replaceAll(' ', '_'), column_width: this.config.column_width, base_pos_x: base_pos.x, - upper_text: - typeof upper_text === 'string' - ? date_utils.format(date, upper_text, this.options.language) - : upper_text(date, last_date, this.options.language), - lower_text: - typeof lower_text === 'string' - ? date_utils.format(date, lower_text, this.options.language) - : lower_text(date, last_date, this.options.language), + upper_text: this.config.view_mode.upper_text( + date, + last_date, + this.options.language, + ), + lower_text: this.config.view_mode.lower_text( + date, + last_date, + this.options.language, + ), upper_x: base_pos.x + (column_width * this.config.view_mode.upper_text_frequency || @@ -888,23 +905,25 @@ export default class Gantt { this.upperTexts = Array.from( this.$container.querySelectorAll('.upper-text'), ); - let currentDate = date_utils.add( + this.current_date = date_utils.add( this.gantt_start, this.$container.scrollLeft / this.config.column_width, this.config.unit, ); - let currentUpper = this.config.view_mode.upper_text(currentDate); - let $el = this.upperTexts.find((el) => el.textContent === currentUpper); + let current_upper = this.config.view_mode.upper_text(this.current_date); + let $el = this.upperTexts.find( + (el) => el.textContent === current_upper, + ); // Recalculate - currentDate = date_utils.add( + this.current_date = this.current_date = date_utils.add( this.gantt_start, (this.$container.scrollLeft + $el.clientWidth) / this.config.column_width, this.config.unit, ); - currentUpper = this.config.view_mode.upper_text(currentDate); - $el = this.upperTexts.find((el) => el.textContent === currentUpper); + current_upper = this.config.view_mode.upper_text(this.current_date); + $el = this.upperTexts.find((el) => el.textContent === current_upper); $el.classList.add('current-upper'); $el.style.left = this.$container.scrollLeft + 'px'; @@ -1082,24 +1101,28 @@ export default class Gantt { this.$current.style.left = e.currentTarget.scrollLeft + 'px'; // Calculate current scroll position's upper text - let currentDate = date_utils.add( + this.current_date = 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 current_upper = this.config.view_mode.upper_text( + this.current_date, + ); let $el = this.upperTexts.find( - (el) => el.textContent === currentUpper, + (el) => el.textContent === current_upper, ); // Recalculate for smoother experience - currentDate = date_utils.add( + this.current_date = 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 = this.upperTexts.find((el) => el.textContent === currentUpper); + current_upper = this.config.view_mode.upper_text(this.current_date); + $el = this.upperTexts.find( + (el) => el.textContent === current_upper, + ); if ($el !== this.$current) { if (this.$current) @@ -1288,7 +1311,7 @@ export default class Gantt { get_snap_position(dx, ox) { let unit_length = 1; const default_snap = - this.config.view_mode.default_snap || this.options.default_snap; + this.options.snap_at || this.config.view_mode.default_snap || '1d'; if (default_snap !== 'unit') { const { duration, scale } = date_utils.parse_duration(default_snap); @@ -1321,7 +1344,6 @@ export default class Gantt { get_ignored_region(pos, drn = 1) { if (drn === 1) { return this.config.ignored_positions.filter((val) => { - console.log(val, pos); return pos > val && pos <= val + this.config.column_width; }); } else {