diff --git a/markdown/dev/howtos/code/attributes/en.md b/markdown/dev/howtos/code/attributes/en.md index 2fe77bbbc73..df4d8889e96 100644 --- a/markdown/dev/howtos/code/attributes/en.md +++ b/markdown/dev/howtos/code/attributes/en.md @@ -5,12 +5,14 @@ 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. +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. -Let's use an example to see the different ways we can assign a css class: +## Example + +Let's use an example to see the different ways we can assign a CSS class: ```mjs @@ -45,9 +47,12 @@ Let's use an example to see the different ways we can assign a css class: ``` -kEven though there are helpers methods available for them. +So, attributes can be set via low-level access even though there are helpers +methods available for them. -A common scenario is to apply CSS classes to style a path: +## Common scenarios + +A common scenario is to apply [CSS classes](reference/css) to style a path: ```js paths.example.attributes.add('class', 'lining dashed'); @@ -71,10 +76,58 @@ The [adding-text](/howtos/code/adding-text) documentation explains this in detai +## 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 class to apply to the text to provide styling | +| `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 | + + +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 at the point | +| `data-text-class` | [CSS classes](/reference/css) to apply to the text to provide styling | + + +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 | + -When rendering, FreeSewing will output all your attributes. This gives you the -possiblity to use any valid attribute to control the appearance. +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 diff --git a/markdown/dev/reference/api/path/attr/en.md b/markdown/dev/reference/api/path/attr/en.md index 7e9551798a0..23b363f167b 100644 --- a/markdown/dev/reference/api/path/attr/en.md +++ b/markdown/dev/reference/api/path/attr/en.md @@ -46,9 +46,11 @@ Path path.attr( ## Notes Methods like -[`Path.addClass`](/reference/api/path/addclass), -[`Path.setClass`](/reference/api/path/setclass), -[`Path.adddText`](/reference/api/path/addtext), and +[`Path.addClass`](/reference/api/path/addclass), +[`Path.setClass`](/reference/api/path/setclass), +[`Path.addText`](/reference/api/path/addtext), and [`Path.setText`](/reference/api/path/settext) all call this method under the hood. +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Paths. diff --git a/markdown/dev/reference/api/path/en.md b/markdown/dev/reference/api/path/en.md index 424021aa581..174caedcd0a 100644 --- a/markdown/dev/reference/api/path/en.md +++ b/markdown/dev/reference/api/path/en.md @@ -12,7 +12,7 @@ Path new Path() The Path constructor takes no arguments. -## Attributes +## Properties A Path objects comes with the following properties: @@ -24,6 +24,10 @@ A Path objects comes with the following properties: [Path.setHidden()](/reference/api/path/sethidden) for various methods that allow setting this in a chainable way. + +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Paths. + ## Example diff --git a/markdown/dev/reference/api/point/attr/en.md b/markdown/dev/reference/api/point/attr/en.md index bb9ffe7f29a..31ea7e75a28 100644 --- a/markdown/dev/reference/api/point/attr/en.md +++ b/markdown/dev/reference/api/point/attr/en.md @@ -42,3 +42,7 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/ ``` +## Notes + +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Points. diff --git a/markdown/dev/reference/api/point/en.md b/markdown/dev/reference/api/point/en.md index 15a4db67e1f..391bcb1b089 100644 --- a/markdown/dev/reference/api/point/en.md +++ b/markdown/dev/reference/api/point/en.md @@ -15,7 +15,7 @@ The point constructor takes two arguments: - `x` : The X-coordinate of the point - `y` : The Y-coordinate of the point -## Attributes +## Properties Point objects come with the following properties: @@ -23,6 +23,11 @@ Point objects come with the following properties: - `y` : The Y-coordinate of the point - `attributes` : An [Attributes](/reference/api/attributes) instance holding the point's attributes + +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Points. + + ## Example diff --git a/markdown/dev/reference/api/snippet/attr/en.md b/markdown/dev/reference/api/snippet/attr/en.md index ac1a7b83bbc..3b56fe7eda7 100644 --- a/markdown/dev/reference/api/snippet/attr/en.md +++ b/markdown/dev/reference/api/snippet/attr/en.md @@ -41,3 +41,7 @@ Snippet snippet.attr( ``` + +See [Using Attributes](/howtos/code/attributes) +for information about what Attributes can be used with Snippets. + diff --git a/markdown/dev/reference/api/snippet/en.md b/markdown/dev/reference/api/snippet/en.md index d489c172ae8..7b2fcb7ef53 100644 --- a/markdown/dev/reference/api/snippet/en.md +++ b/markdown/dev/reference/api/snippet/en.md @@ -2,21 +2,22 @@ title: Snippet --- -A Snippet is a reuseable bit of markup for your pattern. They are added to the +A Snippet is a reusable bit of markup for your pattern. Snippets are added to the SVG `defs` section, and rendered with the SVG `use` tag. ## Signature ```js -Snippet new Snippet(def, Point); +Snippet new Snippet(String def, Point anchor); ``` The snippet constructor takes two arguments: -- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section +- `def` : The `xlink:href` id that links to the relevant entry in the SVG `defs` section. +This is also the common name of the snippet (`logo`, `notch`, `button`, etc.) - `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet -## Attributes +## Properties A Snippet object comes with the following properties: @@ -24,6 +25,11 @@ A Snippet object comes with the following properties: - `anchor` : A [`Point`](/reference/api/point) on which to anchor the snippet - `attributes` : An [`Attributes`](/reference/api/attributes) instance holding the snippet's attributes + +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Snippets. + + ## Example diff --git a/markdown/dev/reference/snippets/en.md b/markdown/dev/reference/snippets/en.md index 22deb9a6eda..c715a90cfd0 100644 --- a/markdown/dev/reference/snippets/en.md +++ b/markdown/dev/reference/snippets/en.md @@ -2,7 +2,28 @@ title: Snippets --- -A Snippet is a reuseable bit of markup for your pattern. They are provided by -plugins. Below is an overview of all the different snippets we maintain. +A Snippet is a reusable bit of markup that draws graphic elements on patterns. +Snippets are provided by [plugins](/reference/plugins) and are implemented as +[ elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs) +in the rendered SVG document. + +## Signature + +To place a Snippet at a given point: +```js +const snippet = new Snippet(String 'snippet name', Point anchor) +``` + + +See the [Snippet API](/reference/api/snippet) +for more information about how to use Snippets in code. + +See [Using Attributes](/howtos/code/attributes) +for information about custom Attributes that can be used with Snippets. + + +## List of snippets + +Below are all the different snippets we maintain.