1
0
Fork 0

fix(reference:api): Revert incorrect Example formatting (#367)

This PR reverts the incorrect lint/prettier changes applied to <Example> code in the reference Core API docs l by the husky pre-commit hook, the problem mentioned in Issue #333.

(These are just the changes for the Core API docs. Additional PRs will be filed for changes in the other reference, howtos, and guides documentation.)

Co-authored-by: Benjamin Fan <ben-git@swinglonga.com>
Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/367
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Benjamin Fan <benjamesben@noreply.codeberg.org>
Co-committed-by: Benjamin Fan <benjamesben@noreply.codeberg.org>
This commit is contained in:
Benjamin Fan 2025-05-19 08:04:05 +02:00 committed by Joost De Cock
parent a7eb3e0072
commit ed8a166ea9
34 changed files with 421 additions and 471 deletions

View file

@ -20,18 +20,17 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 10)
points.to = new Point(95, 10)
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.addClass('note dashed')
paths.line = new Path()
.move(points.from)
.line(points.to)
.addClass('note dashed')
return part
return part
}
````
```
</Example>
## Notes
@ -42,4 +41,4 @@ as the two following calls yield the same result:
```js
path.attr('class', 'fabric')
path.addClass('fabric')
````
```

View file

@ -24,15 +24,14 @@ This method is chainable as it returns the `Path` object
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.addText('FreeSewing rocks')
paths.line = new Path()
.move(points.from)
.line(points.to)
.addText('FreeSewing rocks')
return part
return part
}
````
```
</Example>
## Notes
@ -43,7 +42,7 @@ as the two following calls yield the same result:
```js
path.attr('data-text', 'Hello')
path.addText('Hello')
````
```
The difference with [Path.setText()](/reference/api/path/addtext) is that this
method will add to the existing text whereas `Path.setText()` will overwrite

View file

@ -20,35 +20,35 @@ number|false path.angleAt(Point point)
```js
({ Point, points, Path, paths, snippets, Snippet, part }) => {
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.D = new Point(50, 80)
points.DCp1 = new Point(70, 30)
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.D = new Point(50, 80)
points.DCp1 = new Point(70, 30)
paths.demo = new Path()
.move(points.D)
.curve(points.DCp1, points.DCp1, points.C)
.curve(points.CCp1, points.BCp2, points.B)
.line(points.A)
paths.demo = new Path()
.move(points.D)
.curve(points.DCp1, points.DCp1, points.C)
.curve(points.CCp1, points.BCp2, points.B)
.line(points.A)
points.testPoint = paths.demo.shiftFractionAlong(0.55)
snippets.point = new Snippet("notch", points.testPoint)
points.testPoint = paths.demo.shiftFractionAlong(0.55)
snippets.point = new Snippet("notch", points.testPoint)
let angle = paths.demo.angleAt(points.testPoint)
//draw a tangent path
paths.tangent = new Path()
.move(points.testPoint.shift(angle, -30))
.line(points.testPoint.shift(angle, 30))
.attr("class", "lining dashed")
let angle = paths.demo.angleAt(points.testPoint)
//draw a tangent path
paths.tangent = new Path()
.move(points.testPoint.shift(angle, -30))
.line(points.testPoint.shift(angle, 30))
.attr("class", "lining dashed")
return part
return part
}
```
</Example>
## Notes
Keep in mind that calculations with Bézier curves are often approximations.

View file

@ -28,20 +28,19 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(20, -10)
points.cp2 = new Point(50, 50)
points.to = new Point(70, 20)
points.from = new Point(10, 20)
points.cp1 = new Point(20, -10)
points.cp2 = new Point(50, 50)
points.to = new Point(70, 20)
paths.example = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.attr("class", "canvas")
.setText("FreeSewing rocks", "text-xs center")
paths.example = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.attr("class", "canvas")
.setText("FreeSewing rocks", "text-xs center")
return part
return part
}
```
</Example>
@ -57,4 +56,3 @@ all call this method under the hood.
See [Using Attributes](/howtos/code/attributes)
for information about custom Attributes that can be used with Paths.
```

