Moved to hook

Author: TheJeran

src/components/plots/DataCube.tsx

@@ -5,6 +5,7 @@ import { useGlobalStore, usePlotStore } from '@/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { invalidate, useFrame } from '@react-three/fiber';
 import { deg2rad } from '@/utils/HelperFuncs';
+import { useCoordBounds } from '@/hooks/useCoordBounds';
 
 interface DataCubeProps {
   volTexture: THREE.Data3DTexture[] | THREE.DataTexture[] | null,
@@ -20,8 +21,7 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => {
     const {
       valueRange, xRange, yRange, zRange, quality, useOrtho, 
       animProg, cScale, cOffset, useFragOpt, transparency, maskTexture, maskValue,
-      nanTransparency, nanColor, vTransferRange, vTransferScale, fillValue, lonExtent, latExtent, 
-      lonResolution, latResolution} = usePlotStore(useShallow(state => ({
+      nanTransparency, nanColor, vTransferRange, vTransferScale, fillValue} = usePlotStore(useShallow(state => ({
       valueRange: state.valueRange, xRange: state.xRange,
       yRange: state.yRange, zRange: state.zRange,
       quality: state.quality, useOrtho: state.useOrtho,
@@ -35,22 +35,12 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => {
       vTransferRange: state.vTransferRange,
       vTransferScale: state.vTransferScale,
       fillValue: state.fillValue,
-      lonExtent: state.lonExtent,
-      latExtent: state.latExtent,
-      lonResolution: state.lonResolution,
-      latResolution: state.latResolution,
     })))
     const meshRef = useRef<THREE.Mesh>(null!);
     const aspectRatio = shape.y/shape.x
     const timeRatio = shape.z/shape.x;
-     const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-          const newLatStep = latResolution/2;
-          const newLonStep = lonResolution/2;
-          const newLonBounds = [lonExtent[0]-newLonStep, lonExtent[1]+newLonStep]
-          const newLatBounds = [latExtent[0]-newLatStep, latExtent[1]+newLatStep]
-          return [newLonBounds, newLatBounds]
-    },[latExtent, lonExtent, lonResolution, latResolution])
-    console.log(lonBounds)
+    const {lonBounds, latBounds} = useCoordBounds()
+
     const shaderMaterial = useMemo(()=>new THREE.ShaderMaterial({
       glslVersion: THREE.GLSL3,
       uniforms: {

src/components/plots/FlatBlocks.tsx

@@ -5,6 +5,7 @@ import * as THREE from 'three'
 import { sphereBlocksFrag, flatBlocksVert, flatBlocksVert3D } from '../textures/shaders'
 import { invalidate } from '@react-three/fiber'
 import { deg2rad } from '@/utils/HelperFuncs'
+import { useCoordBounds } from '@/hooks/useCoordBounds'
 
 const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTexture[] | null}) => {
     const {colormap, isFlat, valueScales, flipY,
@@ -17,16 +18,12 @@ const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTe
         textureArrayDepths: state.textureArrayDepths
     })))
     const { animProg, cOffset, cScale, nanColor, nanTransparency, displacement, offsetNegatives, rotateFlat, maskTexture, maskValue,
-        lonResolution, latResolution, lonExtent, latExtent} = usePlotStore(useShallow(state=> ({
+        } = usePlotStore(useShallow(state=> ({
         animate: state.animate, animProg: state.animProg, cOffset: state.cOffset,
         cScale: state.cScale, nanColor: state.nanColor, nanTransparency: state.nanTransparency,
         displacement: state.displacement, sphereResolution: state.sphereResolution,
         offsetNegatives: state.offsetNegatives, rotateFlat:state.rotateFlat,
         maskTexture:state.maskTexture, maskValue:state.maskValue,
-        lonExtent: state.lonExtent,
-        latExtent: state.latExtent,
-        lonResolution: state.lonResolution,
-        latResolution: state.latResolution,
     })))
     const {analysisMode, axis} = useAnalysisStore(useShallow(state => ({
         analysisMode: state.analysisMode, axis:state.axis
@@ -75,13 +72,7 @@ const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTe
             );
             return geo
         },[width, height])
-    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-          const newLatStep = latResolution/2;
-          const newLonStep = lonResolution/2;
-          const newLonBounds = [Math.max(lonExtent[0]-newLonStep, -180), Math.min(lonExtent[1]+newLonStep, 180)]
-          const newLatBounds = [Math.max(latExtent[0]-newLatStep, -90), Math.min(latExtent[1]+newLatStep, 90)]
-          return [newLonBounds, newLatBounds]
-        },[latExtent, lonExtent, lonResolution, latResolution])
+    const {lonBounds, latBounds} = useCoordBounds()
 
     const shaderMaterial = useMemo(()=>{
         const shader = new THREE.ShaderMaterial({

src/components/plots/FlatMap.tsx

@@ -9,6 +9,7 @@ import { useShallow } from 'zustand/shallow'
 import { ThreeEvent } from '@react-three/fiber';
 import { coarsenFlatArray, GetCurrentArray, GetTimeSeries, parseUVCoords, deg2rad } from '@/utils/HelperFuncs';
 import { evaluate_cmap } from 'js-colormaps-es';
+import { useCoordBounds } from '@/hooks/useCoordBounds';
 
 interface InfoSettersProps{
   setLoc: React.Dispatch<React.SetStateAction<number[]>>;
@@ -40,7 +41,6 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
 
     const {cScale, cOffset, animProg, nanTransparency, nanColor, 
       zSlice, ySlice, xSlice, selectTS, coarsen, maskTexture, maskValue,
-      lonResolution, latResolution, lonExtent, latExtent,
       getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state => ({
       cOffset: state.cOffset, cScale: state.cScale,
       resetAnim: state.resetAnim, animate: state.animate,
@@ -49,10 +49,6 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
       ySlice: state.ySlice, xSlice: state.xSlice,
       selectTS: state.selectTS, coarsen: state.coarsen,
       maskTexture:state.maskTexture, maskValue:state.maskValue,
-      lonExtent: state.lonExtent,
-      latExtent: state.latExtent,
-      lonResolution: state.lonResolution,
-      latResolution: state.latResolution,
       getColorIdx: state.getColorIdx,
       incrementColorIdx: state.incrementColorIdx
     })))
@@ -100,13 +96,7 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
     const sampleArray = useMemo(()=> analysisMode ? analysisArray : GetCurrentArray(),[analysisMode, analysisArray, textures])
     const analysisDims = useMemo(()=>dimArrays.length > 2 ? dimSlices.filter((_e,idx)=> idx != axis) : dimSlices,[dimSlices,axis])
 
-    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-      const newLatStep = latResolution/2;
-      const newLonStep = lonResolution/2;
-      const newLonBounds = [Math.max(lonExtent[0]-newLonStep, -180), Math.min(lonExtent[1]+newLonStep, 180)]
-      const newLatBounds = [Math.max(latExtent[0]-newLatStep, -90), Math.min(latExtent[1]+newLatStep, 90)]
-      return [newLonBounds, newLatBounds]
-    },[latExtent, lonExtent, lonResolution, latResolution])
+    const {lonBounds, latBounds} = useCoordBounds()
 
     useEffect(()=>{
         geometry.dispose()

src/components/plots/PointCloud.tsx

@@ -5,6 +5,7 @@ import { useAnalysisStore, useGlobalStore, usePlotStore } from '@/GlobalStates';
 import { useShallow } from 'zustand/shallow';
 import { parseUVCoords, getUnitAxis, GetTimeSeries, GetCurrentArray, deg2rad } from '@/utils/HelperFuncs';
 import { evaluate_cmap } from 'js-colormaps-es';
+import { useCoordBounds } from '@/hooks/useCoordBounds';
 
 interface PCProps {
   texture: THREE.Data3DTexture[] | null,
@@ -147,7 +148,7 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
     })))
     const {scalePoints, scaleIntensity, pointSize, cScale, cOffset, valueRange, animProg, 
       selectTS, timeScale, xRange, yRange, zRange, fillValue,
-      maskTexture, maskValue, lonExtent, latExtent, lonResolution, latResolution, } = usePlotStore(useShallow(state => ({
+      maskTexture, maskValue } = usePlotStore(useShallow(state => ({
       scalePoints: state.scalePoints,
       scaleIntensity: state.scaleIntensity,
       pointSize: state.pointSize,
@@ -163,10 +164,6 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
       fillValue:state.fillValue,
       maskTexture: state.maskTexture,
       maskValue: state.maskValue,
-      lonExtent: state.lonExtent,
-      latExtent: state.latExtent,
-      lonResolution: state.lonResolution,
-      latResolution: state.latResolution,
     })))
 
     const [pointsObj, setPointsObj] = useState<Record<string, number>>({})
@@ -206,13 +203,8 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
       geom.setDrawRange(0, arrayLength); // This is used to tell it how many data points are needed since we aren't giving it positions.
       return geom;
     }, [data]);
-    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-            const newLatStep = latResolution/2;
-            const newLonStep = lonResolution/2;
-            const newLonBounds = [Math.max(lonExtent[0]-newLonStep, -180), Math.min(lonExtent[1]+newLonStep, 180)]
-            const newLatBounds = [Math.max(latExtent[0]-newLatStep, -90), Math.min(latExtent[1]+newLatStep, 90)]
-            return [newLonBounds, newLatBounds]
-        },[latExtent, lonExtent, lonResolution, latResolution])
+    const {lonBounds, latBounds} = useCoordBounds() 
+
     const shaderMaterial = useMemo(()=> (new THREE.ShaderMaterial({
       glslVersion: THREE.GLSL3,
       uniforms: {

src/components/plots/Sphere.tsx

@@ -5,6 +5,7 @@ import { useShallow } from 'zustand/shallow'
 import { sphereVertex, sphereVertexFlat, sphereFrag, flatSphereFrag } from '../textures/shaders'
 import { parseUVCoords, GetTimeSeries, GetCurrentArray, deg2rad } from '@/utils/HelperFuncs';
 import { evaluate_cmap } from 'js-colormaps-es';
+import { useCoordBounds } from '@/hooks/useCoordBounds'
 
 
 function XYZtoUV(xyz : THREE.Vector3, width: number, height : number){
@@ -51,19 +52,14 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
         textureArrayDepths: state.textureArrayDepths
     })))
 
-    const {animate, animProg, cOffset, cScale, selectTS, lonExtent, latExtent, 
-      lonResolution, latResolution, nanColor, nanTransparency, sphereDisplacement, sphereResolution,
+    const {animate, animProg, cOffset, cScale, selectTS, nanColor, nanTransparency, sphereDisplacement, sphereResolution,
       zSlice, ySlice, xSlice, fillValue, borderTexture, maskTexture, maskValue,
       getColorIdx, incrementColorIdx} = usePlotStore(useShallow(state=> ({
         animate: state.animate,
         animProg: state.animProg,
         cOffset: state.cOffset,
         cScale: state.cScale,
         selectTS: state.selectTS,
-        lonExtent: state.lonExtent,
-        latExtent: state.latExtent,
-        lonResolution: state.lonResolution,
-        latResolution: state.latResolution,
         nanColor: state.nanColor,
         nanTransparency: state.nanTransparency,
         sphereDisplacement: state.displacement,
@@ -109,13 +105,7 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
       setBoundsObj(prev=>{ return {...newBoundObj, ...prev}})
     }
 
-    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-      const newLatStep = latResolution/2;
-      const newLonStep = lonResolution/2;
-      const newLonBounds = [lonExtent[0]-newLonStep, lonExtent[1]+newLonStep]
-      const newLatBounds = [latExtent[0]-newLatStep, latExtent[1]+newLatStep]
-      return [newLonBounds, newLatBounds]
-    },[latExtent, lonExtent, lonResolution, latResolution])
+    const {lonBounds, latBounds} = useCoordBounds()
 
     const geometry = useMemo(() => new THREE.IcosahedronGeometry(1, sphereResolution), [sphereResolution]);
     const shaderMaterial = useMemo(()=>{

src/components/plots/SphereBlocks.tsx

@@ -5,6 +5,7 @@ import * as THREE from 'three'
 import { sphereBlocksVert, sphereBlocksVertFlat, sphereBlocksFrag } from '../textures/shaders'
 import { invalidate } from '@react-three/fiber'
 import { deg2rad } from '@/utils/HelperFuncs'
+import { useCoordBounds } from '@/hooks/useCoordBounds'
 const SphereBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTexture[] | null}) => {
     const {colormap, isFlat, valueScales, 
             dataShape, textureArrayDepths} = useGlobalStore(useShallow(state=>({
@@ -14,16 +15,11 @@ const SphereBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Data
         dataShape: state.dataShape,
         textureArrayDepths: state.textureArrayDepths, 
     })))
-    const { animProg, cOffset, cScale, lonExtent, latExtent, lonResolution, latResolution, 
-        nanColor, nanTransparency, sphereDisplacement, offsetNegatives, fillValue, maskTexture, maskValue} = usePlotStore(useShallow(state=> ({
+    const { animProg, cOffset, cScale, nanColor, nanTransparency, sphereDisplacement, offsetNegatives, fillValue, maskTexture, maskValue} = usePlotStore(useShallow(state=> ({
         animate: state.animate,
         animProg: state.animProg,
         cOffset: state.cOffset,
         cScale: state.cScale,
-        lonExtent: state.lonExtent,
-        latExtent: state.latExtent,
-        lonResolution: state.lonResolution,
-        latResolution: state.latResolution,
         nanColor: state.nanColor,
         nanTransparency: state.nanTransparency,
         sphereDisplacement: state.displacement,
@@ -73,13 +69,8 @@ const SphereBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Data
         return geo
     },[dataShape])
 
-    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
-        const newLatStep = latResolution/2;
-        const newLonStep = lonResolution/2;
-        const newLonBounds = [Math.max(lonExtent[0]-newLonStep, -180), Math.min(lonExtent[1]+newLonStep, 180)]
-        const newLatBounds = [Math.max(latExtent[0]-newLatStep, -90), Math.min(latExtent[1]+newLatStep, 90)]
-        return [newLonBounds, newLatBounds]
-    },[latExtent, lonExtent, lonResolution, latResolution])
+    const {lonBounds, latBounds} = useCoordBounds()
+
     const shaderMaterial = useMemo(()=>{
         const shader = new THREE.ShaderMaterial({
             glslVersion: THREE.GLSL3,

src/hooks/useCoordBounds.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { usePlotStore } from "@/GlobalStates";
+import { useShallow } from "zustand/shallow";
+
+
+export const useCoordBounds = ()=>{
+    const {lonExtent, latExtent, lonResolution, latResolution} = usePlotStore(useShallow(state=>({
+        lonExtent: state.lonExtent,
+        latExtent: state.latExtent,
+        lonResolution: state.lonResolution,
+        latResolution: state.latResolution,
+    })))
+    const [lonBounds, latBounds] = useMemo(()=>{ //The bounds for the shader. It takes the middle point of the furthest coordinate and adds the distance to edge of pixel
+        const newLatStep = latResolution/2;
+        const newLonStep = lonResolution/2;
+        const newLonBounds = [Math.max(lonExtent[0]-newLonStep, -180), Math.min(lonExtent[1]+newLonStep, 180)]
+        const newLatBounds = [Math.max(latExtent[0]-newLatStep, -90), Math.min(latExtent[1]+newLatStep, 90)]
+        return [newLonBounds, newLatBounds]
+    },[latExtent, lonExtent, lonResolution, latResolution])
+    return {
+        lonBounds,latBounds
+    }
+}