홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
1c5f8b6a 1 parent 83e090e3

Added code to adjust node rectangle size based on text label size, plus a little more for the icon.

Inline Side-by-side
Showing 3 changed files with 65 additions and 30 deletions
...@@ -31,8 +31,9 @@ ...@@ -31,8 +31,9 @@
31 } 31 }
32 }, 32 },
33 labels: { 33 labels: {
34 - padLR: 3, 34 + imgPad: 22,
35 - padTB: 2, 35 + padLR: 8,
36 + padTB: 6,
36 marginLR: 3, 37 marginLR: 3,
37 marginTB: 2 38 marginTB: 2
38 }, 39 },
...@@ -252,7 +253,7 @@ ...@@ -252,7 +253,7 @@
252 } 253 }
253 }); 254 });
254 255
255 - // TODO: add drag, mouseover, mouseout behaviors 256 +
256 network.node = network.svg.selectAll('.node') 257 network.node = network.svg.selectAll('.node')
257 .data(network.force.nodes(), function(d) {return d.id}) 258 .data(network.force.nodes(), function(d) {return d.id})
258 .enter().append('g') 259 .enter().append('g')
...@@ -284,29 +285,24 @@ ...@@ -284,29 +285,24 @@
284 } 285 }
285 }); 286 });
286 287
287 - // TODO: augment stroke and fill functions
288 network.nodeRect = network.node.append('rect') 288 network.nodeRect = network.node.append('rect')
289 - // TODO: css for node rects
290 .attr('rx', 5) 289 .attr('rx', 5)
291 .attr('ry', 5) 290 .attr('ry', 5)
292 -// .attr('stroke', function(d) { return '#000'})
293 -// .attr('fill', function(d) { return '#ddf'})
294 .attr('width', 126) 291 .attr('width', 126)
295 - .attr('height', 24); 292 + .attr('height', 40);
296 293
297 network.node.each(function(d) { 294 network.node.each(function(d) {
298 var node = d3.select(this), 295 var node = d3.select(this),
299 rect = node.select('rect'), 296 rect = node.select('rect'),
300 img = node.append('svg:image') 297 img = node.append('svg:image')
301 - .attr('x', -9) 298 + .attr('x', -16)
302 - .attr('y', -12) 299 + .attr('y', -16)
303 .attr('width', 32) 300 .attr('width', 32)
304 .attr('height', 32) 301 .attr('height', 32)
305 .attr('xlink:href', iconUrl(d)), 302 .attr('xlink:href', iconUrl(d)),
306 text = node.append('text') 303 text = node.append('text')
307 .text(d.id) 304 .text(d.id)
308 - .attr('dx', '1.0em') 305 + .attr('dy', '1.1em'),
309 - .attr('dy', '1.8em'),
310 dummy; 306 dummy;
311 307
312 }); 308 });
...@@ -321,6 +317,43 @@ ...@@ -321,6 +317,43 @@
321 first = true; 317 first = true;
322 318
323 // NOTE: probably unnecessary code if we only have one line. 319 // NOTE: probably unnecessary code if we only have one line.
320 + text.each(function() {
321 + var box = this.getBBox();
322 + if (first || box.x < bounds.x1) {
323 + bounds.x1 = box.x;
324 + }
325 + if (first || box.y < bounds.y1) {
326 + bounds.y1 = box.y;
327 + }
328 + if (first || box.x + box.width < bounds.x2) {
329 + bounds.x2 = box.x + box.width;
330 + }
331 + if (first || box.y + box.height < bounds.y2) {
332 + bounds.y2 = box.y + box.height;
333 + }
334 + first = false;
335 + }).attr('text-anchor', 'middle');
336 +
337 + var lab = config.labels,
338 + oldWidth = bounds.x2 - bounds.x1;
339 +
340 + bounds.x1 -= oldWidth / 2;
341 + bounds.x2 -= oldWidth / 2;
342 +
343 + bounds.x1 -= (lab.padLR + lab.imgPad);
344 + bounds.y1 -= lab.padTB;
345 + bounds.x2 += lab.padLR;
346 + bounds.y2 += lab.padTB;
347 +
348 + node.select('rect')
349 + .attr('x', bounds.x1)
350 + .attr('y', bounds.y1)
351 + .attr('width', bounds.x2 - bounds.x1)
352 + .attr('height', bounds.y2 - bounds.y1);
353 +
354 + node.select('image')
355 + .attr('x', bounds.x1);
356 + // ====
324 }); 357 });
325 358
326 network.numTicks = 0; 359 network.numTicks = 0;
......
...@@ -7,50 +7,50 @@ ...@@ -7,50 +7,50 @@
7 }, 7 },
8 "nodes": [ 8 "nodes": [
9 { 9 {
10 - "id": "switch-1", 10 + "id": "sample1",
11 "type": "opt", 11 "type": "opt",
12 "status": "good" 12 "status": "good"
13 }, 13 },
14 { 14 {
15 - "id": "switch-2", 15 + "id": "00:00:00:00:00:00:00:02",
16 "type": "opt", 16 "type": "opt",
17 "status": "good" 17 "status": "good"
18 }, 18 },
19 { 19 {
20 - "id": "switch-3", 20 + "id": "00:00:00:00:00:00:00:03",
21 "type": "opt", 21 "type": "opt",
22 "status": "good" 22 "status": "good"
23 }, 23 },
24 { 24 {
25 - "id": "switch-4", 25 + "id": "00:00:00:00:00:00:00:04",
26 "type": "opt", 26 "type": "opt",
27 "status": "good" 27 "status": "good"
28 }, 28 },
29 { 29 {
30 - "id": "switch-11", 30 + "id": "00:00:00:00:00:00:00:11",
31 "type": "pkt", 31 "type": "pkt",
32 "status": "good" 32 "status": "good"
33 }, 33 },
34 { 34 {
35 - "id": "switch-12", 35 + "id": "00:00:00:00:00:00:00:12",
36 "type": "pkt", 36 "type": "pkt",
37 "status": "good" 37 "status": "good"
38 }, 38 },
39 { 39 {
40 - "id": "switch-13", 40 + "id": "00:00:00:00:00:00:00:13",
41 "type": "pkt", 41 "type": "pkt",
42 "status": "good" 42 "status": "good"
43 } 43 }
44 ], 44 ],
45 "links": [ 45 "links": [
46 - { "src": "switch-1", "dst": "switch-2" }, 46 + { "src": "sample1", "dst": "00:00:00:00:00:00:00:02" },
47 - { "src": "switch-1", "dst": "switch-3" }, 47 + { "src": "sample1", "dst": "00:00:00:00:00:00:00:03" },
48 - { "src": "switch-1", "dst": "switch-4" }, 48 + { "src": "sample1", "dst": "00:00:00:00:00:00:00:04" },
49 - { "src": "switch-2", "dst": "switch-3" }, 49 + { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:03" },
50 - { "src": "switch-2", "dst": "switch-4" }, 50 + { "src": "00:00:00:00:00:00:00:02", "dst": "00:00:00:00:00:00:00:04" },
51 - { "src": "switch-3", "dst": "switch-4" }, 51 + { "src": "00:00:00:00:00:00:00:03", "dst": "00:00:00:00:00:00:00:04" },
52 - { "src": "switch-13", "dst": "switch-3" }, 52 + { "src": "00:00:00:00:00:00:00:13", "dst": "00:00:00:00:00:00:00:03" },
53 - { "src": "switch-12", "dst": "switch-2" }, 53 + { "src": "00:00:00:00:00:00:00:12", "dst": "00:00:00:00:00:00:00:02" },
54 - { "src": "switch-11", "dst": "switch-1" } 54 + { "src": "00:00:00:00:00:00:00:11", "dst": "sample1" }
55 ] 55 ]
56 } 56 }
......
...@@ -85,12 +85,14 @@ svg .node.selected rect { ...@@ -85,12 +85,14 @@ svg .node.selected rect {
85 85
86 svg .link.inactive, 86 svg .link.inactive,
87 svg .node.inactive rect, 87 svg .node.inactive rect,
88 -svg .node.inactive text { 88 +svg .node.inactive text,
89 +svg .node.inactive image {
89 opacity: .2; 90 opacity: .2;
90 } 91 }
91 92
92 svg .node.inactive.selected rect, 93 svg .node.inactive.selected rect,
93 -svg .node.inactive.selected text { 94 +svg .node.inactive.selected text,
95 +svg .node.inactive.selected image {
94 opacity: .6; 96 opacity: .6;
95 } 97 }
96 98
......