From f56eeeee2ca429256d8f53ec02aeda4b448f83df Mon Sep 17 00:00:00 2001
From: mina <mina.zarkesh@polizei.niedersachsen.de>
Date: Thu, 15 May 2025 11:58:10 +0200
Subject: [PATCH] update kleine Anpassungen

---
 .../view/[vorgang]/[tatort]/+page.svelte      | 309 ++++++++----------
 1 file changed, 140 insertions(+), 169 deletions(-)

diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index e254045..dbee528 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -1,58 +1,43 @@
-<style>
-	model-viewer {
-		height: 100%;
-		width: 100%;
-	}
-
-	.vertical-slider {
-    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
-    transform: rotate(270deg); /* Slider um 270° drehen */
-    height: 200px;
-  }
-
-  .model{
-		height: calc(100%-84px)
-	}
-
-</style>
-
 <script>
-	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/ui/Button.svelte';
-	import autoprefixer from 'autoprefixer';
-	
+
 	export let data;
 
 	onMount(() => {
 		import('@google/model-viewer');
-		console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
 	});
 
 	let progress = 0;
 	let hideProgressScreen = false;
 
-	let cameraOrbit = '0deg 0deg 0%';
-	let cameraTarget ="0m 0m 0m";
-	let fieldOfView = '0deg';
+	let cameraOrbit = '0deg 0deg 100%';
+	let cameraTarget = '0m 0m 0m';
+	let fieldOfView = '10deg';
 
 	let cameraAzimuth = 0;
 	let cameraPolar = 0;
-	let cameraZoom = 0;
-	let xRotation=0;
-	let yRotation=0;
-	let zRotation=0;
+
+	let frontView = cameraAzimuth === 0 && cameraPolar === 0 ? true : false;
+
+	let topView = cameraAzimuth === 0 && cameraPolar === 90 ? true : false;
+
+	let cameraZoom = 100;
+	let xRotation = 0;
+	let yRotation = 0;
+	let zRotation = 0;
 
 	/**
 	 * @type {any}
 	 */
 	let modelViewer;
 
-
 	$: style = `width: ${progress}%`;
 
-	// @ts-ignore
+	/**
+	 * @param {any} detail
+	 */
 	function onProgress({ detail }) {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
@@ -62,176 +47,141 @@
 		} else hideProgressScreen = false;
 	}
 
-
 	function onResetView() {
-		  
+		console.log(
+			'show cameraOrbit:',
+			modelViewer.getCameraOrbit(),
+			modelViewer.cameraOrbit,
+			modelViewer.getDimensions()
+		);
+		console.log(
+			'Camera-orbit: ',
+			modelViewer.getAttribute('camera-orbit'),
+			'camera-target: ',
+			modelViewer.getAttribute('camera-target'),
+			'object-rotation: ',
+			modelViewer.getAttribute('rotation')
+		);
 
-		console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
-		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
-
-		  modelViewer.cameraOrbit = cameraOrbit;
-		  modelViewer.cameraTarget = cameraTarget;
-		  xRotation = yRotation = zRotation = 0;
-		cameraOrbit = '0deg 0deg 0m';
-	 cameraTarget ="0m 0m 0m";
-	fieldOfView = '0deg';
-
-	 cameraAzimuth = 0;
-	 cameraPolar = 0;
-	 cameraZoom = 0;
-	
+		cameraAzimuth = 0;
+		cameraPolar = 0;
+		cameraZoom = 100;
 
+		modelViewer.cameraOrbit = cameraOrbit;
+		modelViewer.cameraTarget = cameraTarget;
+		modelViewer.fieldOfView = fieldOfView;
+		cameraAzimuth = 0;
+		cameraPolar = 0;
+		cameraZoom = 100;
+		fieldOfView = '10deg';
 	}
 
 	/**
-	 * @param {string} newOrbit
+	 * @param {number} azimuth
+	 * @param {number} polar
+	 * @param {number} zoom
 	 */
-	function updateCameraOrbit(newOrbit) {
-		 
-	//    cameraTarget ="0m 0m 0m"
-		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
-		  modelViewer.cameraOrbit = newOrbit;
-		  modelViewer.cameraTarget = cameraTarget;
-
+	function updateCameraOrbit(azimuth, polar, zoom) {
+		cameraAzimuth = azimuth;
+		cameraPolar = polar;
+		cameraZoom = zoom;
 	}
-
-	function slideCameraOrbit(){
-		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
-	}
-
-	function slideRotation(){
-		modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
-	}
-
-	const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
-    event.preventDefault(); // Blockiert das Mausrad-Ereignis
-  };
-
 </script>
 
-<!-- 		<Button
-			on:click={toggleShowOptions}
-			{disabled}
-			type="button"
-			variant="white"
-			fullWidth
-			align="left"
-			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-		> -->
-
-<div class="h-full model w-full bg-neutral-200  p-4">
-
-			<!-- field-of-view="auto" -->
-		<!--
-				camera-controls
-		model-rotation="0rad 0rad 0rad"
-		
-		camera-target="0m 0m 10m"
-		
-		field-of-view="auto"
-		max-field-of-view="10deg"
-		min-field-of-view="0.1deg"-->
+<div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
 	<model-viewer
 		src={data.url}
 		bind:this={modelViewer}
