diff --git a/package.json b/package.json index 2aff043..f29bbf5 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "eslint-loader": "^4.0.2", "file-saver": "^2.0.0", "gpx-parser-builder": "^1.0.2", - "leaflet": "^1.6.0", + "leaflet": "1.6.0", "leaflet-editable": "^1.1.0", "leaflet-geometryutil": "^0.9.0", "leaflet-routing-machine": "^3.2.12", diff --git a/src/components/StickerDesc.tsx b/src/components/StickerDesc.tsx index 7b7cfa5..ab20af4 100644 --- a/src/components/StickerDesc.tsx +++ b/src/components/StickerDesc.tsx @@ -21,12 +21,12 @@ class StickerDesc extends React.PureComponent { }; blockMouse = e => { + e.preventDefault(); e.stopPropagation(); this.input.focus(); }; input: HTMLTextAreaElement; - // todo: pass here locker for moving markers from Sticker.js render() { const { value: text } = this.props; @@ -34,10 +34,10 @@ class StickerDesc extends React.PureComponent { return (
{ } } -export { StickerDesc }; \ No newline at end of file +export { StickerDesc }; diff --git a/src/map/Sticker/index.tsx b/src/map/Sticker/index.tsx index 3545819..28bc4c3 100644 --- a/src/map/Sticker/index.tsx +++ b/src/map/Sticker/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useCallback, useRef, useState } from 'react'; -import { marker, Marker } from 'leaflet'; +import { DivIcon, marker, Marker } from 'leaflet'; import { IStickerDump } from '~/redux/map/types'; import { STICKERS } from '~/constants/stickers'; import { StickerDesc } from '~/components/StickerDesc'; @@ -110,7 +110,7 @@ const Sticker: React.FC = ({ MainMap.enableClicks(); }, - [onChange, sticker, MainMap] + [onChange, sticker] ); const onDrag = React.useCallback( @@ -183,7 +183,7 @@ const Sticker: React.FC = ({ document.removeEventListener('mousemove', onDrag); document.removeEventListener('mouseup', onDragStop); }; - }, [dragging, onDrag]); + }, [dragging, onDrag, onDragStop]); // Initial leaflet marker creation, when element (dom element div) is ready React.useEffect(() => { @@ -199,7 +199,7 @@ const Sticker: React.FC = ({ return () => { item.remove(); }; - }, [element]); + }, [sticker.latlng, element]); useEffect(() => { if (!layer) return; diff --git a/src/utils/map/ArrowsLayer.ts b/src/utils/map/ArrowsLayer.ts index c62fb94..ef46715 100644 --- a/src/utils/map/ArrowsLayer.ts +++ b/src/utils/map/ArrowsLayer.ts @@ -5,41 +5,12 @@ */ -import { LatLngLiteral, LayerGroup, Map, LatLng, Marker, marker } from 'leaflet'; -import { arrowClusterIcon, createArrow, createArrowIcon } from '~/utils/arrow'; +import { LatLng, LatLngLiteral, LayerGroup, Map, Marker } from 'leaflet'; +import { arrowClusterIcon, createArrow } from '~/utils/arrow'; import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js'; import { angleBetweenPoints, dist2, middleCoord } from '~/utils/geom'; -interface MidPoint { - latlng: LatLngLiteral; - angle: number; -} - -// interface IPrevState { -// route: LatLngLiteral[]; -// markers: Marker[]; -// midpoints: MidPoint[]; -// } - class ArrowsLayer extends LayerGroup { - /* - without remove optimization - - first: - recalc: 5.469970703125ms - remove: 0.203857421875ms - add: 53.658935546875ms - total: 60.986083984375ms - - last: - recalc: 0.010986328125ms - remove: 0.220947265625ms - add: 0.580078125ms - total: 2.721923828125ms - - with remove optimization - */ - constructor(props) { super(props); } @@ -54,7 +25,7 @@ class ArrowsLayer extends LayerGroup { // Reacreating all the markers - setLatLngs = (route: LatLngLiteral[]): void => { + setLatLngs = (route: LatLng[]): void => { if (!this.map) return; this.arrowLayer.clearLayers(); diff --git a/src/utils/map/DomMarker.js b/src/utils/map/DomMarker.js deleted file mode 100644 index ef67b5f..0000000 --- a/src/utils/map/DomMarker.js +++ /dev/null @@ -1,21 +0,0 @@ -import { DivIcon } from 'leaflet'; - -export const DomMarker = DivIcon.extend({ - initialize: function (options: any) { - this.options = options; - }, - - options: { - element: null // a initialized DOM element - // same options as divIcon except for html - }, - - createIcon: function() { - const { html, element, className } = this.options; - - this._setIconStyles(element, 'icon'); - - return element; - } -}); - diff --git a/src/utils/map/DomMarker.ts b/src/utils/map/DomMarker.ts new file mode 100644 index 0000000..4f6c42c --- /dev/null +++ b/src/utils/map/DomMarker.ts @@ -0,0 +1,38 @@ +import { DivIcon, DivIconOptions } from 'leaflet'; +// +// export const DomMarker = DivIcon.extend({ +// initialize: function (options) { +// this.options = options; +// }, +// +// options: { +// element: null // a initialized DOM element +// // same options as divIcon except for html +// }, +// +// createIcon: function() { +// const { element } = this.options; +// +// this._setIconStyles(element, 'icon'); +// +// return element; +// } +// }); + +export interface DomMarkerProps extends DivIconOptions { + element: HTMLElement +} + +export class DomMarker extends DivIcon { + element: HTMLElement + + constructor({ element, ...props }: DomMarkerProps) { + super(props); + this.element = element; + } + + createIcon(oldicon?: HTMLElement) { + this.element.classList.add('icon') + return this.element; + } +} diff --git a/src/utils/map/OsrmRouter.ts b/src/utils/map/OsrmRouter.ts index 3e30da2..1b3a461 100644 --- a/src/utils/map/OsrmRouter.ts +++ b/src/utils/map/OsrmRouter.ts @@ -4,7 +4,7 @@ import { CLIENT } from '~/config/frontend'; import { DomMarker } from '~/utils/map/DomMarker'; import { MainMap } from '~/constants/map'; -const createWaypointMarker = (): DomMarker => { +const createWaypointMarker = () => { const element = document.createElement('div'); return new DomMarker({ diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts index 506b4b6..4c6ffb0 100644 --- a/src/utils/renderer.ts +++ b/src/utils/renderer.ts @@ -448,8 +448,6 @@ const composeStickerImage = async ( sticker: string, scale: number ): Promise => { - console.log({ scale }); - const rad = 56; const tX = (Math.cos(angle + Math.PI) * rad - 30 - 6) * scale + x; const tY = (Math.sin(angle + Math.PI) * rad - 30 - 6) * scale + y;