diff options
Diffstat (limited to 'assets/javascripts')
6 files changed, 132 insertions, 52 deletions
diff --git a/assets/javascripts/rectangles/engine/scenery/_scenery.js b/assets/javascripts/rectangles/engine/scenery/_scenery.js index dbd9dbe..867bb6f 100644 --- a/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -8,6 +8,8 @@ var Scenery = new function(){ base.mouse = new mouse ({ use_offset: false }) base.init = function(){ + base.resize.init() + var urls = [ "http://okfocus.s3.amazonaws.com/office/ducks/duck1.jpg", "http://okfocus.s3.amazonaws.com/office/ducks/duck2.jpg", @@ -41,4 +43,3 @@ var Scenery = new function(){ return base } - diff --git a/assets/javascripts/rectangles/engine/scenery/image/_image.js b/assets/javascripts/rectangles/engine/scenery/image/_image.js index ae6bea4..767077b 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/_image.js +++ b/assets/javascripts/rectangles/engine/scenery/image/_image.js @@ -27,17 +27,22 @@ Scenery.image = function (wall, img) { }) 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.resize.bind() $(base.mx_img.el).bind({ mouseenter: function(e){ - Scenery.mouse.mouseenter(e, base) + 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/assets/javascripts/rectangles/engine/scenery/image/move.js b/assets/javascripts/rectangles/engine/scenery/image/move.js index deee0c9..0f6b0d9 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/move.js +++ b/assets/javascripts/rectangles/engine/scenery/image/move.js @@ -1,4 +1,6 @@ -Scenery.image.move = function(base){ + + +Scenery.image.move = function(base){ var x, y, z, bounds var dragging = false @@ -43,6 +45,8 @@ Scenery.image.move = function(base){ 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){ @@ -89,6 +93,9 @@ Scenery.image.move = function(base){ }) base.wall = new_wall + + Scenery.resize.rotate_dots() + Scenery.resize.move_dots() } return this diff --git a/assets/javascripts/rectangles/engine/scenery/image/resize.js b/assets/javascripts/rectangles/engine/scenery/image/resize.js index 9dbd349..52d61bd 100644 --- a/assets/javascripts/rectangles/engine/scenery/image/resize.js +++ b/assets/javascripts/rectangles/engine/scenery/image/resize.js @@ -1,17 +1,20 @@ -Scenery.image.resize = function(base){ +Scenery.resize = new function(){ + var base = this + + var obj var x, y, z, bounds var dragging = false var dots = [], dot - this.init = function(){ + base.init = function(){ base.build() base.bind() } // create 9 dots at the corners of the div - this.build = function(){ + base.build = function(){ [ TOP, TOP_RIGHT, RIGHT, @@ -22,25 +25,108 @@ Scenery.image.resize = function(base){ 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 + // generate a dot element + base.build_dot = function(side) { + var dot = new MX.Object3D('.dot') + dot.width = 10 + dot.height = 10 + 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) * 3 + y = obj.mx_img.y + z = obj.mx_img.z - cos(rotationY) * 3 + + 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.img.height / 2 + } + if (dot.side & BOTTOM) { + dot.y -= obj.img.height / 2 + } + if (dot.side & LEFT) { + dot.x -= cos(rotationY) * obj.img.width / 2 + dot.z -= sin(rotationY) * obj.img.width / 2 + } + if (dot.side & RIGHT) { + dot.x += cos(rotationY) * obj.img.width / 2 + dot.z += sin(rotationY) * obj.img.width / 2 } - base.dots.push(dot) } - this.bind = function(){ + // 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){ + 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("drag", drag) Scenery.mouse.on("up", up) @@ -54,35 +140,15 @@ Scenery.image.resize = function(base){ 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) + bounds = obj.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 - } + // cursor.x.magnitude()*cursor_amp } function up (e, cursor){ diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js index a9c2fd6..854b238 100644 --- a/assets/javascripts/rectangles/models/wall.js +++ b/assets/javascripts/rectangles/models/wall.js @@ -61,7 +61,9 @@ window.Wall = (function(){ return true } - Wall.prototype.center_for = function(img){ + Wall.prototype.center_for = function(img, offset){ + + offset = offset || 0 var major_axis, minor_axis if (this.side & FRONT_BACK) { @@ -76,18 +78,18 @@ window.Wall = (function(){ switch (this.side) { case FRONT: x = major_axis.midpoint() - z = minor_axis.a + painting_distance_from_wall + z = minor_axis.a + painting_distance_from_wall + offset break case BACK: x = major_axis.midpoint() - z = minor_axis.b - painting_distance_from_wall + z = minor_axis.b - painting_distance_from_wall + offset break case LEFT: - x = minor_axis.a + painting_distance_from_wall + x = minor_axis.a + painting_distance_from_wall + offset z = major_axis.midpoint() break case RIGHT: - x = minor_axis.b - painting_distance_from_wall + x = minor_axis.b - painting_distance_from_wall + offset z = major_axis.midpoint() break } diff --git a/assets/javascripts/rectangles/util/constants.js b/assets/javascripts/rectangles/util/constants.js index fae4f1b..8ba6208 100644 --- a/assets/javascripts/rectangles/util/constants.js +++ b/assets/javascripts/rectangles/util/constants.js @@ -16,6 +16,8 @@ var height_min = 200, var painting_distance_from_wall = 8 +var dot_hide_delay = 50 // ms + var wall_rotation = {} wall_rotation[FRONT] = PI wall_rotation[BACK] = 0 @@ -24,9 +26,6 @@ wall_rotation[RIGHT] = -HALF_PI - - - function sidesToString(sides){ var s = "" if (sides & FRONT) s += "front " |