View file

@ -36,23 +36,22 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.origin = new Point(40, 0)
points.from = new Point(10, 20)
points.origin = new Point(40, 0)
paths.line = new Path()
.move(points.from)
.circleSegment(90, points.origin)
.setText("→ Path.circleSegment() →", "text-sm center fill-note")
paths.line = new Path()
.move(points.from)
.circleSegment(90, points.origin)
.setText("→ Path.circleSegment() →", "text-sm center fill-note")
paths.helper = new Path()
.move(paths.line.start())
.line(points.origin)
.line(paths.line.end())
.setClass('dotted stroke-sm')
paths.helper = new Path()
.move(paths.line.start())
.line(points.origin)
.line(paths.line.end())
.setClass('dotted stroke-sm')
return part
return part
}
```
</Example>
```

View file

@ -20,20 +20,18 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp2 = new Point(60, 30)
points.to = new Point(90, 20)
points.from = new Point(10, 20)
points.cp2 = new Point(60, 30)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
.\_curve(points.cp2, points.to)
.close()
.reverse() // To keep text from being upside-down
.setText('Path.\_close()', 'text-sm right fill-note')
paths.line = new Path()
.move(points.from)
._curve(points.cp2, points.to)
.close()
.reverse() // To keep text from being upside-down
.setText('Path._close()', 'text-sm right fill-note')
return part
return part
}
```
</Example>
```

View file

@ -21,19 +21,17 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 40)
points.to = new Point(90, 20)
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.cp2 = new Point(60, 40)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-note")
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-note")
return part
return part
}
```
</Example>
```

View file

@ -3,7 +3,7 @@ title: Path.curve_()
---
The `Path.curve_()` method draws a cubic Bézier curve from the current position
via two control points to a given endpoint. However, the end control point is
via two control points to a given endpoint. However, the end control point is
identical to the end point.
## Signature
@ -18,10 +18,12 @@ This method is chainable as it returns the `Path` object
## Example
<Example caption="Example of the Path.curve\_() method">
```js
;({ Point, points, Path, paths, part }) => {
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20)
points.cp1 = new Point(40, 0)
points.to = new Point(90, 20)
@ -29,8 +31,8 @@ This method is chainable as it returns the `Path` object
paths.line = new Path()
.move(points.from)
.curve_(points.cp1, points.to)
.setText('Path.curve_()', 'text-sm center fill-note')
.attr('data-text-dy', -1)
.setText("Path.curve_()", "text-sm center fill-note")
.attr("data-text-dy", -1)
return part
}

View file

@ -20,22 +20,20 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, snippets, Snippet, part }) => {
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
snippets.end = new Snippet("notch", paths.demo.end())
snippets.end = new Snippet("notch", paths.demo.end())
return part
return part
}
```
</Example>
```

View file

@ -20,17 +20,15 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

View file

@ -15,39 +15,38 @@ Path path.insop(string id, Path path)
This method is chainable as it returns the `Path` object
:::
<Example caption="Example of the Path.insop() method">
```js
({ Point, points, Path, paths, part }) => {
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
return part
return part
}
```
</Example>
## Notes
This is often used to insert darts into a path.
```

View file

@ -21,17 +21,15 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 10)
points.to = new Point(90, 10)
points.from = new Point(10, 10)
points.to = new Point(90, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText("Path.line()", "text-sm center fill-note")
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText("Path.line()", "text-sm center fill-note")
return part
return part
}
```
</Example>
```

View file

@ -22,31 +22,29 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
points.left = new Point(10,10)
points.dartLeft = new Point(40, 10)
points.dartTip = new Point(50, 50)
points.dartRight = new Point(60, 10)
points.right = new Point(90, 10)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
paths.withDart = paths.withoutDart
.clone()
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
return part
return part
}
```
</Example>
```

View file

