VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(docs): Updated Path api docs for v3

Browse source
This commit is contained in:
Joost De Cock 2022-09-27 18:24:35 +02:00
parent 3cb5384df5
commit ede3c137bc
40 changed files with 1192 additions and 948 deletions
Download patch file Download diff file Expand all files Collapse all files

10
markdown/dev/reference/api/path/_curve/en.md
View file

@ -17,24 +17,24 @@ Path path._curve(Point cp2, Point to)
## Example
<TabbedExample part="path__curve" caption="Example of the Path.\_curve() method">
<Example caption="Example of the Path.\_curve() method">
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(5, 20);
points.cp2 = new Point(60, 30);
points.cp2 = new Point(60, 50);
points.to = new Point(90, 20);
paths.line = new Path()
.move(points.from)
._curve(points.cp2, points.to)
.attr("data-text", "Path._curve()")
.attr("data-text-class", "text-sm center fill-note");
.setText("Path._curve()", "text-sm center fill-note")
.attr("data-text-dy", -1)
return part
}
```
</TabbedExample>
</Example>
## Notes

36
markdown/dev/reference/api/path/addclass/en.md
View file

@ -4,31 +4,17 @@ title: Path.addClass()
The `Path.addClass()` method adds a CSS class to the path.
## Signature
```js
Path path.addClass(string className)
```
<Tip | compact>This method is chainable as it returns the `Path` object</Tip>
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Tip>
###### This method exists to save you some typing
Note that the two following calls yield the same result:
```js
path.attr('class', 'fabric')
path.addClass('fabric')
```
So the only purpose of this method is to save your some typing.
</Tip>
<Example part="path_addclass">
Example of the Path.addClass() method
</Example>
## Example
<Example caption="Example of the Path.addClass() method">
```js
({ Point, points, Path, paths, part }) => {
@ -43,3 +29,15 @@ Example of the Path.addClass() method
return part
}
```
</Example>
## Notes
The main purpose of this method is to save your some typing,
as the two following calls yield the same result:
```js
path.attr('class', 'fabric')
path.addClass('fabric')
```

47
markdown/dev/reference/api/path/addtext/en.md Normal file
View file

@ -0,0 +1,47 @@
---
title: Path.addText()
---
The `Path.addText()` method adds text to the path.
## Signature
```js
Path path.addText(string text, string className)
```
The second argument will optionally be used to set the CSS class for the text.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
## Example
<Example caption="Example of the Path.addText() method">
```js
({ Point, points, Path, paths, part }) => {
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')
return part
}
```
</Example>
## Notes
The main purpose of this method is to save your some typing,
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
existing text on the path,

6
markdown/dev/reference/api/path/aspathstring/en.md
View file

@ -5,13 +5,13 @@ title: Path.asPathString()
This `Path.asPathString()` returs the path as a string that can be used
as the `d` attribute for an SVG `path` element.
## Signature
```js
string path.asPathString()
```
<Note>
## Notes
This method is mostly aimed at people looking to implement their own rendering
methods, or integrate with SVG processing tools.
</Note>

32
markdown/dev/reference/api/path/attr/en.md
View file

@ -8,6 +8,8 @@ It calls `this.attributes.add()` under the hood, and returns the Path object.
If the third parameter is set to `true` it will call `this.attributes.set()`
instead, thereby overwriting the value of the attribute.
## Signature
```js
Path path.attr(
string name,
@ -18,31 +20,35 @@ Path path.attr(
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_attr">
Example of the Path.attr() method
</Example>
## Example
<Example caption=" Example of the Path.attr() method">
```js
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 50);
points.cp1 = new Point(40, 10);
points.cp2 = new Point(90, 30);
points.to = new Point(50, 90);
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)
.addClass("canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
.setClass("canvas")
.setText("FreeSewing rocks", "text-xs center")
return part
}
```
</Example>
<Note>
Methods like `addClass`, `setClass`, `addCircle`, `setCircle`, `adddText`, and `setText`
## Notes
Methods like
[`Path.addClass`](/reference/api/path/addclass),
[`Path.setClass`](/reference/api/path/setclass),
[`Path.adddText`](/reference/api/path/addtext), and
[`Path.setText`](/reference/api/path/settext)
all call this method under the hood.
</Note>

6
markdown/dev/reference/api/path/bbox/en.md
View file

@ -5,6 +5,8 @@ title: Path.bbox()
The `Path.bbox()` method returns an object describing the bounding box of a path.
In other words, it gives you a rectangle the Path fits in.
## Signature
```js
object path.bbox()
```
@ -18,8 +20,6 @@ It returns an object with a signature like this:
}
```
<Note>
## Notes
This method is mostly aimed at people looking to implement their own layout solution.
</Note>

48
markdown/dev/reference/api/path/clone/en.md
View file

@ -4,30 +4,36 @@ title: Path.clone()
The `Path.clone()` method returns a new `Path` object that is a deep copy of this path.
## Signature
```js
Path path.clone()
```
<Example part="path_clone">
Example of the Path.clone() method
## Example
<Example caption="Example of the Path.clone() method">
```js
({ Point, points, Path, paths, 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);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
paths.clone = paths.example
.clone()
.setClass("note lashed stroke-xl")
.attr("style", "stroke-opacity: 0.5");
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
paths.clone = paths.example
.clone()
.attr("class", "note lashed stroke-l")
.attr("style", "stroke-opacity: 0.5");
```

45
markdown/dev/reference/api/path/close/en.md
View file

@ -1,29 +1,36 @@
---
title: close()
title: Path.close()
---
The `Path.close()` method closes a path by drawing a straight line from the current position to the path's start.
## Signature
```js
Path path.close()
```
Closes a path by drawing a straight line from the current position to the path's start.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_close">
Example of the Path.close() method
## Example
<Example caption="Example of the Path.close() method">
```js
({ Point, points, Path, paths, part }) => {
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')
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
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
.attr("data-text", "Path._close()")
.attr("data-text-class", "text-sm right fill-note");
```

44
markdown/dev/reference/api/path/curve/en.md
View file

@ -1,28 +1,36 @@
---
title: curve()
title: Path.curve()
---
The `Path.curve()` method draws a cubic Bezier curve from the current position
via two control points to a given endpoint.
## Signature
```js
Path path.curve(Point cp1, Point cp2, Point to)
```
Draws a cubic Bezier curve from the current position via two control points to a given endpoint.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_curve">
Example of the Path.curve() method
## Example
<Example caption="Example of the Path.curve() method">
```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);
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.setText("Path.curve()", "text-sm center fill-note")
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.from = new Point(10, 20);
points.cp1 = new Point(40, 0);
points.cp2 = new Point(60, 30);
points.to = new Point(90, 20);
paths.line = new Path()
.move(points.from)
.curve(points.cp1, points.cp2, points.to)
.attr("data-text", "Path.curve()")
.attr("data-text-class", "text-sm center fill-note");
```

49
markdown/dev/reference/api/path/curve_/en.md
View file

@ -1,35 +1,26 @@
---
title: "curve_()"
title: Path.curve_()
---
The `Path.curve_()` method draws a cubic Bezier curve from the current position
via two control points to a given endpoint. However, the end control point is
identical to the end point.
## Signature
```js
Path path.curve_(Point cp1, Point to)
```
Draws a cubic Bezier curve from the current position via two control points to a given endpoint.
However, the end control point is identical to the end point.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Tip>
## Example
###### This method exists to save you some typing
Note that the two following calls yield the same result:
<Example caption="Example of the Path.curve\_() method">
```js
.curve(point1, point2, point2)
.curve_(point1, point2)
```
So the only purpose of this method is to save your some typing;
</Tip>
<Example part="path_curve_">
Example of the Path.curve\_() method
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
({ Point, points, Path, paths, part }) => {
points.from = new Point(10, 20);
points.cp1 = new Point(40, 0);
@ -38,6 +29,20 @@ Example of the Path.curve\_() method
paths.line = new Path()
.move(points.from)
.curve_(points.cp1, points.to)
.attr("data-text", "Path.curve_()")
.attr("data-text-class", "text-sm center fill-note");
.setText("Path.curve_()", "text-sm center fill-note")
.attr("data-text-dy", -1)
return part
}
```
</Example>
## Notes
The main purpose of this method is to save your some typing,
as the two following calls yield the same result:
```js
.curve(point1, point2, point2)
.curve_(point1, point2)
```

65
markdown/dev/reference/api/path/divide/en.md
View file

@ -1,42 +1,49 @@
---
title: divide()
title: Path.divide()
---
The `Path.divide()` method breaks a path apart in an array of atomic paths. An
atomic path is a path that can't be divided further and is always made up of
one move + one drawing operation.
## Signature
```js
array path.divide()
```
Breaks a path apart in an array of atomic paths. An atomic path is a path that can't be divided further and is
always made up of one move + one drawing operation.
<Example part="path_divide">
Example of the Path.divide() method
</Example>
## Example
<Example caption="Example of the Path.divide() method">
```js
let { Point, points, Path, paths } = part.shorthand();
({ Point, points, Path, paths, part }) => {
points.A = new Point(55, 40);
points.B = new Point(10, 70);
points.BCp2 = new Point(40, 20);
points.C = new Point(90, 60);
points.CCp1 = new Point(50, -30);
points.D = new Point(50, 80);
points.DCp1 = new Point(140, 50);
points.A = new Point(55, 40);
points.B = new Point(10, 70);
points.BCp2 = new Point(40, 20);
points.C = new Point(90, 60);
points.CCp1 = new Point(50, -30);
points.D = new Point(50, 80);
points.DCp1 = new Point(140, 50);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D)
.close();
let style = "stroke-width: 4; stroke-opacity: 0.5;";
let i = 0;
for (let p of paths.example.divide()) {
i++;
paths[i] = p
.attr("style", style)
.attr('style', `stroke: hsl(${i * 70}, 100%, 50%)`)
}
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D)
.close();
let style = "stroke-width: 4; stroke-opacity: 0.5;";
let i = 0;
for (let p of paths.example.divide()) {
i++;
paths[i] = p
.attr("style", style)
.attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
return part
}
```
</Example>

61
markdown/dev/reference/api/path/edge/en.md
View file

@ -1,5 +1,5 @@
---
title: edge()
title: Path.edge()
---
```js
@ -17,36 +17,37 @@ Returns the Point object at the edge of the path you specify. Edge must be one o
- `bottomLeft`
- `bottomRight`
<Example part="path_edge">
Example of the Path.edge() method
</Example>
<Example caption="Example of the Path.edge() method">
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
({ 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(-60, 90);
points.E = new Point(90, 190);
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(-60, 90)
points.E = new Point(90, 190)
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.E, points.D, points.A)
.close()
for (let i of [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight",
"top",
"left",
"bottom",
"right"
]) snippets[i] = new Snippet("notch", paths.demo.edge(i))
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.E, points.D, points.A)
.close();
for (let i of [
"topLeft",
"topRight",
"bottomLeft",
"bottomRight",
"top",
"left",
"bottom",
"right"
]) snippets[i] = new Snippet("notch", paths.demo.edge(i));
return part
}
```
</Example>

9
markdown/dev/reference/api/path/en.md
View file

@ -13,8 +13,13 @@ Path new Path();
A Path objects comes with the following properties:
- `render` : Set this to `false` to not render the path (exclude it from the output)
- `attributes` : An [Attributes](/reference/api/attributes) instance holding the path's attributes
- `attributes` : An [Attributes](/reference/api/attributes) instance holding
the path's attributes
- `hidden` : When this is `true` the path will be hidden (excluded it from the
output). See [Path.hide()](/reference/api/path/hide),
[Path.unhide()](/reference/api/path/unhide), and
[Path.setHidden()](/reference/api/path/sethidden) for various methods that
allow setting this in a chainable way.
In addition, a Path object exposes the following methods:

48
markdown/dev/reference/api/path/end/en.md
View file

@ -1,30 +1,38 @@
---
title: end()
title: Path.end()
---
The `Path.end()` method returns the Point object at the end of the path.
## Signature
```js
Point path.end()
```
Returns the Point object at the end of the path.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_end">
Example of the Path.end() method
## Example
<Example caption="Example of the Path.end() method">
```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)
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())
return part
}
```
</Example>
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
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);
snippets.end = new Snippet("notch", paths.demo.end());
```

48
markdown/dev/reference/api/path/hide/en.md
View file

@ -1,37 +1,33 @@
---
title: hide()
title: Path.hide()
---
The `Path.hide()` hides the path so it does not appear in the output.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.hide()
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.hide() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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')
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```

63
markdown/dev/reference/api/path/insop/en.md
View file

@ -1,38 +1,51 @@
---
title: insop()
title: Path.insop()
---
The `Path.insop()` method injects a Path into the [`noop`
operation](/reference/api/path/noop) with id `id`.
## Signature
```js
Path path.insop(string id, Path path)
```
Injects a Path into the [`noop` operation](/reference/api/path/noop) with id `id`.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Tip compact>This is often used to insert darts into a path</Tip>
<Example part="path_noop">
Example of the Path.noop() method
<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)
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;')
return part
}
```
</Example>
```js
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)
## Notes
paths.withoutDart = new Path()
.move(points.left)
.line(points.dartLeft)
.noop('dart')
.line(points.right)
This is often used to insert darts into a path.
paths.withDart = paths.without
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
```

98
markdown/dev/reference/api/path/intersects/en.md
View file

@ -1,59 +1,61 @@
---
title: intersects()
title: Path.intersects()
---
```
array|false path.intersects(Path path)
```
The `Path.intersects()` method returns the Point object(s) where the path
intersects with a path you pass it.
Returns the Point object(s) where the path intersects with a path you pass it.
## Signature
<Tip>
```
array|false path.intersects(Path path)
```
###### Use the intersection methods in Utils whenever possible
<Example caption="Example of the Path.intersects() method">
```js
({ Point, points, Path, paths, snippets, Snippet, getId, 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, 130);
points.DCp1 = new Point(150, 30);
points._A = new Point(55, 40);
points._B = new Point(0, 55);
points._BCp2 = new Point(40, -20);
points._C = new Point(90, 40);
points._CCp1 = new Point(50, -30);
points._D = new Point(40, 120);
points._DCp1 = new Point(180, 40);
paths.demo1 = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
paths.demo2 = new Path()
.move(points._A)
.line(points._B)
.curve(points._BCp2, points._CCp1, points._C)
.curve(points._DCp1, points._DCp1, points._D);
for (let p of paths.demo1.intersects(paths.demo2)) {
snippets[getId()] = new Snippet('notch', p)
}
return part
}
```
</Example>
## Notes
This is an expensive (read: slow) method that you should only use when you don't know
in advance in what segment of your path the intersection will occur.
If you do know, use one of the intersection methods in [Utils](/reference/api/utils).
</Tip>
<Example part="path_intersects">
Example of the Path.intersects() method
</Example>
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
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, 130);
points.DCp1 = new Point(150, 30);
points._A = new Point(55, 40);
points._B = new Point(0, 55);
points._BCp2 = new Point(40, -20);
points._C = new Point(90, 40);
points._CCp1 = new Point(50, -30);
points._D = new Point(40, 120);
points._DCp1 = new Point(180, 40);
paths.demo1 = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
paths.demo2 = new Path()
.move(points._A)
.line(points._B)
.curve(points._BCp2, points._CCp1, points._C)
.curve(points._DCp1, points._DCp1, points._D);
for (let p of paths.demo1.intersects(paths.demo2)) {
snippets[part.getId()] = new Snippet("notch", p);
}
```

