Leopoldadmin/web-cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix healthchecks: install curl in backend and frontend images

Browse Source
This commit is contained in:
Agent Zero
2026-05-24 21:54:58 +00:00
commit cdf350c618
52 changed files with 7885 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+184
View File
@@ -0,0 +1,184 @@
.counter {
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: var(--accent);
background: var(--accent-bg);
border: 2px solid transparent;
transition: border-color 0.3s;
margin-bottom: 24px;
&:hover {
border-color: var(--accent-border);
}
&:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
}
.hero {
position: relative;
.base,
.framework,
.vite {
inset-inline: 0;
margin: 0 auto;
}
.base {
width: 170px;
position: relative;
z-index: 0;
}
.framework,
.vite {
position: absolute;
}
.framework {
z-index: 1;
top: 34px;
height: 28px;
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
scale(1.4);
}
.vite {
z-index: 0;
top: 107px;
height: 26px;
width: auto;
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
scale(0.8);
}
}
#center {
display: flex;
flex-direction: column;
gap: 25px;
place-content: center;
place-items: center;
flex-grow: 1;
@media (max-width: 1024px) {
padding: 32px 20px 24px;
gap: 18px;
}
}
#next-steps {
display: flex;
border-top: 1px solid var(--border);
text-align: left;
& > div {
flex: 1 1 0;
padding: 32px;
@media (max-width: 1024px) {
padding: 24px 20px;
}
}
.icon {
margin-bottom: 16px;
width: 22px;
height: 22px;
}
@media (max-width: 1024px) {
flex-direction: column;
text-align: center;
}
}
#docs {
border-right: 1px solid var(--border);
@media (max-width: 1024px) {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
#next-steps ul {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
margin: 32px 0 0;
.logo {
height: 18px;
}
a {
color: var(--text-h);
font-size: 16px;
border-radius: 6px;
background: var(--social-bg);
display: flex;
padding: 6px 12px;
align-items: center;
gap: 8px;
text-decoration: none;
transition: box-shadow 0.3s;
&:hover {
box-shadow: var(--shadow);
}
.button-icon {
height: 18px;
width: 18px;
}
}
@media (max-width: 1024px) {
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
li {
flex: 1 1 calc(50% - 8px);
}
a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
}
#spacer {
height: 88px;
border-top: 1px solid var(--border);
@media (max-width: 1024px) {
height: 48px;
}
}
.ticks {
position: relative;
width: 100%;
&::before,
&::after {
content: '';
position: absolute;
top: -4.5px;
border: 5px solid transparent;
}
&::before {
left: 0;
border-left-color: var(--border);
}
&::after {
right: 0;
border-right-color: var(--border);
}
}
frontend/src/App.jsx
+35
View File
@@ -0,0 +1,35 @@
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';
import Editor from './pages/Editor';
const ProtectedRoute = ({ children }) => {
const { user, loading } = useAuth();
if (loading) return <div>Loading...</div>;
if (!user) return <Navigate to="/login" />;
return children;
};
const AppContent = () => (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/editor/:id" element={<ProtectedRoute><Editor /></ProtectedRoute>} />
<Route path="/editor/new" element={<ProtectedRoute><Editor /></ProtectedRoute>} />
<Route path="*" element={<Navigate to="/dashboard" />} />
</Routes>
</Router>
);
const App = () => (
<AuthProvider>
<AppContent />
</AuthProvider>
);
export default App;
frontend/src/assets/hero.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

frontend/src/assets/react.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

frontend/src/assets/vite.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

