Move Overlay to Scene #332

This makes the code more simple I think
open-pv · Oct 18, 2024 · 40d8f40 · 40d8f40
1 parent 5ee0b41
commit 40d8f40
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 80 deletions.
diff --git a/src/components/ThreeViewer/Scene.jsx b/src/components/ThreeViewer/Scene.jsx
@@ -9,22 +9,28 @@ import { PVSystems } from "./Meshes/PVSystems"
 import SimulationMesh from "./Meshes/SimulationMesh"
 import SurroundingMesh from "./Meshes/SurroundingMesh"
 import VegetationMesh from "./Meshes/VegetationMesh"
+import Overlay from "./Overlay"
 import PointsAndEdges from "./PointsAndEdges"
 import Terrain from "./Terrain"
 
 const Scene = ({
+  frontendState,
+  setFrontendState,
   geometries,
   simulationMeshes,
+  setSimulationMeshes,
   showTerrain,
-  frontendState,
+  setShowTerrain,
   pvSystems,
+  setPVSystems,
   selectedMesh,
   setSelectedMesh,
   selectedPVSystem,
   setSelectedPVSystem,
   pvPoints,
   setPVPoints,
   vegetationGeometries,
+  geoLocation,
 }) => {
   window.setPVPoints = setPVPoints
   const position = [
@@ -34,67 +40,88 @@ const Scene = ({
   ]
   const cameraRef = useRef()
   return (
-    <Canvas
-      camera={{
-        fov: 45,
-        near: 1,
-        far: 20000,
-        position: position,
-        up: [0, 0, 1],
-        ref: cameraRef,
-      }}
-    >
-      <ambientLight intensity={2} />
-      <directionalLight intensity={1} position={[0, -1, -2]} />
-      <directionalLight intensity={0.5} position={[1, 0, -2]} />
-      <directionalLight intensity={0.5} position={[-1, 0, -2]} />
+    <>
+      <Overlay
+        frontendState={frontendState}
+        setFrontendState={setFrontendState}
+        showTerrain={showTerrain}
+        setShowTerrain={setShowTerrain}
+        selectedMesh={selectedMesh}
+        setSelectedMesh={setSelectedMesh}
+        geometries={geometries}
+        geoLocation={geoLocation}
+        setPVSystems={setPVSystems}
+        pvSystems={pvSystems}
+        selectedPVSystem={selectedPVSystem}
+        setSelectedPVSystem={setSelectedPVSystem}
+        pvPoints={pvPoints}
+        setPVPoints={setPVPoints}
+        simulationMeshes={simulationMeshes}
+        setSimulationMeshes={setSimulationMeshes}
+      />
+
+      <Canvas
+        camera={{
+          fov: 45,
+          near: 1,
+          far: 20000,
+          position: position,
+          up: [0, 0, 1],
+          ref: cameraRef,
+        }}
+      >
+        <ambientLight intensity={2} />
+        <directionalLight intensity={1} position={[0, -1, -2]} />
+        <directionalLight intensity={0.5} position={[1, 0, -2]} />
+        <directionalLight intensity={0.5} position={[-1, 0, -2]} />
 
-      {geometries.surrounding.length > 0 && (
-        <SurroundingMesh geometries={geometries.surrounding} />
-      )}
-      {geometries.background.length > 0 && (
-        <SurroundingMesh geometries={geometries.background} />
-      )}
+        {geometries.surrounding.length > 0 && (
+          <SurroundingMesh geometries={geometries.surrounding} />
+        )}
+        {geometries.background.length > 0 && (
+          <SurroundingMesh geometries={geometries.background} />
+        )}
 
-      {simulationMeshes.length > 0 && (
-        <SimulationMesh meshes={simulationMeshes} />
-      )}
-      {selectedMesh && <HighlightedMesh meshes={selectedMesh} />}
-      {selectedPVSystem && (
-        <HighlightedPVSystem geometries={selectedPVSystem} />
-      )}
-      {simulationMeshes.length > 0 && frontendState == "Results" && (
-        <CustomMapControl
-          middle={simulationMeshes[0].middle}
-          setSelectedMesh={setSelectedMesh}
-          setSelectedPVSystem={setSelectedPVSystem}
-        />
-      )}
-      {frontendState == "DrawPV" && (
-        <DrawPVControl
-          middle={simulationMeshes[0].middle}
-          setPVPoints={setPVPoints}
-        />
-      )}
-      {frontendState == "DrawPV" && <PointsAndEdges points={pvPoints} />}
+        {simulationMeshes.length > 0 && (
+          <SimulationMesh meshes={simulationMeshes} />
+        )}
+        {selectedMesh && <HighlightedMesh meshes={selectedMesh} />}
+        {selectedPVSystem && (
+          <HighlightedPVSystem geometries={selectedPVSystem} />
+        )}
+        {simulationMeshes.length > 0 && frontendState == "Results" && (
+          <CustomMapControl
+            middle={simulationMeshes[0].middle}
+            setSelectedMesh={setSelectedMesh}
+            setSelectedPVSystem={setSelectedPVSystem}
+          />
+        )}
+        {frontendState == "DrawPV" && (
+          <DrawPVControl
+            middle={simulationMeshes[0].middle}
+            setPVPoints={setPVPoints}
+          />
+        )}
+        {frontendState == "DrawPV" && <PointsAndEdges points={pvPoints} />}
 
-      {pvSystems.length > 0 && <PVSystems pvSystems={pvSystems} />}
+        {pvSystems.length > 0 && <PVSystems pvSystems={pvSystems} />}
 
-      {vegetationGeometries && (
-        <>
-          {vegetationGeometries.background &&
-            vegetationGeometries.background.length > 0 && (
-              <VegetationMesh geometries={vegetationGeometries.background} />
-            )}
-          {vegetationGeometries.surrounding &&
-            vegetationGeometries.surrounding.length > 0 && (
-              <VegetationMesh geometries={vegetationGeometries.surrounding} />
-            )}
-        </>
-      )}
+        {vegetationGeometries && (
+          <>
+            {vegetationGeometries.background &&
+              vegetationGeometries.background.length > 0 && (
+                <VegetationMesh geometries={vegetationGeometries.background} />
+              )}
+            {vegetationGeometries.surrounding &&
+              vegetationGeometries.surrounding.length > 0 && (
+                <VegetationMesh geometries={vegetationGeometries.surrounding} />
+              )}
+          </>
+        )}
 
-      {simulationMeshes.length > 0 && <Terrain visible={showTerrain} />}
-    </Canvas>
+        {simulationMeshes.length > 0 && <Terrain visible={showTerrain} />}
+      </Canvas>
+    </>
   )
 }
 

diff --git a/src/pages/Simulation.jsx b/src/pages/Simulation.jsx
@@ -1,10 +1,8 @@
 import React, { useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
-import * as THREE from "three"
 import WrongAdress from "../components/ErrorMessages/WrongAdress"
 import Footer from "../components/Footer"
 import LoadingBar from "../components/Template/LoadingBar"
-import Overlay from "../components/ThreeViewer/Overlay"
 import Scene from "../components/ThreeViewer/Scene"
 import Main from "../Main"
 import { mainSimulation } from "../simulation/main"
@@ -62,34 +60,17 @@ function Index() {
   return (
     <Main description={"Berechne das Potential deiner Solaranlage."}>
       <div className="content">
-        {(frontendState == "Results" || frontendState == "DrawPV") && (
-          <Overlay
-            frontendState={frontendState}
-            setFrontendState={setFrontendState}
-            showTerrain={showTerrain}
-            setShowTerrain={setShowTerrain}
-            selectedMesh={selectedMesh}
-            setSelectedMesh={setSelectedMesh}
-            geometries={geometries}
-            geoLocation={location}
-            setPVSystems={setPVSystems}
-            pvSystems={pvSystems}
-            selectedPVSystem={selectedPVSystem}
-            setSelectedPVSystem={setSelectedPVSystem}
-            pvPoints={pvPoints}
-            setPVPoints={setPVPoints}
-            simulationMeshes={simulationMeshes}
-            setSimulationMeshes={setSimulationMeshes}
-          />
-        )}
         {frontendState == "ErrorAdress" && <WrongAdress />}
 
         {(frontendState == "Results" || frontendState == "DrawPV") && (
           <Scene
+            frontendState={frontendState}
+            setFrontendState={setFrontendState}
             geometries={geometries}
             simulationMeshes={simulationMeshes}
+            setSimulationMeshes={setSimulationMeshes}
             showTerrain={showTerrain}
-            frontendState={frontendState}
+            setShowTerrain={setShowTerrain}
             pvSystems={pvSystems}
             setPVSystems={setPVSystems}
             selectedMesh={selectedMesh}
@@ -99,6 +80,7 @@ function Index() {
             pvPoints={pvPoints}
             setPVPoints={setPVPoints}
             vegetationGeometries={vegetationGeometries}
+            geoLocation={location}
           />
         )}