Управление видимостью элементов интерфейса

Обзор

Механизм shortToFullMap предоставляет гибкий способ управления видимостью элементов интерфейса через параметры URL, позволяя использовать как короткие, так и полные идентификаторы для точного скрытия элементов.

Ключевые компоненты

shortToFullMap

Объект маппинга, который преобразует короткие идентификаторы в их полные, канонические имена для элементов интерфейса.

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',
};

Категории маппинга

Элементы режимов

Управление различными режимами приложения:

schema: режим схемы
underlay: режим подложки
venueShape: режим формы площадки
pricingZones: режим ценовых зон

Элементы инструментов

Управление различными инструментами взаимодействия:

select: инструмент выделения
seatRows: инструмент рядов мест
shape: инструменты рисования фигур
- rect: прямоугольник
- circle: круг
- line: линия
- polygon: многоугольник

Дополнительные инструменты

label: инструмент надписей
selectSeats: выбор мест
save: функция сохранения

Служебные функции

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

Определяет, должен ли конкретный элемент интерфейса быть скрыт, на основе переданных параметров.

Параметры

title: полный идентификатор элемента интерфейса (например, ‘mode.schema’)
hiddenItems: массив элементов, которые потенциально нужно скрыть

Пример

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

getHiddenItemsFromURL(): string[]

Извлекает скрываемые элементы непосредственно из строки запроса текущей страницы.

Возвращаемое значение

Массив идентификаторов элементов, которые нужно скрыть.

Пример URL

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

Сценарии использования

Скрытие элементов через URL

Управляйте видимостью элементов интерфейса, добавляя параметр hidden в URL.

Поддерживаемые форматы

Короткие идентификаторы: ?hidden=pricing,select
Полные идентификаторы: ?hidden=mode.pricing,tool.select
Смешанные идентификаторы: ?hidden=pricing,tool.select

Примеры URL

Скрыть инструменты цен и выделения:
- Copy/app/venues/42/schemas/295?hidden=pricing,select
Скрыть конкретные инструменты рисования фигур:
- Copy/app/design?hidden=line,polygon

Расширенная конфигурация

Расширяйте shortToFullMap, добавляя новые элементы интерфейса по мере роста вашего приложения.

Потенциальные улучшения

Добавьте типобезопасность с помощью предопределённого перечисления разрешённых идентификаторов
Реализуйте более продвинутую логику видимости
Добавьте инструменты логирования или отладки

Соображения безопасности

Очищайте параметры URL
Проверяйте входящие списки скрываемых элементов
Предотвращайте возможное злоупотребление механизмом скрытия