Add d3.selection.prototype.size

index.html

@@ -18,6 +18,7 @@
         <script type='text/javascript' src='js/lib/ohauth.js'></script>
         <script type='text/javascript' src='js/lib/jxon.js'></script>
         <script type='text/javascript' src='js/lib/d3.geo.tile.js'></script>
+        <script type='text/javascript' src='js/lib/d3.size.js'></script>
 
         <script type='text/javascript' src='js/id/id.js'></script>
         <script type='text/javascript' src='js/id/util.js'></script>

js/id/id.js

@@ -130,7 +130,7 @@ var iD = function(container) {
     });
 
     window.onresize = function() {
-        map.setSize([m.node().offsetWidth, m.node().offsetHeight]);
+        map.setSize(m.size());
     };
 
     d3.select(document).on('keydown', function() {

js/id/renderer/map.js

@@ -248,10 +248,14 @@ iD.Map = function(elem, connection) {
             .classed('active', classActive);
     }
 
-    function setSize(x) {
-        dimensions = x;
-        var attr = { width: dimensions[0], height: dimensions[1] };
-        surface.attr(attr).selectAll('#clip-rect').attr(attr);
+    function setSize(size) {
+        dimensions = size;
+
+        surface
+            .size(dimensions)
+            .selectAll('#clip-rect')
+            .size(dimensions);
+
         tileclient.setSize(dimensions);
         return map;
     }
@@ -532,7 +536,7 @@ iD.Map = function(elem, connection) {
     map.flush = flush;
     map.dblclickEnable = dblclickEnable;
 
-    setSize([parent.node().offsetWidth, parent.node().offsetHeight]);
+    setSize(parent.size());
     hideInspector();
     redraw();
 

js/lib/d3.size.js

@@ -0,0 +1,8 @@
+d3.selection.prototype.size = function (size) {
+    if (!arguments.length) {
+        var node = this.node();
+        return [node.offsetWidth,
+                node.offsetHeight];
+    }
+    return this.attr({width: size[0], height: size[1]});
+};

test/index.html

@@ -14,6 +14,7 @@
   <script type='text/javascript' src='../js/lib/d3.v3.js'></script>
   <script type='text/javascript' src='../js/lib/sha.js'></script>
   <script type='text/javascript' src='../js/lib/d3.geo.tile.js'></script>
+  <script type='text/javascript' src='../js/lib/d3.size.js'></script>
   <script type='text/javascript' src='../js/lib/ohauth.js'></script>
   <script type='text/javascript' src='../js/lib/jxon.js'></script>