Merge pull request #30 from bertyhell/rounded-line-endings

Add rounded line endings to lines and arcs

Author: bertyhell

src/drawControllers/screenCanvas.drawController.ts

@@ -238,6 +238,18 @@ export class ScreenCanvasDrawController implements DrawController {
         this.context.moveTo(screenStartPoint.x, this.canvasSize.y - screenStartPoint.y);
         this.context.lineTo(screenEndPoint.x, this.canvasSize.y - screenEndPoint.y);
         this.context.stroke();
+
+        const lineWidth = this.context.lineWidth;
+        const style = this.context.strokeStyle as string;
+        this._drawRoundedEndpoint(screenStartPoint, lineWidth, style);
+        this._drawRoundedEndpoint(screenEndPoint, lineWidth, style);
+    }
+
+    private _drawRoundedEndpoint(screenPoint: Point, lineWidth: number, style: string): void {
+        this.context.fillStyle = style;
+        this.context.beginPath();
+        this.context.arc(screenPoint.x, this.canvasSize.y - screenPoint.y, lineWidth / 2, 0, 2 * Math.PI);
+        this.context.fill();
     }
 
     /**
@@ -283,6 +295,23 @@ export class ScreenCanvasDrawController implements DrawController {
             counterClockWise,
         );
         this.context.stroke();
+
+        const lineWidth = this.context.lineWidth;
+        const style = this.context.strokeStyle as string;
+
+        // Calculate arc endpoints
+        const startScreenX = screenCenterPoint.x + screenRadius * Math.cos(startAngle);
+        // Y is inverted in canvas, but also for the arc angles, so we subtract from canvasSize.y and then add sin
+        const startScreenY = (this.canvasSize.y - screenCenterPoint.y) + screenRadius * Math.sin(startAngle); 
+        const endScreenX = screenCenterPoint.x + screenRadius * Math.cos(endAngle);
+        const endScreenY = (this.canvasSize.y - screenCenterPoint.y) + screenRadius * Math.sin(endAngle);
+
+        // Convert back to Point objects, note that _drawRoundedEndpoint expects y to be from top of canvas
+        const arcStartPoint = new Point(startScreenX, this.canvasSize.y - startScreenY);
+        const arcEndPoint = new Point(endScreenX, this.canvasSize.y - endScreenY);
+        
+        this._drawRoundedEndpoint(arcStartPoint, lineWidth, style);
+        this._drawRoundedEndpoint(arcEndPoint, lineWidth, style);
     }
 
     /**

src/drawControllers/svg.drawController.ts

@@ -159,7 +159,7 @@ export class SvgDrawController implements DrawController {
 	public drawLine(startPoint: Point, endPoint: Point): void {
 		const [canvasStartPoint, canvasEndPoint] = this.worldsToTargets([startPoint, endPoint]);
 		this.svgStrings.push(
-			`<line x1="${canvasStartPoint.x}" y1="${canvasStartPoint.y}" x2="${canvasEndPoint.x}" y2="${canvasEndPoint.y}" stroke="${this.lineColor}" stroke-width="${this.lineWidth}" stroke-dasharray="${this.lineDash.join(',')}" />`
+			`<line x1="${canvasStartPoint.x}" y1="${canvasStartPoint.y}" x2="${canvasEndPoint.x}" y2="${canvasEndPoint.y}" stroke="${this.lineColor}" stroke-width="${this.lineWidth}" stroke-dasharray="${this.lineDash.join(',')}" stroke-linecap="round" />`
 		);
 	}
 
@@ -190,12 +190,12 @@ export class SvgDrawController implements DrawController {
 		const largeArcFlag = Math.abs(sweep) > Math.PI ? '1' : '0';
 		const sweepFlag = counterClockwise ? '0' : '1'; // SVG: 0 = CCW, 1 = CW
 
-		const attributes = `fill="none" stroke="${this.lineColor}" stroke-width="${this.lineWidth}" stroke-dasharray="${this.lineDash.join(',')}"`;
+		const attributes = `fill="none" stroke="${this.lineColor}" stroke-width="${this.lineWidth}" stroke-dasharray="${this.lineDash.join(',')}" stroke-linecap="round"`;
 		let svgPath: string;
 		if (isLengthEqual(sweep, 2 * Math.PI)) {
 			svgPath = `<circle cx="${canvasCenterPoint.x}" cy="${canvasCenterPoint.y}" r="${canvasRadius}" ${attributes} />`;
 		} else {
-			svgPath = `<path d="M${startPoint.x},${startPoint.y} A${canvasRadius},${canvasRadius} 0 ${largeArcFlag},${sweepFlag} ${endPoint.x},${endPoint.y}" ${attributes}  />`;
+			svgPath = `<path d="M${startPoint.x},${startPoint.y} A${canvasRadius},${canvasRadius} 0 ${largeArcFlag},${sweepFlag} ${endPoint.x},${endPoint.y}" ${attributes} />`;
 		}
 
 		// Push the SVG path data string to the svgStrings array

src/helpers/import-export-handlers/import-entities-from-json.ts

@@ -5,9 +5,9 @@ import {type Entity, EntityName, type JsonEntity} from '../../entities/Entity';
 import {LineEntity, type LineJsonData} from '../../entities/LineEntity';
 import {PointEntity, type PointJsonData} from '../../entities/PointEntity';
 import {RectangleEntity, type RectangleJsonData} from '../../entities/RectangleEntity';
-import {setActiveLayerId, setEntities, setLayers} from '../../state.ts';
-import {getNewLayer} from '../get-new-layer.ts';
-import type {JsonDrawingFileDeserialized, JsonDrawingFileSerialized,} from './export-entities-to-json.ts';
+import {setActiveLayerId, setEntities, setLayers} from '../../state';
+import type {JsonDrawingFileDeserialized, JsonDrawingFileSerialized} from './export-entities-to-json';
+import {getNewLayer} from "../get-new-layer.ts";
 
 /**
  * Open a file selection dialog to select *.json files