feat: Integrate ProductsDuplicate component into ComparisonScene and update Project to use SceneProvider

app/src/components/layout/scenes/ComparisonScene.tsx

@@ -8,6 +8,7 @@ import { useComparisonProduct, useMainProduct } from '../../../store/simulation/
 import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
 import { useEffect, useState } from 'react';
 import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
+import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
 
 function ComparisonScene() {
     const { isPlaying } = usePlayButtonStore();
@@ -119,6 +120,8 @@ function ComparisonScene() {
                     }
                     <CompareLayOut />
 
+                    <ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
+
                     {(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
                 </>
             )}

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -10,15 +10,15 @@ import {
 } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
 import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import DuplicateScene from "../../../modules/duplicate/sceneDuplicate";
+import { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore";
 
 const CompareLayOut = () => {
   const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
-  const { products } = useProductStore();
+  const { products } = useDuplicateProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);

app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx

@@ -5,14 +5,13 @@ import { getAllProductsApi } from '../../../../services/simulation/products/geta
 import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useProductContext } from '../../../simulation/products/productContext';
-import { useComparisonProduct, useMainProduct } from '../../../../store/simulation/useSimulationStore';
+import { useComparisonProduct } from '../../../../store/simulation/useSimulationStore';
 import { useDuplicateProductStore } from '../../duplicateStores/duplicateProductStore';
 
 function ProductsDuplicate({ projectId }: { projectId: string }) {
     const { armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout } = useSceneContext();
-    const { products, getProductById, addProduct, setProducts } = useDuplicateProductStore();
+    const { products, getProductById, setProducts } = useDuplicateProductStore();
     const { selectedProductStore } = useProductContext();
-    const { setMainProduct } = useMainProduct();
     const { selectedProduct, setSelectedProduct } = selectedProductStore();
     const { addVehicle, clearvehicles } = vehicleStore();
     const { addArmBot, clearArmBots } = armBotStore();
@@ -31,25 +30,8 @@ function ProductsDuplicate({ projectId }: { projectId: string }) {
 
     useEffect(() => {
         getAllProductsApi(projectId || '').then((data) => {
-            if (data.length === 0) {
+            if (data.length > 0)  {
-                const id = THREE.MathUtils.generateUUID();
-                const name = 'Product 1';
-                addProduct(name, id);
-                upsertProductOrEventApi({
-                    productName: name,
-                    productUuid: id,
-                    projectId: projectId || ''
-                })
-                if (layout === 'Main Layout') {
-                    setSelectedProduct(id, name);
-                    setMainProduct(id, name);
-                }
-            } else {
                 setProducts(data);
-                if (layout === 'Main Layout') {
-                    setSelectedProduct(data[0].productUuid, data[0].productName);
-                    setMainProduct(data[0].productUuid, data[0].productName);
-                }
             }
         })
     }, [])

app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx

@@ -3,12 +3,10 @@ import ProductsDuplicate from './duplicateProduct/duplicateProduct'
 import PointsDuplicate from './duplicatePoint/duplicatePoint'
 import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
 
-function SimulationDuplicate({ projectId }: { projectId: string }) {
+function SimulationDuplicate() {
     return (
         <>
 
-            <ProductsDuplicate projectId={projectId} />
-
             <PointsDuplicate />
 
             <TriggerDuplicate />

app/src/modules/duplicate/sceneDuplicate.tsx

@@ -9,45 +9,42 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import ControlsDuplicate from "./duplicateSetup/controlsDuplicate";
 import PostProcessingDuplicate from "./duplicateSetup/postProcessingDuplicate";
 import { Color } from "three";
-import { SceneProvider } from "../scene/sceneContext";
 import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
 
 export default function DuplicateScene() {
     const projectId = "684bcd620a64bc2a815a88d6";
 
     return (
-        <SceneProvider layout='Comparison Layout'>
+        <Canvas
-            <Canvas
+            id="sceneCanvas"
-                id="sceneCanvas"
+            shadows
-                shadows
+            color="#aaaa"
-                color="#aaaa"
+            eventPrefix="client"
-                eventPrefix="client"
+            style={{
-                style={{
+                pointerEvents: 'none'
-                    pointerEvents: 'none'
+            }}
-                }}
+            onContextMenu={(e) => {
-                onContextMenu={(e) => {
+                e.preventDefault();
-                    e.preventDefault();
+            }}
-                }}
+            onCreated={(e) => {
-                onCreated={(e) => {
+                e.scene.background = new Color(0x19191d);
-                    e.scene.background = new Color(0x19191d);
+            }}
-                }}
+            gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
-                gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+        >
-            >
 
-                <Sun />
+            <Sun />
 
-                <Shadows />
+            <Shadows />
 
-                <ControlsDuplicate />
+            <ControlsDuplicate />
 
-                <PostProcessingDuplicate />
+            <PostProcessingDuplicate />
 
-                <Environment files={background} environmentIntensity={1.5} />
+            <Environment files={background} environmentIntensity={1.5} />
 
-                <BuilderDuplicate projectId={projectId} />
+            <BuilderDuplicate projectId={projectId} />
 
-                <SimulationDuplicate projectId={projectId} />
+            <SimulationDuplicate />
-            </Canvas>
+        </Canvas>
-        </SceneProvider>
     );
 }

app/src/pages/Project.tsx

@@ -34,6 +34,7 @@ import { setFloorItemApi } from "../services/factoryBuilder/assest/floorAsset/se
 import { useAssetsStore } from "../store/builder/useAssetStore";
 import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
 import MainSceneProvider from "../components/layout/scenes/MainSceneProvider";
+import { SceneProvider } from "../modules/scene/sceneContext";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -127,7 +128,9 @@ const Project: React.FC = () => {
 
   return (
     <div className="project-main">
-      <ComparisonSceneProvider />
+      <SceneProvider layout='Comparison Layout'>
+        <ComparisonSceneProvider />
+      </SceneProvider>
       <MainSceneProvider />
       {selectedUser && <FollowPerson />}
       {isLogListVisible && (