feat: drag rooms, resize handles, no overlap, zoom controls
This commit is contained in:
parent
737aed5dbb
commit
4288d3781d
1 changed files with 396 additions and 214 deletions
|
|
@ -24,7 +24,7 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
.container { display: flex; height: calc(100vh - 60px); }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width: 320px; min-width: 320px; background: #16213e; padding: 16px; overflow-y: auto; border-right: 2px solid #0f3460; }
|
||||
.sidebar { width: 340px; min-width: 340px; background: #16213e; padding: 16px; overflow-y: auto; border-right: 2px solid #0f3460; }
|
||||
.sidebar h2 { font-size: 1rem; color: #e94560; margin-bottom: 12px; }
|
||||
.sidebar h3 { font-size: 0.9rem; color: #aaa; margin: 16px 0 8px; }
|
||||
|
||||
|
|
@ -36,7 +36,9 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
.project-item .meta { font-size: 0.75rem; color: #888; margin-top: 2px; }
|
||||
|
||||
.room-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
.room-item { background: #1a1a2e; padding: 8px 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.room-item { background: #1a1a2e; padding: 8px 10px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: 1px solid transparent; transition: all .2s; }
|
||||
.room-item:hover { border-color: #0f3460; }
|
||||
.room-item.active { border-color: #e94560; }
|
||||
.room-item .rname { font-weight: 500; }
|
||||
.room-item .rdim { font-size: 0.8rem; color: #888; }
|
||||
.room-item .rcolor { width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-right: 6px; }
|
||||
|
|
@ -54,10 +56,12 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
|
||||
/* Canvas area */
|
||||
.canvas-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #0d0d1a; }
|
||||
.canvas-area canvas { cursor: crosshair; }
|
||||
.canvas-toolbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: #16213e; padding: 8px 16px; border-radius: 8px; border: 1px solid #0f3460; z-index: 10; }
|
||||
.canvas-area canvas { cursor: grab; }
|
||||
.canvas-area canvas.grabbing { cursor: grabbing; }
|
||||
.canvas-toolbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; background: #16213e; padding: 8px 16px; border-radius: 8px; border: 1px solid #0f3460; z-index: 10; align-items: center; }
|
||||
.canvas-toolbar label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #aaa; }
|
||||
.canvas-toolbar select { background: #1a1a2e; border: 1px solid #333; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; }
|
||||
.canvas-toolbar select, .canvas-toolbar input[type="number"] { background: #1a1a2e; border: 1px solid #333; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; font-size: 0.85rem; }
|
||||
.canvas-toolbar input[type="number"] { width: 60px; }
|
||||
|
||||
.canvas-info { position: absolute; bottom: 12px; left: 12px; background: #16213ee0; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; color: #888; z-index: 10; }
|
||||
|
||||
|
|
@ -80,8 +84,11 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
.empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
|
||||
.empty-state p { margin-bottom: 8px; }
|
||||
|
||||
/* Dimension labels on canvas */
|
||||
.dim-label { position: absolute; font-size: 11px; color: #e94560; font-weight: 600; pointer-events: none; z-index: 5; }
|
||||
/* Tool buttons */
|
||||
.tool-btn { background: #1a1a2e; border: 1px solid #333; color: #e0e0e0; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: all .2s; }
|
||||
.tool-btn:hover { border-color: #0f3460; }
|
||||
.tool-btn.active { background: #e94560; color: #fff; border-color: #e94560; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -101,11 +108,11 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
<h2>🏠 Räume</h2>
|
||||
<div class="room-list" id="roomList"></div>
|
||||
|
||||
<h3>📏 Bekannte Maße</h3>
|
||||
<h3>📏 Wandmaße (cm)</h3>
|
||||
<div id="wallInputs"></div>
|
||||
<button class="btn btn-secondary btn-sm" onclick="addWallInput()">+ Wandmaß hinzufügen</button>
|
||||
<button class="btn btn-secondary btn-sm" onclick="addWallInput()">+ Wandmaß</button>
|
||||
|
||||
<h3>📐 Berechnete Maße</h3>
|
||||
<h3>📐 Raum-Info</h3>
|
||||
<div class="measurements" id="measurements"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,18 +120,15 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
|
|||
<!-- Canvas -->
|
||||
<div class="canvas-area" id="canvasArea">
|
||||
<div class="canvas-toolbar" id="canvasToolbar" style="display:none">
|
||||
<label>Werkzeug:
|
||||
<select id="toolSelect">
|
||||
<option value="select">Auswählen</option>
|
||||
<option value="wall">Wand zeichnen</option>
|
||||
<option value="move">Verschieben</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Zoom:</label>
|
||||
<button class="tool-btn" onclick="zoom(-1)">−</button>
|
||||
<input type="number" id="scaleInput" value="5" min="1" max="30" onchange="setScale(this.value)" style="width:50px">
|
||||
<button class="tool-btn" onclick="zoom(1)">+</button>
|
||||
<label>Raster: <input type="checkbox" id="gridToggle" checked></label>
|
||||
<button class="btn btn-secondary btn-sm" onclick="fitCanvas()">🔲 Passend</button>
|
||||
<button class="tool-btn" onclick="fitCanvas()">🔲 Passend</button>
|
||||
</div>
|
||||
<canvas id="floorplan"></canvas>
|
||||
<div class="canvas-info" id="canvasInfo">Kein Raum ausgewählt</div>
|
||||
<div class="canvas-info" id="canvasInfo">Kein Raum ausgewählt – Klicke einen Raum an oder ziehe ihn auf der Fläche</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -163,20 +167,16 @@ const STATE = {
|
|||
currentProject: null,
|
||||
currentRoomIdx: -1,
|
||||
rooms: [],
|
||||
walls: [], // known wall measurements per room
|
||||
// Canvas state
|
||||
scale: 10, // pixels per cm
|
||||
scale: 5, // pixels per cm
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
isDragging: false,
|
||||
dragMode: null, // 'pan' or 'room'
|
||||
dragStart: null,
|
||||
selectedRoom: -1,
|
||||
// Wall drawing
|
||||
drawingWall: false,
|
||||
wallStart: null,
|
||||
};
|
||||
|
||||
const COLORS = ['#e94560','#0f3460','#27ae60','#e67e22','#9b59b6','#3498db','#1abc9c','#f39c12','#e74c3c','#2ecc71'];
|
||||
const COLORS = ['#e94560','#3498db','#27ae60','#e67e22','#9b59b6','#1abc9c','#f39c12','#e74c3c','#2ecc71','#ff6b81'];
|
||||
|
||||
// ===== API =====
|
||||
async function api(method, path, body) {
|
||||
|
|
@ -195,7 +195,7 @@ async function loadProjects() {
|
|||
function renderProjectList() {
|
||||
const el = document.getElementById('projectList');
|
||||
if (STATE.projects.length === 0) {
|
||||
el.innerHTML = '<div class="empty-state"><div class="icon">📐</div><p>Noch keine Projekte</p><p style="font-size:0.8rem">Erstelle ein neues Projekt um zu starten</p></div>';
|
||||
el.innerHTML = '<div class="empty-state"><div class="icon">📐</div><p>Noch keine Projekte</p></div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = STATE.projects.map(p => `
|
||||
|
|
@ -227,7 +227,9 @@ async function loadProject(pid) {
|
|||
document.getElementById('roomSection').style.display = 'block';
|
||||
document.getElementById('canvasToolbar').style.display = 'flex';
|
||||
renderRoomList();
|
||||
renderCanvas();
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
fitCanvas();
|
||||
renderProjectList();
|
||||
}
|
||||
|
||||
|
|
@ -241,27 +243,40 @@ function showNewRoomModal() {
|
|||
async function addRoom() {
|
||||
const name = document.getElementById('newRoomName').value || 'Raum ' + (STATE.rooms.length + 1);
|
||||
const color = document.getElementById('newRoomColor').value;
|
||||
|
||||
// Auto-position: place to the right of last room
|
||||
let x = 100, y = 100;
|
||||
if (STATE.rooms.length > 0) {
|
||||
const last = STATE.rooms[STATE.rooms.length - 1];
|
||||
x = last.x + last.width_cm + 100;
|
||||
y = last.y;
|
||||
}
|
||||
|
||||
const room = {
|
||||
id: 'room_' + Date.now(),
|
||||
name,
|
||||
color,
|
||||
walls: [], // {id, length_cm, label, x1,y1,x2,y2} - placed on canvas
|
||||
known_measurements: [], // {id, label, length_cm}
|
||||
x: 50, y: 50, // position on canvas
|
||||
x: x, // canvas position in cm
|
||||
y: y,
|
||||
width_cm: 360, // default size
|
||||
height_cm: 360,
|
||||
known_measurements: [], // {id, label, length_cm, side}
|
||||
};
|
||||
STATE.rooms.push(room);
|
||||
STATE.currentRoomIdx = STATE.rooms.length - 1;
|
||||
STATE.selectedRoom = STATE.currentRoomIdx;
|
||||
await saveCurrentProject();
|
||||
renderRoomList();
|
||||
renderCanvas();
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
fitCanvas();
|
||||
closeModal('newRoomModal');
|
||||
}
|
||||
|
||||
function renderRoomList() {
|
||||
const el = document.getElementById('roomList');
|
||||
if (STATE.rooms.length === 0) {
|
||||
el.innerHTML = '<div style="color:#666;font-size:0.85rem;padding:8px">Noch keine Räume. Klick auf "+ Raum"</div>';
|
||||
el.innerHTML = '<div style="color:#666;font-size:0.85rem;padding:8px">Noch keine Räume</div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = STATE.rooms.map((r, i) => `
|
||||
|
|
@ -269,7 +284,7 @@ function renderRoomList() {
|
|||
<div>
|
||||
<span class="rcolor" style="background:${r.color}"></span>
|
||||
<span class="rname">${r.name}</span>
|
||||
<span class="rdim">${r.known_measurements ? r.known_measurements.length : 0} Maße</span>
|
||||
<span class="rdim"> · ${r.width_cm}×${r.height_cm}cm</span>
|
||||
</div>
|
||||
<button class="btn btn-danger btn-sm" onclick="event.stopPropagation(); deleteRoom(${i})">✕</button>
|
||||
</div>
|
||||
|
|
@ -304,13 +319,20 @@ function renderWallInputs() {
|
|||
if (!room) { el.innerHTML = ''; return; }
|
||||
const ms = room.known_measurements || [];
|
||||
if (ms.length === 0) {
|
||||
el.innerHTML = '<div style="color:#666;font-size:0.85rem;padding:8px">Noch keine Maße. Füge Wandmaße hinzu!</div>';
|
||||
el.innerHTML = '<div style="color:#666;font-size:0.85rem;padding:8px">Füge Wandmaße hinzu!</div>';
|
||||
return;
|
||||
}
|
||||
const sideNames = { top: 'Oben', right: 'Rechts', bottom: 'Unten', left: 'Links' };
|
||||
el.innerHTML = ms.map((m, i) => `
|
||||
<div class="wall-input">
|
||||
<input type="text" value="${m.label}" placeholder="z.B. Wand A" onchange="updateWallLabel(${i}, this.value)" style="width:80px">
|
||||
<input type="number" value="${m.length_cm}" placeholder="cm" min="1" onchange="updateWallLength(${i}, this.value)" style="width:80px">
|
||||
<input type="text" value="${m.label}" placeholder="Wand" onchange="updateWall(${i},'label',this.value)" style="width:70px">
|
||||
<select onchange="updateWall(${i},'side',this.value)" style="width:80px;background:#1a1a2e;border:1px solid #333;color:#e0e0e0;padding:6px;border-radius:4px;font-size:0.85rem">
|
||||
<option value="top" ${m.side==='top'?'selected':''}>Oben</option>
|
||||
<option value="right" ${m.side==='right'?'selected':''}>Rechts</option>
|
||||
<option value="bottom" ${m.side==='bottom'?'selected':''}>Unten</option>
|
||||
<option value="left" ${m.side==='left'?'selected':''}>Links</option>
|
||||
</select>
|
||||
<input type="number" value="${m.length_cm}" placeholder="cm" min="1" onchange="updateWall(${i},'length',parseInt(this.value))" style="width:70px">
|
||||
<span class="unit">cm</span>
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteWall(${i})">✕</button>
|
||||
</div>
|
||||
|
|
@ -321,29 +343,47 @@ function addWallInput() {
|
|||
const room = STATE.rooms[STATE.currentRoomIdx];
|
||||
if (!room) return;
|
||||
if (!room.known_measurements) room.known_measurements = [];
|
||||
const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
const label = labels[room.known_measurements.length % labels.length];
|
||||
room.known_measurements.push({ id: 'm_' + Date.now(), label: 'Wand ' + label, length_cm: 0 });
|
||||
const labels = 'ABCDEFGH';
|
||||
const label = 'Wand ' + labels[room.known_measurements.length % labels.length];
|
||||
const sides = ['top','right','bottom','left'];
|
||||
const side = sides[room.known_measurements.length % 4];
|
||||
room.known_measurements.push({ id: 'm_' + Date.now(), label, length_cm: 0, side });
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
saveCurrentProject();
|
||||
}
|
||||
|
||||
function updateWallLabel(idx, val) {
|
||||
function updateWall(idx, field, val) {
|
||||
const room = STATE.rooms[STATE.currentRoomIdx];
|
||||
if (!room) return;
|
||||
room.known_measurements[idx].label = val;
|
||||
if (field === 'length') {
|
||||
room.known_measurements[idx].length_cm = val || 0;
|
||||
// Auto-resize room based on measurement
|
||||
autoResizeRoom(room);
|
||||
} else if (field === 'side') {
|
||||
room.known_measurements[idx].side = val;
|
||||
} else if (field === 'label') {
|
||||
room.known_measurements[idx].label = val;
|
||||
}
|
||||
renderMeasurements();
|
||||
renderRoomList();
|
||||
renderCanvas();
|
||||
saveCurrentProject();
|
||||
}
|
||||
|
||||
function updateWallLength(idx, val) {
|
||||
const room = STATE.rooms[STATE.currentRoomIdx];
|
||||
if (!room) return;
|
||||
room.known_measurements[idx].length_cm = parseInt(val) || 0;
|
||||
renderMeasurements();
|
||||
renderCanvas();
|
||||
saveCurrentProject();
|
||||
function autoResizeRoom(room) {
|
||||
// If we have top/bottom measurement, set height; if left/right, set width
|
||||
const ms = room.known_measurements || [];
|
||||
let topM = ms.find(m => m.side === 'top' && m.length_cm > 0);
|
||||
let bottomM = ms.find(m => m.side === 'bottom' && m.length_cm > 0);
|
||||
let leftM = ms.find(m => m.side === 'left' && m.length_cm > 0);
|
||||
let rightM = ms.find(m => m.side === 'right' && m.length_cm > 0);
|
||||
|
||||
// top/bottom = width dimension, left/right = height dimension
|
||||
if (topM) room.width_cm = topM.length_cm;
|
||||
if (bottomM && !topM) room.width_cm = bottomM.length_cm;
|
||||
if (leftM) room.height_cm = leftM.length_cm;
|
||||
if (rightM && !leftM) room.height_cm = rightM.length_cm;
|
||||
}
|
||||
|
||||
function deleteWall(idx) {
|
||||
|
|
@ -362,28 +402,42 @@ function renderMeasurements() {
|
|||
const room = STATE.rooms[STATE.currentRoomIdx];
|
||||
if (!room) { el.innerHTML = ''; return; }
|
||||
const ms = room.known_measurements || [];
|
||||
const sideNames = { top: '↔ Oben', right: '↕ Rechts', bottom: '↔ Unten', left: '↕ Links' };
|
||||
|
||||
let html = `<div class="measurement"><span class="label">Raumgröße</span><span class="value">${room.width_cm}×${room.height_cm} cm</span></div>`;
|
||||
html += `<div class="measurement"><span class="label">Fläche</span><span class="value">${Math.round(room.width_cm * room.height_cm / 10000 * 100) / 100} m²</span></div>`;
|
||||
|
||||
if (ms.length === 0) {
|
||||
el.innerHTML = '<div style="color:#666;font-size:0.85rem;padding:8px">Füge Maße hinzu um Berechnungen zu sehen</div>';
|
||||
return;
|
||||
html += '<div class="measurement"><span class="label">Keine Maße</span><span class="value unknown">—</span></div>';
|
||||
} else {
|
||||
ms.forEach(m => {
|
||||
if (m.length_cm > 0) {
|
||||
html += `<div class="measurement"><span class="label">${m.label} (${sideNames[m.side]||'?'})</span><span class="value">${m.length_cm} cm</span></div>`;
|
||||
} else {
|
||||
html += `<div class="measurement"><span class="label">${m.label} (${sideNames[m.side]||'?'})</span><span class="value unknown">? cm</span></div>`;
|
||||
}
|
||||
});
|
||||
}
|
||||
const known = ms.filter(m => m.length_cm > 0);
|
||||
const unknown = ms.filter(m => !m.length_cm || m.length_cm === 0);
|
||||
let html = '';
|
||||
known.forEach(m => {
|
||||
html += `<div class="measurement"><span class="label">${m.label}</span><span class="value">${m.length_cm} cm</span></div>`;
|
||||
});
|
||||
unknown.forEach(m => {
|
||||
html += `<div class="measurement"><span class="label">${m.label}</span><span class="value unknown">? cm (unbekannt)</span></div>`;
|
||||
});
|
||||
// Try to calculate unknown from known
|
||||
if (known.length > 0 && unknown.length > 0) {
|
||||
const totalKnown = known.reduce((s, m) => s + m.length_cm, 0);
|
||||
const avg = Math.round(totalKnown / known.length);
|
||||
html += `<div class="measurement" style="border-top:1px solid #333;margin-top:4px;padding-top:6px">
|
||||
<span class="label">📐 Geschätzt (∅ ${avg} cm)</span>
|
||||
<span class="value unknown">pro Wand</span>
|
||||
</div>`;
|
||||
|
||||
// Calculate opposite walls if both sides have data
|
||||
const topM = ms.find(m => m.side === 'top' && m.length_cm > 0);
|
||||
const bottomM = ms.find(m => m.side === 'bottom' && m.length_cm > 0);
|
||||
const leftM = ms.find(m => m.side === 'left' && m.length_cm > 0);
|
||||
const rightM = ms.find(m => m.side === 'right' && m.length_cm > 0);
|
||||
|
||||
if (topM && !bottomM) {
|
||||
html += `<div class="measurement"><span class="label">→ Unten (geschätzt)</span><span class="value unknown">~${topM.length_cm} cm</span></div>`;
|
||||
}
|
||||
if (bottomM && !topM) {
|
||||
html += `<div class="measurement"><span class="label">→ Oben (geschätzt)</span><span class="value unknown">~${bottomM.length_cm} cm</span></div>`;
|
||||
}
|
||||
if (leftM && !rightM) {
|
||||
html += `<div class="measurement"><span class="label">→ Rechts (geschätzt)</span><span class="value unknown">~${leftM.length_cm} cm</span></div>`;
|
||||
}
|
||||
if (rightM && !leftM) {
|
||||
html += `<div class="measurement"><span class="label">→ Links (geschätzt)</span><span class="value unknown">~${rightM.length_cm} cm</span></div>`;
|
||||
}
|
||||
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
|
|
@ -399,229 +453,357 @@ function resizeCanvas() {
|
|||
}
|
||||
|
||||
function fitCanvas() {
|
||||
if (STATE.rooms.length === 0) return;
|
||||
// Find bounding box
|
||||
if (STATE.rooms.length === 0) { renderCanvas(); return; }
|
||||
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
||||
STATE.rooms.forEach(r => {
|
||||
if (r.x < minX) minX = r.x;
|
||||
if (r.y < minY) minY = r.y;
|
||||
if (r.x + 400 > maxX) maxX = r.x + 400;
|
||||
if (r.y + 400 > maxY) maxY = r.y + 400;
|
||||
if (r.x + r.width_cm > maxX) maxX = r.x + r.width_cm;
|
||||
if (r.y + r.height_cm > maxY) maxY = r.y + r.height_cm;
|
||||
});
|
||||
if (minX === Infinity) return;
|
||||
const margin = 100;
|
||||
const bw = maxX - minX + margin * 2;
|
||||
const bh = maxY - minY + margin * 2;
|
||||
const margin = 200;
|
||||
const bw = (maxX - minX) + margin * 2;
|
||||
const bh = (maxY - minY) + margin * 2;
|
||||
const scaleX = (canvas.width - 40) / bw;
|
||||
const scaleY = (canvas.height - 40) / bh;
|
||||
STATE.scale = Math.min(scaleX, scaleY, 15);
|
||||
STATE.offsetX = -minX * STATE.scale + margin * STATE.scale / 2 + 20;
|
||||
STATE.offsetY = -minY * STATE.scale + margin * STATE.scale / 2 + 20;
|
||||
STATE.scale = Math.min(scaleX, scaleY, 10);
|
||||
STATE.scale = Math.max(STATE.scale, 1);
|
||||
document.getElementById('scaleInput').value = STATE.scale.toFixed(1);
|
||||
STATE.offsetX = -minX * STATE.scale + (canvas.width - bw * STATE.scale) / 2;
|
||||
STATE.offsetY = -minY * STATE.scale + (canvas.height - bh * STATE.scale) / 2;
|
||||
renderCanvas();
|
||||
}
|
||||
|
||||
function setScale(v) {
|
||||
STATE.scale = Math.max(0.5, Math.min(30, parseFloat(v) || 5));
|
||||
renderCanvas();
|
||||
}
|
||||
|
||||
function zoom(dir) {
|
||||
STATE.scale = Math.max(0.5, Math.min(30, STATE.scale + dir * 0.5));
|
||||
document.getElementById('scaleInput').value = STATE.scale.toFixed(1);
|
||||
renderCanvas();
|
||||
}
|
||||
|
||||
function cmToPx(cm) { return cm * STATE.scale; }
|
||||
function pxToCm(px) { return px / STATE.scale; }
|
||||
|
||||
function getRoomRect(room) {
|
||||
return {
|
||||
x: cmToPx(room.x) + STATE.offsetX,
|
||||
y: cmToPx(room.y) + STATE.offsetY,
|
||||
w: cmToPx(room.width_cm),
|
||||
h: cmToPx(room.height_cm)
|
||||
};
|
||||
}
|
||||
|
||||
function roomsOverlap(a, b) {
|
||||
return !(a.x + a.width_cm <= b.x || b.x + b.width_cm <= a.x || a.y + a.height_cm <= b.y || b.y + b.height_cm <= a.y);
|
||||
}
|
||||
|
||||
function resolveOverlap(room, skipIdx) {
|
||||
let attempts = 0;
|
||||
while (attempts < 20) {
|
||||
let moved = false;
|
||||
for (let i = 0; i < STATE.rooms.length; i++) {
|
||||
if (i === skipIdx) continue;
|
||||
const other = STATE.rooms[i];
|
||||
if (roomsOverlap(room, other)) {
|
||||
// Push room to the right of the other
|
||||
room.x = other.x + other.width_cm + 50;
|
||||
moved = true;
|
||||
}
|
||||
}
|
||||
if (!moved) break;
|
||||
attempts++;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCanvas() {
|
||||
const W = canvas.width, H = canvas.height;
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
|
||||
// Grid
|
||||
const gridToggle = document.getElementById('gridToggle');
|
||||
if (gridToggle && gridToggle.checked) {
|
||||
const gridStep = 50 * STATE.scale; // 50cm grid
|
||||
ctx.strokeStyle = '#1a1a3e';
|
||||
ctx.lineWidth = 0.5;
|
||||
const startX = STATE.offsetX % gridStep;
|
||||
const startY = STATE.offsetY % gridStep;
|
||||
for (let x = startX; x < W; x += gridStep) {
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
|
||||
}
|
||||
for (let y = startY; y < H; y += gridStep) {
|
||||
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
|
||||
if (document.getElementById('gridToggle')?.checked) {
|
||||
const gridStep = cmToPx(50); // 50cm grid
|
||||
if (gridStep > 5) {
|
||||
ctx.strokeStyle = '#1a1a3e';
|
||||
ctx.lineWidth = 0.5;
|
||||
const sx = STATE.offsetX % gridStep;
|
||||
const sy = STATE.offsetY % gridStep;
|
||||
for (let x = sx; x < W; x += gridStep) {
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
|
||||
}
|
||||
for (let y = sy; y < H; y += gridStep) {
|
||||
ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw rooms
|
||||
STATE.rooms.forEach((room, idx) => {
|
||||
const x = room.x * STATE.scale + STATE.offsetX;
|
||||
const y = room.y * STATE.scale + STATE.offsetY;
|
||||
const w = 360 * STATE.scale; // default 360cm
|
||||
const h = 360 * STATE.scale;
|
||||
const r = getRoomRect(room);
|
||||
const isSelected = idx === STATE.selectedRoom;
|
||||
|
||||
// Room background
|
||||
ctx.fillStyle = room.color + '22';
|
||||
ctx.fillRect(x, y, w, h);
|
||||
// Room fill
|
||||
ctx.fillStyle = room.color + (isSelected ? '33' : '15');
|
||||
ctx.fillRect(r.x, r.y, r.w, r.h);
|
||||
|
||||
// Room border
|
||||
ctx.strokeStyle = idx === STATE.selectedRoom ? '#e94560' : room.color;
|
||||
ctx.lineWidth = idx === STATE.selectedRoom ? 3 : 2;
|
||||
ctx.strokeRect(x, y, w, h);
|
||||
ctx.strokeStyle = isSelected ? '#fff' : room.color;
|
||||
ctx.lineWidth = isSelected ? 3 : 2;
|
||||
ctx.strokeRect(r.x, r.y, r.w, r.h);
|
||||
|
||||
// Resize handles if selected
|
||||
if (isSelected) {
|
||||
const hs = 8;
|
||||
ctx.fillStyle = '#e94560';
|
||||
// Corners
|
||||
[[r.x, r.y], [r.x + r.w, r.y], [r.x, r.y + r.h], [r.x + r.w, r.y + r.h]].forEach(([hx, hy]) => {
|
||||
ctx.fillRect(hx - hs/2, hy - hs/2, hs, hs);
|
||||
});
|
||||
// Edges (midpoints)
|
||||
ctx.fillStyle = '#e94560aa';
|
||||
[[r.x + r.w/2, r.y], [r.x + r.w/2, r.y + r.h], [r.x, r.y + r.h/2], [r.x + r.w, r.y + r.h/2]].forEach(([hx, hy]) => {
|
||||
ctx.fillRect(hx - hs/2, hy - hs/2, hs, hs);
|
||||
});
|
||||
}
|
||||
|
||||
// Room label
|
||||
ctx.fillStyle = '#e0e0e0';
|
||||
ctx.font = '14px -apple-system, sans-serif';
|
||||
ctx.font = 'bold 13px -apple-system, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(room.name, x + w/2, y - 8);
|
||||
ctx.fillText(room.name, r.x + r.w/2, r.y + r.h/2 - 6);
|
||||
|
||||
// Known measurements as dimension lines
|
||||
// Dimensions
|
||||
ctx.fillStyle = '#aaa';
|
||||
ctx.font = '11px -apple-system, sans-serif';
|
||||
ctx.fillText(`${room.width_cm}×${room.height_cm}cm`, r.x + r.w/2, r.y + r.h/2 + 12);
|
||||
|
||||
// Wall measurements
|
||||
const ms = room.known_measurements || [];
|
||||
ms.forEach((m, mi) => {
|
||||
ms.forEach(m => {
|
||||
if (!m.length_cm) return;
|
||||
const wallPos = mi % 4; // 0=top, 1=right, 2=bottom, 3=left
|
||||
let lx1, ly1, lx2, ly2;
|
||||
const offset = 20 + mi * 14;
|
||||
switch(wallPos) {
|
||||
case 0: // top
|
||||
lx1 = x; ly1 = y - offset; lx2 = x + w; ly2 = y - offset;
|
||||
let lx1, ly1, lx2, ly2, tx, ty;
|
||||
switch (m.side) {
|
||||
case 'top':
|
||||
lx1 = r.x; ly1 = r.y - 18; lx2 = r.x + r.w; ly2 = r.y - 18;
|
||||
tx = r.x + r.w/2; ty = r.y - 22;
|
||||
break;
|
||||
case 1: // right
|
||||
lx1 = x + w + offset; ly1 = y; lx2 = x + w + offset; ly2 = y + h;
|
||||
case 'bottom':
|
||||
lx1 = r.x; ly1 = r.y + r.h + 18; lx2 = r.x + r.w; ly2 = r.y + r.h + 18;
|
||||
tx = r.x + r.w/2; ty = r.y + r.h + 30;
|
||||
break;
|
||||
case 2: // bottom
|
||||
lx1 = x; ly1 = y + h + offset; lx2 = x + w; ly2 = y + h + offset;
|
||||
case 'left':
|
||||
lx1 = r.x - 18; ly1 = r.y; lx2 = r.x - 18; ly2 = r.y + r.h;
|
||||
tx = r.x - 18; ty = r.y + r.h/2;
|
||||
break;
|
||||
case 3: // left
|
||||
lx1 = x - offset; ly1 = y; lx2 = x - offset; ly2 = y + h;
|
||||
case 'right':
|
||||
lx1 = r.x + r.w + 18; ly1 = r.y; lx2 = r.x + r.w + 18; ly2 = r.y + r.h;
|
||||
tx = r.x + r.w + 22; ty = r.y + r.h/2;
|
||||
break;
|
||||
}
|
||||
ctx.strokeStyle = '#27ae60';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([4, 3]);
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.setLineDash([5, 3]);
|
||||
ctx.beginPath(); ctx.moveTo(lx1, ly1); ctx.lineTo(lx2, ly2); ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
|
||||
// Arrow tips
|
||||
const angle = wallPos <= 1 ? 0 : Math.PI/2;
|
||||
const ax = wallPos <= 1 ? lx1 : lx1;
|
||||
const ay = wallPos <= 1 ? ly1 : ly1;
|
||||
ctx.fillStyle = '#27ae60';
|
||||
// Arrows
|
||||
drawArrow(ctx, lx1, ly1, lx2, ly2);
|
||||
drawArrow(ctx, lx2, ly2, lx1, ly1);
|
||||
|
||||
// Label
|
||||
ctx.font = '11px -apple-system, sans-serif';
|
||||
ctx.fillStyle = '#27ae60';
|
||||
ctx.font = 'bold 11px -apple-system, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(`${m.label}: ${m.length_cm}cm`, (lx1+lx2)/2, ly1 - 4);
|
||||
});
|
||||
|
||||
// Unknown measurements
|
||||
ms.forEach((m, mi) => {
|
||||
if (m.length_cm) return;
|
||||
const wallPos = mi % 4;
|
||||
let lx1, ly1, lx2, ly2;
|
||||
const offset = 20 + mi * 14;
|
||||
switch(wallPos) {
|
||||
case 0: lx1 = x; ly1 = y - offset; lx2 = x + w; ly2 = y - offset; break;
|
||||
case 1: lx1 = x + w + offset; ly1 = y; lx2 = x + w + offset; ly2 = y + h; break;
|
||||
case 2: lx1 = x; ly1 = y + h + offset; lx2 = x + w; ly2 = y + h + offset; break;
|
||||
case 3: lx1 = x - offset; ly1 = y; lx2 = x - offset; ly2 = y + h; break;
|
||||
if (m.side === 'left' || m.side === 'right') {
|
||||
ctx.save();
|
||||
ctx.translate(tx, ty);
|
||||
if (m.side === 'left') ctx.rotate(-Math.PI/2);
|
||||
else ctx.rotate(Math.PI/2);
|
||||
ctx.fillText(`${m.label}: ${m.length_cm}cm`, 0, 4);
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.fillText(`${m.label}: ${m.length_cm}cm`, tx, ty);
|
||||
}
|
||||
ctx.strokeStyle = '#e67e22';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([4, 3]);
|
||||
ctx.beginPath(); ctx.moveTo(lx1, ly1); ctx.lineTo(lx2, ly2); ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = '#e67e22';
|
||||
ctx.font = '11px -apple-system, sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(`${m.label}: ? cm`, (lx1+lx2)/2, ly1 - 4);
|
||||
});
|
||||
});
|
||||
|
||||
// Info
|
||||
const room = STATE.rooms[STATE.selectedRoom];
|
||||
document.getElementById('canvasInfo').textContent = room
|
||||
? `${room.name} · ${(room.known_measurements||[]).filter(m=>m.length_cm>0).length} bekannte Maße`
|
||||
: 'Kein Raum ausgewählt';
|
||||
? `${room.name} · ${room.width_cm}×${room.height_cm}cm · ${Math.round(room.width_cm*room.height_cm/10000*100)/100}m²`
|
||||
: 'Kein Raum ausgewählt – Klicke einen Raum an';
|
||||
}
|
||||
|
||||
// ===== CANVAS EVENTS =====
|
||||
let isPanning = false, panStart = null;
|
||||
function drawArrow(ctx, x1, y1, x2, y2) {
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
const size = 6;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x1 + size * Math.cos(angle - 0.4), y1 + size * Math.sin(angle - 0.4));
|
||||
ctx.lineTo(x1 + size * Math.cos(angle + 0.4), y1 + size * Math.sin(angle + 0.4));
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', e => {
|
||||
// ===== CANVAS INTERACTION =====
|
||||
let isPanning = false;
|
||||
let dragRoomIdx = -1;
|
||||
let dragOffset = { x: 0, y: 0 };
|
||||
let isResizing = false;
|
||||
let resizeHandle = null;
|
||||
|
||||
function getMousePos(e) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = e.clientX - rect.left;
|
||||
const my = e.clientY - rect.top;
|
||||
const t = e.touches ? e.touches[0] : e;
|
||||
return { x: t.clientX - rect.left, y: t.clientY - rect.top };
|
||||
}
|
||||
|
||||
// Check if clicking on a room
|
||||
function hitTestRoom(mx, my) {
|
||||
for (let i = STATE.rooms.length - 1; i >= 0; i--) {
|
||||
const r = STATE.rooms[i];
|
||||
const x = r.x * STATE.scale + STATE.offsetX;
|
||||
const y = r.y * STATE.scale + STATE.offsetY;
|
||||
const w = 360 * STATE.scale;
|
||||
const h = 360 * STATE.scale;
|
||||
if (mx >= x && mx <= x + w && my >= y && my <= y + h) {
|
||||
STATE.selectedRoom = i;
|
||||
STATE.currentRoomIdx = i;
|
||||
renderRoomList();
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
renderCanvas();
|
||||
return;
|
||||
}
|
||||
const r = getRoomRect(STATE.rooms[i]);
|
||||
if (mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h) return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function hitTestHandle(mx, my) {
|
||||
if (STATE.selectedRoom < 0) return null;
|
||||
const room = STATE.rooms[STATE.selectedRoom];
|
||||
const r = getRoomRect(room);
|
||||
const hs = 10;
|
||||
const handles = {
|
||||
'nw': [r.x, r.y], 'ne': [r.x + r.w, r.y], 'sw': [r.x, r.y + r.h], 'se': [r.x + r.w, r.y + r.h],
|
||||
'n': [r.x + r.w/2, r.y], 's': [r.x + r.w/2, r.y + r.h],
|
||||
'w': [r.x, r.y + r.h/2], 'e': [r.x + r.w, r.y + r.h/2]
|
||||
};
|
||||
for (const [name, [hx, hy]] of Object.entries(handles)) {
|
||||
if (Math.abs(mx - hx) < hs && Math.abs(my - hy) < hs) return name;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function onDown(e) {
|
||||
e.preventDefault();
|
||||
const { x: mx, y: my } = getMousePos(e);
|
||||
|
||||
// Check resize handles first
|
||||
const handle = hitTestHandle(mx, my);
|
||||
if (handle) {
|
||||
isResizing = true;
|
||||
resizeHandle = handle;
|
||||
canvas.classList.add('grabbing');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check room hit
|
||||
const idx = hitTestRoom(mx, my);
|
||||
if (idx >= 0) {
|
||||
STATE.selectedRoom = idx;
|
||||
STATE.currentRoomIdx = idx;
|
||||
const r = getRoomRect(STATE.rooms[idx]);
|
||||
dragRoomIdx = idx;
|
||||
dragOffset = { x: mx - r.x, y: my - r.y };
|
||||
canvas.classList.add('grabbing');
|
||||
renderRoomList();
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
renderCanvas();
|
||||
return;
|
||||
}
|
||||
|
||||
// Pan canvas
|
||||
isPanning = true;
|
||||
panStart = { x: e.clientX, y: e.clientY, ox: STATE.offsetX, oy: STATE.offsetY };
|
||||
});
|
||||
const p = getMousePos(e);
|
||||
dragStart = { x: p.x, y: p.y, ox: STATE.offsetX, oy: STATE.offsetY };
|
||||
canvas.classList.add('grabbing');
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousemove', e => {
|
||||
function onMove(e) {
|
||||
if (isPanning) {
|
||||
STATE.offsetX = panStart.ox + (e.clientX - panStart.x);
|
||||
STATE.offsetY = panStart.oy + (e.clientY - panStart.y);
|
||||
const p = getMousePos(e);
|
||||
STATE.offsetX = dragStart.ox + (p.x - dragStart.x);
|
||||
STATE.offsetY = dragStart.oy + (p.y - dragStart.y);
|
||||
renderCanvas();
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('mouseup', () => { isPanning = false; });
|
||||
canvas.addEventListener('mouseleave', () => { isPanning = false; });
|
||||
if (dragRoomIdx >= 0) {
|
||||
const p = getMousePos(e);
|
||||
const room = STATE.rooms[dragRoomIdx];
|
||||
const newX = pxToCm(p.x - dragOffset.x - STATE.offsetX);
|
||||
const newY = pxToCm(p.y - dragOffset.y - STATE.offsetY);
|
||||
// Snap to 10cm grid
|
||||
room.x = Math.round(newX / 10) * 10;
|
||||
room.y = Math.round(newY / 10) * 10;
|
||||
renderCanvas();
|
||||
return;
|
||||
}
|
||||
|
||||
// Touch support
|
||||
canvas.addEventListener('touchstart', e => {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mx = touch.clientX - rect.left;
|
||||
const my = touch.clientY - rect.top;
|
||||
if (isResizing && STATE.selectedRoom >= 0) {
|
||||
const p = getMousePos(e);
|
||||
const room = STATE.rooms[STATE.selectedRoom];
|
||||
const mx_cm = pxToCm(p.x - STATE.offsetX);
|
||||
const my_cm = pxToCm(p.y - STATE.offsetY);
|
||||
|
||||
for (let i = STATE.rooms.length - 1; i >= 0; i--) {
|
||||
const r = STATE.rooms[i];
|
||||
const x = r.x * STATE.scale + STATE.offsetX;
|
||||
const y = r.y * STATE.scale + STATE.offsetY;
|
||||
const w = 360 * STATE.scale;
|
||||
const h = 360 * STATE.scale;
|
||||
if (mx >= x && mx <= x + w && my >= y && my <= y + h) {
|
||||
STATE.selectedRoom = i;
|
||||
STATE.currentRoomIdx = i;
|
||||
renderRoomList();
|
||||
renderWallInputs();
|
||||
renderMeasurements();
|
||||
renderCanvas();
|
||||
return;
|
||||
if (resizeHandle.includes('e')) room.width_cm = Math.max(50, Math.round((mx_cm - room.x) / 10) * 10);
|
||||
if (resizeHandle.includes('w')) {
|
||||
const newW = Math.max(50, room.x + room.width_cm - mx_cm);
|
||||
room.x = room.x + room.width_cm - newW;
|
||||
room.width_cm = newW;
|
||||
}
|
||||
}
|
||||
isPanning = true;
|
||||
panStart = { x: touch.clientX, y: touch.clientY, ox: STATE.offsetX, oy: STATE.offsetY };
|
||||
}, { passive: false });
|
||||
if (resizeHandle.includes('s')) room.height_cm = Math.max(50, Math.round((my_cm - room.y) / 10) * 10);
|
||||
if (resizeHandle.includes('n')) {
|
||||
const newH = Math.max(50, room.y + room.height_cm - my_cm);
|
||||
room.y = room.y + room.height_cm - newH;
|
||||
room.height_cm = newH;
|
||||
}
|
||||
// Snap minimum
|
||||
room.width_cm = Math.max(50, room.width_cm);
|
||||
room.height_cm = Math.max(50, room.height_cm);
|
||||
|
||||
canvas.addEventListener('touchmove', e => {
|
||||
e.preventDefault();
|
||||
if (isPanning && e.touches.length === 1) {
|
||||
const touch = e.touches[0];
|
||||
STATE.offsetX = panStart.ox + (touch.clientX - panStart.x);
|
||||
STATE.offsetY = panStart.oy + (touch.clientY - panStart.y);
|
||||
renderCanvas();
|
||||
renderRoomList();
|
||||
renderMeasurements();
|
||||
return;
|
||||
}
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
canvas.addEventListener('touchend', () => { isPanning = false; });
|
||||
function onUp() {
|
||||
if (dragRoomIdx >= 0 || isResizing) {
|
||||
saveCurrentProject();
|
||||
}
|
||||
isPanning = false;
|
||||
dragRoomIdx = -1;
|
||||
isResizing = false;
|
||||
resizeHandle = null;
|
||||
canvas.classList.remove('grabbing');
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', onDown);
|
||||
canvas.addEventListener('mousemove', onMove);
|
||||
canvas.addEventListener('mouseup', onUp);
|
||||
canvas.addEventListener('mouseleave', onUp);
|
||||
|
||||
canvas.addEventListener('touchstart', onDown, { passive: false });
|
||||
canvas.addEventListener('touchmove', onMove, { passive: false });
|
||||
canvas.addEventListener('touchend', onUp);
|
||||
|
||||
// ===== MODALS =====
|
||||
function showNewProjectModal() { document.getElementById('newProjectModal').classList.add('show'); }
|
||||
function closeModal(id) { document.getElementById(id).classList.remove('show'); }
|
||||
|
||||
// ===== SAVE =====
|
||||
async function saveCurrentProject() {
|
||||
let saveTimeout = null;
|
||||
function saveCurrentProject() {
|
||||
if (!STATE.currentProject) return;
|
||||
STATE.currentProject.rooms = STATE.rooms;
|
||||
await api('PUT', '/projects/' + STATE.currentProject.id, { rooms: STATE.rooms });
|
||||
clearTimeout(saveTimeout);
|
||||
saveTimeout = setTimeout(async () => {
|
||||
await api('PUT', '/projects/' + STATE.currentProject.id, { rooms: STATE.rooms });
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// ===== INIT =====
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue