summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Gruntfile.js8
-rw-r--r--public/assets/javascripts/mx/primitives/mx.point.js17
-rw-r--r--public/assets/javascripts/mx/primitives/mx.polyline.js48
-rw-r--r--public/assets/javascripts/rectangles/engine/map/tools/_base.js11
-rw-r--r--public/assets/javascripts/rectangles/engine/map/tools/arrow.js46
-rw-r--r--public/assets/javascripts/rectangles/engine/map/tools/ortho.js115
-rw-r--r--public/assets/javascripts/rectangles/engine/map/tools/polyline.js69
-rw-r--r--public/assets/javascripts/rectangles/engine/map/tools/position.js17
-rw-r--r--public/assets/javascripts/rectangles/engine/map/ui/editor.js (renamed from public/assets/javascripts/rectangles/engine/map/ui_editor.js)0
-rw-r--r--public/assets/javascripts/rectangles/engine/map/ui/minimap.js (renamed from public/assets/javascripts/rectangles/engine/map/ui_minimap.js)0
-rw-r--r--public/assets/javascripts/rectangles/engine/map/ui/ortho.js (renamed from public/assets/javascripts/rectangles/engine/map/ui_ortho.js)0
-rw-r--r--public/assets/test/ortho3.html362
-rw-r--r--views/partials/scripts.ejs4
13 files changed, 354 insertions, 343 deletions
diff --git a/Gruntfile.js b/Gruntfile.js
index a0f4d83..233c7ff 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -85,8 +85,8 @@ module.exports = function(grunt) {
"public/assets/javascripts/rectangles/engine/sculpture/types/image.js",
"public/assets/javascripts/rectangles/engine/map/_map.js",
- "public/assets/javascripts/rectangles/engine/map/ui_editor.js",
- "public/assets/javascripts/rectangles/engine/map/ui_minimap.js",
+ "public/assets/javascripts/rectangles/engine/map/ui/editor.js",
+ "public/assets/javascripts/rectangles/engine/map/ui/minimap.js",
"public/assets/javascripts/rectangles/engine/map/draw.js",
"public/assets/javascripts/ui/lib/View.js",
@@ -228,8 +228,8 @@ module.exports = function(grunt) {
"public/assets/javascripts/rectangles/engine/sculpture/types/image.js",
"public/assets/javascripts/rectangles/engine/map/_map.js",
- "public/assets/javascripts/rectangles/engine/map/ui_editor.js",
- "public/assets/javascripts/rectangles/engine/map/ui_minimap.js",
+ "public/assets/javascripts/rectangles/engine/map/ui/editor.js",
+ "public/assets/javascripts/rectangles/engine/map/ui/minimap.js",
"public/assets/javascripts/rectangles/engine/map/draw.js",
"public/assets/javascripts/ui/lib/View.js",
diff --git a/public/assets/javascripts/mx/primitives/mx.point.js b/public/assets/javascripts/mx/primitives/mx.point.js
new file mode 100644
index 0000000..41a7732
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.point.js
@@ -0,0 +1,17 @@
+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)
+ }
+})
diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js
new file mode 100644
index 0000000..555b3c6
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.polyline.js
@@ -0,0 +1,48 @@
+MX.Polyline = MX.Object3D.extend({
+ init: function(polyline){
+ this.faces = []
+ this.points = polyline.points
+ for (var i = 1; i < this.points.length; i++) {
+ var mx = new MX.Object3D()
+ var head = this.points[i-1]
+ var tail = this.points[i]
+ this.move_face(mx, head, tail)
+ this.faces.push(mx)
+ scene.add(mx)
+ }
+ },
+
+ rebuild: function(){
+ for (var i = 1; i < this.points.length; i++) {
+ var mx = this.faces[i-1]
+ var head = this.points[i-1]
+ var tail = this.points[i]
+ this.move_face(mx, head, tail)
+ }
+ },
+
+ move_face: function (mx, head, tail){
+ 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%"] + ')'
+ },
+
+ destroy: function(){
+ this.faces.forEach(function(mx){
+ scene.remove(mx)
+ })
+ this.faces = null
+ this.points = null
+ },
+})
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/_base.js b/public/assets/javascripts/rectangles/engine/map/tools/_base.js
new file mode 100644
index 0000000..17b247d
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/_base.js
@@ -0,0 +1,11 @@
+var MapTool = Fiber.extend(function(base){
+ var exports = {
+ recenterCursor: true,
+ down: function(e, cursor){},
+ move: function(e, cursor){},
+ drag: function(e, cursor){},
+ up: function(e, cursor, new_cursor){},
+ cancel: function(){},
+ }
+ return exports
+}) \ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js
new file mode 100644
index 0000000..2a73954
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js
@@ -0,0 +1,46 @@
+var ArrowTool = MapTool.extend(function(base){
+ var exports = {}
+
+ var selected_point = null, original_point = null, selected_shape = null
+
+ exports.down = function(e, cursor){
+ last_point.a = cursor.x.a
+ last_point.b = cursor.y.a
+ var p = shapes.findClosestPoint(last_point)
+ if (p) {
+ selected_shape = p.shape
+ selected_point = p.point
+ original_point = selected_point.clone()
+ }
+ else {
+ map.ui.set_drag_tool("position")
+ }
+ }
+
+ exports.move = function(e, cursor){
+ last_point.a = cursor.x.a
+ last_point.b = cursor.y.a
+ var p = shapes.findClosestPoint(last_point)
+ if (p) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(p.point)
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b = last_point.b
+ }
+ else {
+ document.body.style.cursor = "crosshair"
+ }
+ }
+
+ exports.drag = function(e, cursor){
+ selected_point.a = original_point.a + cursor.x.magnitude()
+ selected_point.b = original_point.b + cursor.y.magnitude()
+ selected_shape.rebuild()
+ }
+
+ exports.up = function(e, cursor){
+ selected_point = selected_shape = original_point = null
+ }
+
+ return exports
+}) \ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
new file mode 100644
index 0000000..be3d707
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js
@@ -0,0 +1,115 @@
+var OrthoPolylineTool = MapTool.extend(function (base) {
+ // this will work like normal polyline except all walls will be orthogonal
+
+ var prev_point, horizontal = false, first_edge_is_horizontal = false
+
+ var exports = {}
+ exports.down = function(e, cursor){
+ // rightclick?
+ if (e.ctrlKey || e.which === 3) {
+ e.preventDefault()
+ e.stopPropagation()
+ if (map.ui.placing) {
+ // close polyline or cancel
+ map.ui.placing = false
+ if (line.points.length > 2) {
+ line.build()
+ }
+ else {
+ line.reset()
+ }
+ return
+ }
+ else {
+ map.ui.tools.position.rightclick(e, cursor)
+ }
+ return
+ }
+
+ // compare to initial point
+ var p = last_point.clone()
+ if (map.ui.placing) {
+ if (line.lastPoint().eq(p)) {
+ return
+ }
+ else if (line.canCloseWith(p)) {
+ line.close()
+ line.build()
+ map.ui.placing = false
+ }
+ else {
+ line.add(p)
+ prev_point = p
+ horizontal = ! horizontal
+ }
+ }
+ else {
+ map.ui.placing = true
+ line = new Polyline ()
+ line.add(p)
+ first_point = prev_point = p
+ horizontal = false
+ }
+ }
+ exports.move = function(e, cursor){
+ last_point.a = cursor.x.a
+ last_point.b = cursor.y.a
+ if (map.ui.placing) {
+ if (line.points.length == 1) {
+ var x = abs(prev_point.a - last_point.a)
+ var y = abs(prev_point.b - last_point.b)
+ if (x > y) {
+ last_point.b = prev_point.b
+ first_edge_is_horizontal = horizontal = true
+ }
+ else {
+ last_point.a = prev_point.a
+ first_edge_is_horizontal = horizontal = false
+ }
+ }
+ else {
+ if (horizontal) {
+ last_point.b = prev_point.b
+ }
+ else {
+ last_point.a = prev_point.a
+ }
+ if (horizontal == first_edge_is_horizontal) {
+ // check if this point is within N pixels of the normal
+ // and lock it into place if so
+ if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
+ last_point.a = first_point.a
+ }
+ else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
+ last_point.b = first_point.b
+ }
+ }
+ }
+
+ if (line.canCloseWith(last_point)) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(first_point)
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b = last_point.b
+ }
+ return
+ }
+ var end_point = shapes.findClosestEndPoint(last_point)
+ if (end_point) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(end_point.point)
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b = last_point.b
+ return
+ }
+ else {
+ document.body.style.cursor = "crosshair"
+ }
+ }
+ exports.cancel = function(){
+ if (map.ui.placing) { line.reset() }
+ first_point = null
+ map.ui.placing = false
+ }
+ return exports
+}) \ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
new file mode 100644
index 0000000..559aea8
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js
@@ -0,0 +1,69 @@
+var PolylineTool = MapTool.extend(function (base) {
+ var exports = {}
+ exports.down = function(e, cursor){
+
+ // rightclick?
+ if (e.ctrlKey || e.which === 3) {
+ e.preventDefault()
+ e.stopPropagation()
+ if (map.ui.placing) {
+ // close polyline or cancel
+ map.ui.placing = false
+ if (line.points.length > 2) {
+ line.build()
+ }
+ else {
+ line.reset()
+ }
+ return
+ }
+ map.ui.tools.position.rightclick(e, cursor)
+ return
+ }
+
+ // compare to initial point
+ var p = last_point.clone()
+ if (map.ui.placing) {
+ if (line.canCloseWith(p)) {
+ line.close()
+ line.build()
+ map.ui.placing = false
+ }
+ else {
+ line.add(p)
+ }
+ }
+ else {
+ map.ui.placing = true
+ line = new Polyline ()
+ line.add(p)
+ }
+ }
+ exports.move = function(e, cursor){
+ last_point.a = cursor.x.a
+ last_point.b = cursor.y.a
+ if (map.ui.placing && line.canCloseWith(last_point)) {
+ 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
+ return
+ }
+ var end_point = shapes.findClosestEndPoint(last_point)
+ if (end_point) {
+ document.body.style.cursor = "pointer"
+ last_point.assign(end_point.point)
+ cursor.x.a = cursor.x.b = last_point.a
+ cursor.y.a = cursor.y.b = last_point.b
+ return
+ }
+ else {
+ document.body.style.cursor = "crosshair"
+ }
+ }
+ exports.cancel = function(){
+ if (map.ui.placing) { line.reset() }
+ map.ui.placing = false
+ }
+ return exports
+}) \ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js
new file mode 100644
index 0000000..a994f5a
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js
@@ -0,0 +1,17 @@
+var PositionTool = MapTool.extend(function(base){
+ var exports = {
+ recenterCursor: false,
+ drag: function(e, cursor){
+ map.center.a = -cursor.x.magnitude()
+ map.center.b = cursor.y.magnitude()
+ },
+ rightclick: 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
+ }
+ }
+ return exports
+}) \ No newline at end of file
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js
index 7308344..7308344 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js
index 0fdd336..0fdd336 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
index 52f7339..52f7339 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js
diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html
index fa7e3c5..7e7e8ec 100644
--- a/public/assets/test/ortho3.html
+++ b/public/assets/test/ortho3.html
@@ -61,6 +61,8 @@ body {
<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>
@@ -68,8 +70,13 @@ body {
<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/ui_ortho.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/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>
var app = window.app || {}
@@ -77,274 +84,13 @@ 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 MapTool = Fiber.extend(function(base){
- var exports = {
- recenterCursor: true,
- down: function(e, cursor){},
- move: function(e, cursor){},
- drag: function(e, cursor){},
- up: function(e, cursor, new_cursor){},
- cancel: function(){},
- }
- return exports
-})
-
-var ArrowTool = MapTool.extend(function(base){
+var EraserTool = MapTool.extend(function(base){
var exports = {}
-
- var selected_point = null, original_point = null, selected_shape = null
-
exports.down = function(e, cursor){
- last_point.a = cursor.x.a
- last_point.b = cursor.y.a
- var p = shapes.findClosestPoint(last_point)
- if (p) {
- selected_shape = p.shape
- selected_point = p.point
- original_point = selected_point.clone()
- }
- else {
- map.ui.set_drag_tool("position")
- }
- }
-
- exports.move = function(e, cursor){
- last_point.a = cursor.x.a
- last_point.b = cursor.y.a
- var p = shapes.findClosestPoint(last_point)
- if (p) {
- document.body.style.cursor = "pointer"
- last_point.assign(p.point)
- cursor.x.a = cursor.x.b = last_point.a
- cursor.y.a = cursor.y.b = last_point.b
- }
- else {
- document.body.style.cursor = "crosshair"
- }
- }
-
- exports.drag = function(e, cursor){
- selected_point.a = original_point.a + cursor.x.magnitude()
- selected_point.b = original_point.b + cursor.y.magnitude()
- selected_shape.rebuild()
- }
-
- exports.up = function(e, cursor){
- selected_point = selected_shape = original_point = null
- }
-
- return exports
-})
-
-var PositionTool = MapTool.extend(function(base){
- var exports = {
- recenterCursor: false,
- drag: function(e, cursor){
- map.center.a = -cursor.x.magnitude()
- map.center.b = cursor.y.magnitude()
- },
- rightclick: 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
- }
- }
- return exports
-})
-
-var PolylineTool = MapTool.extend(function (base) {
- var exports = {}
- exports.down = function(e, cursor){
-
- // 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()
- }
- else {
- line.reset()
- }
- return
- }
- map.ui.tools.position.rightclick(e, cursor)
- return
- }
-
- // compare to initial point
- var p = last_point.clone()
- if (placing) {
- if (line.canCloseWith(p)) {
- line.close()
- line.build()
- placing = false
- }
- else {
- line.add(p)
- }
- }
- else {
- placing = true
- line = new Polyline ()
- line.add(p)
- }
}
exports.move = function(e, cursor){
last_point.a = cursor.x.a
last_point.b = cursor.y.a
- if (placing && line.canCloseWith(last_point)) {
- 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
- return
- }
- var end_point = shapes.findClosestEndPoint(last_point)
- if (end_point) {
- document.body.style.cursor = "pointer"
- last_point.assign(end_point.point)
- cursor.x.a = cursor.x.b = last_point.a
- cursor.y.a = cursor.y.b = last_point.b
- return
- }
- else {
- document.body.style.cursor = "crosshair"
- }
- }
- exports.cancel = function(){
- if (placing) { line.reset() }
- placing = false
- }
- return exports
-})
-
-var OrthoPolylineTool = MapTool.extend(function (base) {
- // this will work like normal polyline except all walls will be orthogonal
-
- var prev_point, horizontal = false, first_edge_is_horizontal = false
-
- var exports = {}
- exports.down = function(e, cursor){
- // 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()
- }
- else {
- line.reset()
- }
- return
- }
- else {
- map.ui.tools.position.rightclick(e, cursor)
- }
- return
- }
-
- // compare to initial point
- var p = last_point.clone()
- if (placing) {
- if (line.lastPoint().eq(p)) {
- return
- }
- else if (line.canCloseWith(p)) {
- line.close()
- line.build()
- placing = false
- }
- else {
- line.add(p)
- prev_point = p
- horizontal = ! horizontal
- }
- }
- else {
- placing = true
- line = new Polyline ()
- line.add(p)
- first_point = prev_point = p
- horizontal = false
- }
- }
- exports.move = function(e, cursor){
- last_point.a = cursor.x.a
- last_point.b = cursor.y.a
- if (placing) {
- if (line.points.length == 1) {
- var x = abs(prev_point.a - last_point.a)
- var y = abs(prev_point.b - last_point.b)
- if (x > y) {
- last_point.b = prev_point.b
- first_edge_is_horizontal = horizontal = true
- }
- else {
- last_point.a = prev_point.a
- first_edge_is_horizontal = horizontal = false
- }
- }
- else {
- if (horizontal) {
- last_point.b = prev_point.b
- }
- else {
- last_point.a = prev_point.a
- }
- if (horizontal == first_edge_is_horizontal) {
- // check if this point is within N pixels of the normal
- // and lock it into place if so
- if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) {
- last_point.a = first_point.a
- }
- else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) {
- last_point.b = first_point.b
- }
- }
- }
-
- if (line.canCloseWith(last_point)) {
- document.body.style.cursor = "pointer"
- last_point.assign(first_point)
- cursor.x.a = cursor.x.b = last_point.a
- cursor.y.a = cursor.y.b = last_point.b
- }
- return
- }
- var end_point = shapes.findClosestEndPoint(last_point)
- if (end_point) {
- document.body.style.cursor = "pointer"
- last_point.assign(end_point.point)
- cursor.x.a = cursor.x.b = last_point.a
- cursor.y.a = cursor.y.b = last_point.b
- return
- }
- else {
- document.body.style.cursor = "crosshair"
- }
- }
- exports.cancel = function(){
- if (placing) { line.reset() }
- first_point = null
- placing = false
- }
- return exports
-})
-
-var EraserTool = MapTool.extend(function(base){
- var exports = {}
- exports.down = function(e, cursor){
- }
- exports.move = function(e, cursor){
var segment = shapes.findClosestSegment(last_point)
if (segment) {
document.body.style.cursor = "pointer"
@@ -463,8 +209,8 @@ var Polyline = Fiber.extend(function(base){
for (var i = 1; i < points.length; i++) {
p1 = p2
p2 = points[i]
- d1 = p1.a - p2.a
- d2 = p1.b - p2.b
+ d1 = p2.a - p1.a
+ d2 = p2.b - p1.b
sum = d1*d1 + d2*d2
rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum
rat = rat < 0 ? 0 : rat < 1 ? rat : 1
@@ -506,7 +252,7 @@ var Polyline = Fiber.extend(function(base){
i && ctx.lineTo(point.a, point.b)
})
ctx.stroke()
- if (! placing || this.closed) {
+ if (! map.ui.placing || this.closed) {
ctx.fill()
}
}
@@ -540,74 +286,6 @@ var Polyline = Fiber.extend(function(base){
return exports
})
-MX.Polyline = MX.Object3D.extend({
- init: function(polyline){
- this.faces = []
- this.points = polyline.points
- for (var i = 1; i < this.points.length; i++) {
- var mx = new MX.Object3D()
- var head = this.points[i-1]
- var tail = this.points[i]
- this.move_face(mx, head, tail)
- this.faces.push(mx)
- scene.add(mx)
- }
- },
-
- rebuild: function(){
- for (var i = 1; i < this.points.length; i++) {
- var mx = this.faces[i-1]
- var head = this.points[i-1]
- var tail = this.points[i]
- this.move_face(mx, head, tail)
- }
- },
-
- move_face: function (mx, head, tail){
- 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%"] + ')'
- },
-
- destroy: function(){
- this.faces.forEach(function(mx){
- scene.remove(mx)
- })
- this.faces = null
- this.points = null
- },
-
-})
-
-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
@@ -626,13 +304,14 @@ 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 placing = false
var line
var shapes = new ShapeList
var ctx = map.draw.ctx
@@ -695,7 +374,8 @@ OrthographicToolbar.add("ortho-polyline-mode", function(){
OrthographicToolbar.add("eraser-mode", function(){
map.ui.set_tool("eraser")
})
-OrthographicToolbar.pick("ortho-polyline-mode")
+// OrthographicToolbar.pick("ortho-polyline-mode")
+OrthographicToolbar.pick("eraser-mode")
document.addEventListener('DOMContentLoaded', build)
function build () {
@@ -749,6 +429,14 @@ function build () {
})
controls.init()
+ line = new Polyline ()
+ line.add( new vec2(-100,100) )
+ line.add( new vec2(100,100) )
+ line.add( new vec2(100,-100) )
+ line.add( new vec2(-100,-100) )
+ line.close()
+ line.build()
+
animate(0)
}
var last_t = 0
@@ -773,7 +461,7 @@ function animate(t){
if (line) {
line.draw(map.draw.ctx)
- if (placing && last_point) {
+ if (map.ui.placing && last_point) {
line.draw_line( map.draw.ctx, last_point )
}
}
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 6dfe912..2de32fb 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -80,8 +80,8 @@
<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script>
<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_editor.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_minimap.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui/editor.js"></script>
+<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui/minimap.js"></script>
<script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
<script type="text/javascript" src="/assets/javascripts/ui/lib/View.js"></script>