integerated product context to scene context
This commit is contained in:
@@ -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,9 +13,8 @@ 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/ui/useUIToggleStore";
|
||||
import { useProductContext } from "../../../../modules/simulation/products/productContext";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
|
||||
@@ -39,9 +38,7 @@ const List: React.FC<ListProps> = ({ val }) => {
|
||||
const Simulations: React.FC = () => {
|
||||
const productsContainerRef = useRef<HTMLDivElement>(null);
|
||||
const { eventStore, productStore, versionStore } = useSceneContext();
|
||||
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = productStore();
|
||||
const { selectedProductStore } = useProductContext();
|
||||
const { selectedProduct, setSelectedProduct } = selectedProductStore();
|
||||
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, selectedProduct, setSelectedProduct } = productStore();
|
||||
const { getEventByModelUuid } = eventStore();
|
||||
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
|
||||
const [openObjects, setOpenObjects] = useState(true);
|
||||
@@ -67,7 +64,7 @@ const Simulations: React.FC = () => {
|
||||
productName: name,
|
||||
productUuid: id,
|
||||
projectId: projectId,
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
versionId: selectedVersion?.versionId || "",
|
||||
});
|
||||
};
|
||||
|
||||
@@ -83,14 +80,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("", "");
|
||||
@@ -100,14 +91,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);
|
||||
@@ -116,11 +107,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);
|
||||
@@ -133,21 +123,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 (
|
||||
@@ -157,77 +144,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 />
|
||||
@@ -244,12 +195,9 @@ const Simulations: React.FC = () => {
|
||||
</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" />
|
||||
@@ -268,8 +216,8 @@ const Simulations: React.FC = () => {
|
||||
addEvent,
|
||||
selectedProduct,
|
||||
clearSelectedAsset,
|
||||
projectId: projectId || '',
|
||||
versionId: selectedVersion?.versionId || '',
|
||||
projectId: projectId || "",
|
||||
versionId: selectedVersion?.versionId || "",
|
||||
});
|
||||
} else {
|
||||
handleRemoveEventFromProduct();
|
||||
|
||||
Reference in New Issue
Block a user