From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 28 Apr 2015 17:54:30 -0400
Subject: abstract out map tools

---
 public/assets/test/ortho3.html | 394 ++++++++++++++++++++++++++++++-----------
 1 file changed, 290 insertions(+), 104 deletions(-)

(limited to 'public/assets/test/ortho3.html')

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index 37bf620..a41eb8b 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -1,3 +1,4 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 <style type="text/css">
 html,body{width:100%;height:100%;margin:0;padding:0;}
 body {
@@ -14,118 +15,256 @@ body {
 	left:50%;
 	top:0px
 }
-#hud {
-	white-space: pre;
+.hud {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  background: white;
 }
+.ortho-hud {
+  left: 50%;
+  border-left: 1px solid black;
+}
+#url { width: 300px }
+.hud span { color: #888; cursor: pointer; }
+.hud span.active { color: #000; }
 </style>
 
 <div id="perspective"></div>
 <div id="orthographic"></div>
 
-<div id="hud"></div>
+<div class="hud persp-hud">
+  <input type="text" id="url" placeholder="paste an image URL here!">
+  <span class="ion-ionic active" data-role="orbit-mode"></span>
+  <span class="ion-archive" data-role="keyboard-mode"></span>
+</div>
+
+<div class="hud ortho-hud">
+  <span class="ion-navigate active" data-role="arrow-mode"></span>
+  <span class="ion-ios-pulse active" data-role="polyline-mode"></span>
+  <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span>
+</div>
 
 <script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
+<script src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script src="/assets/javascripts/vendor/polyfill.js"></script>
 <script src="/assets/javascripts/vendor/tube.js"></script>
 <script src="/assets/javascripts/mx/mx.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<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/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/util/mouse.js"></script>
 <script src="/assets/javascripts/rectangles/util/wheel.js"></script>
-<script src="/assets/javascripts/rectangles/util/coords.js"></script>
 <script src="/assets/javascripts/rectangles/models/vec2.js"></script>
 <script src="/assets/javascripts/rectangles/models/rect.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>
-Map.UI = Map.UI || {}
-Map.UI.Ortho = function(map){
+var app = window.app || {}
+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 base = this
+var MapTool = Fiber.extend(function(base){
+	var exports = {
+	  down: function(e, cursor){},
+	  move: function(e, cursor){},
+	  drag: function(e, cursor){},
+	  up: function(e, cursor, new_cursor){},
+  }
+  return exports
+})
 
-	base.creating = base.dragging = base.resizing = false
+var PositionTool = MapTool.extend(function(base){
+	var exports = {
+	  down: 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
+      map.ui.mouse.down = false
+	  },
+  }
+  return exports
+})
 
-	base.mouse = new mouse({
-		el: map.el,
-		down: function(e, cursor){
-			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)
+var PolylineTool = MapTool.extend(function (base) {
+  var exports = {}
+  exports.down = function(e, cursor){
 
-      if (e.ctrlKey || e.which === 3) {
-        if (placing) {
-          // close polyline or cancel
-          return
+    // 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()
+          line.closed = false
+        }
+        else {
+          line.reset()
         }
-        e.preventDefault()
-        e.stopPropagation()
-        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
-        base.mouse.down = false
         return
       }
+      map.ui.tools.position.down(e, cursor)
+      return
+    }
 
-			// compare to initial point
-			var p = new vec2( cursor.x.a, cursor.y.a )
-			if (placing) {
-				if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) {
-					points.push( points[0].clone() )
-					placing = false
-				}
-				else {
-					points.push( p )
-				}
-			}
-			else {
-				placing = true
-				points = []
-				points.push( p )
-			}
-		},
-		move: function(e, cursor){
-			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 )
-			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"
-			}
-		},
-		drag: function(e, cursor){
-			cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
-			cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
-		},
-		up: function(e, cursor, new_cursor){
-			new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
-			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
-		}
-	})
+    // compare to initial point
+    var p = new vec2( cursor.x.a, cursor.y.a )
+    if (placing) {
+      if (line.points.length > 2 && line.points[0].distanceTo( p ) < 10/map.zoom) {
+        line.points.push( line.points[0].clone() )
+        line.build()
+        placing = false
+      }
+      else {
+        line.add(p)
+      }
+    }
+    else {
+      placing = true
+      line = new Polyline ()
+      line.add(p)
+    }
+  }
+  exports.move = function(e, cursor){
+    last_point = new vec2( cursor.x.a, cursor.y.a )
+    if (placing && line.points.length > 1 && line.points[0].distanceTo( last_point ) < 10/map.zoom) {
+      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
+    }
+    else {
+      document.body.style.cursor = "crosshair"
+    }
+  }
+  return exports
+})
 
