VSinerva/freesewing
1
0
Fork 0
Code Activity

fix(dev): One-liner admonitions

Browse source
This commit is contained in:
Joost De Cock 2024-09-29 07:14:59 +02:00
parent a6d656c19e
commit da41cc0fc9
60 changed files with 860 additions and 659 deletions
Download patch file Download diff file Expand all files Collapse all files

24
sites/dev/docs/reference/api/design/readme.mdx
View file

@ -1,5 +1,5 @@
---
title: Design
title: Design
---
The `Design` named export in FreeSewing's core library is a constructor that
@ -17,7 +17,7 @@ Pattern Design({
## Example
```js
const Sorcha = new Design({
const Sorcha = new Design({
// design configuration here
})
```
@ -32,12 +32,14 @@ the Design configuration object only requires a `parts` property that should
hold an array of parts to include in the Design.
```js
const Sorcha = new Design({
parts: [ front, back, sleeve ],
const Sorcha = new Design({
parts: [front, back, sleeve],
})
```
:::tipA Design in FreeSewing is little more than a container for various Parts:::
:::tip
A Design in FreeSewing is little more than a container for various Parts
:::
Optionally, you can also pass it a `data` attribute
to hold any custom data you'd like to add to your Design.
@ -46,20 +48,19 @@ Any `data` you add to the Design constructor will be added
to [the Store](/reference/api/store).
```js
const Sorcha = new Design({
parts: [ front, back, sleeve ],
const Sorcha = new Design({
parts: [front, back, sleeve],
data: {
version: 3,
price: 12,
currency: 'euro'
}
currency: 'euro',
},
})
```
## Notes
The Design constructor is a _super-constructor_.
The Design constructor is a _super-constructor_.
It will return a constructor method that will a pattern based on your design.
## Properties
@ -74,4 +75,3 @@ This holds the design configuration as passed to the Design constructor.
### Design.patternConfig
Holds the resolved pattern configuration based on the configuration passed to the Design constructor.

104
sites/dev/docs/reference/api/part/config/hide/readme.mdx
View file

@ -4,8 +4,13 @@ title: Hiding parts
The `hide` option of a part's configuration controls how to hide it and/or its dependencies.
:::tipA hidden part will not be included in the output when it's rendered:::
:::tipThe `hide` configuration from parts that you include in your design will always override configuration from inherited parts.:::
:::tip
A hidden part will not be included in the output when it's rendered
:::
:::tip
The `hide` configuration from parts that you include in your design will always override configuration from inherited parts.
:::
## Settings
@ -20,12 +25,11 @@ const part = {
name: 'example.front',
after: [exampleBase],
// hide `exampleBase`
hide: {after: true},
draft: ({ part }) => part
hide: { after: true },
draft: ({ part }) => part,
}
```
### hide.always
To hide a specific part that would otherwise not be hidden by other configuration, add its name to the `hide.always` array
@ -37,8 +41,8 @@ const part = {
name: 'example.front',
after: [exampleBase, exampleBack],
// hide `exampleBack`
hide: {always: ['example.back']},
draft: ({ part }) => part
hide: { always: ['example.back'] },
draft: ({ part }) => part,
}
```
@ -53,16 +57,23 @@ const part = {
name: 'other.base',
from: exampleBase,
// hide exampleBase
hide: {from: true},
draft: ({ part }) => part
hide: { from: true },
draft: ({ part }) => part,
}
```
### hide.inherited
To hide parts that you have not explicitly included in this part that may be pulled in by the explicitly included `from` and `after` parts, set `hide.inherited` to a truthy value.
To hide parts that you have not explicitly included in this part that may be
pulled in by the explicitly included `from` and `after` parts, set
`hide.inherited` to a truthy value.
:::noteThis setting will hide any part included as `from` or `after` by your explicitly included `from` part or its dependency chain. It will also hide any part included as `from` by your explicitly included `after` part or its dependency chain. It will not hide the `after` parts of `after` parts:::
:::note
This setting will hide any part included as `from` or `after` by your
explicitly included `from` part or its dependency chain. It will also hide any
part included as `from` by your explicitly included `after` part or its
dependency chain. It will not hide the `after` parts of `after` parts
:::
```js
// the "after" chain
@ -109,30 +120,32 @@ const mainBack = {
}
```
:::tip
<details>
<summary>Need more clarity?</summary>
In the above example, the dependency tree for the part `example.mainBack` resolves to the following, with `from` dependencies in **bold** and `after` dependencies *italicized*.
In the above example, the dependency tree for the part `example.mainBack` resolves to the following, with `from` dependencies in **bold** and `after` dependencies _italicized_.
| Part | Dependency Type | Hidden |
| :---------------------------- | :-------------- | :----- |
| example.mainBack | root | false |
| - **other.parent** | from | false |
| - - **other.grandParent** | inherited from | true |
| - - - _other.grandParentBase_ | inherited after | true |
| - _example.mainFront_ | after | false |
| - - _example.mainFrontBase_ | after | false |
| - - **other.mainFront** | inherited from | true |
| Part | Dependency Type | Hidden |
| :---------- | :---------- | :-----|
| example.mainBack | root | false |
| - **other.parent** | from | false |
| - - **other.grandParent** | inherited from | true |
| - - - *other.grandParentBase* | inherited after | true |
| - *example.mainFront* | after | false |
| - - *example.mainFrontBase* | after | false |
| - - **other.mainFront** | inherited from | true |
Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either **bold** themselves, or underneath a **bold** part.
Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either **bold** themselves, or underneath a **bold** part.
</details>
:::
### hide.never
To __not__ hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
To **not** hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
```js
import { exampleBase } from './base.mjs'
@ -144,9 +157,9 @@ const part = {
// hide exampleBase and exampleBack
after: true,
// override hiding exampleBack so that it is shown
never: ['example.back']
never: ['example.back'],
},
draft: ({ part }) => part
draft: ({ part }) => part,
}
```
@ -158,18 +171,31 @@ To hide the current part, set `hide.self` to a truthy value:
const part = {
name: 'example.front',
// hide `example.front`
hide: {self: true},
draft: (({ part }) => part)
hide: { self: true },
draft: ({ part }) => part,
}
```
## Presets
We provide two presets for common hiding configurations. For convenience, you can pass a preset to the `hide` configuration as a string like `hide: <preset name>`, or you can use `import { hidePresets } from '@freesewing.core` and pass `hide: hidePresets.<preset name>`
:::tip If you don't like to remember strings and you're working in development a environment that has code completion, importing the presets from `@freesewing/core` will help you be sure you're definitely using an available preset :::
We provide two presets for common hiding configurations. For convenience, you
can pass a preset to the `hide` configuration as a string like `hide: <preset
name>`, or you can use `import { hidePresets } from '@freesewing.core` and pass
`hide: hidePresets.<preset name>`
:::tip
If you don't like to remember strings and you're working in development a
environment that has code completion, importing the presets from
`@freesewing/core` will help you be sure you're definitely using an available
preset
:::
### HIDE_ALL
For a shortcut to setting all `boolean` hiding options ([`after`](#hideafter), [`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to true, use `HIDE_ALL`
For a shortcut to setting all `boolean` hiding options ([`after`](#hideafter),
[`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to
true, use `HIDE_ALL`
:::note
This is equivalent to using
@ -181,9 +207,11 @@ This is equivalent to using
inherited: true
}
```
:::
To use it as an imported preset:
```js
import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
@ -200,8 +228,8 @@ const part = {
}
```
To use it as a string
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
@ -213,11 +241,12 @@ const part = {
// hide `example.front`, `exmpleBase`, and `exampleBack`
// as well as any inherited parts
hide: 'HIDE_ALL',
draft: ({ part }) => part
draft: ({ part }) => part,
}
```
### HIDE_TREE
For a shortcut to setting [`from: true`](#hidefrom) and [`inherited: true`](#hideinherited), use `HIDE_TREE`
:::note
@ -228,13 +257,16 @@ This is equivalent to using
from: true,
inherited: true
}
````
```
:::
:::note RELATED
See [`hide.inherited`](#hideinherited) for a full explanation of how that option works
:::
To use it as an imported preset:
```js
import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
@ -245,12 +277,12 @@ const part = {
from: exampleBase,
// hide `exmpleBase`, and all inherited parts
hide: hidePresets.HIDE_TREE,
draft: ({ part }) => part
draft: ({ part }) => part,
}
```
To use it as a string
```js
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
@ -260,6 +292,6 @@ const part = {
from: exampleBase,
// hide `exmpleBase`, and all inherited parts
hide: 'HIDE_TREE',
draft: ({ part }) => part
draft: ({ part }) => part,
}
```

16
sites/dev/docs/reference/api/part/config/measurements/readme.mdx
View file

@ -6,7 +6,9 @@ The `measurements` and `optionalMeasurements` properties on the
part configuration object list the part's required and optional
measurements respectively.
:::tipYou should only include what's required by the part itself, not its dependencies:::
:::tip
You should only include what's required by the part itself, not its dependencies
:::
## measurements
@ -16,8 +18,8 @@ that are required to draft the current part.
```js
const part = {
name: 'example.front',
measurements: [ 'head', 'chest' ],
draft: ({ part }) => part
measurements: ['head', 'chest'],
draft: ({ part }) => part,
}
```
@ -31,9 +33,9 @@ import { pluginBust } from '@freesewing/plugin-bust'
const part = {
name: 'example.front',
plugins: [ pluginBust ],
measurements: [ 'head', 'chest' ],
optionalMeasurements: [ 'highBust' ],
draft: ({ part }) => part
plugins: [pluginBust],
measurements: ['head', 'chest'],
optionalMeasurements: ['highBust'],
draft: ({ part }) => part,
}
```

29
sites/dev/docs/reference/api/path/_curve/readme.mdx
View file

@ -1,5 +1,5 @@
---
title: "Path._curve()"
title: 'Path._curve()'
---
The `Path._curve()` method draws a cubic Bézier curve
@ -13,7 +13,9 @@ so you do not need to provide it.
Path path._curve(Point cp2, Point to)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -21,19 +23,20 @@ Path path._curve(Point cp2, Point to)
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 20)
points.cp2 = new Point(60, 50)
points.to = new Point(90, 20)
points.from = new Point(5, 20)
points.cp2 = new Point(60, 50)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
._curve(points.cp2, points.to)
.setText("Path._curve()", "text-sm center fill-note")
.attr("data-text-dy", -1)
paths.line = new Path()
.move(points.from)
.\_curve(points.cp2, points.to)
.setText("Path.\_curve()", "text-sm center fill-note")
.attr("data-text-dy", -1)
return part
return part
}
```
````
</Example>
@ -45,4 +48,4 @@ as the two following calls yield the same result:
```js
path.curve(point1, point1, point2)
path._curve(point1, point2)
```
````

23
sites/dev/docs/reference/api/path/addclass/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.addClass()` method adds a CSS class to the path.
Path path.addClass(string className)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,17 +20,18 @@ Path path.addClass(string className)
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 10)
points.to = new Point(95, 10)
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.addClass('note dashed')
paths.line = new Path()
.move(points.from)
.line(points.to)
.addClass('note dashed')
return part
return part
}
```
````
</Example>
## Notes
@ -39,4 +42,4 @@ as the two following calls yield the same result:
```js
path.attr('class', 'fabric')
path.addClass('fabric')
```
````

19
sites/dev/docs/reference/api/path/addtext/readme.mdx
View file

@ -12,7 +12,9 @@ Path path.addText(string text, string className = '')
The second argument will optionally be used to set the CSS class for the text.
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -22,14 +24,15 @@ The second argument will optionally be used to set the CSS class for the text.
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.addText('FreeSewing rocks')
paths.line = new Path()
.move(points.from)
.line(points.to)
.addText('FreeSewing rocks')
return part
return part
}
```
````
</Example>
## Notes
@ -40,7 +43,7 @@ as the two following calls yield the same result:
```js
path.attr('data-text', 'Hello')
path.addText('Hello')
```
````
The difference with [Path.setText()](/reference/api/path/addtext) is that this
method will add to the existing text whereas `Path.setText()` will overwrite

26
sites/dev/docs/reference/api/path/attr/readme.mdx
View file

@ -18,7 +18,9 @@ Path path.attr(
)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -26,19 +28,20 @@ Path path.attr(
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(20, -10)
points.cp2 = new Point(50, 50)
points.to = new Point(70, 20)
points.from = new Point(10, 20)
points.cp1 = new Point(20, -10)
points.cp2 = new Point(50, 50)
points.to = new Point(70, 20)
paths.example = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.attr("class", "canvas")
.setText("FreeSewing rocks", "text-xs center")
paths.example = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.attr("class", "canvas")
.setText("FreeSewing rocks", "text-xs center")
return part
return part
}
```
</Example>
@ -54,3 +57,4 @@ all call this method under the hood.
See [Using Attributes](/howtos/code/attributes)
for information about custom Attributes that can be used with Paths.
```

10
sites/dev/docs/reference/api/path/circlesegment/readme.mdx
View file

@ -11,10 +11,12 @@ A negative angle results in a clockwise arc.
:::tip
The new endpoint of this path is the same point
that
that
```js
path.end().rotate(deg, origin)
```
would return.
:::
@ -24,7 +26,9 @@ would return.
Path path.circleSegment(deg, origin)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -48,5 +52,7 @@ paths.helper = new Path()
return part
}
```
</Example>
```

26
sites/dev/docs/reference/api/path/close/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.close()` method closes a path by drawing a straight line from the curr
Path path.close()
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,18 +20,20 @@ Path path.close()
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp2 = new Point(60, 30)
points.to = new Point(90, 20)
points.from = new Point(10, 20)
points.cp2 = new Point(60, 30)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
._curve(points.cp2, points.to)
.close()
.reverse() // To keep text from being upside-down
.setText('Path._close()', 'text-sm right fill-note')
paths.line = new Path()
.move(points.from)
.\_curve(points.cp2, points.to)
.close()
.reverse() // To keep text from being upside-down
.setText('Path.\_close()', 'text-sm right fill-note')
return part
return part
}
```
</Example>
```

24
sites/dev/docs/reference/api/path/curve/readme.mdx
View file

@ -11,7 +11,9 @@ via two control points to a given endpoint.
Path path.curve(Point cp1, Point cp2, Point to)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -19,17 +21,19 @@ Path path.curve(Point cp1, Point cp2, Point to)
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 40)
points.to = new Point(90, 20)
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 40)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-note")
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-note")
return part
return part
}
```
</Example>
```

15
sites/dev/docs/reference/api/path/curve_/readme.mdx
View file

@ -3,7 +3,7 @@ title: Path.curve_()
---
The `Path.curve_()` method draws a cubic Bézier curve from the current position
via two control points to a given endpoint. However, the end control point is
via two control points to a given endpoint. However, the end control point is
identical to the end point.
## Signature
@ -12,16 +12,16 @@ identical to the end point.
Path path.curve_(Point cp1, Point to)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
<Example caption="Example of the Path.curve\_() method">
```js
({ Point, points, Path, paths, part }) => {
;({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.to = new Point(90, 20)
@ -29,12 +29,13 @@ Path path.curve_(Point cp1, Point to)
paths.line = new Path()
.move(points.from)
.curve_(points.cp1, points.to)
.setText("Path.curve_()", "text-sm center fill-note")
.attr("data-text-dy", -1)
.setText('Path.curve_()', 'text-sm center fill-note')
.attr('data-text-dy', -1)
return part
}
```
</Example>
## Notes

28
sites/dev/docs/reference/api/path/end/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.end()` method returns the Point object at the end of the path.
Point path.end()
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,20 +20,22 @@ Point path.end()
```js
({ Point, points, Path, paths, snippets, Snippet, part }) => {
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
snippets.end = new Snippet("notch", paths.demo.end())
snippets.end = new Snippet("notch", paths.demo.end())
return part
return part
}
```
</Example>
```

20
sites/dev/docs/reference/api/path/hide/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.hide()` hides the path so it does not appear in the output.
Path path.hide()
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,15 +20,17 @@ Path path.hide()
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

47
sites/dev/docs/reference/api/path/insop/readme.mdx
View file

@ -11,40 +11,43 @@ operation](/reference/api/path/noop) with id `id`.
Path path.insop(string id, Path path)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
<Example caption="Example of the Path.insop() method">
```js
({ Point, points, Path, paths, part }) => {
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
return part
return part
}
```
</Example>
## Notes
This is often used to insert darts into a path.
```

20
sites/dev/docs/reference/api/path/line/readme.mdx
View file

@ -11,7 +11,9 @@ given point.
Path path.line(Point to)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -19,15 +21,17 @@ Path path.line(Point to)
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 10)
points.to = new Point(90, 10)
points.from = new Point(10, 10)
points.to = new Point(90, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText("Path.line()", "text-sm center fill-note")
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText("Path.line()", "text-sm center fill-note")
return part
return part
}
```
</Example>
```

46
sites/dev/docs/reference/api/path/noop/readme.mdx
View file

@ -12,7 +12,9 @@ with [`Path.insop()`](/reference/api/path/insop).
Path path.noop(string id)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -20,29 +22,31 @@ Path path.noop(string id)
```js
({ Point, points, Path, paths, part }) => {
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
return part
return part
}
```
</Example>
```

23
sites/dev/docs/reference/api/path/setclass/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.setClass()` method sets the CSS class(es) of the path.
Path path.setClass(string className)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,17 +20,18 @@ Path path.setClass(string className)
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 10)
points.to = new Point(95, 10)
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setClass('note dashed')
paths.line = new Path()
.move(points.from)
.line(points.to)
.setClass('note dashed')
return part
return part
}
```
````
</Example>
## Notes
@ -39,4 +42,4 @@ as the two following calls yield the same result:
```js
path.attr('class', 'fabric', true)
path.setClass('fabric')
```
````

20
sites/dev/docs/reference/api/path/sethidden/readme.mdx
View file

@ -11,7 +11,9 @@ value you pass it.
Path path.setHidden(bool hidden = false)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -19,15 +21,17 @@ Path path.setHidden(bool hidden = false)
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

19
sites/dev/docs/reference/api/path/settext/readme.mdx
View file

@ -12,7 +12,9 @@ Path path.setText(string text, string className = '')
The second argument will optionally be used to set the CSS class for the text.
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -22,14 +24,15 @@ The second argument will optionally be used to set the CSS class for the text.
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText('FreeSewing rocks')
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText('FreeSewing rocks')
return part
return part
}
```
````
</Example>
## Notes
@ -40,7 +43,7 @@ as the two following calls yield the same result:
```js
path.attr('data-text', 'Hello')
path.setText('Hello')
```
````
The difference with [Path.addText()](/reference/api/path/addtext) is that this
method will overwrite existing text on the path, whereas `Path.addText()` will

32
sites/dev/docs/reference/api/path/smurve/readme.mdx
View file

@ -11,7 +11,9 @@ A smooth curve means it will use the reflection of the end control point of the
Path path.smurve(Point cp2, Point end)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -19,22 +21,24 @@ Path path.smurve(Point cp2, Point end)
```js
({ Point, points, Path, paths, part }) => {
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.bCp2 = new Point(50,50)
points.bTo = new Point(10,50)
points.bCp2 = new Point(50,50)
points.bTo = new Point(10,50)
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve(points.bCp2, points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve(points.bCp2, points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
return part
return part
}
```
</Example>
```

30
sites/dev/docs/reference/api/path/smurve_/readme.mdx
View file

@ -13,7 +13,9 @@ A smooth curve means it will use the reflection of the end control point of the
Path path.smurve_(Point cp2, Point end)
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -21,21 +23,23 @@ Path path.smurve_(Point cp2, Point end)
```js
({ Point, points, Path, paths, part }) => {
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.bTo = new Point(10,50)
points.bTo = new Point(10,50)
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve_(points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve\_(points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
return part
return part
}
```
</Example>
```

28
sites/dev/docs/reference/api/path/start/readme.mdx
View file

@ -10,7 +10,9 @@ The `Path.start()` method returns the Point object at the start of the path.
Point path.start()
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -18,20 +20,22 @@ Point path.start()
```js
({ Point, points, Path, paths, snippets, Snippet, part }) => {
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
snippets.end = new Snippet("notch", paths.demo.start())
snippets.end = new Snippet("notch", paths.demo.start())
return part
return part
}
```
</Example>
```

22
sites/dev/docs/reference/api/path/unhide/readme.mdx
View file

@ -2,7 +2,7 @@
title: Path.unhide()
---
The `Path.unhide()` method unhides the path so it appears in the output. By
The `Path.unhide()` method unhides the path so it appears in the output. By
default, paths are not hidden. So you should only call this on path previously
hidden via `Path.hide()`.
@ -12,7 +12,9 @@ hidden via `Path.hide()`.
Path path.unhide()
```
:::tipThis method is chainable as it returns the `Path` object:::
:::tip
This method is chainable as it returns the `Path` object
:::
## Example
@ -20,15 +22,17 @@ Path path.unhide()
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

25
sites/dev/docs/reference/api/pattern/addpart/readme.mdx
View file

@ -5,7 +5,9 @@ title: Pattern.addPart()
The `Pattern.addPart()` method allows you to add a part to a pattern.
It has the same effect as passing a part to the Design constructor.
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.addPart() signature
@ -16,30 +18,27 @@ Pattern pattern.addPart(object part)
## Pattern.addPart() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
const extra = {
name: 'aaron.extra',
draft: ({ points, Point, paths, Path, part }) => {
points.msg = new Point(50,15)
.attr('data-text', "I am an extra part")
points.msg = new Point(50, 15).attr('data-text', 'I am an extra part')
paths.box = new Path()
.move(new Point(0,0))
.line(new Point(0,30))
.line(new Point(100,30))
.line(new Point(100,0))
.close(new Point(100,0))
.move(new Point(0, 0))
.line(new Point(0, 30))
.line(new Point(100, 30))
.line(new Point(100, 0))
.close(new Point(100, 0))
.addClass('note')
return part
}
},
}
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({ measurements }).addPart(extra)

10
sites/dev/docs/reference/api/pattern/draft/readme.mdx
View file

@ -7,7 +7,9 @@ making sure to do so in the right order, handle dependencies, resolve
options to their absolute values and a number of other housekeeping things
that are required for the pattern to be drafted.
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.draft() signature
@ -18,13 +20,11 @@ Pattern pattern.draft()
## Pattern.draft() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({ measurements })

12
sites/dev/docs/reference/api/pattern/draftpartforset/readme.mdx
View file

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

8
sites/dev/docs/reference/api/pattern/on/readme.mdx
View file

@ -7,7 +7,9 @@ pattern's [lifecycle hooks](/reference/hooks/). It takes the
lifecycle hook's name as the first argument and the function as the second.
This method will then be triggered by the lifecycle hook.
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.on() signature
@ -26,8 +28,8 @@ should pass it.
## Pattern.on() example
```js
pattern.on('preRender', function(svg) {
svg.style += "svg { background: yellow;}";
pattern.on('preRender', function (svg) {
svg.style += 'svg { background: yellow;}'
})
```

14
sites/dev/docs/reference/api/pattern/sample/readme.mdx
View file

@ -6,7 +6,9 @@ The `Pattern.sample()` method will _sample_ the pattern which means
to draft multiple variants of the same pattern, and stack them on
top of each other.
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
Under the hood, this method will call one of
[Pattern.sampleOption()](/reference/api/pattern/sampleoption),
@ -34,19 +36,17 @@ Pattern pattern.sample()
## Pattern.sample() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({
sample: {
models: measurements
}
models: measurements,
},
})
const svg = pattern.sample().render()

