From e1f7de02098a095977ea2f36d1bc596c8ffb2cb0 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Tue, 13 Dec 2022 11:55:50 -0600 Subject: [PATCH] render pageless grid on pdf exports if pageless is on --- plugins/plugin-theme/src/css.mjs | 30 ++-- plugins/plugin-theme/src/index.mjs | 8 +- .../components/workbench/draft/part/index.js | 170 +++++++++--------- .../workbench/exporting/export-handler.js | 8 +- .../workbench/exporting/pdf-maker.js | 6 +- .../workbench/layout/draft/index.js | 7 +- sites/shared/components/wrappers/workbench.js | 2 +- sites/shared/package.json | 2 +- yarn.lock | 11 +- 9 files changed, 129 insertions(+), 115 deletions(-) diff --git a/plugins/plugin-theme/src/css.mjs b/plugins/plugin-theme/src/css.mjs index 9a5c0bb4d8a..04e1c605af0 100644 --- a/plugins/plugin-theme/src/css.mjs +++ b/plugins/plugin-theme/src/css.mjs @@ -1,37 +1,41 @@ -export const paperlessStyle = ` -/* Paperless grid */ -svg.freesewing path.grid { - fill: none; +export const paperlessStyle = (stripped) => ` +${!stripped ? '/* Paperless grid */' : ''} +${!stripped ? 'svg.freesewing ' : ''}path.grid { stroke: #555; stroke-width: 0.3; } -svg.freesewing path.gridline { +${!stripped ? 'svg.freesewing ' : ''}path.gridline { stroke: #555; stroke-width: 0.2; + fill: none; } -svg.freesewing path.gridline-lg { +${!stripped ? 'svg.freesewing ' : ''}path.gridline-lg { stroke: #777; stroke-width: 0.2; stroke-dasharray: 1.5,1.5; + fill: none; } -svg.freesewing path.gridline-sm { +${!stripped ? 'svg.freesewing ' : ''}path.gridline-sm { stroke: #999; stroke-width: 0.1; + fill: none; } -svg.freesewing path.gridline-xs { +${!stripped ? 'svg.freesewing ' : ''}path.gridline-xs { stroke: #999; stroke-width: 0.1; stroke-dasharray: 0.5,0.5; + fill: none; } -svg.freesewing path.gridbox { +${!stripped ? 'svg.freesewing ' : ''}path.gridbox { fill: url(#grid); }` -export const sampleStyle = ` -/* Sample classes */ -svg.freesewing path.sample { + +export const sampleStyle = (stripped) => ` +${!stripped ? '/* Sample classes */' : ''} +${!stripped ? 'svg.freesewing ' : ''}path.sample { stroke-width: 0.75 } -svg.freesewing path.sample-focus { +${!stripped ? 'svg.freesewing ' : ''}path.sample-focus { stroke-width: 1.5; fill: rgba(0,0,0,0.1) }` diff --git a/plugins/plugin-theme/src/index.mjs b/plugins/plugin-theme/src/index.mjs index 9fea50a860b..0456c45a52d 100644 --- a/plugins/plugin-theme/src/index.mjs +++ b/plugins/plugin-theme/src/index.mjs @@ -28,8 +28,8 @@ export const plugin = { const current = svg.attributes.get('class') if (!current || current.indexOf('freesewing') !== -1) { svg.attributes.set('class', 'freesewing') - svg.style += sampleStyle - svg.style += paperlessStyle + svg.style += sampleStyle(data.stripped) + svg.style += paperlessStyle(data.stripped) svg.style += buildStylesheet(svg.pattern.settings.scale, data.stripped) let paperless = false for (const set of svg.pattern.settings) { @@ -40,10 +40,10 @@ export const plugin = { ? (svg.defs += grid.imperial) : (svg.defs += grid.metric) const parts = svg.pattern.parts[svg.pattern.activeSet] - const skip = data.skipGrid || [] + const skipGrid = data.skipGrid || [] for (const key in parts) { const part = parts[key] - if (!part.hidden && !data.skipGrid.includes(key) && svg.pattern.__needs(key)) { + if (!part.hidden && !skipGrid.includes(key) && svg.pattern.__needs(key)) { const { Path, paths, getId, Point, points } = part.shorthand() let anchor = new Point(0, 0) if (typeof points.gridAnchor !== 'undefined') anchor = part.points.gridAnchor diff --git a/sites/shared/components/workbench/draft/part/index.js b/sites/shared/components/workbench/draft/part/index.js index 54b2bcb6ff3..b7b4f13e636 100644 --- a/sites/shared/components/workbench/draft/part/index.js +++ b/sites/shared/components/workbench/draft/part/index.js @@ -1,4 +1,4 @@ -import {forwardRef} from 'react' +import { forwardRef } from 'react' import Path from '../path' import Point from '../point' import Snippet from '../snippet' @@ -17,11 +17,11 @@ const partInfo = (props) => ( Width - {round(props.part.width,2)}mm + {round(props.part.width, 2)}mm Height - {round(props.part.height,2)}mm + {round(props.part.height, 2)}mm Top Left @@ -33,116 +33,124 @@ const partInfo = (props) => ( Attributes - + + +
- {props.gist?.only && props.gist.only.length > 0 - ? ( - + {props.gist?.only && props.gist.only.length > 0 ? ( + ) : ( + > + Show only this part + )} - - - + + +
) -const XrayPart = props => { +const XrayPart = (props) => { const { topLeft, bottomRight } = props.part return ( - { evt.stopPropagation(); props.showInfo(partInfo(props)) }} + `} + className={`peer stroke-note lashed opacity-30 hover:opacity-90 fill-fabric hover:cursor-pointer hover:stroke-mark`} + style={{ fillOpacity: 0 }} + onClick={(evt) => { + evt.stopPropagation() + props.showInfo(partInfo(props)) + }} /> ) } export const PartInner = forwardRef((props, ref) => { - const { partName, part, gist } = props + const { partName, part, gist, skipGrid } = props - const Grid = gist.paperless ? ( - - ) : null - - return ( - {Grid} - { - gist._state?.xray?.enabled && - - } - {Object.keys(part.paths).map((pathName) => ( - - ))} - {Object.keys(props.part.points).map((pointName) => ( - - ))} - {Object.keys(props.part.snippets).map((snippetName) => ( - - ))} - ) -}) - -const Part = props => { - const { partName, part} = props + ) : null return ( - - - + + {Grid} + {gist._state?.xray?.enabled && } + {Object.keys(part.paths).map((pathName) => ( + + ))} + {Object.keys(props.part.points).map((pointName) => ( + + ))} + {Object.keys(props.part.snippets).map((snippetName) => ( + + ))} + + ) +}) + +const Part = (props) => { + const { partName, part } = props + + return ( + + + ) } /* diff --git a/sites/shared/components/workbench/exporting/export-handler.js b/sites/shared/components/workbench/exporting/export-handler.js index 40deeb725ce..c92160c3601 100644 --- a/sites/shared/components/workbench/exporting/export-handler.js +++ b/sites/shared/components/workbench/exporting/export-handler.js @@ -74,7 +74,7 @@ export const handleExport = async (format, gist, design, t, app, onComplete, onE let pattern = new design({ ...gist, layout }) // add the theme and translation to the pattern - pattern.use(themePlugin, { stripped: format !== 'svg' }) + pattern.use(themePlugin, { stripped: format !== 'svg', skipGrid: ['pages'] }) pattern.use( { hooks: { @@ -115,13 +115,13 @@ export const handleExport = async (format, gist, design, t, app, onComplete, onE // add the svg and pages data to the worker args workerArgs.pages = pattern.setStores[pattern.activeSet].get('pages') + + // post a message to the worker with all needed data + worker.postMessage(workerArgs) } catch (err) { console.log(err) app.stopLoading() onError && onError(err) } } - - // post a message to the worker with all needed data - worker.postMessage(workerArgs) } diff --git a/sites/shared/components/workbench/exporting/pdf-maker.js b/sites/shared/components/workbench/exporting/pdf-maker.js index c62436d68bd..aaac060dc4b 100644 --- a/sites/shared/components/workbench/exporting/pdf-maker.js +++ b/sites/shared/components/workbench/exporting/pdf-maker.js @@ -3,9 +3,9 @@ import SVGtoPDF from 'svg-to-pdfkit' import { path as logoPath } from 'shared/components/icons/freesewing.js' /** an svg of the logo to put on the cover page */ -const logoSvg = ` - - +const logoSvg = ` + + ` /** diff --git a/sites/shared/components/workbench/layout/draft/index.js b/sites/shared/components/workbench/layout/draft/index.js index 7916ca6e30b..50d8f20b621 100644 --- a/sites/shared/components/workbench/layout/draft/index.js +++ b/sites/shared/components/workbench/layout/draft/index.js @@ -69,7 +69,12 @@ const Draft = (props) => { // Bottom in SVG means we need to draw it first const stacks = [ , ] diff --git a/sites/shared/components/wrappers/workbench.js b/sites/shared/components/wrappers/workbench.js index fbffb9ea676..8c0861e5dbe 100644 --- a/sites/shared/components/wrappers/workbench.js +++ b/sites/shared/components/wrappers/workbench.js @@ -121,7 +121,7 @@ const WorkbenchWrapper = ({ app, design, preload = false, from = false, layout = //draft.__init() // add theme to svg renderer - if (gist.renderer === 'svg') draft.use(pluginTheme) + if (gist.renderer === 'svg') draft.use(pluginTheme, { skipGrid: ['pages'] }) // draft it for draft and event views. Other views may add plugins, etc and we don't want to draft twice try { diff --git a/sites/shared/package.json b/sites/shared/package.json index 5ff97582187..7bea6669237 100644 --- a/sites/shared/package.json +++ b/sites/shared/package.json @@ -55,7 +55,7 @@ "remark-frontmatter": "^4.0.1", "remark-smartypants": "^2.0.0", "sharp": "^0.31.1", - "svg-to-pdfkit": "^0.1.8", + "svg-to-pdfkit": "https://github.com/eriese/SVG-to-PDFKit", "to-vfile": "^7.2.2", "unist-util-visit": "^4.1.0", "web-worker": "^1.2.0" diff --git a/yarn.lock b/yarn.lock index 550396639b1..55d346c9958 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17814,7 +17814,7 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" -pdfkit@>=0.8.1, pdfkit@^0.13.0: +pdfkit@^0.13.0: version "0.13.0" resolved "https://registry.yarnpkg.com/pdfkit/-/pdfkit-0.13.0.tgz#da4c2becd63a129e3aae448fdaed4ee7be790f8f" integrity sha512-AW79eHU5eLd2vgRDS9z3bSoi0FA+gYm+100LLosrQQMLUzOBGVOhG7ABcMFpJu7Bpg+MT74XYHi4k9EuU/9EZw== @@ -22543,12 +22543,9 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -svg-to-pdfkit@^0.1.8: - version "0.1.8" - resolved "https://registry.yarnpkg.com/svg-to-pdfkit/-/svg-to-pdfkit-0.1.8.tgz#5921765922044843f0c1a5b25ec1ef8a4a33b8af" - integrity sha512-QItiGZBy5TstGy+q8mjQTMGRlDDOARXLxH+sgVm1n/LYeo0zFcQlcCh8m4zi8QxctrxB9Kue/lStc/RD5iLadQ== - dependencies: - pdfkit ">=0.8.1" +"svg-to-pdfkit@https://github.com/eriese/SVG-to-PDFKit": + version "0.1.10" + resolved "https://github.com/eriese/SVG-to-PDFKit#2702cbe6b225224c4b5ea25b6a1ee8936cd8cf61" svgo@^1.0.0: version "1.3.2"