touchHinter wider on mobile;

package-lock.json

@@ -794,14 +794,14 @@
       "integrity": "sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg=="
     },
     "@types/geojson": {
-      "version": "7946.0.5",
+      "version": "7946.0.6",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.6.tgz",
-      "integrity": "sha512-rLlMXpd3rdlrp0+xsrda/hFfOpIxgqFcRpk005UKbHtcdFK+QXAjhBAPnvO58qF4O1LdDXrcaiJxMgstCIlcaw=="
+      "integrity": "sha512-f6qai3iR62QuMPPdgyH+LyiXTL2n9Rf62UniJjV7KHrbiwzLTZUKsdq0mFSTxAHbO7JvwxwC4tH0m1UnweuLrA=="
     },
     "@types/leaflet": {
-      "version": "1.4.1",
+      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.3.tgz",
-      "integrity": "sha512-2Z4AM/kf8Yif7i0YazjG/ures+0zIarc4BDP8QqvcCIiI8GWbCxkfJLf7DWMtMPRZv0bh+a1ZSJRTuSwOtPzzQ==",
+      "integrity": "sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==",
       "requires": {
         "@types/geojson": "*"
       }

package.json

@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@types/classnames": "^2.2.7",
-    "@types/leaflet": "^1.4.1",
+    "@types/leaflet": "^1.4.3",
     "@types/node": "^11.9.0",
     "@types/react": "16.8.1",
     "axios": "^0.18.0",

src/modules/InteractivePoly.ts

@@ -1,6 +1,7 @@
 /*
-  todo IMPORTANT: select closest point on drag instead of first
+  done IMPORTANT: select closest point on drag instead of first
-  todo add touch hint poly
+  done add touch hint poly
+  done approx radius for dragFindNearest
 */
 
 import {
@@ -12,9 +13,11 @@ import {
   divIcon,
   LayerGroup,
   LatLng,
-  LeafletMouseEvent, latLng, LatLngLiteral,
+  LeafletMouseEvent,
+  latLng,
+  LatLngLiteral,
 } from 'leaflet';
-import { distKm, getPolyLength, pointBetweenPoints, pointInArea } from "$utils/geom";
+import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom";
 
 interface InteractivePolylineOptions extends PolylineOptions {
   maxMarkers?: number,
@@ -35,6 +38,7 @@ export class Component extends Polyline {
     this.constrLine = new Polyline([], this.constraintsStyle);
 
     this.startDragHinting();
+    this.touchHinter.on('click', console.log);
   }
 
   setPoints = (latlngs: LatLng[]) => {
@@ -167,7 +171,7 @@ export class Component extends Polyline {
   };
 
   hideDragHint = (): void => {
-    this._map.removeLayer(this.hintMarker);
+    if (this._map.hasLayer(this.hintMarker)) this._map.removeLayer(this.hintMarker);
   };
 
   showDragHint = (): void => {
@@ -189,13 +193,11 @@ export class Component extends Polyline {
   };
 
   startDragHintMove = (event: LeafletMouseEvent): void => {
-    console.log('hoop');
     event.originalEvent.stopPropagation();
     event.originalEvent.preventDefault();
 
-    // console.log(this.closestLayerPoint(event.latlng));
-
     const prev = this.dragHintFindNearest(event.latlng);
+
     if (prev < 0) return;
 
     this.hint_prev_marker = prev;
@@ -227,6 +229,7 @@ export class Component extends Polyline {
     this.markers.splice((this.hint_prev_marker + 1), 0, this.createMarker(latlng));
     this.insertLatLng(latlng, this.hint_prev_marker + 1);
     this.stopDragHintMove();
+    this.hideDragHint();
   };
 
   dragHintChangeDistance = (index: number, current: LatLngLiteral): void => {
@@ -246,13 +249,19 @@ export class Component extends Polyline {
   };
 
   dragHintFindNearest = (latlng: LatLng): any => {
-    const latlngs = this.getLatLngs();
+    const latlngs = this.getLatLngs() as LatLng[];
 
-    return latlngs.findIndex((current, index) => {
+    const neighbours = latlngs.filter((current, index) => {
       const next = latlngs[index + 1] as LatLng;
 
-      return (next && pointInArea(current, next, latlng) && pointBetweenPoints(current, next, latlng));
+      return (next && pointInArea(current, next, latlng));
-    });
+    })
+      .map(el => latlngs.indexOf(el))
+      .sort((a, b) => (
+        distToSegment(latlngs[a], latlngs[a + 1], latlng) - distToSegment(latlngs[b], latlngs[b + 1], latlng)
+      ));
+
+    return neighbours.length > 0 ? neighbours[0] : -1;
   };
 
   dragHintMove = (event: LeafletMouseEvent): void => {
@@ -524,9 +533,8 @@ Component.addInitHook(function () {
       this.map.on('moveend', this.updateMarkers);
 
       if (window.innerWidth < 768) {
-        this.touchHinter.setStyle({ weight: 30 });
+        this.touchHinter.setStyle({ weight: 50 });
       }
-      console.log('touchHinter', this.touchHinter);
     }
   });
 

src/utils/geom.ts

@@ -50,11 +50,11 @@ export const getPolyLength = (latlngs: LatLngLiteral[]): number => {
 };
 
 // if C between A and B
-export const pointInArea = (A: LatLng, B: LatLng, C: LatLng): boolean => (
+export const pointInArea = (A: LatLng, B: LatLng, C: LatLng, radius: number = 0.001): boolean => (
-  C.lat >= Math.min(A.lat, B.lat) &&
+  C.lng <= Math.max(A.lng + radius, B.lng + radius) &&
-  C.lat <= Math.max(A.lat, B.lat) &&
+  C.lat <= Math.max(A.lat + radius, B.lat + radius) &&
-  C.lng >= Math.min(A.lng, B.lng) &&
+  C.lat >= Math.min(A.lat - radius, B.lat - radius) &&
-  C.lng <= Math.max(A.lng, B.lng)
+  C.lng >= Math.min(A.lng - radius, B.lng - radius)
 );
 
 
@@ -80,6 +80,6 @@ const distToSegmentSquared = (A: LatLng, B: LatLng, C: LatLng): number => {
     });
 };
 
-const distToSegment = (A: LatLng, B: LatLng, C: LatLng): number => Math.sqrt(distToSegmentSquared(A, B, C));
+export const distToSegment = (A: LatLng, B: LatLng, C: LatLng): number => Math.sqrt(distToSegmentSquared(A, B, C));
 // if C between A and B
 export const pointBetweenPoints = (A: LatLng, B: LatLng, C: LatLng): boolean => (distToSegment(A, B, C) < 0.01);