10
sites/dev/docs/reference/api/pattern/samplemeasurement/readme.mdx
View file

@ -13,7 +13,9 @@ the measurement of your choice between 90% and 110% if the value in the settings
The goal of measurement sampling is to understand the impact of a given measurement on a pattern.
:::
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.sampleMeasurement() signature
@ -24,13 +26,11 @@ Pattern pattern.sampleMeasurement(string measurement)
## Pattern.sampleMeasurement() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({ measurements })

12
sites/dev/docs/reference/api/pattern/samplemodels/readme.mdx
View file

@ -12,7 +12,9 @@ In this particular case, it will draft a variants for each of the models you pas
The goal of model sampling is to verify that a pattern grades correctly up and down as sizes change.
:::
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.sampleModels() signature
@ -52,16 +54,14 @@ identifying your model in the models object.
## Pattern.sampleModels() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
const Aaron = new Aaron()
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const svg = aaron.sampleModels(measurements, "34").render()
const svg = aaron.sampleModels(measurements, '34').render()
```

12
sites/dev/docs/reference/api/pattern/sampleoption/readme.mdx
View file

@ -7,7 +7,7 @@ to draft multiple variants of the same pattern, and stack them on
top of each other.
In this particular case, the variants it drafts depend
on [the type of option](/reference/api/part/config/options/):
on [the type of option](/reference/api/part/config/options/):
- For a Percentage or Degree option, 10 steps will be sampled, between min and max
- For a Counter or Millimeter option, a maximum of 10 steps will be sampled, between min and max
@ -20,7 +20,9 @@ The goal of option sampling is to verify the impact of an option on the pattern,
its min and max boundaries are correct and its default value is sensible.
:::
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.sampleOption() signature
@ -31,13 +33,11 @@ Pattern pattern.sampleOption(string option)
## Pattern.sampleOption() example
```js
import { Aaron } from "@freesewing/aaron"
import { Aaron } from '@freesewing/aaron'
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({ measurements })

