Edit Room Colors

diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index a58eca1..011644b 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -5,6 +5,7 @@ + -- cgit v1.2.3-70-g09d2 From 220320494c60c154e84c579f86d2dfdd8f41be2f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 17:41:36 -0500 Subject: orthographic polyline --- .../javascripts/rectangles/engine/map/_map.js | 8 + .../javascripts/rectangles/engine/map/draw.js | 19 +- .../assets/javascripts/rectangles/models/vec2.js | 5 + public/assets/test/ortho.html | 224 +++++++++++++++++++++ 4 files changed, 251 insertions(+), 5 deletions(-) create mode 100644 public/assets/test/ortho.html (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 202803a..d582982 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -48,6 +48,13 @@ var Map = function(opt){ base.el.appendChild(canvas) switch (opt.type) { + case "ortho": + base.draw = new Map.Draw (base, { ortho: true }) + base.ui = new Map.UI.Ortho (base) + base.sides = base.sides_for_camera + $(window).resize(base.resize) + break + case "editor": base.draw = new Map.Draw (base) base.ui = new Map.UI.Editor (base) @@ -65,6 +72,7 @@ var Map = function(opt){ base.resize = function(){ canvas.width = base.dimensions.a = window.innerWidth canvas.height = base.dimensions.b = window.innerHeight + // resize here - esp if 2d-hires } base.toggle = function(state){ diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 5a9b592..b525696 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -5,14 +5,16 @@ Map.Draw = function(map, opt){ var draw = this - var ctx = map.canvas.getContext("2d") + var ctx = draw.ctx = map.canvas.getContext("2d") draw.animate = function(){ ctx.save() draw.clear() draw.fill("rgba(255,255,255,0.98)") - if (opt.minimap) { + if (opt.ortho) { + } + else if (opt.minimap) { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) ctx.translate( opt.center.x, - opt.center.z ) @@ -22,7 +24,6 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#fff" ], "#000") draw.camera(scene.camera) } - else { ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) ctx.scale( map.zoom, map.zoom ) @@ -31,12 +32,19 @@ Map.Draw = function(map, opt){ draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000") draw.mouse(map.ui.mouse.cursor) + draw.mouse_dimensions(map.ui.mouse.cursor) draw.coords() scene && draw.camera(scene.camera) } ctx.restore() } + draw.translate = function(){ + ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2) + ctx.scale( map.zoom, map.zoom ) + ctx.translate( map.center.a, map.center.b ) + ctx.scale( -1, 1 ) + } // changes the ctx temporarily draw.render = function(){ @@ -87,7 +95,7 @@ Map.Draw = function(map, opt){ ctx.putImageData(pixelData, 0, 0) // reset the ctx - ctx = map.canvas.getContext("2d") + ctx = draw.ctx return canvas } @@ -123,7 +131,8 @@ Map.Draw = function(map, opt){ ctx.beginPath(); ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false); ctx.fill(); - + } + draw.mouse_dimensions = function(mouse){ if (mouse.width() != 0 && mouse.height() != 0) { if (map.ui.dragging) { stroke_rect(mouse) diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 14d0e6b..290e45e 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -80,6 +80,11 @@ this.a = Math.round(this.a) this.b = Math.round(this.b) } + vec2.prototype.distanceTo = function(v){ + var va = (this.a - v.a) + var vb = (this.b - v.b) + return Math.sqrt( va*va + vb*vb ) + } vec2.prototype.setPosition = function(n){ var len = this.length() this.a = n diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html new file mode 100644 index 0000000..8626453 --- /dev/null +++ b/public/assets/test/ortho.html @@ -0,0 +1,224 @@ + + +

+ +

+ + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ab6f7d9f205f740c3af4d7f083af436cc038d5b4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 3 Feb 2015 18:16:29 -0500 Subject: mx on the other side --- public/assets/test/ortho.html | 165 +++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 99 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 8626453..e7ec113 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -39,12 +39,6 @@ body { \ No newline at end of file -- cgit v1.2.3-70-g09d2 From eb1f73bd8be4ba8909ec5c7cd83c37269fbff31b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 07:55:32 -0500 Subject: basic orbit camera --- public/assets/test/ortho.html | 55 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 50 insertions(+), 5 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index e7ec113..bd94a51 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -14,6 +14,9 @@ body { left:50%; top:0px } +#hud { + white-space: pre; +}

@@ -90,10 +93,46 @@ Map.UI.Ortho = function(map){ new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b) } }) - +} +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: 0, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + }) + exports.init = function(){ + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + } + exports.unbind = function(){ + if (! bound) return; + bound = false + } + exports.update = function(){ + opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) + opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) + opt.camera.z = opt.radius * cos(opt.rotationY) + opt.camera.rotationX = opt.rotationX + opt.camera.rotationY = PI-opt.rotationY + hud.innerHTML = opt.camera.toString() + } + + return exports } -var scene, map +var scene, map, controls map = new Map ({ type: "ortho", @@ -135,8 +174,8 @@ function add_mx_point (p) { x: p.a, y: 0, z: p.b, - width: 5, - height: 5, + width: 1, + height: 1, }) mx.el.style.backgroundColor = "#f80" mx.el.style.backfaceVisibility = "visible" @@ -169,13 +208,18 @@ function build_circle () { } scene.update() + + controls = new MX.OrbitCamera() + controls.init() + console.log("ready..perhaps") - animate() + animate(0) } function animate(time){ requestAnimationFrame(animate) map.update(time) + controls.update() scene.update() map.draw.ctx.save() @@ -183,6 +227,7 @@ function animate(time){ map.draw.coords() map.draw.mouse(map.ui.mouse.cursor) + map.draw.camera(scene.camera) polyline() map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- .../javascripts/mx/extensions/mx.orbitCamera.js | 80 ++++++++++++ public/assets/javascripts/rectangles/util/mouse.js | 8 ++ public/assets/test/orbit.html | 140 +++++++++++++++++++++ public/assets/test/ortho.html | 50 ++------ 4 files changed, 235 insertions(+), 43 deletions(-) create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js create mode 100644 public/assets/test/orbit.html (limited to 'public/assets/test') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js new file mode 100644 index 0000000..b3dcc43 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -0,0 +1,80 @@ +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: PI/2, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + sensitivity: 10, // moving 1 pixel is like moving N radians + ease: 10, + }) + var rx, ry, px, py, epsilon = 1e-10, dragging = false + exports.init = function(){ + ry = opt.rotationY + rx = opt.rotationX + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + opt.el.addEventListener("mousedown", down) + opt.el.addEventListener("mousemove", move) + opt.el.addEventListener("mouseup", up) + } + exports.unbind = function(){ + if (! bound) return; + bound = false + opt.el.removeEventListener("mousedown", down) + opt.el.removeEventListener("mousemove", move) + opt.el.removeEventListener("mouseup", up) + } + function down (e) { + px = e.pageX + py = e.pageY + dragging = true + } + function move (e) { + if (! dragging) return + exports.delta(px- e.pageX, py - e.pageY) + px = e.pageX + py = e.pageY + } + function up (e) { + dragging = false + } + exports.delta = function(x,y){ + opt.rotationY += x/window.innerWidth * opt.sensitivity + opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI) + } + exports.move = function(y, x){ + opt.rotationY = y + if (typeof x == "number") { opt.rotationX = x } + } + exports.update = function(){ + if (abs(ry - opt.rotationY) > epsilon) { + ry = avg(ry, opt.rotationY, opt.ease) + } + else { + ry = opt.rotationY + } + if (abs(rx - opt.rotationX) > epsilon) { + rx = avg(rx, opt.rotationX, opt.ease) + } + else { + rx = opt.rotationX + } + opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + opt.radius * cos(rx) + opt.camera.rotationX = PI/2 - rx + opt.camera.rotationY = ry + PI/2 + } + return exports +} diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index cb36038..86edf6c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -76,6 +76,14 @@ function mouse (opt) { window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } + base.unbind = function(){ + if (opt.el) { + opt.el.removeEventListener("mousedown", base.mousedown) + opt.el.removeEventListener("contextmenu", base.contextmenu) + } + window.removeEventListener("mousemove", base.mousemove) + window.removeEventListener("mouseup", base.mouseup) + } base.bind_el = function(el){ el.addEventListener("mousedown", base.mousedown) diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html new file mode 100644 index 0000000..8b45de6 --- /dev/null +++ b/public/assets/test/orbit.html @@ -0,0 +1,140 @@ + + +

+ +

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index bd94a51..57e050c 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -32,6 +32,7 @@ body { + @@ -94,43 +95,6 @@ Map.UI.Ortho = function(map){ } }) } -MX.OrbitCamera = function(opt){ - var exports = {}, bound = false - exports.opt = opt = defaults(opt, { - el: window, // object to bind events on - camera: scene.camera, // camera object we'll be moving - radius: 100, - radiusRange: [ 10, 1000 ], - rotationX: 0, - rotationY: 0, - center: { x: 0, y: 0, z: 0 }, - }) - exports.init = function(){ - exports.bind() - } - exports.toggle = function(state){ - if (state) exports.bind() - else exports.unbind() - } - exports.bind = function(){ - if (bound) return; - bound = true - } - exports.unbind = function(){ - if (! bound) return; - bound = false - } - exports.update = function(){ - opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) - opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) - opt.camera.z = opt.radius * cos(opt.rotationY) - opt.camera.rotationX = opt.rotationX - opt.camera.rotationY = PI-opt.rotationY - hud.innerHTML = opt.camera.toString() - } - - return exports -} var scene, map, controls @@ -167,17 +131,17 @@ function polyline (time) { } } document.addEventListener('DOMContentLoaded', build_circle) -function add_mx_point (p) { +function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: 0, + y: i/4, z: p.b, width: 1, - height: 1, + height: i/2, }) - mx.el.style.backgroundColor = "#f80" + mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() @@ -200,11 +164,11 @@ function build_circle () { var theta, rad = 10; for (var i = 0; i < 100; i++) { - theta = (i/TWO_PI) + theta = (i/100 * TWO_PI) add_mx_point({ a: sin(theta) * rad, b: cos(theta) * rad, - }) + }, i) } scene.update() -- cgit v1.2.3-70-g09d2 From 24c2c9bd7b776c49e5e90caef00c99bc008ac72a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 14:04:48 -0500 Subject: separate orbit test & add mousewheel zoom --- .../javascripts/mx/extensions/mx.orbitCamera.js | 31 ++++++++++++++++------ .../javascripts/rectangles/engine/map/draw.js | 21 ++++++++++++++- public/assets/javascripts/rectangles/util/wheel.js | 10 ++++--- public/assets/test/orbit.html | 22 ++++++++++++--- public/assets/test/ortho.html | 1 + 5 files changed, 68 insertions(+), 17 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b3dcc43..b09512e 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -11,10 +11,17 @@ MX.OrbitCamera = function(opt){ sensitivity: 10, // moving 1 pixel is like moving N radians ease: 10, }) - var rx, ry, px, py, epsilon = 1e-10, dragging = false + var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false exports.init = function(){ ry = opt.rotationY rx = opt.rotationX + radius = opt.radius + exports.wheel = new wheel({ + el: opt.el, + update: function(e, delta){ + opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + }, + }) exports.bind() } exports.toggle = function(state){ @@ -25,15 +32,17 @@ MX.OrbitCamera = function(opt){ if (bound) return; bound = true opt.el.addEventListener("mousedown", down) - opt.el.addEventListener("mousemove", move) - opt.el.addEventListener("mouseup", up) + window.addEventListener("mousemove", move) + window.addEventListener("mouseup", up) + exports.wheel.unlock() } exports.unbind = function(){ if (! bound) return; bound = false opt.el.removeEventListener("mousedown", down) - opt.el.removeEventListener("mousemove", move) - opt.el.removeEventListener("mouseup", up) + window.removeEventListener("mousemove", move) + window.removeEventListener("mouseup", up) + exports.wheel.lock() } function down (e) { px = e.pageX @@ -70,9 +79,15 @@ MX.OrbitCamera = function(opt){ else { rx = opt.rotationX } - opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) - opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) - opt.camera.y = opt.center.z + opt.radius * cos(rx) + if (abs(radius - opt.radius) > epsilon) { + radius = avg(radius, opt.radius, opt.ease) + } + else { + radius = opt.radius + } + opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + radius * cos(rx) opt.camera.rotationX = PI/2 - rx opt.camera.rotationY = ry + PI/2 } diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index b525696..564b351 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,7 +228,7 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - function dot_at (x,z){ + draw.dot_at = function dot_at (x,z){ ctx.save() ctx.translate(x,z) @@ -240,4 +240,23 @@ Map.Draw = function(map, opt){ ctx.restore() } + + draw.x_at = function x_at (x, z, length){ + ctx.save() + ctx.translate(x,z) + + var len = (length/2 || 4) / map.zoom + + ctx.lineCap = "square" + ctx.lineWidth = 2/map.zoom + ctx.beginPath() + ctx.moveTo( -len, -len); + ctx.lineTo( len, len); + ctx.moveTo( -len, len); + ctx.lineTo( len, -len); + ctx.stroke(); + + ctx.restore() + } + } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/wheel.js b/public/assets/javascripts/rectangles/util/wheel.js index 712d470..4155a70 100644 --- a/public/assets/javascripts/rectangles/util/wheel.js +++ b/public/assets/javascripts/rectangles/util/wheel.js @@ -3,8 +3,8 @@ base.wheel = new wheel({ el: document.querySelector("#map"), - update: function(e, val, delta){ - // do something with val + update: function(e, delta){ + // do something with delta }, }) @@ -13,7 +13,7 @@ function wheel (opt) { opt = defaults(opt, { el: document, - fn: function(e, val, delta){}, + update: function(e, delta){}, propagate: false, locked: false, reversible: true, @@ -22,7 +22,7 @@ function wheel (opt) { }) opt.el.addEventListener('wheel', onMouseWheel, false); -// opt.el.addEventListener('mousewheel', onMouseWheel, false); + // opt.el.addEventListener('mousewheel', onMouseWheel, false); opt.el.addEventListener('DOMMouseScroll', onMouseWheel, false); function onMouseWheel (e) { @@ -58,6 +58,8 @@ function wheel (opt) { // opt.val = clamp(opt.val + delta, opt.min, opt.max) + // deltaX is also passed, but these values tend to be unusable + // try http://vvalls.com/assets/test/wheel.html with a trackpad opt.update(e, deltaY, deltaX) } diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html index 8b45de6..0416ff7 100644 --- a/public/assets/test/orbit.html +++ b/public/assets/test/orbit.html @@ -35,6 +35,7 @@ body { + @@ -76,17 +77,26 @@ function add_mx_point (p, theta, i) { mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: i/2, z: p.b, rotationY: -theta, width: 1, - height: i/2, + height: i, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() } +function add_center () { + var mx = new MX.Object3D() + mx.width = 79 + mx.height = 64 + mx.y = 32 * 0.05 + mx.scale = 0.05 + mx.el.style.backgroundImage = "url(http://i.asdf.us/im/b8/_1400215546_frankhats_1400215573_frankhats.gif)" + scene.add(mx) +} function build_circle () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ @@ -102,7 +112,7 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; + var theta, rad = 16; for (var i = 0; i < 100; i++) { theta = (i/100 * TWO_PI) add_mx_point({ @@ -111,9 +121,11 @@ function build_circle () { }, theta, i) } + add_center() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ el: document.querySelector("#perspective") }) controls.init() console.log("ready..perhaps") @@ -131,6 +143,8 @@ function animate(time){ map.draw.translate() map.draw.coords() + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 57e050c..b00b6fe 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -35,6 +35,7 @@ body { + -- cgit v1.2.3-70-g09d2 From cbc0e733553648f24c8c0256caee36d1e4f24ce1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:08:43 -0500 Subject: build MX divs from polyline --- .../javascripts/mx/extensions/mx.orbitCamera.js | 3 +- public/assets/test/ortho.html | 107 +++++++++++++++++---- 2 files changed, 88 insertions(+), 22 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index b09512e..6dc5b6c 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -9,6 +9,7 @@ MX.OrbitCamera = function(opt){ rotationY: 0, center: { x: 0, y: 0, z: 0 }, sensitivity: 10, // moving 1 pixel is like moving N radians + wheelSensitivity: 10, ease: 10, }) var rx, ry, radius, px, py, epsilon = 1e-10, dragging = false @@ -19,7 +20,7 @@ MX.OrbitCamera = function(opt){ exports.wheel = new wheel({ el: opt.el, update: function(e, delta){ - opt.radius = clamp( opt.radius+delta, opt.radiusRange[0], opt.radiusRange[1] ) + opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] ) }, }) exports.bind() diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index b00b6fe..041ec3f 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -62,17 +62,19 @@ Map.UI.Ortho = function(map){ 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.length = 0 + points.length = mx_points.length = 0 points.push( p ) + mx_points.push( add_mx_point(p) ) } - 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) @@ -104,10 +106,11 @@ map = new Map ({ el: document.querySelector("#orthographic"), width: window.innerWidth/2, height: window.innerHeight, + zoom: 0, }) var placing = false -var points = [] +var points = [], mx_points = [] var ctx = map.draw.ctx var last_point @@ -119,6 +122,7 @@ function polyline (time) { if (points.length > 1) { ctx.fillStyle = "#ff0" ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() ctx.moveTo(points[0].a, points[0].b) points.forEach(function(point, i){ @@ -131,24 +135,80 @@ function polyline (time) { } } } -document.addEventListener('DOMContentLoaded', build_circle) + +function add_mx_polyline (points) { + mx_points.forEach(function(mx){ scene.remove(mx) }) + for (var i = 1; i < points.length; i++) { + var head = points[i-1] + var tail = points[i % (points.length-1)] + add_mx_polyline_face(head, tail) + } +} +function add_mx_polyline_face(head, tail){ + var mx = new MX.Object3D() + 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: 25 + 1, + z: mid_z / 2, + width: ceil(len), + height: 50, + rotationY: angle + }) + var hue = abs(round( angle / PI * 90 + 300)) + console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') + mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' + scene.add(mx) +} + + function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: i/4, + y: 11, z: p.b, - width: 1, - height: i/2, + width: 20, + height: 20, }) mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) - mx.update() + return mx +} +function mx_grid () { + var space = 20, cells = 20, side = space*cells + var ctx, canvas = document.createElement("canvas") + canvas.width = canvas.height = side + 4 + ctx = canvas.getContext('2d') + + draw_grid(ctx, 20, 20) + + var mx = new MX.Object3D(canvas) + mx.rotationX = PI/2 + scene.add(mx) +} +function draw_grid (ctx, cells, space) { + var side = space * cells + 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.stroke() } -function build_circle () { +document.addEventListener('DOMContentLoaded', build) +function build () { scene = new MX.Scene().addTo("#perspective") scene.camera.move({ "x": 0, @@ -163,21 +223,17 @@ function build_circle () { scene.height = window.innerHeight scene.perspective = window.innerHeight - var theta, rad = 10; - for (var i = 0; i < 100; i++) { - theta = (i/100 * TWO_PI) - add_mx_point({ - a: sin(theta) * rad, - b: cos(theta) * rad, - }, i) - } - + mx_grid() + scene.update() - controls = new MX.OrbitCamera() + controls = new MX.OrbitCamera({ + radius: 1000, + rotationX: PI/4, + rotationY: PI/2, + }) controls.init() - console.log("ready..perhaps") animate(0) } function animate(time){ @@ -190,10 +246,19 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() + map.draw.ctx.save() + map.draw.ctx.translate(-(20*20)/2, -(20*20)/2) + draw_grid(map.draw.ctx, 20, 20) + map.draw.ctx.restore() + map.draw.coords() + + polyline() + + ctx.strokeStyle = "#f00"; + map.draw.x_at(0,0) map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - polyline() map.draw.ctx.restore() } -- cgit v1.2.3-70-g09d2 From 779226a92063b91151988b132415e76636337de9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 18:47:51 -0500 Subject: keeping track of finished paths --- public/assets/test/ortho.html | 43 +++++++++++++++++++++++++++---------------- 1 file changed, 27 insertions(+), 16 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index 041ec3f..ce52f99 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -71,7 +71,7 @@ Map.UI.Ortho = function(map){ } else { placing = true - points.length = mx_points.length = 0 + points = [] points.push( p ) mx_points.push( add_mx_point(p) ) } @@ -110,11 +110,13 @@ map = new Map ({ }) var placing = false -var points = [], mx_points = [] +var points, mx_points = [] +var shapes = [] var ctx = map.draw.ctx var last_point -function polyline (time) { +function polyline (points, finished) { + if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" ctx.fillRect(points[0].a, points[0].b, 10, 10) @@ -128,9 +130,8 @@ function polyline (time) { points.forEach(function(point, i){ i && ctx.lineTo(point.a, point.b) }) - placing && last_point && ctx.lineTo(last_point.a, last_point.b) ctx.stroke() - if (! placing) { + if (! placing || finished) { ctx.fill() } } @@ -138,11 +139,18 @@ function polyline (time) { function add_mx_polyline (points) { mx_points.forEach(function(mx){ scene.remove(mx) }) + var faces = [] for (var i = 1; i < points.length; i++) { var head = points[i-1] - var tail = points[i % (points.length-1)] - add_mx_polyline_face(head, tail) + var tail = points[i] + face = add_mx_polyline_face(head, tail) + faces.push(face) } + shapes.push({ + mx: faces, + points: points, + }) + points = [] } function add_mx_polyline_face(head, tail){ var mx = new MX.Object3D() @@ -162,9 +170,9 @@ function add_mx_polyline_face(head, tail){ console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) + return mx } - function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false @@ -204,19 +212,13 @@ function draw_grid (ctx, cells, space) { ctx.moveTo(0, i*space) ctx.lineTo(side, i*space) } + ctx.closePath() ctx.stroke() } document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") - scene.camera.move({ - "x": 0, - "y": 0, - "z": 0, - "rotationX": 0, // PI/2, - "rotationY": PI/2, // PI - }) scene.camera.radius = 20 scene.width = window.innerWidth/2 @@ -253,7 +255,16 @@ function animate(time){ map.draw.coords() - polyline() + polyline(points) + if (placing && last_point && points.length) { + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + ctx.lineTo(last_point.a, last_point.b) + } + + shapes.forEach(function(shape){ + polyline(shape.points, true) + }) ctx.strokeStyle = "#f00"; map.draw.x_at(0,0) -- cgit v1.2.3-70-g09d2 From bcf1904e0bdd64353e6d06f922112cf28b1bc87f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 5 Feb 2015 12:28:04 -0500 Subject: line to cursor --- public/assets/javascripts/rectangles/engine/map/draw.js | 4 ++-- public/assets/test/ortho.html | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 564b351..24f7cf3 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -228,11 +228,11 @@ Map.Draw = function(map, opt){ line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation) } - draw.dot_at = function dot_at (x,z){ + draw.dot_at = function dot_at (x, z, radius){ ctx.save() ctx.translate(x,z) - var radius = 2 / map.zoom + radius = (radius || 2) / map.zoom ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI, false); diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index ce52f99..1ca7e06 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -80,9 +80,11 @@ Map.UI.Ortho = function(map){ 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 ) - var p = new vec2( cursor.x.a, cursor.y.a ) - if (placing && points.length > 1 && points[0].distanceTo( p ) < 10/map.zoom) { + 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" @@ -119,7 +121,7 @@ function polyline (points, finished) { if (! points) return if (points.length == 1) { ctx.fillStyle = "#f80" - ctx.fillRect(points[0].a, points[0].b, 10, 10) + map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { ctx.fillStyle = "#ff0" @@ -167,7 +169,6 @@ function add_mx_polyline_face(head, tail){ rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) - console.log('hsl(' + [hue + "deg", "100%", "50%"] + ')') mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' scene.add(mx) return mx @@ -256,10 +257,13 @@ function animate(time){ map.draw.coords() polyline(points) - if (placing && last_point && points.length) { + if (placing && last_point) { + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom ctx.beginPath() - ctx.moveTo(points[0].a, points[0].b) + ctx.moveTo(points[points.length-1].a, points[points.length-1].b) ctx.lineTo(last_point.a, last_point.b) + ctx.stroke() } shapes.forEach(function(shape){ -- 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/test') 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/test') 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 4b794104e86b74c531e35443cf23ce8cf144d505 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 12:44:28 -0400 Subject: etc --- public/assets/javascripts/app.js | 2 - .../javascripts/rectangles/engine/map/ui_ortho.js | 82 --------------------- public/assets/test/ortho.html | 9 +++ public/assets/test/ortho2.html | 83 ++++++++++++++++++++++ 4 files changed, 92 insertions(+), 84 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ff062e..6ebcda5 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,8 +21,6 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - var movements - scene = new MX.Scene().addTo('#scene') scene.width = window.innerWidth scene.height = window.innerHeight diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index adcc078..e69de29 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -1,82 +0,0 @@ -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) - - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - 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 - } - - // 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/test/ortho.html b/public/assets/test/ortho.html index 1ca7e06..2257006 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -99,6 +99,15 @@ Map.UI.Ortho = function(map){ 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) + } } var scene, map, controls diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 733c90c..17acead 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -46,6 +46,89 @@ body { @@ -98,12 +105,13 @@ Map.UI.Ortho = function(map){ 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 + cursor.y.a = cursor.y.b = last_point.b } else { document.body.style.cursor = "crosshair" @@ -225,6 +233,10 @@ function add_mx_point (p, i) { return mx } +$("#url").on("input", function(){ + floorplan.load({ src: this.value }) +}) + document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") @@ -234,8 +246,6 @@ function build () { scene.height = window.innerHeight scene.perspective = window.innerHeight -// grid = new MX.Grid() -// scene.add(grid) floorplan = new MX.Image({ src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg", keepImage: true, @@ -267,7 +277,6 @@ function animate(time){ map.draw.ctx.save() map.draw.translate() -// grid.draw(map.draw.ctx, true) floorplan.draw(map.draw.ctx, true) map.draw.coords() diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html new file mode 100644 index 0000000..19bb13a --- /dev/null +++ b/public/assets/test/ortho3.html @@ -0,0 +1,239 @@ + + +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 00614373ad41e679dc7e06aca950d7167bd1c68f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 16:31:54 -0400 Subject: test with image url --- public/assets/javascripts/rectangles/util/mouse.js | 2 +- public/assets/test/ortho2.html | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 86edf6c..2b98cee 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -134,7 +134,7 @@ function mouse (opt) { } var x = pos.a, y = pos.b - + if (base.down) { base.cursor.x.b = x base.cursor.y.b = y diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 5609ec3..89a5688 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -69,6 +69,8 @@ Map.UI.Ortho = function(map){ if (e.ctrlKey || e.which === 3) { if (placing) { // close polyline or cancel + placing = false + add_mx_polyline(points) return } cursor.quantize(1/map.zoom) @@ -153,6 +155,7 @@ $(window).resize(function(){ }) +var wall_height = 100 var placing = false var points, mx_points = [] var shapes = [] @@ -166,7 +169,7 @@ function polyline (points, finished) { map.draw.dot_at(points[0].a, points[0].b, 5) } if (points.length > 1) { - ctx.fillStyle = "#ff0" + ctx.fillStyle = "rgba(255,255,0,0.1)" ctx.strokeStyle = "#f80" ctx.lineWidth = 2 / map.zoom ctx.beginPath() @@ -204,10 +207,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: 25 + 1, + y: wall_height/2 + 1, z: mid_z / 2, width: ceil(len), - height: 50, + height: wall_height, rotationY: angle }) var hue = abs(round( angle / PI * 90 + 300)) -- cgit v1.2.3-70-g09d2 From 30ee4d90d5fc89880ef0801aa078f26eeb26f155 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 17:02:43 -0400 Subject: toggle keyboard/orbit cam --- public/assets/javascripts/defaults.js | 3 +- .../javascripts/mx/extensions/mx.movements.js | 18 ++++--- .../javascripts/mx/extensions/mx.orbitCamera.js | 1 + public/assets/test/ortho2.html | 56 ++++++++++++++++++++-- 4 files changed, 66 insertions(+), 12 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 12aed62..413bb13 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,3 +1,4 @@ +app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, units: app.units = "ft", @@ -13,7 +14,7 @@ app.defaults = { }, } -marked.setOptions({ +window.marked && marked.setOptions({ sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 9af2c8d..bc71fc4 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -39,7 +39,7 @@ MX.Movements = function (cam) { }) function clampRotation( vr ) { - if (Rooms.mover.noclip) { + if (window.Rooms && Rooms.mover.noclip) { return clamp(vr, PI/-2, PI/2 ) } else { @@ -221,15 +221,19 @@ MX.Movements = function (cam) { /* case 48: // 0 - cam.rotationX = 0 - cam.rotationY = 0 - cam.x = 0 - cam.y = viewHeight - cam.z = 0 + movements.center() break */ } }, + + center: function(){ + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + }, mousedown: function (e) { if (locked) return; @@ -341,7 +345,7 @@ MX.Movements = function (cam) { jumping = false } - var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000) + var ceiling = ((window.Rooms && Rooms.mover.room) ? Rooms.mover.room.height : 5000) if (pos.y >= ceiling-5) { vy = 0 diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index 6dc5b6c..f4759fb 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -68,6 +68,7 @@ MX.OrbitCamera = function(opt){ if (typeof x == "number") { opt.rotationX = x } } exports.update = function(){ + if (! bound) return if (abs(ry - opt.rotationY) > epsilon) { ry = avg(ry, opt.rotationY, opt.ease) } diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 89a5688..d6f0c5c 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -1,3 +1,4 @@ +

@@ -29,9 +32,12 @@ body {

+ +

+ @@ -40,6 +46,7 @@ body { + @@ -53,6 +60,11 @@ body { + @@ -298,7 +299,16 @@ function build () { rotationY: PI, }) scene.add(floorplan) - + floorplan.el.addEventListener("contextmenu", function(e){ + e.preventDefault() + var offset = offsetFromPoint(e, this) + var x = (offset.left - 0.5) * floorplan.width + var z = (offset.top - 0.5) * floorplan.height + controls.opt.center.x = -x + controls.opt.center.y = 0 + controls.opt.center.z = -z + }, true) + scene.update() controls = new MX.OrbitCamera({ diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 19bb13a..37bf620 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -38,6 +38,7 @@ body { + -- cgit v1.2.3-70-g09d2 From 7fd34f49fea785f11320eec412a95726cbcf7349 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 17:59:51 -0400 Subject: static build target --- .gitignore | 3 + Gruntfile.js | 130 +++++++++++++- public/assets/javascripts/ui/reader/MediaPlayer.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 12 +- public/assets/javascripts/ui/reader/_router.js | 16 ++ public/assets/test/static.html | 196 +++++++++++++++++++++ server/index.js | 4 + 7 files changed, 354 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/_router.js create mode 100644 public/assets/test/static.html (limited to 'public/assets/test') diff --git a/.gitignore b/.gitignore index 50f54f1..14d6d0f 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,6 @@ config.json app.concat.js app.min.js +reader.concat.js +reader.min.js + diff --git a/Gruntfile.js b/Gruntfile.js index 93f13fe..a3ef359 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -147,7 +147,110 @@ module.exports = function(grunt) { "public/assets/javascripts/defaults.js", ], dest: 'public/assets/javascripts/app.concat.js', + }, + + // this builds a static version of the vvalls code, suitable for embedding + // in another website. see assets/test/static.html + 'static': { + src: [ + "public/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js", + "public/assets/javascripts/vendor/bower_components/lodash/lodash.min.js", + "public/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js", + "public/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js", + "public/assets/javascripts/vendor/bower_components/marked/lib/marked.js", + "public/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js", + "public/assets/javascripts/vendor/tube.js", + "public/assets/javascripts/vendor/loader.js", + "public/assets/javascripts/vendor/polyfill.js", + "public/assets/javascripts/vendor/froogaloop.js", + "public/assets/javascripts/util.js", + + "public/assets/javascripts/mx/mx.js", + "public/assets/javascripts/mx/extensions/mx.scene.js", + "public/assets/javascripts/mx/extensions/mx.movements.js", + "public/assets/javascripts/mx/extensions/mx.movementsMobile.js", + "public/assets/javascripts/mx/primitives/mx.image.js", + "public/assets/javascripts/mx/primitives/mx.text.js", + "public/assets/javascripts/mx/primitives/mx.video.js", + "public/assets/javascripts/mx/primitives/mx.youtube.js", + "public/assets/javascripts/mx/primitives/mx.vimeo.js", + "public/assets/javascripts/mx/primitives/mx.soundcloud.js", + "public/assets/javascripts/mx/primitives/mx.grid.js", + + "public/assets/javascripts/rectangles/_env.js", + + "public/assets/javascripts/rectangles/util/constants.js", + "public/assets/javascripts/rectangles/util/colors.js", + "public/assets/javascripts/rectangles/util/coords.js", + "public/assets/javascripts/rectangles/util/debug.js", + "public/assets/javascripts/rectangles/util/keys.js", + "public/assets/javascripts/rectangles/util/measurement.js", + "public/assets/javascripts/rectangles/util/minotaur.js", + "public/assets/javascripts/rectangles/util/mouse.js", + "public/assets/javascripts/rectangles/util/permissions.js", + "public/assets/javascripts/rectangles/util/sort.js", + "public/assets/javascripts/rectangles/util/uid.js", + "public/assets/javascripts/rectangles/util/undostack.js", + "public/assets/javascripts/rectangles/util/wheel.js", + + "public/assets/javascripts/rectangles/models/vec2.js", + "public/assets/javascripts/rectangles/models/vec3.js", + "public/assets/javascripts/rectangles/models/rect.js", + "public/assets/javascripts/rectangles/models/surface.js", + "public/assets/javascripts/rectangles/models/tree.js", + "public/assets/javascripts/rectangles/models/room.js", + "public/assets/javascripts/rectangles/models/wall.js", + "public/assets/javascripts/rectangles/models/floor.js", + + "public/assets/javascripts/rectangles/engine/rooms/_rooms.js", + "public/assets/javascripts/rectangles/engine/rooms/_walls.js", + "public/assets/javascripts/rectangles/engine/rooms/builder.js", + "public/assets/javascripts/rectangles/engine/rooms/clipper.js", + "public/assets/javascripts/rectangles/engine/rooms/grouper.js", + "public/assets/javascripts/rectangles/engine/rooms/mover.js", + + "public/assets/javascripts/rectangles/engine/scenery/_scenery.js", + "public/assets/javascripts/rectangles/engine/scenery/move.js", + "public/assets/javascripts/rectangles/engine/scenery/resize.js", + "public/assets/javascripts/rectangles/engine/scenery/randomize.js", + "public/assets/javascripts/rectangles/engine/scenery/sound.js", + "public/assets/javascripts/rectangles/engine/scenery/undo.js", + "public/assets/javascripts/rectangles/engine/scenery/types/_object.js", + "public/assets/javascripts/rectangles/engine/scenery/types/image.js", + "public/assets/javascripts/rectangles/engine/scenery/types/text.js", + "public/assets/javascripts/rectangles/engine/scenery/types/video.js", + "public/assets/javascripts/rectangles/engine/scenery/types/audio.js", + + "public/assets/javascripts/rectangles/engine/sculpture/_sculpture.js", + "public/assets/javascripts/rectangles/engine/sculpture/move.js", + "public/assets/javascripts/rectangles/engine/sculpture/resize.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/_object.js", + "public/assets/javascripts/rectangles/engine/sculpture/types/image.js", + + "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/draw.js", + + "public/assets/javascripts/ui/lib/View.js", + "public/assets/javascripts/ui/lib/Router.js", + "public/assets/javascripts/ui/lib/ModalView.js", + + "public/assets/javascripts/ui/reader/ReaderView.js", + "public/assets/javascripts/ui/reader/ShareView.js", + "public/assets/javascripts/ui/reader/EmbedView.js", + "public/assets/javascripts/ui/reader/MediaPlayer.js", + "public/assets/javascripts/ui/reader/Tracker.js", + + "public/assets/javascripts/ui/reader/_router.js", + + "public/assets/javascripts/app.js", + "public/assets/javascripts/defaults.js", + ], + dest: 'public/assets/javascripts/reader.concat.js', } + + }, copy: { concat: { @@ -158,7 +261,15 @@ module.exports = function(grunt) { }, ] }, - }, + 'static': { + files: [ + { + src: 'public/assets/javascripts/static.concat.js', + dest: 'public/assets/javascripts/static.min.js', + }, + ] + }, + }, uglify: { options: { banner: '/* vvalls by okfocus 2015 */\n' @@ -166,10 +277,17 @@ module.exports = function(grunt) { js: { src: 'public/assets/javascripts/app.concat.js', dest: 'public/assets/javascripts/app.min.js', + }, + 'static': { + src: 'public/assets/javascripts/static.concat.js', + dest: 'public/assets/javascripts/static.min.js', } }, clean: { - release: ["public/assets/javascripts/app.concat.js"], + release: [ + "public/assets/javascripts/static.concat.js", + "public/assets/javascripts/app.concat.js", + ], } }); @@ -180,8 +298,10 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-clean'); // Default task(s). - grunt.registerTask('js', ['concat:js', 'uglify:js', 'clean:release']); - grunt.registerTask('merge', ['concat:js', 'copy:concat']); - grunt.registerTask('default', ['js']); + grunt.registerTask('js', ['concat:js', 'uglify:js', 'clean:release']); + grunt.registerTask('js-test', ['concat:js', 'copy:concat']); + grunt.registerTask('static', ['concat:static', 'uglify:static', 'clean:release']); + grunt.registerTask('static-test', ['concat:static', 'copy:static']); + grunt.registerTask('default', ['js']); }; diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 8424d9c..8e65976 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -1,5 +1,5 @@ -var MediaPlayer = FormView.extend({ +var MediaPlayer = View.extend({ el: "#mediaPlayer", events: { diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index e3e27c3..55d2520 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -31,7 +31,12 @@ var ReaderView = View.extend({ this.tracker = new Tracker ({ mode: mode }) - $.get(this.projectAction + name, this.ready.bind(this)) + if ('vvalls_data' in window) { + this.ready(window.vvalls_data) + } + else { + $.get(this.projectAction + name, this.ready.bind(this)) + } }, getQS: function(){ @@ -85,9 +90,10 @@ var ReaderView = View.extend({ Walls.setColor[mode](colors[mode]) }) - editor.permissions.clear() + window.editor && editor.permissions.clear() - this.listen() + // disable until we start using spinning again + // this.listen() }, listen: function(){ diff --git a/public/assets/javascripts/ui/reader/_router.js b/public/assets/javascripts/ui/reader/_router.js new file mode 100644 index 0000000..a0e346a --- /dev/null +++ b/public/assets/javascripts/ui/reader/_router.js @@ -0,0 +1,16 @@ + +var SiteRouter = Router.extend({ + el: "body", + + initialize: function(){ + app.launch() + if (app.unsupported) return + + this.readerView = app.controller = new ReaderView() + this.readerView.load() + + $("body").removeClass("loading") + } + +}) + diff --git a/public/assets/test/static.html b/public/assets/test/static.html new file mode 100644 index 0000000..90871a5 --- /dev/null +++ b/public/assets/test/static.html @@ -0,0 +1,196 @@ + + + + VValls + + + + + + + + + + + + + + + + + + + + + + + + +

+ + +

+ Leaves and such +
+ +
+ + asdf +

+ + + Last modified 4/20/2015 + + + + + Edit Room + +

+ +

+ + + + + + + + + + + + + +

+ +

+ X + +

Embed VValls

+ +

+ This code generates an iframe which will embed this room in your website or blog. +

+ + + dimensions: x + mute + interactive + + test +

+ +

+ + + + + + + diff --git a/server/index.js b/server/index.js index 7bc3f7f..391385c 100644 --- a/server/index.js +++ b/server/index.js @@ -66,6 +66,10 @@ site.setup = function(){ app.set('env', config.env.production ? "production" : "development") app.get('env') === 'development' && app.use(express.errorHandler()); + if (config.env.production) { + app.set('json spaces', 0) + } + // Essential middleware // app.all('*', middleware.enableCORS); app.all('*', middleware.ensureLocals); -- cgit v1.2.3-70-g09d2 From ce5fb676488648fa390bd0ebee0891abcd2c9290 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 19:04:00 -0400 Subject: static project with demo data --- .gitignore | 4 +- Gruntfile.js | 2 +- public/assets/test/static.html | 238 +++++++++++++++++------------------------ 3 files changed, 100 insertions(+), 144 deletions(-) (limited to 'public/assets/test') diff --git a/.gitignore b/.gitignore index 14d6d0f..2a58e7f 100644 --- a/.gitignore +++ b/.gitignore @@ -34,6 +34,6 @@ config.json app.concat.js app.min.js -reader.concat.js -reader.min.js +static.concat.js +static.min.js diff --git a/Gruntfile.js b/Gruntfile.js index a3ef359..a0f4d83 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -247,7 +247,7 @@ module.exports = function(grunt) { "public/assets/javascripts/app.js", "public/assets/javascripts/defaults.js", ], - dest: 'public/assets/javascripts/reader.concat.js', + dest: 'public/assets/javascripts/static.concat.js', } diff --git a/public/assets/test/static.html b/public/assets/test/static.html index 90871a5..dc098de 100644 --- a/public/assets/test/static.html +++ b/public/assets/test/static.html @@ -17,7 +17,7 @@ | | | | | | | | | | | | | | | | + | | + | | + | | + | | | | .' | |/ | | \| | `. | | -+------+' +------+ +------+ +------+ `+------> ++------+' +------+ +------+ +------+ `+-------> @@ -36,161 +36,117 @@ - -

- - -

- Leaves and such -
- -
- - asdf -

- - - Last modified 4/20/2015 - - - - - Edit Room - -

- -

- - - - - - - - - - - - - -

+ + + + +

+ +

- X + + +

Embed VValls

+ Leaves and such +
+
+ asdf +

+ Last modified 4/20/2015 + +

- This code generates an iframe which will embed this room in your website or blog. -

- - - dimensions: x - mute - interactive - - test -

+ + + + + + + + + + + + +

- -

+ +

- + - -- cgit v1.2.3-70-g09d2 From aaa81d4b52659f991e38994f8fff56ba43baa419 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Apr 2015 17:54:30 -0400 Subject: abstract out map tools --- .../javascripts/mx/extensions/mx.movements.js | 8 +- .../javascripts/rectangles/engine/map/ui_ortho.js | 49 +++ .../rectangles/engine/sculpture/types/_object.js | 2 +- public/assets/test/ortho2.html | 158 ++++----- public/assets/test/ortho3.html | 394 +++++++++++++++------ 5 files changed, 421 insertions(+), 190 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index cf00adb..931caac 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -94,12 +94,12 @@ MX.Movements = function (cam) { moveRight = true break - // case 37: // left + case 37: // left case 81: // q turnLeft = true break - // case 39: // right + case 39: // right case 69: // e turnRight = true break @@ -200,12 +200,12 @@ MX.Movements = function (cam) { moveRight = false break - // case 37: // left + case 37: // left case 81: // q turnLeft = false break - // case 39: // right + case 39: // right case 69: // e turnRight = false break diff --git a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js index e69de29..0c501ad 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui_ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/ui_ortho.js @@ -0,0 +1,49 @@ +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) + base.tools[currentTool].down(e, cursor) + }, + 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) + base.tools[currentTool].move(e, cursor) + }, + 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 + base.tools[currentTool].drag(e, cursor) + }, + 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.tools[currentTool].up(e, cursor, new_cursor) + } + }) + + var currentTool = "polyline" + base.setTool = function(s){ + currentTool = s + } + base.tools = { + polyline: new PolylineTool, + position: new PositionTool, + } + + 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/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 2f24ae5..2f593e8 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -72,7 +72,7 @@ Sculpture.types.base = Fiber.extend(function(base){ else { this.mx.el.classList.add("backface-visible") this.mx.el.classList.remove("backface-hidden") - this.mx.rotationY = PI/2 + this.mx.rotationY = quantize(cam.rotationY, PI/2) } Sculpture.resize.move_dots() }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 2c600f5..49e0308 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -41,6 +41,7 @@ body { + @@ -66,92 +67,87 @@ app.tube = new Tube () app.on = function(){ app.tube.on.apply(app.tube, arguments) } app.off = function(){ app.tube.off.apply(app.tube, arguments) } -Map.UI = Map.UI || {} -Map.UI.Ortho = function(map){ - - var base = this - - base.creating = base.dragging = base.resizing = false +var MapTool = Fiber.extend(function(base){ + var exports = { + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + } + return exports +}) - 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) +var PositionTool = MapTool.extend(function(base){ + var exports = { + down: 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 + map.ui.mouse.down = false + }, + } + return exports +}) - if (e.ctrlKey || e.which === 3) { - if (placing) { - // close polyline or cancel - placing = false - add_mx_polyline(points) - return +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 (placing) { + // close polyline or cancel + placing = false + if (points.length > 2) { + add_mx_polyline(points) + } + else { + points.length = 0 } - 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 } + map.ui.tools.position.down(e, cursor) + return + } - // 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 ) + // 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) ) - } - }, - 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) - } -} - + } + } + else { + placing = true + points = [] + points.push( p ) + mx_points.push( add_mx_point(p) ) + } + } + exports.move = function(e, cursor){ + 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" + } + } + return exports +}) var scene, map, controls @@ -302,8 +298,8 @@ function build () { floorplan.el.addEventListener("contextmenu", function(e){ e.preventDefault() var offset = offsetFromPoint(e, this) - var x = (offset.left - 0.5) * floorplan.width - var z = (offset.top - 0.5) * floorplan.height + 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 diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 37bf620..a41eb8b 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -1,3 +1,4 @@ +

+ + + +

+ +

+ + + +

+ + + + - - @@ -96,7 +97,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.down = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { selected_shape = p.shape selected_point = p.point @@ -110,7 +111,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.move = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { document.body.style.cursor = "pointer" last_point.assign(p.point) @@ -339,6 +340,26 @@ var OrthoPolylineTool = MapTool.extend(function (base) { return exports }) +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + } + exports.move = function(e, cursor){ + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + 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" + } + } + return exports +}) var ShapeList = Fiber.extend(function(base){ var exports = {} @@ -348,6 +369,12 @@ var ShapeList = Fiber.extend(function(base){ exports.add = function(shape){ this.shapes.push(shape) } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } exports.findClosestPoint = function (p){ var point for (var i = 0; i < this.shapes.length; i++) { @@ -364,6 +391,17 @@ var ShapeList = Fiber.extend(function(base){ } return null } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } exports.forEach = function(fn){ this.shapes.forEach(fn) } @@ -421,7 +459,10 @@ var Polyline = Fiber.extend(function(base){ var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity var closest_i = -1 var points = this.points + var p1, p2 = points[0] for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] d1 = p1.a - p2.a d2 = p1.b - p2.b sum = d1*d1 + d2*d2 @@ -448,10 +489,6 @@ var Polyline = Fiber.extend(function(base){ } } - exports.getSegment = function(i){ - return [ points[i], points[i+1] ] - } - exports.draw = function(ctx){ var points = this.points if (! points.length) return @@ -541,7 +578,16 @@ MX.Polyline = MX.Object3D.extend({ }) 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 + }, + }) MX.Point = MX.Object3D.extend({ @@ -577,6 +623,7 @@ map = new Map ({ 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) $(window).resize(function(){ @@ -645,6 +692,9 @@ OrthographicToolbar.add("polyline-mode", function(){ OrthographicToolbar.add("ortho-polyline-mode", function(){ map.ui.set_tool("ortho-polyline") }) +OrthographicToolbar.add("eraser-mode", function(){ + map.ui.set_tool("eraser") +}) OrthographicToolbar.pick("ortho-polyline-mode") document.addEventListener('DOMContentLoaded', build) diff --git a/views/about/_old_plans.ejs b/views/about/_old_plans.ejs new file mode 100644 index 0000000..e4b07be --- /dev/null +++ b/views/about/_old_plans.ejs @@ -0,0 +1,63 @@ +

[[- plans.free.name ]]

[[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan +

+ +

[[- plans.basic.name ]]

$[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year +
Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions +
Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo + or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months +
Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions +
VValls logo appears when embedding an exhibition on a web page +
+ [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plans.basic.level) { ]] + Current Level + [[ } ]] +

+ +

[[- plans.pro.name ]]

$[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year +
Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions +
Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo + or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months +
Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions +
Includes planning for 3D objects in the room +
No VValls logo on embed +
+ [[ if (! logged_in) { ]] + + [[ } else if (! user.plan_level) { ]] + + [[ } else if (user.plan_level == plans.pro.level) { ]] + Current Level + [[ } else if (user.plan_level < plans.pro.level) { ]] + + [[ } ]] +

+ +

Buying any extra floor plan unlocks collaboration.
Invite an artist or curator to work on the exhibition with you. +
Basic Floor plan: Rectangle-based design of any dimension. +
Pro Floor plan: Trace an arbitrary floor plan from image. +

+ +

Want Something Custom?

We offer customized white-label options for business and educational uses. +

diff --git a/views/about/_plans.ejs b/views/about/_plans.ejs index 16fb9c6..af2a050 100644 --- a/views/about/_plans.ejs +++ b/views/about/_plans.ejs @@ -1,63 +1,117 @@ -

[[- plans.free.name ]]

[[- plans.free.stock_project_limit ]] exhibition with pre-designed template floor plan -

[[- plans.basic.name ]]

$[[- plans.basic.monthly_price ]]/mo or $[[- plans.basic.yearly_price ]]/year -
Comes with [[- plans.basic.basic_layout_limit ]] basic floor plan and [[- plans.basic.basic_project_limit ]] exhibitions -
Each new basic floor plan costs $[[- plans.basic.basic_layout_monthly_price ]]/mo - or $[[- plans.basic.basic_layout_yearly_price ]]/year, minimum 3 months -
Each new floor plan can have up to [[- plans.basic.basic_project_limit ]] exhibitions -
VValls logo appears when embedding an exhibition on a web page -
- [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plans.basic.level) { ]] - Current Level - [[ } ]] -

+
+
[[- plans.pro.name ]]
+
$[[- plans.pro.monthly_price ]] / mo
+
Ideal for large galleries
and small businesses.

- -
-
[[- plans.pro.name ]]
-
- $[[- plans.pro.monthly_price ]]/mo or $[[- plans.pro.yearly_price ]]/year -
- Comes with [[- plans.pro.pro_layout_limit ]] pro floor plan and [[- plans.pro.pro_project_limit ]] exhibitions -
- Each new pro floor plan costs $[[- plans.pro.pro_layout_monthly_price ]]/mo - or $[[- plans.pro.pro_layout_yearly_price ]]/year, minimum 3 months -
- Each new pro floor plan can have up to [[- plans.pro.pro_project_limit ]] exhibitions -
- Includes planning for 3D objects in the room -
- No VValls logo on embed -
- - [[ if (! logged_in) { ]] - - [[ } else if (! user.plan_level) { ]] - - [[ } else if (user.plan_level == plans.pro.level) { ]] - Current Level - [[ } else if (user.plan_level < plans.pro.level) { ]] - - [[ } ]] -
+
- + [[- plans.pro.pro_layout_limit ]] Pro Floor Plan and [[- plans.pro.pro_project_limit ]] Exhibitions +
- + Trace a Floor Plan from a Drawing +
- + Image Hosting For Artworks +
- + Planning for 3D Objects +
- + Everything the Medium Plan Contains +
- + No VValls Branding! +
+
+ [[ if (! logged_in) { ]] + Sign Up for [[- plans.pro.name ]] + [[ } else if (! user.plan_level || user.plan_level < plans.pro.level) { ]] + Sign Up for [[- plans.pro.name ]] + [[ } else if (user.plan_level == plans.basic.level) { ]] +
Current Level
+ [[ } ]] +
+
+
+
[[- plans.basic.name ]]
+
$[[- plans.basic.monthly_price ]] / mo
+
Great for small galleries
and art projects.

- -
-
- Buying any extra floor plan unlocks collaboration.
  Invite an artist or curator to work on the exhibition with you. -
- Basic Floor plan: Rectangle-based design of any dimension. -
- Pro Floor plan: Trace an arbitrary floor plan from image. -
+
- + [[- plans.basic.basic_layout_limit ]] Basic Floor Plan and [[- plans.basic.basic_project_limit ]] Exhibitions +
- + Add More Basic Floor Plans for $[[- plans.basic.basic_layout_monthly_price ]]/mo +
- + Invite Artists to Collaborate +
- + Prepay a Year and Get Two Months Free +
- + Everything the Small Plan Contains +
- + VValls Branding +
+
+ [[ if (! logged_in) { ]] + Sign Up for [[- plans.basic.name ]] + [[ } else if (! user.plan_level || user.plan_level < plans.basic.level) { ]] + Sign Up for [[- plans.basic.name ]] + [[ } else if (user.plan_level == plans.basic.level) { ]] +
Current Level
+ [[ } ]]
+
+
+
[[- plans.free.name ]]
+
$0 / mo
+
Free forever.
+
+
- + [[- plans.free.stock_project_limit ]] Basic Exhibition +
- + Use Any of our Built-In Floor Plans +
- + Embed Images and Videos in your Room +
- + Custom Color and Wallpaper +
- + Embed Room on Your Website +
- + VValls Branding +
-
-
Want Something Custom?
-
We offer customized white-label options for business and educational uses. -
Contact us for more information. +
+ [[ if (! logged_in) { ]] + Sign Up for Small + [[ } else if (user.plan_level >= plans.basic.level) { ]] +
Current Level
+ [[ } ]]
+

+ +

Want Something Custom?

We offer customized white-label options for business and educational uses. +
+ Contact us for more information. +

diff --git a/views/about/brochure.ejs b/views/about/brochure.ejs index 80cb154..e34d3d3 100644 --- a/views/about/brochure.ejs +++ b/views/about/brochure.ejs @@ -11,99 +11,7 @@

Subscriptions

- - -

-
-
Large
-
$50 / mo
-
Ideal for businesses and ecommerce sites.
-
-
- - 15 Source Accounts / Hashtags -
- - 3 Embeddable Feeds -
- - Pulls In New Posts Every 10 Minutes -
- - Analytics and Analysis Tools -
- - Everything the Medium Plan Contains -
- - No Juicer Branding! -
-
Sign Up for Large
-
-
-
Medium
-
$10 / mo
-
Great for personal sites and small blogs.
-
-
- - 5 Source Accounts / Hashtags -
- - 1 Embeddable Feed -
- - Pulls In New Posts Every Hour -
- - Moderation and Filtering Tools -
- - Everything the Small Plan Contains -
- - No Juicer Branding! -
-
Sign Up for Medium
-
-
-
Small
-
$0 / mo
-
Free forever.
-
-
- - 2 Source Accounts / Hashtags -
- - 1 Embeddable Social Media Feed -
- - Pulls In New Posts Every 24 Hours -
- - All Templates and Custom Styling -
- - HTTPS Secure Connection Support -
- - Juicer Branding -
-
Sign Up for Small
-

- - - - - [[ include _plans ]] + [[ include _plans ]]

[[ include ../partials/confirm-modal ]] -- 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/test') 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 0a6a314dc01df3d8d7f37c6b97293cedeb1aa6a0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:29:55 -0400 Subject: remove segment --- public/assets/test/ortho3.html | 58 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 48 insertions(+), 10 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 7e7e8ec..f56c73f 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -87,6 +87,12 @@ app.off = function(){ app.tube.off.apply(app.tube, arguments) } var EraserTool = MapTool.extend(function(base){ var exports = {} exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } } exports.move = function(e, cursor){ last_point.a = cursor.x.a @@ -98,7 +104,6 @@ var EraserTool = MapTool.extend(function(base){ last_point.b = segment.y 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" @@ -121,6 +126,21 @@ var ShapeList = Fiber.extend(function(base){ this.shapes.splice(index, 1) } } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } exports.findClosestPoint = function (p){ var point for (var i = 0; i < this.shapes.length; i++) { @@ -156,29 +176,42 @@ var ShapeList = Fiber.extend(function(base){ var Polyline = Fiber.extend(function(base){ var exports = {} - exports.init = function(){ this.points = [] this.mx_points = [] this.closed = false } - exports.add = function(p){ this.points.push( p ) this.mx_points.push( new MX.Point(p) ) } - exports.firstPoint = function(){ return this.points[0] } exports.lastPoint = function(){ return this.points[this.points.length-1] } - exports.canCloseWith = function(p){ return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) } - + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } exports.hasPointNear = function(p){ var point for (var i = 0; i < this.points.length; i++){ @@ -199,7 +232,6 @@ var Polyline = Fiber.extend(function(base){ } return null } - exports.hasSegmentNear = function(p, min_dist){ var p1, p2, d1, d2, sum, rat var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity @@ -231,10 +263,10 @@ var Polyline = Fiber.extend(function(base){ x: x, y: y, distance: closest_distance, - index: closest_i, + head: closest_i-1, + tail: closest_i, } } - exports.draw = function(ctx){ var points = this.points if (! points.length) return @@ -280,13 +312,18 @@ var Polyline = Fiber.extend(function(base){ } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) - this.points.length = 0 this.mx_points.length = 0 + this.points.length = 0 } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } return exports }) + var scene, map, controls map = new Map ({ @@ -377,6 +414,7 @@ OrthographicToolbar.add("eraser-mode", function(){ // OrthographicToolbar.pick("ortho-polyline-mode") OrthographicToolbar.pick("eraser-mode") + document.addEventListener('DOMContentLoaded', build) function build () { scene = new MX.Scene().addTo("#perspective") -- cgit v1.2.3-70-g09d2 From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:50:27 -0400 Subject: split out modules --- .../rectangles/engine/map/tools/eraser.js | 27 +++ .../rectangles/engine/shapes/polyline.js | 147 +++++++++++++ .../rectangles/engine/shapes/shapelist.js | 61 ++++++ public/assets/test/ortho3.html | 243 +-------------------- 4 files changed, 238 insertions(+), 240 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js new file mode 100644 index 0000000..648cd11 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -0,0 +1,27 @@ +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js new file mode 100644 index 0000000..7e3c04c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -0,0 +1,147 @@ +var Polyline = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) + } + exports.firstPoint = function(){ + return this.points[0] + } + exports.lastPoint = function(){ + return this.points[this.points.length-1] + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } + exports.hasPointNear = function(p){ + var point + for (var i = 0; i < this.points.length; i++){ + point = this.points[i] + if (point.distanceTo( p ) < 10/map.zoom) { + return point + } + } + return null + } + exports.hasEndPointNear = function(p){ + if (this.closed) return null + if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { + return this.firstPoint() + } + if (this.lastPoint().distanceTo( p ) < 10/map.zoom) { + return this.lastPoint() + } + return null + } + exports.hasSegmentNear = function(p, min_dist){ + var p1, p2, d1, d2, sum, rat + var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity + var closest_i = -1 + var points = this.points + var p1, p2 = points[0] + for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] + d1 = p2.a - p1.a + d2 = p2.b - p1.b + sum = d1*d1 + d2*d2 + rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum + rat = rat < 0 ? 0 : rat < 1 ? rat : 1 + new_x = p1.a + rat * d1 + new_y = p1.b + rat * d2 + dx = new_x - p.a + dy = new_y - p.b + sum2 = sqrt(dx*dx+dy*dy) + if (sum2 < closest_distance) { + x = new_x + y = new_y + closest_distance = sum2 + closest_i = i + } + } + if (closest_i == -1) return null + return { + x: x, + y: y, + distance: closest_distance, + head: closest_i-1, + tail: closest_i, + } + } + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = "rgba(255,255,0,0.1)" + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + ctx.stroke() + if (! map.ui.placing || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + ctx.lineTo(p.a, p.b) + ctx.stroke() + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + exports.build = function(){ + this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx = new MX.Polyline(this) + shapes.add(this) + } + exports.rebuild = function(){ + this.mx.rebuild() + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx_points.length = 0 + this.points.length = 0 + } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js new file mode 100644 index 0000000..00e1a4e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -0,0 +1,61 @@ +var ShapeList = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.shapes = [] + } + exports.add = function(shape){ + this.shapes.push(shape) + } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } + exports.findClosestPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestEndPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasEndPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } + exports.forEach = function(fn){ + this.shapes.forEach(fn) + } + return exports +}) \ No newline at end of file diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f56c73f..ef5732c 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -74,9 +74,12 @@ 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 e61e94f5d2f570f0cba3a3f7d91a18d8db524d79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 10 Aug 2015 20:42:19 -0400 Subject: blueprint upload stuff --- .../javascripts/rectangles/engine/map/_map.js | 2 +- .../javascripts/ui/builder/BlueprintUpload.js | 120 +++++++++++++++++++++ public/assets/stylesheets/app.css | 3 +- public/assets/test/ortho4.html | 43 +++++++- 4 files changed, 162 insertions(+), 6 deletions(-) create mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index bf646bb..e3d7621 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -44,7 +44,7 @@ var Map = function(opt){ var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b - + base.el.appendChild(canvas) switch (opt.type) { diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js new file mode 100644 index 0000000..dbc6f12 --- /dev/null +++ b/public/assets/javascripts/ui/builder/BlueprintUpload.js @@ -0,0 +1,120 @@ + +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": "choose", + "change [name=blueprint-dimensions]": "changeDimensions", + "change [name=blueprint-units]": "changeUnits", + "click #saveBlueprint": "save", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$url = this.$(".url") + + this.$blueprintMap = this.$("#blueprintMap") + this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") + this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$units = this.$("[name=blueprint-units]") + this.$save = this.$("#saveBlueprint") + + this.map = new Map ({ type: ortho }) + + 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) { + data.forEach(this.append.bind(this)) + this.$(".txt").hide() + } + else { + this.$(".txt").show() + } + }, + + append: function(media){ + var $el = $("

") + $el.data("id", media._id) + $el.addClass("blueprint") + this.$blueprints.append($el) + }, + + pick: function(e){ + var $el = $(e.currentTarget) + // load map with it + }, + + destroy: function(_id, cb){ + $.ajax({ + type: "delete", + url: this.destroyAction, + data: { _id: _id, _csrf: $("[name=_csrf]").val() } + }).complete(cb || 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.append(media) + }, + changeDimensions: function(){ + }, + changeUnits: function(){ + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 56c65fe..bb32500 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1597,7 +1597,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } .mediaDrawer.signin, .mediaDrawer.signup, .mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, -.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject { +.mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject, +.mediaDrawer.blueprintUpload { display:table; } .confirm button { diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index b434efb..12b6ab2 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -1,15 +1,19 @@ +

@@ -47,11 +55,38 @@ body {

Upload A Room Image

+ +

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

+ +

+ + + + +

-- cgit v1.2.3-70-g09d2 From 8d749201d661f62766b4e3a84735c3307ff7ab5e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 11 Aug 2015 13:22:02 -0400 Subject: refactor environment loading --- public/assets/javascripts/app.js | 30 +----- public/assets/javascripts/rectangles/_env.js | 34 +++++- public/assets/javascripts/ui/_router.js | 11 ++ .../javascripts/ui/builder/BlueprintUpload.js | 120 --------------------- public/assets/test/ortho4.html | 9 +- views/modal.ejs | 3 +- views/partials/scripts.ejs | 17 ++- 7 files changed, 68 insertions(+), 156 deletions(-) delete mode 100644 public/assets/javascripts/ui/builder/BlueprintUpload.js (limited to 'public/assets/test') diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 6ebcda5..3cafeca 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -21,40 +21,12 @@ app.init = function () { app.launch = function () { if ($.browser.msie || ! has3d()) { return app.fallback() } - scene = new MX.Scene().addTo('#scene') - scene.width = window.innerWidth - scene.height = window.innerHeight - scene.perspective = window.innerHeight - - window.onresize = function () { - scene.width = window.innerWidth - scene.height = window.innerHeight - scene.perspective = window.innerHeight - scene.update() - } - - cam = scene.camera - cam.y = viewHeight - - if (MX.Map) map = app.map = new MX.Map() - - if (is_mobile) { - app.movements = new MX.MobileMovements(cam, viewHeight) - } - else { - app.movements = new MX.Movements(cam, viewHeight) - } - app.movements.init() - var last_t = 0 function animate (t) { var dt = t - last_t last_t = t requestAnimationFrame(animate) - environment.update(t) - window.path && path.update(t) - app.movements.update(dt || 0) - scene.update() + environment.update(t, dt) } var loader = new Loader(function(){ diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js index 14f73e3..b3c7d66 100644 --- a/public/assets/javascripts/rectangles/_env.js +++ b/public/assets/javascripts/rectangles/_env.js @@ -1,6 +1,22 @@ var environment = new function(){} environment.init = function(){ + scene = new MX.Scene().addTo('#scene') + scene.width = window.innerWidth + scene.height = window.innerHeight + scene.perspective = window.innerHeight + + cam = scene.camera + cam.y = viewHeight + + if (is_mobile) { + app.movements = new MX.MobileMovements(cam, viewHeight) + } + else { + app.movements = new MX.Movements(cam, viewHeight) + } + app.movements.init() + map = new Map () if (window.scene) { @@ -16,7 +32,14 @@ environment.init = function(){ scene.camera.radius = 20 } - + + window.onresize = function () { + scene.width = window.innerWidth + scene.height = window.innerHeight + scene.perspective = window.innerHeight + scene.update() + } + Rooms.init() Walls.init() Scenery.init() @@ -52,8 +75,13 @@ environment.init = function(){ } }) } -environment.update = function(t){ +environment.minimal = function(){ + environment.update = function(t){} +} +environment.update = function(t, dt){ + app.movements.update(dt || 0) + scene.update() map.update() - window.minimap && window.minimap.update && minimap.update() + window.minimap && minimap.update && minimap.update() z = false } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 1bdce19..857377c 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -44,6 +44,8 @@ var SiteRouter = Router.extend({ "/project/:name": 'projectViewer', "/project/:name/edit": 'projectEditor', "/project/:name/view": 'projectViewer', + + "/test/blueprint": 'blueprintEditor', }, mobileRoutes: { @@ -157,6 +159,15 @@ var SiteRouter = Router.extend({ this.readerView = app.controller = new ReaderView() this.readerView.load(name) }, + + blueprintEditor: function(e){ + environment.init = environment.minimal + app.launch() + if (app.unsupported) return + + this.blueprintView = app.controller = new BlueprintView () + this.blueprintView.load() + }, signup: function(e){ e && e.preventDefault() diff --git a/public/assets/javascripts/ui/builder/BlueprintUpload.js b/public/assets/javascripts/ui/builder/BlueprintUpload.js deleted file mode 100644 index dbc6f12..0000000 --- a/public/assets/javascripts/ui/builder/BlueprintUpload.js +++ /dev/null @@ -1,120 +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": "choose", - "change [name=blueprint-dimensions]": "changeDimensions", - "change [name=blueprint-units]": "changeUnits", - "click #saveBlueprint": "save", - }, - - initialize: function(opt){ - this.parent = opt.parent - this.__super__.initialize.call(this) - - this.$url = this.$(".url") - - this.$blueprintMap = this.$("#blueprintMap") - this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") - this.$dimensions = this.$("[name=blueprint-dimensions]") - this.$units = this.$("[name=blueprint-units]") - this.$save = this.$("#saveBlueprint") - - this.map = new Map ({ type: ortho }) - - 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) { - data.forEach(this.append.bind(this)) - this.$(".txt").hide() - } - else { - this.$(".txt").show() - } - }, - - append: function(media){ - var $el = $("

") - $el.data("id", media._id) - $el.addClass("blueprint") - this.$blueprints.append($el) - }, - - pick: function(e){ - var $el = $(e.currentTarget) - // load map with it - }, - - destroy: function(_id, cb){ - $.ajax({ - type: "delete", - url: this.destroyAction, - data: { _id: _id, _csrf: $("[name=_csrf]").val() } - }).complete(cb || 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.append(media) - }, - changeDimensions: function(){ - }, - changeUnits: function(){ - }, - -}) diff --git a/public/assets/test/ortho4.html b/public/assets/test/ortho4.html index 12b6ab2..1c1adef 100644 --- a/public/assets/test/ortho4.html +++ b/public/assets/test/ortho4.html @@ -91,14 +91,16 @@ body {

- - + + + + @@ -126,8 +128,10 @@ body { + + + + @@ -79,10 +81,20 @@ + + + + - + + + + + + + @@ -115,6 +127,9 @@ + + + -- 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/test') 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. +

+ +

+ length + + +

- - - - -

-- 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/test') 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 @@

ceiling height - global? -

-- cgit v1.2.3-70-g09d2 From a9bf197a6e8f91cc91d772238168d9be1beb3c4d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 12:15:14 -0400 Subject: makin sure tests work --- .../javascripts/rectangles/engine/map/tools/line.js | 16 +++++++++++++++- .../javascripts/rectangles/engine/map/tools/ortho.js | 2 ++ .../javascripts/rectangles/engine/map/tools/polyline.js | 2 ++ .../javascripts/rectangles/engine/shapes/polyline.js | 1 - .../javascripts/rectangles/engine/shapes/regionlist.js | 2 +- .../javascripts/rectangles/engine/shapes/shapelist.js | 7 ++++++- .../assets/javascripts/ui/blueprint/BlueprintEditor.js | 8 ++++---- .../assets/javascripts/ui/blueprint/BlueprintSettings.js | 1 + public/assets/test/ortho2.html | 9 ++++++++- 9 files changed, 39 insertions(+), 9 deletions(-) (limited to 'public/assets/test') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js index 8f409a8..8fe4fff 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/line.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -1,3 +1,6 @@ +// This tool lets you define a very simple line between two points. +// It is used by the BlueprintScaler to specify a sample distance to scale. + var LineTool = MapTool.extend(function(base){ var exports = {} @@ -8,6 +11,17 @@ var LineTool = MapTool.extend(function(base){ var can_drag, dragging exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + cursor.quantize(1/map.zoom) + app.router.blueprintView.map.center.a = cursor.x.a + app.router.blueprintView.map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + return + } + this.cursor = cursor switch (line.length) { case 0: @@ -44,6 +58,6 @@ var LineTool = MapTool.extend(function(base){ exports.up = function(e, cursor){ can_drag = dragging = false } - + 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 index ef41096..918ac0d 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -14,6 +14,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -35,6 +36,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { else if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js index 1ab86f6..6716180 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -11,6 +11,7 @@ var PolylineTool = MapTool.extend(function (base) { map.ui.placing = false if (shapes.workline.points.length > 2) { shapes.workline.build() + shapes.add(shapes.workline) } else { shapes.workline.reset() @@ -27,6 +28,7 @@ var PolylineTool = MapTool.extend(function (base) { if (shapes.workline.canCloseWith(p)) { shapes.workline.close() shapes.workline.build() + shapes.add(shapes.workline) map.ui.placing = false } else { diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 609a2c8..54e11c6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -133,7 +133,6 @@ var Polyline = Fiber.extend(function(base){ exports.build = function(){ this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) this.mx = new MX.Polyline(this) - shapes.add(this) } exports.rebuild = function(){ this.mx.rebuild() diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 663f3fd..86269a6 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -169,7 +169,7 @@ var RegionList = (function(){ } } - return { rooms: rooms } + return rooms } diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 90714c2..9cbf165 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -85,8 +85,13 @@ var ShapeList = Fiber.extend(function(base){ data && data.forEach(function(points){ var line = new Polyline() line.deserialize(points) - line.build() + shapes.add(line) }.bind(this)) } + exports.build = function(){ + this.shapes.forEach(function(shape){ + shape.build() + }) + } return exports }) \ No newline at end of file diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index a341a24..547cdca 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,7 +5,7 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ - rooms: [], + regions: [], initialize: function(opt){ this.parent = opt.parent @@ -82,7 +82,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() - this.rooms = RegionList.build() + this.regions = RegionList.build() }, animate: function(t, dt){ @@ -118,9 +118,9 @@ 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.rooms.rooms, colors, "#000") + map.draw.regions(this.regions, colors, "#000") -// this.rooms.rooms.forEach(function(room,i){ +// this.regions.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] // map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) // }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 252e3f1..9c8808a 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -35,6 +35,7 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ if (data.shapes) { shapes.destroy() shapes.deserialize( data.shapes ) + shapes.build() } this.data = data }, diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index 448f029..ef77256 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -58,7 +58,9 @@ body { - + + +

Edit Room Colors

+ Leaves and such + + + + + asdf +

Share on–

Embed VValls

- Leaves and such - - - - - asdf -

Share on–

Embed VValls

+ Leaves and such + + + asdf +

[[- plans.free.name ]]

[[- plans.basic.name ]]

[[- plans.pro.name ]]

Want Something Custom?

[[- plans.free.name ]]

[[- plans.basic.name ]]

[[- plans.pro.name ]]

$[[- plans.pro.monthly_price ]] / mo

Ideal for large galleriesand small businesses.

[[- plans.pro.name ]]

[[- plans.basic.name ]]

$[[- plans.basic.monthly_price ]] / mo

Great for small galleriesand art projects.

[[- plans.free.name ]]

$0 / mo

Free forever.

Want Something Custom?

Want Something Custom?

Subscriptions

Large

$50 / mo

Ideal for businesses and ecommerce sites.

Medium

$10 / mo

Great for personal sites and small blogs.

Small

$0 / mo

Free forever.

Upload A Room Image

Upload your Blueprint

+ Leaves and such +
+ +
+ + asdf +

- Leaves and such -
- -
- - asdf -

+ Leaves and such +
+
+ asdf +

Ideal for large galleries
and small businesses.

Great for small galleries
and art projects.