qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qcast3:main
Branches Tags
qcast3:main
qcast3:feature/react-select
..
compare: qcast3:feature/react-select
Branches Tags
qcast3:main
qcast3:feature/react-select

No commits in common. "main" and "feature/react-select" have entirely different histories.
main ... feature/re

172 changed files with 2131 additions and 5808 deletions
Show Stats Expand all files Collapse all files

3
public/static/images/canvas/estiment_arr.svg
View File

@ -1,3 +0,0 @@
<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L5.5 5.5L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 210 B

3
public/static/images/canvas/estiment_arr_color.svg
View File

@ -1,3 +0,0 @@
<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 7174" d="M1 1L5.5 5.5L10 1" stroke="#C2D0DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 229 B

3
public/static/images/canvas/hide-check-arr.svg
View File

@ -1,3 +0,0 @@
<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0L15.7942 13.5H0.205771L8 0Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 160 B

5
public/static/images/canvas/ico-flx05.svg
View File

@ -1,5 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.19444 12.9993C6.09354 12.9998 5.99172 13 5.88889 13C4.92046 13 4.04106 12.9796 3.17535 12.9406C2.14652 12.8941 1.30109 12.109 1.16366 11.1069C1.07397 10.4528 1 9.78258 1 9.10001C1 8.41744 1.07397 7.7472 1.16366 7.09317C1.30109 6.09102 2.14652 5.30591 3.17535 5.25947C4.04106 5.22039 4.92046 5.20001 5.88889 5.20001C6.85732 5.20001 7.73672 5.22039 8.60243 5.25947C9.4922 5.29963 10.1961 5.89229 10.4722 6.70001" stroke="white" stroke-linecap="round"/>
<path d="M3.13885 5.2V3.7C3.13885 2.20883 4.37007 1 5.88885 1C7.40764 1 8.63885 2.20883 8.63885 3.7V5.2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.95286 10.4138C9.70279 10.2967 9.40511 10.4045 9.28798 10.6545C9.17085 10.9046 9.27862 11.2023 9.52869 11.3194L9.95286 10.4138ZM10.284 11.4L9.85526 11.6572C9.94961 11.8145 10.1224 11.9074 10.3056 11.8995C10.4888 11.8915 10.653 11.784 10.7334 11.6192L10.284 11.4ZM11.604 10.5087C11.8482 10.3796 11.9415 10.0771 11.8125 9.83297C11.6834 9.58883 11.3809 9.49553 11.1368 9.62457L11.604 10.5087ZM12.5 10.6C12.5 11.6407 11.6382 12.5 10.5556 12.5V13.5C12.1731 13.5 13.5 12.2102 13.5 10.6H12.5ZM10.5556 12.5C9.47301 12.5 8.61115 11.6407 8.61115 10.6H7.61115C7.61115 12.2102 8.93811 13.5 10.5556 13.5V12.5ZM8.61115 10.6C8.61115 9.55922 9.47301 8.69995 10.5556 8.69995V7.69995C8.93811 7.69995 7.61115 8.98972 7.61115 10.6H8.61115ZM10.5556 8.69995C11.6382 8.69995 12.5 9.55922 12.5 10.6H13.5C13.5 8.98972 12.1731 7.69995 10.5556 7.69995V8.69995ZM9.74077 10.8666C9.52869 11.3194 9.52853 11.3193 9.52837 11.3193C9.52832 11.3192 9.52816 11.3192 9.52805 11.3191C9.52785 11.319 9.52764 11.3189 9.52744 11.3188C9.52704 11.3186 9.52666 11.3185 9.5263 11.3183C9.52557 11.3179 9.52491 11.3176 9.52432 11.3173C9.52313 11.3168 9.52222 11.3163 9.52157 11.316C9.52026 11.3153 9.51999 11.3152 9.52066 11.3155C9.52202 11.3163 9.52708 11.319 9.53519 11.3239C9.55151 11.3337 9.57943 11.3518 9.6139 11.3792C9.68306 11.4342 9.77529 11.524 9.85526 11.6572L10.7127 11.1427C10.5599 10.888 10.3805 10.7111 10.2363 10.5964C10.164 10.539 10.0998 10.4965 10.0506 10.4669C10.026 10.4521 10.005 10.4405 9.98847 10.4317C9.9802 10.4273 9.97303 10.4237 9.96707 10.4207C9.96408 10.4192 9.9614 10.4179 9.95903 10.4168C9.95784 10.4162 9.95673 10.4157 9.9557 10.4152C9.95519 10.4149 9.95469 10.4147 9.95422 10.4145C9.95398 10.4144 9.95375 10.4142 9.95352 10.4141C9.95341 10.4141 9.95324 10.414 9.95319 10.414C9.95302 10.4139 9.95286 10.4138 9.74077 10.8666ZM10.284 11.4C10.7334 11.6192 10.7333 11.6192 10.7333 11.6193C10.7333 11.6193 10.7333 11.6194 10.7332 11.6194C10.7332 11.6195 10.7332 11.6196 10.7332 11.6196C10.7331 11.6197 10.7331 11.6197 10.7331 11.6196C10.7332 11.6196 10.7333 11.6192 10.7336 11.6187C10.7341 11.6176 10.7352 11.6156 10.7366 11.6127C10.7395 11.6069 10.7442 11.5976 10.7506 11.5852C10.7634 11.5605 10.7829 11.5237 10.8082 11.4781C10.8592 11.3863 10.9325 11.2614 11.0217 11.1288C11.215 10.8417 11.4284 10.6015 11.604 10.5087L11.1368 9.62457C10.725 9.84221 10.3952 10.2687 10.1921 10.5706C10.0831 10.7325 9.99497 10.8828 9.93403 10.9925C9.90342 11.0476 9.87932 11.0931 9.86253 11.1256C9.85413 11.1418 9.84754 11.1548 9.84286 11.1641C9.84051 11.1688 9.83865 11.1725 9.83727 11.1753C9.83658 11.1767 9.83601 11.1779 9.83557 11.1788C9.83534 11.1792 9.83515 11.1796 9.83499 11.1799C9.83491 11.1801 9.83484 11.1803 9.83477 11.1804C9.83474 11.1805 9.8347 11.1805 9.83468 11.1806C9.83464 11.1807 9.8346 11.1807 10.284 11.4Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

6
public/static/images/canvas/img_check_fail.svg
View File

@ -1,6 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="elements">
<path id="Vector" d="M6.73735 6.73726L11.2628 11.2627M11.2628 6.73726L6.73735 11.2627" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Ellipse 1334" d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 431 B

4
public/static/images/canvas/img_check_success.svg
View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 9.5L7.5 12L13 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 332 B

4
public/static/images/canvas/img_edit_ico.svg
View File

@ -1,4 +0,0 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.00078 5.7998V12.1998M12.2008 8.9998L5.80078 8.9998" stroke="#141B34" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17C13.4183 17 17 13.4183 17 9Z" stroke="#141B34"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 371 B

14
public/static/images/canvas/object_img01.svg
View File

@ -1,14 +1,16 @@
<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="154" height="140" viewBox="0 0 154 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4103_3971)"> <g clip-path="url(#clip0_24_15)">
<path d="M1.65636 139L70 9.14709L138.344 139H1.65636Z" stroke="black" stroke-width="2"/> <path d="M1.65636 139L70 9.14709L138.344 139H1.65636Z" stroke="black" stroke-width="2"/>
<rect x="69" y="11" width="2" height="127" fill="black"/> <rect x="69" y="11" width="2" height="127" fill="black"/>
<rect x="62.5" y="74.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="62.5" y="74.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<path d="M67.7331 85.5V84.06H69.3131V79.83H67.9431V78.73C68.3431 78.6567 68.6831 78.5667 68.9631 78.46C69.2498 78.3533 69.5231 78.2167 69.7831 78.05H71.0931V84.06H72.4331V85.5H67.7331Z" fill="#101010"/>
<circle cx="70" cy="8" r="7.5" stroke="#FF0000"/> <circle cx="70" cy="8" r="7.5" stroke="#FF0000"/>
</g> </g>
<rect x="148" y="2" width="1" height="136" fill="black"/>
<path d="M144 6L148.5 2L153 6" stroke="black"/>
<path d="M144 134L148.5 138L153 134" stroke="black"/>
<rect x="144" width="9" height="1" fill="#FF0000"/>
<rect x="144" y="139" width="9" height="1" fill="#FF0000"/>
<defs> <defs>
<clipPath id="clip0_4103_3971"> <clipPath id="clip0_24_15">
<rect width="140" height="140" fill="white"/> <rect width="140" height="140" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 801 B

After

Width:  |  Height:  |  Size: 716 B

19
public/static/images/canvas/object_img02.svg
View File

