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/shapes/polyline.js | 147 +++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') 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 +}) -- cgit v1.2.3-70-g09d2 From 40fa450839a171cbfa1d9c8470d25eeeba337a27 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 20:05:56 -0400 Subject: serialize/deserialize polyline --- .../assets/javascripts/rectangles/engine/shapes/polyline.js | 10 ++++++++-- .../assets/javascripts/rectangles/engine/shapes/shapelist.js | 11 +++++++++++ 2 files changed, 19 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 7e3c04c..e853592 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,9 +1,12 @@ var Polyline = Fiber.extend(function(base){ var exports = {} - exports.init = function(){ - this.points = [] + exports.init = function(points){ + this.points = points this.mx_points = [] this.closed = false + if (points) { + this.build() + } } exports.add = function(p){ this.points.push( p ) @@ -134,6 +137,9 @@ var Polyline = Fiber.extend(function(base){ exports.rebuild = function(){ this.mx.rebuild() } + exports.serialize = function(){ + return this.points + } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) this.mx_points.length = 0 diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index e86c5d6..c3b5758 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -64,5 +64,16 @@ var ShapeList = Fiber.extend(function(base){ exports.forEach = function(fn){ this.shapes.forEach(fn) } + exports.serialize = function(){ + return this.shapes.map(function(shape){ + return shape.serialize() + }) + } + exports.deserialize = function(data){ + data.forEach(function(points){ + var line = new Polyline(points) + this.add(line) + }.bind(this)) + } return exports }) \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d9ecfddd7ba63d3cf94b29053476d1d11118d38e Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 18 Aug 2015 21:25:28 -0400 Subject: saving blueprints --- .../javascripts/rectangles/engine/shapes/polyline.js | 12 ++++++------ .../rectangles/engine/shapes/shapelist.js | 7 ++++--- .../javascripts/ui/blueprint/BlueprintSettings.js | 7 +++++-- .../javascripts/ui/blueprint/BlueprintToolbar.js | 5 +++++ .../javascripts/ui/blueprint/BlueprintUploader.js | 16 ++++++++++++++-- .../assets/javascripts/ui/blueprint/BlueprintView.js | 14 +++++--------- server/index.js | 1 + server/lib/api/blueprint.js | 20 ++++++++++++++++++++ server/lib/schemas/Blueprint.js | 11 ++++++++++- 9 files changed, 70 insertions(+), 23 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index e853592..3c4e9c3 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,12 +1,9 @@ var Polyline = Fiber.extend(function(base){ var exports = {} - exports.init = function(points){ - this.points = points + exports.init = function(){ + this.points = [] this.mx_points = [] this.closed = false - if (points) { - this.build() - } } exports.add = function(p){ this.points.push( p ) @@ -138,7 +135,10 @@ var Polyline = Fiber.extend(function(base){ this.mx.rebuild() } exports.serialize = function(){ - return this.points + return this.points.map(function(point){ return [point.a, point.b] }) + } + exports.deserialize = function(points){ + this.points = points.map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ this.mx_points.forEach(function(mx){ scene.remove(mx) }) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index d8a03b2..1b8acfd 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -73,9 +73,10 @@ var ShapeList = Fiber.extend(function(base){ }) } exports.deserialize = function(data){ - data.forEach(function(points){ - var line = new Polyline(points) - this.add(line) + data && data.forEach(function(points){ + var line = new Polyline() + line.deserialize(points) + line.build() }.bind(this)) } return exports diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index f9c9e78..acd8dcc 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -26,6 +26,10 @@ var BlueprintSettings = FormView.extend({ load: function(data){ this.$id.val(data._id) this.$name.val(data.name) + if (data.shapes) { + shapes.destroy() + shapes.deserialize( data.shapes ) + } this.data = data }, @@ -88,7 +92,6 @@ var BlueprintSettings = FormView.extend({ fd.append( "name", this.$name.val() ) fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) fd.append( "startPosition", JSON.stringify( app.position(scene.camera) ) ) - fd.append( "thumbnail", this.data.url ) return fd }, @@ -105,7 +108,7 @@ var BlueprintSettings = FormView.extend({ Minotaur.unwatch(this) Minotaur.hide() - window.history.pushState(null, document.title, "/layout/" + data.slug) + window.history.pushState(null, document.title, "/blueprint/" + data.slug) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 5f313fd..e22535e 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -9,6 +9,7 @@ var BlueprintToolbar = View.extend({ "click [data-role=polyline-mode]": 'polylineMode', "click [data-role=ortho-polyline-mode]": 'orthoPolylineMode', "click [data-role=eraser-mode]": 'eraserMode', + "click [data-role=toggle-layout-settings]": 'toggleSettings', }, initialize: function(opt){ @@ -49,6 +50,10 @@ var BlueprintToolbar = View.extend({ } }, + toggleSettings: function(){ + this.parent.settings.toggle() + }, + setActiveMode: function( $el ) { this.$modes.removeClass('active') $el.addClass('active') diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index 6d13817..c7138e9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -26,7 +26,9 @@ var BlueprintUploader = UploadView.extend({ }, loaded: false, - load: function(){ + nameToShow: null, + load: function(name){ + this.nameToShow = name || "" $.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this)) }, @@ -36,7 +38,17 @@ var BlueprintUploader = UploadView.extend({ this.$blueprints.show() data.forEach(this.append.bind(this)) this.hide() - this.parent.scaler.pick(data[0]) + if (this.nameToShow) { + data.some(function(el){ + if (el.slug == this.nameToShow) { + this.parent.scaler.pick(el) + return true + } + }.bind(this)) + } + else { + this.parent.scaler.pick(data[0]) + } } else { this.parent.scaler.hideClose() diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index 8330154..e1d360f 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -2,7 +2,7 @@ var BlueprintView = View.extend({ el: "#blueprintView", - action: "/api/blueprint/", + action: "/api/blueprint/show/", events: { }, @@ -20,14 +20,10 @@ var BlueprintView = View.extend({ }, load: function(name){ - if (! name || name == "new") { - this.uploader.load() - return - } - - name = sanitize(name) - - $.get(this.action + name, this.ready.bind(this)) + name = sanitize(name) || "new" + this.uploader.load(name) +// name = sanitize(name) +// $.get(this.action + name, this.ready.bind(this)) }, orbiting: true, diff --git a/server/index.js b/server/index.js index 421a6a7..7143da2 100644 --- a/server/index.js +++ b/server/index.js @@ -165,6 +165,7 @@ site.route = function () { app.post('/api/blueprint/upload', middleware.ensureAuthenticated, api.blueprint.upload) app.get('/api/blueprint/user', middleware.ensureAuthenticated, api.blueprint.user) app.post('/api/blueprint/scale', middleware.ensureAuthenticated, api.blueprint.scale) + app.post('/api/blueprint/edit', middleware.ensureAuthenticated, api.blueprint.update) app.delete('/api/blueprint/destroy', middleware.ensureAuthenticated, api.blueprint.destroy) app.get('/api/subscription', middleware.ensureAuthenticated, api.subscription.middleware.ensurePlans, api.subscription.middleware.ensureSubscription, api.subscription.show) diff --git a/server/lib/api/blueprint.js b/server/lib/api/blueprint.js index 7319055..e581d8f 100644 --- a/server/lib/api/blueprint.js +++ b/server/lib/api/blueprint.js @@ -81,6 +81,26 @@ var blueprint = { }) }) }, + + update: function(req, res){ + var _id = req.body._id + var data = util.cleanQuery(req.body) + if (! _id) { return res.json({ error: 404 }) } + Blueprint.findOne({ _id: _id }, function(err, doc){ + if (! doc) { return res.json({ error: 404 }) } + if (String(doc.user_id) !== String(req.user._id)) { return res.json({ error: 404 }) } + + doc.name = util.sanitize(data.name) + doc.slug = util.slugify(data.name) + doc.shapes = JSON.parse(data.shapes) + doc.startPosition = JSON.parse(data.startPosition) + + doc.save(function(err, rec){ + if (err || ! rec) { return res.json({ error: err }) } + res.json(rec) + }) + }) + }, destroy: function(req, res){ var _id = util.sanitize(req.body._id) diff --git a/server/lib/schemas/Blueprint.js b/server/lib/schemas/Blueprint.js index 78a388f..666f0cf 100644 --- a/server/lib/schemas/Blueprint.js +++ b/server/lib/schemas/Blueprint.js @@ -33,6 +33,15 @@ var BlueprintSchema = new mongoose.Schema({ type: String, default: "" }, + slug: { + type: String, + required: true, + validate: [function (val){ + val = util.sanitize(val || this.displayName || "") + if (! val.length) return false + return true + },"{PATH} name is required"] + }, description: { type: String, default: "" @@ -45,7 +54,7 @@ var BlueprintSchema = new mongoose.Schema({ units: { type: String }, line: { type: String }, - rooms: [mongoose.Schema.Types.Mixed], + shapes: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, user_id: { type: mongoose.Schema.ObjectId, index: true }, -- cgit v1.2.3-70-g09d2 From a4a001668f9f05272a4fbc28567b259ee45ada97 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 20 Aug 2015 13:21:44 -0400 Subject: RegionList --- .../rectangles/engine/shapes/polyline.js | 10 ++++++ .../rectangles/engine/shapes/regionlist.js | 37 ++++++++++++++++++++++ .../rectangles/engine/shapes/shapelist.js | 7 ++++ views/controls/blueprint/toolbar.ejs | 4 --- views/partials/scripts.ejs | 3 +- 5 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/shapes/regionlist.js (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 3c4e9c3..99c8fda 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -134,6 +134,16 @@ var Polyline = Fiber.extend(function(base){ exports.rebuild = function(){ this.mx.rebuild() } + exports.getSegments = function(){ + if (this.points.length == 1) { + return [] + } + var segments = [] + for (var i = 1; i < this.points.length; i++) { + segments.push( [ this.points[i-1], this.points[i] ] ) + } + return segments + } exports.serialize = function(){ return this.points.map(function(point){ return [point.a, point.b] }) } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js new file mode 100644 index 0000000..1f2810f --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -0,0 +1,37 @@ +var RegionList = (function(){ + + var RegionList = {} + var regions = RegionList.regions + + RegionList.init = function(){ + } + + RegionList.build = function(){ + var segments = shapes.getAllSegments() + segments.forEach(function(segment){ + if (segment[0][0] == segment[1][0]) { + if (segment[0][1] > segment[1][1]) { + segment.push(segment.shift()) + } + } + else if (segment[0][1] == segment[1][1]) { + if (segment[0][0] > segment[1][0]) { + segment.push(segment.shift()) + } + } + }) + segments = segments.sort(function(a,b){ + return a[0][0] < b[0][0] + }) + + console.log(segments) + + // get a list of all segments from these polylines + // re-orientate them so they're either facing up or right + // loop over them from left to right + // + } + + return RegionList + +})() \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 1b8acfd..4373caf 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -67,6 +67,13 @@ var ShapeList = Fiber.extend(function(base){ exports.forEach = function(fn){ this.shapes.forEach(fn) } + exports.getAllSegments = function(){ + var segments = [] + this.shapes.forEach(function(shape){ + segments = segments.concat( shape.getSegments() ) + }) + return segments + } exports.serialize = function(){ return this.shapes.map(function(shape){ return shape.serialize() diff --git a/views/controls/blueprint/toolbar.ejs b/views/controls/blueprint/toolbar.ejs index 15c5a28..ee9594e 100644 --- a/views/controls/blueprint/toolbar.ejs +++ b/views/controls/blueprint/toolbar.ejs @@ -35,7 +35,3 @@ data-info="save blueprint" class="ion-ios-compose-outline"> - diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 8a69888..bc8dacb 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -85,8 +85,9 @@ - + + -- cgit v1.2.3-70-g09d2 From 62c899384b0cf4aab6288f662e12f11321de95df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 21 Aug 2015 12:55:44 -0400 Subject: getting full coverage with rooms --- .../assets/javascripts/rectangles/engine/shapes/polyline.js | 2 +- .../javascripts/rectangles/engine/shapes/regionlist.js | 12 +++++++----- public/assets/javascripts/ui/blueprint/BlueprintEditor.js | 11 ++++++++--- 3 files changed, 16 insertions(+), 9 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 99c8fda..6c64128 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -47,7 +47,7 @@ var Polyline = Fiber.extend(function(base){ return null } exports.hasEndPointNear = function(p){ - if (this.closed) return null + if (this.closed || ! this.points.length) return null if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { return this.firstPoint() } diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index acb4ead..f86968f 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -13,6 +13,7 @@ var RegionList = (function(){ var rooms = [] var open_segments = [] + var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped @@ -21,6 +22,7 @@ var RegionList = (function(){ if (! segment.isVertical()) { continue } + console.log(segment+"") overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] @@ -28,17 +30,17 @@ var RegionList = (function(){ // if we have overlap, it means we have made a full room console.log(segment.y+"", "overlaps", open_segment.y+"") overlapped = true + closed_segments.push(open_segments[j]) 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) + y_segments = open_segment.y.split(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) + open_segments.unshift(new_seg) j++ }) } @@ -49,8 +51,8 @@ var RegionList = (function(){ } // console.log(rooms.map(function(s){ return s.toString() }).join("\n")) - - return { rooms: rooms, open_segments: open_segments, segments: segments } + console.log({ rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments }) + return { rooms: rooms, open_segments: open_segments, segments: segments, closed_segments: closed_segments } } RegionList.getSortedSegments = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 7ec1352..cf9dea6 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -116,9 +116,14 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ map.draw.mouse(map.ui.mouse.cursor) map.draw.camera(scene.camera) - 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.open_segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#00f" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) + }) + + this.rooms.closed_segments.forEach(function(seg,i){ + map.draw.ctx.fillStyle = "#0ff" + map.draw.ctx.fillRect( seg.x.a, seg.y.a, seg.width()+10, seg.height() ) }) this.rooms.rooms.forEach(function(room,i){ -- cgit v1.2.3-70-g09d2 From 48fc9b27a77126da649959c8f74ad8faffcd6e2c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 25 Aug 2015 11:15:50 -0400 Subject: comment the regionlist algorithm --- .../javascripts/rectangles/engine/map/_map.js | 6 +- .../javascripts/rectangles/engine/rooms/builder.js | 1 + .../rectangles/engine/shapes/polyline.js | 4 ++ .../rectangles/engine/shapes/regionlist.js | 83 ++++++++++++++++------ .../rectangles/engine/shapes/shapelist.js | 2 + .../assets/javascripts/rectangles/models/vec2.js | 4 +- .../assets/javascripts/rectangles/models/wall.js | 5 ++ .../javascripts/ui/blueprint/BlueprintEditor.js | 5 +- 8 files changed, 79 insertions(+), 31 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index 2aee962..e27346d 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -69,9 +69,9 @@ var Map = function(opt){ break } - base.resize = function(){ - canvas.width = base.dimensions.a = window.innerWidth - canvas.height = base.dimensions.b = window.innerHeight + 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 } diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js index 5e09fab..f78fb91 100644 --- a/public/assets/javascripts/rectangles/engine/rooms/builder.js +++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js @@ -14,6 +14,7 @@ PI = Math.PI HALF_PI = PI/2 TOP = CEILING, BOTTOM = FLOOR + $ = { browser: { mozilla: false } } function sidesToString(sides){ var s = "" if (sides & FRONT) s += "front " diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 6c64128..609a2c8 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -1,3 +1,7 @@ +// A Polyline is a set of points inputted by the user using the V2 editor to trace a blueprint. +// Additionally, it manages a set of MX objects which correspond to the walls in 3D. +// In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 71f19d8..663f3fd 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -1,36 +1,58 @@ +// This algorithm takes the polylines from ShapeList as input and produces +// a set of Rooms which can be used by the existing V1 mover and editor. + +// The algorithm assumes that +// 1) all angles are orthogonal +// 2) all polylines are closed + var RegionList = (function(){ var RegionList = {} var regions = RegionList.regions RegionList.build = function(){ + + // first, get the segments sorted right to left & top to bottom var segments = RegionList.getSortedSegments() var rooms = [] var seen_rooms = {} var open_segments = [] - var closed_segments = [] var segment, open_segment, x_segment, y_segments, overlapped, seen_segments + // first pass: generate rooms from the vertical segments only for (var i = 0; i < segments.length; i++) { segment = segments[i] if (! segment.isVertical()) { continue } + + // check all the "open segments" we know about, i.e. rooms where we've only found + // the right wall. overlapped = false for (var j = 0; j < open_segments.length; j++) { open_segment = open_segments[j] + + // if these two segments overlap each other, then there is a room between them. if (segment.y.overlaps(open_segment.y)) { overlapped = true - closed_segments.push(open_segments[j]) open_segments.splice(j--, 1) + // the X part of the room will be the span between these two vertical segments' + // X components. the Y part of the room is the "split" or subdivision between + // the two horizontal vectors. + + // the split function is non-commutative, + // so we need to call A split B and B split A, + // then dedupe the segments we got back.. x_segment = new vec2( open_segment.x.a, segment.x.b ) y_segments = open_segment.y.split(segment.y, 0, 0) seen_segments = {} + // check each of the splits.. if the two segments overlap, then we definitely + // have a room here. y_segments.forEach(function(seg){ seen_segments[ seg[0]+"" ] = true var room = new Rect( x_segment, seg[0] ) @@ -46,7 +68,8 @@ var RegionList = (function(){ j++ }) - y_segments = segment.y.split(open_segment.y, TOP, BOTTOM) + // splitting the other way.. + y_segments = segment.y.split(open_segment.y, 0, 0) y_segments.forEach(function(seg){ if (seen_segments[ seg[0]+"" ]) return; var new_seg = new Rect( segment.x, seg[0] ) @@ -55,6 +78,9 @@ var RegionList = (function(){ }) } } + + // if we have overlap, then re-sort the open segments Y-wise + // and (again) dedupe.. if (overlapped) { open_segments = open_segments.sort(function(a,b){ if (a.y.a < b.y.a) { return -1 } @@ -74,6 +100,7 @@ var RegionList = (function(){ } } } + // if we don't have any overlap, then this is a new open segment. else { open_segments.push(segment) } @@ -81,11 +108,15 @@ var RegionList = (function(){ var splits, splitter + // second pass: now that we have a bunch of rooms, assign sides to all of them. + // sides are used in the "mover" script to do bounds checking. for (var i = 0; i < segments.length; i++) { segment = segments[i] var horizontal = segment.isHorizontal(), vertical = segment.isVertical() for (var r = 0; r < rooms.length; r++){ room = rooms[r] + + // vertical segments determine the left and right edges of the room, fairly simply. if (vertical) { if (segment.y.containsVec(room.y)) { if (segment.x.a == room.x.a) { @@ -96,6 +127,8 @@ var RegionList = (function(){ } } } + + // horizontal segments determine the front and back edges of the room. if (horizontal) { if (segment.x.containsVec(room.x)) { if (segment.y.a == room.y.a) { @@ -105,28 +138,30 @@ var RegionList = (function(){ room.sides |= BACK } } - - else if (segment.y.a == room.y.a || segment.y.a == room.y.b) { - if (room.x.overlaps(segment.x)) { - splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) - rooms.splice(r--, 1) - console.log(splits) - for (var k = 0; k < splits.length; k++) { - splitter = splits[k] - var new_room = new Rect( splitter[0], room.y ) - new_room.sides = 0 - new_room.sides |= splitter[1] | ( room.sides & FRONT_BACK ) - if (segment.x.overlaps( splitter[0] )) { - if (segment.y.a == new_room.y.a) { - new_room.sides |= FRONT - } - if (segment.y.a == new_room.y.b) { - new_room.sides |= BACK - } + + // however, since we did not split on horizontal segments, our rooms may + // only have partial overlap with these segments, in which case we need to + // split the rooms apart. + else if ((segment.y.a == room.y.a || segment.y.a == room.y.b) && room.x.overlaps(segment.x)) { + + // split the room across the segment. preserve whether or not we know the + // room borders a segment on the left or right. + splits = room.x.split(segment.x, room.sides & LEFT, room.sides & RIGHT) + rooms.splice(r--, 1) + for (var k = 0; k < splits.length; k++) { + splitter = splits[k] + var new_room = new Rect( splitter[0], room.y ) + new_room.sides = splitter[1] | ( room.sides & FRONT_BACK ) + if (segment.x.overlaps( splitter[0] )) { + if (segment.y.a == new_room.y.a) { + new_room.sides |= FRONT + } + if (segment.y.a == new_room.y.b) { + new_room.sides |= BACK } - rooms.unshift(new_room) - r++ } + rooms.unshift(new_room) + r++ } } @@ -137,6 +172,8 @@ var RegionList = (function(){ return { rooms: rooms } } + + // Gets a list of polylines from the ShapeList and sorts the segments. RegionList.getSortedSegments = function(){ // get a list of all segments from these polylines var segments = shapes.getAllSegments() diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 4373caf..90714c2 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,3 +1,5 @@ +// The ShapeList manages the list of polylines which form a V2 layout. + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ diff --git a/public/assets/javascripts/rectangles/models/vec2.js b/public/assets/javascripts/rectangles/models/vec2.js index 226e56f..8942d92 100644 --- a/public/assets/javascripts/rectangles/models/vec2.js +++ b/public/assets/javascripts/rectangles/models/vec2.js @@ -214,13 +214,13 @@ } vec2.prototype.toString = function(){ - return "[" + round(this.a) + " " + round(this.b) + "]" + return "[" + Math.round(this.a) + " " + Math.round(this.b) + "]" } vec2.prototype.exactString = function(){ return "[" + this.a + " " + this.b + "]" } vec2.prototype.serialize = function(){ - return [ round(this.a), round(this.b) ] + return [ Math.round(this.a), Math.round(this.b) ] } vec2.prototype.deserialize = function(data){ this.a = data[0] diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index 13f5cd7..9d4650b 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -10,6 +10,11 @@ vec2 = require('./vec2') Rect = require('./rect') UidGenerator = require('../util/uid') + wall_rotation = {} + wall_rotation[FRONT] = PI + wall_rotation[BACK] = 0 + wall_rotation[LEFT] = HALF_PI + wall_rotation[RIGHT] = -HALF_PI } var Wall = function(opt){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js index 39cf62e..a341a24 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintEditor.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintEditor.js @@ -62,8 +62,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ if (this.parent.orbiting) { scene.width = window.innerWidth/2 scene.height = window.innerHeight - this.parent.map.canvas.width = this.parent.map.dimensions.a = window.innerWidth/2 - this.parent.map.canvas.height = this.parent.map.dimensions.b = window.innerHeight + this.parent.map.resize( window.innerWidth/2, window.innerHeight ) this.parent.map.canvas.style.display = "block" } else { @@ -119,7 +118,7 @@ var BlueprintEditor = View.extend(AnimatedView.prototype).extend({ // var colors = ["rgba(0,0,0,0.1)"] // var colors = ["rgba(255,255,255,1)"] // -// map.draw.regions(this.rooms.rooms, colors, "#000") + map.draw.regions(this.rooms.rooms, colors, "#000") // this.rooms.rooms.forEach(function(room,i){ // map.draw.ctx.fillStyle = colors[i % colors.length] -- 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/javascripts/rectangles/engine/shapes/polyline.js') 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 { - + + + + diff --git a/views/profile.ejs b/views/profile.ejs index 63a07f5..d3ae10e 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -78,7 +78,9 @@ [[ } ]] + [[ include partials/edit-profile ]] [[ include projects/layouts-modal ]] [[ include projects/edit-project ]] -- cgit v1.2.3-70-g09d2 From 464bd3bfe74695955239e176dce8fe885bba8ac3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 12:44:17 -0400 Subject: arrow tool can translate walls orthogonally --- .../rectangles/engine/map/tools/arrow.js | 47 +++++++++++++++++++--- .../javascripts/rectangles/engine/shapes/ortho.js | 16 ++++++++ .../rectangles/engine/shapes/polyline.js | 28 +++++++++++++ .../javascripts/ui/blueprint/BlueprintToolbar.js | 2 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 3 ++ 5 files changed, 89 insertions(+), 7 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js index 00478d4..0b0557e 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -3,16 +3,33 @@ var ArrowTool = MapTool.extend(function(base){ var exports = {} - var selected_point = null, original_point = null, selected_shape = null + var selected_point = null, selected_segment = null, original_point = null, selected_shape = null + var src_points, dest_points 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) { + if (p && p.shape.type() !== "ortho") { selected_shape = p.shape selected_point = p.point original_point = selected_point.clone() + return + } + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + + selected_segment = segment + console.log(segment.head, segment.tail) + selected_shape = segment.shape + src_points = segment.shape.cloneSegment( segment ) + dest_points = segment.shape.getSegment( segment ) + + 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 { map.ui.set_drag_tool("position") @@ -28,6 +45,15 @@ var ArrowTool = MapTool.extend(function(base){ last_point.assign(p.point) cursor.x.a = cursor.x.b = last_point.a cursor.y.a = cursor.y.b = last_point.b + return + } + 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" @@ -35,13 +61,22 @@ var ArrowTool = MapTool.extend(function(base){ } 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() + if (selected_point) { + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + else if (selected_segment) { + selected_shape.translateSegment( + src_points, dest_points, + cursor.x.magnitude(), cursor.y.magnitude() + ) + selected_shape.rebuild() + } } exports.up = function(e, cursor){ - selected_point = selected_shape = original_point = null + selected_point = selected_shape = selected_segment = original_point = null } return exports diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index 8a8f928..c1acae5 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -33,6 +33,22 @@ var OrthoPolyline = Polyline.extend(function(base){ } } } + exports.translateSegment = function(src, dest, dx, dy) { + if (src[0].a == src[1].a) { + dest[0].a = src[0].a + dx + dest[1].a = src[1].a + dx + if (src.length == 3) { + dest[2].a = src[2].a + dx + } + } + else { + dest[0].b = src[0].b + dy + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].b = src[2].b + dy + } + } + } exports.close = function(){ this.points[this.points.length] = this.points[0] this.closed = true diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 65e22ad..579d0ea 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -46,6 +46,32 @@ var Polyline = Fiber.extend(function(base){ var clone = this.instantiate() clone.points = this.points.concat() } + exports.getSegment = function(segment){ + var seg = [ + this.points[segment.head], + this.points[segment.tail], + ] + if (segment.head == 0) { + seg.push( this.lastPoint() ) + } + else if (segment.tail == this.points.length-1) { + seg.push( this.firstPoint() ) + } + return seg + } + exports.cloneSegment = function(segment){ + return this.getSegment(segment).map(function(point){ return point.clone() }) + } + exports.translateSegment = function(src, dest, dx, dy){ + dest[0].a = src[0].a + dx + dest[0].b = src[0].b + dy + dest[1].a = src[1].a + dx + dest[1].b = src[1].b + dy + if (src.length == 3) { + dest[2].a = src[2].a + dx + dest[2].b = src[2].b + dy + } + } exports.hasPointNear = function(p){ var point for (var i = 0; i < this.points.length; i++){ @@ -156,10 +182,12 @@ var Polyline = Fiber.extend(function(base){ exports.serialize = function(){ return { type: this.type(), + closed: this.closed, points: this.points.map(function(point){ return [point.a, point.b] }), } } exports.deserialize = function(data){ + this.closed = data.closed || false this.points = (data.points || data).map(function(point){ return new vec2(point[0], point[1]) }) } exports.reset = function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js index 7721298..8b0a08f 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintToolbar.js @@ -24,7 +24,7 @@ var BlueprintToolbar = View.extend({ this.$eraserMode = this.$('[data-role=eraser-mode]') this.$startPositionMode = this.$('[data-role=start-position-mode]') - this.orthoPolylineMode() + this.arrowMode() }, showUploader: function(){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index dc3c281..aa62a4c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -66,6 +66,9 @@ var BlueprintUploader = UploadView.extend({ var media = $el.data("media") this.hide() this.parent.scaler.pick(media) + if (media.slug) { + window.history.pushState(null, document.title, "/blueprint/" + media.slug) + } }, destroy: function(e){ -- cgit v1.2.3-70-g09d2 From ee110d4725943bbc2b783323ec5087324531ca33 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 18:17:14 -0400 Subject: get rooms api working with shapes --- .../javascripts/rectangles/engine/map/_map.js | 3 + .../javascripts/rectangles/engine/map/draw.js | 19 +-- .../javascripts/rectangles/engine/shapes/ortho.js | 9 ++ .../rectangles/engine/shapes/polyline.js | 9 ++ .../rectangles/engine/shapes/regionlist.js | 11 ++ .../rectangles/engine/shapes/shapelist.js | 13 +- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 7 +- server/lib/api/rooms.js | 139 +++++++++++++++------ 9 files changed, 161 insertions(+), 51 deletions(-) (limited to 'public/assets/javascripts/rectangles/engine/shapes/polyline.js') diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js index e27346d..6492db6 100644 --- a/public/assets/javascripts/rectangles/engine/map/_map.js +++ b/public/assets/javascripts/rectangles/engine/map/_map.js @@ -50,6 +50,7 @@ var Map = function(opt){ switch (opt.type) { case "ortho": base.draw = new Map.Draw (base, { ortho: true }) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Ortho (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -57,6 +58,7 @@ var Map = function(opt){ case "editor": base.draw = new Map.Draw (base) + base.draw.grid_size = MAP_GRID_SIZE base.ui = new Map.UI.Editor (base) base.sides = base.sides_for_center $(window).resize(base.resize) @@ -64,6 +66,7 @@ var Map = function(opt){ case "minimap": base.draw = new Map.Draw (base, { center: scene.camera, minimap: true }) + base.draw.grid_size = MAP_GRID_SIZE * 10 base.ui = new Map.UI.Minimap (base) base.sides = base.sides_for_camera break diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index fd05f86..4f4759f 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -179,8 +179,8 @@ Map.Draw = function(map, opt){ ctx.lineWidth = 1/map.zoom 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) { + var quant = sides.clone().quantize(draw.grid_size) + for (var x = quant.x.a - draw.grid_size; x <= quant.x.b; x += draw.grid_size) { if (Math.round(x) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom @@ -191,17 +191,18 @@ Map.Draw = function(map, opt){ } 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) % 360 == 0) { + + for (var y = quant.y.a - draw.grid_size; y <= quant.y.b; y += draw.grid_size) { + if (Math.round(y) % 360 == 0) { ctx.strokeStyle = "rgba(0,0,0,0.3)" ctx.lineWidth = 1/map.zoom - } - else { + } + else { ctx.strokeStyle = "rgba(0,0,0,0.05)" ctx.lineWidth = 1/map.zoom - } - line(sides.x.a, y, sides.x.b, y) - } + } + line(sides.x.a, y, sides.x.b, y) + } } // diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js index c1acae5..163f646 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/ortho.js +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -1,5 +1,9 @@ // An OrthoPolyline is a Polyline where all angles are 90 degrees. +if (! ('window' in this) ) { + var Polyline = require("./polyline.js") +} + var OrthoPolyline = Polyline.extend(function(base){ var exports = {} exports.type = function(){ @@ -55,3 +59,8 @@ var OrthoPolyline = Polyline.extend(function(base){ } return exports }) + + +if (! ('window' in this) ) { + module.exports = OrthoPolyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index 579d0ea..b2cd92f 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -2,6 +2,11 @@ // Additionally, it manages a set of MX objects which correspond to the walls in 3D. // In this way, it attempts to bridge the 2D (canvas, imperative) and 3D (css, declarative) views. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") +} + var Polyline = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -201,3 +206,7 @@ var Polyline = Fiber.extend(function(base){ } return exports }) + +if (! ('window' in this) ) { + module.exports = Polyline +} diff --git a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js index 0dd4a1e..8c9e732 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/regionlist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/regionlist.js @@ -5,6 +5,13 @@ // 1) all angles are orthogonal // 2) all polylines are closed +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var vec2 = require("../../models/vec2") + var Rect = require("../../models/rect") + var sort = require("../../util/sort") +} + var RegionList = (function(){ var RegionList = {} @@ -223,6 +230,10 @@ var RegionList = (function(){ } return new Rect( segment[0].a, segment[0].b, segment[1].a, segment[1].b ) } + + if (! ('window' in this) ) { + module.exports = RegionList + } return RegionList diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js index 2d33af2..21beb76 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -1,5 +1,11 @@ // The ShapeList manages the list of polylines which form a V2 layout. +if (! ('window' in this) ) { + var Fiber = require("../../../vendor/bower_components/fiber/src/fiber.js") + var Polyline = require("./polyline.js") + var OrthoPolyline = require("./ortho.js") +} + var ShapeList = Fiber.extend(function(base){ var exports = {} exports.init = function(){ @@ -110,4 +116,9 @@ var ShapeList = Fiber.extend(function(base){ }) } return exports -}) \ No newline at end of file +}) + +if (! ('window' in this) ) { + shapes = new ShapeList + module.exports = shapes +} diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 83bc8b7..d8cfca6 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) { + if (data.shapes.length) { Rooms.deserializeFromShapes(data, data.walls) } else if (data.rooms) { diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 1ba97cf..43e81d8 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -76,7 +76,12 @@ var ReaderView = View.extend({ }, build: function(data){ - data.rooms && Rooms.deserialize(data.rooms) + if (data.shapes.length) { + Rooms.deserializeFromShapes(data) + } + else { + Rooms.deserialize(data.rooms) + } data.walls && Walls.deserialize(data.walls) data.media && Scenery.deserialize(data.media) data.sculpture && Sculpture.deserialize(data.sculpture) diff --git a/server/lib/api/rooms.js b/server/lib/api/rooms.js index c044309..2a1d2fe 100644 --- a/server/lib/api/rooms.js +++ b/server/lib/api/rooms.js @@ -6,6 +6,8 @@ var Clipper = require("../../../public/assets/javascripts/rectangles/engine/room var Builder = require("../../../public/assets/javascripts/rectangles/engine/rooms/builder.js") var Grouper = require("../../../public/assets/javascripts/rectangles/engine/rooms/grouper.js") var Walls = require("../../../public/assets/javascripts/rectangles/engine/rooms/_walls.js") +var shapes = require("../../../public/assets/javascripts/rectangles/engine/shapes/shapelist.js") +var RegionList = require("../../../public/assets/javascripts/rectangles/engine/shapes/regionlist.js") /* jshint node: true */ @@ -21,47 +23,106 @@ var rooms = module.exports = { if (! doc) { res.json({ status: 404 }); return } doc = doc.toObject() - doc.rooms.forEach(function(data){ - var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) - var room = new Room({ - id: data.id, - rect: rect, - height: data.height - }) - Rooms.add(room) - }) - Rooms.clipper.solve_rects() - Rooms.builder.build() - - var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] - var collections = Rooms.grouper.collect() - Rooms.grouper.cull(collections) - Rooms.grouper.group(walls, collections, FRONT) - Rooms.grouper.group(walls, collections, BACK) - Rooms.grouper.group(walls, collections, LEFT) - Rooms.grouper.group(walls, collections, RIGHT) - walls.forEach(function(wall){ - wall.mx.forEach(function(mx){ - var data = mx.report() - data.id = wall.id - mx_walls.push(data) - }) - }) - - doc.mx_walls = mx_walls - doc.mx_floor = mx_floor - doc.mx_ceiling = mx_ceiling - - Rooms.forEach(function(room){ - room.mx_floor.forEach(function(mx){ - mx_floor.push( mx.report() ) - }) - room.mx_ceiling.forEach(function(mx){ - mx_ceiling.push( mx.report() ) - }) - }) + if (doc.shapes.length) { + parseMxShapes(doc) + } + else { + parseMxRooms(doc) + } res.json(doc) }) } } + +function parseMxShapes (doc) { + var viewHeight = doc.viewHeight + var wallHeight = doc.wallHeight + + shapes.deserialize( doc.shapes ) + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var regions = RegionList.build() + + regions.forEach(function(region){ + var room = new Room({ + rect: region, + regions: [region], + height: wallHeight, + }) + + room.sides = region.sides + region.id = Rooms.uid("room_") + Rooms.list[ region.id ] = room + Rooms.builder.build_walls(region) + mx_floor.push( Rooms.builder.make_floor(room, region) ) + mx_ceiling.push( Rooms.builder.make_ceiling(room, region) ) + }) + + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + mx_floor.push( room.mx_floor ) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} + +function parseMxRooms (doc) { + doc.rooms.forEach(function(data){ + var rect = new Rect(data.rect.x[0], data.rect.y[0], data.rect.x[1], data.rect.y[1]) + var room = new Room({ + id: data.id, + rect: rect, + height: data.height + }) + Rooms.add(room) + }) + Rooms.clipper.solve_rects() + Rooms.builder.build() + + var walls = [], mx_walls = [], mx_floor = [], mx_ceiling = [] + var collections = Rooms.grouper.collect() + Rooms.grouper.cull(collections) + Rooms.grouper.group(walls, collections, FRONT) + Rooms.grouper.group(walls, collections, BACK) + Rooms.grouper.group(walls, collections, LEFT) + Rooms.grouper.group(walls, collections, RIGHT) + walls.forEach(function(wall){ + wall.mx.forEach(function(mx){ + var data = mx.report() + data.id = wall.id + mx_walls.push(data) + }) + }) + + doc.mx_walls = mx_walls + doc.mx_floor = mx_floor + doc.mx_ceiling = mx_ceiling + + Rooms.forEach(function(room){ + room.mx_floor.forEach(function(mx){ + mx_floor.push( mx.report() ) + }) + room.mx_ceiling.forEach(function(mx){ + mx_ceiling.push( mx.report() ) + }) + }) +} \ No newline at end of file -- cgit v1.2.3-70-g09d2