disable pointer events for inactive elements
put core switches next to their attached aggregations switches
diff --git a/web/ons-demo/css/skin.default.css b/web/ons-demo/css/skin.default.css
index a04b0e0..6ff36ab 100644
--- a/web/ons-demo/css/skin.default.css
+++ b/web/ons-demo/css/skin.default.css
@@ -118,10 +118,12 @@
.color11-selected .color11,
.color12-selected .color12 {
opacity: 1;
+ pointer-events: auto;
}
.color0 {
opacity: .2;
+ pointer-events: none;
fill: #222;
background-color: #222;
color: #444;
@@ -129,6 +131,7 @@
.color1 {
opacity: .2;
+ pointer-events: none;
fill: #EC0033;
background-color: #EC0033;
}
@@ -141,36 +144,42 @@
.color3 {
opacity: .2;
+ pointer-events: none;
fill: #3714B0;
background-color: #3714B0;
}
.color4 {
opacity: .2;
+ pointer-events: none;
fill: #B12C49;
background-color: #B12C49;
}
.color5 {
opacity: .2;
+ pointer-events: none;
fill: #402C84;
background-color: #402C84;
}
.color6 {
opacity: .2;
+ pointer-events: none;
fill: #990021;
background-color: #990021;
}
.color7 {
opacity: .2;
+ pointer-events: none;
fill: #990021;
background-color: ;
}
.color8 {
opacity: .2;
+ pointer-events: none;
fill: #A67900;
background-color: #A67900;
}
@@ -183,18 +192,21 @@
.color10 {
opacity: .2;
+ pointer-events: none;
fill: #1F0772;
background-color: #1F0772;
}
.color11 {
opacity: .2;
+ pointer-events: none;
fill: #F56E8B;
background-color: #F56E8B;
}
.color12 {
opacity: .2;
+ pointer-events: none;
fill: #6949D7;
background-color: #6949D7;
}
diff --git a/web/ons-demo/js/app.js b/web/ons-demo/js/app.js
index 8980d02..25f0a9e 100644
--- a/web/ons-demo/js/app.js
+++ b/web/ons-demo/js/app.js
@@ -93,10 +93,31 @@
rings[1].angles[i] = (range.min + range.max)/2;
});
- // arrange core switches at equal increments
+ // find the association between core switches and aggregation switches
+ var aggregationSwitchMap = {};
+ model.aggregationSwitches.forEach(function (s, i) {
+ aggregationSwitchMap[s.dpid] = i + 1;
+ });
+
+ var coreSwitchMap = {};
+ model.coreSwitches.forEach(function (s, i) {
+ coreSwitchMap[s.dpid] = i + 1;
+ });
+
+ var coreLinks = {};
+ model.links.forEach(function (l) {
+ if (aggregationSwitchMap[l['src-switch']] && coreSwitchMap[l['dst-switch']]) {
+ coreLinks[l['dst-switch']] = aggregationSwitchMap[l['src-switch']] - 1;
+ }
+ });
+
+
+
+ // put core switches next to linked aggregation switches
k = 360 / rings[2].switches.length;
rings[2].switches.forEach(function (s, i) {
- rings[2].angles[i] = k * i;
+// rings[2].angles[i] = k * i;
+ rings[2].angles[i] = rings[1].angles[coreLinks[s.dpid]];
});
function ringEnter(data, i) {