From 3832685358c9d3ad3e0aead51228f29255702007 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 13:23:33 -0400 Subject: setVolume functions --- public/assets/javascripts/mx/primitives/mx.video.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.vimeo.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.youtube.js | 5 +++++ 3 files changed, 15 insertions(+) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c281f02..9138cdd 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -87,6 +87,11 @@ MX.Video = MX.Object3D.extend({ this.muted = false }, + setVolume: function(n){ + if (this.muted) return + this.player.volume = n + }, + setLoop: function(state){ this.media.loop = state }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index fe5ce86..bff781b 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -130,6 +130,11 @@ MX.Vimeo = MX.Object3D.extend({ this.player.api('setVolume', 0.8) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.api('setVolume', n) + }, setLoop: function(state){ this.media.loop = state diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 5c92378..fad66dd 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -173,6 +173,11 @@ MX.Youtube = MX.Object3D.extend({ this.player.setVolume(80) this.muted = false }, + + setVolume: function(n){ + if (this.muted) return + this.player.setVolume( floor(n * 100) ) + }, setLoop: function(state){ this.media.loop = state -- cgit v1.2.3-70-g09d2 From 0a67e7f8ab74f82212a123dd6c30903124c1e8df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Mar 2015 17:08:47 -0400 Subject: sound interpolation --- .../assets/javascripts/mx/primitives/mx.soundcloud.js | 5 +++++ public/assets/javascripts/mx/primitives/mx.video.js | 2 +- public/assets/javascripts/mx/primitives/mx.vimeo.js | 2 +- public/assets/javascripts/mx/primitives/mx.youtube.js | 2 +- .../javascripts/rectangles/engine/scenery/_scenery.js | 1 + .../javascripts/rectangles/engine/scenery/sound.js | 17 +++++++++++++++++ .../rectangles/engine/scenery/types/audio.js | 4 ++++ views/partials/scripts.ejs | 1 + 8 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/scenery/sound.js (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js index 75286d9..fecb2f4 100644 --- a/public/assets/javascripts/mx/primitives/mx.soundcloud.js +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -102,6 +102,11 @@ MX.Soundcloud = MX.Object3D.extend({ setLoop: function(state){ this.media.loop = state }, + + setVolume: function(n){ + if (this.muted || ! this.player) return + this.player.setVolume(floor( n * 100 )) + }, didPlay: function(){ this.paused = false diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 9138cdd..43c392a 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -88,7 +88,7 @@ MX.Video = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.volume = n }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index bff781b..ccd0a13 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -132,7 +132,7 @@ MX.Vimeo = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player) return this.player.api('setVolume', n) }, diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index fad66dd..e4e73d6 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -175,7 +175,7 @@ MX.Youtube = MX.Object3D.extend({ }, setVolume: function(n){ - if (this.muted) return + if (this.muted || ! this.player || ! this.player.setVolume) return this.player.setVolume( floor(n * 100) ) }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d52fe21..18d665f 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -11,6 +11,7 @@ var Scenery = new function(){ base.init = function(){ base.resize.init() + base.sound.init() } base.add = function(opt){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js new file mode 100644 index 0000000..2f7f8de --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -0,0 +1,17 @@ + +Scenery.sound = {} +Scenery.sound.max_distance = 600 +Scenery.sound.init = function(){ + app.tube.on("move", Scenery.sound.move) +} +Scenery.sound.move = function(){ + var vals = Scenery.map(function(scenery){ + if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { + //get distance from A to B + var distance = dist(cam.x, cam.z, + scenery.mx.x, scenery.mx.z) + var volume = 1 - (clamp( distance, 0, Scenery.sound.max_distance ) / Scenery.sound.max_distance) + scenery.setVolume(volume) + } + }) +} diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js index 82f984e..fdd221d 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -39,6 +39,10 @@ Scenery.types.audio = Scenery.types.base.extend(function(base){ this.dimensions.deserialize(data.dimensions) }, + setVolume: function(n){ + this.mx.setVolume(n) + }, + play: function(){ this.mx.play() }, diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 011644b..72aaa8c 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -65,6 +65,7 @@ + -- cgit v1.2.3-70-g09d2 From 9117849bf7d183c5ed773c5ed1ef105c41a0f659 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 20:25:45 -0400 Subject: split out mx.grid --- public/assets/javascripts/mx/primitives/mx.grid.js | 60 +++++++ .../javascripts/rectangles/engine/map/ui_ortho.js | 65 +++++++ .../javascripts/rectangles/engine/scenery/move.js | 3 +- public/assets/test/ortho2.html | 200 +++++++++++++++++++++ 4 files changed, 326 insertions(+), 2 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.grid.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js create mode 100644 public/assets/test/ortho2.html (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js new file mode 100644 index 0000000..7a40144 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -0,0 +1,60 @@ +MX.Grid = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Grid" + + var ops = this.ops = defaults(ops, { + x: 0, + y: 0, + z: 0, + space: 20, + cells: 20, + }) + + ops.side = ops.space * ops.cells + + var ctx, canvas = document.createElement("canvas") + + this.el = canvas + this.width = this.height = canvas.width = canvas.height = ops.side + 4 + + ctx = canvas.getContext('2d') + + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = PI/2 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("mx-grid") + + this.draw(ctx) + }, + + draw: function(ctx){ + ctx = ctx || this.ctx + + var cells = this.ops.cells, + space = this.ops.space, + side = this.ops.side + + ctx.strokeStyle = "#444" + ctx.lineWidth = 1 + ctx.beginPath() + ctx.translate(1,1) + for (var i = 0; i <= cells; i++) { + ctx.moveTo(i*space, 0) + ctx.lineTo(i*space, side) + ctx.moveTo(0, i*space) + ctx.lineTo(side, i*space) + } + ctx.closePath() + ctx.stroke() + }, + +}) + + diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js new file mode 100644 index 0000000..adff4d2 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,65 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + // compare to initial point + var p = new vec2( cursor.x.a, cursor.y.a ) + if (placing) { + if (points.length > 2 && points[0].distanceTo( p ) < 10/map.zoom) { + points.push( points[0].clone() ) + placing = false + add_mx_polyline(points) + } + else { + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + }, + move: function(e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + last_point = new vec2( cursor.x.a, cursor.y.a ) + if (placing && points.length > 1 && points[0].distanceTo( last_point ) < 10/map.zoom) { + document.body.style.cursor = "pointer" + last_point.assign(points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b =last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + }, + drag: function(e, cursor){ + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + }, + up: function(e, cursor, new_cursor){ + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 0d26582..dd60a61 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -82,7 +82,7 @@ Scenery.move = function(base){ base.mx.z = position.a + delta.a * sin(base.wall.rotationY) + dimension.a / 2 break } - console.log( sin(base.wall.rotationY), cos(base.wall.rotationY) ) + if (editor.permissions.resize) { Scenery.resize.move_dots() } @@ -105,7 +105,6 @@ Scenery.move = function(base){ dragging = moved = false oldState = null document.body.classList.remove("dragging") - } function switch_wall (e, target, cursor){ diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html new file mode 100644 index 0000000..d554a60 --- /dev/null +++ b/public/assets/test/ortho2.html @@ -0,0 +1,200 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 744b4f00e9c8a7ef8a75cc8508bf10c0da8de9cc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 30 Mar 2015 21:27:07 -0400 Subject: plotting points on an image of an art gallery --- public/assets/javascripts/mx/primitives/mx.grid.js | 12 ++++++++++- .../assets/javascripts/mx/primitives/mx.image.js | 24 ++++++++++++++++++++- public/assets/test/ortho2.html | 25 +++++++++++++++------- 3 files changed, 51 insertions(+), 10 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.grid.js b/public/assets/javascripts/mx/primitives/mx.grid.js index 7a40144..a765c89 100644 --- a/public/assets/javascripts/mx/primitives/mx.grid.js +++ b/public/assets/javascripts/mx/primitives/mx.grid.js @@ -34,8 +34,13 @@ MX.Grid = MX.Object3D.extend({ this.draw(ctx) }, - draw: function(ctx){ + draw: function(ctx, recenter){ ctx = ctx || this.ctx + + if (recenter) { + ctx.save() + ctx.translate( -grid.width/2, -grid.height/2 ) + } var cells = this.ops.cells, space = this.ops.space, @@ -53,6 +58,11 @@ MX.Grid = MX.Object3D.extend({ } ctx.closePath() ctx.stroke() + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index b8557bf..ca79065 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,6 +1,5 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { - this.type = "Image" this.media = ops.media this.width = 0 @@ -41,8 +40,31 @@ MX.Image = MX.Object3D.extend({ layer.el.classList.add('image') layer.dirty = true layer.update() + layer.ops.onload } image.src = ops.src; + + if (ops.keepImage) { + this.image = image + } + }, + + draw: function(ctx, recenter){ + if (recenter) { + ctx.save() + ctx.scale(-1, 1) + ctx.translate( -this.width/2 * this.scale, -this.height/2 * this.scale ) + } + + ctx.drawImage(this.image, + 0, 0, this.image.naturalWidth, this.image.naturalHeight, + 0, 0, this.image.width * this.scale, this.image.height * this.scale + ) + + if (recenter) { + ctx.restore() + } + }, }) diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index d554a60..733c90c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -34,6 +34,7 @@ body { + @@ -53,7 +54,7 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, - zoom: 0, + zoom: -2, }) var placing = false @@ -127,9 +128,11 @@ function add_mx_point (p, i) { z: p.b, width: 20, height: 20, + rotationX: PI/2, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" + mx.el.style.borderRadius = "50%" scene.add(mx) return mx } @@ -143,14 +146,22 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight - grid = new MX.Grid() - scene.add(grid) +// grid = new MX.Grid() +// scene.add(grid) + floorplan = new MX.Image({ + src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + }) + scene.add(floorplan) scene.update() controls = new MX.OrbitCamera({ el: scene.el, - radius: 1000, + radius: 3000, + radiusRange: [ 10, 10000 ], rotationX: PI/4, rotationY: PI/2, }) @@ -168,10 +179,8 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() - map.draw.ctx.save() - map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) - grid.draw(map.draw.ctx, 20, 20) - map.draw.ctx.restore() +// grid.draw(map.draw.ctx, true) + floorplan.draw(map.draw.ctx, true) map.draw.coords() -- cgit v1.2.3-70-g09d2 From d88706298a3cd2fa8830e40b0a3127a0065d4e3c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 17:19:01 -0400 Subject: dpr --- public/assets/javascripts/mx/primitives/mx.image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index ca79065..64de4b2 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -58,7 +58,7 @@ MX.Image = MX.Object3D.extend({ ctx.drawImage(this.image, 0, 0, this.image.naturalWidth, this.image.naturalHeight, - 0, 0, this.image.width * this.scale, this.image.height * this.scale + 0, 0, this.image.width * this.scale * devicePixelRatio, this.image.height * this.scale * devicePixelRatio ) if (recenter) { -- cgit v1.2.3-70-g09d2 From 498069dec6ac9c1febf2da26b3d3f53f8bd1e1ef Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 29 Apr 2015 17:22:25 -0400 Subject: playAll/pauseAll/rewindAll --- public/assets/javascripts/mx/primitives/mx.vimeo.js | 2 +- .../javascripts/rectangles/engine/scenery/_scenery.js | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index ccd0a13..e1a3b84 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -99,7 +99,7 @@ MX.Vimeo = MX.Object3D.extend({ return } - if (! this.started || n === 0) { + if (! this.started) { return } diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 18d665f..e9be663 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -114,6 +114,22 @@ var Scenery = new function(){ return added } + base.rewindAll = function(){ + base.forEach(function(scenery){ + if (scenery.type == "video") scenery.seek(0) + }) + } + base.playAll = function(){ + base.forEach(function(scenery){ + if (scenery.type == "video") scenery.play() + }) + } + base.pauseAll = function(){ + base.forEach(function(scenery){ + if (scenery.type == "video") scenery.pause() + }) + } + return base } -- cgit v1.2.3-70-g09d2 From 94ba321f96638906e41eda7abf371066011c8508 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 29 Apr 2015 18:46:21 -0400 Subject: misc edits --- public/assets/javascripts/mx/extensions/mx.movements.js | 2 +- public/assets/javascripts/mx/primitives/mx.video.js | 3 +++ public/assets/javascripts/mx/primitives/mx.vimeo.js | 16 ++++++++++++---- public/assets/javascripts/mx/primitives/mx.youtube.js | 3 +++ .../javascripts/rectangles/engine/scenery/_scenery.js | 17 +++++++++++++++-- .../javascripts/rectangles/engine/scenery/sound.js | 2 +- .../rectangles/engine/scenery/types/video.js | 7 ++++++- public/assets/javascripts/ui/reader/ReaderView.js | 2 ++ 8 files changed, 43 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 931caac..fa59908 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -20,7 +20,7 @@ MX.Movements = function (cam) { rotationX_max = PI/6 var v = 12, - vr = Math.PI * 0.012, + vr = Math.PI * 0.018, jumpV = 23, vx = vy = vz = 0, creepFactor = 0.3 diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 43c392a..53ccf2e 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -21,6 +21,7 @@ MX.Video = MX.Object3D.extend({ this.el.classList.add("video") this.el.classList.add("mx-scenery") this.paused = !! this.media.autoplay + this.playing = false this.muted = app.muted || !! this.media.mute }, @@ -60,11 +61,13 @@ MX.Video = MX.Object3D.extend({ play: function(){ this.paused = false + this.playing = true this.player.play() }, pause: function(){ this.paused = true + this.playing = false this.player.pause() }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index e1a3b84..af138ae 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -20,6 +20,7 @@ MX.Vimeo = MX.Object3D.extend({ this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") this.el.classList.add("mx-scenery") + this.playing = false this.paused = !! this.media.autoplay this.muted = app.muted || !! this.media.mute this.started = false @@ -145,19 +146,26 @@ MX.Vimeo = MX.Object3D.extend({ if (this.paused) { this.pause() } + else { + this.playing = true + } }, onPause: function(){ if (! this.paused) { this.play() } + else { + this.playing = false + } }, finished: function(){ -// if (this.media.loop) { -// this.seek(0) -// this.play() -// } + console.log("vimeo finished") + if (this.media.loop) { + this.seek(0) + this.play() + } // else if (this.bound) { if (! this.media.loop && this.bound) { $(".playButton").removeClass('playing') diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index e4e73d6..8cd9f59 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -21,6 +21,7 @@ MX.Youtube = MX.Object3D.extend({ this.el.classList.add("video") this.el.classList.add("mx-scenery") this.paused = !! this.media.autoplay + this.playing = false this.muted = app.muted || !! this.media.mute }, @@ -143,11 +144,13 @@ MX.Youtube = MX.Object3D.extend({ play: function(){ this.paused = false + this.playing = true this.player.playVideo() }, pause: function(){ this.paused = true + this.playing = false this.player.pauseVideo() }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index e9be663..6203c20 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -121,7 +121,10 @@ var Scenery = new function(){ } base.playAll = function(){ base.forEach(function(scenery){ - if (scenery.type == "video") scenery.play() + if (scenery.type == "video") { + scenery.unmute() + scenery.play() + } }) } base.pauseAll = function(){ @@ -129,7 +132,17 @@ var Scenery = new function(){ if (scenery.type == "video") scenery.pause() }) } - + base.muteAll = function(){ + base.forEach(function(scenery){ + if (scenery.type == "video") scenery.mx.mute() + }) + } + base.unmuteAll = function(){ + base.forEach(function(scenery){ + if (scenery.type == "video") scenery.mx.unmute() + }) + } + return base } diff --git a/public/assets/javascripts/rectangles/engine/scenery/sound.js b/public/assets/javascripts/rectangles/engine/scenery/sound.js index 37bdee0..d63d8c4 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/sound.js +++ b/public/assets/javascripts/rectangles/engine/scenery/sound.js @@ -5,7 +5,7 @@ Scenery.sound.init = function(){ app.tube.on("move", Scenery.sound.move) } Scenery.sound.move = function(){ - var vals = Scenery.map(function(scenery){ + Scenery.forEach(function(scenery){ if ((scenery.type == "video" || scenery.type == "audio") && ! scenery.muted()) { var distance = dist(cam.x, cam.z, scenery.mx.x, scenery.mx.z) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index fb1a868..163e19e 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -38,7 +38,8 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ backface: false, }) scene.add(this.mx) - this.mx.load() + + this.mx.load() }, play: function(){ @@ -90,6 +91,10 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ } }, + unmute: function(){ + this.mx.unmute() + }, + setVolume: function(n){ this.mx.setVolume(n) }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 55d2520..1ba97cf 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -94,6 +94,8 @@ var ReaderView = View.extend({ // disable until we start using spinning again // this.listen() + + app.tube("site-ready") }, listen: function(){ -- cgit v1.2.3-70-g09d2 From 44642b48203b3ee2fa9e281f31ed9fed3f60ee79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 21 Jul 2015 13:23:22 -0400 Subject: find closest segment --- Gruntfile.js | 8 +- .../assets/javascripts/mx/primitives/mx.point.js | 17 + .../javascripts/mx/primitives/mx.polyline.js | 48 +++ .../rectangles/engine/map/tools/_base.js | 11 + .../rectangles/engine/map/tools/arrow.js | 46 +++ .../rectangles/engine/map/tools/ortho.js | 115 +++++++ .../rectangles/engine/map/tools/polyline.js | 69 ++++ .../rectangles/engine/map/tools/position.js | 17 + .../javascripts/rectangles/engine/map/ui/editor.js | 284 ++++++++++++++++ .../rectangles/engine/map/ui/minimap.js | 81 +++++ .../javascripts/rectangles/engine/map/ui/ortho.js | 105 ++++++ .../javascripts/rectangles/engine/map/ui_editor.js | 284 ---------------- .../rectangles/engine/map/ui_minimap.js | 81 ----- .../javascripts/rectangles/engine/map/ui_ortho.js | 105 ------ public/assets/test/ortho3.html | 362 ++------------------- views/partials/scripts.ejs | 4 +- 16 files changed, 824 insertions(+), 813 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.point.js create mode 100644 public/assets/javascripts/mx/primitives/mx.polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/_base.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/arrow.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/ortho.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/position.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/editor.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/minimap.js create mode 100644 public/assets/javascripts/rectangles/engine/map/ui/ortho.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_editor.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_minimap.js delete mode 100644 public/assets/javascripts/rectangles/engine/map/ui_ortho.js (limited to 'public/assets/javascripts/mx/primitives') diff --git a/Gruntfile.js b/Gruntfile.js index a0f4d83..233c7ff 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -85,8 +85,8 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", "public/assets/javascripts/rectangles/engine/map/_map.js", - "public/assets/javascripts/rectangles/engine/map/ui_editor.js", - "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", + "public/assets/javascripts/rectangles/engine/map/ui/editor.js", + "public/assets/javascripts/rectangles/engine/map/ui/minimap.js", "public/assets/javascripts/rectangles/engine/map/draw.js", "public/assets/javascripts/ui/lib/View.js", @@ -228,8 +228,8 @@ module.exports = function(grunt) { "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", "public/assets/javascripts/rectangles/engine/map/_map.js", - "public/assets/javascripts/rectangles/engine/map/ui_editor.js", - "public/assets/javascripts/rectangles/engine/map/ui_minimap.js", + "public/assets/javascripts/rectangles/engine/map/ui/editor.js", + "public/assets/javascripts/rectangles/engine/map/ui/minimap.js", "public/assets/javascripts/rectangles/engine/map/draw.js", "public/assets/javascripts/ui/lib/View.js", diff --git a/public/assets/javascripts/mx/primitives/mx.point.js b/public/assets/javascripts/mx/primitives/mx.point.js new file mode 100644 index 0000000..41a7732 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.point.js @@ -0,0 +1,17 @@ +MX.Point = MX.Object3D.extend({ + init: function(p){ + this.updateChildren = false + this.move({ + x: p.a, + y: 11, + z: p.b, + width: 20, + height: 20, + rotationX: PI/2, + }) + this.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' + this.el.style.backfaceVisibility = "visible" + this.el.style.borderRadius = "50%" + scene.add(this) + } +}) diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js new file mode 100644 index 0000000..555b3c6 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -0,0 +1,48 @@ +MX.Polyline = MX.Object3D.extend({ + init: function(polyline){ + this.faces = [] + this.points = polyline.points + for (var i = 1; i < this.points.length; i++) { + var mx = new MX.Object3D() + var head = this.points[i-1] + var tail = this.points[i] + this.move_face(mx, head, tail) + this.faces.push(mx) + scene.add(mx) + } + }, + + rebuild: function(){ + for (var i = 1; i < this.points.length; i++) { + var mx = this.faces[i-1] + var head = this.points[i-1] + var tail = this.points[i] + this.move_face(mx, head, tail) + } + }, + + move_face: function (mx, head, tail){ + var mid_x = (head.a + tail.a) + var mid_z = (head.b + tail.b) + var len = head.distanceTo( tail ) + var angle = atan2( head.b - tail.b, head.a - tail.a ) + mx.move({ + x: mid_x / 2, + y: wall_height/2 + 1, + z: mid_z / 2, + width: ceil(len), + height: wall_height, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + }, + + destroy: function(){ + this.faces.forEach(function(mx){ + scene.remove(mx) + }) + this.faces = null + this.points = null + }, +}) diff --git a/public/assets/javascripts/rectangles/engine/map/tools/_base.js b/public/assets/javascripts/rectangles/engine/map/tools/_base.js new file mode 100644 index 0000000..17b247d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/_base.js @@ -0,0 +1,11 @@ +var MapTool = Fiber.extend(function(base){ + var exports = { + recenterCursor: true, + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + cancel: function(){}, + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js new file mode 100644 index 0000000..2a73954 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -0,0 +1,46 @@ +var ArrowTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null, original_point = null, selected_shape = null + + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + selected_shape = p.shape + selected_point = p.point + original_point = selected_point.clone() + } + else { + map.ui.set_drag_tool("position") + } + } + + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + document.body.style.cursor = "pointer" + last_point.assign(p.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + + exports.drag = function(e, cursor){ + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + + exports.up = function(e, cursor){ + selected_point = selected_shape = original_point = null + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js new file mode 100644 index 0000000..be3d707 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -0,0 +1,115 @@ +var OrthoPolylineTool = MapTool.extend(function (base) { + // this will work like normal polyline except all walls will be orthogonal + + var prev_point, horizontal = false, first_edge_is_horizontal = false + + var exports = {} + exports.down = function(e, cursor){ + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + else { + map.ui.tools.position.rightclick(e, cursor) + } + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.lastPoint().eq(p)) { + return + } + else if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + prev_point = p + horizontal = ! horizontal + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + first_point = prev_point = p + horizontal = false + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing) { + if (line.points.length == 1) { + var x = abs(prev_point.a - last_point.a) + var y = abs(prev_point.b - last_point.b) + if (x > y) { + last_point.b = prev_point.b + first_edge_is_horizontal = horizontal = true + } + else { + last_point.a = prev_point.a + first_edge_is_horizontal = horizontal = false + } + } + else { + if (horizontal) { + last_point.b = prev_point.b + } + else { + last_point.a = prev_point.a + } + if (horizontal == first_edge_is_horizontal) { + // check if this point is within N pixels of the normal + // and lock it into place if so + if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) { + last_point.a = first_point.a + } + else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) { + last_point.b = first_point.b + } + } + } + + if (line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(first_point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + first_point = null + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js new file mode 100644 index 0000000..559aea8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -0,0 +1,69 @@ +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + map.ui.tools.position.rightclick(e, cursor) + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing && line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(line.points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js new file mode 100644 index 0000000..a994f5a --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js @@ -0,0 +1,17 @@ +var PositionTool = MapTool.extend(function(base){ + var exports = { + recenterCursor: false, + drag: function(e, cursor){ + map.center.a = -cursor.x.magnitude() + map.center.b = cursor.y.magnitude() + }, + rightclick: function(e, cursor){ + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + } + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js new file mode 100644 index 0000000..7308344 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js @@ -0,0 +1,284 @@ + +Map.UI = Map.UI || {} +Map.UI.Editor = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: down, + move: move, + drag: drag, + up: up, + rightclick: rightclick, + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + base.permissions = new Permissions({ + create: true, + move: true, + resize: true, + destroy: false, + }) + + base.blur = function(){ + Rooms.forEach(function(r){ + return r.focused = false + }) + app.tube("builder-pick-nothing") + } + + // + + function down (e, cursor){ + var room + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + if (e.ctrlKey || e.which === 3) { + if (Rooms.regions.length == 0) return + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + + var intersects = Rooms.filter(function(r){ + return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (intersects.length && (base.permissions.destroy || e.altKey)) { + base.mouse.down = false + + room = intersects[0] + + UndoStack.push({ + type: "destroy-room", + undo: room.copy(), + redo: { id: room.id }, + }) + + Rooms.remove(room) + app.tube("builder-destroy-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + return + } + else if (intersects.length) { + base.dragging = intersects[0] + base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + base.dragging.rect.translation.sides = base.resizing + app.tube("builder-pick-room", intersects[0]) + } + else if (base.permissions.create) { + base.creating = true + } + + if (e.shiftKey && base.dragging) { + base.dragging.rect.quantize(10/map.zoom) + } + } + + function move (e, cursor) { + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + var intersects = Rooms.filter(function(r){ + return r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (base.permissions.destroy) { + map.el.className = "destroy" + } + else if (intersects.length) { + var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) + switch (edges) { + case FRONT_LEFT: + case BACK_RIGHT: + map.el.className = "nesw-resize" + break + + case FRONT_RIGHT: + case BACK_LEFT: + map.el.className = "nwse-resize" + break + + case FRONT: + case BACK: + map.el.className = "ns-resize" + break + + case LEFT: + case RIGHT: + map.el.className = "ew-resize" + break + + default: + map.el.className = "move" + break + } + } + else { + map.el.className = "" + } + } + + function drag (e, cursor) { + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + + if (base.resizing) { + var x_length = base.dragging.rect.x.length(), + y_length = base.dragging.rect.y.length() + + if (base.resizing & LEFT) { + base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min ) + } + if (base.resizing & RIGHT) { + base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length ) + } + if (base.resizing & FRONT) { + base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min ) + } + if (base.resizing & BACK) { + base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length ) + } + } + else if (base.dragging) { + base.dragging.rect.translation.a = cursor.x.magnitude() + base.dragging.rect.translation.b = cursor.y.magnitude() + } + } + + function up (e, cursor, new_cursor) { + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + if (base.creating) { + if (cursor.height() > side_min && cursor.width() > side_min) { + cursor.x.abs().quantize(1) + cursor.y.abs().quantize(1) + var room = Rooms.add_with_rect( cursor ) + + Rooms.rebuild() + + UndoStack.push({ + type: "create-room", + undo: { id: room.id }, + redo: room.copy() + }) + + Rooms.rebuild() + app.tube("builder-pick-room", room) + + // TODO: watch individual scenery object here + Minotaur.watch( app.controller.settings ) + } + } + if (base.resizing || base.dragging) { + var oldState = base.dragging.copy() + + if (base.resizing) { + base.dragging.rect.resize() + } + else if (base.dragging) { + base.dragging.rect.translate() + } + + UndoStack.push({ + type: "update-room", + undo: oldState, + redo: base.dragging.copy() + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + } + + var intersects = Rooms.filter(function(r){ + return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) + }) + if (! intersects.length) { + app.tube("builder-pick-nothing") + } + + base.creating = base.dragging = base.resizing = false + } + + var wheelState, wheelTimeout + + function mousewheel (e, deltaY, deltaX){ + var cursor = base.mouse.cursor + + var intersects = Rooms.filter(function(r){ + return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) + }) + + if (intersects.length && window.heightIsGlobal) { + var rooms = Rooms.values() + wheelState = wheelState || rooms[0].height + var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) + rooms.forEach(function(room){ + room.height = height + }) + + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-rooms-height", + undo: wheelState, + redo: height + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else if (intersects.length) { + wheelState = wheelState || intersects[0].copy() + + intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) + app.tube("builder-pick-room", intersects[0]) + + clearTimeout(wheelTimeout) + wheelTimeout = setTimeout(function(){ + UndoStack.push({ + type: "update-room", + undo: wheelState, + redo: intersects[0].copy() + }) + Rooms.rebuild() + + // TODO: watch individual scenery object here + Minotaur.watch( app.router.editorView.settings ) + + wheelState = null + }, 250) + } + else { + map.set_zoom(map.zoom_exponent + deltaY/20) + } + } + + function rightclick (e){ + } + +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui/minimap.js b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js new file mode 100644 index 0000000..0fdd336 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/minimap.js @@ -0,0 +1,81 @@ + +Map.UI = Map.UI || {} + +Map.UI.Minimap = function(map){ + + var base = this + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: down, + move: move, + drag: drag, + up: up, + rightclick: rightclick, + }) + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + var x, z + + // + + function down (e, cursor){ + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + x = scene.camera.x + z = scene.camera.z + + if (e.ctrlKey || e.which === 3) { + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + console.log(map.center+"") + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + base.mouse.down = false + e.preventDefault() + e.stopPropagation() + return + } + } + + function move (e, cursor) { + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + } + + function drag (e, cursor) { + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b + + scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16 + scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16 + Rooms.mover.room = null + + if (base.dragging) { + base.dragging.rect.translation.a = cursor.x.magnitude() + base.dragging.rect.translation.b = cursor.y.magnitude() + } + } + + function up (e, cursor, new_cursor) { + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) + + base.dragging = false + } + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } + + function rightclick (e){ + } +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui/ortho.js b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js new file mode 100644 index 0000000..52f7339 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/ui/ortho.js @@ -0,0 +1,105 @@ +Map.UI = Map.UI || {} +Map.UI.Ortho = function(map){ + + var base = this + var last_event = null + + base.creating = base.dragging = base.resizing = false + + base.mouse = new mouse({ + el: map.el, + down: function(e, cursor){ + last_event = e + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + base.tools[currentTool].down(e, cursor) + } + else { + base.tools[currentTool].down(e, cursor) + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + } + }, + move: function(e, cursor){ + last_event = e + cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + base.tools[currentTool].move(e, cursor) + } + else { + base.tools[currentTool].move(e, cursor) + cursor.x.add(map.center.a) + cursor.y.sub(map.center.b) + } + }, + drag: function(e, cursor){ + last_event = e + cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom + if (tool.recenterCursor) { + cursor.x.b += map.center.a + cursor.y.b -= map.center.b + base.tools[currentTool].drag(e, cursor) + } + else { + base.tools[currentTool].drag(e, cursor) + cursor.x.b += map.center.a + cursor.y.b -= map.center.b + } + }, + up: function(e, cursor, new_cursor){ + last_event = e + new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) + new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) + if (tool.recenterCursor) { + new_cursor.x.add(map.center.a) + new_cursor.y.sub(map.center.b) + base.tools[currentTool].up(e, cursor, new_cursor) + } + else { + base.tools[currentTool].up(e, cursor, new_cursor) + new_cursor.x.add(map.center.a) + new_cursor.y.sub(map.center.b) + } + if (nextTool) { + console.log('found nextTool') + base.set_tool(nextTool) + nextTool = null + } + } + }) + + var currentTool = "polyline", nextTool, tool + base.add_tool = function(name, tool){ + base.tools[name] = tool + } + base.set_tool = function(s){ + console.log("set tool to", s) + base.tools[currentTool].cancel() + currentTool = s + tool = base.tools[currentTool] + } + base.set_drag_tool = function(s){ + console.log('set drag tool to', s) + nextTool = currentTool + currentTool = s + tool = base.tools[currentTool] + base.tools[currentTool].down(last_event, base.mouse.cursor) + } + base.tools = {} + + base.wheel = new wheel({ + el: map.el, + update: mousewheel, + }) + + function mousewheel (e, deltaY, deltaX){ + map.set_zoom(map.zoom_exponent - deltaY/20) + } +} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js deleted file mode 100644 index 7308344..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js +++ /dev/null @@ -1,284 +0,0 @@ - -Map.UI = Map.UI || {} -Map.UI.Editor = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: down, - move: move, - drag: drag, - up: up, - rightclick: rightclick, - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - base.permissions = new Permissions({ - create: true, - move: true, - resize: true, - destroy: false, - }) - - base.blur = function(){ - Rooms.forEach(function(r){ - return r.focused = false - }) - app.tube("builder-pick-nothing") - } - - // - - function down (e, cursor){ - var room - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - if (e.ctrlKey || e.which === 3) { - if (Rooms.regions.length == 0) return - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length && (base.permissions.destroy || e.altKey)) { - base.mouse.down = false - - room = intersects[0] - - UndoStack.push({ - type: "destroy-room", - undo: room.copy(), - redo: { id: room.id }, - }) - - Rooms.remove(room) - app.tube("builder-destroy-room", room) - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - return - } - else if (intersects.length) { - base.dragging = intersects[0] - base.resizing = base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) - base.dragging.rect.translation.sides = base.resizing - app.tube("builder-pick-room", intersects[0]) - } - else if (base.permissions.create) { - base.creating = true - } - - if (e.shiftKey && base.dragging) { - base.dragging.rect.quantize(10/map.zoom) - } - } - - function move (e, cursor) { - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - var intersects = Rooms.filter(function(r){ - return r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (base.permissions.destroy) { - map.el.className = "destroy" - } - else if (intersects.length) { - var edges = intersects[0].rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom) - switch (edges) { - case FRONT_LEFT: - case BACK_RIGHT: - map.el.className = "nesw-resize" - break - - case FRONT_RIGHT: - case BACK_LEFT: - map.el.className = "nwse-resize" - break - - case FRONT: - case BACK: - map.el.className = "ns-resize" - break - - case LEFT: - case RIGHT: - map.el.className = "ew-resize" - break - - default: - map.el.className = "move" - break - } - } - else { - map.el.className = "" - } - } - - function drag (e, cursor) { - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - - if (base.resizing) { - var x_length = base.dragging.rect.x.length(), - y_length = base.dragging.rect.y.length() - - if (base.resizing & LEFT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), x_length - side_max, x_length - side_min ) - } - if (base.resizing & RIGHT) { - base.dragging.rect.translation.a = clamp( cursor.x.magnitude(), side_min - x_length, side_max - x_length ) - } - if (base.resizing & FRONT) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), y_length - side_max, y_length - side_min ) - } - if (base.resizing & BACK) { - base.dragging.rect.translation.b = clamp( cursor.y.magnitude(), side_min - y_length, side_max - y_length ) - } - } - else if (base.dragging) { - base.dragging.rect.translation.a = cursor.x.magnitude() - base.dragging.rect.translation.b = cursor.y.magnitude() - } - } - - function up (e, cursor, new_cursor) { - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - if (base.creating) { - if (cursor.height() > side_min && cursor.width() > side_min) { - cursor.x.abs().quantize(1) - cursor.y.abs().quantize(1) - var room = Rooms.add_with_rect( cursor ) - - Rooms.rebuild() - - UndoStack.push({ - type: "create-room", - undo: { id: room.id }, - redo: room.copy() - }) - - Rooms.rebuild() - app.tube("builder-pick-room", room) - - // TODO: watch individual scenery object here - Minotaur.watch( app.controller.settings ) - } - } - if (base.resizing || base.dragging) { - var oldState = base.dragging.copy() - - if (base.resizing) { - base.dragging.rect.resize() - } - else if (base.dragging) { - base.dragging.rect.translate() - } - - UndoStack.push({ - type: "update-room", - undo: oldState, - redo: base.dragging.copy() - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - } - - var intersects = Rooms.filter(function(r){ - return r.focused = r.rect.contains(cursor.x.a, cursor.y.a) - }) - if (! intersects.length) { - app.tube("builder-pick-nothing") - } - - base.creating = base.dragging = base.resizing = false - } - - var wheelState, wheelTimeout - - function mousewheel (e, deltaY, deltaX){ - var cursor = base.mouse.cursor - - var intersects = Rooms.filter(function(r){ - return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a) - }) - - if (intersects.length && window.heightIsGlobal) { - var rooms = Rooms.values() - wheelState = wheelState || rooms[0].height - var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max ) - rooms.forEach(function(room){ - room.height = height - }) - - app.tube("builder-pick-room", intersects[0]) - - clearTimeout(wheelTimeout) - wheelTimeout = setTimeout(function(){ - UndoStack.push({ - type: "update-rooms-height", - undo: wheelState, - redo: height - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - - wheelState = null - }, 250) - } - else if (intersects.length) { - wheelState = wheelState || intersects[0].copy() - - intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max ) - app.tube("builder-pick-room", intersects[0]) - - clearTimeout(wheelTimeout) - wheelTimeout = setTimeout(function(){ - UndoStack.push({ - type: "update-room", - undo: wheelState, - redo: intersects[0].copy() - }) - Rooms.rebuild() - - // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) - - wheelState = null - }, 250) - } - else { - map.set_zoom(map.zoom_exponent + deltaY/20) - } - } - - function rightclick (e){ - } - -} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js deleted file mode 100644 index 0fdd336..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js +++ /dev/null @@ -1,81 +0,0 @@ - -Map.UI = Map.UI || {} - -Map.UI.Minimap = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: down, - move: move, - drag: drag, - up: up, - rightclick: rightclick, - }) - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - var x, z - - // - - function down (e, cursor){ - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - x = scene.camera.x - z = scene.camera.z - - if (e.ctrlKey || e.which === 3) { - cursor.quantize(1/map.zoom) - map.center.a = cursor.x.a - map.center.b = -cursor.y.a - console.log(map.center+"") - cursor.x.b = cursor.x.a - cursor.y.b = cursor.y.a - base.mouse.down = false - e.preventDefault() - e.stopPropagation() - return - } - } - - function move (e, cursor) { - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - } - - function drag (e, cursor) { - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b - - scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16 - scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16 - Rooms.mover.room = null - - if (base.dragging) { - base.dragging.rect.translation.a = cursor.x.magnitude() - base.dragging.rect.translation.b = cursor.y.magnitude() - } - } - - function up (e, cursor, new_cursor) { - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) - - base.dragging = false - } - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } - - function rightclick (e){ - } -} diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js deleted file mode 100644 index 52f7339..0000000 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ /dev/null @@ -1,105 +0,0 @@ -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - var last_event = null - - base.creating = base.dragging = base.resizing = false - - base.mouse = new mouse({ - el: map.el, - down: function(e, cursor){ - last_event = e - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - base.tools[currentTool].down(e, cursor) - } - else { - base.tools[currentTool].down(e, cursor) - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - } - }, - move: function(e, cursor){ - last_event = e - cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - base.tools[currentTool].move(e, cursor) - } - else { - base.tools[currentTool].move(e, cursor) - cursor.x.add(map.center.a) - cursor.y.sub(map.center.b) - } - }, - drag: function(e, cursor){ - last_event = e - cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom - cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - if (tool.recenterCursor) { - cursor.x.b += map.center.a - cursor.y.b -= map.center.b - base.tools[currentTool].drag(e, cursor) - } - else { - base.tools[currentTool].drag(e, cursor) - cursor.x.b += map.center.a - cursor.y.b -= map.center.b - } - }, - up: function(e, cursor, new_cursor){ - last_event = e - new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom) - new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom) - if (tool.recenterCursor) { - new_cursor.x.add(map.center.a) - new_cursor.y.sub(map.center.b) - base.tools[currentTool].up(e, cursor, new_cursor) - } - else { - base.tools[currentTool].up(e, cursor, new_cursor) - new_cursor.x.add(map.center.a) - new_cursor.y.sub(map.center.b) - } - if (nextTool) { - console.log('found nextTool') - base.set_tool(nextTool) - nextTool = null - } - } - }) - - var currentTool = "polyline", nextTool, tool - base.add_tool = function(name, tool){ - base.tools[name] = tool - } - base.set_tool = function(s){ - console.log("set tool to", s) - base.tools[currentTool].cancel() - currentTool = s - tool = base.tools[currentTool] - } - base.set_drag_tool = function(s){ - console.log('set drag tool to', s) - nextTool = currentTool - currentTool = s - tool = base.tools[currentTool] - base.tools[currentTool].down(last_event, base.mouse.cursor) - } - base.tools = {} - - base.wheel = new wheel({ - el: map.el, - update: mousewheel, - }) - - function mousewheel (e, deltaY, deltaX){ - map.set_zoom(map.zoom_exponent - deltaY/20) - } -} diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index fa7e3c5..7e7e8ec 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -61,6 +61,8 @@ body { + + @@ -68,8 +70,13 @@ body { - + + + + + + - - + + -- cgit v1.2.3-70-g09d2 From 71c3a4a02c7c46533aec836ef30a0d0ffa96399b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 18:20:22 -0400 Subject: layout stuff --- .../javascripts/mx/extensions/mx.movements.js | 6 +- .../assets/javascripts/mx/primitives/mx.image.js | 3 +- .../rectangles/engine/map/tools/ortho.js | 26 +- .../rectangles/engine/map/tools/polyline.js | 24 +- .../rectangles/engine/shapes/shapelist.js | 1 + public/assets/javascripts/ui/lib/Toolbar.js | 22 ++ public/assets/javascripts/ui/site/StaffView.js | 26 +- public/assets/test/ortho3.html | 38 +-- public/assets/test/ortho4.html | 261 +++++++++++++++++++++ server/lib/middleware.js | 2 +- server/lib/schemas/Media.js | 1 + server/lib/views/staff.js | 3 +- views/staff/_layouts.ejs | 2 +- views/staff/layouts/show.ejs | 4 +- 14 files changed, 352 insertions(+), 67 deletions(-) create mode 100644 public/assets/javascripts/ui/lib/Toolbar.js create mode 100644 public/assets/test/ortho4.html (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index fa59908..9ed8790 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -162,13 +162,13 @@ MX.Movements = function (cam) { case 8: // backspace e.preventDefault() - if (app.controller.sculptureEditor.sculpture) { + if (app.controller.sculptureEditor && app.controller.sculptureEditor.sculpture) { app.controller.sculptureEditor.sculpture.remove() } - else if (app.controller.mediaEditor.scenery) { + else if (app.controller.mediaEditor && app.controller.mediaEditor.scenery) { app.controller.mediaEditor.scenery.remove() } - else if (app.controller.textEditor.scenery) { + else if (app.controller.textEditor && app.controller.textEditor.scenery) { app.controller.textEditor.scenery.remove() } } diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 64de4b2..f9de141 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -17,7 +17,7 @@ MX.Image = MX.Object3D.extend({ this.el.style.backgroundRepeat = 'no-repeat' - this.load(ops) + ops.src && this.load(ops) }, load: function(ops){ @@ -64,7 +64,6 @@ MX.Image = MX.Object3D.extend({ if (recenter) { ctx.restore() } - }, }) diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index be3d707..ef41096 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -12,11 +12,11 @@ var OrthoPolylineTool = MapTool.extend(function (base) { if (map.ui.placing) { // close polyline or cancel map.ui.placing = false - if (line.points.length > 2) { - line.build() + if (shapes.workline.points.length > 2) { + shapes.workline.build() } else { - line.reset() + shapes.workline.reset() } return } @@ -29,24 +29,24 @@ var OrthoPolylineTool = MapTool.extend(function (base) { // compare to initial point var p = last_point.clone() if (map.ui.placing) { - if (line.lastPoint().eq(p)) { + if (shapes.workline.lastPoint().eq(p)) { return } - else if (line.canCloseWith(p)) { - line.close() - line.build() + else if (shapes.workline.canCloseWith(p)) { + shapes.workline.close() + shapes.workline.build() map.ui.placing = false } else { - line.add(p) + shapes.workline.add(p) prev_point = p horizontal = ! horizontal } } else { map.ui.placing = true - line = new Polyline () - line.add(p) + shapes.workline = new Polyline () + shapes.workline.add(p) first_point = prev_point = p horizontal = false } @@ -55,7 +55,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { last_point.a = cursor.x.a last_point.b = cursor.y.a if (map.ui.placing) { - if (line.points.length == 1) { + if (shapes.workline.points.length == 1) { var x = abs(prev_point.a - last_point.a) var y = abs(prev_point.b - last_point.b) if (x > y) { @@ -86,7 +86,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } } - if (line.canCloseWith(last_point)) { + if (shapes.workline.canCloseWith(last_point)) { document.body.style.cursor = "pointer" last_point.assign(first_point) cursor.x.a = cursor.x.b = last_point.a @@ -107,7 +107,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } } exports.cancel = function(){ - if (map.ui.placing) { line.reset() } + if (map.ui.placing) { shapes.workline.reset() } first_point = null map.ui.placing = false } diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 559aea8..1ab86f6 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -9,11 +9,11 @@ var PolylineTool = MapTool.extend(function (base) { if (map.ui.placing) { // close polyline or cancel map.ui.placing = false - if (line.points.length > 2) { - line.build() + if (shapes.workline.points.length > 2) { + shapes.workline.build() } else { - line.reset() + shapes.workline.reset() } return } @@ -24,27 +24,27 @@ var PolylineTool = MapTool.extend(function (base) { // compare to initial point var p = last_point.clone() if (map.ui.placing) { - if (line.canCloseWith(p)) { - line.close() - line.build() + if (shapes.workline.canCloseWith(p)) { + shapes.workline.close() + shapes.workline.build() map.ui.placing = false } else { - line.add(p) + shapes.workline.add(p) } } else { map.ui.placing = true - line = new Polyline () - line.add(p) + shapes.workline = new Polyline () + shapes.workline.add(p) } } exports.move = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - if (map.ui.placing && line.canCloseWith(last_point)) { + if (map.ui.placing && shapes.workline.canCloseWith(last_point)) { document.body.style.cursor = "pointer" - last_point.assign(line.points[0]) + last_point.assign(shapes.workline.points[0]) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b return @@ -62,7 +62,7 @@ var PolylineTool = MapTool.extend(function (base) { } } exports.cancel = function(){ - if (map.ui.placing) { line.reset() } + if (map.ui.placing) { shapes.workline.reset() } map.ui.placing = false } return exports diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 00e1a4e..932ce36 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -2,6 +2,7 @@ var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ this.shapes = [] + this.workline = null } exports.add = function(shape){ this.shapes.push(shape) diff --git a/public/assets/javascripts/ui/lib/Toolbar.js b/public/assets/javascripts/ui/lib/Toolbar.js new file mode 100644 index 0000000..a9ce51c --- /dev/null +++ b/public/assets/javascripts/ui/lib/Toolbar.js @@ -0,0 +1,22 @@ +var Toolbar = Fiber.extend(function(base){ + var exports = {} + exports.init = function(rapper){ + this.rapper = (typeof rapper == "string") ? $(rapper)[0] : rapper + this.tools = {} + this.els = {} + } + exports.add = function(role, fn){ + var self = this + this.tools[role] = fn + this.els[role] = $("[data-role=" + role + "]", self.rapper) + this.els[role].click(function(){ + $(".active", self.rapper).removeClass('active') + $(this).addClass('active') + fn() + }) + } + exports.pick = function(role){ + this.els[role].trigger("click") + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/site/StaffView.js b/public/assets/javascripts/ui/site/StaffView.js index 0398f71..59649e3 100644 --- a/public/assets/javascripts/ui/site/StaffView.js +++ b/public/assets/javascripts/ui/site/StaffView.js @@ -4,11 +4,13 @@ var StaffView = View.extend({ events: { "click #toggle-staff": "toggleStaff", "click #toggle-featured": "toggleFeatured", + "click #toggle-stock": "toggleStock", }, initialize: function() { this.$toggleStaff = $("#toggle-staff") this.$toggleFeatured = $("#toggle-featured") + this.$toggleStock = $("#toggle-stock") this.$mediaEmbed = $("#media-embed") if (this.$toggleStaff.length && this.$toggleStaff.data().isstaff) { this.$toggleStaff.html("Is Staff") @@ -16,6 +18,9 @@ var StaffView = View.extend({ if (this.$toggleFeatured.length && this.$toggleFeatured.data().featured) { this.$toggleFeatured.html("Featured Project") } + if (this.$toggleStock.length && this.$toggleStock.data().stock) { + this.$toggleStock.html("Layout is Stock") + } if (this.$mediaEmbed.length) { var media = this.$mediaEmbed.data() this.$mediaEmbed.html( Parser.tag( media ) ) @@ -67,6 +72,25 @@ var StaffView = View.extend({ $("#isFeaturedProject").html(data.state ? "yes" : "no") }.bind(this) }) - }, + }, + + toggleStock: function(){ + console.log("stock") + var state = ! this.$toggleStock.data().stock + $.ajax({ + type: "put", + dataType: "json", + url: window.location.href + "/stock", + data: { + state: state, + _csrf: $("#_csrf").val(), + }, + success: function(data){ + this.$toggleStock.data("stock", data.state) + this.$toggleStock.html(data.state ? "Stock Layout" : "Make this layout Stock") + $("#isStockLayout").html(data.state ? "yes" : "no") + }.bind(this) + }) + }, }) diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index ef5732c..f41a0ba 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -80,6 +80,7 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@ -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
[[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


- +

-- cgit v1.2.3-70-g09d2 From 554463ca8e8492bfd5f0f496e3a2291bfb495f80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 18:49:29 -0400 Subject: blueprint scaler stuff --- .../assets/javascripts/mx/primitives/mx.image.js | 17 ++- .../javascripts/ui/blueprint/BlueprintScaler.js | 34 +++++- .../javascripts/ui/blueprint/BlueprintUpload.js | 5 +- public/assets/stylesheets/app.css | 89 +++++++++++++++ public/assets/test/ortho4.html | 2 + views/controls/blueprint/editor.ejs | 120 +++++---------------- 6 files changed, 163 insertions(+), 104 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index f9de141..33b1373 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -1,5 +1,7 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { + ops = ops || {} + this.type = "Image" this.media = ops.media this.width = 0 @@ -41,15 +43,20 @@ MX.Image = MX.Object3D.extend({ layer.dirty = true layer.update() layer.ops.onload + + if (ops.keepImage) { + layer.image = image + } } - image.src = ops.src; - - if (ops.keepImage) { - this.image = image - } + + if (ops.src) image.src = ops.src + else if (ops.media) image.src = ops.media.url + else if (ops.url) image.src = ops.url }, draw: function(ctx, recenter){ + if (! this.image) { return } + if (recenter) { ctx.save() ctx.scale(-1, 1) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index e11b61e..a81c89b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -18,7 +18,7 @@ var BlueprintScaler = ModalView.extend({ this.map = map = new Map ({ type: "ortho", el: this.$blueprintMap.get(0), - width: window.innerWidth/2, + width: window.innerWidth, height: window.innerHeight, zoom: -2, zoom_min: -6.2, @@ -27,10 +27,38 @@ var BlueprintScaler = ModalView.extend({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("position", new PositionTool) map.ui.set_tool("position") + + scene = scene || { camera: { x: 0, y: 0, z: 0 } } + + this.floorplan = new MX.Image () + + this.animate() }, - pick: function(){ - + pick: function(media){ + this.floorplan.load({ media: media, keepImage: true }) + }, + + animate: function(t){ + requestAnimationFrame(this.animate.bind(this)) + + var dt = t - this.last_t + this.last_t = t + + if (! t) return + + this.map.update(t) + + this.map.draw.ctx.save() + this.map.draw.translate() + + this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.coords() + + this.map.draw.mouse(this.map.ui.mouse.cursor) + + this.map.draw.ctx.restore() }, changeDimensions: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js index deb1075..498575a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js @@ -36,8 +36,9 @@ var BlueprintUpload = UploadView.extend({ this.loaded = true if (data && data.length) { this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.blueprintScaler.pick(data[0]) } else { this.show() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 0f89242..6507cc1 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -3253,6 +3253,95 @@ a[data-role="forgot-password"] { } +/* blueprint upload box */ + +.blueprintUpload { + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + width: 340px; + position: absolute; + top: 50%; left: 50%; + background: white; + padding: 10px; + border: 1px solid black; + box-shadow: -3px 3px #000; + -webkit-transform: translate3D(0%,-200%,0); + transform: translate3D(0%,-200%,0); + margin-left: -175px; + margin-top: -200px; + opacity: 0; +} +.blueprintUpload.active { + -webkit-transform: translate3D(0,0,0); + transform: translate3D(0,0,0); + opacity: 1; +} +.blueprintUpload .toolButton { + float: none; + width: 108px; + display: inline-block; +} +.blueprintUpload .url { + font-size: 15px; + border: 1px solid #888; + padding: 2px; + font-weight: 300; + position: relative; + top: 3px; + margin-right: 10px; + width: 190px; +} +.blueprintUpload p { + font-weight: 300; + font-size: 13px; +} +.blueprintUpload .blueprints { + display: none; +} +.blueprintUpload .blueprints h5 { + width: 250px; + margin: 10px auto; + padding-top: 9px; +} +.blueprints .blueprint { + border: 2px solid black; + background: white; + padding: 0px; + position: relative; + display: inline-block; +} +.blueprints .blueprint img { + height: 100px; + max-width: 200px; + display: block; + cursor: pointer; +} +.blueprints .blueprint .remove { + box-shadow: -2px 2px #000; + cursor: pointer; + position: absolute; + color: red; + top: 7px; + right: 7px; + width: 20px; height: 20px; + text-align: center; + background: #fff; + border: 1px solid black; +} +.blueprints .blueprint .remove span { + position: relative; + top: -2px; +} +.blueprintUpload .wallpaperUpload .upload-icon { + margin: 0 4px; +} +.uploadNewBlueprint { + color: #333; + border-bottom: 1px solid; + cursor: pointer; +} + + /* KEYBOARD SHORTCUTS */ .keyboard { float: left; width: 50%; margin-top: 50px; } diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 1c1adef..d704e0e 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -160,7 +160,9 @@ map.ui.placing = false $(window).resize(function(){ scene.width = window.innerWidth/2 + scene.height = window.innerHeight map.canvas.width = map.dimensions.a = window.innerWidth/2 + map.canvas.height = map.dimensions.b = window.innerHeight/2 }) var wall_height = 180 diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index aec5e25..308b4c8 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -32,90 +32,20 @@ body { .hud span { color: #888; cursor: pointer; } .hud span.active { color: #000; } -.blueprintUpload { - -webkit-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - width: 340px; - position: absolute; - top: 50%; left: 50%; - background: white; - padding: 10px; - border: 1px solid black; - box-shadow: -3px 3px #000; - -webkit-transform: translate3D(0%,-200%,0); - transform: translate3D(0%,-200%,0); - margin-left: -175px; - margin-top: -200px; - opacity: 0; -} -.blueprintUpload.active { - -webkit-transform: translate3D(0,0,0); - transform: translate3D(0,0,0); - opacity: 1; -} -.blueprintUpload .toolButton { - float: none; - width: 108px; - display: inline-block; -} -.blueprintUpload .url { - font-size: 15px; - border: 1px solid #888; - padding: 2px; - font-weight: 300; - position: relative; - top: 3px; - margin-right: 10px; - width: 190px; -} -.blueprintUpload p { - font-weight: 300; +.blueprintInfo { + bottom: 14px; + left: 10px; + width: 270px; font-size: 13px; + font-weight: 300; + padding: 10px; } -.blueprintUpload .blueprints { - display: none; -} -.blueprintUpload .blueprints h5 { - width: 250px; - margin: 10px auto; - padding-top: 9px; -} -.blueprints .blueprint { - border: 1px solid black; - background: white; - padding: 0px; - position: relative; - display: inline-block; -} -.blueprints .blueprint img { - height: 100px; - max-width: 200px; - display: block; - cursor: pointer; -} -.blueprints .blueprint .remove { - box-shadow: 0 1px 2px #888; - cursor: pointer; - position: absolute; - color: red; - top: 7px; - right: 7px; - width: 20px; height: 20px; - text-align: center; - background: #fff; - border-radius: 50%; -} -.blueprints .blueprint .remove span { - position: relative; - top: -2px; -} -.blueprintUpload .wallpaperUpload .upload-icon { - margin: 0 4px; +.blueprintInfo .setting { + margin-bottom: 20px; } -.uploadNewBlueprint { - color: #333; - border-bottom: 1px solid; - cursor: pointer; +.blueprintInfo .setting.number input[type=text] { + width: 100px; + font-size: 16px; } @@ -139,7 +69,7 @@ body {
- +

Upload your Blueprint

@@ -161,25 +91,27 @@ body {

-
+
Please tell us the scale of your blueprint. - Click both corners of a wall, and then enter how long the wall is. + Click two corners of a wall, and then enter how long the wall is.

- Do you want to upload a blueprint? + You can also upload another blueprint. +

+ +
+ + + +
+
-
- - - - -
-- cgit v1.2.3-70-g09d2 From 3c36de54b57422f34c367934fdf62873b881fa20 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 17 Aug 2015 16:27:40 -0400 Subject: integrate ortho3 stuff into blueprint views --- .../assets/javascripts/mx/primitives/mx.image.js | 14 +- public/assets/javascripts/ui/_router.js | 4 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 148 ++++++++------------- .../javascripts/ui/blueprint/BlueprintScaler.js | 6 +- .../javascripts/ui/blueprint/BlueprintToolbar.js | 69 ++++++++++ .../javascripts/ui/blueprint/BlueprintUpload.js | 128 ------------------ .../javascripts/ui/blueprint/BlueprintUploader.js | 126 ++++++++++++++++++ .../javascripts/ui/blueprint/BlueprintView.js | 30 ++++- public/assets/stylesheets/app.css | 29 ++-- views/blueprint.ejs | 2 +- views/controls/blueprint/editor.ejs | 28 ---- views/controls/blueprint/scaler.ejs | 2 +- views/controls/blueprint/toolbar.ejs | 35 +++++ views/partials/scripts.ejs | 7 +- 14 files changed, 349 insertions(+), 279 deletions(-) create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintToolbar.js delete mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUpload.js create mode 100644 public/assets/javascripts/ui/blueprint/BlueprintUploader.js create mode 100644 views/controls/blueprint/toolbar.ejs (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 33b1373..ce99592 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -48,10 +48,16 @@ MX.Image = MX.Object3D.extend({ layer.image = image } } - - if (ops.src) image.src = ops.src - else if (ops.media) image.src = ops.media.url - else if (ops.url) image.src = ops.url + + if (ops.src) { + image.src = ops.src + } + else if (ops.media) { + image.src = ops.media.url + } + else if (ops.url) { + image.src = ops.url + } }, draw: function(ctx, recenter){ diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 177e86f..e5e46e5 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -92,7 +92,9 @@ var SiteRouter = Router.extend({ }) } - $("body").removeClass("loading") + setTimeout(function(){ + $("body").removeClass("loading") + }, 200) }, layoutEditor: function(e, name){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index c781495..545de7b 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -7,22 +7,6 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ initialize: function(opt){ this.parent = opt.parent - - map = new Map ({ - type: "ortho", - el: document.querySelector("#orthographic"), - width: window.innerWidth/2, - height: window.innerHeight, - zoom: -2, - zoom_min: -6.2, - zoom_max: 1, - }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("polyline", new PolylineTool) - map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) - map.ui.add_tool("eraser", new EraserTool) - map.ui.add_tool("position", new PositionTool) - map.ui.placing = false /* $(window).resize(function(){ @@ -33,36 +17,62 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ }) */ - var PerspectiveToolbar = new Toolbar (".persp-hud") - PerspectiveToolbar.add("orbit-mode", function(){ - controls.toggle(true) - movements.lock() - }) - PerspectiveToolbar.add("keyboard-mode", function(){ - controls.toggle(false) - movements.unlock() - movements.gravity(true) - cam.rotationX = 0 - cam.rotationY = -cam.rotationY - cam.x = 0 - cam.y = viewHeight + 100 - cam.z = 0 - }) + scene = new MX.Scene().addTo("#perspective") + scene.camera.radius = 20 + cam = scene.camera - var OrthographicToolbar = new Toolbar (".ortho-hud") - OrthographicToolbar.add("arrow-mode", function(){ - map.ui.set_tool("arrow") + scene.width = window.innerWidth/2 + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + movements = new MX.Movements(cam, viewHeight) + movements.init() + movements.lock() + + app.on("move", function(pos){ + cam.x = pos.x + cam.y = pos.y + cam.z = pos.z }) - OrthographicToolbar.add("polyline-mode", function(){ - map.ui.set_tool("polyline") + + var floorplan = this.floorplan = new MX.Image({ + backface: true, }) - OrthographicToolbar.add("ortho-polyline-mode", function(){ - map.ui.set_tool("ortho-polyline") + scene.add(this.floorplan) + + // recenter perspective view by rightclicking map + this.floorplan.el.addEventListener("contextmenu", function(e){ + e.preventDefault() + var offset = offsetFromPoint(e, this) + var x = (offset.left - 0.5) * floorplan.width * floorplan.scale + var z = (offset.top - 0.5) * floorplan.height * floorplan.scale + controls.opt.center.x = -x + controls.opt.center.y = 0 + controls.opt.center.z = -z + }, true) + + scene.update() + + controls = new MX.OrbitCamera({ + el: scene.el, + radius: 3000, + radiusRange: [ 10, 10000 ], + rotationX: PI/4, + rotationY: PI/2, }) - OrthographicToolbar.add("eraser-mode", function(){ - map.ui.set_tool("eraser") + controls.init() + }, + + loadFloorplan: function(media){ + console.log(media) + this.floorplan.load({ + media: media, + keepImage: true, + rotationX: -PI/2, + rotationY: PI, + scale: media.scale, }) - OrthographicToolbar.pick("ortho-polyline-mode") + this.startAnimating() }, animate: function(t, dt){ @@ -75,7 +85,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - floorplan.draw(map.draw.ctx, true) + this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -99,57 +109,3 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ }, }) - -function build () { - scene = new MX.Scene().addTo("#perspective") - scene.camera.radius = 20 - - viewHeight = 100 - - scene.width = window.innerWidth/2 - scene.height = window.innerHeight - scene.perspective = window.innerHeight - - cam = scene.camera - movements = new MX.Movements(cam, viewHeight) - movements.init() - movements.lock() - movements.velocity(8) - app.on("move", function(pos){ - cam.x = pos.x - cam.y = pos.y - cam.z = pos.z - }) - - floorplan = new MX.Image({ - src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", - keepImage: true, - rotationX: -PI/2, - rotationY: PI, - }) - scene.add(floorplan) - - // recenter perspective view by rightclicking map - floorplan.el.addEventListener("contextmenu", function(e){ - e.preventDefault() - var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width * floorplan.scale - var z = (offset.top - 0.5) * floorplan.height * floorplan.scale - controls.opt.center.x = -x - controls.opt.center.y = 0 - controls.opt.center.z = -z - }, true) - - scene.update() - - controls = new MX.OrbitCamera({ - el: scene.el, - radius: 3000, - radiusRange: [ 10, 10000 ], - rotationX: PI/4, - rotationY: PI/2, - }) - controls.init() - - animate(0) -} diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 741f4fb..ff26c8e 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -7,7 +7,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", - "click .uploadNewBlueprint": "showBlueprintUpload", + "click .uploadNewBlueprint": "showUploader", }, initialize: function(opt){ @@ -38,8 +38,8 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ this.floorplan = new MX.Image () }, - showBlueprintUpload: function(){ - this.parent.blueprintUpload.show() + showUploader: function(){ + this.parent.uploader.show() }, pick: function(media){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js new file mode 100644 index 0000000..69288f6 --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -0,0 +1,69 @@ +var BlueprintToolbar = View.extend({ + + el: "#blueprintToolbar", + + events: { + "click [data-role=toggle-orbit-mode]": 'toggleOrbitMode', + "click [data-role=arrow-mode]": 'arrowMode', + "click [data-role=polyline-mode]": 'polylineMode', + "click [data-role=ortho-polyline-mode]": 'orthoPolylineMode', + "click [data-role=eraser-mode]": 'eraserMode', + }, + + initialize: function(opt){ + this.parent = opt.parent + + this.$modes = this.$('.mode') + this.$arrowMode = this.$('[data-role=arrow-mode]') + this.$polylineMode = this.$('[data-role=polyline-mode]') + this.$orthoPolylineMode = this.$('[data-role=ortho-polyline-mode]') + this.$eraserMode = this.$('[data-role=eraser-mode]') + + this.orthoPolylineMode() + }, + + orbiting: true, + toggleOrbitMode: function(){ + this.orbiting = ! this.orbiting + if (this.orbiting) { + controls.toggle(true) + movements.lock() + } + else { + controls.toggle(false) + movements.unlock() + movements.gravity(true) + cam.rotationX = 0 + cam.rotationY = -cam.rotationY + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + } + }, + + setActiveMode: function( $el ) { + this.$modes.removeClass('active') + $el.addClass('active') + }, + + arrowMode: function(){ + this.setActiveMode( this.$arrowMode ) + this.parent.map.ui.set_tool("arrow") + }, + + polylineMode: function(){ + this.setActiveMode( this.$polylineMode ) + this.parent.map.ui.set_tool("polyline") + }, + + orthoPolylineMode: function(){ + this.setActiveMode( this.$orthoPolylineMode ) + this.parent.map.ui.set_tool("ortho-polyline") + }, + + eraserMode: function(){ + this.setActiveMode( this.$eraserMode ) + this.parent.map.ui.set_tool("eraser") + }, + +}) \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js b/public/assets/javascripts/ui/blueprint/BlueprintUpload.js deleted file mode 100644 index 498575a..0000000 --- a/public/assets/javascripts/ui/blueprint/BlueprintUpload.js +++ /dev/null @@ -1,128 +0,0 @@ - -var BlueprintUpload = UploadView.extend({ - el: ".blueprintUpload", - - mediaTag: "blueprint", - createAction: "/api/media/new", - uploadAction: "/api/media/upload", - listAction: "/api/media/user", - destroyAction: "/api/media/destroy", - - events: { - "mousedown": 'stopPropagation', - "change .url": "enterUrl", - "keydown .url": "enterSetUrl", - - "click .blueprint": "pick", - "click .remove": "destroy", - }, - - initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) - - this.$url = this.$(".url") - this.$blueprints = this.$(".blueprints") - - this.load() - }, - - loaded: false, - load: function(){ - $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) - }, - - populate: function(data){ - this.loaded = true - if (data && data.length) { - this.$blueprints.show() - data.forEach(this.append.bind(this)) - this.hide() - this.parent.blueprintScaler.pick(data[0]) - } - else { - this.show() - } - }, - - pick: function(e){ - var $el = $(e.currentTarget) - var media = $el.data("media") - this.hide() - this.parent.blueprintScaler.pick(media) - }, - - destroy: function(e){ - e.stopPropagation() - var $el = $(e.currentTarget) - var _id = $el.closest(".blueprint").data("id") - $el.remove() - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(function(){ - }) - }, - - show: function(){ - this.toggle(true) - }, - hide: function(){ - this.toggle(false) - }, - toggle: function (state) { - this.$el.toggleClass("active", state) - }, - - addUrl: function (url){ - Parser.loadImage(url, function(media){ - if (! media) return - media._csrf = $("[name=_csrf]").val() - media.tag = this.mediaTag - - var request = $.ajax({ - type: "post", - url: this.createAction, - data: media, - }) - request.done(this.add.bind(this)) - - }.bind(this)) - }, - enterUrl: function(){ - var url = this.$url.sanitize() - this.addUrl(url) - this.$url.val("") - }, - enterSetUrl: function (e) { - e.stopPropagation() - if (e.keyCode == 13) { - setTimeout(this.enterUrl.bind(this), 100) - } - }, - - add: function(media){ - this.$blueprints.show() - this.append(media) - this.hide() - this.parent.blueprintScaler.pick(media) - }, - - append: function(media){ - var $el = $("") - var img = new Image () - img.src = media.url - var remove = document.createElement("span") - remove.className = "remove" - remove.innerHTML = "x" - - $el.data("id", media._id) - $el.data("media", media) - $el.append(img) - $el.append(remove) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - -}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js new file mode 100644 index 0000000..aeb7d9c --- /dev/null +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -0,0 +1,126 @@ + +var BlueprintUploader = UploadView.extend({ + el: ".blueprintUploader", + + mediaTag: "blueprint", + createAction: "/api/media/new", + uploadAction: "/api/media/upload", + listAction: "/api/media/user", + destroyAction: "/api/media/destroy", + + events: { + "mousedown": 'stopPropagation', + "change .url": "enterUrl", + "keydown .url": "enterSetUrl", + + "click .blueprint": "pick", + "click .remove": "destroy", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + this.$blueprints = this.$(".blueprints") + }, + + loaded: false, + load: function(){ + $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) + }, + + populate: function(data){ + this.loaded = true + if (data && data.length) { + this.$blueprints.show() + data.forEach(this.append.bind(this)) + this.hide() + this.parent.scaler.pick(data[0]) + } + else { + this.show() + } + }, + + pick: function(e){ + var $el = $(e.currentTarget) + var media = $el.data("media") + this.hide() + this.parent.scaler.pick(media) + }, + + destroy: function(e){ + e.stopPropagation() + var $el = $(e.currentTarget) + var _id = $el.closest(".blueprint").data("id") + $el.remove() + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(function(){ + }) + }, + + show: function(){ + this.toggle(true) + }, + hide: function(){ + this.toggle(false) + }, + toggle: function (state) { + this.$el.toggleClass("active", state) + }, + + addUrl: function (url){ + Parser.loadImage(url, function(media){ + if (! media) return + media._csrf = $("[name=_csrf]").val() + media.tag = this.mediaTag + + var request = $.ajax({ + type: "post", + url: this.createAction, + data: media, + }) + request.done(this.add.bind(this)) + + }.bind(this)) + }, + enterUrl: function(){ + var url = this.$url.sanitize() + this.addUrl(url) + this.$url.val("") + }, + enterSetUrl: function (e) { + e.stopPropagation() + if (e.keyCode == 13) { + setTimeout(this.enterUrl.bind(this), 100) + } + }, + + add: function(media){ + this.$blueprints.show() + this.append(media) + this.hide() + this.parent.scaler.pick(media) + }, + + append: function(media){ + var $el = $("") + var img = new Image () + img.src = media.url + var remove = document.createElement("span") + remove.className = "remove" + remove.innerHTML = "x" + + $el.data("id", media._id) + $el.data("media", media) + $el.append(img) + $el.append(remove) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + +}) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 0a06fda..cf627d9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -9,17 +9,20 @@ var BlueprintView = View.extend({ initialize: function(){ // this.info = new BuilderInfo ({ parent: this }) -// this.toolbar = new BuilderToolbar ({ parent: this }) // this.settings = new BuilderSettings ({ parent: this }) // this.colorControl = new ColorControl ({ parent: this }) // this.cursor = new HelpCursor({ parent: this }) - this.blueprintUpload = new BlueprintUpload ({ parent: this }) - this.blueprintScaler = new BlueprintScaler ({ parent: this }) + this.map = this.buildMap() + this.editor = new BlueprintEditor ({ parent: this }) + this.toolbar = new BlueprintToolbar ({ parent: this }) + this.uploader = new BlueprintUploader ({ parent: this }) + this.scaler = new BlueprintScaler ({ parent: this }) }, load: function(name){ if (! name || name == "new") { // this.ready({ isNew: true, _id: "new", name: "" }) + this.uploader.load() return } @@ -28,6 +31,26 @@ var BlueprintView = View.extend({ $.get(this.action + name, this.ready.bind(this)) }, + buildMap: function(){ + // i forget if this has to be global + map = new Map ({ + type: "ortho", + el: document.querySelector("#orthographic"), + width: window.innerWidth/2, + height: window.innerHeight, + zoom: -2, + zoom_min: -6.2, + zoom_max: 1, + }) + map.ui.add_tool("arrow", new ArrowTool) + map.ui.add_tool("polyline", new PolylineTool) + map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) + map.ui.add_tool("eraser", new EraserTool) + map.ui.add_tool("position", new PositionTool) + map.ui.placing = false + return map + }, + ready: function(data){ // this.settings.load(data) // this.info.load(data) @@ -37,6 +60,7 @@ var BlueprintView = View.extend({ }, useFloorplan: function(media){ + this.editor.loadFloorplan(media) }, pickWall: function(wall, pos){ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6507cc1..2fef578 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -53,9 +53,11 @@ body.noOverflow{ overflow:hidden; } -body.loading * { - -webkit-transition: all 0 ease 0 !important; - transition: all 0 ease 0 !important; +body.loading *, +body.loading .animate { + opacity: 0.2; + -webkit-transition: none !important; + transition: none !important; } html, body { @@ -72,7 +74,7 @@ body.pastePaper .wallpaper.active span:hover{ cursor:url(../img/paintbucket.png), auto; } -a{ +a { color:black; text-decoration: none; } @@ -1502,7 +1504,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } cursor:pointer; } -.menu span.inuse { +.menu span.inuse, +.menu span.active { color:white; background:black; cursor:pointer; @@ -3255,7 +3258,7 @@ a[data-role="forgot-password"] { /* blueprint upload box */ -.blueprintUpload { +.blueprintUploader { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: 340px; @@ -3271,17 +3274,17 @@ a[data-role="forgot-password"] { margin-top: -200px; opacity: 0; } -.blueprintUpload.active { +.blueprintUploader.active { -webkit-transform: translate3D(0,0,0); transform: translate3D(0,0,0); opacity: 1; } -.blueprintUpload .toolButton { +.blueprintUploader .toolButton { float: none; width: 108px; display: inline-block; } -.blueprintUpload .url { +.blueprintUploader .url { font-size: 15px; border: 1px solid #888; padding: 2px; @@ -3291,14 +3294,14 @@ a[data-role="forgot-password"] { margin-right: 10px; width: 190px; } -.blueprintUpload p { +.blueprintUploader p { font-weight: 300; font-size: 13px; } -.blueprintUpload .blueprints { +.blueprintUploader .blueprints { display: none; } -.blueprintUpload .blueprints h5 { +.blueprintUploader .blueprints h5 { width: 250px; margin: 10px auto; padding-top: 9px; @@ -3332,7 +3335,7 @@ a[data-role="forgot-password"] { position: relative; top: -2px; } -.blueprintUpload .wallpaperUpload .upload-icon { +.blueprintUploader .wallpaperUpload .upload-icon { margin: 0 4px; } .uploadNewBlueprint { diff --git a/views/blueprint.ejs b/views/blueprint.ejs index 7e13318..e68e106 100644 --- a/views/blueprint.ejs +++ b/views/blueprint.ejs @@ -13,7 +13,7 @@
[[ include controls/builder/info ]] - [[ include controls/builder/toolbar ]] + [[ include controls/blueprint/toolbar ]] [[ include controls/builder/settings ]] [[ include controls/blueprint/editor ]] [[ include controls/blueprint/scaler ]] diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 5334f85..0dbac8e 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -12,21 +12,6 @@ left:50%; top:0px } -.hud { - position: absolute; - top: 0; - left: 0; - padding: 10px; - background: white; -} -.ortho-hud { - left: 50%; - border-left: 1px solid black; -} -#url { width: 300px } -.hud span { color: #888; cursor: pointer; } -.hud span.active { color: #000; } - .blueprintInfo { bottom: 14px; left: 10px; @@ -47,18 +32,5 @@
- -
- - - -
- -
- - - - -
diff --git a/views/controls/blueprint/scaler.ejs b/views/controls/blueprint/scaler.ejs index 972b82a..82fd2b2 100644 --- a/views/controls/blueprint/scaler.ejs +++ b/views/controls/blueprint/scaler.ejs @@ -1,7 +1,7 @@
-
+

Upload your Blueprint

Upload an image which you will trace to make a floor plan. diff --git a/views/controls/blueprint/toolbar.ejs b/views/controls/blueprint/toolbar.ejs new file mode 100644 index 0000000..13e99ec --- /dev/null +++ b/views/controls/blueprint/toolbar.ejs @@ -0,0 +1,35 @@ +

+ diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 2c3d5ac..909309e 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -19,9 +19,12 @@ + + + @@ -29,6 +32,7 @@ + @@ -132,7 +136,8 @@ - + + -- cgit v1.2.3-70-g09d2 From 72afc148b11ac57c991d699c205675b4b0f1cf70 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 19:35:02 -0400 Subject: set wall height --- public/assets/javascripts/defaults.js | 1 + .../javascripts/mx/primitives/mx.polyline.js | 11 +++++++++-- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 2 +- .../javascripts/ui/blueprint/BlueprintInfo.js | 23 ++++++++-------------- .../javascripts/ui/blueprint/BlueprintScaler.js | 4 ++-- .../javascripts/ui/blueprint/BlueprintView.js | 7 ++----- public/assets/test/ortho2.html | 6 +++--- public/assets/test/ortho3.html | 2 +- public/assets/test/ortho4.html | 2 +- views/controls/blueprint/info.ejs | 2 -- 11 files changed, 29 insertions(+), 33 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 413bb13..1e1ac5b 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,6 +1,7 @@ app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, + wallHeight: 397, units: app.units = "ft", footResolution: 36, meterResolution: 100, diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js index 555b3c6..63c0ef8 100644 --- a/public/assets/javascripts/mx/primitives/mx.polyline.js +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -28,16 +28,23 @@ MX.Polyline = MX.Object3D.extend({ var angle = atan2( head.b - tail.b, head.a - tail.a ) mx.move({ x: mid_x / 2, - y: wall_height/2 + 1, + y: wallHeight/2 + 1, z: mid_z / 2, width: ceil(len), - height: wall_height, + height: wallHeight, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' }, + set_height: function(height){ + for (var i = 0; i < this.faces.length; i++) { + this.faces[i].height = height + this.faces[i].y = height / 2 + 1 + } + }, + destroy: function(){ this.faces.forEach(function(mx){ scene.remove(mx) diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index e3d7621..2aee962 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -51,7 +51,7 @@ var Map = function(opt){ case "ortho": base.draw = new Map.Draw (base, { ortho: true }) base.ui = new Map.UI.Ortho (base) - base.sides = base.sides_for_camera + base.sides = base.sides_for_center $(window).resize(base.resize) break diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 72c129a..73f21c0 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -1,5 +1,5 @@ -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var last_point = new vec2 (0,0) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js index ad462ae..6dd6a7d 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintInfo.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintInfo.js @@ -5,15 +5,16 @@ var BlueprintInfo = View.extend({ events: { "mousedown": "stopPropagation", "keydown": 'stopPropagation', + "change [name=height]": 'changeHeight', "keydown [name=height]": 'enterHeight', "change [name=units]": 'changeUnits', "keydown [name=viewHeight]": 'enterViewHeight', "change [name=viewHeight]": 'changeViewHeight', - "click [data-role=destroy-room]": 'destroy', }, initialize: function(opt){ this.parent = opt.parent + this.$height = this.$("[name=height]") this.$units = this.$("[name=units]") this.$viewHeight = this.$("[name=viewHeight]") this.$unitName = this.$(".unitName") @@ -21,8 +22,10 @@ var BlueprintInfo = View.extend({ load: function(data){ this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight ) + this.$height.unitVal( window.wallHeight = data.wallHeight || app.defaults.wallHeight ) this.$units.val( data.units ) this.$unitName.html( data.units ) + this.show() }, toggle: function(state){ @@ -35,17 +38,10 @@ var BlueprintInfo = View.extend({ }, hide: function(){ - this.room = null this.toggle(false) }, - - room: null, - - pick: function(room){ - }, deselect: function(){ - this.room = null this.toggle(true) }, @@ -54,13 +50,10 @@ var BlueprintInfo = View.extend({ }, changeHeight: function(e){ e.stopPropagation() - var height = this.room.height = this.$height.unitVal() - if (window.heightIsGlobal) { - Rooms.forEach(function(room){ - room.height = height - }) - } - Rooms.rebuild() + window.wallHeight = this.$height.unitVal() + shapes.forEach(function(line){ + line.mx.set_height( window.wallHeight ) + }) }, changeUnits: function(){ app.units = this.$units.val() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index 0f2fdcd..5bd2229 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -48,7 +48,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ this.floorplan.load({ media: media, scale: 1, keepImage: true }) if (!! media.units && ! shouldEdit) { - this.parent.useFloorplan(media) + this.parent.ready(media) this.hide() this.stopAnimating() return @@ -149,7 +149,7 @@ var BlueprintScaler = ModalFormView.extend(AnimatedView.prototype).extend({ success: function(){ this.media.scale = this.$dimensions.unitVal() / this.lineLength() this.stopAnimating() - this.parent.useFloorplan(this.media) + this.parent.ready(this.media) this.hide() }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a59f44f..f919cc7 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -54,16 +54,13 @@ var BlueprintView = View.extend({ ready: function(data){ // this.settings.load(data) -// this.info.load(data) + this.info.load(data) + this.editor.loadFloorplan(data) }, hideExtras: function(){ }, - useFloorplan: function(media){ - this.editor.loadFloorplan(media) - }, - pickWall: function(wall, pos){ }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 013c75b..448f029 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -167,7 +167,7 @@ $(window).resize(function(){ map.canvas.width = map.dimensions.a = window.innerWidth/2 }) -var wall_height = 180 +var wallHeight = 180 var placing = false var points, mx_points = [] var shapes = [] @@ -219,10 +219,10 @@ function add_mx_polyline_face(head, tail){ var angle = atan2( head.b - tail.b, head.a - tail.a ) mx.move({ x: mid_x / 2, - y: wall_height/2 + 1, + y: wallHeight/2 + 1, z: mid_z / 2, width: ceil(len), - height: wall_height, + height: wallHeight, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f41a0ba..71e43f1 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -112,7 +112,7 @@ $(window).resize(function(){ map.canvas.width = map.dimensions.a = window.innerWidth/2 }) -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var ctx = map.draw.ctx var last_point = new vec2 (0,0) diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index d704e0e..8db7ead 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -165,7 +165,7 @@ $(window).resize(function(){ map.canvas.height = map.dimensions.b = window.innerHeight/2 }) -var wall_height = 180 +var wallHeight = 180 var shapes = new ShapeList var ctx = map.draw.ctx var last_point = new vec2 (0,0) diff --git a/views/controls/blueprint/info.ejs b/views/controls/blueprint/info.ejs index f994629..9f7d708 100644 --- a/views/controls/blueprint/info.ejs +++ b/views/controls/blueprint/info.ejs @@ -4,8 +4,6 @@
- -
-- cgit v1.2.3-70-g09d2 From a9bee350c2bb468c9abc46321b46f5c5dcbbe10d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 26 Aug 2015 12:28:44 -0400 Subject: grayscale buildings --- public/assets/javascripts/mx/primitives/mx.polyline.js | 6 ++++-- public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.polyline.js b/public/assets/javascripts/mx/primitives/mx.polyline.js index 63c0ef8..e549150 100644 --- a/public/assets/javascripts/mx/primitives/mx.polyline.js +++ b/public/assets/javascripts/mx/primitives/mx.polyline.js @@ -34,8 +34,10 @@ MX.Polyline = MX.Object3D.extend({ height: wallHeight, rotationY: angle }) - var hue = abs(round( angle / PI * 90 + 300)) - mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + // var hue = abs(round( angle / PI * 90 + 300)) + // mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + var lum = abs(round( angle / PI * 20 + 70)) + mx.el.style.backgroundColor = 'hsla(' + ["0", "0%", lum + "%", "0.99"] + ')' }, set_height: function(height){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 547cdca..4b80b2c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -118,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // - map.draw.regions(this.regions, colors, "#000") +// map.draw.regions(this.regions, colors, "#000") // this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] -- cgit v1.2.3-70-g09d2 From cce1dea756717f1308c6b72f762b5ea5f5b43958 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Oct 2016 19:15:16 -0400 Subject: dpr --- public/assets/javascripts/mx/primitives/mx.text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 6b5681b..3095b67 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -47,7 +47,7 @@ MX.Text = MX.Object3D.extend({ if (! font.color || font.color[0] == "#") { font.color = [0,0,0] } this.inner.style.fontFamily = "'" + font.family + "',sans-serif" - this.el.style.fontSize = (2 * font.size / devicePixelRatio) + "pt" + this.el.style.fontSize = (font.size / devicePixelRatio) + "pt" this.el.style.textAlign = font.align this.el.style.color = rgb_string(font.color) }, -- cgit v1.2.3-70-g09d2