Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v2-ui #70

Merged
Vishnu merged 26 commits from v2-ui into main 2025-04-29 13:13:53 +00:00
Conversation 0 Commits 26 Files Changed 92 +4545 -2033
92 changed files with 4545 additions and 2033 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/package-lock.json generated
View File

@ -30,7 +30,6 @@
"glob": "^11.0.0",
"gsap": "^3.12.5",
"html2canvas": "^1.4.1",
"immer": "^10.1.1",
"leva": "^0.10.0",
"mqtt": "^5.10.4",
"postprocessing": "^6.36.4",
@ -2022,7 +2021,7 @@
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
"devOptional": true,
"dev": true,
"dependencies": {
"@jridgewell/trace-mapping": "0.3.9"
},
@ -2034,7 +2033,7 @@
"version": "0.3.9",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
"devOptional": true,
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10"
@ -4137,26 +4136,6 @@
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/jest-dom": {
"version": "5.17.0",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@ -4268,25 +4247,25 @@
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
"integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
"devOptional": true
"dev": true
},
"node_modules/@tsconfig/node12": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
"devOptional": true
"dev": true
},
"node_modules/@tsconfig/node14": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
"devOptional": true
"dev": true
},
"node_modules/@tsconfig/node16": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
"devOptional": true
"dev": true
},
"node_modules/@turf/along": {
"version": "7.2.0",
@ -9040,7 +9019,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"devOptional": true
"dev": true
},
"node_modules/cross-env": {
"version": "7.0.3",
@ -9917,7 +9896,7 @@
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=0.3.1"
}
@ -12747,10 +12726,9 @@
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
},
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"license": "MIT",
"version": "9.0.21",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
"integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
@ -15281,7 +15259,7 @@
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"devOptional": true
"dev": true
},
"node_modules/makeerror": {
"version": "1.0.12",
@ -18012,16 +17990,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/react-dev-utils/node_modules/immer": {
"version": "9.0.21",
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
"integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/react-dev-utils/node_modules/loader-utils": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@ -20759,7 +20727,7 @@
"version": "10.9.2",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
"devOptional": true,
"dev": true,
"dependencies": {
"@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7",
@ -20802,7 +20770,7 @@
"version": "8.3.4",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
"devOptional": true,
"dev": true,
"dependencies": {
"acorn": "^8.11.0"
},
@ -20814,7 +20782,7 @@
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"devOptional": true
"dev": true
},
"node_modules/tsconfig-paths": {
"version": "3.15.0",
@ -21310,7 +21278,7 @@
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
"devOptional": true
"dev": true
},
"node_modules/v8-to-istanbul": {
"version": "8.1.1",
@ -22369,7 +22337,7 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"devOptional": true,
"dev": true,
"engines": {
"node": ">=6"
}

BIN
app/src/assets/gltf-glb/arm_ui_drop.glb Normal file
View File

Binary file not shown.

BIN
app/src/assets/gltf-glb/arm_ui_pick.glb Normal file
View File

Binary file not shown.

34
app/src/components/icons/ContextMenuIcons.tsx
View File

@ -9,31 +9,31 @@ export function FlipXAxisIcon() {
>
<path
d="M1 9.0568V2.94321C1 2.09213 1 1.6666 1.27121 1.52703C1.54242 1.38746 1.88869 1.6348 2.58123 2.12947L3.37186 2.6942C3.67979 2.91415 3.83375 3.02413 3.91687 3.18565C4 3.34718 4 3.53639 4 3.9148V8.08525C4 8.46365 4 8.65285 3.91687 8.8144C3.83375 8.9759 3.67979 9.0859 3.37186 9.30585L2.58124 9.87055C1.88869 10.3653 1.54242 10.6126 1.27121 10.473C1 10.3335 1 9.9079 1 9.0568Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<path
d="M8.84612 2.99935L8.8461 2.99936C8.68674 3.11318 8.58748 3.18452 8.51591 3.2461C8.45011 3.30271 8.42848 3.33407 8.41656 3.3572L8.84612 2.99935ZM8.84612 2.99935L9.63671 2.43462C9.63671 2.43462 9.63672 2.43462 9.63672 2.43462C9.99337 2.17987 10.2264 2.01464 10.403 1.92406C10.487 1.88093 10.5331 1.86801 10.555 1.86465C10.5651 1.88444 10.5813 1.92948 10.5951 2.02293C10.624 2.21925 10.625 2.50491 10.625 2.94321V9.0568C10.625 9.49511 10.624 9.78078 10.5951 9.9771C10.5813 10.0705 10.5651 10.1156 10.5551 10.1354C10.5331 10.132 10.487 10.1191 10.403 10.076C10.2264 9.98539 9.99337 9.82016 9.63672 9.5654L9.63671 9.5654L8.84611 9.0007L8.84611 9.00069M8.84612 2.99935L8.84611 9.00069M8.84611 9.00069C8.68675 8.88688 8.58748 8.81553 8.51591 8.75395C8.45015 8.69737 8.4285 8.666 8.41657 8.64287C8.40466 8.61972 8.39169 8.5839 8.38386 8.49735C8.37535 8.40331 8.375 8.28108 8.375 8.08525V3.9148C8.375 3.71896 8.37535 3.59672 8.38386 3.50269M8.84611 9.00069L8.38386 3.50269M8.38386 3.50269C8.39168 3.41623 8.40463 3.38041 8.41652 3.35729L8.38386 3.50269ZM10.5715 1.86435C10.5713 1.86468 10.5689 1.86476 10.565 1.86363C10.5698 1.86345 10.5718 1.86402 10.5715 1.86435ZM10.5501 1.85597C10.5469 1.85343 10.5456 1.85142 10.5457 1.85105C10.5458 1.85068 10.5474 1.85195 10.5501 1.85597ZM10.5457 10.149C10.5456 10.1486 10.5469 10.1466 10.5501 10.1441C10.5475 10.1481 10.5458 10.1493 10.5457 10.149ZM10.565 10.1364C10.5689 10.1353 10.5713 10.1353 10.5716 10.1357C10.5718 10.136 10.5698 10.1366 10.565 10.1364Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M6 7V5"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M6 3V1"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M6 11V9"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
@ -52,31 +52,31 @@ export function FlipYAxisIcon() {
>
<path
d="M9.0568 11H2.94321C2.09213 11 1.6666 11 1.52703 10.7288C1.38746 10.4576 1.6348 10.1113 2.12947 9.41877L2.6942 8.62814C2.91415 8.32021 3.02413 8.16625 3.18565 8.08313C3.34718 8 3.53639 8 3.9148 8H8.08525C8.46365 8 8.65285 8 8.8144 8.08313C8.9759 8.16625 9.0859 8.32021 9.30585 8.62814L9.87055 9.41876C10.3653 10.1113 10.6126 10.4576 10.473 10.7288C10.3335 11 9.9079 11 9.0568 11Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<path
d="M2.99935 3.15388L2.99936 3.1539C3.11318 3.31326 3.18452 3.41252 3.2461 3.48409C3.30271 3.54989 3.33407 3.57152 3.3572 3.58344L2.99935 3.15388ZM2.99935 3.15388L2.43462 2.36329C2.43462 2.36329 2.43462 2.36328 2.43462 2.36328C2.17987 2.00663 2.01464 1.7736 1.92406 1.59704C1.88093 1.51299 1.86801 1.46687 1.86465 1.44495C1.88444 1.43495 1.92948 1.41866 2.02293 1.4049C2.21925 1.37599 2.50491 1.375 2.94321 1.375L9.0568 1.375C9.49511 1.375 9.78078 1.37599 9.9771 1.4049C10.0705 1.41866 10.1156 1.43494 10.1354 1.44495C10.132 1.46687 10.1191 1.51299 10.076 1.59705C9.98539 1.7736 9.82016 2.00663 9.5654 2.36328L9.5654 2.36329L9.0007 3.15389L9.00069 3.15389M2.99935 3.15388L9.00069 3.15389M9.00069 3.15389C8.88688 3.31325 8.81553 3.41252 8.75395 3.48409C8.69737 3.54985 8.666 3.5715 8.64287 3.58343C8.61972 3.59534 8.5839 3.60831 8.49735 3.61614C8.40331 3.62465 8.28108 3.625 8.08525 3.625L3.9148 3.625C3.71896 3.625 3.59672 3.62465 3.50269 3.61614M9.00069 3.15389L3.50269 3.61614M3.50269 3.61614C3.41623 3.60832 3.38041 3.59537 3.35729 3.58348L3.50269 3.61614ZM1.86435 1.42845C1.86468 1.42867 1.86476 1.43108 1.86363 1.43501C1.86345 1.4302 1.86402 1.42823 1.86435 1.42845ZM1.85597 1.4499C1.85343 1.45311 1.85142 1.45444 1.85105 1.4543C1.85068 1.45416 1.85195 1.45255 1.85597 1.4499ZM10.149 1.45429C10.1486 1.45443 10.1466 1.4531 10.1441 1.44989C10.1481 1.45254 10.1493 1.45415 10.149 1.45429ZM10.1364 1.435C10.1353 1.43107 10.1353 1.42867 10.1357 1.42845C10.136 1.42823 10.1366 1.4302 10.1364 1.435Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M7 6H5"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M3 6H1"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M11 6H9"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
@ -95,31 +95,31 @@ export function FlipZAxisIcon() {
<g clipPath="url(#clip0_111_550)">
<path
d="M9.04893 11.25H2.95106C2.10217 11.25 1.67773 11.25 1.53852 11.0466C1.39931 10.8432 1.64602 10.5835 2.13942 10.0641L2.7027 9.47111C2.92208 9.24016 3.03177 9.12469 3.19288 9.06234C3.35399 9 3.54271 9 3.92015 9H8.07988C8.4573 9 8.64602 9 8.80715 9.06234C8.96823 9.12469 9.07795 9.24016 9.29734 9.4711L9.86058 10.0641C10.354 10.5835 10.6007 10.8432 10.4615 11.0466C10.3223 11.25 9.89784 11.25 9.04893 11.25Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<path
d="M2.97458 2.27061L2.97459 2.27063C3.21361 2.52227 3.26241 2.56246 3.32818 2.58793L2.97458 2.27061ZM2.97458 2.27061L2.4113 1.67767C2.4113 1.67767 2.4113 1.67766 2.4113 1.67766C2.1834 1.43775 2.03311 1.27814 1.94303 1.15861C1.96477 1.15501 1.99023 1.15144 2.01993 1.14815C2.22388 1.12557 2.51696 1.125 2.95106 1.125L9.04893 1.125C9.48304 1.125 9.77613 1.12557 9.98008 1.14815C10.0098 1.15144 10.0352 1.15501 10.057 1.15862C9.9669 1.27813 9.81662 1.43775 9.5887 1.67766L9.58869 1.67767L9.02545 2.27062L9.02544 2.27063M2.97458 2.27061L9.02544 2.27063M9.02544 2.27063C8.78635 2.52233 8.73756 2.56249 8.67176 2.58797C8.59172 2.6189 8.48853 2.625 8.07988 2.625L3.92015 2.625C3.51141 2.625 3.40826 2.61889 3.32825 2.58796L9.02544 2.27063Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
/>
<path
opacity="0.5"
d="M7 6.75H5"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M3 6.75H1"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M7.5 4.94853H10.2794C10.7911 4.94853 11.2059 5.36332 11.2059 5.875C11.2059 6.38668 10.7911 6.80147 10.2794 6.80147H9.35294M7.5 4.94853L8.32353 4.125M7.5 4.94853L8.32353 5.77206"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.75"
strokeLinecap="round"
strokeLinejoin="round"
@ -150,11 +150,11 @@ export function RenameIcon() {
>
<path
d="M5.03566 0.857117C4.85815 0.857117 4.71423 1.00103 4.71423 1.17855C4.71423 1.35606 4.85815 1.49997 5.03566 1.49997H5.67852V10.5H5.03566C4.85815 10.5 4.71423 10.6439 4.71423 10.8214C4.71423 10.9989 4.85815 11.1428 5.03566 11.1428H6.96423C7.14175 11.1428 7.28566 10.9989 7.28566 10.8214C7.28566 10.6439 7.14175 10.5 6.96423 10.5H6.32138V1.49997H6.96423C7.14175 1.49997 7.28566 1.35606 7.28566 1.17855C7.28566 1.00103 7.14175 0.857117 6.96423 0.857117H5.03566Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<path
d="M5.25 3H2.625C2.21079 3 1.875 3.33579 1.875 3.75V8.25C1.875 8.66421 2.21079 9 2.625 9H5.25M6.75 9H9.375C9.78921 9 10.125 8.66421 10.125 8.25V3.75C10.125 3.33579 9.78921 3 9.375 3H6.75"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
/>
</svg>
);

86
app/src/components/icons/DashboardIcon.tsx
View File

@ -9,13 +9,13 @@ export function NotificationIcon() {
>
<path
d="M10 12.8335C10 13.3639 9.78927 13.8726 9.4142 14.2477C9.03913 14.6228 8.5304 14.8335 8 14.8335C7.4696 14.8335 6.96087 14.6228 6.58579 14.2477C6.21072 13.8726 6 13.3639 6 12.8335"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3.72064 12.1667C3.39434 12.0974 3.10586 11.9084 2.91209 11.6369C2.71832 11.3653 2.63337 11.0311 2.67399 10.7L3.34066 5.29332C3.51087 4.18175 4.07672 3.16901 4.93414 2.44143C5.79156 1.71384 6.88287 1.32036 8.00734 1.33332C9.1318 1.32036 10.2231 1.71384 11.0805 2.44143C11.9379 3.16901 12.5038 4.18175 12.674 5.29332L13.3407 10.7C13.3815 11.0301 13.2975 11.3636 13.1051 11.635C12.9127 11.9063 12.6257 12.096 12.3007 12.1667C9.47907 12.8297 6.54222 12.8297 3.72064 12.1667Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -34,7 +34,7 @@ export function HomeIcon() {
>
<path
d="M6.91304 13.5V12.8333C6.91304 12.281 7.36076 11.8333 7.91304 11.8333H8.95652C9.50881 11.8333 9.95652 12.281 9.95652 12.8333V13.5C9.95652 14.0523 10.4042 14.5 10.9565 14.5H12C12.5523 14.5 13 14.0523 13 13.5V7.38889L8.21739 2.5L3 7.38889V13.5C3 14.0523 3.44772 14.5 4 14.5H5.91304C6.46533 14.5 6.91304 14.0523 6.91304 13.5Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
/>
</svg>
);
@ -51,7 +51,7 @@ export function ProjectsIcon() {
>
<path
d="M12.1538 1.5H5.69231C5.20268 1.5 4.7331 1.68437 4.38688 2.01256C4.04066 2.34075 3.84615 2.78587 3.84615 3.25C3.35652 3.25 2.88695 3.43437 2.54073 3.76256C2.1945 4.09075 2 4.53587 2 5V13.75C2 14.2141 2.1945 14.6592 2.54073 14.9874C2.88695 15.3156 3.35652 15.5 3.84615 15.5H10.3077C10.7973 15.5 11.2669 15.3156 11.6131 14.9874C11.9593 14.6592 12.1538 14.2141 12.1538 13.75C12.6435 13.75 13.1131 13.5656 13.4593 13.2374C13.8055 12.9092 14 12.4641 14 12V3.25C14 2.78587 13.8055 2.34075 13.4593 2.01256C13.1131 1.68437 12.6435 1.5 12.1538 1.5ZM12.1538 12.875V5C12.1538 4.53587 11.9593 4.09075 11.6131 3.76256C11.2669 3.43437 10.7973 3.25 10.3077 3.25H4.76923C4.76923 3.01794 4.86648 2.79538 5.03959 2.63128C5.2127 2.46719 5.44749 2.375 5.69231 2.375H12.1538C12.3987 2.375 12.6334 2.46719 12.8066 2.63128C12.9797 2.79538 13.0769 3.01794 13.0769 3.25V12C13.0769 12.2321 12.9797 12.4546 12.8066 12.6187C12.6334 12.7828 12.3987 12.875 12.1538 12.875ZM2.92308 5C2.92308 4.76794 3.02033 4.54538 3.19344 4.38128C3.36655 4.21719 3.60134 4.125 3.84615 4.125H10.3077C10.5525 4.125 10.7873 4.21719 10.9604 4.38128C11.1335 4.54538 11.2308 4.76794 11.2308 5V13.75C11.2308 13.9821 11.1335 14.2046 10.9604 14.3687C10.7873 14.5328 10.5525 14.625 10.3077 14.625H3.84615C3.60134 14.625 3.36655 14.5328 3.19344 14.3687C3.02033 14.2046 2.92308 13.9821 2.92308 13.75V5Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</svg>
);
@ -70,103 +70,103 @@ export function TutorialsIcon() {
cx="8.157"
cy="8.35866"
r="6.17928"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M7.31894 7.8336L7.30273 7.72125C10.0583 7.32407 11.5796 5.74901 12.1058 5.09033L12.1945 5.1612C11.6598 5.83032 10.1146 7.43067 7.31894 7.8336Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M7.3313 8.19434C7.56713 8.19434 7.7583 8.00316 7.7583 7.76734C7.7583 7.53151 7.56713 7.34033 7.3313 7.34033C7.09547 7.34033 6.9043 7.53151 6.9043 7.76734C6.9043 8.00316 7.09547 8.19434 7.3313 8.19434Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M12.134 5.56787C12.3699 5.56787 12.561 5.3767 12.561 5.14087C12.561 4.90504 12.3699 4.71387 12.134 4.71387C11.8982 4.71387 11.707 4.90504 11.707 5.14087C11.707 5.3767 11.8982 5.56787 12.134 5.56787Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M5.67763 13.0492C5.15009 12.385 4.31304 10.9992 4.63359 9.18018L4.74534 9.20001C4.43251 10.9751 5.25078 12.3292 5.76636 12.9785L5.67763 13.0492Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M4.68921 9.63867C4.92504 9.63867 5.11621 9.4475 5.11621 9.21167C5.11621 8.97584 4.92504 8.78467 4.68921 8.78467C4.45338 8.78467 4.26221 8.97584 4.26221 9.21167C4.26221 9.4475 4.45338 9.63867 4.68921 9.63867Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M5.70923 13.4238C5.94506 13.4238 6.13623 13.2327 6.13623 12.9968C6.13623 12.761 5.94506 12.5698 5.70923 12.5698C5.4734 12.5698 5.28223 12.761 5.28223 12.9968C5.28223 13.2327 5.4734 13.4238 5.70923 13.4238Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M12.4429 9.6101L12.3293 9.60692C12.369 8.18736 11.8263 6.82867 10.801 5.7813C9.73352 4.69047 8.2434 4.07147 6.70876 4.0804L6.70801 3.96684C8.27081 3.96078 9.79333 4.58917 10.8822 5.70181C11.9291 6.77143 12.4833 8.1595 12.4429 9.6101Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M12.3792 10.0142C12.615 10.0142 12.8062 9.82299 12.8062 9.58716C12.8062 9.35133 12.615 9.16016 12.3792 9.16016C12.1433 9.16016 11.9521 9.35133 11.9521 9.58716C11.9521 9.82299 12.1433 10.0142 12.3792 10.0142Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M6.72974 4.4585C6.96556 4.4585 7.15674 4.26732 7.15674 4.0315C7.15674 3.79567 6.96556 3.60449 6.72974 3.60449C6.49391 3.60449 6.30273 3.79567 6.30273 4.0315C6.30273 4.26732 6.49391 4.4585 6.72974 4.4585Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M8.93738 12.7561C5.51197 12.5871 3.18964 10.3443 2.15833 8.30167C1.40017 6.79989 1.28161 5.33657 1.84898 4.48256C2.21511 3.93139 2.7529 3.64179 3.57572 3.69903L3.45825 3.81649C2.67632 3.76183 2.28567 4.03042 1.94346 4.5454C1.39865 5.36549 1.51979 6.78505 2.25963 8.25049C3.27641 10.2647 5.56617 12.476 8.94298 12.6426L8.93738 12.7561Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M4.12372 13.5272C2.54078 13.2677 1.46328 11.9915 1.38697 10.4835C1.31368 9.03292 2.2066 7.3084 4.36675 6.72559L4.39628 6.83521C2.2973 7.40152 1.42936 9.07259 1.50053 10.4778C1.54767 11.4101 2.02721 12.4642 3.18398 12.9967C3.46147 13.1244 3.45807 13.0965 3.77132 13.2139L4.12372 13.5272Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M4.36157 7.21436C4.5974 7.21436 4.78858 7.02318 4.78858 6.78735C4.78858 6.55153 4.5974 6.36035 4.36157 6.36035C4.12575 6.36035 3.93457 6.55153 3.93457 6.78735C3.93457 7.02318 4.12575 7.21436 4.36157 7.21436Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M11.5155 15.1026C11.4663 15.1026 11.4165 15.1003 11.3659 15.0956C10.4065 15.0064 9.53752 14.1202 9.04102 12.7247L9.14807 12.6865C9.62928 14.0393 10.4622 14.8976 11.3764 14.9825C11.8685 15.0293 12.3041 14.8309 12.5152 14.4681C12.7337 14.0928 12.7265 13.7453 12.3977 13.2744L12.5152 13.1569C12.8703 13.6657 12.8548 14.1099 12.6133 14.5252C12.4016 14.8889 11.9895 15.1026 11.5155 15.1026Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M8.9187 13.1187C9.15453 13.1187 9.34571 12.9275 9.34571 12.6917C9.34571 12.4558 9.15453 12.2646 8.9187 12.2646C8.68287 12.2646 8.4917 12.4558 8.4917 12.6917C8.4917 12.9275 8.68287 13.1187 8.9187 13.1187Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M10.0987 3.65056L9.99072 3.61513C10.2487 2.83274 10.7045 2.32867 11.2414 2.23252C11.572 2.17286 11.8969 2.28566 12.0886 2.52597C12.2781 2.76339 12.4042 2.98817 12.2684 3.30782L12.1509 3.19035C12.2699 2.91023 12.1625 2.80064 12.0001 2.59683C11.8344 2.38923 11.5514 2.29248 11.2616 2.34441C10.7669 2.43284 10.3432 2.90906 10.0987 3.65056Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
<path
d="M10.0535 4.04004C10.2893 4.04004 10.4805 3.84887 10.4805 3.61304C10.4805 3.37721 10.2893 3.18604 10.0535 3.18604C9.81764 3.18604 9.62646 3.37721 9.62646 3.61304C9.62646 3.84887 9.81764 4.04004 10.0535 4.04004Z"
fill="var(--text-color)"
stroke="var(--text-color)"
fill="var(--icon-default-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.562865"
/>
</svg>
@ -184,12 +184,12 @@ export function DocumentationIcon() {
>
<path
d="M8 5.10589C7.2666 4.17245 6.13604 3.23901 3.33413 3.17051C3.15009 3.16602 3 3.3155 3 3.4996C3 4.86525 3 10.0354 3 11.5645C3 11.7486 3.1501 11.8932 3.33409 11.8992C6.13603 11.9908 7.2666 13.233 8 14.1665M8 5.10589C8.7334 4.17245 9.86393 3.23901 12.6659 3.17051C12.8499 3.16602 13 3.31214 13 3.49624C13 5.02281 13 10.0374 13 11.564C13 11.7481 12.8499 11.8932 12.6659 11.8992C9.864 11.9908 8.7334 13.233 8 14.1665M8 5.10589V14.1665"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinejoin="round"
/>
<path
d="M12.8232 4.5H14.333C14.5171 4.5 14.6663 4.64924 14.6663 4.83333V13.526C14.6663 13.7957 14.3485 13.9749 14.102 13.8654C13.5719 13.6299 12.6873 13.3421 11.5291 13.3421C9.56827 13.3421 7.99967 14.5 7.99967 14.5C7.99967 14.5 6.43105 13.3421 4.47026 13.3421C3.31197 13.3421 2.42738 13.6299 1.89732 13.8654C1.65079 13.9749 1.33301 13.7957 1.33301 13.526V4.83333C1.33301 4.64924 1.48225 4.5 1.66634 4.5H3.17615"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinejoin="round"
/>
</svg>
@ -208,7 +208,7 @@ export function HelpIcon() {
<g clipPath="url(#clip0_764_1941)">
<path
d="M6 12.5C2.6862 12.5 0 9.8138 0 6.5C0 3.1862 2.6862 0.5 6 0.5C9.3138 0.5 12 3.1862 12 6.5C12 9.8138 9.3138 12.5 6 12.5ZM3.552 4.8404V4.9016C3.552 4.98117 3.58361 5.05747 3.63987 5.11373C3.69613 5.16999 3.77244 5.2016 3.852 5.2016H4.4502C4.48952 5.2016 4.52845 5.19386 4.56478 5.17881C4.6011 5.16376 4.63411 5.14171 4.66191 5.11391C4.68971 5.08611 4.71176 5.0531 4.72681 5.01678C4.74186 4.98045 4.7496 4.94152 4.7496 4.9022C4.7496 4.1282 5.3484 3.7148 6.1536 3.7148C6.9384 3.7148 7.4544 4.1282 7.4544 4.7168C7.4544 5.2736 7.1652 5.5322 6.4428 5.8628L6.2364 5.9552C5.6274 6.224 5.4 6.626 5.4 7.3286V7.4C5.4 7.47957 5.43161 7.55587 5.48787 7.61213C5.54413 7.66839 5.62044 7.7 5.7 7.7H6.2982C6.33752 7.7 6.37645 7.69226 6.41278 7.67721C6.4491 7.66216 6.48211 7.64011 6.50991 7.61231C6.53771 7.58451 6.55976 7.5515 6.57481 7.51518C6.58986 7.47885 6.5976 7.43992 6.5976 7.4006C6.5976 7.091 6.6804 6.9668 6.9276 6.8534L7.1346 6.7604C8.0016 6.368 8.652 5.852 8.652 4.7264V4.6646C8.652 3.4778 7.62 2.6 6.1536 2.6C4.6668 2.6 3.552 3.4568 3.552 4.8404ZM5.1 9.4946C5.1 10.0148 5.4954 10.4 5.9946 10.4C6.5046 10.4 6.9 10.0148 6.9 9.4946C6.9 8.9744 6.5046 8.6 5.9946 8.6C5.4954 8.6 5.1 8.9744 5.1 9.4946Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</g>
<defs>
@ -236,17 +236,17 @@ export function LogoutIcon() {
>
<path
d="M4 3.5C4.00605 2.41248 4.05428 1.82353 4.43847 1.43934C4.87781 1 5.58489 1 6.99914 1H7.49914C8.91334 1 9.62044 1 10.0598 1.43934C10.4991 1.87868 10.4991 2.58578 10.4991 4V8C10.4991 9.4142 10.4991 10.1213 10.0598 10.5606C9.62044 11 8.91334 11 7.49914 11H6.99914C5.58489 11 4.87781 11 4.43847 10.5606C4.05428 10.1764 4.00605 9.5875 4 8.5"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
opacity="0.5"
d="M4 9.75C2.82149 9.75 2.23223 9.75 1.86611 9.3839C1.5 9.01775 1.5 8.4285 1.5 7.25V4.75C1.5 3.57149 1.5 2.98224 1.86611 2.61612C2.23223 2.25 2.82149 2.25 4 2.25"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
/>
<path
d="M7.5 6H3M3 6L4 7M3 6L4 5"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>

301
app/src/components/icons/ExportCommonIcons.tsx
View File

@ -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(--text-color)" />
<path d="M4 5L6.5 7.51615L9 5L4 5Z" fill="var(--icon-default-color-active)" />
</svg>
);
}
@ -40,14 +40,14 @@ export function FocusIcon() {
>
<path
d="M7.31999 1.56H9.89999C10.0325 1.56 10.14 1.66745 10.14 1.8V4.14M10.14 7.5V9.9C10.14 10.0325 10.0325 10.14 9.89999 10.14H7.31999M4.55999 10.14H1.91999C1.78744 10.14 1.67999 10.0325 1.67999 9.9V7.5M1.67999 4.14V1.8C1.67999 1.66745 1.78744 1.56 1.91999 1.56H4.55999"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<circle
cx="6"
cy="5.87999"
r="0.95"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.5"
/>
</svg>
@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
>
<path
d="M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C7.9737 5 8.2643 5 8.5 5.0144M3.5 5.0144C3.20584 5.03235 2.99715 5.07275 2.81902 5.1635C2.53677 5.3073 2.3073 5.53675 2.16349 5.819C2 6.1399 2 6.5599 2 7.4V8.1C2 8.9401 2 9.3601 2.16349 9.681C2.3073 9.96325 2.53677 10.1927 2.81902 10.3365C3.13988 10.5 3.55992 10.5 4.4 10.5H7.6C8.4401 10.5 8.8601 10.5 9.181 10.3365C9.46325 10.1927 9.6927 9.96325 9.8365 9.681C10 9.3601 10 8.9401 10 8.1V7.4C10 6.5599 10 6.1399 9.8365 5.819C9.6927 5.53675 9.46325 5.3073 9.181 5.1635C9.00285 5.07275 8.79415 5.03235 8.5 5.0144M3.5 5.0144V4C3.5 2.61929 4.61929 1.5 6 1.5C7.3807 1.5 8.5 2.61929 8.5 4V5.0144"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) {
>
<path
d="M8.292 3C7.9062 2.11705 7.02515 1.5 6 1.5C4.61929 1.5 3.5 2.61929 3.5 4V5.0144M3.5 5.0144C3.73571 5 4.0263 5 4.4 5H7.6C8.4401 5 8.8601 5 9.181 5.1635C9.46325 5.3073 9.6927 5.53675 9.8365 5.819C10 6.1399 10 6.5599 10 7.4V8.1C10 8.9401 10 9.3601 9.8365 9.681C9.6927 9.96325 9.46325 10.1927 9.181 10.3365C8.8601 10.5 8.4401 10.5 7.6 10.5H4.4C3.55992 10.5 3.13988 10.5 2.81902 10.3365C2.53677 10.1927 2.3073 9.96325 2.16349 9.681C2 9.3601 2 8.9401 2 8.1V7.4C2 6.5599 2 6.1399 2.16349 5.819C2.3073 5.53675 2.53677 5.3073 2.81902 5.1635C2.99715 5.07275 3.20584 5.03235 3.5 5.0144Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
<g clipPath="url(#clip0_889_1582)">
<path
d="M1.52462 4.65539C1.50864 4.60647 1.5 4.55424 1.5 4.5C1.5 4.22386 1.72386 4 2 4C2.22985 4 2.42348 4.1551 2.48194 4.36634C3.52484 7.8593 8.4728 7.8601 9.5174 4.36868C9.5751 4.15624 9.7693 4 10 4C10.2761 4 10.5 4.22386 10.5 4.5C10.5 4.5534 10.4916 4.60485 10.4761 4.6531C10.2758 5.3241 9.96205 5.8938 9.56935 6.3622L10.2072 7C10.4024 7.19525 10.4024 7.51185 10.2072 7.7071C10.0119 7.90235 9.6953 7.90235 9.50005 7.7071L8.84435 7.0514C8.48725 7.3213 8.0956 7.53275 7.6843 7.6858L7.8632 8.35355C7.9347 8.6203 7.7764 8.89445 7.50965 8.9659C7.2429 9.0374 6.96875 8.8791 6.8973 8.61235L6.71555 7.9341C6.2418 8.0042 5.7582 8.0042 5.28445 7.9341L5.1027 8.61235C5.03125 8.8791 4.75708 9.0374 4.49035 8.9659C4.22361 8.89445 4.06533 8.6203 4.1368 8.35355L4.31572 7.6858C3.90446 7.53275 3.5128 7.3213 3.15573 7.05145L2.50009 7.7071C2.30482 7.90235 1.98824 7.90235 1.79298 7.7071C1.59771 7.51185 1.59771 7.19525 1.79298 7L2.43074 6.36225C2.03845 5.89435 1.72505 5.3254 1.52462 4.65539Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</g>
<defs>
@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) {
>
<path
d="M7.50035 6C7.50035 6.82845 6.8288 7.5 6.00035 7.5C5.17195 7.5 4.50036 6.82845 4.50036 6C4.50036 5.17155 5.17195 4.5 6.00035 4.5C6.8288 4.5 7.50035 5.17155 7.50035 6Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.0006 2.5C3.76177 2.5 1.86663 3.97144 1.22949 6C1.86662 8.02855 3.76177 9.5 6.0006 9.5C8.2394 9.5 10.1345 8.02855 10.7717 6C10.1345 3.97146 8.2394 2.5 6.0006 2.5Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -142,9 +142,9 @@ export function KebebIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="6" cy="3" r="1" fill="var(--text-color)" />
<circle cx="6" cy="6" r="1" fill="var(--text-color)" />
<circle cx="6" cy="9" r="1" fill="var(--text-color)" />
<circle cx="6" cy="3" r="1" fill="var(--icon-default-color)" />
<circle cx="6" cy="6" r="1" fill="var(--icon-default-color)" />
<circle cx="6" cy="9" r="1" fill="var(--icon-default-color)" />
</svg>
);
}
@ -160,7 +160,7 @@ export function AddIcon() {
>
<path
d="M6 2L6 10M2 6H10"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.705882"
strokeLinecap="round"
/>
@ -179,12 +179,12 @@ export function CloseIcon() {
>
<path
d="M3.87868 8.62132L8.12132 4.37868"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M3.87866 4.37868L8.1213 8.62132"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
</svg>
@ -203,11 +203,11 @@ export function SettingsIcon() {
<g clipPath="url(#clip0_111_481)">
<path
d="M6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
/>
<path
d="M6.8827 1.07612C6.6989 1 6.46595 1 6 1C5.53405 1 5.3011 1 5.1173 1.07612C4.87228 1.17761 4.67761 1.37229 4.57611 1.61731C4.52978 1.72917 4.51165 1.85925 4.50455 2.04899C4.49413 2.32784 4.35113 2.58594 4.10947 2.72546C3.86782 2.86498 3.57279 2.85977 3.32609 2.72938C3.15822 2.64065 3.0365 2.59131 2.91647 2.57551C2.65352 2.54089 2.38759 2.61214 2.17718 2.7736C2.01937 2.89469 1.90288 3.09645 1.66991 3.49996C1.43694 3.90348 1.32046 4.10524 1.29449 4.30245C1.25988 4.5654 1.33113 4.83133 1.49259 5.04175C1.56628 5.1378 1.66985 5.2185 1.83059 5.3195C2.0669 5.468 2.21894 5.72095 2.21893 6C2.21891 6.27905 2.06687 6.53195 1.83059 6.6804C1.66982 6.78145 1.56624 6.8622 1.49254 6.95825C1.33108 7.16865 1.25983 7.43455 1.29445 7.6975C1.32041 7.8947 1.43689 8.0965 1.66986 8.5C1.90284 8.9035 2.01932 9.1053 2.17713 9.22635C2.38754 9.3878 2.65347 9.45905 2.91642 9.42445C3.03644 9.40865 3.15816 9.3593 3.32602 9.2706C3.57273 9.1402 3.86778 9.135 4.10945 9.2745C4.35112 9.41405 4.49413 9.67215 4.50455 9.95105C4.51165 10.1407 4.52978 10.2708 4.57611 10.3827C4.67761 10.6277 4.87228 10.8224 5.1173 10.9239C5.3011 11 5.53405 11 6 11C6.46595 11 6.6989 11 6.8827 10.9239C7.1277 10.8224 7.3224 10.6277 7.42385 10.3827C7.4702 10.2708 7.48835 10.1407 7.49545 9.951C7.50585 9.67215 7.64885 9.41405 7.8905 9.2745C8.13215 9.13495 8.4272 9.1402 8.67395 9.2706C8.8418 9.3593 8.9635 9.4086 9.0835 9.4244C9.34645 9.45905 9.6124 9.3878 9.8228 9.22635C9.9806 9.10525 10.0971 8.9035 10.33 8.49995C10.563 8.09645 10.6795 7.8947 10.7055 7.6975C10.7401 7.43455 10.6688 7.1686 10.5074 6.9582C10.4337 6.86215 10.3301 6.7814 10.1693 6.6804C9.9331 6.53195 9.78105 6.279 9.78105 5.99995C9.78105 5.7209 9.9331 5.46805 10.1693 5.3196C10.3301 5.21855 10.4337 5.13785 10.5074 5.04175C10.6689 4.83136 10.7401 4.56543 10.7055 4.30248C10.6796 4.10527 10.5631 3.90351 10.3301 3.5C10.0971 3.09648 9.98065 2.89472 9.82285 2.77363C9.61245 2.61218 9.3465 2.54092 9.08355 2.57554C8.96355 2.59134 8.84185 2.64068 8.67395 2.7294C8.42725 2.85979 8.1322 2.86501 7.89055 2.72548C7.64885 2.58595 7.50585 2.32783 7.49545 2.04897C7.48835 1.85924 7.4702 1.72916 7.42385 1.61731C7.3224 1.37229 7.1277 1.17761 6.8827 1.07612Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
/>
</g>
<defs>
@ -231,7 +231,7 @@ export function HelpIcon() {
<g clipPath="url(#clip0_111_484)">
<path
d="M6 12C2.6862 12 0 9.3138 0 6C0 2.6862 2.6862 0 6 0C9.3138 0 12 2.6862 12 6C12 9.3138 9.3138 12 6 12ZM3.552 4.3404V4.4016C3.552 4.48117 3.58361 4.55747 3.63987 4.61373C3.69613 4.66999 3.77244 4.7016 3.852 4.7016H4.4502C4.48952 4.7016 4.52845 4.69386 4.56478 4.67881C4.6011 4.66376 4.63411 4.64171 4.66191 4.61391C4.68971 4.58611 4.71176 4.5531 4.72681 4.51678C4.74186 4.48045 4.7496 4.44152 4.7496 4.4022C4.7496 3.6282 5.3484 3.2148 6.1536 3.2148C6.9384 3.2148 7.4544 3.6282 7.4544 4.2168C7.4544 4.7736 7.1652 5.0322 6.4428 5.3628L6.2364 5.4552C5.6274 5.724 5.4 6.126 5.4 6.8286V6.9C5.4 6.97957 5.43161 7.05587 5.48787 7.11213C5.54413 7.16839 5.62044 7.2 5.7 7.2H6.2982C6.33752 7.2 6.37645 7.19226 6.41278 7.17721C6.4491 7.16216 6.48211 7.14011 6.50991 7.11231C6.53771 7.08451 6.55976 7.0515 6.57481 7.01518C6.58986 6.97885 6.5976 6.93992 6.5976 6.9006C6.5976 6.591 6.6804 6.4668 6.9276 6.3534L7.1346 6.2604C8.0016 5.868 8.652 5.352 8.652 4.2264V4.1646C8.652 2.9778 7.62 2.1 6.1536 2.1C4.6668 2.1 3.552 2.9568 3.552 4.3404ZM5.1 8.9946C5.1 9.5148 5.4954 9.9 5.9946 9.9C6.5046 9.9 6.9 9.5148 6.9 8.9946C6.9 8.4744 6.5046 8.1 5.9946 8.1C5.4954 8.1 5.1 8.4744 5.1 8.9946Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</g>
<defs>
@ -255,7 +255,7 @@ export function TrashIcon() {
<g clipPath="url(#clip0_111_486)">
<path
d="M4.70587 5.32353V9.02941M7.17646 5.32353V9.02941M9.64704 2.85294V10.2647C9.64704 10.947 9.094 11.5 8.41175 11.5H3.47057C2.78834 11.5 2.23528 10.947 2.23528 10.2647V2.85294M0.999985 2.85294H10.8823M7.7941 2.85294V2.23529C7.7941 1.55306 7.24106 1 6.55881 1H5.32351C4.64128 1 4.08822 1.55306 4.08822 2.23529V2.85294"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -280,32 +280,32 @@ export function FilterIcon() {
>
<path
d="M6.86655 10V3.33333"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M6.86655 16.6666V13.3333"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 5.83336V3.33336"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 16.6666V9.16664"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M6.86666 13.3333C7.78714 13.3333 8.53333 12.5871 8.53333 11.6667C8.53333 10.7462 7.78714 10 6.86666 10C5.94619 10 5.2 10.7462 5.2 11.6667C5.2 12.5871 5.94619 13.3333 6.86666 13.3333Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
<path
d="M13.0667 9.16669C13.9871 9.16669 14.7333 8.4205 14.7333 7.50003C14.7333 6.57955 13.9871 5.83336 13.0667 5.83336C12.1462 5.83336 11.4 6.57955 11.4 7.50003C11.4 8.4205 12.1462 9.16669 13.0667 9.16669Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
/>
</svg>
@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M6.5625 3.5L10.0625 7"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@ -334,7 +334,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M7.4375 4.37266L10.0625 1.74766C10.5437 1.26641 11.3312 1.26641 11.8125 1.74766C12.2937 2.22891 12.2937 3.01641 11.8125 3.49766L9.1875 6.12266"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@ -344,7 +344,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) {
<path
d="M7.30625 4.50391L2.49375 9.31641C2.23125 9.57891 2.14375 9.88516 2.14375 10.2352C1.925 10.3664 1.75 10.6289 1.75 10.9352C1.75 11.4164 2.14375 11.8102 2.625 11.8102C2.93125 11.8102 3.19375 11.6352 3.36875 11.4164C3.675 11.4164 4.025 11.2852 4.2875 11.0664L9.1 6.25391"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-color)"
isActive ? "var(--highlight-accent-color)" : "var(--icon-default-color)"
}
strokeWidth="0.875"
strokeMiterlimit="10"
@ -366,7 +366,7 @@ export function TickIcon() {
>
<path
d="M3 6.5L4.84616 8.5L9 4"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -387,7 +387,7 @@ export function UndoIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M3.76516 1.73483C3.91161 1.88128 3.91161 2.11872 3.76516 2.26516L2.90533 3.125H7.5C9.0878 3.125 10.375 4.41218 10.375 6C10.375 7.5878 9.0878 8.875 7.5 8.875H4C3.79289 8.875 3.625 8.7071 3.625 8.5C3.625 8.2929 3.79289 8.125 4 8.125H7.5C8.6736 8.125 9.625 7.1736 9.625 6C9.625 4.82639 8.6736 3.875 7.5 3.875H2.90533L3.76516 4.73483C3.91161 4.88128 3.91161 5.1187 3.76516 5.26515C3.61872 5.4116 3.38128 5.4116 3.23483 5.26515L1.73483 3.76516C1.58839 3.61872 1.58839 3.38128 1.73483 3.23483L3.23483 1.73483C3.38128 1.58839 3.61872 1.58839 3.76516 1.73483Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</svg>
);
@ -406,7 +406,7 @@ export function RedoIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M8.23484 1.73483C8.08839 1.88128 8.08839 2.11872 8.23484 2.26516L9.09467 3.125H4.5C2.9122 3.125 1.625 4.41218 1.625 6C1.625 7.5878 2.9122 8.875 4.5 8.875H8C8.20711 8.875 8.375 8.7071 8.375 8.5C8.375 8.2929 8.20711 8.125 8 8.125H4.5C3.3264 8.125 2.375 7.1736 2.375 6C2.375 4.82639 3.3264 3.875 4.5 3.875H9.09467L8.23484 4.73483C8.08839 4.88128 8.08839 5.1187 8.23484 5.26515C8.38128 5.4116 8.61872 5.4116 8.76517 5.26515L10.2652 3.76516C10.4116 3.61872 10.4116 3.38128 10.2652 3.23483L8.76517 1.73483C8.61872 1.58839 8.38128 1.58839 8.23484 1.73483Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</svg>
);
@ -442,7 +442,7 @@ export function RemoveIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
<path d="M3 6.5H9" stroke="var(--icon-default-color)" strokeLinecap="round" />
</svg>
);
}
@ -458,11 +458,11 @@ export function InfoIcon() {
>
<path
d="M5.46289 7.75441C5.46289 7.68342 5.47691 7.6131 5.50422 7.54758C5.53158 7.48201 5.57156 7.42254 5.62201 7.37257C5.67246 7.3226 5.73231 7.2831 5.79807 7.25636C5.86388 7.22963 5.93425 7.21619 6.00529 7.21681C6.11003 7.21873 6.21188 7.25142 6.29814 7.31089C6.38435 7.37036 6.45121 7.45398 6.49019 7.55118C6.52921 7.64843 6.53862 7.75499 6.5174 7.85757C6.49614 7.96014 6.44511 8.05417 6.37071 8.12795C6.29631 8.20168 6.20185 8.25184 6.09908 8.27219C5.99631 8.29254 5.8898 8.28212 5.79294 8.24224C5.69603 8.2024 5.61308 8.13486 5.55438 8.04808C5.49567 7.96134 5.46385 7.8592 5.46289 7.75441ZM5.63564 6.44401L5.56844 3.93842C5.56206 3.87819 5.56844 3.81729 5.58716 3.75968C5.60583 3.70207 5.63641 3.64902 5.67692 3.604C5.71743 3.55897 5.76697 3.52297 5.82227 3.49832C5.87761 3.47368 5.93751 3.46094 5.99804 3.46094C6.05862 3.46094 6.11852 3.47368 6.17387 3.49832C6.22916 3.52297 6.2787 3.55897 6.31921 3.604C6.35972 3.64902 6.3903 3.70207 6.40897 3.75968C6.42769 3.81729 6.43407 3.87819 6.42769 3.93842L6.36529 6.44401C6.36529 6.54073 6.32689 6.63356 6.25844 6.70196C6.19004 6.77036 6.09721 6.80881 6.00049 6.80881C5.90372 6.80881 5.81094 6.77036 5.74254 6.70196C5.67414 6.63356 5.63564 6.54073 5.63564 6.44401Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<path
d="M6.00006 10.3175C8.45219 10.3175 10.4401 8.32963 10.4401 5.8775C10.4401 3.42536 8.45219 1.4375 6.00006 1.4375C3.54792 1.4375 1.56006 3.42536 1.56006 5.8775C1.56006 8.32963 3.54792 10.3175 6.00006 10.3175Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeWidth="0.72"
strokeLinecap="round"
strokeLinejoin="round"
@ -484,15 +484,15 @@ export function AI_Icon() {
fillRule="evenodd"
clipRule="evenodd"
d="M7.90908 14.9119C7.70892 12.2881 5.62382 10.203 3 10.0028C5.62382 9.80267 7.70892 7.71753 7.90908 5.09375C8.10925 7.71753 10.1944 9.80267 12.8182 10.0028C10.1944 10.203 8.10925 12.2881 7.90908 14.9119Z"
fill="var(--primary-color)"
fill="var(--icon-default-color-active)"
/>
<path
d="M14.0454 18.5888C13.9383 17.809 13.4611 16.3226 11.5908 16.1342C13.4611 15.9458 13.9383 14.4595 14.0454 13.6797C14.2337 15.5499 15.7201 16.0272 16.4999 16.1342C15.7201 16.2412 14.2337 16.7185 14.0454 18.5888Z"
fill="var(--primary-color)"
fill="var(--icon-default-color-active)"
/>
<path
d="M14.0454 1.40625C14.2337 3.27654 15.7201 3.7538 16.4999 3.86079C15.7201 3.9678 14.2337 4.44505 14.0454 6.31533C13.9383 5.53553 13.4611 4.04915 11.5908 3.86079C13.4611 3.67243 13.9383 2.18606 14.0454 1.40625Z"
fill="var(--primary-color)"
fill="var(--icon-default-color-active)"
/>
</svg>
);
@ -512,21 +512,21 @@ export const KebabIcon = () => {
cy="1.35112"
rx="1.4993"
ry="1.27477"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<ellipse
cx="6.04868"
cy="1.35131"
rx="1.4993"
ry="1.27477"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
<ellipse
cx="10.5476"
cy="1.35131"
rx="1.4993"
ry="1.27477"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</svg>
);
@ -545,7 +545,7 @@ export const DublicateIcon = () => {
fillRule="evenodd"
clipRule="evenodd"
d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</svg>
);
@ -562,34 +562,243 @@ export const DeleteIcon = () => {
>
<path
d="M8.33301 10V13.3334"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 10V13.3334"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.33301 6.66406H15"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.66699 8.66406V13.9976C5.66699 15.1022 6.56245 15.9976 7.66705 15.9976H11.6672C12.7718 15.9976 13.6672 15.1022 13.6672 13.9976V8.66406"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.66699 5.33337C7.66699 4.59697 8.26396 4 9.00037 4H10.3337C11.0702 4 11.6671 4.59697 11.6671 5.33337V6.66675H7.66699V5.33337Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export const HourlySimulationIcon = () => {
return (
<svg
width="17"
height="16"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z"
fill="#2B3344"
/>
</svg>
);
};
export const DailyProductionIcon = () => {
return (
<svg
width="17"
height="16"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.4564 6.96778C13.3816 6.81906 13.2232 6.72864 13.0596 6.74287L12.5621 6.77922C12.0226 4.82899 10.2365 3.39063 8.11668 3.39063C5.57103 3.39059 3.5 5.46179 3.5 8.00724C3.5 10.5529 5.57103 12.6239 8.11664 12.6239C9.59017 12.6239 10.9876 11.911 11.8549 10.7172C11.988 10.5335 11.947 10.2772 11.7637 10.1437C11.5801 10.0105 11.3235 10.0519 11.1904 10.2347C10.477 11.2167 9.328 11.8032 8.11645 11.8032C6.02331 11.8032 4.32065 10.1003 4.32065 8.00737C4.32065 5.91438 6.02334 4.21163 8.11648 4.21163C9.80226 4.21163 11.2333 5.3171 11.7269 6.84049L11.4679 6.85944C11.3024 6.87139 11.1604 6.98234 11.1083 7.13969C11.0559 7.29735 11.104 7.47084 11.2294 7.57934L11.9746 8.22285C12.0471 8.33961 12.1753 8.41774 12.3224 8.41774C12.3301 8.41774 12.3373 8.41599 12.3449 8.41564C12.3474 8.41564 12.3493 8.4167 12.3516 8.4167C12.3614 8.4167 12.3714 8.41654 12.3816 8.41564C12.4901 8.40757 12.5909 8.35682 12.6622 8.27447L13.3998 7.42041C13.5087 7.2949 13.5308 7.11596 13.4564 6.96778Z"
fill="#2B3344"
/>
<path
d="M5.94531 9.43859V9.04L6.30878 8.71149C6.92314 8.16192 7.22165 7.84585 7.23024 7.51715C7.23024 7.28766 7.09188 7.1061 6.76706 7.1061C6.52494 7.1061 6.31281 7.2269 6.16567 7.33979L5.97956 6.86783C6.19166 6.70822 6.52036 6.57812 6.90122 6.57812C7.53737 6.57812 7.88783 6.95018 7.88783 7.46078C7.88783 7.9324 7.54615 8.30903 7.1393 8.67234L6.87962 8.88866V8.89708H7.9398V9.43823H5.94531V9.43859Z"
fill="#2B3344"
/>
<path
d="M9.51199 9.43788V8.76696H8.26587V8.33889L9.33028 6.625H10.1352V8.27375H10.4726V8.76696H10.1352V9.43788H9.51199ZM9.51199 8.27375V7.65077C9.51199 7.48187 9.52061 7.30909 9.53359 7.12718H9.51638C9.42525 7.30909 9.35168 7.47344 9.25671 7.65077L8.88026 8.26513V8.27375H9.51199Z"
fill="#2B3344"
/>
</svg>
);
};
export const MonthlyROI = () => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.78955 11.9997V4.84175H4.84219V4.21016C4.84221 3.97761 5.03071 3.7891 5.26325 3.7891H6.10535C6.33789 3.7891 6.52639 3.97761 6.52641 4.21012V4.84175H9.47381L9.47379 4.21012C9.47379 3.97756 9.66231 3.78906 9.89485 3.78906H10.737C10.9695 3.78906 11.158 3.97756 11.158 4.21012V4.84175H12.2107V11.9997H3.78955ZM4.42113 11.3681H11.5791V6.52599H4.42113V11.3681ZM4.84219 9.89443H6.10535V10.9471H4.84219V9.89443ZM6.52641 9.89443H7.78957V10.9471H6.52641V9.89443ZM8.21063 9.89443H9.47379V10.9471H8.21063V9.89443ZM9.89485 9.89443H11.158V10.9471H9.89485V9.89443ZM4.84219 8.42073H6.10535V9.47337H4.84219V8.42073ZM6.52641 8.42073H7.78957V9.47337H6.52641V8.42073ZM8.21063 8.42073H9.47379V9.47337H8.21063V8.42073ZM9.89485 8.42073H11.158V9.47337H9.89485V8.42073ZM6.52641 6.94707H7.78957V7.99971H6.52641V6.94707ZM8.21063 6.94707H9.47379V7.99971H8.21063V6.94707ZM9.89485 6.94707H11.158V7.99971H9.89485V6.94707ZM10.2106 4.21019C10.0362 4.21019 9.89485 4.35156 9.89485 4.52598V5.15756C9.89485 5.33198 10.0362 5.47335 10.2106 5.47335H10.4212C10.5956 5.47335 10.737 5.33198 10.737 5.15756V4.52598C10.737 4.35156 10.5956 4.21019 10.4212 4.21019H10.2106ZM5.57904 4.21016C5.40462 4.21016 5.26325 4.35156 5.26325 4.52598V5.15756C5.26325 5.33195 5.40462 5.47335 5.57904 5.47335H5.78956C5.96398 5.47335 6.10535 5.33195 6.10535 5.15756V4.52598C6.10535 4.35156 5.96398 4.21016 5.78956 4.21016H5.57904ZM6.73695 8.63125V9.26285H7.57905V8.63125H6.73695ZM5.05271 8.63125V9.26285H5.89483V8.63125H5.05271ZM8.42117 8.63125V9.26285H9.26327V8.63125H8.42117ZM10.1054 8.63125V9.26283H10.9475V8.63125H10.1054Z"
fill="#2B3344"
/>
</svg>
);
};
export const ExpandIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 5.32324C16 5.09668 15.8018 4.89844 15.5752 4.89844H3.96387C3.7373 4.89844 3.53906 5.09668 3.53906 5.32324V6.17285C3.53906 6.39941 3.7373 6.59766 3.96387 6.59766H15.5752C15.8018 6.59766 16 6.39941 16 6.17285V5.32324Z"
fill="#2B3344"
/>
<path
d="M16 13.8232C16 13.5967 15.8018 13.3984 15.5752 13.3984H3.96387C3.7373 13.3984 3.53906 13.5967 3.53906 13.8232V14.6729C3.53906 14.8994 3.7373 15.0977 3.96387 15.0977H15.5752C15.8018 15.0977 16 14.8994 16 14.6729V13.8232Z"
fill="#2B3344"
/>
<path
d="M12.1768 10.8477C12.4033 10.8477 12.6016 10.6494 12.6016 10.4229V9.57324C12.6016 9.34668 12.4033 9.14844 12.1768 9.14844H7.3623C7.13574 9.14844 6.9375 9.34668 6.9375 9.57324V10.4229C6.9375 10.6494 7.13574 10.8477 7.3623 10.8477H12.1768Z"
fill="#2B3344"
/>
</svg>
);
};
export const StartIcon = () => {
return (
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.8542 7.58594V10.5918"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.05078 3.97656H12.6578"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export const EndIcon = () => {
return (
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.8542 7.58594V10.5918"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.854 15.9971C7.95036 15.9971 5.59375 13.6405 5.59375 10.7369C5.59375 7.83317 7.95036 5.47656 10.854 5.47656C13.7577 5.47656 16.1143 7.83317 16.1143 10.7369"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.05078 3.97656H12.6578"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.5977 13.898V13.2007C12.5977 12.341 13.2109 11.9863 13.9563 12.4191L14.5575 12.7678L15.1587 13.1165C15.9041 13.5494 15.9041 14.2527 15.1587 14.6856L14.5575 15.0343L13.9563 15.3829C13.2109 15.8158 12.5977 15.4611 12.5977 14.6014V13.898Z"
stroke="#6F42C1"
strokeWidth="0.901765"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
export const SpeedIcon = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z"
fill="#2B3344"
/>
</svg>
);
};
// export const DublicateIcon = () => {
// return (
// <svg
// width="20"
// height="20"
// viewBox="0 0 20 20"
// fill="none"
// xmlns="http://www.w3.org/2000/svg"
// >
// <path
// fillRule="evenodd"
// clipRule="evenodd"
// d="M14.3125 11.375C14.3125 11.7545 14.0045 12.0625 13.625 12.0625H8.125C7.7455 12.0625 7.4375 11.7545 7.4375 11.375V5.875C7.4375 5.4955 7.7455 5.1875 8.125 5.1875H13.625C14.0045 5.1875 14.3125 5.4955 14.3125 5.875V11.375ZM13.625 4.5H8.125C7.36566 4.5 6.75 5.11566 6.75 5.875V11.375C6.75 12.1343 7.36566 12.75 8.125 12.75H13.625C14.3843 12.75 15 12.1343 15 11.375V5.875C15 5.11566 14.3843 4.5 13.625 4.5ZM11.5625 14.125C11.5625 14.5045 11.2545 14.8125 10.875 14.8125H5.375C4.9955 14.8125 4.6875 14.5045 4.6875 14.125V8.625C4.6875 8.2455 4.9955 7.9375 5.375 7.9375H6.0625V7.25H5.375C4.61566 7.25 4 7.86566 4 8.625V14.125C4 14.8843 4.61566 15.5 5.375 15.5H10.875C11.6343 15.5 12.25 14.8843 12.25 14.125V13.4375H11.5625V14.125Z"
// fill="var(--text-color)"
// />
// </svg>
// );
// };

40
app/src/components/icons/ExportModuleIcons.tsx
View File

@ -10,8 +10,8 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M12.25 6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25ZM13.375 4.5C13.375 4.08579 13.7108 3.75 14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5ZM3.5 15.75C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5ZM14.125 15.75C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125ZM8.5 11.375C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5ZM5.875 8.125C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125H5.875Z"
stroke={isActive ? "none" : "var(--text-color)"}
fill={isActive ? "var(--primary-color)" : "none"}
stroke={isActive ? "none" : "var(--icon-default-color-active)"}
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
</svg>
@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M12.3077 11.3433C12.3077 11.874 12.1503 12.3927 11.8555 12.834C11.5607 13.2752 11.1416 13.6191 10.6513 13.8222C10.1611 14.0253 9.62157 14.0784 9.10109 13.9749C8.58061 13.8713 8.10252 13.6158 7.72728 13.2406C7.35204 12.8653 7.09649 12.3872 6.99296 11.8667C6.88943 11.3463 6.94257 10.8068 7.14565 10.3165C7.34873 9.82622 7.69263 9.40717 8.13387 9.11235C8.57511 8.81752 9.09387 8.66016 9.62454 8.66016C10.3362 8.66016 11.0186 8.94284 11.5218 9.44603C12.025 9.94921 12.3077 10.6317 12.3077 11.3433Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--primary-color)" : "none"}
stroke="var(--icon-default-color-active)"
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
<path
d="M9.62477 5.30814C10.3657 5.30814 10.9663 4.70749 10.9663 3.96657C10.9663 3.22564 10.3657 2.625 9.62477 2.625C8.88384 2.625 8.2832 3.22564 8.2832 3.96657C8.2832 4.70749 8.88384 5.30814 9.62477 5.30814Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--primary-color)" : "none"}
stroke="var(--icon-default-color-active)"
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
<path
d="M3.59157 17.3745C4.33249 17.3745 4.93314 16.7739 4.93314 16.033C4.93314 15.292 4.33249 14.6914 3.59157 14.6914C2.85064 14.6914 2.25 15.292 2.25 16.033C2.25 16.7739 2.85064 17.3745 3.59157 17.3745Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--primary-color)" : "none"}
stroke="var(--icon-default-color-active)"
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
<path
d="M15.658 17.3745C16.3989 17.3745 16.9995 16.7739 16.9995 16.033C16.9995 15.292 16.3989 14.6914 15.658 14.6914C14.917 14.6914 14.3164 15.292 14.3164 16.033C14.3164 16.7739 14.917 17.3745 15.658 17.3745Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
fill={isActive ? "var(--primary-color)" : "none"}
stroke="var(--icon-default-color-active)"
fill={isActive ? "var(--icon-default-color-active)" : "none"}
strokeWidth="1"
/>
<path
d="M7.50308 12.9844L4.65137 15.211"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeWidth="1"
/>
<path
d="M14.5978 15.211L11.7461 12.9844"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeWidth="1"
/>
<path
d="M9.625 8.659V5.30859"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeWidth="1"
/>
</svg>
@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M10 3.33203V16.6654"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.1665 7.5V16.6667"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.8335 7.5V16.6667"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) {
>
<path
d="M1.33337 2L1.50998 2.05887C2.39001 2.35221 2.83002 2.49888 3.08169 2.84807C3.33337 3.19725 3.33337 3.66106 3.33337 4.58869V6.33333C3.33337 8.21893 3.33337 9.16173 3.91916 9.74753C4.50495 10.3333 5.44775 10.3333 7.33337 10.3333H8.66671M12.6667 10.3333H11.3334"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
/>
<path
d="M5.00005 12C5.55233 12 6.00005 12.4477 6.00005 13C6.00005 13.5523 5.55233 14 5.00005 14C4.44776 14 4.00005 13.5523 4.00005 13C4.00005 12.4477 4.44776 12 5.00005 12Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
/>
<path
d="M11 12C11.5523 12 12 12.4477 12 13C12 13.5523 11.5523 14 11 14C10.4478 14 10 13.5523 10 13C10 12.4477 10.4478 12 11 12Z"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
/>
<path
d="M3.33337 4H5.33337M3.66671 8.66667H10.6812C11.3208 8.66667 11.6406 8.66667 11.8911 8.50153C12.1416 8.33633 12.2676 8.0424 12.5195 7.45453L12.8052 6.78787C13.3449 5.52863 13.6148 4.89902 13.3184 4.44951C13.0219 4 12.337 4 10.967 4H8.00004"
stroke={isActive ? "var(--primary-color)" : "var(--text-color)"}
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
/>
</svg>

84
app/src/components/icons/ExportToolsIcons.tsx
View File

@ -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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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(--text-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"
/>
@ -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"
@ -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
@ -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"
/>
@ -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"
@ -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>
) : (
@ -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"
/>
@ -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>
) : (
@ -585,7 +585,7 @@ 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(--text-color)"}
fill={isActive ? "var(--highlight-accent-color)" : "none"}
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(--text-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(--text-color)"
isActive ? "var(--icon-default-color-active)" : "var(--text-color)"
}
/>
<path
d="M12.5 5H7.5"
stroke={
isActive ? "var(--highlight-accent-color)" : "var(--text-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(--text-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(--text-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(--text-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(--text-color)"}
fill={isActive ? "var(--icon-default-color-active)" : "var(--text-color)"}
/>
</svg>
);

18
app/src/components/icons/HeaderIcons.tsx
View File

@ -65,15 +65,15 @@ export function AppDockIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse cx="3" cy="3" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="10" cy="3" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="17" cy="3" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="3" cy="10" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="10" cy="10" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="17" cy="10" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="3" cy="17" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="10" cy="17" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="17" cy="17" rx="2" ry="2" fill="var(--text-color)" />
<ellipse cx="3" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="10" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="17" cy="3" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="3" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="10" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="17" cy="10" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="3" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="10" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
<ellipse cx="17" cy="17" rx="2" ry="2" fill="var(--icon-default-color)" />
</svg>
);
}

68
app/src/components/icons/Logo.tsx
View File

@ -7,108 +7,108 @@ export function LogoIcon() {
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="16" cy="16" r="12" fill="var(--accent-color)" />
<circle cx="16" cy="16" r="12" fill="var(--icon-default-color)" />
<circle
cx="16.0522"
cy="16.054"
r="8.45217"
stroke="var(--background-color)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.313043"
/>
<path
d="M14.9362 15.3506L14.9146 15.2009C18.5863 14.6717 20.6134 12.573 21.3145 11.6953L21.4328 11.7897C20.7203 12.6813 18.6614 14.8137 14.9362 15.3506Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M14.9522 15.8332C15.2664 15.8332 15.5211 15.5785 15.5211 15.2643C15.5211 14.95 15.2664 14.6953 14.9522 14.6953C14.6379 14.6953 14.3832 14.95 14.3832 15.2643C14.3832 15.5785 14.6379 15.8332 14.9522 15.8332Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M21.3523 12.3332C21.6665 12.3332 21.9212 12.0785 21.9212 11.7643C21.9212 11.45 21.6665 11.1953 21.3523 11.1953C21.038 11.1953 20.7833 11.45 20.7833 11.7643C20.7833 12.0785 21.038 12.3332 21.3523 12.3332Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M12.7492 22.3039C12.0462 21.4187 10.9309 19.5722 11.358 17.1484L11.5069 17.1749C11.0901 19.5401 12.1804 21.3445 12.8674 22.2096L12.7492 22.3039Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M11.4319 17.759C11.7461 17.759 12.0008 17.5043 12.0008 17.1901C12.0008 16.8758 11.7461 16.6211 11.4319 16.6211C11.1176 16.6211 10.8629 16.8758 10.8629 17.1901C10.8629 17.5043 11.1176 17.759 11.4319 17.759Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M12.7907 22.802C13.1049 22.802 13.3597 22.5473 13.3597 22.233C13.3597 21.9188 13.1049 21.6641 12.7907 21.6641C12.4765 21.6641 12.2217 21.9188 12.2217 22.233C12.2217 22.5473 12.4765 22.802 12.7907 22.802Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M21.7637 17.7187L21.6123 17.7145C21.6652 15.823 20.9421 14.0126 19.576 12.617C18.1535 11.1635 16.168 10.3387 14.1231 10.3506L14.1221 10.1993C16.2045 10.1912 18.2332 11.0285 19.6841 12.5111C21.0791 13.9363 21.8175 15.7859 21.7637 17.7187Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M21.6779 18.259C21.9921 18.259 22.2469 18.0043 22.2469 17.6901C22.2469 17.3758 21.9921 17.1211 21.6779 17.1211C21.3637 17.1211 21.1089 17.3758 21.1089 17.6901C21.1089 18.0043 21.3637 18.259 21.6779 18.259Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M14.1504 10.8567C14.4646 10.8567 14.7194 10.602 14.7194 10.2877C14.7194 9.97349 14.4646 9.71875 14.1504 9.71875C13.8362 9.71875 13.5814 9.97349 13.5814 10.2877C13.5814 10.602 13.8362 10.8567 14.1504 10.8567Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M17.0921 21.9098C12.5278 21.6847 9.43341 18.6962 8.05921 15.9744C7.04899 13.9733 6.89101 12.0235 7.64701 10.8856C8.13487 10.1512 8.85147 9.76527 9.94784 9.84153L9.79132 9.99806C8.74942 9.92522 8.22889 10.2831 7.77291 10.9693C7.04697 12.062 7.20838 13.9536 8.19419 15.9062C9.54902 18.59 12.6001 21.5366 17.0995 21.7585L17.0921 21.9098Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M10.6783 22.9379C8.56905 22.5921 7.13331 20.8917 7.03163 18.8823C6.93397 16.9494 8.12376 14.6516 11.0021 13.875L11.0414 14.0211C8.24462 14.7757 7.08812 17.0023 7.18295 18.8747C7.24576 20.1169 7.88473 21.5215 9.42609 22.2311C9.79584 22.4013 9.79131 22.364 10.2087 22.5205L10.6783 22.9379Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M10.9948 14.5286C11.3091 14.5286 11.5638 14.2738 11.5638 13.9596C11.5638 13.6454 11.3091 13.3906 10.9948 13.3906C10.6806 13.3906 10.4259 13.6454 10.4259 13.9596C10.4259 14.2738 10.6806 14.5286 10.9948 14.5286Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M20.5275 25.0396C20.4619 25.0396 20.3955 25.0366 20.3281 25.0303C19.0498 24.9115 17.8919 23.7306 17.2303 21.8712L17.3729 21.8203C18.0141 23.6229 19.124 24.7664 20.3421 24.8796C20.9978 24.942 21.5783 24.6777 21.8595 24.1942C22.1507 23.6941 22.141 23.2311 21.703 22.6036L21.8595 22.4471C22.3326 23.125 22.3121 23.7169 21.9903 24.2703C21.7082 24.7549 21.159 25.0396 20.5275 25.0396Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M17.0674 22.3957C17.3817 22.3957 17.6364 22.141 17.6364 21.8268C17.6364 21.5125 17.3817 21.2578 17.0674 21.2578C16.7532 21.2578 16.4985 21.5125 16.4985 21.8268C16.4985 22.141 16.7532 22.3957 17.0674 22.3957Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M18.6394 9.77763L18.4955 9.73042C18.8393 8.68792 19.4466 8.01625 20.1621 7.88813C20.6025 7.80864 21.0355 7.95895 21.2909 8.27915C21.5433 8.59551 21.7114 8.89502 21.5304 9.32094L21.3739 9.16442C21.5325 8.79116 21.3894 8.64514 21.1729 8.37357C20.9522 8.09696 20.5751 7.96803 20.1889 8.03723C19.5297 8.15506 18.9652 8.7896 18.6394 9.77763Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
<path
d="M18.5795 10.2981C18.8937 10.2981 19.1484 10.0434 19.1484 9.72912C19.1484 9.41489 18.8937 9.16016 18.5795 9.16016C18.2652 9.16016 18.0105 9.41489 18.0105 9.72912C18.0105 10.0434 18.2652 10.2981 18.5795 10.2981Z"
fill="var(--background-color)"
stroke="var(--background-color)"
fill="var(--icon-default-color-active)"
stroke="var(--icon-default-color-active)"
strokeWidth="0.2"
/>
</svg>

14
app/src/components/icons/RealTimeVisulationIcons.tsx
View File

@ -10,43 +10,43 @@ export function CleanPannel() {
<g clipPath="url(#clip0_1782_1158)">
<path
d="M12 0H0V12H12V0Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
fillOpacity="0.01"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 10H10V5.5H2V10Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinejoin="round"
/>
<path
d="M4 9.97439V8.47852"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 9.97461V8.47461"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 9.97439V8.47852"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 10H9"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>

30
app/src/components/icons/SimulationIcons.tsx
View File

@ -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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--primary-color)" : "var(--text-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(--text-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(--text-color)"
stroke="var(--text-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(--text-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(--text-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(--text-color)"
stroke="var(--icon-default-color-active)"
strokeLinecap="round"
strokeLinejoin="round"
/>

93
app/src/components/icons/analysis.tsx Normal file
View File

@ -0,0 +1,93 @@
export function ThroughputSummaryIcon() {
return (
<svg
width="26"
height="27"
viewBox="0 0 26 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="13.3457" cy="13.498" r="12.6543" fill="#FC9D2F" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z"
fill="white"
/>
</svg>
);
}
export function ProductionCapacityIcon() {
return (
<svg
width="26"
height="27"
viewBox="0 0 26 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="13.3457" cy="13.498" r="12.6543" fill="#FC9D2F" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z"
fill="white"
/>
</svg>
);
}
export function ROISummaryIcon() {
return (
<svg
width="25"
height="26"
viewBox="0 0 25 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.515625" width="25" height="25" rx="12.5" fill="#28B9F3" />
<path
d="M6.00015 7.51562V19.0974H19.0002"
stroke="white"
strokeLinecap="round"
/>
<path
d="M6.50037 15.0553L10.3102 11.847C10.6984 11.52 11.2701 11.5358 11.6397 11.8837L15.0095 15.0553L19.5004 11.2734"
stroke="white"
strokeLinecap="round"
/>
</svg>
);
}
export function PowerIcon() {
return (
<svg
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4107_3144)">
<path
d="M12.1277 1.76564L10.7174 9.17535L15.8265 9.19254L8.87213 19.2375L10.2824 11.0856L5.17369 11.0678L12.1277 1.76564ZM12.1287 0.515664C12.0949 0.515664 12.0612 0.516895 12.0281 0.519375C11.8075 0.537207 11.6612 0.610957 11.4878 0.72752C11.3901 0.792624 11.3021 0.871096 11.2262 0.960645C11.2034 0.987526 11.1819 1.01547 11.1618 1.04439L4.15775 10.3141C3.88119 10.6931 3.84056 11.1935 4.05306 11.6116C4.26525 12.0297 4.69431 12.2947 5.16463 12.2982L8.77275 12.3244L7.63838 19.0079C7.53056 19.5822 7.83681 20.1547 8.37588 20.3854C8.53254 20.4527 8.70128 20.4873 8.87179 20.4872C9.26461 20.4872 9.58742 20.3035 9.82963 19.9716L16.8424 9.92658C17.119 9.5475 17.1593 9.04656 16.9471 8.62906C16.7349 8.21094 16.3059 7.94592 15.8356 7.9425L12.2274 7.93625L13.3496 2.05969C13.3734 1.96348 13.3854 1.86473 13.3853 1.76562C13.3853 1.08938 12.8468 0.538125 12.1731 0.51625C12.1581 0.515625 12.1434 0.515625 12.1287 0.515625L12.1287 0.515664Z"
fill="#F3C64D"
/>
<path
d="M4.875 11.125L12.375 1.125L11.125 8.625H16.125L8.625 19.875L9.875 11.125H4.875Z"
fill="#F3C64D"
/>
</g>
<defs>
<clipPath id="clip0_4107_3144">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5 0.5)"
/>
</clipPath>
</defs>
</svg>
);
}

10
app/src/components/icons/marketPlaceIcons.tsx
View File

@ -29,13 +29,13 @@ export function DownloadIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M2.5 11.875C2.84518 11.875 3.125 12.1548 3.125 12.5C3.125 13.6962 3.12633 14.5304 3.21096 15.1599C3.29317 15.7714 3.44354 16.0952 3.67418 16.3258C3.90481 16.5565 4.22863 16.7068 4.8401 16.7891C5.46956 16.8737 6.30383 16.875 7.5 16.875H12.5C13.6962 16.875 14.5304 16.8737 15.1599 16.7891C15.7714 16.7068 16.0952 16.5565 16.3258 16.3258C16.5565 16.0952 16.7068 15.7714 16.7891 15.1599C16.8737 14.5304 16.875 13.6962 16.875 12.5C16.875 12.1548 17.1548 11.875 17.5 11.875C17.8452 11.875 18.125 12.1548 18.125 12.5V12.5458C18.125 13.6854 18.125 14.604 18.0279 15.3265C17.9271 16.0766 17.7113 16.7081 17.2097 17.2097C16.7081 17.7113 16.0766 17.9271 15.3265 18.0279C14.604 18.125 13.6854 18.125 12.5458 18.125H7.45428C6.31462 18.125 5.39602 18.125 4.67354 18.0279C3.92345 17.9271 3.29189 17.7113 2.79029 17.2097C2.28869 16.7081 2.07295 16.0766 1.9721 15.3265C1.87497 14.604 1.87498 13.6854 1.875 12.5458C1.875 12.5305 1.875 12.5152 1.875 12.5C1.875 12.1548 2.15483 11.875 2.5 11.875Z"
fill="var(--primary-color)"
fill="var(--icon-default-color-active)"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.0003 13.9583C10.1758 13.9583 10.3432 13.8846 10.4616 13.7551L13.7949 10.1093C14.0278 9.8545 14.0102 9.45917 13.7554 9.22625C13.5007 8.99333 13.1053 9.011 12.8724 9.26575L10.6253 11.7235V2.5C10.6253 2.15483 10.3455 1.875 10.0003 1.875C9.65516 1.875 9.37533 2.15483 9.37533 2.5V11.7235L7.12827 9.26575C6.89535 9.011 6.50002 8.99333 6.24527 9.22625C5.99052 9.45917 5.97281 9.8545 6.20573 10.1093L9.53908 13.7551C9.65749 13.8846 9.82483 13.9583 10.0003 13.9583Z"
fill="var(--primary-color)"
fill="var(--icon-default-color-active)"
/>
</svg>
);
@ -52,13 +52,13 @@ export function EyeIconBig() {
>
<path
d="M2.75 11.918C6.05 4.58464 15.95 4.58464 19.25 11.918"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 15.5859C10.6389 15.5859 10.2813 15.5148 9.94762 15.3766C9.61398 15.2384 9.31082 15.0358 9.05546 14.7805C8.80009 14.5251 8.59753 14.222 8.45933 13.8883C8.32113 13.5547 8.25 13.1971 8.25 12.8359C8.25 12.4748 8.32113 12.1172 8.45933 11.7836C8.59753 11.4499 8.80009 11.1468 9.05546 10.8914C9.31082 10.636 9.61398 10.4335 9.94762 10.2953C10.2813 10.1571 10.6389 10.0859 11 10.0859C11.7293 10.0859 12.4288 10.3757 12.9445 10.8914C13.4603 11.4071 13.75 12.1066 13.75 12.8359C13.75 13.5653 13.4603 14.2648 12.9445 14.7805C12.4288 15.2962 11.7293 15.5859 11 15.5859Z"
stroke="var(--text-color)"
stroke="var(--icon-default-color)"
strokeLinecap="round"
strokeLinejoin="round"
/>
@ -80,7 +80,7 @@ export function CommentsIcon() {
fillRule="evenodd"
clipRule="evenodd"
d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z"
fill="var(--text-color)"
fill="var(--icon-default-color)"
/>
</g>
<defs>

36
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@ -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>

10
app/src/components/layout/sidebarRight/Header.tsx
View File

@ -1,14 +1,14 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png";
import { useActiveUsers } from "../../../store/store";
import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor";
import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
const Header: React.FC = () => {
const { activeUsers } = useActiveUsers();
const userName = localStorage.getItem("userName") || "Anonymous";
const userName = localStorage.getItem("userName") ?? "Anonymous";
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
@ -23,14 +23,14 @@ const Header: React.FC = () => {
)}
<div className="header-container">
<div className="options-container">
<div
<button
className="share-button"
onClick={() => {
setUserManagement(true);
}}
>
Share
</div>
</button>
{/* <div className="app-docker-button">
<AppDockIcon />
</div> */}

3
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@ -49,6 +49,9 @@ const SideBarRight: React.FC = () => {
setSubModule("simulations");
}
}
if (activeModule !== "simulation") {
setSubModule("properties");
}
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
return (

2
app/src/components/layout/sidebarRight/analysis/Analysis.tsx
View File

@ -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>

3
app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
View File

@ -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

80
app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
View File

@ -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>
);
};

119
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@ -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,66 +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>
<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>
<InputToggle
inputKey="6"
label="Display Grid"
@ -301,7 +299,8 @@ const GlobalProperties: React.FC = () => {
max={5}
onChange={(value: number) => updateGridDistance(value)}
onPointerUp={updatedGrid}
/>
/> */}
</section>
</div>
);
};

