Skip to content

Commit

Permalink
rename mapbox-icon-* to mapbox-* and stretch-x to stretchX
Browse files Browse the repository at this point in the history
  • Loading branch information
@kkaefer
kkaefer committed Dec 11, 2019
1 parent dc097bc commit c70e462
Show file tree
Hide file tree
Showing 12 changed files with 182 additions and 99 deletions.
101 changes: 91 additions & 10 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@ <h3 class='mb0 no-anchor'></h3>
<ul class='list-reset h5 py1-ul'>


<li><a
href='#stronground'
class="">
strongRound

</a>

</li>


<li><a
href='#extractmetadata'
class="">
Expand Down Expand Up @@ -113,6 +123,77 @@ <h3 class='mb0 no-anchor'></h3>
<div class='fix-margin-3'>


<section class='p2 mb2 clearfix bg-white minishadow'>


<div class='clearfix'>
<h3 class='fl m0' id='stronground'>
strongRound
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/extract-svg-metadata.js#L39-L51'>
<span>lib/extract-svg-metadata.js</span>
</a>

</div>


<p>Decrease accuracy of floating-point numbers
in path data keeping a specified number of decimals.
Smart rounds values like 2.3491 to 2.35 instead of 2.349.
Doesn&#x27;t apply &quot;smartness&quot; if the number precision fits already.</p>
<p>Taken from svgo at <a href="https://github.com/svg/svgo/blob/72db8eb/plugins/convertPathData.js#L773">https://github.com/svg/svgo/blob/72db8eb/plugins/convertPathData.js#L773</a></p>


<div class='pre p1 fill-light mt0'>strongRound(value: any, precision: any)</div>










<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>

<div class='space-bottom0'>
<div>
<span class='code bold'>value</span> <code class='quiet'>(any)</code>
</div>

</div>

<div class='space-bottom0'>
<div>
<span class='code bold'>precision</span> <code class='quiet'>(any)</code>
</div>

</div>

</div>















</section>




<section class='p2 mb2 clearfix bg-white minishadow'>


Expand All @@ -121,7 +202,7 @@ <h3 class='fl m0' id='extractmetadata'>
extractMetadata
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/extract-svg-metadata.js#L65-L98'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/extract-svg-metadata.js#L133-L180'>
<span>lib/extract-svg-metadata.js</span>
</a>

Expand Down Expand Up @@ -231,7 +312,7 @@ <h3 class='fl m0' id='metadata'>
Metadata
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/extract-svg-metadata.js#L100-L100'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/extract-svg-metadata.js#L182-L182'>
<span>lib/extract-svg-metadata.js</span>
</a>

Expand Down Expand Up @@ -268,8 +349,8 @@ <h3 class='fl m0' id='metadata'>
<pre class='p1 overflow-auto round fill-light'>{
{
<span class="hljs-string">"content"</span>: [ <span class="hljs-number">2</span>, <span class="hljs-number">5</span>, <span class="hljs-number">18</span>, <span class="hljs-number">11</span> ],
<span class="hljs-string">"stretch-x"</span>: [ [<span class="hljs-number">3</span>, <span class="hljs-number">7</span>], [<span class="hljs-number">14</span>, <span class="hljs-number">18</span>] ],
<span class="hljs-string">"stretch-y"</span>: [ [ <span class="hljs-number">5</span>, <span class="hljs-number">11</span> ] ]
<span class="hljs-string">"stretchX"</span>: [ [<span class="hljs-number">3</span>, <span class="hljs-number">7</span>], [<span class="hljs-number">14</span>, <span class="hljs-number">18</span>] ],
<span class="hljs-string">"stretchY"</span>: [ [ <span class="hljs-number">5</span>, <span class="hljs-number">11</span> ] ]
}
}</pre>

Expand All @@ -293,7 +374,7 @@ <h3 class='fl m0' id='generatelayout'>
generateLayout
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/generate.js#L31-L35'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/generate.js#L31-L35'>
<span>lib/generate.js</span>
</a>

Expand Down Expand Up @@ -429,7 +510,7 @@ <h3 class='fl m0' id='generatelayoutunique'>
generateLayoutUnique
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/generate.js#L56-L60'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/generate.js#L56-L60'>
<span>lib/generate.js</span>
</a>

Expand Down Expand Up @@ -568,7 +649,7 @@ <h3 class='fl m0' id='generateimage'>
generateImage
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/generate.js#L190-L198'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/generate.js#L192-L200'>
<span>lib/generate.js</span>
</a>

Expand Down Expand Up @@ -643,7 +724,7 @@ <h3 class='fl m0' id='imglayout'>
ImgLayout
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/generate.js#L190-L198'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/generate.js#L192-L200'>
<span>lib/generate.js</span>
</a>

Expand Down Expand Up @@ -711,7 +792,7 @@ <h3 class='fl m0' id='datalayout'>
DataLayout
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/generate.js#L190-L198'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/generate.js#L192-L200'>
<span>lib/generate.js</span>
</a>

Expand Down Expand Up @@ -777,7 +858,7 @@ <h3 class='fl m0' id='validatemetadata'>
validateMetadata
</h3>

<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/0958378a38d2996942fe4d644ece89a1aca7475d/lib/validate-svg-metadata.js#L8-L77'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4a569c2e33ddf812c20d5af82fdc12ffd55ff04c/lib/validate-svg-metadata.js#L8-L77'>
<span>lib/validate-svg-metadata.js</span>
</a>

