fixed progress resize handle

This commit is contained in:
Faris Ansari 2017-01-05 13:10:36 +05:30
parent 2b845bdd55
commit cbafcde5f8
4 changed files with 47 additions and 24 deletions

11
dist/frappe-gantt.js vendored
View File

@ -1236,17 +1236,21 @@ return /******/ (function(modules) { // webpackBootstrap
if (self.invalid) return;
var bar = self.$bar,
bar_progress = self.$bar_progress,
handle_width = 8;
gt.canvas.rect(bar.getX() + bar.getWidth() - 9, bar.getY() + 1, handle_width, self.height - 2, self.corner_radius, self.corner_radius).addClass('handle right').appendTo(self.handle_group);
gt.canvas.rect(bar.getX() + 1, bar.getY() + 1, handle_width, self.height - 2, self.corner_radius, self.corner_radius).addClass('handle left').appendTo(self.handle_group);
if (self.task.progress && self.task.progress < 100) {
gt.canvas.polygon(bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.getHeight(), bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(), bar_progress.getEndX(), bar_progress.getY() + bar_progress.getHeight() - 8.66).addClass('handle progress').appendTo(self.handle_group);
gt.canvas.polygon(get_progress_polygon_points()).addClass('handle progress').appendTo(self.handle_group);
}
}
function get_progress_polygon_points() {
var bar_progress = self.$bar_progress;
return [bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.getHeight(), bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(), bar_progress.getEndX(), bar_progress.getY() + bar_progress.getHeight() - 8.66];
}
function bind() {
if (self.invalid) return;
setup_click_event();
@ -1357,7 +1361,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
bar_progress.attr('width', bar_progress.owidth + dx);
handle.transform('t{dx},0');
handle.attr('points', get_progress_polygon_points());
bar_progress.finaldx = dx;
}
function on_stop() {
@ -1581,6 +1585,7 @@ return /******/ (function(modules) { // webpackBootstrap
self.handle_group.select('.handle.right').attr({
'x': bar.getEndX() - 9
});
self.group.select('.handle.progress').attr('points', get_progress_polygon_points());
}
function update_arrow_position() {

File diff suppressed because one or more lines are too long

View File

@ -28,24 +28,35 @@
</div>
</div>
<script>
var arr = [1, 2, 3, 4, 5, 6];
var tasks = arr.map(function(i){
var names = [
["Redesign website", [0, 7]],
["Write new content", [1, 4]],
["Apply new styles", [3, 6]],
["Review", [7, 7]],
["Deploy", [8, 9]],
["Go Live!", [10, 10]]
];
var tasks = names.map(function(name, i) {
var today = new Date();
var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
start.setDate(today.getDate() + name[1][0]);
end.setDate(today.getDate() + name[1][1]);
return {
start: "2016-10-0"+i,
end: "2016-11-0"+i,
name: "Task "+i,
id: "Task"+i,
progress: i*10
start: start,
end: end,
name: name[0],
id: "Task " + i,
progress: parseInt(Math.random() * 100, 10)
}
});
tasks[1].dependencies = 'Task1';
tasks[2].dependencies = 'Task2';
tasks[1].dependencies = "Task 0"
tasks[2].dependencies = "Task 1"
tasks[3].dependencies = "Task 2"
tasks[5].dependencies = "Task 4"
var gantt_chart = Gantt("#gantt", tasks, {
date_format: "YYYY-MM-DD",
bar: {
height: 20
},
on_click: function (task) {
console.log(task);
},

View File

@ -105,7 +105,6 @@ export default function Bar(gt, task) {
if (self.invalid) return;
const bar = self.$bar,
bar_progress = self.$bar_progress,
handle_width = 8;
gt.canvas.rect(bar.getX() + bar.getWidth() - 9, bar.getY() + 1,
@ -118,16 +117,21 @@ export default function Bar(gt, task) {
.appendTo(self.handle_group);
if (self.task.progress && self.task.progress < 100) {
gt.canvas.polygon(
bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.getHeight(),
bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(),
bar_progress.getEndX(), bar_progress.getY() + bar_progress.getHeight() - 8.66
)
gt.canvas.polygon(get_progress_polygon_points())
.addClass('handle progress')
.appendTo(self.handle_group);
}
}
function get_progress_polygon_points() {
const bar_progress = self.$bar_progress;
return [
bar_progress.getEndX() - 5, bar_progress.getY() + bar_progress.getHeight(),
bar_progress.getEndX() + 5, bar_progress.getY() + bar_progress.getHeight(),
bar_progress.getEndX(), bar_progress.getY() + bar_progress.getHeight() - 8.66
];
}
function bind() {
if (self.invalid) return;
setup_click_event();
@ -254,7 +258,7 @@ export default function Bar(gt, task) {
}
bar_progress.attr('width', bar_progress.owidth + dx);
handle.transform(`t{dx},0`);
handle.attr('points', get_progress_polygon_points());
bar_progress.finaldx = dx;
}
function on_stop() {
@ -461,6 +465,9 @@ export default function Bar(gt, task) {
self.handle_group.select('.handle.right').attr({
'x': bar.getEndX() - 9
});
self.group.select('.handle.progress').attr(
'points', get_progress_polygon_points()
);
}
function update_arrow_position() {