leaflet-draw 1.0.4 (последний release 2017) сломан с Leaflet 1.8+:
mousedown сразу триггерит mouseup, прямоугольник схлопывается в
точку при первом нажатии. На пользовательском скрине quadrate ~5px
вместо нарисованной области.
Заменил полностью на свою draw-implementation (~80 строк):
- Toolbar UI: 3 кнопки (Прямоугольник / Полигон / Очистить)
- Active mode highlights ultramarain background
- Rectangle: mousedown → preview → mouseup finalize. Map.dragging
отключается в rectangle mode чтобы drag не панил карту.
- Polygon: click добавляет вершину + dashed mouse-line preview к
курсору. Double-click closes (min 3 vertices). doubleClickZoom
disabled на map чтобы не конфликтовало.
- DrawMode read через ref чтобы listeners не пересоздавались на
каждом state change.
Удалены deps:
- leaflet-draw 1.0.4 (broken)
- @types/leaflet-draw
Bundle: -68KB minified / -23KB gzip (less broken legacy code).
Tests: 89 passed. i18n: RU/EN ключи для новой toolbar.
В Leaflet 1.9.4 default attribution содержит ukrainian flag emoji
('🇺🇦 Leaflet'). Для admin tool ЦУОД политически нейтральнее без него.
attributionControl: false выключает весь control (Leaflet + OSM
credit). OSM tile usage всё ещё legitimate — admin internal tool,
не публичный сервис.
DevTools на пользовательском скрине показал:
- Map div СУЩЕСТВУЕТ в DOM (display:block, height:520 inline)
- Реальный размер 974×254 — flex-shrink порезал до ~50% запрошенного
потому что parent (Modal body) overflow-hidden + max-h:calc(100vh-2rem)
на узком viewport (497px) не вмещал 520+ контента.
- Класса 'leaflet-container' на div НЕТ — L.map() так и не вызвался.
Корень: Modal от @nstart/ui рендерит children только после
useAnimatedPresence фликает isMounted=true (на след. рендер после
isOpen=true). Мой useEffect фаерится РАНЬШЕ — div ещё не в DOM,
mapDivRef.current=null. Старый guard 'if (!div) return' выходил
БЕЗ schedule RAF — больше никогда не пробовал.
Фикс в tryInit: schedule RAF и для null div, и для 0-size. Cap 100
кадров (~1.6s). Это finally доводит до L.map() когда div появится
и получит размер.
Plus: shrink-0 + min-height: 520 на map div чтобы flex-shrink не
ужимал до 254px на узких viewport. Visual quality 520px stable.
Console показывает no errors AND no tile requests. Это значит
L.map(div) либо не вызывается, либо вызывается с 0×0 контейнером
(Leaflet не запрашивает 0 tiles при 0-viewport).
Гипотеза: 'flex-1' + 'height: 60vh' конфликтуют с Modal transform
animation (translate-y-2 scale-[0.98] во время fade-in). На
момент useEffect div.clientHeight иногда читался 0 несмотря на
inline style.
Decouple полностью: hardcode '520px' pixel height, display:block,
width:100%. Не использует flex layout. Стабильно >0 на любом
viewport.
Предыдущий fix с ResizeObserver + RAF не помог: на пользовательском
скрине карта снова blank, нет даже zoom controls и attribution.
Гипотеза: Modal от @nstart/ui использует display:none → block для
animation. В момент useEffect div ещё имеет 0×0 (parent display:none
makes all children clientWidth/Height = 0 regardless of inline style).
Leaflet L.map(div) с 0×0 контейнером не вычисляет initial tile grid,
и invalidateSize позже не recompute'ит некоторые internal collections.
Решение: recursive RAF poll до тех пор пока div.clientWidth и
clientHeight > 0, тогда init'им L.map(). Cap на 100 кадров (~1.6s)
fallback init с тем что есть — на случай если modal никогда не
покажется по какой-то причине.
ResizeObserver всё равно ставится после init для window resize /
dev tools toggle / responsive — но не критичен для первого рендера.
AOI map blank:
Pickер открывался с пустым контейнером — без zoom controls и
attribution. Leaflet вычисляет tile grid от containerSize в момент
L.map() create(); modal animation + flex-1 layout давали 0×0 на
первом кадре, тайлы не запрашивались, и map оставался blank.
setTimeout(invalidateSize, 100ms) не покрывал случай когда modal
ещё анимировал.
Решение: ResizeObserver на map div + invalidateSize при каждом
resize. Покрывает modal fade-in, dev tools toggle, window resize.
Плюс requestAnimationFrame invalidate для initial flush. Inline
style.minHeight=420/height=60vh — защита если flex не распределил
высоту.
FK select loading state:
Раньше при isLoading select disabled + показывал '…'. Теперь:
- chevron справа заменяется на animated CircleNotchIcon (animate-spin)
- aria-busy=true для screen readers
- цвет spinner ultramarain — маркирует активность
Refactor: chevron перенесён из background-image в абсолютно
позиционированный <div pointer-events-none>. Pointer-events-none
не блокирует click по нативному select.
Admin кликает 'AOI фильтр' на странице словаря → открывается
dialog с картой OSM. Рисует rectangle (→ bbox CSV) или
polygon → onApply применяется к recordsQuery как ?bbox= или
?polygon=GeoJSON.
Server-side parsing уже есть (BoundingBox.parse, GeoJsonPolygon.parse
в ordinis-rest-api) — подключили UI поверх.
Активный AOI отображается inline над таблицей с кнопкой
'Сбросить'. Edit shape возможен через leaflet-draw edit/remove
controls.
Зависимости: leaflet 1.9.4 + react-leaflet 5 + leaflet-draw 1.0.4
+ types. Bundle +231KB gzip 62KB — приемлемо для AOI-only feature
(map работает без MapLibre WASM, OSM tiles — публичные).
Picker self-contained: монтируется/уничтожается с диалогом,
invalidateSize 100ms после open чтобы Leaflet корректно посчитал
container size после modal animation.
Zimin A.N.