diff options
Diffstat (limited to 'assets/javascripts/rectangles/engine/scenery')
4 files changed, 235 insertions, 115 deletions
diff --git a/assets/javascripts/rectangles/engine/scenery/image.js b/assets/javascripts/rectangles/engine/scenery/image.js deleted file mode 100644 index 6434603..0000000 --- a/assets/javascripts/rectangles/engine/scenery/image.js +++ /dev/null @@ -1,115 +0,0 @@ -Scenery.image = function (wall, img) { - - var base = this - var center - var x = 0, y = 0, z = 0, bounds - var dragging = false - - // should be proportional to distance from wall - var cursor_amp = 1.5 - - base.init = function(){ - base.build() - base.bind() - } - - base.build = function(){ - center = wall.center_for(img) - base.mx_img = new MX.Image({ - src: img.src, - x: center.a, - y: Rooms.list[wall.room].height/2 - img.height/2 - 20, - z: center.b, - scale: 300/img.naturalWidth, - rotationY: wall_rotation[ wall.side ], - backface: false, - }) - scene.add( base.mx_img ) - } - - base.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) - } - - 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 = wall.bounds_for(img) - document.body.classList.add("dragging") - } - - function switch_wall (e, new_wall, cursor){ - if (! dragging) return - if (new_wall.uid == wall.uid) return - if (! new_wall.fits(img)) return - - bounds = new_wall.bounds_for(img) - center = new_wall.center_for(img) - - x = center.a - z = center.b - - var wall_group = wall.side | new_wall.side - - if (wall.side !== new_wall.side && wall_group !== FRONT_BACK && wall_group !== LEFT_RIGHT) { - switch (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 ] - }) - - wall = new_wall - } - - function drag (e, cursor){ - if (! dragging) return - - base.mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp ) - switch (wall.side) { - case FRONT: - base.mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp ) - break - case BACK: - base.mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp ) - break - case LEFT: - base.mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp ) - break - case RIGHT: - base.mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp ) - break - } - } - - function up (e, cursor){ - dragging = false - document.body.classList.remove("dragging") - } - - return base -} diff --git a/assets/javascripts/rectangles/engine/scenery/image/_image.js b/assets/javascripts/rectangles/engine/scenery/image/_image.js new file mode 100644 index 0000000..ae6bea4 --- /dev/null +++ b/assets/javascripts/rectangles/engine/scenery/image/_image.js @@ -0,0 +1,46 @@ +Scenery.image = function (wall, img) { + + var base = this + + base.wall = wall + base.img = img + base.center = wall.center_for(img) + 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.resize = new Scenery.image.resize (base) + } + + base.bind = function(){ + base.move.bind() + base.resize.bind() + $(base.mx_img.el).bind({ + mouseenter: function(e){ + Scenery.mouse.mouseenter(e, base) + }, + mouseleave: function(e){ + } + }) + } + + return base +} diff --git a/assets/javascripts/rectangles/engine/scenery/image/move.js b/assets/javascripts/rectangles/engine/scenery/image/move.js new file mode 100644 index 0000000..deee0c9 --- /dev/null +++ b/assets/javascripts/rectangles/engine/scenery/image/move.js @@ -0,0 +1,96 @@ +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 + } + } + + 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_for(base.img) + + 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 + } + + return this + +}
\ No newline at end of file diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js new file mode 100644 index 0000000..9dbd349 --- /dev/null +++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js @@ -0,0 +1,93 @@ +Scenery.image.resize = function(base){ + + var x, y, z, bounds + var dragging = false + + var dots = [], dot + + this.init = function(){ + base.build() + base.bind() + } + + // create 9 dots at the corners of the div + this.build = function(){ + [ TOP, + TOP_RIGHT, + RIGHT, + BOTTOM_RIGHT, + BOTTOM, + BOTTOM_LEFT, + LEFT, + TOP_LEFT ].forEach(base.build_dot) + } + + this.build_dot = function(direction) { + var dot = new MX.Dot () + dot.direction = direction + switch (wall.side) { + case FRONT: + case BACK: + base.mx_img.x = bounds.x.clamp( x + sin(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp ) + break + case LEFT: + case RIGHT: + base.mx_img.z = bounds.x.clamp( z + cos(wall_rotation[wall.side]) * cursor.x.magnitude()*cursor_amp ) + break + } + base.dots.push(dot) + } + + this.bind = function(){ + dots.forEach(function(dot){ + Scenery.mouse.bind_el(dot.el) + }) + 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("drag", drag) + Scenery.mouse.off("up", up) + } + + + + function down (e, cursor){ + dragging = true + x = base.mx_img.x + y = base.mx_img.y + z = base.mx_img.z + bounds = base.wall.bounds_for(img) + 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 (wall.side) { + case FRONT: + base.mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp ) + break + case BACK: + base.mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp ) + break + case LEFT: + base.mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp ) + break + case RIGHT: + base.mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp ) + break + } + } + + function up (e, cursor){ + dragging = false + document.body.classList.remove("dragging") + } + +} |