Add tsdocs for everything and improve typings for readability

demo/apply-cors.sh

@@ -0,0 +1,2 @@
+#!/bin/sh
+gcloud storage buckets update gs://gcode-preview.firebasestorage.app --cors-file=cors.json

demo/cors.json

@@ -0,0 +1,8 @@
+[
+  {
+    "origin": ["*"],
+    "method": ["GET"],
+    "responseHeader": ["Content-Type"],
+    "maxAgeSeconds": 3600
+  }
+]

package.json

@@ -45,7 +45,7 @@
     "lint": "prettier --check . && eslint -c .eslintrc.js .",
     "lint:fix": "eslint -c .eslintrc.js . --fix",
     "prettier:fix": "prettier --plugin-search-dir . --write .",
-    "test": "vitest",
+    "test": "vitest run",
     "test:watch": "vitest --watch",
     "preversion": "npm run typeCheck && npm run test && npm run lint",
     "version:patch": "npm version patch",

src/build-volume.ts

@@ -3,20 +3,39 @@ import { AxesHelper, Group, Vector3 } from 'three';
 import { LineBox } from './helpers/line-box';
 import { type Disposable } from './helpers/three-utils';
 
+/**
+ * Represents the build volume of a 3D printer.
+ */
 export class BuildVolume {
+  /** Width of the build volume in mm */
   x: number;
+  /** Depth of the build volume in mm */
   y: number;
+  /** Height of the build volume in mm */
   z: number;
+  /** Color used for the grid */
   color: number;
+  /** List of disposable objects that need cleanup */
   private disposables: Disposable[] = [];
 
+  /**
+   * Creates a new BuildVolume instance
+   * @param x - Width in mm
+   * @param y - Depth in mm
+   * @param z - Height in mm
+   * @param color - Color for visualization (default: 0x888888)
+   */
   constructor(x: number, y: number, z: number, color: number = 0x888888) {
     this.x = x;
     this.y = y;
     this.z = z;
     this.color = color;
   }
 
+  /**
+   * Creates and positions the XYZ axes helper for the build volume
+   * @returns Configured AxesHelper instance
+   */
   createAxes(): AxesHelper {
     const axes = new AxesHelper(10);
 
@@ -32,18 +51,30 @@ export class BuildVolume {
     return axes;
   }
 
+  /**
+   * Creates a grid visualization for the build volume's base
+   * @returns Configured Grid instance
+   */
   createGrid(): Grid {
     const grid = new Grid(this.x, 10, this.y, 10, this.color);
     this.disposables.push(grid);
     return grid;
   }
 
+  /**
+   * Creates a wireframe box representing the build volume boundaries
+   * @returns Configured LineBox instance
+   */
   createLineBox(): LineBox {
     const lineBox = new LineBox(this.x, this.z, this.y, this.color);
     this.disposables.push(lineBox);
     return lineBox;
   }
 
+  /**
+   * Creates a group containing all visualization elements (box, grid, axes)
+   * @returns Group containing all build volume visualizations
+   */
   createGroup(): Group {
     const group = new Group();
     group.add(this.createLineBox());
@@ -53,6 +84,9 @@ export class BuildVolume {
     return group;
   }
 
+  /**
+   * Cleans up all disposable resources created by this build volume
+   */
   dispose(): void {
     this.disposables.forEach((disposable) => disposable.dispose());
   }

src/dev-gui.ts

@@ -1,5 +1,15 @@
 import { GUI } from 'lil-gui';
-
+import { WebGLPreview } from './webgl-preview';
+
+/**
+ * Configuration options for development mode GUI
+ * @property camera - Show camera controls (default: false)
+ * @property renderer - Show renderer stats (default: false)
+ * @property parser - Show parser/job stats (default: false)
+ * @property buildVolume - Show build volume controls (default: false)
+ * @property devHelpers - Show development helpers (default: false)
+ * @property statsContainer - Container element for stats display
+ */
 export type DevModeOptions = {
   camera?: boolean | false;
   renderer?: boolean | false;
@@ -9,13 +19,21 @@ export type DevModeOptions = {
   statsContainer?: HTMLElement | undefined;
 };
 
+/**
+ * Development GUI for debugging and monitoring the 3D preview
+ */
 class DevGUI {
   private gui: GUI;
-  private watchedObject;
+  private watchedObject: WebGLPreview;
   private options?: DevModeOptions | undefined;
   private openFolders: string[] = [];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(watchedObject: any, options?: DevModeOptions | undefined) {
+
+  /**
+   * Creates a new DevGUI instance
+   * @param watchedObject - The object to monitor and control
+   * @param options - Configuration options for the GUI
+   */
+  constructor(watchedObject: WebGLPreview, options?: DevModeOptions | undefined) {
     this.watchedObject = watchedObject;
     this.options = options;
 
@@ -25,10 +43,13 @@ class DevGUI {
     this.setup();
   }
 
+  /**
+   * Sets up the development GUI with all configured panels
+   */
   setup(): void {
     this.loadOpenFolders();
     if (!this.options || this.options.renderer) {
-      this.setupRedererFolder();
+      this.setupRendererFolder();
     }
 
     if (!this.options || this.options.camera) {
@@ -48,17 +69,26 @@ class DevGUI {
     }
   }
 
+  /**
+   * Resets the GUI by destroying and recreating it
+   */
   reset(): void {
     this.gui.destroy();
     this.gui = new GUI();
     this.gui.title('Dev info');
     this.setup();
   }
 
+  /**
+   * Loads the state of open folders from localStorage
+   */
   loadOpenFolders(): void {
     this.openFolders = JSON.parse(localStorage.getItem('dev-gui-open') || '{}').open || [];
   }
 
+  /**
+   * Saves the state of open folders to localStorage
+   */
   saveOpenFolders(): void {
     this.openFolders = this.gui
       .foldersRecursive()
@@ -72,7 +102,10 @@ class DevGUI {
     localStorage.setItem('dev-gui-open', JSON.stringify({ open: this.openFolders }));
   }
 
-  private setupRedererFolder(): void {
+  /**
+   * Sets up the renderer stats panel with memory and render call information
+   */
+  private setupRendererFolder(): void {
     const render = this.gui.addFolder('Render Info');
     if (!this.openFolders.includes('Render Info')) {
       render.close();
@@ -89,6 +122,9 @@ class DevGUI {
     render.add(this.watchedObject, '_lastRenderTime').listen();
   }
 
+  /**
+   * Sets up the camera controls panel with position and rotation controls
+   */
   private setupCameraFolder(): void {
     const camera = this.gui.addFolder('Camera');
     if (!this.openFolders.includes('Camera')) {
@@ -108,6 +144,9 @@ class DevGUI {
     cameraRotation.add(this.watchedObject.camera.rotation, 'z').listen();
   }
 
+  /**
+   * Sets up the parser/job stats panel with path and line count information
+   */
   private setupParserFolder(): void {
     const parser = this.gui.addFolder('Job');
     if (!this.openFolders.includes('Job')) {
@@ -123,6 +162,9 @@ class DevGUI {
     parser.add(this.watchedObject.parser.lines, 'length').name('lines.count').listen();
   }
 
+  /**
+   * Sets up the build volume controls panel with dimension controls
+   */
   private setupBuildVolumeFolder(): void {
     if (!this.watchedObject.buildVolume) {
       return;
@@ -160,6 +202,9 @@ class DevGUI {
       });
   }
 
+  /**
+   * Sets up the development helpers panel with wireframe and render controls
+   */
   private setupDevHelpers(): void {
     const devHelpers = this.gui.addFolder('Dev Helpers');
     if (!this.openFolders.includes('Dev Helpers')) {

src/extrusion-geometry.ts

@@ -1,16 +1,37 @@
 import { BufferGeometry, Float32BufferAttribute, Vector2, Vector3 } from 'three';
 
+/**
+ * A geometry class for extruding 3D paths into volumetric shapes
+ */
 class ExtrusionGeometry extends BufferGeometry {
+  /**
+   * Parameters used to create this geometry
+   */
   parameters: {
+    /** Array of points defining the path */
     points: Vector3[];
+    /** Width of the extruded shape */
     lineWidth: number;
+    /** Height of the extruded shape */
     lineHeight: number;
+    /** Number of segments around the circumference */
     radialSegments: number;
+    /** Whether the path is closed */
     closed: boolean;
   };
 
+  /**
+   * The geometry type
+   */
   readonly type: string;
 
+  /**
+   * Creates a new ExtrusionGeometry
+   * @param points - Array of points defining the path (default: single point at origin)
+   * @param lineWidth - Width of the extruded shape (default: 0.6)
+   * @param lineHeight - Height of the extruded shape (default: 0.2)
+   * @param radialSegments - Number of segments around the circumference (default: 8)
+   */
   constructor(
     points: Vector3[] = [new Vector3()],
     lineWidth: number = 0.6,
@@ -55,6 +76,9 @@ class ExtrusionGeometry extends BufferGeometry {
 
     // functions
 
+    /**
+     * Generates all buffer data (vertices, normals, UVs, and indices)
+     */
     function generateBufferData(): void {
       for (let i = 0; i < points.length; i++) {
         generateSegment(i);
@@ -77,6 +101,10 @@ class ExtrusionGeometry extends BufferGeometry {
       generateIndices();
     }
 
+    /**
+     * Generates vertices and normals for a segment of the path
+     * @param i - Index of the segment to generate
+     */
     function generateSegment(i: number): void {
       // First get the tangent to the corner between the two segments.
 
@@ -106,6 +134,9 @@ class ExtrusionGeometry extends BufferGeometry {
       }
     }
 
+    /**
+     * Generates face indices to connect the vertices
+     */
     function generateIndices(): void {
       for (let j = 1; j < points.length; j++) {
         for (let i = 1; i <= radialSegments; i++) {
@@ -122,6 +153,9 @@ class ExtrusionGeometry extends BufferGeometry {
       }
     }
 
+    /**
+     * Generates UV coordinates for texture mapping
+     */
     function generateUVs(): void {
       for (let i = 0; i < points.length; i++) {
         for (let j = 0; j <= radialSegments; j++) {
@@ -133,6 +167,11 @@ class ExtrusionGeometry extends BufferGeometry {
       }
     }
 
+    /**
+     * Computes the corner angles (position, normal, binormal) for a segment
+     * @param i - Index of the segment
+     * @returns Array containing position, normal and binormal vectors
+     */
     function computeCornerAngles(i: number): Array<Vector3> {
       const P = points[i];
       const tangent = new Vector3();