dist marks

src/index.tsx

@@ -5,8 +5,6 @@
 
 
   ## FEATURES
-  todo arrows on screenshot
-
   todo refactor reducer to use is_ prefix for editing and etc (mb move them to status object)
   todo tower sticker
   todo route description
@@ -24,6 +22,7 @@
 
   ## DONE
 
+  done arrows on screenshot
   done public maps
     done editing map on map list
     done setting map public on map list

src/modules/KmMarks.ts

@@ -77,7 +77,7 @@ class Component extends LayerGroup {
 
   createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, {
     draggable: false,
-    interactive: true,
+    interactive: false,
     icon: divIcon({
       html: `
         <div class="leaflet-km-dist" style="transform: translate(-50%, -50%) rotate(${allwaysPositiveAngleDeg(angle)}deg);">
@@ -92,7 +92,7 @@ class Component extends LayerGroup {
 
   createEndMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, {
     draggable: false,
-    interactive: true,
+    interactive: false,
     icon: divIcon({
       html: `
         <div class="leaflet-km-dist">

src/redux/user/sagas.ts

@@ -364,9 +364,9 @@ function* getRenderData() {
   yield put(setRenderer({ info: 'Отрисовка', progress: 0.5 }));
 
   yield composeImages({ geometry, images, ctx });
-  yield composeDistMark({ ctx, points, distance });
   yield composePoly({ points, ctx });
   yield composeArrows({ points, ctx });
+  yield composeDistMark({ ctx, points, distance });
   yield composeStickers({ stickers, ctx });
 
   yield put(setRenderer({ info: 'Готово', progress: 1 }));

src/styles/map.less

@@ -141,6 +141,17 @@
     position: absolute;
     z-index: -10;
     padding: 2px 16px 2px 4px;
+
+    &::after {
+      content: ' ';
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      background: white;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
   }
 
   &.right {
@@ -148,6 +159,11 @@
       padding: 2px 4px 2px 16px;
       left: -3px;
       right: auto;
+
+      &::after {
+        left: 5px;
+        right: auto;
+      }
     }
   }
 }

src/utils/renderer.ts

@@ -283,8 +283,8 @@ const measureDistRect = (
   reversed: boolean,
 ) => ({
   rectX: reversed ? (x - width - 12) : x - 8,
-  rectY: (y - 4 - (height / 2)),
-  rectW: width + 16,
+  rectY: (y - 2 - (height / 2)),
+  rectW: reversed ? (width + 22) : (width + 20),
   rectH: height + 4,
   textX: reversed ? (x - width - 8) : x + 8
 });
@@ -375,7 +375,7 @@ export const composeDistMark = (
   ctx.font = 'bold 12px "Helvetica Neue", Arial';
 
   const angle = angleBetweenPoints(points[points.length - 2], points[points.length - 1]);
-  const dist = parseFloat(distance.toFixed(2));
+  const dist = parseFloat(distance.toFixed(1));
   const { x, y } = points[points.length - 1];
   const { width, height } = measureDistText(ctx, String(dist), 16);
   const {
@@ -385,6 +385,11 @@ export const composeDistMark = (
   roundedRect(ctx, rectX, rectY, rectW, rectH, '#ff3344', 2);
 
   ctx.fillStyle = 'white';
+  ctx.beginPath();
+  ctx.arc(x, y, 5, 0, 360);
+  ctx.closePath();
+  ctx.fill();
+
   ctx.fillText(
     String(dist),
     textX,