Cables y resize funcionan con racks de visual stencil (v1.48.4)

Descripción

Los racks creados desde stencils (static/js/blueprints/drawing/templates/racks-stencil.js) usan un visual basado en Konva.Image en lugar de Rect clásico. El cálculo de anclas de cables (MapCables.getDistributedAnchor) y el redimensionado interactivo (MapInteraction.transformer) buscaban explícitamente node.findOne('Rect'), que no existe en stencils → TypeError silencioso → cable no se dibuja, resize silenciosamente fallaba.

Patrón corregido

Cambio de:

const rect = node.findOne('Rect');
const w = rect.width() * node.scaleX();

A:

const body = node.findOne('.rack-body') || node.findOne('Rect');
const w = (body ? body.width() : node.width() || 70) * node.scaleX();

El selector .rack-body es común a ambos visuales (Rect clásico e Image stencil).

Cambios

Archivos modificados (5 en static/js/blueprints/)

1. MapCables.js (líneas 245-248)

   • getDistributedAnchor(): busca .rack-body primero, fallback a clásico, fallback final a dimensiones por defecto (70×35).
   • Raíz del crash reportado por Edu en PROD.

2. MapHistoryAdapter.js (línea 90)

   • undoResize(): detector de geometría para undo — ahora captura stencils.

3. MapInteraction.js (líneas 378–424)

   • transformer.on('transformstart'): captura tamaño inicial.
   • transformer.on('transformend'): redimensiona body y ajusta texto. Nuevo: si rect es Image (stencil), el texto va DEBAJO centrado (margen 4px), con ancho expandido; si Rect clásico, usa modo clásico.
   • transformer.on('dragend'): historia de cambios.

4. CableTool.js (líneas 260–262, 282)

   • highlightNode() y resetNodeHighlight(): resaltado azul/verde al conectar, ahora también en stencils.

5. MapConnections.js (línea 195)

   • getNodeCenter() para cálculo del centro en conexiones extendidas.

Versión

• v1.48.4 (build 2026-07-10)
• Entrada en RELEASE_NOTES.md: “Los cables ya conectan con los racks creados desde stencils”.

Verificación

• ✓ E2E local: cable entre dos racks-stencil.
• ✓ Pintado, persistido en BD.
• ✓ Recarga de página: cable repintado correctamente.
• ✓ Redimensionado de stencil: transformer ajusta geometría sin errores.
• ✓ 0 errores JS en consola.

Detalles técnicos

Selector .rack-body

Ambos visuales definen este atributo:

• Rect clásico: etiqueta class="rack-body" en la Rect principal.
• Image stencil: etiqueta class="rack-body" en la Image principal.

Fallback a findOne('Rect') preserva compatibilidad si algún rack viejo carece de clase.

Posicionamiento de texto en stencil

El visual stencil mide ~200×100 (imagen), pero el texto clásico (width() y height() iguales al rect) no encaja bien. Solución:

if (rect.getClassName() === 'Image') {
    text.x(-newW / 2);              // centrado horizontal
    text.y(newH + 4);               // debajo, margen 4px
    text.width(newW * 2);           // expandido para evitar wrap
} else {
    text.width(newW);
    text.height(newH);
}

Impacto usuario

• ✓ Mejor: cablear racks nuevos de stencil funciona como los clásicos.
• ✓ Mejor: redimensionado de stencils ya no falla silenciosamente.
• ✓ Mejor: resaltado visual (azul/verde) al conectar cables es visible en stencils.

Véase también

• [[concept—frontend—visual-racks]]
• [[entity—static—blueprint—map-cables]]
• [[entity—static—blueprint—map-interaction]]