Implement zoom-to-cursor. Use VAOs. Cleanup/formatting.

README.md

@@ -94,8 +94,7 @@ that the advice on rounding up to the nearest 25 µinches for calculated values
 * Add a thickness for the table slab (add manufacturer's label).
 * Allow for "importing" a number set (maybe from a CSV file or a textarea with a simple format). 
 * Fix the way that some measuring lines are cut off on the 3D representation (this happens because the vertices are located at the first foot location).
-* Make zooming relative to where the mouse cursor is (keep the mouse centered on zoom).
-* Metric support.
+* (More) Metric support.
 * Show the locations of the carriage/sled as tick marks on the lines
 * The 'heat map' is pretty, but with everything set to zero it is showing a lot of distortion - look into this.
 * The UI takes up a lot of space, the data entry would be better as tabbed tables selectable by clicking on the corresponding line, and segments should be shown and similarly clickable to highlight the entry field.

delaunay.js

@@ -1,5 +1,5 @@
 import { Vector3 } from "./math.js"
-  
+
 // Delaunay Triangulation from: https://github.com/msavela/delaunay/
 class Vertex {
   constructor(x, y, z) {
@@ -12,7 +12,7 @@ class Vertex {
     return this.x === vertex.x && this.y == vertex.y && this.z == vertex.z
   }
 }
-  
+
 class Edge {
   constructor(v0, v1) {
     this.v0 = v0
@@ -24,7 +24,7 @@ class Edge {
       (this.v0.equals(edge.v1) && this.v1.equals(edge.v0))
   }
 }
-  
+
 class Triangle {
   constructor(v0, v1, v2) {
     this.v0 = v0
@@ -45,7 +45,7 @@ class Triangle {
 
     const E = A * (this.v0.x + this.v1.x) + B * (this.v0.y + this.v1.y)
     const F = C * (this.v0.x + this.v2.x) + D * (this.v0.y + this.v2.y)
- 
+
     const G = 2.0 * (A * (this.v2.y - this.v1.y) - B * (this.v2.x - this.v1.x))
 
     if (G == 0) {
@@ -79,7 +79,8 @@ class Triangle {
   }
 
   surfaceNormal() {
-    return this.edgeVec1.cross(this.edgeVec0)
+    let normalVector = Vector3.create()
+    return Vector3.cross(normalVector, this.edgeVec1, this.edgeVec0)
   }
 }
 

index.html

@@ -68,6 +68,9 @@
       min-height: 37.5rem;
       display: none;
     }
+    #controls {
+      display: none;
+    }
     .resizeHandle {
       position: absolute;
       width: 0.8125rem;
@@ -104,12 +107,12 @@
       margin-right: 1rem;
     }
     .gradesContainer {
-      display: flex; /* Use flexbox for side-by-side layout */
+      display: flex;
       margin-top: 0.3125rem;
     }
     .gradesColumn {
-      flex: 1; /* Equal width for both columns */
-      margin: 0 1.25rem; /* Add some spacing between columns */
+      flex: 1;
+      margin: 0 1.25rem;
     }
     .overallFlatnessLabel {
       display: inline-block; 
@@ -230,9 +233,27 @@
 <input type="checkbox" id="lightingOn" name="lightingOn" checked/>
 <label for="lightingOn">Lighting On</label><br/><br/>
 <div>FPS: <span id="fps"></span></div>
-<div>Avg FPS: <span id="avg"></span></div>
+<div>Avg FPS: <span id="avg"></span></div><br/>
+<div id="controls"><b>Controls:</b>
+  <br/>Rotate table: Hold left mouse button and move mouse (Also WASD keys).
+  <br/>Move table: Arrow keys.
+  <br/>Zoom on table: Mouse wheel with cursor on table.
+  <br/>Zoom (centered): Ctrl + Mouse wheel.
+  <br/>Reset View: Press "R" key.
+</div>
 <br/>
-<svg id="tableGraphic" preserveAspectRatio="xMaxYMid meet" style="visibility: hidden; max-width: 31.25rem">
+<div id="canvasContainer">
+  <canvas id="glcanvas" width="800" height="600"></canvas>
+  <!--
+  This is preliminary work on being able to resize the canvas from all corners but for now seems like more work than it's worth. We do keep the bottom-right resize
+  handle currently because it makes the resize graphic more visible to the user.
+  <div class="resizeHandle topLeft"></div>
+  <div class="resizeHandle topRight"></div>
+  <div class="resizeHandle bottomLeft"></div>
+  -->
+  <div class="resizeHandle bottomRight"></div>
+</div>
+<svg id="tableGraphic" preserveAspectRatio="xMaxYMid meet" style="visibility: hidden; max-width: 31.25rem; margin-top: 0.250rem;">
   <rect id="outsideRect" x="0" y="0" fill="white" stroke="black" stroke-width="0.01em"/>
   <rect id="insideRect" fill="white" stroke="black" stroke-width="0.01em"/>
   <g id="topStartingDiagonalLineGroup" stroke="var(--l1-color)" fill="var(--l1-color)" stroke-width="0.018em">
@@ -287,17 +308,6 @@
     </text>
   </g>
 </svg>
-<div id="canvasContainer">
-  <canvas id="glcanvas" width="800" height="600"></canvas>
-  <!--
-  This is preliminary work on being able to resize the canvas from all corners but for now seems like more work than it's worth. We do keep the bottom-right resize
-  handle currently because it makes the resize graphic more visible to the user.
-  <div class="resizeHandle topLeft"></div>
-  <div class="resizeHandle topRight"></div>
-  <div class="resizeHandle bottomLeft"></div>
-  -->
-  <div class="resizeHandle bottomRight"></div>
-</div>
 <div style="display: flex; flex-direction: row-reverse; align-items: center; justify-content: center;">
   <div style="flex: 10;">
     <table id="topStartingDiagonalTable" style="visibility: hidden; border: 0.1875rem solid var(--l1-color);">