Add axis bars

src/GlobalStates/PlotStore.ts

@@ -62,6 +62,7 @@ type PlotState ={
   borderTexture: THREE.Texture | undefined;
   useBorderTexture: boolean;
   maskValue: number;
+  cameraPosition: THREE.Vector3;
 
   setQuality: (quality: number) => void;
   setTimeScale: (timeScale : number) =>void;
@@ -116,6 +117,7 @@ type PlotState ={
   setInterpPixels: (interpPixels: boolean) => void;
   setUseOrtho: (useOrtho: boolean) => void;
   setFillValue: (fillValue: number | undefined) => void;
+  setCameraPosition: (cameraPosition: THREE.Vector3) => void;
 }
 
 export const usePlotStore = create<PlotState>((set, get) => ({
@@ -180,6 +182,7 @@ export const usePlotStore = create<PlotState>((set, get) => ({
   useBorderTexture: false,
   maskValue: 0,
   borderWidth: 0.05,
+  cameraPosition: new THREE.Vector3(0, 0, 5),
 
   setVTransferRange: (vTransferRange) => set({ vTransferRange }),
   setVTransferScale: (vTransferScale) => set({ vTransferScale }),
@@ -235,5 +238,6 @@ export const usePlotStore = create<PlotState>((set, get) => ({
   setXSlice: (xSlice) => set({ xSlice }),
   setInterpPixels: (interpPixels) => set({ interpPixels }),
   setUseOrtho: (useOrtho) => set({ useOrtho }),
-  setFillValue: (fillValue) => set({ fillValue })
+  setFillValue: (fillValue) => set({ fillValue }),
+  setCameraPosition: (cameraPosition) => set({ cameraPosition }),
 }))

src/app/globals.css

@@ -85,6 +85,7 @@
   --play-background: rgba(200, 200, 200, 0.8);
   --notice-shadow: rgb(230, 230, 230);
   --warning-area: rgba(255, 205, 67, 0.616);
+  --axis-shadow: hsla(0, 0%, 0%, 0.5);
 }
 
 /* Dark Theme */
@@ -144,6 +145,7 @@
   --play-background: rgba(200, 200, 200, 0.8);
   --notice-shadow: rgb(70, 70, 70);
   --warning-area: rgba(255, 183, 49, 0.555);
+  --axis-shadow: rgb(255, 255, 255);
 }
 
 @layer utilities {

src/components/plots/Plot.tsx

@@ -26,10 +26,11 @@ const TransectNotice = () =>{
 }
 
 const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
-  const {resetCamera, useOrtho, displaceSurface} = usePlotStore(useShallow(state => ({
+  const {resetCamera, useOrtho, displaceSurface, cameraPosition} = usePlotStore(useShallow(state => ({
       resetCamera: state.resetCamera,
       useOrtho: state.useOrtho,
-      displaceSurface: state.displaceSurface
+      displaceSurface: state.displaceSurface,
+      cameraPosition:state.cameraPosition
     })))
   const {setCameraRef} = useImageExportStore(useShallow(state=>({setCameraRef:state.setCameraRef})))
   const orbitRef = useRef<OrbitControlsImpl | null>(null)
@@ -78,7 +79,6 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
       return () => cancelAnimationFrame(frameId);
     }
   },[resetCamera, isFlat])
-
   useEffect(()=>{
     if (hasMounted.current){
       let newCamera;
@@ -115,6 +115,25 @@ const Orbiter = ({isFlat} : {isFlat  : boolean}) =>{
   }
   },[useOrtho])
 
+  useEffect(()=>{
+    const cam = cameraRef.current
+    const controls = orbitRef.current
+    if (cam && controls){
+      const wasDamping = controls.enableDamping;
+      controls.enableDamping = false;
+      controls.update() //Need this extra update to clear the internal inertia buffer. Cant seem to access it in code. 
+      invalidate()
+      cam.position.copy(cameraPosition)
+      cam.lookAt(new THREE.Vector3(0, 0, 0))
+      //@ts-ignore the check means it is ortho
+      if (useOrtho) cam.updateProjectionMatrix()
+      else cam.updateMatrix()
+      controls.update()
+      controls.enableDamping = wasDamping
+      invalidate()
+    }
+  },[cameraPosition])
+
   return (
     <OrbitControls 
       ref={orbitRef} 

src/components/ui/Elements/AxisBars.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import "../css/AxisBars.css"
+import { usePlotStore } from '@/GlobalStates'
+import { useShallow } from 'zustand/shallow'
+import * as THREE from 'three'
+
+export const AxisBars = () => {
+    const {setCameraPosition} = usePlotStore(useShallow(state =>({
+        setCameraPosition: state.setCameraPosition
+    })))
+
+  return (
+    <div className="axis-panel">
+        <div className="origin"/>
+
+        <div className="axis axis-x"
+            onClick={()=>setCameraPosition(new THREE.Vector3(5, 0, 0))}
+            onDoubleClick={()=>setCameraPosition(new THREE.Vector3(-5, 0, 0))}
+        >
+            <div className="shaft"/>
+            <div className="arrow"/>
+            <span className="axis-label">X</span>
+        </div>
+
+        <div className="axis axis-y"
+            onClick={()=>setCameraPosition(new THREE.Vector3(0, 5, 0))}
+            onDoubleClick={()=>setCameraPosition(new THREE.Vector3(0, -5, 0))}
+        >
+            <div className="shaft"/>
+            <div className="arrow"/>
+            <span className="axis-label">Y</span>
+        </div>
+
+        <div className="axis axis-z"
+            onClick={()=>setCameraPosition(new THREE.Vector3(0, 0, 5))}
+            onDoubleClick={()=>setCameraPosition(new THREE.Vector3(0, 0, -5))}
+        >
+            <div className="shaft"/>
+            <div className="arrow"/>
+            <span className="axis-label">Z</span>
+        </div>
+</div>
+  )
+}
+
+

src/components/ui/Footer.tsx

@@ -2,9 +2,17 @@ import Image from "next/image";
 import { logoBGC_MPI, logoBGC, logoMPI } from "@/assets/index";
 
 import './css/Footer.css';
+import { useImageExportStore } from "@/GlobalStates";
+import { useShallow } from "zustand/shallow";
 
-const Footer = () => (
-  <div className="footer">
+const Footer = () => {
+  const {previewExtent} = useImageExportStore(useShallow(state => ({
+    previewExtent:state.previewExtent,
+  })))
+  return(
+  <div className="footer"
+    style={{visibility: previewExtent ? 'hidden' : 'visible'}}
+  >
     <div className="large-screen-logo">
       <a href="https://www.bgc-jena.mpg.de/en/bgi/mdi" target="_blank" rel="noreferrer">
         <Image src={logoBGC_MPI} alt="logoMPI" height={32}/>
@@ -26,6 +34,6 @@ const Footer = () => (
       </a>
     </div>
   </div>
-);
+)}
 
 export default Footer;

src/components/ui/NavBar/Navbar.tsx

@@ -10,7 +10,7 @@ import { useRef, useState } from "react";
 import { MdFlipCameraIos } from "react-icons/md";
 import { RiCloseLargeLine, RiMenu2Line } from "react-icons/ri";
 import { useShallow } from "zustand/shallow";
-import { Button } from "@/components/ui/button";
+import { Button, AxisBars } from "@/components/ui";
 import {
 	Tooltip,
 	TooltipContent,
@@ -72,6 +72,7 @@ const Navbar = React.memo(function Navbar() {
 				<div className="navbar-left">
 					{plotOn && (
 						<>
+							<AxisBars />
 							<Tooltip delayDuration={500}>
 								<TooltipTrigger asChild>
 									<Button

src/components/ui/css/AxisBars.css

@@ -0,0 +1,68 @@
+ .axis-panel{
+    width: 90px;
+    height: 75px;
+    position: relative;
+  }
+
+ .origin{
+    width: 8px;
+    height: 8px;
+    background: #cdd6f4;
+    border-radius: 50%;
+    position: absolute;
+    left: 50%;
+    top: 60%;
+    transform: translate(-50%, -50%);
+    z-index: 5;
+    box-shadow: 0 0 6px #cdd6f4;
+}
+
+.axis{
+    position: absolute;
+    left: 50%;
+    top: 60%;
+    transform-origin: left center;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.axis:hover {
+    filter: drop-shadow(0 0 5px var(--axis-shadow)) opacity(1);
+}
+
+.arrow{
+    width: 30px; 
+    height: 11px;
+    clip-path: polygon(0% 40%, 80% 40%, 80% 0%, 100% 50%, 80% 100%, 80% 60%, 0% 60%);
+    flex-shrink: 0;
+    transition: filter 0.2s ease;
+}
+
+.axis-label{
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 0.05em;
+    margin-left: 4px;
+    flex-shrink: 0;
+    user-select: none;
+    transition: text-shadow 0.2s ease, color 0.2s ease;
+}
+
+.axis-x{
+    transform: translateY(-50%) rotate(30deg);
+}
+.axis-x .arrow{ background: #f38ba8; }
+.axis-x .axis-label{ color: #f38ba8; transform: rotate(-30deg);}
+
+.axis-y {
+    transform: translateY(-50%) rotate(-90deg);
+}
+.axis-y .arrow{ background: #a6e3a1; }
+.axis-y .axis-label{ color: #a6e3a1; transform: rotate(90deg); }
+
+.axis-z {
+    transform: translateY(-50%) rotate(150deg);
+}
+.axis-z .arrow{ background: #89b4fa; opacity: 0.78; }
+.axis-z .axis-label{ color: #89b4fa; opacity: 0.78; transform: rotate(-150deg); }

src/components/ui/index.ts

@@ -31,6 +31,7 @@ export { ShaderEditor } from "./ShaderEditor";
 export { Input } from "./input";
 export { Switcher } from "./Widgets/Switcher";
 export {KeyFrames} from "./KeyFrames";
+export {AxisBars} from "./Elements/AxisBars";
 export {
   Navbar,
   Footer,