feat(rendertest): Changed to allow individual parts in examples

packages/rendertest/config/index.js

@@ -10,10 +10,20 @@ export default {
   difficulty: 1,
   optionGroups: {
     size: ['width'],
-    content: ['colors', 'circles', 'text', 'snippets', 'macros'],
+    content: ['only'],
   },
   measurements: [],
-  parts: ['test'],
+  parts: [
+    'demo',
+    'circles',
+    'colors',
+    'widths',
+    'styles',
+    'combos',
+    'text',
+    'snippets',
+    'macros',
+  ],
   options: {
     width: { mm: 200, min: 50, max: 500, testIgnore: true },
     strokeColors: { bool: true },
@@ -24,5 +34,19 @@ export default {
     text: { bool: true },
     snippets: { bool: true },
     macros: { bool: true },
+    only: {
+      dflt: false,
+      list: [
+        false,
+        'circles',
+        'colors',
+        'widths',
+        'styles',
+        'combos',
+        'text',
+        'snippets',
+        'macros',
+      ]
+    }
   },
 }

packages/rendertest/src/circles.js

@@ -1,24 +1,27 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, store, options } = part.shorthand()
 
-  let y = store.get('y')
-  const w = store.get('w')
-  let colors = store.get('colors')
+  if (options.only === 'circles' || demo) {
 
-  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)
-      .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', i * (w / 50))
-      .attr('data-circle-class', 'fabric ' + store.get('widths')[i] + ' ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
+    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)
+        .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)
+        .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', i * (w / 50))
+        .attr('data-circle-class', 'fabric ' + store.get('widths')[i] + ' ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
+    }
+    y += w/8
+    store.set('y', y)
   }
-  y += w/8
-  store.set('y', y)
 
   return part
 }

packages/rendertest/src/colors.js

@@ -0,0 +1,33 @@
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, store, options } = part.shorthand()
+
+  if (options.only === 'colors' || demo) {
+    let y = store.get('y')
+    const w = store.get('w')
+
+    // 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)
+      .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)
+      paths[`color${color}`] = new Path()
+        .move(points[`l-${color}`])
+        .line(points[`r-${color}`])
+        .attr('class', color)
+        .attr('data-text', `.${color}`)
+    }
+
+    // Update y
+    store.set('y', y)
+  }
+
+  return part
+}

packages/rendertest/src/combos.js

@@ -0,0 +1,41 @@
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, store, options } = part.shorthand()
+
+  if (options.only === 'combos' || demo) {
+    let y = store.get('y')
+    const w = store.get('w')
+
+    // 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)
+      .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)
+    paths.combo1 = new Path()
+      .move(points.combo1l)
+      .line(points.combo1r)
+      .attr('class', 'lining sa')
+      .attr('data-text', `.lining.sa`)
+
+    y += 12
+    points.combo2l = new Point(0,y)
+    points.combo2r = new Point(w,y)
+    paths.combo2 = new Path()
+      .move(points.combo2l)
+      .line(points.combo2r)
+      .attr('class', 'stroke-lg various help')
+      .attr('data-text', `.stroke-lg various help`)
+
+    // Update y
+    store.set('y', y)
+  }
+
+  return part
+}

packages/rendertest/src/demo.js

@@ -1,11 +1,11 @@
-import strokeColors from './stroke-colors'
-import strokeWidths from './stroke-widths'
-import strokeStyles from './stroke-styles'
-import strokeCombos from './stroke-combos'
-import circles from './circles'
-import text from './text'
-import snippets from './snippets'
-import macros from './macros'
+import strokeColors from './colors.js'
+import strokeWidths from './widths.js'
+import strokeStyles from './styles.js'
+import strokeCombos from './combos.js'
+import circles from './circles.js'
+import text from './text.js'
+import snippets from './snippets.js'
+import macros from './macros.js'
 
 export default function (part) {
   const { macro, store, options, Path, paths, Point } = part.shorthand()
@@ -40,14 +40,18 @@ export default function (part) {
     'help',
     'hidden',
   ])
-  if (options.strokeColors) strokeColors(part)
-  if (options.strokeWidths) strokeWidths(part)
-  if (options.strokeStyles) strokeStyles(part)
-  if (options.strokeCombos) strokeCombos(part)
-  if (options.circles) circles(part)
-  if (options.text) text(part)
-  if (options.snippets) snippets(part)
-  if (options.macros) macros(part)
+
+  if (options.only) return part
+
+  // We are drafting in one part to control the layout
+  if (options.strokeColors) strokeColors(part, true)
+  if (options.strokeWidths) strokeWidths(part, true)
+  if (options.strokeStyles) strokeStyles(part, true)
+  if (options.strokeCombos) strokeCombos(part, true)
+  if (options.circles) circles(part, true)
+  if (options.text) text(part, true)
+  if (options.snippets) snippets(part, true)
+  if (options.macros) macros(part, true)
 
   // Make sure no text is cut off
   paths.box = new Path()

packages/rendertest/src/index.js

@@ -2,12 +2,28 @@ import freesewing from '@freesewing/core'
 import plugins from '@freesewing/plugin-bundle'
 import config from '../config'
 // Parts
-import draftTest from './test'
+import draftDemo from './demo'
+import draftCircles from './circles.js'
+import draftColors from './colors.js'
+import draftWidths from './widths.js'
+import draftStyles from './styles.js'
+import draftCombos from './combos.js'
+import draftText from './text.js'
+import draftSnippets from './snippets.js'
+import draftMacros from './macros.js'
 
 // Create design
 const Pattern = new freesewing.Design(config, plugins)
 
 // Attach draft methods to prototype
-Pattern.prototype.draftTest = (part) => draftTest(part)
+Pattern.prototype.draftDemo = (part) => draftDemo(part)
+Pattern.prototype.draftCircles = (part) => draftCircles(part)
+Pattern.prototype.draftColors = (part) => draftColors(part)
+Pattern.prototype.draftWidths = (part) => draftWidths(part)
+Pattern.prototype.draftStyles = (part) => draftStyles(part)
+Pattern.prototype.draftCombos = (part) => draftCombos(part)
+Pattern.prototype.draftText = (part) => draftText(part)
+Pattern.prototype.draftSnippets = (part) => draftSnippets(part)
+Pattern.prototype.draftMacros = (part) => draftMacros(part)
 
 export default Pattern

packages/rendertest/src/macros.js

@@ -1,86 +1,92 @@
-export default function (part) {
-  const { macro, Point, Path, points, paths, store } = part.shorthand()
+export default function (part, demo=false) {
+  const { macro, Point, Path, points, paths, store, options } = part.shorthand()
 
-  let y = store.get('y')
-  const w = store.get('w')
-  y += 10
-  points.macros = new Point(0,y)
-    .attr('data-text', 'Macros')
-    .attr('data-text-class', 'text-lg bold')
+  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')
 
-  // title
-  y += 60
-  macro('title', {
-    at: new Point(w / 2, y),
-    nr: 5,
-    title: 'title',
-  })
+    // title
+    y += 60
+    macro('title', {
+      at: new Point(10, y),
+      nr: 5,
+      title: 'title',
+    })
 
-  // grainline
-  y += 40
-  macro('grainline', {
-    from: new Point(0, y),
-    to: new Point(w, y),
-  })
+    // grainline
+    y += 40
+    macro('grainline', {
+      from: new Point(0, y),
+      to: new Point(w, y),
+    })
 
-  // cutonfold
-  y += 35
-  macro('cutonfold', {
-    from: new Point(0, y),
-    to: new Point(w, y),
-  })
+    // cutonfold
+    y += 35
+    macro('cutonfold', {
+      from: new Point(0, y),
+      to: new Point(w, y),
+    })
 
-  // cutonfold * grainline
-  y += 30
-  macro('cutonfold', {
-    from: new Point(0, y),
-    to: new Point(w, y),
-    grainline: true,
-    prefix: 'combo'
-  })
+    // cutonfold * grainline
+    y += 30
+    macro('cutonfold', {
+      from: new Point(0, y),
+      to: new Point(w, y),
+      grainline: true,
+      prefix: 'combo'
+    })
 
-  // hd, vd, ld, and pd
-  y += 30
-  points.dimf = new Point(20, y)
-  points.dimt = new Point(w - 20, y + 120)
-  points.dimv = new Point(20, y + 80)
-  paths.dims = new Path().move(points.dimf)._curve(points.dimv, points.dimt)
-  macro('hd', {
-    from: points.dimf,
-    to: points.dimt,
-    text: 'hd',
-    y: y - 15,
-  })
-  macro('vd', {
-    from: points.dimt,
-    to: points.dimf,
-    text: 'vd',
-    x: 0,
-  })
-  macro('ld', {
-    from: points.dimf,
-    to: points.dimt,
-    text: 'ld',
-  })
-  macro('pd', {
-    path: paths.dims,
-    text: 'pd',
-    d: 10,
-  })
+    // hd, vd, ld, and pd
+    y += 30
+    points.dimf = new Point(20, y)
+    points.dimt = new Point(w - 20, y + 120)
+    points.dimv = new Point(20, y + 80)
+    paths.dims = new Path().move(points.dimf)._curve(points.dimv, points.dimt)
+    macro('hd', {
+      from: points.dimf,
+      to: points.dimt,
+      text: 'hd',
+      y: y - 15,
+    })
+    macro('vd', {
+      from: points.dimt,
+      to: points.dimf,
+      text: 'vd',
+      x: 0,
+    })
+    macro('ld', {
+      from: points.dimf,
+      to: points.dimt,
+      text: 'ld',
+    })
+    macro('pd', {
+      path: paths.dims,
+      text: 'pd',
+      d: 10,
+    })
 
-  // scalebox
-  y += 170
-  macro('scalebox', {
-    at: new Point(w / 2, y),
-  })
+    // scalebox
+    y += 170
+    macro('scalebox', {
+      at: new Point(w / 2, y),
+    })
 
-  // miniscale
-  y += 45
-  macro('miniscale', {
-    at: new Point(w / 2, y),
-  })
+    // miniscale
+    y += 45
+    macro('miniscale', {
+      at: new Point(w / 2, y),
+    })
 
-  store.set('y', y)
+    store.set('y', y)
+  }
 
   return part
 }

