Restyle

2026-02-13 01:02:58 +00:00 · 2012-11-02 17:35:34 -04:00
parent b9acb41321
commit c2a46eca33
4 changed files with 77 additions and 64 deletions
--- a/css/app.css
+++ b/css/app.css
@@ -1,6 +1,5 @@
 body {
    font:normal 13px/20px Helvetica, Arial, sans-serif;
-    background:#e4e4e4;
    margin:0;
    padding:0;
    text-rendering: optimizeLegibility;
@@ -10,10 +9,11 @@ body {
 #map {
    display:block;
    position:absolute;
-    top:0;
+    top:40px;
    left:0;
    right:0;
    bottom:0;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVQIW2NkYGD4f+/ePSAFAYxAzn84D1lASUmJAaQSQwUAcxYRaXDVJ6QAAAAASUVORK5CYII=);
 }

 #about {
@@ -25,17 +25,19 @@ body {
 }


-#modebuttons {
-    width:600px;
+#bar {
+    background:#222;
    position:absolute;
    left:0px;
    top:0px;
+    height:40px;
+    right:0;
 }

-form {
-    margin:0;
-    padding:0;
-    display:inline-block;
+#geocode-location {
+    position:absolute;
+    background:#555;
+    color:#fff;
 }

 :focus {
@@ -103,36 +105,35 @@ table td {
    display:none;
 }

-#modebuttons button {
+#bar button {
    width:100px;
    cursor:pointer;
    display:inline-block;
-    background:#ddd;
-    color:#222;
+    background:#222222;
+    color:#999;
    font:bold 19px/30px 'Helvetica Neue', sans-serif;
    border:0;
    border-right:1px solid #222;
-    border-bottom:1px solid #222;
    padding:0 10px;
    height:40px;
    margin:0;
 }

-#modebuttons button:hover {
-    background:#eee;
-    color:#000;
+#bar button:hover {
+    background:#333;
 }

-#modebuttons button.active {
-    background:#fff;
+#bar button.active {
+    background:#000;
+    color:#fff;
 }

-#modebuttons button.mini,
-#modebuttons button.mini {
+#bar button.mini,
+#bar button.mini {
    width:50px;
 }

-#modebuttons input[type=text] {
+#bar input[type=text] {
    width:150px;
    height:30px;
    border:0;
@@ -140,29 +141,15 @@ table td {
    margin:0;
 }

-#zoombuttons button {
-    cursor:pointer;
-    width:30px;
-    height:30px;
-    text-align:center;
-    margin:0;
-    background:#fff;
-    color:#555;
-    font:bold 20px/20px 'Helvetica';
-    border:1px solid #888;
+.zoombuttons {
+    position:absolute;
+    right:0;
+    top:0;
 }
-
-#zoombuttons button:active {
-    background:#eee;
-}
-
-#zoombuttons #zoomIn {
-    border-radius: 4px 0 0 4px;
-}
-
-#zoombuttons #zoomOut {
-    border-left:0;
-    border-radius: 0 4px 4px 0;
+#bar .zoombuttons button {
+    width:50px;
+    background:#333333;
+    color:#fff;
 }

 .inspector-wrap {
--- a/index.html
+++ b/index.html
@@ -10,19 +10,17 @@
    </head>
    <body>
        <div id='map'></div>
-        <div id='modebuttons'>
+        <div id='bar'>
            <button id='place'>
                + Place</button><button id='road'>
                + Road</button><button id='area'>
                + Area</button><button class='mini' id='undo'>
                &larr;</button><button class='mini' id='redo'>
-                &rarr;</button><form action='GET' id='geocode-form'><input type='text' id='geocode-location' placeholder='find a place' />
-            </form>
-        </div>
-
-        <div id='zoombuttons'>
-            <button id='zoomIn'>+</button><button id='zoomOut'>&ndash;</button>
-        </div>
+                &rarr;</button><input type='text' id='geocode-location' placeholder='find a place' />
+                <div class='zoombuttons'>
+                    <button class='zoom-in'>+</button><button class='zoom-out'>&ndash;</button>
+                </div>
+            </div>

        <div class='inspector-wrap'></div>
        <div id='about'>
@@ -71,6 +69,8 @@
            iD.Hash().map(map);
            iD.UI.bind();

+            iD.controller(map);
+
            window.onresize = function() {
                map.setSize(m.node().offsetWidth,
                m.node().offsetHeight);
@@ -83,13 +83,17 @@
                });
            }

