frontend: widgets: sonar360: Scale to fit widget

ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360.vue

@@ -1,14 +1,14 @@
 <template>
-  <div ref="containerRef" class="w-full h-full flex items-center justify-center bg-transparent p-4 overflow-hidden">
-    <div class="relative" :style="containerStyle">
+  <div ref="containerRef" class="w-full h-full flex items-center justify-center bg-transparent overflow-hidden">
+    <div class="relative shrink-0" :style="containerStyle">
 			<Sonar360Mask :angle="angle" :lineColor="lineColor" :lineWidth="lineWidth" :maxDistance="maxDistance"
 				:numMarkers="numMarkers" :showRadiusLines="showRadiusLines" :showMarkers="showMarkers"
 				:radiusLineColor="radiusLineColor" :markerColor="markerColor"
 				:markerBackgroundColor="markerBackgroundColor" :radiusLineWidth="radiusLineWidth"
 				:startAngle="startAngle" :endAngle="endAngle">
 			<Sonar360Shader :measurement="measurement" :numLines="400"
 				:color-palette="colorPalette" :get-color-from-palette="getColorFromPalette" :startAngle="startAngle"
-				:endAngle="endAngle" :yaw_angle="yaw_angle" :debug=false />
+				:endAngle="endAngle" :yaw_angle="yaw_angle" :max-radius="shaderMaxRadius" :debug=false />
 			</Sonar360Mask>
 		</div>
 
@@ -112,6 +112,11 @@ const props = defineProps({
 const containerRef = ref(null);
 const size = ref(300);
 
+// Mirror of `Sonar360Mask`'s `maxRadius` (50 - lineWidth/2) but expressed in
+// the shader's normalized 0..1 space, so the WebGL data ends exactly at the
+// outermost depth arc instead of overshooting past it by half a stroke width.
+const shaderMaxRadius = computed(() => (50 - props.lineWidth / 2) / 50);
+
 const sectorWidth = computed(() => {
   const diff = props.endAngle - props.startAngle;
   return diff >= 0 ? diff : diff + 360;
@@ -204,18 +209,36 @@ const updateSize = () => {
   const rect = containerRef.value.getBoundingClientRect();
   if (isHalfCircleView.value) {
     size.value = Math.min(rect.width, rect.height * 2);
-  } else {
-    size.value = Math.min(rect.width, rect.height);
+    return;
   }
+  // Scale the sector proportionally (no distortion, no clipping) until the
+  // tighter of the two axes hits the container edge. The looser axis may
+  // have a small empty band when the sector's bbox aspect doesn't match
+  // the viewport aspect — that gap is geometrically unavoidable without
+  // either stretching the arc or clipping the sector ends.
+  const bb = sectorBoundingBox.value;
+  const bbWidth = Math.max(bb.maxX - bb.minX, 0.0001);
+  const bbHeight = Math.max(bb.maxY - bb.minY, 0.0001);
+  size.value = Math.min(rect.width / bbWidth, rect.height / bbHeight);
 };
 
+let resizeObserver = null;
+
 onMounted(() => {
   updateSize();
   window.addEventListener('resize', updateSize);
+  if (containerRef.value && typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => updateSize());
+    resizeObserver.observe(containerRef.value);
+  }
 });
 
 onUnmounted(() => {
   window.removeEventListener('resize', updateSize);
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
 });
 
 watch([() => props.startAngle, () => props.endAngle], () => {

ping-viewer-next-frontend/src/components/widgets/sonar360/Ping360Loader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-full">
-    <div class="flex-1 mx-10 my-10 min-h-0">
+    <div class="flex-1 min-h-0" :class="showControls ? 'mx-10 my-10' : ''">
       <FloatingControls v-if="showControls" :is-recording="isRecording">
         <DataRecorder :device="device" :server-url="serverUrl"
           @recording-started="handleRecordingStarted" @recording-stopped="handleRecordingStopped" />

ping-viewer-next-frontend/src/components/widgets/sonar360/Sonar360Shader.vue

@@ -23,13 +23,18 @@ const props = withDefaults(
     startAngle: number;
     endAngle: number;
     yaw_angle: number;
+    // Maximum data radius in normalized 0..1 units. Should match
+    // `Sonar360Mask`'s `maxRadius / 50` so the rendered data ends exactly at
+    // the outermost depth arc instead of overshooting it by half a stroke.
+    maxRadius?: number;
   }>(),
   {
     lineLength: 1200,
     measurement: null,
     startAngle: 0,
     endAngle: 360,
     yaw_angle: 0,
+    maxRadius: 0.99,
   }
 );
 
@@ -61,6 +66,7 @@ const fsSource = `
   uniform sampler2D uSampler;
   uniform float uStartAngle;
   uniform float uEndAngle;
+  uniform float uMaxRadius;
 
   void main(void) {
     vec2 polar = vTextureCoord;
@@ -73,14 +79,14 @@ const fsSource = `
       ? (angleDegrees >= uStartAngle && angleDegrees <= uEndAngle)
       : (angleDegrees >= uStartAngle || angleDegrees <= uEndAngle);
 
-    if (radius > 1.0 || !inSector) {
+    if (radius > uMaxRadius || !inSector) {
       gl_FragColor = vec4(0.1, 0.1, 0.1, 0.0); // Transparent background
     } else {
       float texAngle = (angle + 3.14159) / (2.0 * 3.14159);
       if (texAngle > 1.0) {
         texAngle -= 1.0;
       }
-      gl_FragColor = texture2D(uSampler, vec2(radius, texAngle));
+      gl_FragColor = texture2D(uSampler, vec2(radius / uMaxRadius, texAngle));
     }
   }
 `;
@@ -260,6 +266,7 @@ const render = () => {
   gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
   gl.uniform1f(gl.getUniformLocation(shaderProgram, 'uStartAngle'), props.startAngle);
   gl.uniform1f(gl.getUniformLocation(shaderProgram, 'uEndAngle'), props.endAngle);
+  gl.uniform1f(gl.getUniformLocation(shaderProgram, 'uMaxRadius'), props.maxRadius);
 
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 };
@@ -399,7 +406,7 @@ watch(
   { deep: true }
 );
 
-watch([() => props.startAngle, () => props.endAngle], () => {
+watch([() => props.startAngle, () => props.endAngle, () => props.maxRadius], () => {
   render();
 });
 </script>