From e96d57531279066a55b3f3e676f0588bb7b287c4 Mon Sep 17 00:00:00 2001
From: Thomas Fuhrmann <thomas.fuhrmann@geosphere.at>
Date: Thu, 20 Mar 2025 11:44:50 +0100
Subject: [PATCH] Add compass

---
 app/components/Form.tsx        | 178 ++++++++++++++++-----------------
 app/page.tsx                   |  12 +--
 app/three/utils/build-scene.ts |  13 ++-
 3 files changed, 101 insertions(+), 102 deletions(-)

diff --git a/app/components/Form.tsx b/app/components/Form.tsx
index 2a89a9b..217e1ff 100644
--- a/app/components/Form.tsx
+++ b/app/components/Form.tsx
@@ -83,13 +83,11 @@ const Accordion = forwardRef<AccordionRef, AccordionProps>(
 
     return (
       <div>
-        <h2 id="accordion-collapse-heading-1">
+        <h2 id="accordion-collapse-heading">
           <button
             type="button"
             className={className}
-            data-accordion-target="#accordion-collapse-body-1"
             aria-expanded={expanded ? "true" : "false"}
-            aria-controls="accordion-collapse-body-1"
             onClick={handleClick}
           >
             <span>{title}</span>
@@ -114,9 +112,9 @@ const Accordion = forwardRef<AccordionRef, AccordionProps>(
           </button>
         </h2>
         <div
-          id="accordion-collapse-body-1"
+          id="accordion-collapse-body"
           ref={accordionBodyRef}
-          aria-labelledby="accordion-collapse-heading-1"
+          aria-labelledby="accordion-collapse-heading"
           className={expanded ? "" : "hidden"}
         >
           <div className="p-5 border border-gray-200 dark:border-gray-400 dark:bg-gray-700">
@@ -210,96 +208,94 @@ export function Form() {
   }
 
   return (
-    <div className="w-full max-h-full flex flex-col gap-2 dark:bg-gray-700">
-      <div className="w-full h-full flex flex-col gap-3 p-2">
-        <div className="w-full flex justify-end">
-          <button
-            onClick={handleExport}
-            className="text-white bg-red-400 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2  dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 hover:cursor-pointer"
-          >
-            Export as .obj
-          </button>
-        </div>
-        <div className="border border-gray-200 dark:border-gray-400 rounded grid grid-cols-2 gap-y-2 p-2">
-          <Toggle title="Slicing Box" onChange={handleChange} />
-          <Toggle title="Virtual Profile" onChange={handleDrilling} />
-          <Toggle title="Coordinate Grid" onChange={handleChangeCG} />
-          <Toggle title="Wireframe" onChange={handleChangeWireframe} />
-          <Toggle
-            title="Topography (OSM)"
-            onChange={handleChangeTopography}
-            defaultChecked
-          />
-        </div>
-        <div className="px-2 pt-2 border border-gray-200 dark:border-gray-400 rounded">
-          <RangeSlider></RangeSlider>
-        </div>
+    <div className="w-full max-h-full min-h-0 flex flex-col gap-2 dark:bg-gray-700">
+      <div className="w-full flex justify-end">
+        <button
+          onClick={handleExport}
+          className="text-white bg-red-400 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 hover:cursor-pointer"
+        >
+          Export as .obj
+        </button>
+      </div>
+      <div className="border border-gray-200 dark:border-gray-400 rounded grid grid-cols-2 gap-y-2 p-2">
+        <Toggle title="Slicing Box" onChange={handleChange} />
+        <Toggle title="Virtual Profile" onChange={handleDrilling} />
+        <Toggle title="Coordinate Grid" onChange={handleChangeCG} />
+        <Toggle title="Wireframe" onChange={handleChangeWireframe} />
+        <Toggle
+          title="Topography (OSM)"
+          onChange={handleChangeTopography}
+          defaultChecked
+        />
+      </div>
+      <div className="px-2 pt-2 border border-gray-200 dark:border-gray-400 rounded">
+        <RangeSlider></RangeSlider>
+      </div>
 
-        <div className="overflow-y-auto">
-          <Accordion
-            title="Layers"
-            position={Position.Start}
-            open={true}
-            ref={accordionRef0}
-          >
-            {
-              <div className="flex flex-col gap-2">
-                {sceneView?.model.children.map((child) => {
-                  const key = `toggle-visibility-${child.name}`;
-                  const color = `#${(
-                    (child as Mesh).material as MeshStandardMaterial
-                  ).color.getHexString()}`;
-                  const visible = (child as Mesh).visible;
+      <div className="overflow-y-auto">
+        <Accordion
+          title="Layers"
+          position={Position.Start}
+          open={true}
+          ref={accordionRef0}
+        >
+          {
+            <div className="flex flex-col gap-2">
+              {sceneView?.model.children.map((child) => {
+                const key = `toggle-visibility-${child.name}`;
+                const color = `#${(
+                  (child as Mesh).material as MeshStandardMaterial
+                ).color.getHexString()}`;
+                const visible = (child as Mesh).visible;
 
-                  return (
-                    <div
-                      key={key}
-                      className="flex items-center justify-start gap-2.5 border-b border-gray-200 dark:border-gray-400 py-1 dark:text-gray-400"
+                return (
+                  <div
+                    key={key}
+                    className="flex items-center justify-start gap-2.5 border-b border-gray-200 dark:border-gray-400 py-1 dark:text-gray-400"
+                  >
+                    <span
+                      className="inline-block w-5 h-5 flex-none rounded"
+                      style={{
+                        backgroundColor: color,
+                      }}
+                    ></span>
+                    <input
+                      id={key}
+                      type="checkbox"
+                      onChange={() => handleCheckboxChange(child.name)}
+                      className="hover:cursor-pointer"
+                      defaultChecked={visible ? true : false}
+                    />
+                    <label
+                      htmlFor={key}
+                      className="font-light text-gray-500 dark:text-gray-400"
                     >
-                      <span
-                        className="inline-block w-5 h-5 flex-none rounded"
-                        style={{
-                          backgroundColor: color,
-                        }}
-                      ></span>
-                      <input
-                        id={key}
-                        type="checkbox"
-                        onChange={() => handleCheckboxChange(child.name)}
-                        className="hover:cursor-pointer"
-                        defaultChecked={visible ? true : false}
-                      />
-                      <label
-                        htmlFor={key}
-                        className="font-light text-gray-500 dark:text-gray-400"
-                      >
-                        {child.name}
-                      </label>
-                    </div>
-                  );
-                })}
-              </div>
-            }
-          </Accordion>
-          <Accordion
-            title="Virtual Profile"
-            position={Position.Center}
-            open={false}
-            ref={accordionRef1}
-          >
-            {emptyProfile ? (
-              <div className="font-light text-gray-500 dark:text-gray-400 text-sm">
-                Virtual profile does not intersect the model.
-              </div>
-            ) : null}
-            <div ref={svgContainerRef} className="dark:bg-gray-400">
-              <div className="font-light text-gray-500 dark:text-gray-400 dark:bg-gray-700 text-sm">
-                Please enable the Virtual Profile toggle and select a profile
-                position!
-              </div>
+                      {child.name}
+                    </label>
+                  </div>
+                );
+              })}
             </div>
-          </Accordion>
-        </div>
+          }
+        </Accordion>
+        <Accordion
+          title="Virtual Profile"
+          position={Position.Center}
+          open={false}
+          ref={accordionRef1}
+        >
+          {emptyProfile ? (
+            <div className="font-light text-gray-500 dark:text-gray-400 text-sm">
+              Virtual profile does not intersect the model.
+            </div>
+          ) : null}
+          <div ref={svgContainerRef} className="dark:bg-gray-400">
+            <div className="font-light text-gray-500 dark:text-gray-400 dark:bg-gray-700 text-sm">
+              Please enable the Virtual Profile toggle and select a profile
+              position!
+            </div>
+          </div>
+        </Accordion>
       </div>
     </div>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 85895fb..6e89581 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,9 +10,9 @@ export default function Home() {
   const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
 
   return (
-    <div className="w-screen h-screen">
-      <main className="h-screen">
-        <SceneViewProvider>
+    <main className="h-screen">
+      <SceneViewProvider>
+        <div className="flex flex-col h-screen sm:flex-row">
           <div className="sm:hidden p-4 bg-white dark:bg-gray-700 shadow-md flex justify-between items-center">
             <span className="text-lg font-semibold text-gray-700 dark:text-gray-400">
               3D-Viewer
@@ -45,8 +45,8 @@ export default function Home() {
               <Form />
             </div>
           </div>
-        </SceneViewProvider>
-      </main>
-    </div>
+        </div>
+      </SceneViewProvider>
+    </main>
   );
 }
diff --git a/app/three/utils/build-scene.ts b/app/three/utils/build-scene.ts
index 505ad5e..e4872fc 100644
--- a/app/three/utils/build-scene.ts
+++ b/app/three/utils/build-scene.ts
@@ -93,12 +93,12 @@ export function buildScene(container: HTMLElement, extent: Extent) {
 
   // Create the AxesHelper (small size)
   axesHelper = new AxesHelper(0.1);
-  axesHelper.position.set(-0.9, -0.8, 0);
+  axesHelper.position.set(-0.85, -0.85, 0);
 
   const xLabel = createTextSprite("X", "red");
   const yLabel = createTextSprite("Y", "green");
   const zLabel = createTextSprite("Z", "blue");
-  xLabel.position.set(0.125, 0, 0);
+  xLabel.position.set(0.125, -0.01, 0);
   yLabel.position.set(0, 0.125, 0);
   zLabel.position.set(0, 0, 0.125);
 
@@ -120,16 +120,19 @@ function onWindowResize(container: HTMLElement) {
 }
 
 function animate() {
-  // axesHelper.quaternion.copy(camera.quaternion);
+  // Set rotation of axes according to camera rotation
   let rot = new Euler();
   rot.x = -camera.rotation.x;
   rot.y = camera.rotation.y;
-  rot.z = camera.rotation.z;
+  rot.z = -camera.rotation.z;
   axesHelper.setRotationFromEuler(rot);
+
   renderer.autoClear = true;
   renderer.render(scene, camera);
+
+  // Set autoclear to fasle in order to overlay UI elements
   renderer.autoClear = false;
-  renderer.render(uiScene, uiCamera); // Render UI scene
+  renderer.render(uiScene, uiCamera);
 
   // required if controls.enableDamping or controls.autoRotate are set to true
   controls.update();