chore(markdown): Linting of dev docs
This commit is contained in:
Joost De Cock
parent
1d8beedd44
commit
265ad404da
317 changed files with 1281 additions and 1503 deletions
|
|
@ -9,8 +9,8 @@ or **yes** or **no**, use a boolean option.
|
|||
|
||||
A boolean option is a plain object with these properties:
|
||||
|
||||
- `bool` : Either `true` or `false` which will be the default
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `bool` : Either `true` or `false` which will be the default
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
|
|
@ -23,4 +23,3 @@ options: {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
title: constant
|
||||
---
|
||||
|
||||
If your option is a scalar value (like a string or a number),
|
||||
it will be treated as a constant. Constant options are never
|
||||
If your option is a scalar value (like a string or a number),
|
||||
it will be treated as a constant. Constant options are never
|
||||
exposed in the frontend, but can still be set when using FreeSewing
|
||||
via the API.
|
||||
|
||||
|
|
@ -26,12 +26,11 @@ options: {
|
|||
|
||||
There are typically two use-cases for constant options:
|
||||
|
||||
- Rather than define constants in your code, it's good practice to set
|
||||
them in your configuration file. This way, people who extend your
|
||||
pattern can change them if they would like to.
|
||||
- A constant option can be used as a feature-flag. Enabling or disabling
|
||||
parts of the code beyond the control of the end user, but accessible to
|
||||
developers.
|
||||
- Rather than define constants in your code, it's good practice to set
|
||||
them in your configuration file. This way, people who extend your
|
||||
pattern can change them if they would like to.
|
||||
- A constant option can be used as a feature-flag. Enabling or disabling
|
||||
parts of the code beyond the control of the end user, but accessible to
|
||||
developers.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ Counters are for integers only. Things like number of buttons and so on.
|
|||
|
||||
Your counter option should be a plain object with these properties:
|
||||
|
||||
- `count` : The default integer value
|
||||
- `min` : The minimal integer value that's allowed
|
||||
- `max` : The maximum integer value that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `count` : The default integer value
|
||||
- `min` : The minimal integer value that's allowed
|
||||
- `max` : The maximum integer value that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ For angles, use a degree option.
|
|||
|
||||
Your degree option should be a plain object with these properties:
|
||||
|
||||
- `deg` : The default value in degrees
|
||||
- `min` : The minimul that's allowed
|
||||
- `max` : The maximum that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `deg` : The default value in degrees
|
||||
- `min` : The minimul that's allowed
|
||||
- `max` : The maximum that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@ file give designers flexility to make one pattern with different variations.
|
|||
|
||||
## The use case for (design) options
|
||||
|
||||
One of the things that sets FreeSewing apart is that sewing patterns are not
|
||||
static. Each pattern is generated on the spot to accommodate the input
|
||||
One of the things that sets FreeSewing apart is that sewing patterns are not
|
||||
static. Each pattern is generated on the spot to accommodate the input
|
||||
provided by the user. Input that typically includes their measurments.
|
||||
|
||||
This *made-to-measure* approach is sort of *our thing* at FreeSewing,
|
||||
This *made-to-measure* approach is sort of *our thing* at FreeSewing,
|
||||
but why stop there?
|
||||
There's a lot of things that can be left up to the user and taken into
|
||||
There's a lot of things that can be left up to the user and taken into
|
||||
consideration when drafting the pattern. Things like how many buttons to use,
|
||||
whether or not to include pockets, shape of the collar, and so on. The only
|
||||
limit really is the creativity of the designer.
|
||||
|
||||
The `options` section in a pattern's configuration file is what makes this
|
||||
The `options` section in a pattern's configuration file is what makes this
|
||||
possible.
|
||||
|
||||
## The five option types you should know
|
||||
|
|
@ -26,11 +26,11 @@ possible.
|
|||
There are the five option types that an aspiring pattern designer should be
|
||||
familiar with:
|
||||
|
||||
1. [**boolean** options][bool] are for yes/no choices
|
||||
1. [**counter** options][count] are for integer values
|
||||
1. [**degree** options][deg] are for degrees
|
||||
1. [**list** options][list] are for a list of possible choices
|
||||
1. [**percentage** options][pct] are for percentages
|
||||
1. [**boolean** options][bool] are for yes/no choices
|
||||
2. [**counter** options][count] are for integer values
|
||||
3. [**degree** options][deg] are for degrees
|
||||
4. [**list** options][list] are for a list of possible choices
|
||||
5. [**percentage** options][pct] are for percentages
|
||||
|
||||
<Tip>
|
||||
|
||||
|
|
@ -43,10 +43,10 @@ They also have the most features and flexibility.
|
|||
|
||||
For the sake of completeness, here are the two other types of options:
|
||||
|
||||
6. [**constant** options][const] are used as
|
||||
[feature flags](https://en.wikipedia.org/wiki/Feature_toggle)
|
||||
6. [**millimeter** options][const] are **deprecated** (in favor of [snapped
|
||||
percentage options][snapped])
|
||||
6. [**constant** options][const] are used as
|
||||
[feature flags](https://en.wikipedia.org/wiki/Feature_toggle)
|
||||
7. [**millimeter** options][const] are **deprecated** (in favor of [snapped
|
||||
percentage options][snapped])
|
||||
|
||||
</Related>
|
||||
|
||||
|
|
@ -66,7 +66,6 @@ How you configure the default value depends on the option type
|
|||
|
||||
</Note>
|
||||
|
||||
|
||||
### Optionally hide options by configuring a `hide()` method
|
||||
|
||||
<Note>
|
||||
|
|
@ -84,9 +83,9 @@ it is not intended as a way to block access to a given option. It merely hides i
|
|||
|
||||
By default options are shown to the user when:
|
||||
|
||||
- They are not a constant option
|
||||
- **and**
|
||||
- They are included in an optionGroup
|
||||
- They are not a constant option
|
||||
- **and**
|
||||
- They are included in an optionGroup
|
||||
|
||||
You can further control the optional display of options by adding a method
|
||||
to the `hide` key under you option, as such:
|
||||
|
|
@ -111,8 +110,8 @@ So you can make a choice whether to show the option or not.
|
|||
|
||||
If it's not obvious from the name, your `hide()` method you should:
|
||||
|
||||
- Return `true` or a truthy value to hide the option
|
||||
- Return `false` or a falsy value to show the option
|
||||
- Return `true` or a truthy value to hide the option
|
||||
- Return `false` or a falsy value to show the option
|
||||
|
||||
<Tip>
|
||||
|
||||
|
|
@ -122,16 +121,20 @@ If you do not specify a `hide()` method, it will be populated with the default
|
|||
`hide()` method -- which always returns `false` thus always showing the option.
|
||||
|
||||
In other words, the `hide()` option is always there and will always get called
|
||||
to determine whether an option should be shown or not.
|
||||
to determine whether an option should be shown or not.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
||||
[bool]: /reference/api/config/options/bool
|
||||
[const]: /reference/api/config/options/const
|
||||
[count]: /reference/api/config/options/count
|
||||
[deg]: /reference/api/config/options/deg
|
||||
[list]: /reference/api/config/options/list
|
||||
[pct]: /reference/api/config/options/pct
|
||||
[snapped]: /reference/api/config/options/pct/snap
|
||||
|
||||
[const]: /reference/api/config/options/const
|
||||
|
||||
[count]: /reference/api/config/options/count
|
||||
|
||||
[deg]: /reference/api/config/options/deg
|
||||
|
||||
[list]: /reference/api/config/options/list
|
||||
|
||||
[pct]: /reference/api/config/options/pct
|
||||
|
||||
[snapped]: /reference/api/config/options/pct/snap
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ Use a list option when you want to offer an array of choices.
|
|||
|
||||
Your list option should be a plain object with these properties:
|
||||
|
||||
- `dflt` : The default for this option
|
||||
- `list` : An array of available values options
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `dflt` : The default for this option
|
||||
- `list` : An array of available values options
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
title: millimeter
|
||||
---
|
||||
|
||||
While FreeSewing supports millimeter options, we recommend
|
||||
using [percentage options][1] and will not accept
|
||||
While FreeSewing supports millimeter options, we recommend
|
||||
using [percentage options][1] and will not accept
|
||||
contributions that use millimeter options.
|
||||
|
||||
## Structure
|
||||
|
||||
A millimeter option should be a plain object with these properties:
|
||||
|
||||
- `mm` : The default value in millimeter
|
||||
- `min` : The minimul that's allowed
|
||||
- `max` : The maximum that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `mm` : The default value in millimeter
|
||||
- `min` : The minimul that's allowed
|
||||
- `max` : The maximum that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
|
|
@ -33,18 +33,18 @@ options: {
|
|||
|
||||
##### What's wrong with millimeter options?
|
||||
|
||||
Millimeter options do not scale.
|
||||
Parametric design is the _raison d'être_ of FreeSewing and that core belief
|
||||
that things should seamlessly adapt goes out the window when you use a `mm`
|
||||
option because now you have a value that will not change based on the
|
||||
Millimeter options do not scale.
|
||||
Parametric design is the *raison d'être* of FreeSewing and that core belief
|
||||
that things should seamlessly adapt goes out the window when you use a `mm`
|
||||
option because now you have a value that will not change based on the
|
||||
input measurements.
|
||||
|
||||
You could argue that it's fine because _you can just lower the option_
|
||||
but that breaks the principle of _sensible defaults_ (aka no surprises).
|
||||
The fact that you can sidestep the bullet does not mean you're not creating
|
||||
You could argue that it's fine because *you can just lower the option*
|
||||
but that breaks the principle of *sensible defaults* (aka no surprises).
|
||||
The fact that you can sidestep the bullet does not mean you're not creating
|
||||
a footgun.
|
||||
|
||||
When you need a millimeter option, reach for a [snapped
|
||||
When you need a millimeter option, reach for a [snapped
|
||||
percentage option][1] instead.
|
||||
|
||||
</Comment>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,20 @@ they ensure that your pattern will scale regardless of size.
|
|||
|
||||
Your percentage option should be a plain object with these properties:
|
||||
|
||||
- `pct` : The default percentage
|
||||
- `min` : The minimum percentage that's allowed
|
||||
- `max` : The maximum percentage that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `fromAbs` <small>(optional)</small> : A method to [determine the percentage based on a value in millimeter][fromabs]
|
||||
- `toAbs` <small>(optional)</small> : A method to [return the option value in millimeter][toabs]
|
||||
- `snap` <small>(optional)</small> : The configuration to control [snapping of percentage options][snap]
|
||||
- `pct` : The default percentage
|
||||
- `min` : The minimum percentage that's allowed
|
||||
- `max` : The maximum percentage that's allowed
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `fromAbs` <small>(optional)</small> : A method to [determine the percentage based on a value in millimeter][fromabs]
|
||||
- `toAbs` <small>(optional)</small> : A method to [return the option value in millimeter][toabs]
|
||||
- `snap` <small>(optional)</small> : The configuration to control [snapping of percentage options][snap]
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
[fromabs]: /reference/api/config/options/pct/fromabs
|
||||
|
||||
[toabs]: /reference/api/config/options/pct/toabs
|
||||
|
||||
[snap]: /reference/api/config/options/pct/snap
|
||||
|
||||
<Note>
|
||||
|
|
@ -28,7 +31,7 @@ Your percentage option should be a plain object with these properties:
|
|||
###### Percentage options will be divided by 100 when loaded
|
||||
|
||||
You specify percentages in your config file. For example, `50` means 50%.
|
||||
When your configuration is loaded, those percentages will be divided by 100.
|
||||
When your configuration is loaded, those percentages will be divided by 100.
|
||||
|
||||
So a percentage of `50` in your config file will be `0.5` when you read out that option in your pattern.
|
||||
|
||||
|
|
@ -58,4 +61,3 @@ options: {
|
|||
Percentage options have a few more tricks up their sleeve:
|
||||
|
||||
<ReadMore />
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Setting a value in millimeter as a percentage option
|
|||
---
|
||||
|
||||
Percentage options are great for parametric desing, but not always
|
||||
very intuitive for the user. For example: A user may desire 13
|
||||
very intuitive for the user. For example: A user may desire 13
|
||||
centimeters (5 inches) of chest ease. But what percentage should
|
||||
they set the `chestEase` option to to accomplish this?
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ value.
|
|||
<Note>
|
||||
|
||||
Note that this method will not change the percentage of the option.
|
||||
It will merely return return a percentage value. It is up to the
|
||||
It will merely return return a percentage value. It is up to the
|
||||
frontend designer to then either set this value, or suggest it to
|
||||
the user.
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ the user.
|
|||
|
||||
## Structure
|
||||
|
||||
The `fromAbs` property should hold a function with the following
|
||||
The `fromAbs` property should hold a function with the following
|
||||
signature:
|
||||
|
||||
```js
|
||||
|
|
@ -34,11 +34,10 @@ function toAbs(millimeter, settings) {
|
|||
|
||||
The first parameter is the desired value in millimeter (for example
|
||||
`130` for `13cm`).
|
||||
The second parameter is the pattern's run-time configuration
|
||||
The second parameter is the pattern's run-time configuration
|
||||
or [settings](/reference/api/settings) which holds -- among other things -- the
|
||||
measurements provided by the user.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
In our example above, let's say that the `chestEase` option is
|
||||
|
|
@ -56,7 +55,7 @@ chestEase: {
|
|||
}
|
||||
```
|
||||
|
||||
With object destructuring and fat-arrow notation,
|
||||
With object destructuring and fat-arrow notation,
|
||||
you can write it a bit terser like this:
|
||||
|
||||
```js
|
||||
|
|
@ -65,10 +64,10 @@ fromAbs: (val, { measurements }) => val /measurements.chest
|
|||
|
||||
## Using pctBasedOn for simple measurement fractions
|
||||
|
||||
Many percentage options represent a simple fraction of a measurement
|
||||
Many percentage options represent a simple fraction of a measurement
|
||||
(chest circumference in the example above).
|
||||
|
||||
As this scenario is so common, `@freesewing/core` exports a `pctBasedOn` method
|
||||
As this scenario is so common, `@freesewing/core` exports a `pctBasedOn` method
|
||||
that will do the work for you:
|
||||
|
||||
```js
|
||||
|
|
@ -90,10 +89,9 @@ const config = {
|
|||
}
|
||||
```
|
||||
|
||||
This will not only add an `fromAbs()` method to your option --
|
||||
This will not only add an `fromAbs()` method to your option --
|
||||
one that will return the percentage of any millimeter value passed into it --
|
||||
it will also add a `toAbs()` method that does the inverse: return the
|
||||
it will also add a `toAbs()` method that does the inverse: return the
|
||||
value in millimeter of whatever percentage the option is set to.
|
||||
See [Reporting a percentage option value in
|
||||
See [Reporting a percentage option value in
|
||||
millimeter](/reference/api/config/options/pct/toabs) for details.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,21 +3,21 @@ title: Snapped percentage options
|
|||
---
|
||||
|
||||
Snapped percentage options are a hybrid between [list options][list] and
|
||||
[percentage options][pct]. By combining traits of both, they create a
|
||||
[percentage options][pct]. By combining traits of both, they create a
|
||||
sort of *smart list option* that will select the most appropriate value
|
||||
from the list, and also allow a pure parametric value if no close match
|
||||
from the list, and also allow a pure parametric value if no close match
|
||||
is found.
|
||||
|
||||
## Structure
|
||||
|
||||
Your snapped percentage option should be a plain object with these properties:
|
||||
|
||||
- `pct` : The default percentage
|
||||
- `min` : The minimum percentage that's allowed
|
||||
- `max` : The maximum percentage that's allowed
|
||||
- `snap`: Holds the snap configuration (see [Snap configuration](#))
|
||||
- `toAbs`: a method returning the **millimeter value** of the option ([see `toAbs()`](toabs))
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
- `pct` : The default percentage
|
||||
- `min` : The minimum percentage that's allowed
|
||||
- `max` : The maximum percentage that's allowed
|
||||
- `snap`: Holds the snap configuration (see [Snap configuration](#))
|
||||
- `toAbs`: a method returning the **millimeter value** of the option ([see `toAbs()`](toabs))
|
||||
- `hide` <small>(optional)</small> : A method to [control the optional display of the option][hide]
|
||||
|
||||
## Snap configuration
|
||||
|
||||
|
|
@ -28,10 +28,10 @@ There are three different scenarios:
|
|||
|
||||
### snap holds a number
|
||||
|
||||
When `snap` holds a number, the option will be *snapped* to a
|
||||
multiple of this value.
|
||||
When `snap` holds a number, the option will be *snapped* to a
|
||||
multiple of this value.
|
||||
|
||||
In the example below, the absolute value of this option will be set to a multiple of `7`
|
||||
In the example below, the absolute value of this option will be set to a multiple of `7`
|
||||
(so one of `7`, `14`, `21`, `28`, `35`, ...).
|
||||
|
||||
```js
|
||||
|
|
@ -46,19 +46,19 @@ myOption: {
|
|||
|
||||
<Note>
|
||||
|
||||
In a case like this, the value will **always** be snapped,
|
||||
because the snap points will be distributed equally across the entire range
|
||||
In a case like this, the value will **always** be snapped,
|
||||
because the snap points will be distributed equally across the entire range
|
||||
of all possible inputs.
|
||||
|
||||
</Note>
|
||||
|
||||
### snap holds an array of numbers
|
||||
|
||||
When snap holds an array of numbers, the option will be *snapped* to one of
|
||||
When snap holds an array of numbers, the option will be *snapped* to one of
|
||||
the numbers unless it's further away than half the distance to its closest neighbor.
|
||||
|
||||
In the example below, if the absolute value returned by `toAbs()` is in the
|
||||
region of influence -- in this example between 4.5 and 69.5 -- the nearest snap value
|
||||
In the example below, if the absolute value returned by `toAbs()` is in the
|
||||
region of influence -- in this example between 4.5 and 69.5 -- the nearest snap value
|
||||
will be used. If instead it is outside the region of influence, the result of
|
||||
`toAbs()` will be uses as-is.
|
||||
|
||||
|
|
@ -74,17 +74,17 @@ myOption: {
|
|||
|
||||
### snap is a plain object with `metric` and `imperial` properties that each hold an array of numbers
|
||||
|
||||
In this case, the behavior is exaxtle the same as when `snap` holds an array
|
||||
In this case, the behavior is exaxtle the same as when `snap` holds an array
|
||||
of numbers.
|
||||
|
||||
The differnce is that this allows you to supply a different list of snap values
|
||||
for users using metric or imperial units.
|
||||
for users using metric or imperial units.
|
||||
|
||||
In the example below, the value of [settings.units](/api/settings/units) will
|
||||
determine which list of snap values gets used.
|
||||
In the example below, the value of [settings.units](/api/settings/units) will
|
||||
determine which list of snap values gets used.
|
||||
|
||||
Then, if the absolute value returned by `toAbs()` is in the
|
||||
region of influence -- in this example between 4.5 and 69.5 -- the nearest snap value
|
||||
Then, if the absolute value returned by `toAbs()` is in the
|
||||
region of influence -- in this example between 4.5 and 69.5 -- the nearest snap value
|
||||
will be used. If instead it is outside the region of influence, the result of
|
||||
`toAbs()` will be uses as-is.
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ We have a few different ways we can approach this:
|
|||
|
||||
### Approach A: We use a percentage option
|
||||
|
||||
We use a percentage option based on a vertical measurement, like
|
||||
We use a percentage option based on a vertical measurement, like
|
||||
`waistToFloor`.
|
||||
|
||||
The elastic width people end up with is something like 34.12mm for
|
||||
|
|
@ -150,8 +150,8 @@ our solution does not scale.
|
|||
We combine approaches A and B and configure a snapped percentage option
|
||||
with:
|
||||
|
||||
- A percentage based on `waistToFloor`
|
||||
- Our list of standard elastic widths as *snaps*
|
||||
- A percentage based on `waistToFloor`
|
||||
- Our list of standard elastic widths as *snaps*
|
||||
|
||||
For typical humans, our options will *snap* to the closest match in our
|
||||
list and behave just like Approach A (with a list option).
|
||||
|
|
@ -165,54 +165,54 @@ Sweet!
|
|||
|
||||
Before we wade into the details, let's first agree on terminology:
|
||||
|
||||
- The **percentage value** is the page passed by the user for the option.
|
||||
Its value always represents a percentage.
|
||||
- The **millimeter value** is the result of feeding the **percentage value** to
|
||||
the `toAbs()` method. Its value always represents millimeters.
|
||||
- The **snap values** are the values provided by the snap confguration.
|
||||
Each of the values always represents millimeters.
|
||||
- The **percentage value** is the page passed by the user for the option.
|
||||
Its value always represents a percentage.
|
||||
- The **millimeter value** is the result of feeding the **percentage value** to
|
||||
the `toAbs()` method. Its value always represents millimeters.
|
||||
- The **snap values** are the values provided by the snap confguration.
|
||||
Each of the values always represents millimeters.
|
||||
|
||||
Under the hood, and snapped percentage option will:
|
||||
|
||||
- Use `toAbs()` to calculate the **millimeter value** from the **percentage value**
|
||||
- See whether the **millimeter value** approaches one of the **snap values**
|
||||
- If so, use the snap value (in millimeter) as provided by one of the **snap values**
|
||||
- If not, use the **millimeter value** as-is
|
||||
- Use `toAbs()` to calculate the **millimeter value** from the **percentage value**
|
||||
- See whether the **millimeter value** approaches one of the **snap values**
|
||||
- If so, use the snap value (in millimeter) as provided by one of the **snap values**
|
||||
- If not, use the **millimeter value** as-is
|
||||
|
||||
If you're head's spinning, here's an image that will hopefully clarify things a bit:
|
||||
|
||||
|
||||
|
||||
The gradient box represents the range of any given measurement,
|
||||
The gradient box represents the range of any given measurement,
|
||||
from dolls all the way on the left, to giants all the way on the right.
|
||||
The sort of middle green-colored region is what the designer had in mind
|
||||
The sort of middle green-colored region is what the designer had in mind
|
||||
when designing the pattern, and they have set up snap values -- marked by
|
||||
a red dot -- for values that they feel make sense.
|
||||
|
||||
The region of influence of any given snap point will extend 50% towards its
|
||||
neighbor on both sides (indicated by the dashed lines).This means that the
|
||||
region of snap points is continuous, once you're in, you're going to be
|
||||
The region of influence of any given snap point will extend 50% towards its
|
||||
neighbor on both sides (indicated by the dashed lines).This means that the
|
||||
region of snap points is continuous, once you're in, you're going to be
|
||||
snapped to one of the snap points.
|
||||
|
||||
However, when you venture out into the area where the designer did not
|
||||
However, when you venture out into the area where the designer did not
|
||||
configure any snap points, the absolute value will be used as-is, without
|
||||
snapping, just as it would in a normal percentage option.
|
||||
|
||||
This system results in the best of both worlds:
|
||||
|
||||
- Things like elastic widths and so on can be configured to be fixed values,
|
||||
of common elastic widths for example
|
||||
- The absolute value will still scale up and down, but will snap to the closest
|
||||
fixed value when appropriate.
|
||||
- When the input measurements go somewhere the designer did not anticipate,
|
||||
the option will just behave as a regular percentage option
|
||||
- Things like elastic widths and so on can be configured to be fixed values,
|
||||
of common elastic widths for example
|
||||
- The absolute value will still scale up and down, but will snap to the closest
|
||||
fixed value when appropriate.
|
||||
- When the input measurements go somewhere the designer did not anticipate,
|
||||
the option will just behave as a regular percentage option
|
||||
|
||||
## Using snapped percentage options in your pattern code
|
||||
|
||||
This is all well and good, but how do you use this?
|
||||
|
||||
Well, just like you can get the `options` object from our shorthand call,
|
||||
you can now get the `absoluteOptions` object that holds absolute values
|
||||
Well, just like you can get the `options` object from our shorthand call,
|
||||
you can now get the `absoluteOptions` object that holds absolute values
|
||||
for those options with snaps configured.
|
||||
|
||||
In our paco example, what used to be:
|
||||
|
|
@ -229,15 +229,18 @@ store.set('ankleElastic', absoluteOptions.ankleElastic)
|
|||
|
||||
<Note>
|
||||
|
||||
There's really no added value in setting this in the store as `absoluteOptions`
|
||||
There's really no added value in setting this in the store as `absoluteOptions`
|
||||
is available everywhere, but we've changed as little as possible in the example
|
||||
to clarify the difference.
|
||||
|
||||
</Note>
|
||||
|
||||
[fromabs]: /reference/api/config/options/pct/fromabs
|
||||
[toabs]: /reference/api/config/options/pct/toabs
|
||||
[pct]: /reference/api/config/options/pct
|
||||
[list]: /reference/api/config/options/list
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
||||
[toabs]: /reference/api/config/options/pct/toabs
|
||||
|
||||
[pct]: /reference/api/config/options/pct
|
||||
|
||||
[list]: /reference/api/config/options/list
|
||||
|
||||
[hide]: /reference/api/config/options#optionally-hide-options-by-configuring-a-hide-method
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Reporting a percentage option value in millimeter
|
|||
---
|
||||
|
||||
Percentage options are great for parametric desing, but not always
|
||||
very intuitive for the user. For example: Setting the `chestEase`
|
||||
very intuitive for the user. For example: Setting the `chestEase`
|
||||
option to `9%` is not very meaningful unless you happen to know
|
||||
what that percentage is based on.
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ millimeter.
|
|||
|
||||
## Structure
|
||||
|
||||
The `toAbs` property should hold a function with the following
|
||||
The `toAbs` property should hold a function with the following
|
||||
signature:
|
||||
|
||||
```js
|
||||
|
|
@ -24,11 +24,10 @@ function toAbs(percentage, settings) {
|
|||
|
||||
The first parameter is the percentage value provided by the user (for example
|
||||
`0.5` for `50%`).
|
||||
The second parameter is the pattern's run-time configuration
|
||||
The second parameter is the pattern's run-time configuration
|
||||
or [settings](/reference/api/settings) which holds -- among other things -- the
|
||||
measurements provided by the user.
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
In our example above, let's say that the `chestEase` option is
|
||||
|
|
@ -46,7 +45,7 @@ chestEase: {
|
|||
}
|
||||
```
|
||||
|
||||
With object destructuring and fat-arrow notation,
|
||||
With object destructuring and fat-arrow notation,
|
||||
you can write it a bit terser like this:
|
||||
|
||||
```js
|
||||
|
|
@ -55,10 +54,10 @@ toAbs: (val, { measurements }) => measurements.chest * val
|
|||
|
||||
## Using pctBasedOn for simple measurement fractions
|
||||
|
||||
Many percentage options represent a simple fraction of a measurement
|
||||
Many percentage options represent a simple fraction of a measurement
|
||||
(chest circumference in the example above).
|
||||
|
||||
As this scenario is so common, `@freesewing/core` exports a `pctBasedOn` method
|
||||
As this scenario is so common, `@freesewing/core` exports a `pctBasedOn` method
|
||||
that will do the work for you:
|
||||
|
||||
```js
|
||||
|
|
@ -81,8 +80,7 @@ const config = {
|
|||
```
|
||||
|
||||
This will not only add an `toAbs()` method to your option -- one that will return
|
||||
the value in millimeter of whatever percentage the option is set to -- it will
|
||||
the value in millimeter of whatever percentage the option is set to -- it will
|
||||
also add a `fromAbs()` method that does the inverse: return the percentage of
|
||||
any millimeter value passed into it. See [Setting a value in millimeter as a
|
||||
any millimeter value passed into it. See [Setting a value in millimeter as a
|
||||
percentage option](/api/config/options/pct/fromabs) for details.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue