Topo2: position grid nodes it relation to the sprite layer size
Change-Id: I634b89dcc60c2a9aafbe0ec08d6075892d5063f6
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
index 094e169..1795df4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -130,6 +130,7 @@
function currentLayout(data) {
$log.debug('>> topo2CurrentLayout event:', data);
t2bcs.addBreadcrumb(data.crumbs);
+ t2rs.addLayout(data);
}
function currentRegion(data) {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js b/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
index 694af14..f384619 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2NodePosition.js
@@ -23,7 +23,7 @@
'use strict';
// Injected vars
- var rs, t2mcs;
+ var rs, t2mcs, t2sls;
// Internal state;
var nearDist = 15;
@@ -107,8 +107,19 @@
return true;
}
- // TODO: handle case where loc.type === 'grid'
- // implying loc.gridX and loc.gridY hold values
+ if (loc && loc.type === 'grid') {
+
+ if (loc.gridX === 0 && loc.gridY === 0) {
+ return false;
+ }
+
+ coord = coordFromXY(loc);
+ el.fixed = true;
+ el.x = el.px = coord[0];
+ el.y = el.py = coord[1];
+
+ return true;
+ }
}
function coordFromLngLat(loc) {
@@ -116,13 +127,22 @@
return p ? p([loc.lng, loc.lat]) : [0, 0];
}
+ function coordFromXY(loc) {
+ // 1000 is a hardcoded HTML value of the SVG element (topo2.html)
+ var x = (1000 / t2sls.getWidth()) * loc.gridX,
+ y = (1000 / t2sls.getHeight()) * loc.gridY;
+
+ return [x, y];
+ }
+
angular.module('ovTopo2')
.factory('Topo2NodePositionService',
- ['RandomService', 'Topo2MapConfigService',
- function (_rs_, _t2mcs_) {
+ ['RandomService', 'Topo2MapConfigService', 'Topo2SpriteLayerService',
+ function (_rs_, _t2mcs_, _t2sls_) {
rs = _rs_;
t2mcs = _t2mcs_;
+ t2sls = _t2sls_;
return {
positionNode: positionNode,
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index 929f1c9..ba1a8c4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -45,6 +45,17 @@
instance = this;
this.model = null;
},
+ addLayout: function (data) {
+
+ // TODO: Dynamically change the Geo Map from the layout data
+
+ if (data.bgType === 'grid') {
+ t2sls.loadLayout(data.bgId);
+ t2sls.show();
+ } else {
+ t2sls.hide();
+ }
+ },
addRegion: function (data) {
var RegionModel = Model.extend({
@@ -73,13 +84,6 @@
t2bcs.hide();
}
- // TODO: This should load the sprite layer from the region data
- if (this.model.get('id') === 'c01') {
- t2sls.loadLayout('segmentRouting');
- t2sls.show();
- } else {
- t2sls.hide();
- }
},
isRootRegion: function () {
return this.model.get('id') === ROOT;
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
index 95a785e..411d130 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -44,13 +44,22 @@
loadLayout: function (id) {
this.container.selectAll("*").remove();
this.layout = ss.layout(id);
+
+ this.width = this.layout.data.w;
+ this.height = this.layout.data.h;
+
this.renderLayout();
},
createSpriteDefs: function () {
this.defs = this.svg.append('defs')
.attr('id', 'sprites');
},
-
+ getWidth: function () {
+ return this.width;
+ },
+ getHeight: function () {
+ return this.height;
+ },
renderSprite: function (spriteData) {
var id = spriteData.sprite.data.id,
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index cf1812e..aa751ea 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -132,7 +132,7 @@
<link rel="stylesheet" href="app/fw/widget/table-theme.css">
<!-- Under development for Region support. -->
- <!--<script src="app/view/topo2/topo2.js"></script>
+ <!-- <script src="app/view/topo2/topo2.js"></script>
<script src="app/view/topo2/topo2Breadcrumb.js"></script>
<script src="app/view/topo2/topo2Collection.js"></script>
<script src="app/view/topo2/topo2D3.js"></script>
@@ -160,6 +160,7 @@
<script src="app/view/topo2/topo2Prefs.js"></script>
<script src="app/view/topo2/topo2Region.js"></script>
<script src="app/view/topo2/topo2Select.js"></script>
+ <script src="app/view/topo2/topo2SpriteLayer.js"></script>
<script src="app/view/topo2/topo2SummaryPanel.js"></script>
<script src="app/view/topo2/topo2SubRegion.js"></script>
<script src="app/view/topo2/topo2SubRegionPanel.js"></script>
@@ -169,7 +170,7 @@
<script src="app/view/topo2/topo2Zoom.js"></script>
<script src="app/view/topo2/uiView.js"></script>
<link rel="stylesheet" href="app/view/topo2/topo2.css">
- <link rel="stylesheet" href="app/view/topo2/topo2-theme.css">-->
+ <link rel="stylesheet" href="app/view/topo2/topo2-theme.css"> -->
<!-- Builtin views javascript. -->