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 (
-
+