From 99ef074765c573a89dce55c0636fc578ff7b03a2 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 27 May 2025 16:09:36 +0530 Subject: [PATCH] feat: add AisleProperties component with texture and type selection --- app/src/assets/image/aisleTypes/Arc.png | Bin 0 -> 1184 bytes app/src/assets/image/aisleTypes/Arrow.png | Bin 0 -> 646 bytes app/src/assets/image/aisleTypes/Arrows.png | Bin 0 -> 551 bytes app/src/assets/image/aisleTypes/Circle.png | Bin 0 -> 1857 bytes app/src/assets/image/aisleTypes/Dashed.png | Bin 0 -> 494 bytes .../assets/image/aisleTypes/Directional.png | Bin 0 -> 1044 bytes app/src/assets/image/aisleTypes/Dotted.png | Bin 0 -> 550 bytes app/src/assets/image/aisleTypes/Solid.png | Bin 0 -> 229 bytes .../layout/sidebarRight/SideBarRight.tsx | 266 +++++++++--------- .../properties/AisleProperties.tsx | 191 +++++++++++++ app/src/styles/layout/sidebar.scss | 135 ++++++--- 11 files changed, 425 insertions(+), 167 deletions(-) create mode 100644 app/src/assets/image/aisleTypes/Arc.png create mode 100644 app/src/assets/image/aisleTypes/Arrow.png create mode 100644 app/src/assets/image/aisleTypes/Arrows.png create mode 100644 app/src/assets/image/aisleTypes/Circle.png create mode 100644 app/src/assets/image/aisleTypes/Dashed.png create mode 100644 app/src/assets/image/aisleTypes/Directional.png create mode 100644 app/src/assets/image/aisleTypes/Dotted.png create mode 100644 app/src/assets/image/aisleTypes/Solid.png create mode 100644 app/src/components/layout/sidebarRight/properties/AisleProperties.tsx diff --git a/app/src/assets/image/aisleTypes/Arc.png b/app/src/assets/image/aisleTypes/Arc.png new file mode 100644 index 0000000000000000000000000000000000000000..74e72867b970a842e7a7c999b98fccc92514c82e GIT binary patch literal 1184 zcmV;R1Yi4!P)eqSObnWD-6AC2ZxPZe%04ft7&ZnvSe_#hoO|;6hgf6}N`r0}x?} zXec2O;wwW?LnNZ--*yrt(B5`Bofi8`PHtzWo#gy`9{1jsC?X;vA|fJU4-V16Kw^{G zVrHjF8AOf$dV|M)p$MB$s{&{v+s%UoA`I1Z;V`7xb-!Is2NWH{~^zeG^j z#yVS0$wR&8$PMFDDc$jz*`IK9gbe5B$piclp_}{t@Wj9c$GMNZe)#;WZhV~Nui|9f zaZky%2qRqly52mJ9fv>eeDBa&R-I3iO%W2D|E&`P=XoKMCwvidzJK&H!ahk^c0Nru zM9>T1?Q6wc0Lz6hLg@F8e&W#ohMdRbX`Fl_8zM|Q6#(t+M(+yxIttzca#`iw;`KZs z;Zy*=^H}f0={sapeBbdh65_nRS7)DH5;_^--!r(%ZEqcuo9p!N#Ku>=ii9|K0To?9 z1nuJ%-MqhoG)VBrd*pNY@5YNrh_L`~McW_*sPE8_|8X+%Kj(<|uDy}jCI@>;Ln{Et zR0Ne5LA>8rV0&Uv1pt|(LmQ{T*!x$NwkHNz0N_>xnQi*RRHbZ}2IvCy9U6*YoB}8S zaGMS)R)ivT0JA_AAUz2RByJ)><}_Fm=>}K>uxWgFkphgHNEq&GKWi%h>VPRg9R(bx zk)UuCOp6r5%MFVtgl**GLdY#nBSA$J*nu=)0TL7f0f3W8&})HR6d(<*G%jjnq=7~u zz)2*icqC>Ax&f1*kO%-oBLN#FOFS=-tO_D_h3Y$&H41n)*o|l;H1nfyNu(u`u_YEN zL`7)DdjM9T7Vy5HMj0F7udB(St`t5`Z8U$?+K}m-*mceLFB&z zi(Mqd?4rO-g(QU-I}xhw9-?wv#1Pt402xODo*t3$Vnk@M6M+{^M=ehNGYT}y@xzl$u@XVz&LCM$lF%6_q;rFvScxEuY@yKs7Xgt#R;+*D#t`aM02w`j yGSlHei-7Gk`rm0|`y*f~MMOkIL_|a!ME(M2^oF;*SE*nC0000!U8pjw!xMO6IqaA+XfpZD6STFgcOvE znI~?}duH42=n(Fk+`;j@_lviD}>OcNl^m|VdTg9JsiyH;7tevEi)RYIz}^0 ztlQvJ2xf(_exDIC9P;-P(8vagFd+nH+dKej{~*m0Ik!4sT4$#wM%4a6CPomKT=AHy gkst_yAP6q-3*?J}V--lCBme*a07*qoM6N<$g4(1Dp#T5? literal 0 HcmV?d00001 diff --git a/app/src/assets/image/aisleTypes/Arrows.png b/app/src/assets/image/aisleTypes/Arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..c025010e605903e269d7702d18603ddcf6b0510b GIT binary patch literal 551 zcmeAS@N?(olHy`uVBq!ia0vp^jv&mz1|<8wpL7LMoCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qc2d~#(wTUiL5}mJ)SO(Ar*{oXV`l%1&E+W)ShUb}w$xS~F0HrU&$aBCvaEW} zo$t)?Pxe+T)zrQ(tYL8K=r(v*m^5jZ3TuCoN7wIY<*z3)97GcjC9|j=eY^GHujgk| zZ0n5{dTA^U>`6ai!kyvvmSd*=qQD7ZRSV~rDA`T0@oJA&OJDvgU}YWa`uzKgjBHxn zN~TXRI@EY~^Ik)i_J9Ar9J-^h?$i2{egp{QW%7X9zmlr<#C;Rzi(9%CKv!^9;@?BI!q>C{!g%orm`QnB}^AFW67#2gWOdr>mdKI;Vst0B&5|`~Uy| literal 0 HcmV?d00001 diff --git a/app/src/assets/image/aisleTypes/Circle.png b/app/src/assets/image/aisleTypes/Circle.png new file mode 100644 index 0000000000000000000000000000000000000000..8be99299d6c9bb742190f2b7bfafdffa51e528db GIT binary patch literal 1857 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 O0000``W z$lZxy-8q?;Kn_c~qc2d~#(wTUiL5}m-JULvAr*{oZ|wCtoFKyX;QF*x8dDWIt}MO3 zK*7&Re?eTswsm^{bn>bg`M6|dVq)g(%6NaEiaFQa(cHXsS@$D(5pJ%3M?W7G3fTCz zB@cjR6BCxt~9wrbaxq*dpN{H?WLf21T! z;Onv3#WmkdbZ4__T#OO!k?aoD?^BC1J1Jl=&vN?ta^=~k8XXS)*W_N7&8ZNX`DMai zD}L2k&IKtSU#|!}C$V4N%cMPEeeB+nD=*^ge*X?pRkx3wdb#*MSZ(S> z?dPA&b!Qj-j6NY*%y5)l{cUuLYhHcX!Qy@TlfLoXys`V3-@|)T&x&fq@g>@rNw3t6 z{4?$HN=6moz28nOj;Pzvtns**K~JRg^6tZmQ|57ZbVMbt5E5c;)8Yx0SY;5BxZ+Xr z3Z^zKyEd(a6+#IsE~Oj@P)#@x(Au#}zFVdQ&MBb@0N!TdX8-^I literal 0 HcmV?d00001 diff --git a/app/src/assets/image/aisleTypes/Solid.png b/app/src/assets/image/aisleTypes/Solid.png new file mode 100644 index 0000000000000000000000000000000000000000..6bfb8dfa537c96cdeb65fedb23ab09d04bdfa24e GIT binary patch literal 229 zcmeAS@N?(olHy`uVBq!ia0vp^jv&mz1|<8wpL7LMjKx9jP7LeL$-D$|=6kw0hEy=V zz5bB1K|z4+Li8e4nKgz*j_zDK+)@XWPRuK?XRWRak8N>nU|?io;Sf-8z+ils<^5zWV94fk3A+c)I$ztaD0e0sw3jMKJ&X literal 0 HcmV?d00001 diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index 582b085..10de581 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -67,142 +67,142 @@ const SideBarRight: React.FC = () => { }`} >
- {toggleUIRight && !isVersionSaved && ( -
- {activeModule !== "simulation" && ( - + {toggleUIRight && ( + <> + {!isVersionSaved && ( +
+ {activeModule !== "simulation" && ( + + )} + {activeModule === "simulation" && ( + <> + + + + + )} +
)} - {activeModule === "simulation" && ( - <> - - - - + + {viewVersionHistory && ( +
+
+ +
+
)} -
+ + {/* process builder */} + {!viewVersionHistory && + subModule === "properties" && + activeModule !== "visualization" && + !selectedFloorItem && ( +
+
+ +
+
+ )} + {!viewVersionHistory && + subModule === "properties" && + activeModule !== "visualization" && + selectedFloorItem && ( +
+
+ +
+
+ )} + + {!viewVersionHistory && + subModule === "zoneProperties" && + (activeModule === "builder" || activeModule === "simulation") && ( +
+
+ +
+
+ )} + {/* simulation */} + {!isVersionSaved && + !viewVersionHistory && + activeModule === "simulation" && ( + <> + {subModule === "simulations" && ( +
+
+ +
+
+ )} + {subModule === "mechanics" && ( +
+
+ +
+
+ )} + {subModule === "analysis" && ( +
+
+ +
+
+ )} + + )} + {/* realtime visualization */} + {activeModule === "visualization" && } + )} - - {toggleUIRight && viewVersionHistory && ( -
-
- -
-
- )} - - {/* process builder */} - {toggleUIRight && - !viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - !selectedFloorItem && ( -
-
- -
-
- )} - {toggleUIRight && - !viewVersionHistory && - subModule === "properties" && - activeModule !== "visualization" && - selectedFloorItem && ( -
-
- -
-
- )} - - {toggleUIRight && - !viewVersionHistory && - subModule === "zoneProperties" && - (activeModule === "builder" || activeModule === "simulation") && ( -
-
- -
-
- )} - {/* simulation */} - {toggleUIRight && - !isVersionSaved && - !viewVersionHistory && - activeModule === "simulation" && ( - <> - {subModule === "simulations" && ( -
-
- -
-
- )} - {subModule === "mechanics" && ( -
-
- -
-
- )} - {subModule === "analysis" && ( -
-
- -
-
- )} - - )} - {/* realtime visualization */} - {toggleUIRight && activeModule === "visualization" && } ); }; diff --git a/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx new file mode 100644 index 0000000..eaab9f6 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx @@ -0,0 +1,191 @@ +import React, { useState } from "react"; +import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; +import { ArrowIcon } from "../../../icons/ExportCommonIcons"; + +// image imports +import Arc from "../../../../assets/image/aisleTypes/Arc.png"; +import Arrow from "../../../../assets/image/aisleTypes/Arrow.png"; +import Arrows from "../../../../assets/image/aisleTypes/Arrows.png"; +import Circle from "../../../../assets/image/aisleTypes/Circle.png"; +import Dashed from "../../../../assets/image/aisleTypes/Dashed.png"; +import Directional from "../../../../assets/image/aisleTypes/Directional.png"; +import Dotted from "../../../../assets/image/aisleTypes/Dotted.png"; +import Solid from "../../../../assets/image/aisleTypes/Solid.png"; + +interface TextureItem { + color: string; + id: string; + brief: string; + texture: string; +} + +const AisleProperties: React.FC = () => { + const [collapsePresets, setCollapsePresets] = useState(false); + const [collapseTexture, setCollapseTexture] = useState(true); + const [selectedTexture, setSelectedTexture] = useState( + "yellow1" + ); + const [selectedType, setSelectedType] = useState("Solid"); + + const aisleTextureList: TextureItem[] = [ + { color: "gray", id: "gray", brief: "basic", texture: "" }, + { + color: "yellow", + id: "yellow1", + brief: "pedestrian walkways", + texture: "", + }, + { color: "green", id: "green1", brief: "pedestrian walkways", texture: "" }, + { color: "orange", id: "orange", brief: "material flow", texture: "" }, + { color: "blue", id: "blue", brief: "vehicle paths", texture: "" }, + { color: "purple", id: "purple", brief: "material flow", texture: "" }, + { color: "red", id: "red", brief: "safety zone", texture: "" }, + { + color: "bright green", + id: "bright-green", + brief: "safety zone", + texture: "", + }, + { + color: "yellow-black", + id: "yellow-black", + brief: "utility aisles", + texture: "", + }, + { + color: "white-black", + id: "white-black", + brief: "utility aisles", + texture: "", + }, + ]; + + const aisleTypes = [ + { + name: "Solid", + id: "1", + thumbnail: Solid, + }, + { + name: "Dotted", + id: "2", + thumbnail: Dotted, + }, + { + name: "Dashed", + id: "3", + thumbnail: Dashed, + }, + { + name: "Arrow", + id: "4", + thumbnail: Arrow, + }, + { + name: "Contiuous Arrows", + id: "5", + thumbnail: Arrows, + }, + { + name: "Directional", + id: "6", + thumbnail: Directional, + }, + { + name: "Arc", + id: "7", + thumbnail: Arc, + }, + { + name: "Circle", + id: "8", + thumbnail: Circle, + }, + ]; + + return ( +
+
Properties
+
+ {}} + /> +
+ + {/* Presets */} +
+ + {!collapsePresets && ( +
+ {aisleTypes.map((val) => ( +
+ +
+ ))} +
+ )} +
+ + {/* Texture */} +
+ + + {collapseTexture && ( +
+ {aisleTextureList.map((val) => ( + + ))} +
+ )} +
+
+ ); +}; + +export default AisleProperties; diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 3a2dd11..543150f 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -486,9 +486,6 @@ .add-icon { transform: scale(1.1); - - - } .kebab-icon { @@ -539,7 +536,7 @@ gap: 4px; .saved-history-count { - font-size: var(--font-size-tiny) + font-size: var(--font-size-tiny); } } } @@ -556,7 +553,6 @@ gap: 12px; .version-name { - background: var(--background-color); border: 1px solid var(--border-color); color: var(--text-color); @@ -588,7 +584,6 @@ display: flex; flex-direction: column; gap: 6px; - } .saved-by { @@ -597,7 +592,6 @@ gap: 6px; .user-profile { - background: var(--background-color-accent); color: var(--text-button-color); width: 20px; @@ -612,7 +606,6 @@ .user-name { text-transform: capitalize; - } } @@ -625,8 +618,6 @@ } } } - - } .no-event-selected { @@ -665,7 +656,7 @@ path { stroke: var(--text-button-color); - strokeWidth: 1.3; + stroke-width: 1.3; } } } @@ -686,7 +677,6 @@ max-height: 60vh; .sidebar-right-content-container { - .dataSideBar { .inputs-wrapper { display: flex; @@ -936,7 +926,7 @@ path { stroke: var(--accent-color); - strokeWidth: 1.5px; + stroke-width: 1.5px; } &:hover { @@ -1271,15 +1261,105 @@ } } + .aisle-properties-container { + max-height: 65vh; + overflow: auto; + .aisle-texture-container { + max-height: 40vh; + overflow: auto; + .aisle-list { + width: calc(100% - 8px); + text-align: start; + padding: 4px 6px; + display: flex; + align-items: center; + gap: 6px; + border-radius: #{$border-radius-large}; + margin: 2px 6px; + .texture-display { + height: 34px; + width: 34px; + background: #7e7e7e86; + border-radius: #{$border-radius-large}; + margin-right: 4px; + overflow: hidden; + } + .aisle-color { + text-transform: capitalize; + } + .aisle-brief { + font-size: var(--font-size-small); + color: var(--input-text-color); + } + &.selected { + background: var(--background-color-accent); + color: var(--text-button-color); + &:hover { + background: var(--background-color-accent); + } + } + &:hover { + background: var(--background-color-secondary); + } + } + } + .value-field-container { + margin: 0; + } + .presets-list-container { + display: flex; + flex-wrap: wrap; + gap: 6px; + padding: 6px; + padding-left: 7px; + .preset-list { + background: #444; + height: 90px; + width: 90px; + border-radius: #{$border-radius-large}; + overflow: hidden; + .thumbnail { + height: 100%; + width: 100%; + border-radius: #{$border-radius-large}; + outline-offset: -1px; + img { + height: 100%; + width: 100%; + object-fit: cover; + transition: all 0.2s; + } + &.selected { + outline: 2px solid var(--border-color-accent); + outline-offset: -2px; + &:hover { + outline: 2px solid var(--border-color-accent); + img { + transform: scale(1); + } + } + } + &:hover { + outline: 1px solid var(--border-color); + img { + transform: scale(1.1); + } + } + } + } + } + } + .global-properties-container, .analysis-main-container, .asset-properties-container, - .zone-properties-container { + .zone-properties-container, + .aisle-properties-container { .header { @include flex-space-between; padding: 10px 12px; color: var(--text-color); - + width: 100%; .input-value { color: inherit; } @@ -1661,9 +1741,11 @@ width: 100%; height: 100%; font-size: var(--font-size-regular); - background: linear-gradient(0deg, - rgba(37, 24, 51, 0) 0%, - rgba(52, 41, 61, 0.5) 100%); + background: linear-gradient( + 0deg, + rgba(37, 24, 51, 0) 0%, + rgba(52, 41, 61, 0.5) 100% + ); pointer-events: none; backdrop-filter: blur(8px); opacity: 0; @@ -1740,9 +1822,6 @@ } } - - - .versionSaved { min-width: 449px; position: fixed; @@ -1798,7 +1877,6 @@ } button { - font-size: var(--font-size-small); display: flex; justify-content: center; @@ -1810,10 +1888,7 @@ cursor: pointer; } } - - } - } .dismissing { @@ -1821,8 +1896,6 @@ } .edit-version-popup-wrapper { - - height: 100vh; width: 100vw; background: var(--background-color-secondary); @@ -1835,8 +1908,6 @@ border-radius: #{$border-radius-large}; backdrop-filter: blur(15px); outline: 1px solid var(--border-color); - padding: 6px; - display: flex; flex-direction: column; gap: 30px; @@ -1854,7 +1925,6 @@ .version-name, .version-description { - background: var(--background-color); backdrop-filter: blur(20px); border-radius: 20px; @@ -1870,7 +1940,6 @@ right: 8px; font-size: var(--font-size-tiny); color: var(--text-disabled); - } input { @@ -1883,7 +1952,6 @@ .version-description { textarea { - padding: 4px 8px; width: 100%; min-height: 101px; @@ -1900,7 +1968,6 @@ gap: 20px; .save { - display: flex; justify-content: center; align-items: center; @@ -1912,4 +1979,4 @@ } } } -} \ No newline at end of file +}