-	base.wheel = new wheel({
-		el: map.el,
-		update: mousewheel,
-	})
+var Polyline = Fiber.extend(function(base){
+	var exports = {}
+	
+	exports.init = function(){
+    this.points = []
+    this.mx_points = []
+    this.closed = false
+	}
 
-	function mousewheel (e, deltaY, deltaX){
-		map.set_zoom(map.zoom_exponent - deltaY/20)
+	exports.add = function(p){
+    this.points.push( p )
+    this.mx_points.push( new MX.Point(p) )
 	}
-}
+
+  exports.draw = function(ctx){
+    var points = this.points
+    if (! points.length) return
+    if (points.length == 1) {
+      ctx.fillStyle = "#f80"
+      map.draw.dot_at(this.points[0].a, points[0].b, 5)
+    }
+    if (points.length > 1) {
+      ctx.fillStyle = "rgba(255,255,0,0.1)"
+      ctx.strokeStyle = "#f80"
+      ctx.lineWidth = 2 / map.zoom
+      ctx.beginPath()
+      ctx.moveTo(points[0].a, points[0].b)
+      points.forEach(function(point, i){
+        i && ctx.lineTo(point.a, point.b)
+      })
+      ctx.stroke()
+      if (! placing || this.closed) {
+        ctx.fill()
+      }
+    }
+  }
+  exports.draw_line = function (ctx, p){
+    var last = this.points[this.points.length-1]
+    ctx.strokeStyle = "#f80"
+    ctx.lineWidth = 2 / map.zoom
+    ctx.beginPath()
+    ctx.moveTo(last.a, last.b)
+    ctx.lineTo(p.a, p.b)
+    ctx.stroke()
+  }
+  exports.build = function(){
+    this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.mx = new MX.Polyline(this)
+    this.closed = true
+    shapes.push(this)
+  }
+  exports.reset = function(){
+    this.mx_points.forEach(function(mx){ scene.remove(mx) })
+    this.points.length = 0
+    this.mx_points.length = 0
+  }
+  return exports
+})
+
+MX.Polyline = MX.Object3D.extend({
+  init: function(polyline){
+    var faces = [], points = polyline.points
+    for (var i = 1; i < points.length; i++) {
+      var head = points[i-1]
+      var tail = points[i]
+      face = this.add_face(head, tail)
+      faces.push(face)
+    }
+  },
+
+  add_face: function (head, tail){
+    var mx = new MX.Object3D()
+    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%"] + ')'
+    scene.add(mx)
+    return mx
+  }
+})
+
+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
@@ -142,43 +281,76 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-
+var wall_height = 180
 var placing = false
-var points = []
+var line
 var shapes = []
 var ctx = map.draw.ctx
 var last_point
 
-function polyline (points, finished) {
-  if (! points) return
-  if (points.length == 1) {
-    ctx.fillStyle = "#f80"
-    map.draw.dot_at(points[0].a, points[0].b, 5)
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
+
+var Toolbar = Fiber.extend(function(base){
+  var exports = {}
+  exports.init = function(rapper){
+    this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper
+    this.tools = {}
   }
-  if (points.length > 1) {
-    ctx.fillStyle = "#ff0"
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[0].a, points[0].b)
-    points.forEach(function(point, i){
-      i && ctx.lineTo(point.a, point.b)
+  exports.add = function(role, fn){
+    this.tools[role] = fn
+    $("[data-role=" + role + "]", self.rapper).click(function(){
+      $(".active", self.rapper).removeClass('active')
+      $(this).addClass('active')
+      fn()
     })
-		ctx.stroke()
-    if (! placing || finished) {
-      ctx.fill()
-    }
   }
-}
+  return exports
+})
+
+var PerspectiveToolbar = new Toolbar (".persp-hud")
+PerspectiveToolbar.add("orbit-mode", function(){
+  controls.toggle(true)
+  movements.lock()
+})
+PerspectiveToolbar.add("keyboard-mode", function(){
+  controls.toggle(false)
+  movements.unlock()
+  movements.gravity(true)
+  cam.rotationX = 0
+  cam.rotationY = -cam.rotationY
+  cam.x = 0
+  cam.y = viewHeight + 100
+  cam.z = 0
+})
+
+var OrthographicToolbar = new Toolbar (".ortho-hud")
+OrthographicToolbar.add("", function(){
+})
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.radius = 20
 
+  viewHeight = 100
+
 	scene.width = window.innerWidth/2
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
 
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
@@ -188,6 +360,17 @@ function build () {
   })
   scene.add(floorplan)
   
+  // recenter perspective view by rightclicking map
+  floorplan.el.addEventListener("contextmenu", function(e){
+    e.preventDefault()
+    var offset = offsetFromPoint(e, this)
+    var x = (offset.left - 0.5) * floorplan.width * floorplan.scale
+    var z = (offset.top - 0.5) * floorplan.height * floorplan.scale
+    controls.opt.center.x = -x
+    controls.opt.center.y = 0
+    controls.opt.center.z = -z
+  }, true)
+
 	scene.update()
 
 	controls = new MX.OrbitCamera({
@@ -201,10 +384,16 @@ function build () {
 
 	animate(0)
 }
-function animate(time){
+var last_t = 0
+function animate(t){
   requestAnimationFrame(animate)
-  map.update(time)
 
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
 	controls.update()
   scene.update()
 
@@ -215,18 +404,15 @@ function animate(time){
 
 	map.draw.coords()
 
-  polyline(points)
-  if (placing && last_point) {
-    ctx.strokeStyle = "#f80"
-    ctx.lineWidth = 2 / map.zoom
-    ctx.beginPath()
-    ctx.moveTo(points[points.length-1].a, points[points.length-1].b)
-    ctx.lineTo(last_point.a, last_point.b)
-    ctx.stroke()
+  if (line) {
+    line.draw(map.draw.ctx)
+    if (placing && last_point) {
+      line.draw_line( map.draw.ctx, last_point )
+    }
   }
 
   shapes.forEach(function(shape){
-    polyline(shape.points, true)
+    shape.draw(map.draw.ctx)
   })
 
   ctx.strokeStyle = "#f00";
-- 
cgit v1.2.3-70-g09d2