1
0
Fork 0

wip: Working on better developer docs

This commit is contained in:
joostdecock 2021-09-25 17:05:18 +02:00
parent c16b212bb9
commit e0a261731f
25 changed files with 461 additions and 152 deletions

View file

@ -3,6 +3,11 @@ title: Design
order: 10
---
The `Design` object in FreeSewing's core library serves a single purpose:
To instantiate new pattern designs.
## Design constructor
```js
function freesewing.Design(
object config,
@ -11,7 +16,7 @@ function freesewing.Design(
)
```
A super-constructor to create a new pattern design.
This constructor creates a new pattern design.
It takes the following arguments:
- `config` : The pattern configuration
@ -31,8 +36,9 @@ const Sorcha = new freesewing.Design(config, plugins)
<Tip>
This method is a *super-constructor*. It will return a constructor
method that should be called to instantiate your pattern.
method that will become the default export of your design and
should be called to instantiate your pattern.
See [creating a new pattern design](/howtos/code/create-new-design) for an example.
See [creating a new pattern design](/howtos/code/create-new-design) for a complete example.
</Tip>

View file

@ -7,27 +7,42 @@ icons:
about: FreeSewing's core API reference documents all available methods and objects
---
This is the documentation for FreeSewing's core library, published as `@freesewing/core` on NPM.
It's a complete toolbox for parametric design with a primary focus on
sewing patterns, but can be utilized for a variety of similar 2D design tasks.
## Getting started
To get started, import the library:
```js
import freesewing from '@freesewing/core'
```
The `@freesewing/core` default export is a single object with the following properties:
- `version`: A string containing the FreeSewing version number
- `Design()`: A *super-constructor* to create new pattern designs.
- `Pattern()`: The `Pattern` constructor
- `Point()`: The `Point` constructor
- `Path()`: The `Path` constructor
- `Snippet()`: The `Snippet` constructor
- `utils`: A collection of utilities
- `patterns`: FIXME: Explain use-case
- `plugins`: FIXME: Explain use-case
<Tip>
You will typically only use the `Design()` super-constructor.
The other constructors and utilities are exported to facilitate unit testing.
This is the reference documentation. For a more hands-on walkthrough,
please refer to our [pattern design tutorial](/tutorials/pattern-design/)
</Tip>
## Properties
The `@freesewing/core` default export is a single object with the following properties:
- `Design`: The [Design constructor](/reference/api/design/) to create a new design
<Note>
You will typically use the `Design()` constructor.
The other constructors and utilities below are exported to facilitate unit testing.
</Note>
- `Path`: The [Path constructor](/reference/api/path) to create a new path
- `Pattern`: The [Pattern constructor](/reference/api/pattern) to create a new pattern
- `Point`: The [Point constructor](/reference/api/point) to create a new point
- `Snippet`: The [Snippet constructor](/reference/api/snippet) to create a new snippet
- `utils`: A collection of [utilities](/reference/api/utils)
- `version`: A string containing the `@freesewing/core` version number

View file

@ -1,11 +1,20 @@
---
title: apply()
title: Pattern.apply()
---
A pattern's `apply()` method merges the settings passed to it with
the current pattern settings. It is used internally to merge the
settings that are passed to the pattern constructor with the default settings.
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.apply() signature
```js
Pattern pattern.apply(object settings)
```
Merges the settings passed to it with the current pattern settings.
<Note>
You are unlikely to ever user this method directly.
</Note>
<Fixme>Code example</Fixme>

View file

@ -1,27 +1,33 @@
---
title: draft()
title: Pattern.draft()
---
A pattern's `draft()` method will draft all 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.
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.draft() signature
```js
Pattern pattern.draft()
```
Does the actual work of drafting the pattern.
Your draft method should return the pattern object, thus making it chainable.
## Pattern.draft() example
```js
import freesewing from "@freesewing/core"
import aaron from "@freesewing/aaron"
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
let pattern = new aaron({
const pattern = new Aaron({
settings: {
embed: true,
measurements: models.manSize38
}
},
measurements: models.manSize38
})
let svg = pattern.draft().render()
const svg = pattern.draft().render()
```

View file

