Skip to content

Feat: drag y #17

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

Merged
merged 3 commits into from
Dec 24, 2023
Merged

Feat: drag y #17

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
1cd5d17
fix: line number 출력 방식 수정
seulgigi Dec 21, 2023
f037f13
feat: many tasks in one row
seulgigi Dec 21, 2023
f0dad90
feat: drag Y
seulgigi Dec 22, 2023
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
225 changes: 183 additions & 42 deletions MAPS_Web/dist/frappe-gantt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,6 @@ var Gantt = (function () {
}

draw() {
this.draw_number();
this.draw_bar();
this.draw_progress_bar();
this.draw_label();
Expand Down Expand Up @@ -597,17 +596,6 @@ var Gantt = (function () {
requestAnimationFrame(() => this.update_label_position());
}

// Add grid line number
draw_number() {
createSVG('text', {
x: 15,
y: this.y + this.height / 2,
innerHTML: this.task.id,
class: 'process-num',
append_to: this.bar_group
});
}

draw_resize_handles() {
if (this.invalid) return;

Expand Down Expand Up @@ -735,7 +723,7 @@ var Gantt = (function () {
});
}

update_bar_position({ x = null, width = null }) {
update_bar_position({ x = null, width = null, y = null }) {

const bar = this.$bar;
const bar_progress = this.$bar_progress;
Expand Down Expand Up @@ -813,6 +801,15 @@ var Gantt = (function () {
// add arrow position
this.update_arrow_position();
}

if (y) {
this.update_attr(bar, 'y', y);
this.update_progressbar_position();
// add label position
this.update_label_position();
// add arrow position
this.update_arrow_position();
}

// this.update_label_position();
this.update_handle_position();
Expand Down Expand Up @@ -944,6 +941,7 @@ var Gantt = (function () {

update_progressbar_position() {
this.$bar_progress.setAttribute('x', this.$bar.getX());
this.$bar_progress.setAttribute('y', this.$bar.getY());
this.$bar_progress.setAttribute(
'width',
this.$bar.getWidth() * (this.task.progress / 100)
Expand All @@ -961,16 +959,23 @@ var Gantt = (function () {
label.classList.remove('big');
label.setAttribute('x', bar.getX() + bar.getWidth() / 2);
}
label.setAttribute('y', bar.getY() + bar.getHeight() / 2);
}

update_handle_position() {
const bar = this.$bar;
this.handle_group
.querySelector('.handle.left')
.setAttribute('x', bar.getX() + 1);
this.handle_group
.querySelector('.handle.left')
.setAttribute('y', bar.getY() + 1);
this.handle_group
.querySelector('.handle.right')
.setAttribute('x', bar.getEndX() - 9);
this.handle_group
.querySelector('.handle.right')
.setAttribute('y', bar.getY() + 1);
const handle = this.group.querySelector('.handle.progress');
handle &&
handle.setAttribute('points', this.get_progress_polygon_points());
Expand Down Expand Up @@ -1007,22 +1012,25 @@ var Gantt = (function () {
}

const start_y =
this.gantt.options.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;
// this.gantt.options.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;
this.from_task.$bar.getY() + this.gantt.options.bar_height;

const end_x = this.to_task.$bar.getX() - this.gantt.options.padding / 2;
const end_y =
this.gantt.options.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;
// this.gantt.options.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;
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;
// this.from_task.task._index > this.to_task.task._index;
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;
const curve_y = from_is_below_to ? -curve : curve;
Expand Down Expand Up @@ -1229,7 +1237,8 @@ var Gantt = (function () {
popup_trigger: 'click',
custom_popup_html: null,
language: 'en',
start_date: 'None'
start_date: 'None',
sortable: true,
};
this.options = Object.assign({}, default_options, options);
}
Expand All @@ -1249,6 +1258,10 @@ var Gantt = (function () {

// cache index
task._index = i;

if (typeof task.machine_index === 'number') {
task._index = task.machine_index;
}

// invalid dates
if (!task.start && !task.end) {
Expand Down Expand Up @@ -1452,6 +1465,7 @@ var Gantt = (function () {
this.make_grid_header();
this.make_grid_ticks();
this.make_grid_highlights();
this.make_grid_row_number();
}

make_grid_background() {
Expand Down Expand Up @@ -1537,6 +1551,27 @@ var Gantt = (function () {
id: 'score'
});
}

// Add line number
make_grid_row_number() {
const rows_layer = createSVG('g', { append_to: this.layers.grid });
const row_height = this.options.bar_height + this.options.padding;
let row_y = this.options.header_height + this.options.padding

var count = 1
for (let task of this.tasks) {
const line_number = createSVG('text', {
x: 15,
y: row_y*0.6 + count * row_height,
class: 'process-num',
append_to: rows_layer
})

line_number.textContent = count;

count = count + 1;
}
}

update_score() {
var tardiness = tasks.map(otask => {
Expand Down Expand Up @@ -1893,6 +1928,26 @@ var Gantt = (function () {
}
);
}

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;
Expand All @@ -1903,6 +1958,13 @@ var Gantt = (function () {
let parent_bar_id = null;
let bars = []; // instanceof Bar
this.bar_being_dragged = null;

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

function action_in_progress() {
return is_dragging || is_resizing_left || is_resizing_right;
Expand Down Expand Up @@ -1931,16 +1993,22 @@ var Gantt = (function () {
parent_bar_id,
...this.get_all_dependent_tasks(parent_bar_id)
];
bars = ids.map(id => this.get_bar(id));
// bars = ids.map(id => this.get_bar(id));

this.bar_being_dragged = parent_bar_id;
// this.bar_being_dragged = parent_bar_id;

bars.forEach(bar => {
bars = ids.map((id) => {
const bar = this.get_bar(id);
if (parent_bar_id === id) {
this.bar_being_dragged = 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;
});
bars.forEach(bar => {
const $bar = bar.$bar;
Expand All @@ -1955,32 +2023,88 @@ var Gantt = (function () {
if (!action_in_progress()) return;
const dx = e.offsetX - x_on_start;
const dy = e.offsetY - y_on_start;

this.hide_popup();

// update the dragged bar
const bar_being_dragged = this.bar_being_dragged;
bar_being_dragged.$bar.finaldx = this.get_snap_position(dx);
if (is_resizing_left) {
bar_being_dragged.update_bar_position({
x:
bar_being_dragged.$bar.ox +
bar_being_dragged.$bar.finaldx,
width:
bar_being_dragged.$bar.owidth -
bar_being_dragged.$bar.finaldx,
});
} else if (is_resizing_right) {
bar_being_dragged.update_bar_position({
width:
bar_being_dragged.$bar.owidth +
bar_being_dragged.$bar.finaldx,
});
} else if (is_dragging) {
let y = bar_being_dragged.$bar.oy + dy;
if (y < min_y) {
y = min_y;
} else if (y > max_y) {
y = max_y;
}
bar_being_dragged.update_bar_position({
x:
bar_being_dragged.$bar.ox +
bar_being_dragged.$bar.finaldx,
y: this.options.sortable ? y : null,
});
}

bars.forEach(bar => {
if (bar.task.id === parent_bar_id) {
return;
}

const $bar = bar.$bar;
$bar.finaldx = this.get_snap_position(dx);

if (is_resizing_left) {
if (parent_bar_id === bar.task.id) {
bar.update_bar_position({
x: $bar.ox + $bar.finaldx,
width: $bar.owidth - $bar.finaldx
});
} else {
bar.update_bar_position({
// if (parent_bar_id === bar.task.id) {
// bar.update_bar_position_width({
// x: $bar.ox + $bar.finaldx,
// width: $bar.owidth - $bar.finaldx
// });
// } else {
bar.update_bar_position_width({
x: $bar.ox + $bar.finaldx
});
}
// }
} else if (is_resizing_right) {
if (parent_bar_id === bar.task.id) {
bar.update_bar_position({
width: $bar.owidth + $bar.finaldx
});
}
// if (parent_bar_id === bar.task.id) {
// bar.update_bar_position_width({
// width: $bar.owidth + $bar.finaldx
// });
// }
} else if (is_dragging) {
bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
}
});

// update y pos
if (
this.options.sortable &&
is_dragging &&
Math.abs(dy - bar_being_dragged.$bar.finaldy) >
bar_being_dragged.height
) {
this.sort_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 });
});
}

bars.forEach(bar => {
const $bar = bar.$bar;
Expand All @@ -1992,11 +2116,28 @@ var Gantt = (function () {
});

document.addEventListener('mouseup', e => {
const dy = e.offsetY - y_on_start;
if (is_dragging || is_resizing_left || is_resizing_right) {
bars.forEach(bar => bar.group.classList.remove('active'));
// bars.forEach(bar => bar.group.classList.remove('active'));
bars.forEach((bar) => {
bar.group.classList.remove('active');

const $bar = bar.$bar;
if ($bar.finaldx) {
bar.date_changed();
bar.set_action_completed();
}
});
const $bar = this.bar_being_dragged.$bar;
if (this.options.sortable && dy !== $bar.finaldy) {
this.bar_being_dragged.update_bar_position({
y: $bar.oy + $bar.finaldy,
});
}
}

this.drg = false; // drag edit finish point
this.bar_being_dragged = null;
is_dragging = false;
is_resizing_left = false;
is_resizing_right = false;
Expand Down
Loading