1 files changed, 77 insertions, 0 deletions
diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html
new file mode 100644
index 0000000..85e3a7b
--- /dev/null
+++ b/public/assets/test/surface.html
@@ -0,0 +1,77 @@
+<canvas id="canvas"></canvas>
+
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/tube.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/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/surface.js"></script>
+<script>
+
+var ctx = canvas.getContext('2d')
+
+var w = canvas.width = 600
+var h = canvas.height = 400
+
+var surface = new Surface ()
+surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
+surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
+surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) )
+surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) )
+
+var position = new vec2( 40, 40 )
+var dimension = new vec2( 50, 80 )
+var bounds = surface.bounds_at_index_with_dimensions(0, dimension)
+
+var delta = new vec2( 0, 0 )
+
+var dragging = false
+
+var mymouse = new mouse({
+  el: canvas,
+  down: function(e, cursor){
+  console.log(cursor.x.a, cursor.y.a)
+    if (-cursor.x.a > position.a && -cursor.x.a < position.a + dimension.a &&
+         cursor.y.a > position.b && cursor.y.a < position.b + dimension.b) {
+      dragging = true
+    }
+  },
+  drag: function(e, cursor){
+    if (! dragging) return
+    delta = cursor.delta()
+    delta.a = - delta.a
+    var new_bounds = surface.translate(bounds, dimension, position, delta)
+    bounds = new_bounds || bounds
+  },
+  up: function(e, cursor, new_cursor){
+    position.a += delta.a
+    position.b += delta.b
+    delta.zero()
+    dragging = false
+  },
+})
+
+
+var colors = ["#ddd", "#eee"]
+
+function draw(){
+  ctx.clearRect(0,0,w,h)
+  surface.faces.forEach(function(face, i){
+    ctx.fillStyle = colors[i % colors.length]
+    ctx.fillRect(face.x.a, face.y.a, face.width(), face.height())
+  })
+  ctx.fillStyle = "rgba(255,0,0,0.1)"
+  ctx.fillRect(bounds.x.a, bounds.y.a, bounds.width(), bounds.height())
+  
+  ctx.fillStyle = dragging ? "#ff0" : "#00f"
+  ctx.fillRect(position.a + delta.a, position.b + delta.b, dimension.a, dimension.b)
+}
+
+function animate(){
+  requestAnimationFrame(animate)
+  draw()
+}
+animate()
+
+</script>