VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(rendertest): Make it prettier

Browse source
This commit is contained in:
Joost De Cock 2022-01-19 16:23:13 +01:00
parent b1647a7371
commit ca4c0b5bae
10 changed files with 97 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/rendertest/config/index.js
View file

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

30
packages/rendertest/src/circles.js
View file

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

17
packages/rendertest/src/colors.js
View file

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

21
packages/rendertest/src/combos.js
View file

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

12
packages/rendertest/src/demo.js
View file

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

17
packages/rendertest/src/macros.js
View file

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

26
packages/rendertest/src/snippets.js
View file

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

17
packages/rendertest/src/styles.js
View file

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

28
packages/rendertest/src/text.js
View file

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

17
packages/rendertest/src/widths.js
View file

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