@ -3,7 +3,34 @@ title: Pattern
order: 15
---
A Pattern object comes wih the following properties:
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 generated a made-to-measure pattern.
## Pattern constructor
```js
function freesewing.Pattern(object settings)
```
A pattern is instantiated by passing a [settings object](/reference/settings/) to the pattern constructor.
This settings objects holds, amongst other things, the measurements and options chosen by the user.
Refer to the [settings documentation](/reference/settings/) for an exhaustive list.
## Pattern properties
| Property | Description |
| --------:| ----------- |
| `config` | The pattern configuration |
| `is` | A string that will be set to `draft` or `sample` when you respectively draft or sample a pattern. |
| `options` | The options as set by the user |
| `parts` | A plain object to hold your parts |
| `Part` | The [Part](/en/docs/developer/api/part) constructor |
| `settings` | The settings as set by the user |
| `store` | A [Store](/en/docs/developer/api/store) instance |
| `svg` | An [Svg](/en/docs/developer/api/svg) instance |
- `settings` : The settings as set by the user
- `options` : the options as set by the user
@ -15,6 +42,6 @@ A Pattern object comes wih the following properties:
- `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.
In addition, a Pattern object has the following methods:
## Pattern methods
<ReadMore list />

View file

@ -1,15 +1,48 @@
---
title: getRenderProps()
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
a React component. It should only be called after calling `Pattern.draft()`.
## Pattern.getRenderProps() signature
```js
Object pattern.getRenderProps()
```
Returns the *props* that allow a pattern to be rendered as a React component.
The object returned by this method contains the following properties:
| Property | Description |
| --------:| ----------- |
| `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 details.
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

@ -1,25 +1,47 @@
---
title: needs()
title: Pattern.needs()
---
A pattern's `needs()` method will return `true` or `false`
depending on whether a pattern part is a requirement for the
pattern to be drafted in its current configuration. In other
words, it will return `true` of the part is *needed*.
A part is needed if:
- it is requested by the user in [the `only` pattern setting](/reference/settings/only/)
- it is a dependency of a part requested by the user in [the `only` pattern setting](/reference/settings/only/)
- [the `only` pattern setting](/reference/settings/only/) is not set or is `false`, and the part is not hidden
<Note>
You don't typically use this method. Instead, you configure part
dependencies in your [configuration file](/reference/config/).
</Note>
## Pattern.needs() signature
```js
bool pattern.needs(string partName)
```
Returns `true` or `false` depending on whether a pattern part is *needed*, based
on the value of [pattern.settings.only](/reference/settings/only/) and the
part dependencies listed in the configuration file.
## Pattern.needs() example
A part is needed if:
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
- it is requested by the user in the `only` setting
- it is a dependency of a part requested by the user in the `only` setting
- the `only` setting is not set or is `false`, and the part is not hidden
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
<Note>
if (pattern.needs('front')) console.log('Front is needed')
else console.log('Front is not needed')
```
You don't typically use this method. Instead, configure part
dependencies in your [configuration file](/reference/config/).
</Note>

View file

@ -1,15 +1,41 @@
---
title: on()
title: Pattern.on()
---
A pattern's `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>
## Pattern.on() signature
```js
void pattern.on(string hook, function method)
Pattern pattern.on(string hook, function method)
```
Allows you to attach a method to one of our hooks.
<Tip>
Takes the hook name as a first argument, and your method as a second.
Refer to [the Lifecycle hooks documentation](/reference/hooks/) for a list
of all avaialble lifecycle hooks, as well as the signature of the function you
should pass it.
See [extending freesewing](/extend/) for details about extending freesewing with hooks.
</Tip>
## 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
</Tip>
<Fixme>Code example</Fixme>

View file

