end markers

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]

src/index.tsx

@@ -2,12 +2,10 @@
 
   ## BUGS
 
-  todo fix arrows (can't reproduce now :-( )
+  todo moving out the screen makes stickers editable again
-  done adding route, applying it and adding again and deleting it makes ghost points on the map
-
   ## 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/

src/modules/InteractivePoly.ts

@@ -405,6 +405,7 @@ export class Component extends Polyline {
 
     this.setLatLngs(latlngs);
     this.fire('latlngschange', { latlngs });
+    this.showVisibleMarkers();
     this.startDrawing();
   };
 

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) => {
+    this.distance = latlngs.reduce((dist, current, index) => {
-      if (index >= latlngs.length - 1) return;
+      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: `
+        <div class="leaflet-km-dist">
+          ${parseFloat(distance.toFixed(1))}
+        </div>
+      `,
+      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);
     }
   });
 });

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 {
+  .vertex-icon-mixin(4px, auto);
-    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;
-  }
 
   &: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;
+    }
   }
 }