feat(markdown): Docs for new/updated core methods
This commit is contained in:
parent
a2800dddda
commit
57d50c42da
8 changed files with 256 additions and 20 deletions
87
markdown/dev/reference/api/attributes/asrenderprops/en.md
Normal file
87
markdown/dev/reference/api/attributes/asrenderprops/en.md
Normal file
|
@ -0,0 +1,87 @@
|
||||||
|
---
|
||||||
|
title: Attributes.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Attributes.asRenderProps()` method will return the data stored in the
|
||||||
|
attributes as a serializable Javascript object. This method is typically
|
||||||
|
note invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object attributes.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `list`| A plain object representation of all attributes |
|
||||||
|
| `forSvg`| All attributes rendered as a string for inclusion in an SVG (or HTML) tag |
|
||||||
|
| `forCss`| All attributes rendered as a string for inclusion in CSS |
|
||||||
|
| `circle`| An array of circles radii to render (set as the `data-circle` attribute) |
|
||||||
|
| `circleProps`| A plain object representation of all circle-specific attributes (set as the `data-circle-*` attribute) |
|
||||||
|
| `text`| An array of texts to render (set as the `data-text` attribute) |
|
||||||
|
| `textProps`| A plain object representation of all text-specific attributes (set as the `data-text-*` attribute) |
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
```js
|
||||||
|
const attr = new Attributes()
|
||||||
|
.add('class', 'various')
|
||||||
|
.add('stroke', 'red')
|
||||||
|
.add('stroke-width', 2)
|
||||||
|
.add('data-circle', 20)
|
||||||
|
.add('data-circle-class', 'lining')
|
||||||
|
.add('data-text', 'test')
|
||||||
|
.add('data-text-dx', 3)
|
||||||
|
|
||||||
|
const json = JSON.stringify(
|
||||||
|
attr.asRenderProps(), null ,2
|
||||||
|
)
|
||||||
|
|
||||||
|
/* json holds:
|
||||||
|
{
|
||||||
|
"list": {
|
||||||
|
"class": [
|
||||||
|
"various"
|
||||||
|
],
|
||||||
|
"stroke": [
|
||||||
|
"red"
|
||||||
|
],
|
||||||
|
"stroke-width": [
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"data-circle": [
|
||||||
|
20
|
||||||
|
],
|
||||||
|
"data-circle-class": [
|
||||||
|
"lining"
|
||||||
|
],
|
||||||
|
"data-text": [
|
||||||
|
"test"
|
||||||
|
],
|
||||||
|
"data-text-dx": [
|
||||||
|
3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"forSvg": " class=\"various\" stroke=\"red\" stroke-width=\"2\" data-circle=\"20\" data-circle-class=\"lining\" data-text=\"test\" data-text-dx=\"3\"",
|
||||||
|
"forCss": " class:various; stroke:red; stroke-width:2; data-circle:20; data-circle-class:lining; data-text:test; data-text-dx:3;",
|
||||||
|
"circle": [
|
||||||
|
20
|
||||||
|
],
|
||||||
|
"circleProps": {
|
||||||
|
"className": "lining"
|
||||||
|
},
|
||||||
|
"text": [
|
||||||
|
"test"
|
||||||
|
],
|
||||||
|
"textProps": {
|
||||||
|
"dx": "3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
```
|
31
markdown/dev/reference/api/part/asrenderprops/en.md
Normal file
31
markdown/dev/reference/api/part/asrenderprops/en.md
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
---
|
||||||
|
title: Part.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
The `Part.asRenderProps()` method will return the data stored in the
|
||||||
|
part as a serializable Javascript object. This method is typically
|
||||||
|
not invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object part.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `paths` | The part's paths as [Path.asRenderProps()](/reference/api/path/asrenderprops) |
|
||||||
|
| `points` | The part's points as [Point.asRenderProps()](/reference/api/point/asrenderprops) |
|
||||||
|
| `snippet` | The part's snippets as [Snippet.asRenderProps()](/reference/api/snippet/asrenderprops) |
|
||||||
|
| `attributes` | The result of [Part.attributes.asRenderProps()](/reference/api/attribute/asrenderprops) |
|
||||||
|
| `height` | A number indicating the part height in `mm` |
|
||||||
|
| `width` | A number indicating the part width in `mm` |
|
||||||
|
| `topLeft` | The [Point](/reference/api/point) at the top left of the part, or rather its [`Point.asRenderProps()`](/reference/api/point/asrenderprops) result |
|
||||||
|
| `bottomRight` | The [Point](/reference/api/point) at the bottom right of the part, or rather its [`Point.asRenderProps()`](/reference/api/point/asrenderprops) result |
|
||||||
|
|
31
markdown/dev/reference/api/path/asrenderprops/en.md
Normal file
31
markdown/dev/reference/api/path/asrenderprops/en.md
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
---
|
||||||
|
title: Path.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Path.asRenderProps()` method will return the data stored in the
|
||||||
|
path as a serializable Javascript object. This method is typically
|
||||||
|
not invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object path.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `attributes` | The result of [Path.attributes.asRenderProps()](/reference/api/attribute/asrenderprops) |
|
||||||
|
| `hidden` | A boolean indicating whether the path is hidden or not |
|
||||||
|
| `name` | The path name |
|
||||||
|
| `ops` | An array of drawing operations |
|
||||||
|
| `height` | A number indicating the path height in `mm` |
|
||||||
|
| `width` | A number indicating the path width in `mm` |
|
||||||
|
| `topLeft` | The [Point](/reference/api/point) at the top left of the part, or rather its [`Point.asRenderProps()`](/reference/api/point/asrenderprops) result |
|
||||||
|
| `bottomRight` | The [Point](/reference/api/point) at the bottom right of the part, or rather its [`Point.asRenderProps()`](/reference/api/point/asrenderprops) result |
|
||||||
|
| `d` | The path's pathstring for rendering as SVG |
|
||||||
|
|
24
markdown/dev/reference/api/pattern/getlogs/en.md
Normal file
24
markdown/dev/reference/api/pattern/getlogs/en.md
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
title: Pattern.getLogs()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Pattern.getLogs()` method will return an object holding
|
||||||
|
the logs generated by the pattern.
|
||||||
|
It should only be called after calling `Pattern.draft()`.
|
||||||
|
|
||||||
|
## Pattern.getLogs() signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object pattern.getLogs()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
The `Pattern.getLogs()` method returns an object with
|
||||||
|
the following properties:
|
||||||
|
|
||||||
|
| Property | Description |
|
||||||
|
| --------:| ----------- |
|
||||||
|
| `pattern` | The logs of the pattern itself |
|
||||||
|
| `sets` | The logs per (set of) settings used to draft the pattern |
|
||||||
|
|
|
@ -3,8 +3,9 @@ title: Pattern.getRenderProps()
|
||||||
---
|
---
|
||||||
|
|
||||||
The `Pattern.getRenderProps()` method will return an object that
|
The `Pattern.getRenderProps()` method will return an object that
|
||||||
facilitates rendered the pattern by an external renderer such as
|
facilitates rendering the pattern by an external renderer such as
|
||||||
a React component. It should only be called after calling `Pattern.draft()`.
|
[our Pattern React component](/fixme).
|
||||||
|
It should only be called after calling `Pattern.draft()`.
|
||||||
|
|
||||||
## Pattern.getRenderProps() signature
|
## Pattern.getRenderProps() signature
|
||||||
|
|
||||||
|
@ -12,20 +13,7 @@ a React component. It should only be called after calling `Pattern.draft()`.
|
||||||
Object pattern.getRenderProps()
|
Object pattern.getRenderProps()
|
||||||
```
|
```
|
||||||
|
|
||||||
## Pattern.getRenderProps() example
|
## Returned object properties
|
||||||
|
|
||||||
```js
|
|
||||||
import { Aaron } from "@freesewing/aaron"
|
|
||||||
import { cisFemaleAdult34 } from "@freesewing/models"
|
|
||||||
|
|
||||||
const pattern = new Aaron({
|
|
||||||
measurements: cisFemaleAdult34
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = pattern.draft().getRenderProps()
|
|
||||||
```
|
|
||||||
|
|
||||||
## Pattern.getRenderProps() returned object
|
|
||||||
|
|
||||||
The `Pattern.getRenderProps()` method returns an object with
|
The `Pattern.getRenderProps()` method returns an object with
|
||||||
the following properties:
|
the following properties:
|
||||||
|
@ -34,9 +22,8 @@ the following properties:
|
||||||
| --------:| ----------- |
|
| --------:| ----------- |
|
||||||
| `autoLayout` | An object describing the (automated) pattern layout |
|
| `autoLayout` | An object describing the (automated) pattern layout |
|
||||||
| `height` | Height of the drafted pattern in `mm` |
|
| `height` | Height of the drafted pattern in `mm` |
|
||||||
| `logs` | The logs generated by the pattern |
|
| `width` | Width of the drafted pattern in `mm` |
|
||||||
| `parts` | A plain object holding the drafted parts |
|
|
||||||
| `settings` | The (sets of) settings used to draft the pattern |
|
| `settings` | The (sets of) settings used to draft the pattern |
|
||||||
| `stacks` | A plain object holding the drafted stacks |
|
| `stacks` | A plain object holding the drafted stacks |
|
||||||
| `svg` | An [Svg Object](/reference/api/svg/) object with the `preRender` hook applied |
|
| `svg` | The [Svg Object](/reference/api/svg/) object with the `preRender` hook applied as [Svg.asRenderProps()](/reference/api/svg/asrenderprops) |
|
||||||
| `width` | Width of the drafted pattern in `mm` |
|
|
||||||
|
|
24
markdown/dev/reference/api/point/asrenderprops/en.md
Normal file
24
markdown/dev/reference/api/point/asrenderprops/en.md
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
title: Point.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Point.asRenderProps()` method will return the data stored in the
|
||||||
|
point as a serializable Javascript object. This method is typically
|
||||||
|
not invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object point.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `attributes` | The result of [Path.attributes.asRenderProps()](/reference/api/attribute/asrenderprops) |
|
||||||
|
| `x` | A number indicating the X-Coordinate of the point |
|
||||||
|
| `y` | A number indicating the Y-Coordinate of the point |
|
25
markdown/dev/reference/api/snippet/asrenderprops/en.md
Normal file
25
markdown/dev/reference/api/snippet/asrenderprops/en.md
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
title: Snippet.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Snippet.asRenderProps()` method will return the data stored in the
|
||||||
|
snippet as a serializable Javascript object. This method is typically
|
||||||
|
not invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object snippet.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `attributes` | The result of [Path.attributes.asRenderProps()](/reference/api/attribute/asrenderprops) |
|
||||||
|
| `def` | The ID of the snippet's reference in the `defs` section of the SVG (the snippet code) |
|
||||||
|
| `anchor` | The [Point](/reference/api/point) on which the snippet is anchored, or rather its [`Point.asRenderProps()`](/reference/api/point/asrenderprops) result |
|
||||||
|
|
27
markdown/dev/reference/api/svg/asrenderprops/en.md
Normal file
27
markdown/dev/reference/api/svg/asrenderprops/en.md
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
title: Svg.asRenderProps()
|
||||||
|
---
|
||||||
|
|
||||||
|
The `Svg.asRenderProps()` method will return the data stored in the
|
||||||
|
svg as a serializable Javascript object. This method is typically
|
||||||
|
not invoked directly but rather called under the hood as a result of
|
||||||
|
calling [`Pattern.getRenderProps()`](/reference/core/pattern/getrenderprops).
|
||||||
|
|
||||||
|
## Signature
|
||||||
|
|
||||||
|
```js
|
||||||
|
Object svg.asRenderProps()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Returned object properties
|
||||||
|
|
||||||
|
This returns Javascript object has the following properties:
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ----:| ----------- |
|
||||||
|
| `attributes` | The result of [Path.attributes.asRenderProps()](/reference/api/attribute/asrenderprops) |
|
||||||
|
| `layout` | A plain object describing the layout of the SVG |
|
||||||
|
| `body` | A string holding the SVG body |
|
||||||
|
| `style` | A string holding the SVG style |
|
||||||
|
| `defs` | A string holding the SVG defs |
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue