CAD
This commit is contained in:
Jens Cornelsen
88
src/layouts/layoutCAD.astro
Normal file
88
src/layouts/layoutCAD.astro
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
import "../style/global.css";
|
||||
import "../../svelte-dialogs.config"
|
||||
import Header from "#header/Header.astro";
|
||||
import Footer from "#footer/Footer.astro";
|
||||
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
|
||||
import SidebarRight from "#sidebarRight/SidebarRight.astro";
|
||||
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>
|
||||
{title || "Simple CAD Program - Connected Lines"}
|
||||
</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
canvas {
|
||||
border: 1px solid #ccc;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.controls {
|
||||
margin: 10px;
|
||||
}
|
||||
.controls button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.log {
|
||||
margin: 10px;
|
||||
width: 800px;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<container class="w-full max-w-[1920px]">
|
||||
|
||||
<Header />
|
||||
|
||||
<main
|
||||
class="w-full p-0 grid
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
|
||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
||||
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
|
||||
">
|
||||
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box grow rounded-tl-none">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
<SidebarRight />
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
<NotificationWrapper client:load />
|
||||
</container>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import Layout from "#layouts/LayoutCAD.astro";
|
||||
import Widget2 from "#components/Widget.svelte";
|
||||
|
||||
---
|
||||
@@ -14,5 +14,112 @@ import Widget2 from "#components/Widget.svelte";
|
||||
<Widget2 client:load />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="clearCanvas()">Clear</button>
|
||||
</div>
|
||||
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
||||
<div class="log">
|
||||
<strong>Captured Lines:</strong>
|
||||
<ul id="line-log"></ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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 = 5; // Size of each grid cell in pixels
|
||||
let startX = null;
|
||||
let startY = null;
|
||||
let capturedLines = [];
|
||||
|
||||
// Snap a coordinate to the nearest grid point
|
||||
function snapToGrid(value) {
|
||||
return Math.round(value / gridSize) * gridSize;
|
||||
}
|
||||
|
||||
// Draw the grid
|
||||
function drawGrid() {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Draw vertical lines
|
||||
for (let x = 0; x <= canvas.width; x += gridSize) {
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.height);
|
||||
}
|
||||
|
||||
// Draw horizontal lines
|
||||
for (let y = 0; y <= canvas.height; y += gridSize) {
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(canvas.width, y);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Clear the canvas and reset logs
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
capturedLines = [];
|
||||
startX = null;
|
||||
startY = null;
|
||||
drawGrid(); // Redraw the grid after clearing
|
||||
updateLineLog();
|
||||
}
|
||||
|
||||
// Update the captured lines log
|
||||
function updateLineLog() {
|
||||
lineLog.innerHTML = capturedLines
|
||||
.map((line, index) => {
|
||||
const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
|
||||
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Calculate the length of a line in meters
|
||||
function calculateLineLengthInMeters(x1, y1, x2, y2) {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
|
||||
return lengthInPixels * pixelToMeter;
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
const endX = snapToGrid(e.offsetX);
|
||||
const endY = snapToGrid(e.offsetY);
|
||||
|
||||
if (startX !== null && startY !== null) {
|
||||
// Draw the final line
|
||||
drawLine(startX, startY, endX, endY);
|
||||
|
||||
// Capture the line details
|
||||
capturedLines.push({ startX, startY, endX, endY });
|
||||
updateLineLog();
|
||||
}
|
||||
|
||||
// Update the start position for the next line
|
||||
startX = endX;
|
||||
startY = endY;
|
||||
});
|
||||
|
||||
// Drawing functions
|
||||
function drawLine(x1, y1, x2, y2) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Initialize canvas
|
||||
drawGrid(); // Draw the grid when the page loads
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user