From 07d4ff9084d2a1b18011c268af58e1adb18ce6e5 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Tue, 26 Feb 2019 17:45:54 +0700
Subject: [PATCH] Arrows: now uses nearest marker's position and icon

---
 src/modules/Poly.ts |  4 +++-
 src/utils/arrow.ts  | 18 ++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/modules/Poly.ts b/src/modules/Poly.ts
index be31610..8c87f78 100644
--- a/src/modules/Poly.ts
+++ b/src/modules/Poly.ts
@@ -57,6 +57,8 @@ export class Poly {
   onVertexShow = (): void => this.editor.setMarkersShown(true);
 
   updateArrows = event => {
+    this.editor.setChanged(true);
+
     const { latlngs } = event;
     this.arrowLayer.clearLayers();
 
@@ -168,7 +170,7 @@ export class Poly {
     showCoverageOnHover: false,
     zoomToBoundsOnClick: false,
     animate: false,
-    maxClusterRadius: 60,
+    maxClusterRadius: 120,
     // disableClusteringAtZoom: 13,
     iconCreateFunction: arrowClusterIcon,
   });
diff --git a/src/utils/arrow.ts b/src/utils/arrow.ts
index 9b20a14..c61b9ac 100644
--- a/src/utils/arrow.ts
+++ b/src/utils/arrow.ts
@@ -1,4 +1,5 @@
 import { divIcon, LatLngLiteral, Marker, marker, DivIcon } from "leaflet";
+import { dist2 } from "$utils/geom";
 
 export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => marker(latlng, {
   draggable: false,
@@ -7,7 +8,7 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
     html: `
       <div class="leaflet-arrow" style="transform: rotate(${angle}deg);">
         <svg width="40" height="40" preserveAspectRatio="xMidYMid">        
-          <use xlink:href="#path-arrow" transform="scale(2)"/>
+          <use xlink:href="#path-arrow" transform="scale(1.6) translate(4)"/>
         </svg>      
       </div>
     `,
@@ -17,6 +18,15 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
   })
 });
 
-export const arrowClusterIcon = (): DivIcon => divIcon({
-  html: `<div class="leaflet-arrow-cluster"></div>`
-});
+export const arrowClusterIcon = (cluster): DivIcon => {
+  console.log(cluster.getAllChildMarkers());
+  const markers = cluster.getAllChildMarkers();
+
+  const nearest = markers.sort((a, b) => (
+    dist2(a.getLatLng(), cluster.getLatLng()) - dist2(b.getLatLng(), cluster.getLatLng())
+  ));
+
+  cluster.setLatLng(nearest[0].getLatLng());
+
+  return nearest[0].options.icon;
+};