Expand Down
40 changes: 21 additions & 19 deletions lib/extract-svg-metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,22 @@ const createSVG = require('svgo/lib/svgo/js2svg');
const applyPlugins = require('svgo/lib/svgo/plugins');
const computePathBounds = require('svg-boundings').path;

// Transforms `id="mapbox-icon-*"` into `mapbox:icon="*"` so that the `convertPathData` step
const metadataPrefix = 'mapbox-';

// Transforms `id="mapbox-*"` into `mapbox:metadata="*"` so that the `convertPathData` step
// resolves transforms.
const renameMapboxIconMetadata = {
const renameMapboxMetadata = {
type: 'perItem',
fn: function(item) {
if (item.hasAttr('id')) {
const id = item.attr('id');
if (id.value.startsWith('mapbox-icon-')) {
if (id.value.startsWith(metadataPrefix)) {
item.removeAttr('id');
item.addAttr({
name: 'mapbox:icon',
value: id.value.substring(12),
name: 'mapbox:metadata',
value: id.value.substring(metadataPrefix.length),
prefix: '',
local: 'mapbox:icon',
local: 'mapbox:metadata',
});
}
}
Expand Down Expand Up @@ -49,11 +51,11 @@ function strongRound(value, precision) {
}

// Plugin for use with svgo that extracts metadata from paths.
const extractMapboxIconMetadata = {
const extractMapboxMetadata = {
type: 'perItem',
fn: function (item, params, info) {
if (item.isElem('path') && item.hasAttr('mapbox:icon') && item.hasAttr('d')) {
const metadata = item.attr('mapbox:icon');
if (item.isElem('path') && item.hasAttr('mapbox:metadata') && item.hasAttr('d')) {
const metadata = item.attr('mapbox:metadata');
const bounds = computePathBounds({ d: item.attr('d').value }, true);

// Make sure that we actually have a valid bounding box.
Expand All @@ -69,12 +71,12 @@ const extractMapboxIconMetadata = {
bounds.bottom = strongRound(bounds.bottom * info.pixelRatio);

if (metadata.value.startsWith('stretch-x')) {
(info.metadata['stretch-x'] = info.metadata['stretch-x'] || []).push([bounds.left, bounds.right]);
(info.metadata.stretchX = info.metadata.stretchX || []).push([bounds.left, bounds.right]);
} else if (metadata.value.startsWith('stretch-y')) {
(info.metadata['stretch-y'] = info.metadata['stretch-y'] || []).push([bounds.top, bounds.bottom]);
(info.metadata.stretchY = info.metadata.stretchY || []).push([bounds.top, bounds.bottom]);
} else if (metadata.value === 'stretch') {
(info.metadata['stretch-x'] = info.metadata['stretch-x'] || []).push([bounds.left, bounds.right]);
(info.metadata['stretch-y'] = info.metadata['stretch-y'] || []).push([bounds.top, bounds.bottom]);
(info.metadata.stretchX = info.metadata.stretchX || []).push([bounds.left, bounds.right]);
(info.metadata.stretchY = info.metadata.stretchY || []).push([bounds.top, bounds.bottom]);
} else if (metadata.value === 'content') {
info.metadata.content = [bounds.left, bounds.top, bounds.right, bounds.bottom];
}
Expand All @@ -89,9 +91,9 @@ const prepareConfig = createConfig({
plugins: [
{ 'cleanupIDs': {
// Remove all IDs first so that `convertPathData` resolves transforms.
preservePrefixes: ['mapbox-icon-'] }
preservePrefixes: ['mapbox-'] }
},
{ renameMapboxIconMetadata },
{ renameMapboxMetadata },
'convertShapeToPath'
]
});
Expand All @@ -115,7 +117,7 @@ const extractConfig = createConfig({
// See https://github.com/kfitfk/svg-boundings/issues/2
leadingZero: false
} },
{ extractMapboxIconMetadata }
{ extractMapboxMetadata }
]
});

Expand Down Expand Up @@ -164,7 +166,7 @@ function extractMetadata(img, callback) {
}

// Sort stretches ascendingly.
for (const key of ['stretch-x', 'stretch-y']) {
for (const key of ['stretchX', 'stretchY']) {
if (info.metadata[key]) {
info.metadata[key].sort((a, b) => a[0] - b[0]);
}
Expand All @@ -190,8 +192,8 @@ module.exports = extractMetadata;
* {
* {
* "content": [ 2, 5, 18, 11 ],
* "stretch-x": [ [3, 7], [14, 18] ],
* "stretch-y": [ [ 5, 11 ] ]
* "stretchX": [ [3, 7], [14, 18] ],
* "stretchY": [ [ 5, 11 ] ]
* }
* }
*/
2 changes: 1 addition & 1 deletion lib/validate-svg-metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function validateMetadata(img, metadata) {
}
}

for (const key of ['stretch-x', 'stretch-y']) {
for (const key of ['stretchX', 'stretchY']) {
if (key in metadata) {
const stretches = metadata[key];
if (!Array.isArray(stretches)) {
Expand Down
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/ae-national-3-affinity.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/cn-nths-expy-2-affinity.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion test/fixture/svg-metadata/cn-nths-expy-2-inkscape-plain.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/shield-illustrator-rotated-reversed.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/shield-illustrator-rotated-translated.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/shield-illustrator-rotated.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/shield-illustrator.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions test/fixture/svg-metadata/shield-rotated.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit c70e462

Please sign in to comment.