[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_248":249,"_250":251},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_185":-5,"_20":186,"_22":187,"_188":189,"_190":191,"_26":192,"_24":193,"_194":-5,"_195":-5,"_196":55,"_197":198,"_199":46,"_200":-5,"_201":-5,"_202":203},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","Winner_create","name","laptopown","branchName","main","version","path","backend","project",{"_34":132,"_13":14,"_47":133,"_134":-5,"_135":55,"_136":137,"_138":137,"_139":-5,"_140":-5,"_141":142,"_143":38,"_144":46,"_145":46,"_146":-5,"_147":60,"_148":149,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":155,"_156":155,"_157":158,"_159":158,"_160":158,"_161":155,"_162":155,"_163":164,"_165":166,"_167":168,"_169":55},"tree",[64,65,66,67],"file",{"_34":58,"_41":42,"_37":40,"_13":19,"_52":-5,"_50":59,"_17":60,"_39":-5,"_47":61,"_43":62,"_56":-5,"_18":63},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","bc2c9c92-34e4-11f0-a0b8-9e149126039e","index.ts","fileId","3eafba42-34e4-11f0-97ef-9e149126039e","parentId","fa997af3-a858-4d97-b5f0-356b1c1fb7f5","branchId","d8d5ad12-34e3-11f0-a6f0-9e149126039e","branchVersion",7,"latest",true,"createdAt",["D",1747681746265],1,"fileType","http","content","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Design } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main HTML page with initial data\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for \"view source\" link\n const projectInfo = parseProject(import.meta.url);\n \n // Get list of saved designs\n const savedDesigns = await blob.list(\"design_\");\n \n // Inject data to avoid extra round-trips\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API endpoint to save a design\napp.post(\"/api/designs\", async c => {\n try {\n const design = await c.req.json() as Design;\n const id = design.id || `design_${Date.now()}`;\n \n await blob.setJSON(id, {\n ...design,\n id,\n updatedAt: new Date().toISOString()\n });\n \n return c.json({ success: true, id });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to get a design\napp.get(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n const design = await blob.getJSON(id);\n \n if (!design) {\n return c.json({ success: false, error: \"Design not found\" }, 404);\n }\n \n return c.json({ success: true, design });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to list all designs\napp.get(\"/api/designs\", async c => {\n try {\n const designs = await blob.list(\"design_\");\n return c.json({ success: true, designs });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// API endpoint to delete a design\napp.delete(\"/api/designs/:id\", async c => {\n try {\n const id = c.req.param(\"id\");\n await blob.delete(id);\n return c.json({ success: true });\n } catch (error) {\n return c.json({ success: false, error: error.message }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","deleted",false,"label",[19,36],"3eafdf5e-34e4-11f0-97ef-9e149126039e","directory",0,["D",1747681535733],2,[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":125,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":126,"_18":127},{"_34":92,"_13":93,"_37":94,"_39":-5,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":97,"_18":98},{"_34":76,"_13":77,"_37":78,"_39":-5,"_41":42,"_43":79,"_45":46,"_47":80,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":81,"_18":82},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":49,"_45":46,"_47":71,"_17":60,"_50":24,"_52":72,"_54":55,"_56":-5,"_73":74,"_18":75},"35a70090-34e4-11f0-836c-9e149126039e","README.md","35a70158-34e4-11f0-836c-9e149126039e",["D",1747681520574],"# House Designer App\n\nA simple web-based application for designing house floor plans.\n\n## Features\n\n- 2D floor plan designer with canvas-based drawing\n- Tools for adding rooms, walls, doors, and windows\n- Basic furniture placement\n- Save and load designs\n- Measurement tools\n\n## Project Structure\n\n- `/backend` - Server-side code and API endpoints\n- `/frontend` - Client-side HTML, CSS, and JavaScript\n- `/shared` - Shared types and utilities\n\n## How to Use\n\n1. Draw walls by clicking and dragging on the canvas\n2. Add doors and windows using the toolbar\n3. Place furniture from the item palette\n4. Save your design using the save button\n5. Load previous designs from the dropdown menu\n\n## Technologies Used\n\n- HTML Canvas for rendering\n- Val Town blob storage for saving designs\n- TypeScript for type safety","children",[],[69],"44f24820-34e4-11f0-8ae3-9e149126039e","shared","328b745a-362d-4bc6-8d85-b69e5472de75",3,["D",1747681546232],[83],[77],{"_34":84,"_13":85,"_37":86,"_39":78,"_41":42,"_43":79,"_45":46,"_47":87,"_17":60,"_50":88,"_52":89,"_54":55,"_56":-5,"_73":90,"_18":91},"44f1fece-34e4-11f0-8ae3-9e149126039e","types.ts","44f1ff8c-34e4-11f0-8ae3-9e149126039e",["D",1747681546232],"script","// Types for the house designer app\n\n// Main design object\nexport interface Design {\n id?: string;\n name: string;\n createdAt?: string;\n updatedAt?: string;\n elements: Element[];\n width: number;\n height: number;\n scale: number; // pixels per meter\n}\n\n// Base element type\nexport interface Element {\n id: string;\n type: ElementType;\n x: number;\n y: number;\n rotation: number; // in degrees\n properties: Record;\n}\n\n// Types of elements\nexport enum ElementType {\n WALL = \"wall\",\n DOOR = \"door\",\n WINDOW = \"window\",\n ROOM = \"room\",\n FURNITURE = \"furniture\",\n TEXT = \"text\",\n DIMENSION = \"dimension\"\n}\n\n// Wall element\nexport interface WallElement extends Element {\n type: ElementType.WALL;\n properties: {\n length: number;\n thickness: number;\n color: string;\n };\n}\n\n// Door element\nexport interface DoorElement extends Element {\n type: ElementType.DOOR;\n properties: {\n width: number;\n isOpen: boolean;\n openDirection: \"left\" | \"right\";\n color: string;\n };\n}\n\n// Window element\nexport interface WindowElement extends Element {\n type: ElementType.WINDOW;\n properties: {\n width: number;\n height: number;\n color: string;\n };\n}\n\n// Room element\nexport interface RoomElement extends Element {\n type: ElementType.ROOM;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n floorColor: string;\n };\n}\n\n// Furniture element\nexport interface FurnitureElement extends Element {\n type: ElementType.FURNITURE;\n properties: {\n width: number;\n height: number;\n name: string;\n color: string;\n furnitureType: string;\n };\n}\n\n// Text element\nexport interface TextElement extends Element {\n type: ElementType.TEXT;\n properties: {\n text: string;\n fontSize: number;\n color: string;\n };\n}\n\n// Dimension element\nexport interface DimensionElement extends Element {\n type: ElementType.DIMENSION;\n properties: {\n length: number;\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n color: string;\n };\n}",[],[77,85],"580da490-34e4-11f0-8ae3-9e149126039e","frontend","fab1e1e6-decd-4f3e-b8b6-68fbb3be2454",4,["D",1747681578287],[99,100,101],[93],{"_34":118,"_13":119,"_37":120,"_39":94,"_41":42,"_43":95,"_45":46,"_47":121,"_17":60,"_50":24,"_52":122,"_54":55,"_56":-5,"_73":123,"_18":124},{"_34":110,"_13":111,"_37":112,"_39":94,"_41":42,"_43":113,"_45":46,"_47":114,"_17":60,"_50":88,"_52":115,"_54":55,"_56":-5,"_73":116,"_18":117},{"_34":102,"_13":103,"_37":104,"_39":94,"_41":42,"_43":105,"_45":46,"_47":106,"_17":60,"_50":24,"_52":107,"_54":55,"_56":-5,"_73":108,"_18":109},"635b9d34-34e4-11f0-9d2d-9e149126039e","styles.css","635b9dde-34e4-11f0-9d2d-9e149126039e",5,["D",1747681597257],"/* Styles for the House Designer app */\n\n#canvas-container {\n height: calc(100vh - 220px);\n min-height: 500px;\n position: relative;\n}\n\n#design-canvas {\n background-color: #f8f9fa;\n background-image: \n linear-gradient(rgba(200, 200, 200, 0.3) 1px, transparent 1px),\n linear-gradient(90deg, rgba(200, 200, 200, 0.3) 1px, transparent 1px);\n background-size: 50px 50px;\n cursor: crosshair;\n}\n\n.tool-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px;\n border: 1px solid #e2e8f0;\n border-radius: 0.25rem;\n background-color: #f8fafc;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.tool-btn:hover {\n background-color: #e2e8f0;\n}\n\n.tool-btn.active {\n background-color: #3b82f6;\n color: white;\n}\n\n.tool-btn .icon {\n font-size: 1.5rem;\n margin-bottom: 4px;\n}\n\n.furniture-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px;\n border: 1px solid #e2e8f0;\n border-radius: 0.25rem;\n background-color: #f8fafc;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.furniture-item:hover {\n background-color: #e2e8f0;\n}\n\n.furniture-item .icon {\n font-size: 1.5rem;\n margin-bottom: 4px;\n}\n\n/* Properties panel styles */\n.property-row {\n margin-bottom: 8px;\n}\n\n.property-row label {\n display: block;\n margin-bottom: 4px;\n font-size: 0.875rem;\n color: #4b5563;\n}\n\n.property-row input,\n.property-row select {\n width: 100%;\n padding: 6px;\n border: 1px solid #d1d5db;\n border-radius: 0.25rem;\n}\n\n.property-row input[type=\"color\"] {\n height: 30px;\n}\n\n/* Modal styles */\n.modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n max-width: 500px;\n width: 100%;\n}\n\n/* Context menu */\n.context-menu {\n position: absolute;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n padding: 8px 0;\n z-index: 100;\n}\n\n.context-menu-item {\n padding: 8px 16px;\n cursor: pointer;\n}\n\n.context-menu-item:hover {\n background-color: #f3f4f6;\n}\n\n/* Element handles */\n.element-handle {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #3b82f6;\n border: 1px solid white;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n cursor: move;\n z-index: 10;\n}\n\n.resize-handle {\n background-color: #10b981;\n cursor: nwse-resize;\n}\n\n.rotate-handle {\n background-color: #f59e0b;\n cursor: grab;\n}",[],[93,103],"b9f3d648-34e4-11f0-a3b8-9e149126039e","index.js","b9f3d6f2-34e4-11f0-a3b8-9e149126039e",6,["D",1747681742539],"// House Designer App - Frontend JavaScript\n\n// Get initial data injected from the server\nconst initialData = window.__INITIAL_DATA__ || { savedDesigns: [] };\n\n// Canvas and context\nconst canvas = document.getElementById('design-canvas');\nconst ctx = canvas.getContext('2d');\n\n// UI elements\nconst toolButtons = document.querySelectorAll('.tool-btn');\nconst furniturePalette = document.getElementById('furniture-palette');\nconst furnitureItems = document.querySelectorAll('.furniture-item');\nconst propertiesPanel = document.getElementById('properties-panel');\nconst elementProperties = document.getElementById('element-properties');\nconst noSelection = document.getElementById('no-selection');\nconst gridSizeSelect = document.getElementById('grid-size');\nconst designNameInput = document.getElementById('design-name');\nconst canvasCoordinates = document.getElementById('canvas-coordinates');\nconst canvasScale = document.getElementById('canvas-scale');\nconst viewSourceLink = document.getElementById('view-source');\nconst loadDesignSelect = document.getElementById('load-design');\nconst saveDesignBtn = document.getElementById('save-design');\nconst newDesignBtn = document.getElementById('new-design');\nconst undoBtn = document.getElementById('undo');\nconst redoBtn = document.getElementById('redo');\n\n// Modals\nconst saveModal = document.getElementById('save-modal');\nconst saveDesignNameInput = document.getElementById('save-design-name');\nconst confirmSaveBtn = document.getElementById('confirm-save');\nconst cancelSaveBtn = document.getElementById('cancel-save');\nconst deleteModal = document.getElementById('delete-modal');\nconst confirmDeleteBtn = document.getElementById('confirm-delete');\nconst cancelDeleteBtn = document.getElementById('cancel-delete');\n\n// Set view source link\nif (initialData.projectInfo) {\n viewSourceLink.href = initialData.projectInfo.links.self.project;\n}\n\n// State\nlet currentTool = 'select';\nlet currentDesign = {\n id: null,\n name: 'My House Design',\n elements: [],\n width: 2000,\n height: 1500,\n scale: 50 // 1 pixel = 50mm (1:50 scale)\n};\nlet selectedElement = null;\nlet isDragging = false;\nlet isDrawing = false;\nlet startX = 0;\nlet startY = 0;\nlet lastX = 0;\nlet lastY = 0;\nlet gridSize = 50; // Default grid size in pixels\nlet undoStack = [];\nlet redoStack = [];\n\n// Initialize the app\nfunction init() {\n // Set up event listeners\n setupEventListeners();\n \n // Load saved designs into dropdown\n loadSavedDesigns();\n \n // Initial render\n render();\n \n // Save initial state for undo\n saveState();\n}\n\n// Set up event listeners\nfunction setupEventListeners() {\n // Tool selection\n toolButtons.forEach(button => {\n button.addEventListener('click', () => {\n const tool = button.dataset.tool;\n setCurrentTool(tool);\n });\n });\n \n // Canvas mouse events\n canvas.addEventListener('mousedown', handleMouseDown);\n canvas.addEventListener('mousemove', handleMouseMove);\n canvas.addEventListener('mouseup', handleMouseUp);\n canvas.addEventListener('mouseleave', handleMouseUp);\n \n // Furniture items\n furnitureItems.forEach(item => {\n item.addEventListener('click', () => {\n const type = item.dataset.type;\n setCurrentTool('furniture', type);\n });\n });\n \n // Grid size change\n gridSizeSelect.addEventListener('change', () => {\n gridSize = parseInt(gridSizeSelect.value);\n updateGridBackground();\n render();\n });\n \n // Design name change\n designNameInput.addEventListener('change', () => {\n currentDesign.name = designNameInput.value;\n });\n \n // Save design\n saveDesignBtn.addEventListener('click', () => {\n saveDesignNameInput.value = currentDesign.name;\n saveModal.classList.remove('hidden');\n });\n \n confirmSaveBtn.addEventListener('click', () => {\n currentDesign.name = saveDesignNameInput.value;\n saveDesign();\n saveModal.classList.add('hidden');\n });\n \n cancelSaveBtn.addEventListener('click', () => {\n saveModal.classList.add('hidden');\n });\n \n // Load design\n loadDesignSelect.addEventListener('change', () => {\n const designId = loadDesignSelect.value;\n if (designId) {\n loadDesign(designId);\n }\n });\n \n // New design\n newDesignBtn.addEventListener('click', () => {\n if (confirm('Create a new design? Any unsaved changes will be lost.')) {\n resetDesign();\n }\n });\n \n // Undo/Redo\n undoBtn.addEventListener('click', undo);\n redoBtn.addEventListener('click', redo);\n \n // Delete design\n confirmDeleteBtn.addEventListener('click', () => {\n deleteDesign(currentDesign.id);\n deleteModal.classList.add('hidden');\n });\n \n cancelDeleteBtn.addEventListener('click', () => {\n deleteModal.classList.add('hidden');\n });\n \n // Keyboard shortcuts\n document.addEventListener('keydown', handleKeyDown);\n}\n\n// Set the current tool\nfunction setCurrentTool(tool, subType = null) {\n currentTool = tool;\n \n // Update UI\n toolButtons.forEach(button => {\n button.classList.toggle('active', button.dataset.tool === tool);\n });\n \n // Show/hide furniture palette\n furniturePalette.classList.toggle('hidden', tool !== 'furniture');\n \n // Update cursor\n updateCursor();\n}\n\n// Update the cursor based on the current tool\nfunction updateCursor() {\n switch (currentTool) {\n case 'select':\n canvas.style.cursor = 'default';\n break;\n case 'wall':\n case 'dimension':\n canvas.style.cursor = 'crosshair';\n break;\n case 'door':\n case 'window':\n case 'room':\n case 'furniture':\n case 'text':\n canvas.style.cursor = 'cell';\n break;\n default:\n canvas.style.cursor = 'default';\n }\n}\n\n// Update the grid background based on grid size\nfunction updateGridBackground() {\n canvas.style.backgroundSize = `${gridSize}px ${gridSize}px`;\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 startX = x;\n startY = y;\n lastX = x;\n lastY = y;\n \n switch (currentTool) {\n case 'select':\n const element = findElementAt(x, y);\n selectElement(element);\n if (element) {\n isDragging = true;\n }\n break;\n case 'wall':\n case 'dimension':\n isDrawing = true;\n break;\n case 'door':\n addDoor(x, y);\n break;\n case 'window':\n addWindow(x, y);\n break;\n case 'room':\n isDrawing = true;\n break;\n case 'furniture':\n addFurniture(x, y);\n break;\n case 'text':\n addText(x, y);\n break;\n }\n \n render();\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 // Update coordinates display\n canvasCoordinates.textContent = `X: ${x / currentDesign.scale}m, Y: ${y / currentDesign.scale}m`;\n \n if (isDragging && selectedElement) {\n // Move the selected element\n selectedElement.x += (x - lastX);\n selectedElement.y += (y - lastY);\n render();\n } else if (isDrawing) {\n // Drawing preview\n render();\n ctx.strokeStyle = '#3b82f6';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(startX, startY);\n ctx.lineTo(x, y);\n ctx.stroke();\n }\n \n lastX = x;\n lastY = y;\n}\n\n// Handle mouse up on canvas\nfunction handleMouseUp(e) {\n if (isDrawing) {\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 === 'wall') {\n addWall(startX, startY, x, y);\n } else if (currentTool === 'room') {\n addRoom(startX, startY, x, y);\n } else if (currentTool === 'dimension') {\n addDimension(startX, startY, x, y);\n }\n \n isDrawing = false;\n saveState();\n }\n \n if (isDragging) {\n isDragging = false;\n saveState();\n }\n \n render();\n}\n\n// Handle keyboard shortcuts\nfunction handleKeyDown(e) {\n // Delete key\n if (e.key === 'Delete' && selectedElement) {\n deleteElement(selectedElement);\n saveState();\n }\n \n // Undo: Ctrl+Z\n if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {\n undo();\n }\n \n // Redo: Ctrl+Y or Ctrl+Shift+Z\n if ((e.key === 'y' && (e.ctrlKey || e.metaKey)) || \n (e.key === 'z' && (e.ctrlKey || e.metaKey) && e.shiftKey)) {\n redo();\n }\n}\n\n// Find element at coordinates\nfunction findElementAt(x, y) {\n // Search in reverse order (top elements first)\n for (let i = currentDesign.elements.length - 1; i >= 0; i--) {\n const element = currentDesign.elements[i];\n \n // Simple bounding box check\n if (x >= element.x - 10 && x <= element.x + 10 &&\n y >= element.y - 10 && y <= element.y + 10) {\n return element;\n }\n \n // Additional checks based on element type\n switch (element.type) {\n case 'wall':\n // Check if point is on the line\n const dx = element.properties.endX - element.x;\n const dy = element.properties.endY - element.y;\n const length = Math.sqrt(dx * dx + dy * dy);\n const t = ((x - element.x) * dx + (y - element.y) * dy) / (length * length);\n \n if (t >= 0 && t <= 1) {\n const projX = element.x + t * dx;\n const projY = element.y + t * dy;\n const dist = Math.sqrt((x - projX) * (x - projX) + (y - projY) * (y - projY));\n \n if (dist <= element.properties.thickness / 2 + 5) {\n return element;\n }\n }\n break;\n \n case 'room':\n case 'furniture':\n if (x >= element.x && x <= element.x + element.properties.width &&\n y >= element.y && y <= element.y + element.properties.height) {\n return element;\n }\n break;\n \n case 'door':\n case 'window':\n if (x >= element.x - element.properties.width / 2 && \n x <= element.x + element.properties.width / 2 &&\n y >= element.y - 10 && y <= element.y + 10) {\n return element;\n }\n break;\n }\n }\n \n return null;\n}\n\n// Select an element\nfunction selectElement(element) {\n selectedElement = element;\n updatePropertiesPanel();\n}\n\n// Update the properties panel based on selected element\nfunction updatePropertiesPanel() {\n if (!selectedElement) {\n noSelection.classList.remove('hidden');\n elementProperties.classList.add('hidden');\n return;\n }\n \n noSelection.classList.add('hidden');\n elementProperties.classList.remove('hidden');\n \n // Clear previous properties\n elementProperties.innerHTML = '';\n \n // Add common properties\n addPropertyField('Type', 'type', selectedElement.type, 'text', true);\n \n // Add specific properties based on element type\n switch (selectedElement.type) {\n case 'wall':\n addPropertyField('Length', 'length', calculateLength(selectedElement), 'text', true);\n addPropertyField('Thickness', 'thickness', selectedElement.properties.thickness, 'number');\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n \n case 'door':\n addPropertyField('Width', 'width', selectedElement.properties.width, 'number');\n addPropertyField('Open Direction', 'openDirection', selectedElement.properties.openDirection, 'select', false, ['left', 'right']);\n addPropertyField('Is Open', 'isOpen', selectedElement.properties.isOpen, 'checkbox');\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n \n case 'window':\n addPropertyField('Width', 'width', selectedElement.properties.width, 'number');\n addPropertyField('Height', 'height', selectedElement.properties.height, 'number');\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n \n case 'room':\n addPropertyField('Name', 'name', selectedElement.properties.name, 'text');\n addPropertyField('Width', 'width', selectedElement.properties.width, 'number');\n addPropertyField('Height', 'height', selectedElement.properties.height, 'number');\n addPropertyField('Wall Color', 'color', selectedElement.properties.color, 'color');\n addPropertyField('Floor Color', 'floorColor', selectedElement.properties.floorColor, 'color');\n break;\n \n case 'furniture':\n addPropertyField('Type', 'furnitureType', selectedElement.properties.furnitureType, 'text');\n addPropertyField('Name', 'name', selectedElement.properties.name, 'text');\n addPropertyField('Width', 'width', selectedElement.properties.width, 'number');\n addPropertyField('Height', 'height', selectedElement.properties.height, 'number');\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n \n case 'text':\n addPropertyField('Text', 'text', selectedElement.properties.text, 'text');\n addPropertyField('Font Size', 'fontSize', selectedElement.properties.fontSize, 'number');\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n \n case 'dimension':\n addPropertyField('Length', 'length', selectedElement.properties.length, 'text', true);\n addPropertyField('Color', 'color', selectedElement.properties.color, 'color');\n break;\n }\n \n // Add delete button\n const deleteButton = document.createElement('button');\n deleteButton.textContent = 'Delete Element';\n deleteButton.className = 'bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700 mt-4 w-full';\n deleteButton.addEventListener('click', () => {\n deleteElement(selectedElement);\n saveState();\n });\n elementProperties.appendChild(deleteButton);\n}\n\n// Add a property field to the properties panel\nfunction addPropertyField(label, property, value, type, readonly = false, options = []) {\n const row = document.createElement('div');\n row.className = 'property-row';\n \n const labelElement = document.createElement('label');\n labelElement.textContent = label;\n row.appendChild(labelElement);\n \n let input;\n \n if (type === 'select') {\n input = document.createElement('select');\n options.forEach(option => {\n const optionElement = document.createElement('option');\n optionElement.value = option;\n optionElement.textContent = option;\n optionElement.selected = option === value;\n input.appendChild(optionElement);\n });\n } else if (type === 'checkbox') {\n input = document.createElement('input');\n input.type = 'checkbox';\n input.checked = value;\n } else {\n input = document.createElement('input');\n input.type = type;\n input.value = value;\n }\n \n input.disabled = readonly;\n \n if (!readonly) {\n input.addEventListener('change', () => {\n let newValue;\n \n if (type === 'checkbox') {\n newValue = input.checked;\n } else if (type === 'number') {\n newValue = parseFloat(input.value);\n } else {\n newValue = input.value;\n }\n \n if (property.includes('.')) {\n const [obj, prop] = property.split('.');\n selectedElement.properties[prop] = newValue;\n } else if (property in selectedElement) {\n selectedElement[property] = newValue;\n } else if (property in selectedElement.properties) {\n selectedElement.properties[property] = newValue;\n }\n \n render();\n saveState();\n });\n }\n \n row.appendChild(input);\n elementProperties.appendChild(row);\n}\n\n// Calculate length of a wall or dimension\nfunction calculateLength(element) {\n if (element.type === 'wall' || element.type === 'dimension') {\n const dx = element.properties.endX - element.x;\n const dy = element.properties.endY - element.y;\n const pixelLength = Math.sqrt(dx * dx + dy * dy);\n const realLength = pixelLength / currentDesign.scale;\n return realLength.toFixed(2) + ' m';\n }\n return '0 m';\n}\n\n// Add a wall element\nfunction addWall(startX, startY, endX, endY) {\n const wall = {\n id: generateId(),\n type: 'wall',\n x: startX,\n y: startY,\n rotation: 0,\n properties: {\n endX: endX,\n endY: endY,\n thickness: 10,\n color: '#333333'\n }\n };\n \n currentDesign.elements.push(wall);\n selectElement(wall);\n render();\n}\n\n// Add a door element\nfunction addDoor(x, y) {\n const door = {\n id: generateId(),\n type: 'door',\n x: x,\n y: y,\n rotation: 0,\n properties: {\n width: 80,\n isOpen: false,\n openDirection: 'right',\n color: '#8B4513'\n }\n };\n \n currentDesign.elements.push(door);\n selectElement(door);\n render();\n saveState();\n}\n\n// Add a window element\nfunction addWindow(x, y) {\n const window = {\n id: generateId(),\n type: 'window',\n x: x,\n y: y,\n rotation: 0,\n properties: {\n width: 100,\n height: 10,\n color: '#ADD8E6'\n }\n };\n \n currentDesign.elements.push(window);\n selectElement(window);\n render();\n saveState();\n}\n\n// Add a room element\nfunction addRoom(startX, startY, endX, endY) {\n const width = Math.abs(endX - startX);\n const height = Math.abs(endY - startY);\n const x = Math.min(startX, endX);\n const y = Math.min(startY, endY);\n \n const room = {\n id: generateId(),\n type: 'room',\n x: x,\n y: y,\n rotation: 0,\n properties: {\n width: width,\n height: height,\n name: 'Room',\n color: '#CCCCCC',\n floorColor: '#F5F5F5'\n }\n };\n \n currentDesign.elements.push(room);\n selectElement(room);\n render();\n}\n\n// Add a furniture element\nfunction addFurniture(x, y) {\n const furniture = {\n id: generateId(),\n type: 'furniture',\n x: x,\n y: y,\n rotation: 0,\n properties: {\n width: 100,\n height: 100,\n name: 'Furniture',\n color: '#A0522D',\n furnitureType: 'generic'\n }\n };\n \n currentDesign.elements.push(furniture);\n selectElement(furniture);\n render();\n saveState();\n}\n\n// Add a text element\nfunction addText(x, y) {\n const text = prompt('Enter text:', 'Text');\n \n if (text) {\n const textElement = {\n id: generateId(),\n type: 'text',\n x: x,\n y: y,\n rotation: 0,\n properties: {\n text: text,\n fontSize: 16,\n color: '#000000'\n }\n };\n \n currentDesign.elements.push(textElement);\n selectElement(textElement);\n render();\n saveState();\n }\n}\n\n// Add a dimension element\nfunction addDimension(startX, startY, endX, endY) {\n const dx = endX - startX;\n const dy = endY - startY;\n const length = Math.sqrt(dx * dx + dy * dy) / currentDesign.scale;\n \n const dimension = {\n id: generateId(),\n type: 'dimension',\n x: startX,\n y: startY,\n rotation: 0,\n properties: {\n startX: startX,\n startY: startY,\n endX: endX,\n endY: endY,\n length: length,\n color: '#FF0000'\n }\n };\n \n currentDesign.elements.push(dimension);\n selectElement(dimension);\n render();\n}\n\n// Delete an element\nfunction deleteElement(element) {\n const index = currentDesign.elements.findIndex(e => e.id === element.id);\n \n if (index !== -1) {\n currentDesign.elements.splice(index, 1);\n selectedElement = null;\n updatePropertiesPanel();\n render();\n }\n}\n\n// Generate a unique ID\nfunction generateId() {\n return 'element_' + Date.now() + '_' + Math.floor(Math.random() * 1000);\n}\n\n// Render the design\nfunction render() {\n // Clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Draw elements in order (rooms first, then walls, then other elements)\n const rooms = currentDesign.elements.filter(e => e.type === 'room');\n const walls = currentDesign.elements.filter(e => e.type === 'wall');\n const others = currentDesign.elements.filter(e => e.type !== 'room' && e.type !== 'wall');\n \n // Draw rooms\n rooms.forEach(drawElement);\n \n // Draw walls\n walls.forEach(drawElement);\n \n // Draw other elements\n others.forEach(drawElement);\n \n // Draw selection highlight\n if (selectedElement) {\n drawSelectionHighlight(selectedElement);\n }\n}\n\n// Draw an element\nfunction drawElement(element) {\n ctx.save();\n \n // Apply rotation if needed\n if (element.rotation !== 0) {\n ctx.translate(element.x, element.y);\n ctx.rotate(element.rotation * Math.PI / 180);\n ctx.translate(-element.x, -element.y);\n }\n \n switch (element.type) {\n case 'wall':\n drawWall(element);\n break;\n case 'door':\n drawDoor(element);\n break;\n case 'window':\n drawWindow(element);\n break;\n case 'room':\n drawRoom(element);\n break;\n case 'furniture':\n drawFurniture(element);\n break;\n case 'text':\n drawText(element);\n break;\n case 'dimension':\n drawDimension(element);\n break;\n }\n \n ctx.restore();\n}\n\n// Draw a wall\nfunction drawWall(wall) {\n ctx.strokeStyle = wall.properties.color;\n ctx.lineWidth = wall.properties.thickness;\n ctx.lineCap = 'round';\n \n ctx.beginPath();\n ctx.moveTo(wall.x, wall.y);\n ctx.lineTo(wall.properties.endX, wall.properties.endY);\n ctx.stroke();\n}\n\n// Draw a door\nfunction drawDoor(door) {\n const width = door.properties.width;\n const isOpen = door.properties.isOpen;\n const direction = door.properties.openDirection;\n \n ctx.strokeStyle = door.properties.color;\n ctx.fillStyle = door.properties.color;\n ctx.lineWidth = 2;\n \n // Door frame\n ctx.beginPath();\n ctx.moveTo(door.x - width / 2, door.y);\n ctx.lineTo(door.x + width / 2, door.y);\n ctx.stroke();\n \n // Door swing\n ctx.beginPath();\n if (!isOpen) {\n // Closed door\n ctx.moveTo(door.x, door.y);\n ctx.lineTo(door.x, door.y - width / 2);\n } else if (direction === 'right') {\n // Open to the right\n ctx.moveTo(door.x, door.y);\n ctx.arc(door.x, door.y, width / 2, -Math.PI / 2, 0);\n } else {\n // Open to the left\n ctx.moveTo(door.x, door.y);\n ctx.arc(door.x, door.y, width / 2, -Math.PI / 2, -Math.PI, true);\n }\n ctx.stroke();\n}\n\n// Draw a window\nfunction drawWindow(window) {\n const width = window.properties.width;\n const height = window.properties.height;\n \n ctx.strokeStyle = window.properties.color;\n ctx.fillStyle = window.properties.color;\n ctx.lineWidth = 2;\n \n // Window frame\n ctx.beginPath();\n ctx.moveTo(window.x - width / 2, window.y);\n ctx.lineTo(window.x + width / 2, window.y);\n ctx.stroke();\n \n // Window panes\n ctx.fillRect(window.x - width / 2, window.y - height / 2, width, height);\n \n // Window cross\n ctx.strokeStyle = '#000000';\n ctx.beginPath();\n ctx.moveTo(window.x, window.y - height / 2);\n ctx.lineTo(window.x, window.y + height / 2);\n ctx.moveTo(window.x - width / 2, window.y);\n ctx.lineTo(window.x + width / 2, window.y);\n ctx.stroke();\n}\n\n// Draw a room\nfunction drawRoom(room) {\n const width = room.properties.width;\n const height = room.properties.height;\n \n // Floor\n ctx.fillStyle = room.properties.floorColor;\n ctx.fillRect(room.x, room.y, width, height);\n \n // Walls\n ctx.strokeStyle = room.properties.color;\n ctx.lineWidth = 5;\n ctx.strokeRect(room.x, room.y, width, height);\n \n // Room name\n ctx.fillStyle = '#000000';\n ctx.font = '16px Arial';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(room.properties.name, room.x + width / 2, room.y + height / 2);\n}\n\n// Draw furniture\nfunction drawFurniture(furniture) {\n const width = furniture.properties.width;\n const height = furniture.properties.height;\n const type = furniture.properties.furnitureType;\n \n ctx.fillStyle = furniture.properties.color;\n ctx.strokeStyle = '#000000';\n ctx.lineWidth = 1;\n \n // Draw based on furniture type\n switch (type) {\n case 'bed':\n // Bed frame\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Pillow\n ctx.fillStyle = '#FFFFFF';\n ctx.fillRect(furniture.x + 5, furniture.y + 5, width - 10, height / 4);\n ctx.strokeRect(furniture.x + 5, furniture.y + 5, width - 10, height / 4);\n break;\n \n case 'sofa':\n // Sofa base\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Sofa back\n ctx.fillRect(furniture.x, furniture.y, width, height / 3);\n ctx.strokeRect(furniture.x, furniture.y, width, height / 3);\n \n // Sofa cushions\n ctx.fillStyle = '#FFFFFF';\n for (let i = 0; i < 3; i++) {\n if (width > height) {\n // Horizontal sofa\n const cushionWidth = width / 3;\n ctx.fillRect(furniture.x + i * cushionWidth + 5, furniture.y + height / 3 + 5, cushionWidth - 10, height * 2/3 - 10);\n ctx.strokeRect(furniture.x + i * cushionWidth + 5, furniture.y + height / 3 + 5, cushionWidth - 10, height * 2/3 - 10);\n } else {\n // Vertical sofa\n const cushionHeight = height / 3;\n ctx.fillRect(furniture.x + 5, furniture.y + i * cushionHeight + 5, width - 10, cushionHeight - 10);\n ctx.strokeRect(furniture.x + 5, furniture.y + i * cushionHeight + 5, width - 10, cushionHeight - 10);\n }\n }\n break;\n \n case 'table':\n // Table top\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Table legs\n const legSize = Math.min(width, height) / 8;\n ctx.fillRect(furniture.x + legSize, furniture.y + legSize, legSize, legSize);\n ctx.fillRect(furniture.x + width - legSize * 2, furniture.y + legSize, legSize, legSize);\n ctx.fillRect(furniture.x + legSize, furniture.y + height - legSize * 2, legSize, legSize);\n ctx.fillRect(furniture.x + width - legSize * 2, furniture.y + height - legSize * 2, legSize, legSize);\n break;\n \n case 'chair':\n // Chair seat\n ctx.fillRect(furniture.x, furniture.y, width, height * 2/3);\n ctx.strokeRect(furniture.x, furniture.y, width, height * 2/3);\n \n // Chair back\n ctx.fillRect(furniture.x, furniture.y - height / 3, width, height / 3);\n ctx.strokeRect(furniture.x, furniture.y - height / 3, width, height / 3);\n break;\n \n case 'toilet':\n // Toilet base\n ctx.fillRect(furniture.x, furniture.y, width, height * 2/3);\n ctx.strokeRect(furniture.x, furniture.y, width, height * 2/3);\n \n // Toilet seat\n ctx.fillStyle = '#FFFFFF';\n ctx.beginPath();\n ctx.ellipse(furniture.x + width / 2, furniture.y + height / 3, width / 2, height / 4, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n \n // Toilet tank\n ctx.fillStyle = furniture.properties.color;\n ctx.fillRect(furniture.x, furniture.y + height * 2/3, width, height / 3);\n ctx.strokeRect(furniture.x, furniture.y + height * 2/3, width, height / 3);\n break;\n \n case 'sink':\n // Sink base\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Sink bowl\n ctx.fillStyle = '#FFFFFF';\n ctx.beginPath();\n ctx.ellipse(furniture.x + width / 2, furniture.y + height / 2, width / 3, height / 3, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n \n // Faucet\n ctx.strokeStyle = '#888888';\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.moveTo(furniture.x + width / 2, furniture.y + height / 6);\n ctx.lineTo(furniture.x + width / 2, furniture.y + height / 3);\n ctx.stroke();\n break;\n \n case 'shower':\n // Shower base\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Shower head\n ctx.fillStyle = '#888888';\n ctx.beginPath();\n ctx.arc(furniture.x + width / 2, furniture.y + height / 6, width / 10, 0, Math.PI * 2);\n ctx.fill();\n \n // Shower door\n ctx.strokeStyle = '#AAAAAA';\n ctx.setLineDash([5, 5]);\n ctx.beginPath();\n ctx.moveTo(furniture.x, furniture.y);\n ctx.lineTo(furniture.x + width, furniture.y);\n ctx.stroke();\n ctx.setLineDash([]);\n break;\n \n case 'cabinet':\n // Cabinet base\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Cabinet doors\n ctx.strokeRect(furniture.x, furniture.y, width / 2, height);\n ctx.strokeRect(furniture.x + width / 2, furniture.y, width / 2, height);\n \n // Door handles\n ctx.fillStyle = '#888888';\n ctx.beginPath();\n ctx.arc(furniture.x + width / 4, furniture.y + height / 2, 3, 0, Math.PI * 2);\n ctx.arc(furniture.x + width * 3/4, furniture.y + height / 2, 3, 0, Math.PI * 2);\n ctx.fill();\n break;\n \n default:\n // Generic furniture\n ctx.fillRect(furniture.x, furniture.y, width, height);\n ctx.strokeRect(furniture.x, furniture.y, width, height);\n \n // Label\n ctx.fillStyle = '#000000';\n ctx.font = '12px Arial';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(furniture.properties.name, furniture.x + width / 2, furniture.y + height / 2);\n }\n}\n\n// Draw text\nfunction drawText(text) {\n ctx.fillStyle = text.properties.color;\n ctx.font = `${text.properties.fontSize}px Arial`;\n ctx.textAlign = 'left';\n ctx.textBaseline = 'top';\n ctx.fillText(text.properties.text, text.x, text.y);\n}\n\n// Draw dimension\nfunction drawDimension(dimension) {\n const startX = dimension.properties.startX;\n const startY = dimension.properties.startY;\n const endX = dimension.properties.endX;\n const endY = dimension.properties.endY;\n \n // Calculate perpendicular offset for dimension line\n const dx = endX - startX;\n const dy = endY - startY;\n const length = Math.sqrt(dx * dx + dy * dy);\n const offsetX = -dy / length * 20;\n const offsetY = dx / length * 20;\n \n // Draw dimension line\n ctx.strokeStyle = dimension.properties.color;\n ctx.lineWidth = 1;\n ctx.setLineDash([5, 3]);\n \n // Main dimension line\n ctx.beginPath();\n ctx.moveTo(startX + offsetX, startY + offsetY);\n ctx.lineTo(endX + offsetX, endY + offsetY);\n ctx.stroke();\n \n // Extension lines\n ctx.beginPath();\n ctx.moveTo(startX, startY);\n ctx.lineTo(startX + offsetX, startY + offsetY);\n ctx.moveTo(endX, endY);\n ctx.lineTo(endX + offsetX, endY + offsetY);\n ctx.stroke();\n \n // Arrowheads\n const arrowSize = 10;\n const angle = Math.atan2(dy, dx);\n \n ctx.setLineDash([]);\n ctx.beginPath();\n ctx.moveTo(startX + offsetX, startY + offsetY);\n ctx.lineTo(startX + offsetX + arrowSize * Math.cos(angle + Math.PI * 3/4), \n startY + offsetY + arrowSize * Math.sin(angle + Math.PI * 3/4));\n ctx.moveTo(startX + offsetX, startY + offsetY);\n ctx.lineTo(startX + offsetX + arrowSize * Math.cos(angle - Math.PI * 3/4), \n startY + offsetY + arrowSize * Math.sin(angle - Math.PI * 3/4));\n \n ctx.moveTo(endX + offsetX, endY + offsetY);\n ctx.lineTo(endX + offsetX + arrowSize * Math.cos(angle + Math.PI * 5/4), \n endY + offsetY + arrowSize * Math.sin(angle + Math.PI * 5/4));\n ctx.moveTo(endX + offsetX, endY + offsetY);\n ctx.lineTo(endX + offsetX + arrowSize * Math.cos(angle - Math.PI * 5/4), \n endY + offsetY + arrowSize * Math.sin(angle - Math.PI * 5/4));\n ctx.stroke();\n \n // Dimension text\n const textX = (startX + endX) / 2 + offsetX;\n const textY = (startY + endY) / 2 + offsetY;\n \n ctx.fillStyle = dimension.properties.color;\n ctx.font = '12px Arial';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(`${dimension.properties.length.toFixed(2)} m`, textX, textY);\n}\n\n// Draw selection highlight\nfunction drawSelectionHighlight(element) {\n ctx.strokeStyle = '#3b82f6';\n ctx.lineWidth = 2;\n ctx.setLineDash([5, 3]);\n \n switch (element.type) {\n case 'wall':\n // Highlight wall\n ctx.beginPath();\n ctx.moveTo(element.x, element.y);\n ctx.lineTo(element.properties.endX, element.properties.endY);\n ctx.stroke();\n \n // Draw endpoints\n ctx.fillStyle = '#3b82f6';\n ctx.beginPath();\n ctx.arc(element.x, element.y, 5, 0, Math.PI * 2);\n ctx.arc(element.properties.endX, element.properties.endY, 5, 0, Math.PI * 2);\n ctx.fill();\n break;\n \n case 'door':\n case 'window':\n // Highlight with a box\n const width = element.properties.width;\n ctx.strokeRect(element.x - width / 2 - 5, element.y - 15, width + 10, 30);\n break;\n \n case 'room':\n case 'furniture':\n // Highlight with a box\n ctx.strokeRect(element.x - 5, element.y - 5, \n element.properties.width + 10, element.properties.height + 10);\n break;\n \n case 'text':\n // Measure text width\n const textWidth = ctx.measureText(element.properties.text).width;\n const textHeight = element.properties.fontSize;\n \n // Highlight with a box\n ctx.strokeRect(element.x - 5, element.y - 5, textWidth + 10, textHeight + 10);\n break;\n \n case 'dimension':\n // Highlight dimension line\n ctx.beginPath();\n ctx.moveTo(element.properties.startX, element.properties.startY);\n ctx.lineTo(element.properties.endX, element.properties.endY);\n ctx.stroke();\n \n // Draw endpoints\n ctx.fillStyle = '#3b82f6';\n ctx.beginPath();\n ctx.arc(element.properties.startX, element.properties.startY, 5, 0, Math.PI * 2);\n ctx.arc(element.properties.endX, element.properties.endY, 5, 0, Math.PI * 2);\n ctx.fill();\n break;\n }\n \n ctx.setLineDash([]);\n}\n\n// Save the current state for undo\nfunction saveState() {\n undoStack.push(JSON.stringify(currentDesign));\n redoStack = [];\n \n // Limit stack size\n if (undoStack.length > 20) {\n undoStack.shift();\n }\n}\n\n// Undo the last action\nfunction undo() {\n if (undoStack.length > 1) {\n // Save current state to redo stack\n redoStack.push(undoStack.pop());\n \n // Restore previous state\n currentDesign = JSON.parse(undoStack[undoStack.length - 1]);\n selectedElement = null;\n updatePropertiesPanel();\n render();\n }\n}\n\n// Redo the last undone action\nfunction redo() {\n if (redoStack.length > 0) {\n // Get state from redo stack\n const state = redoStack.pop();\n \n // Save current state to undo stack\n undoStack.push(state);\n \n // Restore state\n currentDesign = JSON.parse(state);\n selectedElement = null;\n updatePropertiesPanel();\n render();\n }\n}\n\n// Reset the design\nfunction resetDesign() {\n currentDesign = {\n id: null,\n name: 'My House Design',\n elements: [],\n width: 2000,\n height: 1500,\n scale: 50\n };\n \n designNameInput.value = currentDesign.name;\n selectedElement = null;\n updatePropertiesPanel();\n render();\n saveState();\n}\n\n// Save the design to the server\nasync function saveDesign() {\n try {\n const response = await fetch('/api/designs', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(currentDesign)\n });\n \n const data = await response.json();\n \n if (data.success) {\n currentDesign.id = data.id;\n alert('Design saved successfully!');\n loadSavedDesigns();\n } else {\n alert('Error saving design: ' + data.error);\n }\n } catch (error) {\n alert('Error saving design: ' + error.message);\n }\n}\n\n// Load a design from the server\nasync function loadDesign(id) {\n try {\n const response = await fetch(`/api/designs/${id}`);\n const data = await response.json();\n \n if (data.success) {\n currentDesign = data.design;\n designNameInput.value = currentDesign.name;\n selectedElement = null;\n updatePropertiesPanel();\n render();\n saveState();\n } else {\n alert('Error loading design: ' + data.error);\n }\n } catch (error) {\n alert('Error loading design: ' + error.message);\n }\n}\n\n// Delete a design from the server\nasync function deleteDesign(id) {\n if (!id) return;\n \n try {\n const response = await fetch(`/api/designs/${id}`, {\n method: 'DELETE'\n });\n \n const data = await response.json();\n \n if (data.success) {\n if (currentDesign.id === id) {\n resetDesign();\n }\n \n loadSavedDesigns();\n } else {\n alert('Error deleting design: ' + data.error);\n }\n } catch (error) {\n alert('Error deleting design: ' + error.message);\n }\n}\n\n// Load saved designs into the dropdown\nasync function loadSavedDesigns() {\n try {\n const response = await fetch('/api/designs');\n const data = await response.json();\n \n if (data.success) {\n // Clear dropdown\n loadDesignSelect.innerHTML = '';\n \n // Add designs to dropdown\n data.designs.forEach(designId => {\n const option = document.createElement('option');\n option.value = designId;\n option.textContent = designId.replace('design_', 'Design ');\n loadDesignSelect.appendChild(option);\n });\n } else {\n console.error('Error loading designs:', data.error);\n }\n } catch (error) {\n console.error('Error loading designs:', error);\n }\n}\n\n// Initialize the app\ninit();",[],[93,111],"580d74c0-34e4-11f0-8ae3-9e149126039e","index.html","580d757e-34e4-11f0-8ae3-9e149126039e",["D",1747681578287],"\n\n\n \n \n House Designer\n \n \n \n\n\n

House Designer

\n \n

\n\n

Tools

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

\n\n

Properties

\n No element selected\n

\n \n

\n\n

Furniture

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

\n\n

\n Grid Size:\n \n

\n Design Name:\n \n

\n \n \n

\n X: 0, Y: 0\n Scale: 1:50\n

\n View Source\n

\n\n \n \n\n \n \n\n \n\n",[],[93,119],["D",1747681535733],[128],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":129,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_73":130,"_18":131},["D",1747681746265],[],[19,36],"d8d55c40-34e3-11f0-a6f0-9e149126039e",["D",1747681364854],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","bb7ea790-3377-11f0-994d-f304847156a7","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","30a4c1e3-deea-428d-9e1b-7617842b44c1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_184":180},"org",{"_11":12,"_178":-5,"_179":180,"_141":142,"_181":182,"_183":55},"branch",{"_17":44,"_13":16,"_34":42,"_170":132,"_171":-5,"_172":-5,"_173":-5,"_174":-5,"_175":-5,"_176":14,"_177":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ4RkRQTGp1V1FQNlMwZVcxVHBzMHl5TmF2VyJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":132,"_13":14,"_47":244,"_134":-5,"_135":55,"_136":137,"_138":137,"_139":-5,"_140":-5,"_141":142,"_143":38,"_144":46,"_145":46,"_146":-5,"_147":60,"_148":149,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":155,"_156":155,"_157":158,"_159":158,"_160":158,"_161":155,"_162":155,"_163":245,"_165":246,"_167":247,"_169":55},[217,219,223,225],"files",[217,218,219,220,221,222,223,224,225],"counts",{"_208":60,"_209":49,"_210":60,"_32":211,"_212":213},[206],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":204,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_18":205},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747681535733],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":207},[19,36],"pulls","branches","forks",{"_214":60,"_216":60},"connections",{"_214":60,"_215":60},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":62,"_45":46,"_47":125,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":242,"_18":243},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":129,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_73":240,"_18":241},{"_34":92,"_13":93,"_37":94,"_39":-5,"_41":42,"_43":95,"_45":46,"_47":96,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":238,"_18":239},{"_34":118,"_13":119,"_37":120,"_39":94,"_41":42,"_43":95,"_45":46,"_47":121,"_17":60,"_50":24,"_52":122,"_54":55,"_56":-5,"_73":236,"_18":237},{"_34":110,"_13":111,"_37":112,"_39":94,"_41":42,"_43":113,"_45":46,"_47":114,"_17":60,"_50":88,"_52":115,"_54":55,"_56":-5,"_73":234,"_18":235},{"_34":102,"_13":103,"_37":104,"_39":94,"_41":42,"_43":105,"_45":46,"_47":106,"_17":60,"_50":24,"_52":107,"_54":55,"_56":-5,"_73":232,"_18":233},{"_34":76,"_13":77,"_37":78,"_39":-5,"_41":42,"_43":79,"_45":46,"_47":80,"_17":60,"_50":59,"_52":-5,"_54":55,"_56":-5,"_73":230,"_18":231},{"_34":84,"_13":85,"_37":86,"_39":78,"_41":42,"_43":79,"_45":46,"_47":87,"_17":60,"_50":88,"_52":89,"_54":55,"_56":-5,"_73":228,"_18":229},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":49,"_45":46,"_47":71,"_17":60,"_50":24,"_52":72,"_54":55,"_56":-5,"_73":226,"_18":227},[],[69],[],[77,85],[224],[77],[],[93,103],[],[93,111],[],[93,119],[220,221,222],[93],[],[19,36],[218],[19],["D",1747681364854],{"_11":12,"_184":180},{"_11":12,"_178":-5,"_179":180,"_141":142,"_181":182,"_183":55},{"_17":44,"_13":16,"_34":42,"_170":132,"_171":-5,"_172":-5,"_173":-5,"_174":-5,"_175":-5,"_176":14,"_177":12},"ctx",{"_163":-5,"_201":281,"_282":283,"_284":285,"_286":55,"_287":55,"_288":55,"_289":46,"_290":-5,"_291":-7,"_292":-7,"_293":60,"_294":55,"_295":55,"_296":-5,"_297":55,"_298":55,"_299":55,"_300":-5},"ENV",{"_252":253,"_254":255,"_256":16,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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"]

Tools

Properties

Furniture

Save Design

Delete Design