44e04a4cef
Also fixes #251 Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/263 Co-authored-by: joostdecock <joost@joost.at> Co-committed-by: joostdecock <joost@joost.at>
98 lines
7.6 KiB
JavaScript
98 lines
7.6 KiB
JavaScript
import React from 'react'
|
|
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
|
|
|
/*
|
|
* This strokeScale factor is used to normalize the stroke across
|
|
* designs so we have a consistent look when showing our collection
|
|
*/
|
|
const strokeScale = 0.7
|
|
|
|
/**
|
|
* A linedrawing component for Bent
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {string} props.className - Any CSS classes to apply
|
|
* @param {number} props.stroke - The stroke width to apply
|
|
*/
|
|
export const Bent = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="0 -70 210 210" {...{ stroke }}>
|
|
<Front stroke={strokeScale * stroke} />
|
|
<Back stroke={strokeScale * stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/**
|
|
* A linedrawing component for the front of Bent
|
|
*
|
|
* @param {object} props - All React props
|
|
* @param {string} props.className - Any CSS classes to apply
|
|
* @param {number} props.stroke - The stroke width to apply
|
|
*/
|
|
export const BentFront = ({ className, stroke = 1 }) => (
|
|
<LineDrawingWrapper viewBox="0 -1 103 103" {...{ className, stroke }}>
|
|
<Front stroke={strokeScale * stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
|
|
/*
|
|
* React component for the back
|
|
*/
|
|
export const BentBack = ({
|
|
className = 'tw:w-full', // CSS classes to apply
|
|
stroke = 1, // Stroke width to use
|
|
}) => {
|
|
// Normalize stroke across designs
|
|
stroke = stroke * strokeScale
|
|
|
|
return (
|
|
<LineDrawingWrapper viewBox="110 0 110 100" {...{ className, stroke }}>
|
|
<Back stroke={stroke} />
|
|
</LineDrawingWrapper>
|
|
)
|
|
}
|
|
|
|
/*
|
|
* SVG elements for the front
|
|
*/
|
|
export const Front = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 60.68625,3.2106857 c -3.49033,2.88802 -6.11627,2.60249 -10.28923,2.70742 -4.17295,0.10494 -6.24977,-0.27315 -9.72449,-2.65196 m 21.40696,-0.79189 c -0.24934,1.5189 -0.55753,2.89562 -1.13985,4.01572 C 55.95804,16.072326 43.67653,14.149876 40.59035,7.069566 39.90685,5.5015157 39.41621,4.0031457 39.29797,2.5697757 m 38.8812,90.6255203 c -17.98203,3.57254 -37.50468,3.35217 -54.10199,0.0609 m 75.89309,-2.66175 -12.47516,2.51618 M 2.5612303,90.594446 15.03637,93.110626"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 80.888499,8.187321 -1.825625,7.784041 c -0.55298,2.606146 -1.068917,5.220229 -1.500188,7.850188 -0.449792,2.624666 -0.836083,5.262562 -1.166812,7.905749 -0.17198,1.320271 -0.320146,2.645834 -0.460375,3.971396 -0.145521,1.325563 -0.269875,2.651125 -0.386292,3.979334 0.08467,-1.330855 0.177271,-2.659063 0.291042,-3.989917 0.119062,-1.328208 0.251354,-2.653771 0.404812,-3.979333 0.301625,-2.651125 0.687917,-5.289021 1.124479,-7.921625 0.449792,-2.629959 0.963084,-5.246688 1.547813,-7.850188 0.616479,-2.59027 1.304396,-5.169958 1.971146,-7.749645 z m -59.420125,0 c 0.66675,2.579687 1.352021,5.159375 1.973792,7.752291 0.584729,2.600854 1.098021,5.220229 1.547812,7.850188 0.436563,2.632604 0.822855,5.270499 1.12448,7.921624 0.153458,1.325563 0.28575,2.651125 0.404812,3.979334 0.113771,1.328208 0.206375,2.659062 0.291042,3.989916 -0.116417,-1.328208 -0.240771,-2.65377 -0.386292,-3.979333 -0.140229,-1.325562 -0.288396,-2.648479 -0.460375,-3.971396 -0.330729,-2.643187 -0.717021,-5.281083 -1.166812,-7.90575 -0.433917,-2.629958 -0.947209,-5.244041 -1.500188,-7.850187 z"
|
|
/>
|
|
<path
|
|
key="outline"
|
|
d="m 60.88802,2.1951157 c -0.0738,0.85214 -0.22146,2.06862 -0.67064,3.22089 -1.69119,4.1677803 -5.79125,6.4419003 -9.81416,6.4180203 -3.85255,-0.0229 -7.63239,-2.16097 -9.24399,-6.4180203 -0.44834,-1.19574 -0.59798,-2.38491 -0.67064,-3.22089 m 20.39943,-0.0662 c -3.68096,2.66655 -5.95551,2.74086 -10.46887,2.84807 -4.51335,0.10721 -6.85316,-0.56637 -9.93056,-2.84807 m 0,5e-5 -16.34791,3.97873 c -0.59532,0.17198 -1.84944,0.61912 -2.97128,1.7832903 -1.24883,1.29381 -7.79991,21.57413 -8.71802,26.14348 -0.69432,3.45931 -2.77637,10.71022 -4.60615,19.42997 -2.5142297,11.98162 -3.4345597,26.73653 -5.4850497,38.23861 -0.0714,0.39688 -0.14288,0.80963 -0.20638,1.15623 l 12.4777497,2.37596 6.08928,-36.73188 6.38847,-19.12166 -3.06387,55.85354 c 0.67468,0.13229 1.19327,0.33602 2.47385,0.59531 13.90174,2.663044 36.14894,2.678174 49.39771,0 1.28058,-0.25929 1.79916,-0.46302 2.47385,-0.59531 l -3.06652,-55.85354 6.5223,19.7207 5.95545,36.13284 12.4804,-2.37596 c -0.0635,-0.3466 -0.13494,-0.75935 -0.20638,-1.15623 C 97.983,79.961996 96.97867,64.831546 94.43502,52.721296 92.67331,44.333776 90.65939,37.395016 89.98488,34.034466 89.06678,29.465116 82.5157,9.184796 81.26686,7.890986 80.14503,6.7268157 78.8909,6.2796757 78.29559,6.1076957 l -17.40757,-3.97873"
|
|
/>
|
|
</>
|
|
)
|
|
|
|
/*
|
|
* SVG elements for the back
|
|
*/
|
|
const Back = ({ stroke }) => (
|
|
<>
|
|
<path
|
|
key="outline"
|
|
d="m 184.95972,94.975946 c -1.22238,-11.23421 -2.0373,-22.2885 -2.44211,-28.85546 -0.46831,-7.5856 -0.56092,-14.56531 -0.59531,-17.23231 -0.0476,-3.82058 -0.0291,-7.06702 0,-9.50648 1.34331,4.88743 5.68179,14.33057 7.88834,24.09456 3.05654,13.52519 3.96711,27.66601 4.58941,31.16631 l 13.07306,-1.78329 -5.60917,-38.62123 c -4.64608,-22.06095 -10.27906,-38.1582 -11.03047,-40.99983 -0.0371,-0.14287 -0.36778,-1.44198 -1.18798,-2.97127 -0.64294,-1.19592 -1.40759,-2.57969 -2.97127,-3.5639403 -0.47096,-0.29633 -0.89694,-0.48154 -1.18798,-0.59531 l -18.05586,-3.82145 c -3.68096,2.66655 -5.9555,2.74086 -10.46886,2.84807 -4.51335,0.10721 -6.85317,-0.56638 -9.93057,-2.84807 l -16.80294,3.82145 c -0.29104,0.11112 -0.71702,0.29633 -1.18798,0.59531 -1.56369,0.9842503 -2.32833,2.3680203 -2.97127,3.5639403 -0.82286,1.52929 -1.15094,2.8284 -1.18798,2.97127 -0.75142,2.84163 -6.38175,18.93888 -11.03048,40.99983 l -5.60652,38.62123 13.07306,1.78329 c 0.65048,-3.65717 1.81192,-18.94217 5.00454,-32.99786 2.06664,-9.09861 6.21414,-17.68212 7.47321,-22.26301 0.0291,2.43946 0.0476,5.6859 0,9.50648 -0.0317,2.66435 -0.12435,9.64671 -0.59531,17.23231 -0.40481,6.56696 -1.21973,17.75354 -2.44211,28.85546 0.67469,0.13229 1.19328,0.33602 2.47386,0.59531 13.90174,2.663044 36.00606,2.678164 49.25483,0 1.28058,-0.25929 1.79917,-0.46302 2.47386,-0.59531"
|
|
/>
|
|
<path
|
|
key="folds"
|
|
opacity={0.3}
|
|
d="m 198.33202,91.249626 c 0,0 -1.6918,-24.40297 -4.36562,-34.39583 -2.67383,-9.99286 -10.58334,-25.26771 -10.58334,-25.26771 0,0 7.27927,15.42762 9.92188,25.4 2.6426,9.97238 5.02708,34.26354 5.02708,34.26354 z m -80.84365,0.41373 c 0,0 1.6918,-24.40297 4.36563,-34.39583 2.67382,-9.99286 10.58333,-25.26771 10.58333,-25.26771 0,0 -7.27927,15.42762 -9.92187,25.4 -2.64261,9.97238 -5.02709,34.26354 -5.02709,34.26354 z m 69.83937,-84.07135 -1.82298,7.38188 c -0.55298,2.47385 -1.06892,4.95564 -1.50019,7.45066 -0.45244,2.49238 -0.83608,4.99798 -1.16946,7.51152 -0.17198,1.25678 -0.32014,2.51355 -0.46037,3.77296 -0.14552,1.25942 -0.26988,2.52148 -0.3863,3.78354 0.0847,-1.2647 0.17728,-2.52941 0.29105,-3.79147 0.11906,-1.26207 0.25135,-2.52413 0.40481,-3.78355 0.30162,-2.51883 0.68792,-5.02708 1.12448,-7.52739 0.44979,-2.49767 0.96308,-4.98211 1.54781,-7.45067 0.62177,-2.45798 1.3044,-4.90008 1.97115,-7.34748 z m -59.41748,0 c 0.66675,2.44475 1.34937,4.8895 1.97114,7.34748 0.58473,2.46856 1.09802,4.953 1.54782,7.45067 0.43656,2.50031 0.82285,5.00856 1.12448,7.52739 0.15345,1.25942 0.28575,2.52148 0.40481,3.78355 0.11377,1.26206 0.20637,2.52677 0.29104,3.79147 -0.11642,-1.26206 -0.24077,-2.52412 -0.38629,-3.78354 -0.14023,-1.25941 -0.2884,-2.51883 -0.46038,-3.77296 -0.33337,-2.51354 -0.71702,-5.0165 -1.16946,-7.51152 -0.43391,-2.49766 -0.9472,-4.97945 -1.50018,-7.45066 z"
|
|
/>
|
|
<path
|
|
key="stitches"
|
|
{...dashed(stroke)}
|
|
{...thin(stroke)}
|
|
d="m 184.71704,93.211716 c -17.98204,3.57253 -37.23002,3.04815 -53.82734,-0.24317 m 76.2775,-2.41481 -12.98642,1.94409 m -85.67087,-1.94415 12.9701,1.94419"
|
|
/>
|
|
</>
|
|
)
|