134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
import React, { useState } from 'react'
|
|
import Draft from '../../Draft'
|
|
import Zoombox from '../Zoombox'
|
|
import Design from '../Design'
|
|
import DraftConfigurator from '../../DraftConfigurator'
|
|
import fileSaver from 'file-saver'
|
|
import theme from '@freesewing/plugin-theme'
|
|
import IconButton from '@material-ui/core/IconButton'
|
|
import DesignIcon from '@material-ui/icons/Fingerprint'
|
|
import DumpIcon from '@material-ui/icons/LocalSee'
|
|
import ClearIcon from '@material-ui/icons/HighlightOff'
|
|
import AdvancedIcon from '@material-ui/icons/Policy'
|
|
import PaperlessIcon from '@material-ui/icons/Nature'
|
|
import CompleteIcon from '@material-ui/icons/Style'
|
|
import HideIcon from '@material-ui/icons/ChevronLeft'
|
|
import Events from './Events'
|
|
|
|
const DraftPattern = (props) => {
|
|
const styles = {
|
|
icon: {
|
|
margin: '0 0.25rem'
|
|
},
|
|
unhide: {
|
|
position: 'absolute',
|
|
top: '76px',
|
|
right: 0,
|
|
background: props.theme === 'dark' ? '#f8f9fa' : '#212529',
|
|
borderTopLeftRadius: '50%',
|
|
borderBottomLeftRadius: '50%',
|
|
width: '26px',
|
|
height: '30px'
|
|
}
|
|
}
|
|
let focusCount = 0
|
|
if (props.focus !== null) {
|
|
for (let p of Object.keys(props.focus)) {
|
|
for (let i in props.focus[p].points) focusCount++
|
|
for (let i in props.focus[p].paths) focusCount++
|
|
for (let i in props.focus[p].coords) focusCount++
|
|
}
|
|
}
|
|
|
|
let iconProps = {
|
|
size: 'small',
|
|
style: styles.icon,
|
|
color: 'inherit'
|
|
}
|
|
const color = (check) => (check ? '#40c057' : '#fa5252')
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ margin: '1rem auto 0', textAlign: 'center' }}>
|
|
<IconButton onClick={() => props.setHideAside(true)} title="Hide sidebar" {...iconProps}>
|
|
<HideIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={() => props.setDesign(!props.design)}
|
|
title="Toggle design mode"
|
|
{...iconProps}
|
|
>
|
|
<span style={{ color: color(props.design) }}>
|
|
<DesignIcon />
|
|
</span>
|
|
</IconButton>
|
|
{props.design && (
|
|
<IconButton
|
|
onClick={() => props.raiseEvent('clearFocusAll', null)}
|
|
title="Clear design mode"
|
|
{...iconProps}
|
|
>
|
|
<ClearIcon color="primary" />
|
|
</IconButton>
|
|
)}
|
|
<IconButton
|
|
onClick={() => console.log(props.pattern)}
|
|
title="console.log(pattern)"
|
|
{...iconProps}
|
|
>
|
|
<DumpIcon color="primary" />
|
|
</IconButton>
|
|
|
|
|
<IconButton
|
|
onClick={() => props.updateGist(!props.gist.settings.advanced, 'settings', 'advanced')}
|
|
title="Toggle advanced settings"
|
|
{...iconProps}
|
|
>
|
|
<span style={{ color: color(props.gist.settings.advanced) }}>
|
|
<AdvancedIcon />
|
|
</span>
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={() => props.updateGist(!props.gist.settings.paperless, 'settings', 'paperless')}
|
|
title="Toggle paperless"
|
|
{...iconProps}
|
|
>
|
|
<span style={{ color: color(props.gist.settings.paperless) }}>
|
|
<PaperlessIcon />
|
|
</span>
|
|
</IconButton>
|
|
<IconButton
|
|
onClick={() => props.updateGist(!props.gist.settings.complete, 'settings', 'complete')}
|
|
title="Toggle complete"
|
|
{...iconProps}
|
|
>
|
|
<span style={{ color: color(props.gist.settings.complete) }}>
|
|
<CompleteIcon />
|
|
</span>
|
|
</IconButton>
|
|
</div>
|
|
{props.design && (
|
|
<Design
|
|
focus={props.focus}
|
|
design={props.design}
|
|
raiseEvent={props.raiseEvent}
|
|
parts={props.patternProps.parts}
|
|
/>
|
|
)}
|
|
<DraftConfigurator
|
|
noDocs
|
|
config={props.config}
|
|
data={props.gist}
|
|
updatePatternData={props.updateGist}
|
|
raiseEvent={props.raiseEvent}
|
|
freesewing={props.freesewing}
|
|
units={props.units || 'metric'}
|
|
/>
|
|
<div style={{ padding: '5px', marginTop: '1rem' }}>
|
|
<Zoombox patternProps={props.patternProps} setViewBox={props.setViewBox} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DraftPattern
|