1
0
Fork 0

chore(markdown): Move non-api docs to reference

This commit is contained in:
Joost De Cock 2022-09-30 15:34:59 +02:00
parent 8c3c0c9910
commit 8e9e5052ee
62 changed files with 68 additions and 49 deletions

View file

@ -1,86 +0,0 @@
---
title: Hooks API
for: developers
about: Documents the available lifecycle hooks in Core and how to use them
---
A **hook** is a lifecycle event.
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 specific hook for details)
- Data passed when the hook was registered (optional)
## Pattern lifecycle
<Dot caption="A schematic overview of FreeSewing lifecycle hooks">
```dot
rankdir="TB"
compound=true
subgraph cluster_pattern {
fontsize=14
color="transparent"
preInit [shape="box" color="tc-orange"]
postInit [shape="box" color="tc-orange"]
subgraph cluster_draft {
label="Pattern.draft()"
color="tc-teal"
preDraft [shape="box" color="tc-teal"]
preSetDraft [shape="box" color="tc-teal"]
prePartDraft [shape="box" color="tc-teal"]
postPartDraft [shape="box" color="tc-teal"]
postSetDraft [shape="box" color="tc-teal"]
postDraft [shape="box" color="tc-teal"]
}
subgraph cluster_sample {
label="Pattern.sample()"
color="tc-sky"
preSample [shape="box" color="tc-sky"]
postSample [shape="box" color="tc-sky"]
}
subgraph cluster_getRenderProps {
label="Pattern.getRenderProps()"
color="tc-gray"
preRenderProps [label="preRender" shape="box" color="tc-teal"]
}
subgraph cluster_render {
label="Pattern.render()"
color="tc-gray"
preRender [shape="box" color="tc-teal"]
insertText [shape="box" color="tc-teal"]
postRender [shape="box" color="tc-teal"]
}
}
preInit -> postInit
postInit -> preDraft
preDraft -> preSetDraft -> preSetDraft
preSetDraft -> prePartDraft -> prePartDraft
prePartDraft -> postPartDraft -> postPartDraft
postPartDraft -> postSetDraft -> postSetDraft
postSetDraft -> postDraft
postDraft -> preRenderProps
postDraft -> preRender
preRender -> insertText -> insertText
insertText -> postRender
postInit -> preSample
preSample -> postSample
postSample -> preRenderProps
postSample -> preRender
```
</Dot>
## Lifecycle hooks
Below is a list of all available lifecycle hooks:
<ReadMore list />

View file

@ -1,55 +0,0 @@
---
title: insertText
---
The `insertText` lifecycle hook is called when text is about to be inserted
during rendering.
It is typically used for translation, as is the case
in [our i18n plugin](/reference/plugins/i18n/).
## Signature
```js
string hook(string locale='en', string text)
```
## Example
```js
// Let' get LOUD by turning everything into UPPERCASE
pattern.on(
'insertText',
(locale, text) => text.toUpperCase()
)
```
## Notes
When we say that _this hook is called when text is about to be inserted_, that is a simplified view.
In reality, this hook is called:
- For every string of text added to a given Point or Path
- For the combined result of these values, joined together with spaces
Let's use an example to clarify things:
```js
points.example
.addText("seamAllowance")
.addText(": 1cm")
```
For the example point above, the `insertText` hook will end up being called 3 times:
- First it will pass `seamAllowance` to the plugin
- Then it will pass `: 1cm` to the plugin
- Finally it will pass `seamAllowance : 1cm` to the plugin
Having the `insertText` hook only run once with `Seam allowance: 1cm` would be problematic because
the seam allowance may differ, or perhaps we're using imperial units, and so on.
Instead, you can (and should) divide your text into chunks that need translating, and chunks that do not.
This is also why we're not inserting **Seam allowance** but rather **seamAllowance**;
It is merely a key to indicate what translation we want to replace this text with.

View file

@ -1,23 +0,0 @@
---
title: postDraft
---
The `postDraft` lifecycle hook runs just after your pattern is drafted.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postDraft', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `postDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,23 +0,0 @@
---
title: postInit
---
The `postInit` lifecycle hook runs just after a pattern is initialized.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postInit', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `postInit` hook is rarely used, but it's there if you need it.

View file

@ -1,24 +0,0 @@
---
title: postLayout
---
The `postLayout` lifecycle hook runs just after the pattern layout is
calculated.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postLayout', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `postLayout` hook is rarely used, but it's there if you need it.

View file

@ -1,27 +0,0 @@
---
title: postPartDraft
---
The `postPartDraft` lifecycle hook runs just after a part is drafted.
It will fire once for each part in each set (of settings).
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postPartDraft', pattern => {
// Mutate the pattern object here
// You can use the pattern.activePart
// and pattern.activeSet properties to
// figure out for which part this hook was fired
}
```
## Notes
The `postPartDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,19 +0,0 @@
---
title: postRender
---
The `postRender` lifecycle hook is triggered after the SVG is rendered.
It will only fire when `Pattern.render()` is called.
## Signature
```js
null hook(Svg svg)
```
## Notes
The `postRender` hook is rarely used, but it's there if you need it.
Like the `preRender` hook, it receives [the SVG object](/api/svg) as its first
parameter.

View file

@ -1,30 +0,0 @@
---
title: postSample
---
The `postSample` hook runs just after your pattern is sampled.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postSample', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `postSample` hook is rarely used, but it's there if you need it.
It is triggered just before the end of either:
- the [Pattern.sampleOption()](/reference/api/pattern/sampleoption) method
- the [Pattern.sampleMeasurement()](/reference/api/pattern/samplemeasurement) method
- the [Pattern.sampleModels()](/reference/api/pattern/samplemodels) method

