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
Showing
6 changed files
with
75 additions
and
12 deletions
... | @@ -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) | ... | ... |
... | @@ -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(); | ... | ... |
-
Please register or login to post a comment