packages/rendertest/src/snippets.js

@@ -1,55 +1,62 @@
-export default function (part) {
-  let { Point, Path, points, paths, snippets, Snippet, store } = part.shorthand()
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, snippets, Snippet, store, options } = part.shorthand()
 
-  let y = store.get('y')
-  let w = store.get('w')
+  if (options.only === 'snippets' || demo) {
+    let y = store.get('y')
+    let w = store.get('w')
 
-  const snips = {
-    logo: 35,
-    notch: 15,
-    bnotch: 15,
-    button: 15,
-    buttonhole: 25,
-    "buttonhole-start": 15,
-    "buttonhole-end": 25,
-    "snap-socket": 25,
-    "snap-stud": 15,
+    const snips = {
+      logo: 35,
+      notch: 15,
+      bnotch: 15,
+      button: 15,
+      buttonhole: 25,
+      "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')
+    y += 10
+    points['sl1'] = new Point(w * 0.25, y)
+    points['sl2'] = new Point(w * 0.5, y)
+    points['sl3'] = new Point(w * 0.75, y)
+    points['sl1']
+      .attr('data-text', 'data-scale: 1\ndata-rotate: 0')
+      .attr('data-text-class', 'center text')
+      .attr('data-text-lineheight', 7)
+    points['sl2']
+      .attr('data-text', 'data-scale: 1.25\ndata-rotate: 0')
+      .attr('data-text-class', 'center text')
+      .attr('data-text-lineheight', 7)
+    points['sl3']
+      .attr('data-text', 'data-scale: 0.75\ndata-rotate: 90')
+      .attr('data-text-class', 'center text')
+      .attr('data-text-lineheight', 7)
+    y += 55
+    for (let i in snips) {
+      points['snt' + i] = new Point(0, y)
+      points['snt' + i].attr('data-text', i)
+      points['sn1' + i] = new Point(w * 0.3, y)
+      points['sn2' + i] = new Point(w * 0.55, y)
+      points['sn3' + i] = new Point(w * 0.8, y)
+      snippets['sn1' + i] = new Snippet(i, points['sn1' + i])
+      snippets['sn2' + i] = new Snippet(i, points['sn2' + i])
+      snippets['sn2' + i].attr('data-scale', 1.25)
+      snippets['sn3' + i] = new Snippet(i, points['sn3' + i])
+      snippets['sn3' + i].attr('data-scale', 0.75).attr('data-rotate', 90)
+      y += snips[i]
+    }
+    store.set('y', y)
+    if (!demo) paths.noClip.line(new Point(w, y))
   }
-  y += 20
-  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)
-  points['sl3'] = new Point(w * 0.75, y)
-  points['sl1']
-    .attr('data-text', 'data-scale: 1\ndata-rotate: 0')
-    .attr('data-text-class', 'center text')
-    .attr('data-text-lineheight', 7)
-  points['sl2']
-    .attr('data-text', 'data-scale: 1.25\ndata-rotate: 0')
-    .attr('data-text-class', 'center text')
-    .attr('data-text-lineheight', 7)
-  points['sl3']
-    .attr('data-text', 'data-scale: 0.75\ndata-rotate: 90')
-    .attr('data-text-class', 'center text')
-    .attr('data-text-lineheight', 7)
-  y += 55
-  for (let i in snips) {
-    points['snt' + i] = new Point(0, y)
-    points['snt' + i].attr('data-text', i)
-    points['sn1' + i] = new Point(w * 0.3, y)
-    points['sn2' + i] = new Point(w * 0.55, y)
-    points['sn3' + i] = new Point(w * 0.8, y)
-    snippets['sn1' + i] = new Snippet(i, points['sn1' + i])
-    snippets['sn2' + i] = new Snippet(i, points['sn2' + i])
-    snippets['sn2' + i].attr('data-scale', 1.25)
-    snippets['sn3' + i] = new Snippet(i, points['sn3' + i])
-    snippets['sn3' + i].attr('data-scale', 0.75).attr('data-rotate', 90)
-    y += snips[i]
-  }
-  store.set('y', y)
 
   return part
 }

