diff --git a/templates/index.html b/templates/index.html
index 7f686f9..a79d136 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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; }
+
@@ -101,11 +108,11 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
🏠 Räume
- 📏 Bekannte Maße
+ 📏 Wandmaße (cm)
-
+
- 📐 Berechnete Maße
+ 📐 Raum-Info
@@ -113,18 +120,15 @@ header h1 span { color: #888; font-weight: normal; font-size: 0.9rem; }
@@ -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 = '📐
Noch keine Projekte
Erstelle ein neues Projekt um zu starten
Noch keine Räume. Klick auf "+ Raum"
';
+ el.innerHTML = 'Noch keine Räume
';
return;
}
el.innerHTML = STATE.rooms.map((r, i) => `
@@ -269,7 +284,7 @@ function renderRoomList() {
${r.name}
- ${r.known_measurements ? r.known_measurements.length : 0} Maße
+ · ${r.width_cm}×${r.height_cm}cm
@@ -304,13 +319,20 @@ function renderWallInputs() {
if (!room) { el.innerHTML = ''; return; }
const ms = room.known_measurements || [];
if (ms.length === 0) {
- el.innerHTML = 'Noch keine Maße. Füge Wandmaße hinzu!
';
+ el.innerHTML = 'Füge Wandmaße hinzu!
';
return;
}
+ const sideNames = { top: 'Oben', right: 'Rechts', bottom: 'Unten', left: 'Links' };
el.innerHTML = ms.map((m, i) => `
-
-
+
+
+
cm
@@ -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 = `Raumgröße${room.width_cm}×${room.height_cm} cm
`;
+ html += `Fläche${Math.round(room.width_cm * room.height_cm / 10000 * 100) / 100} m²
`;
+
if (ms.length === 0) {
- el.innerHTML = 'Füge Maße hinzu um Berechnungen zu sehen
';
- return;
+ html += 'Keine Maße—
';
+ } else {
+ ms.forEach(m => {
+ if (m.length_cm > 0) {
+ html += `${m.label} (${sideNames[m.side]||'?'})${m.length_cm} cm
`;
+ } else {
+ html += `${m.label} (${sideNames[m.side]||'?'})? cm
`;
+ }
+ });
}
- 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 += `${m.label}${m.length_cm} cm
`;
- });
- unknown.forEach(m => {
- html += `${m.label}? cm (unbekannt)
`;
- });
- // 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 += `
- 📐 Geschätzt (∅ ${avg} cm)
- pro Wand
-
`;
+
+ // 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 += `→ Unten (geschätzt)~${topM.length_cm} cm
`;
}
+ if (bottomM && !topM) {
+ html += `→ Oben (geschätzt)~${bottomM.length_cm} cm
`;
+ }
+ if (leftM && !rightM) {
+ html += `→ Rechts (geschätzt)~${leftM.length_cm} cm
`;
+ }
+ if (rightM && !leftM) {
+ html += `→ Links (geschätzt)~${rightM.length_cm} cm
`;
+ }
+
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 =====
@@ -632,4 +814,4 @@ document.addEventListener('DOMContentLoaded', () => {
});
-