From 1a1009d5cbfb1deb7cc110bacf3fd76236cf25a9 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Fri, 20 Jun 2014 01:40:43 -0400 Subject: resize based on magnitude.. --- public/assets/javascripts/rectangles/models/rect.js | 3 +++ public/assets/javascripts/rectangles/models/vec2.js | 3 +++ 2 files changed, 6 insertions(+) (limited to 'public/assets/javascripts/rectangles/models') diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index cb14e66..0bab0e4 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -25,6 +25,9 @@ window.Rect = (function(){ Rect.prototype.area = function(){ return this.x.length() * this.y.length() } + Rect.prototype.magnitude = function(){ + return dist(this.x.a, this.y.a, this.x.b, this.y.b) + } Rect.prototype.mul = function(n){ this.x.mul(n) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index e56a010..5cdd54c 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -8,6 +8,9 @@ vec2.prototype.magnitude = function(){ vec2.prototype.length = function(){ return abs(this.b-this.a) } +vec2.prototype.dist = function(){ + return dist(0,this.a,0,this.b) +} vec2.prototype.clone = function(){ return new vec2(this.a, this.b) } -- cgit v1.2.3-70-g09d2 From 8aede8cb98669537213eb267e8602dc3e8266c97 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 20 Jun 2014 12:14:51 -0400 Subject: preserve proportions on scale (also smoother now) --- .../javascripts/mx/extensions/mx.movements.js | 2 +- .../javascripts/rectangles/engine/scenery/move.js | 4 +- .../rectangles/engine/scenery/resize.js | 50 +++++++++------------- .../rectangles/engine/scenery/types/_object.js | 3 +- .../rectangles/engine/scenery/types/image.js | 3 +- .../assets/javascripts/rectangles/models/rect.js | 3 ++ .../assets/javascripts/rectangles/models/wall.js | 13 +++--- 7 files changed, 36 insertions(+), 42 deletions(-) (limited to 'public/assets/javascripts/rectangles/models') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index d02b2d2..f176e8b 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -25,7 +25,7 @@ MX.Movements = function (cam, viewHeight) { vx = vy = vz = 0, creepFactor = 0.3 - var DEFAULT_SCALE = scale = 1.0 + var DEFAULT_SCALE = 1.0, scale = DEFAULT_SCALE var pos = { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0 } diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index ce4f297..8acc1c2 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -56,11 +56,11 @@ Scenery.move = function(base){ function switch_wall (e, new_wall, cursor){ if (! dragging) return if (new_wall.uid == base.wall.uid) return - if (! new_wall.fits(base.media)) return + if (! new_wall.fits(base.media, base.scale)) return var old_wall_side = base.wall.side var wall_group = old_wall_side | new_wall.side - + base.set_wall(new_wall) bounds = base.bounds diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 50c97bd..ac13326 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -6,7 +6,7 @@ Scenery.resize = new function(){ var obj var x, y, z, bounds var dragging = false - var dimensions, position + var dimensions, position, scale var dots = [], dot, selected_dot @@ -147,58 +147,48 @@ Scenery.resize = new function(){ selected_dot = selection[0] dragging = true - dimensions = new vec2(obj.mx.width, obj.mx.height) + dimensions = obj.dimensions position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) + scale = obj.mx.scale - console.log("down on", sidesToString(selected_dot.side)) - document.body.classList.add("dragging") } function drag (e, cursor){ if (! dragging) return - // cursor.x.magnitude()*cursor_amp var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0 var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0 - + var width = cursor.x.magnitude() + var height = cursor.y.magnitude() var mag = cursor.magnitude() - - // fix resizing here -// obj.mx.scale = obj.media.scale -// var translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp ) + var old_width = dimensions.a * scale + + if (abs(width) > abs(height)) { + mag = x_sign * mag * sign(width) + } + else { + mag = y_sign * mag * sign(height) + } + + obj.mx.scale = scale * (old_width + mag) / old_width if (selected_dot.side & LEFT_RIGHT) { -// obj.mx.width = dimensions.a + translation.a - obj.mx.x = position.a + x_sign * cos(rotationY) * mag/2 * obj.mx.scale - obj.mx.z = position.c + x_sign * sin(rotationY) * mag/2 * obj.mx.scale + obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) + obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign) } if (selected_dot.side & TOP_BOTTOM) { -// obj.mx.height = dimensions.b + translation.b - obj.mx.y = position.b - y_sign * mag/2 * obj.mx.scale + obj.mx.y = position.b - mag/2 * y_sign } - -// bounds = obj.wall.bounds_for(dimensions) - -// base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) -// switch (base.wall.side) { -// case FRONT: -// case BACK: -// base.mx.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) -// break -// case LEFT: -// case RIGHT: -// base.mx.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) -// break -// } base.move_dots() - } function up (e, cursor){ dragging = false selected_dot = null + obj.scale = obj.mx.ops.scale = obj.mx.scale + obj.set_wall() document.body.classList.remove("dragging") } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index f892c0c..1aa037c 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -8,6 +8,7 @@ Scenery.types.base = Fiber.extend(function(base){ this.move = new Scenery.move (this) this.media = opt.media this.dimensions = new vec2(this.media.width, this.media.height) + this.scale = this.media.scale if (opt.wall) { this.set_wall(opt.wall) @@ -42,7 +43,7 @@ Scenery.types.base = Fiber.extend(function(base){ set_wall: function(wall){ this.wall = wall || this.wall - this.bounds = this.wall.bounds_for(this.media) + this.bounds = this.wall.bounds_for(this.media, this.scale) this.center = this.wall.center() }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index b5b5551..b668e6a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -5,7 +5,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ init: function(opt){ base.init.call(this, opt) - this.scale = this.media.scale = 300 / max(300, this.media.width) + this.scale = 300 / max(300, this.media.width) this.build() this.bind() @@ -25,7 +25,6 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ serialize: function(){ var data = base.serialize.call(this) -// console.log(data) return data }, diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index 0bab0e4..a4fbd87 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -28,6 +28,9 @@ window.Rect = (function(){ Rect.prototype.magnitude = function(){ return dist(this.x.a, this.y.a, this.x.b, this.y.b) } + Rect.prototype.maxDimension = function(){ + return abs(this.width) > abs(this.height) ? this.width : this.height + } Rect.prototype.mul = function(n){ this.x.mul(n) diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index e327070..d0a2045 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -49,19 +49,20 @@ window.Wall = (function(){ }) } - Wall.prototype.bounds_for = function(img) { + Wall.prototype.bounds_for = function(img, scale) { + scale = scale || 1 var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y - var halfWidth = img.width/2 * img.scale - var halfHeight = img.height/2 * img.scale + var halfWidth = img.width/2 * scale + var halfHeight = img.height/2 * scale return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ), new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } - Wall.prototype.fits = function(img){ - if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) { + Wall.prototype.fits = function(img, scale){ + if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { return false } - if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) { + if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * scale) { return false } return true -- cgit v1.2.3-70-g09d2 From 4d41eaa24d04fe61233c024ece899731aaf9f1e8 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 20 Jun 2014 12:38:35 -0400 Subject: better wall colors --- .../assets/javascripts/rectangles/engine/scenery/_scenery.js | 1 - public/assets/javascripts/rectangles/models/wall.js | 7 ++++--- public/assets/javascripts/rectangles/util/colors.js | 10 +++++++--- public/assets/javascripts/ui/SiteRouter.js | 2 +- public/assets/javascripts/ui/editor/EditorToolbar.js | 2 +- public/assets/javascripts/ui/site/LayoutsModal.js | 5 +++++ public/assets/stylesheets/app.css | 4 ++-- views/partials/header.ejs | 2 +- views/partials/scripts.ejs | 2 +- 9 files changed, 22 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/rectangles/models') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 0a3187c..3fe6b66 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -45,7 +45,6 @@ var Scenery = new function(){ var scenery = base.media.map(function(media){ return media.serialize() }) - console.log(scenery) return scenery } diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index d0a2045..b2a5b12 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -40,8 +40,8 @@ window.Wall = (function(){ mousemove: function(e){ }, mousedown: function(){ - base.randomize_colors() - console.log(sidesToString(base.side)) + // base.randomize_colors() + // console.log(sidesToString(base.side)) if (Scenery.nextMedia) { Scenery.addNextToWall(base) } @@ -58,6 +58,7 @@ window.Wall = (function(){ return new Rect( new vec2( coord.a + halfWidth, coord.b - halfWidth ), new vec2( halfHeight, Rooms.list[this.room].height - halfHeight ) ) } + Wall.prototype.fits = function(img, scale){ if (this.side & FRONT_BACK && this.rect.x.length() < img.width * scale) { return false @@ -118,7 +119,7 @@ window.Wall = (function(){ } Wall.prototype.randomize_colors = function(){ - var color = choice(window.colors) + var color = window.grayColors[ this.side | this.half_side ] this.siblings().forEach(function(w){ w.color(color) }) } diff --git a/public/assets/javascripts/rectangles/util/colors.js b/public/assets/javascripts/rectangles/util/colors.js index 58553b1..c590072 100644 --- a/public/assets/javascripts/rectangles/util/colors.js +++ b/public/assets/javascripts/rectangles/util/colors.js @@ -16,10 +16,10 @@ "rgba(0,0,0,0.4)", ], bone: [ - "hsla(0,0%,90%,0.95)", - "hsla(0,0%,80%,0.95)", + "hsla(0,0%,91%,0.95)", + "hsla(0,0%,88%,0.95)", "hsla(0,0%,85%,0.95)", - "hsla(0,0%,75%,0.95)", + "hsla(0,0%,82%,0.95)", ], colors: [ "rgba(255,0,0,0.5)", @@ -53,5 +53,9 @@ }) window.colors = color_palettes[select ? select.value : 'bone'] + window.grayColors = {} + _.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.bone).map(function(pair){ + window.grayColors[pair[0]] = pair[1] + }) window.palettes = color_palettes })() diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js index f0c5530..dae2131 100644 --- a/public/assets/javascripts/ui/SiteRouter.js +++ b/public/assets/javascripts/ui/SiteRouter.js @@ -12,6 +12,7 @@ var SiteRouter = Router.extend({ "click [data-role='edit-document-modal']": 'editDocument', "click [data-role='delete-document-modal']": 'destroyDocument', "click [data-role='show-layouts-modal']": 'layoutPicker', + "click [data-role='show-projects-modal']": 'projectPicker', }, routes: { @@ -61,7 +62,6 @@ var SiteRouter = Router.extend({ this.layoutsModal.load() }, - projectPicker: function(e){ e && e.preventDefault() window.history.pushState(null, document.title, "/project") diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 76218fe..f966ab6 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -7,9 +7,9 @@ var EditorToolbar = View.extend({ "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', "click [data-role='resize-media']": 'resize', + "click [data-role='delete-media']": 'deleteMedia', "click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper', "click [data-role='toggle-light-control']": 'toggleLightControl', - "click [data-role='delete-media']": 'deleteMedia', "click [data-role='edit-wall-text']": 'editWallText', }, diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 47fa193..46ed634 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -52,6 +52,11 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ // actually do window.location.pathname = "/project/" + $layout.data("slug") + }, + + newProject: function(e){ + e && e.preventDefault() + window.location.pathname = "/project/new" } }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 93d68ca..cb56a68 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -748,10 +748,10 @@ h5 { background-image:url(https://s3.amazonaws.com/luckyplop/735c46b0268cd511a22c37bc0c11e9f60c4459b2.png)!important; cursor:move; } -.deleteActive .image { +.deleteActive .mx-object3d.image { cursor:pointer; } -.deleteActive .image:after { +.deleteActive .mx-object3d.image:after { content: "\e68f"; font-family: 'ionicons'; speak: none; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 55505ed..e83f42a 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -7,7 +7,7 @@ Layouts [[ } ]] - Projects + Projects [[ if (profile && String(user._id) == String(profile._id)) { ]] Edit Profile diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2d34480..df80d95 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -10,8 +10,8 @@ - + -- cgit v1.2.3-70-g09d2