View file

@ -1,24 +0,0 @@
---
title: postSetDraft
---
The `postSetDraft` lifecycle hook runs just after a set (of settings) is
drafted. It will fire once for each set when calling `Pattern.draft()`.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('postSetDraft', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `postSetDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,23 +0,0 @@
---
title: preDraft
---
The `preDraft` lifecycle hook runs just before your pattern is drafted.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('preDraft', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `preDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,23 +0,0 @@
---
title: preInit
---
The `preInit` lifecycle hook runs just before a pattern will be initialized.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('preInit', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `preInit` hook is rarely used, but it's there if you need it.

View file

@ -1,27 +0,0 @@
---
title: prePartDraft
---
The `prePartDraft` lifecycle hook runs just before a part is drafted.
It will fire once for each part in each set (of settings).
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('prePartDraft', pattern => {
// Mutate the pattern object here
// You can use the pattern.activePart
// and pattern.activeSet properties to
// figure out for which part this hook was fired
}
```
## Notes
The `prePartDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,20 +0,0 @@
---
title: preRender
---
The `preRender` lifecycle hook is triggered just before your pattern is
rendered to SVG.
## Signature
```js
null hook(Svg svg)
```
## Notes
The `preRender` hook is typically used to change the result of the render, for
example by adding CSS to the SVG output.
Like the `postRender` hook, it receives [the SVG object](/api/svg) as its first
parameter.

View file

@ -1,30 +0,0 @@
---
title: preSample
---
The `preSample` hook runs just before your pattern is sampled.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('preSample', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `preSample` hook is rarely used, but it's there if you need it.
It is triggered just before the start of either:
- the [Pattern.sampleOption()](/reference/api/pattern/sampleoption) method
- the [Pattern.sampleMeasurement()](/reference/api/pattern/samplemeasurement) method
- the [Pattern.sampleModels()](/reference/api/pattern/samplemodels) method

View file

@ -1,24 +0,0 @@
---
title: preSetDraft
---
The `preSetDraft` lifecycle hook runs just before a set (of settings) is
drafted. It will fire once for each set when calling `Pattern.draft()`.
## Signature
```js
null hook(Pattern pattern)
```
## Example
```js
pattern.on('preSetDraft', pattern => {
// Mutate the pattern object here
}
```
## Notes
The `preSetDraft` hook is rarely used, but it's there if you need it.

View file

@ -1,52 +0,0 @@
---
title: banner
---
The `banner` macro allows you to add repeating text along a path.
It is provided by the [banner plugin](/reference/plugins/banner).
## Signature
```js
macro('banner', {
Path path,
String text,
Number dy=1,
Number spaces=12,
Number repeat=10,
})
```
## Example
<Example caption="Example of the banner macro">
```js
({ Point, points, Path, paths, macro, part }) => {
points.from = new Point(0,0)
points.to = new Point(320,0)
paths.banner = new Path()
.move(points.from)
.line(points.to)
.move(new Point(0,-10)) // Prevent clipping
macro('banner', {
path: paths.banner,
text: 'banner',
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------:|------------|------------|-------------|
| `path` | | `Path` | The Path to add the text on |
| `text` | | `text` | The text to place repeat along the path |
| `dy` | `1` | `number` | Controls how far the text will be located above the path |
| `spaces` | `12` | `number` | The number of spaces to place between repetitions |
| `repeat` | `10` | `number` | The number of repetitions |

View file

@ -1,48 +0,0 @@
---
title: bartack
---
The `bartack` macro allows you to add a _bartack_ marker to your sewing
pattern. It is provided by the [bartack plugin](/reference/plugins/bartack/).
## Signature
```js
macro('banner', {
Point anchor,
Number angle=0,
Number density=3,
Number length=15,
String prefix='',
String suffix='',
Number width=3,
})
```
## Example
<Example caption="Example of the bartack macro">
```js
({ macro, Point, part }) => {
macro('bartack', {
anchor: new Point(0,0),
length: 25
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------:|------------|------------|-------------|
| `anchor` | | `Point` | The point to start the bartack from |
| `angle` | `0` | `number` | The angle under which to draw the bartack |
| `density` | `3` | `number` | Controls how close the stitches are togeter |
| `length` | `15` | `number` | Length of the bartack |
| `prefix` | | `string` | A prefix to apply to the names of the generated path and points |
| `suffix` | | `string` | A suffix to apply to the names of the generated path and points |
| `width` | `3` | `number` | Width of the bartack |

View file

@ -1,54 +0,0 @@
---
title: bartackAlong
---
The `bartackAlong` macro allows you to add a _bartack_ marker to your sewing pattern.
More specifically, a bartack along a path.
It is provided by the [bartack plugin](/reference/plugins/bartack/).
## Signature
```js
macro('banner', {
Number angle=0,
Number density=3,
Number length=15,
Path path,
String prefix='',
String suffix='',
Number width=3,
})
```
## Example
<Example caption="Example of the bartackAlong macro">
```js
({ Point, Path, macro, part }) => {
macro('bartackAlong', {
path: new Path()
.move(new Point(15,15))
.curve(
new Point(20, 20),
new Point(30, 20),
new Point(35, 15),
)
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------:|------------|------------|-------------|
| `angle` | `0` | `number` | The angle under which to draw the bartack |
| `density` | `3` | `number` | Controls how close the stitches are togeter |
| `length` | `15` | `number` | Length of the bartack |
| `path` | | `Path` | The path the bartack should follow |
| `prefix` | | `string` | A prefix to apply to the names of the generated path and points |
| `suffix` | | `string` | A suffix to apply to the names of the generated path and points |
| `width` | `3` | `number` | Width of the bartack |

View file

@ -1,60 +0,0 @@
---
title: bartackFractionAlong
---
The `bartackFractionAlong` macro allows you to add a _bartack_ marker to your
sewing pattern. More specifically, a bartack along a fraction of a path. It
is provided by the [bartack plugin](/reference/plugins/bartack/).
## Signature
```js
macro('banner', {
Number angle=0,
Number density=3,
Number end=1,
Number length=15,
Path path,
String prefix='',
Number start=0,
String suffix='',
Number width=3,
})
```
## Example
<Example caption="Example of the bartackFractionAlong macro">
```js
({ Point, Path, macro, part }) => {
macro('bartackFractionAlong', {
path: new Path()
.move(new Point(15,15))
.curve(
new Point(20, 20),
new Point(30, 20),
new Point(35, 15),
),
start: 0.2,
end: 0.8,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------:|------------|------------|-------------|
| `angle` | `0` | `number` | The angle under which to draw the bartack |
| `density` | `3` | `number` | Controls how close the stitches are togeter |
| `end` | `1` | `number` | At which fraction of the path length (from `0` to `1`) should the bartack end |
| `length` | `15` | `number` | Length of the bartack |
| `path` | | `Path` | The path the bartack should follow |
| `prefix` | | `string` | A prefix to apply to the names of the generated path and points |
| `start` | `0` | `number` | At which fraction of the path length (from `0` to `1`) should the bartack start |
| `suffix` | | `string` | A suffix to apply to the names of the generated path and points |
| `width` | `3` | `number` | Width of the bartack |

View file

@ -1,62 +0,0 @@
---
title: cutonfold
---
The `cutonfold` macro adds a _cut on fold_ indicator to your pattern.
It is provided by the [cutonfold plugin](/reference/plugins/cutonfold).
## Signature
```js
macro('cutonfold', {
Point from,
Boolean grainline=false,
Number margin=5,
Number offset=15,
String prefix='',
Point to,
})
```
## Example
<Example caption="Example of the cut on fold indicator added by this macro">
```js
({ Point, macro, part }) => {
macro('cutonfold', {
from: new Point(0,0),
to: new Point(100,0),
grainline: true
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|------------:|---------|---------------------|-------------|
| `from` | | [Point](/reference/api/point) | The startpoint of the _cut on fold_ indicator |
| `to` | | [Point](/reference/api/point) | The endpoint of the _cut on fold_ indicator |
| `margin` | 5 | [Point](/reference/api/point) | The distance in % to keep from the start/end edge |
| `offset` | 15 | Number | The distance in mm to offset from the line from start to end |
| `grainline` | `false` | Boolean | Whether this cutonfold indicator is also the grainline |
## Notes
### It's safe to use a corner of your pattern part for this
Since this is typically used on corners, the generated cut-on-fold indicator
will not go all the way to the `to` and `from` points.
### Removing the cut on fold indicator
If you inherit a part with a cut on fold indicator and you'd like to remove it,
you can do so by passing `false` to the macro:
```js
macro('cutonfold', false)
```

View file

@ -1,58 +0,0 @@
---
title: Macros
---
Macros are a way to combine different operations into a single command.
Macros are typically provided by by plugins, but can also be added ad-hoc
without the need for a plugin.
## Signature
```js
null macro(object config, object props)
```
A macro receives a single configuration object as its first parameter.
The second parameter is the same object received by [the draft method in a
part](/reference/api/part/draft)
## Example
```js
pattern.use({
name: 'My adhoc plugin',
macros: {
myMacro: function (so, props) {
// Do something wonderful here
},
myOtherMacro: function (so, props) {
// Do something wonderful here
},
}
}
```
Now you can use these macros in your part:
```js
({ macro, part }) => {
macro('myMacro', {
some: [ 'config', 'here' ],
more: 'config'
})
macro('myOtherMacro', 'Just a string')
return part
}
```
## Macros we maintain
Below is a list of macros from [the plugins we maintain](/reference/plugins):
<ReadMore list />
## Notes
We recommend allowing to *undo* a macro by passing `false` as its parameter.

View file

@ -1,49 +0,0 @@
---
title: flip
---
The `flip` macro flips (mirrors) an entire part vertically around either the
X-axis or the Y-axis. It is provided by the [flip
plugin](/reference/plugins/flip).
## Signature
```js
macro('flip', { String axis=x })
```
## Example
<Example caption="Example of the flip macro">
```js
({ Point, points, Path, paths, Snippet, snippets, macro, part }) => {
points.a = new Point(0,0)
points.b = new Point(90,20)
paths.a = new Path().move(points.a).line(points.b).setClass('dotted note')
snippets.a = new Snippet(
'logo',
paths.a.shiftFractionAlong(0.5)
).attr('data-scale', 0.2)
macro('flip')
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|----------------:|---------|---------------------|-------------|
| `axis` | 'x' | The axis to flip around. Either `x` or `y` |
## Notes
Under the hood, this macro will:
- Go through all Points in your Part, and multiply their (X or Y)-coordinate by -1
- Go through all the Paths in your Part, and for each drawing operation will multiply the (X or Y)-coordinare by -1
- Go through all the Snippets in your Part and multiply the (X or Y)-coordinate of the anchor point by -1

View file

@ -1,55 +0,0 @@
---
title: gore
---
The `gore` macro facilitates the drafting of [gores][1] which are typically
used in hats.
It is provided by the [gore plugin](/reference/plugins/grainline/).
## Signature
```js
macro('gore', {
Point from,
Number radius,
Number gores,
Number extraLength,
Boolean hidden=true,
String class='',
)
```
## Example
<Example caption="Example of the gore macro">
```js
({ Point, macro, part }) => {
macro('gore', {
from: new Point(0,0),
radius: 100,
gores: 6,
extraLength: 20,
hidden: false,
class: 'fabric',
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|--------------:|---------|------------|----------------------------------------------|
| `from` | | [Point][2] | The point to start drafting the gore from |
| `radius` | | number | The radius of the sphere the gores should cover |
| `gores` | | number | The text to put on the _grainline_ indicator |
| `extraLength` | | number | The length of the straight section after a complete semisphere |
| `hidden` | `true` | boolean | Whether or not to hide the generated path |
| `class` | | boolean | Any classes to add to the generated path |
[1]: https://en.wikipedia.org/wiki/Gore_\(segment\)
[2]: /reference/api/point

View file

@ -1,54 +0,0 @@
---
title: grainline
---
The `grainline` macro adds a _grainline_ indicator to your pattern.
It is provided by the [grainline plugin](/reference/plugins/grainline/).
## Signature
```js
macro('grainline', {
Point from,
Point to,
String text=grainline,
})
```
## Example
<Example caption="Example of the grainline indicator added by this macro">
```js
({ Point, macro, part }) => {
macro('grainline', {
from: new Point(0,0),
to: new Point(100,0),
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|------------:|-------------|------------|----------------------------------------------|
| `from` | | [Point][1] | The startpoint of the _grainline_ indicator |
| `to` | | [Point][1] | The endpoint of the _grainline_ indicator |
| `text` | 'grainline' | string | The text to put on the _grainline_ indicator |
[1]: /reference/api/point
## Notes
### Removing the grainline indicator
If you inherit a part with a grainline indicator and you'd like to remove it,
you can do so by passing `false` to the macro:
```js
macro('grainline', false)
```

View file

@ -1,57 +0,0 @@
---
title: hd
---
The `hd` macro adds a _horizontal dimension_ to your pattern.
It is provided by the [dimension plugin](/reference/plugins/dimension/).
## Signature
```js
macro('hd', {
String id,
Point from,
Boolean noEndtMarker,
Boolean noStartMarker,
String text,
Point to,
Number y,
})
```
## Example
<Example caption="An example of a horizontal dimension with the hd macro">
```js
({ Point, macro, part }) => {
macro('hd', {
from: new Point(0,0),
to: new Point(100,0),
y:15,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|----------------:|----------|---------------------|-------------|
| `from` | | [Point](/reference/api/point) | The startpoint of the dimension |
| `to` | | [Point](/reference/api/point) | The endpoint of the dimension |
| `y` | | Number | The Y-value at which to draw the dimension |
| `id` | auto-assigned | String | A custom ID under wich paths and points will be created |
| `text` | Horizontal distance | Number | The text to go on the dimension if not the from-to horizontal distance |
| `noStartMarker` | `false` | Boolean | Whether to not draw a start marker |
| `noEndMarker` | `false` | Boolean | Whether to not draw an end marker |
## Notes
Setting a custom ID will:
- Allow removal of the dimension with [the `rmd` macro](/reference/macros/rmd)
- Prevent removal of the dimension with [the `rmad` macro](/reference/macros/rmad/)

View file

@ -1,56 +0,0 @@
---
title: ld
---
The `ld` macro adds a _linear dimension_ to your pattern.
It is provided by the [dimension plugin](/reference/plugins/dimension/).
## Signature
```js
macro('ld', {
Number d,
String id,
Point from,
Boolean noEndtMarker,
Boolean noStartMarker,
String text,
Point to,
})
```
## Example
<Example caption="An example of a linear dimension with the ld macro">
```js
({ Point, macro, part }) => {
macro('ld', {
from: new Point(0,0),
to: new Point(100,20),
d:15,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-----------------|---------|---------------------|-------------|
| `from` | | [Point](/reference/api/point) | The startpoint of the dimension |
| `to` | | [Point](/reference/api/point) | The endpoint of the dimension |
| `d` | 0 | Number | The offset at which to draw the dimension |
| `id` | auto-assigned | String | A custom ID under wich paths and points will be created |
| `text` | Linear distance | Number | The text to go on the dimension if not the from-to linear distance |
| `noStartMarker` | `false` | Boolean | Whether to not draw a start marker |
| `noEndMarker` | `false` | Boolean | Whether to not draw an end marker |
## Notes
Setting a custom ID will:
- Allow removal of the dimension with [the `rmd` macro](/reference/macros/rmd)
- Prevent removal of the dimension with [the `rmad` macro](/reference/macros/rmad/)

View file

@ -1,50 +0,0 @@
---
title: miniscale
---
The `miniscale` macro adds a mini _scale box_ to your pattern. This box allows
users to verify their pattern is printed to scale.
The `miniscale` macro is provided by the [scalebox plugin](/reference/plugins/scalebox).
It is the mini version of [the scalebox macro](/reference/macros/scalebox/).
## Signature
```js
macro('miniscale', {
Point at,
Number rotate,
})
```
## Example
<Example caption="An example of the miniscale macro">
```js
({ Point, macro, part }) => {
macro('miniscale', {
at: new Point(0,0),
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------|---------|---------------------|-------------|
| `at` | | [Point](/reference/api/point) | The point to anchor the _scale box_ on |
| `rotate` | 0 | Number | Rotation in degrees |
## Notes
If you inherit a part with a miniscale on it and you'd like to remove all
points and paths generated by the miniscale macro, you can do so by passing
`false` to the macro:
```js
macro('miniscale', false)
```

View file

@ -1,59 +0,0 @@
---
title: mirror
---
The `mirror` macro allows you to mirror points and/or paths around a mirror
line. It is provided by the [mirror plugin](/reference/plugins/mirror/).
## Signature
```js
macro('mirror', {
Boolean clone,
Array mirror,
Function nameFormat,
Array paths,
Array points,
String prefix,
})
```
## Example
<Example caption="An example of the mirror macro">
```js
({ Point, points, Path, paths, macro, part }) => {
points.from = new Point(0,0)
points.cp1 = new Point(10,20)
points.cp2 = new Point(60,20)
points.to = new Point(70,0)
paths.example = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
macro('mirror', {
clone: true,
mirror: [
new Point(20,10),
new Point(20,20),
],
paths: Object.values(paths),
points: Object.values(points),
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------:|------------|------------|-------------|
| `mirror` | | `array` | Array with 2 [Point](/reference/api/point) objects that define the _mirror line_ |
| `clone` | `true` | `bool` | Whether to clone mirrored points and or paths |
| `points` | | `array` | An array of [Point](/reference/api/point) objects |
| `paths` | | `array` | An array of [Path](/reference/api/path) objects |
| `prefix` | `mirrored` | `string` | A prefix to apply to the names of the clones points and or paths. Ignored if `nameFormat` is set |
| `nameFormat` | | `function` | A method that receives the name of the path or point and should return the name for the cloned path and or point |

View file

@ -1,58 +0,0 @@
---
title: pd
---
The `pd` macro adds a _path dimension_ to your pattern, indicating the length
of a path. It is provided by the [dimension
plugin](/reference/plugins/dimension/).
## Signature
```js
macro('pd', {
Number d,
String id,
Path path,
Boolean noEndtMarker,
Boolean noStartMarker,
String text,
})
```
## Example
<Example caption="An example of a path dimension with the pd macro">
```js
({ Point, Path, paths, macro, part }) => {
paths.example = new Path()
.move(new Point(0,0))
.curve(new Point(20,10), new Point(60,10), new Point(80,0))
macro('pd', {
path: paths.example,
d: 15,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|----------------:|---------|---------------------|-------------|
| `path` | | [Path](/reference/api/path) | The path to draw the dimension along |
| `d` | 0 | Number | The offset at which to draw the dimension |
| `text` | Path length | Number | The text to go on the dimension if not the length of the path |
| `id` | auto-assigned | String | A custom ID under wich paths and points will be created |
| `noStartMarker` | `false` | Boolean | Whether to not draw a start marker |
| `noEndMarker` | `false` | Boolean | Whether to not draw an end marker |
## Notes
Setting a custom ID will:
- Allow removal of the dimension with [the `rmd` macro](/reference/macros/rmd)
- Prevent removal of the dimension with [the `rmad` macro](/reference/macros/rmad/)

View file

@ -1,41 +0,0 @@
---
title: rmad
---
The `rmad` macro removes all dimensions with the exception of those that were
created with a custom ID. It is provided by the [dimension
plugin](/reference/plugins/dimension/).
## Signature
```js
macro('rmad')
```
## Example
<Example caption="An example of the rmad macro">
```js
({ Point, macro, part }) => {
// This will be removed
macro('ld', {
from: new Point(10, 0),
to: new Point(40, 0),
d: 5,
})
// This will not removed
macro('ld', {
from: new Point(10, 20),
to: new Point(80, 20),
d: 5,
id: 'example' // custom ID
})
macro('rmad')
return part
}
```
</Example>

View file

@ -1,49 +0,0 @@
---
title: rmd
---
The `rmd` macro removes a dimension.
It is provided by the [dimension plugin](/reference/plugins/dimension/).
To be able to use this plugin, you need to give your dimension an id:
## Signature
```js
macro('rmd', {
String id
})
```
## Example
<Example caption="An example of the rmd macro">
```js
({ Point, macro, part }) => {
macro('ld', {
from: new Point(10, 0),
to: new Point(40, 0),
d: 5,
id: 'da',
})
macro('ld', {
from: new Point(10, 20),
to: new Point(80, 20),
d: 5,
id: 'db',
})
macro('rmd', { id: 'db' })
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|----------|---------|----------|-------------|
| `id` | | `string` | The id of the dimension to remove |

View file

@ -1,55 +0,0 @@
---
title: round
---
The `round` macro rounds a corner. It is provided by the [round
plugin](/reference/plugins/round/).
## Signature
```js
macro('round', {
String class,
Point from,
Boolean hide,
String prefix,
Number radius,
Point to,
Point via,
})
```
## Example
<Example caption="An example of the round macro">
```js
({ Point, points, macro, part }) => {
macro('round', {
from: new Point(0, 0),
to: new Point(100, 40),
via: new Point(100, 0),
radius: 30,
hide: false,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|------------:|---------|---------------------|-------------|
| `from` | | [Point](/reference/api/point) | The startpoint towards the corner to round |
| `to` | | [Point](/reference/api/point) | The endpoint away from the corner to round |
| `via` | | [Point](/reference/api/point) | The corner to round |
| `radius` | Maximum | Number | The radius in mm in not the maximum |
| `prefix` | | String | A prefix to give to the points and paths created by this macro |
| `hide` | `true` | Boolean | Whether to hide the path created by this macro |
| `class` | | String | Class(es) to assign to the path created by this macro |
## Notes
This macro is only intended for 90 degree corners.

View file

@ -1,61 +0,0 @@
---
title: scalebox
---
The `scalebox` macro adds a _scale box_ to your pattern. This box allows users
to verify their pattern is printed to scale.
The `scalebox` macro is provided by the [scalebox
plugin](/reference/plugins/scalebox).
## Signature
```js
macro('scalebox', {
Point at,
String lead,
Number rotate,
String text,
String title,
})
```
## Example
<Example caption="An example of the scalebox macro">
```js
({ Point, macro, part }) => {
macro('scalebox', {
at: new Point(0,0),
title: 'This is the title',
number: 666,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|-------------|---------|---------------------|-------------|
| `at` | | [Point](/reference/api/point) | The point to anchor the _scale box_ on |
| `lead` | FreeSewing | String | The lead text above the title |
| `title` | _pattern name + version_ | String | The title text |
| `text` | (\*) | String | The text below the title |
| `rotate` | 0 | Number | Rotation in degrees |
(\*) `freesewingIsMadeByJoostDeCockAndContributors \n withTheFinancialSupportOfOurPatrons`
## Notes
### Removing the scalebox
If you inherit a part with a scalebox on it and you'd like to remove all points and paths
generated by the scalebox macro, you can do so by passing `false` to the macro:
```js
macro('scalebox', false)
```

View file

@ -1,55 +0,0 @@
---
title: sprinkle
---
The `sprinkle` macro facilitates adding snippets to your pattern in bulk.
It is by the [sprinkle plugin](/reference/plugins/sprinkle).
## Signature
```js
macro('sprinkle', {
Array on,
Number scale,
Snippet snippet,
Number rotation,
})
```
## Example
<Example caption="An example of the sprinkle macro">
```js
({ Point, points, Path, paths, macro, part }) => {
points.a = new Point(0,0)
points.b = new Point(10,5)
points.c = new Point(20,0)
points.d = new Point(30,5)
points.e = new Point(40,0)
points.f = new Point(50,5)
points.g = new Point(60,0)
macro('sprinkle', {
snippet: 'button',
on: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
})
// Prevent clipping
paths.diag = new Path()
.move(points.a)
.move(points.g)
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|------------:|---------|------------------|-------------|
| `snippet` | | String | Name of the snippet to sprinkle |
| `on` | `[]` | Array of strings | An array with **the names** of points to add the snippet on |
| `scale` | 1 | number | Scale for the individual snippets |
| `rotate` | 0 | number | Rotation for the individual snippets |

View file

@ -1,58 +0,0 @@
---
title: title
---
The `title` macro adds a title to a pattern part.
It is provided by the [title plugin](/reference/plugins/title).
## Signature
```js
macro('title', {
Boolean append,
Point at,
String nr,
String prefix,
Number rotation,
Number scale,
String title,
})
```
## Example
<Example caption="An example of the title macro">
```js
({ Point, Path, paths, macro, store, part }) => {
// This is where name/version is supposed to be stored
store.set('data.version', 3)
store.set('data.name', 'Example')
macro('title', {
nr: 9,
title: 'The title',
at: new Point(0,0)
})
// Prevent clipping
paths.diag = new Path()
.move(new Point(0,-50))
.move(new Point(80,20))
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
| ----------:| :-----: | ------------------- | ----------- |
| `at` | | [Point](/reference/api/point) | The point at which to insert the title |
| `nr` | | String | The number of the pattern part |
| `title` | | String | The name of the pattern part. If title is not set or is an empty string, this won't be rendered, and the version will go beneath the nr.|
| `prefix` | | String | A prefix to add to the created points. This allow for more than 1 title per part, as long as you give them a different prefix.|
| `append` | `false` | Boolean | Set this to `true` to append the `nr` to any text already set in Point `at`'s attributes, rather than overwrite it |
| `rotation` | 0 | Number | An optional rotation in degrees |
| `scale` | 1 | Number | An optional scaling factor |

View file

@ -1,56 +0,0 @@
---
title: vd
---
The `vd` macro adds a _vertical dimension_ to your pattern.
It is provided by the [dimension plugin](/reference/plugins/dimension/).
## Signature
```js
macro('vd', {
String id,
Point from,
Boolean noEndtMarker,
Boolean noStartMarker,
String text,
Point to,
Number x,
})
```
## Example
<Example caption="An example of a vertical dimension with the vd macro">
```js
({ Point, macro, part }) => {
macro('vd', {
from: new Point(0,0),
to: new Point(0,40),
x:10,
})
return part
}
```
</Example>
## Configuration
| Property | Default | Type | Description |
|----------------:|---------|---------------------|-------------|
| `from` | | [Point](/reference/api/point) | The startpoint of the dimension |
| `to` | | [Point](/reference/api/point) | The endpoint of the dimension |
| `x` | | Number | The X-value at which to draw the dimension |
| `text` | Vertical distance | Number | The text to go on the dimension if not the from-to vertical distance |
| `id` | auto-assigned | String | A custom ID under wich paths and points will be created |
| `noStartMarker` | `false` | Boolean | Whether to not draw a start marker |
| `noEndMarker` | `false` | Boolean | Whether to not draw an end marker |
## Notes
Setting a custom ID will:
- Allow removal of the dimension with [the `rmd` macro](/reference/macros/rmd)
- Prevent removal of the dimension with [the `rmad` macro](/reference/macros/rmad/)

View file

@ -1,21 +0,0 @@
---
title: complete
---
The `complete` setting controls the level of details that's included on your pattern.
This has different uses, such as generating patterns to be cut out with a laser cutter.
The default `complete` setting is `true`.
Set this to `false` to draft a base outline of the pattern, rather than a fully detailed pattern.
<Note>
Setting this to `false` will force [sa](/reference/api/settings/sa) to be set to `false`.
</Note>
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
complete: false
})
```

View file

@ -1,27 +0,0 @@
---
title: embed
---
The `embed` setting controls the properties of the SVG document.
Set it to `true` to make SVG output suitable for embedding in a web page.
The default for `embed` is `false` which will include the `width` and `height`
attributes in the SVG tag, thereby making it suitable for printing.
When set to `true` the `width` and `height` attributes will not be added
which allows you to inject the SVG into an HTML document, where it will
responsively scale.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
embed: true
})
```
<Warning>
Do **not** use this for SVGs you want to print.
</Warning>

View file

@ -1,14 +0,0 @@
---
title: Settings
for: developers
about: Documents all the settings your pattern can receive, including the pattern options, measurmeents, and design options
---
Settings are what the user passes to your pattern at run-time.
Don't confuse them with the [pattern configuration](/reference/config/) that is determined by
the designer at build-time.
Below are the supported settings:
<ReadMore list />

View file

@ -1,19 +0,0 @@
---
title: idPrefix
---
The `idPrefix` setting allows you to specify a prefix that will be used
for all IDs in the SVG output. Its default value is `fs-`.
When you embed multiple SVGs on a single page, the IDs can and will conflict,
especially when using `xlink:href` references (such as for text on paths and snippets).
This allows you to specify an ID prefix so you can sidestep ID collisions.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
idPrefix: "something-else"
})
```

View file

@ -1,72 +0,0 @@
---
title: layout
---
The `layout` setting allows you to control the way pattern parts are
layed out on the pattern. There are 3 scenarios:
- layout is truthy: Do layout algorithmically
- layout is falsy: Do not do any layout apart from stacking all parts together
- layout is an object: Layout the parts as detailed in the layout object
Let's look at each in detail:
## layout is truthy
This is the default behaviour. Parts will be laid without overlap in
a space that's a small as possible.
Don't expect miracles here.
It's one of those things humans are far better at than
computers.
## layout is falsy
This will cause all parts to be laid out on top of each other.
It is almost certainly not what you want, but having all parts piled
on top of each other in the top left corner can be a good starting
point for a custom layout.
## layout is a layout object
This allows you to control the layout by passing a layout object.
This object should be structures as such:
```js
import brian from "@freesewing/brian";
let pattern = new brian({
layout: {
parts: {
front: {
move: {
x: 14,
y: -202
}
},
back: {
rotate: 90,
flipX: true,
flipY, true
}
}
}
});
```
For each part in the `parts` attribute of our layout object, there are 4 possible attributes:
- move: Expects an object with an `x` and `y` property, and will move the part by `x` along the X-axis and by `y` along the Y-axis
- rotate: Expects a number, and will rotate the part by number degrees around its center point
- flipX: Will flip/mirror the part horizontally
- flipY: Will flip/mirror the part vertically
<Related>
It is a long-standing ambition of ours to build a layout component that allows
users to manually do the layout of their pattern.
Core already supports it, but building a React component for it is non-trivial.
</Related>

View file

@ -1,18 +0,0 @@
---
title: locale
---
The `locale` setting allows you to specify the language of the pattern.
It should contain a 2-letter language code that indicates what language the user wants.
The default is `en`.
This will be used to set the `xml:lang` attribute in the `svg` tag when rendering to SVG,
and by [the i18n plugin](/reference/plugins/i18n/) to translate the pattern.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
locale: "es"
})
```

View file

@ -1,33 +0,0 @@
---
title: margin
---
The `margin` setting allows you to specify a part margin (in mm).
Each part will have this margin applied. The default is `2mm`.
This means that:
- At the edge of the SVG, the margin will be `margin * 1` (2mm by default)
- Between parts, the margin will be `margin * 2` (4mm by default)
Note that setting the margin to zero (or below) will cause parts to overlap.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
margin: 5
})
```
<Note>
###### For paperless, the minimal margin is 10mm
In paperless mode, the margin will not go below 10mm.
That is because text is not taken into account when calculating the bounding box of the part.
Since dimensions are typically the outermost elements in a paperless part,
a too narrow margin would cause the dimension text to get cut off.
</Note>

View file

@ -1,18 +0,0 @@
---
title: measurements
---
The `measurements` settings should hold and object with the
measurements to draft the pattern for.
The pattern configuration lists all required measurements.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
measurements: {
chestCircumference: 1080
shoulderSlope: 55
}
})
```

View file

@ -1,17 +0,0 @@
---
title: only
---
The `only` setting allows you to specify one or more parts to
draft/render, rather than the entire pattern.
It accepts either a single part name as a string, or an array of
one or more part names.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
only: ["front", "sleeve"]
})
```

View file

@ -1,24 +0,0 @@
---
title: options
---
The `options` setting allows you to specify values for the pattern-specific
options that have been implemented by the pattern designer.
The available options are listed in the pattern configuration.
Refer to the [the options section in the pattern configuration file][1] for
all details about using options in FreeSewing.
[1]: /reference/api/config/options
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
options: {
chestEase: 120
}
})
```
<Note>Unlike measurements, options come with defaults.</Note>

View file

@ -1,17 +0,0 @@
---
title: paperless
---
The `paperless` options allows you to generate a variant of the pattern
that does not require you to print it. It does that by including dimensions
on the pattern, as wel as a grid overlay.
Set this to `true` to draft a paperless pattern. The default is `false`.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
paperless: true
})
```

View file

@ -1,25 +0,0 @@
---
title: sa
---
The `sa` setting controls the seam allowance. It expects a value in mm
or `false` or `0` to disable seam allowance altogether.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
sa: 10
})
```
<Note>
This is ignored if [settings.complete](/reference/api/settings/complete) is `false`
<Comment by="joost">
Is it though?
I suspect this is not clearly enforced and we should clarify that.
</Comment>
</Note>

View file

@ -1,36 +0,0 @@
---
title: scale
---
<Note>
##### This setting is for future use
This setting has been added to our core library in anticipation
of a feature request that we've made part of [our v3
roadmap](https://github.com/freesewing/freesewing/discussions/1278).
It does not currently have any effect.
</Note>
The `scale` setting is an overal factor that will influence a variety of
factors to better support very large or very small patterns.
To be clear, `scale` does not change the size of the pattern itself.
It merely controls things like the various stroke width, the size of arrows
on dimensions, the size of the text on the pattern, and so on.
This is a feature request by those users that our generating pattern
for dolls. At such small sizes, many snippets, text, or logos become
so large (in comparison to the pattern) that they are problematic.
This setting is aimed at addressing that.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
scale: 0.5
})
```

View file

@ -1,17 +0,0 @@
---
title: units
---
The `units` setting controls the units used on the pattern.
It can be either `metric` (the default) or `imperial`.
Note that this is only used to format the output.
Freesewing expects mm as input.
```js
import Brian from "@freesewing/brian";
const pattern = new Brian({
units: "imperial"
})
```

View file

@ -1,14 +0,0 @@
---
title: bnotch
---
The `bnotch` snippet is intended for notches at the back, or when you
need an alternative to the default `notch`.
It is provided by [plugin-notches](/reference/plugins/notches/).
```js
snippets.demo = new Snippet('bnotch', points.anchor)
```
<Example part="snippets_bnotch">An example of the bnotch snippet</Example>

View file

@ -1,14 +0,0 @@
---
title: button
---
The `button` snippet is used to mark button placement and is
provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('button', points.anchor)
```
<Example part="snippets_button">
An example of the button snippet
</Example>

View file

@ -1,26 +0,0 @@
---
title: buttonhole-end
---
The `buttonhole-end` snippet is used to mark buttonhole placement and is
provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('buttonhole-end', points.anchor)
```
<Example part="snippets_buttonhole_end">
An example of the buttonhole-end snippet
</Example>
<Note>
##### Aligning your buttons and buttonholes
We provide three buttonhole snippets with a different alignment:
- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
</Note>

View file

@ -1,26 +0,0 @@
---
title: buttonhole-start
---
The `buttonhole-start` snippet is used to mark buttonhole placement and is
provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('buttonhole-start', points.anchor)
```
<Example part="snippets_buttonhole_start">
An example of the buttonhole-start snippet
</Example>
<Note>
##### Aligning your buttons and buttonholes
We provide three buttonhole snippets with a different alignment:
- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
</Note>

View file

@ -1,26 +0,0 @@
---
title: buttonhole
---
The `buttonhole` snippet is used to mark buttonhole placement and is
provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('buttonhole', points.anchor)
```
<Example part="snippets_buttonhole">
An example of the buttonhole snippet
</Example>
<Note>
##### Aligning your buttons and buttonholes
We provide three buttonhole snippets with a different alignment:
- [buttonhole](/reference/api/snippets/buttonhole/): Anchor point is the middle of the buttonhole
- [buttonhole-start](/reference/api/snippets/buttonhole-start/): Anchor point is the start of the buttonhole
- [buttonhole-end](/reference/api/snippets/buttonhole-end/): Anchor point is the end of the buttonhole
</Note>

View file

@ -1,9 +0,0 @@
---
title: Snippets
for: developers
about: Complete list of all the available snippets
---
Snippets are provided by plugins. Follow the links below for more info on and an example of a specific snippet:
<ReadMore list />

View file

@ -1,14 +0,0 @@
---
title: logo
---
The `logo` snippet inserts the FreeSewing logo. It is
provided by [plugin-logo](/reference/plugins/logo/).
```js
snippets.demo = new Snippet('logo', points.anchor)
```
<Example part="snippets_logo">
An example of the logo snippet
</Example>

View file

@ -1,14 +0,0 @@
---
title: notch
---
The `notch` snippet is intended for notches and is
provided by [plugin-notches](/reference/plugins/notches/).
```js
snippets.demo = new Snippet('bnotch', points.anchor)
```
<Example part="snippets_notch">
An example of the notch snippet
</Example>

View file

@ -1,15 +0,0 @@
---
title: snap-socket
---
The `snap-socket` snippet is used to mark the socket part of a snap button.
It is provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('snap-socket', points.anchor)
```
<Example part="snippets_snapsocket">
An example of the snap-socket snippet
</Example>

View file

@ -1,15 +0,0 @@
---
title: snap-stud
---
The `snap-stud` snippet is used to mark the stud part of a snap button.
It is provided by [plugin-buttons](/reference/plugins/buttons/).
```js
snippets.demo = new Snippet('snap-stud', points.anchor)
```
<Example part="snippets_snapstud">
An example of the snap-stud snippet
</Example>