Clean up size and position computations for graph inpector modal

Author: JonAlexandra

src/components/graphs/RecordingGraph.svelte

@@ -9,9 +9,7 @@
     LinearScale,
     PointElement,
   } from 'chart.js';
-  import { graphInspectorState } from '../3d-inspector/View3DUtility';
   import RecordingInspector from '../3d-inspector/RecordingInspector.svelte';
-  import { element } from 'svelte/internal';
 
   export let data: { x: number[]; y: number[]; z: number[] };
 
@@ -33,22 +31,17 @@
     }
   }
 
-  const lengthOfGraphsInPixels = 134;
-  const ratio = (1 / data.x.length) * lengthOfGraphsInPixels;
-  // let dataPointInFocusIndex = 0; // 10 to 144
-  // let inspectorActive = false;
-  // let inspectedDataPoint = writable({ x: 0, y: 0, z: 0 });
-  let componentElement: HTMLDivElement;
-  const inspectorMarginInPixels = 5;
+  let htmlElement: HTMLDivElement;
+  const inspectorMarginPx = 5;
 
 
   function recomputeModalParams(){
-    const rect = componentElement.getBoundingClientRect()
+    const rect = htmlElement.getBoundingClientRect()
     modalSize = generateSizeOfInspector(rect)
     modalPosition = generatePositionOfInspector(rect, modalSize)
   }
 
-    /**
+  /**
    * Positions in regards to size of modal following these rules:
    * - It prefers center-aligning with element in focus (The recording). Moves into view if circle
    * escapes the left or right side.
@@ -57,28 +50,19 @@
    */
    function generatePositionOfInspector(rect: DOMRect, size: number): {x: number, y: number} {
     const rectCenterX = (rect.left + rect.right) / 2;
-    let x = 0;
-    let y = 0;
-
-    // Calculate x value
-    if (rectCenterX < size / 2) {
-      // What the hell is this if structure
-    } else if (window.innerWidth - rectCenterX < size / 2)
-      x = window.innerWidth - size;
-    else x = rectCenterX - size / 2;
-
-    // Calculate y value
-    if (window.innerHeight - rect.bottom - 15 < size) {
-      y = rect.top - inspectorMarginInPixels - size;
-    } else {
-      y = rect.bottom + inspectorMarginInPixels;
-    }
+    let x = rectCenterX - size / 2;
+
+    x = Math.max(0, x)
+    x = Math.min(x, window.innerWidth - size)
+
+    const showAboveGraph = window.innerHeight - rect.bottom - 15 < size
+    const y = showAboveGraph ? rect.top - inspectorMarginPx - size : rect.bottom + inspectorMarginPx;
 
     return { x, y };
   }
 
   function generateSizeOfInspector(rect: DOMRect): number {
-    return (window.innerHeight - rect.height) / 2 - inspectorMarginInPixels;
+    return (window.innerHeight - rect.height) / 2 - inspectorMarginPx;
   }
 
   function getConfig(): ChartConfiguration<keyof ChartTypeRegistry, {x: number, y: number}[], string> {
@@ -163,7 +147,8 @@
             }
             verticalLineX = args.event.x ?? NaN
             if (args.event.native != null){
-              if (isNaN(hoverIndex)){
+              // only recompute modal params if modal is closed (i.e. this event opens the modal)
+              if (isNaN(hoverIndex)){ 
                 recomputeModalParams()
               }
               hoverIndex = chart.getElementsAtEventForMode(args.event.native, 'nearest', {}, true)[0].index
@@ -191,24 +176,6 @@
     };
   }
 
-  // function computeInspectorPosition
-
-  // function openInspector(): void {
-
-  // }
-
-  // function closeInspector() {
-
-  // }
-  // $ : {
-  //   graphInspectorState.update(s => {
-  //     s.isOpen = !isNaN(hoverIndex)
-  //     s.dataPoint = {x: data.x[hoverIndex], y: data.y[hoverIndex], z: data.z[hoverIndex]}
-  //     return s
-  //   })
-  // }
-
-
   let canvas: HTMLCanvasElement;
   onMount(() => {
     Chart.register([LinearScale, LineController, PointElement, LineElement]);
@@ -221,11 +188,10 @@
     }
   });
 
-
 </script>
 
 <div
-  bind:this={componentElement}
+  bind:this={htmlElement}
   class="h-full w-full relative"
 >
   <div class="z-1 h-full w-full absolute">