84
app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
View File

@ -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;

24
app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import {
useSelectedAsset,
useSelectedEventData,
useSelectedEventSphere,
useSelectedProduct,
@ -11,6 +12,7 @@ import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
import MachineMechanics from "./mechanics/machineMechanics";
import StorageMechanics from "./mechanics/storageMechanics";
import { AddIcon } from "../../../../icons/ExportCommonIcons";
import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
const EventProperties: React.FC = () => {
const { selectedEventData } = useSelectedEventData();
@ -20,8 +22,10 @@ const EventProperties: React.FC = () => {
null
);
const [assetType, setAssetType] = useState<string | null>(null);
const { products } = useProductStore();
const { products, addEvent } = useProductStore();
const { selectedEventSphere } = useSelectedEventSphere();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
useEffect(() => {
const event = getCurrentEventData();
setCurrentEventData(event);
@ -77,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
@ -91,7 +95,19 @@ const EventProperties: React.FC = () => {
<ul>
{products.map((product) => (
<li key={product.productId}>
<button>
<button
onClick={() =>
handleAddEventToProduct({
selectedAsset,
addEvent,
selectedProduct: {
productId: product.productId,
productName: product.productName,
},
clearSelectedAsset,
})
}
>
<AddIcon />
{product.productName}
</button>
@ -102,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.

123
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
View File

@ -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>
</>
)}
</>

4
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
View File

@ -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>
)}
</>
);

67
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
View File

@ -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>
</>
)}
</>

4
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
View File

@ -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>
)}
</>
);

