Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями

Значимый прорыв формирует отрасль ИИ: true_engineer только что Canvas или SVG для карты офиса: как мы выбрали и справились с неочевидными граблями 4 мин 1 JavaScript * Веб-разработка * Если к вам придут с задачей внедрения интерактивной карты офиса, какой рендер вы выберете? Верхнеуровневый обзор скажет, что Canvas хорош для частых перерисовок (географические карты, игры), а SVG — когда важна работа с отдельными элементами, которые естественным образом присутствуют в DOM. В этой статье не будет глубокого анализа, это живая история о том, почему мы отказались от идеи использовать Canvas, как строили карту с нуля, какие инструменты использовали, как организовали связь между SVG-элементами и данными в БД, и как сделали админку, где карту могут менять дизайнеры без участия разработчиков.

Как мы выбирали между Canvas и SVGИтак, к нам пришли с задачей: заменить существующий модуль интерактивных карт офисов. Предыдущая система была сделана на Canvas, а координаты пинов рабочих мест хранились на бэкенде. Это создавало проблему: любое изменение изображения карты офиса влекло риск несоответствия координат пина и самого рабочего места.

Технические детали

Это был первый звоночек в пользу SVG — отрисовку пина можно привязать к конкретному объекту на карте, а не к абстрактным координатам. Кроме того, информация на экране была перегружена. Ее имело смысл скрыть за всплывающими окнами, которые появлялись после выбора объекта пользователем.

В SVG это сделать проще — каждый элемент доступен в DOM, и клик по нему обрабатывается нативно. Более того, сами карты офиса предполагалось менять без участия разработчиков — силами дизайнеров и, в идеале, ответственными за офисную инфраструктуру. В крайнем случае — после короткого обучения персонала.

Этот пункт оказался критическим. Он отсеивает практически все популярные библиотеки для построения интерактивных карт, оставляя только вариант с использованием файлов SVG, нарисованных дизайнерами в привычных инструментах (Figma, Illustrator и т. Что должно быть интерактивнымПо требованиям, взаимодействию с пользователем подлежат не все элементы, а только три типа:Рабочие местаПереговорные комнатыОборудование У каждого типа — своя информация, которая отображается при клике.

Отраслевые последствия

В результате хотелось бы видеть что-то такое:Но некоторая зависимость в отображении от BE все же присутствует, поговорим на примере оборудования. Placeholder-элементы: как мы подставляли иконки в зависимости от данных бэкаВ отображении оборудования есть зависимость от бэкенда — иконка должна меняться в зависимости от типа оборудования (принтер, массажное кресло, сканер и т. Для этого мы использовали placeholder-элементы.

В исходном SVG-файле оставляем элементы-заглушки, на место которых после загрузки карты подставляется нужная SVG-иконка в зависимости от ответа бэкенда. Одна маленькая SVG на каждый тип оборудования.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.