Skip to content

feat: enable dragging to change task order #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: enable dragging to change task order #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c8ca787
enable dragging to change the task order
hiawui Jun 28, 2022
c4c528a
fix: mousemove & mouseup
hiawui Jan 9, 2025
60354d9
fix: mouseup
hiawui Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions src/arrow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,16 @@ export default class Arrow {
}
start_x -= 10;

let start_y =
this.gantt.config.header_height +
this.gantt.options.bar_height +
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.from_task.task._index +
this.gantt.options.padding / 2;
const start_y =
this.from_task.$bar.getY() + this.gantt.options.bar_height;

let end_x = this.to_task.$bar.getX() - 13;
let end_y =
this.gantt.config.header_height +
this.gantt.options.bar_height / 2 +
(this.gantt.options.padding + this.gantt.options.bar_height) *
this.to_task.task._index +
this.gantt.options.padding / 2;
const end_x = this.to_task.$bar.getX() - 13;
const end_y =
this.to_task.$bar.getY() + this.gantt.options.bar_height / 2;

const from_is_below_to =
this.from_task.task._index > this.to_task.task._index;

let curve = this.gantt.options.arrow_curve;
this.from_task.$bar.getY() > this.to_task.$bar.getY();
const curve = this.gantt.options.arrow_curve;
const clockwise = from_is_below_to ? 1 : 0;
let curve_y = from_is_below_to ? -curve : curve;

