:consruction: Updates to examples

packages/examples/config/index.js

@@ -9,7 +9,9 @@ export default {
     fit: ["fixme"]
   },
   measurements: [],
-  dependencies: {},
+  dependencies: {
+    point_attr: "path_attr"
+  },
   parts: [
     "point_attr",
     "path__curve",
@@ -56,6 +58,7 @@ export default {
     "point_rotate",
     "point_translate",
     "settings_sa",
+    "snippet",
     "snippet_attr",
     "snippet_clone",
     "utils_linesintersect",
@@ -73,9 +76,11 @@ export default {
     "utils_curveintersectsy",
     "utils_curveintersectsx",
     "utils_splitcurve",
-    "docs_overview"
+    "docs_overview",
+    "docs_coords"
   ],
   options: {
+    focus: "",
     // Optiongroups are needed for now, because workbench
     fixme: {
       pct: 50,

packages/examples/package.json

@@ -23,9 +23,9 @@
     "modulebuild": "BABEL_ENV=production rollup -c -o dist/index.mjs -f es",
     "build": "npm run clean && npm run nodebuild && npm run modulebuild",
     "test": "echo \"examples: No tests configured. Perhaps you'd like to do this?\" && exit 0",
+    "start": "rollup -c -w",
     "pubtest": "npm publish --registry http://localhost:6662",
     "pubforce": "npm publish",
-    "start": "rollup -c -w",
     "symlink": "mkdir -p ./node_modules/@freesewing && cd ./node_modules/@freesewing && ln -s -f ../../../* . && cd -"
   },
   "peerDependencies": {

packages/examples/src/docs_coords.js

@@ -0,0 +1,20 @@
+import { box } from "./shared";
+
+export default part => {
+  let { Point, points, paths, Path, macro } = part.shorthand();
+
+  points.origin = new Point(10, 10);
+  points.x = new Point(100, 10);
+  points.y = new Point(10, 50);
+  points.textX = points.x.shift(135, 2).attr("data-text", "X");
+  points.textY = points.y.shift(180, 5).attr("data-text", "Y");
+  paths.coords = new Path()
+    .move(points.y)
+    .line(points.origin)
+    .line(points.x)
+    .attr("class", "mark")
+    .attr("marker-start", "url(#dimensionFrom)")
+    .attr("marker-end", "url(#dimensionTo)");
+
+  return box(part, 100, 50);
+};

packages/examples/src/docs_overview.js

@@ -1,5 +1,5 @@
 export default part => {
-  let { Point, points, Path, paths } = part.shorthand();
+  let { Point, points, Path, paths, options } = part.shorthand();
 
   /**
    * Returs the value passed to it randomized with a given tolerance
@@ -102,7 +102,7 @@ export default part => {
         points[name + "TopLeft"]
       )
       .close()
-      .attr("class", "fabric");
+      .attr("class", options.focus === name ? "note" : "fabric");
   };
 
   /**
@@ -141,10 +141,12 @@ export default part => {
       .line(to)
       .line(points[name + "Tip2"])
       .attr("class", "fabric");
+    if (options.focus === name) path = path.attr("class", "note");
     if (text)
       return path
         .attr("data-text", "  " + text)
-        .attr("data-text-class", "scribble");
+        .attr("data-text-class", "scribble")
+        .attr("data-text-class", options.focus === name ? "fill-note" : "");
     else return path;
   };
 
@@ -155,6 +157,8 @@ export default part => {
       points[name + "Mid"]
         .attr("data-text", name)
         .attr("data-text-class", "center scribble");
+      if (options.focus === name)
+        points[name + "Mid"].attr("data-text-class", "fill-note");
     }
   };
 
@@ -275,13 +279,11 @@ export default part => {
   y += 18;
   drawBox("Snippets", x, y, w, h);
   x = -35;
-  y = -15;
+  y = -3;
   w = 25;
   h = 20;
   drawBox("config", x, y, w, h);
   y += 23;
-  drawBox("utils", x, y, w, h);
-  y += 23;
   drawBox("Store", x, y, w, h);
   x = -40;
   y = -30;

packages/examples/src/index.js

@@ -63,10 +63,12 @@ import draftUtils_curveintersectsy from "./utils_curveintersectsy";
 import draftUtils_splitcurve from "./utils_splitcurve";
 // Various
 import draftSettings_sa from "./settings_sa";
+import draftSnippet from "./snippet";
 import draftSnippet_attr from "./snippet_attr";
 import draftSnippet_clone from "./snippet_clone";
 // Docs illustrations
 import draftDocs_overview from "./docs_overview";
+import draftDocs_coords from "./docs_coords";
 
 // Create design
 const Pattern = new freesewing.Design(config, plugins);
@@ -121,6 +123,7 @@ let methods = {
   draftPoint_rotate,
   draftPoint_translate,
   draftSettings_sa,
+  draftSnippet,
   draftSnippet_attr,
   draftSnippet_clone,
   draftUtils_linesintersect,
@@ -138,7 +141,8 @@ let methods = {
   draftUtils_curveintersectsx,
   draftUtils_curveintersectsy,
   draftUtils_splitcurve,
-  draftDocs_overview
+  draftDocs_overview,
+  draftDocs_coords
 };
 
 for (let m of Object.keys(methods)) Pattern.prototype[m] = methods[m];

packages/examples/src/path_attr.js

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

packages/examples/src/point_attr.js

@@ -3,10 +3,9 @@ import { box } from "./shared";
 export default part => {
   let { Point, points } = part.shorthand();
 
-  points.anchor = new Point(50, 25)
+  points.anchor = new Point(100, 25)
-    .attr("data-text", "msg")
+    .attr("data-text", "freesewingIsMadeByJoostDeCockAndContributors")
-    .attr("data-text-class", "text-xl center")
+    .attr("data-text-class", "center");
-    .attr("data-text-lineheight", 10);
 
-  return box(part);
+  return box(part, 200, 50);
 };

packages/examples/src/snippet.js

@@ -0,0 +1,14 @@
+import { box } from "./shared";
+
+export default part => {
+  let { Point, points, Snippet, snippets } = part.shorthand();
+
+  points.anchor1 = new Point(20, 15);
+  points.anchor2 = new Point(50, 15);
+  points.anchor3 = new Point(80, 15);
+  snippets.demo1 = new Snippet("button", points.anchor1);
+  snippets.demo2 = new Snippet("buttonhole", points.anchor2);
+  snippets.demo3 = new Snippet("logo", points.anchor3).attr("data-scale", 0.5);
+
+  return box(part);
+};