From c60434bc4655d0e020ca75fc7c5fddf53ac58ede Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 18:29:08 -0400 Subject: invert logo if background is dark, match body bg to wall color --- public/assets/javascripts/rectangles/engine/map/ui_minimap.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js index fabbdb9..d7280b9 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js @@ -7,6 +7,7 @@ Map.UI.Minimap = function(map){ base.creating = base.dragging = base.resizing = false +/* base.mouse = new mouse({ el: map.el, down: down, @@ -15,6 +16,7 @@ Map.UI.Minimap = function(map){ up: up, rightclick: rightclick, }) +*/ base.wheel = new wheel({ el: map.el, -- cgit v1.2.3-70-g09d2 From 1f66850f5ec5a2e664ee8eaafbe25c46dad34102 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 12:11:18 -0400 Subject: generate masks for thumbnails --- .../javascripts/rectangles/engine/map/draw.js | 64 ++++++++++++++-------- .../javascripts/rectangles/engine/rooms/_walls.js | 4 ++ .../assets/javascripts/rectangles/models/wall.js | 2 +- .../javascripts/ui/builder/BuilderSettings.js | 4 +- .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- .../javascripts/ui/editor/WallpaperPicker.js | 7 +-- 6 files changed, 54 insertions(+), 31 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 3e185d2..07e2d9f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -10,7 +10,7 @@ Map.Draw = function(map, opt){ draw.animate = function(){ ctx.save() draw.clear() - // draw.ruler() + draw.fill("rgba(255,255,255,0.98)") if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -19,7 +19,7 @@ Map.Draw = function(map, opt){ ctx.scale( -1, 1 ) draw.coords() - draw.regions(Rooms.regions, [ "#fff" ]) + draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } @@ -29,7 +29,7 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, [ "#f8f8f8" ]) + draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) @@ -39,7 +39,12 @@ Map.Draw = function(map, opt){ } draw.render = function(){ - ctx.save() + // change the ctx temporarily + var canvas = document.createElement("canvas") + ctx = canvas.getContext('2d') + canvas.width = map.canvas.width + canvas.height = map.canvas.height + draw.clear() ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) @@ -47,37 +52,52 @@ Map.Draw = function(map, opt){ ctx.translate( map.center.a, map.center.b ) ctx.scale( -1, 1 ) - draw.regions(Rooms.regions, ["#fff"]) - draw.mouse(map.ui.mouse.cursor) - scene && draw.camera(scene.camera) - + draw.regions(Rooms.regions, ["#fff"], null) + ctx.restore() + + // invert opacity + var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height) + var pixels = pixelData.data + for (var i = 0, k, _len = pixels.length; i < _len; i++) { + k = i*4 + if (pixels[k+3] == 0) { + pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255 + } + else { + pixels[k] = pixels[k+1] = pixels[k+2] = 255 + pixels[k+3] = 0 + } + } + ctx.putImageData(pixelData, 0, 0) + + // reset the ctx + ctx = map.canvas.getContext("2d") + + return canvas } draw.clear = function(){ - ctx.fillStyle = "rgba(255,255,255,0.98)" ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b) - ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.ruler = function (){ - ctx.strokeStyle = "rgba(80,80,80,0.5)" - ctx.lineWidth = 1 - var len = 5 - for (var i = 0.5; i < map.dimensions.a; i += 10) { - line(i, 0, i, len) - line(0, i, len, i) - } + draw.fill = function(fillStyle){ + ctx.fillStyle = fillStyle + ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b) } - draw.regions = function(regions, colors){ + draw.regions = function(regions, colors, stroke){ + if (stroke) { + ctx.strokeStyle = "#000" + ctx.lineWidth = (1 / map.zoom) + } for (var i = 0; i < regions.length; i++) { if (regions[i].dupe) continue ctx.fillStyle = colors[i % colors.length] - ctx.strokeStyle = "#000" - ctx.lineWidth = (1 / map.zoom) fill_region(regions[i]) - stroke_sides(regions[i]) + if (stroke) { + stroke_sides(regions[i]) + } } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 5ff53fe..71ddde9 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -103,6 +103,10 @@ walls_data.forEach(function(wall_data){ if (! wall_data) { return } var wall = base.lookup[ wall_data.id ] + if (! wall) { + console.log(wall_data); + return + } wall.deserialize( wall_data ) }) }, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 8174de7..fcb2f5e 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -13,7 +13,7 @@ } var Wall = function(opt){ - this.id = [ opt.side, opt.edge, opt.vec.a ].join("_") + this.id = [ opt.side|0, opt.edge|0, opt.vec.a|0 ].join("_") this.vec = opt.vec this.edge = opt.edge this.side = opt.side diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 94eed29..99bceed 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() + var thumbnail = map.canvas.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -115,7 +115,7 @@ var BuilderSettings = FormView.extend({ fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) return fd }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index fd251b7..0c08369 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -146,7 +146,6 @@ var EditorSettings = FormView.extend({ }, serialize: function(){ - map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) @@ -160,7 +159,8 @@ var EditorSettings = FormView.extend({ fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) if (this.thumbnailIsStale()) { - fd.append( "thumbnail", dataUriToBlob(map.canvas.toDataURL()) ) + var thumbnail = map.draw.render() + fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) ) } return fd }, diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js index 140076d..6bf2542 100644 --- a/public/assets/javascripts/ui/editor/WallpaperPicker.js +++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js @@ -133,7 +133,7 @@ var WallpaperPicker = UploadView.extend({ wall: null, pickWall: function(wall){ - if (wall.background.src == "none") { + if (! wall.background || wall.background.src == "none") { return; } this.wall = wall @@ -148,16 +148,16 @@ var WallpaperPicker = UploadView.extend({ initializePositionCursor: function(){ var base = this - var dx = 0, dy = 0, dragging = false + var dx = 0, dy = 0, dragging = false, delta var x = 0, y = 0, s = 1 var mymouse = new mouse({ el: this.$position[0], down: function(e, cursor){ if (! base.wall) return + dragging = true s = parseFloat( base.$scale.val() ) x = base.wall.background.x y = base.wall.background.y - dragging = true }, drag: function(e, cursor){ if (! dragging) return @@ -172,7 +172,6 @@ var WallpaperPicker = UploadView.extend({ }) }, up: function(e, cursor, new_cursor){ - delta.zero() dragging = false }, }) -- cgit v1.2.3-70-g09d2 From 6f4cd32fa13efe3b0e8b26183589f66889dd3738 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 13:26:08 -0400 Subject: render thumbnails as masks --- .../javascripts/rectangles/engine/map/draw.js | 20 ++++++++++++------- .../javascripts/rectangles/engine/rooms/_rooms.js | 10 ++++++++++ .../assets/javascripts/rectangles/models/rect.js | 23 ++++++++++++++++++++++ .../javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/stylesheets/app.css | 11 +++++------ 5 files changed, 52 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 07e2d9f..6c27ff1 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -38,18 +38,24 @@ Map.Draw = function(map, opt){ ctx.restore() } + // changes the ctx temporarily draw.render = function(){ - // change the ctx temporarily + var thumbnail_side = 1000 + + var extent = Rooms.extent() + var center = extent.center() + var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99 + var canvas = document.createElement("canvas") ctx = canvas.getContext('2d') - canvas.width = map.canvas.width - canvas.height = map.canvas.height + canvas.width = thumbnail_side + canvas.height = thumbnail_side draw.clear() - 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.translate( thumbnail_side * 1/2, thumbnail_side * 1/2) + ctx.scale( zoom, zoom ) + ctx.translate( center.a, -center.b ) ctx.scale( -1, 1 ) draw.regions(Rooms.regions, ["#fff"], null) @@ -73,7 +79,7 @@ Map.Draw = function(map, opt){ // reset the ctx ctx = map.canvas.getContext("2d") - + return canvas } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 6f96275..0c3cfd4 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -118,6 +118,16 @@ return data } + base.extent = function(){ + var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) ) + + base.forEach(function(room){ + extent.expand(room.rect) + }) + + return extent + } + base.sorted_by_position = function(){ return sort.rooms_by_position( base.values() ) } diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index a08176a..00f2c55 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -141,6 +141,29 @@ Rect.prototype.width = function(){ return this.x.length() } Rect.prototype.height = function(){ return this.y.length() } Rect.prototype.delta = function(){ return new vec2( this.x.magnitude(), this.y.magnitude() ) } + Rect.prototype.expand = function(rect){ + this.x.a = Math.min( this.x.a, rect.x.a ) + this.x.b = Math.max( this.x.b, rect.x.b ) + this.y.a = Math.min( this.y.a, rect.y.a ) + this.y.b = Math.max( this.y.b, rect.y.b ) + return this + } + Rect.prototype.square = function(){ + var width = this.x.length() + var height = this.y.length() + var diff + if (width < height) { + diff = (height - width) / 2 + this.x.a -= diff + this.x.b += diff + } + else { + diff = (width - height) / 2 + this.y.a -= diff + this.y.b += diff + } + return this + } Rect.prototype.toString = function(){ var sides = sidesToString(this.sides) var s = "[" + this.x.toString() + " " + this.y.toString() + "] " + sides diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 99bceed..7ae6294 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -107,7 +107,7 @@ var BuilderSettings = FormView.extend({ }, serialize: function(){ - var thumbnail = map.canvas.render() + var thumbnail = map.draw.render() var fd = new FormData() fd.append( "_csrf", this.$csrf.val() ) fd.append( "_id", this.$id.val() ) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e23962..d47b5a7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -619,16 +619,16 @@ iframe.embed { display: none; } -.templates span{ +.templates span { background-position: center; background-size: contain; background-repeat: no-repeat; background-color: #fff; width: 20vw; - height: 20vh; + height: 20vw; display: inline-block; margin: 4vw; - border:1px solid black; + background-color: #ddd; position: relative; } @@ -640,17 +640,16 @@ iframe.embed { left: 0; background: #fff; padding: 5px; - border-top: 1px solid black; font-weight: 300; } .templates span:hover { - border:1px solid blue; + background-color: #f00; cursor:pointer; } .templates span:hover:after { - border-top: 1px solid blue; + color: #f00; } .templates h1 { -- cgit v1.2.3-70-g09d2 From 583d213f22be93a1363c24ac2cdf9f083833703f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 14:47:47 -0400 Subject: projectList item formatting --- .../javascripts/rectangles/engine/map/draw.js | 19 ++++-- .../javascripts/rectangles/engine/rooms/_rooms.js | 2 - public/assets/stylesheets/app.css | 77 +++++++++++++++------- server/lib/views/index.js | 5 ++ views/projects/list-projects.ejs | 34 +++++----- 5 files changed, 88 insertions(+), 49 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 6c27ff1..7eb6e7c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -40,20 +40,29 @@ Map.Draw = function(map, opt){ // changes the ctx temporarily draw.render = function(){ - var thumbnail_side = 1000 + var thumbnail_width = 1000 + var thumbnail_height = 750 var extent = Rooms.extent() var center = extent.center() - var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99 + var extent_width = extent.width() + var extent_height = extent.height() + var zoom + if (extent_width > extent_height) { + zoom = thumbnail_width / extent.width() * 0.9 + } + else { + zoom = thumbnail_height / extent.height() * 0.9 + } var canvas = document.createElement("canvas") ctx = canvas.getContext('2d') - canvas.width = thumbnail_side - canvas.height = thumbnail_side + canvas.width = thumbnail_width + canvas.height = thumbnail_height draw.clear() - ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2) + ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2) ctx.scale( zoom, zoom ) ctx.translate( center.a, -center.b ) ctx.scale( -1, 1 ) diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 0c3cfd4..3603f0c 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -120,11 +120,9 @@ base.extent = function(){ var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) ) - base.forEach(function(room){ extent.expand(room.rect) }) - return extent } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index d47b5a7..24ca772 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -327,27 +327,42 @@ iframe.embed { .projectList { display: inline-block; float: left; - width: 100%; + width: 98vw; + margin: 2vw; } +.projectList a { + width: 32vw; + float:left; + clear: right; + padding-bottom: 2vw; +} .projectList .room { - width: 50%; - height:40vh; + width: 30vw; + height: 23vw; + margin: 1vw; + border: 1vw solid white; display:table; position: relative; - float:left; - border-top:1px solid; + z-index: 1; } - -.projectList .room:nth-child(3n+2) { - border-right:1px solid black; +.projectList .holder { + position: absolute; + top: 50%; + z-index: 2; } -.projectList .room:nth-child(3n+1) { - width: 100%; - height: 50vh; +.room .mask { + position: absolute; + top: 0; left: 0; + z-index: 1; + width: 100%; + height: 100%; + text-align: center; + overflow: hidden; + background-size: cover; + background-repeat: no-repeat; } - .room .images { position: absolute; top: 0; left: 0; @@ -358,15 +373,28 @@ iframe.embed { overflow: hidden; } .room .images img { - max-height: 100%; - max-width: 100%; + width: 50%; + position: absolute; } +.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; } + +.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 100%; } +.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 0%; width: auto; height: 100%; } + +.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; } +.room .images[data-mediacount='3'] img:nth-child(2) { left: 51%; bottom: 0%; width:auto; height:100%;} +.room .images[data-mediacount='3'] img:nth-child(3) { right: 51%; top: 61%; } + +.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; } +.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; } +.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; } +.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; } + .page .btn { clear: both; padding: 30px 0; border: 0; - } .page .viewMore { @@ -385,22 +413,21 @@ iframe.embed { vertical-align: middle; } -.page .room .holder a { - font-weight: 300; - font-size: 20px; - letter-spacing: 1px; +.page label { + font-weight: 500; + font-size: 15px; color: black; - background: white; - border: 1px solid; padding: 5px; - box-shadow: -3px 3px black; text-decoration:none; - max-width: 180px; display: inline-block; + cursor: pointer; } -.page .room .holder a:hover { - background:black; +.projectList a:hover { + background: linear-gradient( 0deg, blue, red ); +} + +.projectList a:hover label { color:white; } diff --git a/server/lib/views/index.js b/server/lib/views/index.js index ca48159..3f3880f 100644 --- a/server/lib/views/index.js +++ b/server/lib/views/index.js @@ -139,6 +139,11 @@ views.profile = function (req, res) { projects = projects.map(function(project){ project = project.toObject() project.date = moment(project.updated_at).format("M/DD/YYYY") + if (project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) { + project.color = [238,238,238] + } else { + project.color = project.colors.wall + } return project }) done(err, user, projects) diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index a12f237..f469f5c 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -4,31 +4,31 @@ [[ projects.forEach(function(project, i) { ]] - - - + [[ if (String(user._id) == String(project.user_id)) { ]] + + [[ } else { ]] + + [[ } ]] + + + [[ mediaCount = 0 ]] [[ project.media.some(function(media){ ]] [[ if (media.media.type != "image") { return false } ]] - [[ if (++mediaCount > 3) { return true } ]] + [[ if (++mediaCount > 1) { return true } ]] [[ }) ]] - -
- [[ if (String(user._id) == String(project.user_id)) { ]] - - [[- project.name ]]
- [[- project.date ]] - - [[ } else { ]] - - [[- project.name ]]
- [[- project.date ]] - [[ } ]] -
+ + + + + [[ }) ]] -- cgit v1.2.3-70-g09d2 From 68d5c2cb1097ddd74eee9e20d5fe3aeb42802697 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 8 Oct 2014 16:25:52 -0400 Subject: alt-click in builder to remove regions --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index f9334e6..02218ed 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -50,7 +50,7 @@ Map.UI.Editor = function(map){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (intersects.length && base.permissions.destroy) { + if (intersects.length && (base.permissions.destroy || e.altKey)) { base.mouse.down = false room = intersects[0] -- cgit v1.2.3-70-g09d2 From 86153d1221e38615d0a7dea8a8029a184fb25ece Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Oct 2014 20:32:31 -0400 Subject: rooms editor in builder --- .../javascripts/mx/extensions/mx.movements.js | 2 +- .../rectangles/engine/map/ui_minimap.js | 2 -- .../assets/javascripts/rectangles/models/wall.js | 2 ++ .../assets/javascripts/ui/editor/EditorToolbar.js | 8 ++++++-- public/assets/javascripts/ui/editor/EditorView.js | 6 ++++++ public/assets/javascripts/ui/site/LayoutsModal.js | 5 +++++ views/controls/builder/info.ejs | 2 +- views/controls/editor/toolbar.ejs | 23 +++++++++++----------- views/editor.ejs | 1 + 9 files changed, 34 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 065c93b..0ce03db 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -113,7 +113,7 @@ MX.Movements = function (cam) { app.controller.mediaViewer.hide() } else { - map && map.toggle && map.toggle() + app.controller.toolbar.toggleMap() } break } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js index d7280b9..fabbdb9 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js @@ -7,7 +7,6 @@ Map.UI.Minimap = function(map){ base.creating = base.dragging = base.resizing = false -/* base.mouse = new mouse({ el: map.el, down: down, @@ -16,7 +15,6 @@ Map.UI.Minimap = function(map){ up: up, rightclick: rightclick, }) -*/ base.wheel = new wheel({ el: map.el, diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fcb2f5e..7ff9015 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -114,6 +114,8 @@ // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) + + app.controller.pickWall(base, pos) } else { app.controller.pickWall(base, pos) diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4f12a7b..8a707ec 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -19,8 +19,12 @@ var EditorToolbar = View.extend({ }, toggleMap: function(){ - map.toggle() - // $("#minimap").toggleClass("hide"); + var state = ! $("[data-role='toggle-map-view']").hasClass("inuse") + this.resetControls() + $("[data-role='toggle-map-view']").toggleClass("inuse", state) + map.toggle(state) + $("#minimap").toggleClass("hide", state) + this.parent.info.toggle(state) }, toggleSettings: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index b35c872..6aff601 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -11,6 +11,7 @@ var EditorView = View.extend({ initialize: function(){ this.toolbar = new EditorToolbar ({ parent: this }) this.settings = new EditorSettings ({ parent: this }) + this.info = new BuilderInfo ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) this.mediaEditor = new MediaEditor ({ parent: this }) @@ -27,6 +28,11 @@ var EditorView = View.extend({ }, loadLayout: function(layout){ + if (layout == "empty") { + this.readyLayout({}) + this.toolbar.toggleMap() + return + } layout = sanitize(layout) $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 99db2a3..73c63e8 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -48,6 +48,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ events: { "click .templates span": 'toggleActive', + "click [data-role='create-new-layout']": 'createNewLayout', "submit form": 'newProject', }, @@ -70,6 +71,10 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ window.location.pathname = "/project/" + $layout.data("slug") + "/edit" }, + createNewLayout: function(){ + window.location.pathname = "/layout/new" + }, + newProject: function(e){ e && e.preventDefault() window.location.pathname = "/project/new" diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index d92d34c..7ef0b6a 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -1,4 +1,4 @@ -
+
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 85800f8..47d7c3c 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -4,10 +4,10 @@ data-role='open-media-viewer' data-info="add media" class="ion-ios7-photos-outline"> - + + -->
+
+
-- cgit v1.2.3-70-g09d2 From a7fe78b6059e3568d38876ba68e650b841912125 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Thu, 16 Oct 2014 00:48:22 -0400 Subject: unfocus ui on esc --- public/assets/javascripts/rectangles/engine/map/_map.js | 2 +- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 12 ++++++++++-- public/assets/javascripts/ui/editor/EditorToolbar.js | 3 ++- 3 files changed, 13 insertions(+), 4 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 3a47dab..64372c5 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -67,7 +67,7 @@ var Map = function(opt){ } base.toggle = function(state){ - $(base.el).toggle(state) + return $(base.el).toggle(state).is(':visible') } } diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 44e416d..9d69990 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -26,6 +26,13 @@ Map.UI.Editor = function(map){ resize: true, destroy: false, }) + + base.blur = function(){ + Rooms.forEach(function(r){ + return r.focused = false + }) + app.tube("builder-pick-nothing") + } // @@ -190,7 +197,7 @@ Map.UI.Editor = function(map){ }) Rooms.rebuild() } - + var intersects = Rooms.filter(function(r){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) @@ -207,7 +214,7 @@ Map.UI.Editor = function(map){ var cursor = base.mouse.cursor var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) }) if (intersects.length) { @@ -234,4 +241,5 @@ Map.UI.Editor = function(map){ function rightclick (e){ } + } diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 9c2f3d3..a460bbf 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -35,7 +35,8 @@ var EditorToolbar = View.extend({ // this.resetControls() // } // $("[data-role='toggle-map-view']").toggleClass("inuse", state) - map.toggle(state) + var state = map.toggle(state) + if (state) { map.ui.blur() } $("#minimap").toggleClass("hide", state) this.parent.info.toggle(state) }, -- cgit v1.2.3-70-g09d2 From bd1c6c4855db62c59576d593375c3b1b566c36d4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 11:56:08 -0400 Subject: ceiling height wheel --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 9d69990..1a4ea3c 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -220,7 +220,7 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height - deltaY * 2), height_min, height_max ) app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) -- cgit v1.2.3-70-g09d2 From 38a948be224d704589fa203520f224615a81c7d9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 17 Oct 2014 12:09:21 -0400 Subject: colors work after editing layout --- .../javascripts/rectangles/engine/map/ui_editor.js | 4 ++-- .../javascripts/rectangles/engine/rooms/_walls.js | 17 +++++++++-------- public/assets/javascripts/rectangles/models/room.js | 14 +------------- 3 files changed, 12 insertions(+), 23 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 1a4ea3c..1ab9c73 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -220,7 +220,7 @@ Map.UI.Editor = function(map){ if (intersects.length) { wheelState = wheelState || intersects[0].copy() - intersects[0].height = clamp( ~~(intersects[0].height - deltaY * 2), height_min, height_max ) + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) app.tube("builder-pick-room", intersects[0]) clearTimeout(wheelTimeout) @@ -235,7 +235,7 @@ Map.UI.Editor = function(map){ }, 250) } else { - map.set_zoom(map.zoom_exponent - deltaY/20) + map.set_zoom(map.zoom_exponent + deltaY/20) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 69b9aa4..653278c 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -126,11 +126,10 @@ var ceilingColor = rgb_string(Walls.colors.ceiling) Walls.list.forEach(function(wall){ wall.outline(wallColor, outlineColor) - // TODO: SET WALLPAPER HERE }) - Rooms.forEach(function(room){ - room.setFloorColor(floorColor) - room.setCeilingColor(ceilingColor) + Walls.floors.forEach(function(floor){ + if (floor.ceiling) floor.color(ceilingColor) + else floor.color(floorColor) }) } @@ -225,16 +224,18 @@ floor: function(rgb){ var rgbColor = rgb_string(rgb) Walls.colors.floor = rgb - Rooms.forEach(function(room){ - room.setFloorColor(rgbColor) + Walls.floors.forEach(function(floor){ + if (floor.ceiling) return + floor.color(rgbColor) }) }, ceiling: function(rgb){ var rgbColor = rgb_string(rgb) Walls.colors.ceiling = rgb - Rooms.forEach(function(room){ - room.setCeilingColor(rgbColor) + Walls.floors.forEach(function(floor){ + if (! floor.ceiling) return + floor.color(rgbColor) }) }, } diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js index 1a4606c..b0344a1 100644 --- a/public/assets/javascripts/rectangles/models/room.js +++ b/public/assets/javascripts/rectangles/models/room.js @@ -158,19 +158,7 @@ }) return collision } - - Room.prototype.setFloorColor = function(rgbColor) { - this.mx_floor.map(function(mx){ - mx.el.style.backgroundColor = rgbColor - }) - } - - Room.prototype.setCeilingColor = function(rgbColor) { - this.mx_ceiling.map(function(mx){ - mx.el.style.backgroundColor = rgbColor - }) - } - + if ('window' in this) { window.Room = Room } -- cgit v1.2.3-70-g09d2 From 91019438dab626c2760fb2e7b5e2203e88785caf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 4 Nov 2014 17:02:01 -0500 Subject: layout editor autosaves --- .../assets/javascripts/rectangles/engine/map/ui_editor.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 1ab9c73..c838b8b 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -70,6 +70,9 @@ Map.UI.Editor = function(map){ Rooms.remove(room) app.tube("builder-destroy-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) return } else if (intersects.length) { @@ -178,6 +181,9 @@ Map.UI.Editor = function(map){ Rooms.rebuild() app.tube("builder-pick-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) } } if (base.resizing || base.dragging) { @@ -196,6 +202,9 @@ Map.UI.Editor = function(map){ redo: base.dragging.copy() }) Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) } var intersects = Rooms.filter(function(r){ @@ -231,6 +240,10 @@ Map.UI.Editor = function(map){ redo: intersects[0].copy() }) Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + wheelState = null }, 250) } -- cgit v1.2.3-70-g09d2 From fc00dfa28faddff26778f2580d263526ca3b335e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Nov 2014 18:00:40 -0500 Subject: show/hide minimap as appropriate --- public/assets/javascripts/mx/extensions/mx.movements.js | 6 +++++- public/assets/javascripts/rectangles/engine/map/_map.js | 1 + .../assets/javascripts/rectangles/engine/scenery/types/_object.js | 1 - public/assets/javascripts/ui/editor/MediaEditor.js | 2 +- public/assets/javascripts/ui/reader/MediaPlayer.js | 3 ++- public/assets/javascripts/ui/reader/ReaderView.js | 6 ++++-- 6 files changed, 13 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 82db40d..9af2c8d 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -33,7 +33,11 @@ MX.Movements = function (cam) { var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } - $(document).one("keydown", function(){ $("#keyhint").fadeOut(250); $('.reader #minimap').addClass('active'); }) + $(document).one("keydown", function(){ + $("#keyhint").fadeOut(250); + $('.reader #minimap').addClass('active'); + }) + function clampRotation( vr ) { if (Rooms.mover.noclip) { return clamp(vr, PI/-2, PI/2 ) diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 64372c5..202803a 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -15,6 +15,7 @@ var Map = function(opt){ var base = this base.el = opt.el + base.$el = $(base.el) if (! base.el) return diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index c3fd6f3..51d1b88 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -29,7 +29,6 @@ Scenery.types.base = Fiber.extend(function(base){ }, place: function(opt){ - console.log(opt) if (opt.data) { if (opt.wall) { var position = opt.wall.mxToPosition(opt.data.position) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index db5878f..de93f6e 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -65,7 +65,7 @@ var MediaEditor = FormView.extend({ var media = scenery.media - console.log(media) + // console.log(media) this.$name.val(media.title || filenameFromUrl(media.url) ) this.$description.val(media.description) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index e40c6ff..42e7596 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -46,7 +46,7 @@ var MediaPlayer = FormView.extend({ if (media.type == "image") { if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) { this.hide() - return + return false } } @@ -78,6 +78,7 @@ var MediaPlayer = FormView.extend({ break } + return true }, hide: function(scenery){ diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index aea681a..617a145 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -58,7 +58,7 @@ var ReaderView = View.extend({ return } - // don't build anything until we're in landscape mode, otherwise ios might crash + // don't build anything until we're in landscape mode, otherwise ios might crash!! var orientationFn = orientationchange.bind(this) window.addEventListener('orientationchange', orientationFn) function orientationchange (e) { @@ -119,7 +119,8 @@ var ReaderView = View.extend({ }, pick: function(scenery){ - this.mediaPlayer.pick(scenery) + var has_info = this.mediaPlayer.pick(scenery) + $("#minimap").toggleClass('active', ! has_info) app.tube("pick-scenery", { scenery: scenery }) }, @@ -128,6 +129,7 @@ var ReaderView = View.extend({ }, hideExtras: function(){ + $("#minimap").addClass('active') this.mediaPlayer.hide() app.tube("close-scenery") } -- cgit v1.2.3-70-g09d2 From bc4517c6b09e03f52161dc38ca591ed0cc227d5d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 18:33:39 -0500 Subject: toggle global height --- .../javascripts/rectangles/engine/map/ui_editor.js | 1 + .../javascripts/rectangles/engine/rooms/_rooms.js | 4 ++++ .../assets/javascripts/ui/builder/BuilderInfo.js | 22 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 14 +++++++++++++- views/controls/builder/info.ejs | 2 ++ 5 files changed, 42 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index c838b8b..44ca91d 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -42,6 +42,7 @@ Map.UI.Editor = function(map){ cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) if (e.ctrlKey || e.which === 3) { + if (Rooms.regions.length == 0) return cursor.quantize(1/map.zoom) map.center.a = cursor.x.a map.center.b = -cursor.y.a diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js index 5686aba..46c1d7f 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js @@ -81,6 +81,10 @@ base.forEach = function(f){ return base.values().forEach(f) } + + base.some = function(f){ + return base.values().some(f) + } base.map = function(f){ return base.values().map(f) diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 7606361..c25f03c 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -16,6 +16,7 @@ var BuilderInfo = View.extend({ "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', + "change [name=heightGlobal]": 'changeHeightGlobal', "click [data-role=destroy-room]": 'destroy', }, @@ -31,6 +32,7 @@ var BuilderInfo = View.extend({ this.$unitName = this.$(".unitName") this.$noSelection = this.$(".no-selection") this.$settings = this.$(".setting") + this.$heightGlobalCheckbox = this.$("[name=heightGlobal]") app.on("builder-pick-room", this.pick.bind(this)) app.on("builder-destroy-room", this.hide.bind(this)) app.on("builder-pick-nothing", this.deselect.bind(this)) @@ -40,6 +42,18 @@ var BuilderInfo = View.extend({ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) + + if (Rooms.regions.length == 0) { + this.changeHeightGlobal(true) + } + else { + var rooms = Rooms.values() + var height = rooms[0].height + var differentHeights = Rooms.some(function(room){ + return room.height != height + }) + this.changeHeightGlobal( ! differentHeights ) + } }, toggle: function(state){ @@ -141,5 +155,13 @@ var BuilderInfo = View.extend({ changeViewHeight: function(){ window.viewHeight = this.$viewHeight.unitVal( ) }, + changeHeightGlobal: function(state){ + if (typeof state == "boolean") { + this.$heightGlobalCheckbox.prop("checked", state) + window.heightIsGlobal = state + return + } + window.heightIsGlobal = this.$heightGlobalCheckbox.prop("checked") + }, }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 814df90..55f3219 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1582,7 +1582,8 @@ border-left: 1px solid black; transition:opacity 0.3s ease-in-out; } .reader #minimap { - right: 20px; + right: 10px; + bottom: 10px; left: auto; -webkit-transform:translateX(180px); -moz-transform:translateX(180px); @@ -2141,6 +2142,17 @@ input[type="range"]::-webkit-slider-thumb { top: 0px; } +.setting.number #room-height { + width: 60px; +} +.setting.number #room-height-global-label { + float: none; + margin-left: 6px; +} +.setting.number #room-height-global-label:after { + content: ''; +} + #mediaEditor .setting.number label { width: 40px; } diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 2762207..8a0e0d5 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -20,6 +20,8 @@
+ +
-- cgit v1.2.3-70-g09d2 From af2673a3fd976327e9a92fd6b497f5f5cd82d7b3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 13 Nov 2014 18:40:50 -0500 Subject: global room height toggle --- .../javascripts/rectangles/engine/map/ui_editor.js | 27 +++++++++++++++++++++- .../javascripts/rectangles/engine/scenery/undo.js | 12 +++++++++- 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index 44ca91d..d1b0b89 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -227,7 +227,32 @@ Map.UI.Editor = function(map){ return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (intersects.length) { + if (intersects.length && window.heightIsGlobal) { + var rooms = Rooms.values() + wheelState = wheelState || rooms[0].height + var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) + rooms.forEach(function(room){ + room.height = height + }) + + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-rooms-height", + undo: wheelState, + redo: height + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else if (intersects.length) { wheelState = wheelState || intersects[0].copy() intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js index 6ad9e0d..8b85d02 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/undo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js @@ -111,7 +111,17 @@ Rooms.rebuild() }, }, - + + { + type: "update-rooms-height", + undo: function(state){ + var rooms = Rooms.values() + rooms.forEach(function(room){ + room.height = state + }) + }, + }, + // { -- cgit v1.2.3-70-g09d2 From 208020e87a423a35dfc33c16b9c715e84a69fda6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Nov 2014 18:14:25 -0500 Subject: fix bug from coupling map stuff to editor --- public/assets/javascripts/rectangles/engine/map/ui_editor.js | 2 +- public/assets/javascripts/ui/builder/BuilderView.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js index d1b0b89..7308344 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js @@ -184,7 +184,7 @@ Map.UI.Editor = function(map){ app.tube("builder-pick-room", room) // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( app.controller.settings ) } } if (base.resizing || base.dragging) { diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 9b7e1a2..b975499 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -12,6 +12,7 @@ var BuilderView = View.extend({ this.toolbar = new BuilderToolbar ({ parent: this }) this.settings = new BuilderSettings ({ parent: this }) this.colorControl = new ColorControl ({ parent: this }) + this.cursor = new HelpCursor({ parent: this }) }, load: function(name){ -- cgit v1.2.3-70-g09d2 From 673cd38ccb8a9c6ba7ec0a879fc96dcc580b046c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 14:46:16 -0500 Subject: enable hidpi canvas in main app --- Gruntfile.js | 1 + bower.json | 2 +- .../javascripts/rectangles/engine/map/draw.js | 2 +- public/assets/javascripts/ui/lib/LabColorPicker.js | 26 ++++++++++++---------- public/assets/javascripts/ui/reader/Tracker.js | 14 +++++++----- public/assets/test/surface.html | 2 +- views/controls/editor/color-control.ejs | 2 +- views/partials/scripts.ejs | 1 + 8 files changed, 29 insertions(+), 21 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/Gruntfile.js b/Gruntfile.js index f7af106..70a8b13 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -13,6 +13,7 @@ module.exports = function(grunt) { "public/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js", "public/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js", "public/assets/javascripts/vendor/bower_components/marked/lib/marked.js", + "public/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js", "public/assets/javascripts/vendor/tube.js", "public/assets/javascripts/vendor/loader.js", "public/assets/javascripts/vendor/polyfill.js", diff --git a/bower.json b/bower.json index c78310d..e3e83ca 100644 --- a/bower.json +++ b/bower.json @@ -10,6 +10,6 @@ "jquery-jsonview": "1.2.0", "prefixfree": "", "marked": "0.3.2", - "hidpi-canvas": "~1.0.9" + "hidpi-canvas": "git://github.com/julescarbon/hidpi-canvas-polyfill.git#master" } } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index eceda3c..5a9b592 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -56,9 +56,9 @@ Map.Draw = function(map, opt){ } var canvas = document.createElement("canvas") - ctx = canvas.getContext('2d') canvas.width = thumbnail_width canvas.height = thumbnail_height + ctx = canvas.getContext('2d') draw.clear() diff --git a/public/assets/javascripts/ui/lib/LabColorPicker.js b/public/assets/javascripts/ui/lib/LabColorPicker.js index 7ddcdd5..2c8fb90 100644 --- a/public/assets/javascripts/ui/lib/LabColorPicker.js +++ b/public/assets/javascripts/ui/lib/LabColorPicker.js @@ -1,9 +1,12 @@ var LabColorPicker = function (parent, w, h) { var base = this var canvas = this.canvas = document.createElement('canvas') - var ctx = this.ctx = canvas.getContext('2d') - var imageData = ctx.createImageData(w,h) - var data = imageData.data + canvas.width = w + canvas.height = h + var ctx = this.ctx = canvas.getContext('2d-lodpi') +// canvas.className = "colorPicker" +// var imageData = ctx.createImageData(w, h) +// var data = imageData.data var cursor = this.cursor = document.createElement("div") cursor.className = "colorPickerCursor" @@ -15,10 +18,6 @@ var LabColorPicker = function (parent, w, h) { brightnessControl.setAttribute("max", "110") brightnessControl.setAttribute("value", "0") - canvas.width = w - canvas.height = h - canvas.className = "colorPicker" - var ww = w-1 var hh = h-1 @@ -84,11 +83,14 @@ var LabColorPicker = function (parent, w, h) { } this.paint = function() { val = clamp(val, L_range[0], L_range[1]) - var x, y, t - for (var i = 0; i < w; i++) { - for (var j = 0; j < h; j++) { - x = mix( i/ww, a_range[0], a_range[1] ) - y = mix( j/hh, b_range[0], b_range[1] ) + var imageData = ctx.createImageData(canvas.width, canvas.height) + var data = imageData.data + var x, y, t, cw = imageData.width, ch = imageData.height + var cww = cw-1, chh = ch-1 + for (var i = 0; i < cw; i++) { + for (var j = 0; j < ch; j++) { + x = mix( i/cww, a_range[0], a_range[1] ) + y = mix( j/chh, b_range[0], b_range[1] ) t = (j*w + i) * 4 rgb = xyz2rgb(hunterlab2xyz(val, x, y)) data[t] = Math.round( rgb[0] ) diff --git a/public/assets/javascripts/ui/reader/Tracker.js b/public/assets/javascripts/ui/reader/Tracker.js index ce32c59..d2dec39 100644 --- a/public/assets/javascripts/ui/reader/Tracker.js +++ b/public/assets/javascripts/ui/reader/Tracker.js @@ -1,8 +1,12 @@ -(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ -(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), -m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) -})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - +if (window.location.host.indexOf("lvh.me") === -1) { + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); +} +else { + ga = function(){} +} ga('create', 'UA-56883705-1', 'auto'); ga('send', 'pageview'); diff --git a/public/assets/test/surface.html b/public/assets/test/surface.html index 02b473d..9e6abe8 100644 --- a/public/assets/test/surface.html +++ b/public/assets/test/surface.html @@ -2,7 +2,7 @@ - + diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs index c035e24..bcc955d 100644 --- a/views/controls/editor/color-control.ejs +++ b/views/controls/editor/color-control.ejs @@ -1,4 +1,4 @@ -
+

Edit Room Colors

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a58eca1..011644b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -5,6 +5,7 @@ + -- cgit v1.2.3-70-g09d2 From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 17:41:36 -0500 Subject: orthographic polyline --- .../javascripts/rectangles/engine/map/_map.js | 8 + .../javascripts/rectangles/engine/map/draw.js | 19 +- .../assets/javascripts/rectangles/models/vec2.js | 5 + public/assets/test/ortho.html | 224 +++++++++++++++++++++ 4 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 public/assets/test/ortho.html (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 202803a..d582982 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -48,6 +48,13 @@ var Map = function(opt){ base.el.appendChild(canvas) switch (opt.type) { + case "ortho": + base.draw = new Map.Draw (base, { ortho: true }) + base.ui = new Map.UI.Ortho (base) + base.sides = base.sides_for_camera + $(window).resize(base.resize) + break + case "editor": base.draw = new Map.Draw (base) base.ui = new Map.UI.Editor (base) @@ -65,6 +72,7 @@ var Map = function(opt){ base.resize = function(){ canvas.width = base.dimensions.a = window.innerWidth canvas.height = base.dimensions.b = window.innerHeight + // resize here - esp if 2d-hires } base.toggle = function(state){ diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5a9b592..b525696 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -5,14 +5,16 @@ Map.Draw = function(map, opt){ var draw = this - var ctx = map.canvas.getContext("2d") + var ctx = draw.ctx = map.canvas.getContext("2d") draw.animate = function(){ ctx.save() draw.clear() draw.fill("rgba(255,255,255,0.98)") - if (opt.minimap) { + if (opt.ortho) { + } + else 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 ) @@ -22,7 +24,6 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } - else { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) @@ -31,12 +32,19 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) + draw.mouse_dimensions(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) } ctx.restore() } + draw.translate = function(){ + 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 ) + } // changes the ctx temporarily draw.render = function(){ @@ -87,7 +95,7 @@ Map.Draw = function(map, opt){ ctx.putImageData(pixelData, 0, 0) // reset the ctx - ctx = map.canvas.getContext("2d") + ctx = draw.ctx return canvas } @@ -123,7 +131,8 @@ Map.Draw = function(map, opt){ ctx.beginPath(); ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false); ctx.fill(); - + } + draw.mouse_dimensions = function(mouse){ if (mouse.width() != 0 && mouse.height() != 0) { if (map.ui.dragging) { stroke_rect(mouse) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 14d0e6b..290e45e 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -80,6 +80,11 @@ this.a = Math.round(this.a) this.b = Math.round(this.b) } + vec2.prototype.distanceTo = function(v){ + var va = (this.a - v.a) + var vb = (this.b - v.b) + return Math.sqrt( va*va + vb*vb ) + } vec2.prototype.setPosition = function(n){ var len = this.length() this.a = n diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html new file mode 100644 index 0000000..8626453 --- /dev/null +++ b/public/assets/test/ortho.html @@ -0,0 +1,224 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + height: i, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() } +function add_center () { + var mx = new MX.Object3D() + mx.width = 79 + mx.height = 64 + mx.y = 32 * 0.05 + mx.scale = 0.05 + mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)" + scene.add(mx) +} function build_circle () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ map.draw.translate() map.draw.coords() + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From bcf1904e0bdd64353e6d06f922112cf28b1bc87f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 5 Feb 2015 12:28:04 -0500 Subject: line to cursor --- public/assets/javascripts/rectangles/engine/map/draw.js | 4 ++-- public/assets/test/ortho.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 564b351..24f7cf3 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,11 +228,11 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - draw.dot_at = function dot_at (x,z){ + draw.dot_at = function dot_at (x, z, radius){ ctx.save() ctx.translate(x,z) - var radius = 2 / map.zoom + radius = (radius || 2) / map.zoom ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI, false); diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index ce52f99..1ca7e06 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){ 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) last_point = new vec2( cursor.x.a, cursor.y.a ) - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) { + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b } else { document.body.style.cursor = "crosshair" @@ -119,7 +121,7 @@ function polyline (points, finished) { if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" - ctx.fillRect(points[0].a, points[0].b, 10, 10) + map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { ctx.fillStyle = "#ff0" @@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){ rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) - console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) return mx @@ -256,10 +257,13 @@ function animate(time){ map.draw.coords() polyline(points) - if (placing && last_point && points.length) { + if (placing && last_point) { + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() - ctx.moveTo(points[0].a, points[0].b) + ctx.moveTo(points[points.length-1].a, points[points.length-1].b) ctx.lineTo(last_point.a, last_point.b) + ctx.stroke() } shapes.forEach(function(shape){ -- cgit v1.2.3-70-g09d2 From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 20:25:45 -0400 Subject: split out mx.grid --- public/assets/javascripts/mx/primitives/mx.grid.js | 60 +++++++ .../javascripts/rectangles/engine/map/ui_ortho.js | 65 +++++++ .../javascripts/rectangles/engine/scenery/move.js | 3 +- public/assets/test/ortho2.html | 200 +++++++++++++++++++++ 4 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.grid.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js create mode 100644 public/assets/test/ortho2.html (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js new file mode 100644 index 0000000..7a40144 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -0,0 +1,60 @@ +MX.Grid = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Grid" + + var ops = this.ops = defaults(ops, { + x: 0, + y: 0, + z: 0, + space: 20, + cells: 20, + }) + + ops.side = ops.space * ops.cells + + var ctx, canvas = document.createElement("canvas") + + this.el = canvas + this.width = this.height = canvas.width = canvas.height = ops.side + 4 + + ctx = canvas.getContext('2d') + + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = PI/2 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-grid") + + this.draw(ctx) + }, + + draw: function(ctx){ + ctx = ctx || this.ctx + + var cells = this.ops.cells, + space = this.ops.space, + side = this.ops.side + + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.closePath() + ctx.stroke() + }, + +}) + + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js new file mode 100644 index 0000000..adff4d2 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,65 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(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) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + }, + move: function(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) + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + }, + drag: function(e, cursor){ + 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 + }, + up: function(e, cursor, new_cursor){ + 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.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 0d26582..dd60a61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -82,7 +82,7 @@ Scenery.move = function(base){ base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } - console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) + if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -105,7 +105,6 @@ Scenery.move = function(base){ dragging = moved = false oldState = null document.body.classList.remove("dragging") - } function switch_wall (e, target, cursor){ diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 835fbcd8b47715d34d17b784409db1d45f992c29 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:46:25 -0400 Subject: rightclick to recenter canvas --- .../javascripts/rectangles/engine/map/ui_ortho.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adff4d2..adcc078 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -10,6 +10,23 @@ Map.UI.Ortho = function(map){ down: function(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) + + if (e.ctrlKey || e.which === 3) { + if (placing) { + // close polyline or cancel + return + } + 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 + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + // compare to initial point var p = new vec2( cursor.x.a, cursor.y.a ) if (placing) { -- cgit v1.2.3-70-g09d2 From 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 12:44:28 -0400 Subject: etc --- public/assets/javascripts/app.js | 2 - .../javascripts/rectangles/engine/map/ui_ortho.js | 82 --------------------- public/assets/test/ortho.html | 9 +++ public/assets/test/ortho2.html | 83 ++++++++++++++++++++++ 4 files changed, 92 insertions(+), 84 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ff062e..6ebcda5 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,8 +21,6 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - var movements - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adcc078..e69de29 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -1,82 +0,0 @@ -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: function(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) - - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - return - } - 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 - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - }, - move: function(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) - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b =last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - 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 - }, - up: function(e, cursor, new_cursor){ - 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.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 1ca7e06..2257006 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } } var scene, map, controls diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 733c90c..17acead 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -46,6 +46,89 @@ body { + @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false +var MapTool = Fiber.extend(function(base){ + var exports = { + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + } + return exports +}) - base.mouse = new mouse({ - el: map.el, - down: function(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) +var PositionTool = MapTool.extend(function(base){ + var exports = { + down: 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 + map.ui.mouse.down = false + }, + } + return exports +}) - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return +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 (points.length > 2) { + add_mx_polyline(points) + } + else { + points.length = 0 } - 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 - base.mouse.down = false - e.preventDefault() - e.stopPropagation() return } + map.ui.tools.position.down(e, cursor) + return + } - // compare to initial point - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing) { - if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { - points.push( points[0].clone() ) - placing = false - add_mx_polyline(points) - } - else { - points.push( p ) - mx_points.push( add_mx_point(p) ) - } - } - else { - placing = true - points = [] - points.push( p ) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) mx_points.push( add_mx_point(p) ) - } - }, - move: function(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) - - last_point = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { - document.body.style.cursor = "pointer" - last_point.assign(points[0]) - cursor.x.a = cursor.x.b = last_point.a - cursor.y.a = cursor.y.b = last_point.b - } - else { - document.body.style.cursor = "crosshair" - } - }, - drag: function(e, cursor){ - 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 - }, - up: function(e, cursor, new_cursor){ - 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.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} - + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + exports.move = function(e, cursor){ + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) var scene, map, controls @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale controls.opt.center.x = -x controls.opt.center.y = 0 controls.opt.center.z = -z diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +
-
+
+ + + +
+ +
+ + + +
+ + + + - - + + @@ -68,8 +70,13 @@ body { - + + + + + + - - + + -- cgit v1.2.3-70-g09d2 From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:50:27 -0400 Subject: split out modules --- .../rectangles/engine/map/tools/eraser.js | 27 +++ .../rectangles/engine/shapes/polyline.js | 147 +++++++++++++ .../rectangles/engine/shapes/shapelist.js | 61 ++++++ public/assets/test/ortho3.html | 243 +-------------------- 4 files changed, 238 insertions(+), 240 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js new file mode 100644 index 0000000..648cd11 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -0,0 +1,27 @@ +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js new file mode 100644 index 0000000..7e3c04c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -0,0 +1,147 @@ +var Polyline = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) + } + exports.firstPoint = function(){ + return this.points[0] + } + exports.lastPoint = function(){ + return this.points[this.points.length-1] + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } + exports.hasPointNear = function(p){ + var point + for (var i = 0; i < this.points.length; i++){ + point = this.points[i] + if (point.distanceTo( p ) < 10/map.zoom) { + return point + } + } + return null + } + exports.hasEndPointNear = function(p){ + if (this.closed) return null + if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { + return this.firstPoint() + } + if (this.lastPoint().distanceTo( p ) < 10/map.zoom) { + return this.lastPoint() + } + return null + } + exports.hasSegmentNear = function(p, min_dist){ + var p1, p2, d1, d2, sum, rat + var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity + var closest_i = -1 + var points = this.points + var p1, p2 = points[0] + for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] + 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 + new_x = p1.a + rat * d1 + new_y = p1.b + rat * d2 + dx = new_x - p.a + dy = new_y - p.b + sum2 = sqrt(dx*dx+dy*dy) + if (sum2 < closest_distance) { + x = new_x + y = new_y + closest_distance = sum2 + closest_i = i + } + } + if (closest_i == -1) return null + return { + x: x, + y: y, + distance: closest_distance, + head: closest_i-1, + tail: closest_i, + } + } + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = "rgba(255,255,0,0.1)" + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + ctx.stroke() + if (! map.ui.placing || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + 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) + shapes.add(this) + } + exports.rebuild = function(){ + this.mx.rebuild() + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx_points.length = 0 + this.points.length = 0 + } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js new file mode 100644 index 0000000..00e1a4e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -0,0 +1,61 @@ +var ShapeList = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.shapes = [] + } + exports.add = function(shape){ + this.shapes.push(shape) + } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } + exports.findClosestPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestEndPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasEndPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } + exports.forEach = function(fn){ + this.shapes.forEach(fn) + } + return exports +}) \ No newline at end of file diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f56c73f..ef5732c 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -74,9 +74,12 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@ -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
[[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


- +

-- cgit v1.2.3-70-g09d2 From e61e94f5d2f570f0cba3a3f7d91a18d8db524d79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 20:42:19 -0400 Subject: blueprint upload stuff --- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/builder/BlueprintUpload.js | 120 +++++++++++++++++++++ public/assets/stylesheets/app.css | 3 +- public/assets/test/ortho4.html | 43 +++++++- 4 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index bf646bb..e3d7621 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -44,7 +44,7 @@ var Map = function(opt){ var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b - + base.el.appendChild(canvas) switch (opt.type) { diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js new file mode 100644 index 0000000..dbc6f12 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BlueprintUpload.js @@ -0,0 +1,120 @@ + +var BlueprintUpload = UploadView.extend({ + el: ".blueprintUpload", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: ortho }) + + this.load() + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("
") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || function(){}) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 56c65fe..bb32500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1597,7 +1597,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.signin, .mediaDrawer.signup, .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, -.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject { +.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, +.mediaDrawer.blueprintUpload { display:table; } .confirm button { diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index b434efb..12b6ab2 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -1,15 +1,19 @@ +
@@ -47,11 +55,38 @@ body {
-
+
X

Upload A Room Image

+ +
+
+
+ + + +
+
+ +
+ + Please tell us the scale of your map. + Click both corners of a wall, and then enter how long the wall is. + +
+
+ +
+ + + + +
-- cgit v1.2.3-70-g09d2 From d84c89a8dd770ea174a7d2ac90927046a5f4b5f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 16:50:31 -0400 Subject: blueprint upload styling --- .../javascripts/rectangles/engine/map/ui/ortho.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 30 ----- .../javascripts/ui/blueprint/BlueprintScaler.js | 43 ++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 36 ++++-- .../javascripts/ui/blueprint/BlueprintView.js | 2 +- views/controls/blueprint/editor.ejs | 122 +++++++++++++++++---- views/partials/scripts.ejs | 2 +- 7 files changed, 178 insertions(+), 61 deletions(-) delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintEditor.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintScaler.js (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js index 52f7339..5be7446 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -81,7 +81,9 @@ Map.UI.Ortho = function(map){ } base.set_tool = function(s){ console.log("set tool to", s) - base.tools[currentTool].cancel() + if (base.tools[currentTool]) { + base.tools[currentTool].cancel() + } currentTool = s tool = base.tools[currentTool] } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js deleted file mode 100644 index 227c1c8..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ /dev/null @@ -1,30 +0,0 @@ - -var BlueprintEditor = ModalView.extend({ - el: ".blueprintEditor", - - events: { - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(){ - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: 'ortho' }) - - this.$blueprintMap.append(this.map.el) - }, - - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - save: function(){ - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js new file mode 100644 index 0000000..e11b61e --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -0,0 +1,43 @@ + +var BlueprintScaler = ModalView.extend({ + el: ".blueprintScaler", + + events: { + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(){ + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = map = new Map ({ + type: "ortho", + el: this.$blueprintMap.get(0), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("position", new PositionTool) + map.ui.set_tool("position") + }, + + pick: function(){ + + }, + + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + save: function(){ + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index 9467715..deb1075 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -13,7 +13,8 @@ var BlueprintUpload = UploadView.extend({ "change .url": "enterUrl", "keydown .url": "enterSetUrl", - "click .blueprint": "choose", + "click .blueprint": "pick", + "click .remove": "destroy", }, initialize: function(opt){ @@ -34,25 +35,33 @@ var BlueprintUpload = UploadView.extend({ populate: function(data){ this.loaded = true if (data && data.length) { + this.$blueprints.show() data.forEach(this.append.bind(this)) - this.$(".txt").hide() + this.show() } else { - this.$(".txt").show() + this.show() } }, pick: function(e){ var $el = $(e.currentTarget) - // load map with it + var media = $el.data("media") + this.hide() + this.parent.blueprintScaler.pick(media) }, - destroy: function(_id, cb){ + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() $.ajax({ type: "delete", url: this.destroyAction, data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || function(){}) + }).complete(function(){ + }) }, show: function(){ @@ -93,13 +102,24 @@ var BlueprintUpload = UploadView.extend({ }, add: function(media){ + this.$blueprints.show() this.append(media) + this.hide() + this.parent.blueprintScaler.pick(media) }, append: function(media){ - var $el = $("") - $el.attr("src", media.url) + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) $el.addClass("blueprint") this.$blueprints.append($el) }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 40c61d7..a803f12 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -12,7 +12,7 @@ var BlueprintView = View.extend({ // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintEditor = new BlueprintEditor ({ parent: this }) + this.blueprintScaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 6b80287..aec5e25 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -33,13 +33,88 @@ body { .hud span.active { color: #000; } .blueprintUpload { - width: 240px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; } .blueprints .blueprint { border: 1px solid black; - padding: 5px; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { height: 100px; max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: 0 1px 2px #888; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border-radius: 50%; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; cursor: pointer; } @@ -63,42 +138,49 @@ body {
- X
-

Upload your Blueprint

-
+

Upload your Blueprint

+

+ Upload an image which you will trace to make a floor plan. + Images should be at least 1000x1000. +

+
- +
-
Your uploaded blueprints
- Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. - https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg +
+
+ Please tell us the scale of your blueprint. + Click both corners of a wall, and then enter how long the wall is. +

+ Do you want to upload a blueprint? +
-
-
+
+
-
- - +
+ + - + +
- +
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2a93e9b..136bd4d 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -128,7 +128,7 @@ - + -- cgit v1.2.3-70-g09d2 From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 18:38:12 -0400 Subject: functioning blueprint scaler --- .../javascripts/rectangles/engine/map/draw.js | 2 +- .../rectangles/engine/map/tools/line.js | 49 ++++++++++++ .../assets/javascripts/rectangles/models/rect.js | 6 ++ .../javascripts/ui/blueprint/BlueprintScaler.js | 91 ++++++++++++++++++++-- .../javascripts/ui/blueprint/BlueprintView.js | 3 + server/lib/schemas/Layout.js | 1 + views/controls/blueprint/editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 11ba3f8..cc2f4d8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -198,7 +198,7 @@ Map.Draw = function(map, opt){ // - function line (x,y,a,b,translation){ + var line = draw.line = function (x,y,a,b,translation){ if (translation) { x += translation.a a += translation.a diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js new file mode 100644 index 0000000..8f409a8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -0,0 +1,49 @@ +var LineTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null + + var line = exports.line = [] + + var can_drag, dragging + + exports.down = function(e, cursor){ + this.cursor = cursor + switch (line.length) { + case 0: + line[0] = cursor.x_component() + can_drag = true + break + case 1: + line[1] = cursor.x_component() + can_drag = false + break + case 2: + line[0] = cursor.x_component() + line.pop() + can_drag = true + break + } + } + + exports.move = function(e, cursor){ + this.cursor = cursor + } + + exports.drag = function(e, cursor){ + if (dragging) { + line[1].a = cursor.x.b + line[1].b = cursor.y.b + } + else if (can_drag && cursor.magnitude() > 10/map.zoom) { + line[1] = cursor.y_component() + dragging = true + } + } + + exports.up = function(e, cursor){ + can_drag = dragging = false + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index c667cf5..92c8c9e 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,12 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.x_component = function(){ + return new vec2( this.x.a, this.y.a ) + } + Rect.prototype.y_component = function(){ + return new vec2( this.x.b, this.y.b ) + } Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index a81c89b..addf9a9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,10 +1,13 @@ -var BlueprintScaler = ModalView.extend({ +var BlueprintScaler = ModalFormView.extend({ el: ".blueprintScaler", + method: "/api/media/scale", + events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", + "click .uploadNewBlueprint": "showBlueprintUpload", "click #saveBlueprint": "save", }, @@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({ this.$blueprintMap = this.$("#blueprintMap") this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$pixels = this.$("[name=blueprint-pixels]") this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") @@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({ zoom_min: -6.2, zoom_max: 1, }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("position", new PositionTool) - map.ui.set_tool("position") + this.lineTool = new LineTool + map.ui.add_tool("line", this.lineTool) + map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - this.animate() + this.animating = false + }, + + showBlueprintUpload: function(){ + this.parent.blueprintUpload.show() }, pick: function(media){ + this.media = media + + if (!! media.scale) { + this.parent.useFloorplan(media) + } + this.floorplan.load({ media: media, keepImage: true }) + + if (! this.animating) { + this.animating = true + this.animate() + } }, animate: function(t){ requestAnimationFrame(this.animate.bind(this)) + + if (! this.animating) return var dt = t - this.last_t this.last_t = t @@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({ this.map.draw.translate() this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.ctx.strokeStyle = "#f00" + this.map.draw.ctx.lineWidth = 2/map.zoom + switch (this.lineTool.line.length) { + case 1: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.cursor.x.a, + this.lineTool.cursor.y.a + ) + break + case 2: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.line[1].a, + this.lineTool.line[1].b + ) + break + } this.map.draw.coords() @@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({ }, changeDimensions: function(){ + app.units = this.$units.val() + this.$dimensions.unitVal() }, changeUnits: function(){ + app.units = this.$units.val() + this.$dimensions.resetUnitVal() + }, + lineLength: function(){ + if (this.lineTool.line.length !== 2) return 0 + var line = this.lineTool.line + return dist( line[0].a, line[0].b, line[1].a, line[1].b ) + } + + validate: function(){ + var val = this.$dimensions.unitVal() + var errors = [] + if (! this.lineLength()) { + errors.push("no line") + alert("Please click two corners of a wall and then specify how long it is in feet or meters.") + } + else if (val == 0) { + errors.push("no measurement") + alert("Please tell us how long the wall is in feet or meters.") + } + return errors }, - save: function(){ + + showErrors: function(){}, + + serialize: function(){ + var fd = new FormData() + fd.append( "_id", this.media._id) + fd.append( "units", this.$units.val() ) + fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() ) + fd.append( "_csrf", $("[name=_csrf]").val()) + return fd + }, + + success: function(){ + this.animating = false + this.parent.useFloorplan(media) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a803f12..6b204e5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -33,6 +33,9 @@ var BlueprintView = View.extend({ hideExtras: function(){ }, + + useFloorplan: function(media){ + }, pickWall: function(wall, pos){ }, diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index cff1d78..e15e188 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({ photo: { type: String, }, + media: mongoose.Schema.Types.Mixed, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 308b4c8..3e0c097 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -99,8 +99,8 @@ body {

- - + + - -
-- cgit v1.2.3-70-g09d2 From ca76295998fb75e9ab9c83ee9a1a694b9e0656c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 11:23:46 -0400 Subject: making rooms from segments --- .../javascripts/rectangles/engine/map/draw.js | 18 ++++++++- .../rectangles/engine/shapes/regionlist.js | 46 ++++++++++++---------- .../javascripts/rectangles/util/constants.js | 2 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 18 +++++---- 4 files changed, 55 insertions(+), 29 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index cc2f4d8..5824cc8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -189,9 +189,25 @@ Map.Draw = function(map, opt){ var sides = map.sides() var quant = sides.clone().quantize(MAP_GRID_SIZE) for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { - line(x, sides.y.a, x, sides.y.b) + if (Math.round(x) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } + line(x, sides.y.a, x, sides.y.b) } for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { + if (Math.round(y) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 42519cf..acb4ead 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -6,45 +6,51 @@ var RegionList = (function(){ RegionList.build = function(){ var segments = RegionList.getSortedSegments() +// var xx = t % (segments[0].x.a - segments[segments.length-1].x.b) + // loop over them from left to right -// console.log(segments.map(function(s){ return s.toString() }).join("\n")) +// console.log(segments.map(function(s){ return s.toString() }).join("\n")) var rooms = [] var open_segments = [] - var segment, open_segment, y_segments + var segment, open_segment, x_segment, y_segments, overlapped for (var i = 0; i < segments.length; i++) { segment = segments[i] - if (! isVertical(segment)) { + if (! segment.isVertical()) { continue } + overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] if (segment.y.overlaps(open_segment.y)) { // if we have overlap, it means we have made a full room - - y_segments = open_segment.y.split(segment.y) - - if (y_segments.length == 1) { - open_segment.x.b = segment.x.b - rooms.push(open_segment) - } - -// other_side = clone_segment(open_segment) -// other_side[0].a = segment[0].a -// other_side[1].a = segment[1].a -// rooms.push([open_segment, other_side]) - open_segments.splice(j, 1) - j-- + console.log(segment.y+"", "overlaps", open_segment.y+"") + overlapped = true + open_segments.splice(j--, 1) + + x_segment = new vec2( open_segment.x.a, segment.x.b ) + y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + console.log(y_segments.map(function(s){ return s+"" }).join("\n")) + y_segments.forEach(function(seg){ + + rooms.push(new Rect( x_segment, seg[0] )) + + var new_seg = new Rect( segment.x, seg[0] ) + open_segments.shift(new_seg) + j++ + }) } } - open_segments.push(segment) + if (! overlapped) { + open_segments.push(segment) + } } -// console.log(rooms.map(function(s){ return s[0][0].toString() + " " + s[0][1].toString() + " " + s[1][0].toString() + " " + s[1][1].toString() }).join("\n")) +// console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - return rooms + return { rooms: rooms, open_segments: open_segments, segments: segments } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a70cacd..522689b 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -22,7 +22,7 @@ var height_min = 200, resize_margin = 8, cursor_amp = 1.5, DEFAULT_PICTURE_WIDTH = 350, - MAP_GRID_SIZE = 360 // 10 feet + MAP_GRID_SIZE = 36 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 18ecf5f..7ec1352 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,6 +5,8 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + rooms: [], + initialize: function(opt){ this.parent = opt.parent @@ -81,6 +83,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() + this.rooms = RegionList.build() }, animate: function(t, dt){ @@ -93,7 +96,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - this.floorplan.draw(map.draw.ctx, true) + // this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -113,13 +116,14 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - var rooms = RegionList.build() - rooms.forEach(function(room,i){ + this.rooms.segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#f00" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+1, seg.height()+1 ) + }) + + this.rooms.rooms.forEach(function(room,i){ map.draw.ctx.fillStyle = colors[i % colors.length] - map.draw.ctx.fillRect( room[0][0].a, room[0][1].b, - room[1][0].a - room[0][0].a, - room[0][0].b - room[0][1].b - ) + map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) }) map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 0c1864a114a2efe1a3bb8b2b4951e8655712757a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 15:19:05 -0400 Subject: dedupe new rooms --- .../javascripts/rectangles/engine/map/draw.js | 4 +- .../rectangles/engine/shapes/regionlist.js | 62 +++++++++++++++++----- .../assets/javascripts/rectangles/models/vec2.js | 3 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 8 +-- 4 files changed, 58 insertions(+), 19 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5824cc8..f47f10c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -189,7 +189,7 @@ Map.Draw = function(map, opt){ var sides = map.sides() var quant = sides.clone().quantize(MAP_GRID_SIZE) for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { - if (Math.round(x) % 10 == 0) { + if (Math.round(x) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom } @@ -200,7 +200,7 @@ Map.Draw = function(map, opt){ line(x, sides.y.a, x, sides.y.b) } for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { - if (Math.round(y) % 10 == 0) { + if (Math.round(y) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index f86968f..93a0df7 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -6,52 +6,86 @@ var RegionList = (function(){ RegionList.build = function(){ var segments = RegionList.getSortedSegments() -// var xx = t % (segments[0].x.a - segments[segments.length-1].x.b) - - // loop over them from left to right -// console.log(segments.map(function(s){ return s.toString() }).join("\n")) - var rooms = [] + var seen_rooms = {} var open_segments = [] var closed_segments = [] - var segment, open_segment, x_segment, y_segments, overlapped + var segment, open_segment, x_segment, y_segments, overlapped, seen_segments for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } - console.log(segment+"") overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] if (segment.y.overlaps(open_segment.y)) { - // if we have overlap, it means we have made a full room - console.log(segment.y+"", "overlaps", open_segment.y+"") overlapped = true closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, TOP, BOTTOM) - console.log(y_segments.map(function(s){ return s+"" }).join("\n")) + + seen_segments = {} + y_segments.forEach(function(seg){ - rooms.push(new Rect( x_segment, seg[0] )) + seen_segments[ seg[0]+"" ] = true + var room = new Rect( x_segment, seg[0] ) + + if (seen_rooms[ room+"" ]) return; + + seen_rooms[ room+"" ] = true + rooms.push(room) + var new_seg = new Rect( segment.x, seg[0] ) + open_segments.unshift(new_seg) + j++ + }) + y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + y_segments.forEach(function(seg){ + if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) open_segments.unshift(new_seg) j++ }) } } - if (! overlapped) { + if (overlapped) { + // sort open segments? + open_segments = open_segments.sort(function(a,b){ + if (a.y.a < b.y.a) { return -1 } + if (a.y.a == b.y.a) { return 0 } + if (a.y.a > b.y.a) { return 1 } + }) + + if (open_segments.length < 2) { continue } + + for (var k = 1; k < open_segments.length; k++) { + if (open_segments[k-1].y.containsVec(open_segments[k].y)) { + open_segments.splice(k--, 1) + } + else if (open_segments[k-1].y.overlaps(open_segments[k].y)) { + open_segments[k].y = open_segments[k].y.clone() + console.log(open_segments[k-1].y+"", open_segments[k].y+"") + open_segments[k].y.a = open_segments[k-1].y.b + } + } + } + else { open_segments.push(segment) } } -// console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - console.log({ rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments }) + for (var i = 0; i < segments.length; i++) { + segment = segments[i] + if (! segment.isHorizontal()) { + continue + } + } + return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } } diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 90a56c6..d37bc12 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -111,6 +111,9 @@ vec2.prototype.containsDisc = function(n,r){ return this.a <= n-r && n+r <= this.b } + vec2.prototype.containsVec = function(v){ + return this.a <= v.a && v.b <= this.b + } vec2.prototype.clamp = function(n){ return clamp(n, this.a, this.b) } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index cf9dea6..0b27d0c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -108,7 +108,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ } shapes.forEach(function(shape){ - shape.draw(map.draw.ctx) +// shape.draw(map.draw.ctx) }) map.draw.ctx.strokeStyle = "#f00"; @@ -117,14 +117,16 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.camera(scene.camera) this.rooms.open_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "#00f" + map.draw.ctx.fillStyle = "rgba(0,0,255,0.2)" map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) this.rooms.closed_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "#0ff" + map.draw.ctx.fillStyle = "rgba(0,255,0,0.2)" map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) + + var colors = ["rgba(0,0,0,0.1)"] this.rooms.rooms.forEach(function(room,i){ map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From 3e87dcb3de9ad29f7c021792cbafc32d4c758d3f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 16:05:55 -0400 Subject: assigning sides --- .../javascripts/rectangles/engine/map/draw.js | 14 ----- .../rectangles/engine/shapes/regionlist.js | 59 +++++++++++++++++++--- .../javascripts/ui/blueprint/BlueprintEditor.js | 24 +++------ 3 files changed, 59 insertions(+), 38 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index f47f10c..c97603b 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -169,20 +169,6 @@ Map.Draw = function(map, opt){ } draw.coords = function(){ - /* - ctx.fillStyle = "#888"; - dot_at(0,0) - ctx.fillStyle = "#bbb"; - dot_at(100,0) - dot_at(0,100) - ctx.fillStyle = "#ddd"; - dot_at(200,0) - dot_at(0,200) - ctx.fillStyle = "#eee"; - dot_at(300,0) - dot_at(0,300) - */ - ctx.strokeStyle = "rgba(0,0,0,0.1)" ctx.lineWidth = 1/map.zoom diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 93a0df7..fb2c8e5 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -27,7 +27,7 @@ var RegionList = (function(){ open_segments.splice(j--, 1) x_segment = new vec2( open_segment.x.a, segment.x.b ) - y_segments = open_segment.y.split(segment.y, TOP, BOTTOM) + y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} @@ -35,9 +35,11 @@ var RegionList = (function(){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) - if (seen_rooms[ room+"" ]) return; - + if (seen_rooms[ room+"" ]) return seen_rooms[ room+"" ] = true + + room.sides = 0 + rooms.push(room) var new_seg = new Rect( segment.x, seg[0] ) open_segments.unshift(new_seg) @@ -54,7 +56,6 @@ var RegionList = (function(){ } } if (overlapped) { - // sort open segments? open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } if (a.y.a == b.y.a) { return 0 } @@ -69,7 +70,6 @@ var RegionList = (function(){ } else if (open_segments[k-1].y.overlaps(open_segments[k].y)) { open_segments[k].y = open_segments[k].y.clone() - console.log(open_segments[k-1].y+"", open_segments[k].y+"") open_segments[k].y.a = open_segments[k-1].y.b } } @@ -79,14 +79,57 @@ var RegionList = (function(){ } } + var splits, splitter + for (var i = 0; i < segments.length; i++) { segment = segments[i] - if (! segment.isHorizontal()) { - continue + var horizontal = segment.isHorizontal(), vertical = segment.isVertical() + for (var r = 0; r < rooms.length; r++){ + room = rooms[r] + if (vertical) { + if (segment.y.containsVec(room.y)) { + if (segment.x.a == room.x.a) { + room.sides |= LEFT + } + if (segment.x.a == room.x.b) { + room.sides |= RIGHT + } + } + } + if (horizontal) { + if (segment.x.containsVec(room.x)) { + if (segment.y.a == room.y.a) { + room.sides |= FRONT + } + if (segment.y.a == room.y.b) { + room.sides |= BACK + } + } +/* + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.containsVec(segment.x)) { + splits = room.x.split(segment.x, LEFT, RIGHT) + for (var k = 0; k < splits.length; k++) { + splitter = splits[k] + var new_room = new Rect( splitter[0], room.y ) + new_room.sides |= splitter[1] + if (segment.x.containsVec(splitter[0])) { + if (segment.y.a == room.y.a) { + room.sides |= FRONT + } + if (segment.y.a == room.y.b) { + room.sides |= BACK + } + } + rooms.unshift(new_room) + r++ + } + } +*/ + } } } - return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } + return { rooms: rooms } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 0b27d0c..c7aa219 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -108,30 +108,22 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ } shapes.forEach(function(shape){ -// shape.draw(map.draw.ctx) + shape.draw(map.draw.ctx) }) map.draw.ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - - this.rooms.open_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "rgba(0,0,255,0.2)" - map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) - }) - - this.rooms.closed_segments.forEach(function(seg,i){ - map.draw.ctx.fillStyle = "rgba(0,255,0,0.2)" - map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) - }) - var colors = ["rgba(0,0,0,0.1)"] +// var colors = ["rgba(0,0,0,0.1)"] - this.rooms.rooms.forEach(function(room,i){ - map.draw.ctx.fillStyle = colors[i % colors.length] - map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) - }) + map.draw.regions(this.rooms.rooms, colors, "#000") + +// this.rooms.rooms.forEach(function(room,i){ +// map.draw.ctx.fillStyle = colors[i % colors.length] +// map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) +// }) map.draw.ctx.restore() }, -- cgit v1.2.3-70-g09d2 From 48fc9b27a77126da649959c8f74ad8faffcd6e2c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 11:15:50 -0400 Subject: comment the regionlist algorithm --- .../javascripts/rectangles/engine/map/_map.js | 6 +- .../javascripts/rectangles/engine/rooms/builder.js | 1 + .../rectangles/engine/shapes/polyline.js | 4 ++ .../rectangles/engine/shapes/regionlist.js | 83 ++++++++++++++++------ .../rectangles/engine/shapes/shapelist.js | 2 + .../assets/javascripts/rectangles/models/vec2.js | 4 +- .../assets/javascripts/rectangles/models/wall.js | 5 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 5 +- 8 files changed, 79 insertions(+), 31 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 2aee962..e27346d 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -69,9 +69,9 @@ var Map = function(opt){ break } - base.resize = function(){ - canvas.width = base.dimensions.a = window.innerWidth - canvas.height = base.dimensions.b = window.innerHeight + base.resize = function(w, h){ + canvas.width = base.dimensions.a = w || window.innerWidth + canvas.height = base.dimensions.b = h || window.innerHeight // resize here - esp if 2d-hires } diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 5e09fab..f78fb91 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -14,6 +14,7 @@ PI = Math.PI HALF_PI = PI/2 TOP = CEILING, BOTTOM = FLOOR + $ = { browser: { mozilla: false } } function sidesToString(sides){ var s = "" if (sides & FRONT) s += "front " diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 6c64128..609a2c8 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,3 +1,7 @@ +// A Polyline is a set of points inputted by the user using the V2 editor to trace a blueprint. +// Additionally, it manages a set of MX objects which correspond to the walls in 3D. +// In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 71f19d8..663f3fd 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -1,36 +1,58 @@ +// This algorithm takes the polylines from ShapeList as input and produces +// a set of Rooms which can be used by the existing V1 mover and editor. + +// The algorithm assumes that +// 1) all angles are orthogonal +// 2) all polylines are closed + var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions RegionList.build = function(){ + + // first, get the segments sorted right to left & top to bottom var segments = RegionList.getSortedSegments() var rooms = [] var seen_rooms = {} var open_segments = [] - var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped, seen_segments + // first pass: generate rooms from the vertical segments only for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } + + // check all the "open segments" we know about, i.e. rooms where we've only found + // the right wall. overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] + + // if these two segments overlap each other, then there is a room between them. if (segment.y.overlaps(open_segment.y)) { overlapped = true - closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) + // the X part of the room will be the span between these two vertical segments' + // X components. the Y part of the room is the "split" or subdivision between + // the two horizontal vectors. + + // the split function is non-commutative, + // so we need to call A split B and B split A, + // then dedupe the segments we got back.. x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} + // check each of the splits.. if the two segments overlap, then we definitely + // have a room here. y_segments.forEach(function(seg){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) @@ -46,7 +68,8 @@ var RegionList = (function(){ j++ }) - y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + // splitting the other way.. + y_segments = segment.y.split(open_segment.y, 0, 0) y_segments.forEach(function(seg){ if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) @@ -55,6 +78,9 @@ var RegionList = (function(){ }) } } + + // if we have overlap, then re-sort the open segments Y-wise + // and (again) dedupe.. if (overlapped) { open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } @@ -74,6 +100,7 @@ var RegionList = (function(){ } } } + // if we don't have any overlap, then this is a new open segment. else { open_segments.push(segment) } @@ -81,11 +108,15 @@ var RegionList = (function(){ var splits, splitter + // second pass: now that we have a bunch of rooms, assign sides to all of them. + // sides are used in the "mover" script to do bounds checking. for (var i = 0; i < segments.length; i++) { segment = segments[i] var horizontal = segment.isHorizontal(), vertical = segment.isVertical() for (var r = 0; r < rooms.length; r++){ room = rooms[r] + + // vertical segments determine the left and right edges of the room, fairly simply. if (vertical) { if (segment.y.containsVec(room.y)) { if (segment.x.a == room.x.a) { @@ -96,6 +127,8 @@ var RegionList = (function(){ } } } + + // horizontal segments determine the front and back edges of the room. if (horizontal) { if (segment.x.containsVec(room.x)) { if (segment.y.a == room.y.a) { @@ -105,28 +138,30 @@ var RegionList = (function(){ room.sides |= BACK } } - - else if (segment.y.a == room.y.a || segment.y.a == room.y.b) { - if (room.x.overlaps(segment.x)) { - splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) - rooms.splice(r--, 1) - console.log(splits) - for (var k = 0; k < splits.length; k++) { - splitter = splits[k] - var new_room = new Rect( splitter[0], room.y ) - new_room.sides = 0 - new_room.sides |= splitter[1] | ( room.sides & FRONT_BACK ) - if (segment.x.overlaps( splitter[0] )) { - if (segment.y.a == new_room.y.a) { - new_room.sides |= FRONT - } - if (segment.y.a == new_room.y.b) { - new_room.sides |= BACK - } + + // however, since we did not split on horizontal segments, our rooms may + // only have partial overlap with these segments, in which case we need to + // split the rooms apart. + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.overlaps(segment.x)) { + + // split the room across the segment. preserve whether or not we know the + // room borders a segment on the left or right. + splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) + rooms.splice(r--, 1) + for (var k = 0; k < splits.length; k++) { + splitter = splits[k] + var new_room = new Rect( splitter[0], room.y ) + new_room.sides = splitter[1] | ( room.sides & FRONT_BACK ) + if (segment.x.overlaps( splitter[0] )) { + if (segment.y.a == new_room.y.a) { + new_room.sides |= FRONT + } + if (segment.y.a == new_room.y.b) { + new_room.sides |= BACK } - rooms.unshift(new_room) - r++ } + rooms.unshift(new_room) + r++ } } @@ -137,6 +172,8 @@ var RegionList = (function(){ return { rooms: rooms } } + + // Gets a list of polylines from the ShapeList and sorts the segments. RegionList.getSortedSegments = function(){ // get a list of all segments from these polylines var segments = shapes.getAllSegments() diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 4373caf..90714c2 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,3 +1,5 @@ +// The ShapeList manages the list of polylines which form a V2 layout. + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 226e56f..8942d92 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -214,13 +214,13 @@ } vec2.prototype.toString = function(){ - return "[" + round(this.a) + " " + round(this.b) + "]" + return "[" + Math.round(this.a) + " " + Math.round(this.b) + "]" } vec2.prototype.exactString = function(){ return "[" + this.a + " " + this.b + "]" } vec2.prototype.serialize = function(){ - return [ round(this.a), round(this.b) ] + return [ Math.round(this.a), Math.round(this.b) ] } vec2.prototype.deserialize = function(data){ this.a = data[0] diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 13f5cd7..9d4650b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -10,6 +10,11 @@ vec2 = require('./vec2') Rect = require('./rect') UidGenerator = require('../util/uid') + wall_rotation = {} + wall_rotation[FRONT] = PI + wall_rotation[BACK] = 0 + wall_rotation[LEFT] = HALF_PI + wall_rotation[RIGHT] = -HALF_PI } var Wall = function(opt){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 39cf62e..a341a24 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -62,8 +62,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ if (this.parent.orbiting) { scene.width = window.innerWidth/2 scene.height = window.innerHeight - this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2 - this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight + this.parent.map.resize( window.innerWidth/2, window.innerHeight ) this.parent.map.canvas.style.display = "block" } else { @@ -119,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // -// map.draw.regions(this.rooms.rooms, colors, "#000") + map.draw.regions(this.rooms.rooms, colors, "#000") // this.rooms.rooms.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From a9bf197a6e8f91cc91d772238168d9be1beb3c4d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 12:15:14 -0400 Subject: makin sure tests work --- .../javascripts/rectangles/engine/map/tools/line.js | 16 +++++++++++++++- .../javascripts/rectangles/engine/map/tools/ortho.js | 2 ++ .../javascripts/rectangles/engine/map/tools/polyline.js | 2 ++ .../javascripts/rectangles/engine/shapes/polyline.js | 1 - .../javascripts/rectangles/engine/shapes/regionlist.js | 2 +- .../javascripts/rectangles/engine/shapes/shapelist.js | 7 ++++++- .../assets/javascripts/ui/blueprint/BlueprintEditor.js | 8 ++++---- .../assets/javascripts/ui/blueprint/BlueprintSettings.js | 1 + public/assets/test/ortho2.html | 9 ++++++++- 9 files changed, 39 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js index 8f409a8..8fe4fff 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/line.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -1,3 +1,6 @@ +// This tool lets you define a very simple line between two points. +// It is used by the BlueprintScaler to specify a sample distance to scale. + var LineTool = MapTool.extend(function(base){ var exports = {} @@ -8,6 +11,17 @@ var LineTool = MapTool.extend(function(base){ var can_drag, dragging exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + cursor.quantize(1/map.zoom) + app.router.blueprintView.map.center.a = cursor.x.a + app.router.blueprintView.map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + return + } + this.cursor = cursor switch (line.length) { case 0: @@ -44,6 +58,6 @@ var LineTool = MapTool.extend(function(base){ exports.up = function(e, cursor){ can_drag = dragging = false } - + 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 index ef41096..918ac0d 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -14,6 +14,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -35,6 +36,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { else if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 1ab86f6..6716180 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -11,6 +11,7 @@ var PolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -27,6 +28,7 @@ var PolylineTool = MapTool.extend(function (base) { if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 609a2c8..54e11c6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -133,7 +133,6 @@ var Polyline = Fiber.extend(function(base){ exports.build = function(){ this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) this.mx = new MX.Polyline(this) - shapes.add(this) } exports.rebuild = function(){ this.mx.rebuild() diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 663f3fd..86269a6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -169,7 +169,7 @@ var RegionList = (function(){ } } - return { rooms: rooms } + return rooms } diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 90714c2..9cbf165 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -85,8 +85,13 @@ var ShapeList = Fiber.extend(function(base){ data && data.forEach(function(points){ var line = new Polyline() line.deserialize(points) - line.build() + shapes.add(line) }.bind(this)) } + exports.build = function(){ + this.shapes.forEach(function(shape){ + shape.build() + }) + } return exports }) \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index a341a24..547cdca 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,7 +5,7 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ - rooms: [], + regions: [], initialize: function(opt){ this.parent = opt.parent @@ -82,7 +82,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() - this.rooms = RegionList.build() + this.regions = RegionList.build() }, animate: function(t, dt){ @@ -118,9 +118,9 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // - map.draw.regions(this.rooms.rooms, colors, "#000") + map.draw.regions(this.regions, colors, "#000") -// this.rooms.rooms.forEach(function(room,i){ +// this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] // map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) // }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 252e3f1..9c8808a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -35,6 +35,7 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ if (data.shapes) { shapes.destroy() shapes.deserialize( data.shapes ) + shapes.build() } this.data = data }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 448f029..ef77256 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -58,7 +58,9 @@ body { - + + + + -- cgit v1.2.3-70-g09d2 From c781911322c84eb0c2aa4a00860016437d7b7cba Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 18:30:33 -0400 Subject: surface blueprints on new project modal --- .../rectangles/engine/map/tools/arrow.js | 2 + .../rectangles/engine/map/tools/eraser.js | 2 + .../rectangles/engine/map/tools/line.js | 2 +- .../rectangles/engine/map/tools/ortho.js | 5 +- .../rectangles/engine/map/tools/polyline.js | 2 + .../rectangles/engine/map/tools/position.js | 2 + .../rectangles/engine/map/tools/start.js | 2 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 9 +- public/assets/javascripts/ui/site/LayoutsModal.js | 190 +++++++++++++++++++-- public/assets/stylesheets/app.css | 4 +- server/lib/api/layouts.js | 18 +- views/projects/layouts-modal.ejs | 3 + 12 files changed, 211 insertions(+), 30 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js index 2a73954..00478d4 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -1,3 +1,5 @@ +// Tool used to move corners of polylines + var ArrowTool = MapTool.extend(function(base){ var exports = {} diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js index 648cd11..8fc3687 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -1,3 +1,5 @@ +// Tool used to delete lines + var EraserTool = MapTool.extend(function(base){ var exports = {} exports.down = function(e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js index a8e2473..8175d66 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/line.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -1,4 +1,4 @@ -// This tool is used to define a very simple line between two points. +// Tool is used to define a very simple line between two points. // It is used by the BlueprintScaler to specify a sample distance to scale. var LineTool = MapTool.extend(function(base){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index 918ac0d..6ced728 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -1,6 +1,7 @@ +// Tool to make a polyline where all walls are orthogonal + 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 = {} diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 6716180..445ae26 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -1,3 +1,5 @@ +// Tool used to draw polylines with arbitrary angles + var PolylineTool = MapTool.extend(function (base) { var exports = {} exports.down = function(e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js index a994f5a..f8365bc 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/position.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js @@ -1,3 +1,5 @@ +// Tool used to set position on the map and let you change the view by dragging. + var PositionTool = MapTool.extend(function(base){ var exports = { recenterCursor: false, diff --git a/public/assets/javascripts/rectangles/engine/map/tools/start.js b/public/assets/javascripts/rectangles/engine/map/tools/start.js index cca387c..203a85f 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/start.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/start.js @@ -1,4 +1,4 @@ -// This tool is used to set the start position on the map. +// Tool is used to set the start position on the map. var StartPositionTool = MapTool.extend(function(base){ var exports = {} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index fbb71d5..fe1073a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -37,8 +37,12 @@ var BlueprintUploader = UploadView.extend({ if (data && data.length) { this.$blueprints.show() data.forEach(this.append.bind(this)) - this.hide() - if (this.nameToShow && this.nameToShow !== "new") { + if (this.nameToShow === "new") { + // don't pick anything.. + this.show() + } + else if (! this.nameToShow) { + this.hide() data.some(function(el){ if (el.slug == this.nameToShow) { this.parent.scaler.pick(el) @@ -47,6 +51,7 @@ var BlueprintUploader = UploadView.extend({ }.bind(this)) } else { + this.hide() this.parent.scaler.pick(data[0]) } } diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 87251af..a9c6ef0 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -6,6 +6,10 @@ var LayoutsIndex = View.extend({ this.$templatesList = this.$(".templates-list") this.$noTemplates = this.$(".no-templates") this.$form = this.$("form") + + this.$userTemplatesList = this.$(".userTemplatesList") + this.$blueprintsList = this.$(".blueprintsList") + this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']") }, load: function(type){ @@ -15,11 +19,6 @@ var LayoutsIndex = View.extend({ }, populate: function(data){ -/* - if (data.user.plan_level < 1 && data.projectCount == 1) { - // show lockout message - } -*/ if (! data.layouts.length) { this.$templates.hide() this.$form.hide() @@ -89,20 +88,89 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ action: "/api/layout", events: { - "click .templates span": 'toggleActive', + "click .templates span": 'pick', + "click .userTemplates span": 'pick', + "click .blueprints span": 'pickBlueprint', "submit form": 'newLayout', }, - toggleActive: function(e){ + pick: function(e){ e.preventDefault() - this.$(".templates .active").removeClass("active") var $layout = $(e.currentTarget) - $layout.addClass("active") + window.location.pathname = "/layout/" + $layout.data("slug") + }, + + pick: function(e){ + e.preventDefault() + var $blueprint = $(e.currentTarget) + $blueprint.addClass("active") - // actually do window.location.pathname = "/layout/" + $layout.data("slug") }, - + + populate: function(data){ +/* + if (data.user.plan_level < 1 && data.projectCount == 1) { + // show lockout message + } +*/ + if (! data.layouts.length) { + this.$templates.hide() + this.$form.hide() + this.$noTemplates.show() + } + this.$templatesList.empty() + data.layouts.forEach(function(room){ + var $span = $("") + $span.data("slug", room.slug) + + var $label = $("
-- cgit v1.2.3-70-g09d2 From 685d5fd7b32ac868a0b2d8ac8a2a1b4120f274cf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 11:57:51 -0400 Subject: fork orthopolyline --- .../rectangles/engine/map/tools/ortho.js | 2 +- .../javascripts/rectangles/engine/shapes/ortho.js | 41 ++++++++++++++++++++++ .../rectangles/engine/shapes/polyline.js | 21 +++++++---- .../rectangles/engine/shapes/shapelist.js | 14 ++++++-- .../javascripts/ui/blueprint/BlueprintSettings.js | 3 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 2 +- .../javascripts/ui/blueprint/BlueprintView.js | 22 ++++++++++++ public/assets/stylesheets/app.css | 4 +-- views/partials/header.ejs | 2 ++ views/partials/scripts.ejs | 1 + views/profile.ejs | 2 ++ 11 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/shapes/ortho.js (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index 6ced728..374c822 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -48,7 +48,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } else { map.ui.placing = true - shapes.workline = new Polyline () + shapes.workline = new OrthoPolyline () shapes.workline.add(p) first_point = prev_point = p horizontal = false diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js new file mode 100644 index 0000000..8a8f928 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -0,0 +1,41 @@ +// An OrthoPolyline is a Polyline where all angles are 90 degrees. + +var OrthoPolyline = Polyline.extend(function(base){ + var exports = {} + exports.type = function(){ + return "ortho" + } + exports.instantiate = function(){ + return new OrthoPolyline + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.draw = function(ctx, fillStyle, strokeStyle){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = fillStyle + ctx.strokeStyle = strokeStyle + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + strokeStyle && ctx.stroke() + if (! map.ui.placing || this.closed) { + fillStyle && ctx.fill() + } + } + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index fc6cad7..65e22ad 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -9,6 +9,12 @@ var Polyline = Fiber.extend(function(base){ this.mx_points = [] this.closed = false } + exports.type = function(){ + return "polyline" + } + exports.instantiate = function(){ + return new Polyline + } exports.add = function(p){ this.points.push( p ) this.mx_points.push( new MX.Point(p) ) @@ -25,19 +31,19 @@ var Polyline = Fiber.extend(function(base){ exports.getHeadAtIndex = function(index){ if (index == 0) { return null } if (index == this.points.length-1) { return this.clone() } - var head = new Polyline() + var head = this.instantiate() head.points = this.points.slice(0, index+1) return head } exports.getTailAtIndex = function(index){ if (index == this.points.length-1) { return null } if (index == 0) { return this.clone() } - var tail = new Polyline() + var tail = this.instantiate() tail.points = this.points.slice(index, this.points.length) return tail } exports.clone = function(){ - var clone = new Polyline() + var clone = this.instantiate() clone.points = this.points.concat() } exports.hasPointNear = function(p){ @@ -148,10 +154,13 @@ var Polyline = Fiber.extend(function(base){ return segments } exports.serialize = function(){ - return this.points.map(function(point){ return [point.a, point.b] }) + return { + type: this.type(), + points: this.points.map(function(point){ return [point.a, point.b] }), + } } - exports.deserialize = function(points){ - this.points = points.map(function(point){ return new vec2(point[0], point[1]) }) + exports.deserialize = function(data){ + this.points = (data.points || data).map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 75ecae6..e5a70fb 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -87,9 +87,17 @@ var ShapeList = Fiber.extend(function(base){ }) } exports.deserialize = function(data){ - data && data.forEach(function(points){ - var line = new Polyline() - line.deserialize(points) + data && data.forEach(function(shape_data){ + var line + switch (shape_data.type) { + case 'ortho': + line = new OrthoPolyline() + break + default: + line = new Polyline() + break + } + line.deserialize(shape_data) shapes.add(line) }.bind(this)) } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 80c9355..8addb9c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -93,10 +93,9 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ fd.append( "_id", this.$id.val() ) fd.append( "name", this.$name.val() ) fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) - fd.append( "startPosition", JSON.stringify( this.parent.startPosition ) ) + fd.append( "startPosition", JSON.stringify( this.parent.quantizeStartPosition() ) ) fd.append( "wallHeight", this.parent.info.$height.unitVal() ) fd.append( "units", this.parent.info.$units.val() ) - return fd }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index fe1073a..dc3c281 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -65,7 +65,7 @@ var BlueprintUploader = UploadView.extend({ var $el = $(e.currentTarget) var media = $el.data("media") this.hide() - this.parent.scaler.pick(media, true) + this.parent.scaler.pick(media) }, destroy: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index ecbb536..19b9e84 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -29,6 +29,28 @@ var BlueprintView = View.extend({ orbiting: true, startPosition: {}, + quantizeStartPosition: function(){ + // + var regions = RegionList.build() + var pos = this.startPosition + var startPositionIsInARoom = regions.some(function(region){ + return region.contains(pos.x, pos.z) + }) + if (startPositionIsInARoom) { + return this.startPosition + } + else { + var center = regions[0].center() + return { + x: center.a, + y: viewHeight, + z: center.b, + rotationX: 0, + rotationY: Math.PI/2, + } + } + }, + buildMap: function(){ // i forget if this has to be global map = new Map ({ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 634ea60..e4f1b27 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1156,6 +1156,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } width: 100%; height: 100%; padding: 20px 0 40px 0; + text-align: center; } .templates-list, .userTemplatesList, @@ -1186,8 +1187,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } } .templates span { - display: block; - float: left; + display: inline-block; margin: 1vw 0; width:20%; padding: 2vw; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index bb8fc6e..ce9ffae 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -64,7 +64,9 @@ [[ if (profile && String(user._id) == String(profile._id)) { ]] Settings + [[ } else if (! profile) { ]] Profile [[ } ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index bac4120..da3f0ba 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -86,6 +86,7 @@ + diff --git a/views/profile.ejs b/views/profile.ejs index 63a07f5..d3ae10e 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -78,7 +78,9 @@ [[ } ]]
+ [[ include partials/edit-profile ]] [[ include projects/layouts-modal ]] [[ include projects/edit-project ]] -- cgit v1.2.3-70-g09d2 From 464bd3bfe74695955239e176dce8fe885bba8ac3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 12:44:17 -0400 Subject: arrow tool can translate walls orthogonally --- .../rectangles/engine/map/tools/arrow.js | 47 +++++++++++++++++++--- .../javascripts/rectangles/engine/shapes/ortho.js | 16 ++++++++ .../rectangles/engine/shapes/polyline.js | 28 +++++++++++++ .../javascripts/ui/blueprint/BlueprintToolbar.js | 2 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 3 ++ 5 files changed, 89 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js index 00478d4..0b0557e 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -3,16 +3,33 @@ var ArrowTool = MapTool.extend(function(base){ var exports = {} - var selected_point = null, original_point = null, selected_shape = null + var selected_point = null, selected_segment = null, original_point = null, selected_shape = null + var src_points, dest_points 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) { + if (p && p.shape.type() !== "ortho") { selected_shape = p.shape selected_point = p.point original_point = selected_point.clone() + return + } + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + + selected_segment = segment + console.log(segment.head, segment.tail) + selected_shape = segment.shape + src_points = segment.shape.cloneSegment( segment ) + dest_points = segment.shape.getSegment( segment ) + + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b } else { map.ui.set_drag_tool("position") @@ -28,6 +45,15 @@ var ArrowTool = MapTool.extend(function(base){ last_point.assign(p.point) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b + return + } + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b } else { document.body.style.cursor = "crosshair" @@ -35,13 +61,22 @@ 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() + if (selected_point) { + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + else if (selected_segment) { + selected_shape.translateSegment( + src_points, dest_points, + cursor.x.magnitude(), cursor.y.magnitude() + ) + selected_shape.rebuild() + } } exports.up = function(e, cursor){ - selected_point = selected_shape = original_point = null + selected_point = selected_shape = selected_segment = original_point = null } return exports diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index 8a8f928..c1acae5 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -33,6 +33,22 @@ var OrthoPolyline = Polyline.extend(function(base){ } } } + exports.translateSegment = function(src, dest, dx, dy) { + if (src[0].a == src[1].a) { + dest[0].a = src[0].a + dx + dest[1].a = src[1].a + dx + if (src.length == 3) { + dest[2].a = src[2].a + dx + } + } + else { + dest[0].b = src[0].b + dy + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].b = src[2].b + dy + } + } + } exports.close = function(){ this.points[this.points.length] = this.points[0] this.closed = true diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 65e22ad..579d0ea 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -46,6 +46,32 @@ var Polyline = Fiber.extend(function(base){ var clone = this.instantiate() clone.points = this.points.concat() } + exports.getSegment = function(segment){ + var seg = [ + this.points[segment.head], + this.points[segment.tail], + ] + if (segment.head == 0) { + seg.push( this.lastPoint() ) + } + else if (segment.tail == this.points.length-1) { + seg.push( this.firstPoint() ) + } + return seg + } + exports.cloneSegment = function(segment){ + return this.getSegment(segment).map(function(point){ return point.clone() }) + } + exports.translateSegment = function(src, dest, dx, dy){ + dest[0].a = src[0].a + dx + dest[0].b = src[0].b + dy + dest[1].a = src[1].a + dx + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].a = src[2].a + dx + dest[2].b = src[2].b + dy + } + } exports.hasPointNear = function(p){ var point for (var i = 0; i < this.points.length; i++){ @@ -156,10 +182,12 @@ var Polyline = Fiber.extend(function(base){ exports.serialize = function(){ return { type: this.type(), + closed: this.closed, points: this.points.map(function(point){ return [point.a, point.b] }), } } exports.deserialize = function(data){ + this.closed = data.closed || false this.points = (data.points || data).map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 7721298..8b0a08f 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -24,7 +24,7 @@ var BlueprintToolbar = View.extend({ this.$eraserMode = this.$('[data-role=eraser-mode]') this.$startPositionMode = this.$('[data-role=start-position-mode]') - this.orthoPolylineMode() + this.arrowMode() }, showUploader: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index dc3c281..aa62a4c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -66,6 +66,9 @@ var BlueprintUploader = UploadView.extend({ var media = $el.data("media") this.hide() this.parent.scaler.pick(media) + if (media.slug) { + window.history.pushState(null, document.title, "/blueprint/" + media.slug) + } }, destroy: function(e){ -- cgit v1.2.3-70-g09d2 From ee110d4725943bbc2b783323ec5087324531ca33 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 18:17:14 -0400 Subject: get rooms api working with shapes --- .../javascripts/rectangles/engine/map/_map.js | 3 + .../javascripts/rectangles/engine/map/draw.js | 19 +-- .../javascripts/rectangles/engine/shapes/ortho.js | 9 ++ .../rectangles/engine/shapes/polyline.js | 9 ++ .../rectangles/engine/shapes/regionlist.js | 11 ++ .../rectangles/engine/shapes/shapelist.js | 13 +- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 7 +- server/lib/api/rooms.js | 139 +++++++++++++++------ 9 files changed, 161 insertions(+), 51 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index e27346d..6492db6 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -50,6 +50,7 @@ var Map = function(opt){ switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Ortho (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -57,6 +58,7 @@ var Map = function(opt){ case "editor": base.draw = new Map.Draw (base) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Editor (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -64,6 +66,7 @@ var Map = function(opt){ case "minimap": base.draw = new Map.Draw (base, { center: scene.camera, minimap: true }) + base.draw.grid_size = MAP_GRID_SIZE * 10 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 fd05f86..4f4759f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -179,8 +179,8 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(MAP_GRID_SIZE) - for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { + var quant = sides.clone().quantize(draw.grid_size) + for (var x = quant.x.a - draw.grid_size; x <= quant.x.b; x += draw.grid_size) { if (Math.round(x) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom @@ -191,17 +191,18 @@ Map.Draw = function(map, opt){ } line(x, sides.y.a, x, sides.y.b) } - for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { - if (Math.round(y) % 360 == 0) { + + for (var y = quant.y.a - draw.grid_size; y <= quant.y.b; y += draw.grid_size) { + if (Math.round(y) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom - } - else { + } + else { ctx.strokeStyle = "rgba(0,0,0,0.05)" ctx.lineWidth = 1/map.zoom - } - line(sides.x.a, y, sides.x.b, y) - } + } + line(sides.x.a, y, sides.x.b, y) + } } // diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index c1acae5..163f646 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -1,5 +1,9 @@ // An OrthoPolyline is a Polyline where all angles are 90 degrees. +if (! ('window' in this) ) { + var Polyline = require("./polyline.js") +} + var OrthoPolyline = Polyline.extend(function(base){ var exports = {} exports.type = function(){ @@ -55,3 +59,8 @@ var OrthoPolyline = Polyline.extend(function(base){ } return exports }) + + +if (! ('window' in this) ) { + module.exports = OrthoPolyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 579d0ea..b2cd92f 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -2,6 +2,11 @@ // Additionally, it manages a set of MX objects which correspond to the walls in 3D. // In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") +} + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -201,3 +206,7 @@ var Polyline = Fiber.extend(function(base){ } return exports }) + +if (! ('window' in this) ) { + module.exports = Polyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 0dd4a1e..8c9e732 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -5,6 +5,13 @@ // 1) all angles are orthogonal // 2) all polylines are closed +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") + var Rect = require("../../models/rect") + var sort = require("../../util/sort") +} + var RegionList = (function(){ var RegionList = {} @@ -223,6 +230,10 @@ var RegionList = (function(){ } return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) } + + if (! ('window' in this) ) { + module.exports = RegionList + } return RegionList diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 2d33af2..21beb76 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,5 +1,11 @@ // The ShapeList manages the list of polylines which form a V2 layout. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var Polyline = require("./polyline.js") + var OrthoPolyline = require("./ortho.js") +} + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -110,4 +116,9 @@ var ShapeList = Fiber.extend(function(base){ }) } return exports -}) \ No newline at end of file +}) + +if (! ('window' in this) ) { + shapes = new ShapeList + module.exports = shapes +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 83bc8b7..d8cfca6 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.shapes) { + if (data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 1ba97cf..43e81d8 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -76,7 +76,12 @@ var ReaderView = View.extend({ }, build: function(data){ - data.rooms && Rooms.deserialize(data.rooms) + if (data.shapes.length) { + Rooms.deserializeFromShapes(data) + } + else { + Rooms.deserialize(data.rooms) + } data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) data.sculpture && Sculpture.deserialize(data.sculpture) diff --git a/server/lib/api/rooms.js b/server/lib/api/rooms.js index c044309..2a1d2fe 100644 --- a/server/lib/api/rooms.js +++ b/server/lib/api/rooms.js @@ -6,6 +6,8 @@ var Clipper = require("../../../public/assets/javascripts/rectangles/engine/room var Builder = require("../../../public/assets/javascripts/rectangles/engine/rooms/builder.js") var Grouper = require("../../../public/assets/javascripts/rectangles/engine/rooms/grouper.js") var Walls = require("../../../public/assets/javascripts/rectangles/engine/rooms/_walls.js") +var shapes = require("../../../public/assets/javascripts/rectangles/engine/shapes/shapelist.js") +var RegionList = require("../../../public/assets/javascripts/rectangles/engine/shapes/regionlist.js") /* jshint node: true */ @@ -21,47 +23,106 @@ var rooms = module.exports = { if (! doc) { res.json({ status: 404 }); return } doc = doc.toObject() - doc.rooms.forEach(function(data){ - var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) - var room = new Room({ - id: data.id, - rect: rect, - height: data.height - }) - Rooms.add(room) - }) - Rooms.clipper.solve_rects() - Rooms.builder.build() - - var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] - var collections = Rooms.grouper.collect() - Rooms.grouper.cull(collections) - Rooms.grouper.group(walls, collections, FRONT) - Rooms.grouper.group(walls, collections, BACK) - Rooms.grouper.group(walls, collections, LEFT) - Rooms.grouper.group(walls, collections, RIGHT) - walls.forEach(function(wall){ - wall.mx.forEach(function(mx){ - var data = mx.report() - data.id = wall.id - mx_walls.push(data) - }) - }) - - doc.mx_walls = mx_walls - doc.mx_floor = mx_floor - doc.mx_ceiling = mx_ceiling - - Rooms.forEach(function(room){ - room.mx_floor.forEach(function(mx){ - mx_floor.push( mx.report() ) - }) - room.mx_ceiling.forEach(function(mx){ - mx_ceiling.push( mx.report() ) - }) - }) + if (doc.shapes.length) { + parseMxShapes(doc) + } + else { + parseMxRooms(doc) + } res.json(doc) }) } } + +function parseMxShapes (doc) { + var viewHeight = doc.viewHeight + var wallHeight = doc.wallHeight + + shapes.deserialize( doc.shapes ) + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var regions = RegionList.build() + + regions.forEach(function(region){ + var room = new Room({ + rect: region, + regions: [region], + height: wallHeight, + }) + + room.sides = region.sides + region.id = Rooms.uid("room_") + Rooms.list[ region.id ] = room + Rooms.builder.build_walls(region) + mx_floor.push( Rooms.builder.make_floor(room, region) ) + mx_ceiling.push( Rooms.builder.make_ceiling(room, region) ) + }) + + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + mx_floor.push( room.mx_floor ) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} + +function parseMxRooms (doc) { + doc.rooms.forEach(function(data){ + var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) + var room = new Room({ + id: data.id, + rect: rect, + height: data.height + }) + Rooms.add(room) + }) + Rooms.clipper.solve_rects() + Rooms.builder.build() + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + room.mx_floor.forEach(function(mx){ + mx_floor.push( mx.report() ) + }) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7f443264d1c30b48cc3923ee6e700facdf0f7214 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 16:32:37 -0400 Subject: fix resize issues --- .../javascripts/rectangles/engine/map/_map.js | 29 +++++++++++++--------- public/assets/javascripts/rectangles/util/mouse.js | 15 ++++++++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/stylesheets/app.css | 2 ++ views/home.ejs | 1 + 5 files changed, 35 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 6492db6..ba3ec92 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -41,12 +41,28 @@ var Map = function(opt){ } base.set_zoom(opt.zoom) + base.resize = function(w, h){ + if (w && h) { + canvas.width = base.dimensions.a = w + canvas.height = base.dimensions.b = h + } + else { + // resize here - esp if 2d-hires + canvas.width = base.dimensions.a = base.el.parentNode.offsetWidth + canvas.height = base.dimensions.b = base.el.parentNode.offsetHeight + } + } + + base.toggle = function(state){ + return $(base.el).toggle(state).is(':visible') + } + var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b base.el.appendChild(canvas) - + switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) @@ -71,17 +87,6 @@ var Map = function(opt){ base.sides = base.sides_for_camera break } - - base.resize = function(w, h){ - canvas.width = base.dimensions.a = w || window.innerWidth - canvas.height = base.dimensions.b = h || window.innerHeight - // resize here - esp if 2d-hires - } - - base.toggle = function(state){ - return $(base.el).toggle(state).is(':visible') - } - } Map.prototype.update = function(){ diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 2b98cee..6d9862c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -54,10 +54,20 @@ function mouse (opt) { opt.up && base.tube.on("up", opt.up) opt.rightclick && base.tube.on("rightclick", opt.rightclick) - var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null + var offset; base.init = function (){ base.bind() + base.set_offset() + } + + base.set_offset = function(){ + if (opt.use_offset && opt.el) { + offset = opt.el.getBoundingClientRect() + } + else { + offset = null + } } base.on = function(){ @@ -73,6 +83,9 @@ function mouse (opt) { opt.el.addEventListener("mousedown", base.mousedown) opt.el.addEventListener("contextmenu", base.contextmenu) } + if (opt.use_offset) { + window.addEventListener("resize", base.set_offset) + } window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index d8cfca6..5aa88e9 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.shapes.length) { + if (data.shapes && data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1154fde..fdf7c12 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1331,6 +1331,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } #hud { position: fixed; top:0;left:0; + width: 100%; + height: 100%; z-index: 2; } #palette { diff --git a/views/home.ejs b/views/home.ejs index af43f0b..36dad83 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -60,6 +60,7 @@

Sign Up

+ Read Tutorial

Room Showcase

-- cgit v1.2.3-70-g09d2 From dcd316eda560e87c326a64c2ff05e0f74e02227a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 17:32:05 -0400 Subject: some light QA --- public/assets/javascripts/rectangles/engine/map/ui/editor.js | 8 ++++---- public/assets/javascripts/rectangles/util/minotaur.js | 6 ++---- public/assets/javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/javascripts/ui/builder/BuilderToolbar.js | 3 +++ public/assets/javascripts/ui/lib/FormView.js | 7 +++++-- public/assets/stylesheets/app.css | 6 ++++++ views/home.ejs | 12 ++++++------ 7 files changed, 27 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/map') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js index 7308344..699597a 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js @@ -73,7 +73,7 @@ Map.UI.Editor = function(map){ app.tube("builder-destroy-room", room) // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) return } else if (intersects.length) { @@ -205,13 +205,13 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) } var intersects = Rooms.filter(function(r){ return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) }) - if (! intersects.length) { + if (! base.dragging && ! intersects.length) { app.tube("builder-pick-nothing") } @@ -247,7 +247,7 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) wheelState = null }, 250) diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index d165ccc..8b1abfe 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -38,7 +38,7 @@ for (var id in base.objects[type]) { var obj = base.objects[type][id] if (obj) { - obj.save(null, function(){ base.hide() }, function(){}) + obj.save(null, function(){ base.hide() }, function(){ base.hide() }) } delete base.objects[type][id] saving = true @@ -53,9 +53,7 @@ } base.hide = function () { - setTimeout(function(){ - base.$el.removeClass() - }, 500) + base.$el.removeClass('saving') } base.init(); diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index c8c8880..256bffe 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -52,7 +52,7 @@ var BuilderSettings = FormView.extend({ this.$name.val( names.join(" ") ) this.action = this.createAction - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/layout/new") }, clear: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 6c218be..e9dcce3 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -60,6 +60,9 @@ var BuilderToolbar = View.extend({ var state = map.ui.permissions.toggle("destroy") $(".inuse").removeClass("inuse") $(e.currentTarget).toggleClass("inuse", state) + if (! state) { + this.resetPermissions() + } }, }) diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 33effc8..a952ecb 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -69,7 +69,9 @@ var FormView = View.extend({ var errors = this.validate() if (errors && errors.length) { if (errorCallback) { - errorCallback(errors) + setTimeout(function(){ + errorCallback(errors) + }) } else { this.showErrors(errors) @@ -77,7 +79,6 @@ var FormView = View.extend({ return } } - var action = typeof this.action == "function" ? this.action() : this.action if (! action) return @@ -112,7 +113,9 @@ var FormView = View.extend({ return } else { + console.log("ok") if (successCallback) { + console.log("use cb") successCallback(response) } if (this.success) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index fdf7c12..7dda058 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -421,6 +421,10 @@ h5 { float: right; } +.projectList.about.makeAccountSingleton a { + margin: 0 20%; +} + .page .showcase { height:70vh; } @@ -3066,6 +3070,8 @@ a[data-role="forgot-password"] { font-size: 13px; margin: 5px 0 0 0; } + + .share { display:inline-block; width:100%; diff --git a/views/home.ejs b/views/home.ejs index 36dad83..e3303ed 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -57,15 +57,15 @@ Read Tutorial
-

Sign Up

- -
- Read Tutorial -
-

Room Showcase

[[ include projects/list-projects ]] + + [[ if (! logged_in) { ]] +
+ Make an Account +
+ [[ } ]] [[ include partials/confirm-modal ]] [[ include projects/layouts-modal ]] -- cgit v1.2.3-70-g09d2