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 ++- .../rectangles/engine/scenery/image/_image.js | 52 ------ .../rectangles/engine/scenery/image/move.js | 103 ----------- .../rectangles/engine/scenery/image/resize.js | 201 --------------------- .../rectangles/engine/scenery/types/_image.js | 52 ++++++ .../rectangles/engine/scenery/types/move.js | 109 +++++++++++ .../rectangles/engine/scenery/types/resize.js | 201 +++++++++++++++++++++ 7 files changed, 389 insertions(+), 357 deletions(-) delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/image/_image.js delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/image/move.js delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/image/resize.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/_image.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/move.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/resize.js (limited to 'public/assets/javascripts/rectangles/engine/scenery') 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 } diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js b/public/assets/javascripts/rectangles/engine/scenery/image/_image.js deleted file mode 100644 index dadb2d2..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/image/_image.js +++ /dev/null @@ -1,52 +0,0 @@ -Scenery.image = function (wall, img) { - - var base = this - - base.wall = wall - base.img = img - base.dimensions = new vec2(img.width, img.height) - base.center = wall.center() - base.bounds = wall.bounds_for(img) - - // should be proportional to distance from wall - var cursor_amp = 1.5 - - base.init = function(){ - base.build() - base.bind() - } - - base.build = function(){ - base.mx_img = new MX.Image({ - src: img.src, - x: base.center.a, - y: Rooms.list[wall.room].height/2 - img.height/2 - 20, - z: base.center.b, - scale: 300/img.naturalWidth, - rotationY: wall_rotation[ wall.side ], - backface: false, - }) - scene.add( base.mx_img ) - base.move = new Scenery.image.move (base) - } - - 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 - } - }) - } - - return base -} diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/move.js b/public/assets/javascripts/rectangles/engine/scenery/image/move.js deleted file mode 100644 index e79ede9..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/image/move.js +++ /dev/null @@ -1,103 +0,0 @@ - - -Scenery.image.move = function(base){ - - var x, y, z, bounds - var dragging = false - - this.bind = function(){ - Scenery.mouse.bind_el(base.mx_img.el) - Scenery.mouse.on("down", down) - Scenery.mouse.on("enter", switch_wall) - Scenery.mouse.on("drag", drag) - Scenery.mouse.on("up", up) - } - - this.unbind = function(){ - Scenery.mouse.bind_el(base.mx_img.el) - Scenery.mouse.off("down", down) - Scenery.mouse.off("enter", switch_wall) - Scenery.mouse.off("drag", drag) - Scenery.mouse.off("up", up) - } - - function down (e, cursor){ - if (e.target != base.mx_img.el) return; - dragging = true - x = base.mx_img.x - y = base.mx_img.y - z = base.mx_img.z - bounds = base.bounds - document.body.classList.add("dragging") - } - - 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: - case BACK: - base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) - break - case LEFT: - case RIGHT: - base.mx_img.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) - break - } - - Scenery.resize.move_dots() - } - - function up (e, cursor){ - dragging = false - document.body.classList.remove("dragging") - } - - 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 - - base.bounds = bounds = new_wall.bounds_for(base.img) - base.center = new_wall.center() - - x = base.center.a - z = base.center.b - - var wall_group = base.wall.side | new_wall.side - - if (base.wall.side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { - switch (base.wall.side) { - case FRONT: - z = bounds.x.a - break - case BACK: - z = bounds.x.b - break - case LEFT: - x = bounds.x.a - break - case RIGHT: - x = bounds.x.b - break - } - } - - cursor.x.a = cursor.x.b - - base.mx_img.move({ - x: x, - z: z, - rotationY: wall_rotation[ new_wall.side ] - }) - - base.wall = new_wall - - Scenery.resize.rotate_dots() - Scenery.resize.move_dots() - } - - return this - -} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js b/public/assets/javascripts/rectangles/engine/scenery/image/resize.js deleted file mode 100644 index a0a98c5..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/image/resize.js +++ /dev/null @@ -1,201 +0,0 @@ -Scenery.resize = new function(){ - - var base = this - - var obj - var x, y, z, bounds - var dragging = false - var dimensions, position - - var dots = [], dot, selected_dot - - base.init = function(){ - base.build() - base.bind() - } - - // create 9 dots at the corners of the div - base.build = function(){ - [ TOP, - TOP_RIGHT, - RIGHT, - BOTTOM_RIGHT, - BOTTOM, - BOTTOM_LEFT, - LEFT, - TOP_LEFT ].forEach(base.build_dot) - } - - // generate a dot element - base.build_dot = function(side) { - var dot = new MX.Object3D('.dot') - dot.width = dot.height = dot_side - dot.side = side - $(dot.el).on({ - mouseenter: function(){ base.hovering = true }, - mouseleave: function(){ base.hovering = false }, - }) - dots.push(dot) - } - - base.add_dots = function(){ - dots.forEach(function(dot){ - scene.add(dot) - }) - } - - // rotate the dots as appropriate - base.rotate_dots = function(){ - rotationY = wall_rotation[obj.wall.side] - dots.forEach(function(dot){ - dot.rotationY = rotationY - }) - } - - // move all the dots to the object's current position - base.move_dots = function(){ - x = obj.mx_img.x + sin(rotationY) * dot_distance_from_picture - y = obj.mx_img.y - z = obj.mx_img.z - cos(rotationY) * dot_distance_from_picture - - dots.forEach(function(dot){ - base.move_dot(dot) - }) - } - - // move a dot .. to the initial position of the image - base.move_dot = function(dot){ - dot.x = x - dot.y = y - dot.z = z - - if (dot.side & TOP) { - dot.y += obj.mx_img.height * obj.mx_img.scale / 2 - } - if (dot.side & BOTTOM) { - dot.y -= obj.mx_img.height * obj.mx_img.scale / 2 - } - if (dot.side & LEFT) { - dot.x -= cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 - dot.z -= sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 - } - if (dot.side & RIGHT) { - dot.x += cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 - dot.z += sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 - } - } - - // pick a new object to focus on and show the dots - base.show = function(new_object) { - if (obj === new_object) return - - obj = new_object - - base.add_dots() - base.rotate_dots() - base.move_dots() - } - - // dismiss the dots on blur - var dotsHideTimeout; - base.defer_hide = function(){ - clearTimeout(dotsHideTimeout) - - dotsHideTimeout = setTimeout(function(){ - if (Scenery.image.hovering || Scenery.resize.hovering || Scenery.mouse.down) return - Scenery.resize.hide() - }, dot_hide_delay) - } - base.hide = function () { - obj = null - dots.forEach(function(dot){ - scene.remove(dot) - }) - } - - base.bind = function(){ - dots.forEach(function(dot){ - Scenery.mouse.bind_el(dot.el) - $(dot.el).bind({ - mouseenter: function(e){ - Scenery.resize.hovering = true - }, - mouseleave: function(e){ - Scenery.resize.hovering = false - base.defer_hide() - } - }) - }) - Scenery.mouse.on("down", down) - Scenery.mouse.on("drag", drag) - Scenery.mouse.on("up", up) - } - - this.unbind = function(){ - dots.forEach(function(dot){ - Scenery.mouse.unbind_el(dot.el) - }) - Scenery.mouse.off("down", down) - Scenery.mouse.off("drag", drag) - Scenery.mouse.off("up", up) - } - - function down (e, cursor){ - var selection = dots.filter(function(dot){return e.target == dot.el}) - if (! selection.length) return - - selected_dot = selection[0] - dragging = true - - dimensions = new vec2(obj.mx_img.width, obj.mx_img.height) - position = new vec3(obj.mx_img.x, obj.mx_img.y, obj.mx_img.z) - - 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 translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp ) - - if (selected_dot.side & LEFT_RIGHT) { - obj.mx_img.width = dimensions.a + translation.a - obj.mx_img.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx_img.scale - obj.mx_img.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx_img.scale - } - if (selected_dot.side & TOP_BOTTOM) { - obj.mx_img.height = dimensions.b + translation.b - obj.mx_img.y = position.b - y_sign * translation.b/2 * obj.mx_img.scale - } - -// bounds = obj.wall.bounds_for(dimensions) - -// base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) -// switch (base.wall.side) { -// case FRONT: -// case BACK: -// base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) -// break -// case LEFT: -// case RIGHT: -// base.mx_img.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 - document.body.classList.remove("dragging") - } - -} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_image.js b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js new file mode 100644 index 0000000..ba8ba03 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_image.js @@ -0,0 +1,52 @@ +Scenery.image = function (wall, media) { + + var base = this + + base.wall = wall + base.img = img + base.dimensions = new vec2(img.width, img.height) + base.center = wall.center() + base.bounds = wall.bounds_for(img) + + // should be proportional to distance from wall + var cursor_amp = 1.5 + + base.init = function(){ + base.build() + base.bind() + } + + base.build = function(){ + base.mx_img = new MX.Image({ + src: img.src, + x: base.center.a, + y: Rooms.list[wall.room].height/2 - img.height/2 - 20, + z: base.center.b, + scale: 300/img.naturalWidth, + rotationY: wall_rotation[ wall.side ], + backface: false, + }) + scene.add( base.mx_img ) + base.move = new Scenery.image.move (base) + } + + 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 + } + }) + } + + return base +} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/move.js b/public/assets/javascripts/rectangles/engine/scenery/types/move.js new file mode 100644 index 0000000..188a3f4 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/move.js @@ -0,0 +1,109 @@ + + +Scenery.image.move = function(base){ + + var x, y, z, bounds + var dragging = false + + 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) + } + + 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) + } + + function down (e, cursor){ + if (e.target != base.mx_img.el) return; + dragging = true + x = base.mx_img.x + y = base.mx_img.y + z = base.mx_img.z + bounds = base.bounds + 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: + case BACK: + base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) + break + case LEFT: + case RIGHT: + base.mx_img.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) + break + } + + Scenery.resize.move_dots() + } + + function up (e, cursor){ + dragging = false + document.body.classList.remove("dragging") + } + + 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 + + base.bounds = bounds = new_wall.bounds_for(base.img) + base.center = new_wall.center() + + x = base.center.a + z = base.center.b + + var wall_group = base.wall.side | new_wall.side + + if (base.wall.side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { + switch (base.wall.side) { + case FRONT: + z = bounds.x.a + break + case BACK: + z = bounds.x.b + break + case LEFT: + x = bounds.x.a + break + case RIGHT: + x = bounds.x.b + break + } + } + + cursor.x.a = cursor.x.b + + base.mx_img.move({ + x: x, + z: z, + rotationY: wall_rotation[ new_wall.side ] + }) + + base.wall = new_wall + + Scenery.resize.rotate_dots() + Scenery.resize.move_dots() + } + + return this + +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/resize.js b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js new file mode 100644 index 0000000..a0a98c5 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/resize.js @@ -0,0 +1,201 @@ +Scenery.resize = new function(){ + + var base = this + + var obj + var x, y, z, bounds + var dragging = false + var dimensions, position + + var dots = [], dot, selected_dot + + base.init = function(){ + base.build() + base.bind() + } + + // create 9 dots at the corners of the div + base.build = function(){ + [ TOP, + TOP_RIGHT, + RIGHT, + BOTTOM_RIGHT, + BOTTOM, + BOTTOM_LEFT, + LEFT, + TOP_LEFT ].forEach(base.build_dot) + } + + // generate a dot element + base.build_dot = function(side) { + var dot = new MX.Object3D('.dot') + dot.width = dot.height = dot_side + dot.side = side + $(dot.el).on({ + mouseenter: function(){ base.hovering = true }, + mouseleave: function(){ base.hovering = false }, + }) + dots.push(dot) + } + + base.add_dots = function(){ + dots.forEach(function(dot){ + scene.add(dot) + }) + } + + // rotate the dots as appropriate + base.rotate_dots = function(){ + rotationY = wall_rotation[obj.wall.side] + dots.forEach(function(dot){ + dot.rotationY = rotationY + }) + } + + // move all the dots to the object's current position + base.move_dots = function(){ + x = obj.mx_img.x + sin(rotationY) * dot_distance_from_picture + y = obj.mx_img.y + z = obj.mx_img.z - cos(rotationY) * dot_distance_from_picture + + dots.forEach(function(dot){ + base.move_dot(dot) + }) + } + + // move a dot .. to the initial position of the image + base.move_dot = function(dot){ + dot.x = x + dot.y = y + dot.z = z + + if (dot.side & TOP) { + dot.y += obj.mx_img.height * obj.mx_img.scale / 2 + } + if (dot.side & BOTTOM) { + dot.y -= obj.mx_img.height * obj.mx_img.scale / 2 + } + if (dot.side & LEFT) { + dot.x -= cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + dot.z -= sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + } + if (dot.side & RIGHT) { + dot.x += cos(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + dot.z += sin(rotationY) * (obj.mx_img.width * obj.mx_img.scale) / 2 + } + } + + // pick a new object to focus on and show the dots + base.show = function(new_object) { + if (obj === new_object) return + + obj = new_object + + base.add_dots() + base.rotate_dots() + base.move_dots() + } + + // dismiss the dots on blur + var dotsHideTimeout; + base.defer_hide = function(){ + clearTimeout(dotsHideTimeout) + + dotsHideTimeout = setTimeout(function(){ + if (Scenery.image.hovering || Scenery.resize.hovering || Scenery.mouse.down) return + Scenery.resize.hide() + }, dot_hide_delay) + } + base.hide = function () { + obj = null + dots.forEach(function(dot){ + scene.remove(dot) + }) + } + + base.bind = function(){ + dots.forEach(function(dot){ + Scenery.mouse.bind_el(dot.el) + $(dot.el).bind({ + mouseenter: function(e){ + Scenery.resize.hovering = true + }, + mouseleave: function(e){ + Scenery.resize.hovering = false + base.defer_hide() + } + }) + }) + Scenery.mouse.on("down", down) + Scenery.mouse.on("drag", drag) + Scenery.mouse.on("up", up) + } + + this.unbind = function(){ + dots.forEach(function(dot){ + Scenery.mouse.unbind_el(dot.el) + }) + Scenery.mouse.off("down", down) + Scenery.mouse.off("drag", drag) + Scenery.mouse.off("up", up) + } + + function down (e, cursor){ + var selection = dots.filter(function(dot){return e.target == dot.el}) + if (! selection.length) return + + selected_dot = selection[0] + dragging = true + + dimensions = new vec2(obj.mx_img.width, obj.mx_img.height) + position = new vec3(obj.mx_img.x, obj.mx_img.y, obj.mx_img.z) + + 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 translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp ) + + if (selected_dot.side & LEFT_RIGHT) { + obj.mx_img.width = dimensions.a + translation.a + obj.mx_img.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx_img.scale + obj.mx_img.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx_img.scale + } + if (selected_dot.side & TOP_BOTTOM) { + obj.mx_img.height = dimensions.b + translation.b + obj.mx_img.y = position.b - y_sign * translation.b/2 * obj.mx_img.scale + } + +// bounds = obj.wall.bounds_for(dimensions) + +// base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) +// switch (base.wall.side) { +// case FRONT: +// case BACK: +// base.mx_img.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp ) +// break +// case LEFT: +// case RIGHT: +// base.mx_img.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 + document.body.classList.remove("dragging") + } + +} -- 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') 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') 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