Skip to content
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

feat: enable dragging to change task order #278

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+92 −28
Open

feat: enable dragging to change task order #278

Changes from 1 commit
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
Next Next commit
enable dragging to change the task order
@hiawui
hiawui committed Jan 9, 2025
commit c8ca787652905eb89325e63a91c541eddd211f6b
23 changes: 7 additions & 16 deletions src/arrow.js
View file
Original file line number Diff line number Diff line change
@@ -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;

15 changes: 12 additions & 3 deletions src/bar.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
@@ -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();
@@ -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(),
@@ -690,6 +692,7 @@ export default class Bar {
);
}
}
label.setAttribute('y', bar.getY() + bar.getHeight() / 2);
}

update_handle_position() {
@@ -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());
}
78 changes: 71 additions & 7 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -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;
@@ -1081,8 +1101,13 @@ export default class Gantt {
let is_resizing_left = false;
let is_resizing_right = false;
let parent_bar_id = null;
let bars = []; // instanceof Bar
this.bar_being_dragged = null;
let bars = []; // instanceof Bars, the dragged bar and its children
const min_y = this.options.header_height;
const max_y =
this.options.header_height +
this.tasks.length *
(this.options.bar_height + this.options.padding);
this.bar_being_dragged = null; // instanceof dragged bar

const action_in_progress = () =>
is_dragging || is_resizing_left || is_resizing_right;
@@ -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;
});
@@ -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;
});
});

@@ -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) {
@@ -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) => {
const y = bar.compute_y();
if (bar.task.id === parent_bar_id) {
bar.$bar.finaldy = y - bar.$bar.oy;
return;
}
bar.update_bar_position({ y: y });
});
}
});

document.addEventListener('mouseup', () => {
@@ -1323,13 +1383,17 @@ export default class Gantt {
});

$.on(this.$svg, 'mouseup', (e) => {
const dy = e.offsetY - y_on_start;
this.bar_being_dragged = null;
bars.forEach((bar) => {
const $bar = bar.$bar;
if (!$bar.finaldx) return;
if (!$bar.finaldx && !$bar.finaldy) return;
bar.date_changed();
bar.compute_progress();
bar.set_action_completed();
if (dy !== $bar.finaldy) {
bar.update_bar_position({ y: $bar.oy + $bar.finaldy })
}
});
});