chore(plugin-theme): Ported to v3
This commit is contained in:
Joost De Cock
parent
abab2a67e9
commit
2ead1c7aa0
4 changed files with 39 additions and 43 deletions
|
|
@ -35,8 +35,7 @@ svg.freesewing path.sample-focus {
|
|||
stroke-width: 1.5; fill: rgba(0,0,0,0.1)
|
||||
}`
|
||||
|
||||
|
||||
const round = value => Math.round(value * 1e2) / 1e2
|
||||
const round = (value) => Math.round(value * 1e2) / 1e2
|
||||
|
||||
const colors = {
|
||||
fabric: '#212121',
|
||||
|
|
@ -46,7 +45,7 @@ const colors = {
|
|||
various: '#ef4444',
|
||||
note: '#8b5cf6',
|
||||
mark: '#3b82f6',
|
||||
contrast: '#ec4899'
|
||||
contrast: '#ec4899',
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -68,73 +67,73 @@ export const buildStylesheet = (scale, stripped) => `
|
|||
${!stripped ? 'svg.freesewing ' : ''}circle {
|
||||
stroke: #000;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: ${round(0.3*scale)};
|
||||
stroke-width: ${round(0.3 * scale)};
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
${!stripped ? '/* Stroke classes */' : ''}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.fabric {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
stroke: ${colors.fabric};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.lining {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
stroke: ${colors.lining};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.interfacing {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
stroke: ${colors.interfacing};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.canvas {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
stroke: ${colors.canvas};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.various {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
stroke: ${colors.various};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.note {
|
||||
stroke-width: ${round(0.4*scale)};
|
||||
stroke-width: ${round(0.4 * scale)};
|
||||
stroke: ${colors.note};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.mark {
|
||||
stroke-width: ${round(0.4*scale)};
|
||||
stroke-width: ${round(0.4 * scale)};
|
||||
stroke: ${colors.mark};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.contrast {
|
||||
stroke-width: ${round(0.8*scale)};
|
||||
stroke-width: ${round(0.8 * scale)};
|
||||
stroke: ${colors.contrast};
|
||||
}
|
||||
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-xs {
|
||||
stroke-width: ${round(0.1*scale)};
|
||||
stroke-width: ${round(0.1 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-sm {
|
||||
stroke-width: ${round(0.2*scale)};
|
||||
stroke-width: ${round(0.2 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-lg {
|
||||
stroke-width: ${round(0.6*scale)};
|
||||
stroke-width: ${round(0.6 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-xl {
|
||||
stroke-width: ${round(1*scale)};
|
||||
stroke-width: ${round(1 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-xxl,
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-2xl {
|
||||
stroke-width: ${round(2*scale)};
|
||||
stroke-width: ${round(2 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-3xl {
|
||||
stroke-width: ${round(3*scale)};
|
||||
stroke-width: ${round(3 * scale)};
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.stroke-4xl {
|
||||
stroke-width: ${round(4*scale)};
|
||||
stroke-width: ${round(4 * scale)};
|
||||
}
|
||||
|
||||
${!stripped ? 'svg.freesewing ' : ''}.sa {
|
||||
stroke-dasharray: 0.4, 0.8;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.help {
|
||||
stroke-width: ${round(0.2*scale)};
|
||||
stroke-width: ${round(0.2 * scale)};
|
||||
stroke-dasharray: 15, 1.5, 1, 1.5;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.dotted {
|
||||
|
|
@ -185,7 +184,7 @@ export const buildStylesheet = (scale, stripped) => `
|
|||
|
||||
${!stripped ? '/* Text */' : ''}
|
||||
${!stripped ? 'svg.freesewing ' : ''}text {
|
||||
font-size: ${round(5*scale)}px;
|
||||
font-size: ${round(5 * scale)}px;
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||
Arial, sans-serif;
|
||||
fill: #000;
|
||||
|
|
@ -194,22 +193,22 @@ export const buildStylesheet = (scale, stripped) => `
|
|||
dominant-baseline: ideographic;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-xs {
|
||||
font-size: ${round(3*scale)}px;
|
||||
font-size: ${round(3 * scale)}px;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-sm {
|
||||
font-size: ${round(4*scale)}px;
|
||||
font-size: ${round(4 * scale)}px;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-lg {
|
||||
font-size: ${round(7*scale)}px;
|
||||
font-size: ${round(7 * scale)}px;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-xl {
|
||||
font-size: ${round(9*scale)}px;
|
||||
font-size: ${round(9 * scale)}px;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-xxl {
|
||||
font-size: ${round(12*scale)}px;
|
||||
font-size: ${round(12 * scale)}px;
|
||||
}
|
||||
${!stripped ? 'svg.freesewing ' : ''}.text-4xl {
|
||||
font-size: ${round(36*scale)}px;
|
||||
font-size: ${round(36 * scale)}px;
|
||||
}
|
||||
|
||||
${!stripped ? 'svg.freesewing ' : ''}.center {
|
||||
|
|
@ -226,8 +225,8 @@ export const buildStylesheet = (scale, stripped) => `
|
|||
|
||||
${!stripped ? '/* Bartack */' : ''}
|
||||
${!stripped ? 'svg.freesewing ' : ''}path.bartack {
|
||||
stroke-width: ${round(2*scale)};
|
||||
stroke-width: ${round(2 * scale)};
|
||||
stroke: #fd7e14;
|
||||
stroke-linecap: butt;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const grid = {
|
|||
<path class="gridline" d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7" />
|
||||
<path class="gridline-sm" d="M 3.175 0 L 3.175 25.4 M 6.32 0 L 6.35 25.4 M 9.525 0 L 9.525 25.4 M 15.875 0 L 15.875 25.4 M 19.05 0 L 19.05 25.4 M 22.225 0 L 22.225 25.4" />
|
||||
<path class="gridline-sm" d="M 0 3.175 L 25.4 3.175 M 0 6.32 L 25.4 6.35 M 0 9.525 L 25.4 9.525 M 0 15.875 L 25.4 15.875 M 0 19.05 L 25.4 19.05 M 0 22.225 L 25.4 22.225" />
|
||||
</pattern>`
|
||||
</pattern>`,
|
||||
}
|
||||
|
||||
export const plugin = {
|
||||
|
|
@ -63,4 +63,3 @@ export const plugin = {
|
|||
// More specifically named exports
|
||||
export const themePlugin = plugin
|
||||
export const pluginTheme = plugin
|
||||
|
||||
|
|
|
|||
|
|
@ -6,27 +6,26 @@ const expect = chai.expect
|
|||
|
||||
describe('Theme Plugin Tests', () => {
|
||||
const Pattern = new Design()
|
||||
const pattern = new Pattern().use(plugin)
|
||||
pattern.apply({ paperless: true })
|
||||
const pattern = new Pattern({ paperless: true }).use(plugin)
|
||||
pattern.draft().render()
|
||||
|
||||
it("Should load base CSS", () => {
|
||||
it('Should load base CSS', () => {
|
||||
expect(pattern.svg.style).to.contain('svg.freesewing')
|
||||
})
|
||||
|
||||
it("Should load the metric grid for paperless", () => {
|
||||
it('Should load the metric grid for paperless', () => {
|
||||
expect(pattern.svg.defs).to.contain('gridline-xs')
|
||||
expect(pattern.svg.defs).to.contain('M 10 0 L 10 100 M 20 0 L 20')
|
||||
});
|
||||
})
|
||||
|
||||
it("Should load the imperial grid for paperless", () => {
|
||||
pattern.apply({ units: 'imperial' })
|
||||
it('Should load the imperial grid for paperless', () => {
|
||||
const pattern = new Pattern({ paperless: true, units: 'imperial' }).use(plugin)
|
||||
pattern.draft().render()
|
||||
expect(pattern.svg.defs).to.contain('gridline-sm')
|
||||
expect(pattern.svg.defs).to.contain('M 12.7 0 L 12.7')
|
||||
});
|
||||
})
|
||||
|
||||
it("Should apply scale.", () => {
|
||||
it('Should apply scale.', () => {
|
||||
expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n font-size: 12px')
|
||||
|
||||
pattern.settings.scale = 2
|
||||
|
|
@ -35,8 +34,8 @@ describe('Theme Plugin Tests', () => {
|
|||
expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n font-size: 24px;')
|
||||
})
|
||||
|
||||
it("Should round after applying scale.", () => {
|
||||
pattern.settings.scale = 1/3
|
||||
it('Should round after applying scale.', () => {
|
||||
pattern.settings.scale = 1 / 3
|
||||
pattern.draft().render()
|
||||
|
||||
expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n font-size: 4px')
|
||||
|
|
|
|||
|
|
@ -4,4 +4,3 @@ import { sharedPluginTests } from '../../../tests/plugins/shared.mjs'
|
|||
|
||||
// Run shared tests
|
||||
sharedPluginTests(plugin)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue