GUI -- Further tweaking of the background map loading code, to properly align the map in the view.

- still WIP, as we need to invoke a resized() callback in the controller so that the view can also respond to the event. 

Change-Id: I55fa5e52c70e208924ad22d389e2002c66cb37ef

@@ -44,7 +44,7 @@
             fs = _fs_;
             fs = _fs_;
             gds = _gds_;
             gds = _gds_;
 
 
-            function loadMapInto(mapLayer, id) {
+            function loadMapInto(mapLayer, id, opts) {
                 var promise = gds.fetchTopoData(id);
                 var promise = gds.fetchTopoData(id);
                 if (!promise) {
                 if (!promise) {
                     $log.warn('Failed to load map: ' + id);
                     $log.warn('Failed to load map: ' + id);
@@ -52,7 +52,7 @@
                 }
                 }
 
 
                 promise.then(function () {
                 promise.then(function () {
-                    var gen = gds.createPathGenerator(promise.topodata);
+                    var gen = gds.createPathGenerator(promise.topodata, opts);
 
 
                     mapLayer.selectAll('path')
                     mapLayer.selectAll('path')
                         .data(gen.geodata.features)
                         .data(gen.geodata.features)

@@ -39,6 +39,8 @@ body {
 
 
 #view {
 #view {
     padding: 6px;
     padding: 6px;
+    width: 100%;
+    height: 100%;
 }
 }
 
 
 #view h2 {
 #view h2 {

@@ -44,6 +44,37 @@
 
 
     angular.module('onosApp', moduleDependencies)
     angular.module('onosApp', moduleDependencies)
 
 
+        // Create a resize directive, that we can apply to elements to
+        // respond to window resize events.
+        .directive('resize', ['$window', function ($window) {
+            return function (scope, element, attrs) {
+                var w = angular.element($window);
+                scope.$watch(function () {
+                    return {
+                        h: window.innerHeight,
+                        w: window.innerWidth
+                    };
+                }, function (newVal, oldVal) {
+                    scope.windowHeight = newVal.h;
+                    scope.windowWidth = newVal.w;
+
+                    scope.resizeWithOffset = function (offH, offW) {
+                        var oh = offH || 0,
+                            ow = offW || 0;
+                        scope.$eval(attrs.notifier);
+                        return {
+                            height: (newVal.h - oh) + 'px',
+                            width: (newVal.w - ow) + 'px'
+                        };
+                    };
+                }, true);
+
+                w.bind('resize', function () {
+                    scope.$apply();
+                });
+            };
+        }])
+
         .controller('OnosCtrl', [
         .controller('OnosCtrl', [
             '$log', '$route', '$routeParams', '$location',
             '$log', '$route', '$routeParams', '$location',
             'KeyService', 'ThemeService', 'GlyphService',
             'KeyService', 'ThemeService', 'GlyphService',

@@ -29,5 +29,13 @@
 }
 }
 
 
 #ov-topo svg {
 #ov-topo svg {
-    background-color: #dde;
+    background-color: #fff;
+    border: 1px solid red;
 }
 }
+
+#ov-topo svg #topo-map {
+    stroke-width: 2px;
+    /*stroke: #eee;*/
+    stroke: #445;
+    fill: transparent;
+}
\ No newline at end of file

 <!-- Topology View partial HTML -->
 <!-- Topology View partial HTML -->
 <div id="ov-topo">
 <div id="ov-topo">
-    <svg viewBox="0 0 1000 1000"></svg>
+    <svg viewBox="0 0 1000 1000"
+         resize
+         ng-style="resizeWithOffset(56, 12)"
+         notifier="notifyResize(params)"></svg>
 </div>
 </div>

@@ -29,10 +29,10 @@
     ];
     ];
 
 
     // references to injected services etc.
     // references to injected services etc.
-    var $log, ks, zs, gs, ms;
+    var $log, $window, ks, zs, gs, ms;
 
 
     // DOM elements
     // DOM elements
-    var svg, defs, zoomLayer, map;
+    var ovtopo, svg, defs, zoomLayer, map;
 
 
     // Internal state
     // Internal state
     var zoomer;
     var zoomer;
@@ -104,8 +104,22 @@
     // --- Background Map ------------------------------------------------
     // --- Background Map ------------------------------------------------
 
 
     function setUpMap() {
     function setUpMap() {
-        map = zoomLayer.append('g').attr('id', '#topo-map');
+        map = zoomLayer.append('g').attr('id', 'topo-map');
+        //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
         ms.loadMapInto(map, '*continental_us');
         ms.loadMapInto(map, '*continental_us');
+
+        // temp code for calibration
+        var points = [
+            [0, 0], [0, 1000], [1000, 0], [1000, 1000]
+        ];
+        map.selectAll('circle')
+            .data(points)
+            .enter()
+            .append('circle')
+            .attr('cx', function (d) { return d[0]; })
+            .attr('cy', function (d) { return d[1]; })
+            .attr('r', 5)
+            .style('fill', 'red');
     }
     }
 
 
     // --- Controller Definition -----------------------------------------
     // --- Controller Definition -----------------------------------------
@@ -113,21 +127,26 @@
     angular.module('ovTopo', moduleDependencies)
     angular.module('ovTopo', moduleDependencies)
 
 
         .controller('OvTopoCtrl', [
         .controller('OvTopoCtrl', [
-            '$log', 'KeyService', 'ZoomService', 'GlyphService', 'MapService',
+            '$log', '$window',
+            'KeyService', 'ZoomService', 'GlyphService', 'MapService',
 
 
-        function (_$log_, _ks_, _zs_, _gs_, _ms_) {
+        function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) {
             var self = this;
             var self = this;
             $log = _$log_;
             $log = _$log_;
+            $window = _$window_;
             ks = _ks_;
             ks = _ks_;
             zs = _zs_;
             zs = _zs_;
             gs = _gs_;
             gs = _gs_;
             ms = _ms_;
             ms = _ms_;
 
 
-            // exported state
-            self.message = 'Topo View Rocks!';
+            self.notifyResize = function () {
+                $log.log('Hey, we changed size');
+            };
 
 
             // svg layer and initialization of components
             // svg layer and initialization of components
-            svg = d3.select('#ov-topo svg');
+            ovtopo = d3.select('#ov-topo');
+            svg = ovtopo.select('svg');
+
             setUpKeys();
             setUpKeys();
             setUpDefs();
             setUpDefs();
             setUpZoom();
             setUpZoom();