fixed progress resize handle

dist/frappe-gantt.js

@@ -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() {

index.html

@@ -28,24 +28,35 @@
 		</div>
 	</div>
 	<script>
-		var arr = [1, 2, 3, 4, 5, 6];
+		var names = [
-		var tasks = arr.map(function(i){
+			["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,
+				start: start,
-				end: "2016-11-0"+i,
+				end: end,
-				name: "Task "+i,
+				name: name[0],
-				id: "Task"+i,
+				id: "Task " + i,
-				progress: i*10
+				progress: parseInt(Math.random() * 100, 10)
 			}
 		});
-		tasks[1].dependencies = 'Task1';
+		tasks[1].dependencies = "Task 0"
-		tasks[2].dependencies = 'Task2';
+		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);
 				},

src/Bar.js

@@ -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(
+			gt.canvas.polygon(get_progress_polygon_points())
-				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);
 		}
 	}
 
+	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() {