VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(markdown): Work on updating tutorial

Browse source
This commit is contained in:
Joost De Cock 2022-10-09 23:47:32 +02:00
parent b9a46e9763
commit 8e7595fcb4
8 changed files with 318 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

62
markdown/dev/tutorials/pattern-design/adding-options/en.md
View file

@ -13,22 +13,30 @@ to work with. But there's still a number of choices you have to make:
You can make all of these choices for the user and set them in stone, so to speak.
But since you're designing a pattern in code, it's trivial to make your pattern
flexible and let the user decide. All you have to do is add options to your pattern.
flexible and let the user decide. All you have to do is add options to your part.
## Add the neckRatio option
The first option we're going to add controls the ratio between the neck opening
and the head circumference. Let's call it `neckRatio`.
Open the config file at `design/config.js` and add this to the options:
We'll add a new `options` key to our part object for this:
```js
```design/src/bib.mjs
function draftBib({ part }) {
return part
}
export const bib = {
name: 'tutorial.bib',
draft: draftBib,
measurements: ['head'],
// Add these 3 lines:
options: {
// Remove this size option
//size: { pct: 50, min: 10, max: 100 }
// And add the neckRatio options
neckRatio: { pct: 80, min: 70, max: 90 },
}
neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' },
},
}
```
Can you guess what it means?
@ -37,49 +45,39 @@ Can you guess what it means?
- Its minimum value is 70%
- Its maximum value is 90%
- Its default value is 80%
- We've added this option to the *fit* menu
<Note>
There are different types of options, but percentages are the most common ones.
They are all documented [in the API docs](/reference/api/config/options).
They are all documented [in the part reference docs](/reference/api/part/config/options).
</Note>
## Add the widthRatio and lengthRatio options
Let's do something similar for the width and length of our bib:
```js
```design/src/bib.mjs
options: {
neckRatio: { pct: 80, min: 70, max: 90 },
widthRatio: { pct: 45, min: 35, max: 55 },
lengthRatio: { pct: 75, min: 55, max: 85 },
neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' },
widthRatio: { pct: 45, min: 35, max: 55, menu: 'style' },
lengthRatio: { pct: 75, min: 55, max: 85, menu: 'style' },
}
```
- You've added `widthRatio` and `lengthRatio` options
- You've given all options sensible defaults
- You've given all options sensible maximum and minimum boundaries
<Note>
- You've added these two new options to the *style* menu
Later, you'll test-drive your pattern to see how it behaves when you adapt the options
between their minimum and maximum values. At that time, you can still tweak these values.
</Note>
With that out of the way, let's start drawing our bib.
Before you close the `design/config.js` file, make sure to update the `optionGroups` entry as follows:
## Notes
```js
optionGroups: {
fit: ["neckRatio", "widthRatio", "lengthRatio"]
},
```
<Note>
The `optionGroups` entry does not do anything for your pattern as such.
Instead it signals to the frontend that this is how options should be grouped together and presented to the user.
</Note>
Because you have removed the `box` option, the pattern no longer draws a box.
So let's start drawing your bib instead.
The `menu` key on an option does not do anything for your pattern as such.
Instead it signals to the frontend that this is how options should be grouped
together and presented to the user.