diff options
Diffstat (limited to 'public')
| -rwxr-xr-x | public/assets/stylesheets/app.css | 49 | ||||
| -rw-r--r-- | public/assets/test/ortho3.html | 64 |
2 files changed, 90 insertions, 23 deletions
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4bfa363..56c65fe 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -903,24 +903,33 @@ iframe.embed { } /* PLANS BROCHURE */ -/* nb these styles should be fixed for narrower screens/mobile layout */ -.about_plan { - width: 28vw; - margin: 2vw; - float: left; - min-height: 28vw; - position: relative; -} -.about_plan button { - position: absolute; - bottom: 5%; - left: 5%; - width: 90%; -} .about_custom { clear: both; - width: 76vw; - margin: 2vw 10vw; + max-width: 600px; + margin: 0 auto; + font-size: 14px; + border-bottom: 1px solid #e5e5e5; +} +.about_custom h3 { + text-transform: uppercase; + letter-spacing: 3px; + font-size: 1.25em; + font-weight: 500; + background: #3A3A3A; + color: white; + text-align: center; +} +.about_custom li { + list-style-type: none; + line-height: 2em; + padding: 10px 20px; + background: white; + text-align: center; + border-left: 1px solid #e5e5e5; + border-right: 1px solid #e5e5e5; +} +.about_custom a { + border-bottom: 1px solid black; } ul#plans { @@ -1013,6 +1022,14 @@ ul#plans .signup { padding: 25px 0; } +.signup .current { + display: inline-block; + color: white; + font-weight: bold; + font-size: 1em; + padding: 4px 30px 3px; +} + .signup .button { font-weight: bold; padding: 16px 30px 14px; diff --git a/public/assets/test/ortho3.html b/public/assets/test/ortho3.html index 3ae0204..fa7e3c5 100644 --- a/public/assets/test/ortho3.html +++ b/public/assets/test/ortho3.html @@ -44,6 +44,7 @@ body { <span class="ion-navigate" data-role="arrow-mode"></span> <span class="ion-ios-pulse active" data-role="polyline-mode"></span> <span class="ion-ios-grid-view-outline" data-role="ortho-polyline-mode"></span> + <span class="ion-scissors" data-role="eraser-mode"></span> </div> <script src="/assets/javascripts/util.js"></script> @@ -96,7 +97,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.down = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { selected_shape = p.shape selected_point = p.point @@ -110,7 +111,7 @@ var ArrowTool = MapTool.extend(function(base){ exports.move = function(e, cursor){ last_point.a = cursor.x.a last_point.b = cursor.y.a - var p = findClosestPoint(last_point) + var p = shapes.findClosestPoint(last_point) if (p) { document.body.style.cursor = "pointer" last_point.assign(p.point) @@ -339,6 +340,26 @@ var OrthoPolylineTool = MapTool.extend(function (base) { return exports }) +var EraserTool = MapTool.extend(function(base){ + var exports = {} + exports.down = function(e, cursor){ + } + exports.move = function(e, cursor){ + var segment = shapes.findClosestSegment(last_point) + if (segment) { + document.body.style.cursor = "pointer" + last_point.a = segment.x + last_point.b = segment.y + cursor.x.a = cursor.x.b = last_point.a + cursor.y.a = cursor.y.b = last_point.b + return + } + else { + document.body.style.cursor = "crosshair" + } + } + return exports +}) var ShapeList = Fiber.extend(function(base){ var exports = {} @@ -348,6 +369,12 @@ var ShapeList = Fiber.extend(function(base){ exports.add = function(shape){ this.shapes.push(shape) } + exports.remove = function(shape){ + var index = this.shapes.indexOf(shape) + if (index !== -1) { + this.shapes.splice(index, 1) + } + } exports.findClosestPoint = function (p){ var point for (var i = 0; i < this.shapes.length; i++) { @@ -364,6 +391,17 @@ var ShapeList = Fiber.extend(function(base){ } return null } + exports.findClosestSegment = function (p){ + var segment = null, closest_segment = null + for (var i = 0; i < this.shapes.length; i++) { + segment = this.shapes[i].hasSegmentNear(p, 10) + if (segment && (! closest_segment || segment.distance < closest_segment.distance)) { + closest_segment = segment + closest_segment.shape = this.shapes[i] + } + } + return closest_segment + } exports.forEach = function(fn){ this.shapes.forEach(fn) } @@ -421,7 +459,10 @@ var Polyline = Fiber.extend(function(base){ var dx, dy, new_x, new_y, x, y, closest_distance = min_dist || Infinity var closest_i = -1 var points = this.points + var p1, p2 = points[0] for (var i = 1; i < points.length; i++) { + p1 = p2 + p2 = points[i] d1 = p1.a - p2.a d2 = p1.b - p2.b sum = d1*d1 + d2*d2 @@ -448,10 +489,6 @@ var Polyline = Fiber.extend(function(base){ } } - exports.getSegment = function(i){ - return [ points[i], points[i+1] ] - } - exports.draw = function(ctx){ var points = this.points if (! points.length) return @@ -541,7 +578,16 @@ MX.Polyline = MX.Object3D.extend({ }) var hue = abs(round( angle / PI * 90 + 300)) mx.el.style.backgroundColor = 'hsl(' + [hue, "100%", "50%"] + ')' - } + }, + + destroy: function(){ + this.faces.forEach(function(mx){ + scene.remove(mx) + }) + this.faces = null + this.points = null + }, + }) MX.Point = MX.Object3D.extend({ @@ -577,6 +623,7 @@ map = new Map ({ map.ui.add_tool("arrow", new ArrowTool) map.ui.add_tool("polyline", new PolylineTool) map.ui.add_tool("ortho-polyline", new OrthoPolylineTool) +map.ui.add_tool("eraser", new EraserTool) map.ui.add_tool("position", new PositionTool) $(window).resize(function(){ @@ -645,6 +692,9 @@ OrthographicToolbar.add("polyline-mode", function(){ OrthographicToolbar.add("ortho-polyline-mode", function(){ map.ui.set_tool("ortho-polyline") }) +OrthographicToolbar.add("eraser-mode", function(){ + map.ui.set_tool("eraser") +}) OrthographicToolbar.pick("ortho-polyline-mode") document.addEventListener('DOMContentLoaded', build) |