toggle to hide part buttons on cut and print layouts
This commit is contained in:
parent
cc0f9e78a5
commit
1b259a4205
6 changed files with 62 additions and 21 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue