Merge remote-tracking branch 'origin/simulation-agv' into simulation
This commit is contained in:
commit
991fd4328a
|
|
@ -636,3 +636,32 @@ export function SaveTemplateIcon({ isActive }: { isActive: boolean }) {
|
|||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function MeasureToolIcon({ isActive }: { isActive: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7.07495 10.248C7.58308 10.3976 8.18027 10.4818 8.82142 10.4821C9.67666 10.4811 10.4522 10.3335 11.0449 10.0758C11.341 9.94594 11.5943 9.78867 11.7886 9.5888C11.9812 9.39173 12.1201 9.13327 12.1197 8.84166C12.1201 8.55 11.9812 8.29125 11.7886 8.09447C11.4962 7.79625 11.0754 7.58705 10.5676 7.43531C10.0598 7.28569 9.46267 7.20117 8.82147 7.20117C7.96628 7.20183 7.19069 7.34939 6.59767 7.60748C6.30152 7.73737 6.0483 7.89459 5.854 8.09447C5.66144 8.29125 5.5225 8.55 5.52283 8.84166C5.5225 9.13327 5.66139 9.39169 5.854 9.5888C6.14627 9.88669 6.56748 10.0962 7.07495 10.248ZM6.36348 8.58806C6.51831 8.42423 6.84391 8.241 7.27586 8.11561C7.70744 7.98811 8.24336 7.9102 8.82142 7.91058C9.59177 7.9095 10.288 8.0498 10.7608 8.25764C10.9971 8.36016 11.1755 8.48002 11.2787 8.58811C11.384 8.69859 11.41 8.77795 11.4103 8.8417C11.41 8.90508 11.384 8.98477 11.2787 9.09525C11.1242 9.25875 10.7986 9.44231 10.3667 9.5677C9.93508 9.6952 9.39953 9.77278 8.82142 9.77278C8.05075 9.77344 7.35452 9.63351 6.88169 9.42572C6.64544 9.32316 6.46703 9.20334 6.36353 9.09525C6.25825 8.98477 6.23256 8.90508 6.23223 8.8417C6.23251 8.77791 6.2582 8.69855 6.36348 8.58806Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M13.5094 5.1167C13.5115 5.1174 13.5139 5.11806 13.516 5.11876L13.5433 5.12673L13.5094 5.1167Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M4.13305 18.8834C4.13028 18.8827 4.12747 18.8817 4.12471 18.8806L4.09039 18.8706L4.13305 18.8834Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
<path
|
||||
d="M17.4073 11.4456V8.97325C17.4077 8.60876 17.3207 8.25954 17.1727 7.94355C17.0242 7.62686 16.8165 7.34174 16.5698 7.08811C15.8326 6.33495 14.751 5.79382 13.4528 5.40542L13.4458 5.40345C12.1412 5.01874 10.604 4.80163 8.9538 4.80127C6.75295 4.80325 4.75594 5.18436 3.23696 5.84525L3.23628 5.84561C2.47778 6.17821 1.82951 6.58256 1.33717 7.08842C1.0909 7.34174 0.883095 7.62686 0.734718 7.94355C0.586655 8.25958 0.499642 8.6088 0.500001 8.9733V15.0268C0.499642 15.3912 0.586655 15.7402 0.734718 16.0562C0.883095 16.3729 1.0909 16.658 1.33721 16.9116C2.07451 17.6648 3.15529 18.2059 4.4529 18.5939L4.46153 18.5966C5.76646 18.9814 7.30337 19.1981 8.95385 19.1988H23.5V11.4457H17.4073V11.4456ZM2.19167 7.91665C2.70288 7.38486 3.62108 6.88991 4.79849 6.54437C5.97562 6.19681 7.4093 5.99067 8.95385 5.99098C11.013 5.98999 12.8759 6.35844 14.1944 6.93573C14.8537 7.22319 15.3745 7.56311 15.7157 7.91665C16.0586 8.27283 16.2173 8.62367 16.2177 8.97325C16.2173 9.32243 16.0586 9.67368 15.7157 10.0299C15.2045 10.5613 14.2863 11.0562 13.1089 11.4018C11.9318 11.7497 10.4984 11.9555 8.9538 11.9555C6.89436 11.9562 5.0315 11.5878 3.71295 11.0108C3.05367 10.7233 2.53285 10.3834 2.19162 10.0299C1.84869 9.67368 1.69003 9.32243 1.68967 8.97325C1.69007 8.62372 1.84874 8.27283 2.19167 7.91665ZM16.2176 10.488V11.9555H13.6018C13.9049 11.8566 14.1973 11.751 14.4665 11.6335C15.1832 11.3198 15.7758 10.9441 16.2043 10.5026L16.2176 10.488ZM22.3103 18.009H20.2707V15.0058H19.5909V18.009H18.0898V16.3824H17.4099V18.009H15.9085V15.0058H15.2287V18.009H13.7272V16.3824H13.0474V18.009H11.5463V15.0058H10.8665V18.009H9.36542V16.3824H8.68558V18.003C8.16938 17.9951 7.66778 17.9645 7.18415 17.9128V15.0058H6.5043V17.8251C5.43642 17.6624 4.48039 17.4002 3.71295 17.0643C3.05367 16.7768 2.53285 16.4369 2.19162 16.0834C1.84869 15.7271 1.69003 15.3759 1.68967 15.0267V10.488L1.70296 10.5026C2.34598 11.1632 3.35609 11.683 4.60586 12.0538C5.85604 12.4229 7.34848 12.6351 8.95376 12.6354H22.3102V18.009H22.3103Z"
|
||||
fill={isActive ? "var(--highlight-accent-color)" : "var(--text-color)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import {
|
|||
AsileIcon,
|
||||
CommentIcon,
|
||||
CursorIcon,
|
||||
DeleteIcon,
|
||||
FloorIcon,
|
||||
FreeMoveIcon,
|
||||
MeasureToolIcon,
|
||||
PenIcon,
|
||||
PlayIcon,
|
||||
SaveTemplateIcon,
|
||||
|
|
@ -29,11 +31,13 @@ import {
|
|||
useToolMode,
|
||||
useTransformMode,
|
||||
} from "../../store/store";
|
||||
import useToggleStore from "../../store/useUIToggleStore";
|
||||
|
||||
const Tools: React.FC = () => {
|
||||
const { templates } = useTemplateStore();
|
||||
const [activeSubTool, setActiveSubTool] = useState("cursor");
|
||||
const [toggleThreeD, setToggleThreeD] = useState(true);
|
||||
const { toggleUI, setToggleUI } = useToggleStore();
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const [openDrop, setOpenDrop] = useState(false);
|
||||
|
|
@ -57,6 +61,14 @@ const Tools: React.FC = () => {
|
|||
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
|
||||
|
||||
// Reset activeTool whenever activeModule changes
|
||||
useEffect(() => {
|
||||
const storedNavBar: any = localStorage.getItem("navBarUi");
|
||||
if (storedNavBar) {
|
||||
const parsedNavBar = JSON.parse(storedNavBar);
|
||||
setToggleUI(parsedNavBar);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setActiveTool(activeSubTool);
|
||||
setActiveSubTool(activeSubTool);
|
||||
|
|
@ -68,9 +80,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);
|
||||
setActiveTool("cursor");
|
||||
};
|
||||
|
|
@ -97,6 +112,11 @@ const Tools: React.FC = () => {
|
|||
document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
|
||||
};
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (!toggleThreeD) {
|
||||
setToggleUI(false);
|
||||
}
|
||||
}, [toggleThreeD]);
|
||||
|
||||
useEffect(() => {
|
||||
setToolMode(null);
|
||||
|
|
@ -134,25 +154,25 @@ const Tools: React.FC = () => {
|
|||
}
|
||||
break;
|
||||
|
||||
case "Draw Aisle":
|
||||
case "draw-aisle":
|
||||
if (toggleView) {
|
||||
setToolMode("Aisle");
|
||||
}
|
||||
break;
|
||||
|
||||
case "Mark zone":
|
||||
case "draw-zone":
|
||||
if (toggleView) {
|
||||
setToolMode("Zone");
|
||||
}
|
||||
break;
|
||||
|
||||
case "Draw Floor":
|
||||
case "draw-floor":
|
||||
if (toggleView) {
|
||||
setToolMode("Floor");
|
||||
}
|
||||
break;
|
||||
|
||||
case "Measurement Tool":
|
||||
case "measure":
|
||||
setToolMode("MeasurementScale");
|
||||
break;
|
||||
|
||||
|
|
@ -162,7 +182,7 @@ const Tools: React.FC = () => {
|
|||
}
|
||||
break;
|
||||
|
||||
case "Delete":
|
||||
case "delete":
|
||||
if (toggleView) {
|
||||
setDeletePointOrLine(true);
|
||||
} else {
|
||||
|
|
@ -206,13 +226,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 />
|
||||
|
|
@ -246,6 +277,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>
|
||||
|
|
@ -262,6 +307,7 @@ const Tools: React.FC = () => {
|
|||
onClick={() => {
|
||||
setActiveTool("draw-wall");
|
||||
}}
|
||||
title="Wall"
|
||||
>
|
||||
<WallIcon isActive={activeTool === "draw-wall"} />
|
||||
</div>
|
||||
|
|
@ -271,6 +317,7 @@ const Tools: React.FC = () => {
|
|||
onClick={() => {
|
||||
setActiveTool("draw-zone");
|
||||
}}
|
||||
title="Zone"
|
||||
>
|
||||
<ZoneIcon isActive={activeTool === "draw-zone"} />
|
||||
</div>
|
||||
|
|
@ -280,6 +327,7 @@ const Tools: React.FC = () => {
|
|||
onClick={() => {
|
||||
setActiveTool("draw-aisle");
|
||||
}}
|
||||
title="Aisle"
|
||||
>
|
||||
<AsileIcon isActive={activeTool === "draw-aisle"} />
|
||||
</div>
|
||||
|
|
@ -289,12 +337,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>
|
||||
|
|
@ -341,15 +408,18 @@ const Tools: React.FC = () => {
|
|||
>
|
||||
<CommentIcon isActive={activeTool === "comment"} />
|
||||
</div>
|
||||
<div
|
||||
className={`tool-button ${activeTool === "play" ? "active" : ""
|
||||
{toggleThreeD && (
|
||||
<div
|
||||
className={`tool-button ${
|
||||
activeTool === "play" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsPlaying(!isPlaying);
|
||||
}}
|
||||
>
|
||||
<PlayIcon isActive={activeTool === "play"} />
|
||||
</div>
|
||||
onClick={() => {
|
||||
setIsPlaying(!isPlaying);
|
||||
}}
|
||||
>
|
||||
<PlayIcon isActive={activeTool === "play"} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="split"></div>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -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.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.`}
|
||||
</div>
|
||||
<div className="asset-review">
|
||||
<div className="asset-rating">
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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> */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue