GUI -- Topo View: define SVG layer; inject (sample) key bindings and install glyph definitions.

Change-Id: I1c063b0484a9cedcf8e57a35cc51c3c4b35c9329

@@ -40,6 +40,12 @@
 
 
     <script src="fw/mast/mast.js"></script>
     <script src="fw/mast/mast.js"></script>
 
 
+    <script src="fw/svg/svg.js"></script>
+    <script src="fw/svg/glyph.js"></script>
+    <script src="fw/svg/icon.js"></script>
+    <script src="fw/svg/map.js"></script>
+    <script src="fw/svg/zoom.js"></script>
+
     <!-- Framework and library stylesheets included here -->
     <!-- Framework and library stylesheets included here -->
     <!-- TODO: use a single catenated-minified file here -->
     <!-- TODO: use a single catenated-minified file here -->
     <link rel="stylesheet" href="onos.css">
     <link rel="stylesheet" href="onos.css">

@@ -23,43 +23,43 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
-    var coreDependencies = [
-        'ngRoute',
-        'onosUtil',
-        'onosMast'
-    ];
-
-    var viewDependencies = [
+    var moduleDependencies = [
+        // view modules...
         // TODO: inject view dependencies server side
         // TODO: inject view dependencies server side
-        // NOTE: 'ov' == 'Onos View'...
         // {INJECTED-VIEW-MODULE-DEPENDENCIES}
         // {INJECTED-VIEW-MODULE-DEPENDENCIES}
+        // NOTE: 'ov' == 'Onos View'...
         'ovSample',
         'ovSample',
         'ovTopo',
         'ovTopo',
-        // NOTE: dummy element allows all previous entries to end with comma
-        '___dummy___'
+        // (end of view modules)
+
+        // core modules...
+        'ngRoute',
+        'onosUtil',
+        'onosSvg',
+        'onosMast'
     ];
     ];
 
 
-    var dependencies = coreDependencies.concat(viewDependencies);
-    dependencies.pop(); // remove dummy
+    var $log;
 
 
-    angular.module('onosApp', dependencies)
+    angular.module('onosApp', moduleDependencies)
 
 
         .controller('OnosCtrl', [
         .controller('OnosCtrl', [
             '$log', '$route', '$routeParams', '$location',
             '$log', '$route', '$routeParams', '$location',
-            'KeyService', 'ThemeService',
+            'KeyService', 'ThemeService', 'GlyphService',
 
 
-        function (_$log_, $route, $routeParams, $location, ks, ts) {
-            var $log = _$log_,
-                self = this;
+        function (_$log_, $route, $routeParams, $location, ks, ts, gs) {
+            var self = this;
 
 
+            $log = _$log_;
             self.$route = $route;
             self.$route = $route;
             self.$routeParams = $routeParams;
             self.$routeParams = $routeParams;
             self.$location = $location;
             self.$location = $location;
             self.version = '1.1.0';
             self.version = '1.1.0';
 
 
-            // initialize onos (main app) controller here...
+            // initialize services...
             ts.init();
             ts.init();
             ks.installOn(d3.select('body'));
             ks.installOn(d3.select('body'));
+            gs.init();
 
 
             $log.log('OnosCtrl has been created');
             $log.log('OnosCtrl has been created');
 
 

@@ -27,3 +27,7 @@
     font-style: italic;
     font-style: italic;
     color: seagreen;
     color: seagreen;
 }
 }
+
+#ov-topo svg {
+    background-color: #88f;
+}

 <!-- Topology View partial HTML -->
 <!-- Topology View partial HTML -->
 <div id="ov-topo">
 <div id="ov-topo">
-    <h2> Topology View </h2>
-
-    <p>
-        This is a place-holder for the topology viewer.
-    </p>
-
-    <div class="msg"> {{ctrl.message}} </div>
+    <svg viewBox="0 0 1000 1000"></svg>
 </div>
 </div>

@@ -22,13 +22,65 @@
 
 
 (function () {
 (function () {
     'use strict';
     'use strict';
-    angular.module('ovTopo', ['onosUtil'])
-        .controller('OvTopoCtrl', ['$log', function (_$log_) {
-            var self = this,
-                $log = _$log_;
+
+    var moduleDependencies = [
+        'onosUtil',
+        'onosSvg'
+    ];
+
+    // references to injected services etc.
+    var $log, ks, gs;
+
+    // DOM elements
+    var defs;
+
+    // Internal state
+    // ...
+
+    // Note: "exported" state should be properties on 'self' variable
+
+    var keyBindings = {
+        W: [logWarning, 'log a warning'],
+        E: [logError, 'log an error']
+    };
+
+    // -----------------
+    // these functions are necessarily temporary examples....
+    function logWarning() {
+        $log.warn('You have been warned!');
+    }
+    function logError() {
+        $log.error('You are erroneous!');
+    }
+    // -----------------
+
+    function setUpKeys() {
+        ks.keyBindings(keyBindings);
+    }
+
+    function setUpDefs() {
+        defs = d3.select('#ov-topo svg').append('defs');
+        gs.loadDefs(defs);
+    }
+
+
+    angular.module('ovTopo', moduleDependencies)
+
+        .controller('OvTopoCtrl', [
+            '$log', 'KeyService', 'GlyphService',
+
+        function (_$log_, _ks_, _gs_) {
+            var self = this;
+
+            $log = _$log_;
+            ks = _ks_;
+            gs = _gs_;
 
 
             self.message = 'Topo View Rocks!';
             self.message = 'Topo View Rocks!';
 
 
-         $log.log('OvTopoCtrl has been created');
+            setUpKeys();
+            setUpDefs();
+
+            $log.log('OvTopoCtrl has been created');
         }]);
         }]);
 }());
 }());