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

Merge remote-tracking branch 'origin/v2' into simulation-agv-v2

Browse Source
This commit is contained in:
Poovizhi99
2025-05-13 13:05:35 +05:30
parent 35fc190427 3a9c41434d
commit 8848d78c3b
38 changed files with 1872 additions and 1583 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/assets/textures/floor/black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
app/src/assets/textures/floor/factory wall texture.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
app/src/assets/textures/floor/wall-tex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 KiB

BIN
app/src/assets/textures/floor/white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

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

@@ -1,9 +1,6 @@
import React, { useEffect, useState } from "react";
import Search from "../../ui/inputs/Search";
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 { 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 safety from "../../../assets/image/categories/safety.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";
// -------------------------------------
@@ -90,24 +85,7 @@ const Assets: React.FC = () => {
useEffect(() => {
setCategoryList([
{
assetName: "Doors",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Windows",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{
assetName: "Pillars",
assetImage: "",
category: "Feneration",
categoryImage: feneration,
},
{ category: "Fenestration", categoryImage: feneration },
{ category: "Vehicles", categoryImage: vehicle },
{ category: "Workstation", categoryImage: workStation },
{ category: "Machines", categoryImage: machines },
@@ -121,44 +99,15 @@ const Assets: React.FC = () => {
const fetchCategoryAssets = async (asset: any) => {
setisLoading(true);
setSelectedCategory(asset);
if (asset === "Feneration") {
const localAssets: AssetProp[] = [
{
filename: "arch",
category: "Feneration",
url: arch,
thumbnail: archThumbnail,
tags: "arch",
},
{
filename: "door",
category: "Feneration",
url: door,
thumbnail: feneration,
tags: "door",
},
{
filename: "window",
category: "Feneration",
url: window,
thumbnail: windowThumbnail,
tags: "window",
},
];
setCategoryAssets(localAssets);
setFiltereredAssets(localAssets);
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);
} 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} />
<div className="assets-list-section">
<section>
{isLoading ? (
<SkeletonUI type="asset" /> // Show skeleton when loading
) : searchValue ? (
<div className="assets-result">
<div className="assets-wrapper">
<div className="searched-content">
<p>Results for {searchValue}</p>
</div>
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<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>
{(() => {
if (isLoading) {
return <SkeletonUI type="asset" />; // Show skeleton when loading
}
if (searchValue) {
return (
<div className="assets-result">
<div className="assets-wrapper">
<div className="searched-content">
<p>Results for {searchValue}</p>
</div>
))}
</div>
</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 className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div
key={index}
key={`${index}-${asset.filename}`}
className="assets"
id={asset.filename}
title={asset.filename}
@@ -234,16 +140,19 @@ const Assets: React.FC = () => {
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
});
if (asset.category !== 'Feneration') {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
});
}
}}
/>
<div className="asset-name">
{asset.filename
.split("_")
@@ -255,40 +164,104 @@ const Assets: React.FC = () => {
</div>
</div>
))}
</div>
</div>
</div>
) : (
);
}
if (selectedCategory) {
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 (
<div
key={index}
className="category"
id={category}
onClick={() => fetchCategoryAssets(category)}
>
<img
src={categoryInfo?.categoryImage || ""}
alt={category}
className="category-image"
draggable={false}
/>
<div className="category-name">{category}</div>
<h2>
{selectedCategory}
<button
className="back-button"
id="asset-backButtom"
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
← Back
</button>
</h2>
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div
key={`${index}-${asset}`}
className="assets"
id={asset.filename}
title={asset.filename}
>
<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>
))}
{categoryAssets.length === 0 && (
<div className="no-asset">
🚧 The asset shelf is empty. We're working on filling it
up!
</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>
</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";
const Header: React.FC = () => {
const { toggleUI, setToggleUI } = useToggleStore();
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore();
return (
@@ -20,15 +20,17 @@ const Header: React.FC = () => {
</div>
</div>
<button
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
className={`toggle-sidebar-ui-button ${!toggleUILeft ? "active" : ""}`}
onClick={() => {
if (activeModule !== "market") {
setToggleUI(!toggleUI);
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
setToggleUI(!toggleUILeft, toggleUIRight);
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 />
</button>
</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 [activeOption, setActiveOption] = useState("Widgets");
const { toggleUI } = useToggleStore();
const { toggleUILeft } = useToggleStore();
const { activeModule } = useModuleStore();
// Reset activeOption whenever activeModule changes
@@ -31,47 +31,55 @@ const SideBarLeft: React.FC = () => {
};
return (
<div className={`sidebar-left-wrapper ${toggleUI ? "open" : "closed"}`}>
<div className={`sidebar-left-wrapper ${toggleUILeft ? "open" : "closed"}`}>
<Header />
{toggleUI && (
{toggleUILeft && (
<div className={`sidebar-left-container `}>
{activeModule === "visualization" ? (
<>
<ToggleHeader
options={["Widgets", "Templates"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<Search onChange={handleSearchChange} />
<div className="sidebar-left-content-container">
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
</div>
</>
) : activeModule === "market" ? (
<></>
) : activeModule === "builder" ? (
<>
<ToggleHeader
options={["Outline", "Assets"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
) : (
<>
<ToggleHeader
options={["Outline"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
)}
{(() => {
if (activeModule === "visualization") {
return (
<>
<ToggleHeader
options={["Widgets", "Templates"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<Search onChange={handleSearchChange} />
<div className="sidebar-left-content-container">
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
</div>
</>
);
} else if (activeModule === "market") {
return <></>;
} else if (activeModule === "builder") {
return (
<>
<ToggleHeader
options={["Outline", "Assets"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</div>
</>
);
} else {
return (
<>
<ToggleHeader
options={["Outline"]}
activeOption={activeOption}
handleClick={handleToggleClick}
/>
<div className="sidebar-left-content-container">
{activeOption === "Outline" ? <Outline /> : <Assets />}
</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 { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
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 { activeUsers } = useActiveUsers();
const userName = localStorage.getItem("userName") ?? "Anonymous";
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { activeModule } = useModuleStore();
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
@@ -55,6 +60,25 @@ const Header: React.FC = () => {
)}
<div className="header-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
className="share-button"
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 { activeModule } = useModuleStore();
const { toggleUI } = useToggleStore();
const { toggleUIRight } = useToggleStore();
const { subModule, setSubModule } = useSubModuleStore();
const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventData } = useSelectedEventData();
@@ -55,9 +55,9 @@ const SideBarRight: React.FC = () => {
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
return (
<div className={`sidebar-right-wrapper ${toggleUI ? "open" : "closed"}`}>
<div className={`sidebar-right-wrapper ${toggleUIRight ? "open" : "closed"}`}>
<Header />
{toggleUI && (
{toggleUIRight && (
<div className="sidebar-actions-container">
{activeModule !== "simulation" && (
<button
@@ -104,7 +104,7 @@ const SideBarRight: React.FC = () => {
</div>
)}
{/* process builder */}
{toggleUI &&
{toggleUIRight &&
subModule === "properties" &&
activeModule !== "visualization" &&
!selectedFloorItem && (
@@ -114,7 +114,7 @@ const SideBarRight: React.FC = () => {
</div>
</div>
)}
{toggleUI &&
{toggleUIRight &&
subModule === "properties" &&
activeModule !== "visualization" &&
selectedFloorItem && (
@@ -124,7 +124,7 @@ const SideBarRight: React.FC = () => {
</div>
</div>
)}
{toggleUI &&
{toggleUIRight &&
subModule === "zoneProperties" &&
(activeModule === "builder" || activeModule === "simulation") && (
<div className="sidebar-right-container">
@@ -134,7 +134,7 @@ const SideBarRight: React.FC = () => {
</div>
)}
{/* simulation */}
{toggleUI && activeModule === "simulation" && (
{toggleUIRight && activeModule === "simulation" && (
<>
{subModule === "simulations" && (
<div className="sidebar-right-container">
@@ -160,7 +160,7 @@ const SideBarRight: React.FC = () => {
</>
)}
{/* realtime visualization */}
{toggleUI && activeModule === "visualization" && <Visualization />}
{toggleUIRight && activeModule === "visualization" && <Visualization />}
</div>
);
};

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

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

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

@@ -32,7 +32,7 @@ const FileMenu: React.FC = () => {
}, []);
// project
const [projectName, setProjectName] = useState("project 1");
const [projectName, setProjectName] = useState("Demo Project");
// Load project name from localStorage on mount
useEffect(() => {

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

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

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

@@ -29,7 +29,6 @@ import {
useSocketStore,
useToggleView,
useToolMode,
useTransformMode,
useActiveSubTool,
} from "../../store/store";
import useToggleStore from "../../store/useUIToggleStore";
@@ -61,7 +60,6 @@ const Tools: React.FC = () => {
const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem();
const { setTransformMode } = useTransformMode();
const { setDeletePointOrLine } = useDeletePointOrLine();
const { setToolMode } = useToolMode();
const { activeTool, setActiveTool } = useActiveTool();
@@ -70,8 +68,11 @@ const Tools: React.FC = () => {
// Reset activeTool whenever activeModule changes
useEffect(() => {
setToggleUI(
localStorage.getItem("navBarUi")
? localStorage.getItem("navBarUi") === "true"
localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true
);
}, []);
@@ -92,8 +93,11 @@ const Tools: React.FC = () => {
setToggleView(false);
}
setToggleUI(
localStorage.getItem("navBarUi")
? localStorage.getItem("navBarUi") === "true"
localStorage.getItem("navBarUiLeft")
? localStorage.getItem("navBarUiLeft") === "true"
: true,
localStorage.getItem("navBarUiRight")
? localStorage.getItem("navBarUiRight") === "true"
: true
);
setToggleThreeD(!toggleThreeD);
@@ -118,7 +122,7 @@ const Tools: React.FC = () => {
}, []);
useEffect(() => {
if (!toggleThreeD) {
setToggleUI(false);
setToggleUI(false, false);
}
}, [toggleThreeD]);
@@ -126,7 +130,6 @@ const Tools: React.FC = () => {
setToolMode(null);
setDeleteTool(false);
setAddAction(null);
setTransformMode(null);
setDeletePointOrLine(false);
setRefTextUpdate((prevUpdate) => prevUpdate - 1);
@@ -134,20 +137,6 @@ const Tools: React.FC = () => {
case "cursor":
if (toggleView) {
setToolMode('move');
} else {
setTransformMode("translate");
}
break;
case "Rotate":
if (!toggleView) {
setTransformMode("rotate");
}
break;
case "Scale":
if (!toggleView) {
setTransformMode("scale");
}
break;
@@ -208,8 +197,9 @@ const Tools: React.FC = () => {
<div className="activeDropicon">
{activeSubTool == "cursor" && (
<div
className={`tool-button ${activeTool === "cursor" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "cursor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("cursor");
}}
@@ -220,8 +210,9 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "free-hand" && (
<div
className={`tool-button ${activeTool === "free-hand" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "free-hand" ? "active" : ""
}`}
onClick={() => {
setActiveTool("free-hand");
}}
@@ -232,8 +223,9 @@ const Tools: React.FC = () => {
)}
{activeSubTool == "delete" && (
<div
className={`tool-button ${activeTool === "delete" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "delete" ? "active" : ""
}`}
onClick={() => {
setActiveTool("delete");
}}
@@ -306,8 +298,9 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "draw-wall" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-wall");
}}
@@ -316,8 +309,9 @@ const Tools: React.FC = () => {
<WallIcon isActive={activeTool === "draw-wall"} />
</div>
<div
className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "draw-zone" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-zone");
}}
@@ -326,8 +320,9 @@ const Tools: React.FC = () => {
<ZoneIcon isActive={activeTool === "draw-zone"} />
</div>
<div
className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "draw-aisle" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-aisle");
}}
@@ -336,8 +331,9 @@ const Tools: React.FC = () => {
<AsileIcon isActive={activeTool === "draw-aisle"} />
</div>
<div
className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "draw-floor" ? "active" : ""
}`}
onClick={() => {
setActiveTool("draw-floor");
}}
@@ -353,8 +349,9 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${activeTool === "measure" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "measure" ? "active" : ""
}`}
onClick={() => {
setActiveTool("measure");
}}
@@ -370,8 +367,9 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${activeTool === "pen" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "pen" ? "active" : ""
}`}
onClick={() => {
setActiveTool("pen");
}}
@@ -408,8 +406,9 @@ const Tools: React.FC = () => {
<div className="split"></div>
<div className="general-options">
<div
className={`tool-button ${activeTool === "comment" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "comment" ? "active" : ""
}`}
onClick={() => {
setActiveTool("comment");
}}
@@ -419,8 +418,9 @@ const Tools: React.FC = () => {
</div>
{toggleThreeD && (
<div
className={`tool-button ${activeTool === "play" ? "active" : ""
}`}
className={`tool-button ${
activeTool === "play" ? "active" : ""
}`}
onClick={() => {
setIsPlaying(!isPlaying);
}}
@@ -434,8 +434,9 @@ const Tools: React.FC = () => {
<>
<div className="split"></div>
<div
className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
}`}
className={`toggle-threed-button${
toggleThreeD ? " toggled" : ""
}`}
onClick={toggleSwitch}
>
<div className="tooltip">toggle view (tab)</div>

4
app/src/components/ui/analysis/ROISummary.tsx
View File

@@ -205,7 +205,7 @@ const ROISummary = ({
</table>
</div>
</div>
<div className="tips-section">
{/* <div className="tips-section">
<div className="tip-header">
<span className="lightbulb-icon">
<LightBulpIcon />
@@ -224,7 +224,7 @@ const ROISummary = ({
<button className="get-tips-button">
<div className="btn">Get ROI Boost Tips</div>
</button>
</div>
</div> */}
</>
) : (
<SkeletonUI type={"default"} />

8
app/src/components/ui/analysis/ThroughputSummary.tsx
View File

@@ -5,7 +5,7 @@ import SkeletonUI from "../../templates/SkeletonUI";
const ProductionCapacity = ({
progressPercent = 50,
avgProcessTime = "28.4 Secs/unit",
avgProcessTime = "28.4",
machineUtilization = "78%",
throughputValue = 128,
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
@@ -34,7 +34,7 @@ const ProductionCapacity = ({
<>
<div className="process-container">
<div className="throughput-value">
<span className="value">{throughputValue}</span> Units/hour
<span className="value">{avgProcessTime}</span> secs/unit
</div>
{/* Dynamic Progress Bar */}
@@ -56,8 +56,8 @@ const ProductionCapacity = ({
<div className="metrics-section">
<div className="metric">
<span className="label">Avg. Process Time</span>
<span className="value">{avgProcessTime}</span>
<span className="label">Units/hour</span>
<span className="value">{throughputValue} avg.</span>
</div>
<div className="metric">
<span className="label">Machine Utilization</span>

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

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

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

@@ -54,57 +54,57 @@ import NavMesh from "../simulation/vehicle/navMesh/navMesh";
import CalculateAreaGroup from "./groups/calculateAreaGroup";
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 } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
@@ -120,42 +120,39 @@ export default function Builder() {
const { setWalls } = useWalls();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
// 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],
type: "Fixed-Move",
},
door: {
modelUrl: door,
scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0],
type: "Fixed-Move",
},
window: {
modelUrl: Window,
scale: [0.75, 0.75, 0.75],
csgscale: [5, 3, 0.5],
csgposition: [0, 1.5, 0],
type: "Free-Move",
},
};
////////// All Toggle's //////////
////////// All Toggle's //////////
useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
@@ -177,167 +174,167 @@ export default function Builder() {
}
}, [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 />
<CalculateAreaGroup />
<NavMesh lines={lines} />
</>
);
<MeasurementTool />
<CalculateAreaGroup />
<NavMesh lines={lines} />
</>
);
}

78
app/src/modules/builder/csg/csg.tsx
View File

@@ -4,51 +4,51 @@ import { useDeleteTool } from "../../../store/store";
import { useRef } from "react";
export interface CsgProps {
position: THREE.Vector3 | [number, number, number];
scale: THREE.Vector3 | [number, number, number];
model: THREE.Object3D;
hoveredDeletableWallItem: { current: THREE.Mesh | null };
position: THREE.Vector3 | [number, number, number];
scale: THREE.Vector3 | [number, number, number];
model: THREE.Object3D;
hoveredDeletableWallItem: { current: THREE.Mesh | null };
}
export const Csg: React.FC<CsgProps> = (props) => {
const { deleteTool } = useDeleteTool();
const modelRef = useRef<THREE.Object3D>();
const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
const { deleteTool } = useDeleteTool();
const modelRef = useRef<THREE.Object3D>();
const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
if (modelRef.current && deleteTool) {
modelRef.current.traverse((child) => {
if (child instanceof THREE.Mesh) {
if (!originalMaterials.current.has(child)) {
originalMaterials.current.set(child, child.material);
}
child.material = child.material.clone();
child.material.color.set(hovered && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
if (modelRef.current && deleteTool) {
modelRef.current.traverse((child) => {
if (child instanceof THREE.Mesh) {
if (!originalMaterials.current.has(child)) {
originalMaterials.current.set(child, child.material);
}
child.material = child.material.clone();
child.material.color.set(hovered && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
}
});
}
});
}
props.hoveredDeletableWallItem.current = hovered ? object : null;
};
props.hoveredDeletableWallItem.current = hovered ? object : null;
};
return (
<Geometry>
<Subtraction {...props}>
return (
<Geometry>
<Base geometry={new THREE.BoxGeometry()} />
<Subtraction {...props}>
<Geometry>
<Base geometry={new THREE.BoxGeometry()} />
</Geometry>
</Subtraction>
<primitive
object={props.model}
ref={modelRef}
onPointerOver={(e: any) => {
e.stopPropagation();
handleHover(true, e.object.parent);
}}
onPointerOut={(e: any) => {
e.stopPropagation();
handleHover(false, null);
}}
/>
</Geometry>
</Subtraction>
<primitive
object={props.model}
ref={modelRef}
onPointerOver={(e: any) => {
e.stopPropagation();
handleHover(true, e.object.parent);
}}
onPointerOut={(e: any) => {
e.stopPropagation();
handleHover(false, null);
}}
/>
</Geometry>
);
);
};

14
app/src/modules/builder/geomentries/floors/addFloorToScene.ts
View File

@@ -2,8 +2,8 @@ import * as THREE from 'three';
import * as Types from "../../../../types/world/worldTypes";
import * as CONSTANTS from "../../../../types/world/worldConstants";
import texturePath from "../../../../assets/textures/floor/concreteFloorWorn001Diff2k.jpg";
import normalPath from "../../../../assets/textures/floor/concreteFloorWorn001NorGl2k.jpg";
import texturePath from "../../../../assets/textures/floor/white.png";
import texturePathDark from "../../../../assets/textures/floor/black.png";
// Cache for materials
const materialCache = new Map<string, THREE.Material>();
@@ -14,6 +14,8 @@ export default function addFloorToScene(
floorGroup: Types.RefGroup,
userData: any,
) {
const savedTheme: string | null = localStorage.getItem('theme');
const textureLoader = new THREE.TextureLoader();
const textureScale = CONSTANTS.floorConfig.textureScale;
@@ -25,19 +27,15 @@ export default function addFloorToScene(
if (materialCache.has(materialKey)) {
material = materialCache.get(materialKey) as THREE.Material;
} else {
const floorTexture = textureLoader.load(texturePath);
const normalMap = textureLoader.load(normalPath);
const floorTexture = textureLoader.load(savedTheme === "dark" ? texturePathDark : texturePath);
// const floorTexture = textureLoader.load(texturePath);
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(textureScale, textureScale);
floorTexture.colorSpace = THREE.SRGBColorSpace;
normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
normalMap.repeat.set(textureScale, textureScale);
material = new THREE.MeshStandardMaterial({
map: floorTexture,
normalMap: normalMap,
side: THREE.DoubleSide,
});

2
app/src/modules/builder/geomentries/walls/addWallItems.ts
View File

@@ -35,7 +35,7 @@ async function AddWallItems(
});
const config = AssetConfigurations[selected];
let positionY = typeof config.positionY === 'function' ? config.positionY(intersectionPoint) : config.positionY;
let positionY = config.type === 'Fixed-Move' ? 0 : intersectionPoint.point.y;
if (positionY === 0) {
positionY = Math.floor(intersectionPoint.point.y / CONSTANTS.wallConfig.height) * CONSTANTS.wallConfig.height;
}

26
app/src/modules/builder/groups/floorItemsGroup.tsx
View File

@@ -1,7 +1,6 @@
import { useFrame, useThree } from "@react-three/fiber";
import {
useActiveTool,
useAsset3dWidget,
useCamMode,
useDeletableFloorItem,
useDeleteTool,
@@ -12,9 +11,7 @@ import {
useSelectedItem,
useSocketStore,
useToggleView,
useTransformMode,
} from "../../../store/store";
import assetVisibility from "../geomentries/assets/assetVisibility";
import { useEffect } from "react";
import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
@@ -29,7 +26,6 @@ import loadInitialFloorItems from "../IntialLoad/loadInitialFloorItems";
import addAssetModel from "../geomentries/assets/addAssetModel";
import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
import useModuleStore from "../../../store/useModuleStore";
// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
import { useEventsStore } from "../../../store/simulation/useEventsStore";
const assetManagerWorker = new Worker(
@@ -62,7 +58,6 @@ const FloorItemsGroup = ({
const { camMode } = useCamMode();
const { deleteTool } = useDeleteTool();
const { setDeletableFloorItem } = useDeletableFloorItem();
const { transformMode } = useTransformMode();
const { setSelectedFloorItem } = useSelectedFloorItem();
const { activeTool } = useActiveTool();
const { selectedItem, setSelectedItem } = useSelectedItem();
@@ -198,9 +193,7 @@ const FloorItemsGroup = ({
};
const startInterval = () => {
if (!intervalId) {
intervalId = setInterval(handleChange, 50);
}
intervalId ??= setInterval(handleChange, 50);
};
const stopInterval = () => {
@@ -262,9 +255,8 @@ const FloorItemsGroup = ({
socket
);
}
const Mode = transformMode;
if (Mode !== null || activeTool === "cursor") {
if (activeTool === "cursor") {
if (!itemsGroup.current) return;
let intersects = raycaster.intersectObjects(
itemsGroup.current.children,
@@ -301,9 +293,8 @@ const FloorItemsGroup = ({
isLeftMouseDown = false;
if (drag) return;
const Mode = transformMode;
if (Mode !== null || activeTool === "cursor") {
if (activeTool === "cursor") {
if (!itemsGroup.current) return;
let intersects = raycaster.intersectObjects(
itemsGroup.current.children,
@@ -417,16 +408,7 @@ const FloorItemsGroup = ({
canvasElement.removeEventListener("drop", onDrop);
canvasElement.removeEventListener("dragover", onDragOver);
};
}, [
deleteTool,
transformMode,
controls,
selectedItem,
state.camera,
state.pointer,
activeTool,
activeModule,
]);
}, [deleteTool, controls, selectedItem, state.camera, state.pointer, activeTool, activeModule,]);
useFrame(() => {
if (controls)

502
app/src/modules/builder/groups/wallItemsGroup.tsx
View File

@@ -1,12 +1,12 @@
import { useEffect } from "react";
import {
useDeleteTool,
useDeletePointOrLine,
useObjectPosition,
useObjectRotation,
useSelectedWallItem,
useSocketStore,
useWallItems,
useDeleteTool,
useDeletePointOrLine,
useObjectPosition,
useObjectRotation,
useSelectedWallItem,
useSocketStore,
useWallItems,
} from "../../../store/store";
import { Csg } from "../csg/csg";
import * as Types from "../../../types/world/worldTypes";
@@ -20,276 +20,276 @@ import AddWallItems from "../geomentries/walls/addWallItems";
import useModuleStore from "../../../store/useModuleStore";
const WallItemsGroup = ({
currentWallItem,
AssetConfigurations,
hoveredDeletableWallItem,
selectedItemsIndex,
setSelectedItemsIndex,
CSGGroup,
currentWallItem,
AssetConfigurations,
hoveredDeletableWallItem,
selectedItemsIndex,
setSelectedItemsIndex,
CSGGroup,
}: any) => {
const state = useThree();
const { socket } = useSocketStore();
const { pointer, camera, raycaster } = state;
const { deleteTool } = useDeleteTool();
const { wallItems, setWallItems } = useWallItems();
const { setObjectPosition } = useObjectPosition();
const { setObjectRotation } = useObjectRotation();
const { deletePointOrLine } = useDeletePointOrLine();
const { setSelectedWallItem } = useSelectedWallItem();
const { activeModule } = useModuleStore();
const state = useThree();
const { socket } = useSocketStore();
const { pointer, camera, raycaster } = state;
const { deleteTool } = useDeleteTool();
const { wallItems, setWallItems } = useWallItems();
const { setObjectPosition } = useObjectPosition();
const { setObjectRotation } = useObjectRotation();
const { deletePointOrLine } = useDeletePointOrLine();
const { setSelectedWallItem } = useSelectedWallItem();
const { activeModule } = useModuleStore();
useEffect(() => {
// Load Wall Items from the backend
loadInitialWallItems(setWallItems, AssetConfigurations);
}, []);
useEffect(() => {
// Load Wall Items from the backend
loadInitialWallItems(setWallItems, AssetConfigurations);
}, []);
////////// Update the Scale value changes in thewallItems State //////////
////////// Update the Scale value changes in thewallItems State //////////
////////// Update the Position value changes in the selected item //////////
////////// Update the Position value changes in the selected item //////////
////////// Update the Rotation value changes in the selected item //////////
////////// Update the Rotation value changes in the selected item //////////
useEffect(() => {
const canvasElement = state.gl.domElement;
function handlePointerMove(e: any) {
if (
selectedItemsIndex !== null &&
!deletePointOrLine &&
e.buttons === 1
) {
const Raycaster = state.raycaster;
const intersects = Raycaster.intersectObjects(
CSGGroup.current?.children[0].children!,
true
);
const Object = intersects.find((child) =>
child.object.name.includes("WallRaycastReference")
);
useEffect(() => {
const canvasElement = state.gl.domElement;
function handlePointerMove(e: any) {
if (
selectedItemsIndex !== null &&
!deletePointOrLine &&
e.buttons === 1
) {
const Raycaster = state.raycaster;
const intersects = Raycaster.intersectObjects(
CSGGroup.current?.children[0].children!,
true
);
const Object = intersects.find((child) =>
child.object.name.includes("WallRaycastReference")
);
if (Object) {
(state.controls as any)!.enabled = false;
setWallItems((prevItems: any) => {
const updatedItems = [...prevItems];
let position: [number, number, number] = [0, 0, 0];
if (Object) {
(state.controls as any)!.enabled = false;
setWallItems((prevItems: any) => {
const updatedItems = [...prevItems];
let position: [number, number, number] = [0, 0, 0];
if (updatedItems[selectedItemsIndex].type === "Fixed-Move") {
position = [
Object!.point.x,
Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) *
CONSTANTS.wallConfig.height,
Object!.point.z,
];
} else if (updatedItems[selectedItemsIndex].type === "Free-Move") {
position = [Object!.point.x, Object!.point.y, Object!.point.z];
if (updatedItems[selectedItemsIndex].type === "Fixed-Move") {
position = [
Object!.point.x,
Math.floor(Object!.point.y / CONSTANTS.wallConfig.height) *
CONSTANTS.wallConfig.height,
Object!.point.z,
];
} else if (updatedItems[selectedItemsIndex].type === "Free-Move") {
position = [Object!.point.x, Object!.point.y, Object!.point.z];
}
requestAnimationFrame(() => {
setObjectPosition(new THREE.Vector3(...position));
setObjectRotation({
x: THREE.MathUtils.radToDeg(Object!.object.rotation.x),
y: THREE.MathUtils.radToDeg(Object!.object.rotation.y),
z: THREE.MathUtils.radToDeg(Object!.object.rotation.z),
});
});
updatedItems[selectedItemsIndex] = {
...updatedItems[selectedItemsIndex],
position: position,
quaternion:
Object!.object.quaternion.clone() as Types.QuaternionType,
};
return updatedItems;
});
}
}
requestAnimationFrame(() => {
setObjectPosition(new THREE.Vector3(...position));
setObjectRotation({
x: THREE.MathUtils.radToDeg(Object!.object.rotation.x),
y: THREE.MathUtils.radToDeg(Object!.object.rotation.y),
z: THREE.MathUtils.radToDeg(Object!.object.rotation.z),
});
});
updatedItems[selectedItemsIndex] = {
...updatedItems[selectedItemsIndex],
position: position,
quaternion:
Object!.object.quaternion.clone() as Types.QuaternionType,
};
return updatedItems;
});
}
}
}
async function handlePointerUp() {
const Raycaster = state.raycaster;
const intersects = Raycaster.intersectObjects(
CSGGroup.current?.children[0].children!,
true
);
const Object = intersects.find((child) =>
child.object.name.includes("WallRaycastReference")
);
if (Object) {
if (selectedItemsIndex !== null) {
let currentItem: any = null;
setWallItems((prevItems: any) => {
const updatedItems = [...prevItems];
const WallItemsForStorage = updatedItems.map((item) => {
const { model, ...rest } = item;
return {
...rest,
modelUuid: model?.uuid,
};
});
currentItem = updatedItems[selectedItemsIndex];
localStorage.setItem(
"WallItems",
JSON.stringify(WallItemsForStorage)
async function handlePointerUp() {
const Raycaster = state.raycaster;
const intersects = Raycaster.intersectObjects(
CSGGroup.current?.children[0].children!,
true
);
return updatedItems;
});
const Object = intersects.find((child) =>
child.object.name.includes("WallRaycastReference")
);
if (Object) {
if (selectedItemsIndex !== null) {
let currentItem: any = null;
setWallItems((prevItems: any) => {
const updatedItems = [...prevItems];
const WallItemsForStorage = updatedItems.map((item) => {
const { model, ...rest } = item;
return {
...rest,
modelUuid: model?.uuid,
};
});
setTimeout(async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
currentItem = updatedItems[selectedItemsIndex];
localStorage.setItem(
"WallItems",
JSON.stringify(WallItemsForStorage)
);
return updatedItems;
});
//REST
setTimeout(async () => {
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
// await setWallItem(
// organization,
// currentItem?.model?.uuid,
// currentItem.modelName,
// currentItem.type!,
// currentItem.csgposition!,
// currentItem.csgscale!,
// currentItem.position,
// currentItem.quaternion,
// currentItem.scale!,
// )
//REST
//SOCKET
// await setWallItem(
// organization,
// currentItem?.model?.uuid,
// currentItem.modelName,
// currentItem.type!,
// currentItem.csgposition!,
// currentItem.csgscale!,
// currentItem.position,
// currentItem.quaternion,
// currentItem.scale!,
// )
const data = {
organization: organization,
modelUuid: currentItem.model?.uuid!,
modelName: currentItem.modelName!,
type: currentItem.type!,
csgposition: currentItem.csgposition!,
csgscale: currentItem.csgscale!,
position: currentItem.position!,
quaternion: currentItem.quaternion,
scale: currentItem.scale!,
socketId: socket.id,
};
//SOCKET
socket.emit("v1:wallItems:set", data);
}, 0);
(state.controls as any)!.enabled = true;
const data = {
organization: organization,
modelUuid: currentItem.model?.uuid!,
modelName: currentItem.modelName!,
type: currentItem.type!,
csgposition: currentItem.csgposition!,
csgscale: currentItem.csgscale!,
position: currentItem.position!,
quaternion: currentItem.quaternion,
scale: currentItem.scale!,
socketId: socket.id,
};
socket.emit("v1:wallItems:set", data);
}, 0);
(state.controls as any)!.enabled = true;
}
}
}
}
}
canvasElement.addEventListener("pointermove", handlePointerMove);
canvasElement.addEventListener("pointerup", handlePointerUp);
canvasElement.addEventListener("pointermove", handlePointerMove);
canvasElement.addEventListener("pointerup", handlePointerUp);
return () => {
canvasElement.removeEventListener("pointermove", handlePointerMove);
canvasElement.removeEventListener("pointerup", handlePointerUp);
};
}, [selectedItemsIndex]);
return () => {
canvasElement.removeEventListener("pointermove", handlePointerMove);
canvasElement.removeEventListener("pointerup", handlePointerUp);
};
}, [selectedItemsIndex]);
useEffect(() => {
const canvasElement = state.gl.domElement;
let drag = false;
let isLeftMouseDown = false;
useEffect(() => {
const canvasElement = state.gl.domElement;
let drag = false;
let isLeftMouseDown = false;
const onMouseDown = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = true;
drag = false;
}
};
const onMouseDown = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = true;
drag = false;
}
};
const onMouseUp = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = false;
if (!drag && deleteTool && activeModule === "builder") {
DeleteWallItems(
hoveredDeletableWallItem,
setWallItems,
wallItems,
socket
);
const onMouseUp = (evt: any) => {
if (evt.button === 0) {
isLeftMouseDown = false;
if (!drag && deleteTool && activeModule === "builder") {
DeleteWallItems(
hoveredDeletableWallItem,
setWallItems,
wallItems,
socket
);
}
}
};
const onMouseMove = () => {
if (isLeftMouseDown) {
drag = true;
}
};
const onDrop = (event: any) => {
if (!event.dataTransfer?.files[0]) return;
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
if (AssetConfigurations[event.dataTransfer.files[0].name.split(".")[0]]) {
const selected = event.dataTransfer.files[0].name.split(".")[0];
if (AssetConfigurations[selected]?.type) {
AddWallItems(
selected,
raycaster,
CSGGroup,
AssetConfigurations,
setWallItems,
socket
);
}
event.preventDefault();
}
};
const onDragOver = (event: any) => {
event.preventDefault();
};
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
canvasElement.addEventListener("drop", onDrop);
canvasElement.addEventListener("dragover", onDragOver);
return () => {
canvasElement.removeEventListener("mousedown", onMouseDown);
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
canvasElement.removeEventListener("drop", onDrop);
canvasElement.removeEventListener("dragover", onDragOver);
};
}, [deleteTool, wallItems]);
useEffect(() => {
if (deleteTool && activeModule === "builder") {
handleMeshMissed(
currentWallItem,
setSelectedWallItem,
setSelectedItemsIndex
);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
}
}
};
}, [deleteTool]);
const onMouseMove = () => {
if (isLeftMouseDown) {
drag = true;
}
};
const onDrop = (event: any) => {
if (!event.dataTransfer?.files[0]) return;
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(pointer, camera);
if (AssetConfigurations[event.dataTransfer.files[0].name.split(".")[0]]) {
const selected = event.dataTransfer.files[0].name.split(".")[0];
if (AssetConfigurations[selected]?.type) {
AddWallItems(
selected,
raycaster,
CSGGroup,
AssetConfigurations,
setWallItems,
socket
);
}
event.preventDefault();
}
};
const onDragOver = (event: any) => {
event.preventDefault();
};
canvasElement.addEventListener("mousedown", onMouseDown);
canvasElement.addEventListener("mouseup", onMouseUp);
canvasElement.addEventListener("mousemove", onMouseMove);
canvasElement.addEventListener("drop", onDrop);
canvasElement.addEventListener("dragover", onDragOver);
return () => {
canvasElement.removeEventListener("mousedown", onMouseDown);
canvasElement.removeEventListener("mouseup", onMouseUp);
canvasElement.removeEventListener("mousemove", onMouseMove);
canvasElement.removeEventListener("drop", onDrop);
canvasElement.removeEventListener("dragover", onDragOver);
};
}, [deleteTool, wallItems]);
useEffect(() => {
if (deleteTool && activeModule === "builder") {
handleMeshMissed(
currentWallItem,
setSelectedWallItem,
setSelectedItemsIndex
);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
}
}, [deleteTool]);
return (
<>
{wallItems.map((item: Types.WallItem, index: number) => (
<group
key={index}
position={item.position}
quaternion={item.quaternion}
scale={item.scale}
>
<Csg
position={item.csgposition!}
scale={item.csgscale!}
model={item.model!}
hoveredDeletableWallItem={hoveredDeletableWallItem}
/>
</group>
))}
</>
);
return (
<>
{wallItems.map((item: Types.WallItem, index: number) => (
<group
key={index}
position={item.position}
quaternion={item.quaternion}
scale={item.scale}
>
<Csg
position={item.csgposition!}
scale={item.csgscale!}
model={item.model!}
hoveredDeletableWallItem={hoveredDeletableWallItem}
/>
</group>
))}
</>
);
};
export default WallItemsGroup;

73
app/src/modules/builder/groups/wallsAndWallItems.tsx
View File

@@ -1,29 +1,32 @@
import { Geometry } from "@react-three/csg";
import { useDeleteTool, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store";
import {
useDeleteTool,
useSelectedWallItem,
useToggleView,
useWallItems,
useWalls,
} from "../../../store/store";
import handleMeshDown from "../eventFunctions/handleMeshDown";
import handleMeshMissed from "../eventFunctions/handleMeshMissed";
import WallsMesh from "./wallsMesh";
import WallItemsGroup from "./wallItemsGroup";
import { useEffect } from "react";
const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsIndex, selectedItemsIndex, currentWallItem, csg, lines, hoveredDeletableWallItem }: any) => {
const { walls, setWalls } = useWalls();
const { wallItems, setWallItems } = useWallItems();
const { toggleView, setToggleView } = useToggleView();
const { deleteTool, setDeleteTool } = useDeleteTool();
const { transformMode, setTransformMode } = useTransformMode();
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
useEffect(() => {
if (transformMode === null) {
if (!deleteTool) {
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
}
}
}, [transformMode])
const WallsAndWallItems = ({
CSGGroup,
AssetConfigurations,
setSelectedItemsIndex,
selectedItemsIndex,
currentWallItem,
csg,
lines,
hoveredDeletableWallItem,
}: any) => {
const { walls } = useWalls();
const { wallItems } = useWallItems();
const { toggleView } = useToggleView();
const { deleteTool } = useDeleteTool();
const { setSelectedWallItem } = useSelectedWallItem();
return (
<mesh
@@ -33,13 +36,24 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
receiveShadow
visible={!toggleView}
onClick={(event) => {
if (!deleteTool && transformMode !== null) {
handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView);
if (!deleteTool) {
handleMeshDown(
event,
currentWallItem,
setSelectedWallItem,
setSelectedItemsIndex,
wallItems,
toggleView
);
}
}}
onPointerMissed={() => {
if (!deleteTool) {
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
handleMeshMissed(
currentWallItem,
setSelectedWallItem,
setSelectedItemsIndex
);
setSelectedWallItem(null);
setSelectedItemsIndex(null);
}
@@ -47,10 +61,17 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
>
<Geometry ref={csg as any} computeVertexNormals useGroups>
<WallsMesh lines={lines} />
<WallItemsGroup currentWallItem={currentWallItem} AssetConfigurations={AssetConfigurations} hoveredDeletableWallItem={hoveredDeletableWallItem} selectedItemsIndex={selectedItemsIndex} setSelectedItemsIndex={setSelectedItemsIndex} CSGGroup={CSGGroup} />
<WallItemsGroup
currentWallItem={currentWallItem}
AssetConfigurations={AssetConfigurations}
hoveredDeletableWallItem={hoveredDeletableWallItem}
selectedItemsIndex={selectedItemsIndex}
setSelectedItemsIndex={setSelectedItemsIndex}
CSGGroup={CSGGroup}
/>
</Geometry>
</mesh>
)
}
);
};
export default WallsAndWallItems;
export default WallsAndWallItems;

53
app/src/modules/builder/groups/wallsMesh.tsx
View File

@@ -1,23 +1,27 @@
import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import * as CONSTANTS from '../../../types/world/worldConstants';
import { Base } from '@react-three/csg';
import { MeshDiscardMaterial } from '@react-three/drei';
import { useUpdateScene, useWalls } from '../../../store/store';
import { useEffect } from 'react';
import { getLines } from '../../../services/factoryBuilder/lines/getLinesApi';
import objectLinesToArray from '../geomentries/lines/lineConvertions/objectLinesToArray';
import loadWalls from '../geomentries/walls/loadWalls';
import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { Base } from "@react-three/csg";
import { MeshDiscardMaterial } from "@react-three/drei";
import { useUpdateScene, useWalls } from "../../../store/store";
import React, { useEffect } from "react";
import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
import loadWalls from "../geomentries/walls/loadWalls";
// texture
import texturePath from "../../../assets/textures/floor/wall-tex.png";
const WallsMesh = ({ lines }: any) => {
// Cache for materials
const materialCache = new Map<string, THREE.Material>();
const WallsMeshComponent = ({ lines }: any) => {
const { walls, setWalls } = useWalls();
const { updateScene, setUpdateScene } = useUpdateScene();
useEffect(() => {
if (updateScene) {
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
getLines(organization).then((data) => {
const Lines: Types.Lines = objectLinesToArray(data);
@@ -26,15 +30,22 @@ const WallsMesh = ({ lines }: any) => {
if (Lines) {
loadWalls(lines, setWalls);
}
})
});
setUpdateScene(false);
}
}, [updateScene])
}, [updateScene]);
const textureLoader = new THREE.TextureLoader();
const wallTexture = textureLoader.load(texturePath);
wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
wallTexture.repeat.set(0.1, 0.1);
wallTexture.colorSpace = THREE.SRGBColorSpace;
return (
<>
{walls.map((wall: Types.Wall, index: number) => (
<mesh key={index}>
<mesh key={index} renderOrder={1}>
<Base
name={`Wall${index + 1}`}
geometry={wall[0]}
@@ -45,6 +56,7 @@ const WallsMesh = ({ lines }: any) => {
<meshStandardMaterial
side={THREE.DoubleSide}
color={CONSTANTS.wallConfig.defaultColor}
map={wallTexture}
/>
</Base>
<mesh
@@ -59,7 +71,8 @@ const WallsMesh = ({ lines }: any) => {
</mesh>
))}
</>
)
}
);
};
export default WallsMesh;
const WallsMesh = React.memo(WallsMeshComponent);
export default WallsMesh;

3
app/src/modules/scene/controls/controls.tsx
View File

@@ -10,6 +10,7 @@ import updateCamPosition from "../camera/updateCameraPosition";
import CamMode from "../camera/camMode";
import SwitchView from "../camera/switchView";
import SelectionControls from "./selectionControls/selectionControls";
import TransformControl from "./transformControls/transformControls";
export default function Controls() {
const controlsRef = useRef<CameraControls>(null);
@@ -138,6 +139,8 @@ export default function Controls() {
<SelectionControls />
<TransformControl />
</>
);
}

486
app/src/modules/scene/controls/selectionControls/distanceFindingControls.tsx
View File

@@ -1,270 +1,270 @@
import React, { useRef } from "react";
import {
Vector3,
Raycaster,
BufferGeometry,
LineBasicMaterial,
Line,
Mesh,
Group,
Vector3,
Raycaster,
BufferGeometry,
LineBasicMaterial,
Line,
Mesh,
Group,
} from "three";
import { useThree, useFrame } from "@react-three/fiber";
import { Html } from "@react-three/drei";
interface DistanceFindingControlsProps {
boundingBoxRef: React.RefObject<Mesh>;
object: number;
boundingBoxRef: React.RefObject<Mesh>;
object: number;
}
const DistanceFindingControls = ({
boundingBoxRef,
object,
boundingBoxRef,
object,
}: DistanceFindingControlsProps) => {
const { camera, scene } = useThree();
const { camera, scene } = useThree();
// Refs for measurement lines
const line1 = useRef<Line>(null);
const line2 = useRef<Line>(null);
const line3 = useRef<Line>(null);
const line4 = useRef<Line>(null);
const line5 = useRef<Line>(null);
// Refs for measurement lines
const line1 = useRef<Line>(null);
const line2 = useRef<Line>(null);
const line3 = useRef<Line>(null);
const line4 = useRef<Line>(null);
const line5 = useRef<Line>(null);
// Refs for measurement text labels
const textPosX = useRef<Group>(null);
const textNegX = useRef<Group>(null);
const textPosZ = useRef<Group>(null);
const textNegZ = useRef<Group>(null);
const textPosY = useRef<Group>(null);
// Refs for measurement text labels
const textPosX = useRef<Group>(null);
const textNegX = useRef<Group>(null);
const textPosZ = useRef<Group>(null);
const textNegZ = useRef<Group>(null);
const textPosY = useRef<Group>(null);
// Store line geometries to avoid recreation
const lineGeometries = useRef({
posX: new BufferGeometry(),
negX: new BufferGeometry(),
posZ: new BufferGeometry(),
negZ: new BufferGeometry(),
posY: new BufferGeometry(),
});
// Store line geometries to avoid recreation
const lineGeometries = useRef({
posX: new BufferGeometry(),
negX: new BufferGeometry(),
posZ: new BufferGeometry(),
negZ: new BufferGeometry(),
posY: new BufferGeometry(),
});
useFrame(() => {
if (!boundingBoxRef?.current) return;
useFrame(() => {
if (!boundingBoxRef?.current) return;
boundingBoxRef.current.geometry.computeBoundingBox();
const bbox = boundingBoxRef.current.geometry.boundingBox;
boundingBoxRef.current.geometry.computeBoundingBox();
const bbox = boundingBoxRef.current.geometry.boundingBox;
if (!bbox) return;
if (!bbox) return;
const size = {
x: bbox.max.x - bbox.min.x,
y: bbox.max.y - bbox.min.y,
z: bbox.max.z - bbox.min.z,
const size = {
x: bbox.max.x - bbox.min.x,
y: bbox.max.y - bbox.min.y,
z: bbox.max.z - bbox.min.z,
};
const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
if (!vec) return;
updateLine({
line: line1.current,
geometry: lineGeometries.current.posX,
direction: new Vector3(1, 0, 0), // Positive X
angle: "pos",
mesh: textPosX,
vec,
size,
});
updateLine({
line: line2.current,
geometry: lineGeometries.current.negX,
direction: new Vector3(-1, 0, 0), // Negative X
angle: "neg",
mesh: textNegX,
vec,
size,
});
updateLine({
line: line3.current,
geometry: lineGeometries.current.posZ,
direction: new Vector3(0, 0, 1), // Positive Z
angle: "pos",
mesh: textPosZ,
vec,
size,
});
updateLine({
line: line4.current,
geometry: lineGeometries.current.negZ,
direction: new Vector3(0, 0, -1), // Negative Z
angle: "neg",
mesh: textNegZ,
vec,
size,
});
updateLine({
line: line5.current,
geometry: lineGeometries.current.posY,
direction: new Vector3(0, -1, 0), // Down (Y)
angle: "posY",
mesh: textPosY,
vec,
size,
});
});
const updateLine = ({
line,
geometry,
direction,
angle,
mesh,
vec,
size,
}: {
line: Line | null;
geometry: BufferGeometry;
direction: Vector3;
angle: string;
mesh: React.RefObject<Group>;
vec: Vector3;
size: { x: number; y: number; z: number };
}) => {
if (!line) return;
const points = [];
if (angle === "pos") {
points[0] = new Vector3(vec.x, vec.y, vec.z).add(
new Vector3((direction.x * size.x) / 2, 0, (direction.z * size.z) / 2)
);
} else if (angle === "neg") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3((-direction.x * size.x) / 2, 0, (-direction.z * size.z) / 2)
);
} else if (angle === "posY") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3(0, size.y / 2, 0)
);
}
const ray = new Raycaster();
if (camera) ray.camera = camera;
ray.set(new Vector3(vec.x, vec.y, vec.z), direction);
ray.params.Line.threshold = 0.1;
// Find intersection points
const wallsGroup = scene.children.find((val) =>
val?.name.includes("Walls")
);
const intersects = wallsGroup
? ray.intersectObjects([wallsGroup], true)
: [];
// Find intersection point
if (intersects[0]) {
for (const intersect of intersects) {
if (intersect.object.name.includes("Wall")) {
points[1] =
angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
break;
}
}
}
// Update line geometry
if (points[1]) {
geometry.dispose();
geometry.setFromPoints([points[0], points[1]]);
line.geometry = geometry;
// Update measurement text
if (mesh?.current) {
geometry.computeBoundingSphere();
const center = geometry.boundingSphere?.center;
if (center) {
mesh.current.position.copy(center);
}
const label = document.getElementById(mesh.current.name);
if (label) {
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
}
}
} else {
// No intersection found - clear the line
geometry.dispose();
geometry.setFromPoints([new Vector3(), new Vector3()]);
line.geometry = geometry;
const label = document.getElementById(mesh?.current?.name ?? "");
if (label) label.innerText = "";
}
};
const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
const Material = new LineBasicMaterial({ color: "#d2baff" });
if (!vec) return;
updateLine({
line: line1.current,
geometry: lineGeometries.current.posX,
direction: new Vector3(1, 0, 0), // Positive X
angle: "pos",
mesh: textPosX,
vec,
size,
});
updateLine({
line: line2.current,
geometry: lineGeometries.current.negX,
direction: new Vector3(-1, 0, 0), // Negative X
angle: "neg",
mesh: textNegX,
vec,
size,
});
updateLine({
line: line3.current,
geometry: lineGeometries.current.posZ,
direction: new Vector3(0, 0, 1), // Positive Z
angle: "pos",
mesh: textPosZ,
vec,
size,
});
updateLine({
line: line4.current,
geometry: lineGeometries.current.negZ,
direction: new Vector3(0, 0, -1), // Negative Z
angle: "neg",
mesh: textNegZ,
vec,
size,
});
updateLine({
line: line5.current,
geometry: lineGeometries.current.posY,
direction: new Vector3(0, -1, 0), // Down (Y)
angle: "posY",
mesh: textPosY,
vec,
size,
});
});
const updateLine = ({
line,
geometry,
direction,
angle,
mesh,
vec,
size,
}: {
line: Line | null;
geometry: BufferGeometry;
direction: Vector3;
angle: string;
mesh: React.RefObject<Group>;
vec: Vector3;
size: { x: number; y: number; z: number };
}) => {
if (!line) return;
const points = [];
if (angle === "pos") {
points[0] = new Vector3(vec.x, vec.y, vec.z).add(
new Vector3((direction.x * size.x) / 2, 0, (direction.z * size.z) / 2)
);
} else if (angle === "neg") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3((-direction.x * size.x) / 2, 0, (-direction.z * size.z) / 2)
);
} else if (angle === "posY") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3(0, size.y / 2, 0)
);
}
const ray = new Raycaster();
if (camera) ray.camera = camera;
ray.set(new Vector3(vec.x, vec.y, vec.z), direction);
ray.params.Line.threshold = 0.1;
// Find intersection points
const wallsGroup = scene.children.find((val) =>
val?.name.includes("Walls")
);
const intersects = wallsGroup
? ray.intersectObjects([wallsGroup], true)
: [];
// Find intersection point
if (intersects[0]) {
for (const intersect of intersects) {
if (intersect.object.name.includes("Wall")) {
points[1] =
angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
break;
}
}
}
// Update line geometry
if (points[1]) {
geometry.dispose();
geometry.setFromPoints([points[0], points[1]]);
line.geometry = geometry;
// Update measurement text
if (mesh?.current) {
geometry.computeBoundingSphere();
const center = geometry.boundingSphere?.center;
if (center) {
mesh.current.position.copy(center);
}
const label = document.getElementById(mesh.current.name);
if (label) {
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
}
}
} else {
// No intersection found - clear the line
geometry.dispose();
geometry.setFromPoints([new Vector3(), new Vector3()]);
line.geometry = geometry;
const label = document.getElementById(mesh?.current?.name ?? "");
if (label) label.innerText = "";
}
};
const Material = new LineBasicMaterial({ color: "#d2baff" });
return (
<>
{/* Measurement text labels */}
{boundingBoxRef.current && object > 0 && (
return (
<>
<group name="textPosX" ref={textPosX}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textPosX"></div>
</Html>
</group>
<group name="textNegX" ref={textNegX}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textNegX"></div>
</Html>
</group>
<group name="textPosZ" ref={textPosZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[2, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textPosZ"></div>
</Html>
</group>
<group name="textNegZ" ref={textNegZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textNegZ"></div>
</Html>
</group>
{/* Measurement text labels */}
{boundingBoxRef.current && object > 0 && (
<>
<group name="textPosX" ref={textPosX}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textPosX"></div>
</Html>
</group>
<group name="textNegX" ref={textNegX}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textNegX"></div>
</Html>
</group>
<group name="textPosZ" ref={textPosZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[2, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textPosZ"></div>
</Html>
</group>
<group name="textNegZ" ref={textNegZ}>
<Html
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
style={{ pointerEvents: "none" }}
>
<div className="distance-label" id="textNegZ"></div>
</Html>
</group>
{/* Measurement lines */}
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line1}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line2}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line3}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line4}
/>
{/* Measurement lines */}
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line1}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line2}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line3}
/>
<primitive
object={new Line(new BufferGeometry(), Material)}
ref={line4}
/>
</>
)}
</>
)}
</>
);
);
};
export default DistanceFindingControls;

653
app/src/modules/scene/controls/selectionControls/moveControls.tsx
View File

@@ -2,10 +2,10 @@ import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import {
useFloorItems,
useSelectedAssets,
useSocketStore,
useToggleView,
useFloorItems,
useSelectedAssets,
useSocketStore,
useToggleView,
} from "../../../../store/store";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify";
@@ -19,370 +19,337 @@ import { snapControls } from "../../../../utils/handleSnap";
import DistanceFindingControls from "./distanceFindingControls";
function MoveControls({
movedObjects,
setMovedObjects,
itemsGroupRef,
copiedObjects,
setCopiedObjects,
pastedObjects,
setpastedObjects,
duplicatedObjects,
setDuplicatedObjects,
selectionGroup,
rotatedObjects,
setRotatedObjects,
boundingBoxRef,
}: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
const plane = useMemo(
() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
[]
);
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef<Types.FloorItems>([]);
const [keyEvent, setKeyEvent] = useState<
"Ctrl" | "Shift" | "Ctrl+Shift" | ""
>("");
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
const updateBackend = (
productName: string,
productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData,
});
};
useEffect(() => {
if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
const canvasElement = gl.domElement;
canvasElement.tabIndex = 0;
let isMoving = false;
const onPointerDown = () => {
isMoving = false;
};
const onPointerMove = () => {
isMoving = true;
};
const onKeyUp = (event: KeyboardEvent) => {
// When any modifier is released, reset snap
const isModifierKey = event.key === "Control" || event.key === "Shift";
if (isModifierKey) {
setKeyEvent("");
}
};
const onPointerUp = (event: PointerEvent) => {
if (!isMoving && movedObjects.length > 0 && event.button === 0) {
event.preventDefault();
placeMovedAssets();
}
if (!isMoving && movedObjects.length > 0 && event.button === 2) {
event.preventDefault();
clearSelection();
movedObjects.forEach((asset: any) => {
if (itemsGroupRef.current) {
itemsGroupRef.current.attach(asset);
}
});
setFloorItems([...floorItems, ...itemsData.current]);
setMovedObjects([]);
itemsData.current = [];
}
setKeyEvent("");
};
const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event);
if (
pastedObjects.length > 0 ||
duplicatedObjects.length > 0 ||
rotatedObjects.length > 0
)
return;
if (
keyCombination === "Ctrl" ||
keyCombination === "Ctrl+Shift" ||
keyCombination === "Shift"
) {
// update state here
setKeyEvent(keyCombination);
} else {
setKeyEvent("");
}
if (keyCombination === "G") {
if (selectedAssets.length > 0) {
moveAssets();
itemsData.current = floorItems.filter((item: { modelUuid: string }) =>
selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
);
}
}
if (keyCombination === "ESCAPE") {
event.preventDefault();
clearSelection();
movedObjects.forEach((asset: any) => {
if (itemsGroupRef.current) {
itemsGroupRef.current.attach(asset);
}
});
setFloorItems([...floorItems, ...itemsData.current]);
setMovedObjects([]);
itemsData.current = [];
}
};
if (!toggleView) {
canvasElement.addEventListener("pointerdown", onPointerDown);
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("keydown", onKeyDown);
canvasElement?.addEventListener("keyup", onKeyUp);
}
return () => {
canvasElement.removeEventListener("pointerdown", onPointerDown);
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("keydown", onKeyDown);
canvasElement?.removeEventListener("keyup", onKeyUp);
};
}, [
camera,
controls,
scene,
toggleView,
selectedAssets,
socket,
floorItems,
pastedObjects,
duplicatedObjects,
movedObjects,
setMovedObjects,
itemsGroupRef,
pastedObjects,
setpastedObjects,
duplicatedObjects,
setDuplicatedObjects,
selectionGroup,
rotatedObjects,
keyEvent,
]);
setRotatedObjects,
boundingBoxRef,
}: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
let moveSpeed = keyEvent === "Ctrl" || "Ctrl+Shift" ? 1 : 0.25;
const { toggleView } = useToggleView();
const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const { selectedProduct } = useSelectedProduct();
const { floorItems, setFloorItems } = useFloorItems();
const { socket } = useSocketStore();
const itemsData = useRef<Types.FloorItems>([]);
const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("");
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
useFrame(() => {
if (movedObjects.length > 0) {
const intersectionPoint = new THREE.Vector3();
raycaster.setFromCamera(pointer, camera);
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
const updateBackend = (
productName: string,
productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData,
});
};
if (point) {
let targetX = point.x;
let targetZ = point.z;
if (keyEvent === "Ctrl") {
targetX = snapControls(targetX, "Ctrl");
targetZ = snapControls(targetZ, "Ctrl");
}
// else if (keyEvent === "Ctrl+Shift") {
// targetX = snapControls(targetX, "Ctrl+Shift");
// targetZ = snapControls(targetZ, "Ctrl+Shift");
// } else if (keyEvent === "Shift") {
// targetX = snapControls(targetX, "Shift");
// targetZ = snapControls(targetZ, "Shift");
// } else {
// }
useEffect(() => {
if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
const position = new THREE.Vector3();
const canvasElement = gl.domElement;
canvasElement.tabIndex = 0;
if (boundingBoxRef.current) {
boundingBoxRef.current.getWorldPosition(position);
selectionGroup.current.position.lerp(
new THREE.Vector3(
targetX - (position.x - selectionGroup.current.position.x),
selectionGroup.current.position.y,
targetZ - (position.z - selectionGroup.current.position.z)
),
moveSpeed
);
} else {
const box = new THREE.Box3();
movedObjects.forEach((obj: THREE.Object3D) =>
box.expandByObject(obj)
);
const center = new THREE.Vector3();
box.getCenter(center);
let isMoving = false;
selectionGroup.current.position.lerp(
new THREE.Vector3(
targetX - (center.x - selectionGroup.current.position.x),
selectionGroup.current.position.y,
targetZ - (center.z - selectionGroup.current.position.z)
),
moveSpeed
);
}
}
}
});
const moveAssets = () => {
const updatedItems = floorItems.filter(
(item: { modelUuid: string }) =>
!selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
);
setFloorItems(updatedItems);
setMovedObjects(selectedAssets);
selectedAssets.forEach((asset: any) => {
selectionGroup.current.attach(asset);
});
};
const placeMovedAssets = () => {
if (movedObjects.length === 0) return;
movedObjects.forEach(async (obj: THREE.Object3D) => {
const worldPosition = new THREE.Vector3();
obj.getWorldPosition(worldPosition);
selectionGroup.current.remove(obj);
obj.position.copy(worldPosition);
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
modelUuid: obj.uuid,
modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
isVisible: true,
const onPointerDown = () => {
isMoving = false;
};
if (obj.userData.eventData) {
const eventData = useEventsStore
.getState()
.getEventByModelUuid(obj.userData.modelUuid);
const productData = useProductStore
.getState()
.getEventByModelUuid(
useSelectedProduct.getState().selectedProduct.productId,
obj.userData.modelUuid
);
const onPointerMove = () => {
isMoving = true;
};
if (eventData) {
useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
});
}
if (productData) {
const event = useProductStore
.getState()
.updateEvent(
useSelectedProduct.getState().selectedProduct.productId,
obj.userData.modelUuid,
{
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
}
);
const onKeyUp = (event: KeyboardEvent) => {
const isModifierKey = event.key === "Control" || event.key === "Shift";
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
if (isModifierKey) {
setKeyEvent("");
}
};
const onPointerUp = (event: PointerEvent) => {
if (!isMoving && movedObjects.length > 0 && event.button === 0) {
event.preventDefault();
placeMovedAssets();
}
if (!isMoving && movedObjects.length > 0 && event.button === 2) {
event.preventDefault();
clearSelection();
movedObjects.forEach((asset: any) => {
if (itemsGroupRef.current) {
itemsGroupRef.current.attach(asset);
}
});
setFloorItems([...floorItems, ...itemsData.current]);
setMovedObjects([]);
itemsData.current = [];
}
setKeyEvent("");
};
const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event);
if (pastedObjects.length > 0 || duplicatedObjects.length > 0 || rotatedObjects.length > 0)
return;
if (keyCombination === "Ctrl" || keyCombination === "Ctrl+Shift" || keyCombination === "Shift") {
setKeyEvent(keyCombination);
} else {
setKeyEvent("");
}
newFloorItem.eventData = eventData;
}
}
if (keyCombination === "G") {
if (selectedAssets.length > 0) {
moveAssets();
itemsData.current = floorItems.filter((item: { modelUuid: string }) =>
selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
);
}
}
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
if (keyCombination === "ESCAPE") {
event.preventDefault();
//REST
clearSelection();
movedObjects.forEach((asset: any) => {
if (itemsGroupRef.current) {
itemsGroupRef.current.attach(asset);
}
});
// await setFloorItemApi(
// organization,
// obj.uuid,
// obj.userData.name,
// [worldPosition.x, worldPosition.y, worldPosition.z],
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
// obj.userData.modelId,
// false,
// true,
// );
setFloorItems([...floorItems, ...itemsData.current]);
//SOCKET
const data = {
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
isVisible: true,
socketId: socket.id,
setMovedObjects([]);
itemsData.current = [];
}
};
socket.emit("v2:model-asset:add", data);
if (!toggleView) {
canvasElement.addEventListener("pointerdown", onPointerDown);
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("keydown", onKeyDown);
canvasElement?.addEventListener("keyup", onKeyUp);
}
itemsGroupRef.current.add(obj);
}
return () => {
canvasElement.removeEventListener("pointerdown", onPointerDown);
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("keydown", onKeyDown);
canvasElement?.removeEventListener("keyup", onKeyUp);
};
}, [camera, controls, scene, toggleView, selectedAssets, socket, floorItems, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent,]);
let moveSpeed = keyEvent === "Ctrl" || "Ctrl+Shift" ? 1 : 0.25;
useFrame(() => {
if (movedObjects.length > 0) {
const intersectionPoint = new THREE.Vector3();
raycaster.setFromCamera(pointer, camera);
const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
if (point) {
let targetX = point.x;
let targetZ = point.z;
if (keyEvent === "Ctrl") {
targetX = snapControls(targetX, "Ctrl");
targetZ = snapControls(targetZ, "Ctrl");
}
// else if (keyEvent === "Ctrl+Shift") {
// targetX = snapControls(targetX, "Ctrl+Shift");
// targetZ = snapControls(targetZ, "Ctrl+Shift");
// } else if (keyEvent === "Shift") {
// targetX = snapControls(targetX, "Shift");
// targetZ = snapControls(targetZ, "Shift");
// } else {
// }
const position = new THREE.Vector3();
if (boundingBoxRef.current) {
boundingBoxRef.current.getWorldPosition(position);
selectionGroup.current.position.lerp(
new THREE.Vector3(
targetX - (position.x - selectionGroup.current.position.x),
selectionGroup.current.position.y,
targetZ - (position.z - selectionGroup.current.position.z)
),
moveSpeed
);
} else {
const box = new THREE.Box3();
movedObjects.forEach((obj: THREE.Object3D) =>
box.expandByObject(obj)
);
const center = new THREE.Vector3();
box.getCenter(center);
selectionGroup.current.position.lerp(
new THREE.Vector3(
targetX - (center.x - selectionGroup.current.position.x),
selectionGroup.current.position.y,
targetZ - (center.z - selectionGroup.current.position.z)
),
moveSpeed
);
}
}
}
});
toast.success("Object moved!");
itemsData.current = [];
clearSelection();
};
const moveAssets = () => {
const updatedItems = floorItems.filter(
(item: { modelUuid: string }) =>
!selectedAssets.some((asset: any) => asset.uuid === item.modelUuid)
);
setFloorItems(updatedItems);
setMovedObjects(selectedAssets);
selectedAssets.forEach((asset: any) => {
selectionGroup.current.attach(asset);
});
};
const clearSelection = () => {
selectionGroup.current.children = [];
selectionGroup.current.position.set(0, 0, 0);
selectionGroup.current.rotation.set(0, 0, 0);
setpastedObjects([]);
setDuplicatedObjects([]);
setMovedObjects([]);
setRotatedObjects([]);
setSelectedAssets([]);
setKeyEvent("");
};
const placeMovedAssets = () => {
if (movedObjects.length === 0) return;
return (
<DistanceFindingControls
boundingBoxRef={boundingBoxRef}
object={movedObjects.length}
/>
);
movedObjects.forEach(async (obj: THREE.Object3D) => {
const worldPosition = new THREE.Vector3();
obj.getWorldPosition(worldPosition);
selectionGroup.current.remove(obj);
obj.position.copy(worldPosition);
if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = {
modelUuid: obj.uuid,
modelName: obj.userData.name,
modelfileID: obj.userData.modelId,
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
isVisible: true,
};
if (obj.userData.eventData) {
const eventData = useEventsStore.getState().getEventByModelUuid(obj.userData.modelUuid);
const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productId, obj.userData.modelUuid);
if (eventData) {
useEventsStore.getState().updateEvent(obj.userData.modelUuid, {
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
});
}
if (productData) {
const event = useProductStore
.getState()
.updateEvent(
selectedProduct.productId,
obj.userData.modelUuid,
{
position: [worldPosition.x, worldPosition.y, worldPosition.z],
rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
}
);
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
newFloorItem.eventData = eventData;
}
}
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), newFloorItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
//REST
// await setFloorItemApi(
// organization,
// obj.uuid,
// obj.userData.name,
// [worldPosition.x, worldPosition.y, worldPosition.z],
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
// obj.userData.modelId,
// false,
// true,
// );
//SOCKET
const data = {
organization,
modelUuid: newFloorItem.modelUuid,
modelName: newFloorItem.modelName,
modelfileID: newFloorItem.modelfileID,
position: newFloorItem.position,
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
isLocked: false,
isVisible: true,
socketId: socket.id,
};
socket.emit("v2:model-asset:add", data);
itemsGroupRef.current.add(obj);
}
});
toast.success("Object moved!");
itemsData.current = [];
clearSelection();
};
const clearSelection = () => {
selectionGroup.current.children = [];
selectionGroup.current.position.set(0, 0, 0);
selectionGroup.current.rotation.set(0, 0, 0);
setpastedObjects([]);
setDuplicatedObjects([]);
setMovedObjects([]);
setRotatedObjects([]);
setSelectedAssets([]);
setKeyEvent("");
};
return (
<DistanceFindingControls
boundingBoxRef={boundingBoxRef}
object={movedObjects.length}
/>
);
}
export default MoveControls;

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

206
app/src/modules/scene/controls/transformControls/transformControls.tsx Normal file
View File

@@ -0,0 +1,206 @@
import { TransformControls } from "@react-three/drei";
import * as THREE from "three";
import { useSelectedFloorItem, useObjectPosition, useObjectRotation, useFloorItems, useActiveTool, useSocketStore } from "../../../../store/store";
import { useThree } from "@react-three/fiber";
import * as Types from '../../../../types/world/worldTypes';
import { useEffect, useState } from "react";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
export default function TransformControl() {
const state = useThree();
const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
const { setObjectPosition } = useObjectPosition();
const { setObjectRotation } = useObjectRotation();
const { setFloorItems } = useFloorItems();
const { activeTool } = useActiveTool();
const { socket } = useSocketStore();
const { selectedProduct } = useSelectedProduct();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const updateBackend = (
productName: string,
productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData,
});
};
function handleObjectChange() {
if (selectedFloorItem) {
setObjectPosition(selectedFloorItem.position);
setObjectRotation({
x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
});
}
}
function handleMouseUp() {
if (selectedFloorItem) {
setObjectPosition(selectedFloorItem.position);
setObjectRotation({
x: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.x),
y: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y),
z: THREE.MathUtils.radToDeg(selectedFloorItem.rotation.z),
});
}
setFloorItems((prevItems: Types.FloorItems) => {
if (!prevItems) {
return
}
let updatedItem: any = null;
const updatedItems = prevItems.map((item) => {
if (item.modelUuid === selectedFloorItem?.uuid) {
updatedItem = {
...item,
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
rotation: { x: selectedFloorItem.rotation.x, y: selectedFloorItem.rotation.y, z: selectedFloorItem.rotation.z },
};
return updatedItem;
}
return item;
});
if (updatedItem && selectedFloorItem) {
if (updatedItem.eventData) {
const eventData = useEventsStore.getState().getEventByModelUuid(updatedItem.modelUuid);
const productData = useProductStore.getState().getEventByModelUuid(selectedProduct.productId, updatedItem.modelUuid);
if (eventData) {
useEventsStore.getState().updateEvent(updatedItem.modelUuid, {
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z],
});
}
if (productData) {
const event = useProductStore
.getState()
.updateEvent(
selectedProduct.productId,
updatedItem.modelUuid,
{
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: [selectedFloorItem.rotation.x, selectedFloorItem.rotation.y, selectedFloorItem.rotation.z],
}
);
if (event) {
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
organization,
event
);
}
updatedItem.eventData = eventData;
}
}
setFloorItems((prevItems: Types.FloorItems) => {
const updatedItems = [...(prevItems || []), updatedItem];
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
// REST
// setFloorItemApi(
// organization,
// updatedItem.modelUuid,
// updatedItem.modelName,
// updatedItem.modelfileid,
// [selectedFloorItem.position.x, 0, selectedFloorItem.position.z,],
// { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
// false,
// true,
// );
// SOCKET
const data = {
organization: organization,
modelUuid: updatedItem.modelUuid,
modelName: updatedItem.modelName,
modelfileID: updatedItem.modelfileID,
position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z],
rotation: { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
isLocked: false,
isVisible: true,
socketId: socket.id
}
socket.emit("v2:model-asset:add", data);
}
localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
return updatedItems;
});
}
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
const keyCombination = detectModifierKeys(e);
if (!selectedFloorItem) return;
if (keyCombination === "G") {
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
}
if (keyCombination === "R") {
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
}
};
if (selectedFloorItem) {
window.addEventListener("keydown", handleKeyDown);
} else {
setTransformMode(null);
}
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [selectedFloorItem]);
useEffect(() => {
if (activeTool === "delete") {
if (state.controls) {
const target = (state.controls as any).getTarget(new THREE.Vector3());
(state.controls as any).setTarget(target.x, 0, target.z, true);
}
setSelectedFloorItem(null);
setObjectPosition({ x: undefined, y: undefined, z: undefined });
setObjectRotation({ x: undefined, y: undefined, z: undefined });
}
}, [activeTool]);
return (
<>
{(selectedFloorItem && transformMode) &&
<TransformControls
showX={transformMode === "translate"}
showY={transformMode === "rotate"}
showZ={transformMode === "translate"}
object={selectedFloorItem}
mode={transformMode}
onObjectChange={handleObjectChange}
onMouseUp={handleMouseUp}
/>
}
</>
);
}

1
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@@ -187,6 +187,7 @@ const RealTimeVisulization: React.FC = () => {
<div
ref={containerRef}
className="realTime-viz"
id="real-time-vis-canvas"
style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",

5
app/src/store/store.ts
View File

@@ -144,11 +144,6 @@ export const useMovePoint = create<any>((set: any) => ({
setMovePoint: (x: any) => set(() => ({ movePoint: x })),
}));
export const useTransformMode = create<any>((set: any) => ({
transformMode: null,
setTransformMode: (x: any) => set(() => ({ transformMode: x })),
}));
export const useDeletePointOrLine = create<any>((set: any) => ({
deletePointOrLine: false,
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),

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

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

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

@@ -1,6 +1,55 @@
@use "../abstracts/variables" 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 {
width: 270px;
position: fixed;
@@ -34,15 +83,6 @@
}
.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;
@@ -52,34 +92,6 @@
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-left: 16px;
width: 100%;
gap: 12px;
gap: 8px;
height: 52px;
.options-container {
@@ -318,7 +330,7 @@
.split {
height: 20px;
width: 2px;
min-width: 1px;
background: var(--text-disabled);
}
@@ -1002,8 +1014,7 @@
height: 100%;
width: 1px;
position: absolute;
color: var(--text-color);
opacity: 0.4;
color: var(--accent-color);
font-size: var(--font-size-regular);
outline-offset: -1px;
top: 0;
@@ -1266,6 +1277,18 @@
}
}
}
.toggle-sidebar-ui-button {
svg {
transform: scaleX(-1);
}
.tooltip {
right: 56px;
&::after {
left: 100%;
bottom: 50%;
}
}
}
}
.assets-container-main {
@@ -1432,7 +1455,11 @@
height: 100%;
gap: 6px;
padding: 2px;
.no-asset {
text-align: center;
margin: 12px;
width: 100%;
}
.assets {
width: 122px;
height: 95px;
@@ -1491,20 +1518,6 @@
}
}
.skeleton-wrapper {
display: flex;
.asset-name {
width: 40%;
height: 10px;
}
.asset {
width: 100%;
height: 100%;
}
}
.sidebar-left-wrapper,
.sidebar-right-wrapper {
transition: height 0.2s ease-in-out;

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

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

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

@@ -326,7 +326,7 @@ export const lineConfig: LineConfig = {
};
export const wallConfig: WallConfig = {
defaultColor: "white", // Default color of the walls
defaultColor: "#f2f2f2", // Default color of the walls
height: 7, // Height of the walls
width: 0.05, // Width of the walls
};
@@ -334,7 +334,7 @@ export const wallConfig: WallConfig = {
export const floorConfig: FloorConfig = {
defaultColor: "grey", // Default color of the floors
height: 0.1, // Height of the floors
textureScale: 0.1, // Scale of the floor texture
textureScale: 1, // Scale of the floor texture
};
export const roofConfig: RoofConfig = {
@@ -345,7 +345,7 @@ export const roofConfig: RoofConfig = {
export const aisleConfig: AisleConfig = {
width: 0.1, // Width of the aisles
height: 0.01, // Height of the aisles
defaultColor: 0xffff00, // Default color of the aisles
defaultColor: 0xE2AC09, // Default color of the aisles
};
export const zoneConfig: ZoneConfig = {

1
app/src/types/world/worldTypes.d.ts vendored
View File

@@ -225,7 +225,6 @@ interface AssetConfiguration {
scale?: [number, number, number];
csgscale?: [number, number, number];
csgposition?: [number, number, number];
positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number;
type?: "Fixed-Move" | "Free-Move";
}

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

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

2
app/src/utils/theme.ts
View File

@@ -4,7 +4,7 @@ export { };
function setTheme() {
const savedTheme: string | null = localStorage.getItem('theme');
const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
const defaultTheme: string = savedTheme ?? (systemPrefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', defaultTheme);
localStorage.setItem('theme', defaultTheme);
}