Skip to content

Commit c8ca787

Browse files
hiawuihiawui
committed
enable dragging to change the task order
1 parent ae7bc8d commit c8ca787

File tree

3 files changed

+90
-26
lines changed

3 files changed

+90
-26
lines changed

‎src/arrow.js

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,16 @@ export default class Arrow {
2323
}
2424
start_x -= 10;
2525

26-
let start_y =
27-
this.gantt.config.header_height +
28-
this.gantt.options.bar_height +
29-
(this.gantt.options.padding + this.gantt.options.bar_height) *
30-
this.from_task.task._index +
31-
this.gantt.options.padding / 2;
26+
const start_y =
27+
this.from_task.$bar.getY() + this.gantt.options.bar_height;
3228

33-
let end_x = this.to_task.$bar.getX() - 13;
34-
let end_y =
35-
this.gantt.config.header_height +
36-
this.gantt.options.bar_height / 2 +
37-
(this.gantt.options.padding + this.gantt.options.bar_height) *
38-
this.to_task.task._index +
39-
this.gantt.options.padding / 2;
29+
const end_x = this.to_task.$bar.getX() - 13;
30+
const end_y =
31+
this.to_task.$bar.getY() + this.gantt.options.bar_height / 2;
4032

4133
const from_is_below_to =
42-
this.from_task.task._index > this.to_task.task._index;
43-
44-
let curve = this.gantt.options.arrow_curve;
34+
this.from_task.$bar.getY() > this.to_task.$bar.getY();
35+
const curve = this.gantt.options.arrow_curve;
4536
const clockwise = from_is_below_to ? 1 : 0;
4637
let curve_y = from_is_below_to ? -curve : curve;
4738

‎src/bar.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ export default class Bar {
395395
});
396396
}
397397