@ -20,18 +20,17 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 10)
points.to = new Point(95, 10)
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setClass('note dashed')
paths.line = new Path()
.move(points.from)
.line(points.to)
.setClass('note dashed')
return part
return part
}
````
```
</Example>
## Notes
@ -42,4 +41,4 @@ as the two following calls yield the same result:
```js
path.attr('class', 'fabric', true)
path.setClass('fabric')
````
```

View file

@ -21,17 +21,15 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

View file

@ -24,15 +24,14 @@ This method is chainable as it returns the `Path` object
points.from = new Point(5, 10)
points.to = new Point(95, 10)
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText('FreeSewing rocks')
paths.line = new Path()
.move(points.from)
.line(points.to)
.setText('FreeSewing rocks')
return part
return part
}
````
```
</Example>
## Notes
@ -43,7 +42,7 @@ as the two following calls yield the same result:
```js
path.attr('data-text', 'Hello')
path.setText('Hello')
````
```
The difference with [Path.addText()](/reference/api/path/addtext) is that this
method will overwrite existing text on the path, whereas `Path.addText()` will

View file

@ -21,24 +21,22 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.bCp2 = new Point(50,50)
points.bTo = new Point(10,50)
points.bCp2 = new Point(50,50)
points.bTo = new Point(10,50)
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve(points.bCp2, points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve(points.bCp2, points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
return part
return part
}
```
</Example>
```

View file

@ -14,7 +14,7 @@ Path path.smurve_(Point cp2, Point end)
```
:::tip
This method is chainable as it returns the `Path` object
This method is chainable as it returns the `Path` objecti
:::
## Example
@ -23,23 +23,21 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.aFrom = new Point(10, 10)
points.aCp1 = new Point(40, 40)
points.aCp2 = new Point(70, -20)
points.aTo = new Point(100, 10)
points.bTo = new Point(10,50)
points.bTo = new Point(10,50)
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve\_(points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
paths.smurve = new Path()
.move(points.aFrom)
.curve(points.aCp1, points.aCp2,points.aTo)
.smurve_(points.bTo)
.reverse() // Puts text at the end
.setText('Path.smurve()')
return part
return part
}
```
</Example>
```

View file

@ -20,22 +20,20 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, snippets, Snippet, part }) => {
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
points.A = new Point(45, 60)
points.B = new Point(10, 30)
points.BCp2 = new Point(40, 20)
points.C = new Point(90, 30)
points.CCp1 = new Point(50, -30)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
snippets.end = new Snippet("notch", paths.demo.start())
snippets.end = new Snippet("notch", paths.demo.start())
return part
return part
}
```
</Example>
```

View file

@ -23,17 +23,17 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 20)
points.cp2 = new Point(60, 50)
points.to = new Point(90, 20)
points.from = new Point(5, 20)
points.cp2 = new Point(60, 50)
points.to = new Point(90, 20)
paths.line = new Path()
.move(points.from)
.\_curve(points.cp2, points.to)
.setText("Path.\_curve()", "text-sm center fill-note")
.attr("data-text-dy", -1)
paths.line = new Path()
.move(points.from)
._curve(points.cp2, points.to)
.setText("Path._curve()", "text-sm center fill-note")
.attr("data-text-dy", -1)
return part
return part
}
````

View file

@ -2,7 +2,7 @@
title: Path.unhide()
---
The `Path.unhide()` method unhides the path so it appears in the output. By
The `Path.unhide()` method unhides the path so it appears in the output. By
default, paths are not hidden. So you should only call this on path previously
hidden via `Path.hide()`.
@ -22,17 +22,15 @@ This method is chainable as it returns the `Path` object
```js
({ Point, points, Path, paths, part }) => {
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
points.top = new Point(50, 0)
points.left = new Point (20,50)
points.right = new Point (80,50)
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
paths.a = new Path().move(points.top).line(points.right).setText('a')
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
paths.c = new Path().move(points.left).line(points.top).setText('c')
return part
return part
}
```
</Example>
```

View file

@ -28,20 +28,18 @@ This method is chainable as it returns the `Point` object
.addCircle(3, 'lining dashed')
.addCircle(7, 'mark dashed')
points.b = new Point(50, 10)
.addCircle(1, 'interfacing')
.addCircle(3, 'fabric')
.addCircle(5, 'lining')
.addCircle(7, 'mark')
.addCircle(9, 'note')
points.b = new Point(50, 10)
.addCircle(1, 'interfacing')
.addCircle(3, 'fabric')
.addCircle(5, 'lining')
.addCircle(7, 'mark')
.addCircle(9, 'note')
points.c = new Point(70, 10)
.addCircle(3, 'interfacing')
.addCircle(7, 'mark lashed')
points.c = new Point(70, 10)
.addCircle(3, 'interfacing')
.addCircle(7, 'mark lashed')
return part
return part
}
```
</Example>
```

