54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
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 (
|
|
<div>
|
|
<h2 className="capitalize">{t('layoutThing', { thing: name }) + ': ' + t('forCutting')}</h2>
|
|
<CutLayoutSettings {...props} />
|
|
<Draft
|
|
draft={draft}
|
|
gist={props.gist}
|
|
updateGist={props.updateGist}
|
|
patternProps={patternProps}
|
|
bgProps={bgProps}
|
|
gistReady={props.gistReady}
|
|
layoutPart="fabric"
|
|
layoutType="cuttingLayout"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|