12
sites/dev/docs/reference/api/pattern/use/readme.mdx
View file

@ -6,7 +6,9 @@ The `Pattern.use()` method will load a FreeSewing plugin.
Plugins are a way to extend a pattern's functionality.
For more details, refer to [the plugin guide](/guides/plugins/).
:::noteThis method is chainable as it returns the Pattern object:::
:::note
This method is chainable as it returns the Pattern object
:::
## Pattern.use() signature
@ -22,14 +24,12 @@ you plugin object.
## Pattern.use() example
```js
import { Aaron } from "@freesewing/aaron"
import { pluginTheme } from "@freesewing/plugin-theme"
import { Aaron } from '@freesewing/aaron'
import { pluginTheme } from '@freesewing/plugin-theme'
// Load some public test measurements from the FreeSewing backend
const measurements = (
await (
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
).json()
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
).measurements
const pattern = new Aaron({ measurements }).use(pluginTheme)

26
sites/dev/docs/reference/api/point/addcircle/readme.mdx
View file

@ -15,7 +15,9 @@ Point point.addCircle(
)
```
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -26,18 +28,20 @@ Point point.addCircle(
.addCircle(3, 'lining dashed')
.addCircle(7, 'mark dashed')
points.b = new Point(50, 10)
.addCircle(1, 'interfacing')
.addCircle(3, 'fabric')
.addCircle(5, 'lining')
.addCircle(7, 'mark')
.addCircle(9, 'note')
points.b = new Point(50, 10)
.addCircle(1, 'interfacing')
.addCircle(3, 'fabric')
.addCircle(5, 'lining')
.addCircle(7, 'mark')
.addCircle(9, 'note')
points.c = new Point(70, 10)
.addCircle(3, 'interfacing')
.addCircle(7, 'mark lashed')
points.c = new Point(70, 10)
.addCircle(3, 'interfacing')
.addCircle(7, 'mark lashed')
return part
return part
}
```
</Example>
```

