From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- public/assets/javascripts/rectangles/util/mouse.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'public/assets/javascripts/rectangles/util') 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) -- 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/javascripts/rectangles/util') 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 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/javascripts/rectangles/util') 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 3916282fc61cb1143dfc33d79dfc3169293b0969 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 31 Mar 2015 17:30:53 -0400 Subject: rightclick to recenter --- public/assets/javascripts/rectangles/util/coords.js | 2 +- public/assets/test/ortho2.html | 12 +++++++++++- public/assets/test/ortho3.html | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/util/coords.js b/public/assets/javascripts/rectangles/util/coords.js index 74b7fda..ff56199 100644 --- a/public/assets/javascripts/rectangles/util/coords.js +++ b/public/assets/javascripts/rectangles/util/coords.js @@ -30,4 +30,4 @@ function offsetFromPoint(event, element) { return 'left: ' + l + '%, top: ' + t + '%'; } } : null; -} +} \ No newline at end of file diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html index d6f0c5c..2c600f5 100644 --- a/public/assets/test/ortho2.html +++ b/public/assets/test/ortho2.html @@ -50,6 +50,7 @@ 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 06fc629e2be66d79e94a02b169e12bc0918d0881 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 20 Apr 2015 15:45:55 -0400 Subject: shift-drag scupltures up and down; dont drag through floor --- .../assets/javascripts/rectangles/engine/scenery/move.js | 2 +- .../javascripts/rectangles/engine/sculpture/move.js | 16 ++++++++++++---- .../rectangles/engine/sculpture/types/image.js | 2 +- public/assets/javascripts/rectangles/util/constants.js | 3 ++- 4 files changed, 16 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index dd60a61..94c6281 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ base.remove() return } - + // load the modal app.controller.pick(base) diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index f968bcf..4f6d176 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -2,8 +2,9 @@ Sculpture.move = function(base){ var x, y, z, position, dimension, bounds - var dragging = false, moved = false + var dragging = false, shiftPressed = false, moved = false var oldState + var height, width this.bind = function(){ Sculpture.mouse.bind_el(base.mx.el) @@ -39,11 +40,13 @@ Sculpture.move = function(base){ e.clickAccepted = false return } + shiftPressed = e.shiftKey dragging = true moved = false x = base.mx.x y = base.mx.y z = base.mx.z + height = base.mx.height * base.mx.scale bounds = base.bounds dimension = base.dimensions @@ -63,9 +66,14 @@ Sculpture.move = function(base){ // here we need to move the element based on the XY coords, as // base.mx.y = position.b + delta.b + dimension.b / 2 - base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) - base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) - + if (e.shiftKey) { + base.mx.y = clamp( y + delta.b, height/2 + sculpture_distance_from_floor, Infinity ) + } + else { + base.mx.x = x + delta.a * cos(cam.rotationY) - delta.b * sin(cam.rotationY) + base.mx.z = z + delta.a * sin(cam.rotationY) + delta.b * cos(cam.rotationY) + } + if (editor.permissions.resize) { Sculpture.resize.move_dots() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js index 3e5ab08..1a53f5b 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/image.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/image.js @@ -25,7 +25,7 @@ Sculpture.types.image = Sculpture.types.base.extend(function(base){ }) if (opt.position) { - opt.position.y = opt.position.y || this.scale * this.media.height/2 + 3 + opt.position.y = opt.position.y || this.scale * this.media.height/2 + sculpture_distance_from_floor opt.position.rotationY = opt.position.rotationY || scene.camera.rotationY } diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index 3bc314c..a70cacd 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -25,7 +25,8 @@ var height_min = 200, MAP_GRID_SIZE = 360 // 10 feet var painting_distance_from_wall = 10, - dot_distance_from_picture = 3 + dot_distance_from_picture = 3, + sculpture_distance_from_floor = 3 var dot_hide_delay = 50, // ms dot_side = 20 -- cgit v1.2.3-70-g09d2 From 53695472cfb20b730d04b2d6a6a16c6d281e9180 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 27 Apr 2015 20:47:41 -0400 Subject: outline box --- .../rectangles/engine/sculpture/move.js | 1 + .../rectangles/engine/sculpture/resize.js | 3 +- .../rectangles/engine/sculpture/types/_object.js | 52 +++++++++++++++++++--- .../assets/javascripts/rectangles/models/vec3.js | 18 +++++++- .../javascripts/rectangles/util/measurement.js | 4 ++ .../javascripts/ui/editor/SculptureEditor.js | 11 +++++ public/assets/stylesheets/app.css | 7 +++ views/controls/editor/sculpture.ejs | 2 +- 8 files changed, 90 insertions(+), 8 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/sculpture/move.js b/public/assets/javascripts/rectangles/engine/sculpture/move.js index e571c3b..0cbeccd 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/move.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/move.js @@ -83,6 +83,7 @@ Sculpture.move = function(base){ if (editor.permissions.resize) { Sculpture.resize.move_dots() + base.updateOutline() } } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/resize.js b/public/assets/javascripts/rectangles/engine/sculpture/resize.js index 53b8b2d..5f21d66 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/resize.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/resize.js @@ -180,7 +180,8 @@ Sculpture.resize = new function(){ } base.move_dots() - + obj.updateOutline() + app.controller.sculptureEditor.setDimensions() } diff --git a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js index 5dd0aae..2f24ae5 100644 --- a/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/sculpture/types/_object.js @@ -6,7 +6,8 @@ Sculpture.types.base = Fiber.extend(function(base){ this.id = opt.id || Sculpture.uid("sculpture") // this.move = new Sculpture.move (this) this.media = opt.media - this.naturalDimensions = new vec2(this.media.width, this.media.height) + this.naturalDimensions = new vec3(this.media.width, this.media.height, this.media.width) + this.dimensions = new vec3(this.media.width, this.media.height, this.media.width) this.move = new Sculpture.move (this) this.billboard = true @@ -14,7 +15,7 @@ Sculpture.types.base = Fiber.extend(function(base){ this.set_scale( opt.scale || this.media.scale || 1.0 ) this.position = new vec2(0,0) - + this.isSculpture = true }, @@ -25,6 +26,11 @@ Sculpture.types.base = Fiber.extend(function(base){ } this.dimensions = this.naturalDimensions.clone().mul(this.scale) }, + set_depth: function(depth){ + console.log(this.dimensions.c, this.naturalDimensions.c, depth) + this.dimensions.c = depth + this.naturalDimensions.c = depth / this.scale + }, place: function(opt){ if (opt.data) { @@ -45,11 +51,16 @@ Sculpture.types.base = Fiber.extend(function(base){ setOutline: function(val){ this.outline = val - // show/hide outline + if (val && ! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.el.style.display = val ? "block" : "none" }, setOutlineColor: function(val){ this.outlineColor = val - // set outline color + if (this.outlineEl) { + this.outlineColor = this.outlineEl.el.style.borderColor = val + } }, setBillboard: function(val){ this.billboard = val @@ -65,6 +76,32 @@ Sculpture.types.base = Fiber.extend(function(base){ } Sculpture.resize.move_dots() }, + + buildOutline: function(){ + this.outlineEl = new MX.Object3D(".mx-outline") + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + this.outlineEl.scale = this.mx.scale + this.outlineEl.rotationX = -PI/2 + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.el.style.borderColor = this.outlineColor || "#000000" + scene.add(this.outlineEl) + }, + updateOutline: function(){ + if (! this.outline) { return } + if (! this.outlineEl) { + this.buildOutline() + } + this.outlineEl.x = this.mx.x + this.outlineEl.y = sculpture_distance_from_floor + this.outlineEl.z = this.mx.z + this.outlineEl.width = this.naturalDimensions.a + this.outlineEl.height = this.naturalDimensions.c + + this.outlineEl.scale = this.mx.scale + }, remove: function(){ if (this.removed) return @@ -112,7 +149,7 @@ Sculpture.types.base = Fiber.extend(function(base){ media: this.media, billboard: this.billboard, outline: this.outline, - outlineColor: this.outlineColor, + outlineColor: this.outlineColor || "#000000", backface: this.backface, } return data @@ -123,9 +160,14 @@ Sculpture.types.base = Fiber.extend(function(base){ this.mx.ops.width = data.dimensions.a this.mx.ops.height = data.dimensions.b this.billboard = data.billboard + this.outline = data.outline + this.outlineColor = data.outlineColor || "#000000" this.backface = data.backface if (! this.backface) this.mx.el.classList.remove("backface-visible") this.dimensions.deserialize(data.dimensions) + if (this.outline) { + this.buildOutline() + } }, } diff --git a/public/assets/javascripts/rectangles/models/vec3.js b/public/assets/javascripts/rectangles/models/vec3.js index 97329ed..b3825a9 100644 --- a/public/assets/javascripts/rectangles/models/vec3.js +++ b/public/assets/javascripts/rectangles/models/vec3.js @@ -39,5 +39,21 @@ vec3.prototype.serialize = function(){ vec3.prototype.deserialize = function(data){ this.a = data[0] this.b = data[1] - this.c = data[2] + this.c = data[2] || data[0] + return this +} +vec3.prototype.clone = function(){ + return new vec3(this.a, this.b, this.c) +} +vec3.prototype.assign = function(v){ + this.a = v.a + this.b = v.b + this.c = v.c + return this +} +vec3.prototype.mul = function(n) { + this.a *= n + this.b *= n + this.c *= n + return this } \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/util/measurement.js b/public/assets/javascripts/rectangles/util/measurement.js index d6a0b35..6346eac 100644 --- a/public/assets/javascripts/rectangles/util/measurement.js +++ b/public/assets/javascripts/rectangles/util/measurement.js @@ -28,6 +28,10 @@ function measurementToString( n ) { case 'ft': ft = floor(n / 36) inch = abs(round((n % 36) / 3)) + if (inch == 12) { + inch = 0 + ft += 1 + } s = ft + "'" if (inch > 0) { s += " " + inch + '"' diff --git a/public/assets/javascripts/ui/editor/SculptureEditor.js b/public/assets/javascripts/ui/editor/SculptureEditor.js index 52663e1..953260c 100644 --- a/public/assets/javascripts/ui/editor/SculptureEditor.js +++ b/public/assets/javascripts/ui/editor/SculptureEditor.js @@ -17,6 +17,7 @@ var SculptureEditor = FormView.extend({ "change [name=mute]": "setMute", "change [name=width]": 'changeWidth', "change [name=height]": 'changeHeight', + "change [name=depth]": 'changeDepth', "change [name=units]": 'changeUnits', "click [data-role=destroy-sculpture]": "destroy", }, @@ -35,6 +36,7 @@ var SculptureEditor = FormView.extend({ // image fields this.$width = this.$("[name=width]") this.$height = this.$("[name=height]") + this.$depth = this.$("[name=depth]") this.$units = this.$("[name=units]") // video fields @@ -168,17 +170,26 @@ var SculptureEditor = FormView.extend({ if (! this.sculpture) return this.$width.unitVal( Number(this.sculpture.naturalDimensions.a * this.sculpture.scale) || "" ) this.$height.unitVal( Number(this.sculpture.naturalDimensions.b * this.sculpture.scale) || "" ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) this.tainted = true }, changeWidth: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$width.unitVal() / this.sculpture.naturalDimensions.a ) this.setDimensions() + this.sculpture.updateOutline() }, changeHeight: function(e){ e.stopPropagation() this.sculpture.set_scale( this.$height.unitVal() / this.sculpture.naturalDimensions.b ) this.setDimensions() + this.sculpture.updateOutline() + }, + changeDepth: function(e){ + e.stopPropagation() + this.sculpture.set_depth( this.$depth.unitVal() ) + this.$depth.unitVal( Number(this.sculpture.naturalDimensions.c * this.sculpture.scale) || "" ) + this.sculpture.updateOutline() }, changeUnits: function(){ app.units = this.$units.val() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 6e97500..6adb2a0 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1205,6 +1205,13 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } -webkit-box-sizing: content-box; box-sizing: content-box; } +.mx-outline { + border-width: 2px; + border-style: dashed; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} .destroyActive .mx-scene, .destroyActive .mx-object3d.image { cursor:url(/assets/img/delete-cursor.png), auto; } diff --git a/views/controls/editor/sculpture.ejs b/views/controls/editor/sculpture.ejs index 4b8535a..dfe917f 100644 --- a/views/controls/editor/sculpture.ejs +++ b/views/controls/editor/sculpture.ejs @@ -33,7 +33,7 @@
- +
remove object -- cgit v1.2.3-70-g09d2 From ca76295998fb75e9ab9c83ee9a1a694b9e0656c1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 11:23:46 -0400 Subject: making rooms from segments --- .../javascripts/rectangles/engine/map/draw.js | 18 ++++++++- .../rectangles/engine/shapes/regionlist.js | 46 ++++++++++++---------- .../javascripts/rectangles/util/constants.js | 2 +- .../javascripts/ui/blueprint/BlueprintEditor.js | 18 +++++---- 4 files changed, 55 insertions(+), 29 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index cc2f4d8..5824cc8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -189,9 +189,25 @@ Map.Draw = function(map, opt){ var sides = map.sides() var quant = sides.clone().quantize(MAP_GRID_SIZE) for (var x = quant.x.a - MAP_GRID_SIZE; x <= quant.x.b; x += MAP_GRID_SIZE) { - line(x, sides.y.a, x, sides.y.b) + if (Math.round(x) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } + line(x, sides.y.a, x, sides.y.b) } for (var y = quant.y.a - MAP_GRID_SIZE; y <= quant.y.b; y += MAP_GRID_SIZE) { + if (Math.round(y) % 10 == 0) { + ctx.strokeStyle = "rgba(0,0,0,0.3)" + ctx.lineWidth = 1/map.zoom + } + else { + ctx.strokeStyle = "rgba(0,0,0,0.05)" + ctx.lineWidth = 1/map.zoom + } line(sides.x.a, y, sides.x.b, y) } } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 42519cf..acb4ead 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -6,45 +6,51 @@ var RegionList = (function(){ RegionList.build = function(){ var segments = RegionList.getSortedSegments() +// var xx = t % (segments[0].x.a - segments[segments.length-1].x.b) + // loop over them from left to right -// console.log(segments.map(function(s){ return s.toString() }).join("\n")) +// console.log(segments.map(function(s){ return s.toString() }).join("\n")) var rooms = [] var open_segments = [] - var segment, open_segment, y_segments + var segment, open_segment, x_segment, y_segments, overlapped for (var i = 0; i < segments.length; i++) { segment = segments[i] - if (! isVertical(segment)) { + if (! segment.isVertical()) { continue } + overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] if (segment.y.overlaps(open_segment.y)) { // if we have overlap, it means we have made a full room - - y_segments = open_segment.y.split(segment.y) - - if (y_segments.length == 1) { - open_segment.x.b = segment.x.b - rooms.push(open_segment) - } - -// other_side = clone_segment(open_segment) -// other_side[0].a = segment[0].a -// other_side[1].a = segment[1].a -// rooms.push([open_segment, other_side]) - open_segments.splice(j, 1) - j-- + console.log(segment.y+"", "overlaps", open_segment.y+"") + overlapped = true + open_segments.splice(j--, 1) + + x_segment = new vec2( open_segment.x.a, segment.x.b ) + y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + console.log(y_segments.map(function(s){ return s+"" }).join("\n")) + y_segments.forEach(function(seg){ + + rooms.push(new Rect( x_segment, seg[0] )) + + var new_seg = new Rect( segment.x, seg[0] ) + open_segments.shift(new_seg) + j++ + }) } } - open_segments.push(segment) + if (! overlapped) { + open_segments.push(segment) + } } -// console.log(rooms.map(function(s){ return s[0][0].toString() + " " + s[0][1].toString() + " " + s[1][0].toString() + " " + s[1][1].toString() }).join("\n")) +// console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - return rooms + return { rooms: rooms, open_segments: open_segments, segments: segments } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/rectangles/util/constants.js b/public/assets/javascripts/rectangles/util/constants.js index a70cacd..522689b 100644 --- a/public/assets/javascripts/rectangles/util/constants.js +++ b/public/assets/javascripts/rectangles/util/constants.js @@ -22,7 +22,7 @@ var height_min = 200, resize_margin = 8, cursor_amp = 1.5, DEFAULT_PICTURE_WIDTH = 350, - MAP_GRID_SIZE = 360 // 10 feet + MAP_GRID_SIZE = 36 // 10 feet var painting_distance_from_wall = 10, dot_distance_from_picture = 3, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 18ecf5f..7ec1352 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -5,6 +5,8 @@ var last_point = new vec2 (0,0) var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ + rooms: [], + initialize: function(opt){ this.parent = opt.parent @@ -81,6 +83,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ scale: media.scale, }) this.startAnimating() + this.rooms = RegionList.build() }, animate: function(t, dt){ @@ -93,7 +96,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.ctx.save() map.draw.translate() - this.floorplan.draw(map.draw.ctx, true) + // this.floorplan.draw(map.draw.ctx, true) map.draw.coords() @@ -113,13 +116,14 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - var rooms = RegionList.build() - rooms.forEach(function(room,i){ + this.rooms.segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#f00" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+1, seg.height()+1 ) + }) + + this.rooms.rooms.forEach(function(room,i){ map.draw.ctx.fillStyle = colors[i % colors.length] - map.draw.ctx.fillRect( room[0][0].a, room[0][1].b, - room[1][0].a - room[0][0].a, - room[0][0].b - room[0][1].b - ) + map.draw.ctx.fillRect( room.x.a, room.y.a, room.width(), room.height() ) }) map.draw.ctx.restore() -- cgit v1.2.3-70-g09d2 From 7f443264d1c30b48cc3923ee6e700facdf0f7214 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 16:32:37 -0400 Subject: fix resize issues --- .../javascripts/rectangles/engine/map/_map.js | 29 +++++++++++++--------- public/assets/javascripts/rectangles/util/mouse.js | 15 ++++++++++- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/stylesheets/app.css | 2 ++ views/home.ejs | 1 + 5 files changed, 35 insertions(+), 14 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 6492db6..ba3ec92 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -41,12 +41,28 @@ var Map = function(opt){ } base.set_zoom(opt.zoom) + base.resize = function(w, h){ + if (w && h) { + canvas.width = base.dimensions.a = w + canvas.height = base.dimensions.b = h + } + else { + // resize here - esp if 2d-hires + canvas.width = base.dimensions.a = base.el.parentNode.offsetWidth + canvas.height = base.dimensions.b = base.el.parentNode.offsetHeight + } + } + + base.toggle = function(state){ + return $(base.el).toggle(state).is(':visible') + } + var canvas = base.canvas = document.createElement("canvas") canvas.width = base.dimensions.a canvas.height = base.dimensions.b base.el.appendChild(canvas) - + switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) @@ -71,17 +87,6 @@ var Map = function(opt){ base.sides = base.sides_for_camera break } - - base.resize = function(w, h){ - canvas.width = base.dimensions.a = w || window.innerWidth - canvas.height = base.dimensions.b = h || window.innerHeight - // resize here - esp if 2d-hires - } - - base.toggle = function(state){ - return $(base.el).toggle(state).is(':visible') - } - } Map.prototype.update = function(){ diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index 2b98cee..6d9862c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -54,10 +54,20 @@ function mouse (opt) { opt.up && base.tube.on("up", opt.up) opt.rightclick && base.tube.on("rightclick", opt.rightclick) - var offset = (opt.use_offset && opt.el) ? opt.el.getBoundingClientRect() : null + var offset; base.init = function (){ base.bind() + base.set_offset() + } + + base.set_offset = function(){ + if (opt.use_offset && opt.el) { + offset = opt.el.getBoundingClientRect() + } + else { + offset = null + } } base.on = function(){ @@ -73,6 +83,9 @@ function mouse (opt) { opt.el.addEventListener("mousedown", base.mousedown) opt.el.addEventListener("contextmenu", base.contextmenu) } + if (opt.use_offset) { + window.addEventListener("resize", base.set_offset) + } window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index d8cfca6..5aa88e9 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -41,7 +41,7 @@ var EditorSettings = FormView.extend({ this.action = data.isNew ? this.createAction : this.updateAction this.parent.data = data - if (data.shapes.length) { + if (data.shapes && data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 1154fde..fdf7c12 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1331,6 +1331,8 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } #hud { position: fixed; top:0;left:0; + width: 100%; + height: 100%; z-index: 2; } #palette { diff --git a/views/home.ejs b/views/home.ejs index af43f0b..36dad83 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -60,6 +60,7 @@

Sign Up

+ Read Tutorial

Room Showcase

-- cgit v1.2.3-70-g09d2 From dcd316eda560e87c326a64c2ff05e0f74e02227a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 10 Jun 2016 17:32:05 -0400 Subject: some light QA --- public/assets/javascripts/rectangles/engine/map/ui/editor.js | 8 ++++---- public/assets/javascripts/rectangles/util/minotaur.js | 6 ++---- public/assets/javascripts/ui/builder/BuilderSettings.js | 2 +- public/assets/javascripts/ui/builder/BuilderToolbar.js | 3 +++ public/assets/javascripts/ui/lib/FormView.js | 7 +++++-- public/assets/stylesheets/app.css | 6 ++++++ views/home.ejs | 12 ++++++------ 7 files changed, 27 insertions(+), 17 deletions(-) (limited to 'public/assets/javascripts/rectangles/util') diff --git a/public/assets/javascripts/rectangles/engine/map/ui/editor.js b/public/assets/javascripts/rectangles/engine/map/ui/editor.js index 7308344..699597a 100644 --- a/public/assets/javascripts/rectangles/engine/map/ui/editor.js +++ b/public/assets/javascripts/rectangles/engine/map/ui/editor.js @@ -73,7 +73,7 @@ Map.UI.Editor = function(map){ app.tube("builder-destroy-room", room) // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) return } else if (intersects.length) { @@ -205,13 +205,13 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || 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) { + if (! base.dragging && ! intersects.length) { app.tube("builder-pick-nothing") } @@ -247,7 +247,7 @@ Map.UI.Editor = function(map){ Rooms.rebuild() // TODO: watch individual scenery object here - Minotaur.watch( app.router.editorView.settings ) + Minotaur.watch( (app.router.builderView || app.router.editorView).settings ) wheelState = null }, 250) diff --git a/public/assets/javascripts/rectangles/util/minotaur.js b/public/assets/javascripts/rectangles/util/minotaur.js index d165ccc..8b1abfe 100644 --- a/public/assets/javascripts/rectangles/util/minotaur.js +++ b/public/assets/javascripts/rectangles/util/minotaur.js @@ -38,7 +38,7 @@ for (var id in base.objects[type]) { var obj = base.objects[type][id] if (obj) { - obj.save(null, function(){ base.hide() }, function(){}) + obj.save(null, function(){ base.hide() }, function(){ base.hide() }) } delete base.objects[type][id] saving = true @@ -53,9 +53,7 @@ } base.hide = function () { - setTimeout(function(){ - base.$el.removeClass() - }, 500) + base.$el.removeClass('saving') } base.init(); diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index c8c8880..256bffe 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -52,7 +52,7 @@ var BuilderSettings = FormView.extend({ this.$name.val( names.join(" ") ) this.action = this.createAction - window.history.pushState(null, document.title, "/builder/new") + window.history.pushState(null, document.title, "/layout/new") }, clear: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderToolbar.js b/public/assets/javascripts/ui/builder/BuilderToolbar.js index 6c218be..e9dcce3 100644 --- a/public/assets/javascripts/ui/builder/BuilderToolbar.js +++ b/public/assets/javascripts/ui/builder/BuilderToolbar.js @@ -60,6 +60,9 @@ var BuilderToolbar = View.extend({ var state = map.ui.permissions.toggle("destroy") $(".inuse").removeClass("inuse") $(e.currentTarget).toggleClass("inuse", state) + if (! state) { + this.resetPermissions() + } }, }) diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 33effc8..a952ecb 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -69,7 +69,9 @@ var FormView = View.extend({ var errors = this.validate() if (errors && errors.length) { if (errorCallback) { - errorCallback(errors) + setTimeout(function(){ + errorCallback(errors) + }) } else { this.showErrors(errors) @@ -77,7 +79,6 @@ var FormView = View.extend({ return } } - var action = typeof this.action == "function" ? this.action() : this.action if (! action) return @@ -112,7 +113,9 @@ var FormView = View.extend({ return } else { + console.log("ok") if (successCallback) { + console.log("use cb") successCallback(response) } if (this.success) { diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index fdf7c12..7dda058 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -421,6 +421,10 @@ h5 { float: right; } +.projectList.about.makeAccountSingleton a { + margin: 0 20%; +} + .page .showcase { height:70vh; } @@ -3066,6 +3070,8 @@ a[data-role="forgot-password"] { font-size: 13px; margin: 5px 0 0 0; } + + .share { display:inline-block; width:100%; diff --git a/views/home.ejs b/views/home.ejs index 36dad83..e3303ed 100755 --- a/views/home.ejs +++ b/views/home.ejs @@ -57,15 +57,15 @@ Read Tutorial
-

Sign Up

- -
- Read Tutorial -
-

Room Showcase

[[ include projects/list-projects ]] + + [[ if (! logged_in) { ]] +
+ Make an Account +
+ [[ } ]] [[ include partials/confirm-modal ]] [[ include projects/layouts-modal ]] -- cgit v1.2.3-70-g09d2