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