diff --git a/packages/examples/index.html b/packages/examples/index.html index a7912617903..4b8a74ff8b3 100644 --- a/packages/examples/index.html +++ b/packages/examples/index.html @@ -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(); diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js index 265ea192412..aeaed079d3c 100644 --- a/packages/examples/src/index.js +++ b/packages/examples/src/index.js @@ -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 += ` -// -// -// -// -//`; -// next(); -//}); - export default Examples; diff --git a/packages/examples/src/path_attr.js b/packages/examples/src/path_attr.js index eba21fa7202..44a148a5b6b 100644 --- a/packages/examples/src/path_attr.js +++ b/packages/examples/src/path_attr.js @@ -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; diff --git a/packages/examples/src/path_clone.js b/packages/examples/src/path_clone.js index 22460c0dc8b..e8c487c4b79 100644 --- a/packages/examples/src/path_clone.js +++ b/packages/examples/src/path_clone.js @@ -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); diff --git a/packages/examples/src/path_divide.js b/packages/examples/src/path_divide.js index ce01dca1921..c69c9ddcba3 100644 --- a/packages/examples/src/path_divide.js +++ b/packages/examples/src/path_divide.js @@ -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; diff --git a/packages/examples/src/path_edge.js b/packages/examples/src/path_edge.js index 1990d7352ce..889de1fc6c4 100644 --- a/packages/examples/src/path_edge.js +++ b/packages/examples/src/path_edge.js @@ -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; }; diff --git a/packages/examples/src/path_end.js b/packages/examples/src/path_end.js index 96f62a08e3c..1201e8ba95f 100644 --- a/packages/examples/src/path_end.js +++ b/packages/examples/src/path_end.js @@ -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; }; diff --git a/packages/examples/src/path_intersects.js b/packages/examples/src/path_intersects.js index cf3801fef09..9879ae64682 100644 --- a/packages/examples/src/path_intersects.js +++ b/packages/examples/src/path_intersects.js @@ -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; diff --git a/packages/examples/src/path_intersectsx.js b/packages/examples/src/path_intersectsx.js index 4dda0df5599..3ed7b9d2b31 100644 --- a/packages/examples/src/path_intersectsx.js +++ b/packages/examples/src/path_intersectsx.js @@ -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; diff --git a/packages/examples/src/path_intersectsy.js b/packages/examples/src/path_intersectsy.js index dae7411efe6..034c1bd0c33 100644 --- a/packages/examples/src/path_intersectsy.js +++ b/packages/examples/src/path_intersectsy.js @@ -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; diff --git a/packages/examples/src/path_join.js b/packages/examples/src/path_join.js index ef1e6680621..053229249a0 100644 --- a/packages/examples/src/path_join.js +++ b/packages/examples/src/path_join.js @@ -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); diff --git a/packages/examples/src/path_length.js b/packages/examples/src/path_length.js index 00c87966ee8..429a20b3866 100644 --- a/packages/examples/src/path_length.js +++ b/packages/examples/src/path_length.js @@ -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); diff --git a/packages/examples/src/path_offset.js b/packages/examples/src/path_offset.js index bf63fc0685b..c4e2b64a4e7 100644 --- a/packages/examples/src/path_offset.js +++ b/packages/examples/src/path_offset.js @@ -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); diff --git a/packages/examples/src/path_reverse.js b/packages/examples/src/path_reverse.js index fe6ede4498a..68cb1e8021d 100644 --- a/packages/examples/src/path_reverse.js +++ b/packages/examples/src/path_reverse.js @@ -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; }; diff --git a/packages/examples/src/path_shiftalong.js b/packages/examples/src/path_shiftalong.js index 24468db9c88..993a91073c4 100644 --- a/packages/examples/src/path_shiftalong.js +++ b/packages/examples/src/path_shiftalong.js @@ -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); diff --git a/packages/examples/src/path_shiftfractionalong.js b/packages/examples/src/path_shiftfractionalong.js index 8e2f1041349..292c697416f 100644 --- a/packages/examples/src/path_shiftfractionalong.js +++ b/packages/examples/src/path_shiftfractionalong.js @@ -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); diff --git a/packages/examples/src/path_split.js b/packages/examples/src/path_split.js index 02499781747..b7143546658 100644 --- a/packages/examples/src/path_split.js +++ b/packages/examples/src/path_split.js @@ -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; diff --git a/packages/examples/src/path_translate.js b/packages/examples/src/path_translate.js index 4f7b27cbdc7..99715f7d351 100644 --- a/packages/examples/src/path_translate.js +++ b/packages/examples/src/path_translate.js @@ -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);