Refactor event properties components to use section elements for better semantics and styling consistency; update mechanics components to enhance layout and improve user experience; modify simulation component to manage open/close state for event lists; enhance file menu with project icon; improve input toggle styles; standardize color variables in SCSS; adjust sidebar styles for better visual hierarchy; implement backdrop filters for improved UI aesthetics; and refine overall component styling for consistency across the application.
This commit is contained in:
parent
45fea9465e
commit
0b0e1e3d8b
|
|
@ -9,7 +9,7 @@ export function SearchIcon() {
|
|||
>
|
||||
<path
|
||||
d="M17.682 17.3859C17.8951 17.5615 18.2102 17.5311 18.3859 17.318C18.5615 17.1049 18.5311 16.7898 18.318 16.6141L17.682 17.3859ZM15.2256 10.8149C15.2256 13.1933 13.277 15.1298 10.8628 15.1298V16.1298C13.8199 16.1298 16.2256 13.7549 16.2256 10.8149H15.2256ZM10.8628 15.1298C8.44862 15.1298 6.5 13.1933 6.5 10.8149H5.5C5.5 13.7549 7.9057 16.1298 10.8628 16.1298V15.1298ZM6.5 10.8149C6.5 8.4365 8.44862 6.5 10.8628 6.5V5.5C7.9057 5.5 5.5 7.87489 5.5 10.8149H6.5ZM10.8628 6.5C13.277 6.5 15.2256 8.4365 15.2256 10.8149H16.2256C16.2256 7.87489 13.8199 5.5 10.8628 5.5V6.5ZM14.1274 14.4565L17.682 17.3859L18.318 16.6141L14.7634 13.6848L14.1274 14.4565Z"
|
||||
fill="var(--text-disabled)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -24,7 +24,7 @@ export function ArrowIcon() {
|
|||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--icon-default-color)" />
|
||||
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--icon-default-color-active)" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ export function ZoneIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M1.66665 16.6667H2.49998V17.5H0.833313V15.8333H1.66665V16.6667ZM18.3333 16.6667H17.5V17.5H19.1666V15.8333H18.3333V16.6667ZM0.833313 4.16667H1.66665V3.33333H2.49998V2.5H0.833313V4.16667ZM1.66665 5.83333H0.833313V7.5H1.66665V5.83333ZM1.66665 9.16667H0.833313V10.8333H1.66665V9.16667ZM18.3333 7.5H19.1666V5.83333H18.3333V7.5ZM18.3333 10.8333H19.1666V9.16667H18.3333V10.8333ZM1.66665 12.5H0.833313V14.1667H1.66665V12.5ZM18.3333 14.1667H19.1666V12.5H18.3333V14.1667ZM4.16665 3.33333H5.83331V2.5H4.16665V3.33333ZM9.16665 3.33333V2.5H7.49998V3.33333H9.16665ZM10.8333 3.33333H12.5V2.5H10.8333V3.33333ZM15.8333 2.5H14.1666V3.33333H15.8333V2.5ZM4.16665 17.5H5.83331V16.6667H4.16665V17.5ZM7.49998 17.5H9.16665V16.6667H7.49998V17.5ZM10.8333 17.5H12.5V16.6667H10.8333V17.5ZM14.1666 17.5H15.8333V16.6667H14.1666V17.5ZM17.5 3.33333H18.3333V4.16667H19.1666V2.5H17.5V3.33333ZM10.4166 6.66667V8.33333C10.4164 8.55428 10.3286 8.76611 10.1723 8.92235C10.0161 9.07858 9.80426 9.16645 9.58331 9.16667H4.16665C3.9457 9.16645 3.73387 9.07858 3.57763 8.92235C3.4214 8.76611 3.33353 8.55428 3.33331 8.33333V6.66667C3.33353 6.44572 3.4214 6.23389 3.57763 6.07765C3.73387 5.92142 3.9457 5.83355 4.16665 5.83333H9.58331C9.80426 5.83355 10.0161 5.92142 10.1723 6.07765C10.3286 6.23389 10.4164 6.44572 10.4166 6.66667ZM9.58415 8.33333L9.58331 6.66667H4.16665V8.33333H9.58415ZM16.6666 11.6667V13.3333C16.6664 13.5543 16.5786 13.7661 16.4223 13.9223C16.2661 14.0786 16.0543 14.1664 15.8333 14.1667H11.25C11.029 14.1664 10.8172 14.0786 10.661 13.9223C10.5047 13.7661 10.4169 13.5543 10.4166 13.3333V11.6667C10.4169 11.4457 10.5047 11.2339 10.661 11.0777C10.8172 10.9214 11.029 10.8336 11.25 10.8333H15.8333C16.0543 10.8336 16.2661 10.9214 16.4223 11.0777C16.5786 11.2339 16.6664 11.4457 16.6666 11.6667ZM15.8341 13.3333L15.8333 11.6667H11.25V13.3333H15.8341Z"
|
||||
fill={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M7.7443 13.5777V11.911C7.74408 11.69 7.65621 11.4782 7.49998 11.322C7.34375 11.1657 7.13191 11.0779 6.91097 11.0777H4.16665C3.9457 11.0779 3.73387 11.1657 3.57764 11.322C3.4214 11.4782 3.33353 11.69 3.33331 11.911V13.5777C3.33353 13.7986 3.4214 14.0104 3.57764 14.1667C3.73387 14.3229 3.9457 14.4108 4.16665 14.411H6.91097C7.13191 14.4108 7.34375 14.3229 7.49998 14.1667C7.65621 14.0104 7.74408 13.7986 7.7443 13.5777Z"
|
||||
fill={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
</g>
|
||||
|
|
@ -41,27 +41,27 @@ export function AsileIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M3.25821 9.16667H1.13638L1.13638 13.4832L3.25821 9.16667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M4.57633 16.6667H1.53737L5.22405 9.16667L8.26301 9.16667L4.57633 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M9.82919 16.6667H6.79023L10.4769 9.16667L13.5159 9.16667L9.82919 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M15.1917 16.6667H12.1528L15.8395 9.16667L18.8637 9.16667V9.1967L15.1917 16.6667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M18.8637 14.3162V16.6667H17.7083L18.8637 14.3162Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M7.75002 0.833332L10 3.08333L4.75002 8.33333H2.50002V6.08333L7.75002 0.833332Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -87,36 +87,36 @@ export function FloorIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M15.8333 15.8333V3.33333H3.33333V15.8333"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M11.0833 6.66667L13.3333 8.91667L8.08333 14.1667H5.83333V11.9167L11.0833 6.66667Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="3.3"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="15.8"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<circle
|
||||
cx="3.30001"
|
||||
cy="15.8"
|
||||
r="1.2"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -134,7 +134,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
<g clipPath="url(#clip0_204_497)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72171V10.7064H12.6101V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -142,7 +142,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -150,7 +150,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M6.72172 7.17339H0.833313V10.7064H6.72172V7.17339Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -158,7 +158,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66595V14.2395H15.5544V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -166,7 +166,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -174,7 +174,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66595V7.1734H15.5544V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -182,7 +182,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
|
|
@ -190,7 +190,7 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
/>
|
||||
<path
|
||||
d="M7.89941 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89941V14.8451Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeWidth="1.08709"
|
||||
/>
|
||||
|
|
@ -212,56 +212,56 @@ export function WallIcon({ isActive }: { isActive: boolean }) {
|
|||
<g clipPath="url(#clip0_111_392)">
|
||||
<path
|
||||
d="M12.6101 7.17339H6.72173V10.7064H12.6101V7.17339Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M18.4986 7.17339H12.6102V10.7064H18.4986V7.17339Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.72174 7.17339H0.833328V10.7064H6.72174V7.17339Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 10.7064H9.66596V14.2395H15.5544V10.7064Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 10.7064H3.77753V14.2395H9.66594V10.7064Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.5544 3.64035H9.66596V7.1734H15.5544V3.64035Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.66594 3.64035H3.77753V7.1734H9.66594V3.64035Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.89942 14.8451L17.2484 5.49617L20.7194 8.96713L11.3704 18.3161H7.89942V14.8451Z"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
stroke="var(--background-color)"
|
||||
strokeWidth="1.08709"
|
||||
/>
|
||||
|
|
@ -286,7 +286,7 @@ export function WindowIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M10 2.5V17.5V2.5ZM15.8333 10H4.16667H15.8333ZM15.8333 8.33333C15.8333 6.78624 15.2188 5.30251 14.1248 4.20854C13.0308 3.11458 11.5471 2.5 10 2.5C8.4529 2.5 6.96917 3.11458 5.87521 4.20854C4.78125 5.30251 4.16667 6.78624 4.16667 8.33333V17.5H15.8333V8.33333Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
<path
|
||||
d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87521 4.20854C6.96917 3.11458 8.4529 2.5 10 2.5ZM15.8333 10H4.16667"
|
||||
|
|
@ -305,7 +305,7 @@ export function WindowIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M10 2.5V17.5M10 2.5C11.5471 2.5 13.0308 3.11458 14.1248 4.20854C15.2188 5.30251 15.8333 6.78624 15.8333 8.33333V17.5H4.16667V8.33333C4.16667 6.78624 4.78125 5.30251 5.87522 4.20854C6.96918 3.11458 8.45291 2.5 10 2.5ZM15.8333 10H4.16667"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -324,11 +324,11 @@ export function DoorIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
<path
|
||||
d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53977 15 5.00001V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00001 4.84035V15.1597C5.00001 15.5526 5.27451 15.8922 5.65873 15.9745L9.8254 16.8674C10.3442 16.9785 10.8333 16.5831 10.8333 16.0525V3.94749C10.8333 3.41696 10.3442 3.0215 9.8254 3.13266L5.65873 4.02552C5.27451 4.10785 5.00001 4.4474 5.00001 4.84035Z"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<ellipse
|
||||
|
|
@ -349,7 +349,7 @@ export function DoorIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M12.9167 4.16667H14.1667C14.6269 4.16667 15 4.53976 15 5V14.5833C15 15.0436 14.6269 15.4167 14.1667 15.4167H12.9167M5.00002 4.84035V15.1597C5.00002 15.5526 5.27452 15.8922 5.65874 15.9745L9.82541 16.8673C10.3442 16.9785 10.8333 16.583 10.8333 16.0525V3.94749C10.8333 3.41695 10.3442 3.02149 9.82541 3.13266L5.65874 4.02551C5.27452 4.10785 5.00002 4.4474 5.00002 4.84035Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<ellipse
|
||||
|
|
@ -357,7 +357,7 @@ export function DoorIcon({ isActive }: { isActive: boolean }) {
|
|||
cy="10"
|
||||
rx="0.416667"
|
||||
ry="0.833333"
|
||||
fill="var(--icon-default-color)"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -374,11 +374,11 @@ export function PillerIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M7 5L5.5 6V18.5H14.5V6.5L13.5 5H7Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
<path
|
||||
d="M14.7545 1.94309H5.22935C4.9007 1.94074 4.57782 2.04074 4.29614 2.23213C4.01447 2.42352 3.78489 2.69889 3.63259 3.02804C3.4803 3.35718 3.41117 3.72738 3.4328 4.098C3.45444 4.46862 3.56599 4.82535 3.75522 5.12904C3.94445 5.43272 4.20405 5.67163 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52976C6.60531 5.29456 6.79744 4.98471 6.90624 4.63423H13.1088C13.2185 4.98209 13.4107 5.2892 13.6644 5.522C13.918 5.75479 14.2234 5.90432 14.5472 5.95425C14.871 6.00417 15.2007 5.95258 15.5003 5.80509C15.7999 5.65761 16.0578 5.41991 16.246 5.11797C16.4341 4.81603 16.5452 4.46146 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.235C15.4331 2.04355 15.1125 1.94257 14.7857 1.94309H14.7545Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--accent-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
|
|
@ -393,17 +393,17 @@ export function PillerIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M14.7545 1.9431H5.22935C4.9007 1.94074 4.57782 2.04075 4.29614 2.23214C4.01447 2.42352 3.78489 2.6989 3.63259 3.02804C3.4803 3.35719 3.41117 3.72738 3.4328 4.098C3.45444 4.46863 3.56599 4.82535 3.75522 5.12904C3.94445 5.43273 4.20405 5.67164 4.50553 5.81955C4.807 5.96747 5.13871 6.01868 5.46425 5.96756C5.78978 5.91644 6.09657 5.76497 6.35094 5.52977C6.60531 5.29456 6.79744 4.98472 6.90624 4.63423H13.1088C13.2185 4.9821 13.4107 5.2892 13.6644 5.522C13.918 5.7548 14.2234 5.90433 14.5472 5.95425C14.871 6.00418 15.2007 5.95258 15.5003 5.8051C15.7999 5.65761 16.0578 5.41992 16.246 5.11798C16.4341 4.81604 16.5452 4.46147 16.5671 4.093C16.589 3.72454 16.5209 3.35636 16.3702 3.02869C16.2195 2.70102 15.992 2.42646 15.7125 2.23501C15.4331 2.04355 15.1125 1.94257 14.7857 1.9431H14.7545Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M14.3445 18.7347V5.86805"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
<path
|
||||
d="M5.65552 18.7347V5.86805"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -421,7 +421,7 @@ export function CommentIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M4.50833 16.6667H10C11.5423 16.6654 13.0365 16.1295 14.2279 15.1502C15.4194 14.1709 16.2345 12.8087 16.5343 11.2958C16.8341 9.78295 16.6 8.21292 15.872 6.85324C15.144 5.49356 13.9671 4.42835 12.5418 3.83909C11.1165 3.24983 9.53103 3.17298 8.05542 3.62164C6.57982 4.07029 5.30542 5.01669 4.44935 6.2996C3.59328 7.5825 3.2085 9.12253 3.36057 10.6573C3.68484 12.4117 4.0765 13.3117 5.28333 14.7167C5.44034 14.8705 5.5302 15.0802 5.53333 15.3C5.53287 15.4103 5.51054 15.5193 5.46762 15.6209C5.42471 15.7224 5.36207 15.8145 5.28333 15.8917L4.50833 16.6667Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 8.33333H13.3333"
|
||||
|
|
@ -444,16 +444,16 @@ export function CommentIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M4.15478 16.3131L3.30122 17.1667H4.50833H10H10.0004C11.6584 17.1654 13.2646 16.5892 14.5454 15.5365C15.8263 14.4837 16.7025 13.0194 17.0247 11.393C17.347 9.76667 17.0954 8.07889 16.3128 6.61724C15.5302 5.15558 14.2651 4.01048 12.7329 3.37703C11.2007 2.74358 9.49625 2.66096 7.90998 3.14327C6.3237 3.62557 4.95373 4.64295 4.03345 6.02207C3.11317 7.40119 2.69954 9.05673 2.86301 10.7066L2.86508 10.7275L2.8689 10.7482C3.03455 11.6444 3.22303 12.3548 3.5379 13.0295C3.8533 13.7053 4.28368 14.3202 4.90405 15.0425L4.91804 15.0588L4.93338 15.0738C4.99509 15.1343 5.03087 15.2163 5.03329 15.3025C5.03252 15.3451 5.02362 15.3871 5.00706 15.4263C4.98989 15.4669 4.96483 15.5037 4.93334 15.5346L4.93332 15.5346L4.92978 15.5381L4.15478 16.3131Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 8.33333H13.3333"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.66666 11.6667H13.3333"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
|
@ -471,8 +471,8 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M4.52948 11.2231L4.5297 11.2238C4.57639 11.37 4.62642 11.5411 4.68209 11.7315C5.02786 12.9139 5.59104 14.8398 6.92229 16.1733C8.01267 17.2528 9.37219 17.8333 11.2539 17.8333C12.7432 17.8333 13.9578 17.426 14.7979 16.6258C15.6333 15.8298 16.1667 14.58 16.1667 12.7517V5.48155C16.1667 5.38231 16.1346 5.31585 16.0979 5.27755C16.0663 5.24462 15.9931 5.19203 15.8225 5.19203C15.6652 5.19203 15.6035 5.24099 15.5775 5.26928C15.5444 5.30544 15.5114 5.37398 15.5114 5.48155V10.3909V11.2748L14.7538 10.8194C14.5073 10.6712 14.2271 10.535 13.9286 10.4193L13.6092 10.2956V9.95311V3.05037C13.6092 2.95469 13.5773 2.88608 13.5381 2.84499C13.5043 2.80944 13.4337 2.76081 13.2816 2.76081C13.1295 2.76081 13.0589 2.80945 13.025 2.845C12.9859 2.8861 12.9539 2.95471 12.9539 3.05037V9.51534V10.1002L12.3762 10.0093C12.0954 9.96505 11.8148 9.9356 11.5263 9.92086L11.0518 9.89662V9.42151V2.44843C11.0518 2.34942 11.0199 2.28465 10.9849 2.24804C10.9548 2.21665 10.8855 2.16667 10.7242 2.16667C10.5629 2.16667 10.4936 2.21665 10.4635 2.24805C10.4284 2.28467 10.3965 2.34944 10.3965 2.44843V9.47624V9.91041L9.96665 9.9713C9.6443 10.017 9.36015 10.0684 9.12277 10.1315L8.49442 10.2984V9.64822V3.4725C8.49442 3.37299 8.46214 3.30493 8.42514 3.26578C8.39386 3.23267 8.3248 3.18294 8.16676 3.18294C8.00276 3.18294 7.93529 3.23378 7.90656 3.2644C7.87167 3.30161 7.8391 3.36909 7.8391 3.4725V11.0163C7.8391 11.4317 7.81744 11.7993 7.74531 12.0757C7.70946 12.2131 7.64994 12.374 7.53699 12.5086C7.40837 12.6617 7.21968 12.7671 6.99152 12.7671C6.77109 12.7671 6.6027 12.6614 6.49863 12.5746C6.39098 12.4848 6.301 12.3729 6.22702 12.2662C6.07833 12.0517 5.93685 11.773 5.80731 11.493C5.69222 11.2442 5.57693 10.9728 5.46725 10.7147C5.45175 10.6782 5.43636 10.642 5.4211 10.6061C5.2955 10.311 5.17904 10.0416 5.0709 9.82454C4.85819 9.39911 4.72377 9.19607 4.59853 9.08661C4.50746 9.007 4.39371 8.95217 4.1196 8.95217C4.1196 8.95217 4.11946 8.95217 4.11917 8.95218L4.11791 8.95224L4.11306 8.95265C4.10879 8.95312 4.10293 8.95397 4.09552 8.95549C4.08045 8.95856 4.06138 8.96386 4.03928 8.97213C3.99404 8.98906 3.94671 9.01448 3.90579 9.04474C3.86843 9.07237 3.84566 9.09712 3.83408 9.11299C3.84264 9.27737 3.92405 9.5635 4.07023 9.96621C4.11734 10.096 4.17089 10.2372 4.22604 10.3827C4.3328 10.6642 4.4456 10.9617 4.52948 11.2231Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
|
|
@ -485,7 +485,7 @@ export function FreeMoveIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M16.6667 12.7517C16.6667 16.6057 14.4072 18.3333 11.2539 18.3333C9.25097 18.3333 7.76123 17.708 6.56942 16.5275C4.91414 14.8702 4.36788 12.3609 4.05339 11.3759C3.80507 10.602 3.33332 9.60916 3.33332 9.08537C3.33332 8.74923 3.80507 8.45218 4.1196 8.45218C4.83136 8.45218 5.09621 8.75703 5.5183 9.60133C5.98178 10.5316 6.54456 12.2671 6.99152 12.2671C7.24806 12.2671 7.3391 11.8371 7.3391 11.0163V3.4725C7.3391 3.05818 7.60395 2.68294 8.16676 2.68294C8.72128 2.68294 8.99442 3.05818 8.99442 3.4725V9.64822C9.25927 9.57788 9.56547 9.52314 9.89652 9.47625V2.44843C9.89652 2.0341 10.1697 1.66668 10.7242 1.66668C11.2787 1.66668 11.5518 2.0341 11.5518 2.44843V9.42151C11.858 9.43716 12.156 9.46844 12.4539 9.51534V3.05037C12.4539 2.63605 12.7354 2.26081 13.2816 2.26081C13.8279 2.26081 14.1092 2.63605 14.1092 3.05037V9.95311C14.432 10.0782 14.7383 10.2267 15.0114 10.3909V5.48156C15.0114 5.06723 15.268 4.69203 15.8225 4.69203C16.3935 4.69203 16.6667 5.06723 16.6667 5.48156V12.7517Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -502,17 +502,17 @@ export function DeleteIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667H3.33333Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
<path
|
||||
d="M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74619 16.6667 4.99999 15.9205 4.99999 15V5M3.33333 5H16.6667"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16667C8.24619 2.5 7.5 3.24619 7.5 4.16667V5"
|
||||
stroke="var(--highlight-accent-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -533,7 +533,7 @@ export function DeleteIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M8.33332 8.33333V13.3333M11.6667 8.33333V13.3333M15 5V15C15 15.9205 14.2538 16.6667 13.3333 16.6667H6.66666C5.74618 16.6667 4.99999 15.9205 4.99999 15V5M3.33332 5H16.6667M12.5 5V4.16667C12.5 3.24619 11.7538 2.5 10.8333 2.5H9.16666C8.24618 2.5 7.49999 3.24619 7.49999 4.16667V5"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -552,7 +552,7 @@ export function CursorIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
|
||||
fill="var(--highlight-accent-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
|
|
@ -565,7 +565,7 @@ export function CursorIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M13.9284 10.6169C15.3983 9.82645 16.1332 9.43125 16.3192 8.95548C16.4806 8.54266 16.4352 8.07759 16.1971 7.70373C15.9226 7.27292 15.1251 7.02726 13.5301 6.53593L7.50159 4.67891C6.15581 4.26436 5.48292 4.05709 5.03794 4.22513C4.65059 4.37141 4.34871 4.68287 4.2146 5.0746C4.06054 5.52461 4.28873 6.1907 4.74513 7.52288L6.76674 13.4239C7.32812 15.0625 7.60882 15.8819 8.0565 16.1423C8.44476 16.3681 8.91825 16.3923 9.32748 16.2071C9.79936 15.9935 10.1619 15.207 10.8871 13.634L11.4229 12.4718C11.5383 12.2214 11.596 12.0962 11.6751 11.9869C11.7451 11.8898 11.8275 11.8023 11.92 11.7263C12.0243 11.6408 12.1457 11.5755 12.3885 11.4449L13.9284 10.6169Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -584,8 +584,8 @@ export function PlayIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M15.9111 8.51444C17.363 9.37988 17.363 11.6201 15.9111 12.4856L7.14505 17.7109C5.73403 18.552 4 17.4572 4 15.7253V5.27468C4 3.54276 5.73403 2.44801 7.14505 3.28911L15.9111 8.51444Z"
|
||||
stroke={isActive ? "none" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "none"}
|
||||
stroke={isActive ? "none" : "var(--text-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "none"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -603,7 +603,7 @@ export function PenIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M11.5 15.5L12.7929 16.7929C13.1834 17.1834 13.8166 17.1834 14.2071 16.7929L16.2929 14.7071C16.6834 14.3166 16.6834 13.6834 16.2929 13.2929L15 12M11.5 15.5L5.58952 13.6474C5.22732 13.5568 4.94573 13.2721 4.85925 12.9089L2.5 3M11.5 15.5L15 12M2.5 3L12.4089 5.35925C12.7721 5.44573 13.0568 5.72732 13.1474 6.08952L15 12M2.5 3L7.29941 7.78644M9 8.5C9 9.05228 8.55228 9.5 8 9.5C7.44772 9.5 7 9.05228 7 8.5C7 7.94772 7.44772 7.5 8 7.5C8.55228 7.5 9 7.94772 9 8.5Z"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
|
|
@ -623,13 +623,13 @@ export function SaveTemplateIcon({ isActive }: { isActive: boolean }) {
|
|||
<path
|
||||
d="M17.5 13.4104V9.24922C17.5 5.67539 17.5 3.88847 16.4017 2.77822C15.3033 1.66797 13.5355 1.66797 10 1.66797C6.46447 1.66797 4.6967 1.66797 3.59835 2.77822C2.5 3.88847 2.5 5.67539 2.5 9.24922V13.4104C2.5 15.9909 2.5 17.2811 3.11176 17.8449C3.40351 18.1138 3.77179 18.2827 4.1641 18.3276C4.98668 18.4217 5.94727 17.5721 7.86847 15.8728C8.71767 15.1217 9.14233 14.7461 9.63358 14.6472C9.8755 14.5985 10.1245 14.5985 10.3664 14.6472C10.8577 14.7461 11.2823 15.1217 12.1315 15.8728C14.0527 17.5721 15.0133 18.4217 15.8359 18.3276C16.2282 18.2827 16.5965 18.1138 16.8882 17.8449C17.5 17.2811 17.5 15.9909 17.5 13.4104Z"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
/>
|
||||
<path
|
||||
d="M12.5 5H7.5"
|
||||
stroke={
|
||||
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
|
||||
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
|
||||
}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
|
|
@ -648,19 +648,19 @@ export function MeasureToolIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M7.07495 10.248C7.58308 10.3976 8.18027 10.4818 8.82142 10.4821C9.67666 10.4811 10.4522 10.3335 11.0449 10.0758C11.341 9.94594 11.5943 9.78867 11.7886 9.5888C11.9812 9.39173 12.1201 9.13327 12.1197 8.84166C12.1201 8.55 11.9812 8.29125 11.7886 8.09447C11.4962 7.79625 11.0754 7.58705 10.5676 7.43531C10.0598 7.28569 9.46267 7.20117 8.82147 7.20117C7.96628 7.20183 7.19069 7.34939 6.59767 7.60748C6.30152 7.73737 6.0483 7.89459 5.854 8.09447C5.66144 8.29125 5.5225 8.55 5.52283 8.84166C5.5225 9.13327 5.66139 9.39169 5.854 9.5888C6.14627 9.88669 6.56748 10.0962 7.07495 10.248ZM6.36348 8.58806C6.51831 8.42423 6.84391 8.241 7.27586 8.11561C7.70744 7.98811 8.24336 7.9102 8.82142 7.91058C9.59177 7.9095 10.288 8.0498 10.7608 8.25764C10.9971 8.36016 11.1755 8.48002 11.2787 8.58811C11.384 8.69859 11.41 8.77795 11.4103 8.8417C11.41 8.90508 11.384 8.98477 11.2787 9.09525C11.1242 9.25875 10.7986 9.44231 10.3667 9.5677C9.93508 9.6952 9.39953 9.77278 8.82142 9.77278C8.05075 9.77344 7.35452 9.63351 6.88169 9.42572C6.64544 9.32316 6.46703 9.20334 6.36353 9.09525C6.25825 8.98477 6.23256 8.90508 6.23223 8.8417C6.23251 8.77791 6.2582 8.69855 6.36348 8.58806Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M13.5094 5.1167C13.5115 5.1174 13.5139 5.11806 13.516 5.11876L13.5433 5.12673L13.5094 5.1167Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M4.13305 18.8834C4.13028 18.8827 4.12747 18.8817 4.12471 18.8806L4.09039 18.8706L4.13305 18.8834Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M17.4073 11.4456V8.97325C17.4077 8.60876 17.3207 8.25954 17.1727 7.94355C17.0242 7.62686 16.8165 7.34174 16.5698 7.08811C15.8326 6.33495 14.751 5.79382 13.4528 5.40542L13.4458 5.40345C12.1412 5.01874 10.604 4.80163 8.9538 4.80127C6.75295 4.80325 4.75594 5.18436 3.23696 5.84525L3.23628 5.84561C2.47778 6.17821 1.82951 6.58256 1.33717 7.08842C1.0909 7.34174 0.883095 7.62686 0.734718 7.94355C0.586655 8.25958 0.499642 8.6088 0.500001 8.9733V15.0268C0.499642 15.3912 0.586655 15.7402 0.734718 16.0562C0.883095 16.3729 1.0909 16.658 1.33721 16.9116C2.07451 17.6648 3.15529 18.2059 4.4529 18.5939L4.46153 18.5966C5.76646 18.9814 7.30337 19.1981 8.95385 19.1988H23.5V11.4457H17.4073V11.4456ZM2.19167 7.91665C2.70288 7.38486 3.62108 6.88991 4.79849 6.54437C5.97562 6.19681 7.4093 5.99067 8.95385 5.99098C11.013 5.98999 12.8759 6.35844 14.1944 6.93573C14.8537 7.22319 15.3745 7.56311 15.7157 7.91665C16.0586 8.27283 16.2173 8.62367 16.2177 8.97325C16.2173 9.32243 16.0586 9.67368 15.7157 10.0299C15.2045 10.5613 14.2863 11.0562 13.1089 11.4018C11.9318 11.7497 10.4984 11.9555 8.9538 11.9555C6.89436 11.9562 5.0315 11.5878 3.71295 11.0108C3.05367 10.7233 2.53285 10.3834 2.19162 10.0299C1.84869 9.67368 1.69003 9.32243 1.68967 8.97325C1.69007 8.62372 1.84874 8.27283 2.19167 7.91665ZM16.2176 10.488V11.9555H13.6018C13.9049 11.8566 14.1973 11.751 14.4665 11.6335C15.1832 11.3198 15.7758 10.9441 16.2043 10.5026L16.2176 10.488ZM22.3103 18.009H20.2707V15.0058H19.5909V18.009H18.0898V16.3824H17.4099V18.009H15.9085V15.0058H15.2287V18.009H13.7272V16.3824H13.0474V18.009H11.5463V15.0058H10.8665V18.009H9.36542V16.3824H8.68558V18.003C8.16938 17.9951 7.66778 17.9645 7.18415 17.9128V15.0058H6.5043V17.8251C5.43642 17.6624 4.48039 17.4002 3.71295 17.0643C3.05367 16.7768 2.53285 16.4369 2.19162 16.0834C1.84869 15.7271 1.69003 15.3759 1.68967 15.0267V10.488L1.70296 10.5026C2.34598 11.1632 3.35609 11.683 4.60586 12.0538C5.85604 12.4229 7.34848 12.6351 8.95376 12.6354H22.3102V18.009H22.3103Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"}
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.5002 12.4987L15.1418 10.1404M10.8335 14.1654H5.8335M7.50016 10.832H5.8335M10.8335 8.33203C10.8335 8.82648 10.9801 9.30983 11.2548 9.72096C11.5295 10.1321 11.92 10.4525 12.3768 10.6417C12.8336 10.8309 13.3363 10.8805 13.8212 10.784C14.3062 10.6875 14.7516 10.4494 15.1013 10.0998C15.4509 9.75017 15.689 9.30471 15.7855 8.81976C15.8819 8.3348 15.8324 7.83214 15.6432 7.37532C15.454 6.91851 15.1335 6.52806 14.7224 6.25336C14.3113 5.97865 13.8279 5.83203 13.3335 5.83203C12.6705 5.83203 12.0346 6.09542 11.5657 6.56426C11.0969 7.03311 10.8335 7.66899 10.8335 8.33203Z"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1667 14.1667V16.6667C14.1667 16.8877 14.0789 17.0996 13.9226 17.2559C13.7663 17.4122 13.5543 17.5 13.3333 17.5H3.33333C3.11232 17.5 2.90036 17.4122 2.74408 17.2559C2.5878 17.0996 2.5 16.8877 2.5 16.6667V3.33333C2.5 3.11232 2.5878 2.90036 2.74408 2.74408C2.90036 2.5878 3.11232 2.5 3.33333 2.5H13.3333"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -34,11 +34,11 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.69 11.7629L16.4912 11.5885C16.4161 11.5828 16.3514 11.5356 16.3226 11.466L15.9339 10.5281C15.9049 10.4588 15.917 10.3794 15.9662 10.3224L16.6834 9.35896C16.7973 9.22544 16.7898 9.02639 16.6655 8.90212L16.098 8.3348C15.974 8.21053 15.7746 8.20247 15.6414 8.31697L14.6776 9.03387C14.621 9.08282 14.541 9.09546 14.4719 9.0667L13.5338 8.67776C13.4644 8.64929 13.417 8.58341 13.4109 8.50918L13.2372 7.31068C13.2234 7.1352 13.0772 7 12.9018 7H12.0991C11.9234 7 11.7772 7.1352 11.7637 7.31068L11.5893 8.50918C11.5839 8.58399 11.5364 8.64929 11.4671 8.67776L10.5286 9.0667C10.4593 9.09546 10.3799 9.08282 10.3227 9.03387L9.35945 8.31697C9.22628 8.20276 9.0272 8.2105 8.90264 8.3348L8.33532 8.90212C8.21105 9.02639 8.20357 9.22547 8.31746 9.35896L9.03439 10.3227C9.08302 10.3794 9.09598 10.4591 9.06693 10.5281L8.67825 11.466C8.65007 11.5356 8.58448 11.5828 8.50996 11.5889L7.31062 11.7629C7.13569 11.7767 7.00049 11.9229 7.00049 12.0986V12.901C7.00049 13.0765 7.13572 13.2232 7.31062 13.2364L8.50996 13.4105C8.58448 13.4165 8.65007 13.464 8.67825 13.5333L9.06693 14.4712C9.09598 14.5408 9.08305 14.6205 9.03439 14.6772L8.31746 15.641C8.20354 15.7744 8.21102 15.9729 8.33532 16.0978L8.90264 16.6651C9.0272 16.7894 9.22628 16.7969 9.35945 16.6827L10.3227 15.9654C10.3799 15.9171 10.4593 15.9042 10.5286 15.9333L11.4671 16.3216C11.5364 16.3507 11.5839 16.4157 11.5897 16.4908L11.7637 17.6893C11.7775 17.8645 11.9234 18 12.0991 18H12.9018C13.0776 18 13.2234 17.8645 13.2372 17.6893L13.411 16.4908C13.417 16.4157 13.4645 16.3507 13.5338 16.3216L14.4722 15.9333C14.5413 15.9042 14.6213 15.9171 14.6779 15.9654L15.6414 16.6827C15.7746 16.7969 15.974 16.7894 16.098 16.6651L16.6656 16.0978C16.7902 15.9729 16.7974 15.7744 16.6834 15.641L15.9662 14.6772C15.9179 14.6205 15.9049 14.5408 15.934 14.4712L16.3226 13.5333C16.3514 13.464 16.4161 13.4165 16.4912 13.4105L17.69 13.2364C17.8652 13.2232 18.0004 13.0765 18.0004 12.901V12.0986C18.0004 11.9228 17.8652 11.7767 17.69 11.7629ZM13.8191 13.8187C13.4667 14.1706 12.9987 14.3645 12.5004 14.3645C12.0024 14.3645 11.5337 14.1706 11.1816 13.8187C10.8295 13.466 10.6353 12.9979 10.6353 12.4997C10.6353 12.0017 10.8295 11.5333 11.1816 11.1812C11.5337 10.8285 12.0024 10.6351 12.5004 10.6351C12.9987 10.6351 13.4667 10.8285 13.8191 11.1812C14.1712 11.5333 14.3652 12.0017 14.3652 12.4997C14.3652 12.9979 14.1713 13.466 13.8191 13.8187Z"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
<path
|
||||
d="M6.7961 8.78085C6.92052 8.73626 6.98909 8.60354 6.95416 8.47635L6.77216 7.58599C6.75759 7.53147 6.77438 7.47339 6.81595 7.43541L7.37949 6.92253C7.42078 6.88482 7.48083 6.87353 7.53285 6.89334L8.39565 7.15458C8.51874 7.20111 8.65747 7.1455 8.71367 7.02603L8.96969 6.48121C9.02637 6.36145 8.98098 6.21939 8.86644 6.1544L8.11541 5.65637C8.06665 5.62829 8.03718 5.57515 8.04024 5.51899L8.07603 4.75805C8.07906 4.70161 8.11263 4.65178 8.1636 4.62864L8.96614 4.20052C9.08642 4.14683 9.14452 4.00865 9.09994 3.88532L8.89619 3.31844C8.85132 3.19427 8.7186 3.12546 8.59144 3.16042L7.70081 3.34183C7.64628 3.35726 7.58873 3.34019 7.5505 3.29832L7.03784 2.73511C6.99958 2.69324 6.98804 2.63436 7.00837 2.58151L7.26967 1.71923C7.31617 1.59562 7.2606 1.45713 7.14084 1.40122L6.59627 1.14492C6.47679 1.08873 6.33417 1.13362 6.26894 1.24841L5.77118 1.99948C5.74335 2.04823 5.69024 2.07764 5.63405 2.07492L4.87311 2.03885C4.81695 2.03638 4.76629 2.00167 4.74345 1.951L4.31589 1.14877C4.26165 1.02849 4.12399 0.970357 4.0001 1.01498L3.43353 1.21897C3.30936 1.26359 3.24055 1.39603 3.27579 1.52319L3.45748 2.4141C3.47235 2.46804 3.45556 2.52642 3.41372 2.56413L2.85014 3.07729C2.8083 3.115 2.74912 3.12657 2.69626 3.10676L1.83398 2.84521C1.71093 2.79843 1.57244 2.85459 1.516 2.97404L1.25995 3.51864C1.20379 3.63812 1.24865 3.78074 1.3632 3.84569L2.11423 4.34373C2.16323 4.37156 2.19242 4.42442 2.1894 4.48058L2.1536 5.24152C2.15141 5.29824 2.11698 5.34779 2.06606 5.37091L1.26353 5.79899C1.14318 5.85296 1.08511 5.99089 1.12973 6.11423L1.33373 6.68107C1.37832 6.80524 1.51103 6.87405 1.63795 6.8394L2.52914 6.65716C2.58311 6.64228 2.64146 6.65935 2.67916 6.70119L3.19176 7.26449C3.23003 7.30633 3.24107 7.36579 3.2212 7.41838L2.95996 8.28065C2.91371 8.40399 2.96935 8.54247 3.08879 8.59863L3.63336 8.85466C3.75312 8.91109 3.89543 8.86567 3.9607 8.75141L4.45818 8.0001C4.48626 7.95165 4.53911 7.9219 4.59555 7.92517L5.35652 7.96097C5.41296 7.96375 5.46307 7.99732 5.48646 8.04879L5.91374 8.85074C5.96827 8.97108 6.10564 9.02971 6.2295 8.98509L6.7961 8.78085ZM5.58891 6.31659C5.23732 6.44295 4.85716 6.42533 4.51878 6.2662C4.18043 6.10707 3.92493 5.82571 3.79802 5.47385C3.67166 5.12201 3.68928 4.7421 3.84844 4.40403C4.00754 4.0654 4.28917 3.8099 4.64076 3.68329C4.99259 3.55662 5.37251 3.57424 5.71058 3.73393C6.04865 3.89251 6.3047 4.17389 6.43159 4.52573C6.55798 4.87759 6.54008 5.25723 6.38123 5.59561C6.22154 5.93365 5.94043 6.18967 5.58891 6.31659Z"
|
||||
stroke={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
stroke={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -55,15 +55,15 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) {
|
|||
>
|
||||
<path
|
||||
d="M17.4254 15.3839L8.67142 6.79353C8.79789 6.57037 8.90139 6.337 8.97464 6.09625C8.98245 6.01909 8.99808 5.93903 9.02639 5.85746C9.04151 5.81156 9.05423 5.76468 9.06692 5.71831C9.26711 4.6353 8.94923 3.4756 8.11182 2.63819C7.84716 2.37353 7.54982 2.16113 7.23341 2C7.21778 2 7.20216 2.00197 7.18703 2.00538L6.90578 2.07422C6.85303 2.08791 6.80762 2.12109 6.78028 2.16797C6.75294 2.21435 6.74562 2.2705 6.76025 2.32275L7.36475 4.49367C7.38722 4.57474 7.35694 4.66067 7.28906 4.70999L5.91552 5.70756C5.87352 5.73734 5.82177 5.75052 5.77049 5.74368L4.31101 5.54249C4.23142 5.53174 4.16648 5.47512 4.14498 5.39796L3.50685 3.10504C3.47754 3.00104 3.3711 2.93804 3.26613 2.96391L2.89697 3.05426C2.87794 3.05913 2.86085 3.06891 2.84375 3.07916C2.41994 3.67339 2.20606 4.37117 2.20312 5.0699C2.20947 5.94687 2.54541 6.82188 3.21435 7.49082C4.02148 8.29748 5.12649 8.61389 6.17581 8.46592C6.32718 8.44395 6.46537 8.42879 6.59231 8.42001C6.7134 8.38679 6.83256 8.34335 6.95072 8.29598C8.41851 9.78233 15.631 17.1784 15.631 17.1784C16.1266 17.674 16.9298 17.674 17.4254 17.1784C17.921 16.6828 17.921 15.8796 17.4254 15.3839ZM16.9767 16.7297C16.7291 16.9777 16.3277 16.9777 16.0797 16.7297C15.8316 16.4821 15.8316 16.0802 16.0797 15.8322C16.3277 15.5846 16.7291 15.5846 16.9767 15.8322C17.2247 16.0802 17.2247 16.4821 16.9767 16.7297Z"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
<path
|
||||
d="M14.6953 6.25784L16.1182 5.89699L17.4878 3.50488L16.8243 2.8755L16.1612 2.24609L13.8442 3.73926L13.5586 5.17824L11.0991 7.77054L12.2183 8.8682L14.6953 6.25784Z"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
<path
|
||||
d="M7.56537 10.7632C7.28215 11.0083 6.8808 10.7046 6.35539 11.2588L2.88271 14.918C2.18837 15.6494 2.21865 16.8057 2.95009 17.5C3.68153 18.1944 4.83732 18.1641 5.53164 17.4327L9.00482 13.7725C9.53023 13.2188 9.20647 12.8345 9.43598 12.5386C9.48285 12.4776 9.52582 12.4356 9.56879 12.4038C8.91157 11.731 8.28266 11.0874 7.73821 10.5312C7.71528 10.6084 7.66303 10.6792 7.56537 10.7632Z"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -82,13 +82,13 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.441 1.04762C12.5781 0.984127 12.7361 0.984127 12.8732 1.04762L18.0161 3.42958C18.198 3.51377 18.3143 3.69589 18.3143 3.89624V9.85116C18.3143 10.0347 18.2165 10.2043 18.0577 10.2962L12.9148 13.2736C12.7555 13.3659 12.5588 13.3659 12.3995 13.2736L7.25661 10.2962C7.09779 10.2043 7 10.0347 7 9.85116V3.89624C7 3.69589 7.11635 3.51377 7.29815 3.42958L12.441 1.04762ZM8.02857 4.72968L12.1429 6.79403V11.9366L8.02857 9.55463V4.72968ZM13.1714 11.9366L17.2857 9.55463V4.72968L13.1714 6.79403V11.9366ZM12.6571 5.90129L16.6163 3.91477L12.6571 2.08106L8.69798 3.91477L12.6571 5.90129Z"
|
||||
fill={isActive ? "var(--icon-default-color-active)" : "var(--icon-default-color)"}
|
||||
fill={"var(--icon-default-color-active)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -107,21 +107,21 @@ export function ResetIcon() {
|
|||
>
|
||||
<path
|
||||
d="M2.54182 4.09637C3.33333 2.73422 4.80832 1.81836 6.49721 1.81836C9.02194 1.81836 11.0686 3.86506 11.0686 6.38979C11.0686 8.91452 9.02194 10.9612 6.49721 10.9612C3.97248 10.9612 1.92578 8.91452 1.92578 6.38979"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.64118 6.38895C7.64118 7.02013 7.12951 7.53181 6.49833 7.53181C5.86714 7.53181 5.35547 7.02013 5.35547 6.38895C5.35547 5.75777 5.86714 5.24609 6.49833 5.24609C7.12951 5.24609 7.64118 5.75777 7.64118 6.38895Z"
|
||||
fill="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color)"
|
||||
fill="var(--icon-default-color-active)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeWidth="0.571429"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4.78125 4.10407H2.49554V1.81836"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -140,7 +140,7 @@ export function PlayStopIcon() {
|
|||
>
|
||||
<path
|
||||
d="M8 2.88867V9.88867M11 2.88867V9.88867M2 3.99171V8.78562C2 9.28847 2 9.53987 2.09943 9.65627C2.1857 9.75732 2.31512 9.81092 2.44756 9.80047C2.60019 9.78847 2.77796 9.61072 3.13352 9.25517L5.5305 6.85817C5.69485 6.69382 5.777 6.61167 5.8078 6.51692C5.83485 6.43357 5.83485 6.34377 5.8078 6.26042C5.777 6.16567 5.69485 6.08352 5.5305 5.91917L3.13352 3.52219C2.77796 3.16664 2.60019 2.98886 2.44756 2.97685C2.31512 2.96643 2.1857 3.02004 2.09943 3.12105C2 3.23747 2 3.48888 2 3.99171Z"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -159,7 +159,7 @@ export function ExitIcon() {
|
|||
>
|
||||
<path
|
||||
d="M2.08203 6.34311L5.03647 3.38867M2.08203 6.34311L5.03647 9.29755M2.08203 6.34311H5.9228C7.22276 6.34334 9.34995 7.05241 10.7681 9.88867"
|
||||
stroke="var(--icon-default-color)"
|
||||
stroke="var(--icon-default-color-active)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -24,22 +24,26 @@ const Outline: React.FC = () => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="outline-content-container">
|
||||
<DropDownList
|
||||
value="Layers"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
showKebabMenu={false}
|
||||
showFocusIcon={true}
|
||||
remove
|
||||
/>
|
||||
<DropDownList
|
||||
value="Scene"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
listType="outline"
|
||||
showKebabMenu={false}
|
||||
showAddIcon={false}
|
||||
/>
|
||||
<section className="outline-section">
|
||||
<DropDownList
|
||||
value="Layers"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
showKebabMenu={false}
|
||||
showFocusIcon={true}
|
||||
remove
|
||||
/>
|
||||
</section>
|
||||
<section className="outline-section overflow">
|
||||
<DropDownList
|
||||
value="Scene"
|
||||
items={dropdownItems}
|
||||
defaultOpen={true}
|
||||
listType="outline"
|
||||
showKebabMenu={false}
|
||||
showAddIcon={false}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const Analysis: React.FC = () => {
|
|||
<div className="generate-report-button">
|
||||
<AI_Icon /> Generate Report
|
||||
</div>
|
||||
<div className="analysis-content-container">
|
||||
<div className="analysis-content-container section">
|
||||
<div className="dropdown-header-container">
|
||||
<div className="value">Create Analysis</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
|
|||
value2 = "number",
|
||||
disabled = false, // Default disabled value
|
||||
isEyedrop = false, // Default isEyedrop value
|
||||
handleEyeDropClick = () => { }, // Default function for eye drop click
|
||||
handleEyeDropClick = () => {}, // Default function for eye drop click
|
||||
}) => {
|
||||
return (
|
||||
<div className="custom-input-container">
|
||||
|
|
@ -39,6 +39,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
|
|||
disabled={disabled} // Apply disabled prop
|
||||
/>
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div className="input-container">
|
||||
<div className="custom-input-label">Y : </div>
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -48,49 +48,51 @@ const AssetProperties: React.FC = () => {
|
|||
<div className="asset-properties-container">
|
||||
{/* Name */}
|
||||
<div className="header">{selectedFloorItem.userData.name}</div>
|
||||
<section>
|
||||
<PositionInput
|
||||
onChange={() => {}}
|
||||
value1={selectedFloorItem.position.x.toFixed(5)}
|
||||
value2={selectedFloorItem.position.z.toFixed(5)}
|
||||
/>
|
||||
<RotationInput
|
||||
onChange={() => {}}
|
||||
value={parseFloat(
|
||||
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
|
||||
)}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<PositionInput
|
||||
onChange={() => {}}
|
||||
value1={selectedFloorItem.position.x.toFixed(5)}
|
||||
value2={selectedFloorItem.position.z.toFixed(5)}
|
||||
/>
|
||||
<RotationInput
|
||||
onChange={() => {}}
|
||||
value={parseFloat(
|
||||
THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
|
||||
)}
|
||||
/>
|
||||
<section>
|
||||
<div className="header">Render settings</div>
|
||||
<InputToggle inputKey="visible" label="Visible" />
|
||||
<InputToggle inputKey="frustumCull" label="Frustum cull" />
|
||||
</section>
|
||||
|
||||
<div className="split"></div>
|
||||
|
||||
<InputToggle inputKey="visible" label="Visible" />
|
||||
<InputToggle inputKey="frustumCull" label="Frustum cull" />
|
||||
|
||||
<div className="header">User Data</div>
|
||||
|
||||
{/* Map through userData and render InputWithDropDown for each entry */}
|
||||
{userData.map((data) => (
|
||||
<div className="input-container">
|
||||
<InputWithDropDown
|
||||
key={data.id}
|
||||
label={data.label}
|
||||
value={data.value}
|
||||
editableLabel
|
||||
onChange={(newValue) => handleUserDataChange(data.id, newValue)} // Pass the change handler
|
||||
/>
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleRemoveUserData(data.id)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
<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)} // Pass the change handler
|
||||
/>
|
||||
<div
|
||||
className="remove-button"
|
||||
onClick={() => handleRemoveUserData(data.id)}
|
||||
>
|
||||
<RemoveIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
|
||||
{/* Add new user data */}
|
||||
<div className="optimize-button" onClick={handleAddUserData}>
|
||||
+ Add
|
||||
</div>
|
||||
{/* Add new user data */}
|
||||
<div className="optimize-button" onClick={handleAddUserData}>
|
||||
+ Add
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -32,9 +32,7 @@ const GlobalProperties: React.FC = () => {
|
|||
const { renderDistance, setRenderDistance } = useRenderDistance();
|
||||
const { setPlaneValue, setGridValue, planeValue, gridValue } =
|
||||
useTileDistance();
|
||||
useEffect(() => {
|
||||
|
||||
}, [gridValue, planeValue]);
|
||||
useEffect(() => {}, [gridValue, planeValue]);
|
||||
const { socket } = useSocketStore();
|
||||
const { limitDistance, setLimitDistance } = useLimitDistance();
|
||||
const [distance, setDistance] = useState<number>(40);
|
||||
|
|
@ -224,65 +222,66 @@ const GlobalProperties: React.FC = () => {
|
|||
// }
|
||||
return (
|
||||
<div className="global-properties-container">
|
||||
<div className="header">Environment</div>
|
||||
<div className="optimize-button" onClick={optimizeScene}>
|
||||
<AI_Icon />
|
||||
Optimize
|
||||
</div>
|
||||
<section>
|
||||
<div className="header">Environment</div>
|
||||
<div className="optimize-button" onClick={optimizeScene}>
|
||||
<AI_Icon />
|
||||
Optimize
|
||||
</div>
|
||||
|
||||
<div className="split"></div>
|
||||
<div className="split"></div>
|
||||
|
||||
<InputToggle
|
||||
value={roofVisibility}
|
||||
inputKey="1"
|
||||
label="Roof Visibility"
|
||||
onClick={changeRoofVisibility}
|
||||
/>
|
||||
<InputToggle
|
||||
value={wallVisibility}
|
||||
inputKey="2"
|
||||
label="Wall Visibility"
|
||||
onClick={changeWallVisibility}
|
||||
/>
|
||||
<InputToggle
|
||||
value={shadows}
|
||||
inputKey="3"
|
||||
label="Shadows Visibility"
|
||||
onClick={shadowVisibility}
|
||||
/>
|
||||
<LabeledButton
|
||||
label="Reset Camera"
|
||||
onClick={toggleResetCamera}
|
||||
value="Reset"
|
||||
/>
|
||||
<InputToggle
|
||||
value={roofVisibility}
|
||||
inputKey="1"
|
||||
label="Roof Visibility"
|
||||
onClick={changeRoofVisibility}
|
||||
/>
|
||||
<InputToggle
|
||||
value={wallVisibility}
|
||||
inputKey="2"
|
||||
label="Wall Visibility"
|
||||
onClick={changeWallVisibility}
|
||||
/>
|
||||
<InputToggle
|
||||
value={shadows}
|
||||
inputKey="3"
|
||||
label="Shadows Visibility"
|
||||
onClick={shadowVisibility}
|
||||
/>
|
||||
<LabeledButton
|
||||
label="Reset Camera"
|
||||
onClick={toggleResetCamera}
|
||||
value="Reset"
|
||||
/>
|
||||
|
||||
<div className="split"></div>
|
||||
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
|
||||
<InputToggle
|
||||
inputKey="4"
|
||||
label="Limit Render Distance"
|
||||
value={limitDistance}
|
||||
// onClick={() => {
|
||||
// setLimitDistance(!limitDistance);
|
||||
// // setDistance(75);
|
||||
// // setRenderDistance(75);
|
||||
// }}
|
||||
onClick={async () => {
|
||||
await limitRenderDistance(); // Call the function here
|
||||
}}
|
||||
/>
|
||||
<InputRange
|
||||
label="Distance"
|
||||
disabled={!limitDistance}
|
||||
value={renderDistance}
|
||||
min={CONSTANTS.distanceConfig.minDistance}
|
||||
max={CONSTANTS.distanceConfig.maxDistance}
|
||||
onChange={(value: number) => updateDistance(value)}
|
||||
onPointerUp={updatedDist}
|
||||
key={"6"}
|
||||
/>
|
||||
<div className="split"></div>
|
||||
{/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
|
||||
<InputToggle
|
||||
inputKey="4"
|
||||
label="Limit Render Distance"
|
||||
value={limitDistance}
|
||||
// onClick={() => {
|
||||
// setLimitDistance(!limitDistance);
|
||||
// // setDistance(75);
|
||||
// // setRenderDistance(75);
|
||||
// }}
|
||||
onClick={async () => {
|
||||
await limitRenderDistance(); // Call the function here
|
||||
}}
|
||||
/>
|
||||
<InputRange
|
||||
label="Distance"
|
||||
disabled={!limitDistance}
|
||||
value={renderDistance}
|
||||
min={CONSTANTS.distanceConfig.minDistance}
|
||||
max={CONSTANTS.distanceConfig.maxDistance}
|
||||
onChange={(value: number) => updateDistance(value)}
|
||||
onPointerUp={updatedDist}
|
||||
key={"6"}
|
||||
/>
|
||||
|
||||
{/* <div className="split"></div>
|
||||
{/* <div className="split"></div>
|
||||
<InputToggle
|
||||
inputKey="6"
|
||||
label="Display Grid"
|
||||
|
|
@ -301,6 +300,7 @@ const GlobalProperties: React.FC = () => {
|
|||
onChange={(value: number) => updateGridDistance(value)}
|
||||
onPointerUp={updatedGrid}
|
||||
/> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react";
|
|||
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
import Vector3Input from "../customInput/Vector3Input";
|
||||
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
|
||||
import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
|
||||
import {
|
||||
useEditPosition,
|
||||
usezonePosition,
|
||||
useZones,
|
||||
usezoneTarget,
|
||||
} from "../../../../store/store";
|
||||
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
|
||||
|
||||
const ZoneProperties: React.FC = () => {
|
||||
|
|
@ -13,9 +18,9 @@ const ZoneProperties: React.FC = () => {
|
|||
const { zones, setZones } = useZones();
|
||||
|
||||
useEffect(() => {
|
||||
setZonePosition(selectedZone.zoneViewPortPosition)
|
||||
setZoneTarget(selectedZone.zoneViewPortTarget)
|
||||
}, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
|
||||
setZonePosition(selectedZone.zoneViewPortPosition);
|
||||
setZoneTarget(selectedZone.zoneViewPortTarget);
|
||||
}, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]);
|
||||
|
||||
async function handleSetView() {
|
||||
try {
|
||||
|
|
@ -25,7 +30,7 @@ const ZoneProperties: React.FC = () => {
|
|||
let zonesdata = {
|
||||
zoneId: selectedZone.zoneId,
|
||||
viewPortposition: zonePosition,
|
||||
viewPortCenter: zoneTarget
|
||||
viewPortCenter: zoneTarget,
|
||||
};
|
||||
|
||||
let response = await zoneCameraUpdate(zonesdata, organization);
|
||||
|
|
@ -34,14 +39,11 @@ const ZoneProperties: React.FC = () => {
|
|||
} else {
|
||||
// console.log(response);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
function handleEditView() {
|
||||
setEdit(!Edit); // This will toggle the `Edit` state correctly
|
||||
setEdit(!Edit); // This will toggle the `Edit` state correctly
|
||||
}
|
||||
|
||||
async function handleZoneNameChange(newName: string) {
|
||||
|
|
@ -49,11 +51,11 @@ const ZoneProperties: React.FC = () => {
|
|||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
const zonesdata = {
|
||||
zoneId: selectedZone.zoneId,
|
||||
zoneName: newName
|
||||
zoneName: newName,
|
||||
};
|
||||
// Call your API to update the zone
|
||||
let response = await zoneCameraUpdate(zonesdata, organization);
|
||||
console.log('response: ', response);
|
||||
console.log("response: ", response);
|
||||
if (response.message === "updated successfully") {
|
||||
setZones((prevZones: any[]) =>
|
||||
prevZones.map((zone) =>
|
||||
|
|
@ -66,7 +68,10 @@ const ZoneProperties: React.FC = () => {
|
|||
// console.log(response?.message);
|
||||
}
|
||||
}
|
||||
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
|
||||
function handleVectorChange(
|
||||
key: "zoneViewPortTarget" | "zoneViewPortPosition",
|
||||
newValue: [number, number, number]
|
||||
) {
|
||||
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
|
||||
}
|
||||
const checkZoneNameDuplicate = (name: string) => {
|
||||
|
|
@ -79,33 +84,40 @@ const ZoneProperties: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div className="zone-properties-container">
|
||||
<div className="header">
|
||||
<RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} />
|
||||
<div className="button" onClick={handleEditView}>
|
||||
{Edit ? "Cancel" : "Edit"}
|
||||
<section>
|
||||
<div className="header">
|
||||
<RenameInput
|
||||
value={selectedZone.zoneName}
|
||||
onRename={handleZoneNameChange}
|
||||
checkDuplicate={checkZoneNameDuplicate}
|
||||
/>
|
||||
<div className="button" onClick={handleEditView}>
|
||||
{Edit ? "Cancel" : "Edit"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Vector3Input
|
||||
onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
|
||||
header="Viewport Target"
|
||||
value={zoneTarget as [number, number, number]}
|
||||
disabled={!Edit}
|
||||
/>
|
||||
<Vector3Input
|
||||
onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
|
||||
header="Viewport Position"
|
||||
value={zonePosition as [number, number, number]}
|
||||
disabled={!Edit}
|
||||
/>
|
||||
<Vector3Input
|
||||
onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
|
||||
header="Viewport Target"
|
||||
value={zoneTarget as [number, number, number]}
|
||||
disabled={!Edit}
|
||||
/>
|
||||
<Vector3Input
|
||||
onChange={(value) =>
|
||||
handleVectorChange("zoneViewPortPosition", value)
|
||||
}
|
||||
header="Viewport Position"
|
||||
value={zonePosition as [number, number, number]}
|
||||
disabled={!Edit}
|
||||
/>
|
||||
|
||||
{Edit && (
|
||||
<div className="button-save" onClick={handleSetView}>
|
||||
Set View
|
||||
</div>
|
||||
)}
|
||||
{Edit && (
|
||||
<div className="button-save" onClick={handleSetView}>
|
||||
Set View
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZoneProperties;
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const EventProperties: React.FC = () => {
|
|||
</>
|
||||
)}
|
||||
{!currentEventData && selectedEventSphere && (
|
||||
<div className="no-event-selected">
|
||||
<div className="no-event-selected section">
|
||||
<p>
|
||||
<strong>Oops!</strong> It looks like this object doesn't have an
|
||||
event assigned yet. To continue, please link it to one of the
|
||||
|
|
@ -118,7 +118,7 @@ const EventProperties: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
{!selectedEventSphere && (
|
||||
<div className="no-event-selected">
|
||||
<div className="no-event-selected section">
|
||||
<p>
|
||||
<strong>Oops!</strong> It looks like you haven't selected an event
|
||||
point yet. Please select an event to view its properties.
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ function ConveyorMechanics() {
|
|||
<>
|
||||
{selectedEventData && (
|
||||
<>
|
||||
<div key={selectedPointData?.uuid} className="global-props">
|
||||
<div key={selectedPointData?.uuid} className="global-props section">
|
||||
<div className="property-list-container">
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
|
|
@ -152,69 +152,70 @@ function ConveyorMechanics() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
/>
|
||||
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
/>
|
||||
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={currentActionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={currentActionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption={
|
||||
selectedPointData
|
||||
? selectedPointData.action.actionType
|
||||
: "default"
|
||||
}
|
||||
options={availableActions.options}
|
||||
onSelect={handleActionTypeChange}
|
||||
/>
|
||||
{activeOption === "default" && <DefaultAction />}
|
||||
{activeOption === "spawn" && (
|
||||
<SpawnAction
|
||||
onChangeCount={handleSpawnCountChange}
|
||||
options={["Default material", "Material 1", "Material 2"]}
|
||||
defaultOption={currentMaterial}
|
||||
onSelect={handleMaterialSelect}
|
||||
onChangeInterval={handleSpawnIntervalChange}
|
||||
intervalValue={currentSpawnInterval}
|
||||
countValue={currentSpawnCount}
|
||||
intervalMin={1}
|
||||
intervalMax={60}
|
||||
intervalDefaultValue="1"
|
||||
countMin={1}
|
||||
countMax={100}
|
||||
countDefaultValue="1"
|
||||
/>
|
||||
)}
|
||||
{activeOption === "swap" && (
|
||||
<SwapAction
|
||||
options={["Default material", "Material 1", "Material 2"]}
|
||||
defaultOption={currentMaterial}
|
||||
onSelect={handleMaterialSelect}
|
||||
/>
|
||||
)}
|
||||
{activeOption === "despawn" && <DespawnAction />}
|
||||
{activeOption === "delay" && (
|
||||
<DelayAction
|
||||
value={currentDelay}
|
||||
defaultValue="0"
|
||||
min={0}
|
||||
max={60}
|
||||
onChange={handleDelayChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption={
|
||||
selectedPointData
|
||||
? selectedPointData.action.actionType
|
||||
: "default"
|
||||
}
|
||||
options={availableActions.options}
|
||||
onSelect={handleActionTypeChange}
|
||||
/>
|
||||
{activeOption === "default" && <DefaultAction />}
|
||||
{activeOption === "spawn" && (
|
||||
<SpawnAction
|
||||
onChangeCount={handleSpawnCountChange}
|
||||
options={["Default material", "Material 1", "Material 2"]}
|
||||
defaultOption={currentMaterial}
|
||||
onSelect={handleMaterialSelect}
|
||||
onChangeInterval={handleSpawnIntervalChange}
|
||||
intervalValue={currentSpawnInterval}
|
||||
countValue={currentSpawnCount}
|
||||
intervalMin={1}
|
||||
intervalMax={60}
|
||||
intervalDefaultValue="1"
|
||||
countMin={1}
|
||||
countMax={100}
|
||||
countDefaultValue="1"
|
||||
/>
|
||||
)}
|
||||
{activeOption === "swap" && (
|
||||
<SwapAction
|
||||
options={["Default material", "Material 1", "Material 2"]}
|
||||
defaultOption={currentMaterial}
|
||||
onSelect={handleMaterialSelect}
|
||||
/>
|
||||
)}
|
||||
{activeOption === "despawn" && <DespawnAction />}
|
||||
{activeOption === "delay" && (
|
||||
<DelayAction
|
||||
value={currentDelay}
|
||||
defaultValue="0"
|
||||
min={0}
|
||||
max={60}
|
||||
onChange={handleDelayChange}
|
||||
/>
|
||||
)}
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ function MachineMechanics() {
|
|||
return (
|
||||
<>
|
||||
{selectedEventData && (
|
||||
<>
|
||||
<section>
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
|
|
@ -120,7 +120,7 @@ function MachineMechanics() {
|
|||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ function RoboticArmMechanics() {
|
|||
<>
|
||||
{selectedEventData && selectedPointData && (
|
||||
<>
|
||||
<div className="global-props">
|
||||
<div className="global-props section">
|
||||
<div className="property-list-container">
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
|
|
@ -151,40 +151,41 @@ function RoboticArmMechanics() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
multipleAction
|
||||
/>
|
||||
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
multipleAction
|
||||
/>
|
||||
|
||||
{selectedAction.actionId && currentAction && (
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={selectedAction.actionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
{selectedAction.actionId && currentAction && (
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={selectedAction.actionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption={activeOption}
|
||||
options={availableActions.options}
|
||||
onSelect={() => {}}
|
||||
disabled={true}
|
||||
/>
|
||||
<PickAndPlaceAction
|
||||
pickPointValue={currentPickPoint}
|
||||
pickPointOnChange={handlePickPointChange}
|
||||
placePointValue={currentPlacePoint}
|
||||
placePointOnChange={handlePlacePointChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption={activeOption}
|
||||
options={availableActions.options}
|
||||
onSelect={() => {}}
|
||||
disabled={true}
|
||||
/>
|
||||
<PickAndPlaceAction
|
||||
pickPointValue={currentPickPoint}
|
||||
pickPointOnChange={handlePickPointChange}
|
||||
placePointValue={currentPlacePoint}
|
||||
placePointOnChange={handlePlacePointChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ function StorageMechanics() {
|
|||
return (
|
||||
<>
|
||||
{selectedEventData && (
|
||||
<>
|
||||
<section>
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
|
|
@ -111,7 +111,7 @@ function StorageMechanics() {
|
|||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</>
|
||||
</section>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,182 +4,186 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
|
|||
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
||||
import Trigger from "../trigger/Trigger";
|
||||
import {
|
||||
useSelectedEventData,
|
||||
useSelectedProduct,
|
||||
useSelectedEventData,
|
||||
useSelectedProduct,
|
||||
} from "../../../../../../store/simulation/useSimulationStore";
|
||||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||
import TravelAction from "../actions/TravelAction";
|
||||
import ActionsList from "../components/ActionsList";
|
||||
|
||||
function VehicleMechanics() {
|
||||
const [activeOption, setActiveOption] = useState<"default" | "travel">(
|
||||
"default"
|
||||
);
|
||||
const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { getPointByUuid, updateEvent, updateAction } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
const [activeOption, setActiveOption] = useState<"default" | "travel">(
|
||||
"default"
|
||||
);
|
||||
const [selectedPointData, setSelectedPointData] = useState<
|
||||
VehiclePointSchema | undefined
|
||||
>();
|
||||
const { selectedEventData } = useSelectedEventData();
|
||||
const { getPointByUuid, updateEvent, updateAction } = useProductStore();
|
||||
const { selectedProduct } = useSelectedProduct();
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEventData) {
|
||||
const point = getPointByUuid(
|
||||
selectedProduct.productId,
|
||||
selectedEventData.data.modelUuid,
|
||||
selectedEventData.selectedPoint
|
||||
) as VehiclePointSchema | undefined;
|
||||
useEffect(() => {
|
||||
if (selectedEventData) {
|
||||
const point = getPointByUuid(
|
||||
selectedProduct.productId,
|
||||
selectedEventData.data.modelUuid,
|
||||
selectedEventData.selectedPoint
|
||||
) as VehiclePointSchema | undefined;
|
||||
|
||||
if (point) {
|
||||
setSelectedPointData(point);
|
||||
setActiveOption(point.action.actionType as "travel");
|
||||
}
|
||||
}
|
||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||
if (point) {
|
||||
setSelectedPointData(point);
|
||||
setActiveOption(point.action.actionType as "travel");
|
||||
}
|
||||
}
|
||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||
|
||||
const handleSpeedChange = (value: string) => {
|
||||
if (!selectedEventData) return;
|
||||
updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
||||
speed: parseFloat(value),
|
||||
});
|
||||
};
|
||||
const handleSpeedChange = (value: string) => {
|
||||
if (!selectedEventData) return;
|
||||
updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
||||
speed: parseFloat(value),
|
||||
});
|
||||
};
|
||||
|
||||
const handleActionTypeChange = (option: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const validOption = option as "travel";
|
||||
setActiveOption(validOption);
|
||||
const handleActionTypeChange = (option: string) => {
|
||||
if (!selectedEventData || !selectedPointData) return;
|
||||
const validOption = option as "travel";
|
||||
setActiveOption(validOption);
|
||||
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
};
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
actionType: validOption,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
};
|
||||
const handleRenameAction = (newName: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||
};
|
||||
|
||||
const handleLoadCapacityChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
loadCapacity: parseFloat(value),
|
||||
});
|
||||
};
|
||||
const handleLoadCapacityChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
loadCapacity: parseFloat(value),
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnloadDurationChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
unLoadDuration: parseFloat(value),
|
||||
});
|
||||
};
|
||||
const handleUnloadDurationChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
updateAction(selectedPointData.action.actionUuid, {
|
||||
unLoadDuration: parseFloat(value),
|
||||
});
|
||||
};
|
||||
|
||||
const handlePickPointChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
};
|
||||
const handlePickPointChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
};
|
||||
|
||||
const handleUnloadPointChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
};
|
||||
const handleUnloadPointChange = (value: string) => {
|
||||
if (!selectedPointData) return;
|
||||
};
|
||||
|
||||
// Get current values from store
|
||||
const currentSpeed =
|
||||
selectedEventData?.data.type === "vehicle"
|
||||
? selectedEventData.data.speed.toString()
|
||||
: "0.5";
|
||||
// Get current values from store
|
||||
const currentSpeed =
|
||||
selectedEventData?.data.type === "vehicle"
|
||||
? selectedEventData.data.speed.toString()
|
||||
: "0.5";
|
||||
|
||||
const currentActionName = selectedPointData
|
||||
? selectedPointData.action.actionName
|
||||
: "Action Name";
|
||||
const currentActionName = selectedPointData
|
||||
? selectedPointData.action.actionName
|
||||
: "Action Name";
|
||||
|
||||
const currentLoadCapacity = selectedPointData
|
||||
? selectedPointData.action.loadCapacity.toString()
|
||||
: "1";
|
||||
const currentLoadCapacity = selectedPointData
|
||||
? selectedPointData.action.loadCapacity.toString()
|
||||
: "1";
|
||||
|
||||
const currentUnloadDuration = selectedPointData
|
||||
? selectedPointData.action.unLoadDuration.toString()
|
||||
: "1";
|
||||
const currentUnloadDuration = selectedPointData
|
||||
? selectedPointData.action.unLoadDuration.toString()
|
||||
: "1";
|
||||
|
||||
const currentPickPoint = selectedPointData?.action.pickUpPoint;
|
||||
const currentPickPoint = selectedPointData?.action.pickUpPoint;
|
||||
|
||||
const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
|
||||
const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
|
||||
|
||||
const availableActions = {
|
||||
defaultOption: "travel",
|
||||
options: ["travel"],
|
||||
};
|
||||
const availableActions = {
|
||||
defaultOption: "travel",
|
||||
options: ["travel"],
|
||||
};
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{selectedEventData && (
|
||||
<>
|
||||
{selectedEventData && (
|
||||
<>
|
||||
<div className="global-props">
|
||||
<div className="property-list-container">
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
label="Speed"
|
||||
value={currentSpeed}
|
||||
min={0}
|
||||
step={0.1}
|
||||
defaultValue={"0.5"}
|
||||
max={10}
|
||||
activeOption="m/s"
|
||||
onClick={() => { }}
|
||||
onChange={handleSpeedChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
/>
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={currentActionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption="travel"
|
||||
options={availableActions.options}
|
||||
onSelect={handleActionTypeChange}
|
||||
/>
|
||||
<div className="global-props section">
|
||||
<div className="property-list-container">
|
||||
<div className="property-item">
|
||||
<InputWithDropDown
|
||||
label="Speed"
|
||||
value={currentSpeed}
|
||||
min={0}
|
||||
step={0.1}
|
||||
defaultValue={"0.5"}
|
||||
max={10}
|
||||
activeOption="m/s"
|
||||
onClick={() => {}}
|
||||
onChange={handleSpeedChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<ActionsList
|
||||
setSelectedPointData={setSelectedPointData}
|
||||
selectedPointData={selectedPointData}
|
||||
/>
|
||||
<div className="selected-actions-details">
|
||||
<div className="selected-actions-header">
|
||||
<RenameInput
|
||||
value={currentActionName}
|
||||
onRename={handleRenameAction}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected-actions-list">
|
||||
<LabledDropdown
|
||||
defaultOption="travel"
|
||||
options={availableActions.options}
|
||||
onSelect={handleActionTypeChange}
|
||||
/>
|
||||
|
||||
{activeOption === "travel" && (
|
||||
<TravelAction
|
||||
loadCapacity={{
|
||||
value: currentLoadCapacity,
|
||||
min: 1,
|
||||
max: 100,
|
||||
defaultValue: "1",
|
||||
onChange: handleLoadCapacityChange,
|
||||
}}
|
||||
unloadDuration={{
|
||||
value: currentUnloadDuration,
|
||||
min: 1,
|
||||
max: 60,
|
||||
defaultValue: "1",
|
||||
onChange: handleUnloadDurationChange,
|
||||
}}
|
||||
// pickPoint={{
|
||||
// value: currentPickPoint,
|
||||
// onChange: handlePickPointChange,
|
||||
// }}
|
||||
// unloadPoint={{
|
||||
// value: currentUnloadPoint,
|
||||
// onChange: handleUnloadPointChange,
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{activeOption === "travel" && (
|
||||
<TravelAction
|
||||
loadCapacity={{
|
||||
value: currentLoadCapacity,
|
||||
min: 1,
|
||||
max: 100,
|
||||
defaultValue: "1",
|
||||
onChange: handleLoadCapacityChange,
|
||||
}}
|
||||
unloadDuration={{
|
||||
value: currentUnloadDuration,
|
||||
min: 1,
|
||||
max: 60,
|
||||
defaultValue: "1",
|
||||
onChange: handleUnloadDurationChange,
|
||||
}}
|
||||
// pickPoint={{
|
||||
// value: currentPickPoint,
|
||||
// onChange: handlePickPointChange,
|
||||
// }}
|
||||
// unloadPoint={{
|
||||
// value: currentUnloadPoint,
|
||||
// onChange: handleUnloadPointChange,
|
||||
// }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tirgger">
|
||||
<Trigger />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default VehicleMechanics;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AddIcon,
|
||||
ArrowIcon,
|
||||
|
|
@ -47,6 +47,8 @@ const Simulations: React.FC = () => {
|
|||
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
|
||||
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
|
||||
|
||||
const [openObjects, setOpenObjects] = useState(true);
|
||||
|
||||
const handleAddProduct = () => {
|
||||
addProduct(`Product ${products.length + 1}`, generateUUID());
|
||||
};
|
||||
|
|
@ -102,7 +104,7 @@ const Simulations: React.FC = () => {
|
|||
<div className="simulations-container">
|
||||
<div className="header">Simulations</div>
|
||||
<div className="add-product-container">
|
||||
<div className="actions">
|
||||
<div className="actions section">
|
||||
<div className="header">
|
||||
<div className="header-value">Products</div>
|
||||
<div className="add-button" onClick={handleAddProduct}>
|
||||
|
|
@ -164,16 +166,18 @@ const Simulations: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="simulation-process">
|
||||
<div className="collapse-header-container">
|
||||
<div className="simulation-process section">
|
||||
<button
|
||||
className="collapse-header-container"
|
||||
onClick={() => setOpenObjects(!openObjects)}
|
||||
>
|
||||
<div className="header">Events</div>
|
||||
<div className="arrow-container">
|
||||
<ArrowIcon />
|
||||
</div>
|
||||
</div>
|
||||
{events.map((event, index) => (
|
||||
<List key={index} val={event} />
|
||||
))}
|
||||
</button>
|
||||
{openObjects &&
|
||||
events.map((event, index) => <List key={index} val={event} />)}
|
||||
</div>
|
||||
|
||||
<div className="compare-simulations-container">
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@ import React, { useState } from "react";
|
|||
import RenameInput from "./inputs/RenameInput";
|
||||
import { ArrowIcon } from "../icons/ExportCommonIcons";
|
||||
import MenuBar from "./menu/menu";
|
||||
import { ProjectIcon } from "../icons/HeaderIcons";
|
||||
|
||||
const FileMenu: React.FC = () => {
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
return (
|
||||
<div className="project-dropdowm-container">
|
||||
<div className="project-name">
|
||||
<div className="icon">
|
||||
<ProjectIcon />
|
||||
</div>
|
||||
<RenameInput value="untitled" />
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -24,11 +24,16 @@ const InputToggle: React.FC<InputToggleProps> = ({
|
|||
<label htmlFor={`toogle-input-${inputKey}`} className="label">
|
||||
{label}
|
||||
</label>
|
||||
<div className={"check-box"} onClick={handleOnClick}>
|
||||
<div className={"check-box"} onClick={handleOnClick}
|
||||
style={{
|
||||
background: value ? "var(--background-color-accent)" : "",
|
||||
outline: value ? "" : "1px solid var(--border-color)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="check-box-style"
|
||||
style={{
|
||||
left: value ? "50%" : "2px",
|
||||
left: value ? "16px" : "2px",
|
||||
background: value ? "" : "var(--text-disabled)",
|
||||
}}
|
||||
></div>
|
||||
|
|
|
|||
|
|
@ -16,72 +16,91 @@ $text-button-color: #f3f3fd;
|
|||
$text-color-dark: #f3f3fd;
|
||||
$text-disabled-dark: #6f6f7a;
|
||||
$input-text-color-dark: #b5b5c8;
|
||||
$highlight-text-color-dark: #B392F0;
|
||||
$highlight-text-color-dark: #b392f0;
|
||||
$text-button-color-dark: #f3f3fd;
|
||||
|
||||
// background colors
|
||||
// ---------- light mode ----------
|
||||
$background-color: linear-gradient(-45deg, #FCFDFDCC 0%, #FCFDFD99 100%);
|
||||
$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
|
||||
$background-color-solid: #fcfdfd;
|
||||
$background-color-secondary: #FCFDFD4D;
|
||||
$background-color-secondary: #fcfdfd4d;
|
||||
$background-color-accent: #6f42c1;
|
||||
$background-color-button: #6f42c1;
|
||||
$background-color-drop-down: #6F42C14D;
|
||||
$background-color-input: #FFFFFF4D;
|
||||
$background-color-input-focus: #F2F2F7;
|
||||
$background-color-drop-down-gradient: linear-gradient(-45deg, #75649366 0%, #40257266 100%);
|
||||
$background-color-selected: #E0DFFF;
|
||||
$background-radial-gray-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
|
||||
$background-color-drop-down: #6f42c14d;
|
||||
$background-color-input: #ffffff4d;
|
||||
$background-color-input-focus: #f2f2f7;
|
||||
$background-color-drop-down-gradient: linear-gradient(
|
||||
-45deg,
|
||||
#75649366 0%,
|
||||
#40257266 100%
|
||||
);
|
||||
$background-color-selected: #e0dfff;
|
||||
$background-radial-gray-gradient: radial-gradient(
|
||||
circle,
|
||||
#bfe0f8 0%,
|
||||
#e9ebff 46%,
|
||||
#e2acff 100%
|
||||
);
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$background-color-dark: linear-gradient(-45deg, #333333B3 0%, #2D2437B3 100%);
|
||||
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
|
||||
$background-color-solid-dark: #19191d;
|
||||
$background-color-secondary-dark: #19191D99;
|
||||
$background-color-secondary-dark: #19191d99;
|
||||
$background-color-accent-dark: #6f42c1;
|
||||
$background-color-button-dark: #6f42c1;
|
||||
$background-color-drop-down-dark: #50505080;
|
||||
$background-color-input-dark: #FFFFFF33;
|
||||
$background-color-input-dark: #ffffff33;
|
||||
$background-color-input-focus-dark: #333333;
|
||||
$background-color-drop-down-gradient-dark: linear-gradient(-45deg, #8973B166 0%, #53427366 100%);
|
||||
$background-color-selected-dark: #403E66;
|
||||
$background-radial-gray-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
|
||||
$background-color-drop-down-gradient-dark: linear-gradient(
|
||||
-45deg,
|
||||
#8973b166 0%,
|
||||
#53427366 100%
|
||||
);
|
||||
$background-color-selected-dark: #403e66;
|
||||
$background-radial-gray-gradient-dark: radial-gradient(
|
||||
circle,
|
||||
#31373b 0%,
|
||||
#48494b 46%,
|
||||
#52415c 100%
|
||||
);
|
||||
|
||||
// border colors
|
||||
// ---------- light mode ----------
|
||||
$border-color: #E0DFFF;
|
||||
$border-color-accent: #6F42C1;
|
||||
$border-color: #e0dfff;
|
||||
$input-border-color: #d5dddd80;
|
||||
$border-color-accent: #6f42c1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$border-color-dark: #564B69;
|
||||
$border-color-accent-dark: #6F42C1;
|
||||
$border-color-dark: #564b69;
|
||||
$input-border-color-dark: #d5dddd80;
|
||||
$border-color-accent-dark: #6f42c1;
|
||||
|
||||
// highlight colors
|
||||
// ---------- light mode ----------
|
||||
$highlight-accent-color: #E0DFFF;
|
||||
$highlight-secondary-color: #6F42C1;
|
||||
$highlight-accent-color: #e0dfff;
|
||||
$highlight-secondary-color: #6f42c1;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$highlight-accent-color-dark: #403E6A;
|
||||
$highlight-secondary-color-dark: #C4ABF1;
|
||||
$highlight-accent-color-dark: #403e6a;
|
||||
$highlight-secondary-color-dark: #c4abf1;
|
||||
|
||||
// icon colors
|
||||
// ---------- light mode ----------
|
||||
$icon-default-color: #6F42C1;
|
||||
$icon-default-color: #6f42c1;
|
||||
$icon-default-color-hover: #7f4ddb;
|
||||
$icon-default-color-active: #F2F2F7;
|
||||
$icon-default-color-active: #f2f2f7;
|
||||
|
||||
// ---------- dark mode ----------
|
||||
$icon-default-color-dark: #6F42C1;
|
||||
$icon-default-color-dark: #6f42c1;
|
||||
$icon-default-color-hover-dark: #7f4ddb;
|
||||
$icon-default-color-active-dark: #F2F2F7;
|
||||
$icon-default-color-active-dark: #f2f2f7;
|
||||
|
||||
// colors
|
||||
$color1: #A392CD;
|
||||
$color1: #a392cd;
|
||||
$color2: #7b4cd3;
|
||||
$color3: #B186FF;
|
||||
$color4: #8752E8;
|
||||
$color5: #C7A8FF;
|
||||
|
||||
$color3: #b186ff;
|
||||
$color4: #8752e8;
|
||||
$color5: #c7a8ff;
|
||||
|
||||
// old variables
|
||||
$accent-color: #6f42c1;
|
||||
|
|
@ -106,7 +125,12 @@ $acent-gradient-dark: linear-gradient(90deg, #b392f0 0%, #a676ff 100%);
|
|||
$acent-gradient: linear-gradient(90deg, #6f42c1 0%, #925df3 100%);
|
||||
|
||||
$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%);
|
||||
$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%);
|
||||
$faint-gradient-dark: radial-gradient(
|
||||
circle,
|
||||
#31373b 0%,
|
||||
#48494b 46%,
|
||||
#52415c 100%
|
||||
);
|
||||
|
||||
$font-inter: "Inter", sans-serif;
|
||||
$font-josefin-sans: "Josefin Sans", sans-serif;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
// border colors
|
||||
--border-color: #{$border-color};
|
||||
--input-border-color: #{$input-border-color};
|
||||
--border-color-accent: #{$border-color-accent};
|
||||
|
||||
// highlight colors
|
||||
|
|
@ -73,6 +74,7 @@
|
|||
|
||||
// border colors
|
||||
--border-color: #{$border-color};
|
||||
--input-border-color: #{$input-border-color-dark};
|
||||
--border-color-accent: #{$border-color-accent-dark};
|
||||
|
||||
// highlight colors
|
||||
|
|
@ -136,8 +138,8 @@ body {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
@use "../abstracts/mixins" as *;
|
||||
|
||||
section, .section{
|
||||
padding: 12px;
|
||||
padding: 4px;
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--background-color);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 2px 4px;
|
||||
border-radius: #{$border-radius-small};
|
||||
outline: 1px solid var(--border-color);
|
||||
padding: 4px 8px;
|
||||
border-radius: #{$border-radius-large};
|
||||
outline: 1px solid var(--input-border-color);
|
||||
outline-offset: -1px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
background: var(--background-color-input);
|
||||
color: var(--input-text-color);
|
||||
|
||||
&:focus,
|
||||
|
|
@ -44,6 +44,18 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
// Chrome, Safari, Edge, Opera
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Firefox
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
color: var(--input-text-color);
|
||||
font-size: var(--font-size-regular);
|
||||
|
|
@ -61,9 +73,7 @@ input {
|
|||
color: var(--input-text-color);
|
||||
font-size: var(--font-size-regular);
|
||||
font-weight: var(--font-weight-regular);
|
||||
border: 1px solid var(--accent-color);
|
||||
outline: none;
|
||||
border-radius: #{$border-radius-small};
|
||||
line-height: 26px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
|
@ -102,10 +112,11 @@ input {
|
|||
.search-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
border-radius: #{$border-radius-small};
|
||||
padding: 6px 2px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
padding: 3px 2px;
|
||||
position: relative;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--background-color-input-focus);
|
||||
|
||||
.icon-container {
|
||||
@include flex-center;
|
||||
|
|
@ -220,7 +231,6 @@ input {
|
|||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.dropdown-options {
|
||||
|
|
@ -469,7 +479,7 @@ input {
|
|||
.check-box {
|
||||
height: 24px;
|
||||
width: 38px;
|
||||
background: var(--background-color-secondary);
|
||||
background: var(--background-color);
|
||||
border-radius: #{$border-radius-large};
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -480,7 +490,7 @@ input {
|
|||
width: 20px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background: var(--accent-color);
|
||||
background: var(--text-button-color);
|
||||
border-radius: #{$border-radius-circle};
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
|
@ -726,17 +736,17 @@ input {
|
|||
@include flex-center;
|
||||
}
|
||||
}
|
||||
.upload-custom-asset-button{
|
||||
.upload-custom-asset-button {
|
||||
padding: 6px 12px;
|
||||
@include flex-space-between;
|
||||
.title{
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
width: 40%;
|
||||
}
|
||||
input{
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.upload-button{
|
||||
.upload-button {
|
||||
width: 60%;
|
||||
background: var(--highlight-accent-color);
|
||||
color: var(--accent-color);
|
||||
|
|
|
|||
|
|
@ -6,15 +6,31 @@
|
|||
align-items: center;
|
||||
gap: 2px;
|
||||
position: relative;
|
||||
height: 32px;
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
background: var(--background-color-drop-down);
|
||||
padding: 3px 8px;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
.project-name {
|
||||
line-height: 32px;
|
||||
@include flex-center;
|
||||
height: 100%;
|
||||
line-height: 26px;
|
||||
.icon{
|
||||
@include flex-center;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.input-value{
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.more-options-button {
|
||||
@include flex-center;
|
||||
border-radius: #{$border-radius-small};
|
||||
height: 28px;
|
||||
height: 22px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: var(--highlight-accent-color);
|
||||
|
|
@ -41,6 +57,7 @@
|
|||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
backdrop-filter: blur(10px);
|
||||
.menu-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
background: var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,33 +44,40 @@
|
|||
width: 32px;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
border-radius: #{$border-radius-small};
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color-secondary);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
background: var(--background-color-drop-down);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--background-color-secondary);
|
||||
outline: 1px solid var(--accent-color);
|
||||
background: var(--background-color-accent);
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
rect {
|
||||
stroke: var(--icon-default-color-active);
|
||||
}
|
||||
circle {
|
||||
fill: var(--icon-default-color-active);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--background-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left-container {
|
||||
min-height: 50vh;
|
||||
padding-bottom: 12px;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar-left-content-container {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
// flex: 1;
|
||||
// height: calc(100% - 36px);
|
||||
position: relative;
|
||||
// overflow: auto;
|
||||
|
||||
.template-list {
|
||||
display: flex;
|
||||
|
|
@ -232,8 +239,12 @@
|
|||
.outline-content-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
max-height: 60vh;
|
||||
padding: 8px;
|
||||
.overflow {
|
||||
height: calc(100% - 16px);
|
||||
max-height: 46vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -323,8 +334,8 @@
|
|||
display: flex;
|
||||
|
||||
.user-profile {
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
background: var(--background-color-accent);
|
||||
color: var(--text-button-color);
|
||||
}
|
||||
|
||||
.user-organization {
|
||||
|
|
@ -349,6 +360,8 @@
|
|||
.sidebar-actions-container {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
|
||||
.sidebar-action-list {
|
||||
margin-bottom: 12px;
|
||||
|
|
@ -359,6 +372,8 @@
|
|||
background: var(--background-color-secondary);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: #{$box-shadow-medium};
|
||||
outline: 1px solid var(--border-color);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
@ -715,10 +730,10 @@
|
|||
.machine-mechanics-content-container,
|
||||
.simulations-container,
|
||||
.event-proprties-wrapper {
|
||||
position: relative;
|
||||
max-height: calc(60vh - (47px - 35px));
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
|
||||
width: calc(100% - 4px);
|
||||
overflow-x: hidden;
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
|
|
@ -904,9 +919,8 @@
|
|||
.collapse-header-container {
|
||||
@include flex-space-between;
|
||||
padding-right: 12px;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
color: var(--accent-color);
|
||||
|
|
@ -990,7 +1004,6 @@
|
|||
@include flex-space-between;
|
||||
padding: 10px 12px;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 4px;
|
||||
.input-value {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -998,7 +1011,6 @@
|
|||
|
||||
.input-container {
|
||||
@include flex-center;
|
||||
|
||||
.remove-button {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
|
|
@ -1032,6 +1044,13 @@
|
|||
}
|
||||
|
||||
.custom-input-container {
|
||||
@include flex-space-between;
|
||||
.split {
|
||||
height: 20px;
|
||||
width: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--text-disabled);
|
||||
}
|
||||
.header {
|
||||
@include flex-space-between;
|
||||
border: none;
|
||||
|
|
@ -1043,11 +1062,9 @@
|
|||
|
||||
.inputs-container {
|
||||
@include flex-space-between;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.input-container {
|
||||
padding: 0 12px;
|
||||
margin-top: 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1065,7 +1082,6 @@
|
|||
.dropdown-header-container,
|
||||
.dropdown-content-container {
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid var(--highlight-accent-color);
|
||||
}
|
||||
|
||||
.input-range-container {
|
||||
|
|
|
|||
|
|
@ -770,6 +770,7 @@
|
|||
.editWidgetOptions {
|
||||
position: absolute;
|
||||
background: var(--background-color);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
Loading…
Reference in New Issue