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

v2-ui #87

Merged
Vishnu merged 37 commits from v2-ui into main 2025-05-13 14:34:51 +00:00
Conversation 0 Commits 37 Files Changed 115 +483 -360
14 changed files with 483 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3a9c41434d - Show all commits

259
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@ -1,9 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search"; import Search from "../../ui/inputs/Search";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset"; import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
import { fetchAssets } from "../../../services/marketplace/fetchAssets"; import { fetchAssets } from "../../../services/marketplace/fetchAssets";
import { useSelectedItem } from "../../../store/store"; import { useSelectedItem } from "../../../store/store";
@ -16,8 +13,6 @@ import storage from "../../../assets/image/categories/storage.png";
import office from "../../../assets/image/categories/office.png"; import office from "../../../assets/image/categories/office.png";
import safety from "../../../assets/image/categories/safety.png"; import safety from "../../../assets/image/categories/safety.png";
import feneration from "../../../assets/image/categories/feneration.png"; import feneration from "../../../assets/image/categories/feneration.png";
import archThumbnail from "../../../assets/image/localAssets/arch.png";
import windowThumbnail from "../../../assets/image/localAssets/window.png";
import SkeletonUI from "../../templates/SkeletonUI"; import SkeletonUI from "../../templates/SkeletonUI";
// ------------------------------------- // -------------------------------------
@ -90,24 +85,7 @@ const Assets: React.FC = () => {
useEffect(() => { useEffect(() => {
setCategoryList([ setCategoryList([
{ { category: "Fenestration", categoryImage: feneration },
assetName: "Doors",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Windows",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Pillars",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{ category: "Vehicles", categoryImage: vehicle }, { category: "Vehicles", categoryImage: vehicle },
{ category: "Workstation", categoryImage: workStation }, { category: "Workstation", categoryImage: workStation },
{ category: "Machines", categoryImage: machines }, { category: "Machines", categoryImage: machines },
@ -121,44 +99,15 @@ const Assets: React.FC = () => {
const fetchCategoryAssets = async (asset: any) => { const fetchCategoryAssets = async (asset: any) => {
setisLoading(true); setisLoading(true);
setSelectedCategory(asset); setSelectedCategory(asset);
if (asset === "Feneration") { try {
const localAssets: AssetProp[] = [ const res = await getCategoryAsset(asset);
{ setCategoryAssets(res);
filename: "arch", setFiltereredAssets(res);
category: "Feneration", setisLoading(false); // End loading
url: arch, // eslint-disable-next-line
thumbnail: archThumbnail, } catch (error) {
tags: "arch", echo.error("failed to fetch assets");
},
{
filename: "door",
category: "Feneration",
url: door,
thumbnail: feneration,
tags: "door",
},
{
filename: "window",
category: "Feneration",
url: window,
thumbnail: windowThumbnail,
tags: "window",
},
];
setCategoryAssets(localAssets);
setFiltereredAssets(localAssets);
setisLoading(false); setisLoading(false);
} else {
try {
const res = await getCategoryAsset(asset);
setCategoryAssets(res);
setFiltereredAssets(res);
setisLoading(false); // End loading
// eslint-disable-next-line
} catch (error) {
echo.error("failed to fetch assets");
setisLoading(false);
}
} }
}; };
@ -167,64 +116,21 @@ const Assets: React.FC = () => {
<Search onChange={handleSearchChange} /> <Search onChange={handleSearchChange} />
<div className="assets-list-section"> <div className="assets-list-section">
<section> <section>
{isLoading ? ( {(() => {
<SkeletonUI type="asset" /> // Show skeleton when loading if (isLoading) {
) : searchValue ? ( return <SkeletonUI type="asset" />; // Show skeleton when loading
<div className="assets-result"> }
<div className="assets-wrapper"> if (searchValue) {
<div className="searched-content"> return (
<p>Results for {searchValue}</p> <div className="assets-result">
</div> <div className="assets-wrapper">
<div className="assets-container"> <div className="searched-content">
{categoryAssets?.map((asset: any, index: number) => ( <p>Results for {searchValue}</p>
<div
key={index}
className="assets"
id={asset.filename}
title={asset.filename}
>
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div> </div>
))} <div className="assets-container">
</div> {categoryAssets?.map((asset: any, index: number) => (
</div>
</div>
) : (
<>
{selectedCategory ? (
<div className="assets-wrapper">
<h2>
{selectedCategory}{" "}
<div
className="back-button"
id="asset-backButtom"
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
← Back
</div>
</h2>
<div className="assets-container">
{categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div <div
key={index} key={`${index}-${asset.filename}`}
className="assets" className="assets"
id={asset.filename} id={asset.filename}
title={asset.filename} title={asset.filename}
@ -246,6 +152,7 @@ const Assets: React.FC = () => {
} }
}} }}
/> />
<div className="asset-name"> <div className="asset-name">
{asset.filename {asset.filename
.split("_") .split("_")
@ -257,40 +164,104 @@ const Assets: React.FC = () => {
</div> </div>
</div> </div>
))} ))}
</div>
</div> </div>
</div> </div>
) : ( );
}
if (selectedCategory) {
return (
<div className="assets-wrapper"> <div className="assets-wrapper">
<h2>Categories</h2> <h2>
<div className="categories-container"> {selectedCategory}
{Array.from( <button
new Set(categoryList.map((asset) => asset.category)) className="back-button"
).map((category, index) => { id="asset-backButtom"
const categoryInfo = categoryList.find( onClick={() => {
(asset) => asset.category === category setSelectedCategory(null);
); setCategoryAssets([]);
return ( }}
<div >
key={index} ← Back
className="category" </button>
id={category} </h2>
onClick={() => fetchCategoryAssets(category)} <div className="assets-container">
> {categoryAssets?.map((asset: any, index: number) => (
<img <div
src={categoryInfo?.categoryImage || ""} key={`${index}-${asset}`}
alt={category} className="assets"
className="category-image" id={asset.filename}
draggable={false} title={asset.filename}
/> >
<div className="category-name">{category}</div> <img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
});
}}
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div> </div>
); </div>
})} ))}
{categoryAssets.length === 0 && (
<div className="no-asset">
🚧 The asset shelf is empty. We're working on filling it
up!
</div>
)}
</div> </div>
</div> </div>
)} );
</> }
)}
return (
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
{Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<button
key={`${index}-${category}`}
className="category"
id={category}
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage ?? ""}
alt={category}
className="category-image"
draggable={false}
/>
<div className="category-name">{category}</div>
</button>
);
})}
</div>
</div>
);
})()}
</section> </section>
</div> </div>
</div> </div>

12
app/src/components/layout/sidebarLeft/Header.tsx
View File

@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
const Header: React.FC = () => { const Header: React.FC = () => {
const { toggleUI, setToggleUI } = useToggleStore(); const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
return ( return (
@ -20,15 +20,17 @@ const Header: React.FC = () => {
</div> </div>
</div> </div>
<button <button
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`} className={`toggle-sidebar-ui-button ${!toggleUILeft ? "active" : ""}`}
onClick={() => { onClick={() => {
if (activeModule !== "market") { if (activeModule !== "market") {
setToggleUI(!toggleUI); setToggleUI(!toggleUILeft, toggleUIRight);
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI)); localStorage.setItem("navBarUiLeft", JSON.stringify(!toggleUILeft));
} }
}} }}
> >
<div className="tooltip">{toggleUI ? "Hide" : "Show"} sidebar (ctrl + \)</div> <div className="tooltip">
{toggleUILeft ? "Hide" : "Show"} sidebar (ctrl + [)
</div>
<ToggleSidebarIcon /> <ToggleSidebarIcon />
</button> </button>
</div> </div>

88
app/src/components/layout/sidebarLeft/SideBarLeft.tsx
View File

@ -12,7 +12,7 @@ import Search from "../../ui/inputs/Search";
const SideBarLeft: React.FC = () => { const SideBarLeft: React.FC = () => {
const [activeOption, setActiveOption] = useState("Widgets"); const [activeOption, setActiveOption] = useState("Widgets");
const { toggleUI } = useToggleStore(); const { toggleUILeft } = useToggleStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
// Reset activeOption whenever activeModule changes // Reset activeOption whenever activeModule changes
@ -31,47 +31,55 @@ const SideBarLeft: React.FC = () => {
}; };
return ( return (
<div className={`sidebar-left-wrapper ${toggleUI ? "open" : "closed"}`}> <div className={`sidebar-left-wrapper ${toggleUILeft ? "open" : "closed"}`}>
<Header /> <Header />
{toggleUI && ( {toggleUILeft && (
<div className={`sidebar-left-container `}> <div className={`sidebar-left-container `}>
{activeModule === "visualization" ? ( {(() => {
<> if (activeModule === "visualization") {
<ToggleHeader return (
options={["Widgets", "Templates"]} <>
activeOption={activeOption} <ToggleHeader
handleClick={handleToggleClick} options={["Widgets", "Templates"]}
/> activeOption={activeOption}
<Search onChange={handleSearchChange} /> handleClick={handleToggleClick}
<div className="sidebar-left-content-container"> />
{activeOption === "Widgets" ? <Widgets /> : <Templates />} <Search onChange={handleSearchChange} />
</div> <div className="sidebar-left-content-container">
</> {activeOption === "Widgets" ? <Widgets /> : <Templates />}
) : activeModule === "market" ? ( </div>
<></> </>
) : activeModule === "builder" ? ( );
<> } else if (activeModule === "market") {
<ToggleHeader return <></>;
options={["Outline", "Assets"]} } else if (activeModule === "builder") {
activeOption={activeOption} return (
handleClick={handleToggleClick} <>
/> <ToggleHeader
<div className="sidebar-left-content-container"> options={["Outline", "Assets"]}
{activeOption === "Outline" ? <Outline /> : <Assets />} activeOption={activeOption}
</div> handleClick={handleToggleClick}
</> />
) : ( <div className="sidebar-left-content-container">
<> {activeOption === "Outline" ? <Outline /> : <Assets />}
<ToggleHeader </div>
options={["Outline"]} </>
activeOption={activeOption} );
handleClick={handleToggleClick} } else {
/> return (
<div className="sidebar-left-content-container"> <>
{activeOption === "Outline" ? <Outline /> : <Assets />} <ToggleHeader
</div> options={["Outline"]}
</> activeOption={activeOption}
)} handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
);
}
})()}
</div> </div>
)} )}
</div> </div>

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

@ -5,10 +5,15 @@ import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup"; import CollaborationPopup from "../../templates/CollaborationPopup";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
import { useSelectedUserStore } from "../../../store/useCollabStore"; import { useSelectedUserStore } from "../../../store/useCollabStore";
import useToggleStore from "../../../store/useUIToggleStore";
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
import useModuleStore from "../../../store/useModuleStore";
const Header: React.FC = () => { const Header: React.FC = () => {
const { activeUsers } = useActiveUsers(); const { activeUsers } = useActiveUsers();
const userName = localStorage.getItem("userName") ?? "Anonymous"; const userName = localStorage.getItem("userName") ?? "Anonymous";
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore();
const guestUsers: ActiveUser[] = activeUsers.filter( const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName (user: ActiveUser) => user.userName !== userName
@ -55,6 +60,25 @@ const Header: React.FC = () => {
)} )}
<div className="header-container"> <div className="header-container">
<div className="options-container"> <div className="options-container">
<button
className={`toggle-sidebar-ui-button ${
!toggleUIRight ? "active" : ""
}`}
onClick={() => {
if (activeModule !== "market") {
setToggleUI(toggleUILeft, !toggleUIRight);
localStorage.setItem(
"navBarUiRight",
JSON.stringify(!toggleUIRight)
);
}
}}
>
<div className="tooltip">
{toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
</div>
<ToggleSidebarIcon />
</button>
<button <button
className="share-button" className="share-button"
onClick={() => { onClick={() => {

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

@ -25,7 +25,7 @@ import EventProperties from "./properties/eventProperties/EventProperties";
const SideBarRight: React.FC = () => { const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const { toggleUI } = useToggleStore(); const { toggleUIRight } = useToggleStore();
const { subModule, setSubModule } = useSubModuleStore(); const { subModule, setSubModule } = useSubModuleStore();
const { selectedFloorItem } = useSelectedFloorItem(); const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventData } = useSelectedEventData(); const { selectedEventData } = useSelectedEventData();
@ -55,9 +55,9 @@ const SideBarRight: React.FC = () => {
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
return ( return (
<div className={`sidebar-right-wrapper ${toggleUI ? "open" : "closed"}`}> <div className={`sidebar-right-wrapper ${toggleUIRight ? "open" : "closed"}`}>
<Header /> <Header />
{toggleUI && ( {toggleUIRight && (
<div className="sidebar-actions-container"> <div className="sidebar-actions-container">
{activeModule !== "simulation" && ( {activeModule !== "simulation" && (
<button <button
@ -104,7 +104,7 @@ const SideBarRight: React.FC = () => {
</div> </div>
)} )}
{/* process builder */} {/* process builder */}
{toggleUI && {toggleUIRight &&
subModule === "properties" && subModule === "properties" &&
activeModule !== "visualization" && activeModule !== "visualization" &&
!selectedFloorItem && ( !selectedFloorItem && (
@ -114,7 +114,7 @@ const SideBarRight: React.FC = () => {
</div> </div>
</div> </div>
)} )}
{toggleUI && {toggleUIRight &&
subModule === "properties" && subModule === "properties" &&
activeModule !== "visualization" && activeModule !== "visualization" &&
selectedFloorItem && ( selectedFloorItem && (
@ -124,7 +124,7 @@ const SideBarRight: React.FC = () => {
</div> </div>
</div> </div>
)} )}
{toggleUI && {toggleUIRight &&
subModule === "zoneProperties" && subModule === "zoneProperties" &&
(activeModule === "builder" || activeModule === "simulation") && ( (activeModule === "builder" || activeModule === "simulation") && (
<div className="sidebar-right-container"> <div className="sidebar-right-container">
@ -134,7 +134,7 @@ const SideBarRight: React.FC = () => {
</div> </div>
)} )}
{/* simulation */} {/* simulation */}
{toggleUI && activeModule === "simulation" && ( {toggleUIRight && activeModule === "simulation" && (
<> <>
{subModule === "simulations" && ( {subModule === "simulations" && (
<div className="sidebar-right-container"> <div className="sidebar-right-container">
@ -160,7 +160,7 @@ const SideBarRight: React.FC = () => {
</> </>
)} )}
{/* realtime visualization */} {/* realtime visualization */}
{toggleUI && activeModule === "visualization" && <Visualization />} {toggleUIRight && activeModule === "visualization" && <Visualization />}
</div> </div>
); );
}; };

26
app/src/components/templates/SkeletonUI.tsx
View File

@ -7,7 +7,6 @@ interface SkeletonUIProps {
// Define the SkeletonUI component // Define the SkeletonUI component
const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => { const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
// Function to render skeleton content based on 'type' // Function to render skeleton content based on 'type'
const renderSkeleton = () => { const renderSkeleton = () => {
switch (type) { switch (type) {
@ -38,13 +37,24 @@ const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
case "asset": case "asset":
return ( return (
<> <>
<div className="skeleton-content"> <div className="skeleton asset-category-title"></div>
<div className="skeleton asset-name"></div> <div className="skeleton-content-asset">
<div className="skeleton asset"></div> <div className="skeleton-content">
</div> <div className="skeleton asset-name"></div>
<div className="skeleton-content"> <div className="skeleton asset"></div>
<div className="skeleton asset-name"></div> </div>
<div className="skeleton asset"></div> <div className="skeleton-content">
<div className="skeleton asset-name"></div>
<div className="skeleton asset"></div>
</div>
<div className="skeleton-content">
<div className="skeleton asset-name"></div>
<div className="skeleton asset"></div>
</div>
<div className="skeleton-content">
<div className="skeleton asset-name"></div>
<div className="skeleton asset"></div>
</div>
</div> </div>
</> </>
); );

23
app/src/components/ui/ModuleToggle.tsx
View File

@ -19,8 +19,11 @@ const ModuleToggle: React.FC = () => {
onClick={() => { onClick={() => {
setActiveModule("builder"); setActiveModule("builder");
setToggleUI( setToggleUI(
localStorage.getItem("navBarUi") localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUi") === "true" ? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true : true
); );
}} }}
@ -37,8 +40,11 @@ const ModuleToggle: React.FC = () => {
onClick={() => { onClick={() => {
setActiveModule("simulation"); setActiveModule("simulation");
setToggleUI( setToggleUI(
localStorage.getItem("navBarUi") localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUi") === "true" ? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true : true
); );
}} }}
@ -55,8 +61,11 @@ const ModuleToggle: React.FC = () => {
onClick={() => { onClick={() => {
setActiveModule("visualization"); setActiveModule("visualization");
setToggleUI( setToggleUI(
localStorage.getItem("navBarUi") localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUi") === "true" ? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true : true
); );
}} }}
@ -70,7 +79,7 @@ const ModuleToggle: React.FC = () => {
className={`module-list ${activeModule === "market" ? "active" : ""}`} className={`module-list ${activeModule === "market" ? "active" : ""}`}
onClick={() => { onClick={() => {
setActiveModule("market"); setActiveModule("market");
setToggleUI(false); setToggleUI(false, false);
}} }}
> >
<div className="icon"> <div className="icon">

76
app/src/components/ui/Tools.tsx
View File

@ -68,8 +68,11 @@ const Tools: React.FC = () => {
// Reset activeTool whenever activeModule changes // Reset activeTool whenever activeModule changes
useEffect(() => { useEffect(() => {
setToggleUI( setToggleUI(
localStorage.getItem("navBarUi") localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUi") === "true" ? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true : true
); );
}, []); }, []);
@ -90,8 +93,11 @@ const Tools: React.FC = () => {
setToggleView(false); setToggleView(false);
} }
setToggleUI( setToggleUI(
localStorage.getItem("navBarUi") localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUi") === "true" ? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true : true
); );
setToggleThreeD(!toggleThreeD); setToggleThreeD(!toggleThreeD);
@ -116,7 +122,7 @@ const Tools: React.FC = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!toggleThreeD) { if (!toggleThreeD) {
setToggleUI(false); setToggleUI(false, false);
} }
}, [toggleThreeD]); }, [toggleThreeD]);
@ -191,8 +197,9 @@ const Tools: React.FC = () => {
<div className="activeDropicon"> <div className="activeDropicon">
{activeSubTool == "cursor" && ( {activeSubTool == "cursor" && (
<div <div
className={`tool-button ${activeTool === "cursor" ? "active" : "" className={`tool-button ${
}`} activeTool === "cursor" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("cursor"); setActiveTool("cursor");
}} }}
@ -203,8 +210,9 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "free-hand" && ( {activeSubTool == "free-hand" && (
<div <div
className={`tool-button ${activeTool === "free-hand" ? "active" : "" className={`tool-button ${
}`} activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("free-hand"); setActiveTool("free-hand");
}} }}
@ -215,8 +223,9 @@ const Tools: React.FC = () => {
)} )}
{activeSubTool == "delete" && ( {activeSubTool == "delete" && (
<div <div
className={`tool-button ${activeTool === "delete" ? "active" : "" className={`tool-button ${
}`} activeTool === "delete" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("delete"); setActiveTool("delete");
}} }}
@ -289,8 +298,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "draw-wall" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-wall"); setActiveTool("draw-wall");
}} }}
@ -299,8 +309,9 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} /> <WallIcon isActive={activeTool === "draw-wall"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-zone" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-zone"); setActiveTool("draw-zone");
}} }}
@ -309,8 +320,9 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} /> <ZoneIcon isActive={activeTool === "draw-zone"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-aisle" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-aisle"); setActiveTool("draw-aisle");
}} }}
@ -319,8 +331,9 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} /> <AsileIcon isActive={activeTool === "draw-aisle"} />
</div> </div>
<div <div
className={`tool-button ${activeTool === "draw-floor" ? "active" : "" className={`tool-button ${
}`} activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("draw-floor"); setActiveTool("draw-floor");
}} }}
@ -336,8 +349,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "measure" ? "active" : "" className={`tool-button ${
}`} activeTool === "measure" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("measure"); setActiveTool("measure");
}} }}
@ -353,8 +367,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="draw-tools"> <div className="draw-tools">
<div <div
className={`tool-button ${activeTool === "pen" ? "active" : "" className={`tool-button ${
}`} activeTool === "pen" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("pen"); setActiveTool("pen");
}} }}
@ -391,8 +406,9 @@ const Tools: React.FC = () => {
<div className="split"></div> <div className="split"></div>
<div className="general-options"> <div className="general-options">
<div <div
className={`tool-button ${activeTool === "comment" ? "active" : "" className={`tool-button ${
}`} activeTool === "comment" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setActiveTool("comment"); setActiveTool("comment");
}} }}
@ -402,8 +418,9 @@ const Tools: React.FC = () => {
</div> </div>
{toggleThreeD && ( {toggleThreeD && (
<div <div
className={`tool-button ${activeTool === "play" ? "active" : "" className={`tool-button ${
}`} activeTool === "play" ? "active" : ""
}`}
onClick={() => { onClick={() => {
setIsPlaying(!isPlaying); setIsPlaying(!isPlaying);
}} }}
@ -417,8 +434,9 @@ const Tools: React.FC = () => {
<> <>
<div className="split"></div> <div className="split"></div>
<div <div
className={`toggle-threed-button${toggleThreeD ? " toggled" : "" className={`toggle-threed-button${
}`} toggleThreeD ? " toggled" : ""
}`}
onClick={toggleSwitch} onClick={toggleSwitch}
> >
<div className="tooltip">toggle view (tab)</div> <div className="tooltip">toggle view (tab)</div>

13
app/src/components/ui/menu/menu.tsx
View File

@ -1,12 +1,14 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { ArrowIcon } from "../../icons/ExportCommonIcons"; import { ArrowIcon } from "../../icons/ExportCommonIcons";
import { toggleTheme } from "../../../utils/theme"; import { toggleTheme } from "../../../utils/theme";
import { useNavigate } from "react-router-dom";
interface MenuBarProps { interface MenuBarProps {
setOpenMenu: (isOpen: boolean) => void; // Function to update menu state setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
} }
const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => { const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
const navigate = useNavigate();
const [activeMenu, setActiveMenu] = useState<string | null>(null); const [activeMenu, setActiveMenu] = useState<string | null>(null);
const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null); const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
@ -23,13 +25,19 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
})); }));
}; };
function handleThemeChange(){ function handleThemeChange() {
toggleTheme(); toggleTheme();
window.location.reload(); window.location.reload();
} }
const savedTheme: string | null = localStorage.getItem("theme") ?? "light"; const savedTheme: string | null = localStorage.getItem("theme") ?? "light";
const handleLogout = () => {
localStorage.clear(); // 1. Clear all localStorage
navigate('/'); // 2. Redirect to homepage
};
return ( return (
<div <div
className="menu-bar" className="menu-bar"
@ -539,6 +547,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
</div> </div>
)} )}
</div> </div>
<div className="menu-button-container" onClick={handleLogout}>
<div className="menu-button">Log out</div>
</div>
</div> </div>
</div> </div>
); );

4
app/src/modules/scene/controls/selectionControls/rotateControls.tsx
View File

@ -22,7 +22,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
const itemsData = useRef<Types.FloorItems>([]); const itemsData = useRef<Types.FloorItems>([]);
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
const updateBackend = ( const updateBackend = (
productName: string, productName: string,
@ -214,7 +214,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z], rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
}) })
if (event) { if (event && organization) {
updateBackend( updateBackend(
selectedProduct.productName, selectedProduct.productName,
selectedProduct.productId, selectedProduct.productId,

12
app/src/store/useUIToggleStore.ts
View File

@ -1,13 +1,17 @@
import { create } from "zustand"; import { create } from "zustand";
interface ToggleState { interface ToggleState {
toggleUI: boolean; // State to track UI toggle toggleUILeft: boolean;
setToggleUI: (value: boolean) => void; // Action to update toggleUI toggleUIRight: boolean;
setToggleUI: (value1: boolean, value2: boolean) => void;
} }
const useToggleStore = create<ToggleState>((set) => ({ const useToggleStore = create<ToggleState>((set) => ({
toggleUI: true, // Initial state toggleUILeft: true,
setToggleUI: (value: boolean) => set({ toggleUI: value }), // Update the state toggleUIRight: false,
setToggleUI: (value1: boolean, value2: boolean) => {
set({ toggleUILeft: value1, toggleUIRight: value2 });
},
})); }));
export default useToggleStore; export default useToggleStore;

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

@ -1,6 +1,55 @@
@use "../abstracts/variables" as *; @use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *; @use "../abstracts/mixins" as *;
.toggle-sidebar-ui-button {
@include flex-center;
cursor: pointer;
height: 32px;
width: 32px;
min-height: 32px;
min-width: 32px;
border-radius: #{$border-radius-large};
position: relative;
.tooltip {
top: 6px;
right: -168px;
&::after {
left: 0px;
bottom: 50%;
}
}
&:hover {
outline: 1px solid var(--border-color);
outline-offset: -1px;
background: var(--background-color-solid);
.tooltip {
opacity: 1;
transform: translateX(2px);
}
}
}
.toggle-sidebar-ui-button.active {
background: var(--background-color-accent);
rect {
stroke: var(--icon-default-color-active);
}
circle {
fill: var(--icon-default-color-active);
}
&:hover {
filter: saturate(0.8);
background: var(--background-color-accent);
}
}
.sidebar-left-wrapper { .sidebar-left-wrapper {
width: 270px; width: 270px;
position: fixed; position: fixed;
@ -34,15 +83,6 @@
} }
.toggle-sidebar-ui-button { .toggle-sidebar-ui-button {
@include flex-center;
cursor: pointer;
height: 32px;
width: 32px;
min-height: 32px;
min-width: 32px;
border-radius: #{$border-radius-large};
position: relative;
.tooltip { .tooltip {
top: 6px; top: 6px;
right: -168px; right: -168px;
@ -52,34 +92,6 @@
bottom: 50%; bottom: 50%;
} }
} }
&:hover {
outline: 1px solid var(--border-color);
outline-offset: -1px;
background: var(--background-color-solid);
.tooltip {
opacity: 1;
transform: translateX(2px);
}
}
}
.active {
background: var(--background-color-accent);
rect {
stroke: var(--icon-default-color-active);
}
circle {
fill: var(--icon-default-color-active);
}
&:hover {
filter: saturate(0.8);
background: var(--background-color-accent);
}
} }
} }
@ -295,7 +307,7 @@
padding: 10px; padding: 10px;
padding-left: 16px; padding-left: 16px;
width: 100%; width: 100%;
gap: 12px; gap: 8px;
height: 52px; height: 52px;
.options-container { .options-container {
@ -318,7 +330,7 @@
.split { .split {
height: 20px; height: 20px;
width: 2px; min-width: 1px;
background: var(--text-disabled); background: var(--text-disabled);
} }
@ -1265,6 +1277,18 @@
} }
} }
} }
.toggle-sidebar-ui-button {
svg {
transform: scaleX(-1);
}
.tooltip {
right: 56px;
&::after {
left: 100%;
bottom: 50%;
}
}
}
} }
.assets-container-main { .assets-container-main {
@ -1431,7 +1455,11 @@
height: 100%; height: 100%;
gap: 6px; gap: 6px;
padding: 2px; padding: 2px;
.no-asset {
text-align: center;
margin: 12px;
width: 100%;
}
.assets { .assets {
width: 122px; width: 122px;
height: 95px; height: 95px;
@ -1490,20 +1518,6 @@
} }
} }
.skeleton-wrapper {
display: flex;
.asset-name {
width: 40%;
height: 10px;
}
.asset {
width: 100%;
height: 100%;
}
}
.sidebar-left-wrapper, .sidebar-left-wrapper,
.sidebar-right-wrapper { .sidebar-right-wrapper {
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;

123
app/src/styles/layout/skeleton.scss vendored
View File

@ -1,61 +1,90 @@
.skeleton-wrapper { .skeleton-wrapper {
// max-width: 600px; margin: 0 auto;
margin: 0 auto; width: 100%;
width: 100%;
.skeleton { .skeleton {
background: var(--background-color-gray); background: var(--background-color-gray);
border-radius: 8px; border-radius: 8px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&::after { &::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-image: linear-gradient(90deg, background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%, 90deg,
rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0) 100%); rgba(255, 255, 255, 0.39) 60%,
transform: translateX(-100%); rgba(255, 255, 255, 0) 100%
animation: shimmer 1.5s infinite; );
} transform: translateX(-100%);
animation: shimmer 1.5s infinite;
}
}
.skeleton-header {
margin-bottom: 20px;
.skeleton-title {
width: 100%;
height: 25px;
margin-bottom: 12px;
} }
.skeleton-header { .skeleton-subtitle {
margin-bottom: 20px; width: 100%;
height: 4px;
.skeleton-title {
width: 100%;
height: 25px;
margin-bottom: 12px;
}
.skeleton-subtitle {
width: 100%;
height: 4px;
}
} }
}
.skeleton-content { .skeleton-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
.skeleton-card { .skeleton-card {
width: 100%; width: 100%;
height: 15px; height: 15px;
}
} }
}
}
.asset-category-title{
width: 60%;
height: 12px;
margin-bottom: 12px;
margin-top: 4px;
}
.skeleton-content-asset{
display: flex;
height: calc(95px * 2 + 10px);
gap: 10px;
flex-wrap: wrap;
.skeleton-content {
gap: 8px;
flex-direction: column;
min-width: 122px;
min-height: 95px;
.asset-name {
width: 40%;
height: 10px;
}
.asset {
flex: 1;
width: 100%;
height: 100%;
}
}
} }
@keyframes shimmer { @keyframes shimmer {
100% { 100% {
transform: translateX(100%); transform: translateX(100%);
} }
} }

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

@ -17,7 +17,7 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
const KeyPressListener: React.FC = () => { const KeyPressListener: React.FC = () => {
const { activeModule, setActiveModule } = useModuleStore(); const { activeModule, setActiveModule } = useModuleStore();
const { setActiveSubTool } = useActiveSubTool(); const { setActiveSubTool } = useActiveSubTool();
const { toggleUI, setToggleUI } = useToggleStore(); const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { setToggleThreeD } = useThreeDStore(); const { setToggleThreeD } = useThreeDStore();
const { setToolMode } = useToolMode(); const { setToolMode } = useToolMode();
const { setIsPlaying } = usePlayButtonStore(); const { setIsPlaying } = usePlayButtonStore();
@ -26,7 +26,7 @@ const KeyPressListener: React.FC = () => {
const { setAddAction } = useAddAction(); const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem(); const { setSelectedWallItem } = useSelectedWallItem();
const { setActiveTool } = useActiveTool(); const { setActiveTool } = useActiveTool();
const { clearSelectedZone} = useSelectedZoneStore(); const { clearSelectedZone } = useSelectedZoneStore();
const isTextInput = (element: Element | null): boolean => const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement || element instanceof HTMLInputElement ||
@ -42,9 +42,10 @@ const KeyPressListener: React.FC = () => {
}; };
const module = modules[keyCombination]; const module = modules[keyCombination];
if (module && !toggleView) { if (module && !toggleView) {
console.log("hi");
setActiveTool("cursor"); setActiveTool("cursor");
setActiveSubTool("cursor"); setActiveSubTool("cursor");
if (module === "market") setToggleUI(false); if (module === "market") setToggleUI(false, false);
setActiveModule(module); setActiveModule(module);
} }
}; };
@ -69,6 +70,7 @@ const KeyPressListener: React.FC = () => {
const toggleTo2D = toggleView; const toggleTo2D = toggleView;
setToggleView(!toggleTo2D); setToggleView(!toggleTo2D);
setToggleThreeD(toggleTo2D); setToggleThreeD(toggleTo2D);
setToggleUI(toggleTo2D, toggleTo2D);
if (toggleTo2D) { if (toggleTo2D) {
setSelectedWallItem(null); setSelectedWallItem(null);
setDeleteTool(false); setDeleteTool(false);
@ -105,6 +107,29 @@ const KeyPressListener: React.FC = () => {
}; };
const handleSidebarShortcuts = (key: string) => {
if (activeModule !== "market") {
if (key === "Ctrl+\\") {
if (toggleUILeft === toggleUIRight) {
setToggleUI(!toggleUILeft, !toggleUIRight);
}
else {
setToggleUI(true, true);
}
return;
}
if (key === "Ctrl+]") {
setToggleUI(toggleUILeft, !toggleUIRight);
return;
}
if (key === "Ctrl+[") {
setToggleUI(!toggleUILeft, toggleUIRight);
return;
}
}
}
const handleKeyPress = (event: KeyboardEvent) => { const handleKeyPress = (event: KeyboardEvent) => {
if (isTextInput(document.activeElement)) return; if (isTextInput(document.activeElement)) return;
@ -113,11 +138,8 @@ const KeyPressListener: React.FC = () => {
event.preventDefault(); event.preventDefault();
if (keyCombination === "Ctrl+\\") { // Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
if (activeModule !== "market") setToggleUI(!toggleUI); handleSidebarShortcuts(keyCombination);
return;
}
// Active module selection (builder, simulation, etc.) // Active module selection (builder, simulation, etc.)
handleModuleSwitch(keyCombination); handleModuleSwitch(keyCombination);
// Common editing tools: cursor | delete | free-hand // Common editing tools: cursor | delete | free-hand
@ -132,6 +154,7 @@ const KeyPressListener: React.FC = () => {
if (keyCombination === "ESCAPE") { if (keyCombination === "ESCAPE") {
setActiveTool("cursor"); setActiveTool("cursor");
setActiveSubTool("cursor");
setIsPlaying(false); setIsPlaying(false);
clearSelectedZone(); clearSelectedZone();
} }
@ -146,7 +169,7 @@ const KeyPressListener: React.FC = () => {
window.addEventListener("keydown", handleKeyPress); window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress); return () => window.removeEventListener("keydown", handleKeyPress);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeModule, toggleUI, toggleView]); }, [activeModule, toggleUIRight, toggleUILeft, toggleView]);
return null; return null;
}; };