diff --git a/markdown/dev/reference/api/attributes/asrenderprops/en.md b/markdown/dev/reference/api/attributes/asrenderprops/en.md new file mode 100644 index 00000000000..9c8e63984dc --- /dev/null +++ b/markdown/dev/reference/api/attributes/asrenderprops/en.md @@ -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" + } +} +*/ +``` diff --git a/markdown/dev/reference/api/part/asrenderprops/en.md b/markdown/dev/reference/api/part/asrenderprops/en.md new file mode 100644 index 00000000000..473caa79bb0 --- /dev/null +++ b/markdown/dev/reference/api/part/asrenderprops/en.md @@ -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 | + diff --git a/markdown/dev/reference/api/path/asrenderprops/en.md b/markdown/dev/reference/api/path/asrenderprops/en.md new file mode 100644 index 00000000000..6241a959904 --- /dev/null +++ b/markdown/dev/reference/api/path/asrenderprops/en.md @@ -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 | + diff --git a/markdown/dev/reference/api/pattern/getlogs/en.md b/markdown/dev/reference/api/pattern/getlogs/en.md new file mode 100644 index 00000000000..96780f68c53 --- /dev/null +++ b/markdown/dev/reference/api/pattern/getlogs/en.md @@ -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 | + diff --git a/markdown/dev/reference/api/pattern/getrenderprops/en.md b/markdown/dev/reference/api/pattern/getrenderprops/en.md index bde76077de0..90503ccf79e 100644 --- a/markdown/dev/reference/api/pattern/getrenderprops/en.md +++ b/markdown/dev/reference/api/pattern/getrenderprops/en.md @@ -3,8 +3,9 @@ title: Pattern.getRenderProps() --- The `Pattern.getRenderProps()` method will return an object that -facilitates rendered the pattern by an external renderer such as -a React component. It should only be called after calling `Pattern.draft()`. +facilitates rendering the pattern by an external renderer such as +[our Pattern React component](/fixme). +It should only be called after calling `Pattern.draft()`. ## Pattern.getRenderProps() signature @@ -12,20 +13,7 @@ a React component. It should only be called after calling `Pattern.draft()`. Object pattern.getRenderProps() ``` -## Pattern.getRenderProps() example - -```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 +## Returned object properties The `Pattern.getRenderProps()` method returns an object with the following properties: @@ -34,9 +22,8 @@ the following properties: | --------:| ----------- | | `autoLayout` | An object describing the (automated) pattern layout | | `height` | Height of the drafted pattern in `mm` | -| `logs` | The logs generated by the pattern | -| `parts` | A plain object holding the drafted parts | +| `width` | Width of the drafted pattern in `mm` | | `settings` | The (sets of) settings used to draft the pattern | | `stacks` | A plain object holding the drafted stacks | -| `svg` | An [Svg Object](/reference/api/svg/) object with the `preRender` hook applied | -| `width` | Width of the drafted pattern in `mm` | +| `svg` | The [Svg Object](/reference/api/svg/) object with the `preRender` hook applied as [Svg.asRenderProps()](/reference/api/svg/asrenderprops) | + diff --git a/markdown/dev/reference/api/point/asrenderprops/en.md b/markdown/dev/reference/api/point/asrenderprops/en.md new file mode 100644 index 00000000000..a5eff30cf8e --- /dev/null +++ b/markdown/dev/reference/api/point/asrenderprops/en.md @@ -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 | diff --git a/markdown/dev/reference/api/snippet/asrenderprops/en.md b/markdown/dev/reference/api/snippet/asrenderprops/en.md new file mode 100644 index 00000000000..9807927b980 --- /dev/null +++ b/markdown/dev/reference/api/snippet/asrenderprops/en.md @@ -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 | + diff --git a/markdown/dev/reference/api/svg/asrenderprops/en.md b/markdown/dev/reference/api/svg/asrenderprops/en.md new file mode 100644 index 00000000000..afc950306e0 --- /dev/null +++ b/markdown/dev/reference/api/svg/asrenderprops/en.md @@ -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 | +