diff --git a/packages/components/src/Draft/Part/index.js b/packages/components/src/Draft/Part/index.js index 06b3a925fa2..c8f3ff0bc32 100644 --- a/packages/components/src/Draft/Part/index.js +++ b/packages/components/src/Draft/Part/index.js @@ -21,15 +21,6 @@ const Part = props => { return ( {grid} - {Object.keys(props.part.points).map(name => ( - - ))} {Object.keys(props.part.paths).map(name => ( { path={props.part.paths[name]} /> ))} + {Object.keys(props.part.points).map(name => ( + + ))} {Object.keys(props.part.snippets).map(name => ( ))} diff --git a/packages/plugin-scalebox/src/index.js b/packages/plugin-scalebox/src/index.js index 957271e732a..38b29b73e4e 100644 --- a/packages/plugin-scalebox/src/index.js +++ b/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") diff --git a/packages/rendertest/config/index.js b/packages/rendertest/config/index.js index 8ec60b6c6f1..0a9fabfef94 100644 --- a/packages/rendertest/config/index.js +++ b/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 } } }; diff --git a/packages/rendertest/src/circles.js b/packages/rendertest/src/circles.js new file mode 100644 index 00000000000..edf824d6a7b --- /dev/null +++ b/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; +} diff --git a/packages/rendertest/src/colors.js b/packages/rendertest/src/colors.js index 2b3f89b8c1a..e53eaeda684 100644 --- a/packages/rendertest/src/colors.js +++ b/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; } diff --git a/packages/rendertest/src/index.js b/packages/rendertest/src/index.js index b8dcbd5fdc1..6406af6bf0a 100644 --- a/packages/rendertest/src/index.js +++ b/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; diff --git a/packages/rendertest/src/macros.js b/packages/rendertest/src/macros.js new file mode 100644 index 00000000000..edeaa85018c --- /dev/null +++ b/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; +} diff --git a/packages/rendertest/src/snippets.js b/packages/rendertest/src/snippets.js new file mode 100644 index 00000000000..9c0a5414d34 --- /dev/null +++ b/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; +} diff --git a/packages/rendertest/src/test.js b/packages/rendertest/src/test.js new file mode 100644 index 00000000000..4a547231bb6 --- /dev/null +++ b/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; +} diff --git a/packages/rendertest/src/text.js b/packages/rendertest/src/text.js new file mode 100644 index 00000000000..726f103109e --- /dev/null +++ b/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; +}