ab3204f9f1
The replaces the NextJS site powering FreeSewing.dev with a Docusaurus setup. It's part of my efforts to simplify FreeSewing's setup so we can focus on our core value proposition.
51 lines
1.3 KiB
Text
51 lines
1.3 KiB
Text
---
|
|
title: Adding snippets
|
|
---
|
|
|
|
Snippets should be stored in the `snippets` key of the object passed to your part's
|
|
draft method. The constructor for snippets is available in the `Snippets` key. You can
|
|
destructure them for easy access.
|
|
|
|
<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
|
|
}) {
|
|
|
|
// 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
|
|
|
|
:::tip
|
|
|
|
See [Using attributes](/howtos/code/attributes/) for details on how to set attributes.
|
|
|
|
:::
|