From 44642b48203b3ee2fa9e281f31ed9fed3f60ee79 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 21 Jul 2015 13:23:22 -0400
Subject: find closest segment

---
 public/assets/test/ortho3.html | 362 +++--------------------------------------
 1 file changed, 25 insertions(+), 337 deletions(-)

(limited to 'public/assets/test')

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index fa7e3c5..7e7e8ec 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -61,6 +61,8 @@ body {
 <script src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.point.js"></script>
+<script src="/assets/javascripts/mx/primitives/mx.polyline.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
 <script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
@@ -68,8 +70,13 @@ body {
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script src="/assets/javascripts/rectangles/engine/map/ui_ortho.js"></script>
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/ui/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/_base.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/arrow.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/ortho.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/polyline.js"></script>
+<script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
 
 <script>
 var app = window.app || {}
@@ -77,274 +84,13 @@ app.tube = new Tube ()
 app.on = function(){ app.tube.on.apply(app.tube, arguments) }
 app.off = function(){	app.tube.off.apply(app.tube, arguments) }
 
-var MapTool = Fiber.extend(function(base){
-	var exports = {
-	  recenterCursor: true,
-	  down: function(e, cursor){},
-	  move: function(e, cursor){},
-	  drag: function(e, cursor){},
-	  up: function(e, cursor, new_cursor){},
-	  cancel: function(){},
-  }
-  return exports
-})
-
-var ArrowTool = MapTool.extend(function(base){
+var EraserTool = MapTool.extend(function(base){
 	var exports = {}
-	
-	var selected_point = null, original_point = null, selected_shape = null
-	
 	exports.down = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var p = shapes.findClosestPoint(last_point)
-    if (p) {
-      selected_shape = p.shape
-      selected_point = p.point
-      original_point = selected_point.clone()
-    }
-    else {
-      map.ui.set_drag_tool("position")
-    }
-	}
-	
-  exports.move = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    var p = shapes.findClosestPoint(last_point)
-    if (p) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(p.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-	}
-	
-	exports.drag = function(e, cursor){
-    selected_point.a = original_point.a + cursor.x.magnitude()
-		selected_point.b = original_point.b + cursor.y.magnitude()
-		selected_shape.rebuild()
-	}
-	
-	exports.up = function(e, cursor){
-	  selected_point = selected_shape = original_point = null
-	}
-	
-	return exports
-})
-
-var PositionTool = MapTool.extend(function(base){
-	var exports = {
-	  recenterCursor: false,
-	  drag: function(e, cursor){
-      map.center.a = -cursor.x.magnitude()
-      map.center.b = cursor.y.magnitude()
-	  },
-	  rightclick: function(e, cursor){
-      cursor.quantize(1/map.zoom)
-      map.center.a = cursor.x.a
-      map.center.b = -cursor.y.a
-      cursor.x.b = cursor.x.a
-      cursor.y.b = cursor.y.a
-	  }
-  }
-  return exports
-})
-
-var PolylineTool = MapTool.extend(function (base) {
-  var exports = {}
-  exports.down = function(e, cursor){
-
-    // rightclick?
-    if (e.ctrlKey || e.which === 3) {
-      e.preventDefault()
-      e.stopPropagation()
-      if (placing) {
-        // close polyline or cancel
-        placing = false
-        if (line.points.length > 2) {
-          line.build()
-        }
-        else {
-          line.reset()
-        }
-        return
-      }
-      map.ui.tools.position.rightclick(e, cursor)
-      return
-    }
-
-    // compare to initial point
-    var p = last_point.clone()
-    if (placing) {
-      if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
-        placing = false
-      }
-      else {
-        line.add(p)
-      }
-    }
-    else {
-      placing = true
-      line = new Polyline ()
-      line.add(p)
-    }
   }
   exports.move = function(e, cursor){
     last_point.a = cursor.x.a
     last_point.b = cursor.y.a
-    if (placing && line.canCloseWith(last_point)) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(line.points[0])
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    var end_point = shapes.findClosestEndPoint(last_point)
-    if (end_point) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(end_point.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-  }
-  exports.cancel = function(){
-    if (placing) { line.reset() }
-    placing = false
-  }
-  return exports
-})
-
-var OrthoPolylineTool = MapTool.extend(function (base) {
-  // this will work like normal polyline except all walls will be orthogonal
-  
-  var prev_point, horizontal = false, first_edge_is_horizontal = false
-  
-  var exports = {}
-  exports.down = function(e, cursor){
-    // rightclick?
-    if (e.ctrlKey || e.which === 3) {
-      e.preventDefault()
-      e.stopPropagation()
-      if (placing) {
-        // close polyline or cancel
-        placing = false
-        if (line.points.length > 2) {
-          line.build()
-        }
-        else {
-          line.reset()
-        }
-        return
-      }
-      else {
-        map.ui.tools.position.rightclick(e, cursor)
-      }
-      return
-    }
-
-    // compare to initial point
-    var p = last_point.clone()
-    if (placing) {
-      if (line.lastPoint().eq(p)) {
-        return
-      }
-      else if (line.canCloseWith(p)) {
-        line.close()
-        line.build()
-        placing = false
-      }
-      else {
-        line.add(p)
-        prev_point = p
-        horizontal = ! horizontal
-      }
-    }
-    else {
-      placing = true
-      line = new Polyline ()
-      line.add(p)
-      first_point = prev_point = p
-      horizontal = false
-    }
-  }
-  exports.move = function(e, cursor){
-    last_point.a = cursor.x.a
-    last_point.b = cursor.y.a
-    if (placing) {
-      if (line.points.length == 1) {
-        var x = abs(prev_point.a - last_point.a)
-        var y = abs(prev_point.b - last_point.b)
-        if (x > y) {
-          last_point.b = prev_point.b
-          first_edge_is_horizontal = horizontal = true
-        }
-        else {
-          last_point.a = prev_point.a
-          first_edge_is_horizontal = horizontal = false
-        }
-      }
-      else {
-        if (horizontal) {
-          last_point.b = prev_point.b
-        }
-        else {
-          last_point.a = prev_point.a
-        }
-        if (horizontal == first_edge_is_horizontal) {
-          // check if this point is within N pixels of the normal
-          // and lock it into place if so
-          if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
-            last_point.a = first_point.a
-          }
-          else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
-            last_point.b = first_point.b
-          }
-        }
-      }
-
-      if (line.canCloseWith(last_point)) {
-        document.body.style.cursor = "pointer"
-        last_point.assign(first_point)
-        cursor.x.a = cursor.x.b = last_point.a
-        cursor.y.a = cursor.y.b = last_point.b
-      }
-      return
-    }
-    var end_point = shapes.findClosestEndPoint(last_point)
-    if (end_point) {
-      document.body.style.cursor = "pointer"
-      last_point.assign(end_point.point)
-      cursor.x.a = cursor.x.b = last_point.a
-      cursor.y.a = cursor.y.b = last_point.b
-      return
-    }
-    else {
-      document.body.style.cursor = "crosshair"
-    }
-  }
-  exports.cancel = function(){
-    if (placing) { line.reset() }
-    first_point = null
-    placing = false
-  }
-  return exports
-})
-
-var EraserTool = MapTool.extend(function(base){
-	var exports = {}
-	exports.down = function(e, cursor){
-  }
-  exports.move = function(e, cursor){
     var segment = shapes.findClosestSegment(last_point)
     if (segment) {
       document.body.style.cursor = "pointer"
@@ -463,8 +209,8 @@ var Polyline = Fiber.extend(function(base){
     for (var i = 1; i < points.length; i++) {
       p1 = p2
       p2 = points[i]
-      d1 = p1.a - p2.a
-      d2 = p1.b - p2.b
+      d1 = p2.a - p1.a
+      d2 = p2.b - p1.b
       sum = d1*d1 + d2*d2
       rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum
       rat = rat < 0 ? 0 : rat < 1 ? rat : 1
@@ -506,7 +252,7 @@ var Polyline = Fiber.extend(function(base){
         i && ctx.lineTo(point.a, point.b)
       })
       ctx.stroke()
-      if (! placing || this.closed) {
+      if (! map.ui.placing || this.closed) {
         ctx.fill()
       }
     }
@@ -540,74 +286,6 @@ var Polyline = Fiber.extend(function(base){
   return exports
 })
 
-MX.Polyline = MX.Object3D.extend({
-  init: function(polyline){
-    this.faces = []
-    this.points = polyline.points
-    for (var i = 1; i < this.points.length; i++) {
-      var mx = new MX.Object3D()
-      var head = this.points[i-1]
-      var tail = this.points[i]
-      this.move_face(mx, head, tail)
-      this.faces.push(mx)
-      scene.add(mx)
-    }
-  },
-  
-  rebuild: function(){
-    for (var i = 1; i < this.points.length; i++) {
-      var mx = this.faces[i-1]
-      var head = this.points[i-1]
-      var tail = this.points[i]
-      this.move_face(mx, head, tail)
-    }
-  },
-
-  move_face: function (mx, head, tail){
-    var mid_x = (head.a + tail.a)
-    var mid_z = (head.b + tail.b)
-    var len = head.distanceTo( tail )
-    var angle = atan2( head.b - tail.b, head.a - tail.a )
-    mx.move({
-      x: mid_x / 2,
-      y: wall_height/2 + 1,
-      z: mid_z / 2,
-      width: ceil(len),
-      height: wall_height,
-      rotationY: angle
-    })
-    var hue = abs(round( angle / PI * 90 + 300))
-    mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
-  },
-  
-  destroy: function(){
-    this.faces.forEach(function(mx){
-      scene.remove(mx)
-    })
-    this.faces = null
-    this.points = null
-  },
-
-})
-
-MX.Point = MX.Object3D.extend({
-  init: function(p){
-    this.updateChildren = false
-    this.move({
-      x: p.a,
-      y: 11,
-      z: p.b,
-      width: 20,
-      height: 20,
-      rotationX: PI/2,
-    })
-    this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
-    this.el.style.backfaceVisibility = "visible"
-    this.el.style.borderRadius = "50%"
-    scene.add(this)
-  }
-})
-
 
 var scene, map, controls
 
@@ -626,13 +304,14 @@ map.ui.add_tool("ortho-polyline", new OrthoPolylineTool)
 map.ui.add_tool("eraser", new EraserTool)
 map.ui.add_tool("position", new PositionTool)
 
+map.ui.placing = false
+
 $(window).resize(function(){
   scene.width = window.innerWidth/2
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
 var wall_height = 180
-var placing = false
 var line
 var shapes = new ShapeList
 var ctx = map.draw.ctx
@@ -695,7 +374,8 @@ OrthographicToolbar.add("ortho-polyline-mode", function(){
 OrthographicToolbar.add("eraser-mode", function(){
   map.ui.set_tool("eraser")
 })
-OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("ortho-polyline-mode")
+OrthographicToolbar.pick("eraser-mode")
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
@@ -749,6 +429,14 @@ function build () {
 	})
 	controls.init()
 
+  line = new Polyline ()
+  line.add( new vec2(-100,100) )
+  line.add( new vec2(100,100) )
+  line.add( new vec2(100,-100) )
+  line.add( new vec2(-100,-100) )
+  line.close()
+  line.build()
+
 	animate(0)
 }
 var last_t = 0
@@ -773,7 +461,7 @@ function animate(t){
 
   if (line) {
     line.draw(map.draw.ctx)
-    if (placing && last_point) {
+    if (map.ui.placing && last_point) {
       line.draw_line( map.draw.ctx, last_point )
     }
   }
-- 
cgit v1.2.3-70-g09d2