Mini app · inspirada en AutoCAD
Planos
Un CAD 2D que intenta sentirse como AutoCAD: la línea de comandos, la referencia a objetos, Orto, la selección por ventana y los pinzamientos. Solo plano, sin 3D. Los comandos van en inglés, como los usa casi todo el mundo.
Qué tiene
Nivel 1 · la sensación de AutoCAD
completo- Lienzo oscuro infinito con mira (crosshair), cuadro de selección e icono del SCP
- Zoom con la rueda alrededor del cursor, encuadre con el botón central, doble clic central = Zoom Extensión
- Línea de comandos con prompts, opciones [entre/corchetes] clicables, <valor por defecto> y autocompletado
- Enter, Espacio o clic derecho repiten el último comando; Esc cancela
- Dibujo: LINE, PLINE, RECTANG, CIRCLE (radio, diámetro, 2P, 3P) y ARC (3 puntos, centro, final)
- Coordenadas absolutas 10,20, relativas @10,0, polares @10<45 y distancia directa con el cursor
- OSNAP con sus marcadores: Endpoint □, Midpoint △, Center ○, Quadrant ◇, Intersection ✕, Perpendicular ⊥, Nearest ⧖
- Barra de estado: coordenadas, GRID (F7), SNAP (F9), ORTHO (F8), OSNAP (F3) con menú de modos y DYN
Nivel 2 · lo que lo vuelve usable
completo- Selección por clic, ventana (izquierda→derecha, azul) y captura (derecha→izquierda, verde); Shift quita
- Pinzamientos (grips): arrastrar extremos, centros, cuadrantes y vértices
- ERASE, MOVE, COPY, ROTATE, SCALE, MIRROR, OFFSET y TRIM (modo rápido)
- Capas: crear, renombrar, color ACI, encender/apagar, bloquear, capa actual
- Deshacer y rehacer por comando (Ctrl+Z / Ctrl+Y, U, UNDO, REDO)
- Copiar y pegar (Ctrl+C / Ctrl+V) con punto de inserción, también entre pestañas
- DIST para medir y paleta de Propiedades editable (Ctrl+1)
- Guardado automático en el navegador y exportar a SVG
Extras que surgieron por el camino
- Exportar a DXF R12: el archivo se abre en AutoCAD con sus capas y colores
- Referencias de una sola vez escribiendo END, MID, CEN, INT… en mitad de un comando
- Entrada dinámica: prompt, longitud y ángulo junto al cursor
- Historial de la línea de comandos con F2 y flechas ↑/↓ para recuperar lo escrito
- Rejilla adaptativa que se agrupa de 5 en 5 al alejarse, con los ejes X e Y teñidos
Nivel 3 · opcional
pendiente- Cotas, texto y sombreados
- Bloques y referencias externas
- Espacio papel, presentaciones e impresión a escala
- Importar DXF / DWG
Fuera de alcance en todos los niveles: el 3D (sólidos, superficies, coordenada Z, ViewCube y órbita). Todo ocurre en el plano.
Librerías y para qué sirve cada una
| Librería | Papel | Qué aporta aquí |
|---|---|---|
| Next.js 16 (App Router) | Rutas y build | Las páginas de información se prerenderizan; el editor se carga solo en el cliente con dynamic(…, { ssr: false }). |
| React 19 | Interfaz | Cinta, paletas y línea de comandos. El dibujo NO pasa por React: lo pinta el canvas directamente. |
| Canvas 2D | Render | API del navegador, sin librería. Dos capas: escena (entidades) y superposición (cursor, vista previa). |
| Zustand 5 (vanilla) | Estado | Un store fuera de React que el lienzo lee y al que se suscribe sin provocar renders. |
| Immer 11 | Deshacer | produceWithPatches devuelve qué cambió y cómo revertirlo: el historial guarda patches, no copias del dibujo. |
| rbush | Índice espacial | R-tree: encuentra lo que hay bajo el cursor o en pantalla entre decenas de miles de entidades en microsegundos. |
| lucide-react | Iconos | Los iconos de modificar; los de dibujo son SVG propios. |
| Vitest | Tests | Geometría, comandos e historial se prueban sin navegador. |
Hecho a mano (sin librería)
- Vista y render
- La matriz mundo↔pantalla, el zoom alrededor del cursor, la rejilla adaptativa y el dibujado por lotes.
- Geometría
- Intersecciones segmento/arco, punto más cercano, OSNAP, OFFSET con esquinas en inglete y TRIM.
- Motor de comandos
- Cada comando es una función generadora: un yield por pregunta de la línea de comandos.
- DXF y SVG
- Unas 150 líneas: el formato DXF R12 es texto con pares código/valor.
Si fuera un producto real
- WebGL (three.js, regl, PixiJS)
- Para cientos de miles de entidades a 60 fps hace falta GPU; Canvas 2D llega hasta unas decenas de miles.
- Open CASCADE (opencascade.js) / Clipper2
- Geometría robusta: offsets de curvas complejas, booleanas, tolerancias.
- dxf-parser / LibreDWG / ODA SDK
- Leer DXF y DWG de verdad (lo que haría falta para importar).
- Yjs
- Para editar el mismo plano entre varios (como en Documentos).
Comandos y atajos
L, PL, REC, C, ALINE, PLINE, RECTANG, CIRCLE, ARC
E, M, CO, RO, SC, MIERASE, MOVE, COPY, ROTATE, SCALE, MIRROR
O, TR, DIOFFSET, TRIM, DIST
Z (E, W, P), PZOOM (Extents, Window, Previous), PAN
LA, PR, OSLAYER, PROPERTIES, OSNAP
Enter / Espacio / clic derechoConfirmar o repetir el último comando
EscCancelar el comando / vaciar la selección
F3, F7, F8, F9, F12OSNAP, GRID, ORTHO, SNAP, DYN
F2 / ↑ ↓Historial / recuperar lo escrito
Ctrl+Z / Ctrl+YDeshacer / rehacer
Ctrl+C, Ctrl+X, Ctrl+VCopiar, cortar, pegar
Ctrl+A / Supr / Ctrl+1Seleccionar todo / borrar / propiedades