1
0
Fork 0

feat: Updated rendertest

This commit is contained in:
Joost De Cock 2021-12-24 13:28:34 +01:00
parent 4c5f5688b4
commit e70d6abe92
11 changed files with 272 additions and 133 deletions

View file

@ -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 },
},
}

View file

@ -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

View file

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

View file

@ -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

View file

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

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

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

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

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

View file

@ -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

View file

@ -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