House Plan Designer

\n View Source\n

\n\n

\n \n

Tools

\n \n \n

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n

\n\n

Properties

Select an element to edit properties

\n\n

Furniture Library

\n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n

Room Templates

\n \n \n \n \n

\n \n

Roof Styles

\n \n \n \n \n \n \n

\n\n

\n \n \n \n

\n\n \n

\n Grid Size:\n \n

\n Scale:\n \n

\n Unit:\n \n

\n \n

Position: 0, 0

\n Elements: 0\n

\n\n \n

Saved Plans

No saved plans yet

\n\n \n\n \n\n",[],[267,269],"3f966792-33bf-11f0-8053-9e149126039e","app.js","da917d2e-33bd-11f0-a802-9e149126039e",24,["D",1747555694699],"// House Plan Designer - Frontend Application\n\n// Canvas setup\nconst canvas = document.getElementById('house-plan-canvas');\nconst ctx = canvas.getContext('2d');\nconst canvasContainer = document.querySelector('.canvas-container');\nconst cursorPositionDisplay = document.getElementById('cursor-position');\nconst elementCountDisplay = document.getElementById('element-count');\nconst measurementDisplay = document.getElementById('measurement-display');\n\n// Set initial canvas size\nfunction resizeCanvas() {\n canvas.width = canvasContainer.clientWidth;\n canvas.height = canvasContainer.clientHeight;\n drawGrid();\n drawElements();\n}\n\n// Initialize the application\nfunction init() {\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n setupEventListeners();\n loadSavedPlans();\n loadRoomTemplates();\n updateUndoRedoButtons();\n}\n\n// State variables\nlet currentTool = 'wall';\nlet currentFurnitureType = 'bed';\nlet currentRoomType = 'bedroom';\nlet currentRoofStyle = 'gable';\nlet isDrawing = false;\nlet elements = [];\nlet selectedElement = null;\nlet startPoint = { x: 0, y: 0 };\nlet gridSize = 20;\nlet scale = 1;\nlet unit = 'pixels';\nlet dragOffset = { x: 0, y: 0 };\nlet isDragging = false;\nlet isMeasuring = false;\nlet measureStart = null;\nlet measureEnd = null;\n\n// History for undo/redo\nlet history = [[]];\nlet historyIndex = 0;\nlet maxHistorySteps = 30;\n\n// Tool buttons\nconst toolButtons = document.querySelectorAll('.tool-btn');\nconst furnitureItems = document.querySelectorAll('.furniture-item');\nconst templateItems = document.querySelectorAll('.template-item');\nconst roofStyleItems = document.querySelectorAll('.roof-style');\nconst gridSizeSelect = document.getElementById('grid-size');\nconst scaleSelect = document.getElementById('scale');\nconst unitSelect = document.getElementById('unit');\nconst saveButton = document.getElementById('save-plan');\nconst exportButton = document.getElementById('export-image');\nconst clearAllButton = document.getElementById('clear-all');\nconst planNameInput = document.getElementById('plan-name');\nconst undoButton = document.getElementById('undo-btn');\nconst redoButton = document.getElementById('redo-btn');\n\n// Setup event listeners\nfunction setupEventListeners() {\n // Tool selection\n toolButtons.forEach(button => {\n button.addEventListener('click', () => {\n toolButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n currentTool = button.id.replace('-tool', '');\n selectedElement = null;\n updatePropertiesPanel();\n \n // Reset measuring mode\n if (currentTool !== 'measure') {\n isMeasuring = false;\n measureStart = null;\n measureEnd = null;\n measurementDisplay.classList.add('hidden');\n }\n });\n });\n\n // Furniture selection\n furnitureItems.forEach(item => {\n item.addEventListener('click', () => {\n if (currentTool !== 'furniture') {\n toolButtons.forEach(btn => btn.classList.remove('active'));\n document.getElementById('furniture-tool').classList.add('active');\n currentTool = 'furniture';\n }\n \n furnitureItems.forEach(i => i.classList.remove('active'));\n item.classList.add('active');\n currentFurnitureType = item.dataset.type;\n });\n });\n \n // Room template selection\n templateItems.forEach(item => {\n item.addEventListener('click', () => {\n templateItems.forEach(i => i.classList.remove('active'));\n item.classList.add('active');\n currentRoomType = item.dataset.type;\n \n if (currentTool === 'room') {\n // If room tool is active, update the current room type\n if (selectedElement && selectedElement.type === 'room') {\n selectedElement.properties.roomType = currentRoomType;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n }\n }\n });\n });\n \n // Roof style selection\n roofStyleItems.forEach(item => {\n item.addEventListener('click', () => {\n roofStyleItems.forEach(i => i.classList.remove('active'));\n item.classList.add('active');\n currentRoofStyle = item.dataset.type;\n \n if (currentTool === 'roof') {\n // If roof tool is active, update the current roof style\n if (selectedElement && selectedElement.type === 'roof') {\n selectedElement.properties.roofStyle = currentRoofStyle;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n }\n }\n });\n });\n\n // Grid size change\n gridSizeSelect.addEventListener('change', () => {\n gridSize = parseInt(gridSizeSelect.value);\n drawGrid();\n drawElements();\n });\n\n // Scale change\n scaleSelect.addEventListener('change', () => {\n scale = parseFloat(scaleSelect.value);\n drawGrid();\n drawElements();\n });\n \n // Unit change\n unitSelect.addEventListener('change', () => {\n unit = unitSelect.value;\n drawGrid();\n drawElements();\n });\n\n // Canvas mouse events\n canvas.addEventListener('mousedown', handleMouseDown);\n canvas.addEventListener('mousemove', handleMouseMove);\n canvas.addEventListener('mouseup', handleMouseUp);\n canvas.addEventListener('click', handleClick);\n \n // Track cursor position\n canvas.addEventListener('mousemove', updateCursorPosition);\n \n // Undo/Redo buttons\n undoButton.addEventListener('click', undo);\n redoButton.addEventListener('click', redo);\n\n // Save plan\n saveButton.addEventListener('click', savePlan);\n \n // Export as image\n exportButton.addEventListener('click', exportAsImage);\n \n // Clear all\n clearAllButton.addEventListener('click', () => {\n if (confirm('Are you sure you want to clear all elements?')) {\n saveToHistory(); // Save current state before clearing\n elements = [];\n selectedElement = null;\n updatePropertiesPanel();\n updateElementCount();\n drawGrid();\n drawElements();\n }\n });\n\n // Set wall tool as default active\n document.getElementById('wall-tool').classList.add('active');\n \n // Keyboard shortcuts\n document.addEventListener('keydown', handleKeyDown);\n}\n\n// Handle mouse down on canvas\nfunction handleMouseDown(e) {\n const rect = canvas.getBoundingClientRect();\n const x = Math.round((e.clientX - rect.left) / gridSize) * gridSize;\n const y = Math.round((e.clientY - rect.top) / gridSize) * gridSize;\n \n startPoint = { x, y };\n \n if (currentTool === 'select') {\n // Check if clicked on an element\n const clickedElement = findElementAt(x, y);\n if (clickedElement) {\n selectedElement = clickedElement;\n isDragging = true;\n dragOffset = {\n x: x - clickedElement.points[0].x,\n y: y - clickedElement.points[0].y\n };\n updatePropertiesPanel();\n } else {\n selectedElement = null;\n updatePropertiesPanel();\n }\n } else if (currentTool === 'delete') {\n const clickedElement = findElementAt(x, y);\n if (clickedElement) {\n elements = elements.filter(el => el.id !== clickedElement.id);\n selectedElement = null;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n }\n } else {\n isDrawing = true;\n }\n}\n\n// Handle mouse move on canvas\nfunction handleMouseMove(e) {\n const rect = canvas.getBoundingClientRect();\n const x = Math.round((e.clientX - rect.left) / gridSize) * gridSize;\n const y = Math.round((e.clientY - rect.top) / gridSize) * gridSize;\n \n if (isDragging && selectedElement) {\n // Move the element\n const dx = x - dragOffset.x - selectedElement.points[0].x;\n const dy = y - dragOffset.y - selectedElement.points[0].y;\n \n // Update all points\n selectedElement.points = selectedElement.points.map(point => ({\n x: point.x + dx,\n y: point.y + dy\n }));\n \n drawGrid();\n drawElements();\n } else if (isDrawing) {\n drawGrid();\n drawElements();\n \n // Preview the element being drawn\n ctx.strokeStyle = '#0066cc';\n ctx.lineWidth = 2;\n \n if (currentTool === 'wall') {\n ctx.beginPath();\n ctx.moveTo(startPoint.x, startPoint.y);\n ctx.lineTo(x, y);\n ctx.stroke();\n } else if (currentTool === 'door') {\n drawDoor(startPoint.x, startPoint.y, x, y, true);\n } else if (currentTool === 'window') {\n drawWindow(startPoint.x, startPoint.y, x, y, true);\n }\n }\n}\n\n// Handle mouse up on canvas\nfunction handleMouseUp(e) {\n if (!isDrawing && !isDragging) return;\n \n const rect = canvas.getBoundingClientRect();\n const x = Math.round((e.clientX - rect.left) / gridSize) * gridSize;\n const y = Math.round((e.clientY - rect.top) / gridSize) * gridSize;\n \n if (isDragging) {\n isDragging = false;\n } else if (isDrawing) {\n isDrawing = false;\n \n // Don't create elements if start and end points are the same\n if (startPoint.x === x && startPoint.y === y && \n currentTool !== 'text' && currentTool !== 'furniture') {\n return;\n }\n \n // Create new element\n const newElement = {\n id: Date.now().toString(),\n type: currentTool,\n points: [\n { x: startPoint.x, y: startPoint.y },\n { x, y }\n ],\n properties: {}\n };\n \n // Add specific properties based on element type\n if (currentTool === 'door' || currentTool === 'window') {\n newElement.properties.width = Math.abs(x - startPoint.x) || 60;\n newElement.properties.height = Math.abs(y - startPoint.y) || 30;\n } else if (currentTool === 'furniture') {\n newElement.properties.furnitureType = currentFurnitureType;\n newElement.properties.width = 60;\n newElement.properties.height = 60;\n newElement.properties.rotation = 0;\n } else if (currentTool === 'text') {\n newElement.properties.text = prompt('Enter text:', 'Text');\n if (!newElement.properties.text) return; // Cancel if no text\n }\n \n elements.push(newElement);\n selectedElement = newElement;\n updatePropertiesPanel();\n }\n \n drawGrid();\n drawElements();\n}\n\n// Handle click on canvas (for placing furniture and text)\nfunction handleClick(e) {\n if (currentTool !== 'furniture' && currentTool !== 'text') return;\n \n const rect = canvas.getBoundingClientRect();\n const x = Math.round((e.clientX - rect.left) / gridSize) * gridSize;\n const y = Math.round((e.clientY - rect.top) / gridSize) * gridSize;\n \n if (currentTool === 'furniture') {\n const newElement = {\n id: Date.now().toString(),\n type: 'furniture',\n points: [{ x, y }],\n properties: {\n furnitureType: currentFurnitureType,\n width: 60,\n height: 60,\n rotation: 0\n }\n };\n elements.push(newElement);\n selectedElement = newElement;\n } else if (currentTool === 'text') {\n const text = prompt('Enter text:', 'Text');\n if (!text) return;\n \n const newElement = {\n id: Date.now().toString(),\n type: 'text',\n points: [{ x, y }],\n properties: {\n text: text\n }\n };\n elements.push(newElement);\n selectedElement = newElement;\n }\n \n updatePropertiesPanel();\n drawGrid();\n drawElements();\n}\n\n// Find element at coordinates\nfunction findElementAt(x, y) {\n // Search in reverse order (top elements first)\n for (let i = elements.length - 1; i >= 0; i--) {\n const element = elements[i];\n \n if (element.type === 'wall') {\n // Check if point is near the wall line\n const p1 = element.points[0];\n const p2 = element.points[1];\n const distance = distanceToLine(x, y, p1.x, p1.y, p2.x, p2.y);\n if (distance < 10) return element;\n } else if (element.type === 'door' || element.type === 'window') {\n // Check if point is inside the door/window rectangle\n const p1 = element.points[0];\n const width = element.properties.width || 60;\n const height = element.properties.height || 30;\n if (x >= p1.x && x <= p1.x + width && y >= p1.y && y <= p1.y + height) {\n return element;\n }\n } else if (element.type === 'furniture') {\n // Check if point is inside the furniture\n const p = element.points[0];\n const width = element.properties.width || 60;\n const height = element.properties.height || 60;\n if (x >= p.x && x <= p.x + width && y >= p.y && y <= p.y + height) {\n return element;\n }\n } else if (element.type === 'text') {\n // Check if point is near the text\n const p = element.points[0];\n if (Math.abs(x - p.x) < 50 && Math.abs(y - p.y) < 20) {\n return element;\n }\n }\n }\n return null;\n}\n\n// Calculate distance from point to line\nfunction distanceToLine(x, y, x1, y1, x2, y2) {\n const A = x - x1;\n const B = y - y1;\n const C = x2 - x1;\n const D = y2 - y1;\n \n const dot = A * C + B * D;\n const len_sq = C * C + D * D;\n let param = -1;\n \n if (len_sq !== 0) param = dot / len_sq;\n \n let xx, yy;\n \n if (param < 0) {\n xx = x1;\n yy = y1;\n } else if (param > 1) {\n xx = x2;\n yy = y2;\n } else {\n xx = x1 + param * C;\n yy = y1 + param * D;\n }\n \n const dx = x - xx;\n const dy = y - yy;\n \n return Math.sqrt(dx * dx + dy * dy);\n}\n\n// Draw grid\nfunction drawGrid() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Set grid size based on user selection\n canvasContainer.style.backgroundSize = `${gridSize}px ${gridSize}px`;\n}\n\n// Draw all elements\nfunction drawElements() {\n elements.forEach((element, index) => {\n const isSelected = selectedElement && selectedElement.id === element.id;\n \n if (element.type === 'wall') {\n drawWall(element.points[0].x, element.points[0].y, \n element.points[1].x, element.points[1].y, isSelected);\n } else if (element.type === 'door') {\n drawDoor(element.points[0].x, element.points[0].y, \n element.points[0].x + (element.properties.width || 60), \n element.points[0].y + (element.properties.height || 30), \n isSelected);\n } else if (element.type === 'window') {\n drawWindow(element.points[0].x, element.points[0].y, \n element.points[0].x + (element.properties.width || 60), \n element.points[0].y + (element.properties.height || 30), \n isSelected);\n } else if (element.type === 'furniture') {\n drawFurniture(element.points[0].x, element.points[0].y, \n element.properties.furnitureType,\n element.properties.width || 60,\n element.properties.height || 60,\n element.properties.rotation || 0,\n isSelected);\n } else if (element.type === 'text') {\n drawText(element.points[0].x, element.points[0].y, \n element.properties.text || 'Text', isSelected);\n } else if (element.type === 'room') {\n drawRoom(element.points, element.properties.roomType || 'custom', isSelected);\n } else if (element.type === 'roof') {\n drawRoof(\n element.points,\n element.properties.roofStyle || 'gable',\n element.properties.pitch || 30,\n element.properties.overhang || 20,\n element.properties.ridgeHeight || 100,\n isSelected\n );\n }\n });\n \n // Update element count\n updateElementCount();\n}\n\n// Draw wall\nfunction drawWall(x1, y1, x2, y2, isSelected) {\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y2);\n ctx.strokeStyle = isSelected ? '#ff6600' : '#333333';\n ctx.lineWidth = 6;\n ctx.stroke();\n \n // Draw endpoints\n if (isSelected) {\n ctx.fillStyle = '#ff6600';\n ctx.beginPath();\n ctx.arc(x1, y1, 5, 0, Math.PI * 2);\n ctx.fill();\n ctx.beginPath();\n ctx.arc(x2, y2, 5, 0, Math.PI * 2);\n ctx.fill();\n }\n}\n\n// Draw door\nfunction drawDoor(x1, y1, x2, y2, isSelected) {\n const width = Math.abs(x2 - x1) || 60;\n const height = Math.abs(y2 - y1) || 30;\n \n ctx.strokeStyle = isSelected ? '#ff6600' : '#996633';\n ctx.fillStyle = '#e6ccb3';\n ctx.lineWidth = 2;\n \n // Door frame\n ctx.beginPath();\n ctx.rect(x1, y1, width, height);\n ctx.fill();\n ctx.stroke();\n \n // Door swing arc\n ctx.beginPath();\n ctx.arc(x1, y1 + height, width, Math.PI * 1.5, Math.PI * 2);\n ctx.stroke();\n \n // Selection highlight\n if (isSelected) {\n ctx.strokeStyle = '#ff6600';\n ctx.lineWidth = 2;\n ctx.setLineDash([5, 5]);\n ctx.strokeRect(x1 - 2, y1 - 2, width + 4, height + 4);\n ctx.setLineDash([]);\n }\n}\n\n// Draw window\nfunction drawWindow(x1, y1, x2, y2, isSelected) {\n const width = Math.abs(x2 - x1) || 60;\n const height = Math.abs(y2 - y1) || 30;\n \n ctx.strokeStyle = isSelected ? '#ff6600' : '#3399ff';\n ctx.fillStyle = '#d9f0ff';\n ctx.lineWidth = 2;\n \n // Window frame\n ctx.beginPath();\n ctx.rect(x1, y1, width, height);\n ctx.fill();\n ctx.stroke();\n \n // Window panes\n ctx.beginPath();\n ctx.moveTo(x1 + width/2, y1);\n ctx.lineTo(x1 + width/2, y1 + height);\n ctx.moveTo(x1, y1 + height/2);\n ctx.lineTo(x1 + width, y1 + height/2);\n ctx.stroke();\n \n // Selection highlight\n if (isSelected) {\n ctx.strokeStyle = '#ff6600';\n ctx.lineWidth = 2;\n ctx.setLineDash([5, 5]);\n ctx.strokeRect(x1 - 2, y1 - 2, width + 4, height + 4);\n ctx.setLineDash([]);\n }\n}\n\n// Draw furniture\nfunction drawFurniture(x, y, type, width, height, rotation, isSelected) {\n ctx.save();\n \n // Translate to center of furniture for rotation\n ctx.translate(x + width/2, y + height/2);\n ctx.rotate(rotation * Math.PI / 180);\n \n // Draw furniture based on type\n ctx.strokeStyle = isSelected ? '#ff6600' : '#666666';\n ctx.fillStyle = '#cccccc';\n ctx.lineWidth = 2;\n \n // Draw the furniture item\n const halfWidth = width / 2;\n const halfHeight = height / 2;\n \n switch (type) {\n case 'bed':\n // Bed frame\n ctx.fillStyle = '#d9b38c';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Pillow\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(-halfWidth + 5, -halfHeight + 5, width - 10, height / 3);\n ctx.strokeRect(-halfWidth + 5, -halfHeight + 5, width - 10, height / 3);\n break;\n \n case 'sofa':\n // Sofa base\n ctx.fillStyle = '#8c9bd9';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Sofa back\n ctx.fillRect(-halfWidth, -halfHeight, width, height / 3);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height / 3);\n \n // Sofa arms\n ctx.fillRect(-halfWidth, -halfHeight, width / 6, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width / 6, height);\n ctx.fillRect(halfWidth - width / 6, -halfHeight, width / 6, height);\n ctx.strokeRect(halfWidth - width / 6, -halfHeight, width / 6, height);\n break;\n \n case 'table':\n // Table top\n ctx.fillStyle = '#a67c52';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Table legs\n const legWidth = width / 10;\n ctx.fillStyle = '#8c6239';\n ctx.fillRect(-halfWidth + legWidth, -halfHeight + legWidth, legWidth, height - legWidth * 2);\n ctx.fillRect(halfWidth - legWidth * 2, -halfHeight + legWidth, legWidth, height - legWidth * 2);\n ctx.fillRect(-halfWidth + legWidth, halfHeight - legWidth * 2, width - legWidth * 2, legWidth);\n ctx.fillRect(-halfWidth + legWidth, -halfHeight + legWidth, width - legWidth * 2, legWidth);\n break;\n \n case 'chair':\n // Chair seat\n ctx.fillStyle = '#a67c52';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Chair back\n ctx.fillRect(-halfWidth, -halfHeight, width, height / 3);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height / 3);\n break;\n \n case 'sink':\n // Sink cabinet\n ctx.fillStyle = '#e6e6e6';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Sink basin\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.ellipse(0, 0, width / 3, height / 3, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n \n // Faucet\n ctx.beginPath();\n ctx.moveTo(0, -height / 4);\n ctx.lineTo(0, -height / 2.5);\n ctx.stroke();\n break;\n \n case 'toilet':\n // Toilet base\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.ellipse(0, halfHeight / 2, width / 2.5, height / 3, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n \n // Toilet tank\n ctx.fillRect(-width / 3, -halfHeight, width / 1.5, height / 1.5);\n ctx.strokeRect(-width / 3, -halfHeight, width / 1.5, height / 1.5);\n break;\n \n case 'shower':\n // Shower base\n ctx.fillStyle = '#e6e6e6';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Shower head\n ctx.beginPath();\n ctx.arc(0, -halfHeight + 10, 5, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n \n // Shower door\n ctx.setLineDash([5, 5]);\n ctx.beginPath();\n ctx.moveTo(halfWidth, -halfHeight);\n ctx.lineTo(halfWidth, halfHeight);\n ctx.stroke();\n ctx.setLineDash([]);\n break;\n \n case 'cabinet':\n // Cabinet body\n ctx.fillStyle = '#d9b38c';\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n \n // Cabinet doors\n ctx.beginPath();\n ctx.moveTo(0, -halfHeight);\n ctx.lineTo(0, halfHeight);\n ctx.stroke();\n \n // Cabinet handles\n ctx.fillStyle = '#666666';\n ctx.fillRect(-halfWidth / 4, 0, 5, 5);\n ctx.fillRect(halfWidth / 4, 0, 5, 5);\n break;\n \n default:\n // Generic furniture\n ctx.fillRect(-halfWidth, -halfHeight, width, height);\n ctx.strokeRect(-halfWidth, -halfHeight, width, height);\n }\n \n // Selection highlight\n if (isSelected) {\n ctx.strokeStyle = '#ff6600';\n ctx.lineWidth = 2;\n ctx.setLineDash([5, 5]);\n ctx.strokeRect(-halfWidth - 2, -halfHeight - 2, width + 4, height + 4);\n ctx.setLineDash([]);\n \n // Rotation handle\n ctx.fillStyle = '#ff6600';\n ctx.beginPath();\n ctx.arc(0, -halfHeight - 15, 5, 0, Math.PI * 2);\n ctx.fill();\n }\n \n ctx.restore();\n}\n\n// Draw text\nfunction drawText(x, y, text, isSelected) {\n ctx.font = '14px Arial';\n ctx.fillStyle = isSelected ? '#ff6600' : '#000000';\n ctx.fillText(text, x, y);\n \n if (isSelected) {\n const textWidth = ctx.measureText(text).width;\n ctx.strokeStyle = '#ff6600';\n ctx.lineWidth = 1;\n ctx.setLineDash([3, 3]);\n ctx.strokeRect(x - 2, y - 14, textWidth + 4, 18);\n ctx.setLineDash([]);\n }\n}\n\n// Update properties panel based on selected element\nfunction updatePropertiesPanel() {\n const propertiesPanel = document.getElementById('properties-panel');\n \n if (!selectedElement) {\n propertiesPanel.innerHTML = '

