🚧 Work on API examples

packages/examples/config/index.js

@@ -14,8 +14,13 @@ export default {
   },
   parts: [
     "point_attr",
+    "path_move",
+    "path_line",
+    "path_curve",
     "path__curve",
     "path_curve_",
+    "path_close",
+    "path_ops",
     "path_attr",
     "path_clone",
     "path_divide",
@@ -27,7 +32,6 @@ export default {
     "path_join",
     "path_length",
     "path_offset",
-    "path_ops",
     "path_reverse",
     "path_shiftalong",
     "path_shiftfractionalong",
@@ -55,6 +59,7 @@ export default {
     "point_shifttowards",
     "point_shiftoutwards",
     "point_sitson",
+    "point_sitsroughlyon",
     "point_rotate",
     "point_translate",
     "settings_sa",

packages/examples/package.json

@@ -22,6 +22,7 @@
     "nodebuild": "BABEL_ENV=production rollup -c -o dist/index.js -f cjs",
     "modulebuild": "BABEL_ENV=production rollup -c -o dist/index.mjs -f es",
     "build": "npm run clean && npm run nodebuild && npm run modulebuild",
+    "start": "rollup -c -w",
     "test": "echo \"examples: No tests configured. Perhaps you'd like to do this?\" && exit 0",
     "pubtest": "npm publish --registry http://localhost:6662",
     "pubforce": "npm publish",

packages/examples/src/index.js

@@ -2,6 +2,12 @@ import freesewing from "@freesewing/core";
 import plugins from "@freesewing/plugin-bundle";
 import config from "../config/";
 // Path API
+import draftPath_move from "./path_move";
+import draftPath_line from "./path_line";
+import draftPath_curve from "./path_curve";
+import draftPath__curve from "./path__curve";
+import draftPath_curve_ from "./path_curve_";
+import draftPath_close from "./path_close";
 import draftPath_ops from "./path_ops";
 import draftPath_attr from "./path_attr";
 import draftPath_clone from "./path_clone";
@@ -43,6 +49,7 @@ import draftPoint_shiftfractiontowards from "./point_shiftfractiontowards";
 import draftPoint_shifttowards from "./point_shifttowards";
 import draftPoint_shiftoutwards from "./point_shiftoutwards";
 import draftPoint_sitson from "./point_sitson";
+import draftPoint_sitsroughlyon from "./point_sitsroughlyon";
 import draftPoint_rotate from "./point_rotate";
 import draftPoint_translate from "./point_translate";
 // Utils API
@@ -75,12 +82,13 @@ const Pattern = new freesewing.Design(config, plugins);
 
 // Attach draft methods to prototype
 let methods = {
-  draftPath_move: draftPath_ops,
-  draftPath_line: draftPath_ops,
-  draftPath_curve: draftPath_ops,
-  draftPath__curve: draftPath_ops,
-  draftPath_curve_: draftPath_ops,
-  draftPath_close: draftPath_ops,
+  draftPath_move,
+  draftPath_line,
+  draftPath_curve,
+  draftPath__curve,
+  draftPath_curve_,
+  draftPath_close,
+  draftPath_ops,
   draftPath_attr,
   draftPath_clone,
   draftPath_divide,
@@ -120,6 +128,7 @@ let methods = {
   draftPoint_shifttowards,
   draftPoint_shiftoutwards,
   draftPoint_sitson,
+  draftPoint_sitsroughlyon,
   draftPoint_rotate,
   draftPoint_translate,
   draftSettings_sa,

packages/examples/src/path__curve.js

@@ -0,0 +1,17 @@
+import { box } from "./shared";
+
+export default part => {
+  let { Point, points, Path, paths } = part.shorthand();
+
+  points.from = new Point(5, 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)
+    .attr("data-text", "Path._curve()")
+    .attr("data-text-class", "text-sm center fill-note");
+
+  return box(part, 100, 25);
+};

packages/examples/src/path_clone.js

@@ -12,7 +12,10 @@ export default part => {
     .line(points.B)
     .curve(points.BCp2, points.CCp1, points.C);
 
-  paths.clone = paths.example.clone().attr("class", "note lashed stroke-xl");
+  paths.clone = paths.example
+    .clone()
+    .attr("class", "note lashed stroke-l")
+    .attr("style", "stroke-opacity: 0.5");
 
   return part;
 };

packages/examples/src/path_close.js

@@ -0,0 +1,19 @@
+import { box } from "./shared";
+
+export default part => {
+  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");
+
+  return box(part, 100, 25);
+};

packages/examples/src/path_curve.js

@@ -0,0 +1,18 @@
+import { box } from "./shared";
+
+export default part => {
+  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");
+
+  return box(part, 100, 25);
+};

packages/examples/src/path_curve_.js

@@ -0,0 +1,17 @@
+import { box } from "./shared";
+
+export default part => {
+  let { Point, points, Path, paths } = part.shorthand();
+
+  points.from = new Point(10, 20);
+  points.cp1 = new Point(40, 0);
+  points.to = new Point(90, 20);
+
+  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");
+
+  return box(part, 100, 25);
+};

packages/examples/src/path_edge.js

@@ -16,14 +16,17 @@ export default part => {
     .curve(points.E, points.D, points.A)
     .close();
 
-  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"));
+  for (let i of [
+    "topLeft",
+    "topRight",
+    "bottomLeft",
+    "bottomRight",
+    "top",
+    "left",
+    "bottom",
+    "right"
+  ])
+    snippets[i] = new Snippet("notch", paths.demo.edge(i));
 
   return part;
 };

packages/examples/src/path_end.js

@@ -12,7 +12,7 @@ export default part => {
     .line(points.B)
     .curve(points.BCp2, points.CCp1, points.C);
 
-  snippets.x = new Snippet("x", paths.demo.end());
+  snippets.end = new Snippet("notch", paths.demo.end());
 
   return part;
 };

packages/examples/src/path_intersects.js

@@ -29,7 +29,7 @@ export default part => {
     .curve(points._DCp1, points._DCp1, points._D);
 
   for (let p of paths.demo1.intersects(paths.demo2)) {
-    snippets[part.getId()] = new Snippet("x", p);
+    snippets[part.getId()] = new Snippet("notch", p);
   }
 
   return part;

packages/examples/src/path_intersectsx.js

@@ -24,7 +24,7 @@ export default part => {
     .curve(points.DCp1, points.DCp1, points.D);
 
   for (let p of paths.demo.intersectsX(60)) {
-    snippets[part.getId()] = new Snippet("x", p);
+    snippets[part.getId()] = new Snippet("notch", p);
   }
 
   return part;

packages/examples/src/path_intersectsy.js

@@ -23,7 +23,7 @@ export default part => {
     .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("x", p);
+    snippets[part.getId()] = new Snippet("notch", p);
   }
 
   return part;

packages/examples/src/path_join.js

@@ -19,7 +19,8 @@ export default part => {
 
   paths.joint = paths.path1
     .join(paths.path2)
-    .attr("class", "note lashed stroke-xl");
+    .attr("class", "note lashed stroke-l")
+    .attr("style", "stroke-opacity: 0.5");
 
   return part;
 };

packages/examples/src/path_line.js

@@ -0,0 +1,16 @@
+import { box } from "./shared";
+
+export default part => {
+  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");
+
+  return box(part, 100, 15);
+};

packages/examples/src/path_move.js

@@ -0,0 +1,13 @@
+import { box } from "./shared";
+
+export default part => {
+  let { Point, points, Path, paths } = part.shorthand();
+
+  points.to = new Point(50, 10)
+    .attr("data-text", "Path.move()")
+    .attr("data-text-class", "fill-note center");
+
+  paths.noline = new Path().move(points.to);
+
+  return box(part, 100, 15);
+};

packages/examples/src/path_reverse.js

@@ -9,9 +9,13 @@ export default part => {
   paths.example = new Path()
     .move(points.B)
     .curve(points.BCp2, points.CCp1, points.C)
-    .attr("data-text", "msg");
+    .attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
+    .attr("data-text-class", "text-xs fill-note");
 
-  paths.reverse = paths.example.reverse().attr("data-text", "gsm");
+  paths.reverse = paths.example
+    .reverse()
+    .attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
+    .attr("data-text-class", "text-xs fill-lining");
 
   return part;
 };

packages/examples/src/path_shiftalong.js

@@ -12,19 +12,19 @@ export default part => {
     .line(points.B)
     .curve(points.BCp2, points.CCp1, points.C);
 
-  points.X1 = paths.example
+  points.x1 = paths.example
     .shiftAlong(20)
-    .attr("data-text", "msg_2cm")
-    .attr("data-text-class", "center")
+    .attr("data-text", "2cm")
+    .attr("data-text-class", "center fill-note")
     .attr("data-text-lineheight", 6);
-  points.X2 = paths.example
+  points.x2 = paths.example
     .shiftAlong(90)
-    .attr("data-text", "msg_9cm")
-    .attr("data-text-class", "center")
+    .attr("data-text", "9cm")
+    .attr("data-text-class", "center fill-note")
     .attr("data-text-lineheight", 6);
 
-  snippets.Xl = new Snippet("x", points.X1);
-  snippets.X2 = new Snippet("x", points.X2);
+  snippets.x1 = new Snippet("notch", points.x1);
+  snippets.x2 = new Snippet("notch", points.x2);
 
   return part;
 };

packages/examples/src/path_shiftfractionalong.js

@@ -12,19 +12,19 @@ export default part => {
     .line(points.B)
     .curve(points.BCp2, points.CCp1, points.C);
 
-  points.X1 = paths.example
+  points.x1 = paths.example
     .shiftFractionAlong(0.2)
-    .attr("data-text", "msg_20")
-    .attr("data-text-class", "center")
+    .attr("data-text", "20%")
+    .attr("data-text-class", "center fill-note")
     .attr("data-text-lineheight", 6);
-  points.X2 = paths.example
+  points.x2 = paths.example
     .shiftFractionAlong(0.9)
-    .attr("data-text", "msg_90")
-    .attr("data-text-class", "center")
+    .attr("data-text", "90%")
+    .attr("data-text-class", "center fill-note")
     .attr("data-text-lineheight", 6);
 
-  snippets.Xl = new Snippet("x", points.X1);
-  snippets.X2 = new Snippet("x", points.X2);
+  snippets.xl = new Snippet("notch", points.x1);
+  snippets.x2 = new Snippet("notch", points.x2);
 
   return part;
 };

packages/examples/src/path_start.js

@@ -12,6 +12,6 @@ export default part => {
     .line(points.B)
     .curve(points.BCp2, points.CCp1, points.C);
 
-  snippets.x = new Snippet("x", paths.example.start());
+  snippets.start = new Snippet("notch", paths.example.start());
   return part;
 };

packages/examples/src/path_translate.js

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

packages/examples/src/point_angle.js

@@ -1,51 +1,17 @@
 export default part => {
-  let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
+  let { Point, points, Path, paths } = part.shorthand();
 
-  points.sun = new Point(40, 40);
-  points.moon1 = new Point(70, 40)
-    .attr("data-text", "0")
-    .attr("data-text-class", "text-xl");
-  points.moon2 = new Point(40, 10)
-    .attr("data-text", 90)
-    .attr("data-text-class", "text-xl");
-  points.moon3 = new Point(10, 40)
-    .attr("data-text", 180)
-    .attr("data-text-class", "text-xl");
-  points.moon4 = new Point(40, 70)
-    .attr("data-text", 270)
-    .attr("data-text-class", "text-xl");
-  points.moon5 = points.moon1.rotate(-45, points.sun);
-  points.moon5
-    .attr("data-text", points.sun.angle(points.moon5))
-    .attr("data-text-class", "text-xl");
+  points.sun = new Point(10, 5);
+  points.moon = points.sun.shift(-15, 70);
+  points.text = points.sun
+    .shiftFractionTowards(points.moon, 0.8)
+    .attr("data-text", points.sun.angle(points.moon) + "°")
+    .attr("data-text-class", "text-sm fill-note center");
 
-  paths.moon1 = new Path()
+  paths.line = new Path()
     .move(points.sun)
-    .line(points.moon1)
-    .attr("class", "dashed note");
-  paths.moon2 = new Path()
-    .move(points.sun)
-    .line(points.moon2)
-    .attr("class", "dashed note");
-  paths.moon3 = new Path()
-    .move(points.sun)
-    .line(points.moon3)
-    .attr("class", "dashed note");
-  paths.moon4 = new Path()
-    .move(points.sun)
-    .line(points.moon4)
-    .attr("class", "dashed note");
-  paths.moon5 = new Path()
-    .move(points.sun)
-    .line(points.moon5)
-    .attr("class", "dashed note");
-
-  snippets.notch = new Snippet("notch", points.sun);
-  snippets.notch1 = new Snippet("x", points.moon1);
-  snippets.notch2 = new Snippet("x", points.moon2);
-  snippets.notch3 = new Snippet("x", points.moon3);
-  snippets.notch4 = new Snippet("x", points.moon4);
-  snippets.notch5 = new Snippet("x", points.moon5);
+    .line(points.moon)
+    .attr("class", "dashed");
 
   return part;
 };

packages/examples/src/point_clone.js

@@ -9,7 +9,7 @@ export default part => {
     .attr("data-text-fill-opacity", "0.5");
   points.B = points.A.clone().attr("data-text", "Point B");
 
-  snippets.x = new Snippet("x", points.A);
+  snippets.x = new Snippet("notch", points.A);
 
   return box(part);
 };

packages/examples/src/point_copy.js

@@ -8,7 +8,7 @@ export default part => {
     .attr("data-text-class", "text-xl");
   points.B = points.A.copy().attr("data-text", "Point B");
 
-  snippets.x = new Snippet("x", points.A);
+  snippets.x = new Snippet("notch", points.A);
 
   return box(part);
 };

packages/examples/src/point_dist.js

@@ -9,8 +9,5 @@ export default part => {
     to: points.to
   });
 
-  snippets.notch1 = new Snippet("x", points.from);
-  snippets.notch2 = new Snippet("x", points.to);
-
   return part;
 };

packages/examples/src/point_dx.js

@@ -10,8 +10,5 @@ export default part => {
     y: 25
   });
 
-  snippets.notch1 = new Snippet("x", points.from);
-  snippets.notch2 = new Snippet("x", points.to);
-
   return part;
 };

packages/examples/src/point_dy.js

@@ -10,8 +10,5 @@ export default part => {
     x: 50
   });
 
-  snippets.notch1 = new Snippet("x", points.from);
-  snippets.notch2 = new Snippet("x", points.to);
-
   return part;
 };

packages/examples/src/point_rotate.js

@@ -2,14 +2,12 @@ export default part => {
   let { Point, points, Path, paths, Snippet, snippets } = part.shorthand();
 
   points.sun = new Point(40, 40);
-  snippets.sun = new Snippet("notch", points.sun);
   points.moon = new Point(70, 40);
   let step = 360 / 36;
   for (let i = 1; i < 37; i++) {
     let angle = step * i;
     points[`moon${i}`] = points.moon.rotate(angle, points.sun);
     paths[`moon${i}`] = new Path().move(points.sun).line(points[`moon${i}`]);
-    snippets[`moon${i}`] = new Snippet("x", points[`moon${i}`]);
   }
 
   return part;

packages/examples/src/point_shift.js

@@ -1,5 +1,7 @@
+import { box } from "./shared";
+
 export default part => {
-  let { Point, points, Snippet, snippets, macro } = part.shorthand();
+  let { Point, points, macro } = part.shorthand();
 
   points.A = new Point(90, 40)
     .attr("data-text", "Point A")
@@ -8,14 +10,11 @@ export default part => {
     .attr("data-text", "Point B is point A shifted 7cm\nat a 155 degree angle")
     .attr("data-text-lineheight", 6);
 
-  snippets.A = new Snippet("x", points.A);
-  snippets.B = new Snippet("x", points.B);
-
   macro("ld", {
     from: points.B,
     to: points.A,
     d: -10
   });
 
-  return part;
+  return box(part, 100, 45);
 };

packages/examples/src/point_shiftfractiontowards.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(90, 70).attr("data-text", "Point A");
   points.B = new Point(10, 10).attr("data-text", "Point B");
@@ -19,10 +11,6 @@ export default part => {
     .attr("data-text-class", "center")
     .attr("data-text-lineheight", 6);
 
-  snippets.A = new Snippet("x", points.A);
-  snippets.B = new Snippet("x", points.B);
-  snippets.C = new Snippet("x", points.C);
-
   paths.direction = new Path()
     .move(points.A)
     .line(points.B)

packages/examples/src/point_shiftoutwards.js

@@ -1,24 +1,14 @@
+import { box } from "./shared";
+
 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(90, 70).attr("data-text", "Point A");
-  points.B = new Point(10, 10).attr("data-text", "Point B");
+  points.B = new Point(30, 30).attr("data-text", "Point B");
   points.C = points.A.shiftOutwards(points.B, 30)
     .attr("data-text", "Point C is point A shifted 3cm\nbeyond point B")
     .attr("data-text-lineheight", 6);
 
-  snippets.A = new Snippet("x", points.A);
-  snippets.B = new Snippet("x", points.B);
-  snippets.C = new Snippet("x", points.C);
-
   paths.direction = new Path()
     .move(points.A)
     .line(points.C)
@@ -30,5 +20,5 @@ export default part => {
     d: -10
   });
 
-  return part;
+  return box(part, 110, 75);
 };

packages/examples/src/point_shifttowards.js

@@ -1,13 +1,7 @@
+import { box } from "./shared";
+
 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(90, 70).attr("data-text", "Point A");
   points.B = new Point(10, 10).attr("data-text", "Point B");
@@ -19,10 +13,6 @@ export default part => {
     .attr("data-text-class", "center")
     .attr("data-text-lineheight", 6);
 
-  snippets.A = new Snippet("x", points.A);
-  snippets.B = new Snippet("x", points.B);
-  snippets.C = new Snippet("x", points.C);
-
   paths.direction = new Path()
     .move(points.A)
     .line(points.B)
@@ -34,5 +24,5 @@ export default part => {
     d: -10
   });
 
-  return part;
+  return box(part, 110, 80);
 };

packages/examples/src/point_sitson.js

@@ -8,7 +8,7 @@ export default part => {
     points[`a${i}`] = new Point(i * 10, 40);
     points[`b${i}`] = new Point(i * 10, i * 8);
     if (points[`a${i}`].sitsOn(points[`b${i}`])) s = "notch";
-    else s = "x";
+    else s = "bnotch";
     snippets[`b${i}`] = new Snippet(s, points[`b${i}`]);
     snippets[`a${i}`] = new Snippet(s, points[`a${i}`]);
   }

packages/examples/src/point_sitsroughlyon.js

@@ -10,7 +10,7 @@ export default part => {
     points[`a${i}`] = new Point(i * 10, 40);
     points[`b${i}`] = new Point(i * 10, i * 8);
     if (points[`a${i}`].sitsRoughlyOn(points[`b${i}`])) s = "notch";
-    else s = "x";
+    else s = "bnotch";
     snippets[`b${i}`] = new Snippet(s, points[`b${i}`]);
     snippets[`a${i}`] = new Snippet(s, points[`a${i}`]);
   }

packages/examples/src/point_translate.js

@@ -1,7 +1,9 @@
-export default part => {
-  let { Point, points, Snippet, snippets, macro } = part.shorthand();
+import { box } from "./shared";
 
-  points.A = new Point(10, 10).attr("data-text", "Point A");
+export default part => {
+  let { Point, points, macro } = part.shorthand();
+
+  points.A = new Point(20, 20).attr("data-text", "Point A");
   points.B = points.A.translate(120, 60)
     .attr(
       "data-text",
@@ -11,9 +13,6 @@ export default part => {
     .attr("data-text-dy", -6)
     .attr("data-text-lineheight", 6);
 
-  snippets.A = new Snippet("x", points.A);
-  snippets.B = new Snippet("x", points.B);
-
   macro("ld", {
     from: points.A,
     to: points.B,
@@ -21,5 +20,5 @@ export default part => {
     noStartMarker: true
   });
 
-  return part;
+  return box(part, 150, 85);
 };

packages/examples/src/snippet_clone.js

@@ -3,12 +3,13 @@ import { box } from "./shared";
 export default part => {
   let { Point, points, Snippet, snippets } = part.shorthand();
 
-  points.anchor = new Point(50, 15);
-  snippets.demo = new Snippet("logo", points.anchor)
-    .attr("data-scale", 0.8)
-    .attr("data-rotate", 180);
+  points.anchor = new Point(35, 35);
+  snippets.demo = new Snippet("logo", points.anchor).attr(
+    "style",
+    "color: #f006"
+  );
 
-  snippets.clone = snippets.demo.clone().attr("data-rotate", 90, true);
+  snippets.clone = snippets.demo.clone().attr("data-scale", 0.5);
 
   return box(part);
 };

packages/examples/src/utils_beamintersectscircle.js

@@ -1,3 +1,5 @@
+import { box } from "./shared";
+
 export default part => {
   let {
     Point,
@@ -9,15 +11,15 @@ export default part => {
     utils
   } = part.shorthand();
 
-  points.A = new Point(45, 45)
+  points.A = new Point(95, 45)
     .attr("data-circle", 35)
     .attr("data-circle-class", "fabric");
-  points.B = new Point(5, 50);
-  points.C = new Point(25, 30);
-  points.D = new Point(5, 65);
-  points.E = new Point(65, 5);
-  points.F = new Point(15, 75);
-  points.G = new Point(75, 15);
+  points.B = new Point(55, 50);
+  points.C = new Point(75, 30);
+  points.D = new Point(55, 65);
+  points.E = new Point(115, 5);
+  points.F = new Point(65, 75);
+  points.G = new Point(125, 15);
 
   paths.line1 = new Path().move(points.B).line(points.C);
   paths.line2 = new Path().move(points.D).line(points.E);
@@ -44,11 +46,11 @@ export default part => {
   );
 
   snippets.first1 = new Snippet("bnotch", intersections1[0]);
-  snippets.second1 = new Snippet("x", intersections1[1]);
+  snippets.second1 = new Snippet("notch", intersections1[1]);
   snippets.first2 = new Snippet("bnotch", intersections2[0]);
-  snippets.second2 = new Snippet("x", intersections2[1]);
+  snippets.second2 = new Snippet("notch", intersections2[1]);
   snippets.first3 = new Snippet("bnotch", intersections3[0]);
-  snippets.second3 = new Snippet("x", intersections3[1]);
+  snippets.second3 = new Snippet("notch", intersections3[1]);
 
-  return part;
+  return box(part, 200, 80);
 };

packages/examples/src/utils_beamintersectsx.js

@@ -10,15 +10,18 @@ export default part => {
   } = part.shorthand();
 
   points.A = new Point(10, 10);
-  points.B = new Point(50, 40);
+  points.B = new Point(90, 30);
 
   paths.AB = new Path().move(points.A).line(points.B);
 
-  snippets.X = new Snippet("x", utils.beamIntersectsX(points.A, points.B, 40));
+  snippets.x = new Snippet(
+    "notch",
+    utils.beamIntersectsX(points.A, points.B, 40)
+  );
 
   paths.help = new Path()
-    .move(new Point(40, 0))
-    .line(new Point(40, 50))
+    .move(new Point(40, 5))
+    .line(new Point(40, 35))
     .attr("class", "note dashed");
 
   return part;

packages/examples/src/utils_beamintersectsy.js

@@ -14,7 +14,10 @@ export default part => {
 
   paths.AB = new Path().move(points.A).line(points.B);
 
-  snippets.X = new Snippet("x", utils.beamIntersectsY(points.A, points.B, 30));
+  snippets.x = new Snippet(
+    "notch",
+    utils.beamIntersectsY(points.A, points.B, 30)
+  );
 
   paths.help = new Path()
     .move(new Point(0, 30))

packages/examples/src/utils_beamsintersect.js

@@ -17,8 +17,8 @@ export default part => {
   paths.AB = new Path().move(points.A).line(points.B);
   paths.CD = new Path().move(points.C).line(points.D);
 
-  snippets.X = new Snippet(
-    "x",
+  snippets.x = new Snippet(
+    "notch",
     utils.beamsIntersect(points.A, points.B, points.C, points.D)
   );
 

packages/examples/src/utils_circlesintersect.js

@@ -29,9 +29,9 @@ export default part => {
   );
 
   snippets.first1 = new Snippet("bnotch", intersections1[0]);
-  snippets.second1 = new Snippet("x", intersections1[1]);
+  snippets.second1 = new Snippet("notch", intersections1[1]);
   snippets.first2 = new Snippet("bnotch", intersections2[0]);
-  snippets.second2 = new Snippet("x", intersections2[1]);
+  snippets.second2 = new Snippet("notch", intersections2[1]);
 
   return part;
 };

packages/examples/src/utils_curvesintersect.js

@@ -35,7 +35,7 @@ export default part => {
     points.Dcp,
     points.D
   )) {
-    snippets[part.getId()] = new Snippet("x", p);
+    snippets[part.getId()] = new Snippet("notch", p);
   }
 
   return part;

packages/examples/src/utils_lineintersectscircle.js

@@ -1,3 +1,5 @@
+import { box } from "./shared";
+
 export default part => {
   let {
     Point,
@@ -9,16 +11,16 @@ export default part => {
     utils
   } = part.shorthand();
 
-  points.A = new Point(45, 45)
+  points.A = new Point(95, 45)
     .attr("data-circle", 35)
     .attr("data-circle-class", "fabric");
-  points.B = new Point(5, 50);
-  points.C = new Point(25, 30);
+  points.B = new Point(55, 50);
+  points.C = new Point(75, 30);
 
-  points.D = new Point(5, 65);
-  points.E = new Point(65, 5);
-  points.F = new Point(15, 75);
-  points.G = new Point(75, 15);
+  points.D = new Point(55, 65);
+  points.E = new Point(115, 5);
+  points.F = new Point(65, 75);
+  points.G = new Point(125, 15);
 
   paths.line1 = new Path().move(points.B).line(points.C);
   paths.line2 = new Path().move(points.D).line(points.E);
@@ -45,9 +47,9 @@ export default part => {
   );
   snippets.first1 = new Snippet("bnotch", intersections1[0]);
   snippets.first2 = new Snippet("bnotch", intersections2[0]);
-  snippets.second2 = new Snippet("x", intersections2[1]);
+  snippets.second2 = new Snippet("notch", intersections2[1]);
   snippets.first3 = new Snippet("bnotch", intersections3[0]);
-  snippets.second3 = new Snippet("x", intersections3[1]);
+  snippets.second3 = new Snippet("notch", intersections3[1]);
 
-  return part;
+  return box(part, 200, 80);
 };

packages/examples/src/utils_lineintersectscurve.js

@@ -28,7 +28,7 @@ export default part => {
     points.Bcp,
     points.B
   )) {
-    snippets[part.getId()] = new Snippet("x", p);
+    snippets[part.getId()] = new Snippet("notch", p);
   }
 
   return part;

packages/examples/src/utils_linesintersect.js

@@ -18,7 +18,7 @@ export default part => {
   paths.CD = new Path().move(points.C).line(points.D);
 
   snippets.X = new Snippet(
-    "x",
+    "notch",
     utils.linesIntersect(points.A, points.B, points.C, points.D)
   );
 

packages/examples/src/utils_pointonbeam.js

@@ -19,17 +19,17 @@ export default part => {
   let scatter = [];
   for (let i = 1; i < 36; i++) {
     for (let j = 1; j < 27; j++) {
-      scatter.push(new Point(i * 5, j * 5));
+      scatter.push(new Point(i * 10, j * 10));
     }
   }
   let snippet;
   for (let point of scatter) {
     if (utils.pointOnBeam(points.from1, points.to1, point)) snippet = "notch";
-    else snippet = "x";
+    else snippet = "bnotch";
     snippets[part.getId()] = new Snippet(snippet, point);
     if (utils.pointOnBeam(points.from2, points.to2, point, 0.01)) {
       snippet = "notch";
-    } else snippet = "x";
+    } else snippet = "bnotch";
     snippets[part.getId()] = new Snippet(snippet, point);
   }
   paths.line1 = new Path()

packages/examples/src/utils_pointoncurve.js

@@ -17,7 +17,7 @@ export default part => {
   let scatter = [];
   for (let i = 1; i < 19; i++) {
     for (let j = 1; j < 14; j++) {
-      scatter.push(new Point(i * 5, j * 5));
+      scatter.push(new Point(i * 10, j * 10));
     }
   }
   let snippet;
@@ -32,7 +32,7 @@ export default part => {
       )
     ) {
       snippet = "notch";
-    } else snippet = "x";
+    } else snippet = "bnotch";
     snippets[part.getId()] = new Snippet(snippet, point);
   }
   paths.curve = new Path()

packages/examples/src/utils_pointonline.js

@@ -19,17 +19,17 @@ export default part => {
   let scatter = [];
   for (let i = 1; i < 36; i++) {
     for (let j = 1; j < 27; j++) {
-      scatter.push(new Point(i * 5, j * 5));
+      scatter.push(new Point(i * 10, j * 10));
     }
   }
   let snippet;
   for (let point of scatter) {
     if (utils.pointOnLine(points.from1, points.to1, point)) snippet = "notch";
-    else snippet = "x";
+    else snippet = "bnotch";
     snippets[part.getId()] = new Snippet(snippet, point);
     if (utils.pointOnLine(points.from2, points.to2, point, 0.01)) {
       snippet = "notch";
-    } else snippet = "x";
+    } else snippet = "bnotch";
     snippets[part.getId()] = new Snippet(snippet, point);
   }
   paths.line1 = new Path()