diff options
26 files changed, 566 insertions, 216 deletions
@@ -8,6 +8,7 @@ "lodash": "", "fiber": "", "jquery-jsonview": "1.2.0", - "prefixfree": "" + "prefixfree": "", + "marked": "0.3.2" } } diff --git a/public/assets/img/text-cursor.png b/public/assets/img/text-cursor.png Binary files differnew file mode 100644 index 0000000..66e9e0d --- /dev/null +++ b/public/assets/img/text-cursor.png diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 038a882..9ba0b4d 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -12,3 +12,8 @@ app.defaults = { ceiling: [255,255,255], }, } + +marked.setOptions({ + sanitize: true, + smartypants: true, +}) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 4627cd3..f94bbc2 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -51,7 +51,6 @@ MX.Movements = function (cam) { moveForward = true break - case 37: // left case 65: // a moveLeft = true break @@ -61,15 +60,16 @@ MX.Movements = function (cam) { moveBackward = true break - case 39: // right case 68: // d moveRight = true break + case 37: // left case 81: // q turnLeft = true break + case 39: // right case 69: // e turnRight = true break @@ -132,7 +132,6 @@ MX.Movements = function (cam) { moveForward = false break - case 37: // left case 65: // a moveLeft = false break @@ -142,15 +141,16 @@ MX.Movements = function (cam) { moveBackward = false break - case 39: // right case 68: // d moveRight = false break + case 37: // left case 81: // q turnLeft = false break + case 39: // right case 69: // e turnRight = false break diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 9c7af5c..1d975ec 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -3,34 +3,55 @@ MX.Text = MX.Object3D.extend({ init: function (ops) { this.type = "Text" - - var layer = new MX.Object3D('text') - layer.width = ops.width || 100 - layer.height = ops.height || 50 - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.scale = ops.scale || 1 - layer.el.innerHTML = ops.value || "" - if (ops.id) layer.el.id = ops.id; - if (ops.background) layer.el.style.background = ops.background; - if (ops.color) layer.el.style.color = ops.color; - if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px"; - this.add(layer) + this.type = "Image" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - this.children.forEach(function (c, i) { - if (ops.classname) { - c.el.classList.add(ops.classname) - } - else { - } - c.el.style.backgroundRepeat = 'no-repeat' - }) + this.scale = ops.scale || 1 + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-text") + this.el.classList.add("mx-scenery") + + this.inner = document.createElement("div") + this.inner.classList.add("inner") + this.el.appendChild(this.inner) + + this.load(ops) + }, + + load: function(ops){ + var media = ops.media + if (media.color) this.el.style.color = media.color; + if (media.font) this.setFont(media.font) - this.dirty = true - this.updateChildren = true - this.update() - } + this.setText( media.description ) + }, + + setFont: function(font){ + this.inner.style.fontFamily = "'" + font.family + "',sans-serif" + this.el.style.fontSize = (2 * font.size) + "pt" + this.el.style.textAlign = font.align + }, + + setText: function(text){ + this.inner.innerHTML = marked( text || "" ) + }, }) 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..a10a332 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js @@ -0,0 +1,75 @@ + +Scenery.types.text = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'text', + + init: function(opt){ + + opt.scale = 0.5 + + 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 ) + }, + + 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) + 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..820fb5f 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -68,14 +68,12 @@ }, */ mousedown: function(e){ - if (Scenery.nextText) { - } - else 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, @@ -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 ) } @@ -116,7 +116,7 @@ Minotaur.watch( app.router.editorView.settings ) } else { - app.controller.hideExtras() + app.controller.pickWall(base, pos) } } }) @@ -214,22 +214,79 @@ } Wall.prototype.wallpaper = function(background){ - var useX = this.side & FRONT_BACK - var shouldFlip = this.side & (LEFT | BACK) - - 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(")","") + + 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){ - 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" + mx.el.style.backgroundImage = url }) } + + 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) + + var mx, dx, dy + var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale ) + var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale ) + + 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 + } + Wall.prototype.outline = function(wallColor, outlineColor){ var useX = this.side & FRONT_BACK var mx = this.mx diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 513306d..49decc2 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -3,6 +3,7 @@ var EditorToolbar = View.extend({ el: "#editorToolbar", events: { + "mousedown": 'stopPropagation', "click [data-role='toggle-map-view']": 'toggleMap', "click [data-role='toggle-project-settings']": 'toggleSettings', "click [data-role='open-media-viewer']": 'openMediaViewer', @@ -42,6 +43,7 @@ var EditorToolbar = View.extend({ // this.resizeMedia(true) // this.destroyMedia(false) $(".inuse").removeClass("inuse") + $("body").removeClass("addText") this.parent.hideExtras() this.resetPermissions() }, @@ -131,6 +133,7 @@ var EditorToolbar = View.extend({ $("[data-role='toggle-text-editor']").toggleClass("inuse", state) this.parent.mediaEditor.hide() this.parent.wallpaperPicker.hide() + this.parent.lightControl.hide() this.parent.settings.hide() this.parent.textEditor.toggle(state) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 83db532..f95d909 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -42,11 +42,23 @@ var EditorView = View.extend({ }, pick: function(scenery){ - this.mediaEditor.pick(scenery) + if (scenery.type == "text") { + this.mediaEditor.hide() + this.textEditor.pick(scenery) + } + else { + this.textEditor.hide() + this.mediaEditor.pick(scenery) + } + }, + + pickWall: function(wall, pos){ + this.hideExtras() }, hideExtras: function(){ this.mediaEditor.hide() + this.textEditor.hide() Scenery.resize.hide() Scenery.hovering = false } 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/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index e4f93df..9b81db1 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -76,7 +76,6 @@ var MediaEditor = FormView.extend({ case "image": this.$(".image").show() this.$(".video").hide() - break case "youtube": @@ -90,7 +89,6 @@ var MediaEditor = FormView.extend({ this.$loop.prop('checked', !! media.loop) this.$mute.prop('checked', !! media.mute) this.$keyframe.val( Number(media.keyframe || 0) ) - break } }, @@ -162,11 +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") @@ -177,8 +176,6 @@ var MediaEditor = FormView.extend({ }, destroy: function(){ -// ConfirmModal.confirm("Are you sure you want delete this object?", function(){ -// }.bind(this)) var scenery = this.scenery this.hide() Scenery.remove(scenery.id) diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js index 0319a31..1e35c12 100644 --- a/public/assets/javascripts/ui/editor/TextEditor.js +++ b/public/assets/javascripts/ui/editor/TextEditor.js @@ -1,6 +1,8 @@ var TextEditor = FormView.extend({ el: "#textEditor", + tainted: false, + scenery: null, events: { "keydown": 'taint', @@ -8,21 +10,103 @@ var TextEditor = FormView.extend({ "mousedown": "stopPropagation", "change [name=font-family]": 'changeFontFamily', "change [name=font-size]": 'changeFontSize', + "change [name=text-align]": 'changeTextAlign', "input [name=text-body]": 'changeText', - "click [data-role=destroy-media]": "destroy", + "click [data-role=destroy-text]": "destroy", }, initialize: function(opt){ this.parent = opt.parent this.__super__.initialize.call(this) + this.$settings = this.$(".setting") + this.$noTextMessage = this.$(".no-text") this.$fontFamily = this.$("[name=font-family]") this.$fontSize = this.$("[name=font-size]") this.$textBody = this.$("[name=text-body]") + this.$textAlign = this.$("[name=text-align]") }, toggle: function(state){ - this.$el.toggleClass("active", state); + $("#keyhint").fadeOut(200) + + this.$el.toggleClass("active", state) + if (state) { + Scenery.nextMedia = { + type: 'text', + width: 600, + height: 450, + scale: 0.5, + font: { family: 'Lato', size: 12, align: 'left' }, + } + + this.createMode(true) + } + }, + + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) + }, + + taint: function(e){ + e.stopPropagation() + this.tainted = true + }, + + bind: function(scenery){ + this.tainted = false + this.scenery = scenery + this.scenery.mx.bound = true + this.scenery.mx.el.classList.add("picked") + }, + + unbind: function(){ + if (this.scenery) { + if (this.tainted) { + Minotaur.watch( app.router.editorView.settings ) + } + + if (this.scenery.mx) { + this.scenery.mx.bound = false + this.scenery.mx.el.classList.remove("picked") + } + } + this.tainted = false + this.scenery = null + }, + + createMode: function(state){ + this.$settings.toggle(! state) + this.$noTextMessage.toggle(!! state) + $("body").toggleClass("addText", !! state) + }, + + pick: function(scenery){ + if (this.scenery) { + this.unbind() + } + + Scenery.resize.show(scenery) + Scenery.hovering = true + + this.bind(scenery) + this.$el.toggleClass("active", true) + this.$textBody.val( this.scenery.media.description ) + + this.$fontFamily.val( this.scenery.media.font.family ) + this.$fontSize.val( this.scenery.media.font.size ) + this.$textAlign.val( this.scenery.media.font.align ) + + this.createMode(false) + + if (! this.scenery.media.description) { + setTimeout(function(){ + this.$textBody.focus() + }.bind(this), 100) + } }, taint: function(e){ @@ -30,12 +114,29 @@ var TextEditor = FormView.extend({ }, changeFontFamily: function(){ + this.scenery.setFont({ family: this.$fontFamily.val() }) + }, + + changeTextAlign: function(){ + this.scenery.setFont({ align: this.$textAlign.val() }) }, changeFontSize: function(){ + var size = parseInt( this.$fontSize.val() ) + size && this.scenery.setFont({ size: size }) }, - changeText: function(){ + changeText: function(e){ + e.stopPropagation() + var text = this.$textBody.val() + this.scenery.setText(text) }, + + destroy: function(){ + var scenery = this.scenery + this.hide() + Scenery.remove(scenery.id) + Scenery.resize.hide() + }, }) 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/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") diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 988dd89..6a034ea 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; @@ -412,12 +414,16 @@ iframe.embed { .page h1 { font-size: 80px; font-weight: 100; - padding: 20px 0 25px 0; + padding: 60px 0 25px 0; float: left; width: 100%; border-top: 1px solid; } +.page p { + margin: 20px; +} + /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */ .docs .content { @@ -667,9 +673,12 @@ iframe.embed { -webkit-box-sizing: content-box; box-sizing: content-box; } -.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] { +.destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } +.addText .mx-scene, .menu span.inuse[data-role="toggle-text-editor"] { + cursor:url(/assets/img/text-cursor.png), auto; +} .mx-scenery:active { cursor: pointer; @@ -695,6 +704,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; @@ -1410,6 +1429,7 @@ h4 { input[type=range] { -webkit-appearance: none; -moz-appearance: none; + cursor: pointer; background-color: black; width: 180px; height:3px; @@ -1455,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; @@ -1517,13 +1541,14 @@ input[type="range"]::-webkit-slider-thumb { .settings { padding: 10px 12px 12px 12px; - bottom: 20px; + bottom: 10px; right: 10px; font-size: 12px; -webkit-transform: translateY(450px); -webkit-transition: -webkit-transform 0.2s ease-in-out; transform: translateY(450px); transition: -webkit-transform 0.2s ease-in-out; + width: 210px; } .settings.active { @@ -1575,6 +1600,7 @@ input[type="range"]::-webkit-slider-thumb { .settings input[type="text"] { border: 1px solid #000; font-size: 15px; + max-width: 100%; padding: 5px; } @@ -1584,7 +1610,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{ @@ -2114,7 +2143,7 @@ a[data-role="forgot-password"] { background: white; padding: 10px; margin: 20px auto; -position: relative; + position: relative; } .collaborators button { diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html new file mode 100644 index 0000000..cd7eaa8 --- /dev/null +++ b/public/assets/test/bg.html @@ -0,0 +1,114 @@ +<div id="scene"></div> +<div style="position:fixed;top:419px;left:10px;"> +<input id="url" value="http://i.asdf.us/im/97/imgrid_1400887539_xx_abridged___dmgk.png"> +<input id="scale" type="range" min="0.01" max="10.0" step="0.1" value="1.0"> +<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div> +</div> +<script src="/assets/javascripts/util.js"></script> +<script src="/assets/javascripts/vendor/tube.js"></script> +<script src="/assets/javascripts/vendor/loader.js"></script> +<script src="/assets/javascripts/rectangles/util/constants.js"></script> +<script src="/assets/javascripts/rectangles/util/mouse.js"></script> +<script src="/assets/javascripts/rectangles/models/vec2.js"></script> +<script src="/assets/javascripts/rectangles/models/rect.js"></script> +<script src="/assets/javascripts/rectangles/models/surface.js"></script> +<script> + +var w = scene.width = 600 +var h = scene.height = 400 + +var surface = new Surface () +surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) ) +surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) ) +surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) ) +surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) ) + +var colors = "#f00 #ff0 #0ff #00f #f0f".split(" ") +surface.faces.forEach(function(face, i){ + var el = document.createElement("div") + el.style.position = "absolute" + el.style.backgroundColor = colors[i%colors.length] + el.style.top = face.y.a + "px" + el.style.left = face.x.a + "px" + el.style.width = face.width() + "px" + el.style.height = face.height() + "px" + scene.appendChild(el) + face.el = el +}) + +url.addEventListener("input", updateBackgroundImage) +scale.addEventListener("input", updateScale) + +var bg_w = 1, bg_h = 1, x = 0, y = 0, s = 1 +function updateBackgroundImage(){ + var img = new Image () + img.onload = function(){ + x0 = 0 + y0 = 0 + bg_w = img.naturalWidth + bg_h = img.naturalHeight + surface.faces.forEach(function(face, i){ + face.el.style.backgroundImage = 'url(' + url.value + ')' + }) + update(x,y,bg_w,bg_h) + } + img.src = url.value + img.complete && img.onload() +} +function update(x,y,w,h){ + dx = x + dy = y + surface.faces.forEach(function(face, i){ + dx = x-face.x.a + dy = y-face.y.a + face.el.style.backgroundPosition = dx + 'px ' + dy + 'px' + face.el.style.backgroundSize = w*s + 'px ' + h*s + 'px' +// console.log(x,y,' ',dx,dy) + }) +} +updateBackgroundImage() + +function updateScale(){ + s = parseFloat(scale.value) + console.log(scale.value, s) + update(x,y,bg_w,bg_h) +} + +var leftOffset = 0 + +var position = new vec2( 40, 40 ) +var dimension = new vec2( 50, 80 ) +var bounds = surface.bounds_at_index_with_dimensions(0, dimension) + +var delta = new vec2( 0, 0 ) + +var dragging = false + +var x0 = 0, y0 = 0 +var mymouse = new mouse({ + el: cursor, + down: function(e, cursor){ + console.log(cursor.x.a, cursor.y.a) + dragging = true + }, + drag: function(e, cursor){ + if (! dragging) return + delta = cursor.delta() + delta.a = - delta.a + x0 = delta.a*s + y0 = delta.b*s +// console.log(x0,y0) + update(x+x0,y+y0,bg_w,bg_h) + }, + up: function(e, cursor, new_cursor){ + x += delta.a*s + y += delta.b*s + delta.zero() + dragging = false + }, +}) + + + + +</script> 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 @@ </div> <h4>Preset Styles</h4> - <div class="color-swatches defaults"> - <span> + <div class="presets"> + <span data-preset="wireframe"> Wireframe </span> - <span> + <span data-preset="shaded"> Shaded </span> - <span> + <span data-preset="pfunk"> P.Funk </span> - <span> + <span data-preset="seapunk"> SeaPunk </span> </div> diff --git a/views/controls/editor/text-editor.ejs b/views/controls/editor/text-editor.ejs index 205fbdf..3a367d5 100644 --- a/views/controls/editor/text-editor.ejs +++ b/views/controls/editor/text-editor.ejs @@ -1,6 +1,10 @@ <div class="vvbox settings" id="textEditor"> <h4>Edit Text</h4> + <div class="no-text"> + Click a wall to add text. + </div> + <div class="setting"> <select name="font-family"> <option>Helvetica</option> @@ -17,6 +21,12 @@ <option value="36">36pt</option> <option value="72">72pt</option> </select> + <select name="text-align"> + <option value="left">Left</option> + <option value="center">Center</option> + <option value="right">Right</option> + <option value="justify">Justify</option> + </select> </div> <div class="setting"> diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs index 7d53315..f9d91af 100644 --- a/views/controls/editor/toolbar.ejs +++ b/views/controls/editor/toolbar.ejs @@ -3,39 +3,39 @@ <span data-role='open-media-viewer' data-info="add media" - class="ion-ios7-photos-outline"></span> + class="icon-ios7-photos-outline"></span> <!-- <span data-role='resize-media' data-info="resize media" - class="ion-arrow-resize"></span> + class="icon-arrow-resize"></span> <span data-role='destroy-media' data-info="delete media" - class="ion-ios7-trash-outline"></span> + class="icon-ios7-trash-outline"></span> <span data-role='toggle-text-editor' data-info="edit wall text" - class="ion-ios7-compose-outline"></span> + class="icon-ios7-compose-outline"></span> --> <span data-role='toggle-wallpaper-panel' data-info="add wallpaper" - class="ion-ios7-keypad-outline"></span> + class="icon-ios7-keypad-outline"></span> <span data-role='toggle-light-control' data-info="edit room colors" - class="ion-ios7-sunny-outline"></span> + class="icon-ios7-sunny-outline"></span> [[ if (user.username == "test12343") { ]] <span data-role='toggle-text-editor' - data-info="edit wall text" - class="ion-ios7-compose-outline"></span> + data-info="add text to wall" + class="icon-ios7-compose-outline"></span> [[ } ]] <span data-role='toggle-project-settings' data-info="room settings" - class="ion-key"></span> + class="icon-key"></span> </div> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 4af9938..f768160 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -3,6 +3,7 @@ <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script> <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script> <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/prefixfree/prefixfree.min.js"></script> +<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/marked/lib/marked.js"></script> <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script> <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script> <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script> @@ -17,6 +18,7 @@ <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movementsMobile.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script> +<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.text.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.video.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.youtube.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.vimeo.js"></script> @@ -27,19 +29,18 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/util/colors.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/coords.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/debug.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/util/permissions.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/util/keys.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/measurement.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/util/minotaur.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/util/mouse.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/util/permissions.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/sort.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/uid.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/util/wheel.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/util/mouse.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/util/keys.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/util/undostack.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/util/minotaur.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/util/wheel.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/vec2.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/vec3.js"></script> -<script type="text/javascript" src="/assets/javascripts/rectangles/models/mat4.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/rect.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/surface.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/models/tree.js"></script> @@ -60,6 +61,7 @@ <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/undo.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/_object.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/image.js"></script> +<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/text.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script> <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script> |