packages/rendertest/src/stroke-colors.js

@@ -1,27 +0,0 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
-
-  let y = store.get('y')
-  const w = store.get('w')
-
-  // Stroke colors
-  y += 10
-  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)
-    paths[`color${color}`] = new Path()
-      .move(points[`l-${color}`])
-      .line(points[`r-${color}`])
-      .attr('class', color)
-      .attr('data-text', `.${color}`)
-  }
-
-  // Update y
-  store.set('y', y)
-
-  return part
-}

packages/rendertest/src/stroke-combos.js

@@ -1,35 +0,0 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
-
-  let y = store.get('y')
-  const w = store.get('w')
-
-  // Stroke combos
-  y += 25
-  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)
-  paths.combo1 = new Path()
-    .move(points.combo1l)
-    .line(points.combo1r)
-    .attr('class', 'lining sa')
-    .attr('data-text', `.lining.sa`)
-
-  y += 12
-  points.combo2l = new Point(0,y)
-  points.combo2r = new Point(w,y)
-  paths.combo2 = new Path()
-    .move(points.combo2l)
-    .line(points.combo2r)
-    .attr('class', 'stroke-lg various help')
-    .attr('data-text', `.stroke-lg various help`)
-
-  // Update y
-  store.set('y', y)
-
-  return part
-}

packages/rendertest/src/stroke-styles.js

@@ -1,27 +0,0 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
-
-  let y = store.get('y')
-  const w = store.get('w')
-
-  // Stroke styles
-  y += 25
-  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)
-    paths[`color${style}`] = new Path()
-      .move(points[`l-${style}`])
-      .line(points[`r-${style}`])
-      .attr('class', `fabric ${style}`)
-      .attr('data-text', style === 'default-style' ? '' : `.${style}`)
-  }
-
-  // Update y
-  store.set('y', y)
-
-  return part
-}

packages/rendertest/src/stroke-widths.js

@@ -1,27 +0,0 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
-
-  let y = store.get('y')
-  const w = store.get('w')
-
-  // Stroke widths
-  y += 25
-  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)
-    paths[`color${width}`] = new Path()
-      .move(points[`l-${width}`])
-      .line(points[`r-${width}`])
-      .attr('class', `fabric ${width}`)
-      .attr('data-text', width === 'default-width' ? '' : `.${width}`)
-  }
-
-  // Update y
-  store.set('y', y)
-
-  return part
-}

packages/rendertest/src/styles.js

@@ -0,0 +1,33 @@
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, store, options } = part.shorthand()
+
+  if (options.only === 'styles' || demo) {
+    let y = store.get('y')
+    const w = store.get('w')
+
+    // 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)
+      .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)
+      paths[`color${style}`] = new Path()
+        .move(points[`l-${style}`])
+        .line(points[`r-${style}`])
+        .attr('class', `fabric ${style}`)
+        .attr('data-text', style === 'default-style' ? '' : `.${style}`)
+    }
+
+    // Update y
+    store.set('y', y)
+  }
+
+  return part
+}

