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

Polish spriting code

Browse Source 
* Smaller make-sprite.json.
* Convert operation sprite data to JSON, eliminating
  fragile stylesheet grepping.
This commit is contained in:
John Firebaugh
2013-04-23 09:42:27 -07:00
parent 1021850300
commit d8751fad8d
8 changed files with 72 additions and 2448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build.js
+1
View File
@@ -123,6 +123,7 @@ fs.writeFileSync('data/data.js', 'iD.data = ' + stringify({
},
imperial: r('imperial.json'),
maki: r('maki-sprite.json'),
operations: r('operations-sprite.json'),
locales: r('locales.json'),
en: read('dist/locales/en.json')
}) + ';');
css/app.css
-24
View File
@@ -540,30 +540,6 @@ button[disabled] .icon.layers { background-position: -300px -40px;}
button[disabled] .icon.avatar { background-position: -320px -40px;}
button[disabled] .icon.nearby { background-position: -340px -40px;}
.icon-operation-delete { background-position: 0 -140px;}
.icon-operation-circularize { background-position: -20px -140px;}
.icon-operation-straighten { background-position: -40px -140px;}
.icon-operation-split { background-position: -60px -140px;}
.icon-operation-disconnect { background-position: -80px -140px;}
.icon-operation-reverse { background-position: -100px -140px;}
.icon-operation-move { background-position: -120px -140px;}
.icon-operation-merge { background-position: -140px -140px;}
.icon-operation-orthogonalize { background-position: -160px -140px;}
.icon-operation-rotate { background-position: -180px -140px;}
.icon-operation-simplify { background-position: -200px -140px;}
.icon-operation-disabled-delete { background-position: 0 -160px;}
.icon-operation-disabled-circularize { background-position: -20px -160px;}
.icon-operation-disabled-straighten { background-position: -40px -160px;}
.icon-operation-disabled-split { background-position: -60px -160px;}
.icon-operation-disabled-disconnect { background-position: -80px -160px;}
.icon-operation-disabled-reverse { background-position: -100px -160px;}
.icon-operation-disabled-move { background-position: -120px -160px;}
.icon-operation-disabled-merge { background-position: -140px -160px;}
.icon-operation-disabled-orthogonalize { background-position: -160px -160px;}
.icon-operation-disabled-rotate { background-position: -180px -160px;}
.icon-operation-disabled-simplify { background-position: -200px -160px;}
/* Out link is special */
.icon.out-link { height: 14px; width: 14px; background-position: -500px 0;}
data/data_dev.js
+4 -2
View File
@@ -15,6 +15,7 @@ iD.data = {
path + 'data/presets/fields.json',
path + 'data/imperial.json',
path + 'data/maki-sprite.json',
path + 'data/operations-sprite.json',
path + 'data/locales.json',
path + 'dist/locales/en.json'
], d3.json, function (err, data) {
@@ -32,8 +33,9 @@ iD.data = {
},
imperial: data[8],
maki: data[9],
locales: data[10],
en: data[11]
operations: data[10],
locales: data[11],
en: data[12]
};
callback();
data/maki-sprite.json
+1 -2383
View File
File diff suppressed because it is too large Load Diff
data/maki_sprite.js
+14 -3
View File
@@ -7,9 +7,8 @@ var makipath = './node_modules/maki';
sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
if (err) process.exit(1);
// Move image and json files
// Move image files
fs.renameSync(path.join(makipath, makiSprite.filename()), './dist/img/maki-sprite.png');
fs.renameSync(path.join(makipath, 'renders.json'), './data/maki-sprite.json');
// Generate CSS
var template = '.maki-{name}{background-position:{x} {y};width:{w};height:{h};}\n';
@@ -24,6 +23,18 @@ sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
.replace('{w}', image.width + 'px')
.replace('{h}', image.height + 'px');
});
fs.writeFileSync('./css/maki-sprite.css', css);
// Generate JSON
var images = {};
makiSprite.images.forEach(function(image) {
var match = image.name.match(/(.*)-(12|18|24)/),
name = match[1],
size = match[2],
group = images[name] = images[name] || {};
group[size] = [image.positionX, image.positionY];
});
fs.writeFileSync('./data/maki-sprite.json', JSON.stringify(images));
});
data/operations-sprite.json
+25
View File
@@ -0,0 +1,25 @@
{
"icon-operation-delete": [0, 140],
"icon-operation-circularize": [20, 140],
"icon-operation-straighten": [40, 140],
"icon-operation-split": [60, 140],
"icon-operation-disconnect": [80, 140],
"icon-operation-reverse": [100, 140],
"icon-operation-move": [120, 140],
"icon-operation-merge": [140, 140],
"icon-operation-orthogonalize": [160, 140],
"icon-operation-rotate": [180, 140],
"icon-operation-simplify": [200, 140],
"icon-operation-disabled-delete": [0, 160],
"icon-operation-disabled-circularize": [20, 160],
"icon-operation-disabled-straighten": [40, 160],
"icon-operation-disabled-split": [60, 160],
"icon-operation-disabled-disconnect": [80, 160],
"icon-operation-disabled-reverse": [100, 160],
"icon-operation-disabled-move": [120, 160],
"icon-operation-disabled-merge": [140, 160],
"icon-operation-disabled-orthogonalize": [160, 160],
"icon-operation-disabled-rotate": [180, 160],
"icon-operation-disabled-simplify": [200, 160]
}
dist/img/maki-sprite.png
Vendored
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 82 KiB

