diff --git a/packages/components/src/Draft/Part/index.js b/packages/components/src/Draft/Part/index.js index 8e5ab4936d0..503b816f333 100644 --- a/packages/components/src/Draft/Part/index.js +++ b/packages/components/src/Draft/Part/index.js @@ -119,6 +119,7 @@ const Part = (props) => { name={name} part={props.name} language={props.language} + scale={props.scale} point={props.part.points[name]} focus={props.focus} topLeft={props.part.topLeft} @@ -128,7 +129,7 @@ const Part = (props) => { /> ))} {Object.keys(props.part.snippets).map((name) => ( - + ))} {focus} diff --git a/packages/components/src/Draft/Snippet/index.js b/packages/components/src/Draft/Snippet/index.js index 1d1fd0b1627..bcb2e3eb0ac 100644 --- a/packages/components/src/Draft/Snippet/index.js +++ b/packages/components/src/Draft/Snippet/index.js @@ -7,8 +7,8 @@ const Snippet = (props) => { x: props.snippet.anchor.x, y: props.snippet.anchor.y } - let scale = props.snippet.attributes.get('data-scale') - let rotate = props.snippet.attributes.get('data-rotate') + const scale = (props.snippet.attributes.get('data-scale') || 1) * (props.scale || 1) + const rotate = props.snippet.attributes.get('data-rotate') if (scale || rotate) { snippetProps.transform = '' if (scale) { diff --git a/packages/components/src/Draft/Text/index.js b/packages/components/src/Draft/Text/index.js index 4c31e90a76f..b274b5a3d0c 100644 --- a/packages/components/src/Draft/Text/index.js +++ b/packages/components/src/Draft/Text/index.js @@ -16,13 +16,14 @@ const Text = (props) => { let key = 0 let lines = translated.split('\n') text.push({lines.shift()}) + let lineHeight = (props.point.attributes.get('data-text-lineheight') || 12) * (props.scale || 1) for (let line of lines) { key++ text.push( {line.toString().replace(/"/g, '"')} diff --git a/packages/components/src/Draft/index.js b/packages/components/src/Draft/index.js index 4711be69101..1c43916b4c5 100644 --- a/packages/components/src/Draft/index.js +++ b/packages/components/src/Draft/index.js @@ -13,7 +13,7 @@ const Draft = (props) => ( design={props.design || false} style={props.style || {}} viewBox={props.viewBox} - className={props.className || 'freesewing draft'} + className={props.className || 'freesewing draft pattern'} > @@ -23,6 +23,7 @@ const Draft = (props) => ( language={props.settings.locale} paperless={props.settings.paperless} units={props.settings.units} + scale={props.settings.scale} key={name} name={name} focus={props.focus || false} diff --git a/packages/components/src/DraftConfigurator/DraftSettingScale/index.js b/packages/components/src/DraftConfigurator/DraftSettingScale/index.js new file mode 100644 index 00000000000..07524a1952b --- /dev/null +++ b/packages/components/src/DraftConfigurator/DraftSettingScale/index.js @@ -0,0 +1,76 @@ +import React, { useState } from 'react' +import FormFieldSlider from '../../.form/FormFieldSlider' +import sliderStep from '@freesewing/utils/sliderStep' +import OptionPreamble from '../OptionPreamble' + +const DraftSettingScale = (props) => { + const [value, setValue] = useState(props.value === null ? props.dflt : props.value) + const [expanded, setExpanded] = useState(false) + + const update = (name, newValue, evt) => { + // Sometimes, when sliding, the rapid succession of updates + // causes a weird timing issue to result in a value that is NaN. + // If that's the case, just ignore this update and keep the + // previous one instead + if (!isNaN(newValue)) { + setValue(newValue) + if (evt.type !== 'mousemove') props.updateValue('scale', newValue) + } else { + props.updateValue('scale', value) + } + } + + const reset = () => { + setValue(props.dflt) + props.updateValue('scale', props.dflt) + } + + const patternReset = () => { + setValue(props.designDflt) + props.updateValue('scale', props.designDflt) + } + + const toggleExpanded = () => setExpanded(!expanded) + + let option = ( + + ) + + return ( +
  • + + props.raiseEvent('showHelp', { + type: 'draftSetting', + value: 'scale' + }) + } + option={option} + noDocs={props.noDocs} + /> +
  • + ) +} + +export default DraftSettingScale diff --git a/packages/components/src/DraftConfigurator/DraftSettingScale/stories.js b/packages/components/src/DraftConfigurator/DraftSettingScale/stories.js new file mode 100644 index 00000000000..9674d928dd6 --- /dev/null +++ b/packages/components/src/DraftConfigurator/DraftSettingScale/stories.js @@ -0,0 +1,18 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import Scale from "."; + +const props = { + raiseEvent: (type, data) => + console.log(`Action of type ${type} triggered, data passed is`, data), + updateValue: (name, value) => + console.log(`Updated setting ${name}, value is now: ${value}`), + name: "scale", + dflt: 2, + title: "Scale", + desc: + "This is the scale description. I'm wrapped in a p tag. This component only sets the CSS class on a non-default value. It's up to you to supply the CSS to style it." +}; + +storiesOf("Low level/DraftSettingScale", module) + .add("Scale", () => ) diff --git a/packages/components/src/DraftConfigurator/DraftSettings/index.js b/packages/components/src/DraftConfigurator/DraftSettings/index.js index 9d809992e04..6affe1a3f9b 100644 --- a/packages/components/src/DraftConfigurator/DraftSettings/index.js +++ b/packages/components/src/DraftConfigurator/DraftSettings/index.js @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { FormattedMessage } from 'react-intl' import DraftSettingSa from '../DraftSettingSa' +import DraftSettingScale from '../DraftSettingScale' import DraftSettingMargin from '../DraftSettingMargin' import DraftSettingComplete from '../DraftSettingComplete' import DraftSettingPaperless from '../DraftSettingPaperless' @@ -59,6 +60,8 @@ const DraftSettings = ({ switch (setting) { case 'sa': return 10 + case 'scale': + return 1 case 'only': return 'dflt' case 'complete': @@ -106,6 +109,7 @@ const DraftSettings = ({ , , , + , , , diff --git a/packages/components/src/Workbench/DraftPattern/index.js b/packages/components/src/Workbench/DraftPattern/index.js index 4690af5b591..073c6481cd1 100644 --- a/packages/components/src/Workbench/DraftPattern/index.js +++ b/packages/components/src/Workbench/DraftPattern/index.js @@ -43,7 +43,7 @@ const DraftPattern = (props) => { focus={props.focus} raiseEvent={props.raiseEvent} viewBox={props.viewBox} - className="freesewing draft shadow" + className="freesewing draft pattern shadow" /> diff --git a/packages/components/src/Workbench/index.js b/packages/components/src/Workbench/index.js index a8e69fbebc5..f167af4a15a 100644 --- a/packages/components/src/Workbench/index.js +++ b/packages/components/src/Workbench/index.js @@ -318,7 +318,10 @@ const Workbench = ({ return ( - +