diff options
10 files changed, 221 insertions, 7 deletions
diff --git a/Gruntfile.js b/Gruntfile.js index 026ec6f..789ce6f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -79,6 +79,7 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/resize.js", "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 006ff2a..8dac140 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -8,6 +8,7 @@ Scenery.resize = new function(){ var dragging = false var naturalDimension, naturalDimensionCopy, dimension, position, scale var oldState + var rotationY var dots = [], dot, selected_dot diff --git a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js index 1543def..888b925 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js @@ -9,6 +9,7 @@ var Sculpture = new function(){ base.init = function(){ app.on("move", base.updateBillboards) + base.resize.init() } base.updateBillboards = function(){ @@ -17,6 +18,9 @@ var Sculpture = new function(){ sculpture.mx.rotationY = cam.rotationY } }) + if (Sculpture.resize.obj && Sculpture.resize.obj.billboard) { + Sculpture.resize.move_dots() + } } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index 28d707e..f968bcf 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -66,9 +66,9 @@ Sculpture.move = function(base){ base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) -// if (editor.permissions.resize) { -// Sculpture.resize.move_dots() -// } + if (editor.permissions.resize) { + Sculpture.resize.move_dots() + } } function up (e, cursor){ diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js new file mode 100644 index 0000000..53b8b2d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -0,0 +1,207 @@ +Sculpture.resize = new function(){ + + var base = this + + var obj + var x, y, z, bounds + var dragging = false + var naturalDimension, naturalDimensionCopy, dimension, position, scale + var oldState + var rotationY + + 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 * 2 + dot.scale = 0.5 + 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) + }) + } + + // move all the dots to the object's current position + base.move_dots = function(){ + rotationY = obj.mx.rotationY + + var x = obj.mx.x + sin(rotationY) * dot_distance_from_picture + var y = obj.mx.y + var z = obj.mx.z - cos(rotationY) * dot_distance_from_picture + + dots.forEach(function(dot){ + base.move_dot(dot, { x: x, y: y, z: z, rotationY: rotationY }) + }) + } + + // move a dot .. to the initial position of the image + base.move_dot = function(dot, pos){ + if (dot.side & TOP) { + pos.y += obj.dimensions.b / 2 + } + if (dot.side & BOTTOM) { + pos.y -= obj.dimensions.b / 2 + } + if (dot.side & LEFT) { + pos.x -= cos(rotationY) * (obj.dimensions.a) / 2 + pos.z -= sin(rotationY) * (obj.dimensions.a) / 2 + } + if (dot.side & RIGHT) { + pos.x += cos(rotationY) * (obj.dimensions.a) / 2 + pos.z += sin(rotationY) * (obj.dimensions.a) / 2 + } + dot.move(pos) + } + + // pick a new object to focus on and show the dots + base.show = function(new_object) { + // if (obj === new_object) return + if (! new_object) return + base.obj = obj = new_object + base.add_dots() + base.move_dots() + } + + // dismiss the dots on blur + var dotsHideTimeout; + base.defer_hide = function(){ + clearTimeout(dotsHideTimeout) + + dotsHideTimeout = setTimeout(function(){ + if (Scenery.hovering || Scenery.resize.hovering || Scenery.mouse.down) return + Scenery.resize.hide() + }, dot_hide_delay) + } + + base.hide = function () { + if (! obj) return + base.obj = obj = null + dots.forEach(function(dot){ + scene.remove(dot) + }) + } + + base.bind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.bind_el(dot.el) + }) + Sculpture.mouse.on("down", down) + Sculpture.mouse.on("drag", drag) + Sculpture.mouse.on("up", up) + } + + base.unbind = function(){ + dots.forEach(function(dot){ + Sculpture.mouse.unbind_el(dot.el) + }) + Sculpture.mouse.off("down", down) + Sculpture.mouse.off("drag", drag) + Sculpture.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 + + naturalDimension = obj.naturalDimensions + dimension = obj.dimensions + position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) + oldState = obj.serialize() + + if (obj.type == "text") { + naturalDimensionCopy = naturalDimension.clone() + positionCopy = position.clone() + } + + document.body.classList.add("dragging") + } + + function drag (e, cursor){ + if (! dragging) return + + 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 width = cursor.x.magnitude() + var height = cursor.y.magnitude() + var mag = cursor.magnitude() + + if (abs(width) > abs(height)) { + mag = x_sign * mag * sign(width) + } + else { + mag = y_sign * mag * sign(height) + } + + if (obj.type == "text") { + obj.mx.width = obj.media.width = naturalDimension.a = naturalDimensionCopy.a + (mag * 2) + obj.mx.height = obj.media.height = naturalDimension.b = naturalDimensionCopy.b + (mag * 2) + dimension.a = naturalDimension.a * obj.scale + dimension.b = naturalDimension.b * obj.scale + } + else { + obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) + } + + if (selected_dot.side & LEFT_RIGHT) { + obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) + obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign) + } + if (selected_dot.side & TOP_BOTTOM) { + obj.mx.y = position.b - mag/2 * y_sign + } + + base.move_dots() + + app.controller.sculptureEditor.setDimensions() + } + + function up (e, cursor){ + if (! dragging) return + dragging = false + if (! editor.permissions.resize) { return } + + obj.scale = obj.mx.ops.scale = obj.mx.scale + obj.dimensions.assign(obj.naturalDimensions).mul(obj.scale) + + UndoStack.push({ + type: 'update-sculpture', + undo: oldState, + redo: obj.serialize(), + }) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + document.body.classList.remove("dragging") + selected_dot = null + } +}
\ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index b903c5b..390c42e 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -80,7 +80,7 @@ Sculpture.types.base = Fiber.extend(function(base){ Sculpture.remove(this.id) - // Sculpture.resize.hide() + Sculpture.resize.hide() if (app.controller.sculptureEditor) { app.controller.sculptureEditor.tainted = false app.controller.sculptureEditor.hide() diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js index 530de2b..799bdc7 100644 --- a/public/assets/javascripts/rectangles/models/floor.js +++ b/public/assets/javascripts/rectangles/models/floor.js @@ -90,7 +90,7 @@ } app.controller.toolbar.resetPermissions() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true // app.controller.pick(sculpture) diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index a7b4f20..a2d84a6 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -84,6 +84,7 @@ var EditorView = View.extend({ this.mediaEditor.hide() this.textEditor.hide() this.share.hide() + Sculpture.resize.hide() Scenery.resize.hide() Scenery.hovering = false } diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index ff1e6b9..35abc00 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -67,7 +67,7 @@ var SculptureEditor = FormView.extend({ // app.controller.toolbar.resetMode() app.controller.toolbar.resetControls() - // Sculpture.resize.show(sculpture) + Sculpture.resize.show(sculpture) Sculpture.hovering = true var media = sculpture.media @@ -149,7 +149,6 @@ var SculptureEditor = FormView.extend({ this.tainted = true }, - setBillboard: function(){ var checked = this.$billboard.prop('checked') this.sculpture.setBillboard(checked) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 1eda8bd..6dfe912 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -75,6 +75,7 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/_sculpture.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/move.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/resize.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/_object.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/sculpture/types/image.js"></script> |