js/id/svg/surface.js
+27 -36
View File
@@ -10,22 +10,20 @@ iD.svg.Surface = function(context) {
};
}
function sprites(selectorRegexp) {
var sprites = [];
function SpriteDefinition(id, href, data) {
return function(defs) {
defs.append('image')
.attr('id', id)
.attr('xlink:href', href)
.call(autosize);
_.forEach(document.styleSheets, function(stylesheet) {
_.forEach(stylesheet.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;
defs.selectAll()
.data(data)
.enter().append('use')
.attr('id', function(d) { return d.key; })
.attr('transform', function(d) { return "translate(-" + d.value[0] + ",-" + d.value[1] + ")"; })
.attr('xlink:href', '#' + id);
};
}
return function drawSurface(selection) {
@@ -91,29 +89,22 @@ iD.svg.Surface = function(context) {
.attr('width', function(d) { return d; })
.attr('height', function(d) { return d; });
defs.append('image')
.attr('id', 'sprite')
.attr('xlink:href', context.imagePath('sprite.svg'))
.call(autosize);
var maki = [];
_.forEach(iD.data.maki, function(dimensions, name) {
maki.push({key: 'maki-' + name + '-12', value: dimensions['12']});
maki.push({key: 'maki-' + name + '-18', value: dimensions['18']});
maki.push({key: 'maki-' + name + '-24', value: dimensions['24']});
});
defs.selectAll()
.data(sprites(/^\.(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.call(SpriteDefinition(
'sprite',
context.imagePath('sprite.svg'),
d3.entries(iD.data.operations)));
defs.append('image')
.attr('id', 'maki-sprite')
.attr('xlink:href', context.imagePath('maki-sprite.png'))
.call(autosize);
defs.selectAll()
.data(iD.data.maki.images)
.enter().append('use')
.attr('id', function(d) { return 'maki-' + d.name; })
.attr('transform', function(d) { return "translate(-" + d.positionX + ",-" + d.positionY + ")"; })
.attr('xlink:href', '#maki-sprite');
defs.call(SpriteDefinition(
'maki-sprite',
context.imagePath('maki-sprite.png'),
maki));
var layers = selection.selectAll('.layer')
.data(['fill', 'shadow', 'casing', 'stroke', 'text', 'hit', 'halo', 'label']);