From d277e9c8eb5454944a94bbfcb6d43c6dd41e18b9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 17 Jun 2014 15:03:45 -0400 Subject: store image width/height --- .../rectangles/engine/scenery/_scenery.js | 28 +++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery/_scenery.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 9e9e2bf..96eea19 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -3,7 +3,8 @@ var Scenery = new function(){ var base = this; - base.images = [] + base.media = [] + base.nextMedia = null base.mouse = new mouse ({ use_offset: false }) @@ -40,6 +41,31 @@ var Scenery = new function(){ }) }) } + + base.add = function(wall, media){ + var scene_media + switch (media.type) { + case 'image': + scene_media = new Scenery.image (wall, media) + break + + case 'youtube': + case 'vimeo': + scene_media = new Scenery.video (wall, media) + break + } + base.media.push(scene_media) + scene_img.init() + } + base.addNextToWall = function(wall){ + base.add(wall, base.nextMedia) + console.log("add next to wall") + base.nextMedia = null + } + base.remove = function(id){ + base.images.splcie(id) + } + return base } -- cgit v1.2.3-70-g09d2 From 32932165724e9c9fa891cb58bac224c50d425340 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 17 Jun 2014 15:40:40 -0400 Subject: dropping stuff from media editor onto walls --- .../assets/javascripts/rectangles/engine/scenery/_scenery.js | 2 +- .../javascripts/rectangles/engine/scenery/types/_image.js | 12 ++++++------ public/assets/javascripts/ui/editor/MediaUpload.js | 10 +++++----- public/assets/javascripts/ui/lib/Parser.js | 1 + public/assets/stylesheets/app.css | 1 + 5 files changed, 14 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery/_scenery.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 96eea19..908a2d0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -55,7 +55,7 @@ var Scenery = new function(){ break } base.media.push(scene_media) - scene_img.init() + scene_media.init() } base.addNextToWall = function(wall){ base.add(wall, base.nextMedia) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js index ba8ba03..b6f7de1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -3,10 +3,10 @@ Scenery.image = function (wall, media) { var base = this base.wall = wall - base.img = img - base.dimensions = new vec2(img.width, img.height) + base.media = media + base.dimensions = new vec2(media.width, media.height) base.center = wall.center() - base.bounds = wall.bounds_for(img) + base.bounds = wall.bounds_for(media) // should be proportional to distance from wall var cursor_amp = 1.5 @@ -18,11 +18,11 @@ Scenery.image = function (wall, media) { base.build = function(){ base.mx_img = new MX.Image({ - src: img.src, + src: media.url, x: base.center.a, - y: Rooms.list[wall.room].height/2 - img.height/2 - 20, + y: Rooms.list[wall.room].height/2 - media.height/2 - 20, z: base.center.b, - scale: 300/img.naturalWidth, + scale: 300/media.width, rotationY: wall_rotation[ wall.side ], backface: false, }) diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index 3ade132..30287a5 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -93,11 +93,11 @@ var MediaUpload = View.extend({ }, upload: function(f, width, height){ - var fd = new FormData(); - fd.append( 'image', f ) - fd.append( 'width', width ) - fd.append( 'height', height ) - fd.append( '_csrf', this.$csrf.val() ) + var fd = new FormData() + fd.append('image', f) + fd.append('width', width) + fd.append('height', height) + fd.append('_csrf', this.$csrf.val()) var request = $.ajax({ url: this.uploadAction, diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index f39239e..705ff04 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -27,6 +27,7 @@ var Parser = { $.ajax({ type: 'GET', url: 'https://www.googleapis.com/youtube/v3/videos', + dataType: "jsonp", data: { id: id, key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM", diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e14b570..2d7f901 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -68,6 +68,7 @@ a{ overflow:hidden; display: none; z-index: 10; + pointer-events: none; } .ants.edit { -- cgit v1.2.3-70-g09d2 From 345253cecbaaeaa1b43fdd2409490172f1108382 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 17 Jun 2014 18:14:38 -0400 Subject: dragging new media between walls --- public/assets/javascripts/mx/primitives/mx.image.js | 1 + .../assets/javascripts/rectangles/engine/scenery/_scenery.js | 1 - .../javascripts/rectangles/engine/scenery/types/_image.js | 11 ++++------- .../javascripts/rectangles/engine/scenery/types/move.js | 12 +++--------- public/assets/javascripts/rectangles/models/wall.js | 11 +++++++---- 5 files changed, 15 insertions(+), 21 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/scenery/_scenery.js') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index d1e292d..15bf050 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -10,6 +10,7 @@ MX.Image = MX.Object3D.extend({ layer.y = ops.y || 0 layer.z = ops.z || 0 layer.backface = ops.backface || false + layer.media = ops.media if (layer.backface) { layer.el.classList.add("backface-visible") diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 908a2d0..9096de0 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -59,7 +59,6 @@ var Scenery = new function(){ } base.addNextToWall = function(wall){ base.add(wall, base.nextMedia) - console.log("add next to wall") base.nextMedia = null } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js index b6f7de1..bcb7c23 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -1,9 +1,10 @@ Scenery.image = function (wall, media) { var base = this - + base.wall = wall base.media = media + base.scale = media.scale = 300 / max(300, media.width) base.dimensions = new vec2(media.width, media.height) base.center = wall.center() base.bounds = wall.bounds_for(media) @@ -20,9 +21,9 @@ Scenery.image = function (wall, media) { base.mx_img = new MX.Image({ src: media.url, x: base.center.a, - y: Rooms.list[wall.room].height/2 - media.height/2 - 20, + y: Rooms.list[wall.room].height/2 - (base.scale * media.height)/2 - 20, z: base.center.b, - scale: 300/media.width, + scale: base.scale, rotationY: wall_rotation[ wall.side ], backface: false, }) @@ -32,16 +33,12 @@ Scenery.image = function (wall, media) { base.bind = function(){ base.move.bind() -// base.resize.bind() $(base.mx_img.el).bind({ mouseenter: function(e){ -// console.log('entered an image') - // show the resize points for this image Scenery.resize.show(base) Scenery.image.hovering = true }, mouseleave: function(e){ -// console.log('left an image') Scenery.resize.defer_hide(base) Scenery.image.hovering = false } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js index 188a3f4..2921c0a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js @@ -8,7 +8,6 @@ Scenery.image.move = function(base){ this.bind = function(){ Scenery.mouse.bind_el(base.mx_img.el) Scenery.mouse.on("down", down) - Scenery.mouse.on("move", move) Scenery.mouse.on("enter", switch_wall) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) @@ -17,7 +16,6 @@ Scenery.image.move = function(base){ this.unbind = function(){ Scenery.mouse.bind_el(base.mx_img.el) Scenery.mouse.off("down", down) - Scenery.mouse.off("move", move) Scenery.mouse.off("enter", switch_wall) Scenery.mouse.off("drag", drag) Scenery.mouse.off("up", up) @@ -33,13 +31,9 @@ Scenery.image.move = function(base){ document.body.classList.add("dragging") } - function move (e, cursor){ - console.log("hey") - } - function drag (e, cursor){ if (! dragging) return - + base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) switch (base.wall.side) { case FRONT: @@ -63,9 +57,9 @@ Scenery.image.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.img)) return + if (! new_wall.fits(base.media)) return - base.bounds = bounds = new_wall.bounds_for(base.img) + base.bounds = bounds = new_wall.bounds_for(base.media) base.center = new_wall.center() x = base.center.a diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 6c20444..e327070 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -51,14 +51,17 @@ window.Wall = (function(){ Wall.prototype.bounds_for = function(img) { var coord = this.side & FRONT_BACK ? this.rect.x : this.rect.y - return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ), - new vec2( img.height/2, Rooms.list[this.room].height - img.height/2 ) ) + var halfWidth = img.width/2 * img.scale + var halfHeight = img.height/2 * img.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) { + if (this.side & FRONT_BACK && this.rect.x.length() < img.width * img.scale) { return false } - if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width) { + if (this.side & LEFT_RIGHT && this.rect.y.length() < img.width * img.scale) { return false } return true -- cgit v1.2.3-70-g09d2