114
app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
View File

@ -75,18 +75,10 @@ function VehicleMechanics() {
const handlePickPointChange = (value: string) => {
if (!selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
updateAction(selectedPointData.action.actionUuid, {
pickUpPoint: { x, y, z },
});
};
const handleUnloadPointChange = (value: string) => {
if (!selectedPointData) return;
const [x, y, z] = value.split(",").map(Number);
updateAction(selectedPointData.action.actionUuid, {
unLoadPoint: { x, y, z },
});
};
// Get current values from store
@ -107,13 +99,9 @@ function VehicleMechanics() {
? selectedPointData.action.unLoadDuration.toString()
: "1";
const currentPickPoint = selectedPointData?.action.pickUpPoint
? `${selectedPointData.action.pickUpPoint.x},${selectedPointData.action.pickUpPoint.y},${selectedPointData.action.pickUpPoint.z}`
: "";
const currentPickPoint = selectedPointData?.action.pickUpPoint;
const currentUnloadPoint = selectedPointData?.action.unLoadPoint
? `${selectedPointData.action.unLoadPoint.x},${selectedPointData.action.unLoadPoint.y},${selectedPointData.action.unLoadPoint.z}`
: "";
const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
const availableActions = {
defaultOption: "travel",
@ -124,7 +112,7 @@ function VehicleMechanics() {
<>
{selectedEventData && (
<>
<div className="global-props">
<div className="global-props section">
<div className="property-list-container">
<div className="property-item">
<InputWithDropDown
@ -141,55 +129,57 @@ function VehicleMechanics() {
</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}
/>
{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,
// }}
<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>
<div className="tirgger">
<Trigger />
</div>
<div className="tirgger">
<Trigger />
</div>
</section>
</>
)}
</>

348
app/src/components/layout/sidebarRight/simulation/Simulations.tsx
View File

@ -1,204 +1,220 @@
import React, { useEffect, useRef } from "react";
import React, { useEffect, useRef, useState } from "react";
import {
AddIcon,
ArrowIcon,
RemoveIcon,
ResizeHeightIcon,
AddIcon,
ArrowIcon,
RemoveIcon,
ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../functions/handleResizePannel";
import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import {
useSelectedAsset,
useSelectedProduct,
} from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { generateUUID } from "three/src/math/MathUtils";
import RenderOverlay from "../../../templates/Overlay";
import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
interface Event {
pathName: string;
pathName: string;
}
interface ListProps {
val: Event;
val: Event;
}
const List: React.FC<ListProps> = ({ val }) => {
return (
<div className="process-container">
<div className="value">
{val.pathName}
</div>
</div>
);
return (
<div className="process-container">
<div className="value">{val.pathName}</div>
</div>
);
};
const Simulations: React.FC = () => {
const productsContainerRef = useRef<HTMLDivElement>(null);
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const productsContainerRef = useRef<HTMLDivElement>(null);
const {
products,
addProduct,
removeProduct,
renameProduct,
addEvent,
removeEvent,
} = useProductStore();
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const handleAddProduct = () => {
addProduct(`Product ${products.length + 1}`, generateUUID());
};
const [openObjects, setOpenObjects] = useState(true);
const handleRemoveProduct = (productId: string) => {
const currentIndex = products.findIndex(p => p.productId === productId);
const isSelected = selectedProduct.productId === productId;
const handleAddProduct = () => {
addProduct(`Product ${products.length + 1}`, generateUUID());
};
const updatedProducts = products.filter(p => p.productId !== productId);
const handleRemoveProduct = (productId: string) => {
const currentIndex = products.findIndex((p) => p.productId === productId);
const isSelected = selectedProduct.productId === productId;
if (isSelected) {
if (updatedProducts.length > 0) {
let newSelectedIndex = currentIndex;
if (currentIndex >= updatedProducts.length) {
newSelectedIndex = updatedProducts.length - 1;
}
setSelectedProduct(
updatedProducts[newSelectedIndex].productId,
updatedProducts[newSelectedIndex].productName
);
} else {
setSelectedProduct('', '');
}
const updatedProducts = products.filter((p) => p.productId !== productId);
if (isSelected) {
if (updatedProducts.length > 0) {
let newSelectedIndex = currentIndex;
if (currentIndex >= updatedProducts.length) {
newSelectedIndex = updatedProducts.length - 1;
}
setSelectedProduct(
updatedProducts[newSelectedIndex].productId,
updatedProducts[newSelectedIndex].productName
);
} else {
setSelectedProduct("", "");
}
}
removeProduct(productId);
};
removeProduct(productId);
};
const handleRenameProduct = (productId: string, newName: string) => {
renameProduct(productId, newName);
if (selectedProduct.productId === productId) {
setSelectedProduct(productId, newName);
}
};
const handleRenameProduct = (productId: string, newName: string) => {
renameProduct(productId, newName);
if (selectedProduct.productId === productId) {
setSelectedProduct(productId, newName);
}
};
const handleAddEventToProduct = () => {
if (selectedAsset) {
addEvent(selectedProduct.productId, selectedAsset);
// upsertProductOrEventApi({
// productName: selectedProduct.productName,
// productId: selectedProduct.productId,
// eventDatas: selectedAsset
// });
clearSelectedAsset();
}
};
const handleRemoveEventFromProduct = () => {
if (selectedAsset) {
removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
clearSelectedAsset();
}
};
const handleRemoveEventFromProduct = () => {
if (selectedAsset) {
removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
clearSelectedAsset();
}
};
const selectedProductData = products.find(
(product) => product.productId === selectedProduct.productId
);
const selectedProductData = products.find(
(product) => product.productId === selectedProduct.productId
);
const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
pathName: event.modelName,
const events: Event[] =
selectedProductData?.eventDatas.map((event) => ({
pathName: event.modelName,
})) || [];
return (
<div className="simulations-container">
<div className="header">Simulations</div>
<div className="add-product-container">
<div className="actions">
<div className="header">
<div className="header-value">Products</div>
<div className="add-button" onClick={handleAddProduct}>
<AddIcon /> Add
</div>
</div>
<div
className="lists-main-container"
ref={productsContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{products.map((product, index) => (
<div
key={product.productId}
className={`list-item ${selectedProduct.productId === product.productId ? "active" : ""}`}
>
<div
className="value"
onClick={() => setSelectedProduct(product.productId, product.productName)}
>
<input
type="radio"
name="products"
checked={selectedProduct.productId === product.productId}
readOnly
/>
<RenameInput
value={product.productName}
onRename={(newName) => handleRenameProduct(product.productId, newName)}
/>
</div>
{products.length > 1 && (
<div
className="remove-button"
onClick={() => handleRemoveProduct(product.productId)}
>
<RemoveIcon />
</div>
)}
</div>
))}
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, productsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
<div className="simulation-process">
<div className="collapse-header-container">
<div className="header">Events</div>
<div className="arrow-container">
<ArrowIcon />
</div>
</div>
{events.map((event, index) => (
<List key={index} val={event} />
))}
</div>
<div className="compare-simulations-container">
<div className="compare-simulations-header">
Need to Compare Layout?
</div>
<div className="content">
Click <span>'Compare'</span> to review and analyze the layout differences between them.
</div>
<div className="input">
<input type="button" value={"Compare"} className="submit" />
</div>
</div>
return (
<div className="simulations-container">
<div className="header">Simulations</div>
<div className="add-product-container">
<div className="actions section">
<div className="header">
<div className="header-value">Products</div>
<div className="add-button" onClick={handleAddProduct}>
<AddIcon /> Add
</div>
{selectedAsset &&
<RenderOverlay>
<EditWidgetOption
options={['Add to Product', 'Remove from Product']}
onClick={(option) => {
if (option === 'Add to Product') {
handleAddEventToProduct();
} else {
handleRemoveEventFromProduct();
}
}}
</div>
<div
className="lists-main-container"
ref={productsContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{products.map((product, index) => (
<div
key={product.productId}
className={`list-item ${
selectedProduct.productId === product.productId
? "active"
: ""
}`}
>
<div
className="value"
onClick={() =>
setSelectedProduct(product.productId, product.productName)
}
>
<input
type="radio"
name="products"
checked={selectedProduct.productId === product.productId}
readOnly
/>
</RenderOverlay>
}
<RenameInput
value={product.productName}
onRename={(newName) =>
handleRenameProduct(product.productId, newName)
}
/>
</div>
{products.length > 1 && (
<div
className="remove-button"
onClick={() => handleRemoveProduct(product.productId)}
>
<RemoveIcon />
</div>
)}
</div>
))}
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, productsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
);
<div className="simulation-process section">
<button
className="collapse-header-container"
onClick={() => setOpenObjects(!openObjects)}
>
<div className="header">Events</div>
<div className="arrow-container">
<ArrowIcon />
</div>
</button>
{openObjects &&
events.map((event, index) => <List key={index} val={event} />)}
</div>
<div className="compare-simulations-container">
<div className="compare-simulations-header">
Need to Compare Layout?
</div>
<div className="content">
Click <span>'Compare'</span> to review and analyze the layout
differences between them.
</div>
<div className="input">
<input type="button" value={"Compare"} className="submit" />
</div>
</div>
</div>
{selectedAsset && (
<RenderOverlay>
<EditWidgetOption
options={["Add to Product", "Remove from Product"]}
onClick={(option) => {
if (option === "Add to Product") {
handleAddEventToProduct({
selectedAsset,
addEvent,
selectedProduct,
clearSelectedAsset,
});
} else {
handleRemoveEventFromProduct();
}
}}
/>
</RenderOverlay>
)}
</div>
);
};
export default Simulations;

29
app/src/components/templates/FollowPerson.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
import RenderOverlay from "./Overlay";
import { useSelectedUserStore } from "../../store/useCollabStore";
import { useCamMode } from "../../store/store";
const FollowPerson: React.FC = () => {
// Get the selected user from the store
const { selectedUser, clearSelectedUser } = useSelectedUserStore();
const { setCamMode } = useCamMode();
return (
<RenderOverlay>
{selectedUser && (
// eslint-disable-next-line
<div
className="follow-person-container"
onClick={() => {
clearSelectedUser();
setCamMode("FirstPerson");
}}
style={{ "--user-color": selectedUser.color } as React.CSSProperties}
>
<div className="follower-name">{selectedUser.name}</div>
</div>
)}
</RenderOverlay>
);
};
export default FollowPerson;

46
app/src/components/ui/FileMenu.tsx
View File

@ -1,25 +1,53 @@
import React, { useState } from "react";
import React, { useState, useEffect, useRef } 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);
const containerRef = useRef<HTMLButtonElement>(null);
let clickTimeout: NodeJS.Timeout | null = null;
const handleClick = () => {
if (clickTimeout) return;
setOpenMenu((prev) => !prev);
clickTimeout = setTimeout(() => {
clickTimeout = null;
}, 800);
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
containerRef.current &&
!containerRef.current.contains(event.target as Node)
) {
setOpenMenu(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
return (
<div className="project-dropdowm-container">
<button
className="project-dropdowm-container"
ref={containerRef}
onClick={handleClick}
>
<div className="project-name">
<div className="icon">
<ProjectIcon />
</div>
<RenameInput value="untitled" />
</div>
<div
className="more-options-button"
onClick={() => {
setOpenMenu(!openMenu);
}}
>
<div className="more-options-button">
<ArrowIcon />
{openMenu && <MenuBar setOpenMenu={setOpenMenu} />}
</div>
</div>
</button>
);
};

68
app/src/components/ui/analysis/ProductionCapacity.tsx Normal file
View File

@ -0,0 +1,68 @@
import React, { useState } from "react";
import { ProductionCapacityIcon } from "../../icons/analysis";
const ProductionCapacity = ({
progressPercent = 10,
avgProcessTime = "28.4 Secs/unit",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => {
const totalBars = 6;
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent =
((progressPercent / 100) * totalBars - barsToFill) * 100;
return (
<div className="productionCapacity-container analysis-card">
<div className="productionCapacity-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Production Capacity</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ProductionCapacityIcon />
</div>
</div>
<div className="process-container">
<div className="throughput-value">
<span className="value">{throughputValue}</span> Units/hour
</div>
{/* Dynamic Progress Bar */}
<div className="progress-bar-wrapper">
{[...Array(totalBars)].map((_, i) => (
<div className="progress-bar" key={i}>
{i < barsToFill ? (
<div className="bar-fill full" />
) : i === barsToFill ? (
<div
className="bar-fill partial"
style={{ width: `${partialFillPercent}%` }}
/>
) : null}
</div>
))}
</div>
</div>
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">{avgProcessTime}</span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>
<span className="value">{machineUtilization}</span>
</div>
</div>
</div>
</div>
);
};
export default ProductionCapacity;

188
app/src/components/ui/analysis/ROISummary.tsx Normal file
View File

@ -0,0 +1,188 @@
import React, { useState } from "react";
import { ROISummaryIcon } from "../../icons/analysis";
import SemiCircleProgress from "./SemiCircleProgress";
const ROISummary = ({
roiSummaryData = {
productName: "Product name",
roiPercentage: 133,
paybackPeriod: 50.3,
totalCost: "₹ 1,20,000",
revenueGenerated: "₹ 2,80,000",
netProfit: "₹ 1,60,000",
costBreakdown: [
{
item: "Raw Material A",
unitCost: "₹ 10/unit",
laborCost: "₹ 0",
totalCost: "₹ 1000",
sellingPrice: "₹ 1500",
},
{
item: "Labor",
unitCost: "₹ 10/unit",
laborCost: "₹ 500",
totalCost: "₹ 500",
sellingPrice: "N/A",
},
{
item: "Product 1",
unitCost: "₹ 10/unit",
laborCost: "₹ 200",
totalCost: "₹ 200",
sellingPrice: "₹ 2000",
},
{
item: "Machine",
unitCost: "-",
laborCost: "-",
totalCost: "₹ 20,000",
sellingPrice: "N/A",
},
{
item: "Total",
unitCost: "-",
laborCost: "-",
totalCost: "₹ 1,20,000",
sellingPrice: "-",
},
{
item: "Net Profit",
unitCost: "-",
laborCost: "-",
totalCost: "₹ 1,60,000",
sellingPrice: "-",
},
],
},
}) => {
const [isTableOpen, setIsTableOpen] = useState(false); // State to handle the table open/close
// Function to toggle the breakdown table visibility
const toggleTable = () => {
setIsTableOpen(!isTableOpen);
};
return (
<div className="roiSummary-container analysis-card">
<div className="roiSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">ROI Summary</div>
<div className="sub-header">From 24 November, 2025</div>
</div>
<div className="icon-wrapper">
<ROISummaryIcon />
</div>
</div>
<div className="product-info">
<div className="product-label">Product :</div>
<div className="product-name">{roiSummaryData.productName}</div>
</div>
<div className="playBack">
<div className="icon"></div>
<div className="info">
<span>+{roiSummaryData.roiPercentage}%</span> ROI with payback in
just <span>{roiSummaryData.paybackPeriod}</span> months
</div>
</div>
<div className="roi-details">
<div className="progress-wrapper">
<SemiCircleProgress />
<div className="content">
you're on track to hit it by
<div className="key">July 2029</div>
</div>
</div>
<div className="metrics">
<div className="metric-wrapper">
<div className="metric-item">
<span className="metric-label">Total Cost Incurred</span>
<span className="metric-value">{roiSummaryData.totalCost}</span>
</div>
<div className="metric-item">
<span className="metric-label">Revenue Generated</span>
<span className="metric-value">
{roiSummaryData.revenueGenerated}
</span>
</div>
</div>
<div className="metric-item net-profit">
<span className="metric-label">Net Profit</span>
<span className="metric-value">{roiSummaryData.netProfit}</span>
</div>
</div>
</div>
<div className="cost-breakdown">
<div className="breakdown-header" onClick={toggleTable}>
<div className="section-wrapper">
<span className="section-number">①</span>
<span className="section-title">Cost Breakdown</span>
</div>
<span className={`expand-icon ${isTableOpen ? "open" : ""}`}>
{isTableOpen ? "⌵" : "⌵"}
</span>
</div>
<div
className={`breakdown-table-wrapper ${
isTableOpen ? "open" : "closed"
}`}
style={{
transition: "max-height 0.3s ease-in-out",
overflow: "hidden",
}}
>
<table className="breakdown-table">
<thead>
<tr>
<th>Item</th>
<th>Unit Cost</th>
<th>Labor Cost</th>
<th>Total Cost</th>
<th>Selling Price</th>
</tr>
</thead>
<tbody>
{roiSummaryData.costBreakdown.map((row, index) => (
<tr
key={index}
className={
row.item === "Total"
? "total-row"
: row.item === "Net Profit"
? "net-profit-row"
: ""
}
>
<td>{row.item}</td>
<td>{row.unitCost}</td>
<td>{row.laborCost}</td>
<td>{row.totalCost}</td>
<td>{row.sellingPrice}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="tips-section">
<div className="tip-header">
<span className="lightbulb-icon">💡</span>
<span className="tip-title">How to improve ROI?</span>
</div>
<div className="tip-description">
Increase CNC utilization by <span className="highlight">10%</span>{" "}
to shave <span className="highlight">0.5</span> months of payback
period
</div>
<button className="get-tips-button">
<div className="btn">Get ROI Boost Tips</div>
</button>
</div>
</div>
</div>
);
};
export default ROISummary;

27
app/src/components/ui/analysis/SemiCircleProgress.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
const SemiCircleProgress = () => {
const progress = 50;
const clampedProgress = Math.min(Math.max(progress, 0), 100);
const gradientProgress = clampedProgress * 0.5;
return (
<div className="semi-circle-wrapper">
<div
className="semi-circle"
style={{
background: `conic-gradient(from 270deg, skyblue 0% ${gradientProgress}%, lightgray ${gradientProgress}% 100%)`,
}}
>
<div className="progress-cover"></div>
</div>
<div className="label-wrapper">
<div className="label">{clampedProgress}%</div>
<div className="label-content">Years</div>
</div>
<div className="content">you're on track to hit it by July 2029</div>
</div>
);
};
export default SemiCircleProgress;

177
app/src/components/ui/analysis/ThroughputSummary.tsx Normal file
View File

@ -0,0 +1,177 @@
import React from "react";
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
LineElement,
CategoryScale,
LinearScale,
PointElement,
} from "chart.js";
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
// Helper function to generate random colors
const getRandomColor = () => {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
const ThroughputSummary = () => {
// Define all data internally within the component
const timeRange = {
startTime: "08:00 AM",
endTime: "09:00 AM",
};
const throughputData = {
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
data: [100, 120, 110, 130, 125, 128, 132],
totalThroughput: 1240,
assetUsage: 85,
};
const energyConsumption = {
energyConsumed: 456,
unit: "KWH",
};
// Dynamic shift data
const shiftUtilization = [
{ shift: 1, percentage: 30 },
{ shift: 2, percentage: 40 },
{ shift: 3, percentage: 30 },
];
// Chart data configuration
const chartData = {
labels: throughputData.labels,
datasets: [
{
label: "Units/hour",
data: throughputData.data,
borderColor: "#B392F0",
tension: 0.4,
pointRadius: 0, // Hide points
},
],
};
const chartOptions = {
responsive: true,
scales: {
x: {
grid: {
display: false,
},
ticks: {
display: false,
color: "#fff",
},
},
y: {
grid: {
display: false,
},
ticks: {
display: false,
color: "#fff",
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: true,
},
},
};
return (
<div className="throughoutSummary analysis-card">
<div className="throughoutSummary-wrapper analysis-card-wrapper">
<div className="card-header">
<div className="header">
<div className="main-header">Throughput Summary</div>
<div className="sub-header">
{timeRange.startTime} - {timeRange.endTime}
</div>
</div>
<div className="icon-wrapper">
<ThroughputSummaryIcon />
</div>
</div>
<div className="process-container">
<div className="throughput-value">
<span className="value">{throughputData.totalThroughput}</span>{" "}
Units/hour
</div>
<div className="lineChart">
<div className="assetUsage">
<div className="key">Asset usage</div>
<div className="value">{throughputData.assetUsage}%</div>
</div>
<Line data={chartData} options={chartOptions} />
</div>
</div>
<div className="footer">
<div className="energyConsumption footer-card">
<div className="header">Energy Consumption</div>
<div className="value-container">
<div className="energy-icon">
<PowerIcon />
</div>
<div className="value-wrapper">
<div className="value">{energyConsumption.energyConsumed}</div>
<div className="unit">{energyConsumption.unit}</div>
</div>
</div>
</div>
<div className="shiftUtilization footer-card">
<div className="header">Shift Utilization</div>
<div className="value-container">
<div className="value">{throughputData.assetUsage}%</div>
<div className="progress-wrapper">
{/* Dynamically create progress bars based on shiftUtilization array */}
{shiftUtilization.map((shift) => (
<div
key={shift.shift}
className={`progress shift-${shift.shift}`}
style={{
width: `${shift.percentage}%`,
backgroundColor: getRandomColor(),
}}
></div>
))}
</div>
<div className="progress-indicator">
{/* Dynamically create shift indicators with random colors */}
{shiftUtilization.map((shift) => (
<div className="shift-wrapper" key={shift.shift}>
<span
className={`indicator shift-${shift.shift}`}
style={{ backgroundColor: getRandomColor() }} // Random color for indicator
></span>
<label>Shift {shift.shift}</label>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ThroughputSummary;

9
app/src/components/ui/inputs/InputToggle.tsx
View File

@ -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>

334
app/src/components/ui/simulation/simulationPlayer.tsx
View File

@ -7,6 +7,15 @@ import {
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
import {
DailyProductionIcon,
EndIcon,
ExpandIcon,
HourlySimulationIcon,
MonthlyROI,
SpeedIcon,
StartIcon,
} from "../../icons/ExportCommonIcons";
const SimulationPlayer: React.FC = () => {
const { speed, setSpeed } = useAnimationPlaySpeed();
@ -30,7 +39,7 @@ const SimulationPlayer: React.FC = () => {
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
setActiveTool("cursor")
setActiveTool("cursor");
};
// Slider functions starts
@ -72,70 +81,277 @@ const SimulationPlayer: React.FC = () => {
}, []);
// Slider function ends
// UI-Part
const hourlySimulation = 25;
const dailyProduction = 75;
const monthlyROI = 50;
const process = [
{ name: "process 1", completed: 0 }, // 0% completed
{ name: "process 2", completed: 20 }, // 20% completed
{ name: "process 3", completed: 40 }, // 40% completed
{ name: "process 4", completed: 60 }, // 60% completed
{ name: "process 5", completed: 80 }, // 80% completed
{ name: "process 6", completed: 100 }, // 100% completed
{ name: "process 7", completed: 0 }, // 0% completed
{ name: "process 8", completed: 50 }, // 50% completed
{ name: "process 9", completed: 90 }, // 90% completed
{ name: "process 10", completed: 30 }, // 30% completed
];
const [expand, setExpand] = useState(false);
// Move getRandomColor out of render
const getRandomColor = () => {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
// Store colors for each process item
const [processColors, setProcessColors] = useState<string[]>([]);
// Generate colors on mount or when process changes
useEffect(() => {
const generatedColors = process.map(() => getRandomColor());
setProcessColors(generatedColors);
}, []);
const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
const totalSegments = intervals.length;
const progress = 80; // percent (example)
const processPlayerRef = useRef<HTMLDivElement>(null);
const processWrapperRef = useRef<HTMLDivElement>(null);
const [playerPosition, setPlayerPosition] = useState(0);
const handleProcessMouseDown = (e: React.MouseEvent) => {
if (!processWrapperRef.current) return;
const rect = processWrapperRef.current.getBoundingClientRect();
let x = e.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
setPlayerPosition(x);
const onMouseMove = (e: MouseEvent) => {
if (!processWrapperRef.current) return;
const newRect = processWrapperRef.current.getBoundingClientRect();
let newX = e.clientX - newRect.left;
newX = Math.max(0, Math.min(newX, newRect.width));
setPlayerPosition(newX);
const progressPercent = (newX / newRect.width) * 100;
console.log(`Dragging at progress: ${progressPercent.toFixed(1)}%`);
};
const onMouseUp = () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
};
return (
<div className="simulation-player-wrapper">
<div className="simulation-player-container">
<div className={`simulation-player-container ${expand ? "open" : ""}`}>
<div className="controls-container">
<div
className="simulation-button-container"
onClick={() => {
handleReset();
}}
>
<ResetIcon />
Reset
</div>
<div
className="simulation-button-container"
onClick={() => {
handlePlayStop();
}}
>
<PlayStopIcon />
{playSimulation ? "Play" : "Stop"}
</div>
<div
className="simulation-button-container"
onClick={() => {
handleExit();
}}
>
<ExitIcon />
Exit
</div>
</div>
<div className="speed-control-container">
<div className="min-value">0.5x</div>
<div className="slider-container" ref={sliderRef}>
<div className="marker marker-10"></div>
<div className="marker marker-20"></div>
<div className="marker marker-30"></div>
<div className="marker marker-40"></div>
<div className="marker marker-50"></div>
<div className="marker marker-60"></div>
<div className="marker marker-70"></div>
<div className="marker marker-80"></div>
<div className="marker marker-90"></div>
<div className="custom-slider">
<div
className={`slider-handle ${isDragging ? "dragging" : ""}`}
style={{ left: `${calculateHandlePosition()}%` }}
onMouseDown={handleMouseDown}
>
{speed.toFixed(1)}x
<div className="production-details">
{/* hourlySimulation */}
<div className="hourly-wrapper production-wrapper">
<div className="header">
<div className="icon">
<HourlySimulationIcon />
</div>
<div className="label">Hourly Simulation</div>
</div>
<input
type="range"
min="0.5"
max="8"
step="0.1"
value={speed}
onChange={handleSpeedChange}
className="slider-input"
/>
<div className="progress-wrapper">
<div
className="progress"
style={{ width: hourlySimulation }}
></div>
</div>
</div>
{/* dailyProduction */}
<div className="dailyProduction-wrapper production-wrapper">
<div className="header">
<div className="icon">
<DailyProductionIcon />
</div>
<div className="label">Daily Production</div>
</div>
<div className="progress-wrapper">
<div
className="progress"
style={{ width: dailyProduction }}
></div>
</div>
</div>
{/* monthlyROI */}
<div className="monthlyROI-wrapper production-wrapper">
<div className="header">
<div className="icon">
<MonthlyROI />
</div>
<div className="label">Monthly ROI</div>
</div>
<div className="progress-wrapper">
<div className="progress" style={{ width: monthlyROI }}></div>
</div>{" "}
</div>
</div>
<div className="max-value">8x</div>
<div className="controls-wrapper">
<div
className="simulation-button-container"
onClick={() => {
handleReset();
}}
>
<ResetIcon />
Reset
</div>
<div
className="simulation-button-container"
onClick={() => {
handlePlayStop();
}}
>
<PlayStopIcon />
{playSimulation ? "Play" : "Stop"}
</div>
<div
className="simulation-button-container"
onClick={() => {
handleExit();
}}
>
<ExitIcon />
Exit
</div>
<div
className="simulation-button-container"
onClick={() => setExpand(!expand)}
>
<ExpandIcon />
</div>
</div>
</div>
<div className="progresser-wrapper">
<div className="time-displayer">
<div className="start-time-wrappper">
<div className="icon">
<StartIcon />
</div>
<div className="time-wrapper">
<div className="date">23 April ,25</div>
<div className="time">04:41 PM</div>
</div>
</div>
<div className="time-progresser">
<div className="timeline">
{intervals.map((label, index) => {
const segmentProgress = (index / totalSegments) * 100;
const isFilled = progress >= segmentProgress;
return (
<React.Fragment key={index}>
<div className="label-dot-wrapper">
<div className="label">{label} mins</div>
<div
className={`dot ${isFilled ? "filled" : ""}`}
></div>
</div>
{index < intervals.length - 1 && (
<div
className={`line ${
progress >= ((index + 1) / totalSegments) * 100
? "filled"
: ""
}`}
></div>
)}
</React.Fragment>
);
})}
</div>
</div>
<div className="end-time-wrappper">
<div className="time-wrapper">
<div className="time">00:10:20</div>
</div>
<div className="icon">
<EndIcon />
</div>
</div>
</div>
<div className="speed-control-container">
<div className="min-value">
<div className="icon">
<SpeedIcon />
</div>
Speed
</div>
<div className="slider-container" ref={sliderRef}>
<div className="speed-label mix-value">0X</div>
<div className="marker marker-10"></div>
<div className="marker marker-20"></div>
<div className="marker marker-30"></div>
<div className="marker marker-40"></div>
<div className="marker marker-50"></div>
<div className="marker marker-60"></div>
<div className="marker marker-70"></div>
<div className="marker marker-80"></div>
<div className="marker marker-90"></div>
<div className="custom-slider">
<div
className={`slider-handle ${isDragging ? "dragging" : ""}`}
style={{ left: `${calculateHandlePosition()}%` }}
onMouseDown={handleMouseDown}
>
{speed.toFixed(1)}x
</div>
<input
type="range"
min="0.5"
max="8"
step="0.1"
value={speed}
onChange={handleSpeedChange}
className="slider-input"
/>
</div>
<div className="speed-label max-value">8x</div>
</div>
</div>
</div>
<div className="processDisplayer">
<div
className="process-player"
style={{ left: playerPosition, position: "absolute" }}
></div>
<div
className="process-wrapper"
ref={processWrapperRef}
onMouseDown={handleProcessMouseDown}
>
{process.map((item, index) => (
<div
key={index}
className="process"
style={{
width: `${item.completed}%`,
backgroundColor: processColors[index],
}}
></div>
))}
</div>
<div
className="process-player"
ref={processPlayerRef}
style={{ left: playerPosition, position: "absolute" }}
></div>
</div>
</div>
</div>

31
app/src/functions/collabUserIcon.tsx
View File

@ -1,31 +0,0 @@
import React from "react";
import CustomAvatar from "./users/Avatar";
interface CollabUserIconProps {
userName: string;
userImage?: string;
color: string;
}
const CollabUserIcon: React.FC<CollabUserIconProps> = ({
userImage,
userName,
color,
}) => {
return (
<div className="collab-user-live-container">
<div className="user-image-container">
{userImage ? (
<img className="user-image" src={userImage} alt={userName} />
) : (
<CustomAvatar name={userName} color={color} />
)}
</div>
<div className="user-name" style={{ backgroundColor: color }}>
{userName}
</div>
</div>
);
};
export default CollabUserIcon;

559
app/src/modules/builder/builder.tsx
View File

@ -18,20 +18,20 @@ import Window from "../../assets/gltf-glb/window.glb";
////////// Zustand State Imports //////////
import {
useToggleView,
useDeletePointOrLine,
useMovePoint,
useActiveLayer,
useSocketStore,
useWallVisibility,
useRoofVisibility,
useShadows,
useUpdateScene,
useWalls,
useToolMode,
useRefTextUpdate,
useRenderDistance,
useLimitDistance,
useToggleView,
useDeletePointOrLine,
useMovePoint,
useActiveLayer,
useSocketStore,
useWallVisibility,
useRoofVisibility,
useShadows,
useUpdateScene,
useWalls,
useToolMode,
useRefTextUpdate,
useRenderDistance,
useLimitDistance,
} from "../../store/store";
////////// 3D Function Imports //////////
@ -56,300 +56,301 @@ import ZoneGroup from "./groups/zoneGroup";
import useModuleStore from "../../store/useModuleStore";
import MeasurementTool from "../scene/tools/measurementTool";
import NavMesh from "../simulation/vehicle/navMesh/navMesh";
import ProductionCapacity from "../../components/ui/analysis/ProductionCapacity";
export default function Builder() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
const csg = useRef(); // Reference for CSG object, used for 3D modeling.
const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
const scene = useRef() as Types.RefScene; // Reference to the scene.
const camera = useRef() as Types.RefCamera; // Reference to the camera object.
const controls = useRef<any>(); // Reference to the controls object.
const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
const csg = useRef(); // Reference for CSG object, used for 3D modeling.
const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
const scene = useRef() as Types.RefScene; // Reference to the scene.
const camera = useRef() as Types.RefCamera; // Reference to the camera object.
const controls = useRef<any>(); // Reference to the controls object.
const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
// Assigning the scene and camera from the Three.js state to the references.
// Assigning the scene and camera from the Three.js state to the references.
scene.current = state.scene;
camera.current = state.camera;
controls.current = state.controls;
raycaster.current = state.raycaster;
scene.current = state.scene;
camera.current = state.camera;
controls.current = state.controls;
raycaster.current = state.raycaster;
const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
const grid = useRef() as any; // Reference for a grid object for raycaster reference.
const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
const floorGroupAisle = useRef() as Types.RefGroup;
const zoneGroup = useRef() as Types.RefGroup;
const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
const grid = useRef() as any; // Reference for a grid object for raycaster reference.
const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
const floorGroupAisle = useRef() as Types.RefGroup;
const zoneGroup = useRef() as Types.RefGroup;
const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item.
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { socket } = useSocketStore();
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
const { wallVisibility, setWallVisibility } = useWallVisibility();
const { shadows, setShadows } = useShadows();
const { renderDistance, setRenderDistance } = useRenderDistance();
const { limitDistance, setLimitDistance } = useLimitDistance();
const { updateScene, setUpdateScene } = useUpdateScene();
const { walls, setWalls } = useWalls();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
const { activeModule } = useModuleStore();
const [selectedItemsIndex, setSelectedItemsIndex] =
useState<Types.Number | null>(null); // State for tracking the index of the selected item.
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
const { toolMode, setToolMode } = useToolMode();
const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { socket } = useSocketStore();
const { roofVisibility, setRoofVisibility } = useRoofVisibility();
const { wallVisibility, setWallVisibility } = useWallVisibility();
const { shadows, setShadows } = useShadows();
const { renderDistance, setRenderDistance } = useRenderDistance();
const { limitDistance, setLimitDistance } = useLimitDistance();
const { updateScene, setUpdateScene } = useUpdateScene();
const { walls, setWalls } = useWalls();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
const { activeModule } = useModuleStore();
// const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader();
// const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
// loader.setDRACOLoader(dracoLoader);
// dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
// loader.setDRACOLoader(dracoLoader);
////////// Assest Configuration Values //////////
////////// Assest Configuration Values //////////
const AssetConfigurations: Types.AssetConfigurations = {
arch: {
modelUrl: arch,
scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0],
positionY: () => 0,
type: "Fixed-Move",
},
door: {
modelUrl: door,
scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0],
positionY: () => 0,
type: "Fixed-Move",
},
window: {
modelUrl: Window,
scale: [0.75, 0.75, 0.75],
csgscale: [5, 3, 0.5],
csgposition: [0, 1.5, 0],
positionY: (intersectionPoint) => intersectionPoint.point.y,
type: "Free-Move",
},
};
const AssetConfigurations: Types.AssetConfigurations = {
arch: {
modelUrl: arch,
scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0],
positionY: () => 0,
type: "Fixed-Move",
},
door: {
modelUrl: door,
scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0],
positionY: () => 0,
type: "Fixed-Move",
},
window: {
modelUrl: Window,
scale: [0.75, 0.75, 0.75],
csgscale: [5, 3, 0.5],
csgposition: [0, 1.5, 0],
positionY: (intersectionPoint) => intersectionPoint.point.y,
type: "Free-Move",
},
};
////////// All Toggle's //////////
////////// All Toggle's //////////
useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
if (dragPointControls.current) {
dragPointControls.current.enabled = false;
}
if (toggleView) {
Layer2DVisibility(
activeLayer,
floorPlanGroup,
floorPlanGroupLine,
floorPlanGroupPoint,
currentLayerPoint,
dragPointControls
);
} else {
setToolMode(null);
setDeletePointOrLine(false);
setMovePoint(false);
loadWalls(lines, setWalls);
setUpdateScene(true);
line.current = [];
}
}, [toggleView]);
useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
if (dragPointControls.current) {
dragPointControls.current.enabled = false;
}
if (toggleView) {
Layer2DVisibility(
activeLayer,
floorPlanGroup,
floorPlanGroupLine,
floorPlanGroupPoint,
currentLayerPoint,
dragPointControls
);
} else {
setToolMode(null);
setDeletePointOrLine(false);
setMovePoint(false);
loadWalls(lines, setWalls);
setUpdateScene(true);
line.current = [];
}
}, [toggleView]);
useEffect(() => {
THREE.Cache.clear();
THREE.Cache.enabled = true;
}, []);
useEffect(() => {
THREE.Cache.clear();
THREE.Cache.enabled = true;
}, []);
useEffect(() => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
useEffect(() => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
async function fetchVisibility() {
const visibility = await findEnvironment(
organization,
localStorage.getItem("userId")!
);
if (visibility) {
setRoofVisibility(visibility.roofVisibility);
setWallVisibility(visibility.wallVisibility);
setShadows(visibility.shadowVisibility);
setRenderDistance(visibility.renderDistance);
setLimitDistance(visibility.limitDistance);
}
}
fetchVisibility();
}, []);
async function fetchVisibility() {
const visibility = await findEnvironment(
organization,
localStorage.getItem("userId")!
);
if (visibility) {
setRoofVisibility(visibility.roofVisibility);
setWallVisibility(visibility.wallVisibility);
setShadows(visibility.shadowVisibility);
setRenderDistance(visibility.renderDistance);
setLimitDistance(visibility.limitDistance);
}
}
fetchVisibility();
}, []);
////////// UseFrame is Here //////////
////////// UseFrame is Here //////////
useFrame(() => {
if (toolMode) {
Draw(
state,
plane,
cursorPosition,
floorPlanGroupPoint,
floorPlanGroupLine,
snappedPoint,
isSnapped,
isSnappedUUID,
line,
lines,
ispreSnapped,
floorPlanGroup,
ReferenceLineMesh,
LineCreated,
setRefTextUpdate,
Tube,
anglesnappedPoint,
isAngleSnapped,
toolMode
);
}
});
useFrame(() => {
if (toolMode) {
Draw(
state,
plane,
cursorPosition,
floorPlanGroupPoint,
floorPlanGroupLine,
snappedPoint,
isSnapped,
isSnappedUUID,
line,
lines,
ispreSnapped,
floorPlanGroup,
ReferenceLineMesh,
LineCreated,
setRefTextUpdate,
Tube,
anglesnappedPoint,
isAngleSnapped,
toolMode
);
}
});
////////// Return //////////
////////// Return //////////
return (
<>
<Ground grid={grid} plane={plane} />
return (
<>
<Ground grid={grid} plane={plane} />
<DistanceText key={toggleView} />
<DistanceText key={toggleView} />
<ReferenceDistanceText
key={refTextupdate}
line={ReferenceLineMesh.current}
/>
<ReferenceDistanceText
key={refTextupdate}
line={ReferenceLineMesh.current}
/>
<SocketResponses
floorPlanGroup={floorPlanGroup}
lines={lines}
floorGroup={floorGroup}
floorGroupAisle={floorGroupAisle}
scene={scene}
onlyFloorlines={onlyFloorlines}
AssetConfigurations={AssetConfigurations}
itemsGroup={itemsGroup}
isTempLoader={isTempLoader}
tempLoader={tempLoader}
currentLayerPoint={currentLayerPoint}
floorPlanGroupPoint={floorPlanGroupPoint}
floorPlanGroupLine={floorPlanGroupLine}
zoneGroup={zoneGroup}
dragPointControls={dragPointControls}
/>
<SocketResponses
floorPlanGroup={floorPlanGroup}
lines={lines}
floorGroup={floorGroup}
floorGroupAisle={floorGroupAisle}
scene={scene}
onlyFloorlines={onlyFloorlines}
AssetConfigurations={AssetConfigurations}
itemsGroup={itemsGroup}
isTempLoader={isTempLoader}
tempLoader={tempLoader}
currentLayerPoint={currentLayerPoint}
floorPlanGroupPoint={floorPlanGroupPoint}
floorPlanGroupLine={floorPlanGroupLine}
zoneGroup={zoneGroup}
dragPointControls={dragPointControls}
/>
<WallsAndWallItems
CSGGroup={CSGGroup}
AssetConfigurations={AssetConfigurations}
setSelectedItemsIndex={setSelectedItemsIndex}
selectedItemsIndex={selectedItemsIndex}
currentWallItem={currentWallItem}
csg={csg}
lines={lines}
hoveredDeletableWallItem={hoveredDeletableWallItem}
/>
<WallsAndWallItems
CSGGroup={CSGGroup}
AssetConfigurations={AssetConfigurations}
setSelectedItemsIndex={setSelectedItemsIndex}
selectedItemsIndex={selectedItemsIndex}
currentWallItem={currentWallItem}
csg={csg}
lines={lines}
hoveredDeletableWallItem={hoveredDeletableWallItem}
/>
<FloorItemsGroup
itemsGroup={itemsGroup}
hoveredDeletableFloorItem={hoveredDeletableFloorItem}
AttachedObject={AttachedObject}
floorGroup={floorGroup}
tempLoader={tempLoader}
isTempLoader={isTempLoader}
plane={plane}
/>
<FloorItemsGroup
itemsGroup={itemsGroup}
hoveredDeletableFloorItem={hoveredDeletableFloorItem}
AttachedObject={AttachedObject}
floorGroup={floorGroup}
tempLoader={tempLoader}
isTempLoader={isTempLoader}
plane={plane}
/>
<FloorGroup
floorGroup={floorGroup}
lines={lines}
referencePole={referencePole}
hoveredDeletablePillar={hoveredDeletablePillar}
/>
<FloorGroup
floorGroup={floorGroup}
lines={lines}
referencePole={referencePole}
hoveredDeletablePillar={hoveredDeletablePillar}
/>
<FloorPlanGroup
floorPlanGroup={floorPlanGroup}
floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint}
floorGroup={floorGroup}
currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls}
hoveredDeletablePoint={hoveredDeletablePoint}
hoveredDeletableLine={hoveredDeletableLine}
plane={plane}
line={line}
lines={lines}
onlyFloorline={onlyFloorline}
onlyFloorlines={onlyFloorlines}
ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated}
isSnapped={isSnapped}
ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint}
/>
<FloorPlanGroup
floorPlanGroup={floorPlanGroup}
floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint}
floorGroup={floorGroup}
currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls}
hoveredDeletablePoint={hoveredDeletablePoint}
hoveredDeletableLine={hoveredDeletableLine}
plane={plane}
line={line}
lines={lines}
onlyFloorline={onlyFloorline}
onlyFloorlines={onlyFloorlines}
ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated}
isSnapped={isSnapped}
ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint}
/>
<ZoneGroup />
<ZoneGroup />
<FloorGroupAilse
floorGroupAisle={floorGroupAisle}
plane={plane}
floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint}
line={line}
lines={lines}
currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls}
floorPlanGroup={floorPlanGroup}
ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated}
isSnapped={isSnapped}
ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint}
/>
<FloorGroupAilse
floorGroupAisle={floorGroupAisle}
plane={plane}
floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint}
line={line}
lines={lines}
currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls}
floorPlanGroup={floorPlanGroup}
ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated}
isSnapped={isSnapped}
ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint}
/>
<MeasurementTool />
<MeasurementTool />
<NavMesh lines={lines} />
</>
);
<NavMesh lines={lines} />
</>
);
}

