diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-06-20 14:12:36 -0400 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-06-20 14:12:36 -0400 |
| commit | 1668d6e2e20c9bd53f3f6a299541c582da9742b4 (patch) | |
| tree | c63cd7ff9b13f4b227568131f8a4868e8802b489 | |
| parent | 3e261676b2f836d272f094e73b0b26c55ef674db (diff) | |
minimap ui
| -rw-r--r-- | public/assets/javascripts/rectangles/_env.js | 11 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/_map.js | 7 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/draw.js | 30 | ||||
| -rw-r--r-- | public/assets/javascripts/rectangles/engine/map/ui_minimap.js | 74 | ||||
| -rw-r--r-- | public/assets/javascripts/ui/editor/EditorView.js | 10 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 3 | ||||
| -rwxr-xr-x | views/editor.ejs | 10 |
7 files changed, 50 insertions, 95 deletions
diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 63d3609..1e89696 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -27,6 +27,17 @@ environment.init = function(){ scene.update() environment.update() + + var minimap_el = document.querySelector("#minimap .el") + if (minimap_el) { + window.minimap = new Map ({ + type: "minimap", + el: document.querySelector("#minimap .el"), + width: 130, + height: 130, + zoom: -4.8 + }) + } } environment.update = function(t){ map.update() diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 0623d05..d5a8442 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -9,6 +9,8 @@ var Map = function(opt){ width: window.innerWidth, height: window.innerHeight, zoom: -2, + zoom_min: -6.2, + zoom_max: 0, }) var base = this @@ -32,6 +34,7 @@ var Map = function(opt){ base.set_zoom = function (n) { + n = clamp(n, opt.zoom_min, opt.zoom_max) base.zoom_exponent = n base.zoom = pow(2, n) } @@ -45,14 +48,14 @@ var Map = function(opt){ switch (opt.type) { case "editor": - base.draw = new MapDraw (base) + base.draw = new Map.Draw (base) base.ui = new Map.UI.Editor (base) base.sides = base.sides_for_center $(window).resize(base.resize) break case "minimap": - base.draw = new MapDraw (base, { center: scene.camera }) + base.draw = new Map.Draw (base, { center: scene.camera, minimap: true }) base.ui = new Map.UI.Minimap (base) base.sides = base.sides_for_camera break diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 9a3651c..8e1fe5a 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -1,7 +1,7 @@ -var MapDraw = function(map, opt){ +Map.Draw = function(map, opt){ - opt = defaults(opt, {}) + opt = defaults(opt, { minimap: false }) var draw = this @@ -12,20 +12,28 @@ var MapDraw = function(map, opt){ draw.clear() // draw.ruler() - ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) - ctx.scale( map.zoom, map.zoom ) - if (opt.center) { + if (opt.minimap) { + ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) + ctx.scale( map.zoom, map.zoom ) ctx.translate( opt.center.x, - opt.center.z ) + ctx.scale( -1, 1 ) + + draw.coords() + draw.regions(Rooms.regions, [ "#fff" ]) + draw.camera(scene.camera) } + else { + ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) + ctx.scale( map.zoom, map.zoom ) ctx.translate( map.center.a, map.center.b ) - } - ctx.scale( -1, 1 ) + ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, colors) - draw.mouse(map.ui.mouse.cursor) - draw.coords() - scene && draw.camera(scene.camera) + draw.regions(Rooms.regions, colors) + draw.mouse(map.ui.mouse.cursor) + draw.coords() + scene && draw.camera(scene.camera) + } ctx.restore() } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js index d8f39b0..fabbdb9 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js @@ -21,11 +21,16 @@ Map.UI.Minimap = function(map){ update: mousewheel, }) + var x, z + // function down (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) + + x = scene.camera.x + z = scene.camera.z if (e.ctrlKey || e.which === 3) { cursor.quantize(1/map.zoom) @@ -39,23 +44,6 @@ Map.UI.Minimap = function(map){ e.stopPropagation() return } - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length) { - base.dragging = intersects[0] - base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) - base.dragging.rect.translation.sides = base.resizing - } - else { - base.creating = true - } - - if (e.shiftKey && base.dragging) { - base.dragging.rect.quantize(10/map.zoom) - } } function move (e, cursor) { @@ -67,24 +55,11 @@ Map.UI.Minimap = function(map){ 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 - if (base.resizing) { - var x_length = base.dragging.rect.x.length(), - y_length = base.dragging.rect.y.length() + scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16 + scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16 + Rooms.mover.room = null - if (base.resizing & LEFT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min ) - } - if (base.resizing & RIGHT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length ) - } - if (base.resizing & FRONT) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min ) - } - if (base.resizing & BACK) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length ) - } - } - else if (base.dragging) { + if (base.dragging) { base.dragging.rect.translation.a = cursor.x.magnitude() base.dragging.rect.translation.b = cursor.y.magnitude() } @@ -94,38 +69,11 @@ Map.UI.Minimap = function(map){ 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) - if (base.creating) { - if (cursor.height() > side_min && cursor.width() > side_min) { - cursor.x.abs().quantize(1) - cursor.y.abs().quantize(1) - Rooms.add_with_rect( cursor ) - } - } - - if (base.resizing) { - base.dragging.rect.resize() - } - else if (base.dragging) { - base.dragging.rect.translate() - } - - base.creating = base.dragging = base.resizing = false + base.dragging = false } function mousewheel (e, val, delta){ - var cursor = base.mouse.cursor - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length) { - intersects[0].height = clamp( ~~(intersects[0].height - delta), height_min, height_max ) - Rooms.clipper.update() - } - else { - map.set_zoom(map.zoom_exponent - delta/20) - } + map.set_zoom(map.zoom_exponent - delta/20) } function rightclick (e){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index bcd4909..b87ac83 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -29,15 +29,7 @@ var EditorView = View.extend({ ready: function(data){ $("#map").hide() - - minimap = new Map ({ - type: "minimap", - el: document.querySelector("#minimap .el"), - width: 130, - height: 130, - zoom: -4 - }) - + this.settings.load(data) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 684682c..4152a1e 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -981,6 +981,9 @@ h5 { background:white; -webkit-transform: translateY(0px); transform: translateY(0px); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } #minimap.hide{ -webkit-transform: translateY(155px); diff --git a/views/editor.ejs b/views/editor.ejs index b3c1189..a79eb9a 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -24,16 +24,6 @@ <span class="el"></span> </div> - <select id="palette"> - <option>colors</option> - <option>redblue</option> - <option>gray</option> - <option selected>bone</option> - <option>alpha</option> - <option>white</option> - <option>black</option> - </select> - <div id="hud"> <div id="map" style="display: block"> </div> |
