chore(components): Updated Workbench component to pass data rather than gist to DraftConfigurator
This commit is contained in:
Joost De Cock
parent
6d122f429f
commit
1375e5ae93
2 changed files with 169 additions and 192 deletions
|
|
@ -1,43 +1,42 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Draft from "../../Draft";
|
||||
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 React, { useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Draft from '../../Draft'
|
||||
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'
|
||||
|
||||
const DraftPattern = props => {
|
||||
const [design, setDesign] = useState(true);
|
||||
const [focus, setFocus] = useState(null);
|
||||
const [design, setDesign] = useState(true)
|
||||
const [focus, setFocus] = useState(null)
|
||||
|
||||
const raiseEvent = (type, data) => {
|
||||
if (type === "clearFocusAll") {
|
||||
props.updateGist(false, "settings", "only");
|
||||
return setFocus(null);
|
||||
if (type === 'clearFocusAll') {
|
||||
props.updateGist(false, 'settings', 'only')
|
||||
return setFocus(null)
|
||||
}
|
||||
let f = {};
|
||||
if (focus !== null) f = { ...focus };
|
||||
if (typeof f[data.part] === "undefined")
|
||||
f[data.part] = { paths: [], points: [], coords: [] };
|
||||
if (type === "point") f[data.part].points.push(data.name);
|
||||
else if (type === "path") f[data.part].paths.push(data.name);
|
||||
else if (type === "coords") f[data.part].coords.push(data.coords);
|
||||
else if (type === "clearFocus") {
|
||||
let i = focus[data.part][data.type].indexOf(data.name);
|
||||
f[data.part][data.type].splice(i, 1);
|
||||
} else if (type === "part") props.updateGist(data, "settings", "only");
|
||||
let f = {}
|
||||
if (focus !== null) f = { ...focus }
|
||||
if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] }
|
||||
if (type === 'point') f[data.part].points.push(data.name)
|
||||
else if (type === 'path') f[data.part].paths.push(data.name)
|
||||
else if (type === 'coords') f[data.part].coords.push(data.coords)
|
||||
else if (type === 'clearFocus') {
|
||||
let i = focus[data.part][data.type].indexOf(data.name)
|
||||
f[data.part][data.type].splice(i, 1)
|
||||
} else if (type === 'part') props.updateGist(data, 'settings', 'only')
|
||||
|
||||
setFocus(f);
|
||||
};
|
||||
setFocus(f)
|
||||
}
|
||||
|
||||
const svgToFile = svg => {
|
||||
const blob = new Blob([svg], {
|
||||
type: "image/svg+xml;charset=utf-8"
|
||||
});
|
||||
fileSaver.saveAs(blob, "freesewing-" + props.config.name + ".svg");
|
||||
};
|
||||
type: 'image/svg+xml;charset=utf-8'
|
||||
})
|
||||
fileSaver.saveAs(blob, 'freesewing-' + props.config.name + '.svg')
|
||||
}
|
||||
|
||||
if (props.svgExport) {
|
||||
svgToFile(
|
||||
|
|
@ -48,32 +47,32 @@ const DraftPattern = props => {
|
|||
.use(theme)
|
||||
.draft()
|
||||
.render()
|
||||
);
|
||||
props.setSvgExport(false);
|
||||
)
|
||||
props.setSvgExport(false)
|
||||
}
|
||||
|
||||
const styles = {
|
||||
paragraph: {
|
||||
padding: "0 1rem"
|
||||
padding: '0 1rem'
|
||||
}
|
||||
};
|
||||
let pattern = new props.Pattern(props.gist.settings);
|
||||
pattern.draft();
|
||||
let patternProps = pattern.getRenderProps();
|
||||
let focusCount = 0;
|
||||
}
|
||||
let pattern = new props.Pattern(props.gist.settings)
|
||||
pattern.draft()
|
||||
let patternProps = pattern.getRenderProps()
|
||||
let focusCount = 0
|
||||
if (focus !== null) {
|
||||
for (let p of Object.keys(focus)) {
|
||||
for (let i in focus[p].points) focusCount++;
|
||||
for (let i in focus[p].paths) focusCount++;
|
||||
for (let i in focus[p].coords) focusCount++;
|
||||
for (let i in focus[p].points) focusCount++
|
||||
for (let i in focus[p].paths) focusCount++
|
||||
for (let i in focus[p].coords) focusCount++
|
||||
}
|
||||
}
|
||||
|
||||
let gist = Prism.highlight(
|
||||
JSON.stringify(props.gist, null, 2),
|
||||
Prism.languages.javascript,
|
||||
"javascript"
|
||||
);
|
||||
'javascript'
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="fs-sa">
|
||||
|
|
@ -81,18 +80,10 @@ const DraftPattern = props => {
|
|||
<h2>
|
||||
<FormattedMessage id="app.pattern" />
|
||||
</h2>
|
||||
<Draft
|
||||
{...patternProps}
|
||||
design={design}
|
||||
focus={focus}
|
||||
raiseEvent={raiseEvent}
|
||||
/>
|
||||
<Draft {...patternProps} design={design} focus={focus} raiseEvent={raiseEvent} />
|
||||
<h2>gist</h2>
|
||||
<div className="gatsby-highlight">
|
||||
<pre
|
||||
className="language-json"
|
||||
dangerouslySetInnerHTML={{ __html: gist }}
|
||||
/>
|
||||
<pre className="language-json" dangerouslySetInnerHTML={{ __html: gist }} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -110,10 +101,7 @@ const DraftPattern = props => {
|
|||
{focusCount > 0 ? (
|
||||
<React.Fragment>
|
||||
 (
|
||||
<a
|
||||
href="#logo"
|
||||
onClick={() => raiseEvent("clearFocusAll", null)}
|
||||
>
|
||||
<a href="#logo" onClick={() => raiseEvent('clearFocusAll', null)}>
|
||||
<FormattedMessage id="app.reset" />
|
||||
</a>
|
||||
)
|
||||
|
|
@ -140,8 +128,8 @@ const DraftPattern = props => {
|
|||
<DraftConfigurator
|
||||
noDocs
|
||||
config={props.config}
|
||||
gist={props.gist}
|
||||
updateGist={props.updateGist}
|
||||
data={props.gist}
|
||||
updateData={props.updateGist}
|
||||
raiseEvent={props.raiseEvent}
|
||||
freesewing={props.freesewing}
|
||||
units={props.units}
|
||||
|
|
@ -149,8 +137,8 @@ const DraftPattern = props => {
|
|||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
DraftPattern.propTypes = {
|
||||
gist: PropTypes.object.isRequired,
|
||||
|
|
@ -158,12 +146,12 @@ DraftPattern.propTypes = {
|
|||
config: PropTypes.object.isRequired,
|
||||
raiseEvent: PropTypes.func.isRequired,
|
||||
Pattern: PropTypes.func.isRequired,
|
||||
units: PropTypes.oneOf(["metric", "imperial"])
|
||||
};
|
||||
units: PropTypes.oneOf(['metric', 'imperial'])
|
||||
}
|
||||
|
||||
DraftPattern.defaultProps = {
|
||||
units: "metric",
|
||||
units: 'metric',
|
||||
pointInfo: null
|
||||
};
|
||||
}
|
||||
|
||||
export default DraftPattern;
|
||||
export default DraftPattern
|
||||
|
|
|
|||
|
|
@ -1,147 +1,142 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import withGist from "../withGist";
|
||||
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
|
||||
import Navbar from "../Navbar";
|
||||
import defaultGist from "@freesewing/utils/defaultGist";
|
||||
import storage from "@freesewing/utils/storage";
|
||||
import { dark, light } from "@freesewing/mui-theme";
|
||||
import withLanguage from "../withLanguage";
|
||||
import LanguageIcon from "@material-ui/icons/Translate";
|
||||
import DarkModeIcon from "@material-ui/icons/Brightness3";
|
||||
import LanguageChooser from "./LanguageChooser";
|
||||
import DraftPattern from "./DraftPattern";
|
||||
import SamplePattern from "./SamplePattern";
|
||||
import Welcome from "./Welcome";
|
||||
import Footer from "../Footer";
|
||||
import Measurements from "./Measurements";
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import withGist from '../withGist'
|
||||
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
|
||||
import Navbar from '../Navbar'
|
||||
import defaultGist from '@freesewing/utils/defaultGist'
|
||||
import storage from '@freesewing/utils/storage'
|
||||
import { dark, light } from '@freesewing/mui-theme'
|
||||
import withLanguage from '../withLanguage'
|
||||
import LanguageIcon from '@material-ui/icons/Translate'
|
||||
import DarkModeIcon from '@material-ui/icons/Brightness3'
|
||||
import LanguageChooser from './LanguageChooser'
|
||||
import DraftPattern from './DraftPattern'
|
||||
import SamplePattern from './SamplePattern'
|
||||
import Welcome from './Welcome'
|
||||
import Footer from '../Footer'
|
||||
import Measurements from './Measurements'
|
||||
|
||||
const Workbench = props => {
|
||||
const [display, setDisplay] = useState(null);
|
||||
const [pattern, setPattern] = useState(false);
|
||||
const [theme, setTheme] = useState("light");
|
||||
const [measurements, setMeasurements] = useState(null);
|
||||
const [svgExport, setSvgExport] = useState(false);
|
||||
const [display, setDisplay] = useState(null)
|
||||
const [pattern, setPattern] = useState(false)
|
||||
const [theme, setTheme] = useState('light')
|
||||
const [measurements, setMeasurements] = useState(null)
|
||||
const [svgExport, setSvgExport] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let m = getMeasurements();
|
||||
setMeasurements(m);
|
||||
props.updateGist(m, "settings", "measurements");
|
||||
setDisplay(getDisplay());
|
||||
props.setLanguage(props.userLanguage || "en");
|
||||
}, []);
|
||||
let m = getMeasurements()
|
||||
setMeasurements(m)
|
||||
props.updateGist(m, 'settings', 'measurements')
|
||||
setDisplay(getDisplay())
|
||||
props.setLanguage(props.userLanguage || 'en')
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
if (props.from) props.importGist(props.from);
|
||||
}, [props.from]);
|
||||
if (props.from) props.importGist(props.from)
|
||||
}, [props.from])
|
||||
useEffect(() => {
|
||||
if (props.language !== props.gist.settings.locale)
|
||||
props.updateGist(props.language, "settings", "locale");
|
||||
}, [props.language]);
|
||||
props.updateGist(props.language, 'settings', 'locale')
|
||||
}, [props.language])
|
||||
|
||||
const getDisplay = () => storage.get(props.config.name + "-display");
|
||||
const getDisplay = () => storage.get(props.config.name + '-display')
|
||||
const saveDisplay = d => {
|
||||
setDisplay(d);
|
||||
storage.set(props.config.name + "-display", d);
|
||||
};
|
||||
const getMeasurements = () =>
|
||||
storage.get(props.config.name + "-measurements");
|
||||
setDisplay(d)
|
||||
storage.set(props.config.name + '-display', d)
|
||||
}
|
||||
const getMeasurements = () => storage.get(props.config.name + '-measurements')
|
||||
const saveMeasurements = data => {
|
||||
storage.set(props.config.name + "-measurements", data);
|
||||
props.updateGist(data, "settings", "measurements");
|
||||
};
|
||||
storage.set(props.config.name + '-measurements', data)
|
||||
props.updateGist(data, 'settings', 'measurements')
|
||||
}
|
||||
const updateMeasurement = (name, val) => {
|
||||
let updatedMeasurements = { ...measurements };
|
||||
updatedMeasurements[name] = val;
|
||||
setMeasurements(updatedMeasurements);
|
||||
saveMeasurements(updatedMeasurements);
|
||||
};
|
||||
let updatedMeasurements = { ...measurements }
|
||||
updatedMeasurements[name] = val
|
||||
setMeasurements(updatedMeasurements)
|
||||
saveMeasurements(updatedMeasurements)
|
||||
}
|
||||
const preloadMeasurements = model => {
|
||||
let updatedMeasurements = {
|
||||
...measurements,
|
||||
...model
|
||||
};
|
||||
setMeasurements(updatedMeasurements);
|
||||
saveMeasurements(updatedMeasurements);
|
||||
};
|
||||
}
|
||||
setMeasurements(updatedMeasurements)
|
||||
saveMeasurements(updatedMeasurements)
|
||||
}
|
||||
const measurementsMissing = () => {
|
||||
let required = props.config.measurements;
|
||||
if (required.length < 1) return false;
|
||||
if (measurements === null) return true;
|
||||
let required = props.config.measurements
|
||||
if (required.length < 1) return false
|
||||
if (measurements === null) return true
|
||||
for (let m of required) {
|
||||
if (typeof measurements[m] === "undefined") return true;
|
||||
if (typeof measurements[m] === 'undefined') return true
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
return false
|
||||
}
|
||||
const toggleDarkMode = () => {
|
||||
if (theme === "light") setTheme("dark");
|
||||
else setTheme("light");
|
||||
};
|
||||
const raiseEvent = (type = null, data = null) => {};
|
||||
if (theme === 'light') setTheme('dark')
|
||||
else setTheme('light')
|
||||
}
|
||||
const raiseEvent = (type = null, data = null) => {}
|
||||
|
||||
const navs = {
|
||||
left: {
|
||||
draft: {
|
||||
type: "button",
|
||||
onClick: () => saveDisplay("draft"),
|
||||
text: "cfp.draftYourPattern",
|
||||
active: display === "draft" ? true : false
|
||||
type: 'button',
|
||||
onClick: () => saveDisplay('draft'),
|
||||
text: 'cfp.draftYourPattern',
|
||||
active: display === 'draft' ? true : false
|
||||
},
|
||||
sample: {
|
||||
type: "button",
|
||||
onClick: () => saveDisplay("sample"),
|
||||
text: "cfp.testYourPattern",
|
||||
active: display === "sample" ? true : false
|
||||
type: 'button',
|
||||
onClick: () => saveDisplay('sample'),
|
||||
text: 'cfp.testYourPattern',
|
||||
active: display === 'sample' ? true : false
|
||||
},
|
||||
measurements: {
|
||||
type: "button",
|
||||
onClick: () => saveDisplay("measurements"),
|
||||
text: "app.measurements",
|
||||
active: display === "measurements" ? true : false
|
||||
type: 'button',
|
||||
onClick: () => saveDisplay('measurements'),
|
||||
text: 'app.measurements',
|
||||
active: display === 'measurements' ? true : false
|
||||
}
|
||||
},
|
||||
right: {
|
||||
version: {
|
||||
type: "link",
|
||||
href: "https://github.com/freesewing/freesewing/releases",
|
||||
text: "v" + props.freesewing.version
|
||||
type: 'link',
|
||||
href: 'https://github.com/freesewing/freesewing/releases',
|
||||
text: 'v' + props.freesewing.version
|
||||
},
|
||||
language: {
|
||||
type: "button",
|
||||
onClick: () => saveDisplay("languages"),
|
||||
type: 'button',
|
||||
onClick: () => saveDisplay('languages'),
|
||||
text: <LanguageIcon className="nav-icon" />,
|
||||
title: "Languages",
|
||||
active: display === "languages" ? true : false
|
||||
title: 'Languages',
|
||||
active: display === 'languages' ? true : false
|
||||
},
|
||||
dark: {
|
||||
type: "button",
|
||||
type: 'button',
|
||||
onClick: toggleDarkMode,
|
||||
text: <DarkModeIcon className="nav-icon moon" />,
|
||||
title: "Toggle dark mode"
|
||||
title: 'Toggle dark mode'
|
||||
}
|
||||
}
|
||||
};
|
||||
if (display === "draft" && !measurementsMissing())
|
||||
}
|
||||
if (display === 'draft' && !measurementsMissing())
|
||||
navs.left.svgExport = {
|
||||
type: "button",
|
||||
type: 'button',
|
||||
onClick: () => setSvgExport(true),
|
||||
text: "app.export",
|
||||
text: 'app.export',
|
||||
active: false
|
||||
};
|
||||
}
|
||||
// FIXME:
|
||||
navs.mleft = navs.left;
|
||||
navs.mright = navs.right;
|
||||
let main = null;
|
||||
navs.mleft = navs.left
|
||||
navs.mright = navs.right
|
||||
let main = null
|
||||
switch (display) {
|
||||
case "languages":
|
||||
main = (
|
||||
<LanguageChooser
|
||||
setLanguage={props.setLanguage}
|
||||
setDisplay={saveDisplay}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "draft":
|
||||
if (measurementsMissing()) saveDisplay("measurements");
|
||||
case 'languages':
|
||||
main = <LanguageChooser setLanguage={props.setLanguage} setDisplay={saveDisplay} />
|
||||
break
|
||||
case 'draft':
|
||||
if (measurementsMissing()) saveDisplay('measurements')
|
||||
main = (
|
||||
<DraftPattern
|
||||
freesewing={props.freesewing}
|
||||
|
|
@ -154,10 +149,10 @@ const Workbench = props => {
|
|||
svgExport={svgExport}
|
||||
setSvgExport={setSvgExport}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "sample":
|
||||
if (measurementsMissing()) saveDisplay("measurements");
|
||||
)
|
||||
break
|
||||
case 'sample':
|
||||
if (measurementsMissing()) saveDisplay('measurements')
|
||||
main = (
|
||||
<SamplePattern
|
||||
freesewing={props.freesewing}
|
||||
|
|
@ -168,9 +163,9 @@ const Workbench = props => {
|
|||
raiseEvent={raiseEvent}
|
||||
units={props.units}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "measurements":
|
||||
)
|
||||
break
|
||||
case 'measurements':
|
||||
main = (
|
||||
<Measurements
|
||||
measurements={measurements}
|
||||
|
|
@ -180,45 +175,39 @@ const Workbench = props => {
|
|||
preloadMeasurements={preloadMeasurements}
|
||||
language={props.language}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
)
|
||||
break
|
||||
default:
|
||||
main = <Welcome language={props.language} setDisplay={saveDisplay} />;
|
||||
main = <Welcome language={props.language} setDisplay={saveDisplay} />
|
||||
}
|
||||
|
||||
const themes = { dark, light };
|
||||
const themes = { dark, light }
|
||||
return (
|
||||
<MuiThemeProvider theme={createMuiTheme(themes[theme])}>
|
||||
<div
|
||||
className={
|
||||
theme === "light" ? "theme-wrapper light" : "theme-wrapper dark"
|
||||
}
|
||||
>
|
||||
{display !== "welcome" ? (
|
||||
<Navbar navs={navs} home={() => saveDisplay("welcome")} />
|
||||
) : null}
|
||||
<div className={theme === 'light' ? 'theme-wrapper light' : 'theme-wrapper dark'}>
|
||||
{display !== 'welcome' ? <Navbar navs={navs} home={() => saveDisplay('welcome')} /> : null}
|
||||
{main}
|
||||
{display !== "welcome" ? <Footer language={props.language} /> : null}
|
||||
{display !== 'welcome' ? <Footer language={props.language} /> : null}
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
Workbench.propTypes = {
|
||||
freesewing: PropTypes.object.isRequired,
|
||||
Pattern: PropTypes.func.isRequired,
|
||||
config: PropTypes.object.isRequired,
|
||||
from: PropTypes.object
|
||||
};
|
||||
}
|
||||
|
||||
Workbench.defaultProps = {
|
||||
from: { settings: { embed: true } }
|
||||
};
|
||||
}
|
||||
|
||||
export default withLanguage(
|
||||
withGist(Workbench, {
|
||||
gist: defaultGist,
|
||||
store: true
|
||||
}),
|
||||
"en"
|
||||
);
|
||||
'en'
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue