diff --git a/plugins/plugin-theme/src/css.mjs b/plugins/plugin-theme/src/css.mjs index 76def64282d..d77bdc8d33d 100644 --- a/plugins/plugin-theme/src/css.mjs +++ b/plugins/plugin-theme/src/css.mjs @@ -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; } -`; +` diff --git a/plugins/plugin-theme/src/index.mjs b/plugins/plugin-theme/src/index.mjs index 53ec7447283..5698ba02707 100644 --- a/plugins/plugin-theme/src/index.mjs +++ b/plugins/plugin-theme/src/index.mjs @@ -17,7 +17,7 @@ const grid = { -` +`, } export const plugin = { @@ -63,4 +63,3 @@ export const plugin = { // More specifically named exports export const themePlugin = plugin export const pluginTheme = plugin - diff --git a/plugins/plugin-theme/tests/plugin.test.mjs b/plugins/plugin-theme/tests/plugin.test.mjs index 8a9cd48e1b6..cc5db4b6fbd 100644 --- a/plugins/plugin-theme/tests/plugin.test.mjs +++ b/plugins/plugin-theme/tests/plugin.test.mjs @@ -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') diff --git a/plugins/plugin-theme/tests/shared.test.mjs b/plugins/plugin-theme/tests/shared.test.mjs index fdf846844b0..ea9a6b5c890 100644 --- a/plugins/plugin-theme/tests/shared.test.mjs +++ b/plugins/plugin-theme/tests/shared.test.mjs @@ -4,4 +4,3 @@ import { sharedPluginTests } from '../../../tests/plugins/shared.mjs' // Run shared tests sharedPluginTests(plugin) -