Simon Hunt
Committed by Brian O'Connor

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 @@ ...@@ -44,7 +44,7 @@
44 fs = _fs_; 44 fs = _fs_;
45 gds = _gds_; 45 gds = _gds_;
46 46
47 - function loadMapInto(mapLayer, id) { 47 + function loadMapInto(mapLayer, id, opts) {
48 var promise = gds.fetchTopoData(id); 48 var promise = gds.fetchTopoData(id);
49 if (!promise) { 49 if (!promise) {
50 $log.warn('Failed to load map: ' + id); 50 $log.warn('Failed to load map: ' + id);
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 } 52 }
53 53
54 promise.then(function () { 54 promise.then(function () {
55 - var gen = gds.createPathGenerator(promise.topodata); 55 + var gen = gds.createPathGenerator(promise.topodata, opts);
56 56
57 mapLayer.selectAll('path') 57 mapLayer.selectAll('path')
58 .data(gen.geodata.features) 58 .data(gen.geodata.features)
......
...@@ -39,6 +39,8 @@ body { ...@@ -39,6 +39,8 @@ body {
39 39
40 #view { 40 #view {
41 padding: 6px; 41 padding: 6px;
42 + width: 100%;
43 + height: 100%;
42 } 44 }
43 45
44 #view h2 { 46 #view h2 {
......
...@@ -44,6 +44,37 @@ ...@@ -44,6 +44,37 @@
44 44
45 angular.module('onosApp', moduleDependencies) 45 angular.module('onosApp', moduleDependencies)
46 46
47 + // Create a resize directive, that we can apply to elements to
48 + // respond to window resize events.
49 + .directive('resize', ['$window', function ($window) {
50 + return function (scope, element, attrs) {
51 + var w = angular.element($window);
52 + scope.$watch(function () {
53 + return {
54 + h: window.innerHeight,
55 + w: window.innerWidth
56 + };
57 + }, function (newVal, oldVal) {
58 + scope.windowHeight = newVal.h;
59 + scope.windowWidth = newVal.w;
60 +
61 + scope.resizeWithOffset = function (offH, offW) {
62 + var oh = offH || 0,
63 + ow = offW || 0;
64 + scope.$eval(attrs.notifier);
65 + return {
66 + height: (newVal.h - oh) + 'px',
67 + width: (newVal.w - ow) + 'px'
68 + };
69 + };
70 + }, true);
71 +
72 + w.bind('resize', function () {
73 + scope.$apply();
74 + });
75 + };
76 + }])
77 +
47 .controller('OnosCtrl', [ 78 .controller('OnosCtrl', [
48 '$log', '$route', '$routeParams', '$location', 79 '$log', '$route', '$routeParams', '$location',
49 'KeyService', 'ThemeService', 'GlyphService', 80 'KeyService', 'ThemeService', 'GlyphService',
......
...@@ -29,5 +29,13 @@ ...@@ -29,5 +29,13 @@
29 } 29 }
30 30
31 #ov-topo svg { 31 #ov-topo svg {
32 - background-color: #dde; 32 + background-color: #fff;
33 + border: 1px solid red;
33 } 34 }
35 +
36 +#ov-topo svg #topo-map {
37 + stroke-width: 2px;
38 + /*stroke: #eee;*/
39 + stroke: #445;
40 + fill: transparent;
41 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 <!-- Topology View partial HTML --> 1 <!-- Topology View partial HTML -->
2 <div id="ov-topo"> 2 <div id="ov-topo">
3 - <svg viewBox="0 0 1000 1000"></svg> 3 + <svg viewBox="0 0 1000 1000"
4 + resize
5 + ng-style="resizeWithOffset(56, 12)"
6 + notifier="notifyResize(params)"></svg>
4 </div> 7 </div>
......
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
29 ]; 29 ];
30 30
31 // references to injected services etc. 31 // references to injected services etc.
32 - var $log, ks, zs, gs, ms; 32 + var $log, $window, ks, zs, gs, ms;
33 33
34 // DOM elements 34 // DOM elements
35 - var svg, defs, zoomLayer, map; 35 + var ovtopo, svg, defs, zoomLayer, map;
36 36
37 // Internal state 37 // Internal state
38 var zoomer; 38 var zoomer;
...@@ -104,8 +104,22 @@ ...@@ -104,8 +104,22 @@
104 // --- Background Map ------------------------------------------------ 104 // --- Background Map ------------------------------------------------
105 105
106 function setUpMap() { 106 function setUpMap() {
107 - map = zoomLayer.append('g').attr('id', '#topo-map'); 107 + map = zoomLayer.append('g').attr('id', 'topo-map');
108 + //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
108 ms.loadMapInto(map, '*continental_us'); 109 ms.loadMapInto(map, '*continental_us');
110 +
111 + // temp code for calibration
112 + var points = [
113 + [0, 0], [0, 1000], [1000, 0], [1000, 1000]
114 + ];
115 + map.selectAll('circle')
116 + .data(points)
117 + .enter()
118 + .append('circle')
119 + .attr('cx', function (d) { return d[0]; })
120 + .attr('cy', function (d) { return d[1]; })
121 + .attr('r', 5)
122 + .style('fill', 'red');
109 } 123 }
110 124
111 // --- Controller Definition ----------------------------------------- 125 // --- Controller Definition -----------------------------------------
...@@ -113,21 +127,26 @@ ...@@ -113,21 +127,26 @@
113 angular.module('ovTopo', moduleDependencies) 127 angular.module('ovTopo', moduleDependencies)
114 128
115 .controller('OvTopoCtrl', [ 129 .controller('OvTopoCtrl', [
116 - '$log', 'KeyService', 'ZoomService', 'GlyphService', 'MapService', 130 + '$log', '$window',
131 + 'KeyService', 'ZoomService', 'GlyphService', 'MapService',
117 132
118 - function (_$log_, _ks_, _zs_, _gs_, _ms_) { 133 + function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) {
119 var self = this; 134 var self = this;
120 $log = _$log_; 135 $log = _$log_;
136 + $window = _$window_;
121 ks = _ks_; 137 ks = _ks_;
122 zs = _zs_; 138 zs = _zs_;
123 gs = _gs_; 139 gs = _gs_;
124 ms = _ms_; 140 ms = _ms_;
125 141
126 - // exported state 142 + self.notifyResize = function () {
127 - self.message = 'Topo View Rocks!'; 143 + $log.log('Hey, we changed size');
144 + };
128 145
129 // svg layer and initialization of components 146 // svg layer and initialization of components
130 - svg = d3.select('#ov-topo svg'); 147 + ovtopo = d3.select('#ov-topo');
148 + svg = ovtopo.select('svg');
149 +
131 setUpKeys(); 150 setUpKeys();
132 setUpDefs(); 151 setUpDefs();
133 setUpZoom(); 152 setUpZoom();
......