VSinerva/freesewing
1
0
Fork 0
Code Activity

🚧 [components] Work on draft/pattern settings/options

Browse source
This commit is contained in:
Joost De Cock 2019-04-23 18:34:18 +02:00
parent 3ca3742953
commit c0690d5496
30 changed files with 2195 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

86
packages/components/src/PatternOptionMillimeter/index.js
View file

@ -1,5 +1,12 @@
import React, { useState } from "react";
import PropTypes from "prop-types";
import {
sliderStep,
roundMm,
roundMmUp,
roundMmDown,
formatMm
} from "../utils";
import FormFieldSlider from "../FormFieldSlider";
import OptionPreamble from "../OptionPreamble";
@ -7,26 +14,8 @@ const PatternOptionMillimeter = props => {
const [value, setValue] = useState(props.dflt);
const [previousValue, setPreviousValue] = useState(props.dflt);
const smallestImperialStep = 0.396875;
const round = val => {
if (props.units === "imperial") {
return Math.round(val * 1000000) / 1000000;
} else return Math.round(val * 10) / 10;
};
const roundDown = val => {
if (props.units === "imperial") {
return val - (val % smallestImperialStep);
} else return Math.floor(val * 10) / 10;
};
const roundUp = val => {
if (props.units === "imperial") {
return val - (val % 0.396875);
} else return Math.ceil(val * 10) / 10;
};
const update = (name, newValue, evt) => {
newValue = round(newValue);
newValue = roundMm(newValue, props.units);
// 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
@ -44,51 +33,6 @@ const PatternOptionMillimeter = props => {
props.updateValue(props.name, props.dflt);
};
const formatValue = val => {
val = round(val);
if (props.units === "imperial") {
if (val == 0) return 0 + '"';
let negative = "";
let inches = "";
let rest = "";
let fraction = val / 25.4;
if (fraction < 0) {
fraction = fraction * -1;
negative = "-";
}
if (Math.abs(fraction) < 1) {
inches = "";
rest = fraction;
} else {
inches = Math.floor(fraction);
rest = fraction - inches;
}
inches += " ";
let fraction128 = Math.round(rest * 128);
// eslint-disable-next-line
if (fraction128 == 0) return negative + inches;
// eslint-disable-next-line
if (fraction128 % 64 == 0)
return negative + inches + fraction128 / 64 + "/2";
// eslint-disable-next-line
if (fraction128 % 32 == 0)
return negative + inches + fraction128 / 32 + "/2";
// eslint-disable-next-line
if (fraction128 % 16 == 0)
return negative + inches + fraction128 / 16 + "/8";
// eslint-disable-next-line
if (fraction128 % 8 == 0)
return negative + inches + fraction128 / 8 + "/16";
// eslint-disable-next-line
if (fraction128 % 4 == 0)
return negative + inches + fraction128 / 4 + "/32";
// eslint-disable-next-line
if (fraction128 % 2 == 0)
return negative + inches + fraction128 / 2 + "/64";
else return negative + fraction;
} else return val + "cm";
};
const styles = {
container: {
display: "flex",
@ -110,7 +54,7 @@ const PatternOptionMillimeter = props => {
desc={props.desc}
title={props.title}
id={"po-mm-" + props.name}
displayValue={formatValue(value)}
displayValue={formatMm(value, props.units)}
reset={reset}
showHelp={() =>
props.triggerAction("showHelp", {
@ -122,9 +66,9 @@ const PatternOptionMillimeter = props => {
<FormFieldSlider
name={props.name}
value={value}
min={roundUp(props.min)}
max={roundDown(props.max)}
step={props.units === "imperial" ? smallestImperialStep : 0.1}
min={roundMmUp(props.min, props.units)}
max={roundMmDown(props.max, props.units)}
step={sliderStep[props.units]}
onChange={update}
label={"po-mm-" + props.name}
updateValue={update}
@ -139,10 +83,8 @@ PatternOptionMillimeter.propTypes = {
updateValue: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
dflt: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
desc: PropTypes.string.isRequired,
resetLabel: PropTypes.string,
docsLabel: PropTypes.string,
title: PropTypes.node.isRequired,
desc: PropTypes.node.isRequired,
units: PropTypes.oneOf(["metric", "imperial"]).isRequired
};