after keypress, enter visual points, reset points array for new polygon on next draw

3 years ago · c7af001842
parent 488f3f9d4c
commit c7af001842
2 changed files with 23 additions and 1 deletions
--- a/app.js
+++ b/app.js
@ -16,7 +16,7 @@ d3.select('svg').selectAll('path')
 	.attr('fill', '#099')
 	.attr('d', dAttributeFunction);
-const points = [];
+let points = [];
 d3.select('svg').on('click', (event)=>{
 	points.push([event.x, event.y])
 	const path = d3.path();
@ -25,9 +25,22 @@ d3.select('svg').on('click', (event)=>{
 		path.lineTo(points[i][0], points[i][1])
 	}
 	path.closePath()
 	d3.select('#polygon').remove()
 	d3.select('svg')
 		.append('path')
 		.attr('id', 'polygon')
 		.attr('fill', 'black')
 		.attr('d', path)
 })
 d3.select('body').on('keydown', (event)=>{
 	d3.select('tbody').html('');
 	for(point of points){
 		const row = d3.select('tbody')
 			.append('tr')
 		row.append('td')
 			.html(point[0])
 		row.append('td')
 			.html(point[1])
 	}
 	points = [];
 })
--- a/index.html
+++ b/index.html
@ -8,6 +8,15 @@
 	</head>
 <body>
 	<svg></svg>
 	<table>
 		<thead>
 			<tr>
 				<th>lat</th>
 				<th>lng</th>
 			</tr>
 		</thead>
 		<tbody></tbody>
 	</table>
 	<script src="app.js" charset="utf-8"></script>
 </body>
 </html>