VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(plugin-theme): Ported to v3

Browse source
This commit is contained in:
Joost De Cock 2022-08-28 14:03:14 +02:00
parent 447c16b690
commit 7b3b26da41
11 changed files with 112 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

2
plugins/plugin-theme/build.mjs
View file

@ -14,7 +14,7 @@ const banner = `/**
const options = {
banner: { js: banner },
bundle: true,
entryPoints: ['src/index.js'],
entryPoints: ['src/index.mjs'],
format: 'esm',
outfile: 'dist/index.mjs',
external: ["@freesewing"],

2
plugins/plugin-theme/package.json
View file

@ -38,7 +38,7 @@
"vbuild": "VERBOSE=1 node --experimental-json-modules build.mjs",
"lab": "cd ../../sites/lab && yarn start",
"tips": "node ../../scripts/help.mjs",
"prettier": "npx prettier --write 'src/*.js' 'tests/*.mjs'",
"prettier": "npx prettier --write 'src/*.mjs' 'tests/*.mjs'",
"testci": "npx mocha tests/*.test.mjs --reporter ../../tests/reporters/terse.js",
"cibuild_step1": "node --experimental-json-modules build.mjs"
},

40
plugins/plugin-theme/src/lib/draft.js → plugins/plugin-theme/src/css.mjs
View file

@ -1,4 +1,40 @@
// FIXME surely this can be extracted from the theme in some way so as to keep things consistent?
export const paperless = `
/* Paperless grid */
svg.freesewing path.grid {
fill: none;
stroke: #555;
stroke-width: 0.3;
}
svg.freesewing path.gridline {
stroke: #555;
stroke-width: 0.2;
}
svg.freesewing path.gridline-lg {
stroke: #777;
stroke-width: 0.2;
stroke-dasharray: 1.5,1.5;
}
svg.freesewing path.gridline-sm {
stroke: #999;
stroke-width: 0.1;
}
svg.freesewing path.gridline-xs {
stroke: #999;
stroke-width: 0.1;
stroke-dasharray: 0.5,0.5;
}
svg.freesewing path.gridbox {
fill: url(#grid);
}`
export const sample = `
/* Sample classes */
svg.freesewing path.sample {
stroke-width: 0.75
}
svg.freesewing path.sample-focus {
stroke-width: 1.5; fill: rgba(0,0,0,0.1)
}`
const round = value => Math.round(value * 1e2) / 1e2
@ -18,7 +54,7 @@ const colors = {
* scale: the scale of the markings
* stripped: should nested declarations be stripped out? Necessary for svgToPdfkit
* */
export default (scale, stripped) => `
export const buildStylesheet = (scale, stripped) => `
${!stripped ? '/* Reset */' : ''}
${!stripped ? 'svg.freesewing ' : ''}path,
${!stripped ? 'svg.freesewing ' : ''}circle,

7
plugins/plugin-theme/src/defs/grid-imperial.js
View file

@ -1,7 +0,0 @@
export default `<pattern id="grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" >
<path class="gridline-lg" d="M 0 0 L 0 25.4 L 25.4 25.4" />
<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>
`;

9
plugins/plugin-theme/src/defs/grid-metric.js
View file

@ -1,9 +0,0 @@
export default `<pattern id="grid" height="100" width="100" patternUnits="userSpaceOnUse" >
<path class="gridline-lg" d="M 0 0 L 0 100 L 100 100" />
<path class="gridline" d="M 50 0 L 50 100 M 0 50 L 100 50" />
<path class="gridline-sm" d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100" />
<path class="gridline-sm" d="M 0 10 L 100 10 M 0 20 L 100 20 M 0 30 L 100 30 M 0 40 L 100 40 M 0 60 L 100 60 M 0 70 L 100 70 M 0 80 L 100 80 M 0 90 L 100 90" />
<path class="gridline-xs" d="M 5 0 L 5 100 M 15 0 L 15 100 M 25 0 L 25 100 M 35 0 L 35 100 M 45 0 L 45 100 M 55 0 L 55 100 M 65 0 L 65 100 M 75 0 L 75 100 M 85 0 L 85 100 M 95 0 L 95 100" />
<path class="gridline-xs" d="M 0 5 L 100 5 M 0 15 L 100 15 M 0 25 L 100 25 M 0 35 L 100 35 M 0 45 L 100 45 M 0 55 L 100 55 M 0 65 L 100 65 M 0 75 L 100 75 M 0 85 L 100 85 M 0 95 L 100 95" />
</pattern>
`;

46
plugins/plugin-theme/src/index.js
View file

@ -1,46 +0,0 @@
import pkg from '../package.json'
import gridMetric from './defs/grid-metric'
import gridImperial from './defs/grid-imperial'
import draft from './lib/draft'
import paperless from './lib/paperless'
import sample from './lib/sample'
export default {
name: pkg.name,
version: pkg.version,
hooks: {
preRender: function (svg, data = {}) {
if (svg.attributes.get('freesewing:plugin-theme') === false) {
svg.attributes.set('class', 'freesewing')
svg.style += sample
svg.style += paperless
svg.style += draft(svg.pattern.settings.scale, data.stripped)
if (svg.pattern.settings.paperless) {
svg.pattern.settings.units === 'imperial'
? (svg.defs += gridImperial)
: (svg.defs += gridMetric)
for (let key in svg.pattern.parts) {
let part = svg.pattern.parts[key]
if (part.render && svg.pattern.needs(key)) {
let anchor = new svg.pattern.Point(0, 0)
if (typeof part.points.gridAnchor !== 'undefined') anchor = part.points.gridAnchor
else if (typeof part.points.anchor !== 'undefined') anchor = part.points.anchor
svg.defs += `<pattern id="grid_${key}" `
svg.defs += `xlink:href="#grid" x="${anchor.x}" y="${anchor.y}">`
svg.defs += '</pattern>'
part.paths[part.getId()] = new svg.pattern.Path()
.move(part.topLeft)
.line(new svg.pattern.Point(part.topLeft.x, part.bottomRight.y))
.line(part.bottomRight)
.line(new svg.pattern.Point(part.bottomRight.x, part.topLeft.y))
.close()
.attr('class', 'grid')
.attr('style', `fill: url(#grid_${key})`)
}
}
}
svg.attributes.set('freesewing:plugin-theme', pkg.version)
}
},
},
}

