Simon Hunt

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
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
......