My Home Planner

Planejador de planta baixa no navegador para desenhar cômodos, portas, janelas e organizar móveis em escala real (centímetros).

Como rodar

npm install
npm run dev

Abra o endereço indicado no terminal (geralmente http://localhost:5173).

Para gerar a versão de produção:

npm run build
npm run preview

Como funciona

A interface tem duas áreas:

1. Barra lateral — criar e editar cômodos, aberturas e móveis; backup/importação
2. Plano (canvas) — visualização em planta baixa, com zoom, pan e arraste

As medidas são em centímetros. As paredes usam a grossura informada; o app calcula o tamanho externo e a área em m².

O progresso fica salvo automaticamente no navegador (localStorage). Use backup em disco para não perder o trabalho ou levar a planta para outro computador.

---

1. Cômodos

Na aba Cômodos:

• Informe nome, largura, profundidade e grossura da parede
• O app mostra as medidas internas e externas antes de criar
• Depois de criar, selecione o cômodo no plano ou na lista para editar

Mover cômodos

• Com o cômodo selecionado, use o botão mover no plano e arraste
• Ou ajuste Posição X/Y e as setas no painel inferior
• Ao aproximar dois cômodos, as paredes se sobrepõem (compartilham a mesma espessura, sem somar grossura)

---

2. Portas, janelas e aberturas

Na aba Portas / Janelas:

1. Escolha o cômodo
2. Veja só as aberturas daquele cômodo
3. Adicione porta, janela ou abertura sem porta (vão / corredor)

• Porta — desenha o arco de abertura (vão livre na frente)
• Janela — marca o vão na parede
• Abertura — vão sem porta, útil entre cômodos/corredores

Selecione uma abertura no plano ou na lista para editar posição, largura, parede e (em portas) dobradiça/sentido. Também dá para arrastar a abertura ao longo da parede.

Quando dois cômodos compartilham parede, a abertura fica por cima e corta as duas paredes sobrepostas.

---

3. Móveis

Na aba Móveis:

1. Cadastre o móvel no catálogo (nome + largura × profundidade)
2. Escolha o cômodo e clique em + para colocar no plano
3. Arraste para posicionar; use Girar 90° se precisar

Ao selecionar um móvel, dá para editar nome e medidas no painel inferior (altera o item do catálogo e todas as cópias dele).

---

4. Controles do plano

Ação	Como
Zoom	Scroll do mouse ou botões + / −
Mover a vista (pan)	Arrastar o fundo da grade
Selecionar	Clique no cômodo, abertura ou móvel
Mover cômodo	Selecionar → botão mover
Mover móvel	Arrastar o retângulo colorido
Mover abertura	Arrastar ao longo da parede

---

5. Backup e importação

No topo da barra lateral:

• Salvar backup — baixa um arquivo .json com a planta inteira
• Importar — carrega um backup e substitui a planta atual (pede confirmação)

Use isso para versionar a casa, enviar para outra pessoa ou recuperar depois de limpar o navegador.

Licença

Este projeto é open source sob a licença MIT.

Estrutura principal

src/
  components/
    FloorPlan.tsx   # canvas da planta
    Sidebar.tsx     # painéis laterais e edição
  geometry.ts       # medidas, arcos, snap de paredes
  store.ts          # estado da planta
  backup.ts         # exportar / importar JSON
  types.ts          # tipos do modelo