soccer-jersey-fork 1.0.64 → 1.0.66

package/lib/patterns/patterns.d.ts

@@ -8,7 +8,7 @@ import { ShirtStyleDirection } from "../types";
 export declare const drawStripedThick: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawStripedThin: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawStripedNormal: (page: Svg, primaryColor: string, secondaryColor: string, direction: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
-export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
+export declare const drawCheckered: (page: Svg, primaryColor: string, secondaryColor: string, direction?: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawDiamonds: (page: Svg, primaryColor: string, secondaryColor: string) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawTwoColors: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;
 export declare const drawSingleBand: (page: Svg, primaryColor: string, secondaryColor: string, bandStyle: ShirtStyleDirection) => import("@svgdotjs/svg.js").Pattern;

package/lib/patterns/patterns.js

@@ -89,15 +89,25 @@ export const drawStripedNormal = (page, primaryColor, secondaryColor, direction)
         }
     }
 };
-export const drawCheckered = (page, primaryColor, secondaryColor) => {
-    return page.pattern(20, 20, function (add) {
-        add.rect(20, 20).fill(primaryColor);
-        add.rect(10, 10).fill(secondaryColor ? secondaryColor : "#eee");
-        add
-            .rect(10, 10)
-            .fill(secondaryColor ? secondaryColor : "#eee")
-            .move(10, 10);
-    });
+export const drawCheckered = (page, primaryColor, secondaryColor, direction) => {
+    const draw = () => {
+        return page.pattern(20, 20, function (add) {
+            add.rect(20, 20).fill(primaryColor);
+            add.rect(10, 10).fill(secondaryColor ? secondaryColor : "#eee");
+            add
+                .rect(10, 10)
+                .fill(secondaryColor ? secondaryColor : "#eee")
+                .move(10, 10);
+        });
+    };
+    switch (direction) {
+        case "diagonalLeft": {
+            return draw().rotate(45);
+        }
+        default: {
+            return draw();
+        }
+    }
 };
 export const drawDiamonds = (page, primaryColor, secondaryColor) => page.pattern(5, 5, function (add) {
     add.rect(5, 5).fill(primaryColor);

package/lib/utils/draw-soccer-jersey.js

@@ -57,7 +57,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
             shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection ? shirtStyleDirection : "vertical");
             break;
         case "checkered":
-            shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
+            shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222", shirtStyleDirection);
             break;
         case "diamonds":
             shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor ? shirtStyleColor : "#222");
@@ -98,11 +98,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
                 .fill("none")
                 .stroke({ color: collarColor, width: 2 });
         }
-        if (images && images.length > 0) {
-            for (const { src, width = 20, height = 20, x = 45, y = 45 } of images) {
-                page.image(src).size(width, height).move(x, y);
-            }
-        }
         if (withBadge) {
             page
                 .circle(8)
@@ -142,36 +137,6 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
             .fill(sleeveCuffColor)
             .stroke({ color: sleeveCuffColor, width: 3, linecap: "round" });
     }
-    if (texts) {
-        for (const textItem of texts) {
-            const { text, color, size, outlineColor, backgroundColor, x, y } = textItem;
-            const drawText = (elem) => {
-                return elem
-                    .text(text)
-                    .fill(lightenDarkenColor(color ? color : "#fff", -50))
-                    .font({
-                    family: "Monospace",
-                    size,
-                    style: "bold",
-                })
-                    .stroke({
-                    color: outlineColor || color,
-                    width: 0.5,
-                })
-                    .center(x, y);
-            };
-            if (backgroundColor) {
-                // eslint-disable-next-line new-cap
-                const draftShirtTextElem = drawText(SVG());
-                const dimens = draftShirtTextElem.bbox();
-                page
-                    .rect(dimens.width + 4, dimens.height + 4)
-                    .fill(lightenDarkenColor(backgroundColor, 10))
-                    .center(x, y);
-            }
-            drawText(page);
-        }
-    }
     if (shirtSideColor) {
         addShirtSideColor(page, shirtSideColor);
     }
@@ -228,6 +193,44 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
             });
         }
     }
+    /**
+     * Texts and images should be placed at last so they won't get covered by shirt and shorts
+     */
+    if (texts && texts.length > 0) {
+        for (const textItem of texts) {
+            const { text, color, size, outlineColor, backgroundColor, x, y } = textItem;
+            const drawText = (elem) => {
+                return elem
+                    .text(text)
+                    .fill(lightenDarkenColor(color ? color : "#fff", -50))
+                    .font({
+                    family: "Monospace",
+                    size,
+                    style: "bold",
+                })
+                    .stroke({
+                    color: outlineColor || color,
+                    width: 0.5,
+                })
+                    .center(x, y);
+            };
+            if (backgroundColor) {
+                // eslint-disable-next-line new-cap
+                const draftShirtTextElem = drawText(SVG());
+                const dimens = draftShirtTextElem.bbox();
+                page
+                    .rect(dimens.width + 4, dimens.height + 4)
+                    .fill(lightenDarkenColor(backgroundColor, 10))
+                    .center(x, y);
+            }
+            drawText(page);
+        }
+    }
+    if (images && images.length > 0) {
+        for (const { src, width = 20, height = 20, x = 45, y = 45 } of images) {
+            page.image(src).size(width, height).move(x, y);
+        }
+    }
     page.width(shirtWidth);
     // +10 is some extra room with the shorts height, so the total should be 150
     page.viewbox(`0 0 102 ${100 + (withShorts ? shortsHeight + 10 : 0)}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soccer-jersey-fork",
-  "version": "1.0.64",
+  "version": "1.0.66",
   "description": "Generate soccer jerseys in SVG format",
   "main": "lib/index.js",
   "scripts": {