CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-23 00:29:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Futuristic radial menu (fixes #548)

Browse Source
This commit is contained in:
John Firebaugh
2013-01-29 14:36:59 -05:00
parent 2115e673f4
commit 6559b7015f
2 changed files with 46 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+9 -3
View File
@@ -1181,10 +1181,13 @@ a.success-action {
border-radius: 4px;
}
.radial-menu-background {
stroke: #aaa;
stroke-opacity: 0.4;
}
.radial-menu-item {
fill: white;
stroke: black;
stroke-width: 1;
fill: black;
cursor:url(../img/cursor-pointer.png) 6 1, auto;
}
@@ -1202,6 +1205,9 @@ a.success-action {
fill: rgba(255,255,255,.5);
}
.radial-menu image {
pointer-events: none;
}
/* Media Queries
------------------------------------------------------- */
js/id/ui/radial_menu.js
+37 -19
View File
@@ -13,15 +13,7 @@ iD.ui.RadialMenu = function(entity, mode) {
operation(history);
}
var arc = d3.svg.arc()
.outerRadius(70)
.innerRadius(30)
.startAngle(function (d, i) { return 2 * Math.PI / operations.length * i; })
.endAngle(function (d, i) { return 2 * Math.PI / operations.length * (i + 1); });
arcs = selection.selectAll()
.data(operations)
.enter().append('g')
arcs = selection.append('g')
.attr('class', 'radial-menu')
.attr('transform', "translate(" + center + ")")
.attr('opacity', 0);
@@ -29,17 +21,43 @@ iD.ui.RadialMenu = function(entity, mode) {
arcs.transition()
.attr('opacity', 0.8);
arcs.append('path')
.attr('class', function (d) { return 'radial-menu-item radial-menu-item-' + d.id; })
.attr('d', arc)
.classed('disabled', function (d) { return !d.enabled(graph); })
.on('click', click);
var r = 50,
a = Math.PI / 4,
a0 = -Math.PI / 4,
a1 = a0 + (operations.length - 1) * a;
arcs.append('text')
.attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.title; });
arcs.append('path')
.attr('class', 'radial-menu-background')
.attr('d', 'M' + r * Math.sin(a0) + ',' +
r * Math.cos(a0) +
' A' + r + ',' + r + ' 0 0,0 ' +
r * Math.sin(a1) + ',' +
r * Math.cos(a1))
.attr('stroke-width', 50)
.attr('stroke-linecap', 'round');
var button = arcs.selectAll()
.data(operations)
.enter().append('g')
.attr('transform', function(d, i) {
return 'translate(' + r * Math.sin(a0 + i * a) + ',' +
r * Math.cos(a0 + i * a) + ')';
});
button.append('circle')
.attr('class', function (d) { return 'radial-menu-item radial-menu-item-' + d.id; })
.attr('r', 15)
.attr('title', function (d) { return d.title; })
.classed('disabled', function (d) { return !d.enabled(graph); })
.on('click', click)
.on('mouseover', mouseover)
.on('mouseout', mouseout);
button.append('image')
.attr('width', 16)
.attr('height', 16)
.attr('transform', 'translate(-8, -8)')
.attr('xlink:href', 'icons/helipad.png');
};
radialMenu.close = function(selection) {