refactor: optimized contextmenu, style update, ui bug fixes
This commit is contained in:
@@ -30,7 +30,11 @@ import {
|
||||
DuplicateInstanceIcon,
|
||||
PlayIcon,
|
||||
} from "../icons/ShortcutIcons";
|
||||
import { CloseIcon, EyeCloseIcon } from "../icons/ExportCommonIcons";
|
||||
import {
|
||||
CloseIcon,
|
||||
EyeCloseIcon,
|
||||
PerformanceStatsIcon,
|
||||
} from "../icons/ExportCommonIcons";
|
||||
|
||||
interface ShortcutItem {
|
||||
keys: string[];
|
||||
@@ -76,8 +80,8 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
|
||||
},
|
||||
{
|
||||
keys: ["CTRL", "+", "H"],
|
||||
name: "Help",
|
||||
description: "Open Help",
|
||||
name: "Version History",
|
||||
description: "Open Version History",
|
||||
icon: <HelpIcon />,
|
||||
},
|
||||
{
|
||||
@@ -278,6 +282,12 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
|
||||
description: "Hide Simulation Player",
|
||||
icon: <EyeCloseIcon />,
|
||||
},
|
||||
{
|
||||
keys: ["F1"],
|
||||
name: "Stats",
|
||||
description: "Show Scene Stats",
|
||||
icon: <PerformanceStatsIcon />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1357,42 +1357,99 @@ export const GreenTickIcon = () => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export const SuccessIcon = () => {
|
||||
return (
|
||||
<svg width="155" height="155" viewBox="0 0 155 155" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M115.596 48.1456C117.888 50.4283 117.896 54.1368 115.613 56.4288L66.2605 105.982C63.9779 108.274 60.2695 108.281 57.9775 105.999L39.9789 88.075C37.6868 85.7924 37.6791 82.0838 39.9617 79.7917C42.2443 77.4996 45.9528 77.4919 48.2449 79.7745L62.0935 93.5657L107.313 48.1624C109.596 45.8704 113.304 45.8629 115.596 48.1456Z" fill="#244A84" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M77.1586 11.7143C46.1114 11.7143 20.065 33.3937 13.379 62.4361L13.379 62.4362C12.2906 67.1635 11.7143 72.0909 11.7143 77.1586C11.7143 113.275 41.0421 142.603 77.1586 142.603C113.275 142.603 142.603 113.275 142.603 77.1586C142.603 41.0421 113.275 11.7143 77.1586 11.7143ZM1.96331 59.808C9.8455 25.5697 40.53 0 77.1586 0C119.745 0 154.317 34.5725 154.317 77.1586C154.317 119.745 119.745 154.317 77.1586 154.317C34.5725 154.317 0 119.745 0 77.1586C0 71.1999 0.677961 65.3909 1.96331 59.808Z" fill="#C2CDE0" />
|
||||
<svg
|
||||
width="155"
|
||||
height="155"
|
||||
viewBox="0 0 155 155"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M115.596 48.1456C117.888 50.4283 117.896 54.1368 115.613 56.4288L66.2605 105.982C63.9779 108.274 60.2695 108.281 57.9775 105.999L39.9789 88.075C37.6868 85.7924 37.6791 82.0838 39.9617 79.7917C42.2443 77.4996 45.9528 77.4919 48.2449 79.7745L62.0935 93.5657L107.313 48.1624C109.596 45.8704 113.304 45.8629 115.596 48.1456Z"
|
||||
fill="#244A84"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M77.1586 11.7143C46.1114 11.7143 20.065 33.3937 13.379 62.4361L13.379 62.4362C12.2906 67.1635 11.7143 72.0909 11.7143 77.1586C11.7143 113.275 41.0421 142.603 77.1586 142.603C113.275 142.603 142.603 113.275 142.603 77.1586C142.603 41.0421 113.275 11.7143 77.1586 11.7143ZM1.96331 59.808C9.8455 25.5697 40.53 0 77.1586 0C119.745 0 154.317 34.5725 154.317 77.1586C154.317 119.745 119.745 154.317 77.1586 154.317C34.5725 154.317 0 119.745 0 77.1586C0 71.1999 0.677961 65.3909 1.96331 59.808Z"
|
||||
fill="#C2CDE0"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export const AlertIcon = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.454 14.797H6.54597C6.1917 14.8122 5.83973 14.7329 5.5262 14.5673C5.21266 14.4017 4.94885 14.1556 4.76177 13.8544C4.5747 13.5531 4.47112 13.2075 4.46165 12.8531C4.45219 12.4986 4.53719 12.148 4.70792 11.8372L8.16189 5.83436C8.35337 5.51828 8.62315 5.25693 8.94513 5.07553C9.2671 4.89413 9.63038 4.79883 9.99993 4.79883C10.3695 4.79883 10.7328 4.89413 11.0548 5.07553C11.3768 5.25693 11.6466 5.51828 11.838 5.83436L15.292 11.8372C15.4627 12.148 15.5478 12.4986 15.5383 12.8531C15.5288 13.2075 15.4253 13.5531 15.2382 13.8544C15.0511 14.1556 14.7872 14.4017 14.4737 14.5673C14.1602 14.7329 13.8082 14.8122 13.454 14.797Z" stroke="var(--text-color)" stroke-width="0.832956" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.0015 12.1777C10.0679 12.1791 10.1324 12.1997 10.187 12.2373C10.2417 12.275 10.2842 12.328 10.3091 12.3896C10.3339 12.4515 10.3402 12.5197 10.3267 12.585C10.3131 12.6501 10.2802 12.7099 10.2329 12.7568C10.1857 12.8035 10.1254 12.8357 10.0601 12.8486C9.99488 12.8615 9.92713 12.8544 9.86572 12.8291C9.83506 12.8165 9.80623 12.8 9.78076 12.7793L9.71436 12.7061L9.67139 12.6172C9.66175 12.5864 9.65628 12.5541 9.65576 12.5215C9.65579 12.4763 9.66481 12.4314 9.68213 12.3896C9.69961 12.3477 9.72603 12.3093 9.7583 12.2773C9.79045 12.2455 9.82857 12.2203 9.87061 12.2031C9.91219 12.1862 9.95664 12.1776 10.0015 12.1777ZM9.85596 10.998L9.77783 8.09961V8.08887L9.77686 8.07812V8.03125C9.77846 8.01596 9.78187 8.00098 9.78662 7.98633C9.7962 7.95676 9.81179 7.92933 9.83252 7.90625C9.84285 7.89476 9.85427 7.88407 9.8667 7.875L9.90674 7.85156C9.93523 7.83888 9.96642 7.83203 9.99756 7.83203C10.013 7.83203 10.0284 7.83375 10.0435 7.83691L10.0884 7.85156C10.1166 7.86421 10.1418 7.88315 10.1626 7.90625C10.1834 7.92943 10.199 7.95689 10.2085 7.98633C10.2181 8.01596 10.2215 8.04735 10.2183 8.07812L10.2173 8.08887V8.10059L10.145 10.999V11.0059C10.145 11.0441 10.1291 11.0804 10.1021 11.1074C10.0749 11.1345 10.0386 11.1504 10.0005 11.1504C9.96219 11.1504 9.92502 11.1345 9.89795 11.1074C9.87115 11.0804 9.85598 11.0439 9.85596 11.0059V10.998Z" fill="black" stroke="var(--text-color)" stroke-width="0.555304" />
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.454 14.797H6.54597C6.1917 14.8122 5.83973 14.7329 5.5262 14.5673C5.21266 14.4017 4.94885 14.1556 4.76177 13.8544C4.5747 13.5531 4.47112 13.2075 4.46165 12.8531C4.45219 12.4986 4.53719 12.148 4.70792 11.8372L8.16189 5.83436C8.35337 5.51828 8.62315 5.25693 8.94513 5.07553C9.2671 4.89413 9.63038 4.79883 9.99993 4.79883C10.3695 4.79883 10.7328 4.89413 11.0548 5.07553C11.3768 5.25693 11.6466 5.51828 11.838 5.83436L15.292 11.8372C15.4627 12.148 15.5478 12.4986 15.5383 12.8531C15.5288 13.2075 15.4253 13.5531 15.2382 13.8544C15.0511 14.1556 14.7872 14.4017 14.4737 14.5673C14.1602 14.7329 13.8082 14.8122 13.454 14.797Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.832956"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.0015 12.1777C10.0679 12.1791 10.1324 12.1997 10.187 12.2373C10.2417 12.275 10.2842 12.328 10.3091 12.3896C10.3339 12.4515 10.3402 12.5197 10.3267 12.585C10.3131 12.6501 10.2802 12.7099 10.2329 12.7568C10.1857 12.8035 10.1254 12.8357 10.0601 12.8486C9.99488 12.8615 9.92713 12.8544 9.86572 12.8291C9.83506 12.8165 9.80623 12.8 9.78076 12.7793L9.71436 12.7061L9.67139 12.6172C9.66175 12.5864 9.65628 12.5541 9.65576 12.5215C9.65579 12.4763 9.66481 12.4314 9.68213 12.3896C9.69961 12.3477 9.72603 12.3093 9.7583 12.2773C9.79045 12.2455 9.82857 12.2203 9.87061 12.2031C9.91219 12.1862 9.95664 12.1776 10.0015 12.1777ZM9.85596 10.998L9.77783 8.09961V8.08887L9.77686 8.07812V8.03125C9.77846 8.01596 9.78187 8.00098 9.78662 7.98633C9.7962 7.95676 9.81179 7.92933 9.83252 7.90625C9.84285 7.89476 9.85427 7.88407 9.8667 7.875L9.90674 7.85156C9.93523 7.83888 9.96642 7.83203 9.99756 7.83203C10.013 7.83203 10.0284 7.83375 10.0435 7.83691L10.0884 7.85156C10.1166 7.86421 10.1418 7.88315 10.1626 7.90625C10.1834 7.92943 10.199 7.95689 10.2085 7.98633C10.2181 8.01596 10.2215 8.04735 10.2183 8.07812L10.2173 8.08887V8.10059L10.145 10.999V11.0059C10.145 11.0441 10.1291 11.0804 10.1021 11.1074C10.0749 11.1345 10.0386 11.1504 10.0005 11.1504C9.96219 11.1504 9.92502 11.1345 9.89795 11.1074C9.87115 11.0804 9.85598 11.0439 9.85596 11.0059V10.998Z"
|
||||
fill="black"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.555304"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
export const NavigationIcon = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.99988 4.58398C7.0132 4.58398 4.5835 7.01369 4.5835 10.0004C4.5835 12.9872 7.0132 15.4173 9.99988 15.4173C12.9867 15.4173 15.4168 12.9872 15.4168 10.0004C15.4168 7.01369 12.9867 4.58398 9.99988 4.58398ZM9.99988 14.7764C7.36664 14.7764 5.22402 12.634 5.22402 10.0004C5.22402 7.36713 7.3666 5.22451 9.99988 5.22451C12.6335 5.22451 14.7759 7.36709 14.7759 10.0004C14.7759 12.634 12.6335 14.7764 9.99988 14.7764Z" fill="var(--text-color)" fill-opacity="0.85" />
|
||||
<path d="M9.92024 6.74255L8.37659 12.8023C8.36662 12.8418 8.38635 12.8823 8.42392 12.8985C8.46109 12.9147 8.50461 12.9018 8.52685 12.8671L10.0191 10.5407L11.4739 12.8667C11.4894 12.8915 11.5166 12.9055 11.544 12.9055C11.5548 12.9055 11.5655 12.9033 11.5764 12.8991C11.6142 12.8829 11.6341 12.8419 11.6244 12.8023L10.0807 6.74255C10.0619 6.66915 9.93845 6.66915 9.92024 6.74255ZM10.0899 10.3422C10.0747 10.3184 10.0487 10.3039 10.0203 10.3039H10.0201C9.99177 10.3039 9.96531 10.3178 9.95019 10.3416L8.66357 12.3474L10.0001 7.09867L11.3321 12.3286L10.0899 10.3422Z" fill="var(--text-color)" fill-opacity="0.85" />
|
||||
<path d="M11.5438 12.9321C11.5066 12.9321 11.4708 12.9126 11.4514 12.8814L10.0187 10.59L8.54867 12.8817C8.52069 12.9257 8.46184 12.9438 8.41374 12.9235C8.3643 12.9019 8.33822 12.8484 8.35165 12.7966L9.89512 6.73667C9.90622 6.69241 9.94861 6.66211 10.0003 6.66211C10.0519 6.66211 10.0946 6.69199 10.1059 6.73667L11.649 12.7966C11.6624 12.8488 11.6362 12.9024 11.5865 12.9235C11.5723 12.9293 11.5584 12.9321 11.5438 12.9321ZM10.0189 10.4928L10.0411 10.5279L11.4957 12.8537C11.5097 12.8765 11.5396 12.8863 11.5664 12.8754C11.5917 12.8645 11.6057 12.8365 11.5988 12.8095L10.0553 6.7495C10.0486 6.72325 10.0216 6.71384 10.0002 6.71384C9.9787 6.71384 9.95185 6.72325 9.94515 6.7495L8.4019 12.8095C8.39461 12.8365 8.40842 12.8645 8.4339 12.8754C8.45842 12.8852 8.48985 12.8766 8.50444 12.8537L10.0189 10.4928ZM8.59871 12.4969L9.99995 6.99367L11.3991 12.4844L10.0678 10.3568C10.0465 10.3226 9.99244 10.3244 9.97215 10.3562L8.59871 12.4969Z" fill="var(--text-color)" fill-opacity="0.85" />
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.99988 4.58398C7.0132 4.58398 4.5835 7.01369 4.5835 10.0004C4.5835 12.9872 7.0132 15.4173 9.99988 15.4173C12.9867 15.4173 15.4168 12.9872 15.4168 10.0004C15.4168 7.01369 12.9867 4.58398 9.99988 4.58398ZM9.99988 14.7764C7.36664 14.7764 5.22402 12.634 5.22402 10.0004C5.22402 7.36713 7.3666 5.22451 9.99988 5.22451C12.6335 5.22451 14.7759 7.36709 14.7759 10.0004C14.7759 12.634 12.6335 14.7764 9.99988 14.7764Z"
|
||||
fill="var(--text-color)"
|
||||
fill-opacity="0.85"
|
||||
/>
|
||||
<path
|
||||
d="M9.92024 6.74255L8.37659 12.8023C8.36662 12.8418 8.38635 12.8823 8.42392 12.8985C8.46109 12.9147 8.50461 12.9018 8.52685 12.8671L10.0191 10.5407L11.4739 12.8667C11.4894 12.8915 11.5166 12.9055 11.544 12.9055C11.5548 12.9055 11.5655 12.9033 11.5764 12.8991C11.6142 12.8829 11.6341 12.8419 11.6244 12.8023L10.0807 6.74255C10.0619 6.66915 9.93845 6.66915 9.92024 6.74255ZM10.0899 10.3422C10.0747 10.3184 10.0487 10.3039 10.0203 10.3039H10.0201C9.99177 10.3039 9.96531 10.3178 9.95019 10.3416L8.66357 12.3474L10.0001 7.09867L11.3321 12.3286L10.0899 10.3422Z"
|
||||
fill="var(--text-color)"
|
||||
fill-opacity="0.85"
|
||||
/>
|
||||
<path
|
||||
d="M11.5438 12.9321C11.5066 12.9321 11.4708 12.9126 11.4514 12.8814L10.0187 10.59L8.54867 12.8817C8.52069 12.9257 8.46184 12.9438 8.41374 12.9235C8.3643 12.9019 8.33822 12.8484 8.35165 12.7966L9.89512 6.73667C9.90622 6.69241 9.94861 6.66211 10.0003 6.66211C10.0519 6.66211 10.0946 6.69199 10.1059 6.73667L11.649 12.7966C11.6624 12.8488 11.6362 12.9024 11.5865 12.9235C11.5723 12.9293 11.5584 12.9321 11.5438 12.9321ZM10.0189 10.4928L10.0411 10.5279L11.4957 12.8537C11.5097 12.8765 11.5396 12.8863 11.5664 12.8754C11.5917 12.8645 11.6057 12.8365 11.5988 12.8095L10.0553 6.7495C10.0486 6.72325 10.0216 6.71384 10.0002 6.71384C9.9787 6.71384 9.95185 6.72325 9.94515 6.7495L8.4019 12.8095C8.39461 12.8365 8.40842 12.8645 8.4339 12.8754C8.45842 12.8852 8.48985 12.8766 8.50444 12.8537L10.0189 10.4928ZM8.59871 12.4969L9.99995 6.99367L11.3991 12.4844L10.0678 10.3568C10.0465 10.3226 9.99244 10.3244 9.97215 10.3562L8.59871 12.4969Z"
|
||||
fill="var(--text-color)"
|
||||
fill-opacity="0.85"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
export const HangTagIcon = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_5895_2753)">
|
||||
<path d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.6" />
|
||||
<path
|
||||
d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.6"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_5895_2753">
|
||||
@@ -1400,140 +1457,363 @@ export const HangTagIcon = () => {
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
export const DecalInfoIcon = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.0002 15.4173C12.9917 15.4173 15.4168 12.9922 15.4168 10.0007C15.4168 7.00911 12.9917 4.58398 10.0002 4.58398C7.00862 4.58398 4.5835 7.00911 4.5835 10.0007C4.5835 12.9922 7.00862 15.4173 10.0002 15.4173Z" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.8125" />
|
||||
<path d="M10 12.709V9.45898" stroke="var(--text-color)" stroke-opacity="0.85" stroke-width="0.8125" strokeLinecap="round" />
|
||||
<path d="M10.0002 7.29167C10.2993 7.29167 10.5418 7.53418 10.5418 7.83333C10.5418 8.13249 10.2993 8.375 10.0002 8.375C9.70101 8.375 9.4585 8.13249 9.4585 7.83333C9.4585 7.53418 9.70101 7.29167 10.0002 7.29167Z" fill="var(--text-color)" fill-opacity="0.85" />
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.0002 15.4173C12.9917 15.4173 15.4168 12.9922 15.4168 10.0007C15.4168 7.00911 12.9917 4.58398 10.0002 4.58398C7.00862 4.58398 4.5835 7.00911 4.5835 10.0007C4.5835 12.9922 7.00862 15.4173 10.0002 15.4173Z"
|
||||
stroke="var(--text-color)"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.8125"
|
||||
/>
|
||||
<path
|
||||
d="M10 12.709V9.45898"
|
||||
stroke="var(--text-color)"
|
||||
stroke-opacity="0.85"
|
||||
stroke-width="0.8125"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M10.0002 7.29167C10.2993 7.29167 10.5418 7.53418 10.5418 7.83333C10.5418 8.13249 10.2993 8.375 10.0002 8.375C9.70101 8.375 9.4585 8.13249 9.4585 7.83333C9.4585 7.53418 9.70101 7.29167 10.0002 7.29167Z"
|
||||
fill="var(--text-color)"
|
||||
fill-opacity="0.85"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export const LayeringBottomIcon = () => {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.857138" y="5.39229" width="10.9233" height="9.75071" stroke="var(--text-color)" stroke-width="0.714277" />
|
||||
<path d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z" fill="#6F42C1" stroke="white" stroke-width="0.2" />
|
||||
<path d="M7.87686 6.85212L9.54491 8.3521C9.5966 8.39897 9.65809 8.43616 9.72585 8.46155C9.7936 8.48693 9.86628 8.5 9.93968 8.5C10.0131 8.5 10.0858 8.48693 10.1535 8.46155C10.2213 8.43616 10.2828 8.39897 10.3345 8.3521L12.0025 6.85212C12.1072 6.75797 12.166 6.63027 12.166 6.49713C12.166 6.36398 12.1072 6.23628 12.0025 6.14213C11.8978 6.04798 11.7558 5.99509 11.6077 5.99509C11.4597 5.99509 11.3177 6.04798 11.213 6.14213L10.4957 6.79212V2.99717C10.4957 2.86456 10.4371 2.73739 10.3328 2.64362C10.2286 2.54985 10.0871 2.49718 9.93968 2.49718C9.79222 2.49718 9.65079 2.54985 9.54652 2.64362C9.44224 2.73739 9.38366 2.86456 9.38366 2.99717V6.79212L8.6664 6.14213C8.61472 6.09527 8.55322 6.05807 8.48546 6.03269C8.41771 6.0073 8.34503 5.99423 8.27163 5.99423C8.19823 5.99423 8.12556 6.0073 8.0578 6.03269C7.99005 6.05807 7.92855 6.09527 7.87686 6.14213C7.82475 6.18861 7.78338 6.24391 7.75516 6.30484C7.72693 6.36577 7.71239 6.43112 7.71239 6.49713C7.71239 6.56313 7.72693 6.62848 7.75516 6.68941C7.78338 6.75034 7.82475 6.80564 7.87686 6.85212Z" fill="#FCFDFD" />
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="0.857138"
|
||||
y="5.39229"
|
||||
width="10.9233"
|
||||
height="9.75071"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.714277"
|
||||
/>
|
||||
<path
|
||||
d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
|
||||
fill="#6F42C1"
|
||||
stroke="white"
|
||||
stroke-width="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M7.87686 6.85212L9.54491 8.3521C9.5966 8.39897 9.65809 8.43616 9.72585 8.46155C9.7936 8.48693 9.86628 8.5 9.93968 8.5C10.0131 8.5 10.0858 8.48693 10.1535 8.46155C10.2213 8.43616 10.2828 8.39897 10.3345 8.3521L12.0025 6.85212C12.1072 6.75797 12.166 6.63027 12.166 6.49713C12.166 6.36398 12.1072 6.23628 12.0025 6.14213C11.8978 6.04798 11.7558 5.99509 11.6077 5.99509C11.4597 5.99509 11.3177 6.04798 11.213 6.14213L10.4957 6.79212V2.99717C10.4957 2.86456 10.4371 2.73739 10.3328 2.64362C10.2286 2.54985 10.0871 2.49718 9.93968 2.49718C9.79222 2.49718 9.65079 2.54985 9.54652 2.64362C9.44224 2.73739 9.38366 2.86456 9.38366 2.99717V6.79212L8.6664 6.14213C8.61472 6.09527 8.55322 6.05807 8.48546 6.03269C8.41771 6.0073 8.34503 5.99423 8.27163 5.99423C8.19823 5.99423 8.12556 6.0073 8.0578 6.03269C7.99005 6.05807 7.92855 6.09527 7.87686 6.14213C7.82475 6.18861 7.78338 6.24391 7.75516 6.30484C7.72693 6.36577 7.71239 6.43112 7.71239 6.49713C7.71239 6.56313 7.72693 6.62848 7.75516 6.68941C7.78338 6.75034 7.82475 6.80564 7.87686 6.85212Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const LayeringTopIcon = () => {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.857138" y="5.39229" width="10.9233" height="9.75071" stroke="var(--text-color)" stroke-width="0.714277" />
|
||||
<path d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z" fill="#6F42C1" stroke="white" stroke-width="0.2" />
|
||||
<path d="M12.002 4.14397L10.334 2.64399C10.2823 2.59713 10.2208 2.55993 10.1531 2.53455C10.0853 2.50916 10.0126 2.49609 9.93923 2.49609C9.86583 2.49609 9.79315 2.50916 9.7254 2.53455C9.65764 2.55993 9.59614 2.59713 9.54446 2.64399L7.87641 4.14397C7.77171 4.23812 7.71289 4.36582 7.71289 4.49897C7.71289 4.63212 7.77171 4.75981 7.87641 4.85396C7.98111 4.94811 8.12311 5.00101 8.27118 5.00101C8.41925 5.00101 8.56125 4.94811 8.66595 4.85396L9.38321 4.20397V7.99892C9.38321 8.13153 9.44179 8.25871 9.54606 8.35247C9.65034 8.44624 9.79176 8.49892 9.93923 8.49892C10.0867 8.49892 10.2281 8.44624 10.3324 8.35247C10.4367 8.25871 10.4952 8.13153 10.4952 7.99892V4.20397L11.2125 4.85396C11.2642 4.90083 11.3257 4.93802 11.3934 4.96341C11.4612 4.98879 11.5339 5.00186 11.6073 5.00186C11.6807 5.00186 11.7533 4.98879 11.8211 4.96341C11.8889 4.93802 11.9504 4.90083 12.002 4.85396C12.0542 4.80748 12.0955 4.75218 12.1238 4.69125C12.152 4.63033 12.1665 4.56497 12.1665 4.49897C12.1665 4.43296 12.152 4.36761 12.1238 4.30668C12.0955 4.24575 12.0542 4.19045 12.002 4.14397Z" fill="#FCFDFD" />
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="0.857138"
|
||||
y="5.39229"
|
||||
width="10.9233"
|
||||
height="9.75071"
|
||||
stroke="var(--text-color)"
|
||||
stroke-width="0.714277"
|
||||
/>
|
||||
<path
|
||||
d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
|
||||
fill="#6F42C1"
|
||||
stroke="white"
|
||||
stroke-width="0.2"
|
||||
/>
|
||||
<path
|
||||
d="M12.002 4.14397L10.334 2.64399C10.2823 2.59713 10.2208 2.55993 10.1531 2.53455C10.0853 2.50916 10.0126 2.49609 9.93923 2.49609C9.86583 2.49609 9.79315 2.50916 9.7254 2.53455C9.65764 2.55993 9.59614 2.59713 9.54446 2.64399L7.87641 4.14397C7.77171 4.23812 7.71289 4.36582 7.71289 4.49897C7.71289 4.63212 7.77171 4.75981 7.87641 4.85396C7.98111 4.94811 8.12311 5.00101 8.27118 5.00101C8.41925 5.00101 8.56125 4.94811 8.66595 4.85396L9.38321 4.20397V7.99892C9.38321 8.13153 9.44179 8.25871 9.54606 8.35247C9.65034 8.44624 9.79176 8.49892 9.93923 8.49892C10.0867 8.49892 10.2281 8.44624 10.3324 8.35247C10.4367 8.25871 10.4952 8.13153 10.4952 7.99892V4.20397L11.2125 4.85396C11.2642 4.90083 11.3257 4.93802 11.3934 4.96341C11.4612 4.98879 11.5339 5.00186 11.6073 5.00186C11.6807 5.00186 11.7533 4.98879 11.8211 4.96341C11.8889 4.93802 11.9504 4.90083 12.002 4.85396C12.0542 4.80748 12.0955 4.75218 12.1238 4.69125C12.152 4.63033 12.1665 4.56497 12.1665 4.49897C12.1665 4.43296 12.152 4.36761 12.1238 4.30668C12.0955 4.24575 12.0542 4.19045 12.002 4.14397Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const ValueUpdateIcon = () => {
|
||||
return (
|
||||
<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.30511 4.5C1.50348 4.5 1.10202 3.53079 1.66886 2.96396L3.80771 0.825099C4.15911 0.473707 4.72882 0.473708 5.08021 0.825099L7.21907 2.96396C7.78591 3.5308 7.38445 4.5 6.58282 4.5L2.30511 4.5Z" fill="#B7B7C6" />
|
||||
<path d="M2.30511 7.5C1.50348 7.5 1.10202 8.46921 1.66886 9.03604L3.80771 11.1749C4.15911 11.5263 4.72882 11.5263 5.08021 11.1749L7.21907 9.03604C7.78591 8.4692 7.38445 7.5 6.58282 7.5L2.30511 7.5Z" fill="#B7B7C6" />
|
||||
<svg
|
||||
width="9"
|
||||
height="12"
|
||||
viewBox="0 0 9 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.30511 4.5C1.50348 4.5 1.10202 3.53079 1.66886 2.96396L3.80771 0.825099C4.15911 0.473707 4.72882 0.473708 5.08021 0.825099L7.21907 2.96396C7.78591 3.5308 7.38445 4.5 6.58282 4.5L2.30511 4.5Z"
|
||||
fill="#B7B7C6"
|
||||
/>
|
||||
<path
|
||||
d="M2.30511 7.5C1.50348 7.5 1.10202 8.46921 1.66886 9.03604L3.80771 11.1749C4.15911 11.5263 4.72882 11.5263 5.08021 11.1749L7.21907 9.03604C7.78591 8.4692 7.38445 7.5 6.58282 7.5L2.30511 7.5Z"
|
||||
fill="#B7B7C6"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export const ListTaskIcon = () => {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.00008 8.66667H12.6667C13.0349 8.66667 13.3334 8.96514 13.3334 9.33333C13.3334 9.70152 13.0349 10 12.6667 10H6.00008C5.63189 10 5.33341 9.70152 5.33341 9.33333C5.33341 8.96514 5.63189 8.66667 6.00008 8.66667ZM6.00008 11.3333H12.6667C13.0349 11.3333 13.3334 11.6318 13.3334 12C13.3334 12.3682 13.0349 12.6667 12.6667 12.6667H6.00008C5.63189 12.6667 5.33341 12.3682 5.33341 12C5.33341 11.6318 5.63189 11.3333 6.00008 11.3333ZM10.0001 6H12.6667C13.0349 6 13.3334 6.29848 13.3334 6.66667C13.3334 7.03486 13.0349 7.33333 12.6667 7.33333H10.0001C9.63189 7.33333 9.33342 7.03486 9.33342 6.66667C9.33342 6.29848 9.63189 6 10.0001 6ZM5.16184 7.27614L2.66675 4.78105L3.60956 3.83824L5.16184 5.39052L8.55237 2L9.49518 2.94281L5.16184 7.27614Z" fill="#B7B7C6" />
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6.00008 8.66667H12.6667C13.0349 8.66667 13.3334 8.96514 13.3334 9.33333C13.3334 9.70152 13.0349 10 12.6667 10H6.00008C5.63189 10 5.33341 9.70152 5.33341 9.33333C5.33341 8.96514 5.63189 8.66667 6.00008 8.66667ZM6.00008 11.3333H12.6667C13.0349 11.3333 13.3334 11.6318 13.3334 12C13.3334 12.3682 13.0349 12.6667 12.6667 12.6667H6.00008C5.63189 12.6667 5.33341 12.3682 5.33341 12C5.33341 11.6318 5.63189 11.3333 6.00008 11.3333ZM10.0001 6H12.6667C13.0349 6 13.3334 6.29848 13.3334 6.66667C13.3334 7.03486 13.0349 7.33333 12.6667 7.33333H10.0001C9.63189 7.33333 9.33342 7.03486 9.33342 6.66667C9.33342 6.29848 9.63189 6 10.0001 6ZM5.16184 7.27614L2.66675 4.78105L3.60956 3.83824L5.16184 5.39052L8.55237 2L9.49518 2.94281L5.16184 7.27614Z"
|
||||
fill="#B7B7C6"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const LocationPinIcon = () => {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.99992 14C10.3333 11.6 12.6666 9.45093 12.6666 6.8C12.6666 4.14903 10.5773 2 7.99992 2C5.42259 2 3.33325 4.14903 3.33325 6.8C3.33325 9.45093 5.66659 11.6 7.99992 14Z" stroke="#B7B7C6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8 8.66602C9.1046 8.66602 10 7.77062 10 6.66602C10 5.56145 9.1046 4.66602 8 4.66602C6.8954 4.66602 6 5.56145 6 6.66602C6 7.77062 6.8954 8.66602 8 8.66602Z" stroke="#B7B7C6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.99992 14C10.3333 11.6 12.6666 9.45093 12.6666 6.8C12.6666 4.14903 10.5773 2 7.99992 2C5.42259 2 3.33325 4.14903 3.33325 6.8C3.33325 9.45093 5.66659 11.6 7.99992 14Z"
|
||||
stroke="#B7B7C6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 8.66602C9.1046 8.66602 10 7.77062 10 6.66602C10 5.56145 9.1046 4.66602 8 4.66602C6.8954 4.66602 6 5.56145 6 6.66602C6 7.77062 6.8954 8.66602 8 8.66602Z"
|
||||
stroke="#B7B7C6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const ClockThreeIcon = () => {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.5 3.20833V5.5H6.875M9.625 5.5C9.625 7.77819 7.77819 9.625 5.5 9.625C3.22183 9.625 1.375 7.77819 1.375 5.5C1.375 3.22183 3.22183 1.375 5.5 1.375C7.77819 1.375 9.625 3.22183 9.625 5.5Z" stroke="#FCFDFD" stroke-width="0.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.5 3.20833V5.5H6.875M9.625 5.5C9.625 7.77819 7.77819 9.625 5.5 9.625C3.22183 9.625 1.375 7.77819 1.375 5.5C1.375 3.22183 3.22183 1.375 5.5 1.375C7.77819 1.375 9.625 3.22183 9.625 5.5Z"
|
||||
stroke="#FCFDFD"
|
||||
stroke-width="0.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const SlectedTickIcon = () => {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.90747 6.87464C4.98667 6.94724 5.11867 6.94724 5.19787 6.86804L7.67287 4.31384C7.75207 4.23464 7.75207 4.10264 7.66627 4.02344C7.58707 3.94424 7.45507 3.94424 7.37587 4.03004L4.90087 6.58424L5.19127 6.57764L3.68647 5.19824C3.60067 5.11904 3.47527 5.12564 3.39607 5.21144C3.31687 5.29724 3.32347 5.42264 3.40927 5.50184L4.90747 6.87464Z" fill="#FCFDFD" />
|
||||
<path d="M5.53442 9.57422C3.25742 9.57422 1.40942 7.72622 1.40942 5.44922C1.40942 3.17222 3.25742 1.32422 5.53442 1.32422C7.81142 1.32422 9.65942 3.17222 9.65942 5.44922C9.65942 7.72622 7.81142 9.57422 5.53442 9.57422ZM5.53442 1.72022C3.47522 1.72022 1.80542 3.39002 1.80542 5.44922C1.80542 7.50842 3.47522 9.17822 5.53442 9.17822C7.59362 9.17822 9.26342 7.50842 9.26342 5.44922C9.26342 3.39002 7.59362 1.72022 5.53442 1.72022Z" fill="#FCFDFD" />
|
||||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.90747 6.87464C4.98667 6.94724 5.11867 6.94724 5.19787 6.86804L7.67287 4.31384C7.75207 4.23464 7.75207 4.10264 7.66627 4.02344C7.58707 3.94424 7.45507 3.94424 7.37587 4.03004L4.90087 6.58424L5.19127 6.57764L3.68647 5.19824C3.60067 5.11904 3.47527 5.12564 3.39607 5.21144C3.31687 5.29724 3.32347 5.42264 3.40927 5.50184L4.90747 6.87464Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
<path
|
||||
d="M5.53442 9.57422C3.25742 9.57422 1.40942 7.72622 1.40942 5.44922C1.40942 3.17222 3.25742 1.32422 5.53442 1.32422C7.81142 1.32422 9.65942 3.17222 9.65942 5.44922C9.65942 7.72622 7.81142 9.57422 5.53442 9.57422ZM5.53442 1.72022C3.47522 1.72022 1.80542 3.39002 1.80542 5.44922C1.80542 7.50842 3.47522 9.17822 5.53442 9.17822C7.59362 9.17822 9.26342 7.50842 9.26342 5.44922C9.26342 3.39002 7.59362 1.72022 5.53442 1.72022Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const HourGlassIcon = () => {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.98324 5.5C5.98324 6.21872 6.39671 6.55406 6.79659 6.87775C7.29742 7.28394 7.86133 7.74109 7.91957 9.13971H3.07633C3.13456 7.74109 3.69847 7.28394 4.19929 6.87775C4.59918 6.55406 5.01265 6.21872 5.01265 5.5C5.01265 4.78128 4.59918 4.44594 4.19929 4.12225C3.69847 3.71606 3.13456 3.25891 3.07633 1.86029H7.91956C7.86133 3.25891 7.29741 3.71606 6.79659 4.12225C6.39671 4.44594 5.98324 4.78128 5.98324 5.5ZM7.10233 4.49884C7.68468 4.02665 8.40971 3.43896 8.40971 1.61765V1.375H2.58618V1.61764C2.58618 3.43896 3.31121 4.02664 3.89357 4.49884C4.275 4.80846 4.52735 5.01276 4.52735 5.5C4.52735 5.98724 4.275 6.19154 3.89357 6.50116C3.31121 6.97335 2.58618 7.56104 2.58618 9.38235V9.625H8.40971V9.38236C8.40971 7.56104 7.68468 6.97336 7.10233 6.50116C6.72089 6.19154 6.46853 5.98724 6.46853 5.5C6.46853 5.01276 6.72088 4.80846 7.10233 4.49884ZM5.38706 6.85208L4.65814 7.44365C4.33882 7.70231 4.06366 7.92506 3.91613 8.41181H7.07976C6.93223 7.92506 6.65707 7.70231 6.33775 7.44365L5.60884 6.85208C5.54429 6.79967 5.4516 6.79967 5.38706 6.85208Z" fill="#FCFDFD" />
|
||||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5.98324 5.5C5.98324 6.21872 6.39671 6.55406 6.79659 6.87775C7.29742 7.28394 7.86133 7.74109 7.91957 9.13971H3.07633C3.13456 7.74109 3.69847 7.28394 4.19929 6.87775C4.59918 6.55406 5.01265 6.21872 5.01265 5.5C5.01265 4.78128 4.59918 4.44594 4.19929 4.12225C3.69847 3.71606 3.13456 3.25891 3.07633 1.86029H7.91956C7.86133 3.25891 7.29741 3.71606 6.79659 4.12225C6.39671 4.44594 5.98324 4.78128 5.98324 5.5ZM7.10233 4.49884C7.68468 4.02665 8.40971 3.43896 8.40971 1.61765V1.375H2.58618V1.61764C2.58618 3.43896 3.31121 4.02664 3.89357 4.49884C4.275 4.80846 4.52735 5.01276 4.52735 5.5C4.52735 5.98724 4.275 6.19154 3.89357 6.50116C3.31121 6.97335 2.58618 7.56104 2.58618 9.38235V9.625H8.40971V9.38236C8.40971 7.56104 7.68468 6.97336 7.10233 6.50116C6.72089 6.19154 6.46853 5.98724 6.46853 5.5C6.46853 5.01276 6.72088 4.80846 7.10233 4.49884ZM5.38706 6.85208L4.65814 7.44365C4.33882 7.70231 4.06366 7.92506 3.91613 8.41181H7.07976C6.93223 7.92506 6.65707 7.70231 6.33775 7.44365L5.60884 6.85208C5.54429 6.79967 5.4516 6.79967 5.38706 6.85208Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const TargetIcon = () => {
|
||||
return (
|
||||
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025" stroke="#FCFDFD" stroke-width="0.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 11 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025"
|
||||
stroke="#FCFDFD"
|
||||
stroke-width="0.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const ForkLiftIcon = () => {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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" />
|
||||
<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" />
|
||||
<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">
|
||||
<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" />
|
||||
<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)" />
|
||||
<rect
|
||||
width="18.7105"
|
||||
height="18.7105"
|
||||
fill="white"
|
||||
transform="translate(0.644775 0.644531)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
export const RightHalfFillCircleIcon = () => {
|
||||
return (
|
||||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.50391 17.3962C13.8218 17.3962 17.4003 13.8178 17.4003 9.49985C17.4003 5.18983 13.8139 1.60352 9.49594 1.60352C5.17802 1.60352 1.59961 5.18983 1.59961 9.49985C1.59961 13.8178 5.18596 17.3962 9.50391 17.3962ZM9.50391 16.0523C5.86982 16.0523 2.95143 13.1339 2.95143 9.49985C2.95143 5.87373 5.86189 2.95533 9.49594 2.95533L9.50391 16.0523Z" fill="#CCACFF" />
|
||||
<svg
|
||||
width="19"
|
||||
height="19"
|
||||
viewBox="0 0 19 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.50391 17.3962C13.8218 17.3962 17.4003 13.8178 17.4003 9.49985C17.4003 5.18983 13.8139 1.60352 9.49594 1.60352C5.17802 1.60352 1.59961 5.18983 1.59961 9.49985C1.59961 13.8178 5.18596 17.3962 9.50391 17.3962ZM9.50391 16.0523C5.86982 16.0523 2.95143 13.1339 2.95143 9.49985C2.95143 5.87373 5.86189 2.95533 9.49594 2.95533L9.50391 16.0523Z"
|
||||
fill="#CCACFF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export const PerformanceStatsIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.8929 11.25C14.9366 11.25 14.9799 11.2518 15.0228 11.2554L14.8929 11.25C14.9523 11.25 15.0111 11.2534 15.0689 11.26C15.0972 11.2632 15.1255 11.2673 15.1535 11.2721C15.1671 11.2744 15.1804 11.2769 15.1936 11.2795C15.2253 11.2858 15.2571 11.2932 15.2886 11.3015C15.2959 11.3035 15.3028 11.3054 15.3097 11.3073C15.9951 11.5 16.5 12.1568 16.5 12.9375C16.5 13.8695 15.7805 14.625 14.8929 14.625C14.0053 14.625 13.2857 13.8695 13.2857 12.9375C13.2857 12.2836 13.64 11.7165 14.158 11.4363L14.1825 11.4233C14.2082 11.41 14.2343 11.3974 14.2608 11.3855L14.158 11.4363C14.202 11.4126 14.2472 11.3908 14.2934 11.3713C14.3196 11.3603 14.3459 11.35 14.3725 11.3404C14.385 11.3359 14.3977 11.3315 14.4106 11.3273C14.433 11.3199 14.4555 11.313 14.4782 11.3067C14.4957 11.3018 14.5132 11.2972 14.5309 11.293C14.5568 11.2867 14.5833 11.281 14.6101 11.276C14.6214 11.2739 14.6327 11.272 14.644 11.2701C14.6755 11.265 14.7071 11.2608 14.739 11.2576C14.7483 11.2567 14.7576 11.2559 14.767 11.2551C14.8084 11.2517 14.8504 11.25 14.8929 11.25ZM3.10714 11.25C3.1534 11.25 3.1992 11.2521 3.24447 11.2561L3.10714 11.25C3.16574 11.25 3.22361 11.2533 3.28059 11.2597C3.31033 11.2631 3.34005 11.2673 3.3695 11.2724C3.38717 11.2754 3.40441 11.2787 3.42156 11.2823C3.4495 11.2881 3.47724 11.2947 3.5047 11.302C3.51921 11.3059 3.53337 11.3099 3.54745 11.3141C3.58874 11.3264 3.62986 11.3406 3.6702 11.3565C3.67382 11.3579 3.67761 11.3594 3.68139 11.3609C3.7172 11.3753 3.75223 11.3909 3.7866 11.4078C3.79182 11.4103 3.79697 11.4129 3.80211 11.4155C4.3419 11.6879 4.71429 12.267 4.71429 12.9375C4.71429 13.8695 3.99474 14.625 3.10714 14.625C2.21954 14.625 1.5 13.8695 1.5 12.9375C1.5 12.0987 2.08287 11.4028 2.84653 11.2721C2.85718 11.2702 2.86803 11.2685 2.87892 11.2669C2.88372 11.2662 2.88844 11.2655 2.89316 11.2648C2.96309 11.2551 3.03456 11.25 3.10714 11.25ZM11.5949 8.4375C11.8445 8.4375 12.0469 8.64527 12.0469 8.90156C12.0469 8.97298 12.0312 9.04063 12.0031 9.10106L12.0041 9.10327L9.64783 12.9735C9.60495 13.0651 9.54787 13.1483 9.47951 13.2202C9.31535 13.3928 9.08616 13.5 8.83259 13.5C8.33331 13.5 7.92857 13.0845 7.92857 12.5719C7.92857 12.3409 8.01076 12.1296 8.14675 11.9672L8.18282 11.928L8.17932 11.9249L11.3015 8.54545C11.3824 8.47851 11.484 8.4375 11.5949 8.4375ZM11.3313 5.0625C13.51 5.97312 15.0904 8.1232 15.2885 10.6837C15.16 10.6587 15.0279 10.6458 14.8929 10.6458C14.6286 10.6458 14.3753 10.6952 14.1408 10.7855C13.9844 8.73724 12.7454 7.00925 11.0251 6.23205C11.1919 5.93956 11.2978 5.60356 11.3246 5.24409L11.3313 5.0625ZM6.9701 4.92558C6.96756 4.97088 6.96627 5.01653 6.96627 5.0625C6.96627 5.4431 7.05463 5.80203 7.21099 6.1179C5.35305 6.82594 3.99052 8.62072 3.8197 10.7711C3.59683 10.6899 3.35688 10.6458 3.10714 10.6458C2.95794 10.6458 2.81224 10.6616 2.67145 10.6915C2.86628 8.12968 4.44576 5.977 6.62395 5.05909L6.8092 4.98457L6.9701 4.92558ZM9.14881 3.375C9.96607 3.375 10.6408 4.01551 10.7427 4.84453C10.7424 4.84445 10.7419 4.84419 10.7427 4.84453L10.7507 4.92538C10.7542 4.97061 10.756 5.01634 10.756 5.0625C10.756 5.10841 10.7542 5.15388 10.7508 5.19887L10.756 5.0625C10.756 5.124 10.7528 5.18472 10.7467 5.24452C10.7437 5.27412 10.74 5.30333 10.7355 5.3323C10.7329 5.34948 10.73 5.36651 10.7269 5.38345C10.7221 5.40994 10.7166 5.43628 10.7106 5.46237C10.7066 5.47937 10.7025 5.49603 10.6982 5.5126C10.6634 5.64484 10.6137 5.77058 10.551 5.88768C10.5465 5.89622 10.5418 5.90473 10.5371 5.91318C10.5202 5.94358 10.5024 5.97334 10.4837 6.00246C10.4797 6.00881 10.4757 6.01492 10.4717 6.02099C10.1817 6.46144 9.69736 6.75 9.14881 6.75C8.48455 6.75 7.91441 6.32685 7.66955 5.72327C7.66321 5.70712 7.6569 5.69091 7.65082 5.67457C7.64358 5.6555 7.63689 5.63645 7.63052 5.61724C7.62394 5.59704 7.61755 5.57656 7.61154 5.55591C7.59268 5.49135 7.57745 5.42495 7.56608 5.35715C7.56407 5.34507 7.56213 5.33276 7.56033 5.32041C7.54803 5.23618 7.54167 5.15012 7.54167 5.0625C7.54167 4.96409 7.54969 4.86765 7.56508 4.77386C7.56645 4.76554 7.56786 4.75731 7.56933 4.7491C7.70925 3.96687 8.3632 3.375 9.14881 3.375Z"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,130 +4,134 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { RemoveIcon } from "../../../icons/ExportCommonIcons";
|
||||
import PositionInput from "../customInput/PositionInputs";
|
||||
import RotationInput from "../customInput/RotationInput";
|
||||
import { useSelectedFloorItem, useObjectPosition, useObjectRotation } from "../../../../store/builder/store";
|
||||
import {
|
||||
useSelectedFloorItem,
|
||||
useObjectPosition,
|
||||
useObjectRotation,
|
||||
} from "../../../../store/builder/store";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
label: string;
|
||||
value: string;
|
||||
id: number;
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const AssetProperties: React.FC = () => {
|
||||
const [userData, setUserData] = useState<UserData[]>([]);
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { objectPosition } = useObjectPosition();
|
||||
const { objectRotation } = useObjectRotation();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { assets, setCurrentAnimation } = assetStore();
|
||||
const { loopAnimation } = useBuilderStore();
|
||||
const [hoveredIndex, setHoveredIndex] = useState<any>(null);
|
||||
const [userData, setUserData] = useState<UserData[]>([]);
|
||||
const { selectedFloorItem } = useSelectedFloorItem();
|
||||
const { objectPosition } = useObjectPosition();
|
||||
const { objectRotation } = useObjectRotation();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { assets, setCurrentAnimation } = assetStore();
|
||||
const { loopAnimation } = useBuilderStore();
|
||||
const [hoveredIndex, setHoveredIndex] = useState<any>(null);
|
||||
|
||||
const handleAddUserData = () => {
|
||||
};
|
||||
const handleAddUserData = () => {
|
||||
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) {
|
||||
setCurrentAnimation(selectedFloorItem.uuid, animation, true, loopAnimation, true);
|
||||
}
|
||||
const handleAnimationClick = (animation: string) => {
|
||||
if (selectedFloorItem) {
|
||||
setCurrentAnimation(
|
||||
selectedFloorItem.uuid,
|
||||
animation,
|
||||
true,
|
||||
loopAnimation,
|
||||
true
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (!selectedFloorItem) return null;
|
||||
if (!selectedFloorItem) return null;
|
||||
|
||||
return (
|
||||
<div className="asset-properties-container">
|
||||
{/* Name */}
|
||||
<div className="header">{selectedFloorItem.userData.modelName}</div>
|
||||
<section>
|
||||
{objectPosition &&
|
||||
<PositionInput
|
||||
onChange={() => { }}
|
||||
value1={parseFloat(objectPosition.x.toFixed(5))}
|
||||
value2={parseFloat(objectPosition.z.toFixed(5))}
|
||||
/>
|
||||
}
|
||||
{objectRotation &&
|
||||
<RotationInput
|
||||
onChange={() => { }}
|
||||
value={parseFloat(objectRotation.y.toFixed(5))}
|
||||
/>
|
||||
}
|
||||
</section>
|
||||
return (
|
||||
<div className="asset-properties-container">
|
||||
{/* Name */}
|
||||
<div className="header">{selectedFloorItem.userData.modelName}</div>
|
||||
<section>
|
||||
{objectPosition && (
|
||||
<PositionInput
|
||||
onChange={() => {}}
|
||||
value1={parseFloat(objectPosition.x.toFixed(5))}
|
||||
value2={parseFloat(objectPosition.z.toFixed(5))}
|
||||
/>
|
||||
)}
|
||||
{objectRotation && (
|
||||
<RotationInput
|
||||
onChange={() => {}}
|
||||
value={parseFloat(objectRotation.y.toFixed(5))}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="header">Render settings</div>
|
||||
<InputToggle inputKey="visible" label="Visible" />
|
||||
<InputToggle inputKey="frustumCull" label="Frustum cull" />
|
||||
</section>
|
||||
<div className="header">Render settings</div>
|
||||
<section>
|
||||
<InputToggle inputKey="visible" label="Visible" />
|
||||
<InputToggle inputKey="frustumCull" label="Frustum cull" />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="header">User Data</div>
|
||||
{userData.map((data) => (
|
||||
<div className="input-container">
|
||||
<InputWithDropDown
|
||||
key={data.id}
|
||||
label={data.label}
|
||||
value={data.value}
|
||||
editableLabel
|
||||
onChange={(newValue) => handleUserDataChange(data.id, newValue)}
|
||||
/>
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleRemoveUserData(data.id)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add new user data */}
|
||||
<div className="optimize-button" onClick={handleAddUserData}>
|
||||
+ Add
|
||||
</div>
|
||||
</section>
|
||||
<div style={{ display: "flex", flexDirection: "column", outline: "1px solid var(--border-color)" }}>
|
||||
{selectedFloorItem.uuid && <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>Animations</div>}
|
||||
{assets.map((asset) => (
|
||||
<div key={asset.modelUuid} className="asset-item">
|
||||
{asset.modelUuid === selectedFloorItem.uuid &&
|
||||
asset.animations &&
|
||||
asset.animations.length > 0 &&
|
||||
asset.animations.map((animation, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{ gap: "15px", cursor: "pointer", padding: "5px" }}
|
||||
>
|
||||
<div
|
||||
onClick={() => handleAnimationClick(animation)}
|
||||
onMouseEnter={() => setHoveredIndex(index)}
|
||||
onMouseLeave={() => setHoveredIndex(null)}
|
||||
style={{
|
||||
height: "20px",
|
||||
width: "100%",
|
||||
borderRadius: "5px",
|
||||
background:
|
||||
hoveredIndex === index
|
||||
? "#7b4cd3"
|
||||
: "transparent",
|
||||
}}
|
||||
>
|
||||
{animation.charAt(0).toUpperCase() +
|
||||
animation.slice(1).toLowerCase()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<section>
|
||||
<div className="header">User Data</div>
|
||||
{userData.map((data) => (
|
||||
<div className="input-container">
|
||||
<InputWithDropDown
|
||||
key={data.id}
|
||||
label={data.label}
|
||||
value={data.value}
|
||||
editableLabel
|
||||
onChange={(newValue) => handleUserDataChange(data.id, newValue)}
|
||||
/>
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleRemoveUserData(data.id)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add new user data */}
|
||||
<div className="optimize-button" onClick={handleAddUserData}>
|
||||
+ Add
|
||||
</div>
|
||||
);
|
||||
</section>
|
||||
<div className="header">Animations</div>
|
||||
<section className="animations-lists">
|
||||
{assets.map((asset) => (
|
||||
<>
|
||||
{asset.modelUuid === selectedFloorItem.uuid &&
|
||||
asset.animations &&
|
||||
asset.animations.length > 0 &&
|
||||
asset.animations.map((animation, index) => (
|
||||
<div key={index} className="animations-list-wrapper">
|
||||
<div
|
||||
onClick={() => handleAnimationClick(animation)}
|
||||
onMouseEnter={() => setHoveredIndex(index)}
|
||||
onMouseLeave={() => setHoveredIndex(null)}
|
||||
className="animations-list"
|
||||
style={{
|
||||
background:
|
||||
hoveredIndex === index
|
||||
? "#7b4cd3"
|
||||
: "var(--background-color)",
|
||||
}}
|
||||
>
|
||||
{animation.charAt(0).toUpperCase() +
|
||||
animation.slice(1).toLowerCase()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AssetProperties;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
interface DropdownProps {
|
||||
header: string;
|
||||
@@ -14,32 +15,35 @@ const RegularDropDown: React.FC<DropdownProps> = ({
|
||||
options,
|
||||
onSelect,
|
||||
search = true,
|
||||
onClick,
|
||||
onChange,
|
||||
}) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState<string | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState(""); // State to store search term
|
||||
const [filteredOptions, setFilteredOptions] = useState<string[]>(options); // State for filtered options
|
||||
const dropdownRef = useRef<HTMLDivElement>(null); // Ref for the dropdown container
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredOptions, setFilteredOptions] = useState<string[]>(options);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [position, setPosition] = useState<{ top: number; left: number; width: number }>({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
});
|
||||
|
||||
// Reset selectedOption when the dropdown closes
|
||||
// Reset when closed
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setSelectedOption(null);
|
||||
setSearchTerm(""); // Clear the search term when the dropdown closes
|
||||
setFilteredOptions(options); // Reset filtered options when the dropdown closes
|
||||
setSearchTerm("");
|
||||
setFilteredOptions(options);
|
||||
}
|
||||
}, [isOpen, options]);
|
||||
|
||||
// Reset selectedOption when the header prop changes
|
||||
// Reset when header changes
|
||||
useEffect(() => {
|
||||
setSelectedOption(null);
|
||||
setSearchTerm(""); // Reset search term if header changes
|
||||
setFilteredOptions(options); // Reset options if header changes
|
||||
setSearchTerm("");
|
||||
setFilteredOptions(options);
|
||||
}, [header, options]);
|
||||
|
||||
// Close dropdown if clicked outside
|
||||
// Close if clicked outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
@@ -49,77 +53,88 @@ const RegularDropDown: React.FC<DropdownProps> = ({
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
};
|
||||
return () => document.removeEventListener("click", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Toggle the dropdown
|
||||
const toggleDropdown = () => {
|
||||
setIsOpen((prev) => !prev);
|
||||
};
|
||||
// Recalculate position when opening
|
||||
useEffect(() => {
|
||||
if (isOpen && dropdownRef.current) {
|
||||
const rect = dropdownRef.current.getBoundingClientRect();
|
||||
setPosition({
|
||||
top: rect.bottom + window.scrollY,
|
||||
left: rect.left + window.scrollX,
|
||||
width: rect.width,
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const toggleDropdown = () => setIsOpen((prev) => !prev);
|
||||
|
||||
// Handle option selection
|
||||
const handleOptionClick = (option: string) => {
|
||||
setSelectedOption(option);
|
||||
onSelect(option);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
// Handle search input change
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const term = event.target.value;
|
||||
setSearchTerm(term);
|
||||
|
||||
// Filter options based on the search term
|
||||
const filtered = options.filter((option) =>
|
||||
option.toLowerCase().includes(term.toLowerCase())
|
||||
setFilteredOptions(
|
||||
options.filter((option) =>
|
||||
option.toLowerCase().includes(term.toLowerCase())
|
||||
)
|
||||
);
|
||||
setFilteredOptions(filtered);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="regularDropdown-container" ref={dropdownRef}>
|
||||
{/* Dropdown Header */}
|
||||
{/* Header */}
|
||||
<div className="dropdown-header flex-sb" onClick={toggleDropdown}>
|
||||
<div className="key">{selectedOption || header}</div>
|
||||
<div className="icon">▾</div>
|
||||
</div>
|
||||
|
||||
{/* Dropdown Options */}
|
||||
{isOpen && (
|
||||
<div className="dropdown-options">
|
||||
{/* Search Bar */}
|
||||
{search && (
|
||||
<div className="dropdown-search">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filtered Options */}
|
||||
{filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option, index) => (
|
||||
<div
|
||||
className="option"
|
||||
key={index}
|
||||
onClick={() => handleOptionClick(option)}
|
||||
>
|
||||
{option}
|
||||
{/* Options rendered in portal */}
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div
|
||||
className="dropdown-options"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: position.top,
|
||||
left: position.left,
|
||||
width: position.width,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
{search && (
|
||||
<div className="dropdown-search">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="no-options">No options found</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option, index) => (
|
||||
<div
|
||||
className="option"
|
||||
key={index}
|
||||
onClick={() => handleOptionClick(option)}
|
||||
title={option}
|
||||
>
|
||||
{option}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="no-options">No options found</div>
|
||||
)}
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,13 +4,13 @@ import RenameInput from "../inputs/RenameInput";
|
||||
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
||||
import { getZoneData } from "../../../services/visulization/zone/getZones";
|
||||
import useModuleStore, {
|
||||
useSubModuleStore,
|
||||
useSubModuleStore,
|
||||
} from "../../../store/useModuleStore";
|
||||
import {
|
||||
ArrowIcon,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
RemoveIcon,
|
||||
ArrowIcon,
|
||||
EyeIcon,
|
||||
LockIcon,
|
||||
RemoveIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { useZoneAssetId } from "../../../store/builder/store";
|
||||
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
||||
@@ -21,324 +21,347 @@ import { useSceneContext } from "../../../modules/scene/sceneContext";
|
||||
import { useVersionContext } from "../../../modules/builder/version/versionContext";
|
||||
|
||||
interface Asset {
|
||||
id: string;
|
||||
name: string;
|
||||
position?: [number, number, number]; // Proper 3D vector
|
||||
rotation?: { x: number; y: number; z: number }; // Proper rotation format
|
||||
id: string;
|
||||
name: string;
|
||||
position?: [number, number, number]; // Proper 3D vector
|
||||
rotation?: { x: number; y: number; z: number }; // Proper rotation format
|
||||
}
|
||||
|
||||
interface ZoneItem {
|
||||
id: string;
|
||||
name: string;
|
||||
assets?: Asset[];
|
||||
active?: boolean;
|
||||
id: string;
|
||||
name: string;
|
||||
assets?: Asset[];
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
interface ListProps {
|
||||
items?: ZoneItem[];
|
||||
remove?: boolean;
|
||||
items?: ZoneItem[];
|
||||
remove?: boolean;
|
||||
}
|
||||
|
||||
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
const { activeModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
|
||||
const { projectId } = useParams();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { setName } = assetStore();
|
||||
const { organization } = getUserData();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { zoneStore } = useSceneContext();
|
||||
const { zones, setZoneName } = zoneStore();
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
);
|
||||
const { projectId } = useParams();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { setName } = assetStore();
|
||||
const { organization } = getUserData();
|
||||
const { selectedVersionStore } = useVersionContext();
|
||||
const { selectedVersion } = selectedVersionStore();
|
||||
const { zoneStore } = useSceneContext();
|
||||
const { zones, setZoneName } = zoneStore();
|
||||
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
useEffect(() => {
|
||||
useSelectedZoneStore.getState().setSelectedZone({
|
||||
zoneName: "",
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
zoneUuid: "",
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: [],
|
||||
widgets: [],
|
||||
});
|
||||
}, [activeModule]);
|
||||
|
||||
useEffect(() => {
|
||||
const expanded: Record<string, boolean> = { "unassigned-zone": true };
|
||||
if (zones.length > 0) {
|
||||
zones.forEach((zone: any) => {
|
||||
expanded[zone.zoneUuid] = true;
|
||||
});
|
||||
}
|
||||
setExpandedZones(expanded);
|
||||
// eslint-disable-next-line
|
||||
}, [zones.length]);
|
||||
|
||||
const toggleZoneExpansion = (zoneUuid: string) => {
|
||||
setExpandedZones((prev) => ({
|
||||
...prev,
|
||||
[zoneUuid]: !prev[zoneUuid],
|
||||
}));
|
||||
};
|
||||
|
||||
async function handleSelectZone(id: string) {
|
||||
try {
|
||||
if (selectedZone?.zoneUuid === id || id === "unassigned-zone") {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubModule("zoneProperties");
|
||||
|
||||
let response = await getZoneData(
|
||||
id,
|
||||
organization,
|
||||
projectId,
|
||||
selectedVersion?.versionId || ""
|
||||
);
|
||||
|
||||
if (!response) return;
|
||||
|
||||
setSelectedZone({
|
||||
zoneName: response?.zoneName,
|
||||
activeSides: response?.activeSides ?? [],
|
||||
panelOrder: response?.panelOrder ?? [],
|
||||
lockedPanels: response?.lockedPanels ?? [],
|
||||
widgets: response?.widgets ?? [],
|
||||
zoneUuid: response?.zoneUuid,
|
||||
zoneViewPortTarget: response?.viewPortTarget ?? [],
|
||||
zoneViewPortPosition: response?.viewPortPosition ?? [],
|
||||
});
|
||||
} catch (error) {
|
||||
echo.error("Failed to select zone");
|
||||
}
|
||||
}
|
||||
|
||||
function handleAssetClick(asset: Asset) {
|
||||
setZoneAssetId(asset);
|
||||
}
|
||||
|
||||
async function handleZoneNameChange(newName: string) {
|
||||
const isDuplicate = zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
|
||||
zone.zoneUuid !== selectedZone.zoneUuid
|
||||
);
|
||||
|
||||
if (isDuplicate) {
|
||||
alert("Zone name already exists. Please choose a different name.");
|
||||
return; // DO NOT update state
|
||||
}
|
||||
const zonesdata = {
|
||||
zoneUuid: selectedZone.zoneUuid,
|
||||
zoneName: newName,
|
||||
};
|
||||
const response = await zoneCameraUpdate(
|
||||
zonesdata,
|
||||
organization,
|
||||
projectId,
|
||||
selectedVersion?.versionId || ""
|
||||
);
|
||||
if (response.message === "zone updated") {
|
||||
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
||||
setZoneName(selectedZone.zoneUuid, newName);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleZoneAssetName(newName: string) {
|
||||
if (zoneAssetId?.id) {
|
||||
let response = await setAssetsApi({
|
||||
modelUuid: zoneAssetId.id,
|
||||
modelName: newName,
|
||||
projectId,
|
||||
});
|
||||
// console.log("response: ", response);
|
||||
|
||||
setName(zoneAssetId.id, response.modelName);
|
||||
}
|
||||
}
|
||||
const checkZoneNameDuplicate = (name: string) => {
|
||||
return zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
|
||||
zone.zoneUuid !== selectedZone.zoneUuid
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
let drag = false;
|
||||
let isLeftMouseDown = false;
|
||||
|
||||
const contextClassNames = [
|
||||
"list-wrapper",
|
||||
"zone-properties-container",
|
||||
"list-container",
|
||||
];
|
||||
|
||||
const isOutsideClick = (target: EventTarget | null) => {
|
||||
if (!(target instanceof HTMLElement)) return true;
|
||||
return !contextClassNames.some((className) =>
|
||||
target.closest(`.${className}`)
|
||||
);
|
||||
};
|
||||
|
||||
const onMouseDown = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = true;
|
||||
drag = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseMove = () => {
|
||||
if (isLeftMouseDown) {
|
||||
drag = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = false;
|
||||
if (drag) return;
|
||||
|
||||
if (isOutsideClick(evt.target)) {
|
||||
// Clear selected zone
|
||||
setSelectedZone({
|
||||
zoneUuid: "",
|
||||
zoneName: "",
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
zoneUuid: "",
|
||||
widgets: [],
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: [],
|
||||
widgets: [],
|
||||
});
|
||||
}, [activeModule]);
|
||||
|
||||
useEffect(() => {
|
||||
const expanded: Record<string, boolean> = { "unassigned-zone": true };
|
||||
if (zones.length > 0) {
|
||||
zones.forEach((zone: any) => {
|
||||
expanded[zone.zoneUuid] = true;
|
||||
});
|
||||
});
|
||||
setZoneAssetId({
|
||||
id: "",
|
||||
name: "",
|
||||
});
|
||||
setSubModule("properties");
|
||||
}
|
||||
setExpandedZones(expanded);
|
||||
}, [zones.length]);
|
||||
|
||||
const toggleZoneExpansion = (zoneUuid: string) => {
|
||||
setExpandedZones((prev) => ({
|
||||
...prev,
|
||||
[zoneUuid]: !prev[zoneUuid],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
async function handleSelectZone(id: string) {
|
||||
|
||||
try {
|
||||
if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') {
|
||||
return;
|
||||
}
|
||||
|
||||
setSubModule("zoneProperties");
|
||||
|
||||
let response = await getZoneData(
|
||||
id,
|
||||
organization,
|
||||
projectId,
|
||||
selectedVersion?.versionId || ""
|
||||
);
|
||||
|
||||
if (!response) return;
|
||||
|
||||
setSelectedZone({
|
||||
zoneName: response?.zoneName,
|
||||
activeSides: response?.activeSides ?? [],
|
||||
panelOrder: response?.panelOrder ?? [],
|
||||
lockedPanels: response?.lockedPanels ?? [],
|
||||
widgets: response?.widgets ?? [],
|
||||
zoneUuid: response?.zoneUuid,
|
||||
zoneViewPortTarget: response?.viewPortTarget ?? [],
|
||||
zoneViewPortPosition: response?.viewPortPosition ?? [],
|
||||
});
|
||||
} catch (error) {
|
||||
echo.error("Failed to select zone");
|
||||
}
|
||||
if (selectedZone.zoneName! === "" && activeModule === "Builder") {
|
||||
document.addEventListener("mousedown", onMouseDown);
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}
|
||||
|
||||
function handleAssetClick(asset: Asset) {
|
||||
setZoneAssetId(asset);
|
||||
}
|
||||
|
||||
async function handleZoneNameChange(newName: string) {
|
||||
const isDuplicate = zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName?.trim().toLowerCase() === newName?.trim().toLowerCase() &&
|
||||
zone.zoneUuid !== selectedZone.zoneUuid
|
||||
);
|
||||
|
||||
if (isDuplicate) {
|
||||
alert("Zone name already exists. Please choose a different name.");
|
||||
return; // DO NOT update state
|
||||
}
|
||||
const zonesdata = {
|
||||
zoneUuid: selectedZone.zoneUuid,
|
||||
zoneName: newName,
|
||||
};
|
||||
const response = await zoneCameraUpdate(
|
||||
zonesdata,
|
||||
organization,
|
||||
projectId,
|
||||
selectedVersion?.versionId || ""
|
||||
);
|
||||
if (response.message === "zone updated") {
|
||||
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
||||
setZoneName(selectedZone.zoneUuid, newName);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleZoneAssetName(newName: string) {
|
||||
if (zoneAssetId?.id) {
|
||||
let response = await setAssetsApi({
|
||||
modelUuid: zoneAssetId.id,
|
||||
modelName: newName,
|
||||
projectId,
|
||||
});
|
||||
// console.log("response: ", response);
|
||||
|
||||
setName(zoneAssetId.id, response.modelName);
|
||||
}
|
||||
}
|
||||
const checkZoneNameDuplicate = (name: string) => {
|
||||
return zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&
|
||||
zone.zoneUuid !== selectedZone.zoneUuid
|
||||
);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onMouseDown);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
};
|
||||
// eslint-disable-next-line
|
||||
}, [selectedZone, activeModule]);
|
||||
|
||||
useEffect(() => {
|
||||
let drag = false;
|
||||
let isLeftMouseDown = false;
|
||||
|
||||
const contextClassNames = [
|
||||
"list-wrapper",
|
||||
"zone-properties-container",
|
||||
"list-container",
|
||||
];
|
||||
|
||||
const isOutsideClick = (target: EventTarget | null) => {
|
||||
if (!(target instanceof HTMLElement)) return true;
|
||||
return !contextClassNames.some((className) =>
|
||||
target.closest(`.${className}`)
|
||||
);
|
||||
};
|
||||
|
||||
const onMouseDown = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = true;
|
||||
drag = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseMove = () => {
|
||||
if (isLeftMouseDown) {
|
||||
drag = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onMouseUp = (evt: MouseEvent) => {
|
||||
if (evt.button === 0) {
|
||||
isLeftMouseDown = false;
|
||||
if (drag) return;
|
||||
|
||||
if (isOutsideClick(evt.target)) {
|
||||
// Clear selected zone
|
||||
setSelectedZone({
|
||||
zoneUuid: "",
|
||||
zoneName: "",
|
||||
activeSides: [],
|
||||
panelOrder: [],
|
||||
lockedPanels: [],
|
||||
widgets: [],
|
||||
zoneViewPortTarget: [],
|
||||
zoneViewPortPosition: [],
|
||||
});
|
||||
setZoneAssetId({
|
||||
id: "",
|
||||
name: "",
|
||||
});
|
||||
setSubModule("properties");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (selectedZone.zoneName! === "" && activeModule === "Builder") {
|
||||
document.addEventListener("mousedown", onMouseDown);
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
document.addEventListener("mouseup", onMouseUp);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onMouseDown);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
};
|
||||
}, [selectedZone, activeModule]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{items?.length > 0 ? (
|
||||
<ul className="list-wrapper">
|
||||
{items?.map((item) => (
|
||||
<React.Fragment key={`zone-${item.id}`}>
|
||||
<li
|
||||
className="list-container"
|
||||
onClick={() => {
|
||||
handleSelectZone(item.id);
|
||||
toggleZoneExpansion(item.id);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="zone-header">
|
||||
<button className="value" id="zone-name">
|
||||
<RenameInput
|
||||
value={item.name}
|
||||
onRename={handleZoneNameChange}
|
||||
checkDuplicate={checkZoneNameDuplicate}
|
||||
canEdit={item.id !== 'unassigned-zone'}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="options-container">
|
||||
<div className="lock option">
|
||||
<LockIcon isLocked />
|
||||
</div>
|
||||
<div className="visibe option">
|
||||
<EyeIcon isClosed />
|
||||
</div>
|
||||
{remove && (
|
||||
<div className="remove option">
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
{item.assets && item.assets.length > 0 && (
|
||||
<button
|
||||
id="expand-btn"
|
||||
className="expand-icon option"
|
||||
onClick={() => toggleZoneExpansion(item.id)}
|
||||
>
|
||||
<ArrowIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{/* Nested assets list - only shown when expanded */}
|
||||
{item.assets &&
|
||||
item.assets.length > 0 &&
|
||||
expandedZones[item.id] && (
|
||||
<ul className="asset-list">
|
||||
{item.assets.map((asset) => (
|
||||
<li
|
||||
key={`asset-${asset.id}`}
|
||||
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="list-item">
|
||||
<button
|
||||
id={`${asset.name}-${asset.id}`}
|
||||
className="value"
|
||||
onClick={() => handleAssetClick(asset)}
|
||||
>
|
||||
<RenameInput
|
||||
value={asset.name}
|
||||
onRename={handleZoneAssetName}
|
||||
/>
|
||||
</button>
|
||||
<div className="options-container">
|
||||
<button className="lock option" id="lock-btn">
|
||||
<LockIcon isLocked />
|
||||
</button>
|
||||
<button className="visibe option" id="visible-btn">
|
||||
<EyeIcon isClosed />
|
||||
</button>
|
||||
{remove && (
|
||||
<button className="remove option" id="remove-btn">
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="list-wrapper">
|
||||
<div className="no-item">No items to display</div>
|
||||
return (
|
||||
<>
|
||||
{items?.length > 0 ? (
|
||||
<ul className="list-wrapper">
|
||||
{items?.map((item) => (
|
||||
<React.Fragment key={`zone-${item.id}`}>
|
||||
<li
|
||||
className="list-container"
|
||||
onClick={() => {
|
||||
handleSelectZone(item.id);
|
||||
toggleZoneExpansion(item.id);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`list-item ${
|
||||
selectedZone.zoneUuid === item.id ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="zone-header">
|
||||
<button className="value" id="zone-name">
|
||||
<RenameInput
|
||||
value={item.name}
|
||||
onRename={handleZoneNameChange}
|
||||
checkDuplicate={checkZoneNameDuplicate}
|
||||
canEdit={item.id !== "unassigned-zone"}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="options-container">
|
||||
<div className="lock option">
|
||||
<LockIcon isLocked />
|
||||
</div>
|
||||
<div className="visibe option">
|
||||
<EyeIcon isClosed />
|
||||
</div>
|
||||
{remove && (
|
||||
<div className="remove option">
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
)}
|
||||
{item.assets && item.assets.length > 0 && (
|
||||
<button
|
||||
id="expand-btn"
|
||||
className="expand-icon option"
|
||||
onClick={() => toggleZoneExpansion(item.id)}
|
||||
>
|
||||
<ArrowIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
</li>
|
||||
{/* Nested assets list - only shown when expanded */}
|
||||
{item.assets &&
|
||||
item.assets.length > 0 &&
|
||||
expandedZones[item.id] && (
|
||||
<ul className="asset-list">
|
||||
{item.assets.map((asset) => (
|
||||
<li
|
||||
key={`asset-${asset.id}`}
|
||||
className={`list-container asset-item ${
|
||||
zoneAssetId?.id === asset.id ? "active" : ""
|
||||
}`}
|
||||
onClick={() => handleAssetClick(asset)}
|
||||
>
|
||||
<div className="list-item">
|
||||
<button
|
||||
id={`${asset.name}-${asset.id}`}
|
||||
className="value"
|
||||
>
|
||||
<RenameInput
|
||||
value={asset.name}
|
||||
onRename={handleZoneAssetName}
|
||||
/>
|
||||
</button>
|
||||
<div className="options-container">
|
||||
<button
|
||||
className="lock option"
|
||||
id="lock-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<LockIcon isLocked />
|
||||
</button>
|
||||
<button
|
||||
className="visibe option"
|
||||
id="visible-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<EyeIcon isClosed />
|
||||
</button>
|
||||
{remove && (
|
||||
<button
|
||||
className="remove option"
|
||||
id="remove-btn"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="list-wrapper">
|
||||
<div className="no-item">No items to display</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default List;
|
||||
|
||||
@@ -1,187 +1,216 @@
|
||||
import React from "react";
|
||||
import { ArrayIcon, CopyIcon, DeleteIcon, DublicateIcon, FlipXAxisIcon, FlipZAxisIcon, FocusIcon, GroupIcon, ModifiersIcon, MoveIcon, PasteIcon, RenameIcon, RotateIcon, SubMenuIcon, TransformIcon } from "../../icons/ContextMenuIcons";
|
||||
import {
|
||||
ArrayIcon,
|
||||
CopyIcon,
|
||||
DeleteIcon,
|
||||
DublicateIcon,
|
||||
FlipXAxisIcon,
|
||||
FlipZAxisIcon,
|
||||
FocusIcon,
|
||||
GroupIcon,
|
||||
ModifiersIcon,
|
||||
MoveIcon,
|
||||
PasteIcon,
|
||||
RenameIcon,
|
||||
RotateIcon,
|
||||
SubMenuIcon,
|
||||
TransformIcon,
|
||||
} from "../../icons/ContextMenuIcons";
|
||||
|
||||
// Union of valid visibility keys
|
||||
type VisibilityKey =
|
||||
| "rename"
|
||||
| "focus"
|
||||
| "flipX"
|
||||
| "flipZ"
|
||||
| "move"
|
||||
| "rotate"
|
||||
| "duplicate"
|
||||
| "copy"
|
||||
| "paste"
|
||||
| "modifier"
|
||||
| "group"
|
||||
| "array"
|
||||
| "delete"
|
||||
| "transform" // virtual key for submenu
|
||||
| "groupArray"; // virtual key for submenu
|
||||
|
||||
type ContextMenuProps = {
|
||||
visibility: {
|
||||
rename: boolean;
|
||||
focus: boolean;
|
||||
flipX: boolean;
|
||||
flipZ: boolean;
|
||||
move: boolean;
|
||||
rotate: boolean;
|
||||
duplicate: boolean;
|
||||
copy: boolean;
|
||||
paste: boolean;
|
||||
modifier: boolean;
|
||||
group: boolean;
|
||||
array: boolean;
|
||||
delete: boolean;
|
||||
};
|
||||
onRename: () => void;
|
||||
onFocus: () => void;
|
||||
onFlipX: () => void;
|
||||
onFlipZ: () => void;
|
||||
onMove: () => void;
|
||||
onRotate: () => void;
|
||||
onDuplicate: () => void;
|
||||
onCopy: () => void;
|
||||
onPaste: () => void;
|
||||
onGroup: () => void;
|
||||
onArray: () => void;
|
||||
onDelete: () => void;
|
||||
visibility: Record<
|
||||
Exclude<VisibilityKey, "transform" | "groupArray">,
|
||||
boolean
|
||||
>;
|
||||
onRename: () => void;
|
||||
onFocus: () => void;
|
||||
onFlipX: () => void;
|
||||
onFlipZ: () => void;
|
||||
onMove: () => void;
|
||||
onRotate: () => void;
|
||||
onDuplicate: () => void;
|
||||
onCopy: () => void;
|
||||
onPaste: () => void;
|
||||
onGroup: () => void;
|
||||
onArray: () => void;
|
||||
onDelete: () => void;
|
||||
};
|
||||
|
||||
type MenuItem = {
|
||||
key: VisibilityKey;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
shortcut?: string;
|
||||
onClick?: () => void;
|
||||
submenuIcon?: React.ReactNode;
|
||||
children?: MenuItem[];
|
||||
};
|
||||
|
||||
const ContextMenu: React.FC<ContextMenuProps> = ({
|
||||
visibility,
|
||||
onRename,
|
||||
onFocus,
|
||||
onFlipX,
|
||||
onFlipZ,
|
||||
onMove,
|
||||
onRotate,
|
||||
onDuplicate,
|
||||
onCopy,
|
||||
onPaste,
|
||||
onGroup,
|
||||
onArray,
|
||||
onDelete,
|
||||
visibility,
|
||||
onRename,
|
||||
onFocus,
|
||||
onFlipX,
|
||||
onFlipZ,
|
||||
onMove,
|
||||
onRotate,
|
||||
onDuplicate,
|
||||
onCopy,
|
||||
onPaste,
|
||||
onGroup,
|
||||
onArray,
|
||||
onDelete,
|
||||
}) => {
|
||||
const items: MenuItem[] = [
|
||||
{
|
||||
key: "rename",
|
||||
label: "Rename",
|
||||
icon: <RenameIcon />,
|
||||
shortcut: "F2",
|
||||
onClick: onRename,
|
||||
},
|
||||
{
|
||||
key: "focus",
|
||||
label: "Focus",
|
||||
icon: <FocusIcon />,
|
||||
shortcut: "F",
|
||||
onClick: onFocus,
|
||||
},
|
||||
{
|
||||
key: "flipX",
|
||||
label: "Flip to X axis",
|
||||
icon: <FlipXAxisIcon />,
|
||||
onClick: onFlipX,
|
||||
},
|
||||
{
|
||||
key: "flipZ",
|
||||
label: "Flip to Z axis",
|
||||
icon: <FlipZAxisIcon />,
|
||||
onClick: onFlipZ,
|
||||
},
|
||||
{
|
||||
key: "transform",
|
||||
label: "Transform",
|
||||
icon: <TransformIcon />,
|
||||
submenuIcon: <SubMenuIcon />,
|
||||
children: [
|
||||
{
|
||||
key: "move",
|
||||
label: "Move",
|
||||
icon: <MoveIcon />,
|
||||
shortcut: "G",
|
||||
onClick: onMove,
|
||||
},
|
||||
{
|
||||
key: "rotate",
|
||||
label: "Rotate",
|
||||
icon: <RotateIcon />,
|
||||
shortcut: "R",
|
||||
onClick: onRotate,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "duplicate",
|
||||
label: "Duplicate",
|
||||
icon: <DublicateIcon />,
|
||||
shortcut: "Ctrl + D",
|
||||
onClick: onDuplicate,
|
||||
},
|
||||
{
|
||||
key: "copy",
|
||||
label: "Copy Objects",
|
||||
icon: <CopyIcon />,
|
||||
shortcut: "Ctrl + C",
|
||||
onClick: onCopy,
|
||||
},
|
||||
{
|
||||
key: "paste",
|
||||
label: "Paste Objects",
|
||||
icon: <PasteIcon />,
|
||||
shortcut: "Ctrl + V",
|
||||
onClick: onPaste,
|
||||
},
|
||||
{ key: "modifier", label: "Modifiers", icon: <ModifiersIcon /> },
|
||||
{
|
||||
key: "groupArray",
|
||||
label: "Group / Array",
|
||||
children: [
|
||||
{
|
||||
key: "group",
|
||||
label: "Group",
|
||||
icon: <GroupIcon />,
|
||||
shortcut: "Ctrl + G",
|
||||
onClick: onGroup,
|
||||
},
|
||||
{ key: "array", label: "Array", icon: <ArrayIcon />, onClick: onArray },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "delete",
|
||||
label: "Delete",
|
||||
icon: <DeleteIcon />,
|
||||
shortcut: "X",
|
||||
onClick: onDelete,
|
||||
},
|
||||
];
|
||||
|
||||
const renderItem = (item: MenuItem): React.ReactNode => {
|
||||
if (item.children) {
|
||||
const children = item.children.filter(
|
||||
(child) => visibility[child.key as keyof typeof visibility]
|
||||
);
|
||||
if (!children.length) return null;
|
||||
|
||||
return (
|
||||
<div className="menuItem" key={item.key}>
|
||||
<button className="button more">
|
||||
<div className="value">
|
||||
<div className="icon">{item.icon}</div>
|
||||
<span>{item.label}</span>
|
||||
</div>
|
||||
{item.submenuIcon && <div className="more">{item.submenuIcon}</div>}
|
||||
</button>
|
||||
<div className="submenu">{children.map(renderItem)}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!visibility[item.key as keyof typeof visibility]) return null;
|
||||
|
||||
return (
|
||||
<div className="context-menu">
|
||||
{visibility.rename && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onRename}>
|
||||
<div className="icon"><RenameIcon /></div>
|
||||
<span>Rename</span>
|
||||
</button>
|
||||
<span className="shortcut">F2</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.focus && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onFocus}>
|
||||
<div className="icon"><FocusIcon /></div>
|
||||
<span>Focus</span>
|
||||
</button>
|
||||
<span className="shortcut">F</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.flipX && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onFlipX}>
|
||||
<div className="icon"><FlipXAxisIcon /></div>
|
||||
<span>Flip to X axis</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{visibility.flipZ && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onFlipZ}>
|
||||
<div className="icon"><FlipZAxisIcon /></div>
|
||||
<span>Flip to Z axis</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{(visibility.move || visibility.rotate) && (
|
||||
<div className="menuItem">
|
||||
<button className="button">
|
||||
<div className="icon"><TransformIcon /></div>
|
||||
<span>Transform</span>
|
||||
</button>
|
||||
<div className="more"><SubMenuIcon /></div>
|
||||
<div className="submenu">
|
||||
{visibility.move && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onMove}>
|
||||
<div className="icon"><MoveIcon /></div>
|
||||
<span>Move</span>
|
||||
</button>
|
||||
<span className="shortcut">G</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.rotate && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onRotate}>
|
||||
<div className="icon"><RotateIcon /></div>
|
||||
<span>Rotate</span>
|
||||
</button>
|
||||
<span className="shortcut">R</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{visibility.duplicate && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onDuplicate}>
|
||||
<div className="icon"><DublicateIcon /></div>
|
||||
<span>Duplicate</span>
|
||||
</button>
|
||||
<span className="shortcut">Ctrl + D</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.copy && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onCopy}>
|
||||
<div className="icon"><CopyIcon /></div>
|
||||
<span>Copy Objects</span>
|
||||
</button>
|
||||
<span className="shortcut">Ctrl + C</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.paste && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onPaste}>
|
||||
<div className="icon"><PasteIcon /></div>
|
||||
<span>Paste Objects</span>
|
||||
</button>
|
||||
<span className="shortcut">Ctrl + V</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.modifier && (
|
||||
<div className="menuItem">
|
||||
<div className="icon"><ModifiersIcon /></div>
|
||||
<button className="button">Modifiers</button>
|
||||
</div>
|
||||
)}
|
||||
{(visibility.group || visibility.array) && (
|
||||
<div className="menuItem">
|
||||
<button className="button">Group / Array</button>
|
||||
<div className="submenu">
|
||||
{visibility.group && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onGroup}>
|
||||
<GroupIcon />
|
||||
<span>Group</span>
|
||||
</button>
|
||||
<span className="shortcut">Ctrl + G</span>
|
||||
</div>
|
||||
)}
|
||||
{visibility.array && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onArray}>
|
||||
<div className="icon"><ArrayIcon /></div>
|
||||
<span>Array</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{visibility.delete && (
|
||||
<div className="menuItem">
|
||||
<button className="button" onClick={onDelete}>
|
||||
<div className="icon"><DeleteIcon /></div>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
<span className="shortcut">X</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="menuItem" key={item.key}>
|
||||
<button
|
||||
className={`${item.key === "delete" ? "delete " : ""}button`}
|
||||
onClick={item.onClick}
|
||||
>
|
||||
<div className="icon">{item.icon}</div>
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
{item.shortcut && <span className="shortcut">{item.shortcut}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return <div className="context-menu">{items.map(renderItem)}</div>;
|
||||
};
|
||||
|
||||
export default ContextMenu;
|
||||
|
||||
@@ -2,61 +2,75 @@
|
||||
@use "../../abstracts/mixins" as *;
|
||||
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(50px);
|
||||
color: var(--text-button-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 6px;
|
||||
z-index: 1000;
|
||||
min-width: 200px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(50px);
|
||||
color: var(--text-button-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 10px;
|
||||
z-index: 1000;
|
||||
min-width: 200px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.menuItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.submenu {
|
||||
display: none;
|
||||
min-width: 178px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%; // place directly beside
|
||||
|
||||
.menuItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.submenu {
|
||||
display: none;
|
||||
min-width: 178px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%; // place directly beside
|
||||
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(50px);
|
||||
color: var(--text-button-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
// Keep submenu open while hovering parent OR submenu
|
||||
&:hover .submenu,
|
||||
.submenu:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-button);
|
||||
}
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(50px);
|
||||
color: var(--text-button-color);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
z-index: 1000;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 5px 8px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
&:hover {
|
||||
color: var(--text-button-color);
|
||||
background-color: var(--background-color-button);
|
||||
}
|
||||
}
|
||||
.button.delete {
|
||||
&:hover {
|
||||
background-color: #e02e16;
|
||||
}
|
||||
}
|
||||
.button.more {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
}
|
||||
// Keep submenu open while hovering parent OR submenu
|
||||
&:hover .submenu,
|
||||
.submenu:hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
height: 100%;
|
||||
color: var(--text-color);
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logs-detail {
|
||||
|
||||
@@ -231,43 +231,49 @@ input[type="number"] {
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: #{$border-radius-large};
|
||||
z-index: 10;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
left: 0;
|
||||
top: 110%;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.dropdown-search {
|
||||
margin-bottom: 4px;
|
||||
.key{
|
||||
width: calc(100% - 18px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
&:hover {
|
||||
color: var(--highlight-text-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.icon {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.dropdown-options {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: #{$border-radius-large};
|
||||
z-index: 10;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
left: 0;
|
||||
top: 110%;
|
||||
padding: 4px;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.dropdown-search {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
border-radius: #{$border-radius-medium};
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
color: var(--highlight-text-color);
|
||||
background: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input.default {
|
||||
width: 100%;
|
||||
|
||||
@@ -144,4 +144,7 @@
|
||||
.log-nav-container{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.log-entry-wrapper{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user