1
0
Fork 0

toggle to hide part buttons on cut and print layouts

This commit is contained in:
Enoch Riese 2023-03-09 08:52:28 -06:00
parent cc0f9e78a5
commit 1b259a4205
6 changed files with 62 additions and 21 deletions

View file

@ -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>

View file

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

View file

@ -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')

View file

@ -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,
}}
/>
)

View file

@ -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>

View file

@ -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}