15
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -69,7 +69,9 @@ const ZoneGroup: React.FC = () => {
},
transparent: true,
depthWrite: false,
}), []);
}),
[]
);
useEffect(() => {
const fetchZones = async () => {
@ -148,6 +150,7 @@ const ZoneGroup: React.FC = () => {
}
}, [toolMode, toggleView]);
// eslint-disable-next-line react-hooks/exhaustive-deps
const addZoneToBackend = async (zone: {
zoneId: string;
zoneName: string;
@ -503,6 +506,15 @@ const ZoneGroup: React.FC = () => {
draggedSphere,
movePoint,
activeLayer,
raycaster,
pointer,
controls,
plane,
setZones,
setZonePoints,
addZoneToBackend,
handleDeleteZone,
updateZoneToBackend,
]);
useFrame(() => {
@ -551,6 +563,7 @@ const ZoneGroup: React.FC = () => {
key={index}
position={midpoint}
rotation={[0, -angle, 0]}
visible={false}
>
<planeGeometry args={[planeWidth, planeHeight]} />
<primitive

19
app/src/modules/collaboration/camera/collabCams.tsx
View File

@ -8,9 +8,9 @@ import { useActiveUsers, useSocketStore } from "../../../store/store";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { useNavigate } from "react-router-dom";
import { Html } from "@react-three/drei";
import CollabUserIcon from "../../../functions/collabUserIcon";
import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor";
import CollabUserIcon from "./collabUserIcon";
import useModuleStore from "../../../store/useModuleStore";
import { getAvatarColor } from "../functions/getAvatarColor";
const CamModelsGroup = () => {
const navigate = useNavigate();
@ -20,13 +20,14 @@ const CamModelsGroup = () => {
const { socket } = useSocketStore();
const { activeModule } = useModuleStore();
// eslint-disable-next-line react-hooks/exhaustive-deps
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
loader.setDRACOLoader(dracoLoader);
const [cams, setCams] = useState<any[]>([]);
const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler, target: THREE.Vector3 }>>({});
const dedupeCams = (cams: any[]) => {
const seen = new Set();
@ -102,6 +103,7 @@ const CamModelsGroup = () => {
});
socket.on("cameraUpdateResponse", (data: any) => {
if (
!groupRef.current ||
socket.id === data.socketId ||
@ -122,6 +124,11 @@ const CamModelsGroup = () => {
data.data.rotation.y,
data.data.rotation.z
),
target: new THREE.Vector3(
data.data.target.x,
data.data.target.y,
data.data.target.z
),
},
}));
});
@ -131,7 +138,7 @@ const CamModelsGroup = () => {
socket.off("userDisConnectResponse");
socket.off("cameraUpdateResponse");
};
}, [socket]);
}, [email, loader, navigate, setActiveUsers, socket]);
useFrame(() => {
if (!groupRef.current) return;
@ -217,9 +224,11 @@ const CamModelsGroup = () => {
position={[-0.015, 0, 0.7]}
>
<CollabUserIcon
userImage={cam.userData.userImage || ""}
userImage={cam.userData.userImage ?? ""}
userName={cam.userData.userName}
color={getAvatarColor(index, cam.userData.userName)}
position={cam.position}
rotation={cam.rotation}
/>
</Html>
</primitive>

56
app/src/modules/collaboration/camera/collabUserIcon.tsx Normal file
View File

@ -0,0 +1,56 @@
import React from "react";
import CustomAvatar from "../users/Avatar";
import { useSelectedUserStore } from "../../../store/useCollabStore";
import { useCamMode } from "../../../store/store";
interface CollabUserIconProps {
userName: string;
userImage?: string;
color: string;
position?: {
x: number;
y: number;
z: number;
};
rotation?: {
x: number;
y: number;
z: number;
};
}
const CollabUserIcon: React.FC<CollabUserIconProps> = ({
userImage,
userName,
color,
position,
rotation,
}) => {
const { setSelectedUser } = useSelectedUserStore();
const { setCamMode } = useCamMode();
return (
<div className="collab-user-live-container">
<button
className="user-image-container"
onClick={() => {
if(!position || !rotation) return;
// Set the selected user in the store
setSelectedUser({ color: color, name: userName, location: { position, rotation } });
setCamMode("FollowPerson");
}}
>
{userImage ? (
<img className="user-image" src={userImage} alt={userName} />
) : (
<CustomAvatar name={userName} color={color} />
)}
</button>
<div className="user-name" style={{ backgroundColor: color }}>
{userName}
</div>
</div>
);
};
export default CollabUserIcon;

38
app/src/modules/collaboration/collaboration.tsx
View File

@ -1,14 +1,32 @@
import React from 'react'
import CamModelsGroup from './camera/collabCams'
import React, { useEffect } from "react";
import CamModelsGroup from "./camera/collabCams";
import { useSelectedUserStore } from "../../store/useCollabStore";
import { useThree } from "@react-three/fiber";
import setCameraView from "./functions/setCameraView";
import { useCamMode } from "../../store/store";
const Collaboration = () => {
return (
<>
const Collaboration: React.FC = () => {
const { selectedUser } = useSelectedUserStore();
const { camMode } = useCamMode();
const { camera, controls } = useThree(); // Access R3F camera and controls
<CamModelsGroup />
useEffect(() => {
if(camMode !== "FollowPerson") return;
// If a user is selected, set the camera view to their location
// and update the camera and controls accordingly
if (selectedUser?.location) {
const { position, rotation } = selectedUser.location;
setCameraView({
controls,
camera,
position,
rotation,
username: selectedUser.name,
});
}
}, [selectedUser, camera, controls, camMode]);
</>
)
}
return <CamModelsGroup />;
};
export default Collaboration
export default Collaboration;

2
app/src/functions/users/functions/getAvatarColor.ts → app/src/modules/collaboration/functions/getAvatarColor.ts
View File

@ -27,7 +27,7 @@ export function getAvatarColor(index: number, name?: string): string {
const localStorageKey = "userAvatarColors";
// Check if local storage is available
if (name) {
let userColors = JSON.parse(localStorage.getItem(localStorageKey) || "{}");
let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}");
// Check if the user already has an assigned color
if (userColors[name]) {

0
app/src/functions/users/functions/getInitials.ts → app/src/modules/collaboration/functions/getInitials.ts
View File

33
app/src/modules/collaboration/functions/setCameraView.ts Normal file
View File

@ -0,0 +1,33 @@
import * as THREE from 'three';
interface SetCameraViewProps {
controls: any;
camera: THREE.Camera;
position: THREE.Vector3 | { x: number; y: number; z: number };
rotation: THREE.Euler | { x: number; y: number; z: number };
username?: string;
target?: THREE.Vector3 | { x: number; y: number; z: number };
}
export default async function setCameraView({
controls,
camera,
position,
rotation,
username,
target
}: SetCameraViewProps) {
if (!controls || !camera) return;
// Normalize position
const newPosition = position instanceof THREE.Vector3
? position
: new THREE.Vector3(position.x, position.y, position.z);
if (controls.setTarget) {
controls?.setLookAt(...newPosition.toArray(), newPosition.x, 0, newPosition.z, true);
}
// Optionally you can log
console.log(`Camera view updated by ${username ?? 'unknown user'}`);
}

7
app/src/functions/users/Avatar.tsx → app/src/modules/collaboration/users/Avatar.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react";
import { getInitials } from "./functions/getInitials";
import { getAvatarColor } from "./functions/getAvatarColor";
import { getInitials } from "../functions/getInitials";
interface AvatarProps {
name: string; // Name can be a full name or initials
@ -26,7 +25,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
const initials = getInitials(name); // Convert name to initials if needed
// Draw background
ctx.fillStyle = color || "#323232"; // Use color prop or generate color based on index
ctx.fillStyle = color ?? "#323232"; // Use color prop or generate color based on index
ctx.fillRect(0, 0, size, size);
// Draw initials
@ -40,7 +39,7 @@ const CustomAvatar: React.FC<AvatarProps> = ({
const dataURL = canvas.toDataURL("image/png");
setImageSrc(dataURL);
}
}, [name, size, textColor]);
}, [color, name, size, textColor]);
if (!imageSrc) {
return null; // Return null while the image is being generated

50
app/src/modules/market/CardsContainer.tsx
View File

@ -42,31 +42,33 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
};
return (
<div className="cards-container-container">
<div className="header">Products You May Like</div>
<div className="cards-wrapper-container">
{models.length > 0 &&
models.map((assetDetail) => (
<Card
key={assetDetail._id}
assetName={assetDetail?.filename}
uploadedOn={assetDetail.uploadDate}
price={assetDetail?.price}
rating={4.5}
views={800}
onSelectCard={handleCardSelect}
image={assetDetail.thumbnail}
description={assetDetail.description}
<div className="cards-container-wrapper">
<div className="cards-container-container">
<div className="header">Products You May Like</div>
<div className="cards-wrapper-container">
{models.length > 0 &&
models.map((assetDetail) => (
<Card
key={assetDetail._id}
assetName={assetDetail?.filename}
uploadedOn={assetDetail.uploadDate}
price={assetDetail?.price}
rating={4.5}
views={800}
onSelectCard={handleCardSelect}
image={assetDetail.thumbnail}
description={assetDetail.description}
/>
))}
{/* <RenderOverlay> */}
{selectedCard && (
<AssetPreview
selectedCard={selectedCard}
setSelectedCard={setSelectedCard}
/>
))}
{/* <RenderOverlay> */}
{selectedCard && (
<AssetPreview
selectedCard={selectedCard}
setSelectedCard={setSelectedCard}
/>
)}
{/* </RenderOverlay> */}
)}
{/* </RenderOverlay> */}
</div>
</div>
</div>
);

220
app/src/modules/scene/camera/camMode.tsx
View File

@ -1,90 +1,144 @@
import { useFrame, useThree } from '@react-three/fiber';
import React, { useEffect, useState } from 'react';
import * as CONSTANTS from '../../../types/world/worldConstants';
import { useCamMode, useToggleView } from '../../../store/store';
import { useKeyboardControls } from '@react-three/drei';
import switchToThirdPerson from './switchToThirdPerson';
import switchToFirstPerson from './switchToFirstPerson';
import { detectModifierKeys } from '../../../utils/shortcutkeys/detectModifierKeys';
import { useFrame, useThree } from "@react-three/fiber";
import React, { useEffect, useState } from "react";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useCamMode, useToggleView } from "../../../store/store";
import { useKeyboardControls } from "@react-three/drei";
import switchToThirdPerson from "./switchToThirdPerson";
import switchToFirstPerson from "./switchToFirstPerson";
import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
const CamMode: React.FC = () => {
const { camMode, setCamMode } = useCamMode();
const [, get] = useKeyboardControls()
const [isTransitioning, setIsTransitioning] = useState(false);
const state: any = useThree();
const { toggleView } = useToggleView();
const { camMode, setCamMode } = useCamMode();
const [, get] = useKeyboardControls();
const [isTransitioning, setIsTransitioning] = useState(false);
const state: any = useThree();
const { toggleView } = useToggleView();
const [isShiftActive, setIsShiftActive] = useState(false);
useEffect(() => {
const handlePointerLockChange = async () => {
if (document.pointerLockElement && !toggleView) {
// console.log('Pointer is locked');
} else {
// console.log('Pointer is unlocked');
if (camMode === "FirstPerson" && !toggleView) {
setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera);
}
}
};
document.addEventListener('pointerlockchange', handlePointerLockChange);
return () => {
document.removeEventListener('pointerlockchange', handlePointerLockChange);
};
}, [camMode, toggleView, setCamMode, state.controls, state.camera]);
useEffect(() => {
const handleKeyPress = async (event: any) => {
if (!state.controls) return;
const keyCombination = detectModifierKeys(event);
if (keyCombination === "/" && !isTransitioning && !toggleView) {
setIsTransitioning(true);
state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
if (camMode === 'ThirdPerson') {
setCamMode("FirstPerson");
await switchToFirstPerson(state.controls, state.camera);
} else if (camMode === "FirstPerson") {
setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera);
}
setIsTransitioning(false);
}
};
window.addEventListener("keydown", handleKeyPress);
return () => {
window.removeEventListener("keydown", handleKeyPress);
};
}, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]);
useFrame(() => {
const { forward, backward, left, right } = get();
if (!state.controls) return
if (!state.controls || camMode === "ThirdPerson" || !document.pointerLockElement) return;
if (forward) {
state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed, true)
useEffect(() => {
const handlePointerLockChange = async () => {
if (document.pointerLockElement && !toggleView) {
// Pointer is locked
} else {
// Pointer is unlocked
if (camMode === "FirstPerson" && !toggleView) {
setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera);
}
if (backward) {
state.controls.forward(CONSTANTS.firstPersonControls.backwardSpeed, true)
}
if (left) {
state.controls.truck(CONSTANTS.firstPersonControls.leftSpeed, 0, true)
}
if (right) {
state.controls.truck(CONSTANTS.firstPersonControls.rightSpeed, 0, true)
}
});
}
};
return null; // This component does not render any UI
document.addEventListener("pointerlockchange", handlePointerLockChange);
return () => {
document.removeEventListener(
"pointerlockchange",
handlePointerLockChange
);
};
}, [camMode, toggleView, setCamMode, state.controls, state.camera]);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Shift") {
setIsShiftActive(true);
}
};
const handleKeyUp = (event: KeyboardEvent) => {
if (event.key === "Shift") {
setIsShiftActive(false);
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
};
}, []);
useEffect(() => {
const handleKeyPress = async (event: KeyboardEvent) => {
if (!state.controls) return;
const keyCombination = detectModifierKeys(event);
if (keyCombination === "/" && !isTransitioning && !toggleView) {
setIsTransitioning(true);
state.controls.mouseButtons.left =
CONSTANTS.controlsTransition.leftMouse;
state.controls.mouseButtons.right =
CONSTANTS.controlsTransition.rightMouse;
state.controls.mouseButtons.wheel =
CONSTANTS.controlsTransition.wheelMouse;
state.controls.mouseButtons.middle =
CONSTANTS.controlsTransition.middleMouse;
if (camMode === "ThirdPerson") {
setCamMode("FirstPerson");
await switchToFirstPerson(state.controls, state.camera);
} else if (camMode === "FirstPerson") {
setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera);
}
setIsTransitioning(false);
}
};
window.addEventListener("keydown", handleKeyPress);
return () => {
window.removeEventListener("keydown", handleKeyPress);
};
}, [
camMode,
isTransitioning,
toggleView,
state.controls,
state.camera,
setCamMode,
]);
useFrame(() => {
const { forward, backward, left, right } = get();
if (!state.controls) return;
if (camMode === "ThirdPerson" || !document.pointerLockElement) return;
const speedMultiplier = isShiftActive ? 4 : 1;
if (forward) {
state.controls.forward(
CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier,
true
);
}
if (backward) {
state.controls.forward(
CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier,
true
);
}
if (left) {
state.controls.truck(
CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier,
0,
true
);
}
if (right) {
state.controls.truck(
CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier,
0,
true
);
}
});
return null; // This component does not render any UI
};
export default CamMode;
export default CamMode;

