import React, { useEffect, useRef, useState } from "react"; import { AddIcon, ArrowIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons"; import RenameInput from "../../../ui/inputs/RenameInput"; import { handleResize } from "../../../../functions/handleResizePannel"; import { useMainProduct, useSelectedAsset } from "../../../../store/simulation/useSimulationStore"; import { useProductStore } from "../../../../store/simulation/useProductStore"; import { generateUUID } from "three/src/math/MathUtils"; import RenderOverlay from "../../../templates/Overlay"; import EditWidgetOption from "../../../ui/menu/EditWidgetOption"; import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct"; import { useEventsStore } from "../../../../store/simulation/useEventsStore"; import { deleteEventDataApi } from "../../../../services/simulation/products/deleteEventDataApi"; import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi"; import { deleteProductApi } from "../../../../services/simulation/products/deleteProductApi"; import { renameProductApi } from "../../../../services/simulation/products/renameProductApi"; import { determineExecutionMachineSequences } from "../../../../modules/simulation/simulator/functions/determineExecutionMachineSequences"; import ComparePopUp from "../../../ui/compareVersion/Compare"; import { useCompareStore, useSaveVersion, } from "../../../../store/builder/store"; import { useToggleStore } from "../../../../store/useUIToggleStore"; import { useProductContext } from "../../../../modules/simulation/products/productContext"; import { useParams } from "react-router-dom"; interface Event { modelName: string; modelId: string; } interface ListProps { val: Event; } const List: React.FC = ({ val }) => { return (
{val.modelName}
); }; const Simulations: React.FC = () => { const productsContainerRef = useRef(null); const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = useProductStore(); const { selectedProductStore } = useProductContext(); const { selectedProduct, setSelectedProduct } = selectedProductStore(); const { getEventByModelUuid } = useEventsStore(); const { selectedAsset, clearSelectedAsset } = useSelectedAsset(); const [openObjects, setOpenObjects] = useState(true); const [processes, setProcesses] = useState(); const { setToggleUI } = useToggleStore(); const { projectId } = useParams(); const { setMainProduct } = useMainProduct(); const { comparePopUp, setComparePopUp } = useCompareStore(); const { setIsVersionSaved } = useSaveVersion(); const handleSaveVersion = () => { setIsVersionSaved(true); setComparePopUp(false); setToggleUI(false, false); }; const handleAddProduct = () => { const id = generateUUID(); const name = `Product ${products.length + 1}`; addProduct(name, id); upsertProductOrEventApi({ productName: name, productUuid: id, projectId: projectId, }); }; const handleRemoveProduct = (productUuid: string) => { const currentIndex = products.findIndex((p) => p.productUuid === productUuid); const isSelected = selectedProduct.productUuid === productUuid; const updatedProducts = products.filter((p) => p.productUuid !== productUuid); if (isSelected) { if (updatedProducts.length > 0) { let newSelectedIndex = currentIndex; if (currentIndex >= updatedProducts.length) { newSelectedIndex = updatedProducts.length - 1; } setSelectedProduct( updatedProducts[newSelectedIndex].productUuid, updatedProducts[newSelectedIndex].productName ); setMainProduct( updatedProducts[newSelectedIndex].productUuid, updatedProducts[newSelectedIndex].productName ); } else { setSelectedProduct("", ""); setMainProduct("", ""); } } removeProduct(productUuid); deleteProductApi({ productUuid, projectId }); }; const handleRenameProduct = (productUuid: string, newName: string) => { renameProduct(productUuid, newName); renameProductApi({ productName: newName, productUuid, projectId: projectId || '' }); if (selectedProduct.productUuid === productUuid) { setSelectedProduct(productUuid, newName); setMainProduct(productUuid, newName); } }; const handleRemoveEventFromProduct = () => { if (selectedAsset) { deleteEventDataApi({ productUuid: selectedProduct.productUuid, modelUuid: selectedAsset.modelUuid, projectId: projectId, }); removeEvent(selectedProduct.productUuid, selectedAsset.modelUuid); clearSelectedAsset(); } }; useEffect(() => { const processes: Event[][] = []; const selectedProductData = getProductById(selectedProduct.productUuid); if (selectedProductData) { determineExecutionMachineSequences([selectedProductData]).then( (sequences) => { sequences.forEach((sequence) => { const events: Event[] = sequence.map((event) => ({ modelName: event.modelName, modelId: event.modelUuid, })) || []; processes.push(events); }); setProcesses(processes); } ); } }, [selectedProduct.productUuid, products]); return (
Simulations
Products
{products.map((product, index) => (
{/* eslint-disable-next-line */}
{ setSelectedProduct(product.productUuid, product.productName) setMainProduct(product.productUuid, product.productName) }} > handleRenameProduct(product.productUuid, newName) } />
{products.length > 1 && ( )}
))}
{openObjects && processes?.map((process, index) => (
{process.map((event, index) => ( ))}
))}
Need to Compare Layout?
Click 'Compare' to review and analyze the layout differences between them.
{selectedAsset && ( { if (option === "Add to Product") { handleAddEventToProduct({ event: getEventByModelUuid(selectedAsset.modelUuid), addEvent, selectedProduct, clearSelectedAsset, projectId: projectId || '' }); } else { handleRemoveEventFromProduct(); } }} /> )} {comparePopUp && ( )}
); }; export default Simulations;