67
markdown/dev/reference/api/path/intersectsx/en.md
View file

@ -1,43 +1,50 @@
---
title: intersectsX()
title: Path.intersectsX()
---
The `Path.intersectsX()` method returns the Point object(s) where the path
intersects with a given X-value.
## Signature
```js
array|false path.intersectsX(float x)
```
Returns the Point object(s) where the path intersects with a given X-value.
<Example part="path_intersectsx">
Example of the Path.intersectsX() method
</Example>
## Example
<Example caption="Example of the Path.intersectsX() method">
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
({ Point, points, Path, paths, snippets, Snippet, getId, part }) => {
points.A = new Point(95, 50);
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, 130);
points.DCp1 = new Point(150, 30);
points.A = new Point(95, 50);
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, 130);
points.DCp1 = new Point(150, 30);
points.top = new Point(60, -10);
points.bot = new Point(60, 140);
paths.line = new Path()
.move(points.top)
.line(points.bot)
.attr("class", "lining dashed");
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
for (let p of paths.demo.intersectsX(60)) {
snippets[getId()] = new Snippet("notch", p);
}
points.top = new Point(60, -10);
points.bot = new Point(60, 140);
paths.line = new Path()
.move(points.top)
.line(points.bot)
.attr("class", "lining dashed");
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
for (let p of paths.demo.intersectsX(60)) {
snippets[part.getId()] = new Snippet("notch", p);
return part
}
```
</Example>

61
markdown/dev/reference/api/path/intersectsy/en.md
View file

@ -1,43 +1,50 @@
---
title: intersectsY()
title: Path.intersectsY()
---
The `Path.intersectsY()` method returns the Point object(s) where the path
intersects with a given Y-value.
## Signature
```js
array|false path.intersectsY(float y)
```
Returns the Point object(s) where the path intersects with a given Y-value.
<Example part="path_intersectsy">
Example of the Path.intersectsY() method
</Example>
## Example
<Example caption="Example of the Path.intersectsY() method">
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
({ Point, points, Path, paths, snippets, Snippet, getId, part }) => {
points.A = new Point(55, 40);
points.B = new Point(10, 70);
points.BCp2 = new Point(40, 20);
points.C = new Point(90, 60);
points.CCp1 = new Point(50, -30);
points.D = new Point(50, 80);
points.DCp1 = new Point(140, 50);
points.A = new Point(55, 40);
points.B = new Point(10, 70);
points.BCp2 = new Point(40, 20);
points.C = new Point(90, 60);
points.CCp1 = new Point(50, -30);
points.D = new Point(50, 80);
points.DCp1 = new Point(140, 50);
points.top = new Point(10, 58);
points.bot = new Point(130, 58);
points.top = new Point(10, 58);
points.bot = new Point(130, 58);
paths.line = new Path()
.move(points.top)
.line(points.bot)
.attr("class", "lining dashed");
paths.line = new Path()
.move(points.top)
.line(points.bot)
.attr("class", "lining dashed");
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
for (let p of paths.demo.intersectsY(58)) {
snippets[part.getId()] = new Snippet("notch", p);
for (let p of paths.demo.intersectsY(58)) {
snippets[getId()] = new Snippet("notch", p);
}
return part
}
```
</Example>

71
markdown/dev/reference/api/path/join/en.md
View file

@ -1,44 +1,49 @@
---
title: join()
title: Path.join()
---
The `Path.join()` method joins this path with another path.
## Signature
```js
Path path.join(path other)
```
Joins this path with another path.
## Examples
<Warning>
<Example caption="Example of the Path.join() method">
```js
({ Point, points, Path, paths, 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)
paths.path1 = new Path()
.move(points.A)
.line(points.B)
.setClass("various")
paths.path2 = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.setClass("note")
paths.joint = paths.path1
.join(paths.path2)
.setClass("lining dotted")
return part
}
```
</Example>
## Notes
You cannot join a closed path to another path
</Warning>
<Example part="path_join">
Example of the Path.join() method
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
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.path1 = new Path()
.move(points.A)
.line(points.B)
.attr("class", "various");
paths.path2 = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas");
paths.joint = paths.path1
.join(paths.path2)
.attr("class", "note lashed stroke-l")
.attr("style", "stoke-opacity: 0.5");
```

72
markdown/dev/reference/api/path/length/en.md
View file

@ -1,43 +1,49 @@
---
title: length()
title: Path.length()
---
The `Path.length()` method returns the length of the path.
## Signature
```js
float path.length()
```
Returns the length of the path.
## Example
<Example part="path_length">
Example of the Path.length() method
<Example caption="Example of the Path.length() method">
```js
({ Point, points, Path, paths, macro, 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);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
macro("pd", {
path: paths.example,
d: -20
});
macro("pd", {
path: new Path().move(points.B).line(points.A),
d: 10
});
macro("pd", {
path: new Path().move(points.B).curve(points.BCp2, points.CCp1, points.C),
d: -10
});
return part
}
```
</Example>
```js
let { Point, points, Path, paths, macro } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
macro("pd", {
path: paths.example,
d: -20
});
macro("pd", {
path: new Path().move(points.B).line(points.A),
d: 10
});
macro("pd", {
path: new Path().move(points.B).curve(points.BCp2, points.CCp1, points.C),
d: -10
});
```

40
markdown/dev/reference/api/path/line/en.md
View file

@ -1,26 +1,34 @@
---
title: line()
title: Path.line()
---
The `Path.line()` method draws a straight line from the current position to a
given point.
## Signature
```js
Path path.line(Point to)
```
Draws a straight line from the current position to a given point.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_line">
Example of the Path.line() method
## Example
<Example caption="Example of the Path.line() method">
```js
({ Point, points, Path, paths, part }) => {
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")
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.from = new Point(10, 10);
points.to = new Point(90, 10);
paths.line = new Path()
.move(points.from)
.line(points.to)
.attr("data-text", "Path.line()")
.attr("data-text-class", "text-sm center fill-note");
```

46
markdown/dev/reference/api/path/move/en.md
View file

@ -1,18 +1,36 @@
---
title: move()
title: Path.move()
---
The `Path.move()` method moves to a given point without drawing a line.
## Signature
```js
Path path.move(Point to)
```
Moves to a given point without drawing a line.
## Example
<Tip>
###### Always start your path with a move
<Example caption="Example of the Path.move() method">
```js
({ Point, points, Path, paths, part }) => {
When drawing a path, you must always start with a `move()` call,
points.to = new Point(50, 20)
.setText("Path.move()", "text-xs fill-note center")
paths.noline = new Path().move(points.to)
return part
}
```
</Example>
## Notes
When drawing a path, **you must always start with a `move()` call**,
followed by your `line()` and/or `curve()` calls
and an optional `close()` call.
@ -23,21 +41,5 @@ paths.example = new Path()
.move(points.a)
.curve(points.b, points.c, points.d)
.line(points.e)
.close();
```
</Tip>
<Example part="path_move">
Example of the Path.move() method
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.to = new Point(50, 20)
.attr("data-text", "Path.move()")
.attr("data-text-class", "text-xs fill-note");
paths.noline = new Path().move(points.to);
.close()
```

66
markdown/dev/reference/api/path/noop/en.md
View file

@ -1,41 +1,49 @@
---
title: noop()
title: Path.noop()
---
The `Path.noop()` method adds a placeholder path operation.
A `noop` operation does nothing, but is intended to be replaced later
with [`Path.insop()`](/reference/api/path/insop).
## Signature
```js
Path path.noop(string id)
```
Adds a placeholder path operation.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
A `noop` operation does nothing, but is intended to be replaced later
with [`Path.insop()`](/reference/api/path/insop).
## Example
<Tip compact>This is often used to insert darts into a path</Tip>
<Example caption="Example of the Path.noop() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_noop">
Example of the Path.noop() method
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.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
}
```
</Example>
```js
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.withDart = paths.without
.insop(
'dart',
new Path()
.line(points.dartTip)
.line(points.dartRight)
)
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
```

79
markdown/dev/reference/api/path/offset/en.md
View file

@ -1,46 +1,53 @@
---
title: offset()
title: Path.offset()
---
The `Path.offset()` method returns a new Path that is offset by distance from
the original path.
## Signature
```js
Path path.offset(float distance)
```
Returns a new Path that is offset by distance from the original path.
## Example
<Example part="path_offset">
Example of the Path.offset() method
<Example caption="Example of the Path.offset() method">
```js
({ Point, points, Path, paths, 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);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.line(points.A)
.close();
paths.offset = paths.example
.offset(-10)
.attr("class", "interfacing");
paths.lineOffset = new Path()
.move(points.A)
.line(points.B)
.offset(-5)
.attr("class", "various");
paths.curveOffset = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.offset(-5)
.attr("class", "canvas");
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.line(points.A)
.close();
paths.offset = paths.example
.offset(-10)
.attr("class", "interfacing");
paths.lineOffset = new Path()
.move(points.A)
.line(points.B)
.offset(-5)
.attr("class", "various");
paths.curveOffset = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.offset(-5)
.attr("class", "canvas");
```

65
markdown/dev/reference/api/path/reverse/en.md
View file

@ -1,42 +1,49 @@
---
title: reverse()
title: Path.reverse()
---
The `Path.reverse()` returns a path that is the reversed version of this path.
As in, start becomes end, and end becomes start.
## Signature
```js
Path path.reverse()
Path path.reverse(bool cloneAttributes=false)
```
Returns a path that is the reversed version of this path. As in, start becomes end, and end becomes start.
If you pass a truthy value to this method, it will return a deep clone of the
path, including its attributes. By default, it will return a shallow
copy, whithout the attributes.
<Note>
## Example
<Example caption="Example of the Path.reverse() method">
```js
({ Point, points, Path, paths, part }) => {
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.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.setText("FreeSewing rocks", "text-xs fill-note center")
paths.reverse = paths.example.reverse(true)
return part
}
```
</Example>
## Notes
The reversed path is a shallow copy.
It will in other words not inherit the attributes of the original path.
If you want a deep copy, including the attributes, use `Path.clone().reverse()`.
If you want a deep copy, including the attributes, use `Path.reverse(true)`.
</Note>
<Example part="path_reverse">
Example of the Path.reverse() method
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
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.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs fill-note");
paths.reverse = paths.example
.reverse()
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs fill-lining");
```

61
markdown/dev/reference/api/path/roughlength/en.md
View file

@ -1,37 +1,50 @@
---
title: roughLength()
title: Path.roughLength()
---
The `Path.roughLength()` method returns a (very) rough estimate of the path's length.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Number path.roughLength()
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
## Example
This allows you to chain different calls together as in the example below.
<Example caption="Example of the Path.attr() method">
```js
({ Point, points, Path, paths, macro, units, part }) => {
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
points.B = new Point(10, 30);
points.BCp2 = new Point(40, 20);
points.C = new Point(120, 30);
points.CCp1 = new Point(50, -30);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C);
macro("pd", {
path: paths.example,
d: -10,
text: `Path.roughLength() = ${units(paths.example.roughLength())}`
})
macro("pd", {
path: paths.example,
d: 10,
text: `Path.length() = ${units(paths.example.length())}`
});
<Example part="path_attr">
Example of the Path.attr() method
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
## Notes
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
The `Path.roughLength()` is not intended to give an estimate that is accurate, but rather differentiatate between paths that are a few millimeter long, or meters long.
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```
It calculates the length without *walking the (cubic) Bezier curve* making it very fast and very inaccurate (for curves).
It is typically used to determine how much precision to apply when walking a curve.

54
markdown/dev/reference/api/path/setclass/en.md
View file

@ -1,37 +1,43 @@
---
title: setClass()
title: Path.setClass()
---
The `Path.setClass()` method sets the CSS class(es) of the path.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.setClass(string className)
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.setClass() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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')
return part
}
```
</Example>
## Notes
The main purpose of this method is to save your some typing,
as the two following calls yield the same result:
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
path.attr('class', 'fabric', true)
path.addClass('fabric')
```

49
markdown/dev/reference/api/path/sethidden/en.md
View file

@ -1,37 +1,34 @@
---
title: setHidden()
title: Path.setHidden()
---
The `Path.setHidden()` method either hides or unhides the path depending on the
value you pass it.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.setHidden(bool hidden = false)
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.setHidden() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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')
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```

12
markdown/dev/reference/api/path/setrender/en.md
View file

@ -1,12 +0,0 @@
---
title: setRender()
---
```js
Path path.setRender(bool render)
```
This is a chainable method to sets the `path.render` property.
If you set it to `false` your path will not be rendered.
<Fixme>Add example</Fixme>

48
markdown/dev/reference/api/path/settext/en.md Normal file
View file

@ -0,0 +1,48 @@
---
title: Path.setText()
---
The `Path.addText()` method set text on the path.
## Signature
```js
Path path.setText(string text, string className)
```
The second argument will optionally be used to set the CSS class for the text.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
## Example
<Example caption="Example of the Path.setText() method">
```js
({ Point, points, Path, paths, part }) => {
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')
return part
}
```
</Example>
## Notes
The main purpose of this method is to save your some typing,
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
add to the existing text.

85
markdown/dev/reference/api/path/shiftalong/en.md
View file

@ -1,54 +1,55 @@
---
title: shiftAlong()
title: Path.shiftAlong()
---
```js
Point path.shiftAlong(float distance[, int stepsPerMm=25])
```
The `Path.shiftAlong()` method returns a point that lies at distance travelled
along the path.
Returns a point that lies at distance travelled along the path.
<Example part="path_shiftalong">
Example of the Path.shiftAlong() method
</Example>
## Signature
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
points.x1 = paths.example
.shiftAlong(20)
.attr("data-text", "2cm")
.attr("data-text-class", "center fill-note")
.attr("data-text-lineheight", 6);
points.x2 = paths.example
.shiftAlong(90)
.attr("data-text", "9cm")
.attr("data-text-class", "center fill-note")
.attr("data-text-lineheight", 6);
snippets.x1 = new Snippet("notch", points.x1);
snippets.x2 = new Snippet("notch", points.x2);
Point path.shiftAlong(float distance[, int stepsPerMm=10])
```
<Note>
##### The second parameter is optional
The second parameter controls the precision by which the path will be _walked_.
By default, we'll divide it into 25 steps per mm.
By default, we'll divide it into 10 steps per mm.
If you don't need that precision, you can pass a lower number.
But for most cases, you can just ignore it.
If you need more precision, you can pass a higher number.
For most cases, the default will be fine.
</Note>
## Example
<Example caption="Example of the Path.shiftAlong() method">
```js
({ Point, points, Path, paths, Snippet, snippets, 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);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
points.x1 = paths.example
.shiftAlong(20)
.attr("data-text", "2cm")
.attr("data-text-class", "center fill-note")
.attr("data-text-lineheight", 6);
points.x2 = paths.example
.shiftAlong(90)
.attr("data-text", "9cm")
.attr("data-text-class", "center fill-note")
.attr("data-text-lineheight", 6);
snippets.x1 = new Snippet("notch", points.x1);
snippets.x2 = new Snippet("notch", points.x2);
return part
}
```
</Example>

84
markdown/dev/reference/api/path/shiftfractionalong/en.md
View file

@ -1,54 +1,52 @@
---
title: shiftFractionAlong()
title: Path.shiftFractionAlong()
---
The `Path.shiftFractionAlong()` returns a point that lies at fraction of the
length of the path travelled along the path.
## Signature
```js
Point path.shiftFractionAlong(float fraction[, int stepsPerMm=25])
```
Returns a point that lies at fraction of the length of the path travelled along the path.
<Example part="path_shiftfractionalong">
Example of the Path.shiftFractionAlong() method
</Example>
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
points.x1 = paths.example
.shiftFractionAlong(0.2)
.attr("data-text", "msg_20")
.attr("data-text-class", "center")
.attr("data-text-lineheight", 6);
points.x2 = paths.example
.shiftFractionAlong(0.9)
.attr("data-text", "msg_90")
.attr("data-text-class", "center")
.attr("data-text-lineheight", 6);
snippets.xl = new Snippet("notch", points.x1);
snippets.x2 = new Snippet("notch", points.x2);
```
<Note>
##### The second parameter is optional
The second parameter controls the precision by which the path will be _walked_.
By default, we'll divide it into 25 steps per mm.
By default, we'll divide it into 10 steps per mm.
If you don't need that precision, you can pass a lower number.
But for most cases, you can just ignore it.
If you need more precision, you can pass a higher number.
For most cases, the default will be fine.
## Example
<Example caption="Example of the Path.shiftFractionAlong() method">
```js
({ Point, points, Path, paths, Snippet, snippets, 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);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
points.x1 = paths.example
.shiftFractionAlong(0.2)
.setText("0.2", "center")
points.x2 = paths.example
.shiftFractionAlong(0.9)
.setText("0.9", "center")
snippets.xl = new Snippet("notch", points.x1);
snippets.x2 = new Snippet("notch", points.x2);
return part
}
```
</Example>
</Note>

56
markdown/dev/reference/api/path/smurve/en.md
View file

@ -1,37 +1,41 @@
---
title: smurve()
title: Path.smurve()
---
The `Path.smurve()` method draws a smooth curve from the current point via a control point to an endpoint.
A smooth curve means it will use the reflection of the end control point of the previous curve.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.smurve(Point cp2, Point end)
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.smurve() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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)
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
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```

57
markdown/dev/reference/api/path/smurve_/en.md
View file

@ -1,37 +1,42 @@
---
title: smurve_()
title: Path.smurve_()
---
The `Path.smurve_()` method draws a smooth curve from the current point an endpoint.
In addition, the end point's control point lies on top of the end point.
A smooth curve means it will use the reflection of the end control point of the previous curve.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.smurve_(Point cp2, Point end)
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.smurve_() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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)
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
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```

