chore(markdown): Linting of dev docs
This commit is contained in:
parent
1d8beedd44
commit
265ad404da
317 changed files with 1281 additions and 1503 deletions
|
@ -12,11 +12,11 @@ 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
|
||||
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.
|
||||
In other words, you cannot change the configuration. Instead, the configuration
|
||||
specifies what kind of settings the pattern accepts.
|
||||
|
|
|
@ -3,12 +3,12 @@ title: How patterns work
|
|||
---
|
||||
|
||||
This short guide will illustrate and explain how patterns work in FreeSewing.
|
||||
Not to be confused with how sewing pattern work — although there's [great books
|
||||
about that](https://www.assembil.com/how-patterns-work-book/) if you're
|
||||
Not to be confused with how sewing pattern work — although there's [great books
|
||||
about that](https://www.assembil.com/how-patterns-work-book/) if you're
|
||||
interested — it's about what goes on under the hood each time a sewing
|
||||
pattern is generated by FreeSewing.
|
||||
|
||||
This illustration is a good starting point to gain a better
|
||||
This illustration is a good starting point to gain a better
|
||||
understanding of the structure of a FreeSewing pattern:
|
||||
|
||||
<Example part="docs_overview">
|
||||
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
@ -8,12 +8,11 @@ Parts divide your pattern into re-usable components
|
|||
</Example>
|
||||
|
||||
Parts are a container for the points, paths, and snippets of (a part of) your pattern.
|
||||
They are also re-usable by other patterns, which makes them a powerful tool to build
|
||||
They are also re-usable by other patterns, which makes them a powerful tool to build
|
||||
a pattern library.
|
||||
|
||||
If you design a T-shirt pattern with a `front`, `back`, and `sleeve`, each of those would be a part.
|
||||
If you then wanted to make a long-sleeved version of your T-shirt pattern, you only need to design
|
||||
If you then wanted to make a long-sleeved version of your T-shirt pattern, you only need to design
|
||||
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,15 +12,15 @@ 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.
|
||||
|
||||
For example, you might expect the **line** operation to take a start- and endpoint.
|
||||
For example, you might expect the **line** operation to take a start- and endpoint.
|
||||
But in fact, it only takes an endpoint, and will draw a straight line from where our virtual pen
|
||||
currently is to said endpoint.
|
||||
|
||||
|
@ -35,8 +35,7 @@ Understanding that each drawing operation builds upon the next one is an importa
|
|||
|
||||
<Tip>
|
||||
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
paths in it. Each box, the arrows, the lines in the React logo, and so on.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -14,7 +14,6 @@ and the store.
|
|||
In reality, your pattern will be a *constructor* that takes the user's settings as
|
||||
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
|
||||
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.
|
||||
|
||||
|
|
|
@ -14,25 +14,24 @@ Before we can draw any line, we need to know where it starts from, and where it
|
|||
That's why we have **points**. They are the most basic building block of a
|
||||
FreeSewing pattern, and their role is to store coordinates.
|
||||
|
||||
Each point must have:
|
||||
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.
|
||||
|
||||
<Note>
|
||||
|
||||
Points are unlikely to confuse you. The only gotcha is [the
|
||||
coordinate system](/guides/prerequisites/coordinate-system/) which has a Y-axis that is inverted to what you
|
||||
coordinate system](/guides/prerequisites/coordinate-system/) which has a Y-axis that is inverted to what you
|
||||
may intuitively expect.
|
||||
|
||||
</Note>
|
||||
|
||||
<Tip>
|
||||
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
Our example image (which, if you hadn't realized was created with FreeSewing) has a lot of
|
||||
points in it. The corners of the boxes, the location where the text goes, and so on.
|
||||
|
||||
</Tip>
|
||||
|
||||
|
|
|
@ -8,12 +8,12 @@ Snippets are little embelishments that go on your pattern
|
|||
</Example>
|
||||
|
||||
Snippets are little embellishments you can use and re-use on your pattern.
|
||||
They are typically used for things like logos or buttons.
|
||||
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.
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue