diff options
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/ui_ortho.js | 18 | ||||
| -rw-r--r-- | public/assets/test/ortho3.html | 71 |
2 files changed, 72 insertions, 17 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index 2177aaa..dab7354 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -2,40 +2,56 @@ Map.UI = Map.UI || {} Map.UI.Ortho = function(map){ var base = this + var last_event = null base.creating = base.dragging = base.resizing = false base.mouse = new mouse({ el: map.el, down: function(e, cursor){ + last_event = e 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) base.tools[currentTool].down(e, cursor) }, move: function(e, cursor){ + last_event = e 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) base.tools[currentTool].move(e, cursor) }, drag: function(e, cursor){ + last_event = e 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 base.tools[currentTool].drag(e, cursor) }, up: function(e, cursor, new_cursor){ + last_event = e 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.tools[currentTool].up(e, cursor, new_cursor) + if (nextTool) { + base.set_tool(nextTool) + nextTool = null + } } }) - var currentTool = "polyline" + var currentTool = "polyline", nextTool base.add_tool = function(name, tool){ base.tools[name] = tool } base.set_tool = function(s){ + console.log("set tool to", s) + base.tools[currentTool].cancel() currentTool = s } + base.set_drag_tool = function(s){ + nextTool = currentTool + currentTool = s + base.tools[s].down(last_event, base.mouse.cursor) + } base.tools = {} base.wheel = new wheel({ diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 86f92d8..d6241ab 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -82,6 +82,7 @@ var MapTool = Fiber.extend(function(base){ move: function(e, cursor){}, drag: function(e, cursor){}, up: function(e, cursor, new_cursor){}, + cancel: function(){}, } return exports }) @@ -89,18 +90,29 @@ var MapTool = Fiber.extend(function(base){ var ArrowTool = MapTool.extend(function(base){ var exports = {} - exports.move = function(e, cursor){ + 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 - for (var i = 0; i < shapes.length; i++) { - p = shapes[i].hasPointNear(last_point) - if (p) break; + var p = 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 = findClosestPoint(last_point) if (p) { document.body.style.cursor = "pointer" - last_point.assign(p) + last_point.assign(p.point) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b } @@ -109,6 +121,16 @@ var ArrowTool = MapTool.extend(function(base){ } } + 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 }) @@ -139,7 +161,6 @@ var PolylineTool = MapTool.extend(function (base) { placing = false if (line.points.length > 2) { line.build() - line.closed = false } else { line.reset() @@ -154,7 +175,7 @@ var PolylineTool = MapTool.extend(function (base) { var p = new vec2( cursor.x.a, cursor.y.a ) if (placing) { if (line.canCloseWith(p)) { - line.points.push( line.points[0].clone() ) + line.close() line.build() placing = false } @@ -181,14 +202,29 @@ var PolylineTool = MapTool.extend(function (base) { 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 }) +// prefer to have this on the object that keeps track of the polylines +function findClosestPoint (p){ + var point + for (var i = 0; i < shapes.length; i++) { + point = shapes[i].hasPointNear(p) + if (point) return { point: point, shape: shapes[i] } + } + return null +} + + var Polyline = Fiber.extend(function(base){ var exports = {} @@ -285,10 +321,13 @@ var Polyline = Fiber.extend(function(base){ ctx.lineTo(p.a, p.b) ctx.stroke() } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } exports.build = function(){ this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) this.mx = new MX.Polyline(this) - this.closed = true shapes.push(this) } exports.rebuild = function(){ @@ -310,17 +349,17 @@ MX.Polyline = MX.Object3D.extend({ var mx = new MX.Object3D() var head = this.points[i-1] var tail = this.points[i] - face = this.move_face(mx, head, tail) - this.faces.push(face) + this.move_face(mx, head, tail) + this.faces.push(mx) scene.add(mx) } }, rebuild: function(){ - for (var i = 1; i < points.length; i++) { + for (var i = 1; i < this.points.length; i++) { var mx = this.faces[i-1] - var head = points[i-1] - var tail = points[i] + var head = this.points[i-1] + var tail = this.points[i] this.move_face(mx, head, tail) } }, |