1
0
Fork 0

chore: Port FreeSewing.dev to docusaurus

The replaces the NextJS site powering FreeSewing.dev with a Docusaurus
setup. It's part of my efforts to simplify FreeSewing's setup so we can
focus on our core value proposition.
This commit is contained in:
Joost De Cock 2024-09-28 13:13:48 +02:00
parent 497633d1d3
commit ab3204f9f1
692 changed files with 11037 additions and 20674 deletions

View file

@ -0,0 +1,48 @@
---
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.
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.addPart() signature
```js
Pattern pattern.addPart(object part)
```
## Pattern.addPart() example
```js
import { Aaron } from "@freesewing/aaron"
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
}
}
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements }).addPart(extra)
const svg = pattern.draft().render()
```

View file

@ -0,0 +1,33 @@
---
title: Pattern.draft()
---
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.
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.draft() signature
```js
Pattern pattern.draft()
```
## Pattern.draft() example
```js
import { Aaron } from "@freesewing/aaron"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements })
const svg = pattern.draft().render()
```

View file

@ -0,0 +1,33 @@
---
title: Pattern.draftPartForSet()
---
A pattern's `draftPartForSet()` method will draft a part using a
given set of settings.
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.draftPartForSet() signature
```js
Pattern pattern.draftPartForSet(part, set)
```
## Pattern.draftPartForSet() example
```js
import { Aaron } from "@freesewing/aaron"
// Load a public test settings set from the FreeSewing backend
const set = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
)
const pattern = new Aaron()
for (const part in pattern.parts) {
const svg = pattern.draftPartForSet(part, set).render()
}
```

View file

@ -0,0 +1,27 @@
---
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
measurements it requires, and so on.
## Pattern.getConfig() signature
```js
object pattern.getConfig()
```
## Pattern.getConfig() example
```js
import { Aaron } from "@freesewing/aaron"
const config = new Aaron().getConfig()
```

View file

@ -0,0 +1,24 @@
---
title: Pattern.getLogs()
---
The `Pattern.getLogs()` method will return an object holding
the logs generated by the pattern.
It should only be called after calling `Pattern.draft()`.
## Pattern.getLogs() signature
```js
Object pattern.getLogs()
```
## Returned object properties
The `Pattern.getLogs()` method returns an object with
the following properties:
| Property | Description |
| --------:| ----------- |
| `pattern` | The logs of the pattern itself |
| `sets` | The logs per (set of) settings used to draft the pattern |

View file

@ -0,0 +1,29 @@
---
title: Pattern.getRenderProps()
---
The `Pattern.getRenderProps()` method will return an object that
facilitates rendering the pattern by an external renderer such as
our [Pattern React component](/reference/packages/react-components).
It should only be called after calling `Pattern.draft()`.
## Pattern.getRenderProps() signature
```js
Object pattern.getRenderProps()
```
## Returned object properties
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` |
| `width` | Width of the drafted pattern in `mm` |
| `settings` | The (sets of) settings used to draft the pattern |
| `stacks` | A plain object holding the drafted stacks |
| `svg` | The [Svg Object](/reference/api/svg/) object with the `preRender` hook applied as [Svg.asRenderProps()](/reference/api/svg/asrenderprops) |

View file

@ -0,0 +1,40 @@
---
title: Pattern.on()
---
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.
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.on() signature
```js
Pattern pattern.on(string hook, function method)
```
:::tip
Refer to [the Lifecycle hooks documentation](/reference/hooks/) for a list
of all available lifecycle hooks, as well as the signature of the function you
should pass it.
:::
## Pattern.on() example
```js
pattern.on('preRender', function(svg) {
svg.style += "svg { background: yellow;}";
})
```
Your pattern now has a yellow background.
:::tip
The [plugin guide](/guides/plugins/) contains more info on how you can use hooks
:::

View file

@ -0,0 +1,85 @@
---
title: Pattern
---
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 settings
can draft a bespoke sewing pattern.
## Creating a Pattern
A Pattern in FreeSewing is an instantiated Design:
```js
import { Florence } from "@freesewing/florence"
const pattern = new Florence()
```
You probably want to create a pattern using your own [settings](/reference/settings):
```js
import { Florence } from "@freesewing/florence"
const pattern = new Florence({
paperless: true,
measurements: {
head: 390,
}
})
```
## 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 asymmetric 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.
:::
## Pattern attributes
- `Pattern.activePart`: Holds the id of the active part (while drafting)
- `Pattern.activeSet`: Holds the id of the active set (while drafting)
- `Pattern.config`: Holds the resolved pattern's configuration
- `Pattern.designConfig`: Holds the design's configuration before resolution
- `Pattern.parts`: Holds the parts used in the pattern
- `Pattern.plugins`: Holds the plugins used in the pattern
- `Pattern.settings`: Holds the settings used for the pattern
- `Pattern.stacks`: Holds the stacks used in the pattern
- `Pattern.store`: Holds the pattern-wide Store
- `Pattern.setStores`: Holds an array of stores, one for each set of settings.
## Pattern methods
<ReadMore />

View file

@ -0,0 +1,30 @@
---
title: Pattern.render()
---
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
```js
string pattern.render()
```
## Pattern.render() example
```js
import { Aaron } from "@freesewing/aaron"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements })
const svg = pattern.draft().render()
```

View file

@ -0,0 +1,53 @@
---
title: Pattern.sample()
---
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.
:::noteThis method is chainable as it returns the Pattern object:::
Under the hood, this method will call one of
[Pattern.sampleOption()](/reference/api/pattern/sampleoption),
[Pattern.sampleMeasurement()](/reference/api/pattern/samplemeasurement), or
[Pattern.sampleModels()](/reference/api/pattern/samplemodels) to sample
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()` method will instead read the
[`settings.sample`](/reference/settings/sample)
object to determine what needs to be done.
See the specific sample methods below for more details:
- [Pattern.sampleOption()](/reference/api/pattern/sampleoption)
- [Pattern.sampleMeasurement()](/reference/api/pattern/samplemeasurement)
- [Pattern.sampleModels()](/reference/api/pattern/samplemodels)
## Pattern.sample() signature
```js
Pattern pattern.sample()
```
## Pattern.sample() example
```js
import { Aaron } from "@freesewing/aaron"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({
sample: {
models: measurements
}
})
const svg = pattern.sample().render()
```

