From 653dd8ace19aebaf5bf433f73ca900490e01930d Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Mon, 4 Mar 2019 12:59:00 +0700
Subject: [PATCH] better km marks

---
 src/modules/KmMarks.ts | 14 ++++++++------
 src/styles/map.less    |  9 +++++----
 src/utils/geom.ts      | 25 ++++++++++++++++---------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/modules/KmMarks.ts b/src/modules/KmMarks.ts
index 779b7ec..bdcdbb2 100644
--- a/src/modules/KmMarks.ts
+++ b/src/modules/KmMarks.ts
@@ -1,7 +1,7 @@
 import { divIcon, LatLngLiteral, LayerGroup, Map, marker, Marker } from "leaflet";
 import { arrowClusterIcon, createArrow } from "$utils/arrow";
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
-import { angleBetweenPoints, dist2, distKm, middleCoord, pointOnDistance } from "$utils/geom";
+import { allwaysPositiveAngleDeg, angleBetweenPoints, distKm } from "$utils/geom";
 
 interface KmMarksOptions {
   showMiddleMarkers: boolean,
@@ -68,17 +68,19 @@ class Component extends LayerGroup {
 
       return sum;
     }, 0);
+
+    console.log(kmMarks);
   };
 
   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: rotate(${angle}deg);">
-        ${distance}
-      </div>
-    `,
+        <div class="leaflet-km-dist" style="transform: translate(0, 0) rotate(${allwaysPositiveAngleDeg(angle)}deg);">
+          ${distance}
+        </div>
+      `,
       className: 'leaflet-km-marker',
       iconSize: [11, 11],
       iconAnchor: [6, 6]
diff --git a/src/styles/map.less b/src/styles/map.less
index 1051222..2d57d36 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -106,17 +106,18 @@
   .leaflet-km-dist {
     background: @red_secondary;
     color: white;
-    border-radius: 2px;
-    font-size: 9px;
+    border-radius: 4px;
+    font-size: 12px;
     text-align: center;
     min-width: 20px;
-    height: 12px;
+    height: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     top: 0;
-    left: -5px;
+    left: -4px;
+    font-weight: bold;
 
   }
 }
diff --git a/src/utils/geom.ts b/src/utils/geom.ts
index 84ab861..85b2045 100644
--- a/src/utils/geom.ts
+++ b/src/utils/geom.ts
@@ -87,15 +87,22 @@ export const pointBetweenPoints = (A: LatLng, B: LatLng, C: LatLng): boolean =>
 export const angleBetweenPoints = (A: Point, B: Point): number => parseFloat(((Math.atan2(B.y - A.y, B.x - A.x))* 180 / Math.PI).toFixed());
 export const angleBetweenPointsRad = (A: Point, B: Point): number => ((Math.atan2(B.x - A.x, B.y - A.y)));
 
-export const pointOnDistance = (A: Point, B: Point, shift: number): Point => {
-  const c = Math.sqrt((((B.x - A.x) ** 2) + ((B.y - A.y) ** 2)));
-  const angle = angleBetweenPointsRad(A, B);
+// export const pointOnDistance = (A: Point, B: Point, shift: number): Point => {
+//   const c = Math.sqrt((((B.x - A.x) ** 2) + ((B.y - A.y) ** 2)));
+//   const angle = angleBetweenPointsRad(A, B);
+//
+//   // console.log({ angle, c, shift });
+//   const x = Math.floor(B.x - c * Math.sin(angle) * shift);
+//   const y = Math.floor(B.y - c * Math.cos(angle) * shift);
+//
+//   // console.log({ x, y });
+//
+//   return new Point(x, y);
+// };
 
-  // console.log({ angle, c, shift });
-  const x = Math.floor(B.x - c * Math.sin(angle) * shift);
-  const y = Math.floor(B.y - c * Math.cos(angle) * shift);
+export const allwaysPositiveAngleDeg = (angle: number): number => {
+  const res = (angle >= -90 && angle <= 90) ? angle : (180 + angle)
+  console.log(`${angle} ==> ${res}`)
 
-  // console.log({ x, y });
-
-  return new Point(x, y);
+  return res;
 };