@ -1,10 +1,30 @@
---
title: render()
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
[Pattern.draft()](/reference/api/pattern/draft/) first.
# Pattern.render() signature
```js
string pattern.render()
```
Returns your drafted pattern as SVG.
# Pattern.render() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
const svg = pattern.draft().render()
```

View file

@ -1,17 +1,17 @@
---
title: sample()
title: Pattern.sample()
---
```js
Pattern pattern.sample()
```
A pattern's `sample()` method will *sample* the pattern which means
to draft it in different iterations while adjusting the input settings.
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.
This method calls either [sampleOption()](#sampleoption),
[sampleMeasurement()](#samplemeasurement),
or [sampleModels()](#samplemodels).
Unlike those three methods who you need to pass the relevant info to,
[sample()](#pattern-sample) will read the `pattern.settings.sample`
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.
The possiblities are:
@ -21,7 +21,15 @@ The possiblities are:
- **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).
See the specific sample methods below for more details.
See the specific sample methods below for more details:
- [Pattern.sampleOption()](/reference/apu/pattern/sampleoption)
- [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>
@ -34,3 +42,40 @@ In other words, for each sample, the anchor point will be kept in the same locat
</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
Pattern pattern.sample()
```
## Pattern.sample() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
const svg = pattern.sample().render()
```

View file

@ -1,28 +1,38 @@
---
title: sampleMeasurement
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.
<Tip>
The goal of measurement sampling is to understand the impact of a given measurement on a pattern.
</Tip>
<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
Pattern pattern.sampleMeasurement(string measurement)
```
```
Samples a measurement by drafting 10 variations of the pattern
while adapting the measurement between 90% and 110% of its original value.
The goal of measurement sampling is to understand the impact of a given measurement on a pattern.
## Pattern.sampleMeasurement() example
```js
import freesewing from "@freesewing/core"
import aaron from "@freesewing/aaron"
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
let pattern = new aaron({
settings: {
embed: true,
measurements: models.manSize38
},
})
const pattern = new Aaron({ measurements: models.manSize38 })
let svg = pattern.sampleMeasurement("chestCircumference").render()
const svg = pattern.sampleMeasurement("chest").render()
```

View file

@ -1,42 +1,70 @@
---
title: sampleModels()
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.
<Tip>
The goal of model sampling is to verify that a pattern grades correctly up and down as sizes change.
</Tip>
<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)
```
Samples a pattern for a number of models you pass to it.
The goal of model sampling is to verify that a pattern grades correctly up and down as sizes change.
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 measrurements, 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 freesewing from "@freesewing/core"
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
let aaron = new Aaron({
settings: {
embed: true,
measurements: models.manSize38
},
})
const Aaron = new Aaron()
let svg = aaron.sampleModels(models, "manSize38").render()
const svg = aaron.sampleModels(models, "manSize38").render()
```
<Tip>
###### Model focus: Making a comparison
When sampling models, you can put the *focus* on one of the models, thereby making it
easier to see a comparison between a given set of measrurements, and the rest.
To do so, pass a second parameter to the `sampleModels()` method. This should be
the key of the model in the models object for that model you want the focus to be on.
Alternatively, you can use the `sample()` method and set `settings.sample.focus` to the key
identifying your model in the models object.
</Tip>

View file

@ -1,34 +1,52 @@
---
title: sampleOption()
title: Pattern.sampleOption()
---
```js
Pattern pattern.sampleOption(string option)
```
Samples an option by drafting variations of the pattern while adapting the option's value.
The exact behavior depends on [the type of option](/config#options):
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.
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/):
- 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
<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>
<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
import freesewing from "@freesewing/core"
import aaron from "@freesewing/aaron"
import models from "@freesewing/models"
let pattern = new aaron({
settings: {
embed: true,
measurements: models.manSize38
},
})
let svg = pattern.sampleOption("necklineDrop").render()
Pattern pattern.sampleOption(string option)
```
## Pattern.sampleOption() example
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
const pattern = new aaron({
measurements: models.manSize38
})
const svg = pattern.sampleOption("necklineDrop").render()
```

View file

@ -1,19 +1,36 @@
---
title: use()
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/).
<Note>This method is chainable as it returns the Pattern object</Note>
## Pattern.use() signature
```js
Pattern pattern.use(object plugin)
```
Loads a freesewing plugin. This method is chainable.
See [extending freesewing](/extend) for details about extending
freesewing with plugins.
See [the plugin guide](/guides/plugins/) for details on how to structure
you plugin object.
<Fixme>
## Pattern.use() example
- Add code example
- Explain difference between run and build-time plugins
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
import theme from "@freesewing/theme"
</Fixme>
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
}).use(theme)
const svg = pattern.draft().render()
```

View file

@ -2,18 +2,43 @@
title: wants()
---
A pattern's `wants()` method will return `true` or `false`
depending on whether a pattern part is requested in the
current pattern configuration. In other words, it will
return `true` of the part is *wanted* by the user.
A part is wanted if:
- it is requested by the user in [the `only` pattern setting](/reference/settings/only/)
- [the `only` pattern setting](/reference/settings/only/) is not set or is `false`, and the part is not hidden
<Note>
You don't typically use this method. Instead, you configure part
dependencies in your [configuration file](/reference/config/).
</Note>
## Pattern.wants() signature
```js
bool pattern.wants(string partName)
```
Returns `true` or `false` depending on whether a pattern part is *wanted*, based
on the value of [pattern.settings.only](/settings#only).
## Pattern.wants() example
A part is wanted if:
```js
import Aaron from "@freesewing/aaron"
import models from "@freesewing/models"
- it is requested by the user in the `only` setting
- the `only` setting is not set or is `false`, and the part is not hidden
const pattern = new Aaron({
settings: {
embed: true,
},
measurements: models.manSize38
})
> You don't typically use this method. Instead, configure part
> dependencies in your [configuration file](/config).
if (pattern.wants('front')) console.log('Front is wanted')
else console.log('Front is not wanted')
```

View file

@ -1,15 +1,17 @@
---
title: svg
title: Svg
components: true
order: 80
---
The **svg** attribute of the [Pattern](/en/docs/developer/api/pattern) holds
an object that represents an SVG document.
The `Svg` object in FreeSewing's core library represents an SVG document.
It is not directly exposed, but it is available as the `svg` attribute
of a [Pattern object](/reference/api/pattern/).
While the methods exposed by this object are only used internally,
its attributes are useful for situations where you
want to develop a plugin, or use a custom layout:
## Properties
<ReadMore list />