freesewing/designs/rendertest/src/demo.mjs

export const demo = {
  name: 'rendertest.demo',
  options: {
    width: { mm: 200, min: 50, max: 500, testIgnore: false },
    only: {
      menu: 'show',
      dflt: 'false',
      list: [
        'false',
        'circles',
        'colors',
        'widths',
        'styles',
        'combos',
        'text',
        'snippets',
        'macros',
      ],
    },
  },
  draft: (params) => {
    const { store, options, Path, paths, Point, part } = params
    // Keep things in store
    store.set('y', 0)
    store.set('w', options.width)
    store.set('colors', [
      'fabric',
      'lining',
      'interfacing',
      'canvas',
      'various',
      'mark',
      'contrast',
      'note',
    ])
    store.set('widths', [
      'stroke-xs',
      'stroke-sm',
      'default-width',
      'stroke-lg',
      'stroke-xl',
      'stroke-2xl',
    ])
    store.set('styles', ['default-style', 'dotted', 'dashed', 'lashed', 'sa', 'help', 'hidden'])

    // We are drafting all this in one part to control the layout
    if (options.only === 'false' || options.only === 'colors') addColors(params, true)
    if (options.only === 'false' || options.only === 'widths') addWidths(params, true)
    if (options.only === 'false' || options.only === 'styles') addStyles(params, true)
    if (options.only === 'false' || options.only === 'combos') addCombos(params, true)
    if (options.only === 'false' || options.only === 'circles') addCircles(params)
    if (options.only === 'false' || options.only === 'text') addText(params, true)
    if (options.only === 'false' || options.only === 'snippets') addSnippets(params, true)
    if (options.only === 'false' || options.only === 'macros') addMacros(params, true)

    // 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')))
      .attr('class', 'hidden')

    return part
  },
}

function addCircles({ Point, points, store, options, part }) {
  if (options.only === 'circles') {
    let y = store.get('y')
    const w = store.get('w')

    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)
  }

  return part
}

function addColors({ Point, Path, points, paths, store, options, part }, demo = false) {
  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
}

function addCombos({ Point, Path, points, paths, store, options, part }, demo = false) {
  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
}

function addMacros({ macro, Point, Path, points, paths, store, options, part }, demo = false) {
  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', {
      id: 'title',
      at: new Point(10, y),
      nr: 5,
      title: 'title',
    })

    // grainline
    y += 40
    macro('grainline', {
      id: 'grainline',
      from: new Point(0, y),
      to: new Point(w, y),
    })

    // cutonfold
    y += 35
    macro('cutonfold', {
      id: 'cutonfold1',
      from: new Point(0, y),
      to: new Point(w, y),
    })

    // cutonfold * grainline
    y += 30
    macro('cutonfold', {
      id: 'cutonfold2',
      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', {
      id: 'hd',
      from: points.dimf,
      to: points.dimt,
      text: 'hd',
      y: y - 15,
      force: true,
    })
    macro('vd', {
      id: 'vd',
      from: points.dimt,
      to: points.dimf,
      text: 'vd',
      x: 0,
      force: true,
    })
    macro('ld', {
      id: 'ld',
      from: points.dimf,
      to: points.dimt,
      text: 'ld',
      force: true,
    })
    macro('pd', {
      id: 'pd',
      path: paths.dims,
      text: 'pd',
      d: 10,
      force: true,
    })

    // scalebox
    y += 170
    macro('scalebox', {
      id: 'scalebox',
      at: new Point(w / 2, y),
    })

    // miniscale
    y += 45
    macro('miniscale', {
      id: 'miniscale',
      at: new Point(w / 2, y),
    })

    store.set('y', y)
  }

  return part
}

function addSnippets(
  { Point, Path, points, paths, snippets, Snippet, store, options, part },
  demo = false
) {
  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,
    }
    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))
  }

  return part
}

function addStyles({ Point, Path, points, paths, store, options, part }, demo = false) {
  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
}

function addText({ Point, Path, points, paths, store, options, part }, demo = false) {
  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)
      .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)
  }

  return part
}

function addWidths({ Point, Path, points, paths, store, options, part }, demo = false) {
  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
}