attempt to draw svg switches. doesn't look great.
diff --git a/web/ons-demo/js/map.js b/web/ons-demo/js/map.js
index 35ca77d..62df872 100644
--- a/web/ons-demo/js/map.js
+++ b/web/ons-demo/js/map.js
@@ -1,6 +1,3 @@
-
-
-
(function () {
var projection = d3.geo.mercator()
@@ -8,6 +5,8 @@
.scale(8000)
.rotate([-180,0]);
+var switchXML;
+
function createMap(svg, cb) {
topology = svg.append('svg:svg').attr('id', 'viewBox').attr('viewBox', '0 0 1000 1000').
attr('id', 'viewbox');
@@ -23,7 +22,10 @@
.append('path')
.attr('d', path)
- cb();
+ d3.xml('assets/switch.svg', function (xml) {
+ switchXML = document.importNode(xml.documentElement, true);;
+ cb();
+ });
});
}
@@ -220,12 +222,26 @@
function switchEnter(d) {
var g = d3.select(this);
- var width = widths[d.className];
+ var width;
- g.append('svg:circle').attr('r', width)
- .classed(d.className, true)
- .attr('cx', d.x)
- .attr('cy', d.y);
+ // attempt to draw an svg switch
+ if (false && d.className == 'core') {
+ width = 30;
+ g.select(function () {
+ return this.appendChild(switchXML.cloneNode(true));
+ })
+ .classed(d.className, true)
+ .attr('x', d.x - 30)
+ .attr('y', d.y - 30);
+
+ } else {
+ width = widths[d.className];
+ g.append('svg:circle').attr('r', width)
+ .classed(d.className, true)
+ .attr('cx', d.x)
+ .attr('cy', d.y);
+ }
+
if (d.label) {
g.append('svg:text')
diff --git a/web/ons-demo/js/topologyactions.js b/web/ons-demo/js/topologyactions.js
index 843f829..6501e5b 100644
--- a/web/ons-demo/js/topologyactions.js
+++ b/web/ons-demo/js/topologyactions.js
@@ -1,3 +1,12 @@
+function clearHighlight() {
+ topology.selectAll('circle').each(function (data) {
+ data.mouseDown = false;
+ d3.select('#topologyArea').classed('linking', false);
+ mouseOutSwitch(data);
+ });
+ d3.select('#linkVector').remove();
+};
+
function mouseOverSwitch(data) {
d3.event.preventDefault();
@@ -87,6 +96,8 @@
}
function doubleClickSwitch(data) {
+ clearHighlight();
+
var circle = d3.select(document.getElementById(data.dpid)).select('circle');
if (data.state == 'ACTIVE') {
var prompt = 'Deactivate ' + data.dpid + '?';
@@ -103,16 +114,7 @@
}
}
-d3.select(document.body).on('mouseup', function () {
- function clearHighlight() {
- topology.selectAll('circle').each(function (data) {
- data.mouseDown = false;
- d3.select('#topologyArea').classed('linking', false);
- mouseOutSwitch(data);
- });
- d3.select('#linkVector').remove();
- };
-
+d3.select(window).on('mouseup', function () {
d3.selectAll('.nodrop').classed('nodrop', false);
function removeLink(link) {