integrated Factory builder features
This commit is contained in:
parent
74c90acdc7
commit
cff29304d0
|
@ -23,6 +23,7 @@ const Header: React.FC = () => {
|
||||||
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
|
className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (activeModule !== "market") setToggleUI(!toggleUI);
|
if (activeModule !== "market") setToggleUI(!toggleUI);
|
||||||
|
localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ToggleSidebarIcon />
|
<ToggleSidebarIcon />
|
||||||
|
|
|
@ -3,8 +3,10 @@ import {
|
||||||
AsileIcon,
|
AsileIcon,
|
||||||
CommentIcon,
|
CommentIcon,
|
||||||
CursorIcon,
|
CursorIcon,
|
||||||
|
DeleteIcon,
|
||||||
FloorIcon,
|
FloorIcon,
|
||||||
FreeMoveIcon,
|
FreeMoveIcon,
|
||||||
|
MeasureToolIcon,
|
||||||
PenIcon,
|
PenIcon,
|
||||||
PlayIcon,
|
PlayIcon,
|
||||||
SaveTemplateIcon,
|
SaveTemplateIcon,
|
||||||
|
@ -18,17 +20,23 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
|
||||||
import useTemplateStore from "../../store/useTemplateStore";
|
import useTemplateStore from "../../store/useTemplateStore";
|
||||||
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
||||||
import {
|
import {
|
||||||
|
useActiveTool,
|
||||||
useAddAction,
|
useAddAction,
|
||||||
useDeleteModels,
|
useDeleteModels,
|
||||||
|
useDeletePointOrLine,
|
||||||
|
useMovePoint,
|
||||||
useSelectedWallItem,
|
useSelectedWallItem,
|
||||||
useToggleView,
|
useToggleView,
|
||||||
|
useToolMode,
|
||||||
|
useTransformMode,
|
||||||
} from "../../store/store";
|
} from "../../store/store";
|
||||||
|
import useToggleStore from "../../store/useUIToggleStore";
|
||||||
|
|
||||||
const Tools: React.FC = () => {
|
const Tools: React.FC = () => {
|
||||||
const { templates } = useTemplateStore();
|
const { templates } = useTemplateStore();
|
||||||
const [activeTool, setActiveTool] = useState("cursor");
|
|
||||||
const [activeSubTool, setActiveSubTool] = useState("cursor");
|
const [activeSubTool, setActiveSubTool] = useState("cursor");
|
||||||
const [toggleThreeD, setToggleThreeD] = useState(true);
|
const [toggleThreeD, setToggleThreeD] = useState(true);
|
||||||
|
const { toggleUI, setToggleUI } = useToggleStore();
|
||||||
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
const [openDrop, setOpenDrop] = useState(false);
|
const [openDrop, setOpenDrop] = useState(false);
|
||||||
|
@ -39,12 +47,24 @@ const Tools: React.FC = () => {
|
||||||
const { selectedZone } = useSelectedZoneStore();
|
const { selectedZone } = useSelectedZoneStore();
|
||||||
|
|
||||||
// wall options
|
// wall options
|
||||||
const { setToggleView } = useToggleView();
|
const { toggleView, setToggleView } = useToggleView();
|
||||||
const { setDeleteModels } = useDeleteModels();
|
const { setDeleteModels } = useDeleteModels();
|
||||||
const { setAddAction } = useAddAction();
|
const { setAddAction } = useAddAction();
|
||||||
const { setSelectedWallItem } = useSelectedWallItem();
|
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(() => {
|
useEffect(() => {
|
||||||
setActiveTool(activeSubTool);
|
setActiveTool(activeSubTool);
|
||||||
setActiveSubTool(activeSubTool);
|
setActiveSubTool(activeSubTool);
|
||||||
|
@ -56,9 +76,12 @@ const Tools: React.FC = () => {
|
||||||
setDeleteModels(false);
|
setDeleteModels(false);
|
||||||
setAddAction(null);
|
setAddAction(null);
|
||||||
setToggleView(true);
|
setToggleView(true);
|
||||||
|
localStorage.setItem("navBarUi", JSON.stringify(!toggleThreeD));
|
||||||
} else {
|
} else {
|
||||||
setToggleView(false);
|
setToggleView(false);
|
||||||
}
|
}
|
||||||
|
setActiveSubTool("cursor");
|
||||||
|
setActiveTool("cursor");
|
||||||
setToggleThreeD(!toggleThreeD);
|
setToggleThreeD(!toggleThreeD);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -84,7 +107,88 @@ const Tools: React.FC = () => {
|
||||||
document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
{!isPlaying ? (
|
{!isPlaying ? (
|
||||||
|
@ -116,13 +220,24 @@ const Tools: React.FC = () => {
|
||||||
<FreeMoveIcon isActive={activeTool === "free-hand"} />
|
<FreeMoveIcon isActive={activeTool === "free-hand"} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{activeSubTool == "delete" && (
|
||||||
|
<div
|
||||||
|
className={`tool-button ${
|
||||||
|
activeTool === "delete" ? "active" : ""
|
||||||
|
}`}
|
||||||
|
onClick={() => {
|
||||||
|
setActiveTool("delete");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteIcon isActive={activeTool === "delete"} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{activeModule !== "visualization" && (
|
{activeModule !== "visualization" && (
|
||||||
<div
|
<div
|
||||||
className="drop-down-option-button"
|
className="drop-down-option-button"
|
||||||
ref={dropdownRef}
|
ref={dropdownRef}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setOpenDrop(!openDrop);
|
setOpenDrop(!openDrop);
|
||||||
console.log(openDrop);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ArrowIcon />
|
<ArrowIcon />
|
||||||
|
@ -156,6 +271,20 @@ const Tools: React.FC = () => {
|
||||||
<FreeMoveIcon isActive={false} />
|
<FreeMoveIcon isActive={false} />
|
||||||
<div className="option">Free Hand</div>
|
<div className="option">Free Hand</div>
|
||||||
</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>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -173,6 +302,7 @@ const Tools: React.FC = () => {
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-wall");
|
setActiveTool("draw-wall");
|
||||||
}}
|
}}
|
||||||
|
title="Wall"
|
||||||
>
|
>
|
||||||
<WallIcon isActive={activeTool === "draw-wall"} />
|
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -183,6 +313,7 @@ const Tools: React.FC = () => {
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-zone");
|
setActiveTool("draw-zone");
|
||||||
}}
|
}}
|
||||||
|
title="Zone"
|
||||||
>
|
>
|
||||||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -193,6 +324,7 @@ const Tools: React.FC = () => {
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-aisle");
|
setActiveTool("draw-aisle");
|
||||||
}}
|
}}
|
||||||
|
title="Aisle"
|
||||||
>
|
>
|
||||||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -203,12 +335,31 @@ const Tools: React.FC = () => {
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setActiveTool("draw-floor");
|
setActiveTool("draw-floor");
|
||||||
}}
|
}}
|
||||||
|
title="Floor"
|
||||||
>
|
>
|
||||||
<FloorIcon isActive={activeTool === "draw-floor"} />
|
<FloorIcon isActive={activeTool === "draw-floor"} />
|
||||||
</div>
|
</div>
|
||||||
</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" && (
|
{activeModule === "simulation" && (
|
||||||
<>
|
<>
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
|
@ -257,6 +408,7 @@ const Tools: React.FC = () => {
|
||||||
>
|
>
|
||||||
<CommentIcon isActive={activeTool === "comment"} />
|
<CommentIcon isActive={activeTool === "comment"} />
|
||||||
</div>
|
</div>
|
||||||
|
{toggleThreeD && (
|
||||||
<div
|
<div
|
||||||
className={`tool-button ${
|
className={`tool-button ${
|
||||||
activeTool === "play" ? "active" : ""
|
activeTool === "play" ? "active" : ""
|
||||||
|
@ -267,6 +419,7 @@ const Tools: React.FC = () => {
|
||||||
>
|
>
|
||||||
<PlayIcon isActive={activeTool === "play"} />
|
<PlayIcon isActive={activeTool === "play"} />
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="split"></div>
|
<div className="split"></div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -13,6 +13,7 @@ interface SelectedCard {
|
||||||
price: number;
|
price: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
views: number;
|
views: number;
|
||||||
|
description: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Define the props type for AssetPreview
|
// Define the props type for AssetPreview
|
||||||
|
@ -93,19 +94,7 @@ const AssetPreview: React.FC<AssetPreviewProps> = ({
|
||||||
<div className="asset-details">
|
<div className="asset-details">
|
||||||
<div className="asset-name">{selectedCard.assetName}</div>
|
<div className="asset-name">{selectedCard.assetName}</div>
|
||||||
<div className="asset-description">
|
<div className="asset-description">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
{`${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.`}
|
||||||
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!
|
|
||||||
</div>
|
</div>
|
||||||
<div className="asset-review">
|
<div className="asset-review">
|
||||||
<div className="asset-rating">
|
<div className="asset-rating">
|
||||||
|
|
|
@ -12,17 +12,19 @@ import { getAssetDownload } from "../../services/marketplace/getAssetDownload";
|
||||||
|
|
||||||
interface CardProps {
|
interface CardProps {
|
||||||
assetName: string;
|
assetName: string;
|
||||||
uploadedOn: string;
|
uploadedOn: number;
|
||||||
price: number;
|
price: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
views: number;
|
views: number;
|
||||||
image: string;
|
image: string;
|
||||||
|
description: string;
|
||||||
onSelectCard: (cardData: {
|
onSelectCard: (cardData: {
|
||||||
assetName: string;
|
assetName: string;
|
||||||
uploadedOn: string;
|
uploadedOn: number;
|
||||||
price: number;
|
price: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
views: number;
|
views: number;
|
||||||
|
description: string;
|
||||||
}) => void;
|
}) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,10 +35,11 @@ const Card: React.FC<CardProps> = ({
|
||||||
rating,
|
rating,
|
||||||
views,
|
views,
|
||||||
image,
|
image,
|
||||||
|
description,
|
||||||
onSelectCard,
|
onSelectCard,
|
||||||
}) => {
|
}) => {
|
||||||
const handleCardSelect = () => {
|
const handleCardSelect = () => {
|
||||||
onSelectCard({ assetName, uploadedOn, price, rating, views });
|
onSelectCard({ assetName, uploadedOn, price, rating, views, description });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Card from "./Card";
|
import Card from "./Card";
|
||||||
import AssetPreview from "./AssetPreview";
|
import AssetPreview from "./AssetPreview";
|
||||||
import RenderOverlay from "../../components/templates/Overlay";
|
|
||||||
import { fetchAssets } from "../../services/marketplace/fetchAssets";
|
|
||||||
interface ModelData {
|
interface ModelData {
|
||||||
CreatedBy: string;
|
CreatedBy: string;
|
||||||
animated: string | null;
|
animated: string | null;
|
||||||
|
@ -23,18 +22,20 @@ interface ModelsProps {
|
||||||
const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
|
const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
|
||||||
const [selectedCard, setSelectedCard] = useState<{
|
const [selectedCard, setSelectedCard] = useState<{
|
||||||
assetName: string;
|
assetName: string;
|
||||||
uploadedOn: string;
|
uploadedOn: number;
|
||||||
price: number;
|
price: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
views: number;
|
views: number;
|
||||||
|
description: string;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
const handleCardSelect = (cardData: {
|
const handleCardSelect = (cardData: {
|
||||||
assetName: string;
|
assetName: string;
|
||||||
uploadedOn: string;
|
uploadedOn: number;
|
||||||
price: number;
|
price: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
views: number;
|
views: number;
|
||||||
|
description: string;
|
||||||
}) => {
|
}) => {
|
||||||
setSelectedCard(cardData);
|
setSelectedCard(cardData);
|
||||||
};
|
};
|
||||||
|
@ -48,12 +49,13 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
|
||||||
<Card
|
<Card
|
||||||
key={assetDetail._id}
|
key={assetDetail._id}
|
||||||
assetName={assetDetail?.filename}
|
assetName={assetDetail?.filename}
|
||||||
uploadedOn={assetDetail.uploadDate.toString()}
|
uploadedOn={assetDetail.uploadDate}
|
||||||
price={36500}
|
price={36500}
|
||||||
rating={4.5}
|
rating={4.5}
|
||||||
views={800}
|
views={800}
|
||||||
onSelectCard={handleCardSelect}
|
onSelectCard={handleCardSelect}
|
||||||
image={assetDetail.thumbnail}
|
image={assetDetail.thumbnail}
|
||||||
|
description={assetDetail.description}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{/* <RenderOverlay> */}
|
{/* <RenderOverlay> */}
|
||||||
|
|
Loading…
Reference in New Issue