diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro index f09335c3..d082cf88 100644 --- a/src/pages/faq/erstellung-energieausweise/index.astro +++ b/src/pages/faq/erstellung-energieausweise/index.astro @@ -81,11 +81,10 @@ import Layout from "#layouts/layoutCAD.astro"; const canvas = document.getElementById('cadCanvas'); const ctx = canvas.getContext('2d'); const lineLog = document.getElementById('line-log'); - const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter const gridSize = 10; // Size of each grid cell in pixels let capturedLines = []; - let lastEndPoint = null; // Tracks the end point of the last line let firstStartPoint = null; // Tracks the start point of the first line + let lastEndPoint = null; // Tracks the end point of the last line // Snap a coordinate to the nearest grid point function snapToGrid(value) { @@ -113,13 +112,13 @@ import Layout from "#layouts/layoutCAD.astro"; ctx.stroke(); } - // Clear the canvas and reset logs + // Clear the canvas and reset everything function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); capturedLines = []; - lastEndPoint = null; firstStartPoint = null; - drawGrid(); // Redraw the grid after clearing + lastEndPoint = null; + drawGrid(); updateLineLog(); } @@ -127,52 +126,51 @@ import Layout from "#layouts/layoutCAD.astro"; function updateLineLog() { lineLog.innerHTML = capturedLines .map((line, index) => { - const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY); - return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m
  • `; + const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY); + return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px
  • `; }) .join(''); } - // Calculate the length of a line in meters - function calculateLineLengthInMeters(x1, y1, x2, y2) { + // Calculate the length of a line + function calculateLineLength(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; - const lengthInPixels = Math.sqrt(dx * dx + dy * dy); - return lengthInPixels * pixelToMeter; + return Math.sqrt(dx * dx + dy * dy); } - // Mouse events + // Mouse event for drawing lines canvas.addEventListener('mousedown', (e) => { const clickX = snapToGrid(e.offsetX); const clickY = snapToGrid(e.offsetY); - // Determine the starting point for the new line + // Determine starting point for the line let startX, startY; if (!lastEndPoint) { - // For the first line, set the start point anywhere + // First line can start anywhere startX = clickX; startY = clickY; - firstStartPoint = { x: startX, y: startY }; // Save the first start point + firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) { - // For subsequent lines, start at the last endpoint + // Subsequent lines must start at the last endpoint startX = lastEndPoint.x; startY = lastEndPoint.y; } else { - // If not a valid start point, do nothing + // Invalid starting point return; } - // Determine the endpoint + // Determine the end point const endX = snapToGrid(e.offsetX); const endY = snapToGrid(e.offsetY); - // The endpoint must be either: - // - A valid grid point (different from the start point) - // - The start point of the first line + // Check if the end point is valid: + // - Must not be the same as the start point + // - Must be a valid grid point or the first start point const isValidEndPoint = (endX !== startX || endY !== startY) && - (endX === firstStartPoint?.x && endY === firstStartPoint?.y); + ((endX === firstStartPoint?.x && endY === firstStartPoint?.y) || endX % gridSize === 0 && endY % gridSize === 0); if (!isValidEndPoint) { return; @@ -181,7 +179,7 @@ import Layout from "#layouts/layoutCAD.astro"; // Draw the line drawLine(startX, startY, endX, endY); - // Update the last endpoint + // Update the last end point lastEndPoint = { x: endX, y: endY }; // Capture the line details @@ -189,18 +187,18 @@ import Layout from "#layouts/layoutCAD.astro"; updateLineLog(); }); - // Drawing functions + // Function to draw a line function drawLine(x1, y1, x2, y2) { ctx.beginPath(); - ctx.strokeStyle = "#000000"; // Black color for lines - ctx.lineWidth = 2; // Thicker lines + ctx.strokeStyle = "#000000"; // Black lines + ctx.lineWidth = 2; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } - // Initialize canvas - drawGrid(); // Draw the grid when the page loads + // Initialize the canvas + drawGrid(); - + \ No newline at end of file