BlueprintEditor

1 files changed, 155 insertions, 0 deletions

diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
new file mode 100644
index 0000000..c781495
--- /dev/null
+++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js
@@ -0,0 +1,155 @@
+
+var wall_height = 180
+var shapes = new ShapeList
+var last_point = new vec2 (0,0)
+
+var BlueprintEditor = View.extend(AnimatedView.prototype).extend({
+
+  initialize: function(opt){
+    this.parent = opt.parent
+  
+    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
+      scene.height = window.innerHeight
+      map.canvas.width = map.dimensions.a = window.innerWidth/2
+      map.canvas.height = map.dimensions.b = window.innerHeight/2
+    })
+*/
+
+    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")
+  },
+  
+  animate: function(t, dt){
+    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)
+    })
+
+    map.draw.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()
+  },
+
+})
+
+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)
+}