diff options
Diffstat (limited to 'public/assets/test/ortho3.html')
| -rw-r--r-- | public/assets/test/ortho3.html | 362 |
1 files changed, 25 insertions, 337 deletions
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 ) } } |