Biblioteca de stencils draw.io para Maps — 185 formas profesionales con búsqueda y drag&drop

Descripción

Integración completa de la biblioteca de stencils profesional de draw.io en el Map Editor (página Maps). Sustituye el menú desplegable de 12 formas básicas por un panel lateral estilo draw.io con 185 formas especializadas en DCIM (equipos de red, racks, componentes eléctricos, mobiliario de plano).

Características principales

• Panel Shapes lateral derecho (StencilPanel.js): búsqueda transversal, secciones colapsables por set (Basic + Network/Floorplan/Cabinets/Racks genéricos/Racks APC), arrastrar-y-soltar al lienzo, clic para insertar al centro. Estado abierto/cerrado persistido en localStorage.
• 185 formas profesionales convertidas offline desde draw.io:
  • Network (57): switches, routers, firewalls, UPS, servidores, etc.
  • Floorplan (46): paredes, puertas, escaleras, mobiliario (ideal para planos de Salas).
  • Cabinets eléctricos (53): componentes de cuadro, breakers, contactores.
  • Racks 19” genéricos (26): desde 1U hasta 48U, patch panels, servidores.
  • Racks APC (3): modelos específicos de APC.
• Renderer SVG avanzado (StencilRenderer.js):
  • Rasterización con supersampling 3x para zoom limpio.
  • Tematizado automático al vuelo: currentColor → color de trazo del usuario, blancos draw.io → fondo oscuro del lienzo.
  • Etiqueta editable bajo la forma (doble clic → renombrar, persiste en data.label vía PUT parcial de anotaciones, cero cambios de backend).
• Compatibilidad total hacia atrás: el parser vectorial legacy (5 primitivas) sigue siendo la opción para leer las formas antiguas guardadas en BD.

Implementación

Componentes principales

1. Conversor mxGraph → SVG (scripts/stencils/convert_mxgraph_stencils.py):

   • Descarga los 5 sets de stencils XML desde el repo jgraph/drawio (fijado al commit 43c1dfa7, Apache 2.0).
   • Interpreta el mini-lenguaje de dibujo mxGraph (path, rect, roundrect, ellipse, estilos, comandos de pintado).
   • Emite catálogo JSON estático con carga perezosa (static/stencils/index.json + <set_id>.json).
   • QA visual: scripts/stencils/preview.html renderiza todas las formas con tematizado dark.

2. StencilRenderer.js:

   • Instancia Konva.Image desde el SVG completo del stencil.
   • Aplica supersampling 3x para mantener claridad en zoom.
   • Mapea colores: stroke draw.io → currentColor (controlado por el usuario), fill blanco → fondo oscuro del lienzo.
   • Maneja etiqueta editable mediante doble clic (persiste en data.label, PUT parcial de anotaciones).

3. StencilPanel.js:

   • Panel lateral derecho dockable (hereda .sidebar-panel de editor.css).
   • Búsqueda transversal sobre todas las 185+ formas.
   • Secciones colapsables por set (Basic + 5 sets de catálogo).
   • Drag&drop al lienzo (Konva drag events) o clic = insertar al centro.

4. Fix de datos: AnnotationsRenderer.js

   • El endpoint /annotations devolvía data como string JSON (serialización en el backend).
   • El modo Sala ya lo parseaba en su carga; el modo mapa no, causando fallos silenciosos cuando los renderers leían campos (data.render, data.svg).
   • Normalización en AnnotationsRenderer.renderAnnotation: si annot.data es string, parsearlo; si falla, defaultear a {}.

Cambios de código

• Nuevos archivos: scripts/stencils/convert_mxgraph_stencils.py, scripts/stencils/preview.html, archivos JSON generados en static/stencils/.
• Modificados: static/js/blueprints/helpers/StencilRenderer.js (nuevo), static/js/blueprints/helpers/StencilPanel.js (nuevo), static/css/pages/shapes-library.css (refactorizado), static/js/blueprints/helpers/AnnotationsRenderer.js (fix data.string), static/js/blueprints/drawing/tools/SelectTool.js (export con render + label).
• Removidos: static/js/blueprints/helpers/ShapesLibraryHelper.js (deprecated), CSS dead code de #drawio-panel, bloque de restore en map_editor.js, templates/blueprint_editor.html.part (huérfano).

Internacionalización

5 strings nuevos traducidos (django.po + compilemessages):

• SHAPES → “FORMAS”
• Search shapes → “Buscar formas”
• Search shapes... → “Buscar formas…”
• Shapes → “Formas”
• Toggle Shapes Panel → “Mostrar/ocultar panel de formas”

Licencia

Draw.io stencil libraries (Apache-2.0, commit 43c1dfa7 del repo jgraph/drawio) registradas en core/licenses_data/frontend.py. El LICENSE extra de stencils/ solo restringe productos Atlassian (N/A en nuestro caso, uso comercial permitido).

Verificación E2E

Local (stack Docker dev):

• ✅ Insertar por clic y por drag&drop.
• ✅ Renombrar con doble clic en etiqueta.
• ✅ Persistencia en BD y re-render tras recarga.
• ✅ Búsqueda transversal (“ups” → Network + Racks APC).
• ⚠️ Límites honestos:
  • Cables anclan al bounding box de la forma; la etiqueta lo agranda ~10px hacia abajo → ancla queda un pelín baja. (Pulido de F4)
  • Rellenos oscuros de algunos racks quedan apagados sobre lienzo oscuro. (Pulido de F4)

Véase también

• [[concept—blueprints—map-editor]]
• [[concept—saas—ux]]
• [[concept—core—observability]]