Merge pull request #33 from bertyhell/fix/measurement-text-orientation-17

Fix: Correct measurement text orientation

Author: bertyhell

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();
     }
@@ -467,9 +468,9 @@ export class ScreenCanvasDrawController implements DrawController {
         this.context.beginPath();
         screenPoints.forEach((screenPoint, index) => {
             if (index === 0) {
-                this.context.moveTo(screenPoint.x, screenPoint.y);
+                this.context.moveTo(screenPoint.x, this.canvasSize.y - screenPoint.y);
             } else {
-                this.context.lineTo(screenPoint.x, screenPoint.y);
+                this.context.lineTo(screenPoint.x, this.canvasSize.y - screenPoint.y);
             }
         });
         this.context.closePath();

src/entities/MeasurementEntity.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Point, Vector } from '@flatten-js/core';
+import { MeasurementEntity } from './MeasurementEntity';
+import { MEASUREMENT_FONT_SIZE } from '../App.consts'; // For default options
+
+// Mock dependencies from '../state.ts'
+vi.mock('../state.ts', () => ({
+    getActiveLayerId: () => 'mockLayerId',
+    isEntityHighlighted: () => false,
+    isEntitySelected: () => false,
+}));
+
+describe('MeasurementEntity text orientation in draw() method', () => {
+    // Mock DrawController
+    const mockDrawController = {
+        drawText: vi.fn(),
+        setLineStyles: vi.fn(),
+        setFillStyles: vi.fn(),
+        drawLine: vi.fn(),
+        fillPolygon: vi.fn(),
+        getScreenScale: vi.fn().mockReturnValue(1), // Used by drawArrowHead
+        // Add any other methods called by MeasurementEntity.draw or its private helpers like drawArrowHead
+        // For now, these cover the primary interactions.
+    };
+
+    beforeEach(() => {
+        // Reset mocks before each test
+        mockDrawController.drawText.mockClear();
+        mockDrawController.setLineStyles.mockClear();
+        mockDrawController.setFillStyles.mockClear();
+        mockDrawController.drawLine.mockClear();
+        mockDrawController.fillPolygon.mockClear();
+        mockDrawController.getScreenScale.mockClear().mockReturnValue(1);
+    });
+
+    const runTest = (startPoint: Point, endPoint: Point, offsetPoint: Point, expectedDirectionX: number, expectedDirectionY: number) => {
+        const measurement = new MeasurementEntity('mockLayerId', startPoint, endPoint, offsetPoint);
+        measurement.lineColor = '#fff'; // Set a default color
+        measurement.draw(mockDrawController as any);
+
+        expect(mockDrawController.drawText).toHaveBeenCalledOnce();
+        const callArgs = mockDrawController.drawText.mock.calls[0];
+        const textOptions = callArgs[2]; // Third argument to drawText is the options object
+        const actualDirection = textOptions.textDirection as Vector;
+
+        // Use a small epsilon for comparing floating point vector components
+        const epsilon = 1e-5;
+        expect(actualDirection.x).toBeCloseTo(expectedDirectionX, epsilon);
+        expect(actualDirection.y).toBeCloseTo(expectedDirectionY, epsilon);
+        expect(textOptions.textAlign).toBe('center');
+        expect(textOptions.fontSize).toBe(MEASUREMENT_FONT_SIZE);
+        expect(textOptions.textColor).toBe('#fff');
+    };
+
+    it('should orient text left-to-right for horizontal line, text below', () => {
+        // normalUnit = (0, -1) => originalTextDirection = (-1, 0) => finalTextDirection = (1, 0)
+        runTest(new Point(0, 0), new Point(10, 0), new Point(5, -5), 1, 0);
+    });
+
+    it('should orient text left-to-right for horizontal line, text above', () => {
+        // normalUnit = (0, 1) => originalTextDirection = (1, 0) => finalTextDirection = (1, 0)
+        runTest(new Point(0, 0), new Point(10, 0), new Point(5, 5), 1, 0);
+    });
+
+    it('should orient text bottom-to-top for vertical line, text right', () => {
+        // normalUnit = (1, 0) => originalTextDirection = (0, -1) => finalTextDirection = (0, -1)
+        runTest(new Point(0, 0), new Point(0, 10), new Point(5, 5), 0, -1);
+    });
+
+    it('should orient text bottom-to-top for vertical line, text left (flips from top-to-bottom)', () => {
+        // normalUnit = (-1, 0) => originalTextDirection = (0, 1) => finalTextDirection = (0, -1)
+        runTest(new Point(0, 0), new Point(0, 10), new Point(-5, 5), 0, -1);
+    });
+    
+    it('should orient text correctly for a 45 degree line, offset "below-right"', () => {
+        // Line from (0,0) to (10,10). Offset to (10,0) (perpendicularly "downwards")
+        // normalUnit is approx (0.707, -0.707)
+        // originalTextDirection = normalUnit.rotate90CW() = (-0.707, -0.707) (points towards Q3)
+        // Expected finalTextDirection should be (0.707, 0.707) (points towards Q1)
+        runTest(new Point(0,0), new Point(10,10), new Point(10,0), Math.sqrt(2)/2, Math.sqrt(2)/2);
+    });
+
+    it('should orient text correctly for a -45 degree line, offset "above-right"', () => {
+        // Line from (0,0) to (10,-10). Offset to (10,0) (perpendicularly "upwards")
+        // normalUnit is approx (0.707, 0.707)
+        // originalTextDirection = normalUnit.rotate90CW() = (0.707, -0.707) (points towards Q4)
+        // Expected finalTextDirection should be (0.707, -0.707)
+        runTest(new Point(0,0), new Point(10,-10), new Point(10,0), Math.sqrt(2)/2, -Math.sqrt(2)/2);
+    });
+
+    it('should not draw text if start and end points are the same', () => {
+        const measurement = new MeasurementEntity('mockLayerId', new Point(0,0), new Point(0,0), new Point(5,5));
+        measurement.draw(mockDrawController as any);
+        expect(mockDrawController.drawText).not.toHaveBeenCalled();
+    });
+});

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 {
@@ -200,9 +203,17 @@ export class MeasurementEntity implements Entity {
 		const distance = String(
 			round(pointDistance(this.startPoint, this.endPoint), MEASUREMENT_DECIMAL_PLACES)
 		);
+		const originalTextDirection = normalUnit.rotate90CW();
+		let finalTextDirection = originalTextDirection;
+		if (
+			originalTextDirection.x < -EPSILON ||
+			(Math.abs(originalTextDirection.x) < EPSILON && originalTextDirection.y > EPSILON)
+		) {
+			finalTextDirection = new Vector(-originalTextDirection.x, -originalTextDirection.y);
+		}
 		drawController.drawText(distance, midpointMeasurementLineOffset, {
 			textAlign: 'center',
-			textDirection: normalUnit.rotate90CW(),
+			textDirection: finalTextDirection,
 			fontSize: MEASUREMENT_FONT_SIZE,
 			textColor: this.lineColor,
 		});