sparkles: Tweaks to path examples

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();
 

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 += `
-//<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;

packages/examples/src/path_attr.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;

packages/examples/src/path_clone.js

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

packages/examples/src/path_divide.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;

packages/examples/src/path_edge.js

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

packages/examples/src/path_end.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;
 };

packages/examples/src/path_intersects.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;

packages/examples/src/path_intersectsx.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;

packages/examples/src/path_intersectsy.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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;

packages/examples/src/path_join.js

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

packages/examples/src/path_length.js

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

packages/examples/src/path_offset.js

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

packages/examples/src/path_reverse.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, path } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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
+  paths.reverse = paths.example.reverse().attr("data-text", "gsm");
-    .reverse()
-    .attr("data-text", "I am the reversed path");
 
   return part;
 };

packages/examples/src/path_shiftalong.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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);
 

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);
 

packages/examples/src/path_split.js

@@ -1,13 +1,5 @@
 export default part => {
-  let {
+  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
-    Point,
-    points,
-    Path,
-    paths,
-    Snippet,
-    snippets,
-    macro
-  } = 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()
+  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.example2 = 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(
+    paths[i] = halves[i]
-      "style",
+      .attr("style", style)
-      `stroke-width: 3; stroke-opacity: 0.5; stroke: hsl(${i * 70}, 100%, 50%)`
+      .attr("style", `stroke: hsl(${i * 70}, 100%, 50%)`);
-    );
   }
 
   return part;

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(
+  paths.B = paths.A.translate(60, 30).attr("data-text", "msg_transform");
-    "data-text",
-    "with a translate(60,30) transform applied"
-  );
 
   points.step1 = points.B.shift(0, 60);
   points.step2 = points.step1.shift(-90, 30);