Merge remote-tracking branch 'origin/main-demo' into decal-list
This commit is contained in:
353
app/src/components/icons/AssetTypeIcons.tsx
Normal file
353
app/src/components/icons/AssetTypeIcons.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
export const ForkLiftIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_6014_655)">
|
||||
<g filter="url(#filter0_f_6014_655)">
|
||||
<path
|
||||
d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_f_6014_655"
|
||||
x="2.14674"
|
||||
y="4.11427"
|
||||
width="17"
|
||||
height="11.7715"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="BackgroundImageFix"
|
||||
result="shape"
|
||||
/>
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.233881"
|
||||
result="effect1_foregroundBlur_6014_655"
|
||||
/>
|
||||
</filter>
|
||||
<clipPath id="clip0_6014_655">
|
||||
<rect
|
||||
width="18.7105"
|
||||
height="18.7105"
|
||||
fill="white"
|
||||
transform="translate(0.644775 0.644531)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ConveyorIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_352_182)">
|
||||
<path
|
||||
d="M8.16336 9.72707H8.82742C8.80273 9.66301 8.7893 9.59363 8.7893 9.52144V6.32707C8.7893 6.1677 8.85492 6.02238 8.95961 5.91738C9.06586 5.8127 9.21086 5.74707 9.3693 5.74707H12.8659C13.0255 5.74707 13.1705 5.81238 13.2755 5.91738C13.3805 6.02238 13.4455 6.16707 13.4455 6.32707V9.52144C13.4455 9.59363 13.4321 9.66301 13.4074 9.72707H15.918C16.4902 9.72707 17.0105 9.96113 17.3874 10.3377C17.764 10.7146 17.998 11.2349 17.998 11.8071C17.998 12.3793 17.764 12.8996 17.3871 13.2761C17.0105 13.653 16.4896 13.8874 15.918 13.8874H4.07836C3.50617 13.8874 2.98586 13.6533 2.60867 13.2761C2.23211 12.8996 1.99805 12.3793 1.99805 11.8071C1.99805 11.2361 2.23242 10.7158 2.60961 10.3383C2.8793 10.0677 3.22305 9.87082 3.60742 9.78113C3.56655 9.70067 3.54524 9.61169 3.54523 9.52144V6.32707C3.54523 6.1677 3.61086 6.02238 3.71555 5.91738C3.82148 5.8127 3.9668 5.74707 4.12492 5.74707H7.6218C7.78148 5.74707 7.92617 5.81238 8.03117 5.91738C8.13617 6.02238 8.20148 6.16707 8.20148 6.32707V9.52144C8.20148 9.59363 8.18805 9.66301 8.16336 9.72707ZM15.6268 6.7652L16.823 7.89488L15.5705 9.08207L15.183 8.67488L15.6805 8.20363L14.1824 8.20582V7.64426L15.7365 7.64207L15.2415 7.17457L15.6268 6.7652ZM5.28961 6.6077H6.46648L6.48617 8.05176L5.8543 7.66645L5.26117 8.04238L5.28961 6.6077ZM7.6218 6.2402H4.12492C4.10117 6.2402 4.0793 6.24988 4.06367 6.26551C4.04762 6.282 4.03856 6.30406 4.03836 6.32707V9.52144C4.03836 9.54551 4.04773 9.56738 4.06305 9.58269C4.07961 9.59832 4.10117 9.60801 4.12492 9.60801H7.6218C7.64492 9.60801 7.6668 9.59801 7.68273 9.58238C7.69836 9.56644 7.70836 9.54457 7.70836 9.52144V6.32707C7.70836 6.30301 7.69867 6.28145 7.68305 6.26582C7.66742 6.24988 7.64555 6.2402 7.6218 6.2402ZM10.5334 6.6077H11.7102L11.7299 8.05176L11.098 7.66645L10.5046 8.04238L10.5334 6.6077ZM12.8659 6.2402H9.3693C9.34523 6.2402 9.32336 6.24988 9.30773 6.26551C9.29169 6.282 9.28262 6.30406 9.28242 6.32707V9.52144C9.28242 9.54551 9.29211 9.56738 9.30711 9.58269C9.32367 9.59832 9.34523 9.60801 9.3693 9.60801H12.8659C12.889 9.60801 12.9109 9.59801 12.9268 9.58238C12.9424 9.56644 12.9524 9.54457 12.9524 9.52144V6.32707C12.9524 6.30301 12.9427 6.28145 12.9271 6.26582C12.9115 6.24988 12.8896 6.2402 12.8659 6.2402ZM14.7877 11.0064C15.2299 11.0064 15.5887 11.3649 15.5887 11.8071C15.5887 12.2493 15.2299 12.608 14.7877 12.608C14.3455 12.608 13.9871 12.2493 13.9871 11.8071C13.9871 11.3649 14.3455 11.0064 14.7877 11.0064ZM11.5946 11.0064C12.0368 11.0064 12.3952 11.3649 12.3952 11.8071C12.3952 12.2493 12.0368 12.608 11.5946 12.608C11.1521 12.608 10.7937 12.2493 10.7937 11.8071C10.7937 11.3649 11.1521 11.0064 11.5946 11.0064ZM8.40148 11.0064C8.84367 11.0064 9.20242 11.3649 9.20242 11.8071C9.20242 12.2493 8.84367 12.608 8.40148 12.608C7.9593 12.608 7.60086 12.2493 7.60086 11.8071C7.60086 11.3649 7.9593 11.0064 8.40148 11.0064ZM5.20836 11.0064C5.65055 11.0064 6.0093 11.3649 6.0093 11.8071C6.0093 12.2493 5.65055 12.608 5.20836 12.608C4.76617 12.608 4.40742 12.2493 4.40742 11.8071C4.40742 11.3649 4.76617 11.0064 5.20836 11.0064ZM15.918 10.3608H4.07836C3.68086 10.3608 3.3193 10.5239 3.05711 10.7861C2.7943 11.0474 2.63211 11.4089 2.63211 11.8071C2.63211 12.2043 2.79492 12.5661 3.05711 12.828C3.3193 13.0905 3.68117 13.2533 4.07836 13.2533H15.918C16.3149 13.2533 16.6768 13.0902 16.939 12.828C17.2012 12.5658 17.3643 12.2043 17.3643 11.8071C17.3643 11.4099 17.2012 11.0483 16.939 10.7861C16.6768 10.5239 16.3152 10.3608 15.918 10.3608Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.2334 9.76172L9.15527 6.13672H13.1396V9.76172H9.2334Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M3.9209 9.76172L3.84277 6.13672H7.82715V9.76172H3.9209Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.7178 6.60645H10.5303L10.499 8.05957L11.0928 7.66895L11.7334 8.05957L11.7178 6.60645Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M6.43555 6.60645H5.24805L5.2168 8.05957L5.81055 7.66895L6.45117 8.05957L6.43555 6.60645Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_352_182">
|
||||
<rect
|
||||
width="16"
|
||||
height="8.14031"
|
||||
fill="white"
|
||||
transform="translate(1.99902 5.74707)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const RoboticArmIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.9796 9.68306L10.6387 7.13761L12.5478 5.22852L15.2523 8.25124L13.9796 9.68306Z"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="3.07955"
|
||||
y="15.1713"
|
||||
width="9.06818"
|
||||
height="2.06818"
|
||||
rx="0.238636"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
/>
|
||||
<rect
|
||||
x="4.59277"
|
||||
y="10.9551"
|
||||
width="2.86364"
|
||||
height="4.13636"
|
||||
fill="white"
|
||||
/>
|
||||
<rect
|
||||
x="5.22656"
|
||||
y="12.5459"
|
||||
width="0.636364"
|
||||
height="2.22727"
|
||||
rx="0.318182"
|
||||
fill="#494949"
|
||||
/>
|
||||
<rect
|
||||
x="11.2617"
|
||||
y="16.0898"
|
||||
width="0.636364"
|
||||
height="2.22727"
|
||||
rx="0.318182"
|
||||
transform="rotate(88.7682 11.2617 16.0898)"
|
||||
fill="#494949"
|
||||
/>
|
||||
<rect
|
||||
x="5.71387"
|
||||
y="8.08301"
|
||||
width="4.85107"
|
||||
height="2.86364"
|
||||
transform="rotate(-46.048 5.71387 8.08301)"
|
||||
fill="white"
|
||||
/>
|
||||
<circle
|
||||
cx="6.02326"
|
||||
cy="10.161"
|
||||
r="1.98864"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
/>
|
||||
<circle
|
||||
cx="10.4764"
|
||||
cy="5.06916"
|
||||
r="1.98864"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
/>
|
||||
<circle cx="6.02379" cy="10.1615" r="1.11364" fill="#494949" />
|
||||
<circle cx="10.4769" cy="5.06871" r="1.11364" fill="#494949" />
|
||||
<path
|
||||
d="M14.9316 8.17188C15.5026 8.17188 15.9656 8.63511 15.9658 9.20605V10.2402H13.8975V9.20605C13.8977 8.63522 14.3608 8.17207 14.9316 8.17188Z"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
/>
|
||||
<path
|
||||
d="M14.4561 10.1602H15.7295C16.3442 10.1604 16.8426 10.6587 16.8428 11.2734V13.291C16.8427 13.4108 16.7153 13.4875 16.6094 13.4316L15.834 13.0215V11.6855C15.8338 11.4222 15.6208 11.2092 15.3574 11.209H14.8799C14.6164 11.209 14.4025 11.4221 14.4023 11.6855V13.0205L13.5742 13.4424C13.4684 13.4963 13.3428 13.4186 13.3428 13.2998V11.2734C13.3429 10.6586 13.8412 10.1603 14.4561 10.1602Z"
|
||||
stroke="white"
|
||||
stroke-width="0.318182"
|
||||
/>
|
||||
<rect
|
||||
x="8.43457"
|
||||
y="6.18359"
|
||||
width="0.636364"
|
||||
height="2.22727"
|
||||
rx="0.318182"
|
||||
transform="rotate(46.5101 8.43457 6.18359)"
|
||||
fill="#494949"
|
||||
/>
|
||||
<rect
|
||||
x="14.0859"
|
||||
y="7.48438"
|
||||
width="0.636364"
|
||||
height="1.34988"
|
||||
rx="0.318182"
|
||||
transform="rotate(131.749 14.0859 7.48438)"
|
||||
fill="#494949"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const MachineIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="21"
|
||||
height="20"
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.9369 3.38379V5.39368H10.7644V4.55635H9.5918V3.38379H11.9369Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M8.07979 12.0938H6.90723V16.2816H8.07979V12.0938Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M5.90694 12.0938H4.73438V16.2816H5.90694V12.0938Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.59346 4.55635V5.8964H8.4209V3.38379H9.59346V4.55635Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M6.40843 5.89694C6.96354 5.89694 7.41354 5.44693 7.41354 4.89183C7.41354 4.33672 6.96354 3.88672 6.40843 3.88672C5.85332 3.88672 5.40332 4.33672 5.40332 4.89183C5.40332 5.44693 5.85332 5.89694 6.40843 5.89694Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.418 5.08984V4.08984"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.7646 7.9055L10.9324 6.90039H12.2724L12.4399 7.9055H13.1097V9.91539H10.0947V7.9055H10.7646Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.7864 5.39258H13.7812V6.73295H14.7864V5.39258Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path d="M16.6304 16.2832H15.29V17.4558H16.6304V16.2832Z" fill="white" />
|
||||
<path
|
||||
d="M7.58266 16.2832V17.4558H4.23242V16.2832H4.73481H5.90737H7.07994H7.58266Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path d="M14.7864 13.9365H8.4209V15.1091H14.7864V13.9365Z" fill="white" />
|
||||
<path
|
||||
d="M7.08048 10.585V12.0925H5.90791H4.73535V10.585H7.08048Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M14.7862 11.2557H8.42069V13.9358V15.1083V16.2809H7.58337H7.08065V12.093V10.5855H4.73552V12.093V16.2809H4.23313H3.39551V7.23531H4.40059H8.42069V9.91537H10.096H13.1109H14.7862V6.73292V5.39258H17.1314V16.2809H16.629H15.2886H14.7862V15.1083V13.9358V11.2557Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M8.42343 5.89613V7.23615H4.40332V2.5459H8.4234V3.38355L8.42343 5.89613ZM7.41865 4.89102C7.41865 4.33596 6.96861 3.88591 6.41354 3.88591C5.85847 3.88591 5.40843 4.33596 5.40843 4.89102C5.40843 5.44609 5.85847 5.89613 6.41354 5.89613C6.96861 5.89613 7.41865 5.44609 7.41865 4.89102Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M7.41862 8.15625H4.40332V8.65963H7.41862V8.15625Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M7.41862 9.16211H4.40332V9.66549H7.41862V9.16211Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M6.41496 3.63379C5.722 3.63379 5.1582 4.19758 5.1582 4.89057C5.1582 5.58356 5.722 6.14736 6.41496 6.14736C7.10795 6.14736 7.67174 5.58356 7.67174 4.89057C7.67174 4.19758 7.10798 3.63379 6.41496 3.63379ZM6.41496 5.64401C5.99953 5.64401 5.66159 5.30603 5.66159 4.8906C5.66159 4.47518 5.99953 4.1372 6.41496 4.1372C6.83039 4.1372 7.16836 4.47518 7.16836 4.8906C7.16836 5.30603 6.83039 5.64401 6.41496 5.64401Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M6.74732 4.63965H6.07715V5.14303H6.74732V4.63965Z"
|
||||
fill="#494949"
|
||||
/>
|
||||
<path
|
||||
d="M8.91992 5.08984V4.08984"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.3857 9.08984H10.8857"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.9199 6.09082V12.5908"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
type TypeBasedAssetIconsProps = {
|
||||
assetType: string;
|
||||
};
|
||||
|
||||
export function TypeBasedAssetIcons({ assetType }: TypeBasedAssetIconsProps) {
|
||||
console.log("assetType: ", assetType);
|
||||
return (
|
||||
<div>
|
||||
{assetType === "machine" && <MachineIcon />}
|
||||
{assetType === "vehicle" && <ForkLiftIcon />}
|
||||
{assetType === "transfer" && <ConveyorIcon />}
|
||||
{assetType === "roboticArm" && <RoboticArmIcon />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1697,93 +1697,6 @@ export const TargetIcon = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const ForkLiftIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_6014_655)">
|
||||
<g filter="url(#filter0_f_6014_655)">
|
||||
<path
|
||||
d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="M4.97826 12.4473C4.1581 12.4473 3.49243 13.112 3.49243 13.9331C3.49243 14.753 4.15813 15.4177 4.97826 15.4177C5.79818 15.4177 6.46284 14.753 6.46284 13.9331C6.46284 13.1119 5.79815 12.4473 4.97826 12.4473ZM4.97826 14.4544C4.69055 14.4544 4.45567 14.2208 4.45567 13.9331C4.45567 13.6454 4.69052 13.4105 4.97826 13.4105C5.26573 13.4105 5.49957 13.6454 5.49957 13.9331C5.49957 14.2208 5.26573 14.4544 4.97826 14.4544Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M11.3257 5.81717C11.1156 5.08596 10.4467 4.58203 9.6857 4.58203H5.20523C4.84291 4.58203 4.5491 4.87583 4.5491 5.23816V9.41249H4.07715C3.26935 9.41249 2.6145 10.0673 2.6145 10.8751V13.4258H2.88458C3.11388 12.4815 3.96429 11.7774 4.9782 11.7774C5.99161 11.7774 6.84123 12.4815 7.07052 13.4258H8.05798C8.13812 12.1123 9.22862 11.0679 10.5618 11.0679C11.2884 11.0679 11.9421 11.3804 12.4009 11.876V11.7487V10.3279C12.4009 9.8179 12.3293 9.31021 12.1885 8.82012L11.3257 5.81717ZM10.1793 8.21563L9.49446 8.6286L10.5313 10.6025H8.67763L7.81739 9.41249H6.07579V5.66572H9.6857C9.96187 5.66572 10.208 5.85115 10.2844 6.1165L11.1471 9.11919C11.2058 9.32329 11.2487 9.53116 11.2769 9.74131L10.1793 8.21563Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M10.5616 11.7383C9.54538 11.7383 8.7207 12.5617 8.7207 13.5792C8.7207 14.5948 9.54538 15.4183 10.5616 15.4183C11.5772 15.4183 12.4007 14.5948 12.4007 13.5792C12.4007 12.5617 11.5772 11.7383 10.5616 11.7383ZM10.5616 14.225C10.2051 14.225 9.91402 13.9357 9.91402 13.5792C9.91402 13.2226 10.2051 12.9316 10.5616 12.9316C10.9176 12.9316 11.2074 13.2226 11.2074 13.5792C11.2074 13.9357 10.9176 14.225 10.5616 14.225Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.8484 14.1482C14.3396 14.1482 13.9269 13.7355 13.9269 13.2268V4.58203H12.7197V15.0314H18.679V14.1482H14.8484Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M9.85501 7.42463L8.88497 8.09259C8.78745 8.15961 8.76301 8.2929 8.83003 8.39041C8.89704 8.48768 9.03033 8.51237 9.12785 8.44535L10.0979 7.77714C10.1954 7.71012 10.2199 7.57681 10.1529 7.47957C10.0858 7.38206 9.95231 7.35733 9.85501 7.42463Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_f_6014_655"
|
||||
x="2.14674"
|
||||
y="4.11427"
|
||||
width="17"
|
||||
height="11.7715"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="BackgroundImageFix"
|
||||
result="shape"
|
||||
/>
|
||||
<feGaussianBlur
|
||||
stdDeviation="0.233881"
|
||||
result="effect1_foregroundBlur_6014_655"
|
||||
/>
|
||||
</filter>
|
||||
<clipPath id="clip0_6014_655">
|
||||
<rect
|
||||
width="18.7105"
|
||||
height="18.7105"
|
||||
fill="white"
|
||||
transform="translate(0.644775 0.644531)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export const RightHalfFillCircleIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
|
||||
@@ -2,7 +2,11 @@ import React, { useEffect, useState } from "react";
|
||||
import Search from "../../ui/inputs/Search";
|
||||
import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
|
||||
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
|
||||
import { useDecalStore, useSelectedItem } from "../../../store/builder/store";
|
||||
import {
|
||||
useDecalStore,
|
||||
useDroppedDecal,
|
||||
useSelectedItem,
|
||||
} from "../../../store/builder/store";
|
||||
|
||||
// images -------------------
|
||||
import vehicle from "../../../assets/image/categories/vehicles.png";
|
||||
@@ -17,11 +21,11 @@ import decal from "../../../assets/image/categories/decal.png";
|
||||
import SkeletonUI from "../../templates/SkeletonUI";
|
||||
import {
|
||||
AlertIcon,
|
||||
ArrowIcon,
|
||||
DecalInfoIcon,
|
||||
HangTagIcon,
|
||||
NavigationIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { assert } from "console";
|
||||
import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
|
||||
// -------------------------------------
|
||||
|
||||
@@ -46,6 +50,7 @@ interface CategoryListProp {
|
||||
}
|
||||
const Assets: React.FC = () => {
|
||||
const { setSelectedItem } = useSelectedItem();
|
||||
const { setDroppedDecal } = useDroppedDecal();
|
||||
const [searchValue, setSearchValue] = useState<string>("");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
|
||||
@@ -146,7 +151,12 @@ const Assets: React.FC = () => {
|
||||
echo.error("failed to fetch assets");
|
||||
setisLoading(false);
|
||||
}
|
||||
|
||||
if (asset === "Decals") {
|
||||
fetchCategoryDecals("Safety");
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCategoryDecals = async (asset: any) => {
|
||||
setisLoading(true);
|
||||
// setSelectedCategory(asset);
|
||||
@@ -185,7 +195,10 @@ const Assets: React.FC = () => {
|
||||
<div className="assets-result">
|
||||
<div className="assets-wrapper">
|
||||
<div className="searched-content">
|
||||
<p>Results for {searchValue}</p>
|
||||
<p>
|
||||
Results for{" "}
|
||||
<span className="search-for">'{searchValue}'</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="assets-container">
|
||||
{selectedCategory == "Decals" ? (
|
||||
@@ -291,7 +304,7 @@ const Assets: React.FC = () => {
|
||||
if (selectedCategory) {
|
||||
return (
|
||||
<div className="assets-wrapper">
|
||||
<h2>
|
||||
<h2 className="header">
|
||||
{selectedCategory}
|
||||
<button
|
||||
className="back-button"
|
||||
@@ -302,7 +315,10 @@ const Assets: React.FC = () => {
|
||||
setCategoryAssets([]);
|
||||
}}
|
||||
>
|
||||
← Back
|
||||
<div className="back-arrow">
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
Back
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
@@ -327,7 +343,6 @@ const Assets: React.FC = () => {
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedCategory !== "Decals" && !selectedSubCategory ? (
|
||||
<div className="assets-container">
|
||||
{categoryAssets?.map((asset: any, index: number) => (
|
||||
@@ -386,15 +401,11 @@ const Assets: React.FC = () => {
|
||||
alt={asset.decalName}
|
||||
className="asset-image"
|
||||
onPointerDown={() => {
|
||||
setSelectedItem({
|
||||
name: asset.decalName,
|
||||
id: asset.id,
|
||||
type:
|
||||
asset.type === "undefined"
|
||||
? undefined
|
||||
: asset.type,
|
||||
setDroppedDecal({
|
||||
category: asset.category,
|
||||
// subType: asset.subType,
|
||||
decalName: asset.decalName,
|
||||
decalImage: asset.decalImage,
|
||||
decalId: asset.id,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
@@ -423,7 +434,7 @@ const Assets: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="assets-wrapper">
|
||||
<h2>Categories</h2>
|
||||
<h2 className="categories-header">Categories</h2>
|
||||
<div className="categories-container">
|
||||
{Array.from(
|
||||
new Set(categoryList.map((asset) => asset.category))
|
||||
|
||||
@@ -1,29 +1,13 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Header from "./Header";
|
||||
import useModuleStore, {
|
||||
useSubModuleStore,
|
||||
} from "../../../store/useModuleStore";
|
||||
import {
|
||||
AnalysisIcon,
|
||||
FilePackageIcon,
|
||||
MechanicsIcon,
|
||||
PropertiesIcon,
|
||||
SimulationIcon,
|
||||
} from "../../icons/SimulationIcons";
|
||||
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
|
||||
import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon, } from "../../icons/SimulationIcons";
|
||||
import { useToggleStore } from "../../../store/useUIToggleStore";
|
||||
import Visualization from "./visualization/Visualization";
|
||||
import Analysis from "./analysis/Analysis";
|
||||
import Simulations from "./simulation/Simulations";
|
||||
import useVersionHistoryVisibleStore, {
|
||||
useDecalStore,
|
||||
useSaveVersion,
|
||||
useSelectedFloorItem,
|
||||
useToolMode,
|
||||
} from "../../../store/builder/store";
|
||||
import {
|
||||
useSelectedEventData,
|
||||
useSelectedEventSphere,
|
||||
} from "../../../store/simulation/useSimulationStore";
|
||||
import useVersionHistoryVisibleStore, { useSaveVersion, useSelectedFloorItem, useToolMode } from "../../../store/builder/store";
|
||||
import { useSelectedEventData, useSelectedEventSphere, } from "../../../store/simulation/useSimulationStore";
|
||||
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
||||
import GlobalProperties from "./properties/GlobalProperties";
|
||||
import AssetProperties from "./properties/AssetProperties";
|
||||
@@ -35,319 +19,281 @@ import WallProperties from "./properties/WallProperties";
|
||||
import FloorProperties from "./properties/FloorProperties";
|
||||
import SelectedWallProperties from "./properties/SelectedWallProperties";
|
||||
import SelectedFloorProperties from "./properties/SelectedFloorProperties";
|
||||
import SelectedDecalProperties from "./properties/SelectedDecalProperties";
|
||||
import SelectedAisleProperties from "./properties/SelectedAisleProperties";
|
||||
import ResourceManagement from "./resourceManagement/ResourceManagement";
|
||||
import DecalProperties from "./properties/DecalProperties";
|
||||
|
||||
type DisplayComponent =
|
||||
| "versionHistory"
|
||||
| "globalProperties"
|
||||
| "aisleProperties"
|
||||
| "wallProperties"
|
||||
| "floorProperties"
|
||||
| "assetProperties"
|
||||
| "selectedWallProperties"
|
||||
| "selectedFloorProperties"
|
||||
| "zoneProperties"
|
||||
| "simulations"
|
||||
| "mechanics"
|
||||
| "analysis"
|
||||
| "visualization"
|
||||
| "selectedDecalProperties"
|
||||
| "resourceManagement"
|
||||
| "none";
|
||||
| "versionHistory"
|
||||
| "globalProperties"
|
||||
| "aisleProperties"
|
||||
| "wallProperties"
|
||||
| "floorProperties"
|
||||
| "assetProperties"
|
||||
| "selectedWallProperties"
|
||||
| "selectedFloorProperties"
|
||||
| "selectedDecalProperties"
|
||||
| "selectedAisleProperties"
|
||||
| "zoneProperties"
|
||||
| "simulations"
|
||||
| "mechanics"
|
||||
| "analysis"
|
||||
| "visualization"
|
||||
| "resourceManagement"
|
||||
| "none";
|
||||
|
||||
const SideBarRight: React.FC = () => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const { toggleUIRight } = useToggleStore();
|
||||
const { toolMode } = useToolMode();
|
||||
const { subModule, setSubModule } = useSubModuleStore();
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { viewVersionHistory, setVersionHistoryVisible } =
|
||||
useVersionHistoryVisibleStore();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
const { selectedSubCategory } = useDecalStore();
|
||||
const { selectedDecal } = useBuilderStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { toggleUIRight } = useToggleStore();
|
||||
const { toolMode } = useToolMode();
|
||||
const { subModule, setSubModule } = useSubModuleStore();
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { selectedEventSphere } = useSelectedEventSphere();
|
||||
const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
|
||||
const [displayComponent, setDisplayComponent] =
|
||||
useState<DisplayComponent>("none");
|
||||
const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
|
||||
|
||||
useEffect(() => {
|
||||
if (activeModule !== "simulation") setSubModule("properties");
|
||||
if (activeModule === "simulation") setSubModule("simulations");
|
||||
}, [activeModule, setSubModule]);
|
||||
useEffect(() => {
|
||||
if (activeModule !== "simulation") setSubModule("properties");
|
||||
if (activeModule === "simulation") setSubModule("simulations");
|
||||
}, [activeModule, setSubModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
activeModule !== "mechanics" &&
|
||||
selectedEventData &&
|
||||
selectedEventSphere
|
||||
) {
|
||||
setSubModule("mechanics");
|
||||
} else if (!selectedEventData && !selectedEventSphere) {
|
||||
if (activeModule === "simulation") {
|
||||
setSubModule("simulations");
|
||||
}
|
||||
}
|
||||
if (activeModule !== "simulation") {
|
||||
setSubModule("properties");
|
||||
}
|
||||
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeModule === "visualization") {
|
||||
setDisplayComponent("visualization");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isVersionSaved && activeModule === "simulation") {
|
||||
if (subModule === "simulations") {
|
||||
setDisplayComponent("simulations");
|
||||
return;
|
||||
}
|
||||
if (subModule === "mechanics") {
|
||||
setDisplayComponent("mechanics");
|
||||
return;
|
||||
}
|
||||
if (subModule === "analysis") {
|
||||
setDisplayComponent("analysis");
|
||||
return;
|
||||
}
|
||||
if (subModule === "resourceManagement") {
|
||||
setDisplayComponent("resourceManagement");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (activeModule === "simulation" || activeModule === "builder") {
|
||||
if (subModule === "resourceManagement") {
|
||||
setDisplayComponent("resourceManagement");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (subModule === "properties" && activeModule !== "visualization") {
|
||||
if (selectedFloorItem) {
|
||||
setDisplayComponent("assetProperties");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!selectedFloorItem &&
|
||||
!selectedFloor &&
|
||||
!selectedAisle &&
|
||||
selectedWall
|
||||
) {
|
||||
setDisplayComponent("selectedWallProperties");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!selectedFloorItem &&
|
||||
!selectedWall &&
|
||||
!selectedAisle &&
|
||||
selectedFloor
|
||||
) {
|
||||
setDisplayComponent("selectedFloorProperties");
|
||||
return;
|
||||
}
|
||||
if (viewVersionHistory) {
|
||||
setDisplayComponent("versionHistory");
|
||||
return;
|
||||
}
|
||||
if (selectedSubCategory) {
|
||||
setDisplayComponent("selectedDecalProperties");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!selectedFloorItem &&
|
||||
!selectedFloor &&
|
||||
!selectedWall &&
|
||||
!selectedSubCategory
|
||||
) {
|
||||
if (toolMode === "Aisle") {
|
||||
setDisplayComponent("aisleProperties");
|
||||
return;
|
||||
useEffect(() => {
|
||||
if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
|
||||
setSubModule("mechanics");
|
||||
} else if (!selectedEventData && !selectedEventSphere) {
|
||||
if (activeModule === "simulation") {
|
||||
setSubModule("simulations");
|
||||
}
|
||||
}
|
||||
if (toolMode === "Wall") {
|
||||
setDisplayComponent("wallProperties");
|
||||
return;
|
||||
if (activeModule !== "simulation") {
|
||||
setSubModule("properties");
|
||||
}
|
||||
if (toolMode === "Floor") {
|
||||
setDisplayComponent("floorProperties");
|
||||
return;
|
||||
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeModule === "visualization") {
|
||||
setDisplayComponent("visualization");
|
||||
return;
|
||||
}
|
||||
setDisplayComponent("globalProperties");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
subModule === "zoneProperties" &&
|
||||
(activeModule === "builder" || activeModule === "simulation")
|
||||
) {
|
||||
setDisplayComponent("zoneProperties");
|
||||
return;
|
||||
}
|
||||
if (!isVersionSaved && activeModule === "simulation") {
|
||||
if (subModule === "simulations") {
|
||||
setDisplayComponent("simulations");
|
||||
return;
|
||||
}
|
||||
if (subModule === "mechanics") {
|
||||
setDisplayComponent("mechanics");
|
||||
return;
|
||||
}
|
||||
if (subModule === "analysis") {
|
||||
setDisplayComponent("analysis");
|
||||
return;
|
||||
}
|
||||
if (subModule === "resourceManagement") {
|
||||
setDisplayComponent("resourceManagement");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setDisplayComponent("none");
|
||||
}, [
|
||||
viewVersionHistory,
|
||||
activeModule,
|
||||
subModule,
|
||||
isVersionSaved,
|
||||
selectedFloorItem,
|
||||
selectedWall,
|
||||
selectedFloor,
|
||||
selectedAisle,
|
||||
toolMode,
|
||||
selectedSubCategory,
|
||||
]);
|
||||
if (activeModule === "simulation" || activeModule === "builder") {
|
||||
if (subModule === "resourceManagement") {
|
||||
setDisplayComponent("resourceManagement");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const renderComponent = () => {
|
||||
switch (displayComponent) {
|
||||
case "versionHistory":
|
||||
return <VersionHistory />;
|
||||
case "globalProperties":
|
||||
return <GlobalProperties />;
|
||||
case "aisleProperties":
|
||||
return <AisleProperties />;
|
||||
case "wallProperties":
|
||||
return <WallProperties />;
|
||||
case "floorProperties":
|
||||
return <FloorProperties />;
|
||||
case "assetProperties":
|
||||
return <AssetProperties />;
|
||||
case "selectedWallProperties":
|
||||
return <SelectedWallProperties />;
|
||||
case "selectedFloorProperties":
|
||||
return <SelectedFloorProperties />;
|
||||
case "zoneProperties":
|
||||
return <ZoneProperties />;
|
||||
case "simulations":
|
||||
return <Simulations />;
|
||||
case "mechanics":
|
||||
return <EventProperties />;
|
||||
case "analysis":
|
||||
return <Analysis />;
|
||||
case "visualization":
|
||||
return <Visualization />;
|
||||
case "selectedDecalProperties":
|
||||
return <DecalProperties />;
|
||||
case "resourceManagement":
|
||||
return <ResourceManagement />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
if (subModule === "properties" && activeModule !== "visualization") {
|
||||
if (selectedFloorItem) {
|
||||
setDisplayComponent("assetProperties");
|
||||
return;
|
||||
}
|
||||
if (!selectedFloorItem && !selectedFloor && !selectedAisle && !selectedDecal && selectedWall) {
|
||||
setDisplayComponent("selectedWallProperties");
|
||||
return;
|
||||
}
|
||||
if (!selectedFloorItem && !selectedWall && !selectedAisle && !selectedDecal && selectedFloor) {
|
||||
setDisplayComponent("selectedFloorProperties");
|
||||
return;
|
||||
}
|
||||
if (viewVersionHistory && !selectedFloorItem && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal) {
|
||||
setDisplayComponent("versionHistory");
|
||||
return;
|
||||
}
|
||||
if (!selectedFloorItem && !selectedFloor && !selectedAisle && !selectedWall && selectedDecal) {
|
||||
setDisplayComponent("selectedDecalProperties");
|
||||
return;
|
||||
}
|
||||
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal && selectedAisle) {
|
||||
setDisplayComponent("selectedAisleProperties");
|
||||
return;
|
||||
}
|
||||
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle) {
|
||||
if (toolMode === "Aisle") {
|
||||
setDisplayComponent("aisleProperties");
|
||||
return;
|
||||
}
|
||||
if (toolMode === "Wall") {
|
||||
setDisplayComponent("wallProperties");
|
||||
return;
|
||||
}
|
||||
if (toolMode === "Floor") {
|
||||
setDisplayComponent("floorProperties");
|
||||
return;
|
||||
}
|
||||
setDisplayComponent("globalProperties");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`sidebar-right-wrapper ${
|
||||
toggleUIRight && (!isVersionSaved || activeModule !== "simulation")
|
||||
? "open"
|
||||
: "closed"
|
||||
}`}
|
||||
>
|
||||
<Header />
|
||||
{toggleUIRight && (
|
||||
<>
|
||||
{(!isVersionSaved || activeModule !== "simulation") && (
|
||||
<div className="sidebar-actions-container">
|
||||
{activeModule !== "simulation" && (
|
||||
if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) {
|
||||
setDisplayComponent("zoneProperties");
|
||||
return;
|
||||
}
|
||||
|
||||
setDisplayComponent("none");
|
||||
}, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]);
|
||||
|
||||
const renderComponent = () => {
|
||||
switch (displayComponent) {
|
||||
case "versionHistory":
|
||||
return <VersionHistory />;
|
||||
case "globalProperties":
|
||||
return <GlobalProperties />;
|
||||
case "aisleProperties":
|
||||
return <AisleProperties />;
|
||||
case "wallProperties":
|
||||
return <WallProperties />;
|
||||
case "floorProperties":
|
||||
return <FloorProperties />;
|
||||
case "assetProperties":
|
||||
return <AssetProperties />;
|
||||
case "zoneProperties":
|
||||
return <ZoneProperties />;
|
||||
case "selectedWallProperties":
|
||||
return <SelectedWallProperties />;
|
||||
case "selectedFloorProperties":
|
||||
return <SelectedFloorProperties />;
|
||||
case "selectedDecalProperties":
|
||||
return <SelectedDecalProperties />;
|
||||
case "selectedAisleProperties":
|
||||
return <SelectedAisleProperties />;
|
||||
case "simulations":
|
||||
return <Simulations />;
|
||||
case "mechanics":
|
||||
return <EventProperties />;
|
||||
case "analysis":
|
||||
return <Analysis />;
|
||||
case "visualization":
|
||||
return <Visualization />;
|
||||
case "resourceManagement":
|
||||
return <ResourceManagement />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"}`}>
|
||||
<Header />
|
||||
{toggleUIRight && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("properties");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">properties</div>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</button>
|
||||
{(!isVersionSaved || activeModule !== "simulation") && (
|
||||
<div className="sidebar-actions-container">
|
||||
{activeModule !== "simulation" && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("properties");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">properties</div>
|
||||
<PropertiesIcon isActive={subModule === "properties"} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-simulation"
|
||||
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("simulations");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">simulations</div>
|
||||
<SimulationIcon isActive={subModule === "simulations"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-mechanics"
|
||||
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("mechanics");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">mechanics</div>
|
||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-analysis"
|
||||
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("analysis");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">analysis</div>
|
||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(activeModule === "builder" ||
|
||||
activeModule === "simulation") && (
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("resourceManagement");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">Resource Management</div>
|
||||
<FilePackageIcon
|
||||
isActive={subModule === "resourceManagement"}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{displayComponent !== "none" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
{renderComponent()}
|
||||
{/* <ResourceManagement /> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<button
|
||||
id="sidebar-action-list-simulation"
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "simulations" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("simulations");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">simulations</div>
|
||||
<SimulationIcon isActive={subModule === "simulations"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-mechanics"
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "mechanics" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("mechanics");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">mechanics</div>
|
||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||
</button>
|
||||
<button
|
||||
id="sidebar-action-list-analysis"
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "analysis" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("analysis");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">analysis</div>
|
||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(activeModule === "builder" ||
|
||||
activeModule === "simulation") && (
|
||||
<button
|
||||
id="sidebar-action-list-properties"
|
||||
className={`sidebar-action-list ${
|
||||
subModule === "resourceManagement" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSubModule("resourceManagement");
|
||||
setVersionHistoryVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="tooltip">Resource Management</div>
|
||||
<FilePackageIcon
|
||||
isActive={subModule === "resourceManagement"}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{displayComponent !== "none" && (
|
||||
<div className="sidebar-right-container">
|
||||
<div className="sidebar-right-content-container">
|
||||
{renderComponent()}
|
||||
{/* <ResourceManagement /> */}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarRight;
|
||||
|
||||
@@ -1,30 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
interface RotationInputProps {
|
||||
onChange: (value: string) => void; // Callback for value change
|
||||
placeholder?: string; // Optional placeholder
|
||||
type?: string; // Input type (e.g., text, number, email)
|
||||
heading?: string;
|
||||
label?: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
type?: string;
|
||||
value?: number;
|
||||
disabled?: boolean;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
}
|
||||
|
||||
const RotationInput: React.FC<RotationInputProps> = ({
|
||||
label = "Rotate :",
|
||||
heading = "Rotation",
|
||||
onChange,
|
||||
placeholder = "Enter value", // Default placeholder
|
||||
type = "number", // Default type
|
||||
value = "number",
|
||||
placeholder = "Enter value",
|
||||
type = "number",
|
||||
value,
|
||||
disabled = false,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
}) => {
|
||||
return (
|
||||
<div className="custom-input-container">
|
||||
<div className="header">Rotation</div>
|
||||
<div className="header">{heading}</div>
|
||||
<div className="inputs-container" style={{ display: "block" }}>
|
||||
<div className="input-container">
|
||||
<div className="custom-input-label">Rotate : </div>
|
||||
<div className="custom-input-label">{label}</div>
|
||||
<input
|
||||
className="custom-input-field"
|
||||
type={type}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,24 +21,25 @@ interface TextureItem {
|
||||
texture: string;
|
||||
}
|
||||
|
||||
export const aisleTextureList: TextureItem[] = [
|
||||
{ color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
|
||||
{ color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
|
||||
{ color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
|
||||
{ color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
|
||||
{ color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
|
||||
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
|
||||
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
|
||||
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
|
||||
];
|
||||
|
||||
const AisleProperties: React.FC = () => {
|
||||
const [collapsePresets, setCollapsePresets] = useState(false);
|
||||
const [collapseTexture, setCollapseTexture] = useState(true);
|
||||
|
||||
const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();
|
||||
|
||||
const aisleTextureList: TextureItem[] = [
|
||||
{ color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "gray", id: "gray", brief: "basic", texture: "" },
|
||||
{ color: "green", id: "green", brief: "pedestrian walkways", texture: "" },
|
||||
{ color: "orange", id: "orange", brief: "material flow", texture: "" },
|
||||
{ color: "blue", id: "blue", brief: "vehicle paths", texture: "" },
|
||||
{ color: "purple", id: "purple", brief: "material flow", texture: "" },
|
||||
{ color: "red", id: "red", brief: "safety zone", texture: "" },
|
||||
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
|
||||
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
|
||||
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
|
||||
];
|
||||
|
||||
const aisleTypes: {
|
||||
name: string;
|
||||
@@ -285,7 +286,12 @@ const AisleProperties: React.FC = () => {
|
||||
onClick={() => setAisleColor(val.id)}
|
||||
aria-pressed={aisleColor === val.id}
|
||||
>
|
||||
<div className="texture-display">{val.texture}</div>
|
||||
<div
|
||||
className={`texture-display ${val.id}`}
|
||||
style={{ background: val.id }}
|
||||
>
|
||||
{val.texture}
|
||||
</div>
|
||||
<div className="aisle-color">{val.color}</div>
|
||||
<div className="aisle-brief">{`( ${val.brief} )`}</div>
|
||||
</button>
|
||||
|
||||
@@ -32,9 +32,9 @@ const AssetProperties: React.FC = () => {
|
||||
setUserData([]);
|
||||
};
|
||||
|
||||
const handleUserDataChange = (id: number, newValue: string) => {};
|
||||
const handleUserDataChange = (id: number, newValue: string) => { };
|
||||
|
||||
const handleRemoveUserData = (id: number) => {};
|
||||
const handleRemoveUserData = (id: number) => { };
|
||||
|
||||
const handleAnimationClick = (animation: string) => {
|
||||
if (selectedFloorItem) {
|
||||
@@ -57,14 +57,16 @@ const AssetProperties: React.FC = () => {
|
||||
<section>
|
||||
{objectPosition && (
|
||||
<PositionInput
|
||||
onChange={() => {}}
|
||||
disabled={true}
|
||||
onChange={() => { }}
|
||||
value1={parseFloat(objectPosition.x.toFixed(5))}
|
||||
value2={parseFloat(objectPosition.z.toFixed(5))}
|
||||
/>
|
||||
)}
|
||||
{objectRotation && (
|
||||
<RotationInput
|
||||
onChange={() => {}}
|
||||
disabled={true}
|
||||
onChange={() => { }}
|
||||
value={parseFloat(objectRotation.y.toFixed(5))}
|
||||
/>
|
||||
)}
|
||||
@@ -107,7 +109,7 @@ const AssetProperties: React.FC = () => {
|
||||
if (asset.modelUuid !== selectedFloorItem.uuid || !asset.animations)
|
||||
return (
|
||||
i === 0 && (
|
||||
<div className="no-animation">
|
||||
<div className="no-animation" key={i}>
|
||||
Looks like there are no preset animations yet. Stay tuned for
|
||||
future additions!
|
||||
</div>
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import {
|
||||
LayeringBottomIcon,
|
||||
LayeringTopIcon,
|
||||
} from "../../../icons/ExportCommonIcons";
|
||||
import InputRange from "../../../ui/inputs/InputRange";
|
||||
import RotationInput from "../customInput/RotationInput";
|
||||
import Vector3Input from "../customInput/Vector3Input";
|
||||
|
||||
const DecalProperties = () => {
|
||||
return (
|
||||
<div className="decal-transformation-container">
|
||||
<div className="header">Decal Propertis</div>
|
||||
<section>
|
||||
<RotationInput
|
||||
onChange={() => {}}
|
||||
value={10}
|
||||
/>
|
||||
<Vector3Input
|
||||
onChange={(value) => console.log(value)}
|
||||
header="Scale"
|
||||
value={[0, 0, 0] as [number, number, number]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<InputRange
|
||||
label="Opacity"
|
||||
value={1}
|
||||
min={0}
|
||||
step={0.1}
|
||||
max={1}
|
||||
onChange={(value: number) => console.log(value)}
|
||||
key={"6"}
|
||||
/>
|
||||
|
||||
<div className="transformation-wrapper opacity">
|
||||
<div className="transformation-header">Layering</div>
|
||||
|
||||
<div className="layers-list">
|
||||
<button className="layer-move-btn">
|
||||
<LayeringBottomIcon />
|
||||
</button>
|
||||
<button className="layer-move-btn">
|
||||
<LayeringTopIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DecalProperties;
|
||||
@@ -0,0 +1,529 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { ArrowIcon } from "../../../icons/ExportCommonIcons";
|
||||
|
||||
// image imports
|
||||
import Arc from "../../../../assets/image/aisleTypes/Arc.png";
|
||||
import Arrow from "../../../../assets/image/aisleTypes/Arrow.png";
|
||||
import Arrows from "../../../../assets/image/aisleTypes/Arrows.png";
|
||||
import Circle from "../../../../assets/image/aisleTypes/Circle.png";
|
||||
import Dashed from "../../../../assets/image/aisleTypes/Dashed.png";
|
||||
import Directional from "../../../../assets/image/aisleTypes/Directional.png";
|
||||
import Dotted from "../../../../assets/image/aisleTypes/Dotted.png";
|
||||
import Solid from "../../../../assets/image/aisleTypes/Solid.png";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
|
||||
import { useSocketStore } from "../../../../store/builder/store";
|
||||
import { getUserData } from "../../../../functions/getUserData";
|
||||
import { aisleTextureList } from "./AisleProperties";
|
||||
|
||||
const SelectedAisleProperties: React.FC = () => {
|
||||
const [collapsePresets, setCollapsePresets] = useState(false);
|
||||
const [collapseTexture, setCollapseTexture] = useState(true);
|
||||
const { aisleStore } = useSceneContext();
|
||||
const { getAisleById, updateAisle, setDashedAisleProperties, setDottedAisleProperties, setArrowsAisleProperties, setArcAisleWidth, setColor } = aisleStore();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { socket } = useSocketStore();
|
||||
const { userId, organization } = getUserData();
|
||||
const { projectId } = useParams();
|
||||
const [selectedAisleData, setSelectedAisleData] = useState<Aisle | undefined>();
|
||||
|
||||
const { selectedAisle, setSelectedAisle } = useBuilderStore();
|
||||
|
||||
useEffect(() => {
|
||||
const aisleData = getAisleById(selectedAisle?.aisleMesh?.uuid || "");
|
||||
setSelectedAisleData(aisleData);
|
||||
}, [selectedAisle, getAisleById]);
|
||||
|
||||
if (!selectedAisleData) return null;
|
||||
|
||||
const updateBackend = (updatedAisle: Aisle) => {
|
||||
if (updatedAisle && projectId) {
|
||||
|
||||
// API
|
||||
|
||||
// upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '');
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization,
|
||||
aisleUuid: updatedAisle.aisleUuid,
|
||||
points: updatedAisle.points,
|
||||
type: updatedAisle.type
|
||||
}
|
||||
|
||||
socket.emit('v1:model-aisle:add', data);
|
||||
}
|
||||
}
|
||||
|
||||
const aisleTypes: {
|
||||
name: string;
|
||||
type: AisleTypes;
|
||||
id: string;
|
||||
thumbnail: string;
|
||||
}[] = [
|
||||
{ name: "Solid", type: "solid-aisle", id: "1", thumbnail: Solid },
|
||||
{ name: "Dotted", type: "dotted-aisle", id: "2", thumbnail: Dotted },
|
||||
{ name: "Dashed", type: "dashed-aisle", id: "3", thumbnail: Dashed },
|
||||
{ name: "Arrow", type: "arrow-aisle", id: "4", thumbnail: Arrow },
|
||||
{ name: "Continuous Arrows", type: "arrows-aisle", id: "5", thumbnail: Arrows },
|
||||
{ name: "Directional", type: "junction-aisle", id: "6", thumbnail: Directional },
|
||||
{ name: "Arc", type: "arc-aisle", id: "7", thumbnail: Arc },
|
||||
{ name: "Circle", type: "circle-aisle", id: "8", thumbnail: Circle },
|
||||
];
|
||||
|
||||
const createAisleTypeObject = (newType: AisleTypes, currentType: AisleType): AisleType => {
|
||||
switch (newType) {
|
||||
case 'solid-aisle':
|
||||
return {
|
||||
aisleType: 'solid-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
|
||||
} as SolidAisle;
|
||||
|
||||
case 'dashed-aisle':
|
||||
return {
|
||||
aisleType: 'dashed-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
|
||||
dashLength: 'dashLength' in currentType ? (currentType as DashedAisle).dashLength : 0.5,
|
||||
gapLength: 'gapLength' in currentType ? (currentType as DashedAisle).gapLength : 0.3
|
||||
} as DashedAisle;
|
||||
|
||||
case 'dotted-aisle':
|
||||
return {
|
||||
aisleType: 'dotted-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
dotRadius: 'dotRadius' in currentType ? (currentType as DottedAisle).dotRadius : 0.1,
|
||||
gapLength: 'gapLength' in currentType ? (currentType as DottedAisle).gapLength : 0.3
|
||||
} as DottedAisle;
|
||||
|
||||
case 'arrow-aisle':
|
||||
return {
|
||||
aisleType: 'arrow-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
|
||||
} as ArrowAisle;
|
||||
|
||||
case 'arrows-aisle':
|
||||
return {
|
||||
aisleType: 'arrows-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
|
||||
aisleLength: 'aisleLength' in currentType ? (currentType as ArrowsAisle).aisleLength : 0.6,
|
||||
gapLength: 'gapLength' in currentType ? (currentType as ArrowsAisle).gapLength : 0.3
|
||||
} as ArrowsAisle;
|
||||
|
||||
case 'arc-aisle':
|
||||
return {
|
||||
aisleType: 'arc-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
|
||||
isFlipped: 'isFlipped' in currentType ? (currentType as ArcAisle).isFlipped : false
|
||||
} as ArcAisle;
|
||||
|
||||
case 'circle-aisle':
|
||||
return {
|
||||
aisleType: 'circle-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
|
||||
} as CircleAisle;
|
||||
|
||||
case 'junction-aisle':
|
||||
return {
|
||||
aisleType: 'junction-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
|
||||
isFlipped: 'isFlipped' in currentType ? (currentType as JunctionAisle).isFlipped : false
|
||||
} as JunctionAisle;
|
||||
|
||||
default:
|
||||
return {
|
||||
aisleType: 'solid-aisle',
|
||||
aisleColor: currentType.aisleColor,
|
||||
aisleWidth: 0.1
|
||||
} as SolidAisle;
|
||||
}
|
||||
};
|
||||
|
||||
const handleAisleTypeChange = (newType: AisleTypes) => {
|
||||
if (!selectedAisle?.aisleData) return;
|
||||
const newAisleType = createAisleTypeObject(newType, selectedAisleData.type);
|
||||
|
||||
const updatedAisle = updateAisle(selectedAisleData.aisleUuid, {
|
||||
type: newAisleType
|
||||
});
|
||||
|
||||
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: null });
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: newAisleType
|
||||
});
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
};
|
||||
|
||||
const handleColorChange = (value: AisleColors) => {
|
||||
const updatedAisle = setColor(selectedAisleData.aisleUuid, value);
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...selectedAisleData.type,
|
||||
aisleColor: value
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAisleWidthChange = (value: string) => {
|
||||
const width = parseFloat(value);
|
||||
if (!isNaN(width) && selectedAisleData.type.aisleType !== 'dotted-aisle') {
|
||||
const updatedAisle = updateAisle(selectedAisleData.aisleUuid, {
|
||||
type: {
|
||||
...selectedAisleData.type,
|
||||
aisleWidth: width
|
||||
}
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...selectedAisleData.type,
|
||||
aisleWidth: width
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDashLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length) && selectedAisleData.type.aisleType === 'dashed-aisle') {
|
||||
const updatedAisle = setDashedAisleProperties(selectedAisleData.aisleUuid, {
|
||||
dashLength: length
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as DashedAisle),
|
||||
dashLength: length
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGapLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length) && (selectedAisleData.type.aisleType === 'dashed-aisle' || selectedAisleData.type.aisleType === 'dotted-aisle' || selectedAisleData.type.aisleType === 'arrows-aisle')) {
|
||||
if (selectedAisleData.type.aisleType === 'dashed-aisle') {
|
||||
const updatedAisle = setDashedAisleProperties(selectedAisleData.aisleUuid, {
|
||||
gapLength: length
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as DashedAisle),
|
||||
gapLength: length
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
} else if (selectedAisleData.type.aisleType === 'dotted-aisle') {
|
||||
const updatedAisle = setDottedAisleProperties(selectedAisleData.aisleUuid, {
|
||||
gapLength: length
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as DottedAisle),
|
||||
gapLength: length
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
} else if (selectedAisleData.type.aisleType === 'arrows-aisle') {
|
||||
const updatedAisle = setArrowsAisleProperties(selectedAisleData.aisleUuid, {
|
||||
gapLength: length
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as ArrowsAisle),
|
||||
gapLength: length
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDotRadiusChange = (value: string) => {
|
||||
const radius = parseFloat(value);
|
||||
if (!isNaN(radius) && selectedAisleData.type.aisleType === 'dotted-aisle') {
|
||||
const updatedAisle = setDottedAisleProperties(selectedAisleData.aisleUuid, {
|
||||
dotRadius: radius
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as DottedAisle),
|
||||
dotRadius: radius
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAisleLengthChange = (value: string) => {
|
||||
const length = parseFloat(value);
|
||||
if (!isNaN(length) && selectedAisleData.type.aisleType === 'arrows-aisle') {
|
||||
const updatedAisle = setArrowsAisleProperties(selectedAisleData.aisleUuid, {
|
||||
aisleLength: length
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...(selectedAisleData.type as ArrowsAisle),
|
||||
aisleLength: length
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleIsFlippedChange = () => {
|
||||
if (selectedAisleData.type.aisleType === 'arc-aisle' || selectedAisleData.type.aisleType === 'junction-aisle') {
|
||||
const currentType = selectedAisleData.type as ArcAisle | JunctionAisle;
|
||||
const currentFlipped = currentType.isFlipped || false;
|
||||
const updatedAisle = setArcAisleWidth(selectedAisleData.aisleUuid, {
|
||||
isFlipped: !currentFlipped
|
||||
});
|
||||
|
||||
setSelectedAisleData({
|
||||
...selectedAisleData,
|
||||
type: {
|
||||
...currentType,
|
||||
isFlipped: !currentFlipped
|
||||
}
|
||||
})
|
||||
|
||||
if (updatedAisle) {
|
||||
updateBackend(updatedAisle);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const renderAdvancedProperties = () => {
|
||||
switch (selectedAisleData.type.aisleType) {
|
||||
case 'dashed-aisle':
|
||||
const dashedType = selectedAisleData.type as DashedAisle;
|
||||
return (
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Dash Length"
|
||||
value={`${dashedType.dashLength}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleDashLengthChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${dashedType.gapLength}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 'dotted-aisle':
|
||||
const dottedType = selectedAisleData.type as DottedAisle;
|
||||
return (
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Dot Radius"
|
||||
value={`${dottedType.dotRadius}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleDotRadiusChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${dottedType.gapLength}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 'arrows-aisle':
|
||||
const arrowsType = selectedAisleData.type as ArrowsAisle;
|
||||
return (
|
||||
<>
|
||||
<InputWithDropDown
|
||||
label="Arrow Length"
|
||||
value={`${arrowsType.aisleLength}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleAisleLengthChange}
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Gap Length"
|
||||
value={`${arrowsType.gapLength}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleGapLengthChange}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
case 'junction-aisle':
|
||||
case 'arc-aisle':
|
||||
const flippedType = selectedAisleData.type as ArcAisle | JunctionAisle;
|
||||
return (
|
||||
<InputToggle
|
||||
inputKey="Flip Aisle"
|
||||
label="Flip Aisle"
|
||||
value={flippedType.isFlipped || false}
|
||||
onClick={handleIsFlippedChange}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="aisle-properties-container">
|
||||
<div className="header">Properties</div>
|
||||
|
||||
{/* Basic Properties */}
|
||||
<section>
|
||||
{selectedAisleData.type.aisleType !== 'dotted-aisle' &&
|
||||
<InputWithDropDown
|
||||
label="Aisle Width"
|
||||
value={`${selectedAisleData.type.aisleWidth || 0.5}`}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={handleAisleWidthChange}
|
||||
/>
|
||||
}
|
||||
{renderAdvancedProperties()}
|
||||
</section>
|
||||
|
||||
{/* Presets */}
|
||||
<section>
|
||||
<button
|
||||
className="header"
|
||||
onClick={() => setCollapsePresets(!collapsePresets)}
|
||||
aria-expanded={!collapsePresets}
|
||||
>
|
||||
<div className="value">Presets</div>
|
||||
<div className="icon">
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
{!collapsePresets && (
|
||||
<div className="presets-list-container">
|
||||
{aisleTypes.map((val) => (
|
||||
<div className="preset-list" key={val.id}>
|
||||
<button
|
||||
className={`thumbnail ${selectedAisleData.type.aisleType === val.type ? "selected" : ""}`}
|
||||
title={val.name}
|
||||
onClick={() => handleAisleTypeChange(val.type)}
|
||||
>
|
||||
<img src={val.thumbnail} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Texture */}
|
||||
<section>
|
||||
<button
|
||||
className="header"
|
||||
onClick={() => setCollapseTexture(!collapseTexture)}
|
||||
aria-expanded={!collapseTexture}
|
||||
>
|
||||
<div className="value">Aisle Texture</div>
|
||||
<div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{collapseTexture && (
|
||||
<div className="aisle-texture-container">
|
||||
{aisleTextureList.map((val) => (
|
||||
<button
|
||||
key={val.id}
|
||||
title={val.brief || val.id}
|
||||
className={`aisle-list ${selectedAisleData.type.aisleColor === val.id ? "selected" : ""}`}
|
||||
onClick={() => handleColorChange(val.id)}
|
||||
aria-pressed={selectedAisleData.type.aisleColor === val.id}
|
||||
>
|
||||
<div
|
||||
className={`texture-display ${val.id}`}
|
||||
style={{ background: val.id }}
|
||||
>
|
||||
{val.texture}
|
||||
</div>
|
||||
<div className="aisle-color">{val.color}</div>
|
||||
<div className="aisle-brief">{`( ${val.brief} )`}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectedAisleProperties;
|
||||
@@ -0,0 +1,188 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
import { LayeringBottomIcon, LayeringTopIcon } from "../../../icons/ExportCommonIcons";
|
||||
import { useSocketStore } from "../../../../store/builder/store";
|
||||
import InputRange from "../../../ui/inputs/InputRange";
|
||||
|
||||
import { getUserData } from "../../../../functions/getUserData";
|
||||
// import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
|
||||
// import { upsertFloorApi } from "../../../../services/factoryBuilder/floor/upsertFloorApi";
|
||||
|
||||
const SelectedDecalProperties = () => {
|
||||
const { selectedDecal, setSelectedDecal } = useBuilderStore();
|
||||
const { wallStore, floorStore } = useSceneContext();
|
||||
const { updateDecal: updateDecalInWall } = wallStore();
|
||||
const { updateDecal: updateDecalInFloor } = floorStore();
|
||||
const { userId, organization } = getUserData();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { projectId } = useParams();
|
||||
const { socket } = useSocketStore();
|
||||
|
||||
const updateBackend = (updatedData: Wall | Floor) => {
|
||||
if ('wallUuid' in updatedData) {
|
||||
if (projectId && updatedData) {
|
||||
// API
|
||||
|
||||
// upsertWallApi(projectId, selectedVersion?.versionId || '', updatedData);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
wallData: updatedData,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Wall:add', data);
|
||||
}
|
||||
} else if ('floorUuid' in updatedData) {
|
||||
if (projectId && updatedData) {
|
||||
// API
|
||||
|
||||
// upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedData);
|
||||
|
||||
// SOCKET
|
||||
|
||||
const data = {
|
||||
floorData: updatedData,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
userId: userId,
|
||||
organization: organization
|
||||
}
|
||||
|
||||
socket.emit('v1:model-Floor:add', data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRotationChange = (value: number) => {
|
||||
if (!selectedDecal) return;
|
||||
const updatedDecal = { ...selectedDecal.decalData, decalRotation: value };
|
||||
setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
|
||||
|
||||
if ('wallUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedWall = updateDecalInWall(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedWall) updateBackend(updatedWall);
|
||||
} else if ('floorUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedFloor = updateDecalInFloor(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedFloor) updateBackend(updatedFloor);
|
||||
}
|
||||
}
|
||||
|
||||
const handleScaleChange = (value: number) => {
|
||||
if (!selectedDecal) return;
|
||||
const updatedDecal = { ...selectedDecal.decalData, decalScale: value };
|
||||
setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
|
||||
|
||||
if ('wallUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedWall = updateDecalInWall(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedWall) updateBackend(updatedWall);
|
||||
} else if ('floorUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedFloor = updateDecalInFloor(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedFloor) updateBackend(updatedFloor);
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpacityChange = (value: number) => {
|
||||
if (!selectedDecal) return;
|
||||
const updatedDecal = { ...selectedDecal.decalData, decalOpacity: value };
|
||||
setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
|
||||
|
||||
if ('wallUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedWall = updateDecalInWall(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedWall) updateBackend(updatedWall);
|
||||
} else if ('floorUuid' in selectedDecal.decalData.decalType) {
|
||||
const updatedFloor = updateDecalInFloor(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedFloor) updateBackend(updatedFloor);
|
||||
}
|
||||
}
|
||||
|
||||
const handleLayerChange = (direction: "up" | "down") => {
|
||||
if (!selectedDecal) return;
|
||||
|
||||
const position: [number, number, number] = [...(selectedDecal.decalData.decalPosition || [0, 0, 0]),];
|
||||
|
||||
if (direction === "up") {
|
||||
position[2] = Math.abs(position[2]);
|
||||
} else {
|
||||
position[2] = -Math.abs(position[2]);
|
||||
}
|
||||
|
||||
const updatedDecal: Decal = { ...selectedDecal.decalData, decalPosition: position, };
|
||||
|
||||
setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
|
||||
|
||||
if ("wallUuid" in selectedDecal.decalData.decalType) {
|
||||
const updatedWall = updateDecalInWall(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedWall) updateBackend(updatedWall);
|
||||
} else if ("floorUuid" in selectedDecal.decalData.decalType) {
|
||||
const updatedFloor = updateDecalInFloor(updatedDecal.decalUuid, updatedDecal);
|
||||
if (updatedFloor) updateBackend(updatedFloor);
|
||||
}
|
||||
};
|
||||
|
||||
if (!selectedDecal) return null;
|
||||
|
||||
return (
|
||||
<div className="decal-transformation-container">
|
||||
<div className="header">Decal Properties</div>
|
||||
<section>
|
||||
<InputRange
|
||||
label="Rotation"
|
||||
value={selectedDecal.decalData.decalRotation || 0}
|
||||
min={0}
|
||||
max={360}
|
||||
step={1}
|
||||
onChange={(value: number) => handleRotationChange(value)}
|
||||
/>
|
||||
|
||||
<InputRange
|
||||
label="Scale"
|
||||
value={selectedDecal.decalData.decalScale || 1}
|
||||
min={0.1}
|
||||
max={5}
|
||||
step={0.1}
|
||||
onChange={(value: number) => handleScaleChange(value)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<InputRange
|
||||
label="Opacity"
|
||||
value={selectedDecal.decalData.decalOpacity || 1}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={1}
|
||||
onChange={(value: number) => handleOpacityChange(value)}
|
||||
/>
|
||||
|
||||
<div className="transformation-wrapper opacity">
|
||||
<div className="transformation-header">Layering</div>
|
||||
|
||||
<div className="layers-list">
|
||||
<button
|
||||
className="layer-move-btn"
|
||||
onClick={() => handleLayerChange("down")}
|
||||
>
|
||||
<LayeringBottomIcon />
|
||||
</button>
|
||||
<button
|
||||
className="layer-move-btn"
|
||||
onClick={() => handleLayerChange("up")}
|
||||
>
|
||||
<LayeringTopIcon />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectedDecalProperties;
|
||||
@@ -1,18 +1,19 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
// import NavigateCatagory from '../../NavigateCatagory'
|
||||
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
|
||||
import { EyeIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
|
||||
import assetImage from "../../../../../../assets/image/asset-image.png"
|
||||
import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
|
||||
import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
|
||||
import RenameInput from '../../../../../ui/inputs/RenameInput';
|
||||
import { useResourceManagementId } from '../../../../../../store/builder/store';
|
||||
import { TypeBasedAssetIcons } from '../../../../../icons/AssetTypeIcons';
|
||||
const AssetManagement = () => {
|
||||
// const [selectedCategory, setSelectedCategory] = useState("All Assets");
|
||||
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
|
||||
const [assets, setAssets] = useState<any[]>([]);
|
||||
|
||||
const { productStore } = useSceneContext();
|
||||
const { products, getProductById } = productStore();
|
||||
const { getProductById } = productStore();
|
||||
const { selectedProductStore } = useProductContext();
|
||||
const { selectedProduct } = selectedProductStore();
|
||||
const { setResourceManagementId } = useResourceManagementId();
|
||||
@@ -30,6 +31,7 @@ const AssetManagement = () => {
|
||||
grouped[asset.modelName] = {
|
||||
id: asset.modelUuid,
|
||||
name: asset.modelName,
|
||||
type: asset.type,
|
||||
model: asset.modelCode || "N/A",
|
||||
status: asset.status || "Online",
|
||||
usageRate: asset.usageRate || 15,
|
||||
@@ -46,6 +48,7 @@ const AssetManagement = () => {
|
||||
|
||||
setAssets(Object.values(grouped));
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [selectedProduct]);
|
||||
|
||||
function handleRenameAsset(newName: string) {
|
||||
@@ -130,7 +133,7 @@ const AssetManagement = () => {
|
||||
<img className='asset-image' src={asset.image} alt="" />
|
||||
</>
|
||||
:
|
||||
<div className="icon"><ForkLiftIcon /></div>
|
||||
<div className="icon"><TypeBasedAssetIcons assetType={asset.type}/></div>
|
||||
}
|
||||
<div className="asset-details-container">
|
||||
<div className="asset-details" >
|
||||
@@ -210,16 +213,10 @@ const AssetManagement = () => {
|
||||
<div className="value">{expandedAssetId === asset.id ? "View Less" : "View More"}</div>
|
||||
<div className="icon"><KebabIcon /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div >
|
||||
</>
|
||||
|
||||
@@ -146,6 +146,12 @@ const Tools: React.FC = () => {
|
||||
case "draw-floor":
|
||||
is2D && setToolMode("Floor");
|
||||
break;
|
||||
case "move":
|
||||
if (!is2D) setToolMode("Move-Asset");
|
||||
break;
|
||||
case "rotate":
|
||||
if (!is2D) setToolMode("Rotate-Asset");
|
||||
break;
|
||||
case "measure":
|
||||
setToolMode("MeasurementScale");
|
||||
break;
|
||||
@@ -368,7 +374,7 @@ const Tools: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeModule !== "visualization" && (
|
||||
{toggleThreeD && activeModule !== "visualization" && (
|
||||
<>
|
||||
<div className="split"></div>
|
||||
<div className="transform-tools">
|
||||
|
||||
Reference in New Issue
Block a user