From 44642b48203b3ee2fa9e281f31ed9fed3f60ee79 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 21 Jul 2015 13:23:22 -0400 Subject: find closest segment --- .../rectangles/engine/map/tools/_base.js | 11 ++ .../rectangles/engine/map/tools/arrow.js | 46 +++++++++ .../rectangles/engine/map/tools/ortho.js | 115 +++++++++++++++++++++ .../rectangles/engine/map/tools/polyline.js | 69 +++++++++++++ .../rectangles/engine/map/tools/position.js | 17 +++ 5 files changed, 258 insertions(+) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/_base.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/arrow.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/ortho.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/position.js (limited to 'public/assets/javascripts/rectangles/engine/map/tools') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/_base.js b/public/assets/javascripts/rectangles/engine/map/tools/_base.js new file mode 100644 index 0000000..17b247d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/_base.js @@ -0,0 +1,11 @@ +var MapTool = Fiber.extend(function(base){ + var exports = { + recenterCursor: true, + down: function(e, cursor){}, + move: function(e, cursor){}, + drag: function(e, cursor){}, + up: function(e, cursor, new_cursor){}, + cancel: function(){}, + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/arrow.js b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js new file mode 100644 index 0000000..2a73954 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/arrow.js @@ -0,0 +1,46 @@ +var ArrowTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null, original_point = null, selected_shape = null + + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + selected_shape = p.shape + selected_point = p.point + original_point = selected_point.clone() + } + else { + map.ui.set_drag_tool("position") + } + } + + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var p = shapes.findClosestPoint(last_point) + if (p) { + document.body.style.cursor = "pointer" + last_point.assign(p.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + + exports.drag = function(e, cursor){ + selected_point.a = original_point.a + cursor.x.magnitude() + selected_point.b = original_point.b + cursor.y.magnitude() + selected_shape.rebuild() + } + + exports.up = function(e, cursor){ + selected_point = selected_shape = original_point = null + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js new file mode 100644 index 0000000..be3d707 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -0,0 +1,115 @@ +var OrthoPolylineTool = MapTool.extend(function (base) { + // this will work like normal polyline except all walls will be orthogonal + + var prev_point, horizontal = false, first_edge_is_horizontal = false + + var exports = {} + exports.down = function(e, cursor){ + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + else { + map.ui.tools.position.rightclick(e, cursor) + } + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.lastPoint().eq(p)) { + return + } + else if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + prev_point = p + horizontal = ! horizontal + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + first_point = prev_point = p + horizontal = false + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing) { + if (line.points.length == 1) { + var x = abs(prev_point.a - last_point.a) + var y = abs(prev_point.b - last_point.b) + if (x > y) { + last_point.b = prev_point.b + first_edge_is_horizontal = horizontal = true + } + else { + last_point.a = prev_point.a + first_edge_is_horizontal = horizontal = false + } + } + else { + if (horizontal) { + last_point.b = prev_point.b + } + else { + last_point.a = prev_point.a + } + if (horizontal == first_edge_is_horizontal) { + // check if this point is within N pixels of the normal + // and lock it into place if so + if (horizontal && abs( first_point.a - last_point.a ) < 10/map.zoom) { + last_point.a = first_point.a + } + else if (! horizontal && abs( first_point.b - last_point.b ) < 10/map.zoom) { + last_point.b = first_point.b + } + } + } + + if (line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(first_point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + first_point = null + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/polyline.js b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js new file mode 100644 index 0000000..559aea8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/polyline.js @@ -0,0 +1,69 @@ +var PolylineTool = MapTool.extend(function (base) { + var exports = {} + exports.down = function(e, cursor){ + + // rightclick? + if (e.ctrlKey || e.which === 3) { + e.preventDefault() + e.stopPropagation() + if (map.ui.placing) { + // close polyline or cancel + map.ui.placing = false + if (line.points.length > 2) { + line.build() + } + else { + line.reset() + } + return + } + map.ui.tools.position.rightclick(e, cursor) + return + } + + // compare to initial point + var p = last_point.clone() + if (map.ui.placing) { + if (line.canCloseWith(p)) { + line.close() + line.build() + map.ui.placing = false + } + else { + line.add(p) + } + } + else { + map.ui.placing = true + line = new Polyline () + line.add(p) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + if (map.ui.placing && line.canCloseWith(last_point)) { + document.body.style.cursor = "pointer" + last_point.assign(line.points[0]) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + var end_point = shapes.findClosestEndPoint(last_point) + if (end_point) { + document.body.style.cursor = "pointer" + last_point.assign(end_point.point) + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + exports.cancel = function(){ + if (map.ui.placing) { line.reset() } + map.ui.placing = false + } + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/engine/map/tools/position.js b/public/assets/javascripts/rectangles/engine/map/tools/position.js new file mode 100644 index 0000000..a994f5a --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/position.js @@ -0,0 +1,17 @@ +var PositionTool = MapTool.extend(function(base){ + var exports = { + recenterCursor: false, + drag: function(e, cursor){ + map.center.a = -cursor.x.magnitude() + map.center.b = cursor.y.magnitude() + }, + rightclick: function(e, cursor){ + cursor.quantize(1/map.zoom) + map.center.a = cursor.x.a + map.center.b = -cursor.y.a + cursor.x.b = cursor.x.a + cursor.y.b = cursor.y.a + } + } + return exports +}) \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 80723a9898ad237818ac04ae47ff801919f34961 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2015 13:50:27 -0400 Subject: split out modules --- .../rectangles/engine/map/tools/eraser.js | 27 +++ .../rectangles/engine/shapes/polyline.js | 147 +++++++++++++ .../rectangles/engine/shapes/shapelist.js | 61 ++++++ public/assets/test/ortho3.html | 243 +-------------------- 4 files changed, 238 insertions(+), 240 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/eraser.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/polyline.js create mode 100644 public/assets/javascripts/rectangles/engine/shapes/shapelist.js (limited to 'public/assets/javascripts/rectangles/engine/map/tools') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/eraser.js b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js new file mode 100644 index 0000000..648cd11 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/eraser.js @@ -0,0 +1,27 @@ +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + shapes.removeSegment(segment) + } + } + exports.move = function(e, cursor){ + last_point.a = cursor.x.a + last_point.b = cursor.y.a + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js new file mode 100644 index 0000000..7e3c04c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -0,0 +1,147 @@ +var Polyline = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.points = [] + this.mx_points = [] + this.closed = false + } + exports.add = function(p){ + this.points.push( p ) + this.mx_points.push( new MX.Point(p) ) + } + exports.firstPoint = function(){ + return this.points[0] + } + exports.lastPoint = function(){ + return this.points[this.points.length-1] + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.getHeadAtIndex = function(index){ + if (index == 0) { return null } + if (index == this.points.length-1) { return this.clone() } + var head = new Polyline() + head.points = this.points.slice(0, index+1) + return head + } + exports.getTailAtIndex = function(index){ + if (index == this.points.length-1) { return null } + if (index == 0) { return this.clone() } + var tail = new Polyline() + tail.points = this.points.slice(index, this.points.length) + return tail + } + exports.clone = function(){ + var clone = new Polyline() + clone.points = this.points.concat() + } + exports.hasPointNear = function(p){ + var point + for (var i = 0; i < this.points.length; i++){ + point = this.points[i] + if (point.distanceTo( p ) < 10/map.zoom) { + return point + } + } + return null + } + exports.hasEndPointNear = function(p){ + if (this.closed) return null + if (this.firstPoint().distanceTo( p ) < 10/map.zoom) { + return this.firstPoint() + } + if (this.lastPoint().distanceTo( p ) < 10/map.zoom) { + return this.lastPoint() + } + return null + } + exports.hasSegmentNear = function(p, min_dist){ + var p1, p2, d1, d2, sum, rat + var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity + var closest_i = -1 + var points = this.points + var p1, p2 = points[0] + for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] + d1 = p2.a - p1.a + d2 = p2.b - p1.b + sum = d1*d1 + d2*d2 + rat = ((p.a - p1.a) * d1 + (p.b - p1.b) * d2) / sum + rat = rat < 0 ? 0 : rat < 1 ? rat : 1 + new_x = p1.a + rat * d1 + new_y = p1.b + rat * d2 + dx = new_x - p.a + dy = new_y - p.b + sum2 = sqrt(dx*dx+dy*dy) + if (sum2 < closest_distance) { + x = new_x + y = new_y + closest_distance = sum2 + closest_i = i + } + } + if (closest_i == -1) return null + return { + x: x, + y: y, + distance: closest_distance, + head: closest_i-1, + tail: closest_i, + } + } + exports.draw = function(ctx){ + var points = this.points + if (! points.length) return + if (points.length == 1) { + ctx.fillStyle = "#f80" + map.draw.dot_at(this.points[0].a, points[0].b, 5) + } + if (points.length > 1) { + ctx.fillStyle = "rgba(255,255,0,0.1)" + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(points[0].a, points[0].b) + points.forEach(function(point, i){ + i && ctx.lineTo(point.a, point.b) + }) + ctx.stroke() + if (! map.ui.placing || this.closed) { + ctx.fill() + } + } + } + exports.draw_line = function (ctx, p){ + var last = this.points[this.points.length-1] + ctx.strokeStyle = "#f80" + ctx.lineWidth = 2 / map.zoom + ctx.beginPath() + ctx.moveTo(last.a, last.b) + ctx.lineTo(p.a, p.b) + ctx.stroke() + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + exports.build = function(){ + this.mx_points && this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx = new MX.Polyline(this) + shapes.add(this) + } + exports.rebuild = function(){ + this.mx.rebuild() + } + exports.reset = function(){ + this.mx_points.forEach(function(mx){ scene.remove(mx) }) + this.mx_points.length = 0 + this.points.length = 0 + } + exports.destroy = function(){ + this.reset() + this.mx && this.mx.destroy() + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js new file mode 100644 index 0000000..00e1a4e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -0,0 +1,61 @@ +var ShapeList = Fiber.extend(function(base){ + var exports = {} + exports.init = function(){ + this.shapes = [] + } + exports.add = function(shape){ + this.shapes.push(shape) + } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } + exports.removeSegment = function (segment){ + var shape = segment.shape + var head = shape.getHeadAtIndex(segment.head) + var tail = shape.getTailAtIndex(segment.tail) + this.remove(shape) + shape.destroy() + if (head) { + this.add(head) + head.build() + } + if (tail) { + this.add(tail) + tail.build() + } + } + exports.findClosestPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestEndPoint = function (p){ + var point + for (var i = 0; i < this.shapes.length; i++) { + point = this.shapes[i].hasEndPointNear(p) + if (point) return { point: point, shape: this.shapes[i] } + } + return null + } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } + exports.forEach = function(fn){ + this.shapes.forEach(fn) + } + return exports +}) \ No newline at end of file diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index f56c73f..ef5732c 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -74,9 +74,12 @@ body { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/server/lib/middleware.js b/server/lib/middleware.js index 94c4acd..04cb330 100644 --- a/server/lib/middleware.js +++ b/server/lib/middleware.js @@ -114,7 +114,7 @@ var middleware = { console.error(err) req.layout = null } - else if (! project) { + else if (! layout) { req.layout = null } else { diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index 8247467..f37fb12 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -42,6 +42,7 @@ var MediaSchema = new mongoose.Schema({ mute: { type: Boolean, default: false }, keyframe: { type: Number, default: 0.0 }, tag: { type: String, default: "" }, + scale: { type: Number, default: 1.0 }, widthDimension: { type: Number }, heightDimension: { type: Number }, diff --git a/server/lib/views/staff.js b/server/lib/views/staff.js index a3d5bea..43330e2 100644 --- a/server/lib/views/staff.js +++ b/server/lib/views/staff.js @@ -6,6 +6,7 @@ var User = require('../schemas/User'), Collaborator = require('../schemas/Collaborator'), Plan = require('../schemas/Plan'), Subscription = require('../schemas/Subscription'), + Layout = require('../schemas/Layout'), config = require('../../../config'), middleware = require('../middleware'), util = require('../util'), @@ -821,7 +822,7 @@ var staff = module.exports = { make_stock: function(req, res){ res.locals.layout.is_stock = req.body.state == "true" res.locals.layout.save(function(err, layout){ - res.json({ state: layout.featured }) + res.json({ state: layout.is_stock }) }) }, }, diff --git a/views/staff/_layouts.ejs b/views/staff/_layouts.ejs index 3f3e6b2..d97883b 100644 --- a/views/staff/_layouts.ejs +++ b/views/staff/_layouts.ejs @@ -1,5 +1,5 @@ -[[ layouts.forEach(function(project){ ]] +[[ layouts.forEach(function(layout){ ]]
[[- layout.name ]] diff --git a/views/staff/layouts/show.ejs b/views/staff/layouts/show.ejs index 0a2014b..b66449f 100644 --- a/views/staff/layouts/show.ejs +++ b/views/staff/layouts/show.ejs @@ -45,14 +45,14 @@ featured? - [[- layout.plan_type == 0 ? "yes" : "no" ]] + [[- layout.is_stock ? "yes" : "no" ]]


- +

-- cgit v1.2.3-70-g09d2 From 9ba29a587bf0722db82e5caf1b1cf4e5596003b6 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 12 Aug 2015 18:38:12 -0400 Subject: functioning blueprint scaler --- .../javascripts/rectangles/engine/map/draw.js | 2 +- .../rectangles/engine/map/tools/line.js | 49 ++++++++++++ .../assets/javascripts/rectangles/models/rect.js | 6 ++ .../javascripts/ui/blueprint/BlueprintScaler.js | 91 ++++++++++++++++++++-- .../javascripts/ui/blueprint/BlueprintView.js | 3 + server/lib/schemas/Layout.js | 1 + views/controls/blueprint/editor.ejs | 4 +- views/partials/scripts.ejs | 1 + 8 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/map/tools/line.js (limited to 'public/assets/javascripts/rectangles/engine/map/tools') diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js index 11ba3f8..cc2f4d8 100644 --- a/public/assets/javascripts/rectangles/engine/map/draw.js +++ b/public/assets/javascripts/rectangles/engine/map/draw.js @@ -198,7 +198,7 @@ Map.Draw = function(map, opt){ // - function line (x,y,a,b,translation){ + var line = draw.line = function (x,y,a,b,translation){ if (translation) { x += translation.a a += translation.a diff --git a/public/assets/javascripts/rectangles/engine/map/tools/line.js b/public/assets/javascripts/rectangles/engine/map/tools/line.js new file mode 100644 index 0000000..8f409a8 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/map/tools/line.js @@ -0,0 +1,49 @@ +var LineTool = MapTool.extend(function(base){ + var exports = {} + + var selected_point = null + + var line = exports.line = [] + + var can_drag, dragging + + exports.down = function(e, cursor){ + this.cursor = cursor + switch (line.length) { + case 0: + line[0] = cursor.x_component() + can_drag = true + break + case 1: + line[1] = cursor.x_component() + can_drag = false + break + case 2: + line[0] = cursor.x_component() + line.pop() + can_drag = true + break + } + } + + exports.move = function(e, cursor){ + this.cursor = cursor + } + + exports.drag = function(e, cursor){ + if (dragging) { + line[1].a = cursor.x.b + line[1].b = cursor.y.b + } + else if (can_drag && cursor.magnitude() > 10/map.zoom) { + line[1] = cursor.y_component() + dragging = true + } + } + + exports.up = function(e, cursor){ + can_drag = dragging = false + } + + return exports +}) \ No newline at end of file diff --git a/public/assets/javascripts/rectangles/models/rect.js b/public/assets/javascripts/rectangles/models/rect.js index c667cf5..92c8c9e 100644 --- a/public/assets/javascripts/rectangles/models/rect.js +++ b/public/assets/javascripts/rectangles/models/rect.js @@ -39,6 +39,12 @@ Rect.prototype.clone = function(){ return new Rect( this.x.clone(), this.y.clone() ) } + Rect.prototype.x_component = function(){ + return new vec2( this.x.a, this.y.a ) + } + Rect.prototype.y_component = function(){ + return new vec2( this.x.b, this.y.b ) + } Rect.prototype.assign = function(r) { this.x.assign(r.x) this.y.assign(r.y) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js index a81c89b..addf9a9 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintScaler.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintScaler.js @@ -1,10 +1,13 @@ -var BlueprintScaler = ModalView.extend({ +var BlueprintScaler = ModalFormView.extend({ el: ".blueprintScaler", + method: "/api/media/scale", + events: { "change [name=blueprint-dimensions]": "changeDimensions", "change [name=blueprint-units]": "changeUnits", + "click .uploadNewBlueprint": "showBlueprintUpload", "click #saveBlueprint": "save", }, @@ -12,6 +15,7 @@ var BlueprintScaler = ModalView.extend({ this.$blueprintMap = this.$("#blueprintMap") this.$blueprintDimensionsRapper = this.$("#blueprintDimensions") this.$dimensions = this.$("[name=blueprint-dimensions]") + this.$pixels = this.$("[name=blueprint-pixels]") this.$units = this.$("[name=blueprint-units]") this.$save = this.$("#saveBlueprint") @@ -24,23 +28,40 @@ var BlueprintScaler = ModalView.extend({ zoom_min: -6.2, zoom_max: 1, }) - map.ui.add_tool("arrow", new ArrowTool) - map.ui.add_tool("position", new PositionTool) - map.ui.set_tool("position") + this.lineTool = new LineTool + map.ui.add_tool("line", this.lineTool) + map.ui.set_tool("line") scene = scene || { camera: { x: 0, y: 0, z: 0 } } this.floorplan = new MX.Image () - this.animate() + this.animating = false + }, + + showBlueprintUpload: function(){ + this.parent.blueprintUpload.show() }, pick: function(media){ + this.media = media + + if (!! media.scale) { + this.parent.useFloorplan(media) + } + this.floorplan.load({ media: media, keepImage: true }) + + if (! this.animating) { + this.animating = true + this.animate() + } }, animate: function(t){ requestAnimationFrame(this.animate.bind(this)) + + if (! this.animating) return var dt = t - this.last_t this.last_t = t @@ -53,6 +74,27 @@ var BlueprintScaler = ModalView.extend({ this.map.draw.translate() this.floorplan.draw(this.map.draw.ctx, true) + + this.map.draw.ctx.strokeStyle = "#f00" + this.map.draw.ctx.lineWidth = 2/map.zoom + switch (this.lineTool.line.length) { + case 1: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.cursor.x.a, + this.lineTool.cursor.y.a + ) + break + case 2: + this.map.draw.line( + this.lineTool.line[0].a, + this.lineTool.line[0].b, + this.lineTool.line[1].a, + this.lineTool.line[1].b + ) + break + } this.map.draw.coords() @@ -62,10 +104,47 @@ var BlueprintScaler = ModalView.extend({ }, changeDimensions: function(){ + app.units = this.$units.val() + this.$dimensions.unitVal() }, changeUnits: function(){ + app.units = this.$units.val() + this.$dimensions.resetUnitVal() + }, + lineLength: function(){ + if (this.lineTool.line.length !== 2) return 0 + var line = this.lineTool.line + return dist( line[0].a, line[0].b, line[1].a, line[1].b ) + } + + validate: function(){ + var val = this.$dimensions.unitVal() + var errors = [] + if (! this.lineLength()) { + errors.push("no line") + alert("Please click two corners of a wall and then specify how long it is in feet or meters.") + } + else if (val == 0) { + errors.push("no measurement") + alert("Please tell us how long the wall is in feet or meters.") + } + return errors }, - save: function(){ + + showErrors: function(){}, + + serialize: function(){ + var fd = new FormData() + fd.append( "_id", this.media._id) + fd.append( "units", this.$units.val() ) + fd.append( "scale", this.$dimensions.unitVal() / this.lineLength() ) + fd.append( "_csrf", $("[name=_csrf]").val()) + return fd + }, + + success: function(){ + this.animating = false + this.parent.useFloorplan(media) }, }) diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index a803f12..6b204e5 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -33,6 +33,9 @@ var BlueprintView = View.extend({ hideExtras: function(){ }, + + useFloorplan: function(media){ + }, pickWall: function(wall, pos){ }, diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js index cff1d78..e15e188 100644 --- a/server/lib/schemas/Layout.js +++ b/server/lib/schemas/Layout.js @@ -23,6 +23,7 @@ var LayoutSchema = new mongoose.Schema({ photo: { type: String, }, + media: mongoose.Schema.Types.Mixed, rooms: [mongoose.Schema.Types.Mixed], startPosition: mongoose.Schema.Types.Mixed, viewHeight: { type: Number }, diff --git a/views/controls/blueprint/editor.ejs b/views/controls/blueprint/editor.ejs index 308b4c8..3e0c097 100644 --- a/views/controls/blueprint/editor.ejs +++ b/views/controls/blueprint/editor.ejs @@ -99,8 +99,8 @@ body {

- - + + +

-- cgit v1.2.3-70-g09d2 From 685d5fd7b32ac868a0b2d8ac8a2a1b4120f274cf Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 27 Aug 2015 11:57:51 -0400 Subject: fork orthopolyline --- .../rectangles/engine/map/tools/ortho.js | 2 +- .../javascripts/rectangles/engine/shapes/ortho.js | 41 ++++++++++++++++++++++ .../rectangles/engine/shapes/polyline.js | 21 +++++++---- .../rectangles/engine/shapes/shapelist.js | 14 ++++++-- .../javascripts/ui/blueprint/BlueprintSettings.js | 3 +- .../javascripts/ui/blueprint/BlueprintUploader.js | 2 +- .../javascripts/ui/blueprint/BlueprintView.js | 22 ++++++++++++ public/assets/stylesheets/app.css | 4 +-- views/partials/header.ejs | 2 ++ views/partials/scripts.ejs | 1 + views/profile.ejs | 2 ++ 11 files changed, 99 insertions(+), 15 deletions(-) create mode 100644 public/assets/javascripts/rectangles/engine/shapes/ortho.js (limited to 'public/assets/javascripts/rectangles/engine/map/tools') diff --git a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js index 6ced728..374c822 100644 --- a/public/assets/javascripts/rectangles/engine/map/tools/ortho.js +++ b/public/assets/javascripts/rectangles/engine/map/tools/ortho.js @@ -48,7 +48,7 @@ var OrthoPolylineTool = MapTool.extend(function (base) { } else { map.ui.placing = true - shapes.workline = new Polyline () + shapes.workline = new OrthoPolyline () shapes.workline.add(p) first_point = prev_point = p horizontal = false diff --git a/public/assets/javascripts/rectangles/engine/shapes/ortho.js b/public/assets/javascripts/rectangles/engine/shapes/ortho.js new file mode 100644 index 0000000..8a8f928 --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/shapes/ortho.js @@ -0,0 +1,41 @@ +// An OrthoPolyline is a Polyline where all angles are 90 degrees. + +var OrthoPolyline = Polyline.extend(function(base){ + var exports = {} + exports.type = function(){ + return "ortho" + } + exports.instantiate = function(){ + return new OrthoPolyline + } + exports.canCloseWith = function(p){ + return (this.points.length > 2 && this.points[0].distanceTo( p ) < 10/map.zoom) + } + exports.draw = function(ctx, fillStyle, strokeStyle){ + 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 = fillStyle + ctx.strokeStyle = strokeStyle + 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) + }) + strokeStyle && ctx.stroke() + if (! map.ui.placing || this.closed) { + fillStyle && ctx.fill() + } + } + } + exports.close = function(){ + this.points[this.points.length] = this.points[0] + this.closed = true + } + return exports +}) diff --git a/public/assets/javascripts/rectangles/engine/shapes/polyline.js b/public/assets/javascripts/rectangles/engine/shapes/polyline.js index fc6cad7..65e22ad 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/polyline.js +++ b/public/assets/javascripts/rectangles/engine/shapes/polyline.js @@ -9,6 +9,12 @@ var Polyline = Fiber.extend(function(base){ this.mx_points = [] this.closed = false } + exports.type = function(){ + return "polyline" + } + exports.instantiate = function(){ + return new Polyline + } exports.add = function(p){ this.points.push( p ) this.mx_points.push( new MX.Point(p) ) @@ -25,19 +31,19 @@ var Polyline = Fiber.extend(function(base){ exports.getHeadAtIndex = function(index){ if (index == 0) { return null } if (index == this.points.length-1) { return this.clone() } - var head = new Polyline() + var head = this.instantiate() 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() + var tail = this.instantiate() tail.points = this.points.slice(index, this.points.length) return tail } exports.clone = function(){ - var clone = new Polyline() + var clone = this.instantiate() clone.points = this.points.concat() } exports.hasPointNear = function(p){ @@ -148,10 +154,13 @@ var Polyline = Fiber.extend(function(base){ return segments } exports.serialize = function(){ - return this.points.map(function(point){ return [point.a, point.b] }) + return { + type: this.type(), + points: 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.deserialize = function(data){ + this.points = (data.points || data).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 75ecae6..e5a70fb 100644 --- a/public/assets/javascripts/rectangles/engine/shapes/shapelist.js +++ b/public/assets/javascripts/rectangles/engine/shapes/shapelist.js @@ -87,9 +87,17 @@ var ShapeList = Fiber.extend(function(base){ }) } exports.deserialize = function(data){ - data && data.forEach(function(points){ - var line = new Polyline() - line.deserialize(points) + data && data.forEach(function(shape_data){ + var line + switch (shape_data.type) { + case 'ortho': + line = new OrthoPolyline() + break + default: + line = new Polyline() + break + } + line.deserialize(shape_data) shapes.add(line) }.bind(this)) } diff --git a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js index 80c9355..8addb9c 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintSettings.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintSettings.js @@ -93,10 +93,9 @@ var BlueprintSettings = FormView.extend(ToggleableView.prototype).extend({ fd.append( "_id", this.$id.val() ) fd.append( "name", this.$name.val() ) fd.append( "shapes", JSON.stringify( shapes.serialize() ) ) - fd.append( "startPosition", JSON.stringify( this.parent.startPosition ) ) + fd.append( "startPosition", JSON.stringify( this.parent.quantizeStartPosition() ) ) fd.append( "wallHeight", this.parent.info.$height.unitVal() ) fd.append( "units", this.parent.info.$units.val() ) - return fd }, diff --git a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js index fe1073a..dc3c281 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintUploader.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintUploader.js @@ -65,7 +65,7 @@ var BlueprintUploader = UploadView.extend({ var $el = $(e.currentTarget) var media = $el.data("media") this.hide() - this.parent.scaler.pick(media, true) + this.parent.scaler.pick(media) }, destroy: function(e){ diff --git a/public/assets/javascripts/ui/blueprint/BlueprintView.js b/public/assets/javascripts/ui/blueprint/BlueprintView.js index ecbb536..19b9e84 100644 --- a/public/assets/javascripts/ui/blueprint/BlueprintView.js +++ b/public/assets/javascripts/ui/blueprint/BlueprintView.js @@ -29,6 +29,28 @@ var BlueprintView = View.extend({ orbiting: true, startPosition: {}, + quantizeStartPosition: function(){ + // + var regions = RegionList.build() + var pos = this.startPosition + var startPositionIsInARoom = regions.some(function(region){ + return region.contains(pos.x, pos.z) + }) + if (startPositionIsInARoom) { + return this.startPosition + } + else { + var center = regions[0].center() + return { + x: center.a, + y: viewHeight, + z: center.b, + rotationX: 0, + rotationY: Math.PI/2, + } + } + }, + buildMap: function(){ // i forget if this has to be global map = new Map ({ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 634ea60..e4f1b27 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1156,6 +1156,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } width: 100%; height: 100%; padding: 20px 0 40px 0; + text-align: center; } .templates-list, .userTemplatesList, @@ -1186,8 +1187,7 @@ form .paidPlan label { float: none; font-size: 16px; margin: 0 10px; } } .templates span { - display: block; - float: left; + display: inline-block; margin: 1vw 0; width:20%; padding: 2vw; diff --git a/views/partials/header.ejs b/views/partials/header.ejs index bb8fc6e..ce9ffae 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -64,7 +64,9 @@ [[ if (profile && String(user._id) == String(profile._id)) { ]] Settings + [[ } else if (! profile) { ]] Profile [[ } ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index bac4120..da3f0ba 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -86,6 +86,7 @@ + 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/map/tools') 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