chore(rendertest): Make it prettier

packages/rendertest/config/index.js

@@ -13,17 +13,7 @@ export default {
     content: ['only'],
   },
   measurements: [],
-  parts: [
-    'demo',
-    'circles',
-    'colors',
-    'widths',
-    'styles',
-    'combos',
-    'text',
-    'snippets',
-    'macros',
-  ],
+  parts: ['demo', 'circles', 'colors', 'widths', 'styles', 'combos', 'text', 'snippets', 'macros'],
   options: {
     width: { mm: 200, min: 50, max: 500, testIgnore: true },
     strokeColors: { bool: true },
@@ -46,7 +36,7 @@ export default {
         'text',
         'snippets',
         'macros',
-      ]
-    }
+      ],
+    },
   },
 }

packages/rendertest/src/circles.js

@@ -1,25 +1,35 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'circles' || demo) {
-
     let y = store.get('y')
     const w = store.get('w')
     let colors = store.get('colors')
 
-    y += w/8 + 5
-    for (let i=1; i<6;i++) {
-      points[`circles1-${i}`] = new Point(w/3 - w/6, y)
+    y += w / 8 + 5
+    for (let i = 1; i < 6; i++) {
+      points[`circles1-${i}`] = new Point(w / 3 - w / 6, y)
         .attr('data-circle', i * (w / 50))
         .attr('data-circle-class', store.get('colors')[i])
-      points[`circles2-${i}`] = new Point(w/3*2 - w/6, y)
+      points[`circles2-${i}`] = new Point((w / 3) * 2 - w / 6, y)
         .attr('data-circle', i * (w / 50))
-        .attr('data-circle-class', 'fabric ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
-      points[`circles3-${i}`] = new Point(w - w/6, y)
+        .attr(
+          'data-circle-class',
+          'fabric ' + store.get('styles')[i] + ' ' + store.get('colors')[i]
+        )
+      points[`circles3-${i}`] = new Point(w - w / 6, y)
         .attr('data-circle', i * (w / 50))
-        .attr('data-circle-class', 'fabric ' + store.get('widths')[i] + ' ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
+        .attr(
+          'data-circle-class',
+          'fabric ' +
+            store.get('widths')[i] +
+            ' ' +
+            store.get('styles')[i] +
+            ' ' +
+            store.get('colors')[i]
+        )
     }
-    y += w/8
+    y += w / 8
     store.set('y', y)
   }
 

packages/rendertest/src/colors.js

@@ -1,4 +1,4 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'colors' || demo) {
@@ -7,17 +7,18 @@ export default function (part, demo=false) {
 
     // Stroke colors
     y += 10
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    points.colors = new Point(0,y)
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    points.colors = new Point(0, y)
       .attr('data-text', 'Stroke colors')
       .attr('data-text-class', 'text-lg bold')
     for (const color of store.get('colors').sort()) {
       y += 12
-      points[`l-${color}`] = new Point(0,y)
-      points[`r-${color}`] = new Point(w,y)
+      points[`l-${color}`] = new Point(0, y)
+      points[`r-${color}`] = new Point(w, y)
       paths[`color${color}`] = new Path()
         .move(points[`l-${color}`])
         .line(points[`r-${color}`])

packages/rendertest/src/combos.js

@@ -1,4 +1,4 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'combos' || demo) {
@@ -7,17 +7,18 @@ export default function (part, demo=false) {
 
     // Stroke combos
     y += 25
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    points.combos = new Point(0,y)
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    points.combos = new Point(0, y)
       .attr('data-text', 'Combining stroke classes')
       .attr('data-text-class', 'text-lg bold')
 
     y += 12
-    points.combo1l = new Point(0,y)
-    points.combo1r = new Point(w,y)
+    points.combo1l = new Point(0, y)
+    points.combo1r = new Point(w, y)
     paths.combo1 = new Path()
       .move(points.combo1l)
       .line(points.combo1r)
@@ -25,8 +26,8 @@ export default function (part, demo=false) {
       .attr('data-text', `.lining.sa`)
 
     y += 12
-    points.combo2l = new Point(0,y)
-    points.combo2r = new Point(w,y)
+    points.combo2l = new Point(0, y)
+    points.combo2r = new Point(w, y)
     paths.combo2 = new Path()
       .move(points.combo2l)
       .line(points.combo2r)

packages/rendertest/src/demo.js

@@ -31,15 +31,7 @@ export default function (part) {
     'stroke-xl',
     'stroke-2xl',
   ])
-  store.set('styles', [
-    'default-style',
-    'dotted',
-    'dashed',
-    'lashed',
-    'sa',
-    'help',
-    'hidden',
-  ])
+  store.set('styles', ['default-style', 'dotted', 'dashed', 'lashed', 'sa', 'help', 'hidden'])
 
   if (options.only) return part
 
@@ -56,7 +48,7 @@ export default function (part) {
   // Make sure no text is cut off
   paths.box = new Path()
     .move(new Point(-10, -10))
-    .line(new Point(store.get('w')+10, store.get('y')))
+    .line(new Point(store.get('w') + 10, store.get('y')))
     .attr('class', 'hidden')
 
   return part

packages/rendertest/src/macros.js

@@ -1,17 +1,16 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { macro, Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'macros' || demo) {
     let y = store.get('y')
     const w = store.get('w')
     y += 10
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y))
-      .line(new Point(10, y))
-      .attr('class', 'hidden')
-    else points.macros = new Point(0,y)
-      .attr('data-text', 'Macros')
-      .attr('data-text-class', 'text-lg bold')
+    if (!demo)
+      paths.noClip = new Path().move(new Point(0, y)).line(new Point(10, y)).attr('class', 'hidden')
+    else
+      points.macros = new Point(0, y)
+        .attr('data-text', 'Macros')
+        .attr('data-text-class', 'text-lg bold')
 
     // title
     y += 60
@@ -41,7 +40,7 @@ export default function (part, demo=false) {
       from: new Point(0, y),
       to: new Point(w, y),
       grainline: true,
-      prefix: 'combo'
+      prefix: 'combo',
     })
 
     // hd, vd, ld, and pd

packages/rendertest/src/snippets.js

@@ -1,4 +1,4 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, snippets, Snippet, store, options } = part.shorthand()
 
   if (options.only === 'snippets' || demo) {
@@ -11,19 +11,21 @@ export default function (part, demo=false) {
       bnotch: 15,
       button: 15,
       buttonhole: 25,
-      "buttonhole-start": 15,
-      "buttonhole-end": 25,
-      "snap-socket": 25,
-      "snap-stud": 15,
+      'buttonhole-start': 15,
+      'buttonhole-end': 25,
+      'snap-socket': 25,
+      'snap-stud': 15,
     }
     y += 20
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    else points.snippets = new Point(0,y)
-      .attr('data-text', 'Snippets')
-      .attr('data-text-class', 'text-lg bold')
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    else
+      points.snippets = new Point(0, y)
+        .attr('data-text', 'Snippets')
+        .attr('data-text-class', 'text-lg bold')
     y += 10
     points['sl1'] = new Point(w * 0.25, y)
     points['sl2'] = new Point(w * 0.5, y)

packages/rendertest/src/styles.js

@@ -1,4 +1,4 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'styles' || demo) {
@@ -7,17 +7,18 @@ export default function (part, demo=false) {
 
     // Stroke styles
     y += 25
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    points.styles = new Point(0,y)
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    points.styles = new Point(0, y)
       .attr('data-text', 'Stroke styles')
       .attr('data-text-class', 'text-lg bold')
     for (const style of store.get('styles')) {
       y += 12
-      points[`l-${style}`] = new Point(0,y)
-      points[`r-${style}`] = new Point(w,y)
+      points[`l-${style}`] = new Point(0, y)
+      points[`r-${style}`] = new Point(w, y)
       paths[`color${style}`] = new Path()
         .move(points[`l-${style}`])
         .line(points[`r-${style}`])

packages/rendertest/src/text.js

@@ -1,23 +1,23 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
   if (options.only === 'text' || demo) {
-
     let y = store.get('y')
     const w = store.get('w')
 
     // Text sizes
     y += 15
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    points.textsize = new Point(0,y)
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    points.textsize = new Point(0, y)
       .attr('data-text', 'Text sizes')
       .attr('data-text-class', 'text-lg bold')
     const sizes = {
       'text-xs': 3,
       'text-sm': 5,
-      'text': 8,
+      text: 8,
       'text-lg': 10,
       'text-xl': 14,
       'text-2xl': 22,
@@ -32,7 +32,7 @@ export default function (part, demo=false) {
     }
     // Text alignment
     y += 15
-    points.textalign = new Point(0,y)
+    points.textalign = new Point(0, y)
       .attr('data-text', 'Text alignment')
       .attr('data-text-class', 'text-lg bold')
     y += 10
@@ -59,17 +59,13 @@ export default function (part, demo=false) {
 
     // Text style
     y += 20
-    points.textstyle = new Point(0,y)
+    points.textstyle = new Point(0, y)
       .attr('data-text', 'Text style')
       .attr('data-text-class', 'text-lg bold')
     y += 10
-    points.titalic = new Point(0, y)
-      .attr('data-text', '.italic')
-      .attr('data-text-class', 'italic')
+    points.titalic = new Point(0, y).attr('data-text', '.italic').attr('data-text-class', 'italic')
     y += 10
-    points.tbold = new Point(0, y)
-      .attr('data-text', '.bold')
-      .attr('data-text-class', 'bold')
+    points.tbold = new Point(0, y).attr('data-text', '.bold').attr('data-text-class', 'bold')
 
     store.set('y', y)
   }

packages/rendertest/src/widths.js

@@ -1,4 +1,4 @@
-export default function (part, demo=false) {
+export default function (part, demo = false) {
   const { Point, Path, points, paths, store, options } = part.shorthand()
 
   if (options.only === 'widths' || demo) {
@@ -7,17 +7,18 @@ export default function (part, demo=false) {
 
     // Stroke widths
     y += 25
-    if (!demo) paths.noClip = new Path()
-      .move(new Point(0, y-5))
-      .line(new Point(10, y-5))
-      .attr('class', 'hidden')
-    points.widths = new Point(0,y)
+    if (!demo)
+      paths.noClip = new Path()
+        .move(new Point(0, y - 5))
+        .line(new Point(10, y - 5))
+        .attr('class', 'hidden')
+    points.widths = new Point(0, y)
       .attr('data-text', 'Stroke widths')
       .attr('data-text-class', 'text-lg bold')
     for (const width of store.get('widths')) {
       y += 12
-      points[`l-${width}`] = new Point(0,y)
-      points[`r-${width}`] = new Point(w,y)
+      points[`l-${width}`] = new Point(0, y)
+      points[`r-${width}`] = new Point(w, y)
       paths[`color${width}`] = new Path()
         .move(points[`l-${width}`])
         .line(points[`r-${width}`])