From 816c603b03f037fecde9168daccaa5bd344d4c0d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 16:37:26 -0400 Subject: nomenclature for addressing floors, ceilings --- public/assets/javascripts/rectangles/util/constants.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/util/constants.js') diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 4c6b3cc..198cc41 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -1,5 +1,6 @@ var FRONT = 0x1, BACK = 0x2, LEFT = 0x4, RIGHT = 0x8, FLOOR = 0x10, CEILING = 0x20 - FRONT_BACK = FRONT | BACK, LEFT_RIGHT = LEFT | RIGHT, FLOOR_CEILING = FLOOR | CEILING +var FRONT_BACK = FRONT | BACK, LEFT_RIGHT = LEFT | RIGHT, FLOOR_CEILING = FLOOR | CEILING +var WALL_SIDES = FRONT | BACK | LEFT | RIGHT var TOP = CEILING, BOTTOM = FLOOR, TOP_LEFT = TOP | LEFT, -- cgit v1.2.3-70-g09d2 From 10a98d58fcba585dc13d251497c6028d04de0031 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 13 Oct 2014 13:34:52 -0400 Subject: larger default size --- public/assets/javascripts/rectangles/engine/scenery/randomize.js | 4 ++-- public/assets/javascripts/rectangles/engine/scenery/types/image.js | 2 +- public/assets/javascripts/rectangles/engine/scenery/types/video.js | 2 +- public/assets/javascripts/rectangles/util/constants.js | 3 ++- views/controls/builder/info.ejs | 2 +- 5 files changed, 7 insertions(+), 6 deletions(-) (limited to 'public/assets/javascripts/rectangles/util/constants.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/randomize.js b/public/assets/javascripts/rectangles/engine/scenery/randomize.js index 4f1144a..82b6bf9 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/randomize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/randomize.js @@ -10,11 +10,11 @@ Scenery.randomize = function (media_data) { var media_list = media_data.map(function(media){ var width, height if (media.width > media.height) { - width = Math.min(300, media.width) + width = Math.min(DEFAULT_PICTURE_WIDTH, media.width) height = media.height/media.width * width } else { - height = Math.min(300, media.height) + height = Math.min(DEFAULT_PICTURE_WIDTH, media.height) width = media.width/media.height * height } return { diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index bed847b..10fc917 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -7,7 +7,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ init: function(opt){ - opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) base.init.call(this, opt) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index b723f56..a669a90 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -6,7 +6,7 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ type: 'video', init: function(opt){ - opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) + opt.scale = opt.scale || (opt.data && opt.data.scale) || DEFAULT_PICTURE_WIDTH / max(DEFAULT_PICTURE_WIDTH, opt.media.width) base.init.call(this, opt) diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 198cc41..a38325e 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -20,7 +20,8 @@ var height_min = 200, side_min = 10, side_max = 5000, resize_margin = 8, - cursor_amp = 1.5 + cursor_amp = 1.5, + DEFAULT_PICTURE_WIDTH = 400 var painting_distance_from_wall = 10, dot_distance_from_picture = 3 diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs index 3c5d4b7..205938f 100644 --- a/views/controls/builder/info.ejs +++ b/views/controls/builder/info.ejs @@ -40,7 +40,7 @@
- delete this room + remove this room
-- cgit v1.2.3-70-g09d2 From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Tue, 14 Oct 2014 19:16:45 -0400 Subject: load more on media drawer and some other stuff --- .../javascripts/mx/extensions/mx.movements.js | 3 +- .../javascripts/rectangles/engine/map/draw.js | 6 +-- .../javascripts/rectangles/engine/rooms/_walls.js | 19 +++++---- .../javascripts/rectangles/engine/rooms/mover.js | 2 + .../javascripts/rectangles/util/constants.js | 3 +- public/assets/javascripts/rectangles/util/wheel.js | 6 ++- .../assets/javascripts/ui/builder/BuilderInfo.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 1 + public/assets/javascripts/ui/editor/EditorView.js | 1 + public/assets/javascripts/ui/editor/MediaUpload.js | 4 +- public/assets/javascripts/ui/editor/MediaViewer.js | 33 +++++++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 5 +-- public/assets/stylesheets/app.css | 49 +++++++++++++--------- server/lib/api/media.js | 13 ++++-- server/lib/api/projects.js | 2 + server/lib/schemas/Project.js | 1 + views/controls/editor/media-drawer.ejs | 28 +++++++------ 17 files changed, 116 insertions(+), 62 deletions(-) (limited to 'public/assets/javascripts/rectangles/util/constants.js') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 2b7e671..268a1c7 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -223,8 +223,7 @@ MX.Movements = function (cam) { }, mousewheel: function (e, deltaY, deltaX) { - console.log(deltaX != 0 && deltaY != 0) - cam.rotationY += -deltaX / 20 + cam.rotationY += deltaX / 20 pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10 pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10 diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 7eb6e7c..eceda3c 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -177,11 +177,11 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom var sides = map.sides() - var quant = sides.clone().quantize(200) - for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) { + 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) } - for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) { + for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js index 0da3b9a..119a659 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js +++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js @@ -134,19 +134,24 @@ }) } + base.luminance = function(rgb){ + rgb = rgb || Walls.colors.wall + var rgb_max = Math.max.apply(0, rgb) + var rgb_min = Math.min.apply(255, rgb) + return (rgb_max + rgb_min ) / 2 + } + base.setColor = { wall: function(rgb){ var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity) var rgbColor = rgb_string(rgb) + + if (Rooms.mover.room) { + $("#header").toggleClass("black", base.luminance() < 100) + $("body").css("background-color", rgbColor) + } - var rgb_max = Math.max.apply(0, rgb) - var rgb_min = Math.min.apply(255, rgb) - var luminance = (rgb_max + rgb_min ) / 2 - - $("#header").toggleClass("black", luminance < 128) - $("body").css("background-color", rgbColor) - Walls.colors.wall = rgb Walls.list.forEach(function(wall){ wall.outline(rgbaColor, null) diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js index 98f80c5..a2d2223 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/mover.js +++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js @@ -43,6 +43,7 @@ Rooms.mover = new function(){ // in this case, we appear to have left the room.. // $(".face.active").removeClass("active") + $("#header").removeClass("black") $("body").css("background-color", "transparent") base.room = null } @@ -59,6 +60,7 @@ Rooms.mover = new function(){ // did we actually enter a room? if (intersects.length) { base.room = intersects[0] + $("#header").toggleClass("black", Walls.luminance() < 100) $("body").css("background-color", rgb_string( Walls.colors.wall )) app.tube("change-room", { room: base.room }) } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a38325e..3bc314c 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -21,7 +21,8 @@ var height_min = 200, side_max = 5000, resize_margin = 8, cursor_amp = 1.5, - DEFAULT_PICTURE_WIDTH = 400 + DEFAULT_PICTURE_WIDTH = 350, + MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3 diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 64aaa64..712d470 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -38,7 +38,11 @@ function wheel (opt) { var deltaX = 0, deltaY = 0; // WebKit - if ( event.wheelDeltaY ) { + if ( event.deltaY ) { + deltaY -= event.deltaY * opt.ratio + deltaX -= event.deltaX * opt.ratio + } + else if ( event.wheelDeltaY ) { deltaY -= event.wheelDeltaY * opt.ratio deltaX -= event.wheelDeltaX * opt.ratio } diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js index 196eca6..67834e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderInfo.js +++ b/public/assets/javascripts/ui/builder/BuilderInfo.js @@ -34,7 +34,7 @@ var BuilderInfo = View.extend({ }, load: function(data){ - this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight ) + this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) this.$units.val( "ft" ) this.$unitName.html( "ft" ) }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 89040e1..e2cb53c 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -148,6 +148,7 @@ var EditorSettings = FormView.extend({ fd.append( "name", this.$name.val() ) fd.append( "description", this.$description.val() ) fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" ) + fd.append( "viewHeight", window.viewHeight ) fd.append( "rooms", JSON.stringify( Rooms.serialize() ) ) fd.append( "walls", JSON.stringify( Walls.serialize() ) ) fd.append( "colors", JSON.stringify( Walls.colors ) ) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 6aff601..ccd6c63 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -41,6 +41,7 @@ var EditorView = View.extend({ $("#map").hide() this.settings.load(data) + this.info.load(data) }, readyLayout: function(data){ diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index fddfefc..9799f99 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({ add: function(media){ console.log(media) - this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia) - this.parent.mediaViewer.$deleteMedia.show() - this.parent.mediaViewer.$noMedia.hide() + this.parent.mediaViewer.addUploadedMedia(media) }, beforeUpload: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index c18fb49..2e76bec 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -4,23 +4,29 @@ var MediaViewer = ModalView.extend({ destroyAction: "/api/media/destroy", usesFileUpload: true, loaded: false, - + perPage: 12, + offset: 0, + events: { 'mousedown': "stopPropagation", 'click .foundToggle': "foundToggle", 'click .userToggle': "userToggle", 'click #deleteMedia': "deleteArmed", 'click .mediaContainer': "pick", + 'click .viewMore': "load", }, initialize: function(opt){ this.__super__.initialize.call(this) this.parent = opt.parent this.$myMedia = this.$(".myMedia") + this.$myMediaContainer = this.$(".myMedia > .container") this.$userToggle = this.$(".userToggle") this.$foundMedia = this.$(".foundMedia") + this.$foundMediaContainer = this.$(".foundMedia > .container") this.$foundToggle = this.$(".foundToggle") this.$deleteMedia = this.$("#deleteMedia") + this.$viewMore = this.$(".viewMore") this.$noMedia = this.$(".noMedia") }, @@ -55,7 +61,7 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", this.populate.bind(this)) + $.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this)) }, loadTrending: function(){ @@ -85,7 +91,7 @@ var MediaViewer = ModalView.extend({ width: img.naturalWidth, height: img.naturalHeight, } - this.add(media, this.$foundMedia) + this.add(media, this.$foundMediaContainer) }.bind(this) img.src = url if (img.complete && ! loaded) { img.onload() } @@ -100,22 +106,34 @@ var MediaViewer = ModalView.extend({ }, populate: function(data){ - this.loaded = true if (data && data.length) { + if (data.length < this.perPage) { + this.$viewMore.hide() + } data.forEach(function(media){ - this.add(media, this.$myMedia) + this.add(media, this.$myMediaContainer) + this.offset += 1 }.bind(this)) this.$noMedia.hide() this.$deleteMedia.show() } else { + this.$viewMore.hide() this.$noMedia.show() this.$deleteMedia.hide() } + this.loaded = true this.__super__.show.call(this) }, - add: function(media, $container){ + addUploadedMedia: function(media){ + this.parent.mediaViewer.$deleteMedia.show() + this.parent.mediaViewer.$noMedia.hide() + this.add(media, this.$myMedia, true) // prepend + this.offset += 1 + }, + + add: function(media, $container, prepend){ var image = new Image () var $span = $("") $span.addClass("mediaContainer") @@ -142,7 +160,8 @@ var MediaViewer = ModalView.extend({ $span.data("media", media) $span.append(image) - $container.prepend($span) + if (prepend) $container.prepend($span) + else $container.append($span) }, deleteIsArmed: false, diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index c8879b3..b559ba5 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -28,16 +28,15 @@ var TextEditor = FormView.extend({ }, toggle: function(state){ - $("#keyhint").fadeOut(200) - this.$el.toggleClass("active", state) if (state) { + $("#keyhint").fadeOut(200) Scenery.nextMedia = { type: 'text', width: 600, height: 450, scale: 0.5, - font: { family: 'Lato', size: 12, align: 'left' }, + font: { family: 'Lato', size: 24, align: 'left', color: "#000" }, } this.createMode(true) } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 849c994..eec671a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -414,6 +414,17 @@ iframe.embed { border-top: 1px solid black; } +.mediaDrawer .viewMore { + clear: both; + float: none; + text-decoration: none; + font-size: 22px; + display: block; + text-align: center; + padding: 40px; + border: 0; + border-top: 1px solid black; +} .holder { display: table-cell; @@ -2152,7 +2163,7 @@ form li textarea { right: 20px; top: 20px; z-index: 20; - background: #f9f9f9; + background: white; width: 75px; color: black; border: 1px solid black; @@ -2511,22 +2522,22 @@ a[data-role="forgot-password"] { padding: 50px 0; } .page .viewMore.btn { - text-decoration: none; - font-size: 18px; - padding: 18px 0; -} -.footer a, .footer span { -margin: 9px; -} -#keyhint { - display:none; -} -.projectList .projectItem { - width:100%; - margin: 20px 0; -} -.projectList .room { -width: 100%; -height: 260px; -} + text-decoration: none; + font-size: 18px; + padding: 18px 0; + } + .footer a, .footer span { + margin: 9px; + } + #keyhint { + display:none; + } + .projectList .projectItem { + width:100%; + margin: 20px 0; + } + .projectList .room { + width: 100%; + height: 260px; + } } \ No newline at end of file diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 1eb08c1..643ba92 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -10,13 +10,20 @@ var _ = require('lodash'), var media = { user: function(req, res){ + var offset = Number(req.query.offset) || 0 + var limit = Math.min( Number(req.query.limit), 50 ) || 20 var query = { user_id: req.user._id } if (req.query.tag) { query.tag = req.query.tag } - Media.find(query, function(err, media){ - res.json(media || []) - }) + console.log(offset, limit) + Media.find(query) + .sort({'created_at': -1}) + .skip(offset) + .limit(limit) + .exec(function(err, media){ + res.json(media || []) + }) }, create: function(req, res){ diff --git a/server/lib/api/projects.js b/server/lib/api/projects.js index 47e0458..e357285 100644 --- a/server/lib/api/projects.js +++ b/server/lib/api/projects.js @@ -36,6 +36,7 @@ var projects = { data.name = util.sanitize(data.name) data.slug = util.slugify(data.name) + "-" + (+new Date) data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.rooms = JSON.parse(data.rooms) data.walls = JSON.parse(data.walls) data.media = JSON.parse(data.media) @@ -94,6 +95,7 @@ var projects = { data.slug = util.slugify(data.name) + "-" + (+new Date) } data.description = util.sanitize(data.description) + data.viewHeight = Number(data.viewHeight || 0) data.updated_at = new Date () _.extend(doc, data) diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index dd50da6..f7b8de0 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -32,6 +32,7 @@ var ProjectSchema = new mongoose.Schema({ media: [mongoose.Schema.Types.Mixed], colors: mongoose.Schema.Types.Mixed, startPosition: mongoose.Schema.Types.Mixed, + viewHeight: { type: Number }, user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, updated_at: { type: Date }, diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs index d800426..5cc659e 100644 --- a/views/controls/editor/media-drawer.ejs +++ b/views/controls/editor/media-drawer.ejs @@ -1,14 +1,3 @@ - - -
-
- Upload File - -
- ~ or ~
- - -
@@ -16,13 +5,28 @@
X +

Your Media – Found Media


You have no media yet. Upload some!
+ + view more
+ + + +
+
+ Upload File + +
+ ~ or ~
+ +
-
+ +
\ No newline at end of file -- cgit v1.2.3-70-g09d2 From 06fc629e2be66d79e94a02b169e12bc0918d0881 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:45:55 -0400 Subject: shift-drag scupltures up and down; dont drag through floor --- .../assets/javascripts/rectangles/engine/scenery/move.js | 2 +- .../javascripts/rectangles/engine/sculpture/move.js | 16 ++++++++++++---- .../rectangles/engine/sculpture/types/image.js | 2 +- public/assets/javascripts/rectangles/util/constants.js | 3 ++- 4 files changed, 16 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/util/constants.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index dd60a61..94c6281 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ base.remove() return } - + // load the modal app.controller.pick(base) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index f968bcf..4f6d176 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,8 +2,9 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, moved = false + var dragging = false, shiftPressed = false, moved = false var oldState + var height, width this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) @@ -39,11 +40,13 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + height = base.mx.height * base.mx.scale bounds = base.bounds dimension = base.dimensions @@ -63,9 +66,14 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) - base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - + if (e.shiftKey) { + base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) + } + else { + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) + } + if (editor.permissions.resize) { Sculpture.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 3e5ab08..1a53f5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,7 +25,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + sculpture_distance_from_floor opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 3bc314c..a70cacd 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -25,7 +25,8 @@ var height_min = 200, MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, - dot_distance_from_picture = 3 + dot_distance_from_picture = 3, + sculpture_distance_from_floor = 3 var dot_hide_delay = 50, // ms dot_side = 20 -- 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/util/constants.js') 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