1. Base de conocimiento
  2. Editor de recintos

Control de visibilidad de elementos de la interfaz

Resumen

El mecanismo shortToFullMap ofrece una forma flexible de controlar la visibilidad de los elementos de la interfaz mediante parámetros de URL, permitiendo identificadores cortos y completos para ocultar elementos con precisión.

menu

Componentes clave

shortToFullMap

Un objeto de mapeo que traduce los identificadores cortos a sus nombres completos y canónicos para los elementos de la interfaz.

const shortToFullMap: Record<string, string> = {
  // Mode-related mappings
  schema: 'mode.schema',
  underlay: 'mode.underlay',
  venueShape: 'mode.venueShape',
  pricingZones: 'mode.pricingZones',
  pricing: 'mode.pricing',
  section: 'mode.section',

  // Tool-related mappings
  select: 'tool.select',
  seatRows: 'tool.seatRows',
  table: 'tool.table',

  shape: 'tool.shape',
  rect: 'tool.shape.rect',
  circle: 'tool.shape.circle',
  line: 'tool.shape.line',
  polygon: 'tool.shape.polygon',

  label: 'tool.label',
  selectSeats: 'tool.selectSeats',
  selectRows: 'tool.selectRows',
  addSeat: 'tool.addSeat',
  numberSeats: 'tool.numberSeats',
  selectSections: 'tool.selectSections',
  save: 'tool.save',
};

Categorías de mapeo

Elementos de modo

Controlan los distintos modos de la aplicación:

  • schema: modo esquema
  • underlay: modo base
  • venueShape: modo forma del recinto
  • pricingZones: modo zonas de precios

Elementos de herramienta

Controlan las distintas herramientas de interacción:

  • select: herramienta de selección
  • seatRows: herramienta de filas de asientos
  • shape: herramientas de dibujo de formas
    • rect: rectángulo
    • circle: círculo
    • line: línea
    • polygon: polígono

Herramientas adicionales

  • label: herramienta de etiquetado
  • selectSeats: selección de asientos
  • save: función de guardado

Funciones utilitarias

isHidden(title: string, hiddenItems: string[]): boolean

Determina si un elemento concreto de la interfaz debe ocultarse según los parámetros proporcionados.

Parámetros

  • title: identificador completo del elemento de la interfaz (por ejemplo, ‘mode.schema’)
  • hiddenItems: array de elementos que potencialmente se ocultarán

Ejemplo

const hiddenItems = ['pricing', 'select'];

getHiddenItemsFromURL(): string[]

Extrae los elementos ocultos directamente de la cadena de consulta de la URL de la página actual.

Valor de retorno

Un array de identificadores de los elementos que se ocultarán.

URL de ejemplo

https://example.com/app?hidden=pricing,select,label

Escenarios de uso

Ocultar elementos mediante la URL

  • Controla la visibilidad de los elementos de la interfaz añadiendo un parámetro hidden a la URL.

Formatos admitidos

  • Identificadores cortos: ?hidden=pricing,select
  • Identificadores completos: ?hidden=mode.pricing,tool.select
  • Identificadores mixtos: ?hidden=pricing,tool.select

URLs de ejemplo

  • Ocultar las herramientas de precios y selección:
    • Copy/app/venues/42/schemas/295?hidden=pricing,select
  • Ocultar herramientas de forma concretas:
    • Copy/app/design?hidden=line,polygon

Buenas prácticas

  • Usa nombres coherentes en shortToFullMap
  • Prefiere los identificadores completos para mayor claridad
  • Valida y sanea los parámetros de la URL
  • Gestiona los casos en que los identificadores no existan en el mapeo

Configuración avanzada

  • Amplía shortToFullMap para incluir más elementos de la interfaz a medida que crece tu aplicación.

Mejoras potenciales

  • Añade seguridad de tipos con un enum predefinido de identificadores permitidos
  • Implementa una lógica de visibilidad más sofisticada
  • Añade herramientas de registro o depuración

Consideraciones de seguridad

  • Sanea los parámetros de la URL
  • Valida las listas entrantes de elementos a ocultar
  • Evita el posible abuso del mecanismo de ocultación