muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

adaptive sticker scale

Browse source
This commit is contained in:
Fedor Katurov 2020-02-11 15:35:13 +07:00
parent ef5cd0cdef
commit a1c55befa2
5 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/map/Sticker/index.tsx
View file

@ -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]);

8
src/map/Stickers/index.tsx
View file

@ -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]);