66
plugins/plugin-theme/src/index.mjs Normal file
View file

@ -0,0 +1,66 @@
import { name, version } from '../package.json'
import { sample, paperless, buildStylesheet } from './css.mjs'
const grid = {
metric: `
<pattern id="grid" height="100" width="100" patternUnits="userSpaceOnUse" >
<path class="gridline-lg" d="M 0 0 L 0 100 L 100 100" />
<path class="gridline" d="M 50 0 L 50 100 M 0 50 L 100 50" />
<path class="gridline-sm" d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100" />
<path class="gridline-sm" d="M 0 10 L 100 10 M 0 20 L 100 20 M 0 30 L 100 30 M 0 40 L 100 40 M 0 60 L 100 60 M 0 70 L 100 70 M 0 80 L 100 80 M 0 90 L 100 90" />
<path class="gridline-xs" d="M 5 0 L 5 100 M 15 0 L 15 100 M 25 0 L 25 100 M 35 0 L 35 100 M 45 0 L 45 100 M 55 0 L 55 100 M 65 0 L 65 100 M 75 0 L 75 100 M 85 0 L 85 100 M 95 0 L 95 100" />
<path class="gridline-xs" d="M 0 5 L 100 5 M 0 15 L 100 15 M 0 25 L 100 25 M 0 35 L 100 35 M 0 45 L 100 45 M 0 55 L 100 55 M 0 65 L 100 65 M 0 75 L 100 75 M 0 85 L 100 85 M 0 95 L 100 95" />
</pattern>`,
imperial: `
<pattern id="grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" >
<path class="gridline-lg" d="M 0 0 L 0 25.4 L 25.4 25.4" />
<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>`
}
export const plugin = {
name,
version,
hooks: {
preRender: function (svg, data = {}) {
const current = svg.attributes.get('class')
if (!current || current.indexOf('freesewing') !== -1) {
svg.attributes.set('class', 'freesewing')
svg.style += sample
svg.style += paperless
svg.style += buildStylesheet(svg.pattern.settings.scale, data.stripped)
if (svg.pattern.settings.paperless) {
svg.pattern.settings.units === 'imperial'
? (svg.defs += grid.imperial)
: (svg.defs += grid.metric)
for (const key in svg.pattern.parts) {
const part = svg.pattern.parts[key]
if (part.render && svg.pattern.needs(key)) {
let anchor = new svg.pattern.Point(0, 0)
if (typeof part.points.gridAnchor !== 'undefined') anchor = part.points.gridAnchor
else if (typeof part.points.anchor !== 'undefined') anchor = part.points.anchor
svg.defs += `<pattern id="grid_${key}" `
svg.defs += `xlink:href="#grid" x="${anchor.x}" y="${anchor.y}">`
svg.defs += '</pattern>'
part.paths[part.getId()] = new svg.pattern.Path()
.move(part.topLeft)
.line(new svg.pattern.Point(part.topLeft.x, part.bottomRight.y))
.line(part.bottomRight)
.line(new svg.pattern.Point(part.bottomRight.x, part.topLeft.y))
.close()
.attr('class', 'grid')
.attr('style', `fill: url(#grid_${key})`)
}
}
}
}
},
},
}
// More specifically named exports
export const themePlugin = plugin
export const pluginTheme = plugin

