scaling stickers

src/map/Map/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 
 import { MainMap } from '~/constants/map';
 import { createPortal } from 'react-dom';
@@ -18,7 +18,6 @@ import 'leaflet/dist/leaflet.css';
 import { selectEditorEditing, selectEditorMode, selectEditorGpx } from '~/redux/editor/selectors';
 import { MODES } from '~/constants/modes';
 import { selectUserLocation } from '~/redux/user/selectors';
-import { GPX_ROUTE_COLORS } from '~/redux/editor/constants';
 
 const mapStateToProps = state => ({
   provider: selectMapProvider(state),
@@ -41,67 +40,63 @@ type IProps = React.HTMLAttributes<HTMLDivElement> &
   ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {};
 
-const MapUnconnected: React.FC<IProps> = ({
-  provider,
-  stickers,
-  editing,
-  mode,
-  location,
-  gpx,
+const MapUnconnected: React.FC<IProps> = memo(
+  ({
+    provider,
+    stickers,
+    editing,
+    mode,
+    location,
+    gpx,
 
-  mapClicked,
-  mapSetSticker,
-  mapDropSticker,
-}) => {
-  const onClick = React.useCallback(
-    event => {
-      if (!MainMap.clickable || mode === MODES.NONE) return;
+    mapClicked,
+    mapSetSticker,
+    mapDropSticker,
+  }) => {
+    const onClick = React.useCallback(
+      event => {
+        if (!MainMap.clickable || mode === MODES.NONE) return;
 
-      mapClicked(event.latlng);
-    },
-    [mapClicked, mode]
-  );
+        mapClicked(event.latlng);
+      },
+      [mapClicked, mode]
+    );
 
-  React.useEffect(() => {
-    MainMap.addEventListener('click', onClick);
+    React.useEffect(() => {
+      MainMap.addEventListener('click', onClick);
 
-    return () => {
-      MainMap.removeEventListener('click', onClick);
-    };
-  }, [MainMap, onClick]);
+      return () => {
+        MainMap.removeEventListener('click', onClick);
+      };
+    }, [MainMap, onClick]);
 
-  return createPortal(
-    <div>
-      <TileLayer provider={provider} map={MainMap} />
+    return createPortal(
+      <div>
+        <TileLayer provider={provider} map={MainMap} />
 
-      <Stickers
-        stickers={stickers}
-        mapSetSticker={mapSetSticker}
-        mapDropSticker={mapDropSticker}
-        is_editing={editing}
-      />
+        <Stickers
+          stickers={stickers}
+          mapSetSticker={mapSetSticker}
+          mapDropSticker={mapDropSticker}
+          is_editing={editing}
+        />
 
-      <Route />
-      <Router />
+        <Route />
+        <Router />
 
-      <KmMarks />
-      <CurrentLocation location={location} />
+        <KmMarks />
+        <CurrentLocation location={location} />
 
-      {gpx.enabled &&
-        gpx.list.map(
-          ({ latlngs, enabled, color }, index) =>
-            enabled && (
-              <GpxPolyline
-                latlngs={latlngs}
-                color={color}
-                key={index}
-              />
-            )
-        )}
-    </div>,
-    document.getElementById('canvas')
-  );
-};
+        {gpx.enabled &&
+          gpx.list.map(
+            ({ latlngs, enabled, color }, index) =>
+              enabled && <GpxPolyline latlngs={latlngs} color={color} key={index} />
+          )}
+      </div>,
+      document.getElementById('canvas')
+    );
+  }
+);
 
 const Map = connect(mapStateToProps, mapDispatchToProps)(MapUnconnected);
 export { Map };

src/map/Sticker/index.tsx

@@ -13,6 +13,7 @@ interface IProps {
   onDragStart?: () => void;
   index: number;
   is_editing: boolean;
+  zoom: number;
 
   mapSetSticker: (index: number, sticker: IStickerDump) => void;
   mapDropSticker: (index: number) => void;
@@ -29,13 +30,16 @@ const getX = e =>
 const Sticker: React.FC<IProps> = ({
   sticker,
   index,
+  is_editing,
+  zoom,
   mapSetSticker,
   mapDropSticker,
-  is_editing,
 }) => {
   const [text, setText] = useState(sticker.text);
   const [layer, setLayer] = React.useState<Marker>(null);
   const [dragging, setDragging] = React.useState(false);
+  const wrapper = useRef(null);
+
   let angle = useRef(sticker.angle);
 
   const element = React.useMemo(() => document.createElement('div'), []);
@@ -146,6 +150,14 @@ const Sticker: React.FC<IProps> = ({
     setText(sticker.text);
   }, [layer, sticker.text]);
 
+  useEffect(() => {
+    if (!wrapper || !wrapper.current) return;
+
+    const scale = zoom / 13;
+
+    wrapper.current.style.transform = `scale(${scale}) perspective(1px)`
+  }, [zoom, wrapper]);
+
   // Attaches onMoveFinished event to item
   React.useEffect(() => {
     if (!layer) return;
@@ -200,8 +212,9 @@ const Sticker: React.FC<IProps> = ({
     element.className = is_editing ? 'sticker-container' : 'sticker-container inactive';
   }, [element, is_editing, layer]);
 
+
   return createPortal(
-    <React.Fragment>
+    <div ref={wrapper} className="sticker-wrapper">
       <div className="sticker-arrow" ref={stickerArrow} />
       <div className={classNames(`sticker-label ${direction}`)} ref={stickerImage}>
         <StickerDesc value={text} onChange={onTextChange} onBlur={onTextBlur} />
@@ -220,7 +233,7 @@ const Sticker: React.FC<IProps> = ({
 
         <div className="sticker-delete" onMouseDown={onDelete} onTouchStart={onDelete} />
       </div>
-    </React.Fragment>,
+    </div>,
     element
   );
 };

src/map/Stickers/index.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState, memo, FC, useEffect, useCallback } from 'react';
 import { IStickerDump } from '~/redux/map/types';
-import { FeatureGroup, Map } from 'leaflet';
+import { FeatureGroup, Map, LeafletEvent } from 'leaflet';
 import { Sticker } from '~/map/Sticker';
 import { mapSetSticker, mapDropSticker } from '~/redux/map/actions';
 import { MainMap } from '~/constants/map';
@@ -8,39 +8,51 @@ import { MainMap } from '~/constants/map';
 interface IProps {
   stickers: IStickerDump[];
   is_editing: boolean;
+
   mapSetSticker: typeof mapSetSticker;
   mapDropSticker: typeof mapDropSticker;
 }
 
-const Stickers: React.FC<IProps> = React.memo(
-  ({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
-    const [layer, setLayer] = React.useState<FeatureGroup>(null);
+const Stickers: FC<IProps> = memo(({ stickers, is_editing, mapSetSticker, mapDropSticker }) => {
+  const [layer, setLayer] = useState<FeatureGroup>(null);
+  const [zoom, setZoom] = useState(16);
 
-    React.useEffect(() => {
-      if (!MainMap) return;
+  const onZoomChange = useCallback(
+    (event: LeafletEvent) => {
+      setZoom(event.target._zoom);
+    },
+    [setZoom]
+  );
 
-      const item = new FeatureGroup().addTo(MainMap.stickerLayer);
-      setLayer(item);
+  useEffect(() => {
+    if (!MainMap) return;
 
-      return () => MainMap.stickerLayer.removeLayer(item);
-    }, [MainMap]);
+    const item = new FeatureGroup().addTo(MainMap.stickerLayer);
+    setLayer(item);
+    MainMap.on('zoomend', onZoomChange);
 
-    return (
-      <div>
-        {layer &&
-          stickers.map((sticker, index) => (
-            <Sticker
-              sticker={sticker}
-              key={`${sticker.set}.${sticker.sticker}.${index}`}
-              index={index}
-              is_editing={is_editing}
-              mapSetSticker={mapSetSticker}
-              mapDropSticker={mapDropSticker}
-            />
-          ))}
-      </div>
-    );
-  }
-);
+    return () => {
+      MainMap.off('zoomend', onZoomChange);
+      MainMap.stickerLayer.removeLayer(item);
+    };
+  }, [MainMap, onZoomChange]);
+
+  return (
+    <div>
+      {layer &&
+        stickers.map((sticker, index) => (
+          <Sticker
+            sticker={sticker}
+            key={`${sticker.set}.${sticker.sticker}.${index}`}
+            index={index}
+            is_editing={is_editing}
+            zoom={zoom}
+            mapSetSticker={mapSetSticker}
+            mapDropSticker={mapDropSticker}
+          />
+        ))}
+    </div>
+  );
+});
 
 export { Stickers };