chore(markdown): Move non-api docs to reference
This commit is contained in:
parent
8c3c0c9910
commit
8e9e5052ee
62 changed files with 68 additions and 49 deletions
|
@ -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 />
|
||||
|
||||
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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
|
||||
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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.
|
|
@ -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
|
||||
|
|
@ -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.
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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)
|
||||
```
|
|
@ -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.
|
|
@ -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
|
||||
|
|
@ -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
|
|
@ -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)
|
||||
```
|
|
@ -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/)
|
||||
|
|
@ -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/)
|
|
@ -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)
|
||||
```
|
|
@ -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 |
|
|
@ -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/)
|
|
@ -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>
|
|
@ -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 |
|
|
@ -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.
|
|
@ -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)
|
||||
```
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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/)
|
|
@ -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
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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 />
|
|
@ -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"
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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"
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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
|
||||
}
|
||||
})
|
||||
```
|
|
@ -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"]
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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
|
||||
})
|
||||
```
|
|
@ -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"
|
||||
})
|
||||
```
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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 />
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue