toggle to hide part buttons on cut and print layouts

sites/shared/components/workbench/layout/cut/index.mjs

@@ -68,7 +68,7 @@ const useFabricList = (draft) => {
 
 const bgProps = { fill: 'none' }
 export const CutLayout = (props) => {
-  const { t } = useTranslation(['workbench'])
+  const { t } = useTranslation(['workbench', 'plugin'])
   const { gist, design, updateGist } = props
 
   // disable xray
@@ -110,7 +110,7 @@ export const CutLayout = (props) => {
                 }`}
                 onClick={() => setCutFabric(title)}
               >
-                {title}
+                {t('plugin:' + title)}
               </button>
             ))}
           </div>
@@ -124,6 +124,7 @@ export const CutLayout = (props) => {
           gistReady={props.gistReady}
           layoutPart="fabric"
           layoutType={['cuttingLayout', fabricSettings.activeFabric]}
+          layoutSetType="forCutting"
         />
       </div>
     </div>

sites/shared/components/workbench/layout/cut/settings.mjs

@@ -1,6 +1,7 @@
 import { ClearIcon, IconWrapper } from 'shared/components/icons.mjs'
 import { useTranslation } from 'next-i18next'
 import { formatFraction128, measurementAsMm, round, formatMm } from 'shared/utils.mjs'
+import { ShowButtonsToggle } from '../draft/buttons.mjs'
 
 const SheetIcon = (props) => (
   <IconWrapper {...props}>
@@ -118,6 +119,12 @@ export const CutLayoutSettings = ({
         <SheetIcon className="h-6 w-6 mr-2 inline align-middle" />
         <span className="text-xl font-bold align-middle">{fabricLength}</span>
       </div>
+      <div>
+        <ShowButtonsToggle
+          gist={gist}
+          updateGist={updateGist}
+          layoutSetType="forCutting"
+        ></ShowButtonsToggle>
         <button
           key="reset"
           onClick={() => unsetGist(['layouts', 'cuttingLayout', activeFabric])}
@@ -127,5 +134,6 @@ export const CutLayoutSettings = ({
           {t('reset')}
         </button>
       </div>
+    </div>
   )
 }

sites/shared/components/workbench/layout/draft/buttons.mjs

@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-i18next'
 import { ClearIcon } from 'shared/components/icons.mjs'
+import get from 'lodash.get'
 
 const Triangle = ({ transform = 'translate(0,0)', fill = 'currentColor' }) => (
   <path
@@ -53,6 +54,25 @@ const Button = ({ onClickCb, transform, Icon, children }) => {
   )
 }
 
+export const ShowButtonsToggle = ({ gist, layoutSetType, updateGist }) => {
+  const { t } = useTranslation('workbench')
+  const path = ['_state', 'layout', layoutSetType, 'showButtons']
+  const showButtons = get(gist, path, true)
+  const setShowButtons = () => updateGist(path, !showButtons)
+
+  return (
+    <label htmlFor="showButtons" className="label">
+      <span className="mr-2">{t('showButtons')}</span>
+      <input
+        type="checkbox"
+        className="toggle toggle-primary"
+        checked={showButtons}
+        onChange={setShowButtons}
+      />
+    </label>
+  )
+}
+
 /** buttons for manipulating the part */
 export const Buttons = ({ transform, flip, rotate, resetPart, rotate90 }) => {
   const { t } = useTranslation('workbench')

sites/shared/components/workbench/layout/draft/index.mjs

@@ -13,6 +13,7 @@ export const Draft = (props) => {
     bgProps = {},
     fitLayoutPart = false,
     layoutType = 'printingLayout',
+    layoutSetType = 'forPrinting',
   } = props
 
   const svgRef = useRef(null)
@@ -98,6 +99,7 @@ export const Draft = (props) => {
           gist,
           updateLayout,
           isLayoutPart: stackName === props.layoutPart,
+          layoutSetType: layoutSetType,
         }}
       />
     )

sites/shared/components/workbench/layout/draft/stack.mjs

@@ -50,6 +50,7 @@ import { getProps, angle } from '../../draft/utils.mjs'
 import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import { Buttons } from './buttons.mjs'
+import get from 'lodash.get'
 
 export const Stack = (props) => {
   const { layout, stack, stackName, gist } = props
@@ -230,6 +231,7 @@ export const Stack = (props) => {
   // don't render if the part is empty
   // if (Object.keys(part.snippets).length === 0 && Object.keys(part.paths).length === 0) return null;
 
+  const showButtons = get(gist, ['_state', 'layout', props.layoutSetType, 'showButtons'], true)
   return (
     <g id={`stack-${stackName}`} {...getProps(stack)} ref={stackRef}>
       <g id={`stack-inner-${stackName}`} ref={innerRef}>
@@ -249,6 +251,7 @@ export const Stack = (props) => {
             id={`${stackName}-layout-rect`}
             onClick={toggleDragRotate}
           />
+          {showButtons ? (
             <Buttons
               transform={`translate(${center.x}, ${center.y}) rotate(${-rotation}) scale(${
                 flipX ? -1 : 1
@@ -260,6 +263,7 @@ export const Stack = (props) => {
               rotate90={rotate90}
               partName={stackName}
             />
+          ) : null}
         </>
       )}
     </g>

sites/shared/components/workbench/layout/print/settings.mjs

@@ -2,6 +2,7 @@ import { PageSizePicker } from './pagesize-picker.mjs'
 import { PageOrientationPicker } from './orientation-picker.mjs'
 import { PrintIcon, RightIcon, ClearIcon, ExportIcon } from 'shared/components/icons.mjs'
 import { useTranslation } from 'next-i18next'
+import { ShowButtonsToggle } from '../draft/buttons.mjs'
 
 export const PrintLayoutSettings = (props) => {
   const { t } = useTranslation(['workbench'])
@@ -34,6 +35,11 @@ export const PrintLayoutSettings = (props) => {
           <PageOrientationPicker {...props} />
         </div>
         <div className="flex gap-4">
+          <ShowButtonsToggle
+            gist={props.gist}
+            updateGist={props.updateGist}
+            layoutSetType="forPrinting"
+          ></ShowButtonsToggle>
           <button
             key="export"
             onClick={props.exportIt}