wip(dev): Updating tutorial for v3

2023-09-29 19:41:24 +02:00 · 2023-09-29 19:41:24 +02:00 · b5e1554e4f
commit b5e1554e4f
parent 2bb3dfc333
32 changed files with 657 additions and 282 deletions
--- a/markdown/dev/tutorials/pattern-design/part2/adding-options/en.md
+++ b/markdown/dev/tutorials/pattern-design/part2/adding-options/en.md
@ -0,0 +1,125 @@
+---
+title: Adding options
+order: 140
+---
+
+I have shown what our bib should look like, and added the _head_ measurement
+to work with. But there's still a number of choices I have to make:
+
+- How large should the neck opening be?
+- How wide should the bib be?
+- How long should the bib be?
+
+I could make all of these choices for the user and set them in stone, so to speak.
+
+But since the pattern I am designing is code, it is trivial (and _IMHO_ very satisfying) 
+to make a pattern flexible and let the user choose.
+All I need to do to give control to the user is add _options_ to the part.
+
+## Add the neckRatio option
+
+The first option I will add controls the ratio between the neck opening
+and the head circumference. Let's call it `neckRatio`.
+
+For this, I will add the `options` property to our `bib` object:
+
+```design/src/bib.mjs
+function draftBib({ part }) => {
+  return part
+}
+
+export const bib = {
+  name: 'tutorial.bib',
+  draft: draftBib,
+  measurements: [ 'head' ],
+  // highlight-start
+  options: {
+    neckRatio: { 
+      pct: 80, 
+      min: 70, 
+      max: 90, 
+      menu: 'fit'
+    },
+  },
+  // highlight-end
+}
+```
+
+Can you guess what it means?
+
+- We've added the `options` property to our `bib` object
+- On the `options` property, we have added `neckRatio` which holds the configuration for our option
+- It is a `pct` option -- whcih means it's a percentage
+- Its default value is 90%
+- Its minimum value is 70%
+- Its maximum value is 90%
+
+There are different types of options, but percentages are by far the most common ones.
+They are all documented [in the part reference docs](/reference/api/part/config/options).
+
+<Note>
+
+##### What is `menu` and why should you care?
+
+The `menu` property on our option is *extra*. 
+It will be ignored by FreeSewing's core library and if we leave it out, our design will produce the same result.
+
+Instead, this `menu` property is there for the benefit FreeSewing's development
+environment which will use this to build a menu structure for the various
+options.
+
+Each option type has a number of required properties. But in addition to that,
+you can add more to facilitate integrating with a front-end or other user
+interface.
+
+You will see that after adding this option, the development environment will
+have a `fit` section under **Design Options**. This `menu` property is where
+that is based on.
+
+</Note>
+
+## Add the widthRatio and lengthRatio options
+
+Let's do something similar for the width and length of our bib:
+
+```design/src/bib.mjs
+function draftBib({ part }) => {
+  return part
+}
+
+export const bib = {
+  name: 'tutorial.bib',
+  draft: draftBib,
+  measurements: [ 'head' ],
+  options: {
+    neckRatio: { 
+      pct: 80, 
+      min: 70, 
+      max: 90, 
+      menu: 'fit'
+    },
+  // highlight-start
+    widthRatio: { 
+      pct: 45, 
+      min: 35, 
+      max: 55, 
+      menu: 'style' 
+    },
+    lengthRatio: { 
+      pct: 75, 
+      min: 55, 
+      max: 85, 
+      menu: 'style' 
+    },
+  // highlight-end
+  },
+}
+```
+
+This pretty much the exact same thing, except that are placing this in the `style` menu.
+
+Later, I will test-drive our pattern to see how it behaves when we adapt the options
+between their minimum and maximum values. At that time, I may need to tweak these values.
+
+With that out of the way, I will start drawing the bib.
+