9
app/src/modules/simulation/events/points/creator/pointsCreator.tsx
View File

@ -17,12 +17,11 @@ function PointsCreator() {
useEffect(() => {
if (selectedEventSphere) {
const eventData = getEventByModelUuid(selectedEventSphere.userData.modelUuid);
const eventData = getEventByModelUuid(
selectedEventSphere.userData.modelUuid
);
if (eventData) {
setSelectedEventData(
eventData,
selectedEventSphere.userData.pointUuid
);
setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
} else {
clearSelectedEventData();
}

28
app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts Normal file
View File

@ -0,0 +1,28 @@
interface HandleAddEventToProductParams {
selectedAsset: any; // Replace `any` with specific type if you have it
addEvent: (productId: string, asset: any) => void;
selectedProduct: {
productId: string;
productName: string;
// Add other fields if needed
};
clearSelectedAsset: () => void;
}
export const handleAddEventToProduct = ({
selectedAsset,
addEvent,
selectedProduct,
clearSelectedAsset,
}: HandleAddEventToProductParams) => {
console.log('selectedProduct: ', selectedProduct);
if (selectedAsset) {
addEvent(selectedProduct.productId, selectedAsset);
// upsertProductOrEventApi({
// productName: selectedProduct.productName,
// productId: selectedProduct.productId,
// eventDatas: selectedAsset
// });
clearSelectedAsset();
}
};

9
app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
View File

@ -8,7 +8,7 @@ function RoboticArmAnimator({ armUuid, HandleCallback, currentPhase, ikSolver, t
const { armBots } = useArmBotStore();
const { scene } = useThree();
const restSpeed = 0.1;
const restPosition = new THREE.Vector3(0, 2, 1.6);
const restPosition = new THREE.Vector3(0, 1, -1.6);
const initialCurveRef = useRef<THREE.CatmullRomCurve3 | null>(null);
const initialStartPositionRef = useRef<THREE.Vector3 | null>(null);
const [initialProgress, setInitialProgress] = useState(0);
@ -22,11 +22,12 @@ function RoboticArmAnimator({ armUuid, HandleCallback, currentPhase, ikSolver, t
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
useEffect(() => {
setCurrentPath(path)
}, [path])
useEffect(() => {
}, [currentPath])
useFrame((_, delta) => {
@ -42,13 +43,13 @@ function RoboticArmAnimator({ armUuid, HandleCallback, currentPhase, ikSolver, t
currentPath.map(point => new THREE.Vector3(point[0], point[1], point[2]))
);
const next = initialProgressRef.current + delta * 0.5;
if (next >= 1) {
bone.position.copy(restPosition);
// bone.position.copy(restPosition);
HandleCallback(); // Call the callback when the path is completed
initialProgressRef.current = 0; // Set ref to 1 when done
} else {
const point = curve.getPoint(next); // Get the interpolated point from the curve
bone.position.copy(point); // Update the bone position along the curve
initialProgressRef.current = next; // Update progress

37
app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx
View File

@ -16,6 +16,7 @@ interface Process {
endPoint?: Vector3;
speed: number;
}
function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
const { isPlaying } = usePlayButtonStore();
@ -29,7 +30,7 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
const groupRef = useRef<any>(null);
const [processes, setProcesses] = useState<Process[]>([]);
const [armBotCurvePoints, setArmBotCurvePoints] = useState({ start: [], end: [] })
const restPosition = new THREE.Vector3(0, 2, 1.6);
const restPosition = new THREE.Vector3(0, 1, -1.6);
let armBotCurveRef = useRef<THREE.CatmullRomCurve3 | null>(null)
const [path, setPath] = useState<[number, number, number][]>([]);
@ -52,7 +53,7 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
if (isPlaying) {
//Moving armBot from initial point to rest position.
if (!robot?.isActive && robot?.state == "idle" && currentPhase == "init") {
setArmBotActive(robot.modelUuid, true)
setArmBotState(robot.modelUuid, "running")
setCurrentPhase("init-to-rest");
@ -62,11 +63,11 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
setPath(curve.points.map(point => [point.x, point.y, point.z]));
}
}
logStatus(robot.modelUuid, "Starting from init to rest")
logStatus(robot.modelUuid, "Moving armBot from initial point to rest position.")
}
//Waiting for trigger.
else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "rest" && !robot.currentAction) {
console.log("trigger");
logStatus(robot.modelUuid, "Waiting to trigger CurrentAction")
setTimeout(() => {
addCurrentAction(robot.modelUuid, 'action-003');
}, 3000);
@ -84,7 +85,7 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
}
}
}
logStatus(robot.modelUuid, "Starting from rest to start")
logStatus(robot.modelUuid, "Moving armBot from rest point to start position.")
}
else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "picking" && robot.currentAction) {
setArmBotActive(robot.modelUuid, true);
@ -98,10 +99,13 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2])
);
if (curve) {
setPath(curve.points.map(point => [point.x, point.y, point.z]));
setTimeout(() => {
logStatus(robot.modelUuid, "picking the object");
setPath(curve.points.map(point => [point.x, point.y, point.z]));
}, 1500)
}
}
logStatus(robot.modelUuid, "Starting from start to end")
logStatus(robot.modelUuid, "Moving armBot from start point to end position.")
}
else if (robot && !robot.isActive && robot.state === "idle" && currentPhase === "dropping" && robot.currentAction) {
setArmBotActive(robot.modelUuid, true);
@ -112,10 +116,13 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
let curve = createCurveBetweenTwoPoints(new THREE.Vector3(endPoint[0], endPoint[1], endPoint[2]), restPosition
);
if (curve) {
setPath(curve.points.map(point => [point.x, point.y, point.z]));
setTimeout(() => {
logStatus(robot.modelUuid, "dropping the object");
setPath(curve.points.map(point => [point.x, point.y, point.z]));
}, 1500)
}
}
logStatus(robot.modelUuid, "Starting from end to rest")
logStatus(robot.modelUuid, "Moving armBot from end point to rest position.")
}
}
@ -133,28 +140,28 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
const HandleCallback = () => {
if (robot.isActive && robot.state == "running" && currentPhase == "init-to-rest") {
console.log("Callback triggered: rest");
logStatus(robot.modelUuid, "Callback triggered: rest");
setArmBotActive(robot.modelUuid, false)
setArmBotState(robot.modelUuid, "idle")
setCurrentPhase("rest");
setPath([])
}
else if (robot.isActive && robot.state == "running" && currentPhase == "rest-to-start") {
console.log("Callback triggered: pick.");
logStatus(robot.modelUuid, "Callback triggered: pick.");
setArmBotActive(robot.modelUuid, false)
setArmBotState(robot.modelUuid, "idle")
setCurrentPhase("picking");
setPath([])
}
else if (robot.isActive && robot.state == "running" && currentPhase == "start-to-end") {
console.log("Callback triggered: drop.");
logStatus(robot.modelUuid, "Callback triggered: drop.");
setArmBotActive(robot.modelUuid, false)
setArmBotState(robot.modelUuid, "idle")
setCurrentPhase("dropping");
setPath([])
}
else if (robot.isActive && robot.state == "running" && currentPhase == "end-to-rest") {
console.log("Callback triggered: rest, cycle completed.");
logStatus(robot.modelUuid, "Callback triggered: rest, cycle completed.");
setArmBotActive(robot.modelUuid, false)
setArmBotState(robot.modelUuid, "idle")
setCurrentPhase("rest");
@ -163,12 +170,12 @@ function RoboticArmInstance({ robot }: { robot: ArmBotStatus }) {
}
}
const logStatus = (id: string, status: string) => {
console.log(id +","+ status);
// console.log(id + "," + status);
console.log( status);
}
return (
<>
<IKInstance modelUrl={armModel} setIkSolver={setIkSolver} ikSolver={ikSolver} robot={robot} groupRef={groupRef} processes={processes}
setArmBotCurvePoints={setArmBotCurvePoints} />
<RoboticArmAnimator armUuid={robot?.modelUuid} HandleCallback={HandleCallback}

7
app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx
View File

@ -15,6 +15,7 @@ type IKInstanceProps = {
setArmBotCurvePoints: any
};
function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processes, setArmBotCurvePoints }: IKInstanceProps) {
const { scene } = useThree();
const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
const draco = new DRACOLoader();
@ -64,16 +65,16 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, robot, groupRef, processe
const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
setIkSolver(solver);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
// scene.add(groupRef.current)
// scene.add(helper)
}, [gltf]);
return (
<>
<group ref={groupRef} position={robot.position}>
<group ref={groupRef} position={robot.position} rotation={robot.rotation}>
<primitive
uuid={"ArmBot-X200"}
object={cloned}

29
app/src/modules/simulation/roboticArm/roboticArm.tsx
View File

@ -7,18 +7,19 @@ function RoboticArm() {
const { armBots, addArmBot, removeArmBot } = useArmBotStore();
const { floorItems } = useFloorItems();
const armBotStatusSample: RoboticArmEventSchema[] = [
{
state: "idle",
modelUuid: "armbot-xyz-001",
modelUuid: "3abf5d46-b59e-4e6b-9c02-a4634b64b82d",
modelName: "ArmBot-X200",
position: [91.94347308985614, 0, 6.742905194869091],
rotation: [0, 0, 0],
position: [0.20849215906958463, 0, 0.32079278127773675],
rotation: [-1.3768690876192207e-15, 1.4883085074751308, 1.5407776675834467e-15],
type: "roboticArm",
speed: 1.5,
point: {
uuid: "point-123",
position: [0, 1.5, 0],
position: [0, 2.6, 0],
rotation: [0, 0, 0],
actions: [
{
@ -26,9 +27,21 @@ function RoboticArm() {
actionName: "Pick Component",
actionType: "pickAndPlace",
process: {
startPoint: [5.52543010919071, 1, -8.433681161200905],
endPoint: [10.52543010919071, 1, -12.433681161200905],
startPoint: [-1, 2, 1],
endPoint: [-2, 1, -1],
},
// process: {
// "startPoint": [
// 0.37114476008711866,
// 1.9999999999999998,
// 1.8418816116721384
// ],
// "endPoint": [
// -0.42197069459490777,
// 1,
// -3.159515927851809
// ]
// },
triggers: [
{
triggerUuid: "trigger-001",
@ -145,7 +158,7 @@ function RoboticArm() {
];
useEffect(() => {
removeArmBot(armBotStatusSample[0].modelUuid);
addArmBot('123', armBotStatusSample[0]);
// addArmBot('123', armBotStatusSample[1]);
@ -153,7 +166,7 @@ function RoboticArm() {
}, []);
useEffect(() => {
//
}, [armBots]);
return (

54
app/src/modules/simulation/ui/arm/PickDropPoints.tsx Normal file
View File

@ -0,0 +1,54 @@
import React, { useRef } from "react";
import * as THREE from "three";
import { ThreeEvent } from "@react-three/fiber";
interface PickDropProps {
position: number[];
modelUuid: string;
pointUuid: string;
actionType: "pick" | "drop";
actionUuid: string;
gltfScene: THREE.Group;
selectedPoint: THREE.Mesh | null;
handlePointerDown: (e: ThreeEvent<PointerEvent>) => void;
isSelected: boolean;
}
const PickDropPoints: React.FC<PickDropProps> = ({
position,
modelUuid,
pointUuid,
actionType,
actionUuid,
gltfScene,
selectedPoint,
handlePointerDown,
isSelected,
}) => {
const groupRef = useRef<THREE.Group>(null);
return (
<group
ref={groupRef}
position={
Array.isArray(position) && position.length === 3
? new THREE.Vector3(...position)
: new THREE.Vector3(0, 0, 0)
}
onPointerDown={(e) => {
e.stopPropagation(); // Important to prevent event bubbling
if (!isSelected) return;
handlePointerDown(e);
}}
userData={{ modelUuid, pointUuid, actionType, actionUuid }}
>
<primitive
object={gltfScene.clone()}
position={[0, 0, 0]} // Ensure this stays at origin
scale={[0.5, 0.5, 0.5]}
/>
</group>
);
};
export default PickDropPoints;

131
app/src/modules/simulation/ui/arm/useDraggableGLTF.ts Normal file
View File

@ -0,0 +1,131 @@
import { useRef } from "react";
import * as THREE from "three";
import { ThreeEvent, useThree } from "@react-three/fiber";
type OnUpdateCallback = (object: THREE.Object3D) => void;
export default function useDraggableGLTF(onUpdate: OnUpdateCallback) {
const { camera, gl, controls, scene } = useThree();
const activeObjRef = useRef<THREE.Object3D | null>(null);
const planeRef = useRef<THREE.Plane>(
new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
);
const offsetRef = useRef<THREE.Vector3>(new THREE.Vector3());
const initialPositionRef = useRef<THREE.Vector3>(new THREE.Vector3());
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
const handlePointerDown = (e: ThreeEvent<PointerEvent>) => {
e.stopPropagation();
let obj: THREE.Object3D | null = e.object;
// Traverse up until we find modelUuid in userData
while (obj && !obj.userData?.modelUuid) {
obj = obj.parent;
}
if (!obj) return;
// Disable orbit controls while dragging
if (controls) (controls as any).enabled = false;
activeObjRef.current = obj;
initialPositionRef.current.copy(obj.position);
// Get world position
const objectWorldPos = new THREE.Vector3();
obj.getWorldPosition(objectWorldPos);
// Set plane at the object's Y level
planeRef.current.set(new THREE.Vector3(0, 1, 0), -objectWorldPos.y);
// Convert pointer to NDC
const rect = gl.domElement.getBoundingClientRect();
pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
// Raycast to intersection
raycaster.setFromCamera(pointer, camera);
const intersection = new THREE.Vector3();
raycaster.ray.intersectPlane(planeRef.current, intersection);
// Calculate offset
offsetRef.current.copy(objectWorldPos).sub(intersection);
// Start listening for drag
gl.domElement.addEventListener("pointermove", handlePointerMove);
gl.domElement.addEventListener("pointerup", handlePointerUp);
};
const handlePointerMove = (e: PointerEvent) => {
if (!activeObjRef.current) return;
// Check if Shift key is pressed
const isShiftKeyPressed = e.shiftKey;
// Get the mouse position relative to the canvas
const rect = gl.domElement.getBoundingClientRect();
pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
// Update raycaster to point to the mouse position
raycaster.setFromCamera(pointer, camera);
// Create a vector to store intersection point
const intersection = new THREE.Vector3();
const intersects = raycaster.ray.intersectPlane(planeRef.current, intersection);
if (!intersects) return;
// Add offset for dragging
intersection.add(offsetRef.current);
console.log('intersection: ', intersection);
// Get the parent's world matrix if exists
const parent = activeObjRef.current.parent;
const targetPosition = new THREE.Vector3();
if (isShiftKeyPressed) {
console.log('isShiftKeyPressed: ', isShiftKeyPressed);
// For Y-axis only movement, maintain original X and Z
console.log('initialPositionRef: ', initialPositionRef);
console.log('intersection.y: ', intersection);
targetPosition.set(
initialPositionRef.current.x,
intersection.y,
initialPositionRef.current.z
);
} else {
// For free movement
targetPosition.copy(intersection);
}
// Convert world position to local if object is nested inside a parent
if (parent) {
parent.worldToLocal(targetPosition);
}
// Update object position
activeObjRef.current.position.copy(targetPosition);
};
const handlePointerUp = () => {
if (controls) (controls as any).enabled = true;
if (activeObjRef.current) {
// Pass the updated position to the onUpdate callback to persist it
onUpdate(activeObjRef.current);
}
gl.domElement.removeEventListener("pointermove", handlePointerMove);
gl.domElement.removeEventListener("pointerup", handlePointerUp);
activeObjRef.current = null;
};
return { handlePointerDown };
}

401
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@ -7,166 +7,267 @@ import { useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
interface VehicleAnimatorProps {
path: [number, number, number][];
handleCallBack: () => void;
currentPhase: string;
agvUuid: number;
agvDetail: any;
path: [number, number, number][];
handleCallBack: () => void;
reset: () => void;
currentPhase: string;
agvUuid: number;
agvDetail: any;
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail }: VehicleAnimatorProps) {
const { decrementVehicleLoad, vehicles } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { speed } = useAnimationPlaySpeed();
const { isReset } = useResetButtonStore();
const [restRotation, setRestingRotation] = useState<boolean>(true);
const [progress, setProgress] = useState<number>(0);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
const { scene } = useThree();
const progressRef = useRef<number>(0);
const movingForward = useRef<boolean>(true);
const completedRef = useRef<boolean>(false);
let startTime: number;
let pausedTime: number;
let fixedInterval: number;
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
const { decrementVehicleLoad, vehicles } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { speed } = useAnimationPlaySpeed();
const { isReset } = useResetButtonStore();
const [restRotation, setRestingRotation] = useState<boolean>(true);
const [progress, setProgress] = useState<number>(0);
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
const { scene } = useThree();
const progressRef = useRef<number>(0);
const movingForward = useRef<boolean>(true);
const completedRef = useRef<boolean>(false);
let startTime: number;
let pausedTime: number;
let fixedInterval: number;
useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path);
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
setCurrentPath(path);
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
setCurrentPath(path);
}
}, [currentPhase, path]);
useEffect(() => {
setProgress(0);
completedRef.current = false;
}, [currentPath]);
useFrame((_, delta) => {
const object = scene.getObjectByProperty('uuid', agvUuid);
if (!object || currentPath.length < 2) return;
if (isPaused) return;
let totalDistance = 0;
const distances = [];
for (let i = 0; i < currentPath.length - 1; i++) {
const start = new THREE.Vector3(...currentPath[i]);
const end = new THREE.Vector3(...currentPath[i + 1]);
const segmentDistance = start.distanceTo(end);
distances.push(segmentDistance);
totalDistance += segmentDistance;
}
let coveredDistance = progressRef.current;
let accumulatedDistance = 0;
let index = 0;
while (
index < distances.length &&
coveredDistance > accumulatedDistance + distances[index]
) {
accumulatedDistance += distances[index];
index++;
}
if (index < distances.length) {
const start = new THREE.Vector3(...currentPath[index]);
const end = new THREE.Vector3(...currentPath[index + 1]);
const segmentDistance = distances[index];
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
const rotationSpeed = 2.0;
const currentAngle = object.rotation.y;
let angleDifference = targetAngle - currentAngle;
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
const maxRotationStep = rotationSpeed * delta;
object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
const isAligned = Math.abs(angleDifference) < 0.01;
if (isAligned) {
progressRef.current += delta * (speed * agvDetail.speed);
coveredDistance = progressRef.current;
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
const position = start.clone().lerp(end, t);
object.position.copy(position);
}
}
if (progressRef.current >= totalDistance) {
if (restRotation) {
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) {
let objectRotation = agvDetail.point.rotation
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
setRestingRotation(false);
useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path);
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
setCurrentPath(path);
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
setCurrentPath(path);
}
return;
}
}, [currentPhase, path]);
useEffect(() => {
setProgress(0);
completedRef.current = false;
}, [currentPath]);
// useEffect(() => {
// console.log('isReset: ', isReset);
// if (isReset) {
// reset();
// setCurrentPath([]);
// setProgress(0);
// completedRef.current = false;
// decrementVehicleLoad(agvDetail.modelUuid, 0)
// }
// }, [isReset])
// useFrame((_, delta) => {
// const object = scene.getObjectByProperty('uuid', agvUuid);
// if (!object || currentPath.length < 2) return;
// if (isPaused) return;
// let totalDistance = 0;
// const distances = [];
// for (let i = 0; i < currentPath.length - 1; i++) {
// const start = new THREE.Vector3(...currentPath[i]);
// const end = new THREE.Vector3(...currentPath[i + 1]);
// const segmentDistance = start.distanceTo(end);
// distances.push(segmentDistance);
// totalDistance += segmentDistance;
// }
// let coveredDistance = progressRef.current;
// let accumulatedDistance = 0;
// let index = 0;
// while (
// index < distances.length &&
// coveredDistance > accumulatedDistance + distances[index]
// ) {
// accumulatedDistance += distances[index];
// index++;
// }
// if (index < distances.length) {
// const start = new THREE.Vector3(...currentPath[index]);
// const end = new THREE.Vector3(...currentPath[index + 1]);
// const segmentDistance = distances[index];
// const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
// const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
// const rotationSpeed = 2.0;
// const currentAngle = object.rotation.y;
// let angleDifference = targetAngle - currentAngle;
// if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
// if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
// const maxRotationStep = rotationSpeed * delta;
// object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
// const isAligned = Math.abs(angleDifference) < 0.01;
// if (isAligned) {
// progressRef.current += delta * (speed * agvDetail.speed);
// coveredDistance = progressRef.current;
// const t = (coveredDistance - accumulatedDistance) / segmentDistance;
// const position = start.clone().lerp(end, t);
// object.position.copy(position);
// }
// }
// if (progressRef.current >= totalDistance) {
// if (restRotation) {
// const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
// object.quaternion.slerp(targetQuaternion, delta * 2);
// const angleDiff = object.quaternion.angleTo(targetQuaternion);
// if (angleDiff < 0.01) {
// let objectRotation = agvDetail.point.rotation
// object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
// setRestingRotation(false);
// }
// return;
// }
// }
// if (progressRef.current >= totalDistance) {
// setRestingRotation(true);
// progressRef.current = 0;
// movingForward.current = !movingForward.current;
// setCurrentPath([]);
// handleCallBack();
// if (currentPhase === 'pickup-drop') {
// requestAnimationFrame(firstFrame);
// }
// }
// });
useEffect(() => {
if (isReset) {
reset();
setCurrentPath([]);
setProgress(0);
progressRef.current = 0;
completedRef.current = false;
movingForward.current = true;
setRestingRotation(false);
decrementVehicleLoad(agvDetail.modelUuid, 0);
}
}, [isReset]);
useFrame((_, delta) => {
// If reset is active, don't run anything in frame
if (isReset) return;
const object = scene.getObjectByProperty('uuid', agvUuid);
if (!object || currentPath.length < 2) return;
if (isPaused) return;
let totalDistance = 0;
const distances = [];
for (let i = 0; i < currentPath.length - 1; i++) {
const start = new THREE.Vector3(...currentPath[i]);
const end = new THREE.Vector3(...currentPath[i + 1]);
const segmentDistance = start.distanceTo(end);
distances.push(segmentDistance);
totalDistance += segmentDistance;
}
let coveredDistance = progressRef.current;
let accumulatedDistance = 0;
let index = 0;
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
accumulatedDistance += distances[index];
index++;
}
if (index < distances.length) {
const start = new THREE.Vector3(...currentPath[index]);
const end = new THREE.Vector3(...currentPath[index + 1]);
const segmentDistance = distances[index];
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
const currentAngle = object.rotation.y;
let angleDifference = targetAngle - currentAngle;
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
const rotationSpeed = 2.0;
const maxRotationStep = rotationSpeed * delta;
const rotationStep = Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
object.rotation.y += rotationStep;
const isAligned = Math.abs(angleDifference) < 0.01;
if (isAligned) {
progressRef.current += delta * (speed * agvDetail.speed);
coveredDistance = progressRef.current;
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
const position = start.clone().lerp(end, t);
object.position.copy(position);
}
}
if (progressRef.current >= totalDistance) {
if (restRotation) {
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) {
const objectRotation = agvDetail.point.rotation;
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
setRestingRotation(false);
}
} else {
setRestingRotation(true);
progressRef.current = 0;
movingForward.current = !movingForward.current;
setCurrentPath([]);
handleCallBack();
if (currentPhase === 'pickup-drop') {
requestAnimationFrame(firstFrame);
}
}
}
});
function firstFrame() {
const unLoadDuration = agvDetail.point.action.unLoadDuration;
const droppedMaterial = agvDetail.currentLoad;
fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
startTime = performance.now();
step(droppedMaterial);
}
if (progressRef.current >= totalDistance) {
setRestingRotation(true);
progressRef.current = 0;
movingForward.current = !movingForward.current;
setCurrentPath([]);
handleCallBack();
if (currentPhase === 'pickup-drop') {
requestAnimationFrame(firstFrame);
}
function step(droppedMaterial: number) {
const elapsedTime = (performance.now() - startTime) * speed;
if (elapsedTime >= fixedInterval) {
let droppedMat = droppedMaterial - 1;
decrementVehicleLoad(agvDetail.modelUuid, 1);
if (droppedMat === 0) return;
startTime = performance.now();
requestAnimationFrame(() => step(droppedMat));
} else {
requestAnimationFrame(() => step(droppedMaterial));
}
}
});
function firstFrame() {
const unLoadDuration = agvDetail.point.action.unLoadDuration;
const droppedMaterial = agvDetail.currentLoad;
fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
startTime = performance.now();
step(droppedMaterial);
}
function step(droppedMaterial: number) {
const elapsedTime = performance.now() - startTime;
if (elapsedTime >= fixedInterval) {
console.log('fixedInterval: ', fixedInterval);
console.log('elapsedTime: ', elapsedTime);
let droppedMat = droppedMaterial - 1;
decrementVehicleLoad(agvDetail.modelUuid, 1);
if (droppedMat === 0) return;
startTime = performance.now();
requestAnimationFrame(() => step(droppedMat));
} else {
requestAnimationFrame(() => step(droppedMaterial));
}
}
return (
<>
{currentPath.length > 0 && (
return (
<>
<Line points={currentPath} color="blue" lineWidth={3} />
{currentPath.map((point, index) => (
<mesh key={index} position={point}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="red" />
</mesh>
))}
{currentPath.length > 0 && (
<>
<Line points={currentPath} color="blue" lineWidth={3} />
{currentPath.map((point, index) => (
<mesh key={index} position={point}>
<sphereGeometry args={[0.1, 16, 16]} />
<meshStandardMaterial color="red" />
</mesh>
))}
</>
)}
</>
)}
</>
);
);
}
export default VehicleAnimator;

207
app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
View File

@ -3,121 +3,120 @@ import VehicleAnimator from '../animator/vehicleAnimator';
import * as THREE from 'three';
import { NavMeshQuery } from '@recast-navigation/core';
import { useNavMesh } from '../../../../../store/store';
import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
function VehicleInstance({ agvDetail }: any) {
const { navMesh } = useNavMesh();
const { isPlaying } = usePlayButtonStore();
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
const { navMesh } = useNavMesh();
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { isReset } = useResetButtonStore();
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
const computePath = useCallback(
(start: any, end: any) => {
try {
const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return (
segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
);
} catch {
return [];
}
},
[navMesh]
);
const computePath = useCallback(
(start: any, end: any) => {
try {
const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return (
segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
);
} catch {
return [];
}
},
[navMesh]
);
function vehicleStatus(modelid: string, status: string) {
// console.log(`AGV ${modelid}: ${status}`);
}
function vehicleStatus(modelid: string, status: string) {
// console.log(`AGV ${modelid}: ${status}`);
}
function reset() {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setPath([]);
setCurrentPhase('stationed')
}
useEffect(() => {
if (isPlaying) {
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
const toPickupPath = computePath(
new THREE.Vector3(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]),
agvDetail.point.action.pickUpPoint
);
setPath(toPickupPath);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('stationed-pickup');
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
return;
} else if (
!agvDetail.isActive &&
agvDetail.state === 'idle' &&
currentPhase === 'picking'
) {
setTimeout(() => {
incrementVehicleLoad(agvDetail.modelUuid, 2);
}, 5000);
useEffect(() => {
if (isPlaying) {
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
const toPickupPath = computePath(
new THREE.Vector3(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]),
agvDetail.point.action.pickUpPoint
);
setPath(toPickupPath);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('stationed-pickup');
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
return;
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'picking') {
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
const toDrop = computePath(
agvDetail.point.action.pickUpPoint,
agvDetail.point.action.unLoadPoint
);
setPath(toDrop);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('pickup-drop');
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
setTimeout(() => {
incrementVehicleLoad(agvDetail.modelUuid, 2);
}, 5000);
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
const toDrop = computePath(
agvDetail.point.action.pickUpPoint,
agvDetail.point.action.unLoadPoint
);
setPath(toDrop);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('pickup-drop');
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
}
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'dropping' && agvDetail.currentLoad === 0) {
const dropToPickup = computePath(
agvDetail.point.action.unLoadPoint,
agvDetail.point.action.pickUpPoint
);
setPath(dropToPickup);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('drop-pickup');
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
}
}
} else if (
!agvDetail.isActive &&
agvDetail.state === 'idle' &&
currentPhase === 'dropping' &&
agvDetail.currentLoad === 0
) {
const dropToPickup = computePath(
agvDetail.point.action.unLoadPoint,
agvDetail.point.action.pickUpPoint
);
setPath(dropToPickup);
setVehicleActive(agvDetail.modelUuid, true);
setVehicleState(agvDetail.modelUuid, 'running');
setCurrentPhase('drop-pickup');
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
}
}
}, [vehicles, currentPhase, path, isPlaying]);
}, [vehicles, currentPhase, path, isPlaying, isReset]);
function handleCallBack() {
if (currentPhase === 'stationed-pickup') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
setPath([]);
} else if (currentPhase === 'pickup-drop') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('dropping');
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
setPath([]);
} else if (currentPhase === 'drop-pickup') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
setPath([]);
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
function handleCallBack() {
if (currentPhase === 'stationed-pickup') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
setPath([]);
} else if (currentPhase === 'pickup-drop') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('dropping');
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
setPath([]);
} else if (currentPhase === 'drop-pickup') {
setVehicleActive(agvDetail.modelUuid, false);
setVehicleState(agvDetail.modelUuid, 'idle');
setCurrentPhase('picking');
setPath([]);
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
}
}
}
return (
<>
<VehicleAnimator
path={path}
handleCallBack={handleCallBack}
currentPhase={currentPhase}
agvUuid={agvDetail?.modelUuid}
agvDetail={agvDetail}
/>
</>
);
return (
<>
<VehicleAnimator
path={path}
handleCallBack={handleCallBack}
currentPhase={currentPhase}
agvUuid={agvDetail?.modelUuid}
agvDetail={agvDetail}
reset={reset}
/>
</>
);
}
export default VehicleInstance;