View file

@ -28,19 +28,18 @@ This method is chainable as it returns the `Point` object
.addText('FreeSewing')
.addText('rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
## Notes
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
```

View file

@ -18,6 +18,7 @@ Point point.attr(
If the third parameter is set to `true` it will call [`this.attributes.set()`](/reference/api/attributes/set/) instead, thereby overwriting the value of the attribute.
:::tip
This method is chainable as it returns the `Point` object
:::
@ -28,19 +29,18 @@ This method is chainable as it returns the `Point` object
```js
({ Point, points, Path, paths, part }) => {
points.anchor = new Point(100, 25)
.attr('data-text', 'FreeSewing')
.attr('data-text', 'rocks')
points.anchor = new Point(100, 25)
.attr('data-text', 'FreeSewing')
.attr('data-text', 'rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
@ -48,4 +48,3 @@ return part
See [Using Attributes](/howtos/code/attributes)
for information about custom Attributes that can be used with Points.
```

View file

@ -21,22 +21,21 @@ This method is chainable as it returns the `Point` object
```js
({ Point, points, Path, paths, Snippet, snippets, part }) => {
points.A = new Point(25, 25)
.setText("Point A", "text-xl")
.attr("data-text-fill-opacity", "0.5")
points.B = points.A.clone().setText("Point B")
points.A = new Point(25, 25)
.setText("Point A", "text-xl")
.attr("data-text-fill-opacity", "0.5")
points.B = points.A.clone().setText("Point B")
snippets.x = new Snippet("notch", points.A)
snippets.x = new Snippet("notch", points.A)
// Avoid the text getting cropped
paths.hidden = new Path()
.move(new Point(20,10))
.move(new Point(75,30))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(new Point(20,10))
.move(new Point(75,30))
.addClass('hidden')
return part
return part
}
```
</Example>
@ -46,4 +45,3 @@ return part
The [`Point.copy()`](/reference/api/point/copy/) method will only copy the
point's coordinates, whereas this `Point.clone()` method will also copy its
attributes.
```

View file

@ -31,24 +31,22 @@ This method is chainable as it returns the `Point` object
```js
({ Point, points, part }) => {
points.a = new Point(30, 10)
.setCircle(3, 'lining dashed')
.setCircle(7, 'mark dashed')
points.a = new Point(30, 10)
.setCircle(3, 'lining dashed')
.setCircle(7, 'mark dashed')
points.b = new Point(50, 10)
.setCircle(1, 'interfacing')
.setCircle(3, 'fabric')
.setCircle(5, 'lining')
.setCircle(7, 'mark')
.setCircle(9, 'note')
points.b = new Point(50, 10)
.setCircle(1, 'interfacing')
.setCircle(3, 'fabric')
.setCircle(5, 'lining')
.setCircle(7, 'mark')
.setCircle(9, 'note')
points.c = new Point(70, 10)
.setCircle(3, 'interfacing')
.setCircle(7, 'mark lashed')
points.c = new Point(70, 10)
.setCircle(3, 'interfacing')
.setCircle(7, 'mark lashed')
return part
return part
}
```
</Example>
```

View file

@ -25,23 +25,21 @@ This method is chainable as it returns the `Point` object
```js
({ Point, points, Path, paths, part }) => {
points.anchor = new Point(100, 25)
.setText('FreeSewing')
.setText('rocks')
points.anchor = new Point(100, 25)
.setText('FreeSewing')
.setText('rocks')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
// Avoid the text getting cropped
paths.hidden = new Path()
.move(points.anchor)
.line(points.anchor.shift(0, 80))
.addClass('hidden')
return part
return part
}
```
</Example>
## Notes
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
```

View file

@ -3,7 +3,7 @@ title: Snippet.attr()
---
The `Snippet.attr()` method can be used to add attributes to the Snippet
object. It calls `this.attributes.add()` under the hood, and returns the
object. It calls `this.attributes.add()` under the hood, and returns the
Snippet object.
If the third parameter is set to `true` it will call `this.attributes.set()`
@ -29,18 +29,17 @@ This method is chainable as it returns the `Snippet` object
```js
({ Point, points, Path, paths, Snippet, snippets, part }) => {
snippets.logo = new Snippet('logo', new Point(0,0))
.attr("data-scale", 0.75)
.attr("data-rotate", 180)
snippets.logo = new Snippet('logo', new Point(0,0))
.attr("data-scale", 0.75)
.attr("data-rotate", 180)
// Prevent clipping
paths.diag = new Path()
.move(new Point(-25,-10))
.move(new Point(25,35))
// Prevent clipping
paths.diag = new Path()
.move(new Point(-25,-10))
.move(new Point(25,35))
return part
return part
}
```
</Example>
@ -48,4 +47,3 @@ return part
See [Using Attributes](/howtos/code/attributes)
for information about what Attributes can be used with Snippets.
:::
```

View file

@ -21,22 +21,20 @@ This method is chainable as it returns the `Snippet` object
```js
({ Point, Path, paths, Snippet, snippets, part }) => {
for (const i of [0,1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(60*i, 0)
).rotate(60 * i)
for (const i of [0,1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(60*i, 0)
).rotate(60 * i)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(-30,-50))
.move(new Point(400,50))
return part
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(-30,-50))
.move(new Point(400,50))
return part
}
```
</Example>
```

View file

@ -21,22 +21,20 @@ This method is chainable as it returns the `Snippet` object
```js
({ Point, Path, paths, Snippet, snippets, part }) => {
for (const i of [1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(30\*i, 0)
).scale(i/10)
for (const i of [1,2,3,4,5,6]) {
snippets[`demo${i}`] = new Snippet(
"logo",
new Point(30*i, 0)
).scale(i/10)
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(0,-30))
.move(new Point(200,20))
return part
}
// Prevent clipping
paths.diag = new Path()
.move(new Point(0,-30))
.move(new Point(200,20))
return part
}
```
</Example>
```

View file

@ -24,7 +24,7 @@ Point | false utils.beamIntersectsLine(
<Example caption="A Utils.beamIntersectsLine() example">
```js
;({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
points.A = new Point(45, 20)
points.B = new Point(60, 15)
points.C = new Point(10, 10)

View file

@ -28,41 +28,40 @@ multiple intersections are found.
```js
({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
points.start = new Point(10, 15)
points.cp1 = new Point(80, 10)
points.cp2 = new Point(-50, 80)
points.end = new Point(110, 70)
points.start = new Point(10, 15)
points.cp1 = new Point(80, 10)
points.cp2 = new Point(-50, 80)
points.end = new Point(110, 70)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
for (let x of [30, 40]) {
points["from" + x] = new Point(x, 10)
points["to" + x] = new Point(x, 80)
paths["line" + x] = new Path()
.move(points["from" + x])
.line(points["to" + x])
.addClass("lining dashed")
for (let x of [30, 40]) {
points["from" + x] = new Point(x, 10)
points["to" + x] = new Point(x, 80)
paths["line" + x] = new Path()
.move(points["from" + x])
.line(points["to" + x])
.addClass("lining dashed")
}
snippets.i40 = new Snippet(
"notch",
utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40)
)
for (let p of utils.curveIntersectsX(
points.start,
points.cp1,
points.cp2,
points.end,
30
))
snippets[p.y] = new Snippet("notch", p)
return part
}
snippets.i40 = new Snippet(
"notch",
utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40)
)
for (let p of utils.curveIntersectsX(
points.start,
points.cp1,
points.cp2,
points.end,
30
))
snippets[p.y] = new Snippet("notch", p)
return part
}
```
</Example>
@ -73,4 +72,3 @@ This is a low-level (and faster) variant
of [`Path.intersectsX()`](/reference/api/path/intersectsx).
Instead of a path, you describe a single curve by passing the four
points that describes it.
```

View file

@ -22,47 +22,46 @@ a single intersection is found, and an array
of [Point](/reference/api/point/) objects if
multiple intersections are found.
## Example
## Example
<Example caption="A Utils.curveIntersectY() example">
```js
({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
points.start = new Point(10, 45)
points.cp1 = new Point(50, 10)
points.cp2 = new Point(0, 80)
points.end = new Point(110, 70)
points.start = new Point(10, 45)
points.cp1 = new Point(50, 10)
points.cp2 = new Point(0, 80)
points.end = new Point(110, 70)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
for (let y of [40, 50]) {
points["from" + y] = new Point(10, y)
points["to" + y] = new Point(110, y)
paths["line" + y] = new Path()
.move(points["from" + y])
.line(points["to" + y])
.addClass("lining dashed")
for (let y of [40, 50]) {
points["from" + y] = new Point(10, y)
points["to" + y] = new Point(110, y)
paths["line" + y] = new Path()
.move(points["from" + y])
.line(points["to" + y])
.addClass("lining dashed")
}
snippets.i50 = new Snippet(
"notch",
utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50)
)
for (let p of utils.curveIntersectsY(
points.start,
points.cp1,
points.cp2,
points.end,
40
))
snippets[p.x] = new Snippet("notch", p)
return part
}
snippets.i50 = new Snippet(
"notch",
utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50)
)
for (let p of utils.curveIntersectsY(
points.start,
points.cp1,
points.cp2,
points.end,
40
))
snippets[p.x] = new Snippet("notch", p)
return part
}
```
</Example>
@ -72,4 +71,3 @@ This is a low-level (and faster) variant
of [`Path.intersectsY()`](/reference/api/path/intersectsy).
Instead of a path, you describe a single curve by passing the four
points that describes it.
```

View file

@ -31,45 +31,43 @@ multiple intersections are found.
```js
({ Point, points, Path, paths, Snippet, snippets, utils, getId, part }) => {
points.A = new Point(10, 10)
points.Acp = new Point(310, 40)
points.B = new Point(110, 70)
points.Bcp = new Point(-210, 40)
points.A = new Point(10, 10)
points.Acp = new Point(310, 40)
points.B = new Point(110, 70)
points.Bcp = new Point(-210, 40)
points.C = new Point(20, -5)
points.Ccp = new Point(60, 300)
points.D = new Point(100, 85)
points.Dcp = new Point(70, -220)
paths.curveA = new Path()
.move(points.A)
.curve(points.Acp, points.Bcp, points.B)
paths.curveB = new Path()
.move(points.C)
.curve(points.Ccp, points.Dcp, points.D)
points.C = new Point(20, -5)
points.Ccp = new Point(60, 300)
points.D = new Point(100, 85)
points.Dcp = new Point(70, -220)
paths.curveA = new Path()
.move(points.A)
.curve(points.Acp, points.Bcp, points.B)
paths.curveB = new Path()
.move(points.C)
.curve(points.Ccp, points.Dcp, points.D)
const intersections = utils.curvesIntersect(
points.A,
points.Acp,
points.Bcp,
points.B,
points.C,
points.Ccp,
points.Dcp,
points.D
)
const intersections = utils.curvesIntersect(
points.A,
points.Acp,
points.Bcp,
points.B,
points.C,
points.Ccp,
points.Dcp,
points.D
)
if (intersections) {
if (intersections instanceof Array) {
for (const p of intersections)
snippets[getId()] = new Snippet('notch', p)
} else {
snippets[getId()] = new Snippet('notch', intersections)
if (intersections) {
if (intersections instanceof Array) {
for (const p of intersections)
snippets[getId()] = new Snippet('notch', p)
} else {
snippets[getId()] = new Snippet('notch', intersections)
}
}
return part
}
}
return part
}
```
</Example>
```