View file

@ -0,0 +1,39 @@
---
title: Pattern.sampleMeasurement()
---
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.
:::
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.sampleMeasurement() signature
```js
Pattern pattern.sampleMeasurement(string measurement)
```
## Pattern.sampleMeasurement() example
```js
import { Aaron } from "@freesewing/aaron"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements })
const svg = pattern.draft().sampleMeasurement('chest')
```

View file

@ -0,0 +1,67 @@
---
title: Pattern.sampleModels()
---
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.
:::
:::noteThis method is chainable as it returns the Pattern object:::
## 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:
```js
{
modelName1: {
measurement1: valueInMm,
measurement2: valueInMm,
// ...
},
modelName2: {
measurement1: valueInMm,
measurement2: valueInMm,
// ...
},
// ...
}
```
The (optional) string you can pass as the second parameter should hold the
key of one of the models in the first parameter. In our example above, it
could hold `modelName2` for example.
By passing this second parameter, you can put the _focus_ on one of the models,
which will influence the render style, and make it
easier to see a comparison between a given set of measurements, and the rest.
Alternatively, you can use the `Pattern.sample()` method and set `settings.sample.focus` to the key
identifying your model in the models object.
## Pattern.sampleModels() example
```js
import { Aaron } from "@freesewing/aaron"
const Aaron = new Aaron()
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const svg = aaron.sampleModels(measurements, "34").render()
```

View file

@ -0,0 +1,46 @@
---
title: Pattern.sampleOption()
---
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](/reference/api/part/config/options/):
- For a Percentage or Degree option, 10 steps will be sampled, between min and max
- For a Counter or Millimeter option, a maximum of 10 steps will be sampled, between min and max
- For a Constant numeric option, 10 steps will be sampled between 90% and 110% of the value
- For a List option, each option in the list will be sampled
- For a Boolean option, both `false` and `true` will be sampled
:::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.
:::
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.sampleOption() signature
```js
Pattern pattern.sampleOption(string option)
```
## Pattern.sampleOption() example
```js
import { Aaron } from "@freesewing/aaron"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements })
const svg = pattern.draft().sampleOption('backlineBend')
```

View file

@ -0,0 +1,38 @@
---
title: Pattern.use()
---
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/).
:::noteThis method is chainable as it returns the Pattern object:::
## Pattern.use() signature
```js
Pattern pattern.use(object plugin)
// or
Pattern pattern.use(object plugin, object plugin_data)
```
See [the plugin guide](/guides/plugins/) for details on how to structure
you plugin object.
## Pattern.use() example
```js
import { Aaron } from "@freesewing/aaron"
import { pluginTheme } from "@freesewing/plugin-theme"
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
).measurements
const pattern = new Aaron({ measurements }).use(pluginTheme)
const svg = pattern.draft().render()
```