diff --git a/src/constants/app_info.ts b/src/constants/app_info.ts index 647d2d0..e39478c 100644 --- a/src/constants/app_info.ts +++ b/src/constants/app_info.ts @@ -13,6 +13,8 @@ export const APP_INFO = { 'Приложение для vk', // [11.12.18] 'Фильтр в диалоге поиска карт', // [13.12.18] 'Экспорт GPX', // [18.02.19] + 'Улучшенный редактор ломанных', // [23.02.19] + 'Отметки расстояний и стрелки', // [04.03.19] ], [ 'Первый коммит', // [15.08.18] diff --git a/src/index.tsx b/src/index.tsx index 07ec1a0..e554cef 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,12 +2,10 @@ ## BUGS - todo fix arrows (can't reproduce now :-( ) - done adding route, applying it and adding again and deleting it makes ghost points on the map - + todo moving out the screen makes stickers editable again ## FEATURES - todo make arrows and distance points + done make arrows and distance points todo selecting logo on crop done public maps @@ -20,10 +18,12 @@ todo check canvas support at startup todo check osrm is up - todo maybe: map preview on save + todo maybe: map preview on save (nope) done maybe: stickers clusterization? ## DONE + done fix arrows (can't reproduce now :-( ) + done adding route, applying it and adding again and deleting it makes ghost points on the map done adding/removing points doesn't change distance done cancelling editing someone's else map return back to it's original address /razminochnyj/ diff --git a/src/modules/InteractivePoly.ts b/src/modules/InteractivePoly.ts index cb2f819..2ee587f 100644 --- a/src/modules/InteractivePoly.ts +++ b/src/modules/InteractivePoly.ts @@ -405,6 +405,7 @@ export class Component extends Polyline { this.setLatLngs(latlngs); this.fire('latlngschange', { latlngs }); + this.showVisibleMarkers(); this.startDrawing(); }; diff --git a/src/modules/KmMarks.ts b/src/modules/KmMarks.ts index 5e52c87..b39958d 100644 --- a/src/modules/KmMarks.ts +++ b/src/modules/KmMarks.ts @@ -1,7 +1,8 @@ -import { divIcon, LatLngLiteral, LayerGroup, Map, marker, Marker } from "leaflet"; +import { divIcon, LatLngLiteral, Layer, LayerGroup, Map, marker, Marker } from "leaflet"; import { arrowClusterIcon, createArrow } from "$utils/arrow"; import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js'; import { allwaysPositiveAngleDeg, angleBetweenPoints, distKm } from "$utils/geom"; +import classNames from 'classnames'; interface KmMarksOptions { showMiddleMarkers: boolean, @@ -24,8 +25,11 @@ class Component extends LayerGroup { setLatLngs = (latlngs: LatLngLiteral[]): void => { if (!this.map) return; this.marksLayer.clearLayers(); + this.endMarker.clearLayers(); - if (latlngs.length === 0) return; + this.distance = 0; + + if (latlngs.length <= 1) return; if (this.options.showMiddleMarkers) this.drawMiddleMarkers(latlngs); if (this.options.showEndMarker) this.drawEndMarker(latlngs); @@ -35,8 +39,8 @@ class Component extends LayerGroup { const kmMarks = {}; let last_km_mark = 0; - latlngs.reduce((dist, current, index) => { - if (index >= latlngs.length - 1) return; + this.distance = latlngs.reduce((dist, current, index) => { + if (index >= latlngs.length - 1) return dist; const next = latlngs[index + 1]; const diff = distKm(current, next); @@ -86,8 +90,35 @@ class Component extends LayerGroup { }) }); - drawEndMarker = (latlngs: LatLngLiteral[]): void => { + createEndMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, { + draggable: false, + interactive: true, + icon: divIcon({ + html: ` +
+ ${parseFloat(distance.toFixed(1))} +
+ `, + className: classNames('leaflet-km-marker end-marker', { right: (angle > -90 && angle < 90) }), + iconSize: [11, 11], + iconAnchor: [6, 6] + }), + zIndexOffset: -100, + }); + drawEndMarker = (latlngs: LatLngLiteral[]): void => { + this.endMarker.clearLayers(); + + const current = latlngs[latlngs.length - 2]; + const next = latlngs[latlngs.length - 1 + ]; + + const angle = angleBetweenPoints( + this.map.latLngToContainerPoint(current), + this.map.latLngToContainerPoint(next), + ); + + this.endMarker.addLayer(this.createEndMarker(next, angle, this.distance)); }; options: KmMarksOptions; @@ -100,6 +131,8 @@ class Component extends LayerGroup { maxClusterRadius: 120, iconCreateFunction: arrowClusterIcon, }); + endMarker: LayerGroup = new LayerGroup(); + distance: number = 0; } @@ -108,12 +141,14 @@ Component.addInitHook(function () { if (event.target instanceof KmMarks) { this.map = event.target._map; this.marksLayer.addTo(this.map); + this.endMarker.addTo(this.map); } }); this.once('remove', (event) => { if (event.target instanceof KmMarks) { this.marksLayer.removeFrom(this.map); + this.endMarker.removeFrom(this.map); } }); }); diff --git a/src/styles/map.less b/src/styles/map.less index cc71e33..e39374f 100644 --- a/src/styles/map.less +++ b/src/styles/map.less @@ -40,13 +40,31 @@ } } -.leaflet-vertex-icon, .leaflet-middle-icon { +.vertex-icon-mixin(@left, @right) { + &::after { + content: ' '; + position:absolute; + top:4px; + left: @left; + right: @right; + width:8px; + height:8px; + background: white; + border-radius: 8px; + transform:scale(1); + transition:transform 150ms; + } +} + +.leaflet-vertex-icon { outline: none !important; border-radius: 10px; opacity: 1; border: none; width: 16px !important; - height: 16px !important;margin-left:-8px !important;margin-top:-8px !important; + height: 16px !important; + margin-left:-8px !important; + margin-top:-8px !important; background: transparent; position: absolute; cursor: grab; @@ -72,19 +90,7 @@ } } - &::after { - content: ' '; - position:absolute; - top:4px; - left:4px; - width:8px; - height:8px; - background: white; - //box-shadow: @red_secondary 0 0 0 3px; - border-radius: 8px; - transform:scale(1); - transition:transform 150ms; - } + .vertex-icon-mixin(4px, auto); &:hover { opacity: 1; @@ -100,8 +106,8 @@ } .leaflet-km-marker, .leaflet-km-marker-2 { - background: green; position: absolute; + z-index: 0 !important; .leaflet-km-dist { background: @red_secondary; @@ -111,14 +117,33 @@ text-align: center; min-width: 20px; height: 14px; - display: flex; + display: inline-flex; align-items: center; justify-content: center; position: relative; top: 0; left: -4px; font-weight: bold; + padding: 0 2px; + } +} +.end-marker { + .leaflet-km-dist { + left: auto; + right: -3px; + top: -3px; + position: absolute; + z-index: -10; + padding: 2px 16px 2px 4px; + } + + &.right { + .leaflet-km-dist { + padding: 2px 4px 2px 16px; + left: -3px; + right: auto; + } } }