layout stuff

2 files changed, 268 insertions, 31 deletions

diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index ef5732c..f41a0ba 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -80,6 +80,7 @@ body {
 <script src="/assets/javascripts/rectangles/engine/map/tools/position.js"></script>
 <script src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
 <script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.js"></script>
 
 <script>
 var app = window.app || {}
@@ -112,7 +113,6 @@ $(window).resize(function(){
 })
 
 var wall_height = 180
-var line
 var shapes = new ShapeList
 var ctx = map.draw.ctx
 var last_point = new vec2 (0,0)
@@ -121,30 +121,6 @@ $("#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 = {}
-    this.els = {}
-  }
-  exports.add = function(role, fn){
-    var self = this
-    this.tools[role] = fn
-    this.els[role] = $("[data-role=" + role + "]", self.rapper)
-    this.els[role].click(function(){
-      $(".active", self.rapper).removeClass('active')
-      $(this).addClass('active')
-      fn()
-    })
-  }
-  exports.pick = function(role){
-    this.els[role].trigger("click")
-  }
-  return exports
-})
-
 var PerspectiveToolbar = new Toolbar (".persp-hud")
 PerspectiveToolbar.add("orbit-mode", function(){
   controls.toggle(true)
@@ -174,8 +150,8 @@ OrthographicToolbar.add("ortho-polyline-mode", function(){
 OrthographicToolbar.add("eraser-mode", function(){
   map.ui.set_tool("eraser")
 })
-// OrthographicToolbar.pick("ortho-polyline-mode")
-OrthographicToolbar.pick("eraser-mode")
+OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("eraser-mode")
 
 
 document.addEventListener('DOMContentLoaded', build)
@@ -230,7 +206,7 @@ function build () {
 	})
 	controls.init()
 
-  line = new Polyline ()
+  var line = new Polyline ()
   line.add( new vec2(-100,100) )
   line.add( new vec2(100,100) )
   line.add( new vec2(100,-100) )
@@ -260,10 +236,10 @@ function animate(t){
 
 	map.draw.coords()
 
-  if (line) {
-    line.draw(map.draw.ctx)
+  if (shapes.workline) {
+    shapes.workline.draw(map.draw.ctx)
     if (map.ui.placing && last_point) {
-      line.draw_line( map.draw.ctx, last_point )
+      shapes.workline.draw_line( map.draw.ctx, last_point )
     }
   }
 
diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html
new file mode 100644
index 0000000..b434efb
--- /dev/null
+++ b/public/assets/test/ortho4.html
@@ -0,0 +1,261 @@
+<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 {
+	font-family: Menlo, monospace;
+	overflow: hidden;
+}
+#perspective {
+	position: absolute;
+	left:0%;
+	top:0px
+}
+#orthographic {
+	position: absolute;
+	left:50%;
+	top:0px
+}
+.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 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" 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>
+  <span class="ion-scissors" data-role="eraser-mode"></span>
+</div>
+
+<div class="mediaDrawer fixed animate blueprintUpload">
+	<span class="close">X</span>
+	<div class="box">
+		
+    <h2>Upload A Room Image</h2>
+
+	</div>
+</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/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>
+<script src="/assets/javascripts/rectangles/util/wheel.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/engine/map/_map.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/eraser.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 src="/assets/javascripts/rectangles/engine/shapes/shapelist.js"></script>
+<script src="/assets/javascripts/rectangles/engine/shapes/polyline.js"></script>
+<script src="/assets/javascripts/ui/lib/View.js"></script>
+<script src="/assets/javascripts/ui/lib/ModalView.js"></script>
+<script src="/assets/javascripts/ui/lib/Parser.js"></script>
+<script src="/assets/javascripts/ui/lib/Toolbar.js"></script>
+
+<script>
+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 scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: -2,
+  zoom_min: -6.2,
+  zoom_max: 1,
+})
+map.ui.add_tool("arrow", new ArrowTool)
+map.ui.add_tool("polyline", new PolylineTool)
+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 shapes = new ShapeList
+var ctx = map.draw.ctx
+var last_point = new vec2 (0,0)
+
+$("#url").on("input", function(){
+  floorplan.load({ src: this.value })
+})
+
+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("arrow-mode", function(){
+  map.ui.set_tool("arrow")
+})
+OrthographicToolbar.add("polyline-mode", function(){
+  map.ui.set_tool("polyline")
+})
+OrthographicToolbar.add("ortho-polyline-mode", function(){
+  map.ui.set_tool("ortho-polyline")
+})
+OrthographicToolbar.add("eraser-mode", function(){
+  map.ui.set_tool("eraser")
+})
+OrthographicToolbar.pick("ortho-polyline-mode")
+
+
+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",
+    keepImage: true,
+    rotationX: -PI/2,
+    rotationY: PI,
+  })
+  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({
+	  el: scene.el,
+	  radius: 3000,
+	  radiusRange: [ 10, 10000 ],
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+var last_t = 0
+function animate(t){
+  requestAnimationFrame(animate)
+
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  floorplan.draw(map.draw.ctx, true)
+
+	map.draw.coords()
+
+  if (shapes.workline) {
+    shapes.workline.draw(map.draw.ctx)
+    if (map.ui.placing && last_point) {
+      shapes.workline.draw_line( map.draw.ctx, last_point )
+    }
+  }
+
+  shapes.forEach(function(shape){
+    shape.draw(map.draw.ctx)
+  })
+
+  ctx.strokeStyle = "#f00";
+  map.draw.x_at(0,0)
+	map.draw.mouse(map.ui.mouse.cursor)
+	map.draw.camera(scene.camera)
+
+	map.draw.ctx.restore()
+}
+
+</script>
\ No newline at end of file