Org chart
В этом материале расскажем о разработке интерактивной браузерной схемы подразделений и сотрудников компании. Проанализировав сторонние решения мы осознали, что все они как-то не очень располагают к показу сотен сотрудников одновременно (и помимо этого склонны использовать свёрнутые узлы, что нам вообще не понравилось).
Т. к. мы явно представляли эту схему как классический UX-паттерн «Infinite Canvas» (то, к чему все привыкли в Miro и Figma): вместо кучи фильтров и сортировок — у нас огромный холст, пользователю лишь остаётся только зумить и энергично перемещаться по холсту.
Trackpad: событие wheel скроллит схему, драг на пкм + колесо, зум — pinch zoom, либо при работе с мышью сtrl + wheel. Т.е. эта схема под трекпад, но и с мышью она функциональна. Клик работает. Mouse — wheel зумит схему, драг на пкм и колесо. Клик работает. Опять же работает и для мыши, и для трекпада — на трекпаде драг нажатием двумя пальцами. DragOnly — wheel зумит, драг на лкм, клик не работает.
Проанализировали кучу структурурных схем и во всех из них конфликт принципов задания иерархии подразделений — либо Product-based либо Divisional-based.
В итоге делали свой такой вариант, где можно хоть 1000 человек сразу показать в одном экране и заодно снять это ограничение ограничение и был вариант создавать хоть по 10 виртуальных отделов на каждого человека: «все девушки-программистки», «все мальчики-блондины» и т. д. И никакие неудобные фильтры не нужно для этого делать — линии показывают связи к каким организационным сущностям каждый человек относится.
Сущностные вещи делаются с помощью Yoga (это не полноценный рендерер, это код, который по описанию свойств flexbox создаёт 3д-описание, которое легко рендерить).
В принципе, описать элемент в стиле этого фреймворка — это почти то же самое, что использовать реакт для описания css-flexbox-стилей у компонента.