GUI -- Continued porting topology behavior over to the new codebase. WIP.
- added FnService.windowSize() function.
- added MastService and mastHeight() function.
- implemented SvgUtilService.createDragBehavior().
Change-Id: I5dae35244ab8220e1b95ddfd55b180e6adcb7a00
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 8bff419..a22e7ba 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -28,7 +28,7 @@
];
// references to injected services etc.
- var $log, ks, zs, gs, ms, ps, tes, tfs;
+ var $log, fs, ks, zs, gs, ms, ps, tes, tfs;
// DOM elements
var ovtopo, svg, defs, zoomLayer, mapG, forceG;
@@ -102,7 +102,8 @@
// callback invoked when the SVG view has been resized..
function svgResized(w, h) {
- // not used now, but may be required later...
+ $log.debug('TopoView just resized... ' + w + 'x' + h);
+ tfs.resize(w, h);
}
// --- Background Map ------------------------------------------------
@@ -133,7 +134,7 @@
function setUpForce() {
forceG = zoomLayer.append('g').attr('id', 'topo-force');
- tfs.initForce(forceG);
+ tfs.initForce(forceG, svg.attr('width'), svg.attr('height'));
}
@@ -143,13 +144,15 @@
.controller('OvTopoCtrl', [
'$scope', '$log', '$location', '$timeout',
+ 'FnService', 'MastService',
'KeyService', 'ZoomService', 'GlyphService', 'MapService',
'PanelService', 'TopoEventService', 'TopoForceService',
- function ($scope, _$log_, $loc, $timeout,
+ function ($scope, _$log_, $loc, $timeout, _fs_, mast,
_ks_, _zs_, _gs_, _ms_, _ps_, _tes_, _tfs_) {
var self = this;
$log = _$log_;
+ fs = _fs_;
ks = _ks_;
zs = _zs_;
gs = _gs_;
@@ -159,7 +162,7 @@
tfs = _tfs_;
self.notifyResize = function () {
- svgResized(svg.style('width'), svg.style('height'));
+ svgResized(svg.attr('width'), svg.attr('height'));
};
// Cleanup on destroyed scope..
@@ -172,6 +175,8 @@
// svg layer and initialization of components
ovtopo = d3.select('#ov-topo');
svg = ovtopo.select('svg');
+ // set the svg size to match that of the window, less the masthead
+ svg.attr(fs.windowSize(mast.mastHeight()));
// bind to topo event dispatcher..
evDispatcher = tes.bindDispatcher('TODO: topo-DOM-elements-here');
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index 6c3d501..196188c 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -96,8 +96,9 @@
// forceG is the SVG group to display the force layout in
// w, h are the initial dimensions of the SVG
// opts are, well, optional :)
- function initForce (forceG, w, h, opts) {
- // TODO: create the force layout and initialize
+ function initForce(forceG, w, h, opts) {
+ $log.debug('initForce().. WxH = ' + w + 'x' + h);
+
settings = angular.extend({}, defaultSettings, opts);
linkG = forceG.append('g').attr('id', 'topo-links');
@@ -109,7 +110,7 @@
node = nodeG.selectAll('.node');
force = d3.layout.force()
- .size(w, h)
+ .size([w, h])
.nodes(network.nodes)
.links(network.links)
.gravity(settings.gravity)
@@ -124,8 +125,9 @@
}
function resize(w, h) {
- force.size(w, h);
+ force.size([w, h]);
// Review -- do we need to nudge the layout ?
+
}
return {