398-
update_bar_position({ x = null, width = null }) {
398+
update_bar_position({ x = null, width = null, y = null }) {
399399
const bar = this.$bar;
400400

401401
if (x) {
@@ -414,7 +414,9 @@ export default class Bar {
414414
this.update_attr(bar, 'width', width);
415415
this.$date_highlight.style.width = width + 'px';
416416
}
417-
417+
if (y) {
418+
this.update_attr(bar, 'y', y);
419+
}
418420
this.update_label_position();
419421
this.update_handle_position();
420422
this.date_changed();
@@ -648,7 +650,7 @@ export default class Bar {
648650
update_progressbar_position() {
649651
if (this.invalid || this.gantt.options.readonly) return;
650652
this.$bar_progress.setAttribute('x', this.$bar.getX());
651-
653+
this.$bar_progress.setAttribute('y', this.$bar.getY());
652654
this.$bar_progress.setAttribute(
653655
'width',
654656
this.calculate_progress_width(),
@@ -690,6 +692,7 @@ export default class Bar {
690692
);
691693
}
692694
}
695+
label.setAttribute('y', bar.getY() + bar.getHeight() / 2);
693696
}
694697

695698
update_handle_position() {
@@ -698,9 +701,15 @@ export default class Bar {
698701
this.handle_group
699702
.querySelector('.handle.left')
700703
.setAttribute('x', bar.getX());
704+
this.handle_group
705+
.querySelector('.handle.left')
706+
.setAttribute('y', bar.getY() + this.height / 4);
701707
this.handle_group
702708
.querySelector('.handle.right')
703709
.setAttribute('x', bar.getEndX());
710+
this.handle_group
711+
.querySelector('.handle.right')
712+
.setAttribute('y', bar.getY() + this.height / 4);
704713
const handle = this.group.querySelector('.handle.progress');
705714
handle && handle.setAttribute('cx', this.$bar_progress.getEndX());
706715
}

‎src/index.js

Lines changed: 71 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,6 +1073,26 @@ export default class Gantt {
10731073
return [min_start, max_start, max_end];
10741074
}
10751075

1076+
sort_bars() {
1077+
const changed_bars = [];
1078+
if (!this.bars) {
1079+
return changed_bars;
1080+
}
1081+
this.bars = this.bars.sort((b0, b1) => {
1082+
return b0.$bar.getY() - b1.$bar.getY();
1083+
});
1084+
1085+
this.tasks = this.bars.map((b, i) => {
1086+
const task = b.task;
1087+
if (task._index !== i) {
1088+
changed_bars.push(b);
1089+
}
1090+
task._index = i;
1091+
return task;
1092+
});
1093+
return changed_bars;
1094+
}
1095+
10761096
bind_bar_events() {
10771097
let is_dragging = false;
10781098
let x_on_start = 0;
@@ -1081,8 +1101,13 @@ export default class Gantt {
10811101
let is_resizing_left = false;
10821102
let is_resizing_right = false;
10831103
let parent_bar_id = null;
1084-
let bars = []; // instanceof Bar
1085-
this.bar_being_dragged = null;
1104+
let bars = []; // instanceof Bars, the dragged bar and its children
1105+
const min_y = this.options.header_height;
1106+
const max_y =
1107+
this.options.header_height +
1108+
this.tasks.length *
1109+
(this.options.bar_height + this.options.padding);
1110+
this.bar_being_dragged = null; // instanceof dragged bar
10861111

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

1094-
let pos = 0;
1119+
let x_pos = 0;
1120+
let y_pos = 0;
10951121
$.on(this.$svg, 'mousemove', '.bar-wrapper, .handle', (e) => {
10961122
if (
10971123
this.bar_being_dragged === false &&
1098-
Math.abs((e.offsetX || e.layerX) - pos) > 10
1124+
(Math.abs((e.offsetX || e.layerX) - x_pos) > 10 ||
1125+
Math.abs((e.offsetY || e.layerY) - y_pos) > 10)
10991126
)
11001127
this.bar_being_dragged = true;
11011128
});
@@ -1130,14 +1157,17 @@ export default class Gantt {
11301157
bars = ids.map((id) => this.get_bar(id));
11311158

11321159
this.bar_being_dragged = false;
1133-
pos = x_on_start;
1160+
x_pos = x_on_start;
1161+
y_pos = y_on_start;
11341162

11351163
bars.forEach((bar) => {
11361164
const $bar = bar.$bar;
11371165
$bar.ox = $bar.getX();
11381166
$bar.oy = $bar.getY();
11391167
$bar.owidth = $bar.getWidth();
11401168
$bar.finaldx = 0;
1169+
$bar.finaldy = 0;
1170+
return bar;
11411171
});
11421172
});
11431173

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

1316+
let bar_dragging = null
12851317
bars.forEach((bar) => {
12861318
const $bar = bar.$bar;
1319+
if (parent_bar_id === bar.task.id) {
1320+
bar_dragging = bar;
1321+
}
12871322
$bar.finaldx = this.get_snap_position(dx, $bar.ox);
12881323
this.hide_popup();
12891324
if (is_resizing_left) {
@@ -1308,9 +1343,34 @@ export default class Gantt {
13081343
!this.options.readonly &&
13091344
!this.options.readonly_dates
13101345
) {
1311-
bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
1346+
if (parent_bar_id === bar.task.id) {
1347+
bar.update_bar_position({
1348+
x: $bar.ox + $bar.finaldx,
1349+
y: Math.min(Math.max($bar.oy + dy, min_y), max_y)
1350+
});
1351+
} else {
1352+
bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
1353+
}
13121354
}
13131355
});
1356+
1357+
// update y pos
1358+
if (
1359+
is_dragging &&
1360+
!this.options.readonly &&
1361+
!this.options.readonly_dates &&
1362+
Math.abs(dy - bar_dragging.$bar.finaldy) > bar_dragging.height
1363+
) {
1364+
const changed_bars = this.sort_bars();
1365+
changed_bars.map((bar) => {
1366+
const y = bar.compute_y();
1367+
if (bar.task.id === parent_bar_id) {
1368+
bar.$bar.finaldy = y - bar.$bar.oy;
1369+
return;
1370+
}
1371+
bar.update_bar_position({ y: y });
1372+
});
1373+
}
13141374
});
13151375

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

13251385
$.on(this.$svg, 'mouseup', (e) => {
1386+
const dy = e.offsetY - y_on_start;
13261387
this.bar_being_dragged = null;
13271388
bars.forEach((bar) => {
13281389
const $bar = bar.$bar;
1329-
if (!$bar.finaldx) return;
1390+
if (!$bar.finaldx && !$bar.finaldy) return;
13301391
bar.date_changed();
13311392
bar.compute_progress();
13321393
bar.set_action_completed();
1394+
if (dy !== $bar.finaldy) {
1395+
bar.update_bar_position({ y: $bar.oy + $bar.finaldy })
1396+
}
13331397
});
13341398
});
13351399

0 commit comments

Comments
 (0)