line to cursor

2 files changed, 12 insertions, 8 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 564b351..24f7cf3 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -228,11 +228,11 @@ Map.Draw = function(map, opt){
 		line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
 	}
 
-	draw.dot_at = function dot_at (x,z){
+	draw.dot_at = function dot_at (x, z, radius){
 		ctx.save()
 		ctx.translate(x,z)
 
-		var radius = 2 / map.zoom
+		radius = (radius || 2) / map.zoom
 
 		ctx.beginPath();
 		ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index ce52f99..1ca7e06 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){
 			cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
 			cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
 			last_point = new vec2( cursor.x.a, cursor.y.a )
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) {
+			if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) {
 				document.body.style.cursor = "pointer"
+				last_point.assign(points[0])
+				cursor.x.a = cursor.x.b = last_point.a
+				cursor.y.a = cursor.y.b =last_point.b
 			}
 			else {
 				document.body.style.cursor = "crosshair"
@@ -119,7 +121,7 @@ function polyline (points, finished) {
   if (! points) return
   if (points.length == 1) {
     ctx.fillStyle = "#f80"
-    ctx.fillRect(points[0].a, points[0].b, 10, 10)
+    map.draw.dot_at(points[0].a, points[0].b, 5)
   }
   if (points.length > 1) {
     ctx.fillStyle = "#ff0"
@@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){
     rotationY: angle
   })
   var hue = abs(round( angle / PI * 90 + 300))
-  console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')')
   mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
   scene.add(mx)
   return mx
@@ -256,10 +257,13 @@ function animate(time){
 	map.draw.coords()
 
   polyline(points)
-  if (placing && last_point && points.length) {
+  if (placing && last_point) {
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
     ctx.beginPath()
-    ctx.moveTo(points[0].a, points[0].b)
+    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
     ctx.lineTo(last_point.a, last_point.b)
+    ctx.stroke()
   }
 
   shapes.forEach(function(shape){