17
app/src/modules/simulation/vehicle/vehicles.tsx
View File

@ -28,8 +28,8 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
unLoadPoint: { x: 105.71483985219794, y: 0, z: 28.66321267938962 },
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
triggers: [
{
triggerUuid: "trig-001",
@ -71,8 +71,8 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 10,
loadCapacity: 2,
pickUpPoint: { x: 90, y: 0, z: 28 },
unLoadPoint: { x: 20, y: 0, z: 10 },
pickUpPoint: { position: { x: 90, y: 0, z: 28 }, rotation: { x: 0, y: 0, z: 0 } },
unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
triggers: [
{
triggerUuid: "trig-001",
@ -95,7 +95,8 @@ function Vehicles() {
]
}
}
}, {
},
{
modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
modelName: "forklift",
position: [98.85729337188162, 0, 38.36616546567653],
@ -113,8 +114,8 @@ function Vehicles() {
actionType: "travel",
unLoadDuration: 15,
loadCapacity: 5,
pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
unLoadPoint: { x: 20, y: 0, z: 10 },
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
triggers: [
{
triggerUuid: "trig-001",
@ -148,7 +149,7 @@ function Vehicles() {
}, [])
useEffect(() => {
console.log('vehicles: ', vehicles);
// console.log('vehicles: ', vehicles);
}, [vehicles])

8
app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@ -304,8 +304,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
<EyeIcon
fill={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "var(--primary-color)"
: "var(--text-color)"
? "var(--icon-default-color-active)"
: "var(--icon-default-color)"
}
/>
</div>
@ -341,8 +341,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
<LockIcon
fill={
selectedZone.lockedPanels.includes(side)
? "var(--primary-color)"
: "var(--text-color)"
? "var(--icon-default-color-active)"
: "var(--icon-default-color)"
}
/>
</div>

21
app/src/pages/Project.tsx
View File

@ -1,11 +1,10 @@
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";
import ModuleToggle from "../components/ui/ModuleToggle";
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
import Tools from "../components/ui/Tools";
// import Scene from "../modules/scene/scene";
import {
useSocketStore,
useFloorItems,
@ -20,9 +19,9 @@ import { usePlayButtonStore } from "../store/usePlayButtonStore";
import MarketPlace from "../modules/market/MarketPlace";
import LoadingPage from "../components/templates/LoadingPage";
import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import RenderOverlay from "../components/templates/Overlay";
import MenuBar from "../components/ui/menu/menu";
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
import { useSelectedUserStore } from "../store/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
const Project: React.FC = () => {
let navigate = useNavigate();
@ -38,10 +37,10 @@ const Project: React.FC = () => {
setFloorItems([]);
setWallItems([]);
setZones([]);
setActiveModule('builder')
setActiveModule("builder");
const email = localStorage.getItem("email");
if (email) {
const Organization = email!.split("@")[1].split(".")[0];
const Organization = email.split("@")[1].split(".")[0];
useSocketStore.getState().initializeSocket(email, Organization);
const name = localStorage.getItem("userName");
if (Organization && name) {
@ -52,13 +51,20 @@ const Project: React.FC = () => {
navigate("/");
}
}, []);
const { isPlaying } = usePlayButtonStore();
const { toggleThreeD } = useThreeDStore();
const { selectedUser } = useSelectedUserStore();
return (
<div className="project-main">
{/* <div className="analysis">
<ProductionCapacity />
<ThroughputSummary />
<ROISummary />
</div> */}
<KeyPressListener />
{loadingProgress && <LoadingPage progress={loadingProgress} />}
{loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
{!isPlaying && (
<>
{toggleThreeD && <ModuleToggle />}
@ -73,6 +79,7 @@ const Project: React.FC = () => {
<RealTimeVisulization />
{activeModule !== "market" && <Tools />}
{isPlaying && activeModule === "simulation" && <SimulationPlayer />}
{selectedUser && <FollowPerson />}
</div>
);
};

30
app/src/store/useCollabStore.ts Normal file
View File

@ -0,0 +1,30 @@
import { create } from 'zustand';
interface SelectedUser {
color: string;
name: string;
location?: {
position: {
x: number;
y: number;
z: number;
};
rotation: {
x: number;
y: number;
z: number;
};
}
}
interface SelectedUserStore {
selectedUser: SelectedUser | null;
setSelectedUser: (user: SelectedUser) => void;
clearSelectedUser: () => void;
}
export const useSelectedUserStore = create<SelectedUserStore>((set) => ({
selectedUser: null,
setSelectedUser: (user) => set({ selectedUser: user }),
clearSelectedUser: () => set({ selectedUser: null }),
}));

110
app/src/styles/abstracts/variables.scss
View File

@ -10,63 +10,97 @@ $text-color: #2b3344;
$text-disabled: #b7b7c6;
$input-text-color: #595965;
$highlight-text-color: #6f42c1;
$text-button-color: #f3f3fd;
// ---------- dark mode ----------
$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-secondary: #FCFDFD4D;
$background-color: linear-gradient(-45deg, #fcfdfdcc 0%, #fcfdfd99 100%);
$background-color-solid: #fcfdfd;
$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-secondary-dark: #19191D99;
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
$background-color-solid-dark: #19191d;
$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-hover: #7f4ddb;
$icon-default-color-active: #f2f2f7;
// ---------- dark mode ----------
$icon-default-color-dark: #6f42c1;
$icon-default-color-hover-dark: #7f4ddb;
$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;
@ -74,15 +108,15 @@ $accent-color-dark: #c4abf1;
$highlight-accent-color: #e0dfff;
$highlight-accent-color-dark: #403e6a;
$background-color: #fcfdfd;
$background-color-dark: #19191d;
$background-color-secondary: #e1e0ff80;
$background-color-secondary-dark: #39394f99;
// $background-color: #fcfdfd;
// $background-color-dark: #19191d;
// $background-color-secondary: #e1e0ff80;
// $background-color-secondary-dark: #39394f99;
$background-color-gray: #f3f3f3;
$background-color-gray-dark: #232323;
$border-color: #e0dfff;
$border-color-dark: #403e6a;
// $border-color: #e0dfff;
// $border-color-dark: #403e6a;
$shadow-color: #3c3c431a;
$shadow-color-dark: #8f8f8f1a;
@ -91,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;
@ -130,3 +169,4 @@ $border-radius-medium: 6px;
$border-radius-large: 12px;
$border-radius-circle: 50%;
$border-radius-extra-large: 20px;
$border-radius-xxx: 30px;

220
app/src/styles/base/base.scss
View File

@ -1,139 +1,161 @@
@use "../abstracts/variables" as *; // abstracts/variables.scss
@use "../abstracts/variables" as *;
// Light theme styles
[data-theme="light"] {
// Text and Input colors
--text-color: #{$text-color}; // Main text color for light theme
--text-disabled: #{$text-disabled}; // Disabled text color
--input-text-color: #{$input-text-color}; // Input field text color
// text colors
--text-color: #{$text-color};
--text-disabled: #{$text-disabled};
--text-button-color: #{$text-button-color};
--input-text-color: #{$input-text-color};
--highlight-text-color: #{$highlight-text-color};
// Accent and Highlight colors
--primary-color: #{$background-color}; // Primary color for light theme
--accent-color: #{$accent-color}; // Primary accent color for light theme
--highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
--accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
// background colors
--background-color: #{$background-color};
--background-color-solid: #{$background-color-solid};
--background-color-secondary: #{$background-color-secondary};
--background-color-accent: #{$background-color-accent};
--background-color-button: #{$background-color-button};
--background-color-drop-down: #{$background-color-drop-down};
--background-color-input: #{$background-color-input};
--background-color-input-focus: #{$background-color-input-focus};
--background-color-drop-down-gradient: #{$background-color-drop-down-gradient};
--background-color-selected: #{$background-color-selected};
--background-radial-gray-gradient: #{$background-radial-gray-gradient};
// border colors
--border-color: #{$border-color};
--input-border-color: #{$input-border-color};
--border-color-accent: #{$border-color-accent};
// highlight colors
--highlight-accent-color: #{$highlight-accent-color};
--highlight-secondary-color: #{$highlight-secondary-color};
// icon colors
--icon-default-color: #{$icon-default-color};
--icon-default-color-active: #{$icon-default-color-active};
// old colors
--accent-color: #{$accent-color};
--highlight-accent-color: #{$highlight-accent-color};
--accent-gradient-color: #{$acent-gradient};
--faint-gradient-color: #{$faint-gradient};
// Background colors
--background-color: #{$background-color}; // Main background color
--background-color-secondary: #{$background-color-secondary}; // Secondary background color
--background-color-gray: #{$background-color-gray}; // Secondary background color
// Border colors
--border-color: #{$border-color}; // Border color for light theme
// Shadow variables
--shadow-main-light: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
--background-color-gray: #{$background-color-gray};
--border-color: #{$border-color};
--shadow-main-light: #{$shadow-color};
--box-shadow-light: 0px 2px 4px var(--shadow-main-light);
--box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-light);
--font-inter: #{$font-inter};
--font-josefin-sans: #{$font-josefin-sans};
--font-poppins: #{$font-poppins};
--font-roboto: #{$font-roboto};
}
// Dark theme styles
[data-theme="dark"] {
// Text and Input colors
--text-color: #{$text-color-dark}; // Main text color for dark theme
--text-disabled: #{$text-disabled-dark}; // Disabled text color
--input-text-color: #{$input-text-color-dark}; // Input field text color
// text colors
--text-color: #{$text-color-dark};
--text-disabled: #{$text-disabled-dark};
--text-button-color: #{$text-button-color-dark};
--input-text-color: #{$input-text-color-dark};
--highlight-text-color: #{$highlight-text-color-dark};
// Accent and Highlight colors
--primary-color: #{$highlight-accent-color-dark};
--accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
--highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
--accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
// background colors
--background-color: #{$background-color-dark};
--background-color-solid: #{$background-color-solid-dark};
--background-color-secondary: #{$background-color-secondary-dark};
--background-color-accent: #{$background-color-accent-dark};
--background-color-button: #{$background-color-button-dark};
--background-color-drop-down: #{$background-color-drop-down-dark};
--background-color-input: #{$background-color-input-dark};
--background-color-input-focus: #{$background-color-input-focus-dark};
--background-color-drop-down-gradient: #{$background-color-drop-down-gradient-dark};
--background-color-selected: #{$background-color-selected-dark};
--background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
// border colors
--border-color: #{$border-color};
--input-border-color: #{$input-border-color-dark};
--border-color-accent: #{$border-color-accent-dark};
// highlight colors
--highlight-accent-color: #{$highlight-accent-color-dark};
--highlight-secondary-color: #{$highlight-secondary-color-dark};
// icon colors
--icon-default-color: #{$icon-default-color-dark};
--icon-default-color-active: #{$icon-default-color-active-dark};
// old colors
--accent-color: #{$accent-color-dark};
--highlight-accent-color: #{$highlight-accent-color-dark};
--accent-gradient-color: #{$acent-gradient-dark};
--faint-gradient-color: #{$faint-gradient-dark};
// Background colors
--background-color: #{$background-color-dark}; // Main background color
--background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
--background-color-gray: #{$background-color-gray-dark}; // Secondary background color
// Border colors
--border-color: #{$border-color-dark}; // Border color for dark theme
// Shadow variables
--shadow-main-dark: #{$shadow-color}; // Main shadow color
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
// Font families
--font-inter: #{$font-inter}; // Inter font family
--font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
--font-poppins: #{$font-poppins}; // Poppins font family
--font-roboto: #{$font-roboto}; // Roboto font family
--background-color-gray: #{$background-color-gray-dark};
--border-color: #{$border-color-dark};
--shadow-main-dark: #{$shadow-color};
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark);
--font-inter: #{$font-inter};
--font-josefin-sans: #{$font-josefin-sans};
--font-poppins: #{$font-poppins};
--font-roboto: #{$font-roboto};
}
// Root container styles
#root {
height: 100vh; // Full viewport height
width: 100vw; // Full viewport width
overflow: hidden; // Prevent scrollbars
background-color: var(--background-color-gray);
height: 100vh;
width: 100vw;
overflow: hidden;
background: var(--background-color-gray);
}
// Root overlay styles
#root-over {
position: fixed; // Fix overlay to the viewport
top: 0; // Align to the top
left: 0; // Align to the left
z-index: 99; // Ensure high stacking order
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
body {
background: var(--background-color);
--font-size-tiny: #{$tiny};
--font-size-small: #{$small};
--font-size-regular: #{$regular};
--font-size-large: #{$large};
--font-size-xlarge: #{$xlarge};
--font-size-xxlarge: #{$xxlarge};
--font-size-xxxlarge: #{$xxxlarge};
--font-weight-regular: #{$regular-weight};
--font-weight-medium: #{$medium-weight};
--font-weight-bold: #{$bold-weight};
/* Font Sizes */
--font-size-tiny: #{$tiny}; // Extra small text
--font-size-small: #{$small}; // Small text
--font-size-regular: #{$regular}; // Default text size
--font-size-large: #{$large}; // Large text size
--font-size-xlarge: #{$xlarge}; // Extra large text size
--font-size-xxlarge: #{$xxlarge}; // Double extra large text size
--font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size
/* Font Weights */
--font-weight-regular: #{$regular-weight}; // Regular font weight
--font-weight-medium: #{$medium-weight}; // Medium font weight
--font-weight-bold: #{$bold-weight}; // Bold font weight
// colors
--color1: #{$color1};
--color2: #{$color2};
--color3: #{$color3};
--color4: #{$color4};
--color5: #{$color5};
}
/* Apply custom scrollbar styles globally */
::-webkit-scrollbar {
width: 8px;
/* Width of the scrollbar */
height: 8px;
/* Height for horizontal scrollbars */
width: 0px;
height: 0px;
}
::-webkit-scrollbar-track {
background: transparent;
/* Background of the scrollbar track */
border-radius: 4px;
/* Rounded corners */
}
::-webkit-scrollbar-thumb {
background: var(--accent-color);
/* Scrollbar handle color */
background: var(--background-color-button);
border-radius: 4px;
/* Rounded corners */
border: 2px solid var(--primary-color);
/* Padding around the scrollbar handle */
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
/* Handle color on hover */
background: var(--background-color-button);
}
::-webkit-scrollbar-corner {
background: transparent;
/* Remove corner styling for scrollable containers */
}

10
app/src/styles/base/global.scss
View File

@ -1,5 +1,11 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
section, .section{
padding: 12px;
padding: 4px;
outline: 1px solid var(--border-color);
border-radius: 16px;
outline-offset: -1px;
border-radius: #{$border-radius-large};
background: var(--background-color);
margin: 4px 0;
}

318
app/src/styles/components/analysis/ROISummary.scss Normal file
View File

@ -0,0 +1,318 @@
.roiSummary-container {
.roiSummary-wrapper {
background-color: var(--background-color);
.product-info {
display: flex;
}
.playBack {
display: flex;
background-color: var(--background-color);
border-radius: 12px;
padding: 6px;
.info {
span {
font-size: var(--font-size-xlarge);
&:first-child {
color: #31C756;
}
&:last-child {
color: var(--text-color);
}
}
}
}
.roi-details {
display: flex;
align-items: center;
gap: 12px;
.progress-wrapper {
width: 250px;
display: flex;
flex-direction: column;
gap: 6px;
.content {
display: flex;
flex-direction: column;
gap: 3px;
align-items: center;
.key {
font-size: var(--font-size-xlarge);
color: var(--accent-color);
}
}
}
.roi-progress {
width: 100%;
}
.metrics {
display: flex;
flex-direction: column;
gap: 6px;
.metric-item {
width: 100%;
border-radius: 6px;
border: 1px solid #00FF56;
background: #436D51;
display: flex;
flex-direction: column;
padding: 4px 6px;
&:last-child {
align-items: center;
}
.metric-label {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metric-value {
text-align: center;
line-height: 20px;
}
}
.metric-wrapper {
display: flex;
gap: 6px;
.metric-item {
background-color: var(--background-color);
border: 1px solid var(--Grays-Gray-6, #F2F2F7);
}
}
}
}
.cost-breakdown {
background-color: var(--background-color);
border: 1px solid var(--text-disabled);
border-radius: 8px;
padding: 16px;
.breakdown-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 16px;
.section-wrapper {
display: flex;
gap: 4px;
align-items: center;
}
.section-number {
font-size: 20px;
color: #00aaff;
}
.section-title {
font-size: var(--font-size-regular);
color: var(--text-color);
}
.expand-icon {
font-size: 16px;
color: var(--text-color);
cursor: pointer;
transform: rotate(90deg);
transition: transform 0.2s linear;
}
.expand-icon.open {
transform: rotate(0deg);
}
}
.breakdown-table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
th,
td {
padding: 8px;
text-align: left;
border-top: 1px solid var(--text-disabled);
border-bottom: 1px solid var(--text-disabled);
}
th:first-child,
td:first-child {
border-left: 1px solid var(--text-disabled);
}
th:last-child,
td:last-child {
border-right: 1px solid var(--text-disabled);
}
th {
background-color: var(--background-color);
color: #333;
}
.total-row,
.net-profit-row {
font-weight: bold;
color: #333;
}
}
}
.tips-section {
background-color: var(--background-color);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
.tip-header {
display: flex;
align-items: center;
.tip-title {
color: var(--text-color);
font-weight: 600;
}
}
.tip-description {
span {
font-size: var(--font-size-xlarge);
color: #34C759;
&:first-child {
color: #34C759;
}
&:nth-child(2) {
color: #488EF6;
}
}
}
}
.get-tips-button {
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
margin-top: 8px;
display: inline-block;
display: flex;
justify-content: flex-end;
background: none;
.btn {
background-color: var(--accent-color);
color: var(--background-color);
padding: 4px 6px;
border-radius: 5px;
display: inline-block;
font-size: 14px;
text-align: center;
}
}
}
.semi-circle-wrapper {
width: 100%;
height: 125px;
overflow-y: hidden;
position: relative;
}
.semi-circle {
width: 100%;
height: 250px;
border-radius: 50%;
position: relative;
transition: background 0.5s ease;
}
.progress-cover {
position: absolute;
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
background-color: var(--background-color);
border-radius: 50%;
}
.label-wrapper {
.label {
font-size: var(--font-size-xxxlarge);
}
position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%, 0%);
font-weight: bold;
font-size: 1.2rem;
color: #333;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
// Breakdown Table Open/Close Logic
.breakdown-table-wrapper {
&.closed {
max-height: 0;
padding: 0;
}
&.open {
max-height: 500px;
}
.breakdown-table {
width: 100%;
border-collapse: collapse;
th,
td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.total-row {
background-color: #f4f4f4;
font-weight: bold;
}
.net-profit-row {
background-color: #dff0d8;
font-weight: bold;
}
}
}

277
app/src/styles/components/analysis/analysis.scss Normal file
View File

@ -0,0 +1,277 @@
.analysis {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: start;
width: 100%;
height: 100vh;
// pointer-events: none;k
z-index: 10000;
.analysis-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
}
.analysis-card {
min-width: 333px;
background: var(--background-color);
border-radius: 20px;
padding: 8px;
.analysis-card-wrapper {
background: var(--background-color);
border-radius: 14px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
.card-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.main-header {
line-height: 20px;
font-size: var(--font-size-regular);
}
}
.process-container {
display: flex;
flex-direction: column;
.throughput-value {
font-size: 1rem;
.value {
font-weight: bold;
font-size: 1.5rem;
}
}
.progress-bar-wrapper {
display: flex;
gap: 8px;
margin-top: 6px;
}
.progress-bar {
position: relative;
width: 36px;
height: 4px;
border-radius: 13px;
overflow: hidden;
background: #FBEBD7;
.bar-fill {
position: absolute;
height: 100%;
top: 0;
left: 0;
background: #FC9D2F;
border-radius: 13px;
}
.bar-fill.full {
width: 100%;
}
.bar-fill.partial {
width: 0; // inline style will override this
}
}
}
.metrics-section {
padding-top: 16px;
border-top: 1px solid var(--background-color-gray);
.metric {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
margin-bottom: 8px;
.label {
color: var(--text-color);
}
.value {
font-weight: bold;
}
}
}
}
}
.throughoutSummary {
.throughoutSummary-wrapper {
.process-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
width: 100%;
.throughput-value {
font-size: var(--font-size-small);
flex: 1;
display: flex;
flex-direction: column;
.value {
color: var(--accent-color);
}
/* Let the text take available space */
}
.lineChart {
max-width: 200px;
height: 100px;
position: relative;
.assetUsage {
text-align: right;
position: absolute;
right: 0;
top: 0;
}
canvas {
background: transparent;
}
}
}
.footer {
display: flex;
gap: 16px; // Space between cards
margin-top: 24px;
.footer-card {
width: 100%;
background: var(--background-color-gray);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
&:first-child {
width: 85%;
}
.header {
font-size: var(--font-size-regular);
}
.value-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
gap: 6px;
}
}
.shiftUtilization {
.value-container {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
.value {
font-size: var(--font-size-xlarge);
}
.progress-wrapper {
width: 100%;
display: flex;
gap: 6px;
.progress {
border-radius: 6px;
height: 5px;
&:nth-child(1) {
background: #F3C64D;
}
&:nth-child(2) {
background: #67B3F4;
}
&:nth-child(3) {
background: #7981F5;
}
}
}
.progress-indicator {
display: flex;
justify-content: space-between;
width: 100%;
gap: 6px;
.shift-wrapper {
display: flex;
align-items: center;
gap: 5px;
/* Align items vertically */
&:nth-child(1) {
.indicator {
background: #F3C64D;
}
}
&:nth-child(2) {
.indicator {
background: #67B3F4;
}
}
&:nth-child(3) {
.indicator {
background: #7981F5;
}
}
label {
font-size: var(--font-size-small);
position: relative;
}
.indicator {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
}
}
}
}
}
}
}
}

4
app/src/styles/components/confirmationPopUp.scss
View File

@ -11,7 +11,7 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background-color: var(--background-color);
background: var(--background-color);
padding: 14px 12px;
border-radius: 6px;
@ -32,7 +32,7 @@
}
&:last-child {
background-color: #ffe3e0;
background: #ffe3e0;
color: #f65648;
}

134
app/src/styles/components/input.scss
View File

@ -5,17 +5,18 @@
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,
&:active {
outline: 1px solid var(--accent-color);
outline: 1px solid var(--border-color-accent);
background: var(--background-color-input-focus);
}
&:-webkit-autofill,
@ -27,29 +28,34 @@ input {
caret-color: var(--input-text-color);
// Background styles
background-color: var(--background-color) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
background: var(--background-color-solid) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--background-color-solid) inset !important;
}
// File input specific style adjustments
&::file-selector-button {
font-size: 14px;
color: var(--accent-color);
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
border: none;
outline: none;
border-radius: #{$border-radius-small};
padding: 2px;
cursor: pointer;
// Hover effect for the file button
&:hover {
color: var(--primary-color);
background-color: var(--accent-color);
}
}
}
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);
@ -67,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;
}
@ -93,8 +97,8 @@ input {
}
.active {
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
}
}
@ -102,17 +106,17 @@ input {
position: sticky;
top: 0;
padding: 8px 10px;
background: var(--background-color);
width: 100%;
z-index: 1;
.search-container {
@include flex-center;
width: 100%;
border-radius: #{$border-radius-small};
background-color: var(--background-color);
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;
@ -129,7 +133,7 @@ input {
font-weight: var(--font-weight-regular);
border: none;
outline: none;
background-color: transparent;
background: transparent;
padding-left: 36px;
}
@ -141,16 +145,17 @@ input {
height: 24px;
border: none;
cursor: pointer;
background-color: transparent;
background: transparent;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
}
}
.active {
border: 1px solid var(--accent-color);
background: var(--background-color-input-focus);
}
}
@ -166,7 +171,7 @@ input {
position: absolute;
left: 10px;
top: 12px;
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-small};
box-shadow: var(--box-shadow-medium);
z-index: 1;
@ -182,7 +187,7 @@ input {
gap: 2px;
&:hover {
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
}
.icon-container {
@ -197,11 +202,11 @@ input {
}
.selected {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
}
@ -226,13 +231,12 @@ input {
justify-content: space-between;
cursor: pointer;
border-radius: 6px;
background-color: var(--background-color);
}
.dropdown-options {
position: absolute;
width: 100%;
background-color: var(--primary-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-small};
z-index: 10;
@ -241,6 +245,7 @@ input {
left: 0;
top: 110%;
padding: 4px;
backdrop-filter: blur(8px);
.dropdown-search {
margin-bottom: 4px;
@ -253,8 +258,8 @@ input {
border-radius: #{$border-radius-small};
&:hover {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
color: var(--highlight-text-color);
background: var(--highlight-accent-color);
}
}
}
@ -318,7 +323,7 @@ input {
.dropdown-button {
width: 100%;
background-color: var(--background-color) !important;
background: var(--background-color) !important;
border: 1px solid var(--border-color) !important;
padding: 5px 10px;
@ -335,11 +340,11 @@ input {
transition: background-color 0.3s ease;
&:hover {
background-color: #333333;
background: #333333;
}
&.open {
background-color: #333333;
background: #333333;
}
}
@ -347,7 +352,7 @@ input {
position: absolute;
top: 110%;
right: -16px;
background-color: var(--background-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 5px;
box-shadow: #{$box-shadow-medium};
@ -412,7 +417,7 @@ input {
transition: background-color 0.3s ease;
&:hover {
background-color: var(--background-color);
background: var(--background-color);
}
}
@ -435,12 +440,12 @@ input {
}
&:hover {
background-color: var(--background-color);
background: var(--background-color);
}
&.open {
color: var(--accent-color);
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
.icon {
@ -472,20 +477,20 @@ input {
}
.check-box {
height: 22px;
width: 44px;
background: var(--background-color-secondary);
height: 24px;
width: 38px;
background: var(--background-color);
border-radius: #{$border-radius-large};
position: relative;
cursor: pointer;
.check-box-style {
position: absolute;
height: 18px;
width: 18px;
height: 20px;
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;
}
@ -523,7 +528,7 @@ input {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--primary-color);
background: var(--background-color-accent);
border-radius: #{$border-radius-circle};
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
@ -597,19 +602,19 @@ input {
cursor: not-allowed;
&::-webkit-slider-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
outline: 4px solid var(--text-disabled);
outline: -4px;
}
&::-moz-range-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
}
&::-ms-thumb {
background: var(--primary-color);
background: var(--background-color-accent);
box-shadow: none;
}
@ -644,14 +649,10 @@ input {
padding: 2px 32px;
border: none;
border-radius: #{$border-radius-large};
color: var(--text-disabled);
background: var(--accent-color);
color: var(--text-color);
background: var(--background-color-button);
transition: all 0.2s;
cursor: pointer;
&:hover {
color: var(--primary-color);
}
}
}
@ -710,11 +711,6 @@ input {
line-height: 12px;
text-align: center;
border-radius: #{$border-radius-small};
&:hover {
background: var(--accent-color);
color: var(--primary-color);
}
}
}
}
@ -722,8 +718,8 @@ input {
.invite-button {
padding: 4px 12px;
border-radius: #{$border-radius-large};
background: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-accent);
color: var(--text-button-color);
}
.multi-email-invite-input.active {
@ -740,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);
@ -770,7 +766,7 @@ input {
width: 100%;
height: 100%;
border-radius: #{$border-radius-small};
background-color: var(--background-color-gray);
background: var(--background-color-gray);
}
}
}

10
app/src/styles/components/lists.scss
View File

@ -30,8 +30,6 @@
}
.list-wrapper {
.no-item {
padding: 12px;
}
@ -41,7 +39,6 @@
// margin-left: 10px;
overflow: hidden;
.list-item {
@include flex-space-between;
width: 100%;
@ -67,7 +64,7 @@
}
.active {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--primary-color);
}
}
@ -75,7 +72,6 @@
.asset-list {
border-left: 2px solid var(--border-color);
margin-left: 20px
margin-left: 20px;
}
}
}

39
app/src/styles/components/marketPlace/marketPlace.scss
View File

@ -5,28 +5,28 @@
height: 100vh;
width: 100vw;
z-index: #{$z-index-marketplace};
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
position: absolute;
left: 0;
top: 0;
padding: 100px 50px;
padding-bottom: 32px;
backdrop-filter: blur(6px);
.marketplace-container {
position: relative;
padding: 20px 2px;
height: 100%;
background-color: var(--background-color);
background: var(--background-color);
box-shadow: #{$box-shadow-medium};
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-xxx};
outline: 1px solid var(--border-color);
backdrop-filter: blur(16px);
}
.marketPlace {
width: 100%;
height: 100%;
overflow: auto;
padding-bottom: 60px;
display: flex;
flex-direction: column;
gap: 24px;
@ -83,12 +83,18 @@
}
}
}
.cards-container-wrapper{
position: relative;
height: calc(100% - 60px);
padding: 0px 10px;
}
.cards-container-container {
padding: 0px 20px;
display: flex;
padding: 0 10px;
flex-direction: column;
gap: 6px;
height: 100%;
overflow: auto;
.header {
color: var(--text-color);
@ -107,7 +113,8 @@
border-radius: 18px;
padding: 12px;
box-shadow: 0px 2px 10.5px 0px #0000000d;
border: 1px solid var(--background-accent-transparent, #e0dfff80);
background: var(--background-color);
border: 1px solid var(--border-color);
position: relative;
display: flex;
flex-direction: column;
@ -124,7 +131,7 @@
height: 30px;
border-radius: 10px;
padding: 5px;
background-color: var(--accent-color);
background: var(--accent-color);
}
.image-container {
@ -193,11 +200,11 @@
.buy-now-button {
width: 100%;
background-color: var(--background-color-secondary);
background: var(--background-color-button);
border-radius: $border-radius-extra-large;
padding: 8px 0;
@include flex-center;
color: var(--accent-color);
color: var(--text-button-color);
&:hover {
cursor: pointer;
@ -220,7 +227,7 @@
.assetPreview {
width: 100%;
height: 100%;
background-color: var(--background-color);
background: var(--background-color);
display: flex;
gap: 12px;
overflow: hidden;
@ -262,7 +269,7 @@
border-radius: 50%;
font-weight: var(--font-weight-bold);
color: var(--background-color);
background-color: var(--accent-color);
background: var(--accent-color);
}
.organization-details {
@ -327,7 +334,7 @@
display: block;
width: 2px;
height: 12px;
background-color: #ccc;
background: #ccc;
}
}
@ -363,7 +370,7 @@
}
&:last-child {
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--background-color);
}
}

37
app/src/styles/components/menu/menu.scss
View File

@ -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);
@ -36,11 +52,12 @@
top: 32px;
left: 0;
z-index: 5;
background-color: var(--background-color);
background: var(--background-color);
color: var(--text-color);
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;
@ -73,7 +90,7 @@
position: absolute;
top: 0;
left: 100%;
background-color: var(--background-color);
background: var(--background-color);
min-width: 220px;
border-radius: 4px;
box-shadow: var(--box-shadow-light);
@ -95,7 +112,7 @@
rotate: -90deg;
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
span,
.menu-item-right span {
color: var(--accent-color);
@ -123,7 +140,7 @@
position: absolute;
left: 100%;
top: 0;
background-color: var(--background-color);
background: var(--background-color);
min-width: 200px;
border-radius: 0 4px 4px 4px;
box-shadow: var(--box-shadow-light);
@ -140,7 +157,7 @@
white-space: nowrap;
color: var(--text-color);
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
span {
color: var(--accent-color);
}
@ -154,7 +171,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
.menu-button {
color: var(--accent-color);
}
@ -164,7 +181,7 @@
.split {
width: 100%;
height: 1px;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
margin: 2px 0;
}
}

