diff options
Diffstat (limited to 'assets/javascripts/rectangles/engine/scenery/image/resize.js')
| -rw-r--r-- | assets/javascripts/rectangles/engine/scenery/image/resize.js | 72 |
1 files changed, 57 insertions, 15 deletions
diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js index 52d61bd..a0a98c5 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/resize.js +++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js @@ -5,8 +5,9 @@ Scenery.resize = new function(){ var obj var x, y, z, bounds var dragging = false - - var dots = [], dot + var dimensions, position + + var dots = [], dot, selected_dot base.init = function(){ base.build() @@ -28,8 +29,7 @@ Scenery.resize = new function(){ // generate a dot element base.build_dot = function(side) { var dot = new MX.Object3D('.dot') - dot.width = 10 - dot.height = 10 + dot.width = dot.height = dot_side dot.side = side $(dot.el).on({ mouseenter: function(){ base.hovering = true }, @@ -54,9 +54,9 @@ Scenery.resize = new function(){ // move all the dots to the object's current position base.move_dots = function(){ - x = obj.mx_img.x + sin(rotationY) * 3 + x = obj.mx_img.x + sin(rotationY) * dot_distance_from_picture y = obj.mx_img.y - z = obj.mx_img.z - cos(rotationY) * 3 + z = obj.mx_img.z - cos(rotationY) * dot_distance_from_picture dots.forEach(function(dot){ base.move_dot(dot) @@ -70,18 +70,18 @@ Scenery.resize = new function(){ dot.z = z if (dot.side & TOP) { - dot.y += obj.img.height / 2 + dot.y += obj.mx_img.height * obj.mx_img.scale / 2 } if (dot.side & BOTTOM) { - dot.y -= obj.img.height / 2 + dot.y -= obj.mx_img.height * obj.mx_img.scale / 2 } if (dot.side & LEFT) { - dot.x -= cos(rotationY) * obj.img.width / 2 - dot.z -= sin(rotationY) * obj.img.width / 2 + 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.img.width / 2 - dot.z += sin(rotationY) * obj.img.width / 2 + 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 } } @@ -118,16 +118,15 @@ Scenery.resize = new function(){ Scenery.mouse.bind_el(dot.el) $(dot.el).bind({ mouseenter: function(e){ - console.log('entered a dot') Scenery.resize.hovering = true }, mouseleave: function(e){ - console.log('left a dot') Scenery.resize.hovering = false base.defer_hide() } }) }) + Scenery.mouse.on("down", down) Scenery.mouse.on("drag", drag) Scenery.mouse.on("up", up) } @@ -136,23 +135,66 @@ Scenery.resize = new 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 - bounds = obj.wall.bounds_for(img) + + 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") } |
