soccer-jersey-fork 1.0.75 → 1.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/patterns/patterns.js
CHANGED
|
@@ -42,8 +42,8 @@ const drawStripedThick = (page, primaryColor, secondaryColor = "#eee", direction
|
|
|
42
42
|
};
|
|
43
43
|
const drawStripedThin = (page, primaryColor, secondaryColor = "#eee", direction) => {
|
|
44
44
|
const drawVertical = () => {
|
|
45
|
-
return page.pattern(
|
|
46
|
-
add.rect(
|
|
45
|
+
return page.pattern(9, 4, function (add) {
|
|
46
|
+
add.rect(9, 4).fill(primaryColor);
|
|
47
47
|
add.rect(1, 4).fill(secondaryColor);
|
|
48
48
|
});
|
|
49
49
|
};
|
package/lib/types/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export interface DrawSoccerJerseyProps {
|
|
|
16
16
|
shirtStyleDirection?: ShirtStyleDirection;
|
|
17
17
|
isBack?: boolean;
|
|
18
18
|
shirtWidth?: number;
|
|
19
|
+
collarType?: "round" | "folded";
|
|
19
20
|
collarColor?: string;
|
|
20
21
|
sleeveCuffColor?: string;
|
|
21
22
|
texts: {
|
|
@@ -43,4 +44,4 @@ export interface DrawSoccerJerseyProps {
|
|
|
43
44
|
}
|
|
44
45
|
export type ShirtStyleDirection = "diagonalRight" | "diagonalLeft" | "horizontal" | "vertical";
|
|
45
46
|
export type ShirtStyle = "plain" | "twoColors" | "striped" | "stripedThin" | "stripedThick" | "waves" | "checkered" | "diamonds" | "singleBandThin" | "singleBand" | "dashed" | "cross";
|
|
46
|
-
export type SleeveStyle =
|
|
47
|
+
export type SleeveStyle = ShirtStyle;
|
|
@@ -18,4 +18,4 @@ import { DrawSoccerJerseyProps } from "../types";
|
|
|
18
18
|
* @return {string} A data URL ready for direct use as src attribute
|
|
19
19
|
* on <img />
|
|
20
20
|
*/
|
|
21
|
-
export default function drawSoccerJersey({ shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: DrawSoccerJerseyProps): string;
|
|
21
|
+
export default function drawSoccerJersey({ shirtColor, sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack, shirtWidth, collarColor, collarType, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts, texts, }: DrawSoccerJerseyProps): string;
|
|
@@ -27,7 +27,7 @@ import { drawSingleBand, drawCheckered, drawTwoColors, drawWaves, drawDashes, ad
|
|
|
27
27
|
* @return {string} A data URL ready for direct use as src attribute
|
|
28
28
|
* on <img />
|
|
29
29
|
*/
|
|
30
|
-
export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
|
|
30
|
+
export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor = shirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection, isBack = false, shirtWidth = 200, collarColor, collarType, shoulderSideColor, shirtSideColor, sleeveCuffColor, sleeveStyleColor, sleeveStyle, sleeveStyleDirection, shirtBottomColor, shortsColor, shortsCuffColor, shortsSideColor, images, withBadge, withShorts = true, texts, }) {
|
|
31
31
|
// Colors and Color Optimizations
|
|
32
32
|
const optimizedShirtColor = lightenDarkenColor(shirtColor, -10);
|
|
33
33
|
// paths
|
|
@@ -38,47 +38,95 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
38
38
|
const pathNeckBack = "m63 .064C 60.12,5.3 53.35,6.6 49.86 6.6 44.86 7 40.4 4 36 .064c-1.7.6-.78 2.8-1.8 4.1-3 5.1-6 10-9 15h50c-3.8-6.4-7.6-13-11-19z";
|
|
39
39
|
// eslint-disable-next-line new-cap
|
|
40
40
|
const page = SVG();
|
|
41
|
-
let shirtFill;
|
|
42
41
|
shirtStyleColor = shirtStyleColor || "#eee";
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
42
|
+
let shirtFill = getPatternFill(page, optimizedShirtColor, shirtStyle, shirtStyleColor, shirtStyleDirection);
|
|
43
|
+
// switch (shirtStyle) {
|
|
44
|
+
// case "twoColors":
|
|
45
|
+
// shirtFill = drawTwoColors(
|
|
46
|
+
// page,
|
|
47
|
+
// optimizedShirtColor,
|
|
48
|
+
// shirtStyleColor,
|
|
49
|
+
// shirtStyleDirection ? shirtStyleDirection : "vertical",
|
|
50
|
+
// );
|
|
51
|
+
// break;
|
|
52
|
+
// case "stripedThin":
|
|
53
|
+
// shirtFill = drawStriped(
|
|
54
|
+
// page,
|
|
55
|
+
// optimizedShirtColor,
|
|
56
|
+
// shirtStyleColor,
|
|
57
|
+
// shirtStyleDirection || "vertical",
|
|
58
|
+
// "thin",
|
|
59
|
+
// );
|
|
60
|
+
// break;
|
|
61
|
+
// case "stripedThick":
|
|
62
|
+
// shirtFill = drawStriped(
|
|
63
|
+
// page,
|
|
64
|
+
// optimizedShirtColor,
|
|
65
|
+
// shirtStyleColor,
|
|
66
|
+
// shirtStyleDirection || "vertical",
|
|
67
|
+
// "thick",
|
|
68
|
+
// );
|
|
69
|
+
// break;
|
|
70
|
+
// case "striped":
|
|
71
|
+
// shirtFill = drawStriped(
|
|
72
|
+
// page,
|
|
73
|
+
// optimizedShirtColor,
|
|
74
|
+
// shirtStyleColor,
|
|
75
|
+
// shirtStyleDirection || "vertical",
|
|
76
|
+
// "normal",
|
|
77
|
+
// );
|
|
78
|
+
// break;
|
|
79
|
+
// case "dashed":
|
|
80
|
+
// shirtFill = drawDashes(
|
|
81
|
+
// page,
|
|
82
|
+
// optimizedShirtColor,
|
|
83
|
+
// shirtStyleColor,
|
|
84
|
+
// shirtStyleDirection ? shirtStyleDirection : "vertical",
|
|
85
|
+
// );
|
|
86
|
+
// break;
|
|
87
|
+
// case "checkered":
|
|
88
|
+
// shirtFill = drawCheckered(
|
|
89
|
+
// page,
|
|
90
|
+
// optimizedShirtColor,
|
|
91
|
+
// shirtStyleColor,
|
|
92
|
+
// shirtStyleDirection,
|
|
93
|
+
// );
|
|
94
|
+
// break;
|
|
95
|
+
// case "diamonds":
|
|
96
|
+
// shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
|
|
97
|
+
// break;
|
|
98
|
+
// case "singleBand":
|
|
99
|
+
// shirtFill = drawSingleBand(
|
|
100
|
+
// page,
|
|
101
|
+
// optimizedShirtColor,
|
|
102
|
+
// shirtStyleColor,
|
|
103
|
+
// shirtStyleDirection ? shirtStyleDirection : "horizontal",
|
|
104
|
+
// );
|
|
105
|
+
// break;
|
|
106
|
+
// case "singleBandThin":
|
|
107
|
+
// shirtFill = drawSingleBandThin(
|
|
108
|
+
// page,
|
|
109
|
+
// optimizedShirtColor,
|
|
110
|
+
// shirtStyleColor,
|
|
111
|
+
// shirtStyleDirection,
|
|
112
|
+
// );
|
|
113
|
+
// break;
|
|
114
|
+
// case "waves":
|
|
115
|
+
// shirtFill = drawWaves(
|
|
116
|
+
// page,
|
|
117
|
+
// optimizedShirtColor,
|
|
118
|
+
// shirtStyleColor,
|
|
119
|
+
// shirtStyleDirection == "vertical" || shirtStyleDirection == "horizontal"
|
|
120
|
+
// ? shirtStyleDirection
|
|
121
|
+
// : "vertical",
|
|
122
|
+
// );
|
|
123
|
+
// break;
|
|
124
|
+
// case "cross":
|
|
125
|
+
// shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
|
|
126
|
+
// break;
|
|
127
|
+
// default:
|
|
128
|
+
// shirtFill = optimizedShirtColor as unknown as Element;
|
|
129
|
+
// }
|
|
82
130
|
// neck
|
|
83
131
|
page
|
|
84
132
|
.path(isBack ? pathNeckBack : pathNeck)
|
|
@@ -94,66 +142,42 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
94
142
|
.from(1, 1)
|
|
95
143
|
.to(1, 0));
|
|
96
144
|
if (!isBack) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
145
|
+
switch (collarType) {
|
|
146
|
+
case "folded": {
|
|
147
|
+
page
|
|
148
|
+
/**
|
|
149
|
+
* The points start from the left then spread out to the leftest
|
|
150
|
+
*/
|
|
151
|
+
.path("m36 0.5 l -5 5 15 5 l 3 -5 3 5 16 -5 -4 -5 c -3 5 -25 5 -28.5 0")
|
|
152
|
+
.fill(collarColor || "#eee")
|
|
153
|
+
.stroke({
|
|
154
|
+
color: collarColor,
|
|
155
|
+
width: 1,
|
|
156
|
+
});
|
|
157
|
+
break;
|
|
158
|
+
}
|
|
159
|
+
default: {
|
|
160
|
+
if (collarColor) {
|
|
161
|
+
const pathCollar = "m35 0 q 17 20 30 0";
|
|
162
|
+
page
|
|
163
|
+
.path(pathCollar)
|
|
164
|
+
.fill("none")
|
|
165
|
+
.stroke({ color: collarColor, width: 2 });
|
|
166
|
+
}
|
|
167
|
+
}
|
|
103
168
|
}
|
|
104
169
|
if (withBadge) {
|
|
105
170
|
page
|
|
106
171
|
.circle(8)
|
|
107
172
|
.fill(lightenDarkenColor(optimizedShirtColor, 60))
|
|
108
173
|
.move(64, 25);
|
|
109
|
-
// page
|
|
110
|
-
// .polygon("0,3 3,0 4,3")
|
|
111
|
-
// .fill(lightenDarkenColor(optimizedShirtColor, -20))
|
|
112
|
-
// .move(30, 21);
|
|
113
174
|
}
|
|
114
175
|
}
|
|
115
|
-
const optimizedSleeveColor = lightenDarkenColor(sleeveColor, -10);
|
|
116
|
-
let sleeveFill;
|
|
117
176
|
sleeveStyleColor = sleeveStyleColor || "#eee";
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "normal");
|
|
121
|
-
break;
|
|
122
|
-
}
|
|
123
|
-
case "stripedThin": {
|
|
124
|
-
sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "thin");
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
case "stripedThick": {
|
|
128
|
-
sleeveFill = drawStriped(page, optimizedSleeveColor, sleeveStyleColor, sleeveStyleDirection || "horizontal", "thick");
|
|
129
|
-
break;
|
|
130
|
-
}
|
|
131
|
-
default: {
|
|
132
|
-
sleeveFill = optimizedSleeveColor;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
177
|
+
sleeveStyleDirection = sleeveStyleDirection || "vertical";
|
|
178
|
+
const sleeveFill = getPatternFill(page, sleeveColor, sleeveStyle, sleeveStyleColor, sleeveStyleDirection);
|
|
135
179
|
page.path(pathLeftSleeve).fill(sleeveFill);
|
|
136
180
|
page.path(pathRightSleeve).fill(sleeveFill);
|
|
137
|
-
// if (sleeveStyle === "plain") {
|
|
138
|
-
// page.path(pathLeftSleeve).fill(
|
|
139
|
-
// page
|
|
140
|
-
// .gradient("linear", function (add) {
|
|
141
|
-
// add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
|
|
142
|
-
// add.stop(1, optimizedSleeveColor);
|
|
143
|
-
// })
|
|
144
|
-
// .from(1, 1)
|
|
145
|
-
// .to(0, 0),
|
|
146
|
-
// );
|
|
147
|
-
// page.path(pathRightSleeve).fill(
|
|
148
|
-
// page
|
|
149
|
-
// .gradient("linear", function (add) {
|
|
150
|
-
// add.stop(0.21, lightenDarkenColor(optimizedSleeveColor, -10));
|
|
151
|
-
// add.stop(1, optimizedSleeveColor);
|
|
152
|
-
// })
|
|
153
|
-
// .from(0, 1)
|
|
154
|
-
// .to(1, 0),
|
|
155
|
-
// );
|
|
156
|
-
// }
|
|
157
181
|
if (sleeveCuffColor) {
|
|
158
182
|
const pathLeftSleeveCuff = "m2 36 l 17 9";
|
|
159
183
|
page
|
|
@@ -183,12 +207,9 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
183
207
|
const shortsHeight = withShorts ? 40 : 0;
|
|
184
208
|
if (withShorts) {
|
|
185
209
|
const pathShorts = `m 23 98 c 5 6, 50 6, 56 0 l 2 ${shortsHeight} c 0 5, -27 5, -27.5 0 l -2 -10, -2 10, c 0 5, -27 5, -27.5 0 l 1 -${shortsHeight}`;
|
|
186
|
-
page
|
|
187
|
-
.path(pathShorts)
|
|
188
|
-
.fill(shortsColor)
|
|
189
|
-
.stroke({
|
|
210
|
+
page.path(pathShorts).fill(shortsColor).stroke({
|
|
190
211
|
width: 1,
|
|
191
|
-
color:
|
|
212
|
+
color: shortsColor,
|
|
192
213
|
});
|
|
193
214
|
page.path(pathShorts).fill(page
|
|
194
215
|
.gradient("linear", function (add) {
|
|
@@ -249,7 +270,7 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
249
270
|
const dimens = draftShirtTextElem.bbox();
|
|
250
271
|
page
|
|
251
272
|
.rect(dimens.width + 4, dimens.height + 4)
|
|
252
|
-
.fill(
|
|
273
|
+
.fill(backgroundColor)
|
|
253
274
|
.center(x, y);
|
|
254
275
|
}
|
|
255
276
|
drawText(page);
|
|
@@ -265,3 +286,44 @@ export default function drawSoccerJersey({ shirtColor = "plain", sleeveColor, sh
|
|
|
265
286
|
page.viewbox(`0 0 102 ${100 + (withShorts ? shortsHeight + 10 : 0)}`);
|
|
266
287
|
return page.svg();
|
|
267
288
|
}
|
|
289
|
+
function getPatternFill(page, optimizedShirtColor, style, shirtStyleColor, shirtStyleDirection = "vertical") {
|
|
290
|
+
let shirtFill;
|
|
291
|
+
switch (style) {
|
|
292
|
+
case "twoColors":
|
|
293
|
+
shirtFill = drawTwoColors(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
294
|
+
break;
|
|
295
|
+
case "stripedThin":
|
|
296
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "thin");
|
|
297
|
+
break;
|
|
298
|
+
case "stripedThick":
|
|
299
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "thick");
|
|
300
|
+
break;
|
|
301
|
+
case "striped":
|
|
302
|
+
shirtFill = drawStriped(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection, "normal");
|
|
303
|
+
break;
|
|
304
|
+
case "dashed":
|
|
305
|
+
shirtFill = drawDashes(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
306
|
+
break;
|
|
307
|
+
case "checkered":
|
|
308
|
+
shirtFill = drawCheckered(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
309
|
+
break;
|
|
310
|
+
case "diamonds":
|
|
311
|
+
shirtFill = drawDiamonds(page, optimizedShirtColor, shirtStyleColor);
|
|
312
|
+
break;
|
|
313
|
+
case "singleBand":
|
|
314
|
+
shirtFill = drawSingleBand(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
315
|
+
break;
|
|
316
|
+
case "singleBandThin":
|
|
317
|
+
shirtFill = drawSingleBandThin(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
318
|
+
break;
|
|
319
|
+
case "waves":
|
|
320
|
+
shirtFill = drawWaves(page, optimizedShirtColor, shirtStyleColor, shirtStyleDirection);
|
|
321
|
+
break;
|
|
322
|
+
case "cross":
|
|
323
|
+
shirtFill = drawCrossLines(page, optimizedShirtColor, shirtStyleColor);
|
|
324
|
+
break;
|
|
325
|
+
default:
|
|
326
|
+
shirtFill = optimizedShirtColor;
|
|
327
|
+
}
|
|
328
|
+
return shirtFill;
|
|
329
|
+
}
|