Select an element to edit properties

';\n return;\n }\n \n let html = '';\n \n // Common properties\n html += '

';\n html += 'Type:';\n html += `${selectedElement.type}`;\n html += '

';\n \n // Type-specific properties\n if (selectedElement.type === 'wall') {\n const p1 = selectedElement.points[0];\n const p2 = selectedElement.points[1];\n const length = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n \n html += '

';\n html += 'Length:';\n html += `${Math.round(length)}px`;\n html += '

';\n \n } else if (selectedElement.type === 'door' || selectedElement.type === 'window') {\n html += '

';\n html += 'Width:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Height:';\n html += ``;\n html += '

';\n \n } else if (selectedElement.type === 'furniture') {\n html += '

';\n html += 'Furniture:';\n html += `${selectedElement.properties.furnitureType}`;\n html += '

';\n \n html += '

';\n html += 'Width:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Height:';\n html += ``;\n html += '

';\n \n html += '

';\n html += 'Rotation:';\n html += ``;\n html += '

';\n \n } else if (selectedElement.type === 'text') {\n html += '

';\n html += 'Text:';\n html += ``;\n html += '

';\n }\n \n // Delete button\n html += '';\n \n propertiesPanel.innerHTML = html;\n \n // Add event listeners to property inputs\n if (selectedElement.type === 'door' || selectedElement.type === 'window' || selectedElement.type === 'furniture') {\n document.getElementById('prop-width')?.addEventListener('change', e => {\n selectedElement.properties.width = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n \n document.getElementById('prop-height')?.addEventListener('change', e => {\n selectedElement.properties.height = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n }\n \n if (selectedElement.type === 'furniture') {\n document.getElementById('prop-rotation')?.addEventListener('change', e => {\n selectedElement.properties.rotation = parseInt(e.target.value);\n drawGrid();\n drawElements();\n });\n }\n \n if (selectedElement.type === 'text') {\n document.getElementById('prop-text')?.addEventListener('change', e => {\n selectedElement.properties.text = e.target.value;\n drawGrid();\n drawElements();\n });\n }\n \n // Delete element button\n document.getElementById('delete-element')?.addEventListener('click', () => {\n elements = elements.filter(el => el.id !== selectedElement.id);\n selectedElement = null;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n });\n}\n\n// Save the current plan\nasync function savePlan() {\n const name = planNameInput.value.trim() || 'Untitled Plan';\n \n if (elements.length === 0) {\n alert('Cannot save an empty plan. Add some elements first.');\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n // Generate thumbnail\n const thumbnail = canvas.toDataURL('image/png');\n \n // Prepare data to save\n const planData = {\n name,\n elements,\n thumbnail\n };\n \n // Send to server\n const response = await fetch('/api/plans', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(planData)\n });\n \n const result = await response.json();\n \n if (result.success) {\n alert('Plan saved successfully!');\n loadSavedPlans();\n } else {\n alert('Error saving plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error saving plan:', error);\n alert('Error saving plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Load saved plans\nasync function loadSavedPlans() {\n const savedPlansList = document.getElementById('saved-plans-list');\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch('/api/plans');\n const result = await response.json();\n \n if (result.success && result.plans.length > 0) {\n let html = '';\n \n result.plans.forEach(plan => {\n const planId = plan.key.replace('house_plan_', '');\n \n html += `

`;\n html += `

${planId}

`;\n html += `

`;\n html += ``;\n html += ``;\n html += `

`;\n html += `

`;\n });\n \n savedPlansList.innerHTML = html;\n \n // Add event listeners to buttons\n document.querySelectorAll('.load-plan-btn').forEach(btn => {\n btn.addEventListener('click', () => loadPlan(btn.dataset.id));\n });\n \n document.querySelectorAll('.delete-plan-btn').forEach(btn => {\n btn.addEventListener('click', () => deletePlan(btn.dataset.id));\n });\n } else {\n savedPlansList.innerHTML = '

No saved plans yet

';\n }\n } catch (error) {\n console.error('Error loading plans:', error);\n savedPlansList.innerHTML = '

Error loading plans. Please try again.

';\n } finally {\n hideLoading();\n }\n}\n\n// Load a specific plan\nasync function loadPlan(id) {\n if (!confirm('Loading a plan will replace your current design. Continue?')) {\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch(`/api/plans/${id}`);\n const result = await response.json();\n \n if (result.success) {\n // Load the plan data\n elements = result.plan.elements;\n planNameInput.value = result.plan.name;\n selectedElement = null;\n updatePropertiesPanel();\n drawGrid();\n drawElements();\n alert('Plan loaded successfully!');\n } else {\n alert('Error loading plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error loading plan:', error);\n alert('Error loading plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Delete a specific plan\nasync function deletePlan(id) {\n if (!confirm('Are you sure you want to delete this plan? This cannot be undone.')) {\n return;\n }\n \n // Show loading indicator\n showLoading();\n \n try {\n const response = await fetch(`/api/plans/${id}`, {\n method: 'DELETE'\n });\n \n const result = await response.json();\n \n if (result.success) {\n alert('Plan deleted successfully!');\n loadSavedPlans();\n } else {\n alert('Error deleting plan: ' + result.error);\n }\n } catch (error) {\n console.error('Error deleting plan:', error);\n alert('Error deleting plan. Please try again.');\n } finally {\n hideLoading();\n }\n}\n\n// Export the current plan as an image\nfunction exportAsImage() {\n // Create a temporary canvas with white background\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = canvas.width;\n tempCanvas.height = canvas.height;\n const tempCtx = tempCanvas.getContext('2d');\n \n // Fill with white background\n tempCtx.fillStyle = '#ffffff';\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n \n // Draw grid\n tempCtx.strokeStyle = '#eeeeee';\n tempCtx.lineWidth = 1;\n \n for (let x = 0; x < tempCanvas.width; x += gridSize) {\n tempCtx.beginPath();\n tempCtx.moveTo(x, 0);\n tempCtx.lineTo(x, tempCanvas.height);\n tempCtx.stroke();\n }\n \n for (let y = 0; y < tempCanvas.height; y += gridSize) {\n tempCtx.beginPath();\n tempCtx.moveTo(0, y);\n tempCtx.lineTo(tempCanvas.width, y);\n tempCtx.stroke();\n }\n \n // Copy the current canvas content\n tempCtx.drawImage(canvas, 0, 0);\n \n // Create download link\n const link = document.createElement('a');\n link.download = 'house-plan.png';\n link.href = tempCanvas.toDataURL('image/png');\n link.click();\n}\n\n// Show loading indicator\nfunction showLoading() {\n const loadingOverlay = document.createElement('div');\n loadingOverlay.className = 'loading-overlay';\n loadingOverlay.id = 'loading-overlay';\n \n const spinner = document.createElement('div');\n spinner.className = 'loading-spinner';\n \n loadingOverlay.appendChild(spinner);\n document.body.appendChild(loadingOverlay);\n}\n\n// Hide loading indicator\nfunction hideLoading() {\n const loadingOverlay = document.getElementById('loading-overlay');\n if (loadingOverlay) {\n loadingOverlay.remove();\n }\n}\n\n// Initialize the application when the page loads\nwindow.addEventListener('load', init);",[],[267,277],"895ed960-33bd-11f0-8d59-9e149126039e",4,["D",1747554959490],[212,213,214],[267],["D",1747555326985],[],[18,69],["D",1747554921011],[210],[18],["D",1747554776207],{"_11":12,"_163":75},{"_11":12,"_159":-5,"_74":75,"_31":73,"_160":161,"_162":30},{"_44":150,"_13":16,"_38":41,"_151":117,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":-5,"_157":14,"_158":12},"ctx",{"_57":-5,"_182":332,"_333":334,"_335":336,"_337":30,"_338":30,"_339":30,"_340":24,"_341":-5,"_342":-7,"_343":-7,"_344":26,"_345":30,"_346":30,"_347":-5,"_348":30,"_349":30,"_350":30,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":16,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","899124c68db8496248a17ee95f074b807335ea7b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend