From b037bc00d970ae18a1163eace17394520ba8e846 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Thu, 7 Mar 2019 17:34:52 +0700
Subject: [PATCH] dist marks

---
 src/index.tsx           |  3 +--
 src/modules/KmMarks.ts  |  4 ++--
 src/redux/user/sagas.ts |  2 +-
 src/styles/map.less     | 16 ++++++++++++++++
 src/utils/renderer.ts   | 11 ++++++++---
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 0a5e939..3156715 100644
--- a/src/index.tsx
+++ b/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
diff --git a/src/modules/KmMarks.ts b/src/modules/KmMarks.ts
index 8c64fdd..0fee9ca 100644
--- a/src/modules/KmMarks.ts
+++ b/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">
diff --git a/src/redux/user/sagas.ts b/src/redux/user/sagas.ts
index d8ae46f..be287fb 100644
--- a/src/redux/user/sagas.ts
+++ b/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 }));
diff --git a/src/styles/map.less b/src/styles/map.less
index d835ee7..bffc38f 100644
--- a/src/styles/map.less
+++ b/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;
+      }
     }
   }
 }
diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts
index 2d20aaf..5cea0a7 100644
--- a/src/utils/renderer.ts
+++ b/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,