From 7e943991ab8088f70020d0896f5a7699699925a3 Mon Sep 17 00:00:00 2001 From: Joost De Cock Date: Mon, 24 Dec 2018 14:17:55 +0100 Subject: [PATCH] sparkles: Added collar stand --- packages/simon/config/config.js | 5 +- packages/simon/index.html | 2 +- packages/simon/src/collarstand.js | 208 ++++++++++++++++++++++++++++++ packages/simon/src/index.js | 20 +-- 4 files changed, 214 insertions(+), 21 deletions(-) create mode 100644 packages/simon/src/collarstand.js diff --git a/packages/simon/config/config.js b/packages/simon/config/config.js index d01e2549bf8..6138f8582e7 100644 --- a/packages/simon/config/config.js +++ b/packages/simon/config/config.js @@ -41,6 +41,7 @@ export default { yoke: "backBase", sleeve: "sleeveBase" }, + parts: ["collarStand"], hide: ["base", "frontBase", "front", "backBase", "sleeveBase"], options: { // Constants @@ -101,6 +102,8 @@ export default { // Angles collarAngle: { deg: 85, min: 60, max: 130 }, + collarStandBend: { deg: 3, min: 0, max: 5 }, + collarStandCurve: { deg: 5, min: 0, max: 5 }, // Millimeter buttonPlacketWidth: { mm: 20, min: 10, max: 30 }, @@ -121,8 +124,6 @@ export default { collarFlare: { pct: 3, min: 0, max: 6 }, collarGap: { pct: 3, min: 0, max: 6 }, collarRoll: { pct: 3, min: 0, max: 6 }, - collarStandBend: { pct: 5, min: 0, max: 10 }, - collarStandCurve: { pct: 5, min: 0, max: 10 }, cuffDrape: { pct: 10, min: 0, max: 20 }, cuffEase: { pct: 20, min: 0, max: 200 }, cuffLength: { pct: 5, min: 3, max: 10 }, diff --git a/packages/simon/index.html b/packages/simon/index.html index bab4cbea2f3..4bc59cef79f 100644 --- a/packages/simon/index.html +++ b/packages/simon/index.html @@ -113,7 +113,7 @@ let settings1 = { ...settings }; pattern1.settings.options.buttonholePlacketType = "seperate"; //pattern1.settings.options.splitYoke = "yes"; pattern1.settings.sa = 10; - //pattern1.settings.only = "sleeve"; + pattern1.settings.only = "collarStand"; pattern1.draft(); console.log(pattern1); document.getElementById("svg1").innerHTML = pattern1.render(); diff --git a/packages/simon/src/collarstand.js b/packages/simon/src/collarstand.js new file mode 100644 index 00000000000..81a1ff12691 --- /dev/null +++ b/packages/simon/src/collarstand.js @@ -0,0 +1,208 @@ +export default part => { + // prettier-ignore + let {store, measurements, utils, sa, Point, points, Path, paths, Snippet, snippets, complete, paperless, macro, options} = part.shorthand(); + + const draft = function(tweak = 1) { + let length = + measurements.neckCircumference * (1 + options.collarEase) * tweak; + let width = options.collarStandWidth; + let half = length / 2; + let buttonSideExtra = options.buttonPlacketWidth / 2; + let buttonholeSideExtra = options.buttonholePlacketWidth / 2; + let extra = buttonSideExtra + buttonholeSideExtra; + let bend = options.collarStandBend * -1; + let curve = options.collarStandCurve - options.collarStandBend; + let hinge = 90 + (bend + curve) / 2; + + // Center line + points.center = new Point(0, 0); + points.hinge = points.center.shift(bend, half * 0.7); + points.rightCf = points.hinge.shift(curve, half * 0.3); + + // Give it our collar width (right side only) + points.topMid = points.center.shift(90, width / 2); + points.bottomMid = points.topMid.flipY(); + points.rightTopHinge = points.hinge.shift(hinge, width / 2); + points.rightBottomHinge = points.hinge.shift(180 + hinge, width / 2); + points.rightTopCf = points.rightCf.shift(curve + 90, width / 2); + points.rightBottomCf = points.rightCf.shift(curve - 90, width / 2); + points.rightBottomEdge = points.rightBottomCf.shift( + curve, + options.buttonholePlacketWidth / 2 + ); + + // Add control points (right side only) + points.bottomMidCp2 = points.bottomMid.shift(0, half * 0.2); + points.rightBottomHingeCp1 = points.rightBottomHinge.shift( + 90 + hinge, + half * 0.2 + ); + points.rightBottomHingeCp2 = points.rightBottomHinge.shift( + hinge - 90, + half * 0.1 + ); + points.rightBottomCfCp1 = points.rightBottomCf.shift( + 180 + curve, + half * 0.1 + ); + points.rightBottomEdgeCp2 = points.rightBottomCf.rotate( + -90, + points.rightBottomEdge + ); + points.rightTopCfCp1 = points.rightTopCf.shift( + curve, + options.buttonholePlacketWidth / 2 + ); + points.topMidCp1 = points.topMid.shift(0, half * 0.2); + points.rightTopHingeCp2 = points.rightTopHinge.shift( + 90 + hinge, + half * 0.2 + ); + points.rightTopHingeCp1 = points.rightTopHinge.shift( + hinge - 90, + half * 0.1 + ); + points.topEdgeCp1 = points.rightTopCf.rotate(-90, points.rightBottomEdge); + points.rightTopCfCp2 = points.rightTopCf.shift( + 180 + curve, + options.buttonholePlacketWidth / 2 + ); + + // Now do the left side + points.leftCf = points.rightCf.flipX(); + points.topMidCp2 = points.topMidCp1.flipX(); + points.leftTopHingeCp1 = points.rightTopHingeCp2.flipX(); + points.leftTopHinge = points.rightTopHinge.flipX(); + points.leftTopHingeCp2 = points.rightTopHingeCp1.flipX(); + points.leftTopCfCp1 = points.rightTopCfCp2.flipX(); + points.leftTopCf = points.rightTopCf.flipX(); + points.leftBottomCf = points.rightBottomCf.flipX(); + points.leftBottomEdge = points.leftBottomCf.shift( + bend + 180, + options.buttonPlacketWidth / 2 + ); + points.leftTopCfCp2 = points.leftTopCf.shift( + bend + 180, + options.buttonPlacketWidth / 2 + ); + points.leftBottomEdgeCp1 = points.leftBottomCf.rotate( + 90, + points.leftBottomEdge + ); + points.leftBottomCfCp2 = points.rightBottomCfCp1.flipX(); + points.leftBottomHingeCp1 = points.rightBottomHingeCp2.flipX(); + points.leftBottomHinge = points.rightBottomHinge.flipX(); + points.leftBottomHingeCp2 = points.rightBottomHingeCp1.flipX(); + points.bottomMidCp1 = points.bottomMidCp2.flipX(); + + let len = new Path() + .move(points.leftBottomCf) + .curve( + points.leftBottomCfCp2, + points.leftBottomHingeCp1, + points.leftBottomHinge + ) + .curve(points.leftBottomHingeCp2, points.bottomMidCp1, points.bottomMid) + .length(); + + return len * 2 - measurements.neckCircumference * (1 + options.collarEase); + }; + + let delta, tweak, run; + tweak = 1; + run = 1; + do { + delta = draft(tweak); + tweak = tweak * (1 - delta / 1000); + run++; + } while (Math.abs(delta) > 1 && run < 20); + + paths.seam = new Path() + .move(points.bottomMid) + .curve( + points.bottomMidCp2, + points.rightBottomHingeCp1, + points.rightBottomHinge + ) + .curve( + points.rightBottomHingeCp2, + points.rightBottomCfCp1, + points.rightBottomCf + ) + .line(points.rightBottomEdge) + .curve(points.rightBottomEdgeCp2, points.rightTopCfCp1, points.rightTopCf) + .curve(points.rightTopCfCp2, points.rightTopHingeCp1, points.rightTopHinge) + .curve(points.rightTopHingeCp2, points.topMidCp1, points.topMid) + .curve(points.topMidCp2, points.leftTopHingeCp1, points.leftTopHinge) + .curve(points.leftTopHingeCp2, points.leftTopCfCp1, points.leftTopCf) + .curve(points.leftTopCfCp2, points.leftBottomEdgeCp1, points.leftBottomEdge) + .line(points.leftBottomCf) + .curve( + points.leftBottomCfCp2, + points.leftBottomHingeCp1, + points.leftBottomHinge + ) + .curve(points.leftBottomHingeCp2, points.bottomMidCp1, points.bottomMid) + .close() + .attr("class", "fabric"); + + // Complete pattern? + if (complete) { + // Helplines + paths.help = new Path() + .move(points.rightTopCf) + .line(points.rightBottomCf) + .move(points.topMid) + .line(points.bottomMid) + .move(points.leftTopCf) + .line(points.leftBottomCf) + .attr("class", "dotted"); + + // Grainline + macro("grainline", { + from: points.bottomMid, + to: points.topMid + }); + + // Title + points.title = points.center.shift(0, 20); + macro("title", { + at: points.title, + nr: 6, + title: "collarStand", + scale: 0.6 + }); + + // Notches + macro("sprinkle", { + snippet: "notch", + on: [ + "rightTopCf", + "rightBottomCf", + "leftBottomCf", + "leftTopCf", + "rightBottomEdge", + "leftBottomEdge" + ] + }); + + // Button and buttonhole + snippets.button = new Snippet("button", points.leftCf); + let angle = options.collarStandCurve - options.collarStandBend - 180; + points.buttonhole = points.rightCf.shift(angle, 3); + snippets.buttonhole = new Snippet("buttonhole", points.buttonhole).attr( + "data-rotate", + 90 - angle + ); + + if (sa) { + paths.sa = paths.seam.offset(sa); + } + } + + // Paperless? + if (paperless) { + } + + return part; +}; diff --git a/packages/simon/src/index.js b/packages/simon/src/index.js index 922e7fe028e..93acf340356 100644 --- a/packages/simon/src/index.js +++ b/packages/simon/src/index.js @@ -13,6 +13,7 @@ import draftFrontLeft from "./frontleft"; import draftButtonholePlacket from "./buttonholeplacket"; import draftYoke from "./yoke"; import draftSleeve from "./sleeve"; +import draftCollarStand from "./collarstand"; // Constructor const Simon = function(settings) { @@ -51,23 +52,6 @@ Simon.prototype.draftFrontLeft = draftFrontLeft; Simon.prototype.draftButtonholePlacket = draftButtonholePlacket; Simon.prototype.draftYoke = draftYoke; Simon.prototype.draftSleeve = draftSleeve; +Simon.prototype.draftCollarStand = draftCollarStand; export default Simon; - -//import draftSleevecap from "./sleevecap"; -//import draftSleeve from "./sleeve"; -// sleeveBlock: ".Sleeve block" -// frontRight: "Front right" -// frontLeft: "Front left" -// buttonPlacket: "Button placket." -// buttonholePlacket: "Buttonhole placket." -// yoke: "Yoke" -// back: "Back" -// sleeve: "Sleeve" -// collarStand: "Collar stand" -// collar: "Collar" -// undercollar: "Undercollar" -// sleevePlacketUnderlap: "Sleeve placket underlap" -// sleevePlacketOverlap: "Sleeve placket overlap" -// barrelCuff: "Barrel cuff" -// frenchCuff: "French cuff"