VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(components): Added pan and zoom to Workbench. Closes #368

Browse source
This commit is contained in:
Joost De Cock 2020-04-25 13:29:02 +02:00
parent b53615aea0
commit 054b7565e6
9 changed files with 397 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

184
packages/components/src/Workbench/DraftPattern/index.js
View file

@ -1,16 +1,28 @@
import React, { useState } from 'react'
import PropTypes from 'prop-types'
import Draft from '../../Draft'
import Zoombox from '../Zoombox'
import Design from '../Design'
import DraftConfigurator from '../../DraftConfigurator'
import { FormattedMessage } from 'react-intl'
import Prism from 'prismjs'
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 UnhideIcon from '@material-ui/icons/ChevronLeft'
import HideIcon from '@material-ui/icons/ChevronRight'
const DraftPattern = props => {
const DraftPattern = (props) => {
const [design, setDesign] = useState(true)
const [focus, setFocus] = useState(null)
const [viewBox, setViewBox] = useState(false)
const [hideAside, setHideAside] = useState(false)
const raiseEvent = (type, data) => {
if (type === 'clearFocusAll') {
@ -31,7 +43,7 @@ const DraftPattern = props => {
setFocus(f)
}
const svgToFile = svg => {
const svgToFile = (svg) => {
const blob = new Blob([svg], {
type: 'image/svg+xml;charset=utf-8'
})
@ -54,6 +66,27 @@ const DraftPattern = props => {
const styles = {
paragraph: {
padding: '0 1rem'
},
aside: {
maxWidth: '350px',
background: 'transparent',
border: 0,
fontSize: '90%',
boxShadow: '0 0 1px #cccc',
display: hideAside ? 'none' : 'block'
},
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 pattern = new props.Pattern(props.gist.settings)
@ -73,57 +106,116 @@ const DraftPattern = props => {
Prism.languages.javascript,
'javascript'
)
let iconProps = {
size: 'small',
style: styles.icon,
color: 'inherit'
}
const color = (check) => (check ? '#40c057' : '#fa5252')
return (
<div className="fs-sa">
<section>
<h2>
<FormattedMessage id="app.pattern" />
</h2>
<Draft {...patternProps} design={design} focus={focus} raiseEvent={raiseEvent} />
<h2>gist</h2>
<div className="gatsby-highlight">
<pre className="language-json" dangerouslySetInnerHTML={{ __html: gist }} />
</div>
<Draft
{...patternProps}
design={design}
focus={focus}
raiseEvent={raiseEvent}
viewBox={viewBox}
className="freesewing draft shadow"
/>
{hideAside && (
<div style={styles.unhide}>
<IconButton
onClick={() => setHideAside(false)}
title="Show sidebar"
{...iconProps}
style={{ margin: 0 }}
>
<span style={{ color: props.theme === 'dark' ? '#212529' : '#f8f9fa' }}>
<UnhideIcon />
</span>
</IconButton>
</div>
)}
</section>
<aside>
<aside style={styles.aside}>
<div className="sticky">
{design ? (
<React.Fragment>
<p style={styles.paragraph}>
<FormattedMessage id="cfp.designModeIsOn" />
&nbsp;(
<a href="#logo" onClick={() => setDesign(false)}>
<FormattedMessage id="cfp.turnOff" />
</a>
)
{focusCount > 0 ? (
<React.Fragment>
&ensp;(
<a href="#logo" onClick={() => raiseEvent('clearFocusAll', null)}>
<FormattedMessage id="app.reset" />
</a>
)
</React.Fragment>
) : null}
</p>
<Design
focus={focus}
design={design}
raiseEvent={raiseEvent}
parts={patternProps.parts}
/>
</React.Fragment>
) : (
<p style={styles.paragraph}>
<FormattedMessage id="cfp.designModeIsOff" />
&nbsp;(
<a href="#logo" onClick={() => setDesign(true)}>
<FormattedMessage id="cfp.turnOn" />
</a>
)
</p>
<div style={{ padding: '5px' }}>
<Zoombox patternProps={patternProps} setViewBox={setViewBox} />
</div>
<div style={{ margin: '1rem auto 0', textAlign: 'center' }}>
<IconButton
onClick={() => setDesign(!design)}
title="Toggle design mode"
{...iconProps}
>
<span style={{ color: color(design) }}>
<DesignIcon />
</span>
</IconButton>
{design && (
<IconButton
onClick={() => raiseEvent('clearFocusAll', null)}
title="Clear design mode"
{...iconProps}
>
<ClearIcon color="primary" />
</IconButton>
)}
<IconButton
onClick={() => console.log(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>
<IconButton onClick={() => setHideAside(true)} title="Hide sidebar" {...iconProps}>
<HideIcon />
</IconButton>
</div>
{design && (
<Design
focus={focus}
design={design}
raiseEvent={raiseEvent}
parts={patternProps.parts}
/>
)}
<DraftConfigurator
noDocs