From a1c55befa2217fc875e2135e1718b06677b28f11 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 11 Feb 2020 15:35:13 +0700
Subject: [PATCH] adaptive sticker scale

---
 src/map/Sticker/index.tsx  | 3 ++-
 src/map/Stickers/index.tsx | 8 ++++----
 src/redux/editor/sagas.ts  | 8 ++++++--
 src/styles/stickers.less   | 6 +++++-
 src/utils/dom.ts           | 6 +++++-
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/map/Sticker/index.tsx b/src/map/Sticker/index.tsx
index 25f9148..3545819 100644
--- a/src/map/Sticker/index.tsx
+++ b/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]);
diff --git a/src/map/Stickers/index.tsx b/src/map/Stickers/index.tsx
index 52170d1..0d155bc 100644
--- a/src/map/Stickers/index.tsx
+++ b/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) => {
-      setZoom(event.target._zoom);
+    (event) => {
+      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]);
diff --git a/src/redux/editor/sagas.ts b/src/redux/editor/sagas.ts
index 77a5f42..2fc13f6 100644
--- a/src/redux/editor/sagas.ts
+++ b/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 }));
 
diff --git a/src/styles/stickers.less b/src/styles/stickers.less
index 315524d..b676bd3 100644
--- a/src/styles/stickers.less
+++ b/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 {
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 16ff712..a75ae01 100644
--- a/src/utils/dom.ts
+++ b/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)`
-}
\ No newline at end of file
+}
+
+export const getAdaptiveScale = (zoom: number): number => (
+  Math.min(1, Math.max(0.4, 1 / (2 ** (13 - zoom))))
+);
\ No newline at end of file