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
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
new file mode 100644
index 0000000..2cb6dc1
--- /dev/null
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -0,0 +1,59 @@
+/*
+ * 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();
+ });
+ };
+ }])
+
+}());
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 5fa0364..109af4c 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -32,6 +32,7 @@
<!-- ONOS UI Framework included here -->
<!-- TODO: use a single catenated-minified file here -->
<script src="onos.js"></script>
+ <script src="directives.js"></script>
<script src="fw/util/util.js"></script>
<script src="fw/util/fn.js"></script>
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index a8669db..8f4a618 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -44,37 +44,6 @@
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', [
'$log', '$route', '$routeParams', '$location',
'KeyService', 'ThemeService', 'GlyphService',
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 48c879a..01300ff 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -20,22 +20,15 @@
@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 {
background-color: #fff;
- border: 1px solid red;
+ /* For Debugging the placement of the SVG layer... */
+ /*border: 1px solid red;*/
}
#ov-topo svg #topo-map {
stroke-width: 2px;
/*stroke: #eee;*/
- stroke: #445;
+ stroke: #88b;
fill: transparent;
}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.html b/web/gui/src/main/webapp/app/view/topo/topo.html
index 2e25c74..8ed618b 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.html
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -3,5 +3,5 @@
<svg viewBox="0 0 1000 1000"
resize
ng-style="resizeWithOffset(56, 12)"
- notifier="notifyResize(params)"></svg>
+ notifier="ctrl.notifyResize()"></svg>
</div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 733e0c0..cb0c44e 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -29,7 +29,7 @@
];
// references to injected services etc.
- var $log, $window, ks, zs, gs, ms;
+ var $log, ks, zs, gs, ms;
// DOM elements
var ovtopo, svg, defs, zoomLayer, map;
@@ -86,8 +86,8 @@
sc = zoomer.scale();
$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() {
@@ -101,13 +101,14 @@
}
+ // callback invoked when the SVG view has been resized..
+ function svgResized(w, h) {
+ // not used now, but may be required later...
+ }
+
// --- Background Map ------------------------------------------------
- function setUpMap() {
- map = zoomLayer.append('g').attr('id', 'topo-map');
- //ms.loadMapInto(map, '*continental_us', {mapFillScale:0.5});
- ms.loadMapInto(map, '*continental_us');
-
+ function showCallibrationPoints() {
// temp code for calibration
var points = [
[0, 0], [0, 1000], [1000, 0], [1000, 1000]
@@ -122,25 +123,31 @@
.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 -----------------------------------------
angular.module('ovTopo', moduleDependencies)
.controller('OvTopoCtrl', [
- '$log', '$window',
+ '$log',
'KeyService', 'ZoomService', 'GlyphService', 'MapService',
- function (_$log_, _$window_, _ks_, _zs_, _gs_, _ms_) {
+ function (_$log_, _ks_, _zs_, _gs_, _ms_) {
var self = this;
$log = _$log_;
- $window = _$window_;
ks = _ks_;
zs = _zs_;
gs = _gs_;
ms = _ms_;
self.notifyResize = function () {
- $log.log('Hey, we changed size');
+ svgResized(svg.style('width'), svg.style('height'));
};
// svg layer and initialization of components
diff --git a/web/gui/src/main/webapp/tests/karma.conf.js b/web/gui/src/main/webapp/tests/karma.conf.js
index 56b8607..6f0628f 100644
--- a/web/gui/src/main/webapp/tests/karma.conf.js
+++ b/web/gui/src/main/webapp/tests/karma.conf.js
@@ -26,6 +26,7 @@
// production code...
// make sure modules are defined first...
'../app/onos.js',
+ '../app/directives.js',
'../app/fw/util/util.js',
'../app/fw/svg/svg.js',
// now load services etc. that augment the modules