packages/rendertest/src/text.js

@@ -1,72 +1,78 @@
-export default function (part) {
-  const { Point, Path, points, paths, store } = part.shorthand()
+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')
+    let y = store.get('y')
+    const w = store.get('w')
 
-  // Text sizes
-  y += 15
-  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-lg': 10,
-    'text-xl': 14,
-    'text-2xl': 22,
-    'text-3xl': 28,
-    'text-4xl': 42,
+    // 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)
+      .attr('data-text', 'Text sizes')
+      .attr('data-text-class', 'text-lg bold')
+    const sizes = {
+      'text-xs': 3,
+      'text-sm': 5,
+      'text': 8,
+      'text-lg': 10,
+      'text-xl': 14,
+      'text-2xl': 22,
+      'text-3xl': 28,
+      'text-4xl': 42,
+    }
+    for (const [size, shift] of Object.entries(sizes)) {
+      y += shift
+      points['t' + size] = new Point(0, y)
+        .attr('data-text', size)
+        .attr('data-text-class', `text ${size}`)
+    }
+    // Text alignment
+    y += 15
+    points.textalign = new Point(0,y)
+      .attr('data-text', 'Text alignment')
+      .attr('data-text-class', 'text-lg bold')
+    y += 10
+    points.tl = new Point(0, y)
+    points.tr = new Point(w, y)
+    paths.text = new Path().move(points.tl).line(points.tr).attr('data-text', 'text')
+
+    // Align center
+    points.tlc = new Point(0, y)
+    points.trc = new Point(w, y)
+    paths.textc = new Path()
+      .move(points.tlc)
+      .line(points.trc)
+      .attr('data-text', 'text.center')
+      .attr('data-text-class', 'center')
+    // Align right
+    points.tlr = new Point(0, y)
+    points.trr = new Point(w, y)
+    paths.textr = new Path()
+      .move(points.tlr)
+      .line(points.trr)
+      .attr('data-text', 'text.right')
+      .attr('data-text-class', 'right')
+
+    // Text style
+    y += 20
+    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')
+    y += 10
+    points.tbold = new Point(0, y)
+      .attr('data-text', '.bold')
+      .attr('data-text-class', 'bold')
+
+    store.set('y', y)
   }
-  for (const [size, shift] of Object.entries(sizes)) {
-    y += shift
-    points['t' + size] = new Point(0, y)
-      .attr('data-text', size)
-      .attr('data-text-class', `text ${size}`)
-  }
-  // Text alignment
-  y += 15
-  points.textalign = new Point(0,y)
-    .attr('data-text', 'Text alignment')
-    .attr('data-text-class', 'text-lg bold')
-  y += 10
-  points.tl = new Point(0, y)
-  points.tr = new Point(w, y)
-  paths.text = new Path().move(points.tl).line(points.tr).attr('data-text', 'text')
-
-  // Align center
-  points.tlc = new Point(0, y)
-  points.trc = new Point(w, y)
-  paths.textc = new Path()
-    .move(points.tlc)
-    .line(points.trc)
-    .attr('data-text', 'text.center')
-    .attr('data-text-class', 'center')
-  // Align right
-  points.tlr = new Point(0, y)
-  points.trr = new Point(w, y)
-  paths.textr = new Path()
-    .move(points.tlr)
-    .line(points.trr)
-    .attr('data-text', 'text.right')
-    .attr('data-text-class', 'right')
-
-  // Text style
-  y += 20
-  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')
-  y += 10
-  points.tbold = new Point(0, y)
-    .attr('data-text', '.bold')
-    .attr('data-text-class', 'bold')
-
-  store.set('y', y)
 
   return part
 }

packages/rendertest/src/widths.js

@@ -0,0 +1,33 @@
+export default function (part, demo=false) {
+  const { Point, Path, points, paths, store, options } = part.shorthand()
+
+  if (options.only === 'widths' || demo) {
+    let y = store.get('y')
+    const w = store.get('w')
+
+    // 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)
+      .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)
+      paths[`color${width}`] = new Path()
+        .move(points[`l-${width}`])
+        .line(points[`r-${width}`])
+        .attr('class', `fabric ${width}`)
+        .attr('data-text', width === 'default-width' ? '' : `.${width}`)
+    }
+
+    // Update y
+    store.set('y', y)
+  }
+
+  return part
+}