Fix: Improve measurement text rendering and use global EPSILON

This commit addresses your feedback on measurement text rendering:

1.  Text Offset:
    - I modified `screenCanvas.drawController.ts` to set `textBaseline = 'middle'`
      when drawing text. This ensures text is vertically centered on its anchor point.
    - I adjusted `MeasurementEntity.ts` to calculate the text label's offset
      by adding half the text height (`MEASUREMENT_FONT_SIZE / 2`) to the
      `MEASUREMENT_LABEL_OFFSET`. This provides a consistent gap between the
      measurement line and the bounding box of the text, preventing overlap
      when text orientation is flipped.

2.  Global EPSILON:
    - I updated `MeasurementEntity.ts` to use the global `EPSILON` constant
      from `src/App.consts.ts` for floating-point comparisons in the
      text orientation logic, replacing a locally defined epsilon.

These changes ensure correct text appearance (no overlap) and maintainability (use of global constant). The original fix for text orientation (ensuring readability from bottom/right) remains in place.

This addresses part of the feedback for issue #17.

Author: google-labs-jules[bot]

src/drawControllers/screenCanvas.drawController.ts

@@ -370,6 +370,7 @@ export class ScreenCanvasDrawController implements DrawController {
         this.context.font = `${opts.fontSize}px ${opts.fontFamily}`;
         this.context.textAlign = opts.textAlign;
         this.context.fillStyle = opts.textColor;
+        this.context.textBaseline = 'middle';
         this.context.fillText(label, 0, 0);
         this.context.restore();
     }

src/entities/MeasurementEntity.ts

@@ -10,6 +10,7 @@ import {
 	MEASUREMENT_LABEL_OFFSET,
 	MEASUREMENT_ORIGIN_MARGIN,
 	TO_RADIANS,
+	EPSILON,
 } from '../App.consts';
 import type {Shape, SnapPoint} from '../App.types';
 import type {DrawController} from '../drawControllers/DrawController';
@@ -96,10 +97,12 @@ export class MeasurementEntity implements Entity {
 			(offsetStartPoint.x + offsetEndPoint.x) / 2,
 			(offsetStartPoint.y + offsetEndPoint.y) / 2
 		);
+		const textHeight = MEASUREMENT_FONT_SIZE;
+		const totalOffset = MEASUREMENT_LABEL_OFFSET + textHeight / 2;
 		const midpointMeasurementLineOffset = midpointMeasurementLine
 			.clone()
 			.translate(
-				vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(MEASUREMENT_LABEL_OFFSET)
+				vectorPerpendicularFromLineTowardsOffsetPointUnit.multiply(totalOffset)
 			);
 
 		return {
@@ -201,11 +204,10 @@ export class MeasurementEntity implements Entity {
 			round(pointDistance(this.startPoint, this.endPoint), MEASUREMENT_DECIMAL_PLACES)
 		);
 		const originalTextDirection = normalUnit.rotate90CW();
-		const epsilon = 1e-6;
 		let finalTextDirection = originalTextDirection;
 		if (
-			originalTextDirection.x < -epsilon ||
-			(Math.abs(originalTextDirection.x) < epsilon && originalTextDirection.y > epsilon)
+			originalTextDirection.x < -EPSILON ||
+			(Math.abs(originalTextDirection.x) < EPSILON && originalTextDirection.y > EPSILON)
 		) {
 			finalTextDirection = new Vector(-originalTextDirection.x, -originalTextDirection.y);
 		}