CreaRack-SL

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

Vista limpiaEditar
Funcionalidadactivecreado Fri Jul 10#frontend#maps#konva#racks#cables#performance#bugfix

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]]
Inicio
Yo