Rotate FlatBlocks

Author: TheJeran

src/components/plots/AxisLines.tsx

@@ -343,11 +343,10 @@ const FlatAxis = () =>{
     isFlat: state.isFlat
   })))
 
-  const {plotType,  zSlice, ySlice, xSlice} = usePlotStore(useShallow(state=>({
-    plotType: state.plotType,
-    zSlice: state.zSlice,
-    ySlice: state.ySlice,
-    xSlice: state.xSlice
+  const {plotType,  zSlice, ySlice, xSlice, rotateFlat} = usePlotStore(useShallow(state=>({
+    plotType: state.plotType, zSlice: state.zSlice,
+    ySlice: state.ySlice, xSlice: state.xSlice,
+    rotateFlat:state.rotateFlat
   })))
 
   const {hideAxis, hideAxisControls} = useImageExportStore(useShallow( state => ({
@@ -442,7 +441,10 @@ const FlatAxis = () =>{
   const yTitleOffset = useMemo(() => (axisNames[heightIdx].length * FLAT_AXIS_CONSTANTS.TITLE_FONT_SIZE / 2 + 0.1), [axisNames, heightIdx]);
 
   return (
-    <group visible={plotType == 'flat' && !hideAxis}>
+    <group 
+      visible={plotType == 'flat' && !hideAxis} 
+      rotation={[rotateFlat ? -Math.PI/2 : 0, 0, 0]}
+    >
       {/* X Group */}
       <group position={[0, -(swap ? 1 :  shapeRatio)-tickLength/2, 0]} rotation={[ Math.PI/2, 0, 0]}> 
         <primitive key={'xLine'} object={xLine} />

src/components/plots/FlatBlocks.tsx

@@ -14,16 +14,11 @@ const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTe
         dataShape: state.dataShape,
         textureArrayDepths: state.textureArrayDepths
     })))
-    const { animProg, cOffset, cScale, nanColor, nanTransparency, displacement, offsetNegatives} = 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
+    const { animProg, cOffset, cScale, nanColor, nanTransparency, displacement, offsetNegatives, rotateFlat} = 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
     })))
 
     const width = dataShape[dataShape.length-1]
@@ -94,6 +89,7 @@ const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTe
 
     <instancedMesh 
         scale={[1, flipY ? -1 : 1, 1]}
+        rotation={[rotateFlat ? -Math.PI/2 : 0, 0, 0]}
         args={[geometry, shaderMaterial, (width * height)]}
         frustumCulled={false}
     />

src/components/ui/MainPanel/AdjustPlot.tsx

@@ -325,11 +325,11 @@ const PointOptions = () =>{
 }
 
 const FlatOptions = () =>{
-  const {displacement, displaceSurface, offsetNegatives,
+  const {displacement, displaceSurface, offsetNegatives, rotateFlat,
     setDisplacement, setDisplaceSurface, setOffsetNegatives,
     setResetCamera} = usePlotStore(useShallow(state=> ({
       displacement: state.displacement, displaceSurface: state.displaceSurface,
-      offsetNegatives: state.offsetNegatives, setDisplacement: state.setDisplacement,
+      offsetNegatives: state.offsetNegatives, rotateFlat:state.rotateFlat, setDisplacement: state.setDisplacement,
       setDisplaceSurface: state.setDisplaceSurface, setOffsetNegatives: state.setOffsetNegatives,
       setResetCamera: state.setResetCamera
   })))
@@ -338,7 +338,7 @@ const FlatOptions = () =>{
    <div className='grid gap-2 mb-2'>
     <div 
       className='relative w-full text-center h-10 bg-primary rounded-full cursor-pointer mb-2 flex items-center justify-between px-4'
-      onClick={() => {if (!displaceSurface){setResetCamera(!usePlotStore.getState().resetCamera)}; setDisplaceSurface(!displaceSurface); }}  
+      onClick={() => {if (!displaceSurface){setResetCamera(!usePlotStore.getState().resetCamera)}; setDisplaceSurface(!displaceSurface); usePlotStore.setState({rotateFlat: false}) }}  
     >
       <span className={`z-10 font-semibold transition-colors ${displaceSurface ? 'text-primary' : 'text-secondary'}`}>
         Flat
@@ -354,6 +354,7 @@ const FlatOptions = () =>{
     </div>
     <Hider show={!displaceSurface}>
       <div className='grid gap-2'>
+
         <b>Displacement</b>
         <UISlider
           min={0}
@@ -364,8 +365,11 @@ const FlatOptions = () =>{
           onValueChange={(vals:number[]) => (setDisplacement(vals[0]))}
         />
         <div className='grid grid-cols-[auto_20%] items-center gap-2 text-left'>
-          <label htmlFor="offset-switch">Offset Negatives</label>
+          <label htmlFor="offset-switch"><b>Offset Negatives</b></label>
           <Switch id='offset-switch' checked={offsetNegatives} onCheckedChange={e=>setOffsetNegatives(e)} />
+
+          <label htmlFor="rotate-switch"><b>Rotate</b></label>
+          <Switch id='rotate-switch' checked={rotateFlat} onCheckedChange={e=>usePlotStore.setState({rotateFlat: e})} />
         </div>
       </div>
     </Hider>

src/utils/GlobalStates.ts

@@ -207,6 +207,7 @@ type PlotState ={
   xSlice: [number  , number | null],
   interpPixels: boolean;
   useOrtho: boolean;
+  rotateFlat: boolean;
 
   setQuality: (quality: number) => void;
   setTimeScale: (timeScale : number) =>void;
@@ -314,7 +315,7 @@ export const usePlotStore = create<PlotState>((set, get) => ({
   xSlice: [0, null],
   interpPixels: false,
   useOrtho: false,
-
+  rotateFlat: false,
 
   setVTransferRange: (vTransferRange) => set({ vTransferRange }),
   setVTransferScale: (vTransferScale) => set({ vTransferScale }),