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

refactor: update component structure and enhance list functionality with new asset and zone handling

Browse Source
This commit is contained in:
Vishnu
2025-09-05 15:50:07 +05:30
parent 18562307a2
commit f27af9a58d
10 changed files with 408 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/src/components/layout/sidebarRight/simulation/Simulations.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from "react";
import { AddIcon, ArrowIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icons/ExportCommonIcons";
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";
@@ -13,7 +13,7 @@ import { deleteProductApi } from "../../../../services/simulation/products/delet
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 { useCompareStore, useSaveVersion } from "../../../../store/builder/store";
import { useToggleStore } from "../../../../store/useUIToggleStore";
import { useProductContext } from "../../../../modules/simulation/products/productContext";
import { useParams } from "react-router-dom";
@@ -25,22 +25,10 @@ interface Event {
modelId: string;
}
interface ListProps {
val: Event;
}
const List: React.FC<ListProps> = ({ val }) => {
return (
<div className="process-container">
<div className="value">{val.modelName}</div>
</div>
);
};
const Simulations: React.FC = () => {
const productsContainerRef = useRef<HTMLDivElement>(null);
const { eventStore, productStore } = useSceneContext();
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = productStore();
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct, setSelectedProduct } = selectedProductStore();
const { getEventByModelUuid } = eventStore();
@@ -69,7 +57,7 @@ const Simulations: React.FC = () => {
productName: name,
productUuid: id,
projectId: projectId,
versionId: selectedVersion?.versionId || '',
versionId: selectedVersion?.versionId || "",
});
};
@@ -85,14 +73,8 @@ const Simulations: React.FC = () => {
if (currentIndex >= updatedProducts.length) {
newSelectedIndex = updatedProducts.length - 1;
}
setSelectedProduct(
updatedProducts[newSelectedIndex].productUuid,
updatedProducts[newSelectedIndex].productName
);
setMainProduct(
updatedProducts[newSelectedIndex].productUuid,
updatedProducts[newSelectedIndex].productName
);
setSelectedProduct(updatedProducts[newSelectedIndex].productUuid, updatedProducts[newSelectedIndex].productName);
setMainProduct(updatedProducts[newSelectedIndex].productUuid, updatedProducts[newSelectedIndex].productName);
} else {
setSelectedProduct("", "");
setMainProduct("", "");
@@ -102,14 +84,14 @@ const Simulations: React.FC = () => {
removeProduct(productUuid);
deleteProductApi({
productUuid,
versionId: selectedVersion?.versionId || '',
projectId
versionId: selectedVersion?.versionId || "",
projectId,
});
};
const handleRenameProduct = (productUuid: string, newName: string) => {
renameProduct(productUuid, newName);
renameProductApi({ productName: newName, productUuid, projectId: projectId || '', versionId: selectedVersion?.versionId || '' });
renameProductApi({ productName: newName, productUuid, projectId: projectId || "", versionId: selectedVersion?.versionId || "" });
if (selectedProduct.productUuid === productUuid) {
setSelectedProduct(productUuid, newName);
setMainProduct(productUuid, newName);
@@ -118,11 +100,10 @@ const Simulations: React.FC = () => {
const handleRemoveEventFromProduct = () => {
if (selectedAsset) {
deleteEventDataApi({
productUuid: selectedProduct.productUuid,
modelUuid: selectedAsset.modelUuid,
versionId: selectedVersion?.versionId || '',
versionId: selectedVersion?.versionId || "",
projectId: projectId,
});
removeEvent(selectedProduct.productUuid, selectedAsset.modelUuid);
@@ -135,21 +116,18 @@ const Simulations: React.FC = () => {
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);
}
);
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 (
@@ -159,77 +137,41 @@ const Simulations: React.FC = () => {
<div className="actions section">
<div className="header">
<div className="header-value">Products</div>
<button
id="add-simulation"
className="add-button"
onClick={handleAddProduct}
>
<button id="add-simulation" className="add-button" onClick={handleAddProduct}>
<AddIcon /> Add
</button>
</div>
<div
className="lists-main-container"
ref={productsContainerRef}
style={{ height: "120px" }}
>
<div className="lists-main-container" ref={productsContainerRef} style={{ height: "120px" }}>
<div className="list-container">
{products.map((product, index) => (
<div
key={product.productUuid}
className={`list-item ${selectedProduct.productUuid === product.productUuid
? "active"
: ""
}`}
>
<div key={product.productUuid} className={`list-item ${selectedProduct.productUuid === product.productUuid ? "active" : ""}`}>
{/* eslint-disable-next-line */}
<div
className="value"
onClick={() => {
setSelectedProduct(product.productUuid, product.productName)
setMainProduct(product.productUuid, product.productName)
setSelectedProduct(product.productUuid, product.productName);
setMainProduct(product.productUuid, product.productName);
}}
>
<input
type="radio"
name="products"
checked={selectedProduct.productUuid === product.productUuid}
readOnly
/>
<RenameInput
value={product.productName}
onRename={(newName) =>
handleRenameProduct(product.productUuid, newName)
}
/>
<input type="radio" name="products" checked={selectedProduct.productUuid === product.productUuid} readOnly />
<RenameInput value={product.productName} onRename={(newName) => handleRenameProduct(product.productUuid, newName)} />
</div>
{products.length > 1 && (
<button
id="remove-product-button"
className="remove-button"
onClick={() => handleRemoveProduct(product.productUuid)}
>
<button id="remove-product-button" className="remove-button" onClick={() => handleRemoveProduct(product.productUuid)}>
<RemoveIcon />
</button>
)}
</div>
))}
</div>
<button
className="resize-icon"
id="action-resize"
onMouseDown={(e: any) => handleResize(e, productsContainerRef)}
>
<button className="resize-icon" id="action-resize" onMouseDown={(e: any) => handleResize(e, productsContainerRef)}>
<ResizeHeightIcon />
</button>
</div>
</div>
<div className="simulation-process section">
<button
id="collapse-header"
className="collapse-header-container"
onClick={() => setOpenObjects(!openObjects)}
>
<button id="collapse-header" className="collapse-header-container" onClick={() => setOpenObjects(!openObjects)}>
<div className="header">Process Flow</div>
<div className="arrow-container">
<ArrowIcon />
@@ -239,19 +181,18 @@ const Simulations: React.FC = () => {
processes?.map((process, index) => (
<section key={index}>
{process.map((event, index) => (
<List key={`${index}-${event.modelName}`} val={event} />
<div className="process-container" key={index}>
<div className="value">{event.modelName}</div>
</div>
))}
</section>
))}
</div>
<div className="compare-simulations-container">
<div className="compare-simulations-header">
Need to Compare Layout?
</div>
<div className="compare-simulations-header">Need to Compare Layout?</div>
<div className="content">
Click '<span>Compare</span>' to review and analyze the layout
differences between them.
Click '<span>Compare</span>' to review and analyze the layout differences between them.
</div>
<button className="input" onClick={() => setComparePopUp(true)}>
<input type="button" value={"Compare"} className="submit" />
@@ -270,8 +211,8 @@ const Simulations: React.FC = () => {
addEvent,
selectedProduct,
clearSelectedAsset,
projectId: projectId || '',
versionId: selectedVersion?.versionId || '',
projectId: projectId || "",
versionId: selectedVersion?.versionId || "",
});
} else {
handleRemoveEventFromProduct();