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

integrated Factory builder features

This commit is contained in:
Poovizhi99 2025-03-29 12:57:16 +05:30
parent 74c90acdc7
commit cff29304d0
5 changed files with 183 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@ const Header: React.FC = () => {
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
onClick={() => {
if (activeModule !== "market") setToggleUI(!toggleUI);
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
}}
>
<ToggleSidebarIcon />

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

@ -3,8 +3,10 @@ import {
AsileIcon,
CommentIcon,
CursorIcon,
DeleteIcon,
FloorIcon,
FreeMoveIcon,
MeasureToolIcon,
PenIcon,
PlayIcon,
SaveTemplateIcon,
@ -18,17 +20,23 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
import useTemplateStore from "../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../store/useZoneStore";
import {
useActiveTool,
useAddAction,
useDeleteModels,
useDeletePointOrLine,
useMovePoint,
useSelectedWallItem,
useToggleView,
useToolMode,
useTransformMode,
} from "../../store/store";
import useToggleStore from "../../store/useUIToggleStore";
const Tools: React.FC = () => {
const { templates } = useTemplateStore();
const [activeTool, setActiveTool] = useState("cursor");
const [activeSubTool, setActiveSubTool] = useState("cursor");
const [toggleThreeD, setToggleThreeD] = useState(true);
const { toggleUI, setToggleUI } = useToggleStore();
const dropdownRef = useRef<HTMLDivElement>(null);
const [openDrop, setOpenDrop] = useState(false);
@ -39,12 +47,24 @@ const Tools: React.FC = () => {
const { selectedZone } = useSelectedZoneStore();
// wall options
const { setToggleView } = useToggleView();
const { toggleView, setToggleView } = useToggleView();
const { setDeleteModels } = useDeleteModels();
const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem();
// Reset activeTool whenever activeModule changes
const { transformMode, setTransformMode } = useTransformMode();
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
const { movePoint, setMovePoint } = useMovePoint();
const { toolMode, setToolMode } = useToolMode();
const { activeTool, setActiveTool } = useActiveTool();
useEffect(() => {
const storedNavBar: any = localStorage.getItem("navBarUi");
if (storedNavBar) {
const parsedNavBar = JSON.parse(storedNavBar);
setToggleUI(parsedNavBar);
}
}, []);
useEffect(() => {
setActiveTool(activeSubTool);
setActiveSubTool(activeSubTool);
@ -56,9 +76,12 @@ const Tools: React.FC = () => {
setDeleteModels(false);
setAddAction(null);
setToggleView(true);
localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
} else {
setToggleView(false);
}
setActiveSubTool("cursor");
setActiveTool("cursor");
setToggleThreeD(!toggleThreeD);
};
@ -84,7 +107,88 @@ const Tools: React.FC = () => {
document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
};
}, []);
useEffect(() => {
if (!toggleThreeD) {
setToggleUI(false);
}
}, [toggleThreeD]);
useEffect(() => {
setToolMode(null);
setDeleteModels(false);
setAddAction(null);
setTransformMode(null);
setMovePoint(false);
setDeletePointOrLine(false);
switch (activeTool) {
case "Move":
if (toggleView) {
setMovePoint(true);
} else {
setTransformMode("translate");
}
break;
case "Rotate":
if (!toggleView) {
setTransformMode("rotate");
}
break;
case "Scale":
if (!toggleView) {
setTransformMode("scale");
}
break;
case "draw-wall":
if (toggleView) {
setToolMode("Wall");
}
break;
case "draw-aisle":
if (toggleView) {
setToolMode("Aisle");
}
break;
case "draw-zone":
if (toggleView) {
setToolMode("Zone");
}
break;
case "draw-floor":
if (toggleView) {
setToolMode("Floor");
}
break;
case "measure":
setToolMode("MeasurementScale");
break;
case "Add pillar":
if (!toggleView) {
setAddAction("pillar");
}
break;
case "delete":
if (toggleView) {
setDeletePointOrLine(true);
} else {
setDeleteModels(true);
}
break;
default:
break;
}
setActiveTool(activeTool);
}, [activeTool]);
return (
<>
{!isPlaying ? (
@ -116,13 +220,24 @@ const Tools: React.FC = () => {
<FreeMoveIcon isActive={activeTool === "free-hand"} />
</div>
)}
{activeSubTool == "delete" && (
<div
className={`tool-button ${
activeTool === "delete" ? "active" : ""
}`}
onClick={() => {
setActiveTool("delete");
}}
>
<DeleteIcon isActive={activeTool === "delete"} />
</div>
)}
{activeModule !== "visualization" && (
<div
className="drop-down-option-button"
ref={dropdownRef}
onClick={() => {
setOpenDrop(!openDrop);
console.log(openDrop);
}}
>
<ArrowIcon />
@ -156,6 +271,20 @@ const Tools: React.FC = () => {
<FreeMoveIcon isActive={false} />
<div className="option">Free Hand</div>
</div>
<div
className="option-list"
onClick={() => {
setOpenDrop(false);
setActiveTool("delete");
setActiveSubTool("delete");
}}
>
<div className="active-option">
{activeSubTool === "delete" && <TickIcon />}
</div>
<DeleteIcon isActive={false} />
<div className="option">Delete</div>
</div>
</div>
)}
</div>
@ -173,6 +302,7 @@ const Tools: React.FC = () => {
onClick={() => {
setActiveTool("draw-wall");
}}
title="Wall"
>
<WallIcon isActive={activeTool === "draw-wall"} />
</div>
@ -183,6 +313,7 @@ const Tools: React.FC = () => {
onClick={() => {
setActiveTool("draw-zone");
}}
title="Zone"
>
<ZoneIcon isActive={activeTool === "draw-zone"} />
</div>
@ -193,6 +324,7 @@ const Tools: React.FC = () => {
onClick={() => {
setActiveTool("draw-aisle");
}}
title="Aisle"
>
<AsileIcon isActive={activeTool === "draw-aisle"} />
</div>
@ -203,12 +335,31 @@ const Tools: React.FC = () => {
onClick={() => {
setActiveTool("draw-floor");
}}
title="Floor"
>
<FloorIcon isActive={activeTool === "draw-floor"} />
</div>
</div>
</>
)}
{activeModule === "builder" && (
<>
<div className="split"></div>
<div className="draw-tools">
<div
className={`tool-button ${
activeTool === "measure" ? "active" : ""
}`}
onClick={() => {
setActiveTool("measure");
}}
title="Measure"
>
<MeasureToolIcon isActive={activeTool === "measure"} />
</div>
</div>
</>
)}
{activeModule === "simulation" && (
<>
<div className="split"></div>
@ -257,16 +408,18 @@ const Tools: React.FC = () => {
>
<CommentIcon isActive={activeTool === "comment"} />
</div>
<div
className={`tool-button ${
activeTool === "play" ? "active" : ""
}`}
onClick={() => {
setIsPlaying(!isPlaying);
}}
>
<PlayIcon isActive={activeTool === "play"} />
</div>
{toggleThreeD && (
<div
className={`tool-button ${
activeTool === "play" ? "active" : ""
}`}
onClick={() => {
setIsPlaying(!isPlaying);
}}
>
<PlayIcon isActive={activeTool === "play"} />
</div>
)}
</div>
<div className="split"></div>
<div

15
app/src/modules/market/AssetPreview.tsx
View File

@ -13,6 +13,7 @@ interface SelectedCard {
price: number;
rating: number;
views: number;
description: string;
}
// Define the props type for AssetPreview
@ -93,19 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
<div className="asset-details">
<div className="asset-name">{selectedCard.assetName}</div>
<div className="asset-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloremque nisi beatae facilis architecto quaerat delectus velit
aliquid assumenda cumque vitae! Tempore quibusdam ab natus in
minima voluptates, aliquid corrupti excepturi consectetur
distinctio sequi beatae odit autem? Distinctio ab, voluptatem
omnis quibusdam, incidunt eum ipsa aliquid enim eaque eveniet nisi
autem, accusantium vel! Laborum in iste voluptates ad! Harum eum
amet pariatur fugit laudantium dolorem maxime voluptates atque
molestiae modi inventore quidem maiores dolore numquam, natus
quisquam optio distinctio eveniet aliquam, aut eligendi laboriosam
eaque! Porro cumque cum distinctio ullam debitis, dolorum
similique! Harum cupiditate perferendis voluptatum molestiae,
fugiat quisquam assumenda!
{`${selectedCard.description} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
</div>
<div className="asset-review">
<div className="asset-rating">

9
app/src/modules/market/Card.tsx
View File

@ -12,17 +12,19 @@ import { getAssetDownload } from "../../services/marketplace/getAssetDownload";
interface CardProps {
assetName: string;
uploadedOn: string;
uploadedOn: number;
price: number;
rating: number;
views: number;
image: string;
description: string;
onSelectCard: (cardData: {
assetName: string;
uploadedOn: string;
uploadedOn: number;
price: number;
rating: number;
views: number;
description: string;
}) => void;
}
@ -33,10 +35,11 @@ const Card: React.FC<CardProps> = ({
rating,
views,
image,
description,
onSelectCard,
}) => {
const handleCardSelect = () => {
onSelectCard({ assetName, uploadedOn, price, rating, views });
onSelectCard({ assetName, uploadedOn, price, rating, views, description });
};
return (

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

@ -1,8 +1,7 @@
import React, { useEffect, useState } from "react";
import Card from "./Card";
import AssetPreview from "./AssetPreview";
import RenderOverlay from "../../components/templates/Overlay";
import { fetchAssets } from "../../services/marketplace/fetchAssets";
interface ModelData {
CreatedBy: string;
animated: string | null;
@ -23,18 +22,20 @@ interface ModelsProps {
const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
const [selectedCard, setSelectedCard] = useState<{
assetName: string;
uploadedOn: string;
uploadedOn: number;
price: number;
rating: number;
views: number;
description: string;
} | null>(null);
const handleCardSelect = (cardData: {
assetName: string;
uploadedOn: string;
uploadedOn: number;
price: number;
rating: number;
views: number;
description: string;
}) => {
setSelectedCard(cardData);
};
@ -48,12 +49,13 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
<Card
key={assetDetail._id}
assetName={assetDetail?.filename}
uploadedOn={assetDetail.uploadDate.toString()}
uploadedOn={assetDetail.uploadDate}
price={36500}
rating={4.5}
views={800}
onSelectCard={handleCardSelect}
image={assetDetail.thumbnail}
description={assetDetail.description}
/>
))}
{/* <RenderOverlay> */}