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

Alternate SVG sprite technique for operations (fixes #956)

Browse Source
This commit is contained in:
John Firebaugh
2013-03-10 19:56:53 -07:00
parent 8406b7de80
commit 8c79d9672e
2 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/id/svg/surface.js
+49 -20
View File
@@ -1,4 +1,26 @@
iD.svg.Surface = function() {
function findStylesheet(name) {
return _.find(document.styleSheets, function(stylesheet) {
return stylesheet.href.indexOf(name) > 0;
});
}
function sprites(stylesheetName, selectorRegexp) {
var sprites = [];
_.forEach(findStylesheet(stylesheetName).cssRules, function(rule) {
var klass = rule.selectorText,
match = klass && klass.match(selectorRegexp);
if (match) {
var id = match[1];
match = rule.style.backgroundPosition.match(/(-?\d+)px (-?\d+)px/);
sprites.push({id: id, x: match[1], y: match[2]});
}
});
return sprites;
}
return function drawSurface(selection) {
var defs = selection.append('defs');
@@ -52,16 +74,31 @@ iD.svg.Surface = function() {
})
.attr('xlink:href', function(d) { return 'img/pattern/' + d[1] + '.png'; });
defs.append('clipPath')
.attr('id', 'clip-square-12')
defs.selectAll()
.data([12, 20])
.enter().append('clipPath')
.attr('id', function(d) { return 'clip-square-' + d; })
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', function(d) { return d; })
.attr('height', function(d) { return d; });
defs.append('image')
.attr({
x: 0,
y: 0,
width: 12,
height: 12
id: 'sprite',
width: 420,
height: 200,
'xlink:href': 'img/sprite.png'
});
defs.selectAll()
.data(sprites("app.css", /^\.(icon-operation-[a-z0-9-]+)$/))
.enter().append('use')
.attr('id', function(d) { return d.id; })
.attr('transform', function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr('xlink:href', '#sprite');
defs.append('image')
.attr({
id: 'maki-sprite',
@@ -70,20 +107,12 @@ iD.svg.Surface = function() {
'xlink:href': 'img/maki.png'
});
_.forEach(_.find(document.styleSheets, function(stylesheet) {
return stylesheet.href.indexOf("maki.css") > 0;
}).cssRules, function(rule) {
var klass = rule.selectorText,
match = klass.match(/^\.(maki-[a-z0-9-]+-12)$/);
if (match) {
var id = match[1];
match = rule.style.backgroundPosition.match(/(-?\d+)px (-?\d+)px/);
defs.append('use')
.attr('id', id)
.attr('transform', "translate(" + match[1] + "," + match[2] + ")")
.attr('xlink:href', '#maki-sprite');
}
});
defs.selectAll()
.data(sprites("maki.css", /^\.(maki-[a-z0-9-]+-12)$/))
.enter().append('use')
.attr('id', function(d) { return d.id; })
.attr('transform', function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr('xlink:href', '#maki-sprite');
var layers = selection.selectAll('.layer')
.data(['fill', 'shadow', 'casing', 'stroke', 'text', 'hit', 'halo', 'label']);
js/id/ui/radial_menu.js
+4 -9
View File
@@ -52,15 +52,10 @@ iD.ui.RadialMenu = function(operations) {
.on('mouseover', mouseover)
.on('mouseout', mouseout);
var image = button.append('foreignObject')
.style('pointer-events', 'none')
.attr('width', 20)
.attr('height', 20)
.attr('x', -10)
.attr('y', -10);
image.append('xhtml:span')
.attr('class', function(d) { return 'icon icon-operation icon-operation-' + d.id; });
button.append('use')
.attr('transform', 'translate(-10, -10)')
.attr('clip-path', 'url(#clip-square-20)')
.attr('xlink:href', function(d) { return '#icon-operation-' + d.id; });
var tooltip = menu.append('foreignObject')
.style('display', 'none')