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

Merge remote-tracking branch 'origin/v2-ui' into v2

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-29 10:29:13 +05:30
parent 62bfce104c 2f65ee6a71
commit f05524f928
3 changed files with 223 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
useSelectedAsset,
useSelectedEventData, useSelectedEventData,
useSelectedEventSphere, useSelectedEventSphere,
useSelectedProduct, useSelectedProduct,
@@ -11,6 +12,7 @@ import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
import MachineMechanics from "./mechanics/machineMechanics"; import MachineMechanics from "./mechanics/machineMechanics";
import StorageMechanics from "./mechanics/storageMechanics"; import StorageMechanics from "./mechanics/storageMechanics";
import { AddIcon } from "../../../../icons/ExportCommonIcons"; import { AddIcon } from "../../../../icons/ExportCommonIcons";
import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
const EventProperties: React.FC = () => { const EventProperties: React.FC = () => {
const { selectedEventData } = useSelectedEventData(); const { selectedEventData } = useSelectedEventData();
@@ -20,8 +22,10 @@ const EventProperties: React.FC = () => {
null null
); );
const [assetType, setAssetType] = useState<string | null>(null); const [assetType, setAssetType] = useState<string | null>(null);
const { products } = useProductStore(); const { products, addEvent } = useProductStore();
const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventSphere } = useSelectedEventSphere();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
useEffect(() => { useEffect(() => {
const event = getCurrentEventData(); const event = getCurrentEventData();
setCurrentEventData(event); setCurrentEventData(event);
@@ -91,7 +95,19 @@ const EventProperties: React.FC = () => {
<ul> <ul>
{products.map((product) => ( {products.map((product) => (
<li key={product.productId}> <li key={product.productId}>
<button> <button
onClick={() =>
handleAddEventToProduct({
selectedAsset,
addEvent,
selectedProduct: {
productId: product.productId,
productName: product.productName,
},
clearSelectedAsset,
})
}
>
<AddIcon /> <AddIcon />
{product.productName} {product.productName}
</button> </button>

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

@@ -1,204 +1,216 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import { import {
AddIcon, AddIcon,
ArrowIcon, ArrowIcon,
RemoveIcon, RemoveIcon,
ResizeHeightIcon, ResizeHeightIcon,
} from "../../../icons/ExportCommonIcons"; } from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput"; import RenameInput from "../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../functions/handleResizePannel"; import { handleResize } from "../../../../functions/handleResizePannel";
import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore"; import {
useSelectedAsset,
useSelectedProduct,
} from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore"; import { useProductStore } from "../../../../store/simulation/useProductStore";
import { generateUUID } from "three/src/math/MathUtils"; import { generateUUID } from "three/src/math/MathUtils";
import RenderOverlay from "../../../templates/Overlay"; import RenderOverlay from "../../../templates/Overlay";
import EditWidgetOption from "../../../ui/menu/EditWidgetOption"; import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi"; import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
interface Event { interface Event {
pathName: string; pathName: string;
} }
interface ListProps { interface ListProps {
val: Event; val: Event;
} }
const List: React.FC<ListProps> = ({ val }) => { const List: React.FC<ListProps> = ({ val }) => {
return ( return (
<div className="process-container"> <div className="process-container">
<div className="value"> <div className="value">{val.pathName}</div>
{val.pathName} </div>
</div> );
</div>
);
}; };
const Simulations: React.FC = () => { const Simulations: React.FC = () => {
const productsContainerRef = useRef<HTMLDivElement>(null); const productsContainerRef = useRef<HTMLDivElement>(null);
const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore(); const {
const { selectedProduct, setSelectedProduct } = useSelectedProduct(); products,
const { selectedAsset, clearSelectedAsset } = useSelectedAsset(); addProduct,
removeProduct,
renameProduct,
addEvent,
removeEvent,
} = useProductStore();
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const handleAddProduct = () => { const handleAddProduct = () => {
addProduct(`Product ${products.length + 1}`, generateUUID()); addProduct(`Product ${products.length + 1}`, generateUUID());
}; };
const handleRemoveProduct = (productId: string) => { const handleRemoveProduct = (productId: string) => {
const currentIndex = products.findIndex(p => p.productId === productId); const currentIndex = products.findIndex((p) => p.productId === productId);
const isSelected = selectedProduct.productId === productId; const isSelected = selectedProduct.productId === productId;
const updatedProducts = products.filter(p => p.productId !== productId); const updatedProducts = products.filter((p) => p.productId !== productId);
if (isSelected) { if (isSelected) {
if (updatedProducts.length > 0) { if (updatedProducts.length > 0) {
let newSelectedIndex = currentIndex; let newSelectedIndex = currentIndex;
if (currentIndex >= updatedProducts.length) { if (currentIndex >= updatedProducts.length) {
newSelectedIndex = updatedProducts.length - 1; newSelectedIndex = updatedProducts.length - 1;
}
setSelectedProduct(
updatedProducts[newSelectedIndex].productId,
updatedProducts[newSelectedIndex].productName
);
} else {
setSelectedProduct('', '');
}
} }
setSelectedProduct(
updatedProducts[newSelectedIndex].productId,
updatedProducts[newSelectedIndex].productName
);
} else {
setSelectedProduct("", "");
}
}
removeProduct(productId); removeProduct(productId);
}; };
const handleRenameProduct = (productId: string, newName: string) => { const handleRenameProduct = (productId: string, newName: string) => {
renameProduct(productId, newName); renameProduct(productId, newName);
if (selectedProduct.productId === productId) { if (selectedProduct.productId === productId) {
setSelectedProduct(productId, newName); setSelectedProduct(productId, newName);
} }
}; };
const handleAddEventToProduct = () => { const handleRemoveEventFromProduct = () => {
if (selectedAsset) { if (selectedAsset) {
addEvent(selectedProduct.productId, selectedAsset); removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
// upsertProductOrEventApi({ clearSelectedAsset();
// productName: selectedProduct.productName, }
// productId: selectedProduct.productId, };
// eventDatas: selectedAsset
// });
clearSelectedAsset();
}
};
const handleRemoveEventFromProduct = () => { const selectedProductData = products.find(
if (selectedAsset) { (product) => product.productId === selectedProduct.productId
removeEvent(selectedProduct.productId, selectedAsset.modelUuid); );
clearSelectedAsset();
}
};
const selectedProductData = products.find( const events: Event[] =
(product) => product.productId === selectedProduct.productId selectedProductData?.eventDatas.map((event) => ({
); pathName: event.modelName,
const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
pathName: event.modelName,
})) || []; })) || [];
return ( return (
<div className="simulations-container"> <div className="simulations-container">
<div className="header">Simulations</div> <div className="header">Simulations</div>
<div className="add-product-container"> <div className="add-product-container">
<div className="actions"> <div className="actions">
<div className="header"> <div className="header">
<div className="header-value">Products</div> <div className="header-value">Products</div>
<div className="add-button" onClick={handleAddProduct}> <div className="add-button" onClick={handleAddProduct}>
<AddIcon /> Add <AddIcon /> Add
</div>
</div>
<div
className="lists-main-container"
ref={productsContainerRef}
style={{ height: "120px" }}
>
<div className="list-container">
{products.map((product, index) => (
<div
key={product.productId}
className={`list-item ${selectedProduct.productId === product.productId ? "active" : ""}`}
>
<div
className="value"
onClick={() => setSelectedProduct(product.productId, product.productName)}
>
<input
type="radio"
name="products"
checked={selectedProduct.productId === product.productId}
readOnly
/>
<RenameInput
value={product.productName}
onRename={(newName) => handleRenameProduct(product.productId, newName)}
/>
</div>
{products.length > 1 && (
<div
className="remove-button"
onClick={() => handleRemoveProduct(product.productId)}
>
<RemoveIcon />
</div>
)}
</div>
))}
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, productsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div>
<div className="simulation-process">
<div className="collapse-header-container">
<div className="header">Events</div>
<div className="arrow-container">
<ArrowIcon />
</div>
</div>
{events.map((event, index) => (
<List key={index} val={event} />
))}
</div>
<div className="compare-simulations-container">
<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.
</div>
<div className="input">
<input type="button" value={"Compare"} className="submit" />
</div>
</div>
</div> </div>
</div>
{selectedAsset && <div
<RenderOverlay> className="lists-main-container"
<EditWidgetOption ref={productsContainerRef}
options={['Add to Product', 'Remove from Product']} style={{ height: "120px" }}
onClick={(option) => { >
if (option === 'Add to Product') { <div className="list-container">
handleAddEventToProduct(); {products.map((product, index) => (
} else { <div
handleRemoveEventFromProduct(); key={product.productId}
} className={`list-item ${
}} selectedProduct.productId === product.productId
? "active"
: ""
}`}
>
<div
className="value"
onClick={() =>
setSelectedProduct(product.productId, product.productName)
}
>
<input
type="radio"
name="products"
checked={selectedProduct.productId === product.productId}
readOnly
/> />
</RenderOverlay> <RenameInput
} value={product.productName}
onRename={(newName) =>
handleRenameProduct(product.productId, newName)
}
/>
</div>
{products.length > 1 && (
<div
className="remove-button"
onClick={() => handleRemoveProduct(product.productId)}
>
<RemoveIcon />
</div>
)}
</div>
))}
</div>
<div
className="resize-icon"
id="action-resize"
onMouseDown={(e) => handleResize(e, productsContainerRef)}
>
<ResizeHeightIcon />
</div>
</div>
</div> </div>
);
<div className="simulation-process">
<div className="collapse-header-container">
<div className="header">Events</div>
<div className="arrow-container">
<ArrowIcon />
</div>
</div>
{events.map((event, index) => (
<List key={index} val={event} />
))}
</div>
<div className="compare-simulations-container">
<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.
</div>
<div className="input">
<input type="button" value={"Compare"} className="submit" />
</div>
</div>
</div>
{selectedAsset && (
<RenderOverlay>
<EditWidgetOption
options={["Add to Product", "Remove from Product"]}
onClick={(option) => {
if (option === "Add to Product") {
handleAddEventToProduct({
selectedAsset,
addEvent,
selectedProduct,
clearSelectedAsset,
});
} else {
handleRemoveEventFromProduct();
}
}}
/>
</RenderOverlay>
)}
</div>
);
}; };
export default Simulations; export default Simulations;

28
app/src/modules/simulation/events/points/functions/handleAddEventToProduct.ts Normal file
View File

@@ -0,0 +1,28 @@
interface HandleAddEventToProductParams {
selectedAsset: any; // Replace `any` with specific type if you have it
addEvent: (productId: string, asset: any) => void;
selectedProduct: {
productId: string;
productName: string;
// Add other fields if needed
};
clearSelectedAsset: () => void;
}
export const handleAddEventToProduct = ({
selectedAsset,
addEvent,
selectedProduct,
clearSelectedAsset,
}: HandleAddEventToProductParams) => {
console.log('selectedProduct: ', selectedProduct);
if (selectedAsset) {
addEvent(selectedProduct.productId, selectedAsset);
// upsertProductOrEventApi({
// productName: selectedProduct.productName,
// productId: selectedProduct.productId,
// eventDatas: selectedAsset
// });
clearSelectedAsset();
}
};