From cff29304d0187d5045c1644020ecb41b9049d0ad Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Sat, 29 Mar 2025 12:57:16 +0530 Subject: [PATCH 1/2] integrated Factory builder features --- .../components/layout/sidebarLeft/Header.tsx | 1 + app/src/components/ui/Tools.tsx | 181 ++++++++++++++++-- app/src/modules/market/AssetPreview.tsx | 15 +- app/src/modules/market/Card.tsx | 9 +- app/src/modules/market/CardsContainer.tsx | 12 +- 5 files changed, 183 insertions(+), 35 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Header.tsx b/app/src/components/layout/sidebarLeft/Header.tsx index ce76cb3..c51de20 100644 --- a/app/src/components/layout/sidebarLeft/Header.tsx +++ b/app/src/components/layout/sidebarLeft/Header.tsx @@ -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)); }} > diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx index abe7ba8..23a46bd 100644 --- a/app/src/components/ui/Tools.tsx +++ b/app/src/components/ui/Tools.tsx @@ -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(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 = () => { )} + {activeSubTool == "delete" && ( +
{ + setActiveTool("delete"); + }} + > + +
+ )} {activeModule !== "visualization" && (
{ setOpenDrop(!openDrop); - console.log(openDrop); }} > @@ -156,6 +271,20 @@ const Tools: React.FC = () => {
Free Hand
+
{ + setOpenDrop(false); + setActiveTool("delete"); + setActiveSubTool("delete"); + }} + > +
+ {activeSubTool === "delete" && } +
+ +
Delete
+
)} @@ -173,6 +302,7 @@ const Tools: React.FC = () => { onClick={() => { setActiveTool("draw-wall"); }} + title="Wall" > @@ -183,6 +313,7 @@ const Tools: React.FC = () => { onClick={() => { setActiveTool("draw-zone"); }} + title="Zone" > @@ -193,6 +324,7 @@ const Tools: React.FC = () => { onClick={() => { setActiveTool("draw-aisle"); }} + title="Aisle" > @@ -203,12 +335,31 @@ const Tools: React.FC = () => { onClick={() => { setActiveTool("draw-floor"); }} + title="Floor" > )} + {activeModule === "builder" && ( + <> +
+
+
{ + setActiveTool("measure"); + }} + title="Measure" + > + +
+
+ + )} {activeModule === "simulation" && ( <>
@@ -257,16 +408,18 @@ const Tools: React.FC = () => { > -
{ - setIsPlaying(!isPlaying); - }} - > - -
+ {toggleThreeD && ( +
{ + setIsPlaying(!isPlaying); + }} + > + +
+ )}
= ({
{selectedCard.assetName}
- 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.`}
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index e723f4f..ec9db06 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -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 = ({ rating, views, image, + description, onSelectCard, }) => { const handleCardSelect = () => { - onSelectCard({ assetName, uploadedOn, price, rating, views }); + onSelectCard({ assetName, uploadedOn, price, rating, views, description }); }; return ( diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx index 423fd16..c2a7e6d 100644 --- a/app/src/modules/market/CardsContainer.tsx +++ b/app/src/modules/market/CardsContainer.tsx @@ -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 = ({ 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 = ({ models }) => { ))} {/* */} From a42d9260f69c4f1966dc83618b885ee326c5276a Mon Sep 17 00:00:00 2001 From: Poovizhi99 Date: Sat, 29 Mar 2025 13:04:28 +0530 Subject: [PATCH 2/2] included measureIcon --- app/src/components/icons/ExportToolsIcons.tsx | 29 +++++++++++++++++++ app/src/modules/market/AssetPreview.tsx | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/app/src/components/icons/ExportToolsIcons.tsx b/app/src/components/icons/ExportToolsIcons.tsx index 9e2c937..478113c 100644 --- a/app/src/components/icons/ExportToolsIcons.tsx +++ b/app/src/components/icons/ExportToolsIcons.tsx @@ -636,3 +636,32 @@ export function SaveTemplateIcon({ isActive }: { isActive: boolean }) { ); } + +export function MeasureToolIcon({ isActive }: { isActive: boolean }) { + return ( + + + + + + + ); +} diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx index 1bb070b..db8d3c3 100644 --- a/app/src/modules/market/AssetPreview.tsx +++ b/app/src/modules/market/AssetPreview.tsx @@ -94,7 +94,7 @@ const AssetPreview: React.FC = ({
{selectedCard.assetName}
- {`${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.`} + {`${selectedCard.assetName} 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.`}