Topo2: Implemented host icons
Change-Id: I457b49aa3c9662b5452b7c50311b2b5dfbb74f2f
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2D3.js b/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
index d32b55d..9123ac7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2D3.js
@@ -22,13 +22,6 @@
(function () {
'use strict';
- var is;
-
- // Configuration
- var hostRadius = 14;
-
- function init() {}
-
function nodeEnter(node) {
node.onEnter(this, node);
}
@@ -37,27 +30,8 @@
node.onExit(this, node);
}
- function hostLabel(d) {
- return d.get('id');
-
- // var idx = (hostLabelIndex < d.get('labels').length) ? hostLabelIndex : 0;
- // return d.labels[idx];
- }
-
- function hostEnter(d) {
- var node = d3.select(this),
- gid = d.get('type') || 'unknown',
- textDy = hostRadius + 10;
-
- d.el = node;
- // sus.visible(node, api.showHosts());
-
- is.addHostIcon(node, hostRadius, gid);
-
- node.append('text')
- .text(hostLabel)
- .attr('dy', textDy)
- .attr('text-anchor', 'middle');
+ function hostEnter(node) {
+ node.onEnter(this, node);
}
function linkEntering(link) {
@@ -66,19 +40,13 @@
angular.module('ovTopo2')
.factory('Topo2D3Service',
- ['IconService',
-
- function (_is_) {
- is = _is_;
-
- return {
- init: init,
- nodeEnter: nodeEnter,
- nodeExit: nodeExit,
- hostEnter: hostEnter,
- linkEntering: linkEntering
- };
- }
- ]
+ [function (_is_) {
+ return {
+ nodeEnter: nodeEnter,
+ nodeExit: nodeExit,
+ hostEnter: hostEnter,
+ linkEntering: linkEntering
+ };
+ }]
);
})();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
index d67fcff..9cc9f7e 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Host.js
@@ -24,6 +24,11 @@
var Collection, Model;
+ var hostIconDim = 20,
+ hostIconDimMin = 15,
+ hostIconDimMax = 20,
+ remappedDeviceTypes = {};
+
function createHostCollection(data, region) {
var HostCollection = Collection.extend({
@@ -43,12 +48,58 @@
angular.module('ovTopo2')
.factory('Topo2HostService', [
'Topo2Collection', 'Topo2NodeModel', 'Topo2ViewService',
- function (_Collection_, _NodeModel_, classnames, _t2vs_) {
+ 'IconService', 'Topo2ZoomService',
+ function (_Collection_, _NodeModel_, _t2vs_, is, zs) {
Collection = _Collection_;
Model = _NodeModel_.extend({
- nodeType: 'host'
+ nodeType: 'host',
+ icon: function () {
+ var type = this.get('type');
+ return remappedDeviceTypes[type] || type || 'endstation';
+ },
+ setScale: function () {
+
+ var dim = hostIconDim,
+ multipler = 1;
+
+ if (dim * zs.scale() < hostIconDimMin) {
+ multipler = hostIconDimMin / (dim * zs.scale());
+ } else if (dim * zs.scale() > hostIconDimMax) {
+ multipler = hostIconDimMax / (dim * zs.scale());
+ }
+
+ this.el.select('g').selectAll('*')
+ .style('transform', 'scale(' + multipler + ')');
+ },
+ onEnter: function (el) {
+ var node = d3.select(el),
+ icon = this.icon(),
+ textDy = hostIconDim + 15,
+ iconDim = hostIconDim;
+
+ this.el = node;
+
+ var g = node.append('g')
+ .attr('class', 'svgIcon hostIcon');
+
+ g.append('circle').attr('r', hostIconDim);
+ g.append('use').attr({
+ 'xlink:href': '#' + icon,
+ width: iconDim,
+ height: iconDim,
+ x: -iconDim / 2,
+ y: -iconDim / 2
+ });
+
+ g.append('text')
+ .text(this.get('id'))
+ .attr('dy', textDy)
+ .attr('text-anchor', 'middle');
+
+ this.setScale();
+ }
});
return {