19
sites/dev/docs/reference/api/point/addtext/readme.mdx
View file

@ -15,7 +15,9 @@ Point point.addText(
)
```
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -26,18 +28,19 @@ Point point.addText(
.addText('FreeSewing')
.addText('rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
## Notes
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
```

25
sites/dev/docs/reference/api/point/attr/readme.mdx
View file

@ -18,8 +18,9 @@ Point point.attr(
If the third parameter is set to `true` it will call [`this.attributes.set()`](/reference/api/attributes/set/) instead, thereby overwriting the value of the attribute.
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -27,18 +28,19 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
```js
({ Point, points, Path, paths, part }) => {
points.anchor = new Point(100, 25)
.attr('data-text', 'FreeSewing')
.attr('data-text', 'rocks')
points.anchor = new Point(100, 25)
.attr('data-text', 'FreeSewing')
.attr('data-text', 'rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
@ -46,3 +48,4 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
See [Using Attributes](/howtos/code/attributes)
for information about custom Attributes that can be used with Points.
```

28
sites/dev/docs/reference/api/point/clone/readme.mdx
View file

@ -11,7 +11,9 @@ attributes as the original point.
Point point.clone()
```
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -19,21 +21,22 @@ Point point.clone()
```js
({ Point, points, Path, paths, Snippet, snippets, part }) => {
points.A = new Point(25, 25)
.setText("Point A", "text-xl")
.attr("data-text-fill-opacity", "0.5")
points.B = points.A.clone().setText("Point B")
points.A = new Point(25, 25)
.setText("Point A", "text-xl")
.attr("data-text-fill-opacity", "0.5")
points.B = points.A.clone().setText("Point B")
snippets.x = new Snippet("notch", points.A)
snippets.x = new Snippet("notch", points.A)
// Avoid the text getting cropped
paths.hidden = new Path()
.move(new Point(20,10))
.move(new Point(75,30))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(new Point(20,10))
.move(new Point(75,30))
.addClass('hidden')
return part
return part
}
```
</Example>
@ -43,3 +46,4 @@ Point point.clone()
The [`Point.copy()`](/reference/api/point/copy/) method will only copy the
point's coordinates, whereas this `Point.clone()` method will also copy its
attributes.
```

32
sites/dev/docs/reference/api/point/setcircle/readme.mdx
View file

@ -21,7 +21,9 @@ Point point.setCircle(
)
```
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -29,22 +31,24 @@ Point point.setCircle(
```js
({ Point, points, part }) => {
points.a = new Point(30, 10)
.setCircle(3, 'lining dashed')
.setCircle(7, 'mark dashed')
points.a = new Point(30, 10)
.setCircle(3, 'lining dashed')
.setCircle(7, 'mark dashed')
points.b = new Point(50, 10)
.setCircle(1, 'interfacing')
.setCircle(3, 'fabric')
.setCircle(5, 'lining')
.setCircle(7, 'mark')
.setCircle(9, 'note')
points.b = new Point(50, 10)
.setCircle(1, 'interfacing')
.setCircle(3, 'fabric')
.setCircle(5, 'lining')
.setCircle(7, 'mark')
.setCircle(9, 'note')
points.c = new Point(70, 10)
.setCircle(3, 'interfacing')
.setCircle(7, 'mark lashed')
points.c = new Point(70, 10)
.setCircle(3, 'interfacing')
.setCircle(7, 'mark lashed')
return part
return part
}
```
</Example>
```

24
sites/dev/docs/reference/api/point/settext/readme.mdx
View file

@ -15,7 +15,9 @@ Point point.setText(
)
```
:::tipThis method is chainable as it returns the `Point` object:::
:::tip
This method is chainable as it returns the `Point` object
:::
## Example
@ -23,21 +25,23 @@ Point point.setText(
```js
({ Point, points, Path, paths, part }) => {
points.anchor = new Point(100, 25)
.setText('FreeSewing')
.setText('rocks')
points.anchor = new Point(100, 25)
.setText('FreeSewing')
.setText('rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
## Notes
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
```

28
sites/dev/docs/reference/api/snippet/attr/readme.mdx
View file

@ -3,7 +3,7 @@ title: Snippet.attr()
---
The `Snippet.attr()` method can be used to add attributes to the Snippet
object. It calls `this.attributes.add()` under the hood, and returns the
object. It calls `this.attributes.add()` under the hood, and returns the
Snippet object.
If the third parameter is set to `true` it will call `this.attributes.set()`
@ -13,13 +13,15 @@ instead, thereby overwriting the value of the attribute.
```js
Snippet snippet.attr(
string name,
mixed value,
string name,
mixed value,
bool overwrite = false
)
```
:::tipThis method is chainable as it returns the `Snippet` object:::
:::tip
This method is chainable as it returns the `Snippet` object
:::
## Example
@ -27,17 +29,18 @@ Snippet snippet.attr(
```js
({ Point, points, Path, paths, Snippet, snippets, part }) => {
snippets.logo = new Snippet('logo', new Point(0,0))
.attr("data-scale", 0.75)
.attr("data-rotate", 180)
snippets.logo = new Snippet('logo', new Point(0,0))
.attr("data-scale", 0.75)
.attr("data-rotate", 180)
// Prevent clipping
paths.diag = new Path()
.move(new Point(-25,-10))
.move(new Point(25,35))
// Prevent clipping
paths.diag = new Path()
.move(new Point(-25,-10))
.move(new Point(25,35))
return part
return part
}
```
</Example>
@ -45,3 +48,4 @@ Snippet snippet.attr(
See [Using Attributes](/howtos/code/attributes)
for information about what Attributes can be used with Snippets.
:::
```

32
sites/dev/docs/reference/api/snippet/rotate/readme.mdx
View file

@ -11,7 +11,9 @@ sets the `data-rotate` property.
Snippet snippet.rotate(rotation, overwrite=true)
```
:::tipThis method is chainable as it returns the `Snippet` object:::
:::tip
This method is chainable as it returns the `Snippet` object
:::
## Example
@ -19,20 +21,22 @@ Snippet snippet.rotate(rotation, overwrite=true)
```js
({ Point, Path, paths, Snippet, snippets, part }) => {
for (const i of [0,1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(60*i, 0)
).rotate(60 * i)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(-30,-50))
.move(new Point(400,50))
return part
for (const i of [0,1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(60*i, 0)
).rotate(60 * i)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(-30,-50))
.move(new Point(400,50))
return part
}
```
</Example>
```

32
sites/dev/docs/reference/api/snippet/scale/readme.mdx
View file

@ -11,7 +11,9 @@ sets the `data-scale` property.
Snippet snippet.scale(scale, overwrite=true)
```
:::tipThis method is chainable as it returns the `Snippet` object:::
:::tip
This method is chainable as it returns the `Snippet` object
:::
## Example
@ -19,20 +21,22 @@ Snippet snippet.scale(scale, overwrite=true)
```js
({ Point, Path, paths, Snippet, snippets, part }) => {
for (const i of [1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(30*i, 0)
).scale(i/10)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(0,-30))
.move(new Point(200,20))
return part
for (const i of [1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(30\*i, 0)
).scale(i/10)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(0,-30))
.move(new Point(200,20))
return part
}
```
</Example>
```

4
sites/dev/docs/reference/api/stack/addpart/readme.mdx
View file

@ -11,4 +11,6 @@ original stack.
Stack stack.addPart(Part part)
```
:::noteThis method is chainable as it returns the Stack object:::
:::note
This method is chainable as it returns the Stack object
:::

4
sites/dev/docs/reference/api/stack/attr/readme.mdx
View file

@ -20,4 +20,6 @@ If the third parameter is set to `true` it will call
`this.attributes.set()` instead,
thereby overwriting the value of the attribute.
:::noteThis method is chainable as it returns the Stack object:::
:::note
This method is chainable as it returns the Stack object
:::

17
sites/dev/docs/reference/api/stack/generatetransform/readme.mdx
View file

@ -5,7 +5,6 @@ title: Stack.generateTransform()
The `Stack.generateTransform()` method generates SVG transforms for the stack,
sets them as attributes, and returns the original stack.
## Stack.generateTransform() signature
```js
@ -16,11 +15,13 @@ The `Stack.generateTransforms()` method takes a single argument,
an object with the following properties containing the transforms
to apply:
| Property | Type |Description |
|----------|------|------------|
| `move` | Object | `move.x` and `move.y` are coordinates to which the stack should be translated
| `rotate` | Number | The number of degrees to rate the stack around its center |
| `flipX` | Boolean | Whether to flip the stack along the X axis |
| `flipY` | Boolean | Whether to flip the stack along the Y axis |
| Property | Type | Description |
| -------- | ------- | ----------------------------------------------------------------------------- |
| `move` | Object | `move.x` and `move.y` are coordinates to which the stack should be translated |
| `rotate` | Number | The number of degrees to rate the stack around its center |
| `flipX` | Boolean | Whether to flip the stack along the X axis |
| `flipY` | Boolean | Whether to flip the stack along the Y axis |
:::noteThis method is chainable as it returns the Stack object:::
:::note
This method is chainable as it returns the Stack object
:::

5
sites/dev/docs/reference/api/stack/home/readme.mdx
View file

@ -11,7 +11,10 @@ and returns the original stack.
```js
Stack stack.home()
```
:::noteThis method is chainable as it returns the Stack object:::
:::note
This method is chainable as it returns the Stack object
:::
## Notes

14
sites/dev/docs/reference/api/store/extend/readme.mdx
View file

@ -13,7 +13,9 @@ rather through a plugin.
Store Store.extend(Array methods=[])
```
:::tipThis method is chainable as it returns the `Store` object:::
:::tip
This method is chainable as it returns the `Store` object
:::
The single argument should be an Array of methods to add to the
store. Each entry in the array should be an array itself holding a path in
@ -23,13 +25,11 @@ The expected first parameter for the method is the `Store` instance.
```js
function myCustomMethod(store, ...otherArguments) {
// Do something clever
// Do something clever
}
const store = new Store([
["path.to.the.method", myCustomMethod ]
])
```
const store = new Store([['path.to.the.method', myCustomMethod]])
```
With the configuration above, you can call `store.path.to.the.method()` and it
will run `myCustomMethod()`.
@ -46,5 +46,3 @@ The Store will not allow you to extend any of the following keys:
- `unset`
- `get`
- `extend`

14
sites/dev/docs/reference/api/store/push/readme.mdx
View file

@ -12,18 +12,18 @@ If `key` does not hold and Array, the Store will log a warning, but nothing will
Store store.push(mixed value1, mixed value2, ...)
```
:::noteThis method is [variadic](https://en.wikipedia.org/wiki/Variadic_function):::
:::note
This method is [variadic](https://en.wikipedia.org/wiki/Variadic_function)
:::
:::tipThis method is chainable as it returns the `Store` object:::
:::tip
This method is chainable as it returns the `Store` object
:::
## Example
```js
const store = new Store()
store.set('example', ['Hi there'])
store.push(
'How are you doing',
'How are YOU doing'
)
store.push('How are you doing', 'How are YOU doing')
```

5
sites/dev/docs/reference/api/store/set/readme.mdx
View file

@ -11,7 +11,9 @@ The `Store.set()` method stores the value of `value` in the store under key
Store store.set(mixed key, mixed value)
```
:::tipThis method is chainable as it returns the `Store` object:::
:::tip
This method is chainable as it returns the `Store` object
:::
## Example
@ -42,4 +44,3 @@ value = store.get(['my', 'other', 'nested', 'example']) // works
value = store.my.nested.example // Also works
value = store.my.other.nested.example // Also works
```

5
sites/dev/docs/reference/api/store/setifunset/readme.mdx
View file

@ -11,7 +11,9 @@ The `Store.set()` method stores the value of `value` in the store under key
Store store.set(mixed key, mixed value)
```
:::tipThis method is chainable as it returns the `Store` object:::
:::tip
This method is chainable as it returns the `Store` object
:::
## Example
@ -20,4 +22,3 @@ const store = new Store()
store.set('example', 'Hi there')
store.setIfUnset('example', 'Hi again') // This has no effect
```

8
sites/dev/docs/reference/api/store/unset/readme.mdx
View file

@ -10,12 +10,12 @@ The `Store.unset()` value removes a `key` from the store.
Store store.unset(string key)
```
:::tipThis method is chainable as it returns the `Store` object:::
:::tip
This method is chainable as it returns the `Store` object
:::
## Example
```js
const store = new Store()
.set('example', 'I will be gone before you know it')
.unset('example')
const store = new Store().set('example', 'I will be gone before you know it').unset('example')
```