From 1b259a420596a411ba066e1fc53967d8ee1b5674 Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Thu, 9 Mar 2023 08:52:28 -0600 Subject: [PATCH] toggle to hide part buttons on cut and print layouts --- .../components/workbench/layout/cut/index.mjs | 5 ++-- .../workbench/layout/cut/settings.mjs | 24 +++++++++++------ .../workbench/layout/draft/buttons.mjs | 20 ++++++++++++++ .../workbench/layout/draft/index.mjs | 2 ++ .../workbench/layout/draft/stack.mjs | 26 +++++++++++-------- .../workbench/layout/print/settings.mjs | 6 +++++ 6 files changed, 62 insertions(+), 21 deletions(-) diff --git a/sites/shared/components/workbench/layout/cut/index.mjs b/sites/shared/components/workbench/layout/cut/index.mjs index 57b53754dda..a3ada1d56f2 100644 --- a/sites/shared/components/workbench/layout/cut/index.mjs +++ b/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)} ))} @@ -124,6 +124,7 @@ export const CutLayout = (props) => { gistReady={props.gistReady} layoutPart="fabric" layoutType={['cuttingLayout', fabricSettings.activeFabric]} + layoutSetType="forCutting" /> diff --git a/sites/shared/components/workbench/layout/cut/settings.mjs b/sites/shared/components/workbench/layout/cut/settings.mjs index 5d0839f40f0..015d713331a 100644 --- a/sites/shared/components/workbench/layout/cut/settings.mjs +++ b/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) => ( @@ -118,14 +119,21 @@ export const CutLayoutSettings = ({ {fabricLength} - +
+ + +
) } diff --git a/sites/shared/components/workbench/layout/draft/buttons.mjs b/sites/shared/components/workbench/layout/draft/buttons.mjs index b08762af782..84562e672a3 100644 --- a/sites/shared/components/workbench/layout/draft/buttons.mjs +++ b/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' }) => ( { ) } +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 ( + + ) +} + /** buttons for manipulating the part */ export const Buttons = ({ transform, flip, rotate, resetPart, rotate90 }) => { const { t } = useTranslation('workbench') diff --git a/sites/shared/components/workbench/layout/draft/index.mjs b/sites/shared/components/workbench/layout/draft/index.mjs index 1a7f27cec7c..abbdef9af38 100644 --- a/sites/shared/components/workbench/layout/draft/index.mjs +++ b/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, }} /> ) diff --git a/sites/shared/components/workbench/layout/draft/stack.mjs b/sites/shared/components/workbench/layout/draft/stack.mjs index 048a422e6a6..d5b3469d98b 100644 --- a/sites/shared/components/workbench/layout/draft/stack.mjs +++ b/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 ( @@ -249,17 +251,19 @@ export const Stack = (props) => { id={`${stackName}-layout-rect`} onClick={toggleDragRotate} /> - + {showButtons ? ( + + ) : null} )} diff --git a/sites/shared/components/workbench/layout/print/settings.mjs b/sites/shared/components/workbench/layout/print/settings.mjs index 34fe4888467..ca8374234b5 100644 --- a/sites/shared/components/workbench/layout/print/settings.mjs +++ b/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) => {
+