cutting layout renders at the most basic level

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 = {

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 (
     <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>
   )
 }

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 (
     <div>
-      <p>Fixme: Cut layout settings here</p>
+      <div
+        className="flex flex-row justify-between
+      mb-2"
+      >
+        <button
+          key="reset"
+          onClick={() => props.unsetGist(['layouts', 'cuttingLayout'])}
+          className="btn btn-primary btn-outline"
+        >
+          <ClearIcon className="h-6 w-6 mr-2" />
+          {t('reset')}
+        </button>
+      </div>
     </div>
   )
 }

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,

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,

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,

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