frontend/src/components/BlockLibrary.jsx
+104
View File
@@ -0,0 +1,104 @@
import React, { useState, useEffect } from 'react';
import api from '../services/api';
const BlockLibrary = ({ canvasRef }) => {
const [blocks, setBlocks] = useState([]);
const [categories, setCategories] = useState([]);
const [activeCategory, setActiveCategory] = useState('Alle');
const [loading, setLoading] = useState(true);
useEffect(() => {
api.get('/blocks')
.then(res => {
const data = res.data || [];
setBlocks(data);
const cats = ['Alle', ...new Set(data.map(b => b.category || 'Allgemein'))];
setCategories(cats);
setLoading(false);
})
.catch(() => setLoading(false));
}, []);
const filteredBlocks = activeCategory === 'Alle'
? blocks
: blocks.filter(b => (b.category || 'Allgemein') === activeCategory);
const handleDragStart = (e, block) => {
e.dataTransfer.setData('text/plain', block.svg_data);
};
const handleDrop = (e) => {
e.preventDefault();
const svgData = e.dataTransfer.getData('text/plain');
if (svgData && canvasRef.current) {
canvasRef.current.addSvgObject(svgData);
}
};
const handleDragOver = (e) => {
e.preventDefault();
};
if (loading) return <div style={{ padding: 10 }}>Lade...</div>;
return (
<div
style={{ padding: '0 10px 10px' }}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
{/* Category filter */}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 8 }}>
{categories.map(cat => (
<button
key={cat}
onClick={() => setActiveCategory(cat)}
style={{
padding: '2px 8px',
fontSize: 11,
background: activeCategory === cat ? '#1890ff' : '#f0f0f0',
color: activeCategory === cat ? 'white' : '#333',
border: 'none',
borderRadius: 3,
cursor: 'pointer',
}}
>
{cat}
</button>
))}
</div>
{/* Block grid */}
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
{filteredBlocks.map(block => (
<div
key={block.id}
draggable
onDragStart={(e) => handleDragStart(e, block)}
style={{
border: '1px solid #ddd',
borderRadius: 4,
padding: 4,
background: 'white',
cursor: 'grab',
textAlign: 'center',
}}
title={block.name}
>
<div
dangerouslySetInnerHTML={{ __html: block.svg_data }}
style={{ width: '100%', aspectRatio: '1', marginBottom: 4 }}
/>
<div style={{ fontSize: 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{block.name}
</div>
</div>
))}
</div>
{filteredBlocks.length === 0 && (
<p style={{ fontSize: 12, color: '#999' }}>Keine Blöcke in dieser Kategorie.</p>
)}
</div>
);
};
export default BlockLibrary;
frontend/src/components/CADCanvas.jsx
+253
View File
@@ -0,0 +1,253 @@
import React, { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 'react';
import { fabric } from 'fabric';
const CADCanvas = forwardRef(({ activeTool, setActiveTool, onCanvasReady }, ref) => {
const canvasEl = useRef(null);
const fabricRef = useRef(null);
const [zoom, setZoom] = useState(1);
const isDrawing = useRef(false);
const startPoint = useRef(null);
const tempShape = useRef(null);
useImperativeHandle(ref, () => ({
getCanvas: () => fabricRef.current,
toJSON: () => fabricRef.current?.toJSON(),
loadFromJSON: (json) => {
if (fabricRef.current) {
fabricRef.current.loadFromJSON(json, fabricRef.current.renderAll.bind(fabricRef.current));
}
},
addSvgObject: (svgStr) => {
if (!fabricRef.current) return;
fabric.loadSVGFromString(svgStr, (objects, options) => {
const group = fabric.util.groupSVGElements(objects, options);
group.set({ left: 100, top: 100, scaleX: 0.5, scaleY: 0.5 });
fabricRef.current.add(group);
fabricRef.current.setActiveObject(group);
fabricRef.current.renderAll();
});
},
addObjects: (objects) => {
if (!fabricRef.current) return;
objects.forEach(obj => {
let shape;
if (obj.type === 'line') {
shape = new fabric.Line([obj.x1, obj.y1, obj.x2, obj.y2], { stroke: obj.stroke || '#000', strokeWidth: obj.strokeWidth || 1 });
} else if (obj.type === 'circle') {
shape = new fabric.Circle({ left: obj.left, top: obj.top, radius: obj.radius, fill: obj.fill || 'transparent', stroke: obj.stroke || '#000', strokeWidth: obj.strokeWidth || 1 });
} else if (obj.type === 'polygon') {
shape = new fabric.Polygon(obj.points.map(p => ({ x: p.x, y: p.y })), { fill: obj.fill || 'transparent', stroke: obj.stroke || '#000', strokeWidth: obj.strokeWidth || 1 });
} else if (obj.type === 'rect') {
shape = new fabric.Rect({ left: obj.left, top: obj.top, width: obj.width, height: obj.height, fill: obj.fill || 'transparent', stroke: obj.stroke || '#000', strokeWidth: obj.strokeWidth || 1 });
}
if (shape) fabricRef.current.add(shape);
});
fabricRef.current.renderAll();
}
}));
// Initialize fabric canvas
useEffect(() => {
if (canvasEl.current && !fabricRef.current) {
fabricRef.current = new fabric.Canvas(canvasEl.current, {
width: canvasEl.current.parentElement.clientWidth,
height: canvasEl.current.parentElement.clientHeight,
backgroundColor: '#fff',
selection: true,
});
if (onCanvasReady) onCanvasReady(fabricRef.current);
const handleResize = () => {
if (canvasEl.current && fabricRef.current) {
fabricRef.current.setWidth(canvasEl.current.parentElement.clientWidth);
fabricRef.current.setHeight(canvasEl.current.parentElement.clientHeight);
fabricRef.current.renderAll();
}
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
if (fabricRef.current) {
fabricRef.current.dispose();
fabricRef.current = null;
}
};
}
}, []);
// Zoom with mouse wheel
useEffect(() => {
if (!fabricRef.current) return;
const canvas = fabricRef.current;
const handleWheel = (opt) => {
const delta = opt.e.deltaY;
let zoom = canvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
setZoom(Math.round(zoom * 100) / 100);
};
canvas.on('mouse:wheel', handleWheel);
return () => canvas.off('mouse:wheel', handleWheel);
}, []);
// Drawing tool behavior
useEffect(() => {
if (!fabricRef.current) return;
const canvas = fabricRef.current;
canvas.off('mouse:down');
canvas.off('mouse:move');
canvas.off('mouse:up');
if (activeTool === 'select') {
canvas.isDrawingMode = false;
canvas.selection = true;
canvas.forEachObject(obj => obj.selectable = true);
return;
}
canvas.selection = false;
canvas.forEachObject(obj => obj.selectable = false);
if (activeTool === 'freehand') {
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 2;
canvas.freeDrawingBrush.color = '#000';
return;
}
canvas.isDrawingMode = false;
canvas.on('mouse:down', (opt) => {
isDrawing.current = true;
const pointer = canvas.getPointer(opt.e);
startPoint.current = { x: pointer.x, y: pointer.y };
if (activeTool === 'line') {
tempShape.current = new fabric.Line(
[pointer.x, pointer.y, pointer.x, pointer.y],
{ stroke: '#000', strokeWidth: 2 }
);
} else if (activeTool === 'rect') {
tempShape.current = new fabric.Rect({
left: pointer.x,
top: pointer.y,
width: 0,
height: 0,
fill: 'transparent',
stroke: '#000',
strokeWidth: 2,
});
} else if (activeTool === 'circle') {
tempShape.current = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 0,
fill: 'transparent',
stroke: '#000',
strokeWidth: 2,
});
} else if (activeTool === 'text') {
const text = new fabric.IText('Text', {
left: pointer.x,
top: pointer.y,
fontSize: 20,
fill: '#000',
});
canvas.add(text);
canvas.setActiveObject(text);
isDrawing.current = false;
return;
} else if (activeTool === 'dimension') {
const line = new fabric.Line([pointer.x, pointer.y, pointer.x, pointer.y], {
stroke: '#e74c3c', strokeWidth: 1, strokeDashArray: [5, 5]
});
const tick1 = new fabric.Line([pointer.x, pointer.y, pointer.x+10, pointer.y], { stroke: '#e74c3c', strokeWidth: 1 });
const tick2 = new fabric.Line([pointer.x+10, pointer.y, pointer.x+10, pointer.y+10], { stroke: '#e74c3c', strokeWidth: 1 });
const text = new fabric.Text('0', {
left: pointer.x, top: pointer.y - 20, fontSize: 12, fill: '#e74c3c',
});
const group = new fabric.Group([line, tick1, tick2, text], {
selectable: false, hasControls: false, hasBorders: false,
});
tempShape.current = { group, line, text, tick1, tick2, start: {x: pointer.x, y: pointer.y} };
canvas.add(group);
}
if (tempShape.current && !(activeTool === 'dimension')) {
canvas.add(tempShape.current);
}
});
canvas.on('mouse:move', (opt) => {
if (!isDrawing.current || !tempShape.current) return;
const pointer = canvas.getPointer(opt.e);
if (activeTool === 'line') {
tempShape.current.set({ x2: pointer.x, y2: pointer.y });
} else if (activeTool === 'rect') {
const start = startPoint.current;
let left = Math.min(start.x, pointer.x);
let top = Math.min(start.y, pointer.y);
let width = Math.abs(start.x - pointer.x);
let height = Math.abs(start.y - pointer.y);
tempShape.current.set({ left, top, width, height });
} else if (activeTool === 'circle') {
const start = startPoint.current;
const radius = Math.sqrt(
(pointer.x - start.x) ** 2 + (pointer.y - start.y) ** 2
) / 2;
tempShape.current.set({
left: start.x - radius,
top: start.y - radius,
radius: radius,
});
} else if (activeTool === 'dimension') {
const { group, line, text, tick1, tick2, start } = tempShape.current;
// Update line
line.set({ x2: pointer.x, y2: pointer.y });
// Compute distance
const dx = pointer.x - start.x;
const dy = pointer.y - start.y;
const dist = Math.sqrt(dx*dx + dy*dy).toFixed(1);
text.set({ text: dist });
// Update text position to middle of line
const midX = (start.x + pointer.x) / 2;
const midY = (start.y + pointer.y) / 2;
text.set({ left: midX - 15, top: midY - 20 });
// Update tick positions (simplified: put at start and end)
tick1.set({ x1: start.x, y1: start.y, x2: start.x+10, y2: start.y });
tick2.set({ x1: pointer.x, y1: pointer.y, x2: pointer.x-10, y2: pointer.y });
// Add corner tick lines (just simple markers)
// Refresh group
group.addWithUpdate();
}
canvas.renderAll();
});
canvas.on('mouse:up', () => {
if (isDrawing.current && activeTool === 'dimension' && tempShape.current) {
// Make dimension group selectable after placement
tempShape.current.group.set({ selectable: true, hasControls: false, hasBorders: true });
}
isDrawing.current = false;
tempShape.current = null;
});
}, [activeTool]);
return (
<div style={{ width: '100%', height: '100%' }}>
<canvas ref={canvasEl} />
<div style={{ position: 'absolute', bottom: 10, right: 10, background: 'rgba(255,255,255,0.8)', padding: '4px 8px', borderRadius: 4, fontSize: 12 }}>
Zoom: {Math.round(zoom * 100)}%
</div>
</div>
);
});
export default CADCanvas;
frontend/src/components/LayerPanel.jsx
+97
View File
@@ -0,0 +1,97 @@
import React, { useState } from 'react';
const LayerPanel = ({ layers, setLayers, activeLayer, setActiveLayer }) => {
const [newLayerName, setNewLayerName] = useState('');
const addLayer = () => {
if (!newLayerName.trim()) return;
setLayers([...layers, { name: newLayerName, visible: true, locked: false }]);
setNewLayerName('');
};
const deleteLayer = (name) => {
if (layers.length <= 1) return;
setLayers(layers.filter(l => l.name !== name));
if (activeLayer === name) setActiveLayer(layers[0].name);
};
const toggleVisible = (name) => {
setLayers(layers.map(l => l.name === name ? { ...l, visible: !l.visible } : l));
};
const toggleLocked = (name) => {
setLayers(layers.map(l => l.name === name ? { ...l, locked: !l.locked } : l));
};
return (
<div style={{ padding: '0 10px 10px' }}>
<div style={{ display: 'flex', gap: 5, marginBottom: 10 }}>
<input
type="text"
placeholder="Neuer Layer..."
value={newLayerName}
onChange={(e) => setNewLayerName(e.target.value)}
style={{ flex: 1, padding: 4, borderRadius: 3, border: '1px solid #ccc' }}
/>
<button onClick={addLayer} style={{ padding: '4px 8px', background: '#1890ff', color: 'white', border: 'none', borderRadius: 3, cursor: 'pointer' }}>+</button>
</div>
{layers.map((layer, idx) => (
<div
key={idx}
onClick={() => setActiveLayer(layer.name)}
style={{
padding: '6px 8px',
marginBottom: 4,
background: activeLayer === layer.name ? '#e6f7ff' : '#fff',
border: activeLayer === layer.name ? '1px solid #1890ff' : '1px solid #ddd',
borderRadius: 4,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
fontSize: 13,
}}
>
<span style={{ flex: 1 }}>{layer.name}</span>
<span style={{ display: 'flex', gap: 4 }}>
<button
onClick={(e) => { e.stopPropagation(); toggleVisible(layer.name); }}
style={{
width: 24, height: 24, fontSize: 12,
background: layer.visible ? '#52c41a' : '#d9d9d9',
color: 'white', border: 'none', borderRadius: 3, cursor: 'pointer',
}}
title={layer.visible ? 'Sichtbar' : 'Ausgeblendet'}
>
{layer.visible ? '👁' : '—'}
</button>
<button
onClick={(e) => { e.stopPropagation(); toggleLocked(layer.name); }}
style={{
width: 24, height: 24, fontSize: 12,
background: layer.locked ? '#faad14' : '#d9d9d9',
color: 'white', border: 'none', borderRadius: 3, cursor: 'pointer',
}}
title={layer.locked ? 'Gesperrt' : 'Entsperrt'}
>
{layer.locked ? '🔒' : '🔓'}
</button>
<button
onClick={(e) => { e.stopPropagation(); deleteLayer(layer.name); }}
style={{
width: 24, height: 24, fontSize: 12,
background: '#ff4d4f', color: 'white', border: 'none', borderRadius: 3, cursor: 'pointer',
visibility: layers.length > 1 ? 'visible' : 'hidden',
}}
title="Löschen"
>
✕
</button>
</span>
</div>
))}
</div>
);
};
export default LayerPanel;
frontend/src/components/PluginRegistry.jsx
+46
View File
@@ -0,0 +1,46 @@
// Plugin-Registry: Lädt und initialisiert Plugins
// Plugins werden über die API geladen und registrieren sich mit init(cadApp)
// cadApp bietet API: registerTool, registerMenuItem, addToSidebar, etc.
const registry = {
plugins: [],
cadApp: null,
init(cadAppInstance) {
this.cadApp = cadAppInstance;
this.loadPlugins();
},
async loadPlugins() {
try {
// Load manifest from backend
const response = await fetch('/api/plugins');
const pluginList = await response.json();
for (const plugin of pluginList) {
await this.loadPlugin(plugin);
}
} catch (err) {
console.log('Plugin system: No plugins found or API unavailable');
}
},
async loadPlugin(plugin) {
try {
// Dynamically import plugin code
const module = await import(`/api/plugins/${plugin.id}/code`);
if (typeof module.default === 'function') {
module.default(this.cadApp);
this.plugins.push({ id: plugin.id, name: plugin.name, version: plugin.version });
console.log(`Plugin loaded: ${plugin.name}`);
}
} catch (err) {
console.warn(`Failed to load plugin: ${plugin.name}`, err);
}
},
getLoadedPlugins() {
return this.plugins;
},
};
export default registry;
frontend/src/components/Toolbar.jsx
+42
View File
@@ -0,0 +1,42 @@
import React from 'react';
const tools = [
{ id: 'select', label: '↖', title: 'Auswahl' },
{ id: 'line', label: '╲', title: 'Linie' },
{ id: 'rect', label: '▭', title: 'Rechteck' },
{ id: 'circle', label: '○', title: 'Kreis' },
{ id: 'freehand', label: '✎', title: 'Freihand' },
{ id: 'text', label: 'T', title: 'Text' },
{ id: 'dimension', label: '↔', title: 'Bemaßung' },
];
const Toolbar = ({ activeTool, setActiveTool }) => {
return (
<>
{tools.map(tool => (
<button
key={tool.id}
title={tool.title}
onClick={() => setActiveTool(tool.id)}
style={{
width: 36,
height: 36,
fontSize: 16,
background: activeTool === tool.id ? '#1890ff' : '#34495e',
color: 'white',
border: 'none',
borderRadius: 4,
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{tool.label}
</button>
))}
</>
);
};
export default Toolbar;
frontend/src/contexts/AuthContext.jsx
+51
View File
@@ -0,0 +1,51 @@
import React, { createContext, useState, useEffect, useContext } from 'react';
import api from '../services/api';
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const token = localStorage.getItem('token');
if (token) {
api.get('/auth/me').then((res) => {
setUser(res.data);
}).catch(() => {
localStorage.removeItem('token');
}).finally(() => setLoading(false));
} else {
setLoading(false);
}
}, []);
const login = async (email, password) => {
const res = await api.post('/auth/login', { email, password });
const { token, user } = res.data;
localStorage.setItem('token', token);
setUser(user);
return user;
};
const register = async (email, password) => {
const res = await api.post('/auth/register', { email, password });
const { token, user } = res.data;
localStorage.setItem('token', token);
setUser(user);
return user;
};
const logout = () => {
localStorage.removeItem('token');
setUser(null);
};
return (
<AuthContext.Provider value={{ user, loading, login, register, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);
frontend/src/index.css
+8
View File
@@ -0,0 +1,8 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f0f2f5;
}
frontend/src/main.jsx
+10
View File
@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
frontend/src/pages/Dashboard.jsx
+72
View File
@@ -0,0 +1,72 @@
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '../services/api';
import { useAuth } from '../contexts/AuthContext';
const Dashboard = () => {
const [drawings, setDrawings] = useState([]);
const [loading, setLoading] = useState(true);
const { user, logout } = useAuth();
const navigate = useNavigate();
useEffect(() => {
api.get('/drawings').then(res => {
setDrawings(res.data);
setLoading(false);
}).catch(() => setLoading(false));
}, []);
const handleCreate = async () => {
try {
const res = await api.post('/drawings', { name: 'Neue Zeichnung' });
navigate(`/editor/${res.data.id}`);
} catch (err) {
alert('Fehler beim Erstellen');
}
};
const handleDelete = async (id) => {
if (!confirm('Zeichnung wirklich löschen?')) return;
try {
await api.delete(`/drawings/${id}`);
setDrawings(drawings.filter(d => d.id !== id));
} catch (err) {
alert('Fehler beim Löschen');
}
};
if (loading) return <div style={{ padding: 20 }}>Lade...</div>;
return (
<div style={{ maxWidth: 800, margin: '20px auto', padding: 20 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
<h2>Meine Zeichnungen ({user?.email})</h2>
<button onClick={logout} style={{ padding: '8px 16px', backgroundColor: '#ff4d4f', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Abmelden</button>
</div>
<button onClick={handleCreate} style={{ padding: '10px 20px', backgroundColor: '#1890ff', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer', marginBottom: 20 }}>Neue Zeichnung</button>
{drawings.length === 0 ? (
<p>Keine Zeichnungen vorhanden.</p>
) : (
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr><th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #ddd' }}>Name</th><th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #ddd' }}>Zuletzt geändert</th><th style={{ textAlign: 'left', padding: 8, borderBottom: '1px solid #ddd' }}>Aktionen</th></tr>
</thead>
<tbody>
{drawings.map(d => (
<tr key={d.id}>
<td style={{ padding: 8, borderBottom: '1px solid #eee' }}>{d.name}</td>
<td style={{ padding: 8, borderBottom: '1px solid #eee' }}>{new Date(d.updatedAt).toLocaleString()}</td>
<td style={{ padding: 8, borderBottom: '1px solid #eee' }}>
<button onClick={() => navigate(`/editor/${d.id}`)} style={{ marginRight: 8, padding: '4px 12px', backgroundColor: '#52c41a', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Öffnen</button>
<button onClick={() => handleDelete(d.id)} style={{ padding: '4px 12px', backgroundColor: '#ff4d4f', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Löschen</button>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
};
export default Dashboard;
frontend/src/pages/Editor.jsx
+238
View File
@@ -0,0 +1,238 @@
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import api from '../services/api';
import CADCanvas from '../components/CADCanvas';
import Toolbar from '../components/Toolbar';
import LayerPanel from '../components/LayerPanel';
import BlockLibrary from '../components/BlockLibrary';
import pluginRegistry from '../components/PluginRegistry';
const Editor = () => {
const { id } = useParams();
const navigate = useNavigate();
const canvasRef = useRef(null);
const [drawing, setDrawing] = useState(null);
const [activeTool, setActiveTool] = useState('select');
const [layers, setLayers] = useState([
{ name: 'Layer 0', visible: true, locked: false },
]);
const [activeLayer, setActiveLayer] = useState('Layer 0');
const [showLayers, setShowLayers] = useState(true);
const [showBlocks, setShowBlocks] = useState(true);
const [saveStatus, setSaveStatus] = useState('');
const fileInputRef = useRef(null);
// Load drawing
useEffect(() => {
if (id && id !== 'new') {
api.get(`/drawings/${id}`).then(res => {
setDrawing(res.data);
if (res.data.canvas_json) {
try {
const json = JSON.parse(res.data.canvas_json);
canvasRef.current?.loadFromJSON?.(json);
} catch (e) {
console.warn('Canvas JSON parse error, starting fresh');
}
}
}).catch(err => {
console.error(err);
navigate('/dashboard');
});
} else {
api.post('/drawings', { name: 'Neue Zeichnung' }).then(res => {
setDrawing(res.data);
navigate(`/editor/${res.data.id}`, { replace: true });
}).catch(err => {
console.error(err);
navigate('/dashboard');
});
}
}, [id]);
// Initialize plugin registry when canvas is ready
const handleCanvasReady = (canvas) => {
const cadApp = {
getCanvas: () => canvas,
getApi: () => api,
getDrawing: () => drawing,
registerTool: (id, label, icon, handler) => {
console.log(`Plugin registered tool: ${id}`);
// Would integrate into toolbar dynamically
},
};
pluginRegistry.init(cadApp);
};
// Save canvas JSON to backend
const saveCanvas = async () => {
if (!drawing || !canvasRef.current) return;
try {
setSaveStatus('Speichere...');
const json = canvasRef.current.toJSON();
await api.put(`/drawings/${drawing.id}`, {
canvas_json: JSON.stringify(json),
name: drawing.name,
});
setSaveStatus('Gespeichert ✓');
setTimeout(() => setSaveStatus(''), 2000);
} catch (err) {
setSaveStatus('Fehler ✗');
console.error(err);
}
};
// DXF Import
const handleDxfImport = async (e) => {
const file = e.target.files?.[0];
if (!file) return;
try {
const formData = new FormData();
formData.append('file', file);
const res = await api.post('/dxf/import', formData);
if (res.data?.objects && canvasRef.current) {
canvasRef.current.addObjects(res.data.objects);
setSaveStatus('DXF importiert ✓');
setTimeout(() => setSaveStatus(''), 2000);
}
e.target.value = '';
} catch (err) {
console.error('DXF import error:', err);
setSaveStatus('DXF-Import Fehler ✗');
setTimeout(() => setSaveStatus(''), 3000);
e.target.value = '';
}
};
// DXF Export
const handleDxfExport = async () => {
if (!canvasRef.current) return;
try {
const json = canvasRef.current.toJSON();
const res = await api.post('/dxf/export', { objects: json.objects || [] }, {
responseType: 'blob',
});
const blob = new Blob([res.data], { type: 'application/dxf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = (drawing?.name || 'zeichnung') + '.dxf';
a.click();
URL.revokeObjectURL(url);
setSaveStatus('DXF exportiert ✓');
setTimeout(() => setSaveStatus(''), 2000);
} catch (err) {
console.error('DXF export error:', err);
setSaveStatus('DXF-Export Fehler ✗');
setTimeout(() => setSaveStatus(''), 3000);
}
};
// SVG Export (client-side)
const handleSvgExport = () => {
if (!canvasRef.current) return;
const canvas = canvasRef.current.getCanvas();
if (!canvas) return;
try {
const svg = canvas.toSVG();
const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = (drawing?.name || 'zeichnung') + '.svg';
a.click();
URL.revokeObjectURL(url);
setSaveStatus('SVG exportiert ✓');
setTimeout(() => setSaveStatus(''), 2000);
} catch (err) {
console.error('SVG export error:', err);
}
};
const handleDelete = () => {
if (!confirm('Ausgewähltes Objekt löschen?')) return;
const canvas = canvasRef.current?.getCanvas();
if (canvas) {
const active = canvas.getActiveObject();
if (active) {
canvas.remove(active);
canvas.renderAll();
}
}
};
// Keyboard shortcuts
useEffect(() => {
const handleKeyDown = (e) => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault();
saveCanvas();
} else if (e.key === 'Delete' || e.key === 'Backspace') {
handleDelete();
} else if (e.ctrlKey && e.key === 'z') {
// Undo would need command stack
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [drawing]);
return (
<div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
{/* Toolbar */}
<div style={{ width: 50, background: '#2c3e50', color: 'white', display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 10, gap: 10, zIndex: 20 }}>
<Toolbar activeTool={activeTool} setActiveTool={setActiveTool} canvasRef={canvasRef} />
<button
onClick={handleDelete}
title="Löschen"
style={{ width: 36, height: 36, background: '#c0392b', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer', marginTop: 'auto', marginBottom: 10 }}
>
🗑
</button>
</div>
{/* Canvas area */}
<div style={{ flex: 1, position: 'relative', background: '#f0f0f0' }}>
<div style={{ position: 'absolute', top: 10, left: 10, zIndex: 10, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
<button onClick={() => navigate('/dashboard')} style={{ padding: '4px 12px', background: '#1890ff', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>← Zurück</button>
<button onClick={saveCanvas} style={{ padding: '4px 12px', background: '#52c41a', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Speichern</button>
<button onClick={() => fileInputRef.current?.click()} style={{ padding: '4px 12px', background: '#faad14', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>DXF Import</button>
<button onClick={handleDxfExport} style={{ padding: '4px 12px', background: '#722ed1', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>DXF Export</button>
<button onClick={handleSvgExport} style={{ padding: '4px 12px', background: '#13c2c2', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>SVG Export</button>
<span style={{ padding: '4px 12px', background: 'white', borderRadius: 4, fontSize: 14 }}>{saveStatus}</span>
</div>
<input
type="file"
ref={fileInputRef}
onChange={handleDxfImport}
accept=".dxf"
style={{ display: 'none' }}
/>
<CADCanvas
ref={canvasRef}
activeTool={activeTool}
setActiveTool={setActiveTool}
onCanvasReady={handleCanvasReady}
/>
</div>
{/* Right panels */}
<div style={{ width: 250, background: '#fafafa', borderLeft: '1px solid #ddd', overflowY: 'auto' }}>
<div style={{ padding: 10, borderBottom: '1px solid #ddd', cursor: 'pointer', fontWeight: 'bold', userSelect: 'none' }} onClick={() => setShowLayers(!showLayers)}>
Layer {showLayers ? '▲' : '▼'}
</div>
{showLayers && (
<LayerPanel layers={layers} setLayers={setLayers} activeLayer={activeLayer} setActiveLayer={setActiveLayer} />
)}
<div style={{ padding: 10, borderBottom: '1px solid #ddd', cursor: 'pointer', fontWeight: 'bold', userSelect: 'none' }} onClick={() => setShowBlocks(!showBlocks)}>
Teilebibliothek {showBlocks ? '▲' : '▼'}
</div>
{showBlocks && (
<BlockLibrary canvasRef={canvasRef} />
)}
</div>
</div>
);
};
export default Editor;
frontend/src/pages/Login.jsx
+45
View File
@@ -0,0 +1,45 @@
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const { login } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
try {
await login(email, password);
navigate('/dashboard');
} catch (err) {
setError(err.response?.data?.error || 'Login fehlgeschlagen');
}
};
return (
<div style={{ maxWidth: 400, margin: '100px auto', padding: 20, background: 'white', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
<h2>Web-CAD Anmeldung</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: 12 }}>
<label>E-Mail</label><br />
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #ccc' }} />
</div>
<div style={{ marginBottom: 16 }}>
<label>Passwort</label><br />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #ccc' }} />
</div>
<button type="submit" style={{ width: '100%', padding: 10, backgroundColor: '#1890ff', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Anmelden</button>
</form>
<p style={{ marginTop: 12, textAlign: 'center' }}>
Kein Konto? <Link to="/register">Registrieren</Link>
</p>
</div>
);
};
export default Login;
frontend/src/pages/Register.jsx
+54
View File
@@ -0,0 +1,54 @@
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
const Register = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [passwordConfirm, setPasswordConfirm] = useState('');
const [error, setError] = useState('');
const { register } = useAuth();
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
setError('');
if (password !== passwordConfirm) {
setError('Passwörter stimmen nicht überein');
return;
}
try {
await register(email, password);
navigate('/dashboard');
} catch (err) {
setError(err.response?.data?.error || 'Registrierung fehlgeschlagen');
}
};
return (
<div style={{ maxWidth: 400, margin: '100px auto', padding: 20, background: 'white', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}>
<h2>Registrierung</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
<form onSubmit={handleSubmit}>
<div style={{ marginBottom: 12 }}>
<label>E-Mail</label><br />
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #ccc' }} />
</div>
<div style={{ marginBottom: 12 }}>
<label>Passwort</label><br />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #ccc' }} />
</div>
<div style={{ marginBottom: 16 }}>
<label>Passwort bestätigen</label><br />
<input type="password" value={passwordConfirm} onChange={(e) => setPasswordConfirm(e.target.value)} required style={{ width: '100%', padding: 8, borderRadius: 4, border: '1px solid #ccc' }} />
</div>
<button type="submit" style={{ width: '100%', padding: 10, backgroundColor: '#52c41a', color: 'white', border: 'none', borderRadius: 4, cursor: 'pointer' }}>Registrieren</button>
</form>
<p style={{ marginTop: 12, textAlign: 'center' }}>
Bereits registriert? <Link to="/login">Anmelden</Link>
</p>
</div>
);
};
export default Register;
frontend/src/services/api.js
+16
View File
@@ -0,0 +1,16 @@
import axios from 'axios';
const api = axios.create({
baseURL: '/api',
});
// Add auth token to every request if available
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
export default api;