From 9fb0fe9b7ef614d2248b00ea2b964205f3453f41 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 10 Jun 2014 12:00:24 -0400 Subject: split up builder functionality --- public/assets/stylesheets/app.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e5666ca..1ad2409 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -372,6 +372,8 @@ h5{ } .topLinks { float: right; + z-index: 3; + position: relative; font-size: 18px; padding: 8px; margin: 14px; @@ -384,7 +386,7 @@ h5{ color: black; font-weight: 300; text-decoration: none; - border-bottom:1px solid white; + border-bottom:1px solid transparent; } .topLinks a:hover { border-bottom:1px solid lightgreen; @@ -533,7 +535,7 @@ h5{ backface-visibility: visible; } #hud { - position: absolute; + position: fixed; top:0;left:0; z-index: 2; } -- cgit v1.2.3-70-g09d2 From a91321725a3a2db451055ee7d5e4a40576b83c5c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 10 Jun 2014 13:37:27 -0400 Subject: rename map stuff so we can use alternate drawing ui --- public/assets/javascripts/rectangles/_env.js | 4 ++- .../javascripts/rectangles/engine/map/_map.js | 5 +++- .../javascripts/rectangles/engine/map/draw.js | 30 +++++++++++----------- .../assets/javascripts/rectangles/engine/map/ui.js | 2 +- public/assets/stylesheets/app.css | 4 +-- 5 files changed, 25 insertions(+), 20 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 09d1532..334e461 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -1,6 +1,8 @@ - var environment = new function(){} environment.init = function(){ + + map = new Map () + if (window.scene) { scene.camera.move({ "x": 0, diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index b62a813..855ca5d 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -3,7 +3,7 @@ window.ctx = window.w = window.h = null; -var map = new function(){ +var Map = function(){ var base = this base.el = document.querySelector("#map") @@ -31,6 +31,9 @@ var map = new function(){ var w = window.w = canvas.width = base.dimensions.a var h = window.h = canvas.height = base.dimensions.b document.querySelector("#map").appendChild(canvas) + + base.draw = new MapDraw (base) + base.ui = new MapUI (base) base.update = function(){ base.draw.animate() diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index ec60d31..f4cb1d2 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -1,33 +1,33 @@ -map.draw = new function(){ +var MapDraw = function(map){ - var base = this + var draw = this - base.animate = function(){ + draw.animate = function(){ ctx.save() - map.draw.clear_canvas() - map.draw.ruler() + draw.clear_canvas() + draw.ruler() ctx.translate( map.bounds.a * 1/2, map.bounds.b * 1/2) ctx.scale( map.zoom, map.zoom ) ctx.translate( map.center.a, map.center.b) ctx.scale( -1, 1 ) - map.draw.regions(Rooms.regions) - map.draw.mouse(map.ui.mouse.cursor) - map.draw.coords() - scene && map.draw.camera(scene.camera) + draw.regions(Rooms.regions) + draw.mouse(map.ui.mouse.cursor) + draw.coords() + scene && draw.camera(scene.camera) ctx.restore() } - base.clear_canvas = function(){ + draw.clear_canvas = function(){ ctx.fillStyle = "rgba(255,255,255,0.9)" ctx.clearRect(0,0,w,h) ctx.fillRect(0,0,w,h) } - base.ruler = function (){ + draw.ruler = function (){ ctx.strokeStyle = "rgba(80,80,80,0.5)" ctx.lineWidth = 1 var len = 5 @@ -37,7 +37,7 @@ map.draw = new function(){ } } - base.regions = function(regions){ + draw.regions = function(regions){ for (var i = 0; i < regions.length; i++) { if (regions[i].dupe) continue ctx.fillStyle = colors[i % colors.length] @@ -46,7 +46,7 @@ map.draw = new function(){ } } - base.mouse = function(mouse){ + draw.mouse = function(mouse){ var radius = 3 / map.zoom ctx.fillStyle = "rgba(255,0,0,0.4)"; @@ -65,7 +65,7 @@ map.draw = new function(){ } } - base.camera = function(cam){ + draw.camera = function(cam){ ctx.lineWidth = 0.5 ctx.save() @@ -88,7 +88,7 @@ map.draw = new function(){ ctx.restore() } - base.coords = function(){ + draw.coords = function(){ ctx.fillStyle = "#888"; dot_at(0,0) ctx.fillStyle = "#bbb"; diff --git a/public/assets/javascripts/rectangles/engine/map/ui.js b/public/assets/javascripts/rectangles/engine/map/ui.js index 6e9a5ab..63e8e18 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui.js +++ b/public/assets/javascripts/rectangles/engine/map/ui.js @@ -1,5 +1,5 @@ -map.ui = new function(){ +var MapUI = function(map){ var base = this diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1ad2409..fdec567 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -649,13 +649,13 @@ h5{ cursor:pointer; } -.menu span.icon-close{ +.menu span.inuse { color:white; background:black; cursor:pointer; } -.icon-close:before { +.menu span.inuse:before { content: "\e736"!important; } -- cgit v1.2.3-70-g09d2 From a5ba8d536afe5c96c6e01763296de2a407f81aa8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 10 Jun 2014 15:45:32 -0400 Subject: switch to using a lookup for rooms --- public/assets/javascripts/mx/mx.js | 2 +- .../javascripts/mx/primitives/mx.boxDimensions.js | 2 +- .../javascripts/mx/primitives/mx.scaleBox.js | 2 +- public/assets/javascripts/rectangles/_env.js | 6 ++--- .../javascripts/rectangles/engine/rooms/_rooms.js | 30 ++++++++++++++++------ .../javascripts/rectangles/engine/rooms/clipper.js | 8 +++--- .../assets/javascripts/rectangles/models/room.js | 2 +- public/assets/stylesheets/app.css | 4 +-- views/controls/builder/toolbar.ejs | 18 +++++++------ 9 files changed, 45 insertions(+), 29 deletions(-) (limited to 'public/assets/stylesheets/app.css') diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index df9abe7..496aec0 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -472,7 +472,7 @@ var MX = MX || (function (undefined) { }, __toString: function(params, func){ - this.id = this.id || guid() + this.id = this.id || _.uniqueId() var list = [], obj = {}, type = this.type || "Object3d", diff --git a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js index f3edb13..1d457ae 100644 --- a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js +++ b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js @@ -7,7 +7,7 @@ MX.BoxDimensions = MX.Object3D.extend({ this.type = "BoxDimensions" - var id = this.id = opt.id || guid() + var id = this.id = opt.id || _.uniqueId() this.x = opt.x || 0 this.y = opt.y || 0 this.z = opt.z || 0 diff --git a/public/assets/javascripts/mx/primitives/mx.scaleBox.js b/public/assets/javascripts/mx/primitives/mx.scaleBox.js index 77f45e9..f635345 100644 --- a/public/assets/javascripts/mx/primitives/mx.scaleBox.js +++ b/public/assets/javascripts/mx/primitives/mx.scaleBox.js @@ -7,7 +7,7 @@ MX.ScaleBox = MX.Object3D.extend({ this.type = "ScaleBox" - var id = this.id = opt.id || guid() + var id = this.id = opt.id || _.uniqueId() this.x = opt.x || 0 this.y = opt.y || 0 this.z = opt.z || 0 diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 334e461..86aebdc 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -22,15 +22,15 @@ environment.init = function(){ map.center.a = 0 map.center.b = 0 - Rooms.list.push( new Room ({ + Rooms.add( new Room ({ rect: new Rect(-500,-500, 500,500), height: 500, })) - Rooms.list.push( new Room ({ + Rooms.add( new Room ({ rect: new Rect(600,0, 1100,500), height: 500, })) - Rooms.list.push( new Room ({ + Rooms.add( new Room ({ rect: new Rect(450,150, 650,350), height: 300, })) diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 411a093..efde370 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -2,7 +2,7 @@ var Rooms = new function(){ var base = this - base.list = [] + base.list = {} base.regions = [] base.init = function(){ @@ -12,30 +12,44 @@ var Rooms = new function(){ } base.filter = function(f){ - return base.list.filter(f) + return _.values(base.list).filter(f) + } + + base.add = function(room){ + base.list[room.id] = room } base.add_with_rect = function(rect){ var room = new Room({ - id: base.list.length, rect: rect, height: quantize(randrange(300,800), 50), }) - base.list.push(room) + base.add(room) + } + + base.remove = function(room){ + delete base.list[room.id] + } + + base.count = function(){ + return this.values().length } base.forEach = function(f){ - return base.list.forEach(f) + return base.values().forEach(f) + } + base.values = function(){ + return _.values(base.list) } base.sorted_by_position = function(){ - return sort_rooms_by_position( base.list ) + return sort_rooms_by_position( base.values() ) } base.sorted_by_height = function(){ - return sort_rooms_by_height( base.list ) + return sort_rooms_by_height( base.values() ) } base.sorted_by_area = function(){ - return sort_rooms_by_area( base.list ) + return sort_rooms_by_area( base.values() ) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js index 8989ba8..0854013 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js +++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js @@ -20,7 +20,7 @@ Rooms.clipper = new function(){ // Given a set of overlapping rooms, clip any intersections, then cull any duplicate polygons base.solve_rects = function(){ - if (Rooms.list.length == 0) return + if (Rooms.count() == 0) return base.reset_rects() base.clip_rects() @@ -31,9 +31,9 @@ Rooms.clipper = new function(){ // Reset the clipping/culling states of each of the rooms base.reset_rects = function(){ - for (var i = 0; i < Rooms.list.length; i++) { - Rooms.list[i].reset() - } + Rooms.forEach(function(room){ + room.reset() + }) } // Compare each room to the rooms it overlaps, and subdivide diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 731411c..256889d 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -1,7 +1,7 @@ window.Room = (function(){ var Room = function(opt){ - this.id = opt.id || Rooms.list.length + this.id = opt.id || _.uniqueId("room") this.rect = opt.rect this.regions = [] this.walls = [] diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index fdec567..55e8d37 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -656,7 +656,7 @@ h5{ } .menu span.inuse:before { -content: "\e736"!important; + content: "\e736" !important; } .menu span:hover:after{ @@ -673,7 +673,7 @@ content: "\e736"!important; font-size: 13px; } -.menu span.icon-close:hover:after{ +.menu span.inuse:hover:after{ content:""; opacity:0; } diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs index 400a008..cb6dd60 100644 --- a/views/controls/builder/toolbar.ejs +++ b/views/controls/builder/toolbar.ejs @@ -2,26 +2,28 @@ - - + +