-            d3.select('#geocode-form').on('submit', function() {
+            d3.select('#geocode-location').on('keydown', function() {
+                if (d3.event.keyCode !== 13) return;
                d3.event.preventDefault();
                var val = d3.select('#geocode-location').node().value;
                var scr = document.body.appendChild(document.createElement('script'));
                scr.src = 'http://api.tiles.mapbox.com/v3/mapbox/geocode/' +
                encodeURIComponent(val) + '.jsonp?callback=grid';
            });
+
+            d3.select('.zoombuttons .zoom-in').on('click', map.zoomIn);
+            d3.select('.zoombuttons .zoom-out').on('click', map.zoomOut);
        </script>
    </body>
 </html>
--- a/js/iD/actions/actions.js
+++ b/js/iD/actions/actions.js
@@ -67,7 +67,7 @@ iD.actions.Move = {
    exit: function() { }
 };

-iD.controller = (function() {
+iD.controller = function(map) {
    var controller = {},
        action;

@@ -86,10 +86,9 @@ iD.controller = (function() {
    // Pressing 'escape' should exit any action.
    d3.select(document).on('keydown', function() {
        if (d3.event.keyCode === 27) {
-            iD.controller.go(iD.actions.Move);
+            controller.go(iD.actions.Move);
        }
    });

    return controller;
-})();
-
+};
--- a/js/iD/renderer/Map.js
+++ b/js/iD/renderer/Map.js
@@ -26,7 +26,7 @@ iD.Map = function(elem) {
            .translate(projection.translate())
            .scale(projection.scale())
            .scaleExtent([256, 134217728])
-            .on('zoom', redraw),
+            .on('zoom', zoomPan),
        dragbehavior = d3.behavior.drag()
            .origin(function(d) {
                var p = projection(d);
@@ -208,12 +208,14 @@ iD.Map = function(elem) {
        };
    }

+    function zoomPan() {
+        projection
+            .translate(d3.event.translate)
+            .scale(d3.event.scale);
+        redraw();
+    }
+
    function redraw() {
-        if (d3.event) {
-            projection
-                .translate(d3.event.translate)
-                .scale(d3.event.scale);
-        }
        dispatch.move(map);
        tileclient.redraw();
        if (getZoom() > 13) {
@@ -234,6 +236,18 @@ iD.Map = function(elem) {
            projection.invert([width, height])];
    }

+    function pointLocation(p) {
+        var translate = projection.translate(),
+            scale = projection.scale();
+        return [(p[0] - translate[0]) / scale, (p[1] - translate[1]) / scale];
+    }
+
+    function locationPoint(l) {
+        var translate = projection.translate(),
+            scale = projection.scale();
+        return [l[0] * scale + translate[0], l[1] * scale + translate[1]];
+    }
+
    function getZoom(zoom) {
        var s = projection.scale();
        return Math.max(Math.log(s) / Math.log(2) - 7, 0);
@@ -241,15 +255,24 @@ iD.Map = function(elem) {

    function setZoom(zoom) {
        // summary:	Redraw the map at a new zoom level.
-        projection.scale(256 * Math.pow(2, zoom - 1));
+        var scale = 256 * Math.pow(2, zoom - 1);
+        var l = pointLocation([width / 2, height / 2]);
+        projection.scale(scale);
        zoombehavior.scale(projection.scale());
+
+        var t = projection.translate();
+        l = locationPoint(l);
+        t[0] += (width / 2) - l[0];
+        t[1] += (height / 2) - l[1];
+        projection.translate(t);
+
        drawVector();
        redraw();
        return map;
    }

-    function zoomIn() { return setZoom(getZoom() + 1); }
-    function zoomOut() { return setZoom(getZoom() - 1); }
+    function zoomIn() { return setZoom(Math.ceil(getZoom() + 1)); }
+    function zoomOut() { return setZoom(Math.floor(getZoom() - 1)); }

    function getCenter() {
        var ll = projection.invert([