1
0
Fork 0

chore(markdown): Working on v3 docs

This commit is contained in:
Joost De Cock 2022-09-20 18:09:28 +02:00
parent 22680fbddc
commit 1f7ba79f81
17 changed files with 433 additions and 272 deletions

View file

@ -0,0 +1,44 @@
---
title: Pattern.addPart()
---
The `Pattern.addPart()` method allows you to add a part to a pattern.
It has the same effect as passing a part to the Design constructor.
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.addPart() signature
```js
Pattern pattern.addPart(object part)
```
## Pattern.addPart() example
```js
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const extra = {
name: 'aaron.extra',
draft: ({ points, Point, paths, Path, part }) => {
points.msg = new Point(50,15)
.attr('data-text', "I am an extra part")
paths.box = new Path()
.move(new Point(0,0))
.line(new Point(0,30))
.line(new Point(100,30))
.line(new Point(100,0))
.close(new Point(100,0))
.addClass('note')
return part
}
}
const pattern = new Aaron({
measurements: cisFemaleAdult34
}).addPart(extra)
const svg = pattern.draft().render()
```

View file

@ -2,7 +2,7 @@
title: Pattern.draft()
---
A pattern's `draft()` method will draft all the different pattern parts
A pattern's `draft()` method will draft the different pattern parts
making sure to do so in the right order, handle dependencies, resolve
options to their absolute values and a number of other housekeeping things
that are required for the pattern to be drafted.
@ -18,14 +18,11 @@ Pattern pattern.draft()
## Pattern.draft() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
measurements: cisFemaleAdult34
})
const svg = pattern.draft().render()

View file

@ -1,33 +1,72 @@
---
title: Pattern
order: 15
order: 20
---
The `Pattern` object in FreeSewing's core library holds all data and logic of a pattern.
It is the parametric blueprint that when instantiated with a user's measurements and
objects will generate a made-to-measure pattern.
It is the parametric blueprint that when instantiated with a user's settings
can draft a made-to-measure sewing pattern.
## Pattern constructor
## Creating a Pattern
A Pattern in FreeSewing is an instantiated Design:
```js
function freesewing.Pattern(object settings)
import { Florence } from "@freesewing/florence"
const pattern = new Florence()
```
A pattern is instantiated by passing a [settings object](/reference/api/settings/) to the pattern constructor.
You probably want to create a pattern using your own [settings](/reference/api/settings):
This settings objects holds, amongst other things, the measurements and options chosen by the user.
Refer to the [settings documentation](/reference/api/settings/) for an exhaustive list.
```js
import { Florence } from "@freesewing/florence"
## Pattern properties
const pattern = new Florence({
paperless: true,
measurements: {
head: 390,
}
})
```
- `settings` : The settings as set by the user
- `options` : the options as set by the user
- `config` : The pattern configuration
- `parts` : A plain object to hold your parts
- `Part` : The [Part](/reference/api/part) constructor
- `store` : A [Store](/reference/api/store) instance
- `svg` : An [Svg](/reference/api/svg) instance
- `is` : A string that will be set to `draft` or `sample` when you respectively draft or sample a pattern. This allows plugins that hook into your pattern to determine what to do in a given scenario.
## Multisets in FreeSewing
You can pass the Pattern constructor an array of multiple settings objects:
```js
import { Florence } from "@freesewing/florence"
const pattern = new Florence([
{
measurements: {
head: 390,
}
},
{
measurements: {
head: 420,
}
},
])
```
We refer to these *multiple sets of settings* as **multisets**.
It is what powers FreeSewing's [sampling capabilities](/reference/api/pattern/sample) but
it also allows you to draft some pattern parts with one set of measurements, and other parts
with another set. For example if you have an asymetric model to fit.
<Note>
##### Core always keeps a set of settings
Multisets is an advanced feature of FreeSewing, and for the most part you can forget about it
until the day you want to use it.
However, it's good to keep in mind that under the hood, FreeSewing will always use a set of settings.
It just so happens that in most cases, there will be only one settings object in the set.
</Note>
## Pattern methods

View file

