created new window

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

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+    useCreateNewWindow,
+    useIsComparing,
+    useLoadingProgress,
+} from "../../../store/builder/store";
+import { useSimulationState } from "../../../store/simulation/useSimulationStore";
+
+const Button = () => {
+    const { isComparing, setIsComparing } = useIsComparing();
+    const { createNewWindow, setCreateNewWindow } = useCreateNewWindow();
+    const { setLoadingProgress } = useLoadingProgress();
+    const { clearComparisonState } = useSimulationState();
+
+    const handleExit = () => {
+        setIsComparing(false);
+        setCreateNewWindow(false);
+        setLoadingProgress(0);
+        clearComparisonState();
+    };
+
+    const handleOpenInNewWindow = () => {
+        // 🧹 Immediately reset any loading or scene state
+        setLoadingProgress(0);
+        setCreateNewWindow(true);
+    };
+
+    return (
+        <div
+            style={{
+                position: "absolute",
+                top: "10px",
+                left: "10px",
+                zIndex: 1000,
+                display: "flex",
+                gap: "10px",
+            }}
+        >
+            {isComparing && <button onClick={handleExit}>Exit</button>}
+            {isComparing && !createNewWindow && (
+                <button onClick={handleOpenInNewWindow}>Open in New Window</button>
+            )}
+        </div>
+    );
+};
+
+export default Button;

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

@@ -1,7 +1,11 @@
 import { useParams } from "react-router-dom";
 import React, { useState, useRef, useEffect, Suspense } from "react";
 import { CompareLayoutIcon, LayoutIcon, ResizerIcon } from "../../icons/SimulationIcons";
-import { useLoadingProgress, useIsComparing } from "../../../store/builder/store";
+import {
+    useLoadingProgress,
+    useIsComparing,
+    useCreateNewWindow,
+} from "../../../store/builder/store";
 import { useSimulationState } from "../../../store/simulation/useSimulationStore";
 import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
@@ -13,11 +17,18 @@ import useRestStates from "../../../hooks/useResetStates";
 
 import { getVersionHistoryApi } from "../../../services/factoryBuilder/versionControl/getVersionHistoryApi";
 import { validateSimulationDataApi } from "../../../services/simulation/comparison/validateSimulationDataApi";