29
plugins/plugin-theme/src/lib/paperless.js
View file

@ -1,29 +0,0 @@
export default `
/* Paperless grid */
svg.freesewing path.grid {
fill: none;
stroke: #555;
stroke-width: 0.3;
}
svg.freesewing path.gridline {
stroke: #555;
stroke-width: 0.2;
}
svg.freesewing path.gridline-lg {
stroke: #777;
stroke-width: 0.2;
stroke-dasharray: 1.5,1.5;
}
svg.freesewing path.gridline-sm {
stroke: #999;
stroke-width: 0.1;
}
svg.freesewing path.gridline-xs {
stroke: #999;
stroke-width: 0.1;
stroke-dasharray: 0.5,0.5;
}
svg.freesewing path.gridbox {
fill: url(#grid);
}
`;

9
plugins/plugin-theme/src/lib/sample.js
View file

@ -1,9 +0,0 @@
export default `
/* Sample classes */
svg.freesewing path.sample {
stroke-width: 0.75
}
svg.freesewing path.sample-focus {
stroke-width: 1.5; fill: rgba(0,0,0,0.1)
}
`;

6
plugins/plugin-theme/tests/plugin.test.mjs
View file

@ -1,11 +1,11 @@
import chai from 'chai'
import freesewing from '@freesewing/core'
import plugin from '../dist/index.mjs'
import { Pattern } from '@freesewing/core'
import { plugin } from '../dist/index.mjs'
const expect = chai.expect
describe('Theme Plugin Tests', () => {
const pattern = new freesewing.Pattern().use(plugin)
const pattern = new Pattern().use(plugin)
pattern.apply({ paperless: true })
pattern.draft().render()

7
plugins/plugin-theme/tests/shared.test.mjs
View file

@ -1,8 +1,7 @@
// This file is auto-generated.
// Changes you make will be overwritten.
import plugin from './dist/index.mjs'
// This file is auto-generated | Any changes you make will be overwritten.
import { plugin } from './dist/index.mjs'
import { sharedPluginTests } from '../../../tests/plugins/shared.mjs'
// Run shared tests
sharedPluginTests(plugin)