From 304d6689c1f64730e5ca997d17f542fce64bf04e Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Wed, 30 Apr 2025 12:46:00 +0530
Subject: [PATCH] Refactor Simulations component layout: streamline event
handling and add comparison functionality
---
.../sidebarRight/simulation/Simulations.tsx | 101 +++++++++++-------
1 file changed, 60 insertions(+), 41 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
index 5b375a7..1280693 100644
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -153,54 +153,73 @@ const Simulations: React.FC = () => {
/>
</div>
{products.length > 1 && (
- <>
- <div
- className="remove-button"
- onClick={() => handleRemoveProduct(product.productId)}
- >
- <RemoveIcon />
- </div>
-
- <div className="simulation-process section">
- <button
- className="collapse-header-container"
- onClick={() => setOpenObjects(!openObjects)}
- >
- <div className="header">Events</div>
- <div className="arrow-container">
- <ArrowIcon />
- </div>
- </button>
- {openObjects && events.map((event, index) => <List key={index} val={event} />)}
- </div>
- </>
- )}
-
- {selectedAsset && (
- <RenderOverlay>
- <EditWidgetOption
- options={["Add to Product", "Remove from Product"]}
- onClick={(option) => {
- if (option === "Add to Product") {
- handleAddEventToProduct({
- event: getEventByModelUuid(selectedAsset.modelUuid),
- addEvent,
- selectedProduct,
- clearSelectedAsset
- });
- } else {
- handleRemoveEventFromProduct();
- }
- }}
- />
- </RenderOverlay>
+ <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 section">
+ <button
+ className="collapse-header-container"
+ onClick={() => setOpenObjects(!openObjects)}
+ >
+ <div className="header">Events</div>
+ <div className="arrow-container">
+ <ArrowIcon />
+ </div>
+ </button>
+ {openObjects &&
+ 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({
+ event: getEventByModelUuid(selectedAsset.modelUuid),
+ addEvent,
+ selectedProduct,
+ clearSelectedAsset
+ });
+ } else {
+ handleRemoveEventFromProduct();
+ }
+ }}
+ />
+ </RenderOverlay>
+ )}
</div>
)
};