@ -0,0 +1,32 @@
---
title: Pattern.getConfig()
---
You can call `Pattern.getConfig()` to retrieve a pattern's runtime configuration.
Doing so will resolve all dependencies, load all the plugins, and do all other
housekeeping tasks that are typically done behind the scenes when you call
`Pattern.draft()`. But it will stop short of drafting the pattern, and instead
return a Pattern's internal configuration.
You can use this to see what options a pattern provides, what
measurments it requires, and so on.
## Pattern.getConfig() signature
```js
object pattern.getConfig()
```
## Pattern.getConfig() example
```js
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new Aaron({
measurements: cisFemaleAdult34
})
const config = pattern.getConfig()
```

View file

@ -1,47 +0,0 @@
---
title: Pattern.getCutList()
---
This method will return the cut list, which means the `cut` property of
all parts that were included in the most recent call to `Pattern.draft()`.
This relies on the pattern designers properly setting the cut property
in each part.
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.getCutList() signature
```js
Object pattern.getCutList()
```
## Pattern.getCutList() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
const cutList = pattern.draft().getCutList()
```
## Cut list format
The object returned by `Pattern.getCutList()` is a plain object
with a property for each part that will be included in the pattern's output.
The value of these properties is the `cut` property of the part in question.
<Tip>
Refer to [part.addCut()](/reference/api/part/addcut) for details on the
format of a part's `cut` property
</Tip>

View file

@ -2,8 +2,8 @@
title: Pattern.getRenderProps()
---
A pattern's `getRenderProps()` method will return a set of properties
that allow the pattern to be rendered be an external renderer such as
The `Pattern.getRenderProps()` method will return an object that
facilitates rendered the pattern by an external renderer such as
a React component. It should only be called after calling `Pattern.draft()`.
## Pattern.getRenderProps() signature
@ -12,35 +12,31 @@ a React component. It should only be called after calling `Pattern.draft()`.
Object pattern.getRenderProps()
```
The object returned by this method contains the following properties:
## Pattern.getRenderProps() example
```js
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new Aaron({
measurements: cisFemaleAdult34
})
const props = pattern.draft().getRenderProps()
```
## Pattern.getRenderProps() returned object
The `Pattern.getRenderProps()` method returns an object with
the following properties:
| Property | Description |
| --------:| ----------- |
| `autoLayout` | An object describing the (automated) pattern layout |
| `height` | Height of the drafted pattern in `mm` |
| `logs` | The logs generated by the pattern |
| `parts` | A plain object holding the drafted parts |
| `settings` | The (sets of) settings used to draft the pattern |
| `stacks` | A plain object holding the drafted stacks |
| `svg` | An [Svg Object](/reference/api/svg/) object with the `preRender` hook applied |
| `width` | Widht of the drafted pattern in `mm` |
| `height` | Height of the drafted pattern in `mm` |
| `settings` | The settings used to draft the pattern |
| `events` | An object with properties `debug`, `info`, `warning`, and `error` holding events of that type that were generated during the draft of the pattern |
| `parts` | A plain object holding the drafted parts |
<Tip>
See [the Draft React component](/reference/packages/components/draft/) for more info.
</Tip>
## Pattern.getRenderProps() example
```jsx
import React from 'react
import Aaron from "@freesewing/aaron"
import Draft from "@freesewing/components/Draft"
const MyReactComponent = ({ measurements }) => {
const pattern = new Aaron({ measurements })
return <Draft {...pattern.draft().getRenderProps()} />
}
export default MyReactComponent
```

View file

@ -2,12 +2,12 @@
title: Pattern.on()
---
A pattern's `on()` method allows you to attach a function to one of the
The `Pattern.on()` method allows you to attach a function to one of the
pattern's [lifecycle hooks](/reference/hooks/). It takes the
lifecycle hook's name as the first argument and the function as the second.
This method will then be triggered by the lifecycle hook.
<Note>Since FreeSewing v2.19, this method is chainable as it returns the Pattern object</Note>
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.on() signature

View file

@ -2,27 +2,24 @@
title: Pattern.render()
---
A pattern's `render()` method will render the pattern to SVG and return
the SVG as a string. It should only ever be called after calling
The `Pattern.render()` method will render the pattern to SVG and return
that SVG as a string. It should only be called after calling
[Pattern.draft()](/reference/api/pattern/draft/) first.
# Pattern.render() signature
## Pattern.render() signature
```js
string pattern.render()
```
# Pattern.render() example
## Pattern.render() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
measurements: cisFemaleAdult34
})
const svg = pattern.draft().render()

View file

@ -2,24 +2,28 @@
title: Pattern.sample()
---
A pattern's `sample()` method will _sample_ the pattern which means
to draft it in different iterations while adjusting the input settings.
The `Pattern.sample()` method will _sample_ the pattern which means
to draft multiple variants of the same pattern, and stack them on
top of each other.
<Note>This method is chainable as it returns the Pattern object</Note>
Under the hood, this method will call one of
[Pattern.sampleOption()](/reference/apu/pattern/sampleoption),
[Pattern.sampleMeasurement()](/reference/apu/pattern/sampleoption), or
[Pattern.sampleModels()](/reference/apu/pattern/sampleoption) to sample
an option, a measurement, or a set of measurements respectively.
an option, a measurement, or different models respectively.
Unlike those three methods where you pass the relevant info to to the method,
this `Pattern.sample()` will instead read the `pattern.settings.sample`
object to determine what to do.
this `Pattern.sample()` method will instead read the `settings.sample`
object to determine what needs to be done.
The possiblities are:
The `settings.sample` object can hold the following properties:
- **type**: One of `option`, `measurement`, or `models`
- **option**: An option name as defined in the pattern config file (only used when `type` is option).
- **measurement**: A measurement name as defined in the pattern config file (only used when `type` is measurement).
- **models**: An array of models with the required measurements for this pattern (only used when `type` is models).
- **models**: A plain object of different models where the key is the model name and the value an object with the required measurements.
See the specific sample methods below for more details:
@ -27,35 +31,6 @@ See the specific sample methods below for more details:
- [Pattern.sampleMeasurement()](/reference/apu/pattern/sampleoption)
- [Pattern.sampleModels()](/reference/apu/pattern/sampleoption)
From a lifecycle point of view, the `Pattern.sample()` method is a substitute for
`Pattern.draft()`. So you call it after instantiating the pattern, prior to
calling `Pattern.render()`.
<Tip>
###### Anchor your samples
If you add a point named `anchor` to your pattern part, the different samples
will be anchored on this point.
In other words, for each sample, the anchor point will be kept in the same location.
</Tip>
<Note>This method is chainable as it returns the Pattern object</Note>
<Warning>
##### FreeSewing v3 breaking changes
This method does some juggling under the hood, essentially cramming
different versions of a pattern into a single Pattern object.
This behavior is likely to change in FreeSewing v3. Refer to [the
roadmap](https://github.com/freesewing/freesewing/discussions/1278) for details.
</Warning>
## Pattern.sample() signature
```js
@ -65,14 +40,13 @@ Pattern pattern.sample()
## Pattern.sample() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult } from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
sample: {
models: cisFemaleAdult
}
})
const svg = pattern.sample().render()

View file

@ -2,11 +2,12 @@
title: Pattern.sampleMeasurement()
---
A pattern's `sampleMeasurement()` method will _sample_ a given measurement,
which means to draft it in different iterations while adjusting the input value
of the given measurement.
In practice, it will draft 10 iterations of the pattern
while adapting the measurement between 90% and 110% of its original value.
The `Pattern.sampleMeasurement()` method will _sample_ the pattern which means
to draft multiple variants of the same pattern, and stack them on
top of each other.
In this particular case, it will draft 10 variants of the pattern that vary
the measurement of your choice between 90% and 110% if the value in the settings.
<Tip>
The goal of measurement sampling is to understand the impact of a given measurement on a pattern.
@ -14,11 +15,6 @@ The goal of measurement sampling is to understand the impact of a given measurem
<Note>This method is chainable as it returns the Pattern object</Note>
<Tip>
The goal of option sampling is to verify the impact of an option on the pattern, and verify that
its min and max boundaries are correct and its default value is sensible.
</Tip>
## Pattern.sampleMeasurement() signature
```js
@ -28,10 +24,12 @@ Pattern pattern.sampleMeasurement(string measurement)
## Pattern.sampleMeasurement() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new Aaron({ measurements: models.manSize38 })
const pattern = new Aaron({
measurements: cisFemaleAdult34
})
const svg = pattern.sampleMeasurement("chest").render()
const svg = pattern.draft().sampleMeasurement('chest')
```

View file

@ -2,9 +2,11 @@
title: Pattern.sampleModels()
---
A pattern's `sampleModels()` method will _sample_ a pattern for a list of
models you pass to it. It will draft different iterations of the pattern,
using the measurements for each model you pass to it.
The `Pattern.sampleModels()` method will _sample_ the pattern which means
to draft multiple variants of the same pattern, and stack them on
top of each other.
In this particular case, it will draft a variants for each of the models you pass it.
<Tip>
The goal of model sampling is to verify that a pattern grades correctly up and down as sizes change.
@ -12,24 +14,13 @@ The goal of model sampling is to verify that a pattern grades correctly up and d
<Note>This method is chainable as it returns the Pattern object</Note>
<Tip>
###### Anchor your samples
If you add a point named `anchor` to your pattern part, the different samples
will be anchored on this point.
In other words, for each sample, the anchor point will be kept in the same location.
</Tip>
## Pattern.sampleModels() signature
```js
Pattern pattern.sampleModels(object models, string focus)
```
The models object you pass as the first parameter should be structured as such:
The `models` object you pass as the first parameter should be structured as such:
```js
{
@ -61,10 +52,10 @@ identifying your model in the models object.
## Pattern.sampleModels() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult } from "@freesewing/models"
const Aaron = new Aaron()
const svg = aaron.sampleModels(models, "manSize38").render()
const svg = aaron.sampleModels(cisFemaleAdult, "34').render()
```

View file

@ -2,15 +2,19 @@
title: Pattern.sampleOption()
---
A pattern's `sampleOption()` method will _sample_ a given option,
which means to draft it in different iterations while adjusting the input value
of the given option.
The practical implementation varies based on [the type of option](/config/options/):
The `Pattern.sampleOption()` method will _sample_ the pattern which means
to draft multiple variants of the same pattern, and stack them on
top of each other.
In this particular case, the variants it drafts depend
on [the type of option](/config/options/):
- For options that are an object with a **min** and **max** property, 10 steps will be sampled, between min and max
- For options that are a numeric value (**constants**), 10 steps will be sampled between 90% and 110% of the value
- For options with a **list** of options, each option in the list will be sampled
<Fixme>Handle other option types</Fixme>
<Tip>
The goal of option sampling is to verify the impact of an option on the pattern, and verify that
its min and max boundaries are correct and its default value is sensible.
@ -18,17 +22,6 @@ its min and max boundaries are correct and its default value is sensible.
<Note>This method is chainable as it returns the Pattern object</Note>
<Tip>
###### Anchor your samples
If you add a point named `anchor` to your pattern part, the different samples
will be anchored on this point.
In other words, for each sample, the anchor point will be kept in the same location.
</Tip>
## Pattern.sampleOption() signature
```js
@ -38,12 +31,12 @@ Pattern pattern.sampleOption(string option)
## Pattern.sampleOption() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
const pattern = new aaron({
measurements: models.manSize38
const pattern = new Aaron({
measurements: cisFemaleAdult34
})
const svg = pattern.sampleOption("necklineDrop").render()
const svg = pattern.draft().sampleMeasurement('chest')
```

View file

@ -2,10 +2,9 @@
title: Pattern.use()
---
A pattern's `use()` method will load a FreeSewing plugin.
Plugins are a way to extend a pattern's functionality, and can be
loaded both at build-time and at run-time. This method only applies
to run-time plugins. For more details, refer to [the plugin guide](/guides/plugins/).
The `Pattern.use()` method will load a FreeSewing plugin.
Plugins are a way to extend a pattern's functionality.
For more details, refer to [the plugin guide](/guides/plugins/).
<Note>This method is chainable as it returns the Pattern object</Note>
@ -21,16 +20,13 @@ you plugin object.
## Pattern.use() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import theme from "@freesewing/theme"
import { Aaron } from "@freesewing/aaron"
import { cisFemaleAdult34 } from "@freesewing/models"
import { pluginTheme } from "@freesewing/plugin-theme"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
}).use(theme)
measurements: cisFemaleAdult34
}).use(pluginTheme)
const svg = pattern.draft().render()
```