@ -1,22 +1,21 @@
<svg width="140" height="158" viewBox="0 0 140 158" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="154" height="155" viewBox="0 0 154 155" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_118_40)"> <g clip-path="url(#clip0_4103_3998)">
<rect x="69" y="9" width="2" height="129" fill="black"/> <rect x="69" y="9" width="2" height="129" fill="black"/>
<rect x="62.5" y="73.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="62.5" y="73.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<path d="M67.7331 84.5V83.06H69.3131V78.83H67.9431V77.73C68.3431 77.6567 68.6831 77.5667 68.9631 77.46C69.2498 77.3533 69.5231 77.2167 69.7831 77.05H71.0931V83.06H72.4331V84.5H67.7331Z" fill="#101010"/>
<circle cx="70" cy="8" r="7.5" stroke="#FF0000"/> <circle cx="70" cy="8" r="7.5" stroke="#FF0000"/>
<path d="M70 8.26297L139 61.4916V139H1V61.4915L70 8.26297Z" stroke="black" stroke-width="2"/> <path d="M1 139V61.4915L70 8.26297L139 61.4916V139H1Z" stroke="black" stroke-width="2"/>
</g> </g>
<rect x="148" y="2" width="1" height="136" fill="black"/>
<path d="M144 6L148.5 2L153 6" stroke="black"/>
<path d="M144 134L148.5 138L153 134" stroke="black"/>
<rect x="144" width="9" height="1" fill="#FF0000"/>
<rect x="144" y="139" width="9" height="1" fill="#FF0000"/>
<rect x="2" y="150" width="1" height="136" transform="rotate(-90 2 150)" fill="black"/> <rect x="2" y="150" width="1" height="136" transform="rotate(-90 2 150)" fill="black"/>
<rect x="62.5" y="142.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="62.5" y="142.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<path d="M67.3731 153.5V152.48C67.9931 151.913 68.5365 151.387 69.0031 150.9C69.4698 150.413 69.8331 149.96 70.0931 149.54C70.3531 149.113 70.4831 148.72 70.4831 148.36C70.4831 148.133 70.4431 147.943 70.3631 147.79C70.2898 147.63 70.1798 147.51 70.0331 147.43C69.8865 147.35 69.7131 147.31 69.5131 147.31C69.2598 147.31 69.0298 147.383 68.8231 147.53C68.6231 147.67 68.4331 147.837 68.2531 148.03L67.2831 147.07C67.6498 146.677 68.0198 146.387 68.3931 146.2C68.7731 146.013 69.2265 145.92 69.7531 145.92C70.2331 145.92 70.6565 146.017 71.0231 146.21C71.3898 146.403 71.6765 146.677 71.8831 147.03C72.0898 147.377 72.1931 147.787 72.1931 148.26C72.1931 148.687 72.0831 149.123 71.8631 149.57C71.6498 150.01 71.3731 150.447 71.0331 150.88C70.6931 151.307 70.3331 151.713 69.9531 152.1C70.1398 152.073 70.3465 152.05 70.5731 152.03C70.8065 152.01 71.0065 152 71.1731 152H72.5331V153.5H67.3731Z" fill="#101010"/>
<path d="M6 154L2 149.5L6 145" stroke="black"/> <path d="M6 154L2 149.5L6 145" stroke="black"/>
<path d="M134 154L138 149.5L134 145" stroke="black"/> <path d="M134 154L138 149.5L134 145" stroke="black"/>
<rect y="154" width="9" height="1" transform="rotate(-90 0 154)" fill="#FF0000"/> <rect y="154" width="9" height="1" transform="rotate(-90 0 154)" fill="#FF0000"/>
<rect x="139" y="154" width="9" height="1" transform="rotate(-90 139 154)" fill="#FF0000"/> <rect x="139" y="154" width="9" height="1" transform="rotate(-90 139 154)" fill="#FF0000"/>
<defs> <defs>
<clipPath id="clip0_118_40"> <clipPath id="clip0_4103_3998">
<rect width="140" height="140" fill="white"/> <rect width="140" height="140" fill="white"/>
</clipPath> </clipPath>
</defs> </defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

4
public/static/images/canvas/plane_shape01.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.56205L17.865 11H2.13504L10 1.56205Z" stroke="white" stroke-width="2"/> <path d="M27 0.804011L52.9645 33.5H1.03554L27 0.804011Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 189 B

After

Width:  |  Height:  |  Size: 177 B

4
public/static/images/canvas/plane_shape010.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.4907 1L18.7587 16H1V5.63636H8.14815H9.14815V4.63636V1H15.4907Z" stroke="white" stroke-width="2"/> <path d="M43.6009 0.5L53.3736 43.5H0.5V13.537H21.9375H22.4375V13.037V0.5H43.6009Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 203 B

4
public/static/images/canvas/plane_shape011.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5093 16H19V10H10H8.958L9.00085 8.95888L9.32837 1H1.24132L4.5093 16Z" stroke="white" stroke-width="2"/> <path d="M10.3991 43.5H53.5V25.537H29.0625H28.5625V25.037V0.5H0.626389L10.3991 43.5Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 B

After

Width:  |  Height:  |  Size: 206 B

4
public/static/images/canvas/plane_shape012.svg
View File

@ -1,3 +1,3 @@
<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="57" height="41" viewBox="0 0 57 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8546 3.62169L11.1523 4.0594H11.6816H14.4443L20.3269 15H1.76631L9.65389 1.8558L10.8546 3.62169Z" stroke="white" stroke-width="2"/> <path d="M30.384 8.3129L30.5329 8.53093H30.7969H39.3543L56.172 40.5H0.896303L25.3336 0.917553L30.384 8.3129Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 B

After

Width:  |  Height:  |  Size: 230 B

4
public/static/images/canvas/plane_shape013.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="41" viewBox="0 0 54 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.083 3.75037L11.379 4.06002L11.8074 4.0594L19 4.04906V15H1.69884L9.09691 1.67251L11.083 3.75037Z" stroke="white" stroke-width="2"/> <path d="M28.7562 8.30253L28.9042 8.53127L29.1766 8.53093L53.5 8.50062V40.5H0.871685L24.0017 0.953657L28.7562 8.30253Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 247 B

After

Width:  |  Height:  |  Size: 240 B

4
public/static/images/canvas/plane_shape014.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.05791 12H1V1H19V12H13.9421L10.7183 8.67188L10 7.93037L9.28173 8.67188L6.05791 12Z" stroke="white" stroke-width="2"/> <path d="M17.2929 33.5H0.5V0.5H53.5V33.5H36.7071L27.3536 24.1464L27 23.7929L26.6464 24.1464L17.2929 33.5Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 232 B

After

Width:  |  Height:  |  Size: 227 B

4
public/static/images/canvas/plane_shape015.svg
View File

@ -1,3 +1,3 @@
<svg width="15" height="19" viewBox="0 0 15 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 1.299L14 6.68809V18H1V6.68809L7.5 1.299Z" stroke="white" stroke-width="2"/> <path d="M20 0.64603L39.5 16.6006V49.5H0.5V16.6006L20 0.64603Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 184 B

6
public/static/images/canvas/plane_shape016.svg
View File

@ -1,3 +1,5 @@
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="42" viewBox="0 0 54 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.96963 10.3554L4.07692 10.1429V9.90476V1H15.9231V9.90476V10.1429L16.0304 10.3554L18.375 15H1.625L3.96963 10.3554Z" stroke="white" stroke-width="2"/> <path d="M0.971595 41.5L10.2573 28.5H44.727L53.0842 41.5H0.971595Z" fill="#313131" stroke="white"/>
<path d="M10.5 0.5H44.5V28.5H10.5V0.5Z" fill="#313131" stroke="white"/>
<rect x="11" y="28" width="33" height="1" fill="#313131"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 263 B

After

Width:  |  Height:  |  Size: 334 B

4
public/static/images/canvas/plane_shape017.svg
View File

@ -1,3 +1,3 @@
<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="58" height="39" viewBox="0 0 58 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.8541 6.14406L17.5432 14H1.70065L8.93284 1H16.9517L20.8541 6.14406Z" stroke="white" stroke-width="2"/> <path d="M57.4251 17.0318L46.691 38.5H0.865706L22.7888 0.5H46.728L57.4251 17.0318Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 B

After

Width:  |  Height:  |  Size: 204 B

4
public/static/images/canvas/plane_shape018.svg
View File

@ -1,3 +1,3 @@
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6552 7.73365L14.6298 17H1.88045L12.3752 1.43676L20.6552 7.73365Z" stroke="white" stroke-width="2"/> <path d="M57.339 20.1115L40.724 46.5H0.962002L33.1033 0.72297L57.339 20.1115Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 199 B

4
public/static/images/canvas/plane_shape02.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="18" height="10" stroke="white" stroke-width="2"/> <rect x="0.5" y="0.5" width="53" height="33" fill="#313131" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 178 B

After

Width:  |  Height:  |  Size: 180 B

4
public/static/images/canvas/plane_shape03.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.98369 1.72462C4.10657 1.29565 4.4988 1 4.94502 1H15.055C15.5012 1 15.8934 1.29565 16.0163 1.72462L18.308 9.72462C18.491 10.3636 18.0113 11 17.3466 11H2.65336C1.98869 11 1.50899 10.3636 1.69202 9.72462L3.98369 1.72462Z" stroke="white" stroke-width="2"/> <path d="M0.654784 33.5L9.66306 0.5H44.3369L53.3452 33.5H0.654784Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 B

After

Width:  |  Height:  |  Size: 188 B

4
public/static/images/canvas/plane_shape04.svg
View File

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.12132 11.2929L11.2929 2.12132C11.9229 1.49136 13 1.93752 13 2.82843V12C13 12.5523 12.5523 13 12 13H2.82843C1.93752 13 1.49136 11.9229 2.12132 11.2929Z" stroke="white" stroke-width="2"/> <path d="M43.5 43.5H1.20711L43.5 1.20711V43.5Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 B

After

Width:  |  Height:  |  Size: 168 B

4
public/static/images/canvas/plane_shape05.svg
View File

@ -1,3 +1,3 @@
<svg width="13" height="17" viewBox="0 0 13 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="34" height="44" viewBox="0 0 34 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.11305V16H1V11.132L12 2.11305Z" stroke="white" stroke-width="2"/> <path d="M33.5 1.04958V43.5H0.5V27.8255L33.5 1.04958Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 175 B

4
public/static/images/canvas/plane_shape06.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.22928 12L3.51619 1H18.7707L16.4838 12H1.22928Z" stroke="white" stroke-width="2"/> <path d="M0.6187 33.5L7.70137 0.5H53.3813L46.2986 33.5H0.6187Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 184 B

4
public/static/images/canvas/plane_shape07.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="34" viewBox="0 0 54 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.18518 8.17647H5.18518V9.17647V12H1V1H19V12H14.8148V9.17647V8.17647H13.8148H6.18518Z" stroke="white" stroke-width="2"/> <path d="M10 23.5H9.5V24V33.5H0.5V0.5H53.5V33.5H44.5V24V23.5H44H10Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 234 B

After

Width:  |  Height:  |  Size: 189 B

4
public/static/images/canvas/plane_shape08.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.125 5V1H19V16H1V6H8.125H9.125V5Z" stroke="white" stroke-width="2"/> <path d="M22.4375 13.037V0.5H53.5V43.5H0.5V13.537H21.9375H22.4375V13.037Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 183 B

After

Width:  |  Height:  |  Size: 195 B

4
public/static/images/canvas/plane_shape09.svg
View File

@ -1,3 +1,3 @@
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1111 9.27023L12.0905 1H19V16H1.8753L5.71843 10.2727H11.1111H12.1136L12.1111 9.27023Z" stroke="white" stroke-width="2"/> <path d="M30.4375 25.037V0.5H53.5V43.5H1.03302L15.242 25.537H29.9375H30.4375V25.037Z" stroke="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 236 B

After

Width:  |  Height:  |  Size: 206 B

3
public/static/images/canvas/return-btn.svg
View File

@ -1,3 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8055 1V2.87932C11.8055 3.05563 11.5851 3.13545 11.4722 3C10.3736 1.7725 8.777 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7" stroke="#B0BCCD" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 344 B

BIN
public/static/images/canvas/roof_warning_correct.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
public/static/images/canvas/roof_warning_wrong.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

26
public/static/images/canvas/shape/180deg/plane_tab_180deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="119" height="115" viewBox="0 0 119 115" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M109 21.8171L54.5 106.817L1 21.8171" stroke="#45CD7D" stroke-width="2"/> <path d="M1 21L55.5 106L109 21" stroke="#45CD7D" stroke-width="2"/>
<rect x="110" y="22.3171" width="110" height="2" transform="rotate(180 110 22.3171)" fill="#101010"/> <rect width="110" height="2" transform="matrix(1 0 0 -1 0 21.5)" fill="#101010"/>
<path d="M55 100.817V24.8171" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M55 100L55 24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M109 8.81714L-1.90735e-06 8.81714" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M66.5 108.317L118.5 26.8172" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="47.5" y="48.3171" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="47.5" y="48.3171" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.7331 11.5V10.06H54.3131V5.83L52.9431 5.83V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
<path d="M52.3731 59.3171V58.2971C52.9931 57.7305 53.5365 57.2038 54.0031 56.7171C54.4698 56.2305 54.8331 55.7771 55.0931 55.3571C55.3531 54.9305 55.4831 54.5371 55.4831 54.1771C55.4831 53.9505 55.4431 53.7605 55.3631 53.6071C55.2898 53.4471 55.1798 53.3271 55.0331 53.2471C54.8865 53.1671 54.7131 53.1271 54.5131 53.1271C54.2598 53.1271 54.0298 53.2005 53.8231 53.3471C53.6231 53.4871 53.4331 53.6538 53.2531 53.8471L52.2831 52.8871C52.6498 52.4938 53.0198 52.2038 53.3931 52.0171C53.7731 51.8305 54.2265 51.7371 54.7531 51.7371C55.2331 51.7371 55.6565 51.8338 56.0231 52.0271C56.3898 52.2205 56.6765 52.4938 56.8831 52.8471C57.0898 53.1938 57.1931 53.6038 57.1931 54.0771C57.1931 54.5038 57.0831 54.9405 56.8631 55.3871C56.6498 55.8271 56.3731 56.2638 56.0331 56.6971C55.6931 57.1238 55.3331 57.5305 54.9531 57.9171C55.1398 57.8905 55.3465 57.8671 55.5731 57.8471C55.8065 57.8271 56.0065 57.8171 56.1731 57.8171H57.5331V59.3171H52.3731Z" fill="#101010"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="47.5" y="1.31714" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="47.5" y="1.31714" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
<path d="M52.7331 12.3171V10.8771H54.3131V6.64714H52.9431V5.54714C53.3431 5.47381 53.6831 5.3838 53.9631 5.27714C54.2498 5.17047 54.5231 5.0338 54.7831 4.86714H56.0931V10.8771H57.4331V12.3171H52.7331Z" fill="#101010"/>
<rect x="86.5" y="59.3171" width="15" height="15" rx="7.5" fill="white"/>
<rect x="86.5" y="59.3171" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M93.7431 70.4571C93.3498 70.4571 92.9931 70.4138 92.6731 70.3271C92.3598 70.2405 92.0798 70.1205 91.8331 69.9671C91.5865 69.8071 91.3731 69.6238 91.1931 69.4171L92.0131 68.2971C92.2398 68.5038 92.4831 68.6771 92.7431 68.8171C93.0031 68.9505 93.2765 69.0171 93.5631 69.0171C93.7965 69.0171 93.9965 68.9871 94.1631 68.9271C94.3365 68.8605 94.4698 68.7638 94.5631 68.6371C94.6565 68.5105 94.7031 68.3538 94.7031 68.1671C94.7031 67.9538 94.6531 67.7705 94.5531 67.6171C94.4531 67.4638 94.2665 67.3471 93.9931 67.2671C93.7198 67.1871 93.3231 67.1471 92.8031 67.1471V65.8871C93.2298 65.8871 93.5631 65.8471 93.8031 65.7671C94.0431 65.6871 94.2131 65.5738 94.3131 65.4271C94.4198 65.2805 94.4731 65.1105 94.4731 64.9171C94.4731 64.6638 94.3998 64.4705 94.2531 64.3371C94.1065 64.1971 93.8965 64.1271 93.6231 64.1271C93.3765 64.1271 93.1498 64.1805 92.9431 64.2871C92.7365 64.3938 92.5198 64.5471 92.2931 64.7471L91.3931 63.6571C91.7398 63.3638 92.0998 63.1371 92.4731 62.9771C92.8531 62.8171 93.2631 62.7371 93.7031 62.7371C94.2165 62.7371 94.6631 62.8171 95.0431 62.9771C95.4298 63.1305 95.7265 63.3605 95.9331 63.6671C96.1465 63.9671 96.2531 64.3405 96.2531 64.7871C96.2531 65.1538 96.1531 65.4805 95.9531 65.7671C95.7531 66.0471 95.4565 66.2671 95.0631 66.4271V66.4771C95.3365 66.5571 95.5798 66.6805 95.7931 66.8471C96.0131 67.0071 96.1831 67.2071 96.3031 67.4471C96.4298 67.6871 96.4931 67.9671 96.4931 68.2871C96.4931 68.7471 96.3665 69.1405 96.1131 69.4671C95.8598 69.7871 95.5231 70.0338 95.1031 70.2071C94.6898 70.3738 94.2365 70.4571 93.7431 70.4571Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/270deg/plane_tab_270deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="115" height="119" viewBox="0 0 115 119" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M93.1826 109L8.18262 54.5L93.1826 1" stroke="#45CD7D" stroke-width="2"/> <path d="M87 109L2 54.5L87 1" stroke="#45CD7D" stroke-width="2"/>
<rect x="92.1826" y="110" width="110" height="2" transform="rotate(-90 92.1826 110)" fill="#101010"/> <rect x="86.5" y="110" width="110" height="2" transform="rotate(-90 86.5 110)" fill="#101010"/>
<path d="M14.1826 55H90.1826" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M8 55L84 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M106.183 109V-1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M100 109L100 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M6.68276 66.5L88.1828 118.5" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="45.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="51.6826" y="47.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="45.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="51.6826" y="47.5" width="15" height="15" rx="7.5" stroke="black"/> <path d="M50.3731 58.5V57.48C50.9931 56.9133 51.5365 56.3867 52.0031 55.9C52.4698 55.4133 52.8331 54.96 53.0931 54.54C53.3531 54.1133 53.4831 53.72 53.4831 53.36C53.4831 53.1333 53.4431 52.9433 53.3631 52.79C53.2898 52.63 53.1798 52.51 53.0331 52.43C52.8865 52.35 52.7131 52.31 52.5131 52.31C52.2598 52.31 52.0298 52.3833 51.8231 52.53C51.6231 52.67 51.4331 52.8367 51.2531 53.03L50.2831 52.07C50.6498 51.6767 51.0198 51.3867 51.3931 51.2C51.7731 51.0133 52.2265 50.92 52.7531 50.92C53.2331 50.92 53.6565 51.0167 54.0231 51.21C54.3898 51.4033 54.6765 51.6767 54.8831 52.03C55.0898 52.3767 55.1931 52.7867 55.1931 53.26C55.1931 53.6867 55.0831 54.1233 54.8631 54.57C54.6498 55.01 54.3731 55.4467 54.0331 55.88C53.6931 56.3067 53.3331 56.7133 52.9531 57.1C53.1398 57.0733 53.3465 57.05 53.5731 57.03C53.8065 57.01 54.0065 57 54.1731 57H55.5331V58.5H50.3731Z" fill="#101010"/>
<path d="M56.5557 58.5V57.48C57.1757 56.9133 57.7191 56.3867 58.1857 55.9C58.6524 55.4133 59.0157 54.96 59.2757 54.54C59.5357 54.1133 59.6657 53.72 59.6657 53.36C59.6657 53.1333 59.6257 52.9433 59.5457 52.79C59.4724 52.63 59.3624 52.51 59.2157 52.43C59.0691 52.35 58.8957 52.31 58.6957 52.31C58.4424 52.31 58.2124 52.3833 58.0057 52.53C57.8057 52.67 57.6157 52.8367 57.4357 53.03L56.4657 52.07C56.8324 51.6767 57.2024 51.3867 57.5757 51.2C57.9557 51.0133 58.4091 50.92 58.9357 50.92C59.4157 50.92 59.8391 51.0167 60.2057 51.21C60.5724 51.4033 60.8591 51.6767 61.0657 52.03C61.2724 52.3767 61.3757 52.7867 61.3757 53.26C61.3757 53.6867 61.2657 54.1233 61.0457 54.57C60.8324 55.01 60.5557 55.4467 60.2157 55.88C59.8757 56.3067 59.5157 56.7133 59.1357 57.1C59.3224 57.0733 59.5291 57.05 59.7557 57.03C59.9891 57.01 60.1891 57 60.3557 57H61.7157V58.5H56.5557Z" fill="#101010"/> <rect x="92.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="98.6826" y="47.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="92.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="98.6826" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
<path d="M103.916 58.5V57.06H105.496V52.83H104.126V51.73C104.526 51.6567 104.866 51.5667 105.146 51.46C105.432 51.3533 105.706 51.2167 105.966 51.05H107.276V57.06H108.616V58.5H103.916Z" fill="#101010"/>
<rect x="40.6826" y="86.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="40.6826" y="86.5" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M47.9257 97.64C47.5324 97.64 47.1757 97.5967 46.8557 97.51C46.5424 97.4233 46.2624 97.3033 46.0157 97.15C45.7691 96.99 45.5557 96.8067 45.3757 96.6L46.1957 95.48C46.4224 95.6867 46.6657 95.86 46.9257 96C47.1857 96.1333 47.4591 96.2 47.7457 96.2C47.9791 96.2 48.1791 96.17 48.3457 96.11C48.5191 96.0433 48.6524 95.9467 48.7457 95.82C48.8391 95.6933 48.8857 95.5367 48.8857 95.35C48.8857 95.1367 48.8357 94.9533 48.7357 94.8C48.6357 94.6467 48.4491 94.53 48.1757 94.45C47.9024 94.37 47.5057 94.33 46.9857 94.33V93.07C47.4124 93.07 47.7457 93.03 47.9857 92.95C48.2257 92.87 48.3957 92.7567 48.4957 92.61C48.6024 92.4633 48.6557 92.2933 48.6557 92.1C48.6557 91.8467 48.5824 91.6533 48.4357 91.52C48.2891 91.38 48.0791 91.31 47.8057 91.31C47.5591 91.31 47.3324 91.3633 47.1257 91.47C46.9191 91.5767 46.7024 91.73 46.4757 91.93L45.5757 90.84C45.9224 90.5467 46.2824 90.32 46.6557 90.16C47.0357 90 47.4457 89.92 47.8857 89.92C48.3991 89.92 48.8457 90 49.2257 90.16C49.6124 90.3133 49.9091 90.5433 50.1157 90.85C50.3291 91.15 50.4357 91.5233 50.4357 91.97C50.4357 92.3367 50.3357 92.6633 50.1357 92.95C49.9357 93.23 49.6391 93.45 49.2457 93.61V93.66C49.5191 93.74 49.7624 93.8633 49.9757 94.03C50.1957 94.19 50.3657 94.39 50.4857 94.63C50.6124 94.87 50.6757 95.15 50.6757 95.47C50.6757 95.93 50.5491 96.3233 50.2957 96.65C50.0424 96.97 49.7057 97.2167 49.2857 97.39C48.8724 97.5567 48.4191 97.64 47.9257 97.64Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/90deg/plane_tab_90deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="115" height="119" viewBox="0 0 115 119" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.8171 10L106.817 64.5L21.8171 118" stroke="#45CD7D" stroke-width="2"/> <path d="M21 1L106 55.5L21 109" stroke="#45CD7D" stroke-width="2"/>
<rect x="22.3171" y="9" width="110" height="2" transform="rotate(90 22.3171 9)" fill="#101010"/> <rect x="21.5" width="110" height="2" transform="rotate(90 21.5 0)" fill="#101010"/>
<path d="M100.817 64H24.8171" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M100 55L24 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M8.81714 10L8.81714 119" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M8 1V110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M108.317 52.5L26.8172 0.500029" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="48.3171" y="56.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="48.3171" y="56.5" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
<path d="M53.1903 67.5V66.48C53.8103 65.9133 54.3536 65.3867 54.8203 64.9C55.2869 64.4133 55.6503 63.96 55.9103 63.54C56.1703 63.1133 56.3003 62.72 56.3003 62.36C56.3003 62.1333 56.2603 61.9433 56.1803 61.79C56.1069 61.63 55.9969 61.51 55.8503 61.43C55.7036 61.35 55.5303 61.31 55.3303 61.31C55.0769 61.31 54.8469 61.3833 54.6403 61.53C54.4403 61.67 54.2503 61.8367 54.0703 62.03L53.1003 61.07C53.4669 60.6767 53.8369 60.3867 54.2103 60.2C54.5903 60.0133 55.0436 59.92 55.5703 59.92C56.0503 59.92 56.4736 60.0167 56.8403 60.21C57.2069 60.4033 57.4936 60.6767 57.7003 61.03C57.9069 61.3767 58.0103 61.7867 58.0103 62.26C58.0103 62.6867 57.9003 63.1233 57.6803 63.57C57.4669 64.01 57.1903 64.4467 56.8503 64.88C56.5103 65.3067 56.1503 65.7133 55.7703 66.1C55.9569 66.0733 56.1636 66.05 56.3903 66.03C56.6236 66.01 56.8236 66 56.9903 66H58.3503V67.5H53.1903Z" fill="#101010"/> <rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="1.31714" y="56.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="1.31714" y="56.5" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M5.73313 58.5V57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
<path d="M6.55026 67.5V66.06H8.13026V61.83H6.76026V60.73C7.16026 60.6567 7.50026 60.5667 7.78026 60.46C8.06693 60.3533 8.34026 60.2167 8.60026 60.05H9.91026V66.06H11.2503V67.5H6.55026Z" fill="#101010"/>
<rect x="59.3171" y="17.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="59.3171" y="17.5" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M66.5603 28.64C66.1669 28.64 65.8103 28.5967 65.4903 28.51C65.1769 28.4233 64.8969 28.3033 64.6503 28.15C64.4036 27.99 64.1903 27.8067 64.0103 27.6L64.8303 26.48C65.0569 26.6867 65.3003 26.86 65.5603 27C65.8203 27.1333 66.0936 27.2 66.3803 27.2C66.6136 27.2 66.8136 27.17 66.9803 27.11C67.1536 27.0433 67.2869 26.9467 67.3803 26.82C67.4736 26.6933 67.5203 26.5367 67.5203 26.35C67.5203 26.1367 67.4703 25.9533 67.3703 25.8C67.2703 25.6467 67.0836 25.53 66.8103 25.45C66.5369 25.37 66.1403 25.33 65.6203 25.33V24.07C66.0469 24.07 66.3803 24.03 66.6203 23.95C66.8603 23.87 67.0303 23.7567 67.1303 23.61C67.2369 23.4633 67.2903 23.2933 67.2903 23.1C67.2903 22.8467 67.2169 22.6533 67.0703 22.52C66.9236 22.38 66.7136 22.31 66.4403 22.31C66.1936 22.31 65.9669 22.3633 65.7603 22.47C65.5536 22.5767 65.3369 22.73 65.1103 22.93L64.2103 21.84C64.5569 21.5467 64.9169 21.32 65.2903 21.16C65.6703 21 66.0803 20.92 66.5203 20.92C67.0336 20.92 67.4803 21 67.8603 21.16C68.2469 21.3133 68.5436 21.5433 68.7503 21.85C68.9636 22.15 69.0703 22.5233 69.0703 22.97C69.0703 23.3367 68.9703 23.6633 68.7703 23.95C68.5703 24.23 68.2736 24.45 67.8803 24.61V24.66C68.1536 24.74 68.3969 24.8633 68.6103 25.03C68.8303 25.19 69.0003 25.39 69.1203 25.63C69.2469 25.87 69.3103 26.15 69.3103 26.47C69.3103 26.93 69.1836 27.3233 68.9303 27.65C68.6769 27.97 68.3403 28.2167 67.9203 28.39C67.5069 28.5567 67.0536 28.64 66.5603 28.64Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/normal/plane_tab01.svg
View File

@ -1,16 +1,12 @@
<svg width="119" height="115" viewBox="0 0 119 115" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 93.1829L64.5 8.18286L118 93.1829" stroke="#45CD7D" stroke-width="2"/> <path d="M1 87L55.5 2L109 87" stroke="#45CD7D" stroke-width="2"/>
<rect x="9" y="92.1829" width="110" height="2" fill="#101010"/> <rect y="86.5" width="110" height="2" fill="#101010"/>
<path d="M64 14.1829V90.1829" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M55 8V84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M10 106.183H119" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M52.5 6.68276L0.500029 88.1828" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="56.5" y="51.6829" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="56.5" y="51.6829" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.3731 56.5V55.48C52.9931 54.9133 53.5365 54.3867 54.0031 53.9C54.4698 53.4133 54.8331 52.96 55.0931 52.54C55.3531 52.1133 55.4831 51.72 55.4831 51.36C55.4831 51.1333 55.4431 50.9433 55.3631 50.79C55.2898 50.63 55.1798 50.51 55.0331 50.43C54.8865 50.35 54.7131 50.31 54.5131 50.31C54.2598 50.31 54.0298 50.3833 53.8231 50.53C53.6231 50.67 53.4331 50.8367 53.2531 51.03L52.2831 50.07C52.6498 49.6767 53.0198 49.3867 53.3931 49.2C53.7731 49.0133 54.2265 48.92 54.7531 48.92C55.2331 48.92 55.6565 49.0167 56.0231 49.21C56.3898 49.4033 56.6765 49.6767 56.8831 50.03C57.0898 50.3767 57.1931 50.7867 57.1931 51.26C57.1931 51.6867 57.0831 52.1233 56.8631 52.57C56.6498 53.01 56.3731 53.4467 56.0331 53.88C55.6931 54.3067 55.3331 54.7133 54.9531 55.1C55.1398 55.0733 55.3465 55.05 55.5731 55.03C55.8065 55.01 56.0065 55 56.1731 55H57.5331V56.5H52.3731Z" fill="#101010"/>
<path d="M61.3731 62.6829V61.6629C61.9931 61.0962 62.5365 60.5695 63.0031 60.0829C63.4698 59.5962 63.8331 59.1429 64.0931 58.7229C64.3531 58.2962 64.4831 57.9029 64.4831 57.5429C64.4831 57.3162 64.4431 57.1262 64.3631 56.9729C64.2898 56.8129 64.1798 56.6929 64.0331 56.6129C63.8865 56.5329 63.7131 56.4929 63.5131 56.4929C63.2598 56.4929 63.0298 56.5662 62.8231 56.7129C62.6231 56.8529 62.4331 57.0195 62.2531 57.2129L61.2831 56.2529C61.6498 55.8595 62.0198 55.5695 62.3931 55.3829C62.7731 55.1962 63.2265 55.1029 63.7531 55.1029C64.2331 55.1029 64.6565 55.1995 65.0231 55.3929C65.3898 55.5862 65.6765 55.8595 65.8831 56.2129C66.0898 56.5595 66.1931 56.9695 66.1931 57.4429C66.1931 57.8695 66.0831 58.3062 65.8631 58.7529C65.6498 59.1929 65.3731 59.6295 65.0331 60.0629C64.6931 60.4895 64.3331 60.8962 63.9531 61.2829C64.1398 61.2562 64.3465 61.2329 64.5731 61.2129C64.8065 61.1929 65.0065 61.1829 65.1731 61.1829H66.5331V62.6829H61.3731Z" fill="#101010"/> <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="56.5" y="98.6829" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="56.5" y="98.6829" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
<path d="M61.7331 109.683V108.243H63.3131V104.013H61.9431V102.913C62.3431 102.84 62.6831 102.75 62.9631 102.643C63.2498 102.536 63.5231 102.4 63.7831 102.233H65.0931V108.243H66.4331V109.683H61.7331Z" fill="#101010"/>
<rect x="17.5" y="40.6829" width="15" height="15" rx="7.5" fill="white"/>
<rect x="17.5" y="40.6829" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M24.7431 51.8229C24.3498 51.8229 23.9931 51.7795 23.6731 51.6929C23.3598 51.6062 23.0798 51.4862 22.8331 51.3329C22.5865 51.1729 22.3731 50.9895 22.1931 50.7829L23.0131 49.6629C23.2398 49.8695 23.4831 50.0429 23.7431 50.1829C24.0031 50.3162 24.2765 50.3829 24.5631 50.3829C24.7965 50.3829 24.9965 50.3529 25.1631 50.2929C25.3365 50.2262 25.4698 50.1295 25.5631 50.0029C25.6565 49.8762 25.7031 49.7195 25.7031 49.5329C25.7031 49.3195 25.6531 49.1362 25.5531 48.9829C25.4531 48.8295 25.2665 48.7129 24.9931 48.6329C24.7198 48.5529 24.3231 48.5129 23.8031 48.5129V47.2529C24.2298 47.2529 24.5631 47.2129 24.8031 47.1329C25.0431 47.0529 25.2131 46.9395 25.3131 46.7929C25.4198 46.6462 25.4731 46.4762 25.4731 46.2829C25.4731 46.0295 25.3998 45.8362 25.2531 45.7029C25.1065 45.5629 24.8965 45.4929 24.6231 45.4929C24.3765 45.4929 24.1498 45.5462 23.9431 45.6529C23.7365 45.7595 23.5198 45.9129 23.2931 46.1129L22.3931 45.0229C22.7398 44.7295 23.0998 44.5029 23.4731 44.3429C23.8531 44.1829 24.2631 44.1029 24.7031 44.1029C25.2165 44.1029 25.6631 44.1829 26.0431 44.3429C26.4298 44.4962 26.7265 44.7262 26.9331 45.0329C27.1465 45.3329 27.2531 45.7062 27.2531 46.1529C27.2531 46.5195 27.1531 46.8462 26.9531 47.1329C26.7531 47.4129 26.4565 47.6329 26.0631 47.7929V47.8429C26.3365 47.9229 26.5798 48.0462 26.7931 48.2129C27.0131 48.3729 27.1831 48.5729 27.3031 48.8129C27.4298 49.0529 27.4931 49.3329 27.4931 49.6529C27.4931 50.1129 27.3665 50.5062 27.1131 50.8329C26.8598 51.1529 26.5231 51.3995 26.1031 51.5729C25.6898 51.7395 25.2365 51.8229 24.7431 51.8229Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/re_180deg/plane_tab_re_180deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="119" height="115" viewBox="0 0 119 115" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 21.8171L64.5 106.817L118 21.8171" stroke="#45CD7D" stroke-width="2"/> <path d="M1 21L55.5 106L109 21" stroke="#45CD7D" stroke-width="2"/>
<rect width="110" height="2" transform="matrix(1 0 0 -1 9 22.3171)" fill="#101010"/> <rect width="110" height="2" transform="matrix(1 0 0 -1 0 21.5)" fill="#101010"/>
<path d="M64 100.817V24.8171" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M55 100V24" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M10 8.81714L119 8.81714" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M1 8L110 8" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M52.5005 108.317L0.500517 26.8172" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="56.5" y="48.3174" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="56.5" y="48.3174" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
<path d="M61.3731 59.3174V58.2974C61.9931 57.7307 62.5365 57.204 63.0031 56.7174C63.4698 56.2307 63.8331 55.7774 64.0931 55.3574C64.3531 54.9307 64.4831 54.5374 64.4831 54.1774C64.4831 53.9507 64.4431 53.7607 64.3631 53.6074C64.2898 53.4474 64.1798 53.3274 64.0331 53.2474C63.8865 53.1674 63.7131 53.1274 63.5131 53.1274C63.2598 53.1274 63.0298 53.2007 62.8231 53.3474C62.6231 53.4874 62.4331 53.654 62.2531 53.8474L61.2831 52.8874C61.6498 52.494 62.0198 52.204 62.3931 52.0174C62.7731 51.8307 63.2265 51.7374 63.7531 51.7374C64.2331 51.7374 64.6565 51.834 65.0231 52.0274C65.3898 52.2207 65.6765 52.494 65.8831 52.8474C66.0898 53.194 66.1931 53.604 66.1931 54.0774C66.1931 54.504 66.0831 54.9407 65.8631 55.3874C65.6498 55.8274 65.3731 56.264 65.0331 56.6974C64.6931 57.124 64.3331 57.5307 63.9531 57.9174C64.1398 57.8907 64.3465 57.8674 64.5731 57.8474C64.8065 57.8274 65.0065 57.8174 65.1731 57.8174H66.5331V59.3174H61.3731Z" fill="#101010"/> <rect x="47.5" y="0.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="56.5" y="1.31738" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="0.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="56.5" y="1.31738" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M52.7331 11.5V10.06H54.3131V5.83H52.9431V4.73C53.3431 4.65667 53.6831 4.56667 53.9631 4.46C54.2498 4.35333 54.5231 4.21667 54.7831 4.05H56.0931V10.06H57.4331V11.5H52.7331Z" fill="#101010"/>
<path d="M61.7331 12.3174V10.8774H63.3131V6.64738H61.9431V5.54738C62.3431 5.47405 62.6831 5.38405 62.9631 5.27738C63.2498 5.17072 63.5231 5.03405 63.7831 4.86738H65.0931V10.8774H66.4331V12.3174H61.7331Z" fill="#101010"/>
<rect x="17.5" y="59.3174" width="15" height="15" rx="7.5" fill="white"/>
<rect x="17.5" y="59.3174" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M24.7431 70.4574C24.3498 70.4574 23.9931 70.414 23.6731 70.3274C23.3598 70.2407 23.0798 70.1207 22.8331 69.9674C22.5865 69.8074 22.3731 69.624 22.1931 69.4174L23.0131 68.2974C23.2398 68.504 23.4831 68.6774 23.7431 68.8174C24.0031 68.9507 24.2765 69.0174 24.5631 69.0174C24.7965 69.0174 24.9965 68.9874 25.1631 68.9274C25.3365 68.8607 25.4698 68.764 25.5631 68.6374C25.6565 68.5107 25.7031 68.354 25.7031 68.1674C25.7031 67.954 25.6531 67.7707 25.5531 67.6174C25.4531 67.464 25.2665 67.3474 24.9931 67.2674C24.7198 67.1874 24.3231 67.1474 23.8031 67.1474V65.8874C24.2298 65.8874 24.5631 65.8474 24.8031 65.7674C25.0431 65.6874 25.2131 65.574 25.3131 65.4274C25.4198 65.2807 25.4731 65.1107 25.4731 64.9174C25.4731 64.664 25.3998 64.4707 25.2531 64.3374C25.1065 64.1974 24.8965 64.1274 24.6231 64.1274C24.3765 64.1274 24.1498 64.1807 23.9431 64.2874C23.7365 64.394 23.5198 64.5474 23.2931 64.7474L22.3931 63.6574C22.7398 63.364 23.0998 63.1374 23.4731 62.9774C23.8531 62.8174 24.2631 62.7374 24.7031 62.7374C25.2165 62.7374 25.6631 62.8174 26.0431 62.9774C26.4298 63.1307 26.7265 63.3607 26.9331 63.6674C27.1465 63.9674 27.2531 64.3407 27.2531 64.7874C27.2531 65.154 27.1531 65.4807 26.9531 65.7674C26.7531 66.0474 26.4565 66.2674 26.0631 66.4274V66.4774C26.3365 66.5574 26.5798 66.6807 26.7931 66.8474C27.0131 67.0074 27.1831 67.2074 27.3031 67.4474C27.4298 67.6874 27.4931 67.9674 27.4931 68.2874C27.4931 68.7474 27.3665 69.1407 27.1131 69.4674C26.8598 69.7874 26.5231 70.034 26.1031 70.2074C25.6898 70.374 25.2365 70.4574 24.7431 70.4574Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/re_270deg/plane_tab_re_270deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="115" height="119" viewBox="0 0 115 119" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M93.1826 10L8.18262 64.5L93.1826 118" stroke="#45CD7D" stroke-width="2"/> <path d="M87 1L2 55.5L87 109" stroke="#45CD7D" stroke-width="2"/>
<rect width="110" height="2" transform="matrix(0 1 1 0 92.1826 9)" fill="#101010"/> <rect width="110" height="2" transform="matrix(0 1 1 0 86.5 0)" fill="#101010"/>
<path d="M14.1826 64H90.1826" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M8 55L84 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M106.183 10V119" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M100 1L100 110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M6.68276 52.5L88.1828 0.500029" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="45.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="51.6826" y="56.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="45.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="51.6826" y="56.5" width="15" height="15" rx="7.5" stroke="black"/> <path d="M50.3731 58.5V57.48C50.9931 56.9133 51.5365 56.3867 52.0031 55.9C52.4698 55.4133 52.8331 54.96 53.0931 54.54C53.3531 54.1133 53.4831 53.72 53.4831 53.36C53.4831 53.1333 53.4431 52.9433 53.3631 52.79C53.2898 52.63 53.1798 52.51 53.0331 52.43C52.8865 52.35 52.7131 52.31 52.5131 52.31C52.2598 52.31 52.0298 52.3833 51.8231 52.53C51.6231 52.67 51.4331 52.8367 51.2531 53.03L50.2831 52.07C50.6498 51.6767 51.0198 51.3867 51.3931 51.2C51.7731 51.0133 52.2265 50.92 52.7531 50.92C53.2331 50.92 53.6565 51.0167 54.0231 51.21C54.3898 51.4033 54.6765 51.6767 54.8831 52.03C55.0898 52.3767 55.1931 52.7867 55.1931 53.26C55.1931 53.6867 55.0831 54.1233 54.8631 54.57C54.6498 55.01 54.3731 55.4467 54.0331 55.88C53.6931 56.3067 53.3331 56.7133 52.9531 57.1C53.1398 57.0733 53.3465 57.05 53.5731 57.03C53.8065 57.01 54.0065 57 54.1731 57H55.5331V58.5H50.3731Z" fill="#101010"/>
<path d="M56.5557 67.5V66.48C57.1757 65.9133 57.7191 65.3867 58.1857 64.9C58.6524 64.4133 59.0157 63.96 59.2757 63.54C59.5357 63.1133 59.6657 62.72 59.6657 62.36C59.6657 62.1333 59.6257 61.9433 59.5457 61.79C59.4724 61.63 59.3624 61.51 59.2157 61.43C59.0691 61.35 58.8957 61.31 58.6957 61.31C58.4424 61.31 58.2124 61.3833 58.0057 61.53C57.8057 61.67 57.6157 61.8367 57.4357 62.03L56.4657 61.07C56.8324 60.6767 57.2024 60.3867 57.5757 60.2C57.9557 60.0133 58.4091 59.92 58.9357 59.92C59.4157 59.92 59.8391 60.0167 60.2057 60.21C60.5724 60.4033 60.8591 60.6767 61.0657 61.03C61.2724 61.3767 61.3757 61.7867 61.3757 62.26C61.3757 62.6867 61.2657 63.1233 61.0457 63.57C60.8324 64.01 60.5557 64.4467 60.2157 64.88C59.8757 65.3067 59.5157 65.7133 59.1357 66.1C59.3224 66.0733 59.5291 66.05 59.7557 66.03C59.9891 66.01 60.1891 66 60.3557 66H61.7157V67.5H56.5557Z" fill="#101010"/> <rect x="92.5" y="62.5" width="15" height="15" rx="7.5" transform="rotate(-90 92.5 62.5)" fill="white"/>
<rect x="98.6826" y="56.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="92.5" y="62.5" width="15" height="15" rx="7.5" transform="rotate(-90 92.5 62.5)" stroke="#101010"/>
<rect x="98.6826" y="56.5" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M97.7331 58.5V57.06H99.3131V52.83H97.9431V51.73C98.3431 51.6567 98.6831 51.5667 98.9631 51.46C99.2498 51.3533 99.5231 51.2167 99.7831 51.05H101.093V57.06H102.433V58.5H97.7331Z" fill="#101010"/>
<path d="M103.916 67.5V66.06H105.496V61.83H104.126V60.73C104.526 60.6567 104.866 60.5667 105.146 60.46C105.432 60.3533 105.706 60.2167 105.966 60.05H107.276V66.06H108.616V67.5H103.916Z" fill="#101010"/>
<rect x="40.6826" y="17.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="40.6826" y="17.5" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M47.9257 28.64C47.5324 28.64 47.1757 28.5967 46.8557 28.51C46.5424 28.4233 46.2624 28.3033 46.0157 28.15C45.7691 27.99 45.5557 27.8067 45.3757 27.6L46.1957 26.48C46.4224 26.6867 46.6657 26.86 46.9257 27C47.1857 27.1333 47.4591 27.2 47.7457 27.2C47.9791 27.2 48.1791 27.17 48.3457 27.11C48.5191 27.0433 48.6524 26.9467 48.7457 26.82C48.8391 26.6933 48.8857 26.5367 48.8857 26.35C48.8857 26.1367 48.8357 25.9533 48.7357 25.8C48.6357 25.6467 48.4491 25.53 48.1757 25.45C47.9024 25.37 47.5057 25.33 46.9857 25.33V24.07C47.4124 24.07 47.7457 24.03 47.9857 23.95C48.2257 23.87 48.3957 23.7567 48.4957 23.61C48.6024 23.4633 48.6557 23.2933 48.6557 23.1C48.6557 22.8467 48.5824 22.6533 48.4357 22.52C48.2891 22.38 48.0791 22.31 47.8057 22.31C47.5591 22.31 47.3324 22.3633 47.1257 22.47C46.9191 22.5767 46.7024 22.73 46.4757 22.93L45.5757 21.84C45.9224 21.5467 46.2824 21.32 46.6557 21.16C47.0357 21 47.4457 20.92 47.8857 20.92C48.3991 20.92 48.8457 21 49.2257 21.16C49.6124 21.3133 49.9091 21.5433 50.1157 21.85C50.3291 22.15 50.4357 22.5233 50.4357 22.97C50.4357 23.3367 50.3357 23.6633 50.1357 23.95C49.9357 24.23 49.6391 24.45 49.2457 24.61V24.66C49.5191 24.74 49.7624 24.8633 49.9757 25.03C50.1957 25.19 50.3657 25.39 50.4857 25.63C50.6124 25.87 50.6757 26.15 50.6757 26.47C50.6757 26.93 50.5491 27.3233 50.2957 27.65C50.0424 27.97 49.7057 28.2167 49.2857 28.39C48.8724 28.5567 48.4191 28.64 47.9257 28.64Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

26
public/static/images/canvas/shape/re_90deg/plane_tab_re_90deg01.svg
View File

@ -1,16 +1,12 @@
<svg width="115" height="119" viewBox="0 0 115 119" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="108" height="110" viewBox="0 0 108 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.8174 109L106.817 54.5L21.8174 1" stroke="#45CD7D" stroke-width="2"/> <path d="M21 109L106 54.5L21 1" stroke="#45CD7D" stroke-width="2"/>
<rect width="110" height="2" transform="matrix(0 -1 -1 0 22.3174 110)" fill="#101010"/> <rect width="110" height="2" transform="matrix(0 -1 -1 0 21.5 110)" fill="#101010"/>
<path d="M100.817 55H24.8174" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M100 55L24 55" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M8.81738 109L8.81738 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M8 109L8 -1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M108.317 66.5L26.8172 118.5" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="48.3174" y="47.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="47.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="48.3174" y="47.5" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.3731 58.5V57.48C52.9931 56.9133 53.5365 56.3867 54.0031 55.9C54.4698 55.4133 54.8331 54.96 55.0931 54.54C55.3531 54.1133 55.4831 53.72 55.4831 53.36C55.4831 53.1333 55.4431 52.9433 55.3631 52.79C55.2898 52.63 55.1798 52.51 55.0331 52.43C54.8865 52.35 54.7131 52.31 54.5131 52.31C54.2598 52.31 54.0298 52.3833 53.8231 52.53C53.6231 52.67 53.4331 52.8367 53.2531 53.03L52.2831 52.07C52.6498 51.6767 53.0198 51.3867 53.3931 51.2C53.7731 51.0133 54.2265 50.92 54.7531 50.92C55.2331 50.92 55.6565 51.0167 56.0231 51.21C56.3898 51.4033 56.6765 51.6767 56.8831 52.03C57.0898 52.3767 57.1931 52.7867 57.1931 53.26C57.1931 53.6867 57.0831 54.1233 56.8631 54.57C56.6498 55.01 56.3731 55.4467 56.0331 55.88C55.6931 56.3067 55.3331 56.7133 54.9531 57.1C55.1398 57.0733 55.3465 57.05 55.5731 57.03C55.8065 57.01 56.0065 57 56.1731 57H57.5331V58.5H52.3731Z" fill="#101010"/>
<path d="M53.1905 58.5V57.48C53.8105 56.9133 54.3538 56.3867 54.8205 55.9C55.2872 55.4133 55.6505 54.96 55.9105 54.54C56.1705 54.1133 56.3005 53.72 56.3005 53.36C56.3005 53.1333 56.2605 52.9433 56.1805 52.79C56.1072 52.63 55.9972 52.51 55.8505 52.43C55.7038 52.35 55.5305 52.31 55.3305 52.31C55.0772 52.31 54.8472 52.3833 54.6405 52.53C54.4405 52.67 54.2505 52.8367 54.0705 53.03L53.1005 52.07C53.4672 51.6767 53.8372 51.3867 54.2105 51.2C54.5905 51.0133 55.0438 50.92 55.5705 50.92C56.0505 50.92 56.4738 51.0167 56.8405 51.21C57.2072 51.4033 57.4938 51.6767 57.7005 52.03C57.9072 52.3767 58.0105 52.7867 58.0105 53.26C58.0105 53.6867 57.9005 54.1233 57.6805 54.57C57.4672 55.01 57.1905 55.4467 56.8505 55.88C56.5105 56.3067 56.1505 56.7133 55.7705 57.1C55.9572 57.0733 56.1638 57.05 56.3905 57.03C56.6238 57.01 56.8238 57 56.9905 57H58.3505V58.5H53.1905Z" fill="#101010"/> <rect x="0.5" y="47.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="1.31738" y="47.5" width="15" height="15" rx="7.5" fill="white"/> <rect x="0.5" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="1.31738" y="47.5" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M5.73313 58.5L5.73313 57.06H7.31313V52.83H5.94313V51.73C6.34313 51.6567 6.68313 51.5667 6.96313 51.46C7.24979 51.3533 7.52313 51.2167 7.78313 51.05H9.09313V57.06H10.4331V58.5H5.73313Z" fill="#101010"/>
<path d="M6.55051 58.5V57.06H8.13051V52.83H6.76051V51.73C7.16051 51.6567 7.50051 51.5667 7.78051 51.46C8.06717 51.3533 8.34051 51.2167 8.60051 51.05H9.91051V57.06H11.2505V58.5H6.55051Z" fill="#101010"/>
<rect x="59.3174" y="86.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="59.3174" y="86.5" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M66.5605 97.64C66.1672 97.64 65.8105 97.5967 65.4905 97.51C65.1772 97.4233 64.8972 97.3033 64.6505 97.15C64.4038 96.99 64.1905 96.8067 64.0105 96.6L64.8305 95.48C65.0572 95.6867 65.3005 95.86 65.5605 96C65.8205 96.1333 66.0938 96.2 66.3805 96.2C66.6138 96.2 66.8138 96.17 66.9805 96.11C67.1538 96.0433 67.2872 95.9467 67.3805 95.82C67.4738 95.6933 67.5205 95.5367 67.5205 95.35C67.5205 95.1367 67.4705 94.9533 67.3705 94.8C67.2705 94.6467 67.0838 94.53 66.8105 94.45C66.5372 94.37 66.1405 94.33 65.6205 94.33V93.07C66.0472 93.07 66.3805 93.03 66.6205 92.95C66.8605 92.87 67.0305 92.7567 67.1305 92.61C67.2372 92.4633 67.2905 92.2933 67.2905 92.1C67.2905 91.8467 67.2172 91.6533 67.0705 91.52C66.9238 91.38 66.7138 91.31 66.4405 91.31C66.1938 91.31 65.9672 91.3633 65.7605 91.47C65.5538 91.5767 65.3372 91.73 65.1105 91.93L64.2105 90.84C64.5572 90.5467 64.9172 90.32 65.2905 90.16C65.6705 90 66.0805 89.92 66.5205 89.92C67.0338 89.92 67.4805 90 67.8605 90.16C68.2472 90.3133 68.5438 90.5433 68.7505 90.85C68.9638 91.15 69.0705 91.5233 69.0705 91.97C69.0705 92.3367 68.9705 92.6633 68.7705 92.95C68.5705 93.23 68.2738 93.45 67.8805 93.61V93.66C68.1538 93.74 68.3972 93.8633 68.6105 94.03C68.8305 94.19 69.0005 94.39 69.1205 94.63C69.2472 94.87 69.3105 95.15 69.3105 95.47C69.3105 95.93 69.1838 96.3233 68.9305 96.65C68.6772 96.97 68.3405 97.2167 67.9205 97.39C67.5072 97.5567 67.0538 97.64 66.5605 97.64Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
public/static/images/canvas/shape/re_normal/plane_tab_re01.svg
View File

@ -1,16 +1,12 @@
<svg width="119" height="115" viewBox="0 0 119 115" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="110" height="108" viewBox="0 0 110 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M109 93.1829L54.5 8.18286L1 93.1829" stroke="#45CD7D" stroke-width="2"/> <path d="M1 87L55.5 2L109 87" stroke="#45CD7D" stroke-width="2"/>
<rect width="110" height="2" transform="matrix(-1 0 0 1 110 92.1829)" fill="#101010"/> <rect y="86.5" width="110" height="2" fill="#101010"/>
<path d="M55 14.1829V90.1829" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M55 8V84" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M109 106.183H-1.90735e-06" stroke="#9F9F9F" stroke-dasharray="4 4"/> <path d="M1 100H110" stroke="#9F9F9F" stroke-dasharray="4 4"/>
<path d="M66.5 6.68276L118.5 88.1828" stroke="#9F9F9F" stroke-dasharray="4 4"/> <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="47.5" y="51.6826" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="45.5" width="15" height="15" rx="7.5" stroke="black"/>
<rect x="47.5" y="51.6826" width="15" height="15" rx="7.5" stroke="black"/> <path d="M52.3731 56.5V55.48C52.9931 54.9133 53.5365 54.3867 54.0031 53.9C54.4698 53.4133 54.8331 52.96 55.0931 52.54C55.3531 52.1133 55.4831 51.72 55.4831 51.36C55.4831 51.1333 55.4431 50.9433 55.3631 50.79C55.2898 50.63 55.1798 50.51 55.0331 50.43C54.8865 50.35 54.7131 50.31 54.5131 50.31C54.2598 50.31 54.0298 50.3833 53.8231 50.53C53.6231 50.67 53.4331 50.8367 53.2531 51.03L52.2831 50.07C52.6498 49.6767 53.0198 49.3867 53.3931 49.2C53.7731 49.0133 54.2265 48.92 54.7531 48.92C55.2331 48.92 55.6565 49.0167 56.0231 49.21C56.3898 49.4033 56.6765 49.6767 56.8831 50.03C57.0898 50.3767 57.1931 50.7867 57.1931 51.26C57.1931 51.6867 57.0831 52.1233 56.8631 52.57C56.6498 53.01 56.3731 53.4467 56.0331 53.88C55.6931 54.3067 55.3331 54.7133 54.9531 55.1C55.1398 55.0733 55.3465 55.05 55.5731 55.03C55.8065 55.01 56.0065 55 56.1731 55H57.5331V56.5H52.3731Z" fill="#101010"/>
<path d="M52.3731 62.6826V61.6626C52.9931 61.096 53.5365 60.5693 54.0031 60.0826C54.4698 59.596 54.8331 59.1426 55.0931 58.7226C55.3531 58.296 55.4831 57.9026 55.4831 57.5426C55.4831 57.316 55.4431 57.126 55.3631 56.9726C55.2898 56.8126 55.1798 56.6926 55.0331 56.6126C54.8865 56.5326 54.7131 56.4926 54.5131 56.4926C54.2598 56.4926 54.0298 56.566 53.8231 56.7126C53.6231 56.8526 53.4331 57.0193 53.2531 57.2126L52.2831 56.2526C52.6498 55.8593 53.0198 55.5693 53.3931 55.3826C53.7731 55.196 54.2265 55.1026 54.7531 55.1026C55.2331 55.1026 55.6565 55.1993 56.0231 55.3926C56.3898 55.586 56.6765 55.8593 56.8831 56.2126C57.0898 56.5593 57.1931 56.9693 57.1931 57.4426C57.1931 57.8693 57.0831 58.306 56.8631 58.7526C56.6498 59.1926 56.3731 59.6293 56.0331 60.0626C55.6931 60.4893 55.3331 60.896 54.9531 61.2826C55.1398 61.256 55.3465 61.2326 55.5731 61.2126C55.8065 61.1926 56.0065 61.1826 56.1731 61.1826H57.5331V62.6826H52.3731Z" fill="#101010"/> <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" fill="white"/>
<rect x="47.5" y="98.6826" width="15" height="15" rx="7.5" fill="white"/> <rect x="47.5" y="92.5" width="15" height="15" rx="7.5" stroke="#101010"/>
<rect x="47.5" y="98.6826" width="15" height="15" rx="7.5" stroke="#101010"/> <path d="M52.7331 103.5V102.06H54.3131V97.83H52.9431V96.73C53.3431 96.6567 53.6831 96.5667 53.9631 96.46C54.2498 96.3533 54.5231 96.2167 54.7831 96.05H56.0931V102.06H57.4331V103.5H52.7331Z" fill="#101010"/>
<path d="M52.7331 109.683V108.243H54.3131V104.013H52.9431V102.913C53.3431 102.839 53.6831 102.749 53.9631 102.643C54.2498 102.536 54.5231 102.399 54.7831 102.233H56.0931V108.243H57.4331V109.683H52.7331Z" fill="#101010"/>
<rect x="86.5" y="40.6826" width="15" height="15" rx="7.5" fill="white"/>
<rect x="86.5" y="40.6826" width="15" height="15" rx="7.5" stroke="black"/>
<path d="M93.7431 51.8226C93.3498 51.8226 92.9931 51.7793 92.6731 51.6926C92.3598 51.606 92.0798 51.486 91.8331 51.3326C91.5865 51.1726 91.3731 50.9893 91.1931 50.7826L92.0131 49.6626C92.2398 49.8693 92.4831 50.0426 92.7431 50.1826C93.0031 50.316 93.2765 50.3826 93.5631 50.3826C93.7965 50.3826 93.9965 50.3526 94.1631 50.2926C94.3365 50.226 94.4698 50.1293 94.5631 50.0026C94.6565 49.876 94.7031 49.7193 94.7031 49.5326C94.7031 49.3193 94.6531 49.136 94.5531 48.9826C94.4531 48.8293 94.2665 48.7126 93.9931 48.6326C93.7198 48.5526 93.3231 48.5126 92.8031 48.5126V47.2526C93.2298 47.2526 93.5631 47.2126 93.8031 47.1326C94.0431 47.0526 94.2131 46.9393 94.3131 46.7926C94.4198 46.646 94.4731 46.476 94.4731 46.2826C94.4731 46.0293 94.3998 45.836 94.2531 45.7026C94.1065 45.5626 93.8965 45.4926 93.6231 45.4926C93.3765 45.4926 93.1498 45.546 92.9431 45.6526C92.7365 45.7593 92.5198 45.9126 92.2931 46.1126L91.3931 45.0226C91.7398 44.7293 92.0998 44.5026 92.4731 44.3426C92.8531 44.1826 93.2631 44.1026 93.7031 44.1026C94.2165 44.1026 94.6631 44.1826 95.0431 44.3426C95.4298 44.496 95.7265 44.726 95.9331 45.0326C96.1465 45.3326 96.2531 45.706 96.2531 46.1526C96.2531 46.5193 96.1531 46.846 95.9531 47.1326C95.7531 47.4126 95.4565 47.6326 95.0631 47.7926V47.8426C95.3365 47.9226 95.5798 48.046 95.7931 48.2126C96.0131 48.3726 96.1831 48.5726 96.3031 48.8126C96.4298 49.0526 96.4931 49.3326 96.4931 49.6526C96.4931 50.1126 96.3665 50.506 96.1131 50.8326C95.8598 51.1526 95.5231 51.3993 95.1031 51.5726C94.6898 51.7393 94.2365 51.8226 93.7431 51.8226Z" fill="#101010"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

4
public/static/images/canvas/side_icon10.svg
View File

@ -1,4 +0,0 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.75 3.94737H12.0625C13.6425 3.94737 14.4325 3.94737 15 4.31991C15.2457 4.48119 15.4567 4.68842 15.6208 4.92979C16 5.48734 16 6.26349 16 7.81579C16 8.02719 16.0003 8.01008 16 8.36842M8.5 3.94737L8.02492 3.01388C7.63134 2.24053 7.27167 1.46209 6.39944 1.14074C6.01742 1 5.58102 1 4.7082 1C3.34585 1 2.66467 1 2.15355 1.28023C1.7892 1.47999 1.48857 1.77535 1.28524 2.13331C1 2.63547 1 3.30469 1 4.64315V6.89474C1 10.3682 1 12.105 2.09835 13.1841C3.11612 14.184 4.7087 14.2574 7.75 14.2627" stroke="white" stroke-linecap="round"/>
<path d="M12.7793 14.5884C13.3445 15.1372 14.2609 15.1372 14.8261 14.5884C15.3914 14.0396 15.3914 13.1498 14.8261 12.601L13.5469 11.3589C13.0473 10.8739 12.2733 10.8175 11.71 11.19M11.7208 9.51684C11.1556 8.96805 10.2392 8.96805 9.67397 9.51684C9.10876 10.0656 9.10876 10.9554 9.67397 11.5042L10.9532 12.7463C11.462 13.2403 12.2554 13.2896 12.8211 12.8942" stroke="white" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

32
public/static/images/common/Logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 13 KiB

4
public/static/images/common/select_del.svg
View File

@ -1,4 +0,0 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 370 B

14
public/static/images/sub/attachment_ico.svg
View File

@ -1,5 +1,11 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/> <g id="ico">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#0191C9"/> <circle id="Ellipse 2012" cx="11.5" cy="12" r="11.5" fill="#45576F"/>
<path d="M13.186 5.7898C12.6312 5.20223 11.7307 5.20223 11.1759 5.7898L6.99193 10.2206C6.03462 11.2344 6.03462 12.8767 6.99193 13.8905C7.94924 14.9043 9.50003 14.9043 10.4573 13.8905L13.9136 10.2303C14.1615 9.96779 14.5663 9.96779 14.8141 10.2303C15.062 10.4928 15.062 10.9214 14.8141 11.1839L11.3578 14.8441C9.90251 16.3853 7.54676 16.3853 6.09147 14.8441C4.63618 13.303 4.63618 10.8082 6.09147 9.26705L10.2754 4.8362C11.3282 3.72127 13.0337 3.72127 14.0865 4.8362C15.1393 5.95114 15.1393 7.75719 14.0865 8.87212L10.0844 13.1103C9.43409 13.799 8.379 13.799 7.72867 13.1103C7.07834 12.4216 7.07834 11.3043 7.72867 10.6156L11.0031 7.14795C11.2509 6.88547 11.6557 6.88547 11.9035 7.14795C12.1514 7.41042 12.1514 7.83906 11.9035 8.10154L8.62913 11.5692C8.47678 11.7305 8.47678 11.9954 8.62913 12.1567C8.78148 12.3181 9.03161 12.3181 9.18396 12.1567L13.186 7.91853C13.7408 7.33096 13.7408 6.37736 13.186 5.7898Z" fill="#0191C9" stroke="white" stroke-width="0.5"/> <g id="elements">
<path id="Vector" d="M9.66678 12.8193C9.7612 12.9739 9.87323 13.1202 10.0029 13.2552C10.8079 14.093 12.0349 14.224 12.9718 13.6481C13.1454 13.5414 13.3091 13.4104 13.4582 13.2552L15.6178 11.0076C16.572 10.0145 16.572 8.40447 15.6178 7.41141C14.6637 6.41836 13.1166 6.41836 12.1625 7.41142L11.6868 7.90648" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path id="Vector_2" d="M10.313 16.0933L9.83718 16.5885C8.88301 17.5816 7.33598 17.5816 6.3818 16.5885C5.42762 15.5955 5.42762 13.9854 6.3818 12.9924L8.54141 10.7448C9.49559 9.75174 11.0426 9.75174 11.9968 10.7448C12.1264 10.8797 12.2384 11.026 12.3328 11.1806" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path id="Vector_3" d="M17.0003 14.6666H15.6143M13.6669 18L13.6669 16.614" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_4" d="M5 9.33333H6.38593M8.33333 6L8.33333 7.38593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

7
public/static/images/sub/change_ico.svg
View File

@ -1,7 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#909000"/>
<path d="M4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4" stroke="#909000" stroke-linecap="round"/>
<path d="M5.58914 5.8473C5.67215 5.75932 5.75769 5.67375 5.84566 5.59071M7.5684 4.43768C7.67731 4.38873 7.78788 4.34282 7.9 4.30005M4.3 7.90005C4.34317 7.78681 4.38955 7.67516 4.43904 7.5652" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.99999 7.59961V12.3996M12.4 9.99961L7.59999 9.99961" stroke="#909000" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 772 B

7
public/static/images/sub/click_check_ico.svg
View File

@ -1,5 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/> <circle cx="7" cy="7.5" r="6.5" fill="white" stroke="#F16A6A"/>
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#F16A6A"/> <path d="M6.507 9.228L6.276 5.169L6.221 3.629H7.849L7.794 5.169L7.563 9.228H6.507ZM7.035 12.154C6.74167 12.154 6.49967 12.0513 6.309 11.846C6.12567 11.6407 6.034 11.3913 6.034 11.098C6.034 10.79 6.12567 10.537 6.309 10.339C6.49967 10.141 6.74167 10.042 7.035 10.042C7.32833 10.042 7.56667 10.141 7.75 10.339C7.94067 10.537 8.036 10.79 8.036 11.098C8.036 11.3913 7.94067 11.6407 7.75 11.846C7.56667 12.0513 7.32833 12.154 7.035 12.154Z" fill="#F16A6A"/>
<path d="M9.47136 11.228L9.24036 7.169L9.18536 5.629H10.8134L10.7584 7.169L10.5274 11.228H9.47136ZM9.99936 14.154C9.70602 14.154 9.46402 14.0513 9.27336 13.846C9.09002 13.6407 8.99836 13.3913 8.99836 13.098C8.99836 12.79 9.09002 12.537 9.27336 12.339C9.46402 12.141 9.70602 12.042 9.99936 12.042C10.2927 12.042 10.531 12.141 10.7144 12.339C10.905 12.537 11.0004 12.79 11.0004 13.098C11.0004 13.3913 10.905 13.6407 10.7144 13.846C10.531 14.0513 10.2927 14.154 9.99936 14.154Z" fill="#F16A6A"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 738 B

After

Width:  |  Height:  |  Size: 620 B

4
public/static/images/sub/oneonone_profile_icon.svg
View File

@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.25" stroke="#101010" stroke-width="1.5"/>
<path d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 474 B

6
public/static/images/sub/open_ico.svg
View File

@ -1,6 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="white"/>
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#3BBB48"/>
<path d="M11.3571 4.95962C10.7174 4.31987 10.3975 4 10 4C9.60251 4 9.28264 4.31987 8.64289 4.95962C8.25899 5.34352 7.87857 5.52175 7.33125 5.52175C6.85336 5.52175 6.17346 5.42907 5.8 5.80567C5.4295 6.17929 5.52177 6.85639 5.52177 7.33123C5.52177 7.87857 5.34352 8.25899 4.95961 8.6429C4.31987 9.28264 4.00001 9.60251 4 9.99999C4.00001 10.3975 4.31988 10.7174 4.95963 11.3571C5.38969 11.7872 5.52177 12.0649 5.52177 12.6687C5.52177 13.1466 5.42908 13.8265 5.80569 14.2C6.17931 14.5705 6.85641 14.4782 7.33124 14.4782C7.91409 14.4782 8.19477 14.5922 8.61074 15.0082C8.96495 15.3624 9.43978 16 10 16C10.5602 16 11.0351 15.3624 11.3893 15.0082C11.8052 14.5922 12.0859 14.4782 12.6688 14.4782C13.1436 14.4782 13.8207 14.5705 14.1943 14.2M15.0404 8.6429C15.6801 9.28264 16 9.60251 16 9.99999C16 10.3975 15.6801 10.7174 15.0404 11.3571C14.6103 11.7871 14.4782 12.0649 14.4782 12.6687C14.4782 13.1466 14.5709 13.8265 14.1943 14.2M14.1943 14.2H14.2" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.9 8.49998L10 10.6L15.4002 4.59998" stroke="#3BBB48" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

5
public/static/images/sub/product-del.svg
View File

@ -1,5 +0,0 @@
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="1" width="14" height="14" rx="7" fill="white"/>
<rect x="0.5" y="1" width="14" height="14" rx="7" stroke="#94A0AD"/>
<path d="M9.741 11.059L7.509 8.827L5.277 11.059L4.512 10.294L6.744 8.062L4.512 5.83L5.277 5.065L7.509 7.297L9.741 5.065L10.506 5.83L8.274 8.062L10.506 10.294L9.741 11.059Z" fill="#94A0AD"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 427 B

38
src/app/canvas/page.jsx
View File

@ -57,15 +57,6 @@ import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit' import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
import CanvasContextMenu from '@/components/canvas/CanvasContextMenu' import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect' import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect'
import FontOption from '@/components/canvas/modal/font_lineoption/FontOption'
import LineOption from '@/components/canvas/modal/font_lineoption/LineOption'
import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSizeOption'
import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
import Footer from '@/components/layout/Footer'
import ImageSize from '@/components/canvas/modal/imagesize/ImageSize'
import MeasuredValueOption from '@/components/canvas/modal/measuredvalueoption/MeasuredValueOption'
import ImgLoad from '@/components/canvas/modal/imgload/ImgLoad'
export default function CanvasPage() { export default function CanvasPage() {
const modalOption = useRecoilValue(modalState); const modalOption = useRecoilValue(modalState);
@ -76,7 +67,7 @@ export default function CanvasPage() {
<div className="content"> <div className="content">
<div className={`canvas-wrap ${menuValue === 5 || menuValue === 6 ? 'sub-wrap' : ''}`}> <div className={`canvas-wrap ${menuValue === 5 || menuValue === 6 ? 'sub-wrap' : ''}`}>
<CanvasMenu setMenuValue={setMenuValue}/> <CanvasMenu setMenuValue={setMenuValue}/>
<div className={`canvas-content ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}> <div className="canvas-content">
<CanvasLayout menuValue={menuValue}/> <CanvasLayout menuValue={menuValue}/>
</div> </div>
{/* 우클릭 context menu */} {/* 우클릭 context menu */}
@ -158,7 +149,7 @@ export default function CanvasPage() {
{/* <DrawingFlow/> */} {/* <DrawingFlow/> */}
{/* 지붕모듈선택 */} {/* 지붕모듈선택 */}
<RoofModuleOption/> {/* <RoofModuleOption/> */}
{/* 육지붕모듈 선택 */} {/* 육지붕모듈 선택 */}
{/* <HexagonalRoofOption/> */} {/* <HexagonalRoofOption/> */}
@ -186,32 +177,9 @@ export default function CanvasPage() {
{/* <AdditionalBundleEdit/> */} {/* <AdditionalBundleEdit/> */}
{/* 색상 팝업 */} {/* 색상 팝업 */}
{/* <ColorSelect/> */} <ColorSelect/>
{/* 글꼴 설정, 치수선 설정 */}
{/* <FontOption/> */}
{/* <LineOption/> */}
{/* <ShapeSizeOption/> */}
{/* 지붕재 선택 */}
{/* <RoofSelect/> */}
{/* 사이즈 변경 */}
{/* <SizeChange/> */}
{/* 이미지 크기 조절 */}
{/* <ImageSize/> */}
{/* 실측치 설정 */}
{/* <MeasuredValueOption/> */}
{/* 이미지 불러오기 */}
{/* <ImgLoad/> */}
</div> </div>
</div> </div>
{menuValue === 5 && <Footer/>}
{menuValue === 6 && <Footer/>}
</div> </div>
) )
} }

2
src/app/community/FAQ/page.jsx
View File

@ -42,7 +42,7 @@ export default function FAQPage(){
<Footer/> <Footer/>
{/* FAQ 상세 */} {/* FAQ 상세 */}
{/* <FAQDetailPop/> */} <FAQDetailPop/>
</div> </div>
) )
} }

50
src/app/community/oneononeinquiry/page.jsx
View File

@ -1,50 +0,0 @@
import Footer from "@/components/layout/Footer";
import Header from "@/components/layout/Header";
import Image from "next/image";
import Link from "next/link";
import '@/styles/contents.scss';
import OneOnOneInquiryTable from "@/components/sub/community/oneononeinqury/OneOnOneInquiryTable";
import OneOnOneEditPop from "@/components/sub/community/oneononeinqury/OneOnOneEditPop";
import OneOnOneDetailPop from "@/components/sub/community/oneononeinqury/OneOnOneDetailPop";
export default function OneOnOneInquiryPage(){
return(
<div className="wrap">
<Header/>
<div className="content">
<div className="sub-header">
<div className="sub-header-inner">
<ul className="sub-header-title-wrap">
<li className='title-item'>
<Link className='sub-header-title' href={'#'}>1:1お問い合わせ</Link>
</li>
</ul>
<ul className="sub-header-location">
<li className="location-item">
<span className="home">
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
</span>
</li>
<li className="location-item">
<span>物品及び図面管理</span>
</li>
<li className="location-item">
<span>新規物件登録</span>
</li>
</ul>
</div>
</div>
<div className="sub-content">
<div className="sub-content-inner">
<OneOnOneInquiryTable/>
</div>
</div>
</div>
<Footer/>
{/* 1:1문의 등록 */}
{/* <OneOnOneEditPop/> */}
<OneOnOneDetailPop/>
</div>
)
}

5
src/app/inputwrap/page.jsx
View File

@ -34,12 +34,7 @@ export default function InputWrapPage (){
<label htmlFor="">長さ (mm)</label> <label htmlFor="">長さ (mm)</label>
<input type="text" className="input-origin" placeholder="asdasd"/> <input type="text" className="input-origin" placeholder="asdasd"/>
</div> </div>
<div>
<input type="text" className="input-origin" placeholder="asdasd"/> <input type="text" className="input-origin" placeholder="asdasd"/>
</div>
<div>
<input type="number" className="input-origin" placeholder="asdasd"/>
</div>
</div> </div>
<div className="input-wrap"> <div className="input-wrap">

45
src/app/login/page.jsx
View File

@ -8,10 +8,6 @@ import { useState } from 'react'
export default function LoginPage(){ export default function LoginPage(){
const [passwordVisible, setPasswordVisible] = useState(false); const [passwordVisible, setPasswordVisible] = useState(false);
const [passwordReset, setPasswordReset] = useState(1); const [passwordReset, setPasswordReset] = useState(1);
// focus state
const [idFocus, setIdFocus] = useState(false);
const [secFocus, setSecFocus] = useState(false);
return( return(
<div className="login-wrap"> <div className="login-wrap">
<div className="login-inner"> <div className="login-inner">
@ -22,27 +18,16 @@ export default function LoginPage(){
<> <>
<div className="login-input-frame"> <div className="login-input-frame">
<div className="login-frame-tit "> <div className="login-frame-tit ">
<span>HANASYS DESIGN</span> <span>Q.CAST III</span>
太陽光発電システム図面管理サイト 太陽光発電システム図面管理サイト
</div> </div>
<div className="login-input-wrap"> <div className="login-input-wrap">
<div className={`login-area id ${idFocus ? 'focus' : ''}`}> <div className="login-area id">
<input <input type="text" className='login-input' placeholder='IDを入力してください'/>
type="text"
className='login-input'
placeholder='IDを入力してください'
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className={`login-area password ${secFocus ? 'focus' : ''}`}> <div className="login-area password">
<input <input type="password" className='login-input' />
type="password"
className='login-input'
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button> <button className={`password-hidden ${passwordVisible ? 'visible' : ''}`} onClick={() => setPasswordVisible(!passwordVisible)}></button>
</div> </div>
<div className="d-check-box login"> <div className="d-check-box login">
@ -71,24 +56,12 @@ export default function LoginPage(){
パスワードを初期化するIDとEメールアドレスを入力してください。 パスワードを初期化するIDとEメールアドレスを入力してください。
</div> </div>
<div className="login-input-wrap"> <div className="login-input-wrap">
<div className={`login-area id ${idFocus ? 'focus' : ''}`}> <div className="login-area id">
<input <input type="text" className='login-input' defaultValue={'IDを入力してください'}/>
type="text"
className='login-input'
placeholder={'IDを入力してください'}
onFocus={() => setIdFocus(true)}
onBlur={() => setIdFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className={`login-area email ${secFocus ? 'focus' : ''}`}> <div className="login-area email">
<input <input type="email" className='login-input' defaultValue={'メールを入力してください'}/>
type="email"
className='login-input'
placeholder={'メールを入力してください'}
onFocus={() => setSecFocus(true)}
onBlur={() => setSecFocus(false)}
/>
<button className='id-delete'></button> <button className='id-delete'></button>
</div> </div>
<div className='pwreset-btn-box'> <div className='pwreset-btn-box'>

2
src/app/main/page.jsx
View File

@ -41,7 +41,7 @@ export default function MainPage() {
<Footer/> <Footer/>
{/* 비밀번호 변경팝업 */} {/* 비밀번호 변경팝업 */}
{/* <ChangePasswordPop/> */} <ChangePasswordPop/>
</div> </div>
) )
} }

4
src/app/management/newproduct/page.jsx
View File

@ -7,7 +7,6 @@ import '@/styles/grid.scss';
import NewProductTable from "@/components/sub/management/newproduct/NewProductTable"; import NewProductTable from "@/components/sub/management/newproduct/NewProductTable";
import FindAddressPop from "@/components/sub/management/newproduct/FindAddressPop"; import FindAddressPop from "@/components/sub/management/newproduct/FindAddressPop";
import DesignRequestPop from "@/components/sub/management/newproduct/DesignRequestPop"; import DesignRequestPop from "@/components/sub/management/newproduct/DesignRequestPop";
import LoadingSpinner from "@/components/common/spinner/LoadingSpinner";
export default function NewProductPage(){ export default function NewProductPage(){
return( return(
@ -49,9 +48,6 @@ export default function NewProductPage(){
{/* 설계의뢰 불러오기 팝업 */} {/* 설계의뢰 불러오기 팝업 */}
{/* <DesignRequestPop/> */} {/* <DesignRequestPop/> */}
{/* 로딩바 */}
{/* <LoadingSpinner/> */}
</div> </div>
) )
} }

2
src/app/management/productinfo/page.jsx
View File

@ -52,7 +52,7 @@ export default function ProductInfo(){
<Footer/> <Footer/>
{/* 풍속선택 팝업 */} {/* 풍속선택 팝업 */}
{/* <WindSelectPop/> */} <WindSelectPop/>
</div> </div>
) )
} }

30
src/app/reactselect/page.jsx
View File

@ -1,17 +1,37 @@
'use client' 'use client'
import React, { useRef, useState } from 'react'
import ReactSelect from '@/components/common/reactselect/ReactSelect' import Select from 'react-select'
import '@/styles/_inputcommon.scss' import '@/styles/_inputcommon.scss'
export default function ReactSelectPage() { export default function ReactSelect() {
const selectOption = [
{ label: '김창수', value: '1' },
{ label: '류제영', value: '2' },
{ label: '정상연', value: '3' },
{ label: '안병근', value: '4' },
]
const ref = useRef()
const [select, setSelect] = useState('')
//isSearchable 자동완성 검색가능여부
//isClearable x버튼
const onSelectionChange = (key) => {
if (key) {
setSelect(key.value)
} else {
setSelect('')
}
}
return ( return (
<div> <div>
<h1 className="title">REACT-SELECT</h1> <h1 className="title">REACT-SELECT</h1>
<div className="input-content"> <div className="input-content">
<div className="input-wrap"> <div className="input-wrap">
<h1>REACT-SELECT</h1> <h1>REACT-SELECT</h1>
<div className="react-select-wrap"> <div className="select-wrap">
<ReactSelect/> <Select ref={ref} options={selectOption} onChange={onSelectionChange} isSearchable={false} placeholder="선택하세요" isClearable={true} />
</div> </div>
</div> </div>
</div> </div>

630
src/components/canvas/CanvasEstimate.jsx
View File

@ -1,15 +1,101 @@
'use client'
import { useState } from "react";
import SingleDatePicker from "../common/datepicker/SingleDatePicker"; import SingleDatePicker from "../common/datepicker/SingleDatePicker";
import Footer from "../layout/Footer";
import FileDownOptionPop from "./estimatepop/FileDownOptionPop"; import FileDownOptionPop from "./estimatepop/FileDownOptionPop";
import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop"; import ProductFeaturesPop from "./estimatepop/ProductFeaturesPop";
import QGrid from "../common/grid/QGrid";
import ReactSelect from "../common/reactselect/ReactSelect"; const HeaderCheckButton = () => {
import { useState } from "react"; return(
import EstimateCopyPop from "./estimatepop/EstimateCopyPop"; <div className="d-check-box pop no-text">
<input type="checkbox" id="ch97" disabled/>
<label htmlFor="ch97"></label>
</div>
)
}
const CellCheckButton = () => {
return(
<div className="d-check-box light no-text">
<input type="checkbox" id="ch98" />
<label htmlFor="ch98"></label>
</div>
)
}
const CellProductName = () => {
return(
<div className="form-flex-wrap">
<div className="select-box mr5" style={{flex : '1'}}>
<select className="select-light black" name="" id="">
<option>Re.RISE415</option>
</select>
</div>
<div className="btn-area">
<button className="btn-origin green">追加、変更資材</button>
</div>
</div>
)
}
const CellShapePlate = () => {
return(
<div className="form-flex-wrap">
<div className="name">HNW-MC4-CHN30</div>
<button className="grid-tip"></button>
</div>
)
}
const CellQuantity = () =>{
return(
<div className="input-wrap" style={{width: '100%'}}>
<input type="text" className="input-light al-r" defaultValue={'20'}/>
</div>
)
}
const CellUnitPrice = () =>{
return(
<div className="form-flex-wrap">
<div className="input-wrap mr5" style={{flex: '1'}}>
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
</div>
<div className="btn-area">
<button className="btn-origin green">OPEN</button>
</div>
</div>
)
}
export default function CanvasEstimate() { export default function CanvasEstimate() {
const [hidden, setHidden] = useState(true); const [gridProps, setGridProps] = useState({
gridData: [
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
{ status: "受付", item: "100", unit: "セット", amountExTax: "5,561,000 " },
],
gridColumns:[
{ field: "check", width: 45, cellRenderer: CellCheckButton, headerComponent: HeaderCheckButton, cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
{ headerName: "アイテム ", field: "item", width: 100, cellStyle: { textAlign: "right" } },
{ headerName: "品番", field: "productName", flex: 1, cellRenderer: CellProductName, cellStyle: { display: 'flex', alignItems: 'center'} },
{ headerName: "型板", field: "shapePlate", width: 200, cellRenderer: CellShapePlate, cellStyle: { display: 'flex', alignItems: 'center'} },
{ headerName: "数量", field: "quantity", width: 120, cellRenderer: CellQuantity, cellStyle: { display: 'flex', alignItems: 'center'} },
{ headerName: "単位", field: "unit", width: 100, },
{ headerName: "単価", field: "unitPrice", cellRenderer: CellUnitPrice, cellStyle: { display: 'flex', alignItems: 'center'} },
{ headerName: "金額 (税別別) ", field: "amountExTax", cellStyle: { textAlign: "right" }, width: 240, },
],
isPageable: true,
})
return( return(
<div className="sub-content estimate"> <div className="sub-content estimate">
<div className="sub-content-inner"> <div className="sub-content-inner">
@ -95,25 +181,16 @@ export default function CanvasEstimate() {
</td> </td>
</tr> </tr>
<tr> <tr>
{/* 2025-04-03 */}
<th>注文分類  <span className="important">*</span></th> <th>注文分類  <span className="important">*</span></th>
<td colSpan={3}> <td colSpan={3}>
<div className="form-flex-wrap"> <div className="radio-wrap">
<div className="radio-wrap"> <div className="d-check-radio light mr10">
<div className="d-check-radio light mr10"> <input type="radio" name="radio01" id="ra01" />
<input type="radio" name="radio01" id="ra01" /> <label htmlFor="ra01">住宅PKG</label>
<label htmlFor="ra01">住宅PKG</label>
</div>
<div className="d-check-radio light">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">積上げ( YJOD )</label>
</div>
</div> </div>
<div className="form-flex-select ml10"> <div className="d-check-radio light">
<label htmlFor="">住宅PKG</label> <input type="radio" name="radio01" id="ra02" />
<div className="form-select"> <label htmlFor="ra02">積上げ( YJOD )</label>
<ReactSelect/>
</div>
</div> </div>
</div> </div>
</td> </td>
@ -173,7 +250,6 @@ export default function CanvasEstimate() {
<input type="checkbox" id="ch99" /> <input type="checkbox" id="ch99" />
<label htmlFor="ch99" style={{color: '#101010'}}>後日資料提出</label> <label htmlFor="ch99" style={{color: '#101010'}}>後日資料提出</label>
</div> </div>
<div className="drag-file-guide">&#40;※北面設置の場合、ファイル添付が必須です。&#41;</div>
</div> </div>
</div> </div>
<div className="common-table mb10"> <div className="common-table mb10">
@ -188,8 +264,7 @@ export default function CanvasEstimate() {
<td> <td>
<div className="drag-file-box"> <div className="drag-file-box">
<div className="btn-area"> <div className="btn-area">
<label className="file-upload" htmlFor="img">ファイル選択</label> <button className="btn-origin grey">ファイル選択</button>
<input type="file" name="" id="img" style={{display: 'none'}}/>
</div> </div>
<div className="drag-file-area"> <div className="drag-file-area">
<p>Drag file here</p> <p>Drag file here</p>
@ -216,22 +291,8 @@ export default function CanvasEstimate() {
<td> <td>
<div className="drag-file-box"> <div className="drag-file-box">
<ul className="file-list"> <ul className="file-list">
<li className="file-item"> <li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
<div className="file-item-wrap"> <li className="file-item"><span>保存した添付ファイル名 <button className="delete"></button></span></li>
<span>保存した添付ファイル名 <button className="delete"></button></span>
<div className="return-wrap">
<span className="return">保存した添付ファイル名 </span><button className="return-btn"><i className="return-ico"></i>復元</button>
</div>
</div>
</li>
<li className="file-item">
<div className="file-item-wrap">
<span>保存した添付ファイル名 <button className="delete"></button></span>
<div className="return-wrap">
<span className="return">保存した添付ファイル名 </span><button className="return-btn"><i className="return-ico"></i>復元</button>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</td> </td>
@ -242,169 +303,117 @@ export default function CanvasEstimate() {
<div className="table-box-title-wrap"> <div className="table-box-title-wrap">
<div className="title-wrap"> <div className="title-wrap">
<h3 className="product">見積もりの具体的な</h3> <h3 className="product">見積もりの具体的な</h3>
<div className="estimate-check-btn"> <div className="product_tit">製品情報</div>
<button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button> </div>
<button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button> </div>
<div className="special-note-check-wrap">
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">共通 </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">積上げ(YJOD) </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch03" />
<label htmlFor="ch03">出力制御の時 (中三電以外)</label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch04" />
<label htmlFor="ch04">北面設置 </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch05" />
<label htmlFor="ch05">塩害地域 </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch06" />
<label htmlFor="ch06">積雪地域 </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch07" />
<label htmlFor="ch07">屋根材・寸法・レイアウト </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch08" />
<label htmlFor="ch08">施工関連 </label>
</div>
</div>
<div className="special-note-check-item act">
<div className="d-check-box light">
<input type="checkbox" id="ch09" />
<label htmlFor="ch09">別途費用</label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch10" />
<label htmlFor="ch10">過積載</label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch11" />
<label htmlFor="ch11">パワコン・蓄電池   PCS </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch12" />
<label htmlFor="ch12">架台</label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch13" />
<label htmlFor="ch13">Q.SUPREME </label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch14" />
<label htmlFor="ch14">HEMS</label>
</div>
</div>
<div className="special-note-check-item">
<div className="d-check-box light">
<input type="checkbox" id="ch15" />
<label htmlFor="ch15">概算見積概算見積</label>
</div> </div>
</div> </div>
</div> </div>
<div className={`estimate-check-wrap ${hidden ? 'hide':''}`}> <div className="calculation-estimate">
<div className="estimate-check-inner"> <dl>
<div className="special-note-check-wrap"> <dt>ダイドハント (D Y 4)(DY5)</dt>
<div className="special-note-check-item"> <dd>・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  </dd>
<div className="special-note-check-box"> <dd>・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 </dd>
<div className="d-check-box light"> <dd>・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  </dd>
<input type="checkbox" id="ch01" /> <dd>・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。</dd>
<label htmlFor="ch01"></label> </dl>
</div> <dl>
<span className="check-name">共通</span> <dt>ワンカチ </dt>
</div> <dd>・風速は46ｍ/sを超える地域は設置不可となります。  </dd>
</div> <dd>・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  </dd>
<div className="special-note-check-item"> <dd>・屋根材板厚は0.6㎜以上として御見積もり作成しております。</dd>
<div className="special-note-check-box"> <dd>ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、</dd>
<div className="d-check-box light"> <dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
<input type="checkbox" id="ch02" /> </dl>
<label htmlFor="ch02"></label>
</div>
<span className="check-name">積上げ(YJOD)</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch03" disabled checked/>
<label htmlFor="ch03"></label>
</div>
<span className="check-name">出力制御の時 (中三電以外)</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch04" />
<label htmlFor="ch04"></label>
</div>
<span className="check-name">北面設置</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch05" />
<label htmlFor="ch05"> </label>
</div>
<span className="check-name">塩害地域</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch06" />
<label htmlFor="ch06"> </label>
</div>
<span className="check-name">積雪地域</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch07" />
<label htmlFor="ch07"></label>
</div>
<span className="check-name">屋根材・寸法・レイアウト </span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch08" />
<label htmlFor="ch08"> </label>
</div>
<span className="check-name">施工関連</span>
</div>
</div>
<div className="special-note-check-item act">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch09" />
<label htmlFor="ch09"></label>
</div>
<span className="check-name">別途費用</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch10" />
<label htmlFor="ch10"></label>
</div>
<span className="check-name">過積載</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch11" />
<label htmlFor="ch11"></label>
</div>
<span className="check-name">パワコン・蓄電池   PCS</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch12" />
<label htmlFor="ch12"></label>
</div>
<span className="check-name">架台</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch13" />
<label htmlFor="ch13"> </label>
</div>
<span className="check-name">Q.SUPREME</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch14" />
<label htmlFor="ch14"></label>
</div>
<span className="check-name">HEMS</span>
</div>
</div>
<div className="special-note-check-item">
<div className="special-note-check-box">
<div className="d-check-box light">
<input type="checkbox" id="ch15" />
<label htmlFor="ch15"></label>
</div>
<span className="check-name">概算見積概算見積</span>
</div>
</div>
</div>
<div className="calculation-estimate">
<dl>
<dt>ダイドハント (D Y 4)(DY5)</dt>
<dd>・木製垂木の場合、幅38㎜×厚さ40㎜以上、間隔455㎜以下となります。  </dd>
<dd>・本見積は概算見積です。詳細設計時、及び構造計算時に材料等の変更の可能性があります。 </dd>
<dd>・金具が取付可能と仮定して積算しております。ご注文前に必ず現調シートをご提出頂けます様、お願い致します。  </dd>
<dd>・設置基準を満たした屋根面と仮定して積算しております。屋根材固定強度等、施工マニュアルをご参照の上、ご確認ください。</dd>
</dl>
<dl>
<dt>ワンカチ </dt>
<dd>・風速は46ｍ/sを超える地域は設置不可となります。  </dd>
<dd>・屋根材質は鋼板製（JIS A6514規格品の内）として御見積もり作成しております。  </dd>
<dd>・屋根材板厚は0.6㎜以上として御見積もり作成しております。</dd>
<dd>ピッチ外 ・若し現場で太陽電池モジュール 固定範囲から 両端の金具 がはみ出た 場合は、</dd>
<dd>弊社システム保証対象外になりますので充分 ご注意下さい 。"</dd>
</dl>
</div>
</div>
</div> </div>
<div className="table-box-title-wrap"> <div className="table-box-title-wrap">
<div className="title-wrap"> <div className="title-wrap">
@ -470,240 +479,35 @@ export default function CanvasEstimate() {
<div className="product-price-tit">価格表示</div> <div className="product-price-tit">価格表示</div>
<div className="select-wrap"> <div className="select-wrap">
<select className="select-light" name="" id="" > <select className="select-light" name="" id="" >
<option>Hanwha 매입가</option> <option>定価</option>
</select> </select>
</div> </div>
<button className="btn-origin grey ml5">Pricing</button> <button className="btn-origin grey ml5">Pricing</button>
</div> </div>
<div className="product-edit-wrap"> <div className="product-edit-wrap">
<ul className="product-edit-explane"> <div className="product-edit-explane">
<li className="explane-item item01"><span className="ico"></span>製品価格 OPEN</li> <div className="attachment-required"><span className="ico"></span>添付必須</div>
<li className="explane-item item02"><span className="ico"></span>追加, 変更資材</li> <div className="click-check"><span className="ico"></span>クリックして製品の特異性を確認する</div>
<li className="explane-item item03"><span className="ico"></span>添付必須</li> </div>
<li className="explane-item item04"><span className="ico"></span>クリックして製品の特異性を確認する</li>
</ul>
<div className="product-edit-btn"> <div className="product-edit-btn">
<button className="btn-origin navy mr5"><span className='plus'></span> 製品を追加</button> <button className="btn-origin navy mr5"><span className='plus'></span> 製品を追加</button>
<button className="btn-origin grey"><span className='minus'></span>製品削除</button> <button className="btn-origin grey"><span className='minus'></span>製品削除</button>
</div> </div>
</div> </div>
</div> </div>
<div className="esimate-table"> <div className='q-grid no-cols'>
<table> <QGrid {...gridProps}/>
<colgroup>
<col width={50}/>
<col width={100}/>
<col/>
<col width={200}/>
<col width={100}/>
<col width={100}/>
<col width={200}/>
<col width={240}/>
</colgroup>
<thead>
<tr>
<th>
<div className="d-check-box pop no-text">
<input type="checkbox" id="ch97" disabled/>
<label htmlFor="ch97"></label>
</div>
</th>
<th>アイテム</th>
<th>品番</th>
<th>型板</th>
<th>数量</th>
<th>単位</th>
<th>単価</th>
<th>金額 (税別別)</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">
<div className="d-check-box light no-text">
<input type="checkbox" id="ch98" />
<label htmlFor="ch98"></label>
</div>
</td>
<td className="al-r">100</td>
<td>
<div className="form-flex-wrap">
<div className="select-wrap mr5">
<ReactSelect/>
</div>
<div className="btn-area">
<span className="tb_ico change_check"></span>
</div>
</div>
</td>
<td>
<div className="form-flex-wrap">
<div className="name">HNW-MC4-CHN30</div>
<div className="icon-wrap">
<span className="tb_ico file_check"></span>
<button className="grid-tip"></button>
</div>
</div>
</td>
<td>
<div className="input-wrap" style={{width: '100%'}}>
<input type="text" className="input-light al-r" defaultValue={'20'}/>
</div>
</td>
<td>セット</td>
<td>
<div className="form-flex-wrap">
<div className="input-wrap mr5">
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
</div>
<div className="btn-area">
<span className="tb_ico open_check"></span>
</div>
</div>
</td>
<td className="al-r">5,561,000</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-box light no-text">
<input type="checkbox" id="ch98" />
<label htmlFor="ch98"></label>
</div>
</td>
<td className="al-r">100</td>
<td>
<div className="form-flex-wrap">
<div className="select-wrap mr5">
<ReactSelect/>
</div>
<div className="btn-area">
<span className="tb_ico change_check"></span>
</div>
</div>
</td>
<td>
<div className="form-flex-wrap">
<div className="name">HNW-MC4-CHN30</div>
<div className="icon-wrap">
<button className="grid-tip"></button>
</div>
</div>
</td>
<td>
<div className="input-wrap" style={{width: '100%'}}>
<input type="text" className="input-light al-r" defaultValue={'20'}/>
</div>
</td>
<td>セット</td>
<td>
<div className="form-flex-wrap">
<div className="input-wrap mr5">
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
</div>
<div className="btn-area">
<span className="tb_ico open_check"></span>
</div>
</div>
</td>
<td className="al-r">5,561,000</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-box light no-text">
<input type="checkbox" id="ch98" />
<label htmlFor="ch98"></label>
</div>
</td>
<td className="al-r">100</td>
<td>
<div className="form-flex-wrap">
<div className="select-wrap mr5">
<ReactSelect/>
</div>
<div className="btn-area">
<span className="tb_ico change_check"></span>
</div>
</div>
</td>
<td>
<div className="form-flex-wrap">
<div className="name">HNW-MC4-CHN30</div>
</div>
</td>
<td>
<div className="input-wrap" style={{width: '100%'}}>
<input type="text" className="input-light al-r" defaultValue={'20'}/>
</div>
</td>
<td>セット</td>
<td>
<div className="form-flex-wrap">
<div className="input-wrap mr5">
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
</div>
<div className="btn-area">
<span className="tb_ico open_check"></span>
</div>
</div>
</td>
<td className="al-r">5,561,000</td>
</tr>
<tr>
<td className="al-c">
<div className="d-check-box light no-text">
<input type="checkbox" id="ch98" />
<label htmlFor="ch98"></label>
</div>
</td>
<td className="al-r">100</td>
<td>
<div className="form-flex-wrap">
<div className="select-wrap ">
<ReactSelect/>
</div>
</div>
</td>
<td>
<div className="form-flex-wrap">
<div className="name">HNW-MC4-CHN30</div>
<div className="icon-wrap">
<span className="tb_ico file_check"></span>
</div>
</div>
</td>
<td>
<div className="input-wrap" style={{width: '100%'}}>
<input type="text" className="input-light al-r" defaultValue={'20'}/>
</div>
</td>
<td>セット</td>
<td>
<div className="form-flex-wrap">
<div className="input-wrap mr5">
<input type="text" className="input-light al-r" defaultValue={'278,050'}/>
</div>
</div>
</td>
<td className="al-r">5,561,000</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<Footer/>
{/* 제품 특이사항 */} {/* 제품 특이사항 */}
{/* <ProductFeaturesPop/> */} {/* <ProductFeaturesPop/> */}
{/* 문서 다운로드 옵션 */} {/* 문서 다운로드 옵션 */}
{/* <FileDownOptionPop/> */} {/* <FileDownOptionPop/> */}
{/* 견적복사 */}
{/* <EstimateCopyPop/> */}
</div> </div>
) )
} }

4
src/components/canvas/CanvasFrame.jsx
View File

@ -2,9 +2,7 @@
export default function CanvasFrame () { export default function CanvasFrame () {
return( return(
<div className="canvas-frame"> <div className="canvas-frame">
<div className="canvas-container" style={{position: 'relative', width: '1600px', height: '1000px'}}> <canvas></canvas>
<canvas></canvas>
</div>
</div> </div>
) )
} }

3
src/components/canvas/CanvasLayout.jsx
View File

@ -24,8 +24,7 @@ export default function CanvasLayout ({menuValue}) {
return( return(
<div className="canvas-layout"> <div className="canvas-layout">
<div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}> <div className="canvas-page-list">
<div className="canvas-id">RT01250306004</div>
<div className="canvas-plane-wrap"> <div className="canvas-plane-wrap">
{plans.map((plan, idx) => ( {plans.map((plan, idx) => (
<button <button

13
src/components/canvas/CanvasMenu.jsx
View File

@ -54,20 +54,19 @@ export default function CanvasMenu({setMenuValue}) {
<div className="canvas-side-btn-wrap"> <div className="canvas-side-btn-wrap">
{(menuNumber !== 6 && menuNumber !== 5) && {(menuNumber !== 6 && menuNumber !== 5) &&
<> <>
<div className={`vertical-horizontal ${vertical ? 'on':''}`}>
<span>垂直水平モード</span>
<button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
</div>
<div className="btn-from"> <div className="btn-from">
<button className="btn01"></button> <button className="btn01"></button>
<button className="btn02 active"></button> <button className="btn02 active"></button>
<button className="btn03 "></button> <button className="btn03 "></button>
</div> </div>
<div className={`vertical-horizontal ${vertical ? 'on':''}`}>
<span>垂直水平モード</span>
<button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
</div>
<div className="select-box"> <div className="select-box">
<Qselect title={'瓦53A'} option={SelectOption}/> <Qselect title={'瓦53A'} option={SelectOption}/>
</div> </div>
<div className="btn-from"> <div className="btn-from">
<button className="btn10"></button>
<button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button> <button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
<button className="btn05"></button> <button className="btn05"></button>
<button className="btn06"></button> <button className="btn06"></button>
@ -102,10 +101,6 @@ export default function CanvasMenu({setMenuValue}) {
<span className="ico ico04"></span> <span className="ico ico04"></span>
<span className="name">コピー</span> <span className="name">コピー</span>
</button> </button>
<button className="btn-frame gray ico-flx">
<span className="ico ico05"></span>
<span className="name">ロック解除</span>
</button>
</div> </div>
</> </>
} }

1
src/components/canvas/CanvasSimulator.jsx
View File

@ -245,6 +245,7 @@ export default function CanvasSimulator() {
</div> </div>
</div> </div>
</div> </div>
<Footer/>
</div> </div>
) )
} }

3
src/components/canvas/MenuDepth02.jsx
View File

@ -7,7 +7,8 @@ export default function MenuDepth02(){
return( return(
<div className="canvas-depth2-inner"> <div className="canvas-depth2-inner">
<ul className="canvas-depth2-list"> <ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>配置面の描画</button></li> <li className="canvas-depth2-item active"><button>傾斜設定</button></li>
<li className="canvas-depth2-item"><button>配置面の描画</button></li>
<li className="canvas-depth2-item"><button>面形状の配置</button></li> <li className="canvas-depth2-item"><button>面形状の配置</button></li>
<li className="canvas-depth2-item"><button>オブジェクトの配置</button></li> <li className="canvas-depth2-item"><button>オブジェクトの配置</button></li>
<li className="canvas-depth2-item"><button>配置面全体を削除</button></li> <li className="canvas-depth2-item"><button>配置面全体を削除</button></li>

4
src/components/canvas/MenuDepth03.jsx
View File

@ -7,8 +7,8 @@ export default function MenuDepth03(){
return( return(
<div className="canvas-depth2-inner"> <div className="canvas-depth2-inner">
<ul className="canvas-depth2-list"> <ul className="canvas-depth2-list">
<li className="canvas-depth2-item active"><button>モジュール/架台設定</button></li> <li className="canvas-depth2-item active"><button>基本設定</button></li>
<li className="canvas-depth2-item"><button>回路設定</button></li> <li className="canvas-depth2-item"><button>回路と架台の設定</button></li>
<li className="canvas-depth2-item"><button>図面方位の適用</button></li> <li className="canvas-depth2-item"><button>図面方位の適用</button></li>
</ul> </ul>
</div> </div>

51
src/components/canvas/estimatepop/EstimateCopyPop.jsx
View File

@ -1,51 +0,0 @@
import ReactSelect from "@/components/common/reactselect/ReactSelect";
export default function EstimateCopyPop(){
return(
<div className="modal-popup">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="title">見積もり </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-body-inner ">
<div className="explane">見積書をコピーする販売店を設定します。見積もりは定価でコピーされます。</div>
<div className="estimate-copy-info-wrap">
<div className="estimate-copy-info-item">
<div className="estimate-copy-info-tit">一次販売店名/ID <span className="red">*</span></div>
<div className="estimate-copy-info-box">
<div className="estimate-copy-sel">
<ReactSelect/>
</div>
<div className="estimate-copy-id">201TES01</div>
</div>
</div>
<div className="estimate-copy-info-item">
<div className="estimate-copy-info-tit">二次販売店名/ID <span className="red">*</span></div>
<div className="estimate-copy-info-box">
<div className="estimate-copy-sel">
<ReactSelect/>
</div>
<div className="estimate-copy-id">販売店ID</div>
</div>
</div>
<div className="estimate-copy-info-item">
<div className="estimate-copy-info-tit">担当者 <span className="red">*</span></div>
<div className="input-wrap">
<input type="text" className="input-light" defaultValue={'元の担当者名を表示'}/>
</div>
</div>
</div>
</div>
<div className="footer-btn-wrap">
<button className="btn-origin grey mr5">閉じる</button>
<button className="btn-origin navy ">見積もり</button>
</div>
</div>
</div>
</div>
</div>
)
}

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleCopy(){ export default function AdditionalBundleCopy(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">単コピー設定 </h1> <h1 className="title">単コピー設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、コピー方向を選択します。 間隔を設定し、コピー方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AdditionalBundleCopy(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalBundleMove(){ export default function AdditionalBundleMove(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">単移動設定 </h1> <h1 className="title">単移動設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、移動方向を選択します。 間隔を設定し、移動方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AdditionalBundleMove(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnCopy(){ export default function AdditionalColumnCopy(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">列コピーの設定 </h1> <h1 className="title">列コピーの設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、コピー方向を選択します。 間隔を設定し、コピー方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AdditionalColumnCopy(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalColumnMove(){ export default function AdditionalColumnMove(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">列移動設定 </h1> <h1 className="title">列移動設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、移動方向を選択します。 間隔を設定し、移動方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AdditionalColumnMove(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalCopy(){ export default function AdditionalCopy(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">コピー設定 </h1> <h1 className="title">コピー設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、コピー方向を選択します。 間隔を設定し、コピー方向を選択します。
</div> </div>
@ -35,7 +34,7 @@ export default function AdditionalCopy(){
<button className="btn-frame modal act">キャンセル</button> <button className="btn-frame modal act">キャンセル</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AdditionalMove.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AdditionalMove(){ export default function AdditionalMove(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">移動設定 </h1> <h1 className="title">移動設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、移動方向を選択します。 間隔を設定し、移動方向を選択します。
</div> </div>
@ -35,7 +34,7 @@ export default function AdditionalMove(){
<button className="btn-frame modal act">キャンセル</button> <button className="btn-frame modal act">キャンセル</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleCopy(){ export default function AllModuleCopy(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">モジュール一括コピー設定 </h1> <h1 className="title">モジュール一括コピー設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、コピー方向を選択します。 間隔を設定し、コピー方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AllModuleCopy(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AllModuleMove.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleMove(){ export default function AllModuleMove(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">モジュール一括移動設定 </h1> <h1 className="title">モジュール一括移動設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、移動方向を選択します。 間隔を設定し、移動方向を選択します。
</div> </div>
@ -34,7 +33,7 @@ export default function AllModuleMove(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AllModuleNumChange(){ export default function AllModuleNumChange(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">モジュール一括回路番号の変更</h1> <h1 className="title">モジュール一括回路番号の変更</h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
回路番号を入力してください。 回路番号を入力してください。
</div> </div>
@ -27,7 +26,7 @@ export default function AllModuleNumChange(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete.jsx
View File

@ -10,14 +10,13 @@ export default function AdditionalBundleDelete(){
} }
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">ただし削除 </h1> <h1 className="title">ただし削除 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">削除列をどのようにしますか？</div> <div className="setting-tit">削除列をどのようにしますか？</div>
<div className="additional-wrap"> <div className="additional-wrap">
@ -72,7 +71,7 @@ export default function AdditionalBundleDelete(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit.jsx
View File

@ -10,14 +10,13 @@ export default function AdditionalBundleEdit(){
} }
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">段挿入 </h1> <h1 className="title">段挿入 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">挿入する方向を選択してください。</div> <div className="setting-tit">挿入する方向を選択してください。</div>
<div className="additional-wrap"> <div className="additional-wrap">
@ -62,7 +61,7 @@ export default function AdditionalBundleEdit(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete.jsx
View File

@ -10,14 +10,13 @@ export default function AdditionalColumnDelete(){
} }
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">コピー設定 </h1> <h1 className="title">コピー設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">削除列をどのようにしますか？</div> <div className="setting-tit">削除列をどのようにしますか？</div>
<div className="additional-wrap"> <div className="additional-wrap">
@ -72,7 +71,7 @@ export default function AdditionalColumnDelete(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit.jsx
View File

@ -10,14 +10,13 @@ export default function AdditionalColumnEdit(){
} }
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">列の挿入 </h1> <h1 className="title">列の挿入 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
<div className="setting-tit">挿入する方向を選択してください。</div> <div className="setting-tit">挿入する方向を選択してください。</div>
<div className="additional-wrap"> <div className="additional-wrap">
@ -62,7 +61,7 @@ export default function AdditionalColumnEdit(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

12
src/components/canvas/modal/arrangementsetting/ArrangementSetting.jsx
View File

@ -9,14 +9,13 @@ import ArrangementTab05 from "./ArrangementTab05";
export default function ArrangementSetting(){ export default function ArrangementSetting(){
const [buttonAct, setButtonAct] = useState(1); const [buttonAct, setButtonAct] = useState(1);
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">配置面の描画</h1> <h1 className="title">配置面の描画</h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="modal-btn-wrap"> <div className="modal-btn-wrap">
<button <button
className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`}
@ -50,6 +49,7 @@ export default function ArrangementSetting(){
</button> </button>
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <ArrangementTab01/>} {buttonAct === 1 && <ArrangementTab01/>}
{buttonAct === 2 && <ArrangementTab02/>} {buttonAct === 2 && <ArrangementTab02/>}
{buttonAct === 3 && <ArrangementTab03/>} {buttonAct === 3 && <ArrangementTab03/>}
@ -59,10 +59,10 @@ export default function ArrangementSetting(){
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button> <button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal act">配置面確定</button> <button className="btn-frame modal act">外壁線確定</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

11
src/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption.jsx
View File

@ -18,14 +18,13 @@ export default function AuxiliarylineOption(){
const [buttonAct, setButtonAct] = useState(1); const [buttonAct, setButtonAct] = useState(1);
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">補助線の作成</h1> <h1 className="title">補助線の作成</h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="modal-btn-wrap"> <div className="modal-btn-wrap">
{buttonMenu.map((item) => ( {buttonMenu.map((item) => (
<button <button
@ -38,6 +37,7 @@ export default function AuxiliarylineOption(){
))} ))}
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <AuxiliaryTab01/>} {buttonAct === 1 && <AuxiliaryTab01/>}
{buttonAct === 2 && <AuxiliaryTab02/>} {buttonAct === 2 && <AuxiliaryTab02/>}
{buttonAct === 3 && <AuxiliaryTab03/>} {buttonAct === 3 && <AuxiliaryTab03/>}
@ -46,11 +46,10 @@ export default function AuxiliarylineOption(){
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5">一変戦に戻る</button> <button className="btn-frame modal mr5">一変戦に戻る</button>
<button className="btn-frame modal mr5">補助線切削</button>
<button className="btn-frame modal act">外壁線確定</button> <button className="btn-frame modal act">外壁線確定</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

23
src/components/canvas/modal/auxiliarysupport/AuxiliaryCopy.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryCopy(){ export default function AuxiliaryCopy(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線のコピー </h1> <h1 className="title">補助線のコピー </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
コピーする方向を入力してください コピーする方向を入力してください
</div> </div>
@ -22,29 +21,27 @@ export default function AuxiliaryCopy(){
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
</div>
</div> </div>
<div className="input-move-wrap"> <div className="input-move-wrap">
<div className="input-move"> <div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction left act"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

23
src/components/canvas/modal/auxiliarysupport/AuxiliaryMove.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliaryMove(){ export default function AuxiliaryMove(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線の移動 </h1> <h1 className="title">補助線の移動 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
移動する方向を入力してください 移動する方向を入力してください
</div> </div>
@ -22,29 +21,27 @@ export default function AuxiliaryMove(){
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
</div>
</div> </div>
<div className="input-move-wrap"> <div className="input-move-wrap">
<div className="input-move"> <div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction left act"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/auxiliarysupport/AuxiliarySize.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function AuxiliarySize(){ export default function AuxiliarySize(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線サイズ変更 </h1> <h1 className="title">補助線サイズ変更 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="discrimination-box mb10"> <div className="discrimination-box mb10">
<div className="d-check-radio pop mb10"> <div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" /> <input type="radio" name="radio01" id="ra01" />
@ -52,7 +51,7 @@ export default function AuxiliarySize(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

17
src/components/canvas/modal/circuitstandsetting/CircuitStandSetting.jsx
View File

@ -7,24 +7,25 @@ import CircuitStandTab03 from "./CircuitStandTab03";
export default function CircuitStandSetting(){ export default function CircuitStandSetting(){
const [tabNum, setTabNum] = useState(1); const [tabNum, setTabNum] = useState(1);
return( return(
<WithDraggable isShow={true} size={'l-2'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap lx-2`}>
<h1 className="title">回路設定 </h1> <div className="modal-head">
<h1 className="title">回路と架台設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div> <div className="roof-module-tab">
<div className="right-bar handle"></div>
<div className="roof-module-tab">
<div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>パワーコンディショナーを選択</div> <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act': ''}`}>パワーコンディショナーを選択</div>
<span className={`tab-arr ${ tabNum === 2 || tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act': ''}`}>回路割り当て</div>
<span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span> <span className={`tab-arr ${ tabNum === 3 ? 'act': ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>回路割当&#40;昇圧設定&#41;</div> <div className={`module-tab-bx ${tabNum === 3 ? 'act': ''}`}>昇圧設定</div>
</div> </div>
{tabNum === 1 && <CircuitStandTab01 setTabNum={setTabNum}/>} {tabNum === 1 && <CircuitStandTab01 setTabNum={setTabNum}/>}
{tabNum === 2 && <CircuitStandTab02 setTabNum={setTabNum}/>} {tabNum === 2 && <CircuitStandTab02 setTabNum={setTabNum}/>}
{tabNum === 3 && <CircuitStandTab03 setTabNum={setTabNum}/>} {tabNum === 3 && <CircuitStandTab03 setTabNum={setTabNum}/>}
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

29
src/components/canvas/modal/circuitstandsetting/CircuitStandTab01.jsx
View File

@ -16,8 +16,8 @@ export default function CircuitStandTab01({setTabNum}){
</div> </div>
<div className="module-table-box mb10"> <div className="module-table-box mb10">
<div className="module-table-inner"> <div className="module-table-inner">
<div className="circuit-check-inner overflow"> <div className="circuit-check-inner">
<div className="d-check-box pop sel"> <div className="d-check-box pop mb15 sel">
<input type="checkbox" id="ch01" /> <input type="checkbox" id="ch01" />
<label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label> <label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
</div> </div>
@ -25,14 +25,6 @@ export default function CircuitStandTab01({setTabNum}){
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label> <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
</div> </div>
<div className="d-check-box pop sel">
<input type="checkbox" id="ch03" />
<label htmlFor="ch03">屋外マルチPCS（HQJP-RA5シリーズ）</label>
</div>
<div className="d-check-box pop sel">
<input type="checkbox" id="ch04" />
<label htmlFor="ch04">屋外マルチPCS（HQJP-RA5シリーズ）</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -43,45 +35,37 @@ export default function CircuitStandTab01({setTabNum}){
<table> <table>
<thead> <thead>
<tr> <tr>
<th style={{width: '15%'}}>シリーズ</th>
<th style={{width: '15%'}}>名称</th> <th style={{width: '15%'}}>名称</th>
<th style={{width: '10%'}}>定格出力 (kW)</th> <th style={{width: '10%'}}>定格出力 (kW)</th>
<th style={{width: '10%'}}>回路数</th> <th style={{width: '10%'}}>回路数</th>
<th style={{width: '10%'}}>最大接続枚数</th> <th style={{width: '10%'}}>最大接続枚数</th>
<th style={{width: '10%'}}>過積最大枚数</th> <th style={{width: '10%'}}>過積最大枚数</th>
<th style={{width: '10%'}}>出力電流</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA30-5</td> <td>HQJP-KA30-5</td>
<td className="al-c"><span className="warning">PCSオプションマスター</span></td> <td className="al-c"><span className="warning">PCSオプションマスター</span></td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td>
</tr> </tr>
<tr className="on"> <tr className="on">
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA40-5</td> <td>HQJP-KA40-5</td>
<td className="al-r">1.00</td> <td className="al-r">1.00</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
<td className="al-c">-</td>
</tr> </tr>
<tr> <tr>
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA50-5</td> <td>HQJP-KA50-5</td>
<td className="al-r">1.00</td> <td className="al-r">1.00</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-r">2</td> <td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
</tr>
<tr>
<td>屋内PCS&#40;HQJP</td>
<td>HQJP-KA50-5</td>
<td className="al-r">1.00</td>
<td className="al-r">2</td>
<td className="al-r">2</td>
<td className="al-c">-</td> <td className="al-c">-</td>
</tr> </tr>
</tbody> </tbody>
@ -109,8 +93,7 @@ export default function CircuitStandTab01({setTabNum}){
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5 act" onClick={() => setTabNum(3)}>回路割当&#40;昇圧設定&#41;</button> <button className="btn-frame modal act" onClick={() => setTabNum(2)}>保存</button>
<button className="btn-frame modal act" onClick={() => setTabNum(2)}>手動回路構成</button>
</div> </div>
</> </>
) )

11
src/components/canvas/modal/circuitstandsetting/CircuitStandTab02.jsx
View File

@ -4,13 +4,18 @@ import CircuitStandSecondTab01 from "./circuitstandsecondtab/CircuitStandSecondT
import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02"; import CircuitStandSecondTab02 from "./circuitstandsecondtab/CircuitStandSecondTab02";
export default function CircuitStandTab02({setTabNum}){ export default function CircuitStandTab02({setTabNum}){
const [secondTab, setSecondTab] = useState(1);
return( return(
<> <>
<CircuitStandSecondTab02/> <div className="module-box-tab">
<button className={`module-btn ${secondTab === 1 ? 'act':''}`} onClick={() => setSecondTab(1)}>自動回路割り当て</button>
<button className={`module-btn ${secondTab === 2 ? 'act':''}`} onClick={() => setSecondTab(2)}>手動回路割当</button>
</div>
{secondTab === 1 && <CircuitStandSecondTab01/>}
{secondTab === 2 && <CircuitStandSecondTab02/>}
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
<button className="btn-frame modal act" onClick={() => setTabNum(3)}>回路割当&#40;昇圧設定&#41;</button> <button className="btn-frame modal act" onClick={() => setTabNum(3)}>保存</button>
</div> </div>
</> </>
) )

449
src/components/canvas/modal/circuitstandsetting/CircuitStandTab03.jsx
View File

@ -1,131 +1,398 @@
import Qselect from "@/components/common/select/Qselect"; import Qselect from "@/components/common/select/Qselect";
import { useState } from "react";
const SelectOption01 = [ const SelectOption01 = [
{name: '重要負荷接続+室内リモコン',}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'} {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
] ]
export default function CircuitStandTab03({setTabNum}){ export default function CircuitStandTab03({setTabNum}){
const [moduleTab, setModuleTab] = useState(1);
const [arrayLength, setArrayLength] = useState(3); //module-table-inner의 반복 개수
return( return(
<> <>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="circuit-title-sel"> <div className="setting-tit">昇圧設定</div>
<p className="circuit-title">モニターの選択</p> <div className="circuit-overflow">
<div className="circuit-sel-wrap"> <div className="module-table-box mb10">
<div className="grid-select mr10"> <div className="module-table-inner">
<Qselect title={'電力検出ユニット (モニター付き)'} option={SelectOption01}/> <div className="mb-box">
</div> <div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="grid-select "> <div className="roof-module-table overflow-y">
<Qselect title={'重要負荷接続+室内リモコン'} option={SelectOption01}/> <table>
</div> <thead>
</div> <tr>
</div> <th>シリアル枚数</th>
<div className="slope-wrap"> <th>総回路数</th>
<div className="circuit-overflow"> </tr>
{/* 3개일때 className = by-max */} </thead>
<div className={`module-table-box ${arrayLength === 3 ? 'by-max': ''}`}> <tbody>
{Array.from({length : arrayLength}).map((_, idx) => ( <tr>
<div key={idx} className="module-table-inner" > <td className="al-r">10</td>
<div className="mb-box"> <td className="al-r">0</td>
<div className="circuit-table-tit">HQJP-KA55-5</div> </tr>
<div className="roof-module-table overflow-y min"> <tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>シリアル枚数</th> <th style={{width: '140px'}}>名称</th>
<th>総回路数</th> <th>回路数</th>
<th>昇圧回路数</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="on"> <tr>
<td className="al-r">10</td> <td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr> <tr>
<td className="al-r">10</td> <td className="al-c">KTN-CBD4C</td>
<td className="al-r">0</td> <td className="al-r">4</td>
</tr>
<tr >
<td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
<tr> <tr>
<td className="al-r">10</td> <td className="al-c">KTN-CBD4C</td>
<td className="al-r">0</td> <td className="al-r">4</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td> <td className="al-r">0</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> <div className="bottom-wrap">
<div className="module-box-tab mb10"> <div className="circuit-right-wrap mb10">
<button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>接続する</button> <button className="btn-frame self mr5">追加</button>
<button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>昇圧オプション</button> </div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div> </div>
<div className="circuit-table-flx-wrap"> </div>
{moduleTab === 1 && <div className="circuit-table-flx-box">
<div className="circuit-table-flx-box"> <div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table min mb10"> <div className="roof-module-table mb10">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>名称</th> <th>名称</th>
<th>回路数</th> <th>昇圧回路数</th>
<th>昇圧回路数</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr>
<tr> <td className="al-c">-</td>
<td className="al-c">KTN-CBD4C</td> <td className="al-c">-</td>
<td className="al-r">4</td> </tr>
<td className="al-r">0</td> <tr>
</tr> <td className="al-c">-</td>
</tbody> <td className="al-c">-</td>
</table> </tr>
</div> </tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div> </div>
} <div className="circuit-data-form">
{moduleTab === 2 && <span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
<div className="circuit-table-flx-box">
<div className="roof-module-table min mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
} </div>
</div> </div>
</div> </div>
))} <div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box mb10">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{width: '140px'}}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
<div className="module-table-box ">
<div className="module-table-inner">
<div className="mb-box">
<div className="circuit-table-tit">HQJP-KA55-5</div>
<div className="roof-module-table overflow-y">
<table>
<thead>
<tr>
<th>シリアル枚数</th>
<th>総回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-r">10</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="circuit-table-flx-wrap">
<div className="circuit-table-flx-box">
<div className="bold-font mb10">接続する</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th style={{width: '140px'}}>名称</th>
<th>回路数</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
<tr>
<td className="al-c">KTN-CBD4C</td>
<td className="al-r">4</td>
<td className="al-r">0</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
<div className="circuit-table-flx-box">
<div className="bold-font mb10">昇圧オプション</div>
<div className="roof-module-table mb10">
<table>
<thead>
<tr>
<th>名称</th>
<th>昇圧回路数</th>
</tr>
</thead>
<tbody>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
<tr>
<td className="al-c">-</td>
<td className="al-c">-</td>
</tr>
</tbody>
</table>
</div>
<div className="bottom-wrap">
<div className="circuit-right-wrap mb10">
<button className="btn-frame self mr5">追加</button>
</div>
<div className="circuit-data-form">
<span className="normal-font">HQJP-KA40-5<button className="del"></button></span>
</div>
</div>
</div>
</div>
<div className="circuit-count-input">
<span className="normal-font">綿調道区分</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路</span>
<span className="normal-font">(二重昇圧回路数</span>
<div className="input-grid mr5" style={{width: '40px'}}>
<input type="text" className="input-origin block" />
</div>
<span className="normal-font">回路)</span>
</div>
</div>
</div>
</div>
<div className="slope-wrap">
<div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>モニターの選択</span>
<div className="grid-select mr10">
<Qselect title={'電力検出ユニット (モニター付き)'} option={SelectOption01}/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button> <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>以前</button>
<button className="btn-frame modal act">保存&#40;仮代割当&#41;</button> <button className="btn-frame modal act">保存 (仮割り当て)</button>
</div> </div>
</> </>
) )

18
src/components/canvas/modal/circuitstandsetting/circuitstandsecondtab/CircuitStandSecondTab02.jsx
View File

@ -11,7 +11,6 @@ export default function CircuitStandSecondTab02(){
<thead> <thead>
<tr> <tr>
<th>屋根面</th> <th>屋根面</th>
<th>回路</th>
<th>Q.TRON M-G2</th> <th>Q.TRON M-G2</th>
<th>発電量 (kW)</th> <th>発電量 (kW)</th>
</tr> </tr>
@ -19,31 +18,26 @@ export default function CircuitStandSecondTab02(){
<tbody> <tbody>
<tr> <tr>
<td className="al-c">M 1</td> <td className="al-c">M 1</td>
<td className="al-c">回路01</td>
<td className="al-r">8</td>
<td className="al-r">3,440</td>
</tr>
<tr className="wrong">
<td className="al-c">合計</td>
<td className="al-c">回路01</td>
<td className="al-r">8</td> <td className="al-r">8</td>
<td className="al-r">3,440</td> <td className="al-r">3,440</td>
</tr> </tr>
<tr> <tr>
<td className="al-c">合計</td> <td className="al-c">合計</td>
<td className="al-c">回路01</td>
<td className="al-r">8</td> <td className="al-r">8</td>
<td className="al-r">3,440</td> <td className="al-r">3,440</td>
</tr> </tr>
<tr> <tr>
<td className="al-c">合計</td> <td className="al-c">合計</td>
<td className="al-c">回路01</td>
<td className="al-r">8</td> <td className="al-r">8</td>
<td className="al-r">3,440</td> <td className="al-r">3,440</td>
</tr> </tr>
<tr> <tr>
<td className="al-c">合計</td> <td className="al-c">合計</td>
<td className="al-c">回路01</td> <td className="al-r">8</td>
<td className="al-r">3,440</td>
</tr>
<tr>
<td className="al-c">合計</td>
<td className="al-r">8</td> <td className="al-r">8</td>
<td className="al-r">3,440</td> <td className="al-r">3,440</td>
</tr> </tr>
@ -82,12 +76,12 @@ export default function CircuitStandSecondTab02(){
<div className="input-grid mr5" style={{width: '70px'}}> <div className="input-grid mr5" style={{width: '70px'}}>
<input type="text" className="input-origin block" /> <input type="text" className="input-origin block" />
</div> </div>
<button className="btn-frame roof">番号確定</button>
</div> </div>
</div> </div>
<div className="circuit-right-wrap"> <div className="circuit-right-wrap">
<button className="btn-frame roof mr5">選択されたパワーコンディショナーの回路番号の初期化</button> <button className="btn-frame roof mr5">選択されたパワーコンディショナーの回路番号の初期化</button>
<button className="btn-frame roof mr5">すべての回路番号の初期化</button> <button className="btn-frame roof mr5">すべての回路番号の初期化</button>
<button className="btn-frame roof">番号確定</button>
</div> </div>
</div> </div>
</div> </div>

9
src/components/canvas/modal/colorselect/ColorSelect.jsx
View File

@ -3,14 +3,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ColorSelect (){ export default function ColorSelect (){
return( return(
<WithDraggable isShow={true} size={'lr'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap lr`}>
<div className="modal-head">
<h1 className="title">カラー設定</h1> <h1 className="title">カラー設定</h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="color-setting-wrap"> <div className="color-setting-wrap">
<div className="color-tit">COLOR PICKER</div> <div className="color-tit">COLOR PICKER</div>
<div className="color-picker"> <div className="color-picker">
@ -21,7 +20,7 @@ export default function ColorSelect (){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/displaychange/DisplayChange.jsx
View File

@ -7,14 +7,13 @@ const SelectOption01 = [
export default function DisplayChange(){ export default function DisplayChange(){
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">表示の変更 </h1> <h1 className="title">表示の変更 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="guide"> <div className="guide">
寸法線に表示する数値を入力してください 寸法線に表示する数値を入力してください
</div> </div>
@ -64,7 +63,7 @@ export default function DisplayChange(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/distancemeasurement/DistanceMeasurement01.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement01(){ export default function DistanceMeasurement01(){
return( return(
<WithDraggable isShow={true} size={'xxxm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">距離測定 </h1> <h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="slope-wrap"> <div className="slope-wrap">
<div className="outline-form"> <div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>水平距離</span> <span className="mr10" style={{width: 'auto'}}>水平距離</span>
@ -23,7 +22,7 @@ export default function DistanceMeasurement01(){
<button className="btn-frame modal act">確認</button> <button className="btn-frame modal act">確認</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/distancemeasurement/DistanceMeasurement02.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement02(){ export default function DistanceMeasurement02(){
return( return(
<WithDraggable isShow={true} size={'xxxm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">距離測定 </h1> <h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="slope-wrap"> <div className="slope-wrap">
<div className="eaves-keraba-table"> <div className="eaves-keraba-table">
<div className="eaves-keraba-item"> <div className="eaves-keraba-item">
@ -58,7 +57,7 @@ export default function DistanceMeasurement02(){
<button className="btn-frame modal act">確認</button> <button className="btn-frame modal act">確認</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

9
src/components/canvas/modal/distancemeasurement/DistanceMeasurement03.jsx
View File

@ -2,14 +2,13 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function DistanceMeasurement03(){ export default function DistanceMeasurement03(){
return( return(
<WithDraggable isShow={true} size={'xxxm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">距離測定 </h1> <h1 className="title">距離測定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="slope-wrap"> <div className="slope-wrap">
<div className="outline-form"> <div className="outline-form">
<span className="mr10" style={{width: 'auto'}}>垂直距離</span> <span className="mr10" style={{width: 'auto'}}>垂直距離</span>
@ -23,7 +22,7 @@ export default function DistanceMeasurement03(){
<button className="btn-frame modal act">確認</button> <button className="btn-frame modal act">確認</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

67
src/components/canvas/modal/drawingflow/DrawingFlow.jsx
View File

@ -9,14 +9,13 @@ const SelectOption01 = [
export default function DrawingFlow(){ export default function DrawingFlow(){
const [compasDeg, setCompasDeg] = useState(0); const [compasDeg, setCompasDeg] = useState(0);
return( return(
<WithDraggable isShow={true} size={'ml'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap lx`}>
<div className="modal-head">
<h1 className="title">面フローの設定 </h1> <h1 className="title">面フローの設定 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="drawing-flow-wrap"> <div className="drawing-flow-wrap">
<div className="discrimination-box"> <div className="discrimination-box">
<div className="discrimination-tit mb15">流れ方向の設定</div> <div className="discrimination-tit mb15">流れ方向の設定</div>
@ -52,36 +51,34 @@ export default function DrawingFlow(){
<label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label> <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
</div> </div>
</div> </div>
<div className="draw-flow-wrap"> <div className="compas-box">
<div className="compas-box"> <div className="compas-box-inner">
<div className="compas-box-inner"> <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
<div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div> <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
<div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div> <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
<div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div> <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
<div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div> <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
<div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div> <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
<div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div> <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
<div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div> <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
<div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div> <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
<div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div> <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
<div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div> <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
<div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div> <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
<div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div> <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
<div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div> <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
<div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div> <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
<div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div> <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
<div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div> <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
<div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div> <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
<div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div> <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
<div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div> <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
<div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div> <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
<div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div> <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
<div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div> <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
<div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div> <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
<div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div> <div className="compas">
<div className="compas"> <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
<div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -91,7 +88,7 @@ export default function DrawingFlow(){
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

10
src/components/canvas/modal/eachpropertychange/EachPropertyChange.jsx
View File

@ -2,19 +2,19 @@ import WithDraggable from "@/components/common/draggable/withDraggable";
export default function EachPropertyChange() { export default function EachPropertyChange() {
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">各辺属性の変更 </h1> <h1 className="title">各辺属性の変更 </h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="guide"> <div className="guide">
<span className="mb10">属性を変更する辺を選択してください。</span> <span className="mb10">属性を変更する辺を選択してください。</span>
<span>選択した値 [龍丸]</span> <span>選択した値 [龍丸]</span>
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
<div className="outline-wrap"> <div className="outline-wrap">
<div className="radio-grid-wrap"> <div className="radio-grid-wrap">
<div className="d-check-radio pop"> <div className="d-check-radio pop">
@ -88,7 +88,7 @@ export default function EachPropertyChange() {
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

11
src/components/canvas/modal/eaves_keraba/EavesKerabaOption.jsx
View File

@ -16,14 +16,13 @@ export default function EvaseKerabaOption(){
const [buttonAct, setButtonAct] = useState(1); const [buttonAct, setButtonAct] = useState(1);
return( return(
<WithDraggable isShow={true} size={'r'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">軒・ケラバ変更</h1> <h1 className="title">軒・ケラバ変更</h1>
<button className="modal-close">닫기</button> <button className="modal-close">닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="modal-btn-wrap"> <div className="modal-btn-wrap">
{buttonMenu.map((item) => ( {buttonMenu.map((item) => (
<button <button
@ -36,13 +35,15 @@ export default function EvaseKerabaOption(){
))} ))}
</div> </div>
<div className="properties-setting-wrap outer"> <div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{buttonAct === 1 && <EavesKerabaTab01/>} {buttonAct === 1 && <EavesKerabaTab01/>}
{buttonAct === 2 && <EavesKerabaTab02/>} {buttonAct === 2 && <EavesKerabaTab02/>}
{buttonAct === 3 && <EavesKerabaTab03/>} {buttonAct === 3 && <EavesKerabaTab03/>}
{buttonAct === 4 && <EavesKerabaTab04/>} {buttonAct === 4 && <EavesKerabaTab04/>}
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

58
src/components/canvas/modal/font_lineoption/FontOption.jsx
View File

@ -1,58 +0,0 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
const SelectOption = [
{name: '原寸',}, {name: '原寸'}, {name: '原寸'}, {name: '原寸'}
]
export default function FontOption(){
return(
<WithDraggable isShow={true} size={'lrr'}>
<div className="modal-head handle">
<h1 className="title">フォント </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="slope-wrap">
<div className="font-option-warp">
<div className="font-option-item">
<div className="option-item-tit">文字(F)</div>
<div className="grid-select">
<Qselect title={'MS PGothic'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">フォントスタイル(Y)</div>
<div className="grid-select">
<Qselect title={'いつもの'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">サイズ(S)</div>
<div className="grid-select">
<Qselect title={'8'} option={SelectOption}/>
</div>
</div>
<div className="font-option-item">
<div className="option-item-tit">フォン</div>
<div className="grid-select">
<Qselect title={'黒'} option={SelectOption}/>
</div>
</div>
</div>
<div className="font-ex-wrap">
<div className="font-ex-tit">見る</div>
<div className="font-ex-box">
<span style={{fontSize: '72px', fontWeight: '400', color: '#101010'}}>Aaあぁアァ</span>
</div>
</div>
<div className="normal-font">ントです。プリンタと画面 でも同じフォントを使用します.</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
<div className="modal-foot handle"></div>
</WithDraggable>
)
}

51
src/components/canvas/modal/font_lineoption/LineOption.jsx
View File

@ -1,51 +0,0 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
const SelectOption = [
{name: '1',}, {name: '2'}, {name: '3'}, {name: '4'}, {name: '5'}
]
export default function LineOption(){
return(
<WithDraggable isShow={true} size={'xxm'}>
<div className="modal-head handle">
<h1 className="title">寸法線 設定 </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="font-btn-wrap">
<button className="btn-frame modal">フォント設定</button>
</div>
<div className="line-color-wrap">
<div className="outline-form mb10">
<span style={{width: 'auto'}}>寸法線の線太さ</span>
<div className="grid-select mr5">
<Qselect title={'1'} option={SelectOption}/>
</div>
<span className="thin">pixel</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>寸法線の線の色</span>
<button className="color-btn" style={{backgroundColor: "#ff0000"}}></button>
</div>
</div>
<div className="font-ex-wrap">
<div className="font-ex-tit">見る</div>
<div className="form-box">
<div className="line-form">
<div className="line-font-box">
<span className="font" style={{fontSize: "72px", fontWeight: "400"}}>9,999</span>
<span className="line" style={{backgroundColor: "#ff0000", borderColor: "#ff0000", height: "1px"}}></span>
</div>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
<div className="modal-foot handle"></div>
</WithDraggable>
)
}

36
src/components/canvas/modal/font_lineoption/ShapeSizeOption.jsx
View File

@ -1,36 +0,0 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ShapeSizeOption(){
return(
<WithDraggable isShow={true} size={'xsm'}>
<div className="modal-head handle">
<h1 className="title">図面サイズの設定</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="slope-wrap">
<div className="outline-form mb10">
<span style={{width: 'auto'}}>ガロ</span>
<div className="input-grid mr5" style={{width: '90px'}}>
<input type="text" className="input-origin block" defaultValue={1600}/>
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form">
<span style={{width: 'auto'}}>縦ロ</span>
<div className="input-grid mr5" style={{width: '90px'}}>
<input type="text" className="input-origin block" defaultValue={1600}/>
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
</div>
</div>
<div className="modal-foot handle"></div>
</WithDraggable>
)
}

9
src/components/canvas/modal/gridoption/GridCopy.jsx
View File

@ -17,14 +17,13 @@ export default function GridCopy() {
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm ${modalOption.gridcopy ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">グリッドのコピー </h1> <h1 className="title">グリッドのコピー </h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button> <button className="modal-close" onClick={HandleClickClose}>닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
間隔を設定し、コピー方向を選択します 間隔を設定し、コピー方向を選択します
</div> </div>
@ -49,7 +48,7 @@ export default function GridCopy() {
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

23
src/components/canvas/modal/gridoption/GridMove.jsx
View File

@ -17,14 +17,13 @@ export default function GridMove() {
return( return(
<WithDraggable isShow={true} size={'xm'}> <WithDraggable isShow={true}>
<div className="modal-head handle"> <div className={`modal-pop-wrap xm ${modalOption.gridmove ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
<div className="modal-head">
<h1 className="title">グリッド移動 </h1> <h1 className="title">グリッド移動 </h1>
<button className="modal-close" onClick={HandleClickClose}>닫기</button> <button className="modal-close" onClick={HandleClickClose}>닫기</button>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<div className="left-bar handle"></div>
<div className="right-bar handle"></div>
<div className="grid-option-tit"> <div className="grid-option-tit">
移動する方向を入力してください 移動する方向を入力してください
</div> </div>
@ -41,29 +40,27 @@ export default function GridMove() {
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
</div>
</div> </div>
<div className="input-move-wrap"> <div className="input-move-wrap">
<div className="input-move"> <div className="input-move">
<input type="text" className="input-origin" defaultValue={910}/> <input type="text" className="input-origin" defaultValue={910}/>
</div> </div>
<span>mm</span> <span>mm</span>
<div className="direction-move-wrap">
<button className="direction left act"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="direction-move-wrap">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button> <button className="btn-frame modal act">保存</button>
</div> </div>
</div> </div>
<div className="modal-foot handle"></div> </div>
</WithDraggable> </WithDraggable>
) )
} }

Some files were not shown because too many files have changed in this diff Show More