diff --git a/config/dependencies.yaml b/config/dependencies.yaml index 6caad5d8440..a9c145e792b 100644 --- a/config/dependencies.yaml +++ b/config/dependencies.yaml @@ -80,6 +80,7 @@ components: "@material-ui/icons": "^4.0.1" "@material-ui/lab": "^v4.0.0-alpha.14" "prismjs": "1.16.0" + "file-saver": "^2.0.2" core: _: "bezier-js": "^2.2.13" diff --git a/packages/components/package.json b/packages/components/package.json index 7bb301f4263..2675453cad9 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -26,25 +26,27 @@ "watch": "BABEL_ENV=production rollup -c -w -o dist/index.js -f cjs" }, "peerDependencies": { - "react": "^16.8", - "prop-types": "15.7.2", - "@freesewing/pattern-info": "^2.0.0-beta.32", - "@freesewing/mui-theme": "^2.0.0-beta.32", - "@freesewing/css-theme": "^2.0.0-beta.32", "@freesewing/core": "^2.0.0-beta.32", + "@freesewing/css-theme": "^2.0.0-beta.32", "@freesewing/examples": "^2.0.0-beta.32", + "@freesewing/i18n": "^2.0.0-beta.32", + "@freesewing/mui-theme": "^2.0.0-beta.32", + "@freesewing/pattern-info": "^2.0.0-beta.32", "@freesewing/rendertest": "^2.0.0-beta.32", "@freesewing/tutorial": "^2.0.0-beta.32", - "typeface-roboto-condensed": "latest", - "@freesewing/i18n": "^2.0.0-beta.32", "@freesewing/utils": "^2.0.0-beta.32", - "react-intl": "^2.8.0", "@material-ui/core": "^4.0.1", "@material-ui/icons": "^4.0.1", "@material-ui/lab": "^v4.0.0-alpha.14", - "prismjs": "1.16.0" + "prismjs": "1.16.0", + "prop-types": "15.7.2", + "react": "^16.8", + "react-intl": "^2.8.0", + "typeface-roboto-condensed": "latest" + }, + "dependencies": { + "file-saver": "2.0.2" }, - "dependencies": {}, "devDependencies": {}, "files": [ "Blockquote/*", diff --git a/packages/components/src/Footer/index.js b/packages/components/src/Footer/index.js index 83d412f9e5b..0b639485c2f 100644 --- a/packages/components/src/Footer/index.js +++ b/packages/components/src/Footer/index.js @@ -13,20 +13,23 @@ const Footer = props => { instagram: "https://instagram.com/freesewing_org", facebook: "https://facebook.com/freesewing.org/" }; - const links = { - docs: { - blog: "https://" + props.language + ".freesewing.org/blog", - aboutFreesewing: - "https://" + props.language + ".freesewing.org/docs/about", - faq: "https://" + props.language + ".freesewing.org/docs/faq" - }, - community: { - becomeAPatron: - "https://" + props.language + ".freesewing.org/patrons/join", - makerDocs: "https://" + props.language + ".freesewing.org/docs/", - devDocs: "https://" + props.language + ".freesewing.dev/" - } - }; + const links = + props.links === false + ? { + left: { + blog: "https://" + props.language + ".freesewing.org/blog", + aboutFreesewing: + "https://" + props.language + ".freesewing.org/docs/about", + faq: "https://" + props.language + ".freesewing.org/docs/faq" + }, + right: { + becomeAPatron: + "https://" + props.language + ".freesewing.org/patrons/join", + makerDocs: "https://" + props.language + ".freesewing.org/docs/", + devDocs: "https://" + props.language + ".freesewing.dev/" + } + } + : props.links; const styles = { container: { display: "flex", @@ -57,7 +60,7 @@ const Footer = props => { items.push(
  • @@ -78,6 +81,7 @@ const Footer = props => { }; Footer.defaultProps = { - home: "/" + home: "/", + links: false }; export default Footer; diff --git a/packages/components/src/Workbench/DraftPattern/index.js b/packages/components/src/Workbench/DraftPattern/index.js index 132267af6f7..7c7d554a1f6 100644 --- a/packages/components/src/Workbench/DraftPattern/index.js +++ b/packages/components/src/Workbench/DraftPattern/index.js @@ -5,6 +5,8 @@ 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); @@ -30,6 +32,23 @@ const DraftPattern = props => { 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"); + }; + + if (props.svgExport) { + svgToFile( + new props.Pattern(props.gist.settings) + .use(theme) + .draft() + .render() + ); + props.setSvgExport(false); + } + const styles = { paragraph: { padding: "0 1rem" @@ -56,6 +75,8 @@ const DraftPattern = props => { return (
    +
    REMOVEME
    + 
    {JSON.stringify(props.svgExport, null, 2)}

    diff --git a/packages/components/src/Workbench/index.js b/packages/components/src/Workbench/index.js index 3e8de3bb01d..2cb1f55b861 100644 --- a/packages/components/src/Workbench/index.js +++ b/packages/components/src/Workbench/index.js @@ -21,6 +21,7 @@ const Workbench = props => { 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); @@ -28,19 +29,13 @@ const Workbench = props => { setDisplay(getDisplay()); props.setLanguage(props.userLanguage || "en"); }, []); - useEffect( - () => { - 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] - ); + useEffect(() => { + 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]); const getDisplay = () => storage.get(props.config.name + "-display"); const saveDisplay = d => { @@ -125,6 +120,13 @@ const Workbench = props => { } } }; + if (display === "draft" && !measurementsMissing()) + navs.left.svgExport = { + type: "button", + onClick: () => setSvgExport(true), + text: "app.export", + active: false + }; // FIXME: navs.mleft = navs.left; navs.mright = navs.right; @@ -149,6 +151,8 @@ const Workbench = props => { updateGist={props.updateGist} raiseEvent={raiseEvent} units={props.units} + svgExport={svgExport} + setSvgExport={setSvgExport} /> ); break; diff --git a/yarn.lock b/yarn.lock index 672b22cef59..77a4579516e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8034,6 +8034,11 @@ file-loader@3.0.1, file-loader@^3.0.1: loader-utils "^1.0.2" schema-utils "^1.0.0" +file-saver@2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a" + integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw== + file-system-cache@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f" @@ -16610,17 +16615,6 @@ rollup-plugin-sass@^1.2.2: rollup-pluginutils ">= 1.3.1" sass "1.7.2" -rollup-plugin-terser@5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.1.1.tgz#e9d2545ec8d467f96ba99b9216d2285aad8d5b66" - integrity sha512-McIMCDEY8EU6Y839C09UopeRR56wXHGdvKKjlfiZG/GrP6wvZQ62u2ko/Xh1MNH2M9WDL+obAAHySljIZYCuPQ== - dependencies: - "@babel/code-frame" "^7.0.0" - jest-worker "^24.6.0" - rollup-pluginutils "^2.8.1" - serialize-javascript "^1.7.0" - terser "^4.1.0" - rollup-plugin-terser@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-4.0.4.tgz#6f661ef284fa7c27963d242601691dc3d23f994e" @@ -18099,7 +18093,7 @@ terser@^3.14.1, terser@^3.16.1, terser@^3.8.0: source-map "~0.6.1" source-map-support "~0.5.10" -terser@^4.0.0, terser@^4.1.0: +terser@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391" integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==