split out mx.grid

4 files changed, 326 insertions, 2 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js
new file mode 100644
index 0000000..7a40144
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.grid.js
@@ -0,0 +1,60 @@
+MX.Grid = MX.Object3D.extend({
+  init: function (ops) {
+  
+  	this.type = "Grid"
+
+  	var ops = this.ops = defaults(ops, {
+  	  x: 0, 
+  	  y: 0,
+  	  z: 0,
+  	  space: 20,
+  	  cells: 20,
+  	})
+
+    ops.side = ops.space * ops.cells
+    
+    var ctx, canvas = document.createElement("canvas")
+    
+    this.el = canvas
+    this.width = this.height = canvas.width = canvas.height = ops.side + 4
+
+    ctx = canvas.getContext('2d')
+
+		this.x = ops.x || 0
+		this.y = ops.y || 0
+		this.z = ops.z || 0
+		this.rotationX = PI/2
+		this.scale = ops.scale || 1
+		this.backface = ops.backface || false
+			
+		ops.className && this.el.classList.add(ops.className)
+		this.backface && this.el.classList.add("backface-visible")
+		this.el.classList.add("mx-grid")
+		
+		this.draw(ctx)
+  },
+  
+  draw: function(ctx){
+    ctx = ctx || this.ctx
+    
+    var cells = this.ops.cells,
+        space = this.ops.space,
+        side = this.ops.side
+
+    ctx.strokeStyle = "#444"
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.translate(1,1)
+    for (var i = 0; i <= cells; i++) {
+      ctx.moveTo(i*space, 0)
+      ctx.lineTo(i*space, side)
+      ctx.moveTo(0, i*space)
+      ctx.lineTo(side, i*space)
+    }
+    ctx.closePath()
+    ctx.stroke()
+  },
+
+})
+
+
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
new file mode 100644
index 0000000..adff4d2
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
@@ -0,0 +1,65 @@
+Map.UI = Map.UI || {}
+Map.UI.Ortho = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	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)
+			// 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
+					add_mx_polyline(points)
+				}
+				else {
+					points.push( p )
+          mx_points.push( add_mx_point(p) )
+				}
+			}
+			else {
+				placing = true
+				points = []
+				points.push( p )
+        mx_points.push( add_mx_point(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)
+		}
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+
+	function mousewheel (e, deltaY, deltaX){
+		map.set_zoom(map.zoom_exponent - deltaY/20)
+	}
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index 0d26582..dd60a61 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -82,7 +82,7 @@ Scenery.move = function(base){
 				base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2
 				break
 		}
-		console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) )
+
 		if (editor.permissions.resize) {
 			Scenery.resize.move_dots()
 		}
@@ -105,7 +105,6 @@ Scenery.move = function(base){
 		dragging = moved = false
     oldState = null
 		document.body.classList.remove("dragging")
-
   }
 	
 	function switch_wall (e, target, cursor){
diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
new file mode 100644
index 0000000..d554a60
--- /dev/null
+++ b/public/assets/test/ortho2.html
@@ -0,0 +1,200 @@
+<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 {
+	white-space: pre;
+}
+</style>
+
+<div id="perspective"></div>
+<div id="orthographic"></div>
+
+<div id="hud"></div>
+
+<script src="/assets/javascripts/util.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/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/primitives/mx.grid.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.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/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>
+
+var scene, map, controls
+
+map = new Map ({
+	type: "ortho",
+	el: document.querySelector("#orthographic"),
+	width: window.innerWidth/2,
+	height: window.innerHeight,
+	zoom: 0,
+})
+
+var placing = false
+var points, mx_points = []
+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)
+  }
+  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)
+    })
+		ctx.stroke()
+    if (! placing || finished) {
+      ctx.fill()
+    }
+  }
+}
+
+function add_mx_polyline (points) {
+  mx_points.forEach(function(mx){ scene.remove(mx) })
+  var faces = []
+  for (var i = 1; i < points.length; i++) {
+    var head = points[i-1]
+    var tail = points[i]
+    face = add_mx_polyline_face(head, tail)
+    faces.push(face)
+  }
+  shapes.push({
+    mx: faces,
+    points: points,
+  })
+  points = []
+}
+function add_mx_polyline_face(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: 25 + 1,
+    z: mid_z / 2,
+    width: ceil(len),
+    height: 50,
+    rotationY: angle
+  })
+  var hue = abs(round( angle / PI * 90 + 300))
+  mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')'
+  scene.add(mx)
+  return mx
+}
+function add_mx_point (p, i) {
+	var mx = new MX.Object3D()
+	mx.updateChildren = false
+	mx.move({
+		x: p.a,
+		y: 11,
+		z: p.b,
+		width: 20,
+		height: 20,
+	})
+	mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')'
+	mx.el.style.backfaceVisibility = "visible"
+	scene.add(mx)
+	return mx
+}
+
+document.addEventListener('DOMContentLoaded', build)
+function build () {
+	scene = new MX.Scene().addTo("#perspective")
+	scene.camera.radius = 20
+
+	scene.width = window.innerWidth/2
+	scene.height = window.innerHeight
+	scene.perspective = window.innerHeight
+
+  grid = new MX.Grid()
+  scene.add(grid)
+  
+	scene.update()
+
+	controls = new MX.OrbitCamera({
+	  el: scene.el,
+	  radius: 1000,
+	  rotationX: PI/4,
+	  rotationY: PI/2,
+	})
+	controls.init()
+
+	animate(0)
+}
+function animate(time){
+  requestAnimationFrame(animate)
+  map.update(time)
+
+	controls.update()
+  scene.update()
+
+	map.draw.ctx.save()
+	map.draw.translate()
+
+  map.draw.ctx.save()
+  map.draw.ctx.translate(-(20*20)/2, -(20*20)/2)
+  grid.draw(map.draw.ctx, 20, 20)
+  map.draw.ctx.restore()
+
+	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()
+  }
+
+  shapes.forEach(function(shape){
+    polyline(shape.points, true)
+  })
+
+  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