🚧 Rendertest update

packages/components/src/Draft/Part/index.js

@@ -21,15 +21,6 @@ const Part = props => {
   return (
     <g {...getProps(props.part)}>
       {grid}
-      {Object.keys(props.part.points).map(name => (
-        <Point
-          key={name}
-          name={name}
-          part={props.name}
-          language={props.language}
-          point={props.part.points[name]}
-        />
-      ))}
       {Object.keys(props.part.paths).map(name => (
         <Path
           key={name}
@@ -39,6 +30,15 @@ const Part = props => {
           path={props.part.paths[name]}
         />
       ))}
+      {Object.keys(props.part.points).map(name => (
+        <Point
+          key={name}
+          name={name}
+          part={props.name}
+          language={props.language}
+          point={props.part.points[name]}
+        />
+      ))}
       {Object.keys(props.part.snippets).map(name => (
         <Snippet key={name} name={name} snippet={props.part.snippets[name]} />
       ))}

packages/plugin-scalebox/src/index.js

@@ -81,19 +81,19 @@ export default {
       }
       // Paths
       this.paths.__scaleboxImperial = new this.Path()
+        .attr("class", "scalebox imperial")
         .move(this.points.__scaleboxImperialTopLeft)
         .line(this.points.__scaleboxImperialBottomLeft)
         .line(this.points.__scaleboxImperialBottomRight)
         .line(this.points.__scaleboxImperialTopRight)
-        .close()
-        .attr("class", "scalebox imperial");
+        .close();
       this.paths.__scaleboxMetric = new this.Path()
+        .attr("class", "scalebox metric")
         .move(this.points.__scaleboxMetricTopLeft)
         .line(this.points.__scaleboxMetricBottomLeft)
         .line(this.points.__scaleboxMetricBottomRight)
         .line(this.points.__scaleboxMetricTopRight)
-        .close()
-        .attr("class", "scalebox metric");
+        .close();
       // Lead
       this.points.__scaleboxLead = this.points.__scaleboxLead
         .attr("data-text", so.lead || "freesewing")

packages/rendertest/config/index.js

@@ -10,14 +10,20 @@ export default {
   difficulty: 1,
   tags: ["test"],
   optionGroups: {
-    fit: ["width"]
+    size: ["width"],
+    content: ["colors", "circles", "text", "snippets", "macros"]
   },
   measurements: [],
   dependencies: {},
-  parts: ["colors"],
+  parts: ["test"],
   inject: {},
   hide: [],
   options: {
-    width: { mm: 200, min: 50, max: 500 }
+    width: { mm: 200, min: 50, max: 500 },
+    colors: { bool: true },
+    circles: { bool: true },
+    text: { bool: true },
+    snippets: { bool: true },
+    macros: { bool: true }
   }
 };

packages/rendertest/src/circles.js

@@ -0,0 +1,24 @@
+export default function(part) {
+  let { options, Point, Path, points, paths, store, macro } = part.shorthand();
+
+  let y = store.get("y");
+  let w = store.get("w");
+  let colors = store.get("colors");
+
+  points.crl = new Point(0, y);
+  points.crr = new Point(w, y);
+  paths.circles = new Path()
+    .move(points.crl)
+    .line(points.crr)
+    .attr("data-text", "circles");
+  y += w / 2;
+  for (let i = 1; i < 50; i++) {
+    points["cr" + i] = new Point(w / 2, y)
+      .attr("data-circle", i * (w / 100))
+      .attr("data-circle-class", colors[i % colors.length]);
+  }
+  y += w / 2;
+  store.set("y", y);
+
+  return part;
+}

packages/rendertest/src/colors.js

@@ -1,17 +1,8 @@
 export default function(part) {
-  let {
-    macro,
-    options,
-    Point,
-    Path,
-    points,
-    paths,
-    snippets,
-    Snippet,
-    complete,
-    paperless
-  } = part.shorthand();
+  let { options, Point, Path, points, paths, store, macro } = part.shorthand();
 
+  let y = store.get("y");
+  let w = store.get("w");
   let colors = [
     "fabric",
     "lining",
@@ -22,15 +13,10 @@ export default function(part) {
     "contrast",
     "note"
   ];
+  store.set("colors", colors);
   let sizes = ["xs", "sm", "", "l", "xl"];
   let utility = ["dotted", "dashed", "lashed", "sa", "help", "hidden"];
 
-  let y = 0;
-  let w = options.width;
-  macro("hd", {
-    from: new Point(0, y),
-    to: new Point(w, y)
-  });
   for (let i in colors) {
     y += 15;
     points["l" + i] = new Point(0, y);
@@ -92,158 +78,10 @@ export default function(part) {
       .attr("class", i)
       .attr("class", "fill-" + i)
       .attr("data-text", ".fill-" + i);
-    if (i === "fabric") paths["box" + i].attr("data-text-class", "fill-canvas");
+    if (i === "fabric") paths["box" + i].attr("data-text-class", "fill-mark");
     y += h * 1.2;
   }
-
-  let text = ["xs", "sm", "", "l", "xl", "xxl"];
-  y += 10;
-  points.tl = new Point(0, y);
-  points.tr = new Point(w, y);
-  paths.text = new Path()
-    .move(points.tl)
-    .line(points.tr)
-    .attr("data-text", "text");
-  y += 10;
-  points.tlc = new Point(0, y);
-  points.trc = new Point(w, y);
-  paths.textc = new Path()
-    .move(points.tlc)
-    .line(points.trc)
-    .attr("data-text", "text.center")
-    .attr("data-text-class", "center");
-  y += 10;
-  points.tlr = new Point(0, y);
-  points.trr = new Point(w, y);
-  paths.textr = new Path()
-    .move(points.tlr)
-    .line(points.trr)
-    .attr("data-text", "text.right")
-    .attr("data-text-class", "right");
-  for (let i in text) {
-    y += 15;
-    points["t" + i] = new Point(0, y)
-      .attr("data-text", "text" + text[i] === "" ? "" : ".text-" + text[i])
-      .attr("data-text-class", "text-" + text[i]);
-  }
-  let snips = {
-    logo: 25,
-    notch: 15,
-    bnotch: 15,
-    button: 15,
-    buttonhole: 15
-  };
-  y += 10;
-  points.tl = new Point(0, y);
-  points.tr = new Point(w, y);
-  paths.texts = new Path()
-    .move(points.tl)
-    .line(points.tr)
-    .attr("data-text", "snippets");
-  y += 10;
-  points["sl1"] = new Point(w * 0.25, y);
-  points["sl2"] = new Point(w * 0.5, y);
-  points["sl3"] = new Point(w * 0.75, y);
-  points["sl1"]
-    .attr("data-text", "data-scale: 1\ndata-rotate: 0")
-    .attr("data-text-class", "center text-sm")
-    .attr("data-text-lineheight", 5);
-  points["sl2"]
-    .attr("data-text", "data-scale: 1.25\ndata-rotate: 0")
-    .attr("data-text-class", "center text-sm")
-    .attr("data-text-lineheight", 5);
-  points["sl3"]
-    .attr("data-text", "data-scale: 0.75\ndata-rotate: 90")
-    .attr("data-text-class", "center text-sm")
-    .attr("data-text-lineheight", 5);
-  y += 55;
-  for (let i in snips) {
-    points["snt" + i] = new Point(0, y);
-    points["snt" + i].attr("data-text", i);
-    points["sn1" + i] = new Point(w * 0.25, y);
-    points["sn2" + i] = new Point(w * 0.5, y);
-    points["sn3" + i] = new Point(w * 0.75, y);
-    snippets["sn1" + i] = new Snippet(i, points["sn1" + i]);
-    snippets["sn2" + i] = new Snippet(i, points["sn2" + i]);
-    snippets["sn2" + i].attr("data-scale", 1.25);
-    snippets["sn3" + i] = new Snippet(i, points["sn3" + i]);
-    snippets["sn3" + i].attr("data-scale", 0.75).attr("data-rotate", 90);
-    y += snips[i];
-  }
-
-  y += 10;
-  points.ml = new Point(0, y);
-  points.mr = new Point(w, y);
-  paths.macros = new Path()
-    .move(points.ml)
-    .line(points.mr)
-    .attr("data-text", "macros");
-
-  y += 40;
-  macro("title", {
-    at: new Point(w / 2, y),
-    nr: 5,
-    title: "title"
-  });
-
-  y += 40;
-  macro("grainline", {
-    from: new Point(0, y),
-    to: new Point(w, y)
-  });
-
-  y += 20;
-  macro("cutonfold", {
-    from: new Point(w, y),
-    to: new Point(0, y)
-  });
-
-  y += 70;
-  points.dimf = new Point(20, y);
-  points.dimt = new Point(w - 20, y + 120);
-  points.dimv = new Point(20, y + 80);
-  paths.dims = new Path().move(points.dimf)._curve(points.dimv, points.dimt);
-  macro("hd", {
-    from: points.dimf,
-    to: points.dimt,
-    text: "hd",
-    y: y - 15
-  });
-  macro("vd", {
-    from: points.dimt,
-    to: points.dimf,
-    text: "vd",
-    x: 0
-  });
-  macro("ld", {
-    from: points.dimf,
-    to: points.dimt,
-    text: "ld"
-  });
-  macro("pd", {
-    path: paths.dims,
-    text: "pd",
-    d: 10
-  });
-
-  y += 170;
-  macro("scalebox", {
-    at: new Point(w / 2, y)
-  });
-
-  // Make sure nothing is cut off
-  paths.box = new Path()
-    .move(new Point(-10, -10))
-    .line(new Point(w + 10, y + 10))
-    .attr("class", "hidden");
-
-  // Complete?
-  if (complete) {
-  }
-
-  // Paperless?
-  if (paperless) {
-  }
+  store.set("y", y);
 
   return part;
 }

packages/rendertest/src/index.js

@@ -2,12 +2,12 @@ import freesewing from "@freesewing/core";
 import plugins from "@freesewing/plugin-bundle";
 import config from "../config";
 // Parts
-import draftColors from "./colors";
+import draftTest from "./test";
 
 // Create design
 const Pattern = new freesewing.Design(config, plugins);
 
 // Attach draft methods to prototype
-Pattern.prototype.draftColors = part => draftColors(part);
+Pattern.prototype.draftTest = part => draftTest(part);
 
 export default Pattern;

packages/rendertest/src/macros.js

@@ -0,0 +1,80 @@
+export default function(part) {
+  let {
+    macro,
+    options,
+    Point,
+    Path,
+    points,
+    paths,
+    snippets,
+    Snippet,
+    complete,
+    paperless,
+    store
+  } = part.shorthand();
+
+  let y = store.get("y");
+  let w = store.get("w");
+  y += 10;
+  points.ml = new Point(0, y);
+  points.mr = new Point(w, y);
+  paths.macros = new Path()
+    .move(points.ml)
+    .line(points.mr)
+    .attr("data-text", "macros");
+
+  y += 40;
+  macro("title", {
+    at: new Point(w / 2, y),
+    nr: 5,
+    title: "title"
+  });
+
+  y += 40;
+  macro("grainline", {
+    from: new Point(0, y),
+    to: new Point(w, y)
+  });
+
+  y += 20;
+  macro("cutonfold", {
+    from: new Point(w, y),
+    to: new Point(0, y)
+  });
+
+  y += 70;
+  points.dimf = new Point(20, y);
+  points.dimt = new Point(w - 20, y + 120);
+  points.dimv = new Point(20, y + 80);
+  paths.dims = new Path().move(points.dimf)._curve(points.dimv, points.dimt);
+  macro("hd", {
+    from: points.dimf,
+    to: points.dimt,
+    text: "hd",
+    y: y - 15
+  });
+  macro("vd", {
+    from: points.dimt,
+    to: points.dimf,
+    text: "vd",
+    x: 0
+  });
+  macro("ld", {
+    from: points.dimf,
+    to: points.dimt,
+    text: "ld"
+  });
+  macro("pd", {
+    path: paths.dims,
+    text: "pd",
+    d: 10
+  });
+
+  y += 170;
+  macro("scalebox", {
+    at: new Point(w / 2, y)
+  });
+  store.set("y", y);
+
+  return part;
+}

packages/rendertest/src/snippets.js

@@ -0,0 +1,64 @@
+export default function(part) {
+  let {
+    macro,
+    options,
+    Point,
+    Path,
+    points,
+    paths,
+    snippets,
+    Snippet,
+    store
+  } = part.shorthand();
+
+  let y = store.get("y");
+  let w = store.get("w");
+
+  let snips = {
+    logo: 25,
+    notch: 15,
+    bnotch: 15,
+    button: 15,
+    buttonhole: 15
+  };
+  y += 10;
+  points.tl = new Point(0, y);
+  points.tr = new Point(w, y);
+  paths.texts = new Path()
+    .move(points.tl)
+    .line(points.tr)
+    .attr("data-text", "snippets");
+  y += 10;
+  points["sl1"] = new Point(w * 0.25, y);
+  points["sl2"] = new Point(w * 0.5, y);
+  points["sl3"] = new Point(w * 0.75, y);
+  points["sl1"]
+    .attr("data-text", "data-scale: 1\ndata-rotate: 0")
+    .attr("data-text-class", "center text-sm")
+    .attr("data-text-lineheight", 5);
+  points["sl2"]
+    .attr("data-text", "data-scale: 1.25\ndata-rotate: 0")
+    .attr("data-text-class", "center text-sm")
+    .attr("data-text-lineheight", 5);
+  points["sl3"]
+    .attr("data-text", "data-scale: 0.75\ndata-rotate: 90")
+    .attr("data-text-class", "center text-sm")
+    .attr("data-text-lineheight", 5);
+  y += 55;
+  for (let i in snips) {
+    points["snt" + i] = new Point(0, y);
+    points["snt" + i].attr("data-text", i);
+    points["sn1" + i] = new Point(w * 0.25, y);
+    points["sn2" + i] = new Point(w * 0.5, y);
+    points["sn3" + i] = new Point(w * 0.75, y);
+    snippets["sn1" + i] = new Snippet(i, points["sn1" + i]);
+    snippets["sn2" + i] = new Snippet(i, points["sn2" + i]);
+    snippets["sn2" + i].attr("data-scale", 1.25);
+    snippets["sn3" + i] = new Snippet(i, points["sn3" + i]);
+    snippets["sn3" + i].attr("data-scale", 0.75).attr("data-rotate", 90);
+    y += snips[i];
+  }
+  store.set("y", y);
+
+  return part;
+}

packages/rendertest/src/test.js

@@ -0,0 +1,28 @@
+import colors from "./colors";
+import circles from "./circles";
+import text from "./text";
+import snippets from "./snippets";
+import macros from "./macros";
+
+export default function(part) {
+  let { macro, store, options, Path, paths, Point } = part.shorthand();
+  store.set("y", 0);
+  store.set("w", options.width);
+  macro("hd", {
+    from: new Point(0, 0),
+    to: new Point(options.width, 0)
+  });
+  if (options.colors) colors(part);
+  if (options.circles) circles(part);
+  if (options.text) text(part);
+  if (options.snippets) snippets(part);
+  if (options.macros) macros(part);
+
+  // Make sure no text is cut off
+  paths.box = new Path()
+    .move(new Point(0, -10))
+    .line(new Point(store.get("w"), store.get("y")))
+    .attr("class", "hidden");
+
+  return part;
+}

packages/rendertest/src/text.js

@@ -0,0 +1,39 @@
+export default function(part) {
+  let { Point, Path, points, paths, store } = part.shorthand();
+
+  let y = store.get("y");
+  let w = store.get("w");
+  let text = ["xs", "sm", "", "l", "xl", "xxl"];
+  y += 10;
+  points.tl = new Point(0, y);
+  points.tr = new Point(w, y);
+  paths.text = new Path()
+    .move(points.tl)
+    .line(points.tr)
+    .attr("data-text", "text");
+  y += 10;
+  points.tlc = new Point(0, y);
+  points.trc = new Point(w, y);
+  paths.textc = new Path()
+    .move(points.tlc)
+    .line(points.trc)
+    .attr("data-text", "text.center")
+    .attr("data-text-class", "center");
+  y += 10;
+  points.tlr = new Point(0, y);
+  points.trr = new Point(w, y);
+  paths.textr = new Path()
+    .move(points.tlr)
+    .line(points.trr)
+    .attr("data-text", "text.right")
+    .attr("data-text-class", "right");
+  for (let i in text) {
+    y += 15;
+    points["t" + i] = new Point(0, y)
+      .attr("data-text", "text" + text[i] === "" ? "" : ".text-" + text[i])
+      .attr("data-text-class", "text-" + text[i]);
+  }
+  store.set("y", y);
+
+  return part;
+}