feat: Updated rendertest
This commit is contained in:
parent
4c5f5688b4
commit
e70d6abe92
11 changed files with 272 additions and 133 deletions
|
@ -16,11 +16,13 @@ export default {
|
|||
parts: ['test'],
|
||||
options: {
|
||||
width: { mm: 200, min: 50, max: 500, testIgnore: true },
|
||||
colors: { bool: true },
|
||||
strokeColors: { bool: true },
|
||||
strokeWidths: { bool: true },
|
||||
strokeStyles: { bool: true },
|
||||
strokeCombos: { bool: true },
|
||||
circles: { bool: true },
|
||||
text: { bool: true },
|
||||
snippets: { bool: true },
|
||||
macros: { bool: true },
|
||||
widthHd: { bool: true },
|
||||
},
|
||||
}
|
||||
|
|
|
@ -1,20 +1,23 @@
|
|||
export default function (part) {
|
||||
let { Point, Path, points, paths, store } = part.shorthand()
|
||||
const { Point, Path, points, paths, store } = part.shorthand()
|
||||
|
||||
let y = store.get('y')
|
||||
let w = store.get('w')
|
||||
const w = store.get('w')
|
||||
let colors = store.get('colors')
|
||||
|
||||
points.crl = new Point(0, y)
|
||||
points.crr = new Point(w, y)
|
||||
paths.circles = new Path().move(points.crl).line(points.crr).attr('data-text', 'circles')
|
||||
y += w / 2
|
||||
for (let i = 1; i < 50; i++) {
|
||||
points['cr' + i] = new Point(w / 2, y)
|
||||
.attr('data-circle', i * (w / 100))
|
||||
.attr('data-circle-class', colors[i % colors.length])
|
||||
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 / 2
|
||||
y += w/8
|
||||
store.set('y', y)
|
||||
|
||||
return part
|
||||
|
|
|
@ -1,71 +0,0 @@
|
|||
export default function (part) {
|
||||
let { Point, Path, points, paths, store } = part.shorthand()
|
||||
|
||||
let y = store.get('y')
|
||||
let w = store.get('w')
|
||||
let colors = store.get('colors')
|
||||
let sizes = ['xs', 'sm', '', 'l', 'xl']
|
||||
let utility = ['dotted', 'dashed', 'lashed', 'sa', 'help', 'hidden']
|
||||
|
||||
for (let i = 0; i < utility.length; i++) {
|
||||
y += 15
|
||||
points['l' + i] = new Point(0, y)
|
||||
points['r' + i] = new Point(w, y)
|
||||
paths['heading' + i] = new Path()
|
||||
.move(points['l' + i])
|
||||
.line(points['r' + i])
|
||||
.attr('class', colors[i])
|
||||
.attr('data-text', colors[i])
|
||||
for (let j = 0; j < sizes.length; j++) {
|
||||
y += 10
|
||||
points['sl' + i + j] = new Point(0, y)
|
||||
points['sr' + i + j] = new Point(w, y)
|
||||
paths['size' + i + j] = new Path()
|
||||
.move(points['sl' + i + j])
|
||||
.line(points['sr' + i + j])
|
||||
.attr('class', colors[i])
|
||||
.attr('class', 'stroke-' + sizes[j])
|
||||
.attr('data-text', 'path.' + colors[i] + (sizes[j] === '' ? '' : '.stroke-' + sizes[j]))
|
||||
.attr('data-text-class', 'center')
|
||||
}
|
||||
for (let j = 0; j < utility.length; j++) {
|
||||
y += 10
|
||||
points['ul' + i + j] = new Point(0, y)
|
||||
points['ur' + i + j] = new Point(w, y)
|
||||
paths['util' + i + j] = new Path()
|
||||
.move(points['ul' + i + j])
|
||||
.line(points['ur' + i + j])
|
||||
.attr('class', colors[i])
|
||||
.attr('class', utility[j])
|
||||
.attr('data-text', 'path.' + colors[i] + '.' + utility[j])
|
||||
.attr('data-text-class', 'center')
|
||||
}
|
||||
}
|
||||
|
||||
y += 10
|
||||
points.ftl = new Point(0, y)
|
||||
points.ftr = new Point(w, y)
|
||||
paths.snip = new Path().move(points.ftl).line(points.ftr).attr('data-text', 'fill')
|
||||
y += 15
|
||||
for (let i of colors) {
|
||||
let h = 10
|
||||
points['_bl' + i] = new Point(0, y)
|
||||
points['_br' + i] = new Point(w, y)
|
||||
points['_tr' + i] = new Point(w, y - h)
|
||||
points['_tl' + i] = new Point(0, y - h)
|
||||
paths['box' + i] = new Path()
|
||||
.move(points['_bl' + i])
|
||||
.line(points['_br' + i])
|
||||
.line(points['_tr' + i])
|
||||
.line(points['_tl' + i])
|
||||
.close()
|
||||
.attr('class', i)
|
||||
.attr('class', 'fill-' + i)
|
||||
.attr('data-text', '.fill-' + i)
|
||||
if (i === 'fabric') paths['box' + i].attr('data-text-class', 'fill-mark')
|
||||
y += h * 1.2
|
||||
}
|
||||
store.set('y', y)
|
||||
|
||||
return part
|
||||
}
|
|
@ -1,33 +1,46 @@
|
|||
export default function (part) {
|
||||
let { macro, Point, Path, points, paths, store } = part.shorthand()
|
||||
const { macro, Point, Path, points, paths, store } = part.shorthand()
|
||||
|
||||
let y = store.get('y')
|
||||
let w = store.get('w')
|
||||
const w = store.get('w')
|
||||
y += 10
|
||||
points.ml = new Point(0, y)
|
||||
points.mr = new Point(w, y)
|
||||
paths.macros = new Path().move(points.ml).line(points.mr).attr('data-text', 'macros')
|
||||
points.macros = new Point(0,y)
|
||||
.attr('data-text', 'Macros')
|
||||
.attr('data-text-class', 'text-lg bold')
|
||||
|
||||
y += 40
|
||||
// title
|
||||
y += 60
|
||||
macro('title', {
|
||||
at: new Point(w / 2, y),
|
||||
nr: 5,
|
||||
title: 'title',
|
||||
})
|
||||
|
||||
// grainline
|
||||
y += 40
|
||||
macro('grainline', {
|
||||
from: new Point(0, y),
|
||||
to: new Point(w, y),
|
||||
})
|
||||
|
||||
y += 20
|
||||
// cutonfold
|
||||
y += 35
|
||||
macro('cutonfold', {
|
||||
from: new Point(w, y),
|
||||
to: new Point(0, y),
|
||||
from: new Point(0, y),
|
||||
to: new Point(w, y),
|
||||
})
|
||||
|
||||
y += 70
|
||||
// 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)
|
||||
|
@ -55,10 +68,18 @@ export default function (part) {
|
|||
d: 10,
|
||||
})
|
||||
|
||||
// scalebox
|
||||
y += 170
|
||||
macro('scalebox', {
|
||||
at: new Point(w / 2, y),
|
||||
})
|
||||
|
||||
// miniscale
|
||||
y += 45
|
||||
macro('miniscale', {
|
||||
at: new Point(w / 2, y),
|
||||
})
|
||||
|
||||
store.set('y', y)
|
||||
|
||||
return part
|
||||
|
|
|
@ -4,40 +4,44 @@ export default function (part) {
|
|||
let y = store.get('y')
|
||||
let w = store.get('w')
|
||||
|
||||
let snips = {
|
||||
logo: 25,
|
||||
const snips = {
|
||||
logo: 75,
|
||||
notch: 15,
|
||||
bnotch: 15,
|
||||
button: 15,
|
||||
buttonhole: 15,
|
||||
buttonhole: 25,
|
||||
"buttonhole-start": 15,
|
||||
"buttonhole-end": 25,
|
||||
"snap-socket": 25,
|
||||
"snap-stud": 15,
|
||||
}
|
||||
y += 10
|
||||
points.tl = new Point(0, y)
|
||||
points.tr = new Point(w, y)
|
||||
paths.texts = new Path().move(points.tl).line(points.tr).attr('data-text', 'snippets')
|
||||
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-sm')
|
||||
.attr('data-text-lineheight', 5)
|
||||
.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-sm')
|
||||
.attr('data-text-lineheight', 5)
|
||||
.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-sm')
|
||||
.attr('data-text-lineheight', 5)
|
||||
.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.25, y)
|
||||
points['sn2' + i] = new Point(w * 0.5, y)
|
||||
points['sn3' + i] = new Point(w * 0.75, y)
|
||||
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)
|
||||
|
|
27
packages/rendertest/src/stroke-colors.js
Normal file
27
packages/rendertest/src/stroke-colors.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
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
|
||||
}
|
35
packages/rendertest/src/stroke-combos.js
Normal file
35
packages/rendertest/src/stroke-combos.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
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
|
||||
}
|
27
packages/rendertest/src/stroke-styles.js
Normal file
27
packages/rendertest/src/stroke-styles.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
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
|
||||
}
|
27
packages/rendertest/src/stroke-widths.js
Normal file
27
packages/rendertest/src/stroke-widths.js
Normal file
|
@ -0,0 +1,27 @@
|
|||
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
|
||||
}
|
|
@ -1,21 +1,49 @@
|
|||
import colors from './colors'
|
||||
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'
|
||||
|
||||
export default function (part) {
|
||||
let { macro, store, options, Path, paths, Point } = part.shorthand()
|
||||
const { macro, store, options, Path, paths, Point } = part.shorthand()
|
||||
|
||||
// Keep things in store
|
||||
store.set('y', 0)
|
||||
store.set('w', options.width)
|
||||
let color = ['fabric', 'lining', 'interfacing', 'canvas', 'various', 'mark', 'contrast', 'note']
|
||||
store.set('colors', color)
|
||||
if (options.widthHd)
|
||||
macro('hd', {
|
||||
from: new Point(0, 0),
|
||||
to: new Point(options.width, 0),
|
||||
})
|
||||
if (options.colors) colors(part)
|
||||
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',
|
||||
])
|
||||
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)
|
||||
|
@ -23,8 +51,8 @@ export default function (part) {
|
|||
|
||||
// Make sure no text is cut off
|
||||
paths.box = new Path()
|
||||
.move(new Point(0, -10))
|
||||
.line(new Point(store.get('w'), store.get('y')))
|
||||
.move(new Point(-10, -10))
|
||||
.line(new Point(store.get('w')+10, store.get('y')))
|
||||
.attr('class', 'hidden')
|
||||
|
||||
return part
|
||||
|
|
|
@ -1,14 +1,41 @@
|
|||
export default function (part) {
|
||||
let { Point, Path, points, paths, store } = part.shorthand()
|
||||
const { Point, Path, points, paths, store } = part.shorthand()
|
||||
|
||||
let y = store.get('y')
|
||||
let w = store.get('w')
|
||||
let text = ['xs', 'sm', '', 'l', 'xl', 'xxl']
|
||||
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,
|
||||
}
|
||||
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')
|
||||
y += 10
|
||||
|
||||
// Align center
|
||||
points.tlc = new Point(0, y)
|
||||
points.trc = new Point(w, y)
|
||||
paths.textc = new Path()
|
||||
|
@ -16,7 +43,7 @@ export default function (part) {
|
|||
.line(points.trc)
|
||||
.attr('data-text', 'text.center')
|
||||
.attr('data-text-class', 'center')
|
||||
y += 10
|
||||
// Align right
|
||||
points.tlr = new Point(0, y)
|
||||
points.trr = new Point(w, y)
|
||||
paths.textr = new Path()
|
||||
|
@ -24,12 +51,21 @@ export default function (part) {
|
|||
.line(points.trr)
|
||||
.attr('data-text', 'text.right')
|
||||
.attr('data-text-class', 'right')
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
y += 15
|
||||
points['t' + i] = new Point(0, y)
|
||||
.attr('data-text', 'text' + (text[i] === '' ? '' : '.text-' + text[i]))
|
||||
.attr('data-text-class', 'text-' + text[i])
|
||||
}
|
||||
|
||||
// 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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue