One Canvas

Author: TheJeran

src/components/plots/AxisLines.tsx

@@ -28,24 +28,20 @@ const AXIS_CONSTANTS = {
 };
 
 const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, flipDown: boolean}) =>{
-  const {dimArrays, dimNames, dimUnits, dataShape, revY} = useGlobalStore(useShallow(state => ({
+  const {dimArrays, dimNames, dimUnits, dataShape, revY, isFlat} = useGlobalStore(useShallow(state => ({
     dimArrays: state.dimArrays,
     dimNames: state.dimNames,
     dimUnits: state.dimUnits,
     dataShape: state.dataShape,
-    revY: state.flipY
+    revY: state.flipY, isFlat:state.isFlat
   })))
 
   const {xRange, yRange, zRange, plotType, timeScale, animProg, zSlice, ySlice, xSlice} = usePlotStore(useShallow(state => ({
-    xRange: state.xRange,
-    yRange: state.yRange,
-    zRange: state.zRange,
-    plotType: state.plotType,
-    timeScale: state.timeScale,
-    animProg: state.animProg,
-    zSlice: state.zSlice,
-    ySlice: state.ySlice,
-    xSlice: state.xSlice
+    xRange: state.xRange, yRange: state.yRange,
+    zRange: state.zRange, plotType: state.plotType,
+    timeScale: state.timeScale, animProg: state.animProg,
+    zSlice: state.zSlice, ySlice: state.ySlice,
+    xSlice: state.xSlice, 
   })))
 
   const {hideAxis, hideAxisControls} = useImageExportStore(useShallow( state => ({
@@ -63,6 +59,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli
     revY ? dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined).reverse() : dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
     dimArrays[2].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined),
   ]
+  const cursor = isFlat || plotType === "flat" ? "default" : "pointer"
 
   const [xResolution, setXResolution] = useState<number>(AXIS_CONSTANTS.INITIAL_RESOLUTION)
   const [yResolution, setYResolution] = useState<number>(AXIS_CONSTANTS.INITIAL_RESOLUTION)
@@ -156,7 +153,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli
               material-depthTest={false}
               position={[xTitleOffset, -AXIS_CONSTANTS.TITLE_FONT_SIZE_FACTOR * globalScale / 2, 0]}
               onClick={e=>setXResolution(x=> Math.min(x+1,AXIS_CONSTANTS.MAX_RESOLUTION))}
-              onPointerEnter={e=>document.body.style.cursor = 'pointer'}
+              onPointerEnter={e=>document.body.style.cursor = cursor}
               onPointerLeave={e=>document.body.style.cursor = 'default'}
             >
               +
@@ -307,7 +304,7 @@ const CubeAxis = ({flipX, flipY, flipDown}: {flipX: boolean, flipY: boolean, fli
               material-depthTest={false}
               position={[0, -yTitleOffset, 0]}
               onClick={e=>setYResolution(x=> Math.max(x-1,AXIS_CONSTANTS.MIN_RESOLUTION))}
-              onPointerEnter={e=>document.body.style.cursor = 'pointer'}
+              onPointerEnter={e=>document.body.style.cursor = cursor}
               onPointerLeave={e=>document.body.style.cursor = 'default'}
             >
               -
@@ -387,6 +384,8 @@ const FlatAxis = () =>{
 
   const [xResolution, setXResolution] = useState<number>(FLAT_AXIS_CONSTANTS.INITIAL_RESOLUTION)
   const [yResolution, setYResolution] = useState<number>(FLAT_AXIS_CONSTANTS.INITIAL_RESOLUTION)
+  
+  const cursor = isFlat || plotType === "flat" ? "default" : "pointer"
 
   const { axisArrays, axisUnits, axisNames } = useMemo(() => {
 
@@ -499,7 +498,7 @@ const FlatAxis = () =>{
               material-depthTest={false}
               position={[-xTitleOffset, -0.05, 0]}
               onClick={e=>setXResolution(x=> Math.max(x-1,FLAT_AXIS_CONSTANTS.MIN_RESOLUTION))}
-              onPointerEnter={e=>document.body.style.cursor = 'pointer'}
+              onPointerEnter={e=>document.body.style.cursor = cursor}
               onPointerLeave={e=>document.body.style.cursor = 'default'}
             >
               -
@@ -547,7 +546,7 @@ const FlatAxis = () =>{
               material-depthTest={false}
               position={[ 0.0, yTitleOffset, 0]}
               onClick={e=>setYResolution(x=> Math.min(x+1,FLAT_AXIS_CONSTANTS.MAX_RESOLUTION))}
-              onPointerEnter={e=>document.body.style.cursor = 'pointer'}
+              onPointerEnter={e=>document.body.style.cursor = cursor}
               onPointerLeave={e=>document.body.style.cursor = 'default'}
             >
               +
@@ -562,7 +561,7 @@ const FlatAxis = () =>{
               material-depthTest={false}
               position={[0.0, -yTitleOffset, 0]}
               onClick={e=>setYResolution(x=> Math.max(x-1,FLAT_AXIS_CONSTANTS.MIN_RESOLUTION))}
-              onPointerEnter={e=>document.body.style.cursor = 'pointer'}
+              onPointerEnter={e=>document.body.style.cursor = cursor}
               onPointerLeave={e=>document.body.style.cursor = 'default'}
             >
               -
@@ -583,6 +582,9 @@ export const AxisLines = () => {
   const {isFlat} = useGlobalStore(useShallow(state => ({
     isFlat: state.isFlat
   })))
+  const {plotType} = usePlotStore(useShallow(state=>({
+    plotType:state.plotType
+  })))
   useFrame(({camera})=>{
       const shouldFlipX = Math.abs(camera.rotation.z) > Math.PI / 2
       if (flipX !== shouldFlipX) {
@@ -601,11 +603,11 @@ export const AxisLines = () => {
       }
 
   })
-
+  const cond = isFlat || plotType == "flat"
   return (
     <>
-    {!isFlat && <CubeAxis flipX={flipX} flipY={flipY} flipDown={flipDown} />}
-    <FlatAxis />
+    {!cond && <CubeAxis flipX={flipX} flipY={flipY} flipDown={flipDown} />}
+    {cond && <FlatAxis />}
     </>
   )
 }

src/components/plots/Plot.tsx

@@ -78,7 +78,7 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
 
       return () => cancelAnimationFrame(frameId);
     }
-  },[resetCamera])
+  },[resetCamera, isFlat])
 
   useEffect(()=>{
     if (hasMounted.current){
@@ -112,7 +112,6 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
       orbitRef.current.update()
     }
   }
-
   },[useOrtho])
 
   return (
@@ -316,7 +315,6 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
       {show && <Colorbar units={stableMetadata?.units} metadata={stableMetadata} valueScales={valueScales}/>}
       <Nav />
       {(isFlat || plotType == "flat") && <AnalysisInfo loc={loc} show={showInfo} info={[...coords.current,val.current]}/> }
-      {((!isFlat && plotType != "flat") || (isFlat && plotType === 'sphere')) && <>
       <Canvas id='main-canvas' camera={{ position: isFlat ? [0,0,5] : [-4.5, 3, 4.5], fov: 50 }}
         frameloop="demand"
         gl={{ preserveDrawingBuffer: true }}
@@ -340,22 +338,15 @@ const Plot = ({ZarrDS}:{ZarrDS: ZarrDataset}) => {
             {displaceSurface ? <Sphere textures={textures} ZarrDS={ZarrDS} /> : <SphereBlocks textures={textures} />}
           </>
         }
-        <Orbiter isFlat={false} />
-      </Canvas>
-      </>}
-
+        <Orbiter isFlat={(isFlat || (!isFlat && plotType == "flat"))} />
         {(isFlat || (!isFlat && plotType == "flat")) && <>
-        <Canvas id='main-canvas' camera={{ position: [0,0,5], zoom: 1000 }}
-        orthographic frameloop="demand"
-        >
-          <ExportCanvas show={show}/>
-          <CountryBorders/>
-          {show && <AxisLines />}
           {displaceSurface && <FlatMap textures={textures as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} ZarrDS={ZarrDS}/> }
           {!displaceSurface && <FlatBlocks textures={textures} />}
-          <Orbiter isFlat={true}/>
-        </Canvas>
-        </>}
+        </>
+        }
+
+      </Canvas>
+ 
 
     </div>
   )