VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(markdown): Ported code howtos to v3

Browse source
This commit is contained in:
Joost De Cock 2022-10-12 14:42:45 +02:00
parent d1edf93750
commit af99d3e8c0
25 changed files with 451 additions and 636 deletions
Download patch file Download diff file Expand all files Collapse all files

51
markdown/dev/howtos/code/adding-snippets/en.md
View file

@ -1,32 +1,51 @@
---
title: Adding snippets
for: developers
about: Shows you how to add snippets to your pattern
---
After using the [shorthand](/howtos/code/shorthand/) call,
`Snippet` contains the path constructor, while `snippets` is a reference to `part.snippets`,
which is where you should store your paths.
Snippets should be stored in the `snippets` key of the object passed to your part's
draft method. The contructor for snippets is available in the `Snippets` key. You can
destructure them for easy access.
Things will now _just work_ when you do this:
<Example caption="An example of adding a snippet" tutorial>
```design/src/part.mjs
function draftPart = ({
Point,
Path,
paths,
// highlight-start
Snippet,
snippets,
// highlight-end
part
}) {
```js
snippets.logo = new Snippet('logo', points.logoAnchor);
// highlight-start
snippets.logo = new Snippet('logo', new Point(50,50))
.attr('data-scale', 0.5)
.attr('data-rotate', 180)
// highlight-end
// prevent clipping
paths.demo = new Path()
.move(new Point(0,0))
.move(new Point(100,100))
return part
}
```
</Example>
You can scale and rotate a snippet by setting the `data-scale` and `data-rotate` attributes respectively.
- **data-scale** : Either a single scale factor, or a set of 2 scale factors for the X and Y axis respectively. See [the SVG scale transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Scale) for details.
- **data-rotate**: A rotation in degrees. The center of the rotation will be the snippet's anchor point
- **data-scale** : Either a single scale factor, or a set of 2 scale factors
for the X and Y axis respectively. See [the SVG scale
transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Scale)
for details.
- **data-rotate**: A rotation in degrees. The center of the rotation will be
the snippet's anchor point
<Tip>
See [Using attributes](/howtos/code/attributes/) for details on how to set attributes.
</Tip>
Below is an example of the available snippets, and the use of the `data-scale` and `data-rotate` attributes:
<Example pattern="rendertest" options_only="snippets">
Overview of available snippets
</Example>