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>