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);",[],[183,190],{"_104":200,"_95":201,"_153":202,"_155":184,"_156":138,"_157":203,"_159":160,"_106":204,"_100":205,"_162":206,"_164":207,"_165":22,"_166":-5,"_167":208,"_98":209},"13f7fed4-33bf-11f0-b853-9e149126039e","index.html","895eb444-33bd-11f0-8d59-9e149126039e",18,["D",1747555621518],3,"file","\n\n\n \n \n House Plan Designer\n \n \n \n \n \n \n\n\n

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",[],[183,201],{"_104":211,"_95":212,"_153":213,"_155":184,"_156":138,"_157":101,"_159":160,"_106":214,"_100":205,"_162":206,"_164":215,"_165":22,"_166":-5,"_167":216,"_98":217},"1b6b91b2-33bf-11f0-9708-9e149126039e","styles.css","959bf9ce-33bd-11f0-894c-9e149126039e",["D",1747555634023],"/* Custom styles for the House Plan Designer */\n\n.canvas-container {\n position: relative;\n background-color: #f8f8f8;\n background-image: \n linear-gradient(rgba(200, 200, 200, 0.5) 1px, transparent 1px),\n linear-gradient(90deg, rgba(200, 200, 200, 0.5) 1px, transparent 1px);\n background-size: 20px 20px;\n}\n\n.tool-btn.active {\n background-color: #4299e1;\n color: white;\n}\n\n.furniture-item.active {\n background-color: #4299e1;\n color: white;\n}\n\n.template-item.active {\n background-color: #4299e1;\n color: white;\n}\n\n.roof-style.active {\n background-color: #4299e1;\n color: white;\n}\n\n/* Properties panel styles */\n.property-row {\n display: flex;\n margin-bottom: 8px;\n align-items: center;\n}\n\n.property-label {\n width: 80px;\n font-size: 14px;\n}\n\n.property-input {\n flex: 1;\n padding: 4px;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n/* Saved plan card */\n.plan-card {\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n padding: 12px;\n transition: all 0.2s;\n}\n\n.plan-card:hover {\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transform: translateY(-2px);\n}\n\n.plan-thumbnail {\n width: 100%;\n height: 150px;\n background-color: #f8f8f8;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n margin-bottom: 8px;\n object-fit: contain;\n}\n\n/* Context menu */\n.context-menu {\n position: absolute;\n background: white;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n padding: 8px 0;\n z-index: 1000;\n}\n\n.context-menu-item {\n padding: 8px 16px;\n cursor: pointer;\n}\n\n.context-menu-item:hover {\n background-color: #f0f0f0;\n}\n\n/* Loading indicator */\n.loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(255, 255, 255, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n}\n\n.loading-spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n border-top: 4px solid #3498db;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* Measurement display */\n#measurement-display {\n background-color: rgba(255, 255, 255, 0.9);\n border: 1px solid #ccc;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n pointer-events: none;\n z-index: 100;\n}\n\n/* Room styles */\n.room {\n fill-opacity: 0.2;\n stroke-width: 1;\n transition: fill-opacity 0.2s;\n}\n\n.room:hover {\n fill-opacity: 0.4;\n}\n\n.room-label {\n font-size: 14px;\n font-weight: bold;\n pointer-events: none;\n user-select: none;\n}\n\n/* Undo/Redo buttons */\n#undo-btn, #redo-btn {\n font-size: 16px;\n line-height: 1;\n}\n\n#undo-btn:disabled, #redo-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Cursor position display */\n#cursor-position {\n font-family: monospace;\n}\n\n/* Tooltip */\n.tooltip {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 12px;\n pointer-events: none;\n z-index: 1000;\n white-space: nowrap;\n}\n\n/* New furniture items */\n.furniture-stove, .furniture-fridge, .furniture-plant, .furniture-desk {\n stroke: #666;\n fill: #ddd;\n}\n\n/* Room colors */\n.room-bedroom {\n fill: #c6dbef;\n stroke: #6baed6;\n}\n\n.room-living {\n fill: #c7e9c0;\n stroke: #74c476;\n}\n\n.room-bathroom {\n fill: #d9d9d9;\n stroke: #969696;\n}\n\n.room-kitchen {\n fill: #fdd0a2;\n stroke: #fd8d3c;\n}\n\n.room-custom {\n fill: #dadaeb;\n stroke: #9e9ac8;\n}\n\n/* Roof styles */\n.roof {\n stroke-width: 2;\n fill-opacity: 0.7;\n}\n\n.roof-gable {\n fill: #b3a369;\n stroke: #8c7853;\n}\n\n.roof-hip {\n fill: #a67c52;\n stroke: #8c6239;\n}\n\n.roof-flat {\n fill: #7c7c7c;\n stroke: #5a5a5a;\n}\n\n.roof-shed {\n fill: #b35a44;\n stroke: #8c4531;\n}\n\n.roof-gambrel {\n fill: #8c9bd9;\n stroke: #6a75a3;\n}\n\n.roof-mansard {\n fill: #5a8c7c;\n stroke: #3d6655;\n}\n\n/* Roof ridge line */\n.roof-ridge {\n stroke: #333;\n stroke-width: 2;\n stroke-dasharray: 5, 5;\n}",[],[183,212],[183],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":205,"_159":160,"_106":223,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":224,"_98":234},"78eccc04-33bd-11f0-8c3a-9e149126039e","shared","8fd29af9-ae19-4704-9ed0-2c919a1979cf",["D",1747554931905],[225],{"_104":226,"_95":227,"_153":228,"_155":222,"_156":138,"_157":229,"_159":160,"_106":230,"_100":158,"_162":195,"_164":231,"_165":22,"_166":-5,"_167":232,"_98":233},"059f2d08-33bf-11f0-8b7c-9e149126039e","types.ts","78ec96a8-33bd-11f0-8c3a-9e149126039e",16,["D",1747555597449],"// Types for house plan elements\n\nexport type ElementType = 'wall' | 'door' | 'window' | 'furniture' | 'text' | 'room' | 'roof';\nexport type MeasurementUnit = 'pixels' | 'feet' | 'meters';\nexport type RoofStyle = 'gable' | 'hip' | 'flat' | 'shed' | 'gambrel' | 'mansard';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface Element {\n id: string;\n type: ElementType;\n points: Point[];\n properties?: {\n width?: number;\n height?: number;\n rotation?: number;\n color?: string;\n text?: string;\n furnitureType?: string;\n area?: number;\n roomType?: string;\n wallThickness?: number;\n doorStyle?: string;\n windowStyle?: string;\n // Roof specific properties\n roofStyle?: RoofStyle;\n pitch?: number; // Roof pitch/slope in degrees\n overhang?: number; // Roof overhang in measurement units\n ridgeHeight?: number; // Height of roof ridge\n material?: string; // Roof material\n };\n}\n\nexport interface HousePlan {\n id: string;\n name: string;\n elements: Element[];\n scale: number;\n unit: MeasurementUnit;\n gridSize: number;\n createdAt: string;\n updatedAt: string;\n version?: number;\n history?: Element[][];\n historyIndex?: number;\n}\n\nexport interface SavedPlan {\n key: string;\n size: number;\n metadata?: any;\n}\n\nexport interface RoomTemplate {\n name: string;\n type: string;\n furniture: {\n type: string;\n x: number;\n y: number;\n width: number;\n height: number;\n rotation: number;\n }[];\n}",[],[221,227],[221],{"_104":236,"_95":237,"_153":238,"_155":-5,"_156":138,"_157":194,"_159":160,"_106":239,"_100":32,"_162":206,"_164":240,"_165":22,"_166":-5,"_167":241,"_98":242},"668ad984-33bd-11f0-85cd-9e149126039e","README.md","668ada42-33bd-11f0-85cd-9e149126039e",["D",1747554901065],"# House Plan Designer\n\nA web-based application for creating and editing house building plans.\n\n## Features\n\n- Draw walls, doors, windows, and other house elements\n- Add furniture and fixtures\n- Save and load your designs\n- Export designs as images\n\n## Project Structure\n\n- `backend/index.ts` - Main HTTP entry point and API routes\n- `frontend/index.html` - Main HTML template\n- `frontend/app.js` - Frontend JavaScript for the drawing application\n- `frontend/styles.css` - Styling for the application\n- `shared/types.ts` - Shared types between frontend and backend\n\n## How to Use\n\n1. Draw walls by clicking and dragging on the canvas\n2. Use the toolbar to select different elements (doors, windows, furniture)\n3. Save your design using the save button\n4. Load previous designs from the saved designs list\n\n## Technologies Used\n\n- Canvas API for drawing\n- Tailwind CSS for styling\n- Val Town's blob storage for saving designs",[],[237],"files",[150,169,181,188,199,210,219,225,235],"counts",{"_247":32,"_248":194,"_249":32,"_250":32},"pulls","branches","forks","envVars","contents",[],{"_104":211,"_156":138,"_153":213,"_95":212,"_164":215,"_162":206,"_100":205,"_155":184,"_106":254,"_157":101,"_166":-5,"_98":255},["D",1747555634023],[183,212],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":264,"_148":269,"_243":297,"_206":298,"_251":301,"_302":-5,"_303":22,"_304":-5,"_305":-5,"_306":-5,"_307":308},{"_104":105,"_95":96,"_106":265,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":266,"_132":267,"_135":268,"_147":22},["D",1747554776207],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[270,276,288,294],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":271,"_98":275},[272],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":173,"_159":160,"_106":174,"_100":175,"_162":176,"_164":177,"_165":22,"_166":-5,"_167":273,"_98":274},[],[152,171],[152],{"_104":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":185,"_159":160,"_106":186,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":277,"_98":287},[278,281,284],{"_104":189,"_95":190,"_153":191,"_155":184,"_156":138,"_157":192,"_159":22,"_106":193,"_100":194,"_162":195,"_164":196,"_165":22,"_166":-5,"_167":279,"_98":280},[],[183,190],{"_104":200,"_95":201,"_153":202,"_155":184,"_156":138,"_157":203,"_159":160,"_106":204,"_100":205,"_162":206,"_164":207,"_165":22,"_166":-5,"_167":282,"_98":283},[],[183,201],{"_104":211,"_95":212,"_153":213,"_155":184,"_156":138,"_157":101,"_159":160,"_106":214,"_100":205,"_162":206,"_164":215,"_165":22,"_166":-5,"_167":285,"_98":286},[],[183,212],[183],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":205,"_159":160,"_106":223,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":289,"_98":293},[290],{"_104":226,"_95":227,"_153":228,"_155":222,"_156":138,"_157":229,"_159":160,"_106":230,"_100":158,"_162":195,"_164":231,"_165":22,"_166":-5,"_167":291,"_98":292},[],[221,227],[221],{"_104":236,"_95":237,"_153":238,"_155":-5,"_156":138,"_157":194,"_159":160,"_106":239,"_100":32,"_162":206,"_164":240,"_165":22,"_166":-5,"_167":295,"_98":296},[],[237],[270,272,276,278,281,284,288,290,294],{"_104":211,"_156":138,"_153":213,"_95":212,"_164":215,"_162":206,"_100":205,"_155":184,"_106":299,"_157":101,"_166":-5,"_98":300},["D",1747555634023],[183,212],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]