VSinerva/freesewing
1
0
Fork 0
Code Activity

sparkles: Tweaks to path examples

Browse source
This commit is contained in:
Joost De Cock 2019-01-28 15:39:33 +01:00
parent 0a971c0da8
commit c3736c9f3c
18 changed files with 61 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/examples/index.html
View file

@ -23,7 +23,7 @@
.use(freesewing.plugins.validate)
;
pattern.settings.only = ['path_ops'];
pattern.settings.only = ['path_split'];
pattern.draft();
document.getElementById("svg").innerHTML = pattern.render();

13
packages/examples/src/index.js
View file

@ -90,7 +90,7 @@ Examples.prototype.draftPath_divide = draftPath_divide;
Examples.prototype.draftPath_edge = draftPath_edge;
Examples.prototype.draftPath_end = draftPath_end;
Examples.prototype.draftPath_intersects = draftPath_intersects;
Examples.prototype.draftPath_intersectsx = draftPath_intersectsy;
Examples.prototype.draftPath_intersectsx = draftPath_intersectsx;
Examples.prototype.draftPath_intersectsy = draftPath_intersectsy;
Examples.prototype.draftPath_join = draftPath_join;
Examples.prototype.draftPath_length = draftPath_length;
@ -144,15 +144,4 @@ Examples.prototype.draftUtils_circlesintersect = draftUtils_circlesintersect;
Examples.prototype.draftUtils_beamintersectscircle = draftUtils_beamintersectscircle;
Examples.prototype.draftUtils_lineintersectscircle = draftUtils_lineintersectscircle;
// Add custom snippet
//pattern.on("preRender", function(next) {
// this.defs += `
//<g id="x">
// <path d="M -1.1 -1.1 L 1.1 1.1 M 1.1 -1.1 L -1.1 1.1" class="note"></path>
// <circle cy="0" cx="0" r="1.8" class="note"></circle>
//</g>
//`;
// next();
//});
export default Examples;

12
packages/examples/src/path_attr.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths } = part.shorthand();
points.B = new Point(10, 50);
points.BCp2 = new Point(40, 10);
@ -18,7 +10,7 @@ export default part => {
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("class", "stroke-xl canvas")
.attr("data-text", "I am text placed on a path")
.attr("data-text", "msg")
.attr("data-text-class", "center fill-note");
return part;

10
packages/examples/src/path_clone.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);

20
packages/examples/src/path_divide.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths } = part.shorthand();
points.A = new Point(55, 40);
points.B = new Point(10, 70);
@ -24,13 +16,13 @@ export default part => {
.curve(points.DCp1, points.DCp1, points.D)
.close();
let i = 1;
let style = "stroke-width: 4; stroke-opacity: 0.5;";
let i = 0;
for (let p of paths.example.divide()) {
paths[i] = p.attr(
"style",
`stroke-width: 4; stroke-opacity: 0.5; stroke: hsl(${i * 70}, 100%, 50%)`
);
i++;
paths[i] = p
.attr("style", style)
.attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
}
return part;

28
packages/examples/src/path_edge.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -17,21 +9,21 @@ export default part => {
points.D = new Point(-60, 90);
points.E = new Point(90, 190);
paths.example = new Path()
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();
snippets.a = new Snippet("x", paths.example.edge("topLeft"));
snippets.b = new Snippet("x", paths.example.edge("topRight"));
snippets.c = new Snippet("x", paths.example.edge("bottomLeft"));
snippets.d = new Snippet("x", paths.example.edge("bottomRight"));
snippets.e = new Snippet("x", paths.example.edge("top"));
snippets.f = new Snippet("x", paths.example.edge("left"));
snippets.g = new Snippet("x", paths.example.edge("bottom"));
snippets.h = new Snippet("x", paths.example.edge("right"));
snippets.a = new Snippet("x", paths.demo.edge("topLeft"));
snippets.b = new Snippet("x", paths.demo.edge("topRight"));
snippets.c = new Snippet("x", paths.demo.edge("bottomLeft"));
snippets.d = new Snippet("x", paths.demo.edge("bottomRight"));
snippets.e = new Snippet("x", paths.demo.edge("top"));
snippets.f = new Snippet("x", paths.demo.edge("left"));
snippets.g = new Snippet("x", paths.demo.edge("bottom"));
snippets.h = new Snippet("x", paths.demo.edge("right"));
return part;
};

15
packages/examples/src/path_end.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -15,11 +7,12 @@ export default part => {
points.C = new Point(90, 30);
points.CCp1 = new Point(50, -30);
paths.example = new Path()
paths.demo = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C);
snippets.x = new Snippet("x", paths.example.end());
snippets.x = new Snippet("x", paths.demo.end());
return part;
};

16
packages/examples/src/path_intersects.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -25,18 +17,18 @@ export default part => {
points._D = new Point(40, 120);
points._DCp1 = new Point(180, 40);
paths.example1 = new Path()
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.example2 = new Path()
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.example1.intersects(paths.example2))
for (let p of paths.demo1.intersects(paths.demo2))
snippets[part.getId()] = new Snippet("x", p);
return part;

16
packages/examples/src/path_intersectsx.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(95, 50);
points.B = new Point(10, 30);
@ -19,17 +11,19 @@ export default part => {
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.example = new Path()
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.example.intersectsX(60))
for (let p of paths.demo.intersectsX(60))
snippets[part.getId()] = new Snippet("x", p);
return part;

16
packages/examples/src/path_intersectsy.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(55, 40);
points.B = new Point(10, 70);
@ -19,16 +11,18 @@ export default part => {
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.example = new Path()
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.example.intersectsY(58))
for (let p of paths.demo.intersectsY(58))
snippets[part.getId()] = new Snippet("x", p);
return part;

10
packages/examples/src/path_join.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);

10
packages/examples/src/path_length.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, macro } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);

10
packages/examples/src/path_offset.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);

16
packages/examples/src/path_reverse.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, path } = part.shorthand();
points.B = new Point(10, 30);
points.BCp2 = new Point(40, 20);
@ -17,11 +9,9 @@ export default part => {
paths.example = new Path()
.move(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("data-text", "I am the original path");
.attr("data-text", "msg");
paths.reverse = paths.example
.reverse()
.attr("data-text", "I am the reversed path");
paths.reverse = paths.example.reverse().attr("data-text", "gsm");
return part;
};

14
packages/examples/src/path_shiftalong.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -22,12 +14,12 @@ export default part => {
points.X1 = paths.example
.shiftAlong(20)
.attr("data-text", "Shifted 2cm\nalong this path")
.attr("data-text", "msg_2cm")
.attr("data-text-class", "center")
.attr("data-text-lineheight", 6);
points.X2 = paths.example
.shiftAlong(90)
.attr("data-text", "Shifted 9cm\nalong this path")
.attr("data-text", "msg_9cm")
.attr("data-text-class", "center")
.attr("data-text-lineheight", 6);

6
packages/examples/src/path_shiftfractionalong.js
View file

@ -1,6 +1,6 @@
export default part => {
// prettier-ignore
let {Point, points, Path, paths, Snippet, snippets, macro} = part.shorthand();
let {Point, points, Path, paths, Snippet, snippets} = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -15,12 +15,12 @@ export default part => {
points.X1 = paths.example
.shiftFractionAlong(0.2)
.attr("data-text", "Shifted 20%\nalong this path")
.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", "Shifted 90%\nalong this path")
.attr("data-text", "msg_90")
.attr("data-text-class", "center")
.attr("data-text-lineheight", 6);

30
packages/examples/src/path_split.js
View file

@ -1,13 +1,5 @@
export default part => {
let {
Point,
points,
Path,
paths,
Snippet,
snippets,
macro
} = part.shorthand();
let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
points.A = new Point(45, 60);
points.B = new Point(10, 30);
@ -17,27 +9,21 @@ export default part => {
points.D = new Point(50, 130);
points.DCp1 = new Point(150, 30);
paths.example = new Path()
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.curve(points.DCp1, points.DCp1, points.D);
paths.example2 = new Path()
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.example.shiftAlong(20);
points.split = paths.demo.shiftFractionAlong(0.75);
snippets.x = new Snippet("x", points.split);
let halves = paths.example2.split(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",
`stroke-width: 3; stroke-opacity: 0.5; stroke: hsl(${i * 70}, 100%, 50%)`
);
paths[i] = halves[i]
.attr("style", style)
.attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
}
return part;

7
packages/examples/src/path_translate.js
View file

@ -19,13 +19,10 @@ export default part => {
.move(points.A)
.line(points.B)
.curve(points.BCp2, points.CCp1, points.C)
.attr("data-text", "Path A")
.attr("data-text", "msg_path")
.attr("data-text-class", "center");
paths.B = paths.A.translate(60, 30).attr(
"data-text",
"with a translate(60,30) transform applied"
);
paths.B = paths.A.translate(60, 30).attr("data-text", "msg_transform");
points.step1 = points.B.shift(0, 60);
points.step2 = points.step1.shift(-90, 30);