+import Button from "./Button";
 
 const CompareLayOut = () => {
     const { clearComparisonState, comparisonScene, setComparisonState } = useSimulationState();
     const { versionStore } = useSceneContext();
-    const { versionHistory, selectedVersion, setSelectedVersion, clearSelectedVersion, setVersions } = versionStore();
+    const {
+        versionHistory,
+        selectedVersion,
+        setSelectedVersion,
+        clearSelectedVersion,
+        setVersions,
+    } = versionStore();
     const { setLoadingProgress } = useLoadingProgress();
     const [width, setWidth] = useState("50vw");
     const [isResizing, setIsResizing] = useState(false);
@@ -30,6 +41,7 @@ const CompareLayOut = () => {
     const { setIsPlaying } = usePlayButtonStore();
     const { projectId } = useParams();
     const { resetStates } = useRestStates();
+    const { createNewWindow } = useCreateNewWindow();
     useEffect(() => {
         return () => {
             resetStates();
@@ -162,8 +174,8 @@ const CompareLayOut = () => {
                 setLoadingProgress(1);
                 const singleData = {
                     projectId: projectId,
-                    versionId: version.versionId, 
-                    productUuid: data[0].productUuid, 
+                    versionId: version.versionId,
+                    productUuid: data[0].productUuid,
                 };
 
                 validateSimulationDataApi(singleData).then((getData) => {
@@ -178,59 +190,77 @@ const CompareLayOut = () => {
     };
 
     return (
-        <div className={`compareLayOut-wrapper ${width === "0px" ? "closed" : ""}`} ref={wrapperRef} style={{ width }}>
-            {loadingProgress === 0 && selectedVersion?.versionId && (
-                <button title="resize-canvas" id="compare-resize-slider-btn" className="resizer" onMouseDown={handleStartResizing}>
-                    <ResizerIcon />
-                </button>
-            )}
-            <div className="chooseLayout-container">
-                {selectedVersion?.versionId && (
-                    <div className="compare-layout-canvas-container">
-                        <Suspense fallback={null}>
-                            <Scene layout="Comparison Layout" />
-                        </Suspense>
-                    </div>
-                )}
-
-                {width !== "0px" &&
-                    !selectedVersion?.versionId && ( // Show only if no layout selected
-                        <div className="chooseLayout-wrapper">
-                            <div className="icon">
-                                <CompareLayoutIcon />
+        <>
+            {!createNewWindow && (
+                <div
+                    className={`compareLayOut-wrapper ${width === "0px" ? "closed" : ""}`}
+                    ref={wrapperRef}
+                    style={{ width }}
+                >
+                    {loadingProgress === 0 && selectedVersion?.versionId && (
+                        <button
+                            title="resize-canvas"
+                            id="compare-resize-slider-btn"
+                            className="resizer"
+                            onMouseDown={handleStartResizing}
+                        >
+                            <ResizerIcon />
+                        </button>
+                    )}
+                    <div className="chooseLayout-container">
+                        {selectedVersion?.versionId && (
+                            <div className="compare-layout-canvas-container">
+                                <Suspense fallback={null}>
+                                    <Scene layout="Comparison Layout" />
+                                </Suspense>
                             </div>
-                            <div className="value">Choose Version to compare</div>
-                            <button className="selectLayout" onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}>
-                                Select Version
-                            </button>
+                        )}
 
-                            {showLayoutDropdown && (
-                                <div className="displayLayouts-container">
-                                    <div className="header">Versions</div>
-                                    <Search onChange={() => {}} />
-                                    <div className="layouts-container">
-                                        {versionHistory.map((version) => (
-                                            <button
-                                                key={version.versionId}
-                                                className="layout-wrapper"
-                                                onClick={() => {
-                                                    handleSelectLayout(version);
-                                                    setShowLayoutDropdown(false);
-                                                }}
-                                            >
-                                                <LayoutIcon />
-                                                <div className="layout">{version.versionName}</div>
-                                            </button>
-                                        ))}
+                        {width !== "0px" &&
+                            !selectedVersion?.versionId && ( // Show only if no layout selected
+                                <div className="chooseLayout-wrapper">
+                                    <div className="icon">
+                                        <CompareLayoutIcon />
                                     </div>
+                                    <div className="value">Choose Version to compare</div>
+                                    <button
+                                        className="selectLayout"
+                                        onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}
+                                    >
+                                        Select Version
+                                    </button>
+
+                                    {showLayoutDropdown && (
+                                        <div className="displayLayouts-container">
+                                            <div className="header">Versions</div>
+                                            <Search onChange={() => {}} />
+                                            <div className="layouts-container">
+                                                {versionHistory.map((version) => (
+                                                    <button
+                                                        key={version.versionId}
+                                                        className="layout-wrapper"
+                                                        onClick={() => {
+                                                            handleSelectLayout(version);
+                                                            setShowLayoutDropdown(false);
+                                                        }}
+                                                    >
+                                                        <LayoutIcon />
+                                                        <div className="layout">
+                                                            {version.versionName}
+                                                        </div>
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             )}
-                        </div>
-                    )}
 
-                {/* Always show after layout is selected */}
-            </div>
-        </div>
+                        {/* Always show after layout is selected */}
+                    </div>
+                </div>
+            )}
+        </>
     );
 };
 

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

@@ -0,0 +1,44 @@
+import React, { Suspense, useEffect, useState } from "react";
+import { RenderInNewWindow } from "../../templates/CreateNewWindow";
+import { useSceneContext } from "../../../modules/scene/sceneContext";
+import { useCreateNewWindow, useLoadingProgress } from "../../../store/builder/store";
+import Scene from "../../../modules/scene/scene";
+import ComparisonResult from "./ComparisonResult";
+import Button from "./Button";
+
+const NewWindowScene = () => {
+    const { versionStore } = useSceneContext();
+    const { selectedVersion } = versionStore();
+    const { setCreateNewWindow } = useCreateNewWindow();
+    const { loadingProgress } = useLoadingProgress();
+
+    return (
+        <>
+            {selectedVersion?.versionId && (
+                <div style={{ width: "100%", height: "100%" }}>
+                    <Suspense fallback={null}>
+                        <RenderInNewWindow
+                            title="3D Viewer"
+                            onClose={() => setCreateNewWindow(false)}
+                        >
+                            <div
+                                style={{
+                                    position: "absolute",
+                                    top: "10px",
+                                    right: "900px",
+                                    zIndex: 1000,
+                                }}
+                            >
+                                <Button />
+                            </div>
+                            <Scene layout="Comparison Layout" />
+                            {!loadingProgress && <ComparisonResult />}
+                        </RenderInNewWindow>
+                    </Suspense>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default NewWindowScene;