adaptive sticker scale

src/map/Sticker/index.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { DomMarker } from '~/utils/map/DomMarker';
 import { createPortal } from 'react-dom';
 import { MapContainer, MainMap } from '~/constants/map';
+import { getAdaptiveScale } from '~/utils/dom';
 
 interface IProps {
   sticker: IStickerDump;
@@ -153,7 +154,7 @@ const Sticker: React.FC<IProps> = ({
   useEffect(() => {
     if (!wrapper || !wrapper.current) return;
 
-    const scale = zoom / 13;
+    const scale = getAdaptiveScale(zoom) // adaptive zoom :-)
 
     wrapper.current.style.transform = `scale(${scale}) perspective(1px)`
   }, [zoom, wrapper]);

src/map/Stickers/index.tsx

@@ -18,8 +18,8 @@ const Stickers: FC<IProps> = memo(({ stickers, is_editing, mapSetSticker, mapDro
   const [zoom, setZoom] = useState(16);
 
   const onZoomChange = useCallback(
-    (event: LeafletEvent) => {
+    (event) => {
-      setZoom(event.target._zoom);
+      setZoom(event.zoom);
     },
     [setZoom]
   );
@@ -29,10 +29,10 @@ const Stickers: FC<IProps> = memo(({ stickers, is_editing, mapSetSticker, mapDro
 
     const item = new FeatureGroup().addTo(MainMap.stickerLayer);
     setLayer(item);
-    MainMap.on('zoomend', onZoomChange);
+    MainMap.on('zoomanim', onZoomChange);
 
     return () => {
-      MainMap.off('zoomend', onZoomChange);
+      MainMap.off('zoomanim', onZoomChange);
       MainMap.stickerLayer.removeLayer(item);
     };
   }, [MainMap, onZoomChange]);

src/redux/editor/sagas.ts

@@ -66,7 +66,7 @@ import { MainMap } from '~/constants/map';
 import { EDITOR_INITIAL_STATE } from '.';
 import { Unwrap } from '~/utils/middleware';
 import uuid from 'uuid';
-import { getRandomColor } from '~/utils/dom';
+import { getRandomColor, getAdaptiveScale } from '~/utils/dom';
 
 const hideLoader = () => {
   document.getElementById('loader').style.opacity = String(0);
@@ -141,7 +141,11 @@ function* getRenderData() {
 
   yield composeArrows({ points, ctx });
   yield composeDistMark({ ctx, points, distance });
-  yield composeStickers({ stickers: sticker_points, ctx, zoom: MainMap.getZoom() / 13 });
+  yield composeStickers({
+    stickers: sticker_points,
+    ctx,
+    zoom: getAdaptiveScale(MainMap.getZoom()),
+  });
 
   yield put(editorSetRenderer({ info: 'Готово', progress: 1 }));
 

src/styles/stickers.less

@@ -111,7 +111,11 @@
 
 .sticker-wrapper {
   will-change: transform;
-  transition: transform 50ms;
+  transition: transform 250ms;
+
+  @media (hover: hover) {
+    transition: transform 0ms;
+  }
 }
 
 .sticker-arrow {

src/utils/dom.ts

@@ -11,4 +11,8 @@ export const getStyle = (oElm: any, strCssRule: string): string => {
 
 export const getRandomColor = () => {
   return `hsla(${(Math.floor(Math.random() * 360))}, 100%, 50%, 0.4)`
-}
+}
+
+export const getAdaptiveScale = (zoom: number): number => (
+  Math.min(1, Math.max(0.4, 1 / (2 ** (13 - zoom))))
+);