feat: add comments to all state variables

src/state.ts

@@ -5,20 +5,72 @@ import { screenToWorld } from './helpers/world-screen-conversion.ts';
 import { HoverPoint, SnapPoint } from './App.types.ts';
 
 // state variables
+/**
+ * Width and height of the canvas
+ */
 let canvasSize = new Point(0, 0);
+
+/**
+ * Canvas element
+ */
 let canvas: HTMLCanvasElement | null = null;
+
+/**
+ * Canvas 2d context used for drawing on the canvas
+ */
 let context: CanvasRenderingContext2D | null = null;
+
+/**
+ * Location of the mouse on the screen
+ */
 let screenMouseLocation = new Point(0, 0);
-let canvasRef: HTMLCanvasElement | null = document.querySelector('canvas');
+
+/**
+ * Active tool like line tool or rectangle tool
+ */
 let activeTool = Tool.Line;
+
+/**
+ * List of entities like lines, circles, rectangles, etc to be drawn on the canvas
+ */
 let entities: Entity[] = [];
+
+/**
+ * Entity that is currently being drawn, but isn't complete yet
+ */
 let activeEntity: Entity | null = null;
+
+/**
+ * Whether to draw the cursor or not
+ */
 let shouldDrawCursor = false;
+
+/**
+ * Helper entities like angle guides
+ */
 let helperEntities: Entity[] = [];
+
+/**
+ * Entities that are drawn for debugging the application purposes
+ */
 let debugEntities: Entity[] = [];
+
+/**
+ * Angle step for angle guide. Can be changes by the user using the angle step buttons
+ */
 let angleStep = 45;
+
+/**
+ * Offset by which the screen is panned. Starts at 0,0 which coincides with the world origin
+ * But the user can move it by dragging the mouse while holding the middle mouse button
+ */
 let screenOffset = new Point(0, 0);
+
+/**
+ * Scale by which the screen is zoomed in or out. Starts at 1 when it coincides with the world scale
+ */
 let screenScale = 1;
+
 /**
  * Location where the user started dragging their mouse
  * Used for panning the screen
@@ -39,6 +91,7 @@ let snapPointOnAngleGuide: SnapPoint | null = null;
  * Snap points that are hovered for a certain amount of time
  */
 let hoveredSnapPoints: HoverPoint[] = [];
+
 /**
  * Timestamp of the last draw call
  */
@@ -49,7 +102,6 @@ export const getCanvasSize = () => canvasSize;
 export const getCanvas = () => canvas;
 export const getContext = () => context;
 export const getScreenMouseLocation = () => screenMouseLocation;
-export const getCanvasRef = (): HTMLCanvasElement | null => canvasRef;
 export const getActiveTool = () => activeTool;
 export const getEntities = (): Entity[] => entities;
 export const getActiveEntity = () => activeEntity;
@@ -77,8 +129,6 @@ export const setContext = (newContext: CanvasRenderingContext2D) =>
   (context = newContext);
 export const setScreenMouseLocation = (newLocation: Point) =>
   (screenMouseLocation = newLocation);
-export const setCanvasRef = (newCanvasRef: HTMLCanvasElement) =>
-  (canvasRef = newCanvasRef);
 export const setActiveTool = (newTool: Tool) => (activeTool = newTool);
 export const setEntities = (newEntities: Entity[]) => (entities = newEntities);
 export const setActiveEntity = (newEntity: Entity | null) =>