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

+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Our own Angular directives defined here.
+
+ @author Simon Hunt
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('onosApp')
+
+        // Create a resize directive, that we can apply to elements
+        // so that they can 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();
+                });
+            };
+        }])
+
+}());

@@ -32,6 +32,7 @@
     <!-- ONOS UI Framework included here -->
     <!-- ONOS UI Framework included here -->
     <!-- TODO: use a single catenated-minified file here -->
     <!-- TODO: use a single catenated-minified file here -->
     <script src="onos.js"></script>
     <script src="onos.js"></script>
+    <script src="directives.js"></script>
 
 
     <script src="fw/util/util.js"></script>
     <script src="fw/util/util.js"></script>
     <script src="fw/util/fn.js"></script>
     <script src="fw/util/fn.js"></script>

@@ -44,37 +44,6 @@
 
 
     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',

@@ -20,22 +20,15 @@
  @author Simon Hunt
  @author Simon Hunt
  */
  */
 
 
-#ov-topo .msg {
-    font-family: "Bookman", Georgia, "Times New Roman", serif;
-    font-size: 40pt;
-    font-weight: bold;
-    font-style: italic;
-    color: seagreen;
-}
-
 #ov-topo svg {
 #ov-topo svg {
     background-color: #fff;
     background-color: #fff;
-    border: 1px solid red;
+    /* For Debugging the placement of the SVG layer... */
+    /*border: 1px solid red;*/
 }
 }
 
 
 #ov-topo svg #topo-map {
 #ov-topo svg #topo-map {
     stroke-width: 2px;
     stroke-width: 2px;
     /*stroke: #eee;*/
     /*stroke: #eee;*/
-    stroke: #445;
+    stroke: #88b;
     fill: transparent;
     fill: transparent;
 }
 }
\ No newline at end of file

@@ -3,5 +3,5 @@
     <svg viewBox="0 0 1000 1000"
     <svg viewBox="0 0 1000 1000"
          resize
          resize
          ng-style="resizeWithOffset(56, 12)"
          ng-style="resizeWithOffset(56, 12)"
-         notifier="notifyResize(params)"></svg>
+         notifier="ctrl.notifyResize()"></svg>
 </div>
 </div>

@@ -29,7 +29,7 @@
     ];
     ];
 
 
     // references to injected services etc.
     // references to injected services etc.
-    var $log, $window, ks, zs, gs, ms;
+    var $log, ks, zs, gs, ms;
 
 
     // DOM elements
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, map;
     var ovtopo, svg, defs, zoomLayer, map;
@@ -86,8 +86,8 @@
             sc = zoomer.scale();
             sc = zoomer.scale();
         $log.log('ZOOM: translate = ' + tr + ', scale = ' + sc);
         $log.log('ZOOM: translate = ' + tr + ', scale = ' + sc);
 
 
-        // TODO: keep the map lines constant width while zooming
-        //bgImg.style('stroke-width', 2.0 / scale + 'px');
+        // keep the map lines constant width while zooming
+        map.style('stroke-width', (2.0 / sc) + 'px');
     }
     }
 
 
     function setUpZoom() {
     function setUpZoom() {
@@ -101,13 +101,14 @@
     }
     }
 
 
 
 
-    // --- Background Map ------------------------------------------------
+    // callback invoked when the SVG view has been resized..
+    function svgResized(w, h) {
+        // not used now, but may be required later...
+    }
 
 
-    function setUpMap() {
-        map = zoomLayer.append('g').attr('id', 'topo-map');
-        //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
-        ms.loadMapInto(map, '*continental_us');
+    // --- Background Map ------------------------------------------------
 
 
+    function showCallibrationPoints() {
         // temp code for calibration
         // temp code for calibration
         var points = [
         var points = [
             [0, 0], [0, 1000], [1000, 0], [1000, 1000]
             [0, 0], [0, 1000], [1000, 0], [1000, 1000]
@@ -122,25 +123,31 @@
             .style('fill', 'red');
             .style('fill', 'red');
     }
     }
 
 
+    function setUpMap() {
+        map = zoomLayer.append('g').attr('id', 'topo-map');
+        //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
+        ms.loadMapInto(map, '*continental_us');
+        //showCallibrationPoints();
+    }
+
     // --- Controller Definition -----------------------------------------
     // --- Controller Definition -----------------------------------------
 
 
     angular.module('ovTopo', moduleDependencies)
     angular.module('ovTopo', moduleDependencies)
 
 
         .controller('OvTopoCtrl', [
         .controller('OvTopoCtrl', [
-            '$log', '$window',
+            '$log',
             'KeyService', 'ZoomService', 'GlyphService', 'MapService',
             'KeyService', 'ZoomService', 'GlyphService', 'MapService',
 
 
-        function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) {
+        function (_$log_, _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_;
 
 
             self.notifyResize = function () {
             self.notifyResize = function () {
-                $log.log('Hey, we changed size');
+                svgResized(svg.style('width'), svg.style('height'));
             };
             };
 
 
             // svg layer and initialization of components
             // svg layer and initialization of components

@@ -26,6 +26,7 @@ module.exports = function(config) {
         // production code...
         // production code...
         // make sure modules are defined first...
         // make sure modules are defined first...
         '../app/onos.js',
         '../app/onos.js',
+        '../app/directives.js',
         '../app/fw/util/util.js',
         '../app/fw/util/util.js',
         '../app/fw/svg/svg.js',
         '../app/fw/svg/svg.js',
         // now load services etc. that augment the modules
         // now load services etc. that augment the modules