Expand Down Expand Up @@ -80,7 +71,7 @@ export default class Arrow {
this.path = `
M ${start_x} ${start_y}
V ${offset}
a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve}
a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curve_y}
L ${end_x} ${end_y}
m -5 -5
l 5 5
Expand Down
15 changes: 12 additions & 3 deletions src/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ export default class Bar {
});
}

update_bar_position({ x = null, width = null }) {
update_bar_position({ x = null, width = null, y = null }) {
const bar = this.$bar;

if (x) {
Expand All @@ -414,7 +414,9 @@ export default class Bar {
this.update_attr(bar, 'width', width);
this.$date_highlight.style.width = width + 'px';
}

if (y) {
this.update_attr(bar, 'y', y);
}
this.update_label_position();
this.update_handle_position();
this.date_changed();
Expand Down Expand Up @@ -648,7 +650,7 @@ export default class Bar {
update_progressbar_position() {
if (this.invalid || this.gantt.options.readonly) return;
this.$bar_progress.setAttribute('x', this.$bar.getX());

this.$bar_progress.setAttribute('y', this.$bar.getY());
this.$bar_progress.setAttribute(
'width',
this.calculate_progress_width(),
Expand Down Expand Up @@ -690,6 +692,7 @@ export default class Bar {
);
}
}
label.setAttribute('y', bar.getY() + bar.getHeight() / 2);
}

update_handle_position() {
Expand All @@ -698,9 +701,15 @@ export default class Bar {
this.handle_group
.querySelector('.handle.left')
.setAttribute('x', bar.getX());
this.handle_group
.querySelector('.handle.left')
.setAttribute('y', bar.getY() + this.height / 4);
this.handle_group
.querySelector('.handle.right')
.setAttribute('x', bar.getEndX());
this.handle_group
.querySelector('.handle.right')
.setAttribute('y', bar.getY() + this.height / 4);
const handle = this.group.querySelector('.handle.progress');
handle && handle.setAttribute('cx', this.$bar_progress.getEndX());
}
Expand Down
80 changes: 72 additions & 8 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1073,6 +1073,26 @@ export default class Gantt {
return [min_start, max_start, max_end];
}

sort_bars() {
const changed_bars = [];
if (!this.bars) {
return changed_bars;
}
this.bars = this.bars.sort((b0, b1) => {
return b0.$bar.getY() - b1.$bar.getY();
});

this.tasks = this.bars.map((b, i) => {
const task = b.task;
if (task._index !== i) {
changed_bars.push(b);
}
task._index = i;
return task;
});
return changed_bars;
}

bind_bar_events() {
let is_dragging = false;
let x_on_start = 0;
Expand All @@ -1083,6 +1103,11 @@ export default class Gantt {
let parent_bar_id = null;
let bars = []; // instanceof Bar
this.bar_being_dragged = null;
const min_y = this.config.header_height;
const max_y =
this.config.header_height +
this.tasks.length *
(this.options.bar_height + this.options.padding);

const action_in_progress = () =>
is_dragging || is_resizing_left || is_resizing_right;
Expand All @@ -1091,11 +1116,13 @@ export default class Gantt {
if (e.target.classList.contains('grid-row')) this.unselect_all();
};

let pos = 0;
let x_pos = 0;
let y_pos = 0;
$.on(this.$svg, 'mousemove', '.bar-wrapper, .handle', (e) => {
if (
this.bar_being_dragged === false &&
Math.abs((e.offsetX || e.layerX) - pos) > 10
(Math.abs((e.offsetX || e.layerX) - x_pos) > 10 ||
Math.abs((e.offsetY || e.layerY) - y_pos) > 10)
)
this.bar_being_dragged = true;
});
Expand Down Expand Up @@ -1130,14 +1157,17 @@ export default class Gantt {
bars = ids.map((id) => this.get_bar(id));

this.bar_being_dragged = false;
pos = x_on_start;
x_pos = x_on_start;
y_pos = y_on_start;

bars.forEach((bar) => {
const $bar = bar.$bar;
$bar.ox = $bar.getX();
$bar.oy = $bar.getY();
$bar.owidth = $bar.getWidth();
$bar.finaldx = 0;
$bar.finaldy = 0;
return bar;
});
});

Expand Down Expand Up @@ -1281,9 +1311,14 @@ export default class Gantt {
$.on(this.$svg, 'mousemove', (e) => {
if (!action_in_progress()) return;
const dx = (e.offsetX || e.layerX) - x_on_start;
const dy = (e.offsetY || e.layerY) - y_on_start;

let bar_dragging = null;
bars.forEach((bar) => {
const $bar = bar.$bar;
if (parent_bar_id === bar.task.id) {
bar_dragging = bar;
}
$bar.finaldx = this.get_snap_position(dx, $bar.ox);
this.hide_popup();
if (is_resizing_left) {
Expand All @@ -1308,9 +1343,34 @@ export default class Gantt {
!this.options.readonly &&
!this.options.readonly_dates
) {
bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
if (parent_bar_id === bar.task.id) {
bar.update_bar_position({
x: $bar.ox + $bar.finaldx,
y: Math.min(Math.max($bar.oy + dy, min_y), max_y),
});
} else {
bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
}
}
});

// update y pos
if (
is_dragging &&
!this.options.readonly &&
!this.options.readonly_dates &&
Math.abs(dy - bar_dragging.$bar.finaldy) >= bar_dragging.height
) {
const changed_bars = this.sort_bars();
changed_bars.map((bar) => {
bar.compute_y();
if (bar.task.id === parent_bar_id) {
bar.$bar.finaldy = bar.y - bar.$bar.oy;
return;
}
bar.update_bar_position({ y: bar.y });
});
}
});

document.addEventListener('mouseup', () => {
Expand All @@ -1322,13 +1382,17 @@ export default class Gantt {
?.classList?.remove?.('visible');
});

$.on(this.$svg, 'mouseup', (e) => {
$.on(this.$svg, 'mouseup', () => {
this.bar_being_dragged = null;
bars.forEach((bar) => {
const $bar = bar.$bar;
if (!$bar.finaldx) return;
bar.date_changed();
bar.compute_progress();
if (!$bar.finaldx) {
bar.date_changed();
bar.compute_progress();
}
if (parent_bar_id === bar.task.id) {
bar.update_bar_position({ y: bar.y });
}
bar.set_action_completed();
});
});
Expand Down