From 6dbe15a862a3baf6f0f4fecd673df38ee5ea3e84 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Thu, 16 Feb 2023 15:21:55 -0600 Subject: [PATCH] cutting layout renders at the most basic level --- .../workbench/exporting/export-handler.mjs | 2 +- .../components/workbench/layout/cut/index.mjs | 39 +++++++++++++++++++ .../workbench/layout/cut/settings.mjs | 24 +++++++++++- .../workbench/layout/draft/index.mjs | 2 +- .../plugin.mjs => layout-part-plugin.mjs} | 10 ++++- .../workbench/layout/print/index.mjs | 2 +- .../shared/components/wrappers/workbench.mjs | 4 +- 7 files changed, 76 insertions(+), 7 deletions(-) rename sites/shared/components/workbench/layout/{print/plugin.mjs => layout-part-plugin.mjs} (98%) diff --git a/sites/shared/components/workbench/exporting/export-handler.mjs b/sites/shared/components/workbench/exporting/export-handler.mjs index abd27ba6c22..4c8174c8083 100644 --- a/sites/shared/components/workbench/exporting/export-handler.mjs +++ b/sites/shared/components/workbench/exporting/export-handler.mjs @@ -1,7 +1,7 @@ import Worker from 'web-worker' import fileSaver from 'file-saver' import { themePlugin } from '@freesewing/plugin-theme' -import { pagesPlugin } from '../layout/print/plugin.mjs' +import { pagesPlugin } from '../layout/layout-part-plugin.mjs' import { capitalize } from 'shared/utils.mjs' export const exportTypes = { diff --git a/sites/shared/components/workbench/layout/cut/index.mjs b/sites/shared/components/workbench/layout/cut/index.mjs index 76478ec8bc1..a5bc7d602d5 100644 --- a/sites/shared/components/workbench/layout/cut/index.mjs +++ b/sites/shared/components/workbench/layout/cut/index.mjs @@ -1,15 +1,54 @@ import { useTranslation } from 'next-i18next' import { CutLayoutSettings } from './settings.mjs' +import { Draft } from '../draft/index.mjs' +import { fabricPlugin } from '../layout-part-plugin.mjs' +import { useEffect } from 'react' export const CutLayout = (props) => { const { t } = useTranslation(['workbench']) + // disable xray + useEffect(() => { + if (props.gist?._state?.xray?.enabled) props.updateGist(['_state', 'xray', 'enabled'], false) + }) + + const draft = props.draft + + // add the pages plugin to the draft + const layoutSettings = { + sheetWidth: 500, + sheetHeight: 1000, + ...props.gist?._state?.layout?.forCutting?.fabric, + } + + draft.use(fabricPlugin(layoutSettings)) + + let patternProps + try { + // draft the pattern + draft.draft() + patternProps = draft.getRenderProps() + } catch (err) { + console.log(err, props.gist) + } + const bgProps = { fill: 'url(#page)' } + let name = props.design.designConfig.data.name name = name.replace('@freesewing/', '') return (

{t('layoutThing', { thing: name }) + ': ' + t('forCutting')}

+
) } diff --git a/sites/shared/components/workbench/layout/cut/settings.mjs b/sites/shared/components/workbench/layout/cut/settings.mjs index 5f6840cc784..bddb9d47acb 100644 --- a/sites/shared/components/workbench/layout/cut/settings.mjs +++ b/sites/shared/components/workbench/layout/cut/settings.mjs @@ -1,7 +1,27 @@ -export const CutLayoutSettings = () => { +import { ClearIcon } from 'shared/components/icons.mjs' +import { useTranslation } from 'next-i18next' + +export const CutLayoutSettings = (props) => { + const { t } = useTranslation(['workbench']) + let fabric = props.draft?.setStores[0].get('fabric') + if (!fabric) return null + const { cols, rows, count } = fabric + return (
-

Fixme: Cut layout settings here

+
+ +
) } diff --git a/sites/shared/components/workbench/layout/draft/index.mjs b/sites/shared/components/workbench/layout/draft/index.mjs index 3f01508dba0..8e353305bce 100644 --- a/sites/shared/components/workbench/layout/draft/index.mjs +++ b/sites/shared/components/workbench/layout/draft/index.mjs @@ -18,7 +18,7 @@ export const Draft = (props) => { const svgRef = useRef(null) if (!patternProps) return null // keep a fresh copy of the layout because we might manipulate it without saving to the gist - let layout = draft.settings[0].layouts?.printingLayout || { + let layout = draft.settings[0].layouts?.[layoutType] || { ...patternProps.autoLayout, width: patternProps.width, height: patternProps.height, diff --git a/sites/shared/components/workbench/layout/print/plugin.mjs b/sites/shared/components/workbench/layout/layout-part-plugin.mjs similarity index 98% rename from sites/shared/components/workbench/layout/print/plugin.mjs rename to sites/shared/components/workbench/layout/layout-part-plugin.mjs index e3ab04139d4..b6403818a03 100644 --- a/sites/shared/components/workbench/layout/print/plugin.mjs +++ b/sites/shared/components/workbench/layout/layout-part-plugin.mjs @@ -50,6 +50,14 @@ export const pagesPlugin = ({ size = 'a4', ...settings }) => { return basePlugin({ ...settings, sheetWidth, sheetHeight }) } +export const fabricPlugin = (settings) => { + return basePlugin({ + ...settings, + partName: 'fabric', + responsiveColumns: false, + }) +} + /** check if there is anything to render on the given section of the svg so that we can skip empty pages */ const doScanForBlanks = (stacks, layout, x, y, w, h) => { let hasContent = false @@ -92,7 +100,7 @@ const doScanForBlanks = (stacks, layout, x, y, w, h) => { * sheetHeight: the height of the helper part * boundary: should the helper part calculate its boundary? * responsiveColumns: should the part make more columns if the pattern exceed its width? (for pages you want this, for fabric you don't) - * printStyle: hould the pages be rendered for printing or for screen viewing? + * printStyle: should the pages be rendered for printing or for screen viewing? * */ const basePlugin = ({ sheetWidth, diff --git a/sites/shared/components/workbench/layout/print/index.mjs b/sites/shared/components/workbench/layout/print/index.mjs index 8ec25143dfe..3c5412649e7 100644 --- a/sites/shared/components/workbench/layout/print/index.mjs +++ b/sites/shared/components/workbench/layout/print/index.mjs @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react' import { useTranslation } from 'next-i18next' import { PrintLayoutSettings } from './settings.mjs' import { Draft } from '../draft/index.mjs' -import { pagesPlugin } from './plugin.mjs' +import { pagesPlugin } from '../layout-part-plugin.mjs' import { handleExport, defaultPdfSettings, diff --git a/sites/shared/components/wrappers/workbench.mjs b/sites/shared/components/wrappers/workbench.mjs index ed84760bf76..1339e4ce37f 100644 --- a/sites/shared/components/wrappers/workbench.mjs +++ b/sites/shared/components/wrappers/workbench.mjs @@ -119,7 +119,9 @@ export const WorkbenchWrapper = ({ // Generate the draft here so we can pass it down to both the view and the options menu let draft = false - if (['draft', 'logs', 'test', 'printingLayout'].indexOf(gist._state?.view) !== -1) { + if ( + ['draft', 'logs', 'test', 'printingLayout', 'cuttingLayout'].indexOf(gist._state?.view) !== -1 + ) { gist.embed = true // get the appropriate layout for the view const layout = gist.layouts?.[gist._state.view] || gist.layout || true