GUI -- Finally got map resize working correctly, including the resized callback in topo code.
- Created directives.js file to hold custom directives definitions. Change-Id: Iecdbfe81fd8c5719f6da4f67fd9986ffa70c35df
Showing
7 changed files
with
84 additions
and
54 deletions
web/gui/src/main/webapp/app/directives.js
0 → 100644
1 | +/* | ||
2 | + * Copyright 2015 Open Networking Laboratory | ||
3 | + * | ||
4 | + * Licensed under the Apache License, Version 2.0 (the "License"); | ||
5 | + * you may not use this file except in compliance with the License. | ||
6 | + * You may obtain a copy of the License at | ||
7 | + * | ||
8 | + * http://www.apache.org/licenses/LICENSE-2.0 | ||
9 | + * | ||
10 | + * Unless required by applicable law or agreed to in writing, software | ||
11 | + * distributed under the License is distributed on an "AS IS" BASIS, | ||
12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
13 | + * See the License for the specific language governing permissions and | ||
14 | + * limitations under the License. | ||
15 | + */ | ||
16 | + | ||
17 | +/* | ||
18 | + ONOS GUI -- Our own Angular directives defined here. | ||
19 | + | ||
20 | + @author Simon Hunt | ||
21 | + */ | ||
22 | + | ||
23 | +(function () { | ||
24 | + 'use strict'; | ||
25 | + | ||
26 | + angular.module('onosApp') | ||
27 | + | ||
28 | + // Create a resize directive, that we can apply to elements | ||
29 | + // so that they can respond to window resize events. | ||
30 | + .directive('resize', ['$window', function ($window) { | ||
31 | + return function (scope, element, attrs) { | ||
32 | + var w = angular.element($window); | ||
33 | + scope.$watch(function () { | ||
34 | + return { | ||
35 | + h: window.innerHeight, | ||
36 | + w: window.innerWidth | ||
37 | + }; | ||
38 | + }, function (newVal, oldVal) { | ||
39 | + scope.windowHeight = newVal.h; | ||
40 | + scope.windowWidth = newVal.w; | ||
41 | + | ||
42 | + scope.resizeWithOffset = function (offH, offW) { | ||
43 | + var oh = offH || 0, | ||
44 | + ow = offW || 0; | ||
45 | + scope.$eval(attrs.notifier); | ||
46 | + return { | ||
47 | + height: (newVal.h - oh) + 'px', | ||
48 | + width: (newVal.w - ow) + 'px' | ||
49 | + }; | ||
50 | + }; | ||
51 | + }, true); | ||
52 | + | ||
53 | + w.bind('resize', function () { | ||
54 | + scope.$apply(); | ||
55 | + }); | ||
56 | + }; | ||
57 | + }]) | ||
58 | + | ||
59 | +}()); |
... | @@ -32,6 +32,7 @@ | ... | @@ -32,6 +32,7 @@ |
32 | <!-- ONOS UI Framework included here --> | 32 | <!-- ONOS UI Framework included here --> |
33 | <!-- TODO: use a single catenated-minified file here --> | 33 | <!-- TODO: use a single catenated-minified file here --> |
34 | <script src="onos.js"></script> | 34 | <script src="onos.js"></script> |
35 | + <script src="directives.js"></script> | ||
35 | 36 | ||
36 | <script src="fw/util/util.js"></script> | 37 | <script src="fw/util/util.js"></script> |
37 | <script src="fw/util/fn.js"></script> | 38 | <script src="fw/util/fn.js"></script> | ... | ... |
... | @@ -44,37 +44,6 @@ | ... | @@ -44,37 +44,6 @@ |
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 | - | ||
78 | .controller('OnosCtrl', [ | 47 | .controller('OnosCtrl', [ |
79 | '$log', '$route', '$routeParams', '$location', | 48 | '$log', '$route', '$routeParams', '$location', |
80 | 'KeyService', 'ThemeService', 'GlyphService', | 49 | 'KeyService', 'ThemeService', 'GlyphService', | ... | ... |
... | @@ -20,22 +20,15 @@ | ... | @@ -20,22 +20,15 @@ |
20 | @author Simon Hunt | 20 | @author Simon Hunt |
21 | */ | 21 | */ |
22 | 22 | ||
23 | -#ov-topo .msg { | ||
24 | - font-family: "Bookman", Georgia, "Times New Roman", serif; | ||
25 | - font-size: 40pt; | ||
26 | - font-weight: bold; | ||
27 | - font-style: italic; | ||
28 | - color: seagreen; | ||
29 | -} | ||
30 | - | ||
31 | #ov-topo svg { | 23 | #ov-topo svg { |
32 | background-color: #fff; | 24 | background-color: #fff; |
33 | - border: 1px solid red; | 25 | + /* For Debugging the placement of the SVG layer... */ |
26 | + /*border: 1px solid red;*/ | ||
34 | } | 27 | } |
35 | 28 | ||
36 | #ov-topo svg #topo-map { | 29 | #ov-topo svg #topo-map { |
37 | stroke-width: 2px; | 30 | stroke-width: 2px; |
38 | /*stroke: #eee;*/ | 31 | /*stroke: #eee;*/ |
39 | - stroke: #445; | 32 | + stroke: #88b; |
40 | fill: transparent; | 33 | fill: transparent; |
41 | } | 34 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -3,5 +3,5 @@ | ... | @@ -3,5 +3,5 @@ |
3 | <svg viewBox="0 0 1000 1000" | 3 | <svg viewBox="0 0 1000 1000" |
4 | resize | 4 | resize |
5 | ng-style="resizeWithOffset(56, 12)" | 5 | ng-style="resizeWithOffset(56, 12)" |
6 | - notifier="notifyResize(params)"></svg> | 6 | + notifier="ctrl.notifyResize()"></svg> |
7 | </div> | 7 | </div> | ... | ... |
... | @@ -29,7 +29,7 @@ | ... | @@ -29,7 +29,7 @@ |
29 | ]; | 29 | ]; |
30 | 30 | ||
31 | // references to injected services etc. | 31 | // references to injected services etc. |
32 | - var $log, $window, ks, zs, gs, ms; | 32 | + var $log, ks, zs, gs, ms; |
33 | 33 | ||
34 | // DOM elements | 34 | // DOM elements |
35 | var ovtopo, svg, defs, zoomLayer, map; | 35 | var ovtopo, svg, defs, zoomLayer, map; |
... | @@ -86,8 +86,8 @@ | ... | @@ -86,8 +86,8 @@ |
86 | sc = zoomer.scale(); | 86 | sc = zoomer.scale(); |
87 | $log.log('ZOOM: translate = ' + tr + ', scale = ' + sc); | 87 | $log.log('ZOOM: translate = ' + tr + ', scale = ' + sc); |
88 | 88 | ||
89 | - // TODO: keep the map lines constant width while zooming | 89 | + // keep the map lines constant width while zooming |
90 | - //bgImg.style('stroke-width', 2.0 / scale + 'px'); | 90 | + map.style('stroke-width', (2.0 / sc) + 'px'); |
91 | } | 91 | } |
92 | 92 | ||
93 | function setUpZoom() { | 93 | function setUpZoom() { |
... | @@ -101,13 +101,14 @@ | ... | @@ -101,13 +101,14 @@ |
101 | } | 101 | } |
102 | 102 | ||
103 | 103 | ||
104 | - // --- Background Map ------------------------------------------------ | 104 | + // callback invoked when the SVG view has been resized.. |
105 | + function svgResized(w, h) { | ||
106 | + // not used now, but may be required later... | ||
107 | + } | ||
105 | 108 | ||
106 | - function setUpMap() { | 109 | + // --- Background Map ------------------------------------------------ |
107 | - map = zoomLayer.append('g').attr('id', 'topo-map'); | ||
108 | - //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5}); | ||
109 | - ms.loadMapInto(map, '*continental_us'); | ||
110 | 110 | ||
111 | + function showCallibrationPoints() { | ||
111 | // temp code for calibration | 112 | // temp code for calibration |
112 | var points = [ | 113 | var points = [ |
113 | [0, 0], [0, 1000], [1000, 0], [1000, 1000] | 114 | [0, 0], [0, 1000], [1000, 0], [1000, 1000] |
... | @@ -122,25 +123,31 @@ | ... | @@ -122,25 +123,31 @@ |
122 | .style('fill', 'red'); | 123 | .style('fill', 'red'); |
123 | } | 124 | } |
124 | 125 | ||
126 | + function setUpMap() { | ||
127 | + map = zoomLayer.append('g').attr('id', 'topo-map'); | ||
128 | + //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5}); | ||
129 | + ms.loadMapInto(map, '*continental_us'); | ||
130 | + //showCallibrationPoints(); | ||
131 | + } | ||
132 | + | ||
125 | // --- Controller Definition ----------------------------------------- | 133 | // --- Controller Definition ----------------------------------------- |
126 | 134 | ||
127 | angular.module('ovTopo', moduleDependencies) | 135 | angular.module('ovTopo', moduleDependencies) |
128 | 136 | ||
129 | .controller('OvTopoCtrl', [ | 137 | .controller('OvTopoCtrl', [ |
130 | - '$log', '$window', | 138 | + '$log', |
131 | 'KeyService', 'ZoomService', 'GlyphService', 'MapService', | 139 | 'KeyService', 'ZoomService', 'GlyphService', 'MapService', |
132 | 140 | ||
133 | - function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) { | 141 | + function (_$log_, _ks_, _zs_, _gs_, _ms_) { |
134 | var self = this; | 142 | var self = this; |
135 | $log = _$log_; | 143 | $log = _$log_; |
136 | - $window = _$window_; | ||
137 | ks = _ks_; | 144 | ks = _ks_; |
138 | zs = _zs_; | 145 | zs = _zs_; |
139 | gs = _gs_; | 146 | gs = _gs_; |
140 | ms = _ms_; | 147 | ms = _ms_; |
141 | 148 | ||
142 | self.notifyResize = function () { | 149 | self.notifyResize = function () { |
143 | - $log.log('Hey, we changed size'); | 150 | + svgResized(svg.style('width'), svg.style('height')); |
144 | }; | 151 | }; |
145 | 152 | ||
146 | // svg layer and initialization of components | 153 | // svg layer and initialization of components | ... | ... |
... | @@ -26,6 +26,7 @@ module.exports = function(config) { | ... | @@ -26,6 +26,7 @@ module.exports = function(config) { |
26 | // production code... | 26 | // production code... |
27 | // make sure modules are defined first... | 27 | // make sure modules are defined first... |
28 | '../app/onos.js', | 28 | '../app/onos.js', |
29 | + '../app/directives.js', | ||
29 | '../app/fw/util/util.js', | 30 | '../app/fw/util/util.js', |
30 | '../app/fw/svg/svg.js', | 31 | '../app/fw/svg/svg.js', |
31 | // now load services etc. that augment the modules | 32 | // now load services etc. that augment the modules | ... | ... |
-
Please register or login to post a comment