65
markdown/dev/reference/api/path/split/en.md
View file

@ -1,42 +1,49 @@
---
title: split
title: Path.split()
---
The `Path.split()` method splits a path in two halves, on a point along that
path that you pass it.
## Signature
```js
array path.split(Point splitPoint)
```
Splits a path in two halves, on a point along that path that you pass it.
<Example part="path_split">
Example of the Path.split() method
</Example>
## Example
<Example caption="Example of the Path.split() method">
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
({ 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, 130);
points.DCp1 = new Point(150, 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, 130);
points.DCp1 = new Point(150, 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);
points.split = paths.demo.shiftFractionAlong(0.75);
snippets.split = new Snippet("notch", points.split);
let style = "stroke-width: 3; stroke-opacity: 0.5;";
let halves = paths.demo.split(points.split);
for (let i in halves) {
paths[i] = halves[i]
.attr("style", style)
.attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
}
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.split = paths.demo.shiftFractionAlong(0.75);
snippets.split = new Snippet("notch", points.split);
let style = "stroke-width: 3; stroke-opacity: 0.5;";
let halves = paths.demo.split(points.split);
for (let i in halves) {
paths[i] = halves[i]
.attr("style", style)
.attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
return part
}
```
</Example>

48
markdown/dev/reference/api/path/start/en.md
View file

@ -1,30 +1,38 @@
---
title: start()
title: Path.start()
---
The `Path.start()` method returns the Point object at the start of the path.
## Signature
```js
Point path.start()
```
Returns the Point object at the start of the path.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
<Example part="path_start">
Example of the Path.start() method
## Example
<Example caption="Example of the Path.start() method">
```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)
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())
return part
}
```
</Example>
```js
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
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.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
snippets.start = new Snippet("notch", paths.example.start());
```

76
markdown/dev/reference/api/path/translate/en.md
View file

@ -1,45 +1,51 @@
---
title: translate()
title: Path.translate()
---
The `Path.translate()` method returns a path with
[a translate transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Translate)
applied.
## Example
```js
Path path.translate(float deltaX, float deltaY)
```
Returns a path with
[a translate transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Translate)
applied.
## Example
<Example part="path_translate">
Example of the Path.translate() method
<Example caption="Example of the Path.translate() method">
```js
({ Point, points, Path, paths, part, macro }) => {
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.A = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
paths.B = paths.A.translate(60, 30)
points.step1 = points.B.shift(0, 60)
points.step2 = points.step1.shift(-90, 30)
macro("ld", {
from: points.B,
to: points.step1,
noStartMarker: true
})
macro("ld", {
from: points.step1,
to: points.step2,
noStartMarker: true
})
return part
}
```
</Example>
```js
let { Point, points, Path, paths, macro } = part.shorthand();
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.A = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
paths.B = paths.A.translate(60, 30);
points.step1 = points.B.shift(0, 60);
points.step2 = points.step1.shift(-90, 30);
macro("ld", {
from: points.B,
to: points.step1,
noStartMarker: true
});
macro("ld", {
from: points.step1,
to: points.step2,
noStartMarker: true
});
```

113
markdown/dev/reference/api/path/trim/en.md
View file

@ -1,18 +1,68 @@
---
title: trim()
title: Path.trim()
---
The `Path.trim()` method Returns a new Path that is this path with overlapping
parts removed.
```js
Path path.trim()
```
Returns a new Path that is this path with overlapping parts removed.
<Example caption="Example of the Path.trim() method">
```js
({ Point, points, Path, paths, part }) => {
points.center = new Point(0, 0)
points.base = new Point(0, 10)
points.tip = new Point(0, 50)
points.tipCpRight = new Point(30, 50)
points.tipCpLeft = new Point(-30, 50)
paths.example = new Path().move(points.base)
for (let i = 0; i < 4; i++) {
points["base" + i] = points.base.rotate(60 * i, points.center)
points["tip" + i] = points.tip.rotate(60 * i, points.center)
points["tipCpRight" + i] = points.tipCpRight.rotate(60 * i, points.center)
points["tipCpLeft" + i] = points.tipCpLeft.rotate(60 * i, points.center)
if (i < 2) {
paths.example
.line(points["base" + i])
.curve(points["base" + i], points["tipCpLeft" + i], points["tip" + i])
.curve(
points["tipCpRight" + i],
points["base" + i],
points["base" + i]
);
} else {
paths.example
.line(points["base" + i])
.line(points["tip" + i])
.line(points["tipCpRight" + i])
.line(points["base" + i])
}
}
paths.offset = paths.example
.offset(10)
.setClass("lining dotted stroke-sm")
paths.trimmed = paths.offset
.trim()
.setClass("various stroke-xl")
.attr("style", "stroke-opacity: 0.5;")
return part
}
```
</Example>
## Notes
This method is typically used when [Path.offset()](/reference/api/path/offset) caused some overlap.
<Warning>
###### Use sparsely or performance will suffer
However, use this sparsely or performance will suffer.
This method is recursive and complex, and the performance penalty for using
it on a long/complex path will be significant.
@ -22,54 +72,3 @@ To limit the impact of path.trim(), follow this approach:
- construct a minimal path that contains the overlap
- trim it
- now join it to the rest of your path
You can see an example of this
[in the front part of the Bruce pattern](https://github.com/freesewing/freesewing/blob/3ca5d0edfe54c7ac20aaf3af2f3544aee72f9b99/designs/bruce/src/front.js#L158).
</Warning>
<Example part="path_trim">
Example of the Path.trim() method
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.center = new Point(0, 0);
points.base = new Point(0, 10);
points.tip = new Point(0, 50);
points.tipCpRight = new Point(30, 50);
points.tipCpLeft = new Point(-30, 50);
paths.example = new Path().move(points.base);
for (let i = 0; i < 4; i++) {
points["base" + i] = points.base.rotate(60 * i, points.center);
points["tip" + i] = points.tip.rotate(60 * i, points.center);
points["tipCpRight" + i] = points.tipCpRight.rotate(60 * i, points.center);
points["tipCpLeft" + i] = points.tipCpLeft.rotate(60 * i, points.center);
if (i < 2) {
paths.example
.line(points["base" + i])
.curve(points["base" + i], points["tipCpLeft" + i], points["tip" + i])
.curve(
points["tipCpRight" + i],
points["base" + i],
points["base" + i]
);
} else {
paths.example
.line(points["base" + i])
.line(points["tip" + i])
.line(points["tipCpRight" + i])
.line(points["base" + i]);
}
}
paths.offset = paths.example
.offset(10)
.attr("class", "lining dotted stroke-sm");
paths.trimmed = paths.offset
.trim()
.attr("class", "various stroke-xl")
.attr("style", "stroke-opacity: 0.5;");
```

50
markdown/dev/reference/api/path/unhide/en.md
View file

@ -1,37 +1,35 @@
---
title: unhide()
title: Path.unhide()
---
The `Path.unhide()` method unhides the path so it does appears in the output.
By default, paths are not hidden. So you should only call this on path previously hidden via `Path.hide()`.
## Signature
```js
Path path.attr(
string name,
mixed value,
bool overwrite = false
)
Path path.unhide()
```
This `Path.attr()` method calls `this.attributes.add()` under the hood, but returns the Path object.
<Tip compact>This method is chainable as it returns the `Path` object</Tip>
This allows you to chain different calls together as in the example below.
## Example
If the third parameter is set to `true` it will call `this.attributes.set()` instead, thereby overwriting the value of the attribute.
<Example caption="Example of the Path.unhide() method">
```js
({ Point, points, Path, paths, part }) => {
<Example part="path_attr">
Example of the Path.attr() method
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')
return part
}
```
</Example>
```js
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
points.C = new Point(90, 30);
points.CCp1 = new Point(50, 90);
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "canvas")
.attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
.attr("data-text-class", "text-xs center");
```