11
app/src/styles/components/moduleToggle.scss
View File

@ -18,7 +18,8 @@
padding: 4px 12px;
border-radius: #{$border-radius-extra-large};
box-shadow: var(--box-shadow-medium);
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(8px);
cursor: pointer;
overflow: hidden;
position: relative;
@ -37,7 +38,7 @@
left: 0;
width: 0%;
height: 100%;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
transition: width 0.2s;
border-radius: #{$border-radius-extra-large};
}
@ -49,15 +50,15 @@
}
.active {
cursor: default;
background-color: var(--accent-color);
background: var(--background-color-button);
&::after{
display: none;
}
&:hover {
background-color: var(--accent-color);
background: var(--background-color-button);
}
.module {
color: var(--highlight-accent-color);
color: var(--icon-default-color-active);
}
}
}

302
app/src/styles/components/simulation/simulation.scss
View File

@ -3,55 +3,151 @@
.simulation-player-wrapper {
position: fixed;
bottom: 32px;
bottom: 50px;
left: 50%;
z-index: 2;
transform: translate(-50%, 0);
width: 70%;
.simulation-player-container {
background-color: var(--background-color);
padding: 7px;
border-radius: 15px;
display: flex;
flex-direction: column;
gap: 8px;
.progresser-wrapper {
background-color: var(--highlight-accent-color);
padding: 4px 5px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 30px;
transition: height 0.2s linear;
}
.controls-container {
@include flex-center;
gap: 12px;
margin-bottom: 4px;
justify-content: space-between;
.production-details,
.controls-wrapper {
display: flex;
gap: 6px;
}
.production-details {
.production-wrapper {
display: flex;
align-items: center;
flex-direction: column;
gap: 6px;
.header {
display: flex;
flex-direction: row;
gap: 6px
}
.progress-wrapper {
width: 164px;
height: 8px;
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
.progress {
border-radius: 5px;
height: 100%;
background-color: var(--accent-color);
}
}
}
}
.simulation-button-container {
@include flex-center;
gap: 2px;
padding: 6px 8px;
min-width: 64px;
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-small};
cursor: pointer;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
path {
stroke: var(--accent-color);
}
}
}
}
.speed-control-container {
@include flex-center;
gap: 18px;
padding: 5px 16px;
background: var(--background-color);
// background: var(--background-color);
border-radius: #{$border-radius-medium};
box-sizing: #{$box-shadow-medium};
border-radius: 20px;
position: relative;
.min-value,
.max-value {
display: flex;
align-items: center;
font-weight: var(--font-weight-bold);
}
.slider-container {
width: 580px;
width: 100%;
max-width: 80vw;
height: 28px;
background: var(--background-color-gray);
// background: var(--background-color-gray);
border-radius: #{$border-radius-small};
position: relative;
padding: 4px 26px;
// padding: 4px 26px;
.speed-label {
font-size: var(--font-size-tiny);
position: absolute;
bottom: -4px;
&:first-child {
left: 0;
}
&:last-child {
right: 0;
}
}
&::after {
content: "";
background-color: #E5E5EA;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 100%;
height: 3px;
}
.custom-slider {
height: 100%;
width: 100%;
position: relative;
.slider-input {
position: absolute;
width: 100%;
@ -60,15 +156,17 @@
z-index: 3;
cursor: pointer;
}
.slider-handle {
position: absolute;
top: 50%;
width: 42px;
line-height: 20px;
text-align: center;
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-small};
transform: translateX(-50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
@ -81,34 +179,184 @@
border-radius: 1px;
top: 8px;
}
.marker.marker-10{
left: 10%;
.marker.marker-10 {
left: 10%;
}
.marker.marker-20{
left: 20%;
.marker.marker-20 {
left: 20%;
}
.marker.marker-30{
left: 30%;
.marker.marker-30 {
left: 30%;
}
.marker.marker-40{
left: 40%;
.marker.marker-40 {
left: 40%;
}
.marker.marker-50{
left: 50%;
.marker.marker-50 {
left: 50%;
}
.marker.marker-60{
left: 60%;
.marker.marker-60 {
left: 60%;
}
.marker.marker-70{
left: 70%;
.marker.marker-70 {
left: 70%;
}
.marker.marker-80{
left: 80%;
.marker.marker-80 {
left: 80%;
}
.marker.marker-90{
left: 90%;
.marker.marker-90 {
left: 90%;
}
}
}
.time-displayer {
display: flex;
justify-content: space-between;
height: auto;
opacity: 1;
// overflow: hidden;
transition: all 0.5s ease;
.start-time-wrappper,
.end-time-wrappper {
display: flex;
align-items: center;
gap: 12px;
}
.time-progresser {
width: 70%;
.timeline {
padding: 16px;
// background: #f5f3fa;
background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
border-radius: 30px;
display: flex;
align-items: center;
width: 100%;
height: 33px;
.label-dot-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
.label {
position: absolute;
top: -200%;
transform: translate(0, -0);
font-size: 12px;
color: #666;
white-space: nowrap;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #d3d3e2;
&.filled {
background-color: #8f5cf2;
border: 4px solid var(--accent-color);
}
}
}
.line {
flex-grow: 1;
height: 4px;
background-color: #d3d3e2;
margin: 0 4px;
&.filled {
background-color: #8f5cf2;
}
}
}
}
}
}
}
.processDisplayer {
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
padding: 14px 6px;
position: relative;
.process-player {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 3.946108102798462px;
height: 26px;
left: 86.81px;
border-radius: 14px;
border-width: 1px;
background: var(--accent-color, #6F42C1);
}
.process-wrapper {
display: flex;
// padding: 0px 16px;
.process {
height: 5px;
background-color: #4caf50;
color: white;
text-align: center;
line-height: 30px;
transition: width 0.3s ease;
}
}
}
.simulation-player-container.open {
.progresser-wrapper {
padding-top: 4px;
}
.time-displayer {
height: 0;
opacity: 0;
pointer-events: none;
display: none;
}
.processDisplayer {
padding: 0;
background: transparent;
.process-player {
width: 0;
display: none !important;
}
}
}

22
app/src/styles/components/templates.scss
View File

@ -0,0 +1,22 @@
.follow-person-container{
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
outline: 8px solid var(--user-color);
outline-offset: -3px;
border-radius: 16px;
.follower-name{
background: var(--user-color);
color: #FFFFFF;
padding: 4px 8px;
padding-top: 16px;
text-align: center;
position: absolute;
top: -10px;
left: 50%;
transform: translate(-50%, 0);
border-radius: 8px;
}
}

19
app/src/styles/components/tools.scss
View File

@ -13,14 +13,15 @@
border-radius: #{$border-radius-large};
width: fit-content;
transition: width 0.2s;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(8px);
z-index: #{$z-index-default};
.split {
height: 20px;
width: 2px;
border-radius: 2px;
background: var(--highlight-accent-color);
background: var(--text-disabled);
}
.draw-tools,
@ -48,10 +49,10 @@
}
.active {
background-color: var(--accent-color);
background: var(--background-color-accent);
&:hover {
background-color: var(--accent-color);
background: var(--background-color-accent);
}
}
}
@ -91,7 +92,7 @@
padding: 4px;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
path {
@ -117,7 +118,7 @@
@include flex-center;
padding: 3px;
border-radius: #{$border-radius-small};
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
gap: 2px;
position: relative;
@ -131,7 +132,7 @@
&::after {
content: "";
position: absolute;
background-color: var(--accent-color);
background: var(--accent-color);
left: 3px;
top: 3px;
height: 18px;
@ -161,7 +162,7 @@
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
cursor: pointer;
@include flex-center;
position: fixed;
@ -174,7 +175,7 @@
font-weight: 700;
&:hover {
font-weight: 500;
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--highlight-accent-color);
&::after{
animation: pulse 1s ease-out infinite;

20
app/src/styles/components/visualization/floating/common.scss
View File

@ -3,7 +3,7 @@
.throughput-wrapper,
.card {
background-color: var(--background-color);
background: var(--background-color);
box-shadow: var(--box-shadow-heavy);
@include flex-center;
flex-direction: column;
@ -105,7 +105,7 @@
}
.productionCapacity-wrapper {
background-color: var(--background-color);
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
@ -116,7 +116,7 @@
.headeproductionCapacityr-wrapper,
.bar-chart {
padding: 14px;
background-color: var(--background-color);
background: var(--background-color);
display: flex;
flex-direction: column;
gap: 6px;
@ -276,7 +276,7 @@
.icon {
width: 45px;
height: 45px;
background-color: var(--accent-color);
background: var(--accent-color);
display: flex;
justify-content: center;
align-items: center;
@ -289,7 +289,7 @@
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-color);
background: var(--background-color);
padding: 14px;
.header {
@ -307,7 +307,7 @@
.productivity-dashboard {
width: 100%;
background-color: var(--background-color);
background: var(--background-color);
color: white;
padding: 20px;
border-radius: 8px;
@ -324,7 +324,7 @@
}
.options {
background-color: #343b47;
background: #343b47;
width: 30px;
height: 30px;
display: flex;
@ -334,7 +334,7 @@
cursor: pointer;
&:hover {
background-color: #49505a;
background: #49505a;
}
}
}
@ -350,7 +350,7 @@
gap: 10px;
.metric {
background-color: #2c3e50;
background: #2c3e50;
padding: 15px;
border-radius: 4px;
@ -445,7 +445,7 @@
}
.scaleLabels {
background-color: var(--background-color);
background: var(--background-color);
box-shadow: var(--box-shadow-heavy);
display: flex;
justify-content: space-between;

2
app/src/styles/components/visualization/ui/styledWidgets.scss
View File

@ -43,7 +43,7 @@
.icon {
width: 16.95305824279785px;
height: 16.95305824279785px;
background-color: var(--accent-color);
background: var(--accent-color);
border-radius: 50%;
display: flex;
justify-content: center;

2
app/src/styles/layout/loading.scss
View File

@ -4,7 +4,7 @@
.loading-wrapper {
height: 100vh;
width: 100vw;
background: var(--background-color);
background: var(--background-color-solid);
.loading-container {
position: relative;
height: 100%;

13
app/src/styles/layout/popup.scss
View File

@ -5,13 +5,13 @@
height: 100vh;
width: 100vw;
background: var(--background-color-secondary);
backdrop-filter: blur(2px);
@include flex-center;
.collaboration-popup-container {
max-width: 50vw;
width: 460px;
background-color: var(--background-color);
width: 520px;
background: var(--background-color);
border-radius: #{$border-radius-large};
backdrop-filter: blur(8px);
.split {
width: 100%;
height: 1px;
@ -88,14 +88,14 @@
.your-name {
@include flex-center;
gap: 6px;
color: var(--accent-color);
color: var(--text-color);
.user-profile{
height: 24px;
width: 24px;
text-align: center;
line-height: 25px;
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-accent);
color: var(--text-color);
border-radius: #{$border-radius-circle};
}
}
@ -137,6 +137,7 @@
width: 100%;
object-fit: cover;
vertical-align: top;
pointer-events: none;
}
}
.user-name{

131
app/src/styles/layout/sidebar.scss
View File

@ -6,9 +6,10 @@
position: fixed;
top: 32px;
left: 8px;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(150px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
z-index: #{$z-index-tools};
@ -43,33 +44,40 @@
width: 32px;
min-height: 32px;
min-width: 32px;
border-radius: #{$border-radius-small};
border-radius: #{$border-radius-large};
&:hover {
background-color: var(--background-color-secondary);
outline: 1px solid var(--border-color);
outline-offset: -1px;
background: var(--background-color-drop-down);
}
}
.active {
background-color: 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;
@ -174,7 +182,7 @@
.stock {
padding: 13px 5px;
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
border-radius: 6.33px;
display: flex;
justify-content: space-between;
@ -231,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;
}
}
}
}
@ -243,15 +255,17 @@
position: fixed;
top: 32px;
right: 8px;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(150px);
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
box-shadow: #{$box-shadow-medium};
z-index: #{$z-index-tools};
.header-container {
@include flex-space-between;
padding: 10px;
padding-left: 16px;
width: 100%;
gap: 12px;
height: 52px;
@ -262,8 +276,8 @@
.share-button {
padding: 4px 12px;
color: var(--primary-color);
background-color: var(--accent-color);
color: var(--text-color);
background: var(--background-color-button);
font-weight: var(--font-weight-regular);
border-radius: #{$border-radius-large};
cursor: pointer;
@ -277,7 +291,7 @@
.split {
height: 20px;
width: 2px;
background: var(--background-color-secondary);
background: var(--text-disabled);
}
.users-container {
@ -320,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 {
@ -346,6 +360,8 @@
.sidebar-actions-container {
position: absolute;
left: -40px;
background: transparent;
overflow: visible;
.sidebar-action-list {
margin-bottom: 12px;
@ -353,26 +369,30 @@
height: 34px;
width: 34px;
border-radius: #{$border-radius-circle};
background: var(--primary-color);
background: var(--background-color-secondary);
backdrop-filter: blur(8px);
box-shadow: #{$box-shadow-medium};
outline: 1px solid var(--border-color);
outline-offset: -1px;
}
.active {
background: var(--accent-color);
background: var(--background-color-accent);
}
}
.sidebar-right-container {
min-height: 50vh;
padding-bottom: 12px;
padding: 8px;
position: relative;
overflow: auto;
.sidebar-right-content-container {
border-bottom: 1px solid var(--border-color);
height: calc(100% - 36px);
position: relative;
width: 320px;
width: 304px;
padding-bottom: 10px;
.no-event-selected {
color: #666;
padding: 1.8rem 1rem;
@ -414,7 +434,7 @@
button {
path {
stroke: var(--accent-color);
stroke-width: 1.5px;
strokeWidth: 1.5px;
}
color: var(--accent-color);
&:before {
@ -532,7 +552,7 @@
}
button {
background-color: transparent;
background: transparent;
box-shadow: none;
color: #5273eb;
padding: 6px;
@ -693,7 +713,7 @@
path {
stroke: var(--accent-color);
stroke-width: 1.5px;
strokeWidth: 1.5px;
}
&:hover {
@ -710,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;
@ -732,7 +752,7 @@
stroke: var(--primary-color);
}
&:disabled {
background-color: var(--text-disabled);
background: var(--text-disabled);
}
}
}
@ -841,7 +861,7 @@
transform: translateX(4px);
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
path {
stroke: var(--primary-color);
@ -899,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);
@ -983,11 +1002,8 @@
.zone-properties-container {
.header {
@include flex-space-between;
padding: 8px 12px;
border-top: 1px solid var(--highlight-accent-color);
border-bottom: 1px solid var(--highlight-accent-color);
color: var(--accent-color);
padding: 10px 12px;
color: var(--text-color);
.input-value {
color: inherit;
}
@ -995,7 +1011,6 @@
.input-container {
@include flex-center;
.remove-button {
@include flex-center;
height: 18px;
@ -1004,7 +1019,7 @@
border-radius: 8px 0 0 8px;
&:hover {
background-color: var(--accent-color);
background: var(--accent-color);
path {
stroke: var(--primary-color);
@ -1017,8 +1032,8 @@
.generate-report-button,
.button-save {
@include flex-center;
background-color: var(--accent-color);
color: var(--primary-color);
background: var(--background-color-button);
color: var(--text-button-color);
border-radius: #{$border-radius-large};
padding: 2px;
gap: 4px;
@ -1028,13 +1043,14 @@
margin-bottom: 8px;
}
.split {
height: 1px;
background: var(--highlight-accent-color);
margin: 8px;
}
.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;
@ -1046,11 +1062,9 @@
.inputs-container {
@include flex-space-between;
padding-bottom: 8px;
.input-container {
padding: 0 12px;
margin-top: 6px;
gap: 6px;
}
}
@ -1068,7 +1082,6 @@
.dropdown-header-container,
.dropdown-content-container {
padding: 6px 12px;
border-top: 1px solid var(--highlight-accent-color);
}
.input-range-container {
@ -1162,14 +1175,14 @@
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
gap: 8px;
padding: 10px 0;
.category {
width: 117px;
width: 121px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $bold-weight;
@ -1189,7 +1202,7 @@
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--circle-color, #000);
background: var(--circle-color, #000);
position: absolute;
top: 60%;
right: -10px;
@ -1270,7 +1283,7 @@
width: 117px;
height: 95px;
border-radius: #{$border-radius-small};
background-color: var(--background-color-gray);
background: var(--background-color-gray);
font-weight: $medium-weight;
position: relative;
overflow: hidden;
@ -1337,7 +1350,7 @@
width: 117px;
height: 95px;
border-radius: 3.59px;
background-color: var(--background-color-gray);
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight;

8
app/src/styles/layout/toast.scss
View File

@ -51,19 +51,19 @@
}
.toast.success {
background-color: #4caf50;
background: #4caf50;
}
.toast.error {
background-color: #f44336;
background: #f44336;
}
.toast.info {
background-color: #2196f3;
background: #2196f3;
}
.toast.warning {
background-color: #ff9800;
background: #ff9800;
}
@keyframes fadeIn {

2
app/src/styles/main.scss
View File

@ -25,6 +25,8 @@
@use 'components/simulation/simulation';
@use 'components/menu/menu';
@use 'components/confirmationPopUp';
@use 'components/analysis/analysis';
@use 'components/analysis/ROISummary.scss';
// layout
@use 'layout/loading';

8
app/src/styles/pages/dashboard.scss
View File

@ -43,7 +43,7 @@
padding: 12px 16px;
cursor: not-allowed;
color: var(--accent-color);
background-color: var(--background-color-secondary);
background: var(--background-color-secondary);
border-radius: #{$border-radius-large};
}
.side-bar-content-container {
@ -66,9 +66,9 @@
.active {
color: var(--accent-color);
font-weight: var(--font-weight-medium);
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
}
}
}
@ -161,7 +161,7 @@
width: 26px;
line-height: 26px;
text-align: center;
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--primary-color);
border-radius: #{$border-radius-circle};
}

35
app/src/styles/pages/home.scss
View File

@ -1,38 +1,3 @@
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: var(--primary-color);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: 282c34;
}
.App-link {
color: var(--button-action-color);
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navbar{
position: absolute;
top: 0;

60
app/src/styles/pages/realTimeViz.scss
View File

@ -3,7 +3,7 @@
// Main Container
.realTime-viz {
background-color: #131313;
background: #131313;
border-radius: 20px;
box-shadow: $box-shadow-medium;
width: calc(100% - (320px + 270px + 90px));
@ -66,7 +66,7 @@
.zone-wrapper {
display: flex;
background-color: var(--background-color);
background: var(--background-color);
position: absolute;
bottom: 0px;
left: 50%;
@ -84,7 +84,7 @@
}
.arrow {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--background-color);
}
@ -109,7 +109,7 @@
.zone {
width: auto;
background-color: var(--background-color);
background: var(--background-color);
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
@ -117,7 +117,7 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
color: var(--background-color);
// color: #FCFDFD !important;
}
@ -138,13 +138,13 @@
position: relative;
flex: 1;
height: 600px;
background-color: rgb(235, 235, 235);
background: rgb(235, 235, 235);
margin: 0 30px;
transition: height 0.3s ease, margin 0.3s ease;
.zone-wrapper {
display: flex;
background-color: rgba(224, 223, 255, 0.5);
background: rgba(224, 223, 255, 0.5);
position: absolute;
// bottom: 10px;
left: 50%;
@ -162,7 +162,7 @@
.zone {
width: auto;
background-color: $background-color;
background: $background-color;
border-radius: 6px;
padding: 4px 8px;
white-space: nowrap;
@ -170,7 +170,7 @@
transition: background-color 0.3s ease;
&.active {
background-color: var(--primary-color);
background: var(--primary-color);
color: var(--accent-color);
}
}
@ -203,7 +203,7 @@
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--background-color);
background: var(--background-color);
&::-webkit-scrollbar {
display: none;
@ -217,7 +217,7 @@
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
background-color: var(--background-color);
background: var(--background-color);
position: relative;
padding: 0 10px;
@ -237,7 +237,7 @@
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
background: var(--background-color);
z-index: 10;
display: flex;
@ -261,7 +261,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
width: 100%;
svg {
@ -353,7 +353,7 @@
border-radius: 8px;
box-shadow: var(--box-shadow-medium);
padding: 6px 0;
background-color: var(--background-color);
background: var(--background-color);
position: relative;
}
}
@ -377,7 +377,7 @@
.side-button-container {
position: absolute;
display: flex;
background-color: var(--background-color);
background: var(--background-color);
padding: 2px;
border-radius: 2px;
transition: transform 0.3s ease;
@ -398,7 +398,7 @@
}
.active {
background-color: var(--accent-color);
background: var(--accent-color);
}
&:hover {
@ -414,7 +414,7 @@
display: flex;
justify-content: center;
// align-items: center;
background-color: var(--accent-color);
background: var(--accent-color);
border: none;
color: var(--background-color);
border-radius: 4px;
@ -494,7 +494,7 @@
padding: 12px;
box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
background-color: white;
background: white;
position: absolute;
top: 20px;
right: -100%;
@ -530,7 +530,7 @@
left: 1px;
width: 10px;
height: 10px;
background-color: var(--primary-color);
background: var(--primary-color);
border-radius: 50%;
}
}
@ -584,7 +584,7 @@
}
.zone.active {
background-color: #007bff;
background: #007bff;
color: white;
}
@ -592,7 +592,7 @@
.icon {
// width: 25px !important;
// height: 25px !important;
// background-color: transparent;
// background: transparent;
}
.kebab {
@ -604,7 +604,7 @@
z-index: 10;
cursor: pointer;
@include flex-center;
background-color: transparent !important;
background: transparent !important;
}
.kebab-options {
@ -612,7 +612,7 @@
top: 18px;
right: 5px;
transform: translate(0px, 0);
background-color: var(--background-color);
background: var(--background-color);
z-index: 10;
display: flex;
@ -625,7 +625,7 @@
.icon {
width: 25px !important;
height: 25px !important;
background-color: transparent;
background: transparent;
}
.btn {
@ -643,7 +643,7 @@
}
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
width: 100%;
svg {
@ -662,6 +662,7 @@
}
.distance-line {
position: absolute;
border-style: dashed;
border-color: var(--accent-color);
@ -675,7 +676,7 @@
/* Label styles for displaying distance values */
.distance-label {
position: absolute;
background-color: var(--accent-color);
background: var(--accent-color);
color: white;
font-size: 12px;
padding: 2px 6px;
@ -769,7 +770,8 @@
.editWidgetOptions {
position: absolute;
background-color: var(--background-color);
background: var(--background-color);
backdrop-filter: blur(10px);
z-index: 3;
display: flex;
flex-direction: column;
@ -786,7 +788,7 @@
cursor: pointer;
&:hover {
background-color: var(--highlight-accent-color);
background: var(--highlight-accent-color);
color: var(--accent-color);
}
@ -794,7 +796,7 @@
color: #f65648;
&:hover {
background-color: #f657484d;
background: #f657484d;
color: #f65648;
}
}

2
app/src/styles/pages/userAuth.scss
View File

@ -9,7 +9,7 @@
padding: 20px;
color: var(--text-color);
height: 100vh;
background-color: var(--background-color);
background: var(--background-color);
position: relative;
z-index: 1;
.logo-icon {

5
app/src/styles/scene/scene.scss
View File

@ -14,9 +14,8 @@
// style
font-size: var(--font-size-large);
padding: 2px 8px;
background: var(--primary-color);
color: var(--accent-color);
outline: 1px solid var(--accent-color);
background: var(--background-color-accent);
color: var(--text-color);
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}

6
app/src/types/simulationTypes.d.ts vendored
View File

@ -44,8 +44,8 @@ interface VehiclePointSchema {
actionType: "travel";
unLoadDuration: number;
loadCapacity: number;
pickUpPoint: { x: number; y: number, z: number } | null;
unLoadPoint: { x: number; y: number, z: number } | null;
pickUpPoint: { position: { x: number; y: number, z: number }, rotation: { x: number; y: number, z: number } } | null;
unLoadPoint: { position: { x: number; y: number, z: number }, rotation: { x: number; y: number, z: number } } | null;
triggers: TriggerSchema[];
};
}
@ -134,7 +134,7 @@ interface ConveyorStatus extends ConveyorEventSchema {
isActive: boolean;
idleTime: number;
activeTime: number;
}
interface MachineStatus extends MachineEventSchema {

8
app/src/types/world/worldConstants.ts
View File

@ -189,10 +189,10 @@ export const firstPersonControls: Controls = {
maxDistance: 0, // Maximum distance from the target
maxPolarAngle: Math.PI, // Maximum polar angle
leftMouse: 1, // Mouse button for rotation (ROTATE)
forwardSpeed: 0.3, // Speed of forward movement
backwardSpeed: -0.3, // Speed of backward movement
leftSpeed: -0.3, // Speed of left movement
rightSpeed: 0.3, // Speed of right movement
forwardSpeed: 0.1, // Speed of forward movement
backwardSpeed: -0.1, // Speed of backward movement
leftSpeed: -0.1, // Speed of left movement
rightSpeed: 0.1, // Speed of right movement
};
export const thirdPersonControls: ThirdPersonControls = {

2
app/src/utils/shortcutkeys/handleShortcutKeys.ts
View File

@ -190,7 +190,7 @@ const KeyPressListener: React.FC = () => {
return () => {
window.removeEventListener("keydown", handleKeyPress);
};
}, [activeModule, toggleUI, toggleView]); // Dependencies to reapply effect if these values change
}, [activeModule, setActiveModule, setActiveSubTool, setActiveTool, setAddAction, setDeleteTool, setIsPlaying, setSelectedWallItem, setToggleThreeD, setToggleUI, setToggleView, setToolMode, toggleUI, toggleView]); // Dependencies to reapply effect if these values change
return null; // This component does not render any UI
};