chore(markdown): Linting of dev docs
This commit is contained in:
parent
1d8beedd44
commit
265ad404da
317 changed files with 1281 additions and 1503 deletions
|
@ -14,6 +14,7 @@ This Code of Conduct is an almost verbatim copy of the [Contributor Covenant][ho
|
|||
available at [http://contributor-covenant.org/version/2/0][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
|
||||
[version]: http://contributor-covenant.org/version/2/0/
|
||||
|
||||
</Note>
|
||||
|
|
|
@ -4,10 +4,12 @@ order: 10
|
|||
---
|
||||
|
||||
##### Community Impact
|
||||
|
||||
Use of inappropriate language or other behavior
|
||||
deemed unprofessional or unwelcome in the community.
|
||||
|
||||
##### Consequence
|
||||
|
||||
A private, written warning from community leaders,
|
||||
providing clarity around the nature of the violation and an
|
||||
explanation of why the behavior was inappropriate.
|
||||
|
|
|
@ -4,10 +4,12 @@ order: 40
|
|||
---
|
||||
|
||||
##### Community Impact
|
||||
|
||||
Demonstrating a pattern of violation of
|
||||
community standards, including sustained inappropriate behavior,
|
||||
harassment of an individual, or aggression toward or
|
||||
disparagement of classes of individuals.
|
||||
|
||||
##### Consequence
|
||||
|
||||
A permanent ban from any sort of public interaction within the community.
|
||||
|
|
|
@ -4,10 +4,12 @@ order: 30
|
|||
---
|
||||
|
||||
##### Community Impact
|
||||
|
||||
A serious violation of community standards,
|
||||
including sustained inappropriate behavior.
|
||||
|
||||
##### Consequence
|
||||
|
||||
A temporary ban from any sort of interaction or
|
||||
public communication with the community for a specified period
|
||||
of time.
|
||||
|
@ -17,4 +19,3 @@ involved, including unsolicited interaction with those enforcing
|
|||
the Code of Conduct, is allowed during this period.
|
||||
|
||||
Violating these terms may lead to a permanent ban.
|
||||
|
||||
|
|
|
@ -4,10 +4,12 @@ order: 20
|
|||
---
|
||||
|
||||
##### Community Impact
|
||||
|
||||
A violation through a single incident or series of actions.
|
||||
|
||||
##### Consequence
|
||||
A warning with consequences for continued behavior.
|
||||
|
||||
A warning with consequences for continued behavior.\
|
||||
No interaction with the people involved, including unsolicited
|
||||
interaction with those enforcing the Code of Conduct, for a
|
||||
specified period of time. This includes avoiding interactions
|
||||
|
|
|
@ -6,11 +6,10 @@ order: 50
|
|||
Instances of abusive, harassing, or otherwise unacceptable behavior
|
||||
may be reported to the community leaders responsible for enforcement:
|
||||
|
||||
- Joost De Cock (joost@joost.at)
|
||||
- Sorcha Ní Dhubhghaill (nidhubhs@gmail.com)
|
||||
- Joost De Cock (joost@joost.at)
|
||||
- Sorcha Ní Dhubhghaill (nidhubhs@gmail.com)
|
||||
|
||||
All complaints will be reviewed and investigated promptly and fairly.
|
||||
|
||||
All community leaders are obligated to respect the privacy and
|
||||
security of the reporter of any incident.
|
||||
|
||||
|
|
|
@ -13,4 +13,3 @@ religion, or sexual identity and orientation.
|
|||
|
||||
We pledge to act and interact in ways that contribute to an open, welcoming,
|
||||
diverse, inclusive, and healthy community.
|
||||
|
||||
|
|
|
@ -5,16 +5,16 @@ order: 20
|
|||
|
||||
Examples of behavior that contributes to a positive environment for our community include:
|
||||
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
|
||||
- Focusing on what is best not just for us as individuals, but for the overall community
|
||||
- Demonstrating empathy and kindness toward other people
|
||||
- Being respectful of differing opinions, viewpoints, and experiences
|
||||
- Giving and gracefully accepting constructive feedback
|
||||
- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
|
||||
- Focusing on what is best not just for us as individuals, but for the overall community
|
||||
|
||||
Examples of unacceptable behavior include:
|
||||
|
||||
- The use of sexualized language or imagery, and sexual attention or advances of any kind
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others’ private information, such as a physical or email address, without their explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
- The use of sexualized language or imagery, and sexual attention or advances of any kind
|
||||
- Trolling, insulting or derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others’ private information, such as a physical or email address, without their explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
|
|
@ -9,4 +9,3 @@ when an individual is officially representing the FreeSewing community in public
|
|||
Examples of representing our community include using an official e-mail address,
|
||||
posting via an official social media account, or acting as an appointed representative
|
||||
at an online or offline event.
|
||||
|
||||
|
|
|
@ -10,10 +10,10 @@ documentation can help you find your feet, and figure out what goes where.
|
|||
|
||||
Our documentation is divided into four different types:
|
||||
|
||||
- [**Tutorials**](/tutorials) are lessons that lead you through a series of steps to complete a project.
|
||||
- [**Guides**](/guides) tell a story to further your understanding of a specific topic.
|
||||
- [**Howtos**](/howtos) give you concrete steps to solve a common problem or challenge.
|
||||
- [**Reference**](/reference) holds technical descriptions of the underlying technology and how to make use of it.
|
||||
- [**Tutorials**](/tutorials) are lessons that lead you through a series of steps to complete a project.
|
||||
- [**Guides**](/guides) tell a story to further your understanding of a specific topic.
|
||||
- [**Howtos**](/howtos) give you concrete steps to solve a common problem or challenge.
|
||||
- [**Reference**](/reference) holds technical descriptions of the underlying technology and how to make use of it.
|
||||
|
||||
Each time you write documentation, you have to ask yourself: Is it a tutorial? Is it a Guide?
|
||||
Is it a Howto? Or is it Reference documentation.
|
||||
|
@ -24,13 +24,11 @@ where your documentation should go based on what it's trying to accomplish:
|
|||

|
||||
|
||||
|
||||
- Write a **Tutorial** is your aim is to help people learn the platform
|
||||
- Write a **Guide** if your aim is to further people's understanding of a topic by going a bit deeper
|
||||
- Write a **Howto** if your ain is to help people accomplish a task
|
||||
- Write **Reference** documentation to detail how things work under the hood
|
||||
- Refer people to **Discord or Github** for things that are not (yet) covered in our documentation
|
||||
|
||||
- Write a **Tutorial** is your aim is to help people learn the platform
|
||||
- Write a **Guide** if your aim is to further people's understanding of a topic by going a bit deeper
|
||||
- Write a **Howto** if your ain is to help people accomplish a task
|
||||
- Write **Reference** documentation to detail how things work under the hood
|
||||
- Refer people to **Discord or Github** for things that are not (yet) covered in our documentation
|
||||
|
||||
<Note>
|
||||
|
||||
|
@ -41,4 +39,3 @@ on [this talk by Daniele Procida](https://www.youtube.com/watch?v=t4vKPhjcMZg) a
|
|||
PyCon AU 2017.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -5,7 +5,6 @@ order: zbb
|
|||
|
||||
You can find a list of all FreeSewing guides below:
|
||||
|
||||
|
||||
<ReadMore recurse />
|
||||
|
||||
<Related>
|
||||
|
@ -20,4 +19,3 @@ guides take more time to explain in-depth what is being done and why.
|
|||
For more details, refer to [How we structure our documentation](/guides/docs).
|
||||
|
||||
</Related>
|
||||
|
||||
|
|
|
@ -38,14 +38,11 @@ let me = 'you'
|
|||
|
||||
The following language codes are supported:
|
||||
|
||||
- `js` for Javascript code
|
||||
- `markdown` for Markdown
|
||||
- `html` for HTML
|
||||
- `svg` for SVG
|
||||
- `bash` for Bash or shell scripts
|
||||
- `mdx` for MDX
|
||||
- `jsx` for JSX
|
||||
- `json` for JSON
|
||||
|
||||
|
||||
|
||||
- `js` for Javascript code
|
||||
- `markdown` for Markdown
|
||||
- `html` for HTML
|
||||
- `svg` for SVG
|
||||
- `bash` for Bash or shell scripts
|
||||
- `mdx` for MDX
|
||||
- `jsx` for JSX
|
||||
- `json` for JSON
|
||||
|
|
|
@ -3,7 +3,7 @@ title: Custom components
|
|||
order: 90
|
||||
---
|
||||
|
||||
The way we render markdown on our websites is through the use of [MDX](https://mdxjs.com/).
|
||||
The way we render markdown on our websites is through the use of [MDX](https://mdxjs.com/).\
|
||||
This allows us to extend Markdown with our own so-called *custom components*.
|
||||
|
||||
Such custom components allow us to put things in Markdown content that would
|
||||
|
@ -42,7 +42,6 @@ The **Comment** component requires a `by` attribute that lists the author of the
|
|||
<Comment by="joost">**Do** try this at home</Comment>
|
||||
```
|
||||
|
||||
|
||||
## Fixme
|
||||
|
||||
<Fixme>
|
||||
|
@ -62,7 +61,6 @@ or can't fix it now.
|
|||
</Fixme>
|
||||
```
|
||||
|
||||
|
||||
## Note
|
||||
|
||||
<Note>
|
||||
|
@ -91,6 +89,7 @@ It's typically used on overview pages, such as out [markdown guide](/guides/mark
|
|||
It won't show anything on this page, since this page has not child-pages.
|
||||
|
||||
## Related
|
||||
|
||||
<Related>
|
||||
This snippet is provided by [the buttons plugin](/reference/plugins/buttons)
|
||||
</Related>
|
||||
|
@ -104,6 +103,7 @@ Use **Related** to add something that is relevant to the current topic.
|
|||
```
|
||||
|
||||
## Tip
|
||||
|
||||
<Tip>
|
||||
Comparing yourself to others is the fastest way to become unhappy
|
||||
</Tip>
|
||||
|
@ -117,6 +117,7 @@ Use **Tip** for, you know, tips.
|
|||
```
|
||||
|
||||
## Warning
|
||||
|
||||
<Warning>
|
||||
##### Please make a backup
|
||||
Following these instructions will remove all your data
|
||||
|
@ -150,6 +151,3 @@ Embed a playlist:
|
|||
```md
|
||||
<YouTube id='PL1gv5yv3DoZOFSXz7yydeV1H8m6pfwstn' playlist />
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,4 +26,3 @@ In this guide, we'll look at the following topics:
|
|||
|
||||
This will be enough to get you started. If you'd like to learn more,
|
||||
visit [markdownguide.org](https://www.markdownguide.org/).
|
||||
|
||||
|
|
|
@ -43,12 +43,13 @@ See first list item for an example.
|
|||
### Lining within the same website
|
||||
|
||||
When you are linking within freesewing.dev or freesewing.org you can use a relative link from
|
||||
the site root.
|
||||
the site root.\
|
||||
Use:
|
||||
|
||||
```text
|
||||
/guides/markdown/frequent-mistakes
|
||||
```
|
||||
|
||||
instead of
|
||||
|
||||
```text
|
||||
|
@ -111,7 +112,6 @@ sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
|
|||
If you're using any markdown syntax within a custom component you want to also
|
||||
leave an empty line at the start and end of your component.
|
||||
|
||||
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet,
|
||||
|
||||
|
@ -125,11 +125,7 @@ sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
|
|||
```
|
||||
|
||||
## Don't be shy to ask a friend
|
||||
|
||||
Learning a new language can be intimidating, whether its Javascript, Norse or
|
||||
Markdown but everyone in the Freesewing community is glad you're here and
|
||||
helping us make the site even more awesome.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -25,4 +25,3 @@ text where you are including the image. That way, you just need to specify
|
|||
the image name, and not the path to its location.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -7,10 +7,11 @@ order: 30
|
|||
You can make text *italic* or **bold**
|
||||
by wrapping it in 1 or 2 asterisk respectively.
|
||||
```
|
||||
|
||||
You can make text *italic* or **bold** by wrapping it in 1 or 2 asterisk respectively:
|
||||
|
||||
```md
|
||||
Alternatively, you can also use underscores to mark _italic_ or __bold__.
|
||||
```
|
||||
Alternatively, you can also use underscores to mark _italic_ or __bold__.
|
||||
|
||||
Alternatively, you can also use underscores to mark *italic* or **bold**.
|
||||
|
|
|
@ -11,6 +11,5 @@ Like
|
|||
this.
|
||||
```
|
||||
|
||||
Like
|
||||
Like\
|
||||
this.
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@ Links combine square brackets for the link text with round brackets for the dest
|
|||
```md
|
||||
[Like this](https://freesewing.org)
|
||||
```
|
||||
|
||||
[Like this](https://freesewing.org)
|
||||
|
||||
An alternative notation allows you to include the links as such:
|
||||
|
@ -22,6 +23,7 @@ See [the reference documentation][1] on [freesewing.dev][2]
|
|||
See [the reference documentation][1] on [freesewing.dev][2]
|
||||
|
||||
[1]: https://freesewing.dev/reference
|
||||
|
||||
[2]: https://freesewing.dev/reference
|
||||
|
||||
You don't have to use numbers, but can also use named references.
|
||||
|
@ -35,4 +37,3 @@ We moved the markdown content to [our monorepo][monorepo]
|
|||
We moved the markdown content to [our monorepo][monorepo]
|
||||
|
||||
[monorepo]: https://github.com/freesewing/freesewing
|
||||
|
||||
|
|
|
@ -12,10 +12,10 @@ To make a list, just do as you would in plain text:
|
|||
- item
|
||||
```
|
||||
|
||||
- a bullet
|
||||
- list
|
||||
- a sublist
|
||||
- item
|
||||
- a bullet
|
||||
- list
|
||||
- a sublist
|
||||
- item
|
||||
|
||||
If you want an numbered list, just write numbers.
|
||||
They don't even have to be the correct numbers:
|
||||
|
@ -27,7 +27,6 @@ They don't even have to be the correct numbers:
|
|||
2. Item 3
|
||||
```
|
||||
|
||||
1. Item 1
|
||||
2. Item 2
|
||||
2. Item 3
|
||||
|
||||
1. Item 1
|
||||
2. Item 2
|
||||
3. Item 3
|
||||
|
|
|
@ -5,7 +5,6 @@ order: 70
|
|||
|
||||
If you need them, you can create tables too, using a structure as shown below:
|
||||
|
||||
|
||||
```md
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
|
@ -35,4 +34,3 @@ You can change the alignment of the columns by using a colon (`:`) on the line b
|
|||
| Compound | A substance composed of two or more elements. Chemically combined in definite proportions by weight |
|
||||
| Mixture | Two or more substances that are not chemically united, such as air |
|
||||
| Solution | A uniform mixture of varying proportions of a solvent and a solute |
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ You can just start writing.
|
|||
|
||||
An empty line starts a new paragraph.
|
||||
```
|
||||
|
||||
You can just start writing.
|
||||
|
||||
An empty line starts a new paragraph.
|
||||
|
||||
|
|
|
@ -12,9 +12,9 @@ The pattern configuration holds important information about the pattern
|
|||
A pattern's [configuration](/reference/config/) is created by the pattern designer
|
||||
and details a number of important things about the pattern, like:
|
||||
|
||||
- The **measurements** that are required to draft the pattern
|
||||
- The different **parts** in the pattern and how they depend on each other
|
||||
- The different **options** that are available to tweak the pattern
|
||||
- The **measurements** that are required to draft the pattern
|
||||
- The different **parts** in the pattern and how they depend on each other
|
||||
- The different **options** that are available to tweak the pattern
|
||||
|
||||
The configuration is part of the pattern's code. It is created by the designer and
|
||||
it is the same for everybody using the pattern.
|
||||
|
|
|
@ -17,9 +17,9 @@ A schematic overview of FreeSewing
|
|||
|
||||
If we look at our image, it can be divided into three areas:
|
||||
|
||||
- The left area with the **settings** box
|
||||
- The middle area with the **Pattern** box and everything in it
|
||||
- The right area with the **draft** box and the *SVG* and *React* logos
|
||||
- The left area with the **settings** box
|
||||
- The middle area with the **Pattern** box and everything in it
|
||||
- The right area with the **draft** box and the *SVG* and *React* logos
|
||||
|
||||
Let's take a closer look at everything that is contained within our central **Pattern** box:
|
||||
|
||||
|
@ -34,5 +34,3 @@ application.
|
|||
That part is outside the scope of this guide.
|
||||
|
||||
</Note>
|
||||
|
||||
|
||||
|
|
|
@ -16,4 +16,3 @@ If you then wanted to make a long-sleeved version of your T-shirt pattern, you o
|
|||
a new sleeve part. You can re-use the `front` and `back` parts of your short-sleeved T-shirt pattern, as they did not change.
|
||||
|
||||
When developing a FreeSewing pattern, you will spend most of your time designing the individual parts.
|
||||
|
||||
|
|
|
@ -12,10 +12,10 @@ Paths are the lines and curves that make up your pattern.
|
|||
They are made up of a set of drawing operations that together make up the path.
|
||||
FreeSewing supports the following types of drawing operations:
|
||||
|
||||
- The **move** operation moves our virtual pen but does not draw anything.
|
||||
- The **line** operation draws a straight line
|
||||
- The **curve** operation draws a [Bézier curve](/guides/overview/about/beziercurves/)
|
||||
- The **close** operation closes the path
|
||||
- The **move** operation moves our virtual pen but does not draw anything.
|
||||
- The **line** operation draws a straight line
|
||||
- The **curve** operation draws a [Bézier curve](/guides/overview/about/beziercurves/)
|
||||
- The **close** operation closes the path
|
||||
|
||||
To crucial thing to keep in mind is that, with the exception of the **move** operation,
|
||||
all drawing operations start from wherever you are currently on your virtual sheet of paper.
|
||||
|
@ -39,4 +39,3 @@ Our example image (which, if you hadn't realized was created with FreeSewing) ha
|
|||
paths in it. Each box, the arrows, the lines in the React logo, and so on.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -17,4 +17,3 @@ input and will return a new instance of your pattern.
|
|||
That pattern instance will have a `draft()` method which will do the actual work of
|
||||
drafting the pattern. Once drafted, you can either call the `render()` method on
|
||||
the pattern instance, or pass it to [our React component](/packages/components) to render it in the browser.
|
||||
|
||||
|
|
|
@ -16,8 +16,8 @@ FreeSewing pattern, and their role is to store coordinates.
|
|||
|
||||
Each point must have:
|
||||
|
||||
- A **X-coordinate**
|
||||
- A **Y-coordinate**
|
||||
- A **X-coordinate**
|
||||
- A **Y-coordinate**
|
||||
|
||||
Together, these coordinates determine the location of the point in the 2-dimensional plane we're drawing on.
|
||||
|
||||
|
@ -35,4 +35,3 @@ Our example image (which, if you hadn't realized was created with FreeSewing) ha
|
|||
points in it. The corners of the boxes, the location where the text goes, and so on.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -12,8 +12,8 @@ They are typically used for things like logos or buttons.
|
|||
|
||||
Each snippet must have:
|
||||
|
||||
- An anchor point that determine where the snippet will be located
|
||||
- The name of the snippet to insert
|
||||
- An anchor point that determine where the snippet will be located
|
||||
- The name of the snippet to insert
|
||||
|
||||
Since our example image does not have any snippets in it, here's another example
|
||||
of a `button`, `buttonhole`, and `logo` snippet added to a FreeSewing pattern:
|
||||
|
@ -21,4 +21,3 @@ of a `button`, `buttonhole`, and `logo` snippet added to a FreeSewing pattern:
|
|||
<Example part="snippet">
|
||||
An example of the use of snippets
|
||||
</Example>
|
||||
|
||||
|
|
|
@ -11,4 +11,3 @@ The store provides key-value storage that is shared across your pattern.
|
|||
|
||||
If you have some information in one part that you want to make available
|
||||
outside that part (in another part) you can save it to the store.
|
||||
|
||||
|
|
|
@ -20,6 +20,7 @@ const condition = settings => {
|
|||
else return false // Do not load the plugin
|
||||
}
|
||||
```
|
||||
|
||||
You pass your plugin and condition method as a third parameter to the Design constructor
|
||||
with the `plugin` and `condition` keys respectively.
|
||||
|
||||
|
@ -50,10 +51,10 @@ const Pattern = new freesewing.Design(
|
|||
|
||||
Our condition method will return `true` only if the following conditions are met:
|
||||
|
||||
- A `settings` object is passed into the method
|
||||
- `settings.options` is _truthy_
|
||||
- `settings.options.draftForHighBust` is _truthy_
|
||||
- `settings.options.measurements.highBust` is _truthy_
|
||||
- A `settings` object is passed into the method
|
||||
- `settings.options` is *truthy*
|
||||
- `settings.options.draftForHighBust` is *truthy*
|
||||
- `settings.options.measurements.highBust` is *truthy*
|
||||
|
||||
This is a real-world example from our Teagan pattern. A t-shirt pattern that can be
|
||||
drafted to the high bust (rather than the full chest circumference) if the user
|
||||
|
@ -62,4 +63,3 @@ choses so.
|
|||
But that feat is handled auto-magically by `plugin-bust` which is a build-time plugin.
|
||||
So whether to load this plugin or not hinges on the user settings, which is why we
|
||||
load this plugin conditionally.
|
||||
|
||||
|
|
|
@ -5,17 +5,16 @@ order: 60
|
|||
|
||||
A **hook** is a lifecycle event. The available hooks are:
|
||||
|
||||
- [preRender](/reference/hooks/prerender/): Called at the start of [`Pattern.render()`](/reference/api/pattern#render)
|
||||
- [postRender](/reference/hooks/postrender/): Called at the end of [`Pattern.render()`](/reference/api/pattern#render)
|
||||
- [insertText](/reference/hooks/inserttext/): Called when inserting text
|
||||
- [preDraft](/reference/hooks/predraft/): Called at the start of [`Pattern.draft()`](/reference/api/pattern#draft)
|
||||
- [postDraft](/reference/hooks/postdraft/): Called at the end of [`Pattern.draft()`](/reference/api/pattern#draft)
|
||||
- [preSample](/reference/hooks/presample/): Called at the start of [`Pattern.sample()`](/reference/api/pattern#sample)
|
||||
- [postSample](/reference/hooks/postsample/): Called at the end of [`Pattern.sample()`](/reference/api/pattern#sample)
|
||||
- [preRender](/reference/hooks/prerender/): Called at the start of [`Pattern.render()`](/reference/api/pattern#render)
|
||||
- [postRender](/reference/hooks/postrender/): Called at the end of [`Pattern.render()`](/reference/api/pattern#render)
|
||||
- [insertText](/reference/hooks/inserttext/): Called when inserting text
|
||||
- [preDraft](/reference/hooks/predraft/): Called at the start of [`Pattern.draft()`](/reference/api/pattern#draft)
|
||||
- [postDraft](/reference/hooks/postdraft/): Called at the end of [`Pattern.draft()`](/reference/api/pattern#draft)
|
||||
- [preSample](/reference/hooks/presample/): Called at the start of [`Pattern.sample()`](/reference/api/pattern#sample)
|
||||
- [postSample](/reference/hooks/postsample/): Called at the end of [`Pattern.sample()`](/reference/api/pattern#sample)
|
||||
|
||||
You can register a method for a hook. When the hook is triggered, your method will be
|
||||
called. It will receive two parameters:
|
||||
|
||||
- An object relevant to the hook. See the [hooks API reference](/reference/hooks/) for details.
|
||||
- Data passed when the hook was registered (optional)
|
||||
|
||||
- An object relevant to the hook. See the [hooks API reference](/reference/hooks/) for details.
|
||||
- Data passed when the hook was registered (optional)
|
||||
|
|
|
@ -24,4 +24,3 @@ import config from "../config"
|
|||
|
||||
const Pattern = new freesewing.Design(config, [plugins, gorePlugin] )
|
||||
```
|
||||
|
||||
|
|
|
@ -22,5 +22,3 @@ const myAaron = new Aaron()
|
|||
Plugins that use only hooks are typically run-time plugins
|
||||
|
||||
</Tip>
|
||||
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@ order: 90
|
|||
|
||||
Plugin structure for macros is similar, with a few changes:
|
||||
|
||||
- Rather than the hook name, you provide the macro name (that you choose yourself)
|
||||
- The context (`this`) of a macro method is **always** a [Part](/reference/api/part) object.
|
||||
- Rather than the hook name, you provide the macro name (that you choose yourself)
|
||||
- The context (`this`) of a macro method is **always** a [Part](/reference/api/part) object.
|
||||
|
||||
Apart from these, the structure is very similar:
|
||||
|
||||
|
@ -61,4 +61,3 @@ to a macro needs to be contained in a single argument.
|
|||
Typically, you use a single plain object to configure the macro.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@ order: 50
|
|||
|
||||
Plugins can do two things:
|
||||
|
||||
- They can use hooks
|
||||
- They can provide macros
|
||||
- They can use hooks
|
||||
- They can provide macros
|
||||
|
||||
Your plugin should export an object with the following structure:
|
||||
|
||||
|
@ -22,4 +22,3 @@ Your plugin should export an object with the following structure:
|
|||
The `name` and `version` attributes are self-explanatory.
|
||||
The [hooks](/guides/plugins/hooks/) and [macros](/guides/plugins/macros/) sections
|
||||
explain the `hooks` and `macros` properties.
|
||||
|
||||
|
|
|
@ -5,8 +5,8 @@ order: 10
|
|||
|
||||
Plugins come in two flavours:
|
||||
|
||||
- [Build-time plugins](#build-time-plugins)
|
||||
- [Run-time plugins](#run-time-plugins)
|
||||
- [Build-time plugins](#build-time-plugins)
|
||||
- [Run-time plugins](#run-time-plugins)
|
||||
|
||||
When writing a plugin, ask yourself whether it's a run-time or a build-time plugin.
|
||||
And if the answer is both, please split them into two plugins.
|
||||
|
@ -25,14 +25,12 @@ Our [plugin bundle](/reference/plugins/bundle/) bundles build-time plugins that
|
|||
|
||||
<Note>Plugins that provide a macro are typically build-time plugins</Note>
|
||||
|
||||
|
||||
## Run-time plugins
|
||||
|
||||
A plugin is a run-time plugin if it can be added after instantiating your pattern.
|
||||
Think of it as a plugin to be used in the front-end.
|
||||
|
||||
Run-time plugins are not a dependecy of the pattern. They just _add something_ to it.
|
||||
Run-time plugins are not a dependecy of the pattern. They just *add something* to it.
|
||||
|
||||
Our [theme plugin](/reference/plugins/theme/) is a good example of a run-time plugin.
|
||||
If it's missing, your pattern will still work, it just won't look pretty.
|
||||
|
||||
|
|
|
@ -17,4 +17,3 @@ pattern.on('preRender', function(svg) {
|
|||
```
|
||||
|
||||
Congratulations, you've just made your pattern yellow.
|
||||
|
||||
|
|
|
@ -9,8 +9,8 @@ that as the second object.
|
|||
|
||||
Remember that:
|
||||
|
||||
- The `insertText` hook will receive a locale and string and you should return a string.
|
||||
- All other hooks receive an object. You don't need to return anything, but rather modify the object you receive.
|
||||
- The `insertText` hook will receive a locale and string and you should return a string.
|
||||
- All other hooks receive an object. You don't need to return anything, but rather modify the object you receive.
|
||||
|
||||
Let's look at an example:
|
||||
|
||||
|
@ -39,8 +39,8 @@ export default {
|
|||
|
||||
This is a complete plugin, ready to be published on NPM. It uses two hooks:
|
||||
|
||||
- `preRender` : We add some style and defs to our SVG
|
||||
- `insertText` : We transfer all text to UPPERCASE
|
||||
- `preRender` : We add some style and defs to our SVG
|
||||
- `insertText` : We transfer all text to UPPERCASE
|
||||
|
||||
<Note>
|
||||
|
||||
|
@ -56,4 +56,3 @@ It is good practice to wrap you hook methods in a call like this, because you ha
|
|||
no guarantee the user won't render your pattern more than once.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -12,10 +12,10 @@ popularized their use back in the 1960s.
|
|||
|
||||
In FreeSewing, we use so-called cubic Bézier curves which have:
|
||||
|
||||
- A start point
|
||||
- A first control point that’s linked to the start point
|
||||
- A second control point that’s linked to the end point
|
||||
- An end point
|
||||
- A start point
|
||||
- A first control point that’s linked to the start point
|
||||
- A second control point that’s linked to the end point
|
||||
- An end point
|
||||
|
||||
<Example settings_complete="0" part="path_curve">
|
||||
An example of a Bézier curve drawn by the Path.curve() method
|
||||
|
@ -33,10 +33,8 @@ As long as you intuitively *get* how the control points influence the curve, you
|
|||
|
||||
###### More on Bézier curves
|
||||
|
||||
Wikipedia has a good [introduction to Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).
|
||||
Wikipedia has a good [introduction to Bézier curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).\
|
||||
For a deep-dive into the subject, check out [A Primer on Bézier Curves](https://pomax.github.io/bezierinfo/) by
|
||||
[Pomax](https://github.com/Pomax).
|
||||
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -24,4 +24,3 @@ This is a common point of confusion so keep in mind that the Y-axis may
|
|||
not behave as you would have intuitively expected.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -38,4 +38,3 @@ Few people straddle both worlds, so as you start using FreeSewing, chances are
|
|||
you'll learn a few new things along the way.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -12,4 +12,3 @@ will greatly help you to understand FreeSewing.
|
|||
For example, the coordinate system and the way paths
|
||||
are structured are all related to the SVG drawing system, which is closely related
|
||||
to other 2D drawing technologies such as PostScript or PDF.
|
||||
|
||||
|
|
|
@ -12,5 +12,3 @@ When you write `1`, that’s one mm. When you write `7.8`, that’s 7.8mm.
|
|||
|
||||
While you can use cm or inch on the FreeSewing website, that is merely a layer of
|
||||
abstration on top of the internal units, which are always mm.
|
||||
|
||||
|
||||
|
|
|
@ -27,16 +27,15 @@ Bonus: You'll get an `@freesewing.org` email alias
|
|||
|
||||
</Tip>
|
||||
|
||||
|
||||
## Languages
|
||||
|
||||
We currently support the following five languages:
|
||||
|
||||
- **en** : English
|
||||
- **de** : German
|
||||
- **es** : Spanish
|
||||
- **fr** : French
|
||||
- **nl** : Dutch
|
||||
- **en** : English
|
||||
- **de** : German
|
||||
- **es** : Spanish
|
||||
- **fr** : French
|
||||
- **nl** : Dutch
|
||||
|
||||
<Note>
|
||||
|
||||
|
@ -50,8 +49,8 @@ please [come and talk to us on Discord](https://discord.freesewing.org).
|
|||
|
||||
We use two different tools to manage our translations, depending on the context:
|
||||
|
||||
- Markdown content and code strings in our monorepo are translated within **Crowdin**
|
||||
- Blog and showcase posts are translated within **Strapi**
|
||||
- Markdown content and code strings in our monorepo are translated within **Crowdin**
|
||||
- Blog and showcase posts are translated within **Strapi**
|
||||
|
||||
<Tip>
|
||||
|
||||
|
@ -129,8 +128,6 @@ These will be filled in later with the correct value. For example:
|
|||
|
||||
looks like this in Spanish
|
||||
|
||||
|
||||
```yaml
|
||||
{field} guardado
|
||||
```
|
||||
|
||||
|
|
|
@ -9,7 +9,6 @@ Measurements are stored in `pattern.settings.measurements`.
|
|||
You can pull them out of there with
|
||||
the [shorthand](/howtos/code/shorthand/) call:
|
||||
|
||||
|
||||
```js
|
||||
const { measurements, options } = part.shorthand()
|
||||
|
||||
|
|
|
@ -9,10 +9,8 @@ Options are stored in `pattern.settings.options`.
|
|||
You can pull them out of there with
|
||||
the [shorthand](/howtos/code/shorthand/) call:
|
||||
|
||||
|
||||
```js
|
||||
const { measurements, options } = part.shorthand()
|
||||
|
||||
let sleeveBonus = measurements.shoulderToWrist * (1 + options.sleeveLengthBonus);
|
||||
```
|
||||
|
||||
|
|
|
@ -8,11 +8,11 @@ about: While documentation is good, sometimes you want to add some instructions
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/38d101b0415a4cbf3f9f86e006bd8cb7c43c703b/packages/jaeger/src/front.js#L411)
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/38d101b0415a4cbf3f9f86e006bd8cb7c43c703b/packages/jaeger/src/front.js#L411)
|
||||
|
||||
</Note>
|
||||
|
||||
Adding instructions to your pattern is _just_ a matter of adding text.
|
||||
Adding instructions to your pattern is *just* a matter of adding text.
|
||||
The tricky part is to make sure your text can be translated.
|
||||
|
||||
Below is a rather involved example from Aaron:
|
||||
|
|
|
@ -16,8 +16,8 @@ snippets.logo = new Snippet('logo', points.logoAnchor);
|
|||
|
||||
You can scale and rotate a snippet by setting the `data-scale` and `data-rotate` attributes respectively.
|
||||
|
||||
- **data-scale** : Either a single scale factor, or a set of 2 scale factors for the X and Y axis respectively. See [the SVG scale transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Scale) for details.
|
||||
- **data-rotate**: A rotation in degrees. The center of the rotation will be the snippet's anchor point
|
||||
- **data-scale** : Either a single scale factor, or a set of 2 scale factors for the X and Y axis respectively. See [the SVG scale transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Scale) for details.
|
||||
- **data-rotate**: A rotation in degrees. The center of the rotation will be the snippet's anchor point
|
||||
|
||||
<Tip>
|
||||
|
||||
|
@ -30,4 +30,3 @@ Below is an example of the available snippets, and the use of the `data-scale` a
|
|||
<Example pattern="rendertest" options_only="snippets">
|
||||
Overview of available snippets
|
||||
</Example>
|
||||
|
||||
|
|
|
@ -48,4 +48,3 @@ paths.example = new Path()
|
|||
<Example part="path_attr">
|
||||
Text on a path
|
||||
</Example>
|
||||
|
||||
|
|
|
@ -26,9 +26,9 @@ we need that info to fit the sleevecap to the armhole.
|
|||
|
||||
Now if a user requests to draft only the `sleeve` part, FreeSewing will still draft:
|
||||
|
||||
- First the `base` part
|
||||
- Then the `front` and `back` parts
|
||||
- Finally the `sleeve` part
|
||||
- First the `base` part
|
||||
- Then the `front` and `back` parts
|
||||
- Finally the `sleeve` part
|
||||
|
||||
but it will only render the `sleeve` part, as that's the only thing the user requested.
|
||||
|
||||
|
|
|
@ -15,4 +15,3 @@ In addition, all attributes that have a `data-circle-` prefix will apply to the
|
|||
<Example pattern="rendertest" options_only="circles">
|
||||
Circles
|
||||
</Example>
|
||||
|
||||
|
|
|
@ -8,49 +8,52 @@ about: Shows how to create a variation of a pre-existing design
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/aaron/config/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/config/index.js#L34)
|
||||
- [packages/aaron/src/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/index.js#L2)
|
||||
- [packages/carlita/src/index.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlita/src/index.js#L25)
|
||||
- [packages/aaron/config/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/config/index.js#L34)
|
||||
- [packages/aaron/src/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/index.js#L2)
|
||||
- [packages/carlita/src/index.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlita/src/index.js#L25)
|
||||
|
||||
</Note>
|
||||
|
||||
## Setup
|
||||
|
||||
To be able to extend existing patterns, you will have to access them on your local machine. There are two ways to do this:
|
||||
- add needed dependencies when using `npx create-freesewing-pattern`
|
||||
- create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing)
|
||||
|
||||
- add needed dependencies when using `npx create-freesewing-pattern`
|
||||
- create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing)
|
||||
|
||||
### When using `npx create-freesewing-pattern`
|
||||
|
||||
If you want to use existing patterns when creating your new pattern with `npx create-freesewing-pattern`, you have to install the needed dependencies.
|
||||
Let's say you want to extend Brian.
|
||||
If you want to use existing patterns when creating your new pattern with `npx create-freesewing-pattern`, you have to install the needed dependencies.\
|
||||
Let's say you want to extend Brian.\
|
||||
In your freshly created pattern folder, you now have to run
|
||||
|
||||
```bash
|
||||
npm install --save @freesewing/brian
|
||||
```
|
||||
This will install Brian as a dependency, which you can then access in your pattern (see [examples](/howtos/code/extend-pattern/#examples) below on how to do that).
|
||||
|
||||
This will install Brian as a dependency, which you can then access in your pattern (see [examples](/howtos/code/extend-pattern/#examples) below on how to do that).\
|
||||
This has to be repeated for every new pattern you create.
|
||||
|
||||
<Tip>
|
||||
|
||||
Some packages need more than one dependency. Carlton, for example, is based on Bent, which in turn is based on Brian. You will have to install all dependencies in the way shown above. If something is still missing, error messages will tell you what you still need to install.
|
||||
Some packages need more than one dependency. Carlton, for example, is based on Bent, which in turn is based on Brian. You will have to install all dependencies in the way shown above. If something is still missing, error messages will tell you what you still need to install.
|
||||
|
||||
</Tip>
|
||||
|
||||
### Using the freesewing monorepo
|
||||
|
||||
You can use the power of robots to install the needed dependencies if you work in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing).
|
||||
- First, clone the monorepo (or your fork of it) to your local machine.
|
||||
- Go to the root and run `yarn kickstart`. This will take a while, so grab a coffee and come back later.
|
||||
- Once that is done, edit the file `config/descriptions.yaml` to include the name and description of your new pattern (take care to start the description with `A FreeSewing pattern`).
|
||||
- Create a folder for your new pattern in `packages`.
|
||||
- Run `yarn reconfigure`. This will read the changes in `config/descriptions.yaml` and create the needed files in your new folder.
|
||||
- If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the `develop`-branch of the git-repository: `git checkout -b mycoolnewpattern` (adjust name accordingly).
|
||||
- You can now start the actual pattern design work (i.e. editing and adding `src` and `config` files for your pattern.
|
||||
- For dependencies, configure them in `config/dependencies.yaml`.
|
||||
- Run `yarn reconfigure` again, and the magic will make sure that your `package.json` is updated accordingly.
|
||||
- You can set yourself as an author in `config/exceptions.yaml`, and - you guessed it - run `yarn reconfigure` again.
|
||||
|
||||
- First, clone the monorepo (or your fork of it) to your local machine.
|
||||
- Go to the root and run `yarn kickstart`. This will take a while, so grab a coffee and come back later.
|
||||
- Once that is done, edit the file `config/descriptions.yaml` to include the name and description of your new pattern (take care to start the description with `A FreeSewing pattern`).
|
||||
- Create a folder for your new pattern in `packages`.
|
||||
- Run `yarn reconfigure`. This will read the changes in `config/descriptions.yaml` and create the needed files in your new folder.
|
||||
- If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the `develop`-branch of the git-repository: `git checkout -b mycoolnewpattern` (adjust name accordingly).
|
||||
- You can now start the actual pattern design work (i.e. editing and adding `src` and `config` files for your pattern.
|
||||
- For dependencies, configure them in `config/dependencies.yaml`.
|
||||
- Run `yarn reconfigure` again, and the magic will make sure that your `package.json` is updated accordingly.
|
||||
- You can set yourself as an author in `config/exceptions.yaml`, and - you guessed it - run `yarn reconfigure` again.
|
||||
|
||||
Now you can work on extending existing patterns into something new and exciting. And the best part about using this method is that making a pull request will be much easier once you're done developing your new pattern.
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ about: When you inherit a part, it comes with a bunch of paths. Here'show to hid
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L22)
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L22)
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -8,11 +8,10 @@ about: When you inherit a part, it comes with a bunch of paths. Here'show to rem
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/carlton/src/back.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlton/src/back.js#L62)
|
||||
- [packages/carlton/src/back.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlton/src/back.js#L62)
|
||||
|
||||
</Note>
|
||||
|
||||
|
||||
```js
|
||||
for (let i in paths) delete paths[i]
|
||||
```
|
||||
|
|
|
@ -8,12 +8,11 @@ about: Shows how to share dimensions between similar pattern parts
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/aaron/src/shared.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/shared.js)
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/front.js#L160)
|
||||
- [packages/aaron/src/shared.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/shared.js)
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/front.js#L160)
|
||||
|
||||
</Note>
|
||||
|
||||
|
||||
When you have different pattern parts that look similar -- like the front
|
||||
and back of a garment -- you may find that there's a lot of dimensions
|
||||
shared between them.
|
||||
|
@ -49,8 +48,7 @@ import { dimensions } from './shared'
|
|||
|
||||
<Note>
|
||||
|
||||
Since our shared dimension method is a so-called _named export_ we need to
|
||||
Since our shared dimension method is a so-called *named export* we need to
|
||||
import it with the syntax you see above.
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -8,11 +8,11 @@ about: Shows how to store a seam length so you can true the seam of another part
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L103)
|
||||
- [packages/aaron/src/front.js](https://github.com/freesewing/freesewing/blob/develop/packages/aaron/src/front.js#L103)
|
||||
|
||||
</Note>
|
||||
|
||||
Often when designing patterns, we need to _true a seam_ which means to make sure
|
||||
Often when designing patterns, we need to *true a seam* which means to make sure
|
||||
that two parts that need to be joined together are the same distance.
|
||||
|
||||
The example below is from Aaron and stores the length of the armhole seam:
|
||||
|
@ -27,4 +27,3 @@ The example below is from Aaron and stores the length of the armhole seam:
|
|||
.length()
|
||||
)
|
||||
```
|
||||
|
||||
|
|
|
@ -52,5 +52,3 @@ points.example.attr(
|
|||
|
||||
Whether you're rendering to SVG or React, by using ` ` your spaces
|
||||
will be properly rendered in both environments.
|
||||
|
||||
|
||||
|
|
|
@ -8,12 +8,12 @@ about: Shows how to adapt the length of the sleevecap to fit your armhole
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/bent/src/sleeve.js](https://github.com/freesewing/freesewing/blob/develop/packages/bent/src/sleeve.js)
|
||||
- [packages/bent/src/sleeve.js](https://github.com/freesewing/freesewing/blob/develop/packages/bent/src/sleeve.js)
|
||||
|
||||
</Note>
|
||||
|
||||
Fitting the sleevecap to the armhole means that we need to make sure the length
|
||||
of the seams match.
|
||||
of the seams match.\
|
||||
A similar challenge is to fit the collar to the neck opening and so on.
|
||||
|
||||
For all of these situations where you have to create curved seams with matching
|
||||
|
@ -25,15 +25,15 @@ This pattern is rather common, and we will unpack an example from Bent below.
|
|||
|
||||
Before we dive in, here's a few things to keep in mind:
|
||||
|
||||
- In Javascript, you can create a function within your function and call it
|
||||
- Bent extends Brian which sets both the `frontArmholeLength` and `backArmholeLength` values in the store with the length of those seams
|
||||
- We need to match the length of the sleevecap + sleeve cap ease to the length of the front and back armhole
|
||||
- In Javascript, you can create a function within your function and call it
|
||||
- Bent extends Brian which sets both the `frontArmholeLength` and `backArmholeLength` values in the store with the length of those seams
|
||||
- We need to match the length of the sleevecap + sleeve cap ease to the length of the front and back armhole
|
||||
|
||||
Here's how you can handle this in code:
|
||||
|
||||
- We create a method that does teh actual drafting of our sleevecap
|
||||
- We use a `tweak` value to influence the process, we start with a value of `1`
|
||||
- We check the length after every attempt, and adjust the `tweak` value
|
||||
- We create a method that does teh actual drafting of our sleevecap
|
||||
- We use a `tweak` value to influence the process, we start with a value of `1`
|
||||
- We check the length after every attempt, and adjust the `tweak` value
|
||||
|
||||
```js
|
||||
export default function (part) {
|
||||
|
@ -81,7 +81,7 @@ export default function (part) {
|
|||
|
||||
A few things that are important:
|
||||
|
||||
- We check to see how close we are by using `Math.abs(delta)` which gives us the absolute value of our delta
|
||||
- We guard against an endless loop by keeping track of the runs and giving up after 25
|
||||
- We multiply by `0.99` and `1.02` to respectively decrease and increase our `tweak` factor.
|
||||
This assymetric approach avoids that we end up ping-ponging around our target value and never land somewhere in the middle
|
||||
- We check to see how close we are by using `Math.abs(delta)` which gives us the absolute value of our delta
|
||||
- We guard against an endless loop by keeping track of the runs and giving up after 25
|
||||
- We multiply by `0.99` and `1.02` to respectively decrease and increase our `tweak` factor.
|
||||
This assymetric approach avoids that we end up ping-ponging around our target value and never land somewhere in the middle
|
||||
|
|
|
@ -8,7 +8,7 @@ about: Adding seam allowance or hem allowance is easy to do
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/bruce/src/inset.js](https://github.com/freesewing/freesewing/blob/develop/packages/bruce/src/inset.js#L34)
|
||||
- [packages/bruce/src/inset.js](https://github.com/freesewing/freesewing/blob/develop/packages/bruce/src/inset.js#L34)
|
||||
|
||||
</Note>
|
||||
|
||||
|
@ -20,8 +20,8 @@ seam allowance.
|
|||
|
||||
In the example below we have two such paths:
|
||||
|
||||
- `paths.saBase` is the path that will require regular seam allowance
|
||||
- `paths.hemBase` is the path that will require more seam allowance, or hem allowance
|
||||
- `paths.saBase` is the path that will require regular seam allowance
|
||||
- `paths.hemBase` is the path that will require more seam allowance, or hem allowance
|
||||
|
||||
When creating them, we disable rendering, effectively hiding them.
|
||||
Then we string together our real path and our seam allowance based on them:
|
||||
|
|
|
@ -8,18 +8,18 @@ about: Slash and spread is easy enough on paper, here's how to do it in code
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L64)
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L64)
|
||||
|
||||
</Note>
|
||||
|
||||
When we _slash and spread_ a pattern, we cut out a triangle, and then rotate it
|
||||
When we *slash and spread* a pattern, we cut out a triangle, and then rotate it
|
||||
around the tip of the triangle.
|
||||
|
||||
And that's exactly what we do in code. We just need to know:
|
||||
|
||||
- What point we want to rotate around
|
||||
- Which points we want to rotate
|
||||
- By how much we want to rotate
|
||||
- What point we want to rotate around
|
||||
- Which points we want to rotate
|
||||
- By how much we want to rotate
|
||||
|
||||
```js
|
||||
let rotate = [
|
||||
|
|
|
@ -8,7 +8,7 @@ about: Adding multiple snippets doesn't need to be a chore with this handy macro
|
|||
|
||||
##### See this example in our source code
|
||||
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L381)
|
||||
- [packages/jaeger/src/front.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/jaeger/src/front.js#L381)
|
||||
|
||||
</Note>
|
||||
|
||||
|
|
|
@ -7,4 +7,3 @@ the hardest part. These guides will walk you through setting up your
|
|||
development environment on your operating system of choice.
|
||||
|
||||
<ReadMore />
|
||||
|
||||
|
|
|
@ -8,4 +8,3 @@ Blog posts have been migrated to [Strapi](https://strapi.io/), a headless CMS sy
|
|||
Our strapi instance can be accessed at [posts.freesewing.org](https://posts.freesewing.org/).
|
||||
|
||||
If you don't have a Strapi account (yet), [reach out to us on Discord](https://discord.freesewing.org).
|
||||
|
||||
|
|
|
@ -13,4 +13,3 @@ categories:
|
|||
- anothercat
|
||||
- somethingelse
|
||||
```
|
||||
|
||||
|
|
|
@ -11,6 +11,3 @@ about: |
|
|||
This is a multi-line text
|
||||
that will be assigned to the about key
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -5,7 +5,6 @@ order: zcc
|
|||
|
||||
You can find a list of all FreeSewing hotwtos below:
|
||||
|
||||
|
||||
<ReadMore recurse />
|
||||
|
||||
<Related>
|
||||
|
@ -20,4 +19,3 @@ guides take more time to explain in-depth what is being done and why.
|
|||
For more details, refer to [How we structure our documentation](/guides/docs).
|
||||
|
||||
</Related>
|
||||
|
||||
|
|
|
@ -21,11 +21,11 @@ our website for makers.
|
|||
|
||||
To generate a pattern, you will need to:
|
||||
|
||||
- Instantiate the pattern (`new ...`)
|
||||
- Pass it the settings and measurements you want to use (`{ ... }`)
|
||||
- Load the theme plugin (using `use()`)
|
||||
- Draft the pattern (using `draft()`)
|
||||
- Render it to SVG (using `render()`)
|
||||
- Instantiate the pattern (`new ...`)
|
||||
- Pass it the settings and measurements you want to use (`{ ... }`)
|
||||
- Load the theme plugin (using `use()`)
|
||||
- Draft the pattern (using `draft()`)
|
||||
- Render it to SVG (using `render()`)
|
||||
|
||||
Which can be done as a one-liner since `use()`, `draft()` and
|
||||
`render()` are all chainable, as shown below.
|
||||
|
@ -34,7 +34,6 @@ Which can be done as a one-liner since `use()`, `draft()` and
|
|||
|
||||
Below is a complete example.
|
||||
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
|
@ -91,5 +90,3 @@ If you compare this example with [our NodeJS
|
|||
example](/reference/howtos/nodejs) you'll notice that you do not
|
||||
need to worry about loading any dependencies. Not even `@freesewing/core`
|
||||
is loaded, because Skypack will pull in all dependencies for you.
|
||||
|
||||
|
||||
|
|
|
@ -3,4 +3,3 @@ title: FreeSewing in different environments
|
|||
---
|
||||
|
||||
You can use FreeSewing a different environments:
|
||||
|
||||
|
|
|
@ -22,11 +22,11 @@ our website for makers.
|
|||
|
||||
To generate a pattern, you will need to:
|
||||
|
||||
- Instantiate the pattern (`new ...`)
|
||||
- Pass it the settings and measurements you want to use (`{ ... }`)
|
||||
- Load the theme plugin (using `use()`)
|
||||
- Draft the pattern (using `draft()`)
|
||||
- Render it to SVG (using `render()`)
|
||||
- Instantiate the pattern (`new ...`)
|
||||
- Pass it the settings and measurements you want to use (`{ ... }`)
|
||||
- Load the theme plugin (using `use()`)
|
||||
- Draft the pattern (using `draft()`)
|
||||
- Render it to SVG (using `render()`)
|
||||
|
||||
Which can be done as a one-liner since `use()`, `draft()` and
|
||||
`render()` are all chainable, as shown below.
|
||||
|
@ -64,11 +64,11 @@ console.log(svg)
|
|||
|
||||
##### Remarks on the example code
|
||||
|
||||
- We are using `@freesewing/aaron` as the design, but you could use any design
|
||||
- You probably want to [use your own measurements](/reference/api/settings/measurements)
|
||||
or you could use `@freesewing/models` to load measurements from [our sizing grid](https://freesewing.org/sizes/)
|
||||
- We are using `@freesewing/plugin-theme` to theme our SVG, but you
|
||||
could [pass in your own CSS](/guides/plugins/using-hooks-without-plugin)
|
||||
- We are using `@freesewing/aaron` as the design, but you could use any design
|
||||
- You probably want to [use your own measurements](/reference/api/settings/measurements)
|
||||
or you could use `@freesewing/models` to load measurements from [our sizing grid](https://freesewing.org/sizes/)
|
||||
- We are using `@freesewing/plugin-theme` to theme our SVG, but you
|
||||
could [pass in your own CSS](/guides/plugins/using-hooks-without-plugin)
|
||||
|
||||
</Note>
|
||||
|
||||
|
@ -77,11 +77,11 @@ could [pass in your own CSS](/guides/plugins/using-hooks-without-plugin)
|
|||
The code above will only work if you've got the required dependencies installed on your system.
|
||||
Obviously you need NodeJS, but you will also need the following packages:
|
||||
|
||||
- `@freesewing/core`: Our core library
|
||||
- `@freesewing/plugin-bundle`: Set of common plugins
|
||||
- `@freesewing/aaron` or any design you want to use
|
||||
- Any design on which the design you choose is built. In this case, Aaron depends on `@freesewing/brian`
|
||||
- `@freesewing/utils`
|
||||
- `@freesewing/core`: Our core library
|
||||
- `@freesewing/plugin-bundle`: Set of common plugins
|
||||
- `@freesewing/aaron` or any design you want to use
|
||||
- Any design on which the design you choose is built. In this case, Aaron depends on `@freesewing/brian`
|
||||
- `@freesewing/utils`
|
||||
|
||||
For the example above, your `package.json` **dependencies** section will look like this:
|
||||
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
title: Common git challenges
|
||||
---
|
||||
|
||||
|
||||
Git is a distributed version control system originally created by
|
||||
Linus Torvalds (of linux fame).
|
||||
Much like Linux itself, git is immensly powerful yet can be intimidating
|
||||
|
@ -25,4 +24,3 @@ check out this [Git For Ages 4 And Up](https://youtu.be/1ffBJ4sVUb4?t=121) video
|
|||
A bit longer, but it well worth a watch.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -100,5 +100,4 @@ end result of our repeated attempts.
|
|||
This approach keeps the commit history clean, not to mention that it makes
|
||||
you look like a total boss who gets everything right at the first attempt.
|
||||
|
||||
|
||||
[1]: https://github.com/freesewing/freesewing/commit/5204ff5c16327962108e1629716e045275d3bf84
|
||||
|
|
|
@ -16,11 +16,8 @@ Many of the FreeSewing contributors hang out there, and since we're spread over
|
|||
different parts of the world, you're likely to find somebody there who can answer
|
||||
your question(s) at any given moment.
|
||||
|
||||
|
||||
<Tip>
|
||||
|
||||
If you want to report a problem, please [create an issue](https://github.com/freesewing/freesewing/issues/new).
|
||||
|
||||
</Tip>
|
||||
|
||||
|
||||
|
|
|
@ -8,4 +8,3 @@ Just being there to answer questions and chat with other people is a valuable pa
|
|||
We also can be found [in plenty of other places](https://freesewing.org/community/where/) where we'd love to have you join us.
|
||||
|
||||
Apart from being present in chat rooms and social media, you could also take on some responsibility on one or more platforms.
|
||||
|
||||
|
|
|
@ -5,4 +5,3 @@ title: Develop sewing patterns
|
|||
You could program new designs for FreeSewing.
|
||||
If you're not afraid of Javascript and are happy to team up with a designer,
|
||||
you could work on a new pattern together.
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Ways to contribute
|
||||
---
|
||||
|
||||
Thank you for being part of our community, and for wanting to contribute! ❤️
|
||||
Thank you for being part of our community, and for wanting to contribute! ❤️\
|
||||
FreeSewing is an open source project ran by volunteers from different corners of the world.
|
||||
We would love to have you on board, and this page lists everything you need to know to get started.
|
||||
|
||||
|
@ -13,8 +13,8 @@ value a safe and welcoming environment for all members of the FreeSewing communi
|
|||
|
||||
To that extend, we impose the following requirements to ensure everyone feels safe and welcome:
|
||||
|
||||
- Any member of our community must respect [our community standards](https://freesewing.org/docs/various/community-standards/)
|
||||
- As a contributor, you must uphold [our Code of Conduct](/guides/code-of-conduct/)
|
||||
- Any member of our community must respect [our community standards](https://freesewing.org/docs/various/community-standards/)
|
||||
- As a contributor, you must uphold [our Code of Conduct](/guides/code-of-conduct/)
|
||||
|
||||
Go ahead and read those, we'll wait.
|
||||
|
||||
|
@ -22,11 +22,11 @@ Go ahead and read those, we'll wait.
|
|||
|
||||
With that out of the way, here's a few more things that are *good to know*:
|
||||
|
||||
- Nobody gets paid to work on/for FreeSewing. We are a 100% volunteer organisation.
|
||||
- We have patrons who support us financially, but all the money that comes in goes to charity —
|
||||
See our [revenue pledge](https://freesewing.org/docs/various/pledge/) for details
|
||||
- FreeSewing follows the [all-contributors](https://allcontributors.org/) specification.
|
||||
Contributions of any kind are welcome.
|
||||
- Nobody gets paid to work on/for FreeSewing. We are a 100% volunteer organisation.
|
||||
- We have patrons who support us financially, but all the money that comes in goes to charity —
|
||||
See our [revenue pledge](https://freesewing.org/docs/various/pledge/) for details
|
||||
- FreeSewing follows the [all-contributors](https://allcontributors.org/) specification.
|
||||
Contributions of any kind are welcome.
|
||||
|
||||
## Where to begin
|
||||
|
||||
|
@ -49,6 +49,3 @@ wants to learn, especially when doing so enables upwards social mobility.
|
|||
[Reach out](https://discord.freesewing.org/) and we let's do this.
|
||||
|
||||
</Comment>
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -4,4 +4,3 @@ title: Make illustrations
|
|||
|
||||
Our documentation can always use some more/better illustrations to help people figure out how
|
||||
to make our patterns into garments.
|
||||
|
||||
|
|
|
@ -5,4 +5,3 @@ title: Language ambassador
|
|||
You could represent FreeSewing in a non-English community.
|
||||
There, you can help answer questions or triage problem reports.
|
||||
Or you can point out where translations are missing.
|
||||
|
||||
|
|
|
@ -9,7 +9,6 @@ organize milestones, and so on.
|
|||
|
||||
This is helpful in more than one way:
|
||||
|
||||
- It reduces the cognitive load of the people implementing changes because they don't have to worry about forgetting things
|
||||
- It increases transparency by making it clear what sort of things are being worked on
|
||||
- It gives us that good feeling of closing the issue when the task is done
|
||||
|
||||
- It reduces the cognitive load of the people implementing changes because they don't have to worry about forgetting things
|
||||
- It increases transparency by making it clear what sort of things are being worked on
|
||||
- It gives us that good feeling of closing the issue when the task is done
|
||||
|
|
|
@ -3,16 +3,15 @@ title: Report bugs
|
|||
---
|
||||
|
||||
Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/).
|
||||
Create an issue [in our monorepo](https://github.com/freesewing/freesewing/issues/new?assignees=&labels=%F0%9F%90%9B+bug&template=bug-report.md&title=Bug+report) if you've found one.
|
||||
Create an issue [in our monorepo](https://github.com/freesewing/freesewing/issues/new?assignees=\&labels=%F0%9F%90%9B+bug\&template=bug-report.md\&title=Bug+report) if you've found one.
|
||||
|
||||
Explain the problem and include additional details to help maintainers reproduce the problem:
|
||||
|
||||
* **Use a clear and descriptive title** for the issue to identify the problem.
|
||||
* **Describe the exact steps which reproduce the problem** in as many details as possible.
|
||||
* **Include relevant information** such as your username on the site, or the person you drafted a pattern for.
|
||||
- **Use a clear and descriptive title** for the issue to identify the problem.
|
||||
- **Describe the exact steps which reproduce the problem** in as many details as possible.
|
||||
- **Include relevant information** such as your username on the site, or the person you drafted a pattern for.
|
||||
|
||||
Provide more context by answering these questions:
|
||||
|
||||
* **Did the problem start happening recently** (e.g. it worked fine before but since the latest update it doesn't)
|
||||
* **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens.
|
||||
|
||||
- **Did the problem start happening recently** (e.g. it worked fine before but since the latest update it doesn't)
|
||||
- **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens.
|
||||
|
|
|
@ -5,5 +5,4 @@ title: Showcase our patterns
|
|||
Anytime somebody has made one of our patterns, we like to showcase it on [freesewing.org](https://freesewing.org/showcase/).
|
||||
|
||||
Unpublished showcases are tracked as [GitHub issues](https://guides.github.com/features/issues/).
|
||||
Create an issue [in our monorepo](https://github.com/freesewing/freesewing/issues/new?assignees=&labels=%F0%9F%91%8D+good+first+issue%2C+%F0%9F%93%B8+showcase%2C+%F0%9F%A4%97+community&template=showcase-template.md&title=Create+showcase+from+this+content) when you've made one of our patterns, or have come across pictures from another maker who did.
|
||||
|
||||
Create an issue [in our monorepo](https://github.com/freesewing/freesewing/issues/new?assignees=\&labels=%F0%9F%91%8D+good+first+issue%2C+%F0%9F%93%B8+showcase%2C+%F0%9F%A4%97+community\&template=showcase-template.md\&title=Create+showcase+from+this+content) when you've made one of our patterns, or have come across pictures from another maker who did.
|
||||
|
|
|
@ -4,4 +4,3 @@ title: Translation
|
|||
|
||||
You could translate FreeSewing into one of its additional languages
|
||||
(French, German, Dutch, Spanish). Or if you’re ambitious, add a new one.
|
||||
|
||||
|
|
|
@ -4,12 +4,11 @@ title: Triage issues
|
|||
|
||||
Triaging issues is a great way to get involved in FreeSewing. You can do tasks such as:
|
||||
|
||||
- Making sure issues are properly labeled
|
||||
- Ensuring they have a good title that explains the issue in brief
|
||||
- Assigning issues to people to make sure they are tended to
|
||||
- Keeping an eye on stale issues, and either updating or closing them
|
||||
- Assigning issues to milestones so we can plan our releases
|
||||
- Making sure issues are properly labeled
|
||||
- Ensuring they have a good title that explains the issue in brief
|
||||
- Assigning issues to people to make sure they are tended to
|
||||
- Keeping an eye on stale issues, and either updating or closing them
|
||||
- Assigning issues to milestones so we can plan our releases
|
||||
|
||||
All FreeSewing contributors have triage permissions that allows them to do this.
|
||||
If you don't have the rights, or bump into any issues, [reach out to us on Discord](https://discord.freesewing.org).
|
||||
|
||||
|
|
|
@ -28,4 +28,3 @@ paths.demo = new Path()
|
|||
paths.demo = new Path()
|
||||
.attr('class', 'classA classB');
|
||||
```
|
||||
|
||||
|
|
|
@ -17,4 +17,3 @@ paths.demo = new Path()
|
|||
|
||||
paths.clone = paths.demo.clone()
|
||||
```
|
||||
|
||||
|
|
|
@ -18,4 +18,3 @@ paths.demo = new Path()
|
|||
let class = paths.demo.attributes.getAsArray('class');
|
||||
// class now holds: ["classA", "classB"]
|
||||
```
|
||||
|
||||
|
|
|
@ -33,12 +33,11 @@ dependencies: {
|
|||
|
||||
In this example:
|
||||
|
||||
- The `front` part depends on the `back` part
|
||||
- The `sleeveplacket` part depends on the `sleeve` and `cuff` parts.
|
||||
- The `front` part depends on the `back` part
|
||||
- The `sleeveplacket` part depends on the `sleeve` and `cuff` parts.
|
||||
|
||||
<Tip>
|
||||
|
||||
See [Part dependencies](/advanced/dependencies) for more in-depth information on dependencies.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -11,7 +11,6 @@ Note that hidden parts will be rendered when the user requests
|
|||
to [only draft some parts of a pattern](/reference/api/settings/only)
|
||||
and includes the hidden part(s).
|
||||
|
||||
|
||||
## Structure
|
||||
|
||||
An array of strings that holds part names.
|
||||
|
|
|
@ -6,7 +6,6 @@ Option groups allow you to group options together when presenting them
|
|||
to the user. They also support (one) level of sub-grouping which is
|
||||
useful when your design has many options.
|
||||
|
||||
|
||||
<Note>
|
||||
|
||||
##### This section applies to frontend integration
|
||||
|
@ -27,9 +26,9 @@ configuration file.
|
|||
|
||||
They hold a plain object where each property can hold:
|
||||
|
||||
- An array of strings that are the names of the options to include in the group
|
||||
- A plain object whose properties hold an array of strings that are the names
|
||||
of the options to include in the group. (this creates a subgroup)
|
||||
- An array of strings that are the names of the options to include in the group
|
||||
- A plain object whose properties hold an array of strings that are the names
|
||||
of the options to include in the group. (this creates a subgroup)
|
||||
|
||||
## Example
|
||||
|
||||
|
@ -54,12 +53,12 @@ optionGroups: {
|
|||
|
||||
The configuration above will create the following structure:
|
||||
|
||||
- **fit**
|
||||
- `chestEase`
|
||||
- `waistEase`
|
||||
- **style**
|
||||
- `cuffStyle`
|
||||
- `hemStyle`
|
||||
- **collar**
|
||||
- `collarHeight`
|
||||
- `collarShape`
|
||||
- **fit**
|
||||
- `chestEase`
|
||||
- `waistEase`
|
||||
- **style**
|
||||
- `cuffStyle`
|
||||
- `hemStyle`
|
||||
- **collar**
|
||||
- `collarHeight`
|
||||
- `collarShape`
|
||||
|
|
|
@ -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: {
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
@ -126,12 +125,16 @@ 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
|
||||
|
||||
|
|
|
@ -10,10 +10,10 @@ contributions that use millimeter options.
|
|||
|
||||
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
|
||||
|
||||
|
@ -34,13 +34,13 @@ 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
|
||||
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).
|
||||
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.
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
@ -58,4 +61,3 @@ options: {
|
|||
Percentage options have a few more tricks up their sleeve:
|
||||
|
||||
<ReadMore />
|
||||
|
||||
|
|
|
@ -38,7 +38,6 @@ 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
|
||||
|
@ -96,4 +95,3 @@ 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
|
||||
millimeter](/reference/api/config/options/pct/toabs) for details.
|
||||
|
||||
|
|
|
@ -12,12 +12,12 @@ is found.
|
|||
|
||||
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
|
||||
|
||||
|
@ -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,19 +165,19 @@ 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:
|
||||
|
||||
|
@ -200,12 +200,12 @@ 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
|
||||
|
||||
|
@ -236,8 +236,11 @@ 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
|
||||
|
|
|
@ -28,7 +28,6 @@ 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
|
||||
|
@ -85,4 +84,3 @@ 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
|
||||
percentage option](/api/config/options/pct/fromabs) for details.
|
||||
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue