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.
138 lines
4.1 KiB
Text
138 lines
4.1 KiB
Text
---
|
|
title: Using attributes
|
|
---
|
|
|
|
Points, Paths, and Snippets all have [attributes](/reference/api/attributes/)
|
|
that you can use to influence how they behave.
|
|
|
|
Under the hood, text, CSS classes, and even circles are all set in attributes.
|
|
There are plenty of higher-level helper methods available, but knowing how to
|
|
manipulate attributes is useful in case you want to accomplish something for
|
|
which there is no higher-level helper method.
|
|
|
|
## Example
|
|
|
|
Let's use an example to see the different ways we can assign a CSS class:
|
|
|
|
<Example caption="Various ways to set attributes on a point">
|
|
```mjs
|
|
({ points, Point, paths, Path, part }) => {
|
|
/*
|
|
* Via the high-level Point.addText method
|
|
*/
|
|
points.a = new Point(0,0)
|
|
.addText('I am bold and colorful', 'bold fill-note')
|
|
|
|
/*
|
|
* Via the lower-level Point.attr method
|
|
*/
|
|
points.b = new Point(0,10)
|
|
.attr('data-text', 'I am bold and colorful')
|
|
.attr('data-text-class', 'bold fill-lining')
|
|
|
|
/*
|
|
* Via low-level access to the attributes property
|
|
*/
|
|
points.c = new Point(0,20)
|
|
points.c.attributes.add('data-text', 'I am bold and colorful')
|
|
points.c.attributes.add('data-text-class', 'bold fill-contrast')
|
|
|
|
// Prevent clipping
|
|
paths.diag = new Path()
|
|
.move(new Point(-10,-5))
|
|
.move(new Point(80,25))
|
|
|
|
return part
|
|
}
|
|
```
|
|
</Example>
|
|
|
|
So, attributes can be set via low-level access even though there are helpers
|
|
methods available for them.
|
|
|
|
## Common scenarios
|
|
|
|
A common scenario is to apply [CSS classes](/reference/css) to style a path:
|
|
|
|
```js
|
|
paths.example.attributes.add('class', 'lining dashed');
|
|
```
|
|
|
|
Because it's so common to set attributes, Points, Paths and Snippets all have
|
|
the `attr()` helper method.
|
|
|
|
Not only is less more, the method is also _chainable_, which allows you to do this:
|
|
|
|
```js
|
|
points.message = new Point(0,0)
|
|
.attr("data-text", "Hello world!")
|
|
.attr("data-text-class", "note");
|
|
```
|
|
|
|
:::note
|
|
|
|
In this example, we're using attributes to add text to our pattern.
|
|
The [adding-text](/howtos/code/adding-text) documentation explains this in detail.
|
|
|
|
:::
|
|
|
|
## Custom attributes
|
|
|
|
There are some custom attributes that FreeSewing uses to modify the appearance
|
|
of Points, Paths, and Snippets.
|
|
|
|
### Points
|
|
|
|
The custom attributes that can be added to Points:
|
|
|
|
| Attribute | Description |
|
|
|----------:|-------------|
|
|
| `data-text` | Text to display at the point |
|
|
| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling |
|
|
| `data-text-lineheight` | Line height for the text, in mm |
|
|
| `data-circle` | Radius of the circle to display at the point |
|
|
| `data-circle-class` | [CSS classes](/reference/css) to apply to the circle to provide styling |
|
|
|
|
:::note RELATED
|
|
See [Drawing circles](/howtos/code/drawing-circles) for more information
|
|
and other ways to draw circles.
|
|
|
|
See [Adding text](/howtos/code/adding-text) for other ways to add text
|
|
to points.
|
|
:::
|
|
|
|
### Paths
|
|
|
|
The custom attributes that can be added to Paths:
|
|
|
|
| Attribute | Description |
|
|
|----------:|-------------|
|
|
| `data-text` | Text to display along the path |
|
|
| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling |
|
|
|
|
:::note RELATED
|
|
See [Adding text](/howtos/code/adding-text) for other ways to add text
|
|
to paths.
|
|
:::
|
|
|
|
### Snippets
|
|
|
|
The custom attributes that can be added to Snippets:
|
|
|
|
| Attribute | Description |
|
|
|----------:|-------------|
|
|
| `data-rotate` | Number of degrees to rotate the snippet |
|
|
| `data-scale` | Scaling factor to apply to the snippet. Either a single number or an array of 2 numbers for separate X and Y scaling factors |
|
|
|
|
:::tip
|
|
|
|
When rendering an SVG document, FreeSewing will output all your attributes.
|
|
This gives you the
|
|
possibility to use any valid SVG attribute to control the appearance.
|
|
|
|
This is also why we use the _data-_ prefix for those attributes that have
|
|
special meaning within FreeSewing, such as `data-text`. Adding a `text` attribute
|
|
would result in invalid SVG as there is no such thing as a text attribute. But `data-text`
|
|
is fine because the `data-` prefix indicates it is a [custom attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*).
|
|
|
|
:::
|