From 607f69c67a5b4dc72d2754192e3cdf67d0ad11d0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Jun 2014 16:24:10 -0400 Subject: partitioning client and serveR --- .../rectangles/engine/scenery/image/resize.js | 201 +++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 client/assets/javascripts/rectangles/engine/scenery/image/resize.js (limited to 'client/assets/javascripts/rectangles/engine/scenery/image/resize.js') diff --git a/client/assets/javascripts/rectangles/engine/scenery/image/resize.js b/client/assets/javascripts/rectangles/engine/scenery/image/resize.js new file mode 100644 index 0000000..a0a98c5 --- /dev/null +++ b/client/assets/javascripts/rectangles/engine/scenery/image/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