From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:01:13 -0400 Subject: new scenery type: text --- .../rectangles/engine/rooms/projector.js | 30 --------- .../rectangles/engine/scenery/_scenery.js | 4 ++ .../rectangles/engine/scenery/resize.js | 16 +---- .../rectangles/engine/scenery/types/image.js | 2 + .../rectangles/engine/scenery/types/text.js | 66 ++++++++++++++++++ .../rectangles/engine/scenery/types/video.js | 2 + .../assets/javascripts/rectangles/models/mat4.js | 78 ---------------------- .../assets/javascripts/rectangles/models/wall.js | 8 +-- 8 files changed, 79 insertions(+), 127 deletions(-) delete mode 100644 public/assets/javascripts/rectangles/engine/rooms/projector.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/text.js delete mode 100644 public/assets/javascripts/rectangles/models/mat4.js (limited to 'public/assets/javascripts/rectangles') diff --git a/public/assets/javascripts/rectangles/engine/rooms/projector.js b/public/assets/javascripts/rectangles/engine/rooms/projector.js deleted file mode 100644 index 2eac314..0000000 --- a/public/assets/javascripts/rectangles/engine/rooms/projector.js +++ /dev/null @@ -1,30 +0,0 @@ - -rooms.projector = new function(){ - - projector = new THREE.Projector(); - vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); - projector.unprojectVector( vector, camera ); - - raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() ); - intersects = raycaster.intersectObjects( scene.children, true ); - -} - - - -THREE.Projector = function () { - - _viewProjectionMatrix = new THREE.Matrix4(), - - this.unprojectVector = function ( vector, camera ) { - camera.projectionMatrixInverse.getInverse( camera.projectionMatrix ); - - _viewProjectionMatrix.multiplyMatrices( - camera.matrixWorld, - camera.projectionMatrixInverse - ); - - return vector.applyProjection( _viewProjectionMatrix ); - }; - -} diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 69e9ba7..3d3067f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -24,6 +24,10 @@ var Scenery = new function(){ case 'vimeo': scene_media = new Scenery.types.video (opt) break + + case 'text': + scene_media = new Scenery.types.text (opt) + break } base.list[scene_media.id] = scene_media return scene_media diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js index 893237c..0ce976e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/resize.js +++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js @@ -117,22 +117,13 @@ Scenery.resize = new function(){ 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(){ + base.unbind = function(){ dots.forEach(function(dot){ Scenery.mouse.unbind_el(dot.el) }) @@ -151,7 +142,6 @@ Scenery.resize = new function(){ naturalDimension = obj.naturalDimensions dimension = obj.dimensions position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z) - scale = obj.mx.scale oldState = obj.serialize() document.body.classList.add("dragging") @@ -165,7 +155,6 @@ Scenery.resize = new function(){ var width = cursor.x.magnitude() var height = cursor.y.magnitude() var mag = cursor.magnitude() - var old_width = dimension.a * scale if (abs(width) > abs(height)) { mag = x_sign * mag * sign(width) @@ -175,9 +164,6 @@ Scenery.resize = new function(){ } obj.set_scale( ( dimension.a + mag ) / naturalDimension.a ) - // dimension.a // scale * (old_width + mag) / old_width - -// console.log(scale, obj.mx.scale, dimension.a + mag, naturalDimension.a) if (selected_dot.side & LEFT_RIGHT) { obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index aa43341..bed847b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -3,6 +3,8 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ var exports = { + type: 'image', + init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js new file mode 100644 index 0000000..16c7a5c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -0,0 +1,66 @@ + +Scenery.types.text = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'text', + + init: function(opt){ + + opt.scale = 1 + + base.init.call(this, opt) + + this.build() + this.bind() + + if (opt.data) { + if (opt.wall) { + var position = opt.wall.mxToPosition(opt.data.position) + opt.index = opt.wall.surface.index_for_x( position.a, 0 ) + } + this.set_wall(opt) + this.deserialize(opt.data) + } + else { + this.set_wall(opt) + if (this.bounds) { + this.recenter() + if (opt.position) { + this.translateTo(opt.position) + } + var mx_position = this.wall.positionToMx( this.position, this.dimensions ) + this.mx.move(mx_position) + } + } + }, + + build: function(){ + this.mx = new MX.Text({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + }, + + setText: function(text){ + this.media.description = text + this.mx.setText(text) + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + }, + } + + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 2ef6ec3..b723f56 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -2,6 +2,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ var exports = { + + type: 'video', init: function(opt){ opt.scale = opt.scale || (opt.data && opt.data.scale) || 300 / max(300, opt.media.width) diff --git a/public/assets/javascripts/rectangles/models/mat4.js b/public/assets/javascripts/rectangles/models/mat4.js deleted file mode 100644 index b061199..0000000 --- a/public/assets/javascripts/rectangles/models/mat4.js +++ /dev/null @@ -1,78 +0,0 @@ -function mat4(e){ - this.elements = [ 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 ] - return this -} -mat4.prototype.set = function (a) { - var els = this.elements - a.forEach(function(n,i){ els[i] = n }) - return this -} -mat4.prototype.clone = function(){ - return (new mat4).set(this.els) -} -mat4.prototype.identity = function () { - this.set([ - 1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1 - ]); - return this; -} -mat4.prototype.getInverse = function (m, throwOnInvertible) { - - // based on http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm - var te = this.elements; - var me = m.elements; - - var n11 = me[0], n12 = me[4], n13 = me[8], n14 = me[12]; - var n21 = me[1], n22 = me[5], n23 = me[9], n24 = me[13]; - var n31 = me[2], n32 = me[6], n33 = me[10], n34 = me[14]; - var n41 = me[3], n42 = me[7], n43 = me[11], n44 = me[15]; - - te[0] = n23*n34*n42 - n24*n33*n42 + n24*n32*n43 - n22*n34*n43 - n23*n32*n44 + n22*n33*n44; - te[4] = n14*n33*n42 - n13*n34*n42 - n14*n32*n43 + n12*n34*n43 + n13*n32*n44 - n12*n33*n44; - te[8] = n13*n24*n42 - n14*n23*n42 + n14*n22*n43 - n12*n24*n43 - n13*n22*n44 + n12*n23*n44; - te[12] = n14*n23*n32 - n13*n24*n32 - n14*n22*n33 + n12*n24*n33 + n13*n22*n34 - n12*n23*n34; - te[1] = n24*n33*n41 - n23*n34*n41 - n24*n31*n43 + n21*n34*n43 + n23*n31*n44 - n21*n33*n44; - te[5] = n13*n34*n41 - n14*n33*n41 + n14*n31*n43 - n11*n34*n43 - n13*n31*n44 + n11*n33*n44; - te[9] = n14*n23*n41 - n13*n24*n41 - n14*n21*n43 + n11*n24*n43 + n13*n21*n44 - n11*n23*n44; - te[13] = n13*n24*n31 - n14*n23*n31 + n14*n21*n33 - n11*n24*n33 - n13*n21*n34 + n11*n23*n34; - te[2] = n22*n34*n41 - n24*n32*n41 + n24*n31*n42 - n21*n34*n42 - n22*n31*n44 + n21*n32*n44; - te[6] = n14*n32*n41 - n12*n34*n41 - n14*n31*n42 + n11*n34*n42 + n12*n31*n44 - n11*n32*n44; - te[10] = n12*n24*n41 - n14*n22*n41 + n14*n21*n42 - n11*n24*n42 - n12*n21*n44 + n11*n22*n44; - te[14] = n14*n22*n31 - n12*n24*n31 - n14*n21*n32 + n11*n24*n32 + n12*n21*n34 - n11*n22*n34; - te[3] = n23*n32*n41 - n22*n33*n41 - n23*n31*n42 + n21*n33*n42 + n22*n31*n43 - n21*n32*n43; - te[7] = n12*n33*n41 - n13*n32*n41 + n13*n31*n42 - n11*n33*n42 - n12*n31*n43 + n11*n32*n43; - te[11] = n13*n22*n41 - n12*n23*n41 - n13*n21*n42 + n11*n23*n42 + n12*n21*n43 - n11*n22*n43; - te[15] = n12*n23*n31 - n13*n22*n31 + n13*n21*n32 - n11*n23*n32 - n12*n21*n33 + n11*n22*n33; - - var det = n11 * te[ 0 ] + n21 * te[ 4 ] + n31 * te[ 8 ] + n41 * te[ 12 ]; - - if ( det == 0 ) { - var msg = "Matrix4.getInverse(): can't invert matrix, determinant is 0"; - - if ( throwOnInvertible || false ) { - throw new Error( msg ) - } - else { - console.warn( msg ) - } - this.identity(); - return this - } - this.multiplyScalar( 1 / det ); - return this -} -mat4.prototype.multiplyScalar = function (n) { - var els = this.elements - els[0] *= n; els[4] *= n; els[8] *= n; els[12] *= n - els[1] *= n; els[5] *= n; els[9] *= n; els[13] *= n - els[2] *= n; els[6] *= n; els[10] *= n; els[14] *= n - els[3] *= n; els[7] *= n; els[11] *= n; els[15] *= n - return this -} - diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index fdc8d8c..dc38183 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,9 +68,7 @@ }, */ mousedown: function(e){ - if (Scenery.nextText) { - } - else if (Scenery.nextMedia) { + if (Scenery.nextMedia) { var offset = offsetFromPoint(e, mx.el) if (! offset) { return } @@ -91,13 +89,15 @@ app.controller.toolbar.resetPermissions() Scenery.resize.show(scenery) Scenery.hovering = true + + app.controller.pick(scenery) UndoStack.push({ type: 'create-scenery', undo: { id: scenery.id }, redo: scenery.serialize(), }) - + // TODO: watch individual scenery object here Minotaur.watch( app.router.editorView.settings ) } -- cgit v1.2.3-70-g09d2 From 1dae6e5dfce901cdadeebd2e191927dbc5a326f6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 16:07:21 -0400 Subject: bower: adding marked --- bower.json | 3 ++- public/assets/javascripts/defaults.js | 7 +++++++ public/assets/javascripts/mx/primitives/mx.text.js | 8 ++++---- .../javascripts/rectangles/engine/scenery/types/text.js | 2 +- public/assets/javascripts/ui/editor/MediaEditor.js | 10 ++++++---- public/assets/javascripts/ui/editor/TextEditor.js | 6 ++++-- public/assets/stylesheets/app.css | 12 +++++++++++- views/partials/scripts.ejs | 1 + 8 files changed, 36 insertions(+), 13 deletions(-) (limited to 'public/assets/javascripts/rectangles') diff --git a/bower.json b/bower.json index faffbfb..5f35d6c 100644 --- a/bower.json +++ b/bower.json @@ -8,6 +8,7 @@ "lodash": "", "fiber": "", "jquery-jsonview": "1.2.0", - "prefixfree": "" + "prefixfree": "", + "marked": "0.3.2" } } diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 038a882..c779233 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -12,3 +12,10 @@ app.defaults = { ceiling: [255,255,255], }, } + +marked.setOptions({ + gfm: true, + breaks: true, + sanitize: true, + smartypants: true, +}) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 7b8e595..b4089f3 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -26,11 +26,11 @@ MX.Text = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") - this.el.classList.add("text") + this.el.classList.add("mx-text") this.el.classList.add("mx-scenery") this.inner = document.createElement("div") - this.inner.style.width = "100%" + this.inner.classList.add("inner") this.el.appendChild(this.inner) this.load(ops) @@ -41,11 +41,11 @@ MX.Text = MX.Object3D.extend({ if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; - this.inner.innerHTML = ops.media.description || "" + this.inner.innerHTML = marked( ops.media.description || "" ) }, setText: function(text){ - this.inner.innerHTML = text + this.inner.innerHTML = marked( text || "" ) }, }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 16c7a5c..20e9883 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -47,7 +47,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ setText: function(text){ this.media.description = text - this.mx.setText(text) + this.mx.setText( text ) }, serialize: function(){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 0a4d894..9b81db1 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -160,10 +160,12 @@ var MediaEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - this.scenery.media.title = this.$name.val() - this.scenery.media.description = this.$description.val() - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + this.scenery.media.title = this.$name.val() + this.scenery.media.description = this.$description.val() + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false this.scenery.mx.el.classList.remove("picked") diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0d082ca..3d3124b 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -55,8 +55,10 @@ var TextEditor = FormView.extend({ }, unbind: function(){ - if (this.scenery && this.tainted) { - Minotaur.watch( app.router.editorView.settings ) + if (this.scenery) { + if (this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + } if (this.scenery.mx) { this.scenery.mx.bound = false diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index e746cad..02bbe6a 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -698,6 +698,16 @@ iframe.embed { .mx-object3d video { pointer-events: none; } +.mx-text { + overflow: hidden; +} +.mx-text .inner { + width: 100%; + pointer-events: none; +} +.mx-text p { + margin-bottom: 1em; +} #keyhint { position: fixed; bottom:0; @@ -2117,7 +2127,7 @@ a[data-role="forgot-password"] { background: white; padding: 10px; margin: 20px auto; -position: relative; + position: relative; } .collaborators button { diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 35dd782..f768160 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -3,6 +3,7 @@ + -- cgit v1.2.3-70-g09d2 From 4d78b32ce840bb804221f0208ee7cb0c8ffa8e02 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 6 Oct 2014 18:13:58 -0400 Subject: setting font family & size --- public/assets/javascripts/defaults.js | 2 -- public/assets/javascripts/mx/primitives/mx.text.js | 19 +++++++++++++++---- .../rectangles/engine/scenery/types/text.js | 11 ++++++++++- public/assets/javascripts/ui/editor/TextEditor.js | 13 ++++++++++++- public/assets/stylesheets/app.css | 9 +++++++-- 5 files changed, 44 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/rectangles') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index c779233..9ba0b4d 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -14,8 +14,6 @@ app.defaults = { } marked.setOptions({ - gfm: true, - breaks: true, sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index b4089f3..8db28d0 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -37,11 +37,22 @@ MX.Text = MX.Object3D.extend({ }, load: function(ops){ - if (ops.color) this.el.style.color = ops.color; - if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif"; - if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px"; + var media = ops.media + if (media.color) this.el.style.color = media.color; + if (media.font) this.setFont(media.font) + if (media.align) this.setAlign(media.align) - this.inner.innerHTML = marked( ops.media.description || "" ) + this.setText( media.description ) + }, + + setAlign: function(align) { + this.el.style.textAlign = "align" + }, + + setFont: function(font){ + console.log(font) + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" + this.el.style.fontSize = (2 * font.size) + "pt" }, setText: function(text){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js index 20e9883..a10a332 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -7,7 +7,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ init: function(opt){ - opt.scale = 1 + opt.scale = 0.5 base.init.call(this, opt) @@ -49,6 +49,15 @@ Scenery.types.text = Scenery.types.base.extend(function(base){ this.media.description = text this.mx.setText( text ) }, + + setFont: function(style){ + for (var i in style) { + if (style.hasOwnProperty(i)) { + this.media.font[i] = style[i] + } + } + this.mx.setFont(this.media.font) + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 3d3124b..c867d94 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -30,7 +30,15 @@ var TextEditor = FormView.extend({ this.$el.toggleClass("active", state) if (state) { - Scenery.nextMedia = { type: 'text', width: 300, height: 150 } + Scenery.nextMedia = { + type: 'text', + width: 600, + height: 450, + scale: 0.5, + font: { family: 'Lato', size: 12 }, + align: 'left', + } + this.createMode(true) } }, @@ -101,9 +109,12 @@ var TextEditor = FormView.extend({ }, changeFontFamily: function(){ + this.scenery.setFont({ family: this.$fontFamily.val() }) }, changeFontSize: function(){ + var size = parseInt( this.$fontSize.val() ) + size && this.scenery.setFont({ size: size }) }, changeText: function(e){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 02bbe6a..1c20493 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -4,9 +4,11 @@ margin:0; padding:0; outline:0; - font-family: 'Lato', sans-serif; -webkit-font-smoothing: subpixel-antialiased; } +body,textarea,input { + font-family: 'Lato', sans-serif; +} *, *:before, *:after { moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -1597,7 +1599,10 @@ input[type="range"]::-webkit-slider-thumb { font-size: 12px; width: 100%; max-height: 200px; - max-width: 180px; +} +#textEditor.settings textarea { + max-height: none; + height: 290px; } .settings input[type="text"]:focus{ -- cgit v1.2.3-70-g09d2 From d8637f78753af20022c9b6cd55717a5f905dd0ee Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 12:11:43 -0400 Subject: splitting wallpaper url / position --- .../assets/javascripts/rectangles/models/wall.js | 24 ++++++++++++++-------- public/assets/javascripts/ui/editor/EditorView.js | 4 ++++ public/assets/javascripts/ui/reader/ReaderView.js | 4 ++++ 3 files changed, 23 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index dc38183..dedae8b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,12 +68,12 @@ }, */ mousedown: function(e){ - if (Scenery.nextMedia) { - var offset = offsetFromPoint(e, mx.el) - if (! offset) { return } + var offset = offsetFromPoint(e, mx.el) + if (! offset) { return } - var pos = base.mxOffsetToPosition( offset, index ) + var pos = base.mxOffsetToPosition( offset, index ) + if (Scenery.nextMedia) { var scenery = Scenery.addNextToWall({ wall: base, index: index, @@ -116,7 +116,7 @@ Minotaur.watch( app.router.editorView.settings ) } else { - app.controller.hideExtras() + app.controller.pickWall(base, pos) } } }) @@ -140,6 +140,7 @@ Wall.prototype.deserialize = function(data){ this.wallpaper( data.background ) + this.wallpaperPosition( data.background_x, data.background_y, data.background_scale ) } @@ -214,22 +215,27 @@ } Wall.prototype.wallpaper = function(background){ + this.background = background || "none" + this.mx.forEach(function(mx){ + mx.el.style.backgroundImage = background + }) + } + + Wall.prototype.wallpaperPosition = function(x, y, scale){ var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) - - this.background = background || "none" - + this.mx.forEach(function(mx){ var partitionOffset = useX ? mx.x : mx.z if (shouldFlip) partitionOffset *= -1 partitionOffset += mx.width/2 var floorOffset = mx.y + mx.height/2 - mx.el.style.backgroundImage = background mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" }) } + Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK var mx = this.mx diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 67687fe..f95d909 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -52,6 +52,10 @@ var EditorView = View.extend({ } }, + pickWall: function(wall, pos){ + this.hideExtras() + }, + hideExtras: function(){ this.mediaEditor.hide() this.textEditor.hide() diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 82db048..5f2db0f 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -78,6 +78,10 @@ var ReaderView = View.extend({ app.tube("pick-scenery", { scenery: scenery }) }, + pickWall: function(wall, pos){ + this.hideExtras() + }, + hideExtras: function(){ this.mediaPlayer.hide() app.tube("close-scenery") -- cgit v1.2.3-70-g09d2 From 42420ebed566dffd680998d5b2fb46764164e540 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 13:04:41 -0400 Subject: wallpaperPosition --- .../assets/javascripts/rectangles/models/wall.js | 75 ++++++++++++++++++---- 1 file changed, 64 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/rectangles') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index dedae8b..93e1f42 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -140,7 +140,6 @@ Wall.prototype.deserialize = function(data){ this.wallpaper( data.background ) - this.wallpaperPosition( data.background_x, data.background_y, data.background_scale ) } @@ -215,24 +214,78 @@ } Wall.prototype.wallpaper = function(background){ - this.background = background || "none" + if (! background) { + background = { src: "none" } + } + else if (typeof background == "string") { + background = { src: background } + } + else if (! background.src) { + background = { src: "none" } + } + background.x = background.x || 0 + background.y = background.y || 0 + background.scale = background.scale || 1 + + this.background = background + this.background.src = this.background.src.replace("url(","").replace(")","") + + console.log(background) + + if (this.background.src == "none") { + this.wallpaperLoad(this.background.src) + return + } + + var img = new Image () + img.onload = function(){ + this.backgroundImage = img + this.wallpaperLoad(this.background.src) + this.wallpaperPosition(background) + }.bind(this) + img.src = this.background.src + img.complete && img.onload() + } + + Wall.prototype.wallpaperLoad = function(url){ + if (url !== "none") { + url = "url(" + url + ")" + } this.mx.forEach(function(mx){ - mx.el.style.backgroundImage = background + mx.el.style.backgroundImage = url }) } - Wall.prototype.wallpaperPosition = function(x, y, scale){ + Wall.prototype.wallpaperPosition = function(background){ + if (this.background.src == "none") { return } + this.background.x = background.x || this.background.x + this.background.y = background.y || this.background.y + this.background.scale = background.scale || this.background.scale || 1 + var useX = this.side & FRONT_BACK var shouldFlip = this.side & (LEFT | BACK) - this.mx.forEach(function(mx){ - var partitionOffset = useX ? mx.x : mx.z - if (shouldFlip) partitionOffset *= -1 - partitionOffset += mx.width/2 - var floorOffset = mx.y + mx.height/2 + var mx, dx, dy + var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) + var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) - mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px" - }) + this.surface.faces.forEach(function(face, i){ + + if (shouldFlip) { + mx = this.mx[this.mx.length-1-i] + dx = Math.round( this.background.x + face.x.a ) + dy = Math.round( this.background.y + face.y.b ) + } + else { + mx = this.mx[i] + dx = Math.round( this.background.x - face.x.b ) + dy = Math.round( this.background.y + face.y.b ) + } + + mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px' + mx.el.style.backgroundSize = w + 'px ' + h + 'px' + }.bind(this)) + bbb = this } -- cgit v1.2.3-70-g09d2 From f5ab61241bf9519325a36b86ee74ab2df13a4331 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 7 Oct 2014 14:43:45 -0400 Subject: colorpicker presets --- .../assets/javascripts/rectangles/models/wall.js | 2 -- .../assets/javascripts/ui/editor/LightControl.js | 33 ++++++++++++++++++++++ public/assets/javascripts/ui/reader/MediaPlayer.js | 4 +-- public/assets/stylesheets/app.css | 8 ++++-- views/controls/editor/light-control.ejs | 10 +++---- 5 files changed, 46 insertions(+), 11 deletions(-) (limited to 'public/assets/javascripts/rectangles') diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 93e1f42..820fb5f 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -230,8 +230,6 @@ this.background = background this.background.src = this.background.src.replace("url(","").replace(")","") - console.log(background) - if (this.background.src == "none") { this.wallpaperLoad(this.background.src) return diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js index 3eb2861..2b7cfaa 100644 --- a/public/assets/javascripts/ui/editor/LightControl.js +++ b/public/assets/javascripts/ui/editor/LightControl.js @@ -10,6 +10,7 @@ var LightControl = View.extend({ "input #brightness-control": "updateBrightness", "input #outline-hue": "updateShadow", "input #wall-hue": "updateShadow", + "click .presets span": "selectPreset", }, initialize: function(){ @@ -114,6 +115,38 @@ var LightControl = View.extend({ this.setMode(mode) }, + presets: { + wireframe: { + wall: [255,255,255], + outline: [0,0,0], + floor: [246,246,246], + ceiling: [255,255,255], + }, + shaded: { + wall: [205,205,204], + outline: [0,0,0], + floor: [109,116,106], + ceiling: [159,163,157], + }, + pfunk: { + wall: [255,63,78], + outline: [255,246,0], + floor: [255,255,0], + ceiling: [225,118,252], + }, + seapunk: { + wall: [110,255,255], + outline: [146,133,255], + floor: [89,221,255], + ceiling: [139,255,173], + }, + }, + selectPreset: function(e){ + var preset = $(e.currentTarget).data('preset') + if (! this.presets[preset]) return + this.load(this.presets[preset]) + }, + beginBrightness: function(){ this.begin() $(window).one("mouseup", this.finalize.bind(this)) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index df2d075..6195ab6 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -53,8 +53,8 @@ var MediaPlayer = FormView.extend({ this.bind(scenery) this.$el.addClass("active") - this.$name.html(media.title) - this.$description.html(media.description) + this.$name.html( sanitize(media.title) ) + this.$description.html( marked(media.description) ) switch (media.type) { case "image": diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index eb3bd87..15f29c3 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1475,13 +1475,17 @@ input[type="range"]::-webkit-slider-thumb { .color-swatches { margin-top: 10px; } -.color-swatches.defaults { +.presets { margin-top: 10px; } -.color-swatches.defaults span{ +.presets span { font-size:12px; font-weight:500; + display: inline-block; + width: 50%; + float:left; + cursor:pointer; } .color-swatches span { display: inline-block; diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs index fdf95a7..1fc4484 100644 --- a/views/controls/editor/light-control.ejs +++ b/views/controls/editor/light-control.ejs @@ -23,17 +23,17 @@

Preset Styles

-
- +
+ Wireframe - + Shaded - + P.Funk - + SeaPunk
-- cgit v1.2.3-70-g09d2