-	touch-action="pan-y"
-	field-of-view="auto"
-	camera-controls
-	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
+		touch-action="pan-y"
+		field-of-view={fieldOfView}
+		min-field-of-view="1deg"
+		max-field-of-view="10deg"
+		camera-controls
+		orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
 		camera-target="0m 0m 0m"
-		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
+		camera-orbit={`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`}
 		on:progress={onProgress}
 	>
-<!--Buttons zum Steuern-->
-	<div class="bg-redx-500 p-4 flex z-10">
-		<div class="flex flex-col">
+		<!--Buttons zum Steuern-->
+		<div
+			class=" p-4 flex z-10 absolute bottom-0"
+			class:opacity-0={!hideProgressScreen}
+			class:hidden={!hideProgressScreen}
+		>
+			<div class="flex flex-col bg-white/50">
 				<!--3 Buttons-->
-				<div>
+				<div class="p-2">
 					<Button
-					on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
-					type="button"
-					variant="white"
-					
-					align="left"
-					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+						on:click={() => {
+							updateCameraOrbit(0, 0, cameraZoom);
+						}}
+						type="button"
+						variant="white"
+						align="left"
+						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left "
 					>
-					Draufsicht
+						Draufsicht
 					</Button>
 					<Button
-					on:click={()=>{onResetView()}}
-					type="button"
-					variant="white"
-					
-					align="left"
-					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+						on:click={() => {
+							onResetView();
+						}}
+						type="button"
+						variant="white"
+						align="left"
+						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 					>
-					Werte zurücksetzen
+						Werte zurücksetzen
 					</Button>
-		
+
 					<Button
-					
-					on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
-		
-					type="button"
-					variant="white"
-					
-					align="left"
-					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+						on:click={() => {
+							updateCameraOrbit(0, 90, cameraZoom);
+						}}
+						type="button"
+						variant="white"
+						align="left"
+						class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 					>
-					Frontansicht
+						Frontansicht
 					</Button>
-				
 				</div>
-				
+
 				<!--Horizontal-->
-				<div>
-							<!-- svelte-ignore a11y_label_has_associated_control -->
-							<label>Horizontal drehen (Azimut):</label>
-							<input 
-							type="range" 
-							min="0" max="360" 
-							bind:value={cameraAzimuth} 
-							 />
-							 <!-- on:input={slideCameraOrbit} -->
+				<div class="p-2">
+					<label>Horizontal drehen (Azimut):</label>
+					<input type="range" min="0" max="360" bind:value={cameraAzimuth} />
+				</div>
+				<!--Vertikal-->
+				<div class="p-2">
+					<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+					<input id="polarSlider" type="range" min="0" max="90" bind:value={cameraPolar} />
 				</div>
-						<!--Vertikal-->
-			<div class="">
-				<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
-				<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
-				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-	</div>
 				<!--Zoom/Distanz-->
-				<div>
-					<label for="cZoom">Zoomen</label>
-					<input id="cZoom" type="range"
-					min="0"
-					max="120"
-			
-					 bind:value={cameraZoom} 
-					 on:input={slideCameraOrbit}/>
+				<div class="p-2">
+					<label for="cZoom">Abstand (zoom):</label>
+					<input id="cZoom" type="range" min="0" max="100" bind:value={cameraZoom} />
 				</div>
-		</div>
-			<!--Rotationen-->
-			<div class="flex  mt-2 ml-2">
-				
-			<div class="">
-				<label class="" for="polarSlider">Rotation X:</label>
-				<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
-				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-	</div>
-	<div class="">
-		<label class="" for="polarSlider">Rotation Y:</label>
-		<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
-		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-	</div>
-	<div class="">
-		<label class="" for="polarSlider">Rotation Z:</label>
-		<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
-		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-	</div>
 			</div>
-			
+			<!--Rotationen-->
+			<div class="flex flex-col ml-2 p-4 bg-white/50">
+				Modell rotieren lassen:
+				<br />
+				Modell auf dem Kopf? -> y auf 270°
+				<div class="p-2">
+					<label class="" for="polarSlider">Rotation X:</label>
+					<input id="polarSlider" type="range" min="0" max="360" bind:value={xRotation} />
 				</div>
+				<div class="p-2">
+					<label class="" for="polarSlider">Rotation Y:</label>
+					<input id="polarSlider" type="range" min="0" max="360" bind:value={yRotation} />
+				</div>
+				<div class="p-2">
+					<label class="" for="polarSlider">Rotation Z:</label>
+					<input id="polarSlider" type="range" min="0" max="360" bind:value={zRotation} />
+				</div>
+			</div>
+		</div>
 		<!--Loading-->
 		<div
 			slot="progress-bar"
@@ -242,9 +192,30 @@
 			<Panel class="w-72 bg-gray-50 flex items-center flex-col"
 				><p class="mb-5">Loading {progress}%</p>
 				<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
-					<div class="h-1 bg-blue-500" {style} ></div>
+					<div class="h-1 bg-blue-500" {style}></div>
 				</div></Panel
 			>
 		</div>
 	</model-viewer>
 </div>
+
+<style>
+	model-viewer {
+		height: 100%;
+		width: 100%;
+	}
+
+	.vertical-slider {
+		writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
+		transform: rotate(270deg); /* Slider um 270° drehen */
+		height: 200px;
+	}
+
+	.model {
+		height: calc(100%-84px);
+	}
+
+	.active-border {
+		border: 2px blue solid;
+	}
+</style>