Added code to adjust node rectangle size based on text label size, plus a little more for the icon.
diff --git a/web/gui/src/main/webapp/network.js b/web/gui/src/main/webapp/network.js
index 5587e42..d66e714 100644
--- a/web/gui/src/main/webapp/network.js
+++ b/web/gui/src/main/webapp/network.js
@@ -31,8 +31,9 @@
}
},
labels: {
- padLR: 3,
- padTB: 2,
+ imgPad: 22,
+ padLR: 8,
+ padTB: 6,
marginLR: 3,
marginTB: 2
},
@@ -252,7 +253,7 @@
}
});
- // TODO: add drag, mouseover, mouseout behaviors
+
network.node = network.svg.selectAll('.node')
.data(network.force.nodes(), function(d) {return d.id})
.enter().append('g')
@@ -284,29 +285,24 @@
}
});
- // TODO: augment stroke and fill functions
network.nodeRect = network.node.append('rect')
- // TODO: css for node rects
.attr('rx', 5)
.attr('ry', 5)
-// .attr('stroke', function(d) { return '#000'})
-// .attr('fill', function(d) { return '#ddf'})
.attr('width', 126)
- .attr('height', 24);
+ .attr('height', 40);
network.node.each(function(d) {
var node = d3.select(this),
rect = node.select('rect'),
img = node.append('svg:image')
- .attr('x', -9)
- .attr('y', -12)
+ .attr('x', -16)
+ .attr('y', -16)
.attr('width', 32)
.attr('height', 32)
.attr('xlink:href', iconUrl(d)),
text = node.append('text')
.text(d.id)
- .attr('dx', '1.0em')
- .attr('dy', '1.8em'),
+ .attr('dy', '1.1em'),
dummy;
});
@@ -321,6 +317,43 @@
first = true;
// NOTE: probably unnecessary code if we only have one line.
+ text.each(function() {
+ var box = this.getBBox();
+ if (first || box.x < bounds.x1) {
+ bounds.x1 = box.x;
+ }
+ if (first || box.y < bounds.y1) {
+ bounds.y1 = box.y;
+ }
+ if (first || box.x + box.width < bounds.x2) {
+ bounds.x2 = box.x + box.width;
+ }
+ if (first || box.y + box.height < bounds.y2) {
+ bounds.y2 = box.y + box.height;
+ }
+ first = false;
+ }).attr('text-anchor', 'middle');
+
+ var lab = config.labels,
+ oldWidth = bounds.x2 - bounds.x1;
+
+ bounds.x1 -= oldWidth / 2;
+ bounds.x2 -= oldWidth / 2;
+
+ bounds.x1 -= (lab.padLR + lab.imgPad);
+ bounds.y1 -= lab.padTB;
+ bounds.x2 += lab.padLR;
+ bounds.y2 += lab.padTB;
+
+ node.select('rect')
+ .attr('x', bounds.x1)
+ .attr('y', bounds.y1)
+ .attr('width', bounds.x2 - bounds.x1)
+ .attr('height', bounds.y2 - bounds.y1);
+
+ node.select('image')
+ .attr('x', bounds.x1);
+ // ====
});
network.numTicks = 0;
diff --git a/web/gui/src/main/webapp/network.json b/web/gui/src/main/webapp/network.json
index 74a276a..b4f1b6e 100644
--- a/web/gui/src/main/webapp/network.json
+++ b/web/gui/src/main/webapp/network.json
@@ -7,50 +7,50 @@
},
"nodes": [
{
- "id": "switch-1",
+ "id": "sample1",
"type": "opt",
"status": "good"
},
{
- "id": "switch-2",
+ "id": "00:00:00:00:00:00:00:02",
"type": "opt",
"status": "good"
},
{
- "id": "switch-3",
+ "id": "00:00:00:00:00:00:00:03",
"type": "opt",
"status": "good"
},
{
- "id": "switch-4",
+ "id": "00:00:00:00:00:00:00:04",
"type": "opt",
"status": "good"
},
{
- "id": "switch-11",
+ "id": "00:00:00:00:00:00:00:11",
"type": "pkt",
"status": "good"
},
{
- "id": "switch-12",
+ "id": "00:00:00:00:00:00:00:12",
"type": "pkt",
"status": "good"
},
{
- "id": "switch-13",
+ "id": "00:00:00:00:00:00:00:13",
"type": "pkt",
"status": "good"
}
],
"links": [
- { "src": "switch-1", "dst": "switch-2" },
- { "src": "switch-1", "dst": "switch-3" },
- { "src": "switch-1", "dst": "switch-4" },
- { "src": "switch-2", "dst": "switch-3" },
- { "src": "switch-2", "dst": "switch-4" },
- { "src": "switch-3", "dst": "switch-4" },
- { "src": "switch-13", "dst": "switch-3" },
- { "src": "switch-12", "dst": "switch-2" },
- { "src": "switch-11", "dst": "switch-1" }
+ { "src": "sample1", "dst": "00:00:00:00:00:00:00:02" },
+ { "src": "sample1", "dst": "00:00:00:00:00:00:00:03" },
+ { "src": "sample1", "dst": "00:00:00:00:00:00:00:04" },
+ { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:03" },
+ { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:04" },
+ { "src": "00:00:00:00:00:00:00:03", "dst": "00:00:00:00:00:00:00:04" },
+ { "src": "00:00:00:00:00:00:00:13", "dst": "00:00:00:00:00:00:00:03" },
+ { "src": "00:00:00:00:00:00:00:12", "dst": "00:00:00:00:00:00:00:02" },
+ { "src": "00:00:00:00:00:00:00:11", "dst": "sample1" }
]
}
diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index 548ca57..340ae79 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -85,12 +85,14 @@
svg .link.inactive,
svg .node.inactive rect,
-svg .node.inactive text {
+svg .node.inactive text,
+svg .node.inactive image {
opacity: .2;
}
svg .node.inactive.selected rect,
-svg .node.inactive.selected text {
+svg .node.inactive.selected text,
+svg .node.inactive.selected image {
opacity: .6;
}