scaling stickers

src/redux/editor/sagas.ts

@@ -139,23 +139,9 @@ function* getRenderData() {
   yield composeImages({ geometry, images, ctx });
   yield composePoly({ points, ctx });
 
-  // TODO: make additional dashed lines
-  // gpx.list.forEach(item => {
-  //   if (!gpx.enabled || !item.enabled || !item.latlngs.length) return;
-
-  //   composePoly({
-  //     points: getPolyPlacement(item.latlngs),
-  //     ctx,
-  //     color: item.color,
-  //     opacity: 0.5,
-  //     weight: 9,
-  //     dash: [12, 12],
-  //   });
-  // });
-
   yield composeArrows({ points, ctx });
   yield composeDistMark({ ctx, points, distance });
-  yield composeStickers({ stickers: sticker_points, ctx });
+  yield composeStickers({ stickers: sticker_points, ctx, zoom: MainMap.getZoom() / 13 });
 
   yield put(editorSetRenderer({ info: 'Готово', progress: 1 }));
 

src/redux/map/actions.ts

@@ -79,3 +79,8 @@ export const mapSetAddressOrigin = (address_origin: IMapReducer['address_origin'
   type: MAP_ACTIONS.SET_ADDRESS_ORIGIN,
   address_origin,
 });
+
+export const mapZoomChange = (zoom: number) => ({
+  type: MAP_ACTIONS.ZOOM_CHANGE,
+  zoom,
+});

src/redux/map/constants.ts

@@ -17,5 +17,6 @@ export const MAP_ACTIONS = {
   SET_STICKERS: `${P}-SET_STICKERS`,
   DROP_STICKER: `${P}-DROP_STICKER`,
 
-  MAP_CLICKED: `${P}-MAP_CLICKED`
+  MAP_CLICKED: `${P}-MAP_CLICKED`,
+  ZOOM_CHANGE: `${P}-ZOOM_CHANGE`
 }

src/redux/map/handlers.ts

@@ -14,6 +14,7 @@ import {
   mapSetLogo,
   mapSetAddressOrigin,
   mapSetStickers,
+  mapZoomChange,
 } from './actions';
 
 const setMap = (state: IMapReducer, { map }: ReturnType<typeof mapSet>): IMapReducer => ({
@@ -101,6 +102,11 @@ const setAddressOrigin = (state, { address_origin }: ReturnType<typeof mapSetAdd
   address_origin
 });
 
+const zoomChange = (state, { zoom }: ReturnType<typeof mapZoomChange>): IMapReducer => ({
+  ...state,
+  zoom
+});
+
 export const MAP_HANDLERS = {
   [MAP_ACTIONS.SET_MAP]: setMap,
   [MAP_ACTIONS.SET_PROVIDER]: setProvider,
@@ -116,4 +122,5 @@ export const MAP_HANDLERS = {
   [MAP_ACTIONS.SET_PUBLIC]: setPublic,
   [MAP_ACTIONS.SET_LOGO]: setLogo,
   [MAP_ACTIONS.SET_ADDRESS_ORIGIN]: setAddressOrigin,
+  [MAP_ACTIONS.ZOOM_CHANGE]: zoomChange,
 };

src/redux/map/index.ts

@@ -16,6 +16,7 @@ export interface IMapReducer {
   description: string;
   owner: { id: string };
   is_public: boolean;
+  zoom: number;
 }
 
 export const MAP_INITIAL_STATE: IMapReducer = {
@@ -29,6 +30,7 @@ export const MAP_INITIAL_STATE: IMapReducer = {
   description: '',
   owner: { id: null },
   is_public: false,
+  zoom: 13,
 }
 
 export const map = createReducer(MAP_INITIAL_STATE, MAP_HANDLERS)

src/redux/map/sagas.ts

@@ -328,6 +328,10 @@ function* setChanged() {
   yield put(editorSetChanged(true));
 }
 
+function* onZoomChange() {
+
+}
+
 export function* mapSaga() {
   yield takeEvery(
     [MAP_ACTIONS.SET_ROUTE, MAP_ACTIONS.SET_STICKER, MAP_ACTIONS.SET_STICKERS],

src/redux/map/selectors.ts

@@ -6,4 +6,5 @@ export const selectMapLogo = (state: IState) => state.map.logo;
 export const selectMapRoute= (state: IState) => state.map.route;
 export const selectMapStickers = (state: IState) => state.map.stickers;
 export const selectMapTitle= (state: IState) => state.map.title;
-export const selectMapAddress = (state: IState) => state.map.address;
+export const selectMapAddress = (state: IState) => state.map.address;
+export const selectMapZoom = (state: IState) => state.map.zoom;

src/redux/store.ts

@@ -19,6 +19,8 @@ import { mapSaga } from '~/redux/map/sagas';
 import { watchLocation, getLocation } from '~/utils/window';
 import { LatLngLiteral } from 'leaflet';
 import { setUserLocation } from './user/actions';
+import { MainMap } from '~/constants/map';
+import { mapZoomChange } from './map/actions';
 
 const userPersistConfig: PersistConfig = {
   key: 'user',
@@ -73,3 +75,4 @@ history.listen((location, action) => {
 });
 
 watchLocation((location: LatLngLiteral) => store.dispatch(setUserLocation(location)));
+MainMap.on('zoomend', event => store.dispatch(mapZoomChange(event.target._zoom)))