parse and validate metadata for stretchable icons from SVGs

mapbox · Oct 28, 2019 · 673253d · 673253d
1 parent 014c274
commit 673253d
Show file tree

Hide file tree

Showing 13 changed files with 1,450 additions and 314 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,7 @@
 {
     "env": {
-        "node": true
+        "node": true,
+        "es6": true
     },
     "extends": [
         "eslint:recommended"

diff --git a/docs/index.html b/docs/index.html
@@ -24,6 +24,26 @@ <h3 class='mb0 no-anchor'></h3>
             <ul class='list-reset h5 py1-ul'>
 
 
+                <li><a
+                  href='#extractmetadata'
+                  class="">
+                  extractMetadata
+
+                </a>
+
+                </li>
+
+
+                <li><a
+                  href='#metadata'
+                  class="">
+                  Metadata
+
+                </a>
+
+                </li>
+
+
                 <li><a
                   href='#generatelayout'
                   class="">
@@ -73,6 +93,16 @@ <h3 class='mb0 no-anchor'></h3>
 
                 </li>
 
+
+                <li><a
+                  href='#validatemetadata'
+                  class="">
+                  validateMetadata
+
+                </a>
+
+                </li>
+
             </ul>
           </div>
           <div class='mt1 h6 quiet'>
@@ -83,6 +113,149 @@ <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='extractmetadata'>
+      extractMetadata
+    </h3>
+
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/extract-svg-metadata.js#L52-L77'>
+      <span>lib/extract-svg-metadata.js</span>
+      </a>
+
+  </div>
+
+
+  <p>Parses a SVG document and extracts metadata from its shapes and paths.</p>
+
+
+  <div class='pre p1 fill-light mt0'>extractMetadata(svg: [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>], callback: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>): <a href="#metadata">Metadata</a></div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>svg</span> <code class='quiet'>([<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>])</code> A string of the SVG.
+
+          </div>
+
+        </div>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>callback</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">Function</a>)</code> Accepts two arguments, 
+<code>err</code>
+ and 
+<code>metadata</code>
+ Object
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+      <div class='py1 quiet mt1 prose-big'>Returns</div>
+      <code><a href="#metadata">Metadata</a></code>:
+        metadata              An object with the extracted information.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</section>
+
+
+
+
+            <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+    <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/4b797253fbda1826953fd57442bfe3d049b618dc/lib/extract-svg-metadata.js#L79-L79'>
+      <span>lib/extract-svg-metadata.js</span>
+      </a>
+
+  </div>
+
+
+  <p>A <code>Metadata</code> objects stores information about how an image can be stretched in a non-linear</p>
+<p>The keys of the Object are the icon ids.
+The values of the Object are the structured data about each icon.</p>
+
+
+  <div class='pre p1 fill-light mt0'>Metadata</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <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> ] ]
+   }
+}</pre>
+
+
+
+
+
+
+
+
+</section>
+
+
+
+
             <section class='p2 mb2 clearfix bg-white minishadow'>
 
 
@@ -91,8 +264,8 @@ <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/9721b4c8961504c79b914662617f363523e21c11/index.js#L31-L35'>
-      <span>index.js</span>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/generate.js#L25-L29'>
+      <span>lib/generate.js</span>
       </a>
 
   </div>
@@ -227,8 +400,8 @@ <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/9721b4c8961504c79b914662617f363523e21c11/index.js#L56-L60'>
-      <span>index.js</span>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/generate.js#L50-L54'>
+      <span>lib/generate.js</span>
       </a>
 
   </div>
@@ -366,8 +539,8 @@ <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/9721b4c8961504c79b914662617f363523e21c11/index.js#L189-L197'>
-      <span>index.js</span>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/generate.js#L184-L192'>
+      <span>lib/generate.js</span>
       </a>
 
   </div>
@@ -441,8 +614,8 @@ <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/9721b4c8961504c79b914662617f363523e21c11/index.js#L189-L197'>
-      <span>index.js</span>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/generate.js#L193-L193'>
+      <span>lib/generate.js</span>
       </a>
 
   </div>
@@ -509,8 +682,8 @@ <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/9721b4c8961504c79b914662617f363523e21c11/index.js#L189-L197'>
-      <span>index.js</span>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/mapbox/spritezero/blob/4b797253fbda1826953fd57442bfe3d049b618dc/lib/generate.js#L193-L193'>
+      <span>lib/generate.js</span>
       </a>
 
   </div>
@@ -562,6 +735,83 @@ <h3 class='fl m0' id='datalayout'>
 
 
 
+</section>
+
+
+
+
+            <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+    <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/4b797253fbda1826953fd57442bfe3d049b618dc/lib/validate-svg-metadata.js#L7-L72'>
+      <span>lib/validate-svg-metadata.js</span>
+      </a>
+
+  </div>
+
+
+  <p>Validates metadata that is parsed from an SVG metadata</p>
+
+
+  <div class='pre p1 fill-light mt0'>validateMetadata(metadata: <a href="#metadata">Metadata</a>): (null | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>)</div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>metadata</span> <code class='quiet'>(<a href="#metadata">Metadata</a>)</code> A metadata object with 
+<code>width</code>
+ and 
+<code>height</code>
+.
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+      <div class='py1 quiet mt1 prose-big'>Returns</div>
+      <code>(null | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>)</code>:
+        err              An 
+<code>Error</code>
+ object if validation fails, 
+<code>null</code>
+ otherwise.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 </section>