feat(components): Updates for settings.scale. See #1638

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) => (
-        <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
+        <Snippet key={name} name={name} snippet={props.part.snippets[name]} scale={props.scale} />
       ))}
       {focus}
     </g>

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) {

packages/components/src/Draft/Text/index.js

@@ -16,13 +16,14 @@ const Text = (props) => {
     let key = 0
     let lines = translated.split('\n')
     text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
+    let lineHeight = (props.point.attributes.get('data-text-lineheight') || 12) * (props.scale || 1)
     for (let line of lines) {
       key++
       text.push(
         <tspan
           key={'tspan-' + key}
           x={props.point.x}
-          dy={props.point.attributes.get('data-text-lineheight') || 12}
+          dy={lineHeight}
         >
           {line.toString().replace(/&quot;/g, '"')}
         </tspan>

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'}
   >
     <Defs {...props} />
     <g>
@@ -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}

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 = (
+    <FormFieldSlider
+      name="scale"
+      value={value}
+      dflt={props.dflt}
+      label="po-slider-scale"
+      updateValue={update}
+      min={0.05}
+      max={5}
+      step={sliderStep[props.units]}
+    />
+  )
+
+  return (
+    <li>
+      <OptionPreamble
+        dflt={props.dflt}
+        designDflt={props.designDflt}
+        value={value}
+        desc={props.desc}
+        title={props.title}
+        id="po-slider-scale"
+        displayValue={value}
+        displayFormat="html"
+        reset={reset}
+        patternReset={patternReset}
+        toggleExpanded={toggleExpanded}
+        expanded={expanded}
+        showHelp={() =>
+          props.raiseEvent('showHelp', {
+            type: 'draftSetting',
+            value: 'scale'
+          })
+        }
+        option={option}
+        noDocs={props.noDocs}
+      />
+    </li>
+  )
+}
+
+export default DraftSettingScale

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", () => <Scale {...props} />)

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 = ({
       <DraftSettingLanguage {...addProps('locale')} />,
       <DraftSettingUnits {...addProps('units')} list={metricimperial} />,
       <DraftSettingComplete {...addProps('complete')} />,
+      <DraftSettingScale {...addProps('scale')} />,
       <DraftSettingMargin {...addProps('margin')} />,
       <DraftSettingOnly {...addProps('only')} />,
       <DraftSettingDebug {...addProps('debug')} />

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"
       />
       <Events events={props.patternProps.events} />
     </>

packages/components/src/Workbench/index.js

@@ -318,7 +318,10 @@ const Workbench = ({
 
   return (
     <MuiThemeProvider theme={createMuiTheme(themes[theme])}>
-      <style>{sass}</style>
+      <style>
+        {`:root { --freesewing-pattern-scale: ${gist.settings.scale || 1}; }`}
+        {sass}
+      </style>
       <div
         className={
           theme === 'light' ? 'workbench theme-wrapper light' : 'workbench theme-wrapper dark'